diff --git a/.angular-cli.json b/.angular-cli.json
new file mode 100644
index 0000000..ffe9454
--- /dev/null
+++ b/.angular-cli.json
@@ -0,0 +1,92 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "OneQlik"
+  },
+  "map": {
+    "moment": "npm:moment",
+    "moment-timezone": "npm:moment-timezone/builds",
+    "ng-pick-datetime":"npm:ng-pick-datetime"
+    
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "app_client",
+      "assets": [
+        "assets",
+        "faviconn.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css",
+        "bootstrap.css",
+     
+        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
+        "../node_modules/ng-pick-datetime/assets/style/picker.min.css",
+        "../node_modules/datatables.net-dt/css/jquery.dataTables.css"
+      ],
+      "moment": {
+        "main": "./moment.js",
+        "defaultExtension": "js"
+     },
+     "ng-pick-datetime": {
+                  "main": "picker.bundle.js",
+                  "defaultExtension": "js"
+              },
+    "moment-timezone": {
+      "main": "./moment-timezone-with-data-2010-2020.min.js",
+      "defaultExtension": "js"
+    },
+      "scripts": [
+        "../node_modules/hammerjs/hammer.min.js",
+        "../node_modules/moment/min/moment.min.js",
+        "../node_modules/crypto-js/crypto-js.js",
+        "../node_modules/jquery/dist/jquery.js",
+        "../node_modules/datatables.net/js/jquery.dataTables.js"
+      
+        
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {}
+   
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..394522f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/**
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..3b66410
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
\ No newline at end of file
diff --git a/GPS_x03.js b/GPS_x03.js
new file mode 100644
index 0000000..87835ed
--- /dev/null
+++ b/GPS_x03.js
@@ -0,0 +1,122 @@
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+/* COBAN GPS_103/GPS303 communication tools                   (c) Pavitra Rastogi 23rd July,2018  */
+/*                                                                                   MIT Licence  */
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+
+'use strict';
+//if (typeof module!='undefined' && module.exports) var Dms = require('./dms'); // ≡ import Dms from 'dms.js'
+
+/**
+ * Creates a header object from device data packet.
+ *
+ * @constructor
+ * @param {string} raw - utf8 encoded packet.
+ * @param {obj} socket - socket from tcp connection between server and device.
+ *
+ * @example
+ *     var parsedHead = new GPS_x03(raw);
+ */
+function GPS_x03(raw, socket) {
+    // do not allow instantiation without 'new'
+    if (!(this instanceof GPS_x03)) throw new TypeError('Object  is not GPS_x03 type');
+
+    this.imei = raw.substr(raw.indexOf('imei:') + 5, 15);
+    this.socket = socket;
+    this.raw = raw;
+    if (raw.search(/^##,imei:/) != -1 && raw.search(/,A;$/) !=-1){
+        this.command = 'login';
+    }
+    else {
+        this.command = 'tracker';
+    }
+}
+
+
+/**
+ * Logs in device in our server.
+ *
+ * 
+ * @returns {boolean} Returns 'true' if login was successful.
+ *
+ * @example
+ *     var gps_x03  = new GPS_x03(raw);
+ *     if(gps_x03.doLogin()){
+ *          //perform some action
+ *     }
+ *     
+ */
+GPS_x03.prototype.doLogin = function() {
+    if (!(this instanceof GPS_x03)) throw new TypeError('Object is not GPS_x03 type');
+
+    this.socket.write('LOAD');
+
+    return true;
+};
+
+
+
+/**
+ * Returns the parsed data for device protocol command 'tracker'.
+ *
+ * @returns {obj} Parsed ping data from device.
+ *
+ * @example
+ *     var gps_x03p1 = new GPS_x03(raw, socket);
+ *     if(gps_x03.doLogin()){
+ *          var parsedData = gps_x03.getPingData();
+ *     }
+ */
+GPS_x03.prototype.getPingData = function() {
+    if (!(this instanceof GPS_x03)) throw new TypeError('Object not of type GPS_x03');
+    if ((this.command != 'tracker')) throw new TypeError('packet is not of type tracker');
+
+
+    
+    var msg_parts = this.raw.split(',');
+    
+    var date = new Date(
+        parseInt('20' + msg_parts[2].substr(0, 2)),
+        parseInt(msg_parts[2].substr(2, 2))-1,
+        parseInt(msg_parts[2].substr(4, 2)),
+        parseInt(msg_parts[2].substr(6, 2)),
+        parseInt(msg_parts[2].substr(8, 2)),
+        parseInt(msg_parts[2].substr(10, 2))
+    );
+
+    var latitude = msg_parts[8] == 'N' ?
+    parseFloat(msg_parts[7].substr(0, 2)) + (parseFloat(msg_parts[7].substr(2)) / 60) :
+    parseFloat(msg_parts[7].substr(0, 2)) + (parseFloat(msg_parts[7].substr(2)) / 60) * -1;
+    var longitude = msg_parts[10] == 'E' ?
+    parseFloat(msg_parts[9].substr(0, 3)) + (parseFloat(msg_parts[9].substr(3)) / 60) :
+    parseFloat(msg_parts[9].substr(0, 3)) + (parseFloat(msg_parts[9].substr(3)) / 60) * -1;
+
+    return {
+        "imei": this.imei,
+        "command": msg_parts[1],
+        "date": date,
+        "dateString": msg_parts[2],
+        "sim" : msg_parts[3],
+        "latDecimal": latitude,
+        "longDecimal": longitude,
+        "insertionTime": new Date(),
+        "raw": this.raw,
+        "speed": parseInt(msg_parts[11]).toString(),
+        "timeString": msg_parts[5],
+        "heading": (msg_parts[12]).toString(),
+        "altitude": (msg_parts[13]).toString(),
+        "ignition": (msg_parts[14]).toString(),
+        "door" : (msg_parts[15]).toString(),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [longitude, latitude ]
+        },
+        'GPS positioned': msg_parts[4] == 'F' ? '1' : '0'
+    };
+};
+
+
+
+
+
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+if (typeof module != 'undefined' && module.exports) module.exports = GPS_x03; // ≡ export default GPS_x03
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e908edd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,28 @@
+# AdnateIot
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..c95c812
--- /dev/null
+++ b/config.json
@@ -0,0 +1,25 @@
+{
+    "dbDomain" : "13.126.36.205",
+    "dbPort" : "27017",
+    "dbAuthSource" : "admin",
+    "dbUserName" : "pFacADM",
+    "dbPass" : "adnate@16/09",
+    "dbPassUrlEncoded" : "adnate%4016%2F09",
+    "cookieDomain" : "localhost",
+    "EPort" : "3000",
+    "TcpPort" : "1155",
+    "hostMail" : "smtp.gmail.com",
+    "mailUserName" : "contact@adnatesolutions.com",
+    "mailPassWord" : "Adnate@123",
+    "smsUrl" : "http://198.24.149.4/API/pushsms.aspx?senderid=DEMOOO&route_id=2&Unicode=0&loginID=gauravgta&password=Gaurav@123",
+    "smsUrl_zogo" : "http://sms.gblsms.com/vendorsms/pushsms.aspx?user=zogord&password=123456&sid=ZOGORD&fl=0&gwid=2",
+    "smsApiMobileKeyzogo" : "&msisdn=",
+    "smsApiTextKeyzogo" : "&msg=",
+    "mqqtUrl":"mqtt://13.126.36.205",
+    "mqqtPort" : 1883,
+    "googleApiKey":"AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8",
+    "redisDomain" : "127.0.0.1",
+    "redisPort" : 6379
+
+}
+
diff --git a/dataprocessing.js b/dataprocessing.js
new file mode 100644
index 0000000..9a9a035
--- /dev/null
+++ b/dataprocessing.js
@@ -0,0 +1,3112 @@
+
+var mongoose = require('mongoose');
+const FLUCTUATION_THRESHOLD =  50 / 1000;
+const ObjectID = require('mongodb').ObjectID;
+var Notifs = require('./app_api/models/notifications');
+var MongoClient = require('mongodb').MongoClient
+var f = require('./gpsFunctions');
+var crc = require('crc');
+var pushNotifs = require('./notify')
+var Device = require('./app_api/models/device');
+var cmdPackets = require('./app_api/models/cmdPackets')
+var GeoFence = require('./app_api/models/geofence')
+var Route = require('./app_api/models/trackRoute');
+var RouteMap = require('./app_api/models/routeDeviceMap')
+var Groups = require('./app_api/models/group');
+var GPS = require('./app_api/models/gps')
+//var gpsio = gpsIo
+var moment = require('moment-timezone');
+var Mailer = require('./app_api/controllers/mailer');
+var OutgoingIntegrations = require('./outgoingIntegrations');
+var GeofenceReports = require('./app_api/models/geofenceReports');
+var GPS_x03 = require('./GPS_x03');
+//var geoFenceio = geoFenceIo
+var TCPUTIL = require('./tcpUtil');
+var Utilities = require('./app_api/controllers/utilities.controller');
+var request = require('request');
+var KafkaService = require('./kafka-producer');
+var url = 'mongodb://'+Utilities.getConfig().dbUserName+':'+Utilities.getConfig().dbPassUrlEncoded+'@'+Utilities.getConfig().dbDomain+':'+Utilities.getConfig().dbPort+'/IOT?authSource='+Utilities.getConfig().dbAuthSource;
+var dbOption = {
+    //user : Utilities.getConfig().dbUserName,
+    //pass : Utilities.getConfig().dbPass
+};
+
+
+function parseYantraData(raw) {
+    console.log('yantra')
+    try {
+        var rawWOHeadFoot = raw.substring(1);
+        rawWOHeadFoot = rawWOHeadFoot.substring(0, rawWOHeadFoot.length - 1);
+        var rawArray = rawWOHeadFoot.split(',');
+        var latDecimal = rawArray[5] == 'N' ?
+        parseFloat(rawArray[4].substring(0, 2)) + parseFloat((rawArray[4].substring(2, 9) / 60)) :
+        (parseFloat(rawArray[4].substring(0, 2)) + parseFloat((rawArray[4].substring(2, 9) / 60))) * -1;
+        var longDecimal = rawArray[7] == 'E' ?
+        parseFloat(rawArray[6].substring(0, 3)) + parseFloat((rawArray[6].substring(3, 10) / 60)) :
+        (parseFloat(rawArray[6].substring(0, 3)) + parseFloat((rawArray[6].substring(3, 10) / 60))) * -1;
+        /* var ac=rawArray[12].substring(4,6);
+        var ac1 = (parseInt(ac, 16).toString(2));
+        while (ac1.length < 8) {
+            ac1 = '0' + ac1;
+        }
+        ac1 = ac1.substr(5, 1);
+        var power = rawArray[12].substring(2, 4);
+        
+        var power1 = parseInt(power, 16).toString(2);
+        while (power1.length < 8) {
+            power1 = '0' + power1;
+        }
+        power1 = power1.substr(4, 1); */
+        return {
+            "imei": rawArray[0], 
+            "command": '$', 
+            "date": rawArray[2] ? new Date(parseInt('20' +
+            rawArray[2].substring(4, 6)),
+            parseInt(rawArray[2].substring(2, 4) - 1),
+            parseInt(rawArray[2].substring(0, 2)),
+            parseInt(rawArray[3].substring(0, 2)),
+            parseInt(rawArray[3].substring(2, 4)),
+            parseInt(rawArray[3].substring(4, 6))
+        ) : null,
+        "dateString": rawArray[2],
+        "latDirection": rawArray[5],
+        "longDirection" : rawArray[7],
+        "latDegrees": rawArray[4] + rawArray[5],
+        "longDegrees": rawArray[6] + rawArray[7],
+        "latDecimal": latDecimal,
+        "longDecimal": longDecimal,
+        "insertionTime": new Date(),
+        "raw": raw,
+        "valid": rawArray[1], 
+        "speed": (parseFloat(rawArray[8])).toFixed(2),
+        "odo" : parseFloat(rawArray[9]),
+        "timeString": rawArray[3],
+        "heading": rawArray[10],
+        "satellites": rawArray[11],
+        "gsmSignal": rawArray[12],
+        "DIN1": rawArray[14],
+        "DIN2" : rawArray[15],
+        "ignition": rawArray[13],
+        "boxStatus" : rawArray[17],
+        "GPS positioned": rawArray[16],
+        "batteryStatus" : rawArray[18],
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [ longDecimal, latDecimal ]
+        }
+    }
+} catch (err) {
+    console.error("exception handled");
+    console.error(err);
+}
+}
+
+function parseRawGpsVTX(raw)
+{
+    var rawArray = raw.split('&');
+    var latDecimal = rawArray[3].split(',')[3].charAt(rawArray[3].split(',')[3].length-1) == 'N' ?parseFloat(rawArray[3].split(',')[3].substring(0,2)) + parseFloat((rawArray[3].split(',')[3].substring(2, 9) / 60)):(parseFloat(rawArray[3].split(',')[3].substring(0,2)) + parseFloat((rawArray[3].split(',')[3].substring(2, 9) / 60)))* -1;
+    var longDecimal = rawArray[3].split(',')[4].charAt(rawArray[3].split(',')[4].length-1) == 'E' ?parseFloat(rawArray[3].split(',')[4].substring(0,3)) + parseFloat((rawArray[3].split(',')[4].substring(3, 10) / 60)):(parseFloat(rawArray[3].split(',')[4].substring(0,3)) + parseFloat((rawArray[3].split(',')[4].substring(3, 10) / 60))) * -1;
+    
+    return {
+        "imei": rawArray[0].split(',')[1],
+        "command": 'VTX',
+        "date": new Date(parseInt('20' +
+        rawArray[3].split(',')[7].substring(4,6)),
+        parseInt(rawArray[3].split(',')[7].substring(2,4) - 1),
+        parseInt(rawArray[3].split(',')[7].substring(0,2)),
+        parseInt(rawArray[3].split(',')[1].substring(0,2)),
+        parseInt(rawArray[3].split(',')[1].substring(2,4)),
+        parseInt(rawArray[3].split(',')[1].substring(4,6))
+    ),
+    "dateString": rawArray[3].split(',')[7],
+    "latDegrees": rawArray[3].split(',')[3],
+    "longDegrees":rawArray[3].split(',')[4],
+    "latDecimal": latDecimal,
+    "longDecimal": longDecimal,
+    "insertionTime": new Date(),
+    "raw": raw,
+    "valid": rawArray[3].split(',')[2],
+    "speed": rawArray[3].split(',')[5],
+    "timeString": rawArray[3].split(',')[1],
+    "heading": rawArray[3].split(',')[6],
+    "GPS positioned":((rawArray[6]=='A')?1:0),
+    "ignition":rawArray[3].split(',')[10]=='1'?'0':'1',
+    "geoJSON": {
+        "type": "Point",
+        "coordinates": [longDecimal,latDecimal]
+    }
+}
+}
+
+function parseRawGpsTs(raw,type)
+{
+    var raw1=raw.substring(0, raw.length - 2);
+    var rawArray = raw.split(',');
+    if(type=='first')
+    {
+        
+    }
+    else if(type=='rest')
+    {
+        
+        return {
+            "imei": rawArray[1],
+            "command": 'TS',
+            "date": new Date(parseInt('20' +
+            rawArray[5].substring(0,2)),
+            parseInt(rawArray[5].substring(2,4) - 1),
+            parseInt(rawArray[5].substring(4,6)),
+            parseInt(rawArray[5].substring(6,8)),
+            parseInt(rawArray[5].substring(8,10)),
+            parseInt(rawArray[5].substring(10,12))
+        ),
+        "dateString": rawArray[5].substring(0,6),
+        "latDecimal": Number(rawArray[3]),
+        "longDecimal": Number(rawArray[4]),
+        "insertionTime": new Date(),
+        "raw": raw,
+        "valid": rawArray[6],
+        "speed": rawArray[8],
+        "timeString": rawArray[5].substring(6,12),
+        "heading": rawArray[10],
+        "GPS positioned":((rawArray[6]=='A')?1:0),
+        "ignition":rawArray[27],
+        "gsmSignal":rawArray[7],
+        "power":rawArray[23]=='0'?'1':'0',
+        "satellites":rawArray[11],
+        "batteryStatus":rawArray[48],
+        "gpsTracking":((rawArray[6]=='A')?'1':'0'),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [rawArray[4],rawArray[3]]
+        }
+    }
+    
+}
+}
+
+function parseRawGpsGB(raw,gpsModel)
+{
+    if(gpsModel == 'GB')
+    {
+        try {
+            
+            var rawArray = raw.split(',');
+            var latstring=rawArray[4].split(':')[1];
+            var lat=(parseFloat(latstring.substring(0,2))+parseFloat(latstring.substring(2,9)/60));
+            
+            var longstring=rawArray[5].split(':')[1];
+            var long=(parseFloat(longstring.substring(0,3))+parseFloat(longstring.substring(3,10)/60));
+            
+            return {
+                "imei": rawArray[0].split(':')[1],
+                "command": 'GB',
+                "date": rawArray[11] ? new Date(parseInt('20' +
+                rawArray[7].split(':')[1].substring(4,6)),
+                parseInt(rawArray[7].split(':')[1].substring(2,4) - 1),
+                parseInt(rawArray[7].split(':')[1].substring(0,2)),
+                
+                parseInt(rawArray[3].split(':')[1].substring(0,2)),
+                parseInt(rawArray[3].split(':')[1].substring(2,4)),
+                parseInt(rawArray[3].split(':')[1].substring(4,6))
+            ) : null,
+            "dateString": rawArray[7].split(':')[1],
+            "latDegrees": rawArray[4].split(':')[1],
+            "longDegrees": rawArray[5].split(':')[1],
+            "latDecimal": lat,
+            "longDecimal": long,
+            "insertionTime": new Date(),
+            "raw": raw,
+            "valid": rawArray[10].split(':')[1].charAt(7),
+            "speed": (parseFloat(rawArray[6].split(':')[1]).toFixed(2)),
+            "timeString": rawArray[3].split(':')[1],
+            "heading": rawArray[12].split(':')[1].substring(0, rawArray[12].split(':')[1].length - 2),
+            "GPS positioned":((rawArray[10].split(':')[1].charAt(7)=='A')?1:0),
+            "ignition": rawArray[9].split(':')[1].charAt(0),
+            "ac": rawArray[9].split(':')[1].charAt(3),
+            "sos" : rawArray[9].split(':')[1].charAt(1) == "1" ? true : false,
+            "debug" : rawArray[9].split(':')[1].charAt(4),
+            "batteryStatus": rawArray[1].split(':')[1],
+            "power":rawArray[9].split(':')[1].charAt(5),
+            "gpsTracking":((rawArray[10].split(':')[1].charAt(7)=='A')?'1':'0'),
+            "geoJSON": {
+                "type": "Point",
+                "coordinates": [long, lat]
+            }
+        }
+    } catch (err) {
+        console.error("exception handled");
+        console.error(err);
+    }
+}
+}
+function parseRawGpsL(raw)
+{
+    
+    try {
+        
+        var rawArray = raw.split(',');
+        var lat=(parseFloat(rawArray[4].substring(0,2))+parseFloat(rawArray[4].substring(2,9)/60));
+        var long=(parseFloat(rawArray[6].substring(0,3))+parseFloat(rawArray[6].substring(3,10)/60));
+        
+        return {
+            "imei": rawArray[0].substring(11),
+            "command": 'L100',
+            "date": new Date (Number(rawArray[2])).toISOString().replace('T',' '),
+            "dateString": new Date(parseInt('20' +
+            str.split(',')[10].substring(4,6)),
+            parseInt(str.split(',')[10].substring(2,4) - 1),
+            parseInt(str.split(',')[10].substring(0,2))),
+            "latDegrees": rawArray[4]+rawArray[5],
+            "longDegrees": rawArray[6]+rawArray[7],
+            "latDecimal": lat,
+            "longDecimal": long,
+            "insertionTime": new Date(),
+            "raw": raw,
+            "valid": rawArray[3],
+            "speed": (parseFloat(Number(rawArray[8])*1.85).toFixed(2)),
+            "timeString": Number(rawArray[2]),
+            "heading": rawArray[9],
+            "ignition":rawArray[14].charAt(1),
+            "geoJSON": {
+                "type": "Point",
+                "coordinates": [long, lat]
+            }
+        }
+    } catch (err) {
+        console.error("exception handled");
+        console.error(err);
+    }
+    
+}
+
+function parseT8803_data(raw, parsedHead) {
+    data = Buffer.from(data).toString('hex');
+    var date = new Date(
+        parseInt(data.substr(88, 2), 16) + 2000,
+        parseInt(data.substr(90, 2), 16) - 1,
+        parseInt(data.substr(92, 2), 16),
+        parseInt(data.substr(94, 2), 16),
+        parseInt(data.substr(96, 2), 16),
+        parseInt(data.substr(98, 2), 16)
+    )
+    
+    var course_status = parseInt(data.substr(128, 4), 16).toString(2);
+    var latitude = Buffer(str.substr(116, 8), 'hex').readFloatBE(0);
+    var longitude = Buffer(str.substr(108, 8), 'hex').readFloatBE(0);
+    var speedHex = str.substr(124, 4);
+    var speed = [speedHex.slice(0, 3), '.', speedHex.slice(3)].join('');
+    var gpsPositionedData = parseInt(str.substr(48, 2), 16).toString(2);
+    var gpsPositioned = gpsPositionedData.charAt(0) == '0' ? '1' : '0';
+    var digitalIOData = parseInt(str.substr(62, 4), 16).toString(2);
+    var ignition = digitalIOData.charAt(1) == '1' ? 1 : 0;
+    
+    return {
+        "imei": parseInt(str.substr(14,16)),
+        "command": parsedHead.protocal_id,
+        "date": date,
+        "dateString": str.substr(88, 6),
+        "latDecimal": latitude,
+        "longDecimal": longitude,
+        "insertionTime": new Date(),
+        "raw": raw.toString('hex'),
+        "speed": speed,
+        "timeString": str.substr(94, 6),
+        "heading": course_status,
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [longitude, latitude ]
+        },
+        //'MCC': parseInt(str.substr(36, 4), 16),
+        //'MNC': parseInt(str.substr(40, 2), 16),
+        //'LAC': parseInt(str.substr(42, 4), 16),
+        //'CellT ID': parseInt(str.substr(46, 6), 16),
+        //'lbs': str.substr(36, 16),
+        //'real-time gps': course_status.substr(0, 1),
+        'GPS positioned': course_status.substr(1, 1),
+        'ignition' : ignition
+        //'satellites': parseInt(str.substr(13, 1), 16)
+    }
+}
+function authorizeT8803(device_id, socket) {
+    socket.imei = parseInt(device_id)
+    var loginResponse = '232301000F0001' + device_id;
+    socket.write(new Buffer(loginResponse, 'hex'));
+}
+
+function respond_T8803_heartbeat(device_id, socket) {
+    socket.imei = parseInt(device_id)
+    var heartbeatResponse = '232303000F0001' + device_id;
+    socket.write(new Buffer(heartbeatResponse, 'hex'));
+}
+function parseT8803_head(raw, socket) {
+    data = Buffer.from(data).toString('hex')
+    var parts = {
+        'start': data.substr(0, 4)
+    };
+    
+    if (parts['start'] == '2323') {
+        parts['length'] = parseInt(data.substr(6, 4), 16);
+        //parts['finish'] = data.substr(6 + parts['length'] * 2, 4);
+        parts['protocal_id'] = data.substr(4, 2);
+        if (parts['protocal_id'] == '01') {
+            parts['device_id'] = data.substr(14, 16);
+            parts.cmd = 'login_request';
+            parts.action = 'login_request';
+        } else if (parts['protocal_id'] == '02') {
+            parts['device_id'] = socket.imei || data.substr(14, 16);
+            parts['data'] = data.substr(30);
+            parts.cmd = 'ping';
+            parts.action = 'ping';
+        } else if (parts['protocal_id'] == '03') {
+            parts['device_id'] = socket.imei || data.substr(14, 16);
+            parts['data'] = data.substr(30);
+            parts.cmd = 'heartbeat';
+            parts.action = 'heartbeat';
+        } else if (parts['protocal_id'] == '04') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(8, parts['length'] * 2);
+            parts.cmd = 'alert';
+            parts.action = 'alert';
+        } else {
+            parts['device_id'] = socket.imei || '';
+            parts.cmd = 'noop';
+            parts.action = 'noop';
+        }
+    }
+    else {
+        parts['device_id'] = '';
+        parts.cmd = 'noop';
+        parts.action = 'noop';
+    }
+    return parts;
+}
+
+function parseGM06_Head(data, socket) {
+    data = Buffer.from(data).toString('hex')
+    var parts = {
+        'start': data.substr(0, 4)
+    };
+    
+    if (parts['start'] == '6767') {
+        parts['protocal_id'] = data.substr(4, 2);
+        parts['length'] = parseInt(data.substr(6, 4), 16);
+        //parts['finish'] = data.substr(6 + parts['length'] * 2, 4);
+        if (parts['protocal_id'] == '01') {
+            parts['device_id'] = data.substr(15, 15);
+            parts.cmd = 'login_request';
+            parts.action = 'login_request';
+        } else if (parts['protocal_id'] == '02') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(14, parts['length'] * 2);
+            parts.cmd = 'ping';
+            parts.action = 'ping';
+        } else if (parts['protocal_id'] == '03') {
+            parts['device_id'] = socket.imei || '';
+            parts.cmd = 'heartbeat';
+            parts['data'] = data/* .substr(8, 10) */;
+            parts.action = 'heartbeat';
+        } else {
+            parts['device_id'] = socket.imei || '';
+            parts.cmd = 'noop';
+            parts.action = 'noop';
+        }
+    }
+    else {
+        parts['device_id'] = '';
+        parts.cmd = 'noop';
+        parts.action = 'noop';
+    }
+    return parts;
+};
+
+function authorizeGM06(socket, request, raw) {
+    socket.imei = socket.imei || parseInt(request.device_id);
+    console.log('6767010002' + Buffer.from(raw, 'hex').toString('hex').substr(10, 4));
+    socket.write('6767010002' + Buffer.from(raw, 'hex').toString('hex').substr(10,4), 'hex');
+};
+
+function get_GM06_ping_data(msg_parts, raw, socket) {
+    var str = msg_parts.data;
+    var date = new Date(
+        parseInt(str.substr(0, 8), 16) * 1000
+    )
+    
+    var latitude =  dex_to_degrees(str.substr(8, 8), 0);
+    var longitude = dex_to_degrees(str.substr(16, 8), 0);
+    var gps = parseInt(str.substr(48, 1), 2).toString();
+    gps = gps.charAt(gps.length-1)
+    
+    
+    
+    
+    
+    
+    return {
+        "imei": socket.imei.toString(),
+        "command": msg_parts.protocal_id,
+        "date": date,
+        "dateString": str.substr(0, 6),
+        "latDecimal": latitude,
+        "longDecimal": longitude,
+        "insertionTime": new Date(),
+        "raw": raw.toString('hex'),
+        "speed": parseInt(str.substr(24, 2), 16).toString(),
+        "timeString": str.substr(6, 6),
+        "heading": parseInt(str.substr(26, 4), 16).toString(),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [longitude, latitude ]
+        },
+        'GPS positioned': gps
+    }
+};
+
+function receive_GM06_heartbeat(raw, socket) {
+    socket.write('6767030002' + Buffer.from(raw, 'hex').toString('hex').substr(10,4), 'hex');
+};
+
+
+function parseVT1000(raw)
+{
+    var gsm1=str.substring(str.length-20);
+    var gsmval=gsm1.substring(6,8);
+    var latstring=raw.substring(31,38)/1000;
+    var lat=(parseFloat(latstring.toString().substring(0,2))+parseFloat(latstring.toString().substring(2,7)/60));
+    
+    var longstring=raw.substring(38,46)/1000;
+    var long=(parseFloat(longstring.toString().substring(0,2))+parseFloat(longstring.toString().substring(2,7)/60));
+    
+    var locationStatusBits = parseInt(raw.substr(54, 2), 16).toString(2);
+    while(locationStatusBits.length < 8) {
+        locationStatusBits = "0" + locationStatusBits;
+    }
+    var alarmPacket = raw.substr(62, 8);
+    var alarm1Packet = alarmPacket.substr(0, 2);
+    var alarm1PacketBits = parseInt(alarm1Packet, 16).toString(2);
+    while(alarm1PacketBits.length < 8) {
+        alarm1PacketBits = "0" + alarm1PacketBits;
+    }
+    var io=raw.substring(62,70).charAt(7);
+    return {
+        "imei": raw.substring(10,18),
+        "command": raw.substring(4,6),
+        "date": new Date(parseInt('20' +
+        raw.substring(18, 20)),
+        parseInt(raw.substring(20, 22) - 1),
+        parseInt(raw.substring(22, 24)),
+        parseInt(raw.substring(24, 26)),
+        parseInt(raw.substring(26, 28)),
+        parseInt(raw.substring(28, 30))
+    ),
+    "dateString": raw.substring(18, 24),
+    //"latDecimal": raw.substring(31,38)/100000,
+    // "longDecimal": raw.substring(38,46)/100000,
+    "latDecimal": lat,
+    "longDecimal": long,
+    "insertionTime": new Date(),
+    "raw": raw,
+    "speed": raw.substring(46,50),
+    "timeString": raw.substring(24,30),
+    "heading": raw.substring(50, 54),
+    "GPS positioned": locationStatusBits.charAt(0),
+    "alarm1PacketBits": alarm1PacketBits,
+    "locationStatusBits" : locationStatusBits,
+    "ignition": alarm1PacketBits.charAt(0) == '1' ? '0' : '1',
+    "power" : alarm1PacketBits.charAt(4) == '1' ? '0' : '1',
+    "gsmSignal":gsmval,
+    "geoJSON": {
+        "type": "Point",
+        "coordinates": [ long, lat ]
+    }
+}
+}
+
+function fmb_login(hexString, socket) {
+    
+    
+    //disable nagle's algorithm which prevents packets from being sent immediately
+    //socket.setNoDelay(true);
+    var imei_scramble = hexString.substr(4);
+    var imei = '';
+    for (var i = 0; i < imei_scramble.length; i++){
+        if (i % 2 != 0) {
+            imei += imei_scramble.charAt(i);
+        }
+    }
+    socket.imei = imei;
+    socket.write(new Buffer('01', 'hex'), function (z) {
+        //console.log('fmb accepted')
+    });
+}
+
+function parseFmbData(hexString, socket) {
+    
+    var allData = [];
+    
+    var imei = socket.imei;
+    var command = hexString.substr(16, 2);
+    var number_of_data = parseInt(hexString.substr(18, 2), 16)
+    var startIndex = 20;
+    for (var q = 1; q <= number_of_data; q++){
+        var data = {}
+        data.startIndex = startIndex;
+        data.command = command;
+        data.number_of_data = number_of_data;
+        data.imei = socket.imei;
+        data.date = new Date(parseInt(hexString.substr(startIndex + 0, 16), 16));
+        data.priority = hexString.substr(startIndex + 16, 2);
+        var longDecimal = parseInt(hexString.substr(startIndex + 18, 8), 16) / 10000000;
+        var latDecimal = parseInt(hexString.substr(startIndex + 26, 8), 16) / 10000000;
+        data.raw = hexString;
+        data.latDecimal = latDecimal;
+        data.longDecimal = longDecimal;
+        data.geoJSON = {
+            "type": "Point",
+            "coordinates": [longDecimal, latDecimal]
+        };
+        data.insertionTime = new Date();
+        data.altitude = hexString.substr(startIndex + 34, 4)
+        data.heading = hexString.substr(startIndex + 38, 4);
+        data.satellites = hexString.substr(startIndex + 42, 2);
+        data.speed = parseInt(hexString.substr(startIndex + 44, 4), 16).toString();
+        data.eventId = parseInt(hexString.substr(startIndex + 48, 2),16);
+        data.numOfIO = parseInt(hexString.substr(startIndex + 50, 2), 16);
+        
+        
+        //1 byte IO
+        var num1ByteIO = parseInt(hexString.substr(startIndex + 52, 2), 16);
+        data.num1ByteIO = num1ByteIO
+        var _1ByteIO = hexString.substr(startIndex + 54, (num1ByteIO + (num1ByteIO * 1)) * 2);
+        data._1ByteIO = _1ByteIO
+        
+        for (var i = 0; i <= num1ByteIO; i++){
+            var IoElement = _1ByteIO.substr(i * 4, 2);
+            var IoValue = _1ByteIO.substr((i * 4) + 2, 2);
+            
+            //digital in
+            if (parseInt(IoElement, 16) == 1) {
+                data.ignition = parseInt(IoValue, 16).toString();
+            }
+            //GNSS status
+            if (parseInt(IoElement, 16) == 69) {
+                data['GPS positioned'] = parseInt(IoValue, 16).toString();
+            }
+        }
+        
+        
+        
+        //2 byte IO
+        var num2ByteIOIndex = startIndex + 54 + ((num1ByteIO + (num1ByteIO * 1)) * 2);
+        data.num2ByteIOIndex = num2ByteIOIndex;
+        var num2ByteIO = parseInt(hexString.substr(num2ByteIOIndex, 2), 16);
+        data.num2ByteIO = num2ByteIO;
+        
+        var _2ByteIO = hexString.substr(num2ByteIOIndex + 2, (num2ByteIO * 6));
+        data._2ByteIO = _2ByteIO;
+        
+        for (var i = 0; i <= num2ByteIO; i++){
+            var IoElement = _2ByteIO.substr(i * 6, 2);
+            var IoValue = _2ByteIO.substr((i * 6) + 2, 4);
+            
+            //analog in 
+            if (parseInt(IoElement, 16) == 9) {
+                data.fuelVoltage = parseInt(IoValue, 16);
+            }
+            //ext voltage
+            if (parseInt(IoElement, 16) == 66) {
+                data.power = parseInt(IoValue, 16) == 0 ? '0' : '1';
+            }
+            
+        }
+        
+        //4 byte IO
+        var num4ByteIOIndex = num2ByteIOIndex + ((num2ByteIO * 6/* + (num2ByteIO * 1) */)  + 2);
+        data.num4ByteIOIndex = num4ByteIOIndex;
+        var num4ByteIO = parseInt(hexString.substr(num4ByteIOIndex, 2), 16);
+        data.num4ByteIO = num4ByteIO;
+        
+        var _4ByteIO = hexString.substr(num4ByteIOIndex + 2, (num4ByteIO * 10));
+        startIndex = num4ByteIOIndex + 2 + 2 + (num4ByteIO * 10);
+        data._4ByteIO = _4ByteIO;
+        
+        for (var i = 0; i <= num4ByteIO; i++){
+            var IoElement = _4ByteIO.substr(i * 10, 2);
+            var IoValue = _4ByteIO.substr((i * 10) + 2, 8);
+            
+            //analog in 
+            if (parseInt(IoElement, 16) == 16) {
+                data.odo = parseInt(IoValue, 16) / 1000;
+            }
+            
+            
+        }
+        allData.push(data);
+    }
+    
+    var latest = allData[0];
+    
+    if (allData.length > 1) {
+        Device.findOne({ Device_ID: latest.imei }, function (err, device) {
+            if(err){
+                console.error(err);
+            }
+            else if(device) {
+                allData.shift();
+                for (var z = 0; z < allData.length; z++){
+                    allData[z].group = device.vehicleGroup;
+                    allData[z].vehicle = device.vehicle;
+                }
+                GPS.insertMany(allData, { ordered: false }, function (err, docs) {
+                })
+            }
+        })
+    }
+    
+    return latest;
+}
+function numHex(s)
+{
+    var a = s.toString(16);
+    if( (a.length % 2) > 0 ){ a = "0" + a; }
+    return a;
+}
+function sendFmbAck(socket, number_of_data) {
+    number_of_data_encoded = parseInt(number_of_data).toString(16);
+    while (number_of_data_encoded.length < 8) {
+        number_of_data_encoded = '0' + number_of_data_encoded;
+    }
+    var packet = new Buffer(number_of_data_encoded, 'hex');
+    socket.write(packet);  
+}
+
+
+
+function crc16(buf) {
+    
+    var crcTable =
+    [
+        0X0000, 0X1189, 0X2312, 0X329B, 0X4624, 0X57AD, 0X6536, 0X74BF, 0X8C48, 0X9DC1, 0XAF5A,
+        0XBED3, 0XCA6C, 0XDBE5, 0XE97E, 0XF8F7, 0X1081, 0X0108, 0X3393, 0X221A, 0X56A5, 0X472C,
+        0X75B7, 0X643E, 0X9CC9, 0X8D40, 0XBFDB, 0XAE52, 0XDAED, 0XCB64, 0XF9FF, 0XE876, 0X2102,
+        0X308B, 0X0210, 0X1399, 0X6726, 0X76AF, 0X4434, 0X55BD, 0XAD4A, 0XBCC3, 0X8E58, 0X9FD1,
+        0XEB6E, 0XFAE7, 0XC87C, 0XD9F5, 0X3183, 0X200A, 0X1291, 0X0318, 0X77A7, 0X662E, 0X54B5,
+        0X453C, 0XBDCB, 0XAC42, 0X9ED9, 0X8F50, 0XFBEF, 0XEA66, 0XD8FD, 0XC974, 0X4204, 0X538D,
+        0X6116, 0X709F, 0X0420, 0X15A9, 0X2732, 0X36BB, 0XCE4C, 0XDFC5, 0XED5E, 0XFCD7, 0X8868,
+        0X99E1, 0XAB7A, 0XBAF3, 0X5285, 0X430C, 0X7197, 0X601E, 0X14A1, 0X0528, 0X37B3, 0X263A,
+        0XDECD, 0XCF44, 0XFDDF, 0XEC56, 0X98E9, 0X8960, 0XBBFB, 0XAA72, 0X6306, 0X728F, 0X4014,
+        0X519D, 0X2522, 0X34AB, 0X0630, 0X17B9, 0XEF4E, 0XFEC7, 0XCC5C, 0XDDD5, 0XA96A, 0XB8E3,
+        0X8A78, 0X9BF1, 0X7387, 0X620E, 0X5095, 0X411C, 0X35A3, 0X242A, 0X16B1, 0X0738, 0XFFCF,
+        0XEE46, 0XDCDD, 0XCD54, 0XB9EB, 0XA862, 0X9AF9, 0X8B70, 0X8408, 0X9581, 0XA71A, 0XB693,
+        0XC22C, 0XD3A5, 0XE13E, 0XF0B7, 0X0840, 0X19C9, 0X2B52, 0X3ADB, 0X4E64, 0X5FED, 0X6D76,
+        0X7CFF, 0X9489, 0X8500, 0XB79B, 0XA612, 0XD2AD, 0XC324, 0XF1BF, 0XE036, 0X18C1, 0X0948,
+        0X3BD3, 0X2A5A, 0X5EE5, 0X4F6C, 0X7DF7, 0X6C7E, 0XA50A, 0XB483, 0X8618, 0X9791, 0XE32E,
+        0XF2A7, 0XC03C, 0XD1B5, 0X2942, 0X38CB, 0X0A50, 0X1BD9, 0X6F66, 0X7EEF, 0X4C74, 0X5DFD,
+        0XB58B, 0XA402, 0X9699, 0X8710, 0XF3AF, 0XE226, 0XD0BD, 0XC134, 0X39C3, 0X284A, 0X1AD1,
+        0X0B58, 0X7FE7, 0X6E6E, 0X5CF5, 0X4D7C, 0XC60C, 0XD785, 0XE51E, 0XF497, 0X8028, 0X91A1,
+        0XA33A, 0XB2B3, 0X4A44, 0X5BCD, 0X6956, 0X78DF, 0X0C60, 0X1DE9, 0X2F72, 0X3EFB, 0XD68D,
+        0XC704, 0XF59F, 0XE416, 0X90A9, 0X8120, 0XB3BB, 0XA232, 0X5AC5, 0X4B4C, 0X79D7, 0X685E,
+        0X1CE1, 0X0D68, 0X3FF3, 0X2E7A, 0XE70E, 0XF687, 0XC41C, 0XD595, 0XA12A, 0XB0A3, 0X8238,
+        0X93B1, 0X6B46, 0X7ACF, 0X4854, 0X59DD, 0X2D62, 0X3CEB, 0X0E70, 0X1FF9, 0XF78F, 0XE606,
+        0XD49D, 0XC514, 0XB1AB, 0XA022, 0X92B9, 0X8330, 0X7BC7, 0X6A4E, 0X58D5, 0X495C, 0X3DE3,
+        0X2C6A, 0X1EF1, 0X0F78
+    ];
+    
+    
+    crcX = parseInt("FFFF", 16);
+    cr1 = parseInt("FF", 16);
+    cr2 = parseInt("FFFF", 16);
+    i = 0;
+    
+    while (i < buf.length) {
+        str = buf.substring(i, i + 2);
+        str_hex = parseInt(str, 16);
+        
+        j = (crcX ^ str_hex) & cr1;
+        crcX = (crcX >> 8) ^ crcTable[j];
+        
+        i = i + 2;
+    }
+    
+    crcX = crcX ^ 0xffff;
+    
+    return crcX.toString(16);
+}
+
+function receive_heartbeat(raw, socket) {
+    var data = Buffer.from(raw, 'hex').toString('hex')
+    if (!socket.__count) {
+        socket.__count = 1;
+    }
+    //socket.imei = parseInt(request.device_id)
+    var length = '05';
+    var protocal_id = '01';
+    var serial = Buffer.from(raw).toString('hex').substr(18, 4)
+    var str = length + protocal_id + serial;
+    socket.__count++;
+    var crcResult = crc16(str);
+    var buff = new Buffer('7878' + str + crcResult + '0d0a', 'hex');
+    socket.write(buff);
+};
+
+function dex_to_degrees(dex, l) {
+    return (parseInt(dex, 16) / 1800000)
+};
+
+function parseG500OBD_lat_long(l) {
+}
+
+function parseG500OBD_data(data) {
+    data = Buffer.from(data).toString('hex')
+    if (data.substr(14, 4) == '2084') {
+        var date = new Date(
+            
+            parseInt(data.substr(32, 2)) + 2000,
+            parseInt(data.substr(30, 2)) - 1,
+            parseInt(data.substr(28, 2)),
+            parseInt(data.substr(34, 2)),
+            parseInt(data.substr(36, 2)),
+            parseInt(data.substr(38, 2))
+        )
+        var latDecimal = parseInt(data.substr(40, 2)) + (parseFloat(data.substr(42, 2) + '.' + data.substr(44, 4)) / 60)
+        var longDecimal = parseInt(data.substr(48, 2)) + (parseFloat(data.substr(50, 2) + '.' + data.substr(52, 4)) / 60)
+        return {
+            "imei": data.substr(2, 12),
+            "command": data.substr(14, 4),
+            "date": date,
+            "dateString": data.substr(28, 6),
+            "latDecimal": latDecimal,
+            "longDecimal": longDecimal,
+            "insertionTime": new Date(),
+            "raw": data,
+            "speed": parseInt(data.substr(58, 2), 16).toString(),
+            "timeString": data.substr(34, 6),
+            "heading": (parseInt(data.substr(60, 2), 16) * 2).toString(),
+            "geoJSON": {
+                "type": "Point",
+                "coordinates": [ longDecimal, latDecimal ]
+            }
+        }
+    }
+    else {
+        return {}
+    }
+}
+
+function hex2ASCII(hexx) {
+    var hex = hexx.toString();
+    var str = '';
+    for (var i = 0; (i < hex.length && hex.substr(i, 2) !== '00'); i += 2)
+    str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+    return str;
+}
+
+function parse_GT06_stringInfo(parsedHead) {
+    var contentLength = parseInt(parsedHead.data.substr(0, 2), 16);
+    var serverKeyLength = 4;
+    var stringInfo = hex2ASCII(parsedHead.data.substr(2 + (4 * 2), contentLength * 2));
+    return stringInfo;
+}
+
+function get_GT06_alarm_data(msg_parts, raw, socket) {
+    var str = msg_parts.data;
+    var sos = 0;
+    var date = new Date(
+        parseInt(str.substr(0, 2), 16) + 2000,
+        parseInt(str.substr(2, 2), 16) - 1,
+        parseInt(str.substr(4, 2), 16),
+        parseInt(str.substr(6, 2), 16),
+        parseInt(str.substr(8, 2), 16),
+        parseInt(str.substr(10, 2), 16)
+    )
+    
+    var course_status = parseInt(str.substr(32, 4), 16).toString(2);
+    var longDir = course_status.substr(2, 1) == '0' ? 'E' : 'W';
+    var latDir = course_status.substr(3, 1) == '0' ? 'S' : 'N';
+    //var latitude = latDir == 'N' ? dex_to_degrees(str.substr(14, 8), 0) : dex_to_degrees(str.substr(14, 8), 0)*-1;
+    //var longitude = longDir == 'E' ? dex_to_degrees(str.substr(22, 8), 1) : dex_to_degrees(str.substr(22, 8), 1)*-1;
+    var latitude = latDir == 'N' ? dex_to_degrees(str.substr(14, 8), 0) : dex_to_degrees(str.substr(14, 8), 0);
+    var longitude = longDir == 'E' ? dex_to_degrees(str.substr(22, 8), 1) : dex_to_degrees(str.substr(22, 8), 1);
+    
+    
+    var terminalInfoContentByte = parseInt(str.substr(54, 2), 16).toString(2);
+    while (terminalInfoContentByte.length < 8) {
+        terminalInfoContentByte = '0' + terminalInfoContentByte
+    }
+    //parse alarms
+    var sosAlarm = 0;
+    var powerCutAlarm = 0;
+    var shockAlarm = 0;
+    var alarmBits = terminalInfoContentByte.substr(2, 3);
+    if (alarmBits == '000') {
+        sosAlarm = 0;
+        powerCutAlarm = 0;
+        shockAlarm = 0;
+    }
+    if (alarmBits == '001') {
+        sosAlarm = 0;
+        powerCutAlarm = 0;
+        shockAlarm = 1;
+    }
+    if (alarmBits == '010') {
+        sosAlarm = 0;
+        powerCutAlarm = 1;
+        shockAlarm = 0;
+    }
+    if (alarmBits == '100') {
+        sosAlarm = 1;
+        sos = 1;
+        powerCutAlarm = 0;
+        shockAlarm = 0;
+    }
+    
+    
+    
+    return {
+        "imei": socket.imei.toString(),
+        "command": msg_parts.protocal_id,
+        "date": date,
+        "dateString": str.substr(0, 6),
+        "latDecimal": latitude,
+        "longDecimal": longitude,
+        "insertionTime": new Date(),
+        "raw": raw.toString('hex'),
+        "speed": parseInt(str.substr(30, 2), 16).toString(),
+        "timeString": str.substr(6, 6),
+        "heading": parseInt(course_status.substr(4, 10), 2).toString(),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [longitude, latitude ]
+        },
+        'MCC': parseInt(str.substr(36, 4), 16),
+        'MNC': parseInt(str.substr(40, 2), 16),
+        'LAC': parseInt(str.substr(42, 4), 16),
+        'CellT ID': parseInt(str.substr(46, 6), 16),
+        'lbs': str.substr(36, 16),
+        'real-time gps': course_status.substr(0, 1),
+        'GPS positioned': course_status.substr(1, 1),
+        'satellites': parseInt(str.substr(13, 1), 16),
+        "powerCutAlarm": powerCutAlarm,
+        "sosAlarm": sosAlarm,
+        "shockAlarm": shockAlarm,
+        "terminalInfoContentByte": terminalInfoContentByte,
+        "sos" : sos == 1 ? true : false
+    }
+};
+function get_GT06_ping_data(msg_parts, raw, socket) {
+    var str = msg_parts.data;
+    var date = new Date(
+        parseInt(str.substr(0, 2), 16) + 2000,
+        parseInt(str.substr(2, 2), 16) - 1,
+        parseInt(str.substr(4, 2), 16),
+        parseInt(str.substr(6, 2), 16),
+        parseInt(str.substr(8, 2), 16),
+        parseInt(str.substr(10, 2), 16)
+    )
+    
+    var course_status = parseInt(str.substr(32, 4), 16).toString(2);
+    var longDir = course_status.substr(2, 1) == '0' ? 'E' : 'W';
+    var latDir = course_status.substr(3, 1) == '0' ? 'S' : 'N';
+    //var latitude = latDir == 'N' ? dex_to_degrees(str.substr(14, 8), 0) : dex_to_degrees(str.substr(14, 8), 0)*-1;
+    //var longitude = longDir == 'E' ? dex_to_degrees(str.substr(22, 8), 1) : dex_to_degrees(str.substr(22, 8), 1)*-1;
+    var latitude = latDir == 'N' ? dex_to_degrees(str.substr(14, 8), 0) : dex_to_degrees(str.substr(14, 8), 0);
+    var longitude = longDir == 'E' ? dex_to_degrees(str.substr(22, 8), 1) : dex_to_degrees(str.substr(22, 8), 1);
+    
+    
+    var terminalInfoContentByte = parseInt(str.substr(52, 2), 16).toString(2);
+    while (terminalInfoContentByte.length < 8) {
+        terminalInfoContentByte = '0' + terminalInfoContentByte
+    }
+    //parse alarms
+    var sosAlarm = 0;
+    var powerCutAlarm = 0;
+    var shockAlarm = 0;
+    var alarmBits = terminalInfoContentByte.substr(2, 3);
+    if (alarmBits == '000') {
+        sosAlarm = 0;
+        powerCutAlarm = 0;
+        shockAlarm = 0;
+    }
+    if (alarmBits == '001') {
+        sosAlarm = 0;
+        powerCutAlarm = 0;
+        shockAlarm = 1;
+    }
+    if (alarmBits == '010') {
+        sosAlarm = 0;
+        powerCutAlarm = 1;
+        shockAlarm = 0;
+    }
+    if (alarmBits == '100') {
+        sosAlarm = 1;
+        powerCutAlarm = 0;
+        shockAlarm = 0;
+    }
+    
+    
+    
+    return {
+        "imei": socket.imei.toString(),
+        "command": msg_parts.protocal_id,
+        "date": date,
+        "dateString": str.substr(0, 6),
+        "latDecimal": latitude,
+        "longDecimal": longitude,
+        "insertionTime": new Date(),
+        "raw": raw.toString('hex'),
+        "speed": parseInt(str.substr(30, 2), 16).toString(),
+        "timeString": str.substr(6, 6),
+        "heading": parseInt(course_status.substr(4, 10), 2).toString(),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [longitude, latitude ]
+        },
+        'MCC': parseInt(str.substr(36, 4), 16),
+        'MNC': parseInt(str.substr(40, 2), 16),
+        'LAC': parseInt(str.substr(42, 4), 16),
+        'CellT ID': parseInt(str.substr(46, 6), 16),
+        'lbs': str.substr(36, 16),
+        'real-time gps': course_status.substr(0, 1),
+        'GPS positioned': course_status.substr(1, 1),
+        'satellites': parseInt(str.substr(13, 1), 16),
+        "powerCutAlarm": powerCutAlarm,
+        "sosAlarm": sosAlarm,
+        "shockAlarm": shockAlarm,
+        "terminalInfoContentByte" : terminalInfoContentByte
+    }
+};
+
+
+
+function gt06_ping_response(socket) {
+    socket.__count++;
+    //socket.write(new Buffer('787805010001d9dc0d0a', 'hex'))
+}
+function authorizeGT06(socket, request, raw) {
+    
+    if (!socket.__count) {
+        socket.__count = 1;
+    }
+    socket.imei = socket.imei || parseInt(request.device_id)
+    var length = '05';
+    var protocal_id = '01';
+    var serial = Buffer.from(raw).toString('hex').substr(24, 4)
+    var str = length + protocal_id + serial;
+    socket.__count++;
+    var crcResult = crc16(str);
+    var buff = new Buffer('7878' + str + crcResult + '0D0A', 'hex');
+    socket.write(buff);
+};
+
+
+function parseGT06_Head(data, socket) {
+    data = Buffer.from(data).toString('hex')
+    var parts = {
+        'start': data.substr(0, 4)
+    };
+    
+    if (parts['start'] == '7878' || parts['start'] == '7979') {
+        parts['length'] = parseInt(data.substr(4, 2), 16);
+        parts['finish'] = data.substr(6 + parts['length'] * 2, 4);
+        parts['protocal_id'] = data.substr(6, 2);
+        if (parts['protocal_id'] == '01') {
+            parts['device_id'] = data.substr(8, 16);
+            parts.cmd = 'login_request';
+            parts.action = 'login_request';
+        } else if (parts['protocal_id'] == '12' || parts['protocal_id'] == '19') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(8, parts['length'] * 2);
+            parts.cmd = 'ping';
+            parts.action = 'ping';
+        } else if (parts['protocal_id'] == '22') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(8, parts['length'] * 2);
+            parts.cmd = 'ping';
+            parts.action = 'ping';
+        } else if (parts['protocal_id'] == '13' || parts['protocal_id'] == '23') {
+            parts['device_id'] = socket.imei || '';
+            parts.cmd = 'heartbeat';
+            parts['data'] = data.substr(8, 10);
+            parts.action = 'heartbeat';
+        } else if (parts['protocal_id'] == '16' || parts['protocal_id'] == '18') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(8, parts['length'] * 2);
+            parts.cmd = 'alert';
+            parts.action = 'alert';
+        } else if (parts['protocal_id'] == '15') {
+            parts['device_id'] = socket.imei || '';
+            parts['data'] = data.substr(8, parts['length'] * 2);
+            parts.cmd = 'stringInfo';
+            parts.action = 'stringInfo';
+        } else {
+            parts['device_id'] = socket.imei || '';
+            parts.cmd = 'noop';
+            parts.action = 'noop';
+        }
+    }
+    else if (parts['start'].indexOf('28') == 0) {
+        parts['device_id'] = data.substr(2, 12);
+        parts.cmd = data.substr(14, 4);
+        if (parts.cmd == '2084') {
+            parts.action = 'ping';
+        }
+        else if (parts.cmd == '1088') {
+            parts.action = 'heartbeat'
+        }
+        else
+        parts.action = 'noop'
+    }
+    else {
+        parts['device_id'] = '';
+        parts.cmd = 'noop';
+        parts.action = 'noop';
+    }
+    return parts;
+};
+
+
+function isHex(h) {
+    var re = /[0-9A-Fa-f]{6}/g;
+    re.lastIndex = 0;
+    if (re.test(h)) {
+        
+        return true;
+    } else {
+        return false;
+    }
+    
+    
+}
+
+
+
+
+function change_G900WKMD(socket, device_id) {
+    //device_id = '865205032299264'
+    var hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours().toString()
+    var mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes().toString()
+    var ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds().toString()
+    
+    socket.write('*HQ,' + device_id + ',WKMD,' + hh + mm + ss + ',0#')
+    socket.write('*HQ,' + device_id + ',S26,' + hh + mm + ss + ',W#')
+    
+}
+/** move to another file */
+function parseRawGps(raw, gpsModel) {
+    if (gpsModel == 'TK') {
+        
+        var latDecimal = raw.substring(33, 34) == 'N' ?
+        parseFloat(raw.substring(24, 26)) + parseFloat((raw.substring(26, 33) / 60)) :
+        (parseFloat(raw.substring(24, 26)) + parseFloat((raw.substring(26, 33) / 60))) * -1;
+        var longDecimal = raw.substring(44, 45) == 'E' ?
+        parseFloat(raw.substring(34, 37)) + parseFloat((raw.substring(37, 44) / 60)) :
+        (parseFloat(raw.substring(34, 37)) + parseFloat((raw.substring(37, 44) / 60))) * -1;
+        
+        var io=raw.substr(63,1)?parseInt(raw.substr(63,1)):null;
+        var ac=raw.substr(64,1)?parseInt(raw.substr(64,1)):null;
+        var fuel=((parseInt(raw.substr(67,1), 16)*16*16)+(parseInt(raw.substr(68,1), 16)*16)+(parseInt(raw.substr(69,1), 16)))*10;
+        var ac1=('0000' + parseInt(ac, 16).toString(2)).slice(-4).charAt(3);
+        var sos=('0000' + parseInt(ac, 16).toString(2)).slice(-4).charAt(2);
+        
+        return {
+            "imei": raw.substring(1, 13),
+            "command": raw.substring(13, 17),
+            "date": new Date(parseInt('20' +
+            raw.substring(17, 19)),
+            parseInt(raw.substring(19, 21) - 1),
+            parseInt(raw.substring(21, 23)),
+            parseInt(raw.substring(50, 52)),
+            parseInt(raw.substring(52, 54)),
+            parseInt(raw.substring(54, 56))
+        ),
+        "dateString": raw.substring(17, 23),
+        "latDegrees": raw.substring(24, 34),
+        "longDegrees": raw.substring(34, 45),
+        "latDecimal": latDecimal,
+        "longDecimal": longDecimal,
+        "insertionTime": new Date(),
+        "raw": raw,
+        "valid": raw.substring(23, 24),
+        "speed": raw.substring(45, 50),
+        "timeString": raw.substring(50, 56),
+        "heading": raw.substring(56, 62),
+        "power": raw.substr(62,1)=='0'?'1':'0',
+        "mileage": raw.substring(71, 80),
+        "ignition": io,
+        "ac":ac1,
+        "sos":sos,
+        "fuelVoltage":fuel,
+        "GPS positioned":((raw.substring(23, 24)=='A')?1:0),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [ longDecimal, latDecimal ]
+        }
+    }
+}
+if (gpsModel == 'G') {
+    try {
+        var rawArray = raw.split(',')
+        var latDecimal = rawArray[6] == 'N' ?
+        parseFloat(rawArray[5].substring(0, 2)) + parseFloat((rawArray[5].substring(2, 9) / 60)) :
+        (parseFloat(rawArray[5].substring(0, 2)) + parseFloat((rawArray[5].substring(2, 9) / 60))) * -1;
+        var longDecimal = rawArray[8] == 'E' ?
+        parseFloat(rawArray[7].substring(0, 3)) + parseFloat((rawArray[7].substring(3, 10) / 60)) :
+        (parseFloat(rawArray[7].substring(0, 3)) + parseFloat((rawArray[7].substring(3, 10) / 60))) * -1;
+        var ac=rawArray[12].substring(4,6);
+        var ac1 = (parseInt(ac, 16).toString(2));
+        while (ac1.length < 8) {
+            ac1 = '0' + ac1;
+        }
+        ac1 = ac1.substr(5, 1);
+        var power = rawArray[12].substring(2, 4);
+        
+        var power1 = parseInt(power, 16).toString(2);
+        while (power1.length < 8) {
+            power1 = '0' + power1;
+        }
+        power1 = power1.substr(4, 1);
+        return {
+            "imei": rawArray[1],
+            "command": rawArray[2],
+            "date": rawArray[11] ? new Date(parseInt('20' +
+            rawArray[11].substring(4, 6)),
+            parseInt(rawArray[11].substring(2, 4) - 1),
+            parseInt(rawArray[11].substring(0, 2)),
+            parseInt(rawArray[3].substring(0, 2)),
+            parseInt(rawArray[3].substring(2, 4)),
+            parseInt(rawArray[3].substring(4, 6))
+        ) : null,
+        "dateString": rawArray[11],
+        "latDegrees": rawArray[5] + rawArray[6],
+        "longDegrees": rawArray[7] + rawArray[8],
+        "latDecimal": latDecimal,
+        "longDecimal": longDecimal,
+        "insertionTime": new Date(),
+        "raw": raw,
+        "valid": rawArray[4],
+        "speed": (parseFloat(rawArray[9]) * 1.60934).toFixed(2),
+        "timeString": rawArray[3],
+        "heading": rawArray[10],
+        "power": power1/* =='0'?'1':'0' */,
+        "mileage": rawArray[12],
+        "ignition":ac1/* =='0'?'1':'0' */,
+        "GPS positioned":((rawArray[4]=='A')?1:0),
+        "geoJSON": {
+            "type": "Point",
+            "coordinates": [ longDecimal, latDecimal ]
+        }
+    }
+} catch (err) {
+    console.error("exception handled");
+    console.error(err);
+}
+}
+}    
+
+function parseMobileTrackerData(raw) {
+    return {
+        imei: raw.imei.toString(),
+        command: "mPing",
+        latDecimal: parseFloat(raw.curLat),
+        longDecimal: parseFloat(raw.curLong),
+        date: new Date(raw.curDateTime),
+        batteryStatus: raw.batteryStatus,
+        raw : JSON.stringify(raw),
+        deviceModel: raw.deviceModel,
+        deviceUUID: raw.deviceUUID,
+        platform: raw.platform,
+        platformVersion: raw.platformVersion,
+        deviceManufacturer: raw.deviceManufacturer,
+        deviceSerialNo: raw.deviceSerialNo,
+        isVirtual: raw.isVertual,
+        insertionTime: new Date(),
+        sos: raw.SOS,
+        speed: raw.speed,
+        mode: raw.mode,
+        accuracy: raw.accuracy,
+        geoJSON: {
+            "type": "Point",
+            "coordinates": [parseFloat(raw.curLong),parseFloat(raw.curLat)]
+        }
+        
+    }
+}
+
+function parseAIS140Head(packet, socket) {
+    packet = packet.toString('utf8');
+    var msgParts = packet.split(',');
+    var header = {}
+    if (msgParts.length == 10) {
+        header.cmd = 'login_request';
+        header.packet = packet;
+        header.action = 'login_request';
+        header['device_id'] = msgParts[3];
+        socket.imei = msgParts[3];
+    }
+    if (msgParts.length == 13) {
+        header.cmd = 'heartbeat';
+        header.packet = packet;
+        header.action = 'heartbeat';
+        header['device_id'] = msgParts[3];
+        socket.imei = msgParts[3];
+    }
+    if (msgParts.length == 17) {
+        header.cmd = 'alertPacket';
+        header.packet = packet;
+        header.action = 'alertPacket';
+        header['device_id'] = msgParts[3];
+        socket.imei = msgParts[3];
+    }
+    if (msgParts.length >= 52) {
+        header.cmd = 'ping';
+        header.packet = packet;
+        header.action = 'ping';
+        header['device_id'] = msgParts[6];
+        socket.imei = msgParts[6];
+    }
+    return header;
+}
+
+function parseAIS140Ping(raw) {
+    raw = raw.toString('utf8');
+    raw = "$Header" + raw.split('$Header')[raw.split('$Header').length -1]
+    var msgParts = raw.split(',');
+    var date = new Date(
+        parseInt(msgParts[9].substr(4, 4)),
+        parseInt(msgParts[9].substr(2, 2)) - 1,
+        parseInt(msgParts[9].substr(0, 2)),
+        parseInt(msgParts[10].substr(0, 2)),
+        parseInt(msgParts[10].substr(2, 2)),
+        parseInt(msgParts[10].substr(4, 2)),
+    );
+    return {
+        firmwareVersion: msgParts[2],
+        command: msgParts[3],
+        msgID: msgParts[4],
+        packetStatus: msgParts[5],
+        isPastData: msgParts[5] == 'L' ? false : true,
+        imei: msgParts[6],
+        vehicleRegistration: msgParts[7],
+        "GPS positioned": msgParts[8],
+        dateString: msgParts[9],
+        timeString: msgParts[10],
+        date: date,
+        latDecimal: msgParts[11] * (msgParts[12] == 'N'? 1 : -1),
+        longDecimal: msgParts[13] * (msgParts[14] == 'E' ? 1 : -1),
+        speed: msgParts[15],
+        heading: msgParts[16],
+        satellites: msgParts[17],
+        altitude: msgParts[18],
+        ignition: msgParts[22],
+        power: msgParts[23],
+        gsmSignal: msgParts[28],
+        insertionTime : new Date(),
+        raw: raw,
+        sos: msgParts[4] == '10' ? true : null,
+        geoJSON : {
+            "type" : "Point",
+            "coordinates" : [ 
+                msgParts[13] * (msgParts[14] == 'E' ? 1 : -1), 
+                msgParts[11] * (msgParts[12] == 'N'? 1 : -1)
+            ]
+        }
+    }
+}
+
+function parseAIS140Packets(packets, socket) {
+    var pings = [];
+    var alertPackets = [];
+    var logins = [];
+    var hbts = [];
+    var latestPing;
+    for (var i = 0; i < packets.length; i++){
+        var parsedHead = parseAIS140Head(packets[i], socket);
+        console.log(parsedHead);
+        if (parsedHead.cmd == 'ping') {
+            pings.push(parseAIS140Ping(packets[i]));
+        }
+        if (parsedHead.cmd == 'login_request') {
+            logins.push(packets[i]);
+        }
+        if (parsedHead.cmd == 'heartbeat') {
+            hbts.push(packets[i]);
+        }
+        if (parsedHead.cmd == 'alertPacket') {
+            alertPackets.push(packets[i]);
+        }
+    }
+
+    
+    if (pings.length > 0) {
+        for (var i = 0; i < pings.length; i++){
+            pings[i].processed = false;
+            if (pings[i].msgID == '10') {
+                pings[0].sos == true;
+            }
+        }
+        if (alertPackets.length) {
+            
+        }
+        latestPing = pings.splice(0, 1);    
+        GPS.insertMany(pings, function (err, insertedAISPings) {
+            if(err){
+                console.log(err);
+
+            }
+            else {
+                //console.log('insertedAISPings', insertedAISPings);
+            }
+        })
+    }
+    //console.log('latestPing', latestPing);
+    if (latestPing) {
+        latestPing[0].processed = null;
+        return latestPing[0];
+    }
+    else {
+        return null;
+    }
+}
+
+
+module.exports.intermediate = function (data) {
+   // console.log(data.data);
+    module.exports.process(data, KafkaService);
+}
+
+
+module.exports.process = function (data, KafkaService) {
+    try {
+        
+        var raw = data.data
+        
+        var socket = data.socket
+        var parsedData = {}
+        
+        
+        
+        /**
+        * mTracker proto
+        * 
+        */
+        
+        if (!(Buffer.isBuffer(raw))) {
+            //console.log('mobile tracker : ', raw);
+            //socket.setTimeout(5000);
+            if (!raw.imei) return;
+            parsedData = parseMobileTrackerData(raw);
+            //console.log(raw);
+        }
+        else if (raw.toString('utf8').indexOf('$Header') == 0) {
+            //console.log('ais140 : ', raw);
+            var packets = raw.toString('utf8').split('\r\n');
+            packets.pop();
+            //console.log("AIS PACKETS :: ", packets);
+            parsedData = parseAIS140Packets(packets, socket);
+            socket.setTimeout(0);  
+            //var parsedHead = parseAIS140Head(raw, socket);
+            //console.log(parsedHead);
+            if (parsedData) {
+                //parsedData = parseAIS140ping(raw);
+                //console.log(parsedData);
+            } else {
+                return;
+            }
+            
+        }
+        else if(/* raw.toString("utf8").split('=')[1] */ raw.toString('utf8').indexOf('ApiString') == 0){
+            //GB101
+            //console.log('gb101 : ', raw);
+            if (true) {
+                var raw1 = raw.toString("utf8").split('=')[1];
+                socket.write('+##Received OK');
+                parsedData = parseRawGpsGB(raw1, 'GB');
+            }
+        }
+        else if (Buffer.from(raw, 'hex').toString('hex').indexOf('00') == 0) {
+            //fmb protocol
+            //console.log('fmb : ', raw);
+            var hexString = Buffer.from(raw, 'hex').toString('hex');
+            if (hexString.indexOf('00000000') == 0) {
+                parsedData = parseFmbData(hexString, socket);
+                sendFmbAck(socket, parsedData.number_of_data);
+                
+            }
+            else if(hexString.indexOf('00') == 0){
+                
+                fmb_login(hexString, socket);
+                //return;
+            }
+        }    
+        else if (raw.toString('utf8').indexOf("imei:") != -1) {
+            //console.log('COBAN GPS103/GPS303 : ', raw);
+            /**
+            * COBAN GPS103/GPS303 PROTOCOL
+            */
+            var gps_x03 = new GPS_x03(raw.toString('utf8'), socket);
+            
+            if (gps_x03.command == 'login') {
+                gps_x03.doLogin();
+            }
+            if (gps_x03.command == 'tracker') {
+                parsedData = gps_x03.getPingData();
+            }
+            
+        }
+        else if (raw.toString('utf8').indexOf('(') == 0 && (raw.toString('utf8').lastIndexOf(')') == (raw.toString('utf8').length - 1)) && raw.toString('utf8').indexOf(' ') != 1) {
+            //tk protocol
+            
+            var data = raw.toString('utf8');
+            var cmd_start = data.indexOf("B");
+            if(data.substr(cmd_start,4)=='BP05')
+            {
+                socket.write('('+data.substring(1,cmd_start) + 'AP05)');
+                return;
+            }
+            parsedData = parseRawGps(raw.toString('utf8'), 'TK');
+            //console.log('TK : ', raw, parsedData.imei);
+        }
+        else if(raw.toString("utf8").indexOf('$$CLIENT_1')==0)
+        {
+            //console.log('$$CLIENT_1 : ', raw);
+
+            if(raw.toString("utf8").indexOf('Ignition') != -1)
+            {
+                parsedData = parseRawGpsTs(raw.toString('utf8'), 'first');
+            }
+            else
+            {
+                parsedData = parseRawGpsTs(raw.toString('utf8'), 'rest');
+            }
+        }
+        else if(raw.toString("utf8").indexOf('Sender')==0)
+        {
+            //console.log('Sender : ', raw);
+            parsedData = parseRawGpsVTX(raw.toString("utf8"));  
+            socket.write('Ok');
+        } 
+        //'yantra' protocol    
+        else if (raw.toString('utf8').split(',').length >= 3 && raw.toString('utf8').startsWith('$') && raw.toString('utf8').endsWith('#')) {
+            
+            //console.log('Yantra : ', raw);
+            if (raw.toString('utf8').startsWith('$3')) {
+                //alert packet
+                //parsedData = parseYantraAlert(raw.toString('utf8'));
+            }
+            else {
+                //data packet
+                parsedData = parseYantraData(raw.toString('utf8'));
+                console.log(parsedData);
+                socket.destroy();
+            }
+        }    
+        else if (raw.toString('utf8').split(',').length >= 3 ) {
+            
+            //console.log('g900 : ', raw);
+            
+            //g900 protocol
+            if (raw.toString('utf8').split(',').length == 3) {
+                /**
+                * implement authorizeG900
+                */
+                cmdPacket = Buffer.from(raw).toString('hex')
+                
+                cmdPackets.create({ cmd: cmdPacket, device_id: cmdPacket.split(',')[1], time: new Date() }, function (err, inserted) {
+                    if (err) {
+                        console.error(err)
+                        return;
+                    }
+                    else {
+                        
+                    }
+                });
+                
+                //change_G900WKMD(socket, raw.toString('utf8').split(',')[1])
+                return;
+            }
+            /* var hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours().toString()
+            var mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes().toString()
+            var ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds().toString() */
+            
+            if (raw.toString('utf8').split(',').length >= 12) {
+                
+                parsedData = parseRawGps(raw.toString('utf8'), 'G');
+            }
+            
+        }
+        
+        else if (Buffer.from(raw, 'hex').toString('hex').indexOf('2323') == 0) {
+            //t8803 protocol
+            //console.log('t8803 : ', raw);
+            var parsedHead = parseT8803_head(raw, socket);
+            if (parsedHead.cmd == 'login_request') {
+                authorizeT8803(parsedHead.device_id, socket);
+                return;
+            }
+            if (parsedHead.cmd == 'ping') {
+                
+                parsedData = parseT8803_data(raw);
+                return;
+            }
+            if (parsedHead.cmd == 'heartbeat') {
+                respond_T8803_heartbeat(parsedHead.device_id, socket);
+                return;
+            }
+        }   
+        else if (Buffer.from(raw, 'hex').toString('hex').indexOf('2929') == 0) {
+            //VT1000 protocol
+            //console.log('VT1000 : ', raw);
+            if(Buffer.from(raw, 'hex').toString('hex').indexOf('B1')==4)
+            {
+                socket.write('21');
+            }
+            if(Buffer.from(raw, 'hex').toString('hex').indexOf('80')==4)
+            {
+                
+                parsedData = parseVT1000(Buffer.from(raw, 'hex').toString('hex'));
+            }
+            
+        } 
+        
+        else if (Buffer.from(raw, 'hex').toString('hex').indexOf('20') == 0) {
+            //L100 protocol
+            
+            //console.log('L100 : ', raw);
+            parsedData = parseRawGpsL(Buffer.from(raw, 'hex').toString('hex'));
+            
+            
+        } 
+        else if (raw.toString('hex').indexOf('24') == 0) {
+            //console.log('24 : ', raw);
+            raw = raw.toString('hex');
+            var head = raw.substr(0, 2);
+            var imei = raw.substr(2, 10);
+            var date = new Date(
+                parseInt('20' + raw.substr(22, 2)),
+                parseInt(raw.substr(20, 2) - 1),
+                parseInt(raw.substr(18, 2)),
+                parseInt(raw.substr(12, 2)),
+                parseInt(raw.substr(14, 2)),
+                parseInt(raw.substr(16, 2))
+            );
+            var latitude = parseInt(raw.substr(24, 2)) + (parseFloat(raw.substr(26,6)) / 600000);
+            var longitude = parseInt(raw.substr(34, 3)) + (parseFloat(raw.substr(37,6)) / 600000);//parseInt(raw.substr(34, 9)) / 1000000;//dex_to_degrees(raw.substr(34, 9), 0) //
+            var speed = parseInt(raw.substr(44, 3)).toString();
+            var heading = parseInt(raw.substr(47, 3)).toString();
+            
+            parsedData = {
+                imei: imei,
+                date: date,
+                latDecimal: latitude,
+                longDecimal: longitude,
+                latString: raw.substr(24, 8),
+                longString: raw.substr(34, 9),
+                raw: raw,
+                speed: speed,
+                heading: heading,
+                insertionTime: new Date(),
+                geoJSON: {
+                    "type": "Point",
+                    "coordinates": [longitude, latitude]
+                }
+            }
+            console.log(parsedData);
+        }    
+        else if (Buffer.from(raw, 'hex').toString('hex').indexOf('6767') == 0) {
+            //gm-06 protocol
+            //console.log('gm-06 : ', raw);
+            var parsedHead = parseGM06_Head(raw, socket);
+            if (parsedHead.cmd == 'login_request') {
+                console.log(Buffer.from(raw, 'hex').toString('hex'))
+                authorizeGM06(socket, parsedHead, raw);
+                parsedHead.insertionTime = new Date();
+                
+            }
+            else if (parsedHead.cmd == 'ping') {
+                parsedData = get_GM06_ping_data(parsedHead, raw, socket);
+                
+            }
+            else if (parsedHead.cmd == 'heartbeat') {
+                receive_GM06_heartbeat(raw, socket)
+                parsedHead.insertionTime = new Date();
+                
+                
+                /**
+                * parse HEARTBEAT DATA
+                */
+                var parsed_HBT = JSON.parse(JSON.stringify(parsedHead))
+                parsed_HBT.device_id = parsed_HBT.device_id.toString();
+                parsed_HBT.insertionTime = new Date();
+                var batteryStatus = parseInt(parsedHead.data.substr(1, 1)).toString();
+                var gsmSignal = parseInt(parsedHead.data.substr(2, 1));
+                var terminalInfo = parseInt(parsedHead.data.substr(2, 2), 16).toString(2);
+                while (terminalInfo.length < 8) {
+                    terminalInfo = '0' + terminalInfo
+                }
+                parsed_HBT.ignitionLock = terminalInfo.substr(2, 1) == '0' ? '1' : '0';
+                parsed_HBT.gpsTracking = terminalInfo.substr(7, 1);
+                parsed_HBT.alarm = terminalInfo.substr(2, 3);
+                parsed_HBT.power = terminalInfo.substr(0, 1);
+                parsed_HBT.activated = terminalInfo.substr(7, 1);
+                parsed_HBT.ACC = terminalInfo.substr(6, 1);
+                parsed_HBT.batteryStatus = batteryStatus;
+                parsed_HBT.gsmSignal = gsmSignal;
+                if (parsed_HBT.ACC == "") {
+                    parsed_HBT.ACC = "0";
+                }
+                
+                cmdPackets.create(parsed_HBT, function (err, cmdPkt) {
+                    if (err) {
+                        console.error(err)
+                        return;
+                    }
+                    else {
+                        TCPUTIL.setACCNotif(parsed_HBT.device_id, parsed_HBT.ACC, KafkaService)
+                        
+                        
+                        
+                        
+                        Device.findOne({ "Device_ID": parsed_HBT.device_id }).populate('user').exec(function (err, dev) {
+                            if (err) {
+                                console.error(err);
+                                
+                            }
+                            else if (dev) {
+                                
+                                /**
+                                * update last cmdPacket with the vehicle mapped against device
+                                */
+                                cmdPackets.update({ _id: cmdPkt._id }, { $set: { vehicle: dev.vehicle } }).exec();
+                                //----------------------------------------------------------------------------------
+                                var previousPower = dev.power;
+                                var user = dev.user;
+                                dev['last_ACC'] = parsed_HBT.ACC;
+                                dev['last_ACC_on'] = new Date();
+                                dev['batteryStatus'] = batteryStatus;
+                                dev['gsmSignal'] = parsed_HBT.gsmSignal;
+                                dev['ignitionLock'] = parsed_HBT.ignitionLock;
+                                dev['gpsTracking'] = parsed_HBT.gpsTracking;
+                                dev['alarm'] = parsed_HBT.alarm;
+                                dev['power'] = parsed_HBT.power;
+                                dev['activated'] = parsed_HBT.activated;
+                                //dev['user'] = dev.user._id;
+                                
+                                dev.save(function (err) {
+                                    if (err) {
+                                        console.error(err);
+                                    }
+                                    else {
+                                        KafkaService.sendRecord({ namespace: "gpsio", room: parsed_HBT.device_id.toString(), channel: parsed_HBT.device_id.toString() + 'acc', data: [parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev] })
+                                        /*                                             gpsio.to(parsed_HBT.device_id.toString()).emit(parsed_HBT.device_id.toString() + 'acc', parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev)
+                                        */                                            TCPUTIL.setDeviceStatus(dev, null);
+                                        if ((parsed_HBT.power == "0" || parsed_HBT.power == "1") && previousPower != parsed_HBT.power) {
+                                            //setPowerNotification
+                                            TCPUTIL.setPowerNotif(dev, parsed_HBT.power, KafkaService, user);
+                                        }
+                                    }
+                                })
+                                
+                            }
+                        })
+                    }
+                });
+                
+            }
+            else if (parsedHead.cmd == 'alarm') {
+            }
+            
+            
+            
+        }
+        else {
+           // console.log('gt-06 : ', raw);
+            //gt-06 protocol
+            var parsedHead = parseGT06_Head(raw, socket);
+            var hasCombinedHBT = false;
+            var indexOfHBT = raw.toString('hex').indexOf('78780a13');
+            if (indexOfHBT != -1 && indexOfHBT != 0) {
+                                    /**
+                    * parse HEARTBEAT DATA
+                    */
+                //console.log('combined HBT detected for ', parsedHead.device_id)
+                var hbtBuf = Buffer.from(raw.toString('hex').substr(indexOfHBT), 'hex');
+                //console.log(hbtBuf);
+                var parsed_HBT = parseGT06_Head(hbtBuf, socket);
+                parsed_HBT.device_id = parsed_HBT.device_id.toString();
+                parsed_HBT.insertionTime = new Date();
+                var batteryStatus = parseInt(parsed_HBT.data.substr(1, 1)).toString();
+                var gsmSignal = parseInt(parsed_HBT.data.substr(2, 1));
+                var terminalInfo = parseInt(parsed_HBT.data.substr(0, 2), 16).toString(2);
+                while (terminalInfo.length < 8) {
+                    terminalInfo = '0' + terminalInfo
+                }
+                parsed_HBT.ignitionLock = terminalInfo.substr(0, 1);
+                parsed_HBT.gpsTracking = terminalInfo.substr(1, 1);
+                parsed_HBT.alarm = terminalInfo.substr(2, 3);
+                parsed_HBT.power = terminalInfo.substr(5, 1);
+                parsed_HBT.activated = terminalInfo.substr(7, 1);
+                parsed_HBT.ACC = terminalInfo.substr(6, 1);
+                parsed_HBT.batteryStatus = batteryStatus;
+                parsed_HBT.gsmSignal = gsmSignal;
+                if (parsed_HBT.ACC == "") {
+                    parsed_HBT.ACC = "0";
+                }
+                
+                TCPUTIL.processServerCommandQueue(parsed_HBT.device_id, socket);
+                cmdPackets.create(parsed_HBT, function (err, cmdPkt) {
+                    if (err) {
+                        console.error(err)
+                        return;
+                    }
+                    else {
+                        //console.log('hbt created on dev', cmdPkt._id)
+                        TCPUTIL.setACCNotif(parsed_HBT.device_id, parsed_HBT.ACC, KafkaService)
+                        
+                        
+                        
+                        
+                        Device.findOne({ "Device_ID": parsed_HBT.device_id }).populate('user').exec(function (err, dev) {
+                            if (err) {
+                                console.error(err);
+                                
+                            }
+                            else if (dev) {
+                                
+                                /**
+                                * update last cmdPacket with the vehicle mapped against device
+                                */
+                                cmdPackets.update({ _id: cmdPkt._id }, { $set: { vehicle: dev.vehicle } }).exec();
+                                //----------------------------------------------------------------------------------
+                                var previousPower = dev.power;
+                                var user = dev.user;
+                                dev['last_ACC'] = parsed_HBT.ACC;
+                                dev['last_ACC_on'] = new Date();
+                                dev['batteryStatus'] = batteryStatus;
+                                dev['gsmSignal'] = parsed_HBT.gsmSignal;
+                                dev['ignitionLock'] = parsed_HBT.ignitionLock;
+                                dev['gpsTracking'] = parsed_HBT.gpsTracking;
+                                dev['alarm'] = parsed_HBT.alarm;
+                                dev['power'] = parsed_HBT.power;
+                                dev['activated'] = parsed_HBT.activated;
+                                dev['status'] = parsed_HBT.ACC == 1 ? 'IDLING' : 'STOPPED'
+                                //dev['user'] = dev.user._id;
+                                
+                                dev.save(function (err) {
+                                    
+                                    if (err) {
+                                        console.error(err);
+                                    }
+                                    else {
+                                        KafkaService.sendRecord({ namespace: "gpsio", room: parsed_HBT.device_id.toString(), channel: parsed_HBT.device_id.toString() + 'acc', data: [parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev] })
+                                        /*                                             gpsio.to(parsed_HBT.device_id.toString()).emit(parsed_HBT.device_id.toString() + 'acc', parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev)
+                                        */                                            TCPUTIL.setDeviceStatus(dev, null);
+                                        if ((parsed_HBT.power == "0" || parsed_HBT.power == "1") && previousPower != parsed_HBT.power) {
+                                            //setPowerNotification
+                                            TCPUTIL.setPowerNotif(dev, parsed_HBT.power, KafkaService, user);
+                                        }
+                                    }
+                                })
+                                
+                            }
+                        })
+                    }
+                });
+                
+            }
+            if (parsedHead.device_id == '') {
+                socket.destroy();
+                return;
+            }
+            if (parsedHead.start == '7878') {
+                if (parsedHead.device_id == '860016021075051') {
+                    console.log(parsedHead);
+                }
+                if (parsedHead.cmd == 'login_request') {
+                    authorizeGT06(socket, parsedHead, raw);
+                    parsedHead.insertionTime = new Date();
+                    
+                }
+                else if (parsedHead.cmd == 'ping') {
+                    
+                    gt06_ping_response(socket)
+                    parsedData = get_GT06_ping_data(parsedHead, raw, socket);
+                    
+                    if (parsedData.latDecimal == 0) {
+                        console.info('gt06 0,0 from : ' + socket.imei)
+                    }
+                }
+                else if (parsedHead.cmd == 'heartbeat') {
+                    receive_heartbeat(raw, socket)
+                    parsedHead.insertionTime = new Date();
+                    
+                    
+                    /**
+                    * parse HEARTBEAT DATA
+                    */
+                    var parsed_HBT = JSON.parse(JSON.stringify(parsedHead))
+                    parsed_HBT.device_id = parsed_HBT.device_id.toString();
+                    parsed_HBT.insertionTime = new Date();
+                    var batteryStatus = parseInt(parsedHead.data.substr(1, 1)).toString();
+                    var gsmSignal = parseInt(parsedHead.data.substr(2, 1));
+                    var terminalInfo = parseInt(parsedHead.data.substr(0, 2), 16).toString(2);
+                    while (terminalInfo.length < 8) {
+                        terminalInfo = '0' + terminalInfo
+                    }
+                    parsed_HBT.ignitionLock = terminalInfo.substr(0, 1);
+                    parsed_HBT.gpsTracking = terminalInfo.substr(1, 1);
+                    parsed_HBT.alarm = terminalInfo.substr(2, 3);
+                    parsed_HBT.power = terminalInfo.substr(5, 1);
+                    parsed_HBT.activated = terminalInfo.substr(7, 1);
+                    parsed_HBT.ACC = terminalInfo.substr(6, 1);
+                    parsed_HBT.batteryStatus = batteryStatus;
+                    parsed_HBT.gsmSignal = gsmSignal;
+                    if (parsed_HBT.ACC == "") {
+                        parsed_HBT.ACC = "0";
+                    }
+                    
+                    TCPUTIL.processServerCommandQueue(parsed_HBT.device_id, socket);
+                    cmdPackets.create(parsed_HBT, function (err, cmdPkt) {
+                        if (err) {
+                            console.error(err)
+                            return;
+                        }
+                        else {
+                            TCPUTIL.setACCNotif(parsed_HBT.device_id, parsed_HBT.ACC, KafkaService)
+                            
+                            
+                            
+                            
+                            Device.findOne({ "Device_ID": parsed_HBT.device_id }).populate('user').exec(function (err, dev) {
+                                if (err) {
+                                    console.error(err);
+                                    
+                                }
+                                else if (dev) {
+                                    
+                                    /**
+                                    * update last cmdPacket with the vehicle mapped against device
+                                    */
+                                    cmdPackets.update({ _id: cmdPkt._id }, { $set: { vehicle: dev.vehicle } }).exec();
+                                    //----------------------------------------------------------------------------------
+                                    var previousPower = dev.power;
+                                    var user = dev.user;
+                                    dev['last_ACC'] = parsed_HBT.ACC;
+                                    dev['last_ACC_on'] = new Date();
+                                    dev['batteryStatus'] = batteryStatus;
+                                    dev['gsmSignal'] = parsed_HBT.gsmSignal;
+                                    dev['ignitionLock'] = parsed_HBT.ignitionLock;
+                                    dev['gpsTracking'] = parsed_HBT.gpsTracking;
+                                    dev['alarm'] = parsed_HBT.alarm;
+                                    dev['power'] = parsed_HBT.power;
+                                    dev['activated'] = parsed_HBT.activated;
+                                    dev['status'] = parsed_HBT.ACC == 1 ? 'IDLING' : 'STOPPED'
+                                    //dev['user'] = dev.user._id;
+                                    
+                                    dev.save(function (err) {
+                                        if (err) {
+                                            console.error(err);
+                                        }
+                                        else {
+                                            KafkaService.sendRecord({ namespace: "gpsio", room: parsed_HBT.device_id.toString(), channel: parsed_HBT.device_id.toString() + 'acc', data: [parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev] })
+                                            /*                                             gpsio.to(parsed_HBT.device_id.toString()).emit(parsed_HBT.device_id.toString() + 'acc', parsed_HBT.ACC, parsed_HBT.device_id.toString(), new Date(), dev)
+                                            */                                            TCPUTIL.setDeviceStatus(dev, null);
+                                            if ((parsed_HBT.power == "0" || parsed_HBT.power == "1") && previousPower != parsed_HBT.power) {
+                                                //setPowerNotification
+                                                TCPUTIL.setPowerNotif(dev, parsed_HBT.power, KafkaService, user);
+                                            }
+                                        }
+                                    })
+                                    
+                                }
+                            })
+                        }
+                    });
+                    
+                }
+                else if (parsedHead.cmd == 'alert') {
+                    parsedData = get_GT06_alarm_data(parsedHead, raw, socket);
+                } 
+                else if (parsedHead.cmd == 'stringInfo') {
+                    console.log(parsedHead);
+                    console.log(socket.imei, socket.serverCommand)
+                    var parsedStringInfo = parse_GT06_stringInfo(parsedHead);
+                    TCPUTIL.setDCQResponse(parsedStringInfo, socket.imei);
+                    return;
+                }
+                
+                
+            }
+            
+            else if (parsedHead.start.indexOf('28') != -1 || parsedHead.start.indexOf('24') != -1) {
+                console.log(parsedHead)
+                parsedData = parseG500OBD_data(raw)
+            }
+            else {
+                console.info("UNKNOWN  PROTOCOL DETECTED")
+            }
+        }
+        if (parsedData && parsedData.command == 'BP00') {
+            socket.write(parsedData.imei + 'AP01HSO')
+            
+        }
+        
+        /**
+        * identify if server commands are queued to be sent for this imei
+        */
+        if(parsedData){
+            TCPUTIL.processServerCommandQueue(parsedData.imei, socket);
+        }
+        
+        
+        if (parsedData && parsedData.imei && (parsedData.command == 'BR00' ||
+        parsedData.command == 'V1' ||
+        parsedData.command == '12' ||
+        parsedData.command == '22' ||
+        parsedData.command == '19' ||
+        parsedData.command == '2084' ||
+        parsedData.command == '08' ||
+        parsedData.command == 'GB' ||
+        parsedData.command == 'L100' ||
+        parsedData.command == '80' ||
+        parsedData.command == 'TS' ||
+        parsedData.command == 'VTX' ||
+        parsedData.command == 'mPing' ||
+        parsedData.command == 'tracker' ||
+        parsedData.command == '$' ||
+        parsedData.command == '$3' ||
+        parsedData.command == '02' ||
+        parsedData.command == '16' || 
+        !parsedData.command || 
+        parsedData.command == 'NR' ||
+        parsedData.command == 'EA' ||
+        parsedData.command == 'TA' ||
+        parsedData.command == 'HP' ||
+        parsedData.command == 'IN' ||
+        parsedData.command == 'IF' ||
+        parsedData.command == 'BD' ||
+        parsedData.command == 'BR' ||
+        parsedData.command == 'BL'
+    )) {
+        
+        
+        
+        
+        GPS
+        .aggregate([
+            { $match: { "imei": parsedData.imei , isPastData: {$ne : true} } },                  //
+            { $sort: { "insertionTime": -1 } },
+            { $limit: 1 },
+            {
+                $lookup:
+                {
+                    from: "devInfo",
+                    localField: "imei",
+                    foreignField: "Device_ID",
+                    as: "lookedUpDevice"
+                }
+            },
+            { $unwind: "$lookedUpDevice" },
+            {
+                $lookup:
+                {
+                    from: "client_master",
+                    localField: "lookedUpDevice.user",
+                    foreignField: "_id",
+                    as: "lookedUpUser"
+                }
+            },
+            {
+                $lookup:
+                {
+                    from: "trackroutes",
+                    localField: "lookedUpDevice.currentRoute",
+                    foreignField: "_id",
+                    as: "lookedUpCurrentRoute"
+                }
+            },
+            {
+                $unwind: {
+                    path: "$lookedUpCurrentRoute",
+                    preserveNullAndEmptyArrays: true
+                }
+            },
+            {
+                $lookup:
+                {
+                    from: "routeDeviceMap",
+                    localField: "lookedUpDevice.currentTrip",
+                    foreignField: "_id",
+                    as: "lookedUpCurrentTrip"
+                }
+            },
+            {
+                $unwind: {
+                    path: "$lookedUpCurrentTrip",
+                    preserveNullAndEmptyArrays: true
+                }
+            },
+            {
+                $lookup:
+                {
+                    from: "vehicletypes",
+                    localField: "lookedUpDevice.vehicleType",
+                    foreignField: "_id",
+                    as: "lookedUpVehicleType"
+                }
+            },
+            {
+                $unwind: {
+                    path: "$lookedUpVehicleType",
+                    preserveNullAndEmptyArrays: true
+                }
+            }
+        ]).allowDiskUse(true)
+        .exec(function (err, x) {
+            if (err) {
+                console.error(err);
+                return;
+            }
+            var dataForRoadAPI = '';
+            if (true) {
+                
+                var displacement = 0;
+                if (x.length > 0) {
+                    displacement = TCPUTIL.getDistanceFromLatLonInKm(
+                        x[0].latDecimal,
+                        x[0].longDecimal,
+                        parsedData.latDecimal,
+                        parsedData.longDecimal
+                    )
+                }
+                if ((parsedData.latDecimal == 0 || parsedData.longDecimal == 0) && x[0]) {
+                    TCPUTIL.setDeviceStatus(x[0].lookedUpDevice, 'nofix');
+                }
+                
+                if (/*x[0] && displacement > 0.40 && (new Date() - new Date(x[0].insertionTime) < 15000) && parsedData.imei != '868728030654476' && parsedData.imei != '2020202020'*/ false) {
+                    //do nothing
+                    console.log("Too much displacement in short time for " + parsedData.imei);
+                }
+                else if (/*new Date(parsedData.insertionTime) - new Date(parsedData.date) > (5 * 60 * 1000) && (parsedData.command == 'BR00' || parsedData.command == '22') && parsedData.imei != '123456789012345' && parsedData.command != "08"*/ false) {
+                    //do nothing
+                    console.log("Insertion time - date > 5 mins " + parsedData.imei);
+                }
+                
+                else if (x[0] && new Date() - new Date(parsedData.date) < (-1 * 365 * 24 * 60 * 60 * 1000) && parsedData.imei != '123456789012345' && parsedData.command != "08") {
+                    //do nothing
+                    console.log("Device from future " + parsedData.imei);
+                }      
+                else {
+                    if (x[0] && x[0].lookedUpDevice.last_device_time && new Date(parsedData.date) - new Date(x[0].lookedUpDevice.last_device_time) < 1 && parsedData.imei != '123456789012345') {
+                        //do nothing
+                        if(parsedData.isPastData == null) parsedData.isPastData = true;
+                        
+                        if (x[0] && new Date(parsedData.date) - new Date(x[0].date) < 1 && parsedData.imei != '123456789012345') {
+                            //console.log("Chronology not maintained by device " + parsedData.imei);
+                        }
+                    }
+                    if ( x[0] &&
+                        displacement < FLUCTUATION_THRESHOLD && parsedData.command != 'mPing' &&
+                        ((parsedData.speed == 0 && x.length > 0 && x[0].speed == 0) || (x[0].lookedUpDevice && x[0].lookedUpDevice.ignitionSource != 'MOVEMENT' && x[0].lookedUpDevice.last_ACC == 0 && parsedData.speed <10 && x.length > 0 && x[0].speed < 10))
+                    ) {
+                        //recalculate displacement on interpolated fields
+                        
+                        parsedData.isFluctuation = true;
+                        /**
+                        * if displacement from last location < FLUCTUATION_THRESHOLD
+                        * and speed == 0
+                        * then update the last ping data with current time
+                        */
+                        //("MITIGATING FLUCTUATION")
+                        
+                        
+                    }
+                    if(parsedData.command == 'mPing'){
+                        if(parsedData.accuracy > 27){
+                            parsedData.isFluctuation = true;
+                        }
+                    }
+                    
+                    if (parsedData.insertionTime != 'Invalid Date'
+                    && parsedData.latDecimal != 0
+                    && parsedData.longDecimal != 0
+                    && typeof parsedData.latDecimal == "number"
+                    && typeof parsedData.longDecimal == "number"
+                    && parsedData.speed != "NaN"
+                    && !isNaN(parseFloat(parsedData.latDecimal))
+                    && !isNaN(parseFloat(parsedData.longDecimal))) {
+                        
+                        
+                        if (x[0]) {
+                            parsedData.vehicle = ObjectID(x[0].lookedUpDevice.vehicle);
+                            //get distance on interpolated points, if interpolation was returned by google api
+                            var interpolatedDistance = 0;
+                            var previousLat;
+                            var previousLong;
+                            if (x[0].interpolated && x[0].interpolated.length > 0) {
+                                previousLat = x[0].interpolated[x[0].interpolated.length - 1].location.latitude
+                                previousLong = x[0].interpolated[x[0].interpolated.length - 1].location.longitude
+                            }
+                            else {
+                                previousLat = x[0].latDecimal
+                                previousLong = x[0].longDecimal
+                            }
+                            
+                            
+                            if (parsedData.interpolated && parsedData.interpolated.length > 1) {
+                                
+                                interpolatedDistance += TCPUTIL.getDistanceFromLatLonInKm(
+                                    previousLat,
+                                    previousLong,
+                                    parsedData.interpolated[0].location.latitude,
+                                    parsedData.interpolated[0].location.longitude
+                                )
+                                
+                                for (var m = 0; m < parsedData.interpolated.length - 1; m++) {
+                                    interpolatedDistance += TCPUTIL.getDistanceFromLatLonInKm(
+                                        parsedData.interpolated[m].location.latitude,
+                                        parsedData.interpolated[m].location.longitude,
+                                        parsedData.interpolated[m + 1].location.latitude,
+                                        parsedData.interpolated[m + 1].location.longitude
+                                    )
+                                }
+                            }
+                            else {
+                                interpolatedDistance = TCPUTIL.getDistanceFromLatLonInKm(
+                                    previousLat,
+                                    previousLong,
+                                    parsedData.latDecimal,
+                                    parsedData.longDecimal
+                                )
+                            }
+                            /* parsedData.distanceFromPrevious = interpolatedDistance;
+                            parsedData.odo = x[0].lookedUpDevice.total_odo + parsedData.distanceFromPrevious; */
+                            if (parsedData.odo != null) {
+                                parsedData.distanceFromPrevious = parsedData.odo - (x[0].lookedUpDevice.total_odo || 0);
+                                interpolatedDistance = parsedData.distanceFromPrevious;
+                            }
+                            else {
+                                parsedData.distanceFromPrevious = interpolatedDistance;
+                                parsedData.odo = x[0].lookedUpDevice.total_odo + parsedData.distanceFromPrevious;
+                            }
+                        }
+                        
+                        
+                        if (parsedData.fuelVoltage && x[0] && parsedData.ignition == '1') {
+                            
+                            if (!(x[0].lookedUpDevice.last_ACC == 1 && (new Date() - new Date(x[0].lookedUpDevice.last_ACC_on) > 3 * 60 * 1000))) {
+                                parsedData.currentFuel = x[0].lookedUpDevice.currentFuel;
+                            }
+                            
+                            else if (x[0].lookedUpDevice.vehicleType !== null) {
+                                if (x[0].lookedUpVehicleType) {
+                                    var currentFuel = TCPUTIL.getCurrentFuel(x[0].lookedUpVehicleType, parsedData.fuelVoltage);
+                                    if (currentFuel[1] > x[0].lookedUpVehicleType.tank_size) {
+                                        parsedData.currentFuel = x[0].lookedUpVehicleType.tank_size
+                                    }
+                                    else if (currentFuel[1] < 0) {
+                                        parsedData.currentFuel = 0;
+                                    }
+                                    else {
+                                        parsedData.currentFuel = currentFuel[1];
+                                    }
+                                }
+                                
+                                
+                            }
+                        }
+                        else if (parsedData.fuelVoltage && x[0] && parsedData.ignition == '0') {
+                            parsedData.currentFuel = x[0].lookedUpDevice.currentFuel;
+                        }
+                        
+                        //if speed is less than 1, ignore
+                        if (parseFloat(parsedData.speed) < 1) {
+                            parsedData.speed = "0";
+                        }
+                        
+                        parsedData.speed = parsedData.speed ? parsedData.speed.toString().split('.')[0] : null;
+                        if (x[0] && x[0].lookedUpDevice) {
+                            parsedData.group = x[0].lookedUpDevice.vehicleGroup;
+                            parsedData.vehicle = ObjectID(x[0].lookedUpDevice.vehicle);
+                        }
+                        MongoClient.connect(url, dbOption, function (err, db) {
+                            if (err) {
+                                console.error(err)
+                                return;
+                            }
+                            db.collection('gpstracker').insertOne(parsedData, function (err, inserted) {
+                                if (err) {
+                                    console.error(err)
+                                    console.error('Could not saved gps ping to db')
+                                    db.close()
+                                }
+                                else {
+                                    
+                                    db.close()
+                                    if (x[0]) {
+                                        if (parsedData.isPastData == true) {
+                                            if (parsedData.sos == true) {
+                                                TCPUTIL.setSOSNotif(x[0], parsedData, KafkaService);
+                                            }
+                                            return;
+                                        } 
+                                        if (parsedData.isFluctuation && parsedData.command == 'mPing') {
+                                            return;
+                                        }
+                                        KafkaService.sendRecord({ namespace: "gpsio", room: parsedData.imei, channel: parsedData.imei, data: [parsedData, 'ping', x[0].lookedUpDevice] })
+                                        //gpsio.to(parsedData.imei).emit(parsedData.imei, parsedData, 'ping', x[0].lookedUpDevice);
+                                        TCPUTIL.setMaxSpeed(parsedData, x[0].lookedUpDevice, x[0].lookedUpUser[0], new Date());
+                                        //TCPUTIL.routeTracking(x[0].lookedUpDevice.Device_ID, parsedData.longDecimal, parsedData.latDecimal, null, x[0], KafkaService);
+                                        //poi tracking
+                                        
+                                        TCPUTIL.poiTracking(x[0], null, parsedData.longDecimal, parsedData.latDecimal, KafkaService);
+                                        
+                                        var start = null;
+                                        var end = null;
+                                        if (parsedData.sos == true) {
+                                            TCPUTIL.setSOSNotif(x[0], parsedData, KafkaService);
+                                        }
+                                        if (parsedData.ignition != null && parsedData.ignition !== undefined) {
+                                            if (parsedData.command == 'BR00') {   //tk103
+                                                var data = parsedData.raw;
+                                                start = "28";
+                                                end = "29";
+                                                var cmd_start = data.indexOf("B");
+                                                var dataval = data.substring(cmd_start + 4, data.length - 1);
+                                            }
+                                            if (parsedData.command == 'V1') {   //tk103
+                                                var data = parsedData.raw;
+                                                start = "*HQ";
+                                                end = "#";
+                                                
+                                                var dataval = data;
+                                            }
+                                            
+                                            if (parsedData.command == '08') {   //fmbXXX
+                                                var data = parsedData.raw;
+                                                start = "00000000";
+                                                var cmd_start = data.indexOf("00000000");
+                                                var dataval = data.substring(cmd_start + 4, data.length - 1);
+                                            }
+                                            if (parsedData.command == 'GB') {   //fmbXXX
+                                                var data = parsedData.raw;
+                                                start = "{";
+                                                end = "}"
+                                                //var cmd_start = data.indexOf("00000000");
+                                                //var dataval=data.substring(cmd_start+4,data.length-1);
+                                                var dataval = '';
+                                            }
+                                            if (parsedData.command == 'L100') {   //fmbXXX
+                                                var data = parsedData.raw;
+                                                start = "20";
+                                                end = "02";
+                                                var startcmd = data.indexOf('$GPRMC');
+                                                var dataval = data.substring(startcmd);
+                                                //var dataval=data.substring(cmd_start+4,data.length-1);
+                                                
+                                            }
+                                            
+                                            if (parsedData.command == '80') {   //fmbXXX
+                                                var data = parsedData.raw;
+                                                start = "2929";
+                                                end = "0d";
+                                                
+                                                var dataval = data.substring(10, 90);
+                                                
+                                            }
+                                            
+                                            if (parsedData.command == 'TS') {   //fmbXXX
+                                                var data = parsedData.raw;
+                                                start = "$$";
+                                                end = "0a";
+                                                
+                                                var dataval = data.substring(0, data.length - 2)
+                                                
+                                            }
+                                            if (parsedData.command == 'VTX') {
+                                                var data = parsedData.raw;
+                                                start = "Sender";
+                                                end = "PKTEND";
+                                                
+                                                var dataval = data.substring(7, data.length - 7);
+                                                
+                                            }
+                                            if (parsedData.command == 'tracker') {
+                                                var data = parsedData.raw;
+                                                start = "imei:";
+                                                end = ";";
+                                                
+                                                var dataval = data;
+                                                
+                                            }
+                                            if (parsedData.command == 'NR' || parsedData.command == 'IF' || parsedData.command == 'EA') {
+                                                var data = parsedData.raw;
+                                                start = "$Header";
+                                                end = "*";
+                                                
+                                                var dataval = data;
+                                                
+                                            }
+                                            TCPUTIL.insertIgnition(parsedData, start, end, dataval, KafkaService);
+                                        }
+                                        // at line  804, write method to be called from TCPUTIL//
+                                        if (parsedData.fuelVoltage && parsedData.currentFuel != null) {
+                                            TCPUTIL.checkFuelFill(x[0], parsedData, x[0].lookedUpVehicleType.tank_size, KafkaService)
+                                        }
+                                        //
+                                        if (parsedData.sos == true) {
+                                            TCPUTIL.sosAlert(x[0].lookedUpDevice, x[0].lookedUpUser[0], parsedData);
+                                        }
+                                        var today_odo = 0
+                                        var distFromLastStop = 0
+                                        if (parsedData.isFluctuation) {
+                                            interpolatedDistance = 0
+                                            today_odo = (x[0].lookedUpDevice.today_odo || 0)
+                                            distFromLastStop = (x[0].lookedUpDevice.distFromLastStop || 0)
+                                        }
+                                        else {
+                                            today_odo = interpolatedDistance + (x[0].lookedUpDevice.today_odo || 0)
+                                            distFromLastStop = interpolatedDistance + (x[0].lookedUpDevice.distFromLastStop || 0)
+                                        }
+                                        
+                                        var incObj = { "total_odo": interpolatedDistance };
+                                        var today_start_location = !x[0].lookedUpDevice.today_start_location ? { lat: parsedData.latDecimal, long: parsedData.longDecimal } : x[0].lookedUpDevice.today_start_location;
+                                        //increment today_running / today_stopped
+                                        if (x[0].lookedUpDevice.last_ACC == 1) {
+                                            var today_running = new Date().getTime() - new Date(x[0].insertionTime).getTime();
+                                            incObj['today_running'] = today_running;
+                                            
+                                        }
+                                        else {
+                                            var today_stopped = new Date().getTime() - new Date(x[0].insertionTime).getTime();
+                                            incObj['today_stopped'] = today_stopped;
+                                            
+                                        }
+                                        var parsedSpeed = parseInt(parsedData.speed);
+                                        if (parsedData.ignition == 1 || (typeof parsedData.ignition === 'undefined' && x[0].lookedUpDevice.last_ACC == '1')) {
+                                            if (0 <= parsedSpeed && parsedSpeed < 20) {
+                                                incObj['speedChart.0-20'] = 1
+                                            }
+                                            else if (20 <= parsedSpeed && parsedSpeed < 40) {
+                                                incObj['speedChart.20-40'] = 1
+                                            }
+                                            else if (40 <= parsedSpeed && parsedSpeed < 60) {
+                                                incObj['speedChart.40-60'] = 1
+                                            }
+                                            else if (60 <= parsedSpeed && parsedSpeed < 80) {
+                                                incObj['speedChart.60-80'] = 1
+                                            }
+                                            else if (80 <= parsedSpeed && parsedSpeed < 100) {
+                                                incObj['speedChart.80-100'] = 1
+                                            }
+                                            else if (100 <= parsedSpeed) {
+                                                incObj['speedChart.>100'] = 1
+                                            }
+                                        }
+                                        Device.update(
+                                            { "Device_ID": parsedData.imei },
+                                            {
+                                                $set: {
+                                                    "last_loc.type": "Point",
+                                                    "last_loc.coordinates": [parsedData.longDecimal, parsedData.latDecimal],
+                                                    "sec_last_location.lat": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.lat : null,
+                                                    "sec_last_location.long": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.long : null,
+                                                    "sec_last_speed": x[0].lookedUpDevice.last_speed,
+                                                    "last_location.lat": parsedData.latDecimal,
+                                                    "last_location.long": parsedData.longDecimal,
+                                                    "last_ping_on": new Date(),
+                                                    "last_device_time" : new Date(parsedData.date),
+                                                    "last_speed": parsedData.speed,
+                                                    "currentFuel": parsedData.currentFuel != null ? parsedData.currentFuel : null,
+                                                    "currentFuelVoltage": parsedData.fuelVoltage ? parsedData.fuelVoltage : null,
+                                                    "satellites": parsedData.satellites ? parsedData.satellites : null,
+                                                    "gpsTracking": parsedData['GPS positioned'] ? parsedData['GPS positioned'] : "0",
+                                                    "today_odo": today_odo,
+                                                    "heading": parsedData.heading,
+                                                    "distFromLastStop": distFromLastStop,
+                                                    "power": (parsedData.power == "1" || parsedData.power == "0") ? parsedData.power : x[0].lookedUpDevice.power,
+                                                    "ac": parsedData.ac,
+                                                    "today_start_location" : today_start_location
+                                                },
+                                                
+                                                $inc: incObj
+                                                
+                                            },
+                                            function (err, numAffected) {
+                                                if (err) {
+                                                    console.error(err);
+                                                }
+                                                if (!err) {
+                                                    
+                                                    Device.find({ "Device_ID": parsedData.imei }).populate('user').exec(function (err, devices) {
+                                                        if (err) {
+                                                            console.error(err);
+                                                            
+                                                        }
+                                                        else {
+                                                            if (devices[0].integrationId) {
+                                                                OutgoingIntegrations.deliver(devices[0], inserted.ops[0]);
+                                                            }
+                                                            KafkaService.sendRecord({ namespace: 'gpsio', room: devices[0].Device_ID, channel: devices[0].Device_ID.toString() + 'acc', data: [devices[0].last_ACC, devices[0].Device_ID.toString(), new Date(), devices[0]] })
+                                                            //gpsio.to(devices[0].Device_ID).emit(devices[0].Device_ID.toString() + 'acc', devices[0].last_ACC, devices[0].Device_ID.toString(), new Date(), devices[0])
+                                                            
+                                                            if ((parsedData.power == "0" || parsedData.power == "1") && x[0].lookedUpDevice.power != parsedData.power) {
+                                                                
+                                                                TCPUTIL.setPowerNotif(x[0].lookedUpDevice, parsedData.power, KafkaService, devices[0].user);
+                                                            }
+                                                        }
+                                                    })
+                                                    TCPUTIL.setDeviceStatus(x[0].lookedUpDevice, null);
+                                                    if (x[0].lookedUpCurrentTrip) {
+                                                        RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $inc: { "distanceTravelled": interpolatedDistance } }).exec();
+                                                    }
+                                                }
+                                                
+                                            });
+                                            
+                                        }
+                                        else {
+                                            var status = 'OUT OF REACH';
+                                            if (parsedData.ignition != null) {
+                                                if(parsedData.ignition == 1){
+                                                    if (parsedData.speed > 1) {
+                                                        status = 'RUNNING'
+                                                    } else {
+                                                        status = 'IDLING'
+                                                    }
+                                                }
+                                                if (parsedData.ignition == 0) {
+                                                    status = 'STOPPED'
+                                                }
+                                            }
+                                            else{
+                                                status = 'STOPPED'
+                                            }
+                                            Device.update(
+                                                { "Device_ID": parsedData.imei },
+                                                {
+                                                    $set: {
+                                                        "last_loc.type": "Point",
+                                                        "last_loc.coordinates": [parsedData.longDecimal, parsedData.latDecimal],
+                                                        //"sec_last_location.lat": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.lat : null,
+                                                        //"sec_last_location.long": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.long : null,
+                                                        //"sec_last_speed": x[0].lookedUpDevice.last_speed,
+                                                        "last_location.lat": parsedData.latDecimal,
+                                                        "last_location.long": parsedData.longDecimal,
+                                                        "last_ping_on": new Date(),
+                                                        "last_device_time" : new Date(parsedData.date),
+                                                        "last_speed": parsedData.speed,
+                                                        "status": status,
+                                                        "status_updated_at" : new Date(),
+                                                        //"currentFuel": parsedData.currentFuel != null ? parsedData.currentFuel : null,
+                                                        //"currentFuelVoltage": parsedData.fuelVoltage ? parsedData.fuelVoltage : null,
+                                                        "satellites": parsedData.satellites ? parsedData.satellites : null,
+                                                        "gpsTracking": parsedData['GPS positioned'] ? parsedData['GPS positioned'] : "0",
+                                                        //"today_odo": today_odo,
+                                                        "heading": parsedData.heading,
+                                                        //"distFromLastStop": distFromLastStop,
+                                                        "power": parsedData.power,
+                                                        "ac": parsedData.ac
+                                                    }
+                                                    
+                                                }
+                                            ).exec();
+                                        }
+                                        
+                                    }
+                                })
+                            });
+                        }
+                        else {
+                            if ((parsedData.latDecimal == 0 || parsedData.longDecimal == 0) && x[0]) {
+                                TCPUTIL.setDeviceStatus(x[0].lookedUpDevice, 'nofix');
+                                Device.update(
+                                    { "Device_ID": parsedData.imei },
+                                    {
+                                        $set: {
+                                            "last_loc.type": "Point",
+                                            "last_loc.coordinates": [0, 0],
+                                            "sec_last_location.lat": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.lat : null,
+                                            "sec_last_location.long": x[0].lookedUpDevice.last_location ? x[0].lookedUpDevice.last_location.long : null,
+                                            "sec_last_speed": x[0].lookedUpDevice.last_speed,
+                                            "last_location.lat": 0,
+                                            "last_location.long": 0,
+                                            "last_ping_on": new Date(),
+                                            "last_device_time" : new Date(parsedData.date),
+                                            "last_speed": parsedData.speed,
+                                            "currentFuel": parsedData.currentFuel ? parsedData.currentFuel : null,
+                                            "currentFuelVoltage": parsedData.fuelVoltage ? parsedData.fuelVoltage : null,
+                                            "satellites": parsedData.satellites ? parsedData.satellites : null,
+                                        }
+                                    }).exec();
+                                    console.log("0,0 from : " + parsedData.imei);
+                                }
+                                
+                                
+                            }
+                            
+                            //})
+                            
+                            /** SPEED LIMIT ALERTS */
+                            if (x[0] && parsedData.latDecimal != 0 && typeof parsedData.latDecimal == "number"
+                            && typeof parsedData.longDecimal == "number" && !isNaN(parseFloat(parsedData.latDecimal))
+                            && !isNaN(parseFloat(parsedData.longDecimal))) {
+                                if (parseFloat(parsedData.speed) >= x[0].lookedUpDevice.SpeedLimit && x[0].lookedUpDevice.SpeedAlert) {
+                                    
+                                    if (x[0].lookedUpDevice.overspeeding == true) {
+                                        return;
+                                    }
+                                    
+                                    TCPUTIL.sbTracking(null, x[0], 'os', parsedData.latDecimal, parsedData.longDecimal, null, null, parsedData.speed, KafkaService);
+                                    Notifs.create({
+                                        "device": x[0].lookedUpDevice.Device_ID,
+                                        "vehicle": x[0].lookedUpDevice.vehicle,
+                                        "dealer": x[0].lookedUpDevice.created_by,
+                                        "user": x[0].lookedUpUser[0]._id,
+                                        "type": "overspeed",
+                                        "priority" : 3,
+                                        "group" : x[0].lookedUpDevice.vehicleGroup,
+                                        "trip" : x[0].lookedUpDevice.currentTrip,
+                                        "overSpeed" : parseFloat(parsedData.speed),
+                                        "lat" : parsedData.latDecimal,
+                                        "long" : parsedData.longDecimal,
+                                        "vehicleName" : x[0].lookedUpDevice.Device_Name,                   
+                                        "item": { "_type": "Speed Alert", "sentence":  x[0].lookedUpDevice.Device_Name + " exceeded the speed limit of " + x[0].lookedUpDevice.SpeedLimit + ". Travelling at " + parseInt(parsedData.speed) + " kmph."}
+                                    }, function (err, result) {
+                                        if (err) {
+                                            console.error(err)
+                                        }
+                                        else {
+                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { overspeeding: true }, $inc: {today_overspeeds : 1} }).exec();
+                                            pushNotifs.notify(x[0].lookedUpUser[0], result);
+                                            KafkaService.sendRecord({ namespace: 'notifIO', room: null, channel : x[0].lookedUpUser[0]._id, data : [result]})
+                                            //notifIO.emit(x[0].lookedUpUser[0]._id, result)
+                                            Utilities.setAddress(result.lat,result.long,result._id,"address","notifications");
+                                        }
+                                    })
+                                }
+                                else if (parseFloat(parsedData.speed) < x[0].lookedUpDevice.SpeedLimit) {
+                                    Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { overspeeding: false } }).exec();
+                                }
+                            }
+                            
+                            /**GEO FENCE ALERTS */
+                            if (x[0] && parsedData.latDecimal != 0 && typeof parsedData.latDecimal == "number"
+                            && typeof parsedData.longDecimal == "number" && !isNaN(parseFloat(parsedData.latDecimal))
+                            && !isNaN(parseFloat(parsedData.longDecimal))) {
+                                
+                                GeoFence.find(
+                                    {
+                                        geofence: {
+                                            $geoIntersects: {
+                                                $geometry: parsedData.geoJSON
+                                            }
+                                        },
+                                        uid: {$in : [x[0].lookedUpDevice.user, x[0].lookedUpDevice.created_by]},
+                                        status: true
+                                    }
+                                ).exec(function (err, geoWithins) {
+                                    if (err) {
+                                        console.error(err);
+                                        return;
+                                    }
+                                    if (geoWithins.length > 0) {
+                                        
+                                        
+                                        
+                                        
+                                        /**if a location is found to be inside, determine if the previous location was inside or outside  */
+                                        var geoWithin = geoWithins[0];
+                                        
+                                        //update geofence model [field : devicesWithin]
+                                        GeoFence.update(
+                                            { _id: geoWithin._id },
+                                            { $addToSet: { devicesWithin: x[0].lookedUpDevice._id } },
+                                            function (err, inserted) {
+                                                if (err) {
+                                                    console.error(err);
+                                                }
+                                            }
+                                        )
+                                        
+                                        GeoFence
+                                        .find(
+                                            {
+                                                _id: geoWithin._id,
+                                                geofence: {
+                                                    $geoIntersects: {
+                                                        $geometry: x[0].geoJSON
+                                                    }
+                                                    //uid : x[0].lookedUpDevice.user,
+                                                    //status: true
+                                                }
+                                            })
+                                            .exec(function (err, previousGeo) {
+                                                
+                                                if (err) {
+                                                    console.error(err)
+                                                    return
+                                                }
+                                                if (previousGeo.length > 0) {
+                                                    /** both ultimate and penultimate locations are inside. nothing's changed. */
+                                                }
+                                                else {
+                                                    var tripId = null;
+                                                    if (x[0].lookedUpCurrentTrip) {
+                                                        tripId = x[0].lookedUpCurrentTrip._id;
+                                                    }
+                                                    //check if this geoFence is assigned as loading site for vehicle's current trip
+                                                    if (x[0].lookedUpCurrentTrip && x[0].lookedUpCurrentTrip.startSite.toString() == geoWithin._id.toString()) {
+                                                        tripId = x[0].lookedUpCurrentTrip._id;
+                                                        //vehicle entering start site
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 2) {
+                                                            //two way trip
+                                                            if (x[0].lookedUpCurrentTrip.endSiteExitAt && x[0].lookedUpCurrentTrip.startSiteExitAt) {
+                                                                //
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNASSIGNED", currentTrip : null, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", startSiteReEnterAt: new Date(), tripPTA : null, tripETA : null } }).exec()
+                                                                TCPUTIL.sbTracking(null,x[0],'tripEnd', parsedData.latDecimal, parsedData.longDecimal,null,null,null,KafkaService)
+                                                                TCPUTIL.setTravelDelay('reverseTransitComplete', x[0].lookedUpCurrentTrip, new Date(), x[0].lookedUpDevice);
+                                                                if (x[0].lookedUpUser[0].tripGeneration == 'scheduled') {
+                                                                    // createScheduledTrip
+                                                                    /* TCPUTIL.setScheduledTrip(x[0].lookedUpDevice); */
+                                                                }
+                                                                else if (x[0].lookedUpUser[0].tripGeneration == 'auto') {
+                                                                    //change the vehicle's group to geo fence group if it is not the same
+                                                                    
+                                                                    //cancel current trip and create a new trip with the information available
+                                                                    var d = new Date();
+                                                                    var newId = mongoose.Types.ObjectId();
+                                                                    tripId = newId;
+                                                                    var newRouteMap = {
+                                                                        "_id" : newId,
+                                                                        "device" : x[0].lookedUpDevice._id,
+                                                                        "user" : x[0].lookedUpUser[0]._id,
+                                                                        "device_name": x[0].lookedUpDevice.Device_Name,
+                                                                        "group" : x[0].lookedUpDevice.vehicleGroup,
+                                                                        "driver" : x[0].lookedUpCurrentTrip ? x[0].lookedUpCurrentTrip.driver : null,
+                                                                        "startSite" : geoWithin._id,
+                                                                        "createdOn": d,
+                                                                        "startSiteEnterAt" : d,
+                                                                        "status" : "LOADING",
+                                                                        "poi" : [],
+                                                                        "tripType" : 2,
+                                                                        "radius" : 500,
+                                                                        "generated" : "auto"
+                                                                    }
+                                                                    RouteMap.create(newRouteMap, function (err, newTrip) {
+                                                                        if (err) {
+                                                                            console.error(err);
+                                                                            return;
+                                                                        }
+                                                                        else {
+                                                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING", vehicleGroup: geoWithin.vehicleGroup, currentTrip: newTrip._id, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec();
+                                                                            if (x[0].lookedUpCurrentTrip) {
+                                                                                //RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", startSiteReEnterAt: new Date(), tripPTA : null, tripETA : null } }).exec()
+                                                                                //TCPUTIL.sbTracking(null,x[0],'tripEnd', parsedData.latDecimal, parsedData.longDecimal,null,null,null,sbNotifIO)
+                                                                            }
+                                                                            Groups.update({ _id: geoWithin.vehicleGroup }, { $addToSet: { devices: x[0].lookedUpDevice._id } }).exec()
+                                                                            Groups.update({ _id: x[0].lookedUpDevice.vehicleGroup }, { $pull: { devices: x[0].lookedUpDevice._id } }).exec();
+                                                                        }
+                                                                    })
+                                                                }
+                                                                
+                                                                
+                                                            }
+                                                            else {
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING" } }).exec()
+                                                                RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "LOADING", startSiteEnterAt : new Date()}}).exec()
+                                                            }
+                                                        }
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 1) {
+                                                            //one way trip; set status to LOADING
+                                                            if (!x[0].lookedUpCurrentTrip.startSiteEnterAt){
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING" } }).exec()
+                                                                RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "LOADING", startSiteEnterAt : new Date()}}).exec()    
+                                                            }
+                                                            else if (geoWithin.type == 'Loading' && x[0].lookedUpUser[0].tripGeneration == 'auto') {
+                                                                //change the vehicle's group to geo fence group if it is not the same
+                                                                
+                                                                //cancel current trip and create a new trip with the information available
+                                                                var d = new Date();
+                                                                var newId = mongoose.Types.ObjectId();
+                                                                tripId = newId;
+                                                                var newRouteMap = {
+                                                                    "_id" : newId,
+                                                                    "device" : x[0].lookedUpDevice._id,
+                                                                    "user" : x[0].lookedUpUser[0]._id,
+                                                                    "device_name" : x[0].lookedUpDevice.Device_Name,
+                                                                    "driver" : x[0].lookedUpCurrentTrip ? x[0].lookedUpCurrentTrip.driver : null,
+                                                                    "startSite": geoWithin._id,
+                                                                    "group" : x[0].lookedUpDevice.vehicleGroup,
+                                                                    "createdOn": d,
+                                                                    "startSiteEnterAt" : d,
+                                                                    "status" : "LOADING",
+                                                                    "poi" : [],
+                                                                    "tripType" : 2,
+                                                                    "radius" : 500,
+                                                                    "generated" : "auto"
+                                                                }
+                                                                RouteMap.create(newRouteMap, function (err, newTrip) {
+                                                                    if (err) {
+                                                                        console.error(err);
+                                                                        return;
+                                                                    }
+                                                                    else {
+                                                                        Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING", vehicleGroup: geoWithin.vehicleGroup, currentTrip: newTrip._id, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec();
+                                                                        if (x[0].lookedUpCurrentTrip) {
+                                                                            RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", cancelledAt: new Date(), tripPTA: null, tripETA: null }, $push: { deviations: {"type": "newLoading","time" : new Date()}} }).exec()
+                                                                        }
+                                                                        Groups.update({ _id: geoWithin.vehicleGroup }, { $addToSet: { devices: x[0].lookedUpDevice._id } }).exec()
+                                                                        Groups.update({ _id: x[0].lookedUpDevice.vehicleGroup }, { $pull: { devices: x[0].lookedUpDevice._id } }).exec();
+                                                                    }
+                                                                })
+                                                            }
+                                                            
+                                                        }
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 0 && !x[0].lookedUpCurrentTrip.startSiteEnterAt) {
+                                                            //round trip; set status to LOADING
+                                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING" } }).exec()
+                                                            RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "LOADING", startSiteEnterAt : new Date()}}).exec()
+                                                        }
+                                                    }
+                                                    else if (geoWithin.type == 'Loading' && x[0].lookedUpUser[0].tripGeneration == 'auto') {
+                                                        //change the vehicle's group to geo fence group if it is not the same
+                                                        
+                                                        //cancel current trip and create a new trip with the information available
+                                                        var d = new Date();
+                                                        var newId = mongoose.Types.ObjectId();
+                                                        tripId = newId;
+                                                        var newRouteMap = {
+                                                            "_id" : newId,
+                                                            "device" : x[0].lookedUpDevice._id,
+                                                            "user" : x[0].lookedUpUser[0]._id,
+                                                            "device_name" : x[0].lookedUpDevice.Device_Name,
+                                                            "driver" : x[0].lookedUpCurrentTrip ? x[0].lookedUpCurrentTrip.driver : null,
+                                                            "startSite": geoWithin._id,
+                                                            "group" : x[0].lookedUpDevice.vehicleGroup,
+                                                            "createdOn": d,
+                                                            "startSiteEnterAt" : d,
+                                                            "status" : "LOADING",
+                                                            "poi" : [],
+                                                            "tripType" : 2,
+                                                            "radius" : 500,
+                                                            "generated" : "auto"
+                                                        }
+                                                        RouteMap.create(newRouteMap, function (err, newTrip) {
+                                                            if (err) {
+                                                                console.error(err);
+                                                                return;
+                                                            }
+                                                            else {
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "LOADING", vehicleGroup: geoWithin.vehicleGroup, currentTrip: newTrip._id, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec();
+                                                                if (x[0].lookedUpCurrentTrip) {
+                                                                    RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", cancelledAt: new Date(), tripPTA : null, tripETA : null }, $push: { deviations: {"type": "newLoading","time" : new Date()}} }).exec()
+                                                                }
+                                                                Groups.update({ _id: geoWithin.vehicleGroup }, { $addToSet: { devices: x[0].lookedUpDevice._id } }).exec()
+                                                                Groups.update({ _id: x[0].lookedUpDevice.vehicleGroup }, { $pull: { devices: x[0].lookedUpDevice._id } }).exec();
+                                                            }
+                                                        })
+                                                    }
+                                                    //check if this geoFence is assigned as unloading site for vehicle's current trip
+                                                    if (x[0].lookedUpCurrentTrip && x[0].lookedUpCurrentTrip.endSite && x[0].lookedUpCurrentTrip.endSite.toString() == geoWithin._id.toString()) {
+                                                        tripId = x[0].lookedUpCurrentTrip._id;
+                                                        //vehicle entering end site
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 2) {
+                                                            //two way trip
+                                                            if (!x[0].lookedUpCurrentTrip.endSiteEnterAt) {
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNLOADING", tripPTA : null, tripETA : null } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "UNLOADING", endSiteEnterAt: new Date(), tripPTA: null, tripETA: null } }).exec()
+                                                                TCPUTIL.setTravelDelay('transitComplete', x[0].lookedUpCurrentTrip, new Date(), x[0].lookedUpDevice);
+                                                            }
+                                                        }
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 1) {
+                                                            //one way trip; set status to LOADING
+                                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNLOADING", tripPTA : null, tripETA : null } }).exec()
+                                                            RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "UNLOADING", endSiteEnterAt : new Date(), tripPTA : null, tripETA : null}}).exec()
+                                                            TCPUTIL.setTravelDelay('transitComplete', x[0].lookedUpCurrentTrip, new Date(), x[0].lookedUpDevice);
+                                                        }
+                                                        if (x[0].lookedUpCurrentTrip.tripType == 0 && x[0].lookedUpCurrentTrip.startSiteExitAt) {
+                                                            //one way trip; set status to COMPLETED
+                                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNASSIGNED", currentTrip : null, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec()
+                                                            RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", endSiteEnterAt: new Date(), tripPTA : null, tripETA : null } }).exec()
+                                                            TCPUTIL.sbTracking(null,x[0],'tripEnd', parsedData.latDecimal, parsedData.longDecimal,null,null,null,KafkaService)
+                                                            
+                                                            if (x[0].lookedUpUser[0].tripGeneration == 'scheduled') {
+                                                                // createScheduledTrip
+                                                                /* TCPUTIL.setScheduledTrip(x[0].lookedUpDevice); */
+                                                            }
+                                                        }
+                                                    }
+                                                    else if (x[0].lookedUpCurrentTrip && geoWithin.type == 'Unloading') {
+                                                        if (geoWithin.vehicleGroup.toString() == x[0].lookedUpDevice.vehicleGroup.toString()) {
+                                                            tripId = x[0].lookedUpCurrentTrip._id;
+                                                            Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNLOADING", tripPTA : null, tripETA : null } }).exec()
+                                                            RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "UNLOADING", endSite: geoWithin._id, endSiteEnterAt : new Date(), tripPTA : null, tripETA : null}}).exec()
+                                                            TCPUTIL.setTravelDelay('transitComplete', x[0].lookedUpCurrentTrip, new Date(), x[0].lookedUpDevice);
+                                                        }
+                                                    }
+                                                    
+                                                    /**socket emit event for this 'imei' ENTERING geoFence 'geoWithin.name' */
+                                                    if (geoWithin.entering == true) {
+                                                        Notifs.create({
+                                                            "device": x[0].lookedUpDevice.Device_ID,
+                                                            "dealer": x[0].lookedUpDevice.created_by,
+                                                            "vehicle" : x[0].lookedUpDevice.vehicle,
+                                                            "user": x[0].lookedUpUser[0]._id,
+                                                            "type": "Geo-Fence",
+                                                            "org":x[0].lookedUpDevice.org,
+                                                            "priority" : 1,
+                                                            "group" : x[0].lookedUpDevice.vehicleGroup,
+                                                            "direction": "In",
+                                                            "trip" : tripId,
+                                                            "geoid" : geoWithin._id,
+                                                            "lat" : parsedData.latDecimal,
+                                                            "long" : parsedData.longDecimal,
+                                                            "vehicleName" : x[0].lookedUpDevice.Device_Name,
+                                                            "item": { "_type": "Geo-Fence Alert", "sentence":  x[0].lookedUpDevice.Device_Name + " entered " + geoWithin.geoname }
+                                                        }, function (err, result) {
+                                                            if (err) {
+                                                                console.error(err)
+                                                            }
+                                                            else {
+                                                                GeofenceReports.create({
+                                                                    vehicle: x[0].lookedUpDevice.vehicle,
+                                                                    device: x[0].lookedUpDevice._id,
+                                                                    geofence: geoWithin._id,
+                                                                    group : x[0].lookedUpDevice.vehicleGroup,
+                                                                    org:x[0].lookedUpDevice.org,
+                                                                    user: x[0].lookedUpUser[0]._id,
+                                                                    arrivalTime: new Date()
+                                                                }, function (err, report) {
+                                                                    if (err) {
+                                                                        console.error(err);
+                                                                        return;
+                                                                    }
+                                                                    //Utilities.setAddress(report.lat, report.long,report._id, "address", "geofenceReports")
+                                                                })
+                                                                pushNotifs.notify(x[0].lookedUpUser[0], result);
+                                                                KafkaService.sendRecord({ namespace: 'notifIO', room: null, channel: x[0].lookedUpUser[0]._id, data: [result] });
+                                                                //notifIO.emit(x[0].lookedUpUser[0]._id, result)
+                                                                Utilities.setAddress(result.lat,result.long,result._id,"address","notifications");
+                                                            }
+                                                        })
+                                                    }
+                                                }
+                                            })
+                                            
+                                        }
+                                        
+                                        else {
+                                            /**if a location is not found inside any geoFence, determine if the previous location was inside or outside ANY of the geoFences for that device */
+                                            
+                                            
+                                            //update geofence model [field : devicesWithin]
+                                            GeoFence.update(
+                                                {},
+                                                { $pull: { devicesWithin: x[0].lookedUpDevice._id } },
+                                                {multi : true},
+                                                function (err, inserted) {
+                                                    if(err){
+                                                        console.error(err);
+                                                    }
+                                                }
+                                            )
+                                            
+                                            GeoFence
+                                            .find(
+                                                {
+                                                    geofence: {
+                                                        $geoIntersects: {
+                                                            $geometry: x[0].geoJSON
+                                                        }
+                                                    },
+                                                    uid: {$in : [x[0].lookedUpDevice.user, x[0].lookedUpDevice.created_by]},
+                                                    status: true
+                                                })
+                                                .populate('vehicleGroup')
+                                                .exec(function (err, previousGeos) {
+                                                    if (err) {
+                                                        console.error(err)
+                                                        return
+                                                    }
+                                                    if (previousGeos.length > 0) {
+                                                        
+                                                        var tripId = null;
+                                                        if (x[0].lookedUpCurrentTrip) {
+                                                            tripId = x[0].lookedUpCurrentTrip._id;
+                                                        }
+                                                        //check if this geoFence is assigned as loading site for vehicle's current trip
+                                                        if (x[0].lookedUpCurrentTrip && x[0].lookedUpCurrentTrip.startSite.toString() == previousGeos[0]._id.toString()) {
+                                                            var now = new Date();
+                                                            
+                                                            //vehicle exiting start site
+                                                            if (x[0].lookedUpCurrentTrip.tripType == 2) {
+                                                                //two way trip
+                                                                
+                                                                
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "TRANSIT", loadingDeparture : now } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "TRANSIT", startSiteExitAt: now } }).exec()
+                                                                TCPUTIL.sbTracking(null, x[0], 'tripStart', parsedData.latDecimal, parsedData.longDecimal, null, null, null, KafkaService);
+                                                            }
+                                                            if (x[0].lookedUpCurrentTrip.tripType == 1) {
+                                                                //one way trip; set status to LOADING
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "TRANSIT", loadingDeparture : now } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "TRANSIT", startSiteExitAt: now } }).exec()
+                                                                TCPUTIL.sbTracking(null, x[0], 'tripStart', parsedData.latDecimal, parsedData.longDecimal, null, null, null, KafkaService);
+                                                            }
+                                                            if (x[0].lookedUpCurrentTrip.tripType == 0) {
+                                                                //round trip; set status to Transit
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "TRANSIT", loadingDeparture : now } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "TRANSIT", startSiteExitAt: now } }).exec()
+                                                                TCPUTIL.sbTracking(null, x[0], 'tripStart', parsedData.latDecimal, parsedData.longDecimal, null, null, null, KafkaService);
+                                                            }
+                                                            if (x[0].lookedUpCurrentTrip.startSiteEnterAt) {
+                                                                TCPUTIL.setTimeAtSite(x[0].lookedUpCurrentTrip.startSiteEnterAt, now , x[0].lookedUpCurrentTrip._id, 'Loading');
+                                                            }
+                                                        }
+                                                        //check if this geoFence is assigned as unloading site for vehicle's current trip
+                                                        if (x[0].lookedUpCurrentTrip && x[0].lookedUpCurrentTrip.endSite && x[0].lookedUpCurrentTrip.endSite.toString() == previousGeos[0]._id.toString()) {
+                                                            var now = new Date();
+                                                            
+                                                            //vehicle exiting end site
+                                                            if (x[0].lookedUpCurrentTrip.tripType == 2) {
+                                                                //two way trip
+                                                                if (!x[0].lookedUpCurrentTrip.endSiteExitAt) {
+                                                                    Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "TRANSIT-Return", unloadingDeparture : now } }).exec()
+                                                                    RouteMap.update({_id : x[0].lookedUpCurrentTrip._id}, {$set : {status : "TRANSIT-Return", lastPOIIndex : null, endSiteExitAt : now}}).exec()
+                                                                }
+                                                            }
+                                                            if (x[0].lookedUpCurrentTrip.tripType == 1 && x[0].lookedUpCurrentTrip.status != "COMPLETED") {
+                                                                //one way trip; set status to LOADING
+                                                                Device.update({ _id: x[0].lookedUpDevice._id }, { $set: { currentTripStatus: "UNASSIGNED", currentTrip : null, tripPTA : null, tripETA : null, loadingDeparture : null, unloadingDeparture : null } }).exec()
+                                                                RouteMap.update({ _id: x[0].lookedUpCurrentTrip._id }, { $set: { status: "COMPLETED", endSiteExitAt: now, tripPTA : null, tripETA : null } }).exec()
+                                                                TCPUTIL.sbTracking(null, x[0], 'tripEnd', parsedData.latDecimal, parsedData.longDecimal, null, null, null, KafkaService);
+                                                                
+                                                                if (x[0].lookedUpUser[0].tripGeneration == 'scheduled') {
+                                                                    // createScheduledTrip
+                                                                    /* TCPUTIL.setScheduledTrip(x[0].lookedUpDevice); */
+                                                                }
+                                                            }
+                                                            
+                                                            if (x[0].lookedUpCurrentTrip.endSiteEnterAt) {
+                                                                TCPUTIL.setTimeAtSite(x[0].lookedUpCurrentTrip.endSiteEnterAt, now, x[0].lookedUpCurrentTrip._id, 'Unloading');
+                                                            }
+                                                        }
+                                                        
+                                                        
+                                                        /** socket emit event for this 'imei' EXITING all geoFences  'previousGeos[i].name'. */
+                                                        
+                                                        
+                                                        for (var i = 0; i < 1; i++) {
+                                                            
+                                                            if (previousGeos[i].exiting == true) {
+                                                                var prevGeo = previousGeos[0];
+                                                                Notifs.create({
+                                                                    "device": x[0].lookedUpDevice.Device_ID,
+                                                                    "vehicle": x[0].lookedUpDevice.vehicle,
+                                                                    "dealer": x[0].lookedUpDevice.created_by,
+                                                                    "user": x[0].lookedUpUser[0]._id,
+                                                                    "group" : x[0].lookedUpDevice.vehicleGroup,
+                                                                    "type": "Geo-Fence",
+                                                                    "priority" : 1,
+                                                                    "direction": "Out",
+                                                                    "trip" : tripId,
+                                                                    "geoid" : previousGeos[0]._id,
+                                                                    "lat" : parsedData.latDecimal,
+                                                                    "long" : parsedData.longDecimal,
+                                                                    "vehicleName" : x[0].lookedUpDevice.Device_Name,
+                                                                    "item": { "_type": "Geo-Fence Alert", "sentence":  x[0].lookedUpDevice.Device_Name + " exited " + previousGeos[0].geoname }
+                                                                }, function (err, result) {
+                                                                    if (err) {
+                                                                        console.error(err)
+                                                                    }
+                                                                    else {
+                                                                        GeofenceReports.findOneAndUpdate(
+                                                                            {
+                                                                                device: x[0].lookedUpDevice._id,
+                                                                                geofence: previousGeos[0]._id,
+                                                                                departureTime: { $exists: false },
+                                                                                vehicle: x[0].lookedUpDevice.vehicle,
+                                                                                user : x[0].lookedUpUser[0]._id
+                                                                            },
+                                                                            {
+                                                                                $set:
+                                                                                { group : x[0].lookedUpDevice.vehicleGroup, departureTime: new Date(), vehicle: x[0].lookedUpDevice.vehicle, device: x[0].lookedUpDevice._id, geofence: previousGeos[0]._id, user : x[0].lookedUpUser[0]._id }
+                                                                            },
+                                                                            {
+                                                                                sort: { "_id": -1 }, new: true, upsert: true
+                                                                            },
+                                                                            function (err, latest) {
+                                                                                if (err) {
+                                                                                    console.error(err);
+                                                                                    return;
+                                                                                }
+                                                                            })
+                                                                            pushNotifs.notify(x[0].lookedUpUser[0], result);
+                                                                            KafkaService.sendRecord({namespace : 'notifIO', room : null, channel : x[0].lookedUpUser[0]._id, data : [result]})
+                                                                            //notifIO.emit(x[0].lookedUpUser[0]._id, result)
+                                                                            Utilities.setAddress(result.lat, result.long, result._id, "address", "notifications");
+                                                                            if (prevGeo.vehicleGroup) {
+                                                                                var emails = prevGeo.vehicleGroup.contact_email;
+                                                                                if (emails.length < 1) {
+                                                                                    return;
+                                                                                }
+                                                                                Notifs.findOne({
+                                                                                    "device": x[0].lookedUpDevice.Device_ID,
+                                                                                    "type": "Geo-Fence",
+                                                                                    "direction": "In",
+                                                                                    "timestamp": { $lt: result.timestamp },
+                                                                                    "geoid" : prevGeo._id
+                                                                                }, {}, { sort: { 'timestamp' : -1 } }, function (err, lastInNotif) {
+                                                                                    if (err) {
+                                                                                        console.error(err);
+                                                                                        return;
+                                                                                    }
+                                                                                    if (lastInNotif) {
+                                                                                        
+                                                                                        if (!x[0].lookedUpUser[0]) {
+                                                                                            return;
+                                                                                        }
+                                                                                        var mailOptions = {
+                                                                                            from:  Utilities.getConfig().mailUser, // sender address
+                                                                                            to: emails, // list of receivers
+                                                                                            //cc: emails.length > 1 ? emails.shift() : null,
+                                                                                            subject: Utilities.getConfig().orgName+"- GeoFence Activity", // Subject line moment(m.report_lastdate.overspeed).tz(m.timezone).format("YYYY-MM-DDTHH:mm");
+                                                                                            html:'<table style="width:100%;border: 1px solid black;border-collapse: collapse;">    <tr style="background-color: green;">        <th style="border: 1px solid black;border-collapse: collapse;">            <strong style="color:white">Geo-Fence</strong>        </th>        <th style="border: 1px solid black;border-collapse: collapse;">            <strong style="color:white">Vehicle</strong>        </th>        <th style="border: 1px solid black;border-collapse: collapse;">            <strong style="color:white">In Time</strong>        </th>        <th style="border: 1px solid black;border-collapse: collapse;">            <strong style="color:white">Out Time</strong>        </th>    </tr>    <tr>        <td style="border: 1px solid black;border-collapse: collapse;">'+prevGeo.geoname+'</td>        <td style="border: 1px solid black;border-collapse: collapse;">'+x[0].lookedUpDevice.Device_Name+'</td>        <td style="border: 1px solid black;border-collapse: collapse;">'+moment(lastInNotif.timestamp).tz(x[0].lookedUpUser[0].timezone).format("YYYY-MM-DD HH:mm")+'</td>        <td style="border: 1px solid black;border-collapse: collapse;">'+moment(result.timestamp).tz(x[0].lookedUpUser[0].timezone).format("YYYY-MM-DD HH:mm")+'</td>    </tr></table><footer>    <p style="color:brown">Thanks & Regards,</p>    <strong><a href="www.oneqlik.in"><font color="#325B2C" face="verdana">'+Utilities.getConfig().orgName+'</font></a></strong></footer>'
+                                                                                        }
+                                                                                        if(emails.length > 0){
+                                                                                            Mailer.sendMail(mailOptions);
+                                                                                        }
+                                                                                    }
+                                                                                })
+                                                                            }
+                                                                        }
+                                                                    })
+                                                                    
+                                                                    
+                                                                    
+                                                                }
+                                                            }
+                                                        }
+                                                        else {
+                                                            /**both ultimate and penultimate locations are inside. nothing's changed. */
+                                                        }
+                                                    })
+                                                    
+                                                }
+                                            })
+                                        }
+                                    }
+                                }
+                                
+                            });
+                            
+                            
+                            
+                        }
+                        
+                        
+                    } catch (error) {
+                        console.error(error);
+                    }
+                }
\ No newline at end of file
diff --git a/dms.js b/dms.js
new file mode 100644
index 0000000..ee53898
--- /dev/null
+++ b/dms.js
@@ -0,0 +1,225 @@
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+/* Geodesy representation conversion functions                        (c) Chris Veness 2002-2017  */
+/*                                                                                   MIT Licence  */
+/* www.movable-type.co.uk/scripts/latlong.html                                                    */
+/* www.movable-type.co.uk/scripts/geodesy/docs/module-dms.html                                    */
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+
+'use strict';
+/* eslint no-irregular-whitespace: [2, { skipComments: true }] */
+
+
+/**
+ * Latitude/longitude points may be represented as decimal degrees, or subdivided into sexagesimal
+ * minutes and seconds.
+ *
+ * @module dms
+ */
+
+
+/**
+ * Functions for parsing and representing degrees / minutes / seconds.
+ * @class Dms
+ */
+var Dms = {};
+
+// note Unicode Degree = U+00B0. Prime = U+2032, Double prime = U+2033
+
+
+/**
+ * Parses string representing degrees/minutes/seconds into numeric degrees.
+ *
+ * This is very flexible on formats, allowing signed decimal degrees, or deg-min-sec optionally
+ * suffixed by compass direction (NSEW). A variety of separators are accepted (eg 3° 37′ 09″W).
+ * Seconds and minutes may be omitted.
+ *
+ * @param   {string|number} dmsStr - Degrees or deg/min/sec in variety of formats.
+ * @returns {number} Degrees as decimal number.
+ *
+ * @example
+ *     var lat = Dms.parseDMS('51° 28′ 40.12″ N');
+ *     var lon = Dms.parseDMS('000° 00′ 05.31″ W');
+ *     var p1 = new LatLon(lat, lon); // 51.4778°N, 000.0015°W
+ */
+Dms.parseDMS = function(dmsStr) {
+    // check for signed decimal degrees without NSEW, if so return it directly
+    if (typeof dmsStr == 'number' && isFinite(dmsStr)) return Number(dmsStr);
+
+    // strip off any sign or compass dir'n & split out separate d/m/s
+    var dms = String(dmsStr).trim().replace(/^-/, '').replace(/[NSEW]$/i, '').split(/[^0-9.,]+/);
+    if (dms[dms.length-1]=='') dms.splice(dms.length-1);  // from trailing symbol
+
+    if (dms == '') return NaN;
+
+    // and convert to decimal degrees...
+    var deg;
+    switch (dms.length) {
+        case 3:  // interpret 3-part result as d/m/s
+            deg = dms[0]/1 + dms[1]/60 + dms[2]/3600;
+            break;
+        case 2:  // interpret 2-part result as d/m
+            deg = dms[0]/1 + dms[1]/60;
+            break;
+        case 1:  // just d (possibly decimal) or non-separated dddmmss
+            deg = dms[0];
+            // check for fixed-width unseparated format eg 0033709W
+            //if (/[NS]/i.test(dmsStr)) deg = '0' + deg;  // - normalise N/S to 3-digit degrees
+            //if (/[0-9]{7}/.test(deg)) deg = deg.slice(0,3)/1 + deg.slice(3,5)/60 + deg.slice(5)/3600;
+            break;
+        default:
+            return NaN;
+    }
+    if (/^-|[WS]$/i.test(dmsStr.trim())) deg = -deg; // take '-', west and south as -ve
+
+    return Number(deg);
+};
+
+
+/**
+ * Separator character to be used to separate degrees, minutes, seconds, and cardinal directions.
+ *
+ * Set to '\u202f' (narrow no-break space) for improved formatting.
+ *
+ * @example
+ *   var p = new LatLon(51.2, 0.33);  // 51°12′00.0″N, 000°19′48.0″E
+ *   Dms.separator = '\u202f';        // narrow no-break space
+ *   var pʹ = new LatLon(51.2, 0.33); // 51° 12′ 00.0″ N, 000° 19′ 48.0″ E
+ */
+Dms.separator = '';
+
+
+/**
+ * Converts decimal degrees to deg/min/sec format
+ *  - degree, prime, double-prime symbols are added, but sign is discarded, though no compass
+ *    direction is added.
+ *
+ * @private
+ * @param   {number} deg - Degrees to be formatted as specified.
+ * @param   {string} [format=dms] - Return value as 'd', 'dm', 'dms' for deg, deg+min, deg+min+sec.
+ * @param   {number} [dp=0|2|4] - Number of decimal places to use – default 0 for dms, 2 for dm, 4 for d.
+ * @returns {string} Degrees formatted as deg/min/secs according to specified format.
+ */
+Dms.toDMS = function(deg, format, dp) {
+    if (isNaN(deg)) return null;  // give up here if we can't make a number from deg
+
+    // default values
+    if (format === undefined) format = 'dms';
+    if (dp === undefined) {
+        switch (format) {
+            case 'd':    case 'deg':         dp = 4; break;
+            case 'dm':   case 'deg+min':     dp = 2; break;
+            case 'dms':  case 'deg+min+sec': dp = 0; break;
+            default:    format = 'dms'; dp = 0;  // be forgiving on invalid format
+        }
+    }
+
+    deg = Math.abs(deg);  // (unsigned result ready for appending compass dir'n)
+
+    var dms, d, m, s;
+    switch (format) {
+        default: // invalid format spec!
+        case 'd': case 'deg':
+            d = deg.toFixed(dp);                       // round/right-pad degrees
+            if (d<100) d = '0' + d;                    // left-pad with leading zeros (note may include decimals)
+            if (d<10) d = '0' + d;
+            dms = d + '°';
+            break;
+        case 'dm': case 'deg+min':
+            d = Math.floor(deg);                       // get component deg
+            m = ((deg*60) % 60).toFixed(dp);           // get component min & round/right-pad
+            if (m == 60) { m = 0; d++; }               // check for rounding up
+            d = ('000'+d).slice(-3);                   // left-pad with leading zeros
+            if (m<10) m = '0' + m;                     // left-pad with leading zeros (note may include decimals)
+            dms = d + '°'+Dms.separator + m + '′';
+            break;
+        case 'dms': case 'deg+min+sec':
+            d = Math.floor(deg);                       // get component deg
+            m = Math.floor((deg*3600)/60) % 60;        // get component min
+            s = (deg*3600 % 60).toFixed(dp);           // get component sec & round/right-pad
+            if (s == 60) { s = (0).toFixed(dp); m++; } // check for rounding up
+            if (m == 60) { m = 0; d++; }               // check for rounding up
+            d = ('000'+d).slice(-3);                   // left-pad with leading zeros
+            m = ('00'+m).slice(-2);                    // left-pad with leading zeros
+            if (s<10) s = '0' + s;                     // left-pad with leading zeros (note may include decimals)
+            dms = d + '°'+Dms.separator + m + '′'+Dms.separator + s + '″';
+            break;
+    }
+
+    return dms;
+};
+
+
+/**
+ * Converts numeric degrees to deg/min/sec latitude (2-digit degrees, suffixed with N/S).
+ *
+ * @param   {number} deg - Degrees to be formatted as specified.
+ * @param   {string} [format=dms] - Return value as 'd', 'dm', 'dms' for deg, deg+min, deg+min+sec.
+ * @param   {number} [dp=0|2|4] - Number of decimal places to use – default 0 for dms, 2 for dm, 4 for d.
+ * @returns {string} Degrees formatted as deg/min/secs according to specified format.
+ */
+Dms.toLat = function(deg, format, dp) {
+    var lat = Dms.toDMS(deg, format, dp);
+    return lat===null ? '–' : lat.slice(1)+Dms.separator + (deg<0 ? 'S' : 'N');  // knock off initial '0' for lat!
+};
+
+
+/**
+ * Convert numeric degrees to deg/min/sec longitude (3-digit degrees, suffixed with E/W)
+ *
+ * @param   {number} deg - Degrees to be formatted as specified.
+ * @param   {string} [format=dms] - Return value as 'd', 'dm', 'dms' for deg, deg+min, deg+min+sec.
+ * @param   {number} [dp=0|2|4] - Number of decimal places to use – default 0 for dms, 2 for dm, 4 for d.
+ * @returns {string} Degrees formatted as deg/min/secs according to specified format.
+ */
+Dms.toLon = function(deg, format, dp) {
+    var lon = Dms.toDMS(deg, format, dp);
+    return lon===null ? '–' : lon+Dms.separator + (deg<0 ? 'W' : 'E');
+};
+
+
+/**
+ * Converts numeric degrees to deg/min/sec as a bearing (0°..360°)
+ *
+ * @param   {number} deg - Degrees to be formatted as specified.
+ * @param   {string} [format=dms] - Return value as 'd', 'dm', 'dms' for deg, deg+min, deg+min+sec.
+ * @param   {number} [dp=0|2|4] - Number of decimal places to use – default 0 for dms, 2 for dm, 4 for d.
+ * @returns {string} Degrees formatted as deg/min/secs according to specified format.
+ */
+Dms.toBrng = function(deg, format, dp) {
+    deg = (Number(deg)+360) % 360;  // normalise -ve values to 180°..360°
+    var brng =  Dms.toDMS(deg, format, dp);
+    return brng===null ? '–' : brng.replace('360', '0');  // just in case rounding took us up to 360°!
+};
+
+
+/**
+ * Returns compass point (to given precision) for supplied bearing.
+ *
+ * @param   {number} bearing - Bearing in degrees from north.
+ * @param   {number} [precision=3] - Precision (1:cardinal / 2:intercardinal / 3:secondary-intercardinal).
+ * @returns {string} Compass point for supplied bearing.
+ *
+ * @example
+ *   var point = Dms.compassPoint(24);    // point = 'NNE'
+ *   var point = Dms.compassPoint(24, 1); // point = 'N'
+ */
+Dms.compassPoint = function(bearing, precision) {
+    if (precision === undefined) precision = 3;
+    // note precision could be extended to 4 for quarter-winds (eg NbNW), but I think they are little used
+
+    bearing = ((bearing%360)+360)%360; // normalise to range 0..360°
+
+    var cardinals = [
+        'N', 'NNE', 'NE', 'ENE',
+        'E', 'ESE', 'SE', 'SSE',
+        'S', 'SSW', 'SW', 'WSW',
+        'W', 'WNW', 'NW', 'NNW' ];
+    var n = 4 * Math.pow(2, precision-1); // no of compass points at req’d precision (1=>4, 2=>8, 3=>16)
+    var cardinal = cardinals[Math.round(bearing*n/360)%n * 16/n];
+
+    return cardinal;
+};
+
+
+/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
+if (typeof module != 'undefined' && module.exports) module.exports = Dms; // ≡ export default Dms
\ No newline at end of file
diff --git a/gpsFunctions.js b/gpsFunctions.js
new file mode 100644
index 0000000..52a4866
--- /dev/null
+++ b/gpsFunctions.js
@@ -0,0 +1,127 @@
+
+/*****************************************
+ FUNCTIONS
+ ******************************************/
+exports.rad = function (x) {
+  return x * Math.PI / 180;
+};
+
+/*
+ @param p1: {lat:X,lng:Y}
+ @param p2: {lat:X,lng:Y}
+ */
+exports.get_distance = function (p1, p2) {
+  var R = 6378137; // Earth’s mean radius in meter
+  var dLat = exports.rad(p2.lat - p1.lat);
+  var dLong = exports.rad(p2.lng - p1.lng);
+  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(exports.rad(p1.lat)) * Math.cos(exports.rad(p2.lat)) *
+    Math.sin(dLong / 2) * Math.sin(dLong / 2);
+  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  var d = R * c;
+  return d; // returns the distance in meter
+};
+
+exports.send = function (socket, msg) {
+  socket.write(msg);
+};
+
+exports.parse_data = function (data) {
+  data = data.replace(/(\r\n|\n|\r)/gm, ''); //Remove 3 type of break lines
+  var cmd_start = data.indexOf('B'); //al the incomming messages has a cmd starting with 'B'
+  if (cmd_start > 13)throw 'Device ID is longer than 12 chars!';
+  var parts = {
+    'start': data.substr(0, 1),
+    'device_id': data.substring(1, cmd_start),
+    'cmd': data.substr(cmd_start, 4),
+    'data': data.substring(cmd_start + 4, data.length - 1),
+    'finish': data.substr(data.length - 1, 1)
+  };
+  return parts;
+};
+
+exports.parse_gps_data = function (str) {
+  var data = {
+    'date': str.substr(0, 6),
+    'availability': str.substr(6, 1),
+    'latitude': gps_minute_to_decimal(parseFloat(str.substr(7, 9))),
+    'latitude_i': str.substr(16, 1),
+    'longitude': gps_minute_to_decimal(parseFloat(str.substr(17, 9))),
+    'longitude_i': str.substr(27, 1),
+    'speed': str.substr(28, 5),
+    'time': str.substr(33, 6),
+    'orientation': str.substr(39, 6),
+    'io_state': str.substr(45, 8),
+    'mile_post': str.substr(53, 1),
+    'mile_data': parseInt(str.substr(54, 8), 16)
+  };
+  return data;
+};
+
+exports.send_to = function (socket, cmd, data) {
+  if (typeof(socket.device_id) == 'undefined')throw 'The socket is not paired with a device_id yet';
+  var str = gps_format.start;
+  str += socket.device_id + gps_format.separator + cmd;
+  if (typeof(data) != 'undefined') str += gps_format.separator + data;
+  str += gps_format.end;
+  send(socket, str);
+  //Example: (<DEVICE_ID>|<CMD>|<DATA>) - separator: | ,start: (, end: )
+};
+
+exports.minute_to_decimal = function (pos, pos_i) {
+  if (typeof(pos_i) === 'undefined') pos_i = 'N';
+  var dg = parseInt(pos / 100);
+  var minutes = pos - (dg * 100);
+  var res = (minutes / 60) + dg;
+  return (pos_i.toUpperCase() === 'S' || pos_i.toUpperCase() === 'W') ? res * -1 : res;
+};
+
+// Send a message to all clients
+exports.broadcast = function (message, sender) {
+  clients.forEach(function (client) {
+    if (client === sender) return;
+    client.write(message);
+  });
+  process.stdout.write(message + '\n');
+};
+
+exports.data_to_hex_array = function (data) {
+  var arr = [];
+  for (var i = 0; i < data.length; i++)arr.push(data[i].toString(16));
+  return arr;
+};
+
+/* RETRUN AN INTEGER FROM A HEX CHAR OR integer */
+exports.hex_to_int = function (hex_char) {
+  return parseInt(hex_char, 16);
+};
+
+exports.sum_hex_array = function (hex_array) {
+  var sum = 0;
+  for (var i in hex_array)sum += exports.hex_to_int(hex_array[i]);
+  return sum;
+};
+
+exports.hex_array_to_hex_str = function (hex_array) {
+  var str = '';
+  for (var i in hex_array) {
+    var char;
+    if (typeof(hex_array[i]) === 'number') char = hex_array[i].toString(16);
+    else char = hex_array[i].toString();
+    str += exports.str_pad(char, 2, '0');
+  }
+  return str;
+};
+
+exports.str_pad = function (input, length, string) {
+  string = string || '0';
+  input = input + '';
+  return input.length >= length ? input : new Array(length - input.length + 1).join(string) + input;
+};
+
+exports.crc_itu_get_verification = function (hex_data) {
+  var crc16 = require('crc-itu').crc16;
+  if (typeof(hex_data) === 'String') str = hex_data;
+  else str = exports.hex_array_to_hex_str(hex_data);
+  return crc16(str, 'hex');
+};
\ No newline at end of file
diff --git a/kafka-consumer.js b/kafka-consumer.js
new file mode 100644
index 0000000..4fd3af7
--- /dev/null
+++ b/kafka-consumer.js
@@ -0,0 +1,98 @@
+module.exports = function(socketNamespaces) {
+    const kafka = require("kafka-node");
+    
+    const client = new kafka.Client("localhost:2181");
+    
+    const topics = [
+        {
+            topic: "tcp.realtime"
+        }
+    ];
+    /* const options = {
+        autoCommit: true,
+        fetchMaxWaitMs: 1000,
+        fetchMaxBytes: 1024 * 1024,
+        encoding: "buffer"
+    }; */
+    
+    var options = {
+        //host: 'zookeeper:2181',  // zookeeper host omit if connecting directly to broker (see kafkaHost below)
+        kafkaHost: 'localhost:9092', // connect directly to kafka broker (instantiates a KafkaClient)
+        zk : undefined,   // put client zk settings if you need them (see Client)
+        batch: undefined, // put client batch settings if you need them (see Client)
+        ssl: false, // optional (defaults to false) or tls options hash
+        groupId: 'ws.realtime',
+        sessionTimeout: 15000,
+        // An array of partition assignment protocols ordered by preference.
+        // 'roundrobin' or 'range' string for built ins (see below to pass in custom assignment protocol)
+        protocol: ['roundrobin'],
+       
+        // Offsets to use for new groups other options could be 'earliest' or 'none' (none will emit an error if no offsets were saved)
+        // equivalent to Java client's auto.offset.reset
+        fromOffset: 'latest', // default
+        commitOffsetsOnFirstJoin: true, // on the very first time this consumer group subscribes to a topic, record the offset returned in fromOffset (latest/earliest)
+        // how to recover from OutOfRangeOffset error (where save offset is past server retention) accepts same value as fromOffset
+        outOfRangeOffset: 'latest', // default
+        migrateHLC: false,    // for details please see Migration section below
+        migrateRolling: false,
+        // Callback to allow consumers with autoCommit false a chance to commit before a rebalance finishes
+        // isAlreadyMember will be false on the first connection, and true on rebalances triggered after that
+        onRebalance: null//(isAlreadyMember, callback) => { callback(); } // or null
+      };
+
+    const consumer  = new kafka.ConsumerGroup(options, 'tcp.realtime');
+    consumer.on("message", function (message) {
+        /* Print latest offset. */
+        /* var offset = new kafka.Offset(client);
+
+        offset.fetch([{ topic: 'tcp.realtime', partition: 0, time: -1 }], function (err, data) {
+                var latestOffset = data['tcp.realtime']['0'][0];
+                console.log("Consumer current offset: " + latestOffset);
+        }); */
+        // Read string into a buffer.
+        var buf = new Buffer(message.value, "binary"); 
+        var decodedMessage = JSON.parse(buf.toString());
+        //console.log(decodedMessage);
+        
+        switch (decodedMessage.namespace) {
+            case 'gpsio':
+                if (decodedMessage.channel.endsWith('acc')) {
+                    socketNamespaces[decodedMessage.namespace]
+                        .to(decodedMessage.room)
+                        .emit(decodedMessage.channel, decodedMessage.data[0], decodedMessage.data[1], decodedMessage.data[2], decodedMessage.data[3]);
+                }
+                else {
+                    socketNamespaces[decodedMessage.namespace]
+                    .to(decodedMessage.room)
+                    .emit(decodedMessage.channel, decodedMessage.data[0], decodedMessage.data[1], decodedMessage.data[2]);
+                }
+            break;
+            
+            case 'notifIO':
+                socketNamespaces[decodedMessage.namespace]
+                    .emit(decodedMessage.channel, decodedMessage.data[0]);
+            break;
+            
+            case 'sbNotifIO':
+                socketNamespaces[decodedMessage.namespace]
+                    .emit(decodedMessage.channel, decodedMessage.data[0]);
+            break;
+            default:
+            break;
+        }
+    });
+    
+    consumer.on("error", function(err) {
+        console.log("error", err);
+    });
+    
+    consumer.on('offsetOutOfRange', function (err) {
+        console.log("offsetOutOfRange", err);
+    });
+
+    process.on("SIGINT", function() {
+        consumer.close(true, function() {
+            process.exit();
+        });
+    });
+}
\ No newline at end of file
diff --git a/kafka-producer.js b/kafka-producer.js
new file mode 100644
index 0000000..fb529ae
--- /dev/null
+++ b/kafka-producer.js
@@ -0,0 +1,68 @@
+
+const kafka = require("kafka-node");
+const uuid = require("uuid");
+ 
+const client = new kafka.Client("localhost:2181", "my-client-id", {
+    sessionTimeout: 300,
+    spinDelay: 100,
+    retries: 2
+});
+ 
+client.on('ready', function (){
+    console.log('producer client ready');
+})  
+
+client.on('error', function (err){
+    console.log('client error: ' + err);
+}) 
+const producer = new kafka.HighLevelProducer(client);
+producer.on("ready", function() {
+    
+    console.log("Kafka Producer is connected and ready.");
+    /* KafkaService.sendRecord({  namespace: 'b',  room: 'c', channel: 'c', data: 'd' }, function (err, data) {
+        console.log('incallback')
+        console.log(err, data)
+        producer.close();
+        process.exit()
+    }); */
+});
+ 
+// For this demo we just log producer errors to the console.
+producer.on("error", function(error) {
+    console.error(error);
+});
+ 
+const KafkaService = {
+    sendRecord: ({  namespace, room, channel, data }, callback = () => {}) => {
+        if (!namespace) {
+            //return callback(new Error(`A namespace must be provided.`));
+        }
+ 
+        const event = {
+            id: uuid.v4(),
+            timestamp: Date.now(),
+            namespace: namespace,
+            room: room,
+            channel: channel,
+            data: data
+        };
+ 
+        const buffer = new Buffer.from(JSON.stringify(event));
+ 
+        // Create a new payload
+        const record = [
+            {
+                topic: "tcp.realtime",
+                messages: buffer,
+                attributes: 1 /* Use GZip compression for the payload */
+            }
+        ];
+ 
+        //Send record to Kafka and log result/error
+        producer.send(record, function (err, data) {
+            //console.log(err, data);
+        });
+    }
+};
+ 
+module.exports = KafkaService;
\ No newline at end of file
diff --git a/kafka-test.js b/kafka-test.js
new file mode 100644
index 0000000..e4b3f81
--- /dev/null
+++ b/kafka-test.js
@@ -0,0 +1,11 @@
+require('./kafka-consumer');
+var kafka_producer = require('./kafka-producer');
+
+
+/* kafka_producer.sendRecord({ type: 'a', userId: 'b', sessionId: 'c', data: 'd' }, function () {
+    console.log('incallback')
+}); */
+
+
+
+
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..af139fa
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,33 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b142980
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,25394 @@
+{
+  "name": "oneqlik",
+  "version": "0.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@angular-devkit/build-optimizer": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.3.2.tgz",
+      "integrity": "sha512-U0BCZtThq5rUfY08shHXpxe8ZhSsiYB/cJjUvAWRTs/ORrs8pbngS6xwseQws8d/vHoVrtqGD9GU9h8AmFRERQ==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "source-map": "0.5.7",
+        "typescript": "2.6.2",
+        "webpack-sources": "1.4.3"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
+          "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q="
+        }
+      }
+    },
+    "@angular-devkit/core": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.3.2.tgz",
+      "integrity": "sha512-zABk/iP7YX5SVbmK4e+IX7j2d0D37MQJQiKgWdV3JzfvVJhNJzddiirtT980pIafoq+KyvTgVwXtc+vnux0oeQ==",
+      "requires": {
+        "ajv": "5.5.2",
+        "chokidar": "1.7.0",
+        "rxjs": "5.5.12",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "rxjs": {
+          "version": "5.5.12",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
+          "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
+          "requires": {
+            "symbol-observable": "1.0.1"
+          }
+        }
+      }
+    },
+    "@angular-devkit/schematics": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.3.2.tgz",
+      "integrity": "sha512-B6zZoqvHaTJy+vVdA6EtlxnCdGMa5elCa4j9lQLC3JI8DLvMXUWkCIPVbPzJ/GSRR9nsKWpvYMYaJyfBDUqfhw==",
+      "requires": {
+        "@ngtools/json-schema": "1.2.0",
+        "rxjs": "5.5.12"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "5.5.12",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
+          "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
+          "requires": {
+            "symbol-observable": "1.0.1"
+          }
+        }
+      }
+    },
+    "@angular/animations": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-4.4.7.tgz",
+      "integrity": "sha512-clP1xZw3KCfdj5rGDies5L5iwLgXzVFQ/B66Yj9oc24mJyK9oZARmuXdHfu+y8YtlW2b3wNSK2JH3qygaxbNLA==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/cdk": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-7.3.7.tgz",
+      "integrity": "sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==",
+      "requires": {
+        "parse5": "5.1.1",
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/cli": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.4.tgz",
+      "integrity": "sha512-URdb1QtnQf+Ievy93wjq7gE81s25BkWUwJFPey+YkphBA3G1lbCAQPiEh2pntBwaIKavgEuCw+Sf2YZdgTVhDA==",
+      "requires": {
+        "@angular-devkit/build-optimizer": "0.3.2",
+        "@angular-devkit/core": "0.3.2",
+        "@angular-devkit/schematics": "0.3.2",
+        "@ngtools/json-schema": "1.2.0",
+        "@ngtools/webpack": "1.10.2",
+        "@schematics/angular": "0.3.2",
+        "@schematics/package-update": "0.3.2",
+        "ajv": "6.12.6",
+        "autoprefixer": "7.2.6",
+        "cache-loader": "1.2.5",
+        "chalk": "2.2.2",
+        "circular-dependency-plugin": "4.4.0",
+        "clean-css": "4.2.3",
+        "common-tags": "1.8.0",
+        "copy-webpack-plugin": "4.4.3",
+        "core-object": "3.1.5",
+        "denodeify": "1.2.1",
+        "ember-cli-string-utils": "1.1.0",
+        "extract-text-webpack-plugin": "3.0.2",
+        "file-loader": "1.1.11",
+        "fs-extra": "4.0.3",
+        "glob": "7.1.6",
+        "html-webpack-plugin": "2.30.1",
+        "istanbul-instrumenter-loader": "3.0.1",
+        "karma-source-map-support": "1.4.0",
+        "less": "2.7.3",
+        "less-loader": "4.1.0",
+        "license-webpack-plugin": "1.5.0",
+        "loader-utils": "1.1.0",
+        "lodash": "4.17.20",
+        "memory-fs": "0.4.1",
+        "minimatch": "3.0.4",
+        "node-modules-path": "1.0.2",
+        "node-sass": "4.14.1",
+        "nopt": "4.0.3",
+        "opn": "5.1.0",
+        "portfinder": "1.0.28",
+        "postcss": "6.0.23",
+        "postcss-import": "11.1.0",
+        "postcss-loader": "2.1.6",
+        "postcss-url": "7.3.2",
+        "raw-loader": "0.5.1",
+        "resolve": "1.19.0",
+        "rxjs": "5.5.12",
+        "sass-loader": "6.0.7",
+        "semver": "5.7.1",
+        "silent-error": "1.1.1",
+        "source-map-support": "0.4.18",
+        "style-loader": "0.19.1",
+        "stylus": "0.54.8",
+        "stylus-loader": "3.0.2",
+        "uglifyjs-webpack-plugin": "1.3.0",
+        "url-loader": "0.6.2",
+        "webpack": "3.11.0",
+        "webpack-dev-middleware": "1.12.2",
+        "webpack-dev-server": "2.11.5",
+        "webpack-merge": "4.2.2",
+        "webpack-sources": "1.4.3",
+        "webpack-subresource-integrity": "1.5.2"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "5.5.12",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
+          "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
+          "requires": {
+            "symbol-observable": "1.0.1"
+          }
+        }
+      }
+    },
+    "@angular/common": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-4.4.7.tgz",
+      "integrity": "sha512-5R0POjbT4CR+8vXS7P33SiozJpTEKDsHq07EMm90OCwoofU5DIKDLNyEqr362zsbpzGUTmhGbSiLZib5Qt4djA==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/compiler": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-4.4.7.tgz",
+      "integrity": "sha512-aiRh86RqHMTgJ7xckQWzG2UTnq23+WuDVhYh/QL19R43areZLglqgtKSkfezg9aatO5CGzxDA3qL5WGhccQ5EQ==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/compiler-cli": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-4.4.7.tgz",
+      "integrity": "sha512-vzphs9galtMV29CW+ihp6v0HwSQrjAFqs04swqt9o0jEJET6/mPi1EFjJRNZiFn6ghh6lxUPr3vThy7CrSNxHg==",
+      "dev": true,
+      "requires": {
+        "@angular/tsc-wrapped": "4.4.7",
+        "minimist": "1.2.5",
+        "reflect-metadata": "0.1.13"
+      }
+    },
+    "@angular/core": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-4.4.7.tgz",
+      "integrity": "sha512-Jxs6gNTl5KjXflg5vi5rlnokq1johFccN94qSOgDv+Mg1iuGF2i9p7EHkw3Y8jBCVaSLw1qgHE+wMb6KTlJDLA==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/flex-layout": {
+      "version": "9.0.0-beta.31",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-9.0.0-beta.31.tgz",
+      "integrity": "sha512-g94u2mecDl87ORvFRuOBshV/S/ETE4bybClU2e1xXKWNG+rhRHchChneHSonc29ZLyROTjHhmAtKOYojL92uLA=="
+    },
+    "@angular/forms": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-4.4.7.tgz",
+      "integrity": "sha512-EXGutI4GNBptpwkCQdCTxWAlJll8aCV7m3cA1FHZgFP7VNSgYF0pD+PscM5jSeajG30cRjaKxgL4cqj6yMMtww==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/http": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/http/-/http-4.4.7.tgz",
+      "integrity": "sha512-9XrvXFVuHsAfVlIbM6Em2EouKiRyV2y4nPA+dAUd/9uB9i/i+FzZlmmeSIvP7ePnm6QyAC6nlvy9FMQYwvrtNA==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/language-service": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-4.4.7.tgz",
+      "integrity": "sha512-wUTH1+B1L/bcROduWH/asEpTwx3myQXueqfA5S+JCtR58PZD/OCjnY3rIzei2oxb8MIprhFV0xGl4r8v7fSmDw==",
+      "dev": true
+    },
+    "@angular/material": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.2.tgz",
+      "integrity": "sha512-xoUjl2NvelT2iIb5iY02sLSEmzVcY4yGxVXJO7KVF39XJZQ3/JUUzkd1Bc7BX6dGp7JlDMvKJOdesIohLRtVZw==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/platform-browser": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.4.7.tgz",
+      "integrity": "sha512-5WGMhUbaepmNoE597N/6R4jDdSqe4wwJblfi6bOJI34QStmD6QRnmg3H7ujr8lLhRBo9P3zH+hn7bM3RxUIEJg==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/platform-browser-dynamic": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-4.4.7.tgz",
+      "integrity": "sha512-or6CB+LzK8zYn7K4rif32UvVadnbdrqBiT+5Yai1szNUUKuseqx2h1dsEgJQamkajsOUM7zjLYq4LrKJEEcm8A==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/router": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-4.4.7.tgz",
+      "integrity": "sha512-WaVnBP41UdrUwReSUgB5YE6C37PrYFSaiFAoPRTx4RC0jeRE+ncFWwessVIh0kvfEK4ROkO3QK2BtLzMUY5GNg==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "@angular/tsc-wrapped": {
+      "version": "4.4.7",
+      "resolved": "https://registry.npmjs.org/@angular/tsc-wrapped/-/tsc-wrapped-4.4.7.tgz",
+      "integrity": "sha512-R9w7sTU+HSTMPOa4NgvPL753qB6aqnPc1AVh2rwSl5FOpLS/AeeyzIhRnBsVXGrZrTcBQVLp/Cxg1oUSXE2k4Q==",
+      "dev": true,
+      "requires": {
+        "tsickle": "0.21.6"
+      }
+    },
+    "@babel/code-frame": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+      "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "7.10.4"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.12.7.tgz",
+      "integrity": "sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==",
+      "dev": true
+    },
+    "@babel/core": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.10.tgz",
+      "integrity": "sha512-eTAlQKq65zHfkHZV0sIVODCPGVgoo1HdBlbSLi9CqOzuZanMv2ihzY+4paiKr1mH+XmYESMAmJ/dpZ68eN6d8w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@babel/generator": "7.12.11",
+        "@babel/helper-module-transforms": "7.12.1",
+        "@babel/helpers": "7.12.5",
+        "@babel/parser": "7.12.11",
+        "@babel/template": "7.12.7",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12",
+        "convert-source-map": "1.7.0",
+        "debug": "4.3.1",
+        "gensync": "1.0.0-beta.2",
+        "json5": "2.1.3",
+        "lodash": "4.17.20",
+        "semver": "5.7.1",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "1.2.5"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/generator": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.11.tgz",
+      "integrity": "sha512-Ggg6WPOJtSi8yYQvLVjG8F/TlpWDlKx0OpS4Kt+xMQPs5OaGYWy+v1A+1TvxI6sAMGZpKWWoAQ1DaeQbImlItA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12",
+        "jsesc": "2.5.2",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "2.5.2",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+          "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz",
+      "integrity": "sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz",
+      "integrity": "sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "7.12.1",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz",
+      "integrity": "sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "7.12.7",
+        "@babel/helper-validator-option": "7.12.11",
+        "browserslist": "4.16.0",
+        "semver": "5.7.1"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        }
+      }
+    },
+    "@babel/helper-create-class-features-plugin": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz",
+      "integrity": "sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/helper-member-expression-to-functions": "7.12.7",
+        "@babel/helper-optimise-call-expression": "7.12.10",
+        "@babel/helper-replace-supers": "7.12.11",
+        "@babel/helper-split-export-declaration": "7.12.11"
+      }
+    },
+    "@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz",
+      "integrity": "sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "7.12.10",
+        "regexpu-core": "4.7.1"
+      }
+    },
+    "@babel/helper-define-map": {
+      "version": "7.10.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz",
+      "integrity": "sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/types": "7.12.12",
+        "lodash": "4.17.20"
+      }
+    },
+    "@babel/helper-explode-assignable-expression": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz",
+      "integrity": "sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.11.tgz",
+      "integrity": "sha512-AtQKjtYNolKNi6nNNVLQ27CP6D9oFR6bq/HPYSizlzbp7uC1M59XJe8L+0uXjbIaZaUJF99ruHqVGiKXU/7ybA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-get-function-arity": "7.12.10",
+        "@babel/template": "7.12.7",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.10.tgz",
+      "integrity": "sha512-mm0n5BPjR06wh9mPQaDdXWDoll/j5UpCAPl1x8fS71GHm7HA6Ua2V4ylG1Ju8lvcTOietbPNNPaSilKj+pj+Ag==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz",
+      "integrity": "sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz",
+      "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
+      "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz",
+      "integrity": "sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.12.5",
+        "@babel/helper-replace-supers": "7.12.11",
+        "@babel/helper-simple-access": "7.12.1",
+        "@babel/helper-split-export-declaration": "7.12.11",
+        "@babel/helper-validator-identifier": "7.12.11",
+        "@babel/template": "7.12.7",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12",
+        "lodash": "4.17.20"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.10.tgz",
+      "integrity": "sha512-4tpbU0SrSTjjt65UMWSrUOPZTsgvPgGG4S8QSTNHacKzpS51IVWGDj0yCwyeZND/i+LSN2g/O63jEXEWm49sYQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+      "dev": true
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz",
+      "integrity": "sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "7.12.10",
+        "@babel/helper-wrap-function": "7.12.3",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.11.tgz",
+      "integrity": "sha512-q+w1cqmhL7R0FNzth/PLLp2N+scXEK/L2AHbXUyydxp828F4FEa5WcVoqui9vFRiHDQErj9Zof8azP32uGVTRA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "7.12.7",
+        "@babel/helper-optimise-call-expression": "7.12.10",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz",
+      "integrity": "sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz",
+      "integrity": "sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.11.tgz",
+      "integrity": "sha512-LsIVN8j48gHgwzfocYUSkO/hjYAOJqlpJEc7tGXcIm4cubjVUf8LGW6eWRyxEu7gA25q02p0rQUWoCI33HNS5g==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.11.tgz",
+      "integrity": "sha512-TBFCyj939mFSdeX7U7DDj32WtzYY7fDcalgq8v3fBZMNOJQNn7nOYzMaUCiPxPYfCup69mtIpqlKgMZLvQ8Xhw==",
+      "dev": true
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.12.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz",
+      "integrity": "sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/template": "7.12.7",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.12.5.tgz",
+      "integrity": "sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==",
+      "dev": true,
+      "requires": {
+        "@babel/template": "7.12.7",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+      "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "7.12.11",
+        "chalk": "2.2.2",
+        "js-tokens": "4.0.0"
+      },
+      "dependencies": {
+        "js-tokens": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+          "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/parser": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.11.tgz",
+      "integrity": "sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg=="
+    },
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.12.tgz",
+      "integrity": "sha512-nrz9y0a4xmUrRq51bYkWJIO5SBZyG2ys2qinHsN0zHDHVsUaModrkpyWWWXfGqYQmOL3x9sQIcTNN/pBGpo09A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-remap-async-to-generator": "7.12.1",
+        "@babel/plugin-syntax-async-generators": "7.8.4"
+      }
+    },
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
+      "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz",
+      "integrity": "sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-dynamic-import": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz",
+      "integrity": "sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-export-namespace-from": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz",
+      "integrity": "sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-json-strings": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz",
+      "integrity": "sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-logical-assignment-operators": "7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
+      "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz",
+      "integrity": "sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-numeric-separator": "7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz",
+      "integrity": "sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "7.8.3",
+        "@babel/plugin-transform-parameters": "7.12.1"
+      }
+    },
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz",
+      "integrity": "sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-optional-catch-binding": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz",
+      "integrity": "sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "7.8.3"
+      }
+    },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz",
+      "integrity": "sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz",
+      "integrity": "sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "7.12.7",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz",
+      "integrity": "sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-flow": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz",
+      "integrity": "sha512-1lBLLmtxrwpm4VKmtVFselI/P3pX+G63fAtUUt6b2Nzgao77KNDwyuRt90Mj2/9pKobtt68FdvjfqohZjg/FCA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
+      "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz",
+      "integrity": "sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz",
+      "integrity": "sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-async-to-generator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz",
+      "integrity": "sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "7.12.5",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-remap-async-to-generator": "7.12.1"
+      }
+    },
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz",
+      "integrity": "sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.12.tgz",
+      "integrity": "sha512-VOEPQ/ExOVqbukuP7BYJtI5ZxxsmegTwzZ04j1aF0dkSypGo9XpDHuOrABsJu+ie+penpSJheDJ11x1BEZNiyQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-classes": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz",
+      "integrity": "sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "7.12.10",
+        "@babel/helper-define-map": "7.10.5",
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/helper-optimise-call-expression": "7.12.10",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-replace-supers": "7.12.11",
+        "@babel/helper-split-export-declaration": "7.12.11",
+        "globals": "11.12.0"
+      },
+      "dependencies": {
+        "globals": {
+          "version": "11.12.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz",
+      "integrity": "sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz",
+      "integrity": "sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz",
+      "integrity": "sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "7.12.7",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz",
+      "integrity": "sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz",
+      "integrity": "sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "7.10.4",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-flow-strip-types": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.10.tgz",
+      "integrity": "sha512-0ti12wLTLeUIzu9U7kjqIn4MyOL7+Wibc7avsHhj4o1l5C0ATs8p2IMHrVYjm9t9wzhfEO6S3kxax0Rpdo8LTg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-flow": "7.12.1"
+      }
+    },
+    "@babel/plugin-transform-for-of": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz",
+      "integrity": "sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-function-name": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz",
+      "integrity": "sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-literals": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz",
+      "integrity": "sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz",
+      "integrity": "sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-modules-amd": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz",
+      "integrity": "sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "babel-plugin-dynamic-import-node": "2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz",
+      "integrity": "sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-simple-access": "7.12.1",
+        "babel-plugin-dynamic-import-node": "2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-systemjs": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz",
+      "integrity": "sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-hoist-variables": "7.10.4",
+        "@babel/helper-module-transforms": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-validator-identifier": "7.12.11",
+        "babel-plugin-dynamic-import-node": "2.3.3"
+      }
+    },
+    "@babel/plugin-transform-modules-umd": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz",
+      "integrity": "sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-transforms": "7.12.1",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz",
+      "integrity": "sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "7.12.7"
+      }
+    },
+    "@babel/plugin-transform-new-target": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz",
+      "integrity": "sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-object-super": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz",
+      "integrity": "sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-replace-supers": "7.12.11"
+      }
+    },
+    "@babel/plugin-transform-parameters": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz",
+      "integrity": "sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-property-literals": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz",
+      "integrity": "sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.12.tgz",
+      "integrity": "sha512-JDWGuzGNWscYcq8oJVCtSE61a5+XAOos+V0HrxnDieUus4UMnBEosDnY1VJqU5iZ4pA04QY7l0+JvHL1hZEfsw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "7.12.10",
+        "@babel/helper-module-imports": "7.12.5",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-syntax-jsx": "7.12.1",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/plugin-transform-regenerator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz",
+      "integrity": "sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==",
+      "dev": true,
+      "requires": {
+        "regenerator-transform": "0.14.5"
+      }
+    },
+    "@babel/plugin-transform-reserved-words": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz",
+      "integrity": "sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz",
+      "integrity": "sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-spread": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz",
+      "integrity": "sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "7.12.1"
+      }
+    },
+    "@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz",
+      "integrity": "sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-template-literals": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz",
+      "integrity": "sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.10.tgz",
+      "integrity": "sha512-JQ6H8Rnsogh//ijxspCjc21YPd3VLVoYtAwv3zQmqAt8YGYUtdo5usNhdl4b9/Vir2kPFZl6n1h0PfUz4hJhaA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz",
+      "integrity": "sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz",
+      "integrity": "sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-regexp-features-plugin": "7.12.7",
+        "@babel/helper-plugin-utils": "7.10.4"
+      }
+    },
+    "@babel/preset-env": {
+      "version": "7.12.11",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.11.tgz",
+      "integrity": "sha512-j8Tb+KKIXKYlDBQyIOy4BLxzv1NUOwlHfZ74rvW+Z0Gp4/cI2IMDPBWAgWceGcE7aep9oL/0K9mlzlMGxA8yNw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "7.12.7",
+        "@babel/helper-compilation-targets": "7.12.5",
+        "@babel/helper-module-imports": "7.12.5",
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/helper-validator-option": "7.12.11",
+        "@babel/plugin-proposal-async-generator-functions": "7.12.12",
+        "@babel/plugin-proposal-class-properties": "7.12.1",
+        "@babel/plugin-proposal-dynamic-import": "7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "7.12.1",
+        "@babel/plugin-proposal-json-strings": "7.12.1",
+        "@babel/plugin-proposal-logical-assignment-operators": "7.12.1",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
+        "@babel/plugin-proposal-numeric-separator": "7.12.7",
+        "@babel/plugin-proposal-object-rest-spread": "7.12.1",
+        "@babel/plugin-proposal-optional-catch-binding": "7.12.1",
+        "@babel/plugin-proposal-optional-chaining": "7.12.7",
+        "@babel/plugin-proposal-private-methods": "7.12.1",
+        "@babel/plugin-proposal-unicode-property-regex": "7.12.1",
+        "@babel/plugin-syntax-async-generators": "7.8.4",
+        "@babel/plugin-syntax-class-properties": "7.12.1",
+        "@babel/plugin-syntax-dynamic-import": "7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "7.8.3",
+        "@babel/plugin-syntax-json-strings": "7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "7.8.3",
+        "@babel/plugin-syntax-top-level-await": "7.12.1",
+        "@babel/plugin-transform-arrow-functions": "7.12.1",
+        "@babel/plugin-transform-async-to-generator": "7.12.1",
+        "@babel/plugin-transform-block-scoped-functions": "7.12.1",
+        "@babel/plugin-transform-block-scoping": "7.12.12",
+        "@babel/plugin-transform-classes": "7.12.1",
+        "@babel/plugin-transform-computed-properties": "7.12.1",
+        "@babel/plugin-transform-destructuring": "7.12.1",
+        "@babel/plugin-transform-dotall-regex": "7.12.1",
+        "@babel/plugin-transform-duplicate-keys": "7.12.1",
+        "@babel/plugin-transform-exponentiation-operator": "7.12.1",
+        "@babel/plugin-transform-for-of": "7.12.1",
+        "@babel/plugin-transform-function-name": "7.12.1",
+        "@babel/plugin-transform-literals": "7.12.1",
+        "@babel/plugin-transform-member-expression-literals": "7.12.1",
+        "@babel/plugin-transform-modules-amd": "7.12.1",
+        "@babel/plugin-transform-modules-commonjs": "7.12.1",
+        "@babel/plugin-transform-modules-systemjs": "7.12.1",
+        "@babel/plugin-transform-modules-umd": "7.12.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "7.12.1",
+        "@babel/plugin-transform-new-target": "7.12.1",
+        "@babel/plugin-transform-object-super": "7.12.1",
+        "@babel/plugin-transform-parameters": "7.12.1",
+        "@babel/plugin-transform-property-literals": "7.12.1",
+        "@babel/plugin-transform-regenerator": "7.12.1",
+        "@babel/plugin-transform-reserved-words": "7.12.1",
+        "@babel/plugin-transform-shorthand-properties": "7.12.1",
+        "@babel/plugin-transform-spread": "7.12.1",
+        "@babel/plugin-transform-sticky-regex": "7.12.7",
+        "@babel/plugin-transform-template-literals": "7.12.1",
+        "@babel/plugin-transform-typeof-symbol": "7.12.10",
+        "@babel/plugin-transform-unicode-escapes": "7.12.1",
+        "@babel/plugin-transform-unicode-regex": "7.12.1",
+        "@babel/preset-modules": "0.1.4",
+        "@babel/types": "7.12.12",
+        "core-js-compat": "3.8.1",
+        "semver": "5.7.1"
+      }
+    },
+    "@babel/preset-modules": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "7.10.4",
+        "@babel/plugin-proposal-unicode-property-regex": "7.12.1",
+        "@babel/plugin-transform-dotall-regex": "7.12.1",
+        "@babel/types": "7.12.12",
+        "esutils": "2.0.3"
+      }
+    },
+    "@babel/runtime": {
+      "version": "7.12.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
+      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "0.13.7"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/template": {
+      "version": "7.12.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz",
+      "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@babel/parser": "7.12.11",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.12.tgz",
+      "integrity": "sha512-s88i0X0lPy45RrLM8b9mz8RPH5FqO9G9p7ti59cToE44xFm1Q+Pjh5Gq4SXBbtb88X7Uy7pexeqRIQDDMNkL0w==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@babel/generator": "7.12.11",
+        "@babel/helper-function-name": "7.12.11",
+        "@babel/helper-split-export-declaration": "7.12.11",
+        "@babel/parser": "7.12.11",
+        "@babel/types": "7.12.12",
+        "debug": "4.3.1",
+        "globals": "11.12.0",
+        "lodash": "4.17.20"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "globals": {
+          "version": "11.12.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+          "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
+    "@babel/types": {
+      "version": "7.12.12",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.12.tgz",
+      "integrity": "sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==",
+      "requires": {
+        "@babel/helper-validator-identifier": "7.12.11",
+        "lodash": "4.17.20",
+        "to-fast-properties": "2.0.0"
+      },
+      "dependencies": {
+        "to-fast-properties": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+          "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+        }
+      }
+    },
+    "@dabh/diagnostics": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.2.tgz",
+      "integrity": "sha512-+A1YivoVDNNVCdfozHSR8v/jyuuLTMXwjWuxPFlFlUapXoGc+Gj9mDlTDDfrwl7rXCl2tNZ0kE8sIBO6YOn96Q==",
+      "requires": {
+        "colorspace": "1.1.2",
+        "enabled": "2.0.0",
+        "kuler": "2.0.0"
+      }
+    },
+    "@exodus/schemasafe": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/@exodus/schemasafe/-/schemasafe-1.0.0-rc.3.tgz",
+      "integrity": "sha512-GoXw0U2Qaa33m3eUcxuHnHpNvHjNlLo0gtV091XBpaRINaB4X6FGCG5XKxSFNFiPpugUDqNruHzaqpTdDm4AOg=="
+    },
+    "@firebase/app": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.3.17.tgz",
+      "integrity": "sha512-/8lDeeIxgdCIMffrfBPQ3bcdSkF8bx4KCp8pKMPOG/HYKoeM8I9eP4zlzxL5ABzRjvcdhK9KOYOn0jRrNrGD9g==",
+      "requires": {
+        "@firebase/app-types": "0.3.10",
+        "@firebase/util": "0.2.14",
+        "dom-storage": "2.1.0",
+        "tslib": "1.9.3",
+        "xmlhttprequest": "1.8.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+        }
+      }
+    },
+    "@firebase/app-types": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.3.10.tgz",
+      "integrity": "sha512-l+5BJtSQopalBXiY/YuSaB9KF9PnDj37FLV0Sx3qJjh5B3IthCuZbPc1Vpbbbee/QZgudl0G212BBsUMGHP+fQ=="
+    },
+    "@firebase/database": {
+      "version": "0.3.20",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-0.3.20.tgz",
+      "integrity": "sha512-fZHRIlRQlND/UrzI1beUTRKfktjMvMEiUOar6ylFZqOj2KNVO4CrF95UGqRl0HBGhZzlBKzaDYAcJze2D6C4+Q==",
+      "requires": {
+        "@firebase/database-types": "0.3.11",
+        "@firebase/logger": "0.1.13",
+        "@firebase/util": "0.2.14",
+        "faye-websocket": "0.11.1",
+        "tslib": "1.9.3"
+      },
+      "dependencies": {
+        "faye-websocket": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
+          "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
+          "requires": {
+            "websocket-driver": "0.7.4"
+          }
+        },
+        "tslib": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+        }
+      }
+    },
+    "@firebase/database-types": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-0.3.11.tgz",
+      "integrity": "sha512-iRAZzs7Zlmmvh7r0XlR1MAO6I6bm1HjW9m1ytfJ6E/8+zItHnbVH4iiVVkC39r1wMGrtPMz8FiIUWoaasPF5dA=="
+    },
+    "@firebase/logger": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.1.13.tgz",
+      "integrity": "sha512-wIbLwQ2oJCkvHIE7J3FDxpScKY84fSctEEjOi0PB+Yn2dN8AwqtM7YF8rtcY8cxntv8dyR+i7GNg1Nd89cGxkA=="
+    },
+    "@firebase/util": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-0.2.14.tgz",
+      "integrity": "sha512-2ke1Lra0R5T+5ucCMWft/IB2rI/IzumHHYm9aqrM9lJ3XURiWmBHAYrvaPVP7///gDhJAo+NNDUCAJH/Y4PmvA==",
+      "requires": {
+        "tslib": "1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
+          "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
+        }
+      }
+    },
+    "@google-cloud/common": {
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/@google-cloud/common/-/common-0.32.1.tgz",
+      "integrity": "sha512-bLdPzFvvBMtVkwsoBtygE9oUm3yrNmPa71gvOgucYI/GqvNP2tb6RYsDHPq98kvignhcgHGDI5wyNgxaCo8bKQ==",
+      "optional": true,
+      "requires": {
+        "@google-cloud/projectify": "0.3.3",
+        "@google-cloud/promisify": "0.4.0",
+        "@types/request": "2.48.5",
+        "arrify": "2.0.1",
+        "duplexify": "3.7.1",
+        "ent": "2.2.0",
+        "extend": "3.0.2",
+        "google-auth-library": "3.1.2",
+        "pify": "4.0.1",
+        "retry-request": "4.1.3",
+        "teeny-request": "3.11.3"
+      },
+      "dependencies": {
+        "arrify": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+          "optional": true
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+          "optional": true
+        }
+      }
+    },
+    "@google-cloud/firestore": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-1.3.0.tgz",
+      "integrity": "sha512-KUKcHUU+FwwBmJH1LqJcd+XtLPzMcS/Vni6/WCJGHBGrOBmXCey4i3Gc41ZsuSk1Qx4msH5f+4h0b3t6YLyydg==",
+      "optional": true,
+      "requires": {
+        "bun": "0.0.12",
+        "deep-equal": "1.1.1",
+        "functional-red-black-tree": "1.0.1",
+        "google-gax": "0.25.6",
+        "lodash.merge": "4.6.2",
+        "through2": "3.0.2"
+      },
+      "dependencies": {
+        "through2": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
+          "optional": true,
+          "requires": {
+            "inherits": "2.0.4",
+            "readable-stream": "2.3.7"
+          }
+        }
+      }
+    },
+    "@google-cloud/paginator": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/paginator/-/paginator-0.2.0.tgz",
+      "integrity": "sha512-2ZSARojHDhkLvQ+CS32K+iUhBsWg3AEw+uxtqblA7xoCABDyhpj99FPp35xy6A+XlzMhOSrHHaxFE+t6ZTQq0w==",
+      "optional": true,
+      "requires": {
+        "arrify": "1.0.1",
+        "extend": "3.0.2",
+        "split-array-stream": "2.0.0",
+        "stream-events": "1.0.5"
+      }
+    },
+    "@google-cloud/projectify": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@google-cloud/projectify/-/projectify-0.3.3.tgz",
+      "integrity": "sha512-7522YHQ4IhaafgSunsFF15nG0TGVmxgXidy9cITMe+256RgqfcrfWphiMufW+Ou4kqagW/u3yxwbzVEW3dk2Uw==",
+      "optional": true
+    },
+    "@google-cloud/promisify": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/promisify/-/promisify-0.4.0.tgz",
+      "integrity": "sha512-4yAHDC52TEMCNcMzVC8WlqnKKKq+Ssi2lXoUg9zWWkZ6U6tq9ZBRYLHHCRdfU+EU9YJsVmivwGcKYCjRGjnf4Q=="
+    },
+    "@google-cloud/storage": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@google-cloud/storage/-/storage-2.5.0.tgz",
+      "integrity": "sha512-q1mwB6RUebIahbA3eriRs8DbG2Ij81Ynb9k8hMqTPkmbd8/S6Z0d6hVvfPmnyvX9Ej13IcmEYIbymuq/RBLghA==",
+      "optional": true,
+      "requires": {
+        "@google-cloud/common": "0.32.1",
+        "@google-cloud/paginator": "0.2.0",
+        "@google-cloud/promisify": "0.4.0",
+        "arrify": "1.0.1",
+        "async": "2.6.3",
+        "compressible": "2.0.18",
+        "concat-stream": "2.0.0",
+        "date-and-time": "0.6.3",
+        "duplexify": "3.7.1",
+        "extend": "3.0.2",
+        "gcs-resumable-upload": "1.1.0",
+        "hash-stream-validation": "0.2.4",
+        "mime": "2.4.7",
+        "mime-types": "2.1.27",
+        "onetime": "5.1.2",
+        "pumpify": "1.5.1",
+        "snakeize": "0.1.0",
+        "stream-events": "1.0.5",
+        "teeny-request": "3.11.3",
+        "through2": "3.0.2",
+        "xdg-basedir": "3.0.0"
+      },
+      "dependencies": {
+        "concat-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+          "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+          "optional": true,
+          "requires": {
+            "buffer-from": "1.1.1",
+            "inherits": "2.0.4",
+            "readable-stream": "3.6.0",
+            "typedarray": "0.0.6"
+          }
+        },
+        "mime": {
+          "version": "2.4.7",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz",
+          "integrity": "sha512-dhNd1uA2u397uQk3Nv5LM4lm93WYDUXFn3Fu291FJerns4jyTudqhIWe4W04YLy7Uk1tm1Ore04NpjRvQp/NPA==",
+          "optional": true
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "through2": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
+          "optional": true,
+          "requires": {
+            "inherits": "2.0.4",
+            "readable-stream": "3.6.0"
+          }
+        }
+      }
+    },
+    "@grpc/grpc-js": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-0.3.6.tgz",
+      "integrity": "sha512-SmLNuPGlUur64bNS9aHZguqWDVQ8+Df1CGn+xsh7l6T2wiP5ArOMlywZ3TZo6z/rwKtGQgUJY9ZrPYUmHEXd/Q==",
+      "optional": true,
+      "requires": {
+        "semver": "5.7.1"
+      }
+    },
+    "@grpc/proto-loader": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@grpc/proto-loader/-/proto-loader-0.4.0.tgz",
+      "integrity": "sha512-Jm6o+75uWT7E6+lt8edg4J1F/9+BedOjaMgwE14pxS/AO43/0ZqK+rCLVVrXLoExwSAZvgvOD2B0ivy3Spsspw==",
+      "optional": true,
+      "requires": {
+        "lodash.camelcase": "4.3.0",
+        "protobufjs": "6.10.2"
+      }
+    },
+    "@iarna/toml": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.5.tgz",
+      "integrity": "sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==",
+      "dev": true
+    },
+    "@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
+      "dev": true
+    },
+    "@mapbox/mapbox-gl-style-spec": {
+      "version": "13.18.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-style-spec/-/mapbox-gl-style-spec-13.18.1.tgz",
+      "integrity": "sha512-By+CufXEpba7sIUfnpbtVzy5tqrCyFDNssq1k7psxzCL1Xr0y916OSkEH0j7fFilhalVExjoh/mYtxH32tOYqw==",
+      "dev": true,
+      "requires": {
+        "@mapbox/jsonlint-lines-primitives": "2.0.2",
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/unitbezier": "0.0.0",
+        "csscolorparser": "1.0.3",
+        "json-stringify-pretty-compact": "2.0.0",
+        "minimist": "1.2.5",
+        "rw": "1.3.3",
+        "sort-object": "0.3.2"
+      }
+    },
+    "@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=",
+      "dev": true
+    },
+    "@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4=",
+      "dev": true
+    },
+    "@mrmlnc/readdir-enhanced": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
+      "integrity": "sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==",
+      "dev": true,
+      "requires": {
+        "call-me-maybe": "1.0.1",
+        "glob-to-regexp": "0.3.0"
+      }
+    },
+    "@ng-bootstrap/ng-bootstrap": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-2.2.2.tgz",
+      "integrity": "sha512-uqngK1urcevQeF+zgoGW1XDnasjoob4QrwhynNUFpDnnplP1wa+BEUjpSccxU+L2dHLfrOb2sPGEGp8cE2X3Iw=="
+    },
+    "@ngtools/json-schema": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@ngtools/json-schema/-/json-schema-1.2.0.tgz",
+      "integrity": "sha512-pMh+HDc6mOjUO3agRfB1tInimo7hf67u+0Cska2bfXFe6oU7rSMnr5PLVtiZVgwMoBHpx/6XjBymvcnWPo2Uzg=="
+    },
+    "@ngtools/webpack": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-1.10.2.tgz",
+      "integrity": "sha512-3u2zg2rarG3qNLSukBClGADWuq/iNn5SQtlSeAbfKzwBeyLGbF0gN1z1tVx1Bcr8YwFzR6NdRePQmJGcoqq1fg==",
+      "requires": {
+        "chalk": "2.2.2",
+        "enhanced-resolve": "3.4.1",
+        "loader-utils": "1.1.0",
+        "magic-string": "0.22.5",
+        "semver": "5.7.1",
+        "source-map": "0.5.7",
+        "tree-kill": "1.2.2",
+        "webpack-sources": "1.4.3"
+      }
+    },
+    "@ngui/overlay": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@ngui/overlay/-/overlay-0.8.0.tgz",
+      "integrity": "sha1-YXp8LQ44s2zhFe7rLSKV3U7o3QY="
+    },
+    "@ngui/popup": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@ngui/popup/-/popup-0.5.1.tgz",
+      "integrity": "sha1-D1BU//deJFEqrFzyJ1fLHohnCWw=",
+      "requires": {
+        "@ngui/overlay": "0.8.0",
+        "ng2-overlay": "0.7.2"
+      }
+    },
+    "@nodelib/fs.stat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
+      "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
+      "dev": true
+    },
+    "@parcel/fs": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-1.11.0.tgz",
+      "integrity": "sha512-86RyEqULbbVoeo8OLcv+LQ1Vq2PKBAvWTU9fCgALxuCTbbs5Ppcvll4Vr+Ko1AnmMzja/k++SzNAwJfeQXVlpA==",
+      "dev": true,
+      "requires": {
+        "@parcel/utils": "1.11.0",
+        "mkdirp": "0.5.5",
+        "rimraf": "2.7.1"
+      }
+    },
+    "@parcel/logger": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@parcel/logger/-/logger-1.11.1.tgz",
+      "integrity": "sha512-9NF3M6UVeP2udOBDILuoEHd8VrF4vQqoWHEafymO1pfSoOMfxrSJZw1MfyAAIUN/IFp9qjcpDCUbDZB+ioVevA==",
+      "dev": true,
+      "requires": {
+        "@parcel/workers": "1.11.0",
+        "chalk": "2.2.2",
+        "grapheme-breaker": "0.3.2",
+        "ora": "2.1.0",
+        "strip-ansi": "4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        }
+      }
+    },
+    "@parcel/utils": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@parcel/utils/-/utils-1.11.0.tgz",
+      "integrity": "sha512-cA3p4jTlaMeOtAKR/6AadanOPvKeg8VwgnHhOyfi0yClD0TZS/hi9xu12w4EzA/8NtHu0g6o4RDfcNjqN8l1AQ==",
+      "dev": true
+    },
+    "@parcel/watcher": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-1.12.1.tgz",
+      "integrity": "sha512-od+uCtCxC/KoNQAIE1vWx1YTyKYY+7CTrxBJPRh3cDWw/C0tCtlBMVlrbplscGoEpt6B27KhJDCv82PBxOERNA==",
+      "dev": true,
+      "requires": {
+        "@parcel/utils": "1.11.0",
+        "chokidar": "2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "dev": true,
+          "requires": {
+            "micromatch": "3.1.10",
+            "normalize-path": "2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "dev": true,
+              "requires": {
+                "remove-trailing-separator": "1.1.0"
+              }
+            }
+          }
+        },
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "dev": true
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "dev": true,
+          "requires": {
+            "anymatch": "2.0.0",
+            "async-each": "1.0.3",
+            "braces": "2.3.2",
+            "glob-parent": "3.1.0",
+            "inherits": "2.0.4",
+            "is-binary-path": "1.0.1",
+            "is-glob": "4.0.1",
+            "normalize-path": "3.0.0",
+            "path-is-absolute": "1.0.1",
+            "readdirp": "2.2.1",
+            "upath": "1.2.0"
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "dev": true,
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "dev": true
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "dev": true,
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "dev": true,
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "dev": true
+        }
+      }
+    },
+    "@parcel/workers": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@parcel/workers/-/workers-1.11.0.tgz",
+      "integrity": "sha512-USSjRAAQYsZFlv43FUPdD+jEGML5/8oLF0rUzPQTtK4q9kvaXr49F5ZplyLz5lox78cLZ0TxN2bIDQ1xhOkulQ==",
+      "dev": true,
+      "requires": {
+        "@parcel/utils": "1.11.0",
+        "physical-cpu-count": "2.0.0"
+      }
+    },
+    "@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha1-m4sMxmPWaafY9vXQiToU00jzD78="
+    },
+    "@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="
+    },
+    "@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="
+    },
+    "@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha1-NVy8mLr61ZePntCV85diHx0Ga3A="
+    },
+    "@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha1-upn7WYYUr2VwDBYZ/wbUVLDYTEU=",
+      "requires": {
+        "@protobufjs/aspromise": "1.1.2",
+        "@protobufjs/inquire": "1.1.0"
+      }
+    },
+    "@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha1-Xp4avctz/Ap8uLKR33jIy9l7h9E="
+    },
+    "@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha1-/yAOPnzyQp4tyvwRQIKOjMY48Ik="
+    },
+    "@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha1-bMKyDFya1q0NzP0hynZz2Nf79o0="
+    },
+    "@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha1-Cf0V8tbTq/qbZbw2ZQbWrXhG/1Q="
+    },
+    "@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA="
+    },
+    "@schematics/angular": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.3.2.tgz",
+      "integrity": "sha512-Elrk0BA951s0ScFZU0AWrpUeJBYVR52DZ1QTIO5R0AhwEd1PW4olI8szPLGQlVW5Sd6H0FA/fyFLIvn2r9v6Rw==",
+      "requires": {
+        "typescript": "2.6.2"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
+          "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q="
+        }
+      }
+    },
+    "@schematics/package-update": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@schematics/package-update/-/package-update-0.3.2.tgz",
+      "integrity": "sha512-7aVP4994Hu8vRdTTohXkfGWEwLhrdNP3EZnWyBootm5zshWqlQojUGweZe5zwewsKcixeVOiy2YtW+aI4aGSLA==",
+      "requires": {
+        "rxjs": "5.5.12",
+        "semver": "5.7.1",
+        "semver-intersect": "1.4.0"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "5.5.12",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.5.12.tgz",
+          "integrity": "sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==",
+          "requires": {
+            "symbol-observable": "1.0.1"
+          }
+        }
+      }
+    },
+    "@sphinxxxx/color-conversion": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+      "integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+    },
+    "@types/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
+      "requires": {
+        "@types/connect": "3.4.34",
+        "@types/node": "14.14.16"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+        }
+      }
+    },
+    "@types/bytebuffer": {
+      "version": "5.0.42",
+      "resolved": "https://registry.npmjs.org/@types/bytebuffer/-/bytebuffer-5.0.42.tgz",
+      "integrity": "sha512-lEgKojWUAc/MG2t649oZS5AfYFP2xRNPoDuwDBlBMjHXd8MaGPgFgtCXUK7inZdBOygmVf10qxc1Us8GXC96aw==",
+      "requires": {
+        "@types/long": "4.0.1",
+        "@types/node": "14.14.16"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+        }
+      }
+    },
+    "@types/caseless": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.2.tgz",
+      "integrity": "sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==",
+      "optional": true
+    },
+    "@types/connect": {
+      "version": "3.4.34",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.34.tgz",
+      "integrity": "sha512-ePPA/JuI+X0vb+gSWlPKOY0NdNAie/rPUqX2GUPpbZwiKTkSPhjXWuee47E4MtE54QVzGCQMQkAL6JhV2E1+cQ==",
+      "requires": {
+        "@types/node": "14.14.16"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+        }
+      }
+    },
+    "@types/express": {
+      "version": "4.17.9",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.9.tgz",
+      "integrity": "sha512-SDzEIZInC4sivGIFY4Sz1GG6J9UObPwCInYJjko2jzOf/Imx/dlpume6Xxwj1ORL82tBbmN4cPDIDkLbWHk9hw==",
+      "requires": {
+        "@types/body-parser": "1.19.0",
+        "@types/express-serve-static-core": "4.17.17",
+        "@types/qs": "6.9.5",
+        "@types/serve-static": "1.13.8"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.17",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.17.tgz",
+      "integrity": "sha512-YYlVaCni5dnHc+bLZfY908IG1+x5xuibKZMGv8srKkvtul3wUuanYvpIj9GXXoWkQbaAdR+kgX46IETKUALWNQ==",
+      "requires": {
+        "@types/node": "14.14.16",
+        "@types/qs": "6.9.5",
+        "@types/range-parser": "1.2.3"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+        }
+      }
+    },
+    "@types/grecaptcha": {
+      "version": "2.0.36",
+      "resolved": "https://registry.npmjs.org/@types/grecaptcha/-/grecaptcha-2.0.36.tgz",
+      "integrity": "sha512-SfzcAJPls94/Lz1FznWe6Vm9NLkakhGmk3EO7g2QdkDDR2OU4FH63YILnDpGIU6l7gPnsf5WQ81Kr05JOYAlZw==",
+      "optional": true
+    },
+    "@types/jasmine": {
+      "version": "2.5.54",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.54.tgz",
+      "integrity": "sha512-B9YofFbUljs19g5gBKUYeLIulsh31U5AK70F41BImQRHEZQGm4GcN922UvnYwkduMqbC/NH+9fruWa/zrqvHIg==",
+      "dev": true
+    },
+    "@types/jasminewd2": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.8.tgz",
+      "integrity": "sha512-d9p31r7Nxk0ZH0U39PTH0hiDlJ+qNVGjlt1ucOoTUptxb2v+Y5VMnsxfwN+i3hK4yQnqBi3FMmoMFcd1JHDxdg==",
+      "dev": true,
+      "requires": {
+        "@types/jasmine": "2.5.54"
+      }
+    },
+    "@types/jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-N3h+rzN518yl2xKrW0o6KKdNmWZ+OwG6SoM5TBEQFF0tTv5wXPEsoOuYQ2Kt3/89XbcSZUJLdjiT/2c3BR/ApQ=="
+    },
+    "@types/lodash": {
+      "version": "4.14.166",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.166.tgz",
+      "integrity": "sha512-A3YT/c1oTlyvvW/GQqG86EyqWNrT/tisOIh2mW3YCgcx71TNjiTZA3zYZWA5BCmtsOTXjhliy4c4yEkErw6njA=="
+    },
+    "@types/long": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
+      "integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
+    },
+    "@types/mime": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.3.tgz",
+      "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q=="
+    },
+    "@types/node": {
+      "version": "6.0.118",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.118.tgz",
+      "integrity": "sha512-N33cKXGSqhOYaPiT4xUGsYlPPDwFtQM/6QxJxuMXA/7BcySW+lkn2yigWP7vfs4daiL/7NJNU6DMCqg5N4B+xQ==",
+      "dev": true
+    },
+    "@types/q": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
+      "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==",
+      "dev": true
+    },
+    "@types/qs": {
+      "version": "6.9.5",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
+      "integrity": "sha512-/JHkVHtx/REVG0VVToGRGH2+23hsYLHdyG+GrvoUGlGAd0ErauXDyvHtRI/7H7mzLm+tBCKA7pfcpkQ1lf58iQ=="
+    },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA=="
+    },
+    "@types/request": {
+      "version": "2.48.5",
+      "resolved": "https://registry.npmjs.org/@types/request/-/request-2.48.5.tgz",
+      "integrity": "sha512-/LO7xRVnL3DxJ1WkPGDQrp4VTV1reX9RkC85mJ+Qzykj2Bdw+mG15aAfDahc76HtknjzE16SX/Yddn6MxVbmGQ==",
+      "optional": true,
+      "requires": {
+        "@types/caseless": "0.12.2",
+        "@types/node": "14.14.16",
+        "@types/tough-cookie": "4.0.0",
+        "form-data": "2.5.1"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw==",
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.5.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz",
+          "integrity": "sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==",
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        }
+      }
+    },
+    "@types/selenium-webdriver": {
+      "version": "2.53.45",
+      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.45.tgz",
+      "integrity": "sha512-/DJGXtMuklLQef49qDsmjQofzaGU6D5To2xJZRLBNZO4GLAi30IjxLy6hHRQdycXP+IZKKXqJhYyNJ53SglJ8w==",
+      "dev": true
+    },
+    "@types/serve-static": {
+      "version": "1.13.8",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.8.tgz",
+      "integrity": "sha512-MoJhSQreaVoL+/hurAZzIm8wafFR6ajiTM1m4A0kv6AGeVBl4r4pOV8bGFrjjq1sGxDTnCoF8i22o0/aE5XCyA==",
+      "requires": {
+        "@types/mime": "2.0.3",
+        "@types/node": "14.14.16"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "14.14.16",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.16.tgz",
+          "integrity": "sha512-naXYePhweTi+BMv11TgioE2/FXU4fSl29HAH1ffxVciNsH3rYXjNP2yM8wqmSm7jS20gM8TIklKiTen+1iVncw=="
+        }
+      }
+    },
+    "@types/socket.io-client": {
+      "version": "1.4.30",
+      "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.30.tgz",
+      "integrity": "sha512-iBRrnHweLU2LRd8V3W0fD6z8+t9uEYN/6GPK2awwknKhOt55ZaG08f1sELeWejE6vJCnDvHAjfFkbWRJZ0+DDQ==",
+      "dev": true
+    },
+    "@types/tough-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.0.tgz",
+      "integrity": "sha512-I99sngh224D0M7XgW1s120zxCt3VYQ3IQsuw3P3jbq5GG4yc79+ZjyKznyOGIQrflfylLgcfekeZW/vk0yng6A==",
+      "optional": true
+    },
+    "abab": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
+      "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
+      "dev": true
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "5.0.1"
+      }
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "2.1.27",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
+      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg=="
+    },
+    "acorn-dynamic-import": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-2.0.2.tgz",
+      "integrity": "sha1-x1K9IQvvZ5UBtsbLf8hPj0cVjMQ=",
+      "requires": {
+        "acorn": "4.0.13"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+          "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c="
+        }
+      }
+    },
+    "acorn-globals": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz",
+      "integrity": "sha1-VbtemGkVB7dFedBRNBMhfDgMVM8=",
+      "dev": true,
+      "requires": {
+        "acorn": "2.7.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
+          "dev": true
+        }
+      }
+    },
+    "acorn-walk": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
+      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
+      "dev": true
+    },
+    "addressparser": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/addressparser/-/addressparser-0.3.2.tgz",
+      "integrity": "sha1-WYc/Nej89sc2HBAjkmHXbhU0i7I="
+    },
+    "adler-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
+      "integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
+      "requires": {
+        "exit-on-epipe": "1.0.1",
+        "printj": "1.1.2"
+      }
+    },
+    "adm-zip": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
+      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg==",
+      "dev": true
+    },
+    "after": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz",
+      "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8="
+    },
+    "agent-base": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
+      "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
+      "requires": {
+        "es6-promisify": "5.0.0"
+      }
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "requires": {
+        "fast-deep-equal": "3.1.3",
+        "fast-json-stable-stringify": "2.1.0",
+        "json-schema-traverse": "0.4.1",
+        "uri-js": "4.4.0"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+          "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
+      }
+    },
+    "ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ=="
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+    },
+    "align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+      "requires": {
+        "kind-of": "3.2.2",
+        "longest": "1.0.1",
+        "repeat-string": "1.6.1"
+      }
+    },
+    "alphanum-sort": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
+      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
+      "dev": true
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
+    "angular-bootstrap-md": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/angular-bootstrap-md/-/angular-bootstrap-md-6.3.0.tgz",
+      "integrity": "sha512-r3Fmw/NwK9xb3xWq8X5NGoo+MtW0CtRuDgZZMiKVHM87KnT571hmYWoTmIi7tNxHlTtskRHCZrHLwuO952d4NQ=="
+    },
+    "angular-gauge": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/angular-gauge/-/angular-gauge-2.0.0.tgz",
+      "integrity": "sha1-HNABKpPsgeHOae5BaBKEsDCU9ao=",
+      "requires": {
+        "svg-gauge": "1.0.6"
+      }
+    },
+    "angular-resizable-element": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-1.2.3.tgz",
+      "integrity": "sha512-1JVz1xXTBz+qRCVljjRTQRNZ95HeW+96P+RaWsP+ikPWbE16fS4STrY6vgK6deLeFpMy5nHW+Kd174qlXq6+bg=="
+    },
+    "angular-stormpath": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/angular-stormpath/-/angular-stormpath-0.1.6.tgz",
+      "integrity": "sha1-eiYtcSW/jcAMoWaiFdqCFJXuedo=",
+      "requires": {
+        "angular2-cookie": "1.2.6",
+        "ng2-webstorage": "1.4.3"
+      }
+    },
+    "angular2-cookie": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/angular2-cookie/-/angular2-cookie-1.2.6.tgz",
+      "integrity": "sha1-j6hFUx53etsEL+LzOcAED23b8J0="
+    },
+    "angular2-datetimepicker": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/angular2-datetimepicker/-/angular2-datetimepicker-1.1.1.tgz",
+      "integrity": "sha1-acTZkcSKYNq4CiDYfoU5bBhfH0I=",
+      "requires": {
+        "font-awesome": "4.7.0"
+      }
+    },
+    "angular2-draggable": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/angular2-draggable/-/angular2-draggable-1.0.7.tgz",
+      "integrity": "sha1-NeH4HIzPPdljDyMmVYuILMEvDyk="
+    },
+    "angular2-flash-message": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/angular2-flash-message/-/angular2-flash-message-1.0.2.tgz",
+      "integrity": "sha1-qJmioxXjbW2HQbD1purzS2KbQD0=",
+      "requires": {
+        "@angular/common": "2.2.4",
+        "@angular/compiler": "2.2.4",
+        "@angular/core": "2.2.4",
+        "@angular/forms": "2.2.4",
+        "@angular/http": "2.2.4",
+        "@angular/platform-browser": "2.2.4",
+        "@angular/platform-browser-dynamic": "2.2.4",
+        "@angular/router": "3.2.4",
+        "@types/lodash": "4.14.166",
+        "lodash": "4.17.20",
+        "rxjs": "5.0.0-rc.4",
+        "zone.js": "0.7.2"
+      },
+      "dependencies": {
+        "@angular/common": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/common/-/common-2.2.4.tgz",
+          "integrity": "sha1-DnmMzoJrowTTspVWUnoaUx9AcVk="
+        },
+        "@angular/compiler": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-2.2.4.tgz",
+          "integrity": "sha1-QOjbX4AZOd3BoWMHnccbO+gaBq4="
+        },
+        "@angular/core": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/core/-/core-2.2.4.tgz",
+          "integrity": "sha1-0A1c/HNP1hDLr8FOsHSclX8ASqk="
+        },
+        "@angular/forms": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-2.2.4.tgz",
+          "integrity": "sha1-lfFcoZOIeSmMzA74o+nvXnUOMe8="
+        },
+        "@angular/http": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/http/-/http-2.2.4.tgz",
+          "integrity": "sha1-zP6z+AXgYo9rue+hKe9DLXlUjGM="
+        },
+        "@angular/platform-browser": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-2.2.4.tgz",
+          "integrity": "sha1-YEHgLH7WJiLJJgYIaVBnBfeftfs="
+        },
+        "@angular/platform-browser-dynamic": {
+          "version": "2.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-2.2.4.tgz",
+          "integrity": "sha1-SJXMA1qzk+yedOdoQhGpIJ6oaCU="
+        },
+        "@angular/router": {
+          "version": "3.2.4",
+          "resolved": "https://registry.npmjs.org/@angular/router/-/router-3.2.4.tgz",
+          "integrity": "sha1-3+xxrQcuwDE2S6XQi9b+A/1b6tw="
+        },
+        "rxjs": {
+          "version": "5.0.0-rc.4",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.0.0-rc.4.tgz",
+          "integrity": "sha1-pNCLxdfzDUjtcTDimVSQwyajJcQ=",
+          "requires": {
+            "symbol-observable": "1.0.1"
+          }
+        },
+        "zone.js": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.7.2.tgz",
+          "integrity": "sha1-GmK2vksk0bk15FZrC0OGtmlm0ac="
+        }
+      }
+    },
+    "angular2-flash-messages": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/angular2-flash-messages/-/angular2-flash-messages-1.0.8.tgz",
+      "integrity": "sha1-IeEIM6jARMHqfHCUgBVJScJyNGM="
+    },
+    "angular2-google-maps": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/angular2-google-maps/-/angular2-google-maps-0.17.0.tgz",
+      "integrity": "sha1-rYNm+k5cVt4LiyDwA7X3odoG/+M="
+    },
+    "angular2-image-upload": {
+      "version": "1.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/angular2-image-upload/-/angular2-image-upload-1.0.0-rc.0.tgz",
+      "integrity": "sha512-RaHX3khuliuvf6xQzcXybg81E+7AICmlqnR4H3VtT8tOfOgzUxamvfYxfgS/fk0yVLMEzEplcb3cvsz7X8unPg=="
+    },
+    "angular2-material-datepicker": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/angular2-material-datepicker/-/angular2-material-datepicker-0.5.0.tgz",
+      "integrity": "sha1-CU71M0G6tDyKU7ARbaMB+h9mRBM=",
+      "requires": {
+        "rxjs": "6.6.3"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "6.6.3",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
+          "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
+          "requires": {
+            "tslib": "1.14.1"
+          }
+        }
+      }
+    },
+    "angular2-moment": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/angular2-moment/-/angular2-moment-1.9.0.tgz",
+      "integrity": "sha512-ybPjYizpKVWAI2Z4AqxAS6s3FMkF3+zRpfvxX1wIdSJUFjl83XxQ5f2yn7retX68NSYZZ/JTK9KGnvOzZfrIZw==",
+      "requires": {
+        "moment": "2.29.1"
+      }
+    },
+    "angular2-recaptcha": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/angular2-recaptcha/-/angular2-recaptcha-1.1.0.tgz",
+      "integrity": "sha512-gJHq/T2/FNyu3QN7CmKQGTDfVEuB6Ke939dZTblUKdskLb5WDLHwPltNPi7JFjHEavyEYwuNNU7Kg2F/4il9gQ=="
+    },
+    "angular2-resizable": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/angular2-resizable/-/angular2-resizable-0.4.1.tgz",
+      "integrity": "sha1-WYtDg4pj/3wEgsTsii6LG/ND7bU="
+    },
+    "angular2-time-duration-picker": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/angular2-time-duration-picker/-/angular2-time-duration-picker-1.1.0.tgz",
+      "integrity": "sha512-H+cbI1o4IWD+vwvavffDRu7MGUlfPNgdIsdp85Bu20Ko1VasxH70zU8Pj1GqqGyWZCruw0J0RuxAICC2OI45wQ==",
+      "requires": {
+        "@angular/common": "4.4.7",
+        "@angular/compiler": "4.4.7",
+        "@angular/core": "4.4.7",
+        "@angular/forms": "4.4.7",
+        "@angular/platform-browser": "4.4.7",
+        "@angular/platform-browser-dynamic": "4.4.7",
+        "@angular/router": "4.4.7",
+        "core-js": "2.4.1",
+        "rxjs": "5.4.1",
+        "zone.js": "0.8.14"
+      }
+    },
+    "angular2-uuid": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/angular2-uuid/-/angular2-uuid-1.1.1.tgz",
+      "integrity": "sha1-cvA81TK39AAy6x7PufhFc4S+lW4="
+    },
+    "angular2-wizard": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/angular2-wizard/-/angular2-wizard-0.4.0.tgz",
+      "integrity": "sha1-eKkneNyOxk8gdKU72YGkohJ/GTk=",
+      "requires": {
+        "bootstrap": "4.5.3"
+      }
+    },
+    "ansi-align": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
+      "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=",
+      "requires": {
+        "string-width": "2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        }
+      }
+    },
+    "ansi-escapes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+      "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
+    },
+    "ansi-html": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
+      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4="
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "requires": {
+        "color-convert": "1.9.3"
+      }
+    },
+    "ansi-to-html": {
+      "version": "0.6.14",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.14.tgz",
+      "integrity": "sha512-7ZslfB1+EnFSDO5Ju+ue5Y6It19DRnZXWv8jrGHgIlPna5Mh4jz7BV5jCbQneXNFurQcKoolaaAjHtgSBfOIuA==",
+      "dev": true,
+      "requires": {
+        "entities": "1.1.2"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+          "dev": true
+        }
+      }
+    },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+    },
+    "anymatch": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
+      "integrity": "sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==",
+      "requires": {
+        "micromatch": "2.3.11",
+        "normalize-path": "2.1.1"
+      }
+    },
+    "apn": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/apn/-/apn-2.2.0.tgz",
+      "integrity": "sha512-YIypYzPVJA9wzNBLKZ/mq2l1IZX/2FadPvwmSv4ZeR0VH7xdNITQ6Pucgh0Uw6ZZKC+XwheaJ57DFZAhJ0FvPg==",
+      "requires": {
+        "debug": "3.2.7",
+        "http2": "https://github.com/node-apn/node-http2/archive/apn-2.1.4.tar.gz",
+        "jsonwebtoken": "8.5.1",
+        "node-forge": "0.7.6",
+        "verror": "1.10.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        },
+        "node-forge": {
+          "version": "0.7.6",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
+          "integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw=="
+        }
+      }
+    },
+    "app-module-path": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/app-module-path/-/app-module-path-2.2.0.tgz",
+      "integrity": "sha1-ZBqlXft9am8KgUHEucCqULbCTdU="
+    },
+    "app-root-path": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
+      "integrity": "sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==",
+      "dev": true
+    },
+    "append-field": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-0.1.0.tgz",
+      "integrity": "sha1-bdxY+gg8e8VF08WZWygwzCNm1Eo="
+    },
+    "append-transform": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-0.4.0.tgz",
+      "integrity": "sha1-126/jKlNJ24keja61EpLdKthGZE=",
+      "dev": true,
+      "requires": {
+        "default-require-extensions": "1.0.0"
+      }
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "archy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz",
+      "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA="
+    },
+    "are-we-there-yet": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "requires": {
+        "delegates": "1.0.0",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "argparse": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "requires": {
+        "sprintf-js": "1.0.3"
+      }
+    },
+    "arr-diff": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+      "requires": {
+        "arr-flatten": "1.1.0"
+      }
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+    },
+    "array-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
+      "dev": true
+    },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    },
+    "array-flatten": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
+      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ=="
+    },
+    "array-includes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.2.tgz",
+      "integrity": "sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1",
+        "get-intrinsic": "1.0.2",
+        "is-string": "1.0.5"
+      }
+    },
+    "array-indexofobject": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/array-indexofobject/-/array-indexofobject-0.0.1.tgz",
+      "integrity": "sha1-qqEo5iybPDWAlFaMIZ/2T+SJ1Co="
+    },
+    "array-slice": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
+      "integrity": "sha1-3Tz7gO15c6dRF82sabC5nshhhvU=",
+      "dev": true
+    },
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "requires": {
+        "array-uniq": "1.0.3"
+      }
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "array-unique": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM="
+    },
+    "array.prototype.every": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.every/-/array.prototype.every-1.1.1.tgz",
+      "integrity": "sha512-Tk43f/eIzduQl0hZ0SirI2jJvJliPlu5JJozCsDvgUDSw71MdcyE/d94bR/4ipXg/YIcdGlQMWBVmIQ0J5BfHA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1",
+        "is-string": "1.0.5"
+      }
+    },
+    "array.prototype.some": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.some/-/array.prototype.some-1.1.2.tgz",
+      "integrity": "sha512-BRwD7WB6Pp6407/shC3EkprSDSNhfZPRf30b2LANeLh04EfbuI20oqcHGc8fTdSHQQVf0AZN76a6wg6UPg1Tpg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1",
+        "is-string": "1.0.5"
+      }
+    },
+    "arraybuffer.slice": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
+      "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+    },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+    },
+    "ascli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ascli/-/ascli-1.0.1.tgz",
+      "integrity": "sha1-vPpZdKYvGOgcq660lzKrSoj5Brw=",
+      "requires": {
+        "colour": "0.7.1",
+        "optjs": "3.2.2"
+      }
+    },
+    "asn1": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
+      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
+      "requires": {
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "inherits": "2.0.4",
+        "minimalistic-assert": "1.0.1",
+        "safer-buffer": "2.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "requires": {
+        "object-assign": "4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assert-never": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/assert-never/-/assert-never-1.2.1.tgz",
+      "integrity": "sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw=="
+    },
+    "assert-plus": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ="
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    },
+    "async": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "requires": {
+        "lodash": "4.17.20"
+      }
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ=="
+    },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=",
+      "optional": true
+    },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+    },
+    "async.ensureasync": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.ensureasync/-/async.ensureasync-0.5.2.tgz",
+      "integrity": "sha1-w8fkpOmzHZaHXVa4UEWYRG4eMF0=",
+      "requires": {
+        "async.util.ensureasync": "0.5.2"
+      }
+    },
+    "async.queue": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.queue/-/async.queue-0.5.2.tgz",
+      "integrity": "sha1-jV2QgS4UgQZrwJBOjMFxKxfDvXw=",
+      "requires": {
+        "async.util.queue": "0.5.2"
+      }
+    },
+    "async.util.arrayeach": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.arrayeach/-/async.util.arrayeach-0.5.2.tgz",
+      "integrity": "sha1-WMTpgCjVXWm/sFrrOvROClVagpw="
+    },
+    "async.util.ensureasync": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.ensureasync/-/async.util.ensureasync-0.5.2.tgz",
+      "integrity": "sha1-EJB/LL0GegYfma5tIuCM7TDbDWg=",
+      "requires": {
+        "async.util.restparam": "0.5.2",
+        "async.util.setimmediate": "0.5.2"
+      }
+    },
+    "async.util.isarray": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.isarray/-/async.util.isarray-0.5.2.tgz",
+      "integrity": "sha1-5i2sjyY29lh13PdSHC0k0N+yu98="
+    },
+    "async.util.map": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.map/-/async.util.map-0.5.2.tgz",
+      "integrity": "sha1-5YjvhuCzq18CfZevTWg10FXKadY="
+    },
+    "async.util.noop": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.noop/-/async.util.noop-0.5.2.tgz",
+      "integrity": "sha1-vdYrl8sKo/YLWGrRSEaGmJdeWLk="
+    },
+    "async.util.onlyonce": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.onlyonce/-/async.util.onlyonce-0.5.2.tgz",
+      "integrity": "sha1-uOb8AErckjFk154y8oE+5GXCT/I="
+    },
+    "async.util.queue": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.queue/-/async.util.queue-0.5.2.tgz",
+      "integrity": "sha1-V/Zavho83yc9MavSirlUJfgiLuU=",
+      "requires": {
+        "async.util.arrayeach": "0.5.2",
+        "async.util.isarray": "0.5.2",
+        "async.util.map": "0.5.2",
+        "async.util.noop": "0.5.2",
+        "async.util.onlyonce": "0.5.2",
+        "async.util.setimmediate": "0.5.2"
+      }
+    },
+    "async.util.restparam": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.restparam/-/async.util.restparam-0.5.2.tgz",
+      "integrity": "sha1-A+/r88Ane5ciDlJaunUPXgT8gM0="
+    },
+    "async.util.setimmediate": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/async.util.setimmediate/-/async.util.setimmediate-0.5.2.tgz",
+      "integrity": "sha1-KBLrq/KlgCd1jUvHeT0cz68QJV8="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "atoa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
+      "integrity": "sha1-DMDpGkgOc4+SPrwQNnZHF3mzSkk="
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
+    "autoprefixer": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
+      "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
+      "requires": {
+        "browserslist": "2.11.3",
+        "caniuse-lite": "1.0.30001171",
+        "normalize-range": "0.1.2",
+        "num2fraction": "1.2.2",
+        "postcss": "6.0.23",
+        "postcss-value-parser": "3.3.1"
+      }
+    },
+    "aws-sign2": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
+    },
+    "aws4": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
+      "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
+    },
+    "babel-code-frame": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
+      "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
+      "requires": {
+        "chalk": "1.1.3",
+        "esutils": "2.0.3",
+        "js-tokens": "3.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "babel-generator": {
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
+      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
+      "requires": {
+        "babel-messages": "6.23.0",
+        "babel-runtime": "6.26.0",
+        "babel-types": "6.26.0",
+        "detect-indent": "4.0.0",
+        "jsesc": "1.3.0",
+        "lodash": "4.17.20",
+        "source-map": "0.5.7",
+        "trim-right": "1.0.1"
+      }
+    },
+    "babel-messages": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz",
+      "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dev": true,
+      "requires": {
+        "object.assign": "4.1.2"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "2.4.1",
+        "regenerator-runtime": "0.11.1"
+      }
+    },
+    "babel-template": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz",
+      "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "babel-traverse": "6.26.0",
+        "babel-types": "6.26.0",
+        "babylon": "6.18.0",
+        "lodash": "4.17.20"
+      }
+    },
+    "babel-traverse": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz",
+      "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=",
+      "requires": {
+        "babel-code-frame": "6.26.0",
+        "babel-messages": "6.23.0",
+        "babel-runtime": "6.26.0",
+        "babel-types": "6.26.0",
+        "babylon": "6.18.0",
+        "debug": "2.6.9",
+        "globals": "9.18.0",
+        "invariant": "2.2.4",
+        "lodash": "4.17.20"
+      }
+    },
+    "babel-types": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz",
+      "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "esutils": "2.0.3",
+        "lodash": "4.17.20",
+        "to-fast-properties": "1.0.3"
+      }
+    },
+    "babel-walk": {
+      "version": "3.0.0-canary-5",
+      "resolved": "https://registry.npmjs.org/babel-walk/-/babel-walk-3.0.0-canary-5.tgz",
+      "integrity": "sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==",
+      "requires": {
+        "@babel/types": "7.12.12"
+      }
+    },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+    },
+    "babylon-walk": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/babylon-walk/-/babylon-walk-1.0.2.tgz",
+      "integrity": "sha1-OxWl3btIKni0zpwByLoYFwLZ1s4=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "babel-types": "6.26.0",
+        "lodash.clone": "4.5.0"
+      }
+    },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "requires": {
+        "cache-base": "1.0.1",
+        "class-utils": "0.3.6",
+        "component-emitter": "1.3.0",
+        "define-property": "1.0.0",
+        "isobject": "3.0.1",
+        "mixin-deep": "1.3.2",
+        "pascalcase": "0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "base64-arraybuffer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz",
+      "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg="
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "base64id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/base64id/-/base64id-1.0.0.tgz",
+      "integrity": "sha1-R2iMuZu2gE8OBtPnY7HDLlfY5rY="
+    },
+    "basic-auth": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
+      "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
+    },
+    "bcrypt": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-1.0.3.tgz",
+      "integrity": "sha512-pRyDdo73C8Nim3jwFJ7DWe3TZCgwDfWZ6nHS5LSdU77kWbj1frruvdndP02AOavtD4y8v6Fp2dolbHgp4SDrfg==",
+      "optional": true,
+      "requires": {
+        "nan": "2.6.2",
+        "node-pre-gyp": "0.6.36"
+      },
+      "dependencies": {
+        "nan": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
+          "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.36",
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.36.tgz",
+          "integrity": "sha1-22BBEst04NR3VU6bUFsXq936t4Y=",
+          "optional": true,
+          "requires": {
+            "mkdirp": "0.5.5",
+            "nopt": "4.0.3",
+            "npmlog": "4.1.2",
+            "rc": "1.2.8",
+            "request": "2.81.0",
+            "rimraf": "2.7.1",
+            "semver": "5.7.1",
+            "tar": "2.2.2",
+            "tar-pack": "3.4.1"
+          }
+        }
+      }
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
+      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
+      "requires": {
+        "tweetnacl": "0.14.5"
+      }
+    },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms="
+    },
+    "better-assert": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
+      "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=",
+      "requires": {
+        "callsite": "1.0.0"
+      }
+    },
+    "bi-directional-map": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/bi-directional-map/-/bi-directional-map-1.0.0.tgz",
+      "integrity": "sha1-uQDLjn2khKsQwYYIpxSBp6daniY="
+    },
+    "big.js": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+    },
+    "bignumber.js": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.1.tgz",
+      "integrity": "sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA=="
+    },
+    "binary": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/binary/-/binary-0.3.0.tgz",
+      "integrity": "sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=",
+      "requires": {
+        "buffers": "0.1.1",
+        "chainsaw": "0.1.0"
+      }
+    },
+    "binary-extensions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw=="
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "requires": {
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "blob": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz",
+      "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig=="
+    },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "2.0.4"
+      }
+    },
+    "blocking-proxy": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/blocking-proxy/-/blocking-proxy-0.0.5.tgz",
+      "integrity": "sha1-RikF4Nz76pcPQao3Ij3anAexkSs=",
+      "dev": true,
+      "requires": {
+        "minimist": "1.2.5"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "bn.js": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.1.3.tgz",
+      "integrity": "sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ=="
+    },
+    "body": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/body/-/body-5.1.0.tgz",
+      "integrity": "sha1-5LoM5BCkaTYyM2dgnstOZVMSUGk=",
+      "dev": true,
+      "requires": {
+        "continuable-cache": "0.3.1",
+        "error": "7.2.1",
+        "raw-body": "1.1.7",
+        "safe-json-parse": "1.0.1"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-1.0.0.tgz",
+          "integrity": "sha1-NWnt6Lo0MV+rmcPpLLBMciDeH6g=",
+          "dev": true
+        },
+        "raw-body": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-1.1.7.tgz",
+          "integrity": "sha1-HQJ8K/oRasxmI7yo8AAWVyqH1CU=",
+          "dev": true,
+          "requires": {
+            "bytes": "1.0.0",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "1.0.4",
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "1.6.18"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+        }
+      }
+    },
+    "bonjour": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
+      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
+      "requires": {
+        "array-flatten": "2.1.2",
+        "deep-equal": "1.1.1",
+        "dns-equal": "1.0.0",
+        "dns-txt": "2.0.2",
+        "multicast-dns": "6.2.3",
+        "multicast-dns-service-types": "1.1.0"
+      }
+    },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
+    },
+    "boom": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "bootstrap": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
+      "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ=="
+    },
+    "bootstrap-datepicker": {
+      "version": "1.7.0-RC1",
+      "resolved": "https://registry.npmjs.org/bootstrap-datepicker/-/bootstrap-datepicker-1.7.0-RC1.tgz",
+      "integrity": "sha1-BziNjl6Kxtq2EFLNl0sVPpJcDrk=",
+      "requires": {
+        "jquery": "3.5.1"
+      }
+    },
+    "bootstrap-timepicker": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-timepicker/-/bootstrap-timepicker-0.5.2.tgz",
+      "integrity": "sha1-EO2fKi8LjMrvzeD89qBzi5GaODU="
+    },
+    "bottleneck": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-1.16.0.tgz",
+      "integrity": "sha1-1s4TgIUnr8gLaQkvFWBmVeWyHxo="
+    },
+    "bowser": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.9.0.tgz",
+      "integrity": "sha512-2ld76tuLBNFekRgmJfT2+3j5MIrP6bFict8WAIT3beq+srz1gcKNAdNKMqHqauQt63NmAa88HfP1/Ypa9Er3HA=="
+    },
+    "boxen": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
+      "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==",
+      "requires": {
+        "ansi-align": "2.0.0",
+        "camelcase": "4.1.0",
+        "chalk": "2.2.2",
+        "cli-boxes": "1.0.0",
+        "string-width": "2.1.1",
+        "term-size": "1.2.0",
+        "widest-line": "2.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "camelcase": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+          "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        }
+      }
+    },
+    "brace": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/brace/-/brace-0.11.1.tgz",
+      "integrity": "sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+      "requires": {
+        "expand-range": "1.8.2",
+        "preserve": "0.2.0",
+        "repeat-element": "1.1.3"
+      }
+    },
+    "brfs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/brfs/-/brfs-1.6.1.tgz",
+      "integrity": "sha512-OfZpABRQQf+Xsmju8XE9bDjs+uU4vLREGolP7bDgcpsI17QREyZ4Bl+2KLxxx1kCgA0fAIhKQBaBYh+PEcCqYQ==",
+      "dev": true,
+      "requires": {
+        "quote-stream": "1.0.2",
+        "resolve": "1.19.0",
+        "static-module": "2.2.5",
+        "through2": "2.0.5"
+      }
+    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+    },
+    "browser-process-hrtime": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
+      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
+      "dev": true
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "requires": {
+        "buffer-xor": "1.0.3",
+        "cipher-base": "1.0.4",
+        "create-hash": "1.2.0",
+        "evp_bytestokey": "1.0.3",
+        "inherits": "2.0.4",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "requires": {
+        "browserify-aes": "1.2.0",
+        "browserify-des": "1.0.2",
+        "evp_bytestokey": "1.0.3"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "requires": {
+        "cipher-base": "1.0.4",
+        "des.js": "1.0.1",
+        "inherits": "2.0.4",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "requires": {
+        "bn.js": "5.1.3",
+        "randombytes": "2.1.0"
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "requires": {
+        "bn.js": "5.1.3",
+        "browserify-rsa": "4.1.0",
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
+        "elliptic": "6.5.3",
+        "inherits": "2.0.4",
+        "parse-asn1": "5.1.6",
+        "readable-stream": "3.6.0",
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "requires": {
+        "pako": "1.0.11"
+      }
+    },
+    "browserslist": {
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+      "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
+      "requires": {
+        "caniuse-lite": "1.0.30001171",
+        "electron-to-chromium": "1.3.633"
+      }
+    },
+    "bson": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/bson/-/bson-1.0.9.tgz",
+      "integrity": "sha512-IQX9/h7WdMBIW/q/++tGd+emQr0XMdeZ6icnT/74Xk9fnabWn+gZgpE+9V+gujL3hhJOoNrnDVY7tWdzc7NUTg=="
+    },
+    "buffer": {
+      "version": "4.9.2",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "requires": {
+        "base64-js": "1.5.1",
+        "ieee754": "1.2.1",
+        "isarray": "1.0.0"
+      }
+    },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "1.1.0",
+        "buffer-fill": "1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI="
+    },
+    "buffer-equal": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
+      "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=",
+      "dev": true
+    },
+    "buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "buffer-indexof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
+      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g=="
+    },
+    "buffer-shims": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
+      "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E="
+    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+    },
+    "bufferjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bufferjs/-/bufferjs-1.1.0.tgz",
+      "integrity": "sha1-CV/6OcXmtAoheKEWnJ7/xYSnMgE=",
+      "optional": true
+    },
+    "buffermaker": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/buffermaker/-/buffermaker-1.2.1.tgz",
+      "integrity": "sha512-IdnyU2jDHU65U63JuVQNTHiWjPRH0CS3aYd/WPaEwyX84rFdukhOduAVb1jwUScmb5X0JWPw8NZOrhoLMiyAHQ==",
+      "requires": {
+        "long": "1.1.2"
+      },
+      "dependencies": {
+        "long": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/long/-/long-1.1.2.tgz",
+          "integrity": "sha1-6u9ZUcp1UdlpJrgtokLbnWso+1M="
+        }
+      }
+    },
+    "buffers": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/buffers/-/buffers-0.1.1.tgz",
+      "integrity": "sha1-skV5w77U1tOWru5tmorn9Ugqt7s="
+    },
+    "buildmail": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/buildmail/-/buildmail-2.0.0.tgz",
+      "integrity": "sha1-8LewpZ6aShtQZrv6BR0kjzgy7s4=",
+      "requires": {
+        "addressparser": "0.3.2",
+        "libbase64": "0.1.0",
+        "libmime": "1.2.0",
+        "libqp": "1.1.0",
+        "needle": "0.10.0"
+      },
+      "dependencies": {
+        "needle": {
+          "version": "0.10.0",
+          "resolved": "https://registry.npmjs.org/needle/-/needle-0.10.0.tgz",
+          "integrity": "sha1-FqJNY/KmEVLrdMzh0Sr4XFB1d9Q=",
+          "requires": {
+            "debug": "2.6.9",
+            "iconv-lite": "0.4.24"
+          }
+        }
+      }
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+    },
+    "bun": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/bun/-/bun-0.0.12.tgz",
+      "integrity": "sha512-Toms18J9DqnT+IfWkwxVTB2EaBprHvjlMWrTIsfX4xbu3ZBqVBwrERU0em1IgtRe04wT+wJxMlKHZok24hrcSQ==",
+      "optional": true,
+      "requires": {
+        "readable-stream": "1.0.34"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "optional": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "optional": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "optional": true
+        }
+      }
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.14"
+      },
+      "dependencies": {
+        "dicer": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+          "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+          "requires": {
+            "readable-stream": "1.1.14",
+            "streamsearch": "0.1.2"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "bytebuffer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/bytebuffer/-/bytebuffer-5.0.1.tgz",
+      "integrity": "sha1-WC7qSxqHO20CCkjVjfhfC7ps/d0=",
+      "requires": {
+        "long": "3.2.0"
+      },
+      "dependencies": {
+        "long": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz",
+          "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s="
+        }
+      }
+    },
+    "bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+    },
+    "cacache": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
+      "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
+      "requires": {
+        "bluebird": "3.7.2",
+        "chownr": "1.1.4",
+        "glob": "7.1.6",
+        "graceful-fs": "4.2.4",
+        "lru-cache": "4.1.5",
+        "mississippi": "2.0.0",
+        "mkdirp": "0.5.5",
+        "move-concurrently": "1.0.1",
+        "promise-inflight": "1.0.1",
+        "rimraf": "2.7.1",
+        "ssri": "5.3.0",
+        "unique-filename": "1.1.1",
+        "y18n": "4.0.1"
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "requires": {
+        "collection-visit": "1.0.0",
+        "component-emitter": "1.3.0",
+        "get-value": "2.0.6",
+        "has-value": "1.0.0",
+        "isobject": "3.0.1",
+        "set-value": "2.0.1",
+        "to-object-path": "0.3.0",
+        "union-value": "1.0.1",
+        "unset-value": "1.0.0"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "cache-loader": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/cache-loader/-/cache-loader-1.2.5.tgz",
+      "integrity": "sha512-enWKEQ4kO3YreDFd7AtVRjtJBmNiqh/X9hVDReu0C4qm8gsGmySkwuWtdc+N5O+vq5FzxL1mIZc30NyXCB7o/Q==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "mkdirp": "0.5.5",
+        "neo-async": "2.6.2",
+        "schema-utils": "0.4.7"
+      }
+    },
+    "call-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.0.tgz",
+      "integrity": "sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==",
+      "requires": {
+        "function-bind": "1.1.1",
+        "get-intrinsic": "1.0.2"
+      }
+    },
+    "call-me-maybe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.1.tgz",
+      "integrity": "sha1-JtII6onje1y95gJQoV8DHBak1ms="
+    },
+    "callback-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/callback-stream/-/callback-stream-1.1.0.tgz",
+      "integrity": "sha1-RwGlEmbwbgbqpx/BcjOCLYdfSQg=",
+      "requires": {
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "caller-callsite": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
+      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "requires": {
+        "callsites": "2.0.0"
+      }
+    },
+    "caller-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
+      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "requires": {
+        "caller-callsite": "2.0.0"
+      }
+    },
+    "callsite": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA="
+    },
+    "callsites": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+    },
+    "camel-case": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "requires": {
+        "no-case": "2.3.2",
+        "upper-case": "1.1.3"
+      }
+    },
+    "camelcase": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+    },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "requires": {
+        "camelcase": "2.1.1",
+        "map-obj": "1.0.1"
+      }
+    },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
+    "caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "caniuse-lite": "1.0.30001171",
+        "lodash.memoize": "4.1.2",
+        "lodash.uniq": "4.5.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        }
+      }
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001171",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001171.tgz",
+      "integrity": "sha512-5Alrh8TTYPG9IH4UkRqEBZoEToWRLvPbSQokvzSz0lii8/FOWKG4keO1HoYfPWs8IF/NH/dyNPg1cmJGvV3Zlg=="
+    },
+    "capture-stack-trace": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz",
+      "integrity": "sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw=="
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
+    },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+      "requires": {
+        "align-text": "0.1.4",
+        "lazy-cache": "1.0.4"
+      }
+    },
+    "cfb": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.0.tgz",
+      "integrity": "sha512-sXMvHsKCICVR3Naq+J556K+ExBo9n50iKl6LGarlnvuA2035uMlGA/qVrc0wQtow5P1vJEw9UyrKLCbtIKz+TQ==",
+      "requires": {
+        "adler-32": "1.2.0",
+        "crc-32": "1.2.0",
+        "printj": "1.1.2"
+      }
+    },
+    "chainsaw": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.1.0.tgz",
+      "integrity": "sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=",
+      "requires": {
+        "traverse": "0.3.9"
+      },
+      "dependencies": {
+        "traverse": {
+          "version": "0.3.9",
+          "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
+          "integrity": "sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk="
+        }
+      }
+    },
+    "chalk": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.2.2.tgz",
+      "integrity": "sha512-LvixLAQ4MYhbf7hgL4o5PeK32gJKvVzDRiSNIApDofQvyhl8adgG2lJVXn4+ekQoK7HL9RF8lqxwerpe0x2pCw==",
+      "requires": {
+        "ansi-styles": "3.2.1",
+        "escape-string-regexp": "1.0.5",
+        "supports-color": "4.5.0"
+      }
+    },
+    "character-parser": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
+      "integrity": "sha1-x84o821LzZdE5f/CxfzeHHMmH8A=",
+      "requires": {
+        "is-regex": "1.1.1"
+      }
+    },
+    "chart": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/chart/-/chart-0.1.2.tgz",
+      "integrity": "sha1-adnpFsJqi+2Fsp34Asdjq1KX0xg=",
+      "requires": {
+        "hashish": "0.0.4",
+        "hat": "0.0.3",
+        "mrcolor": "https://github.com/rook2pawn/mrcolor/archive/master.tar.gz"
+      }
+    },
+    "chart.js": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.6.0.tgz",
+      "integrity": "sha1-MI+aSwv+1aFUwU9d6x2UcNIqvnE=",
+      "requires": {
+        "chartjs-color": "2.4.1",
+        "moment": "2.29.1"
+      }
+    },
+    "chartjs-color": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+      "requires": {
+        "chartjs-color-string": "0.6.0",
+        "color-convert": "1.9.3"
+      }
+    },
+    "chartjs-color-string": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+      "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "check-types": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-1.3.2.tgz",
+      "integrity": "sha1-zHO3+wW7cBX8IX7ee4HfHZ+hGWI="
+    },
+    "cheerio": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-0.22.0.tgz",
+      "integrity": "sha1-qbqoYKP5tZWmuBsahocxIe06Jp4=",
+      "requires": {
+        "css-select": "1.2.0",
+        "dom-serializer": "0.1.1",
+        "entities": "1.1.2",
+        "htmlparser2": "3.10.1",
+        "lodash.assignin": "4.2.0",
+        "lodash.bind": "4.2.1",
+        "lodash.defaults": "4.2.0",
+        "lodash.filter": "4.6.0",
+        "lodash.flatten": "4.4.0",
+        "lodash.foreach": "4.5.0",
+        "lodash.map": "4.6.0",
+        "lodash.merge": "4.6.2",
+        "lodash.pick": "4.4.0",
+        "lodash.reduce": "4.6.0",
+        "lodash.reject": "4.6.0",
+        "lodash.some": "4.6.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "requires": {
+            "domelementtype": "1.3.1",
+            "entities": "1.1.2"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        }
+      }
+    },
+    "chokidar": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
+      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+      "requires": {
+        "anymatch": "1.3.2",
+        "async-each": "1.0.3",
+        "glob-parent": "2.0.0",
+        "inherits": "2.0.4",
+        "is-binary-path": "1.0.1",
+        "is-glob": "2.0.1",
+        "path-is-absolute": "1.0.1",
+        "readdirp": "2.2.1"
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
+    "ci-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz",
+      "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A=="
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "requires": {
+        "inherits": "2.0.4",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "circular-dependency-plugin": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-4.4.0.tgz",
+      "integrity": "sha512-yEFtUNUYT4jBykEX5ZOHw+5goA3glGZr9wAXIQqoyakjz5H5TeUmScnWRc52douAhb9eYzK3s7V6bXfNnjFdzg=="
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "requires": {
+        "arr-union": "3.1.0",
+        "define-property": "0.2.5",
+        "isobject": "3.0.1",
+        "static-extend": "0.1.2"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "0.1.6"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "clean-css": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
+      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
+      "requires": {
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "cli-boxes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
+      "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM="
+    },
+    "cli-cursor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
+      "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
+      "requires": {
+        "restore-cursor": "1.0.1"
+      }
+    },
+    "cli-spinners": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-1.3.1.tgz",
+      "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
+      "dev": true
+    },
+    "cli-truncate": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-1.1.0.tgz",
+      "integrity": "sha512-bAtZo0u82gCfaAGfSNxUdTI9mNyza7D8w4CVCcaOsy7sgwDzvx6ekr6cuWJqY3UGzgnQ1+4wgENup5eIhgxEYA==",
+      "requires": {
+        "slice-ansi": "1.0.0",
+        "string-width": "2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        }
+      }
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "optional": true,
+      "requires": {
+        "string-width": "3.1.0",
+        "strip-ansi": "5.2.0",
+        "wrap-ansi": "5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "optional": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "optional": true,
+          "requires": {
+            "emoji-regex": "7.0.3",
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "5.2.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "4.1.0"
+          }
+        }
+      }
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+    },
+    "clone-deep": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-2.0.2.tgz",
+      "integrity": "sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==",
+      "requires": {
+        "for-own": "1.0.0",
+        "is-plain-object": "2.0.4",
+        "kind-of": "6.0.3",
+        "shallow-clone": "1.0.0"
+      },
+      "dependencies": {
+        "for-own": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+          "integrity": "sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=",
+          "requires": {
+            "for-in": "1.0.2"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+    },
+    "coa": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
+      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
+      "dev": true,
+      "requires": {
+        "@types/q": "1.5.4",
+        "chalk": "2.4.2",
+        "q": "1.5.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
+    },
+    "codelyzer": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-3.1.2.tgz",
+      "integrity": "sha1-n/HwQfubXuXb60W6hm368EmDrwQ=",
+      "dev": true,
+      "requires": {
+        "app-root-path": "2.2.1",
+        "css-selector-tokenizer": "0.7.3",
+        "cssauron": "1.4.0",
+        "semver-dsl": "1.0.1",
+        "source-map": "0.5.7",
+        "sprintf-js": "1.0.3"
+      }
+    },
+    "codepage": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
+      "integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
+      "requires": {
+        "commander": "2.14.1",
+        "exit-on-epipe": "1.0.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.14.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+          "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
+        }
+      }
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "requires": {
+        "map-visit": "1.0.0",
+        "object-visit": "1.0.1"
+      }
+    },
+    "color": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.0.0.tgz",
+      "integrity": "sha512-jCpd5+s0s0t7p3pHQKpnJ0TpQKKdleP71LWcA0aqiljpiuAkOSUFN/dyH8ZwF0hRmFlrIuRhufds1QyEP9EB+w==",
+      "requires": {
+        "color-convert": "1.9.3",
+        "color-string": "1.5.4"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "color-string": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz",
+      "integrity": "sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==",
+      "requires": {
+        "color-name": "1.1.3",
+        "simple-swizzle": "0.2.2"
+      }
+    },
+    "colorette": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
+      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
+      "dev": true
+    },
+    "colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
+      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
+    },
+    "colorspace": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/colorspace/-/colorspace-1.1.2.tgz",
+      "integrity": "sha512-vt+OoIP2d76xLhjwbBaucYlNSpPsrJWPlBTtwCpQKIu6/CSMutyzX93O/Do0qzpH3YoHEes8YEFXyZ797rEhzQ==",
+      "requires": {
+        "color": "3.0.0",
+        "text-hex": "1.0.0"
+      }
+    },
+    "colour": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/colour/-/colour-0.7.1.tgz",
+      "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g="
+    },
+    "columnify": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.4.tgz",
+      "integrity": "sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=",
+      "requires": {
+        "strip-ansi": "3.0.1",
+        "wcwidth": "1.0.1"
+      }
+    },
+    "combine-lists": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/combine-lists/-/combine-lists-1.0.1.tgz",
+      "integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.20"
+      }
+    },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "1.0.0"
+      }
+    },
+    "command-exists": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.9.tgz",
+      "integrity": "sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.17.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
+      "integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
+    },
+    "commist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/commist/-/commist-1.1.0.tgz",
+      "integrity": "sha512-rraC8NXWOEjhADbZe9QBNzLAN5Q3fsTPQtBV+fEVj6xKIgDgNiEVE6ZNfHpZOqfQ21YUzfVNUXLOEZquYvQPPg==",
+      "requires": {
+        "leven": "2.1.0",
+        "minimist": "1.2.5"
+      }
+    },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "component-bind": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
+      "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E="
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "component-inherit": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz",
+      "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM="
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "requires": {
+        "accepts": "1.3.7",
+        "bytes": "3.0.0",
+        "compressible": "2.0.18",
+        "debug": "2.6.9",
+        "on-headers": "1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "1.1.2"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "1.1.1",
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7",
+        "typedarray": "0.0.6"
+      }
+    },
+    "configstore": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-4.0.0.tgz",
+      "integrity": "sha512-CmquAXFBocrzaSM8mtGPMM/HiWmyIpr4CcJl/rgY2uCObZ/S7cKU0silxslqJejl+t/T9HS8E0PUNQD81JGUEQ==",
+      "optional": true,
+      "requires": {
+        "dot-prop": "4.2.1",
+        "graceful-fs": "4.2.4",
+        "make-dir": "1.3.0",
+        "unique-string": "1.0.0",
+        "write-file-atomic": "2.4.3",
+        "xdg-basedir": "3.0.0"
+      }
+    },
+    "connect": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.7.0.tgz",
+      "integrity": "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.9",
+        "finalhandler": "1.1.2",
+        "parseurl": "1.3.3",
+        "utils-merge": "1.0.1"
+      }
+    },
+    "connect-history-api-fallback": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
+      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg=="
+    },
+    "connect-redis": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/connect-redis/-/connect-redis-3.4.2.tgz",
+      "integrity": "sha512-ozA1Z0GDnsCJECfNyNJOqPuW3Fk43fUbKC65Sa/V9hkCBNtXsFU2xtTOVsQGUsflpywuJMgGOV4xrnKzIPFqvA==",
+      "requires": {
+        "debug": "4.3.1",
+        "redis": "2.8.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "connection-parse": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/connection-parse/-/connection-parse-0.0.7.tgz",
+      "integrity": "sha1-GOcxiqsGppkmc3KxDFIm0locmmk=",
+      "dev": true
+    },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
+    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
+    "constantinople": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
+      "integrity": "sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==",
+      "requires": {
+        "@babel/parser": "7.12.11",
+        "@babel/types": "7.12.12"
+      }
+    },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-security-policy-builder": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-security-policy-builder/-/content-security-policy-builder-2.1.0.tgz",
+      "integrity": "sha512-/MtLWhJVvJNkA9dVLAp6fg9LxD2gfI6R2Fi1hPmfjYXSahJJzcfvoeDOxSyp4NvxMuwWv3WMssE9o31DoULHrQ=="
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "continuable-cache": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/continuable-cache/-/continuable-cache-0.3.1.tgz",
+      "integrity": "sha1-vXJ6f67XfnH/OYWskzUakSczrQ8=",
+      "dev": true
+    },
+    "contra": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
+      "integrity": "sha1-9TveQtfltZhcrk2ZqNYQUm3o8o0=",
+      "requires": {
+        "atoa": "1.0.0",
+        "ticky": "1.0.1"
+      }
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-parser": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/cookie-parser/-/cookie-parser-1.4.3.tgz",
+      "integrity": "sha1-D+MfoZ0AC5X0qt8fU/3CuKIDuqU=",
+      "requires": {
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        }
+      }
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "cookies": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.8.0.tgz",
+      "integrity": "sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==",
+      "requires": {
+        "depd": "2.0.0",
+        "keygrip": "1.1.0"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        }
+      }
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "requires": {
+        "aproba": "1.2.0",
+        "fs-write-stream-atomic": "1.0.10",
+        "iferr": "0.1.5",
+        "mkdirp": "0.5.5",
+        "rimraf": "2.7.1",
+        "run-queue": "1.0.3"
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+    },
+    "copy-webpack-plugin": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-4.4.3.tgz",
+      "integrity": "sha512-v4THQ24Tks2NkyOvZuFDgZVfDD9YaA9rwYLZTrWg2GHIA8lrH5DboEyeoorh5Skki+PUbgSmnsCwhMWqYrQZrA==",
+      "requires": {
+        "cacache": "10.0.4",
+        "find-cache-dir": "1.0.0",
+        "globby": "7.1.1",
+        "is-glob": "4.0.1",
+        "loader-utils": "1.1.0",
+        "minimatch": "3.0.4",
+        "p-limit": "1.3.0",
+        "serialize-javascript": "1.9.1"
+      },
+      "dependencies": {
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        }
+      }
+    },
+    "core-js": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
+      "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4="
+    },
+    "core-js-compat": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.8.1.tgz",
+      "integrity": "sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+          "dev": true
+        }
+      }
+    },
+    "core-object": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/core-object/-/core-object-3.1.5.tgz",
+      "integrity": "sha512-sA2/4+/PZ/KV6CKgjrVrrUVBKCkdDO02CUlQ0YKTQoYUwPYNOtOAcWlbYhd5v/1JqYaA6oZ4sDlOU4ppVw6Wbg==",
+      "requires": {
+        "chalk": "2.2.2"
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "cors": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.4.tgz",
+      "integrity": "sha1-K9OB8usgECAQXNUOpZ2mMJBpRoY=",
+      "requires": {
+        "object-assign": "4.1.1",
+        "vary": "1.1.2"
+      }
+    },
+    "cosmiconfig": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
+      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "requires": {
+        "import-fresh": "2.0.0",
+        "is-directory": "0.3.1",
+        "js-yaml": "3.14.1",
+        "parse-json": "4.0.0"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+          "requires": {
+            "error-ex": "1.3.2",
+            "json-parse-better-errors": "1.0.2"
+          }
+        }
+      }
+    },
+    "crc": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/crc/-/crc-3.4.4.tgz",
+      "integrity": "sha1-naHpgOO9RPxck79as9ozeNheRms="
+    },
+    "crc-32": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
+      "integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
+      "requires": {
+        "exit-on-epipe": "1.0.1",
+        "printj": "1.1.2"
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "elliptic": "6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "create-error-class": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz",
+      "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=",
+      "requires": {
+        "capture-stack-trace": "1.0.1"
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "requires": {
+        "cipher-base": "1.0.4",
+        "inherits": "2.0.4",
+        "md5.js": "1.3.5",
+        "ripemd160": "2.0.2",
+        "sha.js": "2.4.11"
+      }
+    },
+    "create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "requires": {
+        "cipher-base": "1.0.4",
+        "create-hash": "1.2.0",
+        "inherits": "2.0.4",
+        "ripemd160": "2.0.2",
+        "safe-buffer": "5.1.2",
+        "sha.js": "2.4.11"
+      }
+    },
+    "cron": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/cron/-/cron-1.2.1.tgz",
+      "integrity": "sha1-OobAm0G48mGshjp8yF6kc1hX6rI=",
+      "requires": {
+        "moment-timezone": "0.5.32"
+      }
+    },
+    "cron-parser": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-2.18.0.tgz",
+      "integrity": "sha512-s4odpheTyydAbTBQepsqd2rNWGa2iV3cyo8g7zbI2QQYGLVsfbhmwukayS1XHppe02Oy1fg7mg6xoaraVJeEcg==",
+      "requires": {
+        "is-nan": "1.3.2",
+        "moment-timezone": "0.5.32"
+      }
+    },
+    "cross-spawn": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+      "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+      "optional": true,
+      "requires": {
+        "lru-cache": "4.1.5",
+        "which": "1.3.1"
+      }
+    },
+    "crossvent": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.5.tgz",
+      "integrity": "sha1-rSCHjkkh6b5z2daXb4suzQ9xoLE=",
+      "requires": {
+        "custom-event": "1.0.1"
+      }
+    },
+    "cryptiles": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+      "requires": {
+        "boom": "2.10.1"
+      }
+    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "requires": {
+        "browserify-cipher": "1.0.1",
+        "browserify-sign": "4.2.1",
+        "create-ecdh": "4.0.4",
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
+        "diffie-hellman": "5.0.3",
+        "inherits": "2.0.4",
+        "pbkdf2": "3.1.1",
+        "public-encrypt": "4.0.3",
+        "randombytes": "2.1.0",
+        "randomfill": "1.0.4"
+      }
+    },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha1-/aGedh/Ad+Af+/3G6f38WeiAbNg="
+    },
+    "crypto-random-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
+      "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
+    },
+    "csrf": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/csrf/-/csrf-3.1.0.tgz",
+      "integrity": "sha512-uTqEnCvWRk042asU6JtapDTcJeeailFy4ydOQS28bj1hcLnYRiqi8SsD2jS412AY1I/4qdOwWZun774iqywf9w==",
+      "requires": {
+        "rndm": "1.2.0",
+        "tsscmp": "1.0.6",
+        "uid-safe": "2.1.5"
+      }
+    },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "2.0.4",
+        "source-map": "0.6.1",
+        "source-map-resolve": "0.5.3",
+        "urix": "0.1.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "css-color-names": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
+      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
+      "dev": true
+    },
+    "css-declaration-sorter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz",
+      "integrity": "sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35",
+        "timsort": "0.3.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "css-modules-loader-core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz",
+      "integrity": "sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.1",
+        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-local-by-default": "1.2.0",
+        "postcss-modules-scope": "1.1.0",
+        "postcss-modules-values": "1.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+              "dev": true
+            }
+          }
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.1.tgz",
+          "integrity": "sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "source-map": "0.5.7",
+            "supports-color": "3.2.3"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
+    "css-parse": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz",
+      "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=",
+      "requires": {
+        "css": "2.2.4"
+      }
+    },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "requires": {
+        "boolbase": "1.0.0",
+        "css-what": "2.1.3",
+        "domutils": "1.5.1",
+        "nth-check": "1.0.2"
+      }
+    },
+    "css-select-base-adapter": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
+      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
+      "dev": true
+    },
+    "css-selector-tokenizer": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz",
+      "integrity": "sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "3.0.0",
+        "fastparse": "1.1.2"
+      }
+    },
+    "css-stringify": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/css-stringify/-/css-stringify-1.0.5.tgz",
+      "integrity": "sha1-sNBClG2ylTu50pKQCmy19tASIDE=",
+      "dev": true
+    },
+    "css-tree": {
+      "version": "1.0.0-alpha.37",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
+      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.4",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "css-what": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
+      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg=="
+    },
+    "cssauron": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/cssauron/-/cssauron-1.4.0.tgz",
+      "integrity": "sha1-pmAt/34EqDBtwNuaVR6S6LVmKtg=",
+      "dev": true,
+      "requires": {
+        "through": "2.3.8"
+      }
+    },
+    "csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs=",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
+    "cssnano": {
+      "version": "4.1.10",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.10.tgz",
+      "integrity": "sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==",
+      "dev": true,
+      "requires": {
+        "cosmiconfig": "5.2.1",
+        "cssnano-preset-default": "4.0.7",
+        "is-resolvable": "1.1.0",
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "cssnano-preset-default": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz",
+      "integrity": "sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==",
+      "dev": true,
+      "requires": {
+        "css-declaration-sorter": "4.0.1",
+        "cssnano-util-raw-cache": "4.0.1",
+        "postcss": "7.0.35",
+        "postcss-calc": "7.0.5",
+        "postcss-colormin": "4.0.3",
+        "postcss-convert-values": "4.0.1",
+        "postcss-discard-comments": "4.0.2",
+        "postcss-discard-duplicates": "4.0.2",
+        "postcss-discard-empty": "4.0.1",
+        "postcss-discard-overridden": "4.0.1",
+        "postcss-merge-longhand": "4.0.11",
+        "postcss-merge-rules": "4.0.3",
+        "postcss-minify-font-values": "4.0.2",
+        "postcss-minify-gradients": "4.0.2",
+        "postcss-minify-params": "4.0.2",
+        "postcss-minify-selectors": "4.0.2",
+        "postcss-normalize-charset": "4.0.1",
+        "postcss-normalize-display-values": "4.0.2",
+        "postcss-normalize-positions": "4.0.2",
+        "postcss-normalize-repeat-style": "4.0.2",
+        "postcss-normalize-string": "4.0.2",
+        "postcss-normalize-timing-functions": "4.0.2",
+        "postcss-normalize-unicode": "4.0.1",
+        "postcss-normalize-url": "4.0.1",
+        "postcss-normalize-whitespace": "4.0.2",
+        "postcss-ordered-values": "4.1.2",
+        "postcss-reduce-initial": "4.0.3",
+        "postcss-reduce-transforms": "4.0.2",
+        "postcss-svgo": "4.0.2",
+        "postcss-unique-selectors": "4.0.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "cssnano-util-get-arguments": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz",
+      "integrity": "sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=",
+      "dev": true
+    },
+    "cssnano-util-get-match": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz",
+      "integrity": "sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=",
+      "dev": true
+    },
+    "cssnano-util-raw-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz",
+      "integrity": "sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "cssnano-util-same-parent": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz",
+      "integrity": "sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==",
+      "dev": true
+    },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "1.1.2"
+      },
+      "dependencies": {
+        "css-tree": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+          "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+          "dev": true,
+          "requires": {
+            "mdn-data": "2.0.14",
+            "source-map": "0.6.1"
+          }
+        },
+        "mdn-data": {
+          "version": "2.0.14",
+          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "cssom": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+      "dev": true
+    },
+    "cssstyle": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.4.0.tgz",
+      "integrity": "sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==",
+      "dev": true,
+      "requires": {
+        "cssom": "0.3.8"
+      }
+    },
+    "csurf": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/csurf/-/csurf-1.11.0.tgz",
+      "integrity": "sha512-UCtehyEExKTxgiu8UHdGvHj4tnpE/Qctue03Giq5gPgMQ9cg/ciod5blZQ5a4uCEenNQjxyGuzygLdKUmee/bQ==",
+      "requires": {
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "csrf": "3.1.0",
+        "http-errors": "1.7.3"
+      },
+      "dependencies": {
+        "http-errors": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+          "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+          "requires": {
+            "depd": "1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.1.1",
+            "statuses": "1.5.0",
+            "toidentifier": "1.0.0"
+          }
+        }
+      }
+    },
+    "cuint": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
+      "integrity": "sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs="
+    },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "requires": {
+        "array-find-index": "1.0.2"
+      }
+    },
+    "custom-event": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
+      "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU="
+    },
+    "cycle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
+      "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=",
+      "dev": true
+    },
+    "cyclist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
+      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+    },
+    "d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
+      "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
+      "requires": {
+        "es5-ext": "0.10.53",
+        "type": "1.2.0"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "dasherize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dasherize/-/dasherize-2.0.0.tgz",
+      "integrity": "sha1-bYCcnNDPe7iVLYD8hPoT1H3bEwg="
+    },
+    "data-urls": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
+      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
+      "dev": true,
+      "requires": {
+        "abab": "2.0.5",
+        "whatwg-mimetype": "2.3.0",
+        "whatwg-url": "7.1.0"
+      }
+    },
+    "datatables.net": {
+      "version": "1.10.23",
+      "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.23.tgz",
+      "integrity": "sha512-we3tlNkzpxvgkKKlTxTMXPCt35untVXNg8zUYWpQyC1U5vJc+lT0+Zdc1ztK8d3lh5CfdnuFde2p8n3XwaGl3Q==",
+      "requires": {
+        "jquery": "3.5.1"
+      }
+    },
+    "datatables.net-dt": {
+      "version": "1.10.23",
+      "resolved": "https://registry.npmjs.org/datatables.net-dt/-/datatables.net-dt-1.10.23.tgz",
+      "integrity": "sha512-Iky6RAKXKv/cZ4mfQRyHHGOdD1GyV9YuvGQrPCl5qqh+ENqaWphOiWVW/vqDsgDaVjvLwLfeRNMbmnf3w9sRRg==",
+      "requires": {
+        "datatables.net": "1.10.23",
+        "jquery": "3.5.1"
+      }
+    },
+    "date-and-time": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/date-and-time/-/date-and-time-0.6.3.tgz",
+      "integrity": "sha512-lcWy3AXDRJOD7MplwZMmNSRM//kZtJaLz4n6D1P5z9wEmZGBKhJRBIr1Xs9KNQJmdXPblvgffynYji4iylUTcA==",
+      "optional": true
+    },
+    "deasync": {
+      "version": "0.1.21",
+      "resolved": "https://registry.npmjs.org/deasync/-/deasync-0.1.21.tgz",
+      "integrity": "sha512-kUmM8Y+PZpMpQ+B4AuOW9k2Pfx/mSupJtxOsLzmnHY2WqZUYRFccFn2RhzPAqt3Xb+sorK/badW2D4zNzqZz5w==",
+      "dev": true,
+      "requires": {
+        "bindings": "1.5.0",
+        "node-addon-api": "1.7.2"
+      }
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "optional": true,
+      "requires": {
+        "mimic-response": "1.0.1"
+      }
+    },
+    "deep-equal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
+      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
+      "requires": {
+        "is-arguments": "1.1.0",
+        "is-date-object": "1.0.2",
+        "is-regex": "1.1.1",
+        "object-is": "1.1.4",
+        "object-keys": "1.1.1",
+        "regexp.prototype.flags": "1.3.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "default-require-extensions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
+      "integrity": "sha1-836hXT4T/9m0N9M+GnW1+5eHTLg=",
+      "dev": true,
+      "requires": {
+        "strip-bom": "2.0.0"
+      }
+    },
+    "defaults": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
+      "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=",
+      "requires": {
+        "clone": "1.0.4"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+        }
+      }
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "requires": {
+        "object-keys": "1.1.1"
+      }
+    },
+    "define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "requires": {
+        "is-descriptor": "1.0.2",
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "del": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/del/-/del-3.0.0.tgz",
+      "integrity": "sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=",
+      "requires": {
+        "globby": "6.1.0",
+        "is-path-cwd": "1.0.0",
+        "is-path-in-cwd": "1.0.1",
+        "p-map": "1.2.0",
+        "pify": "3.0.0",
+        "rimraf": "2.7.1"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "requires": {
+            "array-union": "1.0.2",
+            "glob": "7.1.6",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          },
+          "dependencies": {
+            "pify": {
+              "version": "2.3.0",
+              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+            }
+          }
+        }
+      }
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
+    "denodeify": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
+      "integrity": "sha1-OjYof1A05pnnV3kBBSwubJQlFjE="
+    },
+    "denque": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
+      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "des.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "requires": {
+        "inherits": "2.0.4",
+        "minimalistic-assert": "1.0.1"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "detect-indent": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
+      "integrity": "sha1-920GQ1LN9Docts5hnE7jqUdd4gg=",
+      "requires": {
+        "repeating": "2.0.1"
+      }
+    },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
+    },
+    "detect-node": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.0.4.tgz",
+      "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw=="
+    },
+    "di": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/di/-/di-0.0.1.tgz",
+      "integrity": "sha1-gGZJMmzqp8qjMG112YXqJ0i6kTw=",
+      "dev": true
+    },
+    "dicer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.3.0.tgz",
+      "integrity": "sha512-MdceRRWqltEG2dZqO769g27N/3PXfcKl04VhYnBlo2YhH7zPi88VebsjTKclaOyiuMaGU72hTfw3VkUitGcVCA==",
+      "requires": {
+        "streamsearch": "0.1.2"
+      }
+    },
+    "diff": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz",
+      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA=="
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "miller-rabin": "4.0.1",
+        "randombytes": "2.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "dir-glob": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
+      "integrity": "sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==",
+      "requires": {
+        "path-type": "3.0.0"
+      }
+    },
+    "dns-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
+      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
+    },
+    "dns-packet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
+      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
+      "requires": {
+        "ip": "1.1.5",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "dns-txt": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
+      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
+      "requires": {
+        "buffer-indexof": "1.1.1"
+      }
+    },
+    "doctypes": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/doctypes/-/doctypes-1.1.0.tgz",
+      "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk="
+    },
+    "dom-converter": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
+      "requires": {
+        "utila": "0.4.0"
+      }
+    },
+    "dom-serialize": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/dom-serialize/-/dom-serialize-2.2.1.tgz",
+      "integrity": "sha1-ViromZ9Evl6jB29UGdzVnrQ6yVs=",
+      "dev": true,
+      "requires": {
+        "custom-event": "1.0.1",
+        "ent": "2.2.0",
+        "extend": "3.0.2",
+        "void-elements": "2.0.1"
+      },
+      "dependencies": {
+        "void-elements": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+          "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+          "dev": true
+        }
+      }
+    },
+    "dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "requires": {
+        "domelementtype": "2.1.0",
+        "entities": "2.1.0"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
+        }
+      }
+    },
+    "dom-storage": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/dom-storage/-/dom-storage-2.1.0.tgz",
+      "integrity": "sha512-g6RpyWXzl0RR6OTElHKBl7nwnK87GUyZMYC7JWsB/IA73vpqK2K6LT39x4VepLxlSsWBFrPVLnsSR5Jyty0+2Q=="
+    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
+    },
+    "domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
+    },
+    "domexception": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
+      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
+      "dev": true,
+      "requires": {
+        "webidl-conversions": "4.0.2"
+      }
+    },
+    "domhandler": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "requires": {
+        "domelementtype": "1.3.1"
+      }
+    },
+    "domutils": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "requires": {
+        "dom-serializer": "0.2.2",
+        "domelementtype": "1.3.1"
+      }
+    },
+    "dont-sniff-mimetype": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/dont-sniff-mimetype/-/dont-sniff-mimetype-1.1.0.tgz",
+      "integrity": "sha512-ZjI4zqTaxveH2/tTlzS1wFp+7ncxNZaIEWYg3lzZRHkKf5zPT/MnEG6WL0BhHMJUabkh8GeU5NL5j+rEUCb7Ug=="
+    },
+    "dot-object": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/dot-object/-/dot-object-1.9.0.tgz",
+      "integrity": "sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw==",
+      "dev": true,
+      "requires": {
+        "commander": "2.20.3",
+        "glob": "7.1.6"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        }
+      }
+    },
+    "dot-prop": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+      "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
+      "requires": {
+        "is-obj": "1.0.1"
+      }
+    },
+    "dotenv": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
+      "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0="
+    },
+    "dotenv-expand": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz",
+      "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
+      "dev": true
+    },
+    "double-ended-queue": {
+      "version": "2.1.0-0",
+      "resolved": "https://registry.npmjs.org/double-ended-queue/-/double-ended-queue-2.1.0-0.tgz",
+      "integrity": "sha1-ED01J/0xUo9AGIEwyEHv3XgmTlw="
+    },
+    "drag-tracker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/drag-tracker/-/drag-tracker-1.0.0.tgz",
+      "integrity": "sha1-m9M9OAvDBW22m9Wzz24GL+xYvWQ="
+    },
+    "dragula": {
+      "version": "3.7.3",
+      "resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.3.tgz",
+      "integrity": "sha512-/rRg4zRhcpf81TyDhaHLtXt6sEywdfpv1cRUMeFFy7DuypH2U0WUL0GTdyAQvXegviT4PJK4KuMmOaIDpICseQ==",
+      "requires": {
+        "contra": "1.9.4",
+        "crossvent": "1.5.5"
+      }
+    },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "2.3.7"
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "requires": {
+        "end-of-stream": "1.4.4",
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7",
+        "stream-shift": "1.0.1"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
+      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
+      "requires": {
+        "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "ejs": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
+      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA=="
+    },
+    "electron-to-chromium": {
+      "version": "1.3.633",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.633.tgz",
+      "integrity": "sha512-bsVCsONiVX1abkWdH7KtpuDAhsQ3N3bjPYhROSAXE78roJKet0Y5wznA14JE9pzbwSZmSMAW6KiKYf1RvbTJkA=="
+    },
+    "elegant-spinner": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz",
+      "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4="
+    },
+    "elliptic": {
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "brorand": "1.1.0",
+        "hash.js": "1.1.7",
+        "hmac-drbg": "1.0.1",
+        "inherits": "2.0.4",
+        "minimalistic-assert": "1.0.1",
+        "minimalistic-crypto-utils": "1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
+    "emailjs": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/emailjs/-/emailjs-1.0.11.tgz",
+      "integrity": "sha1-LLbxViTtk/ypPx4ESc8Q0lRyoNY=",
+      "requires": {
+        "addressparser": "0.3.2",
+        "bufferjs": "1.1.0",
+        "mimelib": "0.2.14",
+        "moment": "2.11.2",
+        "starttls": "1.0.1"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.11.2",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.11.2.tgz",
+          "integrity": "sha1-h5aOX5WsA4wuQqyVnHWBnNP1KQE="
+        }
+      }
+    },
+    "ember-cli-string-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ember-cli-string-utils/-/ember-cli-string-utils-1.1.0.tgz",
+      "integrity": "sha1-ObZ3/CgF9VFzc1N2/O8njqpEUqE="
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
+    "emojis-list": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+    },
+    "enabled": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
+      "integrity": "sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "encoding": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
+      "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "requires": {
+        "iconv-lite": "0.6.2"
+      },
+      "dependencies": {
+        "iconv-lite": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.2.tgz",
+          "integrity": "sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==",
+          "requires": {
+            "safer-buffer": "2.1.2"
+          }
+        }
+      }
+    },
+    "end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "requires": {
+        "once": "1.4.0"
+      }
+    },
+    "engine.io": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.1.5.tgz",
+      "integrity": "sha512-D06ivJkYxyRrcEe0bTpNnBQNgP9d3xog+qZlLbui8EsMr/DouQpf5o9FzJnWYHEYE0YsFHllUv2R1dkgYZXHcA==",
+      "requires": {
+        "accepts": "1.3.7",
+        "base64id": "1.0.0",
+        "cookie": "0.3.1",
+        "debug": "3.1.0",
+        "engine.io-parser": "2.1.3",
+        "uws": "9.14.0",
+        "ws": "3.3.3"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ws": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+          "requires": {
+            "async-limiter": "1.0.1",
+            "safe-buffer": "5.1.2",
+            "ultron": "1.1.1"
+          }
+        }
+      }
+    },
+    "engine.io-client": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.1.6.tgz",
+      "integrity": "sha512-hnuHsFluXnsKOndS4Hv6SvUrgdYx1pk2NqfaDMW+GWdgfU3+/V25Cj7I8a0x92idSpa5PIhJRKxPvp9mnoLsfg==",
+      "requires": {
+        "component-emitter": "1.2.1",
+        "component-inherit": "0.0.3",
+        "debug": "3.1.0",
+        "engine.io-parser": "2.1.3",
+        "has-cors": "1.1.0",
+        "indexof": "0.0.1",
+        "parseqs": "0.0.5",
+        "parseuri": "0.0.5",
+        "ws": "3.3.3",
+        "xmlhttprequest-ssl": "1.5.5",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ws": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+          "requires": {
+            "async-limiter": "1.0.1",
+            "safe-buffer": "5.1.2",
+            "ultron": "1.1.1"
+          }
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.1.3.tgz",
+      "integrity": "sha512-6HXPre2O4Houl7c4g7Ic/XzPnHBvaEmN90vtRO9uLmwtRqQmTOw0QMevL1TOfL2Cpu1VzsaTmMotQgMdkzGkVA==",
+      "requires": {
+        "after": "0.8.2",
+        "arraybuffer.slice": "0.0.7",
+        "base64-arraybuffer": "0.1.5",
+        "blob": "0.0.5",
+        "has-binary2": "1.0.3"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.4.1.tgz",
+      "integrity": "sha1-BCHjOf1xQZs9oT0Smzl5BAIwR24=",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "memory-fs": "0.4.1",
+        "object-assign": "4.1.1",
+        "tapable": "0.2.9"
+      }
+    },
+    "ent": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
+      "integrity": "sha1-6WQhkyWiHQX0RGai9obtbOX13R0="
+    },
+    "entities": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.1.0.tgz",
+      "integrity": "sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w=="
+    },
+    "envinfo": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.3.tgz",
+      "integrity": "sha512-46+j5QxbPWza0PB1i15nZx0xQ4I/EfQxg9J8Had3b408SV63nEtor2e+oiY63amTo9KTuh2a3XLObNwduxYwwA==",
+      "dev": true
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "requires": {
+        "prr": "1.0.1"
+      }
+    },
+    "error": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/error/-/error-7.2.1.tgz",
+      "integrity": "sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==",
+      "dev": true,
+      "requires": {
+        "string-template": "0.2.1"
+      },
+      "dependencies": {
+        "string-template": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
+          "integrity": "sha1-QpMuWYo1LQH8IuwzZ9nYTuxsmt0=",
+          "dev": true
+        }
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "0.2.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.18.0-next.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+      "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
+      "requires": {
+        "es-to-primitive": "1.2.1",
+        "function-bind": "1.1.1",
+        "has": "1.0.3",
+        "has-symbols": "1.0.1",
+        "is-callable": "1.2.2",
+        "is-negative-zero": "2.0.1",
+        "is-regex": "1.1.1",
+        "object-inspect": "1.9.0",
+        "object-keys": "1.1.1",
+        "object.assign": "4.1.2",
+        "string.prototype.trimend": "1.0.3",
+        "string.prototype.trimstart": "1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "requires": {
+        "is-callable": "1.2.2",
+        "is-date-object": "1.0.2",
+        "is-symbol": "1.0.3"
+      }
+    },
+    "es5-ext": {
+      "version": "0.10.53",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz",
+      "integrity": "sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==",
+      "requires": {
+        "es6-iterator": "2.0.3",
+        "es6-symbol": "3.1.3",
+        "next-tick": "1.0.0"
+      }
+    },
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
+      "requires": {
+        "d": "1.0.1",
+        "es5-ext": "0.10.53",
+        "es6-symbol": "3.1.3"
+      }
+    },
+    "es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "requires": {
+        "d": "1.0.1",
+        "es5-ext": "0.10.53",
+        "es6-iterator": "2.0.3",
+        "es6-set": "0.1.5",
+        "es6-symbol": "3.1.3",
+        "event-emitter": "0.3.5"
+      }
+    },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM="
+    },
+    "es6-promisify": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+      "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
+      "requires": {
+        "es6-promise": "4.2.8"
+      },
+      "dependencies": {
+        "es6-promise": {
+          "version": "4.2.8",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+          "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+        }
+      }
+    },
+    "es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "requires": {
+        "d": "1.0.1",
+        "es5-ext": "0.10.53",
+        "es6-iterator": "2.0.3",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "0.3.5"
+      },
+      "dependencies": {
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1.0.1",
+            "es5-ext": "0.10.53"
+          }
+        }
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "1.0.1",
+        "ext": "1.4.0"
+      }
+    },
+    "es6-weak-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-weak-map/-/es6-weak-map-2.0.3.tgz",
+      "integrity": "sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==",
+      "requires": {
+        "d": "1.0.1",
+        "es5-ext": "0.10.53",
+        "es6-iterator": "2.0.3",
+        "es6-symbol": "3.1.3"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "escodegen": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz",
+      "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==",
+      "dev": true,
+      "requires": {
+        "esprima": "3.1.3",
+        "estraverse": "4.3.0",
+        "esutils": "2.0.3",
+        "optionator": "0.8.3",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "escope": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/escope/-/escope-3.6.0.tgz",
+      "integrity": "sha1-4Bl16BJ4GhY6ba392AOY3GTIicM=",
+      "requires": {
+        "es6-map": "0.1.5",
+        "es6-weak-map": "2.0.3",
+        "esrecurse": "4.3.0",
+        "estraverse": "4.3.0"
+      }
+    },
+    "esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "requires": {
+        "estraverse": "5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1.0.1",
+        "es5-ext": "0.10.53"
+      }
+    },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "events": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.2.0.tgz",
+      "integrity": "sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg=="
+    },
+    "eventsource": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-0.1.6.tgz",
+      "integrity": "sha1-Cs7ehJ7X3RzMMsgRuxG5RNTykjI=",
+      "requires": {
+        "original": "1.0.2"
+      }
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "requires": {
+        "md5.js": "1.3.5",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "execa": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+      "requires": {
+        "cross-spawn": "5.1.0",
+        "get-stream": "3.0.0",
+        "is-stream": "1.1.0",
+        "npm-run-path": "2.0.2",
+        "p-finally": "1.0.0",
+        "signal-exit": "3.0.3",
+        "strip-eof": "1.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+          "requires": {
+            "lru-cache": "4.1.5",
+            "shebang-command": "1.2.0",
+            "which": "1.3.1"
+          }
+        }
+      }
+    },
+    "exit": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
+      "dev": true
+    },
+    "exit-hook": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
+      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g="
+    },
+    "exit-on-epipe": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
+      "integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
+    },
+    "expand-braces": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/expand-braces/-/expand-braces-0.1.2.tgz",
+      "integrity": "sha1-SIsdHSRRyz06axks/AMPRMWFX+o=",
+      "dev": true,
+      "requires": {
+        "array-slice": "0.2.3",
+        "array-unique": "0.2.1",
+        "braces": "0.1.5"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-0.1.5.tgz",
+          "integrity": "sha1-wIVxEIUpHYt1/ddOqw+FlygHEeY=",
+          "dev": true,
+          "requires": {
+            "expand-range": "0.1.1"
+          }
+        },
+        "expand-range": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-0.1.1.tgz",
+          "integrity": "sha1-TLjtoJk8pW+k9B/ELzy7TMrf8EQ=",
+          "dev": true,
+          "requires": {
+            "is-number": "0.1.1",
+            "repeat-string": "0.2.2"
+          }
+        },
+        "is-number": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-0.1.1.tgz",
+          "integrity": "sha1-aaevEWlj1HIG7JvZtIoUIW8eOAY=",
+          "dev": true
+        },
+        "repeat-string": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-0.2.2.tgz",
+          "integrity": "sha1-x6jTI2BoNiBZp+RlH8aITosftK4=",
+          "dev": true
+        }
+      }
+    },
+    "expand-brackets": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+      "requires": {
+        "is-posix-bracket": "0.1.1"
+      }
+    },
+    "expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+      "requires": {
+        "fill-range": "2.2.4"
+      }
+    },
+    "expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "optional": true
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "etag": "1.8.1",
+        "finalhandler": "1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "1.1.2",
+        "on-finished": "2.3.0",
+        "parseurl": "1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "2.0.6",
+        "qs": "6.7.0",
+        "range-parser": "1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "1.5.0",
+        "type-is": "1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "1.1.2"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+        },
+        "qs": {
+          "version": "6.7.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+        }
+      }
+    },
+    "express-data-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/express-data-parser/-/express-data-parser-1.2.0.tgz",
+      "integrity": "sha1-/sGFhBHIfSruHdOepf7q6gmAajM=",
+      "requires": {
+        "formidable": "1.2.2"
+      }
+    },
+    "express-jwt": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/express-jwt/-/express-jwt-5.3.3.tgz",
+      "integrity": "sha512-UdB8p5O8vGYTKm3SfREnLgVGIGEHcL3lrVyi3ebEX2qhMuagN623ju7ywWis+qYL+CXE7G1qPc2bCPBAg2MxZQ==",
+      "requires": {
+        "async": "1.5.2",
+        "express-unless": "0.3.1",
+        "jsonwebtoken": "8.5.1",
+        "lodash.set": "4.3.2"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        },
+        "express-unless": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/express-unless/-/express-unless-0.3.1.tgz",
+          "integrity": "sha1-JVfBRudb65A+LSR/m1ugFFJpbiA="
+        }
+      }
+    },
+    "express-list-endpoints": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/express-list-endpoints/-/express-list-endpoints-3.0.1.tgz",
+      "integrity": "sha512-Ul3OY7r7Lc84R4z/xI5Jx6wbMzxg61SQh4BhVNDIPPtim6vHPjrKY+QhYYM8FdOswjHZstGK7J0I6HYf8FKtVA=="
+    },
+    "express-oas-generator": {
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/express-oas-generator/-/express-oas-generator-1.0.30.tgz",
+      "integrity": "sha512-gJEixTgScRa9ANwG+fnPhPjOZO/pj9exqTRIxXVP/YrbIgsiaQYJXcEApQFck2vs3oZs2Y58SGuxpn1uYYvuYQ==",
+      "requires": {
+        "@types/express": "4.17.9",
+        "express-list-endpoints": "3.0.1",
+        "generate-schema": "2.6.0",
+        "lodash.merge": "4.6.2",
+        "openapi-types": "1.3.5",
+        "swagger-ui-express": "3.0.10",
+        "swagger2openapi": "7.0.4",
+        "typescript": "3.9.7",
+        "winston": "3.3.3"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "3.9.7",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.7.tgz",
+          "integrity": "sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw=="
+        }
+      }
+    },
+    "express-session": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.15.2.tgz",
+      "integrity": "sha1-2YUWRDpMy4aI4XJa5YTALapAk9Q=",
+      "requires": {
+        "cookie": "0.3.1",
+        "cookie-signature": "1.0.6",
+        "crc": "3.4.4",
+        "debug": "2.6.3",
+        "depd": "1.1.2",
+        "on-headers": "1.0.2",
+        "parseurl": "1.3.3",
+        "uid-safe": "2.1.5",
+        "utils-merge": "1.0.0"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        },
+        "debug": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.3.tgz",
+          "integrity": "sha1-D364wwll7AjHKsz6ATDIt5mEFB0=",
+          "requires": {
+            "ms": "0.7.2"
+          }
+        },
+        "ms": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U="
+        },
+        "utils-merge": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
+          "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg="
+        }
+      }
+    },
+    "express-stormpath": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/express-stormpath/-/express-stormpath-4.0.0.tgz",
+      "integrity": "sha1-a27oHU4SMHHSihwGhrNJ5+wCEzc=",
+      "dev": true,
+      "requires": {
+        "async": "2.6.3",
+        "body": "5.1.0",
+        "bytes": "2.5.0",
+        "cookie-parser": "1.4.3",
+        "cookies": "0.6.2",
+        "deep-extend": "0.4.2",
+        "dot-object": "1.9.0",
+        "express": "4.17.1",
+        "forms": "1.3.2",
+        "jade": "1.11.0",
+        "jwk-to-pem": "1.2.6",
+        "lodash": "4.17.20",
+        "njwt": "0.4.1",
+        "parse-iso-duration": "1.1.0",
+        "psl": "1.8.0",
+        "qs": "6.4.0",
+        "request": "2.81.0",
+        "stormpath": "github:stormpath/stormpath-sdk-node#39637f656dacc03327e1482a3f993445f7b21b4b",
+        "stormpath-config": "github:stormpath/stormpath-node-config#0cf1158865646f5f3d97856b98afaacaaea8d4b9",
+        "utils-merge": "1.0.1",
+        "uuid": "2.0.3",
+        "winston": "2.4.5",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.5.0.tgz",
+          "integrity": "sha1-TJQj6i0lLCcMQbK97+/5u2tiwGo=",
+          "dev": true
+        },
+        "colors": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
+          "dev": true
+        },
+        "cookies": {
+          "version": "0.6.2",
+          "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.6.2.tgz",
+          "integrity": "sha1-asGwUolSCOj8TE9fhqntMbnLXM8=",
+          "dev": true,
+          "requires": {
+            "depd": "1.1.2",
+            "keygrip": "1.0.3"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
+          "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
+          "dev": true
+        },
+        "keygrip": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.0.3.tgz",
+          "integrity": "sha512-/PpesirAIfaklxUzp4Yb7xBper9MwP6hNRA6BGGUFCgbJ+BM5CKBtsoxinNXkLHAr+GXS1/lSlF2rP7cv5Fl+g==",
+          "dev": true
+        },
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+          "dev": true
+        },
+        "winston": {
+          "version": "2.4.5",
+          "resolved": "https://registry.npmjs.org/winston/-/winston-2.4.5.tgz",
+          "integrity": "sha512-TWoamHt5yYvsMarGlGEQE59SbJHqGsZV8/lwC+iCcGeAe0vUaOh+Lv6SYM17ouzC/a/LB1/hz/7sxFBtlu1l4A==",
+          "dev": true,
+          "requires": {
+            "async": "1.0.0",
+            "colors": "1.0.3",
+            "cycle": "1.0.3",
+            "eyes": "0.1.8",
+            "isstream": "0.1.2",
+            "stack-trace": "0.0.10"
+          },
+          "dependencies": {
+            "async": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
+              "integrity": "sha1-+PwEyjoTeErenhZBr5hXjPvWR6k=",
+              "dev": true
+            }
+          }
+        }
+      }
+    },
+    "express-unless": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/express-unless/-/express-unless-0.5.0.tgz",
+      "integrity": "sha1-wuzkd/QVUIkUPbuGnQfFfF62q5s="
+    },
+    "ext": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ext/-/ext-1.4.0.tgz",
+      "integrity": "sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==",
+      "requires": {
+        "type": "2.1.0"
+      },
+      "dependencies": {
+        "type": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/type/-/type-2.1.0.tgz",
+          "integrity": "sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA=="
+        }
+      }
+    },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "requires": {
+        "assign-symbols": "1.0.0",
+        "is-extendable": "1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "2.0.4"
+          }
+        }
+      }
+    },
+    "extglob": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+      "requires": {
+        "is-extglob": "1.0.0"
+      }
+    },
+    "extract-text-webpack-plugin": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-3.0.2.tgz",
+      "integrity": "sha512-bt/LZ4m5Rqt/Crl2HiKuAl/oqg0psx1tsTLkvWbJen1CtD+fftkZhMaQ9HOtY2gWsl2Wq+sABmMVi9z3DhKWQQ==",
+      "requires": {
+        "async": "2.6.3",
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.3.0",
+        "webpack-sources": "1.4.3"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
+      }
+    },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
+    "eyes": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
+      "integrity": "sha1-Ys8SAjTGg3hdkCNIqADvPgzCC8A=",
+      "dev": true
+    },
+    "falafel": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/falafel/-/falafel-2.2.4.tgz",
+      "integrity": "sha512-0HXjo8XASWRmsS0X1EkhwEMZaD3Qvp7FfURwjLKjG1ghfRm/MGZl2r4cWUTv41KdNghTw4OUMmVtdGQp3+H+uQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "7.4.1",
+        "foreach": "2.0.5",
+        "isarray": "2.0.5",
+        "object-keys": "1.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+          "dev": true
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
+    },
+    "fast-glob": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.7.tgz",
+      "integrity": "sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==",
+      "dev": true,
+      "requires": {
+        "@mrmlnc/readdir-enhanced": "2.2.1",
+        "@nodelib/fs.stat": "1.1.3",
+        "glob-parent": "3.1.0",
+        "is-glob": "4.0.1",
+        "merge2": "1.4.1",
+        "micromatch": "3.1.10"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "dev": true
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "dev": true,
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "dev": true
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "dev": true,
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "dev": true,
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "dev": true,
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        }
+      }
+    },
+    "fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "fast-safe-stringify": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz",
+      "integrity": "sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA=="
+    },
+    "fast-text-encoding": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz",
+      "integrity": "sha512-dtm4QZH9nZtcDt8qJiOH9fcQd1NAgi+K1O2DbE6GG1PPCK/BWfOH3idCTRQ4ImXRUOyopDEgDEnVEE7Y/2Wrig=="
+    },
+    "fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
+    "faye-websocket": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
+      "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=",
+      "requires": {
+        "websocket-driver": "0.7.4"
+      }
+    },
+    "fcm-node": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/fcm-node/-/fcm-node-1.5.2.tgz",
+      "integrity": "sha512-RFXViwb8R254O4dNtmJI11MdpkNyfOcCPYT7doDb7hwenHHaOSrFlTyN/NyIivJqjd/UU0++vLiCGn6uVYEKbA==",
+      "requires": {
+        "firebase-admin": "7.4.0",
+        "https-proxy-agent": "2.2.4",
+        "retry": "0.9.0"
+      }
+    },
+    "feature-policy": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/feature-policy/-/feature-policy-0.3.0.tgz",
+      "integrity": "sha512-ZtijOTFN7TzCujt1fnNhfWPFPSHeZkesff9AXZj+UEjYBynWNUIYpC87Ve4wHzyexQsImicLu7WsC2LHq7/xrQ=="
+    },
+    "fecha": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.0.tgz",
+      "integrity": "sha512-aN3pcx/DSmtyoovUudctc8+6Hl4T+hI9GBBHLjA76jdZl7+b1sgh5g4k+u/GL3dTy1/pnYzKp69FpJ0OicE3Wg=="
+    },
+    "feedparser": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/feedparser/-/feedparser-2.2.10.tgz",
+      "integrity": "sha512-WoAOooa61V8/xuKMi2pEtK86qQ3ZH/M72EEGdqlOTxxb3m6ve1NPvZcmPFs3wEDfcBbFLId2GqZ4YjsYi+h1xA==",
+      "requires": {
+        "addressparser": "1.0.1",
+        "array-indexofobject": "0.0.1",
+        "lodash.assign": "4.2.0",
+        "lodash.get": "4.4.2",
+        "lodash.has": "4.5.2",
+        "lodash.uniq": "4.5.0",
+        "mri": "1.1.6",
+        "readable-stream": "2.3.7",
+        "sax": "1.2.4"
+      },
+      "dependencies": {
+        "addressparser": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/addressparser/-/addressparser-1.0.1.tgz",
+          "integrity": "sha1-R6++GiqSYhkdtoOOT9HTm0CCF0Y="
+        }
+      }
+    },
+    "file-loader": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
+      "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.4.7"
+      }
+    },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="
+    },
+    "filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY="
+    },
+    "fileset": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
+      "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
+      "dev": true,
+      "requires": {
+        "glob": "7.1.6",
+        "minimatch": "3.0.4"
+      }
+    },
+    "filesize": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
+      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.4.tgz",
+      "integrity": "sha512-cnrcCbj01+j2gTG921VZPnHbjmdAf8oQV/iGeV2kZxGSyfYjjTyY79ErsK1WJWMpw6DaApEX72binqJE+/d+5Q==",
+      "requires": {
+        "is-number": "2.1.0",
+        "isobject": "2.1.0",
+        "randomatic": "3.1.1",
+        "repeat-element": "1.1.3",
+        "repeat-string": "1.6.1"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "on-finished": "2.3.0",
+        "parseurl": "1.3.3",
+        "statuses": "1.5.0",
+        "unpipe": "1.0.0"
+      }
+    },
+    "find-cache-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-1.0.0.tgz",
+      "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
+      "requires": {
+        "commondir": "1.0.1",
+        "make-dir": "1.3.0",
+        "pkg-dir": "2.0.0"
+      }
+    },
+    "find-up": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
+      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
+      "requires": {
+        "locate-path": "2.0.0"
+      }
+    },
+    "firebase-admin": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/firebase-admin/-/firebase-admin-7.4.0.tgz",
+      "integrity": "sha512-CMgFy9ul8P4TpUR0x9yTHBUhqa1r+Zj0h+NuhHES0bQkExUkLVg7Sf1cALe8/5pcbiveugyqPZw0oFSIhJlLCQ==",
+      "requires": {
+        "@firebase/app": "0.3.17",
+        "@firebase/database": "0.3.20",
+        "@google-cloud/firestore": "1.3.0",
+        "@google-cloud/storage": "2.5.0",
+        "@types/node": "8.10.66",
+        "dicer": "0.3.0",
+        "jsonwebtoken": "8.1.0",
+        "node-forge": "0.7.4"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "8.10.66",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.66.tgz",
+          "integrity": "sha512-tktOkFUA4kXx2hhhrB8bIFb5TbwzS4uOhKEmwiD+NoiL0qtP2OQ9mFldbgD4dV1djrlBYP6eBuQZiWjuHUpqFw=="
+        },
+        "jsonwebtoken": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.1.0.tgz",
+          "integrity": "sha1-xjl80uX9WD1lwAeoPce7eOaYK4M=",
+          "requires": {
+            "jws": "3.2.2",
+            "lodash.includes": "4.3.0",
+            "lodash.isboolean": "3.0.3",
+            "lodash.isinteger": "4.0.4",
+            "lodash.isnumber": "3.0.3",
+            "lodash.isplainobject": "4.0.6",
+            "lodash.isstring": "4.0.1",
+            "lodash.once": "4.1.1",
+            "ms": "2.0.0",
+            "xtend": "4.0.2"
+          }
+        },
+        "node-forge": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.4.tgz",
+          "integrity": "sha512-8Df0906+tq/omxuCZD6PqhPaQDYuyJ1d+VITgxoIA8zvQd1ru+nMJcDChHH324MWitIgbVkAkQoGEEVJNpn/PA=="
+        }
+      }
+    },
+    "flat": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-2.0.2.tgz",
+      "integrity": "sha512-b/cdFAr468cVs8XoG62dbGf9YegchdgEPX6sP7rppE0a4+RZF19kseTiDKGA1rIr3hOvOD0QIlSmaFlOlT0gfA==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "1.1.6"
+      }
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "requires": {
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "fn.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz",
+      "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw=="
+    },
+    "follow-redirects": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+    },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+    },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "requires": {
+        "for-in": "1.0.2"
+      }
+    },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
+      "dev": true
+    },
+    "foreachasync": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/foreachasync/-/foreachasync-3.0.0.tgz",
+      "integrity": "sha1-VQKYfchxS+M5IJfzLgBxyd7gfPY="
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.8",
+        "mime-types": "2.1.27"
+      }
+    },
+    "formidable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
+      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q=="
+    },
+    "forms": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/forms/-/forms-1.3.2.tgz",
+      "integrity": "sha512-rxWdPrXzx/OQHbzdi7ZxFSqpTjqCPHydle5kg7NLdNaJrf0dY9mt4aEoDhnW3hpSJtMN0tvsy1ktqvvF+cy/Pg==",
+      "dev": true,
+      "requires": {
+        "array.prototype.every": "1.1.1",
+        "array.prototype.some": "1.1.2",
+        "async": "2.6.3",
+        "email-addresses": "3.1.0",
+        "formidable": "1.2.2",
+        "is": "3.3.0",
+        "object-keys": "1.1.1",
+        "object.assign": "4.1.2",
+        "qs": "6.9.4",
+        "reduce": "1.0.2",
+        "string.prototype.trim": "1.2.3"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "6.9.4",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+          "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
+          "dev": true
+        }
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "requires": {
+        "map-cache": "0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "requires": {
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "fs-access": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/fs-access/-/fs-access-1.0.1.tgz",
+      "integrity": "sha1-1qh/JiJxzv6+wwxVNAf7mV2od3o=",
+      "dev": true,
+      "requires": {
+        "null-check": "1.0.0"
+      }
+    },
+    "fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "optional": true
+    },
+    "fs-extra": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "jsonfile": "4.0.0",
+        "universalify": "0.1.2"
+      }
+    },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "requires": {
+        "minipass": "2.9.0"
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "iferr": "0.1.5",
+        "imurmurhash": "0.1.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "fs.notify": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/fs.notify/-/fs.notify-0.0.4.tgz",
+      "integrity": "sha1-YyhNRaNLUs5gCIpt2+xbd208AT0=",
+      "requires": {
+        "async": "0.1.22",
+        "retry": "0.6.1"
+      },
+      "dependencies": {
+        "async": {
+          "version": "0.1.22",
+          "resolved": "https://registry.npmjs.org/async/-/async-0.1.22.tgz",
+          "integrity": "sha1-D8GqoIig4+8Ovi2IMbqw3PiEUGE="
+        },
+        "retry": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.6.1.tgz",
+          "integrity": "sha1-/ckO7ZQ/3hG4k1VLjMY9DombqRg="
+        }
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fstream": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
+      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "inherits": "2.0.4",
+        "mkdirp": "0.5.5",
+        "rimraf": "2.7.1"
+      }
+    },
+    "fstream-ignore": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
+      "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
+      "optional": true,
+      "requires": {
+        "fstream": "1.0.12",
+        "inherits": "2.0.4",
+        "minimatch": "3.0.4"
+      }
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
+      "optional": true
+    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "1.2.0",
+        "console-control-strings": "1.1.0",
+        "has-unicode": "2.0.1",
+        "object-assign": "4.1.1",
+        "signal-exit": "3.0.3",
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wide-align": "1.1.3"
+      }
+    },
+    "gaxios": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-1.8.4.tgz",
+      "integrity": "sha512-BoENMnu1Gav18HcpV9IleMPZ9exM+AvUjrAOV4Mzs/vfz2Lu/ABv451iEXByKiMPn2M140uul1txXCg83sAENw==",
+      "requires": {
+        "abort-controller": "3.0.0",
+        "extend": "3.0.2",
+        "https-proxy-agent": "2.2.4",
+        "node-fetch": "2.6.1"
+      }
+    },
+    "gaze": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
+      "optional": true,
+      "requires": {
+        "globule": "1.3.2"
+      }
+    },
+    "gcp-metadata": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-1.0.0.tgz",
+      "integrity": "sha512-Q6HrgfrCQeEircnNP3rCcEgiDv7eF9+1B+1MMgpE190+/+0mjQR8PxeOaRgxZWmdDAF9EIryHB9g1moPiw1SbQ==",
+      "requires": {
+        "gaxios": "1.8.4",
+        "json-bigint": "0.3.1"
+      }
+    },
+    "gcs-resumable-upload": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gcs-resumable-upload/-/gcs-resumable-upload-1.1.0.tgz",
+      "integrity": "sha512-uBz7uHqp44xjSDzG3kLbOYZDjxxR/UAGbB47A0cC907W6yd2LkcyFDTHg+bjivkHMwiJlKv4guVWcjPCk2zScg==",
+      "optional": true,
+      "requires": {
+        "abort-controller": "2.0.3",
+        "configstore": "4.0.0",
+        "gaxios": "1.8.4",
+        "google-auth-library": "3.1.2",
+        "pumpify": "1.5.1",
+        "stream-events": "1.0.5"
+      },
+      "dependencies": {
+        "abort-controller": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-2.0.3.tgz",
+          "integrity": "sha512-EPSq5wr2aFyAZ1PejJB32IX9Qd4Nwus+adnp7STYFM5/23nLPBazqZ1oor6ZqbH+4otaaGXTlC8RN5hq3C8w9Q==",
+          "optional": true,
+          "requires": {
+            "event-target-shim": "5.0.1"
+          }
+        }
+      }
+    },
+    "generate-function": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
+      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
+      "dev": true,
+      "requires": {
+        "is-property": "1.0.2"
+      }
+    },
+    "generate-object-property": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+      "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+      "dev": true,
+      "requires": {
+        "is-property": "1.0.2"
+      }
+    },
+    "generate-schema": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/generate-schema/-/generate-schema-2.6.0.tgz",
+      "integrity": "sha512-EUBKfJNzT8f91xUk5X5gKtnbdejZeE065UAJ3BCzE8VEbvwKI9Pm5jaWmqVeK1MYc1g5weAVFDTSJzN7ymtTqA==",
+      "requires": {
+        "commander": "2.17.1",
+        "type-of-is": "3.5.1"
+      }
+    },
+    "gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true
+    },
+    "geo-convex-hull": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/geo-convex-hull/-/geo-convex-hull-1.3.0.tgz",
+      "integrity": "sha512-1USRFEkT0TMtllpCkhC9O9IEMHMrhXCxCRjOBk/t43qqRGmw1wnAbmR+97QbFw5am0TvqCiGoWde6q5JCA3Z+A=="
+    },
+    "geojson-area": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-area/-/geojson-area-0.2.1.tgz",
+      "integrity": "sha1-JTewmC24YwnyHSxCikJXx6YoLMY=",
+      "requires": {
+        "wgs84": "0.0.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
+    "get-intrinsic": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.0.2.tgz",
+      "integrity": "sha512-aeX0vrFm21ILl3+JpFFRNe9aUvp6VFZb2/CTbgLb8j75kOhvoNYjt9d8KA/tJG4gSo8nzEDedRl0h7vDmBYRVg==",
+      "requires": {
+        "function-bind": "1.1.1",
+        "has": "1.0.3",
+        "has-symbols": "1.0.1"
+      }
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw=",
+      "dev": true
+    },
+    "get-stdin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+    },
+    "get-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=",
+      "optional": true
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "requires": {
+        "fs.realpath": "1.0.0",
+        "inflight": "1.0.6",
+        "inherits": "2.0.4",
+        "minimatch": "3.0.4",
+        "once": "1.4.0",
+        "path-is-absolute": "1.0.1"
+      }
+    },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "requires": {
+        "glob-parent": "2.0.0",
+        "is-glob": "2.0.1"
+      }
+    },
+    "glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "requires": {
+        "is-glob": "2.0.1"
+      }
+    },
+    "glob-stream": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-6.1.0.tgz",
+      "integrity": "sha1-cEXJlBOz65SIjYOrRtC0BMx73eQ=",
+      "requires": {
+        "extend": "3.0.2",
+        "glob": "7.1.6",
+        "glob-parent": "3.1.0",
+        "is-negated-glob": "1.0.0",
+        "ordered-read-streams": "1.0.1",
+        "pumpify": "1.5.1",
+        "readable-stream": "2.3.7",
+        "remove-trailing-separator": "1.1.0",
+        "to-absolute-glob": "2.0.2",
+        "unique-stream": "2.3.1"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        }
+      }
+    },
+    "glob-to-regexp": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz",
+      "integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
+      "dev": true
+    },
+    "global-dirs": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz",
+      "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=",
+      "requires": {
+        "ini": "1.3.8"
+      }
+    },
+    "globals": {
+      "version": "9.18.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz",
+      "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ=="
+    },
+    "globby": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-7.1.1.tgz",
+      "integrity": "sha1-+yzP+UAfhgCUXfral0QMypcrhoA=",
+      "requires": {
+        "array-union": "1.0.2",
+        "dir-glob": "2.2.2",
+        "glob": "7.1.6",
+        "ignore": "3.3.10",
+        "pify": "3.0.0",
+        "slash": "1.0.0"
+      }
+    },
+    "globule": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.3.2.tgz",
+      "integrity": "sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==",
+      "optional": true,
+      "requires": {
+        "glob": "7.1.6",
+        "lodash": "4.17.20",
+        "minimatch": "3.0.4"
+      }
+    },
+    "google-auth-library": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/google-auth-library/-/google-auth-library-3.1.2.tgz",
+      "integrity": "sha512-cDQMzTotwyWMrg5jRO7q0A4TL/3GWBgO7I7q5xGKNiiFf9SmGY/OJ1YsLMgI2MVHHsEGyrqYnbnmV1AE+Z6DnQ==",
+      "requires": {
+        "base64-js": "1.5.1",
+        "fast-text-encoding": "1.0.3",
+        "gaxios": "1.8.4",
+        "gcp-metadata": "1.0.0",
+        "gtoken": "2.3.3",
+        "https-proxy-agent": "2.2.4",
+        "jws": "3.2.2",
+        "lru-cache": "5.1.1",
+        "semver": "5.7.1"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "3.1.1"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
+      }
+    },
+    "google-distance-matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/google-distance-matrix/-/google-distance-matrix-1.1.1.tgz",
+      "integrity": "sha1-EQrsNiriUDSAuUFb+X8/cTxNFbs=",
+      "requires": {
+        "debug": "2.6.9",
+        "qs-google-signature": "1.2.0",
+        "request": "2.81.0"
+      }
+    },
+    "google-gax": {
+      "version": "0.25.6",
+      "resolved": "https://registry.npmjs.org/google-gax/-/google-gax-0.25.6.tgz",
+      "integrity": "sha512-+CVtOSLQt42mwVvJJirhBiAvWsp8zKeb9zW5Wy3wyvb3VG9OugHzZpwvYO9D4yNPPspe7L9CpIs80I5nUJlS8w==",
+      "optional": true,
+      "requires": {
+        "@grpc/grpc-js": "0.3.6",
+        "@grpc/proto-loader": "0.4.0",
+        "duplexify": "3.7.1",
+        "google-auth-library": "3.1.2",
+        "google-proto-files": "0.20.0",
+        "grpc": "1.24.4",
+        "grpc-gcp": "0.1.1",
+        "is-stream-ended": "0.1.4",
+        "lodash.at": "4.6.0",
+        "lodash.has": "4.5.2",
+        "protobufjs": "6.10.2",
+        "retry-request": "4.1.3",
+        "semver": "6.3.0",
+        "walkdir": "0.3.2"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "optional": true
+        }
+      }
+    },
+    "google-p12-pem": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/google-p12-pem/-/google-p12-pem-1.0.4.tgz",
+      "integrity": "sha512-SwLAUJqUfTB2iS+wFfSS/G9p7bt4eWcc2LyfvmUXe7cWp6p3mpxDo6LLI29MXdU6wvPcQ/up298X7GMC5ylAlA==",
+      "requires": {
+        "node-forge": "0.8.5",
+        "pify": "4.0.1"
+      },
+      "dependencies": {
+        "node-forge": {
+          "version": "0.8.5",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.8.5.tgz",
+          "integrity": "sha512-vFMQIWt+J/7FLNyKouZ9TazT74PRV3wgv9UT4cRjC8BffxFbKXkgIWR42URCPSnHm/QDz6BOlb2Q0U4+VQT67Q=="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
+    "google-proto-files": {
+      "version": "0.20.0",
+      "resolved": "https://registry.npmjs.org/google-proto-files/-/google-proto-files-0.20.0.tgz",
+      "integrity": "sha512-ORU+XhOeDv/UPtnCYLkO1ItmfhRCRPR3ZoeVQ7GfVzEs7PVitPIhsYlY5ZzG8XXnsdmtK27ENurfQ1jhAWpZHg==",
+      "optional": true,
+      "requires": {
+        "@google-cloud/promisify": "0.4.0",
+        "protobufjs": "6.10.2",
+        "walkdir": "0.3.2"
+      }
+    },
+    "googlemaps": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/googlemaps/-/googlemaps-1.12.0.tgz",
+      "integrity": "sha1-Jdgqg0+yyYnnLHkXtdrydjnyz/s=",
+      "requires": {
+        "check-types": "1.3.2",
+        "qs": "4.0.0",
+        "request": "2.81.0",
+        "waitress": "0.1.5"
+      },
+      "dependencies": {
+        "qs": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-4.0.0.tgz",
+          "integrity": "sha1-wx2bdOwn33XlQ6hseHKO2NRiNgc="
+        }
+      }
+    },
+    "got": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
+      "requires": {
+        "create-error-class": "3.0.2",
+        "duplexer3": "0.1.4",
+        "get-stream": "3.0.0",
+        "is-redirect": "1.0.0",
+        "is-retry-allowed": "1.2.0",
+        "is-stream": "1.1.0",
+        "lowercase-keys": "1.0.1",
+        "safe-buffer": "5.1.2",
+        "timed-out": "4.0.1",
+        "unzip-response": "2.0.1",
+        "url-parse-lax": "1.0.0"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU="
+    },
+    "grapheme-breaker": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/grapheme-breaker/-/grapheme-breaker-0.3.2.tgz",
+      "integrity": "sha1-W55reMODJFLSuiuxy4MPlidkEKw=",
+      "dev": true,
+      "requires": {
+        "brfs": "1.6.1",
+        "unicode-trie": "0.3.1"
+      }
+    },
+    "grpc": {
+      "version": "1.24.4",
+      "resolved": "https://registry.npmjs.org/grpc/-/grpc-1.24.4.tgz",
+      "integrity": "sha512-mHRAwuitCMuSHo1tp1+Zc0sz3cYa7pkhVJ77pkIXD5gcVORtkRiyW6msXYqTDT+35jazg98lbO3XzuTo2+XrcA==",
+      "requires": {
+        "@types/bytebuffer": "5.0.42",
+        "lodash.camelcase": "4.3.0",
+        "lodash.clone": "4.5.0",
+        "nan": "2.14.2",
+        "node-pre-gyp": "0.16.0",
+        "protobufjs": "5.0.3"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "1.0.0"
+          }
+        },
+        "protobufjs": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-5.0.3.tgz",
+          "integrity": "sha512-55Kcx1MhPZX0zTbVosMQEO5R6/rikNXd9b6RQK4KSPcrSIIwoXTtebIczUrXlwaSrbz4x8XUVThGPob1n8I4QA==",
+          "requires": {
+            "ascli": "1.0.1",
+            "bytebuffer": "5.0.1",
+            "glob": "7.1.6",
+            "yargs": "3.32.0"
+          }
+        },
+        "window-size": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
+          "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "3.32.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
+          "requires": {
+            "camelcase": "2.1.1",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "os-locale": "1.4.0",
+            "string-width": "1.0.2",
+            "window-size": "0.1.4",
+            "y18n": "3.2.1"
+          }
+        }
+      }
+    },
+    "grpc-gcp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/grpc-gcp/-/grpc-gcp-0.1.1.tgz",
+      "integrity": "sha512-MAt0Ae9QuL2Lbbt2d+kDta5AxqRD1JVXtBcJuQKp9GeFL5TxPw/hxIyDNyivPjKEXjbG3cBGwSE3CXq6a3KHEQ==",
+      "optional": true,
+      "requires": {
+        "grpc": "1.24.4",
+        "protobufjs": "6.10.2"
+      }
+    },
+    "gtoken": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-2.3.3.tgz",
+      "integrity": "sha512-EaB49bu/TCoNeQjhCYKI/CurooBKkGxIqFHsWABW0b25fobBYVTMe84A8EBVVZhl8emiUdNypil9huMOTmyAnw==",
+      "requires": {
+        "gaxios": "1.8.4",
+        "google-p12-pem": "1.0.4",
+        "jws": "3.2.2",
+        "mime": "2.4.7",
+        "pify": "4.0.1"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "2.4.7",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.7.tgz",
+          "integrity": "sha512-dhNd1uA2u397uQk3Nv5LM4lm93WYDUXFn3Fu291FJerns4jyTudqhIWe4W04YLy7Uk1tm1Ore04NpjRvQp/NPA=="
+        },
+        "pify": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+        }
+      }
+    },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
+    "handle-thing": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
+      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg=="
+    },
+    "handlebars": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "requires": {
+        "minimist": "1.2.5",
+        "neo-async": "2.6.2",
+        "source-map": "0.6.1",
+        "uglify-js": "3.4.10",
+        "wordwrap": "1.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+        }
+      }
+    },
+    "har-schema": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
+      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4="
+    },
+    "har-validator": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
+      "requires": {
+        "ajv": "4.11.8",
+        "har-schema": "1.0.5"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "4.11.8",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+          "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+          "requires": {
+            "co": "4.6.0",
+            "json-stable-stringify": "1.0.1"
+          }
+        }
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "has-binary": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/has-binary/-/has-binary-0.1.7.tgz",
+      "integrity": "sha1-aOYesWIQyVRaClzOBqhzkS/h5ow=",
+      "dev": true,
+      "requires": {
+        "isarray": "0.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        }
+      }
+    },
+    "has-binary2": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz",
+      "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==",
+      "requires": {
+        "isarray": "2.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        }
+      }
+    },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
+    "has-flag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+    },
+    "has-symbols": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
+    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "requires": {
+        "get-value": "2.0.6",
+        "has-values": "1.0.0",
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "requires": {
+        "is-number": "3.0.0",
+        "kind-of": "4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "requires": {
+            "is-buffer": "1.1.6"
+          }
+        }
+      }
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "requires": {
+        "inherits": "2.0.4",
+        "readable-stream": "3.6.0",
+        "safe-buffer": "5.2.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        }
+      }
+    },
+    "hash-stream-validation": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/hash-stream-validation/-/hash-stream-validation-0.2.4.tgz",
+      "integrity": "sha512-Gjzu0Xn7IagXVkSu9cSFuK1fqzwtLwFhNhVL8IFJijRNMgUttFbBSIAzKuSIrsFMO1+g1RlsoN49zPIbwPDMGQ==",
+      "optional": true
+    },
+    "hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "requires": {
+        "inherits": "2.0.4",
+        "minimalistic-assert": "1.0.1"
+      }
+    },
+    "hashish": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
+      "integrity": "sha1-bWC8b/r3Ebav1g5CbQd5iAFOZVQ=",
+      "requires": {
+        "traverse": "0.6.6"
+      }
+    },
+    "hashring": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/hashring/-/hashring-3.2.0.tgz",
+      "integrity": "sha1-/aTv3oqiLNuX+x0qZeiEAeHBRM4=",
+      "dev": true,
+      "requires": {
+        "connection-parse": "0.0.7",
+        "simple-lru-cache": "0.0.2"
+      }
+    },
+    "hat": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/hat/-/hat-0.0.3.tgz",
+      "integrity": "sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo="
+    },
+    "hawk": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+      "requires": {
+        "boom": "2.10.1",
+        "cryptiles": "2.0.5",
+        "hoek": "2.16.3",
+        "sntp": "1.0.9"
+      }
+    },
+    "hbs": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/hbs/-/hbs-4.1.1.tgz",
+      "integrity": "sha512-6QsbB4RwbpL4cb4DNyjEEPF+suwp+3yZqFVlhILEn92ScC0U4cDCR+FDX53jkfKJPhutcqhAvs+rOLZw5sQrDA==",
+      "requires": {
+        "handlebars": "4.7.6",
+        "walk": "2.3.14"
+      }
+    },
+    "he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+    },
+    "helmet": {
+      "version": "3.23.3",
+      "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.23.3.tgz",
+      "integrity": "sha512-U3MeYdzPJQhtvqAVBPntVgAvNSOJyagwZwyKsFdyRa8TV3pOKVFljalPOCxbw5Wwf2kncGhmP0qHjyazIdNdSA==",
+      "requires": {
+        "depd": "2.0.0",
+        "dont-sniff-mimetype": "1.1.0",
+        "feature-policy": "0.3.0",
+        "helmet-crossdomain": "0.4.0",
+        "helmet-csp": "2.10.0",
+        "hide-powered-by": "1.1.0",
+        "hpkp": "2.0.0",
+        "hsts": "2.2.0",
+        "nocache": "2.1.0",
+        "referrer-policy": "1.2.0",
+        "x-xss-protection": "1.3.0"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        }
+      }
+    },
+    "helmet-crossdomain": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/helmet-crossdomain/-/helmet-crossdomain-0.4.0.tgz",
+      "integrity": "sha512-AB4DTykRw3HCOxovD1nPR16hllrVImeFp5VBV9/twj66lJ2nU75DP8FPL0/Jp4jj79JhTfG+pFI2MD02kWJ+fA=="
+    },
+    "helmet-csp": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/helmet-csp/-/helmet-csp-2.10.0.tgz",
+      "integrity": "sha512-Rz953ZNEFk8sT2XvewXkYN0Ho4GEZdjAZy4stjiEQV3eN7GDxg1QKmYggH7otDyIA7uGA6XnUMVSgeJwbR5X+w==",
+      "requires": {
+        "bowser": "2.9.0",
+        "camelize": "1.0.0",
+        "content-security-policy-builder": "2.1.0",
+        "dasherize": "2.0.0"
+      }
+    },
+    "help-me": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/help-me/-/help-me-1.1.0.tgz",
+      "integrity": "sha1-jy1QjQYAtKRW2i8IZVbn5cBWo8Y=",
+      "requires": {
+        "callback-stream": "1.1.0",
+        "glob-stream": "6.1.0",
+        "through2": "2.0.5",
+        "xtend": "4.0.2"
+      }
+    },
+    "hex-color-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
+      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
+      "dev": true
+    },
+    "hide-powered-by": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hide-powered-by/-/hide-powered-by-1.1.0.tgz",
+      "integrity": "sha512-Io1zA2yOA1YJslkr+AJlWSf2yWFkKjvkcL9Ni1XSUqnGLr/qRQe2UI3Cn/J9MsJht7yEVCe0SscY1HgVMujbgg=="
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "requires": {
+        "hash.js": "1.1.7",
+        "minimalistic-assert": "1.0.1",
+        "minimalistic-crypto-utils": "1.0.1"
+      }
+    },
+    "hoek": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+    },
+    "homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "1.0.0"
+      }
+    },
+    "hooks-fixed": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hooks-fixed/-/hooks-fixed-2.0.2.tgz",
+      "integrity": "sha512-YurCM4gQSetcrhwEtpQHhQ4M7Zo7poNGqY4kQGeBS6eZtOcT3tnNs01ThFa0jYBByAiYt1MjMjP/YApG0EnAvQ=="
+    },
+    "hosted-git-info": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
+      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
+    },
+    "hpack.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
+      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
+      "requires": {
+        "inherits": "2.0.4",
+        "obuf": "1.1.2",
+        "readable-stream": "2.3.7",
+        "wbuf": "1.7.3"
+      }
+    },
+    "hpkp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hpkp/-/hpkp-2.0.0.tgz",
+      "integrity": "sha1-EOFCJk52IVpdMMROxD3mTe5tFnI="
+    },
+    "hsl-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
+      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
+      "dev": true
+    },
+    "hsla-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
+      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
+      "dev": true
+    },
+    "hsts": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/hsts/-/hsts-2.2.0.tgz",
+      "integrity": "sha512-ToaTnQ2TbJkochoVcdXYm4HOCliNozlviNsg+X2XQLQvZNI/kCHR9rZxVYpJB3UPcHz80PgxRyWQ7PdU1r+VBQ==",
+      "requires": {
+        "depd": "2.0.0"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        }
+      }
+    },
+    "html-comment-regex": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
+      "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==",
+      "dev": true
+    },
+    "html-encoding-sniffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
+      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "1.0.5"
+      }
+    },
+    "html-entities": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz",
+      "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA=="
+    },
+    "html-minifier": {
+      "version": "3.5.21",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.21.tgz",
+      "integrity": "sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==",
+      "requires": {
+        "camel-case": "3.0.0",
+        "clean-css": "4.2.3",
+        "commander": "2.17.1",
+        "he": "1.2.0",
+        "param-case": "2.1.1",
+        "relateurl": "0.2.7",
+        "uglify-js": "3.4.10"
+      }
+    },
+    "html-tags": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-1.2.0.tgz",
+      "integrity": "sha1-x43mW1Zjqll5id0rerSSANfk25g=",
+      "dev": true
+    },
+    "html-webpack-plugin": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
+      "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=",
+      "requires": {
+        "bluebird": "3.7.2",
+        "html-minifier": "3.5.21",
+        "loader-utils": "0.2.17",
+        "lodash": "4.17.20",
+        "pretty-error": "2.1.2",
+        "toposort": "1.0.7"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        }
+      }
+    },
+    "htmlnano": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/htmlnano/-/htmlnano-0.2.8.tgz",
+      "integrity": "sha512-q5gbo4SIDAE5sfJ5V0UD6uu+n1dcO/Mpr0B6SlDlJBoV7xKPne4uG4UwrT8vUWjdjIPJl95TY8EDuEbBW2TG0A==",
+      "dev": true,
+      "requires": {
+        "cssnano": "4.1.10",
+        "posthtml": "0.13.4",
+        "posthtml-render": "1.4.0",
+        "purgecss": "2.3.0",
+        "relateurl": "0.2.7",
+        "srcset": "3.0.0",
+        "svgo": "1.3.2",
+        "terser": "4.8.0",
+        "timsort": "0.3.0",
+        "uncss": "0.17.3"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "posthtml": {
+          "version": "0.13.4",
+          "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.13.4.tgz",
+          "integrity": "sha512-i2oTo/+dwXGC6zaAQSF6WZEQSbEqu10hsvg01DWzGAfZmy31Iiy9ktPh9nnXDfZiYytjxTIvxoK4TI0uk4QWpw==",
+          "dev": true,
+          "requires": {
+            "posthtml-parser": "0.5.3",
+            "posthtml-render": "1.4.0"
+          }
+        },
+        "posthtml-parser": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.5.3.tgz",
+          "integrity": "sha512-uHosRn0y+1wbnlYKrqMjBPoo/kK5LPYImLtiETszNFYfFwAD3cQdD1R2E13Mh5icBxkHj+yKtlIHozCsmVWD/Q==",
+          "dev": true,
+          "requires": {
+            "htmlparser2": "3.10.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "1.1.1",
+            "source-map": "0.6.1"
+          }
+        },
+        "terser": {
+          "version": "4.8.0",
+          "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+          "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+          "dev": true,
+          "requires": {
+            "commander": "2.20.3",
+            "source-map": "0.6.1",
+            "source-map-support": "0.5.19"
+          }
+        }
+      }
+    },
+    "htmlparser2": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "requires": {
+        "domelementtype": "1.3.1",
+        "domhandler": "2.4.2",
+        "domutils": "1.5.1",
+        "entities": "1.1.2",
+        "inherits": "2.0.4",
+        "readable-stream": "3.6.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        }
+      }
+    },
+    "http": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/http/-/http-0.0.0.tgz",
+      "integrity": "sha1-huYybSnF0Dnen6xYSkVon5KfT3I="
+    },
+    "http-deceiver": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
+      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": "1.5.0",
+        "toidentifier": "1.0.0"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "http-parser-js": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.2.tgz",
+      "integrity": "sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ=="
+    },
+    "http-proxy": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
+      "requires": {
+        "eventemitter3": "4.0.7",
+        "follow-redirects": "1.13.1",
+        "requires-port": "1.0.0"
+      }
+    },
+    "http-proxy-agent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-1.0.0.tgz",
+      "integrity": "sha1-zBzjjkU7+YSg93AtLdWcc9CBKEo=",
+      "requires": {
+        "agent-base": "2.1.1",
+        "debug": "2.6.9",
+        "extend": "3.0.2"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-2.1.1.tgz",
+          "integrity": "sha1-1t4Q1a9hMtW9aSQn1G/FOFOQlMc=",
+          "requires": {
+            "extend": "3.0.2",
+            "semver": "5.0.3"
+          }
+        },
+        "semver": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
+          "integrity": "sha1-d0Zt5YnNXTyV8TiqeLxWmjy10no="
+        }
+      }
+    },
+    "http-proxy-middleware": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.2.tgz",
+      "integrity": "sha512-aYk1rTKqLTus23X3L96LGNCGNgWpG4cG0XoZIT1GUPhhulEHX/QalnO6Vbo+WmKWi4AL2IidjuC0wZtbpg0yhQ==",
+      "requires": {
+        "http-proxy": "1.18.1",
+        "is-glob": "4.0.1",
+        "lodash": "4.17.20",
+        "micromatch": "3.1.10"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        }
+      }
+    },
+    "http-signature": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+      "requires": {
+        "assert-plus": "0.2.0",
+        "jsprim": "1.4.1",
+        "sshpk": "1.16.1"
+      }
+    },
+    "http2": {
+      "version": "https://github.com/node-apn/node-http2/archive/apn-2.1.4.tar.gz",
+      "integrity": "sha1-gzPe4tbgCJFSzvrTD0HO1QL5w2Y="
+    },
+    "http2-client": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/http2-client/-/http2-client-1.3.3.tgz",
+      "integrity": "sha512-nUxLymWQ9pzkzTmir24p2RtsgruLmhje7lH3hLX1IpwvyTg77fW+1brenPPP3USAR+rQ36p5sTA/x7sjCJVkAA=="
+    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+    },
+    "https-proxy-agent": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz",
+      "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==",
+      "requires": {
+        "agent-base": "4.3.0",
+        "debug": "3.2.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "hull.js": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/hull.js/-/hull.js-0.2.11.tgz",
+      "integrity": "sha512-WEmMRCFqoZA0d7bD9KY9RK0rTBKRfNqDExi8OvFz5A57hpywyc0Wd5N4egF9cU+E69p1KjE/fTIYU4CjOgXdZQ=="
+    },
+    "i18next": {
+      "version": "1.10.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-1.10.6.tgz",
+      "integrity": "sha1-/d2LSRUCxIlnpiljvHIv+JfN3qA=",
+      "requires": {
+        "cookies": "0.8.0",
+        "i18next-client": "1.10.3",
+        "json5": "0.2.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-0.2.0.tgz",
+          "integrity": "sha1-ttcDXHDEVw+IPH7cdZ3jrgPbM0M="
+        }
+      }
+    },
+    "i18next-client": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/i18next-client/-/i18next-client-1.10.3.tgz",
+      "integrity": "sha1-dtA1NVftkNHnqHdU1QBNP3gB/ek="
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": "2.1.2"
+      }
+    },
+    "icss-replace-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+      "integrity": "sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=",
+      "dev": true
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+    },
+    "ignore": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
+      "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
+    },
+    "ignore-walk": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
+      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "optional": true
+    },
+    "imap": {
+      "version": "0.8.19",
+      "resolved": "https://registry.npmjs.org/imap/-/imap-0.8.19.tgz",
+      "integrity": "sha1-NniHOTSrCc6mukh0HyhNoq9Z2NU=",
+      "requires": {
+        "readable-stream": "1.1.14",
+        "utf7": "1.0.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
+    "immutable": {
+      "version": "3.8.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
+      "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
+    },
+    "import-cwd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
+      "integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
+      "requires": {
+        "import-from": "2.1.0"
+      }
+    },
+    "import-fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
+      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "requires": {
+        "caller-path": "2.0.0",
+        "resolve-from": "3.0.0"
+      }
+    },
+    "import-from": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
+      "integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
+      "requires": {
+        "resolve-from": "3.0.0"
+      }
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+    },
+    "import-local": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
+      "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==",
+      "requires": {
+        "pkg-dir": "2.0.0",
+        "resolve-cwd": "2.0.0"
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+    },
+    "in-publish": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
+      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
+      "optional": true
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "requires": {
+        "repeating": "2.0.1"
+      }
+    },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
+    "indexof": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
+      "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "1.4.0",
+        "wrappy": "1.0.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "internal-ip": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-1.2.0.tgz",
+      "integrity": "sha1-rp+/k7mEh4eF1QqN4bNWlWBYz1w=",
+      "requires": {
+        "meow": "3.7.0"
+      }
+    },
+    "interpret": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
+      "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "1.4.0"
+      }
+    },
+    "invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+    },
+    "ip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
+      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "is": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/is/-/is-3.3.0.tgz",
+      "integrity": "sha512-nW24QBoPcFGGHJGUwnfpI7Yc5CdqWNdsyHQszVE/z2pKHXzh7FZ5GWhJqSyaQ9wMkQnsTx+kAI8bHlCX4tKdbg==",
+      "dev": true
+    },
+    "is-absolute": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",
+      "integrity": "sha1-IN5p89uULvLYe5wto28XIjWxtes=",
+      "requires": {
+        "is-relative": "0.2.1",
+        "is-windows": "0.2.0"
+      },
+      "dependencies": {
+        "is-windows": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+          "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw="
+        }
+      }
+    },
+    "is-absolute-url": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-2.1.0.tgz",
+      "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=",
+      "dev": true
+    },
+    "is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "is-arguments": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
+      "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
+      "requires": {
+        "call-bind": "1.0.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
+    "is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "requires": {
+        "binary-extensions": "1.13.1"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "is-callable": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.2.tgz",
+      "integrity": "sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA=="
+    },
+    "is-ci": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz",
+      "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==",
+      "requires": {
+        "ci-info": "1.6.0"
+      }
+    },
+    "is-color-stop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
+      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
+      "dev": true,
+      "requires": {
+        "css-color-names": "0.0.4",
+        "hex-color-regex": "1.1.0",
+        "hsl-regex": "1.0.0",
+        "hsla-regex": "1.0.0",
+        "rgb-regex": "1.0.1",
+        "rgba-regex": "1.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "requires": {
+        "has": "1.0.3"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "is-date-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
+    },
+    "is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "requires": {
+        "is-accessor-descriptor": "0.1.6",
+        "is-data-descriptor": "0.1.4",
+        "kind-of": "5.1.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
+    "is-directory": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+    },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE="
+    },
+    "is-equal-shallow": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
+      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
+      "requires": {
+        "is-primitive": "2.0.0"
+      }
+    },
+    "is-expression": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-expression/-/is-expression-4.0.0.tgz",
+      "integrity": "sha512-zMIXX63sxzG3XrkHkrAPvm/OVZVSCPNkwMHU8oTX7/U3AL78I0QXCEICXUM13BIa8TYGZ68PiTKfQz3yaTNr4A==",
+      "requires": {
+        "acorn": "7.4.1",
+        "object-assign": "4.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        }
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+    },
+    "is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
+    },
+    "is-finite": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
+      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w=="
+    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "requires": {
+        "number-is-nan": "1.0.1"
+      }
+    },
+    "is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "requires": {
+        "is-extglob": "1.0.0"
+      }
+    },
+    "is-html": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-html/-/is-html-1.1.0.tgz",
+      "integrity": "sha1-4E8cGNOUhRETlvmgJz6rUa8hhGQ=",
+      "dev": true,
+      "requires": {
+        "html-tags": "1.2.0"
+      }
+    },
+    "is-installed-globally": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
+      "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=",
+      "requires": {
+        "global-dirs": "0.1.1",
+        "is-path-inside": "1.0.1"
+      }
+    },
+    "is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ==",
+      "dev": true
+    },
+    "is-my-json-valid": {
+      "version": "2.20.5",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.20.5.tgz",
+      "integrity": "sha512-VTPuvvGQtxvCeghwspQu1rBgjYUT6FGxPlvFKbYuFtgc4ADsX3U5ihZOYN0qyU6u+d4X9xXb0IT5O6QpXKt87A==",
+      "dev": true,
+      "requires": {
+        "generate-function": "2.3.1",
+        "generate-object-property": "1.2.0",
+        "is-my-ip-valid": "1.0.0",
+        "jsonpointer": "4.1.0",
+        "xtend": "4.0.2"
+      }
+    },
+    "is-nan": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
+      "integrity": "sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3"
+      }
+    },
+    "is-negated-glob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+      "integrity": "sha1-aRC8pdqMleeEtXUbl2z1oQ/uNtI="
+    },
+    "is-negative-zero": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
+      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w=="
+    },
+    "is-npm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
+      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ="
+    },
+    "is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+    },
+    "is-path-cwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-1.0.0.tgz",
+      "integrity": "sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0="
+    },
+    "is-path-in-cwd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz",
+      "integrity": "sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==",
+      "requires": {
+        "is-path-inside": "1.0.1"
+      }
+    },
+    "is-path-inside": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz",
+      "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=",
+      "requires": {
+        "path-is-inside": "1.0.2"
+      }
+    },
+    "is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4="
+    },
+    "is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "requires": {
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "is-posix-bracket": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
+      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q="
+    },
+    "is-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
+      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU="
+    },
+    "is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
+    },
+    "is-property": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+      "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
+      "dev": true
+    },
+    "is-redirect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
+      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ="
+    },
+    "is-regex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz",
+      "integrity": "sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==",
+      "requires": {
+        "has-symbols": "1.0.1"
+      }
+    },
+    "is-relative": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
+      "integrity": "sha1-0n9MfVFtF1+2ENuEu+7yPDvJeqU=",
+      "requires": {
+        "is-unc-path": "0.1.2"
+      }
+    },
+    "is-resolvable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
+      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
+      "dev": true
+    },
+    "is-retry-allowed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+    },
+    "is-stream-ended": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-stream-ended/-/is-stream-ended-0.1.4.tgz",
+      "integrity": "sha512-xj0XPvmr7bQFTvirqnFr50o0hQIh6ZItDqloxt5aJrR4NQsYeSsyFQERYGCAzfindAcnKjINnwEEgLx4IqVzQw==",
+      "optional": true
+    },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ=="
+    },
+    "is-svg": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
+      "integrity": "sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==",
+      "dev": true,
+      "requires": {
+        "html-comment-regex": "1.1.2"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
+      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "requires": {
+        "has-symbols": "1.0.1"
+      }
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "is-unc-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-0.1.2.tgz",
+      "integrity": "sha1-arBTpyVzwQJQ/0FqOBTDUXivObk=",
+      "requires": {
+        "unc-path-regex": "0.1.2"
+      }
+    },
+    "is-url": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz",
+      "integrity": "sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==",
+      "dev": true
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "isbinaryfile": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-3.0.3.tgz",
+      "integrity": "sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==",
+      "dev": true,
+      "requires": {
+        "buffer-alloc": "1.2.0"
+      }
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+    },
+    "isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "requires": {
+        "isarray": "1.0.0"
+      }
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "istanbul-api": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.3.7.tgz",
+      "integrity": "sha512-4/ApBnMVeEPG3EkSzcw25wDe4N66wxwn+KKn6b47vyek8Xb3NBAcg4xfuQbS7BqcZuTX4wxfD5lVagdggR3gyA==",
+      "dev": true,
+      "requires": {
+        "async": "2.6.3",
+        "fileset": "2.0.3",
+        "istanbul-lib-coverage": "1.2.1",
+        "istanbul-lib-hook": "1.2.2",
+        "istanbul-lib-instrument": "1.10.2",
+        "istanbul-lib-report": "1.1.5",
+        "istanbul-lib-source-maps": "1.2.6",
+        "istanbul-reports": "1.5.1",
+        "js-yaml": "3.14.1",
+        "mkdirp": "0.5.5",
+        "once": "1.4.0"
+      }
+    },
+    "istanbul-instrumenter-loader": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/istanbul-instrumenter-loader/-/istanbul-instrumenter-loader-3.0.1.tgz",
+      "integrity": "sha512-a5SPObZgS0jB/ixaKSMdn6n/gXSrK2S6q/UfRJBT3e6gQmVjwZROTODQsYW5ZNwOu78hG62Y3fWlebaVOL0C+w==",
+      "requires": {
+        "convert-source-map": "1.7.0",
+        "istanbul-lib-instrument": "1.10.2",
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
+      }
+    },
+    "istanbul-lib-coverage": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.2.1.tgz",
+      "integrity": "sha512-PzITeunAgyGbtY1ibVIUiV679EFChHjoMNRibEIobvmrCRaIgwLxNucOSimtNWUhEib/oO7QY2imD75JVgCJWQ=="
+    },
+    "istanbul-lib-hook": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-1.2.2.tgz",
+      "integrity": "sha512-/Jmq7Y1VeHnZEQ3TL10VHyb564mn6VrQXHchON9Jf/AEcmQ3ZIiyD1BVzNOKTZf/G3gE+kiGK6SmpF9y3qGPLw==",
+      "dev": true,
+      "requires": {
+        "append-transform": "0.4.0"
+      }
+    },
+    "istanbul-lib-instrument": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.10.2.tgz",
+      "integrity": "sha512-aWHxfxDqvh/ZlxR8BBaEPVSWDPUkGD63VjGQn3jcw8jCp7sHEMKcrj4xfJn/ABzdMEHiQNyvDQhqm5o8+SQg7A==",
+      "requires": {
+        "babel-generator": "6.26.1",
+        "babel-template": "6.26.0",
+        "babel-traverse": "6.26.0",
+        "babel-types": "6.26.0",
+        "babylon": "6.18.0",
+        "istanbul-lib-coverage": "1.2.1",
+        "semver": "5.7.1"
+      }
+    },
+    "istanbul-lib-report": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-1.1.5.tgz",
+      "integrity": "sha512-UsYfRMoi6QO/doUshYNqcKJqVmFe9w51GZz8BS3WB0lYxAllQYklka2wP9+dGZeHYaWIdcXUx8JGdbqaoXRXzw==",
+      "dev": true,
+      "requires": {
+        "istanbul-lib-coverage": "1.2.1",
+        "mkdirp": "0.5.5",
+        "path-parse": "1.0.6",
+        "supports-color": "3.2.3"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+          "dev": true,
+          "requires": {
+            "has-flag": "1.0.0"
+          }
+        }
+      }
+    },
+    "istanbul-lib-source-maps": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.6.tgz",
+      "integrity": "sha512-TtbsY5GIHgbMsMiRw35YBHGpZ1DVFEO19vxxeiDMYaeOFOCzfnYVxvl6pOUIZR4dtPhAGpSMup8OyF8ubsaqEg==",
+      "dev": true,
+      "requires": {
+        "debug": "3.2.7",
+        "istanbul-lib-coverage": "1.2.1",
+        "mkdirp": "0.5.5",
+        "rimraf": "2.7.1",
+        "source-map": "0.5.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
+      }
+    },
+    "istanbul-reports": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.5.1.tgz",
+      "integrity": "sha512-+cfoZ0UXzWjhAdzosCPP3AN8vvef8XDkWtTfgaN+7L3YTpNYITnCaEkceo5SEYy644VkHka/P1FvkWvrG/rrJw==",
+      "dev": true,
+      "requires": {
+        "handlebars": "4.7.6"
+      }
+    },
+    "jackpot": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/jackpot/-/jackpot-0.0.6.tgz",
+      "integrity": "sha1-PP8GQoXL9m9OqyWTyQvOgWqCGEk=",
+      "dev": true,
+      "requires": {
+        "retry": "0.6.0"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.6.0.tgz",
+          "integrity": "sha1-HAEHEyeab9Ho3vKK8MP/GHHKpTc=",
+          "dev": true
+        }
+      }
+    },
+    "jade": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/jade/-/jade-1.11.0.tgz",
+      "integrity": "sha1-nIDlOMEtP7lcjZu5VZ+gzAQEBf0=",
+      "dev": true,
+      "requires": {
+        "character-parser": "1.2.1",
+        "clean-css": "3.4.28",
+        "commander": "2.6.0",
+        "constantinople": "3.0.2",
+        "jstransformer": "0.0.2",
+        "mkdirp": "0.5.5",
+        "transformers": "2.1.0",
+        "uglify-js": "2.8.29",
+        "void-elements": "2.0.1",
+        "with": "4.0.3"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "2.7.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz",
+          "integrity": "sha1-q259nYhqrKiwhbwzEreaGYQz8Oc=",
+          "dev": true
+        },
+        "asap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/asap/-/asap-1.0.0.tgz",
+          "integrity": "sha1-sqRdpf36ILBJb8N2jMJ8EvqRan0=",
+          "dev": true
+        },
+        "camelcase": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
+          "dev": true
+        },
+        "character-parser": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-1.2.1.tgz",
+          "integrity": "sha1-wN3kqxgnE7kZuXCVmhI+zBow/NY=",
+          "dev": true
+        },
+        "clean-css": {
+          "version": "3.4.28",
+          "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz",
+          "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=",
+          "dev": true,
+          "requires": {
+            "commander": "2.8.1",
+            "source-map": "0.4.4"
+          },
+          "dependencies": {
+            "commander": {
+              "version": "2.8.1",
+              "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
+              "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
+              "dev": true,
+              "requires": {
+                "graceful-readlink": "1.0.1"
+              }
+            }
+          }
+        },
+        "cliui": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+          "dev": true,
+          "requires": {
+            "center-align": "0.1.3",
+            "right-align": "0.1.3",
+            "wordwrap": "0.0.2"
+          }
+        },
+        "commander": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
+          "integrity": "sha1-nfflL7Kgyw+4kFjugMMQQiXzfh0=",
+          "dev": true
+        },
+        "constantinople": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.0.2.tgz",
+          "integrity": "sha1-S5RdmTeQe82Y7ldRIsOBdRZUQUE=",
+          "dev": true,
+          "requires": {
+            "acorn": "2.7.0"
+          }
+        },
+        "jstransformer": {
+          "version": "0.0.2",
+          "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-0.0.2.tgz",
+          "integrity": "sha1-eq4pqQPRls+glz2IXT5HlH7Ndqs=",
+          "dev": true,
+          "requires": {
+            "is-promise": "2.2.2",
+            "promise": "6.1.0"
+          }
+        },
+        "promise": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-6.1.0.tgz",
+          "integrity": "sha1-LOcp9rlLRcJoka0GAsXJDgTG7vY=",
+          "dev": true,
+          "requires": {
+            "asap": "1.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        },
+        "uglify-js": {
+          "version": "2.8.29",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+          "dev": true,
+          "requires": {
+            "source-map": "0.5.7",
+            "uglify-to-browserify": "1.0.2",
+            "yargs": "3.10.0"
+          },
+          "dependencies": {
+            "source-map": {
+              "version": "0.5.7",
+              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+              "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+              "dev": true
+            }
+          }
+        },
+        "void-elements": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+          "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
+          "dev": true
+        },
+        "with": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/with/-/with-4.0.3.tgz",
+          "integrity": "sha1-7v0VTp550sjTQXtkeo8U2f7M4U4=",
+          "dev": true,
+          "requires": {
+            "acorn": "1.2.2",
+            "acorn-globals": "1.0.9"
+          },
+          "dependencies": {
+            "acorn": {
+              "version": "1.2.2",
+              "resolved": "https://registry.npmjs.org/acorn/-/acorn-1.2.2.tgz",
+              "integrity": "sha1-yM4n3grMdtiW0rH6099YjZ6C8BQ=",
+              "dev": true
+            }
+          }
+        },
+        "yargs": {
+          "version": "3.10.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+          "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+          "dev": true,
+          "requires": {
+            "camelcase": "1.2.1",
+            "cliui": "2.1.0",
+            "decamelize": "1.2.0",
+            "window-size": "0.1.0"
+          }
+        }
+      }
+    },
+    "jasmine": {
+      "version": "2.99.0",
+      "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.99.0.tgz",
+      "integrity": "sha1-jKctEC5jm4Z8ZImFbg4YqceqQrc=",
+      "dev": true,
+      "requires": {
+        "exit": "0.1.2",
+        "glob": "7.1.6",
+        "jasmine-core": "2.99.1"
+      },
+      "dependencies": {
+        "jasmine-core": {
+          "version": "2.99.1",
+          "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.99.1.tgz",
+          "integrity": "sha1-5kAN8ea1bhMLYcS80JPap/boyhU=",
+          "dev": true
+        }
+      }
+    },
+    "jasmine-core": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/jasmine-core/-/jasmine-core-2.6.4.tgz",
+      "integrity": "sha1-3skmzQqfoof7bbXHVfpIfnTOysU=",
+      "dev": true
+    },
+    "jasmine-spec-reporter": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/jasmine-spec-reporter/-/jasmine-spec-reporter-4.1.1.tgz",
+      "integrity": "sha1-Wm1Yq11hvqcwn7wnkjlRF1axtYg=",
+      "dev": true,
+      "requires": {
+        "colors": "1.1.2"
+      },
+      "dependencies": {
+        "colors": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+          "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
+          "dev": true
+        }
+      }
+    },
+    "jasminewd2": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/jasminewd2/-/jasminewd2-2.2.0.tgz",
+      "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
+      "dev": true
+    },
+    "javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k="
+    },
+    "jmespath": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
+      "integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
+    },
+    "jquery": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
+      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+    },
+    "js-base64": {
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
+      "optional": true
+    },
+    "js-stringify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
+      "integrity": "sha1-Fzb939lyTyijaCrcYjCufk6Weds="
+    },
+    "js-tokens": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
+    },
+    "js-yaml": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "requires": {
+        "argparse": "1.0.10",
+        "esprima": "4.0.1"
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
+    },
+    "jsdom": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-14.1.0.tgz",
+      "integrity": "sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng==",
+      "dev": true,
+      "requires": {
+        "abab": "2.0.5",
+        "acorn": "6.4.2",
+        "acorn-globals": "4.3.4",
+        "array-equal": "1.0.0",
+        "cssom": "0.3.8",
+        "cssstyle": "1.4.0",
+        "data-urls": "1.1.0",
+        "domexception": "1.0.1",
+        "escodegen": "1.14.3",
+        "html-encoding-sniffer": "1.0.2",
+        "nwsapi": "2.2.0",
+        "parse5": "5.1.0",
+        "pn": "1.1.0",
+        "request": "2.88.2",
+        "request-promise-native": "1.0.9",
+        "saxes": "3.1.11",
+        "symbol-tree": "3.2.4",
+        "tough-cookie": "2.5.0",
+        "w3c-hr-time": "1.0.2",
+        "w3c-xmlserializer": "1.1.2",
+        "webidl-conversions": "4.0.2",
+        "whatwg-encoding": "1.0.5",
+        "whatwg-mimetype": "2.3.0",
+        "whatwg-url": "7.1.0",
+        "ws": "6.2.1",
+        "xml-name-validator": "3.0.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.4.2",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+          "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+          "dev": true
+        },
+        "acorn-globals": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz",
+          "integrity": "sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==",
+          "dev": true,
+          "requires": {
+            "acorn": "6.4.2",
+            "acorn-walk": "6.2.0"
+          }
+        },
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+          "dev": true
+        },
+        "escodegen": {
+          "version": "1.14.3",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+          "dev": true,
+          "requires": {
+            "esprima": "4.0.1",
+            "estraverse": "4.3.0",
+            "esutils": "2.0.3",
+            "optionator": "0.8.3",
+            "source-map": "0.6.1"
+          }
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+          "dev": true
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "dev": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+          "dev": true
+        },
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.0.tgz",
+          "integrity": "sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==",
+          "dev": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        },
+        "ws": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+          "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "1.0.1"
+          }
+        }
+      }
+    },
+    "jsesc": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-1.3.0.tgz",
+      "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
+    },
+    "json-bigint": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-0.3.1.tgz",
+      "integrity": "sha512-DGWnSzmusIreWlEupsUelHrhwmPPE+FiQvg+drKfk2p+bdEYa5mp4PJ8JsCWqae0M2jQNb0HPvnwvf1qOTThzQ==",
+      "requires": {
+        "bignumber.js": "9.0.1"
+      }
+    },
+    "json-loader": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/json-loader/-/json-loader-0.5.7.tgz",
+      "integrity": "sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w=="
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
+    "json-schema-traverse": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz",
+      "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A="
+    },
+    "json-source-map": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-source-map/-/json-source-map-0.4.0.tgz",
+      "integrity": "sha1-7qg3/jzi8r/VsTaHd5QGNUQjw1U="
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "requires": {
+        "jsonify": "0.0.0"
+      }
+    },
+    "json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE="
+    },
+    "json-stringify-pretty-compact": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/json-stringify-pretty-compact/-/json-stringify-pretty-compact-2.0.0.tgz",
+      "integrity": "sha512-WRitRfs6BGq4q8gTgOy4ek7iPFXjbra0H3PmDLKm2xnZ+Gh1HUhiKGgCZkSPNULlP7mvfu6FV/mOLhCarspADQ==",
+      "dev": true
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
+    "json3": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz",
+      "integrity": "sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA=="
+    },
+    "json5": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+    },
+    "jsonata": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/jsonata/-/jsonata-1.2.6.tgz",
+      "integrity": "sha512-Cily/FilfmMR5XfERd84/Zcaii1mjZHni4ypdFIkI4WcveC7CzhQiqnUXT4WqVvXQJ8bF0NPBvjWxVSNSUN/1w=="
+    },
+    "jsoneditor": {
+      "version": "5.34.0",
+      "resolved": "https://registry.npmjs.org/jsoneditor/-/jsoneditor-5.34.0.tgz",
+      "integrity": "sha512-/F7L6oXuRkv2/FKFIL4NMWF0P+oVvSWLJPVEVP/7KGehBj6dtOp5FKdfLcNkIgbqzklXx/NDzHSXYlf64wqmuQ==",
+      "requires": {
+        "ajv": "5.5.2",
+        "brace": "0.11.1",
+        "javascript-natural-sort": "0.7.1",
+        "jmespath": "0.15.0",
+        "json-source-map": "0.4.0",
+        "mobius1-selectr": "2.4.10",
+        "picomodal": "3.0.0",
+        "vanilla-picker": "2.8.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        }
+      }
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "4.2.4"
+      }
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
+    },
+    "jsonpointer": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.1.0.tgz",
+      "integrity": "sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==",
+      "dev": true
+    },
+    "jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "requires": {
+        "jws": "3.2.2",
+        "lodash.includes": "4.3.0",
+        "lodash.isboolean": "3.0.3",
+        "lodash.isinteger": "4.0.4",
+        "lodash.isnumber": "3.0.3",
+        "lodash.isplainobject": "4.0.6",
+        "lodash.isstring": "4.0.1",
+        "lodash.once": "4.1.1",
+        "ms": "2.1.3",
+        "semver": "5.7.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "jspm-config": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/jspm-config/-/jspm-config-0.3.4.tgz",
+      "integrity": "sha1-RMJpAuSujs4jZs7cn/FrEKXzkcY=",
+      "requires": {
+        "any-promise": "1.3.0",
+        "graceful-fs": "4.2.4",
+        "make-error-cause": "1.2.2",
+        "object.pick": "1.3.0",
+        "parse-json": "2.2.0",
+        "strip-bom": "3.0.0",
+        "thenify": "3.3.1",
+        "throat": "3.2.0",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+        }
+      }
+    },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "jstransformer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
+      "integrity": "sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=",
+      "requires": {
+        "is-promise": "2.2.2",
+        "promise": "7.3.1"
+      }
+    },
+    "jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "requires": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "jwk-to-pem": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/jwk-to-pem/-/jwk-to-pem-1.2.6.tgz",
+      "integrity": "sha1-1QfOzkAInFJI4J7GgmaiAwqcYyU=",
+      "dev": true,
+      "requires": {
+        "asn1.js": "4.10.1",
+        "elliptic": "6.5.3",
+        "safe-buffer": "5.1.2"
+      },
+      "dependencies": {
+        "asn1.js": {
+          "version": "4.10.1",
+          "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
+          "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
+          "dev": true,
+          "requires": {
+            "bn.js": "4.11.9",
+            "inherits": "2.0.4",
+            "minimalistic-assert": "1.0.1"
+          }
+        },
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==",
+          "dev": true
+        }
+      }
+    },
+    "jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "requires": {
+        "jwa": "1.4.1",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "jwt-simple": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/jwt-simple/-/jwt-simple-0.4.1.tgz",
+      "integrity": "sha1-t//qPp9UembM/Usfv4UKsGSdTvc=",
+      "dev": true
+    },
+    "kafka-node": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/kafka-node/-/kafka-node-3.0.1.tgz",
+      "integrity": "sha512-id9bdOQ35OkrQHHbIjtpC02Y2kTpmLQw/B9wbe6uAzjkLaRyu30GnJoz22vZ8uBB9DZ0JgwjHrKOK7sB3i41LA==",
+      "requires": {
+        "async": "2.6.3",
+        "binary": "0.3.0",
+        "bl": "1.2.3",
+        "buffer-crc32": "0.2.13",
+        "buffermaker": "1.2.1",
+        "debug": "2.6.9",
+        "denque": "1.4.1",
+        "lodash": "4.17.20",
+        "minimatch": "3.0.4",
+        "nested-error-stacks": "2.1.0",
+        "node-zookeeper-client": "0.2.3",
+        "optional": "0.1.4",
+        "retry": "0.10.1",
+        "snappy": "6.3.5",
+        "uuid": "3.4.0"
+      },
+      "dependencies": {
+        "retry": {
+          "version": "0.10.1",
+          "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz",
+          "integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q="
+        }
+      }
+    },
+    "kareem": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/kareem/-/kareem-1.5.0.tgz",
+      "integrity": "sha1-4+QQHZ3P3imXadr0tNtk2JXRdEg="
+    },
+    "karma": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz",
+      "integrity": "sha512-k5pBjHDhmkdaUccnC7gE3mBzZjcxyxYsYVaqiL2G5AqlfLyBO5nw2VdNK+O16cveEPd/gIOWULH7gkiYYwVNHg==",
+      "dev": true,
+      "requires": {
+        "bluebird": "3.7.2",
+        "body-parser": "1.19.0",
+        "chokidar": "1.7.0",
+        "colors": "1.4.0",
+        "combine-lists": "1.0.1",
+        "connect": "3.7.0",
+        "core-js": "2.4.1",
+        "di": "0.0.1",
+        "dom-serialize": "2.2.1",
+        "expand-braces": "0.1.2",
+        "glob": "7.1.6",
+        "graceful-fs": "4.2.4",
+        "http-proxy": "1.18.1",
+        "isbinaryfile": "3.0.3",
+        "lodash": "3.10.1",
+        "log4js": "0.6.38",
+        "mime": "1.6.0",
+        "minimatch": "3.0.4",
+        "optimist": "0.6.1",
+        "qjobs": "1.2.0",
+        "range-parser": "1.2.1",
+        "rimraf": "2.7.1",
+        "safe-buffer": "5.1.2",
+        "socket.io": "1.7.3",
+        "source-map": "0.5.7",
+        "tmp": "0.0.31",
+        "useragent": "2.3.0"
+      },
+      "dependencies": {
+        "accepts": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
+          "integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
+          "dev": true,
+          "requires": {
+            "mime-types": "2.1.27",
+            "negotiator": "0.6.1"
+          }
+        },
+        "arraybuffer.slice": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz",
+          "integrity": "sha1-8zshWfBTKj8xB6JywMz70a0peco=",
+          "dev": true
+        },
+        "blob": {
+          "version": "0.0.4",
+          "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
+          "integrity": "sha1-vPEwUspURj8w+fx+lbmkdjCpSSE=",
+          "dev": true
+        },
+        "component-emitter": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.1.2.tgz",
+          "integrity": "sha1-KWWU8nU9qmOZbSrwjRWpURbJrsM=",
+          "dev": true
+        },
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.3.3.tgz",
+          "integrity": "sha1-QMRT5n5uE8kB3ewxeviYbNqe/4w=",
+          "dev": true,
+          "requires": {
+            "ms": "0.7.2"
+          }
+        },
+        "engine.io": {
+          "version": "1.8.3",
+          "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-1.8.3.tgz",
+          "integrity": "sha1-jef5eJXSDTm4X4ju7nd7K9QrE9Q=",
+          "dev": true,
+          "requires": {
+            "accepts": "1.3.3",
+            "base64id": "1.0.0",
+            "cookie": "0.3.1",
+            "debug": "2.3.3",
+            "engine.io-parser": "1.3.2",
+            "ws": "1.1.2"
+          }
+        },
+        "engine.io-client": {
+          "version": "1.8.3",
+          "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-1.8.3.tgz",
+          "integrity": "sha1-F5jtk0USRkU9TG9jXXogH+lA1as=",
+          "dev": true,
+          "requires": {
+            "component-emitter": "1.2.1",
+            "component-inherit": "0.0.3",
+            "debug": "2.3.3",
+            "engine.io-parser": "1.3.2",
+            "has-cors": "1.1.0",
+            "indexof": "0.0.1",
+            "parsejson": "0.0.3",
+            "parseqs": "0.0.5",
+            "parseuri": "0.0.5",
+            "ws": "1.1.2",
+            "xmlhttprequest-ssl": "1.5.3",
+            "yeast": "0.1.2"
+          },
+          "dependencies": {
+            "component-emitter": {
+              "version": "1.2.1",
+              "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+              "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
+              "dev": true
+            }
+          }
+        },
+        "engine.io-parser": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-1.3.2.tgz",
+          "integrity": "sha1-k3sHnwAH0Ik+xW1GyyILjLQ1Igo=",
+          "dev": true,
+          "requires": {
+            "after": "0.8.2",
+            "arraybuffer.slice": "0.0.6",
+            "base64-arraybuffer": "0.1.5",
+            "blob": "0.0.4",
+            "has-binary": "0.1.7",
+            "wtf-8": "1.0.0"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "json3": {
+          "version": "3.3.2",
+          "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
+          "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
+          "dev": true
+        },
+        "lodash": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y=",
+          "dev": true
+        },
+        "ms": {
+          "version": "0.7.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
+          "dev": true
+        },
+        "negotiator": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
+          "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
+          "dev": true
+        },
+        "object-assign": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.0.tgz",
+          "integrity": "sha1-ejs9DpgGPUP0wD8uiubNUahog6A=",
+          "dev": true
+        },
+        "socket.io": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-1.7.3.tgz",
+          "integrity": "sha1-uK+cq6AJSeVo42nxMn6pvp6iRhs=",
+          "dev": true,
+          "requires": {
+            "debug": "2.3.3",
+            "engine.io": "1.8.3",
+            "has-binary": "0.1.7",
+            "object-assign": "4.1.0",
+            "socket.io-adapter": "0.5.0",
+            "socket.io-client": "1.7.3",
+            "socket.io-parser": "2.3.1"
+          }
+        },
+        "socket.io-adapter": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-0.5.0.tgz",
+          "integrity": "sha1-y21LuL7IHhB4uZZ3+c7QBGBmu4s=",
+          "dev": true,
+          "requires": {
+            "debug": "2.3.3",
+            "socket.io-parser": "2.3.1"
+          }
+        },
+        "socket.io-client": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-1.7.3.tgz",
+          "integrity": "sha1-sw6GqhDV7zVGYBwJzeR2Xjgdo3c=",
+          "dev": true,
+          "requires": {
+            "backo2": "1.0.2",
+            "component-bind": "1.0.0",
+            "component-emitter": "1.2.1",
+            "debug": "2.3.3",
+            "engine.io-client": "1.8.3",
+            "has-binary": "0.1.7",
+            "indexof": "0.0.1",
+            "object-component": "0.0.3",
+            "parseuri": "0.0.5",
+            "socket.io-parser": "2.3.1",
+            "to-array": "0.1.4"
+          },
+          "dependencies": {
+            "component-emitter": {
+              "version": "1.2.1",
+              "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+              "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
+              "dev": true
+            }
+          }
+        },
+        "socket.io-parser": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-2.3.1.tgz",
+          "integrity": "sha1-3VMgJRA85Clpcya+/WQAX8/ltKA=",
+          "dev": true,
+          "requires": {
+            "component-emitter": "1.1.2",
+            "debug": "2.2.0",
+            "isarray": "0.0.1",
+            "json3": "3.3.2"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+              "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+              "dev": true,
+              "requires": {
+                "ms": "0.7.1"
+              }
+            },
+            "ms": {
+              "version": "0.7.1",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+              "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
+              "dev": true
+            }
+          }
+        },
+        "ultron": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
+          "integrity": "sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po=",
+          "dev": true
+        },
+        "ws": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.2.tgz",
+          "integrity": "sha1-iiRPoFJAHgjJiGz0SoUYnh/UBn8=",
+          "dev": true,
+          "requires": {
+            "options": "0.0.6",
+            "ultron": "1.0.2"
+          }
+        },
+        "xmlhttprequest-ssl": {
+          "version": "1.5.3",
+          "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz",
+          "integrity": "sha1-GFqIjATspGw+QHDZn3tJ3jUomS0=",
+          "dev": true
+        }
+      }
+    },
+    "karma-chrome-launcher": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/karma-chrome-launcher/-/karma-chrome-launcher-2.1.1.tgz",
+      "integrity": "sha1-IWh5xorATY1RQOmWGboEtZr9Rs8=",
+      "dev": true,
+      "requires": {
+        "fs-access": "1.0.1",
+        "which": "1.3.1"
+      }
+    },
+    "karma-cli": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/karma-cli/-/karma-cli-1.0.1.tgz",
+      "integrity": "sha1-rmw8WKMTodALRRZMRVubhs4X+WA=",
+      "dev": true,
+      "requires": {
+        "resolve": "1.19.0"
+      }
+    },
+    "karma-coverage-istanbul-reporter": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-1.2.1.tgz",
+      "integrity": "sha1-XjynuaFT2xy63/70xG2XjTilMVQ=",
+      "dev": true,
+      "requires": {
+        "istanbul-api": "1.3.7"
+      }
+    },
+    "karma-jasmine": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-1.1.2.tgz",
+      "integrity": "sha1-OU8rJf+0pkS5rabyLUQ+L9CIhsM=",
+      "dev": true
+    },
+    "karma-jasmine-html-reporter": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-0.2.2.tgz",
+      "integrity": "sha1-SKjl7xiAdhfuK14zwRlMNbQ5Ukw=",
+      "dev": true,
+      "requires": {
+        "karma-jasmine": "1.1.2"
+      }
+    },
+    "karma-source-map-support": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz",
+      "integrity": "sha512-RsBECncGO17KAoJCYXjv+ckIz+Ii9NCi+9enk+rq6XC81ezYkb4/RHE6CTXdA7IOJqoF3wcaLfVG0CPmE5ca6A==",
+      "requires": {
+        "source-map-support": "0.5.19"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "requires": {
+            "buffer-from": "1.1.1",
+            "source-map": "0.6.1"
+          }
+        }
+      }
+    },
+    "katex": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.7.1.tgz",
+      "integrity": "sha1-BrtSmO+tBeHnIoA1uo4VkfMGG48=",
+      "requires": {
+        "match-at": "0.1.1"
+      }
+    },
+    "keygrip": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
+      "integrity": "sha512-iYSchDJ+liQ8iwbSI2QqsQOvqv58eJCEanyJPJi+Khyu8smkcKSFUCbPwzFcL7YVtZ6eONjqRX/38caJ7QjRAQ==",
+      "requires": {
+        "tsscmp": "1.0.6"
+      }
+    },
+    "killable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
+      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg=="
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "requires": {
+        "is-buffer": "1.1.6"
+      }
+    },
+    "klaw": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "requires": {
+        "graceful-fs": "4.2.4"
+      }
+    },
+    "kuler": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz",
+      "integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A=="
+    },
+    "latest-version": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz",
+      "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=",
+      "requires": {
+        "package-json": "4.0.1"
+      }
+    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
+    },
+    "lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "requires": {
+        "invert-kv": "1.0.0"
+      }
+    },
+    "less": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-2.7.3.tgz",
+      "integrity": "sha512-KPdIJKWcEAb02TuJtaLrhue0krtRLoRoo7x6BNJIBelO00t/CCdJQUnHW5V34OnHMWzIktSalJxRO+FvytQlCQ==",
+      "requires": {
+        "errno": "0.1.8",
+        "graceful-fs": "4.2.4",
+        "image-size": "0.5.5",
+        "mime": "1.6.0",
+        "mkdirp": "0.5.5",
+        "promise": "7.3.1",
+        "request": "2.81.0",
+        "source-map": "0.5.7"
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "requires": {
+        "clone": "2.1.2",
+        "loader-utils": "1.1.0",
+        "pify": "3.0.0"
+      }
+    },
+    "leven": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
+      "integrity": "sha1-wuep93IJTe6dNCAq6KzORoeHVYA="
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "1.1.2",
+        "type-check": "0.3.2"
+      }
+    },
+    "libbase64": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/libbase64/-/libbase64-0.1.0.tgz",
+      "integrity": "sha1-YjUag5VjrF/1vSbxL2Dpgwu3UeY="
+    },
+    "libmime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/libmime/-/libmime-1.2.0.tgz",
+      "integrity": "sha1-jYS087Ils3BEECNu9JSQZDa6dCs=",
+      "requires": {
+        "iconv-lite": "0.4.24",
+        "libbase64": "0.1.0",
+        "libqp": "1.1.0"
+      }
+    },
+    "libqp": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/libqp/-/libqp-1.1.0.tgz",
+      "integrity": "sha1-9ebgatdLeU+1tbZpiL9yjvHe2+g="
+    },
+    "license-webpack-plugin": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-1.5.0.tgz",
+      "integrity": "sha512-Of/H79rZqm2aeg4RnP9SMSh19qkKemoLT5VaJV58uH5AxeYWEcBgGFs753JEJ/Hm6BPvQVfIlrrjoBwYj8p7Tw==",
+      "requires": {
+        "ejs": "2.7.4"
+      }
+    },
+    "listify": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/listify/-/listify-1.0.3.tgz",
+      "integrity": "sha512-083swF7iH7bx8666zdzBColpgEuy46HjN3r1isD4zV6Ix7FuHfb/2/WVnl4CH8hjuoWeFF7P5KkKNXUnJCFEJg=="
+    },
+    "load-json-file": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "parse-json": "2.2.0",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1",
+        "strip-bom": "2.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
+    },
+    "loader-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
+      "integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
+      "requires": {
+        "big.js": "3.2.0",
+        "emojis-list": "2.1.0",
+        "json5": "0.5.1"
+      }
+    },
+    "loadware": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/loadware/-/loadware-2.0.0.tgz",
+      "integrity": "sha1-V6crbxjuK6/40a0foFpdFuWv1Cw=",
+      "requires": {
+        "app-module-path": "2.2.0"
+      }
+    },
+    "locate-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "requires": {
+        "p-locate": "2.0.0",
+        "path-exists": "3.0.0"
+      }
+    },
+    "lockfile": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.4.tgz",
+      "integrity": "sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==",
+      "requires": {
+        "signal-exit": "3.0.3"
+      }
+    },
+    "lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+    },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
+    "lodash.assignin": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assignin/-/lodash.assignin-4.2.0.tgz",
+      "integrity": "sha1-uo31+4QesKPoBEIysOJjqNxqKKI="
+    },
+    "lodash.at": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.at/-/lodash.at-4.6.0.tgz",
+      "integrity": "sha1-k83OZk8KGZTqM9181A4jr9EbD/g=",
+      "optional": true
+    },
+    "lodash.bind": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.bind/-/lodash.bind-4.2.1.tgz",
+      "integrity": "sha1-euMBfpOWIqwxt9fX3LGzTbFpDTU="
+    },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
+    "lodash.chunk": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.chunk/-/lodash.chunk-4.2.0.tgz",
+      "integrity": "sha1-ZuXOH3btJ7QwPYxlEujRIW6BBrw="
+    },
+    "lodash.clone": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
+      "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y="
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
+    "lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw="
+    },
+    "lodash.filter": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.filter/-/lodash.filter-4.6.0.tgz",
+      "integrity": "sha1-ZosdSYFgOuHMWm+nYBQ+SAtMSs4="
+    },
+    "lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8="
+    },
+    "lodash.foreach": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
+      "integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
+    },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
+    "lodash.has": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/lodash.has/-/lodash.has-4.5.2.tgz",
+      "integrity": "sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI="
+    },
+    "lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8="
+    },
+    "lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
+    },
+    "lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha1-YZwK89A/iwTDH1iChAt3sRzWg0M="
+    },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
+    "lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs="
+    },
+    "lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha1-1SfftUVuynzJu5XV2ur4i6VKVFE="
+    },
+    "lodash.map": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
+      "integrity": "sha1-dx7Hg540c9nEzeKLGTlMNWL09tM="
+    },
+    "lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
+      "dev": true
+    },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
+    "lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w="
+    },
+    "lodash.pick": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
+      "integrity": "sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM="
+    },
+    "lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha1-8atrg5KZrUj3hKu/R2WW8DuRTTs="
+    },
+    "lodash.reject": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reject/-/lodash.reject-4.6.0.tgz",
+      "integrity": "sha1-gNZJLcFHCGS79YNTO2UfQqn1JBU="
+    },
+    "lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM="
+    },
+    "lodash.some": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.some/-/lodash.some-4.6.0.tgz",
+      "integrity": "sha1-G7nzFO9ri63tE7VJFpsqlF62jk0="
+    },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
+    "lodash.tail": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
+      "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ="
+    },
+    "lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
+    },
+    "log": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/log/-/log-1.4.0.tgz",
+      "integrity": "sha1-S6HYkP3iSbAx3KA7w36q8yVlbxw="
+    },
+    "log-symbols": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
+      "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.2.2"
+      }
+    },
+    "log-update": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-1.0.2.tgz",
+      "integrity": "sha1-GZKfZMQJPS0ucHWh2tivWcKWuNE=",
+      "requires": {
+        "ansi-escapes": "1.4.0",
+        "cli-cursor": "1.0.2"
+      }
+    },
+    "log4js": {
+      "version": "0.6.38",
+      "resolved": "https://registry.npmjs.org/log4js/-/log4js-0.6.38.tgz",
+      "integrity": "sha1-LElBFmldb7JUgJQ9P8hy5mKlIv0=",
+      "dev": true,
+      "requires": {
+        "readable-stream": "1.0.34",
+        "semver": "4.3.6"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "semver": {
+          "version": "4.3.6",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
+          "integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
+          "dev": true
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        }
+      }
+    },
+    "logform": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/logform/-/logform-2.2.0.tgz",
+      "integrity": "sha512-N0qPlqfypFx7UHNn4B3lzS/b0uLqt2hmuoa+PpuXNYgozdJYAyauF5Ky0BWVjrxDlMWiT3qN4zPq3vVAfZy7Yg==",
+      "requires": {
+        "colors": "1.4.0",
+        "fast-safe-stringify": "2.0.7",
+        "fecha": "4.2.0",
+        "ms": "2.1.3",
+        "triple-beam": "1.3.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "loglevel": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz",
+      "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw=="
+    },
+    "long": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/long/-/long-4.0.0.tgz",
+      "integrity": "sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA=="
+    },
+    "long-timeout": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/long-timeout/-/long-timeout-0.1.1.tgz",
+      "integrity": "sha1-lyHXiLR+C8taJMLivuGg2lXatRQ="
+    },
+    "longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "3.0.2"
+      }
+    },
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "requires": {
+        "currently-unhandled": "0.4.1",
+        "signal-exit": "3.0.3"
+      }
+    },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
+    "lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "requires": {
+        "pseudomap": "1.0.2",
+        "yallist": "2.1.2"
+      }
+    },
+    "magic-string": {
+      "version": "0.22.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.22.5.tgz",
+      "integrity": "sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==",
+      "requires": {
+        "vlq": "0.2.3"
+      }
+    },
+    "mailcomposer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mailcomposer/-/mailcomposer-2.1.0.tgz",
+      "integrity": "sha1-plMYIomWFP7omckiJtgeK5y7GD0=",
+      "requires": {
+        "buildmail": "2.0.0",
+        "libmime": "1.2.0"
+      }
+    },
+    "mailparser": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/mailparser/-/mailparser-0.6.2.tgz",
+      "integrity": "sha1-A8SGA5vfTfbNO2rcqqxBB9/bwGg=",
+      "requires": {
+        "encoding": "0.1.13",
+        "mime": "1.6.0",
+        "mimelib": "0.3.1",
+        "uue": "3.1.2"
+      },
+      "dependencies": {
+        "addressparser": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/addressparser/-/addressparser-1.0.1.tgz",
+          "integrity": "sha1-R6++GiqSYhkdtoOOT9HTm0CCF0Y="
+        },
+        "mimelib": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/mimelib/-/mimelib-0.3.1.tgz",
+          "integrity": "sha1-eHrdJBXYJ6yzr27EvKHqlZZBiFM=",
+          "requires": {
+            "addressparser": "1.0.1",
+            "encoding": "0.1.13"
+          }
+        }
+      }
+    },
+    "make-dir": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
+      "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
+      "requires": {
+        "pify": "3.0.0"
+      }
+    },
+    "make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="
+    },
+    "make-error-cause": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/make-error-cause/-/make-error-cause-1.2.2.tgz",
+      "integrity": "sha1-3wOI/NCzeBbf8KX7gQiTl3fcvJ0=",
+      "requires": {
+        "make-error": "1.3.6"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+    },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "requires": {
+        "object-visit": "1.0.1"
+      }
+    },
+    "mapbox-to-css-font": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/mapbox-to-css-font/-/mapbox-to-css-font-2.4.0.tgz",
+      "integrity": "sha512-v674D0WtpxCXlA6E+sBlG1QJWdUkz/s9qAD91bJSXBGuBL5lL4tJXpoJEftecphCh2SVQCjWMS2vhylc3AIQTg==",
+      "dev": true
+    },
+    "match-at": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/match-at/-/match-at-0.1.1.tgz",
+      "integrity": "sha512-h4Yd392z9mST+dzc+yjuybOGFNOZjmXIPKWjxBd1Bb23r4SmDOsk2NYCU2BMUBGbSpZqwVsZYNq26QS3xfaT3Q=="
+    },
+    "math-random": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz",
+      "integrity": "sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A=="
+    },
+    "md-dialog": {
+      "version": "0.0.1-alpha.1",
+      "resolved": "https://registry.npmjs.org/md-dialog/-/md-dialog-0.0.1-alpha.1.tgz",
+      "integrity": "sha1-x65q2+cbMneEfw7xyB8qhMTRRJ4="
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "requires": {
+        "hash-base": "3.1.0",
+        "inherits": "2.0.4",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "mdn-data": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
+      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
+      "dev": true
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "mem": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
+      "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
+      "requires": {
+        "mimic-fn": "1.2.0"
+      }
+    },
+    "memcached": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/memcached/-/memcached-2.2.2.tgz",
+      "integrity": "sha1-aPhsz9hLz5PMJe1G1tf8DHUhydU=",
+      "dev": true,
+      "requires": {
+        "hashring": "3.2.0",
+        "jackpot": "0.0.6"
+      }
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "requires": {
+        "errno": "0.1.8",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "requires": {
+        "camelcase-keys": "2.1.0",
+        "decamelize": "1.2.0",
+        "loud-rejection": "1.6.0",
+        "map-obj": "1.0.1",
+        "minimist": "1.2.5",
+        "normalize-package-data": "2.5.0",
+        "object-assign": "4.1.1",
+        "read-pkg-up": "1.0.1",
+        "redent": "1.0.0",
+        "trim-newlines": "1.0.0"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "merge-source-map": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.0.4.tgz",
+      "integrity": "sha1-pd5GU42uhNQRTMXqArR3KmNGcB8=",
+      "dev": true,
+      "requires": {
+        "source-map": "0.5.7"
+      }
+    },
+    "merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true
+    },
+    "method-override": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/method-override/-/method-override-3.0.0.tgz",
+      "integrity": "sha512-IJ2NNN/mSl9w3kzWB92rcdHpz+HjkxhDJWNDBqSlas+zQdP8wBiJzITPg08M/k2uVvMow7Sk41atndNtt/PHSA==",
+      "requires": {
+        "debug": "3.1.0",
+        "methods": "1.1.2",
+        "parseurl": "1.3.3",
+        "vary": "1.1.2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        }
+      }
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "micromatch": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+      "requires": {
+        "arr-diff": "2.0.0",
+        "array-unique": "0.2.1",
+        "braces": "1.8.5",
+        "expand-brackets": "0.1.5",
+        "extglob": "0.3.2",
+        "filename-regex": "2.0.1",
+        "is-extglob": "1.0.0",
+        "is-glob": "2.0.1",
+        "kind-of": "3.2.2",
+        "normalize-path": "2.1.1",
+        "object.omit": "2.0.1",
+        "parse-glob": "3.0.4",
+        "regex-cache": "0.4.4"
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "brorand": "1.1.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "mimelib": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/mimelib/-/mimelib-0.2.14.tgz",
+      "integrity": "sha1-KhqnJL0ZC4W9Um5jF6thBu39aDE=",
+      "requires": {
+        "addressparser": "0.2.1",
+        "encoding": "0.1.13"
+      },
+      "dependencies": {
+        "addressparser": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/addressparser/-/addressparser-0.2.1.tgz",
+          "integrity": "sha1-0RpbLu2gTP7+vfMZbBCuE9ts1gc="
+        }
+      }
+    },
+    "mimic-fn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "optional": true
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "1.1.11"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "requires": {
+        "safe-buffer": "5.1.2",
+        "yallist": "3.1.1"
+      },
+      "dependencies": {
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
+      }
+    },
+    "minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "requires": {
+        "minipass": "2.9.0"
+      }
+    },
+    "mississippi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz",
+      "integrity": "sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==",
+      "requires": {
+        "concat-stream": "1.6.2",
+        "duplexify": "3.7.1",
+        "end-of-stream": "1.4.4",
+        "flush-write-stream": "1.1.1",
+        "from2": "2.3.0",
+        "parallel-transform": "1.2.0",
+        "pump": "2.0.1",
+        "pumpify": "1.5.1",
+        "stream-each": "1.2.3",
+        "through2": "2.0.5"
+      }
+    },
+    "mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "requires": {
+        "for-in": "1.0.2",
+        "is-extendable": "1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "2.0.4"
+          }
+        }
+      }
+    },
+    "mixin-object": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mixin-object/-/mixin-object-2.0.1.tgz",
+      "integrity": "sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=",
+      "requires": {
+        "for-in": "0.1.8",
+        "is-extendable": "0.1.1"
+      },
+      "dependencies": {
+        "for-in": {
+          "version": "0.1.8",
+          "resolved": "https://registry.npmjs.org/for-in/-/for-in-0.1.8.tgz",
+          "integrity": "sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE="
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "requires": {
+        "minimist": "1.2.5"
+      }
+    },
+    "mobius1-selectr": {
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/mobius1-selectr/-/mobius1-selectr-2.4.10.tgz",
+      "integrity": "sha512-U/pQ8jZwO7z3Mf9OYzJR6AKfleF5jSBIueKKxGMr/tgyLuTWgchgFyeaXpAIz3Cbp+7eIN1hw5D2gxc4cNnOkQ=="
+    },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
+    "moment-range": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/moment-range/-/moment-range-4.0.2.tgz",
+      "integrity": "sha512-n8sceWwSTjmz++nFHzeNEUsYtDqjgXgcOBzsHi+BoXQU2FW+eU92LUaK8gqOiSu5PG57Q9sYj1Fz4LRDj4FtKA==",
+      "requires": {
+        "es6-symbol": "3.1.3"
+      }
+    },
+    "moment-timezone": {
+      "version": "0.5.32",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.32.tgz",
+      "integrity": "sha512-Z8QNyuQHQAmWucp8Knmgei8YNo28aLjJq6Ma+jy1ZSpSk5nyfRT8xgUbSQvD2+2UajISfenndwvFuH3NGS+nvA==",
+      "requires": {
+        "moment": "2.29.1"
+      }
+    },
+    "mongo-xlsx": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/mongo-xlsx/-/mongo-xlsx-1.0.12.tgz",
+      "integrity": "sha1-h2h5AlZD9m52EmHKJoP/mFy/gTY=",
+      "requires": {
+        "node-xlsx": "0.15.0"
+      }
+    },
+    "mongodb": {
+      "version": "2.2.33",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.33.tgz",
+      "integrity": "sha1-tTfEcdNKZlG0jzb9vyl1A0Dgi1A=",
+      "requires": {
+        "es6-promise": "3.2.1",
+        "mongodb-core": "2.1.17",
+        "readable-stream": "2.2.7"
+      },
+      "dependencies": {
+        "es6-promise": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
+          "integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q="
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+        },
+        "readable-stream": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.7.tgz",
+          "integrity": "sha1-BwV6y+JGeyIELTb5jFrVBwVOlbE=",
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "requires": {
+            "safe-buffer": "5.1.2"
+          }
+        }
+      }
+    },
+    "mongodb-core": {
+      "version": "2.1.17",
+      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.17.tgz",
+      "integrity": "sha1-pBizN6FKFJkPtRC5I97mqBMXPfg=",
+      "requires": {
+        "bson": "1.0.9",
+        "require_optional": "1.0.1"
+      }
+    },
+    "mongoose": {
+      "version": "4.13.12",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-4.13.12.tgz",
+      "integrity": "sha512-pH8NK5AYGbnPeEFFGs5ACk18vzzcy4DFT48U9kKvkfg6SI3nJZkzGfN7o1NDWjy+kP26hWyU/AMhYTfe5hSVnA==",
+      "requires": {
+        "async": "2.1.4",
+        "bson": "1.0.9",
+        "hooks-fixed": "2.0.2",
+        "kareem": "1.5.0",
+        "lodash.get": "4.4.2",
+        "mongodb": "2.2.34",
+        "mpath": "0.3.0",
+        "mpromise": "0.5.5",
+        "mquery": "2.3.3",
+        "ms": "2.0.0",
+        "muri": "1.3.0",
+        "regexp-clone": "0.0.1",
+        "sliced": "1.0.1"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.1.4.tgz",
+          "integrity": "sha1-LSFgx3iAMuTdbL4lAvH5osj2zeQ=",
+          "requires": {
+            "lodash": "4.17.20"
+          }
+        },
+        "es6-promise": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
+          "integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q="
+        },
+        "mongodb": {
+          "version": "2.2.34",
+          "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.34.tgz",
+          "integrity": "sha1-o09Zu+thdUrsQy3nLD/iFSakTBo=",
+          "requires": {
+            "es6-promise": "3.2.1",
+            "mongodb-core": "2.1.18",
+            "readable-stream": "2.2.7"
+          }
+        },
+        "mongodb-core": {
+          "version": "2.1.18",
+          "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.18.tgz",
+          "integrity": "sha1-TEYTm986HwMt7ZHbSfOO7AFlkFA=",
+          "requires": {
+            "bson": "1.0.9",
+            "require_optional": "1.0.1"
+          }
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+        },
+        "readable-stream": {
+          "version": "2.2.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.7.tgz",
+          "integrity": "sha1-BwV6y+JGeyIELTb5jFrVBwVOlbE=",
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "requires": {
+            "safe-buffer": "5.1.2"
+          }
+        }
+      }
+    },
+    "mongoose-datatable": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/mongoose-datatable/-/mongoose-datatable-1.0.7.tgz",
+      "integrity": "sha512-2n7ioDlUPc2QTohR0d+cW0OWzG78jd4h5/Uy+LIBLw6CWAsR0nQJpR87+olyFbITe7mScOxpdlfnJsenSw+6YQ=="
+    },
+    "morgan": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
+      "requires": {
+        "basic-auth": "2.0.1",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "on-finished": "2.3.0",
+        "on-headers": "1.0.2"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+        }
+      }
+    },
+    "mousetrap": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
+      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "requires": {
+        "aproba": "1.2.0",
+        "copy-concurrently": "1.0.5",
+        "fs-write-stream-atomic": "1.0.10",
+        "mkdirp": "0.5.5",
+        "rimraf": "2.7.1",
+        "run-queue": "1.0.3"
+      }
+    },
+    "mpath": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.3.0.tgz",
+      "integrity": "sha1-elj3iem1/TyUUgY0FXlg8mvV70Q="
+    },
+    "mpromise": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mpromise/-/mpromise-0.5.5.tgz",
+      "integrity": "sha1-9bJCWddjrMIlewoMjG2Gb9UXMuY="
+    },
+    "mqtt": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/mqtt/-/mqtt-2.9.0.tgz",
+      "integrity": "sha512-ad3/cJxvzTA3OyHv442QmnrJQpDuy7dzriLAdp1vpQAJvqlsRZqJNU0tAfgx2cMLVytjU826wHzj3ilYHUUcUA==",
+      "requires": {
+        "commist": "1.1.0",
+        "concat-stream": "1.6.2",
+        "end-of-stream": "1.4.4",
+        "help-me": "1.1.0",
+        "inherits": "2.0.4",
+        "minimist": "1.2.5",
+        "mqtt-packet": "5.6.1",
+        "pump": "1.0.3",
+        "readable-stream": "2.3.7",
+        "reinterval": "1.1.0",
+        "split2": "2.2.0",
+        "websocket-stream": "5.5.2",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-1.0.3.tgz",
+          "integrity": "sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==",
+          "requires": {
+            "end-of-stream": "1.4.4",
+            "once": "1.4.0"
+          }
+        }
+      }
+    },
+    "mqtt-packet": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/mqtt-packet/-/mqtt-packet-5.6.1.tgz",
+      "integrity": "sha512-eaF9rO2uFrIYEHomJxziuKTDkbWW5psLBaIGCazQSKqYsTaB3n4SpvJ1PexKaDBiPnMLPIFWBIiTYT3IfEJfww==",
+      "requires": {
+        "bl": "1.2.3",
+        "inherits": "2.0.4",
+        "process-nextick-args": "2.0.1",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "mquery": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/mquery/-/mquery-2.3.3.tgz",
+      "integrity": "sha512-NC8L14kn+qxJbbJ1gbcEMDxF0sC3sv+1cbRReXXwVvowcwY1y9KoVZFq0ebwARibsadu8lx8nWGvm3V0Pf0ZWQ==",
+      "requires": {
+        "bluebird": "3.5.0",
+        "debug": "2.6.9",
+        "regexp-clone": "0.0.1",
+        "sliced": "0.0.5"
+      },
+      "dependencies": {
+        "bluebird": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
+          "integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw="
+        },
+        "sliced": {
+          "version": "0.0.5",
+          "resolved": "https://registry.npmjs.org/sliced/-/sliced-0.0.5.tgz",
+          "integrity": "sha1-XtwETKTrb3gW1Qui/GPiXY/kcH8="
+        }
+      }
+    },
+    "mrcolor": {
+      "version": "https://github.com/rook2pawn/mrcolor/archive/master.tar.gz",
+      "integrity": "sha1-bTiFkFglJM/HndkgxyyWlqjLmGI=",
+      "requires": {
+        "color-convert": "0.2.1"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.2.1.tgz",
+          "integrity": "sha1-NjyrI8lLMaDWTbcQSLjGqUD4xow="
+        }
+      }
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ=="
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "multer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.3.0.tgz",
+      "integrity": "sha1-CSsmcPaEb6SRSWXvyM+Uwg/sbNI=",
+      "requires": {
+        "append-field": "0.1.0",
+        "busboy": "0.2.14",
+        "concat-stream": "1.6.2",
+        "mkdirp": "0.5.5",
+        "object-assign": "3.0.0",
+        "on-finished": "2.3.0",
+        "type-is": "1.6.18",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I="
+        }
+      }
+    },
+    "multicast-dns": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
+      "requires": {
+        "dns-packet": "1.3.1",
+        "thunky": "1.1.0"
+      }
+    },
+    "multicast-dns-service-types": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
+      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
+    },
+    "muri": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/muri/-/muri-1.3.0.tgz",
+      "integrity": "sha512-FiaFwKl864onHFFUV/a2szAl7X0fxVlSKNdhTf+BM8i8goEgYut8u5P9MqQqIYwvaMxjzVESsoEm/2kfkFH1rg=="
+    },
+    "mustache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-2.3.0.tgz",
+      "integrity": "sha1-QCj3d4sXcIpImTCm5SrDvKDaQdA="
+    },
+    "mydatepicker": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/mydatepicker/-/mydatepicker-2.6.11.tgz",
+      "integrity": "sha512-P610qC/7hwvz0w2CtWF7F1QrTVpZ4W6HKDZwiqUi0qE7YGDYy6V8414+eCf1+RYyh/tjeaMuqeNLxzBHPAQxPA=="
+    },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "requires": {
+        "any-promise": "1.3.0",
+        "object-assign": "4.1.1",
+        "thenify-all": "1.6.0"
+      }
+    },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ=="
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "requires": {
+        "arr-diff": "4.0.0",
+        "array-unique": "0.3.2",
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
+        "fragment-cache": "0.2.1",
+        "is-windows": "1.0.2",
+        "kind-of": "6.0.3",
+        "object.pick": "1.3.0",
+        "regex-not": "1.0.2",
+        "snapdragon": "0.8.2",
+        "to-regex": "3.0.2"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "optional": true
+    },
+    "needle": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.5.2.tgz",
+      "integrity": "sha512-LbRIwS9BfkPvNwNHlsA41Q29kL2L/6VaOJ0qisM5lLWsTV3nP15abO5ITL6L81zqFhzjRKDAYjpcBcwM0AVvLQ==",
+      "requires": {
+        "debug": "3.2.7",
+        "iconv-lite": "0.4.24",
+        "sax": "1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "nested-error-stacks": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-2.1.0.tgz",
+      "integrity": "sha512-AO81vsIO1k1sM4Zrd6Hu7regmJN1NSiAja10gc4bX3F0wd+9rQmcuHQaHVQCYIEC8iFXnE+mavh23GOt7wBgug=="
+    },
+    "nexmo": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/nexmo/-/nexmo-2.9.1.tgz",
+      "integrity": "sha512-FxmJ2Ou5qi4BH6hSo24OiFwPVYPl08uyXv13KybmkAbjh9W+kpaPK2wwsg1Dz39rrgIyAhWAq+4cqMvmk1UjrQ==",
+      "requires": {
+        "jsonwebtoken": "8.5.1",
+        "request": "2.88.2",
+        "uuid": "2.0.3"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          },
+          "dependencies": {
+            "uuid": {
+              "version": "3.4.0",
+              "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+              "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+            }
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        },
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
+        }
+      }
+    },
+    "next-tick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
+      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
+    },
+    "ng-bootstrap": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/ng-bootstrap/-/ng-bootstrap-1.6.3.tgz",
+      "integrity": "sha1-1B/UIVTAWTQiy4PEc6OCiqdSW/U=",
+      "requires": {
+        "moment": "2.18.1"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.18.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
+          "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
+        }
+      }
+    },
+    "ng-multiselect-dropdown": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/ng-multiselect-dropdown/-/ng-multiselect-dropdown-0.2.14.tgz",
+      "integrity": "sha512-S+dPT/Xskh5fJVQMAb0qUVSwoE+VJ8C9XUDe6C4/3/Cd43o2F3SHHHOXfOhcQfqkZYkGeJOmzRfc57aOohr4dA==",
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "ng-pick-datetime": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/ng-pick-datetime/-/ng-pick-datetime-4.3.4.tgz",
+      "integrity": "sha1-37VUPAbM0jxsFqUt0YYzhcbcjRA=",
+      "requires": {
+        "moment": "2.29.1"
+      }
+    },
+    "ng2-charts": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-1.6.0.tgz",
+      "integrity": "sha512-9w0WH69x5/nuqC1og2WaY39NbaBqTGIP1+5gZaH7/KPN6UEPonNg/pYnsIVklLj1DWPWXKa8+XXIJZ1jy5nLxg==",
+      "requires": {
+        "chart.js": "2.6.0"
+      }
+    },
+    "ng2-date-countdown": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/ng2-date-countdown/-/ng2-date-countdown-0.0.4.tgz",
+      "integrity": "sha1-IHeZpnpFbMac05h/QL2g1+JkgXY=",
+      "requires": {
+        "colors": "1.4.0",
+        "request": "2.81.0",
+        "yargs": "3.32.0"
+      },
+      "dependencies": {
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "1.0.0"
+          }
+        },
+        "window-size": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
+          "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY="
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "3.32.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
+          "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
+          "requires": {
+            "camelcase": "2.1.1",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "os-locale": "1.4.0",
+            "string-width": "1.0.2",
+            "window-size": "0.1.4",
+            "y18n": "3.2.1"
+          }
+        }
+      }
+    },
+    "ng2-datetime": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ng2-datetime/-/ng2-datetime-1.4.0.tgz",
+      "integrity": "sha1-QpSKVUYj8swSVUrpx1/F29dZqoU=",
+      "requires": {
+        "bootstrap": "4.5.3",
+        "bootstrap-datepicker": "1.7.0-RC1",
+        "bootstrap-timepicker": "0.5.2",
+        "jquery": "3.5.1"
+      }
+    },
+    "ng2-dragula": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/ng2-dragula/-/ng2-dragula-1.5.0.tgz",
+      "integrity": "sha512-uSVq66Rv+ZhDLBGYCGZ7mTaseP7rvYJOijiQZlzfy8dxL614Sw7rhtnLqvK8nqa3tI/wVv8CEGZaZkMnWJokwQ==",
+      "requires": {
+        "dragula": "3.7.3"
+      }
+    },
+    "ng2-dropdown": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/ng2-dropdown/-/ng2-dropdown-0.0.21.tgz",
+      "integrity": "sha1-U8VeYWekYFjJ+ua3aXH+3pR6gGE="
+    },
+    "ng2-expansion-panels": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/ng2-expansion-panels/-/ng2-expansion-panels-0.0.6.tgz",
+      "integrity": "sha1-oe8ej+FeOKw7vbcbsO7HBzQlnuo="
+    },
+    "ng2-file-upload": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.3.0.tgz",
+      "integrity": "sha512-Pudxik6LWYsT8hNiEW7RfjgGWAnvfQywxwJYMdt1snTUe+KnlRc/QqPv3QEQW6plXTanuLkYz/TbqilSfSHOsw=="
+    },
+    "ng2-if-scrollbars": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ng2-if-scrollbars/-/ng2-if-scrollbars-2.0.0.tgz",
+      "integrity": "sha1-P+eRiY2nL6FrGWjx/L7a5hNgkyA="
+    },
+    "ng2-json-editor": {
+      "version": "0.25.26",
+      "resolved": "https://registry.npmjs.org/ng2-json-editor/-/ng2-json-editor-0.25.26.tgz",
+      "integrity": "sha512-LX5ueNw4u0oJZkp6lqdavQuskvY1/msji6jRgQfApt1lhlqhwoOu5b17l1lgRtnoXadVzFEgJHDIp67ZqyRCPQ==",
+      "requires": {
+        "ajv": "5.5.2",
+        "ajv-errors": "1.0.1",
+        "bi-directional-map": "1.0.0",
+        "diff": "3.5.0",
+        "immutable": "3.8.2",
+        "katex": "0.7.1",
+        "lodash": "4.17.2",
+        "mousetrap": "1.6.5",
+        "ng2-slide-toggle": "1.1.3",
+        "ngx-bootstrap": "2.0.0-beta.7"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "lodash": {
+          "version": "4.17.2",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.2.tgz",
+          "integrity": "sha1-NKMFW6vgTOQkZ7YH1wAHLH/2v0I="
+        },
+        "ngx-bootstrap": {
+          "version": "2.0.0-beta.7",
+          "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.0-beta.7.tgz",
+          "integrity": "sha512-A5dz1uQeqDrZseJRe2vMT6sQSEScANfIFmd/W5yRHNYEKaASiwYn6ImnPX5JpzwfGqQVyPyNZwYtUsTle+H5zQ=="
+        }
+      }
+    },
+    "ng2-jsoneditor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ng2-jsoneditor/-/ng2-jsoneditor-0.1.1.tgz",
+      "integrity": "sha512-FjILmxbQnFSLvMTVmGIo2cl7oBqV8wrsIC3RNS89vTEUvPevWuCBJicI0imRM3qU3rzWyr7q9XoTDqPQSfMIUQ==",
+      "requires": {
+        "jsoneditor": "5.34.0"
+      }
+    },
+    "ng2-material-dropdown": {
+      "version": "0.7.10",
+      "resolved": "https://registry.npmjs.org/ng2-material-dropdown/-/ng2-material-dropdown-0.7.10.tgz",
+      "integrity": "sha1-CTRx8qnK3XJsvLEgsK14GKVPpe0="
+    },
+    "ng2-order-pipe": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/ng2-order-pipe/-/ng2-order-pipe-0.1.5.tgz",
+      "integrity": "sha1-BJMDllrHUl42zqRTeBs6EteIvtw=",
+      "requires": {
+        "typings": "2.1.1"
+      }
+    },
+    "ng2-overlay": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/ng2-overlay/-/ng2-overlay-0.7.2.tgz",
+      "integrity": "sha1-bSYpawsSnqinxr2YvX3vgxRm3Mw="
+    },
+    "ng2-pagination": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ng2-pagination/-/ng2-pagination-2.0.2.tgz",
+      "integrity": "sha1-Uy3JFU3h8V4Z6U7fVUuWiEtfg9Y="
+    },
+    "ng2-password-strength-bar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/ng2-password-strength-bar/-/ng2-password-strength-bar-1.1.3.tgz",
+      "integrity": "sha512-kID/LWv7L1kGHWFqYfZ461ifihQ64VXIR+o33DmsRUHWNSIrd+6elfnj0G8icH8Q+ihSd70J8qcICX+bFKV3cQ=="
+    },
+    "ng2-popup": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/ng2-popup/-/ng2-popup-0.4.0.tgz",
+      "integrity": "sha1-P0ygVZiBc8gD2D/IdntJD4fpHFY="
+    },
+    "ng2-progress-bar": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ng2-progress-bar/-/ng2-progress-bar-0.0.8.tgz",
+      "integrity": "sha1-JAjraI2ma9R8GbX1+HGyQfmud0w=",
+      "requires": {
+        "typescript": "2.9.2"
+      },
+      "dependencies": {
+        "typescript": {
+          "version": "2.9.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+          "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w=="
+        }
+      }
+    },
+    "ng2-recaptcha": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/ng2-recaptcha/-/ng2-recaptcha-1.7.0.tgz",
+      "integrity": "sha1-Pf4U8qLgtaB3vkaQ2lhz8pFqF20=",
+      "requires": {
+        "@types/grecaptcha": "2.0.36"
+      }
+    },
+    "ng2-search-filter": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/ng2-search-filter/-/ng2-search-filter-0.4.7.tgz",
+      "integrity": "sha512-l49diVMfN3d6BTbFBtgpvywLTHYW63/XSPpmmrfSlGP+WbxoVbbqqbG6zK/ivLvwmWWdvDAqw+b+lyhqMAkSLw=="
+    },
+    "ng2-simple-timer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ng2-simple-timer/-/ng2-simple-timer-6.0.0.tgz",
+      "integrity": "sha512-gQngQoFge5GR0nQqSlkAqWk0NUneDwDYpf0iinDv39uIPxlkXihWFm3Xr+lOH0GQLidRVhaA3l4Wk9pmeRvX8A==",
+      "requires": {
+        "angular2-uuid": "1.1.1"
+      }
+    },
+    "ng2-slide-toggle": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/ng2-slide-toggle/-/ng2-slide-toggle-1.1.3.tgz",
+      "integrity": "sha1-I9xbcS+zIbOVtruYGdAZKDCnNHE="
+    },
+    "ng2-translate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ng2-translate/-/ng2-translate-5.0.0.tgz",
+      "integrity": "sha1-Ctu1EOtQB6LW3tX10miIwUdgrKU="
+    },
+    "ng2-webstorage": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/ng2-webstorage/-/ng2-webstorage-1.4.3.tgz",
+      "integrity": "sha1-yxl+ETYu7qwGgTCc0e5hPSGejpQ="
+    },
+    "ngx-bootstrap": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.5.tgz",
+      "integrity": "sha512-IduTVb78RDVlrz2+bn6GXK/REfM/RsRnz/AENwmrgTOg1AtvahJ9qANxXRNn33Kv9GJmkOYy/MhD3DyzeMb16w=="
+    },
+    "ngx-facebook": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ngx-facebook/-/ngx-facebook-2.4.0.tgz",
+      "integrity": "sha1-RUFBzkERjBlW2duJbJVvOJH4u9c="
+    },
+    "ngx-pagination": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-3.1.0.tgz",
+      "integrity": "sha512-D/8Is3z0nipHCCQN0XZyh5/nhSrON/ybft3Wk8dfPHMGtjqzoOSorNaanypO35JD/jECcam/cS/evjlaqDAgQg=="
+    },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "njwt": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/njwt/-/njwt-0.4.1.tgz",
+      "integrity": "sha512-7G/Chanhe6mtOf2EZH+VlN/pXPuN447tIBdcMbMzmfSMB3L2HWtd3ZTHO6bbLSn4O+8/rtS6PZNam7L/VQjn5Q==",
+      "dev": true,
+      "requires": {
+        "ecdsa-sig-formatter": "1.0.11",
+        "uuid": "2.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+          "dev": true
+        }
+      }
+    },
+    "no-case": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
+    "nocache": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/nocache/-/nocache-2.1.0.tgz",
+      "integrity": "sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q=="
+    },
+    "node-abi": {
+      "version": "2.19.3",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-2.19.3.tgz",
+      "integrity": "sha512-9xZrlyfvKhWme2EXFKQhZRp1yNWT/uI1luYPr3sFl+H4keYY4xR+1jO7mvTTijIsHf1M+QDe9uWuKeEpLInIlg==",
+      "optional": true,
+      "requires": {
+        "semver": "5.7.1"
+      }
+    },
+    "node-addon-api": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-1.7.2.tgz",
+      "integrity": "sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==",
+      "dev": true
+    },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
+      "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw=="
+    },
+    "node-fetch-h2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/node-fetch-h2/-/node-fetch-h2-2.3.0.tgz",
+      "integrity": "sha512-ofRW94Ab0T4AOh5Fk8t0h8OBWrmjb0SSB20xh1H8YnPV9EJ+f5AMoYSUQ2zgJ4Iq2HAK0I2l5/Nequ8YzFS3Hg==",
+      "requires": {
+        "http2-client": "1.3.3"
+      }
+    },
+    "node-forge": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
+    },
+    "node-gcm": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/node-gcm/-/node-gcm-0.14.10.tgz",
+      "integrity": "sha512-0qEGKVHgj6xyT1ORiATXMr9OhmhQbUxMU8RNceS6eiEjxQm/ifOi3waocQk0PoJbxkrl1wQVh1i0oivP/YiXWg==",
+      "requires": {
+        "debug": "3.2.7",
+        "lodash": "3.10.1",
+        "request": "2.81.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "lodash": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz",
+          "integrity": "sha1-W/Rejkm6QYnhfUgnid/RW9FAt7Y="
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "node-gyp": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
+      "optional": true,
+      "requires": {
+        "fstream": "1.0.12",
+        "glob": "7.1.6",
+        "graceful-fs": "4.2.4",
+        "mkdirp": "0.5.5",
+        "nopt": "3.0.6",
+        "npmlog": "4.1.2",
+        "osenv": "0.1.5",
+        "request": "2.88.2",
+        "rimraf": "2.7.1",
+        "semver": "5.3.0",
+        "tar": "2.2.2",
+        "which": "1.3.1"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+          "optional": true
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "optional": true,
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+          "optional": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+          "optional": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "optional": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "optional": true
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "optional": true,
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        }
+      }
+    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "requires": {
+        "assert": "1.5.0",
+        "browserify-zlib": "0.2.0",
+        "buffer": "4.9.2",
+        "console-browserify": "1.2.0",
+        "constants-browserify": "1.0.0",
+        "crypto-browserify": "3.12.0",
+        "domain-browser": "1.2.0",
+        "events": "3.2.0",
+        "https-browserify": "1.0.0",
+        "os-browserify": "0.3.0",
+        "path-browserify": "0.0.1",
+        "process": "0.11.10",
+        "punycode": "1.4.1",
+        "querystring-es3": "0.2.1",
+        "readable-stream": "2.3.7",
+        "stream-browserify": "2.0.2",
+        "stream-http": "2.8.3",
+        "string_decoder": "1.1.1",
+        "timers-browserify": "2.0.12",
+        "tty-browserify": "0.0.0",
+        "url": "0.11.0",
+        "util": "0.11.1",
+        "vm-browserify": "1.1.2"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        }
+      }
+    },
+    "node-modules-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/node-modules-path/-/node-modules-path-1.0.2.tgz",
+      "integrity": "sha512-6Gbjq+d7uhkO7epaKi5DNgUJn7H0gEyA4Jg0Mo1uQOi3Rk50G83LtmhhFyw0LxnAFhtlspkiiw52ISP13qzcBg=="
+    },
+    "node-pre-gyp": {
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.16.0.tgz",
+      "integrity": "sha512-4efGA+X/YXAHLi1hN8KaPrILULaUn2nWecFrn1k2I+99HpoyvcOGEbtcOxpDiUwPF2ZANMJDh32qwOUPenuR1g==",
+      "requires": {
+        "detect-libc": "1.0.3",
+        "mkdirp": "0.5.5",
+        "needle": "2.5.2",
+        "nopt": "4.0.3",
+        "npm-packlist": "1.4.8",
+        "npmlog": "4.1.2",
+        "rc": "1.2.8",
+        "rimraf": "2.7.1",
+        "semver": "5.7.1",
+        "tar": "4.4.13"
+      },
+      "dependencies": {
+        "tar": {
+          "version": "4.4.13",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+          "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+          "requires": {
+            "chownr": "1.1.4",
+            "fs-minipass": "1.2.7",
+            "minipass": "2.9.0",
+            "minizlib": "1.3.3",
+            "mkdirp": "0.5.5",
+            "safe-buffer": "5.1.2",
+            "yallist": "3.1.1"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
+      }
+    },
+    "node-readfiles": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/node-readfiles/-/node-readfiles-0.2.0.tgz",
+      "integrity": "sha1-271K8SE04uY1wkXvk//Pb2BnOl0=",
+      "requires": {
+        "es6-promise": "3.3.1"
+      }
+    },
+    "node-red": {
+      "version": "0.17.5",
+      "resolved": "https://registry.npmjs.org/node-red/-/node-red-0.17.5.tgz",
+      "integrity": "sha1-Hc8+rXkCzi32Fc374Z882aUOKOI=",
+      "requires": {
+        "basic-auth": "1.1.0",
+        "bcrypt": "1.0.3",
+        "bcryptjs": "2.4.3",
+        "body-parser": "1.17.2",
+        "cheerio": "0.22.0",
+        "clone": "2.1.1",
+        "cookie": "0.3.1",
+        "cookie-parser": "1.4.3",
+        "cors": "2.8.3",
+        "cron": "1.2.1",
+        "express": "4.15.3",
+        "express-session": "1.15.2",
+        "follow-redirects": "1.2.4",
+        "fs-extra": "1.0.0",
+        "fs.notify": "0.0.4",
+        "hash-sum": "1.0.2",
+        "i18next": "1.10.6",
+        "is-utf8": "0.2.1",
+        "js-yaml": "3.8.4",
+        "json-stringify-safe": "5.0.1",
+        "jsonata": "1.2.6",
+        "media-typer": "0.3.0",
+        "mqtt": "2.9.0",
+        "multer": "1.3.0",
+        "mustache": "2.3.0",
+        "node-red-node-email": "0.1.29",
+        "node-red-node-feedparser": "0.1.16",
+        "node-red-node-rbe": "0.1.14",
+        "node-red-node-twitter": "0.1.15",
+        "nopt": "3.0.6",
+        "oauth2orize": "1.8.0",
+        "on-headers": "1.0.1",
+        "passport": "0.3.2",
+        "passport-http-bearer": "1.0.1",
+        "passport-oauth2-client-password": "0.1.2",
+        "raw-body": "2.2.0",
+        "semver": "5.3.0",
+        "sentiment": "2.1.0",
+        "uglify-js": "3.0.20",
+        "when": "3.7.8",
+        "ws": "1.1.1",
+        "xml2js": "0.4.17"
+      },
+      "dependencies": {
+        "array-flatten": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+        },
+        "basic-auth": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
+          "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ="
+        },
+        "body-parser": {
+          "version": "1.17.2",
+          "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.17.2.tgz",
+          "integrity": "sha1-+IkqvI+eYn1Crtr7yma/WrmRBO4=",
+          "requires": {
+            "bytes": "2.4.0",
+            "content-type": "1.0.4",
+            "debug": "2.6.7",
+            "depd": "1.1.2",
+            "http-errors": "1.6.3",
+            "iconv-lite": "0.4.15",
+            "on-finished": "2.3.0",
+            "qs": "6.4.0",
+            "raw-body": "2.2.0",
+            "type-is": "1.6.18"
+          }
+        },
+        "bytes": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-2.4.0.tgz",
+          "integrity": "sha1-fZcZb51br39pNeJZhVSe3SpsIzk="
+        },
+        "clone": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.1.tgz",
+          "integrity": "sha1-0hfR6WERjjrJpLi7oyhVU79kfNs="
+        },
+        "commander": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+          "requires": {
+            "graceful-readlink": "1.0.1"
+          }
+        },
+        "content-disposition": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+          "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
+        },
+        "cookie": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+        },
+        "cors": {
+          "version": "2.8.3",
+          "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.3.tgz",
+          "integrity": "sha1-TPeOHSMymnSWsvwiJbd8pbteuAI=",
+          "requires": {
+            "object-assign": "4.1.1",
+            "vary": "1.1.2"
+          }
+        },
+        "debug": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.7.tgz",
+          "integrity": "sha1-krrR9tBbu2u6Isyoi80OyJTChh4=",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "express": {
+          "version": "4.15.3",
+          "resolved": "https://registry.npmjs.org/express/-/express-4.15.3.tgz",
+          "integrity": "sha1-urZdDwOqgMNYQIly/HAPkWlEtmI=",
+          "requires": {
+            "accepts": "1.3.7",
+            "array-flatten": "1.1.1",
+            "content-disposition": "0.5.2",
+            "content-type": "1.0.4",
+            "cookie": "0.3.1",
+            "cookie-signature": "1.0.6",
+            "debug": "2.6.7",
+            "depd": "1.1.2",
+            "encodeurl": "1.0.2",
+            "escape-html": "1.0.3",
+            "etag": "1.8.1",
+            "finalhandler": "1.0.6",
+            "fresh": "0.5.0",
+            "merge-descriptors": "1.0.1",
+            "methods": "1.1.2",
+            "on-finished": "2.3.0",
+            "parseurl": "1.3.3",
+            "path-to-regexp": "0.1.7",
+            "proxy-addr": "1.1.5",
+            "qs": "6.4.0",
+            "range-parser": "1.2.1",
+            "send": "0.15.3",
+            "serve-static": "1.12.3",
+            "setprototypeof": "1.0.3",
+            "statuses": "1.3.1",
+            "type-is": "1.6.18",
+            "utils-merge": "1.0.0",
+            "vary": "1.1.2"
+          },
+          "dependencies": {
+            "setprototypeof": {
+              "version": "1.0.3",
+              "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+              "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
+            },
+            "statuses": {
+              "version": "1.3.1",
+              "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+              "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
+            }
+          }
+        },
+        "finalhandler": {
+          "version": "1.0.6",
+          "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.0.6.tgz",
+          "integrity": "sha1-AHrqM9Gk0+QgF/YkhIrVjSEvgU8=",
+          "requires": {
+            "debug": "2.6.9",
+            "encodeurl": "1.0.2",
+            "escape-html": "1.0.3",
+            "on-finished": "2.3.0",
+            "parseurl": "1.3.3",
+            "statuses": "1.3.1",
+            "unpipe": "1.0.0"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            },
+            "statuses": {
+              "version": "1.3.1",
+              "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+              "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
+            }
+          }
+        },
+        "follow-redirects": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.4.tgz",
+          "integrity": "sha512-Suw6KewLV2hReSyEOeql+UUkBVyiBm3ok1VPrVFRZnQInWpdoZbbiG5i8aJVSjTr0yQ4Ava0Sh6/joCg1Brdqw==",
+          "requires": {
+            "debug": "2.6.7"
+          }
+        },
+        "fresh": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.0.tgz",
+          "integrity": "sha1-9HTKXmqSRtb9jglTz6m5yAWvp44="
+        },
+        "fs-extra": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-1.0.0.tgz",
+          "integrity": "sha1-zTzl9+fLYUWIP8rjGR6Yd/hYeVA=",
+          "requires": {
+            "graceful-fs": "4.2.4",
+            "jsonfile": "2.4.0",
+            "klaw": "1.3.1"
+          }
+        },
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "requires": {
+            "depd": "1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": "1.5.0"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.15",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.15.tgz",
+          "integrity": "sha1-/iZaIYrGpXz+hUkn6dBMGYJe3es="
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "ipaddr.js": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.4.0.tgz",
+          "integrity": "sha1-KWrKh4qCGBbluF0KKFqZvP9FgvA="
+        },
+        "js-yaml": {
+          "version": "3.8.4",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.8.4.tgz",
+          "integrity": "sha1-UgtFZPhlc7qWZir4Woyvp7S1pvY=",
+          "requires": {
+            "argparse": "1.0.10",
+            "esprima": "3.1.3"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "4.2.4"
+          }
+        },
+        "mime": {
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
+          "integrity": "sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM="
+        },
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "requires": {
+            "abbrev": "1.1.1"
+          }
+        },
+        "on-headers": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz",
+          "integrity": "sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c="
+        },
+        "proxy-addr": {
+          "version": "1.1.5",
+          "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-1.1.5.tgz",
+          "integrity": "sha1-ccDuOxAt4/IC87ZPYI0XP8uhqRg=",
+          "requires": {
+            "forwarded": "0.1.2",
+            "ipaddr.js": "1.4.0"
+          }
+        },
+        "raw-body": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.2.0.tgz",
+          "integrity": "sha1-mUl2z2pQlqQRYoQEkvC9xdbn+5Y=",
+          "requires": {
+            "bytes": "2.4.0",
+            "iconv-lite": "0.4.15",
+            "unpipe": "1.0.0"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        },
+        "send": {
+          "version": "0.15.3",
+          "resolved": "https://registry.npmjs.org/send/-/send-0.15.3.tgz",
+          "integrity": "sha1-UBP5+ZAj31DRvZiSwZ4979HVMwk=",
+          "requires": {
+            "debug": "2.6.7",
+            "depd": "1.1.2",
+            "destroy": "1.0.4",
+            "encodeurl": "1.0.2",
+            "escape-html": "1.0.3",
+            "etag": "1.8.1",
+            "fresh": "0.5.0",
+            "http-errors": "1.6.3",
+            "mime": "1.3.4",
+            "ms": "2.0.0",
+            "on-finished": "2.3.0",
+            "range-parser": "1.2.1",
+            "statuses": "1.3.1"
+          },
+          "dependencies": {
+            "statuses": {
+              "version": "1.3.1",
+              "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+              "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
+            }
+          }
+        },
+        "serve-static": {
+          "version": "1.12.3",
+          "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.12.3.tgz",
+          "integrity": "sha1-n0uhni8wMMVH+K+ZEHg47DjVseI=",
+          "requires": {
+            "encodeurl": "1.0.2",
+            "escape-html": "1.0.3",
+            "parseurl": "1.3.3",
+            "send": "0.15.3"
+          }
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+        },
+        "uglify-js": {
+          "version": "3.0.20",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.0.20.tgz",
+          "integrity": "sha512-O/c2/N97k1Ms+23VRx6gIAfGdijuW53SlASmXy0FVapK63rQrduHyE+5X6hUtqNiSLLao9Uv6ijotpNe8t991Q==",
+          "requires": {
+            "commander": "2.9.0",
+            "source-map": "0.5.7"
+          }
+        },
+        "utils-merge": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
+          "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg="
+        },
+        "when": {
+          "version": "3.7.8",
+          "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz",
+          "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I="
+        }
+      }
+    },
+    "node-red-node-email": {
+      "version": "0.1.29",
+      "resolved": "https://registry.npmjs.org/node-red-node-email/-/node-red-node-email-0.1.29.tgz",
+      "integrity": "sha512-+tqda0bNT8A0PM9G47XqFiUP9gEe1zvB/9f+JJhbLWTEk9TeRB4UeyycubmCbR1/TzJnk2v9yCDogFhDJQWbOw==",
+      "requires": {
+        "imap": "0.8.19",
+        "mailparser": "0.6.2",
+        "nodemailer": "1.11.0",
+        "poplib": "0.1.7"
+      }
+    },
+    "node-red-node-feedparser": {
+      "version": "0.1.16",
+      "resolved": "https://registry.npmjs.org/node-red-node-feedparser/-/node-red-node-feedparser-0.1.16.tgz",
+      "integrity": "sha512-Mb94aGmBxs2zcUoRnOrxFVVBmDF+4RQfkIs5H8z5HNakEjmJR9AAmoXjHpliFZJOgAMYwMUhT8GUQZjRFhmOGw==",
+      "requires": {
+        "feedparser": "2.2.10",
+        "request": "2.88.2"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ=="
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        }
+      }
+    },
+    "node-red-node-rbe": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/node-red-node-rbe/-/node-red-node-rbe-0.1.14.tgz",
+      "integrity": "sha512-ihuxBzQOywhT02rZns0CUDqxiGavWOa4W3pZ5tXdQFtRiDeC6CD4gXyxpBT+nbl8b8wWUjDWlNmREL264cgeuw=="
+    },
+    "node-red-node-twitter": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/node-red-node-twitter/-/node-red-node-twitter-0.1.15.tgz",
+      "integrity": "sha512-QMG0slW61Qnd9+YSlyPvIrUEmc2a3Qn+cfaEtPLxui3aPBxJxPtZduE3Nbl+jpgI1dD7RrqfQTS9BsHytFKzDw==",
+      "requires": {
+        "oauth": "0.9.14",
+        "request": "2.81.0",
+        "twitter-ng": "0.6.2"
+      }
+    },
+    "node-releases": {
+      "version": "1.1.67",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz",
+      "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==",
+      "dev": true
+    },
+    "node-sass": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
+      "optional": true,
+      "requires": {
+        "async-foreach": "0.1.3",
+        "chalk": "1.1.3",
+        "cross-spawn": "3.0.1",
+        "gaze": "1.1.3",
+        "get-stdin": "4.0.1",
+        "glob": "7.1.6",
+        "in-publish": "2.0.1",
+        "lodash": "4.17.20",
+        "meow": "3.7.0",
+        "mkdirp": "0.5.5",
+        "nan": "2.14.2",
+        "node-gyp": "3.8.0",
+        "npmlog": "4.1.2",
+        "request": "2.88.2",
+        "sass-graph": "2.2.5",
+        "stdout-stream": "1.4.1",
+        "true-case-path": "1.0.3"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+          "optional": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "optional": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+          "optional": true
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "optional": true,
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+          "optional": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+          "optional": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "optional": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "optional": true
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "optional": true,
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        }
+      }
+    },
+    "node-schedule": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/node-schedule/-/node-schedule-1.3.0.tgz",
+      "integrity": "sha512-NNwO9SUPjBwFmPh3vXiPVEhJLn4uqYmZYvJV358SRGM06BR4UoIqxJpeJwDDXB6atULsgQA97MfD1zMd5xsu+A==",
+      "requires": {
+        "cron-parser": "2.18.0",
+        "long-timeout": "0.1.1",
+        "sorted-array-functions": "1.3.0"
+      }
+    },
+    "node-xlsx": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/node-xlsx/-/node-xlsx-0.15.0.tgz",
+      "integrity": "sha512-rQyhWDJ/k60wQemov7a8MlToastWTidrAVFRwTWV+s53LN/SRwU4lnmc5xuFXx/ay+uaLAsAQBp6BkVob5OjOA==",
+      "requires": {
+        "buffer-from": "1.1.1",
+        "xlsx": "0.14.5"
+      },
+      "dependencies": {
+        "xlsx": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.14.5.tgz",
+          "integrity": "sha512-s/5f4/mjeWREmIWZ+HtDfh/rnz51ar+dZ4LWKZU3u9VBx2zLdSIWTdXgoa52/pnZ9Oe/Vu1W1qzcKzLVe+lq4w==",
+          "requires": {
+            "adler-32": "1.2.0",
+            "cfb": "1.2.0",
+            "codepage": "1.14.0",
+            "commander": "2.17.1",
+            "crc-32": "1.2.0",
+            "exit-on-epipe": "1.0.1",
+            "ssf": "0.10.3"
+          }
+        }
+      }
+    },
+    "node-zookeeper-client": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/node-zookeeper-client/-/node-zookeeper-client-0.2.3.tgz",
+      "integrity": "sha512-V4gVHxzQ42iwhkANpPryzfjmqi3Ql3xeO9E/px7W5Yi774WplU3YtqUpnvcL/eJit4UqcfuLOgZLkpf0BPhHmg==",
+      "requires": {
+        "async": "0.2.10",
+        "underscore": "1.4.4"
+      },
+      "dependencies": {
+        "async": {
+          "version": "0.2.10",
+          "resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz",
+          "integrity": "sha1-trvgsGdLnXGXCMo43owjfLUmw9E="
+        }
+      }
+    },
+    "nodemailer": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-1.11.0.tgz",
+      "integrity": "sha1-TmnLObAwFbHR7wx4qBVBK56Xb3k=",
+      "requires": {
+        "libmime": "1.2.0",
+        "mailcomposer": "2.1.0",
+        "needle": "0.11.0",
+        "nodemailer-direct-transport": "1.1.0",
+        "nodemailer-smtp-transport": "1.1.0"
+      },
+      "dependencies": {
+        "needle": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/needle/-/needle-0.11.0.tgz",
+          "integrity": "sha1-AqcbAI6vfVWuifuf12hbe4jXvCk=",
+          "requires": {
+            "debug": "2.6.9",
+            "iconv-lite": "0.4.24"
+          }
+        }
+      }
+    },
+    "nodemailer-direct-transport": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/nodemailer-direct-transport/-/nodemailer-direct-transport-1.1.0.tgz",
+      "integrity": "sha1-oveHCO5vFuoFc/yClJ0Tj/Fy9iQ=",
+      "requires": {
+        "smtp-connection": "1.3.8"
+      }
+    },
+    "nodemailer-smtp-transport": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/nodemailer-smtp-transport/-/nodemailer-smtp-transport-1.1.0.tgz",
+      "integrity": "sha1-5sN/MYhaswgOfe089SjErX5pE5g=",
+      "requires": {
+        "clone": "1.0.4",
+        "nodemailer-wellknown": "0.1.10",
+        "smtp-connection": "1.3.8"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+          "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+        }
+      }
+    },
+    "nodemailer-wellknown": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/nodemailer-wellknown/-/nodemailer-wellknown-0.1.10.tgz",
+      "integrity": "sha1-WG24EB2zDLRDjrVGc3pBqtDPE9U="
+    },
+    "noop-logger": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz",
+      "integrity": "sha1-lKKxYzxPExdVMAfYlm/Q6EG2pMI=",
+      "optional": true
+    },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "requires": {
+        "abbrev": "1.1.1",
+        "osenv": "0.1.5"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "requires": {
+        "hosted-git-info": "2.8.8",
+        "resolve": "1.19.0",
+        "semver": "5.7.1",
+        "validate-npm-package-license": "3.0.4"
+      }
+    },
+    "normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "requires": {
+        "remove-trailing-separator": "1.1.0"
+      }
+    },
+    "normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI="
+    },
+    "normalize-url": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
+      "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==",
+      "dev": true
+    },
+    "npm-bundled": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz",
+      "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==",
+      "requires": {
+        "npm-normalize-package-bin": "1.0.1"
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA=="
+    },
+    "npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "requires": {
+        "ignore-walk": "3.0.3",
+        "npm-bundled": "1.1.1",
+        "npm-normalize-package-bin": "1.0.1"
+      }
+    },
+    "npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
+      "requires": {
+        "path-key": "2.0.1"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "1.1.5",
+        "console-control-strings": "1.1.0",
+        "gauge": "2.7.4",
+        "set-blocking": "2.0.0"
+      }
+    },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "requires": {
+        "boolbase": "1.0.0"
+      }
+    },
+    "null-check": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz",
+      "integrity": "sha1-l33/1xdgErnsMNKjnbXPcqBDnt0=",
+      "dev": true
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4="
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
+    },
+    "nwsapi": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
+      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
+      "dev": true
+    },
+    "oas-kit-common": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/oas-kit-common/-/oas-kit-common-1.0.8.tgz",
+      "integrity": "sha512-pJTS2+T0oGIwgjGpw7sIRU8RQMcUoKCDWFLdBqKB2BNmGpbBMH2sdqAaOXUg8OzonZHU0L7vfJu1mJFEiYDWOQ==",
+      "requires": {
+        "fast-safe-stringify": "2.0.7"
+      }
+    },
+    "oas-linter": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/oas-linter/-/oas-linter-3.2.1.tgz",
+      "integrity": "sha512-e5G6bbq3Nrfxm+SDPR5AiZ6n2smVUmhLA1OgI2/Bl8e2ywfWsKw/yuqrwiXXiNHb1wdM/GyPMX6QjCGJODlaaA==",
+      "requires": {
+        "@exodus/schemasafe": "1.0.0-rc.3",
+        "should": "13.2.3",
+        "yaml": "1.10.0"
+      }
+    },
+    "oas-resolver": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/oas-resolver/-/oas-resolver-2.5.3.tgz",
+      "integrity": "sha512-y4gP5tabqP3YcNVHNAEJAlcqZ40Y9lxemzmXvt54evbrvuGiK5dEhuE33Rf+191TOwzlxMoIgbwMYeuOM7BwjA==",
+      "requires": {
+        "node-fetch-h2": "2.3.0",
+        "oas-kit-common": "1.0.8",
+        "reftools": "1.1.7",
+        "yaml": "1.10.0",
+        "yargs": "16.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "requires": {
+            "string-width": "4.2.0",
+            "strip-ansi": "6.0.0",
+            "wrap-ansi": "7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "requires": {
+            "emoji-regex": "8.0.0",
+            "is-fullwidth-code-point": "3.0.0",
+            "strip-ansi": "6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "5.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "requires": {
+            "ansi-styles": "4.3.0",
+            "string-width": "4.2.0",
+            "strip-ansi": "6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "requires": {
+            "cliui": "7.0.4",
+            "escalade": "3.1.1",
+            "get-caller-file": "2.0.5",
+            "require-directory": "2.1.1",
+            "string-width": "4.2.0",
+            "y18n": "5.0.5",
+            "yargs-parser": "20.2.4"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
+        }
+      }
+    },
+    "oas-schema-walker": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/oas-schema-walker/-/oas-schema-walker-1.1.5.tgz",
+      "integrity": "sha512-2yucenq1a9YPmeNExoUa9Qwrt9RFkjqaMAA1X+U7sbb0AqBeTIdMHky9SQQ6iN94bO5NW0W4TRYXerG+BdAvAQ=="
+    },
+    "oas-validator": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/oas-validator/-/oas-validator-5.0.4.tgz",
+      "integrity": "sha512-/v+5BbPXl7JuKf1bYhEGIfbJZR7zBf5QJNM2RAe1e0bsABsp35nAfeptZq0hb+9RMecGSFxmzhuvlOT0/KioiQ==",
+      "requires": {
+        "call-me-maybe": "1.0.1",
+        "oas-kit-common": "1.0.8",
+        "oas-linter": "3.2.1",
+        "oas-resolver": "2.5.3",
+        "oas-schema-walker": "1.1.5",
+        "reftools": "1.1.7",
+        "should": "13.2.3",
+        "yaml": "1.10.0"
+      }
+    },
+    "oauth": {
+      "version": "0.9.14",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.14.tgz",
+      "integrity": "sha1-xXSIg6QLU94wrenKvyEAQUuKCXE="
+    },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
+    },
+    "oauth2orize": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/oauth2orize/-/oauth2orize-1.8.0.tgz",
+      "integrity": "sha1-8t3AEV1jXQSAdGJJwA8OoanFG6g=",
+      "requires": {
+        "debug": "2.6.9",
+        "uid2": "0.0.3",
+        "utils-merge": "1.0.1"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-component": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz",
+      "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE="
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "requires": {
+        "copy-descriptor": "0.1.1",
+        "define-property": "0.2.5",
+        "kind-of": "3.2.2"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "0.1.6"
+          }
+        }
+      }
+    },
+    "object-inspect": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz",
+      "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw=="
+    },
+    "object-is": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.4.tgz",
+      "integrity": "sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "requires": {
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "has-symbols": "1.0.1",
+        "object-keys": "1.1.1"
+      }
+    },
+    "object.getownpropertydescriptors": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.1.tgz",
+      "integrity": "sha512-6DtXgZ/lIZ9hqx4GtZETobXLR/ZLaa0aqV0kzbn80Rf8Z2e/XFnhA0I7p07N2wH8bBBltr2xQPi6sbKWAY2Eng==",
+      "dev": true,
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1"
+      }
+    },
+    "object.omit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
+      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
+      "requires": {
+        "for-own": "0.1.5",
+        "is-extendable": "0.1.1"
+      }
+    },
+    "object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "requires": {
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "object.values": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz",
+      "integrity": "sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==",
+      "dev": true,
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1",
+        "has": "1.0.3"
+      }
+    },
+    "obuf": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
+      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
+    },
+    "ol": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-6.5.0.tgz",
+      "integrity": "sha512-a5ebahrjF5yCPFle1rc0aHzKp/9A4LlUnjh+S3I+x4EgcvcddDhpOX3WDOs0Pg9/wEElrikHSGEvbeej2Hh4Ug==",
+      "dev": true,
+      "requires": {
+        "ol-mapbox-style": "6.3.0",
+        "pbf": "3.2.1",
+        "rbush": "3.0.1"
+      }
+    },
+    "ol-mapbox-style": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-6.3.0.tgz",
+      "integrity": "sha512-oRMP5nTEHvF8OoH0sofXElJGi1RV84H27M67nbb2AKcElGag/Z9a6FoI15+J/LSxsg5E1IOW4pIHi0w5ZOUIVg==",
+      "dev": true,
+      "requires": {
+        "@mapbox/mapbox-gl-style-spec": "13.18.1",
+        "mapbox-to-css-font": "2.4.0",
+        "webfont-matcher": "1.1.0"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1.0.2"
+      }
+    },
+    "one-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz",
+      "integrity": "sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==",
+      "requires": {
+        "fn.name": "1.1.0"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "optional": true,
+      "requires": {
+        "mimic-fn": "2.1.0"
+      },
+      "dependencies": {
+        "mimic-fn": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+          "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+          "optional": true
+        }
+      }
+    },
+    "openapi-types": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-1.3.5.tgz",
+      "integrity": "sha512-11oi4zYorsgvg5yBarZplAqbpev5HkuVNPlZaPTknPDzAynq+lnJdXAmruGWP0s+dNYZS7bjM+xrTpJw7184Fg=="
+    },
+    "opn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
+      "integrity": "sha512-iPNl7SyM8L30Rm1sjGdLLheyHVw5YXVfi3SKWJzBI7efxRwHojfRFjwE/OLM6qp9xJYMgab8WicTU1cPoY+Hpg==",
+      "requires": {
+        "is-wsl": "1.1.0"
+      }
+    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "requires": {
+        "minimist": "0.0.10",
+        "wordwrap": "0.0.2"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.10",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
+        }
+      }
+    },
+    "optional": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/optional/-/optional-0.1.4.tgz",
+      "integrity": "sha512-gtvrrCfkE08wKcgXaVwQVgwEQ8vel2dc5DDBn9RLQZ3YtmtkBss6A2HY6BnJH4N/4Ku97Ri/SF8sNWE2225WJw=="
+    },
+    "optionator": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
+      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
+      "dev": true,
+      "requires": {
+        "deep-is": "0.1.3",
+        "fast-levenshtein": "2.0.6",
+        "levn": "0.3.0",
+        "prelude-ls": "1.1.2",
+        "type-check": "0.3.2",
+        "word-wrap": "1.2.3"
+      }
+    },
+    "options": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
+      "integrity": "sha1-7CLTEoBrtT5zF3Pnza788cZDEo8="
+    },
+    "optjs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/optjs/-/optjs-3.2.2.tgz",
+      "integrity": "sha1-aabOicRCpEQDFBrS+bNwvVu29O4="
+    },
+    "ora": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-2.1.0.tgz",
+      "integrity": "sha512-hNNlAd3gfv/iPmsNxYoAPLvxg7HuPozww7fFonMZvL84tP6Ox5igfk5j/+a9rtJJwqMgKK+JgWsAQik5o0HTLA==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.2",
+        "cli-cursor": "2.1.0",
+        "cli-spinners": "1.3.1",
+        "log-symbols": "2.2.0",
+        "strip-ansi": "4.0.0",
+        "wcwidth": "1.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          }
+        },
+        "cli-cursor": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+          "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+          "dev": true,
+          "requires": {
+            "restore-cursor": "2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "onetime": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+          "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+          "dev": true,
+          "requires": {
+            "mimic-fn": "1.2.0"
+          }
+        },
+        "restore-cursor": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+          "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+          "dev": true,
+          "requires": {
+            "onetime": "2.0.1",
+            "signal-exit": "3.0.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "ordered-read-streams": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ordered-read-streams/-/ordered-read-streams-1.0.1.tgz",
+      "integrity": "sha1-d8DLN8QVJdZBZtmQ/61+xqDhNj4=",
+      "requires": {
+        "readable-stream": "2.3.7"
+      }
+    },
+    "original": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
+      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
+      "requires": {
+        "url-parse": "1.4.7"
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
+    },
+    "os-locale": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-2.1.0.tgz",
+      "integrity": "sha512-3sslG3zJbEYcaC4YVAvDorjGxc7tv6KVATnLPZONiljsUncvihe9BQoVCEs0RZ1kmf4Hk9OBqlZfJZWI4GanKA==",
+      "requires": {
+        "execa": "0.7.0",
+        "lcid": "1.0.0",
+        "mem": "1.1.0"
+      }
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "requires": {
+        "os-homedir": "1.0.2",
+        "os-tmpdir": "1.0.2"
+      }
+    },
+    "otplib": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/otplib/-/otplib-5.1.1.tgz",
+      "integrity": "sha1-4Iqf+Pp5wmvFRy6kLTJx3AEleTI=",
+      "requires": {
+        "thirty-two": "1.0.2"
+      }
+    },
+    "p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
+    },
+    "p-limit": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "requires": {
+        "p-try": "1.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "requires": {
+        "p-limit": "1.3.0"
+      }
+    },
+    "p-map": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
+      "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA=="
+    },
+    "p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+    },
+    "package-json": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz",
+      "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=",
+      "requires": {
+        "got": "6.7.1",
+        "registry-auth-token": "3.4.0",
+        "registry-url": "3.1.0",
+        "semver": "5.7.1"
+      }
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "requires": {
+        "cyclist": "1.0.1",
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "param-case": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "requires": {
+        "no-case": "2.3.2"
+      }
+    },
+    "parcel-bundler": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmjs.org/parcel-bundler/-/parcel-bundler-1.12.4.tgz",
+      "integrity": "sha512-G+iZGGiPEXcRzw0fiRxWYCKxdt/F7l9a0xkiU4XbcVRJCSlBnioWEwJMutOCCpoQmaQtjB4RBHDGIHN85AIhLQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@babel/core": "7.12.10",
+        "@babel/generator": "7.12.11",
+        "@babel/parser": "7.12.11",
+        "@babel/plugin-transform-flow-strip-types": "7.12.10",
+        "@babel/plugin-transform-modules-commonjs": "7.12.1",
+        "@babel/plugin-transform-react-jsx": "7.12.12",
+        "@babel/preset-env": "7.12.11",
+        "@babel/runtime": "7.12.5",
+        "@babel/template": "7.12.7",
+        "@babel/traverse": "7.12.12",
+        "@babel/types": "7.12.12",
+        "@iarna/toml": "2.2.5",
+        "@parcel/fs": "1.11.0",
+        "@parcel/logger": "1.11.1",
+        "@parcel/utils": "1.11.0",
+        "@parcel/watcher": "1.12.1",
+        "@parcel/workers": "1.11.0",
+        "ansi-to-html": "0.6.14",
+        "babylon-walk": "1.0.2",
+        "browserslist": "4.16.0",
+        "chalk": "2.2.2",
+        "clone": "2.1.2",
+        "command-exists": "1.2.9",
+        "commander": "2.17.1",
+        "core-js": "2.6.12",
+        "cross-spawn": "6.0.5",
+        "css-modules-loader-core": "1.1.0",
+        "cssnano": "4.1.10",
+        "deasync": "0.1.21",
+        "dotenv": "5.0.1",
+        "dotenv-expand": "5.1.0",
+        "envinfo": "7.7.3",
+        "fast-glob": "2.2.7",
+        "filesize": "3.6.1",
+        "get-port": "3.2.0",
+        "htmlnano": "0.2.8",
+        "is-glob": "4.0.1",
+        "is-url": "1.2.4",
+        "js-yaml": "3.14.1",
+        "json5": "1.0.1",
+        "micromatch": "3.1.10",
+        "mkdirp": "0.5.5",
+        "node-forge": "0.7.6",
+        "node-libs-browser": "2.2.1",
+        "opn": "5.1.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1",
+        "posthtml": "0.11.6",
+        "posthtml-parser": "0.4.2",
+        "posthtml-render": "1.4.0",
+        "resolve": "1.19.0",
+        "semver": "5.7.1",
+        "serialize-to-js": "3.1.1",
+        "serve-static": "1.14.1",
+        "source-map": "0.6.1",
+        "terser": "3.17.0",
+        "v8-compile-cache": "2.2.0",
+        "ws": "5.2.2"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "dev": true
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+          "dev": true
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "dev": true,
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+          "dev": true
+        },
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "1.0.5",
+            "path-key": "2.0.1",
+            "semver": "5.7.1",
+            "shebang-command": "1.2.0",
+            "which": "1.3.1"
+          }
+        },
+        "dotenv": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
+          "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==",
+          "dev": true
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "dev": true,
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "dev": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "dev": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "dev": true,
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "dev": true
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "dev": true,
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "dev": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "dev": true,
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "dev": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "dev": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "dev": true,
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+          "dev": true
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "dev": true,
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "1.2.5"
+          }
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "dev": true,
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        },
+        "node-forge": {
+          "version": "0.7.6",
+          "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.6.tgz",
+          "integrity": "sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "3.2.1",
+                "escape-string-regexp": "1.0.5",
+                "supports-color": "5.5.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "dev": true,
+                  "requires": {
+                    "has-flag": "3.0.0"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        },
+        "ws": {
+          "version": "5.2.2",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
+          "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
+          "dev": true,
+          "requires": {
+            "async-limiter": "1.0.1"
+          }
+        }
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "requires": {
+        "asn1.js": "5.4.1",
+        "browserify-aes": "1.2.0",
+        "evp_bytestokey": "1.0.3",
+        "pbkdf2": "3.1.1",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "requires": {
+        "glob-base": "0.3.0",
+        "is-dotfile": "1.0.3",
+        "is-extglob": "1.0.0",
+        "is-glob": "2.0.1"
+      }
+    },
+    "parse-iso-duration": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/parse-iso-duration/-/parse-iso-duration-1.1.0.tgz",
+      "integrity": "sha512-gZ4xqt/7/pWg9Z7mhwQdsqZAVMKMVbBH7C4rQBtXpVjphPVjEow2ASxukh/m32QoSVn11OO7T1XAC2KN+No5EQ==",
+      "dev": true
+    },
+    "parse-json": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
+      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
+      "requires": {
+        "error-ex": "1.3.2"
+      }
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
+    "parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
+    "parsejson": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/parsejson/-/parsejson-0.0.3.tgz",
+      "integrity": "sha1-q343WfIJ7OmUN5c/fQ8fZK4OZKs=",
+      "dev": true,
+      "requires": {
+        "better-assert": "1.0.2"
+      }
+    },
+    "parseqs": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
+      "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=",
+      "requires": {
+        "better-assert": "1.0.2"
+      }
+    },
+    "parseuri": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz",
+      "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=",
+      "requires": {
+        "better-assert": "1.0.2"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+    },
+    "passport": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.3.2.tgz",
+      "integrity": "sha1-ndAJ+RXo/glbASSgG4+C2gdRAQI=",
+      "requires": {
+        "passport-strategy": "1.0.0",
+        "pause": "0.0.1"
+      }
+    },
+    "passport-http-bearer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/passport-http-bearer/-/passport-http-bearer-1.0.1.tgz",
+      "integrity": "sha1-FHRp6jZp4qhMYWfvmdu3fh8AmKg=",
+      "requires": {
+        "passport-strategy": "1.0.0"
+      }
+    },
+    "passport-oauth2-client-password": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/passport-oauth2-client-password/-/passport-oauth2-client-password-0.1.2.tgz",
+      "integrity": "sha1-TzeLZ4uS0W270jOmxwZSAJPlYbo=",
+      "requires": {
+        "passport-strategy": "1.0.0"
+      }
+    },
+    "passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha1-tVOaqPwiWj0a0XlHbd8ja0QPUuQ="
+    },
+    "path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ=="
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-is-inside": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
+      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM="
+    },
+    "path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A="
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "path-type": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
+      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
+      "requires": {
+        "pify": "3.0.0"
+      }
+    },
+    "pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
+    },
+    "pbf": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.2.1.tgz",
+      "integrity": "sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==",
+      "dev": true,
+      "requires": {
+        "ieee754": "1.2.1",
+        "resolve-protobuf-schema": "2.1.0"
+      }
+    },
+    "pbkdf2": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.1.tgz",
+      "integrity": "sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==",
+      "requires": {
+        "create-hash": "1.2.0",
+        "create-hmac": "1.1.7",
+        "ripemd160": "2.0.2",
+        "safe-buffer": "5.1.2",
+        "sha.js": "2.4.11"
+      }
+    },
+    "pbkdf2-sha256": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pbkdf2-sha256/-/pbkdf2-sha256-1.1.1.tgz",
+      "integrity": "sha1-1Ehv/CwxTPtctXwo+cuH5W+y4T0="
+    },
+    "performance-now": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU="
+    },
+    "physical-cpu-count": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/physical-cpu-count/-/physical-cpu-count-2.0.0.tgz",
+      "integrity": "sha1-GN4vl+S/epVRrXURlCtUlverpmA=",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
+    },
+    "picomodal": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/picomodal/-/picomodal-3.0.0.tgz",
+      "integrity": "sha1-+s0w9PvzSoCcHgTqUl8ATzmcC4I="
+    },
+    "pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "requires": {
+        "pinkie": "2.0.4"
+      }
+    },
+    "pkg-dir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
+      "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
+      "requires": {
+        "find-up": "2.1.0"
+      }
+    },
+    "pn": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
+      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
+      "dev": true
+    },
+    "poplib": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/poplib/-/poplib-0.1.7.tgz",
+      "integrity": "sha1-L0tYtVkpcjUM2X9IKrpo+OBVdLw=",
+      "requires": {
+        "optimist": "0.6.1"
+      }
+    },
+    "popsicle": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/popsicle/-/popsicle-9.2.0.tgz",
+      "integrity": "sha512-petRj39w05GvH1WKuGFmzxR9+k+R9E7zX5XWTFee7P/qf88hMuLT7aAO/RsmldpQMtJsWQISkTQlfMRECKlxhw==",
+      "requires": {
+        "concat-stream": "1.6.2",
+        "form-data": "2.1.4",
+        "make-error-cause": "1.2.2",
+        "tough-cookie": "2.3.4"
+      }
+    },
+    "popsicle-proxy-agent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/popsicle-proxy-agent/-/popsicle-proxy-agent-3.0.0.tgz",
+      "integrity": "sha1-uRM8VdlFdZq37mG3cRNkYg066tw=",
+      "requires": {
+        "http-proxy-agent": "1.0.0",
+        "https-proxy-agent": "1.0.0"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-2.1.1.tgz",
+          "integrity": "sha1-1t4Q1a9hMtW9aSQn1G/FOFOQlMc=",
+          "requires": {
+            "extend": "3.0.2",
+            "semver": "5.0.3"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz",
+          "integrity": "sha1-NffabEjOTdv6JkiRrFk+5f+GceY=",
+          "requires": {
+            "agent-base": "2.1.1",
+            "debug": "2.6.9",
+            "extend": "3.0.2"
+          }
+        },
+        "semver": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
+          "integrity": "sha1-d0Zt5YnNXTyV8TiqeLxWmjy10no="
+        }
+      }
+    },
+    "popsicle-retry": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/popsicle-retry/-/popsicle-retry-3.2.1.tgz",
+      "integrity": "sha1-4G6GZTO0KnoSPrMwy+Y6fOvLoQw=",
+      "requires": {
+        "any-promise": "1.3.0",
+        "xtend": "4.0.2"
+      }
+    },
+    "popsicle-rewrite": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/popsicle-rewrite/-/popsicle-rewrite-1.0.0.tgz",
+      "integrity": "sha1-HdTo6pwxgjUfuCD4eTTZkvf7kAc="
+    },
+    "popsicle-status": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/popsicle-status/-/popsicle-status-2.0.1.tgz",
+      "integrity": "sha1-jdcMT+fGlBCa3XhP/oDqysHnso0="
+    },
+    "portfinder": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
+      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
+      "requires": {
+        "async": "2.6.3",
+        "debug": "3.2.7",
+        "mkdirp": "0.5.5"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+    },
+    "postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "requires": {
+        "chalk": "2.4.2",
+        "source-map": "0.6.1",
+        "supports-color": "5.5.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-calc": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.5.tgz",
+      "integrity": "sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35",
+        "postcss-selector-parser": "6.0.4",
+        "postcss-value-parser": "4.1.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+          "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-colormin": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
+      "integrity": "sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "color": "3.0.0",
+        "has": "1.0.3",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-convert-values": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz",
+      "integrity": "sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-discard-comments": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
+      "integrity": "sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-discard-duplicates": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz",
+      "integrity": "sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-discard-empty": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz",
+      "integrity": "sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-discard-overridden": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz",
+      "integrity": "sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-import": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-11.1.0.tgz",
+      "integrity": "sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==",
+      "requires": {
+        "postcss": "6.0.23",
+        "postcss-value-parser": "3.3.1",
+        "read-cache": "1.0.0",
+        "resolve": "1.19.0"
+      }
+    },
+    "postcss-load-config": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",
+      "integrity": "sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==",
+      "requires": {
+        "cosmiconfig": "5.2.1",
+        "import-cwd": "2.1.0"
+      }
+    },
+    "postcss-loader": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.6.tgz",
+      "integrity": "sha512-hgiWSc13xVQAq25cVw80CH0l49ZKlAnU1hKPOdRrNj89bokRr/bZF2nT+hebPPF9c9xs8c3gw3Fr2nxtmXYnNg==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "postcss": "6.0.23",
+        "postcss-load-config": "2.1.2",
+        "schema-utils": "0.4.7"
+      }
+    },
+    "postcss-merge-longhand": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
+      "integrity": "sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==",
+      "dev": true,
+      "requires": {
+        "css-color-names": "0.0.4",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1",
+        "stylehacks": "4.0.3"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-merge-rules": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz",
+      "integrity": "sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "caniuse-api": "3.0.0",
+        "cssnano-util-same-parent": "4.0.1",
+        "postcss": "7.0.35",
+        "postcss-selector-parser": "3.1.2",
+        "vendors": "1.0.4"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "dot-prop": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+          "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+          "dev": true,
+          "requires": {
+            "is-obj": "2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "5.3.0",
+            "indexes-of": "1.0.1",
+            "uniq": "1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-minify-font-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz",
+      "integrity": "sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-minify-gradients": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz",
+      "integrity": "sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "4.0.0",
+        "is-color-stop": "1.1.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-minify-params": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz",
+      "integrity": "sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "browserslist": "4.16.0",
+        "cssnano-util-get-arguments": "4.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1",
+        "uniqs": "2.0.0"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-minify-selectors": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz",
+      "integrity": "sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "has": "1.0.3",
+        "postcss": "7.0.35",
+        "postcss-selector-parser": "3.1.2"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "dot-prop": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+          "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+          "dev": true,
+          "requires": {
+            "is-obj": "2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "5.3.0",
+            "indexes-of": "1.0.1",
+            "uniq": "1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-modules-extract-imports": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+      "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.23"
+      }
+    },
+    "postcss-modules-local-by-default": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz",
+      "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.3",
+        "postcss": "6.0.23"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz",
+      "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
+      "dev": true,
+      "requires": {
+        "css-selector-tokenizer": "0.7.3",
+        "postcss": "6.0.23"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz",
+      "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
+      "dev": true,
+      "requires": {
+        "icss-replace-symbols": "1.1.0",
+        "postcss": "6.0.23"
+      }
+    },
+    "postcss-normalize-charset": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
+      "integrity": "sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-display-values": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz",
+      "integrity": "sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "4.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-positions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz",
+      "integrity": "sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "4.0.0",
+        "has": "1.0.3",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-repeat-style": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz",
+      "integrity": "sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "4.0.0",
+        "cssnano-util-get-match": "4.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-string": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz",
+      "integrity": "sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==",
+      "dev": true,
+      "requires": {
+        "has": "1.0.3",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-timing-functions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz",
+      "integrity": "sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "4.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-unicode": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz",
+      "integrity": "sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz",
+      "integrity": "sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==",
+      "dev": true,
+      "requires": {
+        "is-absolute-url": "2.1.0",
+        "normalize-url": "3.3.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-normalize-whitespace": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz",
+      "integrity": "sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-ordered-values": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz",
+      "integrity": "sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-arguments": "4.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-reduce-initial": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
+      "integrity": "sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "caniuse-api": "3.0.0",
+        "has": "1.0.3",
+        "postcss": "7.0.35"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-reduce-transforms": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz",
+      "integrity": "sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==",
+      "dev": true,
+      "requires": {
+        "cssnano-util-get-match": "4.0.0",
+        "has": "1.0.3",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz",
+      "integrity": "sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==",
+      "dev": true,
+      "requires": {
+        "cssesc": "3.0.0",
+        "indexes-of": "1.0.1",
+        "uniq": "1.0.1",
+        "util-deprecate": "1.0.2"
+      }
+    },
+    "postcss-svgo": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-4.0.2.tgz",
+      "integrity": "sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==",
+      "dev": true,
+      "requires": {
+        "is-svg": "3.0.0",
+        "postcss": "7.0.35",
+        "postcss-value-parser": "3.3.1",
+        "svgo": "1.3.2"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-unique-selectors": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz",
+      "integrity": "sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==",
+      "dev": true,
+      "requires": {
+        "alphanum-sort": "1.0.2",
+        "postcss": "7.0.35",
+        "uniqs": "2.0.0"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-url": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-7.3.2.tgz",
+      "integrity": "sha512-QMV5mA+pCYZQcUEPQkmor9vcPQ2MT+Ipuu8qdi1gVxbNiIiErEGft+eny1ak19qALoBkccS5AHaCaCDzh7b9MA==",
+      "requires": {
+        "mime": "1.6.0",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.5",
+        "postcss": "6.0.23",
+        "xxhashjs": "0.2.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
+    "posthtml": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.11.6.tgz",
+      "integrity": "sha512-C2hrAPzmRdpuL3iH0TDdQ6XCc9M7Dcc3zEW5BLerY65G4tWWszwv6nG/ksi6ul5i2mx22ubdljgktXCtNkydkw==",
+      "dev": true,
+      "requires": {
+        "posthtml-parser": "0.4.2",
+        "posthtml-render": "1.4.0"
+      }
+    },
+    "posthtml-parser": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/posthtml-parser/-/posthtml-parser-0.4.2.tgz",
+      "integrity": "sha512-BUIorsYJTvS9UhXxPTzupIztOMVNPa/HtAm9KHni9z6qEfiJ1bpOBL5DfUOL9XAc3XkLIEzBzpph+Zbm4AdRAg==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "3.10.1"
+      }
+    },
+    "posthtml-render": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/posthtml-render/-/posthtml-render-1.4.0.tgz",
+      "integrity": "sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==",
+      "dev": true
+    },
+    "prebuild-install": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-5.3.0.tgz",
+      "integrity": "sha512-aaLVANlj4HgZweKttFNUVNRxDukytuIuxeK2boIMHjagNJCiVKWFsKF4tCE3ql3GbrD2tExPQ7/pwtEJcHNZeg==",
+      "optional": true,
+      "requires": {
+        "detect-libc": "1.0.3",
+        "expand-template": "2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "1.2.5",
+        "mkdirp": "0.5.5",
+        "napi-build-utils": "1.0.2",
+        "node-abi": "2.19.3",
+        "noop-logger": "0.1.1",
+        "npmlog": "4.1.2",
+        "os-homedir": "1.0.2",
+        "pump": "2.0.1",
+        "rc": "1.2.8",
+        "simple-get": "2.8.1",
+        "tar-fs": "1.16.3",
+        "tunnel-agent": "0.6.0",
+        "which-pm-runs": "1.0.0"
+      }
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
+    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
+    },
+    "preserve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
+      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
+    },
+    "pretty-error": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
+      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
+      "requires": {
+        "lodash": "4.17.20",
+        "renderkid": "2.0.4"
+      }
+    },
+    "printj": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
+      "integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+    },
+    "process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
+    },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "2.0.6"
+      }
+    },
+    "promise-finally": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/promise-finally/-/promise-finally-3.0.1.tgz",
+      "integrity": "sha512-hsF8r05ZnypT00IZTC71Ejiu9A7kyyVfHpdl3faasOHNJX62sNPfE8vDAz6P27RJ31i2O5ruhc6JV5xWR6GElQ=="
+    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+    },
+    "properties-parser": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/properties-parser/-/properties-parser-0.3.1.tgz",
+      "integrity": "sha1-ExbpU5/7/ZOEXjabIRAiq9R4dxo=",
+      "dev": true,
+      "requires": {
+        "string.prototype.codepointat": "0.2.1"
+      }
+    },
+    "protobufjs": {
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-6.10.2.tgz",
+      "integrity": "sha512-27yj+04uF6ya9l+qfpH187aqEzfCF4+Uit0I9ZBQVqK09hk/SQzKa2MUqUpXaVa7LOFRg1TSSr3lVxGOk6c0SQ==",
+      "requires": {
+        "@protobufjs/aspromise": "1.1.2",
+        "@protobufjs/base64": "1.1.2",
+        "@protobufjs/codegen": "2.0.4",
+        "@protobufjs/eventemitter": "1.1.0",
+        "@protobufjs/fetch": "1.1.0",
+        "@protobufjs/float": "1.0.2",
+        "@protobufjs/inquire": "1.1.0",
+        "@protobufjs/path": "1.1.2",
+        "@protobufjs/pool": "1.1.0",
+        "@protobufjs/utf8": "1.1.0",
+        "@types/long": "4.0.1",
+        "@types/node": "13.13.38",
+        "long": "4.0.0"
+      },
+      "dependencies": {
+        "@types/node": {
+          "version": "13.13.38",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.38.tgz",
+          "integrity": "sha512-oxo8j9doh7ab9NwDA9bCeFfjHRF/uzk+fTljCy8lMjZ3YzZGAXNDKhTE3Byso/oy32UTUQIXB3HCVHu3d2T3xg=="
+        }
+      }
+    },
+    "protocol-buffers-schema": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.4.0.tgz",
+      "integrity": "sha512-G/2kcamPF2S49W5yaMGdIpkG6+5wZF0fzBteLKgEHjbNzqjZQ85aAs1iJGto31EJaSTkNvHs5IXuHSaTLWBAiA==",
+      "dev": true
+    },
+    "protractor": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.1.2.tgz",
+      "integrity": "sha1-myIXQXCaTGLVzVPGqt1UpxE36V8=",
+      "dev": true,
+      "requires": {
+        "@types/node": "6.0.118",
+        "@types/q": "0.0.32",
+        "@types/selenium-webdriver": "2.53.45",
+        "blocking-proxy": "0.0.5",
+        "chalk": "1.1.3",
+        "glob": "7.1.6",
+        "jasmine": "2.99.0",
+        "jasminewd2": "2.2.0",
+        "optimist": "0.6.1",
+        "q": "1.4.1",
+        "saucelabs": "1.3.0",
+        "selenium-webdriver": "3.0.1",
+        "source-map-support": "0.4.18",
+        "webdriver-js-extender": "1.0.0",
+        "webdriver-manager": "12.1.7"
+      },
+      "dependencies": {
+        "@types/q": {
+          "version": "0.0.32",
+          "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
+          "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "del": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/del/-/del-2.2.2.tgz",
+          "integrity": "sha1-wSyYHQZ4RshLyvhiz/kw2Qf/0ag=",
+          "dev": true,
+          "requires": {
+            "globby": "5.0.0",
+            "is-path-cwd": "1.0.0",
+            "is-path-in-cwd": "1.0.1",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1",
+            "rimraf": "2.7.1"
+          }
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "globby": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-5.0.0.tgz",
+          "integrity": "sha1-69hGZ8oNuzMLmbz8aOrCvFQ3Dg0=",
+          "dev": true,
+          "requires": {
+            "array-union": "1.0.2",
+            "arrify": "1.0.1",
+            "glob": "7.1.6",
+            "object-assign": "4.1.1",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+          "dev": true
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "dev": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+          "dev": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+          "dev": true
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        },
+        "q": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz",
+          "integrity": "sha1-VXBbzZPF82c1MMLCy8DCs63cKG4=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        },
+        "webdriver-manager": {
+          "version": "12.1.7",
+          "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.7.tgz",
+          "integrity": "sha512-XINj6b8CYuUYC93SG3xPkxlyUc3IJbD6Vvo75CVGuG9uzsefDzWQrhz0Lq8vbPxtb4d63CZdYophF8k8Or/YiA==",
+          "dev": true,
+          "requires": {
+            "adm-zip": "0.4.16",
+            "chalk": "1.1.3",
+            "del": "2.2.2",
+            "glob": "7.1.6",
+            "ini": "1.3.8",
+            "minimist": "1.2.5",
+            "q": "1.4.1",
+            "request": "2.88.2",
+            "rimraf": "2.7.1",
+            "semver": "5.7.1",
+            "xml2js": "0.4.17"
+          }
+        }
+      }
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
+    },
+    "psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "requires": {
+        "bn.js": "4.11.9",
+        "browserify-rsa": "4.1.0",
+        "create-hash": "1.2.0",
+        "parse-asn1": "5.1.6",
+        "randombytes": "2.1.0",
+        "safe-buffer": "5.1.2"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
+          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+        }
+      }
+    },
+    "pug": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug/-/pug-3.0.0.tgz",
+      "integrity": "sha512-inmsJyFBSHZaiGLaguoFgJGViX0If6AcfcElimvwj9perqjDpUpw79UIEDZbWFmoGVidh08aoE+e8tVkjVJPCw==",
+      "requires": {
+        "pug-code-gen": "3.0.1",
+        "pug-filters": "4.0.0",
+        "pug-lexer": "5.0.0",
+        "pug-linker": "4.0.0",
+        "pug-load": "3.0.0",
+        "pug-parser": "6.0.0",
+        "pug-runtime": "3.0.0",
+        "pug-strip-comments": "2.0.0"
+      }
+    },
+    "pug-attrs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-attrs/-/pug-attrs-3.0.0.tgz",
+      "integrity": "sha512-azINV9dUtzPMFQktvTXciNAfAuVh/L/JCl0vtPCwvOA21uZrC08K/UnmrL+SXGEVc1FwzjW62+xw5S/uaLj6cA==",
+      "requires": {
+        "constantinople": "4.0.1",
+        "js-stringify": "1.0.2",
+        "pug-runtime": "3.0.0"
+      }
+    },
+    "pug-code-gen": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-3.0.1.tgz",
+      "integrity": "sha512-xJIGvmXTQlkJllq6hqxxjRWcay2F9CU69TuAuiVZgHK0afOhG5txrQOcZyaPHBvSWCU/QQOqEp5XCH94rRZpBQ==",
+      "requires": {
+        "constantinople": "4.0.1",
+        "doctypes": "1.1.0",
+        "js-stringify": "1.0.2",
+        "pug-attrs": "3.0.0",
+        "pug-error": "2.0.0",
+        "pug-runtime": "3.0.0",
+        "void-elements": "3.1.0",
+        "with": "7.0.2"
+      }
+    },
+    "pug-error": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-error/-/pug-error-2.0.0.tgz",
+      "integrity": "sha512-sjiUsi9M4RAGHktC1drQfCr5C5eriu24Lfbt4s+7SykztEOwVZtbFk1RRq0tzLxcMxMYTBR+zMQaG07J/btayQ=="
+    },
+    "pug-filters": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-4.0.0.tgz",
+      "integrity": "sha512-yeNFtq5Yxmfz0f9z2rMXGw/8/4i1cCFecw/Q7+D0V2DdtII5UvqE12VaZ2AY7ri6o5RNXiweGH79OCq+2RQU4A==",
+      "requires": {
+        "constantinople": "4.0.1",
+        "jstransformer": "1.0.0",
+        "pug-error": "2.0.0",
+        "pug-walk": "2.0.0",
+        "resolve": "1.19.0"
+      }
+    },
+    "pug-lexer": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-5.0.0.tgz",
+      "integrity": "sha512-52xMk8nNpuyQ/M2wjZBN5gXQLIylaGkAoTk5Y1pBhVqaopaoj8Z0iVzpbFZAqitL4RHNVDZRnJDsqEYe99Ti0A==",
+      "requires": {
+        "character-parser": "2.2.0",
+        "is-expression": "4.0.0",
+        "pug-error": "2.0.0"
+      }
+    },
+    "pug-linker": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-4.0.0.tgz",
+      "integrity": "sha512-gjD1yzp0yxbQqnzBAdlhbgoJL5qIFJw78juN1NpTLt/mfPJ5VgC4BvkoD3G23qKzJtIIXBbcCt6FioLSFLOHdw==",
+      "requires": {
+        "pug-error": "2.0.0",
+        "pug-walk": "2.0.0"
+      }
+    },
+    "pug-load": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-load/-/pug-load-3.0.0.tgz",
+      "integrity": "sha512-OCjTEnhLWZBvS4zni/WUMjH2YSUosnsmjGBB1An7CsKQarYSWQ0GCVyd4eQPMFJqZ8w9xgs01QdiZXKVjk92EQ==",
+      "requires": {
+        "object-assign": "4.1.1",
+        "pug-walk": "2.0.0"
+      }
+    },
+    "pug-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-6.0.0.tgz",
+      "integrity": "sha512-ukiYM/9cH6Cml+AOl5kETtM9NR3WulyVP2y4HOU45DyMim1IeP/OOiyEWRr6qk5I5klpsBnbuHpwKmTx6WURnw==",
+      "requires": {
+        "pug-error": "2.0.0",
+        "token-stream": "1.0.0"
+      }
+    },
+    "pug-runtime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pug-runtime/-/pug-runtime-3.0.0.tgz",
+      "integrity": "sha512-GoEPcmQNnaTsePEdVA05bDpY+Op5VLHKayg08AQiqJBWU/yIaywEYv7TetC5dEQS3fzBBoyb2InDcZEg3mPTIA=="
+    },
+    "pug-strip-comments": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-strip-comments/-/pug-strip-comments-2.0.0.tgz",
+      "integrity": "sha512-zo8DsDpH7eTkPHCXFeAk1xZXJbyoTfdPlNR0bK7rpOMuhBYb0f5qUVCO1xlsitYd3w5FQTK7zpNVKb3rZoUrrQ==",
+      "requires": {
+        "pug-error": "2.0.0"
+      }
+    },
+    "pug-walk": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pug-walk/-/pug-walk-2.0.0.tgz",
+      "integrity": "sha512-yYELe9Q5q9IQhuvqsZNwA5hfPkMJ8u92bQLIMcsMxf/VADjNtEYptU+inlufAFYcWdHlwNfZOEnOOQrZrcyJCQ=="
+    },
+    "pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "requires": {
+        "end-of-stream": "1.4.4",
+        "once": "1.4.0"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "requires": {
+        "duplexify": "3.7.1",
+        "inherits": "2.0.4",
+        "pump": "2.0.1"
+      }
+    },
+    "punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+    },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "requires": {
+        "commander": "5.1.0",
+        "glob": "7.1.6",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "6.0.4"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "commander": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+          "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "q": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
+      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
+      "dev": true
+    },
+    "qjobs": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/qjobs/-/qjobs-1.2.0.tgz",
+      "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM="
+    },
+    "qs-google-signature": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/qs-google-signature/-/qs-google-signature-1.2.0.tgz",
+      "integrity": "sha1-XeLOBsv4s9yjXJYvsgQCICy5NAA=",
+      "requires": {
+        "clone": "0.1.19",
+        "debug": "2.6.9",
+        "qs": "2.4.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "0.1.19",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-0.1.19.tgz",
+          "integrity": "sha1-YT+2hjmyaklKxTJT4Vsaa9iK2oU="
+        },
+        "qs": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-2.4.2.tgz",
+          "integrity": "sha1-9854jld33wtQENp/fE5zujJHD1o="
+        }
+      }
+    },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
+    },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
+    "quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "dev": true
+    },
+    "quote-stream": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/quote-stream/-/quote-stream-1.0.2.tgz",
+      "integrity": "sha1-hJY/jJwmuULhU/7rU6rnRlK34LI=",
+      "dev": true,
+      "requires": {
+        "buffer-equal": "0.0.1",
+        "minimist": "1.2.5",
+        "through2": "2.0.5"
+      }
+    },
+    "random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha1-T2ih3Arli9P7lYSMMDJNt11kNgs="
+    },
+    "randomatic": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
+      "integrity": "sha512-TuDE5KxZ0J461RVjrJZCJc+J+zCkTb1MbH9AQUq68sMhOMcy9jLcb3BrZKgp9q9Ncltdg4QVqWrH02W2EFFVYw==",
+      "requires": {
+        "is-number": "4.0.0",
+        "kind-of": "6.0.3",
+        "math-random": "1.0.4"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ=="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "requires": {
+        "randombytes": "2.1.0",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "dependencies": {
+        "bytes": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+        }
+      }
+    },
+    "raw-loader": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
+      "integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao="
+    },
+    "rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "dev": true,
+      "requires": {
+        "quickselect": "2.0.0"
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "0.6.0",
+        "ini": "1.3.8",
+        "minimist": "1.2.5",
+        "strip-json-comments": "2.0.1"
+      }
+    },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "requires": {
+        "pify": "2.3.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "requires": {
+        "load-json-file": "1.1.0",
+        "normalize-package-data": "2.5.0",
+        "path-type": "1.1.0"
+      },
+      "dependencies": {
+        "path-type": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+          "requires": {
+            "graceful-fs": "4.2.4",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "requires": {
+        "find-up": "1.1.2",
+        "read-pkg": "1.1.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
+          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
+          "requires": {
+            "path-exists": "2.1.0",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "path-exists": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
+          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
+          "requires": {
+            "pinkie-promise": "2.0.1"
+          }
+        }
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "requires": {
+        "core-util-is": "1.0.2",
+        "inherits": "2.0.4",
+        "isarray": "1.0.0",
+        "process-nextick-args": "2.0.1",
+        "safe-buffer": "5.1.2",
+        "string_decoder": "1.1.1",
+        "util-deprecate": "1.0.2"
+      }
+    },
+    "readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "micromatch": "3.1.10",
+        "readable-stream": "2.3.7"
+      },
+      "dependencies": {
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        }
+      }
+    },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "requires": {
+        "indent-string": "2.1.0",
+        "strip-indent": "1.0.1"
+      }
+    },
+    "redis": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/redis/-/redis-2.8.0.tgz",
+      "integrity": "sha512-M1OkonEQwtRmZv4tEWF2VgpG0JWJ8Fv1PhlgT5+B+uNq2cA3Rt1Yt/ryoR+vQNOQcIEgdCdfH0jr3bDpihAw1A==",
+      "requires": {
+        "double-ended-queue": "2.1.0-0",
+        "redis-commands": "1.6.0",
+        "redis-parser": "2.6.0"
+      }
+    },
+    "redis-commands": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/redis-commands/-/redis-commands-1.6.0.tgz",
+      "integrity": "sha512-2jnZ0IkjZxvguITjFTrGiLyzQZcTvaw8DAaCXxZq/dsHXz7KfMQ3OUJy7Tz9vnRtZRVz6VRCPDvruvU8Ts44wQ=="
+    },
+    "redis-parser": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/redis-parser/-/redis-parser-2.6.0.tgz",
+      "integrity": "sha1-Uu0J2srBCPGmMcB+m2mUHnoZUEs="
+    },
+    "reduce": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/reduce/-/reduce-1.0.2.tgz",
+      "integrity": "sha512-xX7Fxke/oHO5IfZSk77lvPa/7bjMh9BuCk4OOoX5XTXrM7s0Z+MkPfSDfz0q7r91BhhGSs8gii/VEN/7zhCPpQ==",
+      "dev": true,
+      "requires": {
+        "object-keys": "1.1.1"
+      }
+    },
+    "referrer-policy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/referrer-policy/-/referrer-policy-1.2.0.tgz",
+      "integrity": "sha512-LgQJIuS6nAy1Jd88DCQRemyE3mS+ispwlqMk3b0yjZ257fI1v9c+/p6SD5gP5FGyXUIgrNOAfmyioHwZtYv2VA=="
+    },
+    "reflect-metadata": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
+    },
+    "reftools": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/reftools/-/reftools-1.1.7.tgz",
+      "integrity": "sha512-I+KZFkQvZjMZqVWxRezTC/kQ2kLhGRZ7C+4ARbgmb5WJbvFUlbrZ/6qlz6mb+cGcPNYib+xqL8kZlxCsSZ7Hew=="
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+      "dev": true
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "dev": true,
+      "requires": {
+        "regenerate": "1.4.2"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.12.5"
+      }
+    },
+    "regex-cache": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
+      "integrity": "sha512-nVIZwtCjkC9YgvWkpM55B5rBhBYRZhAaJbgcFYXXsHnbZ9UZI9nnVWYZpBlCqv9ho2eZryPnWrZGsOdPwVWXWQ==",
+      "requires": {
+        "is-equal-shallow": "0.1.3"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "requires": {
+        "extend-shallow": "3.0.2",
+        "safe-regex": "1.1.0"
+      }
+    },
+    "regexp-clone": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/regexp-clone/-/regexp-clone-0.0.1.tgz",
+      "integrity": "sha1-p8LgmJH9vzj7sQ03b7cwA+aKxYk="
+    },
+    "regexp.prototype.flags": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
+      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+      "requires": {
+        "define-properties": "1.1.3",
+        "es-abstract": "1.17.7"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.7",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
+          "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
+          "requires": {
+            "es-to-primitive": "1.2.1",
+            "function-bind": "1.1.1",
+            "has": "1.0.3",
+            "has-symbols": "1.0.1",
+            "is-callable": "1.2.2",
+            "is-regex": "1.1.1",
+            "object-inspect": "1.9.0",
+            "object-keys": "1.1.1",
+            "object.assign": "4.1.2",
+            "string.prototype.trimend": "1.0.3",
+            "string.prototype.trimstart": "1.0.3"
+          }
+        }
+      }
+    },
+    "regexpu-core": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "dev": true,
+      "requires": {
+        "regenerate": "1.4.2",
+        "regenerate-unicode-properties": "8.2.0",
+        "regjsgen": "0.5.2",
+        "regjsparser": "0.6.4",
+        "unicode-match-property-ecmascript": "1.0.4",
+        "unicode-match-property-value-ecmascript": "1.2.0"
+      }
+    },
+    "registry-auth-token": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz",
+      "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==",
+      "requires": {
+        "rc": "1.2.8",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "requires": {
+        "rc": "1.2.8"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
+      "dev": true
+    },
+    "regjsparser": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+      "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
+      "dev": true,
+      "requires": {
+        "jsesc": "0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+          "dev": true
+        }
+      }
+    },
+    "regression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/regression/-/regression-2.0.1.tgz",
+      "integrity": "sha1-jSnD6CJKEIUMNeM36FqLL6w7DIc="
+    },
+    "reinterval": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reinterval/-/reinterval-1.1.0.tgz",
+      "integrity": "sha1-M2Hs+jymwYKDOA3Qu5VG85D17Oc="
+    },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
+    },
+    "renderkid": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.4.tgz",
+      "integrity": "sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==",
+      "requires": {
+        "css-select": "1.2.0",
+        "dom-converter": "0.2.0",
+        "htmlparser2": "3.10.1",
+        "lodash": "4.17.20",
+        "strip-ansi": "3.0.1"
+      }
+    },
+    "repeat-element": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
+      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g=="
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+    },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "requires": {
+        "is-finite": "1.1.0"
+      }
+    },
+    "request": {
+      "version": "2.81.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
+      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
+      "requires": {
+        "aws-sign2": "0.6.0",
+        "aws4": "1.11.0",
+        "caseless": "0.12.0",
+        "combined-stream": "1.0.8",
+        "extend": "3.0.2",
+        "forever-agent": "0.6.1",
+        "form-data": "2.1.4",
+        "har-validator": "4.2.1",
+        "hawk": "3.1.3",
+        "http-signature": "1.1.1",
+        "is-typedarray": "1.0.0",
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.27",
+        "oauth-sign": "0.8.2",
+        "performance-now": "0.2.0",
+        "qs": "6.4.0",
+        "safe-buffer": "5.1.2",
+        "stringstream": "0.0.6",
+        "tough-cookie": "2.3.4",
+        "tunnel-agent": "0.6.0",
+        "uuid": "3.4.0"
+      }
+    },
+    "request-promise-core": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
+      "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
+      "dev": true,
+      "requires": {
+        "lodash": "4.17.20"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
+      "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
+      "dev": true,
+      "requires": {
+        "request-promise-core": "1.1.4",
+        "stealthy-require": "1.1.1",
+        "tough-cookie": "2.3.4"
+      }
+    },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.7.1"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
+          "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
+        }
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "optional": true
+    },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
+    "resolve": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz",
+      "integrity": "sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==",
+      "requires": {
+        "is-core-module": "2.2.0",
+        "path-parse": "1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
+      "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
+      "requires": {
+        "resolve-from": "3.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+    },
+    "resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "dev": true,
+      "requires": {
+        "protocol-buffers-schema": "3.4.0"
+      }
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+    },
+    "response-time": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/response-time/-/response-time-2.3.2.tgz",
+      "integrity": "sha1-/6cbq5UtYvfB1Jt0NDVfvGjf/Fo=",
+      "requires": {
+        "depd": "1.1.2",
+        "on-headers": "1.0.2"
+      }
+    },
+    "restore-cursor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
+      "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
+      "requires": {
+        "exit-hook": "1.1.1",
+        "onetime": "1.1.0"
+      },
+      "dependencies": {
+        "onetime": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
+        }
+      }
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+    },
+    "retry": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.9.0.tgz",
+      "integrity": "sha1-b2l+UKDk3cjI9/tUeptg3q1DZ40="
+    },
+    "retry-request": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/retry-request/-/retry-request-4.1.3.tgz",
+      "integrity": "sha512-QnRZUpuPNgX0+D1xVxul6DbJ9slvo4Rm6iV/dn63e048MvGbUZiKySVt6Tenp04JqmchxjiLltGerOJys7kJYQ==",
+      "optional": true,
+      "requires": {
+        "debug": "4.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "optional": true,
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "optional": true
+        }
+      }
+    },
+    "rgb-regex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
+      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
+      "dev": true
+    },
+    "rgba-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
+      "dev": true
+    },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+      "requires": {
+        "align-text": "0.1.4"
+      }
+    },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "requires": {
+        "glob": "7.1.6"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "requires": {
+        "hash-base": "3.1.0",
+        "inherits": "2.0.4"
+      }
+    },
+    "rndm": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/rndm/-/rndm-1.2.0.tgz",
+      "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "requires": {
+        "aproba": "1.2.0"
+      }
+    },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
+      "dev": true
+    },
+    "rxjs": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-5.4.1.tgz",
+      "integrity": "sha1-ti91fyeURdJloYpY+wpw3JDpFiY=",
+      "requires": {
+        "symbol-observable": "1.0.1"
+      }
+    },
+    "rxjs-observable": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/rxjs-observable/-/rxjs-observable-0.0.7.tgz",
+      "integrity": "sha512-aB3nxdX34jbr+83d2b/OERp/96EKSfx0hns06Tt5Gji49AxIPL/D+RV4+jjolPWW3fxArEi3phOEDx9l+RiCLA=="
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safe-json-parse": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-1.0.1.tgz",
+      "integrity": "sha1-PnZyPjjf3aE8mx0poeB//uSzC1c=",
+      "dev": true
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "requires": {
+        "ret": "0.1.15"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "sass-graph": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
+      "optional": true,
+      "requires": {
+        "glob": "7.1.6",
+        "lodash": "4.17.20",
+        "scss-tokenizer": "0.2.3",
+        "yargs": "13.3.2"
+      }
+    },
+    "sass-loader": {
+      "version": "6.0.7",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-6.0.7.tgz",
+      "integrity": "sha512-JoiyD00Yo1o61OJsoP2s2kb19L1/Y2p3QFcCdWdF6oomBGKVYuZyqHWemRBfQ2uGYsk+CH3eCguXNfpjzlcpaA==",
+      "requires": {
+        "clone-deep": "2.0.2",
+        "loader-utils": "1.1.0",
+        "lodash.tail": "4.1.1",
+        "neo-async": "2.6.2",
+        "pify": "3.0.0"
+      }
+    },
+    "saucelabs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/saucelabs/-/saucelabs-1.3.0.tgz",
+      "integrity": "sha1-0kDoAJ33+ocwbsRXimm6O1xCT+4=",
+      "dev": true,
+      "requires": {
+        "https-proxy-agent": "1.0.0"
+      },
+      "dependencies": {
+        "agent-base": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-2.1.1.tgz",
+          "integrity": "sha1-1t4Q1a9hMtW9aSQn1G/FOFOQlMc=",
+          "dev": true,
+          "requires": {
+            "extend": "3.0.2",
+            "semver": "5.0.3"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-1.0.0.tgz",
+          "integrity": "sha1-NffabEjOTdv6JkiRrFk+5f+GceY=",
+          "dev": true,
+          "requires": {
+            "agent-base": "2.1.1",
+            "debug": "2.6.9",
+            "extend": "3.0.2"
+          }
+        },
+        "semver": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.0.3.tgz",
+          "integrity": "sha1-d0Zt5YnNXTyV8TiqeLxWmjy10no=",
+          "dev": true
+        }
+      }
+    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
+    "saxes": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/saxes/-/saxes-3.1.11.tgz",
+      "integrity": "sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==",
+      "dev": true,
+      "requires": {
+        "xmlchars": "2.2.0"
+      }
+    },
+    "schema-utils": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
+      "integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
+      "requires": {
+        "ajv": "6.12.6",
+        "ajv-keywords": "3.5.2"
+      }
+    },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "optional": true,
+      "requires": {
+        "js-base64": "2.6.4",
+        "source-map": "0.4.4"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "optional": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        }
+      }
+    },
+    "select-hose": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
+      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
+    },
+    "selenium-webdriver": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-3.0.1.tgz",
+      "integrity": "sha1-ot6l2kqX9mcuiefKcnbO+jZRR6c=",
+      "dev": true,
+      "requires": {
+        "adm-zip": "0.4.16",
+        "rimraf": "2.7.1",
+        "tmp": "0.0.30",
+        "xml2js": "0.4.17"
+      },
+      "dependencies": {
+        "tmp": {
+          "version": "0.0.30",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.30.tgz",
+          "integrity": "sha1-ckGdSovn1s51FI/YsyTlk6cRwu0=",
+          "dev": true,
+          "requires": {
+            "os-tmpdir": "1.0.2"
+          }
+        }
+      }
+    },
+    "selfsigned": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
+      "requires": {
+        "node-forge": "0.10.0"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+    },
+    "semver-diff": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
+      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "requires": {
+        "semver": "5.7.1"
+      }
+    },
+    "semver-dsl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/semver-dsl/-/semver-dsl-1.0.1.tgz",
+      "integrity": "sha1-02eN5VVeimH2Ke7QJTZq5fJzQKA=",
+      "dev": true,
+      "requires": {
+        "semver": "5.7.1"
+      }
+    },
+    "semver-intersect": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/semver-intersect/-/semver-intersect-1.4.0.tgz",
+      "integrity": "sha512-d8fvGg5ycKAq0+I6nfWeCx6ffaWJCsBYU0H2Rq56+/zFePYfT8mXkB3tWBSjR5BerkHNZ5eTPIk1/LBYas35xQ==",
+      "requires": {
+        "semver": "5.7.1"
+      }
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "1.1.2",
+        "destroy": "1.0.4",
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "2.3.0",
+        "range-parser": "1.2.1",
+        "statuses": "1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "sendgrid": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/sendgrid/-/sendgrid-5.2.2.tgz",
+      "integrity": "sha512-R4sBB0oCyk7wYy7CgWx75VpeT08HyjL4kMyiBECbkBY6WUqx9iKGT/M8cdaeIqsS1Pij25DpFItElASd3J7CwQ==",
+      "requires": {
+        "async.ensureasync": "0.5.2",
+        "async.queue": "0.5.2",
+        "bottleneck": "1.16.0",
+        "debug": "2.6.9",
+        "lodash.chunk": "4.2.0",
+        "mailparser": "0.6.2",
+        "sendgrid-rest": "2.6.1"
+      }
+    },
+    "sendgrid-rest": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/sendgrid-rest/-/sendgrid-rest-2.6.1.tgz",
+      "integrity": "sha512-W7gPROAPkEiD3+XQh+jeiU5mTNWqfgn45y1Xi8WiFA3CYKGOvHn+U0d62pTWjjynNqsmQIq9AJ0+93Bq67gbSQ==",
+      "requires": {
+        "core-js": "3.8.1",
+        "dotenv": "4.0.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.8.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz",
+          "integrity": "sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg=="
+        }
+      }
+    },
+    "sentiment": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/sentiment/-/sentiment-2.1.0.tgz",
+      "integrity": "sha1-MyeRAMNcOFGcpeQ1JFGGxRL+D9w="
+    },
+    "serialize-javascript": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
+      "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
+    },
+    "serialize-to-js": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/serialize-to-js/-/serialize-to-js-3.1.1.tgz",
+      "integrity": "sha512-F+NGU0UHMBO4Q965tjw7rvieNVjlH6Lqi2emq/Lc9LUURYJbiCzmpi4Cy1OOjjVPtxu0c+NE85LU6968Wko5ZA==",
+      "dev": true
+    },
+    "serve-favicon": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.5.0.tgz",
+      "integrity": "sha1-k10kDN/g9YBTB/3+ln2IlCosvPA=",
+      "requires": {
+        "etag": "1.8.1",
+        "fresh": "0.5.2",
+        "ms": "2.1.1",
+        "parseurl": "1.3.3",
+        "safe-buffer": "5.1.1"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        },
+        "safe-buffer": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
+          "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
+        }
+      }
+    },
+    "serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
+      "requires": {
+        "accepts": "1.3.7",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "1.0.3",
+        "http-errors": "1.6.3",
+        "mime-types": "2.1.27",
+        "parseurl": "1.3.3"
+      },
+      "dependencies": {
+        "http-errors": {
+          "version": "1.6.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+          "requires": {
+            "depd": "1.1.2",
+            "inherits": "2.0.3",
+            "setprototypeof": "1.1.0",
+            "statuses": "1.5.0"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        },
+        "setprototypeof": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "1.0.2",
+        "escape-html": "1.0.3",
+        "parseurl": "1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "server": {
+      "version": "1.0.31",
+      "resolved": "https://registry.npmjs.org/server/-/server-1.0.31.tgz",
+      "integrity": "sha512-n3NZFWYYTp3Q0U6heOIb3qwsdpovFGNX5OEKz8D7l+Jz3eC+q3WjCf/U1p+GV/7u3CsFQlGrmZjdTBLJtjFkbA==",
+      "requires": {
+        "body-parser": "1.19.0",
+        "compression": "1.7.4",
+        "connect-redis": "3.4.2",
+        "cookie-parser": "1.4.3",
+        "csurf": "1.11.0",
+        "dotenv": "8.2.0",
+        "express": "4.17.1",
+        "express-data-parser": "1.2.0",
+        "express-session": "1.15.2",
+        "extend": "3.0.2",
+        "hbs": "4.1.1",
+        "helmet": "3.23.3",
+        "loadware": "2.0.0",
+        "log": "1.4.0",
+        "method-override": "3.0.0",
+        "mz": "2.7.0",
+        "path-to-regexp": "6.2.0",
+        "pug": "3.0.0",
+        "response-time": "2.3.2",
+        "serve-favicon": "2.5.0",
+        "serve-index": "1.9.1",
+        "socket.io": "2.0.3"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+          "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw=="
+        },
+        "path-to-regexp": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.0.tgz",
+          "integrity": "sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg=="
+        }
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "requires": {
+        "extend-shallow": "2.0.1",
+        "is-extendable": "0.1.1",
+        "is-plain-object": "2.0.4",
+        "split-string": "3.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "requires": {
+        "inherits": "2.0.4",
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "shallow-clone": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-1.0.0.tgz",
+      "integrity": "sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==",
+      "requires": {
+        "is-extendable": "0.1.1",
+        "kind-of": "5.1.0",
+        "mixin-object": "2.0.1"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
+    "shallow-copy": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-copy/-/shallow-copy-0.0.1.tgz",
+      "integrity": "sha1-QV9CcC1z2BAzApLMXuhurhoRoXA=",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "requires": {
+        "shebang-regex": "1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM="
+    },
+    "should": {
+      "version": "13.2.3",
+      "resolved": "https://registry.npmjs.org/should/-/should-13.2.3.tgz",
+      "integrity": "sha512-ggLesLtu2xp+ZxI+ysJTmNjh2U0TsC+rQ/pfED9bUZZ4DKefP27D+7YJVVTvKsmjLpIi9jAa7itwDGkDDmt1GQ==",
+      "requires": {
+        "should-equal": "2.0.0",
+        "should-format": "3.0.3",
+        "should-type": "1.4.0",
+        "should-type-adaptors": "1.1.0",
+        "should-util": "1.0.1"
+      }
+    },
+    "should-equal": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/should-equal/-/should-equal-2.0.0.tgz",
+      "integrity": "sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==",
+      "requires": {
+        "should-type": "1.4.0"
+      }
+    },
+    "should-format": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/should-format/-/should-format-3.0.3.tgz",
+      "integrity": "sha1-m/yPdPo5IFxT04w01xcwPidxJPE=",
+      "requires": {
+        "should-type": "1.4.0",
+        "should-type-adaptors": "1.1.0"
+      }
+    },
+    "should-type": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/should-type/-/should-type-1.4.0.tgz",
+      "integrity": "sha1-B1bYzoRt/QmEOmlHcZ36DUz/XPM="
+    },
+    "should-type-adaptors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/should-type-adaptors/-/should-type-adaptors-1.1.0.tgz",
+      "integrity": "sha512-JA4hdoLnN+kebEp2Vs8eBe9g7uy0zbRo+RMcU0EsNy+R+k049Ki+N5tT5Jagst2g7EAja+euFuoXFCa8vIklfA==",
+      "requires": {
+        "should-type": "1.4.0",
+        "should-util": "1.0.1"
+      }
+    },
+    "should-util": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/should-util/-/should-util-1.0.1.tgz",
+      "integrity": "sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g=="
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "silent-error": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/silent-error/-/silent-error-1.1.1.tgz",
+      "integrity": "sha512-n4iEKyNcg4v6/jpb3c0/iyH2G1nzUNl7Gpqtn/mHIJK9S/q/7MCfoO4rwVOoO59qPFIc0hVHvMbiOJ0NdtxKKw==",
+      "requires": {
+        "debug": "2.6.9"
+      }
+    },
+    "simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "optional": true
+    },
+    "simple-get": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-2.8.1.tgz",
+      "integrity": "sha512-lSSHRSw3mQNUGPAYRqo7xy9dhKmxFXIjLjp4KHpf99GEH2VH7C3AM+Qfx6du6jhfUi6Vm7XnbEVEf7Wb6N8jRw==",
+      "optional": true,
+      "requires": {
+        "decompress-response": "3.3.0",
+        "once": "1.4.0",
+        "simple-concat": "1.0.1"
+      }
+    },
+    "simple-lru-cache": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/simple-lru-cache/-/simple-lru-cache-0.0.2.tgz",
+      "integrity": "sha1-1ZzDoZPBpdAyD4Tucy9uRxPlEd0=",
+      "dev": true
+    },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "0.3.2"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
+    "slash": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
+      "integrity": "sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU="
+    },
+    "slice-ansi": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-1.0.0.tgz",
+      "integrity": "sha512-POqxBK6Lb3q6s047D/XsDVNPnF9Dl8JSaqe9h9lURl0OdNqy/ujDrOiIHtsqXMGbWWTIomRzAMaTyawAU//Reg==",
+      "requires": {
+        "is-fullwidth-code-point": "2.0.0"
+      },
+      "dependencies": {
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        }
+      }
+    },
+    "sliced": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/sliced/-/sliced-1.0.1.tgz",
+      "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E="
+    },
+    "smtp-connection": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/smtp-connection/-/smtp-connection-1.3.8.tgz",
+      "integrity": "sha1-VYMsIWDPswhuHc2H/RwZ+mG39TY="
+    },
+    "snakeize": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/snakeize/-/snakeize-0.1.0.tgz",
+      "integrity": "sha1-EMCI2LWOsHazIpu1oE4jLOEmQi0=",
+      "optional": true
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "requires": {
+        "base": "0.11.2",
+        "debug": "2.6.9",
+        "define-property": "0.2.5",
+        "extend-shallow": "2.0.1",
+        "map-cache": "0.2.2",
+        "source-map": "0.5.7",
+        "source-map-resolve": "0.5.3",
+        "use": "3.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "0.1.6"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "requires": {
+        "define-property": "1.0.0",
+        "isobject": "3.0.1",
+        "snapdragon-util": "3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "snappy": {
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/snappy/-/snappy-6.3.5.tgz",
+      "integrity": "sha512-lonrUtdp1b1uDn1dbwgQbBsb5BbaiLeKq+AGwOk2No+en+VvJThwmtztwulEQsLinRF681pBqib0NUZaizKLIA==",
+      "optional": true,
+      "requires": {
+        "bindings": "1.5.0",
+        "nan": "2.14.2",
+        "prebuild-install": "5.3.0"
+      }
+    },
+    "sntp": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "socket.io": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.0.3.tgz",
+      "integrity": "sha1-Q1nwaiSTOua9CHeYr3jGgOrjReM=",
+      "requires": {
+        "debug": "2.6.9",
+        "engine.io": "3.1.5",
+        "object-assign": "4.1.1",
+        "socket.io-adapter": "1.1.2",
+        "socket.io-client": "2.0.4",
+        "socket.io-parser": "3.1.3"
+      }
+    },
+    "socket.io-adapter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz",
+      "integrity": "sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g=="
+    },
+    "socket.io-client": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.0.4.tgz",
+      "integrity": "sha1-CRilUkBtxeVAs4Dc2Xr8SmQzL44=",
+      "requires": {
+        "backo2": "1.0.2",
+        "base64-arraybuffer": "0.1.5",
+        "component-bind": "1.0.0",
+        "component-emitter": "1.2.1",
+        "debug": "2.6.9",
+        "engine.io-client": "3.1.6",
+        "has-cors": "1.1.0",
+        "indexof": "0.0.1",
+        "object-component": "0.0.3",
+        "parseqs": "0.0.5",
+        "parseuri": "0.0.5",
+        "socket.io-parser": "3.1.3",
+        "to-array": "0.1.4"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        }
+      }
+    },
+    "socket.io-parser": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.1.3.tgz",
+      "integrity": "sha512-g0a2HPqLguqAczs3dMECuA1RgoGFPyvDqcbaDEdCWY9g59kdUAz3YRmaJBNKXflrHNwB7Q12Gkf/0CZXfdHR7g==",
+      "requires": {
+        "component-emitter": "1.2.1",
+        "debug": "3.1.0",
+        "has-binary2": "1.0.3",
+        "isarray": "2.0.1"
+      },
+      "dependencies": {
+        "component-emitter": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
+          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
+        },
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "isarray": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz",
+          "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4="
+        }
+      }
+    },
+    "sockjs": {
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
+      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
+      "requires": {
+        "faye-websocket": "0.10.0",
+        "uuid": "3.4.0"
+      }
+    },
+    "sockjs-client": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.1.5.tgz",
+      "integrity": "sha1-G7fA9yIsQPQq3xT0RCy9Eml3GoM=",
+      "requires": {
+        "debug": "2.6.9",
+        "eventsource": "0.1.6",
+        "faye-websocket": "0.11.3",
+        "inherits": "2.0.4",
+        "json3": "3.3.3",
+        "url-parse": "1.4.7"
+      },
+      "dependencies": {
+        "faye-websocket": {
+          "version": "0.11.3",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
+          "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+          "requires": {
+            "websocket-driver": "0.7.4"
+          }
+        }
+      }
+    },
+    "sort-asc": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
+      "integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k=",
+      "dev": true
+    },
+    "sort-desc": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
+      "integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4=",
+      "dev": true
+    },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "requires": {
+        "is-plain-obj": "1.1.0"
+      }
+    },
+    "sort-object": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
+      "integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
+      "dev": true,
+      "requires": {
+        "sort-asc": "0.1.0",
+        "sort-desc": "0.1.1"
+      }
+    },
+    "sorted-array-functions": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sorted-array-functions/-/sorted-array-functions-1.3.0.tgz",
+      "integrity": "sha512-2sqgzeFlid6N4Z2fUQ1cvFmTOLRi/sEDzSQ0OKYchqgoPmQBVyM3959qYx3fpS6Esef80KjmpgPeEr028dP3OA=="
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "requires": {
+        "atob": "2.1.2",
+        "decode-uri-component": "0.2.0",
+        "resolve-url": "0.2.1",
+        "source-map-url": "0.4.0",
+        "urix": "0.1.0"
+      }
+    },
+    "source-map-support": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
+      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+      "requires": {
+        "source-map": "0.5.7"
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
+      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "requires": {
+        "spdx-expression-parse": "3.0.1",
+        "spdx-license-ids": "3.0.7"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "requires": {
+        "spdx-exceptions": "2.3.0",
+        "spdx-license-ids": "3.0.7"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz",
+      "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ=="
+    },
+    "spdy": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
+      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
+      "requires": {
+        "debug": "4.3.1",
+        "handle-thing": "2.0.1",
+        "http-deceiver": "1.2.7",
+        "select-hose": "2.0.0",
+        "spdy-transport": "3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "spdy-transport": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
+      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
+      "requires": {
+        "debug": "4.3.1",
+        "detect-node": "2.0.4",
+        "hpack.js": "2.1.6",
+        "obuf": "1.1.2",
+        "readable-stream": "3.6.0",
+        "wbuf": "1.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        }
+      }
+    },
+    "split-array-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/split-array-stream/-/split-array-stream-2.0.0.tgz",
+      "integrity": "sha512-hmMswlVY91WvGMxs0k8MRgq8zb2mSen4FmDNc5AFiTWtrBpdZN6nwD6kROVe4vNL+ywrvbCKsWVCnEd4riELIg==",
+      "optional": true,
+      "requires": {
+        "is-stream-ended": "0.1.4"
+      }
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "requires": {
+        "extend-shallow": "3.0.2"
+      }
+    },
+    "split2": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-2.2.0.tgz",
+      "integrity": "sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==",
+      "requires": {
+        "through2": "2.0.5"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+    },
+    "srcset": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/srcset/-/srcset-3.0.0.tgz",
+      "integrity": "sha512-D59vF08Qzu/C4GAOXVgMTLfgryt5fyWo93FZyhEWANo0PokFz/iWdDe13mX3O5TRf6l8vMTqckAfR4zPiaH0yQ==",
+      "dev": true
+    },
+    "ssf": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
+      "integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
+      "requires": {
+        "frac": "1.1.2"
+      }
+    },
+    "sshpk": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
+      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
+      "requires": {
+        "asn1": "0.2.4",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.2",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.2",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "safer-buffer": "2.1.2",
+        "tweetnacl": "0.14.5"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "ssri": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
+      "integrity": "sha512-XRSIPqLij52MtgoQavH/x/dU1qVKtWUAAZeOHsR9c2Ddi4XerFy3mc1alf+dLJKl9EUIm/Ht+EowFkTUOA6GAQ==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
+    "stack-trace": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA="
+    },
+    "starttls": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/starttls/-/starttls-1.0.1.tgz",
+      "integrity": "sha1-5ggcJd5rF49adfjyccFIdEkYO0I="
+    },
+    "static-eval": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/static-eval/-/static-eval-2.1.0.tgz",
+      "integrity": "sha512-agtxZ/kWSsCkI5E4QifRwsaPs0P0JmZV6dkLz6ILYfFYQGn+5plctanRN+IC8dJRiFkyXHrwEE3W9Wmx67uDbw==",
+      "dev": true,
+      "requires": {
+        "escodegen": "1.14.3"
+      },
+      "dependencies": {
+        "escodegen": {
+          "version": "1.14.3",
+          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+          "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+          "dev": true,
+          "requires": {
+            "esprima": "4.0.1",
+            "estraverse": "4.3.0",
+            "esutils": "2.0.3",
+            "optionator": "0.8.3",
+            "source-map": "0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "requires": {
+        "define-property": "0.2.5",
+        "object-copy": "0.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "0.2.5",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+          "requires": {
+            "is-descriptor": "0.1.6"
+          }
+        }
+      }
+    },
+    "static-module": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/static-module/-/static-module-2.2.5.tgz",
+      "integrity": "sha512-D8vv82E/Kpmz3TXHKG8PPsCPg+RAX6cbCOyvjM6x04qZtQ47EtJFVwRsdov3n5d6/6ynrOY9XB4JkaZwB2xoRQ==",
+      "dev": true,
+      "requires": {
+        "concat-stream": "1.6.2",
+        "convert-source-map": "1.7.0",
+        "duplexer2": "0.1.4",
+        "escodegen": "1.9.1",
+        "falafel": "2.2.4",
+        "has": "1.0.3",
+        "magic-string": "0.22.5",
+        "merge-source-map": "1.0.4",
+        "object-inspect": "1.4.1",
+        "quote-stream": "1.0.2",
+        "readable-stream": "2.3.7",
+        "shallow-copy": "0.0.1",
+        "static-eval": "2.1.0",
+        "through2": "2.0.5"
+      },
+      "dependencies": {
+        "object-inspect": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.4.1.tgz",
+          "integrity": "sha512-wqdhLpfCUbEsoEwl3FXwGyv8ief1k/1aUdIPCqVnupM6e8l63BEJdiF/0swtn04/8p05tG/T0FrpTlfwvljOdw==",
+          "dev": true
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "stdout-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
+      "optional": true,
+      "requires": {
+        "readable-stream": "2.3.7"
+      }
+    },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
+      "dev": true
+    },
+    "stormpath": {
+      "version": "github:stormpath/stormpath-sdk-node#39637f656dacc03327e1482a3f993445f7b21b4b",
+      "dev": true,
+      "requires": {
+        "async": "1.5.2",
+        "deep-extend": "0.4.2",
+        "dot-object": "1.9.0",
+        "jwt-simple": "0.4.1",
+        "memcached": "2.2.2",
+        "moment": "2.29.1",
+        "njwt": "0.4.1",
+        "properties-parser": "0.3.1",
+        "redis": "2.6.5",
+        "request": "2.74.0",
+        "stormpath-config": "github:stormpath/stormpath-node-config#0cf1158865646f5f3d97856b98afaacaaea8d4b9",
+        "underscore": "1.5.2",
+        "underscore.string": "3.2.3",
+        "uuid": "3.4.0",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "async": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+          "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+          "dev": true
+        },
+        "bl": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/bl/-/bl-1.1.2.tgz",
+          "integrity": "sha1-/cqHGplxOqANGeO7ukHER4emU5g=",
+          "dev": true,
+          "requires": {
+            "readable-stream": "2.0.6"
+          }
+        },
+        "caseless": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+          "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
+          "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
+          "dev": true
+        },
+        "form-data": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-1.0.1.tgz",
+          "integrity": "sha1-rjFduaSQf6BlUCMEpm13M0de43w=",
+          "dev": true,
+          "requires": {
+            "async": "2.6.3",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          },
+          "dependencies": {
+            "async": {
+              "version": "2.6.3",
+              "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+              "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.20"
+              }
+            }
+          }
+        },
+        "har-validator": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+          "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
+          "dev": true,
+          "requires": {
+            "chalk": "1.1.3",
+            "commander": "2.17.1",
+            "is-my-json-valid": "2.20.5",
+            "pinkie-promise": "2.0.1"
+          }
+        },
+        "node-uuid": {
+          "version": "1.4.8",
+          "resolved": "https://registry.npmjs.org/node-uuid/-/node-uuid-1.4.8.tgz",
+          "integrity": "sha1-sEDrCSOWivq/jTL7HxfxFn/auQc=",
+          "dev": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
+          "dev": true
+        },
+        "qs": {
+          "version": "6.2.3",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.2.3.tgz",
+          "integrity": "sha1-HPyyXBCpsrSDBT/zn138kjOQjP4=",
+          "dev": true
+        },
+        "readable-stream": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.0.6.tgz",
+          "integrity": "sha1-j5A0HmilPMySh4jaz80Rs265t44=",
+          "dev": true,
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.4",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "0.10.31",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "redis": {
+          "version": "2.6.5",
+          "resolved": "https://registry.npmjs.org/redis/-/redis-2.6.5.tgz",
+          "integrity": "sha1-h8Hv9KSJ+Utwhx89CLaYjyOpVoc=",
+          "dev": true,
+          "requires": {
+            "double-ended-queue": "2.1.0-0",
+            "redis-commands": "1.6.0",
+            "redis-parser": "2.6.0"
+          }
+        },
+        "request": {
+          "version": "2.74.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.74.0.tgz",
+          "integrity": "sha1-dpPKdou7DqXIzgjAhKRe+gW4kqs=",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.11.0",
+            "bl": "1.1.2",
+            "caseless": "0.11.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "1.0.1",
+            "har-validator": "2.0.6",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "node-uuid": "1.4.8",
+            "oauth-sign": "0.8.2",
+            "qs": "6.2.3",
+            "stringstream": "0.0.6",
+            "tough-cookie": "2.3.4",
+            "tunnel-agent": "0.4.3"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "tunnel-agent": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+          "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
+          "dev": true
+        },
+        "underscore": {
+          "version": "1.5.2",
+          "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.5.2.tgz",
+          "integrity": "sha1-EzXF5PXm0zu7SwBrqMhqAPVW3gg=",
+          "dev": true
+        }
+      }
+    },
+    "stormpath-config": {
+      "version": "github:stormpath/stormpath-node-config#0cf1158865646f5f3d97856b98afaacaaea8d4b9",
+      "dev": true,
+      "requires": {
+        "async": "2.6.3",
+        "flat": "2.0.2",
+        "js-yaml": "3.14.1",
+        "lodash": "4.17.20",
+        "properties-parser": "0.3.1"
+      }
+    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "requires": {
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7"
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "requires": {
+        "end-of-stream": "1.4.4",
+        "stream-shift": "1.0.1"
+      }
+    },
+    "stream-events": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
+      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
+      "requires": {
+        "stubs": "3.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "requires": {
+        "builtin-status-codes": "3.0.0",
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7",
+        "to-arraybuffer": "1.0.1",
+        "xtend": "4.0.2"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
+    "string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "string-template": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string-template/-/string-template-1.0.0.tgz",
+      "integrity": "sha1-np8iM9wA8hhxjsN5oopWc+zKi5Y="
+    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "requires": {
+        "code-point-at": "1.1.0",
+        "is-fullwidth-code-point": "1.0.0",
+        "strip-ansi": "3.0.1"
+      }
+    },
+    "string.prototype.codepointat": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.codepointat/-/string.prototype.codepointat-0.2.1.tgz",
+      "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==",
+      "dev": true
+    },
+    "string.prototype.trim": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.3.tgz",
+      "integrity": "sha512-16IL9pIBA5asNOSukPfxX2W68BaBvxyiRK16H3RA/lWW9BDosh+w7f+LhomPHpXJ82QEe7w7/rY/S1CV97raLg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3",
+        "es-abstract": "1.18.0-next.1"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz",
+      "integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz",
+      "integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==",
+      "requires": {
+        "call-bind": "1.0.0",
+        "define-properties": "1.1.3"
+      }
+    },
+    "stringstream": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
+      "integrity": "sha512-87GEBAkegbBcweToUrdzf3eLhWNg06FJTebl4BVJz/JgWy8CvEr9dRtX5qWphiynMSQlxxi+QqN0z5T32SLlhA=="
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "requires": {
+        "ansi-regex": "2.1.1"
+      }
+    },
+    "strip-bom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+      "requires": {
+        "is-utf8": "0.2.1"
+      }
+    },
+    "strip-eof": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
+      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
+    },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "requires": {
+        "get-stdin": "4.0.1"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
+    "stubs": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
+      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls="
+    },
+    "style-loader": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.19.1.tgz",
+      "integrity": "sha512-IRE+ijgojrygQi3rsqT0U4dd+UcPCqcVvauZpCnQrGAlEe+FUIyrK93bUDScamesjP08JlQNsFJU+KmPedP5Og==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
+      }
+    },
+    "stylehacks": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
+      "integrity": "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==",
+      "dev": true,
+      "requires": {
+        "browserslist": "4.16.0",
+        "postcss": "7.0.35",
+        "postcss-selector-parser": "3.1.2"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.16.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.0.tgz",
+          "integrity": "sha512-/j6k8R0p3nxOC6kx5JGAxsnhc9ixaWJfYc+TNTzxg6+ARaESAvQGV7h0uNOB4t+pLQJZWzcrMxXOxjgsCj3dqQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30001171",
+            "colorette": "1.2.1",
+            "electron-to-chromium": "1.3.633",
+            "escalade": "3.1.1",
+            "node-releases": "1.1.67"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "dot-prop": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+          "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+          "dev": true,
+          "requires": {
+            "is-obj": "2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "is-obj": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+          "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz",
+          "integrity": "sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==",
+          "dev": true,
+          "requires": {
+            "dot-prop": "5.3.0",
+            "indexes-of": "1.0.1",
+            "uniq": "1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "stylus": {
+      "version": "0.54.8",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz",
+      "integrity": "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==",
+      "requires": {
+        "css-parse": "2.0.0",
+        "debug": "3.1.0",
+        "glob": "7.1.6",
+        "mkdirp": "1.0.4",
+        "safer-buffer": "2.1.2",
+        "sax": "1.2.4",
+        "semver": "6.3.0",
+        "source-map": "0.7.3"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        }
+      }
+    },
+    "stylus-loader": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-3.0.2.tgz",
+      "integrity": "sha512-+VomPdZ6a0razP+zinir61yZgpw2NfljeSsdUF5kJuEzlo3khXhY19Fn6l8QQz1GRJGtMCo8nG5C04ePyV7SUA==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "lodash.clonedeep": "4.5.0",
+        "when": "3.6.4"
+      }
+    },
+    "supports-color": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+      "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+      "requires": {
+        "has-flag": "2.0.0"
+      }
+    },
+    "svg-gauge": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/svg-gauge/-/svg-gauge-1.0.6.tgz",
+      "integrity": "sha512-gRkznVhtS18eOM/GMPDXAvrLZOpqzNVDg4bFAPAEjiDKd1tZHFIe8Bwt3G6TFg/H+pFboetPPI+zoV+bOL26QQ=="
+    },
+    "svgo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
+      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
+      "dev": true,
+      "requires": {
+        "chalk": "2.4.2",
+        "coa": "2.0.2",
+        "css-select": "2.1.0",
+        "css-select-base-adapter": "0.1.1",
+        "css-tree": "1.0.0-alpha.37",
+        "csso": "4.2.0",
+        "js-yaml": "3.14.1",
+        "mkdirp": "0.5.5",
+        "object.values": "1.1.2",
+        "sax": "1.2.4",
+        "stable": "0.1.8",
+        "unquote": "1.1.1",
+        "util.promisify": "1.0.1"
+      },
+      "dependencies": {
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          }
+        },
+        "css-select": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+          "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+          "dev": true,
+          "requires": {
+            "boolbase": "1.0.0",
+            "css-what": "3.4.2",
+            "domutils": "1.7.0",
+            "nth-check": "1.0.2"
+          }
+        },
+        "css-what": {
+          "version": "3.4.2",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+          "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+          "dev": true
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0.2.2",
+            "domelementtype": "1.3.1"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
+    "swagger-ui-express": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/swagger-ui-express/-/swagger-ui-express-3.0.10.tgz",
+      "integrity": "sha1-xysyEHpXpHkT87RgA+j9Yqc3jqI="
+    },
+    "swagger2openapi": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/swagger2openapi/-/swagger2openapi-7.0.4.tgz",
+      "integrity": "sha512-MGzJU44XSXHKxvtx/NbBnP3z5s1KzN5xhqIBERoZEKfRiZ56lNUo5TGOv0dJ8n7JGeheCeU0CydfvbSOh+DaXg==",
+      "requires": {
+        "call-me-maybe": "1.0.1",
+        "node-fetch": "2.6.1",
+        "node-fetch-h2": "2.3.0",
+        "node-readfiles": "0.2.0",
+        "oas-kit-common": "1.0.8",
+        "oas-resolver": "2.5.3",
+        "oas-schema-walker": "1.1.5",
+        "oas-validator": "5.0.4",
+        "reftools": "1.1.7",
+        "yaml": "1.10.0",
+        "yargs": "16.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "7.0.4",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+          "requires": {
+            "string-width": "4.2.0",
+            "strip-ansi": "6.0.0",
+            "wrap-ansi": "7.0.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "requires": {
+            "emoji-regex": "8.0.0",
+            "is-fullwidth-code-point": "3.0.0",
+            "strip-ansi": "6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "5.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+          "requires": {
+            "ansi-styles": "4.3.0",
+            "string-width": "4.2.0",
+            "strip-ansi": "6.0.0"
+          }
+        },
+        "y18n": {
+          "version": "5.0.5",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.5.tgz",
+          "integrity": "sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg=="
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "requires": {
+            "cliui": "7.0.4",
+            "escalade": "3.1.1",
+            "get-caller-file": "2.0.5",
+            "require-directory": "2.1.1",
+            "string-width": "4.2.0",
+            "y18n": "5.0.5",
+            "yargs-parser": "20.2.4"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.4",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz",
+          "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA=="
+        }
+      }
+    },
+    "symbol-observable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
+      "integrity": "sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ="
+    },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
+    "tapable": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-0.2.9.tgz",
+      "integrity": "sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A=="
+    },
+    "tar": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
+      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "requires": {
+        "block-stream": "0.0.9",
+        "fstream": "1.0.12",
+        "inherits": "2.0.4"
+      }
+    },
+    "tar-fs": {
+      "version": "1.16.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-1.16.3.tgz",
+      "integrity": "sha512-NvCeXpYx7OsmOh8zIOP/ebG55zZmxLE0etfWRbWok+q2Qo8x/vOR/IJT1taADXPe+jsiu9axDb3X4B+iIgNlKw==",
+      "optional": true,
+      "requires": {
+        "chownr": "1.1.4",
+        "mkdirp": "0.5.5",
+        "pump": "1.0.3",
+        "tar-stream": "1.6.2"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-1.0.3.tgz",
+          "integrity": "sha512-8k0JupWme55+9tCVE+FS5ULT3K6AbgqrGa58lTT49RpyfwwcGedHqaC5LlQNdEAumn/wFsu6aPwkuPMioy8kqw==",
+          "optional": true,
+          "requires": {
+            "end-of-stream": "1.4.4",
+            "once": "1.4.0"
+          }
+        }
+      }
+    },
+    "tar-pack": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.1.tgz",
+      "integrity": "sha512-PPRybI9+jM5tjtCbN2cxmmRU7YmqT3Zv/UDy48tAh2XRkLa9bAORtSWLkVc13+GJF+cdTh1yEnHEk3cpTaL5Kg==",
+      "optional": true,
+      "requires": {
+        "debug": "2.6.9",
+        "fstream": "1.0.12",
+        "fstream-ignore": "1.0.5",
+        "once": "1.4.0",
+        "readable-stream": "2.3.7",
+        "rimraf": "2.7.1",
+        "tar": "2.2.2",
+        "uid-number": "0.0.6"
+      }
+    },
+    "tar-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
+      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
+      "optional": true,
+      "requires": {
+        "bl": "1.2.3",
+        "buffer-alloc": "1.2.0",
+        "end-of-stream": "1.4.4",
+        "fs-constants": "1.0.0",
+        "readable-stream": "2.3.7",
+        "to-buffer": "1.1.1",
+        "xtend": "4.0.2"
+      }
+    },
+    "teeny-request": {
+      "version": "3.11.3",
+      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-3.11.3.tgz",
+      "integrity": "sha512-CKncqSF7sH6p4rzCgkb/z/Pcos5efl0DmolzvlqRQUNcpRIruOhY9+T1FsIlyEbfWd7MsFpodROOwHYh2BaXzw==",
+      "requires": {
+        "https-proxy-agent": "2.2.4",
+        "node-fetch": "2.6.1",
+        "uuid": "3.4.0"
+      }
+    },
+    "term-size": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
+      "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=",
+      "requires": {
+        "execa": "0.7.0"
+      }
+    },
+    "terser": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-3.17.0.tgz",
+      "integrity": "sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==",
+      "dev": true,
+      "requires": {
+        "commander": "2.20.3",
+        "source-map": "0.6.1",
+        "source-map-support": "0.5.19"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "source-map-support": {
+          "version": "0.5.19",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+          "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+          "dev": true,
+          "requires": {
+            "buffer-from": "1.1.1",
+            "source-map": "0.6.1"
+          }
+        }
+      }
+    },
+    "text-hex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz",
+      "integrity": "sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg=="
+    },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "requires": {
+        "any-promise": "1.3.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+      "requires": {
+        "thenify": "3.3.1"
+      }
+    },
+    "thirty-two": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/thirty-two/-/thirty-two-1.0.2.tgz",
+      "integrity": "sha1-TKL//AKlEpDSdEueP1V2k8prYno="
+    },
+    "throat": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-3.2.0.tgz",
+      "integrity": "sha512-/EY8VpvlqJ+sFtLPeOgc8Pl7kQVOWv0woD87KTXVHPIAE842FGT+rokxIhe8xIUP1cfgrkt0as0vDLjDiMtr8w=="
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "requires": {
+        "readable-stream": "2.3.7",
+        "xtend": "4.0.2"
+      }
+    },
+    "through2-filter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/through2-filter/-/through2-filter-3.0.0.tgz",
+      "integrity": "sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==",
+      "requires": {
+        "through2": "2.0.5",
+        "xtend": "4.0.2"
+      }
+    },
+    "thunky": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
+      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
+    },
+    "ticky": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
+      "integrity": "sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0="
+    },
+    "time-stamp": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/time-stamp/-/time-stamp-2.2.0.tgz",
+      "integrity": "sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA=="
+    },
+    "timed-out": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
+      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8="
+    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "requires": {
+        "setimmediate": "1.0.5"
+      }
+    },
+    "timsort": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
+      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
+      "dev": true
+    },
+    "tiny-inflate": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==",
+      "dev": true
+    },
+    "tk102": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/tk102/-/tk102-1.3.1.tgz",
+      "integrity": "sha1-FTAkkzPHv3Yl8RfWXq8dJEYL5HQ="
+    },
+    "tmp": {
+      "version": "0.0.31",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
+      "integrity": "sha1-jzirlDjhcxXl29izZX6L+yd65Kc=",
+      "dev": true,
+      "requires": {
+        "os-tmpdir": "1.0.2"
+      }
+    },
+    "to-absolute-glob": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
+      "integrity": "sha1-GGX0PZ50sIItufFFt4z/fQ98hJs=",
+      "requires": {
+        "is-absolute": "1.0.0",
+        "is-negated-glob": "1.0.0"
+      },
+      "dependencies": {
+        "is-absolute": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+          "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+          "requires": {
+            "is-relative": "1.0.0",
+            "is-windows": "1.0.2"
+          }
+        },
+        "is-relative": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+          "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+          "requires": {
+            "is-unc-path": "1.0.0"
+          }
+        },
+        "is-unc-path": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+          "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+          "requires": {
+            "unc-path-regex": "0.1.2"
+          }
+        }
+      }
+    },
+    "to-array": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
+      "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA="
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+    },
+    "to-buffer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
+      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
+      "optional": true
+    },
+    "to-fast-properties": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz",
+      "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc="
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "requires": {
+        "kind-of": "3.2.2"
+      }
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "requires": {
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
+        "regex-not": "1.0.2",
+        "safe-regex": "1.1.0"
+      }
+    },
+    "to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "requires": {
+        "is-number": "3.0.0",
+        "repeat-string": "1.6.1"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          }
+        }
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "token-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/token-stream/-/token-stream-1.0.0.tgz",
+      "integrity": "sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ="
+    },
+    "toposort": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.7.tgz",
+      "integrity": "sha1-LmhELZ9k7HILjMieZEOsbKqVACk="
+    },
+    "touch": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+      "requires": {
+        "nopt": "1.0.10"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+          "requires": {
+            "abbrev": "1.1.1"
+          }
+        }
+      }
+    },
+    "tough-cookie": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+      "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
+      "requires": {
+        "punycode": "1.4.1"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+        }
+      }
+    },
+    "tr46": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
+      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
+      "dev": true,
+      "requires": {
+        "punycode": "2.1.1"
+      }
+    },
+    "transformers": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/transformers/-/transformers-2.1.0.tgz",
+      "integrity": "sha1-XSPLNVYd2F3Gf7hIIwm0fVPM6ac=",
+      "dev": true,
+      "requires": {
+        "css": "1.0.8",
+        "promise": "2.0.0",
+        "uglify-js": "2.2.5"
+      },
+      "dependencies": {
+        "css": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/css/-/css-1.0.8.tgz",
+          "integrity": "sha1-k4aBHKgrzMnuf7WnMrHioxfIo+c=",
+          "dev": true,
+          "requires": {
+            "css-parse": "1.0.4",
+            "css-stringify": "1.0.5"
+          }
+        },
+        "css-parse": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-1.0.4.tgz",
+          "integrity": "sha1-OLBQP7+dqfVOnB29pg4UXHcRe90=",
+          "dev": true
+        },
+        "is-promise": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-1.0.1.tgz",
+          "integrity": "sha1-MVc3YcBX4zwukaq56W2gjO++duU=",
+          "dev": true
+        },
+        "optimist": {
+          "version": "0.3.7",
+          "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.3.7.tgz",
+          "integrity": "sha1-yQlBrVnkJzMokjB00s8ufLxuwNk=",
+          "dev": true,
+          "requires": {
+            "wordwrap": "0.0.2"
+          }
+        },
+        "promise": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/promise/-/promise-2.0.0.tgz",
+          "integrity": "sha1-RmSKqdYFr10ucMMCS/WUNtoCuA4=",
+          "dev": true,
+          "requires": {
+            "is-promise": "1.0.1"
+          }
+        },
+        "source-map": {
+          "version": "0.1.43",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.43.tgz",
+          "integrity": "sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=",
+          "dev": true,
+          "requires": {
+            "amdefine": "1.0.1"
+          }
+        },
+        "uglify-js": {
+          "version": "2.2.5",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.2.5.tgz",
+          "integrity": "sha1-puAqcNg5eSuXgEiLe4sYTAlcmcc=",
+          "dev": true,
+          "requires": {
+            "optimist": "0.3.7",
+            "source-map": "0.1.43"
+          }
+        }
+      }
+    },
+    "traverse": {
+      "version": "0.6.6",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
+      "integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc="
+    },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="
+    },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+    },
+    "trim-right": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
+      "integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
+    },
+    "triple-beam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz",
+      "integrity": "sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw=="
+    },
+    "true-case-path": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
+      "optional": true,
+      "requires": {
+        "glob": "7.1.6"
+      }
+    },
+    "ts-node": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-3.2.2.tgz",
+      "integrity": "sha1-u9KOOK9Kqj6WB2xGbhsiAZfBo84=",
+      "dev": true,
+      "requires": {
+        "arrify": "1.0.1",
+        "chalk": "2.2.2",
+        "diff": "3.5.0",
+        "make-error": "1.3.6",
+        "minimist": "1.2.5",
+        "mkdirp": "0.5.5",
+        "source-map-support": "0.4.18",
+        "tsconfig": "6.0.0",
+        "v8flags": "3.2.0",
+        "yn": "2.0.0"
+      }
+    },
+    "tsconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-6.0.0.tgz",
+      "integrity": "sha1-aw6DdgA9evGGT434+J3QBZ/80DI=",
+      "dev": true,
+      "requires": {
+        "strip-bom": "3.0.0",
+        "strip-json-comments": "2.0.1"
+      },
+      "dependencies": {
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
+          "dev": true
+        }
+      }
+    },
+    "tsickle": {
+      "version": "0.21.6",
+      "resolved": "https://registry.npmjs.org/tsickle/-/tsickle-0.21.6.tgz",
+      "integrity": "sha1-U7Abl5xcE/2xOvs/uVgXflmRWI0=",
+      "dev": true,
+      "requires": {
+        "minimist": "1.2.5",
+        "mkdirp": "0.5.5",
+        "source-map": "0.5.7",
+        "source-map-support": "0.4.18"
+      }
+    },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "tslint": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.3.2.tgz",
+      "integrity": "sha1-5WRZ+wlacwfxA7hAUhdPXju+9u0=",
+      "dev": true,
+      "requires": {
+        "babel-code-frame": "6.26.0",
+        "colors": "1.4.0",
+        "diff": "3.5.0",
+        "glob": "7.1.6",
+        "optimist": "0.6.1",
+        "resolve": "1.19.0",
+        "semver": "5.7.1",
+        "tslib": "1.14.1",
+        "tsutils": "2.29.0"
+      }
+    },
+    "tsscmp": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/tsscmp/-/tsscmp-1.0.6.tgz",
+      "integrity": "sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA=="
+    },
+    "tsutils": {
+      "version": "2.29.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "dev": true,
+      "requires": {
+        "tslib": "1.14.1"
+      }
+    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
+    },
+    "twitter-ng": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/twitter-ng/-/twitter-ng-0.6.2.tgz",
+      "integrity": "sha1-E3BxFd0Eyb0fLGRtqXZYm+TWS8Q=",
+      "requires": {
+        "oauth": "0.9.14"
+      }
+    },
+    "type": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
+      "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg=="
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "1.1.2"
+      }
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "2.1.27"
+      }
+    },
+    "type-of-is": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/type-of-is/-/type-of-is-3.5.1.tgz",
+      "integrity": "sha1-7sL8ibgo2/mQDrZBbu4w9P4PzTE="
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "typescript": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.3.0.tgz",
+      "integrity": "sha1-LmPgkoQ5K8gViiREwz4gk3lcBBg=",
+      "dev": true
+    },
+    "typings": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/typings/-/typings-2.1.1.tgz",
+      "integrity": "sha1-usxp0lWXCkeOCfdsf2iZddU1p4o=",
+      "requires": {
+        "archy": "1.0.0",
+        "bluebird": "3.7.2",
+        "chalk": "1.1.3",
+        "cli-truncate": "1.1.0",
+        "columnify": "1.5.4",
+        "elegant-spinner": "1.0.1",
+        "has-unicode": "2.0.1",
+        "listify": "1.0.3",
+        "log-update": "1.0.2",
+        "minimist": "1.2.5",
+        "promise-finally": "3.0.1",
+        "typings-core": "2.3.3",
+        "update-notifier": "2.5.0",
+        "wordwrap": "1.0.0",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
+        }
+      }
+    },
+    "typings-core": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/typings-core/-/typings-core-2.3.3.tgz",
+      "integrity": "sha1-CexUzVsR3V8e8vwKsx03ACyita0=",
+      "requires": {
+        "array-uniq": "1.0.3",
+        "configstore": "3.1.5",
+        "debug": "2.6.9",
+        "detect-indent": "5.0.0",
+        "graceful-fs": "4.2.4",
+        "has": "1.0.3",
+        "invariant": "2.2.4",
+        "is-absolute": "0.2.6",
+        "jspm-config": "0.3.4",
+        "listify": "1.0.3",
+        "lockfile": "1.0.4",
+        "make-error-cause": "1.2.2",
+        "mkdirp": "0.5.5",
+        "object.pick": "1.3.0",
+        "parse-json": "2.2.0",
+        "popsicle": "9.2.0",
+        "popsicle-proxy-agent": "3.0.0",
+        "popsicle-retry": "3.2.1",
+        "popsicle-rewrite": "1.0.0",
+        "popsicle-status": "2.0.1",
+        "promise-finally": "3.0.1",
+        "rc": "1.2.8",
+        "rimraf": "2.7.1",
+        "sort-keys": "1.1.2",
+        "string-template": "1.0.0",
+        "strip-bom": "3.0.0",
+        "thenify": "3.3.1",
+        "throat": "3.2.0",
+        "touch": "1.0.0",
+        "typescript": "2.9.2",
+        "xtend": "4.0.2",
+        "zip-object": "0.1.0"
+      },
+      "dependencies": {
+        "configstore": {
+          "version": "3.1.5",
+          "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.5.tgz",
+          "integrity": "sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==",
+          "requires": {
+            "dot-prop": "4.2.1",
+            "graceful-fs": "4.2.4",
+            "make-dir": "1.3.0",
+            "unique-string": "1.0.0",
+            "write-file-atomic": "2.4.3",
+            "xdg-basedir": "3.0.0"
+          }
+        },
+        "detect-indent": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz",
+          "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50="
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+        },
+        "typescript": {
+          "version": "2.9.2",
+          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
+          "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w=="
+        }
+      }
+    },
+    "uglify-js": {
+      "version": "3.4.10",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
+      "integrity": "sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==",
+      "requires": {
+        "commander": "2.19.0",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.19.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.19.0.tgz",
+          "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+      "optional": true
+    },
+    "uglifyjs-webpack-plugin": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz",
+      "integrity": "sha512-ovHIch0AMlxjD/97j9AYovZxG5wnHOPkL7T1GKochBADp/Zwc44pEWNqpKl1Loupp1WhFg7SlYmHZRUfdAacgw==",
+      "requires": {
+        "cacache": "10.0.4",
+        "find-cache-dir": "1.0.0",
+        "schema-utils": "0.4.7",
+        "serialize-javascript": "1.9.1",
+        "source-map": "0.6.1",
+        "uglify-es": "3.3.9",
+        "webpack-sources": "1.4.3",
+        "worker-farm": "1.7.0"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "2.13.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
+          "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "uglify-es": {
+          "version": "3.3.9",
+          "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
+          "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
+          "requires": {
+            "commander": "2.13.0",
+            "source-map": "0.6.1"
+          }
+        }
+      }
+    },
+    "uid-number": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
+      "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
+      "optional": true
+    },
+    "uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "requires": {
+        "random-bytes": "1.0.0"
+      }
+    },
+    "uid2": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",
+      "integrity": "sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I="
+    },
+    "ultron": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
+      "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
+    },
+    "unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo="
+    },
+    "uncss": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/uncss/-/uncss-0.17.3.tgz",
+      "integrity": "sha512-ksdDWl81YWvF/X14fOSw4iu8tESDHFIeyKIeDrK6GEVTQvqJc1WlOEXqostNwOCi3qAj++4EaLsdAgPmUbEyog==",
+      "dev": true,
+      "requires": {
+        "commander": "2.20.3",
+        "glob": "7.1.6",
+        "is-absolute-url": "3.0.3",
+        "is-html": "1.1.0",
+        "jsdom": "14.1.0",
+        "lodash": "4.17.20",
+        "postcss": "7.0.35",
+        "postcss-selector-parser": "6.0.2",
+        "request": "2.88.2"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        },
+        "aws-sign2": {
+          "version": "0.7.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
+          "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.5.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "3.0.0"
+              }
+            }
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "form-data": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
+          "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
+          "dev": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.8",
+            "mime-types": "2.1.27"
+          }
+        },
+        "har-schema": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+          "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
+          "dev": true
+        },
+        "har-validator": {
+          "version": "5.1.5",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+          "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+          "dev": true,
+          "requires": {
+            "ajv": "6.12.6",
+            "har-schema": "2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
+          "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
+          "dev": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "jsprim": "1.4.1",
+            "sshpk": "1.16.1"
+          }
+        },
+        "is-absolute-url": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
+          "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+          "dev": true
+        },
+        "oauth-sign": {
+          "version": "0.9.0",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
+          "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
+          "dev": true
+        },
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.2",
+            "source-map": "0.6.1",
+            "supports-color": "6.1.0"
+          }
+        },
+        "postcss-selector-parser": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+          "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+          "dev": true,
+          "requires": {
+            "cssesc": "3.0.0",
+            "indexes-of": "1.0.1",
+            "uniq": "1.0.1"
+          }
+        },
+        "qs": {
+          "version": "6.5.2",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
+          "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+          "dev": true
+        },
+        "request": {
+          "version": "2.88.2",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
+          "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+          "dev": true,
+          "requires": {
+            "aws-sign2": "0.7.0",
+            "aws4": "1.11.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.8",
+            "extend": "3.0.2",
+            "forever-agent": "0.6.1",
+            "form-data": "2.3.3",
+            "har-validator": "5.1.5",
+            "http-signature": "1.2.0",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.27",
+            "oauth-sign": "0.9.0",
+            "performance-now": "2.1.0",
+            "qs": "6.5.2",
+            "safe-buffer": "5.1.2",
+            "tough-cookie": "2.5.0",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.4.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+          "dev": true,
+          "requires": {
+            "psl": "1.8.0",
+            "punycode": "2.1.1"
+          }
+        }
+      }
+    },
+    "underscore": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
+      "integrity": "sha1-YaajIBBiKvoHljvzJSA88SI51gQ="
+    },
+    "underscore.string": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.2.3.tgz",
+      "integrity": "sha1-gGmSYzZl1eX8tNsfs6hi62jp5to=",
+      "dev": true
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+      "dev": true
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "dev": true,
+      "requires": {
+        "unicode-canonical-property-names-ecmascript": "1.0.4",
+        "unicode-property-aliases-ecmascript": "1.1.0"
+      }
+    },
+    "unicode-match-property-value-ecmascript": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+      "dev": true
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+      "dev": true
+    },
+    "unicode-trie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/unicode-trie/-/unicode-trie-0.3.1.tgz",
+      "integrity": "sha1-1nHd3YkQGgi6w3tqUWEBBgIFIIU=",
+      "dev": true,
+      "requires": {
+        "pako": "0.2.9",
+        "tiny-inflate": "1.0.3"
+      },
+      "dependencies": {
+        "pako": {
+          "version": "0.2.9",
+          "resolved": "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz",
+          "integrity": "sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=",
+          "dev": true
+        }
+      }
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "requires": {
+        "arr-union": "3.1.0",
+        "get-value": "2.0.6",
+        "is-extendable": "0.1.1",
+        "set-value": "2.0.1"
+      }
+    },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
+    "uniqs": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
+      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
+      "dev": true
+    },
+    "unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "requires": {
+        "unique-slug": "2.0.2"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "requires": {
+        "imurmurhash": "0.1.4"
+      }
+    },
+    "unique-stream": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/unique-stream/-/unique-stream-2.3.1.tgz",
+      "integrity": "sha512-2nY4TnBE70yoxHkDli7DMazpWiP7xMdCYqU2nBRO0UB+ZpEkGsSija7MvmvnZFUeC+mrgiUfcHSr3LmRFIg4+A==",
+      "requires": {
+        "json-stable-stringify-without-jsonify": "1.0.1",
+        "through2-filter": "3.0.0"
+      }
+    },
+    "unique-string": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
+      "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=",
+      "requires": {
+        "crypto-random-string": "1.0.0"
+      }
+    },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "unquote": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
+      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
+      "dev": true
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "requires": {
+        "has-value": "0.3.1",
+        "isobject": "3.0.1"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "requires": {
+            "get-value": "2.0.6",
+            "has-values": "0.1.4",
+            "isobject": "2.1.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        }
+      }
+    },
+    "unzip-response": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz",
+      "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c="
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
+    },
+    "update-notifier": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.5.0.tgz",
+      "integrity": "sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==",
+      "requires": {
+        "boxen": "1.3.0",
+        "chalk": "2.2.2",
+        "configstore": "3.1.5",
+        "import-lazy": "2.1.0",
+        "is-ci": "1.2.1",
+        "is-installed-globally": "0.1.0",
+        "is-npm": "1.0.0",
+        "latest-version": "3.1.0",
+        "semver-diff": "2.1.0",
+        "xdg-basedir": "3.0.0"
+      },
+      "dependencies": {
+        "configstore": {
+          "version": "3.1.5",
+          "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.5.tgz",
+          "integrity": "sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==",
+          "requires": {
+            "dot-prop": "4.2.1",
+            "graceful-fs": "4.2.4",
+            "make-dir": "1.3.0",
+            "unique-string": "1.0.0",
+            "write-file-atomic": "2.4.3",
+            "xdg-basedir": "3.0.0"
+          }
+        }
+      }
+    },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+    },
+    "uri-js": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.0.tgz",
+      "integrity": "sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==",
+      "requires": {
+        "punycode": "2.1.1"
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+    },
+    "url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        }
+      }
+    },
+    "url-loader": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-0.6.2.tgz",
+      "integrity": "sha512-h3qf9TNn53BpuXTTcpC+UehiRrl0Cv45Yr/xWayApjw6G8Bg2dGke7rIwDQ39piciWCWrC+WiqLjOh3SUp9n0Q==",
+      "requires": {
+        "loader-utils": "1.1.0",
+        "mime": "1.6.0",
+        "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "5.5.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+          "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
+          "requires": {
+            "co": "4.6.0",
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.1.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        },
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
+      }
+    },
+    "url-parse": {
+      "version": "1.4.7",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz",
+      "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==",
+      "requires": {
+        "querystringify": "2.2.0",
+        "requires-port": "1.0.0"
+      }
+    },
+    "url-parse-lax": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
+      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
+      "requires": {
+        "prepend-http": "1.0.4"
+      }
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
+    },
+    "useragent": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/useragent/-/useragent-2.3.0.tgz",
+      "integrity": "sha512-4AoH4pxuSvHCjqLO04sU6U/uE65BYza8l/KKBS0b0hnUPWi+cQ2BpeTEwejCSx9SPV5/U03nniDTrWx5NrmKdw==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "4.1.5",
+        "tmp": "0.0.31"
+      }
+    },
+    "utf7": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utf7/-/utf7-1.0.2.tgz",
+      "integrity": "sha1-lV9JCq5lO6IguUVqCod2wZk2CZE=",
+      "requires": {
+        "semver": "5.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        }
+      }
+    },
+    "util": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "util.promisify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
+      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "1.1.3",
+        "es-abstract": "1.17.7",
+        "has-symbols": "1.0.1",
+        "object.getownpropertydescriptors": "2.1.1"
+      },
+      "dependencies": {
+        "es-abstract": {
+          "version": "1.17.7",
+          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
+          "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==",
+          "dev": true,
+          "requires": {
+            "es-to-primitive": "1.2.1",
+            "function-bind": "1.1.1",
+            "has": "1.0.3",
+            "has-symbols": "1.0.1",
+            "is-callable": "1.2.2",
+            "is-regex": "1.1.1",
+            "object-inspect": "1.9.0",
+            "object-keys": "1.1.1",
+            "object.assign": "4.1.2",
+            "string.prototype.trimend": "1.0.3",
+            "string.prototype.trimstart": "1.0.3"
+          }
+        }
+      }
+    },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "uue": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/uue/-/uue-3.1.2.tgz",
+      "integrity": "sha512-axKLXVqwtdI/czrjG0X8hyV1KLgeWx8F4KvSbvVCnS+RUvsQMGRjx0kfuZDXXqj0LYvVJmx3B9kWlKtEdRrJLg==",
+      "requires": {
+        "escape-string-regexp": "1.0.5",
+        "extend": "3.0.2"
+      }
+    },
+    "uuid": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
+    },
+    "uws": {
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/uws/-/uws-9.14.0.tgz",
+      "integrity": "sha512-HNMztPP5A1sKuVFmdZ6BPVpBQd5bUjNC8EFMFiICK+oho/OQsAJy5hnIx4btMHiOk8j04f/DbIlqnEZ9d72dqg==",
+      "optional": true
+    },
+    "v8-compile-cache": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz",
+      "integrity": "sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==",
+      "dev": true
+    },
+    "v8flags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz",
+      "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "1.0.3"
+      }
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "requires": {
+        "spdx-correct": "3.1.1",
+        "spdx-expression-parse": "3.0.1"
+      }
+    },
+    "vanilla-picker": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.8.0.tgz",
+      "integrity": "sha512-NPBxrtLi2LA2mEyRLW+Lyt7Eqtm0t0SmKqscE5RaugXLtJXXjPzy6r65fqLiQkhRc2WoLnmj2m/EnTWKN4hL+g==",
+      "requires": {
+        "@sphinxxxx/color-conversion": "2.2.2",
+        "drag-tracker": "1.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "vendors": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
+      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
+      "dev": true
+    },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "1.3.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
+    "vhost": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/vhost/-/vhost-3.0.2.tgz",
+      "integrity": "sha1-L7HezUxGaqiLD5NBrzPcGv8keNU="
+    },
+    "vlq": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/vlq/-/vlq-0.2.3.tgz",
+      "integrity": "sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow=="
+    },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
+    },
+    "void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha1-YU9/v42AHwu18GYfWy9XhXUOTwk="
+    },
+    "w3c-hr-time": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
+      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "dev": true,
+      "requires": {
+        "browser-process-hrtime": "1.0.0"
+      }
+    },
+    "w3c-xmlserializer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz",
+      "integrity": "sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==",
+      "dev": true,
+      "requires": {
+        "domexception": "1.0.1",
+        "webidl-conversions": "4.0.2",
+        "xml-name-validator": "3.0.0"
+      }
+    },
+    "waitress": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/waitress/-/waitress-0.1.5.tgz",
+      "integrity": "sha1-7ZsqI3zM2DzXNUcvRPbEe35lOvY="
+    },
+    "walk": {
+      "version": "2.3.14",
+      "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.14.tgz",
+      "integrity": "sha512-5skcWAUmySj6hkBdH6B6+3ddMjVQYH5Qy9QGbPmN8kVmLteXk+yVXg+yfk1nbX30EYakahLrr8iPcCxJQSCBeg==",
+      "requires": {
+        "foreachasync": "3.0.0"
+      }
+    },
+    "walkdir": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/walkdir/-/walkdir-0.3.2.tgz",
+      "integrity": "sha512-0Twghia4Z5wDGDYWURlhZmI47GvERMCsXIu0QZWVVZyW9ZjpbbZvD9Zy9M6cWiQQRRbAcYajIyKNavaZZDt1Uw=="
+    },
+    "watchpack": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "requires": {
+        "chokidar": "3.4.3",
+        "graceful-fs": "4.2.4",
+        "neo-async": "2.6.2",
+        "watchpack-chokidar2": "2.0.1"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+          "optional": true,
+          "requires": {
+            "normalize-path": "3.0.0",
+            "picomatch": "2.2.2"
+          }
+        },
+        "binary-extensions": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
+          "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+          "optional": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "optional": true,
+          "requires": {
+            "fill-range": "7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.4.3",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
+          "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
+          "optional": true,
+          "requires": {
+            "anymatch": "3.1.1",
+            "braces": "3.0.2",
+            "glob-parent": "5.1.1",
+            "is-binary-path": "2.1.0",
+            "is-glob": "4.0.1",
+            "normalize-path": "3.0.0",
+            "readdirp": "3.5.0"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "optional": true,
+          "requires": {
+            "to-regex-range": "5.0.1"
+          }
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "optional": true,
+          "requires": {
+            "is-glob": "4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "optional": true,
+          "requires": {
+            "binary-extensions": "2.1.0"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "optional": true
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        },
+        "readdirp": {
+          "version": "3.5.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+          "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+          "optional": true,
+          "requires": {
+            "picomatch": "2.2.2"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "optional": true,
+          "requires": {
+            "is-number": "7.0.0"
+          }
+        }
+      }
+    },
+    "watchpack-chokidar2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "optional": true,
+      "requires": {
+        "chokidar": "2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "optional": true,
+          "requires": {
+            "micromatch": "3.1.10",
+            "normalize-path": "2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "optional": true,
+              "requires": {
+                "remove-trailing-separator": "1.1.0"
+              }
+            }
+          }
+        },
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+          "optional": true
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "optional": true,
+          "requires": {
+            "anymatch": "2.0.0",
+            "async-each": "1.0.3",
+            "braces": "2.3.2",
+            "glob-parent": "3.1.0",
+            "inherits": "2.0.4",
+            "is-binary-path": "1.0.1",
+            "is-glob": "4.0.1",
+            "normalize-path": "3.0.0",
+            "path-is-absolute": "1.0.1",
+            "readdirp": "2.2.1",
+            "upath": "1.2.0"
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "optional": true,
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "optional": true,
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "optional": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "optional": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "optional": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "optional": true,
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "optional": true,
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "optional": true,
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+              "optional": true
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "optional": true,
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "optional": true,
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "optional": true,
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "optional": true,
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "optional": true,
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "optional": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "optional": true,
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "optional": true,
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "optional": true,
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "optional": true,
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+          "optional": true
+        }
+      }
+    },
+    "wbuf": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
+      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
+      "requires": {
+        "minimalistic-assert": "1.0.1"
+      }
+    },
+    "wcwidth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
+      "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=",
+      "requires": {
+        "defaults": "1.0.3"
+      }
+    },
+    "webdriver-js-extender": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz",
+      "integrity": "sha1-gcUzqeM9W/tZe05j4s2yW1R3dRU=",
+      "dev": true,
+      "requires": {
+        "@types/selenium-webdriver": "2.53.45",
+        "selenium-webdriver": "2.53.3"
+      },
+      "dependencies": {
+        "adm-zip": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz",
+          "integrity": "sha1-ph7VrmkFw66lizplfSUDMJEFJzY=",
+          "dev": true
+        },
+        "sax": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
+          "integrity": "sha1-VjsZx8HeiS4Jv8Ty/DDjwn8JUrk=",
+          "dev": true
+        },
+        "selenium-webdriver": {
+          "version": "2.53.3",
+          "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.53.3.tgz",
+          "integrity": "sha1-0p/1qVff8aG0ncRXdW5OS/vc4IU=",
+          "dev": true,
+          "requires": {
+            "adm-zip": "0.4.4",
+            "rimraf": "2.7.1",
+            "tmp": "0.0.24",
+            "ws": "1.1.1",
+            "xml2js": "0.4.4"
+          }
+        },
+        "tmp": {
+          "version": "0.0.24",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
+          "integrity": "sha1-1qXhmNFKmDXMby18PZ4wJCjIzxI=",
+          "dev": true
+        },
+        "xml2js": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz",
+          "integrity": "sha1-MREBAAMAiuGSQOuhdJe1fHKcVV0=",
+          "dev": true,
+          "requires": {
+            "sax": "0.6.1",
+            "xmlbuilder": "4.2.1"
+          }
+        }
+      }
+    },
+    "webfont-matcher": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
+      "integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc=",
+      "dev": true
+    },
+    "webidl-conversions": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
+      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
+      "dev": true
+    },
+    "webpack": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
+      "integrity": "sha512-3kOFejWqj5ISpJk4Qj/V7w98h9Vl52wak3CLiw/cDOfbVTq7FeoZ0SdoHHY9PYlHr50ZS42OfvzE2vB4nncKQg==",
+      "requires": {
+        "acorn": "5.7.4",
+        "acorn-dynamic-import": "2.0.2",
+        "ajv": "6.12.6",
+        "ajv-keywords": "3.5.2",
+        "async": "2.6.3",
+        "enhanced-resolve": "3.4.1",
+        "escope": "3.6.0",
+        "interpret": "1.4.0",
+        "json-loader": "0.5.7",
+        "json5": "0.5.1",
+        "loader-runner": "2.4.0",
+        "loader-utils": "1.1.0",
+        "memory-fs": "0.4.1",
+        "mkdirp": "0.5.5",
+        "node-libs-browser": "2.2.1",
+        "source-map": "0.5.7",
+        "supports-color": "4.5.0",
+        "tapable": "0.2.9",
+        "uglifyjs-webpack-plugin": "0.4.6",
+        "watchpack": "1.7.5",
+        "webpack-sources": "1.4.3",
+        "yargs": "8.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "camelcase": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+          "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
+        },
+        "cliui": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+          "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+          "requires": {
+            "center-align": "0.1.3",
+            "right-align": "0.1.3",
+            "wordwrap": "0.0.2"
+          }
+        },
+        "get-caller-file": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+        },
+        "load-json-file": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
+          "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
+          "requires": {
+            "graceful-fs": "4.2.4",
+            "parse-json": "2.2.0",
+            "pify": "2.3.0",
+            "strip-bom": "3.0.0"
+          }
+        },
+        "path-type": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
+          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
+          "requires": {
+            "pify": "2.3.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "read-pkg": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
+          "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
+          "requires": {
+            "load-json-file": "2.0.0",
+            "normalize-package-data": "2.5.0",
+            "path-type": "2.0.0"
+          }
+        },
+        "read-pkg-up": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
+          "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
+          "requires": {
+            "find-up": "2.1.0",
+            "read-pkg": "2.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "4.0.0"
+          },
+          "dependencies": {
+            "is-fullwidth-code-point": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+              "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+            },
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "requires": {
+                "ansi-regex": "3.0.0"
+              }
+            }
+          }
+        },
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
+        },
+        "uglify-js": {
+          "version": "2.8.29",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+          "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+          "requires": {
+            "source-map": "0.5.7",
+            "uglify-to-browserify": "1.0.2",
+            "yargs": "3.10.0"
+          },
+          "dependencies": {
+            "yargs": {
+              "version": "3.10.0",
+              "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+              "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+              "requires": {
+                "camelcase": "1.2.1",
+                "cliui": "2.1.0",
+                "decamelize": "1.2.0",
+                "window-size": "0.1.0"
+              }
+            }
+          }
+        },
+        "uglifyjs-webpack-plugin": {
+          "version": "0.4.6",
+          "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-0.4.6.tgz",
+          "integrity": "sha1-uVH0q7a9YX5m9j64kUmOORdj4wk=",
+          "requires": {
+            "source-map": "0.5.7",
+            "uglify-js": "2.8.29",
+            "webpack-sources": "1.4.3"
+          }
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1"
+          },
+          "dependencies": {
+            "string-width": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+              "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+              "requires": {
+                "code-point-at": "1.1.0",
+                "is-fullwidth-code-point": "1.0.0",
+                "strip-ansi": "3.0.1"
+              }
+            }
+          }
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
+          "integrity": "sha1-YpmpBVsc78lp/355wdkY3Osiw2A=",
+          "requires": {
+            "camelcase": "4.1.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.3",
+            "os-locale": "2.1.0",
+            "read-pkg-up": "2.0.0",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "2.1.1",
+            "which-module": "2.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "7.0.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+              "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+            },
+            "cliui": {
+              "version": "3.2.0",
+              "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+              "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+              "requires": {
+                "string-width": "1.0.2",
+                "strip-ansi": "3.0.1",
+                "wrap-ansi": "2.1.0"
+              },
+              "dependencies": {
+                "string-width": {
+                  "version": "1.0.2",
+                  "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+                  "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+                  "requires": {
+                    "code-point-at": "1.1.0",
+                    "is-fullwidth-code-point": "1.0.0",
+                    "strip-ansi": "3.0.1"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "yargs-parser": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-7.0.0.tgz",
+          "integrity": "sha1-jQrELxbqVd69MyyvTEA4s+P139k=",
+          "requires": {
+            "camelcase": "4.1.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "4.1.0",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
+              "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
+            }
+          }
+        }
+      }
+    },
+    "webpack-dev-middleware": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz",
+      "integrity": "sha512-FCrqPy1yy/sN6U/SaEZcHKRXGlqU0DUaEBL45jkUYoB8foVb6wCnbIJ1HKIx+qUFTW+3JpVcCJCxZ8VATL4e+A==",
+      "requires": {
+        "memory-fs": "0.4.1",
+        "mime": "1.6.0",
+        "path-is-absolute": "1.0.1",
+        "range-parser": "1.2.1",
+        "time-stamp": "2.2.0"
+      }
+    },
+    "webpack-dev-server": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.11.5.tgz",
+      "integrity": "sha512-7TdOKKt7G3sWEhPKV0zP+nD0c4V9YKUJ3wDdBwQsZNo58oZIRoVIu66pg7PYkBW8A74msP9C2kLwmxGHndz/pw==",
+      "requires": {
+        "ansi-html": "0.0.7",
+        "array-includes": "3.1.2",
+        "bonjour": "3.5.0",
+        "chokidar": "2.1.8",
+        "compression": "1.7.4",
+        "connect-history-api-fallback": "1.6.0",
+        "debug": "3.2.7",
+        "del": "3.0.0",
+        "express": "4.17.1",
+        "html-entities": "1.4.0",
+        "http-proxy-middleware": "0.19.2",
+        "import-local": "1.0.0",
+        "internal-ip": "1.2.0",
+        "ip": "1.1.5",
+        "killable": "1.0.1",
+        "loglevel": "1.7.1",
+        "opn": "5.1.0",
+        "portfinder": "1.0.28",
+        "selfsigned": "1.10.8",
+        "serve-index": "1.9.1",
+        "sockjs": "0.3.19",
+        "sockjs-client": "1.1.5",
+        "spdy": "4.0.2",
+        "strip-ansi": "3.0.1",
+        "supports-color": "5.5.0",
+        "webpack-dev-middleware": "1.12.2",
+        "yargs": "6.6.0"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "requires": {
+            "micromatch": "3.1.10",
+            "normalize-path": "2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "requires": {
+                "remove-trailing-separator": "1.1.0"
+              }
+            }
+          }
+        },
+        "arr-diff": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+          "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+        },
+        "array-unique": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+          "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+        },
+        "braces": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+          "requires": {
+            "arr-flatten": "1.1.0",
+            "array-unique": "0.3.2",
+            "extend-shallow": "2.0.1",
+            "fill-range": "4.0.0",
+            "isobject": "3.0.1",
+            "repeat-element": "1.1.3",
+            "snapdragon": "0.8.2",
+            "snapdragon-node": "2.1.1",
+            "split-string": "3.1.0",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "requires": {
+            "anymatch": "2.0.0",
+            "async-each": "1.0.3",
+            "braces": "2.3.2",
+            "glob-parent": "3.1.0",
+            "inherits": "2.0.4",
+            "is-binary-path": "1.0.1",
+            "is-glob": "4.0.1",
+            "normalize-path": "3.0.0",
+            "path-is-absolute": "1.0.1",
+            "readdirp": "2.2.1",
+            "upath": "1.2.0"
+          }
+        },
+        "cliui": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+          "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wrap-ansi": "2.1.0"
+          }
+        },
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "2.1.3"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.1.3",
+              "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+              "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+            }
+          }
+        },
+        "expand-brackets": {
+          "version": "2.1.4",
+          "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+          "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+          "requires": {
+            "debug": "2.6.9",
+            "define-property": "0.2.5",
+            "extend-shallow": "2.0.1",
+            "posix-character-classes": "0.1.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "debug": {
+              "version": "2.6.9",
+              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+              "requires": {
+                "ms": "2.0.0"
+              }
+            },
+            "define-property": {
+              "version": "0.2.5",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+              "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+              "requires": {
+                "is-descriptor": "0.1.6"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            },
+            "is-accessor-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+              "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-data-descriptor": {
+              "version": "0.1.4",
+              "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+              "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+              "requires": {
+                "kind-of": "3.2.2"
+              },
+              "dependencies": {
+                "kind-of": {
+                  "version": "3.2.2",
+                  "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                  "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                  "requires": {
+                    "is-buffer": "1.1.6"
+                  }
+                }
+              }
+            },
+            "is-descriptor": {
+              "version": "0.1.6",
+              "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+              "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+              "requires": {
+                "is-accessor-descriptor": "0.1.6",
+                "is-data-descriptor": "0.1.4",
+                "kind-of": "5.1.0"
+              }
+            },
+            "kind-of": {
+              "version": "5.1.0",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+              "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+            }
+          }
+        },
+        "extglob": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+          "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+          "requires": {
+            "array-unique": "0.3.2",
+            "define-property": "1.0.0",
+            "expand-brackets": "2.1.4",
+            "extend-shallow": "2.0.1",
+            "fragment-cache": "0.2.1",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          },
+          "dependencies": {
+            "define-property": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+              "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+              "requires": {
+                "is-descriptor": "1.0.2"
+              }
+            },
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "fill-range": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+          "requires": {
+            "extend-shallow": "2.0.1",
+            "is-number": "3.0.0",
+            "repeat-string": "1.6.1",
+            "to-regex-range": "2.1.1"
+          },
+          "dependencies": {
+            "extend-shallow": {
+              "version": "2.0.1",
+              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+              "requires": {
+                "is-extendable": "0.1.1"
+              }
+            }
+          }
+        },
+        "get-caller-file": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
+          "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "1.0.0",
+            "is-data-descriptor": "1.0.0",
+            "kind-of": "6.0.3"
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+          "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "isobject": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+          "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+        },
+        "kind-of": {
+          "version": "6.0.3",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+          "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+        },
+        "micromatch": {
+          "version": "3.1.10",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+          "requires": {
+            "arr-diff": "4.0.0",
+            "array-unique": "0.3.2",
+            "braces": "2.3.2",
+            "define-property": "2.0.2",
+            "extend-shallow": "3.0.2",
+            "extglob": "2.0.4",
+            "fragment-cache": "0.2.1",
+            "kind-of": "6.0.3",
+            "nanomatch": "1.2.13",
+            "object.pick": "1.3.0",
+            "regex-not": "1.0.2",
+            "snapdragon": "0.8.2",
+            "to-regex": "3.0.2"
+          }
+        },
+        "normalize-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+          "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+        },
+        "os-locale": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+          "requires": {
+            "lcid": "1.0.0"
+          }
+        },
+        "require-main-filename": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+          "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+        },
+        "supports-color": {
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        },
+        "which-module": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+          "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+        },
+        "wrap-ansi": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+          "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+          "requires": {
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "y18n": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+        },
+        "yargs": {
+          "version": "6.6.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-6.6.0.tgz",
+          "integrity": "sha1-eC7CHvQDNF+DCoCMo9UTr1YGUgg=",
+          "requires": {
+            "camelcase": "3.0.0",
+            "cliui": "3.2.0",
+            "decamelize": "1.2.0",
+            "get-caller-file": "1.0.3",
+            "os-locale": "1.4.0",
+            "read-pkg-up": "1.0.1",
+            "require-directory": "2.1.1",
+            "require-main-filename": "1.0.1",
+            "set-blocking": "2.0.0",
+            "string-width": "1.0.2",
+            "which-module": "1.0.0",
+            "y18n": "3.2.1",
+            "yargs-parser": "4.2.1"
+          }
+        },
+        "yargs-parser": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-4.2.1.tgz",
+          "integrity": "sha1-KczqwNxPA8bIe0qfIX3RjJ90hxw=",
+          "requires": {
+            "camelcase": "3.0.0"
+          }
+        }
+      }
+    },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "requires": {
+        "lodash": "4.17.20"
+      }
+    },
+    "webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "requires": {
+        "source-list-map": "2.0.1",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "webpack-subresource-integrity": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-1.5.2.tgz",
+      "integrity": "sha512-GBWYBoyalbo5YClwWop9qe6Zclp8CIXYGIz12OPclJhIrSplDxs1Ls1JDMH8xBPPrg1T6ISaTW9Y6zOrwEiAzw==",
+      "requires": {
+        "webpack-sources": "1.4.3"
+      }
+    },
+    "websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "requires": {
+        "http-parser-js": "0.5.2",
+        "safe-buffer": "5.1.2",
+        "websocket-extensions": "0.1.4"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg=="
+    },
+    "websocket-stream": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/websocket-stream/-/websocket-stream-5.5.2.tgz",
+      "integrity": "sha512-8z49MKIHbGk3C4HtuHWDtYX8mYej1wWabjthC/RupM9ngeukU4IWoM46dgth1UOS/T4/IqgEdCDJuMe2039OQQ==",
+      "requires": {
+        "duplexify": "3.7.1",
+        "inherits": "2.0.4",
+        "readable-stream": "2.3.7",
+        "safe-buffer": "5.1.2",
+        "ws": "3.3.3",
+        "xtend": "4.0.2"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "3.3.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
+          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
+          "requires": {
+            "async-limiter": "1.0.1",
+            "safe-buffer": "5.1.2",
+            "ultron": "1.1.1"
+          }
+        }
+      }
+    },
+    "wgs84": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/wgs84/-/wgs84-0.0.0.tgz",
+      "integrity": "sha1-NP3FVZF7blfPKigu0ENxDASc3HY="
+    },
+    "whatwg-encoding": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
+      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.4.24"
+      }
+    },
+    "whatwg-mimetype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
+      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
+      "dev": true
+    },
+    "whatwg-url": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
+      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+      "dev": true,
+      "requires": {
+        "lodash.sortby": "4.7.0",
+        "tr46": "1.0.1",
+        "webidl-conversions": "4.0.2"
+      }
+    },
+    "when": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.6.4.tgz",
+      "integrity": "sha1-RztRfsFZ4rhQBUl6E5g/CVQS404="
+    },
+    "which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "requires": {
+        "isexe": "2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
+    "which-pm-runs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-pm-runs/-/which-pm-runs-1.0.0.tgz",
+      "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
+      "optional": true
+    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "requires": {
+        "string-width": "1.0.2"
+      }
+    },
+    "widest-line": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz",
+      "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==",
+      "requires": {
+        "string-width": "2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "requires": {
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "3.0.0"
+          }
+        }
+      }
+    },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0="
+    },
+    "winston": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-3.3.3.tgz",
+      "integrity": "sha512-oEXTISQnC8VlSAKf1KYSSd7J6IWuRPQqDdo8eoRNaYKLvwSb5+79Z3Yi1lrl6KDpU6/VWaxpakDAtb1oQ4n9aw==",
+      "requires": {
+        "@dabh/diagnostics": "2.0.2",
+        "async": "3.2.0",
+        "is-stream": "2.0.0",
+        "logform": "2.2.0",
+        "one-time": "1.0.0",
+        "readable-stream": "3.6.0",
+        "stack-trace": "0.0.10",
+        "triple-beam": "1.3.0",
+        "winston-transport": "4.4.0"
+      },
+      "dependencies": {
+        "async": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-3.2.0.tgz",
+          "integrity": "sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw=="
+        },
+        "is-stream": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "2.0.4",
+            "string_decoder": "1.1.1",
+            "util-deprecate": "1.0.2"
+          }
+        }
+      }
+    },
+    "winston-transport": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/winston-transport/-/winston-transport-4.4.0.tgz",
+      "integrity": "sha512-Lc7/p3GtqtqPBYYtS6KCN3c77/2QCev51DvcJKbkFPQNoj1sinkGwLGFDxkXY9J6p9+EPnYs+D90uwbnaiURTw==",
+      "requires": {
+        "readable-stream": "2.3.7",
+        "triple-beam": "1.3.0"
+      }
+    },
+    "with": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/with/-/with-7.0.2.tgz",
+      "integrity": "sha512-RNGKj82nUPg3g5ygxkQl0R937xLyho1J24ItRCBTr/m1YnZkzJy1hUiHUJrc/VlsDQzsCnInEGSg3bci0Lmd4w==",
+      "requires": {
+        "@babel/parser": "7.12.11",
+        "@babel/types": "7.12.12",
+        "assert-never": "1.2.1",
+        "babel-walk": "3.0.0-canary-5"
+      }
+    },
+    "word-wrap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
+      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "dev": true
+    },
+    "wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "requires": {
+        "errno": "0.1.8"
+      }
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "optional": true,
+      "requires": {
+        "ansi-styles": "3.2.1",
+        "string-width": "3.1.0",
+        "strip-ansi": "5.2.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "optional": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "optional": true,
+          "requires": {
+            "emoji-regex": "7.0.3",
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "5.2.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "4.1.0"
+          }
+        }
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "write-file-atomic": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz",
+      "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==",
+      "requires": {
+        "graceful-fs": "4.2.4",
+        "imurmurhash": "0.1.4",
+        "signal-exit": "3.0.3"
+      }
+    },
+    "ws": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-1.1.1.tgz",
+      "integrity": "sha1-CC3bbGQehdS7RR8D1S8G6r2x8Bg=",
+      "requires": {
+        "options": "0.0.6",
+        "ultron": "1.0.2"
+      },
+      "dependencies": {
+        "ultron": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.0.2.tgz",
+          "integrity": "sha1-rOEWq1V80Zc4ak6I9GhTeMiy5Po="
+        }
+      }
+    },
+    "wtf-8": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wtf-8/-/wtf-8-1.0.0.tgz",
+      "integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=",
+      "dev": true
+    },
+    "x-xss-protection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/x-xss-protection/-/x-xss-protection-1.3.0.tgz",
+      "integrity": "sha512-kpyBI9TlVipZO4diReZMAHWtS0MMa/7Kgx8hwG/EuZLiA6sg4Ah/4TRdASHhRRN3boobzcYgFRUFSgHRge6Qhg=="
+    },
+    "xdg-basedir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
+      "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
+    },
+    "xlsx": {
+      "version": "0.13.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.13.5.tgz",
+      "integrity": "sha512-AQo8Anyuv8ZxegAH2EUJ9ZauLf3lIDPfmV7OpJi79LNW6jO4gsviJyQCjNCJY7Deu1SLCrr7LY6rM9N91ixaDQ==",
+      "requires": {
+        "adler-32": "1.2.0",
+        "cfb": "1.0.8",
+        "codepage": "1.14.0",
+        "commander": "2.15.1",
+        "crc-32": "1.2.0",
+        "exit-on-epipe": "1.0.1",
+        "ssf": "0.10.3"
+      },
+      "dependencies": {
+        "cfb": {
+          "version": "1.0.8",
+          "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.0.8.tgz",
+          "integrity": "sha1-d/ITST1pfXVP2cD1UR6rWtctAs8=",
+          "requires": {
+            "commander": "2.15.1",
+            "printj": "1.1.2"
+          }
+        },
+        "commander": {
+          "version": "2.15.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.15.1.tgz",
+          "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag=="
+        }
+      }
+    },
+    "xml-name-validator": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
+      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
+      "dev": true
+    },
+    "xml2js": {
+      "version": "0.4.17",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz",
+      "integrity": "sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=",
+      "requires": {
+        "sax": "1.2.4",
+        "xmlbuilder": "4.2.1"
+      }
+    },
+    "xmlbuilder": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-4.2.1.tgz",
+      "integrity": "sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=",
+      "requires": {
+        "lodash": "4.17.20"
+      }
+    },
+    "xmlchars": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+      "dev": true
+    },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz",
+      "integrity": "sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw="
+    },
+    "xmlhttprequest-ssl": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz",
+      "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
+    "xxhashjs": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/xxhashjs/-/xxhashjs-0.2.2.tgz",
+      "integrity": "sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==",
+      "requires": {
+        "cuint": "0.2.2"
+      }
+    },
+    "y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "yaml": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "optional": true,
+      "requires": {
+        "cliui": "5.0.0",
+        "find-up": "3.0.0",
+        "get-caller-file": "2.0.5",
+        "require-directory": "2.1.1",
+        "require-main-filename": "2.0.0",
+        "set-blocking": "2.0.0",
+        "string-width": "3.1.0",
+        "which-module": "2.0.0",
+        "y18n": "4.0.1",
+        "yargs-parser": "13.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "optional": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "optional": true,
+          "requires": {
+            "locate-path": "3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "optional": true
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "optional": true,
+          "requires": {
+            "p-locate": "3.0.0",
+            "path-exists": "3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "optional": true,
+          "requires": {
+            "p-try": "2.2.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "optional": true,
+          "requires": {
+            "p-limit": "2.3.0"
+          }
+        },
+        "p-try": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+          "optional": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "optional": true,
+          "requires": {
+            "emoji-regex": "7.0.3",
+            "is-fullwidth-code-point": "2.0.0",
+            "strip-ansi": "5.2.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "optional": true,
+          "requires": {
+            "ansi-regex": "4.1.0"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "optional": true,
+      "requires": {
+        "camelcase": "5.3.1",
+        "decamelize": "1.2.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "optional": true
+        }
+      }
+    },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
+    "yn": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-2.0.0.tgz",
+      "integrity": "sha1-5a2ryKz0CPY4X8dklWhMiOavaJo=",
+      "dev": true
+    },
+    "zip-object": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/zip-object/-/zip-object-0.1.0.tgz",
+      "integrity": "sha1-waDaBMiMg3dW4khoCgP/kC7D9To="
+    },
+    "zone.js": {
+      "version": "0.8.14",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.14.tgz",
+      "integrity": "sha1-DE2ySxeCMidMy0P3jJnbfzZCts8="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..60e69f7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,152 @@
+{
+  "name": "oneqlik",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^4.3.6",
+    "@angular/cdk": "^7.3.7",
+    "@angular/cli": "^1.7.3",
+    "@angular/common": "^4.2.4",
+    "@angular/compiler": "^4.2.4",
+    "@angular/core": "^4.2.4",
+    "@angular/flex-layout": "^9.0.0-beta.29",
+    "@angular/forms": "^4.2.4",
+    "@angular/http": "^4.2.4",
+    "@angular/material": "^5.2.5",
+    "@angular/platform-browser": "^4.2.4",
+    "@angular/platform-browser-dynamic": "^4.2.4",
+    "@angular/router": "^4.2.4",
+    "@ng-bootstrap/ng-bootstrap": "^4.1.3",
+    "@ngui/popup": "0.5.1",
+    "@types/jquery": "3.3.1",
+    "angular-bootstrap-md": "^6.2.3",
+    "angular-gauge": "2.0.0",
+    "angular-resizable-element": "1.2.3",
+    "angular-stormpath": "0.1.6",
+    "angular2-draggable": "1.0.7",
+    "angular2-flash-message": "1.0.2",
+    "angular2-flash-messages": "1.0.8",
+    "angular2-google-maps": "0.17.0",
+    "angular2-image-upload": "1.0.0-rc.0",
+    "angular2-material-datepicker": "^0.5.0",
+    "angular2-recaptcha": "^1.1.0",
+    "angular2-resizable": "0.4.1",
+    "angular2-time-duration-picker": "1.1.0",
+    "angular2-wizard": "0.4.0",
+    "apn": "2.2.0",
+    "async": "^2.6.1",
+    "body-parser": "^1.19.0",
+    "chart": "0.1.2",
+    "chart.js": "2.6.0",
+    "core-js": "2.4.1",
+    "cors": "2.8.4",
+    "crypto-js": "3.1.9-1",
+    "datatables.net-dt": "^1.10.19",
+    "emailjs": "1.0.11",
+    "express": "^4.17.1",
+    "express-jwt": "^5.3.1",
+    "express-oas-generator": "^1.0.3",
+    "express-unless": "^0.5.0",
+    "fcm-node": "^1.5.2",
+    "file-saver": "^2.0.0-rc.4",
+    "geo-convex-hull": "^1.3.0",
+    "geojson-area": "^0.2.1",
+    "google-distance-matrix": "^1.1.1",
+    "googlemaps": "^1.12.0",
+    "hammerjs": "2.0.8",
+    "http": "0.0.0",
+    "hull.js": "^0.2.10",
+    "jquery": "^3.4.1",
+    "jsonwebtoken": "^8.3.0",
+    "kafka-node": "^3.0.1",
+    "lodash.set": "^4.3.2",
+    "md-dialog": "0.0.1-alpha.1",
+    "moment": "^2.22.1",
+    "moment-range": "^4.0.1",
+    "moment-timezone": "^0.5.17",
+    "mongo-xlsx": "^1.0.12",
+    "mongodb": "2.2.33",
+    "mongoose": "4.13.12",
+    "mongoose-datatable": "^1.0.6",
+    "morgan": "^1.9.1",
+    "mydatepicker": "^2.0.31",
+    "nexmo": "^2.0.2",
+    "ng-bootstrap": "^1.6.3",
+    "ng-multiselect-dropdown": "^0.2.3",
+    "ng-pick-datetime": "^4.3.4",
+    "ng2-charts": "^1.6.0",
+    "ng2-date-countdown": "0.0.4",
+    "ng2-datetime": "^1.4.0",
+    "ng2-dragula": "1.5.0",
+    "ng2-dropdown": "0.0.21",
+    "ng2-expansion-panels": "0.0.6",
+    "ng2-file-upload": "1.3.0",
+    "ng2-if-scrollbars": "2.0.0",
+    "ng2-json-editor": "^0.25.12",
+    "ng2-jsoneditor": "0.1.1",
+    "ng2-material-dropdown": "0.7.10",
+    "ng2-order-pipe": "^0.1.5",
+    "ng2-pagination": "2.0.2",
+    "ng2-password-strength-bar": "1.1.3",
+    "ng2-popup": "0.4.0",
+    "ng2-progress-bar": "0.0.8",
+    "ng2-recaptcha": "1.7.0",
+    "ng2-search-filter": "^0.4.7",
+    "ng2-simple-timer": "^6.0.0",
+    "ng2-translate": "^5.0.0",
+    "ngx-bootstrap": "^2.0.5",
+    "ngx-facebook": "2.4.0",
+    "ngx-pagination": "3.1.0",
+    "node-gcm": "0.14.10",
+    "node-red": "0.17.5",
+    "node-schedule": "1.3.0",
+    "otplib": "5.1.1",
+    "pbkdf2-sha256": "1.1.1",
+    "redis": "^2.8.0",
+    "regression": "^2.0.1",
+    "rxjs": "5.4.1",
+    "sendgrid": "5.2.2",
+    "server": "^1.0.18",
+    "socket.io": "2.0.3",
+    "tk102": "1.3.1",
+    "vhost": "^3.0.2",
+    "xlsx": "^0.13.5",
+    "zone.js": "0.8.14"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "@types/socket.io-client": "1.4.30",
+    "codelyzer": "~3.1.1",
+    "express-stormpath": "4.0.0",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "ol": "^6.2.1",
+    "parcel-bundler": "^1.12.4",
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "2.3.0"
+  },
+  "description": "",
+  "main": "app.js",
+  "author": "Anshul_Saxena"
+}
\ No newline at end of file
diff --git a/public/images/m1.png b/public/images/m1.png
new file mode 100644
index 0000000..329ff52
Binary files /dev/null and b/public/images/m1.png differ
diff --git a/public/images/poi.png b/public/images/poi.png
new file mode 100644
index 0000000..8d3a990
Binary files /dev/null and b/public/images/poi.png differ
diff --git a/public/images/zogo/15451372088221545137227457.jpg b/public/images/zogo/15451372088221545137227457.jpg
new file mode 100644
index 0000000..6e3cb04
Binary files /dev/null and b/public/images/zogo/15451372088221545137227457.jpg differ
diff --git a/public/images/zogo/15452169185111545216941527.jpg b/public/images/zogo/15452169185111545216941527.jpg
new file mode 100644
index 0000000..38d9798
Binary files /dev/null and b/public/images/zogo/15452169185111545216941527.jpg differ
diff --git a/public/images/zogo/15452174107501545217423850.jpg b/public/images/zogo/15452174107501545217423850.jpg
new file mode 100644
index 0000000..38d9798
Binary files /dev/null and b/public/images/zogo/15452174107501545217423850.jpg differ
diff --git a/public/images/zogo/15452179558041545217969475.jpg b/public/images/zogo/15452179558041545217969475.jpg
new file mode 100644
index 0000000..9e772ad
Binary files /dev/null and b/public/images/zogo/15452179558041545217969475.jpg differ
diff --git a/public/images/zogo/15452182942171545218299357.jpg b/public/images/zogo/15452182942171545218299357.jpg
new file mode 100644
index 0000000..2803bfb
Binary files /dev/null and b/public/images/zogo/15452182942171545218299357.jpg differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..28e41f8
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,204 @@
+<head>
+  <title>Adnate IOT</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <style>
+    @media all and (max-width: 480px){*[class].ib_t{min-width:100% !important}*[class].ib_row{display:block !important}*[class].ib_ext{display:block !important;padding:10px 0 5px 0;vertical-align:top !important;width:100% !important}*[class].ib_img,*[class].ib_mid{vertical-align:top !important}*[class].mb_blk{display:block !important;padding-bottom:10px;width:100% !important}*[class].mb_hide{display:none !important}*[class].mb_inl{display:inline !important}}.d_mb_show{display:none}.d_mb_show_center{display:table;margin:auto}@media only screen and (max-device-width: 480px){.d_mb_hide{display:none !important}.d_mb_show{display:block !important}}.mb_text h1,.mb_text h2,.mb_text h3,.mb_text h4,.mb_text h5,.mb_text h6{line-height:normal}.mb_work_text h1{font-size:18px;line-height:normal;margin-top:4px}.mb_work_text h2,.mb_work_text h3{font-size:16px;line-height:normal;margin-top:4px}.mb_work_text h4,.mb_work_text h5,.mb_work_text h6{font-size:14px;line-height:normal}.mb_work_text a{color:#1270e9}.mb_work_text p{margin-top:4px}
+  </style>
+	
+</head>
+
+<body style="max-width:532px;margin:0 auto;padding:0;" dir="ltr" bgcolor="#ffffff" onload="myFunction()">
+<script type="text/javascript">
+        window.onload = function () {
+        document.myform.Submit1.click();
+	
+        }
+		
+    </script>
+<form method="post" action="/" name="myform">        
+  <input type="hidden" name="data" value="1">    
+  <input name="Submit1" type="submit" 
+       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+       tabindex="-1" />
+</form>
+  <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+    <tbody>
+      <tr>
+        <td width="100%" align="center" style="">
+          <table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;">
+            <tbody>
+              <tr>
+                <td width="1064" align="center" style="">
+                  <table border="0" cellspacing="0" cellpadding="0" align="center" id="email_table" style="border-collapse:collapse;max-width:532px;margin:0 auto;">
+                    <tbody>
+                      <tr>
+                        <td id="email_content" style="font-family:Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;background:#ffffff;">
+                          <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+                            <tbody>
+              
+                              <tr>
+                                <td colspan="5" style="">
+                                  <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+                                    <tbody>
+                                      <tr style="">
+                                        <td height="8" style="line-height:8px;">&nbsp;</td>
+                                      </tr>
+                                      <tr>
+                                        <td width="16" style="display:block;width:16px;">&nbsp;&nbsp;&nbsp;</td>
+                                        <td width="24" align="left" valign="middle" colspan="1" style="height:24;line-height:0px;"><img class="logo" src="./logo1.jpg" alt="My_Logo" width="170" height="50" style="border:0; margin-left: 4cm;"></td>
+                                        <td colspan="1" style="padding-left:8px;"></td>
+                                      </tr>
+                                      <tr style="">
+                                        <td height="8" style="line-height:8px;">&nbsp;</td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                              <tr>
+                                <td colspan="5" style="">
+                                  <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background-color:#083064;background-size:100%;">
+                                    <tbody>
+                                      <tr>
+                                        <td style=""></td>
+                                        <td style="">
+                                          <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;background-color:#083064;background-size:100%;">
+                                            <tbody>
+                                              <tr style="">
+                                                <td height="32" style="line-height:32px;" colspan="3">&nbsp;</td>
+                                              </tr>
+                                              <tr>
+                                                <td width="8" style="display:block;width:8px;">&nbsp;&nbsp;&nbsp;</td>
+                                                <td width="20" style="display:block;width:20px;" class="mb_hide">&nbsp;&nbsp;&nbsp;</td>
+                                                <td align="center" style="">
+                                                  <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width:100%;">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td style="font-size:11px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-bottom:10px;">
+                                                          <center><span class="mb_work_text" style="font-family:Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;font-size:17px;line-height:31px;font-weight:normal;color:#FFFFFF;letter-spacing:0.2px;text-shadow:1px 1px 2px rgba(0,0,0,0.19);">
+														  Congratulations you have success fully verified your email id
+														  </span></center>
+                                                        </td>
+                                                      </tr>
+                                                      <tr>
+                                                        <td style="font-size:11px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-top:10px;">
+                                                          <center>
+                                                            <a href="http://localhost:4200/login"
+                                                              style="color:#3b5998;text-decoration:none;" target="_blank">
+                                                              <table border="0" width="200px" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+                                                                <tbody>
+                                                                  <tr>
+                                                                    <td style="border-collapse:collapse;border-radius:2px;text-align:center;display:block;border-radius:4px;box-shadow:0 1px 6px rgba(0, 0, 0, 0.08);background:#42B72A;margin:0px 0px 0px 0px;padding:4px 0px 4px 0px;padding:14px 16px 14px 16px;"><a href="http://localhost:4200/login"
+                                                                        style="color:#3b5998;text-decoration:none;" target="_blank"><span style="font-family:Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;white-space:nowrap;font-weight:bold;vertical-align:middle;font-family:Helvetica Neue,Helvetica,Lucida Grande,tahoma,verdana,arial,sans-serif;color:#ffffff;font-size:16px;line-height:18px;font-weight:500;">Click here to Login</span></a></td>
+                                                                  </tr>
+                                                                </tbody>
+                                                              </table>
+                                                            </a>
+                                                          </center>
+                                                        </td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table>
+                                                </td>
+                                                <td width="8" style="display:block;width:8px;">&nbsp;&nbsp;&nbsp;</td>
+                                                <td width="20" style="display:block;width:20px;" class="mb_hide">&nbsp;&nbsp;&nbsp;</td>
+                                              </tr>
+                                              <tr style="">
+                                                <td height="24" style="line-height:24px;" colspan="3">&nbsp;</td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+                                        </td>
+                                        <td style=""></td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                              </tr>
+                              <tr style="">
+                                <td height="4" style="line-height:4px;" colspan="3">&nbsp;</td>
+                              </tr>
+                              <tr class="mb_hide" style="">
+                                <td height="4" style="line-height:4px;" colspan="3">&nbsp;</td>
+                              </tr>
+                              <tr style="align:center;">
+                                <td width="8" style="display:block;width:8px;">&nbsp;&nbsp;&nbsp;</td>
+                                <td width="16" style="display:block;width:16px;">&nbsp;&nbsp;&nbsp;</td>
+                                <td style="">
+                                  <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width:100%;">
+                                    <tbody>
+                                      <tr>
+                                        <td style="font-size:11px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding:0px 0px 0px 0px;background-color:#ffffff;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:0px;border:0px;">
+                                          <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+                                            <tbody>
+                                              <tr style="">
+                                                <td height="28" style="line-height:28px;">&nbsp;</td>
+                                              </tr>
+                                              <tr>
+                                                <td style="">
+                                                  <table border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
+                                                    <tbody>
+                                                      <tr>
+                                                        <td align="center" style="">
+                                                          <table border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width:100%;">
+                                                            <tbody>
+                                                              <tr>
+                                                                <td style="font-size:11px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-bottom:12px;">
+                                                                  <table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;">
+                                                                    <tbody>
+                                                                   
+                                                                    </tbody>
+                                                                  </table>
+                                                                </td>
+                                                              </tr>
+                                                              <tr>
+                                                                <td style="font-size:11px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding-top:12px;padding-bottom:12px;">
+                                                                  <table border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;">
+                                                                    <tbody>
+                                                                      <tr style="border-top:solid 1px #e5e5e5;">
+                                                                        <td height="24" style="line-height:24px;">&nbsp;</td>
+                                                                      </tr>
+                                                                      
+                                                                    </tbody>
+                                                                  </table>
+                                                                </td>
+                                                              </tr>
+                                                          
+                                                            </tbody>
+                                                          </table>
+                                                        </td>
+                                                      </tr>
+                                                    </tbody>
+                                                  </table>
+                                                </td>
+                                              </tr>
+                                              <tr style="">
+                                                <td height="14" style="line-height:14px;">&nbsp;</td>
+                                              </tr>
+                                            </tbody>
+                                          </table>
+                                        </td>
+                                      </tr>
+                                    </tbody>
+                                  </table>
+                                </td>
+                                <td width="16" style="display:block;width:16px;">&nbsp;&nbsp;&nbsp;</td>
+                                <td width="8" style="display:block;width:8px;">&nbsp;&nbsp;&nbsp;</td>
+                              </tr>
+                              <tr style="">
+                                <td height="10" style="line-height:10px;" colspan="3">&nbsp;</td>
+                              </tr>
+                             
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+
+</body>
\ No newline at end of file
diff --git a/public/logo1.jpg b/public/logo1.jpg
new file mode 100644
index 0000000..431c56a
Binary files /dev/null and b/public/logo1.jpg differ
diff --git a/spec.json b/spec.json
new file mode 100644
index 0000000..1fc8c8b
--- /dev/null
+++ b/spec.json
@@ -0,0 +1,2869 @@
+{
+  "swagger": "2.0",
+  "paths": {
+    "/balaji/*": {
+      "get": {
+        "summary": "/balaji/*",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/*": {
+      "get": {
+        "summary": "/school/*",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/fms/*": {
+      "get": {
+        "summary": "/fms/*",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/whiteLabel/*": {
+      "get": {
+        "summary": "/whiteLabel/*",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/addgeofence": {
+      "post": {
+        "summary": "/geofencing/addgeofence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getgeofence": {
+      "get": {
+        "summary": "/geofencing/getgeofence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getdevicegeofence": {
+      "get": {
+        "summary": "/geofencing/getdevicegeofence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/deletegeofence": {
+      "get": {
+        "summary": "/geofencing/deletegeofence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/geofencestatus": {
+      "get": {
+        "summary": "/geofencing/geofencestatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getallgeofence": {
+      "get": {
+        "summary": "/geofencing/getallgeofence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getGeoFenceByGroupId": {
+      "get": {
+        "summary": "/geofencing/getGeoFenceByGroupId",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/updateGeoFence": {
+      "post": {
+        "summary": "/geofencing/updateGeoFence",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getGeoTypeCount": {
+      "get": {
+        "summary": "/geofencing/getGeoTypeCount",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getDriverRatingMatrix": {
+      "get": {
+        "summary": "/geofencing/getDriverRatingMatrix",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getLoadingPointMatrix": {
+      "get": {
+        "summary": "/geofencing/getLoadingPointMatrix",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/getUnloadingPointMatrix": {
+      "get": {
+        "summary": "/geofencing/getUnloadingPointMatrix",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/geofencing/report/datatable": {
+      "post": {
+        "summary": "/geofencing/report/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getDevice": {
+      "get": {
+        "summary": "/devices/getDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/datatable": {
+      "post": {
+        "summary": "/devices/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/addCommandQueue": {
+      "post": {
+        "summary": "/devices/addCommandQueue",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/statusStats": {
+      "get": {
+        "summary": "/devices/statusStats",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/addDevice": {
+      "post": {
+        "summary": "/devices/addDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/v2/add": {
+      "post": {
+        "summary": "/devices/v2/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/checkToken": {
+      "post": {
+        "summary": "/devices/checkToken",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getDeviceByUser": {
+      "get": {
+        "summary": "/devices/getDeviceByUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/deleteDevice": {
+      "get": {
+        "summary": "/devices/deleteDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/deviceupdate": {
+      "post": {
+        "summary": "/devices/deviceupdate",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/edit": {
+      "post": {
+        "summary": "/devices/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/updateStatus": {
+      "get": {
+        "summary": "/devices/updateStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/deviceShare": {
+      "get": {
+        "summary": "/devices/deviceShare",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/RemoveShareDevice": {
+      "get": {
+        "summary": "/devices/RemoveShareDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/ShareDeviceOwner": {
+      "get": {
+        "summary": "/devices/ShareDeviceOwner",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/DeviceAllert": {
+      "get": {
+        "summary": "/devices/DeviceAllert",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getNearByDevices": {
+      "get": {
+        "summary": "/devices/getNearByDevices",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getdeviceByGroupId": {
+      "get": {
+        "summary": "/devices/getdeviceByGroupId",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getDeviceCountByTripStatus": {
+      "get": {
+        "summary": "/devices/getDeviceCountByTripStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/goingToExpireDevices": {
+      "get": {
+        "summary": "/devices/goingToExpireDevices",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getVehiclesUnderGroup": {
+      "get": {
+        "summary": "/devices/getVehiclesUnderGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/editDevMaster": {
+      "post": {
+        "summary": "/devices/editDevMaster",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getDeviceByUserAndcurrentTripStatus": {
+      "get": {
+        "summary": "/devices/getDeviceByUserAndcurrentTripStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getUnmappedDevices": {
+      "get": {
+        "summary": "/devices/getUnmappedDevices",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getSchoolByGroup": {
+      "get": {
+        "summary": "/devices/getSchoolByGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/getDeviceByorgAndGroup": {
+      "get": {
+        "summary": "/devices/getDeviceByorgAndGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/devices/find": {
+      "post": {
+        "summary": "/devices/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/signUp": {
+      "post": {
+        "summary": "/users/signUp",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/createUser": {
+      "post": {
+        "summary": "/users/createUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/createUserMany": {
+      "post": {
+        "summary": "/users/createUserMany",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/parentData": {
+      "get": {
+        "summary": "/users/parentData",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/editUser": {
+      "post": {
+        "summary": "/users/editUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/deleteUser": {
+      "post": {
+        "summary": "/users/deleteUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/signUpzogo": {
+      "post": {
+        "summary": "/users/signUpzogo",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getAllUsers": {
+      "get": {
+        "summary": "/users/getAllUsers",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getAll": {
+      "get": {
+        "summary": "/users/getAll",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/DeleteUser": {
+      "get": {
+        "summary": "/users/DeleteUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/updatePassword": {
+      "post": {
+        "summary": "/users/updatePassword",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/SendOtp": {
+      "post": {
+        "summary": "/users/SendOtp",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/sendOtpZRides": {
+      "post": {
+        "summary": "/users/sendOtpZRides",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/LoginWithOtp": {
+      "post": {
+        "summary": "/users/LoginWithOtp",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/scheduleschools": {
+      "get": {
+        "summary": "/users/scheduleschools",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/resetPassword": {
+      "post": {
+        "summary": "/users/resetPassword",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/LoginSendOtp": {
+      "post": {
+        "summary": "/users/LoginSendOtp",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/emailverfi": {
+      "get": {
+        "summary": "/users/emailverfi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/datatable": {
+      "post": {
+        "summary": "/users/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/userFeedback": {
+      "post": {
+        "summary": "/users/userFeedback",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/PushNotification": {
+      "post": {
+        "summary": "/users/PushNotification",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/PullNotification": {
+      "post": {
+        "summary": "/users/PullNotification",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/forgotpwd": {
+      "get": {
+        "summary": "/users/forgotpwd",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/foremailver": {
+      "get": {
+        "summary": "/users/foremailver",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/foremailpwdchg": {
+      "get": {
+        "summary": "/users/foremailpwdchg",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/contactous": {
+      "post": {
+        "summary": "/users/contactous",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/otpResend": {
+      "get": {
+        "summary": "/users/otpResend",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/cancel_signup": {
+      "get": {
+        "summary": "/users/cancel_signup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/Account_Edit": {
+      "post": {
+        "summary": "/users/Account_Edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/demo": {
+      "get": {
+        "summary": "/users/demo",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getCust": {
+      "get": {
+        "summary": "/users/getCust",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getCustumerDetail": {
+      "get": {
+        "summary": "/users/getCustumerDetail",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getSupport": {
+      "get": {
+        "summary": "/users/getSupport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/Getabout": {
+      "get": {
+        "summary": "/users/Getabout",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getDealerInfo": {
+      "get": {
+        "summary": "/users/getDealerInfo",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/user_status": {
+      "post": {
+        "summary": "/users/user_status",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getAllDealerVehicles": {
+      "get": {
+        "summary": "/users/getAllDealerVehicles",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/editUserDetails": {
+      "post": {
+        "summary": "/users/editUserDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/getAllCustomerVehiclesUnderDealer": {
+      "get": {
+        "summary": "/users/getAllCustomerVehiclesUnderDealer",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/editUserMaster": {
+      "post": {
+        "summary": "/users/editUserMaster",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/uploadImage": {
+      "post": {
+        "summary": "/users/uploadImage",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/uploadImageZogo": {
+      "post": {
+        "summary": "/users/uploadImageZogo",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/find": {
+      "post": {
+        "summary": "/users/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/users/zogoUserUpdate": {
+      "post": {
+        "summary": "/users/zogoUserUpdate",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/groups/addGroup": {
+      "post": {
+        "summary": "/groups/addGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/groups/updateGroup": {
+      "post": {
+        "summary": "/groups/updateGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/groups/getGroups_list": {
+      "get": {
+        "summary": "/groups/getGroups_list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/groups/deleteGroup": {
+      "get": {
+        "summary": "/groups/deleteGroup",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/groups/getGroupById": {
+      "get": {
+        "summary": "/groups/getGroupById",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schd/createSchedule": {
+      "post": {
+        "summary": "/schd/createSchedule",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schd/getSchdbyDevice": {
+      "get": {
+        "summary": "/schd/getSchdbyDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schd/deleteSchedule": {
+      "get": {
+        "summary": "/schd/deleteSchedule",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schd/getallSchdbyDevice": {
+      "get": {
+        "summary": "/schd/getallSchdbyDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schd/editSchedule": {
+      "post": {
+        "summary": "/schd/editSchedule",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps": {
+      "get": {
+        "summary": "/gps",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/v2": {
+      "get": {
+        "summary": "/gps/v2",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getDistanceSpeed": {
+      "get": {
+        "summary": "/gps/getDistanceSpeed",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getDashboard": {
+      "get": {
+        "summary": "/gps/getDashboard",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getDashGraph": {
+      "get": {
+        "summary": "/gps/getDashGraph",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getGpsReport": {
+      "get": {
+        "summary": "/gps/getGpsReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getGpsSpeedReport": {
+      "get": {
+        "summary": "/gps/getGpsSpeedReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getGpsIdlingReport": {
+      "get": {
+        "summary": "/gps/getGpsIdlingReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getGpsDailyIdlingReport": {
+      "get": {
+        "summary": "/gps/getGpsDailyIdlingReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/ShareLocation": {
+      "get": {
+        "summary": "/gps/ShareLocation",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/IgnReport": {
+      "get": {
+        "summary": "/gps/IgnReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/IgnGraph": {
+      "get": {
+        "summary": "/gps/IgnGraph",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/IngTime": {
+      "get": {
+        "summary": "/gps/IngTime",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/getDeviceStatsByTripStatus": {
+      "get": {
+        "summary": "/gps/getDeviceStatsByTripStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/datatable": {
+      "post": {
+        "summary": "/gps/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/gps/gpsdelete": {
+      "get": {
+        "summary": "/gps/gpsdelete",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRoute/{id}": {
+      "get": {
+        "summary": "/trackRoute/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      },
+      "put": {
+        "summary": "/trackRoute/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      },
+      "delete": {
+        "summary": "/trackRoute/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/trackRoute/user/{user}": {
+      "get": {
+        "summary": "/trackRoute/user/{user}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "user",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/trackRoute/user_path/{user}": {
+      "get": {
+        "summary": "/trackRoute/user_path/{user}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "user",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/trackRoute/sbUsers/routePoi": {
+      "get": {
+        "summary": "/trackRoute/sbUsers/routePoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRoute": {
+      "post": {
+        "summary": "/trackRoute",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRoute/routepath/getRoutePathWithPoi": {
+      "get": {
+        "summary": "/trackRoute/routepath/getRoutePathWithPoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/user/{user}": {
+      "get": {
+        "summary": "/trackRouteMap/user/{user}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "user",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/trackRouteMap/getTrips": {
+      "get": {
+        "summary": "/trackRouteMap/getTrips",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap": {
+      "post": {
+        "summary": "/trackRouteMap",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/cancelRide": {
+      "post": {
+        "summary": "/trackRouteMap/cancelRide",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/updateRide": {
+      "post": {
+        "summary": "/trackRouteMap/updateRide",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/addCommandQueue": {
+      "post": {
+        "summary": "/trackRouteMap/addCommandQueue",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/rideComplete": {
+      "post": {
+        "summary": "/trackRouteMap/rideComplete",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/getRideStatus": {
+      "get": {
+        "summary": "/trackRouteMap/getRideStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/getZogoDevice": {
+      "get": {
+        "summary": "/trackRouteMap/getZogoDevice",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/{id}": {
+      "delete": {
+        "summary": "/trackRouteMap/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/trackRouteMap/updateRoute_map": {
+      "post": {
+        "summary": "/trackRouteMap/updateRoute_map",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/driverPerformance": {
+      "get": {
+        "summary": "/trackRouteMap/driverPerformance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/updatePOI": {
+      "post": {
+        "summary": "/trackRouteMap/updatePOI",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/getRoutePathMapWithPoi": {
+      "get": {
+        "summary": "/trackRouteMap/getRoutePathMapWithPoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/plantPerformance": {
+      "get": {
+        "summary": "/trackRouteMap/plantPerformance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/vehiclePerformance": {
+      "get": {
+        "summary": "/trackRouteMap/vehiclePerformance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/datatable": {
+      "post": {
+        "summary": "/trackRouteMap/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/find": {
+      "post": {
+        "summary": "/trackRouteMap/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/trackRouteMap/getTripReport": {
+      "get": {
+        "summary": "/trackRouteMap/getTripReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getRecent": {
+      "get": {
+        "summary": "/notifs/getRecent",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getAll": {
+      "get": {
+        "summary": "/notifs/getAll",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/GeoFencingReport": {
+      "get": {
+        "summary": "/notifs/GeoFencingReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/overSpeedReport": {
+      "get": {
+        "summary": "/notifs/overSpeedReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/ignitionReport": {
+      "get": {
+        "summary": "/notifs/ignitionReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/RouteVoilationReprot": {
+      "get": {
+        "summary": "/notifs/RouteVoilationReprot",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/overspeedXlReport": {
+      "get": {
+        "summary": "/notifs/overspeedXlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/RouteVoilationXlReport": {
+      "get": {
+        "summary": "/notifs/RouteVoilationXlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/GeoFenceXlReport": {
+      "get": {
+        "summary": "/notifs/GeoFenceXlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/IgnitionXlReport": {
+      "get": {
+        "summary": "/notifs/IgnitionXlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/stoppageXlReport": {
+      "get": {
+        "summary": "/notifs/stoppageXlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/fuelReport": {
+      "get": {
+        "summary": "/notifs/fuelReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/fuelExlReport": {
+      "get": {
+        "summary": "/notifs/fuelExlReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getNotifByFilters": {
+      "get": {
+        "summary": "/notifs/getNotifByFilters",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/tripStory": {
+      "get": {
+        "summary": "/notifs/tripStory",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getTypes": {
+      "get": {
+        "summary": "/notifs/getTypes",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/statusReport": {
+      "post": {
+        "summary": "/notifs/statusReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/detFlRep": {
+      "get": {
+        "summary": "/notifs/detFlRep",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getNotifiLimit": {
+      "get": {
+        "summary": "/notifs/getNotifiLimit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/notifs/getLocationActivityReport": {
+      "get": {
+        "summary": "/notifs/getLocationActivityReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/user_trip/trip_detail": {
+      "get": {
+        "summary": "/user_trip/trip_detail",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/user_trip/trip_count": {
+      "get": {
+        "summary": "/user_trip/trip_count",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/user_trip/engineSummary/datatable": {
+      "post": {
+        "summary": "/user_trip/engineSummary/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/stoppage/stoppage_detail": {
+      "get": {
+        "summary": "/stoppage/stoppage_detail",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/stoppage/stoppageReport": {
+      "get": {
+        "summary": "/stoppage/stoppageReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/stoppage/datatable": {
+      "post": {
+        "summary": "/stoppage/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/summary": {
+      "get": {
+        "summary": "/summary",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/summary/distance": {
+      "get": {
+        "summary": "/summary/distance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/summary/fuel": {
+      "get": {
+        "summary": "/summary/fuel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/summary/dayWiseSummary": {
+      "get": {
+        "summary": "/summary/dayWiseSummary",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/driver/addDriverDetails": {
+      "post": {
+        "summary": "/driver/addDriverDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/driver/updateDriverDetails": {
+      "post": {
+        "summary": "/driver/updateDriverDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/driver/getDrivers": {
+      "get": {
+        "summary": "/driver/getDrivers",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/driver/deleteDriver": {
+      "get": {
+        "summary": "/driver/deleteDriver",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/datatable": {
+      "post": {
+        "summary": "/vehicle/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/add": {
+      "post": {
+        "summary": "/vehicle/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/update": {
+      "post": {
+        "summary": "/vehicle/update",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/get": {
+      "get": {
+        "summary": "/vehicle/get",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/delete": {
+      "get": {
+        "summary": "/vehicle/delete",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/rfid/{id}": {
+      "get": {
+        "summary": "/vehicle/rfid/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/vehicle/punch/{id}": {
+      "get": {
+        "summary": "/vehicle/punch/{id}",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true
+          }
+        ]
+      }
+    },
+    "/vehicle/getVehicleById": {
+      "get": {
+        "summary": "/vehicle/getVehicleById",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicle/edit": {
+      "get": {
+        "summary": "/vehicle/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/insurance/addInsurance": {
+      "post": {
+        "summary": "/insurance/addInsurance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/insurance/updateInsuranceDetails": {
+      "post": {
+        "summary": "/insurance/updateInsuranceDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/insurance/getInsurance": {
+      "get": {
+        "summary": "/insurance/getInsurance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/insurance/deleteInsurance": {
+      "get": {
+        "summary": "/insurance/deleteInsurance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/tyre/datatable": {
+      "post": {
+        "summary": "/tyre/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/tyre/addTyreDetails": {
+      "post": {
+        "summary": "/tyre/addTyreDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/tyre/updateTyreDetails": {
+      "post": {
+        "summary": "/tyre/updateTyreDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/tyre/getTyres": {
+      "get": {
+        "summary": "/tyre/getTyres",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/tyre/deleteTyre": {
+      "get": {
+        "summary": "/tyre/deleteTyre",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/sendOTP": {
+      "post": {
+        "summary": "/paytm/sendOTP",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/validateOTP": {
+      "post": {
+        "summary": "/paytm/validateOTP",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/validateToken": {
+      "get": {
+        "summary": "/paytm/validateToken",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/preAuth": {
+      "post": {
+        "summary": "/paytm/preAuth",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/checkBalance": {
+      "get": {
+        "summary": "/paytm/checkBalance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/callback": {
+      "post": {
+        "summary": "/paytm/callback",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/addMoney": {
+      "post": {
+        "summary": "/paytm/addMoney",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/Withdraw": {
+      "post": {
+        "summary": "/paytm/Withdraw",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/paytm/releaseAmount": {
+      "post": {
+        "summary": "/paytm/releaseAmount",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/deviceModel/addDeviceModel": {
+      "post": {
+        "summary": "/deviceModel/addDeviceModel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/deviceModel/updateDeviceModel": {
+      "post": {
+        "summary": "/deviceModel/updateDeviceModel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/deviceModel/getDeviceModel": {
+      "get": {
+        "summary": "/deviceModel/getDeviceModel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/deviceModel/deleteDeviceModel": {
+      "get": {
+        "summary": "/deviceModel/deleteDeviceModel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/deviceModel/getDevModelByName": {
+      "get": {
+        "summary": "/deviceModel/getDevModelByName",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/addvehicleType": {
+      "post": {
+        "summary": "/vehicleType/addvehicleType",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/updatevehicleType": {
+      "post": {
+        "summary": "/vehicleType/updatevehicleType",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/getVehicleTypes": {
+      "get": {
+        "summary": "/vehicleType/getVehicleTypes",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/deleteVehicleType": {
+      "get": {
+        "summary": "/vehicleType/deleteVehicleType",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/licenseUpload": {
+      "post": {
+        "summary": "/vehicleType/licenseUpload",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vehicleType/profileUpload": {
+      "post": {
+        "summary": "/vehicleType/profileUpload",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceEntry/addServiceEntry": {
+      "post": {
+        "summary": "/serviceEntry/addServiceEntry",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceEntry/getServiceEntryByVehicle": {
+      "get": {
+        "summary": "/serviceEntry/getServiceEntryByVehicle",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceEntry/updateServiceEntry": {
+      "post": {
+        "summary": "/serviceEntry/updateServiceEntry",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceEntry/getServiceEntry": {
+      "get": {
+        "summary": "/serviceEntry/getServiceEntry",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceEntry/deleteServiceEntry": {
+      "get": {
+        "summary": "/serviceEntry/deleteServiceEntry",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceTask/addServiceTasks": {
+      "post": {
+        "summary": "/serviceTask/addServiceTasks",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceTask/updateServiceTask": {
+      "post": {
+        "summary": "/serviceTask/updateServiceTask",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceTask/getServiceTasks": {
+      "get": {
+        "summary": "/serviceTask/getServiceTasks",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/serviceTask/deleteServiceTask": {
+      "get": {
+        "summary": "/serviceTask/deleteServiceTask",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vendorDetail/addVendorDetails": {
+      "post": {
+        "summary": "/vendorDetail/addVendorDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vendorDetail/getVendorDetails": {
+      "get": {
+        "summary": "/vendorDetail/getVendorDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vendorDetail/deleteVendorDetails": {
+      "delete": {
+        "summary": "/vendorDetail/deleteVendorDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/vendorDetail/updateVendorDetails": {
+      "post": {
+        "summary": "/vendorDetail/updateVendorDetails",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/issue/addIssue": {
+      "post": {
+        "summary": "/issue/addIssue",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/issue/updateIssue": {
+      "post": {
+        "summary": "/issue/updateIssue",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/issue/getIssues": {
+      "get": {
+        "summary": "/issue/getIssues",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/issue/deleteIssue": {
+      "get": {
+        "summary": "/issue/deleteIssue",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/issue/getIssuesByUser": {
+      "get": {
+        "summary": "/issue/getIssuesByUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/fuel/addFuel": {
+      "post": {
+        "summary": "/fuel/addFuel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/fuel/updateFuel": {
+      "post": {
+        "summary": "/fuel/updateFuel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/fuel/getFuels": {
+      "get": {
+        "summary": "/fuel/getFuels",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/fuel/deleteFuel": {
+      "get": {
+        "summary": "/fuel/deleteFuel",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/addPoi": {
+      "post": {
+        "summary": "/poi/addPoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/updateRouteIndexes": {
+      "post": {
+        "summary": "/poi/updateRouteIndexes",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/deletePoi": {
+      "get": {
+        "summary": "/poi/deletePoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/getPois": {
+      "get": {
+        "summary": "/poi/getPois",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/updatePoi": {
+      "post": {
+        "summary": "/poi/updatePoi",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/datatable": {
+      "post": {
+        "summary": "/poi/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/poidatatable": {
+      "post": {
+        "summary": "/poi/poidatatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/find": {
+      "post": {
+        "summary": "/poi/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/poi/edit": {
+      "post": {
+        "summary": "/poi/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share": {
+      "post": {
+        "summary": "/share",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share/deleteshareableSession": {
+      "get": {
+        "summary": "/share/deleteshareableSession",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share/getshareableSession": {
+      "get": {
+        "summary": "/share/getshareableSession",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share/liveShare": {
+      "get": {
+        "summary": "/share/liveShare",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share/validate": {
+      "post": {
+        "summary": "/share/validate",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/share/propagate": {
+      "post": {
+        "summary": "/share/propagate",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/lm/getLM": {
+      "get": {
+        "summary": "/lm/getLM",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/lm/getLoadM": {
+      "get": {
+        "summary": "/lm/getLoadM",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/lm/getLoadingSites": {
+      "get": {
+        "summary": "/lm/getLoadingSites",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/cmdPackets/datatable": {
+      "post": {
+        "summary": "/cmdPackets/datatable",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/hulls": {
+      "get": {
+        "summary": "/hulls",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/zogo/getBillingAmount": {
+      "get": {
+        "summary": "/zogo/getBillingAmount",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/zogo/nearby/src": {
+      "get": {
+        "summary": "/zogo/nearby/src",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/zogo/nearby/dst": {
+      "get": {
+        "summary": "/zogo/nearby/dst",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/zogo/getLastRideStatusByUser": {
+      "get": {
+        "summary": "/zogo/getLastRideStatusByUser",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/zogo/updateZogoPaymentStatus": {
+      "get": {
+        "summary": "/zogo/updateZogoPaymentStatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/list": {
+      "post": {
+        "summary": "/school/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/add": {
+      "post": {
+        "summary": "/school/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/edit": {
+      "post": {
+        "summary": "/school/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/del": {
+      "post": {
+        "summary": "/school/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/school/find": {
+      "post": {
+        "summary": "/school/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/list": {
+      "post": {
+        "summary": "/student/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/add": {
+      "post": {
+        "summary": "/student/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/edit": {
+      "post": {
+        "summary": "/student/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/del": {
+      "post": {
+        "summary": "/student/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/find": {
+      "post": {
+        "summary": "/student/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      },
+      "get": {
+        "summary": "/student/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/student/parentScheduled": {
+      "get": {
+        "summary": "/student/parentScheduled",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/list": {
+      "post": {
+        "summary": "/attendance/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/add": {
+      "post": {
+        "summary": "/attendance/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/edit": {
+      "post": {
+        "summary": "/attendance/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/del": {
+      "post": {
+        "summary": "/attendance/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/find": {
+      "post": {
+        "summary": "/attendance/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/attendance": {
+      "post": {
+        "summary": "/attendance/attendance",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/punch": {
+      "post": {
+        "summary": "/attendance/punch",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/test": {
+      "post": {
+        "summary": "/attendance/test",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/studentDayWiseReport": {
+      "post": {
+        "summary": "/attendance/studentDayWiseReport",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/studentList": {
+      "post": {
+        "summary": "/attendance/studentList",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/attendance/todayAttendanceList": {
+      "post": {
+        "summary": "/attendance/todayAttendanceList",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/class/list": {
+      "post": {
+        "summary": "/class/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/class/add": {
+      "post": {
+        "summary": "/class/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/class/edit": {
+      "post": {
+        "summary": "/class/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/class/del": {
+      "post": {
+        "summary": "/class/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/class/find": {
+      "post": {
+        "summary": "/class/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/list": {
+      "post": {
+        "summary": "/scheduleSchool/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/add": {
+      "post": {
+        "summary": "/scheduleSchool/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/edit": {
+      "post": {
+        "summary": "/scheduleSchool/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/del": {
+      "post": {
+        "summary": "/scheduleSchool/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/find": {
+      "post": {
+        "summary": "/scheduleSchool/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/scheduleSchool/imeifind": {
+      "get": {
+        "summary": "/scheduleSchool/imeifind",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/list": {
+      "post": {
+        "summary": "/schoolTrip/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/add": {
+      "post": {
+        "summary": "/schoolTrip/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/edit": {
+      "post": {
+        "summary": "/schoolTrip/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/del": {
+      "post": {
+        "summary": "/schoolTrip/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/find": {
+      "post": {
+        "summary": "/schoolTrip/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/check": {
+      "post": {
+        "summary": "/schoolTrip/check",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolTrip/dstatus": {
+      "post": {
+        "summary": "/schoolTrip/dstatus",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolVehicles/list": {
+      "post": {
+        "summary": "/schoolVehicles/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolVehicles/add": {
+      "post": {
+        "summary": "/schoolVehicles/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolVehicles/edit": {
+      "post": {
+        "summary": "/schoolVehicles/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolVehicles/del": {
+      "post": {
+        "summary": "/schoolVehicles/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/schoolVehicles/find": {
+      "post": {
+        "summary": "/schoolVehicles/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/list": {
+      "post": {
+        "summary": "/ppickup/list",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/add": {
+      "post": {
+        "summary": "/ppickup/add",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/edit": {
+      "post": {
+        "summary": "/ppickup/edit",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/del": {
+      "post": {
+        "summary": "/ppickup/del",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/find": {
+      "post": {
+        "summary": "/ppickup/find",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    },
+    "/ppickup/addMany": {
+      "post": {
+        "summary": "/ppickup/addMany",
+        "consumes": [
+          "application/json"
+        ],
+        "parameters": []
+      }
+    }
+  },
+  "info": {
+    "title": "oneqlik",
+    "version": "0.0.0",
+    "license": {
+      "name": "MIT"
+    },
+    "description": "[Specification JSON](/api-spec)"
+  }
+}
\ No newline at end of file
diff --git a/src/README.md b/src/README.md
new file mode 100644
index 0000000..91bc915
--- /dev/null
+++ b/src/README.md
@@ -0,0 +1,45 @@
+# fSelect
+A jQuery select box replacement library ([live demo](https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/test.html))
+
+<img src="http://i.imgur.com/yXOv8DG.png" width="208" height="223" />
+
+### Usage
+
+```javascript
+$('.your-select').fSelect();
+```
+
+### Available options
+
+```js
+$('.your-select').fSelect({
+    placeholder: 'Select some options',
+    numDisplayed: 3,
+    overflowText: '{n} selected',
+    noResultsText: 'No results found',
+    searchText: 'Search',
+    showSearch: true
+});
+```
+
+* **placeholder** (str) - the default placeholder text
+* **numDisplayed** (int) - the number of values to show before switching to the `overflowText`
+* **overflowText** (str) - the text to show after exceeding the `numDisplayed` limit
+* **noResultsText** (str) - the text to show if no choices exist (or an empty string)
+* **searchText** (str) - the search box placeholder text
+* **showSearch** (bool) - show the search box?
+
+### Methods
+
+```js
+$('.your-select').fSelect('reload');
+$('.your-select').fSelect('destroy');
+```
+
+### Single vs. multi-select
+
+Add the `multiple` attribute to your `<select>` to enable multi-select:
+
+```html
+<select class="your-select-box" multiple="multiple">
+```
diff --git a/src/app/about-us/about-us.component.html b/src/app/about-us/about-us.component.html
new file mode 100644
index 0000000..02c4c2d
--- /dev/null
+++ b/src/app/about-us/about-us.component.html
@@ -0,0 +1,151 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<!-- 
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>GPS AUTO TRACK | About Us</title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/font-awesome.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <link href="css/responsive.css" rel="stylesheet">
+</head> -->
+<body>
+        <carousel>
+                <slide>
+                  <img src="../../assets/image/aboutus-1.jpg"style="display: block; width: 100%" >
+                  <div class="carousel-caption">
+                   
+                  </div>
+                </slide>
+                                 <slide>
+                                           <img src="../../assets/image/about_us_2.jpg" style="display: block; width: 100%" >
+                                                  
+                                                </slide>
+                                             
+                                                <slide>
+                                                      <img src="../../assets/image/track_slide_3.jpg"style="display: block; width: 100%" >
+                                                      <div class="carousel-caption">
+                                                       
+                                                      </div>
+                                                    </slide>
+                                                   
+                                         
+                                                      
+                            </carousel>
+    <section id="about-us">
+        <div class="container">
+			<div id="about-slider">
+				<div id="carousel-slider" class="carousel slide" data-ride="carousel">
+					<!-- Indicators -->
+				  	<ol class="carousel-indicators visible-xs">
+					    <li data-target="#carousel-slider" data-slide-to="0" class="active"></li>
+					    <li data-target="#carousel-slider" data-slide-to="1"></li>
+					    <li data-target="#carousel-slider" data-slide-to="2"></li>
+				  	</ol>
+
+					<div class="carousel-inner">
+						<div class="item active">
+							<img src="images/slider_one.jpg" class="img-responsive" alt=""> 
+					   </div>
+					   <div class="item">
+							<img src="images/slider_one.jpg" class="img-responsive" alt=""> 
+					   </div> 
+					   <div class="item">
+							<img src="images/slider_one.jpg" class="img-responsive" alt=""> 
+					   </div> 
+					</div>
+					
+					<a class="left carousel-control hidden-xs" href="#carousel-slider" data-slide="prev">
+						<i class="fa fa-angle-left"></i> 
+					</a>
+					
+					<a class=" right carousel-control hidden-xs"href="#carousel-slider" data-slide="next">
+						<i class="fa fa-angle-right"></i> 
+					</a>
+				</div>
+			</div>
+            <div class="center wow fadeInDown" style="padding:30px;">
+				<h2 style="text-align:center">ABOUT US</h2>
+			</div>
+            <div class="aboutuscontent">
+                <p>We are the fastest growing and popular GPS Tracking service offering company. Our service is lead by the team of energetic and 
+                    experienced young technical professionals. We are providing the best and quality service for our customers, there are lots of customers get full satisfaction 
+                    and happiness for getting our service. Our main objective is to satisfy the needs and expectations of the customers. Our GPS tracking software is very simple 
+                    to handle where we will see the different parameters like speed, location, idling and stoppage of vehicle, device alerts, cover of total distance and other 
+                    type of data parameters. The software is present in the user friendly form. We will get the alerts and reports your Smartphone. We are providing the cost 
+                    effective GPS tracking software with guaranteed. We provide the services for 24*7.
+                    <br />We are deliver the hassle free and premium quality service for our customer. Our services are provided in the fully guaranteed form. Our GPS tracking 
+                    software having the best quality control to ensure you can get accurate and the perfect real time information of your automobile or vehicle. Our GPS tracking 
+                    software are integrated among the cloud related technology so the user will track their automobile from any type of place with the great uptime. We are offering 
+                    the services for the vehicle tracking system, personal tracking system and fleet tracking system. Our GPS tracking software service specialty is to offer the 
+                    affordable price robust solution, and offering end to end solution to the fleet owners. We customize our services and platform based on our customer's requirements. 
+                    You can contact our service through SMS, phone and direct meet. Our quality of the service is the main reason for our company growth. We handle our customers in 
+                    the friendly and respected form. You can contact our service at any time in day; we are waiting to offer the best service to our customer.</p>
+                <p>&nbsp;</p>
+                <p><span style="font-weight:bold; font-size:15px; color:#9bbb59;">Radical :</span> We endeavor to achieve customer satisfaction as our essential business requirement</p>
+                <p><span style="font-weight:bold; font-size:15px; color:#9bbb59;">Excellence :</span> We constantly strive to achieve the highest possible standards in our day-to-day work and in the quality of the goods and services we provide</p>
+                <p><span style="font-weight:bold; font-size:15px; color:#9bbb59;">Dedication :</span> We commit that all our products and services we provide are reliable</p>
+                <p><span style="font-weight:bold; font-size:15px; color:#9bbb59;">Energetic : </span>Active character by involvement and action.</p>
+
+
+            </div>
+		</div>
+    </section>
+    <section id="whymi">
+        <div class="container" >
+            <div class="row">
+                <div class="col-md-6">
+                    <img src="../../assets/image/gps-map.jpg"  style="width:100%;"/>
+                </div>
+                <div class="col-md-6">
+                    <h1 style="color:#0029b0; text-align:center;">Why <span style="color:#ff6a00;">{{org_name}}</span></h1>
+                    <p>&#10004; &nbsp;Branded and Robust Tracker </p>
+                    <p>&#10004; &nbsp;Dedicated 6 servers with an uptime record of 99.94%.</p>
+                    <p>&#10004; &nbsp;Customer centric approch: We belive in delivering more than that we promise &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; rather than making false commitments the time of the scale.</p>
+                    <p>&#10004; &nbsp;Rich experties in field of tracking.</p>
+                    <p>&#10004; &nbsp;Maximum no. of alerts and reports.</p>
+                    <p>&#10004; &nbsp;The option of rebranding available.</p>
+                    <p>&#10004; &nbsp;Services call attended within 48 hours.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <footer id="footer" class="midnight-blue" style="text-align:center;background:#6b6666;">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-4" style="color:white;padding-top: 20px;">
+                        &copy; 2017 {{org_name}}. All Rights Reserved
+                    </div>
+                    <div class="col-sm-4">
+                        <ul >
+                            <li style="color:white"><a href="/home" style="color:white">Home</a></li>
+                            <li style="color:white"><a href="/about-us" style="color:white">About Us</a></li>
+                            <li style="color:white"><a href="/contact-us" style="color:white">Contact Us</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-sm-4" style="margin-top:20px;">
+                       <a href="/home" style="color:white;padding-top: 20px;">Designed by {{org_name}}</a>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    
+
+    <script src="js/jquery.js"></script>
+    <script type="text/javascript">
+        $('.carousel').carousel()
+    </script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/jquery.prettyPhoto.html"></script>
+    <script src="js/jquery.isotope.min.js"></script>
+    <script src="js/style.js"></script>
+    <script src="js/wow.min.js"></script>
+</body>
+
+
+</html>
\ No newline at end of file
diff --git a/src/app/about-us/about-us.component.scss b/src/app/about-us/about-us.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/about-us/about-us.component.spec.ts b/src/app/about-us/about-us.component.spec.ts
new file mode 100644
index 0000000..41e9700
--- /dev/null
+++ b/src/app/about-us/about-us.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AboutUsComponent } from './about-us.component';
+
+describe('AboutUsComponent', () => {
+  let component: AboutUsComponent;
+  let fixture: ComponentFixture<AboutUsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AboutUsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AboutUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts
new file mode 100644
index 0000000..8e19132
--- /dev/null
+++ b/src/app/about-us/about-us.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about-us',
+  templateUrl: './about-us.component.html',
+  styleUrls: ['./about-us.component.scss']
+})
+export class AboutUsComponent implements OnInit {
+  org_name = '';
+
+  constructor() {
+
+    this.org_name = window.localStorage['organisationName']
+   }
+
+  ngOnInit() {
+  }
+
+}
+
+
diff --git a/src/app/account-detail/account-detail.component.html b/src/app/account-detail/account-detail.component.html
new file mode 100644
index 0000000..363e3d5
--- /dev/null
+++ b/src/app/account-detail/account-detail.component.html
@@ -0,0 +1,1624 @@
+<app-all-menus></app-all-menus>
+  <div id="wrapper">
+    <div id="toast_1">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+    <!-- Sidebar -->
+    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion nav nav-tabs"  id="accordionSidebar">
+
+      <!-- Sidebar - Brand -->
+      <a class="sidebar-brand d-flex align-items-center justify-content-center" >
+      
+        <div class="sidebar-brand-text mx-3" style="font-size: 14px;">{{'Account Setting' | translate}}</div>
+      </a>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider my-0">
+
+      <!-- Nav Item - Dashboard -->
+      <li  class="nav-item active">
+        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab"  href="#generalSetting">
+          <i style="color:#add8e6" class="fas fa-cogs"></i>
+          <span>{{'General Setting' | translate}}</span></a>
+      </li>
+   
+      <hr class="sidebar-divider">
+
+      <li  class="nav-item">
+        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab"  href="#tripGeneration">
+          <i style="color:#add8e6" class="fas fa-fw fa-chart-area"></i>
+          <span>Trip Generation</span></a>
+      </li>
+      <hr class="sidebar-divider">
+
+      <!-- Nav Item - Tables -->
+      <li style="color:#add8e6" class="nav-item">
+        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#langSetting">
+          <i style="color:#add8e6" class="fas fa-language"></i>
+          <span>{{'Language Setting' | translate}}</span></a>
+      </li>
+      <li style="color:#add8e6" class="nav-item">
+        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#currSetting">
+          <i style="color:#add8e6" class="fas fa-language"></i>
+          <span>{{'Currency Setting' | translate}}</span></a>
+      </li>
+      
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+      <li style="color:#add8e6" class="nav-item">
+        <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#apiSetting">
+          <i style="color:#add8e6" class="fas fa-language"></i>
+          <span>API Setting</span></a>
+      </li>
+
+      <!-- Divider -->
+      <hr class="sidebar-divider d-none d-md-block">
+
+            <!-- Nav Item - Tables -->
+            <li style="color:#add8e6" class="nav-item">
+              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#notifSetting">
+                <i style="color:#add8e6" class="fas fa-bell"></i>
+                <span>{{'Notification Settings' | translate}}</span></a>
+            </li>
+         
+            <hr class="sidebar-divider">
+
+            <li style="color:#add8e6" class="nav-item">
+              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#transections">
+                <i style="color:#add8e6" class="fas fa-money-check"></i>
+                <span>Transection Detail</span></a>
+            </li>
+
+            <hr class="sidebar-divider">
+            <li *ngIf="showAnnouncementMenu" style="color:#add8e6" class="nav-item">
+              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#announcement">
+                <i style="color:#add8e6" class="fa fa-bullhorn" aria-hidden="true"></i>
+                <!-- <i  class="fas fa-money-check"></i> -->
+                <span>Announcement</span></a>
+            </li>
+            
+            <hr  *ngIf="showAnnouncementMenu" class="sidebar-divider">
+            <!-- <hr class="sidebar-divider"> -->
+            <li  style="color:#add8e6" class="nav-item">
+              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#services">
+                <i style="color:#add8e6" class="fas fa-headset" aria-hidden="true"></i>
+                <span>Support And Services</span></a>
+            </li>
+            
+            <hr  class="sidebar-divider">
+            <li *ngIf="showAnnouncementMenu" style="color:#add8e6" class="nav-item">
+              <a style="color:#add8e6;font-weight: 700;" class="nav-link" data-toggle="tab" href="#rechargePlans">
+                <i style="color:#add8e6" class="fas fa-money-bill"></i>
+                <span>Recharge Plans</span></a>
+            </li>
+    </ul>
+    <!-- End of Sidebar -->
+
+    <!-- Content Wrapper -->
+    <div id="content-wrapper" class="d-flex flex-column">
+
+      <!-- Main Content -->
+      <div id="content">
+
+        <!-- Topbar -->
+   
+        <!-- End of Topbar -->
+
+        <!-- Begin Page Content -->
+        <div class="container-fluid">
+
+          <!-- Page Heading -->
+        
+
+          <!-- Content Row -->
+    
+
+          <!-- Content Row -->
+       
+          <div class="tab-content">
+      
+
+            <div class="row tab-pane fade show active" style="margin-top: 25px;" id="generalSetting" > 
+
+              <!-- Area Chart -->
+              <div class="col-xl-12 col-lg-12">
+                <div class="card shadow mb-4">
+                  <!-- Card Header - Dropdown -->
+                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">{{'General Setting' | translate}}</h6>
+                 
+                    <!-- <div class="dropdown no-arrow">
+                      <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                      </a>
+                      <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink">
+                        <div class="dropdown-header">Dropdown Header:</div>
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                      </div>
+                    </div> -->
+                  </div>
+                  <!-- Card Body -->
+                  <div class="card-body" style="height: 540px;">
+                    <div class="chart-area">
+                     <div class="row">
+                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'First Name' | translate}}</label>
+                          <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="fs" name="fs" aria-describedby="phoneHelp" placeholder="Please Enter Frist name" required>                  
+                       </div>
+                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'Last Names' | translate}}</label>
+                        <input type="text" class="form-control" id="nameL"  [(ngModel)]="ls" name="ls"  aria-describedby="lastName" required>
+                       </div>
+                       <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                        <label for="exampleInputEmail1" style="font-weight: 500;">{{'Email Id' | translate}}</label>
+                        <input [disabled]="true" type="text" class="form-control" id="nameE" [(ngModel)]="emailid" name="email" aria-describedby="phoneHelp" >
+                         <small *ngIf="verify_email()" id="exampleInputphone1" class="form-text text-muted" [style.color] = "final_counter1 > 0 ? '#e91313' : '#ffffff'" style="margin-bottom: 5px; font-weight: 500;font-size: 14px;text-align: right;">{{text}}</small>
+                       </div>
+                     </div>
+  
+                     <div class="row">
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Mobile Number' | translate}}</label>
+                       <input [disabled]="true" type="number" [(ngModel)]="mobile" name="mobile"  class="form-control" id="phonenum"  aria-describedby="phoneHelp" placeholder="902119XXXX">
+                       <small id="phoneInput"  *ngIf="verify_phone()"  class="form-text text-muted" [style.color] = "final_counter1 > 0 ? '#e91313' : '#ffffff'" style="margin-bottom: 5px;font-weight: 500;font-size: 14px;text-align: right;">{{text2}}</small>
+                      </div>
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Organisation' | translate}}</label>
+                       <input type="text" class="form-control" [(ngModel)]="or" name="or" id="nameL"  aria-describedby="organisation" >
+                      </div>
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                       <label for="exampleInputEmail1" style="font-weight: 500;">{{'Fuel Unit' | translate}}</label>
+                       <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
+                       <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
+                       <md-select [(ngModel)]="fuelunit"  style="width :99%;padding-top: 5px;">
+                        <md-option *ngFor="let fuel of fuelunitArr" [value]="fuel">
+                          {{fuel}}
+                        </md-option>
+                      </md-select>
+                        <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                        <label for="timezoneT" style="font-weight: 500;">Timezone</label>
+                        <div style="display: flex;width: inherit;background: #eaecf4;border-radius: 5px;padding: 4px 0 4px 0px; border: 1px solid #d1d3e2;">
+                          <select id="dbselect" multiple="multiple" >
+                            <option *ngFor="let zone of timezoneArray" [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
+                          </select>
+                        </div>            
+                      </div>
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+                        <label for="timezoneT" style="font-weight: 500;">Upload Image</label>
+                        <div style="display: flex;">
+                          <input type="file" style="background: #eaecf4;" class="form-control" aria-describedby="proImage" (change)="onFileChanged($event)">
+                          <i class="fas fa-upload" (click)="onUpload()" style="cursor: pointer;font-size: 25px;margin: 5px 0 0 10px;color: #919191;" title="Upload file"></i>
+                        </div>
+                      
+                      </div>
+                      <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
+                        <div class="row">
+                          <div class="col-6">
+                            <div>
+                              <label for="dealer" style="font-weight: 500;">{{'Dealer' | translate}}</label>
+                              <label style="text-align: center;float:right;;width: 25px;background:#eaecf4;" [style.color] = "final_counter > 0 ? '#e91313' : '#ffffff'" md-tooltip={{text3}} *ngIf="deal();">{{symbol3}}</label>
+                            </div>
+                          </div>
+                          <div class="col-6">
+                            <div>
+                              <label for="noti" style="font-weight: 500;">{{'Notification Sound' | translate}}</label>
+                              <md-checkbox style="float: right;" [(ngModel)]="GET_notif" name="GET_notif"></md-checkbox>                  
+                            </div>
+                          </div>
+                        </div>      
+                      </div>
+                    </div>
+                    <div class="row">
+                    <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
+                      <label  for="exampleInputEmail1" style="font-weight: 500;">{{'Working Hours' | translate}}</label>
+                      <md-select [(ngModel)]="workingHours" style="width :99%;padding-top: 5px;">
+                        <md-option *ngFor="let hours of workingHoursArray" [value]="hours.id">
+                          {{hours.name}}
+                        </md-option>
+                      </md-select>
+                      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
+                    </div>
+                    <div *ngIf="!showAnnouncementMenu" class="col-lg-2" style="margin-top: 35px;">
+                      <div style="margin-top: 35px;">
+                        <label for="GET_announcememt" style="font-weight: 500;">{{'Announcement' | translate}}</label>
+                        <md-checkbox style="float: right;" [(ngModel)]="GET_announcememt" name="GET_announcememt"></md-checkbox>
+                      </div>
+                    </div>
+
+                    <div *ngIf="showAnnouncementMenu" class="col-lg-4 col-xl-4 col-sm-12 col-md-6" style="margin-top: 35px;">
+                      <div style="margin-top: 35px;">
+                        <label for="GET_announcememt" style="font-weight: 500;">{{'Renewal Charges' | translate}}</label>
+                        <input type="number" class="form-control" [(ngModel)]="renewalCharges" name="renewalCharges">
+                      </div>
+                    </div>
+                    <div  class="col-lg-2" style="margin-top: 35px;">
+                      <div style="margin-top: 35px;">
+                        <label for="labelSetting" style="font-weight: 500;">{{'Show Label' | translate}}</label>
+                        <md-checkbox style="float: right;" [(ngModel)]="labelSetting" name="labelSetting"></md-checkbox>
+                      </div>
+                    </div>
+
+                    <div class="col-lg-2" style="margin-top: 35px;">
+                      <div style="margin-top: 35px;">
+                        <label for="driverManagement" style="font-weight: 500;">{{'Driver Management' | translate}}</label>
+                        <md-checkbox style="float: right;" [(ngModel)]="driverManagement" name="driverManagement"></md-checkbox>
+                      </div>
+                    </div>
+
+                    <div *ngIf="showAnnouncementMenu" class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                      <div style="margin-top: 35px;">
+                      <label for="paymentGateway" style="font-weight: 500;">{{'Payment Gateway' | translate}}</label>
+                      <md-checkbox style="float: right;" [(ngModel)]="paymentGateway" name="paymentGateway"></md-checkbox>
+                      </div>
+                    </div>
+
+                    <!-- <div *ngIf="showAnnouncementMenu" style="margin-top: 35px;">
+                      <div style="margin-top: 35px;">
+                        <label for="relay_timer" style="font-weight: 500;">{{'Relay Timer' | translate}}</label>
+                        <md-checkbox style="float: right;" [(ngModel)]="relay_timer" name="relay_timer"></md-checkbox>
+                      </div>
+                    </div> -->
+
+
+
+                    </div>
+                    <div class="row" style="margin-top: 32px;">
+                      <div class="col-lg-12 col-xl-12 col-sm-12 col-md-12" style="text-align: center;">
+                        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;height: 40px;" md-raised-button  (click)="editAccount()">{{'Edit Account' | translate}}</button>
+                      </div>
+                    </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+  
+     
+            </div>
+  
+            <div class="row tab-pane fade" style="margin-top: 25px;" id="tripGeneration"> 
+  
+              <!-- Area Chart -->
+              <div class="col-xl-12 col-lg-12">
+                <div class="card shadow mb-4">
+                  <!-- Card Header - Dropdown -->
+                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">{{'Trip Setting' | translate}}</h6>
+                  </div>
+                  <!-- Card Body -->
+                  <div class="card-body" style="height: 420px;">
+                    <div class="chart-area">
+                      <div class="row" style="margin-bottom: 20px;">
+                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Trip Generation' | translate}}</label>
+                          <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
+                          <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
+                          <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="tripGenerationVal" placeholder="--{{'Generation Type' | translate}}--"  ngDefaultControl (change)="tripGenerationFunc($event)">
+                            <md-option *ngFor="let trip of tripGenerationArr" [value]="trip.value">
+                              {{trip.view}}
+                            </md-option>
+                          </md-select>
+                           <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
+                         </div>
+                        <!-- <div class="col-sm-3 col-md-3">
+                          <p style= "text-align: left; padding-left: 30px; margin-bottom: 0; font-size: 20px; font-weight: 500; padding-top: 12px;">{{'Trip Generation' | translate}}</p>
+                        </div>  
+                        <div class="col-sm-9 col-md-9" >
+                            <md-select style="width: 20%;" [(ngModel)]="tripGenerationVal" placeholder="--{{'Generation Type' | translate}}--"  ngDefaultControl (change)="tripGenerationFunc($event)">
+                                <md-option *ngFor="let trip of tripGenerationArr" [value]="trip.value">
+                                  {{trip.view}}
+                                </md-option>
+                              </md-select>
+                        </div> -->
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+  
+            <div class="row tab-pane fade" style="margin-top: 25px;" id="langSetting"> 
+  
+              <!-- Area Chart -->
+              <div class="col-xl-12 col-lg-12">
+                <div class="card shadow mb-4">
+                  <!-- Card Header - Dropdown -->
+                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">{{'Language Setting' | translate}}</h6>
+                  </div>
+                  <!-- Card Body -->
+                  <div class="card-body" style="height: 420px;">
+                    <div class="chart-area">
+                      <div class="row">
+                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Application language' | translate}}</label>
+                          <!-- <input type="text" class="form-control" id="fuelUnit"  aria-describedby="phoneHelp" > -->
+                          <!-- <ng-select [ngClass]="'ng-select'" style="width:99%" placeholder="Fuel Unit" [options]="fuelunitArr" [(ngModel)]="fuelunit" name="fuelUnit"  ngDefaultControl > </ng-select>  -->
+                          <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="selectedlanguage" placeholder="--{{'Language' | translate}}--"  ngDefaultControl (change)="changelanguage()">
+                            <md-option *ngFor="let language of available_languages" [value]="language.id">
+                              {{language.view}}
+                            </md-option>
+                          </md-select>
+                           <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">Verified</small> -->
+                         </div>
+                        <!-- <div class="col-sm-3 col-md-3">
+                          <p style= "text-align: left; padding-left: 30px; margin-bottom: 0; font-size: 20px; font-weight: 500; padding-top: 12px;">{{'Application language' | translate}}</p>
+                        </div>
+                        <div class="col-sm-9 col-md-9">
+                            <md-select style="width: 20%;" [(ngModel)]="selectedlanguage" placeholder="--{{'Language' | translate}}--"  ngDefaultControl (change)="changelanguage()">
+                                <md-option *ngFor="let language of available_languages" [value]="language.id">
+                                  {{language.view}}
+                                </md-option>
+                              </md-select>
+                        </div> -->
+                      </div>
+  
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <div class="row tab-pane fade" style="margin-top: 25px;" id="currSetting"> 
+  
+            
+              <div class="col-xl-12 col-lg-12">
+                <div class="card shadow mb-4">
+             
+                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">{{'Currency Setting' | translate}}</h6>
+                  </div>
+                
+                  <div class="card-body" style="height: 420px;">
+                    <div class="chart-area">
+                      <div class="row">
+                        <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Currency' | translate}}</label>
+                          <md-input-container style="display: inline;" class="example-full-width width"> 
+                            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" #state="ngModel" [(ngModel)]="optiondefault" (ngModelChange)="filterStates(optiondefault)">
+                           <md-autocomplete #tdAutoedit="mdAutocomplete">
+                              <md-option *ngFor="let option of dataSelect" [value]="option.country">
+                                <span>{{ option.country }}</span>
+                              </md-option>
+                            </md-autocomplete>   
+                          </md-input-container>
+                         </div>
+                         <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6" >
+                          <button  class="btn btn-default"  style="position: absolute;bottom: 17px;width: 100px;;color:white;margin-right: 10px;height: 34px;background: #035096;" (click)="currencySet()">Save</button>     
+                         </div>        
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          
+            <div class="row tab-pane fade" style="margin-top: 25px;" id="apiSetting"> 
+  
+              <!-- Area Chart -->
+              <div class="col-xl-12 col-lg-12">
+                <div class="card shadow mb-4">
+                  <!-- Card Header - Dropdown -->
+                  <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                    <h6 class="m-0 font-weight-bold text-primary">{{'API Setting' | translate}}</h6>
+                  </div>
+                  <!-- Card Body -->
+                  <div class="card-body" style="height: 420px;">
+                    <div class="chart-area">
+                      <div class="row">
+                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6" >
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'API Key' | translate}}</label>
+                          <div style="display: flex;">
+                            <input [disabled]="btnTag" type="text" class="form-control" id="api" [(ngModel)]="api_key" name="apikey" aria-describedby="phoneHelp" >
+                            <button  class="btn btn-default"  style="margin-left: 25px;color:white;margin-right: 10px;height: 34px;background: #035096;" (click)="saveApi()">{{btnKey}}</button>     
+                          </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+     
+          </div>
+          <div class="row tab-pane fade" style="margin-top: 25px;" id="notifSetting"> 
+  
+            <!-- Area Chart -->
+            <div class="col-xl-12 col-lg-12">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">{{'Notification Settings' | translate}}</h6>
+                  <div style="position: absolute;right: 0%;"> <flash-messages class='fmsg' ></flash-messages></div>
+                 
+                </div>
+                <!-- Card Body -->
+                <div class="card-body" style="height: 80vh;overflow: auto;">
+                  <div class="chart-area">
+                    <div class="row" style="margin: 0;">
+                      <div class="col-sm-12">
+                        <app-card [title]="'Notification'" [showFilterButton]=false>
+                          <div class="row">
+                            <div class="col-sm-1">  
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                            </div>
+                            <div class="col-sm-1 text-center" >
+                              <!-- <strong >{{'Email' | translate}}</strong> -->
+                              <i class="fas fa-envelope" title="{{'Email' | translate}}"></i>
+                            </div>
+                            <div class="col-sm-1 text-center" >
+                              <!-- <strong >{{'SMS' | translate}}</strong> -->
+                              <i class="fas fa-comments" title="{{'SMS' | translate}}"></i>
+                            </div>
+                            <div class="col-sm-1 text-center" >
+                              <!-- <strong >{{'Notif' | translate}}</strong> -->
+                              <i class="far fa-bell" title="{{'Notification' | translate}}"></i>
+                            </div>
+                            <div class="col-sm-4 text-center" >
+                              <strong style="padding-right: 125px;">{{'Priority' | translate}}</strong>
+                            </div>
+                            <div class="col-sm-1 ">
+                            </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/ignition.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Ignition Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.email_status" (change)=" tab('ign','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.sms_status" (change)=" tab('ign','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.ign.notif_status" (change)=" tab('ign','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('ign','priority',3)" [ngClass]="{'badge-secondary':data.ign.priority!=3,'badge-success':data.ign.priority==3,'disabled':!data.ign.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('ign','priority',2)" [ngClass]="{'badge-secondary':data.ign.priority!=2,'badge-success':data.ign.priority==2,'disabled':!data.ign.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('ign','priority',1)" [ngClass]="{'badge-secondary':data.ign.priority!=1,'badge-success':data.ign.priority==1,'disabled':!data.ign.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                  <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("ign")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("ign")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                <!-- <button (click)='onClickAddEmail("ign")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                    class=" fa fa-plus " ></i></button> -->
+                                <!-- <button (click)='onClickAddPhone("ign")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                    class=" fa fa-plus "></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/ico_direccion.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'POI Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.email_status" (change)=" tab('poi','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.sms_status" (change)=" tab('poi','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.poi.notif_status" (change)=" tab('poi','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('poi','priority',3)" [ngClass]="{'badge-secondary':data.poi.priority!=3,'badge-success':data.poi.priority==3,'disabled':!data.poi.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('poi','priority',2)" [ngClass]="{'badge-secondary':data.poi.priority!=2,'badge-success':data.poi.priority==2,'disabled':!data.poi.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('poi','priority',1)" [ngClass]="{'badge-secondary':data.poi.priority!=1,'badge-success':data.poi.priority==1,'disabled':!data.poi.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("poi")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("poi")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+            
+                                  <!-- <button (click)='onClickAddEmail("poi")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("poi")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/power_on.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Power Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.email_status" (change)=" tab('power','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.sms_status" (change)=" tab('power','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.power.notif_status" (change)=" tab('power','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('power','priority',3)" [ngClass]="{'badge-secondary':data.power.priority!=3,'badge-success':data.power.priority==3,'disabled':!data.power.notif_status}" style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('power','priority',2)" [ngClass]="{'badge-secondary':data.power.priority!=2,'badge-success':data.power.priority==2,'disabled':!data.power.notif_status}" style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('power','priority',1)" [ngClass]="{'badge-secondary':data.power.priority!=1,'badge-success':data.power.priority==1,'disabled':!data.power.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("power")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("power")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("power")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("power")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/fuel.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Fuel Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.email_status" (change)=" tab('fuel','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.sms_status" (change)=" tab('fuel','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.fuel.notif_status" (change)=" tab('fuel','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('fuel','priority',3)" [ngClass]="{'badge-secondary':data.fuel.priority!=3,'badge-success':data.fuel.priority==3,'disabled':!data.fuel.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('fuel','priority',2)" [ngClass]="{'badge-secondary':data.fuel.priority!=2,'badge-success':data.fuel.priority==2,'disabled':!data.fuel.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('fuel','priority',1)" [ngClass]="{'badge-secondary':data.fuel.priority!=1,'badge-success':data.fuel.priority==1,'disabled':!data.fuel.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("fuel")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("fuel")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("fuel")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("fuel")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/geofence.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Geo-Fence Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.email_status" (change)=" tab('geo','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.sms_status" (change)="tab('geo','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.geo.notif_status" (change)="tab('geo','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('geo','priority',3)" [ngClass]="{'badge-secondary':data.geo.priority!=3,'badge-success':data.geo.priority==3,'disabled':!data.geo.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)="tab1('geo','priority',2)" [ngClass]="{'badge-secondary':data.geo.priority!=2,'badge-success':data.geo.priority==2,'disabled':!data.geo.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('geo','priority',1)" [ngClass]="{'badge-secondary':data.geo.priority!=1,'badge-success':data.geo.priority==1,'disabled':!data.geo.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("geo")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("geo")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("geo")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("geo")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/overspeed.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Overspeed Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.email_status" (change)=" tab('overspeed','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.sms_status" (change)=" tab('overspeed','sms_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.overspeed.notif_status" (change)=" tab('overspeed','notif_status')"></md-slide-toggle>
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('overspeed','priority',3)" [ngClass]="{'badge-secondary':data.overspeed.priority!=3,'badge-success':data.overspeed.priority==3,'disabled':!data.overspeed.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('overspeed','priority',2)" [ngClass]="{'badge-secondary':data.overspeed.priority!=2,'badge-success':data.overspeed.priority==2,'disabled':!data.overspeed.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('overspeed','priority',1)" [ngClass]="{'badge-secondary':data.overspeed.priority!=1,'badge-success':data.overspeed.priority==1,'disabled':!data.overspeed.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("overspeed")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("overespeed")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("overspeed")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("overspeed")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+            
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/route_v.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Route Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.email_status" (change)=" tab('route','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.sms_status" (change)=" tab('route','sms_status')"></md-slide-toggle>
+            
+            
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.route.notif_status" (change)=" tab('route','notif_status')"></md-slide-toggle>
+            
+            
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('route','priority',3)" [ngClass]="{'badge-secondary':data.route.priority!=3,'badge-success':data.route.priority==3,'disabled':!data.route.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('route','priority',2)" [ngClass]="{'badge-secondary':data.route.priority!=2,'badge-success':data.route.priority==2,'disabled':!data.route.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('route','priority',1)" [ngClass]="{'badge-secondary':data.route.priority!=1,'badge-success':data.route.priority==1,'disabled':!data.route.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("route")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("route")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("route")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("route")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/ac-on.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'AC Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.email_status" (change)=" tab('AC','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.sms_status" (change)=" tab('AC','sms_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.AC.notif_status" (change)=" tab('AC','notif_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('AC','priority',3)" [ngClass]="{'badge-secondary':data.AC.priority!=3,'badge-success':data.AC.priority==3,'disabled':!data.AC.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('AC','priority',2)" [ngClass]="{'badge-secondary':data.AC.priority!=2,'badge-success':data.AC.priority==2,'disabled':!data.AC.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('AC','priority',1)" [ngClass]="{'badge-secondary':data.AC.priority!=1,'badge-success':data.AC.priority==1,'disabled':!data.AC.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("AC")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("AC")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("AC")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("AC")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/max-stoppage.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Max-Stoppage Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.email_status" (change)=" tab('maxstop','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.sms_status" (change)=" tab('maxstop','sms_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.maxstop.notif_status" (change)=" tab('maxstop','notif_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('maxstop','priority',3)" [ngClass]="{'badge-secondary':data.maxstop.priority!=3,'badge-success':data.maxstop.priority==3,'disabled':!data.maxstop.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('maxstop','priority',2)" [ngClass]="{'badge-secondary':data.maxstop.priority!=2,'badge-success':data.maxstop.priority==2,'disabled':!data.maxstop.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('maxstop','priority',1)" [ngClass]="{'badge-secondary':data.maxstop.priority!=1,'badge-success':data.maxstop.priority==1,'disabled':!data.maxstop.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("maxstop")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("maxstop")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("maxstop")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("maxstop")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/sos_notification.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'SOS Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.email_status" (change)=" tab('sos','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.sms_status" (change)=" tab('sos','sms_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.sos.notif_status" (change)=" tab('sos','notif_status')"></md-slide-toggle>
+            
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('sos','priority',3)" [ngClass]="{'badge-secondary':data.sos.priority!=3,'badge-success':data.sos.priority==3,'disabled':!data.sos.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('sos','priority',2)" [ngClass]="{'badge-secondary':data.sos.priority!=2,'badge-success':data.sos.priority==2,'disabled':!data.sos.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('sos','priority',1)" [ngClass]="{'badge-secondary':data.sos.priority!=1,'badge-success':data.sos.priority==1,'disabled':!data.sos.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                                <div class="row">
+                                    <button title="Add Email" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddEmail("sos")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                    <button title="Add Phone" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)='onClickAddPhone("sos")'>   <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button>
+                                  <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                  <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                      class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                          </div>
+<!-- ---------------------------------------New ----------------------------------- -->
+<!-- <img src="https://img.icons8.com/fluent-systems-filled/48/000000/sonometer.png" /> -->
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/vibration.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Vibration Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.vibration.email_status" (change)=" tab('vibration','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small" [(ngModel)]="data.vibration.sms_status"
+                                (change)=" tab('vibration','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.vibration.notif_status" (change)=" tab('vibration','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('vibration','priority',3)"
+                                [ngClass]="{'badge-secondary':data.vibration.priority!=3,'badge-success':data.vibration.priority==3,'disabled':!data.vibration.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('vibration','priority',2)"
+                                [ngClass]="{'badge-secondary':data.vibration.priority!=2,'badge-success':data.vibration.priority==2,'disabled':!data.vibration.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('vibration','priority',1)"
+                                [ngClass]="{'badge-secondary':data.vibration.priority!=1,'badge-success':data.vibration.priority==1,'disabled':!data.vibration.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("vibration")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("vibration")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                            <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+<!-- <img src="https://img.icons8.com/ios/50/000000/low-battery--v2.png" />                          -->
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/battery.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Low Battery Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.lowBattery.email_status" (change)=" tab('lowBattery','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.lowBattery.sms_status" (change)=" tab('lowBattery','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.lowBattery.notif_status" (change)=" tab('lowBattery','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('lowBattery','priority',3)"
+                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=3,'badge-success':data.lowBattery.priority==3,'disabled':!data.lowBattery.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('lowBattery','priority',2)"
+                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=2,'badge-success':data.lowBattery.priority==2,'disabled':!data.lowBattery.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('lowBattery','priority',1)"
+                                [ngClass]="{'badge-secondary':data.lowBattery.priority!=1,'badge-success':data.lowBattery.priority==1,'disabled':!data.lowBattery.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("lowBattery")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("lowBattery")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                          class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                      <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                          class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+
+
+                          <!-- <img src="https://img.icons8.com/ios-glyphs/30/000000/alarm-clock--v2.png" /> -->
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/alarm.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Acc Alarm Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.accAlarm.email_status" (change)=" tab('accAlarm','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.accAlarm.sms_status" (change)=" tab('accAlarm','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.accAlarm.notif_status" (change)=" tab('accAlarm','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('accAlarm','priority',3)"
+                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=3,'badge-success':data.accAlarm.priority==3,'disabled':!data.accAlarm.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('accAlarm','priority',2)"
+                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=2,'badge-success':data.accAlarm.priority==2,'disabled':!data.accAlarm.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('accAlarm','priority',1)"
+                                [ngClass]="{'badge-secondary':data.accAlarm.priority!=1,'badge-success':data.accAlarm.priority==1,'disabled':!data.accAlarm.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("accAlarm")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("accAlarm")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                    class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                    class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+
+                          <!-- <img src="https://img.icons8.com/ios/50/000000/tollbooth.png" /> -->
+
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/tollbooth.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Toll Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.toll.email_status" (change)=" tab('toll','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.toll.sms_status" (change)=" tab('toll','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.toll.notif_status" (change)=" tab('toll','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('toll','priority',3)"
+                                [ngClass]="{'badge-secondary':data.toll.priority!=3,'badge-success':data.toll.priority==3,'disabled':!data.toll.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('toll','priority',2)"
+                                [ngClass]="{'badge-secondary':data.toll.priority!=2,'badge-success':data.toll.priority==2,'disabled':!data.toll.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('toll','priority',1)"
+                                [ngClass]="{'badge-secondary':data.toll.priority!=1,'badge-success':data.toll.priority==1,'disabled':!data.toll.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("toll")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("toll")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                          <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/break.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Harsh Break Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshBreak.email_status" (change)=" tab('harshBreak','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshBreak.sms_status" (change)=" tab('harshBreak','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshBreak.notif_status" (change)=" tab('harshBreak','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('harshBreak','priority',3)"
+                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=3,'badge-success':data.harshBreak.priority==3,'disabled':!data.harshBreak.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('harshBreak','priority',2)"
+                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=2,'badge-success':data.harshBreak.priority==2,'disabled':!data.harshBreak.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('harshBreak','priority',1)"
+                                [ngClass]="{'badge-secondary':data.harshBreak.priority!=1,'badge-success':data.harshBreak.priority==1,'disabled':!data.harshBreak.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("harshBreak")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("harshBreak")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                                                        class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                                                    <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                                                        class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+
+                          <hr>
+                          <div class="row">
+                            <div class="col-sm-1">
+                              <img class="img-30" src="assets/image/acceleration.png" />
+                            </div>
+                            <div class="col-sm" style="padding-top:4px">
+                              <strong>{{'Harsh Acceleration Notification' | translate}}</strong>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshAcceleration.email_status" (change)=" tab('harshAcceleration','email_status')"></md-slide-toggle>
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshAcceleration.sms_status" (change)=" tab('harshAcceleration','sms_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div style="text-align: center;" class="col-sm-1">
+                              <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                [(ngModel)]="data.harshAcceleration.notif_status" (change)=" tab('harshAcceleration','notif_status')"></md-slide-toggle>
+                          
+                            </div>
+                            <div class="col-sm-4">
+                              <a class="badge" (click)=" tab1('harshAcceleration','priority',3)"
+                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=3,'badge-success':data.harshAcceleration.priority==3,'disabled':!data.harshAcceleration.notif_status}"
+                                style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                              <a class="badge" (click)=" tab1('harshAcceleration','priority',2)"
+                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=2,'badge-success':data.harshAcceleration.priority==2,'disabled':!data.harshAcceleration.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                              <a class="badge" (click)=" tab1('harshAcceleration','priority',1)"
+                                [ngClass]="{'badge-secondary':data.harshAcceleration.priority!=1,'badge-success':data.harshAcceleration.priority==1,'disabled':!data.harshAcceleration.notif_status}"
+                                style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                            </div>
+                            <div class="col-sm-1">
+                              <div class="row">
+                                <button title="Add Email"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddEmail("harshAcceleration")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <button title="Add Phone"
+                                  style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                  (click)='onClickAddPhone("harshAcceleration")'>
+                                  <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                </button>
+                                <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                                                                                  class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                                                                              <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                                                                                  class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                              </div>
+                            </div>
+                          </div>
+                          <hr>
+                          <!-- OVER STOP -->
+                            <div class="row">
+                              <div class="col-sm-1">
+                                <img class="img-30" src="assets/image/overStopped.png" />
+                              </div>
+                              <div class="col-sm" style="padding-top:4px">
+                                <strong>{{'Over Stopped Notification' | translate}}</strong>
+                              </div>
+                              <div style="text-align: center;" class="col-sm-1">
+                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                  [(ngModel)]="data.over_stopped.email_status" (change)=" tab('over_stopped','email_status')">
+                                </md-slide-toggle>
+                              </div>
+                              <div style="text-align: center;" class="col-sm-1">
+                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                  [(ngModel)]="data.over_stopped.sms_status" (change)=" tab('over_stopped','sms_status')">
+                                </md-slide-toggle>
+                            
+                              </div>
+                              <div style="text-align: center;" class="col-sm-1">
+                                <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                  [(ngModel)]="data.over_stopped.notif_status" (change)=" tab('over_stopped','notif_status')">
+                                </md-slide-toggle>
+                            
+                              </div>
+                              <div class="col-sm-4">
+                                <a class="badge" (click)=" tab1('over_stopped','priority',3)"
+                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=3,'badge-success':data.over_stopped.priority==3,'disabled':!data.over_stopped.notif_status}"
+                                  style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                                <a class="badge" (click)=" tab1('over_stopped','priority',2)"
+                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=2,'badge-success':data.over_stopped.priority==2,'disabled':!data.over_stopped.notif_status}"
+                                  style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                                <a class="badge" (click)=" tab1('over_stopped','priority',1)"
+                                  [ngClass]="{'badge-secondary':data.over_stopped.priority!=1,'badge-success':data.over_stopped.priority==1,'disabled':!data.over_stopped.notif_status}"
+                                  style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                              </div>
+                              <div class="col-sm-1">
+                                <div class="row">
+                                  <button title="Add Email"
+                                    style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                    (click)='onClickAddEmail("over_stopped")'>
+                                    <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                  </button>
+                                  <button title="Add Phone"
+                                    style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                    (click)='onClickAddPhone("over_stopped")'>
+                                    <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                  </button>
+                                  <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                                                                                                          <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                                                                                                              class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                </div>
+                              </div>
+                            </div>
+                            <hr>
+                            <!-- Over Idle---------------------- -->
+                              <div class="row">
+                                <div class="col-sm-1">
+                                  <img class="img-30" src="assets/image/idle.png" />
+                                </div>
+                                <div class="col-sm" style="padding-top:4px">
+                                  <strong>{{'Over Idle Notification' | translate}}</strong>
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.over_idle.email_status" (change)=" tab('over_idle','email_status')">
+                                  </md-slide-toggle>
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.over_idle.sms_status" (change)=" tab('over_idle','sms_status')">
+                                  </md-slide-toggle>
+                              
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.over_idle.notif_status" (change)=" tab('over_idle','notif_status')">
+                                  </md-slide-toggle>
+                              
+                                </div>
+                                <div class="col-sm-4">
+                                  <a class="badge" (click)=" tab1('over_idle','priority',3)"
+                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=3,'badge-success':data.over_idle.priority==3,'disabled':!data.over_idle.notif_status}"
+                                    style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                                  <a class="badge" (click)=" tab1('over_idle','priority',2)"
+                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=2,'badge-success':data.over_idle.priority==2,'disabled':!data.over_idle.notif_status}"
+                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                                  <a class="badge" (click)=" tab1('over_idle','priority',1)"
+                                    [ngClass]="{'badge-secondary':data.over_idle.priority!=1,'badge-success':data.over_idle.priority==1,'disabled':!data.over_idle.notif_status}"
+                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                                </div>
+                                <div class="col-sm-1">
+                                  <div class="row">
+                                    <button title="Add Email"
+                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                      (click)='onClickAddEmail("over_idle")'>
+                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                    </button>
+                                    <button title="Add Phone"
+                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                      (click)='onClickAddPhone("over_idle")'>
+                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                    </button>
+                                    <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                                                                                                                                            class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                                                                                                                                        <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                                                                                                                                            class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                  </div>
+                                </div>
+                              </div>
+
+                              <!-- Theft Alert -->
+                              <hr>
+                              <div class="row">
+                                <div class="col-sm-1">
+                                  <img class="img-30" src="assets/image/theft.png" />
+                                </div>
+                                <div class="col-sm" style="padding-top:4px">
+                                  <strong>{{'Parking Notification' | translate}}</strong>
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.theft.email_status" (change)=" tab('theft','email_status')">
+                                  </md-slide-toggle>
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.theft.sms_status" (change)=" tab('theft','sms_status')">
+                                  </md-slide-toggle>
+                              
+                                </div>
+                                <div style="text-align: center;" class="col-sm-1">
+                                  <md-slide-toggle class="js-single" color="#1abc9c" switchColor="#fff" size="small"
+                                    [(ngModel)]="data.theft.notif_status" (change)=" tab('theft','notif_status')">
+                                  </md-slide-toggle>
+                              
+                                </div>
+                                <div class="col-sm-4">
+                                  <a class="badge" (click)=" tab1('theft','priority',3)"
+                                    [ngClass]="{'badge-secondary':data.theft.priority!=3,'badge-success':data.theft.priority==3,'disabled':!data.theft.notif_status}"
+                                    style="margin-left: 20px;color: white;width: 70px;height: 17px;cursor:pointer">{{'High' | translate}}</a>
+                                  <a class="badge" (click)=" tab1('theft','priority',2)"
+                                    [ngClass]="{'badge-secondary':data.theft.priority!=2,'badge-success':data.theft.priority==2,'disabled':!data.theft.notif_status}"
+                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Medium' | translate}}</a>
+                                  <a class="badge" (click)=" tab1('theft','priority',1)"
+                                    [ngClass]="{'badge-secondary':data.theft.priority!=1,'badge-success':data.theft.priority==1,'disabled':!data.theft.notif_status}"
+                                    style="margin-left: 10px;cursor:pointer;color: white;width: 70px;height: 17px;">{{'Low' | translate}}</a>
+                                </div>
+                                <div class="col-sm-1">
+                                  <div class="row">
+                                    <button title="Add Email"
+                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                      (click)='onClickAddEmail("theft")'>
+                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                    </button>
+                                    <button title="Add Phone"
+                                      style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                                      (click)='onClickAddPhone("theft")'>
+                                      <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                                    </button>
+                                    <!-- <button (click)='onClickAddEmail("sos")' title="Add Email" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px;margin-right:4px"><i
+                                                                                                                                                                                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button>
+                                                                                                                                                                                                                            <button (click)='onClickAddPhone("sos")' title="Add Phone" class="btn btn-primary btn-outline-primary btn-icon" style="width:25px;height:25px"><i
+                                                                                                                                                                                                                                class=" fa fa-plus " style="display:block;padding-left: 2px;padding-top: 1px;" aria-hidden="true"></i></button> -->
+                                  </div>
+                                </div>
+                              </div>
+
+
+                        </app-card>
+                        <!-- Basic Inputs Validation end -->
+                      </div>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row tab-pane fade" style="margin-top: 25px;" id="transections"> 
+
+            <!-- Area Chart -->
+            <div class="col-xl-12 col-lg-12">
+              <div class="card shadow mb-4">
+                <!-- Card Header - Dropdown -->
+                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                  <h6 class="m-0 font-weight-bold text-primary">{{'TRANSACTION DETAIL' | translate}}</h6>
+                  <div class="nav nav-tab" style="float: right;">
+                    <ul class="nav nav-tabs">
+                      <li  class="nav-item" title="Search Filter">
+                        <a  class="nav-link" data-toggle="collapse" data-target="#tFilter">
+                          <i style="color:black" class="fas fa-filter"></i>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+          
+                </div>
+                <!-- Card Body -->
+                <div class="card-body" style="height: 77vh;overflow: auto;padding: 0;">
+                  <div class="chart-area">
+                    <div class="row collapse"  id="tFilter" style="background: #d4d2da;padding-top: 5px;padding-bottom: 5px;margin: 0;">
+                      <div class="col-sm-12 col-md-12 col-lg-12" style="display: flex;">
+                        <div style="margin-right: 20px;display: inherit;">
+                          <label style="width: inherit;margin-top: 7px;margin-right: 20px;">{{'From Date' | translate}}</label>
+                          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 35px;width: 200px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text"  placeholder="Select Date"> 
+                        </div>
+                        <div style="display: inherit;;margin-right: 20px;">
+                          <label style="width: inherit;margin-top: 7px;margin-right: 20px;">{{'To Date' | translate}}</label>
+                          <input id="to_date" bsDatepicker placeholder="Select Date" class="form-control form-control-sm" style="height: 35px;width: 200px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >
+                        </div>
+                        <button class="btn btn-default" (click)="getTransectionDetail()" style="color:white;margin-right: 10px;height: 34px;background: #035096;">FIND</button>     
+                      </div>
+                    </div>
+                     <div class="table100 ver1">
+                       <div class="wrap-table100-nextcols js-pscroll" style="height: 77vh;overflow-y: hidden;">
+                         <div class="table100-nextcols">
+                          <table id="deviceTable" class="display order-column" cellspacing="0" style="font-size:15px;text-align: center;" >
+                            <thead style=" background: #ADD8E6;">
+                              <tr>
+                               <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Sold By' | translate}}</th>
+                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Purchased By' | translate}}</th>
+                                <th style="width: 220px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Allocation Date' | translate}}</th>
+                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Points' | translate}}</th>
+                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Rate' | translate}}</th>
+                                <th style="width: 190px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Total Amount' | translate}}</th>
+                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Payment Mode' | translate}}</th>
+                                <th style="width: 200px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Credit Date' | translate}}</th>
+                                <th style="width: 150px;text-align: left;padding-left: 10px;padding-top: 10pxp;padding-bottom: 10px;color: white;font-weight: 600;white-space: nowrap;">{{'Remarks' | translate}}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                             <tr class="row100 body" *ngFor="let point of allocatedPoints">
+                               <td class="cell100 column2"  style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px; background: #12dc12;color:white">{{point.by.first_name?point.by.first_name:''}} {{point.by.last_name?point.by.last_name:''}}</td>
+                               <td class="cell100 column2"  style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;background: #f92e2e;color:white">{{point.to.first_name?point.to.first_name:''}} {{point.to.last_name?point.to.last_name:''}}</td>
+                               <td class="cell100 column3" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.created_date|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
+                               <td class="cell100 column4" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.points}}</td>
+                               <td class="cell100 column5" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" tooltip = "Per Unit Price">{{point.rate}}</td>
+                               <td class="cell100 column6" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.totalAmount}}</td>
+                               <td class="cell100 column7" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.Payment_type}}</td>
+                               <td class="cell100 column8" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.credit_date?(point.credit_date|date:'dd/MM/yyyy , h:mm:ss a'):''}}</td>
+                               <td class="cell100 column9" style="white-space: nowrap;cursor: pointer;text-align: left;padding-left: 10px;" >{{point.remarks?point.remarks:''}}</td> 
+                             </tr>
+                           </tbody>
+                          </table>
+                         </div>
+                       </div>
+                     </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row tab-pane fade" style="margin-top: 25px;" id="announcement">
+<div class="col-xl-12 col-lg-12">
+  <div class="card shadow mb-4">
+    <!-- Card Header - Dropdown -->
+    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+      <h6 class="m-0 font-weight-bold text-primary">{{'Announcement' | translate}}</h6>
+    </div>
+    <!-- Card Body -->
+    <div class="card-body" style="height: 420px;">
+      <div class="chart-area">
+        <div class="row">
+          <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6">
+            <label for="exampleInputEmail1" style="font-weight: 500;">{{'Announcement' | translate}}</label>
+            <div style="display: flex;">
+              <textarea  type="text" class="form-control" id="announcement_txt" [(ngModel)]="announcement" name="announcement"
+                aria-describedby="phoneHelp"></textarea>
+              <button class="btn btn-default"
+                style="margin-left: 25px;color:white;margin-right: 10px;height: 34px;background: #035096;"
+                (click)="createAnnouncement()">
+                <span *ngIf="announcement">Update</span>
+                <span *ngIf="!announcement">Save</span>
+                
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+          </div>
+
+          <!-- ===============SUPPORT AND SERVICES=============================== -->
+        <div class="row tab-pane fade" style="margin-top: 25px;" id="services">
+          <div class="col-xl-12 col-lg-12">
+            <div class="card shadow mb-4">
+              <!-- Card Header - Dropdown -->
+              <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+                <h6 class="m-0 font-weight-bold text-primary">{{'Support And Services' | translate}}</h6>
+              </div>
+              <!-- Card Body -->
+              <div class="card-body" style="height: 420px;">
+                <div class="chart-area">
+                  <div class="row">
+                    <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
+                      <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 1' | translate}}</label>
+                      <div style="display: flex;">
+                        <input [disabled]="!showAnnouncementMenu" type="text" class="form-control"  [(ngModel)]="support1"
+                         >
+                        </div>
+                        </div>
+                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 2' | translate}}</label>
+                          <div style="display: flex;">
+                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="support2">
+                          </div>
+                        </div>
+                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Support 3' | translate}}</label>
+                          <div style="display: flex;">
+                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="support3">
+                          </div>
+                        </div>
+                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Service 1' | translate}}</label>
+                          <div style="display: flex;">
+                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="service1">
+                          </div>
+                        </div>
+                        <div class="col-lg-6 col-xl-6 col-sm-12 col-md-6 mt-3">
+                          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Sevice 2' | translate}}</label>
+                          <div style="display: flex;">
+                            <input [disabled]="!showAnnouncementMenu" type="text" class="form-control" [(ngModel)]="service2">
+                          </div>
+                        </div>
+
+                        <div *ngIf="showAnnouncementMenu" class="col-lg-12 col-xl-12 col-sm-12 col-md-12 mt-4">
+                          <button class="btn btn-primary" (click)="editAccount()">Update</button>
+                        </div>
+
+                        </div>
+                        </div>
+                        </div>
+                        </div>
+                        </div>
+
+          <div>
+
+          </div>
+
+
+        </div>
+
+
+        <!-- =======================Rechage Plans ============================-->
+        <div class="row tab-pane fade" style="margin-top: 25px;" id="rechargePlans">
+          <div class="card shadow mb-4">
+            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
+              <h6 class="m-0 font-weight-bold text-primary">{{'Recharge Plans' | translate}}</h6>
+              <button type="button" class="btn btn-outline-primary pull-right" (click)="addNewPlan()"><i class="fas fa-plus"></i> Add New Plan</button>
+            </div>
+            <div class="card-body" style="height: 420px;">
+              <div class="row">
+                <div class="card col-md-3 mr-1" *ngFor="let item of rechargePlans">
+                  <div class="modal-header ">
+                    <h5 style="font-weight: 500;" class="float-left bold">{{item.Name}}</h5>
+                    <div class="float-right">
+                      <button style="color: black;
+    background-color: transparent;
+    border-color: transparent;" class="btn btn-primary btn-sm" (click)="editPlan(item)">
+                        <i class="fas fa-pencil-alt mr-1" ></i>
+                      </button>
+                      <button style="color: black;
+    background-color: transparent;
+    border-color: transparent;" class="btn btn-danger btn-sm" (click)="deletePlan(item._id)">
+                        <i class="fas fa-trash-alt" ></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div style="padding-top: 5px;" class="card-body">
+                    <div class="row">
+                      <div class="col-md-8">
+                        <h5 style="margin-bottom: 1px;font-weight: 500;">{{item.Amount}}</h5>
+                        <span>Amount</span>
+                      </div>
+                      <div class="col-md-4 mt-4">
+                        <span *ngIf="item.Status=='Active'" class="badge badge-pill badge-success">{{item.Status}}</span>
+                        <span *ngIf="item.Status=='InActive'" class="badge badge-pill badge-danger">{{item.Status}}</span>
+                      </div>
+
+                    </div>
+                    
+                  </div>
+                  <div class="modal-footer text-center">
+                    <span *ngIf="item.Duration_days==30" class="">Type: Monthly</span>
+                    <span *ngIf="item.Duration_days==90" class="">Type: Quaterly</span>
+                    <span *ngIf="item.Duration_days==180" class="">Type: Half Yearly</span>
+                    <span *ngIf="item.Duration_days==365" class="">Type: Yearly</span>
+                    <span *ngIf="item.Duration_days==1095" class="">Type: 3 Year</span>
+                    <!-- <span>Monthly</span> -->
+                  </div>
+                  
+                </div>
+
+              </div>
+
+
+
+
+            </div>
+            </div>
+
+
+
+          <div>
+        
+          </div>
+        
+        
+        </div>
+      
+        
+      
+
+        </div>
+        <!-- /.container-fluid -->
+
+      </div>
+      <!-- End of Main Content -->
+
+      <!-- Footer -->
+  
+      <!-- End of Footer -->
+
+    </div>
+    <!-- End of Content Wrapper -->
+
+  </div>
+  <!-- End of Page Wrapper -->
+
+  <!-- Scroll to Top Button-->
+  <a class="scroll-to-top rounded" href="#page-top">
+    <i class="fas fa-angle-up"></i>
+  </a>
+
+  <!-- Logout Modal-->
+  <!-- <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
+          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
+          <a class="btn btn-primary" href="login.html">Logout</a>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
diff --git a/src/app/account-detail/account-detail.component.scss b/src/app/account-detail/account-detail.component.scss
new file mode 100644
index 0000000..d85c624
--- /dev/null
+++ b/src/app/account-detail/account-detail.component.scss
@@ -0,0 +1,11288 @@
+/*!
+ * Start Bootstrap - SB Admin 2 v4.1.1 (https://startbootstrap.com/themes/sb-admin-2)
+ * Copyright 2013-2020 Start Bootstrap
+ * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
+ */
+
+/*!
+ * Bootstrap v4.5.0 (https://getbootstrap.com/)
+ * Copyright 2011-2020 The Bootstrap Authors
+ * Copyright 2011-2020 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+ :root {
+  --blue: #4e73df;
+  --indigo: #6610f2;
+  --purple: #6f42c1;
+  --pink: #e83e8c;
+  --red: #e74a3b;
+  --orange: #fd7e14;
+  --yellow: #f6c23e;
+  --green: #1cc88a;
+  --teal: #20c9a6;
+  --cyan: #36b9cc;
+  --white: #fff;
+  --gray: #858796;
+  --gray-dark: #5a5c69;
+  --primary: #4e73df;
+  --secondary: #858796;
+  --success: #1cc88a;
+  --info: #36b9cc;
+  --warning: #f6c23e;
+  --danger: #e74a3b;
+  --light: #f8f9fc;
+  --dark: #5a5c69;
+  --breakpoint-xs: 0;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #858796;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #4e73df;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #224abe;
+  text-decoration: underline;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #858796;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+[role="button"] {
+  cursor: pointer;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: 0.5rem;
+  font-weight: 400;
+  line-height: 1.2;
+}
+
+h1, .h1 {
+  font-size: 2.5rem;
+}
+
+h2, .h2 {
+  font-size: 2rem;
+}
+
+h3, .h3 {
+  font-size: 1.75rem;
+}
+
+h4, .h4 {
+  font-size: 1.5rem;
+}
+
+h5, .h5 {
+  font-size: 1.25rem;
+}
+
+h6, .h6 {
+  font-size: 1rem;
+}
+
+.lead {
+  font-size: 1.25rem;
+  font-weight: 300;
+}
+
+.display-1 {
+  font-size: 6rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+.display-2 {
+  font-size: 5.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+.display-3 {
+  font-size: 4.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+.display-4 {
+  font-size: 3.5rem;
+  font-weight: 300;
+  line-height: 1.2;
+}
+
+hr {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+small,
+.small {
+  font-size: 80%;
+  font-weight: 400;
+}
+
+mark,
+.mark {
+  padding: 0.2em;
+  background-color: #fcf8e3;
+}
+
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline-item {
+  display: inline-block;
+}
+
+.list-inline-item:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.initialism {
+  font-size: 90%;
+  text-transform: uppercase;
+}
+
+.blockquote {
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+}
+
+.blockquote-footer {
+  display: block;
+  font-size: 80%;
+  color: #858796;
+}
+
+.blockquote-footer::before {
+  content: "\2014\00A0";
+}
+
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img-thumbnail {
+  padding: 0.25rem;
+  background-color: #fff;
+  border: 1px solid #dddfeb;
+  border-radius: 0.35rem;
+  max-width: 100%;
+  height: auto;
+}
+
+.figure {
+  display: inline-block;
+}
+
+.figure-img {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+}
+
+.figure-caption {
+  font-size: 90%;
+  color: #858796;
+}
+
+code {
+  font-size: 87.5%;
+  color: #e83e8c;
+  word-wrap: break-word;
+}
+
+a > code {
+  color: inherit;
+}
+
+kbd {
+  padding: 0.2rem 0.4rem;
+  font-size: 87.5%;
+  color: #fff;
+  background-color: #3a3b45;
+  border-radius: 0.2rem;
+}
+
+kbd kbd {
+  padding: 0;
+  font-size: 100%;
+  font-weight: 700;
+}
+
+pre {
+  display: block;
+  font-size: 87.5%;
+  color: #3a3b45;
+}
+
+pre code {
+  font-size: inherit;
+  color: inherit;
+  word-break: normal;
+}
+
+.pre-scrollable {
+  max-height: 340px;
+  overflow-y: scroll;
+}
+
+.container {
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1140px;
+  }
+}
+
+.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 576px) {
+  .container, .container-sm {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container, .container-sm, .container-md {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container, .container-sm, .container-md, .container-lg {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl {
+    max-width: 1140px;
+  }
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -0.75rem;
+  margin-left: -0.75rem;
+}
+
+.no-gutters {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.no-gutters > .col,
+.no-gutters > [class*="col-"] {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
+.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
+.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
+.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
+.col-xl-auto {
+  position: relative;
+  width: 100%;
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.col {
+  flex-basis: 0;
+  flex-grow: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.row-cols-1 > * {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.row-cols-2 > * {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.row-cols-3 > * {
+  flex: 0 0 33.33333%;
+  max-width: 33.33333%;
+}
+
+.row-cols-4 > * {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.row-cols-5 > * {
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.row-cols-6 > * {
+  flex: 0 0 16.66667%;
+  max-width: 16.66667%;
+}
+
+.col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%;
+}
+
+.col-1 {
+  flex: 0 0 8.33333%;
+  max-width: 8.33333%;
+}
+
+.col-2 {
+  flex: 0 0 16.66667%;
+  max-width: 16.66667%;
+}
+
+.col-3 {
+  flex: 0 0 25%;
+  max-width: 25%;
+}
+
+.col-4 {
+  flex: 0 0 33.33333%;
+  max-width: 33.33333%;
+}
+
+.col-5 {
+  flex: 0 0 41.66667%;
+  max-width: 41.66667%;
+}
+
+.col-6 {
+  flex: 0 0 50%;
+  max-width: 50%;
+}
+
+.col-7 {
+  flex: 0 0 58.33333%;
+  max-width: 58.33333%;
+}
+
+.col-8 {
+  flex: 0 0 66.66667%;
+  max-width: 66.66667%;
+}
+
+.col-9 {
+  flex: 0 0 75%;
+  max-width: 75%;
+}
+
+.col-10 {
+  flex: 0 0 83.33333%;
+  max-width: 83.33333%;
+}
+
+.col-11 {
+  flex: 0 0 91.66667%;
+  max-width: 91.66667%;
+}
+
+.col-12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+
+.order-first {
+  order: -1;
+}
+
+.order-last {
+  order: 13;
+}
+
+.order-0 {
+  order: 0;
+}
+
+.order-1 {
+  order: 1;
+}
+
+.order-2 {
+  order: 2;
+}
+
+.order-3 {
+  order: 3;
+}
+
+.order-4 {
+  order: 4;
+}
+
+.order-5 {
+  order: 5;
+}
+
+.order-6 {
+  order: 6;
+}
+
+.order-7 {
+  order: 7;
+}
+
+.order-8 {
+  order: 8;
+}
+
+.order-9 {
+  order: 9;
+}
+
+.order-10 {
+  order: 10;
+}
+
+.order-11 {
+  order: 11;
+}
+
+.order-12 {
+  order: 12;
+}
+
+.offset-1 {
+  margin-left: 8.33333%;
+}
+
+.offset-2 {
+  margin-left: 16.66667%;
+}
+
+.offset-3 {
+  margin-left: 25%;
+}
+
+.offset-4 {
+  margin-left: 33.33333%;
+}
+
+.offset-5 {
+  margin-left: 41.66667%;
+}
+
+.offset-6 {
+  margin-left: 50%;
+}
+
+.offset-7 {
+  margin-left: 58.33333%;
+}
+
+.offset-8 {
+  margin-left: 66.66667%;
+}
+
+.offset-9 {
+  margin-left: 75%;
+}
+
+.offset-10 {
+  margin-left: 83.33333%;
+}
+
+.offset-11 {
+  margin-left: 91.66667%;
+}
+
+@media (min-width: 576px) {
+  .col-sm {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .row-cols-sm-1 > * {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-sm-2 > * {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-sm-3 > * {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .row-cols-sm-4 > * {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-sm-5 > * {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-sm-6 > * {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-sm-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-sm-1 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+  }
+  .col-sm-2 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-sm-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-sm-4 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .col-sm-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+  }
+  .col-sm-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-sm-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+  }
+  .col-sm-8 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
+  }
+  .col-sm-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-sm-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+  }
+  .col-sm-11 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
+  }
+  .col-sm-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-sm-first {
+    order: -1;
+  }
+  .order-sm-last {
+    order: 13;
+  }
+  .order-sm-0 {
+    order: 0;
+  }
+  .order-sm-1 {
+    order: 1;
+  }
+  .order-sm-2 {
+    order: 2;
+  }
+  .order-sm-3 {
+    order: 3;
+  }
+  .order-sm-4 {
+    order: 4;
+  }
+  .order-sm-5 {
+    order: 5;
+  }
+  .order-sm-6 {
+    order: 6;
+  }
+  .order-sm-7 {
+    order: 7;
+  }
+  .order-sm-8 {
+    order: 8;
+  }
+  .order-sm-9 {
+    order: 9;
+  }
+  .order-sm-10 {
+    order: 10;
+  }
+  .order-sm-11 {
+    order: 11;
+  }
+  .order-sm-12 {
+    order: 12;
+  }
+  .offset-sm-0 {
+    margin-left: 0;
+  }
+  .offset-sm-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-sm-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-sm-3 {
+    margin-left: 25%;
+  }
+  .offset-sm-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-sm-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-sm-6 {
+    margin-left: 50%;
+  }
+  .offset-sm-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-sm-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-sm-9 {
+    margin-left: 75%;
+  }
+  .offset-sm-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-sm-11 {
+    margin-left: 91.66667%;
+  }
+}
+
+@media (min-width: 768px) {
+  .col-md {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .row-cols-md-1 > * {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-md-2 > * {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-md-3 > * {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .row-cols-md-4 > * {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-md-5 > * {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-md-6 > * {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-md-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-md-1 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+  }
+  .col-md-2 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-md-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-md-4 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .col-md-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+  }
+  .col-md-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-md-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+  }
+  .col-md-8 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
+  }
+  .col-md-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-md-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+  }
+  .col-md-11 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
+  }
+  .col-md-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-md-first {
+    order: -1;
+  }
+  .order-md-last {
+    order: 13;
+  }
+  .order-md-0 {
+    order: 0;
+  }
+  .order-md-1 {
+    order: 1;
+  }
+  .order-md-2 {
+    order: 2;
+  }
+  .order-md-3 {
+    order: 3;
+  }
+  .order-md-4 {
+    order: 4;
+  }
+  .order-md-5 {
+    order: 5;
+  }
+  .order-md-6 {
+    order: 6;
+  }
+  .order-md-7 {
+    order: 7;
+  }
+  .order-md-8 {
+    order: 8;
+  }
+  .order-md-9 {
+    order: 9;
+  }
+  .order-md-10 {
+    order: 10;
+  }
+  .order-md-11 {
+    order: 11;
+  }
+  .order-md-12 {
+    order: 12;
+  }
+  .offset-md-0 {
+    margin-left: 0;
+  }
+  .offset-md-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-md-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-md-3 {
+    margin-left: 25%;
+  }
+  .offset-md-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-md-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-md-6 {
+    margin-left: 50%;
+  }
+  .offset-md-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-md-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-md-9 {
+    margin-left: 75%;
+  }
+  .offset-md-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-md-11 {
+    margin-left: 91.66667%;
+  }
+}
+
+@media (min-width: 992px) {
+  .col-lg {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .row-cols-lg-1 > * {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-lg-2 > * {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-lg-3 > * {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .row-cols-lg-4 > * {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-lg-5 > * {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-lg-6 > * {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-lg-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-lg-1 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+  }
+  .col-lg-2 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-lg-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-lg-4 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .col-lg-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+  }
+  .col-lg-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-lg-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+  }
+  .col-lg-8 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
+  }
+  .col-lg-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-lg-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+  }
+  .col-lg-11 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
+  }
+  .col-lg-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-lg-first {
+    order: -1;
+  }
+  .order-lg-last {
+    order: 13;
+  }
+  .order-lg-0 {
+    order: 0;
+  }
+  .order-lg-1 {
+    order: 1;
+  }
+  .order-lg-2 {
+    order: 2;
+  }
+  .order-lg-3 {
+    order: 3;
+  }
+  .order-lg-4 {
+    order: 4;
+  }
+  .order-lg-5 {
+    order: 5;
+  }
+  .order-lg-6 {
+    order: 6;
+  }
+  .order-lg-7 {
+    order: 7;
+  }
+  .order-lg-8 {
+    order: 8;
+  }
+  .order-lg-9 {
+    order: 9;
+  }
+  .order-lg-10 {
+    order: 10;
+  }
+  .order-lg-11 {
+    order: 11;
+  }
+  .order-lg-12 {
+    order: 12;
+  }
+  .offset-lg-0 {
+    margin-left: 0;
+  }
+  .offset-lg-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-lg-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-lg-3 {
+    margin-left: 25%;
+  }
+  .offset-lg-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-lg-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-lg-6 {
+    margin-left: 50%;
+  }
+  .offset-lg-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-lg-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-lg-9 {
+    margin-left: 75%;
+  }
+  .offset-lg-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-lg-11 {
+    margin-left: 91.66667%;
+  }
+}
+
+@media (min-width: 1200px) {
+  .col-xl {
+    flex-basis: 0;
+    flex-grow: 1;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .row-cols-xl-1 > * {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .row-cols-xl-2 > * {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .row-cols-xl-3 > * {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .row-cols-xl-4 > * {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .row-cols-xl-5 > * {
+    flex: 0 0 20%;
+    max-width: 20%;
+  }
+  .row-cols-xl-6 > * {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+  .col-xl-1 {
+    flex: 0 0 8.33333%;
+    max-width: 8.33333%;
+  }
+  .col-xl-2 {
+    flex: 0 0 16.66667%;
+    max-width: 16.66667%;
+  }
+  .col-xl-3 {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+  .col-xl-4 {
+    flex: 0 0 33.33333%;
+    max-width: 33.33333%;
+  }
+  .col-xl-5 {
+    flex: 0 0 41.66667%;
+    max-width: 41.66667%;
+  }
+  .col-xl-6 {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+  .col-xl-7 {
+    flex: 0 0 58.33333%;
+    max-width: 58.33333%;
+  }
+  .col-xl-8 {
+    flex: 0 0 66.66667%;
+    max-width: 66.66667%;
+  }
+  .col-xl-9 {
+    flex: 0 0 75%;
+    max-width: 75%;
+  }
+  .col-xl-10 {
+    flex: 0 0 83.33333%;
+    max-width: 83.33333%;
+  }
+  .col-xl-11 {
+    flex: 0 0 91.66667%;
+    max-width: 91.66667%;
+  }
+  .col-xl-12 {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .order-xl-first {
+    order: -1;
+  }
+  .order-xl-last {
+    order: 13;
+  }
+  .order-xl-0 {
+    order: 0;
+  }
+  .order-xl-1 {
+    order: 1;
+  }
+  .order-xl-2 {
+    order: 2;
+  }
+  .order-xl-3 {
+    order: 3;
+  }
+  .order-xl-4 {
+    order: 4;
+  }
+  .order-xl-5 {
+    order: 5;
+  }
+  .order-xl-6 {
+    order: 6;
+  }
+  .order-xl-7 {
+    order: 7;
+  }
+  .order-xl-8 {
+    order: 8;
+  }
+  .order-xl-9 {
+    order: 9;
+  }
+  .order-xl-10 {
+    order: 10;
+  }
+  .order-xl-11 {
+    order: 11;
+  }
+  .order-xl-12 {
+    order: 12;
+  }
+  .offset-xl-0 {
+    margin-left: 0;
+  }
+  .offset-xl-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-xl-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-xl-3 {
+    margin-left: 25%;
+  }
+  .offset-xl-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-xl-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-xl-6 {
+    margin-left: 50%;
+  }
+  .offset-xl-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-xl-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-xl-9 {
+    margin-left: 75%;
+  }
+  .offset-xl-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-xl-11 {
+    margin-left: 91.66667%;
+  }
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: #858796;
+}
+
+.table th,
+.table td {
+  padding: 0.75rem;
+  vertical-align: top;
+  border-top: 1px solid #e3e6f0;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #e3e6f0;
+}
+
+.table tbody + tbody {
+  border-top: 2px solid #e3e6f0;
+}
+
+.table-sm th,
+.table-sm td {
+  padding: 0.3rem;
+}
+
+.table-bordered {
+  border: 1px solid #e3e6f0;
+}
+
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid #e3e6f0;
+}
+
+.table-bordered thead th,
+.table-bordered thead td {
+  border-bottom-width: 2px;
+}
+
+.table-borderless th,
+.table-borderless td,
+.table-borderless thead th,
+.table-borderless tbody + tbody {
+  border: 0;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.table-hover tbody tr:hover {
+  color: #858796;
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+.table-primary,
+.table-primary > th,
+.table-primary > td {
+  background-color: #cdd8f6;
+}
+
+.table-primary th,
+.table-primary td,
+.table-primary thead th,
+.table-primary tbody + tbody {
+  border-color: #a3b6ee;
+}
+
+.table-hover .table-primary:hover {
+  background-color: #b7c7f2;
+}
+
+.table-hover .table-primary:hover > td,
+.table-hover .table-primary:hover > th {
+  background-color: #b7c7f2;
+}
+
+.table-secondary,
+.table-secondary > th,
+.table-secondary > td {
+  background-color: #dddde2;
+}
+
+.table-secondary th,
+.table-secondary td,
+.table-secondary thead th,
+.table-secondary tbody + tbody {
+  border-color: #c0c1c8;
+}
+
+.table-hover .table-secondary:hover {
+  background-color: #cfcfd6;
+}
+
+.table-hover .table-secondary:hover > td,
+.table-hover .table-secondary:hover > th {
+  background-color: #cfcfd6;
+}
+
+.table-success,
+.table-success > th,
+.table-success > td {
+  background-color: #bff0de;
+}
+
+.table-success th,
+.table-success td,
+.table-success thead th,
+.table-success tbody + tbody {
+  border-color: #89e2c2;
+}
+
+.table-hover .table-success:hover {
+  background-color: #aaebd3;
+}
+
+.table-hover .table-success:hover > td,
+.table-hover .table-success:hover > th {
+  background-color: #aaebd3;
+}
+
+.table-info,
+.table-info > th,
+.table-info > td {
+  background-color: #c7ebf1;
+}
+
+.table-info th,
+.table-info td,
+.table-info thead th,
+.table-info tbody + tbody {
+  border-color: #96dbe4;
+}
+
+.table-hover .table-info:hover {
+  background-color: #b3e4ec;
+}
+
+.table-hover .table-info:hover > td,
+.table-hover .table-info:hover > th {
+  background-color: #b3e4ec;
+}
+
+.table-warning,
+.table-warning > th,
+.table-warning > td {
+  background-color: #fceec9;
+}
+
+.table-warning th,
+.table-warning td,
+.table-warning thead th,
+.table-warning tbody + tbody {
+  border-color: #fadf9b;
+}
+
+.table-hover .table-warning:hover {
+  background-color: #fbe6b1;
+}
+
+.table-hover .table-warning:hover > td,
+.table-hover .table-warning:hover > th {
+  background-color: #fbe6b1;
+}
+
+.table-danger,
+.table-danger > th,
+.table-danger > td {
+  background-color: #f8ccc8;
+}
+
+.table-danger th,
+.table-danger td,
+.table-danger thead th,
+.table-danger tbody + tbody {
+  border-color: #f3a199;
+}
+
+.table-hover .table-danger:hover {
+  background-color: #f5b7b1;
+}
+
+.table-hover .table-danger:hover > td,
+.table-hover .table-danger:hover > th {
+  background-color: #f5b7b1;
+}
+
+.table-light,
+.table-light > th,
+.table-light > td {
+  background-color: #fdfdfe;
+}
+
+.table-light th,
+.table-light td,
+.table-light thead th,
+.table-light tbody + tbody {
+  border-color: #fbfcfd;
+}
+
+.table-hover .table-light:hover {
+  background-color: #ececf6;
+}
+
+.table-hover .table-light:hover > td,
+.table-hover .table-light:hover > th {
+  background-color: #ececf6;
+}
+
+.table-dark,
+.table-dark > th,
+.table-dark > td {
+  background-color: #d1d1d5;
+}
+
+.table-dark th,
+.table-dark td,
+.table-dark thead th,
+.table-dark tbody + tbody {
+  border-color: #a9aab1;
+}
+
+.table-hover .table-dark:hover {
+  background-color: #c4c4c9;
+}
+
+.table-hover .table-dark:hover > td,
+.table-hover .table-dark:hover > th {
+  background-color: #c4c4c9;
+}
+
+.table-active,
+.table-active > th,
+.table-active > td {
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+.table-hover .table-active:hover {
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+.table-hover .table-active:hover > td,
+.table-hover .table-active:hover > th {
+  background-color: rgba(0, 0, 0, 0.075);
+}
+
+.table .thead-dark th {
+  color: #fff;
+  background-color: #5a5c69;
+  border-color: #6c6e7e;
+}
+
+.table .thead-light th {
+  color: #6e707e;
+  background-color: #eaecf4;
+  border-color: #e3e6f0;
+}
+
+.table-dark {
+  color: #fff;
+  background-color: #5a5c69;
+}
+
+.table-dark th,
+.table-dark td,
+.table-dark thead th {
+  border-color: #6c6e7e;
+}
+
+.table-dark.table-bordered {
+  border: 0;
+}
+
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.table-dark.table-hover tbody tr:hover {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.075);
+}
+
+@media (max-width: 575.98px) {
+  .table-responsive-sm {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive-sm > .table-bordered {
+    border: 0;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .table-responsive-md {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive-md > .table-bordered {
+    border: 0;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .table-responsive-lg {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive-lg > .table-bordered {
+    border: 0;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .table-responsive-xl {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive-xl > .table-bordered {
+    border: 0;
+  }
+}
+
+.table-responsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive > .table-bordered {
+  border: 0;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e707e;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #d1d3e2;
+  border-radius: 0.35rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .form-control {
+    transition: none;
+  }
+}
+
+.form-control::-ms-expand {
+  background-color: transparent;
+  border: 0;
+}
+
+.form-control:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #6e707e;
+}
+
+.form-control:focus {
+  color: #6e707e;
+  background-color: #fff;
+  border-color: #bac8f3;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.form-control::-webkit-input-placeholder {
+  color: #858796;
+  opacity: 1;
+}
+
+.form-control::-moz-placeholder {
+  color: #858796;
+  opacity: 1;
+}
+
+.form-control:-ms-input-placeholder {
+  color: #858796;
+  opacity: 1;
+}
+
+.form-control::-ms-input-placeholder {
+  color: #858796;
+  opacity: 1;
+}
+
+.form-control::placeholder {
+  color: #858796;
+  opacity: 1;
+}
+
+.form-control:disabled, .form-control[readonly] {
+  background-color: #eaecf4;
+  opacity: 1;
+}
+
+input[type="date"].form-control,
+input[type="time"].form-control,
+input[type="datetime-local"].form-control,
+input[type="month"].form-control {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+select.form-control:focus::-ms-value {
+  color: #6e707e;
+  background-color: #fff;
+}
+
+.form-control-file,
+.form-control-range {
+  display: block;
+  width: 100%;
+}
+
+.col-form-label {
+  padding-top: calc(0.375rem + 1px);
+  padding-bottom: calc(0.375rem + 1px);
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 1.5;
+}
+
+.col-form-label-lg {
+  padding-top: calc(0.5rem + 1px);
+  padding-bottom: calc(0.5rem + 1px);
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.col-form-label-sm {
+  padding-top: calc(0.25rem + 1px);
+  padding-bottom: calc(0.25rem + 1px);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.form-control-plaintext {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0;
+  margin-bottom: 0;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #858796;
+  background-color: transparent;
+  border: solid transparent;
+  border-width: 1px 0;
+}
+
+.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.form-control-sm {
+  height: calc(1.5em + 0.5rem + 2px);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+.form-control-lg {
+  height: calc(1.5em + 1rem + 2px);
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.3rem;
+}
+
+select.form-control[size], select.form-control[multiple] {
+  height: auto;
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-text {
+  display: block;
+  margin-top: 0.25rem;
+}
+
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -5px;
+  margin-left: -5px;
+}
+
+.form-row > .col,
+.form-row > [class*="col-"] {
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+.form-check {
+  position: relative;
+  display: block;
+  padding-left: 1.25rem;
+}
+
+.form-check-input {
+  position: absolute;
+  margin-top: 0.3rem;
+  margin-left: -1.25rem;
+}
+
+.form-check-input[disabled] ~ .form-check-label,
+.form-check-input:disabled ~ .form-check-label {
+  color: #858796;
+}
+
+.form-check-label {
+  margin-bottom: 0;
+}
+
+.form-check-inline {
+  display: inline-flex;
+  align-items: center;
+  padding-left: 0;
+  margin-right: 0.75rem;
+}
+
+.form-check-inline .form-check-input {
+  position: static;
+  margin-top: 0;
+  margin-right: 0.3125rem;
+  margin-left: 0;
+}
+
+.valid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 80%;
+  color: #1cc88a;
+}
+
+.valid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: .1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #fff;
+  background-color: rgba(28, 200, 138, 0.9);
+  border-radius: 0.35rem;
+}
+
+.was-validated :valid ~ .valid-feedback,
+.was-validated :valid ~ .valid-tooltip,
+.is-valid ~ .valid-feedback,
+.is-valid ~ .valid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:valid, .form-control.is-valid {
+  border-color: #1cc88a;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
+  border-color: #1cc88a;
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
+}
+
+.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.was-validated .custom-select:valid, .custom-select.is-valid {
+  border-color: #1cc88a;
+  padding-right: calc(0.75em + 2.3125rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
+  border-color: #1cc88a;
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
+}
+
+.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
+  color: #1cc88a;
+}
+
+.was-validated .form-check-input:valid ~ .valid-feedback,
+.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
+.form-check-input.is-valid ~ .valid-tooltip {
+  display: block;
+}
+
+.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
+  color: #1cc88a;
+}
+
+.was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
+  border-color: #1cc88a;
+}
+
+.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
+  border-color: #34e3a4;
+  background-color: #34e3a4;
+}
+
+.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
+}
+
+.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: #1cc88a;
+}
+
+.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
+  border-color: #1cc88a;
+}
+
+.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
+  border-color: #1cc88a;
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
+}
+
+.invalid-feedback {
+  display: none;
+  width: 100%;
+  margin-top: 0.25rem;
+  font-size: 80%;
+  color: #e74a3b;
+}
+
+.invalid-tooltip {
+  position: absolute;
+  top: 100%;
+  z-index: 5;
+  display: none;
+  max-width: 100%;
+  padding: 0.25rem 0.5rem;
+  margin-top: .1rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #fff;
+  background-color: rgba(231, 74, 59, 0.9);
+  border-radius: 0.35rem;
+}
+
+.was-validated :invalid ~ .invalid-feedback,
+.was-validated :invalid ~ .invalid-tooltip,
+.is-invalid ~ .invalid-feedback,
+.is-invalid ~ .invalid-tooltip {
+  display: block;
+}
+
+.was-validated .form-control:invalid, .form-control.is-invalid {
+  border-color: #e74a3b;
+  padding-right: calc(1.5em + 0.75rem);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74a3b' stroke='none'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
+  border-color: #e74a3b;
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
+}
+
+.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
+  padding-right: calc(1.5em + 0.75rem);
+  background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
+}
+
+.was-validated .custom-select:invalid, .custom-select.is-invalid {
+  border-color: #e74a3b;
+  padding-right: calc(0.75em + 2.3125rem);
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74a3b' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
+}
+
+.was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
+  border-color: #e74a3b;
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
+}
+
+.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
+  color: #e74a3b;
+}
+
+.was-validated .form-check-input:invalid ~ .invalid-feedback,
+.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
+.form-check-input.is-invalid ~ .invalid-tooltip {
+  display: block;
+}
+
+.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
+  color: #e74a3b;
+}
+
+.was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
+  border-color: #e74a3b;
+}
+
+.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
+  border-color: #ed7468;
+  background-color: #ed7468;
+}
+
+.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
+}
+
+.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: #e74a3b;
+}
+
+.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
+  border-color: #e74a3b;
+}
+
+.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
+  border-color: #e74a3b;
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
+}
+
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+.form-inline .form-check {
+  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .form-inline label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0;
+  }
+  .form-inline .form-group {
+    display: flex;
+    flex: 0 0 auto;
+    flex-flow: row wrap;
+    align-items: center;
+    margin-bottom: 0;
+  }
+  .form-inline .form-control {
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+  }
+  .form-inline .form-control-plaintext {
+    display: inline-block;
+  }
+  .form-inline .input-group,
+  .form-inline .custom-select {
+    width: auto;
+  }
+  .form-inline .form-check {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: auto;
+    padding-left: 0;
+  }
+  .form-inline .form-check-input {
+    position: relative;
+    flex-shrink: 0;
+    margin-top: 0;
+    margin-right: 0.25rem;
+    margin-left: 0;
+  }
+  .form-inline .custom-control {
+    align-items: center;
+    justify-content: center;
+  }
+  .form-inline .custom-control-label {
+    margin-bottom: 0;
+  }
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  color: #858796;
+  text-align: center;
+  vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.35rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+
+.btn:hover {
+  color: #858796;
+  text-decoration: none;
+}
+
+.btn:focus, .btn.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.btn.disabled, .btn:disabled {
+  opacity: 0.65;
+}
+
+.btn:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+a.btn.disabled,
+fieldset:disabled a.btn {
+  pointer-events: none;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.btn-primary:hover {
+  color: #fff;
+  background-color: #2e59d9;
+  border-color: #2653d4;
+}
+
+.btn-primary:focus, .btn-primary.focus {
+  color: #fff;
+  background-color: #2e59d9;
+  border-color: #2653d4;
+  box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
+}
+
+.btn-primary.disabled, .btn-primary:disabled {
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
+.show > .btn-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #2653d4;
+  border-color: #244ec9;
+}
+
+.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
+}
+
+.btn-secondary {
+  color: #fff;
+  background-color: #858796;
+  border-color: #858796;
+}
+
+.btn-secondary:hover {
+  color: #fff;
+  background-color: #717384;
+  border-color: #6b6d7d;
+}
+
+.btn-secondary:focus, .btn-secondary.focus {
+  color: #fff;
+  background-color: #717384;
+  border-color: #6b6d7d;
+  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
+}
+
+.btn-secondary.disabled, .btn-secondary:disabled {
+  color: #fff;
+  background-color: #858796;
+  border-color: #858796;
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle {
+  color: #fff;
+  background-color: #6b6d7d;
+  border-color: #656776;
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
+}
+
+.btn-success {
+  color: #fff;
+  background-color: #1cc88a;
+  border-color: #1cc88a;
+}
+
+.btn-success:hover {
+  color: #fff;
+  background-color: #17a673;
+  border-color: #169b6b;
+}
+
+.btn-success:focus, .btn-success.focus {
+  color: #fff;
+  background-color: #17a673;
+  border-color: #169b6b;
+  box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
+}
+
+.btn-success.disabled, .btn-success:disabled {
+  color: #fff;
+  background-color: #1cc88a;
+  border-color: #1cc88a;
+}
+
+.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
+.show > .btn-success.dropdown-toggle {
+  color: #fff;
+  background-color: #169b6b;
+  border-color: #149063;
+}
+
+.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
+.show > .btn-success.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
+}
+
+.btn-info {
+  color: #fff;
+  background-color: #36b9cc;
+  border-color: #36b9cc;
+}
+
+.btn-info:hover {
+  color: #fff;
+  background-color: #2c9faf;
+  border-color: #2a96a5;
+}
+
+.btn-info:focus, .btn-info.focus {
+  color: #fff;
+  background-color: #2c9faf;
+  border-color: #2a96a5;
+  box-shadow: 0 0 0 0.2rem rgba(84, 196, 212, 0.5);
+}
+
+.btn-info.disabled, .btn-info:disabled {
+  color: #fff;
+  background-color: #36b9cc;
+  border-color: #36b9cc;
+}
+
+.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
+.show > .btn-info.dropdown-toggle {
+  color: #fff;
+  background-color: #2a96a5;
+  border-color: #278c9b;
+}
+
+.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
+.show > .btn-info.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(84, 196, 212, 0.5);
+}
+
+.btn-warning {
+  color: #fff;
+  background-color: #f6c23e;
+  border-color: #f6c23e;
+}
+
+.btn-warning:hover {
+  color: #fff;
+  background-color: #f4b619;
+  border-color: #f4b30d;
+}
+
+.btn-warning:focus, .btn-warning.focus {
+  color: #fff;
+  background-color: #f4b619;
+  border-color: #f4b30d;
+  box-shadow: 0 0 0 0.2rem rgba(247, 203, 91, 0.5);
+}
+
+.btn-warning.disabled, .btn-warning:disabled {
+  color: #fff;
+  background-color: #f6c23e;
+  border-color: #f6c23e;
+}
+
+.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
+.show > .btn-warning.dropdown-toggle {
+  color: #fff;
+  background-color: #f4b30d;
+  border-color: #e9aa0b;
+}
+
+.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
+.show > .btn-warning.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(247, 203, 91, 0.5);
+}
+
+.btn-danger {
+  color: #fff;
+  background-color: #e74a3b;
+  border-color: #e74a3b;
+}
+
+.btn-danger:hover {
+  color: #fff;
+  background-color: #e02d1b;
+  border-color: #d52a1a;
+}
+
+.btn-danger:focus, .btn-danger.focus {
+  color: #fff;
+  background-color: #e02d1b;
+  border-color: #d52a1a;
+  box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
+}
+
+.btn-danger.disabled, .btn-danger:disabled {
+  color: #fff;
+  background-color: #e74a3b;
+  border-color: #e74a3b;
+}
+
+.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
+.show > .btn-danger.dropdown-toggle {
+  color: #fff;
+  background-color: #d52a1a;
+  border-color: #ca2819;
+}
+
+.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
+.show > .btn-danger.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
+}
+
+.btn-light {
+  color: #3a3b45;
+  background-color: #f8f9fc;
+  border-color: #f8f9fc;
+}
+
+.btn-light:hover {
+  color: #3a3b45;
+  background-color: #dde2f1;
+  border-color: #d4daed;
+}
+
+.btn-light:focus, .btn-light.focus {
+  color: #3a3b45;
+  background-color: #dde2f1;
+  border-color: #d4daed;
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
+}
+
+.btn-light.disabled, .btn-light:disabled {
+  color: #3a3b45;
+  background-color: #f8f9fc;
+  border-color: #f8f9fc;
+}
+
+.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
+.show > .btn-light.dropdown-toggle {
+  color: #3a3b45;
+  background-color: #d4daed;
+  border-color: #cbd3e9;
+}
+
+.btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
+.show > .btn-light.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
+}
+
+.btn-dark {
+  color: #fff;
+  background-color: #5a5c69;
+  border-color: #5a5c69;
+}
+
+.btn-dark:hover {
+  color: #fff;
+  background-color: #484a54;
+  border-color: #42444e;
+}
+
+.btn-dark:focus, .btn-dark.focus {
+  color: #fff;
+  background-color: #484a54;
+  border-color: #42444e;
+  box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
+}
+
+.btn-dark.disabled, .btn-dark:disabled {
+  color: #fff;
+  background-color: #5a5c69;
+  border-color: #5a5c69;
+}
+
+.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
+.show > .btn-dark.dropdown-toggle {
+  color: #fff;
+  background-color: #42444e;
+  border-color: #3d3e47;
+}
+
+.btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
+.show > .btn-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
+}
+
+.btn-outline-primary {
+  color: #4e73df;
+  border-color: #4e73df;
+}
+
+.btn-outline-primary:hover {
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.btn-outline-primary:focus, .btn-outline-primary.focus {
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
+}
+
+.btn-outline-primary.disabled, .btn-outline-primary:disabled {
+  color: #4e73df;
+  background-color: transparent;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-primary.dropdown-toggle {
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
+}
+
+.btn-outline-secondary {
+  color: #858796;
+  border-color: #858796;
+}
+
+.btn-outline-secondary:hover {
+  color: #fff;
+  background-color: #858796;
+  border-color: #858796;
+}
+
+.btn-outline-secondary:focus, .btn-outline-secondary.focus {
+  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
+}
+
+.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
+  color: #858796;
+  background-color: transparent;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+  color: #fff;
+  background-color: #858796;
+  border-color: #858796;
+}
+
+.btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-secondary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
+}
+
+.btn-outline-success {
+  color: #1cc88a;
+  border-color: #1cc88a;
+}
+
+.btn-outline-success:hover {
+  color: #fff;
+  background-color: #1cc88a;
+  border-color: #1cc88a;
+}
+
+.btn-outline-success:focus, .btn-outline-success.focus {
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
+}
+
+.btn-outline-success.disabled, .btn-outline-success:disabled {
+  color: #1cc88a;
+  background-color: transparent;
+}
+
+.btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active,
+.show > .btn-outline-success.dropdown-toggle {
+  color: #fff;
+  background-color: #1cc88a;
+  border-color: #1cc88a;
+}
+
+.btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-success.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
+}
+
+.btn-outline-info {
+  color: #36b9cc;
+  border-color: #36b9cc;
+}
+
+.btn-outline-info:hover {
+  color: #fff;
+  background-color: #36b9cc;
+  border-color: #36b9cc;
+}
+
+.btn-outline-info:focus, .btn-outline-info.focus {
+  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
+}
+
+.btn-outline-info.disabled, .btn-outline-info:disabled {
+  color: #36b9cc;
+  background-color: transparent;
+}
+
+.btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active,
+.show > .btn-outline-info.dropdown-toggle {
+  color: #fff;
+  background-color: #36b9cc;
+  border-color: #36b9cc;
+}
+
+.btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-info.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
+}
+
+.btn-outline-warning {
+  color: #f6c23e;
+  border-color: #f6c23e;
+}
+
+.btn-outline-warning:hover {
+  color: #fff;
+  background-color: #f6c23e;
+  border-color: #f6c23e;
+}
+
+.btn-outline-warning:focus, .btn-outline-warning.focus {
+  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
+}
+
+.btn-outline-warning.disabled, .btn-outline-warning:disabled {
+  color: #f6c23e;
+  background-color: transparent;
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active,
+.show > .btn-outline-warning.dropdown-toggle {
+  color: #fff;
+  background-color: #f6c23e;
+  border-color: #f6c23e;
+}
+
+.btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-warning.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
+}
+
+.btn-outline-danger {
+  color: #e74a3b;
+  border-color: #e74a3b;
+}
+
+.btn-outline-danger:hover {
+  color: #fff;
+  background-color: #e74a3b;
+  border-color: #e74a3b;
+}
+
+.btn-outline-danger:focus, .btn-outline-danger.focus {
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
+}
+
+.btn-outline-danger.disabled, .btn-outline-danger:disabled {
+  color: #e74a3b;
+  background-color: transparent;
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active,
+.show > .btn-outline-danger.dropdown-toggle {
+  color: #fff;
+  background-color: #e74a3b;
+  border-color: #e74a3b;
+}
+
+.btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-danger.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
+}
+
+.btn-outline-light {
+  color: #f8f9fc;
+  border-color: #f8f9fc;
+}
+
+.btn-outline-light:hover {
+  color: #3a3b45;
+  background-color: #f8f9fc;
+  border-color: #f8f9fc;
+}
+
+.btn-outline-light:focus, .btn-outline-light.focus {
+  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
+}
+
+.btn-outline-light.disabled, .btn-outline-light:disabled {
+  color: #f8f9fc;
+  background-color: transparent;
+}
+
+.btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
+.show > .btn-outline-light.dropdown-toggle {
+  color: #3a3b45;
+  background-color: #f8f9fc;
+  border-color: #f8f9fc;
+}
+
+.btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-light.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
+}
+
+.btn-outline-dark {
+  color: #5a5c69;
+  border-color: #5a5c69;
+}
+
+.btn-outline-dark:hover {
+  color: #fff;
+  background-color: #5a5c69;
+  border-color: #5a5c69;
+}
+
+.btn-outline-dark:focus, .btn-outline-dark.focus {
+  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
+}
+
+.btn-outline-dark.disabled, .btn-outline-dark:disabled {
+  color: #5a5c69;
+  background-color: transparent;
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
+.show > .btn-outline-dark.dropdown-toggle {
+  color: #fff;
+  background-color: #5a5c69;
+  border-color: #5a5c69;
+}
+
+.btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
+.show > .btn-outline-dark.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
+}
+
+.btn-link {
+  font-weight: 400;
+  color: #4e73df;
+  text-decoration: none;
+}
+
+.btn-link:hover {
+  color: #224abe;
+  text-decoration: underline;
+}
+
+.btn-link:focus, .btn-link.focus {
+  text-decoration: underline;
+}
+
+.btn-link:disabled, .btn-link.disabled {
+  color: #858796;
+  pointer-events: none;
+}
+
+.btn-lg, .btn-group-lg > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.3rem;
+}
+
+.btn-sm, .btn-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+.btn-block + .btn-block {
+  margin-top: 0.5rem;
+}
+
+input[type="submit"].btn-block,
+input[type="reset"].btn-block,
+input[type="button"].btn-block {
+  width: 100%;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+}
+
+.dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0;
+  border-left: 0.3em solid transparent;
+}
+
+.dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+  min-width: 10rem;
+  padding: 0.5rem 0;
+  margin: 0.125rem 0 0;
+  font-size: 0.85rem;
+  color: #858796;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #e3e6f0;
+  border-radius: 0.35rem;
+}
+
+.dropdown-menu-left {
+  right: auto;
+  left: 0;
+}
+
+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+
+@media (min-width: 576px) {
+  .dropdown-menu-sm-left {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-sm-right {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 768px) {
+  .dropdown-menu-md-left {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-md-right {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 992px) {
+  .dropdown-menu-lg-left {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-lg-right {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media (min-width: 1200px) {
+  .dropdown-menu-xl-left {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-xl-right {
+    right: 0;
+    left: auto;
+  }
+}
+
+.dropup .dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.125rem;
+}
+
+.dropup .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0;
+  border-right: 0.3em solid transparent;
+  border-bottom: 0.3em solid;
+  border-left: 0.3em solid transparent;
+}
+
+.dropup .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropright .dropdown-menu {
+  top: 0;
+  right: auto;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 0.125rem;
+}
+
+.dropright .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid transparent;
+  border-right: 0;
+  border-bottom: 0.3em solid transparent;
+  border-left: 0.3em solid;
+}
+
+.dropright .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropright .dropdown-toggle::after {
+  vertical-align: 0;
+}
+
+.dropleft .dropdown-menu {
+  top: 0;
+  right: 100%;
+  left: auto;
+  margin-top: 0;
+  margin-right: 0.125rem;
+}
+
+.dropleft .dropdown-toggle::after {
+  display: inline-block;
+  margin-left: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+}
+
+.dropleft .dropdown-toggle::after {
+  display: none;
+}
+
+.dropleft .dropdown-toggle::before {
+  display: inline-block;
+  margin-right: 0.255em;
+  vertical-align: 0.255em;
+  content: "";
+  border-top: 0.3em solid transparent;
+  border-right: 0.3em solid;
+  border-bottom: 0.3em solid transparent;
+}
+
+.dropleft .dropdown-toggle:empty::after {
+  margin-left: 0;
+}
+
+.dropleft .dropdown-toggle::before {
+  vertical-align: 0;
+}
+
+.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
+  right: auto;
+  bottom: auto;
+}
+
+.dropdown-divider {
+  height: 0;
+  margin: 0.5rem 0;
+  overflow: hidden;
+  border-top: 1px solid #eaecf4;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.25rem 1.5rem;
+  clear: both;
+  font-weight: 400;
+  color: #3a3b45;
+  text-align: inherit;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+}
+
+.dropdown-item:hover, .dropdown-item:focus {
+  color: #2e2f37;
+  text-decoration: none;
+  background-color: #f8f9fc;
+}
+
+.dropdown-item.active, .dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: #4e73df;
+}
+
+.dropdown-item.disabled, .dropdown-item:disabled {
+  color: #858796;
+  pointer-events: none;
+  background-color: transparent;
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-header {
+  display: block;
+  padding: 0.5rem 1.5rem;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  color: #858796;
+  white-space: nowrap;
+}
+
+.dropdown-item-text {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  color: #3a3b45;
+}
+
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.btn-group > .btn,
+.btn-group-vertical > .btn {
+  position: relative;
+  flex: 1 1 auto;
+}
+
+.btn-group > .btn:hover,
+.btn-group-vertical > .btn:hover {
+  z-index: 1;
+}
+
+.btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
+.btn-group-vertical > .btn:focus,
+.btn-group-vertical > .btn:active,
+.btn-group-vertical > .btn.active {
+  z-index: 1;
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.btn-toolbar .input-group {
+  width: auto;
+}
+
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) {
+  margin-left: -1px;
+}
+
+.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group > .btn-group:not(:last-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.btn-group > .btn:not(:first-child),
+.btn-group > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dropdown-toggle-split {
+  padding-right: 0.5625rem;
+  padding-left: 0.5625rem;
+}
+
+.dropdown-toggle-split::after,
+.dropup .dropdown-toggle-split::after,
+.dropright .dropdown-toggle-split::after {
+  margin-left: 0;
+}
+
+.dropleft .dropdown-toggle-split::before {
+  margin-right: 0;
+}
+
+.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+}
+
+.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.btn-group-vertical > .btn,
+.btn-group-vertical > .btn-group {
+  width: 100%;
+}
+
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) {
+  margin-top: -1px;
+}
+
+.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
+.btn-group-vertical > .btn-group:not(:last-child) > .btn {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.btn-group-vertical > .btn:not(:first-child),
+.btn-group-vertical > .btn-group:not(:first-child) > .btn {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.btn-group-toggle > .btn,
+.btn-group-toggle > .btn-group > .btn {
+  margin-bottom: 0;
+}
+
+.btn-group-toggle > .btn input[type="radio"],
+.btn-group-toggle > .btn input[type="checkbox"],
+.btn-group-toggle > .btn-group > .btn input[type="radio"],
+.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+
+.input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  width: 100%;
+}
+
+.input-group > .form-control,
+.input-group > .form-control-plaintext,
+.input-group > .custom-select,
+.input-group > .custom-file {
+  position: relative;
+  flex: 1 1 auto;
+  width: 1%;
+  min-width: 0;
+  margin-bottom: 0;
+}
+
+.input-group > .form-control + .form-control,
+.input-group > .form-control + .custom-select,
+.input-group > .form-control + .custom-file,
+.input-group > .form-control-plaintext + .form-control,
+.input-group > .form-control-plaintext + .custom-select,
+.input-group > .form-control-plaintext + .custom-file,
+.input-group > .custom-select + .form-control,
+.input-group > .custom-select + .custom-select,
+.input-group > .custom-select + .custom-file,
+.input-group > .custom-file + .form-control,
+.input-group > .custom-file + .custom-select,
+.input-group > .custom-file + .custom-file {
+  margin-left: -1px;
+}
+
+.input-group > .form-control:focus,
+.input-group > .custom-select:focus,
+.input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
+  z-index: 3;
+}
+
+.input-group > .custom-file .custom-file-input:focus {
+  z-index: 4;
+}
+
+.input-group > .form-control:not(:last-child),
+.input-group > .custom-select:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .form-control:not(:first-child),
+.input-group > .custom-select:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group > .custom-file {
+  display: flex;
+  align-items: center;
+}
+
+.input-group > .custom-file:not(:last-child) .custom-file-label,
+.input-group > .custom-file:not(:last-child) .custom-file-label::after {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .custom-file:not(:first-child) .custom-file-label {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group-prepend,
+.input-group-append {
+  display: flex;
+}
+
+.input-group-prepend .btn,
+.input-group-append .btn {
+  position: relative;
+  z-index: 2;
+}
+
+.input-group-prepend .btn:focus,
+.input-group-append .btn:focus {
+  z-index: 3;
+}
+
+.input-group-prepend .btn + .btn,
+.input-group-prepend .btn + .input-group-text,
+.input-group-prepend .input-group-text + .input-group-text,
+.input-group-prepend .input-group-text + .btn,
+.input-group-append .btn + .btn,
+.input-group-append .btn + .input-group-text,
+.input-group-append .input-group-text + .input-group-text,
+.input-group-append .input-group-text + .btn {
+  margin-left: -1px;
+}
+
+.input-group-prepend {
+  margin-right: -1px;
+}
+
+.input-group-append {
+  margin-left: -1px;
+}
+
+.input-group-text {
+  display: flex;
+  align-items: center;
+  padding: 0.375rem 0.75rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e707e;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #eaecf4;
+  border: 1px solid #d1d3e2;
+  border-radius: 0.35rem;
+}
+
+.input-group-text input[type="radio"],
+.input-group-text input[type="checkbox"] {
+  margin-top: 0;
+}
+
+.input-group-lg > .form-control:not(textarea),
+.input-group-lg > .custom-select {
+  height: calc(1.5em + 1rem + 2px);
+}
+
+.input-group-lg > .form-control,
+.input-group-lg > .custom-select,
+.input-group-lg > .input-group-prepend > .input-group-text,
+.input-group-lg > .input-group-append > .input-group-text,
+.input-group-lg > .input-group-prepend > .btn,
+.input-group-lg > .input-group-append > .btn {
+  padding: 0.5rem 1rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.3rem;
+}
+
+.input-group-sm > .form-control:not(textarea),
+.input-group-sm > .custom-select {
+  height: calc(1.5em + 0.5rem + 2px);
+}
+
+.input-group-sm > .form-control,
+.input-group-sm > .custom-select,
+.input-group-sm > .input-group-prepend > .input-group-text,
+.input-group-sm > .input-group-append > .input-group-text,
+.input-group-sm > .input-group-prepend > .btn,
+.input-group-sm > .input-group-append > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.2rem;
+}
+
+.input-group-lg > .custom-select,
+.input-group-sm > .custom-select {
+  padding-right: 1.75rem;
+}
+
+.input-group > .input-group-prepend > .btn,
+.input-group > .input-group-prepend > .input-group-text,
+.input-group > .input-group-append:not(:last-child) > .btn,
+.input-group > .input-group-append:not(:last-child) > .input-group-text,
+.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group > .input-group-append > .btn,
+.input-group > .input-group-append > .input-group-text,
+.input-group > .input-group-prepend:not(:first-child) > .btn,
+.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
+.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
+.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.custom-control {
+  position: relative;
+  display: block;
+  min-height: 1.5rem;
+  padding-left: 1.5rem;
+}
+
+.custom-control-inline {
+  display: inline-flex;
+  margin-right: 1rem;
+}
+
+.custom-control-input {
+  position: absolute;
+  left: 0;
+  z-index: -1;
+  width: 1rem;
+  height: 1.25rem;
+  opacity: 0;
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+  color: #fff;
+  border-color: #4e73df;
+  background-color: #4e73df;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: #bac8f3;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  color: #fff;
+  background-color: #e5ebfa;
+  border-color: #e5ebfa;
+}
+
+.custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
+  color: #858796;
+}
+
+.custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
+  background-color: #eaecf4;
+}
+
+.custom-control-label {
+  position: relative;
+  margin-bottom: 0;
+  vertical-align: top;
+}
+
+.custom-control-label::before {
+  position: absolute;
+  top: 0.25rem;
+  left: -1.5rem;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+  content: "";
+  background-color: #fff;
+  border: #b7b9cc solid 1px;
+}
+
+.custom-control-label::after {
+  position: absolute;
+  top: 0.25rem;
+  left: -1.5rem;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  content: "";
+  background: no-repeat 50% / 50% 50%;
+}
+
+.custom-checkbox .custom-control-label::before {
+  border-radius: 0.35rem;
+}
+
+.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
+}
+
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
+  border-color: #4e73df;
+  background-color: #4e73df;
+}
+
+.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
+}
+
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+  background-color: rgba(78, 115, 223, 0.5);
+}
+
+.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
+  background-color: rgba(78, 115, 223, 0.5);
+}
+
+.custom-radio .custom-control-label::before {
+  border-radius: 50%;
+}
+
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+}
+
+.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
+  background-color: rgba(78, 115, 223, 0.5);
+}
+
+.custom-switch {
+  padding-left: 2.25rem;
+}
+
+.custom-switch .custom-control-label::before {
+  left: -2.25rem;
+  width: 1.75rem;
+  pointer-events: all;
+  border-radius: 0.5rem;
+}
+
+.custom-switch .custom-control-label::after {
+  top: calc(0.25rem + 2px);
+  left: calc(-2.25rem + 2px);
+  width: calc(1rem - 4px);
+  height: calc(1rem - 4px);
+  background-color: #b7b9cc;
+  border-radius: 0.5rem;
+  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-switch .custom-control-label::after {
+    transition: none;
+  }
+}
+
+.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
+  background-color: #fff;
+  transform: translateX(0.75rem);
+}
+
+.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
+  background-color: rgba(78, 115, 223, 0.5);
+}
+
+.custom-select {
+  display: inline-block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e707e;
+  vertical-align: middle;
+  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  border: 1px solid #d1d3e2;
+  border-radius: 0.35rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.custom-select:focus {
+  border-color: #bac8f3;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-select:focus::-ms-value {
+  color: #6e707e;
+  background-color: #fff;
+}
+
+.custom-select[multiple], .custom-select[size]:not([size="1"]) {
+  height: auto;
+  padding-right: 0.75rem;
+  background-image: none;
+}
+
+.custom-select:disabled {
+  color: #858796;
+  background-color: #eaecf4;
+}
+
+.custom-select::-ms-expand {
+  display: none;
+}
+
+.custom-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 #6e707e;
+}
+
+.custom-select-sm {
+  height: calc(1.5em + 0.5rem + 2px);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.custom-select-lg {
+  height: calc(1.5em + 1rem + 2px);
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  font-size: 1.25rem;
+}
+
+.custom-file {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  margin-bottom: 0;
+}
+
+.custom-file-input {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  margin: 0;
+  opacity: 0;
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+  border-color: #bac8f3;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-file-input[disabled] ~ .custom-file-label,
+.custom-file-input:disabled ~ .custom-file-label {
+  background-color: #eaecf4;
+}
+
+.custom-file-input:lang(en) ~ .custom-file-label::after {
+  content: "Browse";
+}
+
+.custom-file-input ~ .custom-file-label[data-browse]::after {
+  content: attr(data-browse);
+}
+
+.custom-file-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e707e;
+  background-color: #fff;
+  border: 1px solid #d1d3e2;
+  border-radius: 0.35rem;
+}
+
+.custom-file-label::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
+  display: block;
+  height: calc(1.5em + 0.75rem);
+  padding: 0.375rem 0.75rem;
+  line-height: 1.5;
+  color: #6e707e;
+  content: "Browse";
+  background-color: #eaecf4;
+  border-left: inherit;
+  border-radius: 0 0.35rem 0.35rem 0;
+}
+
+.custom-range {
+  width: 100%;
+  height: 1.4rem;
+  padding: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.custom-range:focus {
+  outline: none;
+}
+
+.custom-range:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-range:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-range:focus::-ms-thumb {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.custom-range::-moz-focus-outer {
+  border: 0;
+}
+
+.custom-range::-webkit-slider-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background-color: #4e73df;
+  border: 0;
+  border-radius: 1rem;
+  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-range::-webkit-slider-thumb {
+    -webkit-transition: none;
+    transition: none;
+  }
+}
+
+.custom-range::-webkit-slider-thumb:active {
+  background-color: #e5ebfa;
+}
+
+.custom-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: #dddfeb;
+  border-color: transparent;
+  border-radius: 1rem;
+}
+
+.custom-range::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background-color: #4e73df;
+  border: 0;
+  border-radius: 1rem;
+  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-range::-moz-range-thumb {
+    -moz-transition: none;
+    transition: none;
+  }
+}
+
+.custom-range::-moz-range-thumb:active {
+  background-color: #e5ebfa;
+}
+
+.custom-range::-moz-range-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: #dddfeb;
+  border-color: transparent;
+  border-radius: 1rem;
+}
+
+.custom-range::-ms-thumb {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0;
+  margin-right: 0.2rem;
+  margin-left: 0.2rem;
+  background-color: #4e73df;
+  border: 0;
+  border-radius: 1rem;
+  -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  appearance: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-range::-ms-thumb {
+    -ms-transition: none;
+    transition: none;
+  }
+}
+
+.custom-range::-ms-thumb:active {
+  background-color: #e5ebfa;
+}
+
+.custom-range::-ms-track {
+  width: 100%;
+  height: 0.5rem;
+  color: transparent;
+  cursor: pointer;
+  background-color: transparent;
+  border-color: transparent;
+  border-width: 0.5rem;
+}
+
+.custom-range::-ms-fill-lower {
+  background-color: #dddfeb;
+  border-radius: 1rem;
+}
+
+.custom-range::-ms-fill-upper {
+  margin-right: 15px;
+  background-color: #dddfeb;
+  border-radius: 1rem;
+}
+
+.custom-range:disabled::-webkit-slider-thumb {
+  background-color: #b7b9cc;
+}
+
+.custom-range:disabled::-webkit-slider-runnable-track {
+  cursor: default;
+}
+
+.custom-range:disabled::-moz-range-thumb {
+  background-color: #b7b9cc;
+}
+
+.custom-range:disabled::-moz-range-track {
+  cursor: default;
+}
+
+.custom-range:disabled::-ms-thumb {
+  background-color: #b7b9cc;
+}
+
+.custom-control-label::before,
+.custom-file-label,
+.custom-select {
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .custom-control-label::before,
+  .custom-file-label,
+  .custom-select {
+    transition: none;
+  }
+}
+
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+}
+
+.nav-link:hover, .nav-link:focus {
+  text-decoration: none;
+}
+
+.nav-link.disabled {
+  color: #858796;
+  pointer-events: none;
+  cursor: default;
+}
+
+.nav-tabs {
+  border-bottom: 1px solid #dddfeb;
+}
+
+.nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
+.nav-tabs .nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: 0.35rem;
+  border-top-right-radius: 0.35rem;
+}
+
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
+  border-color: #eaecf4 #eaecf4 #dddfeb;
+}
+
+.nav-tabs .nav-link.disabled {
+  color: #858796;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  color: #6e707e;
+  background-color: #fff;
+  border-color: #dddfeb #dddfeb #fff;
+}
+
+.nav-tabs .dropdown-menu {
+  margin-top: -1px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.nav-pills .nav-link {
+  border-radius: 0.35rem;
+}
+
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link {
+  color: #fff;
+  background-color: #4e73df;
+}
+
+.nav-fill .nav-item {
+  flex: 1 1 auto;
+  text-align: center;
+}
+
+.nav-justified .nav-item {
+  flex-basis: 0;
+  flex-grow: 1;
+  text-align: center;
+}
+
+.tab-content > .tab-pane {
+  display: none;
+}
+
+.tab-content > .active {
+  display: block;
+}
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+}
+
+.navbar .container,
+.navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.navbar-brand {
+  display: inline-block;
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  line-height: inherit;
+  white-space: nowrap;
+}
+
+.navbar-brand:hover, .navbar-brand:focus {
+  text-decoration: none;
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navbar-nav .nav-link {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.navbar-nav .dropdown-menu {
+  position: static;
+  float: none;
+}
+
+.navbar-text {
+  display: inline-block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 0.35rem;
+}
+
+.navbar-toggler:hover, .navbar-toggler:focus {
+  text-decoration: none;
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: no-repeat center center;
+  background-size: 100% 100%;
+}
+
+@media (max-width: 575.98px) {
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-sm .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-sm .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-sm > .container,
+  .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .navbar-expand-md > .container,
+  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 768px) {
+  .navbar-expand-md {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-md .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-md .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-md .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-md > .container,
+  .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-md .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-md .navbar-toggler {
+    display: none;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .navbar-expand-lg > .container,
+  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .navbar-expand-lg {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-lg .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-lg .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-lg .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-lg > .container,
+  .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-lg .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-lg .navbar-toggler {
+    display: none;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .navbar-expand-xl > .container,
+  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 1200px) {
+  .navbar-expand-xl {
+    flex-flow: row nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xl > .container,
+  .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
+    flex-wrap: nowrap;
+  }
+  .navbar-expand-xl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xl .navbar-toggler {
+    display: none;
+  }
+}
+
+.navbar-expand {
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+}
+
+.navbar-expand > .container,
+.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.navbar-expand .navbar-nav {
+  flex-direction: row;
+}
+
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+}
+
+.navbar-expand .navbar-nav .nav-link {
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.navbar-expand > .container,
+.navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
+  flex-wrap: nowrap;
+}
+
+.navbar-expand .navbar-collapse {
+  display: flex !important;
+  flex-basis: auto;
+}
+
+.navbar-expand .navbar-toggler {
+  display: none;
+}
+
+.navbar-light .navbar-brand {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-light .navbar-nav .nav-link {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.navbar-light .navbar-nav .nav-link.disabled {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.navbar-light .navbar-nav .show > .nav-link,
+.navbar-light .navbar-nav .active > .nav-link,
+.navbar-light .navbar-nav .nav-link.show,
+.navbar-light .navbar-nav .nav-link.active {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-light .navbar-toggler {
+  color: rgba(0, 0, 0, 0.5);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.navbar-light .navbar-text {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.navbar-light .navbar-text a {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
+  color: rgba(0, 0, 0, 0.9);
+}
+
+.navbar-dark .navbar-brand {
+  color: #fff;
+}
+
+.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
+  color: #fff;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.navbar-dark .navbar-nav .nav-link.disabled {
+  color: rgba(255, 255, 255, 0.25);
+}
+
+.navbar-dark .navbar-nav .show > .nav-link,
+.navbar-dark .navbar-nav .active > .nav-link,
+.navbar-dark .navbar-nav .nav-link.show,
+.navbar-dark .navbar-nav .nav-link.active {
+  color: #fff;
+}
+
+.navbar-dark .navbar-toggler {
+  color: rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.navbar-dark .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.navbar-dark .navbar-text {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.navbar-dark .navbar-text a {
+  color: #fff;
+}
+
+.navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
+  color: #fff;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: border-box;
+  border: 1px solid #e3e6f0;
+  border-radius: 0.35rem;
+}
+
+.card > hr {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.card > .list-group {
+  border-top: inherit;
+  border-bottom: inherit;
+}
+
+.card > .list-group:first-child {
+  border-top-width: 0;
+  border-top-left-radius: calc(0.35rem - 1px);
+  border-top-right-radius: calc(0.35rem - 1px);
+}
+
+.card > .list-group:last-child {
+  border-bottom-width: 0;
+  border-bottom-right-radius: calc(0.35rem - 1px);
+  border-bottom-left-radius: calc(0.35rem - 1px);
+}
+
+.card-body {
+  flex: 1 1 auto;
+  min-height: 1px;
+  padding: 1.25rem;
+}
+
+.card-title {
+  margin-bottom: 0.75rem;
+}
+
+.card-subtitle {
+  margin-top: -0.375rem;
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link:hover {
+  text-decoration: none;
+}
+
+.card-link + .card-link {
+  margin-left: 1.25rem;
+}
+
+.card-header {
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 0;
+  background-color: #f8f9fc;
+  border-bottom: 1px solid #e3e6f0;
+}
+
+.card-header:first-child {
+  border-radius: calc(0.35rem - 1px) calc(0.35rem - 1px) 0 0;
+}
+
+.card-header + .list-group .list-group-item:first-child {
+  border-top: 0;
+}
+
+.card-footer {
+  padding: 0.75rem 1.25rem;
+  background-color: #f8f9fc;
+  border-top: 1px solid #e3e6f0;
+}
+
+.card-footer:last-child {
+  border-radius: 0 0 calc(0.35rem - 1px) calc(0.35rem - 1px);
+}
+
+.card-header-tabs {
+  margin-right: -0.625rem;
+  margin-bottom: -0.75rem;
+  margin-left: -0.625rem;
+  border-bottom: 0;
+}
+
+.card-header-pills {
+  margin-right: -0.625rem;
+  margin-left: -0.625rem;
+}
+
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem;
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.card-img,
+.card-img-top {
+  border-top-left-radius: calc(0.35rem - 1px);
+  border-top-right-radius: calc(0.35rem - 1px);
+}
+
+.card-img,
+.card-img-bottom {
+  border-bottom-right-radius: calc(0.35rem - 1px);
+  border-bottom-left-radius: calc(0.35rem - 1px);
+}
+
+.card-deck .card {
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 576px) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .card-deck .card {
+    flex: 1 0 0%;
+    margin-right: 0.75rem;
+    margin-bottom: 0;
+    margin-left: 0.75rem;
+  }
+}
+
+.card-group > .card {
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 576px) {
+  .card-group {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  .card-group > .card {
+    flex: 1 0 0%;
+    margin-bottom: 0;
+  }
+  .card-group > .card + .card {
+    margin-left: 0;
+    border-left: 0;
+  }
+  .card-group > .card:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-top,
+  .card-group > .card:not(:last-child) .card-header {
+    border-top-right-radius: 0;
+  }
+  .card-group > .card:not(:last-child) .card-img-bottom,
+  .card-group > .card:not(:last-child) .card-footer {
+    border-bottom-right-radius: 0;
+  }
+  .card-group > .card:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-top,
+  .card-group > .card:not(:first-child) .card-header {
+    border-top-left-radius: 0;
+  }
+  .card-group > .card:not(:first-child) .card-img-bottom,
+  .card-group > .card:not(:first-child) .card-footer {
+    border-bottom-left-radius: 0;
+  }
+}
+
+.card-columns .card {
+  margin-bottom: 0.75rem;
+}
+
+@media (min-width: 576px) {
+  .card-columns {
+    -moz-column-count: 3;
+    column-count: 3;
+    -moz-column-gap: 1.25rem;
+    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1;
+  }
+  .card-columns .card {
+    display: inline-block;
+    width: 100%;
+  }
+}
+
+.accordion > .card {
+  overflow: hidden;
+}
+
+.accordion > .card:not(:last-of-type) {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.accordion > .card:not(:first-of-type) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.accordion > .card > .card-header {
+  border-radius: 0;
+  margin-bottom: -1px;
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  background-color: #eaecf4;
+  border-radius: 0.35rem;
+}
+
+.breadcrumb-item {
+  display: flex;
+}
+
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.5rem;
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  display: inline-block;
+  padding-right: 0.5rem;
+  color: #858796;
+  content: "/";
+}
+
+.breadcrumb-item + .breadcrumb-item:hover::before {
+  text-decoration: underline;
+}
+
+.breadcrumb-item + .breadcrumb-item:hover::before {
+  text-decoration: none;
+}
+
+.breadcrumb-item.active {
+  color: #858796;
+}
+
+.pagination {
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+  border-radius: 0.35rem;
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: 0.5rem 0.75rem;
+  margin-left: -1px;
+  line-height: 1.25;
+  color: #4e73df;
+  background-color: #fff;
+  border: 1px solid #dddfeb;
+}
+
+.page-link:hover {
+  z-index: 2;
+  color: #224abe;
+  text-decoration: none;
+  background-color: #eaecf4;
+  border-color: #dddfeb;
+}
+
+.page-link:focus {
+  z-index: 3;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
+}
+
+.page-item:first-child .page-link {
+  margin-left: 0;
+  border-top-left-radius: 0.35rem;
+  border-bottom-left-radius: 0.35rem;
+}
+
+.page-item:last-child .page-link {
+  border-top-right-radius: 0.35rem;
+  border-bottom-right-radius: 0.35rem;
+}
+
+.page-item.active .page-link {
+  z-index: 3;
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.page-item.disabled .page-link {
+  color: #858796;
+  pointer-events: none;
+  cursor: auto;
+  background-color: #fff;
+  border-color: #dddfeb;
+}
+
+.pagination-lg .page-link {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+.pagination-lg .page-item:first-child .page-link {
+  border-top-left-radius: 0.3rem;
+  border-bottom-left-radius: 0.3rem;
+}
+
+.pagination-lg .page-item:last-child .page-link {
+  border-top-right-radius: 0.3rem;
+  border-bottom-right-radius: 0.3rem;
+}
+
+.pagination-sm .page-link {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.pagination-sm .page-item:first-child .page-link {
+  border-top-left-radius: 0.2rem;
+  border-bottom-left-radius: 0.2rem;
+}
+
+.pagination-sm .page-item:last-child .page-link {
+  border-top-right-radius: 0.2rem;
+  border-bottom-right-radius: 0.2rem;
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.4em;
+  font-size: 75%;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: 0.35rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .badge {
+    transition: none;
+  }
+}
+
+a.badge:hover, a.badge:focus {
+  text-decoration: none;
+}
+
+.badge:empty {
+  display: none;
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.badge-pill {
+  padding-right: 0.6em;
+  padding-left: 0.6em;
+  border-radius: 10rem;
+}
+
+.badge-primary {
+  color: #fff;
+  background-color: #4e73df;
+}
+
+a.badge-primary:hover, a.badge-primary:focus {
+  color: #fff;
+  background-color: #2653d4;
+}
+
+a.badge-primary:focus, a.badge-primary.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
+}
+
+.badge-secondary {
+  color: #fff;
+  background-color: #858796;
+}
+
+a.badge-secondary:hover, a.badge-secondary:focus {
+  color: #fff;
+  background-color: #6b6d7d;
+}
+
+a.badge-secondary:focus, a.badge-secondary.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
+}
+
+.badge-success {
+  color: #fff;
+  background-color: #1cc88a;
+}
+
+a.badge-success:hover, a.badge-success:focus {
+  color: #fff;
+  background-color: #169b6b;
+}
+
+a.badge-success:focus, a.badge-success.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
+}
+
+.badge-info {
+  color: #fff;
+  background-color: #36b9cc;
+}
+
+a.badge-info:hover, a.badge-info:focus {
+  color: #fff;
+  background-color: #2a96a5;
+}
+
+a.badge-info:focus, a.badge-info.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
+}
+
+.badge-warning {
+  color: #fff;
+  background-color: #f6c23e;
+}
+
+a.badge-warning:hover, a.badge-warning:focus {
+  color: #fff;
+  background-color: #f4b30d;
+}
+
+a.badge-warning:focus, a.badge-warning.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
+}
+
+.badge-danger {
+  color: #fff;
+  background-color: #e74a3b;
+}
+
+a.badge-danger:hover, a.badge-danger:focus {
+  color: #fff;
+  background-color: #d52a1a;
+}
+
+a.badge-danger:focus, a.badge-danger.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
+}
+
+.badge-light {
+  color: #3a3b45;
+  background-color: #f8f9fc;
+}
+
+a.badge-light:hover, a.badge-light:focus {
+  color: #3a3b45;
+  background-color: #d4daed;
+}
+
+a.badge-light:focus, a.badge-light.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
+}
+
+.badge-dark {
+  color: #fff;
+  background-color: #5a5c69;
+}
+
+a.badge-dark:hover, a.badge-dark:focus {
+  color: #fff;
+  background-color: #42444e;
+}
+
+a.badge-dark:focus, a.badge-dark.focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
+}
+
+.jumbotron {
+  padding: 2rem 1rem;
+  margin-bottom: 2rem;
+  background-color: #eaecf4;
+  border-radius: 0.3rem;
+}
+
+@media (min-width: 576px) {
+  .jumbotron {
+    padding: 4rem 2rem;
+  }
+}
+
+.jumbotron-fluid {
+  padding-right: 0;
+  padding-left: 0;
+  border-radius: 0;
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.35rem;
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 700;
+}
+
+.alert-dismissible {
+  padding-right: 4rem;
+}
+
+.alert-dismissible .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+}
+
+.alert-primary {
+  color: #293c74;
+  background-color: #dce3f9;
+  border-color: #cdd8f6;
+}
+
+.alert-primary hr {
+  border-top-color: #b7c7f2;
+}
+
+.alert-primary .alert-link {
+  color: #1c294e;
+}
+
+.alert-secondary {
+  color: #45464e;
+  background-color: #e7e7ea;
+  border-color: #dddde2;
+}
+
+.alert-secondary hr {
+  border-top-color: #cfcfd6;
+}
+
+.alert-secondary .alert-link {
+  color: #2d2e33;
+}
+
+.alert-success {
+  color: #0f6848;
+  background-color: #d2f4e8;
+  border-color: #bff0de;
+}
+
+.alert-success hr {
+  border-top-color: #aaebd3;
+}
+
+.alert-success .alert-link {
+  color: #093b29;
+}
+
+.alert-info {
+  color: #1c606a;
+  background-color: #d7f1f5;
+  border-color: #c7ebf1;
+}
+
+.alert-info hr {
+  border-top-color: #b3e4ec;
+}
+
+.alert-info .alert-link {
+  color: #113b42;
+}
+
+.alert-warning {
+  color: #806520;
+  background-color: #fdf3d8;
+  border-color: #fceec9;
+}
+
+.alert-warning hr {
+  border-top-color: #fbe6b1;
+}
+
+.alert-warning .alert-link {
+  color: #574516;
+}
+
+.alert-danger {
+  color: #78261f;
+  background-color: #fadbd8;
+  border-color: #f8ccc8;
+}
+
+.alert-danger hr {
+  border-top-color: #f5b7b1;
+}
+
+.alert-danger .alert-link {
+  color: #4f1915;
+}
+
+.alert-light {
+  color: #818183;
+  background-color: #fefefe;
+  border-color: #fdfdfe;
+}
+
+.alert-light hr {
+  border-top-color: #ececf6;
+}
+
+.alert-light .alert-link {
+  color: #686869;
+}
+
+.alert-dark {
+  color: #2f3037;
+  background-color: #dedee1;
+  border-color: #d1d1d5;
+}
+
+.alert-dark hr {
+  border-top-color: #c4c4c9;
+}
+
+.alert-dark .alert-link {
+  color: #18181c;
+}
+
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+.progress {
+  display: flex;
+  height: 1rem;
+  overflow: hidden;
+  line-height: 0;
+  font-size: 0.75rem;
+  background-color: #eaecf4;
+  border-radius: 0.35rem;
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #4e73df;
+  transition: width 0.6s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}
+
+.progress-bar-striped {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+
+.progress-bar-animated {
+  -webkit-animation: progress-bar-stripes 1s linear infinite;
+  animation: progress-bar-stripes 1s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .progress-bar-animated {
+    -webkit-animation: none;
+    animation: none;
+  }
+}
+
+.media {
+  display: flex;
+  align-items: flex-start;
+}
+
+.media-body {
+  flex: 1;
+}
+
+.list-group {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  border-radius: 0.35rem;
+}
+
+.list-group-item-action {
+  width: 100%;
+  color: #6e707e;
+  text-align: inherit;
+}
+
+.list-group-item-action:hover, .list-group-item-action:focus {
+  z-index: 1;
+  color: #6e707e;
+  text-decoration: none;
+  background-color: #f8f9fc;
+}
+
+.list-group-item-action:active {
+  color: #858796;
+  background-color: #eaecf4;
+}
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 0.75rem 1.25rem;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.list-group-item:first-child {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.list-group-item:last-child {
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.list-group-item.disabled, .list-group-item:disabled {
+  color: #858796;
+  pointer-events: none;
+  background-color: #fff;
+}
+
+.list-group-item.active {
+  z-index: 2;
+  color: #fff;
+  background-color: #4e73df;
+  border-color: #4e73df;
+}
+
+.list-group-item + .list-group-item {
+  border-top-width: 0;
+}
+
+.list-group-item + .list-group-item.active {
+  margin-top: -1px;
+  border-top-width: 1px;
+}
+
+.list-group-horizontal {
+  flex-direction: row;
+}
+
+.list-group-horizontal > .list-group-item:first-child {
+  border-bottom-left-radius: 0.35rem;
+  border-top-right-radius: 0;
+}
+
+.list-group-horizontal > .list-group-item:last-child {
+  border-top-right-radius: 0.35rem;
+  border-bottom-left-radius: 0;
+}
+
+.list-group-horizontal > .list-group-item.active {
+  margin-top: 0;
+}
+
+.list-group-horizontal > .list-group-item + .list-group-item {
+  border-top-width: 1px;
+  border-left-width: 0;
+}
+
+.list-group-horizontal > .list-group-item + .list-group-item.active {
+  margin-left: -1px;
+  border-left-width: 1px;
+}
+
+@media (min-width: 576px) {
+  .list-group-horizontal-sm {
+    flex-direction: row;
+  }
+  .list-group-horizontal-sm > .list-group-item:first-child {
+    border-bottom-left-radius: 0.35rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item:last-child {
+    border-top-right-radius: 0.35rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
+@media (min-width: 768px) {
+  .list-group-horizontal-md {
+    flex-direction: row;
+  }
+  .list-group-horizontal-md > .list-group-item:first-child {
+    border-bottom-left-radius: 0.35rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item:last-child {
+    border-top-right-radius: 0.35rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-md > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
+@media (min-width: 992px) {
+  .list-group-horizontal-lg {
+    flex-direction: row;
+  }
+  .list-group-horizontal-lg > .list-group-item:first-child {
+    border-bottom-left-radius: 0.35rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item:last-child {
+    border-top-right-radius: 0.35rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .list-group-horizontal-xl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xl > .list-group-item:first-child {
+    border-bottom-left-radius: 0.35rem;
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item:last-child {
+    border-top-right-radius: 0.35rem;
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
+.list-group-flush {
+  border-radius: 0;
+}
+
+.list-group-flush > .list-group-item {
+  border-width: 0 0 1px;
+}
+
+.list-group-flush > .list-group-item:last-child {
+  border-bottom-width: 0;
+}
+
+.list-group-item-primary {
+  color: #293c74;
+  background-color: #cdd8f6;
+}
+
+.list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
+  color: #293c74;
+  background-color: #b7c7f2;
+}
+
+.list-group-item-primary.list-group-item-action.active {
+  color: #fff;
+  background-color: #293c74;
+  border-color: #293c74;
+}
+
+.list-group-item-secondary {
+  color: #45464e;
+  background-color: #dddde2;
+}
+
+.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
+  color: #45464e;
+  background-color: #cfcfd6;
+}
+
+.list-group-item-secondary.list-group-item-action.active {
+  color: #fff;
+  background-color: #45464e;
+  border-color: #45464e;
+}
+
+.list-group-item-success {
+  color: #0f6848;
+  background-color: #bff0de;
+}
+
+.list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
+  color: #0f6848;
+  background-color: #aaebd3;
+}
+
+.list-group-item-success.list-group-item-action.active {
+  color: #fff;
+  background-color: #0f6848;
+  border-color: #0f6848;
+}
+
+.list-group-item-info {
+  color: #1c606a;
+  background-color: #c7ebf1;
+}
+
+.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
+  color: #1c606a;
+  background-color: #b3e4ec;
+}
+
+.list-group-item-info.list-group-item-action.active {
+  color: #fff;
+  background-color: #1c606a;
+  border-color: #1c606a;
+}
+
+.list-group-item-warning {
+  color: #806520;
+  background-color: #fceec9;
+}
+
+.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
+  color: #806520;
+  background-color: #fbe6b1;
+}
+
+.list-group-item-warning.list-group-item-action.active {
+  color: #fff;
+  background-color: #806520;
+  border-color: #806520;
+}
+
+.list-group-item-danger {
+  color: #78261f;
+  background-color: #f8ccc8;
+}
+
+.list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
+  color: #78261f;
+  background-color: #f5b7b1;
+}
+
+.list-group-item-danger.list-group-item-action.active {
+  color: #fff;
+  background-color: #78261f;
+  border-color: #78261f;
+}
+
+.list-group-item-light {
+  color: #818183;
+  background-color: #fdfdfe;
+}
+
+.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
+  color: #818183;
+  background-color: #ececf6;
+}
+
+.list-group-item-light.list-group-item-action.active {
+  color: #fff;
+  background-color: #818183;
+  border-color: #818183;
+}
+
+.list-group-item-dark {
+  color: #2f3037;
+  background-color: #d1d1d5;
+}
+
+.list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
+  color: #2f3037;
+  background-color: #c4c4c9;
+}
+
+.list-group-item-dark.list-group-item-action.active {
+  color: #fff;
+  background-color: #2f3037;
+  border-color: #2f3037;
+}
+
+.close {
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+
+.close:hover {
+  color: #000;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}
+
+.toast {
+  max-width: 350px;
+  overflow: hidden;
+  font-size: 0.875rem;
+  background-color: rgba(255, 255, 255, 0.85);
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  border-radius: 0.25rem;
+}
+
+.toast:not(:last-child) {
+  margin-bottom: 0.75rem;
+}
+
+.toast.showing {
+  opacity: 1;
+}
+
+.toast.show {
+  display: block;
+  opacity: 1;
+}
+
+.toast.hide {
+  display: none;
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  color: #858796;
+  background-color: rgba(255, 255, 255, 0.85);
+  background-clip: padding-box;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.toast-body {
+  padding: 0.75rem;
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1050;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  outline: 0;
+}
+
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 0.5rem;
+  pointer-events: none;
+}
+
+.modal.fade .modal-dialog {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -50px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
+}
+
+.modal.show .modal-dialog {
+  transform: none;
+}
+
+.modal.modal-static .modal-dialog {
+  transform: scale(1.02);
+}
+
+.modal-dialog-scrollable {
+  display: flex;
+  max-height: calc(100% - 1rem);
+}
+
+.modal-dialog-scrollable .modal-content {
+  max-height: calc(100vh - 1rem);
+  overflow: hidden;
+}
+
+.modal-dialog-scrollable .modal-header,
+.modal-dialog-scrollable .modal-footer {
+  flex-shrink: 0;
+}
+
+.modal-dialog-scrollable .modal-body {
+  overflow-y: auto;
+}
+
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  min-height: calc(100% - 1rem);
+}
+
+.modal-dialog-centered::before {
+  display: block;
+  height: calc(100vh - 1rem);
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+  content: "";
+}
+
+.modal-dialog-centered.modal-dialog-scrollable {
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.modal-dialog-centered.modal-dialog-scrollable .modal-content {
+  max-height: none;
+}
+
+.modal-dialog-centered.modal-dialog-scrollable::before {
+  content: none;
+}
+
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  pointer-events: auto;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+  outline: 0;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000;
+}
+
+.modal-backdrop.fade {
+  opacity: 0;
+}
+
+.modal-backdrop.show {
+  opacity: 0.5;
+}
+
+.modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem 1rem;
+  border-bottom: 1px solid #e3e6f0;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
+}
+
+.modal-header .close {
+  padding: 1rem 1rem;
+  margin: -1rem -1rem -1rem auto;
+}
+
+.modal-title {
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.75rem;
+  border-top: 1px solid #e3e6f0;
+  border-bottom-right-radius: calc(0.3rem - 1px);
+  border-bottom-left-radius: calc(0.3rem - 1px);
+}
+
+.modal-footer > * {
+  margin: 0.25rem;
+}
+
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+@media (min-width: 576px) {
+  .modal-dialog {
+    max-width: 500px;
+    margin: 1.75rem auto;
+  }
+  .modal-dialog-scrollable {
+    max-height: calc(100% - 3.5rem);
+  }
+  .modal-dialog-scrollable .modal-content {
+    max-height: calc(100vh - 3.5rem);
+  }
+  .modal-dialog-centered {
+    min-height: calc(100% - 3.5rem);
+  }
+  .modal-dialog-centered::before {
+    height: calc(100vh - 3.5rem);
+    height: -webkit-min-content;
+    height: -moz-min-content;
+    height: min-content;
+  }
+  .modal-sm {
+    max-width: 300px;
+  }
+}
+
+@media (min-width: 992px) {
+  .modal-lg,
+  .modal-xl {
+    max-width: 800px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .modal-xl {
+    max-width: 1140px;
+  }
+}
+
+.tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  margin: 0;
+  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  opacity: 0;
+}
+
+.tooltip.show {
+  opacity: 0.9;
+}
+
+.tooltip .arrow {
+  position: absolute;
+  display: block;
+  width: 0.8rem;
+  height: 0.4rem;
+}
+
+.tooltip .arrow::before {
+  position: absolute;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+}
+
+.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
+  padding: 0.4rem 0;
+}
+
+.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
+  bottom: 0;
+}
+
+.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
+  top: 0;
+  border-width: 0.4rem 0.4rem 0;
+  border-top-color: #000;
+}
+
+.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
+  padding: 0 0.4rem;
+}
+
+.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
+  left: 0;
+  width: 0.4rem;
+  height: 0.8rem;
+}
+
+.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
+  right: 0;
+  border-width: 0.4rem 0.4rem 0.4rem 0;
+  border-right-color: #000;
+}
+
+.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
+  padding: 0.4rem 0;
+}
+
+.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
+  top: 0;
+}
+
+.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
+  bottom: 0;
+  border-width: 0 0.4rem 0.4rem;
+  border-bottom-color: #000;
+}
+
+.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
+  padding: 0 0.4rem;
+}
+
+.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
+  right: 0;
+  width: 0.4rem;
+  height: 0.8rem;
+}
+
+.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
+  left: 0;
+  border-width: 0.4rem 0 0.4rem 0.4rem;
+  border-left-color: #000;
+}
+
+.tooltip-inner {
+  max-width: 200px;
+  padding: 0.25rem 0.5rem;
+  color: #fff;
+  text-align: center;
+  background-color: #000;
+  border-radius: 0.35rem;
+}
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1060;
+  display: block;
+  max-width: 276px;
+  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.5;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
+  font-size: 0.875rem;
+  word-wrap: break-word;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 0.3rem;
+}
+
+.popover .arrow {
+  position: absolute;
+  display: block;
+  width: 1rem;
+  height: 0.5rem;
+  margin: 0 0.3rem;
+}
+
+.popover .arrow::before, .popover .arrow::after {
+  position: absolute;
+  display: block;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+}
+
+.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
+  margin-bottom: 0.5rem;
+}
+
+.bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
+  bottom: calc(-0.5rem - 1px);
+}
+
+.bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
+  bottom: 0;
+  border-width: 0.5rem 0.5rem 0;
+  border-top-color: rgba(0, 0, 0, 0.25);
+}
+
+.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
+  bottom: 1px;
+  border-width: 0.5rem 0.5rem 0;
+  border-top-color: #fff;
+}
+
+.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
+  margin-left: 0.5rem;
+}
+
+.bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
+  left: calc(-0.5rem - 1px);
+  width: 0.5rem;
+  height: 1rem;
+  margin: 0.3rem 0;
+}
+
+.bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
+  left: 0;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  border-right-color: rgba(0, 0, 0, 0.25);
+}
+
+.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
+  left: 1px;
+  border-width: 0.5rem 0.5rem 0.5rem 0;
+  border-right-color: #fff;
+}
+
+.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
+  margin-top: 0.5rem;
+}
+
+.bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
+  top: calc(-0.5rem - 1px);
+}
+
+.bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
+  top: 0;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+}
+
+.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
+  top: 1px;
+  border-width: 0 0.5rem 0.5rem 0.5rem;
+  border-bottom-color: #fff;
+}
+
+.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  display: block;
+  width: 1rem;
+  margin-left: -0.5rem;
+  content: "";
+  border-bottom: 1px solid #f7f7f7;
+}
+
+.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
+  margin-right: 0.5rem;
+}
+
+.bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
+  right: calc(-0.5rem - 1px);
+  width: 0.5rem;
+  height: 1rem;
+  margin: 0.3rem 0;
+}
+
+.bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
+  right: 0;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  border-left-color: rgba(0, 0, 0, 0.25);
+}
+
+.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
+  right: 1px;
+  border-width: 0.5rem 0 0.5rem 0.5rem;
+  border-left-color: #fff;
+}
+
+.popover-header {
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0;
+  font-size: 1rem;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  border-top-left-radius: calc(0.3rem - 1px);
+  border-top-right-radius: calc(0.3rem - 1px);
+}
+
+.popover-header:empty {
+  display: none;
+}
+
+.popover-body {
+  padding: 0.5rem 0.75rem;
+  color: #858796;
+}
+
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.carousel-inner::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transition: transform 0.6s ease-in-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-property: opacity;
+  transform: none;
+}
+
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-left,
+.carousel-fade .carousel-item-prev.carousel-item-right {
+  z-index: 1;
+  opacity: 1;
+}
+
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-right {
+  z-index: 0;
+  opacity: 0;
+  transition: opacity 0s 0.6s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-fade .active.carousel-item-left,
+  .carousel-fade .active.carousel-item-right {
+    transition: none;
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15%;
+  color: #fff;
+  text-align: center;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-control-prev,
+  .carousel-control-next {
+    transition: none;
+  }
+}
+
+.carousel-control-prev:hover, .carousel-control-prev:focus,
+.carousel-control-next:hover,
+.carousel-control-next:focus {
+  color: #fff;
+  text-decoration: none;
+  outline: 0;
+  opacity: 0.9;
+}
+
+.carousel-control-prev {
+  left: 0;
+}
+
+.carousel-control-next {
+  right: 0;
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  background: no-repeat 50% / 100% 100%;
+}
+
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin-right: 15%;
+  margin-left: 15%;
+  list-style: none;
+}
+
+.carousel-indicators li {
+  box-sizing: content-box;
+  flex: 0 1 auto;
+  width: 30px;
+  height: 3px;
+  margin-right: 3px;
+  margin-left: 3px;
+  text-indent: -999px;
+  cursor: pointer;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  opacity: .5;
+  transition: opacity 0.6s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carousel-indicators li {
+    transition: none;
+  }
+}
+
+.carousel-indicators .active {
+  opacity: 1;
+}
+
+.carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 20px;
+  left: 15%;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #fff;
+  text-align: center;
+}
+
+@-webkit-keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-border {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: text-bottom;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  -webkit-animation: spinner-border .75s linear infinite;
+  animation: spinner-border .75s linear infinite;
+}
+
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.2em;
+}
+
+@-webkit-keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.spinner-grow {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: text-bottom;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  -webkit-animation: spinner-grow .75s linear infinite;
+  animation: spinner-grow .75s linear infinite;
+}
+
+.spinner-grow-sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.bg-primary {
+  background-color: #4e73df !important;
+}
+
+a.bg-primary:hover, a.bg-primary:focus,
+button.bg-primary:hover,
+button.bg-primary:focus {
+  background-color: #2653d4 !important;
+}
+
+.bg-secondary {
+  background-color: #858796 !important;
+}
+
+a.bg-secondary:hover, a.bg-secondary:focus,
+button.bg-secondary:hover,
+button.bg-secondary:focus {
+  background-color: #6b6d7d !important;
+}
+
+.bg-success {
+  background-color: #1cc88a !important;
+}
+
+a.bg-success:hover, a.bg-success:focus,
+button.bg-success:hover,
+button.bg-success:focus {
+  background-color: #169b6b !important;
+}
+
+.bg-info {
+  background-color: #36b9cc !important;
+}
+
+a.bg-info:hover, a.bg-info:focus,
+button.bg-info:hover,
+button.bg-info:focus {
+  background-color: #2a96a5 !important;
+}
+
+.bg-warning {
+  background-color: #f6c23e !important;
+}
+
+a.bg-warning:hover, a.bg-warning:focus,
+button.bg-warning:hover,
+button.bg-warning:focus {
+  background-color: #f4b30d !important;
+}
+
+.bg-danger {
+  background-color: #e74a3b !important;
+}
+
+a.bg-danger:hover, a.bg-danger:focus,
+button.bg-danger:hover,
+button.bg-danger:focus {
+  background-color: #d52a1a !important;
+}
+
+.bg-light {
+  background-color: #f8f9fc !important;
+}
+
+a.bg-light:hover, a.bg-light:focus,
+button.bg-light:hover,
+button.bg-light:focus {
+  background-color: #d4daed !important;
+}
+
+.bg-dark {
+  background-color: #5a5c69 !important;
+}
+
+a.bg-dark:hover, a.bg-dark:focus,
+button.bg-dark:hover,
+button.bg-dark:focus {
+  background-color: #42444e !important;
+}
+
+.bg-white {
+  background-color: #fff !important;
+}
+
+.bg-transparent {
+  background-color: transparent !important;
+}
+
+.border {
+  border: 1px solid #e3e6f0 !important;
+}
+
+.border-top {
+  border-top: 1px solid #e3e6f0 !important;
+}
+
+.border-right {
+  border-right: 1px solid #e3e6f0 !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #e3e6f0 !important;
+}
+
+.border-left {
+  border-left: 1px solid #e3e6f0 !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-right-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-left-0 {
+  border-left: 0 !important;
+}
+
+.border-primary {
+  border-color: #4e73df !important;
+}
+
+.border-secondary {
+  border-color: #858796 !important;
+}
+
+.border-success {
+  border-color: #1cc88a !important;
+}
+
+.border-info {
+  border-color: #36b9cc !important;
+}
+
+.border-warning {
+  border-color: #f6c23e !important;
+}
+
+.border-danger {
+  border-color: #e74a3b !important;
+}
+
+.border-light {
+  border-color: #f8f9fc !important;
+}
+
+.border-dark {
+  border-color: #5a5c69 !important;
+}
+
+.border-white {
+  border-color: #fff !important;
+}
+
+.rounded-sm {
+  border-radius: 0.2rem !important;
+}
+
+.rounded {
+  border-radius: 0.35rem !important;
+}
+
+.rounded-top {
+  border-top-left-radius: 0.35rem !important;
+  border-top-right-radius: 0.35rem !important;
+}
+
+.rounded-right {
+  border-top-right-radius: 0.35rem !important;
+  border-bottom-right-radius: 0.35rem !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: 0.35rem !important;
+  border-bottom-left-radius: 0.35rem !important;
+}
+
+.rounded-left {
+  border-top-left-radius: 0.35rem !important;
+  border-bottom-left-radius: 0.35rem !important;
+}
+
+.rounded-lg {
+  border-radius: 0.3rem !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: 50rem !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.clearfix::after {
+  display: block;
+  clear: both;
+  content: "";
+}
+
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-table {
+  display: table !important;
+}
+
+.d-table-row {
+  display: table-row !important;
+}
+
+.d-table-cell {
+  display: table-cell !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+@media (min-width: 576px) {
+  .d-sm-none {
+    display: none !important;
+  }
+  .d-sm-inline {
+    display: inline !important;
+  }
+  .d-sm-inline-block {
+    display: inline-block !important;
+  }
+  .d-sm-block {
+    display: block !important;
+  }
+  .d-sm-table {
+    display: table !important;
+  }
+  .d-sm-table-row {
+    display: table-row !important;
+  }
+  .d-sm-table-cell {
+    display: table-cell !important;
+  }
+  .d-sm-flex {
+    display: flex !important;
+  }
+  .d-sm-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .d-md-none {
+    display: none !important;
+  }
+  .d-md-inline {
+    display: inline !important;
+  }
+  .d-md-inline-block {
+    display: inline-block !important;
+  }
+  .d-md-block {
+    display: block !important;
+  }
+  .d-md-table {
+    display: table !important;
+  }
+  .d-md-table-row {
+    display: table-row !important;
+  }
+  .d-md-table-cell {
+    display: table-cell !important;
+  }
+  .d-md-flex {
+    display: flex !important;
+  }
+  .d-md-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .d-lg-none {
+    display: none !important;
+  }
+  .d-lg-inline {
+    display: inline !important;
+  }
+  .d-lg-inline-block {
+    display: inline-block !important;
+  }
+  .d-lg-block {
+    display: block !important;
+  }
+  .d-lg-table {
+    display: table !important;
+  }
+  .d-lg-table-row {
+    display: table-row !important;
+  }
+  .d-lg-table-cell {
+    display: table-cell !important;
+  }
+  .d-lg-flex {
+    display: flex !important;
+  }
+  .d-lg-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .d-xl-none {
+    display: none !important;
+  }
+  .d-xl-inline {
+    display: inline !important;
+  }
+  .d-xl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xl-block {
+    display: block !important;
+  }
+  .d-xl-table {
+    display: table !important;
+  }
+  .d-xl-table-row {
+    display: table-row !important;
+  }
+  .d-xl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xl-flex {
+    display: flex !important;
+  }
+  .d-xl-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+@media print {
+  .d-print-none {
+    display: none !important;
+  }
+  .d-print-inline {
+    display: inline !important;
+  }
+  .d-print-inline-block {
+    display: inline-block !important;
+  }
+  .d-print-block {
+    display: block !important;
+  }
+  .d-print-table {
+    display: table !important;
+  }
+  .d-print-table-row {
+    display: table-row !important;
+  }
+  .d-print-table-cell {
+    display: table-cell !important;
+  }
+  .d-print-flex {
+    display: flex !important;
+  }
+  .d-print-inline-flex {
+    display: inline-flex !important;
+  }
+}
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+.embed-responsive::before {
+  display: block;
+  content: "";
+}
+
+.embed-responsive .embed-responsive-item,
+.embed-responsive iframe,
+.embed-responsive embed,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.embed-responsive-21by9::before {
+  padding-top: 42.85714%;
+}
+
+.embed-responsive-16by9::before {
+  padding-top: 56.25%;
+}
+
+.embed-responsive-4by3::before {
+  padding-top: 75%;
+}
+
+.embed-responsive-1by1::before {
+  padding-top: 100%;
+}
+
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
+
+.flex-column-reverse {
+  flex-direction: column-reverse !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.align-content-start {
+  align-content: flex-start !important;
+}
+
+.align-content-end {
+  align-content: flex-end !important;
+}
+
+.align-content-center {
+  align-content: center !important;
+}
+
+.align-content-between {
+  align-content: space-between !important;
+}
+
+.align-content-around {
+  align-content: space-around !important;
+}
+
+.align-content-stretch {
+  align-content: stretch !important;
+}
+
+.align-self-auto {
+  align-self: auto !important;
+}
+
+.align-self-start {
+  align-self: flex-start !important;
+}
+
+.align-self-end {
+  align-self: flex-end !important;
+}
+
+.align-self-center {
+  align-self: center !important;
+}
+
+.align-self-baseline {
+  align-self: baseline !important;
+}
+
+.align-self-stretch {
+  align-self: stretch !important;
+}
+
+@media (min-width: 576px) {
+  .flex-sm-row {
+    flex-direction: row !important;
+  }
+  .flex-sm-column {
+    flex-direction: column !important;
+  }
+  .flex-sm-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-sm-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-sm-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-sm-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-sm-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-sm-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .justify-content-sm-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-sm-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-sm-center {
+    justify-content: center !important;
+  }
+  .justify-content-sm-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-sm-around {
+    justify-content: space-around !important;
+  }
+  .align-items-sm-start {
+    align-items: flex-start !important;
+  }
+  .align-items-sm-end {
+    align-items: flex-end !important;
+  }
+  .align-items-sm-center {
+    align-items: center !important;
+  }
+  .align-items-sm-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-sm-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-sm-start {
+    align-content: flex-start !important;
+  }
+  .align-content-sm-end {
+    align-content: flex-end !important;
+  }
+  .align-content-sm-center {
+    align-content: center !important;
+  }
+  .align-content-sm-between {
+    align-content: space-between !important;
+  }
+  .align-content-sm-around {
+    align-content: space-around !important;
+  }
+  .align-content-sm-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-sm-auto {
+    align-self: auto !important;
+  }
+  .align-self-sm-start {
+    align-self: flex-start !important;
+  }
+  .align-self-sm-end {
+    align-self: flex-end !important;
+  }
+  .align-self-sm-center {
+    align-self: center !important;
+  }
+  .align-self-sm-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-sm-stretch {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .flex-md-row {
+    flex-direction: row !important;
+  }
+  .flex-md-column {
+    flex-direction: column !important;
+  }
+  .flex-md-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-md-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-md-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-md-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-md-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-md-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-md-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-md-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .justify-content-md-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-md-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-md-center {
+    justify-content: center !important;
+  }
+  .justify-content-md-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-md-around {
+    justify-content: space-around !important;
+  }
+  .align-items-md-start {
+    align-items: flex-start !important;
+  }
+  .align-items-md-end {
+    align-items: flex-end !important;
+  }
+  .align-items-md-center {
+    align-items: center !important;
+  }
+  .align-items-md-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-md-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-md-start {
+    align-content: flex-start !important;
+  }
+  .align-content-md-end {
+    align-content: flex-end !important;
+  }
+  .align-content-md-center {
+    align-content: center !important;
+  }
+  .align-content-md-between {
+    align-content: space-between !important;
+  }
+  .align-content-md-around {
+    align-content: space-around !important;
+  }
+  .align-content-md-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-md-auto {
+    align-self: auto !important;
+  }
+  .align-self-md-start {
+    align-self: flex-start !important;
+  }
+  .align-self-md-end {
+    align-self: flex-end !important;
+  }
+  .align-self-md-center {
+    align-self: center !important;
+  }
+  .align-self-md-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-md-stretch {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .flex-lg-row {
+    flex-direction: row !important;
+  }
+  .flex-lg-column {
+    flex-direction: column !important;
+  }
+  .flex-lg-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-lg-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-lg-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-lg-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-lg-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-lg-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .justify-content-lg-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-lg-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-lg-center {
+    justify-content: center !important;
+  }
+  .justify-content-lg-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-lg-around {
+    justify-content: space-around !important;
+  }
+  .align-items-lg-start {
+    align-items: flex-start !important;
+  }
+  .align-items-lg-end {
+    align-items: flex-end !important;
+  }
+  .align-items-lg-center {
+    align-items: center !important;
+  }
+  .align-items-lg-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-lg-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-lg-start {
+    align-content: flex-start !important;
+  }
+  .align-content-lg-end {
+    align-content: flex-end !important;
+  }
+  .align-content-lg-center {
+    align-content: center !important;
+  }
+  .align-content-lg-between {
+    align-content: space-between !important;
+  }
+  .align-content-lg-around {
+    align-content: space-around !important;
+  }
+  .align-content-lg-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-lg-auto {
+    align-self: auto !important;
+  }
+  .align-self-lg-start {
+    align-self: flex-start !important;
+  }
+  .align-self-lg-end {
+    align-self: flex-end !important;
+  }
+  .align-self-lg-center {
+    align-self: center !important;
+  }
+  .align-self-lg-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-lg-stretch {
+    align-self: stretch !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .flex-xl-row {
+    flex-direction: row !important;
+  }
+  .flex-xl-column {
+    flex-direction: column !important;
+  }
+  .flex-xl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xl-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .flex-xl-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .justify-content-xl-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xl-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xl-center {
+    justify-content: center !important;
+  }
+  .justify-content-xl-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xl-around {
+    justify-content: space-around !important;
+  }
+  .align-items-xl-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xl-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xl-center {
+    align-items: center !important;
+  }
+  .align-items-xl-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xl-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xl-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xl-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xl-center {
+    align-content: center !important;
+  }
+  .align-content-xl-between {
+    align-content: space-between !important;
+  }
+  .align-content-xl-around {
+    align-content: space-around !important;
+  }
+  .align-content-xl-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xl-auto {
+    align-self: auto !important;
+  }
+  .align-self-xl-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xl-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xl-center {
+    align-self: center !important;
+  }
+  .align-self-xl-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xl-stretch {
+    align-self: stretch !important;
+  }
+}
+
+.float-left {
+  float: left !important;
+}
+
+.float-right {
+  float: right !important;
+}
+
+.float-none {
+  float: none !important;
+}
+
+@media (min-width: 576px) {
+  .float-sm-left {
+    float: left !important;
+  }
+  .float-sm-right {
+    float: right !important;
+  }
+  .float-sm-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .float-md-left {
+    float: left !important;
+  }
+  .float-md-right {
+    float: right !important;
+  }
+  .float-md-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .float-lg-left {
+    float: left !important;
+  }
+  .float-lg-right {
+    float: right !important;
+  }
+  .float-lg-none {
+    float: none !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .float-xl-left {
+    float: left !important;
+  }
+  .float-xl-right {
+    float: right !important;
+  }
+  .float-xl-none {
+    float: none !important;
+  }
+}
+
+.user-select-all {
+  -webkit-user-select: all !important;
+  -moz-user-select: all !important;
+  -ms-user-select: all !important;
+  user-select: all !important;
+}
+
+.user-select-auto {
+  -webkit-user-select: auto !important;
+  -moz-user-select: auto !important;
+  -ms-user-select: auto !important;
+  user-select: auto !important;
+}
+
+.user-select-none {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+
+.overflow-auto {
+  overflow: auto !important;
+}
+
+.overflow-hidden {
+  overflow: hidden !important;
+}
+
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: -webkit-sticky !important;
+  position: sticky !important;
+}
+
+.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.fixed-bottom {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+@supports ((position: -webkit-sticky) or (position: sticky)) {
+  .sticky-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.sr-only-focusable:active, .sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2) !important;
+}
+
+.shadow {
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.w-25 {
+  width: 25% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+.mw-100 {
+  max-width: 100% !important;
+}
+
+.mh-100 {
+  max-height: 100% !important;
+}
+
+.min-vw-100 {
+  min-width: 100vw !important;
+}
+
+.min-vh-100 {
+  min-height: 100vh !important;
+}
+
+.vw-100 {
+  width: 100vw !important;
+}
+
+.vh-100 {
+  height: 100vh !important;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0,
+.my-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0,
+.mx-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0,
+.my-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0,
+.mx-0 {
+  margin-left: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.mt-1,
+.my-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1,
+.mx-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1,
+.my-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-1,
+.mx-1 {
+  margin-left: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.mt-2,
+.my-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2,
+.mx-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2,
+.my-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-2,
+.mx-2 {
+  margin-left: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.mt-3,
+.my-3 {
+  margin-top: 1rem !important;
+}
+
+.mr-3,
+.mx-3 {
+  margin-right: 1rem !important;
+}
+
+.mb-3,
+.my-3 {
+  margin-bottom: 1rem !important;
+}
+
+.ml-3,
+.mx-3 {
+  margin-left: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.mt-4,
+.my-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-4,
+.mx-4 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-4,
+.mx-4 {
+  margin-left: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.mr-5,
+.mx-5 {
+  margin-right: 3rem !important;
+}
+
+.mb-5,
+.my-5 {
+  margin-bottom: 3rem !important;
+}
+
+.ml-5,
+.mx-5 {
+  margin-left: 3rem !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0,
+.py-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0,
+.px-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0,
+.py-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0,
+.px-0 {
+  padding-left: 0 !important;
+}
+
+.p-1 {
+  padding: 0.25rem !important;
+}
+
+.pt-1,
+.py-1 {
+  padding-top: 0.25rem !important;
+}
+
+.pr-1,
+.px-1 {
+  padding-right: 0.25rem !important;
+}
+
+.pb-1,
+.py-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.pl-1,
+.px-1 {
+  padding-left: 0.25rem !important;
+}
+
+.p-2 {
+  padding: 0.5rem !important;
+}
+
+.pt-2,
+.py-2 {
+  padding-top: 0.5rem !important;
+}
+
+.pr-2,
+.px-2 {
+  padding-right: 0.5rem !important;
+}
+
+.pb-2,
+.py-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.pl-2,
+.px-2 {
+  padding-left: 0.5rem !important;
+}
+
+.p-3 {
+  padding: 1rem !important;
+}
+
+.pt-3,
+.py-3 {
+  padding-top: 1rem !important;
+}
+
+.pr-3,
+.px-3 {
+  padding-right: 1rem !important;
+}
+
+.pb-3,
+.py-3 {
+  padding-bottom: 1rem !important;
+}
+
+.pl-3,
+.px-3 {
+  padding-left: 1rem !important;
+}
+
+.p-4 {
+  padding: 1.5rem !important;
+}
+
+.pt-4,
+.py-4 {
+  padding-top: 1.5rem !important;
+}
+
+.pr-4,
+.px-4 {
+  padding-right: 1.5rem !important;
+}
+
+.pb-4,
+.py-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.pl-4,
+.px-4 {
+  padding-left: 1.5rem !important;
+}
+
+.p-5 {
+  padding: 3rem !important;
+}
+
+.pt-5,
+.py-5 {
+  padding-top: 3rem !important;
+}
+
+.pr-5,
+.px-5 {
+  padding-right: 3rem !important;
+}
+
+.pb-5,
+.py-5 {
+  padding-bottom: 3rem !important;
+}
+
+.pl-5,
+.px-5 {
+  padding-left: 3rem !important;
+}
+
+.m-n1 {
+  margin: -0.25rem !important;
+}
+
+.mt-n1,
+.my-n1 {
+  margin-top: -0.25rem !important;
+}
+
+.mr-n1,
+.mx-n1 {
+  margin-right: -0.25rem !important;
+}
+
+.mb-n1,
+.my-n1 {
+  margin-bottom: -0.25rem !important;
+}
+
+.ml-n1,
+.mx-n1 {
+  margin-left: -0.25rem !important;
+}
+
+.m-n2 {
+  margin: -0.5rem !important;
+}
+
+.mt-n2,
+.my-n2 {
+  margin-top: -0.5rem !important;
+}
+
+.mr-n2,
+.mx-n2 {
+  margin-right: -0.5rem !important;
+}
+
+.mb-n2,
+.my-n2 {
+  margin-bottom: -0.5rem !important;
+}
+
+.ml-n2,
+.mx-n2 {
+  margin-left: -0.5rem !important;
+}
+
+.m-n3 {
+  margin: -1rem !important;
+}
+
+.mt-n3,
+.my-n3 {
+  margin-top: -1rem !important;
+}
+
+.mr-n3,
+.mx-n3 {
+  margin-right: -1rem !important;
+}
+
+.mb-n3,
+.my-n3 {
+  margin-bottom: -1rem !important;
+}
+
+.ml-n3,
+.mx-n3 {
+  margin-left: -1rem !important;
+}
+
+.m-n4 {
+  margin: -1.5rem !important;
+}
+
+.mt-n4,
+.my-n4 {
+  margin-top: -1.5rem !important;
+}
+
+.mr-n4,
+.mx-n4 {
+  margin-right: -1.5rem !important;
+}
+
+.mb-n4,
+.my-n4 {
+  margin-bottom: -1.5rem !important;
+}
+
+.ml-n4,
+.mx-n4 {
+  margin-left: -1.5rem !important;
+}
+
+.m-n5 {
+  margin: -3rem !important;
+}
+
+.mt-n5,
+.my-n5 {
+  margin-top: -3rem !important;
+}
+
+.mr-n5,
+.mx-n5 {
+  margin-right: -3rem !important;
+}
+
+.mb-n5,
+.my-n5 {
+  margin-bottom: -3rem !important;
+}
+
+.ml-n5,
+.mx-n5 {
+  margin-left: -3rem !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto,
+.my-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto,
+.mx-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto,
+.my-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto,
+.mx-auto {
+  margin-left: auto !important;
+}
+
+@media (min-width: 576px) {
+  .m-sm-0 {
+    margin: 0 !important;
+  }
+  .mt-sm-0,
+  .my-sm-0 {
+    margin-top: 0 !important;
+  }
+  .mr-sm-0,
+  .mx-sm-0 {
+    margin-right: 0 !important;
+  }
+  .mb-sm-0,
+  .my-sm-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-sm-0,
+  .mx-sm-0 {
+    margin-left: 0 !important;
+  }
+  .m-sm-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-sm-1,
+  .my-sm-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-sm-1,
+  .mx-sm-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-sm-1,
+  .my-sm-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-sm-1,
+  .mx-sm-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-sm-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-sm-2,
+  .my-sm-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-sm-2,
+  .mx-sm-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-sm-2,
+  .my-sm-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-sm-2,
+  .mx-sm-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-sm-3 {
+    margin: 1rem !important;
+  }
+  .mt-sm-3,
+  .my-sm-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-sm-3,
+  .mx-sm-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-sm-3,
+  .my-sm-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-sm-3,
+  .mx-sm-3 {
+    margin-left: 1rem !important;
+  }
+  .m-sm-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-sm-4,
+  .my-sm-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-sm-4,
+  .mx-sm-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-sm-4,
+  .my-sm-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-sm-4,
+  .mx-sm-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-sm-5 {
+    margin: 3rem !important;
+  }
+  .mt-sm-5,
+  .my-sm-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-sm-5,
+  .mx-sm-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-sm-5,
+  .my-sm-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-sm-5,
+  .mx-sm-5 {
+    margin-left: 3rem !important;
+  }
+  .p-sm-0 {
+    padding: 0 !important;
+  }
+  .pt-sm-0,
+  .py-sm-0 {
+    padding-top: 0 !important;
+  }
+  .pr-sm-0,
+  .px-sm-0 {
+    padding-right: 0 !important;
+  }
+  .pb-sm-0,
+  .py-sm-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-sm-0,
+  .px-sm-0 {
+    padding-left: 0 !important;
+  }
+  .p-sm-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-sm-1,
+  .py-sm-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-sm-1,
+  .px-sm-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-sm-1,
+  .py-sm-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-sm-1,
+  .px-sm-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-sm-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-sm-2,
+  .py-sm-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-sm-2,
+  .px-sm-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-sm-2,
+  .py-sm-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-sm-2,
+  .px-sm-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-sm-3 {
+    padding: 1rem !important;
+  }
+  .pt-sm-3,
+  .py-sm-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-sm-3,
+  .px-sm-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-sm-3,
+  .py-sm-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-sm-3,
+  .px-sm-3 {
+    padding-left: 1rem !important;
+  }
+  .p-sm-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-sm-4,
+  .py-sm-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-sm-4,
+  .px-sm-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-sm-4,
+  .py-sm-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-sm-4,
+  .px-sm-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-sm-5 {
+    padding: 3rem !important;
+  }
+  .pt-sm-5,
+  .py-sm-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-sm-5,
+  .px-sm-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-sm-5,
+  .py-sm-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-sm-5,
+  .px-sm-5 {
+    padding-left: 3rem !important;
+  }
+  .m-sm-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-sm-n1,
+  .my-sm-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-sm-n1,
+  .mx-sm-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-sm-n1,
+  .my-sm-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-sm-n1,
+  .mx-sm-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-sm-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-sm-n2,
+  .my-sm-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-sm-n2,
+  .mx-sm-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-sm-n2,
+  .my-sm-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-sm-n2,
+  .mx-sm-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-sm-n3 {
+    margin: -1rem !important;
+  }
+  .mt-sm-n3,
+  .my-sm-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-sm-n3,
+  .mx-sm-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-sm-n3,
+  .my-sm-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-sm-n3,
+  .mx-sm-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-sm-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-sm-n4,
+  .my-sm-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-sm-n4,
+  .mx-sm-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-sm-n4,
+  .my-sm-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-sm-n4,
+  .mx-sm-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-sm-n5 {
+    margin: -3rem !important;
+  }
+  .mt-sm-n5,
+  .my-sm-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-sm-n5,
+  .mx-sm-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-sm-n5,
+  .my-sm-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-sm-n5,
+  .mx-sm-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-sm-auto {
+    margin: auto !important;
+  }
+  .mt-sm-auto,
+  .my-sm-auto {
+    margin-top: auto !important;
+  }
+  .mr-sm-auto,
+  .mx-sm-auto {
+    margin-right: auto !important;
+  }
+  .mb-sm-auto,
+  .my-sm-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-sm-auto,
+  .mx-sm-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .m-md-0 {
+    margin: 0 !important;
+  }
+  .mt-md-0,
+  .my-md-0 {
+    margin-top: 0 !important;
+  }
+  .mr-md-0,
+  .mx-md-0 {
+    margin-right: 0 !important;
+  }
+  .mb-md-0,
+  .my-md-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-md-0,
+  .mx-md-0 {
+    margin-left: 0 !important;
+  }
+  .m-md-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-md-1,
+  .my-md-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-md-1,
+  .mx-md-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-md-1,
+  .my-md-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-md-1,
+  .mx-md-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-md-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-md-2,
+  .my-md-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-md-2,
+  .mx-md-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-md-2,
+  .my-md-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-md-2,
+  .mx-md-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-md-3 {
+    margin: 1rem !important;
+  }
+  .mt-md-3,
+  .my-md-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-md-3,
+  .mx-md-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-md-3,
+  .my-md-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-md-3,
+  .mx-md-3 {
+    margin-left: 1rem !important;
+  }
+  .m-md-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-md-4,
+  .my-md-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-md-4,
+  .mx-md-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-md-4,
+  .my-md-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-md-4,
+  .mx-md-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-md-5 {
+    margin: 3rem !important;
+  }
+  .mt-md-5,
+  .my-md-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-md-5,
+  .mx-md-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-md-5,
+  .my-md-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-md-5,
+  .mx-md-5 {
+    margin-left: 3rem !important;
+  }
+  .p-md-0 {
+    padding: 0 !important;
+  }
+  .pt-md-0,
+  .py-md-0 {
+    padding-top: 0 !important;
+  }
+  .pr-md-0,
+  .px-md-0 {
+    padding-right: 0 !important;
+  }
+  .pb-md-0,
+  .py-md-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-md-0,
+  .px-md-0 {
+    padding-left: 0 !important;
+  }
+  .p-md-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-md-1,
+  .py-md-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-md-1,
+  .px-md-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-md-1,
+  .py-md-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-md-1,
+  .px-md-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-md-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-md-2,
+  .py-md-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-md-2,
+  .px-md-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-md-2,
+  .py-md-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-md-2,
+  .px-md-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-md-3 {
+    padding: 1rem !important;
+  }
+  .pt-md-3,
+  .py-md-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-md-3,
+  .px-md-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-md-3,
+  .py-md-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-md-3,
+  .px-md-3 {
+    padding-left: 1rem !important;
+  }
+  .p-md-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-md-4,
+  .py-md-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-md-4,
+  .px-md-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-md-4,
+  .py-md-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-md-4,
+  .px-md-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-md-5 {
+    padding: 3rem !important;
+  }
+  .pt-md-5,
+  .py-md-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-md-5,
+  .px-md-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-md-5,
+  .py-md-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-md-5,
+  .px-md-5 {
+    padding-left: 3rem !important;
+  }
+  .m-md-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-md-n1,
+  .my-md-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-md-n1,
+  .mx-md-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-md-n1,
+  .my-md-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-md-n1,
+  .mx-md-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-md-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-md-n2,
+  .my-md-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-md-n2,
+  .mx-md-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-md-n2,
+  .my-md-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-md-n2,
+  .mx-md-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-md-n3 {
+    margin: -1rem !important;
+  }
+  .mt-md-n3,
+  .my-md-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-md-n3,
+  .mx-md-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-md-n3,
+  .my-md-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-md-n3,
+  .mx-md-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-md-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-md-n4,
+  .my-md-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-md-n4,
+  .mx-md-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-md-n4,
+  .my-md-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-md-n4,
+  .mx-md-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-md-n5 {
+    margin: -3rem !important;
+  }
+  .mt-md-n5,
+  .my-md-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-md-n5,
+  .mx-md-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-md-n5,
+  .my-md-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-md-n5,
+  .mx-md-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-md-auto {
+    margin: auto !important;
+  }
+  .mt-md-auto,
+  .my-md-auto {
+    margin-top: auto !important;
+  }
+  .mr-md-auto,
+  .mx-md-auto {
+    margin-right: auto !important;
+  }
+  .mb-md-auto,
+  .my-md-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-md-auto,
+  .mx-md-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .m-lg-0 {
+    margin: 0 !important;
+  }
+  .mt-lg-0,
+  .my-lg-0 {
+    margin-top: 0 !important;
+  }
+  .mr-lg-0,
+  .mx-lg-0 {
+    margin-right: 0 !important;
+  }
+  .mb-lg-0,
+  .my-lg-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-lg-0,
+  .mx-lg-0 {
+    margin-left: 0 !important;
+  }
+  .m-lg-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-lg-1,
+  .my-lg-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-lg-1,
+  .mx-lg-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-lg-1,
+  .my-lg-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-lg-1,
+  .mx-lg-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-lg-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-lg-2,
+  .my-lg-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-lg-2,
+  .mx-lg-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-lg-2,
+  .my-lg-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-lg-2,
+  .mx-lg-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-lg-3 {
+    margin: 1rem !important;
+  }
+  .mt-lg-3,
+  .my-lg-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-lg-3,
+  .mx-lg-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-lg-3,
+  .my-lg-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-lg-3,
+  .mx-lg-3 {
+    margin-left: 1rem !important;
+  }
+  .m-lg-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-lg-4,
+  .my-lg-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-lg-4,
+  .mx-lg-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-lg-4,
+  .my-lg-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-lg-4,
+  .mx-lg-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-lg-5 {
+    margin: 3rem !important;
+  }
+  .mt-lg-5,
+  .my-lg-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-lg-5,
+  .mx-lg-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-lg-5,
+  .my-lg-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-lg-5,
+  .mx-lg-5 {
+    margin-left: 3rem !important;
+  }
+  .p-lg-0 {
+    padding: 0 !important;
+  }
+  .pt-lg-0,
+  .py-lg-0 {
+    padding-top: 0 !important;
+  }
+  .pr-lg-0,
+  .px-lg-0 {
+    padding-right: 0 !important;
+  }
+  .pb-lg-0,
+  .py-lg-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-lg-0,
+  .px-lg-0 {
+    padding-left: 0 !important;
+  }
+  .p-lg-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-lg-1,
+  .py-lg-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-lg-1,
+  .px-lg-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-lg-1,
+  .py-lg-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-lg-1,
+  .px-lg-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-lg-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-lg-2,
+  .py-lg-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-lg-2,
+  .px-lg-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-lg-2,
+  .py-lg-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-lg-2,
+  .px-lg-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-lg-3 {
+    padding: 1rem !important;
+  }
+  .pt-lg-3,
+  .py-lg-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-lg-3,
+  .px-lg-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-lg-3,
+  .py-lg-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-lg-3,
+  .px-lg-3 {
+    padding-left: 1rem !important;
+  }
+  .p-lg-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-lg-4,
+  .py-lg-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-lg-4,
+  .px-lg-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-lg-4,
+  .py-lg-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-lg-4,
+  .px-lg-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-lg-5 {
+    padding: 3rem !important;
+  }
+  .pt-lg-5,
+  .py-lg-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-lg-5,
+  .px-lg-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-lg-5,
+  .py-lg-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-lg-5,
+  .px-lg-5 {
+    padding-left: 3rem !important;
+  }
+  .m-lg-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-lg-n1,
+  .my-lg-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-lg-n1,
+  .mx-lg-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-lg-n1,
+  .my-lg-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-lg-n1,
+  .mx-lg-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-lg-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-lg-n2,
+  .my-lg-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-lg-n2,
+  .mx-lg-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-lg-n2,
+  .my-lg-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-lg-n2,
+  .mx-lg-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-lg-n3 {
+    margin: -1rem !important;
+  }
+  .mt-lg-n3,
+  .my-lg-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-lg-n3,
+  .mx-lg-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-lg-n3,
+  .my-lg-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-lg-n3,
+  .mx-lg-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-lg-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-lg-n4,
+  .my-lg-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-lg-n4,
+  .mx-lg-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-lg-n4,
+  .my-lg-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-lg-n4,
+  .mx-lg-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-lg-n5 {
+    margin: -3rem !important;
+  }
+  .mt-lg-n5,
+  .my-lg-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-lg-n5,
+  .mx-lg-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-lg-n5,
+  .my-lg-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-lg-n5,
+  .mx-lg-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-lg-auto {
+    margin: auto !important;
+  }
+  .mt-lg-auto,
+  .my-lg-auto {
+    margin-top: auto !important;
+  }
+  .mr-lg-auto,
+  .mx-lg-auto {
+    margin-right: auto !important;
+  }
+  .mb-lg-auto,
+  .my-lg-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-lg-auto,
+  .mx-lg-auto {
+    margin-left: auto !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .m-xl-0 {
+    margin: 0 !important;
+  }
+  .mt-xl-0,
+  .my-xl-0 {
+    margin-top: 0 !important;
+  }
+  .mr-xl-0,
+  .mx-xl-0 {
+    margin-right: 0 !important;
+  }
+  .mb-xl-0,
+  .my-xl-0 {
+    margin-bottom: 0 !important;
+  }
+  .ml-xl-0,
+  .mx-xl-0 {
+    margin-left: 0 !important;
+  }
+  .m-xl-1 {
+    margin: 0.25rem !important;
+  }
+  .mt-xl-1,
+  .my-xl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mr-xl-1,
+  .mx-xl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .mb-xl-1,
+  .my-xl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .ml-xl-1,
+  .mx-xl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .m-xl-2 {
+    margin: 0.5rem !important;
+  }
+  .mt-xl-2,
+  .my-xl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mr-xl-2,
+  .mx-xl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .mb-xl-2,
+  .my-xl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .ml-xl-2,
+  .mx-xl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .m-xl-3 {
+    margin: 1rem !important;
+  }
+  .mt-xl-3,
+  .my-xl-3 {
+    margin-top: 1rem !important;
+  }
+  .mr-xl-3,
+  .mx-xl-3 {
+    margin-right: 1rem !important;
+  }
+  .mb-xl-3,
+  .my-xl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .ml-xl-3,
+  .mx-xl-3 {
+    margin-left: 1rem !important;
+  }
+  .m-xl-4 {
+    margin: 1.5rem !important;
+  }
+  .mt-xl-4,
+  .my-xl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mr-xl-4,
+  .mx-xl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .mb-xl-4,
+  .my-xl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .ml-xl-4,
+  .mx-xl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .m-xl-5 {
+    margin: 3rem !important;
+  }
+  .mt-xl-5,
+  .my-xl-5 {
+    margin-top: 3rem !important;
+  }
+  .mr-xl-5,
+  .mx-xl-5 {
+    margin-right: 3rem !important;
+  }
+  .mb-xl-5,
+  .my-xl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .ml-xl-5,
+  .mx-xl-5 {
+    margin-left: 3rem !important;
+  }
+  .p-xl-0 {
+    padding: 0 !important;
+  }
+  .pt-xl-0,
+  .py-xl-0 {
+    padding-top: 0 !important;
+  }
+  .pr-xl-0,
+  .px-xl-0 {
+    padding-right: 0 !important;
+  }
+  .pb-xl-0,
+  .py-xl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pl-xl-0,
+  .px-xl-0 {
+    padding-left: 0 !important;
+  }
+  .p-xl-1 {
+    padding: 0.25rem !important;
+  }
+  .pt-xl-1,
+  .py-xl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pr-xl-1,
+  .px-xl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pb-xl-1,
+  .py-xl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pl-xl-1,
+  .px-xl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .p-xl-2 {
+    padding: 0.5rem !important;
+  }
+  .pt-xl-2,
+  .py-xl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pr-xl-2,
+  .px-xl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pb-xl-2,
+  .py-xl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pl-xl-2,
+  .px-xl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .p-xl-3 {
+    padding: 1rem !important;
+  }
+  .pt-xl-3,
+  .py-xl-3 {
+    padding-top: 1rem !important;
+  }
+  .pr-xl-3,
+  .px-xl-3 {
+    padding-right: 1rem !important;
+  }
+  .pb-xl-3,
+  .py-xl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pl-xl-3,
+  .px-xl-3 {
+    padding-left: 1rem !important;
+  }
+  .p-xl-4 {
+    padding: 1.5rem !important;
+  }
+  .pt-xl-4,
+  .py-xl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pr-xl-4,
+  .px-xl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pb-xl-4,
+  .py-xl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pl-xl-4,
+  .px-xl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .p-xl-5 {
+    padding: 3rem !important;
+  }
+  .pt-xl-5,
+  .py-xl-5 {
+    padding-top: 3rem !important;
+  }
+  .pr-xl-5,
+  .px-xl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xl-5,
+  .py-xl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .pl-xl-5,
+  .px-xl-5 {
+    padding-left: 3rem !important;
+  }
+  .m-xl-n1 {
+    margin: -0.25rem !important;
+  }
+  .mt-xl-n1,
+  .my-xl-n1 {
+    margin-top: -0.25rem !important;
+  }
+  .mr-xl-n1,
+  .mx-xl-n1 {
+    margin-right: -0.25rem !important;
+  }
+  .mb-xl-n1,
+  .my-xl-n1 {
+    margin-bottom: -0.25rem !important;
+  }
+  .ml-xl-n1,
+  .mx-xl-n1 {
+    margin-left: -0.25rem !important;
+  }
+  .m-xl-n2 {
+    margin: -0.5rem !important;
+  }
+  .mt-xl-n2,
+  .my-xl-n2 {
+    margin-top: -0.5rem !important;
+  }
+  .mr-xl-n2,
+  .mx-xl-n2 {
+    margin-right: -0.5rem !important;
+  }
+  .mb-xl-n2,
+  .my-xl-n2 {
+    margin-bottom: -0.5rem !important;
+  }
+  .ml-xl-n2,
+  .mx-xl-n2 {
+    margin-left: -0.5rem !important;
+  }
+  .m-xl-n3 {
+    margin: -1rem !important;
+  }
+  .mt-xl-n3,
+  .my-xl-n3 {
+    margin-top: -1rem !important;
+  }
+  .mr-xl-n3,
+  .mx-xl-n3 {
+    margin-right: -1rem !important;
+  }
+  .mb-xl-n3,
+  .my-xl-n3 {
+    margin-bottom: -1rem !important;
+  }
+  .ml-xl-n3,
+  .mx-xl-n3 {
+    margin-left: -1rem !important;
+  }
+  .m-xl-n4 {
+    margin: -1.5rem !important;
+  }
+  .mt-xl-n4,
+  .my-xl-n4 {
+    margin-top: -1.5rem !important;
+  }
+  .mr-xl-n4,
+  .mx-xl-n4 {
+    margin-right: -1.5rem !important;
+  }
+  .mb-xl-n4,
+  .my-xl-n4 {
+    margin-bottom: -1.5rem !important;
+  }
+  .ml-xl-n4,
+  .mx-xl-n4 {
+    margin-left: -1.5rem !important;
+  }
+  .m-xl-n5 {
+    margin: -3rem !important;
+  }
+  .mt-xl-n5,
+  .my-xl-n5 {
+    margin-top: -3rem !important;
+  }
+  .mr-xl-n5,
+  .mx-xl-n5 {
+    margin-right: -3rem !important;
+  }
+  .mb-xl-n5,
+  .my-xl-n5 {
+    margin-bottom: -3rem !important;
+  }
+  .ml-xl-n5,
+  .mx-xl-n5 {
+    margin-left: -3rem !important;
+  }
+  .m-xl-auto {
+    margin: auto !important;
+  }
+  .mt-xl-auto,
+  .my-xl-auto {
+    margin-top: auto !important;
+  }
+  .mr-xl-auto,
+  .mx-xl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xl-auto,
+  .my-xl-auto {
+    margin-bottom: auto !important;
+  }
+  .ml-xl-auto,
+  .mx-xl-auto {
+    margin-left: auto !important;
+  }
+}
+
+.stretched-link::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: auto;
+  content: "";
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.text-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+@media (min-width: 576px) {
+  .text-sm-left {
+    text-align: left !important;
+  }
+  .text-sm-right {
+    text-align: right !important;
+  }
+  .text-sm-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .text-md-left {
+    text-align: left !important;
+  }
+  .text-md-right {
+    text-align: right !important;
+  }
+  .text-md-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .text-lg-left {
+    text-align: left !important;
+  }
+  .text-lg-right {
+    text-align: right !important;
+  }
+  .text-lg-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .text-xl-left {
+    text-align: left !important;
+  }
+  .text-xl-right {
+    text-align: right !important;
+  }
+  .text-xl-center {
+    text-align: center !important;
+  }
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase, .dropdown .dropdown-menu .dropdown-header, .sidebar .sidebar-heading {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.font-weight-light {
+  font-weight: 300 !important;
+}
+
+.font-weight-lighter {
+  font-weight: lighter !important;
+}
+
+.font-weight-normal {
+  font-weight: 400 !important;
+}
+
+.font-weight-bold {
+  font-weight: 700 !important;
+}
+
+.font-weight-bolder {
+  font-weight: bolder !important;
+}
+
+.font-italic {
+  font-style: italic !important;
+}
+
+.text-white {
+  color: #fff !important;
+}
+
+.text-primary {
+  color: #4e73df !important;
+}
+
+a.text-primary:hover, a.text-primary:focus {
+  color: #224abe !important;
+}
+
+.text-secondary {
+  color: #858796 !important;
+}
+
+a.text-secondary:hover, a.text-secondary:focus {
+  color: #60616f !important;
+}
+
+.text-success {
+  color: #1cc88a !important;
+}
+
+a.text-success:hover, a.text-success:focus {
+  color: #13855c !important;
+}
+
+.text-info {
+  color: #36b9cc !important;
+}
+
+a.text-info:hover, a.text-info:focus {
+  color: #258391 !important;
+}
+
+.text-warning {
+  color: #f6c23e !important;
+}
+
+a.text-warning:hover, a.text-warning:focus {
+  color: #dda20a !important;
+}
+
+.text-danger {
+  color: #e74a3b !important;
+}
+
+a.text-danger:hover, a.text-danger:focus {
+  color: #be2617 !important;
+}
+
+.text-light {
+  color: #f8f9fc !important;
+}
+
+a.text-light:hover, a.text-light:focus {
+  color: #c2cbe5 !important;
+}
+
+.text-dark {
+  color: #5a5c69 !important;
+}
+
+a.text-dark:hover, a.text-dark:focus {
+  color: #373840 !important;
+}
+
+.text-body {
+  color: #858796 !important;
+}
+
+.text-muted {
+  color: #858796 !important;
+}
+
+.text-black-50 {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.text-hide {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-break {
+  word-wrap: break-word !important;
+}
+
+.text-reset {
+  color: inherit !important;
+}
+
+.visible {
+  visibility: visible !important;
+}
+
+.invisible {
+  visibility: hidden !important;
+}
+
+@media print {
+  *,
+  *::before,
+  *::after {
+    text-shadow: none !important;
+    box-shadow: none !important;
+  }
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+  pre {
+    white-space: pre-wrap !important;
+  }
+  pre,
+  blockquote {
+    border: 1px solid #b7b9cc;
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+  @page {
+    size: a3;
+  }
+  body {
+    min-width: 992px !important;
+  }
+  .container {
+    min-width: 992px !important;
+  }
+  .navbar {
+    display: none;
+  }
+  .badge {
+    border: 1px solid #000;
+  }
+  .table {
+    border-collapse: collapse !important;
+  }
+  .table td,
+  .table th {
+    background-color: #fff !important;
+  }
+  .table-bordered th,
+  .table-bordered td {
+    border: 1px solid #dddfeb !important;
+  }
+  .table-dark {
+    color: inherit;
+  }
+  .table-dark th,
+  .table-dark td,
+  .table-dark thead th,
+  .table-dark tbody + tbody {
+    border-color: #e3e6f0;
+  }
+  .table .thead-dark th {
+    color: inherit;
+    border-color: #e3e6f0;
+  }
+}
+
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  height: 100%;
+}
+
+a:focus {
+  outline: none;
+}
+
+#wrapper {
+  display: flex;
+  padding-top: 57px;
+    height: 100vh;
+    overflow: hidden; 
+}
+
+#wrapper #content-wrapper {
+  background-color: #f8f9fc;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+#wrapper #content-wrapper #content {
+  flex: 1 0 auto;
+}
+
+.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.scroll-to-top {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  display: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  text-align: center;
+  color: #fff;
+  background: rgba(90, 92, 105, 0.5);
+  line-height: 46px;
+}
+
+.scroll-to-top:focus, .scroll-to-top:hover {
+  color: white;
+}
+
+.scroll-to-top:hover {
+  background: #5a5c69;
+}
+
+.scroll-to-top i {
+  font-weight: 800;
+}
+
+@-webkit-keyframes growIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes growIn {
+  0% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.animated--grow-in, .sidebar .nav-item .collapse {
+  -webkit-animation-name: growIn;
+  animation-name: growIn;
+  -webkit-animation-duration: 200ms;
+  animation-duration: 200ms;
+  -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
+  animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.animated--fade-in {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+  -webkit-animation-duration: 200ms;
+  animation-duration: 200ms;
+  -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
+  animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
+}
+
+.bg-gradient-primary {
+  // background-color: #4e73df;
+  background-color: #6c6c6c;
+  // background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
+  background-size: cover;
+}
+
+.bg-gradient-secondary {
+  background-color: #858796;
+  background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
+  background-size: cover;
+}
+
+.bg-gradient-success {
+  background-color: #1cc88a;
+  background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
+  background-size: cover;
+}
+
+.bg-gradient-info {
+  background-color: #36b9cc;
+  background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
+  background-size: cover;
+}
+
+.bg-gradient-warning {
+  background-color: #f6c23e;
+  background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
+  background-size: cover;
+}
+
+.bg-gradient-danger {
+  background-color: #e74a3b;
+  background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
+  background-size: cover;
+}
+
+.bg-gradient-light {
+  background-color: #f8f9fc;
+  background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
+  background-size: cover;
+}
+
+.bg-gradient-dark {
+  background-color: #5a5c69;
+  background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
+  background-size: cover;
+}
+
+.bg-gray-100 {
+  background-color: #f8f9fc !important;
+}
+
+.bg-gray-200 {
+  background-color: #eaecf4 !important;
+}
+
+.bg-gray-300 {
+  background-color: #dddfeb !important;
+}
+
+.bg-gray-400 {
+  background-color: #d1d3e2 !important;
+}
+
+.bg-gray-500 {
+  background-color: #b7b9cc !important;
+}
+
+.bg-gray-600 {
+  background-color: #858796 !important;
+}
+
+.bg-gray-700 {
+  background-color: #6e707e !important;
+}
+
+.bg-gray-800 {
+  background-color: #5a5c69 !important;
+}
+
+.bg-gray-900 {
+  background-color: #3a3b45 !important;
+}
+
+.o-hidden {
+  overflow: hidden !important;
+}
+
+.text-xs {
+  font-size: .7rem;
+}
+
+.text-lg {
+  font-size: 1.2rem;
+}
+
+.text-gray-100 {
+  color: #f8f9fc !important;
+}
+
+.text-gray-200 {
+  color: #eaecf4 !important;
+}
+
+.text-gray-300 {
+  color: #dddfeb !important;
+}
+
+.text-gray-400 {
+  color: #d1d3e2 !important;
+}
+
+.text-gray-500 {
+  color: #b7b9cc !important;
+}
+
+.text-gray-600 {
+  color: #858796 !important;
+}
+
+.text-gray-700 {
+  color: #6e707e !important;
+}
+
+.text-gray-800 {
+  color: #5a5c69 !important;
+}
+
+.text-gray-900 {
+  color: #3a3b45 !important;
+}
+
+.icon-circle {
+  height: 2.5rem;
+  width: 2.5rem;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.border-left-primary {
+  border-left: 0.25rem solid #4e73df !important;
+}
+
+.border-bottom-primary {
+  border-bottom: 0.25rem solid #4e73df !important;
+}
+
+.border-left-secondary {
+  border-left: 0.25rem solid #858796 !important;
+}
+
+.border-bottom-secondary {
+  border-bottom: 0.25rem solid #858796 !important;
+}
+
+.border-left-success {
+  border-left: 0.25rem solid #1cc88a !important;
+}
+
+.border-bottom-success {
+  border-bottom: 0.25rem solid #1cc88a !important;
+}
+
+.border-left-info {
+  border-left: 0.25rem solid #36b9cc !important;
+}
+
+.border-bottom-info {
+  border-bottom: 0.25rem solid #36b9cc !important;
+}
+
+.border-left-warning {
+  border-left: 0.25rem solid #f6c23e !important;
+}
+
+.border-bottom-warning {
+  border-bottom: 0.25rem solid #f6c23e !important;
+}
+
+.border-left-danger {
+  border-left: 0.25rem solid #e74a3b !important;
+}
+
+.border-bottom-danger {
+  border-bottom: 0.25rem solid #e74a3b !important;
+}
+
+.border-left-light {
+  border-left: 0.25rem solid #f8f9fc !important;
+}
+
+.border-bottom-light {
+  border-bottom: 0.25rem solid #f8f9fc !important;
+}
+
+.border-left-dark {
+  border-left: 0.25rem solid #5a5c69 !important;
+}
+
+.border-bottom-dark {
+  border-bottom: 0.25rem solid #5a5c69 !important;
+}
+
+.progress-sm {
+  height: .5rem;
+}
+
+.rotate-15 {
+  transform: rotate(15deg);
+}
+
+.rotate-n-15 {
+  transform: rotate(-15deg);
+}
+
+.dropdown .dropdown-menu {
+  font-size: 0.85rem;
+}
+
+.dropdown .dropdown-menu .dropdown-header {
+  font-weight: 800;
+  font-size: 0.65rem;
+  color: #b7b9cc;
+}
+
+.dropdown.no-arrow .dropdown-toggle::after {
+  display: none;
+}
+
+.sidebar .nav-item.dropdown .dropdown-toggle::after,
+.topbar .nav-item.dropdown .dropdown-toggle::after {
+  width: 1rem;
+  text-align: center;
+  float: right;
+  vertical-align: 0;
+  border: 0;
+  font-weight: 900;
+  content: '\f105';
+  font-family: 'Font Awesome 5 Free';
+}
+
+.sidebar .nav-item.dropdown.show .dropdown-toggle::after,
+.topbar .nav-item.dropdown.show .dropdown-toggle::after {
+  content: '\f107';
+}
+
+.sidebar .nav-item .nav-link,
+.topbar .nav-item .nav-link {
+  position: relative;
+}
+
+.sidebar .nav-item .nav-link .badge-counter,
+.topbar .nav-item .nav-link .badge-counter {
+  position: absolute;
+  transform: scale(0.7);
+  transform-origin: top right;
+  right: .25rem;
+  margin-top: -.25rem;
+}
+
+.sidebar .nav-item .nav-link .img-profile,
+.topbar .nav-item .nav-link .img-profile {
+  height: 2rem;
+  width: 2rem;
+}
+
+.topbar {
+  height: 4.375rem;
+}
+
+.topbar #sidebarToggleTop {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.topbar #sidebarToggleTop:hover {
+  background-color: #eaecf4;
+}
+
+.topbar #sidebarToggleTop:active {
+  background-color: #dddfeb;
+}
+
+.topbar .navbar-search {
+  width: 25rem;
+}
+
+.topbar .navbar-search input {
+  font-size: 0.85rem;
+  height: auto;
+}
+
+.topbar .topbar-divider {
+  width: 0;
+  border-right: 1px solid #e3e6f0;
+  height: calc(4.375rem - 2rem);
+  margin: auto 1rem;
+}
+
+.topbar .nav-item .nav-link {
+  height: 4.375rem;
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+}
+
+.topbar .nav-item .nav-link:focus {
+  outline: none;
+}
+
+.topbar .nav-item:focus {
+  outline: none;
+}
+
+.topbar .dropdown {
+  position: static;
+}
+
+.topbar .dropdown .dropdown-menu {
+  width: calc(100% - 1.5rem);
+  right: 0.75rem;
+}
+
+.topbar .dropdown-list {
+  padding: 0;
+  border: none;
+  overflow: hidden;
+}
+
+.topbar .dropdown-list .dropdown-header {
+  background-color: #4e73df;
+  border: 1px solid #4e73df;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #fff;
+}
+
+.topbar .dropdown-list .dropdown-item {
+  white-space: normal;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-left: 1px solid #e3e6f0;
+  border-right: 1px solid #e3e6f0;
+  border-bottom: 1px solid #e3e6f0;
+  line-height: 1.3rem;
+}
+
+.topbar .dropdown-list .dropdown-item .dropdown-list-image {
+  position: relative;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.topbar .dropdown-list .dropdown-item .dropdown-list-image img {
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator {
+  background-color: #eaecf4;
+  height: 0.75rem;
+  width: 0.75rem;
+  border-radius: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border: 0.125rem solid #fff;
+}
+
+.topbar .dropdown-list .dropdown-item .text-truncate {
+  max-width: 10rem;
+}
+
+.topbar .dropdown-list .dropdown-item:active {
+  background-color: #eaecf4;
+  color: #3a3b45;
+}
+
+@media (min-width: 576px) {
+  .topbar .dropdown {
+    position: relative;
+  }
+  .topbar .dropdown .dropdown-menu {
+    width: auto;
+    right: 0;
+  }
+  .topbar .dropdown-list {
+    width: 20rem !important;
+  }
+  .topbar .dropdown-list .dropdown-item .text-truncate {
+    max-width: 13.375rem;
+  }
+}
+
+.topbar.navbar-dark .navbar-nav .nav-item .nav-link {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.topbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
+  color: #fff;
+}
+
+.topbar.navbar-dark .navbar-nav .nav-item .nav-link:active {
+  color: #fff;
+}
+
+.topbar.navbar-light .navbar-nav .nav-item .nav-link {
+  color: #d1d3e2;
+}
+
+.topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
+  color: #b7b9cc;
+}
+
+.topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
+  color: #858796;
+}
+
+.sidebar {
+  width: 6.5rem;
+  min-height: 100vh;
+}
+
+.sidebar .nav-item {
+  position: relative;
+}
+
+.sidebar .nav-item:last-child {
+  margin-bottom: 1rem;
+}
+
+.sidebar .nav-item .nav-link {
+  text-align: center;
+  padding: 0.75rem 1rem;
+  width: 6.5rem;
+}
+
+.sidebar .nav-item .nav-link span {
+  font-size: 0.65rem;
+  display: block;
+}
+
+.sidebar .nav-item.active .nav-link {
+  font-weight: 700;
+}
+
+.sidebar .nav-item .collapse {
+  position: absolute;
+  left: calc(6.5rem + 1.5rem / 2);
+  z-index: 1;
+  top: 2px;
+}
+
+.sidebar .nav-item .collapse .collapse-inner {
+  border-radius: 0.35rem;
+  box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
+}
+
+.sidebar .nav-item .collapsing {
+  display: none;
+  transition: none;
+}
+
+.sidebar .nav-item .collapse .collapse-inner,
+.sidebar .nav-item .collapsing .collapse-inner {
+  padding: .5rem 0;
+  min-width: 10rem;
+  font-size: 0.85rem;
+  margin: 0 0 1rem 0;
+}
+
+.sidebar .nav-item .collapse .collapse-inner .collapse-header,
+.sidebar .nav-item .collapsing .collapse-inner .collapse-header {
+  margin: 0;
+  white-space: nowrap;
+  padding: .5rem 1.5rem;
+  text-transform: uppercase;
+  font-weight: 800;
+  font-size: 0.65rem;
+  color: #b7b9cc;
+}
+
+.sidebar .nav-item .collapse .collapse-inner .collapse-item,
+.sidebar .nav-item .collapsing .collapse-inner .collapse-item {
+  padding: 0.5rem 1rem;
+  margin: 0 0.5rem;
+  display: block;
+  color: #3a3b45;
+  text-decoration: none;
+  border-radius: 0.35rem;
+  white-space: nowrap;
+}
+
+.sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
+.sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
+  background-color: #eaecf4;
+}
+
+.sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
+.sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
+  background-color: #dddfeb;
+}
+
+.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
+.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
+  color: #4e73df;
+  font-weight: 700;
+}
+
+.sidebar #sidebarToggle {
+  width: 2.5rem;
+  height: 2.5rem;
+  text-align: center;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+.sidebar #sidebarToggle::after {
+  font-weight: 900;
+  content: '\f104';
+  font-family: 'Font Awesome 5 Free';
+  margin-right: 0.1rem;
+}
+
+.sidebar #sidebarToggle:hover {
+  text-decoration: none;
+}
+
+.sidebar #sidebarToggle:focus {
+  outline: none;
+}
+
+.sidebar.toggled {
+  width: 0 !important;
+  overflow: hidden;
+}
+
+.sidebar.toggled #sidebarToggle::after {
+  content: '\f105';
+  font-family: 'Font Awesome 5 Free';
+  margin-left: 0.25rem;
+}
+
+.sidebar .sidebar-brand {
+  height: 4.375rem;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 800;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.05rem;
+  z-index: 1;
+}
+
+.sidebar .sidebar-brand .sidebar-brand-icon i {
+  font-size: 2rem;
+}
+
+.sidebar .sidebar-brand .sidebar-brand-text {
+  display: none;
+}
+
+.sidebar hr.sidebar-divider {
+  margin: 0 1rem 1rem;
+}
+
+.sidebar .sidebar-heading {
+  text-align: center;
+  padding: 0 1rem;
+  font-weight: 800;
+  font-size: 0.65rem;
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    width: 14rem !important;
+  }
+  .sidebar .nav-item .collapse {
+    position: relative;
+    left: 0;
+    z-index: 1;
+    top: 0;
+    -webkit-animation: none;
+    animation: none;
+  }
+  .sidebar .nav-item .collapse .collapse-inner {
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .sidebar .nav-item .collapsing {
+    display: block;
+    transition: height 0.15s ease;
+  }
+  .sidebar .nav-item .collapse,
+  .sidebar .nav-item .collapsing {
+    margin: 0 1rem;
+  }
+  .sidebar .nav-item .nav-link {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 1rem;
+    width: 14rem;
+  }
+  .sidebar .nav-item .nav-link i {
+    font-size: 0.85rem;
+    margin-right: 0.25rem;
+  }
+  .sidebar .nav-item .nav-link span {
+    font-size: 0.85rem;
+    display: inline;
+  }
+  .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
+    width: 1rem;
+    text-align: center;
+    float: right;
+    vertical-align: 0;
+    border: 0;
+    font-weight: 900;
+    content: '\f107';
+    font-family: 'Font Awesome 5 Free';
+  }
+  .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
+    content: '\f105';
+  }
+  .sidebar .sidebar-brand .sidebar-brand-icon i {
+    font-size: 2rem;
+  }
+  .sidebar .sidebar-brand .sidebar-brand-text {
+    display: inline;
+  }
+  .sidebar .sidebar-heading {
+    text-align: left;
+  }
+  .sidebar.toggled {
+    overflow: visible;
+    width: 6.5rem !important;
+  }
+  .sidebar.toggled .nav-item .collapse {
+    position: absolute;
+    left: calc(6.5rem + 1.5rem / 2);
+    z-index: 1;
+    top: 2px;
+    -webkit-animation-name: growIn;
+    animation-name: growIn;
+    -webkit-animation-duration: 200ms;
+    animation-duration: 200ms;
+    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
+    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
+  }
+  .sidebar.toggled .nav-item .collapse .collapse-inner {
+    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
+    border-radius: 0.35rem;
+  }
+  .sidebar.toggled .nav-item .collapsing {
+    display: none;
+    transition: none;
+  }
+  .sidebar.toggled .nav-item .collapse,
+  .sidebar.toggled .nav-item .collapsing {
+    margin: 0;
+  }
+  .sidebar.toggled .nav-item:last-child {
+    margin-bottom: 1rem;
+  }
+  .sidebar.toggled .nav-item .nav-link {
+    text-align: center;
+    padding: 0.75rem 1rem;
+    width: 6.5rem;
+  }
+  .sidebar.toggled .nav-item .nav-link span {
+    font-size: 0.65rem;
+    display: block;
+  }
+  .sidebar.toggled .nav-item .nav-link i {
+    margin-right: 0;
+  }
+  .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after {
+    display: none;
+  }
+  .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
+    font-size: 2rem;
+  }
+  .sidebar.toggled .sidebar-brand .sidebar-brand-text {
+    display: none;
+  }
+  .sidebar.toggled .sidebar-heading {
+    text-align: center;
+  }
+}
+
+.sidebar-light .sidebar-brand {
+  color: #6e707e;
+}
+
+.sidebar-light hr.sidebar-divider {
+  border-top: 1px solid #eaecf4;
+}
+
+.sidebar-light .sidebar-heading {
+  color: #b7b9cc;
+}
+
+.sidebar-light .nav-item .nav-link {
+  color: #858796;
+}
+
+.sidebar-light .nav-item .nav-link i {
+  color: #d1d3e2;
+}
+
+.sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover {
+  color: #6e707e;
+}
+
+.sidebar-light .nav-item .nav-link:active i, .sidebar-light .nav-item .nav-link:focus i, .sidebar-light .nav-item .nav-link:hover i {
+  color: #6e707e;
+}
+
+.sidebar-light .nav-item .nav-link[data-toggle="collapse"]::after {
+  color: #b7b9cc;
+}
+
+.sidebar-light .nav-item.active .nav-link {
+  color: #6e707e;
+}
+
+.sidebar-light .nav-item.active .nav-link i {
+  color: #6e707e;
+}
+
+.sidebar-light #sidebarToggle {
+  background-color: #eaecf4;
+}
+
+.sidebar-light #sidebarToggle::after {
+  color: #b7b9cc;
+}
+
+.sidebar-light #sidebarToggle:hover {
+  background-color: #dddfeb;
+}
+
+.sidebar-dark .sidebar-brand {
+  color: #fff;
+}
+
+.sidebar-dark hr.sidebar-divider {
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.sidebar-dark .sidebar-heading {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.sidebar-dark .nav-item .nav-link {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.sidebar-dark .nav-item .nav-link i {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar-dark .nav-item .nav-link:active, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item .nav-link:hover {
+  color: #fff;
+}
+
+.sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i {
+  color: #fff;
+}
+
+.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sidebar-dark .nav-item.active .nav-link {
+  color: #fff;
+}
+
+.sidebar-dark .nav-item.active .nav-link i {
+  color: #fff;
+}
+
+.sidebar-dark #sidebarToggle {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.sidebar-dark #sidebarToggle::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.sidebar-dark #sidebarToggle:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.sidebar-dark.toggled #sidebarToggle::after {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.btn-circle {
+  border-radius: 100%;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
+  height: 1.8rem;
+  width: 1.8rem;
+  font-size: 0.75rem;
+}
+
+.btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
+  height: 3.5rem;
+  width: 3.5rem;
+  font-size: 1.35rem;
+}
+
+.btn-icon-split {
+  padding: 0;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.btn-icon-split .icon {
+  background: rgba(0, 0, 0, 0.15);
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split .text {
+  display: inline-block;
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {
+  padding: 0.25rem 0.5rem;
+}
+
+.btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {
+  padding: 0.25rem 0.5rem;
+}
+
+.btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {
+  padding: 0.5rem 1rem;
+}
+
+.btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {
+  padding: 0.5rem 1rem;
+}
+
+.card .card-header .dropdown {
+  line-height: 1;
+}
+
+.card .card-header .dropdown .dropdown-menu {
+  line-height: 1.5;
+}
+
+.card .card-header[data-toggle="collapse"] {
+  text-decoration: none;
+  position: relative;
+  padding: 0.75rem 3.25rem 0.75rem 1.25rem;
+}
+
+.card .card-header[data-toggle="collapse"]::after {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-right: 1.725rem;
+  line-height: 51px;
+  font-weight: 900;
+  content: '\f107';
+  font-family: 'Font Awesome 5 Free';
+  color: #d1d3e2;
+}
+
+.card .card-header[data-toggle="collapse"].collapsed {
+  border-radius: 0.35rem;
+}
+
+.card .card-header[data-toggle="collapse"].collapsed::after {
+  content: '\f105';
+}
+
+.chart-area {
+  position: relative;
+  height: 10rem;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .chart-area {
+    height: 20rem;
+  }
+}
+
+.chart-bar {
+  position: relative;
+  height: 10rem;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .chart-bar {
+    height: 20rem;
+  }
+}
+
+.chart-pie {
+  position: relative;
+  height: 15rem;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .chart-pie {
+    height: calc(20rem - 43px) !important;
+  }
+}
+
+.bg-login-image {
+  background: url("https://source.unsplash.com/K4mSJ7kc0As/600x800");
+  background-position: center;
+  background-size: cover;
+}
+
+.bg-register-image {
+  background: url("https://source.unsplash.com/Mv9hjnEUHR4/600x800");
+  background-position: center;
+  background-size: cover;
+}
+
+.bg-password-image {
+  background: url("https://source.unsplash.com/oWTW-jNGl9I/600x800");
+  background-position: center;
+  background-size: cover;
+}
+
+form.user .custom-checkbox.small label {
+  line-height: 1.5rem;
+}
+
+form.user .form-control-user {
+  font-size: 0.8rem;
+  border-radius: 10rem;
+  padding: 1.5rem 1rem;
+}
+
+form.user .btn-user {
+  font-size: 0.8rem;
+  border-radius: 10rem;
+  padding: 0.75rem 1rem;
+}
+
+.btn-google {
+  color: #fff;
+  background-color: #ea4335;
+  border-color: #fff;
+}
+
+.btn-google:hover {
+  color: #fff;
+  background-color: #e12717;
+  border-color: #e6e6e6;
+}
+
+.btn-google:focus, .btn-google.focus {
+  color: #fff;
+  background-color: #e12717;
+  border-color: #e6e6e6;
+  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+}
+
+.btn-google.disabled, .btn-google:disabled {
+  color: #fff;
+  background-color: #ea4335;
+  border-color: #fff;
+}
+
+.btn-google:not(:disabled):not(.disabled):active, .btn-google:not(:disabled):not(.disabled).active,
+.show > .btn-google.dropdown-toggle {
+  color: #fff;
+  background-color: #d62516;
+  border-color: #dfdfdf;
+}
+
+.btn-google:not(:disabled):not(.disabled):active:focus, .btn-google:not(:disabled):not(.disabled).active:focus,
+.show > .btn-google.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+}
+
+.btn-facebook {
+  color: #fff;
+  background-color: #3b5998;
+  border-color: #fff;
+}
+
+.btn-facebook:hover {
+  color: #fff;
+  background-color: #30497c;
+  border-color: #e6e6e6;
+}
+
+.btn-facebook:focus, .btn-facebook.focus {
+  color: #fff;
+  background-color: #30497c;
+  border-color: #e6e6e6;
+  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+}
+
+.btn-facebook.disabled, .btn-facebook:disabled {
+  color: #fff;
+  background-color: #3b5998;
+  border-color: #fff;
+}
+
+.btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
+.show > .btn-facebook.dropdown-toggle {
+  color: #fff;
+  background-color: #2d4373;
+  border-color: #dfdfdf;
+}
+
+.btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
+.show > .btn-facebook.dropdown-toggle:focus {
+  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+}
+
+.error {
+  color: #5a5c69;
+  font-size: 7rem;
+  position: relative;
+  line-height: 1;
+  width: 12.5rem;
+}
+
+@-webkit-keyframes noise-anim {
+  0% {
+    clip: rect(78px, 9999px, 4px, 0);
+  }
+  5% {
+    clip: rect(87px, 9999px, 70px, 0);
+  }
+  10% {
+    clip: rect(21px, 9999px, 60px, 0);
+  }
+  15% {
+    clip: rect(79px, 9999px, 83px, 0);
+  }
+  20% {
+    clip: rect(20px, 9999px, 28px, 0);
+  }
+  25% {
+    clip: rect(42px, 9999px, 78px, 0);
+  }
+  30% {
+    clip: rect(71px, 9999px, 37px, 0);
+  }
+  35% {
+    clip: rect(89px, 9999px, 49px, 0);
+  }
+  40% {
+    clip: rect(36px, 9999px, 48px, 0);
+  }
+  45% {
+    clip: rect(77px, 9999px, 67px, 0);
+  }
+  50% {
+    clip: rect(7px, 9999px, 94px, 0);
+  }
+  55% {
+    clip: rect(90px, 9999px, 79px, 0);
+  }
+  60% {
+    clip: rect(48px, 9999px, 57px, 0);
+  }
+  65% {
+    clip: rect(64px, 9999px, 35px, 0);
+  }
+  70% {
+    clip: rect(23px, 9999px, 88px, 0);
+  }
+  75% {
+    clip: rect(68px, 9999px, 27px, 0);
+  }
+  80% {
+    clip: rect(39px, 9999px, 98px, 0);
+  }
+  85% {
+    clip: rect(97px, 9999px, 57px, 0);
+  }
+  90% {
+    clip: rect(61px, 9999px, 53px, 0);
+  }
+  95% {
+    clip: rect(79px, 9999px, 44px, 0);
+  }
+  100% {
+    clip: rect(12px, 9999px, 19px, 0);
+  }
+}
+
+@keyframes noise-anim {
+  0% {
+    clip: rect(78px, 9999px, 4px, 0);
+  }
+  5% {
+    clip: rect(87px, 9999px, 70px, 0);
+  }
+  10% {
+    clip: rect(21px, 9999px, 60px, 0);
+  }
+  15% {
+    clip: rect(79px, 9999px, 83px, 0);
+  }
+  20% {
+    clip: rect(20px, 9999px, 28px, 0);
+  }
+  25% {
+    clip: rect(42px, 9999px, 78px, 0);
+  }
+  30% {
+    clip: rect(71px, 9999px, 37px, 0);
+  }
+  35% {
+    clip: rect(89px, 9999px, 49px, 0);
+  }
+  40% {
+    clip: rect(36px, 9999px, 48px, 0);
+  }
+  45% {
+    clip: rect(77px, 9999px, 67px, 0);
+  }
+  50% {
+    clip: rect(7px, 9999px, 94px, 0);
+  }
+  55% {
+    clip: rect(90px, 9999px, 79px, 0);
+  }
+  60% {
+    clip: rect(48px, 9999px, 57px, 0);
+  }
+  65% {
+    clip: rect(64px, 9999px, 35px, 0);
+  }
+  70% {
+    clip: rect(23px, 9999px, 88px, 0);
+  }
+  75% {
+    clip: rect(68px, 9999px, 27px, 0);
+  }
+  80% {
+    clip: rect(39px, 9999px, 98px, 0);
+  }
+  85% {
+    clip: rect(97px, 9999px, 57px, 0);
+  }
+  90% {
+    clip: rect(61px, 9999px, 53px, 0);
+  }
+  95% {
+    clip: rect(79px, 9999px, 44px, 0);
+  }
+  100% {
+    clip: rect(12px, 9999px, 19px, 0);
+  }
+}
+
+.error:after {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  text-shadow: -1px 0 #e74a3b;
+  top: 0;
+  color: #5a5c69;
+  background: #f8f9fc;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim 2s infinite linear alternate-reverse;
+}
+
+@-webkit-keyframes noise-anim-2 {
+  0% {
+    clip: rect(20px, 9999px, 91px, 0);
+  }
+  5% {
+    clip: rect(20px, 9999px, 44px, 0);
+  }
+  10% {
+    clip: rect(84px, 9999px, 55px, 0);
+  }
+  15% {
+    clip: rect(40px, 9999px, 93px, 0);
+  }
+  20% {
+    clip: rect(37px, 9999px, 73px, 0);
+  }
+  25% {
+    clip: rect(75px, 9999px, 57px, 0);
+  }
+  30% {
+    clip: rect(89px, 9999px, 38px, 0);
+  }
+  35% {
+    clip: rect(6px, 9999px, 68px, 0);
+  }
+  40% {
+    clip: rect(63px, 9999px, 17px, 0);
+  }
+  45% {
+    clip: rect(55px, 9999px, 49px, 0);
+  }
+  50% {
+    clip: rect(98px, 9999px, 28px, 0);
+  }
+  55% {
+    clip: rect(18px, 9999px, 57px, 0);
+  }
+  60% {
+    clip: rect(18px, 9999px, 64px, 0);
+  }
+  65% {
+    clip: rect(35px, 9999px, 77px, 0);
+  }
+  70% {
+    clip: rect(31px, 9999px, 59px, 0);
+  }
+  75% {
+    clip: rect(30px, 9999px, 38px, 0);
+  }
+  80% {
+    clip: rect(13px, 9999px, 52px, 0);
+  }
+  85% {
+    clip: rect(63px, 9999px, 91px, 0);
+  }
+  90% {
+    clip: rect(96px, 9999px, 67px, 0);
+  }
+  95% {
+    clip: rect(24px, 9999px, 13px, 0);
+  }
+  100% {
+    clip: rect(5px, 9999px, 29px, 0);
+  }
+}
+
+@keyframes noise-anim-2 {
+  0% {
+    clip: rect(20px, 9999px, 91px, 0);
+  }
+  5% {
+    clip: rect(20px, 9999px, 44px, 0);
+  }
+  10% {
+    clip: rect(84px, 9999px, 55px, 0);
+  }
+  15% {
+    clip: rect(40px, 9999px, 93px, 0);
+  }
+  20% {
+    clip: rect(37px, 9999px, 73px, 0);
+  }
+  25% {
+    clip: rect(75px, 9999px, 57px, 0);
+  }
+  30% {
+    clip: rect(89px, 9999px, 38px, 0);
+  }
+  35% {
+    clip: rect(6px, 9999px, 68px, 0);
+  }
+  40% {
+    clip: rect(63px, 9999px, 17px, 0);
+  }
+  45% {
+    clip: rect(55px, 9999px, 49px, 0);
+  }
+  50% {
+    clip: rect(98px, 9999px, 28px, 0);
+  }
+  55% {
+    clip: rect(18px, 9999px, 57px, 0);
+  }
+  60% {
+    clip: rect(18px, 9999px, 64px, 0);
+  }
+  65% {
+    clip: rect(35px, 9999px, 77px, 0);
+  }
+  70% {
+    clip: rect(31px, 9999px, 59px, 0);
+  }
+  75% {
+    clip: rect(30px, 9999px, 38px, 0);
+  }
+  80% {
+    clip: rect(13px, 9999px, 52px, 0);
+  }
+  85% {
+    clip: rect(63px, 9999px, 91px, 0);
+  }
+  90% {
+    clip: rect(96px, 9999px, 67px, 0);
+  }
+  95% {
+    clip: rect(24px, 9999px, 13px, 0);
+  }
+  100% {
+    clip: rect(5px, 9999px, 29px, 0);
+  }
+}
+
+.error:before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: 1px 0 #4e73df;
+  top: 0;
+  color: #5a5c69;
+  background: #f8f9fc;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim-2 3s infinite linear alternate-reverse;
+}
+
+footer.sticky-footer {
+  padding: 2rem 0;
+  flex-shrink: 0;
+}
+
+footer.sticky-footer .copyright {
+  line-height: 1;
+  font-size: 0.8rem;
+}
+
+body.sidebar-toggled footer.sticky-footer {
+  width: 100%;
+}
+
+
+
+#toast_1 #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast_1 #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast_1.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+#toast_1 {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.navbar {
+  background-color: yellow;
+
+}
+
+
diff --git a/src/app/account-detail/account-detail.component.spec.ts b/src/app/account-detail/account-detail.component.spec.ts
new file mode 100644
index 0000000..4411eb4
--- /dev/null
+++ b/src/app/account-detail/account-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountDetailComponent } from './account-detail.component';
+
+describe('AccountDetailComponent', () => {
+  let component: AccountDetailComponent;
+  let fixture: ComponentFixture<AccountDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account-detail/account-detail.component.ts b/src/app/account-detail/account-detail.component.ts
new file mode 100644
index 0000000..53856e6
--- /dev/null
+++ b/src/app/account-detail/account-detail.component.ts
@@ -0,0 +1,1397 @@
+import { Component, OnInit, Output, EventEmitter, ViewChild } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+import {Contact} from '../contact';
+import * as moment from 'moment-timezone';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdDialog } from '@angular/material';
+import { NotificationSettingComponent } from '../notification-setting/notification-setting.component';
+import { TranslateService } from 'ng2-translate';
+import { AllMenusComponent } from '../all-menus/all-menus.component';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { AddPlanComponent } from './add-plan/add-plan.component';
+
+declare var swal: any;
+declare var $:any;
+
+@Component({
+  selector: 'app-account-detail',
+  templateUrl: './account-detail.component.html',
+  styleUrls: ['./account-detail.component.scss']
+})
+export class AccountDetailComponent implements OnInit {
+  @ViewChild(AllMenusComponent ) languageChangeDetection: AllMenusComponent ; 
+  data_descip: string;
+  phone_number:'numer';
+  final_counter: number;
+  text3: string;
+  driverManagement:boolean=false;
+  paymentGateway:boolean=false
+  // relay_timer:boolean=false;
+ announcement:any;
+ renewalCharges;
+ show:boolean=false;
+ service2
+  service1
+  support1
+  support2;
+  support3
+  bsConfig: Partial<BsDatepickerConfig>;
+  api_key:any;
+  available_languages = [{
+      view : "English",
+      id : "en"
+  },{
+      view : "Spanish",
+      id : "sp"
+  },{
+    view : "Persian",
+    id : "fa"
+},{
+  view : "Arabic",
+  id : "ar"
+},{
+  view : "Portuguese",
+  id : "pr"
+},
+{
+  view : "Albanian",
+  id : "newLan2"
+},
+{
+  view : "French",
+  id : "fr"
+},
+{
+  view : "Indonesian",
+  id : "bhasa_web"
+}];
+  fuelunitArr = ['PERCENTAGE', 'LITRE'];
+  workingHoursArray=[{name:'Digital input1',id:1},{name:'Digital input2',id:2}];
+  workingHours=1;
+  fuelunit = 'LITRE';
+  selectedlanguage='en';
+  GET_notif:any;
+  GET_announcememt:any;
+  showAnnouncementMenu:boolean=false;
+  symbol3: string;
+  timezone:any = 'Asia/Kolkata';
+  final_counter2: number;
+  text2: string;
+  symbol2: string;
+  timezoneArray=[];
+  phone_verfi: boolean;
+  text: string;
+  final_counter1: number;
+  tripGenerationVal:any;
+  tripGenerationArr=[{'view': 'Automatic','value':'auto'},{'view' :'Manual', 'value':'manual'}]
+  symbol: string;
+  email_verfi: boolean;
+  logo: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  cust: boolean;
+  custtype: any;
+  mb: any;
+  useridd: any;
+  or: any;
+fs :any;
+ls:any;
+cond:Boolean = false;
+point : any = 0;
+before:any;
+emailid:any;
+mobile:any;
+contacts: Contact[]=[];
+contact: Contact;
+  Notification: any[];
+  data: any = {
+    ign: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    poi: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    power: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    fuel: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    geo: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    overspeed: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    AC: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    route: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    maxstop: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    sos: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    sms: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+     vibration: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+     lowBattery: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    accAlarm: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    toll: {
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    harshBreak:{
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    harshAcceleration:{
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    over_stopped:{
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    over_idle:{
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+    theft:{
+      sms_status: false, email_status: false,
+      notif_status: false,
+      priority: 1, emails:[], phones:[]
+    },
+
+  };
+  dataOriginal: any;
+  fData: any = {
+  
+  };
+  Load: boolean;
+  notifType: any;
+  isAddEmail: boolean =false;
+  emailList: any;
+  isAddPhone: boolean = false;
+  phonelist: any;
+  shownotifdiv: boolean=true;
+  allocatedPoints: any;
+  colorTheme = 'theme-dark-blue';
+  optiondefault: any;
+  labelSetting:boolean=true
+
+  constructor(private router: Router,private contactService: ContactService,public translate: TranslateService,private _flashMessagesService: FlashMessagesService,public dialog: MdDialog) {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+  superAdmin:Boolean = false;
+  from_date= new Date();
+  to_date = new Date();
+
+  ngOnInit() {
+   
+    var timeZones = moment.tz.names();
+    console.log('timeZones',timeZones);
+
+    var fTime = new Date().setHours(0,0,0,0);
+    this.from_date = new Date(fTime);
+
+    var td  = new Date().setHours(23,59,59,999);
+    this.to_date = new Date(td);
+   
+   
+    this.timezoneArray=[];
+    for (var i in timeZones) {
+      this.timezoneArray.push({ viewValue: "(GMT" + moment.tz(timeZones[i]).format('Z') + ")" + timeZones[i], value: timeZones[i] });
+    }
+    
+
+    setTimeout(() => {
+      $('#dbselect').multipleSelect({
+        width:420,
+        placeholder: 'Select Timezone',
+        filter: true,
+        single: true,
+        selectAll: false
+      })   
+    }, 100);
+
+
+
+    this.logo=window.localStorage['logo'];
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;  
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mobile = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn; 
+    this.email_verfi = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email_verfi; 
+    this.phone_verfi = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phone_verfi; 
+    this.GET_notif = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).GET_notif; 
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.fuelunit = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fuel_unit
+    //console.log(this.mobile) email_verfi phone_verfi
+    // console.log(JSON.parse(window.atob(window.localStorage.token.split('.')[1])))\
+    var supadm =  localStorage.getItem('superadmin');
+    console.log("superadmin=>",supadm);
+    if((supadm == 'ON')||(supadm == 'OFF')||(this.custtype)||(this.superAdmin)){
+     
+      this.shownotifdiv = false;
+    }
+    console.log("shownotifVeh=>",this.shownotifdiv);
+   
+    this.getAlert();
+
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+
+
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+        
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+   this.getCurrencies();
+   this.getLanguage();
+
+   this.getToken();
+   this.getApiKey();
+   this.getTransectionDetail();
+   if(this.superAdmin)
+   this.getRechargePlans()
+   
+
+}
+
+
+myaccount(){
+
+  
+  this.cond = false
+  this.router.navigateByUrl("accountSettings");
+
+
+
+// let dialogRef = this.dialog.open(MyaccountComponent, {
+//   width: '903px',
+//   data: {}
+// });
+
+// dialogRef.afterClosed().subscribe(result => {
+
+//   if(result == "succ"){
+//     console.log("Updated")
+//   }
+
+// });
+
+
+}
+tost1(divid){
+  if(divid == "nofsls"){
+    this.data_descip = "Please Enter Mandatory Fields";
+    launch_toast();
+  }
+ else if(divid == "succ"){
+  this.data_descip = "Succesfully Updated";
+  launch_toast();
+ }
+ else if(divid == "currset"){
+  this.data_descip = "Currency Updated";
+  launch_toast();
+ } else if(divid == "alertset"){
+  this.data_descip = "Alert preference set";
+  launch_toast();
+ }
+    function launch_toast() {
+     // console.log(divid);
+      var x = document.getElementById("toast_1")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+  }
+   }
+
+   
+editAccount(){
+  if(this.fs == "" || this.ls == "" || this.fs == " " || this.ls == " " ){
+      this.tost1("nofsls")
+  }
+  else{
+    var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log('tzone=>',tzone[0]);
+    const newContact ={
+      fname: this.fs,
+      lname: this.ls,
+      org: this.or,
+      noti: this.GET_notif,
+      uid:this.useridd,
+      show_announcement:this.GET_announcememt,
+      label_setting:this.labelSetting?this.labelSetting:false,
+      digital_input:this.workingHours,
+      driverManagement:this.driverManagement,
+      paymentGateway:this.paymentGateway
+      // relay_timer:this.relay_timer
+        }
+        if(this.renewalCharges!=undefined){
+          newContact['renewal_charges']=this.renewalCharges
+        }
+        if(tzone != undefined){
+          newContact['timezone'] = tzone[0];
+        }
+        
+        if(this.fuelunit != undefined){
+          newContact['fuel_unit'] = this.fuelunit;
+        } 
+
+        if(this.support1 != undefined){
+    newContact['support1'] = this.support1;
+}
+ if(this.support2 != undefined){
+    newContact['support2'] = this.support2;
+}
+ if(this.support3 != undefined){
+    newContact['support3'] = this.support3;
+}
+ if(this.service1 != undefined){
+    newContact['service1'] = this.service1
+}
+ if(this.service2 != undefined){
+    newContact['service2'] = this.service2
+}
+
+
+
+
+        console.log(newContact);
+        this.contactService.updateuid(newContact) .subscribe(contact => {
+          this.contacts.push(contact);
+          this.tost1("succ");
+          window.localStorage['token'] = contact.token ; 
+          this.getToken();
+          this.ngOnInit();
+        } , (err: any) => { 
+        
+        if(err.status ==   500) {
+
+         }
+        else{
+       
+  
+        }
+        } 
+      ); 
+  }
+
+}
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+verify_email(){
+  if(this.email_verfi == true){
+    this.symbol = '\u2714';
+    this.text = "Email Verified"
+    this.final_counter1 = 0;
+    return true
+  }
+  else{
+    this.symbol =  'X'
+    this.text = "Email Not Verified"
+    this.final_counter1 = 1;
+    return true
+  }
+}
+
+verify_phone(){
+  if(this.phone_verfi == true){
+    this.symbol2 = '\u2714';
+    this.text2 = "Mobile Verified"
+    this.final_counter2 = 0;
+    return true
+  }
+  else{
+    this.symbol2 =  'X'
+    this.text2 = "Mobile Not Verified"
+    this.final_counter2 =1;
+    return true
+  }
+}
+
+notifications(){
+  this.cond = false
+  this.router.navigateByUrl("notifications");
+}
+
+
+
+
+deal(){
+  if(this.custtype == true){
+    this.symbol3 = '\u2714';
+    this.text3 = "Dealer"
+    this.final_counter = 0;
+    return true
+  }
+  else{
+    this.symbol3 =  'X'
+    this.text3 = "Not a Dealer"
+    this.final_counter =1;
+    return true
+  }
+}
+
+
+
+
+  a(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+  
+  }
+
+  vehicleRoute(){
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+  route_map(){
+    this.router.navigateByUrl("routeMapping");
+
+  }
+
+  
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  
+
+  
+  
+  report_speed(){
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+
+  driverPerformance(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+run(){
+
+}
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+  
+}
+
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const");
+  
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+} 
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+
+
+}
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+selectedFile: File;
+imageURL:any;
+onFileChanged(event) {
+  
+  this.selectedFile = <File>event.target.files[0];
+}
+
+onUpload() {
+
+ const fd = new FormData();
+ fd.append('photo',this.selectedFile,this.selectedFile.name)
+  console.log("Binaryimage = > ",fd );
+  this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      console.log(res);
+      if(res){
+        var pld = {
+          _id : this.useridd,
+          imageDoc : [res['_body']]
+        }
+
+        this.contactService.updateImage(pld).subscribe(res=>{
+          console.log(res);
+          var chkPP = localStorage.getItem('profilePic');
+          if(chkPP != null){
+            localStorage.removeItem('profilePic');
+          }   
+          this.data_descip = "Image Succesfully Shared";
+          launch_toast();
+        })
+
+      }   
+  console.log(res);
+    },err=>{
+      console.log(err);
+    })
+
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast_1")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }
+
+}
+
+// https://www.oneqlik.in/users/uploadImage
+getAlert() {
+  this.Load = true;
+  this.contactService.getcustToken(this.useridd).subscribe(resp => {
+    console.log(resp);
+    this.Load = false;
+    console.log(resp);
+    if (resp['cust'].alert != undefined){
+      console.log("aasas", resp['cust'].alert);
+          var dummy=resp['cust'].alert;
+      // this.data = resp['cust'].alert;
+    
+
+    for(var mData in this.data){
+      for(var pData in dummy){
+        if(mData === pData){
+          console.log(dummy[mData]);
+          this.data[mData]=dummy[mData];
+        }else{
+          this.data[pData]= dummy[pData];
+        }
+      }
+   
+    }
+
+      console.log("kkkk", this.data);
+      this.dataOriginal = JSON.parse(JSON.stringify(this.data));
+    }
+  }, err => {
+    this.Load = false;
+    console.log("err", err);
+  })
+
+}
+
+tab(key1, key2) {
+  if (key1 && key2)
+    this.data[key1][key2] = !this.data[key1][key2];
+
+  if (JSON.stringify(this.data) === JSON.stringify(this.dataOriginal))
+    return;
+
+  this.fData.contactid = this.useridd;
+  this.fData.alert = this.data;
+  this.Load = true;
+  this.contactService.editDealer(this.fData).subscribe(resp => {
+    this.Load = false;
+    this._flashMessagesService.show("Setting Updated", { cssClass: 'alert-success', timeout: 2000 });
+    // toastr.success("Setting Updated");
+   // this.router.navigateByUrl("/account")
+    this.dataOriginal = JSON.parse(JSON.stringify(this.data));
+  }, err => {
+    this.Load = false;
+    this._flashMessagesService.show("Server error , Try after sometime !!!", { cssClass: 'alert-denger', timeout: 2000 });
+    console.log("err", err);
+  })
+}
+
+tab1(key1, key2, value) {
+  if (key1 && key2)
+    if (!value)
+      this.data[key1][key2] = !this.data[key1][key2];
+    else
+      this.data[key1][key2] = value;
+  if (JSON.stringify(this.data) === JSON.stringify(this.dataOriginal))
+    return;
+
+  this.fData.contactid = this.useridd;
+  this.fData.alert = this.data;
+  this.Load = true;
+  this.contactService.editDealer(this.fData).subscribe(resp => {
+ //   toastr.success("Setting Updated");
+ this.Load = false;
+ this._flashMessagesService.show("Setting Updated", { cssClass: 'alert-success', timeout: 2000 });
+   // this.router.navigateByUrl("/account")
+    this.dataOriginal = JSON.parse(JSON.stringify(this.data));
+  }, err => {
+    this.Load = false;
+    this._flashMessagesService.show("Server error , Try after sometime !!!", { cssClass: 'alert-denger', timeout: 2000 });
+    console.log("err", err);
+  })
+}
+
+
+onClickAddEmail(noti){
+  console.log(this.data);
+  console.log(noti);
+  this.notifType=noti;
+  this.isAddEmail=true;
+  var data = {
+    "buttonClick" : 'email',
+    "notifType" : this.notifType,
+    "compData" : this.data
+  }
+  //this.emailList=this.data[noti].emails;
+ // console.log("in Email",this.emailList);
+  let dialogRef = this.dialog.open(NotificationSettingComponent, {
+    data: {"notifData":data}   
+  });
+
+  dialogRef.afterClosed().subscribe(result => {
+    // console.log(result);
+    if (result == "close") {
+    
+    }
+  });
+// this.modelService.getModal('myModal').open();
+}
+onClickAddPhone(noti){
+  console.log(this.data);
+  this.notifType=noti;
+  this.isAddPhone=true;
+  var data = {
+    buttonClick : 'phone',
+    "notifType" : this.notifType,
+    "compData" :this.data
+  }
+ // this.phonelist=this.data[noti].phones;
+//console.log("in Email",this.phonelist)
+// this.modelService.getModal('myModal').open();
+let dialogRef = this.dialog.open(NotificationSettingComponent, {
+  data: {"notifData":data}         
+});
+dialogRef.afterClosed().subscribe(result => {
+  // console.log(result);
+  if (result == "close") {
+   
+  }
+});
+
+}
+
+
+setPriority(notiType, priority) {
+  console.log(priority);
+  console.log(this.data);
+  switch (notiType) {
+    case 'ign':
+      this.data.ign.priority = priority;
+      return;
+    case 'geo':
+      this.data.geo.priority = priority;
+      return;
+    case 'poi':
+      this.data.poi.priority = priority;
+      return;
+    case 'route':
+      this.data.route.priority = priority;
+      return;
+    case 'overspeed':
+      this.data.overspeed.priority = priority;
+      return;
+    case 'maxstop':
+      this.data.maxstop.priority = priority;
+      return;
+    case 'fuel':
+      this.data.fuel.priority = priority;
+      return;
+    case 'AC':
+      this.data.AC.priority = priority;
+      return;
+    case 'power':
+      this.data.power.priority = priority;
+      return;
+    case 'sos':
+      this.data.sos.priority = priority;
+      return;
+    default:
+      return;
+  };
+
+
+}
+
+
+changelanguage(){
+  console.log("inside function");
+  var payload = {
+    uid: this.useridd,
+    lang: this.selectedlanguage
+  }
+  this.contactService.setlanguage(payload).subscribe(res=>{
+    console.log(res);
+    // this.translate.use(this.selectedlanguage);
+    if(res.message == 'language updated sucessfully'){
+      console.log("language saved");
+      localStorage.setItem('appLang',this.selectedlanguage);
+      this.languageChangeDetection.getLanguage()
+      // this.getLanguage()
+    }
+    // this.translate.setDefaultLang('es');
+  },err=>{
+    this.selectedlanguage = 'en' ; 
+  })
+
+}
+
+getLanguage(){
+  var that = this;
+var Var = { uid: this.useridd };
+ this.contactService.getLanguages(Var).subscribe(res=>{
+   this.selectedlanguage = res.language_code ;
+   console.log("fdkjjdfj",res);
+   
+   if(res.isSuperAdmin)
+   {
+     this.showAnnouncementMenu=true
+   }else{
+     this.showAnnouncementMenu=false
+   }
+   this.support1=res.support1?res.support1:undefined
+   this.support2=res.support2?res.support2:undefined
+   this.support3=res.support3?res.support3:undefined
+   this.service1=res.service1?res.service1:undefined
+    this.service2=res.service2?res.service2:undefined
+   this.announcement=res.announcement?res.announcement:undefined
+   this.GET_announcememt=res.show_announcement?res.show_announcement:false;
+   
+   console.log(res.isSuperAdmin,this.showAnnouncementMenu,this.announcement,this.GET_announcememt);
+   
+   this.translate.setDefaultLang(this.selectedlanguage);
+ 
+   this.translate.use(this.selectedlanguage);
+   var currencyfiltered = this.currency.filter(d=>{
+     if(res.currency_code != undefined){
+      if(d.currencyVal === res.currency_code){
+        return d.country;
+      }
+     }else{
+       if(d.currencyVal === 'INR'){
+        return d.country;
+       }
+     }
+   })
+   this.optiondefault = currencyfiltered[0].country;
+ 
+
+  },err=>{
+   console.log(err);
+ })
+
+}
+
+getToken(){
+ 
+  this.contactService.getUserObj(this.useridd).subscribe(res=>{
+    this.timezone = res.timezone; 
+    this.support1=res.support1?res.support1:undefined
+   this.support2=res.support2?res.support2:undefined
+   this.support3=res.support3?res.support3:undefined
+   this.service1=res.service1?res.service1:undefined
+    this.service2=res.service2?res.service2:undefined;
+    this.driverManagement=res.driverManagement?res.driverManagement:false;
+    this.paymentGateway=res.paymentgateway?res.paymentgateway:false;
+    if(res.digital_input){
+      this.workingHours=res.digital_input
+    }
+    if(res.renewal_charges){
+      this.renewalCharges=res.renewal_charges
+    }
+    if(res.tripGeneration != undefined){
+      this.tripGenerationVal = res.tripGeneration ;
+    }
+    // if(res.relay_timer!=undefined){
+    //   this.relay_timer=res.relay_timer
+    // }
+    if(res.label_setting!=undefined){
+        this.labelSetting=res.label_setting
+    }
+    console.log("LABLE SETTING", this.labelSetting);
+    
+    setTimeout(() => {
+      $('#dbselect').multipleSelect({
+        width: 300,
+        placeholder: 'Select Timezone',
+        filter: true,
+        single: true,
+        selectAll: false
+      })   
+    }, 100);
+
+  })
+  
+}
+
+
+
+
+getTransectionDetail(){
+  console.log("Inside Transection Detail Page");
+  this.allocatedPoints =[];
+  if(this.from_date){
+    var fd = this.from_date.toISOString();
+  }
+  if(this.to_date){
+    var td = this.to_date.toISOString()
+  }
+
+  this.contactService.getPointDetails(this.useridd,fd,td).subscribe(res=>{
+    console.log('allocatedPoint',res);
+    this.allocatedPoints = res; 
+    this.show=true;
+  })
+}
+
+
+tripGenerationFunc(ev){
+  console.log(ev);
+  var payload = {
+    uid: this.useridd,
+    tripGeneration: ev.value
+  }
+  this.contactService.setlanguage(payload).subscribe(res=>{
+    console.log('res=>',res);
+    this.getToken()
+
+  this.data_descip = "Setting Saved";
+  launch_toast();
+  })
+
+
+  
+  function launch_toast() {
+    // console.log(divid);
+     var x = document.getElementById("toast")
+     //console.log(x);
+     x.className = "show";
+     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+ }
+
+}
+btnTag:boolean = false;
+btnKey=  'Save'
+getApiKey(){
+  this.contactService.getgoogleApi(this.useridd).subscribe(res=>{
+      if(res.message != "api key not found"){
+        this.api_key = res.api_key; 
+        this.btnTag = true;
+        this.btnKey=  'Change';
+
+      }else{
+      
+        console.log('this.api_key',this.api_key);
+      }
+  })
+}
+
+saveApi(){
+  if(this.btnKey === 'Change'){
+    this.btnTag = false;
+    this.btnKey = 'Save';
+    return;
+  }
+
+  if(this.btnKey === 'Save'){
+      var pld= {
+        u_id: this.useridd,
+        api_key: this.api_key
+      }
+    this.contactService.setgoogleApi(pld).subscribe(res=>{
+          console.log(res);
+          this.data_descip = "Google API Key Saved";
+          launch_toast();
+ 
+  })
+ 
+  }
+
+  function launch_toast() {
+    // console.log(divid);
+     var x = document.getElementById("toast_1")
+     //console.log(x);
+     x.className = "show";
+     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+ }
+}
+
+createAnnouncement(){
+  console.log("In announcement");
+   var payload = {
+    uid: this.useridd,
+    announcement: this.announcement
+  }
+  this.contactService.setlanguage(payload).subscribe(res=>{
+    console.log(res);
+    // this.translate.use(this.selectedlanguage);
+    if(res.message == 'announcement updated sucessfully'){
+      console.log("announcement saved");
+       this.tost1("succ");
+      this.getLanguage()
+    }
+    // this.translate.setDefaultLang('es');
+  })
+  
+}
+
+currency=[];
+getCurrencies(){
+  this.currency = [];
+  // this.contactService.getCurrencies().subscribe(res=>{   
+    var currencyObj = this.currencyJson;  
+    for(var i in currencyObj){
+      if(this.data.currency != undefined){
+        var devicecurr = this.data.currency ; 
+        if(i == devicecurr){    
+          this.optiondefault = i+ '-' +  currencyObj[i];
+         }
+
+      }else{
+        // if(i == 'INR'){    
+        //   this.optiondefault = i+ '-' +  currencyObj[i];
+        //  }
+      }
+  
+    var tempObj = {
+      currencyVal : i,
+      country       : i+ '-' +  currencyObj[i]
+    }
+      this.currency.push(tempObj);
+    }
+  
+    console.log(this.currency);
+    // this.loadropdown();
+  // })
+}
+
+dataSelect=[];
+
+filterStates(val) {
+  console.log(val)
+  // console.log(this.dummyuserData)
+  if (val) {
+    const filterValue: any = val;
+    console.log(this.currency);
+    this.dataSelect = this.currency.filter(function (d) {
+      return d.country.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+    });
+   
+    return this.dataSelect;
+  }
+  
+}
+
+currencySet(){
+  console.log(this.dataSelect);
+  var pld= {
+    uid : this.useridd,
+    currency_code : (this.dataSelect.length !=0)? this.dataSelect[0].currencyVal : this.optiondefault.split('-')[0]
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    this.tost1('currset');
+  })
+}
+rechargePlans
+getRechargePlans(){
+  this.contactService.get('/RechargePlan/get?SupAdmin='+this.useridd).subscribe(res=>{
+    console.log(res);
+    this.rechargePlans=res;
+    
+  })
+}
+
+addNewPlan(){
+  
+let dialogRef = this.dialog.open(AddPlanComponent, {
+  width: '600px',
+  height:'400px',
+  data: null
+});
+
+dialogRef.afterClosed().subscribe(result => {
+
+  if(result == "succ"){
+   this.getRechargePlans()
+  }
+
+});
+}
+
+deletePlan(id){
+  this.contactService.get('/RechargePlan/delete?id='+id).subscribe(res=>{
+    console.log(res);
+    this.getRechargePlans()
+    
+  })
+}
+editPlan(item){
+ let dialogRef = this.dialog.open(AddPlanComponent, {
+  width: '600px',
+  height:'400px',
+  data: item
+});
+
+dialogRef.afterClosed().subscribe(result => {
+
+  if(result == "succ"){
+   this.getRechargePlans()
+  }
+
+}); 
+}
+
+
+
+currencyJson = {
+  "AED": "United Arab Emirates Dirham",
+  "AFN": "Afghan Afghani",
+  "ALL": "Albanian Lek",
+  "AMD": "Armenian Dram",
+  "ANG": "Netherlands Antillean Guilder",
+  "AOA": "Angolan Kwanza",
+  "ARS": "Argentine Peso",
+  "AUD": "Australian Dollar",
+  "AWG": "Aruban Florin",
+  "AZN": "Azerbaijani Manat",
+  "BAM": "Bosnia-Herzegovina Convertible Mark",
+  "BBD": "Barbadian Dollar",
+  "BDT": "Bangladeshi Taka",
+  "BGN": "Bulgarian Lev",
+  "BHD": "Bahraini Dinar",
+  "BIF": "Burundian Franc",
+  "BMD": "Bermudan Dollar",
+  "BND": "Brunei Dollar",
+  "BOB": "Bolivian Boliviano",
+  "BRL": "Brazilian Real",
+  "BSD": "Bahamian Dollar",
+  "BTC": "Bitcoin",
+  "BTN": "Bhutanese Ngultrum",
+  "BWP": "Botswanan Pula",
+  "BYN": "Belarusian Ruble",
+  "BZD": "Belize Dollar",
+  "CAD": "Canadian Dollar",
+  "CDF": "Congolese Franc",
+  "CHF": "Swiss Franc",
+  "CLF": "Chilean Unit of Account (UF)",
+  "CLP": "Chilean Peso",
+  "CNH": "Chinese Yuan (Offshore)",
+  "CNY": "Chinese Yuan",
+  "COP": "Colombian Peso",
+  "CRC": "Costa Rican Colón",
+  "CUC": "Cuban Convertible Peso",
+  "CUP": "Cuban Peso",
+  "CVE": "Cape Verdean Escudo",
+  "CZK": "Czech Republic Koruna",
+  "DJF": "Djiboutian Franc",
+  "DKK": "Danish Krone",
+  "DOP": "Dominican Peso",
+  "DZD": "Algerian Dinar",
+  "EGP": "Egyptian Pound",
+  "ERN": "Eritrean Nakfa",
+  "ETB": "Ethiopian Birr",
+  "EUR": "Euro",
+  "FJD": "Fijian Dollar",
+  "FKP": "Falkland Islands Pound",
+  "GBP": "British Pound Sterling",
+  "GEL": "Georgian Lari",
+  "GGP": "Guernsey Pound",
+  "GHS": "Ghanaian Cedi",
+  "GIP": "Gibraltar Pound",
+  "GMD": "Gambian Dalasi",
+  "GNF": "Guinean Franc",
+  "GTQ": "Guatemalan Quetzal",
+  "GYD": "Guyanaese Dollar",
+  "HKD": "Hong Kong Dollar",
+  "HNL": "Honduran Lempira",
+  "HRK": "Croatian Kuna",
+  "HTG": "Haitian Gourde",
+  "HUF": "Hungarian Forint",
+  "IDR": "Indonesian Rupiah",
+  "ILS": "Israeli New Sheqel",
+  "IMP": "Manx pound",
+  "INR": "Indian Rupee",
+  "IQD": "Iraqi Dinar",
+  "IRR": "Iranian Rial",
+  "ISK": "Icelandic Króna",
+  "JEP": "Jersey Pound",
+  "JMD": "Jamaican Dollar",
+  "JOD": "Jordanian Dinar",
+  "JPY": "Japanese Yen",
+  "KES": "Kenyan Shilling",
+  "KGS": "Kyrgystani Som",
+  "KHR": "Cambodian Riel",
+  "KMF": "Comorian Franc",
+  "KPW": "North Korean Won",
+  "KRW": "South Korean Won",
+  "KWD": "Kuwaiti Dinar",
+  "KYD": "Cayman Islands Dollar",
+  "KZT": "Kazakhstani Tenge",
+  "LAK": "Laotian Kip",
+  "LBP": "Lebanese Pound",
+  "LKR": "Sri Lankan Rupee",
+  "LRD": "Liberian Dollar",
+  "LSL": "Lesotho Loti",
+  "LYD": "Libyan Dinar",
+  "MAD": "Moroccan Dirham",
+  "MDL": "Moldovan Leu",
+  "MGA": "Malagasy Ariary",
+  "MKD": "Macedonian Denar",
+  "MMK": "Myanma Kyat",
+  "MNT": "Mongolian Tugrik",
+  "MOP": "Macanese Pataca",
+  "MRO": "Mauritanian Ouguiya (pre-2018)",
+  "MRU": "Mauritanian Ouguiya",
+  "MUR": "Mauritian Rupee",
+  "MVR": "Maldivian Rufiyaa",
+  "MWK": "Malawian Kwacha",
+  "MXN": "Mexican Peso",
+  "MYR": "Malaysian Ringgit",
+  "MZN": "Mozambican Metical",
+  "NAD": "Namibian Dollar",
+  "NGN": "Nigerian Naira",
+  "NIO": "Nicaraguan Córdoba",
+  "NOK": "Norwegian Krone",
+  "NPR": "Nepalese Rupee",
+  "NZD": "New Zealand Dollar",
+  "OMR": "Omani Rial",
+  "PAB": "Panamanian Balboa",
+  "PEN": "Peruvian Nuevo Sol",
+  "PGK": "Papua New Guinean Kina",
+  "PHP": "Philippine Peso",
+  "PKR": "Pakistani Rupee",
+  "PLN": "Polish Zloty",
+  "PYG": "Paraguayan Guarani",
+  "QAR": "Qatari Rial",
+  "RON": "Romanian Leu",
+  "RSD": "Serbian Dinar",
+  "RUB": "Russian Ruble",
+  "RWF": "Rwandan Franc",
+  "SAR": "Saudi Riyal",
+  "SBD": "Solomon Islands Dollar",
+  "SCR": "Seychellois Rupee",
+  "SDG": "Sudanese Pound",
+  "SEK": "Swedish Krona",
+  "SGD": "Singapore Dollar",
+  "SHP": "Saint Helena Pound",
+  "SLL": "Sierra Leonean Leone",
+  "SOS": "Somali Shilling",
+  "SRD": "Surinamese Dollar",
+  "SSP": "South Sudanese Pound",
+  "STD": "São Tomé and Príncipe Dobra (pre-2018)",
+  "STN": "São Tomé and Príncipe Dobra",
+  "SVC": "Salvadoran Colón",
+  "SYP": "Syrian Pound",
+  "SZL": "Swazi Lilangeni",
+  "THB": "Thai Baht",
+  "TJS": "Tajikistani Somoni",
+  "TMT": "Turkmenistani Manat",
+  "TND": "Tunisian Dinar",
+  "TOP": "Tongan Pa'anga",
+  "TRY": "Turkish Lira",
+  "TTD": "Trinidad and Tobago Dollar",
+  "TWD": "New Taiwan Dollar",
+  "TZS": "Tanzanian Shilling",
+  "UAH": "Ukrainian Hryvnia",
+  "UGX": "Ugandan Shilling",
+  "USD": "United States Dollar",
+  "UYU": "Uruguayan Peso",
+  "UZS": "Uzbekistan Som",
+  "VEF": "Venezuelan Bolívar Fuerte (Old)",
+  "VES": "Venezuelan Bolívar Soberano",
+  "VND": "Vietnamese Dong",
+  "VUV": "Vanuatu Vatu",
+  "WST": "Samoan Tala",
+  "XAF": "CFA Franc BEAC",
+  "XAG": "Silver Ounce",
+  "XAU": "Gold Ounce",
+  "XCD": "East Caribbean Dollar",
+  "XDR": "Special Drawing Rights",
+  "XOF": "CFA Franc BCEAO",
+  "XPD": "Palladium Ounce",
+  "XPF": "CFP Franc",
+  "XPT": "Platinum Ounce",
+  "YER": "Yemeni Rial",
+  "ZAR": "South African Rand",
+  "ZMW": "Zambian Kwacha",
+  "ZWL": "Zimbabwean Dollar"
+}
+}
diff --git a/src/app/account-detail/add-plan/add-plan.component.html b/src/app/account-detail/add-plan/add-plan.component.html
new file mode 100644
index 0000000..a36879e
--- /dev/null
+++ b/src/app/account-detail/add-plan/add-plan.component.html
@@ -0,0 +1,51 @@
+<!-- <div class="modal"> -->
+  <!-- <div class="modal-header"> -->
+    <h4 md-dialog-title>{{title}}</h4>
+  <!-- </div> -->
+  <div md-dialog-content>
+    <form [formGroup]="planForm">
+      <div class="form-group row">
+        <label for="Name" class="col-sm-2 col-form-label">Name</label>
+        <div class="col-sm-10">
+          <input formControlName="Name" type="text" class="form-control" id="Name" placeholder="Enter Plan Name">
+        </div>
+      </div>
+      <div class="form-group row">
+        <label for="Amount" class="col-sm-2 col-form-label">Amount</label>
+        <div class="col-sm-10">
+          <input formControlName="Amount" type="number" class="form-control" id="Amount" placeholder="Enter Amount">
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <label for="status" class="col-sm-2 col-form-label">Status</label>
+        <div class="col-sm-10">
+         <select class="form-control" formControlName="Status"> 
+           <option>Active</option>
+          <option>InActive</option>
+         </select>
+        </div>
+      </div>
+
+        <div class="form-group row">
+          <label for="type" class="col-sm-2 col-form-label">Type</label>
+          <div class="col-sm-10">
+            <select class="form-control" formControlName="Duration_days">
+              <option value=30>Monthly</option>
+              <option Value=90> Quaterly</option>
+              <option value=180>Half Yearly</option>
+              <option value=365>Yearly</option>
+              <option value=1095>3 Years</option>
+            </select>
+          </div>
+        </div>
+      </form>
+    </div>
+    <md-dialog-actions align="end">
+      <button  md-button md-dialog-close>Cancel</button>
+      <button *ngIf="data==null" md-button (click)="submit()"> Save</button>
+        <button  *ngIf="data!=null" md-button (click)="editPlan()"> Update</button>
+      
+    </md-dialog-actions>
+
+<!-- </div> -->
\ No newline at end of file
diff --git a/src/app/account-detail/add-plan/add-plan.component.scss b/src/app/account-detail/add-plan/add-plan.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/account-detail/add-plan/add-plan.component.spec.ts b/src/app/account-detail/add-plan/add-plan.component.spec.ts
new file mode 100644
index 0000000..b3cd2ba
--- /dev/null
+++ b/src/app/account-detail/add-plan/add-plan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddPlanComponent } from './add-plan.component';
+
+describe('AddPlanComponent', () => {
+  let component: AddPlanComponent;
+  let fixture: ComponentFixture<AddPlanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddPlanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddPlanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account-detail/add-plan/add-plan.component.ts b/src/app/account-detail/add-plan/add-plan.component.ts
new file mode 100644
index 0000000..0711c86
--- /dev/null
+++ b/src/app/account-detail/add-plan/add-plan.component.ts
@@ -0,0 +1,72 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-add-plan',
+  templateUrl: './add-plan.component.html',
+  styleUrls: ['./add-plan.component.scss']
+})
+export class AddPlanComponent implements OnInit {
+  planForm:FormGroup;
+  title="Add New Plan"
+  useridd;
+  or
+  constructor(public dialogRef: MdDialogRef<AddPlanComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private fb:FormBuilder,private contactService:ContactService) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName; 
+    this.planForm=this.fb.group({
+      Name:[''],
+      Status:[''],
+      Amount:[''],
+      Duration_days:[''],
+      SupAdmin:[this.useridd],
+      Org:[this.or]
+    })
+    if(this.data!=null){
+      this.title="Edit Plan Details";
+      this.patchPlanForm()
+    }
+  }
+
+  patchPlanForm(){
+  this.planForm.patchValue({
+      Name:this.data.Name,
+      Status:this.data.Status,
+      Amount:this.data.Amount,
+      Duration_days:this.data.Duration_days,
+      SupAdmin:[this.useridd],
+      Org:[this.or]
+    })
+  }
+
+  submit(){
+      console.log(this.planForm.value);
+      this.contactService.post('/RechargePlan/add',this.planForm.value).subscribe(res=>{
+        console.log(res);
+        this.dialogRef.close("succ")
+      })
+  }
+
+  editPlan(){
+    var data={
+      _id:this.data._id,
+      Name:this.planForm.value.Name,
+      Status:this.planForm.value.Status,
+      Amount:this.planForm.value.Amount,
+      Duration_days:this.planForm.value.Duration_days,
+      SupAdmin:this.planForm.value.SupAdmin,
+      Org:this.planForm.value.Org
+    }
+
+    this.contactService.post('/RechargePlan/edit',data).subscribe(res=>{
+      console.log(res);
+         this.dialogRef.close("succ")
+    })
+  }
+
+}
diff --git a/src/app/account/account.component.css b/src/app/account/account.component.css
new file mode 100644
index 0000000..e1cef52
--- /dev/null
+++ b/src/app/account/account.component.css
@@ -0,0 +1,486 @@
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+    /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+     background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
\ No newline at end of file
diff --git a/src/app/account/account.component.html b/src/app/account/account.component.html
new file mode 100644
index 0000000..5fc369b
--- /dev/null
+++ b/src/app/account/account.component.html
@@ -0,0 +1,652 @@
+<html>
+  
+      <head>
+          <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+          <meta name="viewport" content="width=device-width, initial-scale=1">
+          <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
+          
+        </head>
+      <body>
+         
+<div class="upper">
+  <md-toolbar>My App</md-toolbar>
+<md-toolbar flex style="background-color:white;width: 100%;" >
+  
+        <img src="../../assets/image/a.jpg" 
+        style=
+        "width:12%;padding-top: 8px;">
+        
+      <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                   </ul>
+        
+                   <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
+                    <!--    <li  style="float:right;" >
+                           <div class="dropdown">
+                                 <img src="../../assets/image/us.jpg" height=30px>
+                                 <div class="dropdown-content">
+                                     <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
+                                     <h6><p id="insert4"></p></h6>
+                                     &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
+                                      &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
+                                      
+                                         
+                                    </div>
+                               </div>
+                      
+                       </li> -->
+                       <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                          <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                          <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                          <!-- <b> <h4><p id="insert"></p></h4></b>
+                          <h6><p id="insert2"></p></h6> -->
+                          &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                             <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                        </md-menu>
+                        
+                        <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                         <!--   <md-icon>more_vert</md-icon> -->
+                           <img src="../../assets/image/us.jpg" height=30px>
+                        </button>
+                 </ul>
+                       
+                
+             
+                     <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                     <!--     <li style="width:27%;float:right">
+                           <div class="dropdown">
+                                 <img src="../../assets/image/us.jpg" height=30px>
+                                 <div class="dropdown-content">
+                                     <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
+                                     <h6><p id="insert2"></p></h6>
+                                     &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                        <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                         
+                                    </div>
+                               </div>
+                         </li>
+                         -->
+                         <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                           <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                           <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                           <!-- <b> <h4><p id="insert"></p></h4></b>
+                           <h6><p id="insert2"></p></h6> -->
+                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                              <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                         </md-menu>
+                         
+                         <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                          <!--   <md-icon>more_vert</md-icon> -->
+                            <img src="../../assets/image/us.jpg" height=30px>
+                         </button>
+                     
+                   </ul>
+                         
+      
+     </md-toolbar>
+</div>
+
+
+<!-- <div class="icon-bar"> ***-->
+<!--    <a class="active" href="#"><i class="fa fa-home"></i></a>  --> 
+<!--****   <a href="#">PRODUCT LAUNCHER</a> 
+  <a href="#">RULES</a> 
+  
+</div> 
+
+<div class="icon-bar2" style="right:0;">
+    <div class="iphone"></div>
+    <div class="circle"></div>
+    <div class="camera"></div>
+    <div class="speaker"></div>
+    <div class="screen"></div>
+    <div class="home1"></div>
+    <div class="home2"></div>
+    <div class="highlight"></div>
+    <div class="line"></div> 
+
+</div>  -->
+<!-- <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
+  <h3 class="w3-bar-item">Menu</h3>
+  <a href="#" class="w3-bar-item w3-button">Link 1</a>
+  <a href="#" class="w3-bar-item w3-button">Link 2</a>
+  <a href="#" class="w3-bar-item w3-button">Link 3</a>
+</div>
+<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%;right:0;">
+  <h3 class="w3-bar-item">Menu</h3>
+  <a href="#" class="w3-bar-item w3-button">Link 1</a>
+  <a href="#" class="w3-bar-item w3-button">Link 2</a>
+  <a href="#" class="w3-bar-item w3-button">Link 3</a>
+</div> -->
+<!-- 
+<div class="iphone"></div>
+<div class="circle"></div>
+<div class="camera"></div>
+<div class="speaker"></div>
+<div class="screen"></div>
+<div class="home1"></div>
+<div class="home2"></div>
+<div class="highlight"></div>
+<div class="line"></div>  -->
+<!-- <div class="cen">
+    <section>
+        <h1>WWF</h1>
+        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
+      </section>
+
+</div> -->
+
+
+<!-- <div class ="small" >
+
+
+
+</div> -->
+<div class="small">
+    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+  <md-menu #menu="mdMenu">
+
+        <a class="pointer" (click)="soon()">
+          <h6>DASHBOARD
+          <md-icon style="float:right">dashboard</md-icon>
+        </h6>
+      </a>
+        
+         <!--  <a href="http://localhost:4200/account">
+            <h6>PRODUCT LAUNCHER</h6></a> -->
+         <!--   <a class="pointer" (click)="soon()"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+            -->
+           
+           <a (click)="devi()" class="pointer"><h6>DEVICES <md-icon style="float:right">devices</md-icon></h6></a>
+    </md-menu> 
+</div>
+ 
+<!-- <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 18px;">
+  <li style="width:25%;">
+      
+     </li>
+     <li style="float:left;width:22%;padding-left:1.7em;">
+         
+       </li>
+ <li style="float:right;width:40%;">
+ <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+ <md-menu #menu="mdMenu">
+   <button md-menu-item routerLink="home" >Home</button>
+   <button md-menu-item routerLink="community" >Community</button>
+   <button md-menu-item routerLink="support">Support</button>
+ </md-menu></li>
+</ul> -->
+
+
+
+<div style="position:relative">
+    <div class = "first">
+        <div class="icon-bar">
+       <!--  <a class="active" href="#"><i class="fa fa-home"></i></a>   -->
+       <a class="pointer" (click)="soon()">DASHBOARD  <md-icon style="float:right">dashboard</md-icon></a>
+       
+       <!--   <a href="http://localhost:4200/account" style="cursor:pointer;">PRODUCT LAUNCHER</a>  -->
+          <a class="pointer" (click)="soon()">RULES<md-icon style="float:right">dock</md-icon></a> 
+          
+          
+          <a (click)="devi()" class="pointer">DEVICES <md-icon style="float:right">devices</md-icon></a>
+          <a class="pointer" (click)="openNav()" >GPS TRACKER<md-icon style="float:right">my_location</md-icon></a>
+          <a class="pointer" (click)="a()" >DEVICE REPORT<md-icon style="float:right">keyboard_arrow_down</md-icon></a>
+          <a class="pointer" *ngIf="cond" (click)="report()" >Distance<md-icon style="float:right">trending_flat</md-icon></a>
+          <a class="pointer" *ngIf="cond" (click)="report_speed()" >Speed<md-icon style="float:right">trending_up</md-icon></a>     </div>
+          
+        </div>
+    <div class="second">
+  
+      
+<h3 style=" padding-left: 5%;padding-top:2%">{{userId}}  <!-- <md-select  name="typdev"  [(ngModel)]="new">
+    <md-option *ngFor="let device of devices" [value]="device.viewValue" >
+    {{ device.viewValue }}
+    </md-option>
+</md-select> -->
+
+
+<!-- 
+<div class="dropdown">
+    <span> <md-icon>arrow_drop_down</md-icon></span>
+    <div class="dropdown-content">
+      <p>Hello World!</p>
+    </div>
+  </div> -->
+
+
+  <md-menu #deviceMenu="mdMenu" [overlapTrigger]="false">
+     
+    
+  
+    </md-menu>
+    
+  <!--   <button md-icon-button [mdMenuTriggerFor]="deviceMenu"  style="outline:none">
+  
+     <md-icon>arrow_drop_down</md-icon>
+    </button> -->
+
+
+</h3>
+<div class="image" style="    float: right;
+width: 34%;
+margin-top: -2%;
+margin-right: 10%;">
+  <image-upload 
+  [url]="'my-url.com'"
+  [headers]="{Authorization: 'MyToken'}"
+  buttonCaption="SELECT DEVICE IMAGE"
+  dropBoxMessage="DROP YOUR DEVICE IMAGE"
+  >
+  <!-- (removed)="onRemoved($event)" -->
+ </image-upload></div>
+
+<h6 style=" padding-left: 7%;font-size:13px;"><b>Device ID:</b></h6>
+<h6 style=" padding-left: 7%;font-size:10px;">{{deviceid}}</h6>
+<h6 style=" padding-left: 7%;font-size:13px;"><b>Created by:</b></h6>
+<h6 style=" padding-left: 7%;font-size:10px;">{{emailid}}</h6><br> 
+  <!-- <md-icon style=" padding-left: 24px">add</md-icon> <p style="font-size:13px;padding-left: 4%;margin-top:-26px;margin-left:27px;"><md-icon style=" padding-right: 2%;">add</md-icon<b>Created by:</b></p>
+ <p style=" padding-left: 7%;font-size:10px;margin-top: -2%">{{emailid}}</p> --><br>
+<!--  <md-icon style=" padding-left: 24px">create</md-icon>  --><!-- <p style="font-size:13px;padding-left: 5%;margin-top:-27px;margin-left:27px;">Last Edited:</p>
+ <p style=" padding-left: 8%;font-size:10px;margin-top:-12 px">6 hours ago</p> -->
+ <!-- <md-icon style=" padding-left: 24px">computer</md-icon>  --><!-- <p style="font-size:13px;padding-left: 65px;margin-top:-27px;margin-left:27px;">Devices:</p>
+ <p style=" padding-left: 59px;font-size:10px;margin-top:-12 px">1</p> -->
+ 
+        <hr>
+    
+        <md-tab-group  style="overflow: hidden;">
+            <md-tab label="Datamatrix">
+
+
+               <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;float:left;" (click)="openDialog()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
+
+
+
+               <table class="table table-striped table-hover ">
+                  
+                  <thead>
+                    
+                    <tr>
+                      <th>Matrix Name</th>
+                      <th>API</th>
+
+                    </tr>
+                  </thead>
+                
+                  <tbody>
+         <!--      
+                  <tr *ngFor="let device of mat ">
+                   
+                      <td  width="50" >{{device.Matrix_Name}}</td>
+
+    
+                      <td width="60" style="cursor:pointer" (click)="matrixred(device.API)">{{device.API}}</td>
+                       <td width="10"> <p><button data-tooltip="Remove Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete(device.Device_ID)">   
+                          
+                         <md-icon>delete</md-icon></button></p>
+                        </td> 
+                     
+                  </tr> -->
+                  </tbody> 
+                </table> 
+
+
+
+
+
+
+
+
+
+
+
+
+
+          
+           <!--    <div class="newspaper">
+          
+          
+            <h6 *ngFor="let ls of l" >
+               <h5><b>   &#10140; </b>{{ ls}} </h5>
+              </h6>
+          
+          
+              </div> -->
+            
+            </md-tab>
+            <md-tab label="Rule" style="overflow: hidden;">
+          
+                <table class="table table-striped table-hover ">
+                    
+                    <thead>
+                      <tr>
+                        <th align="left">Action</th>
+                        <th align="left">User Info</th>
+                        <th align="left">Condition</th>
+                        <th align="left">value</th>
+                      </tr>
+                    </thead>
+                  
+                    <tbody>
+                
+                <!--     <tr *ngFor="let device of devices" (click)="vewdev(device.Device_Name)">
+                      <td>{{device.Device_ID }}</td>
+                        <td>{{ device.Device_Name }}</td>
+                        <td>{{device.type_of_device }}</td>
+                        <td> {{device.Device_Des}}</td>
+                    </tr> -->
+          
+            <!--         <tr>
+                          <td align="left"></td>
+                          <td align="left"></td>
+                          <td align="left"></td>
+                          <td align="left"></td>
+                          <th align="left"> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
+                          </th> 
+                      </tr>  --> 
+                    </tbody> 
+                  </table> 
+                  <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent; position: fixed;bottom: 0;right: 0;" (click)="openDialog2()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
+                  
+            </md-tab>
+            <md-tab label="Scheduler">
+                <expansion-panels-container >
+                    <expansion-panel   #panel style="margin-left:2px;" >
+                        <expansion-panel-title>
+                          <md-icon style="float:left;width:26px;">add</md-icon>   <b> Add Scheduler</b>
+                        </expansion-panel-title>
+                 
+                        <expansion-panel-description-hidden>
+                            
+              
+                        </expansion-panel-description-hidden>
+                 
+                        <expansion-panel-description-toggled>
+                           .....
+                        </expansion-panel-description-toggled>
+                 
+                        <expansion-panel-content style="height:30px">
+          <div class ="sch"> <div style="
+          
+            outline: none;
+              width: 45%;
+            cursor: pointer;float:left;">
+            <p>ON Time:</p>
+            <timepicker [(ngModel)]="onn_time"></timepicker></div>
+            <!-- <input type="time" name="onn_time" [(ngModel)]="onn_time"style="width:191px;margin-left:-121px;outline: none;cursor:pointer;" required> -->
+
+         
+           <div style="
+           outline: none;
+           cursor: pointer;
+          
+           ">
+           <p>OFF Time:</p><timepicker [(ngModel)]="offf_time"></timepicker></div>
+                          <form  class="form-group" name="myForm"  #lgForm="ngForm">
+                     
+
+                        <!--  <label style="    float: left;
+                         margin-left: -33%;
+                         margin-top: 5%;">ON Time : </label> -->
+                        <!-- <input type="time" name="offf_time" [(ngModel)]="offf_time"style="width:191px;outline: none;cursor:pointer;" required> -->
+                            <!--   <md-select name="action" placeholder="Action" 
+                              style="margin-top:-18px;width:45%;float:left;margin-left:-31%;padding-right:18px" [(ngModel)]="action">
+                                   <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+                                   {{ food.viewValue }}
+                                   </md-option>
+                               </md-select>
+
+
+                          <material-datepicker [(date)]="date" style="margin-left:100px;outline: none;cursor:pointerp;border: 0px none;"
+                          ></material-datepicker> --><br><br>
+
+
+                          <md-select name="rep" placeholder="Repitation" style="width:45%;float:left;padding-right:109px;    padding-top: 2px;" [(ngModel)]="rep" (change)="onChange(rep)" required>
+                            
+                              <md-option *ngFor="let food of foodss" [value]="food.viewValue" >
+                                  {{ food.viewValue }}
+                                  </md-option>
+                                  
+                            </md-select>
+                           <div style=" padding-top: 2px;" *ngIf="daydes" >
+                            <div  class="weekDays-selector" >
+                              <input name="dayselM" type="checkbox" id="weekday-mon" class="weekday"  [(ngModel)]="dayselM" />
+                              <label for="weekday-mon">M</label>
+                              <input name="dayselT" type="checkbox" id="weekday-tue" class="weekday"  [(ngModel)]="dayselT"/>
+                              <label for="weekday-tue">T</label>
+                              <input name="dayselW"  type="checkbox" id="weekday-wed" class="weekday"  [(ngModel)]="dayselW"/>
+                              <label for="weekday-wed">W</label>
+                              <input name="dayselTH" type="checkbox" id="weekday-thu" class="weekday"  [(ngModel)]="dayselTH" />
+                              <label for="weekday-thu">Th</label>
+                              <input name="dayselF" name="daysel" type="checkbox" id="weekday-fri" class="weekday"  [(ngModel)]="dayselF" />
+                              <label for="weekday-fri">F</label>
+                              <input name="dayselSa" type="checkbox" id="weekday-sat" class="weekday"  [(ngModel)]="dayselSa"/>
+                              <label for="weekday-sat">Sa</label>
+                              <input name="dayselSu" type="checkbox" id="weekday-sun" class="weekday"  [(ngModel)]="dayselSu"/>
+                              <label for="weekday-sun">S</label>
+                            </div>
+                           </div>
+                            <div *ngIf="rep == 'Monthly'">
+                            <label  style="float:left;">From Date : </label>
+                            <material-datepicker [(date)]="date1" style="width:191px;outline: none;cursor:pointer;"  required
+                            ></material-datepicker><br>
+ 
+                            <br><label style="float:left;    margin-top: 3%">To Date : </label> <material-datepicker  [(date)]="date2"  style="width:191px;outline: none;cursor:pointer;"required
+                            ></material-datepicker> 
+                           
+                            <md-form-field class="example-full-width width" style="
+                            width: 45%;
+                            ">
+                                <input mdInput type="text" [(ngModel)]="Expiry" name="Expiry" placeholder="Expiry (In Months)" required >
+                                <md-error class="required">Enter Expiry Period</md-error>
+                                 </md-form-field>
+                          </div>
+                            
+                            <div *ngIf="rep == 'Daily'"> 
+                                <md-form-field class="example-full-width width" style="float:left;width:32%">
+                                    <input mdInput type="text" [(ngModel)]="Expiry" name="Expiry" placeholder="Expiry (In Days)"  >
+                                    <!-- <md-error class="required">Enter Expiry Period</md-error>-->
+                                     </md-form-field> 
+                                
+                            </div>
+                            <div *ngIf="rep == 'Weekly'"> 
+                                <md-form-field class="example-full-width width" style="float:left;width:42%">
+                                    <input mdInput type="text" [(ngModel)]="Expiry" name="Expiry" placeholder="Expiry (In Weeks)"  >
+                                   
+                                     </md-form-field>
+                                
+                            </div><br>
+                             
+                       <!--    <time-duration-picker [inputDisabled]=false returnedValueUnit="hour" (onChange)="onNumberChanged($event)" class="row">
+                            <time-duration-picker-unit class="col-md-2" [name]="'second'" [label]="'Seconds'" [min]="0" [max]="59" [step]="1"></time-duration-picker-unit>
+                            <time-duration-picker-unit class="col-md-2" [name]="'minute'" [label]="'Minutes'" [min]="0" [max]="59" [step]="1"></time-duration-picker-unit>
+                            <time-duration-picker-unit class="col-md-2" [name]="'hour'" [label]="'Hours'" [min]="0" [max]="23" [step]="1"></time-duration-picker-unit>
+                         </time-duration-picker> -->
+                         
+                        <br>
+                        <input type="reset" class="btn btn-primary" style="margin-top: 18px;cursor:pointer"  value="Clear"/>  
+                        <input type="submit" class="btn btn btn-success" style="margin-top: 18px;cursor:pointer
+                        " value="Generate Sheduler" (click)="addshe(onn_time,offf_time)" />
+                      </form>
+                    </div>
+                    <div class="schlar"> <!-- small screen -->
+                     
+                        <form  class="form-group"  #lgForm="ngForm">
+                            
+       
+                                <label style="float:left;margin-left:-31%;">ON Time : </label><input type="time" name="onn_time" [(ngModel)]="onn_time"style="width:134px;margin-left:7px;outline: none;cursor:pointer;" required><br>
+       
+                                <br><label style="float:left;margin-left:-31%;">OFF Time : </label><input type="time" name="offf_time" [(ngModel)]="offf_time"style="width:130px;margin-left:7px;outline: none;cursor:pointer;" required>
+                                <br>
+       
+       
+                                 <br>
+                                 
+                                 
+                                 <md-select name="rep" placeholder="Repitation" style="margin-top:-18px;width:117%;float:left;margin-left:-31%;padding-right:18px" 
+                                 (change)="onChange(rep)"
+                                 [(ngModel)]="rep" required>
+                                     <md-option *ngFor="let food of foodss" [value]="food.viewValue" >
+                                         {{ food.viewValue }}
+                                         </md-option>
+                                   </md-select><br>
+                                   <div  *ngIf="daydes" >
+                                   <br><div style="float:left;margin-left: -38%;" class="weekDays-selector" >
+                                     <input name="dayselM" type="checkbox" id="weekday-mon" class="weekday"  [(ngModel)]="dayselM" />
+                                     <label for="weekday-mon">M</label>
+                                     <input   name="dayselT" type="checkbox" id="weekday-tue" class="weekday"  [(ngModel)]="dayselT"/>
+                                     <label for="weekday-tue">T</label>
+                                     <input name="dayselW"  type="checkbox" id="weekday-wed" class="weekday"  [(ngModel)]="dayselW"/>
+                                     <label for="weekday-wed">W</label>
+                                     <input name="dayselTH" type="checkbox" id="weekday-thu" class="weekday"  [(ngModel)]="dayselTH" />
+                                     <label for="weekday-thu">Th</label>
+                                     <input name="dayselF" name="daysel" type="checkbox" id="weekday-fri" class="weekday"  [(ngModel)]="dayselF" />
+                                     <label for="weekday-fri">F</label>
+                                     <input name="dayselSa" type="checkbox" id="weekday-sat" class="weekday"  [(ngModel)]="dayselSa"/>
+                                     <label for="weekday-sat">Sa</label>
+                                     <input name="dayselSu" type="checkbox" id="weekday-sun" class="weekday"  [(ngModel)]="dayselSu"/>
+                                     <label for="weekday-sun">S</label>
+                                   </div><br></div>
+       
+                                   <div *ngIf="rep == 'Monthly'">
+                                  <br> <label style="margin-left:-39%;">From Date : </label>
+                                   <material-datepicker [(date)]="date" style="width:134px;margin-left:7px;outline: none;cursor:pointer;"  
+                                   ></material-datepicker><br>
+        
+                                   <label style="float:left;margin-left:-31%;">To Date : </label> <material-datepicker  [(date)]="date" style="width:130px;margin-left:7px;outline: none;cursor:pointer;"
+                                   ></material-datepicker><br></div>
+                                   
+                                   <div *ngIf="rep == 'Daily'"> 
+                                   
+                                       <md-form-field class="example-full-width width" style="float:left;margin-left:-31%;width:117%">
+                                           <input mdInput type="text" [(ngModel)]="Expiry" name="Expiry" placeholder="Expiry (In Days)"  ><br>
+                                          
+                                            </md-form-field>
+                                       
+                                   </div>
+                                   <div *ngIf="rep == 'Weekly'"> 
+                                       <md-form-field class="example-full-width width" style="float:left;margin-left:-31%;width:117%">
+                                           <input mdInput type="text" [(ngModel)]="Expiry" name="Expiry" placeholder="Expiry (In Weeks)" ><br>
+                                          
+                                            </md-form-field>
+                                       
+                                   </div><br>
+ 
+                               <input type="submit" class="btn btn-primary" style="margin-left:-22px;margin-top: 18px;cursor:pointer;    margin-left: 5%;"  value="Clear"(click)='null_fun()'/>  
+                               <input type="submit" class="btn btn btn-success" style="margin-left:2px;margin-top: 18px;cursor:pointer
+                               " value="Generate Sheduler" (click)="addshe(onn_time,offf_time) "/>
+                             </form>
+
+                  
+                    </div>
+                    <flash-messages style="float: left;    width: 547px;
+                    margin-left: -15%;"></flash-messages>
+                    <br>
+      
+                   
+                        </expansion-panel-content>
+                 
+                        <expansion-panel-buttons>
+                        <!-- 
+                          <button md-button (click)="panel.cancel()">
+                            Cancel
+                        </button> -->
+          <!--                   <button (click)='pancel.submit()'>Submit</button>
+           -->
+           
+          </expansion-panel-buttons>
+                    </expansion-panel>
+                   
+                </expansion-panels-container>
+             <!--  <h6 *ngFor="let ls of l" >
+                <h5><b></b>{{ ls}} </h5>
+               </h6> -->
+          
+          <!--      <form class="form-group"  #lgForm="ngForm" style="float:left">   
+               <md-select name="typdev" placeholder="Select Action" [(ngModel)]="new">
+                    <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+                    {{ food.viewValue }}
+                    </md-option>
+                </md-select>
+                <material-datepicker [(date)]="yourModelDate"></material-datepicker>
+               </form> -->
+
+               <flash-messages style="width: 547px;
+              "></flash-messages>
+               <table class="table table-striped table-hover ">
+                  
+                  <thead align="center"> 
+                    <tr>
+                      <th> Device Name</th>
+                      <th>ON Time</th>
+                      <th>OFF Time</th>
+
+                    </tr>
+                  </thead>
+                
+                  <tbody>
+              
+                      <tr *ngFor="let device of on_table ">
+        <td>{{f_did}}</td>
+
+           <td>{{device.f_o_t}} </td>            
+           <td>{{device.f_f_t}} </td>
+            
+                                           
+              
+                  <!-- <td>{{f_did}}</td>
+                  <td>{{f_on}}</td>
+                  <td>{{f_off}}</td> -->
+             
+                  <td width="2%"> <p><button *ngIf="del" data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;cursor:pointer"(click)="edit_schedule(f_did,device.f_o_t,device.f_f_t,device.f_o_id)">   <md-icon>mode_edit
+                    </md-icon></button></p>
+                  </td> 
+                      <td> <p><button *ngIf="del" data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;cursor:pointer"(click)="delete_schedule(device.f_o_id)">   <md-icon>delete</md-icon></button></p>
+                      </td> 
+                  </tr>  
+                  </tbody> 
+                </table> 
+    <!--             <br><table class="w3-table w3-striped">
+                <tr>
+                  <th>Action</th>
+                  <th>Selected Date</th>
+                  <th>Selected Time</th>
+                  <th>Repetation</th>
+                </tr>
+                <tr>
+                  <td>SMS</td>
+                  <td>06/10/2017</td>
+                  <td>10:20 Am</td>
+                  <td>Daily</td>
+                  <td> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
+                  </td> 
+                </tr>
+              </table>  -->             
+            </md-tab>
+           <!--  <md-tab label="Intigrate">Intigrate</md-tab> -->
+          </md-tab-group>
+          <br><br><br>
+    </div>
+<!--     <div style="float:left; width: 25%; height:86vh;overflow-y: hidden;
+    overflow-x: hidden;  ">
+      <div  class="off">
+        <div class="iphone"></div>
+        <div class="circle"></div>
+        <div class="camera"></div>
+        <div class="speaker"></div>
+        <div class="screen">
+         <b> <h3 style=" padding-left: 10px;font-size:20px;text-align:center">{{userId}} </h3>
+         </b></div>
+        <div class="home1"></div>
+        <div class="home2"></div>
+        <div class="highlight"></div>
+        <div class="line"></div> 
+    </div></div> -->
+
+
+  </div>
+
+      </body>
+
+
+
diff --git a/src/app/account/account.component.spec.ts b/src/app/account/account.component.spec.ts
new file mode 100644
index 0000000..f3171ba
--- /dev/null
+++ b/src/app/account/account.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/account/account.component.ts b/src/app/account/account.component.ts
new file mode 100644
index 0000000..6dbdbe9
--- /dev/null
+++ b/src/app/account/account.component.ts
@@ -0,0 +1,584 @@
+import { Component, OnInit,Output,EventEmitter } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {GmapComponent} from '../gmap/gmap.component';
+import { EditScheComponent } from '../edit-sche/edit-sche.component';
+
+import {RuleComponent} from '../rule/rule.component';
+import { ExpansionPanelsModule } from 'ng2-expansion-panels';
+import {ContactService} from '../contact.service';
+import { TimeDurationPickerModule } from 'angular2-time-duration-picker';
+import {Schedule} from '../shedule';
+import {Scheduleb} from '../scheduleb';
+import {Schedulec} from '../schedulec';
+import { DatePipe } from '@angular/common';
+import {Device} from '../device';
+import * as moment from 'moment-timezone';
+import * as io from 'socket.io-client';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import { DatepickerModule as YourAlias } from 'angular2-material-datepicker'
+@Component({
+  selector: 'app-details',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.css'],
+  providers: [ContactService,DatePipe]
+})
+export class AccountComponent implements OnInit {
+  @Output() private onClose: EventEmitter<AccountComponent> = new EventEmitter();
+  @Output() private onCancel: EventEmitter<any> = new EventEmitter();
+  public cancel(): void {
+    this.unselect();
+    this.onCancel.emit();
+}
+private unselect(): void {
+  //this.container.selectedPanel = undefined;
+  this.onClose.emit(this);
+}
+  animal: string;
+  name: string;
+/*   foods = [
+    {value: 'SMS', viewValue: 'SMS'},
+    {value: 'Email', viewValue: 'Email'},
+    {value: 'Push', viewValue: 'Push Notification'},
+  ]; */
+  foodss = [
+    {value: 'Daily', viewValue: 'Daily'},
+/*     {value: 'Weekly', viewValue: 'Weekly'},
+    {value: 'Monthly', viewValue: 'Monthly'}, */
+  ];
+  
+  devices = [
+    {value: 'steak-0', viewValue: 'Steak'},
+    {value: 'pizza-1', viewValue: 'Pizza'},
+    {value: 'tacos-2', viewValue: 'Tacos'}
+  ];
+  device: Device;
+  Device_ID: string;
+  schedules: Schedule[];
+  schedule: Schedule;
+  schedulesb: Scheduleb[];
+  scheduleb: Scheduleb;
+  schedulesc: Schedulec[];
+  schedulec: Schedulec;
+  action:any;
+  rep:any;
+  month : boolean =false;
+  daydes : boolean =true;
+  myForm:any;
+  date:any;
+  dayselM:any ;
+  dayselT:any;
+  dayselW:any;
+  dayselTH:any;
+  dayselF:any;
+  dayselSa:any ;
+  dayselSu:any ;
+  Expiry:any;
+  date1:any;
+  date2:any;
+ df:any
+sheds:any;
+on_uid:any;
+off_uid:any;
+on_time_h:any;
+on_time_m:any;
+timedecoff_h:any;
+timedecoff_m:any;
+on_time:any;
+off_time:any;
+on_time_h_e:any;
+on_time_m_e:any;
+str:any;
+sub_minutes:any;
+hours_conv:any;
+hour_on:any;
+minute_on:any;
+off_time_h_e:any;
+off_time_h:any;
+off_time_m_e:any;
+off_time_m:any;
+sub_minute:any;
+hours_con:any;
+hour_off:any;
+minute_off:any
+mess:any;
+mess2:any;
+ontime:any
+offtime:any;
+dev:any;
+did:any;
+dexp:any;
+onn_time: Date ;
+offf_time: Date;
+panel:any;
+private socket;
+matrixred(link){
+  window.open(link);
+}
+saveForm(){
+  
+}
+
+edit_schedule(a,b,c,d): void {
+  let dialogRef = this.dialog.open(EditScheComponent, {
+    width: '548px',
+    data: { did: this.deviceid, Device_name: a,on_time: b,off_time:c,on_id:d}
+  });
+  dialogRef.afterClosed().subscribe(result => {
+
+    this.on_table=[];
+    this.tabledata();
+
+  });
+}
+delete_schedule(did){
+
+ this.contactService.delshu(did)
+.subscribe(
+  
+  dev  => {
+   this.dev = dev
+   //this._flashMessagesService.show('Deleted Sucessfully !!', {  timeout: 1000});
+   this.on_table=[];
+   this.tabledata();
+  }
+  
+);
+  //this.on_table=[];
+ // this.tabledata();
+    
+}
+
+
+logout(){
+
+  this.router.navigateByUrl("login");
+}
+
+
+soon(){
+
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+
+openNav() {
+
+   this.router.navigateByUrl("location?_dname="+ this.userId +"_id="+this.deviceid);
+   
+}
+
+  addshe(onn_time,offf_time)
+  
+  {
+
+    this.ontime = this.onn_time
+    this.offtime = this.offf_time
+    function randomString(length, chars) {
+      var mask = '';
+      if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+      if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      if (chars.indexOf('#') > -1) mask += '0123456789';
+      if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+      var result = '';
+      for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+      return result;
+        }
+        this.on_uid=randomString(5, 'a#A');
+        this.off_uid=randomString(6, 'a#A');
+
+
+
+  this.did =this.userId;
+  this.dexp=this.Expiry
+    if(this.rep === "Daily" ){
+      
+ 
+ 
+
+     
+        if(this.ontime === undefined){
+        
+          this._flashMessagesService.show('Error: Enter ON Time !!', {  timeout: 2000});
+          
+        }
+        else if(this.offtime === undefined){
+          this._flashMessagesService.show('Error: Enter OFF Time !!', {  timeout: 2000});
+        }
+        else if(this.ontime == this.offtime){
+          this._flashMessagesService.show('Error: Same ON Time and OFF Time !!', {  timeout: 2000});
+          
+        }
+        else{
+      const newshe ={
+        did : this.did,
+        ontime: this.ontime,
+        on_uid:this.on_uid,
+        offtime: this.offtime,
+        off_uid:this.off_uid ,
+        wday: [this.dayselM,this.dayselT,this.dayselW,this.dayselTH,this.dayselF,this.dayselSa,this.dayselSu],
+        dexp : this.dexp
+        
+     }
+
+    
+           this.contactService.addshe(newshe)
+          .subscribe(schedule => {
+            
+              this._flashMessagesService.show('Congratulation you have sucessfully created the scheduler !!!', {  timeout: 1000});       
+              this.tabledata();
+              this.panel.cancel()
+          this.schedules.push(schedule);
+          this.null_fun();
+          } , (err: any) => {
+        
+          if(err.status ==   500)
+          {
+            this.mess = err._body.split(":")[1] ;
+            this.mess2 = this.mess.split("}")[0];
+            this._flashMessagesService.show("Error: "+this.mess2, { timeout: 2000 });
+          }     
+        }
+        );    
+    }}
+    else if(this.rep === "Weekly")
+    {
+     
+       const newshe ={
+       // repitation: this.rep,
+       did : this.userId,
+        on_time:this.on_time,
+        on_uid:this.on_uid,
+        off_time:this.off_time,
+        off_uid:this.off_uid,
+        w_day: [this.dayselM,this.dayselT,this.dayselW,this.dayselTH,this.dayselF,this.dayselSa,this.dayselSu],
+        wexp : this.Expiry
+     }  
+   
+      this.contactService.addshe(newshe)
+      .subscribe(scheduleb => {
+        this._flashMessagesService.show('Congratulation you have sucessfully created the scheduler !!!', {  timeout: 3000});       
+        this.null_fun();
+      this.contactService.getShe(this.devicename).subscribe(
+        
+        data => {
+          this.sheds = data 
+          this.final = this.sheds.daily_sched
+       
+        });
+
+      this.schedulesb.push(scheduleb);
+  
+      }, (err: any) => { 
+     
+      if(err.status ==   500)
+      {
+        this.mess = err._body.split(":")[1] ;
+        this.mess2 = this.mess.split("}")[0];
+        
+    
+        this._flashMessagesService.show("Error: Scheduling For this Device Already Exict Please Remove Earlier one !!", { timeout: 7000 });
+     
+      } 
+
+    }
+    ); 
+    }
+    else if(this.rep === "Monthly")
+    {
+      let  fromdate =this.datepipe.transform(this.date1, 'yyyy-MM-dd');
+      let  todate =this.datepipe.transform(this.date2, 'yyyy-MM-dd');
+      
+      const newshe ={
+        did :  this.deviceid,
+        fdate: fromdate,
+        tdate: todate,
+        ftime:this.on_time,
+        on_uid:this.on_uid,
+        ttime:this.off_time,
+        off_uid:this.off_uid,
+        mexp : this.Expiry
+
+     } 
+  
+
+     var subbed = new Date(this.date1 - 3*60*60*1000); 
+  
+    /*  this.on_time = null; */
+   /*  
+    this.contactService.addshe(newshe)
+    .subscribe(schedulec => {
+      this._flashMessagesService.show('Congratulation you have sucessfully created the scheduler !!!', {  timeout: 3000});       
+     this.null_fun();
+    this.schedulesc.push(schedulec);
+    console.log(schedulec.message);
+    }, (err: any) => { console.log(err.status); 
+      console.log(err);
+    if(err.status ==   500)
+    {
+      this.mess = err._body.split(":")[1] ;
+      this.mess2 = this.mess.split("}")[0];
+      
+      console.log(this.mess);
+      this._flashMessagesService.show("Error: Scheduling For this Device Already Exict Please Remove Earlier one !!", { timeout: 7000 });
+      console.log("Error"); 
+    } 
+  
+  
+  
+  } 
+  
+  );  */
+    
+    }
+    }
+  
+  onChange(value){
+    if(value === "Daily"){
+      this.daydes = true;
+      this.dayselM = true ;
+      this.dayselT = true ;
+      this.dayselW = true ;
+      this.dayselTH = true ;
+      this.dayselF = true ;
+      this.dayselSa = true ;
+      this.dayselSu = true ;
+      }
+      else if(value === "Monthly")
+      {
+        this.daydes = false;
+        this.dayselM = false ;
+        this.dayselT = false ;
+        this.dayselW = false ;
+        this.dayselTH = false ;
+        this.dayselF = false ;
+        this.dayselSa = false ;
+        this.dayselSu = false ;
+        
+      }
+    else{
+      this.daydes = true;
+        this.dayselM = false ;
+        this.dayselT = false ;
+        this.dayselW = false ;
+        this.dayselTH = false ;
+        this.dayselF = false ;
+        this.dayselSa = false ;
+        this.dayselSu = false ;
+      
+    }
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+
+  }
+  cond:Boolean = false;
+  point : any = 0;
+   a(){
+   
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+  
+  }
+  report_speed(){
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  
+  delete(){
+    // console.log("DELETE RUNNING");
+  }
+  jun = moment();
+  constructor(private _flashMessagesService: FlashMessagesService,private router: Router,public datepipe: DatePipe,public dialog: MdDialog, private contactService: ContactService, private activatedRoute: ActivatedRoute) {
+
+    
+   }
+  openDialog(): void {
+    let dialogRef = this.dialog.open(GmapComponent, {
+      width: '480px',
+      data: { did: this.deviceid, animal: this.animal }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log('The dialog was closed');
+
+      this.contactService.getmatrix( this.deviceid).subscribe(
+        
+        mat_data => {
+          this.mat = mat_data 
+/*             this.final = this.sheds[length].daily_sched.ontime;
+*/           
+          // console.log(this.mat);
+          // console.log( mat_data);
+        }); 
+
+
+      
+      this.animal = result;
+      // console.log(this.animal);
+     /*  this.l.push(this.animal) */
+    });
+  }
+  openDialog2(): void {
+    let dialogRef = this.dialog.open(RuleComponent, {
+      width: '700px',
+      //data: { name: "1234567890", animal: this.animal }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log('The dialog was closed');
+     // this.animal = result;
+     // console.log(this.animal);
+     // this.l.push(this.animal)
+    });
+  }
+  private l = [];
+  userId:any;
+  divinfo(){
+ 
+  }
+  fs :any;
+  ls :any;
+  or :any;
+  userID :any;
+  emailid :any;
+  devicess:any;
+  fm:any;
+  deviceid:any;
+  devicedata:any;
+  devicename:any;
+  final:any;
+  final2:any;
+  onGmt:any;
+  offGmt:any;
+  mat:any;
+  on:any;
+  off:any;
+  f_on:any;
+  f_off:any;
+  d:any;
+  f_did:any;
+  f_onn:any;
+  f_offf:any;
+  f_didd:any;
+  list:any;
+  del:boolean=true;
+  on_table = [];
+ data:any;
+
+ null_fun(){
+  //  console.log("NULL CALLED");
+  this.ontime = undefined;
+  this.offtime = undefined;
+  this.rep =  undefined;
+  this.on_time=null;
+  this.on_uid=null;
+  this.off_time=null;
+  this.off_uid=null;
+  this.dayselM=null;
+  this.dayselT=null;
+  this.dayselW=null;
+  this.dayselTH=null;
+  this.dayselF=null;
+  this.dayselSa=null;
+  this.dayselSu=null;
+  this.Expiry=null;
+
+
+ }
+ tabledata(){
+
+  this.contactService.getShe(this.devicename).subscribe(
+    
+    data => {
+    
+      this.sheds = data 
+      this.on_table = []
+      this.on = this.sheds.split('|')[0];
+      this.f_onn = this.on.split('-'[0]);
+      this.f_on = this.f_onn[1]
+      let final_ON = this.f_on.split(',')
+   
+  
+      this.off = this.sheds.split('|')[1];
+      this.f_offf = this.off.split('-'[0]);
+      this.f_off  = this.f_offf[1];
+      let final_OFF = this.f_off.split(',')
+      
+
+      this.d = this.sheds.split('|')[2];
+      this.f_didd = this.d.split('-')[1];
+      this.f_did =  this.f_didd
+
+
+
+      let on_id = this.sheds.split('|')[3];
+      let i_onid = on_id.split('-')[1];
+      let f_onid =  i_onid.split('/')[0]
+      for(let i=0;i<final_ON.length;i++)
+      {
+       
+          
+        let f_o_t = this.f_on.split(',')[i];
+        let f_f_t = this.f_off.split(',')[i];
+        let f_o_id = f_onid.split(',')[i];
+        data={f_o_t,f_f_t,f_o_id}
+        
+        this.on_table.push(data); 
+      }
+      // console.log(this.on_table); 
+    }, (err: any) => { console.log(err.status); 
+      // console.log(err);
+    if(err.status ==   500)
+    {     
+      // console.log("No Schedule")
+     // this.on_table = null;
+      //this.del = false;
+      this.on_table = []
+    }     
+  })
+ 
+ }
+
+  ngOnInit() {
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      let userId = params['_did'];
+      var devicedata =  userId.split('.');
+       this.deviceid = devicedata[0];
+      this.devicename = devicedata[1];
+      this.userId =  this.devicename;
+    
+        });
+
+
+/*       this.contactService.getmatrix( this.deviceid).subscribe(
+        
+        mat_data => {
+          this.mat = mat_data           
+          console.log(this.mat);
+          console.log( mat_data);
+        });  */
+       this.tabledata();
+  }
+
+}
diff --git a/src/app/add-cust/add-cust.component.html b/src/app/add-cust/add-cust.component.html
new file mode 100644
index 0000000..b1248f3
--- /dev/null
+++ b/src/app/add-cust/add-cust.component.html
@@ -0,0 +1,466 @@
+<div class="container-fluid" style="background: #f9f9f9;padding:0px;height:80vh;padding: 18px;">
+        <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
+            <p style="margin-bottom: 0px;">{{title | translate}}</p>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-12">
+                <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                    <md-form-field class="example-full-width width">
+                            <input mdInput type="text" [(ngModel)]="userID" placeholder="Enter User ID" name="userId" required>
+                            <!-- <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error> -->
+                        </md-form-field>
+            </div>
+            <div class="col-6">
+                    <md-form-field class="example-full-width width">
+                            <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
+                            <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
+                        </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                    <md-form-field class="example-full-width width">
+                            <input  mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
+                            <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
+                        </md-form-field>
+            </div>
+            <div class="col-6">
+                    <md-form-field class="example-full-width width" (click)="stren();">
+                            <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill" name="emaill" placeholder="{{'Enter Email ID ' | translate}}">
+                        </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                    <md-form-field class="example-full-width width" (click)="stre();">
+                        <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>
+                            <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon}}</md-icon> -->
+                            <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" 
+                                mdInput type="{{passwordtype}}"  [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6"
+                                maxlength="12" required>
+                            <md-error class="required">{{'Invalid Password' | translate}}</md-error>
+                        </md-form-field>
+            </div>
+            <div class="col-6">
+                    <md-form-field class="example-full-width width" (click)="stre();">
+                        <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>
+                            <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon_1}}</md-icon> -->
+                            <input mdInput type="{{passwordtype_1}}"  [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12"
+                                required>
+                            <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
+                        </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                    <!-- <md-form-field class="example-full-width width" (click)="stren();">
+                            <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone"
+                                name="phone" placeholder="{{'Enter Mobile Number' | translate}}">
+                        </md-form-field> -->
+                       <md-form-field class="example-full-width width" (click)="stren();">
+                        <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" >
+                          </md-form-field> 
+            </div>
+            <div class="col-6">
+                    <md-input-container class="example-full-width width">
+                            <input [disabled]="!superAdmin" mdInput placeholder="{{'Search Dealer' | translate}}" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
+                                (ngModelChange)="filterDealerStates(dealerName)">
+                            <md-autocomplete #tdAuto2="mdAutocomplete">
+                                <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname" (click)="dealerFinalVal(dealer)">
+                                    <span>{{ dealer.dealer_firstname?dealer.dealer_firstname:"" }} {{dealer.dealer_lastname?dealer.dealer_lastname:""}}</span>
+                                </md-option>
+                            </md-autocomplete>
+                        </md-input-container>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}" name="address" >
+                    <md-error class="pattern">{{'Please Enter address' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-6">
+                <lable>Timezone</lable>
+                <select id="dbselect" >
+                    <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
+                </select>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-12"> <span>{{'Upload Documents' | translate}} :</span>
+                <button mdTooltip="upload Documents" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
+                    <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
+                    <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
+                </button>
+            </div>
+        </div>
+        <div class="row" style="margin:0px" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
+            <div class="col-3" style="padding-right: 0px">
+                <md-select class="example-full-width width" (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype"  placeholder="{{'Doc Type' | translate}}">
+                    <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                </md-select>
+            </div>
+            <div class="col-3" style="margin-top: 4px;padding-right: 0px">
+                <md-form-field class="example-full-width width">
+                    <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-4" style="margin-top: 7px;padding-right: 0px">
+                <!-- <input type="file" class="btn btn btn-success" style="background: #f1f1f1;border: none;color: black;width:190px;" (change)="onFileChanged($event)"> -->
+                <input type="file" class="form-control" placeholder='{{"Choose a file..." | translate}}' (change)="onFileChanged($event)" />
+            </div>
+            <div class="col-2" style="padding-right: 0px">
+                <i class="fas fa-cloud-upload-alt" style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)"></i>
+
+                <i class="fas fa-trash-alt" style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)"></i>
+                <!-- <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon>
+                <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon> -->
+            </div>
+        </div>
+
+ <!-- <md-expansion-panel style="background: #fcfbfb;box-shadow: none"> -->
+    <!-- <md-expansion-panel-header>
+        <md-panel-title style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'ADDITIONAL SETTING' | translate}}
+        </md-panel-title>
+    </md-expansion-panel-header>  -->
+    <span data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"
+    style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'EMERGENCY CONTACT' | translate}}</span>
+ 
+    <div class="collapse" id="collapseExample">
+    <form [formGroup]="emergencyForm">
+<div class="row" style="margin:0px">
+    <div class="col-6" style="border: solid 1px black;
+    margin-top: 8px;">
+    <h6 style="text-align: center;margin-top: 10px;">Contact Details 1</h6>
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_name1" placeholder="{{'Enter name' | translate}}" name="name">
+    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+</md-form-field>
+
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_cell1" placeholder="{{'Enter Mobile Number 1' | translate}}"
+        name="emg_cell1">
+    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+</md-form-field>
+
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_cell2" placeholder="{{'Enter Mobile Number 2' | translate}}"
+        name="emg_cell2">
+    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+</md-form-field>
+
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_phone1" placeholder="{{'Enter phone Number 1' | translate}}"
+        name="emg_phone1">
+    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+</md-form-field>
+
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_phone2" placeholder="{{'Enter phone Number 2' | translate}}"
+        name="emg_phone2">
+    <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+</md-form-field>
+        </div>
+<div class="col-6" style="border: solid 1px black;
+    margin-top: 8px;">
+    <h6 style="text-align: center;margin-top: 10px;" >Contact Details 2</h6>
+
+    <md-form-field class="example-full-width width">
+        <input mdInput type="text" formControlName="emg_name2" placeholder="{{'Enter name' | translate}}" name="name">
+        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+    </md-form-field>
+    
+    <md-form-field class="example-full-width width">
+        <input mdInput type="text" formControlName="emg_cell3" placeholder="{{'Enter Mobile Number 1' | translate}}"
+            name="emg_cell1">
+        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+    </md-form-field>
+    
+    <md-form-field class="example-full-width width">
+        <input mdInput type="text" formControlName="emg_cell4" placeholder="{{'Enter Mobile Number 2' | translate}}"
+            name="emg_cell2">
+        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+    </md-form-field>
+    
+    <md-form-field class="example-full-width width">
+        <input mdInput type="text" formControlName="emg_phone3" placeholder="{{'Enter phone Number 1' | translate}}"
+            name="emg_phone1">
+        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+    </md-form-field>
+    
+    <md-form-field class="example-full-width width">
+        <input mdInput type="text" formControlName="emg_phone4" placeholder="{{'Enter phone Number 2' | translate}}"
+            name="emg_phone2">
+        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+    </md-form-field>
+
+
+    </div>
+
+
+    </div>
+</form>
+</div>
+
+
+
+
+        <!-- <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_name1" placeholder="{{'Enter name' | translate}}" name="name">
+        </md-form-field>
+<div class="row" style="margin:0px">
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_cell1" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_cell1">
+           
+        </md-form-field>
+    </div>
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_cell2" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_cell2">
+           
+        </md-form-field>
+    </div>
+</div>
+
+<div class="row" style="margin:0px">
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_phone1" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_phone1">
+           
+        </md-form-field>
+    </div>
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_phone2" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_phone2">
+           
+        </md-form-field>
+    </div>
+</div>
+<md-form-field class="example-full-width width">
+    <input mdInput type="text" formControlName="emg_name2" placeholder="{{'Enter name' | translate}}" name="name">
+   
+</md-form-field>
+<div class="row" style="margin:0px">
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_cell3" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_cell3">
+           
+        </md-form-field>
+    </div>
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_cell4" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_cell4">
+           
+        </md-form-field>
+    </div>
+</div>
+
+<div class="row" style="margin:0px">
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_phone3" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_phone3">
+           
+        </md-form-field>
+    </div>
+    <div class="col-6">
+        <md-form-field class="example-full-width width">
+            <input mdInput type="text" formControlName="emg_phone4" placeholder="{{'Enter Mobile Number' | translate}}"
+                name="emg_phone4">
+            !-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> --
+        </md-form-field>
+    </div>
+</div> -->
+  
+<!-- </md-expansion-panel> -->
+
+
+
+        <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
+            <div class="col-12">
+                <button *ngIf="!isTechnician" style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="addContact2()">{{'SUBMIT' | translate}}</button>
+                <button *ngIf="isTechnician" style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button
+                    (click)="addContact3()">{{'SUBMIT' | translate}}</button>
+                <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+            </div>
+        </div>
+
+        <!-- <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
+        <div id="demo" class="collapse">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </div> -->
+    </div>
+
+
+
+
+
+    <!-- ===============================backup================================================= -->
+
+  
+<!-- <div style="height:90vh;">
+        <h4 style="text-align:center;">Add Custumer</h4>
+       
+        <div class="row">
+            <div class="col-sm-4" style="padding-top: 15px;">
+                <span >User ID:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="userID" placeholder="Enter User ID" name="userId" required>
+                    <md-error class="pattern">Please Enter User ID</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >First Name:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="first_name" placeholder="Enter First Name" name="first_name" required>
+                    <md-error class="pattern">Please Enter First Name</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Last Name:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width">
+                    <input  mdInput type="text" [(ngModel)]="last_name" placeholder="Enter Last Name" name="last_name" required>
+                    <md-error class="pattern">Please Enter Last Name</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Email ID:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width" (click)="stren();">
+                    <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill" name="emaill"
+                        placeholder="Enter Email ID">
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Password:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width" (click)="stre();">
+    
+                    <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">info_outline</md-icon>
+                    <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" (keypress)="click2($event2)"
+                        mdInput type="password" [(ngModel)]="passwordd" name="passwordd" placeholder="Enter Password" minlength="6"
+                        maxlength="12" required>
+                    <md-error class="required">Invalid Password</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Confirm Password:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width" (click)="stre();">
+                    <input mdInput type="password" [(ngModel)]="password2" name="password2" placeholder="Confirm Password" minlength="6" maxlength="12"
+                        required>
+                    <md-error class="required">Please Enter Confirm Password</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Mobile Number:</span>
+            </div>
+            <div class="col-sm-8">
+                <md-form-field class="example-full-width width" (click)="stren();">
+                    <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone"
+                        name="phone" placeholder="Enter Mobile Number">
+                </md-form-field>
+            </div>
+        </div>
+    
+    
+      <p>upload document</p>
+        <div class="row">
+            <div class = "col-sm-6">
+                <span>Upload Documents * :</span>
+            </div>
+            <div class = "col-sm-6">
+                <button mdTooltip="upload Documents"  style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button> 
+            </div>
+        </div>
+        <div style="overflow: scroll" [ngClass]="{'rowHeight':docRow}">
+        <div class= "row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i =index">
+            <div class="col-sm-2" >
+                    <md-select (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype" placeholder = "Doc Type">
+                      <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                    </md-select>
+            </div>
+             <div class="col-sm-10" style="margin-top: 2%;">
+                <input type="text" style ="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone" placeholder="Doc number">
+                <span><input type="file" class="btn btn btn-success" style ="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;" (change)="onFileChanged($event)" ></span>
+                <span><button class="btn btn btn-success" (click)="onUpload(i)">Upload!</button></span>
+                <span><button mdTooltip="Delete field" style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="DeleteDocumentsField(i)"><md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon></button></span>
+            </div>
+        </div>
+    </div>
+  <p>upload document</p>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Dealer:</span>
+            </div>
+            <div class="col-sm-8">
+                    <md-input-container>
+                            <input [disabled]="!superAdmin" mdInput placeholder="Search Dealer" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
+                                (ngModelChange)="filterDealerStates(dealerName)">
+                            <md-autocomplete #tdAuto2="mdAutocomplete">
+                                <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname" (click)="dealerFinalVal(dealer)">
+                                    <span>{{ dealer.dealer_firstname?dealer.dealer_firstname:"" }} {{dealer.dealer_lastname?dealer.dealer_lastname:""}}</span>
+                                </md-option>
+                            </md-autocomplete>
+                        </md-input-container>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-4"  style="padding-top: 15px;">
+                <span >Address :</span>
+            </div>
+            <div class="col-sm-8">
+                    <md-form-field class="example-full-width width">
+                            <input mdInput type="text" [(ngModel)]="address" placeholder="Enter address" name="address" required>
+                            <md-error class="pattern">Please Enter address</md-error>
+                        </md-form-field>        
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12" style="padding-left:35%">
+                <input type="submit" class="btn btn btn-success" style="cursor:pointer;width: 177px;" value="Submit" (click)="addContact2()"/>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-sm-12">
+                <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages> 
+            </div>
+        </div>
+     
+    </div>
+     -->
\ No newline at end of file
diff --git a/src/app/add-cust/add-cust.component.scss b/src/app/add-cust/add-cust.component.scss
new file mode 100644
index 0000000..fb8e55f
--- /dev/null
+++ b/src/app/add-cust/add-cust.component.scss
@@ -0,0 +1,1180 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+::-webkit-scrollbar {
+    display: none;
+    }
+    #d:hover { 
+        color: rgb(14, 102, 18);
+
+        
+    }
+    #ac{
+        color: rgb(38, 38, 90)
+    }
+    #active{
+        text-decoration-line: underline;
+        text-decoration-color: rgb(66, 26, 245);
+    } 
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+
+
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+
+
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.rowHeight{
+  height:60px;
+  overflow: scroll
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+    position: absolute; z-index: 99;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#contact {
+    top: 200px;
+    background-color: #555
+}
+  
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    #myTable {
+        border-collapse: collapse;
+        width: 100%;
+        border: 1px solid #ddd;
+        font-size: 12px;
+      }
+      
+      #myTable th, #myTable td {
+        text-align: left;
+        padding: 12px;
+      }
+      
+      #myTable tr {
+        border-bottom: 1px solid #ddd;
+      }
+      
+      #myTable tr.header, #myTable tr:hover {
+        background-color: #f1f1f1;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .width{
+        width: 100%;
+    }
+    
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/add-cust/add-cust.component.spec.ts b/src/app/add-cust/add-cust.component.spec.ts
new file mode 100644
index 0000000..9550500
--- /dev/null
+++ b/src/app/add-cust/add-cust.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddCustComponent } from './add-cust.component';
+
+describe('AddCustComponent', () => {
+  let component: AddCustComponent;
+  let fixture: ComponentFixture<AddCustComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddCustComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddCustComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-cust/add-cust.component.ts b/src/app/add-cust/add-cust.component.ts
new file mode 100644
index 0000000..12f3367
--- /dev/null
+++ b/src/app/add-cust/add-cust.component.ts
@@ -0,0 +1,1447 @@
+import { FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
+import {ResponseOptions, Response} from '@angular/http';
+import {Contact} from '../contact';
+import {ContactService} from '../contact.service';
+import {Otp} from '../otp';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
+const EMAIL_REGEX =/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import * as moment from 'moment-timezone';
+import { ReportService } from '../report/report.service';
+declare var google :any;
+
+
+declare var swal: any,$:any;
+@Component({
+  selector: 'app-add-cust',
+  templateUrl: './add-cust.component.html',
+  styleUrls: ['./add-cust.component.scss'],
+  providers:[ContactService]
+})
+export class AddCustComponent implements OnInit {
+  superAdmin: any;
+  role
+  show1:boolean = false;
+  show2:boolean = true;
+  show3:boolean = false;
+  first_name:any=null;
+  last_name:any=null;
+  passwordd:any=null;
+  org_name:any=null;
+  emaill:any=null;
+  timezone:any = 'Asia/Kolkata';
+  phone:any=null;
+  executed:any;
+  $event2:any;
+  dealer:any;
+  contacts: Contact[]=[];
+  contact: Contact;
+  login1:any;
+  mess2:any;
+  mess:any;
+  otp:any;
+  userID:any;
+  address:any;
+  str:boolean = false;
+  password2:any=null;
+  dealerName:any;
+  isTechnician:boolean=false;
+  dealerSelect: any=[];
+  imageuploadObject = [];
+  sup_admin: any;
+  countrySelected: {};
+  timezoneArray: any[];
+  emergencyForm:FormGroup;
+  title="ADD CUSTOMER"
+  report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+  
+  }
+  report_speed(){
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  stre(){
+    this.str =true;
+  }
+  stren(){
+    this.str =false;
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  clear(){
+    this.first_name=' '
+    this.last_name=' '
+    this.emaill = null
+    this.phone = null
+  }
+  before:any;
+  emmnerr:any;
+  Load:any
+  $event:any;
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<AddCustComponent>,private fb:FormBuilder,private reportService:ReportService
+    ,@Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log("DATATATATA",data);
+      if(data){        
+        if(data.role=="technitian"){
+          this.title="ADD TECHNICIAN";
+          this.isTechnician=true;
+          this.role=data.role
+        }
+      }
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput-jquery.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+    
+      var  initialObj = {
+        doctype:'',
+        image:'',
+        phone:''
+      }
+      this.imageuploadObject.push(initialObj);
+    }
+
+  addContact2(){
+    console.log(this.router.url);
+    var tzone
+    if(this.router.url=="/add-device"){
+      console.log("in");
+      tzone=['Asia/Kolkata']
+    this.reportService.addCustomerFunction('')
+  }else{
+
+    tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+  }
+  //  var tzone
+    console.log("EMERGENCY FORM",this.emergencyForm.value);
+    
+    var expDate = new Date();
+    expDate.setFullYear(expDate.getFullYear()+1);
+    var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+    console.log(countryData); 
+    this.countrySelected = {
+      countryCode : countryData.iso2,
+      dialcode: countryData.dialCode
+    }
+    if(this.first_name==null || this.last_name==null || this.passwordd==null )
+      {
+      return this._flashMessagesService.show('Please fill all Requied fields', { cssClass: 'alert-danger', timeout: 3000 });
+       
+      }
+      // else if((this.userID == undefined)||(this.userID.trim() == '')){
+      // return  this._flashMessagesService.show('User ID is required', { cssClass: 'alert-danger', timeout: 3000 });
+      // }
+      // else if((this.emaill == undefined)||(this.emaill.trim() == '')){
+
+      //  return   this._flashMessagesService.show('Email is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+      // }
+      else if(this.password2 != this.passwordd){
+       // this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 });
+        this.tost1("psdnmtch")
+       }
+      else if (this.emaill && this.phone){
+        this.Load=true
+        var emergencyContact={
+          contact1:{
+            name:this.emergencyForm.value.emg_name1,
+            cell1:this.emergencyForm.value.emg_cell1,
+            cell2:this.emergencyForm.value.emg_cell2,
+            phone1:this.emergencyForm.value.emg_phone1,
+            phone2:this.emergencyForm.value.emg_phone2
+
+          },
+           contact2:{
+            name:this.emergencyForm.value.emg_name2,
+            cell1:this.emergencyForm.value.emg_cell3,
+            cell2:this.emergencyForm.value.emg_cell4,
+            phone1:this.emergencyForm.value.emg_phone3,
+            phone2:this.emergencyForm.value.emg_phone4
+
+          }
+        }
+        if(this.dealerObj){   
+          this.useridd= this.dealerObj.dealer_id;
+          // console.log(this.useridd);
+        }
+       const newContact2 ={
+       first_name: this.first_name,
+       last_name: this.last_name,
+       email: this.emaill,
+       password: this.passwordd,
+       phone: this.phone,
+       supAdmin:this.sup_admin,
+       isDealer: false,
+       expdate : new Date(expDate).toISOString(),
+       Dealer: this.useridd,
+       custumer:true,
+       user_id:this.userID,
+       address:this.address,
+       emergencyContact:emergencyContact
+   }
+    console.log("1->",newContact2);
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+   }
+   if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+   if(this.imageuploadObject.length > 0){  
+     
+     for(var d = 0 ;d <this.imageuploadObject.length;d++){
+      
+       if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+             this.imageuploadObject.splice(d,1);         
+       }
+
+     }
+   }
+    console.log("Final DOC ARRAY",this.imageuploadObject);
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+   this.contactService.addContact(newContact2)
+   .subscribe(contact => {   
+    if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "User Duplicate"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "Email ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "Mobile Number already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+      this.clear();
+      console.log(contact);
+     //  USER_ID already exists
+      this.Load=false
+       if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+    }
+ 
+   }, (err: any) => { 
+    // console.log(err.status); 
+    console.log(err);
+  if(err.status ==  500)
+  {
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    console.log(this.emmnerr);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   this.data_descip,
+    //   'error'
+    // )
+  }
+  else if(err.status==401){
+    this.Load=false;
+    this.emmnerr=JSON.parse(err._body);
+    console.log(this.emmnerr);
+    this.data_descip = this.emmnerr.message
+
+     this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   'Internal Server error , Please try after sometime !!!',
+    //   'error'
+    // )
+
+  }else{
+    this.Load=false;
+     this._flashMessagesService.show("Internal Server Error, Please try after sometime !!!", { cssClass: 'alert-danger', timeout: 3000 });
+  }
+  });
+
+ }
+      else if(this.phone){
+        this.Load=true
+        if(this.dealerObj){
+          this.useridd= this.dealerObj.dealer_id;
+        }
+         var emergencyContact={
+          contact1:{
+            name:this.emergencyForm.value.emg_name1,
+            cell1:this.emergencyForm.value.emg_cell1,
+            cell2:this.emergencyForm.value.emg_cell2,
+            phone1:this.emergencyForm.value.emg_phone1,
+            phone2:this.emergencyForm.value.emg_phone2
+
+          },
+           contact2:{
+            name:this.emergencyForm.value.emg_name2,
+            cell1:this.emergencyForm.value.emg_cell3,
+            cell2:this.emergencyForm.value.emg_cell4,
+            phone1:this.emergencyForm.value.emg_phone3,
+            phone2:this.emergencyForm.value.emg_phone4
+
+          }
+        }
+
+    //   if (!this.executed) {
+    //     this.executed = true;
+         const newContact2 ={
+         first_name: this.first_name,
+         last_name: this.last_name,
+         password: this.passwordd,
+         supAdmin:this.sup_admin,
+         expdate : new Date(expDate).toISOString(),
+         phone: this.phone,
+         isDealer: false,
+         Dealer: this.useridd,
+         custumer:true,
+         user_id:this.userID,
+         address:this.address,
+         emergencyContact:emergencyContact
+     }
+console.log("2->",newContact2);
+
+     
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+   }
+
+     if(this.imageuploadObject.length > 0){  
+
+      for(var d = 0 ;d <this.imageuploadObject.length;d++){   
+        if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+              this.imageuploadObject.splice(d,1);        
+        }
+      }
+    }
+    newContact2['imageDoc'] = this.imageuploadObject;
+     this.contactService.addContact(newContact2)
+     .subscribe(contact => {
+      console.log(contact);
+      if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "User Duplicate"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Email ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Mobile Number already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else{
+          this.clear();
+          this.Load=false;
+           if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+         
+        }
+      //  USER_ID already exists
+   
+     }, (err: any) => {
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+      this.Load=false
+      this.emmnerr=JSON.parse(err._body);
+        console.log(this.emmnerr);
+       this.data_descip = this.emmnerr.split(':')[1];
+        console.log(this.data_descip);
+         this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   this.data_descip,
+    //   'error'
+    // )
+    }
+    else if(err.status==401){
+
+      this.Load=false;
+       this.emmnerr=JSON.parse(err._body);
+        console.log(this.emmnerr);
+       this.data_descip = this.emmnerr.message
+      // console.log("dadsa");
+      this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+       this._flashMessagesService.show("Internal Server Error, Please try after sometime", { cssClass: 'alert-danger', timeout: 3000 });
+    }})}
+ else if((this.emaill)||(this.userID)){
+ // if (!this.executed) {
+  //  this.executed = true;
+    console.log("we are here");
+  if(this.dealerObj){
+    this.useridd= this.dealerObj.dealer_id
+    
+  }
+  var emergencyContact={
+       contact1:{
+         name:this.emergencyForm.value.emg_name1,
+         cell1:this.emergencyForm.value.emg_cell1,
+         cell2:this.emergencyForm.value.emg_cell2,
+         phone1:this.emergencyForm.value.emg_phone1,
+         phone2:this.emergencyForm.value.emg_phone2
+
+       },
+        contact2:{
+         name:this.emergencyForm.value.emg_name2,
+         cell1:this.emergencyForm.value.emg_cell3,
+         cell2:this.emergencyForm.value.emg_cell4,
+         phone1:this.emergencyForm.value.emg_phone3,
+         phone2:this.emergencyForm.value.emg_phone4
+
+       }
+     }
+     console.log(emergencyContact);
+     
+    const newContact2 ={
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.passwordd,
+    org_name: this.org_name,
+    email: this.emaill,
+    expdate : new Date(expDate).toISOString(),
+    supAdmin:this.sup_admin,
+    isDealer: false,
+    Dealer: this.useridd,
+    custumer:true,
+    user_id:this.userID,
+    address:this.address,
+    emergencyContact:emergencyContact
+
+}
+console.log("3->",newContact2);
+
+
+if(this.countrySelected != undefined){
+  newContact2['std_code']=this.countrySelected;
+
+ }
+ if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+ if(tzone != undefined){
+  newContact2['timezone'] = tzone[0];
+ }
+
+if(this.imageuploadObject.length > 0){  
+
+  for(var d = 0 ;d <this.imageuploadObject.length;d++){
+    if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+          this.imageuploadObject.splice(d,1);   
+    }
+  }
+}
+newContact2['imageDoc'] = this.imageuploadObject;
+this.contactService.addContact(newContact2)
+.subscribe(contact => {
+  //this.tost1("succ")
+  console.log(contact);
+  //  USER_ID already exists
+  if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "User Duplicate"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Email ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Mobile Number already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else{
+      this.clear();
+      this.Load=false
+       if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+      
+    }
+ 
+}, (err: any) => {
+  console.log();
+  
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+  
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   this.data_descip,
+    //   'error'
+    // )
+    // console.log("error to display",this.emmnerr);
+    // this.tost1("Error")
+  }
+  else if(err.status ==  401){
+    this.Load=false;
+    this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+    //  this.emmnerr=JSON.parse(err._body);
+    // swal(
+    //   'Error',
+    //   this.emmnerr.message,
+    //   'error'
+    // )
+  }else{
+     this.Load=false;
+     this._flashMessagesService.show("Internal Server Error, Please try again sometime !!", { cssClass: 'alert-danger', timeout: 3000 });
+    //  this.emmnerr=JSON.parse(err._body);
+    // swal(
+    //   'Error',
+    //   this.emmnerr.message,
+    //   'error'
+    // )
+  }
+});
+
+
+ }
+ 
+ 
+ }
+
+ addContact3(){
+
+ var tzone
+    if(this.router.url=="/add-device"){
+      console.log("in");
+      tzone=['Asia/Kolkata']
+    this.reportService.addCustomerFunction('')
+  }else{
+
+    tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+  }
+
+    // var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    // console.log(tzone);
+    console.log("EMERGENCY FORM",this.emergencyForm.value);
+    
+    var expDate = new Date();
+    expDate.setFullYear(expDate.getFullYear()+1);
+    var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+    console.log(countryData); 
+    this.countrySelected = {
+      countryCode : countryData.iso2,
+      dialcode: countryData.dialCode
+    }
+    if(this.first_name==null || this.last_name==null || this.passwordd==null )
+      {
+      return this._flashMessagesService.show('Please fill all Requied fields', { cssClass: 'alert-danger', timeout: 3000 });
+       
+      }
+      // else if((this.userID == undefined)||(this.userID.trim() == '')){
+      // return  this._flashMessagesService.show('User ID is required', { cssClass: 'alert-danger', timeout: 3000 });
+      // }
+      // else if((this.emaill == undefined)||(this.emaill.trim() == '')){
+
+      //  return   this._flashMessagesService.show('Email is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+      // }
+      else if(this.password2 != this.passwordd){
+       // this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 });
+        this.tost1("psdnmtch")
+       }
+      else if (this.emaill && this.phone){
+        this.Load=true
+        var emergencyContact={
+          contact1:{
+            name:this.emergencyForm.value.emg_name1,
+            cell1:this.emergencyForm.value.emg_cell1,
+            cell2:this.emergencyForm.value.emg_cell2,
+            phone1:this.emergencyForm.value.emg_phone1,
+            phone2:this.emergencyForm.value.emg_phone2
+
+          },
+           contact2:{
+            name:this.emergencyForm.value.emg_name2,
+            cell1:this.emergencyForm.value.emg_cell3,
+            cell2:this.emergencyForm.value.emg_cell4,
+            phone1:this.emergencyForm.value.emg_phone3,
+            phone2:this.emergencyForm.value.emg_phone4
+
+          }
+        }
+        if(this.dealerObj){   
+          this.useridd= this.dealerObj.dealer_id;
+          // console.log(this.useridd);
+        }
+       const newContact2 ={
+       first_name: this.first_name,
+       last_name: this.last_name,
+       email: this.emaill,
+       password: this.passwordd,
+       phone: this.phone,
+       supAdmin:this.sup_admin,
+       isDealer: false,
+       expdate : new Date(expDate).toISOString(),
+       Dealer: this.useridd,
+       custumer:true,
+       user_id:this.userID,
+       address:this.address,
+       emergencyContact:emergencyContact
+   }
+    console.log("1->",newContact2);
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+   }
+   if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+   if(this.imageuploadObject.length > 0){  
+     
+     for(var d = 0 ;d <this.imageuploadObject.length;d++){
+      
+       if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+             this.imageuploadObject.splice(d,1);         
+       }
+
+     }
+   }
+    console.log("Final DOC ARRAY",this.imageuploadObject);
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+   this.contactService.post('/users/addTechnician',newContact2)
+   .subscribe((contact:any) => {   
+    if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "User Duplicate"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "Email ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else if(contact.message == "Mobile Number already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+      this.clear();
+      console.log(contact);
+     //  USER_ID already exists
+      this.Load=false
+       if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+      // this.onNoClick("succ");
+      // this.contacts.push(contact);
+    }
+ 
+   }, (err: any) => { 
+    // console.log(err.status); 
+    console.log(err);
+  if(err.status ==  500)
+  {
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    console.log(this.emmnerr);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   this.data_descip,
+    //   'error'
+    // )
+  }
+  else if(err.status==401){
+    this.Load=false
+     this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    console.log(this.emmnerr);
+    this.data_descip = this.emmnerr.message;
+    this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   'Internal Server error , Please try after sometime !!!',
+    //   'error'
+    // )
+
+  }else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+  }
+  });
+
+ }
+      else if(this.phone){
+        this.Load=true
+        if(this.dealerObj){
+          this.useridd= this.dealerObj.dealer_id;
+        }
+         var emergencyContact={
+          contact1:{
+            name:this.emergencyForm.value.emg_name1,
+            cell1:this.emergencyForm.value.emg_cell1,
+            cell2:this.emergencyForm.value.emg_cell2,
+            phone1:this.emergencyForm.value.emg_phone1,
+            phone2:this.emergencyForm.value.emg_phone2
+
+          },
+           contact2:{
+            name:this.emergencyForm.value.emg_name2,
+            cell1:this.emergencyForm.value.emg_cell3,
+            cell2:this.emergencyForm.value.emg_cell4,
+            phone1:this.emergencyForm.value.emg_phone3,
+            phone2:this.emergencyForm.value.emg_phone4
+
+          }
+        }
+
+    //   if (!this.executed) {
+    //     this.executed = true;
+         const newContact2 ={
+         first_name: this.first_name,
+         last_name: this.last_name,
+         password: this.passwordd,
+         supAdmin:this.sup_admin,
+         expdate : new Date(expDate).toISOString(),
+         phone: this.phone,
+         isDealer: false,
+         Dealer: this.useridd,
+         custumer:true,
+         user_id:this.userID,
+         address:this.address,
+         emergencyContact:emergencyContact
+     }
+console.log("2->",newContact2);
+
+     
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+   }
+
+     if(this.imageuploadObject.length > 0){  
+
+      for(var d = 0 ;d <this.imageuploadObject.length;d++){   
+        if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+              this.imageuploadObject.splice(d,1);        
+        }
+      }
+    }
+    newContact2['imageDoc'] = this.imageuploadObject;
+     this.contactService.post('/users/addTechnician',newContact2)
+     .subscribe((contact:any) => {
+      console.log(contact);
+      if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "User Duplicate"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Email ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Mobile Number already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else{
+          this.clear();
+          this.Load=false;
+           if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+          // this.onNoClick("succ");
+          //  this.contacts.push(contact);
+        }
+      //  USER_ID already exists
+   
+     }, (err: any) => {
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+      this.Load=false
+      this.emmnerr=JSON.parse(err._body);
+        console.log(this.emmnerr);
+       this.data_descip = this.emmnerr.split(':')[1];
+        console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+    }
+    else if(err.status==401){
+      this.Load=false
+     this.emmnerr=JSON.parse(err._body);
+        console.log(this.emmnerr);
+       this.data_descip = this.emmnerr.message;
+        this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+      // swal(
+      //   'Error',
+      //   'Internal Server error , Please try after sometime !!!',
+      //   'error'
+      // )
+    }else{
+        this.Load=false;
+        this._flashMessagesService.show('Internal Server error , Please try after sometime !!!', { cssClass: 'alert-danger', timeout: 3000 });
+    }
+  })}
+ else if((this.emaill)||(this.userID)){
+ // if (!this.executed) {
+  //  this.executed = true;
+    console.log("we are here");
+  if(this.dealerObj){
+    this.useridd= this.dealerObj.dealer_id
+    
+  }
+  var emergencyContact={
+       contact1:{
+         name:this.emergencyForm.value.emg_name1,
+         cell1:this.emergencyForm.value.emg_cell1,
+         cell2:this.emergencyForm.value.emg_cell2,
+         phone1:this.emergencyForm.value.emg_phone1,
+         phone2:this.emergencyForm.value.emg_phone2
+
+       },
+        contact2:{
+         name:this.emergencyForm.value.emg_name2,
+         cell1:this.emergencyForm.value.emg_cell3,
+         cell2:this.emergencyForm.value.emg_cell4,
+         phone1:this.emergencyForm.value.emg_phone3,
+         phone2:this.emergencyForm.value.emg_phone4
+
+       }
+     }
+     console.log(emergencyContact);
+     
+    const newContact2 ={
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.passwordd,
+    org_name: this.org_name,
+    email: this.emaill,
+    expdate : new Date(expDate).toISOString(),
+    supAdmin:this.sup_admin,
+    isDealer: false,
+    Dealer: this.useridd,
+    custumer:true,
+    user_id:this.userID,
+    address:this.address,
+    emergencyContact:emergencyContact
+
+}
+console.log("3->",newContact2);
+
+
+if(this.countrySelected != undefined){
+  newContact2['std_code']=this.countrySelected;
+
+ }
+ if(this.role != undefined){
+    newContact2['role'] = this.role;
+   }
+
+ if(tzone != undefined){
+  newContact2['timezone'] = tzone[0];
+ }
+
+if(this.imageuploadObject.length > 0){  
+
+  for(var d = 0 ;d <this.imageuploadObject.length;d++){
+    if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+          this.imageuploadObject.splice(d,1);   
+    }
+  }
+}
+newContact2['imageDoc'] = this.imageuploadObject;
+this.contactService.post('/users/addTechnician',newContact2)
+.subscribe((contact:any) => {
+  //this.tost1("succ")
+  console.log(contact);
+  //  USER_ID already exists
+  if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "User Duplicate"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Email ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Mobile Number already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else{
+      this.clear();
+      this.Load=false;
+       if(this.router.url!="/add-device"){
+
+         this.onNoClick("succ");
+         this.contacts.push(contact);
+       }else{
+         this._flashMessagesService.show(contact.message, { cssClass: 'alert-success', timeout: 3000 });
+       }
+      // this.onNoClick("succ");
+      // this.contacts.push(contact);
+    }
+ 
+}, (err: any) => {
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+  
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   this.data_descip,
+    //   'error'
+    // )
+    // console.log("error to display",this.emmnerr);
+    // this.tost1("Error")
+  }
+  else if(err.status==401){
+    this.Load=false;
+    this.emmnerr=JSON.parse(err._body);
+    this.data_descip = this.emmnerr.message;
+    this._flashMessagesService.show("Access Denied", { cssClass: 'alert-danger', timeout: 3000 });
+    // swal(
+    //   'Error',
+    //   'Internal Server error , Please try after sometime !!!',
+    //   'error'
+    // )
+  }else{
+     this.Load=false;
+    this._flashMessagesService.show( 'Internal Server error , Please try after sometime !!!', { cssClass: 'alert-danger', timeout: 3000 });
+  }});
+
+
+ }
+ 
+ 
+ }
+ data_descip:any;
+ onNoClick(a): void {
+  this.dialogRef.close(a);
+ }
+
+ closebox(){
+  this.dialogRef.close(null);
+ }
+ tost1(divid){
+  if(divid == "Error"){
+     this.data_descip = "User already registerd"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+   else if(divid == "succ"){
+     this.data_descip = "Custumer Successfully Added"
+     this._flashMessagesService.show("Custumer Successfully Added", { cssClass: 'alert-success', timeout: 3000 });
+   }
+   else if(divid == "psdnmtch"){
+    this.data_descip =  "Error: Password and confirm password do not match"
+    this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+  //    function launch_toast() {
+  //     // console.log(divid);
+  //      var x = document.getElementById("toast")
+  //      //console.log(x);
+  //      x.className = "show";
+  //      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 450000);
+  //  }
+    }
+
+  valclear(){
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 200000 });        
+    
+  }
+
+  click1(event){
+    this.show2=false;
+    this.show3=true;
+    if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+    
+    else
+    event.preventDefault();
+    }
+    click2(event2){
+      this.show2=true;
+      this.show3=false;
+      
+      }
+      call(e) {
+        {
+               if (e.keyCode == 32) {
+                   e.preventDefault();
+               }
+           }
+   }
+   geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  devicess:any;
+  final:any;
+  getdev(){
+    let foods = []
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+        
+      data => {
+        this.devicess = data 
+  
+        let swap;
+        for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+          for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+            if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+                swap = this.devicess.devices[c];
+                this.devicess.devices[c] = this.devicess.devices[c+1];
+                this.devicess.devices[c+1] = swap;
+            }
+          }
+        }
+  
+        this.final = this.devicess.devices
+        
+       for(let i=0;i<this.devicess.devices.length;i++){
+       
+        //  if(this.devicess.devices[i].type_of_device =="Tracker"){
+           let a ={
+            value : this.devicess.devices[i].Device_Name,
+            viewValue:this.devicess.devices[i].Device_Name
+           }
+           foods.push(a);
+        //  }
+      
+       }
+  
+      });
+  }
+  cond:Boolean = false;
+  point : any = 0;
+  aa(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+run(){
+
+}
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+   logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+
+  }
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+  new(){
+    this.router.navigateByUrl("new");
+    
+  }
+   fs:any;
+   ls:any;
+   emailid:any;
+   or:any;
+   useridd:any;
+   custtype:any;
+   cust:boolean=false;
+   mb:any;
+   logo:any;
+   text:any;
+  ngOnInit() {
+
+    this.emergencyForm=this.fb.group({
+      emg_name1:[''],
+      emg_name2:[''],
+      emg_cell1:[''],
+      emg_cell2:[''],
+      emg_cell3:[''],
+      emg_cell4:[''],
+      emg_phone1:[''],
+      emg_phone2:[''],
+      emg_phone3:[''],
+      emg_phone4:['']
+
+    })
+      setTimeout(() => {
+        $("#telephone").intlTelInput({
+          allowDropdown:true,
+          autoPlaceholder:"Enter Mobile Number",
+          initialCountry:"in",
+          preferredCountries: ["in","us" ],
+          separateDialCode:true,
+          }); 
+      }, 300);
+      
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    // console.log(this.superAdmin)
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    if(!this.superAdmin){
+      this.dealerName = this.fs
+    }
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    console.log("superAdmin=>",this.sup_admin);
+
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+
+  //  this.getdev();
+  if(this.mb.charAt(0)=="n"){
+    this.mb = ' '
+  }
+  if(this.custtype == true){
+    this.cust = true;
+  }
+
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];  
+  this.dealerDetail();
+  
+  var Phoneinput = document.getElementById('telephone');
+  var that = this;
+  Phoneinput.addEventListener("countrychange",function(p) {
+    console.log("Inside Function");
+    var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+    console.log(countryData); 
+    that.countrySelected = {
+      countryCode : countryData.iso2,
+      dialcode: countryData.dialCode
+    }
+    });
+
+    var timeZn = moment.tz.guess(); 
+    if(timeZn != 'Asia/Calcutta'){
+      this.timezone = timeZn;
+    }
+    console.log(this.timezone);
+
+
+  var timeZones = moment.tz.names();
+  console.log(timeZones);
+  this.timezoneArray=[];
+  for (var i in timeZones) {
+    this.timezoneArray.push({ viewValue: "(GMT" + moment.tz(timeZones[i]).format('Z') + ")" + timeZones[i], value: timeZones[i] });
+  }
+  
+
+  setTimeout(() => {
+    $('#dbselect').multipleSelect({
+      width: 300,
+      placeholder: 'Select Timezone',
+      filter: true,
+      single: true,
+      selectAll: false
+    })   
+    console.log("INBDKJNDKJNDKJFNKJFBKHJbnkjh");
+    
+  }, 100);
+
+  this.latLongDetail();
+  }
+
+  dealers_info=[];
+
+  dealerDetail(){
+    // this.dealers_info=[];
+    var super_admin = ((this.superAdmin==true)||(this.superAdmin==undefined)) ? this.useridd : this.sup_admin ; 
+    this.contactService.dealer_Info_dealer_list(super_admin)
+    .subscribe(res=>{
+      console.log("Response=>",res);
+      this.dealers_info=res;
+    })
+    
+
+  }
+
+
+  filterDealerStates(dlr) {
+
+    // console.log(dlr);
+    if (dlr) {
+
+      const filterdealerValue:any = dlr;
+      this.dealerSelect=[];
+       this.dealerSelect = this.dealers_info.filter(function(p){
+        var t = p.dealer_firstname.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+      //  this.option = this.options[i];
+    
+     
+        return t > -1;    
+      });
+      
+        return this.dealerSelect;
+    }
+  
+  }
+
+  dealerObj:any;
+  dealerFinalVal(dlrr){
+
+    
+    this.dealerObj=dlrr;
+    // console.log(this.dealerObj);
+
+    // this.dealerSelect = dlrr;
+    // console.log(this.dealerSelect);
+
+  }
+  documentDetail:any;
+  imageURL:any;
+
+  documentList = [
+    {
+      "docId": "Adhar",
+      "docName": "Adhar Card"
+    },
+    {
+      "docId": "voterCard",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "PAN",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "DL",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "Nepali Citizenship",
+      "docName": "Nepali Citizenship"
+    }
+    
+  ];
+
+  documentType(docType){
+    console.log("doctypeObject=>",docType);
+
+  }
+  selectedFile: File;
+  onFileChanged(event) { 
+    this.selectedFile = <File>event.target.files[0];
+    console.log(this.selectedFile); 
+  }
+
+  onUpload(imgIndex) {
+    console.log(imgIndex);
+    console.log(this.imageuploadObject);
+    const fd = new FormData();
+    console.log("selected file name =>",this.selectedFile.name);
+    if(this.selectedFile.name == " "){
+      swal(
+        'Upload Error',
+        'Please select document type before upload !!!',
+        'error'
+      )
+    }else{
+      fd.append('photo',this.selectedFile,this.selectedFile.name)
+      console.log("imgURL=>",fd) ;
+      this.contactService.imageupload(fd)
+      .subscribe(res=>{
+        console.log(res);
+        var resImage ='';
+        resImage = res['_body'];
+        console.log(res['_body']);
+        this.imageuploadObject[imgIndex].image = resImage;
+         console.log(this.imageuploadObject);
+        // console.log(res);
+      },err=>{
+        swal(
+          'Server Error',
+          'Internal Server Error , plaese try after sometime !!!',
+          'error'
+        )
+      })
+    }
+   }
+
+   docRow:boolean=false;;
+  AddDocumentsField(addedRow){
+      if(addedRow){
+        this.docRow = true;
+      }
+       var obj={doctype:'',image:'',phone:''};
+       this.imageuploadObject.push(obj);
+       console.log(this.imageuploadObject);
+      // console.log("ImageuploadObject=>",this.imageuploadObject);
+  }
+
+  DeleteDocumentsField(index){
+    console.log(this.imageuploadObject.length);
+    if(this.imageuploadObject.length == 1){
+      this.docRow = false;
+    }
+    this.imageuploadObject.splice(index, 1);
+
+  }
+  passwordtype:any= 'password';
+  passwordtype_1:any= 'password';
+  passwordIcon:any='visibility_off';
+  passwordIcon_1:any='visibility_off';
+
+  showpassword(p:any){
+    console.log('inside function');
+   
+    if((p == 'p1')&&(this.passwordtype == "password")){
+      this.passwordtype = 'text';
+      this.passwordIcon = 'visibility';
+      return
+ 
+    }
+ 
+    if((p == 'p1')&&(this.passwordtype == "text")){
+      this.passwordtype = 'password';
+      this.passwordIcon = 'visibility_off';
+      return;
+    }
+ 
+    if((p == 'p2')&&(this.passwordtype_1 == "password")){
+     this.passwordtype_1 = 'text';
+     this.passwordIcon_1 = 'visibility';
+     return;
+ 
+   }
+ 
+   if((p == 'p2')&&(this.passwordtype_1 == "text")){
+     this.passwordtype_1 = 'password';
+     this.passwordIcon_1 = 'visibility_off';
+     return;
+   }
+ 
+  }
+  
+
+  latLongDetail(){
+    var that =this;
+    console.log("Inside Latlong Function");
+    if (navigator.geolocation) {  
+   
+      if(location.protocol != 'https:'){
+        this.contactService.getlatLong().subscribe(res=>{
+          console.log(res); 
+            let t_latlng = new google.maps.LatLng(res.lat, res.lon);
+            let request = {
+              latLng: t_latlng
+            };
+
+          this.getAddress(request);
+        })
+      }else{
+        navigator.geolocation.getCurrentPosition(function(position) {
+          var d_lat= position.coords.latitude;
+          var d_lng=position.coords.longitude;
+          let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+          let request = {
+            latLng: t_latlng
+          };
+
+          that.getAddress(request);
+        })
+        
+      }}            
+  }
+
+  getAddress(request){ 
+    let geocoder = new google.maps.Geocoder();  
+    geocoder.geocode(request, function (data, status) {
+      console.log("Inside geocoder function");  
+      var userCountry;
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          var address_show = data[0];
+          console.log('var=>' ,address_show);
+          for (var ac = 0; ac < data[0].address_components.length; ac++) {
+            var component = data[0].address_components[ac];
+            switch(component.types[0]) {     
+                case 'country':
+                    userCountry  = component.short_name;
+                    console.log(userCountry);
+                    break;      
+            }
+        };
+         
+            var aaa = $('#telephone').intlTelInput("setCountry",userCountry);
+        } else {
+          userCountry = 'in';  
+        }
+      }
+      else {
+        console.log("Inside Error function");  
+        userCountry = 'in';
+      }
+    })  
+  }
+}
diff --git a/src/app/add-dealer/add-dealer.component.html b/src/app/add-dealer/add-dealer.component.html
new file mode 100644
index 0000000..e553aff
--- /dev/null
+++ b/src/app/add-dealer/add-dealer.component.html
@@ -0,0 +1,128 @@
+<div class="container-fluid" style="background: #f9f9f9;padding:0px">
+        <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
+            <p>{{'ADD DEALER' | translate}}</p>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-12">
+                <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId" required>
+                    <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
+                    <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
+                    <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-6">
+                <md-form-field class="example-full-width width" (click)="stren();">
+                    <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill"  name="emaill" placeholder="{{'Enter Email ID ' | translate}}">
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+                <md-form-field class="example-full-width width" (click)="stre();">
+                                            <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p1')"></i>
+
+                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p1')">{{passwordIcon}}</md-icon> -->
+                    <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" (keypress)="click2($event2)" mdInput type="{{passwordtype}}" [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6" maxlength="12" required>
+                    <md-error class="required">{{'Invalid Password' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-6">
+                <md-form-field class="example-full-width width" (click)="stre();">
+                    <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p2')"></i>
+                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p2')">{{passwordIcon_1}}</md-icon> -->
+                    <input mdInput type="{{passwordtype_1}}" [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12" required>
+                    <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6">
+           
+                <md-form-field class="example-full-width width" (click)="stren();">
+                    <input type="tel" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" minlength="10" maxlength="10">
+                </md-form-field> 
+            </div>
+            <div class="col-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}" name="address" required>
+                    <md-error class="pattern">{{'Please Enter address' | translate}}</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-6" style="margin-bottom: 20px;">
+                <lable>Timezone</lable>
+                <select id="dbselect" >
+                    <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
+                </select>
+            </div>
+            <div class="col-6" style="margin-bottom: 20px;">
+                <lable>Inventory</lable>
+                <md-slide-toggle style="margin-top: 5px;" [(ngModel)]="inventoryManagement" ngDefaultControl>
+                </md-slide-toggle>
+
+                
+                    <span style="margin-right: 10px;">Bussiness Type :</span>
+                    <md-slide-toggle style="margin-top: 5px;" [(ngModel)]="bussinessType" ngDefaultControl>
+                    </md-slide-toggle>
+               
+            </div>
+        </div> 
+        <div class="row" style="margin:0px">
+            <div class="col-12"> <span>{{'Upload Documents' | translate}} :</span>
+                <button mdTooltip="upload Documents" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
+                    <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
+                    <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
+                </button>
+            </div>
+        </div>
+        <div class="row" style="margin:0px" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
+            <div class="col-3" style="padding-right: 0px">
+                <md-select class="example-full-width width" (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype" placeholder="{{'Doc Type' | translate}}">
+                    <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                </md-select>
+            </div>
+            <div class="col-3" style="margin-top: 4px;padding-right: 0px">
+                <md-form-field class="example-full-width width">
+                    <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-4" style="margin-top: 7px;padding-right: 0px">
+                <!-- <input type="file" class="btn btn btn-success" style="background: #f1f1f1;border: none;color: black;width:190px;" (change)="onFileChanged($event)"> -->
+                <input type="file" class="form-control" placeholder='{{"Choose a file..." | translate}}' (change)="onFileChanged($event)" />
+            </div>
+            <div class="col-2" style="padding-right: 0px">
+               
+                <i class="fas fa-cloud-upload-alt" style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)"></i>
+                            <i class="fas fa-trash-alt"
+                               style="float: right;width:50px;height:50px;color:#d81111;; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)"></i>
+
+                <!-- <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon> -->
+                <!-- <md-icon style="float: right;width:50px;height:50px;color:#d81111;; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon> -->
+            </div>
+        </div>
+        <div class="row" style="margin:0px" style="text-align: center;padding-top: 20px;">
+            <div class="col-12">
+                <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="addContact2()">{{'SUBMIT' | translate}}</button>
+                <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+            </div>
+        </div>
+    </div>
diff --git a/src/app/add-dealer/add-dealer.component.scss b/src/app/add-dealer/add-dealer.component.scss
new file mode 100644
index 0000000..d0af1e9
--- /dev/null
+++ b/src/app/add-dealer/add-dealer.component.scss
@@ -0,0 +1,1184 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+::-webkit-scrollbar {
+    display: none;
+    }
+    #d:hover { 
+        color: rgb(14, 102, 18);
+
+        
+    }
+    #ac{
+        color: rgb(38, 38, 90)
+    }
+    #active{
+        text-decoration-line: underline;
+        text-decoration-color: rgb(66, 26, 245);
+    } 
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+
+
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+
+  .rowHeight{
+    height:60px;
+    overflow: scroll
+}
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+
+
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+    position: absolute; z-index: 99;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#contact {
+    top: 200px;
+    background-color: #555
+}
+  
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    #myTable {
+        border-collapse: collapse;
+        width: 100%;
+        border: 1px solid #ddd;
+        font-size: 12px;
+      }
+      
+      #myTable th, #myTable td {
+        text-align: left;
+        padding: 12px;
+      }
+      
+      #myTable tr {
+        border-bottom: 1px solid #ddd;
+      }
+      
+      #myTable tr.header, #myTable tr:hover {
+        background-color: #f1f1f1;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .width{
+        width: 100%;
+    }
+    
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/add-dealer/add-dealer.component.spec.ts b/src/app/add-dealer/add-dealer.component.spec.ts
new file mode 100644
index 0000000..4d47e52
--- /dev/null
+++ b/src/app/add-dealer/add-dealer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDealerComponent } from './add-dealer.component';
+
+describe('AddDealerComponent', () => {
+  let component: AddDealerComponent;
+  let fixture: ComponentFixture<AddDealerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddDealerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDealerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-dealer/add-dealer.component.ts b/src/app/add-dealer/add-dealer.component.ts
new file mode 100644
index 0000000..50de3f8
--- /dev/null
+++ b/src/app/add-dealer/add-dealer.component.ts
@@ -0,0 +1,801 @@
+import { FormGroup, FormControl, Validators} from '@angular/forms';
+import {ResponseOptions, Response} from '@angular/http';
+import {Contact} from '../contact';
+import {ContactService} from '../contact.service';
+import {Otp} from '../otp';
+// import {Md5} from 'ts-md5/dist/md5';
+import * as moment from 'moment-timezone';
+declare var google :any;
+
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
+const EMAIL_REGEX =/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+declare var swal: any;
+declare var ol : any;
+declare var $:any;
+
+@Component({
+  selector: 'app-add-dealer',
+  templateUrl: './add-dealer.component.html',
+  styleUrls: ['./add-dealer.component.scss'],
+  providers:[ContactService]
+})
+export class AddDealerComponent implements OnInit {
+  superAdmin: any;
+  inventoryManagement
+  show1:boolean = false;
+  show2:boolean = true;
+  passwordtype : any = 'password';
+  passwordtype_1 :any = 'password';
+  show3:boolean = false;
+  first_name:any=null;
+  imageuploadObject = [];
+  timezone:any = 'Asia/Kolkata';
+  last_name:any=null;
+  passwordd:any=null;
+  org_name:any=null;
+  emaill:any=null;
+  phone:any=null;
+  executed:any;
+  $event2:any;
+  dealer:any;
+  contacts: Contact[]=[];
+  contact: Contact;
+  login1:any;
+  mess2:any;
+  mess:any;
+  otp:any;
+  str:boolean = false;
+  password2:any=null;
+  before:any;
+  emmnerr:any;
+  Load:any
+  $event:any;
+  fs:any;
+  ls:any;
+  emailid:any;
+  or:any;
+  useridd:any;
+  custtype:any;
+  cust:boolean=false;
+  mb:any;
+  logo:any;
+  text:any;
+  userID:any;
+  address:any;
+  sup_admin: any;
+  documentDetail:any;
+  imageURL:any;
+
+  documentList = [
+    {
+      "docId": "Adhar",
+      "docName": "Adhar Card"
+    },
+    {
+      "docId": "voterCard",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "PAN",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "DL",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "Nepali Citizenship",
+      "docName": "Nepali Citizenship"
+    }
+    
+  ];
+  countrySelected: { countryCode: any; dialcode: any; };
+  timezoneArray: any[];
+  telCountryCode: any;
+
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<AddDealerComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput-jquery.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+      
+      var  initialObj = {
+        doctype:'',
+        image:'',
+        phone:''
+      }
+      this.imageuploadObject.push(initialObj);
+    }
+bussinessType:boolean=false;
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.bussinessType=this.data.userInfo.bussinessType?this.data.userInfo.bussinessType=="1"?true:false:false
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    var that = this;
+    setTimeout(() => {
+     that.telCountryCode =  $("#telephone").intlTelInput({
+        allowDropdown:true,
+        autoPlaceholder:"Enter Mobile Number",
+        initialCountry:"in",
+        preferredCountries: ["in","us" ],
+        separateDialCode:true,
+        }); 
+    }, 300);
+
+    var Phoneinput = document.getElementById('telephone');
+    var that = this;
+    Phoneinput.addEventListener("countrychange",function(p) {
+      console.log("Inside Function");
+      var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+      console.log(countryData); 
+      that.countrySelected = {
+        countryCode : countryData.iso2,
+        dialcode: countryData.dialCode
+      }
+      });
+ 
+   
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  //  this.getdev();
+  if(this.mb.charAt(0)=="n"){
+    this.mb = ' '
+  }
+  if(this.custtype == true){
+    this.cust = true;
+  }
+
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text']; 
+
+  var timeZn = moment.tz.guess(); 
+  if(timeZn != 'Asia/Calcutta'){
+    this.timezone = timeZn;
+  }
+  console.log(this.timezone);
+
+
+var timeZones = moment.tz.names();
+console.log(timeZones);
+this.timezoneArray=[];
+for (var i in timeZones) {
+  this.timezoneArray.push({ viewValue: "(GMT" + moment.tz(timeZones[i]).format('Z') + ")" + timeZones[i], value: timeZones[i] });
+}
+
+
+setTimeout(() => {
+  $('#dbselect').multipleSelect({
+    width: 300,
+    placeholder: 'Select Timezone',
+    filter: true,
+    single: true,
+    selectAll: false
+  })   
+}, 100);
+this.latLongDetail()
+  }
+
+  stre(){
+    this.str =true;
+  }
+  stren(){
+    this.str =false;
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  clear(){
+    this.first_name=' '
+    this.last_name=' '
+    this.emaill = null
+    this.phone = null
+  }
+
+  addContact2(){
+    var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+   var expDate = new Date()
+   expDate.setFullYear(expDate.getFullYear()+1); 
+   var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+   console.log(countryData); 
+   this.countrySelected = {
+     countryCode : countryData.iso2,
+     dialcode: countryData.dialCode
+   }
+   console.log('expDate=>',expDate);
+    if(this.first_name==null || this.last_name==null || this.passwordd==null)
+      {
+     return  this._flashMessagesService.show('Please fill all Requied fields', { cssClass: 'alert-danger', timeout: 3000 });
+       
+      }  
+      else if((this.userID == undefined)||(this.userID.trim() == '')){
+      return  this._flashMessagesService.show('User ID is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+      }   
+      // else if((this.emaill == undefined)||(this.emaill.trim() == '')){
+      //  return this._flashMessagesService.show('Email is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+
+      // }
+      else if(this.password2 != this.passwordd){
+       // this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 });
+        this.tost1("psdnmtch")
+       }
+      else if (this.emaill && this.phone){
+        this.Load=true
+   //  if (!this.executed) {
+       
+    //   this.executed = true;
+       const newContact2 ={
+       first_name: this.first_name,
+       last_name: this.last_name,
+       email: this.emaill,
+       password: this.passwordd,
+       phone: this.phone,
+       isDealer: true,
+       custumer:false,
+       sysadmin:this.superAdmin,
+       expdate : new Date(expDate),
+       supAdmin:this.sup_admin,
+       user_id:this.userID,
+       address:this.address
+
+   }
+   if(this.inventoryManagement!=undefined){
+     newContact2['inventoryManagement']=this.inventoryManagement;
+   }
+   if(this.bussinessType!=undefined){
+      newContact2['bussinessType']=this.bussinessType?"1":"0";
+   }
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   
+      if (tzone != undefined) {
+        newContact2['timezone'] = tzone[0];
+      }
+
+  
+
+   if(this.imageuploadObject.length > 0){  
+     
+    for(var d = 0 ;d <this.imageuploadObject.length;d++){
+     
+      if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+            this.imageuploadObject.splice(d,1);
+           
+      }
+
+    }
+  } 
+  console.log("Final DOC ARRAY",this.imageuploadObject);
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+   this.contactService.addContact(newContact2)
+   .subscribe(contact => {
+    console.log(contact);
+    //  USER_ID already exists   
+    if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "User Duplicate"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Email ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Mobile Number already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else{
+      this.clear();
+      this.Load=false
+      this.onNoClick("succ");
+      this.contacts.push(contact);
+    }
+  
+   }, (err: any) => { 
+    //  console.log(err.status); 
+    // console.log(err);
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+
+    this.tost1("EmM")
+  }
+  else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+
+  }
+  });
+/*    this._flashMessagesService.show('OTP Sent Sucessfully', { cssClass: 'alert-success', timeout: 3000 }); */
+
+ }
+      else if((this.phone)||(this.userID)){
+        this.Load=true
+
+    //   if (!this.executed) {
+    //     this.executed = true;
+         const newContact2 ={
+         first_name: this.first_name,
+         last_name: this.last_name,
+         password: this.passwordd,
+        //  phone: this.phone,
+         isDealer: true,
+         custumer:false,
+         sysadmin:this.superAdmin,
+         expdate : new Date(expDate).toISOString(),
+         supAdmin:this.sup_admin,
+        //  user_id:this.userID,
+         address:this.address
+     }
+
+     if(this.phone){
+      newContact2['phone'] = this.phone  ;
+    }
+
+    if(this.countrySelected != undefined){
+      newContact2['std_code']=this.countrySelected;
+     }
+    
+     
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+}
+  if(this.inventoryManagement!=undefined){
+     newContact2['inventoryManagement']=this.inventoryManagement;
+   }
+    if(this.bussinessType!=undefined){
+      newContact2['bussinessType']=this.bussinessType?"1":"0";
+   }
+    if(this.userID){
+      newContact2['user_id'] = this.userID  ;
+
+    }
+
+     if(this.imageuploadObject.length > 0){  
+
+      for(var d = 0 ;d <this.imageuploadObject.length;d++){   
+        if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+              this.imageuploadObject.splice(d,1);        
+        }
+      }
+    }
+    newContact2['imageDoc'] = this.imageuploadObject;
+     this.contactService.addContact(newContact2)
+     .subscribe(contact => {
+   
+      if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }if(contact.message == "USER_ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "User Duplicate"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Email ID already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Mobile Number already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else{
+        
+      this.clear();
+      this.Load=false;
+      this.onNoClick("succ");
+       this.contacts.push(contact);
+
+      }
+  
+     }, (err: any) => {
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+      this.Load=false
+      this.emmnerr=JSON.parse(err._body);
+      this.data_descip = this.emmnerr.split(':')[1];
+      console.log(this.data_descip);
+      swal(
+        'Error',
+        this.data_descip,
+        'error'
+      )
+  
+
+      this.tost1("EmM")
+    }
+    else{
+      this.Load=false
+      // console.log("dadsa");
+      swal(
+        'Error',
+        'Internal Server error , Please try after sometime !!!',
+        'error'
+      )
+    }})}
+ else if(this.emaill){
+ // if (!this.executed) {
+  //  this.executed = true;
+    const newContact2 ={
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.passwordd,
+    org_name: this.org_name,
+    email: this.emaill,
+    isDealer: true,
+    custumer:false,  
+    sysadmin:this.superAdmin,
+    expdate : new Date(expDate).toISOString(),
+    supAdmin:this.sup_admin,
+    user_id:this.userID,
+    address:this.address
+
+}
+
+if(this.countrySelected != undefined){
+  newContact2['std_code']=this.countrySelected;
+ }
+
+ 
+ if(tzone != undefined){
+  newContact2['timezone'] = tzone[0];
+}
+if(this.inventoryManagement!=undefined){
+     newContact2['inventoryManagement']=this.inventoryManagement;
+   }
+ if(this.bussinessType!=undefined){
+      newContact2['bussinessType']=this.bussinessType?"1":"0";
+   }
+
+if(this.imageuploadObject.length > 0){  
+
+  for(var d = 0 ;d <this.imageuploadObject.length;d++){
+    if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+          this.imageuploadObject.splice(d,1);   
+    }
+  }
+}
+newContact2['imageDoc'] = this.imageuploadObject;
+
+this.contactService.addContact(newContact2)
+.subscribe(contact => {
+  console.log(contact);
+  //  USER_ID already exists
+
+  //this.tost1("succ")
+  if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "User Duplicate"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Email ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Mobile Number already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else{
+    this.clear();
+    this.Load=false
+    this.onNoClick("succ");
+    this.contacts.push(contact);
+  }
+
+}, (err: any) => {
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+    // console.log(this.emmnerr)
+    this.tost1("EmM")
+  }
+  else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+ 
+  }});
+
+
+ }
+ 
+ }
+
+ data_descip:any;
+ onNoClick(a): void {
+  this.dialogRef.close(a);
+ }
+ tost1(divid){
+  if(divid == "EmM"){
+     this.data_descip =  this.emmnerr.split(":")[1]
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+   else if(divid == "succ"){
+     this.data_descip =  "Dealer Successfully Added"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }
+   else if(divid == "psdnmtch"){
+    this.data_descip =  "Error: Password and confirm password do not match"
+    this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+  //    function launch_toast() {
+  //     // console.log(divid);
+  //      var x = document.getElementById("toast")
+  //      //console.log(x);
+  //      x.className = "show";
+  //      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+  //  }
+    }
+
+  valclear(){
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 2000 });        
+    
+  }
+
+  devicess:any;
+  final:any;
+  click1(event){
+    this.show2=false;
+    this.show3=true;
+    if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+    
+    else
+    event.preventDefault();
+    }
+    click2(event2){
+      this.show2=true;
+      this.show3=false;
+      
+      }
+      call(e) {
+        {
+               if (e.keyCode == 32) {
+                   e.preventDefault();
+               }
+           }
+   }
+
+
+   getdev(){
+    let foods = []
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+        
+      data => {
+        this.devicess = data 
+  
+        let swap;
+        for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+          for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+            if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+                swap = this.devicess.devices[c];
+                this.devicess.devices[c] = this.devicess.devices[c+1];
+                this.devicess.devices[c+1] = swap;
+            }
+          }
+        }
+  
+        this.final = this.devicess.devices
+        
+       for(let i=0;i<this.devicess.devices.length;i++){
+       
+        //  if(this.devicess.devices[i].type_of_device =="Tracker"){
+           let a ={
+            value : this.devicess.devices[i].Device_Name,
+            viewValue:this.devicess.devices[i].Device_Name
+           }
+           foods.push(a);
+        //  }
+      
+       }
+  
+      });
+  }
+
+  cond:Boolean = false;
+  point : any = 0;
+  aa(){
+    console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  documentType(docType){
+    console.log("doctypeObject=>",docType);
+
+  }
+
+  docRow:boolean=false;
+  AddDocumentsField(addedRow){
+    if(addedRow){
+      this.docRow = true;
+    }
+     var obj={doctype:'',image:''};
+     this.imageuploadObject.push(obj);
+     console.log(this.imageuploadObject);
+    // console.log("ImageuploadObject=>",this.imageuploadObject);
+}
+
+DeleteDocumentsField(index){
+  console.log(this.imageuploadObject.length);
+  if(this.imageuploadObject.length == 1){
+    this.docRow = false;
+  }
+  this.imageuploadObject.splice(index, 1);
+
+}
+
+selectedFile: File;
+onFileChanged(event) { 
+  this.selectedFile = <File>event.target.files[0];
+  console.log(this.selectedFile); 
+}
+
+closebox(){
+  this.dialogRef.close(null);
+ }
+ 
+onUpload(imgIndex) {
+  console.log(imgIndex);
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+
+  fd.append('photo',this.selectedFile,this.selectedFile.name)
+   console.log("imgURL=>",fd) ;
+   this.contactService.imageupload(fd)
+   .subscribe(res=>{
+     var resImage ='';
+     resImage = res['_body'];
+     console.log(res['_body']);
+     this.imageuploadObject[imgIndex].image = resImage;
+      console.log(this.imageuploadObject);
+     // console.log(res);
+   },err=>{
+     console.log(err);
+   })
+
+ }
+ passwordIcon:any='visibility_off';
+ passwordIcon_1:any='visibility_off';
+
+
+ showpassword(p:any){
+  
+   if((p == 'p1')&&(this.passwordtype == "password")){
+     this.passwordtype = 'text';
+     this.passwordIcon = 'visibility';
+     return;
+
+   }
+
+   if((p == 'p1')&&(this.passwordtype == "text")){
+     this.passwordtype = 'password'
+     this.passwordIcon = 'visibility_off';
+     return;
+   }
+
+   if((p == 'p2')&&(this.passwordtype_1 == "password")){
+    this.passwordtype_1 = 'text';
+    this.passwordIcon_1 = 'visibility';
+    return;
+
+
+  }
+
+  if((p == 'p2')&&(this.passwordtype_1 == "text")){
+    this.passwordtype_1 = 'password';
+    this.passwordIcon_1 = 'visibility_off';
+    return;
+  }
+
+ }
+
+ latLongDetail(){
+  var that =this;
+  console.log("Inside Latlong Function");
+  if (navigator.geolocation) {  
+ 
+    if(location.protocol != 'https:'){
+      this.contactService.getlatLong().subscribe(res=>{
+        console.log(res); 
+          let t_latlng = new google.maps.LatLng(res.lat, res.lon);
+          let request = {
+            latLng: t_latlng
+          };
+
+        this.getAddress(request);
+      })
+    }else{
+      navigator.geolocation.getCurrentPosition(function(position) {
+        var d_lat= position.coords.latitude;
+        var d_lng=position.coords.longitude;
+        let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+        let request = {
+          latLng: t_latlng
+        };
+
+        that.getAddress(request);
+      })
+      
+    }}            
+}
+
+getAddress(request){ 
+  let geocoder = new google.maps.Geocoder();  
+  geocoder.geocode(request, function (data, status) {
+    console.log("Inside geocoder function");  
+    var userCountry;
+    if (status == google.maps.GeocoderStatus.OK) {
+      if (data[0] != null) {
+        var address_show = data[0];
+        console.log('var=>' ,address_show);
+        for (var ac = 0; ac < data[0].address_components.length; ac++) {
+          var component = data[0].address_components[ac];
+          switch(component.types[0]) {     
+              case 'country':
+                  userCountry  = component.short_name;
+                  console.log(userCountry);
+                  break;      
+          }
+      };
+       
+          var aaa = $('#telephone').intlTelInput("setCountry",userCountry);
+      } else {
+        userCountry = 'in';  
+      }
+    }
+    else {
+      console.log("Inside Error function");  
+      userCountry = 'in';
+    }
+  })  
+}
+
+
+}
diff --git a/src/app/add-device-model/add-device-model.component.css b/src/app/add-device-model/add-device-model.component.css
new file mode 100644
index 0000000..d29dec0
--- /dev/null
+++ b/src/app/add-device-model/add-device-model.component.css
@@ -0,0 +1,1068 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+  
+  }
+  
+
+
+  .background-image{
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: 0;
+    padding: 0;
+   /*  background-image: url('../../assets/image/trygif2.gif'); */
+    background-image: url('../../assets/image/bgtry3.jpg');
+    background-size:100%;
+    background-repeat: no-repeat;
+  }
+  /* 
+  ::-webkit-scrollbar {
+    display: none;
+    } */
+  
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+  
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+    
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  
+  
+  /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  
+  
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    
\ No newline at end of file
diff --git a/src/app/add-device-model/add-device-model.component.html b/src/app/add-device-model/add-device-model.component.html
new file mode 100644
index 0000000..91d93db
--- /dev/null
+++ b/src/app/add-device-model/add-device-model.component.html
@@ -0,0 +1,363 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+<app-all-menus></app-all-menus>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div>
+
+    <div  style="float:left; width: 100%;padding-top: 6%;">
+
+    
+
+        <div class="loading" *ngIf="Load">Loading&#8230;</div>
+
+       <md-card style="opacity: .9;margin-top: 15px;background: #fcfbfb;">
+      <h4 style="float:left;color:#855353">{{'Add Device Model' | translate}}</h4> <br><hr>
+
+
+     <!-- ----------------------- Body of Driver Form----------------------------------------------------- -->
+        <form #signupForm="ngForm">
+     
+     <div class ="form-group">
+          <!-- Device Model Name  -->
+          <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+          <input mdInput   class="no-spin" [(ngModel)]="device_type" name="device_type"placeholder="{{'Device Model Name' | translate}}" required/>
+                  <md-error class="required">{{'Enter Device Model' | translate}}</md-error>
+                 </md-form-field>
+                 <!-- Device Model Configuration Command -->
+                 <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+       <input mdInput type="text" [(ngModel)]="config_cmd" name="config_cmd"placeholder="{{'Configuration Command' | translate}}" required/> 
+       <md-error class="required">{{'Enter Configuration Command' | translate}}</md-error>
+      </md-form-field>
+      </div>
+
+      <!-- <div class ="form-group">
+   
+        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+        <input mdInput   class="no-spin" [(ngModel)]="sos_number" name="device_type"placeholder="{{'Device SOS Number' | translate}}" />
+            
+               </md-form-field>
+    
+               <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+     <input mdInput type="text" [(ngModel)]="chk_status" name="config_cmd"placeholder="{{'Check Status Command' | translate}}" /> 
+  
+    </md-form-field>
+    </div> -->
+    <!-- <div class ="form-group">
+   
+      <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+      <input mdInput   class="no-spin" [(ngModel)]="stop_engine" name="stop_engine" placeholder="{{'Stop Engine Command' | translate}}" />
+            
+             </md-form-field>
+           
+             <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+   <input mdInput type="text" [(ngModel)]="restore_engine" name="restore_engine" placeholder="{{'Restore Engine Command' | translate}}" /> 
+ 
+  </md-form-field>
+  </div> -->
+       <div class ="form-group">
+         <!--Location command -->
+    <md-form-field class="example-full-width width "  style="float:left;width: 50%;padding-left:2%">
+    <input mdInput type="text" [(ngModel)]="loc_cmd" name="loc_cmd"placeholder="{{'Location Command'| translate}}" />                
+   </md-form-field>
+      <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
+          
+              <input   mdInput type="text"  [(ngModel)]="imob_cmd" name="imob_cmd"placeholder="{{'Immoblizer Command' | translate}}" required>
+              <md-error class="required">{{'Enter Immoblizer command' | translate}}</md-error>  
+      </md-form-field>
+     </div>
+     <div class ="form-group">
+        <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
+            <input mdInput type="text" [(ngModel)]="reset_cmd" name="reset_cmd" placeholder="{{'Reset Command' | translate}}" required> 
+            <md-error class="required">{{'Enter Reset command' | translate}}</md-error> 
+          </md-form-field>
+          <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
+              <input mdInput type="text" [(ngModel)]="resume_cmd" name="resume_cmd" placeholder="{{'Resume Command' | translate}}" required> 
+              <md-error class="required">{{'Enter Resume command' | translate}}</md-error> 
+            </md-form-field>
+     </div>
+     <div class ="form-group">
+        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+          <input mdInput class="no-spin" [(ngModel)]="timeZone" name="timezone" placeholder="{{'Timezone' | translate}}" />
+        </md-form-field>
+        <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+          <input mdInput type="text" [(ngModel)]="apn" name="apn" placeholder="{{'APN' | translate}}" />
+        </md-form-field>
+    </div>
+    <div class ="form-group">
+       <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
+           <input mdInput type="number" [(ngModel)]="deviceport" name="port" placeholder="{{'Port' | translate}}" > 
+         </md-form-field>
+ 
+         <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+           <input mdInput type="text" [(ngModel)]="sms_ip" name="port" placeholder="{{'SMS IP' | translate}}">
+         </md-form-field>
+   </div>
+ 
+   <div class="form-group">
+     <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+       <input mdInput type="text" [(ngModel)]="sms_apn" name="port" placeholder="{{'SMS APN' | translate}}">
+     </md-form-field>
+     </div>
+     <div class="form-group">
+   
+     <md-form-field class="example-full-width width" style="float:left;width: 50%;padding-left:2%">
+       <input mdInput type="text" [(ngModel)]="sms_timezone" name="port" placeholder="{{'SMS Timezone' | translate}}">
+     </md-form-field>
+   </div>
+     <div >
+      <md-form-field  class="example-full-width width"  style="float:left;width: 50%;padding-left:2%">
+          <input mdInput type="text" [(ngModel)]="Manufacturer" name="manufacturer" placeholder="{{'Manufacturer' | translate}}" > 
+        </md-form-field>
+        <md-select (ngModelChange)="immobilizerType($event)" style="width: 46%;padding-top: 12px;"[(ngModel)]="immValue" name="immType" placeholder="{{'Immoblizer Type' | translate}}">
+          <md-option  value="serverCmd">Server Command</md-option>
+          <md-option  value="mobileCmd">Mobile Command</md-option>
+      </md-select>
+   </div>
+    <!-- sms_ip;
+    sms_apn;
+    sms_timezone; -->
+ 
+
+ 
+     </form>
+         <!-- formgroup ends here  -->
+<br><br>
+      <div >
+          <!-- <button class="btn btn-primary btn-block/"(click)="addDevice()" style="cursor:pointer;width: 159px;height: 44px;">Add Device</button> -->
+      </div><br>
+      <flash-messages style="float: center;"></flash-messages>   
+      <!-- form button and flash msgs end here  -->
+     <div style="padding-top:3%;">
+            <input type="submit" [disabled]="!signupForm.form.valid" (click) ="addDeviceModel(signupForm.form)" class="btn btn-primary btn-block/" value="ADD DEVICE MODEL" style="cursor:pointer;width: 159px;height: 44px;"  fxFlexAlign="center">&nbsp;&nbsp;
+            <input type="submit"  (click) ="NewVehicleType()" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;"  >
+            <br>
+            <flash-messages style="float: center;"></flash-messages>
+     </div>
+  
+       </md-card>
+  </div>  
+<!-- </div>     -->
+
+
+
+    </body>
+</html>
+
+
+<!--   <html>
+          <head>
+              <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+             
+          </head>
+          <body>
+              <div class="upper">
+                  <md-toolbar>My App</md-toolbar>
+                <md-toolbar flex style="background-color:white;width: 100%;" >
+                  
+                        <img src="../../assets/image/f_logo.jpg" 
+                        style=
+                        "width:12%;padding-top: 8px;">
+                        
+                      <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                                   </ul>
+                        
+                                   <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
+                                       <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                          <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                          <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                       
+                                          &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                             <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                        </md-menu>
+                                        
+                                        <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                       
+                                           <img src="../../assets/image/us.jpg" height=30px>
+                                        </button>
+                                 </ul>
+                                       
+                                
+                             
+                                     <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+   
+                                         <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                           <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                           <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                        
+                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                              <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                         </md-menu>
+                                         
+                                         <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                   
+                                            <img src="../../assets/image/us.jpg" height=30px>
+                                         </button>
+                                     
+                                   </ul>
+                                         
+                      
+                     </md-toolbar>
+                </div>
+
+
+      
+<div class="for" >
+    <md-card>
+          <form action="" role="form">
+              <input id='step2' type='checkbox'>
+              <input id='step3' type='checkbox'>
+          
+              <div id="part1" class="form-group">
+                <div class="panel panel-primary">
+                             <b><h3 style="text-align:left;">Device Details</h3></b>  
+
+                              
+
+                                <form #lgForm="ngForm" (ngSubmit)="addDevice()">
+
+          <progress-bar [value]="50" [max]="100" title="Device Details"></progress-bar> <br>
+                     <div class ="form-group">
+                             <md-form-field class="example-full-width width">
+        <input mdInput   class="no-spin" [(ngModel)]=" deviceid" name=" deviceid"placeholder="Device ID" required/>
+                                     <md-error class="required">Enter Device ID</md-error>
+                                    </md-form-field>&nbsp;&nbsp;&nbsp;
+                                    <md-form-field class="example-full-width width">
+                          <input mdInput type="text" [(ngModel)]="devicename" name="devicename"placeholder="Device Name" required/> 
+                          <md-error class="required">Enter Device Name</md-error>
+                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                   
+                 <md-form-field class="example-full-width width ">
+                          <input mdInput type="text" [(ngModel)]="des" name="des"placeholder="Description" />                
+                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;
+
+                         <md-select  name="typdev" placeholder="Device Type" style="margin-top: -4px;
+                         width: 40%;
+                         /* float: right; */
+                         margin-right: 2%;" [(ngModel)]="new" (ngModelChange)="cultivoChange(new)">
+                            <md-option *ngFor="let food of foods" [value]="food" >
+                              {{ food.viewValue }}
+                            </md-option>
+                          </md-select> 
+                          <div *ngIf="show">
+                         <md-form-field  class="example-full-width width" style="float:left;margin-left:8%;">
+                                 <input mdInput type="text" [(ngModel)]="hrdwr" name="hrdwr"placeholder="SIM Number" required/> 
+                                 <md-error class="required">Enter SIM Number</md-error>  
+                         </md-form-field>
+                         <md-select  name="neww" placeholder="Vechiles Type" style="margin-top: -4px;
+                         width: 40%;
+                         /* float: right; */
+                         margin-right: 8%;" [(ngModel)]="neww">
+                            <md-option *ngFor="let foodd of foodds" [value]="foodd" >
+                              {{ foodd.viewValue }}
+                            </md-option>
+                          </md-select> 
+                        </div>
+               
+    
+
+
+
+                            </div> 
+                        <br>  <br>  <br> 
+                     <div class="btn-group btn-group-lg" role="group" aria-label="...">
+                      <label class="back">
+                        <div class="btn btn-default btn-primary btn-lg" role="button" (click)="back2home();">Back</div>
+                      </label>&nbsp;&nbsp;  
+                              <label for='step2' id="continue-step2" class="continue">
+                                       <div class="btn btn-default btn-success btn-lg" >Next</div> 
+                                     </label>
+                                   </div> 
+                  </form>
+             
+           
+                </div>
+              </div>
+          
+              <div id="part2" class="form-group">
+                <div class="panel panel-primary">
+                  <div class="panel-heading">
+                    <h3 style="text-align:left;">Security</h3>
+                  </div>
+     
+                  
+                      <progress-bar [value]="100" [max]="100" title="Security" color="red"></progress-bar>
+                      <b><h5 align="justify"><font size="+1">Auto-generated authentication token</font></h5></b>
+                      <p align="justify">
+                          You have registered your device credentials, to get connected you need to generate the token key. Once you have generated the token, you will able to read and write the devices. Token will be sent to your registered e-mail id. Authentication tokens are non-recoverable. If you missplace this token, you will need to re-register the device to generate the new authentication token.
+                     </p>
+                     <md-card style="margin-top:-2px;height:104px">
+                        <div style="margin-top:-35px;">  
+                      <div class ="form-group">
+                            <br> 
+                             
+                       <label style="float:left;font-size:16px;"><b>Device ID : &nbsp;</b></label>     
+                       <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.deviceid}}</label><br>       
+                            </div>
+                        
+                            <div class ="form-group">
+                                <label style="float:left;font-size:16px;"><b>Device Name : &nbsp;</b></label>
+                                <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.devicename}}</label><br>       
+                                
+                           <br> 
+                                <br>  </div>
+                            </div>
+                     </md-card>
+
+                    
+                     <div class="btn-group btn-group-lg btn-group-justified" role="group" aria-label="...">
+                                             
+                        <label for='step2' id="back-step2" class="back">
+                            <div class="btn btn-default btn-primary btn-lg" role="button">Back</div>
+                          </label>&nbsp;&nbsp;                                    
+                                             
+                                             
+                                                          &nbsp;&nbsp;  <label for='step3' id="continue-step3" class="continue">
+                                                             
+               <button type="submit" class="btn btn-default btn-success btn-lg"  (click)="addDevice()"[disabled]="!lgForm.form.valid">Submit</button>
+                                                        </label>
+                                                     </div>
+   <flash-messages style="float: center;"></flash-messages>
+     <button (click)="test()" style="float:left;font-size:11px;background-color: Transparent; background-repeat:no-repeat;border: none;cursor:pointer;   overflow: hidden;outline:none;margin-top:10pxpx">* token pricing</button>                                                
+                      
+        
+             
+                </div>
+              </div>
+          
+    
+            </form>
+    </md-card>
+
+              </div>
+
+
+
+
+          
+          </body>
+       </html>                -->
+
+
diff --git a/src/app/add-device-model/add-device-model.component.spec.ts b/src/app/add-device-model/add-device-model.component.spec.ts
new file mode 100644
index 0000000..6b7d99e
--- /dev/null
+++ b/src/app/add-device-model/add-device-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDeviceModelComponent } from './add-device-model.component';
+
+describe('AddDeviceModelComponent', () => {
+  let component: AddDeviceModelComponent;
+  let fixture: ComponentFixture<AddDeviceModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddDeviceModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDeviceModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-device-model/add-device-model.component.ts b/src/app/add-device-model/add-device-model.component.ts
new file mode 100644
index 0000000..7a08d99
--- /dev/null
+++ b/src/app/add-device-model/add-device-model.component.ts
@@ -0,0 +1,494 @@
+import { Component, OnInit } from '@angular/core';
+import {JSONEditor} from 'jsoneditor';
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import {Token} from '../token';
+import{Contact} from '../contact';
+import {MdSnackBar} from '@angular/material';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import {ContactService} from '../contact.service';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot,ActivatedRoute,Params } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Observable} from 'rxjs/Rx';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { toString } from '@ng-bootstrap/ng-bootstrap/util/util';
+@Component({
+  selector: 'app-add-device-model',
+  templateUrl: './add-device-model.component.html',
+  styleUrls: ['./add-device-model.component.css'],
+  providers: [ContactService,SidebarComponent]
+})
+export class AddDeviceModelComponent implements OnInit {
+  sos_number:any;
+  chk_status:any;
+  stop_engine:any;
+  restore_engine:any;
+ 
+  device_Id: string;
+  dev: any;
+  deviceId: any;
+  group_info: any;
+  executed2:any;
+  groupInfo:any;
+  devices: Device[] = []
+  device: Device
+  fuel_tank_capicity:any;
+  voltage_tank_empty:any;
+  tankfull_capicity:any;
+  tokens: Token[] = []
+  token: Token
+
+   useridd: any;
+   routeData : any=[];
+   data:any;
+  mb: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  custtype: boolean;
+  cust: boolean;
+  fs: any;
+  ls: any;
+  or: any;
+  logo: any;
+  superAdmin: any;
+  timeZone:any;
+  apn:any;
+  sms_ip;
+  sms_apn;
+  sms_timezone;
+  text: any;
+  Manufacturer: any;
+  immValue: any;
+  immobilizerCmd: any;
+  deviceport : any;
+  myaccount(){
+ 
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  // let dialogRef = this.dialog.open(MyaccountComponent, {
+  //   width: '903px',
+  //   data: {}
+  // });
+
+  // dialogRef.afterClosed().subscribe(result => {
+
+  //   if(result == "succ"){
+  //     console.log("Updated")
+  //   }
+
+  // });
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  } logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  vehicleRoute(){
+    this.cond = false
+    this.router.navigateByUrl("vehicleRoute");
+  
+  }
+  
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+  
+  NewVehicleType(){
+    this.router.navigateByUrl("deviceModel"); 
+    // this.devices=[];
+    // ngForm.reset();
+  }
+
+
+  // new_1(){
+  //   this.router.navigateByUrl("new");
+    
+  // }
+  
+  notification(){
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+  
+  
+  cond:Boolean = false;
+  point : any = 0;
+   aa(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+ 
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  routeViolation(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+  
+  }
+
+  
+  
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert-report");
+  
+  }
+  
+  summaryReport(){
+  
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  
+  overspeed(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+  
+  }
+  stoppage_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+  
+  }
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+  
+  
+  }
+  
+  geofancingReport(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  route_map(){
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  
+  
+  distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+  }
+  
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+  
+  addgeo(){
+    this.router.navigateByUrl("geofence-add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+   a(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  } report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+  
+  }
+  report_speed(){
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  device_type: any;
+  config_cmd: any;
+  loc_cmd: any;
+  imob_cmd: any;
+  reset_cmd: any;
+  resume_cmd: any;
+  
+  Manf: string;
+  Model: string;
+  tkstatus:any;
+  value:any;
+Lo:string;
+  Hardware_Ver: string;
+  Loca: string;
+  temp:any
+  food:any
+  new:any;
+  email:any;
+  message:string;
+  selectedValue:any;
+  show:boolean =false;
+
+ 
+  /* ../../assets/image/bgtry2.jpg */
+ 
+  foodds = [
+    {value: 'true', viewValue: 'True'},
+    {value: 'false', viewValue: 'False'},
+   
+  ];
+  cultivoChange(val){
+  
+    if(val.value == "Tracker"){
+      this.show=true
+    }
+   else{
+    this.show=false
+   }
+  }
+
+  back2home(){
+    // console.log("Runnig Back")
+    this.router.navigateByUrl("dashboard");
+    
+  }
+
+  constructor(private _formBuilder: FormBuilder,private router: Router, public snackBar: MdSnackBar,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,private sidebar:SidebarComponent,public dialog: MdDialog,private act:ActivatedRoute) { }
+test(){
+//   console.log("Runnig Test")
+//  console.log(this.new.value);
+}
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+       /*  TOKEN GENERATION  */   
+
+       
+
+
+      /*  ADD DEVICE   */
+     
+      mess:any;
+      mess2:any;
+      mess3:any;
+      neww:any;
+      driver:any;
+      before:any;
+      dcontact:any;
+      timer:any;
+      subscription:any;
+      Load:boolean=false
+      ign(){
+        this.router.navigateByUrl("device-report/ign-report");
+      
+      }
+      addDeviceModel(signupForm){
+     
+        // alert(this.useridd);
+  if(this.device_type == null||this.config_cmd == null||this.loc_cmd == null||this.imob_cmd == null||this.reset_cmd == null||this.resume_cmd == null)
+  {  
+    this._flashMessagesService.show('Error :Please Insert details of Device type', { cssClass: 'alert-danger', timeout: 2000 });
+    this.Load = false;
+    return;
+  }
+
+    const newDeviceModel ={
+      device_type: this.device_type,
+      config_cmd: this.config_cmd,
+      loc_cmd: this.loc_cmd,
+      imob_cmd: this.imob_cmd,
+      reset_cmd: this.reset_cmd,
+      resume_cmd:this.resume_cmd,
+      // sms_ip:this.sms_ip,
+      // sms_apn:this.sms_apn,
+      // sms_timezone:this.sms_timezone
+      
+    }
+
+    if(this.sms_ip){
+      newDeviceModel['sms_ip'] = this.sms_ip;
+    }
+
+    if(this.sms_apn){
+      newDeviceModel['sms_apn'] = this.sms_apn;
+    }
+
+    if(this.sms_timezone){
+      newDeviceModel['sms_timezone'] = this.sms_timezone;
+    }
+
+   //webservice to add new driver
+   if(this.timeZone){
+    newDeviceModel['device_timezone'] = this.timeZone;
+   }
+   if(this.apn){
+    newDeviceModel['device_apn'] = this.apn;
+   }
+    if(this.Manufacturer){
+      newDeviceModel['Manufacturer'] = this.Manufacturer;
+    }
+
+    if(this.deviceport){
+      newDeviceModel['deviceport'] = this.deviceport;
+    }
+
+    if(this.immobilizerCmd){
+      newDeviceModel['imobliser_type'] = this.immobilizerCmd;
+    }
+    console.log(newDeviceModel);
+    
+      this.contactService.addDeviceModel(newDeviceModel)
+      .subscribe((dataret => {
+        this.data = dataret;
+        // this._flashMessagesService.show('Device Model Added', { cssClass: 'alert-success', timeout: 2000 });
+        // this.NewVehicleType(signupForm);
+        this.router.navigateByUrl('deviceModel');
+         }), (err: any) => { 
+          this._flashMessagesService.show('Internal Server Error', { cssClass: 'alert-denger', timeout: 2000 });
+      }
+    );
+     
+  }
+
+
+  imageFile:any;
+  Filename:any;
+  private fileCounter = 0;
+
+ 
+  
+  onRemoved(file) {
+    // console.log(file);
+  }
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  report_map(){
+    this.router.navigateByUrl("routeMapping");
+  
+  }
+  
+
+  immobilizere=[
+    {
+      value : 'serverCmmand',
+      Viewvalue : 'Server command'
+      
+    },
+    {
+      value : 'mobCmd',
+      Viewvalue : 'Mobile command'
+      
+    }
+  ]
+  ngOnInit() {
+    this.immobilizere;
+    this.logo=window.localStorage['logo'];
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.email = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.act.queryParams.subscribe((params:Params) =>{ 
+
+     
+      // console.log(params['useridd']);
+      this.routeData=params.user_id;
+      // let id= params['user_id'];
+      // this.groupId = id;
+      // console.log(this.groupId);
+    
+    
+      })
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+           
+  
+           if(this.mb.charAt(0)=="n"){
+            this.mb = ' '
+          }
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+  
+
+  }
+ 
+  immobilizerType(ev:any){
+    if(ev == "serverCmd") this.immobilizerCmd = '1.0';
+    if(ev == "mobileCmd") this.immobilizerCmd = '0.0';
+    console.log(this.immobilizerCmd);
+  }
+}
diff --git a/src/app/add-distributers/add-distributers.component.html b/src/app/add-distributers/add-distributers.component.html
new file mode 100644
index 0000000..c8e5b74
--- /dev/null
+++ b/src/app/add-distributers/add-distributers.component.html
@@ -0,0 +1,755 @@
+<!-- <div  style="max-height: 736px;overflow: auto;overflow-x: hidden;">
+  <div class="row" style="margin:0px">
+      <div class="col-sm-8 col-md-8" style="text-align: right; font-size: 22px; font-weight: 500;padding-right: 60px;background: #426E86;color: white;">
+            <label>{{heading}}</label>
+      </div>
+      <div class="col-sm-4 col-md-4" style="text-align: right; padding-top: 10px;background: #426E86;color: white;">
+            <md-slide-toggle *ngIf = "!editVal" [(ngModel)]="distStaus" ngDefaultControl ></md-slide-toggle>
+      </div>  
+  </div>
+  <div class="row"  style="margin:0px">
+      <div class="col-12">
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+      </div>
+  </div>
+  <div class="row"  style="margin:0px">
+      <div class="col-sm-12 col-md-4 col-lg-4">
+              <md-form-field class="example-full-width width" style="display: initial">
+                      <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId" required>
+                      <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4">
+              <md-form-field class="example-full-width width" style="display: initial">
+                      <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
+                      <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input  mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
+            <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
+        </md-form-field>
+      </div>
+  </div>
+  <div class="row"  style="margin:0px">
+      <div class="col-sm-12 col-md-4 col-lg-4">
+        <md-form-field class="example-full-width width" style="display: initial" (click)="stren();">
+            <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill" name="emaill"
+                placeholder="{{'Enter Email ID *' | translate }}">
+        </md-form-field>             
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4">
+        <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
+            <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" minlength="10" maxlength="10">
+              </md-form-field>   
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="organisation_name" placeholder="{{'Enter Organisation Name' | translate}}" name="organisation_name" >    
+        </md-form-field>
+      </div>
+  </div>
+  <div class="row"  style="margin:0px">
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}"
+                name="address">
+        </md-form-field>
+    </div>
+   
+      <div class="col-sm-12 col-md-4 col-lg-4" >
+              <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
+                      <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon}}</md-icon>
+                      <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" 
+                          mdInput type="{{passwordtype}}"  [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6"
+                          maxlength="12" required>
+                      <md-error class="required">{{'Invalid Password' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4" *ngIf = "editVal">
+              <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
+                      <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">{{passwordIcon_1}}</md-icon>
+                      <input mdInput type="{{passwordtype_1}}"  [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12"
+                          required>
+                      <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+  </div>
+ 
+<div class="row"  style="margin:0px">
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+        <div >
+            <span style="margin-right: 10px;">Welcome Message :</span>
+            <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="welcome_messages_status" ngDefaultControl ></md-slide-toggle>
+        </div>     
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" *ngIf = "editVal">
+        <label>Timezone</label>
+        <div style="display:flex">
+            <select id="dbselect" >
+                <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
+            </select>
+        </div>
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" >
+        <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="selectedlanguage" placeholder="--{{'Language' | translate}}--"  ngDefaultControl (change)="changelanguage()">
+          <md-option *ngFor="let language of available_languages" [value]="language.id">
+            {{language.view}}
+          </md-option>
+        </md-select>
+    </div>
+</div>
+<div class="row"  style="margin:0px">
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="speedLimit" placeholder="{{'Enter Speed Limit (KM/Hr)' | translate}}">
+        </md-form-field>
+    </div>
+
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="outOfReach" placeholder="{{'Out Of Reach (Hours)' | translate}}">
+        </md-form-field>
+    </div>
+
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+        <div>
+            <span style="margin-right: 10px;">KYC Verification Mail :</span>
+            <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="kyc_verification_mail" ngDefaultControl>
+            </md-slide-toggle>
+        </div>
+    </div>
+</div>
+  <div class="row"  style="margin:0px">
+      <div class="col-12" style="padding-top: 20px;font-weight: 600;"> <span>{{'Upload Documents' | translate }}:</span>
+          <button mdTooltip="{{'upload Documents' | translate}}" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
+              <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+          </button>
+      </div>
+  </div>
+  <div  style="margin:0px" class="row" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
+      <div class="col-3" style="padding-right: 0px;padding-top: 16px;">
+          <md-select class="example-full-width width" style="display: initial" (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype"  placeholder="{{'Doc Type' | translate}}">
+              <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+          </md-select>
+      </div>
+      <div class="col-3" style="margin-top: 4px;padding-right: 0px">
+          <md-form-field class="example-full-width width" style="display: initial">
+              <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
+          </md-form-field>
+      </div>
+      <div class="col-4" style="margin-top: 7px;padding-right: 0px">
+         
+          <input type="file" class="form-control" placeholder='Choose a file...' (change)="onFileChanged($event)" />
+      </div>
+      <div class="col-2" style="padding-right: 0px">
+          <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon>
+          <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon>
+      </div>
+  </div>
+  <div class="row"  style="margin:0px">
+      <div class="col-12">
+          <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Billing Information</p>
+      </div>
+  </div>
+  <div class="row"  style="margin:0px">
+      <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
+        <md-select class="example-full-width width" style="display: initial"  [(ngModel)] = "billingType"  placeholder="{{'Billing Type' | translate}}">
+            <md-option *ngFor="let bill of billingTypeArr" [value]="bill">{{bill}}</md-option>
+        </md-select>
+      </div>
+      <div class="col-sm-12 col-md-4 col-lg-4" style="display: inherit;">
+        <md-select name="currency"  [(ngModel)]="currencyType" style="padding-top: 17px;">
+        <md-option value="USD" selected="selected">United States Dollars</md-option>
+        <md-option value="EUR">Euro</md-option>
+        <md-option value="GBP">United Kingdom Pounds</md-option>
+        <md-option value="DZD">Algeria Dinars</md-option>
+        <md-option value="ARP">Argentina Pesos</md-option>
+        <md-option value="AUD">Australia Dollars</md-option>    
+        <md-option value="ATS">Austria Schillings</md-option>
+        <md-option value="BSD">Bahamas Dollars</md-option>
+        <md-option value="BBD">Barbados Dollars</md-option>
+        <md-option value="BEF">Belgium Francs</md-option>
+        <md-option value="BMD">Bermuda Dollars</md-option>
+        <md-option value="BRR">Brazil Real</md-option>
+        <md-option value="BGL">Bulgaria Lev</md-option>
+        <md-option value="CAD">Canada Dollars</md-option>
+        <md-option value="CLP">Chile Pesos</md-option>
+        <md-option value="CNY">China Yuan Renmimbi</md-option>
+        <md-option value="CYP">Cyprus Pounds</md-option>
+        <md-option value="CSK">Czech Republic Koruna</md-option>
+        <md-option value="DKK">Denmark Kroner</md-option>
+        <md-option value="NLG">Dutch Guilders</md-option>
+        <md-option value="XCD">Eastern Caribbean Dollars</md-option>
+        <md-option value="EGP">Egypt Pounds</md-option>
+        <md-option value="FJD">Fiji Dollars</md-option>
+        <md-option value="FIM">Finland Markka</md-option>
+        <md-option value="FRF">France Francs</md-option>
+        <md-option value="DEM">Germany Deutsche Marks</md-option>
+        <md-option value="XAU">Gold Ounces</md-option>
+        <md-option value="GRD">Greece Drachmas</md-option>
+        <md-option value="HKD">Hong Kong Dollars</md-option>
+        <md-option value="HUF">Hungary Forint</md-option>
+        <md-option value="ISK">Iceland Krona</md-option>
+        <md-option value="INR">India Rupees</md-option>
+        <md-option value="IDR">Indonesia Rupiah</md-option>
+        <md-option value="IEP">Ireland Punt</md-option>
+        <md-option value="ILS">Israel New Shekels</md-option>
+        <md-option value="ITL">Italy Lira</md-option>
+        <md-option value="JMD">Jamaica Dollars</md-option>
+        <md-option value="JPY">Japan Yen</md-option>
+        <md-option value="JOD">Jordan Dinar</md-option>
+        <md-option value="KRW">Korea (South) Won</md-option>
+        <md-option value="LBP">Lebanon Pounds</md-option>
+        <md-option value="LUF">Luxembourg Francs</md-option>
+        <md-option value="MYR">Malaysia Ringgit</md-option>
+        <md-option value="MXP">Mexico Pesos</md-option>
+        <md-option value="NLG">Netherlands Guilders</md-option>
+        <md-option value="NZD">New Zealand Dollars</md-option>
+        <md-option value="NOK">Norway Kroner</md-option>
+        <md-option value="PKR">Pakistan Rupees</md-option>
+        <md-option value="XPD">Palladium Ounces</md-option>
+        <md-option value="PHP">Philippines Pesos</md-option>
+        <md-option value="XPT">Platinum Ounces</md-option>
+        <md-option value="PLZ">Poland Zloty</md-option>
+        <md-option value="PTE">Portugal Escudo</md-option>
+        <md-option value="ROL">Romania Leu</md-option>
+        <md-option value="RUR">Russia Rubles</md-option>
+        <md-option value="SAR">Saudi Arabia Riyal</md-option>
+        <md-option value="XAG">Silver Ounces</md-option>
+        <md-option value="SGD">Singapore Dollars</md-option>
+        <md-option value="SKK">Slovakia Koruna</md-option>
+        <md-option value="ZAR">South Africa Rand</md-option>
+        <md-option value="KRW">South Korea Won</md-option>
+        <md-option value="ESP">Spain Pesetas</md-option>
+        <md-option value="XDR">Special Drawing Right (IMF)</md-option>
+        <md-option value="SDD">Sudan Dinar</md-option>
+        <md-option value="SEK">Sweden Krona</md-option>
+        <md-option value="CHF">Switzerland Francs</md-option>
+        <md-option value="TWD">Taiwan Dollars</md-option>
+        <md-option value="THB">Thailand Baht</md-option>
+        <md-option value="TTD">Trinidad and Tobago Dollars</md-option>
+        <md-option value="TRL">Turkey Lira</md-option>
+        <md-option value="VEB">Venezuela Bolivar</md-option>
+        <md-option value="ZMK">Zambia Kwacha</md-option>
+        <md-option value="EUR">Euro</md-option>
+        <md-option value="XCD">Eastern Caribbean Dollars</md-option>
+        <md-option value="XDR">Special Drawing Right (IMF)</md-option>
+        <md-option value="XAG">Silver Ounces</md-option>
+        <md-option value="XAU">Gold Ounces</md-option>
+        <md-option value="XPD">Palladium Ounces</md-option>
+        <md-option value="XPT">Platinum Ounces</md-option>
+    </md-select>
+        <md-form-field class="example-full-width width" style="display: initial;padding-top: 5px;">
+            <input mdInput type="number" [(ngModel)]="billingRate" placeholder="{{'Enter Billing Rate' | translate}}"
+                name="billrate">
+        </md-form-field>      
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" style="display: initial;padding-top: 7px;">
+        <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
+            <input type="tel"  (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephoneBill" [(ngModel)]="billingContactDetail"  minlength="10" maxlength="10">
+              </md-form-field> 
+              <small id="emailHelp" class="form-text text-muted" style="margin-top: 0;">Enter Billing Contact Detail</small>
+    </div>
+  </div>
+
+
+<div class="row"  style="margin:0px">
+  <div class="col-sm-12 col-md-4 col-lg-4">
+     
+      <md-form-field class="example-full-width width" style="display: initial">
+          <input mdInput type="text" [(ngModel)]="billingMail" placeholder="{{'Enter Billing Email' | translate}}"
+              name="billrate">
+      </md-form-field>     
+    
+</div>
+<div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
+  <md-select [(ngModel)]="plan" class="example-full-width width" style="display: initial" placeholder="Please select Plan">
+      
+      <md-option value="basic">Basic</md-option>
+      <md-option value="advanced">Advanced</md-option>
+      <md-option value="premium">Premium</md-option>
+      </md-select>
+</div>
+
+
+</div>
+<!-- ------------------------- SUpports And Service-------- --
+<div class="row" style="margin:0px">
+    <div class="col-12">
+        <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Supports And Services</p>
+    </div>
+</div>
+<div class="row"  style="margin:0px">
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="support1" placeholder="{{'support1' | translate}}">
+        </md-form-field>
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="support2" placeholder="{{'support2' | translate}}">
+        </md-form-field>
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="support3" placeholder="{{'support3' | translate}}">
+        </md-form-field>
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="service1" placeholder="{{'service1' | translate}}">
+        </md-form-field>
+    </div>
+    <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+        <md-form-field class="example-full-width width" style="display: initial">
+            <input mdInput type="text" [(ngModel)]="service2" placeholder="{{'service2' | translate}}">
+        </md-form-field>
+    </div>
+</div>
+
+
+ 
+<div class="row" style="text-align: center;padding-top: 20px;margin:0px">
+    <div class="col-12">
+        <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="checkkeyandupdate()">{{'SUBMIT' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+    </div>
+</div>
+
+</div> -->
+<div style="height: 90vh;">
+<div class="row" style="margin:0px">
+    <div class="col-sm-8 col-md-8"
+        style="text-align: right; font-size: 22px; font-weight: 500;padding-right: 60px;background: #426E86;color: white;">
+        <label>{{heading}}</label>
+    </div>
+    <div class="col-sm-4 col-md-4" style="text-align: right; padding-top: 10px;background: #426E86;color: white;">
+        <md-slide-toggle *ngIf="!editVal" [(ngModel)]="distStaus" ngDefaultControl></md-slide-toggle>
+    </div>
+</div>
+<div class="row" style="margin:0px">
+    <div class="col-12">
+        <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+</div>
+
+<ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
+    <li class="nav-item">
+        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">General Information</a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Upload Documents</a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Billing Information</a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">Support And Service</a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#tabs-5" role="tab">Permissions</a>
+    </li>
+</ul><!-- Tab panes -->
+<div class="tab-content" style="margin-top: 13px;margin: 20px;">
+    <div class="tab-pane active" id="tabs-1" role="tabpanel">
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId"
+                        required>
+                    <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}"
+                        name="first_name" required>
+                    <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}"
+                        name="last_name" required>
+                    <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial" (click)="stren();">
+                    <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text"
+                        [(ngModel)]="emaill" name="emaill" placeholder="{{'Enter Email ID *' | translate }}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
+                    <input type="tel" id="demo" (keypress)="click1($event)" onkeydown="call(event)" mdInput id="telephone"
+                        [(ngModel)]="phone" minlength="10" maxlength="10">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="organisation_name"
+                        placeholder="{{'Enter Organisation Name' | translate}}" name="organisation_name">
+                </md-form-field>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}"
+                        name="address">
+                </md-form-field>
+            </div>
+        
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
+                <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')"
+                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>
+
+                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p1')"
+                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">
+                        {{passwordIcon}}</md-icon> -->
+                    <input (keypress)="click2($event)"
+                        pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" mdInput
+                        type="{{passwordtype}}" [(ngModel)]="passwordd" name="passwordd"
+                        placeholder="{{'Enter Password' | translate}}" minlength="6" maxlength="12" required>
+                    <md-error class="required">{{'Invalid Password' | translate}}</md-error>
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" *ngIf="editVal">
+                <md-form-field class="example-full-width width" style="display: initial" (click)="stre();">
+                    <i class="fas fa-eye" style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')"
+                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol"></i>
+                    <!-- <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" (click)="showpassword('p2')"
+                        mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">
+                        {{passwordIcon_1}}</md-icon> -->
+                    <input mdInput type="{{passwordtype_1}}" [(ngModel)]="password2" name="password2"
+                        placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12" required>
+                    <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
+                </md-form-field>
+            </div>
+        </div>
+        
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+                <div>
+                    <span style="margin-right: 10px;">Welcome Message :</span>
+                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="welcome_messages_status"
+                        ngDefaultControl></md-slide-toggle>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" *ngIf="editVal">
+                <label>Timezone</label>
+                <div style="display:flex">
+                    <select id="dbselect">
+                        <option *ngFor="let zone of timezoneArray" [value]="zone.value" [selected]="zone.value === timezone">{{
+                            zone.viewValue }}</option>
+                    </select>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4">
+                <md-select style="width: 99%;padding-top: 20px;" [(ngModel)]="selectedlanguage"
+                    placeholder="--{{'Language' | translate}}--" ngDefaultControl (change)="changelanguage()">
+                    <md-option *ngFor="let language of available_languages" [value]="language.id">
+                        {{language.view}}
+                    </md-option>
+                </md-select>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="speedLimit"
+                        placeholder="{{'Enter Speed Limit (KM/Hr)' | translate}}">
+                </md-form-field>
+            </div>
+        
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="outOfReach" placeholder="{{'Out Of Reach (Hours)' | translate}}">
+                </md-form-field>
+            </div>
+        
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+                <div>
+                    <span style="margin-right: 10px;">KYC Verification Mail :</span>
+                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="kyc_verification_mail" ngDefaultControl>
+                    </md-slide-toggle>
+                </div>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+                <div>
+                    <span style="margin-right: 10px;">Inventory :</span>
+                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="inventoryManagement" ngDefaultControl>
+                    </md-slide-toggle>
+                </div>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 30px;">
+                <div>
+                    <span style="margin-right: 10px;">Bussiness Type :</span>
+                    <md-slide-toggle style="float: right;margin-top: 5px;" [(ngModel)]="bussinessType" ngDefaultControl>
+                    </md-slide-toggle>
+                </div>
+            </div>
+        </div>
+        </div>
+
+<!-- --------------------------------Document Upload -->
+<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
+    <div class="tab-pane" id="tabs-2" role="tabpanel">
+        <div class="row" style="margin:0px">
+            <div class="col-12" style="padding-top: 20px;font-weight: 600;"> <span>{{'Upload Documents' | translate }}:</span>
+                <button mdTooltip="{{'upload Documents' | translate}}"
+                    style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
+                    (click)="AddDocumentsField('addedrow')">
+                    <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
+                    <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
+                </button>
+            </div>
+        </div>
+        <div style="margin:0px" class="row" *ngFor="let data of imageuploadObject; let i =index"
+            [ngClass]="{'rowHeight':docRow}">
+            <div class="col-3" style="padding-right: 0px;padding-top: 16px;">
+                <md-select class="example-full-width width" style="display: initial" (ngModelChange)="documentType($event)"
+                    [(ngModel)]="data.doctype" placeholder="{{'Doc Type' | translate}}">
+                    <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                </md-select>
+            </div>
+            <div class="col-3" style="margin-top: 4px;padding-right: 0px">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-4" style="margin-top: 7px;padding-right: 0px">
+        
+                <input type="file" class="form-control" placeholder='Choose a file...' (change)="onFileChanged($event)" />
+            </div>
+            <div class="col-2" style="padding-right: 0px">
+                <i class="fas fa-cloud-upload-alt" style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;"
+                    (click)="onUpload(i)"></i>
+                    <i class="fas fa-trash-alt"
+                        style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;"
+                    (click)="DeleteDocumentsField(i)"></i>
+                
+                    <!-- <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;"
+                    (click)="onUpload(i)">cloud_upload</md-icon> -->
+                <!-- <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer;padding-top:15px;"
+                    (click)="DeleteDocumentsField(i)">delete</md-icon> -->
+            </div>
+        </div>
+    </div>
+<!-- </div> -->
+<!-- --------------------------------Billing Information -->
+<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
+    <div class="tab-pane" id="tabs-3" role="tabpanel">
+        <div class="row" style="margin:0px">
+            <div class="col-12">
+                <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Billing Information</p>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
+                <md-select class="example-full-width width" style="display: initial" [(ngModel)]="billingType"
+                    placeholder="{{'Billing Type' | translate}}">
+                    <md-option *ngFor="let bill of billingTypeArr" [value]="bill">{{bill}}</md-option>
+                </md-select>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="display: inherit;">
+                <md-select name="currency" [(ngModel)]="currencyType" style="padding-top: 17px;">
+                    <md-option value="USD" selected="selected">United States Dollars</md-option>
+                    <md-option value="EUR">Euro</md-option>
+                    <md-option value="GBP">United Kingdom Pounds</md-option>
+                    <md-option value="DZD">Algeria Dinars</md-option>
+                    <md-option value="ARP">Argentina Pesos</md-option>
+                    <md-option value="AUD">Australia Dollars</md-option>
+                    <md-option value="ATS">Austria Schillings</md-option>
+                    <md-option value="BSD">Bahamas Dollars</md-option>
+                    <md-option value="BBD">Barbados Dollars</md-option>
+                    <md-option value="BEF">Belgium Francs</md-option>
+                    <md-option value="BMD">Bermuda Dollars</md-option>
+                    <md-option value="BRR">Brazil Real</md-option>
+                    <md-option value="BGL">Bulgaria Lev</md-option>
+                    <md-option value="CAD">Canada Dollars</md-option>
+                    <md-option value="CLP">Chile Pesos</md-option>
+                    <md-option value="CNY">China Yuan Renmimbi</md-option>
+                    <md-option value="CYP">Cyprus Pounds</md-option>
+                    <md-option value="CSK">Czech Republic Koruna</md-option>
+                    <md-option value="DKK">Denmark Kroner</md-option>
+                    <md-option value="NLG">Dutch Guilders</md-option>
+                    <md-option value="XCD">Eastern Caribbean Dollars</md-option>
+                    <md-option value="EGP">Egypt Pounds</md-option>
+                    <md-option value="FJD">Fiji Dollars</md-option>
+                    <md-option value="FIM">Finland Markka</md-option>
+                    <md-option value="FRF">France Francs</md-option>
+                    <md-option value="DEM">Germany Deutsche Marks</md-option>
+                    <md-option value="XAU">Gold Ounces</md-option>
+                    <md-option value="GRD">Greece Drachmas</md-option>
+                    <md-option value="HKD">Hong Kong Dollars</md-option>
+                    <md-option value="HUF">Hungary Forint</md-option>
+                    <md-option value="ISK">Iceland Krona</md-option>
+                    <md-option value="INR">India Rupees</md-option>
+                    <md-option value="IDR">Indonesia Rupiah</md-option>
+                    <md-option value="IEP">Ireland Punt</md-option>
+                    <md-option value="ILS">Israel New Shekels</md-option>
+                    <md-option value="ITL">Italy Lira</md-option>
+                    <md-option value="JMD">Jamaica Dollars</md-option>
+                    <md-option value="JPY">Japan Yen</md-option>
+                    <md-option value="JOD">Jordan Dinar</md-option>
+                    <md-option value="KRW">Korea (South) Won</md-option>
+                    <md-option value="LBP">Lebanon Pounds</md-option>
+                    <md-option value="LUF">Luxembourg Francs</md-option>
+                    <md-option value="MYR">Malaysia Ringgit</md-option>
+                    <md-option value="MXP">Mexico Pesos</md-option>
+                    <md-option value="NLG">Netherlands Guilders</md-option>
+                    <md-option value="NZD">New Zealand Dollars</md-option>
+                    <md-option value="NOK">Norway Kroner</md-option>
+                    <md-option value="PKR">Pakistan Rupees</md-option>
+                    <md-option value="XPD">Palladium Ounces</md-option>
+                    <md-option value="PHP">Philippines Pesos</md-option>
+                    <md-option value="XPT">Platinum Ounces</md-option>
+                    <md-option value="PLZ">Poland Zloty</md-option>
+                    <md-option value="PTE">Portugal Escudo</md-option>
+                    <md-option value="ROL">Romania Leu</md-option>
+                    <md-option value="RUR">Russia Rubles</md-option>
+                    <md-option value="SAR">Saudi Arabia Riyal</md-option>
+                    <md-option value="XAG">Silver Ounces</md-option>
+                    <md-option value="SGD">Singapore Dollars</md-option>
+                    <md-option value="SKK">Slovakia Koruna</md-option>
+                    <md-option value="ZAR">South Africa Rand</md-option>
+                    <md-option value="KRW">South Korea Won</md-option>
+                    <md-option value="ESP">Spain Pesetas</md-option>
+                    <md-option value="XDR">Special Drawing Right (IMF)</md-option>
+                    <md-option value="SDD">Sudan Dinar</md-option>
+                    <md-option value="SEK">Sweden Krona</md-option>
+                    <md-option value="CHF">Switzerland Francs</md-option>
+                    <md-option value="TWD">Taiwan Dollars</md-option>
+                    <md-option value="THB">Thailand Baht</md-option>
+                    <md-option value="TTD">Trinidad and Tobago Dollars</md-option>
+                    <md-option value="TRL">Turkey Lira</md-option>
+                    <md-option value="VEB">Venezuela Bolivar</md-option>
+                    <md-option value="ZMK">Zambia Kwacha</md-option>
+                    <md-option value="EUR">Euro</md-option>
+                    <md-option value="XCD">Eastern Caribbean Dollars</md-option>
+                    <md-option value="XDR">Special Drawing Right (IMF)</md-option>
+                    <md-option value="XAG">Silver Ounces</md-option>
+                    <md-option value="XAU">Gold Ounces</md-option>
+                    <md-option value="XPD">Palladium Ounces</md-option>
+                    <md-option value="XPT">Platinum Ounces</md-option>
+                </md-select>
+                <md-form-field class="example-full-width width" style="display: initial;padding-top: 5px;">
+                    <input mdInput type="number" [(ngModel)]="billingRate" placeholder="{{'Enter Billing Rate' | translate}}"
+                        name="billrate">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="display: initial;padding-top: 7px;">
+                <md-form-field class="example-full-width width" style="width: 100%;" (click)="stren();">
+                    <input type="tel" (keypress)="click1($event)" onkeydown="call(event)" mdInput id="telephoneBill"
+                        [(ngModel)]="billingContactDetail" minlength="10" maxlength="10">
+                </md-form-field>
+                <small id="emailHelp" class="form-text text-muted" style="margin-top: 0;">Enter Billing Contact Detail</small>
+            </div>
+        </div>
+        
+        
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4">
+        
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="billingMail" placeholder="{{'Enter Billing Email' | translate}}"
+                        name="billrate">
+                </md-form-field>
+        
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 16px;">
+                <md-select [(ngModel)]="plan" class="example-full-width width" style="display: initial"
+                    placeholder="Please select Plan">
+        
+                    <md-option value="basic">Basic</md-option>
+                    <md-option value="advanced">Advanced</md-option>
+                    <md-option value="premium">Premium</md-option>
+                </md-select>
+            </div>
+        
+        
+        </div>
+    </div>
+<!-- </div> -->
+<!-- --------------------------------Supports And Services -->
+<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
+    <div class="tab-pane" id="tabs-4" role="tabpanel">
+        <div class="row" style="margin:0px">
+            <div class="col-12">
+                <p style="font-size: 20px;font-weight: 600;color: #5c5c5c;margin-top: 1rem;">Supports And Services</p>
+            </div>
+        </div>
+        <div class="row" style="margin:0px">
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="support1" placeholder="{{'support1' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="support2" placeholder="{{'support2' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="support3" placeholder="{{'support3' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="service1" placeholder="{{'service1' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-4 col-lg-4" style="padding-top: 17px;">
+                <md-form-field class="example-full-width width" style="display: initial">
+                    <input mdInput type="text" [(ngModel)]="service2" placeholder="{{'service2' | translate}}">
+                </md-form-field>
+            </div>
+        </div>
+    </div>
+<!-- </div> -->
+<!-- --------------------------------Device And User Settings-->
+<!-- <div class="tab-content" style="margin-top: 13px;margin: 20px;"> -->
+    <div class="tab-pane" id="tabs-5" role="tabpanel">
+
+        <div class="form-group row m-2">
+            <label for="options" class="ml-3 mr-4">User Setting :</label>
+            <div  class="mr-3" *ngFor="let option of UserOptions">
+                <label>
+                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
+                        (change)="updateCheckedOptions(option.name, !option.value,'user')" />
+                    {{option.name}}
+                </label>
+            </div>
+        </div>
+        <div class="form-group row m-2">
+            <label for="options" class="ml-3 mr-4">Device Setting :</label>
+            <div class="mr-3" *ngFor="let option of DeviceOptions">
+                <label>
+                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
+                        (change)="updateCheckedOptions(option.name, !option.value,'device')" />
+                    {{option.name}}
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row" style="text-align: center;padding-top: 20px;margin:0px">
+    <div class="col-12">
+        <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button
+            (click)="checkkeyandupdate()">{{'SUBMIT' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button
+            (click)="closebox()">{{'CANCEL' | translate}}</button>
+    </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/add-distributers/add-distributers.component.scss b/src/app/add-distributers/add-distributers.component.scss
new file mode 100644
index 0000000..8ce663f
--- /dev/null
+++ b/src/app/add-distributers/add-distributers.component.scss
@@ -0,0 +1,20 @@
+// ::-webkit-scrollbar {
+//   width: 10px;
+//   height: 10px;
+// }
+
+// /* Track */
+// ::-webkit-scrollbar-track {
+//   background: rgb(153, 153, 153);
+// }
+
+// /* Handle */
+// ::-webkit-scrollbar-thumb {
+//   // background: rgb(74, 118, 184);
+//   background: #868e96;
+// }
+
+// /* Handle on hover */
+// ::-webkit-scrollbar-thumb:hover {
+//   background: #555;
+// }
diff --git a/src/app/add-distributers/add-distributers.component.spec.ts b/src/app/add-distributers/add-distributers.component.spec.ts
new file mode 100644
index 0000000..be166f6
--- /dev/null
+++ b/src/app/add-distributers/add-distributers.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDistributersComponent } from './add-distributers.component';
+
+describe('AddDistributersComponent', () => {
+  let component: AddDistributersComponent;
+  let fixture: ComponentFixture<AddDistributersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddDistributersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDistributersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-distributers/add-distributers.component.ts b/src/app/add-distributers/add-distributers.component.ts
new file mode 100644
index 0000000..3f4da71
--- /dev/null
+++ b/src/app/add-distributers/add-distributers.component.ts
@@ -0,0 +1,1148 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import {Contact} from '../contact';
+import * as moment from 'moment-timezone';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+declare var swal: any;
+declare var $:any;
+declare var google:any;
+
+
+@Component({
+  selector: 'app-add-distributers',
+  templateUrl: './add-distributers.component.html',
+  styleUrls: ['./add-distributers.component.scss']
+})
+export class AddDistributersComponent implements OnInit {
+  fs:any;
+  service2
+  service1
+  support1
+  support2;
+  support3
+  ls:any;
+  DeviceSetting={Add:true,Edit:true,Delete:false}
+  UserSetting={Add:true,Edit:true,Delete:false}
+  selectedlanguage='en';
+  DeviceOptions=[{name:"Add",value:true},{name:"Edit",value:true},{name:"Delete",value:false}];
+  UserOptions=[{name:"Add",value:true},{name:"Edit",value:true},{name:"Delete",value:false}]
+  available_languages = [{
+      view : "English",
+      id : "en"
+  },{
+      view : "Spanish",
+      id : "sp"
+  },{
+    view : "Persian",
+    id : "fa"
+},{
+  view : "Arabic",
+  id : "ar"
+},{
+  view : "Portuguese",
+  id : "pr"
+},
+{
+  view : "Albanian",
+  id : "newLan2"
+},
+{
+  view : "French",
+  id : "fr"
+},
+{
+  view : "Indonesian",
+  id : "bhasa_web"
+}];
+  emailid:any;
+  or:any;
+  useridd:any;
+  custtype:any;
+  timezoneArray=[];
+  cust:boolean=false;
+  mb:any;
+  logo:any;
+  plan
+  text:any;
+  superAdmin: any;
+  dealerName: any;
+  currencyType:any="INR";
+  sup_admin: any;
+  Load : boolean = false;
+  show1:boolean = false;
+  show2:boolean = true;
+  show3:boolean = false;
+  first_name:any=null;
+  last_name:any=null;
+  passwordd:any=null;
+  org_name:any;
+  emaill:any=null;
+  welcome_messages_status:any;
+  phone:any=null;
+  executed:any;
+  $event2:any;
+  dealer:any;
+  contacts: Contact[]=[];
+  contact: Contact;
+  login1:any;
+  mess2:any;
+  mess:any;
+  otp:any;
+  userID:any;
+  address:any;
+  str:boolean = false;
+  password2:any=null;
+  billingMail:any;
+  dealerSelect: any=[];
+  imageuploadObject = [];
+  emmnerr: any;
+  data_descip: any;
+  editVal : boolean = true;
+  heading = "ADD DISTRIBUTER";
+  distStaus:any;
+  organisation_name: any;
+  androidAppLink:any;
+  iosAppLink:any;
+  
+  countrySelected: { countryCode: any; dialcode: any; };
+  billingTypeArr =['Monthly','Yearly'];
+  billingType:any;
+  billingContactDetail:any;
+  timezone:any = 'Asia/Kolkata';
+  billingRate:any;
+  billingPhone: { countryCode: any; dialcode: any; };
+  billingId: any;
+  outOfReach=3;
+  speedLimit=60;
+  kyc_verification_mail:boolean=false;
+  inventoryManagement:boolean=false;
+  bussinessType:boolean=false;
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<AddDistributersComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput-jquery.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+
+
+      this.welcome_messages_status= true;
+      if(this.data != undefined){
+        console.log('this.data=>',this.data);
+        if(this.data.userInfo.edit == true){
+          this.heading = "EDIT DISTRIBUTER";
+          console.log(this.data);
+          this.kyc_verification_mail= this.data.userInfo.kyc_verification_mail? this.data.userInfo.kyc_verification_mail:false;
+          this.bussinessType=this.data.userInfo.bussinessType?this.data.userInfo.bussinessType=="1"?true:false:false
+          this.inventoryManagement= this.data.userInfo.inventoryManagement? this.data.userInfo.inventoryManagement:false;
+          if( this.data.userInfo.Plan)this.plan= this.data.userInfo.Plan;
+          if( this.data.userInfo.SpeedLimit)this.speedLimit= this.data.userInfo.SpeedLimit;
+         
+          if( this.data.userInfo.outOfReach)this.outOfReach= this.data.userInfo.outOfReach;
+          if( this.data.userInfo.support1)this.support1= this.data.userInfo.support1
+          if( this.data.userInfo.support2)this.support2= this.data.userInfo.support2
+          if( this.data.userInfo.support3)this.support3= this.data.userInfo.support3
+          if( this.data.userInfo.service1)this.service1= this.data.userInfo.service1
+          if( this.data.userInfo.service2)this.service2= this.data.userInfo.service2
+         this.distStaus = this.data.userInfo.status;
+          this.editVal = false;
+          this.userID =  this.data.userInfo ? this.data.userInfo.user_id  :'';
+          this.passwordd=this.data.userInfo ? this.data.userInfo.pass  :''
+          this.first_name = this.data.userInfo ? this.data.userInfo.first_name  :'';
+          this.last_name = this.data.userInfo ? this.data.userInfo.last_name  :'';
+          this.emaill = this.data.userInfo ? this.data.userInfo.email  :'';
+          this.phone = this.data.userInfo ? this.data.userInfo.phone  :'';
+          this.address = this.data.userInfo ? this.data.userInfo.address  :'';
+          this.organisation_name = this.data.userInfo ? this.data.userInfo.organisation_name:'';
+          this.androidAppLink = this.data.userInfo ? this.data.userInfo.androidAppLink : '';
+          this.iosAppLink = this.data.userInfo ? this.data.userInfo.iosAppLink : '';
+          if(this.data.userInfo.billing_id){
+            this.billingId = this.data.userInfo.billing_id._id;
+            if(this.data.userInfo.billing_id.BillingType){
+                this.billingType = this.data.userInfo.billing_id.BillingType ; 
+            }
+            if(this.data.userInfo.billing_id.billing_contact){
+              this.billingContactDetail = this.data.userInfo.billing_id.billing_contact ; 
+            }
+            if(this.data.userInfo.billing_id.billing_rate){
+              this.billingRate = this.data.userInfo.billing_id.billing_rate;
+            }
+            if(this.data.userInfo.billing_id.email){
+              this.billingMail = this.data.userInfo.billing_id.email ; 
+            }
+
+          }
+           if( this.data.userInfo.devicePermission){
+             this.DeviceSetting= this.data.userInfo.devicePermission;
+              for(let i=0;i<this.DeviceOptions.length;i++){
+                // if(this.DeviceOptions[i].name==this.data.userInfo.DevicePermission[this.DeviceOptions[i].name]){
+                  this.DeviceOptions[i].value=this.data.userInfo.devicePermission[this.DeviceOptions[i].name]
+                // }
+              }
+            }
+          if( this.data.userInfo.userPermission){
+            this.UserSetting= this.data.userInfo.userPermission;
+             for(let i=0;i<this.UserOptions.length;i++){
+                // if(this.UserOptions[i].name==this.data.userInfo.DevicePermission[this.UserOptions[i].name]){
+                  this.UserOptions[i].value=this.data.userInfo.userPermission[this.UserOptions[i].name]
+                // }
+              }
+          }
+        
+          if(this.data.userInfo){
+            if(this.data.userInfo.welcome_msg != undefined){
+              this.welcome_messages_status =this.data.userInfo.welcome_msg ; 
+            }else{
+              this.welcome_messages_status = true; 
+            }
+          }
+          
+        }
+      }
+   
+
+
+      var  initialObj = {
+        doctype:'',
+        image:'',
+        phone:''
+      }
+      this.imageuploadObject.push(initialObj);
+      
+    }
+
+  ngOnInit() {
+
+
+    var timeZn = moment.tz.guess(); 
+    if(timeZn != 'Asia/Calcutta'){
+      this.timezone = timeZn;
+    }
+    console.log(this.timezone);
+
+    setTimeout(() => {
+      $("#telephone").intlTelInput({
+        allowDropdown:true,
+        autoPlaceholder:"Enter Mobile Number",
+        initialCountry:"in",
+        preferredCountries: ["in","us" ],
+        separateDialCode:true,
+        }); 
+    }, 300);
+  
+
+    var Phoneinput = document.getElementById('telephone');
+    var that = this;
+    Phoneinput.addEventListener("countrychange",function(p) {
+      console.log("Inside Function");
+      var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+      console.log(countryData); 
+      that.countrySelected = {
+        countryCode : countryData.iso2,
+        dialcode: countryData.dialCode
+      }
+      });
+
+      setTimeout(() => {
+        $("#telephoneBill").intlTelInput({
+          allowDropdown:true,
+          autoPlaceholder:"Enter Mobile Number",
+          initialCountry:"in",
+          preferredCountries: ["in","us" ],
+          separateDialCode:true,
+          }); 
+      }, 300);
+    
+  
+      var Phoneinput_bill = document.getElementById('telephoneBill');
+      var that = this;
+      Phoneinput_bill.addEventListener("countrychange",function(p) {
+        console.log("Inside Function");
+        var countryDataBill = $('#telephoneBill').intlTelInput("getSelectedCountryData");
+        console.log(countryDataBill); 
+        that.billingPhone = {
+          countryCode : countryDataBill.iso2,
+          dialcode: countryDataBill.dialCode
+        }
+        console.log(that.billingPhone);
+        });
+
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    // console.log(this.superAdmin)
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    if(!this.superAdmin){
+      this.dealerName = this.fs
+    }
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    console.log("superAdmin=>",this.sup_admin);
+
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+
+  //  this.getdev();
+  if(this.mb.charAt(0)=="n"){
+    this.mb = ' '
+  }
+  if(this.custtype == true){
+    this.cust = true;
+  }
+  var timeZones = moment.tz.names();
+  console.log(timeZones);
+  this.timezoneArray=[];
+  for (var i in timeZones) {
+    this.timezoneArray.push({ viewValue: "(GMT" + moment.tz(timeZones[i]).format('Z') + ")" + timeZones[i], value: timeZones[i] });
+  }
+  
+
+  setTimeout(() => {
+    $('#dbselect').multipleSelect({
+      // width: 300,
+      placeholder: 'Select Timezone',
+      filter: true,
+      single: true,
+      selectAll: false
+    })   
+  }, 100);
+
+
+
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];  
+  this.latLongDetail()
+  }
+
+
+
+  checkkeyandupdate(){
+    console.log('inside function');
+    var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+
+    if((this.emaill == undefined)||(this.emaill.trim() == '')){
+      this._flashMessagesService.show('Email is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+      return;
+      
+    }
+
+    if(this.editVal === true){
+      this.addContact2();
+    }else{
+      this.editDistributers();
+    }
+  }
+
+  documentDetail:any;
+  imageURL:any;
+
+  documentList = [
+    {
+      "docId": "Adhar",
+      "docName": "Adhar Card"
+    },
+    {
+      "docId": "voterCard",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "PAN",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "DL",
+      "docName": "Driving License"
+    }
+    
+  ];
+
+
+
+  onChange(ev) {
+    let dealer_status = ev.checked;
+  }
+
+  stren(){
+    this.str =false;
+  }
+
+  documentType(docType){
+    console.log("doctypeObject=>",docType);
+  }
+  selectedFile: File;
+  onFileChanged(event) { 
+    this.selectedFile = <File>event.target.files[0];
+    console.log(this.selectedFile); 
+  }
+ 
+  onUpload(imgIndex) {
+    console.log(imgIndex);
+    console.log(this.imageuploadObject);
+    const fd = new FormData();
+    console.log("selected file name =>",this.selectedFile.name);
+    if(this.selectedFile.name == " "){
+      swal(
+        'Upload Error',
+        'Please select document type before upload !!!',
+        'error'
+      )
+    }else{
+      fd.append('photo',this.selectedFile,this.selectedFile.name)
+      console.log("imgURL=>",fd) ;
+      this.contactService.imageupload(fd)
+      .subscribe(res=>{
+        console.log(res);
+        var resImage ='';
+        resImage = res['_body'];
+        console.log(res['_body']);
+        this.imageuploadObject[imgIndex].image = resImage;
+         console.log(this.imageuploadObject);
+        // console.log(res);
+      },err=>{
+        swal(
+          'Server Error',
+          'Internal Server Error , plaese try after sometime !!!',
+          'error'
+        )
+      })
+    }
+   }
+
+   docRow:boolean=false;;
+  AddDocumentsField(addedRow){
+      if(addedRow){
+        this.docRow = true;
+      }
+       var obj={doctype:'',image:'',phone:''};
+       this.imageuploadObject.push(obj);
+       console.log(this.imageuploadObject);
+      // console.log("ImageuploadObject=>",this.imageuploadObject);
+  }
+
+  DeleteDocumentsField(index){
+    console.log(this.imageuploadObject.length);
+    if(this.imageuploadObject.length == 1){
+      this.docRow = false;
+    }
+    this.imageuploadObject.splice(index, 1);
+
+  }
+  passwordtype:any= 'password';
+  passwordtype_1:any= 'password';
+  passwordIcon:any='visibility_off';
+  passwordIcon_1:any='visibility_off';
+
+  showpassword(p:any){
+    console.log('inside function');
+   
+    if((p == 'p1')&&(this.passwordtype == "password")){
+      this.passwordtype = 'text';
+      this.passwordIcon = 'visibility';
+      return
+ 
+    }
+ 
+    if((p == 'p1')&&(this.passwordtype == "text")){
+      this.passwordtype = 'password';
+      this.passwordIcon = 'visibility_off';
+      return;
+    }
+ 
+    if((p == 'p2')&&(this.passwordtype_1 == "password")){
+     this.passwordtype_1 = 'text';
+     this.passwordIcon_1 = 'visibility';
+     return;
+ 
+   }
+ 
+   if((p == 'p2')&&(this.passwordtype_1 == "text")){
+     this.passwordtype_1 = 'password';
+     this.passwordIcon_1 = 'visibility_off';
+     return;
+   }
+ 
+  }
+
+
+  
+  addContact2(){
+
+    var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+    var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+    console.log(countryData); 
+    this.countrySelected = {
+      countryCode : countryData.iso2,
+      dialcode: countryData.dialCode
+    }
+  
+    if(this.first_name==null || this.last_name==null || this.passwordd==null)
+      {
+       this._flashMessagesService.show('Please fill all Requied fields', { cssClass: 'alert-danger', timeout: 3000 });
+       
+      }  
+      else if(this.password2 != this.passwordd){
+       // this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 });
+        // this.tost1("psdnmtch")
+       }
+      else if (this.emaill && this.phone){
+        this.Load=true
+   //  if (!this.executed) {
+       
+    //   this.executed = true;
+        // console.log(this.dealerName._id);
+
+     
+       //console.log(this.imageuploadObject);
+       const newContact2 ={
+       first_name: this.first_name,
+       last_name: this.last_name,
+       email: this.emaill,
+       password: this.passwordd,
+       phone: this.phone,
+       isSuperAdmin : true,
+       isDealer: false,
+       organisation : this.useridd,
+       welcome_msg : this.welcome_messages_status,
+      //  custumer:true,
+       user_id:this.userID,
+       address:this.address,
+       organisation_name: this.organisation_name,
+       
+   }
+
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(this.plan!=undefined){
+     newContact2['plan']=this.plan;
+   }
+    if(this.kyc_verification_mail!=undefined){
+     newContact2['kyc_verification_mail']=this.kyc_verification_mail;
+   }
+   if(this.bussinessType!=undefined){
+     newContact2['bussinessType']=this.bussinessType?"1":"0";
+   }
+   if(this.inventoryManagement!=undefined){
+     newContact2['inventoryManagement']=this.inventoryManagement;
+   }
+
+   if(this.selectedlanguage != undefined){
+    newContact2['language_code']=this.selectedlanguage;
+   }
+
+   if(this.speedLimit != undefined){
+    newContact2['SpeedLimit']=this.speedLimit;
+   }
+
+   if(this.UserSetting != undefined){
+    newContact2['userPermission']=this.UserSetting;
+   }
+
+    if(this.DeviceSetting != undefined){
+    newContact2['devicePermission']=this.DeviceSetting;
+   }
+
+  //  if(this.speedLimit != undefined){
+  //   newContact2['SpeedLimit']=this.speedLimit;
+  //  }
+
+    if(this.outOfReach != undefined){
+    newContact2['outOfReach']=this.outOfReach;
+   }
+
+
+
+   if(this.support1 != undefined){
+    newContact2['support1'] = this.support1;
+}
+ if(this.support2 != undefined){
+    newContact2['support2'] = this.support2;
+}
+ if(this.support3 != undefined){
+    newContact2['support3'] = this.support3;
+}
+ if(this.service1 != undefined){
+    newContact2['service1'] = this.service1
+}
+ if(this.service2 != undefined){
+    newContact2['service2'] = this.service2
+}
+ if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+}
+  
+  
+
+   if(this.imageuploadObject.length > 0){  
+     
+     for(var d = 0 ;d <this.imageuploadObject.length;d++){
+      
+       if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+             this.imageuploadObject.splice(d,1);         
+       }
+
+     }
+   }
+
+   if(this.androidAppLink != undefined){
+    newContact2['androidAppLink'] = this.androidAppLink ; 
+   }
+   if(this.iosAppLink != undefined){
+     newContact2['this.iosAppLink'] = this.iosAppLink ; 
+   }
+
+    console.log("Final DOC ARRAY",this.imageuploadObject);
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+   this.contactService.addContact(newContact2)
+   .subscribe(contact => {
+    this.Load=false
+    if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "User Duplicate"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Email ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Mobile Number already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else{   
+          console.log(contact);
+          if((this.billingContactDetail != undefined)||(this.billingRate != undefined)||(this.billingType != undefined)||(this.billingMail != undefined)){
+            this.addBillingDetail(contact);   
+          }else{
+            this.dialogRef.close('success');       
+            this.contacts.push(contact);
+          }
+       
+        }
+   
+   
+
+   }, (err: any) => { 
+    // console.log(err.status); 
+    // console.log(err);
+  if(err.status ==  500)
+  {
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    console.log(this.emmnerr);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+
+  }
+  else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+
+  }
+  });
+/*    this._flashMessagesService.show('OTP Sent Sucessfully', { cssClass: 'alert-success', timeout: 3000 }); */
+
+ }
+      else if(this.phone){
+        this.Load=true
+
+
+    
+
+    //   if (!this.executed) {
+    //     this.executed = true;
+         const newContact2 ={
+         first_name: this.first_name,
+         last_name: this.last_name,
+         password: this.passwordd,      
+         phone: this.phone,          
+         isSuperAdmin : true,
+         isDealer: false,
+         organisation : this.useridd,
+         welcome_msg : this.welcome_messages_status,
+         user_id:this.userID,
+         address:this.address,
+         organisation_name: this.organisation_name,
+     }
+
+     if(this.countrySelected != undefined){
+      newContact2['std_code']=this.countrySelected;
+     }
+      if(this.speedLimit != undefined){
+    newContact2['SpeedLimit']=this.speedLimit;
+   }
+
+   if(this.UserSetting != undefined){
+    newContact2['userPermission']=this.UserSetting;
+   }
+
+    if(this.DeviceSetting != undefined){
+    newContact2['devicePermission']=this.DeviceSetting;
+   }
+
+  //  if(this.speedLimit != undefined){
+  //   newContact2['SpeedLimit']=this.speedLimit;
+  //  }
+
+    if(this.outOfReach != undefined){
+    newContact2['outOfReach']=this.outOfReach;
+   }
+
+
+
+   if(this.support1 != undefined){
+    newContact2['support1'] = this.support1;
+}
+ if(this.support2 != undefined){
+    newContact2['support2'] = this.support2;
+}
+ if(this.support3 != undefined){
+    newContact2['support3'] = this.support3;
+}
+ if(this.service1 != undefined){
+    newContact2['service1'] = this.service1
+}
+ if(this.service2 != undefined){
+    newContact2['service2'] = this.service2
+}
+    
+
+     if(this.imageuploadObject.length > 0){  
+
+      for(var d = 0 ;d <this.imageuploadObject.length;d++){   
+        if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+              this.imageuploadObject.splice(d,1);        
+        }
+      }
+    }
+    newContact2['imageDoc'] = this.imageuploadObject;
+     this.contactService.addContact(newContact2)
+     .subscribe(contact => {
+      // this.clear();
+      this.Load=false;
+      if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }if(contact.message == "USER_ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "User Duplicate"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Email ID already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Mobile Number already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else{
+            this.dialogRef.close('success');    
+            this.contacts.push(contact);
+          }
+     
+       
+     }, (err: any) => {
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+      this.Load=false
+      this.emmnerr=JSON.parse(err._body);
+        console.log(this.emmnerr);
+       this.data_descip = this.emmnerr.split(':')[1];
+        console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+    }
+    else{
+      this.Load=false
+      // console.log("dadsa");
+      swal(
+        'Error',
+        'Internal Server error , Please try after sometime !!!',
+        'error'
+      )
+    }})
+  }
+ else if(this.emaill){
+ // if (!this.executed) {
+  //  this.executed = true;
+
+
+ 
+    const newContact2 ={
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.passwordd,
+    organisation_name: this.organisation_name,
+    email: this.emaill, 
+    isSuperAdmin : true,
+    isDealer: false,
+    organisation :this.useridd,
+    user_id:this.userID,
+    welcome_msg : this.welcome_messages_status,
+    address:this.address,
+}
+
+if(this.countrySelected != undefined){
+  newContact2['std_code']=this.countrySelected;
+ }
+  if(this.speedLimit != undefined){
+    newContact2['SpeedLimit']=this.speedLimit;
+   }
+
+   if(this.UserSetting != undefined){
+    newContact2['userPermission']=this.UserSetting;
+   }
+
+    if(this.DeviceSetting != undefined){
+    newContact2['devicePermission']=this.DeviceSetting;
+   }
+
+  //  if(this.speedLimit != undefined){
+  //   newContact2['SpeedLimit']=this.speedLimit;
+  //  }
+
+    if(this.outOfReach != undefined){
+    newContact2['outOfReach']=this.outOfReach;
+   }
+
+
+
+   if(this.support1 != undefined){
+    newContact2['support1'] = this.support1;
+}
+ if(this.support2 != undefined){
+    newContact2['support2'] = this.support2;
+}
+ if(this.support3 != undefined){
+    newContact2['support3'] = this.support3;
+}
+ if(this.service1 != undefined){
+    newContact2['service1'] = this.service1
+}
+ if(this.service2 != undefined){
+    newContact2['service2'] = this.service2
+}
+
+ 
+if(this.imageuploadObject.length > 0){  
+
+  for(var d = 0 ;d <this.imageuploadObject.length;d++){
+    if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+          this.imageuploadObject.splice(d,1);   
+    }
+  }
+}
+newContact2['imageDoc'] = this.imageuploadObject;
+
+this.contactService.addContact(newContact2)
+.subscribe(contact => {
+ 
+  this.Load=false
+  if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "User Duplicate"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Email ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Mobile Number already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else{
+        this.dialogRef.close('success'); 
+        this.contacts.push(contact);
+      }
+ 
+ 
+  
+}, (err: any) => {
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+  
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+    // console.log("error to display",this.emmnerr);
+    // this.tost1("Error")
+  }
+  else{
+    this.Load=false;
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+  }});
+
+
+ }
+ 
+ 
+ }
+
+ closebox(){
+  this.dialogRef.close(null);
+ }
+
+ click2(event2){
+  this.show2=true;
+  this.show3=false;
+  
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  click1(event){
+    this.show2=false;
+    this.show3=true;
+    if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+    
+    else
+    event.preventDefault();
+    }
+
+  
+    editDistributers(){
+      console.log('this.address',this.address);
+        var userObj = {
+          'first_name' : this.first_name,
+          'user_id' : this.userID ,
+          'last_name'  : this.last_name,
+          'phone' :this.phone,
+          'email' : this.emaill,
+          password: this.passwordd,    
+          'contactid' : this.data.userInfo._id,
+          'address' : this.address,
+          'status' : this.distStaus,
+          'organisation_name': this.organisation_name  ,
+          'welcome_msg' : this.welcome_messages_status,
+        }
+      
+
+        if(this.selectedlanguage != undefined){
+          userObj['language_code']=this.selectedlanguage;
+         }
+         if(this.plan!=undefined){
+           userObj['plan']=this.plan;
+        }
+        if(this.outOfReach!=undefined){
+           userObj['outOfReach']=this.outOfReach;
+        }
+        if(this.speedLimit!=undefined){
+           userObj['SpeedLimit']=this.speedLimit;
+        }
+         if(this.UserSetting != undefined){
+    userObj['userPermission']=this.UserSetting;
+   }
+
+    if(this.DeviceSetting != undefined){
+    userObj['devicePermission']=this.DeviceSetting;
+   }
+
+        if(this.support1 != undefined){
+    userObj['support1'] = this.support1;
+}
+ if(this.support2 != undefined){
+    userObj['support2'] = this.support2;
+}
+ if(this.support3 != undefined){
+    userObj['support3'] = this.support3;
+}
+ if(this.service1 != undefined){
+    userObj['service1'] = this.service1
+}
+ if(this.service2 != undefined){
+    userObj['service2'] = this.service2
+}
+
+   if(this.kyc_verification_mail!=undefined){
+     userObj['kyc_verification_mail']=this.kyc_verification_mail;
+   }
+    if(this.inventoryManagement!=undefined){
+     userObj['inventoryManagement']=this.inventoryManagement;
+   }
+   if(this.bussinessType!=undefined){
+     userObj['bussinessType']=this.bussinessType?"1":"0";
+   }
+   console.log(userObj);
+   
+        this.contactService.editUsermaster(userObj)
+          .subscribe(res=>{
+            console.log(res);
+            if(res){
+              if((this.billingContactDetail != undefined)||(this.billingRate != undefined)||(this.billingType != undefined)||(this.billingMail != undefined)){
+                if(this.billingId === undefined){
+                  var adminId = {
+                        user : {_id : this.data.userInfo._id}
+                  }
+                  this.addBillingDetail(adminId);
+                }else{
+                  this.updateBillingDetail();   
+                }
+              
+              }else{
+                this.dialogRef.close('success');               
+              }   
+            }
+          },err=>{
+              console.log(err.status);
+              this._flashMessagesService.show('Please try again', { cssClass: 'alert-danger', timeout: 3000 });
+          })
+      
+    }
+
+    stre(){
+      console.log("inside function");
+    }
+
+    addBillingDetail(distID){
+      console.log("Inside function",distID);
+    
+        var payload ={
+          supAdmin: distID.user._id,
+          organisation: this.useridd,
+          billing_contact: this.billingContactDetail,
+          billing_rate: this.billingRate,
+          BillingType: this.billingType,
+          std_code: this.countrySelected,
+          email : this.billingMail
+        };
+        console.log(payload);
+      
+        // this.contacts.push(contact);
+     
+      this.contactService.addBillingDetail(payload).subscribe(res=>{
+        console.log("response",res);
+        this.dialogRef.close('success');     
+      })
+
+    }
+
+
+    updateBillingDetail(){
+      var payload ={
+        billing_contact: this.billingContactDetail,
+        billing_rate: this.billingRate,
+        BillingType: this.billingType,
+        email : this.billingMail,
+        billingId: this.billingId
+      };
+      console.log(payload);
+      this.contactService.updateBillingDetail(payload).subscribe(res=>{
+        console.log(res);
+        this.dialogRef.close('success');  
+      },err=>{
+        this.dialogRef.close('success');  
+      })
+    }
+
+    changelanguage(){
+      
+    }
+
+
+    latLongDetail(){
+      var that =this;
+      if (navigator.geolocation) {    
+          navigator.geolocation.getCurrentPosition(function(position) {
+        
+            let geocoder = new google.maps.Geocoder();
+           var d_lat= position.coords.latitude;
+           var d_lng=position.coords.longitude;
+      let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+    
+      let request = {
+        latLng: t_latlng
+      };
+    
+      geocoder.geocode(request, function (data, status) {
+        var userCountry;
+        if (status == google.maps.GeocoderStatus.OK) {
+          if (data[0] != null) {
+            var address_show = data[0];
+            console.log('var=>' ,address_show);
+            for (var ac = 0; ac < data[0].address_components.length; ac++) {
+              var component = data[0].address_components[ac];
+              switch(component.types[0]) {     
+                  case 'country':
+                      userCountry  = component.short_name;
+                      console.log(userCountry);
+                      break;      
+              }
+          };
+           
+              var aaa = $('#telephone').intlTelInput("setCountry",userCountry);
+          } else {
+            userCountry = 'in';  
+          }
+        }
+        else {
+          userCountry = 'in';
+        }
+      })          
+        });
+        // } 
+            }
+    
+    
+         
+    
+    }
+
+    updateCheckedOptions(value,e,type){
+      console.log(value,e);
+      if(type=='user'){
+       for(var i=0;i<this.UserOptions.length;i++){
+         if(this.UserOptions[i].name==value){
+           this.UserOptions[i].value=e;
+           this.UserSetting[value]=e
+           console.log(this.UserOptions,this.UserSetting)
+         }
+       }
+        
+        
+      }else{
+         for(var i=0;i<this.DeviceOptions.length;i++){
+         if(this.DeviceOptions[i].name==value){
+           this.DeviceOptions[i].value=e;
+           this.DeviceSetting[value]=e;
+            console.log(this.DeviceOptions,this.DeviceSetting)
+         }
+       }
+      }
+      
+    }
+}
diff --git a/src/app/add-driver/add-driver.component.css b/src/app/add-driver/add-driver.component.css
new file mode 100644
index 0000000..d29dec0
--- /dev/null
+++ b/src/app/add-driver/add-driver.component.css
@@ -0,0 +1,1068 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+  
+  }
+  
+
+
+  .background-image{
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: 0;
+    padding: 0;
+   /*  background-image: url('../../assets/image/trygif2.gif'); */
+    background-image: url('../../assets/image/bgtry3.jpg');
+    background-size:100%;
+    background-repeat: no-repeat;
+  }
+  /* 
+  ::-webkit-scrollbar {
+    display: none;
+    } */
+  
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+  
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+    
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  
+  
+  /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  
+  
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    
\ No newline at end of file
diff --git a/src/app/add-driver/add-driver.component.html b/src/app/add-driver/add-driver.component.html
new file mode 100644
index 0000000..871dc6f
--- /dev/null
+++ b/src/app/add-driver/add-driver.component.html
@@ -0,0 +1,377 @@
+<!-- <html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body> -->
+<div  *ngIf="!update">
+
+  <app-all-menus></app-all-menus>
+</div>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div>
+
+    <div  style="float:left; width: 100%;padding-top: 6%;">
+
+    
+
+        <div class="loading" *ngIf="Load">Loading&#8230;</div>
+
+       <md-card style="opacity: .9;margin-top: 15px;background: #fcfbfb;">
+      <h4 style="float:left;color:#855353">{{title| translate}}</h4> <br><hr>
+
+
+     <!-- ----------------------- Body of Driver Form----------------------------------------------------- -->
+      <form #signupForm="ngForm">  
+     <div class ="form-group">
+          <!-- Driver Name  -->
+          <md-form-field class="example-full-width width" style="float:left;width: 30%;">
+<input mdInput  class="no-spin" [(ngModel)]="name" name=" driverName" placeholder="{{'Driver Name' | translate}}" required/>
+                  <md-error class="required">{{'Enter Driver Name' | translate}}</md-error>
+                 </md-form-field>
+                 <!-- Driver Address -->
+                 <md-form-field class="example-full-width width" style="float:left;width: 30%;padding-left:2%">
+       <input mdInput type="text"  [(ngModel)]="address" name="driverAddress" placeholder="{{'Driver Address' | translate}}" required/> 
+       <md-error class="required">{{'Enter Driver Address' | translate}}</md-error>
+      </md-form-field>
+<!-- Driver Status -->
+<md-form-field class="example-full-width width "  style="float:left;width: 30%;padding-left:2%">
+       <input mdInput type="text"  required [(ngModel)]="status" name="status" placeholder="{{'Status' | translate}}" />                
+      </md-form-field>
+      </div>
+       <div class ="form-group">
+      <md-form-field  class="example-full-width width"  style="float:left;width: 30%;">
+          
+              <input   mdInput type="text"  [(ngModel)]="license_number" name="licenseNumber" placeholder="{{'License Number' | translate}}" required>
+              <md-error class="required">{{'Enter License Number' | translate}}</md-error>  
+      </md-form-field>
+
+      <md-form-field class="example-full-width width " style="float:left;width: 30%;padding-left:2%">
+        <input mdInput type="text" required [(ngModel)]="contactNumber" name="contactNumber" placeholder="{{'Contact Number' | translate}}" />
+      </md-form-field>
+
+<md-form-field  class="example-full-width width"  style="float:left;width: 30%;padding-left:2%">
+  <input mdInput type="text" (keypress)="click1($event)"  [(ngModel)]="salary" name="salary" placeholder="{{'Salary' | translate}}" required> 
+  <md-error class="required">{{'Enter Salary' | translate}}</md-error> 
+</md-form-field>
+
+<!-- -----date of joining--------- -->
+  <div  style="float:left;width: 30%;padding-left:1%; padding-top: 1%;">
+  <div style="float:left;width: 20%;padding-top: 2.5%;">{{'DOJ' | translate}}:</div> 
+  <div id="c11" style="float:left;width: 80%;">
+  <owl-date-time ngDefaultControl name="doj" [(ngModel)]="doj"   [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'" placeholder="{{'Date Of Joining' | translate}}"  [autoClose]="true" required></owl-date-time> </div>
+</div>  
+
+
+     </div>
+</form>
+     
+<!--image upload and License upload -->
+       
+       <!-- <div class ="form-group">
+      <md-form-field  class="example-full-width width"  style="float:left;width: 50%">
+          
+       <input   mdInput type="text"  [(ngModel)]="imagePath" name="imagePath1" placeholder="Image Path" required readonly> 
+    {{Filename}}
+      </md-form-field>
+
+  
+      
+     </div>  <br>
+
+       <div class="form-group">
+          <md-form-field  class="example-full-width width"  style="float:left;width: 50%">
+          
+              <input   mdInput type="text"  [(ngModel)]="license_upload" name="image" placeholder="Image Path" required readonly> 
+           {{Filename}}
+             </md-form-field>
+       </div> -->
+
+     <!-- </form> -->
+
+
+
+
+
+
+         <!-- formgroup ends here  -->
+<br><br>
+      <div style="padding-top:15%;">
+          <!-- <button class="btn btn-primary btn-block/"(click)="addDevice()" style="cursor:pointer;width: 159px;height: 44px;">Add Device</button> -->
+      </div><br>
+      <flash-messages style="float: center;"></flash-messages>   
+      <!-- form button and flash msgs end here  -->
+     <div >
+    
+   
+               <!-- <div style="padding-top:10%;">
+                <button class="btn btn-primary btn-block/"(click)="addDriver()" style="cursor:pointer;width: 159px;height: 44px;">ADD DRIVER</button>
+            </div><br>  -->
+<input type="submit" [disabled]="!signupForm.form.valid" (click) ="addDriver(signupForm.form)" class="btn btn-primary btn-block/" [value]="buttonText" style="cursor:pointer;width: 159px;height: 44px;"  fxFlexAlign="center"> 
+<input type="submit"  (click) ="NewVehicleType(signupForm.form)" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;"  >
+            <flash-messages style="float: center;"></flash-messages>
+     </div>
+  
+       </md-card>
+  </div>  
+<!-- </div>     -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- <div class="image" style="    float: right;
+
+margin-top: -2%;
+margin-right: 10%;">
+<image-upload
+[url]="'http://13.126.36.205:3000/vehicleType/profileUpload'"
+[buttonCaption]="'Upload'"
+(removed)="onRemoved($event)"
+(uploadFinished)="onUploadFinished($event)"
+>
+</image-upload></div>  -->
+
+<!--(uploadStateChanged)="onUploadStateChanged($event)"-->
+<!-- <div class="image" style="    float: right;
+
+margin-top: -2%;
+margin-right: 10%;">
+<image-upload
+url="http://13.126.36.205:3000/vehicleType/licenseUpload"
+[beforeUpload]="onBeforeUpload1"
+[buttonCaption]="'Upload1'"
+(removed)="onRemoved1($event)"
+(uploadFinished)="onUploadFinished1($event)"
+(uploadStateChanged)="onUploadStateChanged1($event)">
+</image-upload></div>  -->
+
+    <!-- </body>
+</html> -->
+
+
+<!--   <html>
+          <head>
+              <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+             
+          </head>
+          <body>
+              <div class="upper">
+                  <md-toolbar>My App</md-toolbar>
+                <md-toolbar flex style="background-color:white;width: 100%;" >
+                  
+                        <img src="../../assets/image/f_logo.jpg" 
+                        style=
+                        "width:12%;padding-top: 8px;">
+                        
+                      <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                                   </ul>
+                        
+                                   <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
+                                       <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                          <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                          <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                       
+                                          &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                             <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                        </md-menu>
+                                        
+                                        <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                       
+                                           <img src="../../assets/image/us.jpg" height=30px>
+                                        </button>
+                                 </ul>
+                                       
+                                
+                             
+                                     <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+   
+                                         <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                           <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                           <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                        
+                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                              <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                         </md-menu>
+                                         
+                                         <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                   
+                                            <img src="../../assets/image/us.jpg" height=30px>
+                                         </button>
+                                     
+                                   </ul>
+                                         
+                      
+                     </md-toolbar>
+                </div>
+
+
+      
+<div class="for" >
+    <md-card>
+          <form action="" role="form">
+              <input id='step2' type='checkbox'>
+              <input id='step3' type='checkbox'>
+          
+              <div id="part1" class="form-group">
+                <div class="panel panel-primary">
+                             <b><h3 style="text-align:left;">Device Details</h3></b>  
+
+                              
+
+                                <form #lgForm="ngForm" (ngSubmit)="addDevice()">
+
+          <progress-bar [value]="50" [max]="100" title="Device Details"></progress-bar> <br>
+                     <div class ="form-group">
+                             <md-form-field class="example-full-width width">
+        <input mdInput   class="no-spin" [(ngModel)]=" deviceid" name=" deviceid"placeholder="Device ID" required/>
+                                     <md-error class="required">Enter Device ID</md-error>
+                                    </md-form-field>&nbsp;&nbsp;&nbsp;
+                                    <md-form-field class="example-full-width width">
+                          <input mdInput type="text" [(ngModel)]="devicename" name="devicename"placeholder="Device Name" required/> 
+                          <md-error class="required">Enter Device Name</md-error>
+                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                   
+                 <md-form-field class="example-full-width width ">
+                          <input mdInput type="text" [(ngModel)]="des" name="des"placeholder="Description" />                
+                         </md-form-field>&nbsp;&nbsp;&nbsp;&nbsp;
+
+                         <md-select  name="typdev" placeholder="Device Type" style="margin-top: -4px;
+                         width: 40%;
+                         /* float: right; */
+                         margin-right: 2%;" [(ngModel)]="new" (ngModelChange)="cultivoChange(new)">
+                            <md-option *ngFor="let food of foods" [value]="food" >
+                              {{ food.viewValue }}
+                            </md-option>
+                          </md-select> 
+                          <div *ngIf="show">
+                         <md-form-field  class="example-full-width width" style="float:left;margin-left:8%;">
+                                 <input mdInput type="text" [(ngModel)]="hrdwr" name="hrdwr"placeholder="SIM Number" required/> 
+                                 <md-error class="required">Enter SIM Number</md-error>  
+                         </md-form-field>
+                         <md-select  name="neww" placeholder="Vechiles Type" style="margin-top: -4px;
+                         width: 40%;
+                         /* float: right; */
+                         margin-right: 8%;" [(ngModel)]="neww">
+                            <md-option *ngFor="let foodd of foodds" [value]="foodd" >
+                              {{ foodd.viewValue }}
+                            </md-option>
+                          </md-select> 
+                        </div>
+               
+    
+
+
+
+                            </div> 
+                        <br>  <br>  <br> 
+                     <div class="btn-group btn-group-lg" role="group" aria-label="...">
+                      <label class="back">
+                        <div class="btn btn-default btn-primary btn-lg" role="button" (click)="back2home();">Back</div>
+                      </label>&nbsp;&nbsp;  
+                              <label for='step2' id="continue-step2" class="continue">
+                                       <div class="btn btn-default btn-success btn-lg" >Next</div> 
+                                     </label>
+                                   </div> 
+                  </form>
+             
+           
+                </div>
+              </div>
+          
+              <div id="part2" class="form-group">
+                <div class="panel panel-primary">
+                  <div class="panel-heading">
+                    <h3 style="text-align:left;">Security</h3>
+                  </div>
+     
+                  
+                      <progress-bar [value]="100" [max]="100" title="Security" color="red"></progress-bar>
+                      <b><h5 align="justify"><font size="+1">Auto-generated authentication token</font></h5></b>
+                      <p align="justify">
+                          You have registered your device credentials, to get connected you need to generate the token key. Once you have generated the token, you will able to read and write the devices. Token will be sent to your registered e-mail id. Authentication tokens are non-recoverable. If you missplace this token, you will need to re-register the device to generate the new authentication token.
+                     </p>
+                     <md-card style="margin-top:-2px;height:104px">
+                        <div style="margin-top:-35px;">  
+                      <div class ="form-group">
+                            <br> 
+                             
+                       <label style="float:left;font-size:16px;"><b>Device ID : &nbsp;</b></label>     
+                       <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.deviceid}}</label><br>       
+                            </div>
+                        
+                            <div class ="form-group">
+                                <label style="float:left;font-size:16px;"><b>Device Name : &nbsp;</b></label>
+                                <label style="float:left;font-size:12px;    margin-top: 3px;">{{this.devicename}}</label><br>       
+                                
+                           <br> 
+                                <br>  </div>
+                            </div>
+                     </md-card>
+
+                    
+                     <div class="btn-group btn-group-lg btn-group-justified" role="group" aria-label="...">
+                                             
+                        <label for='step2' id="back-step2" class="back">
+                            <div class="btn btn-default btn-primary btn-lg" role="button">Back</div>
+                          </label>&nbsp;&nbsp;                                    
+                                             
+                                             
+                                                          &nbsp;&nbsp;  <label for='step3' id="continue-step3" class="continue">
+                                                             
+               <button type="submit" class="btn btn-default btn-success btn-lg"  (click)="addDevice()"[disabled]="!lgForm.form.valid">Submit</button>
+                                                        </label>
+                                                     </div>
+   <flash-messages style="float: center;"></flash-messages>
+     <button (click)="test()" style="float:left;font-size:11px;background-color: Transparent; background-repeat:no-repeat;border: none;cursor:pointer;   overflow: hidden;outline:none;margin-top:10pxpx">* token pricing</button>                                                
+                      
+        
+             
+                </div>
+              </div>
+          
+    
+            </form>
+    </md-card>
+
+              </div>
+
+
+
+
+          
+          </body>
+       </html>                -->
+
diff --git a/src/app/add-driver/add-driver.component.spec.ts b/src/app/add-driver/add-driver.component.spec.ts
new file mode 100644
index 0000000..574c1f4
--- /dev/null
+++ b/src/app/add-driver/add-driver.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDriverComponent } from './add-driver.component';
+
+describe('AddDriverComponent', () => {
+  let component: AddDriverComponent;
+  let fixture: ComponentFixture<AddDriverComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddDriverComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDriverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-driver/add-driver.component.ts b/src/app/add-driver/add-driver.component.ts
new file mode 100644
index 0000000..7fb75b4
--- /dev/null
+++ b/src/app/add-driver/add-driver.component.ts
@@ -0,0 +1,738 @@
+import { Component, Inject, OnInit} from '@angular/core';
+import {JSONEditor} from 'jsoneditor';
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import {Token} from '../token';
+import{Contact} from '../contact';
+import {MdSnackBar} from '@angular/material';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import {ContactService} from '../contact.service';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot,ActivatedRoute,Params } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Observable} from 'rxjs/Rx';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { toString } from '@ng-bootstrap/ng-bootstrap/util/util';
+
+
+
+
+@Component({
+  selector: 'app-add-driver',
+  templateUrl: './add-driver.component.html',
+  styleUrls: ['./add-driver.component.css'],
+  providers: [ContactService,SidebarComponent]
+})
+export class AddDriverComponent implements OnInit {
+  text: any;
+  timezoneArray(arg0: any): any {
+    throw new Error("Method not implemented.");
+  }
+
+
+
+  contactNumber
+  //File uploader above
+  device_Id: string;
+  dev: any;
+  deviceId: any;
+  group_info: any;
+  executed2:any;
+  groupInfo:any;
+  devices: Device[] = []
+  device: Device
+  fuel_tank_capicity:any;
+  voltage_tank_empty:any;
+  tankfull_capicity:any;
+  tokens: Token[] = []
+  token: Token
+
+   useridd: any;
+   routeData : any=[];
+   data:any;
+  fs: any;
+  ls: any;
+  or: any;
+  mb: any;
+  custtype: any;
+  cust: boolean;
+  logoutbut: boolean;
+  dealer: boolean;
+  logo: any;
+  superAdmin: any;
+  myaccount(){
+ 
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  // let dialogRef = this.dialog.open(MyaccountComponent, {
+  //   width: '903px',
+  //   data: {}
+  // });
+
+  // dialogRef.afterClosed().subscribe(result => {
+
+  //   if(result == "succ"){
+  //     console.log("Updated")
+  //   }
+
+  // });
+  }
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  } logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  vehicleRoute(){
+    this.cond = false
+    this.router.navigateByUrl("vehicleRoute");
+  
+  }
+  
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+  
+
+
+  // new_1(){
+  //   this.router.navigateByUrl("new");
+    
+  // }
+  
+ 
+  
+  
+  cond:Boolean = false;
+  point : any = 0;
+   aa(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+ 
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  routeViolation(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+  
+  }
+
+  
+  
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert-report");
+  
+  }
+  
+  summaryReport(){
+ 
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  
+  overspeed(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+  
+  }
+  stoppage_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+  
+  }
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+  
+  
+  }
+  
+  geofancingReport(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  route_map(){
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  
+  
+  distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+  }
+  
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+  
+  addgeo(){
+    this.router.navigateByUrl("geofence-add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+   a(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  } report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+  
+  }
+  report_speed(){
+   // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  name: any;
+  address: any;
+  status: any;
+  license_number: any;
+  license_upload: any;
+  overall_rating: any;
+  salary:any;
+  doj: string;
+
+  Manf: string;
+  Model: string;
+  tkstatus:any;
+  value:any;
+Lo:string;
+  Hardware_Ver: string;
+  Loca: string;
+  temp:any
+  food:any
+  new:any;
+  email:any;
+  message:string;
+  selectedValue:any;
+  show:boolean =false;
+
+  remove
+  devicename: any;
+  deviceid: any;
+  des: any;
+  model: any;
+  Des: any;
+  hrdwr: any;
+  typdev:any;
+  Device_ID: string;
+  /* ../../assets/image/bgtry2.jpg */
+ 
+  foodds = [
+    {value: 'true', viewValue: 'True'},
+    {value: 'false', viewValue: 'False'},
+   
+  ];
+  cultivoChange(val){
+  
+    if(val.value == "Tracker"){
+      this.show=true
+    }
+   else{
+    this.show=false
+   }
+  }
+
+  back2home(){
+    // console.log("Runnig Back")
+    this.router.navigateByUrl("dashboard");
+    
+  }
+title="Add Driver";
+buttonText="Add";
+update:boolean=false
+  constructor(public dialogRef: MdDialogRef<AddDriverComponent>,@Inject(MD_DIALOG_DATA) public data1: any ,private _formBuilder: FormBuilder,private router: Router, public snackBar: MdSnackBar,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,private sidebar:SidebarComponent,public dialog: MdDialog,private act:ActivatedRoute) { 
+   console.log(data1);
+   
+    if(Object.keys(data1).length != 0){
+      this.update=true
+      this.title="Edit Driver";
+      this.buttonText="Update"
+      this.name=data1.name;
+      this.salary=data1.salary;
+      this.doj=data1.date_of_joining;
+      this.address=data1.address;
+      this.status=data1.status;
+      this.license_number=data1.license_number
+      this.contactNumber=data1.contactNumber
+    }else{
+      this.update=false
+      this.title="Add Driver";
+      this.buttonText="Add"
+    }
+  }
+test(){
+//   console.log("Runnig Test")
+//  console.log(this.new.value);
+}
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+       /*  TOKEN GENERATION  */   
+
+       
+
+tokenn(){
+  if(this.name == null)
+  {
+    
+    this._flashMessagesService.show('Error : Insert the Complete Details', { cssClass: 'alert-danger', timeout: 1000 });
+    this.tkstatus=0;
+  }
+  else{
+    // console.log("GENERATING TOKEN")
+ /*  const newToken ={
+    deviceid: this.deviceid,
+    eid: "test@test.com",
+    }
+     this.contactService.addToken(newToken)
+      .subscribe(token => {
+        this.tokens.push(token);
+      });   
+      this.tkstatus=1;  */
+    }
+    }
+
+      /*  ADD DEVICE   */
+     
+      mess:any;
+      mess2:any;
+      mess3:any;
+      neww:any;
+      driver:any;
+      before:any;
+      dcontact:any;
+      timer:any;
+      subscription:any;
+      Load:boolean=false
+      ign(){
+        this.router.navigateByUrl("device-report/ign-report");
+      
+      }
+      addDriver(ngForm){
+   
+       // alert(this.useridd);
+  if(this.name == null||this.address == null||this.status == null||this.license_number == null||this.salary == null||this.doj == null)
+  {
+    
+    this._flashMessagesService.show('Error : Please insert details of Driver', { cssClass: 'alert-danger', timeout: 2000 });
+    this.Load = false
+  }
+  // else if(this.address == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert the Address ', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+  // else if(this.status == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert the Status', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+// second row
+  // else if(this.license_number == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert license number', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+  // else if(this.license_upload == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert license upload', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+  // else if(this.overall_rating == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert overall rating', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+  // third row
+  // else if(this.salary == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert salary', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+  // else if(this.doj == null)
+  // {
+  //   this._flashMessagesService.show('Error : Insert date of joining', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+// else if(this.imagePath == null)
+// {
+//   this._flashMessagesService.show('Error : Insert image path', { cssClass: 'alert-danger', timeout: 2000 });
+//   this.Load = false
+// }
+
+
+
+else{
+  this._flashMessagesService.show('Driver Added', { cssClass: 'alert-danger', timeout: 1000 });
+     }
+
+ 
+
+    //this._flashMessagesService.show('Congratulation Device Added as '+this.deviceid, { cssClass: 'alert-success', timeout: 2000 });
+    
+    //object should form as per the request;
+
+    if(this.update){
+      this.updateDriver()
+    }else{
+      const newDriver ={
+        name: this.name,
+        address: this.address,
+        status: this.status,
+        license_number: this.license_number,
+        overall_rating:this.overall_rating,
+        salary:this.salary,
+        doj:this.doj,
+        userid :this.routeData,
+        contactNumber:this.contactNumber,
+  
+      }
+     //webservice to add new driver
+  
+        this.contactService.addDriver(newDriver)
+        .subscribe((dataret => {
+          this.data = dataret
+          this.NewVehicleType(ngForm);
+          if(this.data.status == 200){
+          
+            //this.driver.push(newDriver);
+            this._flashMessagesService.show("New Driver Added!", { cssClass: 'alert-danger', timeout: 2000 });   
+            
+          } 
+         
+           }), (err: any) => { 
+          //    console.log(err.status); 
+          // console.log(err);
+       if(err.status ==   500)
+        {
+          
+    
+           this.mess = err._body.split(":")[5] ;
+           this.mess2 = this.mess.split("_")[0];
+          this.mess3 = this.mess.split("_")[1];
+       
+       //   this._flashMessagesService.show(this.mess2 + this.mess3+" Duplicate Entry", { cssClass: 'alert-danger', timeout: 3000 });
+          this.Load = false
+          // console.log("Error"); 
+          }  
+         else{
+          this._flashMessagesService.show("Error !!", { cssClass: 'alert-danger', timeout: 2000 });        
+          this.Load = false
+        } 
+        }
+      );
+      
+    }
+     
+  }
+
+  updateDriver(){
+    var data={
+      _id:this.data1._id,
+       name: this.name,
+      address: this.address,
+      status: this.status,
+      license_number: this.license_number,
+      overall_rating:this.overall_rating,
+      salary:this.salary,
+      doj:this.doj,
+      contactNumber:this.contactNumber,
+      userid :this.data1.user_id._id
+    }
+
+    this.contactService.post('/driver/updateDriverDetails',data).subscribe(res=>{
+      // this.dialogRef.close();
+    })
+  }
+
+
+  // imageFile:any;
+  // Filename:any;
+  // Lfilename:any;
+  private fileCounter = 0;
+// -------------------profile upload----------------------------------
+//   onBeforeUpload = (metadata) => {
+//     if (this.fileCounter % 2 === 0) {
+//       metadata.abort = true;
+//     } else {
+//       // mutate the file or replace it entirely - metadata.file
+//       metadata.url = 'http://13.126.36.205:3000/vehicleType/profileUpload'
+//     }
+  
+//     this.fileCounter++;
+//     return metadata;
+//   };
+//   onUploadFinished(file) {
+//     debugger;
+//     console.log(file);
+//     this.imageFile=file;
+//     console.log(this.imageFile.file.name);
+//     this.Filename=this.imageFile.file.name
+//   }
+  
+//   onRemoved(file) {
+//     console.log(file);
+//   }
+  
+//   onUploadStateChanged(state: boolean) {
+//     console.log(state);
+//   }
+
+// //---------------license upload------------------
+// onBeforeUpload1 = (metadata) => {
+//   if (this.fileCounter % 2 === 0) {
+//     metadata.abort = true;
+//   } else {
+//     // mutate the file or replace it entirely - metadata.file
+//     metadata.url = 'http://13.126.36.205:3000/vehicleType/licenseUpload'
+//   }
+
+//   this.fileCounter++;
+//   return metadata;
+// };
+// onUploadFinished1(file) {
+//   debugger;
+//   console.log(file);
+//   this.imageFile=file;
+//   console.log(this.imageFile.file.name);
+//   this.Lfilename=this.imageFile.file.name
+// }
+
+// onRemoved1(file) {
+//   console.log(file);
+// }
+
+// onUploadStateChanged1(state: boolean) {
+//   console.log(state);
+// }
+
+report_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+NewVehicleType(ngForm){
+  //this.router.navigateByUrl("addEditVehicleType"); 
+  this.driver=[];
+  ngForm.reset();
+}
+click1(event){
+  if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+    
+          }
+          else
+            event.preventDefault();
+        }
+
+  ngOnInit() {
+    
+  
+  //  console.log(moment("2014-06-01T12:00:00Z").tz('America/Los_Angeles').format('ha z'));
+    this.logo=window.localStorage['logo'];
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.email = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+         
+
+         if(this.mb.charAt(0)=="n"){
+          this.mb = ' '
+        }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+ 
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+    this.act.queryParams.subscribe((params:Params) =>{ 
+
+
+      // console.log(params['useridd']);
+      this.routeData=params.user_id;
+      // let id= params['user_id'];
+      // this.groupId = id;
+      // console.log(this.groupId);
+    
+    
+      })
+   
+
+
+  }
+   
+    }
+//     call(e) {
+//       {
+//              if (e.keyCode == 32) {
+//                  e.preventDefault();
+//              }
+//          }
+//  }
+//     click1(event){
+     
+//       if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+//       }
+//       /* if(event.keyCode===13){
+//       this.otp_window();
+//       } */
+      
+//       else
+//       event.preventDefault();
+//       } 
+//  fs:any;
+//  ls:any;
+//  or:any;
+//  userid:any;
+//    emailid :any; 
+//    useridd:any;
+//    custtype:any;
+//    cust:boolean=true;
+//    isLinear = false;
+//    firstFormGroup: FormGroup;
+//    secondFormGroup: FormGroup;
+//    phoneno: any;
+//    logo:any;
+//    text:any;
+//    ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   mb:any
+  // logoutbut:boolean;
+// dealer:boolean;
+// groups=[];
+  
+
+  // group(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("group_view");
+  // }
+
+
+  // fuel_calibration(){
+  //   console.log("Inside fuel Callibration !!!");
+  //   if(this.fuel_tank_capicity == null)
+  //   {
+      
+  //     this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+  //     this.Load = false
+  //   }
+  //   else if(this.voltage_tank_empty == null)
+  //   {
+  //     this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+  //     this.Load = false
+  //   }
+  //   else if(this.tankfull_capicity == null)
+  //   {
+  //     this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+  //     this.Load = false
+  //   }
+
+
+  //   const fuelCapicity ={
+  //     fuelCapicity: this.fuel_tank_capicity,
+  //     voltageTankempity: this.voltage_tank_empty,
+  //     tankfullcapicity: this.tankfull_capicity,
+      
+  //   }
+
+  //   console.log(fuelCapicity);
+  // }
+  //}
+
+
+  
+
+
diff --git a/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.css b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.css
new file mode 100644
index 0000000..4a9cf9e
--- /dev/null
+++ b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.css
@@ -0,0 +1,20 @@
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(143, 215, 255);; 
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+
+  background: #dadada;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555; 
+}
\ No newline at end of file
diff --git a/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.html b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.html
new file mode 100644
index 0000000..72dba6d
--- /dev/null
+++ b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.html
@@ -0,0 +1,167 @@
+<app-all-menus></app-all-menus>
+<div class="container" style="width: 90%;max-width: 100%;">
+  <div class="row" style="padding-top: 6%;height:98vh;padding-left: 0;padding-right: 0;">
+    <div class="col-12" style="background: whitesmoke;padding: 0;height: 90vh;">
+      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; margin: 0; color: white;">
+        <div class="col-12">
+          <flash-messages style="float: center;position: absolute;"></flash-messages>
+          <p>{{'ADD VEHICLE TYPE'| translate}}</p>
+        </div>
+      </div>
+      <form #signupForm="ngForm">
+      <div class="row" style="margin: 0px;margin-top: 20px;">
+        <div class="col-sm-12 col-md-6 col-lg-6">  
+          <div class="row">
+            <div class="col-sm-12 col-md-6 col-lg-6">
+              <div class="form-group">
+                <label for="exampleInputEmail1">{{'Brand' | translate}}</label>
+                <input type="email" class="form-control" id="exampleInputEmail1" name="brand" [(ngModel)]="brand" aria-describedby="emailHelp" placeholder="{{'Enter Brand Name' | translate}}">
+                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-6 col-lg-6" >
+              <div class="form-group">
+                <label for="exampleInputEmail1">{{'Description' | translate}}</label>
+                <input type="email" class="form-control" id="exampleInputEmail1" name="description" style="width: 95%;" aria-describedby="emailHelp" [(ngModel)]="description" placeholder="{{'Pealse Enter Description' | translate}}">
+                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+              </div>
+            </div>
+         
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-6 col-lg-6">
+              <div class="form-group">
+                <label for="exampleInputEmail1">{{"Model" | translate}}</label>
+                <input type="email" name="model" class="form-control" id="exampleInputEmail1" [(ngModel)]="model" aria-describedby="emailHelp" placeholder="{{'Enter Model' | translate}}">
+                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+              </div>     
+            </div>
+            <div class="col-sm-12 col-md-6 col-lg-6">
+              <div class="form-group">
+                <!-- <label for="exampleInputEmail1">Icon type</label> -->
+                <label for="exampleInputEmail1">{{'Mileage' | translate}}</label>
+                <input type="number" name="mileage" class="form-control" id="exampleInputEmail1" [(ngModel)]="mileage" style="width: 95%;" aria-describedby="emailHelp" placeholder="{{'Enter Mileage' | translate}}">
+              </div>    
+            </div>
+          </div>
+          <div style="text-align: center;">
+            <label style="font-weight: 700; color: red;">{{'Fuel Calibration' | translate}}</label> 
+            <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addRow(0,0)">add</md-icon>
+          </div>
+      
+          <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;">
+            <div class="row" *ngFor="let data of voltage_calibration; let i =index">
+              <div class="col-sm-12 col-md-6 col-lg-6">
+                <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data.voltage" (keypress)="click1($event)"
+                name="data.voltage{{i}}" aria-describedby="emailHelp" placeholder="Enter in volts">
+                <small id="emailHelp" class="form-text text-muted">{{"VOLTAGE VALUE" | translate}}</small>
+              </div>
+              <div class="col-sm-12 col-md-6 col-lg-6">
+                <div>
+                  <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data.fuel" (keypress)="click1($event)"
+                  name="data.fuel{{i}}" style="width: 90%;" aria-describedby="emailHelp" placeholder="{{'Enter fuel in liters' | translate}">
+                  <small id="emailHelp" class="form-text text-muted">{{'FUEL VALUE' | translate}}</small>
+                </div>
+                <i class="fas fa-trash" (click)="deleteRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
+              </div>
+         
+            </div>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-6 col-lg-6"> 
+          <div class="row">
+            <div class="col-sm-12 col-md-6 col-lg-6">
+              <div class="form-group">
+                <label for="exampleInputEmail1">{{'Tank Size' | translate}}</label>
+                <input type="number" class="form-control" name="tank_size" [(ngModel)]="tank_size" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="{{'Tank Size' | translate}}">
+                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+              </div>          
+            </div>
+            <div class="col-sm-12 col-md-6 col-lg-6" >
+              <div class="form-group">
+                <md-select style="width: 94%;padding-top: 12%;" name="neww"
+                placeholder="{{'Select icon type' | translate}}" [(ngModel)]="iconObj">
+                <md-option *ngFor="let icon of IconType" [value]="icon">{{icon.viewValue}}</md-option>
+              </md-select>
+             
+                <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+              </div>
+            </div>
+         
+          </div>       
+          <div class="row" style="height: 75px;">
+            <div class="col-12">
+
+            </div>
+          </div>
+          <div style="text-align: center;">
+            <label style="font-weight: 700; color: red;">{{'Temperature Calibration' | translate}}</label>
+            <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addTempRow(0,0)">add</md-icon>
+          </div>  
+             
+              <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;">
+                <div class="row" *ngFor="let data1 of temprature_calibration; let i =index">
+                  <div class="col-sm-12 col-md-6 col-lg-6">
+                    <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data1.voltage" (keypress)="click1($event)"
+                    name="data1.voltage{{i}}" aria-describedby="emailHelp" placeholder="{{'Enter in volts' | translate}}">
+                    <small id="emailHelp" class="form-text text-muted">{{'VOLTAGE VALUE' | translate}}</small>
+                  </div>
+                  <div class="col-sm-12 col-md-6 col-lg-6">
+                    <div>
+                      <input type="number" class="form-control" id="exampleInputEmail1" [(ngModel)]="data1.temp" (keypress)="click1($event)"
+                      name="data1.temp{{i}}" style="width: 90%;" aria-describedby="emailHelp" placeholder="Enter tempreture in celsius">
+                       <small id="emailHelp" class="form-text text-muted">{{'TEMPERATURE VALUE' | translate}}</small>
+                    </div>
+                    <i class="fas fa-trash" (click)="deltempRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
+                  </div>
+                </div>
+              </div>
+        </div>
+      </div>
+      <div class="row" style="margin: 0px;margin-top: 20px;">
+        <div class="col-sm-12 col-md-6 col-lg-6">
+     
+        </div>
+        <div class="col-sm-12 col-md-6 col-lg-6">
+          <!-- <label>{{'Fuel Calibrator' | translate}}</label> -->
+          <!-- <md-icon style="cursor: pointer;float: right;padding-left: 5px;font-weight: 600;color:grey"  (click)="addRow(0,0)">add</md-icon> -->
+          <!-- <div class="form-group" style="width:100%;height: 225px; max-height: 225px;overflow: auto;overflow-x: hidden;"> -->
+            <!-- <div class="row">
+              <div class="col-sm-12 col-md-10 col-lg-10">
+                <p style="color: #555454;font-weight: 400;"><label>{{'Volatage Calibrator' | translate}}</label></p>
+              </div>  
+              <div class="col-sm-12 col-md-2 col-lg-2">
+                <md-icon style="cursor: pointer;"  (click)="addRow(0,0)">add</md-icon>
+              </div>
+            </div> -->
+            <!-- <div class="row" *ngFor="let data of voltage_calibration; let i =index">
+              <div class="col-sm-12 col-md-6 col-lg-6">
+                <input type="number" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter in volts">
+                <small id="emailHelp" class="form-text text-muted">VOLTAGE VALUE</small>
+              </div>
+              <div class="col-sm-12 col-md-6 col-lg-6">
+                <div>
+                  <input type="number" class="form-control" id="exampleInputEmail1" style="width: 90%;" aria-describedby="emailHelp" placeholder="Enter fuel in liters">
+                  <small id="emailHelp" class="form-text text-muted">FUEL VALUE</small>
+                </div>
+                <i class="fas fa-trash" (click)="deleteRow(i)"  style="cursor: pointer;color: red;position: absolute;right: 18px; bottom: 30px;"></i>
+              </div>
+            </div> -->
+          <!-- </div> -->
+        </div>
+      </div>
+      <div class="row" style="margin: 0px;">
+        <div class="col-12" style="text-align: center;">
+          <input type="submit" [disabled]="!signupForm.form.valid" (click)="addVehicleType(signupForm.form)"
+          class="btn btn-primary btn-block/" value="Add Vehicle Type" style="cursor:pointer;width: 159px;height: 44px;" fxFlexAlign="center">&nbsp;&nbsp;
+        <input type="submit" (click)="NewVehicleType(signupForm.form)" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;background-color: red;">
+        </div>
+      </div>
+    </form>
+
+    </div>
+ 
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.spec.ts b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.spec.ts
new file mode 100644
index 0000000..bbd54dc
--- /dev/null
+++ b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEditVehicleTypeComponent } from './add-edit-vehicle-type.component';
+
+describe('AddEditVehicleTypeComponent', () => {
+  let component: AddEditVehicleTypeComponent;
+  let fixture: ComponentFixture<AddEditVehicleTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddEditVehicleTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddEditVehicleTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.ts b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.ts
new file mode 100644
index 0000000..8ab016f
--- /dev/null
+++ b/src/app/add-edit-vehicle-type/add-edit-vehicle-type.component.ts
@@ -0,0 +1,562 @@
+import { Component, OnInit } from '@angular/core';
+import {JSONEditor} from 'jsoneditor';
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import {Token} from '../token';
+import {Vehicle} from '../vehicle';
+import{Contact} from '../contact';
+import {MdSnackBar} from '@angular/material';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import {ContactService} from '../contact.service';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot,ActivatedRoute,Params } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Observable} from 'rxjs/Rx';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { toString } from '@ng-bootstrap/ng-bootstrap/util/util';
+@Component({
+  selector: 'app-add-edit-vehicle-type',
+  templateUrl: './add-edit-vehicle-type.component.html',
+  styleUrls: ['./add-edit-vehicle-type.component.css'],
+  providers: [ContactService,SidebarComponent]
+})
+export class AddEditVehicleTypeComponent implements OnInit {
+  [x: string]: any;
+
+  
+  device_Id: string;
+  dev: any;
+  deviceId: any;
+  group_info: any;
+  executed2:any;
+  groupInfo:any;
+
+
+  devices: Device[] = [];
+  device: Device;
+
+  vehicle_types:Vehicle[]=[];
+  vehicle_type:Vehicle;
+   IconType = [
+    { value: 'car', viewValue: 'Car' },
+    { value: 'bike', viewValue: 'Bike' },
+    { value: 'bus', viewValue: 'Bus' },
+    { value: 'pickup', viewValue: 'Pickup' },
+    { value: 'tractor', viewValue: 'Tractor' },
+    { value: 'truck', viewValue: 'Truck' },
+    { value: 'truck', viewValue: 'Heavy Truck' },
+    { value: 'tanker', viewValue: 'Tanker' },
+    { value: 'jcb', viewValue: 'JCB' },
+    { value: 'roadroller', viewValue: 'Roadroller' },
+    { value : 'user' ,viewValue : 'User'},
+    { value : 'ambulance' ,viewValue : 'Ambulance'},
+    // { value : 'tempo' ,viewValue : 'Tempo'}
+   
+  ];
+  // { value : 'user' ,viewValue : 'User'}
+  // Bike Bus Car Heavy truck Pickup Tanker Tractor Truck JCB Roadroller
+  iconObj:any;
+  fuel_tank_capicity:any;
+  voltage_tank_empty:any;
+  tankfull_capicity:any;
+  tokens: Token[] = []
+  token: Token
+
+   useridd: any;
+   routeData : any=[];
+   data:any;
+  custtype: any;
+  cust: boolean;
+  mb: any;
+  dealer: boolean;
+  logoutbut: boolean;
+  fs: any;
+  ls: any;
+  or: any;
+  logo: any;
+  superAdmin: any;
+
+   click1(event){
+    if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+      
+            }
+            else
+              event.preventDefault();
+          }
+  myaccount(){
+ 
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  // let dialogRef = this.dialog.open(MyaccountComponent, {
+  //   width: '903px',
+  //   data: {}
+  // });
+
+  // dialogRef.afterClosed().subscribe(result => {
+
+  //   if(result == "succ"){
+  //     console.log("Updated")
+  //   }
+
+  // });
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  } logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  vehicleRoute(){
+    this.cond = false
+    this.router.navigateByUrl("vehicleRoute");
+  
+  }
+  
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+  
+
+
+  // new_1(){
+  //   this.router.navigateByUrl("new");
+    
+  // }
+  
+ 
+  
+  
+  cond:Boolean = false;
+  point : any = 0;
+   aa(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+ 
+  // Ddetail(){
+  //   this.router.navigateByUrl("driverdetail");
+  // }
+  // DModel(){
+  //   this.router.navigateByUrl("deviceModel");
+  // }
+  // VType(){
+  //   this.router.navigateByUrl("VehicleType");
+  // }
+  // routeViolation(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/routeViolation");
+  
+  // }
+
+  
+  
+  // alert_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/alert-report");
+  
+  // }
+  
+  // summaryReport(){
+ 
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/summary-report");
+  // }
+  
+  // overspeed(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/overspeed");
+  
+  // }
+  // stoppage_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/stoppage_report");
+  
+  // }
+  // ignition_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/ignition_report");
+  
+  
+  // }
+  
+  // geofancingReport(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/geofancing");
+  // }
+
+  // route_map(){
+  //   this.router.navigateByUrl("routeMapping");
+
+  // }
+  
+  
+  // distance_report(){
+  // this.cond = false
+  // this.router.navigateByUrl("device-report/distance_report");
+  // }
+  
+  // trip_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/trip_report");
+  
+  // }
+  
+  // addgeo(){
+  //   this.router.navigateByUrl("geofence-add");
+  // }
+  // geo(){
+  //   this.router.navigateByUrl("geofencing");
+    
+  // }
+
+   a(){
+    // console.log(this.point);
+     if(this.point == 0){
+      this.cond = true;
+      this.point ++;
+     }
+   else if(this.point % 2 == 0){
+    this.cond = true;
+    this.point ++;
+   }
+   else{
+     this.cond = false
+     this.point ++;
+   }
+  
+    
+  }
+  // addcus(){
+  //   this.router.navigateByUrl("add");
+  // } report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report");
+  
+  // }
+  // report_speed(){
+  //   // console.log("report speed call")
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/device-speed-report");
+  // }
+  brand: any;
+  description: any;
+  model: any;
+
+ // voltage_calibration=[{voltage:[],fuel:[]}];
+  voltage_calibration=[];
+  temprature_calibration=[];
+  volts;
+  ltrs:any=[];
+  
+  tank_size: number;
+  mileage: number;
+  
+  
+  Manf: string;
+  Model: string;
+  tkstatus:any;
+  value:any;
+  Lo:string;
+  Hardware_Ver: string;
+  Loca: string;
+  temp:any
+  food:any
+  new:any;
+  email:any;
+  message:string;
+  selectedValue:any;
+  show:boolean =false;
+
+ 
+  /* ../../assets/image/bgtry2.jpg */
+ 
+  foodds = [
+    {value: 'true', viewValue: 'True'},
+    {value: 'false', viewValue: 'False'},
+   
+  ];
+  cultivoChange(val){
+  
+    if(val.value == "Tracker"){
+      this.show=true
+    }
+   else{
+    this.show=false
+   }
+  }
+
+  back2home(){
+    // console.log("Runnig Back")
+    this.router.navigateByUrl("dashboard");
+    
+  }
+
+  constructor(private _formBuilder: FormBuilder,private router: Router, public snackBar: MdSnackBar,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,private sidebar:SidebarComponent,public dialog: MdDialog,private act:ActivatedRoute) { }
+test(){
+//   console.log("Runnig Test")
+//  console.log(this.new.value);
+}
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+       /*  TOKEN GENERATION  */   
+
+       
+
+
+      /*  ADD DEVICE   */
+     
+      mess:any;
+      mess2:any;
+      mess3:any;
+      neww:any;
+      driver:any;
+      before:any;
+      dcontact:any;
+      timer:any;
+      subscription:any;
+      Load:boolean=false
+      // ign(){
+      //   this.router.navigateByUrl("device-report/ign-report");
+      
+      // }
+      addVehicleType(signupForm){
+        // console.log("vehicle ICon",this.iconObj);
+  
+  if(this.brand == null ||this.description == null|| this.model == null ||this.voltage_calibration  == null||this.tank_size == null||this.mileage == null)
+  {
+    
+    this._flashMessagesService.show('Error :Please Insert Details', { cssClass: 'alert-danger', timeout: 5000 });
+   // this.Load = false
+   //this.router.navigateByUrl("addEditVehicleType");
+   return;
+  }
+  // else if(this.description == null)
+  // {
+  //   this._flashMessagesService.show('Error : Please Insert Description ', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+  // else if(this.model == null)
+  // {
+  //   this._flashMessagesService.show('Error : Please Insert Model', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+// second row
+  // else if(this.voltage_calibration  == null)
+  // {
+  //   this._flashMessagesService.show('Error : Please insert Voltage', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+  // else if(this.tank_size == null)
+  // {
+  //   this._flashMessagesService.show('Error : Please Insert Tank Size', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+
+ 
+  // else if(this.mileage == null)
+  // {
+  //   this._flashMessagesService.show('Error : Please Insert Mileage', { cssClass: 'alert-danger', timeout: 2000 });
+  //   this.Load = false
+  // }
+  
+
+
+
+
+else{
+  const newVehicleModel ={
+    brand: this.brand,
+    description: this.description,
+    model: this.model,
+    voltage_calibration: this.voltage_calibration,
+    temp_calibration: this.temprature_calibration,
+    tank_size: this.tank_size,
+    mileage: this.mileage,
+    iconType:this.iconObj.value,
+    user:this.useridd
+  }
+
+  console.log('newVehicleModel',newVehicleModel);
+//webservice to add new driver  
+   // console.log('finalPayload',newVehicleModel)
+   this.contactService.addVehicleType(newVehicleModel)
+   .subscribe((dataret => {
+     // this.data = dataret
+     // this.NewVehicleType(signupForm);
+    //  this._flashMessagesService.show('Vehicle Type Added', { cssClass: 'alert-success', timeout: 2000 });
+     this.router.navigateByUrl("VehicleType");
+     // this.router.navigateByUrl("VehicleType");
+      }), (err: any) => {
+   
+  if(err.status ==   500)
+   {
+     
+
+      this.mess = err._body.split(":")[5] ;
+      this.mess2 = this.mess.split("_")[0];
+     this.mess3 = this.mess.split("_")[1];
+  
+
+     this.Load = false
+  
+     }  
+    else{
+     this._flashMessagesService.show("Error !!", { cssClass: 'alert-danger', timeout: 2000 });        
+     this.Load = false
+   } 
+   }
+ );
+
+   
+     }
+
+ 
+
+    //this._flashMessagesService.show('Congratulation Device Added as '+this.deviceid, { cssClass: 'alert-success', timeout: 2000 });
+    
+    //object should form as per the request
+  
+  
+     
+  }
+
+  NewVehicleType(ngForm){
+    //this.router.navigateByUrl("addEditVehicleType"); 
+    this.router.navigateByUrl("VehicleType");
+    // this.vehicle_types=[];
+    // ngForm.reset();
+  }
+
+
+  imageFile:any;
+  Filename:any;
+  private fileCounter = 0;
+
+  
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  onRemoved(file) {
+    // console.log(file);
+  }
+  report_map(){
+    this.router.navigateByUrl("routeMapping");
+  
+  }
+ 
+  // loadRow(){
+  //   this.voltage_calibration.push({voltage:0,fuel:0});
+  // }
+
+
+  addRow(voltage,fuel){
+    var obj={};
+    //let contact =  this.voltage_calibration({voltage:0,fuel:0});
+    obj={voltage:voltage,fuel:fuel};
+    this.voltage_calibration.push(JSON.parse(JSON.stringify(obj)));
+    obj={};
+  }
+
+  addTempRow(voltage,temp){
+    var obj={};
+    //let contact =  this.voltage_calibration({voltage:0,fuel:0});
+    obj={voltage:voltage,temp:temp};
+    this.temprature_calibration.push(JSON.parse(JSON.stringify(obj)));
+    obj={};
+  }
+  deltempRow(index){
+    this.temprature_calibration.splice(index, 1);
+  }
+
+  deleteRow(index){
+    this.voltage_calibration.splice(index, 1);
+  }
+  ngOnInit() {
+    this.logo=window.localStorage['logo'];
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+   this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+   this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+   this.email = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+   this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+   this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+         
+
+         if(this.mb.charAt(0)=="n"){
+          this.mb = ' '
+        }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+    this.act.queryParams.subscribe((params:Params) =>{ 
+
+   
+      // console.log(params['useridd']);
+      this.routeData=params.user_id;
+      // let id= params['user_id'];
+      // this.groupId = id;
+      // console.log(this.groupId);
+      this.addRow(0,0);
+      this.addTempRow(0,0);
+    
+      })
+   
+
+
+  }
+}
diff --git a/src/app/add-fuel-price/add-fuel-price.component.html b/src/app/add-fuel-price/add-fuel-price.component.html
new file mode 100644
index 0000000..a57e70c
--- /dev/null
+++ b/src/app/add-fuel-price/add-fuel-price.component.html
@@ -0,0 +1,69 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+  <!-- <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div> -->
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Add Fuel Price' | translate}}
+
+        <button class="btn btn-primary btn-sm" style="float: right;margin-right: 11px;" [routerLink]="['/FuelPrice']"><i
+            class="fas fa-arrow-left"></i> Back</button>
+        <button class="btn btn-primary btn-sm" *ngIf="useridd=='59cbbdbe508f164aa2fef3d8'" style="float: right;margin-right: 11px;" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false"
+        aria-controls="multiCollapseExample1"><i class="fas fa-upload"></i> Upload Excel</button>
+      </h4>
+    </div>
+  </div>
+
+
+  <div class="collapse multi-collapse" id="multiCollapseExample1">
+    <div class="card card-body">
+      <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+        <div class="col-sm-12" style="text-align: left;font-size: initial;">
+        
+          <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+            <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;" class="file-upload btn btn-primary">Browse
+              for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+            </label>
+            <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+              class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+              aria-controls="collapseZero" (click)="uploadExcel()">Upload</button>
+         
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<div class="table-responsive" style="overflow: scroll;height: 90vh;">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>State</th>
+        <th>Date</th>
+        <th>Petrol Price</th>
+        <th>Diesel Price</th>
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let item of stateArray; let i=index;">
+        <td>{{item.state}}</td>
+        <td><input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+          [(ngModel)]="date" type="text"></td>
+        <td><input [(ngModel)]="item.petrol" (ngModelChange)="petrolChange($event,i)"></td>
+        <td><input  [(ngModel)]="item.diesel" (ngModelChange)="dieselChange($event,i)"></td>
+
+      </tr>
+    </tbody>
+  </table>
+  <div class="text-center mb-3 mt-3">
+    <button class="btn btn-primary" (click)="submit()">Sumbit</button>
+
+  </div>
+</div>
+
+  </div>
+  
\ No newline at end of file
diff --git a/src/app/add-fuel-price/add-fuel-price.component.scss b/src/app/add-fuel-price/add-fuel-price.component.scss
new file mode 100644
index 0000000..88909a5
--- /dev/null
+++ b/src/app/add-fuel-price/add-fuel-price.component.scss
@@ -0,0 +1,46 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+#myInput {
+  border-radius: 15px;
+  /* border: 2px solid #18262F; */
+  padding: 7px;
+  width: 116px;
+  height: 17px;
+  font-size: 9px;
+  outline: none;
+  float: right;
+  margin-top: 2%;
+}
+
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+
+  color: #6b6a6a;
+  padding-top: 7px;
+  margin: 0px;
+}
+.sidebar {
+  height: 84vh;
+  width: 24%;
+  text-align: left;
+  background: white;
+  box-shadow: 3px 1px 5px 0px #b2b0ae;
+  position: fixed;
+  padding: 10px;
+}
+.main {
+  box-shadow: 3px 1px 5px 0px #b2b0ae;
+  padding: 10px;
+  background: white;
+  //   margin-left: 5px;
+}
+
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/add-fuel-price/add-fuel-price.component.spec.ts b/src/app/add-fuel-price/add-fuel-price.component.spec.ts
new file mode 100644
index 0000000..cb07e13
--- /dev/null
+++ b/src/app/add-fuel-price/add-fuel-price.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddFuelPriceComponent } from './add-fuel-price.component';
+
+describe('AddFuelPriceComponent', () => {
+  let component: AddFuelPriceComponent;
+  let fixture: ComponentFixture<AddFuelPriceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddFuelPriceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddFuelPriceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-fuel-price/add-fuel-price.component.ts b/src/app/add-fuel-price/add-fuel-price.component.ts
new file mode 100644
index 0000000..76fe8c0
--- /dev/null
+++ b/src/app/add-fuel-price/add-fuel-price.component.ts
@@ -0,0 +1,155 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+declare var XLSX:any;
+@Component({
+  selector: 'app-add-fuel-price',
+  templateUrl: './add-fuel-price.component.html',
+  styleUrls: ['./add-fuel-price.component.scss']
+})
+export class AddFuelPriceComponent implements OnInit {
+  petrolPrice
+  dieselPrice
+  faileduploadDevices;
+  stateArray
+Indianstate = [
+  {state:"Andhra Pradesh",petrol:"",diesel:'',date:''},
+  {state:"Arunachal Pradesh",petrol:"",diesel:'',date:''},
+  {state:"Assam",petrol:"",diesel:'',date:''},
+  {state:"Bihar",petrol:"",diesel:'',date:''},
+  {state:"Chhattisgarh",petrol:"",diesel:'',date:''},
+  {state:"Goa",petrol:"",diesel:'',date:''},
+  {state:"Gujarat",petrol:"",diesel:'',date:''},
+  {state:"Haryana",petrol:"",diesel:'',date:''},
+  {state:"Himachal Pradesh",petrol:"",diesel:'',date:''},
+  {state:"Jammu and Kashmir",petrol:"",diesel:'',date:''},
+   {state:"Jharkhand",petrol:"",diesel:'',date:''},
+    {state:"Karnataka",petrol:"",diesel:'',date:''},
+  {state:"Kerala",petrol:"",diesel:'',date:''},
+  {state:"Madhya Pradesh",petrol:"",diesel:'',date:''},
+  {state:"Maharashtra",petrol:"",diesel:'',date:''},
+  {state:"Manipur",petrol:"",diesel:'',date:''},
+  {state:"Meghalaya",petrol:"",diesel:'',date:''},
+  {state:"Mizoram",petrol:"",diesel:'',date:''},
+  {state:"Nagaland",petrol:"",diesel:'',date:''},
+  {state:"Odisha",petrol:"",diesel:'',date:''},
+  {state:"Punjab",petrol:"",diesel:'',date:''},
+  {state:"Rajasthan",petrol:"",diesel:'',date:''},
+  {state:"Sikkim",petrol:"",diesel:'',date:''},
+  {state:"Tamil Nadu",petrol:"",diesel:'',date:''},
+  {state:"Telangana",petrol:"",diesel:'',date:''},
+   {state:"Tripura",petrol:"",diesel:'',date:''},
+    {state:"Uttarakhand",petrol:"",diesel:'',date:''},
+    {state:"Uttar Pradesh",petrol:"",diesel:'',date:''},
+  {state:"West Bengal",petrol:"",diesel:'',date:''},
+  {state:"Andaman and Nicobar Islands",petrol:"",diesel:'',date:''},
+  {state:"Chandigarh",petrol:"",diesel:'',date:''},
+  {state:"Dadra and Nagar Haveli",petrol:"",diesel:'',date:''},
+  {state:"Daman and Diu",petrol:"",diesel:'',date:''},
+  {state:"Lakshadweep",petrol:"",diesel:'',date:''},
+  {state:"Delhi",petrol:"",diesel:'',date:''},
+   {state:"Puducherry",petrol:"",diesel:'',date:''},
+]
+bsConfig: Partial<BsDatepickerConfig>;
+  date=new Date();
+  uploadJSON;
+  showErrorupload_1
+  failedFiles;
+  useridd
+  constructor( private contactService:ContactService) { }
+
+  ngOnInit() {
+    this.stateArray=this.Indianstate
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+       this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY' }, { containerClass: 'theme-dark-blue' });
+        let that = this;
+     $("#excelFile").change(function(e){
+      let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+         
+       that.uploadJSON=d.map(function(d){  
+
+         if((isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90)&&(isFinite(d.long) && Math.abs(d.long) <= 180)){
+            console.log(d.lat);
+            return d;
+          }else{
+            if(!(that.failedFiles.includes(d))){
+              console.log(d);
+              d.diesel=d.diesel.substring(0, (d.diesel.length - 4));
+              d.petrol=d.petrol.substring(0, (d.petrol.length - 4))
+                that.failedFiles.push(d)
+              }
+          }
+        
+        });
+        console.log("file=>",that.uploadJSON);
+        that.stateArray=that.failedFiles
+        console.log("Failed",that.stateArray);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+  }
+petrolChange(ev,i){
+  // console.log(ev,i);
+  
+}
+
+dieselChange(ev,i){
+  // console.log(ev,i);
+  
+}
+  
+submit(){
+  console.log(this.stateArray);
+  for(var i=0;i<this.stateArray.length;i++){
+    this.stateArray[i].date=this.date.toISOString().substr(0, 10)
+  }
+  var request={
+    data:this.stateArray,
+    date:this.date
+  }
+  console.log(request);
+  
+  this.contactService.post('/googleAddress/addFuelPrice',request).subscribe((res:any)=>{
+    console.log(res);
+    this.stateArray=this.Indianstate
+  })
+  
+  
+}
+  uploadExcel(){
+     for(var i=0;i<this.stateArray.length;i++){
+    this.stateArray[i].date=this.date.toISOString().substr(0, 10)
+  }
+    var request={
+    data:this.stateArray,
+    date:this.date
+  }
+  console.log(request);
+  
+  this.contactService.post('/googleAddress/addFuelPrice',request).subscribe((res:any)=>{
+    console.log(res);
+     this.stateArray=this.Indianstate
+  })
+  }
+}
diff --git a/src/app/add-group/add-group.component.html b/src/app/add-group/add-group.component.html
new file mode 100644
index 0000000..2830630
--- /dev/null
+++ b/src/app/add-group/add-group.component.html
@@ -0,0 +1,71 @@
+<!-- <div class="grpStyle">
+  <md-toolbar style="background: white;padding-left: 143px;background: white;
+  color: #676464;
+  font-weight: 500;">{{'Add Group' | translate}}</md-toolbar>
+  <div>
+    <input id="myInput" type="text" class="form-control" [(ngModel)]="name" placeholder="{{'Type group name' | translate}}" />
+
+  </div>
+  <div>
+    <md-select placeholder="--{{'Status' | translate}}--" [(ngModel)]="option" class="form-control">
+      <md-option *ngFor="let foodd of foodds" [value]="foodd">{{foodd}}</md-option> 
+    </md-select>
+
+  </div>
+</div>
+<div>
+</div>
+<div style="margin: 10px;">
+ <md-dialog-actions>
+   <div class="row" style="margin-left:-4px;">
+ 
+        <button md-icon-button (click)="car_status()">
+            <img class="png-icon"  src="../assets/image/car_1.png" style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+           </button>
+ 
+  
+        <button md-icon-button (click)="bike_status()" style="margin-left: 13px">
+            <img class="png-icon" src="../assets/image/bike_1.png" style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+           </button> 
+        <button md-icon-button (click)="truck_status()" style="margin-left: 13px">
+            <img class="png-icon" src="../assets/image/truck_1.png" style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+           </button>  
+   </div>
+</md-dialog-actions>
+</div>
+<div>
+<md-dialog-actions>
+  <button md-raised-button (click)="onCloseConfirm(name,option)">{{'CONFIRM' | translate}}</button>&nbsp;
+  <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+</md-dialog-actions>
+</div>
+
+<p ng-if="showError" style="text-align:center">{{errortext}}</p> -->
+
+
+<div class="card">
+  <div class="card-header">
+    <h4>Add Group</h4>
+  </div>
+  <div class="card-body">
+    <div class="row p-2">
+      <input id="myInput" type="text" class="form-control" [(ngModel)]="name"
+        placeholder="{{'Type group name' | translate}}" />
+    </div>
+
+    <div class="row p-2">
+      <md-select placeholder="--{{'Status' | translate}}--" [(ngModel)]="option" class="form-control">
+        <md-option *ngFor="let foodd of foodds" [value]="foodd">{{foodd}}</md-option>
+      </md-select>
+    </div>
+    <p ng-if="showError" style="text-align:center">{{errortext}}</p>
+  </div>
+
+  <div class="card-footer text-center">
+    <!-- <md-dialog-actions> -->
+      <button md-raised-button (click)="onCloseConfirm(name,option)">{{'CONFIRM' | translate}}</button>&nbsp;
+      <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+    <!-- </md-dialog-actions> -->
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/add-group/add-group.component.scss b/src/app/add-group/add-group.component.scss
new file mode 100644
index 0000000..261216e
--- /dev/null
+++ b/src/app/add-group/add-group.component.scss
@@ -0,0 +1,19 @@
+.grpStyle{
+    input{
+    height: 40px;
+    border-radius: 7px;
+    padding-left: 6px;
+    width: 200px;
+    }
+    
+    md-select{
+        width: 161px;
+        padding-left: 30px;
+    }
+}
+
+.iconStyle{
+    text-align: center;
+    padding: 17px 2px 17px 2px;
+
+}
\ No newline at end of file
diff --git a/src/app/add-group/add-group.component.spec.ts b/src/app/add-group/add-group.component.spec.ts
new file mode 100644
index 0000000..d377c69
--- /dev/null
+++ b/src/app/add-group/add-group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddGroupComponent } from './add-group.component';
+
+describe('AddGroupComponent', () => {
+  let component: AddGroupComponent;
+  let fixture: ComponentFixture<AddGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add-group/add-group.component.ts b/src/app/add-group/add-group.component.ts
new file mode 100644
index 0000000..2569ebf
--- /dev/null
+++ b/src/app/add-group/add-group.component.ts
@@ -0,0 +1,104 @@
+import { MdDialog } from '@angular/material';
+import { Component, OnInit } from '@angular/core';
+import {MdDialogRef} from '@angular/material';
+import {ContactService} from '../contact.service';
+
+@Component({
+  selector: 'app-add-group',
+  templateUrl: './add-group.component.html',
+  styleUrls: ['./add-group.component.scss']
+})
+export class AddGroupComponent implements OnInit {
+  be: any;
+  errortext: any;
+  name:any;
+  status:any;
+  useridd:any;
+  icon="car"
+  foodds = [
+  'Active',"InActive"
+  ];
+  option:any;
+
+  constructor(public thisDialogRef: MdDialogRef<AddGroupComponent>,private contactService:ContactService) { }
+
+  ngOnInit(){
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+
+  showError=false;
+  group_payload:any;
+  car_icon:any;
+  bike_icon:any;
+  truck_icon:any;
+
+  car_status(){
+    this.icon="car"
+  }
+
+  truck_status(){
+    this.icon="truck"
+  }
+  bike_status(){
+    this.icon="bike"
+  }
+
+  onCloseConfirm(name,option){
+    // console.log("done")
+    let a = name;
+   
+    if(option!=undefined){
+      this.be =option;
+    }else{
+      this.be=option;
+    }
+   
+ 
+    if((a==undefined)&&(this.be==undefined)){
+
+     this.showError=true;
+     this.errortext="Please provide details ";
+    }
+    if(a==undefined){
+      this.showError=true;
+     this.errortext="Please type group name";
+
+    }else if(this.be==undefined){
+      this.showError=true;
+      this.errortext="Please select status";
+
+    }else{
+
+      
+      // console.log("now call post service here and on success response close the dialog box")
+
+      this.group_payload ={
+      "uid" :this.useridd,
+      "name" : a,
+      "status" : this.be,
+      "logopath" : this.icon
+      }
+  
+       this.contactService.addGroup(this.group_payload).subscribe(   
+      res => {
+        if(res){
+            // console.log(res);
+            // console.log("Group added successfully");
+            this.thisDialogRef.close("success");
+        }  
+        // console.log(res);    
+      },
+      err=> {
+        console.log("Check your Internet Connection");
+      });
+      
+    } 
+  }
+
+  onCloseCancel(){
+    // console.log("cancel button clicked");
+    this.thisDialogRef.close('Cancel');
+  }
+ 
+
+}
diff --git a/src/app/add/add.component.html b/src/app/add/add.component.html
new file mode 100644
index 0000000..a7bd115
--- /dev/null
+++ b/src/app/add/add.component.html
@@ -0,0 +1,746 @@
+<!-- <app-all-menus></app-all-menus>
+<div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+  <md-menu #menu="mdMenu">
+
+    <a href="#">
+      <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+    <a href="#">
+      <h6>RULES<md-icon style="float:right">dock</md-icon>
+      </h6>
+    </a>
+  </md-menu>
+</div>
+
+
+<div style="float:left; width: 100%;padding-top: 6%;">
+  <p class="headStyle">{{'Customers' | translate}}</p>
+  <p *ngIf="errorMsg" style="text-align: center">{{serviceResponse}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4">
+      <button *ngIf="(dealer_Permission === true) || (superAdmin === true) || adbtn" mdTooltip="{{'Add customer' | translate}}" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)="openDialog()">
+        <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+      </button>
+      <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="cursor: pointer;color:black" title="Video tutorial"
+        target="_blank">
+        <md-icon class="material-icons" style="font-size: 30px"> theaters </md-icon>
+      </a>
+    </div>
+    <div class="col-sm-8" style="padding-left: 41%;padding-top: 1%;">
+      <input style="border-radius: 6px;
+          border: 1px solid #c7c7c7;
+          border-bottom: 0px;
+          padding: 12px;
+          width: 175px;
+          /* margin-right: 22%; */
+          height: 7px;
+          background-color: red;
+          font-size: 12px;
+          float: left;
+          margin-top: 0;
+          background: #fffcfc;" type="search" class="form-control" id="myInput" name="myInput" [(ngModel)]="myInput"
+        placeholder="{{'Customer Search' | translate}}" (ngModelChange)="searchFilter($event)" />
+      <button [disabled]="lastcall" (click)="pre()" style="margin-left: 10px;">
+        < {{'Previous' | translate}} </button> <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} >
+      </button>
+    </div>
+  </div>
+
+  
+  <div class="scrollbar" style="overflow:overlay;">
+    <table id="myTable" class="table table-striped" style="overflow-y: hidden;
+       overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'User ID' | translate}}</th>
+          <th>{{'Name' | translate}}</th>
+    
+          <th>{{'Dealer' | translate}}</th>
+          <th>{{'Email ID' | translate}}</th>
+          <th>{{'Phone Number' | translate}}</th>
+          <th>{{'Password' | translate}}</th>
+          <th>{{'Total Vehicle' | translate}}</th>
+          <th>{{'Deleted Vehicle' | translate}}</th>
+          <th>{{'Created On' | translate}}</th>
+          <th>{{'Expire On' | translate}}</th>
+          <th>{{'Token' | translate}}</th>
+          <th>{{'Last activity' | translate}}</th>
+          <th>{{'Last login' | translate}}</th>
+          <th>{{'Login type' | translate}}</th>
+          <th>{{'Documents' | translate}}</th>
+          <th>{{'Edit' | translate}}</th>
+          <th *ngIf="((custtype == true)||(superAdmin == true))">{{'Report Setting' | translate}}</th>
+          <th *ngIf="((custtype == true)||(superAdmin == true))">{{'Dashboard Column' | translate}}</th>
+          <th>{{'Delete' | translate}}</th>
+          <th>{{'Customer Status' | translate}}</th>
+          <th>{{'Customer Info' | translate}}</th>
+          <th>{{'Reset Password' | translate}}</th>
+          <th>{{'Add Point' | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+   
+        <tr *ngFor="let cust_array of custumer">
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.user_id?cust_array.user_id:'NA'}}
+          </td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.first_name}} {{cust_array.last_name}}
+          </td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.DealerDetails[0].first_name}}
+            {{cust_array.DealerDetails[0].last_name}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.email}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.phone}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.pass?cust_array.pass:'NA'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.total_vehicle}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.delDevices}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.created_on |date:'dd/MM/yyyy'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.expire_date|date:'dd/MM/yyyy'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.notificationTokenCount ?cust_array.notificationTokenCount :0}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.last_activity_on|date:'dd/MM/yyyy, h:mm:ss a'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.last_login|date:'dd/MM/yyyy, h:mm:ss a'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.login_type?cust_array.login_type:"NA"}}</td>
+          <td>
+            <p><button md-tooltip="View/Download"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="viewDocuments(cust_array)">
+                <md-icon>library_books</md-icon>
+              </button></p>
+          </td>
+          <td>
+            <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="edit_costumerDetail(cust_array)">
+                <md-icon>edit</md-icon>
+              </button></p>
+          </td>
+          <td *ngIf="((custtype == true)||(superAdmin == true))">
+            <p><button md-tooltip="Report Setting"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="reportSetting(cust_array)">
+                <md-icon>calendar_today</md-icon>
+              </button></p>
+          </td>
+          <td *ngIf="((custtype == true)||(superAdmin == true))">
+            <img src="assets/image/customised_table.png" alt="Customise Table Content" height="25" width="25" style="cursor: pointer;" title="Customise Table Content" (click)="custom_table(cust_array)">
+          </td>
+          <td>
+            <p><button md-tooltip="Delete"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="delete_costumerDetail(cust_array)">
+                <md-icon>delete</md-icon>
+              </button></p>
+          </td>
+          <td style="padding-top:20px">
+            <md-slide-toggle [(ngModel)]="cust_array.status" ngDefaultControl (change)="onChange(cust_array,$event)">
+            </md-slide-toggle>
+          </td>
+          <td style="padding-top:18px">      
+                  <i class="fas fa-sign-in-alt" style="cursor: pointer;font-size: 22px;" title="Send Login Credentials" (click)="shareUserCredential(cust_array)"></i>    
+            </td>
+            <td style="padding-top:18px">      
+              <img src="assets/image/reset_password.png" alt="reset_password" height="25" width="25" style="cursor: pointer;" title="Reset password" (click)="resetPassword(cust_array)">  
+        </td>
+        <td>
+          <i id="pointShare" style="cursor:pointer;font-size: 20px;margin-top: 12px;" class="fas fa-coins" (click)="addPoints(cust_array)"></i>
+        </td>   
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>   -->
+
+<div class="limiter">
+  <app-all-menus></app-all-menus>
+  <div id="toast">
+    <div id="desc">{{ data_descip }}</div>
+  </div>
+  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
+  <div class="container-table100">
+    <div class="wrap-table100">
+      <div class="row">
+        <div
+          class="col-6"
+          style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          "
+        >
+          <i
+            class="fas fa-plus-circle"
+            *ngIf="dealer_Permission === true || superAdmin === true || adbtn"
+            (click)="openDialog()"
+            mdTooltip="{{ 'Add customer' | translate }}"
+            style="
+              box-shadow: 3px 1px 5px 0px #b2b0ae;
+              cursor: pointer;
+              float: left;
+              font-size: 24px;
+              border-radius: 50px;
+              margin-left: 20px;
+            "
+          ></i>
+
+        <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;" class="fas fa-file-excel" (click)="downloadExcel()"></i>
+          <h4 style="display: inline-block; float: right">
+            {{ "Customers" | translate }}
+          </h4>
+        </div>
+        <div
+          class="col-6"
+          style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          "
+        >
+          <button
+            class="btn btn-default"
+            [disabled]="firstcall"
+            (click)="next()"
+            style="margin-right: 10px"
+          >
+            {{ "Next" | translate }} >>
+          </button>
+          <button
+            class="btn btn-default"
+            [disabled]="lastcall"
+            (click)="pre()"
+            style="border-right-color: #2d4262"
+          >
+            << {{ "Previous" | translate }}
+          </button>
+          <!-- <button class="btn btn-default" (click)="getAllCustomers()" style="border-right-color: #2d4262">
+            << {{ "All" | translate }} </button> -->
+          <input
+            type="search"
+            style="
+              width: 225px;
+              float: right;
+              border-radius: 0px;
+              line-height: 1.9;
+              background: #efecec;
+              box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+            "
+            class="form-control"
+            id="myInput"
+            name="myInput"
+            type="text"
+            [(ngModel)]="myInput"
+            (ngModelChange)="searchFilter($event)"
+            placeholder="{{ 'Customer Search' | translate }}"
+          />
+          <md-slide-toggle
+            *ngIf="superAdmin === true"
+            style="float: right; padding: 8px 35.1px"
+            md-tooltip="Include Dealer's Customers"
+            [(ngModel)]="allUser"
+            (change)="allUserFunction($event)"
+          ></md-slide-toggle>
+        </div>
+      </div>
+      <flash-messages class='fmsg'></flash-messages>
+      <!-- <div style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    
+         <h4 style="display: inline-block;">{{'Customers' | translate}}</h4>  
+         <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">Next >></button>
+         <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< Previous</button>
+         <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Customer Search' | translate}}" />
+       </div> -->
+      <!-- <p style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">Dealers</p> -->
+      <div class="table100 ver1">
+        <div class="table100-firstcol">
+          <table id='customerTable'>
+            <thead>
+              <tr class="row100 head">
+                <th
+                  class="cell100 column1"
+                  style="font-weight: 600; background: #add8e6"
+                >
+                  {{ "NAME" | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="row100 body" *ngFor="let cust_array of custumer">
+                <td class="cell100 column1" (click)="viewCustomerDetails(cust_array)">
+                  {{ cust_array.first_name ? cust_array.first_name : "" }}
+                  {{ cust_array.last_name ? cust_array.last_name : "" }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="wrap-table100-nextcols js-pscroll" style="height: 660px">
+          <div class="table100-nextcols">
+            <table>
+              <thead>
+                <tr class="row100 head">
+                  <th
+                    class="cell100 column2"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "USER ID" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column3"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "DEALER" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column4"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "EMAIL ID" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column5"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "PHONE" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column6"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "PASSWORD" | translate }}
+                  </th>
+                  <!-- <th
+                    class="cell100 column7"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "TOTAL VEHICLES" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column8"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "DELETED VEHICLES" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column9"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "CREATED ON" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column10"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "EXPIRES ON" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column11"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "TOKEN" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column12"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "LAST ACTIVITY" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column13"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "LAST LOGIN" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column14"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "LOGIN TYPE" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column12"
+                    style="font-weight: 600; background: #add8e6"
+                  >
+                    {{ "ALLOCATED POINTS" | translate }}
+                  </th>
+                  <th class="cell100 column15" style="
+                                        text-align: center;
+                                        font-weight: 600;
+                                        background: #add8e6;
+                                      ">
+                    {{ "KYC Status" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column15"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "DOCUMENTS" | translate }}
+                  </th> -->
+                  <th
+                    class="cell100 column16"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "EDIT" | translate }}
+                  </th>
+                  <!-- <th
+                    class="cell100 column17"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                    *ngIf="custtype == true || superAdmin == true"
+                  >
+                    {{ "USER SETTINGS" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column18"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                    *ngIf="custtype == true || superAdmin == true"
+                  >
+                    {{ "DASHBOARD COLUMNS" | translate }}
+                  </th> -->
+                  <th
+                    class="cell100 column19"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "DELETE" | translate }}
+                  </th>
+                  <!-- <th
+                    class="cell100 column20"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "CUSTOMER STATUS" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column21"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "CUSTOMER INFO" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column22"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "RESTET PASSWORD" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column23"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "SUSPEND ACCOUNT" | translate }}
+                  </th>
+                  <th
+                    class="cell100 column23"
+                    style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    "
+                  >
+                    {{ "ADMIN ALERT" | translate }}
+                  </th>
+                  <th *ngIf="custtype" class="cell100 column23" style="
+                                        text-align: center;
+                                        font-weight: 600;
+                                        background: #add8e6;
+                                      ">
+                    {{ "DEALER ALERT" | translate }}
+                  </th>
+                  <th class="cell100 column23" style="
+                                        text-align: center;
+                                        font-weight: 600;
+                                        background: #add8e6;
+                                      ">
+                    {{ "Pull Data" | translate }}
+                    </th> -->
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="row100 body" *ngFor="let cust_array of custumer">
+                  <td
+                    class="cell100 column2"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.user_id ? cust_array.user_id : "NA" }}
+                  </td>
+                  <td
+                    class="cell100 column3"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{
+                      cust_array.DealerDetails.length != 0
+                        ? cust_array.DealerDetails[0].first_name
+                        : ""
+                    }}
+                    {{
+                      cust_array.DealerDetails != 0
+                        ? cust_array.DealerDetails[0].last_name
+                        : ""
+                    }}
+                  </td>
+                  <td
+                    class="cell100 column4"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.email }}
+                  </td>
+                  <td
+                    class="cell100 column5"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ custPhone(cust_array) }}
+                  </td>
+                  <td
+                    class="cell100 column6"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.pass ? cust_array.pass : "NA" }}
+                  </td>
+                  <!-- <td
+                    class="cell100 column7"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.total_vehicle }}
+                  </td>
+                  <td
+                    class="cell100 column8"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.delDevices }}
+                  </td>
+                  <td
+                    class="cell100 column9"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.created_on | date: "dd/MM/yyyy" }}
+                  </td>
+                  <td
+                    class="cell100 column10"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.expire_date | date: "dd/MM/yyyy" }}
+                  </td>
+                  <td
+                    class="cell100 column11"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{
+                      cust_array.notificationTokenCount
+                        ? cust_array.notificationTokenCount
+                        : 0
+                    }}
+                  </td>
+                  <td
+                    class="cell100 column12"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{
+                      cust_array.last_activity_on
+                        | date: "dd/MM/yyyy, h:mm:ss a"
+                    }}
+                  </td>
+                  <td
+                    class="cell100 column13"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.last_login | date: "dd/MM/yyyy, h:mm:ss a" }}
+                  </td>
+                  <td
+                    class="cell100 column14"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{ cust_array.login_type ? cust_array.login_type : "NA" }}
+                  </td>
+                  <td
+                    class="cell100 colu mn14"
+                    style="cursor: pointer"
+                    (click)="vewdev(cust_array._id)"
+                  >
+                    {{
+                      cust_array.point_Allocated
+                        ? cust_array.point_Allocated
+                        : 0
+                    }}
+                  </td>
+                  <td class="cell100 column15" style="cursor: pointer; text-align: center">
+                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                      *ngIf="cust_array.kycStatus==undefined">Pending</button>
+                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;" *ngIf="cust_array.kycStatus=='Pending'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-success btn-sm" style="border-radius: 40px; font-size: x-small; background-color: green;" *ngIf="cust_array.kycStatus=='Approved'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;" *ngIf="cust_array.kycStatus=='Reject'">{{cust_array.kycStatus}}</button>
+                    
+                  </td>
+                  <td
+                    class="cell100 column15"
+                    style="cursor: pointer; text-align: center"
+                  >
+                    <i
+                      class="far fa-folder-open"
+                      md-tooltip="View/Download"
+                      style="cursor: pointer"
+                      (click)="viewDocuments(cust_array)"
+                    ></i>
+                  </td> -->
+                  <td class="cell100 column16" style="text-align: center">
+                    <i
+                      class="far fa-edit"
+                      md-tooltip="Edit"
+                      style="cursor: pointer; color: #08de85"
+                      (click)="edit_costumerDetail(cust_array)"
+                    ></i>
+                  </td>
+                  <!-- <td
+                    class="cell100 column17"
+                    *ngIf="custtype == true || superAdmin == true"
+                    style="text-align: center"
+                  >
+                    <i
+                      class="fas fa-sort-alpha-down"
+                      md-tooltip="User Setting"
+                      style="cursor: pointer"
+                      (click)="reportSetting(cust_array)"
+                    ></i>
+                  </td>
+                  <td
+                    class="cell100 column18"
+                    *ngIf="custtype == true || superAdmin == true"
+                    style="text-align: center"
+                  >
+                  
+                    <i
+                      class="fas fa-columns"
+                      md-tooltip="Customise Table Content"
+                      style="cursor: pointer"
+                      (click)="custom_table(cust_array)"
+                    ></i>
+                  </td> -->
+                  <td class="cell100 column19" style="text-align: center">
+                    <i
+                      class="fas fa-trash-alt"
+                      md-tooltip="Delete"
+                      style="cursor: pointer; color: #ff0707"
+                      (click)="delete_costumerDetail(cust_array)"
+                    ></i>
+                  </td>
+
+                  <!-- <td class="cell100 column20" style="text-align: center">
+                    <md-slide-toggle
+                      [(ngModel)]="cust_array.status"
+                      style="height: 0px !important"
+                      ngDefaultControl
+                      ngDefaultControl
+                      (change)="onChange(cust_array, $event)"
+                    ></md-slide-toggle>
+                  </td>
+                  <td class="cell100 column21" style="text-align: center">
+                    <i
+                      class="fas fa-sign-in-alt"
+                      title="Send Login Credentials"
+                      (click)="shareUserCredential(cust_array)"
+                    ></i>
+                  </td>
+                  <td class="cell100 column22" style="text-align: center">
+                    <i
+                      class="fas fa-unlock-alt"
+                      title="Reset Password"
+                      (click)="resetPassword(cust_array)"
+                    ></i>
+                   
+                  </td>
+
+                  <td class="cell100 column20" style="text-align: center">
+                    <md-slide-toggle
+                      [(ngModel)]="cust_array.accountSuspended"
+                      style="height: 0px !important"
+                      ngDefaultControl
+                      (change)="accountStatusOnChange(cust_array, $event)"
+                    ></md-slide-toggle>
+                  </td>
+                  <td class="column20" style="text-align: center">
+                    <md-slide-toggle
+                      [(ngModel)]="cust_array.adminAlert"
+                      style="height: 0px !important"
+                      ngDefaultControl
+                      (change)="alertStatus($event, cust_array)"
+                    ></md-slide-toggle>
+                  </td>
+                  <td *ngIf="custtype" class="column20" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="cust_array.dealerAlert" style="height: 0px !important" ngDefaultControl
+                      (change)="dealerAlert($event, cust_array)"></md-slide-toggle>
+                  </td>
+                  <td class="column20" style="text-align: center">
+                    <md-slide-toggle [checked]="cust_array.pullData?cust_array.pullData:false" style="height: 0px !important" ngDefaultControl
+                      (change)="generatePullData($event, cust_array)"></md-slide-toggle>
+                  </td> -->
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/add/add.component.scss b/src/app/add/add.component.scss
new file mode 100644
index 0000000..b7421d3
--- /dev/null
+++ b/src/app/add/add.component.scss
@@ -0,0 +1,1714 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+
+// .scrollbar
+// {
+//   width: 100%;
+
+//   height: 570px;
+//   overflow: overlay;
+
+//   overflow-x: hidden;
+// }
+
+// ::-webkit-scrollbar {
+//     // display: none;
+//     }
+//     #d:hover {
+//         color: rgb(14, 102, 18);
+
+//     }
+//     #ac{
+//         color: rgb(38, 38, 90)
+//     }
+//     #active{
+//         text-decoration-line: underline;
+//         text-decoration-color: rgb(66, 26, 245);
+//     }
+//     .switch {
+//         position: relative;
+//         display: inline-block;
+//         width: 60px;
+//         height: 34px;
+//       }
+
+//       .switch input {display:none;}
+
+//       .slider {
+//         position: absolute;
+//         cursor: pointer;
+//         top: 6px;
+//         left: 11px;
+//         right: 7px;
+//         bottom: 7px;
+//         background-color: #ccc;
+//         transition: .4s;
+//       }
+
+//       .slider:before {
+//         position: absolute;
+//         content: "";
+//         height: 11px;
+//         width: 11px;
+//         left: 2px;
+//         bottom: 5px;
+//         background-color: white;
+//         transition: .4s;
+//       }
+
+//       .headStyle{
+//         text-align: center;
+//         font-size: 22px;
+//         font-weight: 500;
+
+//         color: #6b6a6a;
+//         padding-top: 7px;
+//         margin: 0px;
+//       }
+
+//       input:checked + .slider {
+//         background-color: #2196F3;
+//       }
+
+//       input:focus + .slider {
+//         box-shadow: 0 0 1px #2196F3;
+//       }
+
+//       input:checked + .slider:before {
+//         -webkit-transform: translateX(26px);
+//         -ms-transform: translateX(26px);
+//         transform: translateX(26px);
+//       }
+
+//       /* Rounded sliders */
+//       .slider.round {
+//         border-radius: 34px;
+//       }
+
+//       .slider.round:before {
+//         border-radius: 50%;
+//       }
+
+// .sk-fading-circle {
+//     margin: 100px auto;
+//     width: 40px;
+//     height: 40px;
+//     position: relative;
+
+//   }
+
+//   .sk-fading-circle .sk-circle {
+//     width: 100%;
+//     height: 100%;
+//     position: absolute;
+//     left: 0;
+//     top: 0;
+//   }
+
+//   .sk-fading-circle .sk-circle:before {
+//     content: '';
+//     display: block;
+//     margin: 0 auto;
+//     width: 15%;
+//     height: 15%;
+//     background-color: #333;
+//     border-radius: 100%;
+//     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//             animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//   }
+//   .sk-fading-circle .sk-circle2 {
+//     -webkit-transform: rotate(30deg);
+//         -ms-transform: rotate(30deg);
+//             transform: rotate(30deg);
+//   }
+//   .sk-fading-circle .sk-circle3 {
+//     -webkit-transform: rotate(60deg);
+//         -ms-transform: rotate(60deg);
+//             transform: rotate(60deg);
+//   }
+//   .sk-fading-circle .sk-circle4 {
+//     -webkit-transform: rotate(90deg);
+//         -ms-transform: rotate(90deg);
+//             transform: rotate(90deg);
+//   }
+//   .sk-fading-circle .sk-circle5 {
+//     -webkit-transform: rotate(120deg);
+//         -ms-transform: rotate(120deg);
+//             transform: rotate(120deg);
+//   }
+//   .sk-fading-circle .sk-circle6 {
+//     -webkit-transform: rotate(150deg);
+//         -ms-transform: rotate(150deg);
+//             transform: rotate(150deg);
+//   }
+//   .sk-fading-circle .sk-circle7 {
+//     -webkit-transform: rotate(180deg);
+//         -ms-transform: rotate(180deg);
+//             transform: rotate(180deg);
+//   }
+//   .sk-fading-circle .sk-circle8 {
+//     -webkit-transform: rotate(210deg);
+//         -ms-transform: rotate(210deg);
+//             transform: rotate(210deg);
+//   }
+//   .sk-fading-circle .sk-circle9 {
+//     -webkit-transform: rotate(240deg);
+//         -ms-transform: rotate(240deg);
+//             transform: rotate(240deg);
+//   }
+//   .sk-fading-circle .sk-circle10 {
+//     -webkit-transform: rotate(270deg);
+//         -ms-transform: rotate(270deg);
+//             transform: rotate(270deg);
+//   }
+//   .sk-fading-circle .sk-circle11 {
+//     -webkit-transform: rotate(300deg);
+//         -ms-transform: rotate(300deg);
+//             transform: rotate(300deg);
+//   }
+//   .sk-fading-circle .sk-circle12 {
+//     -webkit-transform: rotate(330deg);
+//         -ms-transform: rotate(330deg);
+//             transform: rotate(330deg);
+//   }
+//   .sk-fading-circle .sk-circle2:before {
+//     -webkit-animation-delay: -1.1s;
+//             animation-delay: -1.1s;
+//   }
+//   .sk-fading-circle .sk-circle3:before {
+//     -webkit-animation-delay: -1s;
+//             animation-delay: -1s;
+//   }
+//   .sk-fading-circle .sk-circle4:before {
+//     -webkit-animation-delay: -0.9s;
+//             animation-delay: -0.9s;
+//   }
+//   .sk-fading-circle .sk-circle5:before {
+//     -webkit-animation-delay: -0.8s;
+//             animation-delay: -0.8s;
+//   }
+//   .sk-fading-circle .sk-circle6:before {
+//     -webkit-animation-delay: -0.7s;
+//             animation-delay: -0.7s;
+//   }
+//   .sk-fading-circle .sk-circle7:before {
+//     -webkit-animation-delay: -0.6s;
+//             animation-delay: -0.6s;
+//   }
+//   .sk-fading-circle .sk-circle8:before {
+//     -webkit-animation-delay: -0.5s;
+//             animation-delay: -0.5s;
+//   }
+//   .sk-fading-circle .sk-circle9:before {
+//     -webkit-animation-delay: -0.4s;
+//             animation-delay: -0.4s;
+//   }
+//   .sk-fading-circle .sk-circle10:before {
+//     -webkit-animation-delay: -0.3s;
+//             animation-delay: -0.3s;
+//   }
+//   .sk-fading-circle .sk-circle11:before {
+//     -webkit-animation-delay: -0.2s;
+//             animation-delay: -0.2s;
+//   }
+//   .sk-fading-circle .sk-circle12:before {
+//     -webkit-animation-delay: -0.1s;
+//             animation-delay: -0.1s;
+//   }
+
+//   @-webkit-keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; }
+//   }
+
+//   @keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; }
+//   }
+
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+//   .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 17%;
+//    /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+
+// }
+// #c1 {
+//     float:left;
+
+// }
+
+// body {margin:0}
+
+// .icon-bar {
+//     width: 17%;
+// /*     background-color: #555; */
+// background-color: #18262F;
+//     margin-top: -9px;
+//     height:100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+
+//     width: 299px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// .iphone {
+//     width: 201px;
+//     height: 378px;
+//     background: #f9f7f9;
+//     border: 5px solid #c1bfc1;
+//     border-radius: 45px;
+//     opacity: 0.8;
+// }
+// .highlight {
+//     width: 185px;
+//     height: 366px;
+//     border: 3px solid #fff;
+//     border-radius: 45px;
+//     position: relative;
+//     z-index: 10;
+//     top: -748px;
+//     left: 10px;
+// }
+// .circle {
+//     width: 7px;
+//     height: 7px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -370px;
+//     left: 92px;
+// }
+// .camera {
+//     width: 10px;
+//     height: 10px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -376px;
+//     left: 66px;
+// }
+// .speaker {
+//     width: 59px;
+//     height: 3px;
+//     background: #333;
+//     border-radius: 5px;
+//     position: relative;
+//     top: -372px;
+//     left: 73px;
+// }
+// .screen {
+//     width: 166px;
+//     height: 255px;
+//     border: 3px solid #333;
+//     border-radius: 5px;
+//     position: relative;
+//     left: 18px;
+//     top: -365px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// }
+// .home1 {
+//     width: 47px;
+//     height: 47px;
+//     background: #fff;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -353px;
+//     left: 79px;
+//     z-index: 2;
+// }
+// .home2 {
+//     width: 52px;
+//     height: 52px;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -403px;
+//         left: 77px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// }
+// #c2{
+//     //background:green;
+//     float:right;
+// }
+// #c1, #c2 {
+//     width: 33%;
+//     //background: rebeccapurple
+// }
+
+// #c3 {
+//     width: auto;
+//      width:34%;
+//     // background: red
+// }
+// .off{
+//     margin: auto;
+//     width: 60%;
+//     top:70%;
+//     padding: 10px;
+//     margin-right:30%
+
+// }
+// .newspaper {
+//     -webkit-column-count: 2; /* Chrome, Safari, Opera */
+//     -moz-column-count: 2; /* Firefox */
+//     column-count: 2;
+//     -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+//     -moz-column-gap: 40px; /* Firefox */
+//     column-gap: 40px;
+//     align-content:left;
+//     text-align: left;
+// }
+// #demo {
+//     margin: 30px 0 50px 0;
+//     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+
+// }
+
+// #demo .wrapper {
+//     display: inline-block;
+//     width: 180px;
+//     margin: 0 10px 0 0;
+//     height: 20px;
+//     position: relative;
+
+// }
+
+// #demo .parent {
+//     height: 100%;
+//     width: 100%;
+//     display: block;
+//     cursor: pointer;
+//     line-height: 30px;
+//     height: 30px;
+//     border-radius: 5px;
+//     background: #F9F9F9;
+//     border: 1px solid #AAA;
+//     border-bottom: 1px solid #777;
+//     color: #282D31;
+//     font-weight: bold;
+//     z-index: 2;
+//     position: relative;
+//     -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+//     -webkit-transition-delay: .8s;
+//     text-align: center;
+// }
+
+// #demo .parent:hover,
+// #demo .content:hover ~ .parent {
+//     background: #fff;
+//     -webkit-transition-delay: 0s, 0s, 0s;
+// }
+
+// #demo .content:hover ~ .parent {
+//     border-bottom-left-radius: 0;
+//     border-bottom-right-radius: 0;
+//     z-index: 0;
+// }
+
+// #demo .content {
+//     position: absolute;
+//     top: 0;
+//     display: block;
+//     z-index: 1;
+//     height: 0;
+//     width: 180px;
+//     padding-top: 30px;
+//     -webkit-transition: height .5s ease;
+//     -webkit-transition-delay: .4s;
+//     border: 1px solid #777;
+//     border-radius: 5px;
+//     box-shadow: 0 1px 2px rgba(0,0,0,.4);
+// }
+
+// #demo .wrapper:active .content {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+// #demo .content:hover {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+// #demo .content ul {
+//     background: #fff;
+//     margin: 0;
+//     padding: 0;
+//     overflow: hidden;
+//     height: 100%;
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+
+// #demo .content ul a {
+//     text-decoration: none;
+// }
+
+// #demo .content li:hover {
+//     background: #eee;
+//     color: #333;
+// }
+
+// #demo .content li {
+//     list-style: none;
+//     text-align: left;
+//     color: #888;
+//     font-size: 14px;
+//     line-height: 30px;
+//     height: 30px;
+//     padding-left: 10px;
+//     border-top: 1px solid #ccc;
+// }
+
+// #demo .content li:last-of-type {
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+// .customClass {
+//     background-color: #dd3;
+//     border-radius: 5px;
+//     margin:5px;
+//     width: 500px;
+// }
+
+// .customClass .img-ul-upload {
+//     background-color: #000 !important;
+// }
+
+// .customClass .img-ul-clear {
+//     background-color: #B819BB !important;
+// }
+
+// .customClass .img-ul-drag-box-msg {
+//     color: purple !important;
+// }
+
+// .customClass .img-ul-container {
+//     background-color: #FF6CAD !important;
+// }
+// .img-ul-file-upload[_ngcontent-c6] {
+//     padding: 16px;
+//     height: 201px !important;
+// }
+// .weekDays-selector input {
+//     display: none!important;
+//   }
+
+//   .weekDays-selector input[type=checkbox] + label {
+//     display: inline-block;
+//     border-radius: 6px;
+//     background: #dddddd;
+//     height: 40px;
+//     width: 34.2px;
+//     margin-right: 3px;
+//     line-height: 40px;
+//     text-align: center;
+//     cursor: pointer;
+//   }
+
+//   .weekDays-selector input[type=checkbox]:checked + label {
+//     background: #2AD705;
+//     color: #ffffff;
+//   }
+//   @media screen and (max-width: 900px) {
+//         .icon-bar{
+//             display: none;
+
+//         }
+//         .sch{
+//             display: none;
+//         }
+//         .first{
+//             width:1%!important;
+//         }
+//         .second{
+//             margin-left: 8px!important;
+//         }
+//         .small{
+//             display: block!important;
+//         }
+//         .image{
+//             display: none;
+//         }
+//         .schlar{
+//             display: block!important;
+//         }
+//   }
+
+//   @media screen and (min-width: 900px) {
+// .schlar{
+//     display: none;
+// }
+
+//   }
+//   .small{
+//       display: none;
+//   }
+//   .first{
+//     float:left;
+//     width: 16%;
+//     height:86vh;
+//     overflow-y: hidden;
+//     overflow-x: hidden;
+//     margin-right: 5px
+//   }
+//   .second{
+//     width: 88%;
+//     height:86vh;
+//     margin-left:171px;
+//   }
+//  .mat-dialog-container {
+//     max-width: none !important;
+// }
+// .sch{
+
+// }
+// .schlar{
+
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// .expansion-panel__content{
+//     margin-left: 0% !important;
+// }
+
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+//     position: absolute; z-index: 99;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+
+// .button2 {background-color: #008CBA;}
+// .ngx-picker--btn {
+//     color: #000;
+//     background-color: transparent;
+//     border: none;
+//     padding: 1em;
+//     font-size: 1em; }
+//     .ngx-picker--btn__selected {
+//       background-color: #eee; }
+//     .ngx-picker--btn:hover {
+//       transition: .25s ease;
+//       background-color: #eee;
+//       cursor: pointer; }
+//     .ngx-picker--btn:focus {
+//       outline-color: transparent; }
+
+//   .ngx-picker--btn__month:hover {
+//     border-top-left-radius: 0.2em; }
+
+//   .ngx-picker--btn__done:hover {
+//     border-bottom-right-radius: 0.2em; }
+
+//   .ngx-picker--btn__now:hover {
+//     border-bottom-left-radius: 0.2em; }
+
+//   .ngx-picker--btn__next:hover {
+//     border-top-right-radius: 0.2em; }
+
+//   .calendar {
+//     position: absolute;
+//     background-color: #e6e6e6;
+//     max-width: 16em;
+//     min-width: 16em;
+//     font-size: 16px;
+//     font-family: "Arial", sans-serif;
+//     border-radius: 0.2em;
+//     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+
+//   .calendar--previous-and-next {
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     display: flex;
+//     justify-content: flex-end; }
+
+//   .calendar--footer {
+//     display: flex;
+//     justify-content: space-between;
+//     background-color: #e6e6e6;
+//     padding: 0;
+//     border-radius: 0.2em; }
+
+//   .calendar--years-select,
+//   .calendar--months-select {
+//     overflow-y: auto;
+//     overflow-x: hidden;
+//     max-height: 14.85em;
+//     background-color: #fff;
+//     width: 100%; }
+
+//   .calendar--year,
+//   .calendar--month {
+//     display: block;
+//     padding: .5em 1em;
+//     width: 100%;
+//     overflow: hidden;
+//     color: #000; }
+//     .calendar--year__selected,
+//     .calendar--month__selected {
+//       color: #000;
+//       font-weight: bold;
+//       background-color: #eee; }
+//     .calendar--year:hover,
+//     .calendar--month:hover {
+//       cursor: pointer;
+//       background-color: #eee;
+//       font-weight: 400;
+//       color: #000; }
+
+//   .calendar--days-of-week {
+//     display: flex;
+//     justify-content: space-around;
+//     background-color: #eee; }
+
+//   .calendar--day-of-week {
+//     position: relative;
+//     padding: .5em;
+//     text-align: center;
+//     text-transform: uppercase;
+//     color: #000;
+//     font-size: .9em; }
+
+//   .calendar--days-select {
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: space-between;
+//     background-color: #fff; }
+
+//   .calendar--day {
+//     text-align: center;
+//     width: 1.285em;
+//     padding: .5em;
+//     font-weight: 500;
+//     color: #000; }
+//     .calendar--day__muted {
+//       color: #999; }
+//     .calendar--day__selected {
+//       background-color: #eee;
+//       color: #000; }
+//     .calendar--day:hover {
+//       cursor: pointer;
+//       color: #000;
+//       background-color: #eee; }
+
+//   .ngx-picker {
+//     display: flex;
+//     position: relative; }
+//     .ngx-picker .calendar {
+//       position: absolute;
+//       left: 0;
+//       top: 2.5em;
+//       z-index: 3; }
+
+//   .time-picker {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #e6e6e6; }
+
+//   .time--values {
+//     display: flex;
+//     justify-content: space-between;
+//     flex-direction: row;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #eee; }
+
+//   .time--value {
+//     width: 2.66em;
+//     font-size: 1em;
+//     padding: .5em 0;
+//     text-align: center;
+//     color: #000; }
+//     .time--value__selected {
+//       color: #000;
+//       background-color: #e6e6e6; }
+//     .time--value:hover {
+//       transition: .25s ease;
+//       cursor: pointer;
+//       background-color: #e6e6e6; }
+
+//   [hidden] {
+//     display: none !important; }
+//     #c11 {
+//         width: 25%;
+//         float:left
+//     }
+//     #c22{
+//         width: 25%;
+//         float:left
+//     }
+//     #c33 {
+//         width: 25%;
+//         float:left
+
+//     }
+//     #c44{
+//         width: 25%;
+//         float:left
+//     }
+//     #c111 {
+//         width: 50%;
+//         float:left
+//     }
+//     #c222{
+//         width: 45%;
+//         float:left
+//     }
+//     #c333 {
+//         width: 5%;
+//         float:left
+
+//     }
+//     #myTable {
+//         border-collapse: collapse;
+//         width: 100%;
+//         border: 1px solid #ddd;
+//         font-size: 12px;
+//       }
+
+//       #myTable th, #myTable td {
+//         text-align: left;
+//         padding: 12px;
+//       }
+
+//       #myTable tr {
+//         border-bottom: 1px solid #ddd;
+//       }
+
+//     //   #myTable tr.header, #myTable tr:hover {
+//     //     background-color: #f1f1f1;
+//     //   }
+//       * {
+//         box-sizing: border-box;
+//       }
+//       .width{
+//         width: 100%;
+//     }
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+// /deep/ .mat-menu-panel.test{
+
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+
+//     a{
+//       display: block;
+//     padding: 9px 10px;
+//     margin: 0;
+//     border-bottom: 1px solid #999;
+//     }
+// }
+
+// /deep/ .mat-menu-panel.test_1{
+
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+//     margin-top:48px;
+// }
+
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+// #myInput {
+//     border-radius: 15px;
+//     /* border: 2px solid #18262F; */
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// }
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+
+//   /* Animation */
+
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+
+// css style
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+// ../fonts/roboto/Roboto-Regular.ttf
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Regular.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Medium.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Bold.ttf');
+// }
+
+/*//////////////////////////////////////////////////////////////////
+[ RESTYLE TAG ]*/
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+  margin: 0px;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+  outline: none !important;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+p {
+  margin: 0px;
+}
+
+ul,
+li {
+  margin: 0px;
+  list-style-type: none;
+}
+
+/* ------------------------------------ */
+input {
+  display: block;
+  outline: none;
+  border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus,
+input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+  outline: none !important;
+  border: none;
+  background: transparent;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+iframe {
+  border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+.table100 .ps__rail-x {
+  z-index: 1010;
+  height: 6px;
+  background-color: transparent;
+  opacity: 1 !important;
+  bottom: 10px;
+}
+
+.table100 .ps__rail-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #e6e6e6;
+  height: 100%;
+  width: calc(100% - 30px);
+  left: 15px;
+  top: 0px;
+}
+
+.table100 .ps__rail-x .ps__thumb-x {
+  height: 100%;
+  bottom: 0;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-x .ps__thumb-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #b3b3b3;
+  height: 100%;
+  width: calc(100% - 30px);
+  top: 0;
+  left: 15px;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  // background: #fa71cd;
+  background: #efecec;
+  // background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -o-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: linear-gradient(bottom, #c471f5, #fa71cd);
+}
+
+.container-table100 {
+  max-height: 100vh;
+  // max-width: 1366px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  // padding: 33px 100px;
+  padding: 55px 20px 0px 20px;
+}
+
+.wrap-table100 {
+  width: 100%;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  background-color: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+th,
+td {
+  font-weight: unset;
+  padding-right: 10px;
+}
+
+.column1 {
+  width: 100%;
+  padding-left: 40px;
+}
+
+.column2 {
+  width: 225px;
+  padding-left: 55px;
+  white-space: nowrap;
+
+  overflow-x: overlay;
+}
+
+.column3 {
+  // width: 205px;
+  width: 265px;
+  padding-left: 20px;
+}
+
+.column4 {
+  width: 300px;
+}
+
+.column5 {
+  width: 235px;
+}
+
+.column6 {
+  width: 170px;
+}
+
+.column7 {
+  // width: 330px;
+  width: 200px;
+}
+
+.column8 {
+  // width: 305px;
+  width: 210px;
+}
+
+.column9 {
+  width: 200px;
+}
+
+.column10 {
+  width: 200px;
+}
+
+.column11 {
+  // width: 200px;
+  width: 155px;
+}
+
+.column12 {
+  width: 225px;
+}
+
+.column13 {
+  width: 225px;
+}
+
+.column14 {
+  // width: 200px;
+  width: 150px;
+}
+.column15 {
+  // width: 200px;
+  width: 150px;
+}
+.column16 {
+  // width: 200px;
+  width: 150px;
+}
+.column17 {
+  // width: 200px;
+  width: 150px;
+}
+.column18 {
+  // width: 200px;
+  width: 175px;
+}
+.column19 {
+  // width: 200px;
+  width: 150px;
+}
+
+.column20 {
+  // width: 200px;
+  width: 150px;
+}
+.column21 {
+  // width: 200px;
+  width: 150px;
+}
+.column22 {
+  // width: 200px;
+  width: 150px;
+}
+.column23 {
+  // width: 200px;
+  width: 150px;
+}
+
+.table100 th {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.table100 td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/*==================================================================
+[ Fix col ]*/
+.table100 {
+  width: 100%;
+  position: relative;
+}
+
+.table100-firstcol {
+  background-color: #fff;
+  position: absolute;
+  z-index: 1000;
+  width: 270px;
+  top: 0;
+  left: 0;
+}
+
+.table100-firstcol table {
+  background-color: #fff;
+}
+
+.wrap-table100-nextcols {
+  width: 100%;
+  overflow: auto;
+  padding-left: 270px;
+  padding-bottom: 28px;
+}
+
+.table100-nextcols table {
+  table-layout: fixed;
+}
+
+.shadow-table100-firstcol {
+  box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.table100-firstcol table {
+  background-color: transparent;
+}
+
+/*==================================================================
+[ Ver1 ]*/
+
+.table100.ver1 th {
+  font-family: Roboto;
+  font-size: 14px;
+  height: 80px;
+  // color: #333333;
+  color: white;
+  // line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.table100.ver1 td {
+  font-family: Roboto;
+  font-size: 15px;
+  // line-height: 1.4;
+}
+
+.table100.ver1 .table100-firstcol td {
+  color: #666666;
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.table100.ver1 .table100-nextcols td {
+  color: #999999;
+}
+
+.table100.ver1 tr {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+// .btn-default {
+//   @include btn-variant(#546e7a, #90a4ae, #78909c, #cfd8dc, #eceff1, #b0bec5, #455a64);
+
+// }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  float: right;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  whitespace: nowrap;
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+  font-size: 12px;
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #add8e6;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.mat-tab-body-content {
+  overflow: hidden !important;
+}
+.switch-toggle {
+  float: left;
+  background: #242729;
+}
+.switch-toggle input {
+  position: absolute;
+  opacity: 0;
+}
+.switch-toggle input + label {
+  padding: 7px;
+  float: left;
+  color: #fff;
+  cursor: pointer;
+}
+.switch-toggle input:checked + label {
+  background: green;
+}
diff --git a/src/app/add/add.component.spec.ts b/src/app/add/add.component.spec.ts
new file mode 100644
index 0000000..1cbb46c
--- /dev/null
+++ b/src/app/add/add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddComponent } from './add.component';
+
+describe('AddComponent', () => {
+  let component: AddComponent;
+  let fixture: ComponentFixture<AddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/add.component.ts b/src/app/add/add.component.ts
new file mode 100644
index 0000000..f462fbe
--- /dev/null
+++ b/src/app/add/add.component.ts
@@ -0,0 +1,1153 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { ResponseOptions, Response } from '@angular/http';
+import { Contact } from '../contact';
+import { ContactService } from '../contact.service';
+import { Otp } from '../otp';
+import {MdSnackBar} from '@angular/material';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { DialogContentExampleDialogComponent } from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+import { AddCustComponent } from '../add-cust/add-cust.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { Observable } from 'rxjs/Rx';
+import { EditCostumerComponent } from '../edit-costumer/edit-costumer.component';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import { ReportSettingComponent } from './report-setting/report-setting.component';
+import { environment } from '../../environments/environment';
+import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { TranslateService } from 'ng2-translate';
+import { DashboardContentComponent } from './dashboard-content/dashboard-content.component';
+import { PointShareComponent } from '../point-share/point-share.component';
+import { ShowPullDataLinkComponent } from './show-pull-data-link/show-pull-data-link.component';
+declare var swal: any;
+import * as XLSX from 'xlsx';
+import { ViewCustomerDetailsComponent } from './view-customer-details/view-customer-details.component';
+@Component({
+  selector: 'app-add',
+  templateUrl: './add.component.html',
+  styleUrls: ['./add.component.scss'],
+  providers: [ContactService, SidebarComponent]
+})
+export class AddComponent implements OnInit {
+  modelChanged: Subject<string> = new Subject<string>();
+  kycStatus=[{Name:'Approved',value:'Approved'},{Name:'Reject',value:'Reject'},{Name:'Pending',value:'Pending'}]
+  dealerChk: boolean = false;
+  ev: any;
+  show1: boolean = false;
+  show2: boolean = true;
+  show3: boolean = false;
+  first_name: any;
+  logoutbut: boolean;
+  last_name: any;
+  passwordd: any;
+  org_name: any;
+  allUser:boolean=false;
+  emaill: any;
+  phone: any;
+  executed: any;
+  $event2: any;
+  dealer: any;
+  contacts: Contact[] = [];
+  contact: Contact;
+  login1: any;
+  mess2: any;
+  mess: any;
+  otp: any;
+  switchVal: any;
+  str: boolean = false;
+  password2: any;
+  cust_load: any;
+  errmsg: boolean =true;
+  serviceResponse: string;
+  errorMsg: boolean;
+  showNav: boolean =false;
+  url: any;
+  dealer_Permission: any;
+  adbtn: string;
+  report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  report_speed() {
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  stre() {
+    this.str = true;
+  }
+  stren() {
+    this.str = false;
+  }
+  addcus() {
+    this.router.navigateByUrl("add");
+  }
+
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+
+
+  clear() {
+    this.first_name = ' '
+    this.last_name = ' '
+    this.emaill = null
+    this.phone = null
+  }
+  before: any;
+  emmnerr: any;
+  Load: any
+  $event: any;
+  openDialog() {
+  
+        let dialogRef = this.dialog.open(AddCustComponent, {
+          width: '800px',
+        //  height: '600px', 
+    
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          // console.log(result);
+          if (result == "succ") {
+            this.tost1("succ");
+            this.ngOnInit();
+    
+          }
+        });
+  }
+
+
+
+  constructor(private contactService: ContactService, private sidebar: SidebarComponent, public snackBar: MdSnackBar, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog, public translate: TranslateService) {
+    this.modelChanged
+      .debounceTime(1000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+        // console.log('debounce')
+        // this.dealerDetail();
+        this.showDemoVideo()
+        this.ngOnInit();
+      });
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  data_descip: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i, td1;
+      input = document.getElementById("myInput");
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[1];
+        td1 = tr[i].getElementsByTagName("td")[0]
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+
+  tost1(divid) {
+    if (divid == "EmM") {
+      this.data_descip = this.emmnerr.split(":")[1]
+      launch_toast();
+    }
+    else if (divid == "succ") {
+      this.data_descip = "Custumer Successfully Added"
+      launch_toast();
+    }else if(divid == "reportPref"){
+      this.data_descip = "Report Preference updated !!!"
+      launch_toast();
+    }else if(divid == "password_changed"){
+      this.data_descip = "Password updated !!!";
+      launch_toast();
+    }else if(divid == "alertset"){
+      this.data_descip = "Alert preference updated !!!";
+      launch_toast();
+    }else if(divid=="kyc"){
+       this.data_descip = "KYC Status updated !!!";
+      launch_toast();
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+  }
+
+  valclear() {
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 2000 });
+
+  }
+
+  click1(event) {
+    this.show2 = false;
+    this.show3 = true;
+    if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+
+    else
+      event.preventDefault();
+  }
+  click2(event2) {
+    this.show2 = true;
+    this.show3 = false;
+
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+  devicess: any;
+  final: any;
+  /*  getdev(){
+     let foods = []
+     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+         
+       data => {
+         this.devicess = data 
+   
+         let swap;
+         for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+           for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+             if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+                 swap = this.devicess.devices[c];
+                 this.devicess.devices[c] = this.devicess.devices[c+1];
+                 this.devicess.devices[c+1] = swap;
+             }
+           }
+         }
+   
+         this.final = this.devicess.devices
+         
+        for(let i=0;i<this.devicess.devices.length;i++){
+        
+          if(this.devicess.devices[i].type_of_device =="Tracker"){
+            let a ={
+             value : this.devicess.devices[i].Device_Name,
+             viewValue:this.devicess.devices[i].Device_Name
+            }
+            foods.push(a);
+          }
+       
+        }
+   
+       });
+   } */
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  run() {
+
+  }
+
+  devicesss: any;
+  subscription: any;
+  timer: any;
+  messageSuccess: any = true;
+  selectedlanguage :any; 
+
+  vewdev(id) {
+    console.log(id);
+    localStorage.setItem("custId", id);
+    localStorage.removeItem("in1");
+    this.selectedlanguage = localStorage.getItem('appLang'); 
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    this.contactService.getcustToken(id).subscribe(
+      data => {
+        this.devicesss = data
+        // console.log(this.devicesss)
+
+        window.localStorage['Dealer_token'] = window.localStorage['token']
+        window.localStorage['token'] = this.devicesss.custumer_token;
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        window.localStorage['Custumer'] = 'ON';
+        localStorage.setItem('superadmin', "ON");
+     
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        // localStorage.setItem('Dealer',"OFF");
+        // localStorage.setItem('superadmin',"OFF")
+        console.log('this.superAdmin',this.superAdmin);
+        debugger;
+        if(this.superAdmin === true){
+          localStorage.setItem('supAdminAcessToCust', 'true' ); 
+        }
+        if (window.localStorage['DataLoaded'] = 'True') {
+          let dlrStatus = "true";
+
+          localStorage.setItem("dlrchk", dlrStatus)
+
+          this.router.navigateByUrl("const?_status=" + "OK");
+
+          // console.log('testing', this.useridd);
+        }
+
+
+      });
+  }
+
+
+
+
+
+  myInput: any;
+  myaccount() {
+
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '680px',
+
+      data: {}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      if (result == "succ") {
+        // console.log("Updated")
+      }
+
+    });
+  }
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+    this.router.navigateByUrl("location");
+
+  }
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    this.router.navigateByUrl("dashboard");
+
+  }
+
+  route_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  ideal() {
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  soon() {
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  }
+  new() {
+    this.router.navigateByUrl("new");
+
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+
+  vehicleRoute() {
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+  }
+
+
+  notifications() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  custumer: any=[];
+  mb: any;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      console.log('whatishere=>',this.superAdmin);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).cust_add_permission;
+
+    // console.log(test);
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.adbtn = localStorage.getItem("dlrchk");
+    localStorage.setItem("dlrchk", this.custtype);
+    //  this.getdev();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+ 
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+      history.pushState(null, null, document.URL);
+    });
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.getCustomer();
+  }
+
+
+  onChange(cust, ev) {
+ 
+    let status = ev;
+    // console.log(status.checked);
+
+    let cust_status = cust;
+    let cust_id = cust._id;
+    let cust_activity = cust.status
+    // console.log(cust_activity);
+
+
+    this.cust_load = {
+      "uId": cust_id,
+      "loggedIn_id": this.useridd,
+      "status": status.checked
+    }
+    // console.log(cust_id);
+
+
+    console.log(this.cust_load);
+    this.contactService.custStatus(this.cust_load)
+      .subscribe(res => {
+        let a = res;
+        // console.log(a);
+        // console.log("Status changed");
+      })
+  }
+
+  getCustomer(){
+     this.Load = true;  
+    this.contactService.getCustumer(this.useridd, this.skip, this.limit,this.myInput,this.allUser).subscribe(  
+      data => {
+        this.Load = false;
+        this.custumer=[];
+        this.custumer = data;
+        for(var i=0;i<this.custumer.length;i++){
+          if(this.custumer[i].adminAlert == undefined){
+            this.custumer[i]['adminAlert'] = false;
+          }
+          if(this.custumer[i].dealerAlert == undefined){
+            this.custumer[i]['dealerAlert'] = false;
+          }
+        }
+        console.log("custDetail=>", this.custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        this.custumer=[];
+        this.firstcall = true;
+        this.lastcall = false;
+      });
+  }
+
+  
+
+
+  edit_costumerDetail(cust_payload) {
+    // console.log("edit component method!!!");
+    console.log("cust_payload",cust_payload);
+    cust_payload.ID = 'edit';
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '700px',
+      // height: '600px',
+      data: { dealer_payload: cust_payload }
+    });
+
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // console.log(result);
+      if (result == "success") {
+        this.ngOnInit();
+      }
+    });
+  }
+
+  delete_costumerDetail(cust_payload){
+
+    var  that =this;
+    console.log(cust_payload);
+    cust_payload.ID = 'delete';
+    cust_payload['page'] = 'cust';
+
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '500px',
+      height: '600px',
+      data: { dealer_payload: cust_payload }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+      // console.log(result);
+      if (result == "yes") {
+        // console.log("DealerId=>",dealerDelete.dealer_id)
+        var deletePayload = {
+          'userId' : cust_payload._id,
+          'deleteuser' : true
+        }
+
+        console.log(deletePayload);
+        this.contactService.deleteCostumer(deletePayload)
+          .subscribe(res=>{
+            console.log(res);
+            this.serviceResponse = "User Deleted"; 
+            this.errorMsg =true;
+            this.ngOnInit();
+           var success =  setTimeout(function(){
+             clearInterval(success);
+              that.errorMsg = false; 
+           },5000)
+            
+          },err=>{
+            // console.log(err.status);
+            if(err.status==401){
+              var msg=JSON.parse(err._body);
+              // console.log(msg);
+              
+              this._flashMessagesService.show(msg.message, { cssClass: 'alert-warning', timeout: 2000 });
+            }
+            this.serviceResponse = "Please try after sometime";
+            var error =  setTimeout(function(){
+              clearInterval(error);
+               that.errorMsg = false; 
+            },5000)
+          })
+
+      }
+
+      if (result == "no") {
+        console.log(result);
+      }
+
+    });
+
+
+
+  }
+
+  skip: number = 1;
+  limit: number = 10;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    this.ngOnInit();
+    // this.sidebarData();
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 1) {
+      this.skip -= 1;
+      this.lastcall = false;
+      this.firstcall = false;
+      this.ngOnInit();
+      // this.sidebarData();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+  searchFilter(text: string) {
+    this.modelChanged.next(text);
+    // this.myInput;
+    // console.log(this.myInput);
+    // this.sidebarData()
+
+  }
+
+  viewDocuments(docs){
+    console.log("Documents=>", docs);
+    var  that =this;
+    docs.ID = 'viewDoc';
+    console.log(docs);
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '900px', 
+      data: { dealer_payload: docs }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "yes") {
+        this.getCustomer()
+      }
+
+      if (result == "no") {
+     
+      }
+      if(result == 'imageupdated'){
+        swal(
+          'Updated',
+          'Documents has been Updated.',
+          'success'
+        ) 
+          this.ngOnInit();
+      }
+    });
+  }
+
+  reportSetting(custObj){
+    console.log("custObj=>" , custObj);
+   var custId = custObj._id;
+    let dialogRef = this.dialog.open(ReportSettingComponent, {
+      width: '800px',
+      data : custId
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "updated") {
+        this.tost1("reportPref");
+        this.ngOnInit();
+
+      }
+    });
+
+  }
+
+
+  
+  showMenu = environment.showLandingpageMenu;
+  showDemoVideo(){
+    let split1 = document.URL.split('//')[1];
+    console.log(split1,document);
+    let split2 = split1.split('/')[0];
+    let splitForStyle = split1.split('/')[1];
+    this.url =  split2;
+    console.log("split2",this.url);
+   
+    
+      for(var i = 0; i <this.showMenu.length;i++){
+        if (this.url == 'www.oneqlik.in') {
+          this.showNav = true;
+            return;
+        } else {
+          this.showNav = false;
+        }
+      }
+  
+  }
+
+  shareUserCredential(costDetails){
+    console.log('costDetails',costDetails);
+    var cost_id = costDetails._id;
+    this.contactService.shareCostumerInfo(cost_id).subscribe(res=>{
+      console.log(res);
+      let message =res.message;
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+      });
+   
+    },err=>{
+      console.log(err);
+    })
+
+    
+  }
+
+  resetPassword(cust_array){
+    console.log("Inside reset",cust_array);
+    let dialogRef = this.dialog.open(ResetPasswordComponent, {
+      width: '400px',
+      data : cust_array
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "succ") {
+        this.tost1("password_changed");
+        this.ngOnInit();
+      }
+
+      if (result == "close") {
+        // this.tost1("succ");
+        // this.ngOnInit();
+      }
+    });
+    
+  }
+
+
+  custom_table(cust_arr){
+    console.log(cust_arr);
+    let dialogRef = this.dialog.open(DashboardContentComponent, {
+      width: '500px',
+      data : cust_arr
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "updated") {
+        this.tost1("Table Content Customised");
+        this.ngOnInit();
+      }
+
+      if (result == "close") {
+      
+      }
+    });
+
+  }
+
+
+  addPoints(data){
+    let dialogRef = this.dialog.open(PointShareComponent, {
+      width: '300px',     
+      data: {"userInfo":data}                      
+    });
+
+    dialogRef.afterClosed().subscribe(result => {   
+      // console.log(result);
+      if(result == 'added'){
+
+        this.data_descip =  "Point Added";
+        this.ngOnInit();
+        launch_toast();   
+
+      }
+       
+         function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }  
+    })  
+  }
+
+  
+  custPhone(dlr){
+  var dphn = '';
+  if(dlr.std_code != undefined){
+     dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+     return dphn ; 
+  }else{
+     dphn = dlr.phone ; 
+    return dphn ; 
+  }
+}
+
+accountStatus:boolean = true;
+accountStatusOnChange(custObj, event){
+
+
+    console.log(custObj,event.checked);
+    var payload = {
+      accountSuspended : event.checked,
+      acoountId : custObj._id  ,
+      suspendedBy : 'distributer' 
+    }
+      var that = this;
+    swal("Are you sure ?", "Do you want to change account status ?").then((ans)=>{
+      console.log(ans);
+      that.contactService.accountSuspend(payload).subscribe(res=>{
+        console.log(res);
+        that.getCustomer();
+        that.data_descip =  "Account Status Changed";
+        launch_toast();
+        function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }    
+      })
+     
+    },err=>{
+      that.getCustomer();
+      console.log(err);
+    });
+  
+}
+
+
+allUserFunction(ev){
+  console.log('event=>',ev);
+  this.allUser = ev.checked ;
+   
+    this.skip = 1;
+    this.getCustomer(); 
+}
+
+adm_alert:boolean=false;
+alertStatus(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    adminAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    this.tost1('alertset');
+  })
+
+}
+
+dealerAlert(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    dealerAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    this.tost1('alertset');
+  })
+
+}
+changeKYC(data,event){
+  console.log(event);
+  var req={
+    user:data._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+     this.tost1('kyc');
+  })
+  
+}
+
+generatePullData(ev,data){
+  // if(ev.checked){
+    console.log(ev,data);
+
+    var request={
+      pullData:ev.checked,
+      pass:data.pass
+    }
+    if(data.user_id){
+      request['user_id']=data.user_id
+    }
+     if(data.phone){
+      request['phone']=data.phone
+    }
+    console.log(request);
+    
+    this.contactService.post('/users/getToken',request).subscribe((res:any)=>{
+      console.log(res);
+      if(ev.checked){
+        let dialogRef = this.dialog.open(ShowPullDataLinkComponent, {
+          width: '800px',
+        //  height: '600px', 
+          data:res.token
+        });
+      }
+      
+    })
+
+
+}
+tab:any;
+  
+  downloadExcel() {
+
+      this.Load = true;  
+    this.contactService.get('/users/getCustomer?uid='+this.useridd).subscribe(  
+      (data:any) => {
+        this.Load = false;
+       var custumer=[];
+        custumer = data;
+        for(var i=0;i<custumer.length;i++){
+         
+           custumer[i].fullName=custumer[i].first_name?custumer[i].first_name:''+" "+custumer[i].last_name?custumer[i].last_name:'';
+          if(i==(custumer.length-1)){
+
+            this.downloadFile(custumer);
+          }
+          }
+        console.log("custDetail=>", custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        // custumer=[];
+        // this.firstcall = true;
+        // this.lastcall = false;
+      });
+
+
+  //  for(var i=0;i<this.custumer.length;i++){
+  //   // this.custumer[i].fullName=this.custumer[i].first_name?this.custumer[i].first_name:''+" "+this.custumer[i].last_name?this.custumer[i].last_name:'';
+  //  }
+
+    
+  }
+
+  downloadFile(data) {
+   
+    let arrHeader = ["fullName", "email", "phone", "user_id","pass","kycStatus","total_vehicle"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Customer List.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+     this.Load = false;
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Customer List \r\n';
+    let row = 'S.No,';
+// name,emial,phone,id,password and status no of vehicles
+    let newHeaders =["Name", "Email", "Phone", "User id","Password","Status","Number of Vehicle"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  viewCustomerDetails(data){
+      console.log(data);
+      
+    let dialogRef = this.dialog.open(ViewCustomerDetailsComponent, {
+        //   width: '860px',
+        //  height: '750px',
+         disableClose: true, 
+        data:data
+    
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+         
+          if (result == "succ") {
+            this.tost1("succ");
+            this.ngOnInit();
+    
+          }
+        });
+  }
+
+
+
+}
diff --git a/src/app/add/dashboard-content/dashboard-content.component.html b/src/app/add/dashboard-content/dashboard-content.component.html
new file mode 100644
index 0000000..1b57d65
--- /dev/null
+++ b/src/app/add/dashboard-content/dashboard-content.component.html
@@ -0,0 +1,35 @@
+<div class="container">
+  <div class="row" >
+    <div class="col-12">
+        <p style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">Dashboard Columns</p>
+    </div>
+  </div>
+  <div class="row" style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;">
+    <div class="col-12" style="margin : 0%; padding: 0%">
+      <div class="row">
+        <div class="col-6" style="font-size: 14px; font-weight: 500; text-align: left; padding-left: 70px;">
+            <p>{{'COLUMN NAME' | translate}}</p>        
+        </div>
+        <div class="col-6" style="font-size: 14px; font-weight: 500;">
+            <p>{{'COLUMN VISIBILITY' | translate}}</p>        
+        </div>
+      
+      </div>
+      <div class="row" *ngFor = "let d_column of dashboard_column; let i = index">
+        <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500; color: #616161;">
+            <p >{{d_column.name}}</p>
+        </div>
+        <div class="col-6" >
+            <md-checkbox type="checkbox" [checked]="d_column.dash_column" (change)="selectedStatus(i,$event)"></md-checkbox>
+        </div>
+        
+      </div>
+      <div clas="row" style="margin-top: 30px;margin-bottom: 30px;text-align: center;">
+          <div class="col-12">
+              <button md-raised-button style="background: #31428c; color: white;" (click)="savereportPref()">{{'Save' | translate}}</button>
+              <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
+          </div>     
+        </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/add/dashboard-content/dashboard-content.component.scss b/src/app/add/dashboard-content/dashboard-content.component.scss
new file mode 100644
index 0000000..6fe493a
--- /dev/null
+++ b/src/app/add/dashboard-content/dashboard-content.component.scss
@@ -0,0 +1,3 @@
+.container{
+    padding: 0px;
+}
\ No newline at end of file
diff --git a/src/app/add/dashboard-content/dashboard-content.component.spec.ts b/src/app/add/dashboard-content/dashboard-content.component.spec.ts
new file mode 100644
index 0000000..6512f11
--- /dev/null
+++ b/src/app/add/dashboard-content/dashboard-content.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardContentComponent } from './dashboard-content.component';
+
+describe('DashboardContentComponent', () => {
+  let component: DashboardContentComponent;
+  let fixture: ComponentFixture<DashboardContentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardContentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardContentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/dashboard-content/dashboard-content.component.ts b/src/app/add/dashboard-content/dashboard-content.component.ts
new file mode 100644
index 0000000..4c410ca
--- /dev/null
+++ b/src/app/add/dashboard-content/dashboard-content.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ReportSettingComponent } from '../report-setting/report-setting.component';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-dashboard-content',
+  templateUrl: './dashboard-content.component.html',
+  styleUrls: ['./dashboard-content.component.scss']
+})
+export class DashboardContentComponent implements OnInit {
+  userIdd: any;
+
+  dashboard_column = [
+    {name:"GPS",dash_column:true,value:"gps_column"},
+    {name:"AC",dash_column:true,value:"ac_column"},
+    {name:"POWER",dash_column:true,value:"power_column"},
+    {name :"GSM",dash_column:true,value:"gsm_column"},
+    {name :"IGNITION",dash_column:true,value:"ignition_column"},
+    {name:"External Volatage",dash_column:true,value:"ext_volt"},
+    {name:"Door",dash_column:false,value:"door_column"},
+    {name :"Temperature",dash_column:false,value:"temp_column"},
+    {name :"Charging status",dash_column:false,value:"charging_column"},
+  
+  ];
+
+  constructor(public dialogRef: MdDialogRef<ReportSettingComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,) {
+      console.log(data);
+      console.log('data._id',data);
+      this.userIdd = data._id;
+      this.getCostumerDetail()
+     }
+
+  ngOnInit() {
+  }
+
+
+  savereportPref(){
+ 
+    // var dashboard_content_payload  =[]
+    var tempsemp = {}; 
+    // dashboard_content_payload =  JSON.parse(JSON.stringify(this.dashboard_column));
+    var tt =[];
+    for(var index in this.dashboard_column){
+    
+      var k = this.dashboard_column[index].value;
+      let pl = { };
+      tempsemp[k] = this.dashboard_column[index].dash_column;
+    
+      delete tempsemp[k].name;
+      delete tempsemp[k].value;
+      }
+      console.log(tempsemp);
+
+      var payload = {
+        dashboard_column : tempsemp, 
+        user : this.userIdd
+      }
+      // console.log(payload);
+
+      this.contactService.setDashboardContent(payload).subscribe(res=>{
+     
+        this.dialogRef.close('updated');
+
+      },err=>{
+        console.log(err);
+      })
+      
+
+  }
+
+  cancel(){
+    this.dialogRef.close('close');
+  }
+
+  selectedStatus(ind,ev,flag){ 
+      this.dashboard_column[ind].dash_column = ev.checked;
+  }
+
+  getCostumerDetail(){
+    let that = this;
+   
+    this.contactService.getcustToken(this.userIdd).subscribe(res=>{
+      var d_column = res.cust.dashboard_column;
+      for(let dt in d_column){ 
+        let arr = that.dashboard_column.filter(function(d){ 
+          return d.value == dt;
+        })
+
+        // arr[0].dash_column = d_column[dt].dash_column;
+        // this.dashboard_column[dt].dash_column = d_column[dt] ; 
+        arr[0].dash_column = d_column[dt] ; 
+        
+        console.log('d_column[dt]',d_column[dt])
+        // arr[0].Astatus = tempReport[dt].Astatus;
+      }
+    
+
+      console.log('this.dashboard_column=>',this.dashboard_column);
+   
+    })
+  }
+}
diff --git a/src/app/add/otp-screen/otp-screen.component.html b/src/app/add/otp-screen/otp-screen.component.html
new file mode 100644
index 0000000..734026c
--- /dev/null
+++ b/src/app/add/otp-screen/otp-screen.component.html
@@ -0,0 +1,20 @@
+
+<button style="float: right;border-radius: 32px;" class='btn btn-danger' (click)="dialogRef.close()"> <i class="fas fa-times-circle"></i></button>
+<div id="toast">
+    <div id="desc">{{ data_descip }}</div>
+  </div>        
+<div class="col-sm-12 mt-5 bgWhite">
+          <div class="title">
+            Verify OTP
+          </div>
+
+          <div class="mt-5">
+           <input class="form-control" [(ngModel)]="otp" type="number">
+          </div>
+          <div *ngIf="show" class="alert alert-warning" role="alert">
+            {{ data_descip }}
+          </div>
+          <hr class="mt-4">
+          <button class='btn btn-primary btn-block mt-4 mb-4 customBtn' (click)="verify()">Verify</button>
+        </div>
+      
\ No newline at end of file
diff --git a/src/app/add/otp-screen/otp-screen.component.scss b/src/app/add/otp-screen/otp-screen.component.scss
new file mode 100644
index 0000000..12bbc17
--- /dev/null
+++ b/src/app/add/otp-screen/otp-screen.component.scss
@@ -0,0 +1,36 @@
+.title {
+  font-weight: 600;
+  margin-top: 20px;
+  font-size: 24px;
+}
+
+.customBtn {
+  border-radius: 0px;
+  padding: 10px;
+}
+
+// form input {
+//   display: inline-block;
+//   width: 50px;
+//   height: 50px;
+//   text-align: center;
+// }
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
diff --git a/src/app/add/otp-screen/otp-screen.component.spec.ts b/src/app/add/otp-screen/otp-screen.component.spec.ts
new file mode 100644
index 0000000..df799fb
--- /dev/null
+++ b/src/app/add/otp-screen/otp-screen.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OtpScreenComponent } from './otp-screen.component';
+
+describe('OtpScreenComponent', () => {
+  let component: OtpScreenComponent;
+  let fixture: ComponentFixture<OtpScreenComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OtpScreenComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OtpScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/otp-screen/otp-screen.component.ts b/src/app/add/otp-screen/otp-screen.component.ts
new file mode 100644
index 0000000..6d1ccc7
--- /dev/null
+++ b/src/app/add/otp-screen/otp-screen.component.ts
@@ -0,0 +1,50 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-otp-screen',
+  templateUrl: './otp-screen.component.html',
+  styleUrls: ['./otp-screen.component.scss']
+})
+export class OtpScreenComponent implements OnInit {
+  otp
+ constructor(public dialogRef: MdDialogRef<OtpScreenComponent>,private contactService:ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      console.log(data);
+
+    }
+
+  ngOnInit() {
+  }
+data_descip;
+show:boolean=false;
+ verify(){
+  console.log(this.otp);
+    this.contactService.post('/users/verifyOtp',{user:this.data._id,otp:this.otp}).subscribe((res:any)=>{
+      this.data_descip = res.message;
+      launch_toast()
+      this.dialogRef.close({value:'done'});
+    },err=>{
+      console.log(err);
+      var message=JSON.parse(err._body);
+      console.log(message);
+      
+      this.data_descip = "You entered wrong OTP"
+      this.show=true;
+      var that=this;
+      //  this.data_descip = res.message;
+      launch_toast()
+     setTimeout(function () {that.show=false  }, 4500);
+    })
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+       setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+ }
+
+}
diff --git a/src/app/add/report-setting/report-setting.component.html b/src/app/add/report-setting/report-setting.component.html
new file mode 100644
index 0000000..73b412f
--- /dev/null
+++ b/src/app/add/report-setting/report-setting.component.html
@@ -0,0 +1,283 @@
+<!-- <div class="container"> -->
+  <!-- <div class="row">
+    <div class="col-12">
+      <p
+        style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">
+        User Setting</p>
+    </div>
+  </div> -->
+  <md-dialog-content class="mat-typography">
+<md-tab-group class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
+  <md-tab>
+    <template md-tab-label>REPORT PREFERENCE</template>
+    <div class="row mt-4" style="margin-top: 19px;">
+      <!-- <div class="row"
+        style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;"> -->
+        <div class="col-12" style="margin : 0%; padding: 0%">
+          <div class="row">
+            <div class="col-6"
+              style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+              <p>{{'REPORTS' | translate}}</p>
+            </div>
+            <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
+              <p>{{'REPORTS VISIBILITY' | translate}}</p>
+            </div>
+            <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
+              <p>{{'ADDRESS VISIBILITY' | translate}}</p>
+            </div>
+          </div>
+          <div class="row" *ngFor="let devStatus of reportArray; let i = index">
+            <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500;">
+              <p>{{devStatus.name}}</p>
+            </div>
+            <div class="col-3">
+              <md-checkbox type="checkbox" [checked]="devStatus.Rstatus" (change)="selectedStatus(i,$event,'rVisibility')">
+              </md-checkbox>
+            </div>
+            <div class="col-3">
+              <md-checkbox type="checkbox" [checked]="devStatus.Astatus" (change)="selectedStatus(i,$event,'aVisibility')">
+              </md-checkbox>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- </div> -->
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>USER SETTINGS</template>
+        <!-- <div class="row mt-4" style="margin-top: 19px;"> -->
+          <form [formGroup]="userSettingForm" class="form mt-4">
+           
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'AC' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="ac"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Door' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="door"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Immoblizer' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="immoblizer"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Share' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="share"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Tow' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="tow"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Parking' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="parking"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Fuel' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="fuel"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Temprature' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="temp"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Satelite' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="satelite"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Zoom Level' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <!-- <md-checkbox formControlName="zoomLevel"></md-checkbox> -->
+                <input type="number" formControlName="zoomLevel">
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Relay Timer' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="relay_timer"></md-checkbox>
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Error Code' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="errorCode"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Error Message' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <md-checkbox formControlName="errorMessage"></md-checkbox>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+                <p>{{'Satelite Value' | translate}}</p>
+              </div>
+              <div class="col-md-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left;">
+                <input type="number" formControlName="sateliteValue">
+                <!-- <md-checkbox formControlName="errorMessage"></md-checkbox> -->
+              </div>
+            </div>
+
+           
+
+
+
+            
+
+            <!-- <md-dialog-actions align="end">
+              <button md-button md-dialog-close>Cancel</button>
+              <button md-button cdkFocusInitial (click)="saveSettings()">Save</button>
+            </md-dialog-actions> -->
+
+          </form>
+        <!-- </div> -->
+      </md-tab>
+      <md-tab>
+        <template md-tab-label>Dashboard Column</template>
+      <div class="container">
+        
+        <div class="row"
+          style="height: fit-content;margin: 0px; text-align: center;  padding-top: 10px;">
+          <div class="col-12" style="margin : 0%; padding: 0%">
+            <div class="row">
+              <div class="col-6" style="font-size: 14px; font-weight: 500; text-align: left; padding-left: 70px;">
+                <p>{{'COLUMN NAME' | translate}}</p>
+              </div>
+              <div class="col-6" style="font-size: 14px; font-weight: 500;">
+                <p>{{'COLUMN VISIBILITY' | translate}}</p>
+              </div>
+      
+            </div>
+            <div class="row" *ngFor="let d_column of dashboard_column; let i = index">
+              <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500; color: #616161;">
+                <p>{{d_column.name}}</p>
+              </div>
+              <div class="col-6">
+                <md-checkbox type="checkbox" [checked]="d_column.dash_column" (change)="selectedStatus1(i,$event)">
+                </md-checkbox>
+              </div>
+      
+            </div>
+           
+          </div>
+        </div>
+      </div>
+      </md-tab>
+      </md-tab-group>
+</md-dialog-content>
+<md-dialog-actions align="end">
+  <button md-button cdkFocusInitial style="background: #31428c; color: white;" (click)="saveSettings(tabGroup.selectedIndex)">{{'Save' |
+    translate}}</button>
+    <button style="background: #1d8216; color: white;" md-button md-dialog-close (click)="cancel()">{{'Cancel' |
+      translate}}</button>
+</md-dialog-actions>
+
+<!-- <div class="container" style="height: 500px">
+  <div class="row" >
+    <div class="col-12">
+        <p style="text-align: center; font-size: 20px; background: #4859a5; color: white; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px;">REPORT PREFERENCE</p>
+    </div>
+  </div> -->
+  <!-- <div class="row" style="height: fit-content;margin: 0px; text-align: center; border: 1px solid #31428c4f; padding-top: 10px; box-shadow: 6px 5px 8px #4859a557;">
+    <div class="col-12" style="margin : 0%; padding: 0%">
+      <div class="row">
+        <div class="col-6" style="font-size: 14px; font-weight: 500; color: #7b7b7b;text-align: left; padding-left: 70px;">
+            <p>{{'REPORTS' | translate}}</p>        
+        </div>
+        <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
+            <p>{{'REPORTS VISIBILITY' | translate}}</p>        
+        </div>
+        <div class="col-3" style="font-size: 14px; font-weight: 500; color: #7b7b7b;">
+            <p>{{'ADDRESS VISIBILITY' | translate}}</p>       
+        </div>
+      </div>
+      <div class="row" *ngFor = "let devStatus of reportArray; let i = index">
+        <div class="col-6" style="text-align: left; padding-left: 70px;font-weight: 500;">
+            <p >{{devStatus.name}}</p>
+        </div>
+        <div class="col-3">
+            <md-checkbox type="checkbox" [checked]="devStatus.Rstatus" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox>
+        </div>
+        <div class="col-3">
+            <md-checkbox type="checkbox"  [checked]="devStatus.Astatus" (change)="selectedStatus(i,$event,'aVisibility')"></md-checkbox>
+          </div>
+      </div>
+      <div clas="row" style="margin-top: 30px;margin-bottom: 30px;text-align: center;">
+          <div class="col-12">
+              <button md-raised-button style="background: #31428c; color: white;" (click)="savereportPref()">{{'Save' | translate}}</button>
+              <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
+          </div>     
+        </div>
+    </div>
+  </div> -->
+<!-- </div> -->
+
+
+<!-- <div class="row" style="padding-bottom: 10px;">
+  <div class="col-12">
+      <p style="text-align: center; font-size: 20px;color: #827f7f;">Please select reports which you want to hide from customer portal</p>
+  </div>
+</div> -->
+<!-- <div class="col-12">
+  <span *ngFor = "let devStatus of reportArray; let i = index" [ngClass]="{ 'selected' :(devStatus.status == 'true'), 'deselected' : !devStatus.status}" (click)="selectedStatus(i)" style="margin-right: 10px;margin-bottom: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span>
+</div> -->
\ No newline at end of file
diff --git a/src/app/add/report-setting/report-setting.component.scss b/src/app/add/report-setting/report-setting.component.scss
new file mode 100644
index 0000000..b4b7f38
--- /dev/null
+++ b/src/app/add/report-setting/report-setting.component.scss
@@ -0,0 +1,68 @@
+.selected {
+  background-color: #5d5f62;
+  border-radius: 40px;
+}
+
+.deselected {
+  background: #db2f2f;
+  border-radius: 40px;
+}
+.form-control {
+  margin-bottom: 8px;
+}
+.selected-tab-0 md-ink-bar {
+  background-color: red;
+}
+.selected-tab-1 md-ink-bar {
+  background-color: #426e86;
+}
+.selected-tab-2 md-ink-bar {
+  background-color: green;
+}
+.mat-tab-body-content {
+  overflow: hidden !important;
+}
+.mat-tab-body.mat-tab-body-active {
+  overflow-y: hidden !important;
+}
+.project-tab {
+  // padding: 10%;
+  height: 500px;
+  // margin-top: -8%;
+}
+.project-tab #tabs {
+  background: #007b5e;
+  color: #eee;
+}
+.project-tab #tabs h6.section-title {
+  color: #eee;
+}
+.project-tab #tabs .nav-tabs .nav-item.show .nav-link,
+.nav-tabs .nav-link.active {
+  color: #0062cc;
+  background-color: transparent;
+  border-color: transparent transparent #f3f3f3;
+  border-bottom: 3px solid !important;
+  font-size: 16px;
+  font-weight: bold;
+}
+.project-tab .nav-link {
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  color: #0062cc;
+  font-size: 16px;
+  font-weight: 600;
+}
+.project-tab .nav-link:hover {
+  border: none;
+}
+.project-tab thead {
+  background: #f3f3f3;
+  color: #333;
+}
+.project-tab a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 600;
+}
diff --git a/src/app/add/report-setting/report-setting.component.spec.ts b/src/app/add/report-setting/report-setting.component.spec.ts
new file mode 100644
index 0000000..aa62329
--- /dev/null
+++ b/src/app/add/report-setting/report-setting.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportSettingComponent } from './report-setting.component';
+
+describe('ReportSettingComponent', () => {
+  let component: ReportSettingComponent;
+  let fixture: ComponentFixture<ReportSettingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportSettingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportSettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/report-setting/report-setting.component.ts b/src/app/add/report-setting/report-setting.component.ts
new file mode 100644
index 0000000..3d5176e
--- /dev/null
+++ b/src/app/add/report-setting/report-setting.component.ts
@@ -0,0 +1,244 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-report-setting',
+  templateUrl: './report-setting.component.html',
+  styleUrls: ['./report-setting.component.scss']
+})
+export class ReportSettingComponent implements OnInit {
+  reportCheck :any;
+  addressCheck :any;
+  userSettingForm:FormGroup;
+  selectedTab=1;
+  dashboard_column = [
+    {name:"GPS",dash_column:true,value:"gps_column"},
+    {name:"AC",dash_column:true,value:"ac_column"},
+    {name:"POWER",dash_column:true,value:"power_column"},
+    {name :"GSM",dash_column:true,value:"gsm_column"},
+    {name :"IGNITION",dash_column:true,value:"ignition_column"},
+    {name:"External Volatage",dash_column:true,value:"ext_volt"},
+    {name:"Door",dash_column:false,value:"door_column"},
+    {name :"Temperature",dash_column:false,value:"temp_column"},
+    {name :"Charging status",dash_column:false,value:"charging_column"},
+  
+  ];
+  reportArray = [
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name:"Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:true,value:"stoppage_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:true,value:"ignition_report"},
+    {name : "Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name : "AC Report",Rstatus : true,Astatus:false,value:"ac_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performance_report"},
+    {name : "User Trip Report",Rstatus : true,Astatus:true,value:"user_trip_report"},
+    {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"},
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"},
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+  ];
+  userIdd: any;
+  Address_Status_name: any = [];
+
+  constructor(public dialogRef: MdDialogRef<ReportSettingComponent>,private fb:FormBuilder,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,) { 
+      console.log(data);
+      console.log('data._id',data);
+      this.userIdd = data._id;
+
+    }
+// ac,door,immoblizer,share,tow,parking
+  ngOnInit() {
+    this.userSettingForm=this.fb.group({
+      ac:[],
+      door:[],
+      immoblizer:[],
+      share:[],
+      tow:[],
+      parking:[],
+      fuel:[],
+      temp:[],
+      satelite:[],
+      zoomLevel:[""],
+      relay_timer:[],
+      errorCode:[],
+      errorMessage:[],
+      sateliteValue:['']
+    })
+    this.getCostumerDetail();
+    // this.getUserSettings()
+  }
+
+  savereportPref(){ 
+   var report_preference_payload = [];
+  console.log(this.reportArray);
+  
+   report_preference_payload =  JSON.parse(JSON.stringify(this.reportArray));
+    var tempsemp ={};
+
+    console.log(report_preference_payload);
+    for(var index in report_preference_payload){
+      var k = report_preference_payload[index].value;
+
+      if(report_preference_payload[index].Rstatus == false){
+        
+        if(report_preference_payload[index].value!="trip_report" && report_preference_payload[index].value!="ignition_report" && report_preference_payload[index].value!="stoppage_report"){
+          report_preference_payload[index].Astatus = false;
+
+        }
+      }
+      tempsemp[k] = report_preference_payload[index];
+      delete tempsemp[k].name;
+      delete tempsemp[k].value;
+      }
+    console.log(tempsemp);
+    var  reportPref  ={
+      reportsArr : tempsemp,
+      id :this.userIdd
+    }
+    this.contactService.setReportPrefrence(reportPref).subscribe(res=>{
+            console.log(res);
+            this.dialogRef.close('updated');
+    },err=>{
+        console.log("error",err);
+    })
+   }
+  cancel(){
+    this.dialogRef.close('close');
+  }
+  Status_name = [];
+  selectedStatus(ind,ev,flag){
+    if(flag == 'rVisibility'){
+      this.reportArray[ind].Rstatus = ev.checked;
+     
+    }
+    if(flag == 'aVisibility'){
+      this.reportArray[ind].Astatus = ev.checked;
+    
+    }
+
+    console.log('this.reportArray',this.reportArray);
+
+
+  }
+
+  getCostumerDetail(){
+    let that = this;
+    this.contactService.getcustToken(this.userIdd).subscribe(res=>{
+      console.log("resresresresresresresresres",res);
+      var tempReport = res.cust.report_preference;
+      if(res.cust.user_settings){
+        this.userSettingForm.patchValue(res.cust.user_settings);
+      }
+      
+      for(let dt in tempReport){
+        let arr = that.reportArray.filter(function(d){ 
+          return d.value == dt;
+        })
+        if(dt=="trip_report" || dt=="ignition_report" || dt=="stoppage_report"){
+            arr[0].Astatus = true;
+          arr[0].Rstatus = tempReport[dt].Rstatus;
+        }else{
+          arr[0].Astatus = tempReport[dt].Astatus;
+          arr[0].Rstatus = tempReport[dt].Rstatus;
+        }
+        
+      }
+
+       var d_column = res.cust.dashboard_column;
+      for(let dt in d_column){ 
+        let arr1 = that.dashboard_column.filter(function(d){ 
+          return d.value == dt;
+        })
+
+        // arr[0].dash_column = d_column[dt].dash_column;
+        // this.dashboard_column[dt].dash_column = d_column[dt] ; 
+        arr1[0].dash_column = d_column[dt] ; 
+        
+        console.log('d_column[dt]',d_column[dt])
+        // arr[0].Astatus = tempReport[dt].Astatus;
+      }
+      console.log("that.reportArray=>",that.reportArray);      
+    })
+  }
+ 
+
+saveSettings(value){
+  console.log(value);
+  if(value==0){
+    this.savereportPref()
+  }else if(value==1){
+    var reportPref={
+       userSetting : this.userSettingForm.value,
+        id :this.userIdd
+    }
+    this.contactService.setReportPrefrence(reportPref).subscribe(res=>{
+              console.log(res);
+              this.dialogRef.close('updated');
+      },err=>{
+          console.log("error",err);
+      })
+
+  }else{
+      this.savereportPref1()
+  }
+}
+
+
+  savereportPref1(){
+ 
+    // var dashboard_content_payload  =[]
+    var tempsemp = {}; 
+    // dashboard_content_payload =  JSON.parse(JSON.stringify(this.dashboard_column));
+    var tt =[];
+    for(var index in this.dashboard_column){
+    
+      var k = this.dashboard_column[index].value;
+      let pl = { };
+      tempsemp[k] = this.dashboard_column[index].dash_column;
+    
+      delete tempsemp[k].name;
+      delete tempsemp[k].value;
+      }
+      console.log(tempsemp);
+
+      var payload = {
+        dashboard_column : tempsemp, 
+        user : this.userIdd
+      }
+      // console.log(payload);
+
+      this.contactService.setDashboardContent(payload).subscribe(res=>{
+     
+        this.dialogRef.close('updated');
+
+      },err=>{
+        console.log(err);
+      })
+      
+
+  }
+
+  
+
+  selectedStatus1(ind,ev,flag){ 
+      this.dashboard_column[ind].dash_column = ev.checked;
+  }
+
+}
diff --git a/src/app/add/reset-password/reset-password.component.html b/src/app/add/reset-password/reset-password.component.html
new file mode 100644
index 0000000..52f0cd5
--- /dev/null
+++ b/src/app/add/reset-password/reset-password.component.html
@@ -0,0 +1,28 @@
+<div class="main">
+  <div class="row">
+    <div class="col-12">
+      <div style="display: flex;">   
+        <input style="margin-bottom: 15px;" class="form-control" name="halt" type="{{iType}}" [(ngModel)]="pass" placeholder="Type reset password" />    
+        <i *ngIf="showBtn" style="cursor: pointer; margin-bottom: 15px; font-size: 20px; padding-top: 8px; padding-left: 10px;" title="Show Password" class="fas fa-eye-slash" (click)="show_hide_pass(0)"></i>
+        <i *ngIf="!showBtn" style="cursor: pointer; margin-bottom: 15px; font-size: 20px; padding-top: 8px; padding-left: 10px;" title="Show Password" class="fas fa-eye" (click)="show_hide_pass(1)"></i>
+      </div>
+      <div style="display: flex;"> 
+        <input style="margin-bottom: 15px;" class="form-control" name="halt" type="{{iType_1}}" [(ngModel)]="cnfrmpass" placeholder="Confirm password" />     
+        <i *ngIf="showBtn_1" style="cursor: pointer; margin-bottom: 15px; font-size: 20px; padding-top: 8px; padding-left: 10px;" title="Show Password" class="fas fa-eye-slash" (click)="show_hide_pass(2)"></i>
+        <i *ngIf="!showBtn_1" style="cursor: pointer; margin-bottom: 15px; font-size: 20px; padding-top: 8px; padding-left: 10px;" title="Show Password" class="fas fa-eye" (click)="show_hide_pass(3)"></i>
+      </div>
+    </div>
+  </div>
+  <div class="row" style="text-align: center;">
+    <div class="col-12">
+      <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="reset()">{{'RESET' | translate}}</button>
+      <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+    </div>
+  </div>
+  <div class="row" style="text-align: center; margin-top: 10px; color: red;">
+    <div class="col-12">
+      <p *ngIf= "error" style="margin-bottom: 0;">{{errorMsg}}</p>
+    </div>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/add/reset-password/reset-password.component.scss b/src/app/add/reset-password/reset-password.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/add/reset-password/reset-password.component.spec.ts b/src/app/add/reset-password/reset-password.component.spec.ts
new file mode 100644
index 0000000..8a4642a
--- /dev/null
+++ b/src/app/add/reset-password/reset-password.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetPasswordComponent } from './reset-password.component';
+
+describe('ResetPasswordComponent', () => {
+  let component: ResetPasswordComponent;
+  let fixture: ComponentFixture<ResetPasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResetPasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/reset-password/reset-password.component.ts b/src/app/add/reset-password/reset-password.component.ts
new file mode 100644
index 0000000..85902cb
--- /dev/null
+++ b/src/app/add/reset-password/reset-password.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialog, MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-reset-password',
+  templateUrl: './reset-password.component.html',
+  styleUrls: ['./reset-password.component.scss']
+})
+export class ResetPasswordComponent implements OnInit {
+  pass:any;
+  cnfrmpass:any;
+  iType:any = "password";
+  iType_1:any="password";
+  errorMsg:string;
+  showError: boolean = false;
+
+  constructor(private contactService: ContactService,public dialog: MdDialog,public dialogRef: MdDialogRef<ResetPasswordComponent>, @Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log(data);
+  }
+
+  ngOnInit() {
+
+  }
+  error :boolean = false;
+  reset(){
+  
+    var that = this;
+    let userid = this.data._id ;  
+    console.log("reset passowrd");
+    if(this.pass != this.cnfrmpass){
+      this.error = true ; 
+      that.errorMsg = "Password do not matched"; 
+      let showError = setTimeout(function(){ that.error = false; clearTimeout(showError); },3000)
+    }else{
+      let payLoad={
+        id : userid,
+        pass : this.pass
+      };
+      this.contactService.resetPass(payLoad).subscribe(res=>{
+        console.log(res);
+        this.dialogRef.close('succ');
+      },error=>{
+        console.log(error);
+      })
+    }
+  }
+
+  closebox(){
+    console.log("close the box");
+    this.dialogRef.close('close');
+
+  }
+
+  showBtn : boolean = true;
+  showBtn_1 : boolean = true; 
+  show_hide_pass(id){
+   debugger;
+   console.log(id);
+    if(id == 0){
+      this.iType = 'text';
+      this.showBtn = !this.showBtn;
+    }
+    if(id == 1){
+      this.iType = 'password';
+      this.showBtn = !this.showBtn;
+    }
+    if(id == 2){
+      this.iType_1 = 'text';
+      this.showBtn_1 = !this.showBtn_1;
+    }
+    if(id == 3){
+      this.iType_1 = 'password';
+      this.showBtn_1 = !this.showBtn_1;
+    }
+  }
+}
diff --git a/src/app/add/show-pull-data-link/show-pull-data-link.component.html b/src/app/add/show-pull-data-link/show-pull-data-link.component.html
new file mode 100644
index 0000000..af095ed
--- /dev/null
+++ b/src/app/add/show-pull-data-link/show-pull-data-link.component.html
@@ -0,0 +1,17 @@
+<!-- <p>
+  {{url}}
+</p> -->
+
+<div class="card">
+  <div class="card-header">
+    <h4>Pull Data Api</h4>
+  <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="close()">
+    <span aria-hidden="true" class="visually-hidden">&times;</span>
+  </button>
+  </div>
+  <div class="card-body">
+    <textarea style="margin-top: 0px;margin-bottom: 0px;height: 292px;width: -webkit-fill-available;" [value]="url">
+
+    </textarea>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/add/show-pull-data-link/show-pull-data-link.component.scss b/src/app/add/show-pull-data-link/show-pull-data-link.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/add/show-pull-data-link/show-pull-data-link.component.spec.ts b/src/app/add/show-pull-data-link/show-pull-data-link.component.spec.ts
new file mode 100644
index 0000000..efcb11b
--- /dev/null
+++ b/src/app/add/show-pull-data-link/show-pull-data-link.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShowPullDataLinkComponent } from './show-pull-data-link.component';
+
+describe('ShowPullDataLinkComponent', () => {
+  let component: ShowPullDataLinkComponent;
+  let fixture: ComponentFixture<ShowPullDataLinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShowPullDataLinkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowPullDataLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/show-pull-data-link/show-pull-data-link.component.ts b/src/app/add/show-pull-data-link/show-pull-data-link.component.ts
new file mode 100644
index 0000000..f2f9df4
--- /dev/null
+++ b/src/app/add/show-pull-data-link/show-pull-data-link.component.ts
@@ -0,0 +1,25 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-show-pull-data-link',
+  templateUrl: './show-pull-data-link.component.html',
+  styleUrls: ['./show-pull-data-link.component.scss']
+})
+export class ShowPullDataLinkComponent implements OnInit {
+  url
+  constructor(public dialogRef: MdDialogRef<ShowPullDataLinkComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      console.log(data);
+      var token=data.split('.');
+
+      this.url="https://13.126.36.205/pullData/pullDataForUser1?token="+token[1]
+    }
+
+  ngOnInit() {
+  }
+
+  close(){
+    this.dialogRef.close()
+  }
+}
diff --git a/src/app/add/view-customer-details/view-customer-details.component.html b/src/app/add/view-customer-details/view-customer-details.component.html
new file mode 100644
index 0000000..5cb03f6
--- /dev/null
+++ b/src/app/add/view-customer-details/view-customer-details.component.html
@@ -0,0 +1,454 @@
+<!-- <div class="container mt-5"> -->
+  <!-- <div class="row"> -->
+  
+     <!-- <div class="col-md-10 ml-auto col-xl-10 mr-auto"> 
+      <p class="category">Tabs with Background on Card</p> -->
+      <!-- Customer Details,Device Details,Setting,Document,Activites -->
+      <div class="card">
+        <div class="card-header">
+          
+
+          <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist"
+            data-background-color="orange">
+            <li class="nav-item">
+              <a class="nav-link active" data-toggle="tab" href="#CustomerDetails" role="tab">Customer Details</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#DeviceDetails" role="tab">Device Details</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#Settings" role="tab">Settings</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#Documents" role="tab">Documents</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#Activites" role="tab">Activites</a>
+            </li>
+
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#Actions" role="tab">Actions</a>
+            </li>
+
+            <li class="nav-item">
+              <a class="nav-link" data-toggle="tab" href="#Transaction" role="tab">Payments</a>
+            </li>
+          </ul>
+        </div>
+        <div class="card-body">
+         
+          <div class="tab-content">
+            <div class="tab-pane active" id="CustomerDetails" role="tabpanel">
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Name:</b> <span> {{data?data.first_name?data.first_name:'':''}} {{data?data.last_name?data.last_name:'':''}}</span>
+                </div>
+                <div class="col-md-6">
+                  <b>User ID:</b><span> {{data?data.user_id?data.user_id:'':''}}</span>
+                </div>
+              
+              </div>
+              
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Email:</b> <span> {{data?data.email?data.email:'':''}}</span>
+                </div>
+                <div class="col-md-6">
+                  <b>Phone:</b> <span> {{data?data.phone?data.phone:'':''}}</span>
+                  <i *ngIf="data?data.phone_verfi==false?true:false:false" class="fas fa-exclamation-circle"></i>
+                  <i *ngIf="data?data.phone_verfi==true?true:false:false" class="fas fa-check-circle"></i>
+                  <!-- <img *ngIf="data?data.phone_verfi==true?true:false:false" src="../../../assets/image/accept.png" width='20px'> -->
+
+                  <button *ngIf="data?data.phone_verfi==false?true:false:false" type="button" style="float: right;font-size: small; border-radius: 20px;" 
+                  class="btn btn-outline-primary btn-sm" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Verify</button>
+                <div class="collapse" id="collapseExample">
+                  <div class="card card-body">
+                    
+                    <div class="col-sm-12">
+                      <div class="title mb-1">
+                        Verify OTP
+                      </div>
+                    
+                      <div>
+                        <input class="form-control" [(ngModel)]="otp" type="number">
+                      </div>
+                      <div *ngIf="show" class="alert alert-warning" role="alert">
+                        {{ data_descip }}
+                      </div>
+                      <hr class="mt-4">
+                      <button class='btn btn-primary btn-block mt-4 mb-4 customBtn' (click)="verify1()">Verify</button>
+                    </div>
+
+                  </div>
+                </div>
+                
+                </div>
+              
+              </div>
+
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Password:</b> <span> {{data?data.pass?data.pass:'':''}}</span>
+                </div>
+                <div class="col-md-6">
+                  <b>Created On:</b><span> {{data?data.created_on?data.created_on:'':''}}</span>
+                </div>
+              
+              </div>
+              
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Expiry date:</b> <span> {{data?data.expire_date?data.expire_date:'':''}}</span>
+                </div>
+                <div class="col-md-6">
+                  <b>Point Allocated:</b> <span> {{data?data.point_Allocated?data.point_Allocated:0:0}}</span>
+                </div>
+              
+              </div>
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Dealer:</b> <span> {{data?data.DealerDetails[0].first_name?data.DealerDetails[0].first_name:'':''}} {{data?data.DealerDetails[0].last_name?data.DealerDetails[0].last_name:'':''}}</span>
+                </div>
+                
+              </div>
+              </div>
+          
+            <div class="tab-pane" id="DeviceDetails" role="tabpanel">
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Total Vehicles:</b> <span> {{data?data.total_vehicle?data.total_vehicle:0:0}}</span>
+                </div>
+                <div class="col-md-6">
+                  <b>Deleted Vehicles:</b> <span> {{data?data.delDevices?data.delDevices:0:0}}</span>
+                </div>
+              
+              </div>
+            </div>
+
+            <div class="tab-pane" id="Settings" role="tabpanel">
+              <app-report-setting></app-report-setting>
+            </div>
+
+            <div class="tab-pane" id="Documents" role="tabpanel">
+            
+                <flash-messages></flash-messages>
+                <div [hidden]="doclist">
+                  <table id="test" class="table table-striped table-hover"
+                    style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
+                    <thead>
+                      <tr>
+                        <th>Document Name</th>
+                        <th>Document number</th>
+                        <th>Image</th>
+                        <th>Status</th>
+                        <th>Action</th>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let doc of testDocuments; let i = index">
+                        <td style="cursor:pointer">{{doc.doctype}}</td>
+                        <td style="cursor:pointer">{{doc.phone}}</td>
+                        <td>
+                          <h4 *ngIf="doc.ext=='pdf'">
+                            <a href={{doc.image}} target="_blank"><i class="fa fa-file-pdf"></i></a>
+                          </h4>
+                          <span *ngIf="doc.ext!='pdf'">
+                            <img style="width: 100px;" [src]="'https://www.oneqlik.in'+doc.image" >
+                            <!-- (click)="openModal(template,doc)"> -->
+                          </span>
+                        </td>
+                        <td>
+                          <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                            *ngIf="data.kycStatus==undefined">Pending</button>
+                          <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                            *ngIf="data.kycStatus=='Pending'">{{data.kycStatus}}</button>
+                          <button class="btn btn-success btn-sm" style="border-radius: 40px; font-size: x-small; background-color: green;"
+                            *ngIf="data.kycStatus=='Approved'">{{data.kycStatus}}</button>
+                          <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;"
+                            *ngIf="data.kycStatus=='Reject'">{{data.kycStatus}}</button>
+                        </td>
+                        <td style="cursor:pointer">
+                        <button class="btn btn-primary btn-block/"> <i class="fas fa-download" (click)="downloadDoc(doc)"></i></button>
+                        <button class="btn btn-danger btn-block/"><i class="fas fa-trash" (click)="SaveDocuments('deldoc',i)"></i></button>
+                          
+                          <!-- <button class="btn btn-primary btn-block/" (click)="downloadDoc(doc)"
+                            style="background: green;cursor: pointer;float: right;border:none;">Download</button> -->
+                          <!-- <button class="btn btn-primary btn-block/" [disabled]="disableDelete" (click)="SaveDocuments('deldoc',i)"
+                            style="background: #f90808;cursor: pointer;float: right;border-color: transparent;margin-right: 16px;border:none;">Delete</button> -->
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <div class="row text-center mt-2" style="justify-content: center;">
+                    <!-- <button class="btn btn-primary m-1" (click)="Adddocuments('')">Add <i class="fa fa-plus-circle"></i></button> -->
+                    <button class="btn btn-success m-1" [disabled]="data.kycStatus=='Approved'"
+                      (click)="changeKYC('Approved')">Approve <i class="fa fa-check-circle"></i></button>
+                    <button class="btn btn-danger m-1" [disabled]="data.kycStatus=='Approved'"
+                      (click)="changeKYC('Reject')">Reject <i class="fa fa-times-circle"></i></button>
+              
+                  
+                  </div>
+                </div>
+                <!-- <div [hidden]="!doclist">
+                  <button class="btn btn-primary btn-block/" (click)="Adddocuments('')"
+                    style="background: green;cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Add</button>
+                </div> -->
+              
+              
+              
+                <div>
+                  <div class="row">
+                    <div class="col-sm-6">
+                      <p>Upload Documents * </p>
+                    </div>
+                    <div class="col-sm-6">
+                      <button mdTooltip="upload Documents"
+                        style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
+                        (click)="AddDocumentsField('addedrow')">
+                        <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+                      </button>
+                    </div>
+                  </div>
+                  <div style="overflow: scroll;overflow-x: hidden;" [ngClass]="{'rowHeight':docRow}">
+                    <div class="row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i = index">
+                      <div class="col-sm-2">
+                        <md-select (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype" placeholder="Doc Type">
+                          <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                        </md-select>
+                      </div>
+                      <div class="col-sm-10" style="margin-top: 2%;">
+                        <input type="text" style="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone"
+                          placeholder="Doc number">
+                        <span><input type="file" class="btn btn btn-success"
+                            style="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;"
+                            (change)="onFileChanged($event)"></span>
+                        <span><button class="btn btn btn-success" (click)="onUpload(i)">{{uploadStatus}}</button></span>
+                        <span><button mdTooltip="Delete field"
+                            style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
+                            (click)="DeleteDocumentsField(i)">
+                            <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon>
+                          </button></span>
+                      </div>
+                    </div>
+                    <button [disabled]="!ifuploadArr" class="btn btn-primary btn-block/" (click)="SaveDocuments(null,0)"
+                      style="cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;margin-bottom: 10px;">Save</button>
+                  </div>
+                </div>
+              </div>
+
+            <div class="tab-pane" id="Activites" role="tabpanel">
+            <div class="row mt-3">
+              <div class="col-md-6">
+                <b>Last Activity:</b> <span> {{data?data.last_activity_on?data.last_activity_on:0:0}}</span>
+              </div>
+              <div class="col-md-6">
+                <b>Last Login:</b> <span> {{data?data.last_login?data.last_login:0:0}}</span>
+              </div>
+            
+            </div>
+            <div class="row mt-3">
+              <div class="col-md-6">
+                <b>Login Type:</b> <span> {{data?data.login_type?data.login_type:0:0}}</span>
+              </div>
+
+              <div class="col-md-6">
+                <b>Number of Mobile Login:</b> <span> {{data?data.notificationTokenCount? data.notificationTokenCount: 0:0}}</span>
+              </div>
+            </div>
+
+            </div>
+
+            <div class="tab-pane" id="Actions" role="tabpanel">
+
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Customer Status:</b> <md-slide-toggle [(ngModel)]="data.status" style="height: 0px !important" ngDefaultControl ngDefaultControl
+                    (change)="onChange(data, $event)"></md-slide-toggle>
+                </div>
+                <div class="col-md-6">
+                  <b>Suspend Account:</b> <md-slide-toggle [(ngModel)]="data.accountSuspended" style="height: 0px !important" ngDefaultControl
+                    (change)="accountStatusOnChange(data, $event)"></md-slide-toggle>
+                </div>
+              
+              </div>
+
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Admin Alert:</b>
+                  <md-slide-toggle [(ngModel)]="data.adminAlert" style="height: 0px !important" ngDefaultControl
+                    (change)="alertStatus($event, data)"></md-slide-toggle>
+                </div>
+                <div class="col-md-6">
+                  <b>Pull Data:</b>
+                  <md-slide-toggle [checked]="data.pullData?data.pullData:false" style="height: 0px !important" ngDefaultControl
+                      (change)="generatePullData($event, data)"></md-slide-toggle>
+                </div>
+              
+              </div>
+
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <b>Share Customer Info:</b>
+                  <i class="fas fa-sign-in-alt" title="Send Login Credentials" (click)="shareUserCredential()"></i>
+
+                </div>
+
+                <div class="col-md-6">
+                  <b>Reset Password:</b>
+                  <i class="fas fa-unlock-alt" title="Reset Password" (click)="resetPassword()"></i>
+
+                </div>
+
+              </div>
+
+              <div class="row mt-3">
+                <div *ngIf="custtype" class="col-md-6">
+                  <b>Dealer Alert:</b>
+                  <md-slide-toggle [(ngModel)]="data.dealerAlert" style="height: 0px !important" ngDefaultControl
+                    (change)="dealerAlert($event, data)"></md-slide-toggle>
+                </div>
+
+              </div>
+
+           
+
+
+
+              </div>
+
+            <div class="tab-pane" id="Transaction" role="tabpanel">
+              <button *ngIf="!add" class="btn btn-outline-primary"  style="border-radius: 20px;margin-left: 6px;float: right;font-size: small;margin-bottom: 13px;" type="button" data-toggle="collapse" 
+              data-target="#collapseOne" aria-expanded="true"aria-controls="collapseOne" (click)="add=!add">back</button>
+
+            <button *ngIf="add" class="btn btn-outline-primary"  style="border-radius: 20px;float: right;font-size: small;margin-bottom: 13px;" type="button" data-toggle="collapse" 
+              data-target="#collapseTwo" aria-expanded="true"aria-controls="collapseTwo" (click)="addButton()">Add Transaction <i class="fas fa-plus"></i></button>
+
+            <div class="accordion" id="table">
+              <div class="card">
+               
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#table">
+                  <div class="card-body">
+                    <table class="table table-striped">
+                      <thead>
+                        <tr>
+                          <!-- <th scope="col">Customer _ID</th> -->
+                          <th scope="col">Amount</th>
+                          <th scope="col">Payment Mode</th>
+                          <th scope="col">Transaction ID</th>
+                          <th scope="col">Remarks</th>
+                          <th scope="col">Items</th>
+                          <th scope="col">Payment Date</th>
+                          <th scope="col">Status</th>
+                          <th scope="col">Edit</th>
+                          <th scope="col">Delete</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let item of payementsArray">
+                          <!-- <td>{{item.Customer_ID}}</td> -->
+                          <td>{{item.Amount}}</td>
+                          <td>{{item.PaymentMode}}</td>
+                          <td>{{item.TransactionID}}</td>
+                          <td>{{item.Remarks}}</td>
+                          <td>{{item.Items}}</td>
+                          <td>
+                            <span *ngIf="item.date">{{item.date | date:'medium'}}</span>
+                            <span *ngIf="!item.date">N/A</span>
+                          </td>
+                          <td>{{item.Status}}</td>
+                          <td><i class="fas fa-pencil-alt" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"aria-controls="collapseTwo" (click)="editPayment(item)"></i></td>
+                          <td><i class="fas fa-trash" (click)="deletePayment(item)"></i></td>
+                          
+                    
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+            
+                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#table">
+                  <div class="card-body" style="height: 45vh;">
+                  <form [formGroup]="transactionForm" class="form">
+                    <div class="row" style="margin-bottom: 12px;">
+                      <div class="col">
+                        <input type="text" class="form-control" formControlName="Amount" placeholder="Enter Amount">
+                      </div>
+                      <div class="col">
+                        <input type="text" class="form-control" formControlName="TransactionID" placeholder="Enter Transaction Id">
+                      </div>
+
+                    </div>
+
+                    <div class="row" style="margin-bottom: 12px;">
+                      <div class="col">
+                        <select id="dbselect" style="width:336px;margin-left: -14px;" multiple="multiple">
+                          <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+                        </select>
+                      
+                      </div>
+                     
+                    <div class="col">
+                      <input type="text" class="form-control" formControlName="Remarks" placeholder="Enter Remark">
+                    </div>
+                    </div>
+
+                    <div class="row" style="margin-bottom: 12px;">
+                      <div class="col">
+                        <select formControlName="Items" id="inputState" class="form-control">
+                          <option value="" disabled selected>Select Items</option>
+                          <option *ngFor="let item of items" [value]="item">{{item}}</option>
+                        </select>
+                      </div>
+
+                      <div class="col">
+                        <select formControlName="PaymentMode" id="inputState" class="form-control">
+                          <option value="" disabled selected>Select Payment Mode</option>
+                          <option *ngFor="let item of PaymentMode" [value]="item">{{item}}</option>
+                        </select>
+                      </div>
+                      </div>
+
+                      <div class="row">
+                        <div class="col">
+                        <select formControlName="Status" id="inputState" class="form-control">
+                          <option value="" disabled selected>Select Status</option>
+                          <option value="Pending">Pending</option>
+                          <option value="Paid">Paid</option>
+                        </select>
+                        </div>
+
+                        <div class="col">
+                          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+                            formControlName="date" type="text">
+
+                        </div>
+                      </div>
+                      <div class="card-footer mt-4 text-center">
+                        <button class="btn btn-primary"  data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"aria-controls="collapseOne" (click)="addPayment()">{{buttonText}}</button>
+
+                      </div>
+                  </form>
+                  </div>
+                </div>
+              </div>
+
+              </div>
+            
+           
+
+            </div>
+
+
+            </div>
+          </div>
+        </div>
+        <div class="card-footer text-center" >
+          <button  class='btn btn-danger' (click)="dialogRef.close()"> Close <i
+              class="fas fa-times-circle"></i></button>
+        </div>
+      <!-- </div> -->
+      
+    <!-- </div>  -->
+  <!-- </div> -->
+<!-- </div> -->
\ No newline at end of file
diff --git a/src/app/add/view-customer-details/view-customer-details.component.scss b/src/app/add/view-customer-details/view-customer-details.component.scss
new file mode 100644
index 0000000..af60775
--- /dev/null
+++ b/src/app/add/view-customer-details/view-customer-details.component.scss
@@ -0,0 +1,307 @@
+button,
+input {
+  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+}
+
+a {
+  color: #f96332;
+}
+
+a:hover,
+a:focus {
+  color: #f96332;
+}
+
+p {
+  line-height: 1.61em;
+  font-weight: 300;
+  font-size: 1.2em;
+}
+
+.category {
+  text-transform: capitalize;
+  font-weight: 700;
+  color: #9a9a9a;
+}
+
+body {
+  color: #2c2c2c;
+  font-size: 14px;
+  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+  overflow-x: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.nav-item .nav-link,
+.nav-tabs .nav-link {
+  -webkit-transition: all 300ms ease 0s;
+  -moz-transition: all 300ms ease 0s;
+  -o-transition: all 300ms ease 0s;
+  -ms-transition: all 300ms ease 0s;
+  transition: all 300ms ease 0s;
+}
+
+.card a {
+  -webkit-transition: all 150ms ease 0s;
+  -moz-transition: all 150ms ease 0s;
+  -o-transition: all 150ms ease 0s;
+  -ms-transition: all 150ms ease 0s;
+  transition: all 150ms ease 0s;
+}
+
+[data-toggle="collapse"][data-parent="#accordion"] i {
+  -webkit-transition: transform 150ms ease 0s;
+  -moz-transition: transform 150ms ease 0s;
+  -o-transition: transform 150ms ease 0s;
+  -ms-transition: all 150ms ease 0s;
+  transition: transform 150ms ease 0s;
+}
+
+[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.now-ui-icons {
+  display: inline-block;
+  font: normal normal normal 14px/1 "Nucleo Outline";
+  font-size: inherit;
+  //   speak: none;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@-webkit-keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes nc-icon-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.now-ui-icons.objects_umbrella-13:before {
+  content: "\ea5f";
+}
+
+.now-ui-icons.shopping_cart-simple:before {
+  content: "\ea1d";
+}
+
+.now-ui-icons.shopping_shop:before {
+  content: "\ea50";
+}
+
+.now-ui-icons.ui-2_settings-90:before {
+  content: "\ea4b";
+}
+
+.nav-tabs {
+  border: 0;
+  padding: 15px 0.7rem;
+}
+
+.nav-tabs:not(.nav-tabs-neutral) > .nav-item > .nav-link.active {
+  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
+}
+
+.card .nav-tabs {
+  border-top-right-radius: 0.1875rem;
+  border-top-left-radius: 0.1875rem;
+}
+
+.nav-tabs > .nav-item > .nav-link {
+  color: #888888;
+  margin: 0;
+  margin-right: 5px;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 30px;
+  font-size: 14px;
+  padding: 11px 23px;
+  line-height: 1.5;
+}
+
+.nav-tabs > .nav-item > .nav-link:hover {
+  background-color: transparent;
+}
+
+.nav-tabs > .nav-item > .nav-link.active {
+  background-color: #444;
+  border-radius: 30px;
+  color: #ffffff;
+}
+
+.nav-tabs > .nav-item > .nav-link i.now-ui-icons {
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  margin-right: 3px;
+}
+
+.nav-tabs.nav-tabs-neutral > .nav-item > .nav-link {
+  color: #ffffff;
+}
+
+.nav-tabs.nav-tabs-neutral > .nav-item > .nav-link.active {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.card {
+  border: 0;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  //   margin-bottom: 30px;
+  //   box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+}
+
+.card .card-header {
+  background-color: transparent;
+  border-bottom: 0;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+
+.card[data-background-color="orange"] {
+  background-color: #2d4262;
+}
+
+.card[data-background-color="red"] {
+  background-color: #ff3636;
+}
+
+.card[data-background-color="yellow"] {
+  background-color: #ffb236;
+}
+
+.card[data-background-color="blue"] {
+  background-color: #2ca8ff;
+}
+
+.card[data-background-color="green"] {
+  background-color: #15b60d;
+}
+
+[data-background-color="orange"] {
+  background-color: #2d4262;
+}
+
+[data-background-color="black"] {
+  background-color: #2c2c2c;
+}
+
+[data-background-color]:not([data-background-color="gray"]) {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"]) p {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"])
+  a:not(.btn):not(.dropdown-item) {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"])
+  .nav-tabs
+  > .nav-item
+  > .nav-link
+  i.now-ui-icons {
+  color: #ffffff;
+}
+
+@font-face {
+  font-family: "Nucleo Outline";
+  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
+  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot")
+    format("embedded-opentype");
+  src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.now-ui-icons {
+  display: inline-block;
+  font: normal normal normal 14px/1 "Nucleo Outline";
+  font-size: inherit;
+  //   speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+footer {
+  margin-top: 50px;
+  color: #555;
+  background: #fff;
+  padding: 25px;
+  font-weight: 300;
+  background: #f7f7f7;
+}
+.footer p {
+  margin-bottom: 0;
+}
+footer p a {
+  color: #555;
+  font-weight: 400;
+}
+
+footer p a:hover {
+  color: #e86c42;
+}
+
+@media screen and (max-width: 768px) {
+  .nav-tabs {
+    display: inline-block;
+    width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    text-align: center;
+  }
+
+  .nav-tabs .nav-item > .nav-link {
+    margin-bottom: 5px;
+  }
+}
+.mat-dialog-container {
+  padding: 0px !important;
+}
diff --git a/src/app/add/view-customer-details/view-customer-details.component.spec.ts b/src/app/add/view-customer-details/view-customer-details.component.spec.ts
new file mode 100644
index 0000000..6da6923
--- /dev/null
+++ b/src/app/add/view-customer-details/view-customer-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewCustomerDetailsComponent } from './view-customer-details.component';
+
+describe('ViewCustomerDetailsComponent', () => {
+  let component: ViewCustomerDetailsComponent;
+  let fixture: ComponentFixture<ViewCustomerDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewCustomerDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewCustomerDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/add/view-customer-details/view-customer-details.component.ts b/src/app/add/view-customer-details/view-customer-details.component.ts
new file mode 100644
index 0000000..d8cbbd6
--- /dev/null
+++ b/src/app/add/view-customer-details/view-customer-details.component.ts
@@ -0,0 +1,640 @@
+import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+import { OtpScreenComponent } from '../otp-screen/otp-screen.component';
+import { saveAs } from 'file-saver';
+import { ShowPullDataLinkComponent } from '../show-pull-data-link/show-pull-data-link.component';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ResetPasswordComponent } from '../reset-password/reset-password.component';
+declare var swal: any;
+declare var $:any;
+@Component({
+  selector: 'app-view-customer-details',
+  templateUrl: './view-customer-details.component.html',
+  styleUrls: ['./view-customer-details.component.scss']
+})
+export class ViewCustomerDetailsComponent implements OnInit {
+  testDocuments;
+   documentList = [
+    {
+      "docId": "Adhar card",
+      "docName": "Adhar Card"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+  otp
+  data_descip
+  doclist:boolean=true;
+  showUpload: boolean=false;
+  Load: boolean;
+  uploadStatus: any = 'Upload';
+  ifuploadArr: boolean ;
+  useridForDocUpload: any;
+  disableDelete: boolean;
+  errorMsg: string;
+  showError: boolean = false;
+  dealerStatus: any;
+  superAdmin: any;
+  superadminAccess: any;
+  imageuploadObject = [];
+  label: any;
+   modalRef: BsModalRef;
+  header: any;
+  useridd;
+  options: any=[{selectedValue : '',value:''}];
+  transactionForm:FormGroup;
+  items=['New GPS','GPS Renewal','Service','SIM + Software','Software','SIM']
+  PaymentMode =['Cash','Cheque','Net Banking','UPI','Wallet','Others']
+  custtype: any;
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(public dialogRef: MdDialogRef<ViewCustomerDetailsComponent>,private fb:FormBuilder,public dialog: MdDialog,private contactService: ContactService,private modalService: BsModalService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      this.testDocuments = this.data.imageDoc;
+      console.log(data,this.testDocuments);
+      this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      if(this.testDocuments){
+        console.log("INDJj");
+        
+        if(this.testDocuments.length != 0){
+        for(var i=0;i<this.testDocuments.length;i++){
+          if(this.testDocuments[i].image){
+            var ext=this.testDocuments[i].image.split('.').pop(); 
+            this.testDocuments[i].ext=ext
+            this.testDocuments[i].image=(this.testDocuments[i].image).substring(6);
+    
+          }
+        }
+         this.doclist = false;
+      }
+      }else{
+        this.doclist = true;
+      }
+    
+    
+       this.useridForDocUpload = this.data.dealer_id?this.data.dealer_id:this.data._id
+       this.getVehicles(this.data)
+    }
+
+  ngOnInit() {
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.transactionForm=this.fb.group({
+      Amount:[''],
+      Customer_ID:this.data._id,
+      Status:[''],
+      TransactionID:[''],
+      Remarks:[''],
+      VehicleNo:[''],
+      Items :[''],
+      PaymentMode:[''],
+      supAdmin: this.useridd,
+      date:new Date()
+     })
+     this.getPayments()
+     
+  }
+
+
+getVehicles(data:any){
+  
+  this.contactService.get('/devices/getDeviceByUser?email='+data.email+'&id='+data._id).subscribe((resp:any) => {
+    console.log('device api respoonse=>',resp);
+    for(let i=0;i<resp.devices.length;i++){
+  
+            // if(resp.devices[i].type_of_device =="Tracker"){
+              let a ={
+                value : resp.devices[i].Device_Name,
+                viewValue:resp.devices[i].Device_Name,
+                did:resp.devices[i].Device_ID,
+                id:resp.devices[i]._id,
+                user:resp.devices[i].user,
+                  
+              }
+             
+            
+                a['selectedValue'] = resp.devices[i]._id ; 
+              
+              this.options.push(a);
+            // }
+          }
+          this.loadropdown()
+  })
+}
+
+ loadropdown() {
+    let that = this;
+    
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    // ||(this.componentIdentifier === 'notification_master')
+  
+  
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 384,
+          placeholder: 'Select Vehicles',
+          filter: true,
+          // single: false,
+          // selectAll: false
+   
+        })
+    
+      //  that.showLoader = false;
+      }, 100);
+      
+
+   
+  }
+
+  verify(){
+
+     let dialogRef = this.dialog.open(OtpScreenComponent,{
+        //   width: '800px',
+        // //  height: '600px', 
+        disableClose: true,
+        data:this.data
+    
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+         console.log(result);
+         
+          if (result.value == "done") {
+          this.data.phone_verfi=true;
+    
+          }
+        });
+
+  }
+
+
+  
+  downloadDoc(doc:any){
+    console.log(doc.image);
+    var imageLink = doc.image; 
+    var filetext  = imageLink.split('.');
+    console.log(filetext[1]);
+    
+    this.contactService.DownloadDocument(doc.image).subscribe(res=>{
+      console.log(res);
+      this.saveToFileSystem(res,doc,filetext[1]);
+    },err=>{
+      console.log(err);
+    })
+  }
+
+  private saveToFileSystem(response,doc,fileex) { 
+    console.log(response._body);
+    if(fileex == 'pdf'){
+      console.log("Inside pdf");
+      var blob = new Blob([response._body], { type: "application/pdf" });
+    }else{
+      var blob = new Blob([response._body], { type: "image/png" });
+    }
+   
+    var filename = doc.doctype+'_'+doc.phone;
+    // console.log(filename);
+    saveAs(blob,filename);
+  }
+
+  deleteDoc(doc,index){
+    console.log(index);
+    console.log(doc);
+
+  }
+
+  Adddocuments(doc){
+    console.log(doc);
+    this.disableDelete = true;
+    this.showUpload = true;
+    if(this.imageuploadObject.length == 0){
+      this.ifuploadArr = false;
+    }
+  }
+
+  docRow:boolean=false;
+  AddDocumentsField(addedRow:any){
+    console.log("Inside function !!!");
+      if(addedRow){    
+        this.docRow = true;
+      }
+       var obj={doctype:'',image:'',phone:''};
+       this.imageuploadObject.push(obj);
+       console.log(this.imageuploadObject);
+  }
+
+  DeleteDocumentsField(index){
+    console.log(this.imageuploadObject.length);
+    if(this.imageuploadObject.length == 1){
+      this.docRow = false;
+      this.showUpload = false;
+    }
+    this.imageuploadObject.splice(index, 1);
+
+  }
+  
+  documentType(docType){
+    console.log("doctypeObject=>",docType);
+
+  }
+  selectedFile: File;
+  onFileChanged(event) { 
+    console.log(event.target.files[0]);
+    this.selectedFile = <File>event.target.files[0];
+    console.log(this.selectedFile); 
+  }
+
+  onUpload(imgIndex) {
+    console.log(imgIndex);
+    console.log(this.imageuploadObject);
+    const fd = new FormData();
+    console.log("selected file name =>",this.selectedFile.name);
+    if(this.selectedFile.name == " "){
+      swal(
+        'Upload Error',
+        'Please select document type before upload !!!',
+        'error'
+      )
+    }else{
+      fd.append('photo',this.selectedFile,this.selectedFile.name)
+      console.log("imgURL=>",fd) ;
+      this.Load = true;
+      this.contactService.imageupload(fd)
+      .subscribe(res=>{
+        this.Load = false;
+        this.ifuploadArr = true;
+   
+        console.log(res);
+        var resImage ='';
+        resImage = res['_body'];
+        console.log(res['_body']);
+        this.imageuploadObject[imgIndex].image = resImage;
+         console.log(this.imageuploadObject);
+    
+      },err=>{
+        this.Load= false;
+        // this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+      })
+    }
+   }
+
+
+   SaveDocuments(actionString,objIndex){
+    console.log(this.imageuploadObject);
+    console.log("Save");
+    var imageuploadArr = {
+      _id : this.useridForDocUpload
+    }
+    if(actionString == 'deldoc'){
+      this.testDocuments.splice(objIndex,1);
+      console.log("testArray after deleting doc =>",this.testDocuments); 
+    }
+     for(var d = 0 ;d <this.imageuploadObject.length;d++){
+      if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+            this.imageuploadObject.splice(d,1);         
+      }
+    }
+   console.log(this.imageuploadObject);
+   for(var j = 0;j< this.testDocuments.length;j++){
+        console.log(this.testDocuments[j]);
+        this.imageuploadObject.push(this.testDocuments[j]);
+   }
+   
+   imageuploadArr['imageDoc'] = this.imageuploadObject;
+   console.log(this.imageuploadObject.length);
+   this.contactService.updateImage(imageuploadArr).subscribe(res=>{
+     console.log(res);
+     if(actionString != 'deldoc'){
+      // this.thisDialogRef.close("imageupdated"); 
+     }   
+     if(actionString == 'deldoc'){
+      this.imageuploadObject = [];
+     }
+   },err=>{
+    // this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+   })
+   }
+
+   expand(value){
+     console.log(value);
+     if(value){
+       document.getElementById('container').style.width='80vh'
+     }else{
+       
+     }
+     
+
+   }
+
+   
+changeKYC(event){
+  console.log(event);
+  var req={
+    user:this.data.dealer_payload._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+    //  this.tost1('kyc');
+    this.dialogRef.close('yes')
+  })
+  
+}
+
+openModal(template: TemplateRef<any>,data) {
+    this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+    this.header=data.doctype
+    // this.image='https://www.oneqlik.in/'+data.image
+  }
+
+  onChange(cust, ev) {
+ 
+    let status = ev;
+    // console.log(status.checked);
+
+    let cust_status = cust;
+    let cust_id = cust._id;
+    let cust_activity = cust.status
+    // console.log(cust_activity);
+
+
+    var cust_load = {
+      "uId": cust_id,
+      "loggedIn_id": this.useridd,
+      "status": status.checked
+    }
+    // console.log(cust_id);
+
+
+    console.log(cust_load);
+    this.contactService.custStatus(cust_load)
+      .subscribe(res => {
+        let a = res;
+        // console.log(a);
+        // console.log("Status changed");
+      })
+  }
+
+  accountStatus:boolean = true;
+accountStatusOnChange(custObj, event){
+
+
+    console.log(custObj,event.checked);
+    var payload = {
+      accountSuspended : event.checked,
+      acoountId : custObj._id  ,
+      suspendedBy : 'distributer' 
+    }
+      var that = this;
+    swal("Are you sure ?", "Do you want to change account status ?").then((ans)=>{
+      console.log(ans);
+      that.contactService.accountSuspend(payload).subscribe(res=>{
+        console.log(res);
+        // that.getCustomer();
+        that.data_descip =  "Account Status Changed";
+        launch_toast();
+        function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }    
+      })
+     
+    },err=>{
+      // that.getCustomer();
+      console.log(err);
+    });
+  
+}
+
+adm_alert:boolean=false;
+alertStatus(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    adminAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    // this.tost1('alertset');
+  })
+
+}
+
+dealerAlert(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    dealerAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    // this.tost1('alertset');
+  })
+
+}
+
+
+generatePullData(ev,data){
+  // if(ev.checked){
+    console.log(ev,data);
+
+    var request={
+      pullData:ev.checked,
+      pass:data.pass
+    }
+    if(data.user_id){
+      request['user_id']=data.user_id
+    }
+     if(data.phone){
+      request['phone']=data.phone
+    }
+    console.log(request);
+    
+    this.contactService.post('/users/getToken',request).subscribe((res:any)=>{
+      console.log(res);
+      if(ev.checked){
+        let dialogRef = this.dialog.open(ShowPullDataLinkComponent, {
+          width: '800px',
+        //  height: '600px', 
+          data:res.token
+        });
+      }
+      
+    })
+
+
+}
+
+show:boolean=false;
+ verify1(){
+  console.log(this.otp);
+    this.contactService.post('/users/verifyOtp',{user:this.data._id,otp:this.otp}).subscribe((res:any)=>{
+      this.data_descip = res.message;
+      launch_toast()
+      this.dialogRef.close({value:'done'});
+    },err=>{
+      console.log(err);
+      var message=JSON.parse(err._body);
+      console.log(message);
+      
+      this.data_descip = "You entered wrong OTP"
+      this.show=true;
+      var that=this;
+      //  this.data_descip = res.message;
+      launch_toast()
+     setTimeout(function () {that.show=false  }, 4500);
+    })
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+       setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+ }
+
+ add:boolean=true;
+
+addPayment(){
+  if(this.buttonText=="Update"){
+    this.updatePayment()
+  }else{
+    this.transactionForm.patchValue({
+      VehicleNo:$('#dbselect').multipleSelect('getSelects','value')
+  
+    })
+  
+    this.contactService.post('/CustomerPayment/add',this.transactionForm.value).subscribe(res=>{
+      // console.log(res);
+        this.getPayments()
+    })
+  }
+
+
+}
+payementsArray
+getPayments(){
+this.payementsArray=[]
+  this.contactService.get('/CustomerPayment/get?Customer_ID='+this.data._id).subscribe(res=>{
+    // console.log(res);
+    this.payementsArray=res
+  })
+
+}
+paymentId
+buttonText="Save"
+editPayment(data){
+  this.paymentId=data._id
+  this.transactionForm.patchValue({
+         Customer_ID:data.Customer_ID,
+        Amount:data.Amount,
+        Items:data.Items,
+        PaymentMode:data.PaymentMode,
+        Remarks:data.Remarks,
+        Status:data.Status,
+        TransactionID:data.TransactionID,
+        VehicleNo:data.VehicleNo,
+        supAdmin:data.supAdmin,
+  })
+this.buttonText="Update";
+this.add=!this.add;
+  
+}
+
+updatePayment(){
+  this.contactService.post('/CustomerPayment/update',{id:this.paymentId,data:this.transactionForm.value}).subscribe(res=>{
+    this.getPayments()
+  })
+}
+
+deletePayment(data){
+  this.contactService.post('/CustomerPayment/delete',{_id:data._id}).subscribe(res=>{
+    this.getPayments()
+  })
+}
+
+addButton(){
+  this.add=!this.add;
+  this.buttonText="Save";
+  // this.transactionForm.reset()
+}
+
+shareUserCredential(){
+    console.log('this.data',this.data);
+    var cost_id = this.data._id;
+    this.contactService.shareCostumerInfo(cost_id).subscribe(res=>{
+      console.log(res);
+      let message =res.message;
+      let action
+      // this.snackBar.open(message, action, {
+      //   duration: 4000,
+      // });
+   
+    },err=>{
+      console.log(err);
+    })
+
+    
+  }
+
+  resetPassword(){
+    // console.log("Inside reset",cust_array);
+    let dialogRef = this.dialog.open(ResetPasswordComponent, {
+      width: '400px',
+      data : this.data
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "succ") {
+        // this.tost1("password_changed");
+        this.ngOnInit();
+      }
+
+      if (result == "close") {
+        // this.tost1("succ");
+        // this.ngOnInit();
+      }
+    });
+    
+  }
+
+}
diff --git a/src/app/addpoi-bylocation/addpoi-bylocation.component.html b/src/app/addpoi-bylocation/addpoi-bylocation.component.html
new file mode 100644
index 0000000..abb4507
--- /dev/null
+++ b/src/app/addpoi-bylocation/addpoi-bylocation.component.html
@@ -0,0 +1,28 @@
+<p style="text-align: center;font-size: 25px;">{{'Add POI' | translate}}</p>
+<div class="row" style="padding-bottom: 15px;">
+  <div class="col-md-4 col-lg-4 col-sm-4" style="padding-top: 15px;">
+      <md-form-field>
+      <input mdInput type="text" style="width: inherit;border-radius: 10px;" [(ngModel)]="poiName" name="poiName" placeholder="{{'Enter POI name' | translate}}">
+      </md-form-field>
+  </div>
+  <div class="col-md-4 col-lg-4 col-sm-4" style="padding-top: 15px;">
+      <!-- <input mdInput type="text"  style="width: inherit;border-radius: 10px;" [(ngModel)]="address" name="Address" placeholder="Enter Address"> -->
+      <md-form-field>
+        <input disabled="true" type="text" mdInput name="text" style="width: inherit;border-radius: 10px;" id="txtSource" [(ngModel)]="address_show" placeholder="{{'Enter Address' | translate}}">
+      </md-form-field>
+  </div>
+  <div class="col-md-4 col-lg-4 col-sm-4">
+    <span>POI Type</span>
+    <select [(ngModel)]="poitype" class="form-control" name="poitype" >
+      <option *ngFor="let type of poiType; let i = index;" [value]="type.value" >{{type.view}}</option>
+      </select>
+</div>
+</div>
+<div class="row">
+  <div class="col-sm-6" style="padding-left: 25%;">
+    <button (click)="saveDetails()" style="background-color: green" class="btn btn-primary btn-block">{{'Save' | translate}}</button>       
+  </div>
+  <div class="col-sm-6" style="padding-right: 25%;">
+    <button class="btn btn-primary btn-block" (click)="close()" style="background-color: #ff0f0f">{{'Cancel' | translate}}</button>  
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/addpoi-bylocation/addpoi-bylocation.component.scss b/src/app/addpoi-bylocation/addpoi-bylocation.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/addpoi-bylocation/addpoi-bylocation.component.spec.ts b/src/app/addpoi-bylocation/addpoi-bylocation.component.spec.ts
new file mode 100644
index 0000000..9fb70eb
--- /dev/null
+++ b/src/app/addpoi-bylocation/addpoi-bylocation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddpoiBylocationComponent } from './addpoi-bylocation.component';
+
+describe('AddpoiBylocationComponent', () => {
+  let component: AddpoiBylocationComponent;
+  let fixture: ComponentFixture<AddpoiBylocationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddpoiBylocationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddpoiBylocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/addpoi-bylocation/addpoi-bylocation.component.ts b/src/app/addpoi-bylocation/addpoi-bylocation.component.ts
new file mode 100644
index 0000000..d1f41bc
--- /dev/null
+++ b/src/app/addpoi-bylocation/addpoi-bylocation.component.ts
@@ -0,0 +1,188 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+declare var google: any;
+@Component({
+  selector: 'app-addpoi-bylocation',
+  templateUrl: './addpoi-bylocation.component.html',
+  styleUrls: ['./addpoi-bylocation.component.scss']
+})
+export class AddpoiBylocationComponent implements OnInit {
+  poiName:any;
+  address:any;
+  useridd: any;
+  Saddress: any;
+  lattitude:any;
+  longitude:any;
+  poitype:any;
+  poiType=[
+    {view : "Provider",value:""},
+     {view : "Customer",value:"customer"},
+      {view : "Garage",value:"garage"}, 
+      {view : "Emergency",value:"emergency"},
+       {view : "Others",value:"others"}, 
+       {view : "Gas Station",value:"gas_station"},
+       {view :"Residence",value : "residence"},
+       {view : "City",value:"city"},
+       {view : "Work",value:"work"},
+        {view : "Resturant",value:"resturant"}, 
+        {view : "Shopping",value:"shopping"},
+         {view : "Bank",value:"bank"}, 
+         {view : "School",value:"school"},
+         {view :"Super Market",value : "supermarket"},
+         {view :"Gym",value : "gym"},
+         {view : "Home", value : "home"},
+         {view :"Grocery Store",value : "grocery_store"}
+  ];
+
+  constructor(public dialogRef: MdDialogRef<AddpoiBylocationComponent>,@Inject(MD_DIALOG_DATA) public data: any,public contactService: ContactService) {
+    // console.log("deviceInfo=>",data);
+    this.lattitude = data.deviceData.lat;
+    this.longitude = data.deviceData.long;
+    console.log('this.lattitude',this.lattitude);
+    console.log('this.longitude',this.longitude);
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   }
+
+  ngOnInit() {
+    // this.Saddress = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+    this.getAddress();
+
+  }
+
+ 
+
+  saveDetails(){
+    // console.log(this.address_show);
+    var locationObj = {
+      'type' : 'Point',
+      "coordinates": [this.longitude,this.lattitude]
+    }
+    // this.Saddress = document.getElementById('txtSource');
+    // this.address =this.Saddress.value;
+  var poiObj = {
+    poi:  [
+      {  
+        "location": locationObj,
+        "poiname" : this.poiName,       
+        "status": "Active",
+        "address" : this.address_show,
+        "user" : this.useridd,
+        "radius" : 30
+      }
+    ]
+  }
+
+  if(this.poitype != undefined){
+    poiObj.poi[0]['poi_type'] = this.poitype ; 
+  }
+
+    this.contactService.addOnePoi(poiObj)
+      .subscribe(res=>{
+        // console.log(res);
+      },err=>{
+        // console.log(err);
+      })
+    // console.log(poiObj);
+    this.dialogRef.close("success");
+  }
+
+  close(){
+    this.dialogRef.close();
+  }
+
+  address_show:any;
+  getAddress() {
+
+    var outerThis = this;
+
+    let d_lat = (this.lattitude != undefined)?this.lattitude : null;
+  let d_lng = (this.longitude != undefined)?this.longitude : null;
+
+
+  var latlng_1 =
+  {
+    "lat": d_lat,
+    "long":  d_lng
+  }
+  this.contactService.getAddressByApi(latlng_1).subscribe(res=>{   
+  
+    if(res.message == "Address not found in databse"){
+      let geocoder = new google.maps.Geocoder();
+      let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+
+      let request = {
+        latLng: t_latlng
+      };
+      geocoder.geocode(request, function (data, status) {
+        if (status == google.maps.GeocoderStatus.OK) {
+          if (data[0] != null) {
+            outerThis.address_show = data[0].formatted_address;
+            // console.log(outerThis.address_show);
+         
+          } else {
+            // console.log("No address available")
+            outerThis.address_show = "No address available";
+          }
+        }
+        else {
+
+          outerThis.address_show = 'NA';
+
+
+        }
+
+      })
+    }else{
+     
+      outerThis.address_show = res.address;
+    }
+  })
+
+
+
+
+
+    // if (this.lattitude== undefined) {
+    //   this.lattitude = null;
+    //   this.longitude = null;
+    // } 
+    // var geocoder = new google.maps.Geocoder();
+    // var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+
+    // var request = {
+    //   latLng: latlng
+    // };
+
+
+
+    // geocoder.geocode(request, function (data, status) {
+    //   if (status == google.maps.GeocoderStatus.OK) {
+    //     if (data[0] != null) {
+    //       outerThis.address_show = data[0].formatted_address;
+       
+
+    //     } else {
+
+    //       outerThis.address_show = "No address available";
+    //     }
+    //   }
+    //   else {
+
+    //     outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+     
+
+    //   }
+
+    // })
+
+
+  }
+
+  
+}
+
+
+
+  
\ No newline at end of file
diff --git a/src/app/address-update/address-update.component.html b/src/app/address-update/address-update.component.html
new file mode 100644
index 0000000..f613d45
--- /dev/null
+++ b/src/app/address-update/address-update.component.html
@@ -0,0 +1,43 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Address' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+   
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+         
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;"></th>
+                        <th style="text-align:left;">{{'Current address' | translate}} </th>
+                        <th style="text-align:left;">{{'Suggested address' | translate}} </th>
+                        <th style="text-align:left;">{{'Added On' | translate}}</th>
+                        <th style="text-align:left;">{{'Status' |translate}}</th>
+                        <th style="text-align:left;">{{'Added By' | translate}}</th>
+                        <th style="text-align:left;">{{'Location Point' | translate}}</th>
+                        <th style="text-align:left;">{{'Update Address' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/address-update/address-update.component.scss b/src/app/address-update/address-update.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/address-update/address-update.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/address-update/address-update.component.spec.ts b/src/app/address-update/address-update.component.spec.ts
new file mode 100644
index 0000000..25849fd
--- /dev/null
+++ b/src/app/address-update/address-update.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddressUpdateComponent } from './address-update.component';
+
+describe('AddressUpdateComponent', () => {
+  let component: AddressUpdateComponent;
+  let fixture: ComponentFixture<AddressUpdateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddressUpdateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddressUpdateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/address-update/address-update.component.ts b/src/app/address-update/address-update.component.ts
new file mode 100644
index 0000000..4127722
--- /dev/null
+++ b/src/app/address-update/address-update.component.ts
@@ -0,0 +1,258 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+declare var moment,$:any;
+declare var swal:any;
+
+@Component({
+  selector: 'app-address-update',
+  templateUrl: './address-update.component.html',
+  styleUrls: ['./address-update.component.scss']
+})
+export class AddressUpdateComponent implements OnInit {
+  addressArr:any=[];
+  tabelObj: any;
+  useridd: any;
+  identifier:any='addressComponent'
+  constructor(public dialog: MdDialog, private router: Router, private contactService: ContactService) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    var td= this.todate.setHours(0,0,0,0);
+    this.todate = new Date(td);
+    this.testTable();
+
+  }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+            'serverSide': true,
+            "processing": true,
+            "searching": false,
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            "scrollY":'65vh',
+            // "ordering": true,
+            order: [[0, 'desc']],  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              // dataTablesParameters.op = {};
+              // dataTablesParameters.select = [];
+              // dataTablesParameters.find = {};
+              // dataTablesParameters.columns = [
+              //     { data: "_id","orderable": "true" },
+              //     { data: "address" },
+              //     { data: "current_address" },
+              //     { data: "createdBy.first_name" },
+              //     { data: "createdBy.last_name" },
+              //     { data: "createdOn" },
+              //     { data: "status" },
+              //     { data: "location.coordinates" },
+              //     { data: null, defaultContent: '' }
+              // ]
+
+              // if (that.Fromdate) {
+              //     var fdate = new Date(that.Fromdate).toISOString()
+              //     dataTablesParameters.find['createdOn'] = dataTablesParameters.find['createdOn'] ? dataTablesParameters.find['createdOn'] : {};
+              //     dataTablesParameters.find['createdOn']['$gte'] = fdate
+              // };
+            
+              // if (that.todate) {
+              //     var tdate = new Date(that.todate).toISOString()
+              //     dataTablesParameters.find['createdOn'] = dataTablesParameters.find['createdOn'] ? dataTablesParameters.find['createdOn'] : {};
+              //     dataTablesParameters.find['createdOn']['$lte'] = tdate;
+              // }
+              // dataTablesParameters.find['user'] = that.useridd;
+              var suburl = "";
+              suburl += "/googleAddress/test1";
+              that.contactService.getApprovalAddressList(that.useridd).subscribe(resp => {
+                  console.log("Response from datatable=>", resp); 
+            
+                  callback(resp);
+              }, err => {
+              
+              });
+            
+          },  
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+            $('#updateAddress',row).bind('click',()=>{
+            
+
+             
+              // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+              swal({
+                  // title: 'Are you sure?',
+                  text: "Do you want to approve this address ?",
+                  type: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Yes, approve'
+                }).then((result: { value: boolean; }) =>{                      
+                  if(result){
+                    var payLoad={
+                          lat : data.location.coordinates[1],
+                          long: data.location.coordinates[0],
+                          address : data.address,
+                          mid: data._id
+                    }
+                      that.contactService.changeAddress(payLoad).subscribe(res=>{
+                     
+                          swal(
+                              'Updated',
+                              'Address Updated',
+                              'success'
+                            )
+
+                            that.tabelObj.ajax.reload();
+                      })
+                  }                
+                });
+          })
+
+            },
+        
+            "columns": [
+              {
+                "data": "_id",
+                "visible":false,
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+          
+              {
+                "data": "current_address",
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+                {
+                    "data": "address",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {  
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "createdOn",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      var expDate = new Date(data);
+                      return data ? (moment(expDate).format('llll')) : "";  
+                    }
+                }, 
+                {
+                  "data": "status",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              }, 
+                {
+                  "data": "createdBy",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    console.log(row);
+                    var firstName=data.first_name?data.first_name:'';
+                    var lastName=data.last_name?data.last_name:''
+                    // var isUserename = row.user;
+                    // if(isUserename != undefined){
+                      // name = data.first_name?data.first_name:''
+                      // :''+ ' '+ data.last_name?data.last_name:'';
+                    // }
+                    return firstName+' '+lastName; 
+                  }
+              }, 
+              
+              {
+                "data": "location",
+                "defaultContent": "",
+                render: function(data, type, row) { 
+                      return data?(data.coordinates[1] + ',' + data.coordinates[0]):'';
+                }
+            }  ,
+            {                
+              "data":null,
+            
+              "render":function(data,type,row){
+                if(row.status == 'Pending'){
+                  return '<i id="updateAddress" style="cursor:pointer;color:red" class="fas fa-exclamation-triangle" title="Approve address"></i>'
+                }else{
+                  return '<i class="far fa-check-circle" style="cursor:pointer;color:green" title="Approved"></i>'
+                }
+            
+                     
+              }
+          }                      
+            ],  
+
+        });
+  
+    });
+  
+  }
+
+  Fromdate= new Date();
+  todate = new Date();
+
+  getReport(event){
+  
+    console.log("inside function");
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+  
+      this.Fromdate = fd;
+      this.todate = td;
+       this.tabelObj.ajax.reload();  
+   
+    }
+   
+  }
+
+  tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+  
+
+}
diff --git a/src/app/alert.component.ts b/src/app/alert.component.ts
new file mode 100644
index 0000000..63ffc4e
--- /dev/null
+++ b/src/app/alert.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Alert, AlertType } from './alert';
+import { AlertService } from './alert.service';
+
+@Component({
+   moduleId: module.id,
+   selector: 'alert',
+   templateUrl: './community/community.component.html'
+})
+
+export class AlertComponent {
+   alerts: Alert[] = [];
+
+   constructor(private alertService: AlertService) { }
+
+   ngOnInit() {
+       this.alertService.getAlert().subscribe((alert: Alert) => {
+           if (!alert) {
+               // clear alerts when an empty alert is received
+               this.alerts = [];
+               return;
+           }
+
+           // add alert to array
+           this.alerts.push(alert);
+       });
+   }
+
+   removeAlert(alert: Alert) {
+       this.alerts = this.alerts.filter(x => x !== alert);
+   }
+
+   cssClass(alert: Alert) {
+       if (!alert) {
+           return;
+       }
+
+       // return css class based on alert type
+       switch (alert.type) {
+           case AlertType.Success:
+               return 'alert alert-success';
+           case AlertType.Error:
+               return 'alert alert-danger';
+           case AlertType.Info:
+               return 'alert alert-info';
+           case AlertType.Warning:
+               return 'alert alert-warning';
+       }
+   }
+}
\ No newline at end of file
diff --git a/src/app/alert.service.ts b/src/app/alert.service.ts
new file mode 100644
index 0000000..009f4b8
--- /dev/null
+++ b/src/app/alert.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { Router, NavigationStart } from '@angular/router';
+import { Observable } from 'rxjs';
+import { Subject } from 'rxjs/Subject';
+ 
+import { Alert, AlertType } from './alert';
+ 
+@Injectable()
+export class AlertService {
+    private subject = new Subject<Alert>();
+    private keepAfterRouteChange = false;
+ 
+    constructor(private router: Router) {
+        // clear alert messages on route change unless 'keepAfterRouteChange' flag is true
+        router.events.subscribe(event => {
+            if (event instanceof NavigationStart) {
+                if (this.keepAfterRouteChange) {
+                    // only keep for a single route change
+                    this.keepAfterRouteChange = false;
+                } else {
+                    // clear alert messages
+                    this.clear();
+                }
+            }
+        });
+    }
+ 
+    getAlert(): Observable<any> {
+        return this.subject.asObservable();
+    }
+ 
+    success(message: string, keepAfterRouteChange = false) {
+        this.alert(AlertType.Success, message, keepAfterRouteChange);
+    }
+ 
+    error(message: string, keepAfterRouteChange = false) {
+        this.alert(AlertType.Error, message, keepAfterRouteChange);
+    }
+ 
+    info(message: string, keepAfterRouteChange = false) {
+        this.alert(AlertType.Info, message, keepAfterRouteChange);
+    }
+ 
+    warn(message: string, keepAfterRouteChange = false) {
+        this.alert(AlertType.Warning, message, keepAfterRouteChange);
+    }
+ 
+    alert(type: AlertType, message: string, keepAfterRouteChange = false) {
+        this.keepAfterRouteChange = keepAfterRouteChange;
+        this.subject.next(<Alert>{ type: type, message: message });
+    }
+ 
+    clear() {
+        // clear alerts
+        this.subject.next();
+    }
+}
\ No newline at end of file
diff --git a/src/app/alert.ts b/src/app/alert.ts
new file mode 100644
index 0000000..299f43b
--- /dev/null
+++ b/src/app/alert.ts
@@ -0,0 +1,11 @@
+export class Alert {
+    type: AlertType;
+    message: string;
+}
+ 
+export enum AlertType {
+    Success,
+    Error,
+    Info,
+    Warning
+}
\ No newline at end of file
diff --git a/src/app/all-menus/all-menus.component.html b/src/app/all-menus/all-menus.component.html
new file mode 100644
index 0000000..3e0342e
--- /dev/null
+++ b/src/app/all-menus/all-menus.component.html
@@ -0,0 +1,440 @@
+<nav class="navbar navbar-expand-lg navbar-light  custom_style" style="z-index: 20;">
+  <!-- <a class="navbar-brand" href="#">Navbar</a> -->
+  <!-- <img src={{this.logo}} > -->
+  <img src={{this.logo}} style="width:140px;padding-left: 10px;height: 50px;">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <!-- <div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }"> style="flex: 1;text-align: center;padding-left: 70px;"paddingLeft-->
+  <div class="collapse navbar-collapse list_style" id="navbarSupportedContent">
+    <div [ngClass]="paddingLeft?'changePadding1':'changePadding'">
+      <div>
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+            <!-- <i class="fas fa-user-shield" style="font-size: 20px;"></i> -->
+            <div data-toggle="dropdown">
+              <i class="fas fa-user-shield" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;
+              padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">
+                {{'Admin' | translate}}
+              </a>
+            </div>    
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+              
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="addressList('admin')">{{'Address approval' | translate}}</a>
+<!-- *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')" -->
+              <li class="dropdown-submenu dropdown_style" *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')">
+                <a class="nav-link dropdown-toggle"
+                  style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span style="margin-left: 13px;">Billing</span></a>
+                <ul class="dropdown-menu dropdown_style">
+                  <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="billing('report')"
+                    style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                    <a>{{'Billing Details' | translate}}</a></li>
+                  <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="deviceList()"
+                    style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                    <a>{{'Device List' | translate}}</a></li>
+                  <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="inActiveAdmins()"
+                    style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                    <a>{{'Inactive Admins' | translate}}</a>
+                  </li>
+                 
+                </ul>
+              </li>
+
+
+
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" (click)="Ddetail('admin')">{{'Driver Master' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="DModel('admin')">{{'Device Model' | translate}}</a>
+              <a *ngIf="superAdmin || custtype" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" (click)="deviceMaster('admin')">{{'Device Master' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="showIMEI" (click)="imeiFind('admin')">{{'IMEI Finder' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin || isOperator" (click)="deviceInventoryList('admin')">{{'Inventory List' | translate}}</a>
+              <li class="dropdown-submenu dropdown_style">
+                <a class="nav-link dropdown-toggle"
+                  style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span
+                    style="margin-left: 13px;">Installation</span></a>
+                <ul class="dropdown-menu dropdown_style">
+                  <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="technician('admin')"
+                    style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                    <a>{{'Technicians' | translate}}</a>
+                  </li>
+                  <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="jobCard('admin')"
+                    style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                    <a>{{'Job Card' | translate}}</a>
+                  </li>
+              
+                </ul>
+              </li>
+              <a class="dropdown-item" *ngIf="superAdmin"
+                style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+                 (click)="issueList('admin')">{{'Issue List' | translate}}</a>
+                <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin || custtype" (click)="messageUtility('admin')">{{'Message Utility' | translate}}</a>
+              
+                <li class="dropdown-submenu dropdown_style">
+                  <a class="nav-link dropdown-toggle"
+                    style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                    data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span
+                      style="margin-left: 13px;">Master</span></a>
+                  <ul class="dropdown-menu dropdown_style">
+                    <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="modelMaster('admin')"
+                      style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                      <a>{{'Model Master' | translate}}</a>
+                    </li>
+                    <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="RTOMaster('admin')"
+                      style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                      <a>{{'RTO Master' | translate}}</a>
+                    </li>
+              
+                  </ul>
+                </li>
+               
+              <!-- <a *ngIf="superAdmin" class="dropdown-item"
+                style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+                (click)="modelMaster('admin')">{{'Model Master' | translate}}</a> -->
+              <a *ngIf="superAdmin" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" (click)="subAdmin('admin')">{{'Subadmin' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="gpsMaster('admin')">{{'System Logs' | translate}}</a>
+                            <!-- <a class="dropdown-item"
+                              style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+                              *ngIf="superAdmin" (click)="RTOMaster('admin')">{{'RTO Master' | translate}}</a> -->
+
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="tutorialVideos('admin')">{{'Tutorial Videos' | translate}}</a>
+              <a class="dropdown-item"
+              style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+              *ngIf="showIMEI" (click)="userFinder('admin')">{{'User Finder' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="userMaster('admin')">{{'User Master' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin || custtype" (click)="VType('admin')">{{'Vehicle Type' | translate}}</a>
+
+
+                     <!-- <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="censorDetail('admin')">{{'Sensor Details' | translate}}</a> -->
+
+
+                   <!-- <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin || isOperator" (click)="commandQueue('admin')">{{'Comman Queue' | translate}}</a> -->
+                     <!-- commanQueue -->
+            </div>
+       
+          </li>
+          <li class="nav-item active hoverStyle" (click)="soon('soon')" style="cursor: pointer;padding-top: 5px;">
+            <i class="fas fa-home" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;">{{'Dashboard' | translate}} <span
+                class="sr-only">(current)</span></a>
+          </li>
+          <li class="nav-item hoverStyle" style="cursor: pointer;padding-top: 5px;" (click)="group('group')">      
+            <i class="fab fa-audible" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Groups' | translate}}</a>
+          </li>
+          <li class="nav-item dropdown hoverStyle" style="cursor: pointer;padding-top: 5px;">
+            <!-- <i class="fas fa-home" ></i> -->
+            <div data-toggle="dropdown">
+              <i class="fas fa-car" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown" role="button" 
+                aria-haspopup="true" aria-expanded="false">   {{'Vehicles' | translate}}</a>
+            </div>  
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;;" (click)="devi('devi')">{{'Vehicle List' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" (click)="reminder_list('devi')">{{'Maintenance Reminder' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" (click)="vehicleExpense('routes')">{{'Vehicle Expense' | translate}}</a>
+            <a *ngIf="superAdmin || custtype" class="dropdown-item"style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"(click)="deviceRenew('admin')">{{'Vehicle Renewal Report' | translate}}</a>
+            <a *ngIf="superAdmin || custtype" class="dropdown-item"
+              style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+              (click)="deviceInventory()">{{'Device Inventory' | translate}}</a>
+            </div>
+          </li>
+          <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+            <!-- <i class="fas fa-home" style="color:white"></i> -->
+            <div data-toggle="dropdown">
+              <i class="fas fa-road" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;"
+                id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">
+                {{'Tracking' | translate}}
+              </a>
+            </div>   
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+              <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="openNav('openNav')">{{'Live Tracking' | translate}}</a>
+              <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="TrackingHistory('devi')">{{'History Tracking' | translate}}</a>
+              <!-- <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="livetrack('devi')">{{'OpenMAp' | translate}}</a> -->
+            </div>
+          </li>
+          <li class="nav-item hoverStyle" style="cursor: pointer;padding-top: 5px;" (click)="geo('geo')">
+            <i class="fas fa-bullseye" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important"> {{'Geofencing' | translate}}</a>
+          </li>
+          <!-- <li class="nav-item dropdown hoverStyle" (click)="reports()" style="text-align: center;padding-top: 5px;cursor: pointer;"> 
+          <i class="fas fa-file" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important"> {{'Reports' |
+              translate}}</a>
+            </li> -->
+            <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+              <!-- <i class="fas fa-home" style="color:white"></i> -->
+              <div data-toggle="dropdown">
+              <i class="fas fa-file" style="color:white"></i>
+                <a class="nav-link dropdown-toggle"
+                  style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown"
+                  role="button" aria-haspopup="true" aria-expanded="false">
+                  {{'Reports' | translate}}
+                </a>
+              </div>
+              <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+                <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+                  class="dropdown-item" (click)="reports()">{{'Reports' | translate}}</a>
+                <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+                  class="dropdown-item" (click)="reportScedule()">{{'Schedule Report ' | translate}}</a>
+                <!-- <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="livetrack('devi')">{{'OpenMAp' | translate}}</a> -->
+              </div>
+            </li>
+            <!-- <div data-toggle="dropdown">
+              <i class="fas fa-file" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">  {{'Reports' |translate}} </a>
+            </div>
+            <div class="dropdown-menu dropdown_style" style="height: auto; overflow-y: auto;max-height: 600px;"
+              aria-labelledby="navbarDropdown">
+              <a *ngIf="this.reportArray[17].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="acReport('report')">{{'AC Reports' | translate}}</a>
+           
+              <a *ngIf="this.reportArray[0].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="report('report')">{{'Daily Reports' | translate}}</a>
+                    
+                    <a *ngIf="this.reportArray[0].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                    padding-bottom: 7px;
+                    font-size: 14px;" (click)="daily_logs('report')">{{'Daily Logs' | translate}}</a>
+              <a *ngIf="this.reportArray[1].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="daywisereport()">{{'Daywise Reports' | translate}}</a>
+                     <a *ngIf="this.reportArray[14].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                     padding-bottom: 7px;
+                     font-size: 14px;" (click)="distance_report('report')">{{'Distance Reports' | translate}}</a>
+                              <a *ngIf="this.reportArray[18].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                              padding-bottom: 7px;
+                              font-size: 14px;" (click)="driverPerformance('report')">{{'Driver Performance Reports' | translate}}</a>
+                    <a *ngIf="this.reportArray[9].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                    padding-bottom: 7px;
+                    font-size: 14px;" (click)="geofancingReport('report')">{{'Geofencing Reports' | translate}}</a>
+                      <a *ngIf="this.reportArray[4].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                      padding-bottom: 7px;
+                      font-size: 14px;" (click)="idleReport('routes')">{{'IDLE Reports' | translate}}</a>
+                           <a *ngIf="this.reportArray[13].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                           padding-bottom: 7px;
+                           font-size: 14px;" (click)="ignition_report('report')">{{'Ignition Reports' | translate}}</a>
+                            <a *ngIf="this.reportArray[21].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                            padding-bottom: 7px;
+                            font-size: 14px;" (click)="loadUnload('report')">{{'Loading Unloading Trip' | translate}}</a>
+                                  <a *ngIf="this.reportArray[13].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                                  padding-bottom: 7px;font-size: 14px;" (click)="notification('notification')">{{'Notification Center' | translate}}</a>
+                            
+              <a *ngIf="this.reportArray[10].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="overspeed('report')">{{'Overspeeding Reports' | translate}}</a>
+                      <a *ngIf="this.reportArray[15].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                      padding-bottom: 7px;
+                      font-size: 14px;" (click)="POI_report('report')">{{'POI Reports' | translate}}</a>
+                         <a *ngIf="this.reportArray[11].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                         padding-bottom: 7px;
+                         font-size: 14px;" (click)="routeViolation('report')">{{'Route variations Reports' | translate}}</a>
+              <a *ngIf="this.reportArray[2].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="report_speed('report')">{{'Speed Variation' | translate}}</a>
+                                
+              <a *ngIf="this.reportArray[8].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="summaryReport('report')">{{'Summary Reports' | translate}}</a>
+               <a *ngIf="this.reportArray[12].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+               padding-bottom: 7px;
+               font-size: 14px;" (click)="stoppage_report('report')">{{'Stoppage Reports' | translate}}</a>
+                        <a *ngIf="this.reportArray[16].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                        padding-bottom: 7px;
+                        font-size: 14px;" (click)="SOS_report('report')">{{'SOS Reports' | translate}}</a>
+             
+              <a *ngIf="this.reportArray[6].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="trip_report('report')">{{'Trip Reports' | translate}}</a>
+                   
+              <a *ngIf="this.reportArray[7].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="travelPath('report')">{{'Travel Path Reports' | translate}}</a>
+      
+     
+          
+     
+                        <a *ngIf="this.reportArray[18].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                        padding-bottom: 7px;
+                        font-size: 14px;" (click)="workingHour('report')">{{'Working Hours Reports' | translate}}</a>
+                        
+                        <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" (click)="mainReport()">{{'Maintenance Reports' | translate}}</a>
+            </div> -->
+          <!-- </li> -->
+          <li class="nav-item dropdown hoverStyle" style="text-align: center" style="cursor: pointer;padding-top: 5px;">
+            <!-- <i class="fas fa-home" style="color:white"></i> -->
+            <div  data-toggle="dropdown">
+              <i class="fas fa-map-marker-alt" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important" id="navbarDropdown"
+                role="button" aria-haspopup="true" aria-expanded="false">  
+              {{'POI List' | translate}}
+              </a>
+            </div>
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown" style="cursor: pointer;"
+              (click)="POIlist('routes')">
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;">{{'POI List' | translate}}</a>
+            </div>
+          </li>
+          <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+            <div data-toggle="dropdown">
+              <i class="fab fa-bandcamp" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important"
+                id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false"> 
+                {{'Routes' | translate}} </a>
+            </div>  
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" (click)="vehicleRoute('routes')">{{'Route list' | translate}}</a>
+              <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" (click)="route_map('routes')">{{'Manage Trips' | translate}}</a>
+              <a class="dropdown-item"
+                style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+                (click)="route_plan('route_plan')">{{'Route Plan' | translate}}</a>
+                <a class="dropdown-item"
+                  style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+                  (click)="route_planReport('route_plan')">{{'Route Plan Report' | translate}}</a>
+            </div>
+          </li>
+          <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+            <div data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
+              <!-- <i class="fab fa-bandcamp" style="color:white"></i> -->
+              <!-- <i class="fa fa-border-all" ></i> -->
+              <i class="fab fa-accusoft" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important" id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">  {{'Sensor' | translate}} </a>
+            </div>        
+            <!-- <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a> -->
+            <ul class="dropdown-menu" style="padding: 0;">
+                <li class="dropdown-submenu dropdown_style">
+                    <a  class="nav-link dropdown-toggle" style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> Fuel</a>
+                    <ul class="dropdown-menu dropdown_style" >    
+                        <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="fuel_report('routes')" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"><a >{{'Fuel Chart' | translate}}</a></li>
+                        <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style"  (click)="dev_fuel_report()" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"><a >{{'Consumption Reports' | translate}}</a></li>
+                        <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="fuel_report1()"
+                          style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                          <a>{{'Fuel Reports' | translate}}</a></li>
+                        <li class="dropdown_style" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"  *ngIf="superAdmin || custtype" (click)="VType('admin')"><a >Fuel Calibration</a></li>
+                        <li class="dropdown_style" (click)="fuelPrice('admin')" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" ><a >Fuel Price</a></li>                 
+                    </ul>
+                </li>
+                <li class="dropdown-submenu dropdown_style">
+                  <a  class="nav-link dropdown-toggle" style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Temperature</a>
+                  <ul class="dropdown-menu dropdown_style" >
+                      <li class="dropdown_style" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" (click)="censorDetail('admin')"><a>Temperature Chart</a></li>
+                      <li class="dropdown_style" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" (click)="tempDetal('admin')"><a>Temperature Report</a></li>
+                      <li class="dropdown_style" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" *ngIf="superAdmin || custtype" (click)="VType('admin')"><a>Calibration</a></li>
+                  </ul>
+              </li>
+              <li class="dropdown-submenu dropdown_style">
+                <a  class="nav-link dropdown-toggle" style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> RFID</a>
+                <ul class="dropdown-menu dropdown_style" >
+                    <li class="dropdown_style" style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"><a>Rfid Report</a></li>        
+                </ul>
+            </li>
+            </ul>
+        </li>
+
+        <li *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')" class="nav-item hoverStyle" (click)="toll()"
+          style="cursor: pointer;padding-top: 5px;">
+          <!-- <i class="fas fa-home" style="color:white"></i> -->
+          <i class="fa fa-building" style="color:white"></i>
+          <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Toll' |
+            translate}}</a>
+        </li>
+        
+          <li *ngIf="isOrganisation" class="nav-item hoverStyle" (click)="adddistributers()" style="cursor: pointer;padding-top: 5px;">
+            <!-- <i class="fas fa-home" style="color:white"></i> -->
+            <i class="fas fa-user-lock" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Distributors' | translate}}</a>
+          </li>
+          <li *ngIf="superAdmin" class="nav-item hoverStyle" (click)="dealerInfo('dealerInfo')" style="cursor: pointer;padding-top: 5px;">
+            <!-- <i class="fas fa-home" style="color:white"></i> -->
+            <!-- <i class="fas fa-users" style="color:white"></i> -->
+            <i class="fas fa-user" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Dealers' | translate}}</a>
+          </li>
+          <li class="nav-item hoverStyle" *ngIf="cust || superAdmin" (click)="addcus('addcus')" style="cursor: pointer;padding-top: 5px;">
+            <i class="fas fa-users" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Customers' | translate}}</a>
+          </li>
+    
+            <!-- <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                    <li><a href="#">Service A</a></li>
+                    <li><a href="#">Service B</a></li>
+                    <li class="dropdown-submenu">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="#">Service C1</a></li>
+                            <li><a href="#">Service C2</a></li>
+                            <li><a href="#">Service C3</a></li>
+                            <li><a href="#">Service C4</a></li>
+                            <li><a href="#">Service C5</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li> -->
+        </ul>
+      </div>
+    </div>
+    <div style=" float: left; padding-top: 10px; ">
+      <p style="margin-top: 0px;margin-bottom:0 ;color: white;margin-left: 20px;border-radius: 20px;background: #fff;color: #212529; font-size: 14px;padding: 0px 5px;font-weight: 600;">{{fs}}</p>
+    </div>
+    <div style="width: 80px; float: right;">
+      <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+        <div class="row" style="margin: 0; margin-bottom: 10px;">
+          <div class="col-3" style="padding: 0;">
+              <div style="text-align: center;">
+                <img  *ngIf="!ppSHOW" src="../../assets/userAccount.png" alt="UserImage" height="60" style="width: 100%;">
+                <img  *ngIf="ppSHOW" style="border-radius: 50%;" src="{{profilePic}}" alt="UserImage" height="60" width="60" crossorigin="anonymous">
+              </div>
+          </div>
+          <div class="col-9" style="padding-left: 10px !important;font-size: 18px;font-weight: 400;">
+            <div><span>{{fs}}</span><span style="padding-left: 5px;">{{ls}}</span></div>
+            <p style="margin-bottom: 0;">{{mb}}</p>
+            <div *ngIf = "availaPointsFlag === true" title="Available Points" style="font-size: 15px;">
+              <span > <i class="fas fa-coins" style="color: #cf6b05;font-size: 18px;"></i></span>
+              <span style="margin-left: 15px;font-weight: 600;color: #656565;">{{pointCount}}</span>
+            </div>
+            <p >{{or}}</p>
+          </div>
+        </div>
+        <div class="row" style="margin: 0;">
+          <div class="col-6" >
+            <button type="reset" md-raised-button class="btn btn-default" style="background: #e2e2e2;" (click)="myaccount('myaccount')">{{'My Account' | translate}}</button>
+          </div>
+          <div class="col-6" >
+            <button *ngIf="dealer" md-raised-button class="w3-button w3-red" (click)="mydealer('mydealer')">{{'Dealer Account' | translate}}</button>
+          <button *ngIf="sup_admin" md-raised-button class="w3-button w3-red" (click)="super_Admin('mydealer')">{{'Admin Account' | translate}}</button>
+            <button *ngIf="logoutbut" md-raised-button class="btn btn btn-success" style="color:white" (click)="logout()">{{'Log Out' | translate}}</button>
+          </div>
+        </div>
+      </md-menu>
+      <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none;padding-top: 6px;">
+        <i class="fas fa-user" style=" color: white; font-size: 20px;"></i>
+      </button>
+      <app-notification></app-notification>
+    </div>
+    <!-- <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:11%; margin-top: 3%;padding-left:0%">
+          <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+            <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+            <h5>&nbsp;&nbsp;{{mb}}</h5>
+            <h5>&nbsp;&nbsp;{{or}}</h5>
+            <br> &nbsp;
+            <button  type="reset" class="btn btn-default" (click)="myaccount('myaccount')">My Account</button>
+            &nbsp;
+            <button *ngIf="dealer" class="w3-button w3-red" (click)="mydealer('mydealer')">Dealer Account</button> &nbsp;
+            <button *ngIf="sup_admin" class="w3-button w3-red" (click)="super_Admin('mydealer')">Admin Account</button> &nbsp;    
+            <button *ngIf="logoutbut" class="btn btn btn-success" (click)="logout()">&nbsp;&nbsp;&nbsp;Log
+              Out&nbsp;&nbsp;&nbsp;</button> &nbsp;
+          </md-menu>
+          <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none">
+            <img src="../../assets/image/us.jpg" height=24px>
+          </button>
+          <app-notification></app-notification>
+        </ul> -->
+
+  </div>
+
+</nav>
\ No newline at end of file
diff --git a/src/app/all-menus/all-menus.component.scss b/src/app/all-menus/all-menus.component.scss
new file mode 100644
index 0000000..6ac560a
--- /dev/null
+++ b/src/app/all-menus/all-menus.component.scss
@@ -0,0 +1,234 @@
+.custom_style {
+  // position: fixed;
+  // top:0 ;
+  // left:0;
+  // right :0;
+  // background: #2D4262;
+  // padding-top: 0%;
+  // padding-bottom: 0%;
+  // line-height: 2.8;
+  // box-shadow: -1px 7px 7px -5px rgb(48, 68, 99);
+
+  // ================changed style==================
+  position: fixed;
+  background: #2d4262;
+  padding-top: 1%;
+  padding: 0;
+  width: 100%;
+  box-shadow: -1px 7px 7px -5px #304463;
+}
+
+.changePadding {
+  flex: 1;
+  text-align: center;
+  padding-left: 90px;
+}
+
+.changePadding1 {
+  flex: 1;
+  text-align: center;
+  padding-left: 15px;
+}
+
+.list_style {
+  margin-left: 100px;
+  ul {
+    li {
+      a {
+        color: white;
+      }
+    }
+  }
+}
+
+.dropdown_style {
+  //  background:  #b9b7b7 ;
+  // background: linear-gradient(to bottom, #2c3e50,#bdc3c7);
+  // background: #D42021;
+
+  background: #2d4262;
+
+  padding-top: 0;
+  padding-bottom: 0;
+
+  cursor: pointer;
+  a {
+    color: white;
+  }
+}
+
+.dropdown-menu > a:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.hoverStyle:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.nav-item > a:hover {
+  background-color: #2a3132;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(74, 118, 184);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+@media (max-width: 1540px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (min-width: 1366px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .changePadding {
+    padding-left: 0px;
+  }
+  .changePadding1 {
+    padding-left: 0px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(143, 215, 255);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #dadada;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#navbarSupportedContent {
+  margin-left: 100px;
+}
+@media (max-width: 1537px) {
+  #navbarSupportedContent {
+    margin-left: 0px;
+  }
+}
+
+@media (max-width: 1537px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+// @media (min-width:1366px){
+//   .list_style{
+//     font-size: 14px;
+//       }
+
+// }
+// @media (max-width:1476px){
+
+//   .list_style{
+//     font-size: 14px;
+//       }
+// }
+
+// 1366,1440
+
+// .bg-light{
+//   background: #737373;
+
+// }
+
+// .bg-light :hover{
+//   background: #dbd4d4;
+
+// }
+
+// .navbar-nav > li > .dropdown-menu { background-color: #FF0000; }
+//  .dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}
+
+li a.nav-link {
+  width: max-content !important;
+  // padding: 20px 5px !important;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
diff --git a/src/app/all-menus/all-menus.component.spec.ts b/src/app/all-menus/all-menus.component.spec.ts
new file mode 100644
index 0000000..f94b78b
--- /dev/null
+++ b/src/app/all-menus/all-menus.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllMenusComponent } from './all-menus.component';
+
+describe('AllMenusComponent', () => {
+  let component: AllMenusComponent;
+  let fixture: ComponentFixture<AllMenusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AllMenusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AllMenusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/all-menus/all-menus.component.ts b/src/app/all-menus/all-menus.component.ts
new file mode 100644
index 0000000..6fcd95d
--- /dev/null
+++ b/src/app/all-menus/all-menus.component.ts
@@ -0,0 +1,917 @@
+// import { Component, OnInit } from '@angular/core';
+
+// @Component({
+//   selector: 'app-all-menus',
+//   templateUrl: './all-menus.component.html',
+//   styleUrls: ['./all-menus.component.scss']
+// })
+// export class AllMenusComponent implements OnInit {
+
+//   constructor() { }
+
+//   ngOnInit() {
+//   }
+
+// }
+
+
+// import { Component, OnInit } from '@angular/core';
+
+// @Component({
+//   selector: 'app-poi-menu',
+//   templateUrl: './poi-menu.component.html',
+//   styleUrls: ['./poi-menu.component.scss']
+// })
+// export class PoiMenuComponent implements OnInit {
+
+//   constructor() { }
+
+//   ngOnInit() {
+//   }
+
+// }
+////////////////////////////
+import { Component, OnInit, Input } from '@angular/core';
+import { Params, Router, ActivatedRoute } from '@angular/router'
+import { ContactService } from '../contact.service';
+import { TranslateService } from 'ng2-translate';
+import { MdDialog } from '@angular/material';
+import { DemoVideosComponent } from '../const/demo-videos/demo-videos.component';
+// import { PoiListComponent } from '../poi-list/poi-list.component';
+// import { PoiDtlDelComponent } from "../poi-dtl-del/poi-dtl-del.component";
+// import { MdDialog } from '@angular/material';
+// import { Data } from '../data';
+
+declare var google: any,$:any;
+@Component({
+    selector: 'app-all-menus',
+  templateUrl: './all-menus.component.html',
+  styleUrls: ['./all-menus.component.scss']
+})
+export class AllMenusComponent implements OnInit {
+  // 
+  marker1: any;
+  mapData: any[];
+  routePath: any;
+  before: any;
+  logoutbut: boolean;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  fs: any; ls: any; emailid: any; or: any; useridd: any; mb: any; custtype: any; dealer: any;
+  showImage: any;
+  groups = [];
+  group_info: any;
+  deviceId: any;
+  device_update: any;
+  markerpoi: any;
+  superAdmin: any = false;
+  waypoints_path:any;
+  routeData:any;
+  cnt:any =0;
+  showIMEI=false
+  dbMap:any;
+  dbMapInit:any = false;
+  menuFlag:any ='';
+  isOperator: boolean = false;
+  isOrganisation: boolean = false;
+  reportPrefrecne: any;
+  paddingLeft:boolean=false
+  reportArray = [
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name:"Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:false,value:"stoppage_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:false,value:"ignition_report"},
+    {name : "Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name : "AC Report",Rstatus : true,Astatus:false,value:"ac_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performance_report"},
+    {name : "User Trip Report",Rstatus : true,Astatus:false,value:"user_trip_report"},
+    {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"}  ,
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"} ,
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+  ];
+  availaPointsFlag: boolean = false;
+  pointCount: number = 0;
+  adressTab: boolean=false;
+  phone: any;
+  // ,public dialog: MdDialog
+  constructor(public dialog: MdDialog,private router: Router, private route: ActivatedRoute, private contactService: ContactService,public translate: TranslateService) {
+    this.contactService.totalTicketCount.subscribe(totalTicketCount => {
+        //  this.ticketCount = totalTicketCount
+       this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.phone=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).phn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.ngOnInit()
+     });
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    
+    if(this.useridd=="59cbbdbe508f164aa2fef3d8"){
+      this.showIMEI=true;
+      
+    }
+    console.log("USEERRRR",this.useridd,'59cbbdbe508f164aa2fef3d8', this.showIMEI);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    
+    var routeID = localStorage.getItem('routeId')
+
+    // this.route.params.subscribe((params:Params)=>{
+    // let id= params['routePath._id'];
+    // this.getRouteData(routeID);
+
+    // });
+    
+  }
+  link
+  menuWidth:any;
+  sup_admin:boolean;
+  isOrgnaisation:boolean=false;
+  ngOnInit() {
+    // console.log("Inside all app menu component---------------------------------------------");
+    // this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    if(localStorage.getItem('superadmin')=="ON"){
+      this.sup_admin = true;
+      this.logoutbut = false;
+      this.dealer = false;
+    }
+
+    this.logo = window.localStorage['logo'];
+  
+    // this.text = window.localStorage['text'];
+    // window.localStorage['DataUpdate'] = 'Tthis.rue'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    // this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // // this.routePath = JSON.parse(localStorage.getItem('routeData'));
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.isOperator = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOperator;
+
+    this.reportPrefrecne = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).report_preference;   
+  
+    let that = this;
+    if(this.reportPrefrecne !=undefined){
+    
+      var tempReport = this.reportPrefrecne;
+      console.log(this.reportPrefrecne);
+      
+      for(let dt in tempReport){
+        let arr = that.reportArray.filter(function(d){ 
+          return d.value == dt;
+        })
+        arr[0].Astatus = tempReport[dt]?tempReport[dt].Astatus:false;
+        arr[0].Rstatus = tempReport[dt]?tempReport[dt].Rstatus:false;
+      }
+      
+    }
+
+    
+
+    // console.log("this.reportPrefrecne=>",this.reportPrefrecne);
+  
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    // let foods = [];
+
+    // if (this.mb.charAt(0) == "n") {
+    //   this.mb = ' '
+    // }
+    if (window.localStorage['Custumer'] == 'ON') {
+      // this.logoutbut = true;
+      this.sup_admin =false;
+      this.dealer = true;
+    }else if(window.localStorage['superadmin']=='ON'){
+      this.logoutbut = false;
+    }
+    else {
+      this.logoutbut = true;
+    }
+    
+    this.getLanguage()
+
+
+    this.menuFlag = this.contactService.menuReturnGet();
+    var chkProfilePic = localStorage.getItem('profilePic');
+    // console.log('chkProfilePic',chkProfilePic);
+    if(chkProfilePic == null){
+      this.getProfileImagePath();
+    }else{
+      this.ppSHOW = true; 
+      this.profilePic = chkProfilePic ; 
+    }
+
+    this.availaPointsFlag = false ;
+    if((this.custtype === true)||((this.superAdmin === true)&&(this.isOrganisation === false))){
+      // console.log("Inside FunctionCheckpoint");
+      this.availaPointsFlag = true ;
+      this.getPointAvailable(this.useridd);
+    }
+    this. checkPassword();
+    // if(this.useridd === '59cbbdbe508f164aa2fef3d8'){
+    //   this.adressTab = true;
+    // }
+
+    $(document).on('click', '.dropdown-menu', function (e) {
+      e.stopPropagation();
+    });
+    // this.getLink()
+
+  }
+
+  getLink(){
+    // 9481773053'
+    console.log("PHONE_________-------",this.phone);
+    
+    this.contactService.get('/pullData/getSetuLink?mobileNumber='+this.phone).subscribe((res:any)=>{
+      console.log(res);
+      if(res.link){
+        this.link=res.link
+
+      }
+    })
+  }
+
+//2 menu dashboard 
+  soon(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+  }
+  // 3 menu
+  group(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("group_view");
+  }
+  // 4 menu
+  devi(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("dashboard");
+  }
+
+  productSummary(id){
+    this.router.navigateByUrl("product-summary");
+
+  }
+
+  orderSummary(id){
+    this.router.navigateByUrl("orderSummary");
+
+  }
+
+  tempDetal(id){
+    this.router.navigateByUrl("device-report/temp_report");
+
+  }
+  //5 menu
+  openNav(id) {
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationComponent'}});
+  }
+
+
+
+  //6 menu
+  geo(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("geofencing");
+  }
+  // 7 menu 
+  report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report");
+
+  }
+
+  daywisereport(){
+    this.router.navigateByUrl("device-report/daywise-report");
+  }
+  subAdmin(){
+    this.router.navigateByUrl("suAdmin");
+  }
+
+  modelMaster(){
+    this.router.navigateByUrl("ModelMaster");
+  }
+
+    
+  vehicleExpense(id){
+    this.router.navigateByUrl("vehicleExpense");
+  }
+
+  temp_report(id){
+    this.router.navigateByUrl("device-report/tempGraph");
+  }
+
+  commandQueue(id){
+    this.router.navigateByUrl("commanQueue");
+  }
+
+  addressList(id){
+    this.router.navigateByUrl("addreessUpdate");
+  }
+
+
+  censorDetail(id){
+    this.router.navigateByUrl("censor");
+
+  }
+  fuelPrice(id){
+    console.log(id);
+      this.router.navigate(["/FuelPrice"]);
+  }
+
+  daily_logs(){
+    this.router.navigateByUrl("device-report/dailyLogs");
+  }
+
+  workingHour(id){
+    this.router.navigateByUrl("workhourReport");
+  }
+
+  reminder_list(id)
+  {
+    this.router.navigateByUrl("vehicle/reminder_service");
+
+  }
+
+  
+
+  TrackingHistory(id){
+    // this.menuFlag =  this.contactService.menuReturnSet(id);
+    // this.router.navigateByUrl("location/live-history");
+
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationHistory'}});
+  }
+
+
+  dev_fuel_report(){
+    this.router.navigateByUrl("device-report/dev-fuel-report");
+  }
+   fuel_report1(){
+    this.router.navigateByUrl("device-report/fuel_report");
+  }
+
+  POI_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/POI_report");
+  }
+
+  SOS_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/devicesosReport");
+  }
+
+
+  //8
+  report_speed(id) {
+
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  //9
+  trip_report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/trip_report");
+//10
+  }
+
+  acReport(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/ac_report");
+  }
+  summaryReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  //11
+  geofancingReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+//12
+
+travelPath(id){
+  // TravelPathReportComponent
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/travel_path");
+}
+
+messageUtility(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("messageUtility");
+}
+Rechange(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  // this.router.navigateByUrl("recharge");
+}
+
+billing(id){
+
+  this.router.navigateByUrl("billingDashboard");
+}
+
+overspeed(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+//13
+routeViolation(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/routeViolation");
+}
+
+mainReport(){
+  this.router.navigateByUrl("maintananceReport");
+  
+}
+
+idleReport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/idle-report");
+}
+//14
+stoppage_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/stoppage_report");
+}
+//15
+ignition_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/ignition_report");
+}
+//16
+
+distance_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/distance_report");
+}
+//17
+alert_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+POIlist(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("POI_list");
+}
+
+userTrip(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/deviceTrip");
+
+}
+
+driverPerformance(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+//18
+
+vehicleRoute(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("vehicleRoute");
+}
+
+
+//19
+route_map(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+route_plan(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlan");
+}
+
+route_planReport(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlanReportNew");
+}
+//20
+addcus(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  localStorage.removeItem('mapLoad_ID')
+  this.router.navigateByUrl("add");
+}
+//21
+Ddetail(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("driverdetail");
+}
+
+userMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("userLogs");
+}
+
+cssupport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cus_support");
+}
+
+adddistributers(){
+  this.router.navigateByUrl("distributersList");
+}
+
+deviceMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceMaster");
+}
+
+deviceRenew(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("RenewReport");
+}
+deviceInventory(){
+  this.router.navigateByUrl("deviceInventory");
+}
+gpsMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("gpsMaster");
+
+}
+
+technician(id){
+   this.router.navigateByUrl("technician");
+}
+
+jobCard(id)
+{
+   this.router.navigateByUrl("JobCard");
+}
+
+cmdMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cmdMaster");
+
+}
+
+deviceEntry(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceEntry");
+}
+
+deviceInventoryList(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("Inventorylist");
+}
+//22
+poiMenu(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("poimenu");
+}
+//23
+myaccount(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("accountSettings");
+}
+
+loadUnload(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/tripLoadUnload");
+
+}
+
+
+load_management(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("loadManagement");
+}
+
+// LR_Number(id){
+//   this.menuFlag =  this.contactService.menuReturnSet(id);
+//   this.router.navigateByUrl("lrinput");
+// }
+
+fuel_report(id){
+  console.log(id);
+  
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("fuel_Report");
+
+}
+//24
+  mydealer(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    localStorage.removeItem("in1");
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem('devices');
+    localStorage.removeItem('custId')
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF';
+      localStorage.setItem('Dealer',"ON");
+      // this.dealer = false; 
+        this.sup_admin =false;
+        this.logoutbut= true; 
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+       this.router.navigateByUrl("add");
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  super_Admin(id){
+   
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    // localStorage.setItem('token',localStorage.getItem('superAdminToken'));
+    var tempsup = localStorage.getItem('superAdminToken');
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem("in1");
+    if(tempsup == null){
+      // console.log("Inside if block");
+     this.sup_admin = false;
+     this.logoutbut= true; 
+
+    }else{
+      window.localStorage['token'] = window.localStorage['superAdminToken'];
+      localStorage.removeItem('devices');
+      window.localStorage['DataUpdate'] = 'True';
+      if(window.localStorage['DataLoaded'] = 'True'){
+        // let dlrStatus = "true";
+        localStorage.setItem('superadmin',"OFF");
+        this.sup_admin =false;
+        this.logoutbut=true;
+        // localStorage.setItem("dlrchk",dlrStatus)
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        this.router.navigateByUrl("dealerInfo");
+    
+        //  this.router.navigateByUrl("const?_status="+"OK");
+   
+      
+       }
+    }
+   
+       
+
+  }
+  //25
+
+
+  notification(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("notifications");
+  }
+  DModel(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("VehicleType");
+  }
+  dealerInfo(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+
+
+
+
+
+
+  goback() {
+    this.router.navigateByUrl("vehicleRoute");
+  }
+
+  new() {
+    this.router.navigateByUrl("new");
+  }
+
+  checkPassword(){
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+    if(localStorage.getItem('currentpwd') && localStorage.getItem('currentuser')){
+    
+        if(res._id==localStorage.getItem('currentuser')){
+          if(localStorage.getItem('currentpwd')!=res.pass){
+            if(localStorage.getItem('currentpwd')!='XIt8UXhmjW'){
+              this.logout()
+            }
+
+          }
+        }
+        // pass
+      }else{
+       
+        this.logout()
+      }
+    })
+  }
+
+  ppSHOW:boolean = false;
+  profilePic = '';
+  getProfileImagePath(){  
+    // console.log('check profile pic function');
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+      
+      // console.log(res);
+      if(res.imageDoc.length != 0){
+        var str =  res.imageDoc[0]
+        var splitStr = str.split('/');
+        // console.log(splitStr);
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+         concatStr += '/'+tt ; 
+         }
+       }
+      //  console.log(concatStr);
+       this.ppSHOW = true;
+         this.profilePic = 'https://www.oneqlik.in' + concatStr;
+         localStorage.setItem('profilePic',this.profilePic)
+         localStorage.setItem('org',JSON.stringify(res.organisation))
+      }else{
+        this.ppSHOW = false ; 
+      }
+   
+    })
+  }
+
+
+
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+
+
+
+  }
+
+selectedlanguage:any;
+classVar:any = 'defaultClass';
+classVarDashboard:any = 'styleDefaultDashboard';
+getLanguage(){
+//  var Var = { uid: this.useridd };
+//  this.contactService.getLanguages(Var).subscribe(res=>{
+   this.selectedlanguage = localStorage.getItem('appLang');
+
+  if(this.selectedlanguage != undefined){
+    if(this.selectedlanguage=='newLan2'){
+      this.paddingLeft=true
+    }else{
+      this.paddingLeft=false
+    }
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    // localStorage.setItem('appLang',this.selectedlanguage);
+    if(this.selectedlanguage != 'en'){
+      this.classVar = 'changedclass';
+      this.classVarDashboard = 'stylechangedDashboard';
+    }
+
+    if(this.selectedlanguage == 'en'){
+      this.classVar = 'defaultClass';
+      this.classVarDashboard = 'styleDefaultDashboard';
+    }
+   
+  }else{
+    this.translate.setDefaultLang('en');
+    localStorage.setItem('appLang','en');
+    this.translate.use('en');
+    this.classVar = 'defaultClass';
+    this.classVarDashboard = 'styleDefaultDashboard';
+  }
+   
+//  },err=>{
+//    console.log(err);
+//  })
+
+}
+
+  dataArrayCoords: any;
+  currentLatitude: any;
+  currentLongitude: any;
+  marker: any;
+
+
+
+  livetrack(id){
+    this.router.navigateByUrl("live");
+
+  }
+
+
+  getPointAvailable(distId){
+    var distPoint = '0';
+    this.contactService.getAvialblePoints(distId,distPoint).subscribe(res=>{
+      // console.log(res.available_points);
+      this.pointCount =res.available_points?res.available_points: 0 ; 
+    })
+  }
+  
+
+
+  tutorialVideos(){
+  
+      let dialogRef = this.dialog.open(DemoVideosComponent, {
+        // width: '903px',
+        // data: { Type: type, dataset: datasets }
+        panelClass: 'custom-dialog-container'
+      });
+  
+      dialogRef.afterClosed().subscribe(result => {
+        if (result == "OKK") {
+  
+        }
+        else if (result == "No_Dev") {
+  
+  
+        }
+      });
+
+  }
+    reports(){
+    this.router.navigate(['/reports/start'])
+  }
+  reportScedule(){
+    this.router.navigate(['/report-schedule'])
+  }
+  imeiFind(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/IEMI_Finder"]);
+  }
+
+  userFinder(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/USER_Finder"]);
+  }
+
+  
+  issueList(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/issueList"]);
+  }
+  RTOMaster(id){
+     this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/RTO_Master"]);
+  }
+  deviceList(){
+    this.router.navigate(['/deviceList'])
+  }
+  inActiveAdmins(){
+    this.router.navigate(['/inactiveAdmins'])
+  }
+  toll(){
+  this.router.navigate(['/toll'])
+  }
+}
diff --git a/src/app/app.component.css b/src/app/app.component.css
new file mode 100644
index 0000000..7608301
--- /dev/null
+++ b/src/app/app.component.css
@@ -0,0 +1,124 @@
+
+::-webkit-scrollbar {
+  display: none;
+  }  
+  body::-webkit-scrollbar {
+      display: none;  
+} 
+menu */
+.navigation {
+  width: 300px;
+}
+
+
+
+
+/* reset our lists to remove bullet points and padding */
+.mainmenu, .submenu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* make ALL links (main and submenu) have padding and background color */
+.mainmenu a {
+  display: block;
+  background-color: #CCC;
+  text-decoration: none;
+  padding: 10px;
+  color: #000;
+}
+
+/* add hover behaviour */
+.mainmenu a:hover {
+    background-color: #C5C5C5;
+}
+
+
+/* when hovering over a .mainmenu item,
+  display the submenu inside it.
+  we're changing the submenu's max-height from 0 to 200px;
+*/
+
+.mainmenu li:hover .submenu {
+  display: block;
+  max-height: 200px;
+}
+
+/*
+  we now overwrite the background-color for .submenu links only.
+  CSS reads down the page, so code at the bottom will overwrite the code at the top.
+*/
+
+.submenu a {
+  background-color: #999;
+}
+
+/* hover behaviour for links inside .submenu */
+.submenu a:hover {
+  background-color: #666;
+}
+
+/* this is the initial state of all submenus.
+  we set it to max-height: 0, and hide the overflowed content.
+*/
+.submenu {
+  overflow: hidden;
+  max-height: 0;
+  -webkit-transition: all 0.5s ease-out;
+}
+body{
+  height:100%; width:100%;
+
+}
+::-webkit-scrollbar {
+  display: none;
+  }
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  footer {
+    background:#FAFAFA;
+    bottom: 0;
+    width: 100%;
+   /*  height: 50px;
+    padding: 20px; */
+    position: fixed;
+    opacity: 1.0;
+    filter: alpha(opacity=50);
+    text-align: center;
+    border-top:1px solid #ddd;
+}
+footer:hover{
+  opacity: 1.0;
+  filter: alpha(opacity=100); 
+}
+.active-link{
+  border-bottom: 1px solid #1ba0c0;
+  font-weight: bold;
+  }
+a:hover{
+  text-decoration: none;
+  color: #1ba0c0!important;
+}
+  .main{
+    /* padding: 16px;
+    padding-right: 0%;
+    margin-top: 48px;
+    height: 89vh; */
+  }
+  header{
+    overflow: hidden;
+    background-color: #333;
+    position: fixed;
+    top: 0;
+    width: 100%;
+  }
+
+ 
+  .tableHeader{
+    background-color: #A2C523;
+    color : white;
+  }
\ No newline at end of file
diff --git a/src/app/app.component.html b/src/app/app.component.html
new file mode 100644
index 0000000..088118c
--- /dev/null
+++ b/src/app/app.component.html
@@ -0,0 +1,129 @@
+<html>
+<head>
+</head>
+<body>
+  <md-toolbar flex *ngIf="showNav" style="background-color:white;width: 100%;overflow: hidden;position: fixed; top: 0;z-index: 9;border-bottom:1px solid #ddd">
+    <img src={{this.logo}} routerLink="home" style="padding-top: 8px;cursor:pointer;border:none">
+    <ul fxHide.sm="true" fxHide.xs="true" style="width:33%;padding:30px 10% 0 0;float:right" fxLayout="row">
+      <p style="padding-top: 2%;
+          padding-left: 0%;">{{text}}</p>
+    </ul>
+    <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 18px;">
+      <!-- <li style="width:25%;">
+        <a style="font-size: 2.5vw;   color: black;
+            padding: 4em 6em;" routerLink="signup">SignUp</a>
+      </li> -->
+      <li style="float:left;width:22%;padding-left:1.7em;">
+        <a color="blue" routerLink="login" style="font-size: 2.5vw;color: black;padding-left:2.3em">{{'Login' | translate}}</a>
+      </li>
+      <li style="float:right;width:40%;">
+        <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+        <md-menu #menu="mdMenu">
+          <button md-menu-item routerLink="home">Home</button>
+          <button md-menu-item routerLink="support">Contact us</button>
+          <button md-menu-item routerLink="about-us">About us</button>
+          <button md-menu-item routerLink="services">Services</button>
+        </md-menu>
+      </li>
+    </ul>
+    <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:50%; margin-top: 3%;">
+      <!-- <li style="width:12%;float:right">
+        <a style="font-size: 15px;color: black;padding: 10%;" routerLink="signup"
+          routerLinkActive="active-link">SignUp</a>
+      </li> -->
+      <li style="width:10%;float:right">
+        <a style="font-size: 15px;color: black;padding: 10%;" routerLink="login" routerLinkActive="active-link">Login</a>
+      </li>
+      <li style="width:12%;float:right;margin-right:34px">
+        <a style="font-size: 15px;color: black;padding: 10 19%;" routerLink="support"
+          routerLinkActive="active-link">Contact us</a>
+      </li> 
+      <li style="float:right;width:15%">
+        <a color="blue" routerLink="about-us" style="font-size: 15px ;padding: 10 3%;color: black;"
+          routerLinkActive="active-link">About Us</a>
+      </li>
+      <li style="float:right;width:15%">
+        <a color="blue" routerLink="services" style="font-size: 15px;padding: 10 3%;color: black;"
+          routerLinkActive="active-link">Services</a>
+      </li>
+      <li style="float:right;width:10%">
+        <a color="blue" routerLink="home" style="font-size: 15px;padding: 10 3%;color: black;"
+          routerLinkActive="active-link">Home</a>
+      </li>
+    </ul>
+  </md-toolbar>
+  <!-- <div>
+        <md-toolbar   flex style="background-color:white;width: 100%;position:fixed;z-index:10;" >
+          
+               <img src="../../assets/image/a.jpg" routerLink="home"
+                style=
+                "    /* padding-top: 8px; */width:20%;outline:none;"> 
+                
+              <ul   fxShow fxHide.gt-xs="false" style="padding: 10px 0px 0px 0px;margin:0px;"  fxLayout="row" >
+                  <li  fxHide.xs="true" fxHide.gt-xs="false"style="line-height: unset;"   >
+                    <a  routerLink="home" style="font-size: 1.5vw;color: black;padding: 0 10px;">Home</a>
+                  </li>
+                  <li   fxHide.xs="true" fxHide.gt-xs="false" style="line-height: unset;" >
+                     <a  routerLink="community" style="font-size: 1.5vw;color: black;padding: 0 10px;
+                    ">Pricing</a>
+                  </li>
+                  
+                       <li  fxHide.xs="true" fxHide.gt-xs="false"style="line-height: unset;" >
+                    <a  routerLink="support" style="font-size: 1.5vw;  color: black;padding: 0 10px;
+                  ">Contact Us</a>
+                  </li>
+                   <li  fxHide.xs="true" fxHide.gt-xs="false" style="line-height: unset;">
+                    <a  routerLink="login" style="font-size: 1.5vw;  color: black;padding: 0 10px; ">Login</a>
+                  </li>
+                  <li  fxHide.xs="true" fxHide.gt-xs="false" style="line-height: unset;">
+                    <a  routerLink="signup" style="font-size: 1.5vw;  color: black; padding: 0 10px;
+                  ">SignUp</a>
+                  </li>
+                
+                </ul> -->
+
+  <!--    
+                <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" fxHide.gt-xs="true" style="
+                width: 50%;
+                display: block;
+                padding: 0px;
+                margin: 0px;"> -->
+  <!--for small screen -->
+  <!--   <li style="width: 22%;padding-left:0.7em;">
+                      <a  routerLink="signup" style="font-size: 2.5vw;   color: black;" >SignUp</a>
+                    </li>
+                    <li style="
+                    width: 15%;padding-left:1.5em;">
+                        <a color="blue" routerLink="login" style="font-size: 2.5vw;color: black;padding-left: 2.3em;">Login</a>
+                      </li>
+                <li style="    width: 15%;float:right;">
+                <button md-button md-icon-button [mdMenuTriggerFor]="appMenu"><i class="material-icons" style="padding:0%;">list</i></button>
+                <md-menu  #appMenu="mdMenu" [overlapTrigger]="false" >
+                  <button md-menu-item  routerLink="home" >Home</button>
+                  <button md-menu-item routerLink="community" >Contact Us</button>
+                  <button md-menu-item routerLink="support">Pricing</button>
+                </md-menu></li>
+              </ul> -->
+
+
+
+  <!--  <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                      <li style="width:27%;float:right">
+                        <a  style="font-size: 1.5vw;   color: black;padding: 10%;" routerLink="signup">SignUp</a>
+                      </li>
+                      <li style="float:right;width:25%">
+                          <a color="blue" routerLink="login" style="font-size: 1.5vw;color: black;">Login</a>
+                        </li>
+                  
+                  
+                </ul>
+                        -->
+
+  <!-- <div class="main"> -->
+    <ng4-loading-spinner></ng4-loading-spinner> 
+    <router-outlet></router-outlet>
+  <!-- </div> -->
+ 
+</body>
+
+</html>
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
new file mode 100644
index 0000000..9510495
--- /dev/null
+++ b/src/app/app.component.spec.ts
@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+  }));
+});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
new file mode 100644
index 0000000..75c783e
--- /dev/null
+++ b/src/app/app.component.ts
@@ -0,0 +1,163 @@
+import { environment } from './../environments/environment';
+import { Component, Inject } from '@angular/core';
+import { RouterLinkActive } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import {ContactService} from './contact.service';
+import{Http, Headers} from '@angular/http';
+import 'rxjs/add/operator/map';
+import { Observable } from 'rxjs/Observable';
+import { Injectable } from '@angular/core';
+import { TranslateService } from 'ng2-translate';
+import { LoginComponent } from './login/login.component';
+import { DOCUMENT } from '@angular/common';
+
+
+
+@Injectable()
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers: [LoginComponent],
+  
+})
+export class AppComponent {
+userData:any;
+url:any;
+
+logo:any;
+text:any;
+address:any;
+mobile:any;
+dev_url = environment.hostUrl;
+showMenu = environment.showLandingpageMenu;
+headerfooterPadding:any;
+margintop:any;
+  showNav: boolean;
+constructor(private titleService: Title,private contactService: ContactService,private http: Http,public translate: TranslateService,public loginComp : LoginComponent){
+  console.log("showMenu=>",this.showMenu);
+  let split1 = document.URL.split('//')[1];
+  let split2 = split1.split('/')[0];
+  let splitForStyle = split1.split('/')[1];
+  this.url =  split2;
+
+
+  // let split3 = document.URL.split('referrer_token')[1]  || localStorage.getItem('referrer_token');
+ 
+
+  var decode_token = function(token){
+    var decodeToken = function(token){
+      return token ? (window.atob(token)):token;
+    }
+    var parseToken = function(token){
+   if(token && typeof(token)=='string'){
+   try {
+   return JSON.parse(token)
+   } catch (e) {
+   return "";
+   }
+   }
+   else
+   return "";
+    }
+    var getData = function(token){
+   return token ? {
+   "referer": decodeToken(token._referrer),
+   "username": decodeToken(token._u),
+   "pass": decodeToken(token._p)
+   } : null;
+    }
+    return getData(parseToken(decodeToken(token)));
+   }
+
+let token = document.URL.split('referrer_token=')[1]  || localStorage.getItem('referrer_token=');
+console.log(token);
+  var split3 = decode_token(token) ; 
+  console.log(split3);
+  if(split3 && split3.referer){
+    // var referrer_token = split3.substring(1);
+    // var referer_data = window.atob(referrer_token).split(",");
+    // var referer = referer_data[0].split("=")[1];
+    // var username = referer_data[1].split("=")[1];
+    // var password = referer_data[2].split("=")[1];
+    // console.log(referer);
+    // console.log(username);
+    // console.log(password);
+    // var r1 = referer.split('"')[0];
+    // var u1 =  username.split('"')[0];
+    // var p1 = password.split('"')[0];
+    // console.log(r1);
+    // var reffere_obj = {
+    //   user : username,
+    //   pass : password
+    // }
+    localStorage.setItem('referer_obj',JSON.stringify(split3));
+    localStorage.setItem('referrer_token=',token);
+    var referer  = split3['referer'];
+    this.contactService.getReferenceId(referer).subscribe(res=>{
+      // localStorage.setItem('referrer_token',split3);
+        this.loginComp.loginemail() ;      
+    },err=>{
+      console.log(err);
+    })
+
+  }else{
+ 
+    for(var i = 0; i <this.showMenu.length;i++){
+      if (this.url == this.showMenu[i]) {
+        this.showNav = true;
+        return;
+      } else {
+        this.showNav = false;
+      }
+    }
+
+    this.contactService.dealerInfo(this.url).subscribe(
+     data => {
+       this.userData = data 
+       
+       this.logo = this.dev_url+this.userData.logo;
+       this.titleService.setTitle(this.userData.organisationName);
+       this.text=this.userData.text;
+       this.address = this.userData.address; 
+       console.log("this.userData.email",this.userData.email);
+       // this.dealerId  = 
+       console.log("this.userData",this.userData);
+       window.localStorage['dealerName']= this.userData.dealerName;
+       window.localStorage['DealerID'] = this.userData.email;
+         window.localStorage['DealerPhone'] =this.userData.contactNumber;
+         window.localStorage['logo'] =this.logo;
+         window.localStorage['address'] =this.userData.address;
+         window.localStorage['text'] = this.text;
+         window.localStorage['mobile'] = this.userData.contactNumber;
+         window.localStorage['facebook'] = this.userData.facebook;
+         window.localStorage['android'] = this.userData.androidApp;
+         window.localStorage['iphone'] = this.userData.appleApp;
+         window.localStorage['organisationName'] = this.userData.organisationName;
+      if(window.localStorage[this.userData.dealerName]){
+        console.log("Dealer Name =>", this.userData.dealerName);
+      }
+     }) 
+ 
+     // translate.setDefaultLang('en');
+     // translate.use('en');
+  
+  }
+
+};
+
+
+color:any;
+fun1(value){
+
+  if(value=="signup"){
+    this.color='red';
+    // console.log(this.color);
+  }
+}
+ngOnDestroy() {
+ window.localStorage.clear();
+}
+
+
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
new file mode 100644
index 0000000..0a4b5e0
--- /dev/null
+++ b/src/app/app.module.ts
@@ -0,0 +1,635 @@
+import { Ng2OrderModule } from 'ng2-order-pipe';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule , NO_ERRORS_SCHEMA } from '@angular/core';
+import { AppComponent } from './app.component';
+import { ModalModule, TimepickerModule } from 'ngx-bootstrap';
+import {FlexLayoutModule} from "@angular/flex-layout";
+import {NgxPaginationModule} from 'ngx-pagination'; 
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {TranslateModule, TranslateStaticLoader, TranslateLoader} from 'ng2-translate/ng2-translate';
+import { routes2 } from './dash/dash.router';
+import { routes } from './app.router';
+import {SoonComponent} from './soon/soon.component';
+import { CommunityComponent } from './community/community.component';
+import { LoginComponent } from './login/login.component';
+import { SignupComponent } from './signup/signup.component';
+import { SupportComponent } from './support/support.component';
+import { HomeComponent } from './home/home.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+/* import { AuthService, AppGlobals } from 'angular2-google-login';
+ */import { ReCaptchaModule } from 'angular2-recaptcha';
+
+import {ResponseOptions, Response, Http} from '@angular/http';
+import { HttpModule } from '@angular/http';
+import { StormpathModule } from 'angular-stormpath';
+import { AlertComponent } from './alert.component';
+import { AlertService } from './alert.service';
+import { NguiPopupModule } from '@ngui/popup';
+import {GmapComponent} from './gmap/gmap.component';
+import {LoginsucComponent} from './login_sucess/loginsuc.component';
+ /* import { AgmCoreModule } from 'angular2-google-maps/core'; */
+import { Ng2DropdownModule } from 'ng2-material-dropdown';
+import { DashComponent } from './dash/dash.component';
+import { Data } from "./data";
+import { Ng2CarouselamosModule } from 'ng2-carouselamos';
+import { CarouselModule } from 'ngx-bootstrap';
+import { ChartsModule } from 'ng2-charts';
+import {CountDown} from "ng2-date-countdown";
+import { SimpleTimer } from 'ng2-simple-timer';
+import { MomentModule } from 'angular2-moment';
+// import { AgmCoreModule } from '@agm/core';
+/* import {GaugesModule} from 'ng-canvas-gauges/lib'; */
+
+
+
+ import { GaugeModule } from 'angular-gauge';
+ import { FlashMessagesModule } from 'angular2-flash-messages';
+import { FormWizardModule } from 'angular2-wizard';
+
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import { AccountComponent } from './account/account.component';
+import {ProgressBarModule} from "ng2-progress-bar";
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { DialogContentExampleDialogComponent } from './dialog-content-example-dialog/dialog-content-example-dialog.component';
+import { GatewayComponent } from './gateway/gateway.component';
+import { DragulaModule } from 'ng2-dragula';
+// import { DatepickerModule } from 'angular2-material-datepicker'
+import { ExpansionPanelsModule } from 'ng2-expansion-panels';
+import {ResizableModule} from 'angular2-resizable';
+import { DetailsComponent } from './details/details.component';
+import { RuleComponent } from './rule/rule.component';
+// import { ImageUploadModule } from "angular2-image-upload";
+import { PasswordStrengthBarModule } from 'ng2-password-strength-bar';
+import { ConstComponent } from './const/const.component';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { LocationComponent } from './location/location.component';
+import { EditScheComponent } from './edit-sche/edit-sche.component';
+import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { AngularDateTimePickerModule  } from 'angular2-datetimepicker';
+import {IfScrollbarsModule} from 'ng2-if-scrollbars';
+
+// import { IonicApp, IonicModule } from 'ionic-angular';
+import { LoaderServiceComponent } from './loader-service/loader-service.component';
+import { GeofencingComponent } from './geofencing/geofencing.component';
+import { GeofenceAddComponent } from './geofence-add/geofence-add.component';
+import { GeofencingViewComponent } from './geofencing-view/geofencing-view.component';
+import { GeofencingView2Component } from './geofencing-view2/geofencing-view2.component';
+import { DeviceReportComponent } from './device-report/device-report.component';
+import { DeviceEditComponent } from './dashboard/device-edit/device-edit.component';
+import { DeviceSpeedReportComponent } from './device-report/device-speed-report/device-speed-report.component';
+import { DeviceShareComponent } from './dashboard/device-share/device-share.component';
+import { ShareUserComponent } from './dashboard/share-user/share-user.component';
+import { DateTimePickerModule  } from 'ng-pick-datetime';
+import { SpeednotifyComponent } from './dashboard/speednotify/speednotify.component';
+import { ShareLocComponent } from './location/share-loc/share-loc.component';
+import { AddComponent } from './add/add.component';
+import { ResetpwdComponent } from './resetpwd/resetpwd.component';
+import { GetdevdetailComponent } from './const/getdevdetail/getdevdetail.component';
+import { IdealReportComponent } from './device-report/ideal-report/ideal-report.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import {DatainjectionService} from './datainjection.service';
+import {ContactService} from './contact.service';
+import { NotificationComponent } from './notification/notification.component';
+import { MyaccountComponent } from './myaccount/myaccount.component';
+import { AddCustComponent } from './add-cust/add-cust.component';
+import { IgnReportComponent } from './device-report/ign-report/ign-report.component';
+import { SpecDevComponent } from './spec-dev/spec-dev.component';
+//import {NgxPaginationModule} from 'ngx-pagination'; 
+import {Ng2PaginationModule} from 'ng2-pagination';
+import { AboutUsComponent } from './about-us/about-us.component';
+import { ServicesComponent } from './services/services.component';
+import { TripDetailsComponent } from './device-report/trip-details/trip-details.component';
+import { SummaryReportComponent } from './device-report/summary-report/summary-report.component';
+import {GeofancingReportComponent} from './device-report/geofancing-report/geofancing-report.component';
+import { OverSpeedComponent } from './device-report/over-speed/over-speed.component';
+import { RouteViolationComponent } from './device-report/route-violation/route-violation.component';
+import { StoppageReportComponent } from './device-report/stoppage-report/stoppage-report.component';
+import { IgnitionReportComponent } from './device-report/ignition-report/ignition-report.component';
+import { DistanceReportComponent } from './device-report/distance-report/distance-report.component';
+import { AlertReportComponent } from './device-report/alert-report/alert-report.component';
+import { TripReportComponent } from './device-report/trip-report/trip-report.component';
+import { GroupComponent } from './group/group.component';
+import { AddGroupComponent } from './add-group/add-group.component';
+import { DialogDemoComponent } from './dialog-demo/dialog-demo.component';
+import { EditGroupComponent } from './edit-group/edit-group.component';
+import { DeleteGroupComponent } from './delete-group/delete-group.component';
+
+import { SidemenuFuelComponent } from './sidemenu-fuel/sidemenu-fuel.component';
+import { VehicleRouteComponent } from './vehicle-route/vehicle-route.component';
+import { RouteSetComponent } from './route-set/route-set.component';
+import { ShowRouteComponent } from './show-route/show-route.component';
+import { DealersInfoComponent } from './dealers-info/dealers-info.component';
+import { RouteMappingComponent } from './route-mapping/route-mapping.component';
+import { RouteMapAddComponent } from './route-map-add/route-map-add.component';
+import { PointOfIntrestComponent } from './point-of-intrest/point-of-intrest.component';
+import { RouteDeleteComponent } from './route-delete/route-delete.component';
+import { AddDealerComponent } from './add-dealer/add-dealer.component';
+import { NotificationMasterComponent } from './notification-master/notification-master.component';
+import { EditCostumerComponent } from './edit-costumer/edit-costumer.component';
+import { EditDealerComponent } from './edit-dealer/edit-dealer.component';
+import { DriversPerformanceReportComponent } from './device-report/drivers-performance-report/drivers-performance-report.component';
+import { TripHistoryComponent } from './trip-history/trip-history.component';
+import { PoiListComponent } from './poi-list/poi-list.component';
+
+import { ShowCaliberationComponent} from './show-caliberation/show-caliberation.component';
+import {VehicleTypeComponent} from './vehicle-type/vehicle-type.component';
+import { DriverDetailComponent } from './driver-detail/driver-detail.component';
+import { DeviceModelComponent } from './device-model/device-model.component';
+import { AddEditVehicleTypeComponent } from './add-edit-vehicle-type/add-edit-vehicle-type.component';
+import { AddDriverComponent } from  './add-driver/add-driver.component';
+import { AddDeviceModelComponent } from './add-device-model/add-device-model.component';
+import { MdButtonModule, MdCheckboxModule, MaterialModule,MdAutocompleteModule, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { EditRouteMapComponent } from './edit-route-map/edit-route-map.component';
+import { POIdetailsComponent } from './poidetails/poidetails.component';
+import { PoiDtlDelComponent } from './poi-dtl-del/poi-dtl-del.component';
+import { AcReportComponent } from './device-report/ac-report/ac-report.component';
+import { FuelReportComponent } from './device-report/fuel-report/fuel-report.component';
+import { PoiMenuComponent } from './poi-menu/poi-menu.component';
+import { AllMenusComponent } from './all-menus/all-menus.component';
+import { LoadManagementComponent } from './load-management/load-management.component';
+import { FuelReportGraphComponent } from './fuel-report-graph/fuel-report-graph.component';
+import { EditVehicleTypeComponent } from './edit-vehicle-type/edit-vehicle-type.component';
+import { Ng2SearchPipeModule } from 'ng2-search-filter';
+import { UserMasterComponent } from './user-master/user-master.component';
+import { DeviceComponent } from './device/device.component';
+import { GpsMasterComponent } from './gps-master/gps-master.component';
+import { CmdPacketMasterComponent } from './cmd-packet-master/cmd-packet-master.component';
+import { EditDeviceMasterComponent } from './device/edit-device-master/edit-device-master.component';
+import { GpsEditMasterComponent } from './gps-master/gps-edit-master/gps-edit-master.component';
+import { POIReportComponent } from './device-report/poi-report/poi-report.component';
+import { AddpoiBylocationComponent } from './addpoi-bylocation/addpoi-bylocation.component';
+import { POIreportComponent } from './poireport/poireport.component';
+import { LRNumberComponent } from './lr-number/lr-number.component';
+import { DayWiseReportComponent } from './device-report/day-wise-report/day-wise-report.component';
+import { DeviceFuelReportComponent } from './device-report/device-fuel-report/device-fuel-report.component';
+import { SOSAlertComponent } from './sosalert/sosalert.component';
+import { EditDeviceModelComponent } from './edit-device-model/edit-device-model.component';
+import { PoiMasterEditComponent } from './poi-master-edit/poi-master-edit.component';
+import { NotificationSettingComponent } from './notification-setting/notification-setting.component';
+import { DeviceSOSreportComponent } from './device-report/device-sosreport/device-sosreport.component';
+import { SearchFilterPipe } from './search-filter.pipe';
+import { LiveHistoryComponent } from './location/live-history/live-history.component';
+import { DeviceEntryComponent } from './device-entry/device-entry.component';
+import { InventoryListComponent } from './inventory-list/inventory-list.component';
+import { AcreportInfoComponent } from './device-report/ac-report/acreport-info/acreport-info.component';
+import { GeneralSettingsComponent } from './dashboard/general-settings/general-settings.component';
+import { DistributersListComponent } from './distributers-list/distributers-list.component';
+import { AddDistributersComponent } from './add-distributers/add-distributers.component';
+import { CostumerSupportComponent } from './costumer-support/costumer-support.component';
+import { CreateTripComponent } from './location/create-trip/create-trip.component';
+import { TripByDeviceComponent } from './device-report/trip-by-device/trip-by-device.component';
+import { FuelObjectcomponentComponent } from './fuel-objectcomponent/fuel-objectcomponent.component';
+import { TravelPathReportComponent } from './device-report/travel-path-report/travel-path-report.component';
+import { ExpenseComponentComponent } from './device-report/trip-by-device/expense-component/expense-component.component';
+import { ExpenselistComponent } from './device-report/trip-by-device/expenselist/expenselist.component';
+import { ReportSettingComponent } from './add/report-setting/report-setting.component';
+import { NormalCertComponent } from './device/normal-cert/normal-cert.component';
+import { CertOptionComponent } from './device/cert-option/cert-option.component';
+import { IdleReportComponent } from './device-report/idle-report/idle-report.component';
+import { VehicleReminderComponent } from './vehicle-reminder/vehicle-reminder.component';
+
+import { AddReminderComponent } from './vehicle-reminder/add-reminder/add-reminder.component';
+import { ImmobilizeComponent } from './location/immobilize/immobilize.component';
+import { ReportFilterComponent } from './device-report/report-filter/report-filter.component';
+import { ResetPasswordComponent } from './add/reset-password/reset-password.component';
+import { DealerPermissionComponent } from './dealers-info/dealer-permission/dealer-permission.component';
+import { DashboardContentComponent } from './add/dashboard-content/dashboard-content.component';
+import { SharedDevicesComponent } from './const/shared-devices/shared-devices.component';
+import { DailyLogsComponent } from './device-report/daily-logs/daily-logs.component';
+import { VehicleExpensesComponent } from './vehicle-expenses/vehicle-expenses.component';
+import { AddVehicleExpensesComponent } from './vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component';
+import { VehicleExpenseDetailComponent } from './vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component';
+import { ProductSummaryComponent } from './product-summary/product-summary.component';
+import { AddProductComponent } from './product-summary/add-product/add-product.component';
+import { ProductShopComponent } from './product-shop/product-shop.component';
+import { ProductOverviewComponent } from './product-shop/product-overview/product-overview.component';
+import { PointShareComponent } from './point-share/point-share.component';
+import { MessageUtilityComponent } from './message-utility/message-utility.component';
+import { TripLoadUnloadComponent } from './device-report/trip-load-unload/trip-load-unload.component';
+import { BuyNowComponent } from './product-shop/buy-now/buy-now.component';
+import { BillingInfoComponent } from './product-shop/billing-info/billing-info.component';
+import { OrderSummaryComponent } from './product-shop/order-summary/order-summary.component';
+import { OrderDetailsComponent } from './product-shop/order-details/order-details.component';
+import { DemoVideosComponent } from './const/demo-videos/demo-videos.component';
+import { SafePipe } from './const/safe.pipe';
+import { BillingDashboardComponent } from './billing-dashboard/billing-dashboard.component';
+import { WorkingHourDetailComponent } from './device-report/working-hour-detail/working-hour-detail.component';
+import { WorkingHourReportComponent } from './device-report/working-hour-report/working-hour-report.component';
+import { AccountDetailComponent } from './account-detail/account-detail.component';
+import { TempretureGraphComponent } from './device-report/tempreture-graph/tempreture-graph.component';
+import { CensorDisplayComponent } from './censor-display/censor-display.component';
+import { ManualAddressComponent } from './const/manual-address/manual-address.component';
+import { AddressUpdateComponent } from './address-update/address-update.component';
+import { CmdUIComponent } from './location/cmd-ui/cmd-ui.component';
+import { CommanQueueComponent } from './comman-queue/comman-queue.component';
+import { CommandWindowComponent } from './location/command-window/command-window.component';
+import { AddDeviceComponent } from './location/add-device/add-device.component';
+import { MaintananceComponent } from './device-report/maintanance/maintanance.component';
+import { SubAminComponent } from './sub-amin/sub-amin.component';
+import { AddsubadminComponent } from './sub-amin/addsubadmin/addsubadmin.component';
+import { PlayTripComponent } from './play-trip/play-trip.component';
+import { TempretureReportComponent } from './device-report/tempreture-report/tempreture-report.component';
+import { CommentWindowComponent } from './comment-window/comment-window.component';
+import { DetailComponent } from './device-report/distance-report/details/details.component';
+import { DailyDetailsComponent } from './device-report/daily-details/daily-details.component';
+import { AnnouncementComponent } from './const/announcement/announcement.component';
+import { ReportModule } from './report/report.module';
+import { ReportService } from './report/report.service';
+import { DeviceRenewComponent } from './device-renew/device-renew.component';
+import { ReportScheduleComponent } from './report-schedule/report-schedule.component';
+import { DeviceListComponent } from './device-list/device-list.component';
+import { TollComponent } from './toll/toll.component';
+import { RenewalHistoryComponent } from './dashboard/renewal-history/renewal-history.component';
+import { DeviceInventoryComponent } from './device-inventory/device-inventory.component';
+import { SelectUntrackVehiclesComponent } from './geofencing/select-untrack-vehicles/select-untrack-vehicles.component';
+import { IssueListComponent } from './issue-list/issue-list.component';
+import { TechnicianComponent } from './technician/technician.component';
+import { JobCardComponent } from './job-card/job-card.component';
+import { AddJobCardComponent } from './job-card/add-job-card/add-job-card.component';
+import { RechargeComponent } from './recharge/recharge.component';
+import { AddPlanComponent } from './account-detail/add-plan/add-plan.component';
+import { RenewVehicleComponent } from './dashboard/renew-vehicle/renew-vehicle.component';
+import { RoutePlanComponent } from './route-plan/route-plan.component';
+import { RoutPlanReportComponent } from './rout-plan-report/rout-plan-report.component';
+import { ShowPullDataLinkComponent } from './add/show-pull-data-link/show-pull-data-link.component';
+import { NewTempReportComponent } from './device-report/tempreture-report/new-temp-report/new-temp-report.component';
+import { RouteListComponent } from './route-plan/route-list/route-list.component';
+import { HualtListComponent } from './route-plan/hualt-list/hualt-list.component';
+import { InactiveAdminComponent } from './inactive-admin/inactive-admin.component';
+import { UserFinderComponent } from './user-finder/user-finder.component';
+import { ShowVehiclesComponent } from './show-vehicles/show-vehicles.component';
+import { ViewCustomerDetailsComponent } from './add/view-customer-details/view-customer-details.component';
+import { OtpScreenComponent } from './add/otp-screen/otp-screen.component';
+import { KycApprovalComponent } from './kyc-approval/kyc-approval.component';
+import { FuelPriceComponent } from './fuel-price/fuel-price.component';
+import { AddFuelPriceComponent } from './add-fuel-price/add-fuel-price.component';
+import { ShoRoutePlanComponent } from './location/sho-route-plan/sho-route-plan.component';
+import { EChalanComponent } from './dashboard/e-chalan/e-chalan.component';
+import { TrackedVehiclesComponent } from './vehicle-route/tracked-vehicles/tracked-vehicles.component';
+import { RtoMasterComponent } from './rto-master/rto-master.component';
+import { DeviceKYCComponent } from './kyc-approval/device-kyc/device-kyc.component';
+import { DeviceDocComponent } from './kyc-approval/device-doc/device-doc.component';
+import { NewRoutePlanReportComponent } from './rout-plan-report/new-route-plan-report/new-route-plan-report.component';
+import { ModelMasterComponent } from './model-master/model-master.component';
+import { TrackedUntrackedVehiclesComponent } from './poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component';
+import { NotificationForCCComponent } from './notification-for-cc/notification-for-cc.component';
+import { AddNewDeviceComponent } from './dashboard/add-new-device/add-new-device.component';
+import { ViewCertificateComponent } from './dashboard/view-certificate/view-certificate.component';
+import { NewEditDeviceComponent } from './dashboard/new-edit-device/new-edit-device.component';
+import { DownloadCertificateComponent } from './dashboard/download-certificate/download-certificate.component';
+// import { DisatanceReportComponent } from './report/disatance-report/disatance-report.component';
+// import { MainComponent } from './report/main/main.component';
+// import { AcReportsComponent } from './report/ac-report/ac-report.component';
+
+
+
+
+
+
+
+
+
+
+
+// import { LiveTrackingComponent } from './live-tracking/live-tracking.component';
+
+
+// import { NgSelectModule } from '@ng-select/ng-select';
+// import { EditDeviceMasterComponent } from './device/src/app/device/edit-device-master/edit-device-master.component'; 
+
+
+// import { NgCircleProgressModule } from 'ng-circle-progress';
+
+// import { NgCircleProgressModule } from 'ng-circle-progress';
+
+/* const googleMapsCore = AgmCoreModule.forRoot({
+  apiKey : 'AIzaSyDZKxpYMfGSyStS3fLuVqHuM6ZEJWtF1-k',
+}); */
+
+/* const googleMapsCore = AgmCoreModule.forRoot({
+  apiKey : 'AIzaSyDZKxpYMfGSyStS3fLuVqHuM6ZEJWtF1-k',
+}); */
+
+export function createTranslateLoader(http: Http) {
+  return new TranslateStaticLoader(http, './assets/i18n', '.json');
+}
+
+
+@NgModule({
+  declarations: [
+
+    AppComponent,
+    CommunityComponent,
+    LoginComponent,
+    SignupComponent,
+    CountDown,
+    SupportComponent,
+    HomeComponent,
+    AlertComponent,
+    LoginsucComponent,
+    GmapComponent,
+    DashComponent,
+    SoonComponent,
+    AccountComponent,
+    DashboardComponent,
+    DialogContentExampleDialogComponent,
+    GatewayComponent,
+    DetailComponent,
+    RuleComponent,
+    ConstComponent,
+    LocationComponent,
+    EditScheComponent,
+    LoaderServiceComponent,
+    GeofencingComponent,
+    GeofenceAddComponent,
+    GeofancingReportComponent,
+    GeofencingViewComponent,
+    GeofencingView2Component,
+    DeviceReportComponent,
+    DeviceEditComponent,
+    DeviceSpeedReportComponent,
+    DeviceShareComponent,
+    ShareUserComponent,
+    SpeednotifyComponent,
+    ShareLocComponent,
+    AddComponent,
+    ResetpwdComponent,
+    GetdevdetailComponent,
+    IdealReportComponent,
+    SidebarComponent,
+    NotificationComponent,
+    MyaccountComponent,
+    AddCustComponent,
+    IgnReportComponent,
+    SpecDevComponent,
+    AboutUsComponent,
+    ServicesComponent,
+    TripDetailsComponent,
+    SummaryReportComponent,
+    GeofancingReportComponent,
+    OverSpeedComponent,
+    RouteViolationComponent,
+    StoppageReportComponent,
+    IgnitionReportComponent,
+    DistanceReportComponent,
+    AlertReportComponent,
+    TripReportComponent,
+    GroupComponent,
+    AddGroupComponent,
+    DialogDemoComponent,
+    EditGroupComponent,
+    DeleteGroupComponent,
+    AccountDetailComponent,
+    SidemenuFuelComponent,
+    VehicleRouteComponent,
+    RouteSetComponent,
+    ShowRouteComponent,
+    DealersInfoComponent,
+    RouteMappingComponent,
+    RouteMapAddComponent,
+    PointOfIntrestComponent,
+    RouteDeleteComponent,
+    AddDealerComponent,
+    NotificationMasterComponent,
+    EditCostumerComponent,
+    EditDealerComponent,
+    DriversPerformanceReportComponent,
+    TripHistoryComponent,
+    PoiListComponent,
+    ShowCaliberationComponent,
+    VehicleTypeComponent,
+    DriverDetailComponent,
+    DeviceModelComponent,
+    AddEditVehicleTypeComponent,
+    AddDriverComponent,
+    AddDeviceModelComponent,
+    EditRouteMapComponent,
+    POIdetailsComponent,
+    PoiDtlDelComponent,
+    AcReportComponent,
+    FuelReportComponent,
+    PoiMenuComponent,
+    AllMenusComponent,
+    LoadManagementComponent,
+    FuelReportGraphComponent,
+    EditVehicleTypeComponent,
+    UserMasterComponent,
+    DeviceComponent,
+    GpsMasterComponent,
+    CmdPacketMasterComponent,
+    EditDeviceMasterComponent,
+    GpsEditMasterComponent,
+    POIReportComponent,
+    AddpoiBylocationComponent,
+    POIreportComponent,
+    LRNumberComponent,
+    DayWiseReportComponent,
+    DeviceFuelReportComponent,
+    SOSAlertComponent,
+    EditDeviceModelComponent,
+    PoiMasterEditComponent,
+    NotificationSettingComponent,
+    DeviceSOSreportComponent,
+    SearchFilterPipe,
+    LiveHistoryComponent,
+    DeviceEntryComponent,
+    InventoryListComponent,
+    AcreportInfoComponent,
+    GeneralSettingsComponent,
+    DistributersListComponent,
+    AddDistributersComponent,
+    CostumerSupportComponent,
+    CreateTripComponent,
+    TripByDeviceComponent,
+    FuelObjectcomponentComponent,
+    TravelPathReportComponent,
+    ExpenseComponentComponent,
+    ExpenselistComponent,
+    ReportSettingComponent,
+    NormalCertComponent,
+    CertOptionComponent,
+    IdleReportComponent,
+    VehicleReminderComponent,
+    AddReminderComponent,
+    ImmobilizeComponent,
+    ReportFilterComponent,
+    ResetPasswordComponent,
+    DealerPermissionComponent,
+    DashboardContentComponent,
+    SharedDevicesComponent,
+    DailyLogsComponent,
+    VehicleExpensesComponent,
+    AddVehicleExpensesComponent,
+    VehicleExpenseDetailComponent,
+    ProductSummaryComponent,
+    AddProductComponent,
+    ProductShopComponent,
+    ProductOverviewComponent,
+    PointShareComponent,
+    MessageUtilityComponent,
+    TripLoadUnloadComponent,
+    BuyNowComponent,
+    BillingInfoComponent,
+    OrderSummaryComponent,
+    OrderDetailsComponent,
+    DemoVideosComponent,
+    SafePipe,
+    BillingDashboardComponent,
+    WorkingHourReportComponent,
+    WorkingHourDetailComponent,
+    TempretureGraphComponent,
+    CensorDisplayComponent,
+    ManualAddressComponent,
+    AddressUpdateComponent,
+    CmdUIComponent,
+    CommanQueueComponent,
+    CommandWindowComponent,
+    AddDeviceComponent,
+    MaintananceComponent,
+    SubAminComponent,
+    AddsubadminComponent,
+    PlayTripComponent,
+    TempretureReportComponent,
+    CommentWindowComponent,
+    DailyDetailsComponent,
+    DetailsComponent,
+    AnnouncementComponent,
+    DeviceRenewComponent,
+    ReportScheduleComponent,
+    DeviceListComponent,
+    TollComponent,
+    RenewalHistoryComponent,
+    DeviceInventoryComponent,
+    SelectUntrackVehiclesComponent,
+    IssueListComponent,
+    TechnicianComponent,
+    JobCardComponent,
+    AddJobCardComponent,
+    RechargeComponent,
+    AddPlanComponent,
+    RenewVehicleComponent,
+    RoutePlanComponent,
+    RoutPlanReportComponent,
+    ShowPullDataLinkComponent,
+    NewTempReportComponent,
+    RouteListComponent,
+    HualtListComponent,
+    InactiveAdminComponent,
+    UserFinderComponent,
+    ShowVehiclesComponent,
+    ViewCustomerDetailsComponent,
+    OtpScreenComponent,
+    KycApprovalComponent,
+    FuelPriceComponent,
+    AddFuelPriceComponent,
+    ShoRoutePlanComponent,
+    EChalanComponent,
+    TrackedVehiclesComponent,
+    RtoMasterComponent,
+    DeviceKYCComponent,
+    DeviceDocComponent,
+    NewRoutePlanReportComponent,
+    ModelMasterComponent,
+    TrackedUntrackedVehiclesComponent,
+    NotificationForCCComponent,
+    AddNewDeviceComponent,
+    ViewCertificateComponent,
+    NewEditDeviceComponent,
+    DownloadCertificateComponent,
+    // LiveTrackingComponent,
+    // MainComponent,
+    // DisatanceReportComponent,
+    // AcReportsComponent
+
+  ],
+  imports: [
+    /* 
+    AgmCoreModule.forRoot({
+      apiKey:  'AIzaSyDZKxpYMfGSyStS3fLuVqHuM6ZEJWtF1-k'
+    }), */
+    // NgCircleProgressModule.forRoot({
+    //   // set defaults here
+    //   radius: 100,
+    //   outerStrokeWidth: 16,
+    //   innerStrokeWidth: 8,
+    //   outerStrokeColor: "#78C000",
+    //   innerStrokeColor: "#C7E596",
+    //   animationDuration: 300,
+    
+    // }),
+    IfScrollbarsModule,
+    GaugeModule.forRoot(),
+   /*   GaugesModule, */
+    DateTimePickerModule ,
+    AngularDateTimePickerModule,    
+    BrowserModule,
+    NgbModule.forRoot(),
+    NgxPaginationModule,
+    MDBBootstrapModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    ExpansionPanelsModule,
+    routes2,
+    Ng2SearchPipeModule,
+    Ng2OrderModule,
+    MomentModule,
+    PasswordStrengthBarModule,
+    DatepickerModule,
+    DragulaModule,
+    routes,
+    ResizableModule,
+    ProgressBarModule,
+    FlashMessagesModule,
+    // NgSelectModule,
+    FormsModule, 
+    ReactiveFormsModule, 
+    ReCaptchaModule, 
+    HttpModule,  
+    StormpathModule, 
+    NguiPopupModule,
+   /*  googleMapsCore, */
+    Ng2DropdownModule,
+    BrowserAnimationsModule,
+    NoopAnimationsModule,
+    MdButtonModule,
+    MdCheckboxModule,
+    MdAutocompleteModule,
+    ChartsModule,
+    FlexLayoutModule,
+    MaterialModule,
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: (createTranslateLoader),
+      deps: [Http]
+    }),
+
+    FormWizardModule,BrowserModule, ChartsModule,
+    Ng2CarouselamosModule,
+  //  GaugeModule.forRoot(),
+    CarouselModule.forRoot(),
+    TimepickerModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    ReportModule,
+    ModalModule.forRoot()
+    
+  ],
+  schemas: [ NO_ERRORS_SCHEMA ],
+  entryComponents:[PoiDtlDelComponent,EditDeviceMasterComponent,AcreportInfoComponent,GpsEditMasterComponent,RenewalHistoryComponent,PoiMenuComponent,ExpenseComponentComponent,
+    AddpoiBylocationComponent,CreateTripComponent,CommentWindowComponent,DetailComponent,DailyDetailsComponent,RenewVehicleComponent,ViewCustomerDetailsComponent,OtpScreenComponent,DeviceDocComponent,TrackedUntrackedVehiclesComponent,DownloadCertificateComponent,
+    AnnouncementComponent,SelectUntrackVehiclesComponent,ExpenselistComponent,AddPlanComponent,AddDriverComponent,ShowPullDataLinkComponent,HualtListComponent,ShoRoutePlanComponent,EChalanComponent,TrackedVehiclesComponent,ViewCertificateComponent,],
+  providers: [/* AuthService , */ AlertService, Data, SimpleTimer,DatainjectionService,ContactService,ReportService,
+   { provide: MD_DIALOG_DATA, useValue: {} },
+    { provide: MdDialogRef, useValue: {} }],
+    exports: [AllMenusComponent],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+  constructor(){
+    //for raw angular running on 4200
+    var a="http://localhost:3005";
+
+    //for built angular served by backend
+    //var a="";
+  }
+
+ }
diff --git a/src/app/app.router.ts b/src/app/app.router.ts
new file mode 100644
index 0000000..175fa61
--- /dev/null
+++ b/src/app/app.router.ts
@@ -0,0 +1,565 @@
+import { ServicesComponent } from './services/services.component';
+import { AboutUsComponent } from './about-us/about-us.component';
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+// import { DetailsComponent } from './details/details.component';
+import { RuleComponent } from './rule/rule.component';
+import {AccountComponent} from './account/account.component';
+import {DashComponent} from './dash/dash.component';
+import { CommunityComponent } from './community/community.component';
+import { LoginComponent } from './login/login.component';
+import { SignupComponent } from './signup/signup.component';
+import { SupportComponent } from './support/support.component';
+
+import {GmapComponent} from './gmap/gmap.component';
+import {SoonComponent} from './soon/soon.component';
+import { GatewayComponent } from './gateway/gateway.component';
+import { ConstComponent } from './const/const.component';
+import { LocationComponent } from './location/location.component';
+import { EditScheComponent } from './edit-sche/edit-sche.component';
+import { GeofencingComponent } from './geofencing/geofencing.component';
+import { GeofenceAddComponent } from './geofence-add/geofence-add.component';
+import { GeofencingViewComponent } from './geofencing-view/geofencing-view.component';
+
+import { GeofencingView2Component } from './geofencing-view2/geofencing-view2.component';
+import { DeviceEditComponent } from './dashboard/device-edit/device-edit.component';
+import { ResetpwdComponent } from './resetpwd/resetpwd.component';
+import { GetdevdetailComponent } from './const/getdevdetail/getdevdetail.component';
+import { MyaccountComponent } from './myaccount/myaccount.component';
+import {DashboardComponent} from './dashboard/dashboard.component';
+import {DialogContentExampleDialogComponent} from './dialog-content-example-dialog/dialog-content-example-dialog.component';
+import { DeviceShareComponent } from './dashboard/device-share/device-share.component';
+import { ShareUserComponent } from './dashboard/share-user/share-user.component';
+import { SpeednotifyComponent } from './dashboard/speednotify/speednotify.component';
+import { ShareLocComponent } from './location/share-loc/share-loc.component';
+import { AddComponent } from './add/add.component';
+import { SidebarComponent } from './sidebar/sidebar.component';
+import { NotificationComponent } from './notification/notification.component';
+import { AddCustComponent } from './add-cust/add-cust.component';
+import { SpecDevComponent } from './spec-dev/spec-dev.component';
+import { GroupComponent } from './group/group.component';
+import { AddGroupComponent } from './add-group/add-group.component';
+import { EditGroupComponent } from './edit-group/edit-group.component';
+import { DeleteGroupComponent } from './delete-group/delete-group.component';
+
+import { SidemenuFuelComponent } from './sidemenu-fuel/sidemenu-fuel.component';
+import { VehicleRouteComponent } from './vehicle-route/vehicle-route.component';
+import { RouteSetComponent } from './route-set/route-set.component';
+import { ShowRouteComponent } from './show-route/show-route.component';
+import { DealersInfoComponent } from './dealers-info/dealers-info.component';
+import { RouteMappingComponent } from './route-mapping/route-mapping.component';
+import { RouteMapAddComponent } from './route-map-add/route-map-add.component';
+import { PointOfIntrestComponent } from './point-of-intrest/point-of-intrest.component';
+import { RouteDeleteComponent } from './route-delete/route-delete.component';
+import { AddDealerComponent } from './add-dealer/add-dealer.component';
+import { NotificationMasterComponent } from './notification-master/notification-master.component';
+import { EditCostumerComponent } from './edit-costumer/edit-costumer.component';
+import { EditDealerComponent } from './edit-dealer/edit-dealer.component';
+import { TripHistoryComponent } from './trip-history/trip-history.component';
+import { PoiListComponent } from './poi-list/poi-list.component';
+
+import { ShowCaliberationComponent} from './show-caliberation/show-caliberation.component';
+import {VehicleTypeComponent} from './vehicle-type/vehicle-type.component';
+import { DriverDetailComponent } from './driver-detail/driver-detail.component';
+import { DeviceModelComponent } from './device-model/device-model.component';
+import { AddEditVehicleTypeComponent } from './add-edit-vehicle-type/add-edit-vehicle-type.component';
+import { AddDriverComponent } from  './add-driver/add-driver.component';
+import { AddDeviceModelComponent } from './add-device-model/add-device-model.component';
+import { EditRouteMapComponent } from './edit-route-map/edit-route-map.component';
+import { POIdetailsComponent } from './poidetails/poidetails.component';
+import { PoiMenuComponent } from "./poi-menu/poi-menu.component";
+import { LoadManagementComponent } from './load-management/load-management.component';
+import { FuelReportGraphComponent } from './fuel-report-graph/fuel-report-graph.component';
+import { EditVehicleTypeComponent } from './edit-vehicle-type/edit-vehicle-type.component';
+import { UserMasterComponent } from './user-master/user-master.component'
+import { DeviceComponent } from './device/device.component';
+import { GpsMasterComponent } from './gps-master/gps-master.component';
+import { CmdPacketMasterComponent } from './cmd-packet-master/cmd-packet-master.component';
+import { POIreportComponent } from './poireport/poireport.component';
+import { LRNumberComponent } from './lr-number/lr-number.component';
+import { SOSAlertComponent } from './sosalert/sosalert.component';
+import { HomeComponent } from './home/home.component';
+import { EditDeviceModelComponent } from './edit-device-model/edit-device-model.component';
+import { PoiMasterEditComponent } from './poi-master-edit/poi-master-edit.component';
+import { NotificationSettingComponent } from './notification-setting/notification-setting.component';
+import { LiveHistoryComponent } from './location/live-history/live-history.component';
+import { DeviceEntryComponent } from './device-entry/device-entry.component';
+import { InventoryListComponent } from './inventory-list/inventory-list.component';
+import { GeneralSettingsComponent } from './dashboard/general-settings/general-settings.component';
+import { DistributersListComponent } from './distributers-list/distributers-list.component';
+import { AddDistributersComponent } from './add-distributers/add-distributers.component';
+import { CostumerSupportComponent } from './costumer-support/costumer-support.component';
+import { FuelObjectcomponentComponent } from './fuel-objectcomponent/fuel-objectcomponent.component';
+import { ReportSettingComponent } from './add/report-setting/report-setting.component';
+import { NormalCertComponent } from './device/normal-cert/normal-cert.component';
+import { CertOptionComponent } from './device/cert-option/cert-option.component';
+
+import { VehicleReminderComponent } from './vehicle-reminder/vehicle-reminder.component';
+
+import { AddReminderComponent } from './vehicle-reminder/add-reminder/add-reminder.component';
+import { ImmobilizeComponent } from './location/immobilize/immobilize.component';
+import { ResetPasswordComponent } from './add/reset-password/reset-password.component';
+import { DealerPermissionComponent } from './dealers-info/dealer-permission/dealer-permission.component';
+import { DashboardContentComponent } from './add/dashboard-content/dashboard-content.component';
+import { SharedDevicesComponent } from './const/shared-devices/shared-devices.component';
+import { VehicleExpensesComponent } from './vehicle-expenses/vehicle-expenses.component';
+import { AddVehicleExpensesComponent } from './vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component';
+import { VehicleExpenseDetailComponent } from './vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component';
+import { ProductSummaryComponent } from './product-summary/product-summary.component';
+import { AddProductComponent } from './product-summary/add-product/add-product.component';
+import { ProductShopComponent } from './product-shop/product-shop.component';
+import { ProductOverviewComponent } from './product-shop/product-overview/product-overview.component';
+import { PointShareComponent } from './point-share/point-share.component';
+import { MessageUtilityComponent } from './message-utility/message-utility.component';
+import { BuyNowComponent } from './product-shop/buy-now/buy-now.component';
+import { BillingInfoComponent } from './product-shop/billing-info/billing-info.component';
+import { OrderSummaryComponent } from './product-shop/order-summary/order-summary.component';
+import { OrderDetailsComponent } from './product-shop/order-details/order-details.component';
+import { DemoVideosComponent } from './const/demo-videos/demo-videos.component';
+import { BillingDashboardComponent } from './billing-dashboard/billing-dashboard.component';
+import { AccountDetailComponent } from './account-detail/account-detail.component';
+import { CensorDisplayComponent } from './censor-display/censor-display.component';
+import { ManualAddressComponent } from './const/manual-address/manual-address.component';
+import { AddressUpdateComponent } from './address-update/address-update.component';
+import { CmdUIComponent } from './location/cmd-ui/cmd-ui.component';
+import { CommanQueueComponent } from './comman-queue/comman-queue.component';
+import { CommandWindowComponent } from './location/command-window/command-window.component';
+import { AddDeviceComponent } from './location/add-device/add-device.component';
+import { SubAminComponent } from './sub-amin/sub-amin.component';
+import { AddsubadminComponent } from './sub-amin/addsubadmin/addsubadmin.component';
+import { PlayTripComponent } from './play-trip/play-trip.component';
+import { DetailsComponent } from './details/details.component';
+import { DisatanceReportComponent } from './report/report component/disatance-report/disatance-report.component';
+import { MainComponent } from './report/main/main.component';
+import { AcReportsComponent } from './report/report component/ac-report/ac-report.component';
+import { DailyReportComponent } from './report/report component/daily-report/daily-report.component';
+import { DailyLogssComponent } from './report/report component/daily-logs/daily-logs.component';
+import { DayWiseReportComponent } from './report/report component/day-wise-report/day-wise-report.component';
+import { GeofancingReportComponent } from './report/report component/geofancing-report/geofancing-report.component';
+import { IdleReportComponent } from './report/report component/idle-report/idle-report.component';
+import { IgnitionReportComponent } from './report/report component/ignition-report/ignition-report.component';
+import { TripLoadUnloadComponent } from './report/report component/trip-load-unload/trip-load-unload.component';
+import { OverSpeedComponent } from './report/report component/over-speed/over-speed.component';
+import { POIReportComponent } from './report/report component/poi-report/poi-report.component';
+import { RouteViolationComponent } from './report/report component/route-violation/route-violation.component';
+import { DeviceSpeedReportComponent } from './report/report component/device-speed-report/device-speed-report.component';
+import { SummaryReportComponent } from './report/report component/summary-report/summary-report.component';
+import { StoppageReportComponent } from './report/report component/stoppage-report/stoppage-report.component';
+import { DeviceSOSreportComponent } from './report/report component/device-sosreport/device-sosreport.component';
+import { TripReportComponent } from './report/report component/trip-report/trip-report.component';
+import { TravelPathReportComponent } from './report/report component/travel-path-report/travel-path-report.component';
+import { WorkingHourReportComponent } from './report/report component/working-hour-report/working-hour-report.component';
+import { MaintananceComponent } from './report/report component/maintanance/maintanance.component';
+import { NotificationMastersComponent } from './report/report component/notification-master/notification-master.component';
+import { DriversPerformanceReportComponent } from './report/report component/drivers-performance-report/drivers-performance-report.component';
+import { DeviceRenewComponent } from './device-renew/device-renew.component';
+import { ReportScheduleComponent } from './report-schedule/report-schedule.component';
+import { DeviceFuelReportComponent } from './device-report/device-fuel-report/device-fuel-report.component';
+import { NoReportComponent } from './report/report component/no-report/no-report.component';
+import { StartComponent } from './report/report component/start/start.component';
+import { TempretureReportComponent } from './device-report/tempreture-report/tempreture-report.component';
+import { TempretureGraphComponent } from './device-report/tempreture-graph/tempreture-graph.component';
+import { DeviceListComponent } from './device-list/device-list.component';
+import { TollComponent } from './toll/toll.component';
+import { NewTravelPathReportComponent } from './report/report component/new-travel-path-report/new-travel-path-report.component';
+import { DeviceInventoryComponent } from './device-inventory/device-inventory.component';
+import { IssueListComponent } from './issue-list/issue-list.component';
+import { PushDataReportComponent } from './report/report component/push-data-report/push-data-report.component';
+import { TechnicianComponent } from './technician/technician.component';
+import { JobCardComponent } from './job-card/job-card.component';
+import { AddJobCardComponent } from './job-card/add-job-card/add-job-card.component';
+import { RechargeComponent } from './recharge/recharge.component';
+import { RoutePlanComponent } from './route-plan/route-plan.component';
+import { RoutPlanReportComponent } from './rout-plan-report/rout-plan-report.component';
+import { RouteListComponent } from './route-plan/route-list/route-list.component';
+import { InactiveAdminComponent } from './inactive-admin/inactive-admin.component';
+import { UserFinderComponent } from './user-finder/user-finder.component';
+import { ShowVehiclesComponent } from './show-vehicles/show-vehicles.component';
+import { KycApprovalComponent } from './kyc-approval/kyc-approval.component';
+import { FuelPriceComponent } from './fuel-price/fuel-price.component';
+import { AddFuelPriceComponent } from './add-fuel-price/add-fuel-price.component';
+import { RtoMasterComponent } from './rto-master/rto-master.component';
+import { NewRoutePlanReportComponent } from './rout-plan-report/new-route-plan-report/new-route-plan-report.component';
+import { ModelMasterComponent } from './model-master/model-master.component';
+import { PerformanceReportComponent } from './report/report component/performance-report/performance-report.component';
+import { NotificationForCCComponent } from './notification-for-cc/notification-for-cc.component';
+import { AddNewDeviceComponent } from './dashboard/add-new-device/add-new-device.component';
+
+// -----------------------------------------
+// import { DriversPerformanceReportComponent } from './device-report/drivers-performance-report/drivers-performance-report.component';
+// import { IdealReportComponent } from './device-report/ideal-report/ideal-report.component';
+// import { DeviceSpeedReportComponent } from './device-report/device-speed-report/device-speed-report.component';
+// import { IgnReportComponent } from './device-report/ign-report/ign-report.component';
+// import { TripDetailsComponent } from './device-report/trip-details/trip-details.component';
+// import { SummaryReportComponent } from './device-report/summary-report/summary-report.component';
+// import { GeofancingReportComponent } from './device-report/geofancing-report/geofancing-report.component';
+// import { OverSpeedComponent } from './device-report/over-speed/over-speed.component';
+// import { RouteViolationComponent } from './device-report/route-violation/route-violation.component';
+// import { StoppageReportComponent } from './device-report/stoppage-report/stoppage-report.component';
+// import { IgnitionReportComponent } from './device-report/ignition-report/ignition-report.component';
+// import { DistanceReportComponent } from './device-report/distance-report/distance-report.component';
+// import { AlertReportComponent } from './device-report/alert-report/alert-report.component';
+// import { TripReportComponent } from './device-report/trip-report/trip-report.component';
+// import { POIReportComponent } from './device-report/poi-report/poi-report.component';
+// import { DayWiseReportComponent } from './device-report/day-wise-report/day-wise-report.component';
+// import { AcReportComponent } from './device-report/ac-report/ac-report.component';
+import { FuelReportComponent } from './device-report/fuel-report/fuel-report.component';
+import { NewEditDeviceComponent } from './dashboard/new-edit-device/new-edit-device.component';
+// import { DeviceFuelReportComponent } from './device-report/device-fuel-report/device-fuel-report.component';
+// import { DeviceSOSreportComponent } from './device-report/device-sosreport/device-sosreport.component';
+// import { TripByDeviceComponent } from './device-report/trip-by-device/trip-by-device.component';
+// import { IdleReportComponent } from './device-report/idle-report/idle-report.component';
+// import { TravelPathReportComponent } from './device-report/travel-path-report/travel-path-report.component';
+// import { ExpenseComponentComponent } from './device-report/trip-by-device/expense-component/expense-component.component';
+// import { ExpenselistComponent } from './device-report/trip-by-device/expenselist/expenselist.component';
+// import { WorkingHourReportComponent } from './device-report/working-hour-report/working-hour-report.component';
+// import { ReportFilterComponent } from './device-report/report-filter/report-filter.component';
+// import { TripLoadUnloadComponent } from './device-report/trip-load-unload/trip-load-unload.component';
+// import { MaintananceComponent } from './device-report/maintanance/maintanance.component';
+// import { WorkingHourDetailComponent } from './device-report/working-hour-detail/working-hour-detail.component';
+// import { TempretureGraphComponent } from './device-report/tempreture-graph/tempreture-graph.component';
+// import { TempretureReportComponent } from './device-report/tempreture-report/tempreture-report.component';
+// import { DeviceReportComponent } from './device-report/device-report.component';
+// import { DailyDetailsComponent } from './device-report/daily-details/daily-details.component';
+
+export const router: Routes =[
+    { path: '', redirectTo: 'login', pathMatch: 'full' },
+
+    { path: 'community', component: CommunityComponent },
+    { path: 'rule', component: RuleComponent },
+    { path: 'login', component: LoginComponent },
+       { path: 'home', component: HomeComponent },
+    { path: 'signup', component: SignupComponent },
+    { path: 'support', component: SupportComponent },
+    { path: 'gmap', component: GmapComponent },
+    { path: 'dash', component: DashComponent},
+    { path: 'account', component: AccountComponent},
+    // {path: 'soon', component:SoonComponent},
+    {path: 'details', component:DetailsComponent},
+    {path: 'gateway', component:GatewayComponent},
+    {path: 'const', component:ConstComponent    },
+    {path: 'location', component:LocationComponent},
+    {path : 'location/immobilize', component : ImmobilizeComponent},
+    {path: 'dashboard', component:DashboardComponent},
+    {path: 'dashboard/:id', component:DashboardComponent},
+    {path: 'edit-sche', component:EditScheComponent},
+    {path : 'device/certOptioon',component :CertOptionComponent},
+    {path: 'geofencing', component:GeofencingComponent},
+    {path : 'add/reset_password', component : ResetPasswordComponent},
+    {path: 'geofence-add', component:GeofenceAddComponent},
+    {path: 'geofencing-view', component: GeofencingViewComponent},
+    {path: 'geofencing-view2', component: GeofencingView2Component},
+    {path: 'add-device', component:DialogContentExampleDialogComponent},
+    {path: 'dashboard/device-edit', component:DeviceEditComponent},
+    
+    {path: 'deealer/dealer_permission', component:DealerPermissionComponent},
+    {path: 'playTrip',component:PlayTripComponent},
+    
+    {path : 'device/normal_cert', component : NormalCertComponent},
+    {path : 'add/report_sestting',component : ReportSettingComponent},
+    {path : 'add/dashboard_content', component : DashboardContentComponent},
+    // {path : 'device-report/dailyLogs',component : DailyLogsComponent}, 
+    {path: 'vehicleExpense',component : VehicleExpensesComponent},
+    {path :'addVehicleExpense', component : AddVehicleExpensesComponent},
+    {path : 'vehExpenseDetail', component : VehicleExpenseDetailComponent},
+    {path: 'dashboard/device-share', component:DeviceShareComponent},
+    {path : 'product-summary', component : ProductSummaryComponent},
+    {path :'product-summary/add_product',component: AddProductComponent},
+    {path : 'product-shop/product-overview', component : ProductOverviewComponent},
+    {path: 'dashboard/share-user', component:ShareUserComponent},
+    {path: 'dashboard/speednotify', component:SpeednotifyComponent},
+    {path: 'location/share-loc', component:ShareLocComponent},
+    {path: 'add', component:AddComponent},
+    {path : 'const/shared_devices',component : SharedDevicesComponent},
+    {path: 'resetpwd', component:ResetpwdComponent},
+    {path: 'const/getdevdetail', component:GetdevdetailComponent},
+    {path: 'sidebar', component:SidebarComponent},
+    {path: 'notification', component:NotificationComponent},
+    {path: 'myaccount', component:MyaccountComponent},
+    {path: 'add-cust',component:AddCustComponent},
+    {path: 'spec-dev', component:SpecDevComponent},
+    {path: 'about-us',component:AboutUsComponent},
+    {path: 'services',component:ServicesComponent},
+    {path:'device-details',component:DetailsComponent},
+    {path: 'location/live-history',component:LiveHistoryComponent},
+    {path:'vehicle/reminder_service',component:VehicleReminderComponent},
+    {path : "vehicle_reminder/add_reminder" , component:AddReminderComponent},
+    {path: 'productShop' , component : ProductShopComponent},
+    {path:'product-shop/buyProduct',component : BuyNowComponent},
+    {path :'product-shop/BillingInfo',component : BillingInfoComponent},
+    {path:"cmdWind",component:CommandWindowComponent},
+    {path : 'orderSummary',component : OrderSummaryComponent},
+    {path: 'orderDetail', component: OrderDetailsComponent},
+    {path : 'demoVideos', component : DemoVideosComponent},
+    {path: 'POI_list',component: POIreportComponent},    
+    {path:'manualAddress',component : ManualAddressComponent},
+    {path :'add_device', component: AddDeviceComponent},
+    {path : 'CmdUIComponent',component:CmdUIComponent},
+    {path : 'addreessUpdate',component:AddressUpdateComponent},
+    {path: 'group_view',component: GroupComponent},
+    {path: 'addgroup',component: AddGroupComponent},
+    {path : 'sosalert', component: SOSAlertComponent},
+    {path: 'editgrp',component: EditGroupComponent},
+    {path: 'deleteGrp',component: DeleteGroupComponent},
+    {path : 'commanQueue',component: CommanQueueComponent},
+    {path: 'accountSettings',component: AccountDetailComponent},
+    {path: 'notifSettings',component: NotificationSettingComponent},
+    {path : 'PointShareComponent',component : PointShareComponent},
+    {path: 'messageUtility',component : MessageUtilityComponent},
+    {path: 'censor',component : CensorDisplayComponent},
+    // {path : 'live',component : LiveTrackingComponent},
+    {path: 'fuelComp',component: SidemenuFuelComponent},
+    {path: 'vehicleRoute',component: VehicleRouteComponent},
+    {path: 'setRoute',component: RouteSetComponent},
+    {path: 'viewRoute',component: ShowRouteComponent},
+    {path: 'dealerInfo',component: DealersInfoComponent},
+    {path: 'routeMapping',component: RouteMappingComponent},
+    {path: 'editrouteMap',component: EditRouteMapComponent},
+    {path : 'suAdmin', component : SubAminComponent},
+    {path: 'subAdmin/addSubAdmin',component:AddsubadminComponent},
+    {path: 'addRouteMap',component: RouteMapAddComponent},
+    {path: 'Point_Of_Intrest',component:PointOfIntrestComponent},
+    {path: 'POI_master_edit',component:PoiMasterEditComponent},
+    {path : 'cus_support', component : CostumerSupportComponent},
+    
+    {path: 'routeDelete',component:RouteDeleteComponent},
+    {path: 'addDealer',component:AddDealerComponent},
+    {path: 'distributersList', component : DistributersListComponent},
+    {path : 'addDistributers', component : AddDistributersComponent},
+    {path: 'notifications',component:NotificationMasterComponent},
+    {path: 'edit-cust',component:EditCostumerComponent},   
+    {path: 'edit-dealer',component:EditDealerComponent},
+    {path: 'tripHistory',component:TripHistoryComponent},
+    {path: 'fuelobj',component:FuelObjectcomponentComponent},
+    {path: 'poiList',component:PoiListComponent},
+    {path: 'loadManagement',component:LoadManagementComponent},
+    {path: 'lrinput',component:LRNumberComponent},
+    
+    {path: 'showCaliberation',component:ShowCaliberationComponent},//----path
+    {path: 'VehicleType',component:VehicleTypeComponent},
+    {path: 'driverdetail',component:DriverDetailComponent},//path
+    {path: 'deviceModel',component:DeviceModelComponent},//path
+    {path: 'billingDashboard',component : BillingDashboardComponent},
+    {path : 'generalSetting', component : GeneralSettingsComponent},
+    {path: 'addEditVehicleType',component:AddEditVehicleTypeComponent},
+    {path: 'addDriver',component:AddDriverComponent},
+    {path: 'addDeviceModel',component:AddDeviceModelComponent},
+    {path: 'poilist',component:POIdetailsComponent},
+    {path: 'poimenu',component:PoiMenuComponent},
+    {path: 'fuel_Report',component:FuelReportGraphComponent},
+    {path: 'editVehicle_type',component:EditVehicleTypeComponent},
+    {path: 'editDeviceModel',component:EditDeviceModelComponent},
+    {path: 'userLogs',component:UserMasterComponent},
+    {path: 'deviceMaster',component:DeviceComponent},
+    {path: 'gpsMaster',component:GpsMasterComponent},
+    {path: 'cmdMaster',component:CmdPacketMasterComponent},
+    {path : 'deviceEntry', component : DeviceEntryComponent},
+    {path : 'Inventorylist', component : InventoryListComponent},
+    {path : 'RenewReport', component : DeviceRenewComponent},
+    {path : 'report-schedule', component : ReportScheduleComponent},
+    
+    // --------------------OLD--------------------------/
+    // {path: 'device-report/tripsDetails',component:TripDetailsComponent},
+    // {path : 'device-report/tripexpense',component : ExpenseComponentComponent},
+    // {path: 'device-report/device-speed-report', component:DeviceSpeedReportComponent},
+    // {path:'daily-details',component:DailyDetailsComponent},
+    // {path: 'device-report', component:DeviceReportComponent},
+    // {path : 'device-report/expenseList',component : ExpenselistComponent},
+    // {path: 'device-report/ideal-report', component: IdealReportComponent },
+    // {path: 'device-report/ign-report', component:IgnReportComponent},
+    // {path : 'device-report/idle-report', component : IdleReportComponent},
+    // {path : 'workhourReport', component : WorkingHourReportComponent},
+    // {path : 'work_detail', component : WorkingHourDetailComponent},
+    // {path: 'device-report/devicesosReport',component:DeviceSOSreportComponent},
+    // {path: 'device-report/summary-report',component:SummaryReportComponent},
+    // {path: 'device-report/daywise-report',component:DayWiseReportComponent},
+    {path: 'device-report/dev-fuel-report',component:DeviceFuelReportComponent},
+    // {path: 'device-report/geofancing',component:GeofancingReportComponent},
+    // {path: 'device-report/overspeed',component: OverSpeedComponent},
+    // {path: 'device-report/routeViolation',component: RouteViolationComponent},
+    // {path: 'device-report/stoppage_report',component: StoppageReportComponent},
+    // {path: 'device-report/ignition_report',component: IgnitionReportComponent},
+    // {path: 'device-report/distance_report',component: DistanceReportComponent},
+    // {path: 'device-report/alert_report',component: AlertReportComponent},
+    // {path: 'device-report/trip_report',component: TripReportComponent},
+    // {path: 'device-report/POI_report',component: POIReportComponent},
+    // {path: 'device-report/deviceTrip',component: TripByDeviceComponent},
+    // {path: 'report_filter',component: ReportFilterComponent},    
+    // {path: 'device-report/ac_report',component: AcReportComponent},
+    // {path: 'device-report/tripLoadUnload',component: TripLoadUnloadComponent},
+    // {path : 'device-report/travel_path' ,component : TravelPathReportComponent},
+    // // {path : 'device-report/ac_report/info',component:AcreportInfoComponent},
+    {path: 'device-report/fuel_report',component: FuelReportComponent},
+    {path : 'device-report/temp_report', component : TempretureReportComponent},
+    // {path: 'device-report/Driver-performance',component:DriversPerformanceReportComponent},
+    {path : 'device-report/tempGraph',component : TempretureGraphComponent},
+    // {path: 'maintananceReport',component: MaintananceComponent},
+
+    //--------------------------------
+     {path : 'deviceList',component : DeviceListComponent},
+     {path : 'toll',component : TollComponent},
+     {path : 'deviceInventory',component : DeviceInventoryComponent},
+     {path : 'technician',component : TechnicianComponent},
+     {path : 'JobCard',component : JobCardComponent},
+     {path : 'JobCardAdd',component : AddJobCardComponent},
+    {
+    path: 'reports',
+    component: MainComponent, // this is the component with the <router-outlet> in the template
+    // loadChildren: () => import('./report/report.module').then(m => m.ReportModule),
+    children: [
+    {
+        path: 'ac_report', // child route path
+        component: AcReportsComponent, 
+      },
+      {
+        path: 'distance_report', // child route path
+        component: DisatanceReportComponent, 
+      },
+       {
+        path: 'daily_report', // child route path
+        component: DailyReportComponent, 
+      },
+      {
+        path: 'daily_logs', 
+        component: DailyLogssComponent, 
+      },
+      {
+        path: 'daywise_report', 
+        component: DayWiseReportComponent, 
+      },
+      {
+        path: 'geofence_report', 
+        component: GeofancingReportComponent, 
+      },
+       {
+        path: 'idle_report', 
+        component: IdleReportComponent, 
+      },
+      {
+        path: 'ignition_report', 
+        component: IgnitionReportComponent, 
+      },
+      {
+        path: 'loading_unloading_trip', 
+        component: TripLoadUnloadComponent, 
+      },
+      {
+        path: 'overspeed_report', 
+        component: OverSpeedComponent, 
+      },
+      {
+        path: 'poi_report', 
+        component: POIReportComponent, 
+      },
+      {
+        path: 'route_violation_report', 
+        component: RouteViolationComponent, 
+      },
+      {
+        path: 'speed_variation', 
+        component: DeviceSpeedReportComponent, 
+      },
+      {
+        path: 'summary_report', 
+        component: SummaryReportComponent, 
+      },
+       {
+        path: 'stoppage_report', 
+        component: StoppageReportComponent, 
+      },
+      {
+        path: 'sos_report', 
+        component: DeviceSOSreportComponent, 
+      },
+       {
+        path: 'trip_report', 
+        component: TripReportComponent, 
+      },
+      {
+        path: 'travel_path_report', 
+        component: NewTravelPathReportComponent, 
+      },
+      {
+        path: 'working_hours_report', 
+        component: WorkingHourReportComponent, 
+      },
+       {
+        path: 'maintanance_report', 
+        component: MaintananceComponent, 
+      },
+       {
+        path: 'notification_master', 
+        component: NotificationMastersComponent, 
+      },
+      {
+        path: 'driver_performance_report', 
+        component: DriversPerformanceReportComponent, 
+      },
+      {
+        path: 'no-report', 
+        component: NoReportComponent, 
+      },
+      {
+        path: 'start', 
+        component: StartComponent, 
+      },
+      {
+        path: 'dataPushReport', 
+        component: PushDataReportComponent, 
+      },
+       {path:"performanceReport",component:PerformanceReportComponent},
+      
+      // AC_report','daily_report','daily_logs','dayWiseReport','distance_report','geofence_report','idle_report',
+      // 'ignition_report','loadunloadTrip','over_speed','poi_report','route_violation_report','speed_variation',
+      // 'summary_report','stoppage_report','device_sos_report',
+      // 'trip_report','travel_path-report','working_hours_report','maintanance_report'notification_master Driver_performance
+    ],
+  },
+  {
+    path:'IEMI_Finder',component:SoonComponent
+  },
+   {
+    path:'USER_Finder',component:UserFinderComponent
+  },
+  {
+    path:'issueList',component:IssueListComponent
+  },
+  {
+    path:'recharge',component:RechargeComponent
+  },
+  {
+    path:'inactiveAdmins',component:InactiveAdminComponent
+  },
+  {
+    path:'routePlan',component:RouteListComponent
+  },
+   {
+    path:'addRoutePlan',component:RoutePlanComponent
+  },
+  {
+    path:'routePlanReport',component:RoutPlanReportComponent
+  },
+  {
+    path:'ViewVehicle',component:ShowVehiclesComponent
+  },
+  {
+    path:"add_newDevice",component:AddNewDeviceComponent
+  },
+  
+  {path:'KycApproval',component:KycApprovalComponent},
+  {path:'NotificationForCC',component:NotificationForCCComponent},
+  {path:'FuelPrice',component:FuelPriceComponent},
+  {path:'addFuelPrice',component:AddFuelPriceComponent},
+  {path:'RTO_Master',component:RtoMasterComponent},
+  // {path:'routePlanReportNew',component:NewRoutePlanReportComponent},
+  {path:'routePlanReportNew',component:RoutPlanReportComponent},
+  {path:'ModelMaster',component:ModelMasterComponent},
+  {path:"editDevice",component:NewEditDeviceComponent},
+  {path: '**', redirectTo: 'login', pathMatch: 'full'},
+
+];
+
+export const routes: ModuleWithProviders = RouterModule.forRoot(router);
+
diff --git a/src/app/billing-dashboard/billing-dashboard.component.html b/src/app/billing-dashboard/billing-dashboard.component.html
new file mode 100644
index 0000000..1871718
--- /dev/null
+++ b/src/app/billing-dashboard/billing-dashboard.component.html
@@ -0,0 +1,46 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'BILLING DETAIL' | translate}}</h4>
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+  
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr style="white-space: nowrap;">
+                         <th >Transection ID </th>
+                        <th >Distrubuter Name</th>
+                        <th >Billing Date</th>
+                        <th >No. of Device</th>
+                        <th >Amount Paid</th>
+                        <th >Rate</th>
+                        <th >Status</th>
+                        <th >Billing Type</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/billing-dashboard/billing-dashboard.component.scss b/src/app/billing-dashboard/billing-dashboard.component.scss
new file mode 100644
index 0000000..b616a70
--- /dev/null
+++ b/src/app/billing-dashboard/billing-dashboard.component.scss
@@ -0,0 +1,90 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
+
+    #toast {
+      visibility: hidden;
+      max-width: 250px;
+      height: 50px;
+      /*margin-left: -125px;*/
+      margin: auto;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      border-radius: 2px;
+    
+      position: fixed;
+      z-index: 1;
+      left: 60%;right:0;
+      bottom: 80%;
+      font-size: 13px;
+      white-space: nowrap;
+    }
+    
+    #toast #img{
+      width: 250px;
+      height: s50px;
+        
+        float: left;
+        
+        padding-top: 16px;
+        padding-bottom: 16px;
+        
+        box-sizing: border-box;
+    
+        
+        background-color: #111;
+        color: #fff;
+    }
+    #toast #desc{
+    
+        
+        color: #fff;
+       
+        padding: 16px;
+        
+        overflow: hidden;
+      white-space: nowrap;
+    }
+    
+    #toast.show {
+        visibility: visible;
+        -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+        animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+    }
\ No newline at end of file
diff --git a/src/app/billing-dashboard/billing-dashboard.component.spec.ts b/src/app/billing-dashboard/billing-dashboard.component.spec.ts
new file mode 100644
index 0000000..feca6de
--- /dev/null
+++ b/src/app/billing-dashboard/billing-dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BillingDashboardComponent } from './billing-dashboard.component';
+
+describe('BillingDashboardComponent', () => {
+  let component: BillingDashboardComponent;
+  let fixture: ComponentFixture<BillingDashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BillingDashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BillingDashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/billing-dashboard/billing-dashboard.component.ts b/src/app/billing-dashboard/billing-dashboard.component.ts
new file mode 100644
index 0000000..bf4aeec
--- /dev/null
+++ b/src/app/billing-dashboard/billing-dashboard.component.ts
@@ -0,0 +1,374 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+declare var google: any;
+declare var $:any;
+declare var swal:any;
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+import * as moment from 'moment';
+import { ContactService } from '../contact.service';
+import { environment } from '../../environments/environment';
+
+
+@Component({
+  selector: 'app-billing-dashboard',
+  templateUrl: './billing-dashboard.component.html',
+  styleUrls: ['./billing-dashboard.component.scss']
+})
+export class BillingDashboardComponent implements OnInit {
+  ignition_data: any =[];
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+tabelObj:any; 
+  tableFlag: boolean=true;
+  identifier : String = "billing_detail";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  from_date: any;
+  data_descip: string;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { 
+    
+  
+  }
+
+  ngOnInit() {
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    var fd = new Date();
+    this.from_date = new Date(fd.setDate(1));
+    console.log(this.from_date);
+    var pdate = moment(fd).endOf('month').format('YYYY-MM-DD hh:mm');
+    this.todate = new Date(pdate);
+    this.testTable();
+  }
+
+  tab:any;
+  optionVal:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+userArr:any;
+billingStauts :any;
+billingType :any;
+getReport(event){
+  console.log("inside function",event);
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var userId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(event.date);
+    this.from_date = new Date(fd.setDate(1));
+    var pdate = moment(fd).endOf('month').format('YYYY-MM-DD hh:mm');
+    this.todate = new Date(pdate);
+    console.log(this.todate);  
+    
+    userId= event.user;
+    this.billingStauts = event.status[0];
+    this.billingType = event.type[0]
+    this.userArr = userId[0];   
+    console.log(this.billingStauts,this.billingType,this.userArr,this.from_date,this.todate); 
+    this.tabelObj.ajax.reload();  
+   
+  }
+ 
+}
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+      // dom: 'Bfrtip',
+      // buttons: [
+      //     'copy', 'csv', 'excel', 'pdf', 'print'
+      // ]  ,
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: true,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,
+          order: [[0, 'asc']],
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            dataTablesParameters.op = {};
+            dataTablesParameters.select = [];
+            dataTablesParameters.find = {};
+            that.Load = true;  
+
+            dataTablesParameters.columns = [
+              {data : '_id', "orderable": "true" },  
+              {data : "user"}  ,
+              { data: "user.first_name" },
+              { data: "user.last_name" },
+              { data: "billing_type" },
+              { data: "total_Amount" },
+              { data: "GST" },
+              { data: "Status" },
+              { data: "Rate" },
+              { data: "Number_of_Devices" },
+              { data: "billing_Date" },
+              ]
+              console.log(that.todate);
+              
+       
+            // if (that.from_date) {
+            //   dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            //   dataTablesParameters.find['created_on']['$gte'] = {
+            //     _eval: 'date',
+            //     value: new Date(that.from_date).toISOString()
+            //   }
+            // };
+        
+            // if (that.todate) {
+            //   dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            //   dataTablesParameters.find['created_on']['$lte'] = {
+            //     _eval: 'date',
+            //     value: new Date(that.todate).toISOString()
+            //   };
+            // }
+         
+    
+
+          if(that.userArr){
+            dataTablesParameters.find.user =  that.userArr; 
+          }
+          if(that.billingType){
+            dataTablesParameters.find.billing_type =  that.billingType;
+          }
+          if(that.billingStauts){
+            
+            dataTablesParameters.find.Status =  that.billingStauts;
+
+          }
+          console.log(dataTablesParameters);
+
+            var suburl = "";
+            suburl += "/billing/getBillingDetail";
+            that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+              that.Load = false;
+              callback(resp);
+  
+            }, err => {
+              that.Load = false;
+              callback({data:[]});
+              console.log(err);
+           
+            });
+           
+          
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#changeStatus', row).bind('click', () => {    
+                  console.log(data);
+                  swal("Are you sure ?", "Do you want to change payment status ?").then((ans)=>{
+                    console.log(ans);
+                    that.changeStatus(data);
+                  },err=>{
+                    console.log(err);
+                  });
+               
+            });
+          }, 
+         "columns": [
+              {
+                  "data": "_id",
+                  "visible": false,
+                  "render": function(data, type, row) {
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "user",
+                render: function(data, type, row) {
+                  console.log(row);  
+                  var fName = row.user?row.user.first_name:'' ;
+                  var lName = row.user?row.user.last_name:''             
+                  return fName + ' ' + lName;        
+                }
+            },
+              {
+                  "data": "billing_Date",
+                  render: function(data, type, row) {
+                    var billDate = new Date(data);
+                    return data ? (moment(billDate).format('LL')) : "";
+                 
+                  }
+              },
+              {
+                "data": "Number_of_Devices",
+                render: function(data, type, row) {
+                  return data?data:'';        
+                }
+            },
+              {
+                  "data": "total_Amount",      
+                  render: function(data, type, row) {
+                    return data?data:0;
+                
+                  }
+              }, 
+        
+              
+            {
+              "data": "Rate",
+              "defaultContent": "_id",
+              render: function(data, type, row) {        
+              return data;
+              }
+          }   ,
+          {
+            "data": "Status",
+            "defaultContent": "_id",
+            render: function(data, type, row) {  
+              var btnclr = "white";  
+              if(data === 'Pending'){
+                btnclr = "red";
+
+              }  else{ 
+                btnclr = "green";
+              }
+              return '<button type="button" id="changeStatus" title="Change Status" style="width:80%;color:white;cursor:pointer;background:'+btnclr+'" class="btn">'+data+'</button>'  
+            // return data?data:'';
+            }
+        }   ,
+        {
+          "data": "billing_type",
+          "defaultContent": "_id",
+          render: function(data, type, row) {        
+          return data?data:'';
+          }
+      } 
+        // { data: "billing_type" },
+
+          ],  
+          // "columnDefs": [
+          //   { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },
+       
+          // ] 
+      });
+
+  });
+
+}
+
+changeStatus(data){
+  console.log(data);
+  var statusVal =(data.Status === "Pending")?'Paid': 'Pending';
+  var payload = {
+    docId : data._id,
+    status : statusVal
+  }
+  console.log(payload);
+
+  this.contactService.changeBillingStauts(payload).subscribe(res=>{
+    this.data_descip =  "Payment Status Changed";
+    launch_toast();
+    this.tabelObj.draw();
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+   }    
+
+
+  },err=>{
+
+  })
+
+}
+
+
+
+}
diff --git a/src/app/censor-display/censor-display.component.html b/src/app/censor-display/censor-display.component.html
new file mode 100644
index 0000000..9b9167b
--- /dev/null
+++ b/src/app/censor-display/censor-display.component.html
@@ -0,0 +1,41 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <!-- <button style="background-color: #f9f6f6; font-size: 10px; color: black; float: left; margin-left: 10px;" md-raised-button (click)="addexpense()">{{'ADD EXPENSE' | translate}}</button> -->
+      <!-- <i class="fas fa-plus-circle" (click)="addexpense()" title="ADD EXPENSE" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i> -->
+      <h4>{{'Sensor Detail' | translate}}</h4>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;padding-right: 15px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+          <div style="width: 100%;height:84vh;">
+            <div class="row" style="margin: 0px;">
+              <div class="col-sm-3 col-md-3 col-lg-3" style="height : 160px;padding-right: 0; max-height:160px;margin: 20px;">
+                    <!-- gaugewill come here -->
+                    <p *ngIf="gaugeLabel === true" style="margin-left: inherit;font-weight: 700;color: #9d9d9d;">Sensor 1</p>
+                    <div id="chart_div" style="width: 400px; height: 120px;"></div>
+              </div>
+              <div class="col-sm-3 col-md-3 col-lg-3" style="height : 160px;padding-right: 0; max-height:160px;margin: 20px;">
+                <!-- gaugewill come here -->
+                <p  *ngIf="gaugeLabel === true" style="margin-left: inherit;font-weight: 700;color: #9d9d9d;"> Sensor 1</p>
+                <div id="chart_div_1" style="width: 400px; height: 120px;"></div>
+          </div>
+            </div> 
+          </div>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
diff --git a/src/app/censor-display/censor-display.component.scss b/src/app/censor-display/censor-display.component.scss
new file mode 100644
index 0000000..e980949
--- /dev/null
+++ b/src/app/censor-display/censor-display.component.scss
@@ -0,0 +1,90 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
+
+
+    #toast {
+      visibility: hidden;
+      max-width: 150px;
+      height: 50px;
+      /*margin-left: -125px;*/
+      margin: auto;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      border-radius: 2px;
+  
+      position: fixed;
+      z-index: 1;
+      left: 60%;right:0;
+      bottom: 80%;
+      font-size: 13px;
+      white-space: nowrap;
+  }
+  #toast #img{
+    width: 150px;
+    height: 50px;
+      
+      float: left;
+      
+      padding-top: 16px;
+      padding-bottom: 16px;
+      
+      box-sizing: border-box;
+  
+      
+      background-color: #111;
+      color: #fff;
+  }
+  #toast #desc{
+  
+      
+      color: #fff;
+     
+      padding: 16px;
+      
+      overflow: hidden;
+    white-space: nowrap;
+  }
+  
+  #toast.show {
+      visibility: visible;
+      -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+      animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+  }
\ No newline at end of file
diff --git a/src/app/censor-display/censor-display.component.spec.ts b/src/app/censor-display/censor-display.component.spec.ts
new file mode 100644
index 0000000..18a5843
--- /dev/null
+++ b/src/app/censor-display/censor-display.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CensorDisplayComponent } from './censor-display.component';
+
+describe('CensorDisplayComponent', () => {
+  let component: CensorDisplayComponent;
+  let fixture: ComponentFixture<CensorDisplayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CensorDisplayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CensorDisplayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/censor-display/censor-display.component.ts b/src/app/censor-display/censor-display.component.ts
new file mode 100644
index 0000000..deef132
--- /dev/null
+++ b/src/app/censor-display/censor-display.component.ts
@@ -0,0 +1,154 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { ContactService } from '../contact.service';
+declare var google : any;
+
+@Component({
+  selector: 'app-censor-display',
+  templateUrl: './censor-display.component.html',
+  styleUrls: ['./censor-display.component.scss']
+})
+export class CensorDisplayComponent implements OnInit {
+  identifier : String = "censor_detail";
+  Load : boolean = false;
+  superAdmin: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  data_descip: string;
+  censorType:any=[];
+  tempreture1: any=0;
+  tempreture2: any=0;
+  gaugeLabel= false;
+  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService) { }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email; 
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;   
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+ 
+  }
+
+
+  deviceArr = []; 
+  Fromdate = new Date() ; 
+  todate = new Date();
+
+
+  getReport(event){
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+   
+      console.log(event);
+    if(event.device.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.device;
+    }
+    this.deviceArr = deviceId;        
+   
+    this.getExpenses()
+}
+
+getExpenses(){
+   
+  if(this.deviceArr.length === 0){
+    this.data_descip = "Please Select Device";
+   return launch_toast()   ;
+  }
+
+  var getExpensesPayload = {
+    user : this.useridd,
+    vehicle : this.deviceArr[0]
+  }
+
+  this.tempreture1=0
+  this.tempreture2=0
+  console.log('getExpensesPayload',getExpensesPayload);
+  this.censorType = [];
+  this.contactService.getdevById(this.deviceArr[0]).subscribe(res=>{
+    console.log('resresresresres=>',JSON.parse(res['_body']));  
+    var devObj = JSON.parse(res['_body']);
+    // (parseFloat(temp)/10).toFixed(2)
+    this.tempreture1 = Number(devObj.temp?(parseFloat(devObj.temp)/10).toFixed(2) : 0 ); 
+    this.tempreture2 = Number(devObj.temp1?(parseFloat(devObj.temp1)/10).toFixed(2) : 0) ; 
+    console.log(this.tempreture2,(this.tempreture1));
+    var that = this  ;
+    // setTimeout(function(){
+      this.gaugeLabel=true;
+      google.charts.load('current', {'packages':['gauge']});
+      google.charts.setOnLoadCallback(drawChart);
+      //  }, 5000);
+ 
+  },err=>{
+    this.data_descip = "Internal Server Error";
+    return launch_toast()   ;
+  })
+  // mainUrl + "expense/expensebycateogry?user=" + this.islogin._id + "&fdate=" + new Date(this.datetimeStart).toISOString() + "&tdate=" + new Date(this.datetimeEnd).toISOString() + "&vehicle=" + this._vehId._id;
+
+  function launch_toast() {
+    // console.log(divid);
+     var x = document.getElementById("toast")
+     //console.log(x);
+     x.className = "show";
+     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+ }
+ var that=this;
+ function drawChart() {
+  
+  
+ 
+ var data = google.visualization.arrayToDataTable([
+   ['Label', 'Value'],
+   ['Temp 1', that.tempreture1],
+   
+ ]);
+
+ var options = {
+   width: 400, height: 120,
+   redFrom: 90, redTo: 100,
+   yellowFrom:75, yellowTo: 90,
+   minorTicks: 5
+ };
+
+ var data_1 = google.visualization.arrayToDataTable([
+   ['Label', 'Value'],
+   ['Temp 2', that.tempreture2],
+ ]);
+
+ var options_1 = {
+   width: 400, height: 120,
+   redFrom: 90, redTo: 100,
+   yellowFrom:75, yellowTo: 90,
+   minorTicks: 5
+ };
+
+ var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
+ var chart_1 = new google.visualization.Gauge(document.getElementById('chart_div_1'));
+
+ chart.draw(data, options);
+ chart_1.draw(data_1, options_1);
+
+ // setInterval(function() {
+ //   data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
+ //   chart.draw(data, options);
+ // }, 13000);
+ // setInterval(function() {
+ //   data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
+ //   chart.draw(data, options);
+ // }, 5000);
+ // setInterval(function() {
+   //   data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
+ //   chart.draw(data, options);
+ // }, 26000);
+}
+}
+
+
+
+
+
+}
diff --git a/src/app/cmd-packet-master/cmd-packet-master.component.html b/src/app/cmd-packet-master/cmd-packet-master.component.html
new file mode 100644
index 0000000..f07544a
--- /dev/null
+++ b/src/app/cmd-packet-master/cmd-packet-master.component.html
@@ -0,0 +1,49 @@
+<app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <p class="headStyle">{{'CMD PACKETS' | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-3" style="padding-left: 123px;">
+          <md-input-container>
+          <input mdInput placeholder="Search" [mdAutocomplete]="tdAuto" name="state" 
+          #state="ngModel" [(ngModel)]="deviceName"
+         (ngModelChange)="filterDevices(deviceName)">
+         <md-autocomplete #tdAuto="mdAutocomplete">
+           <!-- pending ngFor -->
+            <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue">
+              <span>{{device.viewValue}}</span>
+            </md-option>
+          </md-autocomplete>   
+        </md-input-container>
+        <!-- <ng-select [ngClass]="'ng-select'"  placeholder="Select user" [options]="dummyuserData" [(ngModel)]="option"> </ng-select> -->
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="padding-left: 65px;padding-top:17px;">
+          <button md-raised-button style="background-color:#3e3737;color:white;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">FIND</button>       
+        </div>
+    </div>
+  </div>
+  <table id="cmdTable" class="display" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device ID' | translate}}</th>
+            <th style="text-align:center;">{{'Protocol ID' | translate}}</th>
+            <th style="text-align:center;">{{'Command' | translate}}</th>
+            <th style="text-align:center;">{{'Created on' | translate}}</th>
+            <th style="text-align:center;">{{'ACC' | translate}}</th>
+            <th style="text-align:center;">{{'Battery Status' | translate}}</th>
+            <th style="text-align:center;">{{'GSM Signal' | translate}}</th>
+        </tr>
+    </thead>
+      
+</table>
+</div>
+
+
diff --git a/src/app/cmd-packet-master/cmd-packet-master.component.scss b/src/app/cmd-packet-master/cmd-packet-master.component.scss
new file mode 100644
index 0000000..e1d088b
--- /dev/null
+++ b/src/app/cmd-packet-master/cmd-packet-master.component.scss
@@ -0,0 +1,21 @@
+.headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+  }
diff --git a/src/app/cmd-packet-master/cmd-packet-master.component.spec.ts b/src/app/cmd-packet-master/cmd-packet-master.component.spec.ts
new file mode 100644
index 0000000..c465beb
--- /dev/null
+++ b/src/app/cmd-packet-master/cmd-packet-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CmdPacketMasterComponent } from './cmd-packet-master.component';
+
+describe('CmdPacketMasterComponent', () => {
+  let component: CmdPacketMasterComponent;
+  let fixture: ComponentFixture<CmdPacketMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CmdPacketMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CmdPacketMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/cmd-packet-master/cmd-packet-master.component.ts b/src/app/cmd-packet-master/cmd-packet-master.component.ts
new file mode 100644
index 0000000..73f85bb
--- /dev/null
+++ b/src/app/cmd-packet-master/cmd-packet-master.component.ts
@@ -0,0 +1,227 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from './../contact.service';
+
+declare var $: any, DataTable: any;
+import * as moment from 'moment';
+@Component({
+  selector: 'app-cmd-packet-master',
+  templateUrl: './cmd-packet-master.component.html',
+  styleUrls: ['./cmd-packet-master.component.scss']
+})
+export class CmdPacketMasterComponent implements OnInit {
+  option: any;
+  Fromdate = new Date();
+  todate = new Date();
+  tabelObj: any;
+  emailid: any;
+  useridd: any;
+  supadm: any;
+  constructor(public contactService: ContactService) {
+    this.Fromdate.setHours(0, 0, 0);
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+  }
+
+  ngOnInit() {
+    
+    this.testTable();
+    this.getAllDevice();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+  }
+
+
+  testTable() {
+    const that = this;
+
+    $(document).ready(function () {
+      that.tabelObj = $('#cmdTable').DataTable({
+        "serverSide": true,
+        "processing": true,
+        "searching": false,
+        ajax: (dataTablesParameters: any, callback) => {
+
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+          // dataTablesParameters.order = [{column: 3, dir: "desc"}];
+
+
+          // console.log(dataTablesParameters);
+          // console.log("callback", callback);
+
+          // dataTablesParameters.find = {
+          //   _id: that.useridd         
+          // };
+          dataTablesParameters.columns = [
+            { data: "device_id" },
+            { data: "protocal_id" },
+            { data: "cmd" },
+            { data: "insertionTime" },
+            { data: "ACC" },
+            { data: "batteryStatus" },
+            { data: "gsmSignal" }]
+
+        //    dataTablesParameters.find.supAdmin = that.useridd;
+
+          if ((that.deviceSelect) && (that.deviceSelect != '') && (that.deviceSelect[0].id != "all")) {
+            // console.log(that.deviceSelect[0].id);
+            dataTablesParameters.find.device_id = that.deviceSelect[0].id;
+          }
+          if (that.Fromdate) {
+            that.Fromdate.setHours(0,0,0,0);
+            dataTablesParameters.find['insertionTime'] = dataTablesParameters.find['insertionTime'] ? dataTablesParameters.find['insertionTime'] : {};
+            dataTablesParameters.find['insertionTime']['$gte'] = {
+              _eval: 'date',
+              value: new Date(that.Fromdate).toISOString()
+            }
+          };
+          // }
+          if (that.todate) {
+            that.todate.setSeconds(0);
+            that.todate.setMilliseconds(0);
+            dataTablesParameters.find['insertionTime'] = dataTablesParameters.find['insertionTime'] ? dataTablesParameters.find['insertionTime'] : {};
+            dataTablesParameters.find['insertionTime']['$lte'] = {
+              _eval: 'date',
+              value: new Date(that.todate).toISOString()
+            };
+          }
+          // if(this.supadm){
+          //   dataTablesParameters.find.supAdmin = that.useridd;
+          // }
+          var suburl = "";
+          suburl += "/cmdPackets/datatable";
+          // console.log(suburl);
+          // console.log(dataTablesParameters);
+          // console.log(suburl)
+          that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+
+            callback(resp);
+
+          }, err => {
+            // console.log(err);
+            // console.log(err.status);
+          });
+        },
+
+        "columns": [
+          {
+            "data": "device_id",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "protocal_id",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "cmd",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "insertionTime",
+            "render": function (data, type, row) {
+              var created_time = new Date(data);
+
+              return moment(created_time).format('dddd,ll,LTS');
+            }
+          },
+          {
+            data: "ACC",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "batteryStatus",
+            "render": function (data, type, row) {
+
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "gsmSignal",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          }
+        ],
+        columnDefs: [
+          {
+            // The `data` parameter refers to the data for the cell (defined by the
+            // `data` option, which defaults to the column being worked with, in
+            // this case `data: 0`.
+
+          },
+        ]
+      });
+    });
+
+  }
+
+
+  deviceObj = [];
+  getAllDevice() {
+    this.contactService.alldevices()
+      .subscribe(res => {
+        // console.log("allDevices=>", res);
+        this.deviceObj = [];
+        var Alldevices = {
+          id: "all",
+          viewValue: "ALL Devices"
+        }
+        this.deviceObj.push(Alldevices);
+
+        for (var i = 0; i < res.length; i++) {
+          Alldevices = {
+            id: res[i].Device_ID,
+            viewValue: res[i].Device_ID ? res[i].Device_ID : ""
+          }
+
+          this.deviceObj.push(Alldevices)
+        }
+        // console.log("deviceArray", this.deviceObj);
+
+      }, err => {
+        // console.log(err.status);
+      })
+  }
+
+
+  deviceSelect: any = [];
+  deviceName: any;
+  filterDevices(dlr) {
+
+    // console.log("deviceData=>", dlr);
+    if (dlr) {
+      // console.log(dlr);
+
+      const filterdealerValue: any = dlr;
+
+      this.deviceSelect = [];
+      this.deviceSelect = this.deviceObj.filter(function (pp) {
+     
+        // console.log(pp);
+        var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+
+        return t > -1;
+      });
+      return this.deviceSelect;
+    }
+
+  }
+
+
+  filterStates(option) {
+    // console.log(option);
+  }
+}
diff --git a/src/app/comman-queue/comman-queue.component.html b/src/app/comman-queue/comman-queue.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/comman-queue/comman-queue.component.scss b/src/app/comman-queue/comman-queue.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/comman-queue/comman-queue.component.spec.ts b/src/app/comman-queue/comman-queue.component.spec.ts
new file mode 100644
index 0000000..ef24f27
--- /dev/null
+++ b/src/app/comman-queue/comman-queue.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommanQueueComponent } from './comman-queue.component';
+
+describe('CommanQueueComponent', () => {
+  let component: CommanQueueComponent;
+  let fixture: ComponentFixture<CommanQueueComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommanQueueComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommanQueueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/comman-queue/comman-queue.component.ts b/src/app/comman-queue/comman-queue.component.ts
new file mode 100644
index 0000000..10bb423
--- /dev/null
+++ b/src/app/comman-queue/comman-queue.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comman-queue',
+  templateUrl: './comman-queue.component.html',
+  styleUrls: ['./comman-queue.component.scss']
+})
+export class CommanQueueComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/comment-window/comment-window.component.html b/src/app/comment-window/comment-window.component.html
new file mode 100644
index 0000000..4afb538
--- /dev/null
+++ b/src/app/comment-window/comment-window.component.html
@@ -0,0 +1,581 @@
+<!-- <button type="button" class="close pull-right" aria-label="Close" (click)="close()"><i class="fas fa-times"></i></button> -->
+<!-- <div class="container"> -->
+  <md-tab-group class="selected-tab-{{tabGroup.selectedIndex}}" #tabGroup>
+    <md-tab>
+      <template md-tab-label>User Details</template>
+    <div class="row mt-4"  style="margin-top: 19px;">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Name</p>
+          <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
+        </div>
+      </div>
+    
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Phone</p>
+          <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
+        </div>
+      </div>
+    
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Email</p>
+          <p style="padding-left: 10PX;">{{userDetail.email}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Imei</p>
+          <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
+        </div>
+      </div>
+    </div>
+    
+    </md-tab>
+    <md-tab>
+      <template md-tab-label>Emergency Contact</template>
+    <div class="mt-4" *ngIf="showEmergencyContact" class="row"  style="margin-top: 19px;">
+      <div class="col-md-6">
+        <h6 class="card-title">Contact 1:</h6>
+        <hr>
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Name :</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.name}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Cell 1:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell1}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Cell 2:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell2}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Phone 1:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone1}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Phone 2:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone2}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <!-- -------------contact2 -->
+      </div>
+      <div class="col-md-6">
+        <h6 class="card-title">Contact 1:</h6>
+        <hr>
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Name:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.name}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Cell 1:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell1}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Cell 2:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell2}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Phone 1:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone1}}</p>
+            </div>
+          </div>
+        </div>
+    
+        <div class="row">
+          <div class="col-12">
+            <div style="display: inline-flex;">
+              <p style="font-weight: 600;">Phone 2:</p>
+              <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone2}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="!showEmergencyContact" class="text-center mt-6" style="margin-top: 19px;">
+      <h6>No Data Found</h6>
+    
+    </div>
+      
+
+    </md-tab>
+    <md-tab>
+      <template md-tab-label>Assets</template>
+      <div *ngIf="showAssets">
+    <div class="row  mt-4" style="margin-top: 19px;">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Vrn:</p>
+          <p style="padding-left: 10PX;">{{assetsData.Device_Name?assetsData.Device_Name:""}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Engine:</p>
+          <p style="padding-left: 10PX;">{{assetsData.engineNo?assetsData.engineNo:""}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Chassis:</p>
+          <p style="padding-left: 10PX;">{{assetsData.ChassisNo?assetsData.ChassisNo:""}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Colour:</p>
+          <p style="padding-left: 10PX;">{{assetsData.colour?assetsData.colour:""}}</p>
+          <!-- <p style="padding-left: 10PX;">add</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Model:</p>
+          <p style="padding-left: 10PX;">{{assetsData.model?assetsData.model:""}}</p>
+          <!-- <p style="padding-left: 10PX;">add</p> -->
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Brand:</p>
+          <p style="padding-left: 10PX;">{{assetsData.manufacturingCompany}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">Tpin:</p>
+          <p *ngIf="assetsData.tpin" style="padding-left: 10PX;">{{assetsData.tpin}}</p>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12">
+        <div style="display: inline-flex;">
+          <p style="font-weight: 600;">epin:</p>
+          <p *ngIf="assetsData.epin" style="padding-left: 10PX;">{{assetsData.epin}}</p>
+        </div>
+      </div>
+    </div>
+    </div>
+      
+
+    </md-tab>
+    <md-tab>
+      <template md-tab-label>Driver Info</template>
+      <div *ngIf="showAssets">
+      <div class="row  mt-4" style="margin-top: 19px;">
+        <div class="col-12">
+          <div style="display: inline-flex;">
+            <p style="font-weight: 600;">Driver Name:</p>
+            <p style="padding-left: 10PX;">{{assetsData.driver_name?assetsData.driver_name:''}}</p>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-12">
+          <div style="display: inline-flex;">
+            <p style="font-weight: 600;">Driver Contact Number:</p>
+            <p style="padding-left: 10PX;">{{assetsData.contact_number?assetsData.contact_number:''}}</p>
+          </div>
+        </div>
+      </div>
+        
+        </div>
+    </md-tab>
+  </md-tab-group>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Comment <span style="color: red;">*</span></label>
+      <textarea name="commentmsg" [(ngModel)]="commentMsg" class="w-100 form-control" id="commentmsg"></textarea>
+      <small id="exampleInputphone12" class="form-text text-muted"
+        style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
+    </div>
+  </div>
+  <md-dialog-actions align="end" class="col-sm-12 col-md-12 col-lg-12 mb-3">
+        <button md-button md-dialog-close>Cancel</button>
+        <button md-button [md-dialog-close]="true" (click)="comment()">Save</button>
+      </md-dialog-actions>
+    
+  <!-- <div class="row"> -->
+    <!-- <div class="col-6">
+      [ngClass]="{
+      'text-success':emp.country === 'India',
+      'text-primary':emp.country === 'US',
+      'text-danger':emp.country === 'China'
+      }"
+    'color':employee.country === 'India' ? 'orange' : 'red' 
+  [ngClass]="[menu1 ? 'class1' : '', menu2 ? 'class1' : '', (something && (menu1 || menu2)) ? 'class2' : '']"-->
+      <!-- <div class="card mt-3 tab-card">
+        <div class="card-header tab-card-header" >
+          <ul class="nav nav-tabs card-header-tabs" class=" nav nav-tabs card-header-tabs selected-tab-{{tabGroup.selectedIndex}}" #tabGroup id="myTab" role="tablist">
+            <li class="nav-item" >
+              <a class="nav-link" [ngClass]="[selectedTab===1 ? 'nav-item actives' : 'nav-item']" id="one-tab" data-toggle="tab" href="#one" (click)="selectTab(1)" role="tab" aria-controls="One"
+                aria-selected="true">User Details</a>
+            </li>
+            <li class="nav-item"  >
+              <a class="nav-link" [ngClass]="[selectedTab===2 ? 'nav-item actives' : 'nav-item']" id="two-tab" data-toggle="tab" href="#two" role="tab" (click)="selectTab(2)" aria-controls="Two"
+                aria-selected="false">Emergency Contact</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link"  [ngClass]="[selectedTab===3 ? 'nav-item actives' : 'nav-item']" id="three-tab" data-toggle="tab" href="#three" role="tab" (click)="selectTab(3)" aria-controls="Three"
+                aria-selected="false">Assets</a>
+            </li>
+          </ul>
+        </div> -->
+
+        <!-- <div class="tab-content" id="myTabContent">
+          <div class="tab-pane fade show active p-3" id="one" role="tabpanel" aria-labelledby="one-tab">
+           
+            <div style="text-align: center;color:green; font-weight: 500;padding-bottom: 15px;">{{templatemessage1}}</div>
+             -->
+            
+            <!-- <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Name</p>
+                  <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
+                </div>
+              </div>
+            
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Phone</p>
+                  <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
+                </div>
+              </div>
+            
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Email</p>
+                  <p style="padding-left: 10PX;">{{userDetail.email}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Imei</p>
+                  <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
+                </div>
+              </div>
+            </div>
+            -->
+
+
+          <!-- </div>
+          <div  class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab"> -->
+            <!-- <div *ngIf="showEmergencyContact" class="row">
+              <div class="col-md-6">
+            <h6 class="card-title">Contact 1:</h6>
+            <hr>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Name :</p>
+                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.name}}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Cell 1:</p>
+                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell1}}</p>
+                </div>
+              </div>
+            </div>
+
+             <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Cell 2:</p>
+                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.cell2}}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Phone 1:</p>
+                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone1}}</p>
+                </div>
+              </div>
+            </div>
+
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Phone 2:</p>
+                  <p style="padding-left: 10PX;">{{emergencyContactData.contact1.phone2}}</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- -------------contact2 --
+            </div>
+            <div class="col-md-6">
+<h6 class="card-title">Contact 1:</h6>
+<hr>
+<div class="row">
+  <div class="col-12">
+    <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Name:</p>
+      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.name}}</p>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Cell 1:</p>
+      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell1}}</p>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Cell 2:</p>
+      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.cell2}}</p>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Phone 1:</p>
+      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone1}}</p>
+    </div>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-12">
+    <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Phone 2:</p>
+      <p style="padding-left: 10PX;">{{emergencyContactData.contact2.phone2}}</p>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+<div  *ngIf="!showEmergencyContact" class="text-center">
+    <h6>No Data Found</h6>
+
+</div> -->
+
+<!-- </div>
+
+          <div *ngIf="showAssets" class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab"> -->
+            <!-- <div class="row  mt-4">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Vrn:</p>
+                  <p style="padding-left: 10PX;">{{assetsData.Device_Name}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Engine:</p>
+                  <p style="padding-left: 10PX;">{{assetsData.engineNo}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Chassis:</p>
+                  <p style="padding-left: 10PX;">{{assetsData.ChassisNo}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Colour:</p>
+                  <!-- <p style="padding-left: 10PX;">add</p> 
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Model:</p>
+                  <!-- <p style="padding-left: 10PX;">add</p> 
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Brand:</p>
+                  <p style="padding-left: 10PX;">{{assetsData.manufacturingCompany}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">Tpin:</p>
+                  <p *ngIf="assetsData.tpin" style="padding-left: 10PX;">{{assetsData.tpin}}</p>
+                </div>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-12">
+                <div style="display: inline-flex;">
+                  <p style="font-weight: 600;">epin:</p>
+                  <p *ngIf="assetsData.epin" style="padding-left: 10PX;">{{assetsData.epin}}</p>
+                </div>
+              </div>
+            </div> -->
+          <!-- </div>
+
+        </div>
+      
+      <div class="row">
+        <div class="col-10">
+          <label for="exampleInputEmail1" style="font-weight: 500;margin-left: 18px;">Enter Comment <span style="color: red;">*</span></label>
+          <textarea name="commentmsg" style="margin-left: 18px;" [(ngModel)]="commentMsg" class="form-control" id="commentmsg"></textarea>
+          <small id="exampleInputphone12" class="form-text text-muted"
+            style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
+        </div>
+      </div> -->
+      <!-- <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <button md-raised-button
+            style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;"
+            (click)="comment()"> Save </button>
+        </div>
+      </div> -->
+      <!-- <md-dialog-actions align="end" class="col-sm-12 col-md-12 col-lg-12 mb-3">
+        <button md-button md-dialog-close>Cancel</button>
+        <button md-button [md-dialog-close]="true" (click)="comment()">Save</button>
+      </md-dialog-actions>
+    </div>
+  </div>
+  </div> -->
+
+<!-- <div class="container"> -->
+  <!-- <div style="text-align: center;color:green; font-weight: 500;padding-bottom: 15px;">{{templatemessage1}}</div>
+
+  
+  <div class="row" >
+   <div class="col-12" > 
+     <div style="display: inline-flex;">
+      <p style="font-weight: 600;">Name</p>
+      <p style="padding-left: 10PX;">{{userDetail.first_name}} {{userDetail.last_name}}</p>
+     </div>   
+   </div>
+
+  </div>
+  <div class="row" >
+    <div class="col-12" > 
+      <div style="display: inline-flex;">
+        <p style="font-weight: 600;">Phone</p>
+        <p style="padding-left: 10PX;">{{userDetail.phone}}</p>
+      </div>   
+    </div>
+   
+   </div>
+  <div class="row">
+    <div class="col-12">
+      <div  style="display: inline-flex;">
+        <p style="font-weight: 600;">Email</p>
+        <p style="padding-left: 10PX;">{{userDetail.email}}</p>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <div  style="display: inline-flex;">
+        <p style="font-weight: 600;">Imei</p>
+        <p style="padding-left: 10PX;">{{data.deviceData.did}}</p>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Comment <span style="color: red;">*</span></label>
+      <textarea name="commentmsg" [(ngModel)]="commentMsg" class="w-100 form-control" id="commentmsg"></textarea>
+      <small id="exampleInputphone12" class="form-text text-muted" style="margin-bottom: 5px; color: red !important;">{{templatemessage}}</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="comment()"> Save </button>
+    </div>
+  </div> 
+</div> -->
diff --git a/src/app/comment-window/comment-window.component.scss b/src/app/comment-window/comment-window.component.scss
new file mode 100644
index 0000000..2e31c09
--- /dev/null
+++ b/src/app/comment-window/comment-window.component.scss
@@ -0,0 +1,18 @@
+.nav-link {
+  color: black;
+}
+.actives {
+  background: #426e86;
+  color: white;
+}
+.selected-tab-0 md-ink-bar {
+  background-color: red;
+}
+.selected-tab-1 md-ink-bar {
+  background-color: #426e86;
+}
+.selected-tab-2 md-ink-bar {
+  background-color: green;
+}
+// .mat-tab-body-content {
+// }
diff --git a/src/app/comment-window/comment-window.component.spec.ts b/src/app/comment-window/comment-window.component.spec.ts
new file mode 100644
index 0000000..26e084f
--- /dev/null
+++ b/src/app/comment-window/comment-window.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentWindowComponent } from './comment-window.component';
+
+describe('CommentWindowComponent', () => {
+  let component: CommentWindowComponent;
+  let fixture: ComponentFixture<CommentWindowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentWindowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/comment-window/comment-window.component.ts b/src/app/comment-window/comment-window.component.ts
new file mode 100644
index 0000000..a9f22b8
--- /dev/null
+++ b/src/app/comment-window/comment-window.component.ts
@@ -0,0 +1,102 @@
+import { Component, Inject, NgZone, OnInit } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-comment-window',
+  templateUrl: './comment-window.component.html',
+  styleUrls: ['./comment-window.component.scss']
+})
+export class CommentWindowComponent implements OnInit {
+  useridd: any;
+  commentMsg:any;
+  assetsData:any
+  showAssets:boolean=false;
+  showEmergencyContact:boolean=false;
+  emergencyContactData:any;
+  userDetail: any={
+    first_name :"",
+    last_name:"",
+    phone:"",
+    email:"",
+   
+  };
+  selectedTab=1;
+
+  constructor(public dialogRef: MdDialogRef<CommentWindowComponent>,private errorDialog: MdDialog,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService, private ngZone: NgZone) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    console.log('this.data',this.data);
+    console.log('commentMsg',this.commentMsg);
+    this.contactService.getUserObj(this.data.deviceData.user).subscribe(res=>{
+      this.userDetail = res;
+      if(res.emergency_contact){
+        this.emergencyContactData=res.emergency_contact;
+        this.showEmergencyContact=true;
+      }
+      // console.log(this.emergencyContactData)
+    })
+    this.getDeviceData()
+
+  
+  }
+  //https://socket.oneqlik.in/devices/getDevicebyId?deviceId=868003033811113
+  getDeviceData(){
+ this.contactService.getdevById(this.data.deviceData.did).subscribe((res:any) => {
+  // this.assetsData=res;
+   this.assetsData = JSON.parse(res['_body']);
+  // console.log("-------",this.assetsData);
+  this.showAssets=true
+  
+ },err=>{
+   console.log(err);
+   
+ })
+  }
+  templatemessage:any;
+  templatemessage1:any;
+  comment(){
+    var that  =this;
+    console.log('Comment Here',this.data);
+    console.log('commentMsg',this.commentMsg);
+    if((this.commentMsg=='')||(this.commentMsg == undefined)){
+        console.log("Please Type Error Message");
+        this.templatemessage = "Please Type Comment First" ;
+        var error = setTimeout(()=>{
+          that.templatemessage = '';
+          clearTimeout(error);
+        },5000)
+    }else{
+      var payload={
+        notification_id : this.data.deviceData._id,
+        commentSaved : true,
+        comment : this.commentMsg
+      };
+      this.contactService.commentSave(payload).subscribe(res=>{
+        console.log(res);
+        this.templatemessage1 = "Comment Saved";
+        var error = setTimeout(()=>{
+          that.templatemessage1 = '';
+          this.dialogRef.close(this.data.deviceData._id);
+          clearTimeout(error);
+        },3000)
+      },err=>{
+        console.log(err);
+      })
+    }
+  }
+  close(){
+    console.log("close",this.dialogRef)
+    this.errorDialog.closeAll()
+    this.dialogRef.close()
+   
+  }
+  selectTab(value){
+    console.log(value);
+    
+    this.selectedTab=value;
+  }
+
+}
diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
new file mode 100644
index 0000000..8beb96b
--- /dev/null
+++ b/src/app/community/community.component.html
@@ -0,0 +1,4 @@
+<md-card >
+        <img src="../../assets/image/coming.gif" style="width: 100%;"/>
+       </md-card>
+       
\ No newline at end of file
diff --git a/src/app/community/community.component.ts b/src/app/community/community.component.ts
new file mode 100644
index 0000000..8a4619e
--- /dev/null
+++ b/src/app/community/community.component.ts
@@ -0,0 +1,19 @@
+import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-child',
+  templateUrl: './community.component.html',
+  providers: [ ]
+})
+export class CommunityComponent implements OnInit {
+  
+  
+  @Output() messageEvent = new EventEmitter<string>();
+  constructor() { }
+ 
+    ngOnInit() {
+     
+    }
+  }
\ No newline at end of file
diff --git a/src/app/const/announcement/announcement.component.html b/src/app/const/announcement/announcement.component.html
new file mode 100644
index 0000000..465bff8
--- /dev/null
+++ b/src/app/const/announcement/announcement.component.html
@@ -0,0 +1,12 @@
+<div class="modal-header">
+  <h6 class="modal-title pull-left"><i style="color:#add8e6" class="fa fa-bullhorn" aria-hidden="true"></i>&nbsp;&nbsp;Announcement</h6>
+  <button type="button" class="close pull-right" aria-label="Close" (click)="dialogRef.close()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+<h4>
+  {{announcement}}
+</h4>
+</div>
+
diff --git a/src/app/const/announcement/announcement.component.scss b/src/app/const/announcement/announcement.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/const/announcement/announcement.component.spec.ts b/src/app/const/announcement/announcement.component.spec.ts
new file mode 100644
index 0000000..1b077e1
--- /dev/null
+++ b/src/app/const/announcement/announcement.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnouncementComponent } from './announcement.component';
+
+describe('AnnouncementComponent', () => {
+  let component: AnnouncementComponent;
+  let fixture: ComponentFixture<AnnouncementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnnouncementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnouncementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/announcement/announcement.component.ts b/src/app/const/announcement/announcement.component.ts
new file mode 100644
index 0000000..1b4f17b
--- /dev/null
+++ b/src/app/const/announcement/announcement.component.ts
@@ -0,0 +1,26 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-announcement',
+  templateUrl: './announcement.component.html',
+  styleUrls: ['./announcement.component.scss']
+})
+export class AnnouncementComponent implements OnInit {
+  announcement
+  constructor(public dialogRef: MdDialogRef<AnnouncementComponent>,private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log(data,"In Announcement-----------")
+      if(Object.keys(data).length === 0){
+        this.announcement="There is no Announcement"
+      }else{
+        this.announcement=data
+
+      }
+    }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/const/const.component.css b/src/app/const/const.component.css
new file mode 100644
index 0000000..34cc344
--- /dev/null
+++ b/src/app/const/const.component.css
@@ -0,0 +1,279 @@
+#body {
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.topDiv {
+  padding: 0px;
+}
+
+.colStyle {
+  box-shadow: 6px 6px 16px -8px rgba(0, 0, 0, 0.75);
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 5px;
+}
+.colStyle:hover {
+  box-shadow: 6px 6px 16px -8px rgba(0, 0, 0, 0.75);
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 5px;
+}
+
+.todayStyle {
+  color: #86ac41;
+}
+.weekStyle {
+  color: #4897d8;
+}
+.monthStyle {
+  color: #f5be41;
+}
+
+.paidStyle {
+  color: #86ac41;
+}
+.pendingStyle {
+  color: #cb0000;
+}
+
+.selectedRunning {
+  text-align: center;
+  padding: 20px;
+  background: #86ac41;
+  cursor: pointer;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.selectedStopped {
+  text-align: center;
+  padding: 20px;
+  cursor: pointer;
+  background: #cb0000;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.selectedOur {
+  text-align: center;
+  padding: 20px;
+  background: #4897d8;
+  cursor: pointer;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.selectAll {
+  text-align: center;
+  padding: 20px;
+  background: #f0810f;
+  cursor: pointer;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.selectIdling {
+  text-align: center;
+  padding: 20px;
+  background: #f5be41;
+  cursor: pointer;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.expireStatus {
+  text-align: center;
+  padding: 20px;
+  background: #712d33;
+  cursor: pointer;
+  color: white;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.animateClass_7:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.selectedNoGPS {
+  text-align: center;
+  padding: 20px;
+  background: #5b7065;
+  cursor: pointer;
+  color: white;
+  font-size: 14px;
+}
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+.selectedRunning_1 {
+  text-align: center;
+  background: #34675c;
+  color: white;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.selectedStopped_1 {
+  text-align: center;
+  background: #50312f;
+  color: white;
+  padding: 20px;
+  cursor: pointer;
+}
+
+.selectedOur_1 {
+  text-align: center;
+  background: #426e86;
+  color: white;
+  cursor: pointer;
+  padding: 20px;
+}
+
+.selectAll_1 {
+  text-align: center;
+  background: #063852;
+  color: white;
+  cursor: pointer;
+  padding: 20px;
+}
+
+.selectIdling_1 {
+  text-align: center;
+  background: #16253d;
+  cursor: pointer;
+  color: white;
+  padding: 20px;
+}
+
+.selectedNoGPS_1 {
+  text-align: center;
+  background: #4d648d;
+  cursor: pointer;
+  color: white;
+  padding: 20px;
+}
+.expireStatus_1 {
+  text-align: center;
+  background: #503167;
+  cursor: pointer;
+  color: white;
+  padding: 20px;
+}
+@media (max-width: 1388px) {
+  .selectAll_1 {
+    text-align: center;
+    padding: 19px;
+    background: #063852;
+    color: white;
+    cursor: pointer;
+  }
+
+  .selectAll {
+    text-align: center;
+    padding: 19px;
+    background: #f0810f;
+    cursor: pointer;
+    color: white;
+    font-size: 14px;
+  }
+}
+
+.menus {
+  overflow: auto;
+  margin-bottom: 0.01em;
+  position: fixed;
+  left: 0px;
+  width: 100%;
+  overflow: scroll;
+  z-index: 999;
+}
+.menus::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+.menus::-webkit-scrollbar:vertical {
+  width: 11px;
+}
+
+.menus::-webkit-scrollbar:horizontal {
+  height: 11px;
+}
+
+.menus::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 2px solid white; /* should match background, can't be transparent */
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.custom-slider-main {
+  display: flex;
+  overflow: hidden;
+  scroll-behavior: smooth;
+}
+.name:hover {
+  text-decoration: underline;
+}
+
+/* .info-box {
+} */
+
+/* Smartphones (landscape) ----------- */
+@media only screen and (min-width: 321px) {
+  /* Styles */
+}
+
+/* Smartphones (portrait) ----------- */
+@media only screen and (max-width: 320px) {
+  /* Styles */
+}
+
+/* iPads (portrait and landscape) ----------- */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  /* Styles */
+}
+
+/* iPads (landscape) ----------- */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+  /* Styles */
+}
+
+/* iPads (portrait) ----------- */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
+  /* Styles */
+}
+/**********
+iPad 3
+**********/
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
+  /* Styles */
+}
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
+  /* Styles */
+}
+/* Desktops and laptops ----------- */
+@media only screen and (min-width: 1224px) {
+  /* Styles */
+}
+
+/* Large screens ----------- */
+@media only screen and (min-width: 1824px) {
+  /* Styles */
+}
+
+/* iPhone 4 ----------- */
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
+  /* Styles */
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
+  /* Styles */
+}
diff --git a/src/app/const/const.component.html b/src/app/const/const.component.html
new file mode 100644
index 0000000..6556ba3
--- /dev/null
+++ b/src/app/const/const.component.html
@@ -0,0 +1,444 @@
+<div class="topDiv" style="background: #efecec;">
+  <div class="row" style="height:70px" no-padding>
+    <div class="col-sm-12 col-md-12">
+        <app-all-menus></app-all-menus>
+    </div>
+  </div>
+  <div *ngIf="showButton" class="pull-left mt-sm text-dark" style="background: linen;width: 24px;border-radius: 50%;
+    height: 23px; position: absolute;z-index: 1;width: 24px;top: 103px;"  (click)="scrollLeft()">
+    <i style="margin-left: 4px;" class="fa fa-chevron-circle-left" aria-hidden="true"></i>
+  </div>
+  
+  <div #widgetsContent class="custom-slider-main ">
+    <div class="col-sm-4 col-lg-2 " style="padding-right: 0;padding-left: 0;"
+      *ngFor="let deviceSummary of DeviceSummaryArr">
+      <div class="row" style="margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);"
+        (click)="devicebystatus(deviceSummary.status)">
+        <div class="col-sm-4 col-md-4 "
+          [ngClass]="{ 'selectedRunning_1' :(deviceSummary.status == 'RUNNING'), 'selectedStopped_1' :(deviceSummary.status == 'STOPPED'),'selectedOur_1' :(deviceSummary.status == 'OUT OF REACH'),'selectAll_1' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling_1' :(deviceSummary.status == 'IDLE'),'expireStatus_1' :  (deviceSummary.status == 'EXPIRED'),'selectedNoGPS_1' :  (deviceSummary.status == 'NO DATA')}">
+          <img src={{deviceSummary.icon}} alt="Total Vehicle" height="42" width="42">
+        </div>
+        <div class="col-sm-8 col-md-8 "
+          [ngClass]="{ 'selectedRunning' :(deviceSummary.status == 'RUNNING'), 'selectedStopped' :(deviceSummary.status == 'STOPPED'),'selectedOur' :(deviceSummary.status == 'OUT OF REACH'),'selectAll' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling' :(deviceSummary.status == 'IDLE'),'expireStatus' :  (deviceSummary.status == 'EXPIRED'),'selectedNoGPS' :  (deviceSummary.status == 'NO DATA')}">
+          <span style="font-weight : 500">{{deviceSummary.status |
+            translate}}</span><br><span>{{deviceSummary.total}}</span>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  
+  <div *ngIf="!showButton" class="pull-right mt-sm text-dark" style="background: linen; position: absolute;z-index: 1; width: 24px;
+    height: 23px;right: 0px;top: 105px;border-radius: 50%;" (click)="scrollRight()">
+<i style="margin-left: 4px;" class="fa fa-chevron-circle-right" aria-hidden="true"></i>
+  </div>
+  
+  <!-- <div class="menu-wrappers">
+      <div class="row" style="margin-left: 1px;margin-right: 1px;margin-bottom: 10px;">
+            <div class="col-sm-4 col-lg-2 " style="padding-right: 0;padding-left: 0;"  *ngFor="let deviceSummary of DeviceSummaryArr">
+                <div class="row" style="margin: 5px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);" (click)="devicebystatus(deviceSummary.status)">
+                  <div class="col-sm-4 col-md-4 " [ngClass]="{ 'selectedRunning_1' :(deviceSummary.status == 'RUNNING'), 'selectedStopped_1' :(deviceSummary.status == 'STOPPED'),'selectedOur_1' :(deviceSummary.status == 'OUT OF REACH'),'selectAll_1' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling_1' :(deviceSummary.status == 'IDLE'),'selectedNoGPS_1' :  (deviceSummary.status == 'NO DATA')}" >
+                      <img src={{deviceSummary.icon}} alt="Total Vehicle" height="42" width="42">
+                  </div>
+                  <div class="col-sm-8 col-md-8 " [ngClass]="{ 'selectedRunning' :(deviceSummary.status == 'RUNNING'), 'selectedStopped' :(deviceSummary.status == 'STOPPED'),'selectedOur' :(deviceSummary.status == 'OUT OF REACH'),'selectAll' :(deviceSummary.status == 'TOTAL VEHICLES'),'selectIdling' :(deviceSummary.status == 'IDLE'),'selectedNoGPS' :  (deviceSummary.status == 'NO DATA')}" >
+                      <span style="font-weight : 500">{{deviceSummary.status | translate}}</span><br><span>{{deviceSummary.total}}</span>
+                    </div>
+                </div>        
+              </div>      
+      </div>
+      </div> -->
+
+  <div class="row" *ngIf="((superAdmin === true)||(custtype === true))" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;height: auto;">
+   
+  <div class="col-lg-4  col-sm-4" style="padding:0">
+    <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
+   <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
+     <div class="col-12" style="text-align: center;padding-right: 0;">
+       <p style="font-weight: 600;color:#9a9a9a;margin-bottom: 0;">{{'ADDED VEHICLES' | translate}}</p>
+     </div>
+   </div>
+   <div class="row" style="text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+     <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalCount" >
+       <div style="cursor: pointer;" (click)="getAddedVehList(count.key)" title="{{'Get Added Vehicle List' | translate}}">
+        <p style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
+        <p style="font-size: 20px;color: #777777;">{{count.key |translate}}</p>
+       </div>
+     </div>
+   </div>
+    </div>
+  </div>
+  <div class="col-lg-4  col-sm-4" style="padding:0;">
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);"> 
+      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
+        <div class="col-12" style="text-align: center;padding-right: 0;">
+          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">{{'GOING TO EXPIRE VEHICLES' | translate}}</p>
+        </div>
+      </div>
+      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalExpiredCount" >
+          <div style="cursor: pointer;" (click)="getExpiredVehList(count.key)" title="{{'Get Expired Vehicle List'|translate}}">
+            <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
+            <p style="font-size: 20px;color: #777777;">{{count.key | translate}}</p>
+          </div>
+        
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4  col-sm-4" style="padding:0;">
+    <!-- <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
+        <div class="col-12" style="text-align: center;padding-right: 0;">
+          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">BILLING DETAIL</p>
+        </div>
+      </div>
+      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+        <div class="col-sm-12 col-lg-6 col-md-6" *ngFor="let count of billingDetailArr" >
+          <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'pendingStyle' :(count.key == 'Pending'), 'paidStyle' :(count.key == 'Paid')}">{{count.value}}</p>
+          <p style="font-size: 20px;color: #777777;">{{count.key}}</p>
+        </div>
+      </div>
+    </div> -->
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);"> 
+      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
+        <div class="col-12" style="text-align: center;padding-right: 0;">
+          <p style="font-weight: 600;color:#9a9a9a;;margin-bottom: 0;">{{'RENEWED VEHICLES'|translate}}</p>
+        </div>
+      </div>
+      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalRenewedCount" >
+          <div style="cursor: pointer;" (click)="renewedVehList(count.key)" title="{{'Get Renewed Vehicle List'|translate}}">
+            <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
+            <p style="font-size: 20px;color: #777777;">{{count.key | translate}}</p>
+          </div> 
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+  
+  
+  
+   <div class="row" *ngIf="((superAdmin === false)&&(custtype === false))" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;">
+  <div class="col-lg-3  col-sm-3" *ngIf="fuelShow === true" style="padding:0">
+      <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
+      <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
+        <div class="col-12" style="padding: 0;">
+          <div >
+            <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">{{'FUEL PRICE' | translate}}</p>
+            <md-select  style="color: white; padding: 0%; position: absolute; top: 0; right: 0;" [(ngModel)]="currState" (change)="getFuelprice(currState)"  ngDefaultControl>
+              <md-option *ngFor="let ustate of Indianstate" [value]="ustate">
+                {{ustate}}
+              </md-option>
+            </md-select>
+          </div>   
+        </div>
+      </div>
+      <div class="row" style="text-align: center;;height: 180px;max-height: 180px;padding-top: 7%;margin: 0;">
+        <div class="col-sm-12 col-lg-6 col-md-6" *ngFor="let count of fuelCount" >
+          <div style="cursor: pointer;">
+            <p style="font-size: 20px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.fuel == 'Petrol'), 'weekStyle' :(count.fuel == 'Diesel')}">
+              <i *ngIf="langSymbol ===true" style="font-size: 20px;" class="fas fa-rupee-sign"></i> 
+              {{count.price}}/{{count.unit}}</p>
+            <p style="font-size: 25px;color: #777777;">{{count.fuel |translate}}</p>
+              <span>
+              <span *ngIf="langSymbol === false">{{valueSymbol}}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+       </div>
+  </div>
+  <div class="col-lg-3  col-sm-3" *ngIf="fuelShow === false" style="padding:0"> 
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+        <canvas id="deviceBarChart" style="display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label="bar graph" role="img"></canvas>
+    </div>
+  </div>
+  <div class="col-lg-3  col-sm-3" style= "padding:0;">
+    <div style="margin-left: 5px;
+    margin-right: 5px;
+    background: white;
+    box-shadow: 3px 1px 5px 0px rgb(178 176 174);
+    height: 230px;
+     "> 
+    <!-- padding-top: 17px;
+    padding-bottom: 17px; -->
+  <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
+    <div class="col-12" style="padding: 0;">
+      <div>
+        <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">{{'Alerts' |
+          translate}}</p>
+       
+      </div>
+    </div>
+  </div>
+    <div class="row" >
+      <div class="col-lg-4" style="padding: 12px;text-align: center;" *ngFor="let noti of notificationArray">
+        <span style="font-size: 20px;font-weight: 700;color: #cb0000">{{noti.count}}</span><br>
+        <lable style="font-size: 18px;font-weight: 400;color:blueviolet">{{noti.name}}</lable>
+      </div>
+      </div>
+    </div>
+      <!-- <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+          <canvas id="utilisationChart" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
+      </div>  -->
+
+  </div>  
+  <div class="col-lg-3  col-sm-3" style= "padding:0;">
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+        <canvas id="deviceExpense" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
+    </div> 
+</div>  
+  <div class="col-lg-3  col-sm-3" style= "padding:0;;height: 230px">
+    <div class="row" style="text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+      <div class="col-lg-12 col-sm-12" style="padding: 0%;">
+        <div style="padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;">
+          <p style="font-weight: 600;color:#9a9a9a;padding: 3px 10px;margin-bottom: 0%;text-align: center;">Reminders</p>
+          <md-select  style="position: absolute;top: 0%;right: 0%;padding-top: 3px;margin-left: 10px;color: white;" [(ngModel)]="reminderVal" (change)="getreminderevent($event)"  ngDefaultControl>
+            <md-option *ngFor="let reminder of reminderType" [value]="reminder.value">
+              {{reminder.viewValue}}
+            </md-option>
+          </md-select>
+        </div>      
+      </div>
+    </div>  
+    <div class="row" style="padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;">
+      <div class="col-lg-12  col-sm-12" style="padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; ">
+        <div style="height: 175px; overflow: auto">
+          <ul style="padding-left: 20px;">
+            <li *ngFor="let reminder of notifArr" style="font-size: 13px;margin-bottom: 2px;font-weight: 500;color: #cb0000;">{{reminder}}</li>
+          </ul>        
+        </div>       
+      </div>
+    </div> 
+  </div>
+</div>
+ 
+  
+      <div class="row" style="margin-left: 6px; margin-right: 6px;  margin-top: 5px;">
+        <div class="col-sm-12 col-lg-12 col-md-6" style="padding: 0;">
+          <div class="row" no-padding style="margin: 0;">
+            <div class="col-sm-10 col-lg-10 col-md-6" style="padding:0">
+              <!-- <i *ngIf="(superAdmin === true)||(isOrganisation === true)" class="fas fa-video" (click)="demoVideos()" mdTooltip="{{'Tutorial Video' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; font-size: 24px;margin-left: 12px;"></i> -->
+                <!-- <div title="Demo Videos" style="display: initial;color: #5b7065;" (click)="demoVideos()"><i class="fas fa-video"></i></div> -->
+                <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.3;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event,'id')" placeholder="{{'Device Search' | translate}}" />
+            </div>
+            <div class="col-sm-2 col-lg-2 col-md-6" style="padding-right: 0;padding-left: 0;">
+                <button [disabled]="firstcall"  md-raised-button (click)="next()" style="float: right;background: #004445; color: white;font-size: 14px;width:50%;border-radius:0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174)" > {{'Next' | translate}} >>>  </button>
+                <button [disabled]="lastcall" md-raised-button (click)="pre()" style="float:right;background: #2C7873; color: white;font-size: 14px;width:50%;border-radius:0px;"> <<< {{'Previous' | translate}} </button>      
+            </div>    
+          </div>        
+        </div>
+      </div>
+      <div class="row" style="margin-left: 1px; margin-right: 1px;">
+        <div class="col-sm-12 col-lg-12" style="padding: 0; font-size: 12px; color: black;margin-right: 10px;">
+          <div style="overflow-x: auto;overflow-y: auto;margin-left: 5px; margin-right: 5px;background: white; box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);">
+              <table id="myTable1" class="table table-striped table-hover" >
+              <thead style="background: #426E86; color: white;">
+                <tr>  
+                  <th style="width: 50px;">{{'Icon' | translate}}</th>
+                  <th style="width: 100px;" title="Registration number">{{'Reg. Num.' | translate}}</th>
+                  <th style="width: 50px;">{{'Group' | translate}}</th>
+                  <th style="width: 50px;">{{"Today's ODO" | translate}}</th>
+                  <th style="width: 50px;">{{'Total ODO' | translate}}</th>
+                  <th style="width: 500px; text-align: center;" title="Last location">{{'Location' | translate}}</th>
+                  <th style="width: 100px;" title="Last updated on">{{'Last update' | translate}}</th>
+                  <th style="width: 100px;">{{'Trip status' | translate}}</th>
+                  <th style="width: 110px;">{{'Status' | translate}}</th>
+                  <th *ngIf="((custtype == true)||(superAdmin == true))" style="width: 100px;">{{'User' | translate}}</th>
+                  <th style="width: 50px;">{{'Satellites' | translate}}</th>  
+                  <th style="width: 50px;" title="Last Speed">{{'Speed' | translate}}</th>
+                  <th *ngIf="(ext_volt === true)||(ext_volt === undefined)" style="width: 50px;" title="Ext. Volt (V)">{{'Voltage' | translate}}</th>
+                  <th style="width: 50px;" title="Temperature">{{'Temp' | translate}}</th>
+                  <th style="width: 50px;" title="{{fuelvariable}}">Fuel</th>
+                  <!-- <th *ngIf="(gps_column === true)||(gps_column === undefined)" style="width: 50px;">{{'GPS' | translate}}</th> -->
+                  <th *ngIf="(ac_column === true)||(ac_column === undefined)" style="width: 50px;">{{'AC' | translate}}</th>
+                  <th *ngIf="(power_column === true)||(power_column === undefined)" style="width: 50px;">{{'POWER' | translate}}</th>
+                  <!-- <th *ngIf="(gsm_column === true)||(gsm_column === undefined)" style="width: 50px;" title="GSM Signal">{{'GSM' | translate}}</th> -->
+                  <th *ngIf="(ignition_column === true)||(ignition_column === undefined)" style="width: 50px;" title="IGNITION">{{'IGN' | translate}}</th> 
+                </tr>
+              </thead>
+              <tbody  style="cursor: pointer;">
+                <tr *ngFor="let device of deviceData | orderBy: key : reverse | filter:myInput ;let i = index" >
+              
+                    <td>
+                      <div *ngIf="iconCheck(device.status,device.iconType)">          
+                        <img *ngIf="device.iconType === 'jcb'" width ='30px' style="margin-left: 10px;" src={{devIcon}}>
+                        <img *ngIf="device.iconType != 'jcb'" width ='20px' style="margin-left: 10px;" src={{devIcon}}>
+                      </div>
+                    </td>
+                    <td style="padding-left: 0px;padding-right: 0px;padding-top: 0px;" >
+                      <i *ngIf="((device.Shared != undefined)&&(device.Shared.length != 0))" class="material-icons" style="font-size: 17px; color: #426e86; float: right; box-shadow: 1px 1px 1px; border-radius: 50px;" (click)="showSharedDevice(device)" title="shared device"> supervised_user_circle </i>
+                      <div style="padding-top: 10px;">   
+                        <p style="margin-bottom: 0px;">{{device.Device_Name}}</p>
+                      </div>          
+                    </td>
+                    <!-- <td  style="cursor:pointer" >{{device.sim_number}}</td> -->
+                    <td >{{device.vehicleGroup?device.vehicleGroup.name:''}}</td>
+                    <td >
+                      <div style="cursor: pointer;">
+                        <img *ngIf="device.roadShow === true" style="width: 20px;cursor: pointer;margin-left: 4px;" src='{{roadicon}}' (click)=totalOdo(device) md-tooltip="Click to get today odo">
+                        <div  *ngIf="device.roadShow === false">
+                          <span >{{device.currentODO}}</span>    
+                        </div>
+                      </div>
+
+                    </td>
+                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.total_odo
+                      ? (device.total_odo | number: '1.2-2' ): 0}}</td>
+                    <td >
+                      <div style="cursor: pointer;">
+                        <!-- title="update Address" (click)="updateAddress(device)" -->
+                        <!-- <img style="width: 20px;" src='../../assets/image/addressICON.png' (click)=getAddress(device) md-tooltip="Click to get device's last location"> -->
+                        
+                        <div >
+                          <span md-tooltip="Device's last location" *ngIf="device.locationAddress!=null">{{device.locationAddress}}</span>
+                          <span style="text-align: center;" md-tooltip="Device's last location" *ngIf="device.locationAddress==null">
+                            <img style="width: 20px;" src='../../assets/image/addressICON.png' (click)=getAddress(device)
+                              md-tooltip="Click to get device's last location">
+                          </span>
+                          <i *ngIf="(device.pen)" style="cursor: pointer;color:gray" class="fas fa-pen" title="update Address" (click)="updateAddress(device)"></i>
+                          <i *ngIf="(device.pen)" class="fas fa-language" (click)="translateAddressToHindi(device)"></i> 
+                        </div>
+                      </div>
+                    </td>
+                    <td  style="width:200px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.last_ping_on|date:'medium'}}</td>
+                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.currentTripStatus||'NA'}}</td>
+                    <td  style="padding-left: 0px;padding-right: 0px;width:220px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">
+                    <span>
+                      {{device.status}}
+                    </span> 
+                    <span *ngIf="device.power=='0'" style="color: red;">[Power Disconnected]</span>
+                    </td>
+                    <td class="name" *ngIf="((custtype == true)||(superAdmin == true))" (click)="vewdevLogin(device.user._id)">{{device.user?(device.user.first_name + " "+ device.user.last_name):""}}</td>
+                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.satellites?device.satellites:"NA"}}</td>
+                    <td (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)" title="Last Speed">{{device.last_speed?device.last_speed:0}}</td>
+                    <td *ngIf="(ext_volt === true)||(ext_volt === undefined)" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.battery?device.battery:0}}</td>
+                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)">{{device.temp?gettemp(device.temp):'0'}}</td>
+                    <td  (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device.expiration_date,device.last_speed,device.status)" title="{{fuelvariable}}">{{getfuel(device,i)}}</td>
+                    <!-- <td *ngIf="(gps_column === true)||(gps_column === undefined)">
+                      <div *ngIf="gpsStatus(device.gpsTracking) " md-tooltip={{gStatus}}>
+                        <img style="width: 20px;" src={{gpsImg}}>
+                      </div>
+                    </td> -->
+                    <td *ngIf="(ac_column === true)||(ac_column === undefined)">
+                      <div *ngIf="gpsACStatus(device.ac)" md-tooltip={{aStatus}}>
+                        <!-- <img style="width: 22px" src='../../assets/image/acimgGreen.png'> -->
+                        <img style="width: 20px;" src={{ACImg}}>
+                      </div>
+                    </td>
+                    <td *ngIf="(power_column === true)||(power_column === undefined)">
+                      <div *ngIf="testtPower(device.power)" md-tooltip={{pStatus}}>
+                        <img style="width: 20px;" src={{pwrURL}}>
+                      </div>
+                    </td>
+                    <!-- <td *ngIf="(gsm_column === true)||(gsm_column === undefined)">
+                      <div *ngIf="testSignal(device.gsmSignal,device)" md-tooltip={{gsmStatus}}>
+                        <img style="width: 20px;" src={{gsmURL}}>
+                      </div>
+                    </td> -->
+                    <td *ngIf="(ignition_column === true)||(ignition_column === undefined)">
+                      <div *ngIf="test(device.last_ACC,device.last_ACC_on)" md-tooltip={{textStatus}}>
+                        <img style="width: 20px;" src={{imgurl}}>
+                      </div>
+                    </td>
+
+                  
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+     <div>   
+</div>
+<!-- "Device_Name Device_ID Shared status total_odo vehicleGroup type_of_device last_speed status_updated_at currentODO last_ACC_on gsmSignal power ac gpsTracking satellites temp last_location last_ping_on currentTripStatus last_ACC" -->
+
+
+
+
+<!-- <div class="row" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;">
+  <div class="col-lg-4  col-sm-4" style="padding:0">
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+        <canvas id="deviceBarChart" style="display: block;width: 650px; height: 230px; padding: 20px;padding-top: 10px;" aria-label="bar graph" role="img"></canvas>
+    </div>
+  </div>
+  <div class="col-lg-3  col-sm-3" style= "padding:0;">
+      <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+          <canvas id="utilisationChart" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
+      </div> 
+  </div>  
+  <div class="col-lg-3  col-sm-3" style= "padding:0;">
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+        <canvas id="deviceExpense" style="display: block; width: 650px; height: 230px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
+    </div> 
+</div>  
+  <div class="col-lg-2  col-sm-2" style= "padding:0;;height: 230px">
+    <div class="row" style="text-align:center;margin-left: 6px; margin-right: 6px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+      <div class="col-lg-12 col-sm-12" style="padding: 0%;">
+        <div style="display:inline-flex;padding-top: 5px;padding-bottom:5px;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);color:black;width: 100%;">
+          <p style="margin-bottom: 0;margin-left: 10px; margin-top: 3px;">Reminders</p>
+          <md-select  style="padding-top: 0;margin-left: 10px;color: white;" [(ngModel)]="reminderVal" (change)="getreminderevent($event)"  ngDefaultControl>
+            <md-option *ngFor="let reminder of reminderType" [value]="reminder.value">
+              {{reminder.viewValue}}
+            </md-option>
+          </md-select>
+        </div>      
+      </div>
+    </div>  
+    <div class="row" style="padding: 0%; margin-left: 6px; margin-right: 6px; padding-top: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174); height: 190px;">
+      <div class="col-lg-12  col-sm-12" style="padding-right: 10px;padding-left: 10px;height: 184px;padding-top: 5px; ">
+        <div style="height: 175px; overflow: auto">
+          <ul style="padding-left: 20px;">
+            <li *ngFor="let reminder of notifArr" style="font-size: 11px;margin-bottom: 2px;font-weight: 500;color: #cb0000;">{{reminder}}</li>
+          </ul>        
+        </div>       
+      </div>
+    </div> 
+  </div>
+</div> -->
+
+
+
+
+
+
+
+<!-- <div class="row" style="margin-left: 1px; margin-right: 1px;margin-bottom: 15px;height: auto;">
+  <div class="col-lg-4  col-sm-4" style="padding:0">
+    <div style="margin-left: 5px; margin-right: 5px; background: white;box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">   
+   <div class="row" style=" box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin:0;padding: 10px;">
+     <div class="col-12" style="text-align: center;padding-right: 0;">
+       <p style="font-weight: 800;color:#9a9a9a;margin-bottom: 0;">ADDED VEHICLES</p>
+     </div>
+   </div>
+   <div class="row" style="text-align: center;;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+     <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalCount" >
+       <p style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
+       <p style="font-size: 20px;font-weight: 700;color: #777777;">{{count.key}}</p>
+     </div>
+   </div>
+    </div>
+  </div>
+  <div class="col-lg-4  col-sm-4" style="padding:0;">
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+   
+      <div class="row" style="box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);margin: 0;padding: 10px;">
+        <div class="col-12" style="text-align: center;padding-right: 0;">
+          <p style="font-weight: 800;color:#9a9a9a;;margin-bottom: 0;">EXPIRED VEHICLES</p>
+        </div>
+      </div>
+      <div class="row" style="text-align: center;height: 200px;max-height: 200px;padding-top: 7%;margin: 0;">
+        <div class="col-sm-12 col-lg-4 col-md-4" *ngFor="let count of totalExpiredCount" >
+          <p  style="font-size: 50px;font-weight: 700;" [ngClass]="{ 'todayStyle' :(count.key == 'Today'), 'weekStyle' :(count.key == 'Week'), 'monthStyle' :(count.key == 'Month')}">{{count.value}}</p>
+          <p style="font-size: 20px;font-weight: 700;color: #777777;">{{count.key}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-4  col-sm-4" style= "padding:0;">  
+    <div style="margin-left: 5px; margin-right: 5px; background: white; box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);">
+      <canvas id="utilisationChart" style="display: block; width: 650px; height: 241px;padding: 10px 0px 20px" aria-label="linegraph" role="img"></canvas>
+  </div> 
+</div>  
+</div> -->
\ No newline at end of file
diff --git a/src/app/const/const.component.spec.ts b/src/app/const/const.component.spec.ts
new file mode 100644
index 0000000..7735236
--- /dev/null
+++ b/src/app/const/const.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConstComponent } from './const.component';
+
+describe('ConstComponent', () => {
+  let component: ConstComponent;
+  let fixture: ComponentFixture<ConstComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConstComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConstComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/const.component.ts b/src/app/const/const.component.ts
new file mode 100644
index 0000000..7ca32af
--- /dev/null
+++ b/src/app/const/const.component.ts
@@ -0,0 +1,3262 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { GetdevdetailComponent } from '../const/getdevdetail/getdevdetail.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import { ContactService } from '../contact.service';
+import { Params, Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { window } from 'angular-bootstrap-md/utils/facade/browser';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { DatainjectionService } from '../datainjection.service';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { NotificationComponent } from '../notification/notification.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { Observable } from 'rxjs/Rx';
+import * as moment from 'moment';
+import { Subject } from 'rxjs/Subject';
+declare var Chart :any;
+declare var swal : any;
+
+import 'rxjs/add/operator/debounceTime';
+import { SharedDevicesComponent } from './shared-devices/shared-devices.component';
+import { DemoVideosComponent } from './demo-videos/demo-videos.component';
+import { ManualAddressComponent } from './manual-address/manual-address.component';
+import { TranslateService } from 'ng2-translate';
+import {AnnouncementComponent} from './announcement/announcement.component'
+declare var $: any;
+
+declare var google: any;
+declare var ol : any;
+
+@Component({
+  selector: 'app-const',
+
+  templateUrl: './const.component.html',
+  styleUrls: ['./const.component.css'],
+  providers: [SidebarComponent, NotificationComponent],
+
+})
+export class ConstComponent implements OnInit {
+//   {_id: "power", count: 3}
+// // 1: {_id: "immo", count: 3}
+// // 2: {_id: "overspeed", count: 23}
+// // 3: {_id: "IGN", count: 543}
+// // 4: {_id: "theft", count: 145}
+// // 5: {_id: "SOS", count: 6}
+  notificationArray=[{name:'Power',type:'power',count:0},{name:'Ignition',type:'IGN',count:0},{name:'Parking',type:'theft',count:0},
+                     {name:'Toll',type:'toll',count:0},{name:'Over Speed',type:'overspeed',count:0},{name:'Geo-Fence',type:'Geo-Fence',count:0} ]
+  @ViewChild('widgetsContent') widgetsContent: ElementRef;
+  superAdmin: Boolean = false;
+  modelChanged: Subject<string> = new Subject<string>();
+  fs: any;
+  ls: any;
+  cond: Boolean = false;
+  roadShow:Boolean=true;
+  point: any = 0;
+  loading: any; loadingName: any;
+  unloading: any; unloadingName: any;
+  not_on_root: any; norName: any;
+  address_show: string;
+  deviceData: any;
+  baba: any[];
+  arrival_time: Date;
+  Durations: string;
+  status_toShow: string;
+  lattitude: any;
+  longitude: any;
+  filtes: any;
+  total_final: any;
+  vehicleDetail: any;
+  add_dev: boolean;
+  textStatus: string;
+  fuelUrl = "";
+  Running: any;
+  iconHide: boolean = true;
+  groupId: any;
+  groupName: any;
+  fuelvariable : any = "FUEL (LITRE)";
+  fuelflag = 'l';
+
+  setTimeOut = {
+    value: 20,
+    viewValue: "20 Seconds"
+  };
+  timout = [{
+    value: 10,
+    viewValue: "10 Seconds"
+  },
+  {
+    value: 20,
+    viewValue: "20 Seconds"
+  },
+  {
+    value: 30,
+    viewValue: "30 Seconds"
+  }]
+
+
+  interval: any;
+  changeTime: any;
+  pwrURL: any;
+  gpsImg: string;
+  gStatus: string;
+  pStatus: string;
+
+  showDataByGroup = function () {
+    return this.contactService.getService();
+  }
+  fuelCount=[{
+    fuel : 'Diesel',
+    price: 0 ,
+    unit : 'litre'
+},{
+  fuel : 'Petrol',
+  price: 0 ,
+  unit : 'litre'
+}]
+  devIcon: string;
+  roadicon = "../../assets/image/roadBoard.jpg";
+  supAdm: any;
+  DealerID: any;
+  expiredDevices: any;
+  expired_ids: any;
+  ACImg: string;
+  aStatus: string;
+  deviceBarChart: any;
+  devicePiChart: any;
+  devicePiChart_1: any;
+  notifArr: any=[];
+  gps_column: Boolean = true;
+  ac_column: Boolean = true;
+  power_column: Boolean = true;
+  gsm_column: Boolean = true;
+  ignition_column: Boolean = true;
+  ext_volt: Boolean = true;
+  isOrganisation: any;
+  userState: any;
+  currState: any;
+  leftPaddle: HTMLCollectionOf<Element>;
+  rightPaddle: HTMLCollectionOf<Element>;
+  itemsLength: any;
+  itemSize: any;
+  paddleMargin: number;
+  getMenuWrapperSize: () => any;
+  menuWrapperSize: any;
+  menuVisibleSize: any;
+  getMenuSize: () => number;
+  menuSize: any;
+  menuInvisibleSize: number;
+  showButton:boolean=false
+  getMenuPosition: () => any;
+
+  myaccount() {
+
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+
+
+
+  }
+  scrollLeft(){
+   this.showButton=!this.showButton
+    this.widgetsContent.nativeElement.scrollLeft -= 260;
+  }
+
+  scrollRight(){
+    this.showButton=!this.showButton
+    this.widgetsContent.nativeElement.scrollLeft += 260;
+  }
+
+  a() {
+
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+  }
+  report() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  report_speed() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  emailid: any;
+ 
+  or: any;
+  onn_time: any;
+  min: any;
+  corect_min: any;
+  hr: any
+  from: any;
+  to: any;
+  devicess: any;
+  Load: Boolean = false;;
+
+  // public pieChartLabels:string[] = ['Moving', 'Idle', 'Engine Off'];
+  //   public pieChartData:number[] = [500, 200, 100];
+  //   public pieChartType:string = 'pie';
+  public doughnutChartLabels: string[] = ['Stopped', 'Maintenance', 'Idle', 'Running', 'Out off reach', 'No GPS'];
+
+  public runningDoughnutChartLabels: any = ['Transit', 'Reverse Transit', 'No Trip'];
+  public stoppedDoughnutChartLabels: string[] = ['Less than 2 hours', 'More than 2 hours', 'More than 6 hours', 'More than 24 hours'];
+  public idleDoughnutChartLabels = ['Less than 15 min.', 'More than 1 hr.', 'More than 15 min.', 'More than 30 min.'];
+  public maintenanceDoughnutChartLabels = ['Maintenance'];
+  public noGPSDoughnutChartLabels = ['No GPS'];
+  public outofreachDoughnutChartLabels = ['Out Of Reach'];
+
+
+
+  public doughnutChartData: number[] = [1];
+  public doughnutChartType: string = 'doughnut';
+  public doughnutradius_width = [20, 20, 20, 20, 20, 20];
+
+
+
+  public doughnutChartLabels_running: string[] = ['Vehicles Running'];
+  public doughnutChartData_running: number[] = [1];
+  public doughnutChartData_idle: number[] = [1];
+  public doughnutChartData_stopped: number[] = [1];
+  public Dmaintanance = [1]
+  public doughnutChartData_our = [1];
+
+  // public doughnutChartLabels:string[] = ['Vehicles Stopped', 'Vehicles under Maintenance', 'Idle Vehicles' , 'Out off reach Vehicles','Vehicles Running'];
+
+  /////piechart-start
+  public barChartOptions: any = {
+    scaleShowVerticalLines: false,
+    responsive: true
+  };
+  public barChartLabels = [];
+  public barChartType: string = 'bar';
+  public barChartLegend: boolean = true;
+
+  public barChartData = [{ data: [0, 0, 0, 0, 0, 0, 0], label: 'Total Distance' }];
+
+
+
+  MapLoad: any;
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+  
+  /* ................................................................ */
+  // plotgraph(a) {
+
+  //   var tempTime = new Date()
+  //   var time;
+  //   var t = new Date(tempTime.getFullYear(),
+  //     tempTime.getMonth(),
+  //     tempTime.getDate(),
+  //     23, 59, 59, 999);
+  //   /*  
+  //    time = new Date(t.getTime() + 1).toISOString() */
+  //   time = new Date().setHours(0, 0, 0, 0) - 1;
+  //   let timee = new Date(time).toISOString();
+  //   /* this.Load = true; */
+  //   this.MapLoad = true;
+  //   this.contactService.getDashboardGraph(a.did, timee).subscribe(
+
+  //     data => {
+  //       this.devicess = data
+
+
+  //       this.randomize(this.devicess);
+
+  //     });
+
+
+  // }
+
+  public randomize(a): void {
+
+    let data = [];
+    let label = [];
+
+    this.barChartLabels.length = 0;
+    if (this.devicess.length < 7) {
+      for (var q = 0; q < (7 - this.devicess.length); q++) {
+        var lastDate = this.devicess[this.devicess.length - 1].Date
+        this.devicess.push({
+          "Toal_Dis": 0,
+          "Date": new Date(new Date(lastDate).getTime() + (1000 * 60 * 60 * 24)).toISOString()
+        })
+      }
+    }
+
+    for (var t = 0; t < this.devicess.length; t++) {
+      var day = 0;
+      var month = 0;
+      var year = 0;
+      var final_date = null;
+      data.push(parseFloat(this.devicess[t].Total_Dis).toFixed(2));
+      // var g = new Date(this.devicess[t].Date);
+
+      //   day = g.getDate()+1; 
+      //    month = g.getMonth()+1; 
+      //    year = g.getFullYear();
+      final_date = moment(this.devicess[t].Date).add(1, 'ms').format('DD/MM/YYYY');
+      //  final_date = day+"/"+month+"/"+year
+      this.barChartLabels.push(final_date);
+
+    }
+
+    let clone = JSON.parse(JSON.stringify(this.barChartData));
+    let clone2 = JSON.parse(JSON.stringify(this.barChartLabels));
+    clone[0].data = data;
+
+    // this.barChartLabels=label;
+    this.barChartData = clone;
+    /* this.Load = false; */
+    this.MapLoad = false;
+
+  }
+  /////piechart-end
+
+
+  public chartHovered(e: any): void {
+
+  }
+
+
+  public chartClicked(e: any): void {
+
+
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+  ideal() {
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+
+  vehicleRoute() {
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  report_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+
+
+  driverPerformance() {
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+
+  notification() {
+    this.router.navigateByUrl("notifications");
+  }
+
+
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+    this.router.navigateByUrl("location");
+
+  }
+  openDialog4(type) {
+    var datasets
+
+    if (type == "idel") {
+
+      datasets = this.idle_ids;
+
+    }
+    else if (type == "stop") {
+      datasets = this.off_ids;
+    }
+    else if (type == "maintain") {
+      datasets = this.maintenance_ids
+        ;
+    }
+    else if (type == "outoff") {
+      datasets = this.outofreach_ids;
+    }
+    let dialogRef = this.dialog.open(GetdevdetailComponent, {
+      width: '903px',
+      data: { Type: type, dataset: datasets }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+
+      if (result == "OKK") {
+
+      }
+      else if (result == "No_Dev") {
+
+
+      }
+    });
+  }
+
+
+  constructor(public dialog: MdDialog, private router: Router, private contactService: ContactService, private injectData: DatainjectionService, private activatedRoute: ActivatedRoute,
+     private val: SidebarComponent, private inject: DatainjectionService, private notify: NotificationComponent,public translate: TranslateService) {
+
+    window.localStorage['GetDevData'] = 'True'
+    // console.log("p1");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      // console.log('p3');
+      this.aa = params['_status'];
+
+      if (this.aa != "OK") {
+        window.localStorage['checker'] = 'Data'
+      }
+      else {
+        window.localStorage['checker'] = params['_status'];
+      }
+
+    });
+
+   this.latLongDetail()
+  }
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon() {
+    this.ngOnInit();
+    this.router.navigateByUrl("const");
+
+  }
+
+  Poiview() {
+    this.router.navigateByUrl("poilist");
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+  }
+
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+
+
+  }
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+  notifications() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  AC_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ac_report");
+  }
+
+  fuel_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/fuel_report");
+  }
+
+
+  new() {
+
+    this.router.navigateByUrl("new");
+
+  }
+  addcus() {
+    this.router.navigateByUrl("add");
+  }
+  total_vech: any;
+  idle_vech: any;
+  off_vech: any;
+  maintanance: any;
+  useridd: any;
+  final: any;
+  foods = [];
+  userID: any;
+  OutOfReach: any;
+  no_data: any;
+  expire_status
+  custtype: any;
+  cust: Boolean = false;
+  //new:any
+  // vewdev(id,name,type){
+
+  //   if(type=="Tracker"){
+
+  //     this.router.navigateByUrl("location?_dname="+name+"_id="+id);
+
+
+  //   }
+  //   else{
+  //   this.router.navigateByUrl("account?_did="+id+"."+name); 
+  //   }
+  // }
+
+  refreshsidebar(data, id) {
+
+    let arr = []
+    for (var q = 0; q < data.length; q++) {
+      let a = {
+        "Device_Name": data[q],
+        "Device_ID": id[q]
+      }
+      arr.push(a)
+    }
+
+  }
+
+
+  runnig: any;
+  idle_ids: any;
+  maintenance_ids: any;
+  off_ids: any;
+  outofreach_ids: any;
+  checker: any;
+  aa: any;
+  subscription: any;
+  timer: any;
+  timer_out: any;
+  runnigg: any;
+  alldevvice: any;
+  id_all: any;
+  id_running: any;
+  id_idel: any;
+  id_stop: any;
+  id_main: any;
+
+
+  id_out: any;
+  before: any;
+  mb: any;
+  mobile: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  idle_duration: any;
+  off_duration: any;
+  running_details: any;
+  no_gps_name: any;
+
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+  logo: any;
+  text: any;
+  private socket_Ing
+  savedInt: any;
+  ngOnInit() {
+    this.Load = true;
+    this.foods = [];
+    this.savedInt = JSON.parse(localStorage.getItem('refreshInterval'))
+    if (this.savedInt) {
+      this.setTimeOut.value = this.savedInt;
+  
+    }
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    console.log('JSON.parse(window.atob(window.localStorage.token.split(".")[1]))',JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+
+    var alpha = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+    // console.log(alpha);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    var fuelvalue  = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fuel_unit;
+    //   this.vehicleDetail = JSON.parse(window.localStorage.getItem('devices'));
+
+    var dashboard_content  = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).dashboard_column;
+    console.log('dashboard_content',dashboard_content);
+
+    this.gps_column = dashboard_content.gps_column ; 
+    this.ac_column = dashboard_content.ac_column ;
+    this.power_column =  dashboard_content.power_column ;
+    this.gsm_column =  dashboard_content.gsm_column  ;
+    this.ignition_column =  dashboard_content.ignition_column ; 
+    this.ext_volt =  dashboard_content.ext_volt ;
+// this.door_column: false
+// this.temp_column: false
+// this.charging_column: false
+    if(this.superAdmin){
+      console.log("NDDDDDDDDDDDDDJSSSSSSSSSSSSSSSSSSSSSSS");
+      
+      this.supAdm = this.useridd;
+    }
+    if(this.custtype){
+      this.DealerID = this.useridd
+    }
+
+     
+   console.log("Cust!!!!!!!!!!!!!!!!!!!!!!!");
+
+    if(fuelvalue != undefined){
+      if(fuelvalue == "PERCENTAGE"){
+        this.fuelvariable = "FUEL (PERCENTAGE)"; 
+        this.fuelflag = 'p';
+      }else{
+        this.fuelvariable  = "FUEL (LITRE)" ; 
+        this.fuelflag = 'l';
+      }
+    }
+
+    //   this.abc(this.vehicleDetail);
+
+
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+    this.to = new Date().toISOString();
+    var d = new Date();
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+
+    var dataRoutedFromGroups = this.showDataByGroup();
+    if (dataRoutedFromGroups && dataRoutedFromGroups.dataSource == "GROUPS") {
+      this.groupId = dataRoutedFromGroups._id;
+      this.groupName = dataRoutedFromGroups.name;
+
+    }
+
+    this.socket_Ing = this.injectData.getSocket_gps();
+
+    this.socket_Ing.on('connect', function (this) {
+      // console.log("No function")
+
+    });
+
+    this.modelChanged
+    .debounceTime(2000) // wait 300ms after the last event before emitting last event
+    .distinctUntilChanged() // only emit if value is different from previous value
+    .subscribe(myInput => {
+      this.myInput = myInput;
+      // console.log('debounce')
+      this.sidebarData(10);
+
+    });
+
+
+
+    // var retrievedData = localStorage.getItem("devices");
+    //  var cord = JSON.parse(retrievedData);
+    //  this.final = cord; 
+
+
+
+    this.timer = Observable.timer(100, 100);
+    this.subscription = this.timer.subscribe(t => {
+      var retrievedData = localStorage.getItem("devices");
+      var cord = JSON.parse(retrievedData);
+      this.final = cord
+      if (this.final == null || !this.final) {
+
+      }
+      else {
+        if (this.final.length <= 0) {
+
+          if (localStorage.getItem("DataLoaded") == "True") {
+            this.subscription.unsubscribe();
+            window.localStorage['DataLoaded'] = 'False'
+          }
+
+        }
+        else {
+          this.final = cord
+
+
+          if (localStorage.getItem("LoadGraph") == "True") {
+            this.foods = []
+
+            for (let i = 0; i < this.final.length; i++) {
+
+              if (this.final[i].type_of_device == "Tracker") {
+
+
+                let a = {
+                  value: this.final[i].Device_Name,
+                  viewValue: this.final[i].Device_Name,
+                  did: this.final[i].Device_ID,
+
+                }
+
+                this.foods.push(a);
+              }
+
+            }
+            this.new = this.foods[0];
+
+            this.timer_out = true;
+            this.subscription.unsubscribe();
+
+          }
+
+        }
+      }
+
+    });
+
+
+
+    // history.pushState(null, null, document.URL);
+    // window.addEventListener('popstate', function () {
+    //   history.pushState(null, null, document.URL);
+    // });
+
+
+
+    this.socket_Ing = this.injectData.getSocket_gps();
+
+    // this.socket_Ing.on('connect', function (this) {
+
+
+    // });
+
+    this.reminderVal = this.reminderType[3].value;
+    this.fuelUrl = '../../assets/image/nofuel.png'
+    this.getGraphFunction();
+    this.sidebarData(10);
+    this.timeIntervalRefresh()
+    //  this.Ing_Status()
+    // if((this.superAdmin === false)&&(this.custtype === false)){
+    //   this.vehicleUtilizationGraph();
+    //   this.expenseChart();
+    // }
+
+    if((this.superAdmin === false)&&(this.custtype === false)){
+      this.vehicleUtilizationGraph();
+      this.expenseChart();
+      this.utilisationChart();
+      this.vehicleReminder();
+    }
+    if((this.superAdmin === true)||(this.custtype === true)){
+      this.getTotalDeviceCount();
+      this.getTotalExpiredDeviceCount();
+      this.getTotalRenewedDeviceCount();
+    }
+ 
+
+    this.getApiKey();
+
+    this.getuserObject();
+    this.getLanguage();
+    this.getNotificationCount()
+  }
+
+
+  notificationCount=[]
+  getNotificationCount(){
+    this.contactService.get('/notifs/getNotificationsCount?user='+this.useridd+'&from='+this.from+'&to='+this.to).subscribe((res:any)=>{
+      console.log(res);
+      for(var i=0;i<res.length;i++){
+        for(var j=0;j<this.notificationArray.length;j++){
+          // console.log(res[i]._id,"==",this.notificationArray[j].type);
+          
+          if(res[i]._id==this.notificationArray[j].type){
+            this.notificationArray[j].count=res[i].count
+          }
+        }
+       
+      }
+    
+    })
+  }
+
+
+  getuserObject(){
+    this.contactService.getImagePath(this.useridd).subscribe(res=>{
+    
+      if(res.timezone==="Asia/Kolkata"){
+        this.fuelCard = true;
+      }
+   
+    })
+  }  
+
+  fuelCard = false;
+
+
+  getGraphFunction() {
+
+    this.contactService.getDashboard(this.emailid, this.from, this.to, this.useridd, this.groupId,this.supAdm,this.DealerID).subscribe(
+      data => {
+        console.log('datadatadatadatadaata=>',data);
+        localStorage.setItem('dashboardCount',JSON.stringify(data))
+        this.devicess = data
+        this.total_vech = this.devicess.Total_Vech;
+        this.idle_vech = this.devicess["Ideal Devices"];
+        this.off_vech = this.devicess["OFF Devices"];
+        this.maintanance = this.devicess["Maintance Device"];
+        this.expiredDevices = this.devicess["expire_status"];
+        this.OutOfReach = this.devicess["OutOfReach"];
+        this.no_data = this.devicess["no_data"]?this.devicess["no_data"]:0;
+        this.Running = this.devicess["running_devices"];
+        this.expire_status= this.devicess["expire_status"];
+        // this.idle_duration = this.devicess.idle_duration;
+        // this.off_duration = this.devicess.off_duration;
+
+        let a = this.idle_vech + this.off_vech + this.maintanance + this.OutOfReach
+        let b = this.total_vech - a;
+
+        // this.idle_ids = this.devicess.idle_name
+        // this.maintenance_ids = this.devicess.maintenance_name
+        // this.expired_ids = this.devicess.expire_name
+        // this.off_ids = this.devicess.off_name
+        // this.runnigg = this.devicess.runnig_name
+        // this.outofreach_ids = this.devicess.outOfReach_name
+        // this.alldevvice = this.devicess.All_Device_name
+        // this.no_gps_name = this.devicess.no_gps_name;
+        // this.id_running = this.devicess.running_id;
+        // this.id_stop = this.devicess.off_ids;
+        // this.id_out = this.devicess.outofreach_ids;
+        // this.id_main = this.devicess.maintenance_ids;
+        // this.id_idel = this.devicess.idle_ids;
+
+        // this.loading = this.devicess.running_details.forward.count;
+        // this.unloading = this.devicess.running_details.reverse.count;
+        // this.not_on_root = this.devicess.running_details.not_on_route.count;
+
+        if (this.idle_duration && this.idle_duration.idle_lessthan15min +
+          this.idle_duration.idle_morethan1hour +
+          this.idle_duration.idle_morethan15min +
+          this.idle_duration.idle_morethan30min > 0) {
+          this.doughnutChartData_idle = [
+            this.idle_duration.idle_lessthan15min,
+            this.idle_duration.idle_morethan1hour,
+            this.idle_duration.idle_morethan15min,
+            this.idle_duration.idle_morethan30min
+          ];
+        }
+
+
+
+
+        if (this.off_duration && this.off_duration.stopped_lessthan2hours +
+          this.off_duration.stopped_morethan2hours +
+          this.off_duration.stopped_morethan6hours +
+          this.off_duration.stopped_morethan24hours > 0) {
+          this.doughnutChartData_stopped = [
+            this.off_duration.stopped_lessthan2hours,
+            this.off_duration.stopped_morethan2hours,
+            this.off_duration.stopped_morethan6hours,
+            this.off_duration.stopped_morethan24hours
+          ];
+        }
+
+
+        if (this.running_details && this.running_details.forward.count +
+          this.running_details.not_on_route.count +
+          this.running_details.reverse.count > 0) {
+          this.doughnutChartData_running = [
+            this.running_details.forward.count,
+            this.running_details.reverse.count,
+            this.running_details.not_on_route.count
+
+          ];
+        }
+
+
+        // if (this.devicess.running_details.forward.names.length == 0) {
+        //   this.loadingName = "NA";
+        // } else {
+        //   this.loadingName = this.devicess.running_details.forward.names
+        // }
+
+        // if (this.devicess.running_details.reverse.names.length == 0) {
+        //   this.unloadingName = "NA";
+        // } else {
+        //   this.unloadingName = this.devicess.running_details.reverse.names
+        // }
+
+        // if (this.devicess.running_details.not_on_route.names.length == 0) {
+        //   this.norName = "NA";
+        // } else {
+        //   this.norName = this.devicess.running_details.not_on_route.names
+        // }
+    
+
+
+        this.runnig = b;
+
+        let r = (this.off_vech / this.total_vech) * 100;
+        let s = (this.maintanance / this.total_vech) * 100;
+        let t = (this.idle_vech / this.total_vech) * 100;
+        let u = (this.OutOfReach / this.total_vech) * 100;
+
+        if (this.total_vech != 0) this.doughnutChartData = [];
+        this.doughnutChartData.push(this.off_vech, this.maintanance, this.idle_vech, this.runnig, this.OutOfReach); 
+
+        this.DeviceSummaryArr[0].total = this.total_vech ; 
+        this.DeviceSummaryArr[1].total = this.Running; 
+        this.DeviceSummaryArr[2].total = this.off_vech;
+        this.DeviceSummaryArr[3].total = this.idle_vech ; 
+        this.DeviceSummaryArr[4].total = this.OutOfReach;
+        this.DeviceSummaryArr[5].total = this.expire_status ; 
+        this.DeviceSummaryArr[6].total = this.no_data?this.no_data:0 ;
+        this.utilisationChart()
+
+        this.Load =false;
+      });
+  }
+
+
+  showVehiclesByStatus() {
+
+
+    // this.router.navigate(['/dashboard',vehStatus]);
+  }
+
+  showVehiclesByGroup = function (group) {
+
+    this.router.navigate(['/dashboard', group._id]);
+  }
+
+  imgShow: Boolean = false;
+
+  abc(div) {
+    console.log('div=>',div);
+   
+    this.deviceData = div;
+    var outerThis = this;
+    var start_add: any;
+    if (this.deviceData.length == 0) {
+      this.firstcall = true;
+      this.lastcall = false;
+    }
+
+    
+    for (var j = 0; j < this.deviceData.length; j++) {
+      if (this.deviceData[j].status_updated_at == undefined) {
+        let dev_status_1 = this.deviceData[j].status ? this.deviceData[j].status : "Not available";
+        this.deviceData[j].status = dev_status_1;
+
+      } else {
+          var dev_status = this.deviceData[j] ? this.deviceData[j].status : "NA";
+    //  previous function for date difference conversion
+      
+        // this.arrival_time = new Date(this.deviceData[j].status_updated_at);
+
+        // var curr_time = new Date();
+        // var fd = new Date(this.arrival_time).getTime();
+        // var td = curr_time.getTime();
+        // var timedev_status_difference = td - fd;
+        // var total_min = timedev_status_difference / 60000;
+        // var hours = total_min / 60
+        // var rhours = Math.floor(hours);
+        // var minutes = (hours - rhours) * 60;
+        // var rminutes = Math.round(minutes);
+        // this.Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+
+        //  previous function for date difference conversion
+
+        // new conversion logic
+        var curr_time:any = new Date();
+        this.arrival_time = new Date(this.deviceData[j].status_updated_at);
+        var fd:any = new Date(this.arrival_time);
+        console.log('curr_time',curr_time,this.arrival_time);
+        var diffInMilliSeconds= Math.abs(curr_time - fd) / 1000;
+
+        // calculate days
+        const days = Math.floor(diffInMilliSeconds / 86400);
+        diffInMilliSeconds -= days * 86400;
+        console.log('calculated days', days);
+    
+        // calculate hours
+        const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
+        diffInMilliSeconds -= hours * 3600;
+        console.log('calculated hours', hours);
+    
+        // calculate minutes
+        const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
+        diffInMilliSeconds -= minutes * 60;
+        console.log('minutes', minutes);
+    
+        let difference = '';
+        if (days > 0) {
+          difference += (days === 1) ? `${days} day, ` : `${days} days, `;
+        }
+    
+        difference += (hours === 0 || hours === 1) ? `${hours} hour, ` : `${hours} hours, `;
+    
+        difference += (minutes === 0 || hours === 1) ? `${minutes} minutes` : `${minutes} minutes`; 
+    
+   // new conversion logic
+          this.Durations = difference ; 
+          console.log('this.Durationsthis.Durationsthis.Durationsthis.Durations',this.Durations);
+      
+        if (dev_status == undefined) {
+
+
+          this.status_toShow = "NA";
+
+        } else {
+          this.status_toShow = dev_status + " " + "Since" + " " + this.Durations;
+        }
+
+        this.deviceData[j].status = this.status_toShow;
+        this.deviceData[j].tStatus = dev_status;
+        this.deviceData[j].roadShow = true;
+
+        // console.log("Device Status =>", this.deviceData[j].status);
+      
+      }
+      // if(this.deviceData[j].distanceVariation){
+      //         if(this.deviceData[j].distanceVariation[0]=="+"){
+      //           var milege=(this.deviceData[j].total_odo/100)*(Number(this.deviceData[j].distanceVariation.substring(1)))
+      //           console.log("MILEGE->",milege,'-',this.deviceData[j].total_odo);
+      //           this.deviceData[j].total_odo=this.deviceData[j].total_odo+milege
+
+      //         }else{
+      //           var milege=(this.deviceData[j].total_odo/100)*(Number(this.deviceData[j].distanceVariation.substring(1)))
+      //           console.log("MILEGE->",milege,'-',this.deviceData[j].total_odo);
+      //           this.deviceData[j].total_odo=this.deviceData[j].total_odo-milege
+      //         }
+      //       }
+      this.getAddress(this.deviceData[j])
+
+    }
+    
+    console.log('this.deviceData',this.deviceData);
+
+   
+  }
+
+  doughnutOptions = {
+    percentageInnerCutout: 80
+
+  }
+
+  options = {
+
+    legend: {
+      display: false
+    },
+    cutoutPercentage: 75
+
+  }
+
+  options1 = {
+    legend: {
+      display: false
+    },
+    // tooltips: {
+    //   enabled: false
+    // },
+    cutoutPercentage: 75
+  }
+
+
+
+
+
+  //  graph according to vechical status
+
+
+  // ['Vehicles Stopped', 'Vehicles under Maintenance', 'Idle Vehicles' ,'Vehicles Running', 'Out off reach Vehicles'];
+
+
+
+  public chartColors: Array<any> = [
+
+    {
+
+      backgroundColor: [
+        '#ffafaf',
+        'rgba(152,92,16,1)',
+        '#ffd366',
+        'lightgreen',
+        '#afe1ff',
+        '#efefef'
+
+
+      ],
+
+    }
+  ];
+  public chartColors_running: Array<any> = [
+    {
+      backgroundColor: ['lime', 'lightgreen', 'green', 'darkgreen']
+    }
+  ];
+  public chartColors_idle: Array<any> = [
+    {
+      backgroundColor: ['#ffeb3b94', '#ffd366', '#efb62a', '#f9b101'],
+    }
+  ];
+  public chartColors_stopped: Array<any> = [
+    {
+      backgroundColor: ['#ffafaf', 'tomato', 'red', 'darkred']
+    }
+  ];
+  public chartColors_main: Array<any> = [
+    {
+      backgroundColor: 'rgba(152,92,16,1)'
+    }
+  ];
+  public chartColors_Our: Array<any> = [
+    {
+      backgroundColor: '#afe1ff'
+    }
+  ];
+  public chartColors_NoGps: Array<any> = [
+    {
+      backgroundColor: '#efefef'
+    }
+  ];
+
+   filterId :any;  
+
+  getDeviceBYfilter(i) {
+    if(i==1){
+      this.skip = 0;
+    }
+    this.filterId = 'r';
+    clearInterval(this.interval);
+    var a = "RUNNING"
+   // console.log(this.skip,this.limit);
+    // console.log(this.DealerID);
+    var status_1 = false;
+    this.contactService.getDeviceByFilter_dash(a,this.emailid, this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1) 
+      .subscribe(res => {
+        this.final = res.devices;
+        // this.final =this.filtes;
+        this.Ing_Status();
+        this.abc(this.final);
+
+      })
+  }
+
+  getDeviceBYfilterIdle(i) {
+    if(i==2){
+      this.skip=0;
+    }
+    this.filterId = 'i';
+
+    clearInterval(this.interval);
+    var a = "IDLING"
+    var status_1 = false;
+    this.contactService.getDeviceByFilter_dash(a,this.emailid, this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+        this.filtes = res.devices;
+        this.abc(this.filtes);
+
+      })
+
+
+  }
+
+  getDeviceBYfilterStop(i) {
+    console.log("inside function");
+    if(i==3){
+      this.skip =0;
+    }
+    this.filterId = 's';
+    // console.log(this.skip);
+    clearInterval(this.interval);
+    var a = "STOPPED"
+    var status_1 = false;
+    this.contactService.getDeviceByFilter_dash(a,this.emailid, this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+        // console.log("stoppedveh=>",res);
+        for(var i=0 ;i<res.length;i++){
+          var a = res.devices[i].Ignition ; 
+          // console.log(a);
+        
+
+        }
+        this.filtes = res.devices;
+        this.abc(this.filtes);
+
+      })
+
+
+  }
+
+  getDeviceBYfilterMain(i) {
+    if(i==4){
+      this.skip =0;
+    }
+    this.filterId = 'm';
+    clearInterval(this.interval);
+    var a = "Expired";
+  
+    var status_1:any;
+
+    this.contactService.getDeviceByFilter_dash(a,this.emailid,this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+
+        this.filtes = res.devices;
+
+        this.abc(this.filtes);
+
+      })
+
+
+  }
+
+  getDeviceBYfilterOUR(i) {
+    if(i==5){
+      this.skip =0
+    }
+    this.filterId = 'our';
+    clearInterval(this.interval);
+    var a = "OUT OF REACH"
+    var status_1 = false;
+    this.contactService.getDeviceByFilter_dash(a,this.emailid, this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+        // console.log("ourveh=>",res)
+        this.filtes = res.devices;
+
+        this.abc(this.filtes);
+
+      })
+  }
+
+  getDeviceBYfilterNOGPS(i) {
+    if(i==6){
+      this.skip =0;
+    }
+    this.filterId = 'nogpsfix';
+    clearInterval(this.interval);
+    var nogps = "no_gps_fix_devices";
+    var status_1 = false;
+    this.contactService.getDeviceByFilter_dash(nogps,this.emailid, this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+
+        this.filtes = res.devices;
+
+        this.abc(this.filtes);
+
+      })
+
+  }
+  getDeviceBYfilterEXPIRED(i){
+    if(i==7){
+      this.skip =0;
+    }
+     this.filterId = 'm';
+    clearInterval(this.interval);
+    var a = "Expired";
+  
+    var status_1:any;
+
+    this.contactService.getDeviceByFilter_dash(a,this.emailid,this.useridd, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID,status_1)
+      .subscribe(res => {
+
+        this.filtes = res.devices;
+
+        this.abc(this.filtes);
+
+      })
+  }
+
+  getDeviceBYfilterNoData(i) {
+    if (i == 7) {
+      this.skip = 0;
+    }
+    this.filterId = 'm';
+    clearInterval(this.interval);
+    var a = "NO DATA";
+
+    var status_1: any;
+
+    this.contactService.getDeviceByFilter_dash(a, this.emailid, this.useridd, this.skip, this.limit, this.myInput, this.supAdm, this.DealerID, status_1)
+      .subscribe(res => {
+
+        this.filtes = res.devices;
+
+        this.abc(this.filtes);
+
+      })
+  }
+
+  alldev() {
+    // console.log("localstorageComp")
+    var retrievedData = localStorage.getItem("devices");
+    var cord = JSON.parse(retrievedData);
+    this.filtes = cord;
+    this.abc(this.filtes)
+  }
+
+selectedlanguage:any
+  // ----------------new login method-------------------------
+  vewdevLogin(id) {
+    console.log(id);
+    localStorage.setItem("custId", id);
+    localStorage.removeItem("in1");
+    this.selectedlanguage = localStorage.getItem('appLang'); 
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    this.contactService.getcustToken(id).subscribe(
+      data => {
+        // this.devicesss = data
+        // console.log(this.devicesss)
+
+        window.localStorage['Dealer_token'] = window.localStorage['token']
+        window.localStorage['token'] =data.custumer_token;
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        window.localStorage['Custumer'] = 'ON';
+        localStorage.setItem('superadmin', "ON");
+     
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        // localStorage.setItem('Dealer',"OFF");
+        // localStorage.setItem('superadmin',"OFF")
+        console.log('this.superAdmin',this.superAdmin);
+        // debugger;
+        if(this.superAdmin === true){
+          localStorage.setItem('supAdminAcessToCust', 'true' ); 
+        }
+        if (window.localStorage['DataLoaded'] = 'True') {
+          let dlrStatus = "true";
+
+          localStorage.setItem("dlrchk", dlrStatus)
+
+          this.router.navigateByUrl("const?_status=" + "OK");
+
+          // console.log('testing', this.useridd);
+        }
+        this.deviceData=[]
+        this.supAdm=undefined
+        this.reload()
+        this.ngOnInit()
+        this.contactService.totalTicketCount.next(0);
+
+      });
+  }
+
+  vewdev(id, name, type, expDate,lastSpeed,status) {
+    // console.log(lastSpeed);
+
+    var exStatus = status.slice(0,7);
+    if(exStatus === 'Expired'){
+      swal({
+        title: 'Expired',
+        text: "Renew Your subscription for uninterrupted service",
+        type: 'warning',
+        showCancelButton: false,
+        confirmButtonColor: '#3085d6',
+    
+        confirmButtonText: 'ok'
+      })
+
+    }else{
+      let currDate = new Date().getTime();
+      let chkDate = new Date(expDate).getTime();
+  
+      var dataStatus = {
+        vehicleId: id,
+        vehicleName: name,
+        vehicleType: type
+      }
+      // console.log("Inside View Dev",dataStatus);
+      if (type == "Tracker") {
+        localStorage.setItem('last_speed',lastSpeed );
+        this.router.navigateByUrl("location?_dname=" + name + "_id=" + id);
+        window.localStorage['devDetail'] = JSON.stringify(dataStatus);
+      }
+      else {
+        localStorage.setItem('last_speed',lastSpeed );
+        this.router.navigateByUrl("account?_did=" + id + "." + name);
+      }
+    }
+  
+  }
+
+
+  //  changing color of icon according to response
+  sidebarData(i) {
+    if(i==0){
+      this.skip=0;
+    }
+    // console.log(this.skip, this.limit);
+    this.filterId = '' ;
+    if (this.checker == "OK" || this.checker == "ok") {
+
+      this.injectData.getData(this.emailid, this.useridd, this.groupId, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID).subscribe(
+        (data) => {
+          this.devicess = data;
+          this.final = this.devicess.devices;
+
+          this.total_final = this.final;
+
+          if (this.final.length == 0 || this.final == null || !this.final) {
+            this.add_dev = false
+          
+          }
+          else {
+            this.add_dev = true
+          }
+          this.Ing_Status();
+          //  this.refresh();
+          let val = JSON.stringify(this.final);
+          localStorage.setItem("devices", val);
+          window.localStorage['LoadGraph'] = 'True'
+          window.localStorage['checker'] = 'Data'
+          window.localStorage['DataLoaded'] = 'True'
+
+          // window.localStorage['GetDevData'] = 'False'
+        
+          //  this.table();
+          //  this.subscription.unsubscribe();
+        },
+        (err) => {
+          if (err) {
+          console.log(err); 
+          }
+        }
+      )
+    }
+    else if (window.localStorage.DataUpdate == 'True') {
+
+
+      this.final = []
+      this.injectData.getData(this.emailid, this.useridd, this.groupId, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID).subscribe(
+        (data) => {
+          this.devicess = data
+          this.final = this.devicess.devices
+          this.total_final = this.final;
+          if (this.final.length == 0 || this.final == null || !this.final) {
+            this.add_dev = false
+            this.Load = false;
+          }
+          else {
+            this.add_dev = true
+          }
+          this.Ing_Status();
+          //  this.refresh();
+
+          let val = JSON.stringify(this.final);
+          localStorage.setItem("devices", val);
+          window.localStorage['DataUpdate'] = 'False'
+          window.localStorage['LoadGraph'] = 'True'
+          window.localStorage['DataLoaded'] = 'True'
+
+          //    window.localStorage['GetDevData'] = 'False'
+          // this.subscription.unsubscribe();
+          this.Load = false;
+          //  this.table();
+          //   this.subscription.unsubscribe();
+
+        },
+        (err) => {
+          if (err) {
+            this.Load = false
+          }
+        }
+      )
+    }
+    else if (this.checker == "Data") {
+
+      var retrievedData = localStorage.getItem("devices");
+      var cord = JSON.parse(retrievedData);
+      this.final = cord
+      this.total_final = this.final
+      if (this.final.length == 0 || this.final == null || !this.final) {
+        this.add_dev = false
+        this.Load = false;
+      }
+      this.total_final = this.final
+      window.localStorage['DataLoaded'] = 'True'
+      this.Ing_Status();
+      //  this.refresh();
+
+      //  this.subscription.unsubscribe();
+      //  window.localStorage['GetDevData'] = 'False'
+      this.Load = false;
+      // this.table();
+      // this.subscription.unsubscribe();
+
+    }
+
+    else {
+
+      this.injectData.getData(this.emailid, this.useridd, this.groupId, this.skip, this.limit, this.myInput,this.supAdm,this.DealerID).subscribe(
+        (data) => {
+          this.devicess = data
+          this.final = this.devicess.devices
+          this.total_final = this.final;
+          if (this.final.length == 0 || this.final == null || !this.final) {
+            this.add_dev = false
+            this.Load = false;
+          }
+          else {
+            this.add_dev = true
+          }
+          this.Ing_Status();
+          //this.refresh();
+
+          let val = JSON.stringify(this.final);
+          localStorage.setItem("devices", val);
+          window.localStorage['LoadGraph'] = 'True'
+          window.localStorage['checker'] = 'Data'
+          window.localStorage['DataLoaded'] = 'True'
+
+          //    window.localStorage['GetDevData'] = 'False'
+          this.Load = false;
+          // this.subscription.unsubscribe();
+          // this.table();
+          //   this.subscription.unsubscribe();
+
+        },
+        (err) => {
+          if (err) {
+            this.Load = false;
+          }
+        }
+      )
+    }
+
+    //   }
+
+    // })
+
+  }
+
+
+  Ing_Status() {
+
+    // this.ing_Arr = []
+    var that = this;
+    // setInterval(function(){
+
+    for (var y = 0; y < that.final.length; y++) {
+      that.socket_Ing.emit('acc', that.final[y].Device_ID)
+      that.socket_Ing.on(that.final[y].Device_ID + 'acc', that.accListener(y, that.final[y]));
+      var d = new Date();
+      var a = d.setHours(0, 0, 0, 0);
+
+    }
+
+
+
+    // console.log('socket function');
+
+    that.abc(that.total_final);
+    // },(1000*that.setTimeOut.value))
+  }
+
+
+  imgUrlacc: any;
+  ing_Arr = [];
+
+  accListener(index, dev) {
+
+
+    var outerThis = this;
+    var ing
+    return function (acc, from, time) {
+      var newNum = "Ignition";
+      var newTitle = "Ignition_Time";
+      var todaysODO = "Todays_ODO"
+      var newVal = acc;
+
+      //var newTim = time;
+      var dt = new Date(time);
+      let day = dt.getDate();
+      let month = dt.getMonth() + 1;
+      let year = dt.getFullYear();
+
+      let final_date = day + "/" + month + "/" + year
+      let tm = new Date(time).toLocaleTimeString();
+
+      let total = final_date + " " + tm
+
+      outerThis.ing_Arr.push(from)
+      dev[newNum] = newVal;
+      dev[newTitle] = total;
+      dev[todaysODO] = dev.today_odo
+
+      var i = outerThis.final.indexOf(index);
+      outerThis.final[i] = dev;
+      outerThis.total_final = outerThis.final;
+
+
+    }
+
+  }
+  imgurl: any;
+  test(a, b) {
+    this.textStatus = "";
+    //let b = a.split("|")[0]
+    var IgnTime = moment(b).format('lll');
+    if (!a) {
+      this.imgurl = "../../assets/image/enginena.png";
+      this.textStatus = "Ignition Status: NA"
+      return true;
+    }
+    else if (a == "1") {
+      this.imgurl = "../../assets/image/enginegreen.png";
+      this.textStatus = "Ignition Status: ON | Last Updated: " + IgnTime
+      return true;
+    }
+    else if (a == "0") {
+
+      this.imgurl = "../../assets/image/enginered.png"
+      this.textStatus = "Ignition Status: OFF | Last Updated:" + IgnTime
+
+      return true;
+    }
+    else {
+      this.imgurl = "../../assets/image/enginena.png";
+      return false;
+    }
+  }
+
+  testtPower(pwr) {
+    if (!pwr) {
+      this.pwrURL = "../../assets/image/noPower.png";
+      this.pStatus = "No Power";
+      return true;
+    } else if (pwr == "1") {
+      this.pwrURL = "../../assets/image/power_on.png";
+      this.pStatus = "Power ON";
+      return true;
+    } else if (pwr == "0") {
+      this.pwrURL = "../../assets/image/power_off.png";
+      this.pStatus = "Power OFF";
+      return true;
+    } else {
+      return false;
+    }
+
+  }
+  gsmURL:any;
+  gsmStatus:any;
+  testSignal(signal:any,dev:any){
+ 
+   
+    var signalNumricvalue = parseInt(signal);
+
+    if(signalNumricvalue == 0) {
+      this.gsmURL = "../../assets/images/tower/tower0.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    } else if ((signalNumricvalue > 0)&&(signalNumricvalue<5)) {
+      this.gsmURL = "../../assets/images/tower/tower5.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    } else if ((signalNumricvalue >= 5)&&(signalNumricvalue<10)) {
+      this.gsmURL = "../../assets/images/tower/tower10.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    } else if ((parseFloat(signal) >= 10)&&(parseFloat(signal)<15)) {
+      this.gsmURL = "../../assets/images/tower/tower15.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    } else if ((signalNumricvalue >= 15)&&(signalNumricvalue<20)) {
+      this.gsmURL = "../../assets/images/tower/tower20.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    }
+    else if ((signalNumricvalue >= 20)&&(signalNumricvalue<25)) {
+      this.gsmURL = "../../assets/images/tower/tower25.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    }
+    else if (signalNumricvalue >= 25){
+      this.gsmURL = "../../assets/images/tower/tower30.png";
+      this.gsmStatus = "Signal strength" + " "+ signal;
+      return true;
+    }else{
+      this.gsmURL = "../../assets/images/tower/tower7.png";
+      this.gsmStatus = "No Signal";
+      return true;
+    }
+
+  }
+
+  gpsStatus(gTrack) {
+    if (!gTrack) {
+      this.gpsImg = "../../assets/image/no_gps.png";
+      this.gStatus = "GPS NOT SUPPORTED"
+      return true;
+    } else if (gTrack == "1") {
+      this.gpsImg = "../../assets/image/gpsOn.png";
+      this.gStatus = "GPS ON"
+      return true;
+    } else if (gTrack == "0") {
+      this.gpsImg = "../../assets/image/gps_off.png";
+      this.gStatus = "GPS OFF"
+      return true;
+    } else {
+      return false;
+    }
+
+  }
+
+  gpsACStatus(ACtrack) {
+    if (!ACtrack) {
+      // grey
+      this.ACImg = "../../assets/image/acGrey.png";
+      this.aStatus = "AC NOT SUPPORTED"
+      return true;
+    } else if (ACtrack == "1") {
+      // green
+      this.ACImg = "../../assets/image/acGreen.png";
+      this.aStatus = "AC ON"
+      return true;
+    } else if (ACtrack == "0") {
+      // red
+      this.ACImg = "../../assets/image/acRed.png";
+      this.aStatus = "AC OFF"
+      return true;
+    } else {
+      return false;
+    }
+
+  }
+
+
+  iconCheck(status, iconType) {
+  
+    var devStatus = status.split(" ");
+   
+    if ((iconType == 'car') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } 
+    else if ((iconType == 'bike') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bike.png";
+      return this.devIcon;
+      // }
+    }  else if ((iconType == 'bike') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/bus_out.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/bus_running.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/bus_stop.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bus.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } 
+    else if ((iconType == 'truck') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/our_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } 
+    else if ((iconType == 'tractor') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/tractor_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/tractor_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/tractor_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/tractor_yellow.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'tractor') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } 
+    else if((!iconType)&&(devStatus[0] == "OUT")){
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if((!iconType)&&(devStatus[0] == "RUNNING")){
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "STOPPED")){
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "IDLING")){
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    }else if ((iconType == 'user') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/user_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/user_g.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/user_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/user_y.png";
+      return this.devIcon;
+      
+    }else if ((iconType == 'jcb') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/jcb_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "RUNNING")) {
+      
+      this.devIcon = "../../assets/image/jcb_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "STOPPED")) {     
+      this.devIcon = "../../assets/image/jcb_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "IDLING")) {     
+      this.devIcon = "../../assets/image/jcb_yellow.png";
+      return this.devIcon;      
+    }
+    else if ((iconType == 'ambulance') && (devStatus[0] == "OUT")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "RUNNING")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_g.png";
+      return this.devIcon;  
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "STOPPED")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "IDLING")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_y.png";
+      return this.devIcon;      
+    } 
+    else{
+      this.devIcon = "../../assets/image/noIcon.png";
+      return this.devIcon
+    }
+
+  }
+
+
+  myInput: any;
+
+  //sorting
+  key: string = 'Device_Name'; //set default
+  reverse: boolean = false;
+  sort(key) {
+    // console.log(key);
+    this.key = key;
+    this.reverse = !this.reverse;
+  }
+
+  //initializing p to one
+  page: number = 1;
+
+
+
+  it: number;
+  timeIntervalRefresh() {
+    // var that=this;
+    clearInterval(this.interval);
+
+    this.it = (1000 * this.setTimeOut.value);
+
+    this.interval = setInterval(() => {
+      this.sidebarData(10);
+      this.getGraphFunction();
+      this.getNotificationCount()
+    }, this.it);
+
+
+  }
+
+
+  refreshFUnction(ev) {
+
+
+    this.setTimeOut.value = ev;
+
+    this.timeIntervalRefresh();
+
+  }
+
+
+
+  // refreshData(){
+
+  //   this.sidebarData(); // simply signal for the service to update its data stream
+  // }
+
+  locationAddress: any;
+  getAddress(device) {
+    var ds = device.status;
+    var exStatus = ds.slice(0,7);
+    if(exStatus === 'Expired'){
+      // swal({
+      //   title: 'Expired',
+      //   text: "Renew Your subscription for uninterrupted service",
+      //   type: 'warning',
+      //   showCancelButton: false,
+      //   confirmButtonColor: '#3085d6',
+    
+      //   confirmButtonText: 'ok'
+      // })
+    }else{
+      this.lattitude = device.last_location?device.last_location.lat:0;
+      this.longitude = device.last_location?device.last_location.long:0;
+      var latlng_1 =
+      {
+        "lat": device.last_location?device.last_location.lat:0,
+        "long": device.last_location?device.last_location.long:0
+      }
+      this.contactService.getAddressByApi(latlng_1).subscribe(res=>{
+        // console.log('addressresponse=>',res);
+        if(res.message == "Address not found in databse"){
+          this.addressConversionBygoogleAPI(device);
+        }else{
+          device.locationAddress = res.address;
+          device['pen'] = true;
+         
+        }
+      })
+    }
+ 
+   
+  }
+
+
+
+  addressConversionBygoogleAPI(device){
+    var outerThis = this;
+    if (device.last_location == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+    } else {
+
+      this.lattitude = device.last_location.lat;
+      this.longitude = device.last_location.long;
+    }
+
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+
+    var request = {
+      latLng: latlng,
+     
+    };
+
+
+
+    geocoder.geocode(request, function (data, status) {
+      console.log('request',data);
+   
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          console.log('request',request);
+          outerThis.address_show = data[0].formatted_address;
+          device.locationAddress = outerThis.address_show;
+          device['pen'] = true;
+          outerThis.saveAddress(outerThis.lattitude,outerThis.longitude,outerThis.address_show);
+
+        } else {
+
+          device.locationAddress = "No address available";
+
+        }
+      }
+      else {
+
+        outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+        device.locationAddress = outerThis.address_show;
+        device['pen'] = true;
+
+      }
+
+    })
+
+  }
+
+  translateAddressToHindi(device){
+    console.log("Device",device);
+    // translation
+    var index=this.deviceData.indexOf(device);
+    console.log("herk",this.deviceData.indexOf(device))
+    this.contactService.addressTranslationInHindi({text:device.locationAddress}).subscribe(res=>{
+      this.deviceData[index].locationAddress=res.translation;
+      console.log(res);
+    })
+    
+
+  }
+
+
+  saveAddress(lat,lng,address){
+    var addressObj = {"lat":lat,
+    "long":lng,
+    "address":address
+  }
+    this.contactService.saveAdd(addressObj).subscribe(res=>{
+      console.log(res);
+    },err=>{
+      console.log("couldn't save address");
+    })
+
+  }
+
+
+
+  updateAddress(dev){
+    console.log(dev);
+   
+    let dialogRef = this.dialog.open(ManualAddressComponent, {
+      width: '600px',
+      data: dev
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "success") {
+        console.log(result);
+      }
+
+      else if (result == "cancel") {
+        console.log(result);  
+      }
+    });
+
+  }
+
+
+  skip: number = 0;
+  limit: number = 10;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    // console.log("skip=>",this.skip);
+    if(this.filterId== 'i'){
+      this.getDeviceBYfilterIdle(10);
+     
+    }else if(this.filterId == 'r'){
+      this.getDeviceBYfilter(10);
+     
+    }else if(this.filterId == 's'){
+      this.getDeviceBYfilterStop(10);
+      
+    }else if(this.filterId == 'm'){
+      this.getDeviceBYfilterMain(10);
+     
+    }else if(this.filterId == 'our'){
+      this.getDeviceBYfilterOUR(10);   
+    }else if(this.filterId == 'nogpsfix'){
+      this.getDeviceBYfilterNOGPS(10);
+    }   else if(this.filterId == 'av'){
+        this.getAddedVehList(this.keyIdentifier);  
+      }
+      else if(this.filterId == 'ev'){
+        this.getExpiredVehList(this.keyIdentifier);
+      }
+      else if(this.filterId == 'rv'){
+          this.renewedVehList(this.keyIdentifier);
+      }else{
+      this.sidebarData(10);
+   
+    }
+
+    
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.lastcall = false;
+      if(this.filterId== 'i'){
+        this.getDeviceBYfilterIdle(10);
+       
+      }else if(this.filterId == 'r'){
+        this.getDeviceBYfilter(10);
+      
+      }else if(this.filterId == 's'){
+        this.getDeviceBYfilterStop(10);
+      
+      }else if(this.filterId == 'm'){
+        this.getDeviceBYfilterMain(10);
+       
+      }else if(this.filterId == 'our'){
+        this.getDeviceBYfilterOUR(10);
+      }else if(this.filterId == 'nogpsfix'){
+        this.getDeviceBYfilterNOGPS(10);
+      }
+      else if(this.filterId == 'av'){
+        this.getAddedVehList(this.keyIdentifier);
+       
+      }
+      else if(this.filterId == 'ev'){
+        this.getExpiredVehList(this.keyIdentifier);
+     
+      }
+      else if(this.filterId == 'rv'){
+          this.renewedVehList(this.keyIdentifier);
+      }else{
+        this.sidebarData(10);
+        
+      }
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+
+  searchFilter(text: string,id) {
+    this.modelChanged.next(text);
+
+  }
+
+
+  getfuel(device,ind){
+      // console.log(ind);
+      // console.log(device);
+      // debugger;
+     var show_val = '';
+     if(this.fuelflag == 'l'){
+      if((device.currentFuel == undefined)||(device.currentFuel == NaN)||(device.currentFuel == null)){
+        show_val = '0';
+        return show_val;
+      }else{
+         show_val = device.currentFuel
+        return show_val;
+      }
+     }
+     if(this.fuelflag == 'p'){
+      if((device.fuel_percent == undefined)||(device.fuel_percent == NaN)||(device.fuel_percent == null)){
+        show_val = '0';
+        return show_val;
+      }else{
+         show_val = device.fuel_percent;
+        return show_val;
+      }
+     }
+   
+  }
+
+
+  gettemp(t){
+    if(t){
+      return (parseFloat(t)/10).toFixed(2);
+    }else{
+      return 0 ;
+    }
+  }
+
+  public ngOnDestroy() {
+    localStorage.setItem('refreshInterval', JSON.stringify(this.setTimeOut.value));
+    if(this.final){
+      for (var e = 0; e < this.final.length; e++) {
+        this.socket_Ing.removeAllListeners(this.final[e])
+      }
+    }
+    clearInterval(this.interval);
+  }
+
+  removeGroup() {
+    this.groupId = undefined;
+    this.groupName = undefined;
+    this.getGraphFunction();
+    this.sidebarData(10);
+  }
+
+
+
+  // =============================new Dashboard =======================================================
+   
+  DeviceSummaryArr = [
+    {status : "TOTAL VEHICLES" , total : this.total_vech?this.total_vech:0  , icon : "../../assets/image/totalVehicle.png"},
+    {status : "RUNNING", total : this.Running?this.Running:0 , icon : "../../assets/image/totalVehicle.png"},
+    {status : "STOPPED" , total : this.off_vech?this.off_vech:0 , icon : "../../assets/image/totalVehicle.png"},
+    {status : "IDLE" , total : this.idle_vech?this.idle_vech:0  , icon : "../../assets/image/totalVehicle.png"},
+    {status : "OUT OF REACH" , total : this.OutOfReach?this.OutOfReach : 0 , icon : "../../assets/image/totalVehicle.png"},
+    {status : "EXPIRED" , total : this.expire_status?this.expire_status : 0 , icon : "../../assets/image/totalVehicle.png"},
+    {status : "NO DATA" , total : this.no_data?this.no_data : 0 , icon : "../../assets/image/totalVehicle.png"},
+  ]
+
+
+    devicebystatus(devstatus){
+      if(devstatus == 'TOTAL VEHICLES'){
+        this.sidebarData(0);
+      }
+
+      if(devstatus == 'RUNNING'){
+        this.getDeviceBYfilter(1);
+      }
+
+      if(devstatus == 'STOPPED'){
+        this.getDeviceBYfilterStop(3)
+      }
+
+      if(devstatus == 'IDLE'){
+        this.getDeviceBYfilterIdle(2);
+      }
+
+      if(devstatus == 'OUT OF REACH'){
+        this.getDeviceBYfilterOUR(5);
+      }
+
+      if(devstatus == 'NO GPS'){
+        this.getDeviceBYfilterNOGPS(6);
+      }
+      if(devstatus == 'EXPIRED'){
+        this.getDeviceBYfilterEXPIRED(7);
+      }
+      if (devstatus == 'NO DATA') {
+      this.getDeviceBYfilterNoData(8)
+      }
+    }
+
+    vehicleUtilizationGraph() {
+    var that = this ;
+    var tOut = setTimeout(function(){
+      var canvas = <HTMLCanvasElement>document.getElementById("deviceBarChart");
+    
+      var ctx = canvas.getContext("2d");
+    //   clearTimeout(tOut);
+    // },2000)
+  
+
+  
+    var role = ''
+    var userid = that.useridd ;
+    if(that.superAdmin === true){
+      role = 'supAdmin' ; 
+    }else if(that.custtype === true){
+      role = 'Dealer'
+    }else{
+      role = 'User'
+    }
+
+    var barChartData = {
+      labels: [
+        "Today",
+        "Week",
+        "Month"
+      ],
+      datasets: [
+        {
+          label: "Running",
+          backgroundColor: "#86AC41",
+          borderColor: "white",
+          borderWidth: 1,
+          data: [0,0,0]
+        },
+        {
+          label: "Out of Reach",
+          backgroundColor: "#4897D8",
+          borderColor: "white",
+          borderWidth: 1,
+          data: [0,0,0]
+        },
+        {
+          label: "Idle",
+          backgroundColor: "#F5BE41",
+          borderColor: "white",
+          borderWidth: 1,
+          data: [0,0,0]
+        },
+        {
+          label: "Stopped",
+          backgroundColor: "#CB0000",
+          borderColor: "white",
+          borderWidth: 1,
+          data: [0,0,0]
+        }
+      ]
+    };
+    
+    var chartOptions = {
+      responsive: true,
+      maintainAspectRatio: false,
+      title: {
+        display: true,
+        fontSize:14,
+        text: 'Vehicle Utilization'
+    },
+      legend: {
+        position: "top"
+      },
+   
+      scales: {
+        yAxes: [{
+          ticks: {
+            beginAtZero: true,
+            max: 100,
+            min: 0
+          }
+        }]
+      }
+    }
+    
+  that.deviceBarChart =  new Chart(ctx,{
+    "type":"bar",
+    "data":barChartData, 
+    "options":chartOptions
+  })
+
+    that.contactService.vehicleUtilization(role,userid).subscribe(res=>{
+      console.log('resresresresresresres=>',res);
+      var bargraph = res;
+      console.log('bargraph',bargraph.length);
+  
+      if((bargraph.length != 0)&&(bargraph.length != undefined)){
+        var varGraphObject = bargraph;  
+      
+        for(let bg in varGraphObject){
+       
+          var runningArr = [
+            (varGraphObject[0]['Daily']['Running'] != undefined)?varGraphObject[0]['Daily']['Running']:0,
+            (varGraphObject[1]['Weekly']['Running']!=undefined)?varGraphObject[1]['Weekly']['Running']:0,
+            (varGraphObject[2]['Monthly']['Running'] != undefined)?varGraphObject[2]['Monthly']['Running']:0
+          ] ; 
+          var IdleArr = [
+            (varGraphObject[0]['Daily']['Idle'] != undefined)?varGraphObject[0]['Daily']['Idle'] :0,
+            (varGraphObject[1]['Weekly']['Idle'] != undefined)?varGraphObject[1]['Weekly']['Idle']:0,
+            (varGraphObject[2]['Monthly']['Idle'] != undefined)?varGraphObject[2]['Monthly']['Idle'] :0
+          ] ;
+          var OFRArr = [
+            (varGraphObject[0]['Daily']['OFR'] != undefined)?varGraphObject[0]['Daily']['OFR']:0,
+            (varGraphObject[1]['Weekly']['OFR'] != undefined)?varGraphObject[1]['Weekly']['OFR']:0,
+            (varGraphObject[2]['Monthly']['OFR'] != undefined)?varGraphObject[2]['Monthly']['OFR']:0
+          ] ;
+          var StopArr = [
+            (varGraphObject[0]['Daily']['Stop'] != undefined)?varGraphObject[0]['Daily']['Stop']:0,
+            (varGraphObject[1]['Weekly']['Stop'] != undefined)?varGraphObject[1]['Weekly']['Stop'] :0,
+            (varGraphObject[2]['Monthly']['Stop'] != undefined)?varGraphObject[2]['Monthly']['Stop']:0
+          ] ;
+        }
+      }
+  
+       barChartData = {
+        labels: [
+          "Today",
+          "Week",
+          "Month"
+        ],
+        datasets: [
+          {
+            label: "Running",
+            backgroundColor: "#86AC41",
+            borderColor: "white",
+            borderWidth: 1,
+            data: runningArr
+          },
+          {
+            label: "Out of Reach",
+            backgroundColor: "#4897D8",
+            borderColor: "white",
+            borderWidth: 1,
+            data: OFRArr
+          },
+          {
+            label: "Idle",
+            backgroundColor: "#F5BE41",
+            borderColor: "white",
+            borderWidth: 1,
+            data: IdleArr
+          },
+          {
+            label: "Stopped",
+            backgroundColor: "#CB0000",
+            borderColor: "white",
+            borderWidth: 1,
+            data: StopArr
+          }
+        ]
+      };
+      
+     
+    that.deviceBarChart =  new Chart(ctx,{
+      "type":"bar",
+      "data":barChartData, 
+      "options":chartOptions
+    })
+    },err=>{
+      console.log(err);
+    })
+
+    clearTimeout(tOut);
+  },3000)
+
+  }
+
+
+  expenseChart(){
+    var that =this;
+    var tOut2 = setTimeout(function(){
+      var userId = that.useridd ; 
+      var canvas_2 = <HTMLCanvasElement>document.getElementById("deviceExpense");
+      var ctx_2 = canvas_2.getContext("2d");
+      var daugnoutChart_1 = {
+        datasets: [{
+          data: [0,0,0,0,0],
+          backgroundColor:['#86AC41', '#CB0000', '#F5BE41','#4897D8','#5B7065'],
+        }],
+    
+        labels: [
+          'Service',
+          'Oil Changed',
+          'Maintenance',
+          'Tyres',
+          'Others'
+        ]
+      };
+  
+      var optionDonought = {
+        responsive: true,
+        maintainAspectRatio: false,
+        title: {
+          display: true,
+          fontSize:14,
+          text: 'Expense'
+      }
+      };
+  
+        
+      that.devicePiChart_1 = new Chart(ctx_2, {
+        type: 'doughnut',
+        data: daugnoutChart_1,
+        options: optionDonought
+      });
+      that.contactService.getExpenseGrapgData(userId).subscribe(res=>{
+        console.log('resresresresresresres',res);
+      
+        var expenseData = res ; 
+        var expData = [0,0,0,0,0];
+        var expLevel = ['Service',
+        'Oil Changed',
+        'Maintenance',
+        'Tyres',
+        'Others']
+        if(expenseData.length != 0){
+          expData=[];
+          expLevel =[];
+          for( var i=0;i < expenseData.length;i++){     
+            expData.push(expenseData[i].amount);
+            expLevel.push(expenseData[i]._id)
+  
+          }
+       
+        }
+        console.log('expDataexpDataexpDataexpDataexpData',expData);
+     daugnoutChart_1 = {
+          datasets: [{
+            data:expData,
+            backgroundColor:['#86AC41', '#CB0000', '#F5BE41','#4897D8','#5B7065'],
+          }],
+          labels: expLevel
+        };
+      
+        that.devicePiChart_1 = new Chart(ctx_2, {
+          type: 'doughnut',
+          data: daugnoutChart_1,
+          options: optionDonought
+        });
+      },err=>{
+        console.log(err);
+      })
+       clearTimeout(tOut2);
+    },3000)
+
+  }
+  NoGPS :any;
+  utilisationChart(){
+    var that = this; 
+    $( document ).ready(function() {
+      var canvas_1 = <HTMLCanvasElement>document.getElementById("utilisationChart");
+      var ctx_1 = canvas_1.getContext("2d");
+      var daugnoutChart = {
+        datasets: [{
+          data: [
+            that.Running?that.Running:0,
+            that.off_vech?that.off_vech:0,
+            that.idle_vech?that.idle_vech:0,
+            that.OutOfReach?that.OutOfReach : 0,
+            that.NoGPS?that.NoGPS : 0
+          ],
+          backgroundColor:['#86AC41', '#CB0000', '#F5BE41','#4897D8','#5B7065'],
+        }],
+    
+      
+        labels: [
+         'RUNNING',
+          'STOPPED',
+          'IDLE',
+          'OUT OF REACH',
+          'NO GPS' 
+        ]
+      };
+    
+        var optionDonought_1 = {
+          responsive: true,
+          maintainAspectRatio: false,
+          title: {
+            display: true,    
+            fontSize:14,
+            text: 'Vehicle Current Status'
+        }
+        };
+    
+        that.devicePiChart = new Chart(ctx_1, {
+          type: 'doughnut',
+          data: daugnoutChart,
+          options: optionDonought_1
+        });
+  });
+    
+  }
+
+
+  reminderVal : any;
+  reminderType = [{
+      value : "7daysL",
+      viewValue : "Last 7 days"
+    },{
+      value : "15daysL",
+      viewValue : "Last 15 days"
+    },{
+      value : "30daysL",
+      viewValue : "Last 30 days"
+    },{
+      value : "7daysN",
+      viewValue : "Next 7 days"
+    },{
+      value : "15daysN",
+      viewValue : "Next 15 days"
+    },{
+      value : "30daysN",
+      viewValue : "Next 30 days"
+    }];
+    reminderrr:any;
+    vehicleReminder(){
+      var Uid = this.useridd;
+      this.reminderrr = [];
+      this.contactService.getVehicleReminder(Uid).subscribe(res=>{
+        console.log('this.reminderVal',this.reminderVal);
+        this.reminderrr = res[0];
+        var notifString = '';
+        this.notifArr = [];
+        if(this.reminderVal == '7daysL'){
+          this.reminderrr = res[0]['last_seven'];
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+     
+        }
+        if(this.reminderVal == '15daysL'){
+          this.reminderrr = res[1]['last_fifteen'];
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType  = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+        }
+
+        if(this.reminderVal == '30daysL'){
+          this.reminderrr = res[2]['last_thirty']; 
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+        }
+        if(this.reminderVal == '7daysN'){
+          this.reminderrr = res[3]['next_seven']; 
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+        }   if(this.reminderVal == '15daysN'){
+          this.reminderrr = res[4]['next_fifteen']; 
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+        }   if(this.reminderVal == '30daysN'){
+          this.reminderrr = res[5]['next_thirty']; 
+          if(this.reminderrr.length != 0){
+            let devName = '';
+            let reminderType = '';
+            let reminderDate = '';
+            for(var i=0;i<this.reminderrr.length;i++){
+              var rd = moment(this.reminderrr[i].reminder_date).format('lll');;
+              notifString = 'Reminder for Vehicle' + ' ' + this.reminderrr[i].device.Device_Name + ' ' +'for' +' '+ this.reminderrr[i].reminder_type +' ' + 'on' +' '+ rd;
+              this.notifArr.push(notifString);
+              console.log('notifArr',this.notifArr);
+            }
+          }
+        }
+
+      },err=>{
+        console.log(err);
+      })
+    }
+
+    getreminderevent(ev){
+      console.log(ev);
+    
+       this.reminderVal =   ev.value;
+       this.vehicleReminder();
+
+
+    }
+
+    showSharedDevice(deviceObj){
+      let dialogRef = this.dialog.open(SharedDevicesComponent, {
+        width: '600px',
+        data: deviceObj
+      });
+  
+      dialogRef.afterClosed().subscribe(result => {
+        if (result == "success") {
+          console.log(result);
+        }
+
+        else if (result == "cancel") {
+          console.log(result);  
+        }
+      });
+    
+
+    }
+   
+    addedDeviceVal:any;
+    expiredDeviceVal:any;
+    totalExpiredCount=[{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+    totalRenewedCount=[{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+    totalCount = [{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+    billingDetailArr = [{'key' : 'Paid','value' : 0},{'key' : 'Pending','value' : 0}];
+    VehicleAdded = ['Today','Last Week','Last Month'];
+    getDeviceCount($event,id){
+      console.log($event);
+      console.log(id);
+    }
+
+
+    getTotalDeviceCount(){
+      var role = '';
+        if(this.superAdmin === true){
+          role =  'supAdmin' ;
+
+        }
+        if(this.custtype === true){
+          role =  'Dealer' ;
+
+        }
+      
+     
+      
+      // var role = 'supAdmin';
+      var user_id = this.useridd; 
+     
+      this.contactService.getDeviceCount(role,user_id).subscribe(res=>{
+        this.totalCount = [{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+        this.totalCount = [{'key' : 'Today','value' : res[0].today?res[0].today:0},{'key' : 'Week','value' : res[1].week?res[1].week:0},{'key' : 'Month','value' : res[2]?res[2].month:0}];
+        console.log(this.totalCount);
+
+
+      },err=>{
+        console.log(err); 
+      })
+    }
+
+
+    getTotalExpiredDeviceCount(){
+      // http://localhost:3000/gps/DeviceExpiredCount?role=supAdmin&id=59cbbdbe508f164aa2fef3d8   
+
+      var role1 = '';
+      if(this.superAdmin === true){
+        role1 =  'supAdmin' ;
+
+      }
+      if(this.custtype === true){
+        role1 =  'Dealer' ;
+
+      }
+    
+     
+      // var role1 = 'supAdmin';
+      var user_id1 = this.useridd; 
+
+      this.contactService.getExpiredDeviceCount(role1,user_id1).subscribe(res=>{
+        this.totalExpiredCount = [{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+        this.totalExpiredCount = [{'key' : 'Today','value' : res[0].today?res[0].today:0},{'key' : 'Week','value' : res[1].week?res[1].week:0},{'key' : 'Month','value' : res[2]?res[2].month:0}];
+        console.log(this.totalExpiredCount);
+
+
+      },err=>{
+
+      })
+    }
+
+
+    getTotalRenewedDeviceCount(){
+      // http://localhost:3000/gps/DeviceExpiredCount?role=supAdmin&id=59cbbdbe508f164aa2fef3d8   
+
+      var role1 = '';
+      if(this.superAdmin === true){
+        role1 =  'supAdmin' ;
+
+      }
+      if(this.custtype === true){
+        role1 =  'Dealer' ;
+
+      }
+    
+     
+      // var role1 = 'supAdmin';
+      var user_id1 = this.useridd; 
+
+      this.contactService.getRenewDeviceCount(role1,user_id1).subscribe(res=>{
+        this.totalRenewedCount = [{'key' : 'Today','value' : 0},{'key' : 'Week','value' : 0},{'key' : 'Month','value' : 0}];
+        this.totalRenewedCount = [{'key' : 'Today','value' : res[0].today?res[0].today:0},{'key' : 'Week','value' : res[1].week?res[1].week:0},{'key' : 'Month','value' : res[2]?res[2].month:0}];
+        console.log(this.totalRenewedCount);
+
+
+      },err=>{
+
+      })
+    }
+
+
+    // demoVideos(){
+    //   let dialogRef = this.dialog.open(DemoVideosComponent, {
+    //     // width: '903px',
+    //     // data: { Type: type, dataset: datasets }
+    //     panelClass: 'custom-dialog-container'
+    //   });
+  
+    //   dialogRef.afterClosed().subscribe(result => {
+    //     if (result == "OKK") {
+  
+    //     }
+    //     else if (result == "No_Dev") {
+  
+  
+    //     }
+    //   });
+
+
+    // }
+
+
+    getApiKey(){
+      // debugger;
+     var api_key = 'AIzaSyA_ycttLXPMfCSSNAfPOsaENPQ85i17lPU';
+     var apiIdentifier = localStorage.getItem('apiIdentifier');
+     if(apiIdentifier == null){
+       console.log("Inside AppIdentifier");
+      this.contactService.getgoogleApi(this.useridd).subscribe(res=>{
+        if(res.message != "api key not found"){
+         api_key = res.api_key;      
+          // var script = document.createElement('script');
+          // script.setAttribute("type", "text/javascript");
+          // script.setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key="+ api_key);
+          // document.getElementsByTagName("head")[0].appendChild(script);
+          document.getElementById('mapApi').setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=" + api_key);
+          localStorage.setItem('apiIdentifier',api_key);  
+        }else{
+      
+          // var script = document.createElement('script');
+          // script.setAttribute("type", "text/javascript");
+          // script.setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyA_ycttLXPMfCSSNAfPOsaENPQ85i17lPU");
+          // document.getElementsByTagName("head")[0].appendChild(script);
+          document.getElementById('mapApi').setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key="+api_key);
+          localStorage.setItem('apiIdentifier',api_key);
+        }
+    },err=>{
+      // var script = document.createElement('script');
+      // script.setAttribute("type", "text/javascript");
+      // script.setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyA_ycttLXPMfCSSNAfPOsaENPQ85i17lPU");
+      // document.getElementsByTagName("head")[0].appendChild(script);
+      document.getElementById('mapApi').setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key="+api_key);
+      localStorage.setItem('apiIdentifier',api_key);
+    })
+
+     }else{
+       console.log(apiIdentifier);
+      var aCount =  localStorage.getItem('apiCOunt');
+       if(aCount != '1'){
+        // var script = document.createElement('script');
+        // script.setAttribute("type", "text/javascript");
+        document.getElementById('mapApi').setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=" + apiIdentifier);
+        // document.getElementsByTagName("head")[0].appendChild(script);
+        localStorage.setItem('apiCOunt','1');
+       }
+     }
+    }
+    
+    keyIdentifier:any;
+    getAddedVehList(key){
+  
+     this.filterId = 'av';
+      if(key === 'Today'){
+        key='today';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Week'){
+        key='week';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Month'){
+        key='month';
+        this.keyIdentifier = key;
+      }
+   
+      var role = '';
+      if(this.superAdmin === true){  role =  'supAdmin' ;}
+      if(this.custtype === true){role =  'Dealer' ;}
+      var user_id = this.useridd; 
+      this.contactService.getDeviceCount1(role,user_id,key,this.skip,this.limit).subscribe(res=>{
+        console.log('added deviceList',res);
+        this.filtes = res;
+        this.abc(this.filtes);
+      })
+    }
+    getExpiredVehList(key){
+      this.filterId = 'ev';
+     console.log(this.skip);
+      if(key === 'Today'){
+        key='today';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Week'){
+        key='week';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Month'){
+        key='month';
+        this.keyIdentifier = key;
+      }    
+      var role = '';
+      if(this.superAdmin === true){  role =  'supAdmin' ;}
+      if(this.custtype === true){role =  'Dealer' ;}
+      var user_id = this.useridd; 
+      this.contactService.getExpiredDeviceCount1(role,user_id,key,this.skip,this.limit).subscribe(res=>{
+        console.log('ExpiredDeviceList',res);
+        this.filtes = res;
+        this.abc(this.filtes);
+      })
+
+    }
+
+    renewedVehList(key){
+      this.filterId = 'rv';
+      if(key === 'Today'){
+        key='today';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Week'){
+        key='week';
+        this.keyIdentifier = key;
+      }
+      if(key === 'Month'){
+        key='month';
+        this.keyIdentifier = key;
+      }
+          
+      var role = '';
+      if(this.superAdmin === true){  role =  'supAdmin' ;}
+      if(this.custtype === true){role =  'Dealer' ;}
+      var user_id = this.useridd; 
+      this.contactService.getRenewDeviceCount1(role,user_id,key,this.skip,this.limit).subscribe(res=>{
+        console.log('renewedDeviceList',res);
+        this.filtes = res;
+        this.abc(this.filtes);
+      })
+    }
+
+    latLongDetail(){
+      var that =this;
+      if (navigator.geolocation) {    
+        // if(location.protocol != 'https:'){  
+          // this.contactService.getlatLong().subscribe(res=>{
+          //   console.log(res);
+          // })
+        // }else{
+          navigator.geolocation.getCurrentPosition(function(position) {
+            console.log('Position=>',position);
+            let geocoder = new google.maps.Geocoder();
+           var d_lat= position.coords.latitude;
+           var d_lng=position.coords.longitude;
+
+      let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+
+      let request = {
+        latLng: t_latlng
+      };
+   
+      geocoder.geocode(request, function (data, status) {
+        var userState;
+        if (status == google.maps.GeocoderStatus.OK) {
+          if (data[0] != null) {
+            var address_show = data[0];
+            console.log('var=>' ,address_show);
+            for (var ac = 0; ac < data[0].address_components.length; ac++) {
+              var component = data[0].address_components[ac];
+              switch(component.types[0]) {     
+                  case 'administrative_area_level_1':
+                      userState  = component.long_name;
+                      console.log(userState);
+                      break;      
+              }
+          };
+          that.getFuelprice(userState);
+          that.currState = userState;
+         
+          } else {
+            userState = 'Maharastra';
+            that.currState = userState;
+          that.getFuelprice(userState);
+          
+         
+          }
+        }
+        else {
+          userState = 'Maharastra';
+          that.currState = userState;
+          that.getFuelprice(userState);
+          
+        }
+      })          
+        });
+        // } 
+            }
+
+
+         
+
+    }
+
+    getFuelprice(ustate){
+      console.log(ustate);
+      this.contactService.getFuelDetail(ustate).subscribe(fuelprice=>{
+        console.log('fuelpricefuelpricefuelprice=>',fuelprice);
+        this.fuelCount=[{
+          fuel : 'Diesel',
+          price:  fuelprice[0]?fuelprice[0].diesel:'--',
+          unit : 'litre'
+      },{
+        fuel : 'Petrol',
+        price: fuelprice[0]?fuelprice[0].petrol:'--' ,
+        unit : 'litre'
+      }]
+
+      })
+
+
+    }
+
+    langSymbol:boolean=true;
+    valueSymbol ='';
+    fuelShow:boolean=true;
+    getLanguage(){
+   
+    var that = this;
+    var Var = { uid: this.useridd };
+     this.contactService.getLanguages(Var).subscribe((res:any)=>{
+      console.log('resresresresresresresresresresresresresresresres ',res);
+      if(res.timezone != undefined){
+        if(res.timezone === 'Asia/Kolkata'){
+          this.fuelShow = true;
+         }else{
+          this.fuelShow = false;
+         }
+      }
+     
+   
+      var ls = res.currency_code ; 
+      if(ls !=undefined){
+        if(ls === 'INR'){
+          this.langSymbol=true;
+        }else{
+           this.langSymbol=false;
+          this.valueSymbol=res.currency_code;
+        }
+
+      }
+   
+      },err=>{
+       console.log(err);
+     })
+    
+    }
+ 
+    totalOdo(dev){
+      console.log(dev);
+      var from = new Date().setHours(0,0,0);
+      var fd = new Date(from).toISOString();
+      var to = new Date();
+      var td= new Date(to).toISOString();
+      var imei = dev._id; 
+      var user = dev.user;
+      if(typeof user === 'object'){
+        var user_id  = user._id;
+      }else{
+        var user_id = user;
+      }
+      var suburl = "/summary/distance?from=" + fd +'&to=' + td + '&user=' + user_id + '&device=' + imei;
+      this.contactService.get(suburl).subscribe((resp:any) => {  
+        console.log('const ka data =>',resp)
+        if(resp){
+          if(resp.length!=0){
+            dev.roadShow=false;
+            var dist =  (resp[0].distance).toFixed(2);
+
+            // if(this.distanceVariation[0]=="+"){
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+            //     console.log("MILEGE->",milege,'-',a);
+            //     a=a+milege
+
+            //   }else{
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+            //     console.log("MILEGE->",milege,'-',a);
+            //     a=a-milege
+            //   }
+
+            // if(resp[0].device.distanceVariation){
+            //   if(resp[0].device.distanceVariation[0]=="+"){
+            //     dist=Number(dist)+(Number(dist)/100)*(Number(resp[0].device.distanceVariation.substring(1)))
+            //   }else{
+            //     dist=dist-(Number(dist)/100)*(Number(resp[0].device.distanceVariation.substring(1)))
+            //   }
+
+            // }
+            dev.currentODO = dist
+          }else{
+            dev.roadShow=false;
+            dev.currentODO = '0.0';
+          }
+        }
+       },
+        err=>{
+            dev.roadShow=false;
+            dev.currentODO = '0.0';
+      })
+
+    }
+    reload(){
+       window.localStorage['GetDevData'] = 'True'
+    // console.log("p1");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      // console.log('p3');
+      this.aa = params['_status'];
+
+      if (this.aa != "OK") {
+        window.localStorage['checker'] = 'Data'
+      }
+      else {
+        window.localStorage['checker'] = params['_status'];
+      }
+
+    });
+
+   this.latLongDetail()
+
+    }
+
+    
+
+    Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+
+}
diff --git a/src/app/const/demo-videos/demo-videos.component.html b/src/app/const/demo-videos/demo-videos.component.html
new file mode 100644
index 0000000..c931a6a
--- /dev/null
+++ b/src/app/const/demo-videos/demo-videos.component.html
@@ -0,0 +1,23 @@
+<div>
+  <div class="row" style="background: #3975a7;padding-top: 10px;padding-bottom: 10px;font-size: 22px;
+  font-weight: 600;
+  color: white;
+  text-align: center;
+  margin: 0px 0px 10px 0px;">
+    <div class="col-12">
+      <i class="fas fa-times" title="Close Window" (click)="close()" style="float: right;padding-top: 10px;color: red;cursor: pointer;"></i>
+      <p style="margin-bottom: 0px;color: white;">TRAINING VIDEOS</p>
+    </div>
+  </div>
+  <div style="min-height: 500px;max-height: 500px;height:499px;overflow: auto;">
+    <div class="row" >
+      <div class="col-sm-12 col-md-4 col-lg-4" *ngFor="let video of demovideos">
+        <div style="text-align: center;font-weight: 600;color: #747474;font-size: 18px;">  
+          <iframe [src]="video.videoLink | safe" width="100%" height="200px" style="border:none"></iframe>
+          <p style="margin-top: 1rem;margin-bottom: 2rem;color: white;">{{video.title}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/const/demo-videos/demo-videos.component.scss b/src/app/const/demo-videos/demo-videos.component.scss
new file mode 100644
index 0000000..d774b5e
--- /dev/null
+++ b/src/app/const/demo-videos/demo-videos.component.scss
@@ -0,0 +1,25 @@
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+.mat-dialog-container{
+    background: #f15424d9;
+}
\ No newline at end of file
diff --git a/src/app/const/demo-videos/demo-videos.component.spec.ts b/src/app/const/demo-videos/demo-videos.component.spec.ts
new file mode 100644
index 0000000..56d6a7a
--- /dev/null
+++ b/src/app/const/demo-videos/demo-videos.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DemoVideosComponent } from './demo-videos.component';
+
+describe('DemoVideosComponent', () => {
+  let component: DemoVideosComponent;
+  let fixture: ComponentFixture<DemoVideosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DemoVideosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DemoVideosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/demo-videos/demo-videos.component.ts b/src/app/const/demo-videos/demo-videos.component.ts
new file mode 100644
index 0000000..d18f1e2
--- /dev/null
+++ b/src/app/const/demo-videos/demo-videos.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-demo-videos',
+  templateUrl: './demo-videos.component.html',
+  styleUrls: ['./demo-videos.component.scss']
+})
+export class DemoVideosComponent implements OnInit {
+  demovideos = [
+    {title : "How to Delete a Vehicle Permanently",videoLink:  "https://drive.google.com/file/d/16DVKAOwTzwFVVtWHqu8X96V9WIJob84q/preview"},
+    {title : "How to shift Vehicle into same Dealer",videoLink:  "https://drive.google.com/file/d/154KP2n5oW0o_80AAm3Ph8lT2tnrrQkT8/preview"},
+    {title : "How to create a geofence and assign Vehicle into it",videoLink:  "https://drive.google.com/file/d/1C5BMKdp_p6hwvbYQ8ysDgql-BIFxzblb/preview"}, 
+    {title : "How to add new customer/user and add Vehicle into it",videoLink:  "https://drive.google.com/file/d/16XggTWEVsihFyxGzvM4DPVHd-d6j83Nz/preview"},
+    {title : "How to check live history of a Vehicle",videoLink:  "https://drive.google.com/file/d/1RmhnHRewaLV9zby-vHnPcnj-JsAiwhP6/preview"},
+    {title : "How to Driver's Detail to a Vehicle",videoLink:  "https://drive.google.com/file/d/1ltHsFnFNfgZpdz58h-ryyMV-HZGggmOa/preview"},
+    {title : "How to check system log of a Vehicle",videoLink:  "https://drive.google.com/file/d/1azN3zHdcG0gyIKZgvlbvmyHy4v-R91Eb/preview"},
+
+  ]
+
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<DemoVideosComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { }
+
+  ngOnInit() {
+    // localStorage.setItem('demovideo','false');
+
+  }
+
+  close(){
+    this.dialogRef.close();
+
+  }
+}
diff --git a/src/app/const/getdevdetail/getdevdetail.component.html b/src/app/const/getdevdetail/getdevdetail.component.html
new file mode 100644
index 0000000..68ec486
--- /dev/null
+++ b/src/app/const/getdevdetail/getdevdetail.component.html
@@ -0,0 +1,3 @@
+<h4>{{vechtype}} -</h4>
+<br>
+
diff --git a/src/app/const/getdevdetail/getdevdetail.component.scss b/src/app/const/getdevdetail/getdevdetail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/const/getdevdetail/getdevdetail.component.spec.ts b/src/app/const/getdevdetail/getdevdetail.component.spec.ts
new file mode 100644
index 0000000..1f31535
--- /dev/null
+++ b/src/app/const/getdevdetail/getdevdetail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GetdevdetailComponent } from './getdevdetail.component';
+
+describe('GetdevdetailComponent', () => {
+  let component: GetdevdetailComponent;
+  let fixture: ComponentFixture<GetdevdetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GetdevdetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GetdevdetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/getdevdetail/getdevdetail.component.ts b/src/app/const/getdevdetail/getdevdetail.component.ts
new file mode 100644
index 0000000..ed21051
--- /dev/null
+++ b/src/app/const/getdevdetail/getdevdetail.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+
+@Component({
+  selector: 'app-getdevdetail',
+  templateUrl: './getdevdetail.component.html',
+  styleUrls: ['./getdevdetail.component.scss']
+})
+export class GetdevdetailComponent implements OnInit {
+
+  constructor(public dialogRef: MdDialogRef<GetdevdetailComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      console.log(data);
+      if(data.Type == "idel"){
+        this.vechtype = "Ideals Vechiles"
+      }
+      else if(data.Type == "stop"){
+        this.vechtype = "Stopped Vechiles"
+      }
+      else if(data.Type == "maintain"){
+        this.vechtype = "Maintainence Vechiles"
+      }
+      else if(data.Type == "outoff"){
+        this.vechtype = "Out off Reach Vechiles"
+      }
+     }
+     vechtype:any;
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/const/manual-address/manual-address.component.html b/src/app/const/manual-address/manual-address.component.html
new file mode 100644
index 0000000..1e05a1f
--- /dev/null
+++ b/src/app/const/manual-address/manual-address.component.html
@@ -0,0 +1,47 @@
+
+<div class="container">
+  <div class="row" >
+   <div class="col-12" > 
+    <p style="text-align: center;padding-top: 5px; padding-bottom: 5px;color: white;background: #202f46;margin-bottom: 0;">Update Address</p>
+   </div>
+  </div>
+  <div class="row" style="margin-top: 15px;">
+    <div class="col-6">
+      <p>Lattitude :  {{lat}}</p>
+    </div>
+    <div class="col-6"><p>Longitude :  {{long}}</p>
+    </div>
+  </div>
+ 
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Current Address</label>
+      <div class="row">
+        <div class="col-10"><input [disabled]='true' type="text" class="form-control"[(ngModel)]="manualAddress" aria-describedby="phoneHelp" ></div>
+        <div class="col-2"><a href={{mapLink}} style="cursor: pointer;font-size: 20px;margin: 10px 0px 10px 5px;color: #999999;"title="Open in map" target="_blank"><i class="fas fa-external-link-alt" ></i></a></div>
+      </div>
+      <div>
+      
+        <!-- <a href="https://maps.google.com/?q="+ lat +   target="_blank" title="Click to get vehicle last location"> <i class="fas fa-external-link-alt" ></i> </a> -->
+      
+
+      </div>
+     
+      <!-- <small id="manualAddress_2" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Address for this location</small> -->
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Suggested Address</label>
+      <input type="text" class="form-control" id="txtSource" [(ngModel)]="addressSuggested" aria-describedby="phoneHelp" placeholder="Address" >  
+      <small id="manualAddress_1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Address for this location</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 14px;font-weight: 500;margin-bottom: 10px;">{{errmsg}}</p>
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="addManualAddress()"> Save </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="close()"> Cancel </button> 
+    </div>
+  </div>
+</div>
diff --git a/src/app/const/manual-address/manual-address.component.scss b/src/app/const/manual-address/manual-address.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/const/manual-address/manual-address.component.spec.ts b/src/app/const/manual-address/manual-address.component.spec.ts
new file mode 100644
index 0000000..b89fcf9
--- /dev/null
+++ b/src/app/const/manual-address/manual-address.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ManualAddressComponent } from './manual-address.component';
+
+describe('ManualAddressComponent', () => {
+  let component: ManualAddressComponent;
+  let fixture: ComponentFixture<ManualAddressComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManualAddressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManualAddressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/manual-address/manual-address.component.ts b/src/app/const/manual-address/manual-address.component.ts
new file mode 100644
index 0000000..696e860
--- /dev/null
+++ b/src/app/const/manual-address/manual-address.component.ts
@@ -0,0 +1,104 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var google:any;
+
+@Component({
+  selector: 'app-manual-address',
+  templateUrl: './manual-address.component.html',
+  styleUrls: ['./manual-address.component.scss']
+})
+export class ManualAddressComponent implements OnInit {
+  errFlag : boolean =false;
+  manualAddress:any='';
+  useridd: any;
+  addressSuggested: any;
+  addLat: any;
+  addlng: any;
+  long: any;
+  lat: any;
+  mapLink: any;
+  constructor(public dialogRef: MdDialogRef<ManualAddressComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+      console.log(this.data);
+     }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   this.manualAddress =  this.data.locationAddress ;
+    console.log('this.manualAddress',this.manualAddress);
+    this.lat = this.data.last_location.lat;
+    this.long = this.data.last_location.long;
+    this.mapLink = "https://maps.google.com/?q=" + this.lat + ","+ this.long;
+
+    var that = this;
+    var input = document.getElementById('txtSource');
+    var searchBox = new google.maps.places.SearchBox(input);
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(this.lat, this.long);
+
+    var request = {
+      latLng: latlng
+    };
+    // console.log('latlongVal', request)
+    geocoder.geocode(request, function (data, status) {
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          that.addressSuggested = data[0].formatted_address;
+          // console.log(that.liveAdd);
+        } else {
+          // console.log("No address available")
+          that.addressSuggested = "";
+        }
+      }
+      else {
+        that.addressSuggested = '';
+      }
+
+    })
+  
+    searchBox.addListener('places_changed', function() {
+      var places = searchBox.getPlaces();
+      if (places.length == 0) {
+        return;
+      }
+      console.log(places);
+      places.forEach(function(place:any) {
+     //   console.log(place.geometry.location);
+        that.addressSuggested = place.formatted_address;
+        that.addLat =  place.geometry.location.lat();
+        that.addlng = place.geometry.location.lng();
+        console.log(that.addLat,that.addlng);
+        if (!place.geometry) {
+          return;
+        }
+      });
+    });
+  }
+
+  addManualAddress(){
+    console.log(this.data);
+    console.log('update Address clicked');
+    var payload ={
+        lat : this.data.last_location.lat,
+        long: this.data.last_location.long,
+        address: this.addressSuggested,
+        current_address : this.manualAddress,
+        status : 'Pending',
+        updatedBy : this.useridd
+    }
+    console.log('payload',payload);
+
+    this.contactService.updateAddress(payload).subscribe(res=>{
+      console.log(res);
+      this.dialogRef.close('success');
+    },err=>{
+      console.log(err);
+    })
+  }
+
+  close(){
+    this.dialogRef.close('cancel');
+  }
+}
diff --git a/src/app/const/safe.pipe.spec.ts b/src/app/const/safe.pipe.spec.ts
new file mode 100644
index 0000000..49ee0ad
--- /dev/null
+++ b/src/app/const/safe.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { SafePipe } from './safe.pipe';
+
+describe('SafePipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/const/safe.pipe.ts b/src/app/const/safe.pipe.ts
new file mode 100644
index 0000000..06c232d
--- /dev/null
+++ b/src/app/const/safe.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from "@angular/platform-browser";
+
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) { }
+
+  transform(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+     }
+
+}
diff --git a/src/app/const/shared-devices/shared-devices.component.html b/src/app/const/shared-devices/shared-devices.component.html
new file mode 100644
index 0000000..cf8d3aa
--- /dev/null
+++ b/src/app/const/shared-devices/shared-devices.component.html
@@ -0,0 +1,26 @@
+<div class="container">
+  <div style="float: right; cursor: pointer;" title="Close window" (click)="close()"><i style="color: white; background: red; box-shadow: 0px 2px 1px grey; " class="material-icons" > close </i></div>
+  <div class="tableStyle">
+    <table style="width: 100%;">
+      <thead style="background: #2f4f60; color: white; font-size: 12px;">
+        <tr>
+          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared with</th>
+          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Phone</th>
+          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared By</th> 
+          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;">Shared At</th> 
+          <th style="padding-top: 5px; padding-bottom: 5px;padding-left: 5px;text-align: center;">Remove</th>
+        </tr>   
+      </thead>
+      <tbody style="font-size: 12px;">
+        <tr *ngFor ="let shareObj of sharedWith ; let i = index">
+          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_with?shareObj.shared_with :""}}</td>
+          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_with_phone?shareObj.shared_with_phone:""}}</td>
+          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_by?shareObj.shared_by:""}}</td>
+          <td style="padding-left: 5px;border-left: 1px solid;border-bottom: 1px solid;">{{shareObj.shared_at?(shareObj.shared_at | date:'medium'):""}}</td>
+          <td style="padding-left: 5px;border-left: 1px solid;border-right: 1px solid;border-bottom: 1px solid;padding-top: 5px;text-align: center;"><i class="material-icons" style="color : red;cursor :pointer;font-size: 15px;" (click)= "DeleteDocumentsField(shareObj)"> remove_circle_outline </i></td>
+        </tr>   
+      </tbody>
+    </table>
+  </div>
+</div>
+
diff --git a/src/app/const/shared-devices/shared-devices.component.scss b/src/app/const/shared-devices/shared-devices.component.scss
new file mode 100644
index 0000000..a117002
--- /dev/null
+++ b/src/app/const/shared-devices/shared-devices.component.scss
@@ -0,0 +1,4 @@
+.container{
+    max-height: 500px !important;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/src/app/const/shared-devices/shared-devices.component.spec.ts b/src/app/const/shared-devices/shared-devices.component.spec.ts
new file mode 100644
index 0000000..97e7642
--- /dev/null
+++ b/src/app/const/shared-devices/shared-devices.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SharedDevicesComponent } from './shared-devices.component';
+
+describe('SharedDevicesComponent', () => {
+  let component: SharedDevicesComponent;
+  let fixture: ComponentFixture<SharedDevicesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SharedDevicesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SharedDevicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/const/shared-devices/shared-devices.component.ts b/src/app/const/shared-devices/shared-devices.component.ts
new file mode 100644
index 0000000..c26f356
--- /dev/null
+++ b/src/app/const/shared-devices/shared-devices.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-shared-devices',
+  templateUrl: './shared-devices.component.html',
+  styleUrls: ['./shared-devices.component.scss']
+})
+export class SharedDevicesComponent implements OnInit {
+  sharedWith = []
+  device_id: any;
+
+  constructor(public dialogRef: MdDialogRef<SharedDevicesComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+      this.device_id = this.data._id ; 
+      this.getSharedDevice(this.device_id);
+    }
+
+  ngOnInit() {
+   
+  }
+
+  DeleteDocumentsField(sharedObj){
+    console.log('sharedObj',sharedObj);
+    var device_id = sharedObj._id;
+
+    var removeShareObject = {
+      did : this.device_id,
+      shared_id : sharedObj._id
+    }
+   console.log(removeShareObject);
+   this.contactService.removeSharedDevice(removeShareObject).subscribe(res=>{
+  
+      this.getSharedDevice(this.device_id);
+   },err=>{
+    console.log(err);
+   })
+  }
+
+  close(){
+    this.dialogRef.close();
+  }
+
+  getSharedDevice(did){
+    this.contactService.getSharedDevices(did).subscribe(res=>{
+    
+      this.sharedWith = res;
+      console.log('this.sharedWith',this.sharedWith);
+    },err=>{
+      var errJson= JSON.parse(err['_body']); 
+      console.log(errJson);
+      if(errJson.message === "This Device is not Shared With Anyone"){
+        this.dialogRef.close();
+
+      }
+
+    })
+
+  }
+
+}
+
+
diff --git a/src/app/contact.service.spec.ts b/src/app/contact.service.spec.ts
new file mode 100644
index 0000000..584e8a2
--- /dev/null
+++ b/src/app/contact.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ContactService } from './contact.service';
+
+describe('ContactService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ContactService]
+    });
+  });
+
+  it('should be created', inject([ContactService], (service: ContactService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/contact.service.ts b/src/app/contact.service.ts
new file mode 100644
index 0000000..ca7daf2
--- /dev/null
+++ b/src/app/contact.service.ts
@@ -0,0 +1,2243 @@
+
+import { environment } from '../environments/environment';
+import { Injectable } from '@angular/core';
+import{Http, Headers,Response, ResponseContentType} from '@angular/http';
+import 'rxjs/add/operator/map';
+import {Contact} from './contact';
+import {Map} from './map';
+import {Temp} from './temp';
+import {Device} from './device';
+import {Graph} from './graph';
+import {Token} from './token';
+import {Matrix} from './matrix';
+import {Otp_log} from './otp_log'
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+
+import * as io from 'socket.io-client';
+import { Schedule } from './shedule';
+import { Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { IdleReportComponent } from './device-report/idle-report/idle-report.component';
+import { map, take } from 'rxjs/operators';
+
+
+@Injectable()
+export class ContactService {
+totalTicketCount:BehaviorSubject<number> = new BehaviorSubject<number>(10);
+
+ dev_url = environment.hostUrl;
+ dev_url2= environment.hostUrl2
+ //dev_url = 'http://localhost:3000';
+userToken  = localStorage.getItem('token');
+headersVal = new Headers();
+// tempDevobject:any ={};
+
+public menuReturnFlag:any='';
+  tempData: any;
+  languages: string[];
+  Output_languages: string[];
+  private messageSource = new BehaviorSubject('');
+  currentMessage = this.messageSource.asObservable();
+  constructor(private http: Http, private router: Router) {
+  
+  this.languages = ['en','es'];
+
+
+   }
+// retrieving
+/*
+https://roads.googleapis.com/v1/snapToRoads?path=&interpolate=true&key=AIzaSyBLNw1Bop4CPvxZV9MmxgYc9pog2Pcx8nA
+https://roads.googleapis.com/v1/snapToRoads?path=60.170880,24.942795|60.170879,24.942796|60.170877,24.942796&interpolate=true&key=AIzaSyBLNw1Bop4CPvxZV9MmxgYc9pog2Pcx8nA
+*/
+/* Location(f){
+   return this.http.get('https://roads.googleapis.com/v1/snapToRoads?path='+f+'&interpolate=true&key=AIzaSyBLNw1Bop4CPvxZV9MmxgYc9pog2Pcx8nA')
+   .map(res => res.json());
+}
+http://localhost:3000/gps/getGpsSpeedReport?imei=087074133830
+*/
+
+
+
+
+
+
+
+menuReturnGet(){
+  return localStorage.menuReturnFlag;
+}
+menuReturnSet(id){
+  localStorage.menuReturnFlag = id;
+  this.menuReturnFlag = id;
+  return localStorage.menuReturnFlag;
+}
+dealerInfo(url){
+  console.log("url at point of api trigger=>",url);
+
+  return this.http.get(this.dev_url  + '/users/getDealerInfo?&url='+url)
+  .map(res => res.json());
+}
+
+demo(a,b,c,d,e){
+  return this.http.get(this.dev_url  + '/users/demo?&fname='+a+'&lname='+b+'&email='+c+'&mobile='+d+'&dealeID='+e)
+  .map(res => res.json());
+}
+contactus(data){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url + '/users/contactous', data, {headers:this.headersVal})
+   .map(res => res.json()) ;
+}
+pwdreset(a,b){
+  return this.http.get(this.dev_url  + '/users/foremailpwdchg?&cred='+a+'&newpwd='+b)
+  .map(res => res.json());
+}
+shareloc(did,conatct){
+  return this.http.get(this.dev_url  + '/gps/ShareLocation?&imei='+did+'&contact='+conatct)
+  .map(res => res.json());
+}
+
+shareLiveLocation(data){
+  return this.http.post('https://www.oneqlik.in' + '/share', data)
+  .map(res => res.json()) ;
+}
+
+sendLiveLocationLink(data){
+  return this.http.post('https://www.oneqlik.in' + '/devices/shareLocationLink', data)
+  .map(res => res.json()) ;
+}
+
+demorequest(dpld){
+  return this.http.post(this.dev_url + '/users/DemoRequest', dpld)
+  .map(res => res.json()) ;
+}
+
+updateReminder(data){ 
+  return this.http.post(this.dev_url + '/reminder/updateReminder', data)
+  .map(res => res.json()) ;  
+}
+
+
+recalculateODO(imei){
+
+  return this.http.get(this.dev_url + '/gps/reCalculateODO?imei=' + imei)
+  .map(res => res.json()) ;  
+}
+deleteReminder(data){
+  return this.http.post(this.dev_url + '/reminder/deleteReminder', data)
+  .map(res => res.json()) ;  
+}
+
+sendMessages(pld){
+ return this.http.post(this.dev_url + '/users/notificationMessage', pld)
+  .map(res => res.json()) ;  
+}
+
+sendReceipt(mres){
+  return this.http.post(this.dev_url+ '/product/orderSave_mail', mres)
+  .map(res => res.json()) ;
+}
+
+getOederSummary(){
+  return this.http.get(this.dev_url + '/product/orderDetail')
+  .map(res => res.json());
+}
+
+deletegpsdata(id){
+  return this.http.get(this.dev_url + '/gps/gpsdelete?id='+id)
+  .map(res => res.json());
+}
+trip_logs(uId,from_date,to_date,devId){
+  console.log('devId',devId);
+    var  Url = '/user_trip/trip_detail?&uId='+uId+'&from_date='+from_date+'&to_date='+to_date
+    if(devId.length==0){
+      Url
+    }else{
+      Url ='/user_trip/trip_detail?&uId='+uId+'&from_date='+from_date+'&to_date='+to_date+'&device='+devId
+    }
+
+  return this.http.get(this.dev_url  + Url)
+  .map(res => res.json());
+}
+
+
+
+
+speedlimit2(doid,status){
+  return this.http.get(this.dev_url  + '/devices/DeviceAllert?&SpeedAlert='+status+'&doid='+doid)
+  .map(res => res.json());
+}
+speedlimit(doid,speed,status){
+
+  return this.http.get(this.dev_url  + '/devices/DeviceAllert?SpeedLimit='+speed+'&SpeedAlert='+status+'&doid='+doid)
+  .map(res => res.json());
+}
+
+getSpeedreport(imei,time){
+  //http://localhost:3000/users/forgotpwd?cred="email/phone"console.log(imei);
+  return this.http.get(this.dev_url  + '/gps/getGpsSpeedReport?imei='+imei+'&time='+time)
+  .map(res => res.json());
+}
+resetemail(email){
+  return this.http.get(this.dev_url  + '/users/forgotpwd?cred='+email)
+  .map(res => res.json());
+}
+resetpwd(email,code,pwd){
+  return this.http.get(this.dev_url  + '/users/forgotpwd?phone='+email+'&otp='+code+'&newpwd='+pwd+'&cred='+email)
+  .map(res => res.json());
+}
+ingtime(email,from,to){
+  return this.http.get(this.dev_url  + '/gps/IgnReport?email='+email+'&from='+from+'&to='+to)
+  .map(res => res.json());
+}
+ignitionGraph(did,from,to){
+  return this.http.get(this.dev_url  + '/gps/IgnGraph?did='+did+'&from='+from+'&to='+to)
+  .map(res => res.json());
+}
+
+acReport(fdate,tdate,userid,imei){
+  return this.http.get(this.dev_url + '/notifs/acReport?from_date='+fdate+'&to_date='+tdate+'&_u='+userid+'&vname='+imei)
+  .map(res => res.json());
+}
+
+acReportMain(fdate,tdate,userid,imei){
+  return this.http.get(this.dev_url + '/notifs/ACSwitchReport?from_date='+fdate+'&to_date='+tdate+'&user='+userid+'&device='+imei)
+  .map(res => res.json());
+}
+
+getCustumer(uid,s,l,i,au){
+
+  if(i && i!='undefined'){
+    s=1;
+  }
+  var url = this.dev_url +'/users/getCustomer?uid='+uid+'&pageNo='+s+'&size='+l;
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(au === true){
+    url+= "&all="+au;
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+getCustumer1(uid,s,l,i,au,status){
+
+  if(i && i!='undefined'){
+    s=1;
+  }
+  var url = this.dev_url +'/users/getCustomer?uid='+uid+'&pageNo='+s+'&size='+l;
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(au === true){
+    url+= "&all="+au;
+  }
+  if(status!=undefined){
+    url+= "&status="+status;
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+getTechnician(uid,s,l,i,au){
+
+  if(i && i!='undefined'){
+    s=1;
+  }
+  var url = this.dev_url +'/users/getTechnician?uid='+uid+'&pageNo='+s+'&size='+l;
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(au === true){
+    url+= "&all="+au;
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+getDeviceReport(user,to,from,did,s,l){
+  var url = this.dev_url  + '/gps/getGpsReport';
+  if(user){
+    url += '?id=' + user ;
+  }
+  if(did){
+    url += '&devId=' + did;
+    s=0;
+  }
+  url += '&to=' + to + '&from=' +from + '&s=' + s + '&l='+ l;
+  return this.http.get(url)
+  .map(res => res.json());
+
+}
+
+getDeviceReport2(email,to,from){
+  return this.http.get(this.dev_url  + '/gps/getGpsReport?id='+email+'&to='+to+'&from='+from)
+  .map(res => res.json());
+
+}
+
+getDevModel(){
+
+  return this.http.get(this.dev_url  + '/deviceModel/getDeviceModel')
+  .map(res => res.json());
+
+}
+
+
+getDeviceStatus(id,status){
+  return this.http.get(this.dev_url  + '/devices/updateStatus?_id='+id+'&status='+status)
+  .map(res => res.json());
+
+}
+
+resetODO(pload){
+  return this.http.post(this.dev_url + '/devices/reset_odo', pload)
+  .map(res => res.json()) ;
+
+}
+
+delete_gps_data(pload){
+  return this.http.post(this.dev_url + '/devices/delete_device_history', pload)
+  .map(res => res.json()) ;
+}
+
+getContactsbyUser(supadm){
+  return this.http.get(this.dev_url  + '/users/getAll?supadm='+ supadm)
+  .map(res => res.json());
+
+}
+
+getIdealData(id,date){
+  return this.http.get(this.dev_url  + '/gps/getGpsIdlingReport?imei='+id+'&to='+date)
+  .map(res => res.json());
+}
+// getDashboardGraph(a, t){
+//   return this.http.get(this.dev_url  + '/gps/getDashGraph?imei='+a+'&t='+t)
+//   .map(res => res.json());
+
+// }
+getDashboard(id,from,to,_id,groupId,supadm,dealer){
+  console.log("superAdmin=>",supadm);
+  var url = this.dev_url + '/gps/getDashboard?email='+id+'&from='+from+'&to='+to+'&id='+_id ;
+  if(groupId)
+  url+= '&group=' + groupId;
+  if(supadm)
+  url+= '&supAdmin=' + supadm;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+  return this.http.get(url)
+  .map(res => res.json());
+ }
+  editdevice(data){
+    this.headersVal = new Headers();
+    this.headersVal.append('Authorization',this.userToken);
+    return this.http.post(this.dev_url + '/devices/deviceupdate', data,  {headers:this.headersVal})
+     .map(res => res.json()) ;
+  }
+
+  restoreDevice(devid){
+    return this.http.get(this.dev_url  + '/devices/restoreDevice?devid='+ devid)
+    .map(res =>res.json());
+  }
+
+  getPoiReplay(id,uid){
+    return this.http.get(this.dev_url  + '/trackRouteMap/getRoutePathMapWithPoi?id='+id+"&user="+uid)
+    .map(res =>res.json());
+  }
+
+  getIgnition(pld){
+ 
+    return this.http.get(this.dev_url  + '/notifs/ignitionReport?from_date='+pld.fromDate+"&_u="+pld.user+"&to_date="+pld.toDate + "&device="+pld.device)
+    .map(res =>res.json());
+  }
+
+  getSharedDevices(did){
+    return this.http.get(this.dev_url  + '/devices/ShareDeviceOwner?doid='+did)
+    .map(res =>res.json());
+  }
+
+  // http://localhost:3000/trackRouteMap/getRoutePathMapWithPoi?id=5b470200b0ae406bfe21b07d&user=5a27deca4468572f678e2d91
+  
+  updateuid(data){
+    this.headersVal = new Headers();
+    this.headersVal.append('Authorization',this.userToken);
+    return this.http.post(this.dev_url + '/users/Account_Edit', data, {headers:this.headersVal})
+     .map(res => res.json()) ;
+  }
+getContacts(){
+ return this.http.get(this.dev_url  + '/users/getAllUsers')
+.map(res => res.json());
+
+}
+
+
+getvehType(uid){
+  return this.http.get(this.dev_url  + '/vehicleType/getVehicleTypes?user='+uid)
+  .map(res => res.json());
+}
+
+
+
+getPOIdata(i,u){
+  return this.http.get(this.dev_url  + '/trackRoute/routepath/getRoutePathWithPoi?id='+i+"&user="+u)
+  .map(res => res.json());
+}
+
+getFuelDetail(ustate){
+
+  return this.http.get(this.dev_url  + '/googleAddress/getFuelPrice?state='+ustate)
+  .map(res => res.json());
+}
+
+// http://localhost:3000/trackRoute/routepath/getRoutePathWithPoi?id=5b449ae5755a5527be41f7cc&user=59cbbdbe508f164aa2fef3d8
+getContactsbyDealer(uid){
+  return this.http.get(this.dev_url  + '/users/getAllUsers?dealer='+uid)
+  .map(res => res.json());
+}
+getDistance(ddid,fromtime,totime,satelite){
+  console.log(satelite);
+  
+  if(satelite==undefined){
+    return this.http.get(this.dev_url  + '/gps/getDistanceSpeed?imei='+ddid+'&from='+fromtime+'&to='+totime)
+    .map(res => res.json());
+  }else{
+     return this.http.get(this.dev_url  + '/gps/getDistanceSpeed?imei='+ddid+'&from='+fromtime+'&to='+totime+'&satelite='+satelite)
+    .map(res => res.json());
+  }
+}
+/* getCurrentLocation2(id){
+  return this.http.get('http://35.154.237.104:15151/gps?id='+id)
+ .map(res => res.json());
+
+ } */
+ statusUpdateGeoFence(id,status,entering,exiting){
+  return this.http.get(this.dev_url  + '/geofencing/geofencestatus?gid='+id+'&status='+status+'&entering='+entering+'&exiting='+exiting)
+  .map(res => res.json());
+ }
+
+ accountSuspend(pld){
+  return this.http.post(this.dev_url+ "/users/accountSuspension" , pld)
+  .map(res => res.json());
+ }
+
+ getCurrentLocation2(id){
+  return this.http.get(this.dev_url  + '/gps?id='+id)
+ .map(res => res.json());
+}
+// satelite +'&satelite='+satelite
+getCurrentLocation(id,from,to){
+  return this.http.get(this.dev_url  + '/gps?id='+id+'&from='+from+'&to='+to)
+ .map(res => res.json());
+ 
+ }
+ // for satelitefilter------------
+ getCurrentLocation1(id,from,to,satelite){
+   if(satelite==undefined){
+     return this.http.get(this.dev_url  + '/gps?id='+id+'&from='+from+'&to='+to)
+.map(res => res.json());
+   }
+    else{
+  return this.http.get(this.dev_url  + '/gps?id='+id+'&from='+from+'&to='+to+'&satelite='+satelite)
+ .map(res => res.json());
+    }
+ 
+ }
+ getallgeofence(id){
+  return this.http.get(this.dev_url  + '/geofencing/getallgeofence?uid='+id)
+  .map(res => res.json());
+ }
+
+
+ getLoad_managementData(id){
+  return this.http.get(this.dev_url  + '/lm?u='+id)
+  .map(res => res.json());
+
+ }
+
+ fuelReportData(dID,fDate,tDate){
+  return this.http.get(this.dev_url  + '/summary/fuel?i='+dID+"&f="+fDate+"&t="+tDate)
+  .map(res => res.json());
+ }
+
+//  summary/fuel/i,f,t
+
+
+ getGeoFence(id){
+  return this.http.get(this.dev_url  + '/geofencing/getgeofence?uid='+id)
+  .map(res => res.json());
+ }
+ getperGeoFence(gid){
+  return this.http.get(this.dev_url  + '/geofencing/getdevicegeofence?gid='+gid)
+  .map(res => res.json());
+ }
+deleteGeoFence(gid){
+  return this.http.get(this.dev_url  + '/geofencing/deletegeofence?id='+gid)
+  .map(res => res);
+}
+getgraph(){
+  return this.http.get(this.dev_url + '/api/graph')
+ .map(res => res);
+ 
+ }
+  getgraphh(url:string){
+  return this.http.get(this.dev_url+'/api/graph')
+  .map(data3 =>{
+    data3.json();
+    var grapha = data3.json().graph;
+    // console.log("Graph:");
+    // console.log("Graph:",grapha);
+    return data3.json();
+  });
+} 
+getContacts2(){
+  return this.http.get(this.dev_url  + '/users/SendOtp')
+ .map(res => res.json());
+ 
+ }
+
+/* getDevice(emailid){
+  console.log(emailid);
+  return this.http.get(this.dev_url + "/devices/getDeviceByUser?email="+emailid)
+  .map(res => res.json());
+} */
+shrdeviceOwner(did){
+  return this.http.get(this.dev_url + "/devices/ShareDeviceOwner?doid="+did)
+  .map(res => res.json());
+}
+deldevshr(did,uid){
+  return this.http.get(this.dev_url+ "/devices/RemoveShareDevice?did="+did+"&uid="+uid)
+  .map(res => res.json());
+}
+deldev(d){
+  //  device:data.Device_ID,
+  //                     userId:that.useridd
+ // console.log("Delete Device"+d)
+ if(d.permenant){
+   return this.http.get(this.dev_url+ "/devices/deleteDevice?did="+d.device+"&userId="+d.userId+"&permenant="+d.permenant)
+  .map(res => res.json());
+ }else{
+   return this.http.get(this.dev_url+ "/devices/deleteDevice?did="+d.device+"&userId="+d.userId)
+   .map(res => res.json());
+
+ }
+}
+
+deluser(d){ 
+  // console.log("Delete Device"+d)
+  var uObj = {
+    userId : d,
+    deleteuser : true
+  }
+   return this.http.post(this.dev_url+ "/users/deleteUser" , uObj)
+   .map(res => res.json());
+ }
+delshu(s){
+  return this.http.get(this.dev_url + "/schd/deleteSchedule?did="+s)
+  .map(res => res.json());
+}
+
+getsche(did){
+  return this.http.get(this.dev_url + "/schd/getSchdbyDevice?did="+did)
+  .map(res => res.json());
+}
+getcustToken(id){
+  return this.http.get(this.dev_url + "/users/getCustumerDetail?uid="+id)
+  .map(res => res.json());
+}
+
+getUserObj(id){
+  return this.http.get(this.dev_url + "/users/getuserDetail?uid="+id)
+  .map(res => res.json());
+}
+
+
+getmatrix(did){
+  return this.http.get("http://localhost:3005/api/getmatrix?did="+did)
+  .map(res => res.json());
+}
+cancel_signup(phone){
+  return this.http.get(this.dev_url +"/users/cancel_signup?phone="+phone)
+  .map(res => res.json());
+}
+getdet(){
+  return this.http.get(this.dev_url + "/users/getAllUsers")
+  .map(res => res.json());
+}
+resendotp(phone){
+  return this.http.get(this.dev_url + "/users/otpResend?phone="+phone)
+  .map(res => res.json());
+}
+getsh(on_id){
+  return this.http.get(this.dev_url + "/schd/getallSchdbyDevice?did="+on_id)
+  .map(res => res.json());
+}
+//add 
+
+
+custStatus(custData){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  
+  return this.http.post(this.dev_url +'/users/user_status',custData,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+
+editUsermaster(uObj){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/users/editUserMaster',uObj,{headers:this.headersVal})
+  .map(res => res);
+}
+
+
+getTravel_path_report(payload){
+  return this.http.post(this.dev_url +'/gps/travelPathReport',payload)
+  .map(res => res.json());
+}
+
+newgetTravel_path_report(payload){
+  return this.http.post(this.dev_url +'/gps/newtravelPathReport',payload)
+  .map(res => res.json());
+}
+
+editDevMaster(dObj){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/devices/editDevMaster',dObj,{headers:this.headersVal})
+  .map(res => res);
+
+}
+
+
+addPoints(iobj){
+  return this.http.post(this.dev_url +'/points/addpointAllocation',iobj)
+  .map(res => res);
+}
+
+removeSharedDevice(removeData){
+  return this.http.post(this.dev_url+'/devices/RemoveShare',removeData)
+  .map(res => res);
+}
+
+getAvialblePoints(distId,distPoint){
+
+  // /users/checkPointAvailablity?u_id=(user id)&demanded_points=20
+  return this.http.get(this.dev_url + "/users/checkPointAvailablity?u_id="+distId +'&demanded_points=' + distPoint)
+  .map(res => res.json());
+}
+
+
+getPointDetails(uId,fdate,tdate){
+  return this.http.get(this.dev_url + "/points/getPointAllocation?uid="+uId + "&fdate=" + fdate + "&tdate="+ tdate)
+  .map(res => res.json());
+
+
+}
+
+
+saveRoute(routeDetail){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/trackRoute',routeDetail,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+
+
+updateRoute(routeDetail,id){
+  console.log(id);
+  return this.http.put(this.dev_url +'/trackRoute/updateRoute',routeDetail)
+  .map(res => res);
+}
+
+
+addPOI(poipayload){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/trackRouteMap/updateRoute_map',poipayload,{headers:this.headersVal})
+  .map(res => res.json());
+}
+deletePOI(data){
+  return this.http.get(this.dev_url +'/poi/deletePoi?_id='+data)
+}
+
+
+updatePOIdetail(poipayload){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/trackRouteMap/updatePOI',poipayload,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+
+editPOIdetails(poipayload){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/poi/updatePOI',poipayload,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+getRouteDetail(uId){
+  return this.http.get(this.dev_url + "/trackRoute/user/"+uId)
+  .map(res => res.json());
+
+}
+
+getdevById(did){
+  return this.http.get(this.dev_url + "/devices/getDevicebyId?deviceId="+did)
+  .map(res => res);
+
+}
+
+
+createTrip(payload){
+  return this.http.post(this.dev_url +'/user_trip/planTrip',payload)
+  .map(res => res.json());
+}
+
+armDisarm(armDIsarmPayload){
+  return this.http.post(this.dev_url +'/devices/serverCommand',armDIsarmPayload)
+  .map(res => res.json());
+
+}
+
+addBillingDetail(payload){
+  return this.http.post(this.dev_url+'/billing/addBillingDetail',payload)
+  .map(res => res.json());
+}
+
+
+updateBillingDetail(payload){
+  return this.http.post(this.dev_url +'/billing/updateBillingDetail',payload)
+  .map(res => res.json());
+}
+
+endTrip(payload){
+  return this.http.post(this.dev_url +'/user_trip/updatePlantrip',payload)
+  .map(res => res.json());
+}
+
+
+saveExpense(e_payload){
+  return this.http.post(this.dev_url +'/expense/addExpense',e_payload)
+  .map(res => res.json());
+}
+
+getDetailedExpense(e_payload){
+
+  return this.http.get(this.dev_url +'/expense/tripdetailbyType?user='+e_payload.user + "&type=" + e_payload.type + "&fdate=" + e_payload.fdate + "&tdate=" + e_payload.tdate + "&vehicle=" + e_payload.vehicle)
+  .map(res => res.json());
+}
+
+getDistributer(userId,role){
+  return this.http.get(this.dev_url +'/broadcastNotification/getContactList?user='+userId +'&role=' + role)
+  .map(res => res.json());
+}
+
+
+
+updatedailyLog(pld){
+  return this.http.post(this.dev_url +'/devices/editDailyReport',pld)
+  .map(res => res.json());
+
+}
+
+
+
+
+getLastTripStatus(tripInfo,status,devId){
+  return this.http.get(this.dev_url + "/user_trip/getLastTrip?device="+devId+ "&status="+status+"&tripInfo="+tripInfo)
+  .map(res => res.json());
+}
+
+deleteExpense(expenseId){
+  
+  return this.http.get(this.dev_url + "/expense/deleteExpense?_id="+expenseId)
+  .map(res => res);
+
+}
+
+
+getExpense(tripId){
+  return this.http.get(this.dev_url + "/expense/getExpense?trip="+tripId)
+  .map(res => res.json());
+}
+
+
+
+getRouteDetail_path(uId){
+  return this.http.get(this.dev_url + "/trackRoute/user_path/"+uId)
+  .map(res => res.json());
+
+}
+POIDATA(id,userId){
+    return this.http.get(this.dev_url + "/trackRouteMap/user/getRouteMap?id="+id+"&userid="+userId)
+  .map(res => res.json());
+
+}
+
+// http://localhost:3000/trackRouteMap/driverPerformance?from_date=2018-03-10T09:29:43.547Z&to_date=2018-06-12T09:29:43.547Z&driverid
+
+
+
+driverReport_data(from,to,id){
+  return this.http.get(this.dev_url + "/trackRouteMap/driverPerformance?from_date="+from+"&to_date="+to+"&driverid="+id)
+  .map(res => res.json());
+}
+
+
+tripHistory(rId){
+return this.http.get(this.dev_url + "/notifs/tripStory?tripid="+rId)
+  .map(res => res.json());
+}
+
+
+getDrivers(uId){
+  return this.http.get(this.dev_url + "/driver/getDrivers?userid="+uId)
+  .map(res => res.json());
+
+}
+
+
+getExpVehDetails(uId,emailId,status,skip,limit,input,supadmin,dealer){
+  // return this.http.get(this.dev_url + "/devices/getDeviceByUser?email="+emailId+"&id="+uId+"&status="+status)
+  // .map(res => res.json());
+  console.log(skip);
+  if(input && input!='undefined'){
+    skip=0;
+  }
+  var url = this.dev_url + "/devices/getDeviceByUser?email=" + emailId +'&id='+ uId ;
+  if(input && input!="undefined"){
+    url+= "&search="+input;
+  }
+  if(status == true){
+    url += '&status=' + status ;
+  }
+  if(skip)
+  console.log(skip);
+  url+= '&skip='+skip;
+  if(limit)
+  url += "&limit="+limit
+  if(supadmin)
+  url+= '&supAdmin=' + supadmin;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+  return this.http.get(url)
+   .map(res => res.json());
+
+}
+
+
+getNotificationType(){
+  return this.http.get(this.dev_url + "/notifs/getTypes")
+  .map(res => res.json());
+}
+
+
+getReferenceId(rid){
+  return this.http.get(this.dev_url + "/reference/verifyRef?ref_id="+rid)
+  .map(res => res.json());
+}
+
+
+  getDeviceByFilter_dash(a, email, user, s, l, input, supadm, dealer, status) {
+
+    if (input && input != 'undefined') {
+      s = 0;
+    }
+
+    var url = this.dev_url + "/devices/getDeviceByUser?id=" + user + "&email=" + email + "&skip=" + s + "&limit=" + l;
+
+    if ((a != null) || (a != undefined)) {
+      url += "&statuss=" + a
+    }
+    if (status == true) {
+      url += "&status=" + status
+    }
+
+    if (input && input != "undefined") {
+      url += "&search=" + input;
+    }
+    if (supadm)
+      url += '&supAdmin=' + supadm;
+    if (dealer)
+      url += '&dealer=' + dealer;
+
+    // if(group){
+    //   url+='&group='+group;
+    // }
+
+    return this.http.get(url)
+      .map(res => res.json());
+  }
+
+getDeviceByFilter_dashNew(a,email,user,s,l,input,supadm,dealer,status){
+
+  if(input && input!='undefined'){
+    s=0;
+  }
+  
+  var url = this.dev_url + "/devices/getDeviceForDashboard?id="+user+"&email="+email+"&skip="+s+"&limit="+l;
+
+  if((a!=null)||(a!=undefined)){
+    url += "&statuss="+a
+  }
+  if(status ==true){
+    url += "&status=" + status
+  }
+  
+  if(input && input!="undefined"){
+    url+= "&search="+input;
+  }
+  if(supadm)
+  url+= '&supAdmin=' + supadm;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+
+  // if(group){
+  //   url+='&group='+group;
+  // }
+
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+
+
+
+
+getfilteredgeofance(gID,uId){
+  return this.http.get(this.dev_url + "/geofencing/getallgeofence?uid="+uId+"&vehiclegrp="+gID)
+  .map(res => res.json());
+}
+
+
+
+// http://13.126.36.205:3000/devices/getDeviceByUser?email=gaurav.gupta@adnate.in&id=59cbbdbe508f164aa2fef3d8&status=true
+getRouteDriver(uId){
+  return this.http.get(this.dev_url + "/driver/getDrivers?userid="+uId)
+  .map(res => res.json());
+}
+
+
+addCommandQueue(pld){
+  return this.http.post(this.dev_url + "/devices/addCommandQueue",pld)
+  .map(res => res.json());
+}
+
+deviceCmdQueue(imei){
+  return this.http.get(this.dev_url + "/devices/getCommandQueue?imei="+imei)
+  .map(res => res.json());
+}
+
+ProductSave(pld){
+  return this.http.post(this.dev_url + "/product/addProduct",pld)
+  .map(res => res.json());
+
+}
+
+getProducts(){
+  return this.http.get(this.dev_url + "/product/getProduct")
+  .map(res => res.json());
+
+}
+
+getExpensesbyCategory(pld){
+  // user : this.useridd,
+  // fromDate:this.Fromdate,
+  // toDate : this.todate,
+  // vehicle : this.deviceArr[0]
+
+  return this.http.get(this.dev_url + "/expense/expensebycateogry?user="+pld.user + '&fdate='+pld.fromDate + '&tdate=' + pld.toDate + '&vehicle=' + pld.vehicle)
+  .map(res => res.json());
+}
+
+addExpenses(pld){
+
+  return this.http.post(this.dev_url + "/expense/addExpense",pld)
+  .map(res => res.json());
+}
+
+
+getDeviceModelbyID(modelId){
+  
+  return this.http.get(this.dev_url + "/deviceModel/getDevModelByName?id="+modelId)
+  .map(res => res.json());
+
+}
+
+saveAdd(addressObj){
+  return this.http.post(this.dev_url + "/googleAddress/addGoogleAddress",addressObj)
+  .map(res => res.json());
+  
+}
+
+getlatLong(){
+  
+  return this.http.get('http://ip-api.com/json')
+  .map(res => res.json());
+}
+
+getEngineCutStatus(id){
+  return this.http.get(this.dev_url + "/trackRouteMap/getRideStatusApp?_id="+id)
+  .map(res => res.json());
+}
+
+getEngineCutStatus_1(id){
+  return this.http.get(this.dev_url + "/trackRouteMap/checkStatus?_id="+id)
+  .map(res => res.json());
+}
+
+checkForPassword(id){
+  return this.http.post(this.dev_url + "/users/get_user_setting",id)
+  .map(res => res.json());
+
+}
+
+trakcRouteMap(uId){
+  return this.http.get(this.dev_url + "/trackRouteMap/user/getRouteMap?userid="+uId)
+  .map(res => res.json());
+}
+
+updateRouteStatus(payload,id){
+  return this.http.put(this.dev_url +'/trackRoute/id',payload)
+  .map(res => res.json());
+
+}
+
+// http://13.126.36.205:3000/trackRouteMap/user/getRouteMap?userid=59cbbdbe508f164aa2fef3d8
+
+  addRouteMap(mapPayload) {
+    this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+    return this.http.post(this.dev_url + "/trackRouteMap", mapPayload,{headers:this.headersVal})
+      .map(res => res.json());
+  }
+
+
+
+delRouteDetail(rId){
+  return this.http.delete(this.dev_url + "/trackRoute/"+rId)
+  .map(res => res);
+}
+
+getVehDetail(VehiclePayload){
+  return this.http.get(this.dev_url + "/devices/getdeviceByGroupId?vgroup="+VehiclePayload)
+  .map(res => res.json());
+}
+
+deletePermanently(deviceId){
+  return this.http.get(this.dev_url + '/devices/deletePermanently?Device_ID=' + deviceId).map(res=>res.json());
+}
+
+
+getLoadUnload(gioPayload){
+  return this.http.get(this.dev_url + "/geofencing/getGeoFenceByGroupId?vgroup="+gioPayload)
+  .map(res => res.json());
+}
+
+getGeoFenceData(uId){
+  return this.http.get(this.dev_url + "/geofencing/getGeoTypeCount?uid="+uId)
+  .map(res => res.json());
+}
+
+// http://13.126.36.205:3000/geofencing/getGeoTypeCount?uid=5a27deca4468572f678e2d91
+addmatrix(mat){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url + '/api/matrixw', mat, {headers:headers})
+   .map(res => res.json()) ;
+  
+}
+addContact(newContact){
+this.headersVal = new Headers();
+ this.headersVal.append('Authorization',this.userToken);
+ return this.http.post(this.dev_url + '/users/signUp', newContact, {headers:this.headersVal})
+  .map(res => res.json()) ;
+ 
+}
+
+
+  
+log(newlog){
+  this.headersVal = new Headers();
+ this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url + '/users/LoginWithOtp', newlog,  {headers:this.headersVal})
+   .map(res => res.json()) ;
+}
+
+editshe(newshe){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/schd/editSchedule',newshe, {headers:this.headersVal})
+   .map(res => res.json());
+}
+
+addshe(newshe){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/schd/createSchedule',newshe, {headers:this.headersVal})
+   .map(res => res.json());
+}
+addContact2(newContact2){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  + '/users/SendOtp',newContact2, {headers:headers})
+   .map(res => res.json());
+}
+addDevice(newDevice){
+  this.headersVal = new Headers();
+  // this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/devices/addDevice',newDevice)
+   .map(res => res.json()
+
+  );
+}
+addKycDevice(newDevice){
+  this.headersVal = new Headers();
+  // this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/devices/addKYCDevice',newDevice)
+   .map(res => res.json()
+
+  );
+}
+
+addMultipleDevice(deviceUploadObject){
+
+  return this.http.post(this.dev_url  + '/devices/uploadDevice',deviceUploadObject)
+  .map(res => res.json())
+}
+
+
+
+editDealer(editDealerPayload){
+  return this.http.post(this.dev_url  + '/users/editUserDetails',editDealerPayload)
+   .map(res => res.json());
+}
+
+savereminder(payload){
+  return this.http.post(this.dev_url  + '/reminder/addReminder',payload)
+  .map(res => res.json());
+
+}
+
+
+getVehicleReminder(id){
+ 
+  return this.http.get(this.dev_url  + '/reminder/dashboardReminder?id=' + id)
+  .map(res => res.json());
+}
+
+deleteCostumer(deletePayload){
+  return this.http.post(this.dev_url  + '/users/deleteUser',deletePayload)
+  .map(res => res.json());
+}
+
+permanentDeluser(id){
+  return this.http.get(this.dev_url  + '/users/DeleteUser?id=' + id)
+  .map(res => res.json());
+}
+
+
+getExpenseGrapgData(id){
+  // http://localhost:3000/expense/dashboardExpense?id=5d8736b6c377321aa93a3ed3  
+  return this.http.get(this.dev_url  + '/expense/dashboardExpense?id=' + id)
+  .map(res => res.json());
+}
+
+restoreUser(id){
+  return this.http.get(this.dev_url  + '/users/restoreUsers?id=' + id)
+  .map(res => res.json());
+
+}
+
+
+updateImage(imgarr){
+  console.log(imgarr);
+  return this.http.post(this.dev_url  + '/users/updateImagePath',imgarr)
+  .map(res => res.json());
+}
+
+dealer_Info1(user_id,s,l,i,role){
+  if(i && i!='undefined'){
+    s=1;
+  }
+  var url = this.dev_url +'/users/getDealers?supAdmin='+user_id +'&pageNo='+ s +"&size="+l  ;
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(role === 'subadmin'){
+    url+= "&customer_role="+role+',kycApproval,cc';
+  }
+  return this.http.get(url)
+    .map(res=>res.json());
+}
+
+// getAllDealerVehicles
+dealer_Info(){
+  return this.http.get(this.dev_url +'/users/getAllDealerVehicles')
+    .map(res=>res.json());
+}
+
+dealer_Info_dealer_list(superadm){
+  return this.http.get(this.dev_url +'/users/getAllDealerVehicles?supAdmin=' + superadm)
+    .map(res=>res.json());
+}
+
+getTableData(superadm){
+  return this.http.get(this.dev_url +'/users/getDealerAndcust?supAdmin=' + superadm)
+  .map(res=>res.json());
+}
+
+dealer_Info_dealer_list_copy(pload){
+  if(pload === true){
+    var url = '/users/getAllDealerVehicles';
+  }else{
+    var url  = '/users/getAllDealerVehicles?supAdmin=' + pload ; 
+  }
+ 
+  return this.http.get(this.dev_url + url)
+  .map(res=>res.json());
+  
+}
+addGeo(geodata){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/geofencing/addgeofence',geodata,  {headers:this.headersVal})
+   .map(res => res.json()
+
+  );
+}
+
+updateGeo(geodata){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url  + '/geofencing/updateGeoFence',geodata,  {headers:this.headersVal})
+   .map(res => res.json()
+
+  );
+}
+
+addToken(newToken){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  + '/devices/checkToken',newToken, {headers:headers})
+   .map(res => res.json());
+}
+//loginwithotp
+loginotp(userlog){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  +'/devices/deleteDevice?did=123/users/LoginWithOtp',userlog, {headers:headers})
+   .map(res => res.json());
+}
+
+getDataObservable(url:string) {
+  return this.http.get(this.dev_url  + '/mos/getMosChannel')
+      .map(data => {
+          data.json();
+         
+           var temp = data.json().temperature[0];
+           var dis = data.json().distance[0];
+           var hum = data.json().humidity[0];
+           var  longi = data.json().gps[0];
+          // console.log("GPS: ",longi);
+          // console.log("Temprature: ",temp);
+          // console.log("Humidity: ",hum);
+          // console.log("Distance: ",dis);
+          
+          return data.json();
+  });
+}
+/* getDevice_id(id){
+  return this.http.get(this.dev_url + "/devices/getDeviceByUser?id="+id)
+  .map(data => {
+      data.json();
+     
+       var devices = data.json().devices;
+    
+      return data.json();
+});
+}
+https://www.adnateiot.com/gps?id='+id+'&from='+from+'&to='+to
+http://localhost:3000/devices/deviceShare?uid=5a27deca4468572f678e2d91&email=ultimateanshulsaxena@gmail.com&did=5a449636fa04d91b64565e60*/
+ShareDevice(email,id,did){
+  // console.log(did)
+  return this.http.get(this.dev_url + "/devices/deviceShare?email="+email+'&uid='+id+'&did='+did
+)
+      .map(data => {
+          data.json();
+         
+           var devices = data.json().devices;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+getDevice(emailid,id) {
+  // https://www.oneqlik.in/devices/getDeviceByUserDropdown?id=5c6ebc892f8b64770399f762&email=haribhau.lagad@swarajtraanslink.com
+  return this.http.get(this.dev_url + "/devices/getDeviceByUserDropdown?email="+emailid+'&id='+id)
+      .map(data => {
+          data.json();      
+           var devices = data.json().devices;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+imageupload(img){
+  // return this.http.post(this.dev_url + "/users/uploadProfilePicture",img)
+  return this.http.post("https://www.oneqlik.in/users/uploadProfilePicture",img)
+  .map(res=>res);
+}
+
+deviceImageupload(img){
+  // return this.http.post(this.dev_url + "/devices/uploadDeviceImage",img)
+   return this.http.post("https://www.oneqlik.in/users/uploadProfilePicture",img)
+  .map(res=>res);
+}
+
+imageuploadTracker(img){
+  return this.http.post('http://13.126.36.205'+ "/users/uploadTrackerImage",img)
+  .map(res=>res);
+}
+
+updateAddress(pld){
+  return this.http.post(this.dev_url+ "/googleAddress/manualAddressUpdate",pld)
+  .map(res=>res);
+}
+
+changeAddress(pld){
+  return this.http.post(this.dev_url+ "/googleAddress/updateManualAddress",pld)
+  .map(res=>res);
+
+}
+
+getUpdatedAddress(){
+  return this.http.get(this.dev_url + '/googleAddress/getManualAddress')
+    .map(res=>res);
+}
+
+
+triggerCommand(pld){
+  return this.http.post(this.dev_url+ "/devices/manualserverCommand",pld)
+  .map(res=>res);
+}
+
+
+
+triggerCommand1(pld){
+  return this.http.post(this.dev_url+ "/devices/serverCommand",pld)
+  .map(res=>res.json());
+}
+
+deleteSystemLogs(imei){
+  return this.http.get(this.dev_url + '/gps/deleteSystemLogs?imei='+imei)
+  .map(res=>res);
+}
+DownloadDocument(imglink){
+  return this.http.get(this.dev_url + '/users/downloadDoc?docImage='+imglink, { responseType: ResponseContentType.Blob })
+    .map(res=>res);
+}
+//copy of above "getDevice" web service with extra parameters to filter data, specially for "DashboardComponent"
+getDeviceByFilter(emailid,id,groupid, status, statuss,s,l,i,supadm,dealer,dateobject,licenceType ) {
+  console.log(supadm,dealer,id);
+  console.log('dateobject',dateobject);
+  
+  if(dateobject != undefined){
+   var fdate = dateobject?dateobject.from_date:"";
+   var tdate = dateobject?dateobject.to_date:"";
+  }
+  
+  if(i && i!='undefined'){
+    s=0;
+  }
+
+  var url = this.dev_url + "/devices/getDeviceByUser?email=" + emailid +'&id='+ id + '&status=' + status + '&groupid=' + groupid + '&statuss=' + statuss+'&skip='+s+"&limit="+l+"&licenceType="+licenceType
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(supadm)
+  url+= '&supAdmin=' + supadm;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+
+  if(fdate != undefined){
+    url += '&fdate=' + fdate;
+  }
+  if(tdate != undefined){
+    url += '&tdate=' + tdate;
+  }
+console.log(url)
+  return this.http.get(url)
+      .map(data => {
+          data.json();     
+           var devices = data.json().devices;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+getDeviceByFilter1(emailid,id,groupid, status, statuss,s,l,i,supadm,dealer,dateobject,licenceType,kycStatus,state ) {
+  console.log(supadm,dealer,id);
+  console.log('dateobject',dateobject);
+  
+  if(dateobject != undefined){
+   var fdate = dateobject?dateobject.from_date:"";
+   var tdate = dateobject?dateobject.to_date:"";
+  }
+  
+  if(i && i!='undefined'){
+    s=0;
+  }
+
+  var url = this.dev_url + "/devices/getDeviceByUser?email=" + emailid +'&id='+ id + '&status=' + status + '&groupid=' + groupid + '&statuss=' + statuss+'&skip='+s+"&limit="+l+"&licenceType="+licenceType
+  if(i && i!="undefined"){
+    url+= "&search="+i;
+  }
+  if(supadm)
+  url+= '&supAdmin=' + supadm;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+
+  if(fdate != undefined){
+    url += '&fdate=' + fdate;
+  }
+  if(tdate != undefined){
+    url += '&tdate=' + tdate;
+  }
+  if(state != undefined){
+    url += '&state=' + state;
+  }
+  if(kycStatus != undefined){
+    url += '&kycStatus=' + kycStatus;
+  }
+console.log(url)
+  return this.http.get(url)
+      .map(data => {
+          data.json();     
+           var devices = data.json().devices;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+ignitionPoint(uid,from_date,to_date,device,min_time){
+   // http://localhost:3000/stoppage/trip_idle?uId=59cbbdbe508f164aa2fef3d8&from_date=2019-08-30T18:30:00.000Z&to_date=2019-10-01T07:43:52.000Z&device=5d92054693dea3510753a9a8&min_time=1
+  return this.http.get(this.dev_url+"/stoppage/trip_idle?uId="+uid+"&from_date="+from_date+"&to_date="+to_date+"&device="+ device + "&min_time=" + min_time)
+  .map(res => res.json());
+
+}
+
+
+
+filteredRoute(uId,stat){
+  return this.http.get(this.dev_url+"/trackRoute/user/"+uId+"?status="+stat)
+  .map(res => res.json());
+}
+
+// http://localhost:3000/trackRoute/user/5a27deca4468572f678e2d91?status=Active
+
+stoppage_points(ddid,fromtime,totime,useridd){
+  return this.http.get(this.dev_url+"/stoppage/stoppage_detail?uId="+useridd +'&from_date='+fromtime+'&to_date='+totime+'&device='+ddid)
+  .map(res => res.json());
+}
+
+
+stoppage_report(f_date,t_date,uId,vName){
+  var url = this.dev_url+"/stoppage/stoppageReport?from_date="+f_date +'&to_date='+t_date+'&_u='+uId;
+  if(vName){
+    url += '&vname='+vName;
+  }
+  
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+daywiseRep(fdate,tdate,uid){
+  return this.http.get(this.dev_url+"/summary/dayWiseSummary?user="+uid +'&to='+tdate+'&from='+fdate)
+  .map(res => res.json());
+}
+
+ignitionReport(f_date,t_date,vName,uId){
+  var url = this.dev_url+"/notifs/ignitionReport?from_date="+f_date +'&to_date='+t_date+'&_u='+uId;
+  if(vName.length != 0){  
+    url +='&vname='+vName;
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+
+}
+
+getAddress(lat,lng){
+  return this.http.get("https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+','+lng+'&key='+'AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8')
+  .map(res => res.json());
+}
+
+
+shareCostumerInfo(uid){
+  return this.http.get(this.dev_url+"/users/shareUserDetails?user="+uid)
+  .map(res => res.json());
+}
+
+filteredNotifications(from,to,notif,option,Id,skp,lmt){
+  // console.log(option);
+ let suburl="";
+ suburl+="/notifs/getNotifByFilters?";
+ if(from)suburl+='from_date='+from.toISOString();;
+ if(to)
+ suburl+="&to_date="+to.toISOString();
+ if(Id){
+  suburl+="&user="+Id;
+ }
+
+ if(notif)
+ suburl+="&type="+notif;
+ if(option)
+//  suburl += "&vehicle="+option.did;
+ suburl += "&vehicle="+option;
+ suburl += "&sortOrder="+"-1";
+ suburl += "&skip="+skp;
+ suburl += "&limit="+lmt;
+
+  return this.http.get(this.dev_url+suburl)
+  .map(res => res.json());  
+
+}
+
+commentSave(p){
+  return this.http.post(this.dev_url+"/notifs/commentMessage",p)
+  .map(res => res.json());
+
+}
+
+// http://localhost:3000/notifs/getNotifByFilters?from_date=2018-05-10T09:16:54.328Z&to_date=2018-05-15T09:16:54.328Z&user=5a27deca4468572f678e2d91&type=overspeed&vehicleName=Testing-2&sortOrder=-1
+
+geofenceData(f_date,t_date,uId,geoId){
+  return this.http.get(this.dev_url+"/notifs/GeoFencingReport?from_date="+f_date +'&to_date='+t_date+'&_u='+uId+'&geoid='+geoId)
+  .map(res => res.json());
+
+}
+
+overSpeed(f_date,t_date,uId,dev){
+
+  var url = this.dev_url+"/notifs/overSpeedReport?from_date="+f_date +'&to_date='+t_date+'&_u='+uId;
+  if(dev.length != 0)
+  url += '&device='+dev
+  return this.http.get(url)
+  .map(res => res.json());
+
+}
+
+
+deviceSOSreport(queryPayload){
+  console.log(queryPayload);
+  var user = queryPayload.user;
+  var from = queryPayload.from;
+  var to = queryPayload.to;
+  var url = this.dev_url + '/notifs/SoSNotification?user=' + user + '&fromDate='+ from + '&toDate=' + to
+  return this.http.get(url)
+  .map(res => res.json());
+
+}
+getVehicleExcelSheet(from,to,uId){
+
+  return this.http.get(this.dev_url+'devices/devReport?user='+uId+"&fromDate=" +from + "&toDate="+ to,  { responseType: ResponseContentType.Blob })
+  .map(res => res);
+}
+
+
+route_violation(f_date, t_date, uId){
+  return this.http.get(this.dev_url+"/notifs/RouteVoilationReprot?from_date="+f_date +'&to_date='+t_date+'&_u='+uId)
+  .map(res => res.json());
+}
+
+
+
+getDeviceCount(role,user_id){
+  return this.http.get(this.dev_url+"/gps/DeviceAddCount?role="+role +'&id='+user_id)
+  .map(res => res.json());
+}
+
+getDeviceCount1(role,user_id,key,skip,limit){
+  return this.http.get(this.dev_url+"/gps/DeviceAddCount?role="+role +'&id='+user_id + '&purpose=' + 'list' + '&for=' + key+'&skip='+skip + '&limit='+limit)
+  .map(res => res.json());
+}
+
+getExpiredDeviceCount(role,user_id){
+
+  return this.http.get(this.dev_url+"/gps/DeviceExpiredCount?role="+role +'&id='+user_id)
+  .map(res => res.json());
+
+}
+
+getExpiredDeviceCount1(role,user_id,key,skip,limit){
+
+  return this.http.get(this.dev_url+"/gps/DeviceExpiredCount?role="+role +'&id='+user_id + '&purpose='+ 'list' + '&for='+ key+'&skip='+skip + '&limit='+limit)
+  .map(res => res.json());
+
+}
+
+getRenewDeviceCount(role,user_id){
+  return this.http.get(this.dev_url+"/gps/DeviceRenewCount?role="+role +'&id='+user_id)
+  .map(res => res.json());
+}
+
+getRenewDeviceCount1(role,user_id,key,skip,limit){
+  return this.http.get(this.dev_url+"/gps/DeviceRenewCount?role="+role +'&id='+user_id + '&purpose='+'list'+'&for='+key+'&skip='+skip + '&limit='+limit)
+  .map(res => res.json());
+}
+
+summary_rep(f_date, t_date, uId,did){
+  var url= this.dev_url+"/summary?to="+t_date +'&from='+f_date+'&user='+uId;
+  if(did){
+    url += '&device='+did
+
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+summary_rep_new(f_date, t_date, uId,did){
+  var url= this.dev_url+"/summary/summaryReport?to="+t_date +'&from='+f_date+'&user='+uId;
+  if(did){
+    url += '&device='+did
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+
+distanceReport(f_date, t_date, uId,DID){
+  var url = this.dev_url+"/summary/distance?from="+f_date +'&to='+t_date+'&user='+uId;
+  if(DID!=''){
+    url += '&device='+DID 
+  }
+ 
+  return this.http.get(url)
+  .map(res => res.json());
+
+}
+
+addPOICol(poipayload){
+  this.headersVal = new Headers();
+ this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/poi/addpoi',poipayload, {headers:this.headersVal})
+  .map(res => res.json());
+}
+
+
+setlanguage(payload){
+  return this.http.post(this.dev_url +'/users/set_user_setting',payload)
+  .map(res => res.json());
+}
+
+getLanguages(payload){
+  return this.http.post(this.dev_url +'/users/get_user_setting',payload)
+  .map(res => res.json());
+}
+
+
+getAddressByApi(latlng){
+  
+  return this.http.post(this.dev_url +'/googleAddress/getGoogleAddress',latlng)
+  .map(res => res.json());
+
+}
+
+  resetPass(pld) {
+    return this.http.post(this.dev_url + '/users/hardresetPassword', pld)
+      .map(res => res.json());
+  }
+
+
+  setDealerPermission(pld){
+    return this.http.post(this.dev_url + '/users/setDealerPermission', pld)
+      .map(res => res.json());
+
+  }
+
+setReportPrefrence(payload){
+  return this.http.post(this.dev_url+'/users/reportPrefrence',payload)
+  .map(res => res.json());
+}
+
+setDashboardContent(payload){
+  return this.http.post(this.dev_url+'/users/dashboardContent',payload)
+  .map(res => res.json());
+}
+
+
+addOnePoi(poipayload){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url +'/poi/addpoi',poipayload,{headers:this.headersVal});
+}
+
+
+routeViolation(uId){
+  return this.http.get(this.dev_url+"/trackRoute/user/"+uId)
+    .map(res => res.json());
+
+}
+
+
+devicefuelreport(payload){
+  var suburl = this.dev_url+'/gps/updatedFuelReport'
+  return this.http.post(suburl,payload)
+  .map(res => res.json());
+}
+
+addGroup(detail){
+  this.headersVal = new Headers();
+  this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url+"/groups/addGroup",detail,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+
+fueleventCall(fuelobj){
+ return this.http.post(this.dev_url+"/gps/getFuelNotifs",fuelobj)
+  .map(res => res.json());
+}
+
+
+editGroup(dev){
+  this.headersVal = new Headers();
+ this.headersVal.append('Authorization',this.userToken);
+  return this.http.post(this.dev_url+"/groups/updateGroup",dev,{headers:this.headersVal})
+  .map(res => res.json());
+
+}
+  
+saveDevInventory(inventoryPayload){
+  return this.http.post(this.dev_url + '/inventory/addInventory',inventoryPayload)
+    .map(res=>res.json());
+
+}
+
+
+editDevInventory(inventoryPayload){
+  return this.http.post(this.dev_url + '/inventory/editInventory',inventoryPayload)
+  .map(res=>res.json());
+}
+
+getDealersDetails(supAdmin){
+  return this.http.get(this.dev_url+'/users/getDealers?supAdmin='+ supAdmin + "&size=1000&pageNo=1")
+    .map(res=>res.json());
+}
+
+
+//deprecated: New with count also
+getGroup(geoname){
+  return this.http.get(this.dev_url+"/groups/getGroups_list?uid="+geoname)
+  .map(res => res.json());
+}
+//New with count also
+getGroupWithStatus(geoname){
+  return this.http.get(this.dev_url+"/devices/getDeviceCountByTripStatus?userid="+geoname)
+  .map(res => res.json());
+}
+
+getgoogleApi(u_id){
+  return this.http.get(this.dev_url+"/users/getApiKey?u_id="+u_id)
+  .map(res => res.json());
+}
+
+setgoogleApi(pld){
+  return this.http.get(this.dev_url+"/users/setApiKey?u_id="+pld.u_id + "&api_key="+pld.api_key)
+  .map(res => res.json());
+}
+
+
+alldevices(){
+  return this.http.get(this.dev_url+"/devices/getDevice")
+  .map(res => res.json());
+}
+
+alldevices1(uid,email,supadmin,dealer,searchh){
+  var url  = this.dev_url + "/devices/getDeviceByUser?id="+uid + "&email=" + email; 
+  if(supadmin)
+  url += "&supAdmin=" + supadmin;
+  if(dealer)
+  url += "&dealer=" + dealer ; 
+  if(searchh){
+    url += "&search=" + searchh;
+
+  }
+  return this.http.get(url)
+  .map(res => res.json());
+}
+
+deleteGroup(uId){
+  return this.http.get(this.dev_url+"/groups/deleteGroup?_id="+uId)
+  .map(res => res.status);
+
+}
+
+changeBillingStauts(pld){
+  return this.http.post(this.dev_url+'/billing/updateBillingStatus',pld).map(res=>res.json())
+
+}
+
+getNearByVehicles(pld){
+ 
+  return this.http.post(this.dev_url+'/devices/nearVehicles',pld).map(res=>res.json())
+}
+
+getDistributerList(uid){
+  return this.http.get(this.dev_url+"/users/getsupAdmin?supAdmin="+uid)
+  .map(res => res.json());
+}
+
+addPOIfromLive(pObj){
+  return this.http.post(this.dev_url+"/groups/addGroup",pObj)
+  .map(res => res.json());
+
+}
+getShe(did) {
+  return this.http.get(this.dev_url + "/schd/getSchdbyDevice?did="+did)
+      .map(data => {
+          data.json();
+         
+           var did = data.json();
+          
+          return data.json();
+  });
+}
+// Get Data
+getdata(url:string){
+  return this.http.get('')
+  .map(data2 =>{
+    data2.json();
+
+  })
+}
+ 
+// Sockets 
+
+private url = 'http://localhost:2000'; 
+//13.126.36.205:5000 
+//private url = 'http://13.126.36.205:5000 ';
+private socket;
+/* 1883 */
+title = 'app';
+sendMessage(message){
+  //this.socket.emit('add-message', message);    
+}
+
+getMessages() {
+ /*  let observable = new Observable(observer => {
+    this.socket = io(this.url);
+    this.socket.on('message', (data) => {
+      observer.next(data);    
+    });
+    return () => {
+      this.socket.disconnect();
+    };  
+  })     
+  return observable; */
+  let observable = new Observable(observer => {
+/*     this.socket = io(this.url);
+    this.socket.on('message', (data) => {
+    
+      console.log(data);
+      observer.next(data);
+     
+    });
+    return () => {
+      this.socket.disconnect();
+    };   */
+    //this.socket = this.injectData.getSocket_5000();
+      //io.connect('http://13.126.36.205:5000');
+    //this.socket.on('connect', function(){
+    //  console.log("IO Connected");
+    //  this.socket.on('mqtt', function (msg)  {
+        
+    //      console.log(msg.topic + msg.payload);
+          //observer.next(msg);
+         
+    //    });
+    /*   this.socket.on('mqtt',function(msg){
+        console.log(msg.topic + msg.payload);
+      }); */
+   // });
+  })     
+ 
+  return observable;
+}  
+
+gensock(){
+ // this.socket = io.connect('http://localhost:5000');
+ // this.socket.on('connect', function(){
+  //  console.log("IO Connected");
+  //  this.socket.on('mqtt',function(msg){
+  //    console.log(msg.topic + msg.payload);
+  //  });
+  //});
+}
+
+
+getDriver(UID_For_Drivers) {
+  return this.http.get(this.dev_url + "/driver/getDrivers?userid="+UID_For_Drivers)
+      .map(data => {
+          data.json();
+         
+           var devices = data;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+getImagePath(uid){
+  return this.http.get(this.dev_url+'/users/shareProfileImage?uid=' +uid)
+    .map(res=>res.json());
+}
+
+getVehicleType(id) {
+  return this.http.get(this.dev_url + "/vehicleType/getVehicleTypes?user="+id)
+      .map(data => {
+          data.json();
+         
+           var devices = data;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+
+
+getDeviceModel(s,l,i) {
+  var dynamicurl = this.dev_url + "/deviceModel/getDeviceModel?skip="+s + '&limit='+l;
+  if(i != undefined){
+    var input  = i;
+    dynamicurl += "&input="+ i ; 
+  }
+  
+  return this.http.get(dynamicurl)
+      .map(data => {
+          data.json();
+         
+           var devices = data;
+          /* console.log("Devices: ",temp);  */
+          return data.json();
+  });
+}
+
+addDeviceModel(newDeviceModel){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  + '/deviceModel/addDeviceModel',newDeviceModel, {headers:headers})
+   .map(res => res.json()
+
+  );
+}
+
+
+//url trigger of add device here
+
+
+//https://www.oneqlik.in/driver/addDriverDetails
+
+addDriver(newDriver){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  + '/driver/addDriverDetails',newDriver, {headers:headers})
+   .map(res => res.json()
+
+  );
+}
+
+addVehicleType(newVehicleModel){
+  var headers = new Headers();
+  headers.append('Content-Type','application/json');
+  return this.http.post(this.dev_url  + '/vehicleType/addvehicleType',newVehicleModel, {headers:headers})
+   .map(res => res.json()
+
+  );
+}
+
+
+updateVehType(vehtypeObj){
+  console.log(vehtypeObj);
+  return this.http.post(this.dev_url  + '/vehicleType/updatevehicleType',vehtypeObj)
+  .map(res => res.json());
+
+}
+
+
+deleteVehicleType(data){
+  return this.http.get(this.dev_url +"/vehicleType/deleteVehicleType?_id="+data)
+   .map(res => {
+    // console.log(res); 
+    return res});
+}
+
+
+
+deleteDeviceModel(data){
+  
+    return this.http.get(this.dev_url +"/deviceModel/deleteDeviceModel?_id="+data)
+     .map(res => {
+      // console.log(res); 
+      return res});
+  
+   
+  }
+
+  editDevModel(devModel){
+    return this.http.post(this.dev_url + '/deviceModel/updateDeviceModel',devModel)
+    .map(res => res.json())
+  }
+
+  deleteDriver(data){
+   
+      return this.http.get(this.dev_url +"/driver/deleteDriver?_id="+data)
+       .map(res => {
+        // console.log(res); 
+        return res});   
+    }
+
+    // http://localhost:3000/trackRouteMap/updateRoute_map
+
+    updateRouteMap(updateMap){
+
+      return this.http.post(this.dev_url + "/trackRouteMap/updateRoute_map", updateMap)
+        .map(res =>res.json());
+
+    }
+
+
+    vehicleUtilization(role,userid){
+      return this.http.get(this.dev_url+"/gps/vehicleUtilizationPercentage?role="+role+"&id="+userid)
+      .map(res => res.json());
+
+    }
+
+
+    xlStoppageReport(Fdate,tdate,uId,vName){
+      return this.http.get(this.dev_url+"/stoppage/stoppageXlReport?from_date="+Fdate+"&to_date="+tdate+"&_u="+uId+"&vname="+vName)
+        .map(res=> res.json());
+    }
+
+    getCurrencies(){
+      return this.http.get('https://openexchangerates.org/api/currencies.json')
+        .map(res=> res.json());
+    }
+
+
+
+    xlRVReport(f,t,u){
+      return this.http.get(this.dev_url+"/notifs/RouteVoilationXlReport?from_date="+f+"&to_date="+t+"&_u="+u)
+      .map(res=>res.json());
+    }
+
+    ignXLreport(f,t,vn,user){
+      return this.http.get(this.dev_url+"/notifs/IgnitionXlReport?from_date="+f+"&to_date="+t+"&vname="+vn+"&_u="+user)
+      .map(res => res.json());  
+    }
+
+    public post(url:string,data:any,isJson=true){
+      $("#loading").css({"visibility": "visible"});
+  
+      if(isJson){
+        // this.dev_url+url,data
+        return this.http.post(this.dev_url+url,data).map((res : Response) => {
+          $("#loading").css({"visibility": "hidden","background":"red"});
+          return res.json();
+        })
+      }else{
+        // this.dev_url+url,data
+        return this.http.post(this.dev_url+url,data).map((res : Response) => {
+          $("#loading").css({"visibility": "hidden"});
+          return res;
+        })
+      }
+    }
+
+    OSXLreport(fd,td,vn,u){
+      return this.http.get(this.dev_url+"/notifs/overspeedXlReport?from_date="+fd+"&to_date="+td+"&_u="+u+"&vname="+vn)
+      .map(res => res.json());  
+    }
+
+    gettripByDevice(find){
+      return this.http.get(this.dev_url + "/user_trip/getLastTrip?tripInfo=all_trip&user=" + find.user  +"&device=" + find.device+ "&fromDate=" + find.fromDate + "&toDate=" + find.toDate + "&skip=" + 1 + "&limit=" + 10)
+      .map(res=>res.json());
+      
+    }
+
+    getPOI(data){  
+      return this.http.get(this.dev_url + "/poi/getPois?user=" + data)
+      .map(res => {
+      // console.log(res); 
+      return res.json()});
+      }
+
+      sharedData:any;
+      setService(data){
+      this.sharedData = data;
+      }
+      getService(){
+      return this.sharedData;
+      }
+
+
+      getAddressPrefrence(){
+      var reportAddressPref =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).report_address_preference;  
+      return reportAddressPref ; 
+      }
+     
+      getGroupById(groupId){
+      return this.http.get(this.dev_url + "/groups/getGroupById?_id="+groupId)
+      .map(res => res.json());
+      }
+
+        public get(url:string,isJson=true,loader=true){
+    if(loader==true)
+    $("#loading").css({"visibility": "visible"});
+    if(isJson)
+    return this.http.get(this.dev_url+url).map((res : Response) => {
+      if(loader==true)
+      $("#loading").css({"visibility": "hidden"});
+      return res.json();
+    })
+    else
+    return this.http.get(this.dev_url+url).map((res : Response) => {
+      $("#loading").css({"visibility": "hidden"});
+      return res;
+    })
+  }
+
+  changeMessage(message: string) {
+    this.messageSource.next(message)
+  }
+
+  getDetails(url){
+    return this.http.get(this.dev_url2+url)
+  .map(res => res.json());
+  }
+
+  addressTranslationInHindi(data){
+    return this.http.post(this.dev_url + '/users/translate', data)
+  .map(res => res.json()) ;
+  }
+
+  searchByImei(data){
+    return this.http.post(this.dev_url+'/devices/searchByIMEI',data) .map(res => res.json()) ;
+  }
+
+  "---------------------------New Method for calculate area------------------------------"
+
+  calculateArea(data){
+    return this.http.get(this.dev_url+'/hulls?imei='+data.imei+'&f='+data.f+'&t='+data.t).map(res => res.json()) ;
+  }
+
+  getVehicleList(data){
+    if(data.supAdm){
+      return this.http.get(this.dev_url+'/devices/getDeviceList?deviceType='+data.deviceType+'&fromDate='+data.f+'&toDate='+data.t+'&licenceType='+data.licenceType+'&supAdm='+data.supAdm).map(res => res.json()) ;
+    }else{
+
+      return this.http.get(this.dev_url+'/devices/getDeviceList?deviceType='+data.deviceType+'&fromDate='+data.f+'&toDate='+data.t+'&licenceType='+data.licenceType).map(res => res.json()) ;
+    }
+  //   licenceType:that.licenceStatus,
+  //  supAdm:that.supAdm
+  }
+
+  addMultipleTolls(data){
+    return this.http.post(this.dev_url+'/toll/multipleToll',data)
+    .map(res => res.json()) ;
+  }
+  addToll(data){
+    return this.http.post(this.dev_url+'/toll/add',data)
+    // .map(res => res.json()) ;
+  }
+
+   getTolls(){
+    return this.http.get(this.dev_url+'/toll/get')
+    .map(res => res.json()) ;
+  }
+
+  deleteToll(data){
+    return this.http.post(this.dev_url+'/toll/delete',data)
+  }
+  updateToll(data){
+    return this.http.post(this.dev_url+'/toll/update',data)
+    // .map(res => res.json()) ;
+  }
+
+  getSuperAdminList(){
+    return this.http.get(this.dev_url+'/users/getSuperAdminList').map(res => res.json()) ;
+  }
+  getApprovalAddressList(id){
+    return this.http.get(this.dev_url+'/googleAddress/addressList?id='+id).map(res => res.json()) ;
+  }
+  getRenewalHistory(id){
+    return this.http.get(this.dev_url+'/devices/renewalHistory?id='+id).map(res => res.json()) ;
+  }
+   addMultipleInventory(data){
+    return this.http.post(this.dev_url+'/Device_inventory/addMultiple',data)
+    .map(res => res.json()) ;
+  }
+   transferInventory(data){
+    return this.http.post(this.dev_url+'/Device_inventory/transfer',data)
+    .map(res => res.json()) ;
+  }
+  getInventoryByStatus(){
+    return this.http.get(this.dev_url+'/Device_inventory/getInventoryByStatus').map(res => res.json()) ;
+  }
+  getInventoryCount(id){
+    return this.http.get(this.dev_url+'/Device_inventory/getInventoryCount?user='+id).map(res => res.json()) ;
+  }
+  changeKycStatus(data){
+    return this.http.post(this.dev_url+'/users/changeKYCStatus',data)
+    .map(res => res.json()) ;
+  }
+  
+//   addMultipleDevice(deviceUploadObject){
+
+//   return this.http.post(this.dev_url  + '/devices/uploadDevice',deviceUploadObject)
+//   .map(res => res.json())
+// }
+
+imageUrlToBase64(url: string) {
+
+  const httpOptions = {
+      headers: new Headers({
+        'Content-Type': 'application/json'
+      }),
+      observe: 'response' as 'body'
+    };
+    return this.http.get(url, httpOptions).pipe(
+      take(1),
+      map((arrayBuffer:any) =>
+        btoa(
+          Array.from(new Uint8Array(arrayBuffer))
+          .map((b) => String.fromCharCode(b))
+          .join('')
+        )
+      ),
+    )
+
+  // return this.http.get(urL, {
+  //     observe: 'body',
+  //     responseType: 'arraybuffer',
+  //   })
+  //   .pipe(
+  //     take(1),
+  //     map((arrayBuffer) =>
+  //       btoa(
+  //         Array.from(new Uint8Array(arrayBuffer))
+  //         .map((b) => String.fromCharCode(b))
+  //         .join('')
+  //       )
+  //     ),
+  //   )
+}
+
+  
+}
+//http://localhost:3000/notifs/overspeedXlReport?from_date=2018-01-24T11:37:08.673Z&to_date=2018-01-24T11:37:08.673Z&_u=5a27deca4468572f678e2d91
+//http://localhost:3000/notifs/IgnitionXlReport?from_date=2018-04-02T07:37:10.109Z&to_date=2018-05-17T07:37:10.109Z&vname=MH 08 E 0625&_u=5ae09545f01a5576cf6c0e1b
+ // http://localhost:3000/stoppage/stoppageXlReport?from_date=2018-04-06T13:26:02.444Z&to_date=2018-04-06T13:26:02.444Z&_u=5a27deca4468572f678e2d91&vname=5a46086f3ab69a449498bc21
+
diff --git a/src/app/contact.ts b/src/app/contact.ts
new file mode 100644
index 0000000..bf8c861
--- /dev/null
+++ b/src/app/contact.ts
@@ -0,0 +1,11 @@
+export class Contact{
+    _id?: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    password: string;
+    org_name: string;
+    phone: string;
+    otp:string;
+  
+}
diff --git a/src/app/contactus.ts b/src/app/contactus.ts
new file mode 100644
index 0000000..ff84258
--- /dev/null
+++ b/src/app/contactus.ts
@@ -0,0 +1,5 @@
+export class Contactus{
+    title: string;
+    msg: string;
+    email: string;
+}
diff --git a/src/app/costumer-support/costumer-support.component.html b/src/app/costumer-support/costumer-support.component.html
new file mode 100644
index 0000000..fe17187
--- /dev/null
+++ b/src/app/costumer-support/costumer-support.component.html
@@ -0,0 +1,49 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+    <div class="headerStyle">
+        <span>{{'COSTUMER INQUIRY' | translate}}</span>
+      </div>
+  <div class="filterDiv">
+    <div class="row" style="margin-bottom: 20px;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">  
+        <button *ngIf="isOperator" md-tooltip="{{'Add Device' | translate}}" style="border:1px solid transparent;float:left; background-color: transparent;" (click)="adddev()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>     
+        <div style="display: inline-flex; width: 45%;padding-bottom: 3px;">
+        
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >  
+            <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >
+        
+        </div>
+        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;" (click)="inquiryList()"> {{'Get Detail' | translate}} </button>
+        <button md-raised-button style="width: 190px; background: #1d8216; color: white;" (click)="exportExcel()">{{'Export To Excel' | translate}}</button>
+        <!-- <div>
+          
+        </div> -->
+      </div>
+        <!-- <div class="col-4" style="text-align: center;margin-top: 30px;">
+         
+          </div>  -->
+          <!-- <div class="col-4" style="margin-top: 30px;">
+         
+          </div>   -->
+      </div>
+    </div>
+    <div>
+      <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+        <thead style="background-color:#A2C523;color: white;">
+            <tr>
+                <th style="text-align:center;">Inquiry Date</th>
+                <th style="text-align:center;">Customer Name</th>
+                <th style="text-align:center;">Phone</th>
+                <th style="text-align:center;">Email</th>
+                <th style="text-align:center;">Message</th>
+                <th style="text-align:center;">Assigned To</th>
+                <th style="text-align:center;">Role</th>
+                <th style="text-align:center;">Status</th>                    
+            </tr>
+        </thead>
+    </table>
+    </div>
+  </div>
+
diff --git a/src/app/costumer-support/costumer-support.component.scss b/src/app/costumer-support/costumer-support.component.scss
new file mode 100644
index 0000000..ceed4f8
--- /dev/null
+++ b/src/app/costumer-support/costumer-support.component.scss
@@ -0,0 +1,36 @@
+
+    .container-fluid .headerStyle{
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        font-weight: 500;
+        background: white;
+        color: black;
+        border-radius: 4px;
+    }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/costumer-support/costumer-support.component.spec.ts b/src/app/costumer-support/costumer-support.component.spec.ts
new file mode 100644
index 0000000..eeb5eb0
--- /dev/null
+++ b/src/app/costumer-support/costumer-support.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CostumerSupportComponent } from './costumer-support.component';
+
+describe('CostumerSupportComponent', () => {
+  let component: CostumerSupportComponent;
+  let fixture: ComponentFixture<CostumerSupportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CostumerSupportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CostumerSupportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/costumer-support/costumer-support.component.ts b/src/app/costumer-support/costumer-support.component.ts
new file mode 100644
index 0000000..112c5c5
--- /dev/null
+++ b/src/app/costumer-support/costumer-support.component.ts
@@ -0,0 +1,330 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import * as moment from 'moment';
+declare var $: any, DataTable: any;
+
+@Component({
+  selector: 'app-costumer-support',
+  templateUrl: './costumer-support.component.html',
+  styleUrls: ['./costumer-support.component.scss']
+})
+export class CostumerSupportComponent implements OnInit {
+  from_date: Date;
+  to_date: Date;
+  bsConfig: Partial<BsDatepickerConfig>;
+  tabelObj: any;
+  useridd: any;
+  supadm: any;
+  isOperator: boolean = false;
+  supAdminId: any;
+  newVar:any;
+  newVar1:any;
+  colorTheme = 'theme-dark-blue';
+
+  inquiryStatus = ['OPEN','IN PROGRESS', "CLOSED"];
+  inquiryRole = ['ADMIN','DEALER', "ORGANISATION"];
+  dtOptions:any={};
+  constructor(public contactService: ContactService, private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) { 
+    this.from_date = new Date();
+    this.from_date.setHours(0,0,0,0);
+
+    this.to_date = new Date();
+
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+  }
+
+  ngOnInit() {
+    this.testTable();
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+    this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.isOperator = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOperator;
+    this.supAdminId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+  }
+
+  
+  inquiryList() {
+    console.log(this.from_date);
+    console.log(this.to_date);
+    this.tabelObj.draw();
+    
+}
+
+testTable() {
+  const that = this;
+  $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+          "serverSide": true,
+          "processing": true,
+          "searching": false,
+          "order": [[3, "desc"]],
+          "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "fields" :[{label :"Vehicle Number",name : "Device_Name"}],
+          scrollX: true,
+          ajax: (dataTablesParameters: any, callback) => {
+              dataTablesParameters.op = {};
+              dataTablesParameters.select = [];
+              dataTablesParameters.find = {};
+          
+              // if(that.supadm == true){
+              //     dataTablesParameters.find['superAdmin'] = that.useridd;
+              // }
+          
+              // if(that.isOperator == true){
+                //   dataTablesParameters.find['user'] = that.useridd;
+              // }
+              
+              dataTablesParameters.find['assigned_to'] = that.useridd;
+              console.log("dataTablesParameters=>",dataTablesParameters);
+              if (that.from_date) {
+                  dataTablesParameters.find['posted_on'] = dataTablesParameters.find['posted_on'] ? dataTablesParameters.find['posted_on'] : {};
+                  dataTablesParameters.find['posted_on']['$gte'] = {
+                    _eval: 'date',
+                    value: new Date(that.from_date).toISOString()
+                  }
+                };
+                // }
+                if (that.to_date) {
+                  dataTablesParameters.find['posted_on'] = dataTablesParameters.find['posted_on'] ? dataTablesParameters.find['posted_on'] : {};
+                  dataTablesParameters.find['posted_on']['$lte'] = {
+                    _eval: 'date',
+                    value: new Date(that.to_date).toISOString()
+                  };
+                }
+            
+              dataTablesParameters.columns = [
+              {data : "_id"},
+              {data : "superAdmin"},
+              {data : "dealer"},
+              {data : "message"},
+              {data : "assigned_to"},
+              {data : "assigned_to.first_name"},
+              {data : "assigned_to.last_name"},
+              {data : "support_status"},
+              {data : "posted_on"},
+              {data :"posted_by"},
+              {data :"posted_by.first_name"},
+              {data : "posted_by.last_name"},
+              {data :"posted_by.phone"},
+              {data : "posted_by.email"},
+              {data : "role"},
+              {data : "user"}
+              ] 
+              // dataTablesParameters.find.user = that.useridd;
+
+              var suburl = "";
+              suburl += "/customer_support/getCustomerQuery";
+              that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {  
+                  callback(resp);
+              }, err => {
+
+                  // console.log(err.status);
+              });
+          },
+          "rowCallback": function(row: Node, data: any | Object, index: number){  
+            $('#roleChange', row).bind('change', function (ele) {
+              var selectedRole = $($(row).children()[6]).children().val();
+              console.log("selectedRole=>",selectedRole);
+              console.log('ticketRoleStat=>',data);
+              var role_update = {
+                id: data._id,
+                role : selectedRole,
+                user : data.user,
+              }
+
+              var suburl = "";
+              suburl += "/customer_support/updateCustomerQuery";
+              that.contactService.post(suburl,role_update).subscribe(res=>{
+                console.log(res);
+              },err=>{
+                console.log(err);
+              })
+            })
+
+            $('#ticketStatChange', row).bind('change', function (ele) {
+              var selectedStatus = $($(row).children()[7]).children().val();
+              console.log("selectedStatus=>",selectedStatus);
+           
+              var role_update = {
+                id: data._id,   
+                ticketStatus : selectedStatus
+              }
+              
+
+              
+
+
+              var suburl = "";
+              suburl += "/customer_support/updateCustomerQuery";
+              that.contactService.post(suburl,role_update).subscribe(res=>{
+                console.log(res);
+              },err=>{
+                console.log(err);
+              })
+            
+            })
+              // $('#edit', row).bind('click', () => {    
+              //     var editData = data;  
+              //     editData.actionId= "edit";  
+              //    localStorage.setItem("invantoryObject",JSON.stringify(editData));
+              //     that.router.navigateByUrl('deviceEntry');
+        
+              // });    
+            },
+
+          "columns": [
+              {           
+                  "data": "posted_on",
+                  // "searchable" : true,
+                  "render": function (data, type, row) {
+                      var system_date = new Date(data);
+                      return data ? (moment(system_date).format('dddd,ll,LTS')) : "";
+                  }
+              },
+              {
+                  
+                  "data": "posted_by",
+                  // "searchable" : true,
+                  render: function (data, type, row) {
+                      // console.log("whatdataishere=>",data);
+                      var fName = data.first_name?data.first_name:"";
+                      var lName = data.last_name?data.last_name:"";
+                      return fName  + " " + lName;
+                  }
+              },
+              {
+                  
+                "data": "posted_by",
+                // "searchable" : true,
+                render: function (data, type, row) {
+                    // console.log("whatdataishere=>",data);
+                   
+                    return data.phone?data.phone : "";
+                }
+            },
+            {
+                  
+              "data": "posted_by",
+              // "searchable" : true,
+              render: function (data, type, row) {
+                 // console.log("whatdataishere=>",data);
+                 
+                  return data.email?data.email : "";
+              }
+          },
+              {
+                  
+                  "data": "message",
+                  // "searchable" : true,
+                  render: function (data, type, row) {
+                      return data ? data : "";
+                  }
+              },
+              {       
+                  "data": "assigned_to",
+                  // "searching" : true,
+                  render: function (data, type, row) {
+                      // console.log("AssignedData=>",data);
+                      var frstName = data.first_name? data.first_name : "";
+                      var lstName = data.last_name ? data.last_name : "";
+                      return frstName + " "+ lstName;
+                  }
+              },   
+              {       
+                "data": "role",
+                // "searching" : true,
+                render: function (data, type, row) {
+              
+                  var $select1 = $("<select id='roleChange'></select>", {
+                    "id": row[0]+"start",
+                    "value": data
+                });
+                $.each(that.inquiryRole, function(l,m){
+           
+                    var $option1 = $("<option></option>", {
+                        "text": m,
+                        "value": m
+                    });
+                    if(data === m){
+                        $option1.attr("selected", "selected")
+                    }
+                    $select1.append($option1);
+
+                });
+
+                return $select1.prop("outerHTML");
+                }
+            },              
+              {
+                  
+                  "data": "support_status",
+                  // "searchable" : true,
+                  render: function (data, type, row) {    
+                        var $select = $("<select id='ticketStatChange'></select>", {
+                          "id": row[0]+"start",
+                          "value": data
+                      });
+                      $.each(that.inquiryStatus, function(k,v){       
+                          var $option = $("<option></option>", {
+                              "text": v,
+                              "value": v
+                          });
+                          if(data === v){
+                              $option.attr("selected", "selected");
+                              $option.attr("disabled", "disabled")
+                          }
+                          $select.append($option);
+                      });
+                      console.log($select);
+                      return $select.prop("outerHTML");
+                  }
+              },                                 
+          //     {
+          //         "data":null,
+                 
+          //         "render":function(data,type,row){                
+          //           return '<button id="edit" type="button" class="btn btn-primary" style="background:blue;border:0px;">Edit</button>'
+
+          //     }
+          // } ,
+          ],        
+      });
+  });
+
+}
+
+tab:any;
+
+exportExcel() {
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    this.tab = document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+    // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+
+}
diff --git a/src/app/dash/dash.component.css b/src/app/dash/dash.component.css
new file mode 100644
index 0000000..2e2031f
--- /dev/null
+++ b/src/app/dash/dash.component.css
@@ -0,0 +1,65 @@
+body {
+  text-align: center;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.sebm-google-map-container {
+  height: 218px;
+}
+mwl-gauge {
+  width: 233px;
+  height: 300px;
+  display: block;
+  padding: 10px;
+}
+mwl-gauge > .gauge > .dial {
+  stroke: #eee;
+  stroke-width: 20;
+  fill: rgba(0,0,0,0);
+}
+mwl-gauge > .gauge > .value {
+  stroke: rgb(47, 227, 255);
+  stroke-width: 20;
+  fill: rgba(0,0,0,0);
+
+}
+mwl-gauge > .gauge > .value-text {
+  fill: rgb(47, 227, 255);
+  font-family: sans-serif;
+  font-weight: bold;
+  font-size: 10em;
+ 
+}
+.mwlResizable {
+  box-sizing: border-box;
+  background-color: red;
+}
+#my-div{
+  margin: 0 auto;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+#re1{
+  resize: both;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+#m{
+  width:326px;
+  height:180px;
+/*   background-color: red; */
+}
+#n{
+  width:852px;
+  height:269px;
+  /* background-color:yellow; */
+  resize: both;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+#o{
+  resize: both;
+  overflow: auto;
+
+}
\ No newline at end of file
diff --git a/src/app/dash/dash.component.html b/src/app/dash/dash.component.html
new file mode 100644
index 0000000..d116517
--- /dev/null
+++ b/src/app/dash/dash.component.html
@@ -0,0 +1,208 @@
+<md-card>
+        <form class="form-group"  #lgForm="ngForm">  
+              <!--   <md-select name="typdev" placeholder="Devices" [(ngModel)]="new">
+                        <md-option *ngFor="let food of foods" [value]="food" >
+                          {{ food.viewValue }}
+                        </md-option>
+                      </md-select>
+                <md-select name="typde" placeholder="Graph Type"  [(ngModel)]="neww">
+                        <md-option *ngFor="let foodd of foodss" [value]="foodd" >
+                          {{ foodd.viewValuee }}
+                        </md-option>
+                      </md-select>
+                      <md-select name="typdev" placeholder="X-Axis" [(ngModel)]="newww">
+                            <md-option *ngFor="let fooddd of foodsss" [value]="fooddd" >
+                              {{ fooddd.viewValueee }}
+                            </md-option>
+                          </md-select>
+                          <md-select name="typdev" placeholder="Y-Axis" [(ngModel)]="new">
+                                <md-option *ngFor="let food of foo" [value]="foo" >
+                                  {{ food.viewValue }}
+                                </md-option>
+                              </md-select> -->
+                         <!--  <md-select name="typdevv" placeholder="Y-Axis" style="width:40%;margin-top:-8%;" [(ngModel)]="newwww">
+                                <md-option *ngFor="let foodddd of foodssss" [value]="foodddd" >
+                                  {{ foodddd.viewValuee }}
+                                </md-option>
+                              </md-select> -->
+          <h5 style="float:left;">Select your Device - </h5><br>
+   <md-select name="typdev" placeholder="Devices" 
+   style="width:40%;margin-top:-8%;" [(ngModel)]="new">
+        <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+        {{ food.viewValue }}
+        </md-option>
+    </md-select> <br>
+    <h5 style="float:left;" >Select Your graph axis - </h5><br>
+    
+        <md-checkbox  *ngIf="new == 'GPS'" name="che1" [(ngModel)]="che1">Latitude</md-checkbox>
+        <md-checkbox  *ngIf="new =='GPS'" name="che2" [(ngModel)]="che2">Longitude</md-checkbox>
+        <md-checkbox *ngIf="new == 'Temprature'" name="che3" [(ngModel)]="che3">Celcius</md-checkbox>
+        <md-checkbox *ngIf="new == 'Temprature'" name="che4" [(ngModel)]="che4">Fahrenheit</md-checkbox>
+        <md-checkbox *ngIf="new == 'Temprature'" name="che5" [(ngModel)]="che5">Time</md-checkbox>
+        <md-checkbox *ngIf="new == 'Humidity'" name="che3" [(ngModel)]="che3">Percentage</md-checkbox>
+        <md-checkbox *ngIf="new == 'Humidity'" name="che4" [(ngModel)]="che4">Time</md-checkbox>
+     <br>
+      
+        <h5 style="float:left;">Select Graph Type - </h5><br>
+        <md-select name="typdevv" placeholder="Graphs" style="width:40%;margin-top:-8%;" [(ngModel)]="neww">
+                <md-option   *ngFor="let foodd of foodss" [value]="foodd.viewValuee" >
+                   
+                     {{ foodd.viewValuee }}
+                  
+                </md-option>
+              </md-select><br>
+              <input type="submit" class="btn btn btn-success" style="margin-top:4%;" value="Generate Graph" (click)="gengraph()"  (click)="this.lgForm.reset();" />
+              <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+            </form>
+ <!--        
+</md-card> 
+
+        
+      
+
+          <div [dragula]='"first-bag"'>
+           
+                <div>
+                <sebm-google-map
+                [latitude]="lat"
+                [longitude]="lng">
+                <sebm-google-map-marker
+                [latitude]="lat"
+                [longitude]="lng">
+                </sebm-google-map-marker>
+                </sebm-google-map> 
+                </div>
+                <div >
+                    <mwl-gauge
+                    [max]="500"     
+                    [dialStartAngle]="-90"
+                    [dialEndAngle]="-90.001"
+                    [value]=30 
+                    [animated]="true"
+                    [animationDuration]="1">
+                    </mwl-gauge>
+        
+                        
+                </div>
+          </div>
+        
+   <br><br><br><br><br><br><br><br><br><br><br><br><br> -->
+
+<md-grid-list cols="2" rowHeight="2:1">
+
+    <div [dragula]='"first-bag"'>
+        <div *ngIf="show">
+             <div>
+                <h5>Current Location(GPS) -  </h5>  
+             <sebm-google-map
+             [latitude]="lat"
+             [longitude]="lng">
+             <sebm-google-map-marker
+             [latitude]="lat"
+             [longitude]="lng">
+             </sebm-google-map-marker>
+             </sebm-google-map> 
+             </div></div>
+             <div >
+                <div *ngIf="show1"> 
+                    <h5>Temprature(Gauge Chart) -  </h5>   
+                    <mwl-gauge
+                    [max]="500"     
+                    [dialStartAngle]="-90"
+                    [dialEndAngle]="-90.001"
+                    [value]=temp
+                    [animated]="true"
+                    [animationDuration]="1">
+                    </mwl-gauge></div>
+     
+                     
+             </div>
+             <div *ngIf="show2">
+                
+        <div class="chart">
+            <h5>Temprature(Line Chart) -  </h5>   
+            <div class="chart">
+                <canvas baseChart
+                  [datasets]="datasets"
+                  [labels]="labels"
+                  [options]="options"
+                  [chartType]="'line'" 
+                  (click)="clickData_CorrectAnimation()">
+                </canvas>
+              
+              </div>
+          
+          </div></div>
+          <div *ngIf="show4">
+              <h5>Humidity(Gauge Chart) -  </h5>   
+              <mwl-gauge
+              [max]="500"     
+              [dialStartAngle]="-90"
+              [dialEndAngle]="-90.001"
+              [value]=humid
+              [animated]="true"
+              [animationDuration]="1">
+              </mwl-gauge>
+
+
+  </div>
+          <div *ngIf="show3">
+        <h5>Humidity(Line Chart) -  </h5>     
+      <div class="chart">
+          <canvas baseChart
+            [datasets]="datasets"
+            [labels]="labels"
+            [options]="options"
+            [chartType]="'line'" 
+            (click)="clickData_CorrectAnimationnn()">
+          </canvas>
+        
+        </div></div>
+       </div>
+      <!--   <md-grid-tile><div *ngIf="show">
+                <md-card style="width:376px;height:276px">
+                
+                        <h5 align="center">Current Location</h5>
+                        <sebm-google-map
+                        [latitude]="lat"
+                        [longitude]="lng">
+                        <sebm-google-map-marker
+                        [latitude]="lat"
+                        [longitude]="lng">
+                        </sebm-google-map-marker>
+                        </sebm-google-map>    
+                </md-card><br><br><br><br><br><br>
+                </div></md-grid-tile>
+        <md-grid-tile><div *ngIf="show1">
+     
+                <h5 align="center">Temprature</h5>
+                <p align="center">
+                <mwl-gauge
+                [max]="500"     
+                [dialStartAngle]="-90"
+                [dialEndAngle]="-90.001"
+                [value]=temp 
+                [animated]="true"
+                [animationDuration]="1">
+                </mwl-gauge></p>
+       
+        </div></md-grid-tile>
+        <md-grid-tile>    
+                <div *ngIf="show2">
+                    
+            <div class="chart">
+                <canvas baseChart
+                  [datasets]="datasets"
+                  [labels]="labels"
+                  [options]="options"
+                  [chartType]="'line'" 
+                  (click)="clickData_CorrectAnimation()">
+                </canvas>
+              
+              </div></div></md-grid-tile>
+        <md-grid-tile>
+
+
+        </md-grid-tile> -->
+      </md-grid-list>   
+
diff --git a/src/app/dash/dash.component.spec.ts b/src/app/dash/dash.component.spec.ts
new file mode 100644
index 0000000..08bd492
--- /dev/null
+++ b/src/app/dash/dash.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashComponent } from './dash.component';
+
+describe('DashComponent', () => {
+  let component: DashComponent;
+  let fixture: ComponentFixture<DashComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dash/dash.component.ts b/src/app/dash/dash.component.ts
new file mode 100644
index 0000000..4a300fb
--- /dev/null
+++ b/src/app/dash/dash.component.ts
@@ -0,0 +1,243 @@
+import { Component, OnInit, ViewChild, Input,Output, EventEmitter  } from '@angular/core';
+import {Observable} from 'rxjs/Rx';
+import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { BaseChartDirective } from 'ng2-charts/ng2-charts';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import {ContactService} from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+//import {ResizeEvent} from 'angular-resizable-element';
+import {ResizeEvent} from 'angular2-resizable';
+
+@Component({
+  selector: 'wizard-step',
+  templateUrl: './dash.component.html',
+  styleUrls: ['./dash.component.css'],
+  providers: [ContactService],
+})
+
+export class DashComponent implements OnInit {
+  @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
+  radio1:any;
+  che1:any;
+  che2:any;
+  che3:any;
+  che4:any;
+  che5:any;
+  lng:any;
+  temp:any;
+  lat:any;
+  temp1:any;
+  show: boolean;
+  show1: boolean;
+  show2: boolean;
+  show3: boolean;
+  show4: boolean;
+  typdev :any;
+  new:any;
+  neww:any;
+  temp2:any;
+  temp3:any;
+  temp4:any
+  humid:any;
+  // private dataUrl = 'http://13.126.36.205:3000/mos/getMosChannel'; 
+  foo = [
+    {value: 'Latitude', viewValue: 'Latitude'},
+    {value: 'Time', viewValue: 'Time'},
+    
+  ];
+  foods = [
+    {value: 'GPS', viewValue: 'GPS'},
+    {value: 'Temprature', viewValue: 'Temprature'},
+    {value: 'Humidity', viewValue: 'Humidity'},
+  ];
+  foodss = [
+    {value: 'Map', viewValuee: 'Map'},
+    {value: 'Line', viewValuee: 'Line'},
+    {value: 'Gauge', viewValuee: 'Gauge'},
+  ];
+  foodsss = [
+    {value: 'Celcius', viewValueee: 'Celcius'},
+    {value: 'Fahrenheit', viewValueee: 'Fahrenheit'},
+    {value: 'Latitude', viewValueee: 'Latitude'},
+  ];
+  f = [
+    {value: 'Time', viewVal: 'Time'},
+    {value: 'Longitude', viewVal: 'Longitude'},,
+  ];
+
+
+ 
+  constructor(private contactService:ContactService, private activatedRoute: ActivatedRoute,private router: Router,private _flashMessagesService: FlashMessagesService) {
+    
+   }
+   _lineChartData:any;
+   public info: string;
+   private prevDatasets;
+   private datasets = [
+     {
+       label: "Humidity",
+       data: [0, 0, 0, 0, 0, 0]
+     }
+   ];
+ 
+   private labels = ["","","","","",""];
+
+ 
+   private options = {
+     scales: {
+       yAxes: [{
+         ticks: {
+           beginAtZero: false,
+           max: 500,
+           min: 0
+         }
+       }]  
+     }
+   };
+   
+    change() {
+    
+     this.datasets = [{
+       label: "Humidity",
+       data: []
+     }];
+     
+     this.labels = [];
+   }
+    
+   gengraph(){
+    //console.log(); 
+   
+     if(this.new === "GPS" && this.che3==null || this.che4==null || this.che3==false || this.che4==false )
+    {
+      if(this.che1==true && this.che2==true && this.new === "GPS" && this.neww=== "Map")
+      {
+        // console.log("GPS working...");
+        this.show = true;
+        this.lng =73.8567;
+        this.lat =  18.5204;
+        
+      }
+    /*   else{
+        console.log("Wrong Credantial for GPS")
+        this._flashMessagesService.show('Wrong Credantial for GPS', { cssClass: 'alert-danger', timeout: 2000 });
+        
+      } */
+    } 
+     if(this.new === "Temprature")
+    {
+      if(this.che3==true || this.che4==true)
+      {
+        if(this.neww === "Gauge")
+        {
+          if(this.che3==true){
+            // console.log("Temp Cel working...")
+            //this._flashMessagesService.show('Temprature in Celcius', { cssClass: 'alert-warning', timeout: 2000 });
+            
+            this.show1 = true;
+            this.temp=40;
+
+          }
+          else{
+           // this._flashMessagesService.show('Temprature in Farenheit', { cssClass: 'alert-warning', timeout: 2000 });            
+            this.show1 = true;
+            this.temp1= 40;
+            this.temp = this.temp1 * 1.8 +32;
+          }
+        }
+        else if(this.neww === "Line" && this.che5 == true)
+        {
+          if(this.che3==true){
+            // console.log("Temp Cel2 working...")
+            this.show2 = true;
+            //this.temp=40;
+            this.clickData_CorrectAnimation()
+
+          }
+          else{
+            this.show2 = true;
+            this.temp1= 40;
+            this.clickData_CorrectAnimationn()
+            
+          }
+        }
+      }
+      else{
+        // console.log("Wrong Credantial for Temp")
+      }
+    }
+    else if(this.new === "Humidity" && this.che3 ==true && this.che4 ==true && this.neww === "Line" ){
+      this.show3 = true;
+      this.clickData_CorrectAnimationnn()
+    }
+    else if(this.new === "Humidity" && this.che3 ==true && this.neww === "Gauge" ){
+      this.show4 = true;
+      this.humid=50;
+    }
+   }
+
+  ngOnInit() {
+    this.lng =73.8567;
+    this.lat =  18.5204;
+    }
+    testResponse:any
+    clickData_CorrectAnimation(){
+    
+         
+        this.temp1=40;
+        
+  
+         this.temp2 = parseFloat(this.temp1);
+         let newData = this.datasets[0].data.slice();
+         newData.shift();
+         newData.push(this.temp2);
+         
+         this.datasets = [{
+           label: "Temprature",
+           data: newData
+         }];
+  
+            
+      
+        }
+        clickData_CorrectAnimationn(){
+          
+               
+              this.temp1=40;
+        
+               this.temp3 = this.temp1 * 1.8 +32;
+               let newData = this.datasets[0].data.slice();
+               newData.shift();
+               newData.push(this.temp3);
+               
+               this.datasets = [{
+                 label: "Temprature",
+                 data: newData
+               }];
+        
+                  
+            
+              }
+              clickData_CorrectAnimationnn(){
+                
+                this.temp4=50;
+                
+                     
+                       let newData = this.datasets[0].data.slice();
+                       newData.shift();
+                       newData.push(this.temp4);
+                       
+                       this.datasets = [{
+                         label: "Humidity",
+                         data: newData
+                       }];
+                
+                
+                        
+                  
+                    }
+    
+    }
+
+                                 
diff --git a/src/app/dash/dash.router.ts b/src/app/dash/dash.router.ts
new file mode 100644
index 0000000..3cd07ce
--- /dev/null
+++ b/src/app/dash/dash.router.ts
@@ -0,0 +1,18 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CommunityComponent } from '../community/community.component';
+import { SupportComponent } from '../support/support.component';
+import { HomeComponent } from '../home/home.component';
+import {GmapComponent} from '../gmap/gmap.component';
+import { LoginComponent } from '../login/login.component';
+export const router2: Routes = [
+    { path: '', redirectTo: 'login', pathMatch: 'full' },
+     { path: 'login', component: LoginComponent },
+    //  { path: 'home', component: HomeComponent },
+    // { path: 'community', component: CommunityComponent },
+    // { path: 'support', component: SupportComponent },
+    // { path: 'gmap', component: GmapComponent }
+];
+
+export const routes2: ModuleWithProviders = RouterModule.forRoot(router2);
\ No newline at end of file
diff --git a/src/app/dashboard/add-new-device/add-new-device.component.html b/src/app/dashboard/add-new-device/add-new-device.component.html
new file mode 100644
index 0000000..6c70916
--- /dev/null
+++ b/src/app/dashboard/add-new-device/add-new-device.component.html
@@ -0,0 +1,666 @@
+<app-all-menus></app-all-menus>
+<div id="toast">
+  <div id="desc">{{ data_descip }}</div>
+</div>
+<div class="loading" *ngIf="Load">Loading&#8230;</div>
+<div class="topDiv">
+  <div class="card">
+    <div class="card-header">
+      <h4>
+        Add Device
+        <button type="button" class="close pull-right" (click)="back()">
+          <i class="fas fa-arrow-circle-left"></i>
+        </button>
+      </h4>
+    </div>
+
+    <div class="card-body">
+      <form [formGroup]="deviceForm" (ngSubmit)="submit()">
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Contact No.</label> <span>*</span>
+            <input
+              (input)="onSearchChange($event.target.value)"
+              formControlName="contactNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Contact number"
+              [ngClass]="{ 'is-invalid': submitted && f.contactNo.errors }"
+            />
+            <small *ngIf="message">{{ message }}</small>
+            <div
+              *ngIf="submitted && f.contactNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.contactNo.errors.required">
+                Contact Number is required
+              </div>
+              <div *ngIf="f.contactNo.errors.pattern">
+                Please enter valid Contact No
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Owner Name</label> <span>*</span>
+            <input
+              formControlName="ownerName"
+              type="text"
+              class="form-control"
+              id="inputEmail4"
+              placeholder="Please Enter Owner Name"
+              [ngClass]="{ 'is-invalid': submitted && f.ownerName.errors }"
+            />
+            <div
+              *ngIf="submitted && f.ownerName.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ownerName.errors.required">
+                Owner Name is required
+              </div>
+              <div *ngIf="f.ownerName.errors.pattern">
+                Please enter valid name
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputCity">Email</label>
+            <!-- <span>*</span> -->
+            <input
+              formControlName="email"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              placeholder="Please Enter Email"
+            />
+            <!-- <div *ngIf="submitted && f.email.errors.email" class="invalid-feedback">
+                <div *ngIf="f.email.errors.email">Please Enter valid email id</div>
+              </div> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputCity">Dealer Followup Mobile</label> <span>*</span>
+            <input
+              formControlName="dealerFollowup"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div
+              *ngIf="submitted && f.dealerFollowup.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dealerFollowup.errors.required">
+                Dealer Followup is required
+              </div>
+              <div *ngIf="f.dealerFollowup.errors.pattern">
+                Please Enter Valid number
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputCity">Address</label> <span>*</span>
+            <input
+              formControlName="address"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
+              <div *ngIf="f.address.errors.required">Address is required</div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="pin">Pin Code</label> <span>*</span>
+            <input
+              formControlName="pin"
+              type="text"
+              class="form-control"
+              id="pin"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div *ngIf="submitted && f.pin.errors" class="invalid-feedback">
+              <div *ngIf="f.pin.errors.required">Pin Code is required</div>
+              <div *ngIf="f.pin.errors.pattern">
+                Please Enter valid Pin code
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputState">State</label>
+            <select
+              formControlName="state"
+              (change)="onStateChange($event)"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose state</option>
+              <option *ngFor="let item of states" [value]="item">
+                {{ item }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputCity">City</label>
+            <select
+              formControlName="city"
+              (change)="onCityChange($event)"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose City</option>
+              <option *ngFor="let item of cityList" [value]="item.city">
+                {{ item.city }}
+              </option>
+            </select>
+            <!-- <input formControlName="city" type="text" class="form-control" id="inputCity"> -->
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputZip">RTO Office</label>
+            <select
+              formControlName="rtoOffice"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose RTO</option>
+              <option *ngFor="let item of RTO" [value]="item.RTO_Name">
+                {{ item.RTO_Name }}
+              </option>
+            </select>
+            <!-- <input formControlName="rtoOffice" type="text" class="form-control" id="inputZip"> -->
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div *ngIf="!inventoryManagement" class="form-group col-md-4">
+            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
+            <input
+              formControlName="device_id"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
+            />
+            <div
+              *ngIf="submitted && f.device_id.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.device_id.errors.required">
+                Device Id is required
+              </div>
+            </div>
+          </div>
+          <div *ngIf="inventoryManagement" class="form-group col-md-4">
+            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
+            <div>
+              <select id="inventory" multiple="multiple">
+                <option
+                  *ngFor="let option_1 of inventory"
+                  [value]="option_1.IMEI"
+                >
+                  {{ option_1.IMEI }}
+                </option>
+              </select>
+            </div>
+            <div
+              *ngIf="submitted && f.device_id.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.device_id.errors.required">
+                Device Id is required
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Vehicle No.</label><span>*</span>
+            <input
+              formControlName="vehicleNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Vehicle number"
+              [ngClass]="{ 'is-invalid': submitted && f.vehicleNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.vehicleNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.vehicleNo.errors.required">
+                Vehicle number is required
+              </div>
+              <div *ngIf="f.vehicleNo.errors.maxLength">
+                Vehicle number accepts max 10 digits
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Vehicle Type</label><span>*</span>
+            <div>
+              <select id="vehicleType" multiple="multiple">
+                <option *ngFor="let option_1 of vehData" [value]="option_1._id">
+                  {{ option_1.vehicle_name }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="iccid">ICCID</label>
+            <input
+              formControlName="iccid"
+              type="text"
+              class="form-control"
+              id="iccid"
+              placeholder="Enter ICCID No number"
+            />
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="sim1">SIM 1</label> <span>*</span>
+            <input
+              formControlName="sim1"
+              type="text"
+              class="form-control"
+              id="sim1"
+              placeholder="Enter SIM number"
+              [ngClass]="{ 'is-invalid': submitted && f.sim1.errors }"
+            />
+            <div *ngIf="submitted && f.sim1.errors" class="invalid-feedback">
+              <div *ngIf="f.sim1.errors.required">SIM 1 is required</div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">SIM 2</label>
+            <div>
+              <input
+                formControlName="sim2"
+                type="text"
+                class="form-control"
+                id="sim1"
+                placeholder="Enter SIM number"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Chassis No.</label><span>*</span>
+            <input
+              formControlName="chasisNo"
+              type="text"
+              class="form-control"
+              id="inputEmail4"
+              placeholder="Enter Chasis No."
+              [ngClass]="{ 'is-invalid': submitted && f.chasisNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.chasisNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.chasisNo.errors.required">
+                Chassis No is required
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Engine No.</label><span>*</span>
+            <input
+              formControlName="engineNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Engine number"
+              [ngClass]="{ 'is-invalid': submitted && f.engineNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.engineNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.engineNo.errors.required">
+                Engine No is required
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Panic Button Quality.</label>
+            <select formControlName="panic" class="form-control">
+              <option value="" selected disabled>Select Panic Button</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+            </select>
+            <!-- <input formControlName="panic" type="text" class="form-control" id="inputEmail4"
+                placeholder="Enter Panic Button Quality."> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputCity">Vehicle Manufacture</label>
+            <select
+              class="form-control"
+              formControlName="vehicleManufacture"
+              (change)="selectModel($event)"
+            >
+              <option value="" selected disabled>Choose Manufacturer</option>
+              <option *ngFor="let item of manufacturingData" [value]="item">
+                {{ item }}
+              </option>
+            </select>
+            <!-- <input formControlName="vehicleManufacture" type="text" class="form-control" id="inputCity"> -->
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">Model</label>
+            <select class="form-control" formControlName="model">
+              <option value="" selected disabled>Choose Model</option>
+              <option *ngFor="let item of modelData" [value]="item.ModelName">
+                {{ item.ModelName }}
+              </option>
+            </select>
+            <!-- <input formControlName="vehicleCategory" type="text" class="form-control" id="inputZip"> -->
+          </div>
+
+          <div class="form-group col-md-4">
+            <lable>{{ "Vehicle Category" | translate }} :</lable>
+            <select formControlName="vehicleCategory" class="form-control">
+              <option *ngFor="let license of vehicleCat" [value]="license">
+                {{ license }}
+              </option>
+            </select>
+
+            <!-- <label for="inputZip">Type Of Vehicle</label>
+              <input formControlName="vehicleCategory" type="text" class="form-control" id="inputZip"> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputState">Device Model</label><span>*</span>
+            <div>
+              <select id="dbselect" multiple="multiple">
+                <option
+                  *ngFor="let option_1 of device_Model"
+                  [value]="option_1._id"
+                >
+                  {{ option_1.modelName }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">Tracking Expiry</label>
+            <input
+              formControlName="trackingExp"
+              bsDatepicker
+              [bsConfig]="bsConfig"
+              type="text"
+              class="form-control"
+              id="inputZip"
+            />
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">E sim Expiry</label>
+            <input
+              formControlName="eSimExpiry"
+              bsDatepicker
+              [bsConfig]="bsConfig"
+              type="text"
+              class="form-control"
+              id="inputZip"
+            />
+          </div>
+        </div>
+
+        <div class="row"></div>
+      </form>
+      <div
+        style="overflow: auto; overflow-x: hidden; min-height: 200px"
+        [ngClass]="{ rowHeight: docRow }"
+      >
+        <div class="row" *ngFor="let data of imageuploadObject; let i = index">
+          <div class="col-sm-6" style="padding-top: 8px">
+            <div class="row">
+              <div class="col-md-4">
+                <span>{{ data.doctype }} : </span>
+              </div>
+              <div class="col-md-6">
+                <input
+                  type="text"
+                  [(ngModel)]="data.phone"
+                  placeholder="{{ 'Doc number' | translate }}"
+                />
+              </div>
+              <div class="col-md-2">
+                <img
+                  *ngIf="data.image"
+                  style="width: 50px"
+                  [src]="'https://www.oneqlik.in' + data.image.substring(6)"
+                  (click)="openModal(template, data)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-sm-6">
+            <span
+              ><input
+                type="file"
+                class="btn btn btn-success"
+                style="background: #f1f1f1; border: none; color: black"
+                (change)="onFileChanged($event, i)"
+            /></span>
+            <!-- <span>
+              <button class="btn btn btn-success" (click)="onUpload(i)">
+                {{ uploadStatus }}
+              </button></span
+            > -->
+          </div>
+        </div>
+      </div>
+      <div class="accordion" id="accordionExample">
+        <div
+          class="card"
+          style="margin-left: 61px; margin-top: 23px; margin-right: 151px"
+        >
+          <div class="card-header" id="headingOne">
+            <h2 class="mb-0">
+              <button
+                class="btn btn-link"
+                type="button"
+                data-toggle="collapse"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
+              >
+                Upload Device Image
+              </button>
+            </h2>
+          </div>
+
+          <div
+            id="collapseOne"
+            class="collapse collapse"
+            aria-labelledby="headingOne"
+            data-parent="#accordionExample"
+          >
+            <div class="card-body">
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 1: </span>
+                </div>
+
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[0]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[0].substring(6)"
+                    (click)="openModal(template, deviceImg[0])"
+                  />
+                </div>
+
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 0)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(0)"
+                  ></i>
+                </div> -->
+              </div>
+
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 2: </span>
+                </div>
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[1]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[1].substring(6)"
+                    (click)="openModal(template, deviceImg[1])"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 1)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(1)"
+                  ></i>
+                </div> -->
+              </div>
+
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 3: </span>
+                </div>
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[2]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[2].substring(6)"
+                    (click)="openModal(template, deviceImg[2])"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 2)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(2)"
+                  ></i>
+                </div> -->
+              </div>
+
+              <div id="toast">
+                <div id="desc">{{ data_descip }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer text-center">
+        <button type="submit" class="btn btn-primary" (click)="submit()">
+          Add Device
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">{{ docName }}</h4>
+    <button
+      type="button"
+      class="close pull-right"
+      aria-label="Close"
+      (click)="modalRef.hide()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body row">
+    <div class="col-md-12">
+      <img style="width: -webkit-fill-available" src="{{ image }}" />
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/dashboard/add-new-device/add-new-device.component.scss b/src/app/dashboard/add-new-device/add-new-device.component.scss
new file mode 100644
index 0000000..3d3b7f9
--- /dev/null
+++ b/src/app/dashboard/add-new-device/add-new-device.component.scss
@@ -0,0 +1,58 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+  padding-left: 4px;
+  padding-right: 3px;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/dashboard/add-new-device/add-new-device.component.spec.ts b/src/app/dashboard/add-new-device/add-new-device.component.spec.ts
new file mode 100644
index 0000000..ebbaacd
--- /dev/null
+++ b/src/app/dashboard/add-new-device/add-new-device.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewDeviceComponent } from './add-new-device.component';
+
+describe('AddNewDeviceComponent', () => {
+  let component: AddNewDeviceComponent;
+  let fixture: ComponentFixture<AddNewDeviceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddNewDeviceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddNewDeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/add-new-device/add-new-device.component.ts b/src/app/dashboard/add-new-device/add-new-device.component.ts
new file mode 100644
index 0000000..8030d84
--- /dev/null
+++ b/src/app/dashboard/add-new-device/add-new-device.component.ts
@@ -0,0 +1,985 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+import {Location} from '@angular/common';
+declare var $:any;
+declare var swal: any;
+@Component({
+  selector: 'app-add-new-device',
+  templateUrl: './add-new-device.component.html',
+  styleUrls: ['./add-new-device.component.scss']
+})
+export class AddNewDeviceComponent implements OnInit {
+  DeviceModelValue: any;
+   modalRef: BsModalRef;
+  submitted = false;
+  date=new Date()
+  expDate:any = new Date(this.date.getFullYear() + 1, this.date.getMonth(), this.date.getDate()).toLocaleString();
+  Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  custtype: any;
+  DealerId: any;
+  constructor(private modalService: BsModalService,private location:Location,private fb:FormBuilder,private contactService:ContactService,private router:Router,private _flashMessagesService: FlashMessagesService,) { }
+  deviceForm:FormGroup;
+  userId
+  deviceModel
+  vehicleCat=[
+  "Luxury Cab",
+"Three wheeled vehicles for transport of passengers/goods",
+"Goods carrier trucks or tankers or mail carriers",
+"Power tiller and Tractors using public roads",
+"Mobile clinic or X-Ray van or library vans",
+"Mobile Workshops",
+"Mobile canteens",
+"Private Service Vehicle",
+"maxi cab",
+"motor cab",
+"stage cariage",
+"contract carriage",
+"Tourist",
+"Educational Institution buses",
+"Ambulances",
+"Animal Ambulances",
+"Camper vans or trailers",
+"Cash vans",
+"Fire tenders, snorked ladders,auxiliary trailers and fire fighting vehicles",
+"Articulated vehicles",
+"Hearses",
+"Motor car",
+"Crane mounted vehicle",
+"Agricultural Tractor and Power Tiller",
+"Tow Trucks, Breakdown Van and Recovery Vehicles",
+"Construction Equipment Vehicles",]
+
+  // vehicleCat=['Truck','Bus','Car','School Van'];
+  Load:boolean=false;
+    bsConfig: Partial<BsDatepickerConfig>;
+    dataDevModel: any[];
+    vehicle_Type: any[];
+    imageuploadObject = [{doctype:'Adhar card1 *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'Adhar card2 *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'Warrenty Card *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'vehicle sales invoice *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'vehicle RC',image:'',phone:'',docdate:new Date(),fill:true},
+{doctype:'vehicle Photo',image:'',phone:'',docdate:new Date(),fill:true},
+];
+  dealerId
+  sup_admin
+  hrdwr
+  hrdwr2
+  custId
+  vahanID
+  documentList = [
+    {
+      "docId": "Adhar card1",
+      "docName": "Adhar Card Front"
+    },
+     {
+      "docId": "Adhar card2",
+      "docName": "Adhar Card Back"
+    },
+    {
+      "docId": "vehicle sales invoice",
+      "docName": "vehicle sales invoice"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "vehicle RC",
+      "docName": "vehicle RC"
+    },
+    {
+      "docId": "vehicle Photo",
+      "docName": "vehicle Photo"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Co.registered Card",
+      "docName": "Co.registered Card"
+    },
+    {
+      "docId": "Nepal Citizenship",
+      "docName": "Nepal Citizenship"
+    },
+    {
+      "docId": "Blue Book",
+      "docName": "Blue Book"
+    },
+    {
+      "docId": "Warrenty Card",
+      "docName": "Warrenty Card"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+  ngOnInit() {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY' }, { containerClass: 'theme-dark-blue' });
+    this.userId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer_ID;
+    if(JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin){
+      this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._id;
+    }else{
+      this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    }
+    console.log("SUPPPERADMIN-----,",this.sup_admin);
+    
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+     this.custId = localStorage.getItem('custId');
+      if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON')){
+  
+       this.DealerId =  JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1]))._id;  
+      
+    }
+    this.deviceForm=this.fb.group({
+      ownerName:['',[Validators.required,Validators.pattern("[a-zA-Z][a-zA-Z ]+")]],
+      contactNo:['',[Validators.required,Validators.pattern('[0-9 ]{10}')]],
+      device_id:[''],
+      address:['',Validators.required],
+      state:[''],
+      rtoOffice:[''],
+      vehicleManufacture:[''],
+      vehicleModel:[''],
+      vehicleCategory:[''],
+      vehicleType:[''],
+      vehicleNo:['',[Validators.required,Validators.maxLength(10)]],
+      chasisNo:['',Validators.required],
+      engineNo:['',Validators.required],
+      panic:[''],
+      bsnlPlan:[''],
+      hostingPlan:[''],
+      SMSPlan:[''],
+      city:[''],
+      deviceModel:[''],
+      trackingExp:new Date(this.expDate),
+      eSimExpiry:[''],
+      model:[''],
+      email:[""],
+      dealerFollowup:['',[Validators.required,Validators.pattern('[0-9 ]{10}')]],
+      sim1:['',Validators.required],
+      sim2:[''],
+      iccid:[''],
+      pin:['',[Validators.required,Validators.pattern('[0-9 ]{6}')]]
+
+
+    })
+     this.loadropdown()
+    this.getDeviceModel();
+    this.getvehDetail()
+    this.getUserSetting(this.userId);
+    this.getModelData()
+    this. getAllState()
+    var that=this
+    $(document).on('change','#inventory',function() {
+    var value = $('#inventory').val();
+    for(var i=0;i<that.inventory.length;i++){
+      if(value==that.inventory[i].IMEI){
+        var date=new Date()
+        var exp
+        if(that.inventory[i].eSIMValidaity=="One Year"){
+         exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }else if(that.inventory[i].eSIMValidaity=="Two Year"){
+           exp= new Date(date.getFullYear() + 2, date.getMonth(), date.getDate()).toLocaleString();
+        }else{
+           exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }
+      that.deviceForm.patchValue({
+        iccid:that.inventory[i].IccidNo,
+        sim1:that.inventory[i].Mob1,
+        sim2:that.inventory[i].Mob2,
+        eSimExpiry:new Date(exp),
+        device_id:value,
+      })
+        that.vahanID=that.inventory[i]['SerialNo']
+        that.hrdwr=that.inventory[i].Mob1
+        that.hrdwr2=that.inventory[i].Mob2
+      }
+    }
+   
+});
+  }
+   get f() { return this.deviceForm.controls; }
+  states=[]
+  getAllState(){
+    this.contactService.get('/RTO_master/getAllState').subscribe((res:any)=>{
+      for(var i=0;i<res.length;i++){
+        this.states.push(res[i]._id.state)
+      }
+      // this.states=res;
+    })
+  }
+
+  submit(){
+    this.submitted = true;
+
+        // stop here if form is invalid
+        if (this.deviceForm.invalid) {
+          const controls = this.deviceForm.controls;
+        for (const name in controls) {
+            if (controls[name].invalid) {
+                // invalid.push(name);
+                this.data_descip = "please enter valid "+name ;
+                this.launch_toast();
+                return;
+            }
+        }
+        }
+
+    for(var i=0;i<this.imageuploadObject.length;i++){
+      if(!this.imageuploadObject[i].fill){
+        swal(
+      'Upload Error',
+      'Please upload required documnets !!!',
+      'error'
+      )
+      return;
+      }
+      if(i<=3 && this.imageuploadObject[i].phone==''){
+        var err
+        if(i==0 || i==1){
+          err="Please Enter Adhar card number"
+        }else if(i==2){
+          err="Please Enter Warrenty card number"
+        }else{
+          err="Please Enter vehicle sales invoice number"
+        }
+         swal(
+      'Upload Error',
+      err,
+      'error'
+      )
+      return;
+      }
+    }
+
+
+    if(this.userFound){
+      var data1={
+        contactid:this.user._id
+      }
+       if(this.deviceForm.value.pin){
+          data1['pin']=this.deviceForm.value.pin
+        }
+      this.contactService.post('/users/editUserDetails',data1).subscribe((res:any)=>{
+          console.log(res);
+          
+          if(res.message=="Saved"){
+              
+            this.addDevice(this.user)
+            
+              //  this.addDevice(res._id)
+            // this.router.navigateByUrl('/dashboard');
+          }
+        })
+
+
+    }else{
+
+      var expDate = new Date();
+        expDate.setFullYear(expDate.getFullYear()+1);
+       
+        var name=this.deviceForm.value.ownerName.split(' ')
+  
+        var data={
+          // Dealer:this.reactiveForm.value.manager,
+          custumer: true,
+          expdate:new Date(expDate).toISOString(),
+          first_name:name[0]?name[0]:'',
+          last_name:name[1]?name[1]:'',
+          isDealer: false,
+          phone:this.deviceForm.value.contactNo,
+          user_id:"",
+          org_name: null,
+          password:this.generatePassword(6),
+          supAdmin:this.sup_admin,
+          Dealer:this.userId,
+          timezone: "Asia/Kolkata",
+          std_code: {countryCode: "in", dialcode: "91"},
+          
+        }
+        
+        if(this.deviceForm.value.pin){
+          data['pin']=this.deviceForm.value.pin
+        }
+
+        if(this.deviceForm.value.email){
+          data['email']=this.deviceForm.value.email
+        }
+        if(this.deviceForm.value.address){
+           data['address']=this.deviceForm.value.address
+        }
+        
+        console.log(data);
+  
+        this.contactService.post('/users/signUp',data).subscribe((res:any)=>{
+          console.log(res);
+          
+          if(res.message=="Registered Sucessfully" || res.message=="Registered and Message Sent Successfuly" || res.message=="Registered"){
+              
+            
+               this.addDevice(res._id)
+            // this.router.navigateByUrl('/dashboard');
+          }
+        })
+    }
+
+    }
+    
+
+    addDevice(data){
+      var model= $('#dbselect').multipleSelect('getSelects','value');
+      var type= $('#vehicleType').multipleSelect('getSelects','value');
+      var deviceid
+       if(this.inventoryManagement){
+     
+      var id=$('#inventory').multipleSelect('getSelects','value');
+      deviceid=id[0]
+    }else{
+      deviceid=this.deviceForm.value.device_id
+    }
+      var newDevice = {
+        devicename: this.deviceForm.value.vehicleNo,
+        deviceid:  deviceid,
+        // des: this.des,
+        model: model[0],
+       
+        typdev: "Tracker",
+        // emailid: this.emailid,
+        Mileage : "10",
+        phn: this.deviceForm.value.contactNo,
+        sim_number: this.deviceForm.value.contactNo,
+        created_by: this.userId,
+        supAdmin:  this.sup_admin,
+        // driver_name: this.driver,
+        // contact_number: this.dcontact,
+        device_model: model[0],
+        expdate: new Date(this.expDate),
+        user:data._id,
+        bussinessType:1
+        // License : this.licenseVal,
+        // deviceDistanceVariation:this.selcetedSign+(this.deviceDistanceVariation?this.deviceDistanceVariation:'0')
+
+        // Dealer:this.dealerObj?this.dealerObj:this.sup_admin
+      }
+      //  if (this.custtype) {
+      //   newDevice['Dealer'] = this.userId;
+      // } else if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON') ) {
+        newDevice['Dealer'] = this.userId
+      // }
+
+
+//  hrdwr: this.deviceForm.value.sim1,
+//         hrdwr1: this.deviceForm.value.sim1,
+       if(this.deviceForm.value.sim1){
+       newDevice['hrdwr'] = this.deviceForm.value.sim1
+      }
+      if(this.deviceForm.value.sim1){
+       newDevice['sim_number'] = this.deviceForm.value.sim1
+      }
+      if(this.deviceForm.value.sim2){
+       newDevice['sim_number2'] = this.deviceForm.value.sim2
+      }
+
+      if(this.deviceForm.value.eSimExpiry){
+        newDevice['esim_validity'] = this.deviceForm.value.eSimExpiry
+      }
+      
+
+       if(this.deviceForm.value.model){
+        newDevice['model'] = this.deviceForm.value.model
+      }
+     
+
+      if(this.deviceForm.value.dealerFollowup){
+        newDevice['CID_No'] = this.deviceForm.value.dealerFollowup;
+      }
+      if(this.hrdwr){
+        newDevice['hrdwr']=this.hrdwr
+      }
+      if(this.deviceForm.value.engineNo){
+        newDevice['engineNo'] = this.deviceForm.value.engineNo;
+      }
+
+    if(this.deviceForm.value.city){
+        newDevice['transportOfficeCity'] = this.deviceForm.value.city;
+      }
+      if(this.deviceForm.value.state){
+        newDevice['transportOfficeState'] = this.deviceForm.value.state;
+      }
+
+
+      if(this.deviceForm.value.chasisNo){
+        newDevice['ChassisNo'] = this.deviceForm.value.chasisNo
+      }
+      if(this.deviceForm.value.vehicleManufacture){
+       newDevice['manufacturingCompany'] = this.deviceForm.value.vehicleManufacture;
+      }
+
+      
+
+
+      if(type){
+        newDevice['typeOfVehicle'] = type[0];  
+      }
+      if(type){
+        newDevice['vehicleType'] = type[0];  
+      }
+
+      // if(this.transportOfficeCity){
+      //   newDevice['transportOfficeCity'] = this.transportOfficeCity;
+      // }
+      if(this.deviceForm.value.state){
+        newDevice['transportOfficeState'] = this.deviceForm.value.state;
+      }
+       if(this.deviceForm.value.iccid){
+        newDevice['IccidNo'] = this.deviceForm.value.iccid;
+      }
+       if(this.vahanID){
+        newDevice['vahanID'] = this.vahanID;
+      }
+      
+      if(this.deviceForm.value.panic){
+        newDevice['numberOfSOS'] = this.deviceForm.value.panic;
+      }
+     
+      if(this.deviceImg != undefined){
+        newDevice['deviceImage'] = this.deviceImg; 
+      }
+
+      if(this.deviceForm.value.vehicleCategory){
+        newDevice['vehicleCategory'] = this.deviceForm.value.vehicleCategory; 
+      }
+      if(this.deviceForm.value.rtoOffice){
+        newDevice['rto'] = this.deviceForm.value.rtoOffice; 
+      }
+      console.log("imageuploadDocument",this.imageuploadObject);
+      if((this.imageuploadObject.length !=0)){
+        newDevice['imageDoc'] = this.imageuploadObject ;
+      }
+      console.log("=======>",newDevice)
+       this.Load = false;
+      this.contactService.addKycDevice(newDevice)
+        .subscribe((device) => {
+          console.log(device);
+          
+          window.localStorage['DataUpdate'] = 'True';
+           this.data_descip = "Device Added Successfully";
+              launch_toast();
+              this.router.navigateByUrl("dashboard");
+            }
+            // this.Load = false
+          
+          , (err: any) => {
+          console.log(err.status);
+          console.log(err);
+          var that = this;
+          if (err.status == 400) {
+            console.log(JSON.parse(err._body).deviceObj);
+            var dupObj = JSON.parse(err._body).deviceObj ; 
+              // this.Load = false;
+              that.data_descip = "Duplicate Device ID (IMEI)";
+              that.launch_toast();
+             var devicesupAdmin = dupObj.supAdmin;
+              var deviceDealer = dupObj.Dealer;
+              var devOwner = dupObj.user;
+              // debugger;
+           
+          }
+          else {  
+            var message
+            if(err.status==401){
+              message="Access Denied !!!"
+              this.data_descip = "Access Denied !!!";
+              launch_toast();
+
+            }else{
+               message="Network Error !!!"
+               this.data_descip = "Network Error !!!";
+              launch_toast();
+            }
+            console.log(err);
+            
+            this._flashMessagesService.show(message, { cssClass: 'alert-danger', timeout: 2000 });
+            // this.Load = false
+          }
+        }
+        )
+        function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+
+    }
+
+ generatePassword(passwordLength) {
+  var numberChars = "0123456789";
+  var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  var lowerChars = "abcdefghijklmnopqrstuvwxyz";
+  var allChars = numberChars + upperChars + lowerChars;
+  var randPasswordArray = Array(passwordLength);
+  randPasswordArray[0] = numberChars;
+  randPasswordArray[1] = upperChars;
+  randPasswordArray[2] = lowerChars;
+  randPasswordArray = randPasswordArray.fill(allChars, 3);
+  return this.shuffleArray(randPasswordArray.map(function(x) { return x[Math.floor(Math.random() * x.length)] })).join('');
+}
+
+shuffleArray(array) {
+  for (var i = array.length - 1; i > 0; i--) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+  return array;
+}
+message
+user
+userFound:boolean=false;
+onSearchChange(value){
+  this.userFound=false
+  this.message=undefined
+  console.log(value);
+  var phone=this.deviceForm.value.contactNo
+  if(phone.length==10){
+    console.log("KLDJNDKjk");
+    this.contactService.get('/users/searchUserByPhone?user='+this.userId+'&phone='+phone).subscribe((res:any)=>{
+      console.log(res);
+      if(res.message=="User already Present"){
+        this.deviceForm.patchValue({
+          ownerName:res.data[0].first_name?res.data[0].first_name:""+" "+res.data[0].last_name?res.data[0].first_name:'',
+          email:res.data[0].email?res.data[0].email:""
+        })
+        this.user=res.data[0]
+        this.userFound=true;
+        this.deviceForm.controls.ownerName.disable();
+        this.deviceForm.controls.email.disable();
+      }else{
+        this.userFound=false
+        this.message=res.message
+      }
+    },err=>{
+      console.log(err);
+      this.message=err.error.message
+    })
+  }
+  
+}
+ device_Model: any;
+  getDeviceModel() {
+    this.contactService.get("/deviceModel/getDeviceModel?input=Nippon")
+    // this.contactService.getDevModel()
+      .subscribe(res => {
+        this.device_Model = res;
+        var devname = [];
+        console.log("Device_Model",this.device_Model);
+        for(var i = 0 ; i<this.device_Model.length;i++){
+          var a = {
+            model :this.device_Model[i].device_type,
+            id : this.device_Model[i]._id
+          }
+          var modelName;
+        
+          if(this.device_Model[i].deviceport != undefined){
+            modelName = this.device_Model[i].device_type + " " + "(Port : " + this.device_Model[i].deviceport + ")";
+         
+          }else{
+            modelName = this.device_Model[i].device_type;
+          }
+          this.device_Model[i].modelName = modelName ; 
+          devname.push(a);
+        }
+        console.log('this.device_Model',this.device_Model);
+        console.log(devname);
+        this.loadropdown()
+      })
+  }
+
+   loadropdown() {
+    let that = this;
+   
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    // ||(this.componentIdentifier === 'notification_master')
+  
+   
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 470,
+          placeholder:"Select model",
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+         $('#vehicleType').multipleSelect({
+            width: 470,
+            placeholder: "Select Type",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+           $('#inventory').multipleSelect({
+        width: 470,
+        placeholder: 'Select IMEI',
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+    
+      }, 100);
+      
+
+  }
+
+   vehData:any;
+getvehDetail(){
+  this.contactService.getvehType(this.userId)
+    .subscribe(res=>{
+      // console.log(res);
+      this.vehData=res;
+      var vdata = res;
+      for(var a = 0;a<this.vehData.length;a++){
+          var vehtypename = vdata[a].brand + " " + vdata[a].model;
+          this.vehData[a].vehicle_name = vehtypename;
+      }
+       console.log("allveh",this.vehData);
+        this.loadropdown()
+    })
+}
+docRow:boolean=false;
+// AddDocumentsField(addedRow:any){
+//   console.log("Inside function !!!");
+//     if(addedRow){    
+//       this.docRow = true;
+//     }
+    
+//      var obj={doctype:'',image:'',phone:'',docdate:''};
+//      this.imageuploadObject.push(obj);
+//      console.log(this.imageuploadObject);
+//     // console.log("ImageuploadObject=>",this.imageuploadObject);
+// }
+showUpload:boolean=true;
+DeleteDocumentsField(index){
+  console.log(this.imageuploadObject.length);
+  if(this.imageuploadObject.length == 1){
+    this.docRow = false;
+    this.showUpload = false;
+  }
+  this.imageuploadObject.splice(index, 1);
+
+}
+
+selectedFile: File;
+index
+onFileChanged(event,i) { 
+  this.index=i
+  this.selectedFile = <File>event.target.files[0];
+  console.log(this.selectedFile); 
+
+  this.imageuploadObject[this.index].fill=true;
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+    fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+    this.data_descip = "Image Uploaded";
+    this.launch_toast();
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      this.imageuploadObject[this.index].image = resImage;
+       console.log(this.imageuploadObject);
+      // console.log(res);
+      this.selectedFile=undefined
+    },err=>{
+      this.selectedFile=undefined
+      this.Load= false;
+      this.data_descip = "Internal server error , try again";
+      this.launch_toast();
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+    })
+}
+ifuploadArr: boolean ;
+uploadStatus: any = 'Upload';
+onUpload(imgIndex) {
+  console.log(imgIndex);
+  
+  // console.log("selected file name =>",this.selectedFile.name);
+  if(!this.selectedFile){
+    swal(
+      'Upload Error',
+      'Please choose file before upload !!!',
+      'error'
+    )
+  }else{
+    this.imageuploadObject[this.index].fill=true;
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+    fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+    this.data_descip = "Image Uploaded";
+    this.launch_toast();
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      this.imageuploadObject[this.index].image = resImage;
+       console.log(this.imageuploadObject);
+      // console.log(res);
+      this.selectedFile=undefined
+    },err=>{
+      this.selectedFile=undefined
+      this.Load= false;
+      this.data_descip = "Internal server error , try again";
+      this.launch_toast();
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+    })
+  }
+ }
+documentType(docType){
+  console.log("doctypeObject=>",docType);
+
+}
+
+inventoryManagement:Boolean=false;
+  inventory=[]
+  getUserSetting(userId){
+    
+    this.contactService.post('/users/get_user_setting',{uid: userId}).subscribe((res:any)=>{
+      this.inventoryManagement=res.inventoryManagement;
+      if(this.inventoryManagement){
+        console.log(this.userId,this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer);
+        var isDealer=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer
+        var isSuperAdmin=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isSuperAdmin
+        // var user
+        // if(isSuperAdmin){
+        //   var user
+        // }else if(isDealer){
+
+        // }
+        var user=isSuperAdmin?this.userId:this.sup_admin?this.sup_admin:this.userId
+        console.log(user);
+        
+        this.contactService.get('/Device_inventory/getInventoryDropdown?user='+this.userId).subscribe((res:any)=>{
+          this.inventory=res;
+          this.loadropdown()
+        })
+      }
+    })
+  }
+
+   manufacturingData
+  getModelData(){
+     this.contactService.get('/model_master/GetNames').subscribe((res:any)=>{
+      this.manufacturingData=res
+    })
+  }
+  modelData
+  selectModel(event){
+  console.log(event.target.value);
+
+  this.contactService.get('/model_master/getModel?name='+event.target.value).subscribe((res:any)=>{
+    this.modelData=res
+  })
+  
+}
+cityList
+onStateChange(event){
+  this.contactService.get('/RTO_master/getCity?state='+event.target.value).subscribe((res:any)=>{
+    this.cityList=res
+  })
+}
+RTO
+onCityChange(event){
+   this.contactService.get('/RTO_master/getRTO?city='+event.target.value).subscribe((res:any)=>{
+    this.RTO=res
+  })
+}
+back(){
+  this.location.back()
+}
+imageURL:any;
+index2
+ selectedDeviceFile:File;
+ data_descip : any;
+onDeviceImageChanged(event,index) {
+  this.index2=index
+  this.selectedDeviceFile = <File>event.target.files[0];
+  if(this.selectedDeviceFile){
+    this.Load = true;
+    const fdDevice = new FormData();
+    fdDevice.append('photo',this.selectedDeviceFile,this.selectedDeviceFile.name)
+     console.log("Binaryimage = > ",fdDevice );
+     this.contactService.deviceImageupload(fdDevice)
+       .subscribe(res=>{
+             console.log(res);
+             if(res){
+              //  if(this.deviceImg[this.index2]){
+                 this.deviceImg[this.index2]=res['_body']
+              //  }else{
+              //    this.deviceImg.push(res['_body'])
+              //  }
+             }
+             this.selectedDeviceFile=undefined;
+            console.log('this.deviceImg',this.deviceImg);
+             this.data_descip = "Image Uploaded";
+             launch_toast();
+             this.Load = false;
+       },err=>{
+        this.data_descip = "Internal Server Error";
+        launch_toast();
+         this.selectedDeviceFile=undefined;
+         console.log(err);
+          this.Load = false;
+       })
+
+  }
+  
+     function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+
+}
+  deviceImg=['','',''];
+onDeviceImageUploadUpload(index){
+  if(!this.selectedDeviceFile){
+    swal(
+      'Upload Error',
+      'Please choose file before upload !!!',
+      'error'
+    )
+  }else{
+  this.Load = true;
+  const fdDevice = new FormData();
+  fdDevice.append('photo',this.selectedDeviceFile,this.selectedDeviceFile.name)
+   console.log("Binaryimage = > ",fdDevice );
+   this.contactService.deviceImageupload(fdDevice)
+     .subscribe(res=>{
+           console.log(res);
+           if(res){
+            //  if(this.deviceImg[this.index2]){
+               this.deviceImg[this.index2]=res['_body']
+            //  }else{
+            //    this.deviceImg.push(res['_body'])
+            //  }
+           }
+           this.selectedDeviceFile=undefined;
+          console.log('this.deviceImg',this.deviceImg);
+           this.data_descip = "Image Uploaded";
+           launch_toast();
+           this.Load = false;
+     },err=>{
+      this.data_descip = "Internal Server Error";
+      launch_toast();
+       this.selectedDeviceFile=undefined;
+       console.log(err);
+        this.Load = false;
+     })
+  }
+ 
+     function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+ 
+}
+launch_toast() {
+       console.log("ihjgdfds");
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+
+    image;
+docName
+openModal(template: TemplateRef<any>,doc){
+  console.log(doc);
+  
+   this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+  this.docName=doc.doctype
+this.image="https://www.oneqlik.in"+doc.image.substring(6)
+}
+}
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..ac6b5ed
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,170 @@
+<app-all-menus></app-all-menus>
+
+<div class="limiter">
+  <app-all-menus></app-all-menus>
+  <div id="toast">
+   <div id="desc">{{data_descip}}</div>
+ </div>
+   <div class="container-table100">
+     <div class="wrap-table100">
+      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86;margin-left: 0px;margin-right: 0px; padding-top: 10px; padding-bottom: 10px; color: white;">
+        <div class="col-12">
+          <md-select [(ngModel)]="limit" ngDefaultControl (change)="callDataTable()" style="float: right;background: #efecec;margin-right: 5px;">
+          <md-option *ngFor="let page of pageLengthArr; let i = index" [value]="page">
+            {{page}}
+          </md-option>
+        </md-select>
+          <h4 style="display: inline-block;">{{'Vehicles' | translate}}</h4>
+          <i  style="margin-left: 20px;padding-top: 5px;cursor: pointer;float: left;" title="Add Device" class="fas fa-plus" (click)="adddev()" *ngIf="(bussinessType=='0' || bussinessType==undefined)" ></i>
+          <!-- *ngIf="((custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin) && (bussinessType!=0 || bussinessType==undefined)"></i>  -->
+          <!-- (custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn -->
+          <i style="margin-left: 20px;padding-top: 5px;cursor: pointer;float: left;" title="Add Device" class="fas fa-plus-circle" (click)="adddevnew()" *ngIf="(bussinessType=='1')"></i>
+          <!-- *ngIf="((custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn) && bussinessType=='1'"></i> -->
+          <i  style="margin-left: 15px;padding-top: 5px;float: left;" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel()" *ngIf="(bussinessType=='0' || bussinessType==undefined)"></i>
+          <i  style="margin-left: 15px;padding-top: 5px;float: left;" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel1()" *ngIf="(bussinessType=='1')"></i>
+           
+          <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="float: left;;margin-left: 15px;padding-top: 5px;cursor: pointer;color:white"title="Video tutorial" target="_blank"> <i class="fas fa-video"></i> </a>
+         
+         
+          <md-select [(ngModel)]="devStatus" multiple style="padding-top: 0;float: right; margin-right: 10px; width: 150px;background: #efecec;"
+          placeholder="--{{'Status' | translate}}--" ngDefaultControl (change)="selectedStatus($event,devStatus.name)">
+          <md-option *ngFor="let devStatus of statusArray; let i = index" style="padding-left: 20px;" [value]="devStatus.name">
+            {{devStatus.name}}
+          </md-option>
+        </md-select>
+        </div>
+      </div>
+      <div class="row" style="background: #7ba8b7;padding-top: 5px;padding-bottom: 5px;color: black;font-weight: 500;box-shadow:1px 1px white">
+        <div class="col-sm-12 col-md-6 col-lg-10">
+          <div class="s002">
+            <form>
+              <div class="inner-form">
+                <div class="input-field first-wrap">
+                  <div class="icon-wrap">     
+                    <i class="fas fa-search" width="24" height="24" viewBox="0 0 24 24"></i>
+                  </div>
+                  <input type="text" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Device Search' | translate}}" />   
+                </div>
+                <div class="input-field second-wrap">
+                  <div class="icon-wrap">
+                    <i class="far fa-calendar-alt" width="24" height="24" viewBox="0 0 24 24"></i>
+                  </div>
+                  <input id="from_date" bsDatepicker class="datepicker" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" name="fDate" (ngModelChange)="dateChange('fdate')" placeholder="From Date"> 
+                </div>
+                <div class="input-field third-wrap">
+                  <div class="icon-wrap">
+                    <i class="far fa-calendar-alt" width="24" height="24" viewBox="0 0 24 24"></i>
+                  </div>
+                  <input id="to_date" bsDatepicker placeholder="To Date" class="datepicker" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" (ngModelChange)="dateChange('todate')">
+                </div>
+                <!-- <div class="input-field ">
+                  <div class="icon-wrap">
+                   
+                  </div>
+                </div> -->
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="col-sm-12 col-md-6 col-lg-2" style="padding-top: 2px;">
+          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 120px;float: left;color:white;background: #035096; border-right-color: #2d4262;line-height: 2.6;"><< {{'Previous' | translate}}</button>   
+          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="width: 100px;float: left;color:white;margin-right: 10px;line-height: 2.6;background: #035096;">{{'Next' | translate}} >></button>  
+        </div>
+      </div>
+       <div class="table100 ver1">
+         <div class="wrap-table100-nextcols js-pscroll" style="height: 77vh;overflow-y: hidden;">
+           <div class="table100-nextcols">
+            <table id="deviceTable1" class="display order-column" cellspacing="0" style="font-size:15px;text-align: center;" >
+              <thead style="background:#add8e6">
+                <tr>
+                  <th style="width: 150px;text-align: left"></th>
+                  <th style="width: 150px;text-align: left">{{'Reg. Number' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'Group' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'IMEI' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'Int. ID' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'SIM 1' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'SIM Provider' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'SIM 2' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'SIM Provider 2' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{'Device Model' | translate}}</th>      
+                  <th style="width: 150px;text-align: left">{{'Vehicle Type' | translate}}</th>
+                  <th style="width: 300px;text-align: left">{{'Status' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'User' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Owner' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Dealer' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Created On' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Exp. Date' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Renew at' | translate}}</th>
+                  <th style="width: 200px;text-align: left">{{'Renew by' | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{"Driver's Name" | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{"Driver's Contact" | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{"Sells Person" | translate}}</th>
+                  <th style="width: 150px;text-align: left">{{"Installer" | translate}}</th>
+                  <th style="width: 100px;text-align: center">Last Ping</th>
+                  <th style="width: 150px;text-align: center">{{'Device Setting' | translate}}</th>
+                  <th style="width: 100px;text-align: center">{{'Share Device' | translate}}</th>
+                  <th style="width: 100px;text-align: center">{{'Share User' | translate}}</th>
+                  <!-- *ngIf="superAdmin||custtype||(dealerTocust=='ON')" -->
+                  <!-- *ngIf="superAdmin||custtype||(dealerTocust=='ON')" -->
+                  <th style="text-align: center;">{{'Renewal History' | translate}}</th>
+                  <th style="text-align: center;">{{'Edit' | translate}}</th>
+                  <th style="text-align: center;">{{'Delete' | translate}}</th>
+                  <th style="text-align: center;">{{'E Chalan' | translate}}</th>
+                  <th style="text-align: center;">{{'Documents' | translate}}</th>
+                  <th style="text-align: center;">{{'Cert. Download' | translate}}</th>
+                  <th style="text-align: center;">{{'Remark' | translate}}</th>
+                  <th style="text-align: center;">{{'KYC Status' | translate}}</th>
+                </tr>
+              </thead>
+            </table>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
+ </div>
+ 
+
+
+ <!-- <div class="col-3">
+  <i style="margin-left: 5px;cursor: pointer;" title="Add Device" class="fas fa-plus" (click)="adddev()"
+    *ngIf="(custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn"></i>
+  <i style="margin-left: 15px" class="fas fa-file-export" title="Export to Excel" (click)="exportExcel()"></i>
+  <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="margin-left: 15px;cursor: pointer;color:black"
+    title="Video tutorial" target="_blank"> <i class="fas fa-video"></i> </a>
+  <md-select [(ngModel)]="devStatus" multiple style="padding-top: 0;float: right; margin-right: 40px;; width: 150px;"
+    placeholder="--{{'Status' | translate}}--" ngDefaultControl (change)="selectedStatus($event,devStatus.name)">
+    <md-option *ngFor="let devStatus of statusArray; let i = index" [value]="devStatus.name">
+      {{devStatus.name}}
+    </md-option>
+  </md-select>
+</div>
+<div class="col-5" style="scroll-padding-left: 0px;scroll-padding-right: 0px">         
+  <div class="row">         
+       <div class="col-md-6" style="padding-left: 0px;padding-right: 0px">
+         <div class="row">
+           <div class="col-4" style="padding:0;text-align: center;">
+              <label style="width: inherit;margin-top: 7px">{{'From Date' | translate}}</label>
+           </div>
+           <div class="col-8" style="padding-left: 0">
+              <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 35px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" (ngModelChange)="dateChange('fdate')" placeholder="Select Date"> 
+           </div>
+         </div>         
+       </div> 
+       <div class="col-md-6">
+         <div class="row">
+           <div class="col-4" style="text-align: center;">
+              <label style="width: inherit;margin-top: 7px">{{'To Date' | translate}}</label>
+           </div>
+           <div class="col-8" style="padding-left: 0">
+              <input id="to_date" bsDatepicker placeholder="Select Date" class="form-control form-control-sm" style="height: 35px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" (ngModelChange)="dateChange('todate')">
+           </div>
+         </div>      
+       </div>      
+  </div>
+  </div>
+<div class="col-md-4">
+      <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="color:white;margin-right: 10px;line-height: 1.7;background: #035096;">Next >></button>
+      <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="color:white;background: #035096; border-right-color: #2d4262;line-height: 1.7;"><< Previous</button>
+      <input type="search" style="margin-right: 10px;width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: white;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);line-height: 2.3;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Device Search' | translate}}" />   
+  </div> -->
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..62d65df
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.scss
@@ -0,0 +1,3187 @@
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+
+//   .headStyle{
+//     text-align: center;
+//     font-size: 22px;
+//     font-weight: 500;
+
+//     color: #6b6a6a;
+//     padding-top: 7px;
+//     margin: 0px;
+//   }
+
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+
+//   /* Animation */
+
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   ::-webkit-scrollbar {
+//     /* display: none; */
+//     }
+// .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 15%;
+//     /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+//     font-family: "Courier New", Courier, monospace;
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+
+// }
+// #c1 {
+//     float:left;
+
+// }
+// .close-thik:after {
+//     content: '✖'; /* UTF-8 symbol */
+//     position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+//   }
+//   [data-tooltip] {
+//     position: relative;
+//     z-index: 2;
+//     cursor: pointer;
+//   }
+
+//   /* Hide the tooltip content by default */
+//   [data-tooltip]:before,
+//   [data-tooltip]:after {
+//     visibility: hidden;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+//     opacity: 0;
+//     pointer-events: none;
+//   }
+
+//   /* Position tooltip above the element */
+//   [data-tooltip]:before {
+//     position: absolute;
+//     bottom: 110%;
+//     left: 50%;
+//     margin-bottom: -5px;
+//     margin-left: -40px;
+//     padding: 7px;
+//     width: 100px;
+//     -webkit-border-radius: 3px;
+//     -moz-border-radius: 3px;
+//     border-radius: 3px;
+//     background-color: #000;
+//     background-color: hsla(0, 0%, 20%, 0.9);
+//     color: #fff;
+//     content: attr(data-tooltip);
+//     text-align: center;
+//     font-size: 14px;
+//     line-height: 1.2;
+//   }
+
+//   /* Triangle hack to make tooltip look like a speech bubble */
+//   [data-tooltip]:after {
+//     position: absolute;
+//     bottom: 150%;
+//     left: 50%;
+//     margin-left: -5px;
+//     width: 0;
+//     border-top: 5px solid #000;
+//     border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+//     border-right: 5px solid transparent;
+//     border-left: 5px solid transparent;
+//     content: " ";
+//     font-size: 0;
+//     line-height: 0;
+//   }
+
+//   /* Show tooltip content on hover */
+//   [data-tooltip]:hover:before,
+//   [data-tooltip]:hover:after {
+//     visibility: visible;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+//     opacity: 1;
+//   }
+//   button3 {
+//     background-color: Transparent;
+//     background-repeat:no-repeat;
+//     border: none;
+//     cursor:pointer;
+//     overflow: hidden;
+//     outline:none;
+// }
+// .icon-bar {
+//     width: 17%;
+//     background-color: #18262F;
+//     margin-top: -9px;
+//     height: 100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+
+//     width: 297px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// @media screen and (max-width: 900px) {
+//     .icon-bar{
+//         display: none;
+
+//     }
+//     .sch{
+//         display: none;
+//     }
+//     .first{
+//         width:1%!important;
+//     }
+//     .second{
+//         margin-left: 8px!important;
+//     }
+//     .small{
+//         display: block!important;
+//     }
+//     .image{
+//         display: none;
+//     }
+//     .schlar{
+//         display: block!important;
+//     }
+// }
+// .small{
+//     display: none;
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+// #d:hover {
+//     color: rgb(14, 102, 18);
+
+// }
+// #ac{
+//     color: rgb(38, 38, 90)
+// }
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+// #active{
+//     text-decoration-line: underline;
+//     text-decoration-color: rgb(66, 26, 245);
+// }
+// .overlay {
+//     height: 100%;
+//     width: 0;
+//     position: fixed;
+//     z-index: 1;
+//     top: 0;
+//     left: 0;
+//     background-color: rgb(0,0,0);
+//     background-color: rgba(0,0,0, 0.9);
+//     overflow-x: hidden;
+//     transition: 0.5s;
+// }
+
+// .overlay-content {
+//     position: relative;
+//     top: 25%;
+//     width: 100%;
+//     text-align: center;
+//     margin-top: 30px;
+// }
+
+// .overlay a {
+//     padding: 8px;
+//     text-decoration: none;
+//     font-size: 36px;
+//     color: #818181;
+//     display: block;
+//     transition: 0.3s;
+// }
+
+// .overlay a:hover, .overlay a:focus {
+//     color: #f1f1f1;
+// }
+
+// .overlay .closebtn {
+//     position: absolute;
+//     top: 20px;
+//     right: 45px;
+//     font-size: 60px;
+// }
+
+// @media screen and (max-height: 450px) {
+//   .overlay a {font-size: 20px}
+//   .overlay .closebtn {
+//     font-size: 40px;
+//     top: 15px;
+//     right: 35px;
+//   }
+// }
+// agm-map {
+//     height: 300px;
+//   }
+
+//   th { font-size: 12px; }
+// td { font-size: 11px; }
+
+//   /* Toast Msg */
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+// /* #myInput {
+//     border-radius: 15px;
+
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// } */
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+// .mat-slide-toggle-thumb-container {
+//     z-index: auto !important;
+// }
+
+// .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+//     z-index:auto!important;
+
+// }
+// .mat-menu-panel.mat-menu-before.mat-menu-below{
+//     overflow: hidden !important;
+// }
+// .mat-menu-panel.my-full-width-menu {
+//     max-width: none;
+//     width: 100vw;
+//     margin-left: -8px;
+//     margin-top: 24px;
+//   }
+//   .menu-overflow-hidden {
+//     overflow: hidden !important;
+//   }
+
+// /* Notification */
+// #nav{list-style:none;margin: 0px;padding: 0px;}
+// #nav li {
+// float: right;
+// margin-right: 20px;
+// font-family: Arial;
+// font-size: 14px;
+// font-weight:bold;
+// }
+// #nav li a{color:#333333;text-decoration:none}
+// #nav li a:hover{color:#1788c0;text-decoration:none}
+
+// #notification_li
+// {
+// position:relative
+// }
+// #notificationContainer
+// {
+// background-color: #fff;
+// border: 1px solid rgba(100, 100, 100, .4);
+// -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+// overflow: visible;
+// position: absolute;
+// top: 30px;
+// margin-left: -170px;
+// width: 400px;
+// z-index: -1;
+// display: none;
+// }
+
+// .previous {
+//   background-color: #f1f1f1;
+//   color: black;
+
+// }
+
+// .previous a{
+//   text-decoration: none;
+//   display: inline-block;
+//   padding: 8px 16px;
+// }
+// .previous a:hover{
+
+// }
+
+// .next a{
+//   text-decoration: none;
+//   display: inline-block;
+//   padding: 8px 16px;
+
+// }
+// .next a:hover{
+//   background-color: #ddd;
+//   color: black;
+// }
+
+// #deviceTable body { font-size: 50px; }
+
+// .switch {
+//   position: relative;
+//   display: inline-block;
+//   width: 60px;
+//   height: 34px;
+// }
+
+// .switch input {
+//   opacity: 0;
+//   width: 0;
+//   height: 0;
+// }
+
+// .slider {
+//   position: absolute;
+//   cursor: pointer;
+//   top: 0;
+//   left: 0;
+//   right: 0;
+//   bottom: 0;
+//   background-color: #ccc;
+//   -webkit-transition: .4s;
+//   transition: .4s;
+// }
+
+// .slider:before {
+//   position: absolute;
+//   content: "";
+//   height: 26px;
+//   width: 26px;
+//   left: 4px;
+//   bottom: 4px;
+//   background-color: white;
+//   -webkit-transition: .4s;
+//   transition: .4s;
+// }
+
+// /* Rounded sliders */
+// .slider.round {
+//   border-radius: 34px;
+// }
+
+// .slider.round:before {
+//   border-radius: 50%;
+// }
+
+// input:checked + .slider {
+//   background-color: #2196F3;
+// }
+
+// input:focus + .slider {
+//   box-shadow: 0 0 1px #2196F3;
+// }
+
+// input:checked + .slider:before {
+//   -webkit-transform: translateX(26px);
+//   -ms-transform: translateX(26px);
+//   transform: translateX(26px);
+// }
+
+// .next {
+//   background-color: #4CAF50;
+//   color: white;
+// }
+
+// #notificationContainer:before {
+// content: '';
+// display: block;
+// position: absolute;
+// width: 0;
+// height: 0;
+// color: transparent;
+// border: 10px solid black;
+// border-color: transparent transparent white;
+// margin-top: -20px;
+// margin-left: 188px;
+// }
+// #notificationTitle
+// {
+// font-weight: bold;
+// padding: 8px;
+// font-size: 13px;
+// background-color: #ffffff;
+// position: fixed;
+// z-index: 1000;
+// width: 384px;
+// border-bottom: 1px solid #dddddd;
+
+// }
+// #notificationsBody
+// {
+// padding: 33px 0px 0px 0px !important;
+// min-height:300px;
+// }
+// #notificationFooter
+// {
+// /*
+//     font-weight: bold;
+//     padding: 8px;
+//     font-size: 13px;
+//     background-color: #ffffff;
+//     position: fixed;
+//     z-index: 1000;
+//     width: 384px;
+//     border-bottom: 1px solid #dddddd; */
+
+// background-color: #e9eaed;
+// text-align: center;
+// font-weight: bold;
+// z-index: 1000;
+// padding: 8px;
+// font-size: 13px;
+// border-top: 1px solid #dddddd;
+// }
+
+// #notification_count
+// {
+// padding: 3px 7px 3px 7px;
+// background: #cc0000;
+// color: #ffffff;
+// font-weight: bold;
+// margin-left: 77px;
+// border-radius: 9px;
+// -moz-border-radius: 9px;
+// -webkit-border-radius: 9px;
+// position: absolute;
+// margin-top: -11px;
+// font-size: 11px;
+// }
+
+// .selectedRunning{
+//   background-color: darkgreen;
+//   border: 1px solid green;
+//   color: white;
+//   font-weight: 400;
+// }
+
+// .selectedStopped{
+//   background-color: darkred;
+//   border: 1px solid red;
+//   color: white;
+//   font-weight: 400;
+// }
+
+// .selectedExpired{
+//   background-color: #c30202;
+//   border: 1px solid #c30202;
+//   color: white;
+//   font-weight: 400;
+// }
+
+// .selectedNoGPS{
+//   background-color: #484848;
+//   border: 1px solid MD_DIALOG_DATA;
+//   color: white;
+//   font-weight: 400;
+// }
+
+// .selectedOur{
+//   background-color: #afe1ff;
+//   border: 1px solid #afe1ff;
+//   color: black;
+//   font-weight: 400;
+// }
+
+// .selectMaintanence{
+//   background-color: rgba(152,92,16,1);
+//   border: 1px solid rgba(152,92,16,1);
+//   color: white;
+//   font-weight: 400;
+// }
+
+// .selectIdling{
+//   background-color: #ffd366;
+//   border: 1px solid #ffd366;
+//   color: black;
+//   font-weight: 400;
+// }
+
+// .deselected{
+//  background-color: lightgray;
+//  border: 1px solid gray;
+//  color: black;
+//  font-weight: 400;
+
+// }
+
+// .scrollbar
+// {
+//     /* margin-left: 30px; */
+//     /* float: left; */
+//     /* height: 300px;
+//     width: 65px; */
+//     /* width: 100%;height: 90vh; padding-top: 1%; */
+//     /* background: #F5F5F5; */
+//     /* overflow-x: hidden; */
+//     /* overflow-y: none; */
+//     /* margin-bottom: 25px; */
+// }
+
+// .force-overflow
+// {
+//     min-height: 450px;
+// }
+
+// #style-1::-webkit-scrollbar-track
+// {
+//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//     border-radius: 10px;
+//     background-color: #F5F5F5;
+// }
+
+// #style-1::-webkit-scrollbar
+// {
+//     width: 12px;
+//     background-color: #F5F5F5;
+// }
+
+// #style-1::-webkit-scrollbar-thumb
+// {
+//     border-radius: 10px;
+//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+//     background-color: -webkit-linear-gradient(45deg,
+//     rgba(255, 255, 255, 0.2) 25%,
+//     transparent 25%,
+//     transparent 50%,
+//     rgba(255, 255, 255, .2) 50%,
+//     rgba(255, 255, 255, .2) 75%,
+//     transparent 75%,
+//     transparent)
+
+//     /* background-color: linear-gradient(to bottom, MD_DIALOG_DATA 0%, #0066ff 100%); */
+// }
+
+// /* Smartphones (landscape) ----------- */
+// @media only screen and (min-width : 321px) {
+// /* Styles */
+// }
+
+// /* Smartphones (portrait) ----------- */
+// @media only screen and (max-width : 320px) {
+// /* Styles */
+// }
+
+// /* iPads (portrait and landscape) ----------- */
+// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+// /* Styles */
+// }
+
+// /* iPads (landscape) ----------- */
+// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
+// /* Styles */
+// }
+
+// /* iPads (portrait) ----------- */
+// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
+// /* Styles */
+// }
+// /**********
+// iPad 3
+// **********/
+// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+// /* Styles */
+// }
+
+// @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
+// /* Styles */
+// }
+// /* Desktops and laptops ----------- */
+// @media only screen  and (min-width : 1224px) {
+// /* Styles */
+// }
+
+// /* Large screens ----------- */
+// @media only screen  and (min-width : 1824px) {
+// /* Styles */
+// }
+
+// /* iPhone 4 ----------- */
+// @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+// /* Styles */
+// }
+
+// @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
+// /* Styles */
+// }
+
+// ../fonts/roboto/Roboto-Regular.ttf
+// @font-face {
+//   font-family: Roboto-Regular;
+//   src: url('../../fonts/roboto/Roboto-Regular.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto-Medium;
+//   src: url('../../fonts/roboto/Roboto-Medium.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto-Bold;
+//   src: url('../../fonts/roboto/Roboto-Bold.ttf');
+// }
+
+/*//////////////////////////////////////////////////////////////////
+[ RESTYLE TAG ]*/
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+  margin: 0px;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+  outline: none !important;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+p {
+  margin: 0px;
+}
+
+ul,
+li {
+  margin: 0px;
+  list-style-type: none;
+}
+
+/* ------------------------------------ */
+input {
+  display: block;
+  outline: none;
+  border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus,
+input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+  outline: none !important;
+  border: none;
+  background: transparent;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+iframe {
+  border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+.table100 .ps__rail-x {
+  z-index: 1010;
+  height: 6px;
+  background-color: transparent;
+  opacity: 1 !important;
+  bottom: 10px;
+}
+
+.table100 .ps__rail-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #e6e6e6;
+  height: 100%;
+  width: calc(100% - 30px);
+  left: 15px;
+  top: 0px;
+}
+
+.table100 .ps__rail-x .ps__thumb-x {
+  height: 100%;
+  bottom: 0;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-x .ps__thumb-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #b3b3b3;
+  height: 100%;
+  width: calc(100% - 30px);
+  top: 0;
+  left: 15px;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  // background: #fa71cd;
+  background: #efecec;
+  // background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -o-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: linear-gradient(bottom, #c471f5, #fa71cd);
+}
+
+.container-table100 {
+  max-height: 100vh;
+  // max-width: 1366px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  // padding: 33px 100px;
+  padding: 55px 20px 0px 20px;
+}
+
+.wrap-table100 {
+  // padding-top: 3%;
+  width: 100%;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  background-color: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+th,
+td {
+  font-weight: unset;
+  padding-right: 10px;
+}
+
+.column1 {
+  width: 100%;
+  padding-left: 40px;
+}
+
+.column2 {
+  width: 225px;
+  padding-left: 55px;
+}
+
+.column3 {
+  // width: 205px;
+  width: 265px;
+}
+
+.column4 {
+  // width: 300px;
+  width: 175px;
+}
+
+.column5 {
+  width: 235px;
+}
+
+.column6 {
+  width: 170px;
+}
+
+.column7 {
+  // width: 330px;
+  width: 200px;
+}
+
+.column8 {
+  // width: 305px;
+  width: 210px;
+}
+
+.column9 {
+  width: 200px;
+}
+
+.column10 {
+  width: 200px;
+}
+
+.column11 {
+  // width: 200px;
+  // width:155px;
+  width: 285px;
+}
+
+.column12 {
+  width: 225px;
+}
+
+.column13 {
+  width: 225px;
+}
+
+.column14 {
+  // width: 200px;
+  width: 175px;
+}
+.column29 {
+  // width: 200px;
+  width: 175px;
+}
+.column15 {
+  // width: 200px;
+  width: 185px;
+}
+.column16 {
+  // width: 200px;
+  width: 150px;
+}
+.column17 {
+  // width: 200px;
+  width: 150px;
+}
+.column18 {
+  // width: 200px;
+  width: 175px;
+}
+.column19 {
+  // width: 200px;
+  width: 150px;
+}
+
+.column20 {
+  // width: 200px;
+  width: 150px;
+}
+.column21 {
+  // width: 200px;
+  width: 150px;
+}
+.column22 {
+  // width: 200px;
+  width: 150px;
+}
+.column23 {
+  // width: 200px;
+  width: 150px;
+}
+
+.table100 th {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.table100 td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/*==================================================================
+[ Fix col ]*/
+.table100 {
+  width: 100%;
+  position: relative;
+}
+
+.table100-firstcol {
+  background-color: #fff;
+  position: absolute;
+  z-index: 1000;
+  width: 310px;
+  top: 0;
+  left: 0;
+}
+
+.table100-firstcol table {
+  background-color: #fff;
+}
+
+.wrap-table100-nextcols {
+  width: 100%;
+  overflow: auto;
+  // padding-left: 310px;
+  padding-bottom: 28px;
+}
+
+.table100-nextcols table {
+  table-layout: fixed;
+}
+
+.shadow-table100-firstcol {
+  box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.table100-firstcol table {
+  background-color: transparent;
+}
+
+/*==================================================================
+[ Ver1 ]*/
+
+.table100.ver1 th {
+  font-family: Roboto-Bold;
+  font-size: 14px;
+  color: #333333;
+  line-height: 0;
+  text-transform: uppercase;
+}
+
+.table100.ver1 td {
+  font-family: Roboto-Medium;
+  font-size: 15px;
+  // line-height: 1.4;
+}
+
+.table100.ver1 .table100-firstcol td {
+  color: #666666;
+}
+
+.table100.ver1 .table100-nextcols td {
+  color: #999999;
+}
+
+.table100.ver1 tr {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+// .btn-default {
+//   @include btn-variant(#546e7a, #90a4ae, #78909c, #cfd8dc, #eceff1, #b0bec5, #455a64);
+
+// }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  float: right;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  whitespace: nowrap;
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+  font-size: 12px;
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
+
+th,
+td {
+  white-space: nowrap;
+}
+#deviceTable.dataTables_wrapper {
+  width: 800px;
+  margin: 0 auto;
+}
+
+// search baar css
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+html [type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+  /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+  display: none;
+}
+
+html {
+  height: 100%;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  -webkit-margin-start: 0;
+  -webkit-margin-end: 0;
+  -webkit-padding-before: 0;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+  -webkit-padding-after: 0;
+  border: 0;
+}
+
+legend {
+  margin: 0;
+  padding: 0;
+  display: block;
+  -webkit-padding-start: 0;
+  -webkit-padding-end: 0;
+}
+
+/*===============================
+=            Choices            =
+===============================*/
+.choices {
+  position: relative;
+  margin-bottom: 24px;
+  font-size: 16px;
+}
+
+.choices:focus {
+  outline: none;
+}
+
+.choices:last-child {
+  margin-bottom: 0;
+}
+
+.choices.is-disabled .choices__inner,
+.choices.is-disabled .choices__input {
+  background-color: #eaeaea;
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.choices.is-disabled .choices__item {
+  cursor: not-allowed;
+}
+
+.choices[data-type*="select-one"] {
+  cursor: pointer;
+}
+
+.choices[data-type*="select-one"] .choices__inner {
+  padding-bottom: 7.5px;
+}
+
+.choices[data-type*="select-one"] .choices__input {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: #ffffff;
+  margin: 0;
+}
+
+.choices[data-type*="select-one"] .choices__button {
+  // background-image: url("../../icons/cross-inverse.svg");
+  padding: 0;
+  background-size: 8px;
+  height: 100%;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  margin-top: -10px;
+  margin-right: 25px;
+  height: 20px;
+  width: 20px;
+  border-radius: 10em;
+  opacity: 0.5;
+}
+
+.choices[data-type*="select-one"] .choices__button:hover,
+.choices[data-type*="select-one"] .choices__button:focus {
+  opacity: 1;
+}
+
+.choices[data-type*="select-one"] .choices__button:focus {
+  box-shadow: 0px 0px 0px 2px #00bcd4;
+}
+
+.choices[data-type*="select-one"]:after {
+  content: "";
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: #333333 transparent transparent transparent;
+  border-width: 5px;
+  position: absolute;
+  right: 11.5px;
+  top: 50%;
+  margin-top: -2.5px;
+  pointer-events: none;
+}
+
+.choices[data-type*="select-one"].is-open:after {
+  border-color: transparent transparent #333333 transparent;
+  margin-top: -7.5px;
+}
+
+.choices[data-type*="select-one"][dir="rtl"]:after {
+  left: 11.5px;
+  right: auto;
+}
+
+.choices[data-type*="select-one"][dir="rtl"] .choices__button {
+  right: auto;
+  left: 0;
+  margin-left: 25px;
+  margin-right: 0;
+}
+
+.choices[data-type*="select-multiple"] .choices__inner,
+.choices[data-type*="text"] .choices__inner {
+  cursor: text;
+}
+
+.choices[data-type*="select-multiple"] .choices__button,
+.choices[data-type*="text"] .choices__button {
+  position: relative;
+  display: inline-block;
+  margin-top: 0;
+  margin-right: -4px;
+  margin-bottom: 0;
+  margin-left: 8px;
+  padding-left: 16px;
+  border-left: 1px solid #008fa1;
+  // background-image: url("../../icons/cross.svg");
+  background-size: 8px;
+  width: 8px;
+  line-height: 1;
+  opacity: 0.75;
+}
+
+.choices[data-type*="select-multiple"] .choices__button:hover,
+.choices[data-type*="select-multiple"] .choices__button:focus,
+.choices[data-type*="text"] .choices__button:hover,
+.choices[data-type*="text"] .choices__button:focus {
+  opacity: 1;
+}
+
+.choices__inner {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+  background-color: #f9f9f9;
+  padding: 7.5px 7.5px 3.75px;
+  border: 1px solid #dddddd;
+  border-radius: 2.5px;
+  font-size: 14px;
+  min-height: 44px;
+  overflow: hidden;
+}
+
+.is-focused .choices__inner,
+.is-open .choices__inner {
+  border-color: #b7b7b7;
+}
+
+.is-open .choices__inner {
+  border-radius: 2.5px 2.5px 0 0;
+}
+
+.is-flipped.is-open .choices__inner {
+  border-radius: 0 0 2.5px 2.5px;
+}
+
+.choices__list {
+  margin: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.choices__list--single {
+  display: inline-block;
+  padding: 4px 16px 4px 4px;
+  width: 100%;
+}
+
+[dir="rtl"] .choices__list--single {
+  padding-right: 4px;
+  padding-left: 16px;
+}
+
+.choices__list--single .choices__item {
+  width: 100%;
+}
+
+.choices__list--multiple {
+  display: inline;
+}
+
+.choices__list--multiple .choices__item {
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 20px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  margin-right: 3.75px;
+  margin-bottom: 3.75px;
+  background-color: #00bcd4;
+  border: 1px solid #00a5bb;
+  color: #ffffff;
+  word-break: break-all;
+}
+
+.choices__list--multiple .choices__item[data-deletable] {
+  padding-right: 5px;
+}
+
+[dir="rtl"] .choices__list--multiple .choices__item {
+  margin-right: 0;
+  margin-left: 3.75px;
+}
+
+.choices__list--multiple .choices__item.is-highlighted {
+  background-color: #00a5bb;
+  border: 1px solid #008fa1;
+}
+
+.is-disabled .choices__list--multiple .choices__item {
+  background-color: #aaaaaa;
+  border: 1px solid #919191;
+}
+
+.choices__list--dropdown {
+  display: none;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #dddddd;
+  top: 100%;
+  margin-top: -1px;
+  border-bottom-left-radius: 2.5px;
+  border-bottom-right-radius: 2.5px;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.choices__list--dropdown.is-active {
+  display: block;
+}
+
+.is-open .choices__list--dropdown {
+  border-color: #b7b7b7;
+}
+
+.is-flipped .choices__list--dropdown {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: -1px;
+  border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.choices__list--dropdown .choices__list {
+  position: relative;
+  max-height: 300px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  will-change: scroll-position;
+}
+
+.choices__list--dropdown .choices__item {
+  position: relative;
+  padding: 10px;
+  font-size: 14px;
+}
+
+[dir="rtl"] .choices__list--dropdown .choices__item {
+  text-align: right;
+}
+
+@media (min-width: 640px) {
+  .choices__list--dropdown .choices__item--selectable {
+    padding-right: 100px;
+  }
+  .choices__list--dropdown .choices__item--selectable:after {
+    content: attr(data-select-text);
+    font-size: 12px;
+    opacity: 0;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  [dir="rtl"] .choices__list--dropdown .choices__item--selectable {
+    text-align: right;
+    padding-left: 100px;
+    padding-right: 10px;
+  }
+  [dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
+    right: auto;
+    left: 10px;
+  }
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  background-color: #f2f2f2;
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  opacity: 0.5;
+}
+
+.choices__item {
+  cursor: default;
+}
+
+.choices__item--selectable {
+  cursor: pointer;
+}
+
+.choices__item--disabled {
+  cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 0.5;
+}
+
+.choices__heading {
+  font-weight: 600;
+  font-size: 12px;
+  padding: 10px;
+  border-bottom: 1px solid #f7f7f7;
+  color: gray;
+}
+
+.choices__button {
+  text-indent: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}
+
+.choices__button:focus {
+  outline: none;
+}
+
+.choices__input {
+  display: inline-block;
+  vertical-align: baseline;
+  background-color: #f9f9f9;
+  font-size: 14px;
+  margin-bottom: 5px;
+  border: 0;
+  border-radius: 0;
+  max-width: 100%;
+  padding: 4px 0 4px 2px;
+}
+
+.choices__input:focus {
+  outline: 0;
+}
+
+[dir="rtl"] .choices__input {
+  padding-right: 2px;
+  padding-left: 0;
+}
+
+.choices__placeholder {
+  opacity: 0.5;
+}
+
+/*=====  End of Choices  ======*/
+.flatpickr-calendar {
+  background: transparent;
+  opacity: 0;
+  display: none;
+  text-align: center;
+  visibility: hidden;
+  padding: 0;
+  animation: none;
+  direction: ltr;
+  border: 0;
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: 5px;
+  position: absolute;
+  width: 307.875px;
+  box-sizing: border-box;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  background: #fff;
+  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
+    0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
+}
+
+.flatpickr-calendar.open,
+.flatpickr-calendar.inline {
+  opacity: 1;
+  max-height: 640px;
+  visibility: visible;
+}
+
+.flatpickr-calendar.open {
+  display: inline-block;
+  z-index: 99999;
+}
+
+.flatpickr-calendar.animate.open {
+  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.flatpickr-calendar.inline {
+  display: block;
+  position: relative;
+  top: 2px;
+}
+
+.flatpickr-calendar.static {
+  position: absolute;
+  top: calc(100% + 2px);
+}
+
+.flatpickr-calendar.static.open {
+  z-index: 999;
+  display: block;
+}
+
+.flatpickr-calendar.multiMonth
+  .flatpickr-days
+  .dayContainer:nth-child(n + 1)
+  .flatpickr-day.inRange:nth-child(7n + 7) {
+  box-shadow: none !important;
+}
+
+.flatpickr-calendar.multiMonth
+  .flatpickr-days
+  .dayContainer:nth-child(n + 2)
+  .flatpickr-day.inRange:nth-child(7n + 1) {
+  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-calendar .hasWeeks .dayContainer,
+.flatpickr-calendar .hasTime .dayContainer {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.flatpickr-calendar .hasWeeks .dayContainer {
+  border-left: 0;
+}
+
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  height: 40px;
+  border-top: 1px solid #e6e6e6;
+}
+
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: auto;
+}
+
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+  position: absolute;
+  display: block;
+  pointer-events: none;
+  border: solid transparent;
+  content: "";
+  height: 0;
+  width: 0;
+  left: 22px;
+}
+
+.flatpickr-calendar.rightMost:before,
+.flatpickr-calendar.rightMost:after {
+  left: auto;
+  right: 22px;
+}
+
+.flatpickr-calendar:before {
+  border-width: 5px;
+  margin: 0 -5px;
+}
+
+.flatpickr-calendar:after {
+  border-width: 4px;
+  margin: 0 -4px;
+}
+
+.flatpickr-calendar.arrowTop:before,
+.flatpickr-calendar.arrowTop:after {
+  bottom: 100%;
+}
+
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: #e6e6e6;
+}
+
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: #fff;
+}
+
+.flatpickr-calendar.arrowBottom:before,
+.flatpickr-calendar.arrowBottom:after {
+  top: 100%;
+}
+
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: #e6e6e6;
+}
+
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: #fff;
+}
+
+.flatpickr-calendar:focus {
+  outline: 0;
+}
+
+.flatpickr-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.flatpickr-months {
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.flatpickr-months .flatpickr-month {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.9);
+  fill: rgba(0, 0, 0, 0.9);
+  height: 28px;
+  line-height: 1;
+  text-align: center;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  text-decoration: none;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  line-height: 16px;
+  height: 28px;
+  padding: 10px;
+  z-index: 3;
+  color: rgba(0, 0, 0, 0.9);
+  fill: rgba(0, 0, 0, 0.9);
+}
+
+.flatpickr-months .flatpickr-prev-month.disabled,
+.flatpickr-months .flatpickr-next-month.disabled {
+  display: none;
+}
+
+.flatpickr-months .flatpickr-prev-month i,
+.flatpickr-months .flatpickr-next-month i {
+  position: relative;
+}
+
+.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
+  /*
+      /*rtl:begin:ignore*/
+  left: 0;
+  /*
+      /*rtl:end:ignore*/
+}
+
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
+.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
+  /*
+      /*rtl:begin:ignore*/
+  right: 0;
+  /*
+      /*rtl:end:ignore*/
+}
+
+/*
+      /*rtl:begin:ignore*/
+/*
+      /*rtl:end:ignore*/
+.flatpickr-months .flatpickr-prev-month:hover,
+.flatpickr-months .flatpickr-next-month:hover {
+  color: #959ea9;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months .flatpickr-next-month:hover svg {
+  fill: #f64747;
+}
+
+.flatpickr-months .flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month svg {
+  width: 14px;
+  height: 14px;
+}
+
+.flatpickr-months .flatpickr-prev-month svg path,
+.flatpickr-months .flatpickr-next-month svg path {
+  transition: fill 0.1s;
+  fill: inherit;
+}
+
+.numInputWrapper {
+  position: relative;
+  height: auto;
+}
+
+.numInputWrapper input,
+.numInputWrapper span {
+  display: inline-block;
+}
+
+.numInputWrapper input {
+  width: 100%;
+}
+
+.numInputWrapper input::-ms-clear {
+  display: none;
+}
+
+.numInputWrapper span {
+  position: absolute;
+  right: 0;
+  width: 14px;
+  padding: 0 4px 0 2px;
+  height: 50%;
+  line-height: 50%;
+  opacity: 0;
+  cursor: pointer;
+  border: 1px solid rgba(57, 57, 57, 0.15);
+  box-sizing: border-box;
+}
+
+.numInputWrapper span:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.numInputWrapper span:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.numInputWrapper span:after {
+  display: block;
+  content: "";
+  position: absolute;
+}
+
+.numInputWrapper span.arrowUp {
+  top: 0;
+  border-bottom: 0;
+}
+
+.numInputWrapper span.arrowUp:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
+  top: 26%;
+}
+
+.numInputWrapper span.arrowDown {
+  top: 50%;
+}
+
+.numInputWrapper span.arrowDown:after {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid rgba(57, 57, 57, 0.6);
+  top: 40%;
+}
+
+.numInputWrapper span svg {
+  width: inherit;
+  height: auto;
+}
+
+.numInputWrapper span svg path {
+  fill: rgba(0, 0, 0, 0.5);
+}
+
+.numInputWrapper:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.numInputWrapper:hover span {
+  opacity: 1;
+}
+
+.flatpickr-current-month {
+  font-size: 135%;
+  line-height: inherit;
+  font-weight: 300;
+  color: inherit;
+  position: absolute;
+  width: 75%;
+  left: 12.5%;
+  padding: 6.16px 0 0 0;
+  line-height: 1;
+  height: 28px;
+  display: inline-block;
+  text-align: center;
+  transform: translate3d(0, 0, 0);
+}
+
+.flatpickr-current-month span.cur-month {
+  font-family: inherit;
+  font-weight: 700;
+  color: inherit;
+  display: inline-block;
+  margin-left: 0.5ch;
+  padding: 0;
+}
+
+.flatpickr-current-month span.cur-month:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.flatpickr-current-month .numInputWrapper {
+  width: 6ch;
+  width: 7ch\0;
+  display: inline-block;
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowUp:after {
+  border-bottom-color: rgba(0, 0, 0, 0.9);
+}
+
+.flatpickr-current-month .numInputWrapper span.arrowDown:after {
+  border-top-color: rgba(0, 0, 0, 0.9);
+}
+
+.flatpickr-current-month input.cur-year {
+  background: transparent;
+  box-sizing: border-box;
+  color: inherit;
+  cursor: text;
+  padding: 0 0 0 0.5ch;
+  margin: 0;
+  display: inline-block;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: 300;
+  line-height: inherit;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  vertical-align: initial;
+}
+
+.flatpickr-current-month input.cur-year:focus {
+  outline: 0;
+}
+
+.flatpickr-current-month input.cur-year[disabled],
+.flatpickr-current-month input.cur-year[disabled]:hover {
+  font-size: 100%;
+  color: rgba(0, 0, 0, 0.5);
+  background: transparent;
+  pointer-events: none;
+}
+
+.flatpickr-weekdays {
+  background: transparent;
+  text-align: center;
+  overflow: hidden;
+  width: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 28px;
+}
+
+.flatpickr-weekdays .flatpickr-weekdaycontainer {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+span.flatpickr-weekday {
+  cursor: default;
+  font-size: 90%;
+  background: transparent;
+  color: rgba(0, 0, 0, 0.54);
+  line-height: 1;
+  margin: 0;
+  text-align: center;
+  display: block;
+  -ms-flex: 1;
+  flex: 1;
+  font-weight: bolder;
+}
+
+.dayContainer,
+.flatpickr-weeks {
+  padding: 1px 0 0 0;
+}
+
+.flatpickr-days {
+  position: relative;
+  overflow: hidden;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  width: 307.875px;
+}
+
+.flatpickr-days:focus {
+  outline: 0;
+}
+
+.dayContainer {
+  padding: 0;
+  outline: 0;
+  text-align: left;
+  width: 307.875px;
+  min-width: 307.875px;
+  max-width: 307.875px;
+  box-sizing: border-box;
+  display: inline-block;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  -ms-flex-pack: justify;
+  justify-content: space-around;
+  transform: translate3d(0, 0, 0);
+  opacity: 1;
+}
+
+.dayContainer + .dayContainer {
+  box-shadow: -1px 0 0 #e6e6e6;
+}
+
+.flatpickr-day {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 150px;
+  box-sizing: border-box;
+  color: #393939;
+  cursor: pointer;
+  font-weight: 400;
+  width: 14.2857143%;
+  -ms-flex-preferred-size: 14.2857143%;
+  flex-basis: 14.2857143%;
+  max-width: 39px;
+  height: 39px;
+  line-height: 39px;
+  margin: 0;
+  display: inline-block;
+  position: relative;
+  -ms-flex-pack: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  cursor: pointer;
+  outline: 0;
+  background: #e6e6e6;
+  border-color: #e6e6e6;
+}
+
+.flatpickr-day.today {
+  border-color: #959ea9;
+}
+
+.flatpickr-day.today:hover,
+.flatpickr-day.today:focus {
+  border-color: #959ea9;
+  background: #959ea9;
+  color: #fff;
+}
+
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: #569ff7;
+  box-shadow: none;
+  color: #fff;
+  border-color: #569ff7;
+}
+
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 50px 0 0 50px;
+}
+
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0 50px 50px 0;
+}
+
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -10px 0 0 #569ff7;
+}
+
+.flatpickr-day.selected.startRange.endRange,
+.flatpickr-day.startRange.startRange.endRange,
+.flatpickr-day.endRange.startRange.endRange {
+  border-radius: 50px;
+}
+
+.flatpickr-day.inRange {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+}
+
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(57, 57, 57, 0.3);
+  background: transparent;
+  border-color: transparent;
+  cursor: default;
+}
+
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover {
+  cursor: not-allowed;
+  color: rgba(57, 57, 57, 0.1);
+}
+
+.flatpickr-day.week.selected {
+  border-radius: 0;
+  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+}
+
+.flatpickr-day.hidden {
+  visibility: hidden;
+}
+
+.rangeMode .flatpickr-day {
+  margin-top: 1px;
+}
+
+.flatpickr-weekwrapper {
+  display: inline-block;
+  float: left;
+}
+
+.flatpickr-weekwrapper .flatpickr-weeks {
+  padding: 0 12px;
+  box-shadow: 1px 0 0 #e6e6e6;
+}
+
+.flatpickr-weekwrapper .flatpickr-weekday {
+  float: none;
+  width: 100%;
+  line-height: 28px;
+}
+
+.flatpickr-weekwrapper span.flatpickr-day,
+.flatpickr-weekwrapper span.flatpickr-day:hover {
+  display: block;
+  width: 100%;
+  max-width: none;
+  color: rgba(57, 57, 57, 0.3);
+  background: transparent;
+  cursor: default;
+  border: none;
+}
+
+.flatpickr-innerContainer {
+  display: block;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.flatpickr-rContainer {
+  display: inline-block;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.flatpickr-time {
+  text-align: center;
+  outline: 0;
+  display: block;
+  height: 0;
+  line-height: 40px;
+  max-height: 40px;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.flatpickr-time:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.flatpickr-time .numInputWrapper {
+  -ms-flex: 1;
+  flex: 1;
+  width: 40%;
+  height: 40px;
+  float: left;
+}
+
+.flatpickr-time .numInputWrapper span.arrowUp:after {
+  border-bottom-color: #393939;
+}
+
+.flatpickr-time .numInputWrapper span.arrowDown:after {
+  border-top-color: #393939;
+}
+
+.flatpickr-time.hasSeconds .numInputWrapper {
+  width: 26%;
+}
+
+.flatpickr-time.time24hr .numInputWrapper {
+  width: 49%;
+}
+
+.flatpickr-time input {
+  background: transparent;
+  box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  height: inherit;
+  line-height: inherit;
+  color: #393939;
+  font-size: 14px;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.flatpickr-time input.flatpickr-hour {
+  font-weight: bold;
+}
+
+.flatpickr-time input.flatpickr-minute,
+.flatpickr-time input.flatpickr-second {
+  font-weight: 400;
+}
+
+.flatpickr-time input:focus {
+  outline: 0;
+  border: 0;
+}
+
+.flatpickr-time .flatpickr-time-separator,
+.flatpickr-time .flatpickr-am-pm {
+  height: inherit;
+  display: inline-block;
+  float: left;
+  line-height: inherit;
+  color: #393939;
+  font-weight: bold;
+  width: 2%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-flex-item-align: center;
+  -ms-grid-row-align: center;
+  align-self: center;
+}
+
+.flatpickr-time .flatpickr-am-pm {
+  outline: 0;
+  width: 18%;
+  cursor: pointer;
+  text-align: center;
+  font-weight: 400;
+}
+
+.flatpickr-time input:hover,
+.flatpickr-time .flatpickr-am-pm:hover,
+.flatpickr-time input:focus,
+.flatpickr-time .flatpickr-am-pm:focus {
+  background: #f3f3f3;
+}
+
+.flatpickr-input[readonly] {
+  cursor: pointer;
+}
+
+@keyframes fpFadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.s002 {
+  // min-height: 100vh;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-family: "Poppins", sans-serif;
+  // background: url("../../assets/images/Searchs_002.png");
+  background-size: cover;
+  background-position: center center;
+  // padding: 15px;
+}
+
+.s002 form {
+  width: 100%;
+  max-width: 1190px;
+}
+
+.s002 form legend {
+  font-size: 60px;
+  line-height: 1;
+  color: #fff;
+  margin-bottom: 60px;
+  font-weight: 400;
+  text-align: center;
+}
+
+.s002 form .inner-form {
+  background: rgba(0, 0, 0, 0.5);
+  padding: 4px;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.s002 form .inner-form .input-field {
+  position: relative;
+  border-right: 1px solid #ddd;
+}
+
+.s002 form .inner-form .input-field .icon-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 100%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  -ms-flex-align: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.s002 form .inner-form .input-field .icon-wrap svg {
+  fill: #555;
+  width: 14px;
+  height: 14px;
+}
+
+.s002 form .inner-form .input-field input {
+  height: 40px;
+  background: #fff;
+  border-radius: 0;
+  border: 0;
+  display: block;
+  width: 100%;
+  padding: 10px 20px 10px 45px;
+  font-size: 16px;
+  color: #555;
+  font-weight: 400;
+  font-family: "Poppins", sans-serif;
+}
+
+.s002 form .inner-form .input-field input.placeholder {
+  color: #9a9a9a;
+  font-size: 16px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.s002 form .inner-form .input-field input:-moz-placeholder {
+  color: #9a9a9a;
+  font-size: 16px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.s002 form .inner-form .input-field input::-webkit-input-placeholder {
+  color: #9a9a9a;
+  font-size: 16px;
+  font-weight: 400;
+  text-transform: uppercase;
+}
+
+.s002 form .inner-form .input-field input:hover,
+.s002 form .inner-form .input-field input:focus {
+  box-shadow: none;
+  outline: 0;
+}
+
+.s002 form .inner-form .input-field.first-wrap {
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.s002 form .inner-form .input-field.second-wrap {
+  min-width: 190px;
+  max-width: 190px;
+}
+
+.s002 form .inner-form .input-field.third-wrap {
+  min-width: 190px;
+  max-width: 190px;
+}
+
+// .s002 form .inner-form .input-field.fouth-wrap {
+//   min-width: 190px;
+//   max-width: 190px;
+//   border-right: 0;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__inner {
+//   background: #fff;
+//   border-radius: 0;
+//   border: 0;
+//   height: 70px;
+//   color: #666;
+//   display: -ms-flexbox;
+//   display: flex;
+//   -ms-flex-align: center;
+//       align-items: center;
+//   padding: 10px 32px 10px 45px;
+//   border-radius: 0;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__inner .choices__list.choices__list--single {
+//   display: -ms-flexbox;
+//   display: flex;
+//   padding: 0;
+//   -ms-flex-align: center;
+//       align-items: center;
+//   height: 100%;
+//   font-size: 16px;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__inner .choices__item.choices__item--selectable.choices__placeholder {
+//   display: -ms-flexbox;
+//   display: flex;
+//   -ms-flex-align: center;
+//       align-items: center;
+//   height: 100%;
+//   opacity: 1;
+//   color: #9a9a9a;
+//   text-transform: uppercase;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__inner .choices__list--single .choices__item {
+//   display: -ms-flexbox;
+//   display: flex;
+//   -ms-flex-align: center;
+//       align-items: center;
+//   height: 100%;
+//   color: #666;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices[data-type*="select-one"]:after {
+//   right: 30px;
+//   border-color: #e5e5e5 transparent transparent transparent;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__list.choices__list--dropdown {
+//   border: 0;
+//   background: #fff;
+//   padding: 10px 15px;
+//   border-radius: 0;
+//   box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__list.choices__list--dropdown .choices__item--selectable {
+//   padding-right: 0;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
+//   background: #fff;
+//   color: #b78a62;
+// }
+
+// .s002 form .inner-form .input-field.fouth-wrap .choices__list--dropdown .choices__item {
+//   color: #555;
+//   min-height: 24px;
+//   font-size: 16px;
+// }
+
+.s002 form .inner-form .input-field.fifth-wrap {
+  min-width: 190px;
+  max-width: 190px;
+  padding-left: 10px;
+  border-right: 0;
+}
+
+.s002 form .inner-form .input-field.fifth-wrap .btn-search {
+  height: 70px;
+  width: 100%;
+  background: #b78a62;
+  white-space: nowrap;
+  border-radius: 0.5px;
+  font-size: 20px;
+  color: #fff;
+  transition: all 0.2s ease-out, color 0.2s ease-out;
+  border: 0;
+  cursor: pointer;
+  font-weight: 400;
+  font-family: "Poppins", sans-serif;
+}
+
+.s002 form .inner-form .input-field.fifth-wrap .btn-search:hover {
+  background: #af7d51;
+}
+
+@media screen and (max-width: 992px) {
+  .s002 form legend {
+    font-size: 50px;
+    text-align: center;
+    margin-bottom: 50px;
+  }
+  .s002 form .inner-form {
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
+  .s002 form .inner-form .input-field {
+    margin-bottom: 15px;
+  }
+  .s002 form .inner-form .input-field.first-wrap {
+    width: 100%;
+  }
+  .s002 form .inner-form .input-field.second-wrap {
+    width: calc(50% - 7.5px);
+    max-width: none;
+  }
+  .s002 form .inner-form .input-field.third-wrap {
+    width: calc(50% - 7.5px);
+    max-width: none;
+  }
+  .s002 form .inner-form .input-field.fouth-wrap {
+    width: calc(50% - 7.5px);
+    max-width: none;
+    margin-bottom: 0;
+  }
+  .s002 form .inner-form .input-field.fifth-wrap {
+    width: calc(50% - 7.5px);
+    max-width: none;
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .s002 form legend {
+    font-size: 40px;
+    margin-bottom: 40px;
+  }
+  .s002 form .inner-form .input-field.second-wrap,
+  .s002 form .inner-form .input-field.third-wrap,
+  .s002 form .inner-form .input-field.fouth-wrap,
+  .s002 form .inner-form .input-field.fifth-wrap {
+    width: 100%;
+    margin-bottom: 15px;
+  }
+  .s002 form .inner-form .input-field.fifth-wrap {
+    margin-bottom: 0;
+  }
+}
+
+mat-input-infix {
+  margin-top: -13px !important;
+  margin-left: 7px !important;
+}
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..fea6bfb
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DashboardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..612cb0a
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,2177 @@
+import { Component, OnInit , Inject, OnDestroy} from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {DialogContentExampleDialogComponent} from '../dialog-content-example-dialog/dialog-content-example-dialog.component';
+
+
+import {Device} from '../device';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import { Observable } from 'rxjs/Observable';
+import * as io from 'socket.io-client';
+/* import { DeviceReportComponent } from '../device-report/device-report.component';
+ */
+import { DeviceEditComponent } from '../dashboard/device-edit/device-edit.component';
+import {MdSnackBar} from '@angular/material';
+import { DeviceShareComponent } from '../dashboard/device-share/device-share.component';
+import { ShareUserComponent } from '../dashboard/share-user/share-user.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {ContactService} from '../contact.service';
+import { checkNoChangesNode } from '@angular/core/src/view/view';
+import { SpeednotifyComponent } from '../dashboard/speednotify/speednotify.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {DatainjectionService} from '../datainjection.service'
+import { isUndefined } from 'util';
+import { GeneralSettingsComponent } from './general-settings/general-settings.component';
+import { environment } from '../../environments/environment';
+import * as XLSX from 'xlsx';
+import * as fileSaver from 'file-saver';
+const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION = '.xlsx';
+declare var $: any;
+import * as moment from 'moment';
+
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { RenewalHistoryComponent } from './renewal-history/renewal-history.component';
+import { EChalanComponent } from './e-chalan/e-chalan.component';
+import { DeviceDocComponent } from '../kyc-approval/device-doc/device-doc.component';
+import { CertOptionComponent } from '../device/cert-option/cert-option.component';
+import { EditDeviceMasterComponent } from '../device/edit-device-master/edit-device-master.component';
+import { NormalCertComponent } from '../device/normal-cert/normal-cert.component';
+import { ViewCertificateComponent } from './view-certificate/view-certificate.component';
+import { DownloadCertificateComponent } from './download-certificate/download-certificate.component';
+declare var google: any;
+declare var swal: any;
+declare var DataTable: any;
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss'],
+  // providers: [ContactService,SidebarComponent]
+})
+
+
+export class DashboardComponent implements OnInit {
+  skip:number=0;
+  limit:number=25;
+  adbtn: string;
+  chkAddBtn: string;
+  Status_name = [];
+  liecenceStatus="new"
+  distributerValue
+  liecenceTypeArray=[
+    {name:"New",value:"new"},
+    {name:"Renewal",value:"renewal"}
+  ]
+  statusArray = [
+    {name:"RUNNING",status:false,value:"RUNNING"},
+    {name:"IDLING",status:false,value:"IDLING"},
+    {name:"STOPPED",status:false,value:"STOPPED"},
+    {name :"Expired",status : false,value:"Expired"},
+    {name:"OUT OF REACH",status:false,value:"OUT OF REACH"},
+    {name : "NO GPS FIX",status : false,value:"NO GPS FIX"},
+    {name : "NO GPS FIX",status : false,value:"NO GPS FIX"},
+    {name:"NO DATA",status:false,value:"NO DATA"}
+  ];
+ //private url = 'http://localhost:3000/api/graph';  
+  private socket;
+  Load:boolean=false
+ messages = [];
+ connection;
+ graphs:any;
+ message;
+  numberOfOnlineUsers: number;
+devices: Device[];
+device: Device;
+Device_ID: string;
+from_date: Date;
+to_date: Date;
+bsConfig: Partial<BsDatepickerConfig>;
+Serial_Num: string;
+Manf: string;
+Model: string;
+del:boolean = false;
+colorTheme = 'theme-dark-blue';
+Des: string;
+Hardware_Ver: string;
+Loca: string;
+login:any;  
+visibility:any;
+/* tabs: Tab[] = []; */
+calculateResult=[];
+value:any;
+a:any;
+homeVis:any;
+visibility0:any;
+j:any;
+id:any;
+dev:any;
+checked:any
+MdSlideToggleChange :any;
+e: Event;
+d:any;
+expiredVeh:any;
+fs :any;
+ls :any;
+or :any;
+/* e =[];
+ */token :any;
+emailid :any;
+devicess :any;
+devicesss :any;
+userID:any;
+final:any;
+lat:any;
+lng:any;
+latLongArr:any
+convertedToString :String;
+useridd:any;
+notifi = [];
+g:any;
+tableFlag:boolean=true;
+status : any;
+groupId : any;
+statuss : any;
+modelChanged: Subject<string> = new Subject<string>();
+  supAdm: any;
+  DealerID: any;
+  url: string;
+  showNav: boolean = false;
+  count: number =0;
+  customDatafilter: boolean =false;
+  customlimit: any = null;
+  dateId: any;
+  dealer_Permission: any;
+  panelInfo: any;
+  disDataFIlter=[]
+  distributers: any;
+  constructor(
+    public dialog: MdDialog,
+    private injectData: DatainjectionService,
+    public snackBar: MdSnackBar,
+    private router: Router,
+    private contactService: ContactService,
+    private activatedRoute: ActivatedRoute) {
+      this.modelChanged
+      .debounceTime(2000) // wait 300ms after the last event before emitting last eventpublic sidebar: SidebarComponent,
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+        this.tabelObj;
+        this.getdev();
+  
+      });
+      
+     }
+bussinessType;
+showButton:Boolean=false
+  ngOnInit() {
+    // this.updateFieldswithvalue() 
+    
+    this.showDemoVideo();
+    this.socket_Ing = this.injectData.getSocket_gps();
+
+    // this.from_date = new Date();
+    // this.from_date.setDate(1);
+    // this.to_date = new Date();
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    //io.connect('https://www.oneqlik.in/gps', { secure: true, rejectUnauthorized: false, transports: ["polling"], upgrade: false });
+
+    this.socket_Ing.on('connect', function (this) {
+      // console.log('Ignition IO Connected');
+    })
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.adbtn = localStorage.getItem("dlrchk");
+    this.bussinessType=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).bussinessType
+    console.log(this.bussinessType);
+    
+     this.getSuperAdminList()
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    window.localStorage['DataUpdate'] = 'True'
+    if (window.localStorage.FinalAddDevice == 'True') {
+      this.tost1("new_Device");
+    }
+    // this.sidebar.sidebarData();
+    this.notify();
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).device_add_permission;
+    // console.log('this.dealer_Permission',this.dealer_Permission);
+    // console.log("getuserObjectid",this.useridd);
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.dealerTocust = localStorage.getItem('Custumer');
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.panelInfo  = localStorage.getItem('supAdminAcessToCust');
+    // this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).device_add_permission;
+    if(window.localStorage.Dealer_token){
+      // console.log("DEALER TOKEN IS PRESENT");
+      if(JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1])).isDealer){
+        // console.log("IS DEALER");
+        
+        this.dealer_Permission = JSON.parse(window.atob(window.localStorage.Dealer_token.split('.')[1])).device_add_permission;
+        // console.log(this.dealer_Permission);
+        
+      }else{
+        // console.log("!  IS DEALER");
+       this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).device_add_permission; 
+        console.log(this.dealer_Permission);
+      }
+      
+    }else{
+      // console.log("!  OTHER");
+      //  console.log(this.dealer_Permission);
+    }
+    var dealerToken= window.localStorage.Dealer_token?JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1])):''
+    // console.log("IUKIDJKDJKJ",dealerToken,JSON.parse(window.atob(window.localStorage.token.split(".")[1])))
+    
+    // console.log(
+    //   {"Dealer" :this.custtype,"Admin": this.superAdmin,"panelInfo" :window.localStorage['Custumer']}
+    // )
+    
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    let foods = [];
+    console.log("TESTSTSTSTSTT==>",this.custtype,this.dealer_Permission,this.superAdmin,this.bussinessType);
+    
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    if(this.superAdmin){
+      this.supAdm = this.useridd;
+    }
+    if(this.custtype){
+      this.DealerID = this.useridd
+
+    }
+    // console.log(this.superAdmin,this.custtype);
+    if(this.custtype && this.dealer_Permission){
+      this.showButton=true;
+    }else if(this.superAdmin){
+      this.showButton=true;
+    }
+    // ((custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin) && (bussinessType!=0 || bussinessType==undefined)
+
+    // this.activatedRoute.params.subscribe((params: Params) => {
+    //   let id = params['id'];
+     
+    //   this.groupId = id;
+     
+    // });
+    this.emailid = this.emailid ? this.emailid : "";
+    this.useridd = this.useridd ? this.useridd : "";
+    this.status = this.status ? this.status : "";
+    this.groupId = this.groupId ? this.groupId : "";
+    this.statuss = this.statuss ? this.statuss : "";
+    var dateObj = {};
+    this.contactService.getDeviceByFilter(this.emailid, this.useridd, this.groupId, this.status, this.statuss, this.skip, this.limit,this.myInput,this.supAdm,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+      data => {
+        this.devicess = data
+      // console.log("IN NGONINIT",this.devicess);
+        if(this.devicess.devices.length==0){
+          this.firstcall=true;
+          this.lastcall=false;
+        }
+    
+        this.final = this.devicess.devices;
+        for (let i = 0; i < this.devicess.devices.length; i++) {
+          if (this.devicess.devices[i].type_of_device == "Tracker") {
+            let a = {
+              value: this.devicess.devices[i].Device_Name,
+              viewValue: this.devicess.devices[i].Device_Name
+            }
+            foods.push(a);
+          }
+        }
+        this.abc(this.final);
+
+      });
+
+
+ 
+}
+
+
+table1ch(){
+  myFunction();
+      function myFunction() {
+        var input,filter, table, tr, td, i,td1;
+        input = document.getElementById("myInput");
+       
+        filter = input.value.toUpperCase();
+        // console.log(filter);
+        table = document.getElementById("myTable");
+        tr = table.getElementsByTagName("tr");
+        for (i = 0; i < tr.length; i++) {
+          td = tr[i].getElementsByTagName("td")[2];
+          td1= tr[i].getElementsByTagName("td")[0];
+         
+          if (td) {
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+              tr[i].style.display = "";
+              
+            } 
+            else if(td1.innerHTML.toUpperCase().indexOf(filter) > -1){
+              tr[i].style.display = "";
+            
+            }
+            else {
+              tr[i].style.display = "none";
+            }
+          }       
+        }
+      }
+    }
+
+    
+
+    searchFilter(text: string) {
+      this.modelChanged.next(text);
+     
+  
+    }
+  
+
+
+
+cond:Boolean = false;
+point : any = 0;
+ aa(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+
+BB:Boolean = false;
+dataa:Boolean = false;
+
+
+onChange2(q,dname,did,speed){
+  var status2;
+  //console.log(t.rowIndex);
+
+  if(!q.checked){
+  status2 = false;
+  //this.BB = false;
+
+  this.contactService.speedlimit2(did,"false").subscribe(
+      
+    data => {
+      this.dataa = data ;
+      var dateObj = {};
+      this.contactService.getDeviceByFilter(this.emailid,this.useridd,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,this.supAdm,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+        (data)=> {
+        // console.log("11111111111111111122")
+           this.devicess = data 
+           this.final = this.devicess.devices
+          //  console.log(this.final);
+           window.localStorage['DataUpdate'] = 'True';
+          //  this.sidebar.sidebarData();
+       
+        }
+      )
+
+
+    }, (err: any) => {; 
+      // console.log(err);
+    if(err.status !=   200)
+    {
+      this.tost1("NotSucc");
+    }})
+
+  }
+    else{
+      status2 = true
+     // this.BB = true;
+     this.openDialog5(dname,status2,did,speed)
+
+  }
+
+
+}
+
+  onChange(e,d) {
+  var status;
+    if(!e.checked){
+              status = false;
+    }
+    else{
+      status = true
+    }
+
+    this.contactService.getDeviceStatus(d,status).subscribe(
+  
+      data => {
+        this.devicess = data 
+   
+      });
+
+    }
+    devi(){
+      this.router.navigateByUrl("dashboard?_i="+window.localStorage.token);
+  
+    }
+    geo(){
+      this.router.navigateByUrl("geofencing");
+      
+    }
+
+    driverPerformance(){
+      this.cond = false
+      this.router.navigateByUrl("device-report/Driver-performance");
+    }
+    openNav() {
+
+    this.router.navigateByUrl("location");
+
+  }
+  closeNav() {
+    document.getElementById("myNav").style.width = "0%";
+}
+   
+    devv:any;
+    deleteshare(did){
+      this.Load = true
+   //   console.log(did);
+      this.contactService.deldevshr(did,this.useridd)
+      .subscribe(
+      
+         data => {
+
+          this.devv = data 
+          var dateObj = {};
+          this.contactService.getDeviceByFilter(this.emailid,this.useridd,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,this.supAdm,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+  
+            data => {
+             this.devicess = data 
+//  console.log("1111111111111111333311")
+
+             this.final = this.devicess.devices;
+             this.Load =false
+             this.tost1("deleteshareDevice");
+             window.localStorage['DataUpdate'] = 'True'
+            //  this.sidebar.sidebarData();
+            }, (err: any) => {; 
+           
+            if(err.status !=   200)
+            {
+              this.Load =false
+            }});
+
+        });
+    
+    }
+
+
+// delete(did){
+//   swal({
+//     title: 'Are you sure?',
+//     text: "You won't be able to revert this!",
+//     type: 'warning',
+//     showCancelButton: true,
+//     confirmButtonColor: '#3085d6',
+//     cancelButtonColor: '#d33',
+//     confirmButtonText: 'Yes, delete it!'
+//   }).then((result: { value: boolean; }) => {
+//     if (result) {
+//       this.Load =true;
+//       this.contactService.deldev(did)
+//       .subscribe(
+//         data => {
+                     
+//           swal(
+//             'Deleted',
+//             'Device Deleted',
+//             'success'
+//           )
+//           this.dev  = data 
+//           this.contactService.getDeviceByFilter(this.emailid,this.useridd,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,this.supAdm,this.DealerID).subscribe(
+        
+//             data => {
+//               this.devicess = data    
+//               this.final = (this.devicess.devices);
+//               this.Load =false
+//               this.tost1("delete");
+//               window.localStorage['DataUpdate'] = 'True';
+//               this.sidebar.sidebarData();     
+//             }, (err: any) => { 
+//               // console.log(err);
+
+//             if(err.status !=200)
+//             {
+//                this.Load =false
+//             }
+//             this.Load =true;
+//           });  
+//         },err=>{
+//           swal(
+//             'Error',
+//             'Internal Server Error, Please try after sometime !!!',
+//             'success'
+//           )
+//         })    
+//     }
+//   })
+
+
+
+
+// }
+ adddev(){
+  // this.router.navigateByUrl("add-device");
+  // this.panelInfo
+  var distId = this.useridd; 
+
+  if(this.panelInfo==='true'){
+    distId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+  }
+
+  var distPoint = '1';
+  this.contactService.getAvialblePoints(distId,distPoint).subscribe(res=>{
+    if(res.available_points<=0){
+      // console.log("Inside toast");
+      this.data_descip = 'Insufficient Points';
+      launch_toast()
+
+    }else{
+      this.router.navigateByUrl("add-device");
+    }
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+
+})
+
+
+ 
+}
+vewdev(id,name,type,expDate){
+
+  let currDate = new Date().getTime();
+  let chkDate = new Date(expDate).getTime();
+
+  // console.log("Inside adddiv");
+ // console.log(id + name);
+ var dataStatus = {
+  vehicleId:id,
+  vehicleName:name,
+  vehicleType:type
+}
+
+if(currDate>chkDate){
+  // console.log("Service expired !!!")
+  this.tost1("experr");
+
+}
+
+ else if(type=="Tracker"){
+
+    this.router.navigateByUrl("location?_dname="+name+"_id="+id);
+    window.localStorage['devDetail']= JSON.stringify(dataStatus);
+    
+    
+  }
+  else{
+  this.router.navigateByUrl("account?_did="+id+"."+name); 
+  }
+}
+
+  selectedIndex:number=0;
+  clickMe(value){
+    this.selectedIndex=this.value;
+    if(!this.visibility0)
+    this.visibility0=!this.visibility0; 
+  }
+
+  onLinkClick($event: any) {
+    // console.log($event);
+  
+  }
+
+  cancle(a){
+    // console.log(a);   
+    this.visibility0=!this.visibility0;  
+  }
+  
+ 
+sha :any;
+// openDialog4(a,b,c){
+
+//   let dialogRef = this.dialog.open(ShareUserComponent, {
+//     width: '528px',
+//     data: { name: a, dname:b, did:c}
+//   });
+
+//   dialogRef.afterClosed().subscribe(result => {
+    
+//     // console.log(result);
+//     if(result == "OKK"){
+//       this.tost1("removeuser");
+//       window.localStorage['DataUpdate'] = 'True';
+//       this.sidebar.sidebarData(); 
+//     }
+//     else if(result == "No_Dev"){
+//       this.tost1("No_Dev");
+
+//     }
+//   });
+
+// }
+// openDialog3(a,b){
+//   let dialogRef = this.dialog.open(DeviceShareComponent, {
+//     width: '528px',
+//     data: { name: a , did:b}
+//   });
+
+//   dialogRef.afterClosed().subscribe(result => {
+//     // console.log(result);
+//     if(result == "OK"){
+//       this.tost1("share");
+//       window.localStorage['DataUpdate'] = 'True';
+//       this.sidebar.sidebarData(); 
+//     }
+//   });
+// }
+
+openDialog5(dname,status,did,speed){
+  let dialogRef = this.dialog.open(SpeednotifyComponent, {
+    width: '528px',
+    data: { dname: dname , did:did, status:status, speed:speed}
+  });
+
+  dialogRef.afterClosed().subscribe(result => {
+   // console.log(result);
+
+    let  foods = [];
+    var dateObj = {}
+    this.contactService.getDeviceByFilter(this.emailid,this.useridd,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,this.supAdm,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+      
+      data => {
+     
+        this.devicess = data 
+        //  console.log("111111111111144444111")
+
+       /*  this.final = this.devicess.devices[0]; */
+       this.final = (this.devicess.devices);
+    
+      //  console.log(this.final);
+      
+       for(let i=0;i<this.devicess.devices.length;i++){
+       
+         if(this.devicess.devices[i].type_of_device =="Tracker"){
+           let a ={
+            value : this.devicess.devices[i].Device_Name,
+            viewValue:this.devicess.devices[i].Device_Name
+           }
+           foods.push(a);
+         }
+      
+       }
+  
+      });
+
+      if(result == "device_alert"){
+        this.tost1("device_alert");
+      }
+      else if(result == null){
+       this.ngOnInit();
+      }
+  });
+
+
+
+}
+
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+  
+}
+
+myInput:any;
+data_descip :any;
+before:any;
+// TOAST
+
+
+tost1(divid){
+if(divid == "share"){
+  this.data_descip = "Device Succesfully Shared";
+  launch_toast();
+}else if(divid == "experr"){
+  this.data_descip = "Access denied, Service expired";
+  launch_toast();
+}
+else if(divid == "delete"){
+  this.data_descip = "Device Deleted Succesfully";
+  launch_toast();
+}
+else if(divid == "update"){
+  this.data_descip = "Device Succesfully Updated";
+  launch_toast();
+}
+else if(divid == "blankemail"){
+  this.data_descip = "Blank Email ID or Mobile Number";
+  launch_toast();
+}
+else if(divid == "deleteshareDevice"){
+  this.data_descip = "Share Device Succesfully Removed";
+  
+  launch_toast();
+}
+else if(divid == "removeuser"){
+  this.data_descip = "Share Device User Succesfully Removed";
+  
+  launch_toast();
+}
+
+
+
+else if(divid == "No_Dev"){
+  this.data_descip = "No Shared Users for this Device";
+  
+  launch_toast();
+}
+else if(divid == "device_alert"){
+  this.data_descip = "Speed Alert Sucessfully Added";
+  launch_toast();
+}
+else if(divid == "NotSucc"){
+  this.data_descip = "Speed Alert Removed";
+  launch_toast();
+}
+else if(divid == "new_Device"){
+  window.localStorage['FinalAddDevice'] = 'False'
+  this.data_descip = "New Device Added";
+  launch_toast();
+}
+  function launch_toast() {
+   // console.log(divid);
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+}
+ }
+  openDialog2(a,b,c,d,e,f,g,h,i,j,k,user,vehType,dev_IMEI,simProvider,totalODO,inteId,sim2,simprovider2,device,sellsPerson,installer): void {
+    var internalThat  = this;
+    let dialogRef = this.dialog.open(DeviceEditComponent, {
+      width: '950px',
+      // height: '1160px',   
+      data: { _id: a, des: b, sim:c, dname:d, speed:e,iconType:f,drname:g,dcontact:h,expdate:i,model:j,mainmodel:k,assigned_to:user,vehicleType:vehType,devIMEI:dev_IMEI,S_provider:simProvider,tot_ODO:totalODO,itiId:inteId,simNUM2:sim2,simProvider2:simprovider2,devObj:device,sellsPerson:sellsPerson,installer:installer}
+      
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log("result",result);
+      this.ngOnInit();
+     
+        if(result=="done"){
+          // console.log("resultdone",result)
+          this.tost1("update");
+          window.localStorage['DataUpdate'] = 'True';
+          // this.sidebar.sidebarData();       
+        }
+    });
+  }
+
+  // editDeviceInformation(deviceforedit: Object) {
+  //   var that = this;
+  //   deviceforedit['actionFlag'] = 'edit';
+  //   console.log('DeviceObject=>', deviceforedit);
+  //   localStorage.setItem('deviceforedit',JSON.stringify(deviceforedit))
+  //   this.router.navigateByUrl("add-device");
+   
+
+  // }
+  
+
+  shareOwner:any;
+  ss:any;
+  y:any;
+  test3(a,b){
+    if(b){
+      let u = b.split(",");
+      for(let p=0 ; p<u.length; p++){
+        if(this.useridd == u[p]){
+          this.y=a;
+          return true;
+        } 
+      }
+    }
+   else{
+     return false;
+   }
+    
+    
+  }
+
+//   updateFieldswithvalue(){
+//     this.contactService.tempDevicedata.subscribe(res=>{
+//     console.log("tempdeviceobject=fhlkdsjksaldjasd>",res);  
+//   });
+// }
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  
+
+
+  test1(a,b){
+    if(b){
+      let u = b.split(",");
+      for(let p=0 ; p<u.length; p++){
+        if(this.useridd == u[p]){
+          return true;
+        } 
+      }
+    }
+   else{
+     return false;
+   }
+    
+  }
+
+  test(a,b){
+  
+    if(b){
+      return !(b.split(",").indexOf(a)+1); 
+    }
+   else{
+     return true;
+   }
+  }
+
+
+notify(){
+  
+let a ={
+  "NoteDate":"Notification1"
+}
+this.notifi.push(a);
+let b ={
+  "NoteDate":"Notification2"
+}
+this.notifi.push(b);
+// console.log(this.notifi);
+this.g= this.notifi;
+}
+
+
+custtype:any;
+cust:boolean=false;
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+getdev(){
+  // console.log("Inside Anonym function")
+  let foods = [];
+
+  // console.log("statusName = > ", this.Status_name);
+  if(this.Status_name != null){
+    // console.log();
+    this.statuss = this.Status_name;
+  }
+
+  var dateObj = {};
+ 
+  if((this.dateId == 'todate')||(this.to_date != undefined)){
+      dateObj['to_date'] = this.to_date.toISOString();
+
+  }
+  if((this.dateId == 'fdate')||(this.from_date != undefined)){
+    dateObj['from_date'] = this.from_date.toISOString();
+  }
+ 
+  this.dateId='';
+  this.contactService.getDeviceByFilter(this.emailid,this.useridd,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,this.supAdm,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+      
+    data => {
+    
+      this.devicess = data 
+      this.final = this.devicess.devices
+      // console.log("IN GET DEV",this.final);
+
+      
+     for(let i=0;i<this.devicess.devices.length;i++){
+     
+       if(this.devicess.devices[i].type_of_device =="Tracker"){
+         let a ={
+          value : this.devicess.devices[i].Device_Name,
+          viewValue:this.devicess.devices[i].Device_Name
+         }
+         foods.push(a);
+       }
+    
+     }
+     this.abc(this.final);
+    });
+  
+
+}
+
+ign(){
+  this.router.navigateByUrl("device-report/ign-report");
+
+}
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+data_to_view=[];
+Durations:any;
+superAdmin:Boolean = false;
+socket_Ing:any;
+dealerTocust:any;
+ 
+
+  
+/*   this.socket = io.connect('https://13.126.36.205:5000');
+  this.socket.on('connect', function(){
+    console.log("IO Connected");
+  
+  }); */
+  deviceData=[];
+  arrival_time:any;
+  baba=[]
+  status_toShow:any;
+  address_show:any;
+  lattitude:any;
+  longitude:any;
+
+
+  
+
+  abc(div){
+  // console.log("deviceObj=>",div)
+  var that = this;
+   this.baba=[];
+   this.deviceData=div;
+   var outerThis = this;
+   var start_add:any;
+  //  console.log("Initial Value",this.deviceData);
+
+    for(var j=0;j<this.deviceData.length;j++){
+     
+      if(this.deviceData[j].status_updated_at==undefined){
+       let  dev_status_1= this.deviceData[j].status?this.deviceData[j].status:"Not available";
+       this.deviceData[j].status  =  dev_status_1 ;
+      //  console.log("Not Available !!!");
+      }else{
+         
+          // this.arrival_time = new Date(this.deviceData[j].status_updated_at)
+
+          let  dev_status= this.deviceData[j]?this.deviceData[j].status:"NA";
+           
+        
+            // var curr_time= new Date();
+            // var fd = new Date(this.arrival_time).getTime();
+            // var td = curr_time.getTime();
+            // var timedev_status_difference = td-fd;
+            // var total_min = timedev_status_difference/60000;
+            // var hours = total_min/60
+            // var rhours = Math.floor(hours);
+            // var minutes = (hours - rhours) * 60;
+            // var rminutes = Math.round(minutes);
+          
+            // this.Durations = rhours + " "+'hrs'+ " " +  rminutes + " " + 'min';      
+            // // console.log("vehicle=>",this.Durations)
+
+            
+        // new conversion logic
+        var curr_time:any = new Date();
+        this.arrival_time = new Date(this.deviceData[j].status_updated_at);
+        var fd:any = new Date(this.arrival_time);
+        // console.log('curr_time',curr_time,this.arrival_time);
+        var diffInMilliSeconds= Math.abs(curr_time - fd) / 1000;
+
+        // calculate days
+        const days = Math.floor(diffInMilliSeconds / 86400);
+        diffInMilliSeconds -= days * 86400;
+        // console.log('calculated days', days);
+    
+        // calculate hours
+        const hours = Math.floor(diffInMilliSeconds / 3600) % 24;
+        diffInMilliSeconds -= hours * 3600;
+        // console.log('calculated hours', hours);
+    
+        // calculate minutes
+        const minutes = Math.floor(diffInMilliSeconds / 60) % 60;
+        diffInMilliSeconds -= minutes * 60;
+        // console.log('minutes', minutes);
+    
+        let difference = '';
+        if (days > 0) {
+          difference += (days === 1) ? `${days} day, ` : `${days} days, `;
+        }
+    
+        difference += (hours === 0 || hours === 1) ? `${hours} hour, ` : `${hours} hours, `;
+    
+        difference += (minutes === 0 || hours === 1) ? `${minutes} minutes` : `${minutes} minutes`; 
+    
+   // new conversion logic
+          this.Durations = difference ; 
+            if(dev_status==undefined){
+              
+              this.status_toShow = "NA";
+    
+            }else{
+              this.status_toShow = dev_status + " " + "Since" +" "+ this.Durations;
+            }
+    
+            this.deviceData[j].status  =  this.status_toShow ;
+      }
+   
+    }
+      // datatable will be called from here
+     
+      if(this.tableFlag === true){
+        this.testTable(); 
+    
+      }else{
+       
+         this.tabelObj.clear();
+         this.tabelObj.rows.add(this.deviceData); 
+         this.tabelObj.draw();      
+       
+      }
+      this.tableFlag = false;
+
+ }
+
+
+
+  // getExpvehData(expiredVeh,$event){
+  //   // console.log(expiredVeh,$event)
+  //   var status = expiredVeh;
+  //   var Expstatus = 0;
+  //   this.Load =true;
+  //   this.contactService.getExpVehDetails(this.useridd,this.emailid,status,Expstatus,this.limit,this.myInput,this.supAdm,this.DealerID)
+  //     .subscribe(res=>{
+  //       this.Load = false;
+  //       // console.log(res);
+  //       this.final = res.devices;
+  //       this.abc(this.final)
+
+  //     },err=>{
+  //       this.Load =false;
+  //       swal(
+  //         'Error',
+  //         'Internal Server error, Please try aftersometime !!!',
+  //         'error'
+  //       )
+
+  //     })
+  // }
+
+
+  firstcall:boolean=false;
+  lastcall:boolean=true;
+  next() {
+    this.deviceData =[];
+    this.lastcall=false;
+    this.skip += 1; 
+    // this.sidebarData();
+    this.ngOnInit();
+  }
+  pre() {
+    this.deviceData=[]
+    // console.log(this.skip)
+    if(this.skip>0){
+      this.skip -= 1;   
+      this.lastcall=false;
+      // this.sidebarData();
+      this.ngOnInit();
+    }else{
+      this.lastcall=true;
+      this.firstcall=false;
+    }
+   
+  }
+
+  licenceStatus(ev){
+    // console.log(this.liecenceStatus,ev);
+    this.getdev();
+    
+  }
+
+  selectedStatus(ev,ind){
+    // this.statusArray[ind].status = !this.statusArray[ind].status;
+    this.Status_name = ev.value;
+    // console.log('indindindindindindindindindindindindind',this.Status_name);
+   
+      this.getdev();
+    
+    // if(this.statusArray[ind].status){
+    //   this.Status_name.push(this.statusArray[ind].value);
+    //   this.getdev();
+
+    // }
+    // else{
+    //   this.Status_name.splice(this.Status_name.indexOf(this.statusArray[ind].value),1);
+    //   this.getdev();
+    // }
+
+    // console.log('this.Status_name',this.Status_name);
+  }
+
+  // deviceSetting(deviceObj){
+  //   console.log("clicked",deviceObj);
+  //   let dialogRef = this.dialog.open(GeneralSettingsComponent, {
+    
+  //     data: { device :deviceObj}
+  //   });
+  
+  //   dialogRef.afterClosed().subscribe(result => {
+  //     console.log(result);
+  //     if(result == 'cancelled'){
+  //       this.ngOnInit();
+  //     }
+  //   })
+  // }
+
+  showMenu = environment.showLandingpageMenu;
+  showDemoVideo(){
+    let split1 = document.URL.split('//')[1];
+    // console.log(split1,document);
+    let split2 = split1.split('/')[0];
+    let splitForStyle = split1.split('/')[1];
+    this.url =  split2;
+    // console.log("split2",this.url);
+      for(var i = 0; i <this.showMenu.length;i++){
+        if (this.url == 'www.oneqlik.in') {
+          this.showNav = true;
+            return;
+        } else {
+          this.showNav = false;
+        }
+      }
+  
+  }
+
+
+  // datatable work starts here
+  devStatus:any;
+  tabelObj
+  // tabelObj=$('#deviceTable1').DataTable(); 
+  callfunction(): void {
+    // console.log(this.deviceData);
+    this.tabelObj.draw();
+}
+
+testTable() {
+  const that = this;
+  $(document).ready(function() { 
+    // console.log("called on every click");
+      that.tabelObj = $('#deviceTable1').DataTable({   
+          "serverSide": false,
+          "processing": false,
+          "paging" :false,
+          "searching": false,
+          'deferRender':true,
+          "autoWidth": true,
+          "bInfo" : false,
+          "scrollX": true,
+          "scrollY":540,      
+          "order": [[0, "desc"]],
+          "scrollCollapse": true,
+          'responsive':true,
+          // "fixedColumns": {
+          //   leftColumns: 2,
+          // },    
+          lengthMenu: [[10, 25, 50, 100,200,500], [10, 25, 50, 100,200,500]],
+          "pageLength": 25,
+          "data" : that.deviceData,      
+          "rowCallback": function(row: Node, data: any | Object, index: number){     
+            $('#deviceSetting', row).bind('click', () => {  
+          
+              let dialogRef = that.dialog.open(GeneralSettingsComponent, {    
+                data: { device :data}
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                // console.log(result);
+                if(result == 'cancelled'){
+                  that.ngOnInit();
+                }
+              })  
+             
+              
+            }); 
+            $('#speedAlert', row).bind('click', () => {    
+            
+              
+            }); 
+            $('#shareDevice', row).bind('click', () => {    
+              // openDialog3(a,b){
+                // console.log(data);
+                var dname = data.Device_Name;
+                var devid= data._id;
+                let dialogRef = that.dialog.open(DeviceShareComponent, {
+                 
+                  width: '528px',
+                  data: { name: dname , did:devid}
+                });
+              
+                dialogRef.afterClosed().subscribe(result => {
+                  // console.log(result);
+                  if(result == "OK"){
+                    that.tost1("share");
+                    window.localStorage['DataUpdate'] = 'True';
+                    // that.sidebar.sidebarData(); 
+                  }
+                });
+              // }
+             
+              
+            }); 
+            $('#shareUser', row).bind('click', () => {   
+              var vehid = data._id;
+              var dname = data.Device_Name;
+              var vehID = data.Device_ID; 
+              let dialogRef = that.dialog.open(ShareUserComponent, {
+                width: '528px',
+                data: { name: vehid, dname:dname, did:vehID}
+              });      
+              dialogRef.afterClosed().subscribe(result => {
+                
+                // console.log(result);
+                if(result == "OKK"){
+                  that.tost1("removeuser");
+                  window.localStorage['DataUpdate'] = 'True';
+                  // that.sidebar.sidebarData(); 
+                }
+                else if(result == "No_Dev"){
+                  that.tost1("No_Dev");
+            
+                }
+              });
+             
+             
+            }); 
+
+            $('#edit', row).bind('click', () => {   
+              var internalThat  = that;
+              // console.log('rowrowrowrow=>',row);
+              // console.log('datadatadatadata',data);
+
+              if(that.bussinessType=='1'){
+                localStorage.setItem('deviceData',JSON.stringify(data))
+                that.router.navigate(['/editDevice']);
+              }else{
+                let dialogRef = that.dialog.open(DeviceEditComponent, {
+                  width: '950px',
+                  // height: '1160px',   
+                  data: { _id: data._id, des: data.Device_Des, sim:data.sim_number, dname:data.Device_Name, speed:data.SpeedLimit,iconType:data.iconType,
+                    drname:data.driver_name,dcontact:data.contact_number,expdate:data.expiration_date,model:data.maxSpeed,mainmodel:data.device_model,
+                    assigned_to:data.user,vehicleType:data.vehicleType,devIMEI:data.Device_ID,S_provider:data.sim_provider,tot_ODO:data.total_odo,
+                    itiId:data.integrationId,simNUM2:data.sim_number2,simProvider2:data.sim_provider2,devObj:data,
+                    distanceVariation:data.distanceVariation?data.distanceVariation:null,sellsPerson:data.sellsPerson?data.sellsPerson:null,
+                  installer:data.installer?data.installer:null}
+                  
+                });
+            
+                dialogRef.afterClosed().subscribe(result => {
+                  // console.log("result",result);
+                  that.ngOnInit();
+               
+                    if(result=="done"){
+                      // console.log("resultdone",result)
+                      that.tost1("update");
+                      window.localStorage['DataUpdate'] = 'True';
+                      // that.sidebar.sidebarData();       
+                    }
+                });              
+
+              }
+          
+            }); 
+            $('#renewalHistory',row).bind('click',()=>{
+              // console.log(data);
+              let dialogRef = that.dialog.open(RenewalHistoryComponent, {
+                width: '950px',
+                // height: '1160px',   
+                data: { _id: data._id, des: data.Device_Des, sim:data.sim_number, dname:data.Device_Name, speed:data.SpeedLimit,iconType:data.iconType,drname:data.driver_name,dcontact:data.contact_number,expdate:data.expiration_date,model:data.maxSpeed,mainmodel:data.device_model,assigned_to:data.user,vehicleType:data.vehicleType,devIMEI:data.Device_ID,S_provider:data.sim_provider,tot_ODO:data.total_odo,itiId:data.integrationId,simNUM2:data.sim_number2,simProvider2:data.sim_provider2,devObj:data,distanceVariation:data.distanceVariation?data.distanceVariation:null}
+                
+              });
+
+              dialogRef.afterClosed().subscribe(result => {
+
+              })
+              
+            });
+
+             $('#echalan',row).bind('click',()=>{
+              // console.log(data);
+              let dialogRef = that.dialog.open(EChalanComponent, {
+                // width: '950px',
+                // height: '1160px',   
+                data: { _id: data._id, dname:data.Device_Name}
+                
+              });
+
+              dialogRef.afterClosed().subscribe(result => {
+
+              })
+              
+            });
+            $('#certificate',row).bind('click',()=>{
+              // console.log(data);
+              var docs=data
+              // var  that =this;
+    docs.ID = 'viewDoc',
+    docs.hide=true;
+    // console.log(docs);
+    let dialogRef = that.dialog.open(DeviceDocComponent, {
+      width: '900px', 
+      // height:'900px',
+      data: { dealer_payload: docs }
+    });
+
+              dialogRef.afterClosed().subscribe(result => {
+
+              })
+              
+            });
+             $('#certificate1',row).bind('click',()=>{
+              that.exportCertificate(data)
+              
+            });
+
+            $('#delete', row).bind('click', () => {   
+                swal({
+                  title: 'Are you sure?',
+                  text: "You won't be able to revert this!",
+                  type: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Yes, delete it!'
+                }).then((result: { value: boolean; }) => {
+                  if (result) {
+                    that.Load =true;
+                    var req={
+                      device:data.Device_ID,
+                      userId:that.useridd
+                    }
+                    that.contactService.deldev(req)
+                    .subscribe(
+                      data => {
+                                   
+                        swal(
+                          'Deleted',
+                          'Device Deleted',
+                          'success'
+                        )
+                        that.dev  = data 
+                        var dateObj = {}
+                        that.contactService.getDeviceByFilter(that.emailid,that.useridd,that.groupId,that.status,that.statuss,that.skip,that.limit,that.myInput,that.supAdm,that.DealerID,dateObj,that.liecenceStatus).subscribe(
+                      
+                          data => {
+                            that.devicess = data    
+                            // console.log("1111111111111111111")
+                            that.final = (that.devicess.devices);
+                            that.Load =false
+                            that.tost1("delete");
+                            window.localStorage['DataUpdate'] = 'True';
+                            // that.sidebar.sidebarData();     
+                          }, (err: any) => { 
+                            // console.log(err);
+              
+                          if(err.status !=200)
+                          {
+                             that.Load =false
+                          }
+                          that.Load =true;
+                        });  
+                      },err=>{
+                        if(err.status==401){
+                          swal(
+                            "Access Denied !!"
+                          )
+                        }else{
+
+                          swal(
+                            'Error',
+                            'Internal Server Error, Please try after sometime !!!',
+                            'success'
+                          )
+                        }
+                      })    
+                  }
+                })
+            }); 
+
+              },
+          "columns": [
+            {
+              "data": "_id",
+              "visible" :false,
+              "defaultContent": "",
+              "render": function(data, type, row) {
+                  return data ? data : "";
+              }
+          },
+              {
+                  "data": "Device_Name",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      return data ? data : "";
+                  }
+              },
+              {
+                  "data": "vehicleGroup",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var grp ='';
+                    if(data){
+                        grp = data.name ; 
+                    }
+                
+                      return grp;
+                  }
+              },
+              {
+                  "data": "Device_ID",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                      return data ? data : "";
+                  }
+              },
+              {
+                  "data": "integrationId",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var intid = '';
+                    if(data){
+                      intid = data;
+                    }
+                      return intid;
+                  }
+              },
+              {
+              "data": "sim_number",
+              "defaultContent": "",
+               render: function(data, type, row) {
+                  return data ? data : "";
+                  }
+              },
+              {
+                  "data": "sim_provider",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                      return data ? data : "";
+                  }
+              },
+              {
+                  "data": "sim_number2",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      return data?data:'';
+                  }
+              },
+              {
+                  "data": "sim_provider2",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                    return data?data:'';
+                  }
+              },
+              {
+                  "data": "device_model",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                    return data?data.device_type:"NA"
+                  }
+              },
+        
+              {
+                  "data": "vehicleType",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                    // console.log('vehicleType',data);
+                  return  data ? (data.brand + " " + data.model):'NA'
+                   
+                  }
+              },
+              {
+                  "data": "status",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      return data ? data : "";
+                  }
+              },
+              {
+                  "data": "user",
+                  "defaultContent": "",
+                  "visible" :true,
+                  "render": function(data, type, row) {
+                 
+                    var fn = data?data.first_name:'-' ; 
+                    var ln = data?data.last_name:'-'
+                    return fn + ' ' + ln ;
+                  }
+              },     
+              {
+                "data": "created_by",
+                "defaultContent": "",
+                "visible" :true,
+                "render": function(data, type, row) {
+             
+                  var fn1 = data?data.first_name:'-' ; 
+                  var ln1 = data?data.last_name:'-'
+                  return fn1 + ' ' + ln1 ;
+                }
+            },     
+            {
+                "data": "Dealer",
+                "defaultContent": "",
+                "visible" :true,
+                "render": function(data, type, row) {
+             
+                  var fn1 = data?data.first_name:'-' ; 
+                  var ln1 = data?data.last_name:'-'
+                  return fn1 + ' ' + ln1 ;
+                }
+            },
+            {
+              "data": "created_on",
+              "defaultContent": "",
+              "visible" :true,
+              "render": function(data, type, row) {
+                var createdDate = new Date(data);
+                return data ? (moment(createdDate).format('LL')) : "";   
+              }
+          },     
+            {
+              "data": "expiration_date",
+              "defaultContent": "",
+              "visible" :true,
+              "render": function(data, type, row) {         
+                  var expDate = new Date(data);
+                  return data ? (moment(expDate).format('LL')) : "";   
+              }
+          },
+          {
+              "data": "renew_at",
+              "defaultContent": "",
+              "visible" :true,
+              "render": function(data, type, row) {         
+                  var expDate = new Date(data);
+                  return data ? (moment(expDate).format('LL')) : "";   
+              }
+          },
+          {
+              "data": "renew_by",
+              "defaultContent": "",
+              "visible" :true,
+              "render": function(data, type, row) { 
+                if(data){
+                  var name =(data.first_name?data.first_name:'')+' '+(data.last_name?data.last_name:'');
+                  return name ? name : "";   
+                }else ''        
+              }
+          },     
+          {
+            "data": "driver_name",
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return data ? data : "";
+            }
+        },
+        {
+            "data": "contact_number",
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return data ? data : ""
+            }
+        },
+
+        {
+            "data": "sellsPerson",
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return data ? data : ""
+            }
+        },
+        {
+            "data": "installer",
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return data ? data.first_name+' '+data.last_name : ""
+            }
+        },
+         {
+            "data": "last_ping_on",
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                 var expDate = new Date(data);
+                  return data ? (moment(expDate).format('lll')) : ""; 
+            }
+        },
+              {
+                  "data":null,
+                  "defaultContent": "",
+                  "render":function(data,type,row){                      
+                    return '<i id="deviceSetting" style="font-size:20px" title="Share device" class="fas fa-cog"></i>'
+              }
+          } , 
+      {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){    
+              return '<i id="shareDevice" title="Share device" style="font-size:20px" class="fas fa-share-alt"></i>'              
+          }  
+  },
+  {                
+      "data":null,
+      "defaultContent": "",
+      "render":function(data,type,row){
+       
+          return '<i id="shareUser" title="Share user" style="font-size:20px" class="fas fa-share"></i>'           
+      }
+  }, 
+  {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){   
+      return '<i id="renewalHistory" title="Show Renewal History" style="font-size:20px;color:green" class="fas fa-history"></i>'     
+}
+},
+ 
+      {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-edit"></i>'    
+      }
+  } ,   
+  {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){   
+      if(row.kycStatus) {
+        if(row.kycStatus=="Approved") {
+          return '<i  title="Unable to delete" style="font-size:20px;color:gray;cursor: not-allowed;" class="fas fa-trash-alt"></i>'  
+  
+        }else{
+           return '<i id="delete" title="Delete Vehicle" style="font-size:20px;color:red" class="fas fa-trash-alt"></i>'
+        }
+      }else{
+           return '<i id="delete" title="Delete Vehicle" style="font-size:20px;color:red" class="fas fa-trash-alt"></i>'
+      }
+          
+}
+  },
+
+   {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){   
+      return '<i id="echalan" title="Delete Vehicle" style="font-size:20px;color:red" class="fas fa-ticket-alt"></i>'     
+}
+  },
+  {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){   
+      return '<i id="certificate" title="Documents" style="font-size:20px;color:red" class="fas fa-file"></i>'     
+    }
+    },
+{
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){ 
+      if(row.kycStatus) {
+        if(row.kycStatus=="Approved") {
+          return '<i id="certificate1" title="Download Certificate" style="font-size:20px;color:red" class="fas fa-download"></i>'     
+  
+        }else{
+          return '<i  title="Please approve kyc to Download certificate" style="font-size:20px;color:gray;cursor: not-allowed;" class="fas fa-download"></i>'
+        }
+      }else{
+
+      }
+}
+  },
+  {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){ 
+      if(row.remark) {
+       return row.remark
+      }
+  }
+},
+   {
+    "data":null, 
+    "defaultContent": "",
+    "render":function(data,type,row){   
+      var str
+      if(row.kycStatus==undefined || row.kycStatus=='Pending'){
+        str="<button class='btn btn-warning btn-sm' style='border-radius: 40px; font-size: x-small;'>Pending</button>"
+      }else if(row.kycStatus=="Approved"){
+        str="<button class='btn btn-success btn-sm' style='border-radius: 40px; font-size: x-small;'>Approved</button>"
+      }else{
+        str="<button class='btn btn-danger btn-sm' style='border-radius: 40px; font-size: x-small;'>Rejected</button>"
+      }
+          // <button class="btn btn-warning btn-sm"
+          //   style="border-radius: 40px; font-size: x-small; background-color: orange;"
+          //   *ngIf="cust_array.kycStatus=='Pending'">{{cust_array.kycStatus}}</button>
+          // <button class="btn btn-success btn-sm"
+          //   style="border-radius: 40px; font-size: x-small; background-color: green;"
+          //   *ngIf="cust_array.kycStatus=='Approved'">{{cust_array.kycStatus}}</button>
+          // <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;"
+          //   *ngIf="cust_array.kycStatus=='Reject'">{{cust_array.kycStatus}}</button>
+      
+      
+      return str
+      // '<i id="certificate" title="Documents" style="font-size:20px;color:red" class="fas fa-file"></i>'     
+    }
+    },
+                 
+          ],
+
+      
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34] },
+              // { width: '20%', targets: 0 } ,
+             
+            ]
+      
+      });
+    //   $('#deviceTable').on( 'length.dt', function ( e, settings, len ) {
+    //     console.log( 'New page length: '+len );
+    //     that.customDatafilter = true;
+    //     this.skip = 0;
+    //     that.limit = len;
+    //     that.getdev();
+
+      
+    // });
+    // that.testGround()
+  
+      that.colSwitch()
+   
+  });
+
+
+}
+
+exportCertificate(data){
+  
+                        data.actionId = "exportPdf";
+
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+                        //   data.Dealer_name = JSON.parse(JSON.stringify(data))
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;data.deviceImage=data.deviceImage
+                        let dialogRef
+                        if(this.bussinessType=="1"){
+                            dialogRef = this.dialog.open(DownloadCertificateComponent, {
+                              data: { "deviceInfo": data },
+                              width:'950px'
+                          });
+                        }else{
+                          dialogRef = this.dialog.open(ViewCertificateComponent, {
+                              data: { "deviceInfo": data }
+                          });
+
+                        }
+
+
+                        dialogRef.afterClosed().subscribe(result => {
+                            // console.log(result);
+
+                            // if (result == "advance") {
+                            //     let dialogRef_1 = this.dialog.open(EditDeviceMasterComponent, {
+                            //         data: { "deviceInfo": data },
+                            //         width: '650px',
+                            //         height: '700px',
+                            //     });
+                            // }
+
+                            // if (result == "basic") {
+                            //     let dialogRef_2 = this.dialog.open(NormalCertComponent, {
+                            //         data: { "deviceInfo": data }
+                            //     });
+                            // }
+                        })
+}
+
+// testGround(){
+//     var aaaaaaaa= new $.fn.datatable.FixedColumns(this.tabelObj, {
+//       leftColumns: 4
+//      });
+  
+//      console.log('aaaaaaaa',aaaaaaaa);  
+
+
+ 
+// }
+
+
+
+
+ colSwitch(){
+
+      // this.tabelObj.column( 22 ).visible( false );
+      this.tabelObj.column( 29).visible( false );
+      this.tabelObj.column( 31 ).visible( false );
+      this.tabelObj.column( 32 ).visible( false );
+      this.tabelObj.column( 33 ).visible( false );
+      this.tabelObj.column( 28 ).visible( false );
+      this.tabelObj.column( 26).visible( false ); 
+      this.tabelObj.column( 27).visible( false ); 
+       this.tabelObj.column( 34 ).visible( false );
+        if((this.superAdmin ==true)||(this.custtype ==true)||(this.dealerTocust=='ON')){
+          // this.tabelObj.column( 22 ).visible( true );
+          this.tabelObj.column( 28).visible( true );       
+          this.tabelObj.column( 29).visible( true ); 
+         
+          this.tabelObj.column( 26).visible( true );
+          this.tabelObj.column( 27).visible( true );
+          this.tabelObj.column(15).visible( true );
+          this.tabelObj.column( 13).visible( true ); 
+           
+          if(this.bussinessType=='1'){
+            this.tabelObj.column( 31 ).visible( true );
+            this.tabelObj.column( 32 ).visible( true );
+            this.tabelObj.column( 33 ).visible( true );
+            this.tabelObj.column( 34 ).visible( true );
+          }
+        }
+
+        if((this.superAdmin ==false)&&(this.custtype ==false)){
+          this.tabelObj.column( 9 ).visible( false );
+                                     
+        }
+    }
+
+    tab:any;
+
+  exportExcel1() {
+
+    var data = this.devicess.devices
+
+    for (var i = 0; i < data.length; i++) {
+      data[i].device_models = data[i].device_model ? data[i].device_model.device_type ? data[i].device_model.device_type:"N/A":"N/A"
+      data[i].kycApprovalDate = data[i].kycApprovalDate ? moment(data[i].kycApprovalDate).format('LL') : "N/A"
+      if (data[i].Dealer){
+        var pin = data[i].user.pin ? data[i].user.pin : ""
+        var address = data[i].user.address ? data[i].user.address : ""
+        var name = data[i].Dealer.first_name ? data[i].Dealer.first_name : ""+" " + data[i].Dealer.last_name ? data[i].Dealer.last_name : ""
+        data[i].dealerName = name;
+       
+
+      
+      }
+      if (data[i].user) {
+        var name1 = data[i].user.first_name ? data[i].user.first_name : "" + " " + data[i].user.last_name ? data[i].user.last_name : ""
+        data[i].customerName = name1;
+        
+        data[i].customerId = data[i].imageDoc[0] ? data[i].imageDoc[0].phone ? data[i].imageDoc[0].phone : "" :""
+      }
+      var pin = data[i].user.pin ? data[i].user.pin : ""
+      var address = data[i].user.address ? data[i].user.address : ""
+      data[i].address = address;
+      data[i].pin = pin;
+      if(i==data.length-1){
+        this.downloadFile(this.devicess.devices);
+      }
+      // this.exportAsExcelFile(this.devicess.devices, 'sample');
+      // const workBook = XLSX.utils.book_new(); // create a new blank book
+      // const workSheet = XLSX.utils.json_to_sheet(this.devicess.devices);
+
+      // XLSX.utils.book_append_sheet(workBook, workSheet, 'data'); // add the worksheet to the book
+      // XLSX.writeFile(workBook, 'temp.xlsx'); // initiate a file download in browser
+
+    }
+  }
+
+    exportAsExcelFile(json: any[], excelFileName: string): void {
+    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
+    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
+    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    this.saveAsExcelFile(excelBuffer, excelFileName);
+  }
+   saveAsExcelFile(buffer: any, fileName: string): void {
+    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
+    fileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+  }
+
+    // this.downloadFile(this.devicess.devices);
+  
+
+  downloadFile(data, filename = 'Vehicle List') {
+    console.log(data);
+    
+    let arrHeader = ["Device_ID", "kycApprovalDate", "vahanID", "device_models", "IccidNo", "sim_number", "sim_number2", "SIM and SIM to TSP",  "dealerName",
+      "CID_No","customerId","customerName", "phone", "manufacturingCompany", "Model", "vehicleCategory", "ChassisNo", "engineNo", "Device_Name", "transportOfficeCity", "transportOfficeState", "pin", "rto", "spare", "spare", "address"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    // const file = new File([blob], 'report.xlsx',
+    //   { type: 'application/vnd.ms-excel' });
+
+    // fileSaver.saveAs(file);
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Vehicle List.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    let str = 'Vehicle List \r\n \r\n'
+    let row = 'S.No,';
+    let newHeaders = ["Device IMEI", "Date of KYC approval", "Vahan ID", "Device Model", "ICCID NO", "SIM1", "SIM2", "SIM and SIM to TSP", "Dealer name",
+      "Follow-up number","Customer ID","Customer Name", "Mobile No", "vehicle manufacturer", "Vehicle Model", "Vehicle Category", "Chassis No", "Engine No", "Vehicle No", "CITY", "State", "PIN","RTO","spare","spare","ADDRESS"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if (i < array.length) { }
+      for (let index in headerList) {
+        let head = headerList[index];
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+
+    }
+    return str;
+  }
+
+  strRep(data) {
+
+    if (typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+      return newData;
+    }
+    else if (typeof data == "undefined") {
+      return "-";
+    }
+    else if (typeof data == "number") {
+      return data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+    exportExcel() {
+ 
+ 
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      this.tab = document.getElementById('deviceTable1'); // id of table
+   
+      // console.log(this.tab.rows.length)
+      var rowlength = 4; 
+      if((this.superAdmin ==true)||(this.custtype ==true)||(this.dealerTocust=='ON')){
+        var rowlength = 6; 
+      }
+
+  
+      for(j = 0 ; j < this.tab.rows.length; j++) 
+      {    
+       
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+          //tab_text=tab_text+"</tr>";
+      }
+      $('table tr').find('td:eq(20),th:eq(20)').remove();
+      $('table tr').find('td:eq(21),th:eq(21)').remove();
+      tab_text=tab_text+"</table>";
+      tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+      tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+      // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+      
+      // console.log(tab_text);
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+
+  dateChange(id){
+    // console.log(id);
+    // console.log("Inside function");
+    this.dateId = id;
+    this.getdev();
+ 
+  }
+  pageLength:any;
+  pageLengthArr=[10,25,50,100,200,500,"All"];
+  callDataTable(){
+    this.customDatafilter = true;
+    this.skip = 0;
+    // that.limit = len;
+    this.getdev();
+  }
+
+  getSuperAdminList(){
+    // console.log("KJDKJDKJKDJKJKDJD");
+    
+    this.contactService.getSuperAdminList().subscribe(res=>{
+      // console.log(res);
+      this.distributers=res;
+       var loadinguser1 = {
+              user_type: "All",
+              _id: "All User"
+            }
+            for(var i=0;i<this.distributers.length;i++){
+              loadinguser1 = {
+                user_type:  this.distributers[i].first_name + " " + this.distributers[i].last_name,
+                _id: this.distributers[i]._id
+              }
+              this.disDataFIlter.push(loadinguser1);
+            }
+      
+    })
+  }
+
+  distributerSelect = [];
+  filterStates(usr1) {
+    // console.log("userObj=>",usr);
+    if(usr1.length == 0){
+      this.distributerSelect =[];
+    }
+    
+    if (usr1) {
+      // console.log("user=>",usr1);
+      const filterdealerValue:any = usr1;
+      this.distributerSelect=[];
+       this.distributerSelect = this.disDataFIlter.filter(function(ppp){
+      //  console.log(ppp);
+       
+        var t = ppp.user_type.indexOf(filterdealerValue);
+      //  this.option = this.options[i];
+      // console.log("India1");
+        return t > -1;    
+      });
+        // console.log(this.distributerSelect);
+        // if(this.distributerSelect.length==this.disDataFIlter.length){
+        //   this.getdev()
+        // }
+        if(this.distributerSelect.length === 1){
+          this.getSuperAdminVehicles(this.distributerSelect);
+
+        }else{
+          this.getdev()
+        }
+        return this.distributerSelect;
+    }
+  
+  }
+
+
+  getSuperAdminVehicles(data){
+
+    let foods = [];
+
+  // console.log("statusName = > ", this.Status_name);
+  if(this.Status_name != null){
+    // console.log();
+    this.statuss = this.Status_name;
+  }
+
+  var dateObj = {};
+ 
+  if((this.dateId == 'todate')||(this.to_date != undefined)){
+      dateObj['to_date'] = this.to_date.toISOString();
+
+  }
+  if((this.dateId == 'fdate')||(this.from_date != undefined)){
+    dateObj['from_date'] = this.from_date.toISOString();
+  }
+ 
+  this.dateId='';
+  this.contactService.getDeviceByFilter(this.emailid,data[0]._id,this.groupId,this.status,this.statuss,this.skip,this.limit,this.myInput,data[0]._id,this.DealerID,dateObj,this.liecenceStatus).subscribe(
+      
+    data => {
+    
+      this.devicess = data 
+      this.final = this.devicess.devices
+      // console.log("IN GET DEV",this.final);
+
+      
+     for(let i=0;i<this.devicess.devices.length;i++){
+     
+       if(this.devicess.devices[i].type_of_device =="Tracker"){
+         let a ={
+          value : this.devicess.devices[i].Device_Name,
+          viewValue:this.devicess.devices[i].Device_Name
+         }
+         foods.push(a);
+       }
+    
+     }
+     this.abc(this.final);
+    });
+  
+  }
+
+  adddevnew(){
+     this.router.navigate(["/add_newDevice"]);
+   
+  }
+}
diff --git a/src/app/dashboard/device-edit/device-edit.component.html b/src/app/dashboard/device-edit/device-edit.component.html
new file mode 100644
index 0000000..8831546
--- /dev/null
+++ b/src/app/dashboard/device-edit/device-edit.component.html
@@ -0,0 +1,527 @@
+<div style="opacity: .9;text-align: center;background: #fcfbfb;position: relative;height: 90vh">
+    <div class="row">
+        <div class="col-12">
+          <span style="color:#855353;font-size:20px;font-weight: 500;">Edit Device</span>
+      </div>
+    </div>
+    <div id="toast">
+      <div id="desc">{{ data_descip }}</div>
+    </div>
+  <div class="row" style="padding:25px;">
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      Device IMEI :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="text" [(ngModel)]="dev_IMEI" name="IMEI">
+      </md-form-field>
+
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      Device name :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="text" [(ngModel)]="dname" name="dname" required>
+        <md-error class="pattern">Enter Device Name</md-error>
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      Description :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="text" [(ngModel)]="desc" name="desc">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left">
+      SIM Number :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="number" [(ngModel)]="sim" name="sim">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      SIM Provider :
+      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
+        <input mdInput type="text" [(ngModel)]="SIM_provider" name="hrdwr" placeholder="SIM Provider" required>
+        <md-error class="required">Enter SIM Provider</md-error>
+      </md-form-field>
+    </div>
+    <!-- =================================== EDIT SIM2 ==================================== -->
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left">
+      SIM Number 2 :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="number" [(ngModel)]="sim2" name="sim" placeholder="SIM 2">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      SIM Provider 2:
+      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
+        <input mdInput type="text" [(ngModel)]="SIM_provider2" name="hrdwr" placeholder="SIM Provider 2">
+        <md-error class="required">Enter SIM Provider</md-error>
+      </md-form-field>
+    </div>
+
+     <!-- =================================== EDIT SIM2 ==================================== -->
+    <div class="col-sm-4"  style="padding-bottom:10px;text-align:left;">
+        Integration ID:
+      <md-form-field class="example-full-width width" style="float:left;width: 90%;">
+          <input mdInput type="text" [(ngModel)]="IntegrationId" placeholder="Integration ID" >
+          <!-- <md-error class="required">Enter Integration ID</md-error> -->
+        </md-form-field>
+  </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      Driver Name :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="text" [(ngModel)]="drname" name="drname">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      <!-- Vehicle type :  -->
+      <!-- <md-select  name="neww" placeholder="Icon Type"[(ngModel)]="neww"  style="display: initial;">
+        <md-option *ngFor="let foodd of foodds" [value]="foodd" >
+          {{ foodd.viewValue }}
+        </md-option>
+      </md-select>  -->
+      <!-- User :  -->
+      Driver's Number :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="number" [(ngModel)]="dcontact" name="dcontact" maxlength="10">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      <!-- Groups :  -->
+      Speed Limit :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="number" [(ngModel)]="speed" name="speed">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      <!-- Groups :  -->
+      Total ODO :
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="number" [(ngModel)]="totalODO" name="totalODO">
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="margin-top:1px;;text-align:left;">
+      <md-select placeholder="--Select Group--" [(ngModel)]="groupInfo" style="display: initial;">
+        <md-option *ngFor="let group of groups" [value]="group">
+          {{ group.GroupName }}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      <!-- Vehicle type :  -->
+      <!-- <md-select name="neww" placeholder="Device Model" [(ngModel)]="deviceModel._id" (ngModelChange)="getDevmodel($event)" style="display: initial;">
+        <md-option *ngFor="let model of newArr" [value]="model._id">{{model.device_type}}</md-option>
+      </md-select> -->
+<md-input-container>
+  <input mdInput placeholder="Device Model" [mdAutocomplete]="tdAutoedit2" name="neww2" #state="ngModel"
+    [(ngModel)]="deviceModel.device_type" (ngModelChange)="filterStates1(deviceModel)">
+  <md-autocomplete #tdAutoedit2="mdAutocomplete">
+    <md-option *ngFor="let model of dataSelect2" [value]="model.device_type">{{model.device_type}}</md-option>
+  </md-autocomplete>
+</md-input-container>
+
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top:1px;">
+      <!-- <md-select name="neww1" placeholder="Vehicle types" [(ngModel)]="vehicleType._id" (ngModelChange)="getVehdata($event)" style="display: initial;">
+        <md-option *ngFor="let vh of vehName" [value]="vh._id">{{vh.veh_type}}</md-option>
+      </md-select> -->
+  <md-input-container>
+    <input mdInput placeholder="Vehicle types" [mdAutocomplete]="tdAutoedit1" name="neww1" #state="ngModel"
+      [(ngModel)]="vehicleType.veh_type" (ngModelChange)="filterStatess(vehicleType)">
+    <md-autocomplete #tdAutoedit1="mdAutocomplete">
+      <md-option *ngFor="let vh of dataSelect1" [value]="vh.veh_type">{{vh.veh_type}}</md-option>
+    </md-autocomplete>
+  </md-input-container>
+
+
+
+
+    </div>
+    <div *ngIf="showFieldsDealer && !dealerStatus" class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top: 12px;">
+      <span>{{'Dealer' | translate}} :</span>
+      <md-input-container style="width: 60%;">
+        <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+          #state="ngModel" [(ngModel)]="dealerData.fullName" (ngModelChange)="filtergrpStates3(dealerData.fullName)">
+        <md-autocomplete #tdAuto0="mdAutocomplete">
+          <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
+            <!-- (click)="selectDealer(group._id)" -->
+            <span>{{ group.fullName }}</span>
+              <!-- {{ group.last_name }}</span> -->
+          </md-option>
+        </md-autocomplete>
+      </md-input-container>
+    </div>
+    <div *ngIf="showFieldsUser" class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top: 12px;">
+        <!-- <md-select name="neww2" placeholder="Users" [(ngModel)]="userModel._id" (ngModelChange)="getUserdata($event)" style="display: initial;">
+            <md-option *ngFor="let userName of newUserArr" [value]="userName._id">{{userName.user_type}}</md-option>
+          </md-select> -->
+          <md-input-container>
+            <input mdInput placeholder="Search User" [mdAutocomplete]="tdAutoedit" name="state" 
+            #state="ngModel" [(ngModel)]="userModel.user_type"
+           (ngModelChange)="filterStates(userModel)">
+           <md-autocomplete #tdAutoedit="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.user_type">
+                <span>{{ option.user_type }}</span>
+              </md-option>
+              <md-option *ngIf="costumers.length==0">
+                <span>No Data Found</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+    </div>
+    
+
+
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;"  *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
+      Expiration Date :
+      <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [autoClose]="true" [dateFormat]="'DD/MM/YYYY hh:mm:a'"></owl-date-time>
+      <!-- <md-form-field class="example-full-width width">
+        <input disabled mdInput type="text" [(ngModel)]="expDate" placeholder="Expiration Date ">
+      </md-form-field> -->
+    </div>
+
+    <!-- -------------------------DEVICE DISTANCE VARIATION----------------------- -->
+    <!-- <div class="col-sm-4 row" style="text-align: right;">
+   
+      <span>{{'Device Distance Variation' | translate}} :</span>
+      <select style="height: 30px;" [(ngModel)]="selcetedSign">
+        <option value="+">+</option>
+        <option value="-">-</option>
+      </select>
+      <input mdInput
+        style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
+        type="number" id="name" [(ngModel)]="deviceDistanceVariation">
+      <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+     
+    </div> -->
+
+
+    <div  class="col-sm-4 col-md-4 row"
+      style="padding-bottom:10px;text-align:left;padding-top: 12px;">
+    <span>{{'Device Distance Variation' | translate}} :</span>
+      <div style="width: 60%;">
+        <select style="height: 30px;" [(ngModel)]="selcetedSign">
+          <option value="+">+</option>
+          <option value="-">-</option>
+        </select>
+        <input mdInput
+          style="background: #ececec;float: right;width: 75%;height: 30px;margin-top: -30px;margin-left: 5px;border: 1px solid #c1c1c1;"
+          type="number" id="name" [(ngModel)]="deviceDistanceVariation">
+          
+      </div>
+        <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+    </div>
+
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+      Sales Person:
+      <md-form-field class="example-full-width width" style="display: initial;">
+        <input mdInput type="text" [(ngModel)]="sellsPerson" name="sellsPerson">
+      </md-form-field>
+    </div>
+
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;padding-top:1px;">
+      <md-input-container>
+        <input mdInput placeholder="Installer" [mdAutocomplete]="tdAutoedit11" name="neww21" #state="ngModel"
+          [(ngModel)]="installer" (ngModelChange)="filtergrpStatess12(installer)">
+        <md-autocomplete #tdAutoedit11="mdAutocomplete">
+          <md-option *ngFor="let vh of installerSelect" [value]="vh.fullName">{{ vh.first_name }} {{ vh.last_name }}</md-option>
+        </md-autocomplete>
+      </md-input-container>
+    </div>
+
+    </div>
+
+<!-- style="width:95%" -->
+    <div>
+        <md-expansion-panel style="box-shadow: none;background: #fcfbfb;margin-top: 18px;">
+          <md-expansion-panel-header>
+            <md-panel-title style="font-size: 20px">
+              Additional Settings
+            </md-panel-title>
+          </md-expansion-panel-header>
+          <div class="additionalInputField">
+            <div class="row" style="padding:25px;">
+              <!-- <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:left;">
+            <div class="row"> -->
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <md-form-field class="example-full-width width" >
+                  <input mdInput type="text" [(ngModel)]="EngineNo" placeholder="Engine Number">
+                </md-form-field>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">          
+                <md-form-field class="example-full-width width" >
+                    <input mdInput type="text" [(ngModel)]="chassisno" placeholder="Chassis number">
+                  </md-form-field>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <md-form-field class="example-full-width width" >
+                  <input mdInput type="text" [(ngModel)]="manufacturingCompany" placeholder="Manufacturing Company">
+                </md-form-field>
+              </div>
+            <!-- </div>
+            <div class="row" style="margin: 10px 0 46px 0;"> -->
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
+                <span>
+                  <span>Registration date </span>
+                  <owl-date-time [(ngModel)]="vehRegDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+                </span>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <span>
+                  <span>Date of Manufacturing Year</span>
+                  <owl-date-time [(ngModel)]="vehManufacturingYear" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+                </span>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <span>
+                  <span>Last fitness date</span>
+            <owl-date-time [(ngModel)]="lastFitnessDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+          </span>
+              </div>
+            <!-- </div>
+            <div class="row"> -->
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
+                <span>
+                  <span>Fitment Date</span>
+                  <owl-date-time [(ngModel)]="fitmentDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+                </span>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <md-form-field class="example-full-width width">
+                  <input mdInput type="text" [(ngModel)]="iccidNo" placeholder="ICCICD Number">
+                </md-form-field>
+              </div>
+
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <!-- <span>{{'RTO Number' | translate}} :</span> -->
+                <md-input-container class="example-full-width width">
+                  <input mdInput placeholder="{{'Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                    #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
+                  <md-autocomplete #tdAuto0="mdAutocomplete">
+                    <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
+                      <span>{{ group.RTO_Code }}</span>
+                    </md-option>
+                  </md-autocomplete>
+                </md-input-container>
+              </div>
+
+              
+            <!-- </div>
+            <div class="row"> -->
+                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" [(ngModel)]="UIDnumber" placeholder="Unique ID">
+                      </md-form-field>
+                </div>
+                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                  <md-form-field class="example-full-width width">
+                      <input mdInput type="text" [(ngModel)]="CIDNO" placeholder="CID number">
+                    </md-form-field>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                  <md-form-field class="example-full-width width" >
+                      <input mdInput type="text" [(ngModel)]="typeofVeh" placeholder="Type of Vehicle">
+                    </md-form-field>
+              </div>
+          <!-- </div>
+          <div class="row"> -->
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="companyName" placeholder="Comapny Name">
+                  </md-form-field>
+            </div>
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                  <input mdInput type="text" [(ngModel)]="companyAddress" placeholder="Company Address">
+                </md-form-field>
+          </div>
+          <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+            <md-form-field class="example-full-width width" >
+                <input mdInput type="text" [(ngModel)]="transportOfficeCity" placeholder="Transport Office City">
+              </md-form-field>
+        </div>
+          <!-- </div>
+          <div class="row"> -->
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;" >
+                  <md-form-field class="example-full-width width">
+                      <input mdInput type="text" [(ngModel)]="transportOfficeState" placeholder="Transport Office State">
+                    </md-form-field>
+              </div>
+              <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                  <span>
+                      <span>Invoice Date</span>
+                      <owl-date-time [(ngModel)]="invoice_date" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+                    </span>
+              </div>
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                  <input mdInput type="text" [(ngModel)]="invoice_number" placeholder="Invoice Number">
+                </md-form-field>
+          </div>
+          <!-- </div>
+          <div class="row"> -->
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <!-- <md-form-field class="example-full-width width"> -->
+                  <!-- <input mdInput type="number" [(ngModel)]="numberOfSOS" placeholder="Number of SOS"> -->
+                  <md-select [(ngModel)]="numberOfSOS" placeholder="Number of SOS">
+                    <md-option value="" selected disabled>Please select SOS</md-option>
+                    <md-option value="1">1</md-option>
+                    <md-option value="2">2</md-option>
+                    <md-option value="3">3</md-option>
+                    <md-option value="4">4</md-option>
+                    <md-option value="5">5</md-option>
+                    <md-option value="6">6</md-option>
+                    <md-option value="7">7</md-option>
+                    <md-option value="8">8</md-option>
+                    <md-option value="9">9</md-option>
+                    <md-option value="10">10</md-option>
+                    <md-option value="11">11</md-option>
+                    <md-option value="12">12</md-option>
+                    <md-option value="13">13</md-option>
+                    <md-option value="14">14</md-option>
+                    <md-option value="15">15</md-option>
+                  </md-select>
+                <!-- </md-form-field> -->
+                </div>
+                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                  <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="tpin" placeholder="t-pin">
+                  </md-form-field>
+                </div>
+                <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+                  <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="epin" placeholder="e-pin">
+                  </md-form-field>
+                </div>
+          <!-- </div> -->
+
+          <!-- <div class="row"> -->
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="colour" placeholder="Colour">
+              </md-form-field>
+            </div>
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="models" placeholder="Model">
+              </md-form-field>
+            </div>
+            <div class="col-sm-3 col-md-3"  style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="transmission" placeholder="Transmission">
+              </md-form-field>
+            </div>
+            <div class="col-sm-3 col-md-3" style="padding-bottom:10px;text-align:left;">
+              <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="Imsi" placeholder="IMSI">
+              </md-form-field>
+            </div>
+          </div>
+
+        </div>
+        </md-expansion-panel>
+      </div>
+  
+  <!-- <md-dialog-actions align="end">
+    <button md-button md-dialog-close>Cancel</button>
+    <button md-button [md-dialog-close]="true" cdkFocusInitial>Install</button>
+  </md-dialog-actions> -->
+  <div>
+    <button style=" width: 171px;height: 43px;letter-spacing: 5px;" class="btn btn-primary btn-block/" (click)="editRecord()">SAVE</button>
+    <button style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;" class="btn btn-primary btn-block/"
+      (click)="onNoClick(null)">CANCEL</button>
+      <!-- <button *ngIf="showRenewButton" style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: green; border: 0px;"
+        class="btn btn-primary btn-block/" (click)="renew()">RENEW</button> -->
+  </div>
+ 
+  <flash-messages style="float: center;"></flash-messages>
+</div>
+
+
+<!-- editRecord -->
+
+<!-- previous style -->
+
+<!-- <h3>Edit Device</h3>
+<hr>
+Device Name:
+  <md-form-field class="example-full-width width" style="padding-left:3%;width: 69%;">
+   <input mdInput type="text" [(ngModel)]="dname"  name="dname" required>
+     <md-error class="pattern">Enter Device Name</md-error>
+  </md-form-field>
+
+<br>
+Description:
+  <md-form-field class="example-full-width width" style="padding-left:6%;width: 69%;" >
+   <input mdInput type="text" [(ngModel)]="desc"  name="desc">
+  </md-form-field>
+
+<br>
+Sim Number:
+  <md-form-field class="example-full-width width"  style="padding-left:4%;width: 69%;">
+   <input mdInput type="number" [(ngModel)]="sim"  name="sim">
+  </md-form-field>
+  <br>
+  Driver Name:
+  <md-form-field class="example-full-width width" style="padding-left:4%;width: 69%;">
+   <input mdInput type="text" [(ngModel)]="drname"  name="drname">
+  </md-form-field>
+  <br>
+  Driver Contact:
+  <md-form-field class="example-full-width width" style="padding-left:4%;width: 69%;">
+   <input mdInput type="number" [(ngModel)]="dcontact"  name="dcontact">
+  </md-form-field>
+  <br>
+  Speed Limit:
+  <md-form-field class="example-full-width width" style="padding-left: 17%;width: 70%;">
+     <input mdInput type="number" [(ngModel)]="speed"  name="speed">
+    </md-form-field>
+<br>
+Vechile Type:
+<md-select  name="neww" placeholder="Vechiles Type" style="padding-left: 16%;width: 69%" [(ngModel)]="neww">
+   <md-option *ngFor="let foodd of foodds" [value]="foodd" >
+     {{ foodd.viewValue }}
+   </md-option>
+ </md-select> 
+ <br>
+ Groups:
+ <md-select  placeholder="--Select Group--" style="padding-left: 24%;width: 77%;" [(ngModel)]="groupInfo">
+  <md-option *ngFor="let group of groups" [value]="group">
+    {{ group.GroupName }}
+  </md-option>
+</md-select> 
+
+<br>
+Fuel Tank Capacity :
+<md-form-field class="example-full-width width" style="padding-left:6%;width: 58%;">
+  <input mdInput class="no-spin" [(ngModel)]="fuel_tank_capicity" name=" tankCapicity" placeholder="Enter Volume" required/>
+  <md-error class="required">Enter Volume</md-error>
+  </md-form-field>
+  <br>
+Empty Tank Voltage :
+  <md-form-field class="example-full-width width" style="padding-left:4%;width: 56%;">
+    <input mdInput class="no-spin" [(ngModel)]="voltage_tank_empty" name=" when_tank_empty" placeholder="Voltage when tank empty" required/>
+    <md-error class="required">Enter Voltage</md-error>
+    </md-form-field>
+    <br>
+Tankfull Voltage :
+    <md-form-field class="example-full-width width" style="padding-left:9%;width: 61%;">
+      <input mdInput class="no-spin" [(ngModel)]="tankfull_capicity" name=" tankCapicity" placeholder="Voltage When Tankfull" required/>
+      <md-error class="required">Enter Voltage</md-error>
+      </md-form-field>
+<br>
+
+Device Model : 
+
+<md-select style="padding-left: 16%;width: 69%" name="neww" placeholder="Device Model" [(ngModel)]="deviceModel._id" (ngModelChange)="getDevmodel($event)">
+    <md-option  *ngFor="let model of newArr" [value]="model._id">{{model.device_type}}</md-option>
+  </md-select>
+
+<br>
+Expiration date :
+<div class="example-full-width width" style="padding-left: 39%;width: 92%;padding-bottom: 20px;">
+<owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+</div>
+<p *ngIf="errorField" style="text-align:center;color:red">Expiration date must be greater then current date</p>
+<div style="padding-left:30%">
+<button class="btn btn-danger btn-block/"style="cursor:pointer;" (click)="onNoClick(null)" >Cancel</button>
+<button class="btn btn-primary btn-block/"style="cursor:pointer" (click)="editRecord()">Edit Record</button>
+</div>
+                        -->
\ No newline at end of file
diff --git a/src/app/dashboard/device-edit/device-edit.component.scss b/src/app/dashboard/device-edit/device-edit.component.scss
new file mode 100644
index 0000000..b9aca53
--- /dev/null
+++ b/src/app/dashboard/device-edit/device-edit.component.scss
@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  //   display: none;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
diff --git a/src/app/dashboard/device-edit/device-edit.component.spec.ts b/src/app/dashboard/device-edit/device-edit.component.spec.ts
new file mode 100644
index 0000000..50e84eb
--- /dev/null
+++ b/src/app/dashboard/device-edit/device-edit.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceEditComponent } from './device-edit.component';
+
+describe('DeviceEditComponent', () => {
+  let component: DeviceEditComponent;
+  let fixture: ComponentFixture<DeviceEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/device-edit/device-edit.component.ts b/src/app/dashboard/device-edit/device-edit.component.ts
new file mode 100644
index 0000000..6e0f451
--- /dev/null
+++ b/src/app/dashboard/device-edit/device-edit.component.ts
@@ -0,0 +1,1037 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../../device';
+import {ContactService} from '../../contact.service';
+import { SidebarComponent } from '../../sidebar/sidebar.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+declare var _ :any;
+declare var swal: any;
+@Component({
+  selector: 'app-device-edit',
+  templateUrl: './device-edit.component.html',
+  styleUrls: ['./device-edit.component.scss'],
+  providers: [ContactService,SidebarComponent]
+
+})
+export class DeviceEditComponent implements OnInit {
+dealers_info: any[];
+RTO;
+RTOObj;
+RTOSelect=[]
+myInput;
+installer
+installerSelect
+sellsPerson
+  chassisno:any;
+  companyName:any;
+  EngineNo:any;
+  companyAddress:any;
+  typeofVeh:any;
+  transportOfficeCity:any;
+  transportOfficeState:any;
+  manufacturingCompany:any;
+  invoice_date:any
+  invoice_number:any;
+  UIDnumber:any;
+  iccidNo:any;
+  Imsi:any;
+  dev: any;
+  deviceModel:any;
+  deviceId: any;
+  group_info: any;
+  dname:any;
+  SIM_provider:any;
+  desc:any;
+  IntegrationId:any;
+  sim:any;
+  devices: Device[];
+  device: Device;
+  voltage_tank_empty:any;
+  id:any;
+  totalODO:any;
+  iconType:any;
+  fuel_tank_capicity:any;
+  neww:any;
+  speed:any;
+  dcontact:any;
+  drname:any;
+  vehRegDate:any;
+  vehManufacturingYear :any;
+  lastFitnessDate : any;
+  fitmentDate :any;
+  vehicleType:any;
+  userModel:any;
+  tankfull_capicity:any;
+  groupInfo:any;
+  device_Id:any;
+  date=new Date();
+  expDate = new Date(this.date.getFullYear()+1,this.date.getMonth(), this.date.getDate()).toLocaleString();
+  foodds = [
+    {value: 'car', viewValue: 'Car'},
+    {value: 'bike', viewValue: 'Bike'},
+    {value: 'truck', viewValue: 'Truck'},
+  ];
+  model: any;
+  integrationIdPresent:boolean=false
+  mainmodel: any;
+  custId: string;
+  deviceInformation: any={};
+  dev_IMEI: any;
+  SIM_provider2: any;
+  sim2: any;
+  CIDNO: any;
+  numberOfSOS: any;
+  tpin:any;
+  epin:any;
+  models:any;
+  colour:any;
+  transmission:any;
+  dealerStatus: any;
+  superAdmin: any;
+  superadminAccess: string;
+  Cloned_exp_date: string;
+  organisation: any;
+  dealerData={fullName:'',_id:''}
+  dealerSelect: any[];
+   skip: number = 1;
+  limit: number = 100;
+showFieldsDealer:boolean=false;
+    showFieldsUser:boolean=false;
+  License:any;
+  DealerId: any;
+  mainData
+  showRenewButton:boolean=false
+  deviceDistanceVariation=0
+  selcetedSign="+"
+  installerData: any;
+  installerObj: any;
+  custtype: any;
+  constructor(public dialogRef: MdDialogRef<DeviceEditComponent>,private _flashMessagesService: FlashMessagesService,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private sidebar: SidebarComponent) {
+      //  console.log('data=>',data);
+       this.mainData=data
+
+       if(data.distanceVariation){
+          this.selcetedSign=data.distanceVariation[0]
+          // data.distanceVariation.slice(0,0);
+  this.deviceDistanceVariation=data.distanceVariation.substring(1);
+  console.log("___________",this.mainData,this.selcetedSign,this.deviceDistanceVariation);
+
+       }
+  
+    
+  this.dname = data.dname;
+  this.DealerId=data.devObj.Dealer?data.devObj.Dealer._id?data.devObj.Dealer._id:data.devObj.Dealer:data.devObj.Dealer;
+  if(data.devObj.License =="Yearly"){
+    this.showRenewButton=true;
+  }
+  if(data.assigned_to){
+    this.selectedUser = data.assigned_to._id;
+  }
+ 
+  this.desc = data.des;
+  this.expDate = data.expdate;
+  this.Cloned_exp_date = data.expdate ; 
+  this.License = data.devObj.License;
+  this.sim = data.sim;
+  this.sim2 = data.simNUM2;
+  this.id = data._id;
+  this.drname = data.drname;
+  this.dcontact = data.dcontact ;
+  this.speed = data.maxSpeed; 
+  this.deviceModel = data.mainmodel;
+  this.userModel = data.assigned_to;
+  this.vehicleType = data.vehicleType;
+  this.dev_IMEI = data.devIMEI;
+  this.SIM_provider = data.S_provider;
+  this.SIM_provider2 = data.simProvider2;
+  this.IntegrationId = data.itiId;
+  if(this.IntegrationId){
+    this.integrationIdPresent=true
+  }
+  this.totalODO = parseFloat(data.tot_ODO).toFixed(1);
+ 
+  
+  this.EngineNo=data.devObj.engineNo;
+ 
+  this.typeofVeh=data.devObj.typeOfVehicle;
+  this.companyName=data.devObj.companyName;
+  this.companyAddress=data.devObj.companyAddress;
+  this.transportOfficeCity=data.devObj.transportOfficeCity;
+  this.transportOfficeState= data.devObj.transportOfficeState;
+  this.manufacturingCompany= data.devObj.manufacturingCompany;
+  this.numberOfSOS = data.devObj.numberOfSOS ;
+  this.invoice_date= "";
+  this.chassisno=data.devObj.ChassisNo;
+  this.invoice_number=data.devObj.invoiceNumber;
+  this.UIDnumber=data.devObj.uniqueID;
+  this.iccidNo=data.devObj.ICCICD;
+   this.Imsi = data.devObj.IMSI ;
+   this.CIDNO = data.devObj.CID_No;
+   console.log("TPIN--",data.devObj.tpin);
+   
+   if(data.devObj.tpin){
+     this.tpin=data.devObj.tpin
+   }
+   if(data.devObj.epin){
+     this.epin=data.devObj.epin
+   }
+   if(data.devObj.model){
+     this.models=data.devObj.model
+   }
+    if(data.devObj.transmission){
+     this.transmission=data.devObj.transmission
+   }
+    
+    if(data.devObj.colour){
+     this.colour=data.devObj.colour
+   }
+   if(data.devObj.invoiceDate){
+     this.invoice_date = new Date(data.devObj.invoiceDate);
+   }
+   if(data.devObj.fitmentDate){
+     this.fitmentDate = new Date(data.devObj.fitmentDate);
+   }
+   if(data.devObj.lastFitnessDate){
+     this.lastFitnessDate = new Date(data.devObj.lastFitnessDate);
+  }
+  if(data.devObj.vehicleRegDate){
+    this.vehRegDate = new Date(data.devObj.vehicleRegDate)
+  }
+  if(data.devObj.vehicleManufacturingDate){
+    this.vehManufacturingYear = new Date(data.devObj.vehicleManufacturingDate);
+  }
+
+   if(data.sellsPerson){
+    this.sellsPerson =data.sellsPerson
+  }
+
+  //  if(data.installer){
+  //   this.installer =data.installer._id
+  // }
+
+  if(data.installer!=undefined){
+    this.installer= data.installer.first_name+" "+data.installer.last_name;
+    this.installerObj=data.installer._id
+    // {
+    //   fullName:data.installer.first_name+" "+data.installer.last_name ,
+    //   _id:data.installer._id   
+    // }
+    // data.assigned_to;
+ }
+
+
+ 
+  // console.log("deviceId=>",this.id);
+ if(data.assigned_to==undefined){
+   this.userModel ={
+     user_type:"",
+     _id:""
+   }
+ }else{
+    this.userModel= {
+      user_type:data.assigned_to.first_name+" "+data.assigned_to.last_name ,
+      _id:data.assigned_to._id   
+    }
+    // data.assigned_to;
+ }
+
+ if(data.vehicleType==undefined){
+  this.vehicleType ={
+    veh_type:"",
+    _id:""
+  }
+}else{
+   this.vehicleType= {
+    veh_type:data.vehicleType.brand+" "+data.vehicleType.model ,
+    _id:data.vehicleType._id    
+   }
+  //  data.vehicleType;
+}
+
+  if(data.mainmodel==undefined){
+    this.deviceModel={
+      device_type:"",
+      _id:""
+    }
+    }else{
+
+      this.deviceModel = {
+        device_type:data.mainmodel.device_type,
+        _id:data.mainmodel._id
+      }
+      data.mainmodel;
+    }
+
+  
+  
+  // console.log(this.speed);
+  for(let r=0;r<this.foodds.length;r++){
+    if( data.iconType == this.foodds[r].value){
+       this.neww = this.foodds[r];
+    }
+  }
+ 
+ // this.neww.viewValue = data.iconType;
+  this.speed = data.speed
+    // console.log(data)
+     }
+    onNoClick(a): void {
+      this.dialogRef.close(a);
+     }
+
+  
+
+     errorField = false;
+    
+     editRecord(){
+
+
+     if(this.groupInfo==undefined){
+      this.device_Id="";
+     
+     }else{
+      this.device_Id=this.groupInfo.devId;
+     }
+
+      // console.log(this.device_Id);
+      // console.log(this.groupInfo);
+
+
+      let currDate = new Date().getTime();
+      let chkDate = new Date(this.expDate).getTime();
+
+      console.log(currDate,chkDate);
+    
+      console.log(currDate,chkDate);
+
+      if(currDate>chkDate){
+        console.log('expiration date should not be greater then current date');
+        swal(
+          'Expiration Date Error',
+          'Expiration date should not be greater then current date',
+          'error'
+        ) 
+        // let error = "dateError" 
+        // this.tost1(error);
+        this.errorField =true;
+
+      }else{  
+
+        // console.log(this.device_Model);
+        // console.log(this.userModel);
+        // console.log(this.vehicleType);
+
+        let cust;
+        var outerThis=this;
+        var model =  _.find(this.newArr, function(o) { 
+          if(o._id ==outerThis.deviceModel._id){
+            return o;
+          } 
+        });
+
+        // let user2 =  _.find(this.newUserArr, function(p) { 
+        //   if(p._id ==outerThis.userModel._id){
+        //     return p;
+        //   } 
+        // });
+
+      
+        let vType =  _.find(this.vehName, function(q) { 
+          if(q._id ==outerThis.vehicleType._id){
+            return q;
+          } 
+        });
+
+       
+        if(this.dataSelect2.length!=0){
+          console.log("==",this.dataSelect2[0]._id,model);
+          
+          this.deviceInformation.device_model=this.dataSelect2[0]._id
+        }else{
+           this.deviceInformation.device_model = model._id
+        }
+
+        if(this.dataSelect1.length!=0){
+          vType=this.dataSelect1[0]._id
+        }else{
+           this.deviceInformation.vehicleType = vType._id
+        }
+
+        // console.log("userObj=>",this.dataSelect);
+
+        if (this.dataSelect.length!=0) {
+        
+          cust = this.dataSelect[0]._id;
+
+        }else{
+          
+          cust = this.custId;
+        }
+        this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+        // if(user2==undefined){
+        //   cust = this.custId;
+        // }else{
+        //   cust= user2._id;
+        // }
+    
+        // console.log("costumerDetail=>",cust);
+        if (this.custtype == true) {
+          var owner = this.useridd;
+        } else {
+          var owner = this.useridd;
+        }
+        this.deviceInformation = {
+          _id: this.id,
+          devicename: this.dname,
+          des: this.desc,
+          sim: this.sim,
+          deviceid: this.dev_IMEI,
+          // iconType:this.neww.value,
+          speed: this.speed,
+          user: cust,
+          drname: this.drname,
+          dphone: this.dcontact,
+          vehicleGroup: this.device_Id,
+          updatedBy: owner,
+          device_model: this.device_type?this.device_type:this.deviceModel._id,
+          vehicleType:this.vehicle_Type?this.vehicle_Type:this.vehicleType._id,
+          Dealer:this.DealerId,
+           deviceDistanceVariation:this.selcetedSign+(this.deviceDistanceVariation?this.deviceDistanceVariation:'0')
+        // tpin:this.tpin,
+        // epin:this.epin
+        }
+
+        // expdate: new Date(this.expDate)
+        // var ed = new Date(this.expDate);
+        // var ced = new Date(this.Cloned_exp_date);       
+        //  var difference = ed.getTime() - ced.getTime()  ;
+        //  var hour = (difference / (60 * 60 * 1000));
+        //  var diff_hr = Math.round(hour);
+        //  console.log('diff_hr',diff_hr);
+        //  if (diff_hr > 24) {
+          let rnw_by;
+          this.deviceInformation['expdate'] =  new Date(this.expDate) ;    
+           let sAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+           let orgName = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation ; 
+           let s_Admin = localStorage.getItem('superadmin');
+          //  superAdminToken
+          console.log('sAdmin',sAdmin);
+          console.log('orgName',orgName);
+       
+           if((sAdmin === true)||(orgName === true)||(s_Admin === 'ON')){
+            this.deviceInformation['renew_by']  = this.useridd; 
+          
+           }else{ 
+             console.log("In Else block");
+                
+            let sAdminId = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._id ;      
+            this.deviceInformation['renew_by'] = sAdminId;
+           
+           }     
+          // }
+          if(this.tpin){
+          this.deviceInformation['tpin'] = this.tpin;
+        }
+         if(this.epin){
+          this.deviceInformation['epin'] = this.epin;
+        }
+         if(this.colour){
+          this.deviceInformation['colour'] = this.colour;
+        }
+        if(this.transmission){
+          this.deviceInformation['transmission'] = this.transmission;
+        }
+        if(this.models){
+          this.deviceInformation['models'] = this.models;
+        }
+
+        if(this.integrationIdPresent){
+          this.deviceInformation['integrationId'] = this.IntegrationId;
+        }else{
+          if(this.IntegrationId)
+          this.deviceInformation['integrationId'] = this.IntegrationId;
+        }
+
+        if(this.sim2 == undefined){
+          this.deviceInformation;
+        }else{
+          this.deviceInformation['sim_number2'] = this.sim2;
+        }
+        if(this.SIM_provider2 == undefined){
+          this.deviceInformation;
+        }else{
+          this.deviceInformation['sim_provider2'] = this.SIM_provider2;
+        }
+
+        if(this.EngineNo){
+          this.deviceInformation['engineNo'] = this.EngineNo;
+        }
+  
+        if(this.CIDNO){
+          this.deviceInformation['CID_No'] = this.CIDNO;
+        }
+        if(this.typeofVeh){
+          this.deviceInformation['typeOfVehicle'] = this.typeofVeh;
+        }
+        
+        if(this.manufacturingCompany){
+         this.deviceInformation['manufacturingCompany'] = this.manufacturingCompany;
+        }
+        if(this.UIDnumber){
+          this.deviceInformation['uniqueID'] = this.UIDnumber;
+        }
+        if(this.iccidNo){
+          this.deviceInformation['ICCICD'] = this.iccidNo;
+        }
+        if(this.Imsi){
+          this.deviceInformation['IMSI'] = this.Imsi;
+        }
+  
+        if(this.vehRegDate){
+          this.deviceInformation['vehicleRegDate'] = new Date(this.vehRegDate);  
+        }
+  
+        if(this.vehManufacturingYear){  
+          this.deviceInformation['vehicleManufacturingDate'] = new Date(this.vehManufacturingYear);
+        }
+  
+        if(this.lastFitnessDate){
+          this.deviceInformation['lastFitnessDate'] = new Date(this.lastFitnessDate);
+        }
+  
+        if(this.fitmentDate){
+          this.deviceInformation['fitmentDate'] = new Date(this.fitmentDate);
+        }
+
+        if(this.invoice_date){
+          this.deviceInformation['invoice_date'] = this.invoice_date;
+        }
+        if(this.chassisno){
+          this.deviceInformation['ChassisNo'] =this.chassisno
+
+        }
+        if(this.invoice_number){
+          this.deviceInformation['invoiceNumber'] = this.invoice_number
+
+        }
+
+        if(this.companyName){
+          this.deviceInformation['companyName'] = this.companyName;
+        }
+        if(this.companyAddress){
+          this.deviceInformation['companyAddress'] = this.companyAddress;
+        }
+        if(this.transportOfficeCity){
+          this.deviceInformation['transportOfficeCity'] = this.transportOfficeCity;
+        }
+        if(this.transportOfficeState){
+          this.deviceInformation['transportOfficeState'] = this.transportOfficeState;
+        }
+
+        if(this.numberOfSOS){
+          this.deviceInformation['numberOfSOS'] = this.numberOfSOS;
+        }
+        // if(user2){
+        //   this.deviceInformation.user = cust;
+        // } 
+        // console.log(this.deviceInformation.user);
+        if(this.SIM_provider==undefined){
+          this.deviceInformation;
+        }else{
+          this.deviceInformation.sim_provider = this.SIM_provider;
+        }      
+
+        if(this.totalODO){
+          this.deviceInformation.total_odo= this.totalODO
+        }
+
+       if(this.sellsPerson){
+        this.deviceInformation['sellsPerson']=this.sellsPerson;
+      }
+      if(this.installerObj){
+         this.deviceInformation['installer'] =this.installerObj
+      }
+      if(this.groupInfo){
+        this.deviceInformation['groupName'] =this.groupInfo.GroupName
+      }
+        
+    console.log("INFO==",this.deviceInformation);
+        this.contactService.editdevice(this.deviceInformation)
+        .subscribe(device => {
+          window.localStorage['DataUpdate'] = 'True'
+          this.sidebar.sidebarData()
+          this.onNoClick("done");
+           this.devices.push(device);   
+           }, (err: any) => { 
+             if(err.status==401){
+               swal(
+                 "Access Denied !!"
+               )
+             }else{
+               var errorMsgShow = "Internal Server Error, Please try after Sometime !!!"
+               var ErrorMsgHead = "Server Error";
+                 var errormsg = JSON.parse(err._body).errmsg.split(':')[2] ; 
+                 if(errormsg){
+                    errorMsgShow = errormsg ; 
+                    ErrorMsgHead = "Duplicate Entry" ;
+                    console.log("handle Error =>",errormsg);
+                 }
+                 this._flashMessagesService.show(errorMsgShow, { cssClass: 'alert-warning', timeout: 2000 });
+                 swal(
+                   'Duplicate IMEI',
+                   "Device IMEI is already used",
+                   'error'
+               )     
+
+             }
+
+          
+        }
+      );
+      } 
+
+     }
+     groups=[]
+     useridd:any;
+     getDealerId:any;
+    
+  ngOnInit() {
+     console.log('data=>',this.mainData);
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+    this.getDealerId = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer_ID ;
+    this.custId = localStorage.getItem('custId');
+    this.dealerStatus = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.organisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation
+    this.superadminAccess = localStorage.getItem('superadmin');
+    // console.log("costumerID=>",this.custId);
+    this.groups=[];
+    this.contactService.getGroup(this.useridd).subscribe(      
+      res => {
+        // console.log("grpDetails=>",res);
+
+        this.group_info = res["group_details"];
+        // console.log(this.group_info.length);
+ 
+        for(var i = 0;i<this.group_info.length;i++) {
+          let group_logs = this.group_info[i];
+          // console.log(group_logs);
+          let group_name = group_logs.name;
+          let status = group_logs.status;
+          let date = new Date(group_logs.last_modified);
+          let d = date.toLocaleDateString();
+          this.deviceId = group_logs._id;
+     
+
+          this.groups.push({
+            "GroupName":group_name,
+            "Status":status,
+            "created_date":d,
+            "Vehicles":this.dev,
+            "devId":this.deviceId,        
+          })
+        }
+      }); 
+
+
+      this.getDeviceModel();
+      this.getvehDetail();
+      this.getUser();
+      this.dealerDetail() 
+      this.getInstallerData();
+      this.getRTOData()
+      if(this.superAdmin){
+        
+        // var isSUP= JSON.parse(window.atob(window.localStorage.Dealer_token.split('.')[1])).isSuperAdmin
+        // console.log("IISNSJKNSKJ",isSUP,JSON.parse(window.atob(window.localStorage.Dealer_token.split('.')[1])));
+        this.showFieldsDealer=true
+           this.showFieldsUser=true; 
+
+      }else if((!localStorage.getItem('superadmin')) || 
+       (localStorage.getItem('superadmin')=='ON' && localStorage.getItem('Dealer')=='OFF' && localStorage.getItem('Custumer')=='OFF') 
+       ||(localStorage.getItem('superadmin')=='ON' && localStorage.getItem('Dealer')=='OFF' && localStorage.getItem('Custumer')=='OFF') )
+      {
+            this.showFieldsDealer=true
+           this.showFieldsUser=true; 
+      }else if(((localStorage.getItem('superadmin')=='ON' || (!localStorage.getItem('superadmin'))) && localStorage.getItem('Dealer')=='ON' && localStorage.getItem('Custumer')=='OFF' || (!localStorage.getItem('Custumer'))) )
+      {
+          this.showFieldsDealer=false
+           this.showFieldsUser=true; 
+      }else if(this.superAdmin==true && this.dealerStatus==true){
+         this.showFieldsDealer=true;
+           this.showFieldsUser=true; 
+      } else if(this.superAdmin==false && this.dealerStatus==true){
+         this.showFieldsDealer=false;
+           this.showFieldsUser=true; 
+      }else{
+         this.showFieldsDealer=false;
+           this.showFieldsUser=false; 
+      }
+  }
+  newArr=[]
+  device_Model:any;
+    getDeviceModel(){
+  
+      this.contactService.getDevModel()
+      .subscribe(res=>{
+        // console.log("abinash")
+          console.log(res);
+          this.device_Model=res;
+          // console.log( "thisisdeviceModel",this.device_Model);
+          let dummyData=[]
+          for(var i=0;i<this.device_Model.length;i++){
+            var loadingObj={
+              device_type:this.device_Model[i]?this.device_Model[i].device_type:"NA",
+              _id:this.device_Model[i]?this.device_Model[i]._id:"NA"    
+            }
+            dummyData.push(loadingObj);
+          }
+          this.newArr=_.cloneDeep(dummyData)
+         
+      })
+      // console.log(this.newArr);
+    }
+    data_descip:any;
+
+    tost1(divid){
+      if(divid == "dateError"){
+        this.data_descip = "Expiration date must be greater than current date!!!";
+        launch_toast();
+      }
+        function launch_toast() {
+    
+         // console.log(divid);
+          var x = document.getElementById("toast")
+          //console.log(x);
+          x.className = "show";
+          setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2500);
+      }
+       }
+      
+       costumers:any; 
+       newUserArr=[];
+       dummyuserData=[];
+       getUser(){
+    this.costumers=[]
+        console.log(this.DealerId);
+        
+        var passDealer;
+        if(this.DealerId !=undefined){
+          passDealer=this.DealerId._id?this.DealerId._id:this.DealerId
+        }else if(this.getDealerId !=undefined){
+           passDealer = this.getDealerId._id;
+        }else{
+          passDealer = this.useridd;
+        }
+          console.log(passDealer);
+         this.contactService.getContactsbyDealer(passDealer)
+         .subscribe(res=>{
+           console.log("Alluserobject",res);
+           this.costumers = res;
+          //  console.log(this.costumers)
+            this.dummyuserData=[]
+           for(var i=0;i<this.costumers.length;i++){
+             var loadinguser={
+              user_type:this.costumers[i].first_name+" "+this.costumers[i].last_name ,
+               _id:this.costumers[i]._id    
+             }               
+             this.dummyuserData.push(loadinguser);
+           }
+           console.log('this.dummyuserData',this.dummyuserData);
+    
+
+          //  this.selectedUser = 
+          //  this.newUserArr=_.cloneDeep(dummyuserData)
+
+         },err=>{
+           this.dataSelect=[]
+            this.costumers=[]
+         })
+       }
+
+       dataSelect=[];
+       dataSelect1=[];
+       dataSelect2=[];
+       option:any;
+       selectedUser:any;
+       vehicle_Type:any;
+       device_type:any
+  filterStates(val) {
+    console.log(val)
+    // console.log(this.dummyuserData)
+    if (val) {
+      const filterValue: any = val.user_type ; 
+      this.dataSelect = this.dummyuserData.filter(function (d) {
+    // console.log("inside Search Method=>",d);
+        return d.user_type.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+    
+    console.log("searched user=>",this.dataSelect);
+  }
+
+filterStatess(val) {
+    console.log("===>",val)
+    if (val) {
+      const filterValue: any = val.veh_type ; 
+      this.dataSelect1 = this.vehName.filter(function (d) {
+    // console.log("inside Search Method=>",d);
+        return d.veh_type.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+      });
+      if(this.dataSelect1.length!=0){
+        this.vehicle_Type=this.dataSelect1[0]._id
+        console.log("searched vehical=>",this.dataSelect1,"----------",this.vehicle_Type);
+      }
+      return this.dataSelect1;
+    }
+
+  }
+
+  
+  
+filterStates1(val) {
+  console.log("===>",val)
+    if (val) {
+      const filterValue: any = val.device_type ; 
+      this.dataSelect2 = this.newArr.filter(function (d) {
+        // console.log("inside Search Method=>",d);
+        return d.device_type.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+      });
+      if(this.dataSelect2.length!=0){
+        for(var i=0;i<this.dataSelect2.length;i++){
+          if(val.device_type==this.dataSelect2[i].device_type){
+            this.device_type=this.dataSelect2[i]._id
+          }
+        }
+        console.log("searched model=>",this.dataSelect2,"----------",this.device_type);
+      }
+      return this.dataSelect2;
+    }
+  }
+  filtergrpStatess12(val) {
+  console.log(val)
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.installerSelect=[];
+     this.installerSelect = this.installerData.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.installer){
+      for(let i=0;i<this.installerData.length;i++){
+        if(this.installerData[i].fullName==this.installer){
+          this.installerObj=this.installerData[i]._id
+          console.log(this.installerData[i]);
+          
+          // this.getUser(this.installerData[i]._id)
+        }
+      }
+    }
+      console.log(this.installerSelect,this.installer, this.installerObj);
+      return this.installerSelect;
+  }
+
+}
+
+  // filterStatess2(val) {
+  //   console.log("===>",val)
+  //   if (val) {
+  //     const filterValue: any = val; 
+  //     this.dataSelect1 = this.installerData.filter(function (d) {
+  //   // console.log("inside Search Method=>",d);
+  //       return d.veh_type.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+  //     });
+  //     if(this.dataSelect1.length!=0){
+  //       this.vehicle_Type=this.dataSelect1[0]._id
+  //       console.log("searched vehical=>",this.dataSelect1,"----------",this.vehicle_Type);
+  //     }
+  //     return this.dataSelect1;
+  //   }
+
+  // }
+
+// filterStates1(val) {
+//     console.log("===>",val)
+//     if (val) {
+//       const filterValue: any = val.device_type ; 
+//       this.dataSelect2 = this.newArr.filter(function (d) {
+//     // console.log("inside Search Method=>",d);
+//         return d.device_type.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+//       });
+//       if(this.dataSelect2.length!=0){
+//       this.device_type=this.dataSelect2[0]._id
+//       console.log("searched model=>",this.dataSelect2,"----------",this.device_type);
+//     }
+//       return this.dataSelect2;
+//     }
+//   }
+  filtergrpStates3(val) {
+
+  console.log(val)
+  // console.log(this.options)
+ this.userModel.user_type=undefined
+  if (val) {
+
+    const filtergrpValue:any = val;
+
+    this.dealerSelect=[];
+     this.dealerSelect = this.dealers_info.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+      return c > -1;    
+    });
+    console.log(this.dealerData);
+    
+    for(let i=0;i<this.dealers_info.length;i++){
+      if(this.dealers_info[i].fullName==this.dealerData.fullName){
+        console.log(this.dealers_info[i]._id);
+        
+        this.DealerId=this.dealers_info[i]._id
+        this.getUser();
+      }
+    }
+    return this.dealerSelect;
+  }
+
+}
+dealerDetail() {
+   
+   console.log("Inside function",this.useridd, this.skip, this.limit,this.myInput,null);
+  
+ this.contactService.dealer_Info1(this.useridd, this.skip, this.limit,this.myInput,null)    
+   .subscribe((res:any) => {
+        this.dealers_info = res;
+        this.DealerId=this.data.devObj.Dealer?this.data.devObj.Dealer._id:this.data.devObj.Dealer
+        if(res.length!=0){
+              for(let i=0;i<res.length;i++){
+                  if(res[i]._id==this.DealerId){
+                  this.dealerData.fullName=res[i].first_name+' '+res[i].last_name;  
+                  this.dealerData._id=res[i]._id;                
+                }
+                this.dealers_info[i].fullName=this.dealers_info[i].first_name+this.dealers_info[i].last_name
+
+              }
+              console.log('DEALER DATA', this.dealerData);
+              
+              // for(let i=0;i<this.dealers_info.length;i++){
+
+              // }
+        }
+      }, err => {
+        this.dealers_info=[];
+        
+      })
+
+  }
+  
+
+       vehData:any;
+       dummyVehData=[]
+       vehName = [];
+       getvehDetail(){
+         this.contactService.getvehType(this.useridd)
+           .subscribe(res=>{
+            //  console.log(res);
+             this.vehData=res;
+             this.dummyVehData = [];
+            //  console.log("allveh",this.vehData);
+             for(var i=0;i<this.vehData.length;i++){
+              var loadingVehType={
+                veh_type:this.vehData[i].brand+" "+this.vehData[i].model ,
+                _id:this.vehData[i]._id    
+              }
+            
+              this.dummyVehData.push(loadingVehType);
+            }
+            this.vehName=_.cloneDeep(this.dummyVehData);
+ 
+
+          
+           })
+       }
+
+
+       getDevmodel(ev){
+        //  console.log(ev);
+       
+
+       }
+
+       getVehdata(evVh){
+          // console.log(evVh)
+       }
+
+
+       getUserdata(evUser){
+        //  console.log(evUser);
+
+       }
+selectDealer(value){
+  if(value){  
+  this.DealerId=value
+  console.log("value",this.DealerId);
+  this.getUser();
+  }
+  
+}
+renew(){
+  console.log(this.mainData);
+  
+}
+
+getInstallerData(){
+  this.contactService.getTechnician(this.useridd, this.skip, this.limit,this.myInput,false).subscribe(
+    (res:any)=>{
+      this.installerData=res;
+       for(let i=0;i<this.installerData.length;i++){
+          this.installerData[i].fullName=this.installerData[i].first_name+' '+this.installerData[i].last_name;
+        }
+    })
+}
+ RTOData
+  getRTOData(){
+    this.contactService.get('/RTO_master/get').subscribe((res:any)=>{
+      this.RTOData=res
+    })
+  }
+
+filtergrpStatess2(val) {
+  console.log(val)
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.RTOSelect=[];
+     this.RTOSelect = this.RTOData.filter(function(g){
+     
+      var c = (g.RTO_Code).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.RTO){
+      for(let i=0;i<this.RTOData.length;i++){
+        if(this.RTOData[i].RTO_Code==this.RTO){
+          this.transportOfficeCity=this.RTOData[i].city;
+          this.transportOfficeState=this.RTOData[i].state
+
+          this.RTOObj=this.RTOData[i]._id
+          console.log(this.RTOData[i]);
+          
+          // this.getUser(this.RTOData[i]._id)
+        }
+      }
+    }
+      console.log(this.RTOSelect,this.RTO, this.RTOObj);
+      return this.RTOSelect;
+  }
+
+}
+   
+}
diff --git a/src/app/dashboard/device-share/device-share.component.html b/src/app/dashboard/device-share/device-share.component.html
new file mode 100644
index 0000000..87855aa
--- /dev/null
+++ b/src/app/dashboard/device-share/device-share.component.html
@@ -0,0 +1,15 @@
+<h4>Share Device</h4><hr>
+<p><b>Device Name: </b>{{dname}}</p>
+<p><b>Sharing with: </b> 
+</p>
+
+<md-form-field class="example-full-width width" style="width: 69%;" >
+
+  <input mdInput type="text" [(ngModel)]="email"  name="email" placeholder="Email ID / Phone Number">
+ </md-form-field>
+ <div style="padding-left:30%">
+    <button class="btn btn-danger btn-block/"style="cursor:pointer;" (click)="onNoClick(null)" >Cancel</button>
+    <button class="btn btn-primary btn-block/"style="cursor:pointer" (click)="ShareRecord()">Share </button>
+    </div>
+    <flash-messages></flash-messages>
+    
diff --git a/src/app/dashboard/device-share/device-share.component.scss b/src/app/dashboard/device-share/device-share.component.scss
new file mode 100644
index 0000000..239f91a
--- /dev/null
+++ b/src/app/dashboard/device-share/device-share.component.scss
@@ -0,0 +1,92 @@
+
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
\ No newline at end of file
diff --git a/src/app/dashboard/device-share/device-share.component.spec.ts b/src/app/dashboard/device-share/device-share.component.spec.ts
new file mode 100644
index 0000000..3e61b7a
--- /dev/null
+++ b/src/app/dashboard/device-share/device-share.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceShareComponent } from './device-share.component';
+
+describe('DeviceShareComponent', () => {
+  let component: DeviceShareComponent;
+  let fixture: ComponentFixture<DeviceShareComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceShareComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceShareComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/device-share/device-share.component.ts b/src/app/dashboard/device-share/device-share.component.ts
new file mode 100644
index 0000000..344c829
--- /dev/null
+++ b/src/app/dashboard/device-share/device-share.component.ts
@@ -0,0 +1,85 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../../device';
+import {ContactService} from '../../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { SidebarComponent } from '../../sidebar/sidebar.component';
+
+
+@Component({
+  selector: 'app-device-share',
+  templateUrl: './device-share.component.html',
+  styleUrls: ['./device-share.component.scss'],
+  providers: [ContactService,SidebarComponent]
+})
+export class DeviceShareComponent implements OnInit {
+dname:any;
+  constructor(public dialogRef: MdDialogRef<DeviceShareComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,public sidebar :SidebarComponent) {
+   
+      //console.log(data)
+      this.dname = data.name
+      this.did =  data.did
+     console.log(this.did)
+     }
+     onNoClick(a): void {
+      //  console.log(a);
+      this.dialogRef.close(a);
+     }
+     ShareRecord(){
+   
+ 
+  if(this.email == null || this.email == undefined){
+    this._flashMessagesService.show('Blank Email ID or Mobile Number', { cssClass: 'alert-danger', timeout: 1500 });
+  
+   }
+   else if(this.email){
+    this.contactService.ShareDevice(this.email,this.useridd,this.did).subscribe(
+  
+      data => {
+        this.device_data = data 
+        window.localStorage['DataUpdate'] = 'True'
+        this.sidebar.sidebarData()
+        this.onNoClick("OK");
+
+  
+      }, (err: any) => { 
+        // console.log(err.status); 
+        // console.log(err);
+      if(err.status !=   200)
+      {
+        
+        //console.log(this.mess);
+        this._flashMessagesService.show( "Invalid Email ID or Mobile Number", { cssClass: 'alert-danger', timeout: 1000 });
+        
+      }
+      }
+    
+    
+    );
+
+  }
+     }
+     fs :any;
+     ls :any;
+     emailid :any;
+     or :any;
+     useridd:any;
+     device_data:any;
+     email:any;
+     did:any;
+     devicess:any;
+     final:any;
+     contact:any;
+     foods = []
+  ngOnInit() {
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+
+  }
+
+}
diff --git a/src/app/dashboard/download-certificate/download-certificate.component.html b/src/app/dashboard/download-certificate/download-certificate.component.html
new file mode 100644
index 0000000..8224dc8
--- /dev/null
+++ b/src/app/dashboard/download-certificate/download-certificate.component.html
@@ -0,0 +1,341 @@
+<!-- <div style="height: 73vh;overflow: auto;" class="card-body .html2canvas-container" id="map2">
+  <div class="row">
+    <div style="position: relative;left:4px;" *ngIf="supAdmin.imageDoc">
+      <img src="{{supAdmin.imageDoc}}" width="100px" height="100px">
+     </div>
+    <div style="position: relative;right: -671px;">
+      <img src="{{imgURL}}" width="150px" height="150px">
+    </div>
+  </div>
+   
+    <h6 class="text-center mb-3">RTO COPY</h6>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        TAC Reg.No :  84399849
+      </div>
+      <div class="col-md-6 mb-3">
+        Fitment Date :  4 September 2021
+      </div>
+
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        CoP No. :  84399849
+      </div>
+      <div class="col-md-6 mb-3">
+        Fitment Renewal Date :  4 September 2021
+      </div>
+    
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        CoP Validity upto :  4 September 2021
+      </div>
+
+    </div>
+
+    <h6 class="text-center mb-3">AIS 140 COMPLIANCE VLT INSTALLATION CERTIFICATE</h6>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Fitment Certificate :  84399849
+      </div>
+      <div class="col-md-6 mb-3">
+        Device Model No. :  NVT-1920
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Chassis No. :  84122399849
+      </div>
+      <div class="col-md-6 mb-3">
+        GNSS Module :  NVdsaT-1920
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Engine No. :  84ss122399849
+      </div>
+      <div class="col-md-6 mb-3">
+        Vahan ID :  84ss122399849
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Vehicle OEM :  84ss122399849
+      </div>
+      <div class="col-md-6 mb-3">
+        Device IMEI :  NVdsaT-1920
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Vehicle Model :  WagnonR
+      </div>
+      <div class="col-md-6 mb-3">
+        GSM Module :  NVdsaT-1920
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Vehicle Reg/temp :  WagnonR
+      </div>
+      <div class="col-md-6 mb-3">
+        ICCID :  84ss122399849
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Voltage :  12V
+      </div>
+      <div class="col-md-6 mb-3">
+        Primary SIM :  84122399849
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Panic Button Model :  jhdks
+      </div>
+      <div class="col-md-6 mb-3">
+        Primary SIM Valid till :  4 September 2021
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Panic Button fitted :  3
+      </div>
+      <div class="col-md-6 mb-3">
+        Secondary SIM :  4 September 2021
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6 mb-3">
+        Dealer Name/fitted by :  demo
+      </div>
+      <div class="col-md-6 mb-3">
+        Secondary SIM Valid till :  4 September 2021
+      </div>
+    </div>
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          GST No. :  4345434
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-4">
+          <img src="{{deviceImage[0]?deviceImage[0]:img1}}" width="90px" height="90px">
+        </div>
+        <div class="col-md-4">
+          <img src="{{deviceImage[1]?deviceImage[1]:img1}}" width="90px" height="90px">
+        </div>
+        <div class="col-md-4">
+          <img src="{{deviceImage[2]?deviceImage[2]:img1}}" width="90px" height="90px">
+        </div>
+
+      </div>
+
+
+      <p>This is certified that, AIS 140 compliant vehicle location tracking device with panic button(SOS) has been installed properly as per AIS-140 guidelines device has been configured to state approval server</p>
+
+      <b class="mt-5 mb-4">Authorised
+
+      <p>This is certified that the device and panic button (SOS) installation has been carried out to my satisfaction and explained about the functionality of
+        Device, I undertake that I will not temper the device and panic button (SOS)
+      </p>
+
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          Customer Name : abc
+        </div>
+        <div class="col-md-6 mb-3">
+          Contact/Login ID : 35344532
+        </div>
+      </div>
+      
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          Customer Address : demo
+        </div>
+        <div class="col-md-6 mb-3">
+          Customer Sign : 
+        </div>
+      </div>
+  </div>
+  <div class="card-footer text-center">
+    <button class="btn btn-primary" (click)="downloadPdf()">Download</button>
+  </div> -->
+
+<md-dialog-content class="md-typography">
+  <table id="testPdf" style="font-weight: 600">
+    <tr>
+      <td>
+        <div *ngIf="org.imageDoc">
+          <img
+            src="{{ org.imageDoc }}"
+            width="100px"
+            height="100px"
+          /><br /><br />
+        </div>
+      </td>
+      <td style="text-align: center; font-weight: 700">
+        <!-- {{org?org.first_name?org.first_name:"":''}} {{org?org.last_name?org.last_name:'':""}}<br><br> -->
+        <!-- {{org?org.address?org.address:'':""}}<br><br> -->
+        RTO COPY
+      </td>
+      <td style="text-align: center">
+        <div>
+          <img src="{{ imgURL }}" width="100px" height="150px" />
+        </div>
+      </td>
+    </tr>
+
+    <tr>
+      <td colspan="3" style="text-align: center">
+        <h6 style="font-size: 18px">&nbsp;&nbsp;.</h6>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        TAC Reg.No &nbsp;&nbsp;&nbsp; <br />
+        CoP No.&nbsp;&nbsp;&nbsp;&nbsp;<br />
+        CoP Validity upto&nbsp;&nbsp;<br />
+        Fitment Date&nbsp;&nbsp;&nbsp;<br />
+        Fitment Renewal Date&nbsp;&nbsp;<br />
+      </td>
+      <td>
+        : CK8077 <br />
+        : CC0GP8551<br />
+        : 30 September 2022 <br />
+        : {{ kycApprovalDate ? (kycApprovalDate | date: "dd/MM/yyyy") : ""
+        }}<br />
+        : {{ esim_validity ? esim_validity : "" }}<br />
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <h6 style="font-size: 18px; margin: 20px 0 10px 0px">
+          AIS 140 COMPLIANCE VLT INSTALLATION CERTIFICATE
+        </h6>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        Fitment Certificate No.<br />
+        Chassis No. <br />
+        Engine No. <br />
+        Vehicle OEM <br />
+        Vehicle Model <br />
+        Vehicle Reg/temp <br />
+        Voltage<br />
+        Panic Button Model<br />
+        Panic Button fitted<br />
+        Dealer Name/fitted by<br />
+        Device Model No.<br />
+        GNSS Module<br />
+        Vahan ID<br />
+        Device IMEI<br />
+        GSM Module<br />
+        ICCID <br />
+        Primary SIM<br />
+        Primary SIM Valid till<br />
+        Secondary SIM<br />
+        Secondary SIM Valid till<br />
+      </td>
+      <td>
+        : {{ fitmentCertificateNo ? fitmentCertificateNo : "" }}<br />
+        : {{ ChassisNo ? ChassisNo : "" }}<br />
+        : {{ engineNo ? engineNo : "" }}<br />
+        : {{ manufacturingCompany ? manufacturingCompany : "" }}<br />
+        : {{ model ? model : "" }}<br />
+        : {{ devName ? devName : "" }}<br />
+        : 12V & 24V<br />
+        : NSS-1821<br />
+        : {{ numberOfSOS ? numberOfSOS : "" }}<br />
+        : {{ dealerName ? dealerName : "" }}<br />
+        : {{ devicetype ? devicetype : "" }}<br />
+        : {{ gnnsModule ? gnnsModule : 0 }}<br />
+        : {{ vahanID ? vahanID : "" }}<br />
+        : {{ deviceID ? deviceID : "" }}<br />
+        : {{ gsmModule ? gsmModule : "Telit GE910" }}<br />
+        : {{ ICCICD ? ICCICD : "" }}<br />
+        : {{ simNum ? simNum : "" }}<br />
+        : {{ expiration_date ? (expiration_date | date: "dd/MM/yyyy") : ""
+        }}<br />
+        : {{ simNum1 ? simNum1 : "" }}<br />
+        : {{ expiration_date ? (expiration_date | date: "dd/MM/yyyy") : ""
+        }}<br />
+      </td>
+    </tr>
+
+    <tr style="padding-top: 10px">
+      <td>
+        <img
+          src="{{ deviceImage[0] ? deviceImage[0] : img1 }}"
+          width="90px"
+          height="90px"
+        />
+      </td>
+      <td>
+        <img
+          src="{{ deviceImage[1] ? deviceImage[1] : img1 }}"
+          width="90px"
+          height="90px"
+        />
+      </td>
+      <td>
+        <img
+          src="{{ deviceImage[2] ? deviceImage[2] : img1 }}"
+          width="90px"
+          height="90px"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p>
+          This is certified that, AIS 140 compliant vehicle location tracking
+          device with panic button(SOS) has been installed properly as per
+          AIS-140 guidelines device has been configured to state approval server
+        </p>
+      </td>
+    </tr>
+    <tr style="padding-top: 10px">
+      <td>Authorised</td>
+    </tr>
+    <tr style="padding-top: 10px">
+      <td>Undertaking</td>
+    </tr>
+    <tr>
+      <td colspan="3">
+        <p>
+          This is certified that the device and panic button (SOS) installation
+          has been carried out to my satisfaction and explained about the
+          functionality of Device, I undertake that I will not temper the device
+          and panic button (SOS)
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2" style="text-align: center; margin-top: 10px">
+        Customer Name : {{ user.first_name ? user.first_name : "" }}
+        {{ user.last_name ? user.last_name : "" }}<br />
+        Contact/Login ID : {{ user.phone ? user.phone : "" }}
+      </td>
+
+      <td>
+        Customer Address: {{ user.address ? user.address : "" }}<br />
+        Customer Sign :
+      </td>
+    </tr>
+  </table>
+</md-dialog-content>
+<md-dialog-actions align="end">
+  <button md-button md-dialog-close>Cancel</button>
+  <button md-button (click)="exportAsPdf()" cdkFocusInitial>Export PDF</button>
+</md-dialog-actions>
diff --git a/src/app/dashboard/download-certificate/download-certificate.component.scss b/src/app/dashboard/download-certificate/download-certificate.component.scss
new file mode 100644
index 0000000..cf60048
--- /dev/null
+++ b/src/app/dashboard/download-certificate/download-certificate.component.scss
@@ -0,0 +1,4 @@
+.html2canvas-container {
+  width: 3000px !important;
+  height: 3000px !important;
+}
diff --git a/src/app/dashboard/download-certificate/download-certificate.component.spec.ts b/src/app/dashboard/download-certificate/download-certificate.component.spec.ts
new file mode 100644
index 0000000..c232b32
--- /dev/null
+++ b/src/app/dashboard/download-certificate/download-certificate.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadCertificateComponent } from './download-certificate.component';
+
+describe('DownloadCertificateComponent', () => {
+  let component: DownloadCertificateComponent;
+  let fixture: ComponentFixture<DownloadCertificateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DownloadCertificateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadCertificateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/download-certificate/download-certificate.component.ts b/src/app/dashboard/download-certificate/download-certificate.component.ts
new file mode 100644
index 0000000..8af0400
--- /dev/null
+++ b/src/app/dashboard/download-certificate/download-certificate.component.ts
@@ -0,0 +1,547 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+declare var jsPDF : any;
+declare var html2canvas:any;
+import * as moment from 'moment';
+import { ContactService } from '../../contact.service';
+declare var $: any;
+declare var QRious:any;
+@Component({
+  selector: 'app-download-certificate',
+  templateUrl: './download-certificate.component.html',
+  styleUrls: ['./download-certificate.component.scss']
+})
+export class DownloadCertificateComponent implements OnInit {
+devName:any;
+  img1='/assets/images/liveTrackIcons/noImageAvailableIcon.jpg'
+  stamp='/assets/images/liveTrackIcons/Stamp.png'
+phNum:any;
+createdOn:any;
+expOn:any;
+supAdmin
+DealerObj = [];
+userObj = [];
+// iconType:any;
+simNum:any;
+todayODO:any;
+totalODO:any;
+useridd: any;
+emailId:any ="";
+costumers: any = [];
+deviceID: any;
+userName:any;
+devmodel:any;
+newUserArr=[];
+editTemplate:boolean=true;
+deletetemplate:boolean=false;
+  orignalEmail: any;
+  initialUser: any;
+  ExportPdf: boolean;
+  devID: any;
+  InvoiceDate: any;
+  devicetype: any;
+  fitmentDate: any;
+  engineNo: any;
+  typeOfVehicle: any;
+  manufacturingCompany: any;
+  lastFitnessDate: any;
+  vehicleRegDate: any;
+  vehicleManufacturingDate: any;
+
+  IMSI: any;
+  uniqueID: any;
+  lattitude: any;
+  longitude: any;
+  userAddress: any;
+  dealerAddress: any;
+  CID_No: any;
+  imgUrl: any;
+  imgURL: any;
+  companyName: any;
+  companyAddress: any;
+  transportOfficeCity: any;
+  transportOfficeState: { data: string; };
+  ChassisNo: any;
+  deviceManufacturer: any;
+  invoiceNum: any;
+  numberOfSOS: any;
+  expiration_date: any;
+  organisationFlag: any;
+  distributerName:any;
+  distSelect: any=[];
+  superAdmin: any;
+  isDealer: any;
+  dealerId: any;
+  lastPingOn:any
+  lastDeviceTime:any
+  deviceImage=[];
+  dealerName
+  installationDate;
+  ICCICD
+  simNum1
+  model
+  user: any;
+  org
+  link: string;
+  kycApprovalDate
+  esim_validity;
+  fitmentCertificateNo
+  vahanID: any;
+  myImage: HTMLImageElement;
+  myImage1: HTMLImageElement;
+  myImage2: HTMLImageElement;
+  stamp1: HTMLImageElement;
+  img: HTMLImageElement;
+  gnnsModule
+  gsmModule
+  constructor(public dialogRef: MdDialogRef<DownloadCertificateComponent>,private contactService:ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any ) {
+      console.log(data);
+      
+     }
+
+  ngOnInit() {
+    this.org=JSON.parse(localStorage.getItem('ORG'))
+    if(!this.data.deviceInfo.esim_validity){
+      if(this.data.deviceInfo.License=="Yearly"){
+        this.esim_validity=this.data.deviceInfo.kycApprovalDate?moment(new Date(this.data.deviceInfo.kycApprovalDate), "DD-MM-YYYY").add(1, 'years').format("DD/MM/YYYY"):undefined;
+      }
+    }else{
+      this.esim_validity=this.data.deviceInfo.esim_validity?moment(new Date(this.data.deviceInfo.esim_validity)).format("DD/MM/YYYY"):undefined
+    }
+    this.fitmentCertificateNo=this.data.deviceInfo.fitmentCertificateNo;
+    this.ChassisNo=this.data.deviceInfo.ChassisNo;
+    this.lastDeviceTime=this.data.deviceInfo.last_device_time;
+    this.numberOfSOS=this.data.deviceInfo.numberOfSOS
+    this.kycApprovalDate=this.data.deviceInfo.kycApprovalDate 
+    this.model=this.data.deviceInfo.Model
+    this.lastPingOn=this.data.deviceInfo.last_ping_on
+    this.devName = this.data.deviceInfo.Device_Name;
+    this.devID = this.data.deviceInfo.Device_ID?this.data.deviceInfo.Device_ID:"";
+    this.phNum =this.data.deviceInfo.contact_number;
+    this.createdOn = this.data.deviceInfo.created_on?(new Date(this.data.deviceInfo.created_on).toISOString()):"";
+    this.expOn = this.data.deviceInfo.expiration_date?(new Date(this.data.deviceInfo.expiration_date).toISOString()):"";
+    // this.iconType=this.data.deviceInfo.iconType;
+    this.simNum =this.data.deviceInfo.sim_number;
+    this.simNum1 =this.data.deviceInfo.sim_number2;
+    this.orignalEmail =  this.data.deviceInfo.Email_ID
+    this.emailId = this.data.deviceInfo.Email_ID;
+    this.deviceImage=this.data.deviceInfo.deviceImage
+       if(this.org.imageDoc && this.org.imageDoc.length>0){
+      this.org.imageDoc='https://www.oneqlik.in' + this.org.imageDoc[0].substring(6)
+    }
+    
+    this.supAdmin=this.data.deviceInfo.supAdmin;
+    if(this.supAdmin.imageDoc && this.supAdmin.imageDoc.length>0){
+      this.supAdmin.imageDoc='https://www.oneqlik.in' + this.supAdmin.imageDoc[0].substring(6)
+    }
+     console.log(this.deviceImage);
+     this.installationDate=this.data.deviceInfo.created_on
+    this.todayODO=this.data.deviceInfo.today_odo;
+    this.totalODO =this.data.deviceInfo.total_odo;
+    this.deviceID = this.data.deviceInfo.Device_ID;
+    this.initialUser = this.data.deviceInfo.user._id;
+    this.user=this.data.deviceInfo.user
+    this.userName = this.data.deviceInfo.OwnerName;
+    this.userAddress = this.data.deviceInfo?this.data.deviceInfo.user.address:"";
+    this.dealerName = this.data.deviceInfo.Dealer_name ;
+    this.dealerId = this.data.deviceInfo.Dealer?this.data.deviceInfo.Dealer._id : ""; 
+    console.log('this.dealerId',this.dealerId);
+    this.dealerAddress = this.data.deviceInfo.DealerAddress;
+    this.InvoiceDate = this.data.deviceInfo.invoiceDate?(new Date(this.data.deviceInfo.invoiceDate).toISOString()):"";
+    this.invoiceNum = this.data.deviceInfo.invoiceNumber
+    this.CID_No = this.data.deviceInfo.CID_No
+    this.devicetype = this.data.deviceInfo.device_model?this.data.deviceInfo.device_model.device_type:"";
+    if(this.devicetype=="Nippon-NVT-1820"){
+      this.gsmModule='Telit GE910'
+    }else if(this.devicetype=="Nippon-NVT-1820"){
+      this.gnnsModule="Telit, Jupiter SL869T3-| Nav|C/IRNSS";
+       this.gsmModule='Telit GE910'
+    }else{
+      this.gnnsModule="Quectel L89(GPS+IRNSS)";
+       this.gsmModule='Quectel M66'
+    }
+
+    for(var i=0;i<this.deviceImage.length;i++){
+
+        this.deviceImage[i] = this.deviceImage[i] &&  this.deviceImage[i]!=""?'http://nipponsecura.in' + this.deviceImage[i].substring(6):''
+        
+      
+    }
+    this.ICCICD = this.data.deviceInfo.IccidNo;
+    this.IMSI = this.data.deviceInfo.IMSI;
+    this.uniqueID = this.data.deviceInfo.uniqueID;
+    this.fitmentDate = this.data.deviceInfo.fitmentDate?new Date(this.data.deviceInfo.fitmentDate):"";
+    this.expiration_date =this.data.deviceInfo.expiration_date?new Date(this.data.deviceInfo.expiration_date):"";
+    this.engineNo = this.data.deviceInfo.engineNo;
+    this.typeOfVehicle = this.data.deviceInfo.typeOfVehicle;
+    this.manufacturingCompany = this.data.deviceInfo.manufacturingCompany;
+    this.vahanID= this.data.deviceInfo.vahanID?this.data.deviceInfo.vahanID:'';
+    this.lastFitnessDate = this.data.deviceInfo.lastFitnessDate?new Date(this.data.deviceInfo.lastFitnessDate):"";
+    this.vehicleRegDate = this.data.deviceInfo.vehicleRegDate? new Date(this.data.deviceInfo.vehicleRegDate):"";
+    this.vehicleManufacturingDate = this.data.deviceInfo.vehicleManufacturingDate?new Date(this.data.deviceInfo.vehicleManufacturingDate):"";
+    this.lattitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[0]:"";
+    this.longitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[1]:"";
+     this.getLocationLink()
+    var that=this
+       this.myImage = new Image();
+    this.myImage.src = this.deviceImage[0]?this.deviceImage[0]:this.img1;
+    this.myImage.crossOrigin="anonymous";
+
+    this.myImage1 = new Image();
+    this.myImage1.src = this.deviceImage[1]?this.deviceImage[1]:this.img1;
+    this.myImage1.crossOrigin="anonymous";
+
+    this.myImage2 = new Image();
+    this.myImage2.src = this.deviceImage[2]?this.deviceImage[2]:this.img1;
+    this.myImage2.crossOrigin="anonymous";
+
+    this.stamp1=new Image();
+    this.stamp1.src=this.stamp;
+    this.stamp1.crossOrigin="anonymous";
+
+    this.img = new Image();
+     this.img.src = this.org.imageDoc?this.org.imageDoc:'';
+     this.img.crossOrigin="anonymous";
+    // one()
+    // function one(){
+    //   stamp.onload = function(){
+        
+
+    
+    //         two()
+    //         doc.addImage(stamp , 'png', 15,210,30,30);
+    //         };
+    // }
+
+    // function two(){
+    //   img.onload = function(){
+    //         console.log("-1");
+    //         three()
+    //         doc.addImage(img , 'png', 15, 9,50,40)
+    //       };
+    // }
+
+    // function three(){
+    //   four()
+    //   myImage.onload = function(){
+    //   console.log("1");
+    //   doc.addImage(myImage , 'png', 40, 170, 30, 20);
+      
+    // };
+    // }
+
+    // function four(){
+    //   myImage1.onload = function(){
+    //     console.log("2");
+    //     five()
+    //     doc.addImage(myImage1 , 'png', 80, 170, 30, 20);
+    // };
+    // }
+
+    // function five(){
+    //   myImage2.onload = function(){
+    //        console.log("3");
+        
+    //     doc.addImage(myImage2 , 'png', 120, 170, 30, 20);
+    //       doc.save(name);
+        
+        
+    //   };
+    // }
+
+    // var stamp=new Image();
+    //         stamp.src=that.stamp;
+    //         stamp.crossOrigin="anonymous";
+    //         stamp.onload = function(){
+    //         console.log("0");
+    //         doc.addImage(stamp , 'png', 15,210,30,30)
+    //         };
+    // var img = new Image();
+    //       img.src = this.org.imageDoc?this.org.imageDoc:'';
+    //      img.crossOrigin="anonymous";
+    //       // if(this.org.imageDoc){
+    //          img.onload = function(){
+    //         console.log("-1");
+    //         doc.addImage(img , 'png', 15, 9,50,40)
+            
+    //       };doc.addImage(myImage , 'png', 40, 170, 30, 20);
+
+    function f1() {
+    return new Promise((resolve, reject) => {
+      that.myImage.onload = function(){
+      console.log("1");
+    };
+    // var isLoaded = this.myImage.complete && this.myImage.naturalHeight !== 0;
+    // if(isLoaded)
+    resolve('');
+    });
+}
+
+function f3(){
+ that.myImage2.onload = function(){
+           console.log("3");
+        
+      };
+}
+
+function f2() {
+  return new Promise((resolve, reject) => {
+    that.myImage1.onload = function(){
+        console.log("2");
+        // doc.addImage(myImage1 , 'png', 80, 170, 30, 20);
+        // if(that.deviceImage.length==2){
+        // doc.save(name);
+      // }
+    };
+  //  var isLoaded = this.myImage1.complete && this.myImage1.naturalHeight !== 0;
+  //   if(isLoaded)
+    resolve('');
+    })
+  
+}
+f1().then(res => f2().then(res1=>f3()));
+
+
+
+
+
+  }
+  getLocationLink(){
+     var data = {
+          id: this.data.deviceInfo._id,
+          imei: this.data.deviceInfo.Device_ID,
+          sh: this.data.deviceInfo.user._id,
+          ttl: 15*60
+          };
+
+          this.contactService.shareLiveLocation(data).subscribe(res=>{
+            console.log(res); 
+            console.log('shareToken',res);
+            this.link = 'http://nipponsecura.in' + "/share/liveShare?t=" + res.t;
+            console.log(this.link);
+            // this.shareLocationToDevice(link);
+            this.qrCodeGenerator()
+          },err=>{
+            console.log(err);
+          })
+  }
+   qrCodeGenerator() {
+  
+    var qr = new QRious();
+    qr.set({
+      // background: 'green',
+      backgroundAlpha: 0.8,
+      // foreground: 'blue',
+      foregroundAlpha: 0.8,
+      level: 'L',
+      padding: 25,
+      size: 500,
+      value: this.link
+    });
+  
+
+    this.imgURL= qr.toDataURL();
+    
+  
+  
+  }
+  exportAsPdf() {
+    var that=this
+    var name="Installation Certificate "+this.devName?this.devName:"Test"+".pdf"
+    console.log(this.imgURL);
+    var doc = new jsPDF();
+    var specialElementHandlers = {
+      '#editor': function (element: any, renderer: any) {
+        return true;
+      }
+    };
+    var stamp=new Image();
+            stamp.src=that.stamp;
+            stamp.crossOrigin="anonymous";
+            // stamp.onload = function(){
+            console.log("0");
+            doc.addImage(that.stamp1 , 'png', 15,210,30,30)
+            // };
+    var img = new Image();
+          img.src = this.org.imageDoc?this.org.imageDoc:'';
+         img.crossOrigin="anonymous";
+          // if(this.org.imageDoc){
+            //  img.onload = function(){
+            console.log("-1");
+            doc.addImage(that.img , 'png', 15, 9,50,40)
+            
+          // };
+    // doc.text("Customer Copy", 110, 12);
+    doc.setFontSize(3);
+    doc.autoTable({
+      theme: 'plain',
+      html: '#testPdf', 
+      
+        tableWidth: 'auto',
+
+      // styles :  {
+      //   cellWidth : 10,
+      //    overflow: "linebreak"
+      // },     
+      willDrawCell: data => {
+        if(data.row.index === 0){ 
+          data.row.height = 30;    
+          doc.setFontStyle('bold');  
+          data.row.cells[0].styles.halign = 'center';
+          data.row.cells[0].styles.fontSize = 25;
+          data.row.cells[0].styles.overflow= "linebreak"
+          data.row.cells[0].styles.lineHeight= "2.5";
+          // doc.setLineHeightFactor()
+           
+          // }
+
+          // doc.addImage(this.supAdmin.imageDoc,'JPEG', 140, 9,40,40);
+          
+          doc.addImage(this.imgURL,'JPEG',150, 9,50,40);
+          
+        }  
+        if(data.row.index ===1 ){    
+        //  data.row.cells[0].styles.halign = 'center';
+          doc.halign = 'center';
+           doc.setFontStyle('bold');
+           doc.cellPadding=60
+        }
+
+        if(data.row.index ===3 ){    
+        //  data.row.cells[0].styles.halign = 'center';
+          doc.halign = 'center';
+        
+        }
+        if( data.row.index ===6){    
+        //  data.row.cells[0].styles.halign = 'center';
+          doc.halign = 'center';
+        
+        }
+
+        if((data.row.index ===1) ||(data.row.index ===3) || (data.row.index ===5) || (data.row.index ===7) ||(data.row.index ===8) ||(data.row.index ===11) || (data.row.index ===13)){
+          doc.setFontStyle('bold');         
+          
+        }
+        if(data.row.index ===5){
+          data.row.height = 30;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+
+        if(data.row.index ===6){
+          data.row.height = 45;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+       doc.setLineWidth(1);
+     		doc.rect(7, 7, 195, 285);
+   
+      }
+      
+    });
+   
+
+    // var myImage = new Image();
+    // myImage.src = that.deviceImage[0]?that.deviceImage[0]:this.img1;
+    // myImage.crossOrigin="anonymous";
+
+    // var myImage1 = new Image();
+    // myImage1.src = that.deviceImage[1]?that.deviceImage[1]:this.img1;
+    // myImage1.crossOrigin="anonymous";
+
+    // var myImage2 = new Image();
+    // myImage2.src = that.deviceImage[2]?that.deviceImage[2]:this.img1;
+    // myImage2.crossOrigin="anonymous";
+
+    // var stamp=new Image();
+    // stamp.src=that.stamp;
+    // stamp.crossOrigin="anonymous";
+
+    //  var img = new Image();
+    //  img.src = this.org.imageDoc?this.org.imageDoc:'';
+    //  img.crossOrigin="anonymous";
+    function f1() {
+       return new Promise((resolve, reject) => {
+       console.log("1");
+      doc.addImage(that.myImage , 'png', 40, 170, 30, 20);
+       resolve('');
+       })
+    }
+
+     function f2() {
+       return new Promise((resolve, reject) => {
+       console.log("2");
+      doc.addImage(that.myImage1 , 'png', 80, 170, 30, 20);
+       resolve('');
+       })
+    }
+
+    function f3(){
+//  myImage2.onload = function(){
+           console.log("3");
+        
+        doc.addImage(that.myImage2 , 'png', 120, 170, 30, 20);
+          doc.save(name);
+        
+}
+//     function f1() {
+//     return new Promise((resolve, reject) => {
+//       myImage.onload = function(){
+//       console.log("1");
+//       doc.addImage(myImage , 'png', 40, 170, 30, 20);
+     
+      
+//     };
+//     var isLoaded = myImage.complete && myImage.naturalHeight !== 0;
+//     if(isLoaded)
+//     resolve('');
+//     });
+// }
+
+// function f3(){
+//  myImage2.onload = function(){
+//            console.log("3");
+        
+//         doc.addImage(myImage2 , 'png', 120, 170, 30, 20);
+//           doc.save(name);
+        
+        
+//       };
+// }
+
+// function f2() {
+//   return new Promise((resolve, reject) => {
+//     myImage1.onload = function(){
+//         console.log("2");
+//         doc.addImage(myImage1 , 'png', 80, 170, 30, 20);
+//         // if(that.deviceImage.length==2){
+//         // doc.save(name);
+//       // }
+//     };
+//    var isLoaded = myImage1.complete && myImage1.naturalHeight !== 0;
+//     if(isLoaded)
+//     resolve('');
+//     })
+  
+// }
+f1().then(res => f2().then(res1=>f3()));
+   
+  }
+
+    toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+}
\ No newline at end of file
diff --git a/src/app/dashboard/e-chalan/e-chalan.component.html b/src/app/dashboard/e-chalan/e-chalan.component.html
new file mode 100644
index 0000000..3bd02d9
--- /dev/null
+++ b/src/app/dashboard/e-chalan/e-chalan.component.html
@@ -0,0 +1,67 @@
+<div class="card">
+  <div class="card-header">
+    <div class="col-12">
+      <span style="color:#855353;font-size:20px;font-weight: 500;">E Chalan</span>
+      <button style="float: right !important;" class="btn btn-danger btn-sm float-left ml-2" 
+      (click)="this.dialogRef.close()">Close <i class="fas fa-times-circle"></i></button>
+      <button style="float: right !important;" class="btn btn-danger btn-sm float-left ml-2" (click)="fetchNewChalan()">Fetch new chalan </button>
+    </div>
+  </div>
+<div id="toast">
+  <div id="desc">{{data_descip}}</div>
+</div>
+  <div class="card-body">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th style="text-align: left;">{{'Chalan No.' | translate}}</th>
+              <th style="text-align: left;">{{'Date' | translate}}</th>
+              <th style="text-align: left;">{{'Owner' | translate}}</th>
+              <th style="text-align: left;">{{'Vehicle Class' | translate}}</th>
+              <th style="text-align: left;">{{'Status' | translate}}</th>
+              <th style="text-align: left;">{{'Payment Date' | translate}}</th>
+              <th style="text-align: left;">{{'Document No' | translate}}</th>
+              <th style="text-align: left;">{{'Payment Source' | translate}}</th> 
+               <th style="text-align: left;">{{'Amount' | translate}}</th>
+              <th style="text-align: left;">{{'Offence' | translate}}</th>
+              <th style="text-align: left;">{{'View' | translate}}</th>
+
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of main">
+              <td>{{item.challan_no}}</td>
+              <td>{{item.date_time | date:'medium'}}</td>
+              <td>{{item.owner_name}}</td>
+              <td>{{item.vehicle_class}}</td>
+              <td>{{item.challan_status}}</td>
+              <td>{{item.payment_date | date:'medium'}}</td>
+              <td >{{item.doc_no}}</td>
+              <td>{{item.payment_source}}</td>
+              <td>{{item.amount}}</td>
+              <td>
+                <span *ngIf="item.offences[0]">{{item.offences[0].offence_name}}</span>
+                <span *ngIf="!item.offences[0]">N/A</span>
+                </td>
+                <td>
+                  <a target="_blank" [href]="item.receipt_url" class="btn btn-primary white-text">
+                     <i class="fas fa-info-circle"></i>
+                  </a>
+                </td>
+              
+            </tr>
+            <tr *ngIf="main.length==0">
+             <div  style="text-align: center;" class="text-center">
+               <h5 style="position: absolute;left: 41%;top: 82%;">No Data Found</h5>
+
+             </div>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>
+    </div>
+
+  <!-- </div> -->
+
diff --git a/src/app/dashboard/e-chalan/e-chalan.component.scss b/src/app/dashboard/e-chalan/e-chalan.component.scss
new file mode 100644
index 0000000..5cd7ed5
--- /dev/null
+++ b/src/app/dashboard/e-chalan/e-chalan.component.scss
@@ -0,0 +1,49 @@
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/dashboard/e-chalan/e-chalan.component.spec.ts b/src/app/dashboard/e-chalan/e-chalan.component.spec.ts
new file mode 100644
index 0000000..9b32ad5
--- /dev/null
+++ b/src/app/dashboard/e-chalan/e-chalan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EChalanComponent } from './e-chalan.component';
+
+describe('EChalanComponent', () => {
+  let component: EChalanComponent;
+  let fixture: ComponentFixture<EChalanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EChalanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EChalanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/e-chalan/e-chalan.component.ts b/src/app/dashboard/e-chalan/e-chalan.component.ts
new file mode 100644
index 0000000..357af8c
--- /dev/null
+++ b/src/app/dashboard/e-chalan/e-chalan.component.ts
@@ -0,0 +1,75 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $: any;
+@Component({
+  selector: 'app-e-chalan',
+  templateUrl: './e-chalan.component.html',
+  styleUrls: ['./e-chalan.component.scss']
+})
+export class EChalanComponent implements OnInit {
+ tabelObj: any ;
+  Load: boolean;
+  main=[];
+ 
+  constructor(public dialogRef: MdDialogRef<EChalanComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+      // this.main=this.data
+      // this.testTable()
+
+      console.log(data);
+      
+    }
+
+  ngOnInit() {
+    this.getechalanHistory()
+  }
+
+  getechalanHistory(){
+    this.Load=true
+    this.contactService.get('/eChalan/getEchalanByVehicleName?vName='+(this.data.dname).replace(/\s/g,'')).subscribe((res:any)=>{
+     if(res.length>0){
+        this.main=res;
+        this.Load=false
+      }else{
+        this.data_descip = res.message;
+         launch_toast();
+         this.Load=false
+
+      }
+    })
+
+    function launch_toast() {
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+}
+  }
+
+ 
+data_descip
+fetchNewChalan(){
+   this.contactService.get('/eChalan/getEchalan?vName='+(this.data.dname).replace(/\s/g,'')).subscribe((res:any)=>{
+      // console.log(res);
+      if(res.length>0){
+        this.main=res;
+        this.Load=false
+      }else{
+        this.data_descip = res.message;
+         launch_toast();
+         this.Load=false
+
+      }
+    })
+
+    function launch_toast() {
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+}
+}
+
+
+}
diff --git a/src/app/dashboard/general-settings/general-settings.component.html b/src/app/dashboard/general-settings/general-settings.component.html
new file mode 100644
index 0000000..2ba0d36
--- /dev/null
+++ b/src/app/dashboard/general-settings/general-settings.component.html
@@ -0,0 +1,155 @@
+<div class="container-fluid" >
+  <div class="row">
+    <div class="col-12" style="font-size: 20px;text-align: center;">
+        <p style="font-weight: 500">General Setting</p>
+        <flash-messages style="color:green;font-size: 15px;padding:0;margin:0;"></flash-messages> 
+    </div> 
+  </div>
+  <div class="formStyle">
+      <form [formGroup]="generalSetings">
+        <div class="row">
+          <div class="col-6">
+                  <md-form-field>
+                    <input placeholder="Device Name" type="text" formControlName="devicename" mdInput>
+                  </md-form-field>
+          </div>
+          <div class="col-6">
+              <md-form-field>
+                  <input placeholder="Total ODO" type="Number" formControlName="total_odo" mdInput>
+                </md-form-field>
+        
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6" style="margin-top: 5px;">
+            <md-form-field>
+              <input placeholder="Mileage (Km/hr)" type="Number" formControlName="mileage"  mdInput>
+            </md-form-field>
+              </div>
+              <div class="col-6">   
+                <md-select formControlName="ignDetection" placeholder="--Ignition Detection--" style="width: 202px;">
+                  <md-option *ngFor="let ignValue of igndtection" [value]="ignValue">
+                    {{ignValue}}
+                  </md-option>
+                </md-select>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6">
+                <md-select formControlName="digitalInput" placeholder="--Digital Input--" style="width: 202px;" >
+                  <md-option *ngFor="let din of dInput" [value]="din">
+                    {{din}}
+                  </md-option>
+                </md-select>
+              </div>
+              <div class="col-6">
+                <md-select formControlName="analogInput" placeholder="--Analog Input--" style="width: 202px;" >
+                  <md-option *ngFor="let ain of aInput" [value]="ain">
+                    {{ain}}
+                  </md-option>
+                </md-select>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col-6">  
+                <md-select formControlName="fuelMeasurment" placeholder="--Fuel Measurment--" style="width: 202px;">
+                  <md-option *ngFor="let fuel of fuelmeasObj" [value]="fuel">
+                    {{fuel}}
+                  </md-option>
+                </md-select>
+              </div>
+              <div class="col-6">
+                <md-form-field>
+                  <input placeholder="Overspeed Limit" type="Number" formControlName="speed"  mdInput>
+                </md-form-field>
+              </div>
+            </div> 
+            <div class="row">
+              <div class="col-6">
+                <md-form-field>
+                  <input placeholder="Over Stop Limit" type="Number" formControlName="overStoppedLimit" mdInput>
+                </md-form-field>
+              </div>
+              <div class="col-6">
+                <md-form-field>
+                  <input placeholder="Over Idle Limit" type="Number" formControlName="overIdleLimit" mdInput>
+                </md-form-field>
+              </div>
+            </div>
+            <div class="row" *ngIf="!driverManagement">
+                <div class="col-6">
+                    <md-form-field>
+                        <input placeholder="Driver Name" type="text" formControlName="driver_name" mdInput>
+                      </md-form-field>
+                </div>
+                  <div class="col-6" >
+                      <md-form-field>
+                          <input placeholder="Driver Number" type="Number" formControlName="driver_number" mdInput>
+                        </md-form-field>
+                
+                  </div>   
+                </div>
+
+              <div class="row" *ngIf="driverManagement">
+                <div class="col-6">
+                <md-select formControlName="driver_name" placeholder="Select Driver" style="width: 202px;" (change)="setContactNumber()">
+                  <md-option *ngFor="let driver of drivers" [value]="driver.name">
+                    {{driver.name}}
+                  </md-option>
+                </md-select>
+                </div>
+                <div class="col-6">
+                  <md-form-field>
+                    <input placeholder="Driver Number"  type="Number" formControlName="driver_number" mdInput>
+                  </md-form-field>
+              
+                </div>
+              </div>
+          </form>
+          <div class="row" >
+        <div class="col-6">
+          <md-input-container style="padding-top: 8px;">
+            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" 
+            #state="ngModel" [(ngModel)]="optiondefault"
+           (ngModelChange)="filterStates(optiondefault)">
+           <md-autocomplete #tdAutoedit="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.country">
+                <span>{{ option.country }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+        </div>
+        <div class="col-6">
+          <md-select [(ngModel)]="tripTypeVal" placeholder="--Trip Type--" style="width: 202px;">
+            <md-option *ngFor="let trip of tripType" [value]="trip.value">
+              {{trip.view}}
+            </md-option>
+          </md-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-6">
+          <md-select [(ngModel)]="selected_ac_wire" placeholder="--AC wiring--" style="width: 202px;">
+            <md-option *ngFor="let trip of ac_wire_setting" [value]="trip">
+              {{trip}}
+            </md-option>
+          </md-select>
+        </div>
+
+        <div class="col-6">
+          <span>{{'Virtual Ac On ' | translate}} :</span>
+          <md-slide-toggle style="float: right; padding: 8px 35.1px" md-tooltip="Include Dealer's Customers"
+            [(ngModel)]="virtualAcc"></md-slide-toggle>
+        
+        
+        </div>
+
+      </div>
+  </div>
+  <div class="row" style="margin-top: 30px;">
+    <div class="col-12" style="text-align: center">
+        <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="saveDetail()">SAVE</button>
+        <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">CANCEL</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/dashboard/general-settings/general-settings.component.scss b/src/app/dashboard/general-settings/general-settings.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/general-settings/general-settings.component.spec.ts b/src/app/dashboard/general-settings/general-settings.component.spec.ts
new file mode 100644
index 0000000..da1d4aa
--- /dev/null
+++ b/src/app/dashboard/general-settings/general-settings.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralSettingsComponent } from './general-settings.component';
+
+describe('GeneralSettingsComponent', () => {
+  let component: GeneralSettingsComponent;
+  let fixture: ComponentFixture<GeneralSettingsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeneralSettingsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeneralSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/general-settings/general-settings.component.ts b/src/app/dashboard/general-settings/general-settings.component.ts
new file mode 100644
index 0000000..1d4bcff
--- /dev/null
+++ b/src/app/dashboard/general-settings/general-settings.component.ts
@@ -0,0 +1,445 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { ContactService } from '../../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+declare var $:any;
+
+@Component({
+  selector: 'app-general-settings',
+  templateUrl: './general-settings.component.html',
+  styleUrls: ['./general-settings.component.scss']
+})
+export class GeneralSettingsComponent implements OnInit {
+  errorMsg:any;
+  virtualAcc
+  showError : boolean=false;
+  igndtection = ['ACC','MOVEMENT'];
+  dInput = ['ACC','AC','DOOR'];
+  aInput = ['Fuel', 'Tempreture','Battey Status'];
+  fuelmeasObj  = ['GPS','MANUAL'];
+  tripType = [{view : 'One WAY',value : 1},{view : 'Two Way', value : 2}]
+  tripTypeVal:any
+
+  loader :boolean = true;
+  generalSetings: FormGroup;
+  devicesss: any;
+  custtype: any;
+  useridd: any;
+  mb: any;
+  emailid: any;
+  superAdmin: any;
+  finall: any;
+  options: any=[];
+  deviceArr: any =[];
+  currencyValue: any;
+  id: any;
+  driverManagement:boolean=false;
+  selected_ac_wire="Forward"
+  ac_wire_setting=['Forward','Reversed']
+  constructor(public dialogRef: MdDialogRef<GeneralSettingsComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,public formBuilder: FormBuilder,private _flashMessagesService: FlashMessagesService) { 
+      console.log('this.data.device',this.data.device);
+      this.id = this.data.device._id ;
+      this.driverManagement=data.device.user.driverManagement?data.device.user.driverManagement:false
+      console.log('this.id=>',this.id)
+      var flmsrmnt;
+      if(this.data.device.fuelMeasurement){
+        if(this.data.device.fuelMeasurement == 'GPS'){
+          flmsrmnt = this.fuelmeasObj[0];
+        }
+        if(this.data.device.fuelMeasurement == 'MANUAL'){
+          flmsrmnt = this.fuelmeasObj[1];
+        }
+        
+      }
+
+      this.tripTypeVal = this.data.device?this.data.device.tripType :1 ; 
+      this.virtualAcc=this.data.device.virtualacc?this.data.device.virtualacc:false;
+      this.selected_ac_wire=this.data.device.ac_wire_setting?this.data.device.ac_wire_setting:'Forward'
+      this.generalSetings = formBuilder.group({
+        driver_name : [this.data.device.driver_name?this.data.device.driver_name : ''],
+        devicename : [this.data.device.Device_Name?this.data.device.Device_Name : ''],
+        driver_number : [this.data.device.contact_number?this.data.device.contact_number : null],
+        total_odo: [this.data.device.total_odo?this.data.device.total_odo : 0],
+        speed: [this.data.device.SpeedLimit?this.data.device.SpeedLimit : 60],
+        mileage: [this.data.device.Mileage?this.data.device.Mileage : 10],
+        ignDetection:[this.data.device.ignitionSource?this.data.device.ignitionSource : this.igndtection[0]],
+        digitalInput : [this.data.device.digitalInput?this.data.device.digitalInput:this.dInput[0]],
+        analogInput:[this.data.device.analogInput?this.data.device.analogInput:this.aInput[0]],
+        fuelMeasurment : [flmsrmnt],
+        overStoppedLimit:[this.data.device.overStoppedLimit?this.data.device.overStoppedLimit : 0],
+        overIdleLimit:[this.data.device.overIdleLimit?this.data.device.overIdleLimit : 0],
+        currencyVlaue : [this.currencyValue],
+        
+      })
+
+      // $('select').hide();
+    
+   
+    }
+    option:any;
+  ngOnInit() {
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.getCurrencies();  
+    if(this.driverManagement)
+    this.getDrivers()
+  }
+  drivers
+  getDrivers(){
+    this.contactService.get("/driver/getDrivers?userid="+this.useridd).subscribe(res=>{
+      this.drivers=res
+    })
+  }
+
+
+  dataSelect=[];
+  filterStates(val) {
+    console.log(val)
+    // console.log(this.dummyuserData)
+
+    if (val) {
+      const filterValue: any = val;
+      console.log(this.currency);
+      this.dataSelect = this.currency.filter(function (d) {
+              console.log("inside Search Method=>",d);
+        return d.country.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+    // console.log("searched user=>",this.dataSelect);
+  }
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+  //   setTimeout(() => {
+  //     $('select').multipleSelect({
+  //       single: true,
+  //       width: 200,
+  //       placeholder: 'Select Currency.....',
+  //       filter: true,
+    
+      
+  //     })
+    
+
+  //   }, 100);
+
+  // }
+
+  
+
+
+
+  ngOnDestroy(){
+   
+    this.dialogRef.close('cancelled');
+  }
+  currencyArr = [];
+  saveDetail(){
+ 
+    if(this.dataSelect.length == 0){
+        console.log("currency",(this.optiondefault).split('-')[0]);
+        var currencyyy = this.optiondefault.split('-')[0];
+    }else{
+      console.log(this.dataSelect[0].currencyVal);
+      var currencyyy  = this.dataSelect[0].currencyVal ;
+    }
+    console.log(this.generalSetings.value);
+    // this.currencyArr =$('#select').multipleSelect('getSelects','value');
+    // if(this.currencyArr.length != 0){
+    //   var temp = this.currencyArr[0].split(':')[1]; 
+    //   this.generalSetings.value.currencyVlaue = temp.split("'")[1];
+    // }  
+    
+      var devSettingObj = {    
+        speed: this.generalSetings.value.speed,
+        Mileage: this.generalSetings.value.mileage,
+        ignDetection:this.generalSetings.value.ignDetection,
+        digitalInput : this.generalSetings.value.digitalInput,
+        analogInput:this.generalSetings.value.analogInput,
+        fuelMeasurement :this.generalSetings.value.fuelMeasurment,
+        currency : currencyyy,
+        device_model:this.data.device.device_model._id,
+        overStoppedLimit:this.generalSetings.value.overStoppedLimit,
+        overIdleLimit:this.generalSetings.value.overIdleLimit,
+        _id : this.id
+      }
+          console.log(this.option);
+      if(this.virtualAcc != undefined){
+            devSettingObj['virtualacc'] = this.virtualAcc ;
+
+          }
+          if(this.tripTypeVal != undefined){
+            devSettingObj['tripType'] = this.tripTypeVal ;
+
+          }
+      // if((this.generalSetings.value.currencyVlaue != null)||(this.generalSetings.value.currencyVlaue != undefined)){
+      //   devSettingObj['currency'] = this.generalSetings.value.currencyVlaue;
+      // }
+      if(this.generalSetings.value.total_odo !=null){
+        devSettingObj['total_odo'] = this.generalSetings.value.total_odo;
+      }
+      if(this.selected_ac_wire){
+        devSettingObj['ac_wire_setting'] = this.selected_ac_wire;
+      }
+
+      if(this.generalSetings.value.driver_name !=null){
+        devSettingObj['drname'] = this.generalSetings.value.driver_name;
+      }
+
+      if(this.generalSetings.value.devicename !=null){
+        devSettingObj['devicename'] = this.generalSetings.value.devicename;
+      }
+
+      if(this.generalSetings.value.driver_number !=null){
+        devSettingObj['dphone'] = this.generalSetings.value.driver_number;
+      }
+
+      console.log('devSettingObj',devSettingObj);
+      this.contactService.editdevice(devSettingObj).subscribe(res=>{
+
+        this.dialogRef.close('done');
+
+      },err=>{
+        this.showError=true;
+        this.errorMsg= "Couldn't save Information, pLease try after sometime";
+        this._flashMessagesService.show(this.errorMsg, { cssClass: 'alert-danger', timeout: 3000});
+      })
+     
+    
+    
+     
+  }
+
+  closebox(){
+    console.log('close');
+    this.dialogRef.close('cancelled');
+  }
+  currency = [];
+  optiondefault:any;
+  getCurrencies(){
+    this.currency = [];
+    // this.contactService.getCurrencies().subscribe(res=>{
+      var currencyObj = this.currencyJson;  
+      for(var i in currencyObj){
+        if(this.data.device.currency != undefined){
+          var devicecurr = this.data.device.currency ; 
+          if(i == devicecurr){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+
+        }else{
+          if(i == 'INR'){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+        }
+    
+      var tempObj = {
+        currencyVal : i,
+        country       : i+ '-' +  currencyObj[i]
+      }
+        this.currency.push(tempObj);
+      }
+    
+      console.log(this.currency);
+     
+  }
+
+  setContactNumber(){
+    console.log(this.generalSetings.value.driver_name);
+    for(var i=0;i<this.drivers.length;i++){
+      if(this.drivers[i].name==this.generalSetings.value.driver_name){
+        this.generalSetings.patchValue({
+          driver_number:Number(this.drivers[i].contactNumber)
+        })
+      }
+    }
+   
+    
+  }
+
+  currencyJson = {
+    "AED": "United Arab Emirates Dirham",
+    "AFN": "Afghan Afghani",
+    "ALL": "Albanian Lek",
+    "AMD": "Armenian Dram",
+    "ANG": "Netherlands Antillean Guilder",
+    "AOA": "Angolan Kwanza",
+    "ARS": "Argentine Peso",
+    "AUD": "Australian Dollar",
+    "AWG": "Aruban Florin",
+    "AZN": "Azerbaijani Manat",
+    "BAM": "Bosnia-Herzegovina Convertible Mark",
+    "BBD": "Barbadian Dollar",
+    "BDT": "Bangladeshi Taka",
+    "BGN": "Bulgarian Lev",
+    "BHD": "Bahraini Dinar",
+    "BIF": "Burundian Franc",
+    "BMD": "Bermudan Dollar",
+    "BND": "Brunei Dollar",
+    "BOB": "Bolivian Boliviano",
+    "BRL": "Brazilian Real",
+    "BSD": "Bahamian Dollar",
+    "BTC": "Bitcoin",
+    "BTN": "Bhutanese Ngultrum",
+    "BWP": "Botswanan Pula",
+    "BYN": "Belarusian Ruble",
+    "BZD": "Belize Dollar",
+    "CAD": "Canadian Dollar",
+    "CDF": "Congolese Franc",
+    "CHF": "Swiss Franc",
+    "CLF": "Chilean Unit of Account (UF)",
+    "CLP": "Chilean Peso",
+    "CNH": "Chinese Yuan (Offshore)",
+    "CNY": "Chinese Yuan",
+    "COP": "Colombian Peso",
+    "CRC": "Costa Rican Colón",
+    "CUC": "Cuban Convertible Peso",
+    "CUP": "Cuban Peso",
+    "CVE": "Cape Verdean Escudo",
+    "CZK": "Czech Republic Koruna",
+    "DJF": "Djiboutian Franc",
+    "DKK": "Danish Krone",
+    "DOP": "Dominican Peso",
+    "DZD": "Algerian Dinar",
+    "EGP": "Egyptian Pound",
+    "ERN": "Eritrean Nakfa",
+    "ETB": "Ethiopian Birr",
+    "EUR": "Euro",
+    "FJD": "Fijian Dollar",
+    "FKP": "Falkland Islands Pound",
+    "GBP": "British Pound Sterling",
+    "GEL": "Georgian Lari",
+    "GGP": "Guernsey Pound",
+    "GHS": "Ghanaian Cedi",
+    "GIP": "Gibraltar Pound",
+    "GMD": "Gambian Dalasi",
+    "GNF": "Guinean Franc",
+    "GTQ": "Guatemalan Quetzal",
+    "GYD": "Guyanaese Dollar",
+    "HKD": "Hong Kong Dollar",
+    "HNL": "Honduran Lempira",
+    "HRK": "Croatian Kuna",
+    "HTG": "Haitian Gourde",
+    "HUF": "Hungarian Forint",
+    "IDR": "Indonesian Rupiah",
+    "ILS": "Israeli New Sheqel",
+    "IMP": "Manx pound",
+    "INR": "Indian Rupee",
+    "IQD": "Iraqi Dinar",
+    "IRR": "Iranian Rial",
+    "ISK": "Icelandic Króna",
+    "JEP": "Jersey Pound",
+    "JMD": "Jamaican Dollar",
+    "JOD": "Jordanian Dinar",
+    "JPY": "Japanese Yen",
+    "KES": "Kenyan Shilling",
+    "KGS": "Kyrgystani Som",
+    "KHR": "Cambodian Riel",
+    "KMF": "Comorian Franc",
+    "KPW": "North Korean Won",
+    "KRW": "South Korean Won",
+    "KWD": "Kuwaiti Dinar",
+    "KYD": "Cayman Islands Dollar",
+    "KZT": "Kazakhstani Tenge",
+    "LAK": "Laotian Kip",
+    "LBP": "Lebanese Pound",
+    "LKR": "Sri Lankan Rupee",
+    "LRD": "Liberian Dollar",
+    "LSL": "Lesotho Loti",
+    "LYD": "Libyan Dinar",
+    "MAD": "Moroccan Dirham",
+    "MDL": "Moldovan Leu",
+    "MGA": "Malagasy Ariary",
+    "MKD": "Macedonian Denar",
+    "MMK": "Myanma Kyat",
+    "MNT": "Mongolian Tugrik",
+    "MOP": "Macanese Pataca",
+    "MRO": "Mauritanian Ouguiya (pre-2018)",
+    "MRU": "Mauritanian Ouguiya",
+    "MUR": "Mauritian Rupee",
+    "MVR": "Maldivian Rufiyaa",
+    "MWK": "Malawian Kwacha",
+    "MXN": "Mexican Peso",
+    "MYR": "Malaysian Ringgit",
+    "MZN": "Mozambican Metical",
+    "NAD": "Namibian Dollar",
+    "NGN": "Nigerian Naira",
+    "NIO": "Nicaraguan Córdoba",
+    "NOK": "Norwegian Krone",
+    "NPR": "Nepalese Rupee",
+    "NZD": "New Zealand Dollar",
+    "OMR": "Omani Rial",
+    "PAB": "Panamanian Balboa",
+    "PEN": "Peruvian Nuevo Sol",
+    "PGK": "Papua New Guinean Kina",
+    "PHP": "Philippine Peso",
+    "PKR": "Pakistani Rupee",
+    "PLN": "Polish Zloty",
+    "PYG": "Paraguayan Guarani",
+    "QAR": "Qatari Rial",
+    "RON": "Romanian Leu",
+    "RSD": "Serbian Dinar",
+    "RUB": "Russian Ruble",
+    "RWF": "Rwandan Franc",
+    "SAR": "Saudi Riyal",
+    "SBD": "Solomon Islands Dollar",
+    "SCR": "Seychellois Rupee",
+    "SDG": "Sudanese Pound",
+    "SEK": "Swedish Krona",
+    "SGD": "Singapore Dollar",
+    "SHP": "Saint Helena Pound",
+    "SLL": "Sierra Leonean Leone",
+    "SOS": "Somali Shilling",
+    "SRD": "Surinamese Dollar",
+    "SSP": "South Sudanese Pound",
+    "STD": "São Tomé and Príncipe Dobra (pre-2018)",
+    "STN": "São Tomé and Príncipe Dobra",
+    "SVC": "Salvadoran Colón",
+    "SYP": "Syrian Pound",
+    "SZL": "Swazi Lilangeni",
+    "THB": "Thai Baht",
+    "TJS": "Tajikistani Somoni",
+    "TMT": "Turkmenistani Manat",
+    "TND": "Tunisian Dinar",
+    "TOP": "Tongan Pa'anga",
+    "TRY": "Turkish Lira",
+    "TTD": "Trinidad and Tobago Dollar",
+    "TWD": "New Taiwan Dollar",
+    "TZS": "Tanzanian Shilling",
+    "UAH": "Ukrainian Hryvnia",
+    "UGX": "Ugandan Shilling",
+    "USD": "United States Dollar",
+    "UYU": "Uruguayan Peso",
+    "UZS": "Uzbekistan Som",
+    "VEF": "Venezuelan Bolívar Fuerte (Old)",
+    "VES": "Venezuelan Bolívar Soberano",
+    "VND": "Vietnamese Dong",
+    "VUV": "Vanuatu Vatu",
+    "WST": "Samoan Tala",
+    "XAF": "CFA Franc BEAC",
+    "XAG": "Silver Ounce",
+    "XAU": "Gold Ounce",
+    "XCD": "East Caribbean Dollar",
+    "XDR": "Special Drawing Rights",
+    "XOF": "CFA Franc BCEAO",
+    "XPD": "Palladium Ounce",
+    "XPF": "CFP Franc",
+    "XPT": "Platinum Ounce",
+    "YER": "Yemeni Rial",
+    "ZAR": "South African Rand",
+    "ZMW": "Zambian Kwacha",
+    "ZWL": "Zimbabwean Dollar"
+  }
+}
diff --git a/src/app/dashboard/new-edit-device/new-edit-device.component.html b/src/app/dashboard/new-edit-device/new-edit-device.component.html
new file mode 100644
index 0000000..c384609
--- /dev/null
+++ b/src/app/dashboard/new-edit-device/new-edit-device.component.html
@@ -0,0 +1,659 @@
+<app-all-menus></app-all-menus>
+<div id="toast">
+  <!-- <div id="desc">{{data_descip}}</div> -->
+</div>
+<div class="loading" *ngIf="Load">Loading&#8230;</div>
+<div class="topDiv">
+  <div class="card">
+    <div class="card-header">
+      <h4>
+        Update Device
+        <button type="button" class="close pull-right" (click)="back()">
+          <i class="fas fa-arrow-circle-left"></i>
+        </button>
+      </h4>
+    </div>
+
+    <div class="card-body">
+      <form [formGroup]="deviceForm" (ngSubmit)="submit()">
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Contact No.</label> <span>*</span>
+            <input
+              (input)="onSearchChange($event.target.value)"
+              formControlName="contactNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Contact number"
+              [ngClass]="{ 'is-invalid': submitted && f.contactNo.errors }"
+            />
+            <small *ngIf="message">{{ message }}</small>
+            <div
+              *ngIf="submitted && f.contactNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.contactNo.errors.required">
+                Contact Number is required
+              </div>
+              <div *ngIf="f.contactNo.errors.pattern">
+                Please enter valid Contact No
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Owner Name</label> <span>*</span>
+            <input
+              formControlName="ownerName"
+              type="text"
+              class="form-control"
+              id="inputEmail4"
+              placeholder="Please Enter Owner Name"
+              [ngClass]="{ 'is-invalid': submitted && f.ownerName.errors }"
+            />
+            <div
+              *ngIf="submitted && f.ownerName.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.ownerName.errors.required">
+                Owner Name is required
+              </div>
+              <div *ngIf="f.ownerName.errors.pattern">
+                Please enter valid name
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputCity">Email</label>
+            <!-- <span>*</span> -->
+            <input
+              formControlName="email"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              placeholder="Please Enter Email"
+            />
+            <!-- <div *ngIf="submitted && f.email.errors.email" class="invalid-feedback">
+                <div *ngIf="f.email.errors.email">Please Enter valid email id</div>
+              </div> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputCity">Dealer Followup Mobile</label> <span>*</span>
+            <input
+              formControlName="dealerFollowup"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div
+              *ngIf="submitted && f.dealerFollowup.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.dealerFollowup.errors.required">
+                Dealer Followup is required
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputCity">Address</label> <span>*</span>
+            <input
+              formControlName="address"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div *ngIf="submitted && f.address.errors" class="invalid-feedback">
+              <div *ngIf="f.address.errors.required">Address is required</div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="pin">Pin Code</label> <span>*</span>
+            <input
+              formControlName="pin"
+              type="text"
+              class="form-control"
+              id="pin"
+              [ngClass]="{ 'is-invalid': submitted && f.dealerFollowup.errors }"
+            />
+            <div *ngIf="submitted && f.pin.errors" class="invalid-feedback">
+              <div *ngIf="f.pin.errors.required">Pin Code is required</div>
+              <div *ngIf="f.pin.errors.pattern">
+                Please Enter valid Pin code
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputState">State</label>
+            <select
+              formControlName="state"
+              (change)="onStateChange($event)"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose state</option>
+              <option *ngFor="let item of states" [value]="item">
+                {{ item }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputCity">City</label>
+            <select
+              formControlName="city"
+              (change)="onCityChange($event)"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose City</option>
+              <option *ngFor="let item of cityList" [value]="item.city">
+                {{ item.city }}
+              </option>
+            </select>
+            <!-- <input formControlName="city" type="text" class="form-control" id="inputCity"> -->
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputZip">RTO Office</label>
+            <select
+              formControlName="rtoOffice"
+              id="inputState"
+              class="form-control"
+            >
+              <option value="" selected disabled>Choose RTO</option>
+              <option *ngFor="let item of RTO" [value]="item.RTO_Name">
+                {{ item.RTO_Name }}
+              </option>
+            </select>
+            <!-- <input formControlName="rtoOffice" type="text" class="form-control" id="inputZip"> -->
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
+            <input
+              formControlName="device_id"
+              type="text"
+              class="form-control"
+              id="inputCity"
+              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
+            />
+            <div
+              *ngIf="submitted && f.device_id.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.device_id.errors.required">
+                Device Id is required
+              </div>
+            </div>
+          </div>
+          <!-- <div *ngIf="inventoryManagement" class="form-group col-md-4">
+
+            <label for="inputCity">Device ID (IMEI)</label><span>*</span>
+            <div>
+              <select formControlName="device_id" class="form-control">
+                <option *ngFor="let option_1 of inventory" [value]="option_1.IMEI">{{ option_1.IMEI }}</option>
+              </select>
+            </div>
+            <div *ngIf="submitted && f.device_id.errors" class="invalid-feedback">
+              <div *ngIf="f.device_id.errors.required">Device Id is required</div>
+            </div>
+          </div> -->
+
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Vehicle No.</label><span>*</span>
+            <input
+              formControlName="vehicleNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Vehicle number"
+              [ngClass]="{ 'is-invalid': submitted && f.vehicleNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.vehicleNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.vehicleNo.errors.required">
+                Vehicle number is required
+              </div>
+              <div *ngIf="f.vehicleNo.errors.maxLength">
+                Vehicle number accepts max 10 digits
+              </div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Vehicle Type</label><span>*</span>
+            <div>
+              <select formControlName="vehicleType" class="form-control">
+                <option *ngFor="let option_1 of vehData" [value]="option_1._id">
+                  {{ option_1.vehicle_name }}
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="iccid">ICCID</label>
+            <input
+              formControlName="iccid"
+              type="text"
+              class="form-control"
+              id="iccid"
+              placeholder="Enter ICCID No number"
+            />
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="sim1">SIM 1</label> <span>*</span>
+            <input
+              formControlName="sim1"
+              type="text"
+              class="form-control"
+              id="sim1"
+              placeholder="Enter SIM number"
+              [ngClass]="{ 'is-invalid': submitted && f.sim1.errors }"
+            />
+            <div *ngIf="submitted && f.sim1.errors" class="invalid-feedback">
+              <div *ngIf="f.sim1.errors.required">SIM 1 is required</div>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">SIM 2</label>
+            <div>
+              <input
+                formControlName="sim2"
+                type="text"
+                class="form-control"
+                id="sim1"
+                placeholder="Enter SIM number"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Chassis No.</label><span>*</span>
+            <input
+              formControlName="chasisNo"
+              type="text"
+              class="form-control"
+              id="inputEmail4"
+              placeholder="Enter Chasis No."
+              [ngClass]="{ 'is-invalid': submitted && f.chasisNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.chasisNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.chasisNo.errors.required">
+                Chassis No is required
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputPassword4">Engine No.</label><span>*</span>
+            <input
+              formControlName="engineNo"
+              type="text"
+              class="form-control"
+              id="inputPassword4"
+              placeholder="Enter Engine number"
+              [ngClass]="{ 'is-invalid': submitted && f.engineNo.errors }"
+            />
+            <div
+              *ngIf="submitted && f.engineNo.errors"
+              class="invalid-feedback"
+            >
+              <div *ngIf="f.engineNo.errors.required">
+                Engine No is required
+              </div>
+            </div>
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">Panic Button Quality.</label>
+            <select formControlName="panic" class="form-control">
+              <option value="" selected disabled>Select Panic Button</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
+              <option value="6">6</option>
+              <option value="7">7</option>
+              <option value="8">8</option>
+              <option value="9">9</option>
+              <option value="10">10</option>
+            </select>
+            <!-- <input formControlName="panic" type="text" class="form-control" id="inputEmail4"
+                placeholder="Enter Panic Button Quality."> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputCity">Vehicle Manufacture</label>
+            <select
+              class="form-control"
+              formControlName="vehicleManufacture"
+              (change)="selectModel($event)"
+            >
+              <option value="" selected disabled>Choose Manufacturer</option>
+              <option *ngFor="let item of manufacturingData" [value]="item">
+                {{ item }}
+              </option>
+            </select>
+            <!-- <input formControlName="vehicleManufacture" type="text" class="form-control" id="inputCity"> -->
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">Model</label>
+            <select class="form-control" formControlName="model">
+              <option value="" selected disabled>Choose Model</option>
+              <option *ngFor="let item of modelData" [value]="item.ModelName">
+                {{ item.ModelName }}
+              </option>
+            </select>
+            <!-- <input formControlName="vehicleCategory" type="text" class="form-control" id="inputZip"> -->
+          </div>
+
+          <div class="form-group col-md-4">
+            <lable>{{ "Vehicle Category" | translate }} :</lable>
+            <select formControlName="vehicleCategory" class="form-control">
+              <option *ngFor="let license of vehicleCat" [value]="license">
+                {{ license }}
+              </option>
+            </select>
+            <!-- <label for="inputZip">Type Of Vehicle</label>
+            <input
+              formControlName="vehicleCategory"
+              type="text"
+              class="form-control"
+              id="inputZip"
+            /> -->
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputState">Device Model</label><span>*</span>
+            <div>
+              <select formControlName="deviceModel" class="form-control">
+                <option
+                  *ngFor="let option_1 of device_Model"
+                  [value]="option_1._id"
+                >
+                  {{ option_1.modelName }}
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">Tracking Expiry</label>
+            <input
+              formControlName="trackingExp"
+              bsDatepicker
+              [bsConfig]="bsConfig"
+              type="text"
+              class="form-control"
+              id="inputZip"
+            />
+          </div>
+
+          <div class="form-group col-md-4">
+            <label for="inputZip">E sim Expiry</label>
+            <input
+              formControlName="eSimExpiry"
+              bsDatepicker
+              [bsConfig]="bsConfig"
+              type="text"
+              class="form-control"
+              id="inputZip"
+            />
+          </div>
+        </div>
+
+        <div class="row"></div>
+      </form>
+      <div *ngIf="deviceData.remark">
+        <h6><b>Remark : </b>{{ deviceData.remark }}</h6>
+      </div>
+      <hr />
+      <div
+        style="overflow: auto; overflow-x: hidden; min-height: 200px"
+        [ngClass]="{ rowHeight: docRow }"
+      >
+        <div class="row" *ngFor="let data of imageuploadObject; let i = index">
+          <div class="col-sm-6" style="padding-top: 8px">
+            <div class="row">
+              <div class="col-md-4">
+                <span>{{ data.doctype }} : </span>
+              </div>
+              <div class="col-md-6">
+                <input
+                  type="text"
+                  [(ngModel)]="data.phone"
+                  placeholder="{{ 'Doc number' | translate }}"
+                />
+              </div>
+              <div>
+                <img
+                  *ngIf="data.image"
+                  style="width: 50px"
+                  [src]="'https://www.oneqlik.in' + data.image.substring(6)"
+                  (click)="openModal(template, data)"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div class="col-sm-6">
+            <span
+              ><input
+                type="file"
+                class="btn btn btn-success"
+                style="background: #f1f1f1; border: none; color: black"
+                (change)="onFileChanged($event, i)"
+            /></span>
+            <!-- <span>
+              <button class="btn btn btn-success" (click)="onUpload(i)">
+                {{ uploadStatus }}
+              </button></span
+            > -->
+          </div>
+        </div>
+      </div>
+
+      <div class="accordion" id="accordionExample">
+        <div
+          class="card"
+          style="margin-left: 61px; margin-top: 23px; margin-right: 151px"
+        >
+          <div class="card-header" id="headingOne">
+            <h2 class="mb-0">
+              <button
+                class="btn btn-link"
+                type="button"
+                data-toggle="collapse"
+                data-target="#collapseOne"
+                aria-expanded="true"
+                aria-controls="collapseOne"
+              >
+                Upload Device Image
+              </button>
+            </h2>
+          </div>
+
+          <div
+            id="collapseOne"
+            class="collapse collapse"
+            aria-labelledby="headingOne"
+            data-parent="#accordionExample"
+          >
+            <div class="card-body">
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 1: </span>
+                </div>
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[0]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[0].substring(6)"
+                    (click)="openModal(template, deviceImg[0])"
+                  />
+                </div>
+
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 0)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(0)"
+                  ></i>
+                </div> -->
+              </div>
+
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 2: </span>
+                </div>
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[1]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[1].substring(6)"
+                    (click)="openModal(template, deviceImg[1])"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 1)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(1)"
+                  ></i>
+                </div> -->
+              </div>
+
+              <div class="row">
+                <div class="col-md-2">
+                  <span>Device Image 3: </span>
+                </div>
+                <div class="col-md-2">
+                  <img
+                    *ngIf="deviceImg[2]"
+                    style="width: 50px"
+                    [src]="'https://www.oneqlik.in' + deviceImg[2].substring(6)"
+                    (click)="openModal(template, deviceImg[2])"
+                  />
+                </div>
+                <div class="col-md-4">
+                  <input
+                    style="
+                      background: #ececec;
+                      width: 80%;
+                      margin-left: 5px;
+                      border: 1px solid #c1c1c1;
+                    "
+                    type="file"
+                    (change)="onDeviceImageChanged($event, 2)"
+                  />
+                </div>
+
+                <!-- <div class="col-md-4">
+                  <i
+                    class="fas fa-cloud-upload-alt"
+                    style="
+                      color: #4c6ef5;
+                      float: left;
+                      font-size: 23px;
+                      line-height: 2.1rem;
+                      cursor: pointer;
+                    "
+                    title="Upload Image"
+                    (click)="onDeviceImageUploadUpload(2)"
+                  ></i>
+                </div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-footer text-center">
+        <button type="submit" class="btn btn-primary" (click)="submit()">
+          Update Device
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">{{ docName }}</h4>
+    <button
+      type="button"
+      class="close pull-right"
+      aria-label="Close"
+      (click)="modalRef.hide()"
+    >
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body row">
+    <div class="col-md-12">
+      <img style="width: -webkit-fill-available" src="{{ image }}" />
+    </div>
+  </div>
+</ng-template>
diff --git a/src/app/dashboard/new-edit-device/new-edit-device.component.scss b/src/app/dashboard/new-edit-device/new-edit-device.component.scss
new file mode 100644
index 0000000..6b962e5
--- /dev/null
+++ b/src/app/dashboard/new-edit-device/new-edit-device.component.scss
@@ -0,0 +1,7 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+  padding-left: 4px;
+  padding-right: 3px;
+}
diff --git a/src/app/dashboard/new-edit-device/new-edit-device.component.spec.ts b/src/app/dashboard/new-edit-device/new-edit-device.component.spec.ts
new file mode 100644
index 0000000..ca8416f
--- /dev/null
+++ b/src/app/dashboard/new-edit-device/new-edit-device.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewEditDeviceComponent } from './new-edit-device.component';
+
+describe('NewEditDeviceComponent', () => {
+  let component: NewEditDeviceComponent;
+  let fixture: ComponentFixture<NewEditDeviceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewEditDeviceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewEditDeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/new-edit-device/new-edit-device.component.ts b/src/app/dashboard/new-edit-device/new-edit-device.component.ts
new file mode 100644
index 0000000..6a90b77
--- /dev/null
+++ b/src/app/dashboard/new-edit-device/new-edit-device.component.ts
@@ -0,0 +1,937 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+import {Location} from '@angular/common';
+declare var $:any;
+declare var swal: any;
+@Component({
+  selector: 'app-new-edit-device',
+  templateUrl: './new-edit-device.component.html',
+  styleUrls: ['./new-edit-device.component.scss']
+})
+export class NewEditDeviceComponent implements OnInit {
+ DeviceModelValue: any;
+ deviceImg=["","",""];
+ modalRef: BsModalRef;
+  submitted = false;
+  date=new Date()
+  expDate:any = new Date(this.date.getFullYear() + 1, this.date.getMonth(), this.date.getDate()).toLocaleString();
+  Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  vehicleCat=[
+  "Luxury Cab",
+"Three wheeled vehicles for transport of passengers/goods",
+"Goods carrier trucks or tankers or mail carriers",
+"Power tiller and Tractors using public roads",
+"Mobile clinic or X-Ray van or library vans",
+"Mobile Workshops",
+"Mobile canteens",
+"Private Service Vehicle",
+"maxi cab",
+"motor cab",
+"stage cariage",
+"contract carriage",
+"Tourist",
+"Educational Institution buses",
+"Ambulances",
+"Animal Ambulances",
+"Camper vans or trailers",
+"Cash vans",
+"Fire tenders, snorked ladders,auxiliary trailers and fire fighting vehicles",
+"Articulated vehicles",
+"Hearses",
+"Motor car",
+"Crane mounted vehicle",
+"Agricultural Tractor and Power Tiller",
+"Tow Trucks, Breakdown Van and Recovery Vehicles",
+"Construction Equipment Vehicles",]
+  custtype: any;
+  DealerId: any;
+  constructor(private modalService: BsModalService,private location:Location,private fb:FormBuilder,private contactService:ContactService,private router:Router,private _flashMessagesService: FlashMessagesService,) { }
+  deviceForm:FormGroup;
+  userId
+  deviceData
+  deviceModel
+  Load:boolean=false;
+    bsConfig: Partial<BsDatepickerConfig>;
+    dataDevModel: any[];
+    vehicle_Type: any[];
+    
+    imageuploadObject = [{doctype:'Adhar card1 *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'Adhar card2 *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'Warrenty Card *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'vehicle sales invoice *',image:'',phone:'',docdate:new Date(),fill:false},
+{doctype:'vehicle RC',image:'',phone:'',docdate:new Date(),fill:true},
+{doctype:'vehicle Photo',image:'',phone:'',docdate:new Date(),fill:true},
+];
+  dealerId
+  sup_admin
+  hrdwr
+  hrdwr2
+  custId
+  documentList = [
+    {
+      "docId": "Adhar card1",
+      "docName": "Adhar Card Front"
+    },
+     {
+      "docId": "Adhar card2",
+      "docName": "Adhar Card Back"
+    },
+    {
+      "docId": "vehicle sales invoice",
+      "docName": "vehicle sales invoice"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "vehicle RC",
+      "docName": "vehicle RC"
+    },
+    {
+      "docId": "vehicle Photo",
+      "docName": "vehicle Photo"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Co.registered Card",
+      "docName": "Co.registered Card"
+    },
+    {
+      "docId": "Nepal Citizenship",
+      "docName": "Nepal Citizenship"
+    },
+    {
+      "docId": "Blue Book",
+      "docName": "Blue Book"
+    },
+    {
+      "docId": "Warrenty Card",
+      "docName": "Warrenty Card"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+  ngOnInit() {
+    
+    this.deviceData=JSON.parse(localStorage.getItem('deviceData'));
+    if(localStorage.getItem('deviceData')){
+      
+      console.log(this.deviceData);
+      var data={target:{value:this.deviceData.transportOfficeState?this.deviceData.transportOfficeState:''}}
+      var data1={target:{value:this.deviceData.transportOfficeCity?this.deviceData.transportOfficeCity:''}}
+      var data3={target:{value:this.deviceData.manufacturingCompany?this.deviceData.manufacturingCompany:''}}
+      this.selectModel(data3)
+      this.onCityChange(data1)
+      this.onStateChange(data);
+      this.imageuploadObject=this.deviceData.imageDoc
+      this.deviceImg=this.deviceData.deviceImage?this.deviceData.deviceImage:["","",""]
+      this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY' }, { containerClass: 'theme-dark-blue' });
+      this.userId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer_ID;
+      this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+      this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+       this.custId = localStorage.getItem('custId');
+        if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON')){
+    
+         this.DealerId =  JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1]))._id;  
+        
+      }
+      
+      var fname=this.deviceData.user?this.deviceData.user.first_name?this.deviceData.user.first_name:'':"";
+      var lname=this.deviceData.user?this.deviceData.user.last_name?this.deviceData.user.last_name:'':""
+      this.deviceForm=this.fb.group({
+        ownerName:[fname+' '+lname,[Validators.required,Validators.pattern("[a-zA-Z][a-zA-Z ]+")]],
+        contactNo:[this.deviceData.user?this.deviceData.user.phone?this.deviceData.user.phone:'':'',[Validators.required,Validators.pattern('[0-9 ]{10}')]],
+        device_id:[this.deviceData.Device_ID?this.deviceData.Device_ID:""],
+        address:[this.deviceData.user?this.deviceData.user.address?this.deviceData.user.address:'':'',Validators.required],
+        state:[this.deviceData.transportOfficeState?this.deviceData.transportOfficeState:''],
+        rtoOffice:[this.deviceData.rto?this.deviceData.rto:''],
+        vehicleManufacture:[this.deviceData.manufacturingCompany?this.deviceData.manufacturingCompany:''],
+        vehicleModel:[this.deviceData.Model?this.deviceData.Model:''],
+        vehicleCategory:[this.deviceData.vehicleCategory?this.deviceData.vehicleCategory:''],
+        vehicleType:[this.deviceData.vehicleType?this.deviceData.vehicleType._id:''],
+        vehicleNo:[this.deviceData.Device_Name?this.deviceData.Device_Name:'',[Validators.required,Validators.maxLength(10)]],
+        chasisNo:[this.deviceData.ChassisNo?this.deviceData.ChassisNo:'',Validators.required],
+        engineNo:[this.deviceData.engineNo?this.deviceData.engineNo:'',Validators.required],
+        panic:[this.deviceData.numberOfSOS?this.deviceData.numberOfSOS:''],
+        bsnlPlan:[''],
+        hostingPlan:[''],
+        SMSPlan:[''],
+        city:[this.deviceData.transportOfficeCity?this.deviceData.transportOfficeCity:''],
+        deviceModel:[this.deviceData.device_model?this.deviceData.device_model._id:''],
+        trackingExp:new Date(this.expDate),
+        eSimExpiry:[this.deviceData.esim_validity?new Date(this.deviceData.esim_validity):''],
+        model:[this.deviceData.Model?this.deviceData.Model:''],
+        email:[this.deviceData.user?this.deviceData.user.email?this.deviceData.user.email:'':''],
+        dealerFollowup:[this.deviceData.CID_No?this.deviceData.CID_No:'',Validators.required],
+        sim1:[this.deviceData.sim_number?this.deviceData.sim_number:'',Validators.required],
+        sim2:[this.deviceData.sim_number2?this.deviceData.sim_number2:''],
+        iccid:[this.deviceData.IccidNo?this.deviceData.IccidNo:''],
+        pin:[this.deviceData.user?this.deviceData.user.pin?this.deviceData.user.pin:'':'',[Validators.required,Validators.pattern('[0-9 ]{6}')]]
+        
+  
+      })
+      console.log("DEVICEFORM=>",this.deviceForm);
+    }else{
+      this.location.back()
+    }
+    
+     this.loadropdown()
+    this.getDeviceModel();
+    this.getvehDetail()
+    this.getUserSetting(this.userId);
+    this.getModelData()
+    this. getAllState()
+    var that=this
+    $(document).on('change','#inventory',function() {
+    var value = $('#inventory').val();
+    for(var i=0;i<that.inventory.length;i++){
+      if(value==that.inventory[i].IMEI){
+        var date=new Date()
+        var exp
+        if(that.inventory[i].eSIMValidaity=="One Year"){
+         exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }else if(that.inventory[i].eSIMValidaity=="Two Year"){
+           exp= new Date(date.getFullYear() + 2, date.getMonth(), date.getDate()).toLocaleString();
+        }else{
+           exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }
+      that.deviceForm.patchValue({
+        iccid:that.inventory[i].IccidNo,
+        sim1:that.inventory[i].Mob1,
+        sim2:that.inventory[i].Mob2,
+        eSimExpiry:new Date(exp),
+        device_id:value
+      })
+
+        that.hrdwr=that.inventory[i].Mob1
+        that.hrdwr2=that.inventory[i].Mob2
+      }
+    }
+    var value=this.deviceData.Device_ID
+    for(var i=0;i<that.inventory.length;i++){
+      if(value==that.inventory[i].IMEI){
+        var date=new Date()
+        var exp
+        if(that.inventory[i].eSIMValidaity=="One Year"){
+         exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }else if(that.inventory[i].eSIMValidaity=="Two Year"){
+           exp= new Date(date.getFullYear() + 2, date.getMonth(), date.getDate()).toLocaleString();
+        }else{
+           exp= new Date(date.getFullYear() + 1, date.getMonth(), date.getDate()).toLocaleString();
+        }
+      that.deviceForm.patchValue({
+        iccid:that.inventory[i].IccidNo,
+        sim1:that.inventory[i].Mob1,
+        sim2:that.inventory[i].Mob2,
+        eSimExpiry:new Date(exp),
+        device_id:value
+      })
+
+        that.hrdwr=that.inventory[i].Mob1
+        that.hrdwr2=that.inventory[i].Mob2
+      }
+    }
+   
+});
+  }
+   get f() { return this.deviceForm.controls; }
+  states=[]
+  getAllState(){
+    this.contactService.get('/RTO_master/getAllState').subscribe((res:any)=>{
+      for(var i=0;i<res.length;i++){
+        this.states.push(res[i]._id.state)
+      }
+      // this.states=res;
+    })
+  }
+
+  submit(){
+    this.submitted = true;
+
+        // stop here if form is invalid
+        if (this.deviceForm.invalid) {
+            return;
+        }
+
+    for(var i=0;i<this.imageuploadObject.length;i++){
+      if(!this.imageuploadObject[i].fill){
+        swal(
+      'Upload Error',
+      'Please upload required documnets !!!',
+      'error'
+      )
+      return;
+      }
+    }
+
+
+    if(this.userFound){
+      this.addDevice(this.user)
+
+    }else{
+
+      var expDate = new Date();
+        expDate.setFullYear(expDate.getFullYear()+1);
+       
+        var name=this.deviceForm.value.ownerName.split(' ')
+  
+        var data={
+          // Dealer:this.reactiveForm.value.manager,
+          contactid:this.deviceData.user._id,
+          custumer: true,
+          expdate:new Date(expDate).toISOString(),
+          first_name:name[0]?name[0]:'',
+          last_name:name[1]?name[1]:'',
+          isDealer: false,
+          phone:this.deviceForm.value.contactNo,
+          user_id:"",
+          org_name: null,
+          password:this.generatePassword(6),
+          supAdmin:this.sup_admin,
+          Dealer:this.userId,
+          timezone: "Asia/Kolkata",
+          std_code: {countryCode: "in", dialcode: "91"},
+          
+        }
+        
+        if(this.deviceForm.value.pin){
+          data['pin']=this.deviceForm.value.pin
+        }
+
+        if(this.deviceForm.value.email){
+          data['email']=this.deviceForm.value.email
+        }
+        if(this.deviceForm.value.address){
+           data['address']=this.deviceForm.value.address
+        }
+       
+        console.log(data);
+  
+        this.contactService.post('/users/editUserDetails',data).subscribe((res:any)=>{
+          console.log(res);
+          
+          if(res.message=="Saved"){
+              
+            
+               this.addDevice(res._id)
+            // this.router.navigateByUrl('/dashboard');
+          }
+        })
+    }
+
+    }
+    
+
+    addDevice(data){
+      var model= $('#dbselect').multipleSelect('getSelects','value');
+      var type= $('#vehicleType').multipleSelect('getSelects','value');
+      var deviceid
+       if(this.inventoryManagement){
+      deviceid=$('#inventory').multipleSelect('getSelects','value');
+    }else{
+      deviceid=this.deviceForm.value.device_id
+    }
+      var newDevice = {
+        _id:this.deviceData._id,
+        devicename: this.deviceForm.value.vehicleNo,
+        deviceid:  this.deviceForm.value.device_id,
+        // des: this.des,
+        model: model[0],
+       
+        typdev: "Tracker",
+        Mileage : "10",
+        phn: this.deviceForm.value.contactNo,
+        sim_number: this.deviceForm.value.contactNo,
+        created_by: this.userId,
+        supAdmin:  this.sup_admin,
+        // driver_name: this.driver,
+        // contact_number: this.dcontact,
+        device_model: this.deviceForm.value.deviceModel,
+        expdate: new Date(this.expDate),
+        user:this.deviceData.user._id,
+        kycStatus:'Pending',
+        bussinessType:1
+      }
+       if (this.custtype) {
+        newDevice['Dealer'] = this.userId;
+      } else if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON') ) {
+        newDevice['Dealer'] = this.DealerId
+      }
+
+
+//  hrdwr: this.deviceForm.value.sim1,
+//         hrdwr1: this.deviceForm.value.sim1,
+      if(this.deviceForm.value.sim1){
+       newDevice['hrdwr'] = this.deviceForm.value.sim1
+      }
+      if(this.deviceForm.value.sim2){
+       newDevice['hrdwr1'] = this.deviceForm.value.sim2
+      }
+
+      if(this.deviceForm.value.sim1){
+       newDevice['manufacturingCompany'] = this.deviceForm.value.sim1
+      }
+
+       if(this.deviceForm.value.model){
+        newDevice['model'] = this.deviceForm.value.model
+      }
+     
+
+      if(this.deviceForm.value.dealerFollowup){
+        newDevice['CID_No'] = this.deviceForm.value.dealerFollowup;
+      }
+      if(this.hrdwr){
+        newDevice['hrdwr']=this.hrdwr
+      }
+      if(this.deviceForm.value.engineNo){
+        newDevice['engineNo'] = this.deviceForm.value.engineNo;
+      }
+
+    if(this.deviceForm.value.city){
+        newDevice['transportOfficeCity'] = this.deviceForm.value.city;
+      }
+      if(this.deviceForm.value.state){
+        newDevice['transportOfficeState'] = this.deviceForm.value.state;
+      }
+
+
+      if(this.deviceForm.value.chasisNo){
+        newDevice['ChassisNo'] = this.deviceForm.value.chasisNo
+      }
+      if(this.deviceForm.value.vehicleManufacture){
+       newDevice['manufacturingCompany'] = this.deviceForm.value.vehicleManufacture;
+      }
+
+       if(this.deviceForm.value.eSimExpiry){
+       newDevice['esim_validity'] = this.deviceForm.value.eSimExpiry;
+      }
+       if(this.deviceForm.value.vehicleCategory){
+        newDevice['vehicleCategory'] = this.deviceForm.value.vehicleCategory; 
+      }
+      if(this.deviceForm.value.rtoOffice){
+        newDevice['rto'] = this.deviceForm.value.rtoOffice; 
+      }
+
+      if(type){
+        newDevice['typeOfVehicle'] = type[0];  
+      }
+       if(this.deviceForm.value.vehicleType){
+        newDevice['vehicleType'] = this.deviceForm.value.vehicleType
+      }
+
+      if(this.deviceForm.value.state){
+        newDevice['transportOfficeState'] = this.deviceForm.value.state;
+      }
+
+      if(this.deviceForm.value.panic){
+        newDevice['numberOfSOS'] = this.deviceForm.value.panic;
+      }
+     
+      if(this.deviceImg != undefined){
+        newDevice['deviceImage'] = this.deviceImg; 
+      }
+      console.log("imageuploadDocument",this.imageuploadObject);
+      if((this.imageuploadObject.length !=0)){
+        newDevice['imageDoc'] = this.imageuploadObject ;
+      }
+      console.log("=======>",newDevice)
+      //  this.Load = false;
+      this.contactService.editdevice(newDevice)
+        .subscribe((device) => {
+          window.localStorage['DataUpdate'] = 'True';
+         
+              this.router.navigateByUrl("dashboard");
+            }
+            // this.Load = false
+          )
+          , (err: any) => {
+          // console.log(err.status);
+          // console.log(err);
+          var that = this;
+          if (err.status == 400) {
+              console.log(JSON.parse(err._body).deviceObj);
+            var dupObj = JSON.parse(err._body).deviceObj ; 
+              // this.Load = false;
+             var devicesupAdmin = dupObj.supAdmin;
+              var deviceDealer = dupObj.Dealer;
+              var devOwner = dupObj.user;
+              debugger;
+           
+          }
+          else {  
+            var message
+            if(err.status==401){
+              message="Access Denied !!!"
+
+            }else{
+               message="Network Error !!!"
+            }
+            console.log(err);
+            
+            this._flashMessagesService.show(message, { cssClass: 'alert-danger', timeout: 2000 });
+            // this.Load = false
+          }
+        }
+        
+
+    }
+
+ generatePassword(passwordLength) {
+  var numberChars = "0123456789";
+  var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  var lowerChars = "abcdefghijklmnopqrstuvwxyz";
+  var allChars = numberChars + upperChars + lowerChars;
+  var randPasswordArray = Array(passwordLength);
+  randPasswordArray[0] = numberChars;
+  randPasswordArray[1] = upperChars;
+  randPasswordArray[2] = lowerChars;
+  randPasswordArray = randPasswordArray.fill(allChars, 3);
+  return this.shuffleArray(randPasswordArray.map(function(x) { return x[Math.floor(Math.random() * x.length)] })).join('');
+}
+
+shuffleArray(array) {
+  for (var i = array.length - 1; i > 0; i--) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var temp = array[i];
+    array[i] = array[j];
+    array[j] = temp;
+  }
+  return array;
+}
+message
+user
+userFound:boolean=false;
+onSearchChange(value){
+  this.userFound=false
+  this.message=undefined
+  console.log(value);
+  var phone=this.deviceForm.value.contactNo
+  if(phone.length==10){
+    console.log("KLDJNDKjk");
+    this.contactService.get('/users/searchUserByPhone?user='+this.userId+'&phone='+phone).subscribe((res:any)=>{
+      console.log(res);
+      if(res.message=="User already Present"){
+        this.deviceForm.patchValue({
+          ownerName:res.data[0].first_name?res.data[0].first_name:""+" "+res.data[0].last_name?res.data[0].first_name:'',
+          email:res.data[0].email?res.data[0].email:""
+        })
+        this.user=res.data[0]
+        this.userFound=true;
+        this.deviceForm.controls.ownerName.disable();
+        this.deviceForm.controls.email.disable();
+      }else{
+        this.userFound=false
+        this.message=res.message
+      }
+    },err=>{
+      console.log(err);
+      this.message=err.error.message
+    })
+  }
+  
+}
+ device_Model: any;
+  getDeviceModel() {
+    this.contactService.getDevModel()
+      .subscribe(res => {
+        this.device_Model = res;
+        var devname = [];
+        console.log("Device_Model",this.device_Model);
+        for(var i = 0 ; i<this.device_Model.length;i++){
+          var a = {
+            model :this.device_Model[i].device_type,
+            id : this.device_Model[i]._id
+          }
+          var modelName;
+        
+          if(this.device_Model[i].deviceport != undefined){
+            modelName = this.device_Model[i].device_type + " " + "(Port : " + this.device_Model[i].deviceport + ")";
+         
+          }else{
+            modelName = this.device_Model[i].device_type;
+          }
+          this.device_Model[i].modelName = modelName ; 
+          devname.push(a);
+        }
+        console.log('this.device_Model',this.device_Model);
+        console.log(devname);
+        this.loadropdown()
+      })
+  }
+
+   loadropdown() {
+    let that = this;
+   
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    // ||(this.componentIdentifier === 'notification_master')
+  
+   
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 470,
+          placeholder:"Select model",
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+         $('#vehicleType').multipleSelect({
+            width: 470,
+            placeholder: "Select Type",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+           $('#inventory').multipleSelect({
+        width: 470,
+        placeholder: 'Select IMEI',
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+    
+      }, 100);
+      
+
+  }
+
+   vehData:any;
+getvehDetail(){
+  this.contactService.getvehType(this.userId)
+    .subscribe(res=>{
+      // console.log(res);
+      this.vehData=res;
+      var vdata = res;
+      for(var a = 0;a<this.vehData.length;a++){
+          var vehtypename = vdata[a].brand + " " + vdata[a].model;
+          this.vehData[a].vehicle_name = vehtypename;
+      }
+       console.log("allveh",this.vehData);
+        this.loadropdown()
+    })
+}
+docRow:boolean=false;
+// AddDocumentsField(addedRow:any){
+//   console.log("Inside function !!!");
+//     if(addedRow){    
+//       this.docRow = true;
+//     }
+    
+//      var obj={doctype:'',image:'',phone:'',docdate:''};
+//      this.imageuploadObject.push(obj);
+//      console.log(this.imageuploadObject);
+//     // console.log("ImageuploadObject=>",this.imageuploadObject);
+// }
+showUpload:boolean=true;
+DeleteDocumentsField(index){
+  console.log(this.imageuploadObject.length);
+  if(this.imageuploadObject.length == 1){
+    this.docRow = false;
+    this.showUpload = false;
+  }
+  this.imageuploadObject.splice(index, 1);
+
+}
+
+selectedFile: File;
+onFileChanged(event,imgIndex) { 
+  this.selectedFile = <File>event.target.files[0];
+  console.log(this.selectedFile); 
+
+  this.Load=true;
+  console.log(imgIndex);
+  this.imageuploadObject[imgIndex].fill=true;
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+  fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      this.imageuploadObject[imgIndex].image = resImage;
+       console.log(this.imageuploadObject);
+       this.selectedFile=undefined;
+      // console.log(res);
+    },err=>{
+      this.Load= false;
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+       this.selectedFile=undefined;
+    })
+}
+ifuploadArr: boolean ;
+uploadStatus: any = 'Upload';
+onUpload(imgIndex) {
+  this.Load=true;
+  console.log(imgIndex);
+  this.imageuploadObject[imgIndex].fill=true;
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+  // console.log("selected file name =>",this.selectedFile.name);
+  if(!this.selectedFile){
+    swal(
+      'Upload Error',
+      'Please select document type before upload !!!',
+      'error'
+    )
+     this.Load=false;
+  }else{
+    fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      this.imageuploadObject[imgIndex].image = resImage;
+       console.log(this.imageuploadObject);
+       this.selectedFile=undefined;
+      // console.log(res);
+    },err=>{
+      this.Load= false;
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+       this.selectedFile=undefined;
+    })
+  }
+ }
+documentType(docType){
+  console.log("doctypeObject=>",docType);
+
+}
+
+inventoryManagement:Boolean=false;
+  inventory=[]
+  getUserSetting(userId){
+    
+    this.contactService.post('/users/get_user_setting',{uid: userId}).subscribe((res:any)=>{
+      this.inventoryManagement=res.inventoryManagement;
+      if(this.inventoryManagement){
+        console.log(this.userId,this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer);
+        var isDealer=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer
+        var isSuperAdmin=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isSuperAdmin
+        // var user
+        // if(isSuperAdmin){
+        //   var user
+        // }else if(isDealer){
+
+        // }
+        var user=isSuperAdmin?this.userId:this.sup_admin?this.sup_admin:this.userId
+        console.log(user);
+        
+        this.contactService.get('/Device_inventory/getInventory?user='+this.userId).subscribe((res:any)=>{
+          this.inventory=res;
+          this.loadropdown()
+        })
+      }
+    })
+  }
+
+   manufacturingData
+  getModelData(){
+     this.contactService.get('/model_master/GetNames').subscribe((res:any)=>{
+      this.manufacturingData=res
+    })
+  }
+  modelData
+  selectModel(event){
+  console.log(event.target.value);
+
+  this.contactService.get('/model_master/getModel?name='+event.target.value).subscribe((res:any)=>{
+    this.modelData=res
+  })
+  
+}
+cityList
+onStateChange(event){
+  this.contactService.get('/RTO_master/getCity?state='+event.target.value).subscribe((res:any)=>{
+    this.cityList=res
+  })
+}
+RTO
+onCityChange(event){
+   this.contactService.get('/RTO_master/getRTO?city='+event.target.value).subscribe((res:any)=>{
+    this.RTO=res
+  })
+}
+back(){
+  this.location.back()
+}
+image;
+docName
+openModal(template: TemplateRef<any>,doc){
+  console.log(doc);
+  
+   this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+  this.docName=doc.doctype
+this.image="https://www.oneqlik.in"+doc.image.substring(6)
+}
+
+imageURL:any;
+ selectedDeviceFile:File;
+ data_descip : any;
+onDeviceImageChanged(event,index) {
+  this.selectedDeviceFile = <File>event.target.files[0];
+
+   this.Load = true;
+  const fdDevice = new FormData();
+  fdDevice.append('photo',this.selectedDeviceFile,this.selectedDeviceFile.name)
+   console.log("Binaryimage = > ",fdDevice );
+   this.contactService.deviceImageupload(fdDevice)
+     .subscribe(res=>{
+           console.log(res);
+           if(res){
+            //  if(this.deviceImg.length==3){
+              //  if(this.deviceImg[index]){
+                 this.deviceImg[index]=(res['_body'])
+              //  }else{
+              //    this.deviceImg.push(res['_body'])
+              //  }
+            //  }else{
+            //    this.deviceImg.push(res['_body'])
+
+            //  }
+           }
+           this.Load = false;
+           this.selectedDeviceFile=undefined
+          console.log('this.deviceImg',this.deviceImg);
+           this.data_descip = "Image Uploaded";
+           launch_toast();
+     },err=>{
+      this.data_descip = "Internal Server Error";
+      launch_toast();
+       this.selectedDeviceFile=undefined
+       console.log(err);
+       this.Load = false;
+     })
+    
+     function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+}
+  
+onDeviceImageUploadUpload(index){
+   if(!this.selectedDeviceFile){
+    swal(
+      'Upload Error',
+      'Please choose file before upload !!!',
+      'error'
+    )
+  }else{
+     this.Load = true;
+  const fdDevice = new FormData();
+  fdDevice.append('photo',this.selectedDeviceFile,this.selectedDeviceFile.name)
+   console.log("Binaryimage = > ",fdDevice );
+   this.contactService.deviceImageupload(fdDevice)
+     .subscribe(res=>{
+           console.log(res);
+           if(res){
+             if(this.deviceImg.length==3){
+               if(this.deviceImg[index]){
+                 this.deviceImg[index]=(res['_body'])
+               }else{
+                 this.deviceImg.push(res['_body'])
+               }
+             }else{
+               this.deviceImg.push(res['_body'])
+
+             }
+           }
+           this.selectedDeviceFile=undefined
+          console.log('this.deviceImg',this.deviceImg);
+           this.data_descip = "Image Uploaded";
+           launch_toast();
+     },err=>{
+      this.data_descip = "Internal Server Error";
+      launch_toast();
+       this.selectedDeviceFile=undefined
+       console.log(err);
+     })
+    }
+     function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+ 
+}
+}
\ No newline at end of file
diff --git a/src/app/dashboard/renew-vehicle/renew-vehicle.component.html b/src/app/dashboard/renew-vehicle/renew-vehicle.component.html
new file mode 100644
index 0000000..0979f97
--- /dev/null
+++ b/src/app/dashboard/renew-vehicle/renew-vehicle.component.html
@@ -0,0 +1,105 @@
+<div class="card">
+
+  <div class="card-header">
+    <h4 md-dialog-title>Renew Vehicle</h4>
+
+  </div>
+  <div class="card-body">
+<form [formGroup]="renewForm">
+  <div class="form-group row">
+    <div class="col-sm-6 row">
+      <label for="name" class="col-sm-3 col-form-label">Name</label>
+      <input formControlName="name" type="text" readonly class="form-control-plaintext col-sm-9" id="name">
+    </div>
+
+    <div class="col-sm-6 row">
+      <label for="Amount" class="col-sm-3 col-form-label">Expiry Date</label>
+      <input readonly class="form-control-plaintext col-sm-9" formControlName="expDate" type="text">
+    </div>
+  </div>
+
+  <div class="form-group row">
+    <div class="col-sm-6 row">
+      <label for="Amount" class="col-sm-3 col-form-label">Sim Number</label>
+      <input readonly class="form-control-plaintext col-sm-9" formControlName="sim" type="text">
+    </div>
+
+    <div class="col-sm-6 row">
+      <label for="validTill" class="col-sm-3 col-form-label">Valid Till</label>
+      <input formControlName="validTill" type="text" class="form-control col-sm-9" id="validTill" bsDatepicker
+        class="datepicker" [bsConfig]="bsConfig">
+    </div>
+    </div>
+      <div class="form-group row">
+    <div class="col-sm-6 row">
+      <label for="type" class="col-sm-3 col-form-label">Plan</label>
+      <select class="form-control col-sm-9" formControlName="plan" (ngModelChange)="changePlan($event)">
+        <option value=30>Monthly</option>
+        <option Value=90> Quaterly</option>
+        <option value=180>Half Yearly</option>
+        <option value=365>Yearly</option>
+        <option value=1095>3 Years</option>
+        <option value='custom'>Custom</option>
+      </select>
+    </div>
+  </div>
+
+<div class="card-footer text-right">
+  <button class="btn btn-danger" md-dialog-close>Cancel</button>
+  <button class="btn btn-primary" (click)="submit()"> Save</button>
+</div>
+
+</form>
+  </div>
+
+
+</div>
+<!-- <h4 md-dialog-title>Renew Vehicle</h4>
+<div md-dialog-content>
+
+  <form [formGroup]="renewForm">
+    <div class="form-group row">
+      <div class="col-sm-6 row">
+        <label for="name" class="col-sm-3 col-form-label">Name</label>
+        <input formControlName="name" type="text" readonly class="form-control-plaintext col-sm-9" id="name">
+      </div>
+  
+      <div class="col-sm-6 row">
+        <label for="Amount" class="col-sm-3 col-form-label">Expiry Date</label>
+        <input readonly class="form-control-plaintext col-sm-9" formControlName="expDate" type="text">
+      </div>
+    </div>
+
+    <div class="form-group row">
+      <div class="col-sm-6 row">
+        <label for="Amount" class="col-sm-3 col-form-label">Sim Number</label>
+        <input readonly class="form-control-plaintext col-sm-9" formControlName="sim" type="text">
+      </div>
+  
+      <div class="col-sm-6 row">
+        <label for="validTill" class="col-sm-3 col-form-label">Valid Till</label>
+        <input formControlName="validTill" type="text" class="form-control col-sm-9" id="validTill" bsDatepicker class="datepicker" [bsConfig]="bsConfig">
+      </div>
+    </div>
+      <div class="col-sm-6 row">
+          <label for="type" class="col-sm-3 col-form-label">Plan</label>
+          <select class="form-control col-sm-9" formControlName="plan" (ngModelChange)="changePlan($event)">
+            <option value=30>Monthly</option>
+            <option Value=90> Quaterly</option>
+            <option value=180>Half Yearly</option>
+            <option value=365>Yearly</option>
+            <option value=1095>3 Years</option>
+            <option value='custom'>Custom</option>
+          </select>
+      </div>
+  
+
+
+  </form>
+</div>
+<md-dialog-actions align="end">
+  <button md-button md-dialog-close>Cancel</button>
+  <button md-button (click)="submit()"> Save</button>
+
+
+</md-dialog-actions> -->
\ No newline at end of file
diff --git a/src/app/dashboard/renew-vehicle/renew-vehicle.component.scss b/src/app/dashboard/renew-vehicle/renew-vehicle.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/renew-vehicle/renew-vehicle.component.spec.ts b/src/app/dashboard/renew-vehicle/renew-vehicle.component.spec.ts
new file mode 100644
index 0000000..af45e17
--- /dev/null
+++ b/src/app/dashboard/renew-vehicle/renew-vehicle.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenewVehicleComponent } from './renew-vehicle.component';
+
+describe('RenewVehicleComponent', () => {
+  let component: RenewVehicleComponent;
+  let fixture: ComponentFixture<RenewVehicleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RenewVehicleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RenewVehicleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/renew-vehicle/renew-vehicle.component.ts b/src/app/dashboard/renew-vehicle/renew-vehicle.component.ts
new file mode 100644
index 0000000..e7e91ac
--- /dev/null
+++ b/src/app/dashboard/renew-vehicle/renew-vehicle.component.ts
@@ -0,0 +1,126 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import * as moment from 'moment';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+declare var $: any, DataTable: any, swal: any;
+
+@Component({
+  selector: 'app-renew-vehicle',
+  templateUrl: './renew-vehicle.component.html',
+  styleUrls: ['./renew-vehicle.component.scss']
+})
+export class RenewVehicleComponent implements OnInit {
+  renewForm:FormGroup;
+  useridd;
+  disabled=true;
+  isFirst=true;
+  validTillDate=new Date()
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(public dialogRef: MdDialogRef<RenewVehicleComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private fb:FormBuilder,private contactService:ContactService) {
+      console.log(data);
+      
+     }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.renewForm=this.fb.group({
+      name:[this.data.Device_Name],
+      expDate:[moment(this.data.expiration_date).format('lll')],
+      sim:[this.data.sim_number],
+      plan:[''],
+      validTill:[new Date()]
+    })
+
+    this.renewForm.controls.validTill.disable()
+  }
+
+  submit(){
+    console.log(this.renewForm.value);
+    if(this.renewForm.value.plan=="custom"){
+      this.validTillDate=this.renewForm.value.validTill
+    }
+    
+    if(this.isDatesEqual(new Date(this.validTillDate),new Date())){
+      swal({
+  icon: 'warning',
+  title: 'Oops...',
+  text: 'Please choose plan or set valid till date',
+
+})
+    }else{
+      var request={
+         _id: this.data._id,
+            devicename: this.renewForm.value.name,
+            sim: this.renewForm.value.sim,
+            deviceid: this.data.Device_ID,
+            device_model: this.data.device_model._id,
+            vehicleType:this.data.vehicleType._id,
+            expdate:new Date(this.validTillDate),
+            renew_by:this.useridd
+      }
+  
+       swal({
+               title: '<strong>Renew vehicle</strong>',
+               icon: 'info',
+               html: 'Please confirm to Renew Vehicle ?',
+               showCloseButton: true,
+               showCancelButton: true,
+               focusConfirm: false,
+               confirmButtonText: "Renew Vehicle",
+               confirmButtonAriaLabel: 'Thumbs up, great!',
+                             
+               }).then((result: { value: boolean; }) => {
+                 if (result) {
+                  console.log(request);
+                   this.contactService.editdevice(request)
+                      .subscribe(device => {
+                        this.dialogRef.close('succ');
+                      })
+                }
+              })
+
+    }
+
+
+
+
+    
+
+  }
+
+  isDatesEqual(date1, date2) {
+    console.log(date1,date2);
+    
+  return date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate();
+}
+
+  changePlan(event){
+    console.log(event);
+    if(event=='custom'){
+      this.disabled=false;
+      console.log("in");
+      this.validTillDate=new Date();
+      // this.renewForm.controls.validTill.enable();
+    this.renewForm.value.validTill=new Date();
+      this.renewForm.controls.validTill.enable();
+    }else{
+      this.validTillDate=new Date();
+      // this.renewForm.controls.validTill.enable();
+    this.renewForm.value.validTill=new Date();
+    this.renewForm.patchValue({
+      validTill:new Date(moment(this.renewForm.value.validTill, "DD-MM-YYYY").add('days', Number(event)).format('YYYY/MM/DD HH:mm:ss'))
+    })
+    this.validTillDate=new Date(moment(this.validTillDate, "DD-MM-YYYY").add('days', Number(event)).format('YYYY/MM/DD HH:mm:ss'))
+    // this.renewForm.value.validTill= new Date(moment(this.renewForm.value.validTill, "DD-MM-YYYY").add('days', Number(event)).format('YYYY/MM/DD HH:mm:ss'));
+    console.log(this.renewForm.value.validTill,this.validTillDate)
+    this.renewForm.controls.validTill.disable()
+    }
+    
+  }
+
+}
diff --git a/src/app/dashboard/renewal-history/renewal-history.component.html b/src/app/dashboard/renewal-history/renewal-history.component.html
new file mode 100644
index 0000000..7a8d876
--- /dev/null
+++ b/src/app/dashboard/renewal-history/renewal-history.component.html
@@ -0,0 +1,51 @@
+<div>
+  <div class="row">
+    <div class="col-12">
+      <span style="color:#855353;font-size:20px;font-weight: 500;">Renewal History</span>
+      <button style="position: absolute;
+  right: 0;
+  top: 0" class="btn btn-danger btn-sm pull-left" (click)="this.dialogRef.close()">Close</button>
+    </div>
+  </div>
+
+  <div class="card-body row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+      <div style="width: 100%;height:70vh;margin-top: 32px;">
+        <table class="table table-striped">
+          <thead>
+            <tr>
+              <th style="text-align: left;">{{'Device Name' | translate}}</th>
+              <th style="text-align: left;">{{'Device IMEI' | translate}}</th>
+              <th style="text-align: left;">{{'Created On' | translate}}</th>
+              <th style="text-align: left;">{{'Expired On' | translate}}</th>
+              <th style="text-align: left;">{{'Renewed On' | translate}}</th>
+              <th style="text-align: left;">{{'Valid Till' | translate}}</th>
+              <!-- <th style="text-align: left;">{{'Creation Date' | translate}}</th>
+              <th style="text-align: left;">{{'Dealer name' | translate}}</th> -->
+              <!-- <th style="text-align: left;">{{'Organization name' | translate}}</th> -->
+    
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of main">
+              <td>{{item.device.Device_Name}}</td> 
+              <td>{{item.device.Device_ID}}</td>
+              <td>{{item.created_on}}</td>
+              <td>{{item.expired_on}}</td>
+              <td>{{item.renewed_on}}</td>
+              <td *ngIf="item.validDate">{{item.validDate}}</td>
+
+            </tr>
+            <tr *ngIf="main.length==0" class="text-center">
+              <h5 style="position: absolute;right: 50%;top: 30%">No Data Found</h5>
+            </tr>
+          </tbody>
+        </table>
+
+      </div>
+    </div>
+
+  </div>
+
+  </div>
diff --git a/src/app/dashboard/renewal-history/renewal-history.component.scss b/src/app/dashboard/renewal-history/renewal-history.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/renewal-history/renewal-history.component.spec.ts b/src/app/dashboard/renewal-history/renewal-history.component.spec.ts
new file mode 100644
index 0000000..f28972c
--- /dev/null
+++ b/src/app/dashboard/renewal-history/renewal-history.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RenewalHistoryComponent } from './renewal-history.component';
+
+describe('RenewalHistoryComponent', () => {
+  let component: RenewalHistoryComponent;
+  let fixture: ComponentFixture<RenewalHistoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RenewalHistoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RenewalHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/renewal-history/renewal-history.component.ts b/src/app/dashboard/renewal-history/renewal-history.component.ts
new file mode 100644
index 0000000..14ce6ff
--- /dev/null
+++ b/src/app/dashboard/renewal-history/renewal-history.component.ts
@@ -0,0 +1,114 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $: any;
+
+@Component({
+  selector: 'app-renewal-history',
+  templateUrl: './renewal-history.component.html',
+  styleUrls: ['./renewal-history.component.scss']
+})
+export class RenewalHistoryComponent implements OnInit {
+  tabelObj: any ;
+  Load: boolean;
+  main=[];
+ 
+  constructor(public dialogRef: MdDialogRef<RenewalHistoryComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+      // this.main=this.data
+      // this.testTable()
+    }
+
+  ngOnInit() {
+    this.getRenewalHistory()
+  }
+
+  getRenewalHistory(){
+    this.Load=true
+    this.contactService.getRenewalHistory(this.data._id).subscribe(res=>{
+      console.log(res);
+      this.main=res;
+      this.Load=false
+      
+    })
+  }
+
+    testTable(){
+  const that = this;
+  console.log("inside function");
+  // that.Load = true;
+
+   $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+       "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            // "rowCallback": function(row: Node, data: any | Object, index: number){
+          ajax: (mainData,callback) => {
+
+ 
+      that.contactService.getRenewalHistory(this.data._id).subscribe(res=>{
+        console.log(res);
+        that.Load = false;
+        if(res.length!=0){
+          callback({ data: res[0].data });
+
+        }else{
+           callback({ data: [] });
+        }
+        
+      })
+
+   
+  },
+   "columns": [
+              {
+                  "data": "Device_Name",
+                  "render": function(data, type, row) {                   
+                    return data?data.device.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "Device_ID",
+                  "render": function(data, type, row) {                   
+                    return data?data.device.Device_ID : '';                  
+                  }
+              },
+              {
+                  "data": "expired_on",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "renewed_on",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+             
+   
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3] },  
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          ] , order: [[ 3, 'desc' ], [ 0, 'asc' ]]
+      });
+
+  });
+
+}
+
+
+}
diff --git a/src/app/dashboard/share-user/share-user.component.html b/src/app/dashboard/share-user/share-user.component.html
new file mode 100644
index 0000000..45ed14b
--- /dev/null
+++ b/src/app/dashboard/share-user/share-user.component.html
@@ -0,0 +1,32 @@
+<h4>Shared Users<button mdTooltip="close" (click)="onNoClick(null)"style="    cursor: pointer;
+    float: right; border:1px solid transparent; background-color: transparent;padding-top:2%"><md-icon style="float: right;width:30px;height:30px;">close
+    </md-icon></button></h4><hr>
+    <p ><b>Device Name: </b>{{dname}}</p>
+<table class="table table-striped table-hover " style="overflow-y: hidden;
+overflow-x: hidden;">
+
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Remove Sharing</th>
+ 
+     
+  </tr>
+</thead>
+
+<tbody>
+ 
+  <tr  *ngFor="let device of foods">
+
+    <td >{{device.name}}</td>
+    <td>
+      <p><button md-tooltip="Remove Shared Device" style="border:1px solid transparent; background-color: transparent;"(click)="deleteshare(device.userid)">   
+                 
+        <md-icon> remove_circle_outline</md-icon></button></p>
+    </td>
+  </tr>
+</tbody> 
+</table> 
+<flash-messages></flash-messages>
+
+
diff --git a/src/app/dashboard/share-user/share-user.component.scss b/src/app/dashboard/share-user/share-user.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/share-user/share-user.component.spec.ts b/src/app/dashboard/share-user/share-user.component.spec.ts
new file mode 100644
index 0000000..b51da2b
--- /dev/null
+++ b/src/app/dashboard/share-user/share-user.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShareUserComponent } from './share-user.component';
+
+describe('ShareUserComponent', () => {
+  let component: ShareUserComponent;
+  let fixture: ComponentFixture<ShareUserComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShareUserComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShareUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/share-user/share-user.component.ts b/src/app/dashboard/share-user/share-user.component.ts
new file mode 100644
index 0000000..0952685
--- /dev/null
+++ b/src/app/dashboard/share-user/share-user.component.ts
@@ -0,0 +1,80 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../../device';
+import {ContactService} from '../../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { SidebarComponent } from '../../sidebar/sidebar.component';
+
+@Component({
+  selector: 'app-share-user',
+  templateUrl: './share-user.component.html',
+  styleUrls: ['./share-user.component.scss'],
+  providers: [ContactService,SidebarComponent]
+})
+export class ShareUserComponent implements OnInit {
+//shrdeviceOwner
+d :any;
+dname:any;
+did :any;
+devv:any;
+deleteshare(uid){
+
+  this.contactService.deldevshr( this.d,uid)
+  .subscribe(
+  
+     data => {
+
+      this.devv = data 
+      window.localStorage['DataUpdate'] = 'True'
+      this.sidebar.sidebarData()
+      this.onNoClick("OKK")
+    });
+   
+}
+  constructor(public dialogRef: MdDialogRef<ShareUserComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,private sidebar: SidebarComponent) {
+       this.d =data.name;
+       this.dname = data.dname;
+       this.did = data.did;
+     }
+    onNoClick(a): void {
+      console.log(a);
+     this.dialogRef.close(a);
+    }
+    devicess:any;
+    final:any;
+    foods = []
+  ngOnInit() {
+
+
+    this.contactService.shrdeviceOwner(this.d).subscribe(
+      
+      data => {
+        this.devicess = data 
+      
+        for(let p=0;p<this.devicess.length;p++){
+          this.devicess[p];
+         let fs =  this.devicess[p].first_name;
+         let ls =  this.devicess[p].last_name;
+         let na = fs + " " + ls;
+         let xz ={
+           "name" :  na,
+           "userid" : this.devicess[p]._id
+         }
+         this.foods.push(xz);
+        }
+
+      }, (err: any) => {; 
+        console.log(err);
+      if(err.status !=   200)
+      {
+     /*   this._flashMessagesService.show( "This Device is Not Shared to anyOne", { cssClass: 'alert-danger', timeout: 1000 }
+      );
+       */
+      this.onNoClick("No_Dev")
+
+      }});
+
+  }
+
+}
diff --git a/src/app/dashboard/speednotify/speednotify.component.html b/src/app/dashboard/speednotify/speednotify.component.html
new file mode 100644
index 0000000..7b01c07
--- /dev/null
+++ b/src/app/dashboard/speednotify/speednotify.component.html
@@ -0,0 +1,12 @@
+<h4>Speed Alert</h4>
+<hr>
+<b>Device Name: </b>{{dname}}<br  >
+
+Please Enter Speed to Get Alert : 
+<md-form-field class="example-full-width width">
+  <input mdInput type="number" [(ngModel)]="speed"  name="speed">
+</md-form-field><br><br>
+<div style="padding-left:30%">
+  <button class="btn btn-danger btn-block/"style="cursor:pointer;" (click)="onNoClick(null)" >Cancel</button>
+  <button class="btn btn-primary btn-block/"style="cursor:pointer" (click)="speedAlert()">Get Alert</button>
+  </div>
diff --git a/src/app/dashboard/speednotify/speednotify.component.scss b/src/app/dashboard/speednotify/speednotify.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/speednotify/speednotify.component.spec.ts b/src/app/dashboard/speednotify/speednotify.component.spec.ts
new file mode 100644
index 0000000..1d65a58
--- /dev/null
+++ b/src/app/dashboard/speednotify/speednotify.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpeednotifyComponent } from './speednotify.component';
+
+describe('SpeednotifyComponent', () => {
+  let component: SpeednotifyComponent;
+  let fixture: ComponentFixture<SpeednotifyComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpeednotifyComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpeednotifyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/speednotify/speednotify.component.ts b/src/app/dashboard/speednotify/speednotify.component.ts
new file mode 100644
index 0000000..d684358
--- /dev/null
+++ b/src/app/dashboard/speednotify/speednotify.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../../device';
+import {ContactService} from '../../contact.service';
+import { SidebarComponent } from '../../sidebar/sidebar.component';
+
+@Component({
+  selector: 'app-speednotify',
+  templateUrl: './speednotify.component.html',
+  styleUrls: ['./speednotify.component.scss'],
+  providers: [ContactService,SidebarComponent]
+})
+export class SpeednotifyComponent implements OnInit {
+
+  dname:any;
+  did:any;
+  status:any;
+  speed:any;
+
+  speedAlert(){
+
+    this.contactService.speedlimit(this.did,this.speed,"true").subscribe(
+      
+      data => {
+        this.dataa = data 
+        window.localStorage['DataUpdate'] = 'True'
+        this.sidebar.sidebarData()
+        this.dialogRef.close("device_alert");
+
+      })
+
+
+  }
+ // speeed:any;
+  constructor(public dialogRef: MdDialogRef<SpeednotifyComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private sidebar: SidebarComponent) {
+        
+     // console.log(data)
+      this.dname = data.dname;
+      this.did = data.did;
+      this.status = data.status;
+      this.speed = data.speed;
+      //console.log(data.speed)
+     }
+
+     onNoClick(a): void {
+      this.dialogRef.close(a);
+     }
+     dataa:any
+  ngOnInit() {
+ 
+  }
+
+}
diff --git a/src/app/dashboard/view-certificate/view-certificate.component.html b/src/app/dashboard/view-certificate/view-certificate.component.html
new file mode 100644
index 0000000..641bf32
--- /dev/null
+++ b/src/app/dashboard/view-certificate/view-certificate.component.html
@@ -0,0 +1,138 @@
+<md-dialog-content class="md-typography">
+<table id="testPdf" style="font-weight: 600;">
+  <tr>
+    <td>
+      <div *ngIf="supAdmin.imageDoc">
+        <img src="{{supAdmin.imageDoc}}" width="100px" height="100px">
+      </div>
+    </td>
+    <td style="text-align: center;font-weight: 700">
+      <span *ngIf="supAdmin">
+        
+        {{supAdmin.first_name?supAdmin.first_name:""}} {{supAdmin.last_name?supAdmin.last_name:""}}<br><br>
+        {{supAdmin.address?supAdmin.address:""}}<br><br>
+        CERTIFICATE OF INSTALLATION<br>
+      </span>
+        <span *ngIf="!supAdmin">
+          {{devicetype}} GPS DEVICE<br>
+          (AIS-140 COMPLIANT)<br>
+          INSTALLATION/FITMENT CERTIFICATE<br>
+          {{companyName}}<br>
+          {{companyAddress}}
+        </span>
+    </td>
+    <td style="text-align:center">
+      <div>
+        <img src="{{imgURL}}" width="100px" height="150px">
+      </div>
+    </td>
+  </tr>
+  
+  <tr>
+    <td colspan="3">
+      <h6 style="font-size:18px;">Vehicle Details :-</h6>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2">
+      Name of Owner : {{userName}}<br>
+      Registration Number. : {{devName}}<br>
+      Chassis no. : {{ChassisNo}}<br>
+      Engine no. : {{engineNo}}<br>
+      
+    </td>
+    <td>
+      Vehicle Make : {{manufacturingCompany}}<br>
+      Vehicle Model : {{typeOfVehicle}}<br>
+    </td>
+    <!-- <td>
+      Registration Date : {{vehicleRegDate | date:'dd-MM-yyyy'}}<br>
+      Date of Manufaturing year : {{vehicleManufacturingDate | date:'dd-MM-yyyy'}}
+    </td> -->
+  </tr>
+  <tr>
+    <td colspan="3">
+      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">GPS DEVICE DETAILS : - </h6>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="2">
+      Device Model : {{devicetype}}<br>
+      IMEI Number : {{devID}}<br>
+      UID Number : {{uniqueID}}<br>
+      
+    </td>
+    <td>
+      Invoice Number : <br>
+      Vehicle Model : {{typeOfVehicle}}<br>
+      ICCID Number:  {{ICCICD}}
+    </td>
+  </tr>
+
+  <tr>
+    <td colspan="3">
+      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">INSTALLATION DETAILS : - </h6>
+    </td>
+  </tr>
+
+  <tr>
+    <td colspan="2">
+      Dealer Name : {{dealerName}}<br>
+      Dealer Address : {{dealerAddress}}<br>
+      RTO Certificate No : <br>
+      Installation Date : {{installationDate | date:'dd-MM-yyyy'}}<br>
+  
+    </td>
+    <td>
+      Mobile No :  {{user.phone?user.phone:""}}
+    </td>
+  </tr>
+
+  <tr style="padding-top: 10px;">
+    <!-- <td colspan="3">
+      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">Fitment Images :- </h6>
+    </td> -->
+    <!-- {{deviceImage |json}} -->
+    <td *ngIf="deviceImage.length && deviceImage[0]">
+      <img  src="{{deviceImage[0]}}" width="90px" height="90px">
+    </td>
+    <td *ngIf="deviceImage.length && deviceImage[1]">
+      <img src="{{deviceImage[1]}}" width="90px" height="90px">
+    </td>
+    <td *ngIf="deviceImage.length && deviceImage[2]">
+      <img src="{{deviceImage[2]}}" width="90px" height="90px">
+    </td>
+  </tr>
+  <tr>
+    This installation certificate is valid till date {{data.deviceInfo.expiration_date?(data.deviceInfo.expiration_date | date:'dd-MM-yyyy') :""}}
+  </tr>
+  <tr style="padding-top: 10px;">
+    <td colspan="2">
+      Dealer Stamp
+    </td>
+    <td>
+    Authorised Signature
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3">
+      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">PRODUCT SATISFACTION REPORT : - </h6>
+    </td>
+  </tr>
+  <tr>
+    <td colspan="3" style="text-align:center;margin-top: 10px">
+      This is to Acknowledge and confirm that we have fitted our vehicle with above vehicle location tracking unit. 
+      We have checked the performance of the vehicle after fitment and we confirm VLTD is functioning as per norms 
+      listed out in AIS-140 standards and other guidelines of MoRTH and other government departments. We are also 
+      satisfied with the performance of the device in all respect. We undertake not to raise any dispute or any legal 
+      claims against Airotrack in the event that the above mentioned function are found broken/torn/tampered hereafter.
+      I also understand that telecom network connectivity doesn't come under the scope of Airotrack and will not raise 
+      any claim or disputes with respect to issues arising with low or no network coverage.
+    </td>
+  </tr>
+</table>
+</md-dialog-content>
+<md-dialog-actions align="end">
+  <button md-button md-dialog-close>Cancel</button>
+  <button md-button (click)="exportAsPdf()" cdkFocusInitial>Export PDF</button>
+</md-dialog-actions>
\ No newline at end of file
diff --git a/src/app/dashboard/view-certificate/view-certificate.component.scss b/src/app/dashboard/view-certificate/view-certificate.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dashboard/view-certificate/view-certificate.component.spec.ts b/src/app/dashboard/view-certificate/view-certificate.component.spec.ts
new file mode 100644
index 0000000..64c8836
--- /dev/null
+++ b/src/app/dashboard/view-certificate/view-certificate.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewCertificateComponent } from './view-certificate.component';
+
+describe('ViewCertificateComponent', () => {
+  let component: ViewCertificateComponent;
+  let fixture: ComponentFixture<ViewCertificateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewCertificateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewCertificateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dashboard/view-certificate/view-certificate.component.ts b/src/app/dashboard/view-certificate/view-certificate.component.ts
new file mode 100644
index 0000000..646a12c
--- /dev/null
+++ b/src/app/dashboard/view-certificate/view-certificate.component.ts
@@ -0,0 +1,398 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import * as moment from 'moment';
+declare var swal: any;
+declare var jsPDF:any;
+// declare var qrcode:any;
+// declare var QRCode :any;
+declare var QRious:any;
+declare var $:any;
+@Component({
+  selector: 'app-view-certificate',
+  templateUrl: './view-certificate.component.html',
+  styleUrls: ['./view-certificate.component.scss']
+})
+export class ViewCertificateComponent implements OnInit {
+  devName:any;
+  img1='/assets/images/liveTrackIcons/noImageAvailableIcon1.jpg'
+  
+phNum:any;
+createdOn:any;
+expOn:any;
+supAdmin
+DealerObj = [];
+userObj = [];
+// iconType:any;
+simNum:any;
+todayODO:any;
+totalODO:any;
+useridd: any;
+emailId:any ="";
+costumers: any = [];
+deviceID: any;
+userName:any;
+devmodel:any;
+newUserArr=[];
+editTemplate:boolean=true;
+deletetemplate:boolean=false;
+  orignalEmail: any;
+  initialUser: any;
+  ExportPdf: boolean;
+  devID: any;
+  InvoiceDate: any;
+  devicetype: any;
+  fitmentDate: any;
+  engineNo: any;
+  typeOfVehicle: any;
+  manufacturingCompany: any;
+  lastFitnessDate: any;
+  vehicleRegDate: any;
+  vehicleManufacturingDate: any;
+
+  IMSI: any;
+  uniqueID: any;
+  lattitude: any;
+  longitude: any;
+  userAddress: any;
+  dealerAddress: any;
+  CID_No: any;
+  imgUrl: any;
+  imgURL: any;
+  companyName: any;
+  companyAddress: any;
+  transportOfficeCity: any;
+  transportOfficeState: { data: string; };
+  ChassisNo: any;
+  deviceManufacturer: any;
+  invoiceNum: any;
+  numberOfSOS: any;
+  expiration_date: any;
+  organisationFlag: any;
+  distributerName:any;
+  distSelect: any=[];
+  superAdmin: any;
+  isDealer: any;
+  dealerId: any;
+  lastPingOn:any
+  lastDeviceTime:any
+  deviceImage=[];
+  dealerName
+  installationDate;
+  ICCICD
+  user: any;
+  constructor(public dialogRef: MdDialogRef<ViewCertificateComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any ) {
+      console.log(data);
+      
+     }
+
+  ngOnInit() {
+
+    this.lastDeviceTime=this.data.deviceInfo.last_device_time;
+    this.lastPingOn=this.data.deviceInfo.last_ping_on
+    this.devName = this.data.deviceInfo.Device_Name;
+    this.devID = this.data.deviceInfo.Device_ID?this.data.deviceInfo.Device_ID:"";
+    this.phNum =this.data.deviceInfo.contact_number;
+    this.createdOn = this.data.deviceInfo.created_on?(new Date(this.data.deviceInfo.created_on).toISOString()):"";
+    this.expOn = this.data.deviceInfo.expiration_date?(new Date(this.data.deviceInfo.expiration_date).toISOString()):"";
+    // this.iconType=this.data.deviceInfo.iconType;
+    this.simNum =this.data.deviceInfo.sim_number;
+    this.orignalEmail =  this.data.deviceInfo.Email_ID
+    this.emailId = this.data.deviceInfo.Email_ID;
+    this.deviceImage=this.data.deviceInfo.deviceImage
+       
+    for(var i=0;i<this.deviceImage.length;i++){
+
+        this.deviceImage[i] = 'https://www.oneqlik.in' + this.deviceImage[i].substring(6)
+        
+      
+    }
+    this.supAdmin=this.data.deviceInfo.supAdmin;
+    if(this.supAdmin.imageDoc && this.supAdmin.imageDoc.length>0){
+      this.supAdmin.imageDoc='https://www.oneqlik.in' + this.supAdmin.imageDoc[0].substring(6)
+    }
+     console.log(this.deviceImage);
+     this.installationDate=this.data.deviceInfo.created_on
+    this.todayODO=this.data.deviceInfo.today_odo;
+    this.totalODO =this.data.deviceInfo.total_odo;
+    this.deviceID = this.data.deviceInfo._id;
+    this.initialUser = this.data.deviceInfo.user._id;
+    this.user=this.data.deviceInfo.user
+    this.userName = this.data.deviceInfo.OwnerName;
+    this.userAddress = this.data.deviceInfo?this.data.deviceInfo.user.address:"";
+    this.dealerName = this.data.deviceInfo.Dealer_name ;
+    this.dealerId = this.data.deviceInfo.Dealer?this.data.deviceInfo.Dealer._id : ""; 
+    console.log('this.dealerId',this.dealerId);
+    this.dealerAddress = this.data.deviceInfo.DealerAddress;
+    this.InvoiceDate = this.data.deviceInfo.invoiceDate?(new Date(this.data.deviceInfo.invoiceDate).toISOString()):"";
+    this.invoiceNum = this.data.deviceInfo.invoiceNumber
+    this.CID_No = this.data.deviceInfo.CID_No
+    this.devicetype = this.data.deviceInfo.device_model?this.data.deviceInfo.device_model.device_type:"";
+    this.ICCICD = this.data.deviceInfo.ICCICD;
+    this.IMSI = this.data.deviceInfo.IMSI;
+    this.uniqueID = this.data.deviceInfo.uniqueID;
+    this.fitmentDate = this.data.deviceInfo.fitmentDate?new Date(this.data.deviceInfo.fitmentDate):"";
+    this.expiration_date =this.data.deviceInfo.expiration_date?new Date(this.data.deviceInfo.expiration_date):"";
+    this.engineNo = this.data.deviceInfo.engineNo;
+    this.typeOfVehicle = this.data.deviceInfo.typeOfVehicle;
+    this.manufacturingCompany = this.data.deviceInfo.manufacturingCompany;
+  
+    this.lastFitnessDate = this.data.deviceInfo.lastFitnessDate?new Date(this.data.deviceInfo.lastFitnessDate):"";
+    this.vehicleRegDate = this.data.deviceInfo.vehicleRegDate? new Date(this.data.deviceInfo.vehicleRegDate):"";
+    this.vehicleManufacturingDate = this.data.deviceInfo.vehicleManufacturingDate?new Date(this.data.deviceInfo.vehicleManufacturingDate):"";
+    this.lattitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[0]:"";
+    this.longitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[1]:"";
+    this.qrCodeGenerator()
+  }
+
+   qrCodeGenerator() {
+    var qrcodeDATA ="";
+    if(this.userName){
+      qrcodeDATA += "Owner Name : " + this.userName + " " ;
+    }
+    // if(this.userAddress){
+    //    qrcodeDATA += "Owner Add" + this.userAddress + " " ;
+    // }
+
+    if(this.engineNo){
+      qrcodeDATA += "Engine no. :" + this.engineNo + " " ;
+    }
+    if(this.ChassisNo){
+      qrcodeDATA +=  "Chassis:" + this.ChassisNo + " " ;
+    }
+    if(this.uniqueID){
+      qrcodeDATA +=  "UID:" + this.uniqueID + " " ;
+
+    }
+    if(this.devID){
+      qrcodeDATA += "IMEI :" + this.devID +" " ;
+    }
+    if(this.devName){
+      qrcodeDATA +=  "Device name :" +  this.devName  + " " ;
+    }
+    if(this.invoiceNum){
+      qrcodeDATA += "Invoice Number :" + this.invoiceNum + " ";
+    }
+    if(this.ICCICD){
+      qrcodeDATA += "ICCID :" + this.ICCICD + " " ; 
+    }
+    if(this.IMSI){
+      qrcodeDATA += "IMSI :" + this.IMSI + " " ;
+  
+    }
+
+    if(this.simNum){
+      qrcodeDATA += "SIM :" +  this.simNum + " " ;
+     
+    }
+    if(this.CID_No){
+      qrcodeDATA +=   "CID no :" + this.CID_No + " " ;
+     
+    }
+    if(this.typeOfVehicle){
+      qrcodeDATA +=  "Vehicle:" + this.typeOfVehicle + " " ;
+    }
+
+
+ 
+    if((this.fitmentDate != undefined)&&(this.fitmentDate != '')){
+     var fdate = new Date(this.fitmentDate);
+     var  fDate =  moment(fdate).format('l');
+  
+     qrcodeDATA +=  "Fitment Date :" + fDate + " " ;
+
+    }
+    if((this.InvoiceDate != undefined)&&(this.InvoiceDate!='')){
+      var iDate =  new Date(this.InvoiceDate);
+      var invDate = moment(iDate).format('l');
+      qrcodeDATA +=  "Invoice Date :" + invDate + " ";
+    
+    }
+
+    if((this.vehicleRegDate != undefined)&&(this.vehicleRegDate != "")){ 
+      console.log("vehRegistration Date =>",this.vehicleRegDate);
+      var vehregD = new Date(this.vehicleRegDate);
+      var vehRegDate = moment(vehregD).format('l');
+      qrcodeDATA +=  "Reg Date :" + vehRegDate ;   
+    }
+     
+    // var typeNumber = 4;
+    // var errorCorrectionLevel = 'L';
+    // var qr = qrcode(typeNumber, errorCorrectionLevel);
+    // qr.addData(qrcodeDATA);
+    // qr.make();
+    // this.imgURL = qr.createDataURL();
+
+   
+
+    var qr = new QRious();
+    qr.set({
+      // background: 'green',
+      backgroundAlpha: 0.8,
+      // foreground: 'blue',
+      foregroundAlpha: 0.8,
+      level: 'L',
+      padding: 25,
+      size: 500,
+      value: qrcodeDATA
+    });
+  
+
+    this.imgURL= qr.toDataURL();
+    
+  
+  
+  }
+  exportAsPdf() {
+    var that=this
+    var name="Installation Certificate "+this.devName?this.devName:"Test"+".pdf"
+    console.log(this.imgURL);
+    var doc = new jsPDF();
+    var specialElementHandlers = {
+      '#editor': function (element: any, renderer: any) {
+        return true;
+      }
+    };
+    // doc.text("Customer Copy", 110, 12);
+    doc.setFontSize(10);
+    doc.autoTable({
+      theme: 'plain',
+      html: '#testPdf', 
+      styles :  {
+        cellWidth : 50
+      },     
+      willDrawCell: data => {
+        if(data.row.index === 0){ 
+          data.row.height = 50;      
+          data.row.cells[1].styles.halign = 'center';
+           data.row.cells[1].styles.fontSize = 11;
+          // data.row.cells[1].styles.lineHeight= "2.5";
+          // doc.setLineHeightFactor()
+           var img = new Image();
+          img.src = this.supAdmin.imageDoc?this.supAdmin.imageDoc:'';
+         img.crossOrigin="anonymous";
+          if(this.supAdmin.imageDoc){
+             img.onload = function(){
+            console.log("1");
+          doc.addImage(img , 'png', 10, 12,30,30)
+           
+      
+          };
+          }
+          // doc.addImage(this.supAdmin.imageDoc,'JPEG', 140, 12,40,40);
+          
+          doc.addImage(this.imgURL,'JPEG',150, 12,30,30);
+          
+        }  
+        if(data.row.index ===0){    
+         data.row.cells[0].styles.halign = 'center';
+          doc.halign = 'center';
+           doc.setFontStyle('bold');
+           doc.cellPadding=40
+        }
+
+        if((data.row.index ===1) ||(data.row.index ===3) || (data.row.index ===5) || (data.row.index ===7) ||(data.row.index ===8) ||(data.row.index ===11) || (data.row.index ===13)){
+          doc.setFontStyle('bold');         
+          
+        }
+        if(data.row.index ===7){
+          data.row.height = 45;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+
+        if(data.row.index ===13){
+          data.row.height = 25;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+       doc.setLineWidth(1);
+     		doc.rect(7, 7, 195, 230);
+   
+      }
+      
+    });
+   
+
+    var myImage = new Image();
+    myImage.src = that.deviceImage[0]?that.deviceImage[0]:this.img1;
+    myImage.crossOrigin="anonymous";
+
+    var myImage1 = new Image();
+    myImage1.src = that.deviceImage[1]?that.deviceImage[1]:this.img1;
+    myImage1.crossOrigin="anonymous";
+
+    var myImage2 = new Image();
+    myImage2.src = that.deviceImage[2]?that.deviceImage[2]:this.img1;
+    myImage2.crossOrigin="anonymous";
+
+    if(that.deviceImage.length==0){
+       doc.save(name);
+    }
+
+    function f1() {
+    return new Promise((resolve, reject) => {
+      myImage.onload = function(){
+      console.log("1");
+      doc.addImage(myImage , 'png', 40, 150, 30, 20);
+      if(that.deviceImage.length==1){
+        doc.save(name);
+      }
+      
+    };
+        resolve('');
+    });
+}
+
+function f3(){
+ myImage2.onload = function(){
+           console.log("3");
+        
+        doc.addImage(myImage2 , 'png', 120, 150, 30, 20);
+          doc.save(name);
+        
+        
+      };
+}
+
+function f2() {
+  return new Promise((resolve, reject) => {
+    myImage1.onload = function(){
+        console.log("2");
+        doc.addImage(myImage1 , 'png', 80, 150, 30, 20);
+        if(that.deviceImage.length==2){
+        doc.save(name);
+      }
+      };
+       resolve('');
+    })
+      
+
+}
+
+f1().then(res => f2().then(res1=>f3()));
+
+
+    
+   
+     
+
+   
+  }
+
+    toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+}
diff --git a/src/app/data.service.ts b/src/app/data.service.ts
new file mode 100644
index 0000000..fa7b5d0
--- /dev/null
+++ b/src/app/data.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable()
+export class DataService {
+  private messageSource = new BehaviorSubject<string>("default message");
+  currentMessage = this.messageSource.asObservable();
+  constructor() { }
+  changeMessage(message: string) {
+    this.messageSource.next(message)
+  }
+}
\ No newline at end of file
diff --git a/src/app/data.ts b/src/app/data.ts
new file mode 100644
index 0000000..d378895
--- /dev/null
+++ b/src/app/data.ts
@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class Data {
+
+   public storage: any;
+
+   public constructor() { }
+
+}
\ No newline at end of file
diff --git a/src/app/datainjection.service.spec.ts b/src/app/datainjection.service.spec.ts
new file mode 100644
index 0000000..419a1f2
--- /dev/null
+++ b/src/app/datainjection.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DatainjectionService } from './datainjection.service';
+
+describe('DatainjectionService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DatainjectionService]
+    });
+  });
+
+  it('should be created', inject([DatainjectionService], (service: DatainjectionService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/datainjection.service.ts b/src/app/datainjection.service.ts
new file mode 100644
index 0000000..1a55ef8
--- /dev/null
+++ b/src/app/datainjection.service.ts
@@ -0,0 +1,158 @@
+import { environment } from './../environments/environment';
+import { Injectable } from '@angular/core';
+import { ContactService } from './contact.service';
+import * as io from 'socket.io-client';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import{Http, Headers} from '@angular/http';
+import 'rxjs/add/operator/map';
+
+
+@Injectable()
+export class DatainjectionService {
+  devicess:any;
+  final:any=null;
+  userID:any;
+  fs:any;
+  ls:any;
+  or:any;
+  emailid:any;
+  useridd:any;
+  custtype:any;
+  cust:boolean = false;
+
+   dev_url = environment.hostUrl;
+  
+  //dev_url = 'http://localhost:3000';
+  // socketUrl= environment.socket5000;
+
+  mb: any;
+  socket_gps: any; socket_5000: any; socket_notifIO: any;
+  getSocket_gps(){
+    return this.socket_gps;
+  }
+  getSocket_5000(){
+    return this.socket_5000
+  }
+  getSocket_notifIO(){
+    return this.socket_notifIO;
+  }
+  constructor(private contactService: ContactService, private activatedRoute: ActivatedRoute, private http: Http,private router:Router) {
+    // alert('ata injection constructor')
+    this.socket_gps = io.connect('https://soc.oneqlik.in' +'/gps', {
+      secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    });
+    
+    this.socket_5000 = io.connect('https://soc.oneqlik.in', {
+      secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    });
+
+    this.socket_notifIO = io.connect('https://soc.oneqlik.in'+'/notifIO', {
+      secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    });
+
+    // this.socket_gps = io.connect('https://socket.oneqlik.in' +'/gps', {
+    //   secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    // });
+    
+    // this.socket_5000 = io.connect('https://socket.oneqlik.in', {
+    //   secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    // });
+
+    // this.socket_notifIO = io.connect('https://socket.oneqlik.in'+'/notifIO', {
+    //   secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false
+    // });
+    
+    // https://server2.oneqlik.in/
+    if(window.localStorage.custumer_token){
+      this.fs = JSON.parse(window.atob(window.localStorage.custumer_token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.custumer_token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.custumer_token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.custumer_token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.custumer_token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.custumer_token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.custumer_token.split('.')[1])).isDealer;
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+    }
+    else{
+      console.log(router.url);
+      var url=(router.url).substring(0,12);
+      console.log(url);
+      
+      if(url=="/ViewVehicle"){
+
+      }else{
+        this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+        this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+        this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+        this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+        this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+        this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+        this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+        if(this.custtype == true){
+          this.cust = true;
+        }  
+        if(this.mb.charAt(0)=="n"){
+          this.mb = ' '
+        }
+
+      }
+      
+    }
+
+  }
+ 
+  getDevice(emailid,id) {
+    return this.http.get(this.dev_url + "/devices/getDeviceByUser?email="+emailid+'&id='+id)
+        .map(data => {
+            data.json();
+           
+
+             var devices = data.json().devices;
+         
+
+            /* console.log("Devices: ",temp);  */
+            return data.json();
+    });
+  }
+  getData(e,u,g,s,l,input,supadm,dealer){ 
+   
+    if(input && input!='undefined'){
+      s=0;
+    }
+    var url = this.dev_url + "/devices/getDeviceByUser?email="+e+'&id='+u+'&skip='+s+"&limit="+l;
+    if(input && input!="undefined"){
+      url+= "&search="+input;
+    }
+    console.log(url)
+    if(supadm)
+  url+= '&supAdmin=' + supadm;
+  if(dealer)
+  url+= '&dealer=' + dealer;
+    if(g)
+    url += "&group=" + g;
+    return this.http.get(url)
+    .map(data => {
+    data.json();
+    
+    var devices = data.json().devices;
+    /* console.log("Devices: ",temp); */
+    return data.json();
+    });
+    
+    }
+  getGroupData(e,u){
+      return this.http.get(this.dev_url + "/devices/getVehiclesUnderGroup?userid="+u)
+        .map(data => {
+
+          data.json();
+            return data.json();
+    });
+  
+  }
+
+}
diff --git a/src/app/dealers-info/dealer-permission/dealer-permission.component.html b/src/app/dealers-info/dealer-permission/dealer-permission.component.html
new file mode 100644
index 0000000..163ab75
--- /dev/null
+++ b/src/app/dealers-info/dealer-permission/dealer-permission.component.html
@@ -0,0 +1,34 @@
+<div class="main">
+  <div class="row" style="text-align: center; font-size: 20px; font-weight: 400;"> 
+    <div class="col-12">
+      <P>Dealer Permission</P>
+    </div>
+  </div>
+  <div class="form-group row m-2">
+            <label for="options" class="ml-3 mr-4">User Setting :</label>
+            <div  class="mr-3" *ngFor="let option of UserOptions">
+                <label>
+                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
+                        (change)="updateCheckedOptions(option.name, !option.value,'user')" />
+                    {{option.name}}
+                </label>
+            </div>
+        </div>
+        <div class="form-group row m-2">
+            <label for="options" class="ml-3 mr-4">Device Setting :</label>
+            <div class="mr-3" *ngFor="let option of DeviceOptions">
+                <label>
+                    <input type="checkbox" name="options" value="{{option.value}}" [checked]="option.value"
+                        (change)="updateCheckedOptions(option.name, !option.value,'device')" />
+                    {{option.name}}
+                </label>
+            </div>
+        </div>
+
+  <div class="row"> 
+    <div class="col-12" style="text-align: center;">
+      <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;margin-right: 5px;" md-raised-button (click)="save()">{{'Save' | translate}}</button>
+      <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="cancel()">{{'CANCEL' | translate}}</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/dealers-info/dealer-permission/dealer-permission.component.scss b/src/app/dealers-info/dealer-permission/dealer-permission.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dealers-info/dealer-permission/dealer-permission.component.spec.ts b/src/app/dealers-info/dealer-permission/dealer-permission.component.spec.ts
new file mode 100644
index 0000000..c26bca2
--- /dev/null
+++ b/src/app/dealers-info/dealer-permission/dealer-permission.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DealerPermissionComponent } from './dealer-permission.component';
+
+describe('DealerPermissionComponent', () => {
+  let component: DealerPermissionComponent;
+  let fixture: ComponentFixture<DealerPermissionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DealerPermissionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DealerPermissionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dealers-info/dealer-permission/dealer-permission.component.ts b/src/app/dealers-info/dealer-permission/dealer-permission.component.ts
new file mode 100644
index 0000000..453bbbe
--- /dev/null
+++ b/src/app/dealers-info/dealer-permission/dealer-permission.component.ts
@@ -0,0 +1,102 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MD_DIALOG_DATA, MdDialog, MdDialogRef } from '@angular/material';
+import { ContactService } from '../../contact.service';
+import { ResetPasswordComponent } from '../../add/reset-password/reset-password.component';
+
+@Component({
+  selector: 'app-dealer-permission',
+  templateUrl: './dealer-permission.component.html',
+  styleUrls: ['./dealer-permission.component.scss']
+})
+export class DealerPermissionComponent implements OnInit {
+  DeviceSetting = { Add: true, Edit: true, Delete: false }
+  UserSetting = { Add: true, Edit: true, Delete: false }
+  DeviceOptions = [{ name: "Add", value: true }, { name: "Edit", value: true }, { name: "Delete", value: false }];
+  UserOptions = [{ name: "Add", value: true }, { name: "Edit", value: true }, { name: "Delete", value: false }]
+  constructor(private contactService: ContactService,public dialog: MdDialog,public dialogRef: MdDialogRef<ResetPasswordComponent>, @Inject(MD_DIALOG_DATA) public data: any) { 
+ 
+
+  }
+
+  dev_permission:boolean = true;
+  cust_permission : boolean = true;
+  ngOnInit() {
+    console.log(this.data);
+    console.log(this.data.device_add_permission);
+    console.log(this.data.cust_add_permission);
+    if (this.data.devicePermission) {
+      this.DeviceSetting = this.data.devicePermission;
+      for (let i = 0; i < this.DeviceOptions.length; i++) {
+        // if(this.DeviceOptions[i].name==this.data.DevicePermission[this.DeviceOptions[i].name]){
+        this.DeviceOptions[i].value = this.data.devicePermission[this.DeviceOptions[i].name]
+        // }
+      }
+    }
+    if (this.data.userPermission) {
+      this.UserSetting = this.data.userPermission;
+      for (let i = 0; i < this.UserOptions.length; i++) {
+        // if(this.UserOptions[i].name==this.data.DevicePermission[this.UserOptions[i].name]){
+        this.UserOptions[i].value = this.data.userPermission[this.UserOptions[i].name]
+        // }
+      }
+    }
+    if(this.data.device_add_permission != undefined){
+      this.dev_permission = this.data.device_add_permission ; 
+      console.log(this.dev_permission);
+    }
+    if(this.data.cust_add_permission != undefined){
+        this.cust_permission = this.data.cust_add_permission ; 
+        console.log(this.cust_permission);
+    }  
+  }
+
+save(){
+  console.log('dev_permission',this.dev_permission);
+  console.log('cust_permission',this.cust_permission);
+  let uid = this.data._id ; 
+  var permission_payLoad = {
+    device_add_permission : this.dev_permission,
+    cust_add_permission : this.cust_permission,
+    devicePermission: this.DeviceSetting,
+    userPermission: this.UserSetting,
+    uid : uid
+  }
+
+  this.contactService.setDealerPermission(permission_payLoad).subscribe(res=>{
+    console.log(res);
+    this.dialogRef.close('succ');
+  },err=>{
+    console.log(err);
+  })
+  
+}
+cancel(){
+  this.dialogRef.close('close'); 
+
+}
+
+
+  updateCheckedOptions(value, e, type) {
+    console.log(value, e);
+    if (type == 'user') {
+      for (var i = 0; i < this.UserOptions.length; i++) {
+        if (this.UserOptions[i].name == value) {
+          this.UserOptions[i].value = e;
+          this.UserSetting[value] = e
+          console.log(this.UserOptions, this.UserSetting)
+        }
+      }
+
+
+    } else {
+      for (var i = 0; i < this.DeviceOptions.length; i++) {
+        if (this.DeviceOptions[i].name == value) {
+          this.DeviceOptions[i].value = e;
+          this.DeviceSetting[value] = e;
+          console.log(this.DeviceOptions, this.DeviceSetting)
+        }
+      }
+    }
+
+  }
+}
diff --git a/src/app/dealers-info/dealers-info.component.html b/src/app/dealers-info/dealers-info.component.html
new file mode 100644
index 0000000..61ef9d4
--- /dev/null
+++ b/src/app/dealers-info/dealers-info.component.html
@@ -0,0 +1,376 @@
+<!-- <html>
+
+<head>
+  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+</head>
+
+<body background="../../assets/image/cust2.jpg">
+  <app-all-menus></app-all-menus>
+ 
+
+  <div style="float:left; width: 100%;padding-top: 6%;" class="scrollbar" id="style-1">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+    <p class="headStyle">{{'Dealers' | translate}}</p>
+    <p *ngIf="errorMsg">{{serviceResponse}}</p>
+   
+    <div class="row" >
+      <div class="col-sm-4" style="position: inherit;">
+        <button mdTooltip="{{'Add Dealer' | translate}}" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+          (click)="addDealer()">
+          <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+        </button>
+        <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="cursor: pointer;color:black" title="Video tutorial" target="_blank"><md-icon class="material-icons" style="font-size: 30px"> theaters </md-icon></a>
+      </div>
+      <div class="col-sm-8" style="padding-left: 41%;padding-top: 1%;position: inherit;">
+        <input style="border-radius: 6px;
+          border: 1px solid #c7c7c7;
+          border-bottom: 0px;
+          padding: 12px;
+          width: 175px;
+          /* margin-right: 22%; */
+          height: 7px;
+          background-color: red;
+          font-size: 12px;
+          margin-top: 0;
+          float: left;
+          background: #fffcfc;"
+          type="search" id="myInput" class="form-control" name="myInput" [(ngModel)]="myInput" placeholder="{{'Dealer Search' | translate}}"
+          (ngModelChange)="searchFilter($event)" />
+        <button [disabled]="lastcall" (click)="pre()" style="margin-left: 10px;">
+          < {{'Previous' | translate}} </button> <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} >
+        </button>
+      </div>
+    </div>
+
+    <table id="myTable" class="table table-striped" style="overflow-y: hidden;
+       overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523 !important;color: white;">
+        <tr>
+          <th>{{'User ID' | translate}}</th>
+          <th>{{'Name' | translate}}</th>
+          <th>{{'Email ID' | translate}}</th>
+          <th>{{'Phone Number' | translate}}</th>
+          <th>{{'Password' | translate}}</th>
+          <th>{{'Created On' | translate}}</th>
+          <th>{{'Expire On' | translate}}</th>
+          <th>{{'Last activity' | translate}}</th>
+          <th>{{'Last login' | translate}}</th>
+          <th>{{'Login type' | translate}}</th> 
+          <th>{{'Total vehicles' | translate}}</th>
+          <th>{{'Deleted vehicles' | translate}}</th>
+          <th>{{'Token' | translate}}</th>
+          <th>{{'Documents' | translate}}</th>  
+          <th>{{'Edit' | translate}}</th>
+          <th>{{'Delete' | translate}}</th>
+          <th>{{'Dealers Status' | translate}}</th>
+          <th>{{'Dealer Permission' | translate}}</th>
+          <th>{{'Add Point' | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let dealer of dealers_info">
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.user_id?dealer.user_id:'NA'}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.first_name}}
+            {{dealer.last_name}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.email}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.phone}}</td> 
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.pass?dealer.pass:'Not saved'}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.created_on|date:'short'}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.expire_date|date:'short'}}</td>
+          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
+          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
+          <td style="cursor:pointer"  (click)="dealerSwitch(dealer)">{{dealer.login_type?dealer.login_type:"NA"}}</td> 
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.delDevices?dealer.delDevices:0}}</td>
+          <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>
+        
+
+          <td>        
+            <p><button md-tooltip="View/Download" style="border:1px solid transparent; background-color: transparent;float:right"(click)="viewDocuments(dealer)">   
+                <md-icon>library_books</md-icon></button></p>
+          </td> 
+          <td>
+            <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="edit_DealerDetail(dealer)">
+                <md-icon>edit</md-icon>
+              </button></p>
+          </td>
+          <td>
+            <p><button md-tooltip="Delete" style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="delete_DealerDetail(dealer)">
+                <md-icon>delete</md-icon>
+              </button></p>
+          </td>
+          <td>
+            <md-slide-toggle [(ngModel)]="dealer.status" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
+          </td>
+          <td>
+            <img src="assets/image/user_permission.png" alt="permission" height="25" width="25" style="cursor: pointer;" title="Additonal Access" (click)="user_permission(dealer)">
+          </td>
+          <td>
+     
+            <i id="pointShare" style="cursor:pointer;font-size: 20px;margin-top: 7px;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</body>
+
+</html> -->
+
+
+<div class="limiter">
+ <app-all-menus></app-all-menus>
+ <div id="dvTable" style="position: absolute;top:200px"></div>
+ <div id="toast">
+  <div id="desc">{{data_descip}}</div>
+</div>
+  <div class="container-table100">
+    <div class="wrap-table100">
+      <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+        <div class="col-6">
+          <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{'Add Dealer' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+          <h4 style="display: inline-block;float: right;">{{'Dealers' | translate}}</h4>
+              <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+        </div>
+        <div class="col-6">
+          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">{{'Next' | translate}} >></button>
+          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< {{'Previous' | translate}}</button>
+          <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;margin-right: 5px;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Dealer Search' | translate}}" />
+        </div> 
+      </div>
+      <!-- <div style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+        <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{'Add Dealer' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+        <h4 style="display: inline-block;">{{'Dealers' | translate}}</h4> 
+        <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">Next >></button>
+        <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< Previous</button>
+        <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Dealer Search' | translate}}" />
+      </div> -->
+      <!-- <p style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">Dealers</p> -->
+      <div class="table100 ver1" id="deviceTable">
+        <div class="table100-firstcol">       
+          <table>
+            <thead>
+              <tr>  
+                  <th class="cell100 column1" style="font-weight:600;background: #ADD8E6;">
+                    <div class="row">
+                      <div class="col-5">
+                        <p>{{'NAME' | translate}}</p>
+                      </div>
+                      <div class="col-5">
+                        <p>{{'EMAIL' | translate}}</p>
+                      </div>
+                      <div class="col-2">
+                        <p>{{'PHONE' | translate}}</p>
+                      </div>          
+                    </div>
+                  </th>
+                  <!-- <th class="cell100 column1" style='font-weight:600;background: #ADD8E6;text-align: left;'>EMAIL</th> -->
+                  <!-- <th class="cell100 column111" style='font-weight:600;background: #ADD8E6;'>PHONE</th>          -->
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let dealer of dealers_info">          
+                  <td class="cell100 column1" (click)="dealerSwitch(dealer)">
+                    <div class="row">
+                      <div class="col-sm-5">
+                        <p>{{dealer.first_name}} {{dealer.last_name}}</p>
+                      </div>
+                      <div class="col-sm-5">
+                        <p (click)="dealerSwitch(dealer)">{{dealer.email}}</p>
+                      </div>
+                      <div class="col-sm-2">
+                        <p (click)="dealerSwitch(dealer)">{{dealerPhone(dealer)}}</p>
+                      </div>
+                    </div>              
+                  </td>
+                  <!-- <td class="cell100 column1" style="cursor: pointer;"  (click)="dealerSwitch(dealer)"></td>
+                  <td class="cell100 column1" style="cursor: pointer;" (click)="dealerSwitch(dealer)"></td> -->
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="wrap-table100-nextcols js-pscroll" style="height: 660px;">
+          <div class="table100-nextcols">
+            <table>
+              <thead>
+                <tr class="row100 head">    
+            
+                  <th class="cell100 column2" style='text-align: left;font-weight: 600;background: #ADD8E6;padding-left: 55px;'>{{'USER ID' | translate}}</th>
+                  <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'PASSWORD' | translate}}</th>
+                  <th class="cell100 column4" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'CREATED ON' | translate}}</th>
+                  <th class="cell100 column5" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'EXPIRES ON' | translate}}</th>
+                  <th class="cell100 column6" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST ACTIVITY' | translate}}</th>
+                  <th class="cell100 column7" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST LOGIN' | translate}}</th>
+                  <th class="cell100 column8" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LOGIN TYPE' | translate}}</th>
+                  <th class="cell100 column9" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'TOTAL VEHICLES' | translate}}</th>
+                  <th class="cell100 column10" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'DELETED VEHICLES' | translate}}</th>
+                  <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ALLOCATED POINTS' | translate}}</th>
+                  <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'AVAILABLE POINTS'| translate}}</th>
+                  <th class="cell100 column12" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'TOKEN' | translate}}</th>
+                  <th class="cell100 column13" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DOCUMENTS' | translate}}</th>  
+                  <th class="cell100 column14" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'EDIT' | translate}}</th>
+                  <th class="cell100 column15" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DELETE' |translate}}</th>
+                  <th class="cell100 column16" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER STATUS' | translate}}</th>
+                  <th class="cell100 column17" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER PERMISSION' | translate}}</th>
+                  <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'ADD POINTS' | translate}}</th>  
+                  <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>
+                   <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>           
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="row100 body" *ngFor="let dealer of dealers_info">
+     
+                  <td class="cell100 column2"  style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.user_id?dealer.user_id:'NA'}}</td>
+                  <td class="cell100 column3" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.pass?dealer.pass:'Not saved'}}</td>
+                  <td class="cell100 column4" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.created_on|date:'short'}}</td>
+                  <td class="cell100 column5" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.expire_date|date:'short'}}</td>
+                  <td class="cell100 column6" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
+                  <td class="cell100 column7" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
+                  <td class="cell100 column8" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.login_type?dealer.login_type:"NA"}}</td> 
+                  <td class="cell100 column9" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
+                  <td class="cell100 column10" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.delDevices?dealer.delDevices:0}}</td>
+                  <td class="cell100 column11" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{dealer.point_Allocated?dealer.point_Allocated:0}}</td>
+                  <td class="cell100 column11" style="cursor: pointer;" (click)="dealerSwitch(dealer)">{{availablePoint(dealer)}}</td>
+                  <td class="cell100 column12" style="cursor: pointer;text-align: center;" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>  
+                  <td class="cell100 column13" style="text-align: center;">  
+                    <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer;" (click)="viewDocuments(dealer)"></i>           
+                  </td> 
+                  <td class="cell100 column14" style="text-align: center">
+                    <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer;color:#08de85" (click)="edit_DealerDetail(dealer)"></i>
+                   
+                  </td>
+                  <td class="cell100 column15" style="text-align: center">
+                    <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer;color:#ff0707;" (click)="delete_DealerDetail(dealer)"></i>
+                
+                  </td>
+                  <td class="cell100 column16" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="dealer.status" style="height: 0px !important" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
+                  </td>
+                  <td class="cell100 column17" style="text-align: center;">
+                    <i class="fas fa-user-shield" title="Additonal Access"  (click)="user_permission(dealer)"></i>
+                 
+                  </td>
+                  <td class="cell100 column18" style="text-align: center;">    
+                    <i id="pointShare" style="cursor:pointer;color:#f5b515;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
+                  </td>  
+                  <td class="cell100 column16" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="dealer.accountSuspended" style="height: 0px !important" ngDefaultControl (change)="accountStatusonChange(dealer,$event)"></md-slide-toggle>
+                  </td> 
+                </tr>
+
+
+           
+                <!-- <td style="cursor:pointer" (click)="dealerSwitch(dealer)">{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td> -->
+              
+
+                <!-- <tr class="row100 body">
+                  <td class="cell100 column2">Marketing</td>
+                  <td class="cell100 column3">16 Nov 2015</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">kathy_82@example.com</td>
+                  <td class="cell100 column6">26</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx1616</td>
+                
+                </tr>
+
+                <tr class="row100 body">
+                  <td class="cell100 column2">CFO</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">elizabeth82@example.com</td>
+                  <td class="cell100 column6">32</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx5326</td>
+               
+                </tr>
+
+                <tr class="row100 body">
+                  <td class="cell100 column2">Designer</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">michael94@example.com</td>
+                  <td class="cell100 column6">22</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx6328</td>
+                
+                </tr>
+
+                <tr class="row100 body">
+                  <td class="cell100 column2">Developer</td>
+                  <td class="cell100 column3">16 Nov 2017</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">jasoncox@example.com</td>
+                  <td class="cell100 column6">25</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx7648</td>
+            
+                </tr>
+
+                <tr class="row100 body">
+                  <td class="cell100 column2">Sale</td>
+                  <td class="cell100 column3">16 Nov 2016</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">christian_83@example.com</td>
+                  <td class="cell100 column6">28</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx4152</td>
+                
+                </tr>
+
+                <tr class="row100 body">
+                  <td class="cell100 column2">Support</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">emily90@example.com</td>
+                  <td class="cell100 column6">24</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx6668</td>
+               
+                </tr>
+                <tr class="row100 body">
+                  <td class="cell100 column2">Support</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">emily90@example.com</td>
+                  <td class="cell100 column6">24</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx6668</td>
+               
+                </tr>
+                <tr class="row100 body">
+                  <td class="cell100 column2">Support</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">emily90@example.com</td>
+                  <td class="cell100 column6">24</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx6668</td> 
+                </tr>
+                <tr class="row100 body">
+                  <td class="cell100 column2">Support</td>
+                  <td class="cell100 column3">16 Nov 2013</td>
+                  <td class="cell100 column4">30 Nov 2017</td>
+                  <td class="cell100 column5">emily90@example.com</td>
+                  <td class="cell100 column6">24</td>
+                  <td class="cell100 column7">New York City, NY</td>
+                  <td class="cell100 column8">424242xxxxxx6668</td> 
+                </tr> -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
diff --git a/src/app/dealers-info/dealers-info.component.scss b/src/app/dealers-info/dealers-info.component.scss
new file mode 100644
index 0000000..7ce05e0
--- /dev/null
+++ b/src/app/dealers-info/dealers-info.component.scss
@@ -0,0 +1,1732 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+
+// ::-webkit-scrollbar {
+//     // display: none;
+//     }
+//     #d:hover { 
+//         color: rgb(14, 102, 18);
+
+        
+//     }
+//     #ac{
+//         color: rgb(38, 38, 90)
+//     }
+//     #active{
+//         text-decoration-line: underline;
+//         text-decoration-color: rgb(66, 26, 245);
+//     } 
+//     .switch {
+//         position: relative;
+//         display: inline-block;
+//         width: 60px;
+//         height: 34px;
+//       }
+
+//       .headStyle{
+//         text-align: center;
+//         font-size: 22px;
+//         font-weight: 500;
+       
+//         color: #6b6a6a;
+//         padding-top: 7px;
+//         margin: 0px;
+//       }
+    
+      
+//       .switch input {display:none;}
+      
+//       .slider {
+//         position: absolute;
+//         cursor: pointer;
+//         top: 6px;
+//         left: 11px;
+//         right: 7px;
+//         bottom: 7px;
+//         background-color: #ccc;
+//         transition: .4s;
+//       }
+      
+//       .slider:before {
+//         position: absolute;
+//         content: "";
+//         height: 11px;
+//         width: 11px;
+//         left: 2px;
+//         bottom: 5px;
+//         background-color: white;
+//         transition: .4s;
+//       }
+      
+//       input:checked + .slider {
+//         background-color: #2196F3;
+//       }
+      
+//       input:focus + .slider {
+//         box-shadow: 0 0 1px #2196F3;
+//       }
+      
+//       input:checked + .slider:before {
+//         -webkit-transform: translateX(26px);
+//         -ms-transform: translateX(26px);
+//         transform: translateX(26px);
+//       }
+      
+//       /* Rounded sliders */
+//       .slider.round {
+//         border-radius: 34px;
+//       }
+      
+//       .slider.round:before {
+//         border-radius: 50%;
+//       }
+
+
+// .sk-fading-circle {
+//     margin: 100px auto;
+//     width: 40px;
+//     height: 40px;
+//     position: relative;
+    
+//   }
+  
+//   .sk-fading-circle .sk-circle {
+//     width: 100%;
+//     height: 100%;
+//     position: absolute;
+//     left: 0;
+//     top: 0;
+//   }
+  
+//   .sk-fading-circle .sk-circle:before {
+//     content: '';
+//     display: block;
+//     margin: 0 auto;
+//     width: 15%;
+//     height: 15%;
+//     background-color: #333;
+//     border-radius: 100%;
+//     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//             animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//   }
+//   .sk-fading-circle .sk-circle2 {
+//     -webkit-transform: rotate(30deg);
+//         -ms-transform: rotate(30deg);
+//             transform: rotate(30deg);
+//   }
+//   .sk-fading-circle .sk-circle3 {
+//     -webkit-transform: rotate(60deg);
+//         -ms-transform: rotate(60deg);
+//             transform: rotate(60deg);
+//   }
+//   .sk-fading-circle .sk-circle4 {
+//     -webkit-transform: rotate(90deg);
+//         -ms-transform: rotate(90deg);
+//             transform: rotate(90deg);
+//   }
+//   .sk-fading-circle .sk-circle5 {
+//     -webkit-transform: rotate(120deg);
+//         -ms-transform: rotate(120deg);
+//             transform: rotate(120deg);
+//   }
+//   .sk-fading-circle .sk-circle6 {
+//     -webkit-transform: rotate(150deg);
+//         -ms-transform: rotate(150deg);
+//             transform: rotate(150deg);
+//   }
+//   .sk-fading-circle .sk-circle7 {
+//     -webkit-transform: rotate(180deg);
+//         -ms-transform: rotate(180deg);
+//             transform: rotate(180deg);
+//   }
+//   .sk-fading-circle .sk-circle8 {
+//     -webkit-transform: rotate(210deg);
+//         -ms-transform: rotate(210deg);
+//             transform: rotate(210deg);
+//   }
+//   .sk-fading-circle .sk-circle9 {
+//     -webkit-transform: rotate(240deg);
+//         -ms-transform: rotate(240deg);
+//             transform: rotate(240deg);
+//   }
+//   .sk-fading-circle .sk-circle10 {
+//     -webkit-transform: rotate(270deg);
+//         -ms-transform: rotate(270deg);
+//             transform: rotate(270deg);
+//   }
+//   .sk-fading-circle .sk-circle11 {
+//     -webkit-transform: rotate(300deg);
+//         -ms-transform: rotate(300deg);
+//             transform: rotate(300deg); 
+//   }
+//   .sk-fading-circle .sk-circle12 {
+//     -webkit-transform: rotate(330deg);
+//         -ms-transform: rotate(330deg);
+//             transform: rotate(330deg); 
+//   }
+//   .sk-fading-circle .sk-circle2:before {
+//     -webkit-animation-delay: -1.1s;
+//             animation-delay: -1.1s; 
+//   }
+//   .sk-fading-circle .sk-circle3:before {
+//     -webkit-animation-delay: -1s;
+//             animation-delay: -1s; 
+//   }
+//   .sk-fading-circle .sk-circle4:before {
+//     -webkit-animation-delay: -0.9s;
+//             animation-delay: -0.9s; 
+//   }
+//   .sk-fading-circle .sk-circle5:before {
+//     -webkit-animation-delay: -0.8s;
+//             animation-delay: -0.8s; 
+//   }
+//   .sk-fading-circle .sk-circle6:before {
+//     -webkit-animation-delay: -0.7s;
+//             animation-delay: -0.7s; 
+//   }
+//   .sk-fading-circle .sk-circle7:before {
+//     -webkit-animation-delay: -0.6s;
+//             animation-delay: -0.6s; 
+//   }
+//   .sk-fading-circle .sk-circle8:before {
+//     -webkit-animation-delay: -0.5s;
+//             animation-delay: -0.5s; 
+//   }
+//   .sk-fading-circle .sk-circle9:before {
+//     -webkit-animation-delay: -0.4s;
+//             animation-delay: -0.4s;
+//   }
+//   .sk-fading-circle .sk-circle10:before {
+//     -webkit-animation-delay: -0.3s;
+//             animation-delay: -0.3s;
+//   }
+//   .sk-fading-circle .sk-circle11:before {
+//     -webkit-animation-delay: -0.2s;
+//             animation-delay: -0.2s;
+//   }
+//   .sk-fading-circle .sk-circle12:before {
+//     -webkit-animation-delay: -0.1s;
+//             animation-delay: -0.1s;
+//   }
+  
+//   @-webkit-keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; }
+//   }
+  
+//   @keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; } 
+//   }
+
+
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+//   .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 17%;
+//    /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+   
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }  
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+    
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+  
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+  
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+   
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+    
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+    
+    
+// }
+// #c1 {
+//     float:left;
+ 
+// }
+
+// body {margin:0}
+
+// .icon-bar {
+//     width: 17%;
+// /*     background-color: #555; */
+// background-color: #18262F;
+//     margin-top: -9px;
+//     height:100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){        
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+    
+//     width: 299px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+   
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// .iphone {
+//     width: 201px;
+//     height: 378px;
+//     background: #f9f7f9;
+//     border: 5px solid #c1bfc1;
+//     border-radius: 45px;
+//     opacity: 0.8;
+// }
+// .highlight {
+//     width: 185px;
+//     height: 366px;
+//     border: 3px solid #fff;
+//     border-radius: 45px;
+//     position: relative;
+//     z-index: 10;
+//     top: -748px;
+//     left: 10px;
+// }
+// .circle {
+//     width: 7px;
+//     height: 7px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -370px;
+//     left: 92px;
+// }
+// .camera {
+//     width: 10px;
+//     height: 10px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -376px;
+//     left: 66px;
+// }
+// .speaker {
+//     width: 59px;
+//     height: 3px;
+//     background: #333;
+//     border-radius: 5px;
+//     position: relative;
+//     top: -372px;
+//     left: 73px;
+// }
+// .screen {
+//     width: 166px;
+//     height: 255px;
+//     border: 3px solid #333;
+//     border-radius: 5px;
+//     position: relative;
+//     left: 18px;
+//     top: -365px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// }
+// .home1 {
+//     width: 47px;
+//     height: 47px;
+//     background: #fff;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -353px;
+//     left: 79px;
+//     z-index: 2;
+// }
+// .home2 {
+//     width: 52px;
+//     height: 52px;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -403px;
+//         left: 77px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// } 
+// #c2{
+//     //background:green;
+//     float:right;
+// }
+// #c1, #c2 {
+//     width: 33%; 
+//     //background: rebeccapurple
+// }
+
+// #c3 {
+//     width: auto;
+//      width:34%;
+//     // background: red
+// }
+// .off{
+//     margin: auto;
+//     width: 60%;
+//     top:70%;
+//     padding: 10px;
+//     margin-right:30%
+    
+// }
+// .newspaper {
+//     -webkit-column-count: 2; /* Chrome, Safari, Opera */
+//     -moz-column-count: 2; /* Firefox */
+//     column-count: 2;
+//     -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+//     -moz-column-gap: 40px; /* Firefox */
+//     column-gap: 40px;
+//     align-content:left;
+//     text-align: left;
+// }
+// #demo {
+//     margin: 30px 0 50px 0;
+//     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+// }
+
+// #demo .wrapper {
+//     display: inline-block;
+//     width: 180px;
+//     margin: 0 10px 0 0;
+//     height: 20px;
+//     position: relative;
+  
+// }
+
+// #demo .parent {
+//     height: 100%;
+//     width: 100%;
+//     display: block;
+//     cursor: pointer;
+//     line-height: 30px;
+//     height: 30px;
+//     border-radius: 5px;
+//     background: #F9F9F9;
+//     border: 1px solid #AAA;
+//     border-bottom: 1px solid #777;
+//     color: #282D31;
+//     font-weight: bold;
+//     z-index: 2;
+//     position: relative;
+//     -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+//     -webkit-transition-delay: .8s;
+//     text-align: center;
+// }
+
+// #demo .parent:hover,
+// #demo .content:hover ~ .parent {
+//     background: #fff;
+//     -webkit-transition-delay: 0s, 0s, 0s;
+// }
+
+// #demo .content:hover ~ .parent {
+//     border-bottom-left-radius: 0;
+//     border-bottom-right-radius: 0;
+//     z-index: 0;
+// }
+
+// #demo .content {
+//     position: absolute;
+//     top: 0;
+//     display: block;
+//     z-index: 1;
+//     height: 0;
+//     width: 180px;
+//     padding-top: 30px;
+//     -webkit-transition: height .5s ease;
+//     -webkit-transition-delay: .4s;
+//     border: 1px solid #777;
+//     border-radius: 5px;
+//     box-shadow: 0 1px 2px rgba(0,0,0,.4);
+// }
+
+// #demo .wrapper:active .content {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+// #demo .content:hover {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+
+// #demo .content ul {
+//     background: #fff;
+//     margin: 0;
+//     padding: 0;
+//     overflow: hidden;
+//     height: 100%;
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+
+// #demo .content ul a {
+//     text-decoration: none;
+// }
+
+// #demo .content li:hover {
+//     background: #eee;
+//     color: #333;
+// }
+
+// #demo .content li {
+//     list-style: none;
+//     text-align: left;
+//     color: #888;
+//     font-size: 14px;
+//     line-height: 30px;
+//     height: 30px;
+//     padding-left: 10px;
+//     border-top: 1px solid #ccc;
+// }
+
+// #demo .content li:last-of-type {
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+// .customClass {
+//     background-color: #dd3;
+//     border-radius: 5px;
+//     margin:5px;
+//     width: 500px;
+// }
+
+// .customClass .img-ul-upload {
+//     background-color: #000 !important;
+// }
+
+// .customClass .img-ul-clear {
+//     background-color: #B819BB !important;
+// }
+
+// .customClass .img-ul-drag-box-msg {
+//     color: purple !important;
+// }
+
+// .customClass .img-ul-container {
+//     background-color: #FF6CAD !important;
+// }
+// .img-ul-file-upload[_ngcontent-c6] {
+//     padding: 16px;
+//     height: 201px !important;
+// }
+// .weekDays-selector input {
+//     display: none!important;
+//   }
+  
+//   .weekDays-selector input[type=checkbox] + label {
+//     display: inline-block;
+//     border-radius: 6px;
+//     background: #dddddd;
+//     height: 40px;
+//     width: 34.2px;
+//     margin-right: 3px;
+//     line-height: 40px;
+//     text-align: center;
+//     cursor: pointer;
+//   }
+  
+//   .weekDays-selector input[type=checkbox]:checked + label {
+//     background: #2AD705;
+//     color: #ffffff;
+//   }
+//   @media screen and (max-width: 900px) {
+//         .icon-bar{
+//             display: none;
+            
+//         }
+//         .sch{
+//             display: none;
+//         }
+//         .first{
+//             width:1%!important;
+//         }
+//         .second{
+//             margin-left: 8px!important;
+//         }
+//         .small{
+//             display: block!important;
+//         }
+//         .image{
+//             display: none;
+//         }
+//         .schlar{
+//             display: block!important;
+//         }
+//   }
+
+//   @media screen and (min-width: 900px) {
+// .schlar{
+//     display: none;
+// }
+
+//   }
+//   .small{
+//       display: none;
+//   }
+//   .first{
+//     float:left;
+//     width: 16%; 
+//     height:86vh;
+//     overflow-y: hidden;
+//     overflow-x: hidden;
+//     margin-right: 5px
+//   }
+//   .second{
+//     width: 88%; 
+//     height:86vh;
+//     margin-left:171px;
+//   }
+//  .mat-dialog-container {
+//     max-width: none !important;
+// }
+// .sch{
+
+// }
+// .schlar{
+
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// .expansion-panel__content{
+//     margin-left: 0% !important;
+// }
+
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+//     position: absolute; z-index: 99;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+  
+
+// .button2 {background-color: #008CBA;}
+// .ngx-picker--btn {
+//     color: #000;
+//     background-color: transparent;
+//     border: none;
+//     padding: 1em;
+//     font-size: 1em; }
+//     .ngx-picker--btn__selected {
+//       background-color: #eee; }
+//     .ngx-picker--btn:hover {
+//       transition: .25s ease;
+//       background-color: #eee;
+//       cursor: pointer; }
+//     .ngx-picker--btn:focus {
+//       outline-color: transparent; }
+  
+//   .ngx-picker--btn__month:hover {
+//     border-top-left-radius: 0.2em; }
+  
+//   .ngx-picker--btn__done:hover {
+//     border-bottom-right-radius: 0.2em; }
+  
+//   .ngx-picker--btn__now:hover {
+//     border-bottom-left-radius: 0.2em; }
+  
+//   .ngx-picker--btn__next:hover {
+//     border-top-right-radius: 0.2em; }
+  
+//   .calendar {
+//     position: absolute;
+//     background-color: #e6e6e6;
+//     max-width: 16em;
+//     min-width: 16em;
+//     font-size: 16px;
+//     font-family: "Arial", sans-serif;
+//     border-radius: 0.2em;
+//     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+//   .calendar--previous-and-next {
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     display: flex;
+//     justify-content: flex-end; }
+  
+//   .calendar--footer {
+//     display: flex;
+//     justify-content: space-between;
+//     background-color: #e6e6e6;
+//     padding: 0;
+//     border-radius: 0.2em; }
+  
+  // .calendar--years-select,
+//   .calendar--months-select {
+//     overflow-y: auto;
+//     overflow-x: hidden;
+//     max-height: 14.85em;
+//     background-color: #fff;
+//     width: 100%; }
+  
+//   .calendar--year,
+//   .calendar--month {
+//     display: block;
+//     padding: .5em 1em;
+//     width: 100%;
+//     overflow: hidden;
+//     color: #000; }
+//     .calendar--year__selected,
+//     .calendar--month__selected {
+//       color: #000;
+//       font-weight: bold;
+//       background-color: #eee; }
+//     .calendar--year:hover,
+//     .calendar--month:hover {
+//       cursor: pointer;
+//       background-color: #eee;
+//       font-weight: 400;
+//       color: #000; }
+  
+//   .calendar--days-of-week {
+//     display: flex;
+//     justify-content: space-around;
+//     background-color: #eee; }
+  
+//   .calendar--day-of-week {
+//     position: relative;
+//     padding: .5em;
+//     text-align: center;
+//     text-transform: uppercase;
+//     color: #000;
+//     font-size: .9em; }
+  
+//   .calendar--days-select {
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: space-between;
+//     background-color: #fff; }
+  
+//   .calendar--day {
+//     text-align: center;
+//     width: 1.285em;
+//     padding: .5em;
+//     font-weight: 500;
+//     color: #000; }
+//     .calendar--day__muted {
+//       color: #999; }
+//     .calendar--day__selected {
+//       background-color: #eee;
+//       color: #000; }
+//     .calendar--day:hover {
+//       cursor: pointer;
+//       color: #000;
+//       background-color: #eee; }
+  
+//   .ngx-picker {
+//     display: flex;
+//     position: relative; }
+//     .ngx-picker .calendar {
+//       position: absolute;
+//       left: 0;
+//       top: 2.5em;
+//       z-index: 3; }
+  
+//   .time-picker {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #e6e6e6; }
+  
+//   .time--values {
+//     display: flex;
+//     justify-content: space-between;
+//     flex-direction: row;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #eee; }
+  
+//   .time--value {
+//     width: 2.66em;
+//     font-size: 1em;
+//     padding: .5em 0;
+//     text-align: center;
+//     color: #000; }
+//     .time--value__selected {
+//       color: #000;
+//       background-color: #e6e6e6; }
+//     .time--value:hover {
+//       transition: .25s ease;
+//       cursor: pointer;
+//       background-color: #e6e6e6; }
+  
+//   [hidden] {
+//     display: none !important; }
+//     #c11 {
+//         width: 25%; 
+//         float:left
+//     }
+//     #c22{
+//         width: 25%; 
+//         float:left
+//     }
+//     #c33 {
+//         width: 25%; 
+//         float:left
+        
+//     }
+//     #c44{
+//         width: 25%; 
+//         float:left
+//     }
+//     #c111 {
+//         width: 50%; 
+//         float:left
+//     }
+//     #c222{
+//         width: 45%; 
+//         float:left
+//     }
+//     #c333 {
+//         width: 5%; 
+//         float:left
+        
+//     }
+//     #myTable {
+//         border-collapse: collapse;
+//         width: 100%;
+//         border: 1px solid #ddd;
+//         font-size: 12px;
+//       }
+      
+//       #myTable th, #myTable td {
+//         text-align: left;
+//         padding: 12px;
+//       }
+      
+//       #myTable tr {
+//         border-bottom: 1px solid #ddd;
+//       }
+      
+//       /*#myTable tr.header, #myTable tr:hover {
+//         background-color: #f1f1f1;
+//       }*/
+//       * {
+//         box-sizing: border-box;
+//       }
+//       .width{
+//         width: 100%;
+//     }
+    
+
+  #toast {
+    visibility: hidden;
+    max-width: 250px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+
+// .scrollbar
+// {
+//     /* margin-left: 30px; */
+//     /* float: left; */
+//     /* height: 300px;
+//     width: 65px; */
+//     // width: 100%;height: 90vh; padding-top: 1%;
+//     /* background: #F5F5F5; */
+//     overflow-x: hidden;
+//     /* overflow-y: none; */
+//     /* margin-bottom: 25px; */
+// }
+
+// .force-overflow
+// {
+//     min-height: 450px;
+// }
+
+// #style-1::-webkit-scrollbar-track
+// {
+//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+//     border-radius: 10px;
+//     background-color: #F5F5F5;
+// }
+
+// #style-1::-webkit-scrollbar
+// {
+//     width: 12px;
+//     background-color: #F5F5F5;
+// }
+
+// #style-1::-webkit-scrollbar-thumb
+// {
+//     border-radius: 10px;
+//     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+//     background-color: -webkit-linear-gradient(45deg,
+//     rgba(255, 255, 255, 0.2) 25%,
+//     transparent 25%,
+//     transparent 50%,
+//     rgba(255, 255, 255, .2) 50%,
+//     rgba(255, 255, 255, .2) 75%,
+//     transparent 75%,
+//     transparent)
+
+//     /* background-color: linear-gradient(to bottom, MD_DIALOG_DATA 0%, #0066ff 100%); */
+// }
+
+
+// /deep/ .mat-menu-panel.test{
+   
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+
+//     a{
+//       display: block;
+//     padding: 9px 10px;
+//     margin: 0;
+//     border-bottom: 1px solid #999;
+//     }
+// }
+  
+// /deep/ .mat-menu-panel.test_1{
+   
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff; 
+//     margin-top:48px; 
+// } 
+
+
+
+
+#toast #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+// #myInput {
+//     border-radius: 15px;
+//     /* border: 2px solid #18262F; */
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// }
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;} 
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+  
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+  
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+  
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+  
+//   /* Animation */
+  
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+
+
+
+//   .openLayermap{
+//     height:400px;
+//     width:100%;
+//   }
+
+
+
+
+  // css style
+
+
+  
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+// ../fonts/roboto/Roboto-Regular.ttf
+// @font-face {
+//   font-family: Roboto-Regular;
+//   src: url('../../fonts/roboto/Roboto-Regular.ttf'); 
+// }
+
+// @font-face {
+//   font-family: Roboto-Medium;
+//   src: url('../../fonts/roboto/Roboto-Medium.ttf'); 
+// }
+
+// @font-face {
+//   font-family: Roboto-Bold;
+//   src: url('../../fonts/roboto/Roboto-Bold.ttf'); 
+// }
+
+/*//////////////////////////////////////////////////////////////////
+[ RESTYLE TAG ]*/
+* {
+	margin: 0px; 
+	padding: 0px; 
+	box-sizing: border-box;
+}
+
+body, html {
+	height: 100%;
+	font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+	margin: 0px;
+	transition: all 0.4s;
+	-webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+	outline: none !important;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,h2,h3,h4,h5,h6 {margin: 0px;}
+
+p {margin: 0px;}
+
+ul, li {
+	margin: 0px;
+	list-style-type: none;
+}
+
+
+/* ------------------------------------ */
+input {
+  display: block;
+	outline: none;
+	border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus, input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+	outline: none !important;
+	border: none;
+	background: transparent;
+}
+
+button:hover {
+	cursor: pointer;
+}
+
+iframe {
+	border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+
+.table100 .ps__rail-x {
+  z-index: 1010;
+  height: 6px;
+  background-color: transparent;
+  opacity: 1 !important;
+  bottom: 10px;
+}
+
+.table100 .ps__rail-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #e6e6e6;
+  height: 100%;
+  width: calc(100% - 30px);
+  left: 15px;
+  top: 0px;
+}
+
+.table100 .ps__rail-x .ps__thumb-x {
+  height: 100%;
+  bottom: 0;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-x .ps__thumb-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #b3b3b3;
+  height: 100%;
+  width: calc(100% - 30px);
+  top: 0;
+  left: 15px;
+}
+
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  // background: #fa71cd;
+  background: #efecec;
+  // background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -o-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: linear-gradient(bottom, #c471f5, #fa71cd);
+
+
+}
+
+.container-table100 {
+  max-height: 100vh;
+  // max-width: 1366px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  // padding: 33px 100px;
+  padding: 55px 20px 0px 20px
+}
+
+.wrap-table100 {
+  width: 100%;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  background-color: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+th, td {
+  font-weight: unset;
+  padding-right: 10px;
+}
+
+.column1 {
+  width: 100%;
+  padding-left: 40px;
+}
+
+.column2 {
+  width: 275px;
+  padding-left: 55px;
+}
+
+.column3 {
+  // width: 205px;
+  width: 265px;
+}
+
+.column4 {
+  width: 195px;
+}
+
+.column5 {
+  width: 235px;
+}
+
+.column6 {
+  width: 250px;
+}
+
+.column7 {
+  // width: 330px;
+  width: 250px;
+}
+
+.column8 {  
+  // width: 305px;
+  width:210px;
+}
+
+.column9 {
+  width: 200px;
+}
+
+.column10 {
+  width: 200px;
+}
+
+.column11 {
+  // width: 200px;
+  width:155px;
+}
+
+.column12 {
+  width: 200px;
+}
+
+.column13 {
+  width: 150px;
+}
+
+.column14 {
+  // width: 200px;
+  width:150px
+}
+.column15 {
+  // width: 200px;
+  width: 150px;
+}
+.column16 {
+  // width: 200px;
+  width:150px;
+}
+.column17 {
+  // width: 200px;
+  width:175px
+}
+.column18 {
+  // width: 200px;
+  width:175px;
+}
+.column19 {
+  // width: 200px;
+  width:150px;
+}
+
+.column20 {
+  // width: 200px;
+  width:150px;
+}
+
+.table100 th {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.table100 td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+
+/*==================================================================
+[ Fix col ]*/
+.table100 {
+  width: 100%;
+  position: relative;
+}
+
+.table100-firstcol {
+  background-color: #fff;
+  position: absolute;
+  z-index: 1;
+  // width: 310px;
+  // width: 590px;
+  width: 700px;
+  top: 0;
+  left: 0;
+}
+
+.table100-firstcol table {
+  background-color: #fff;
+}
+
+.wrap-table100-nextcols {
+  width: 100%;
+  overflow: auto;
+  // padding-left: 310px;
+  // padding-left : 590px;
+  padding-left: 698px;
+  padding-bottom: 28px;
+}
+
+.table100-nextcols table{
+  table-layout: fixed;
+}
+
+.shadow-table100-firstcol {
+  box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.table100-firstcol table {
+  background-color: transparent;
+}
+
+/*==================================================================
+[ Ver1 ]*/
+
+.table100.ver1 th {
+  // font-family: Roboto-Bold;
+  font-family: Roboto;
+  font-size: 14px;
+  // color: #333333;
+
+  color:white;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.table100.ver1 td {
+  // font-family: Roboto-Medium;
+  font-family: Roboto;
+  font-size: 15px;
+  // line-height: 1.4;
+}
+
+.table100.ver1 .table100-firstcol td {
+  color: #666666;
+}
+
+.table100.ver1 .table100-nextcols td {
+  color: #999999;
+}
+
+
+.table100.ver1 tr {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+
+// .btn-default {
+//   @include btn-variant(#546e7a, #90a4ae, #78909c, #cfd8dc, #eceff1, #b0bec5, #455a64);
+  
+
+// }
+
+
+
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  float: right;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  whitespace: nowrap;
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+    font-size: 12px;
+  
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+  
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+  
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+  
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+  
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+  
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+  
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
+
+// #dvTable{
+//   background-color: white;
+//   height: 400px;
+//   width: 400px;
+// }
+
+
+
diff --git a/src/app/dealers-info/dealers-info.component.spec.ts b/src/app/dealers-info/dealers-info.component.spec.ts
new file mode 100644
index 0000000..294b685
--- /dev/null
+++ b/src/app/dealers-info/dealers-info.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DealersInfoComponent } from './dealers-info.component';
+
+describe('DealersInfoComponent', () => {
+  let component: DealersInfoComponent;
+  let fixture: ComponentFixture<DealersInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DealersInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DealersInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dealers-info/dealers-info.component.ts b/src/app/dealers-info/dealers-info.component.ts
new file mode 100644
index 0000000..4908c5b
--- /dev/null
+++ b/src/app/dealers-info/dealers-info.component.ts
@@ -0,0 +1,692 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { MdDialog } from '@angular/material';
+import { AddDealerComponent } from '../add-dealer/add-dealer.component';
+import { DeviceEditComponent } from '../dashboard/device-edit/device-edit.component';
+import { EditDealerComponent } from '../edit-dealer/edit-dealer.component';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import { EditCostumerComponent } from '../edit-costumer/edit-costumer.component';
+import { environment } from '../../environments/environment';
+import { DealerPermissionComponent } from './dealer-permission/dealer-permission.component';
+import { PointShareComponent } from '../point-share/point-share.component';
+declare var swal: any;
+declare var ol : any;
+declare var PerfectScrollbar:any;
+
+declare var html2canvas:any;
+declare var pdfMake : any;
+// import {Fill, Stroke, Circle, Style} from 'ol/style';
+declare var Feature, Overlay,View,Point,TileJSON,VectorSource,Icon,Style : any ; 
+
+// import 'ol/ol.css';
+// import Feature from 'ol/Feature';
+// import Map from 'ol/Map';
+// import Overlay from 'ol/Overlay';
+// import View from 'ol/View';
+// import Point from 'ol/geom/Point';
+// import {Tile as TileLayer,Vector as VectorLayer} from 'ol/layer';
+// import TileJSON from 'ol/source/TileJSON';
+// import VectorSource from 'ol/source/Vector';
+// // import {Icon, Style} from 'ol/style';
+// import LineString from 'ol/geom/LineString';
+// import {fromLonLat} from 'ol/proj';
+// import OSM from 'ol/source/OSM';
+// import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
+
+@Component({
+  selector: 'app-dealers-info',
+  templateUrl: './dealers-info.component.html',
+  styleUrls: ['./dealers-info.component.scss']
+})
+export class DealersInfoComponent implements OnInit {
+  dealer_load: { "uId": any; "loggedIn_id": any; "status": any; };
+  show1: boolean = false;
+  show2: boolean = true;
+  show3: boolean = false;
+  first_name: any;
+  last_name: any;
+  passwordd: any;
+  org_name: any;
+  emaill: any;
+  phone: any;
+  executed: any;
+  $event2: any;
+  dealer: any;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  // contacts: Contact[]=[];
+  // contact: Contact;
+  login1: any;
+  cond: Boolean = false;
+  mess2: any;
+  mess: any;
+  otp: any;
+  str: boolean = false;
+  password2: any;
+  cust_load: any;
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  custumer: any;
+  mb: any;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  myInput: any;
+  superAdmin: Boolean = false;
+  before: any;
+  dealers_info = [];
+  modelChanged: Subject<string> = new Subject<string>();
+  errorMsg: boolean;
+  serviceResponse: string;
+  Load: boolean;
+  url: any;
+  showNav: boolean=false;
+  constructor(private contactService: ContactService, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog) {
+    
+    this.modelChanged
+      .debounceTime(1000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+       this.dealerDetail();
+      });
+
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    this.showDemoVideo();
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    this.dealerDetail();
+    // this.testOpenLayerMap();
+
+    $(document).ready(function () {
+      $('.js-pscroll').each(function(){
+        var ps = new PerfectScrollbar(this);
+  
+        $(window).on('resize', function(){
+          ps.update();
+        })
+  
+        $(this).on('ps-x-reach-start', function(){
+          $(this).parent().find('.table100-firstcol').removeClass('shadow-table100-firstcol');
+        });
+  
+        $(this).on('ps-scroll-x', function(){
+          $(this).parent().find('.table100-firstcol').addClass('shadow-table100-firstcol');
+        });
+  
+      });
+    })
+  }
+
+
+  stre() {
+    this.str = true;
+  }
+  stren() {
+    this.str = false;
+  }
+
+ 
+
+  clear() {
+    this.first_name = ' '
+    this.last_name = ' '
+    this.emaill = null
+    this.phone = null
+  }
+
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+  }
+
+
+  table1ch() {
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i, td1;
+      input = document.getElementById("myInput");
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[1];
+        td1 = tr[i].getElementsByTagName("td")[0]
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+
+
+
+  onChange(dealer, ev) {
+
+    // console.log(ev.checked);
+    let dealer_status = ev.checked;
+    let dealer_id = dealer._id;
+    // let dealer_activity = dealer.status; 
+
+
+    this.dealer_load = {
+      "uId": dealer_id,
+      "loggedIn_id": this.useridd,
+      "status": dealer_status
+    }
+    // console.log(dealer_id);
+    // console.log(this.dealer_load);
+    this.contactService.custStatus(this.dealer_load)
+      .subscribe(res => {
+        let a = res;
+      }, err => {
+      })
+  }
+
+
+  dealerDetail() {
+    this.Load = true;
+   console.log("Inside function",this.myInput);
+    this.contactService.dealer_Info1(this.useridd, this.skip, this.limit,this.myInput,null)
+      .subscribe(res => {
+        // console.log(res);
+        this.Load = false ;
+        this.dealers_info = res;
+        console.log('this.dealers_info',this.dealers_info);
+        // console.log("SuccessLog");
+      }, err => {
+        this.Load = false;
+        this.dealers_info=[];
+        this.firstcall = true;
+        this.lastcall = false;
+      })
+
+  }
+
+
+  addDealer() {   
+          let dialogRef = this.dialog.open(AddDealerComponent, {
+            width: '800px',
+          });
+      
+          dialogRef.afterClosed().subscribe(result => {     
+            if (result == "succ") {     
+              this.ngOnInit();   
+            }
+          });
+  }
+
+
+
+  edit_DealerDetail(dealerEdit) {
+    // console.log(dealerEdit);
+      console.log(dealerEdit);
+      dealerEdit.ID = 'edit'; 
+      console.log(dealerEdit);
+    let dialogRef = this.dialog.open(EditDealerComponent, {
+      width: '500px',
+      height: '600px',
+      data: { dealer_payload: dealerEdit }
+    });
+
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // console.log(result);
+      if (result == "success") {
+        this.ngOnInit();
+
+      }
+    });
+
+  }
+
+  delete_DealerDetail(dealerDelete){
+    var  that =this;
+    console.log(dealerDelete);
+    dealerDelete.ID = 'delete';
+
+    let dialogRef = this.dialog.open(EditDealerComponent, {
+      width: '500px',
+      height: '600px',
+      data: { dealer_payload: dealerDelete }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+      // console.log(result);
+      if (result == "yes") {
+        console.log("DealerId=>",dealerDelete._id)
+        var deletePayload = {
+          'userId' : dealerDelete._id,
+          'deleteuser' : true
+        }
+        this.contactService.deleteCostumer(deletePayload)
+          .subscribe(res=>{
+            console.log(res);
+            this.serviceResponse = "User Deleted"; 
+            this.errorMsg =true;
+            this.dealerDetail();
+           var success =  setTimeout(function(){
+             clearInterval(success);
+              that.errorMsg = false; 
+           },5000)
+            
+          },err=>{
+            this.serviceResponse = "Please try after somrtime";
+            var error =  setTimeout(function(){
+              clearInterval(error);
+               that.errorMsg = false; 
+            },5000)
+          })
+
+      }
+
+      if (result == "no") {
+        console.log(result);
+      }
+
+    });
+
+
+
+    
+  }
+  dealerToken: any;
+  // dealer switch function
+  dealerSwitch(dlr) {
+    // console.log(dlr);
+    localStorage.setItem("DealerObj=>", dlr._id);
+    localStorage.removeItem("in1");
+    this.contactService.getcustToken(dlr._id).subscribe(
+      data => {
+        this.dealerToken = data
+        var superAdminToken = localStorage.getItem('token');
+        localStorage.setItem('superAdminToken', superAdminToken);
+        localStorage.setItem('token', this.dealerToken.custumer_token);
+
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        window.localStorage['Dealer'] = 'ON';
+        localStorage.setItem('superadmin', "ON");
+
+
+        if (window.localStorage['DataLoaded'] = 'True') {
+          this.router.navigateByUrl("const?_status=" + "OK");
+        }
+      });
+  }
+
+  skip: number = 1;
+  limit: number = 10;
+
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    // this.sidebarData();
+    this.dealerDetail();
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 1) {
+      this.skip -= 1;
+      this.lastcall = false;
+      this.firstcall = false;
+      // this.sidebarData();
+      this.dealerDetail();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+
+  searchFilter(text: string) {
+    this.modelChanged.next(text);
+  }
+
+  viewDocuments(docs){
+    console.log("Documents=>", docs);
+    var  that =this;
+    docs.ID = 'viewDoc';
+    console.log(docs);
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '900px',
+      data: { dealer_payload: docs }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "yes") {
+
+      }
+
+      if (result == "no") {
+     
+      }
+
+      if(result == 'imageupdated'){
+        swal(
+          'Updated',
+          'Documents has been Updated.',
+          'success'
+        ) 
+        this.dealerDetail()
+
+      }
+    });
+
+    
+  }
+
+  showMenu = environment.showLandingpageMenu;
+  showDemoVideo(){
+    let split1 = document.URL.split('//')[1];
+    console.log(split1,document);
+    let split2 = split1.split('/')[0];
+    let splitForStyle = split1.split('/')[1];
+    this.url =  split2;
+    console.log("split2",this.url);
+   
+    
+      for(var i = 0; i <this.showMenu.length;i++){
+        if (this.url == 'www.oneqlik.in') {
+          this.showNav = true;
+            return;
+        } else {
+          this.showNav = false;
+        }
+      }
+  
+  }
+  data_descip :any;
+
+  user_permission(dealer){
+    console.log("user Account");
+
+    console.log("Inside reset",dealer);
+    let dialogRef = this.dialog.open(DealerPermissionComponent, {
+      width: '400px',
+      data : dealer
+    //  height: '600px', 
+
+    });
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "succ") {
+        // this.tost1("password_changed");
+        this.data_descip = "Dealer Permission set !!!";
+        launch_toast();     
+        this.ngOnInit();
+
+      }
+
+      if (result == "close") {
+      }
+    });
+  }
+
+
+  // testOpenLayerMap 
+  osMap : any;
+
+  // testOpenLayerMap() {
+  //   this.contactService.getlatLong().subscribe(res => {
+  //     console.log(res);
+  //     let lat = parseFloat(res.lat);
+  //     let lng = parseFloat(res.lon);
+  //     console.log({ "lattitude": lat, "longitude": lng });
+  //     this.simpleReverseGeocoding(85.130690, 25.611220);
+  //     var that = this; 
+
+  //     var map = new ol.Map({
+  //       layers: [
+  //         new ol.layer.Tile({
+  //           source: new ol.source.OSM()
+  //         })
+  //       ],
+  //       target: 'testOpenLayerMap',
+  //       view: new ol.View({
+  //         center: ol.proj.fromLonLat([lng, lat]),
+  //         zoom: 15
+  //       })
+  //     });
+  //   })
+   
+
+
+
+
+  // }
+
+  // simpleReverseGeocoding(lon, lat) {
+  //   fetch('http://nominatim.openstreetmap.org/reverse?format=json&lon=' + lon + '&lat=' + lat).then(function(response) {
+  //     return response.json();
+  //   }).then(function(json) {
+  //     var testAddress = json.display_name;
+  //     console.log('testAddress=>',testAddress);
+  //   })
+  // }
+
+
+  addPoints(data){
+    let dialogRef = this.dialog.open(PointShareComponent, {
+      width: '300px',     
+      data: {"userInfo":data}                      
+    });
+
+    dialogRef.afterClosed().subscribe(result => {   
+      // console.log(result);
+      if(result == 'added'){
+        this.data_descip =  "Point Added";
+        launch_toast();       
+      }
+       
+         function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }    
+    })  
+  }
+
+
+  availablePoint(dObj){
+    // console.log('dObj=>',dObj);
+
+    var avlpoint = dObj.point_Allocated  - (dObj.point_Shared_Other + dObj.total_vehicle)
+    return avlpoint ; 
+
+  }
+  // exportPdf(){
+
+
+  //   html2canvas(document.getElementById('deviceTable'), {
+  //      onrendered: function (canvas) {
+  //         var data = canvas.toDataURL();
+  //         console.log(data);
+  //         var docDefinition = {
+  //             content: [{
+  //                 image: data,
+  //                 width: 1000
+  //             }]
+  //         };
+  //         pdfMake.createPdf(docDefinition).download("Table.pdf");
+  //     }
+  // });
+  
+  
+  // }
+
+  exportPdf(){
+    var customers  = [];
+     var data_heading = ['Name','Email','Phone','User ID','Password',];
+     customers.push(data_heading);
+    
+     for(var k =0;k<this.dealers_info.length;k++){
+       var colData = [(this.dealers_info[k].first_name + " "+ this.dealers_info[k].last_name),this.dealers_info[k].email,this.dealers_info[k].phone,this.dealers_info[k].user_id?this.dealers_info[k].user_id:'--',this.dealers_info[k].pass?this.dealers_info[k].pass:'--']
+       customers.push(colData);
+     }
+      // var json = '[["Customer Id","Name","Country"],[1,"John Hammond","United States"],[2,"Mudassar Khan","India"],[3,"Suzanne Mathews","France"],[4,"Robert Schidner","Russia"]]';
+    console.log(customers);
+      //Convert JSON string to JSON object.
+      // var customers = eval(json);
+      //Convert JSON to HTML Table.
+      var table = document.createElement("TABLE") as HTMLTableElement;
+      table.border = "1";
+      table.id = "tblCustomers";
+
+      //Get the count of columns.
+      var columnCount = customers[0].length;
+
+      //Add the header row.
+     
+      var row = table.insertRow(-1);
+      debugger;
+      for (var i = 0; i < columnCount; i++) {
+          var headerCell = document.createElement("TH");
+          headerCell.innerHTML = customers[0][i]
+          console.log();
+          row.appendChild(headerCell);
+        
+      }
+
+   
+      //Add the data rows.
+        for (var i = 1; i < customers.length; i++) {
+          row = table.insertRow(-1);
+          for (var j = 0; j < columnCount; j++) {
+              var cell = row.insertCell(-1);
+              cell.innerHTML = customers[i][j];
+          }
+      }
+     
+
+      //Append the Table to the HTML DIV.
+      var dvTable = document.getElementById("dvTable");
+      dvTable.innerHTML = "";
+      dvTable.appendChild(table);
+
+      console.log(table);
+      //Convert Table to PDF.
+    
+      html2canvas(document.getElementById('dvTable'), {
+        scale: 2,
+        dpi: 144,   
+        onrendered: function (canvas) {
+              var data = canvas.toDataURL();
+              var docDefinition = {
+                  content: [{
+                      image: data,
+                      width: 900
+                  }]
+              };
+              pdfMake.createPdf(docDefinition).download("JSON.pdf");
+
+              //Remove the Table.
+              dvTable.innerHTML = "";
+          }
+      });
+  
+  }
+
+  dealerPhone(dlr){
+  var dphn = '';
+  if(dlr.std_code != undefined){
+     dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+     return dphn ; 
+  }else{
+     dphn = dlr.phone ; 
+    return dphn ; 
+  }
+}
+
+accountStatus:boolean=true;
+accountStatusonChange(dealerObj,event){
+  var that = this ; 
+  console.log(dealerObj,event.checked);
+  var payload = {
+    accountSuspended : event.checked,
+    acoountId : dealerObj._id  ,
+    suspendedBy : 'distributer' 
+  }
+
+  swal("Are you sure ?", "Do you want to change account status ?").then((ans)=>{
+    console.log(ans);
+    that.contactService.accountSuspend(payload).subscribe(res=>{
+      console.log(res);
+      that.dealerDetail();
+      that.data_descip =  "Account Status Changed";
+      launch_toast();
+      function launch_toast() {
+        // console.log(divid);
+         var x = document.getElementById("toast")
+         //console.log(x);
+         x.className = "show";
+         setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+     }    
+    })
+  
+  },err=>{
+    that.dealerDetail();
+    console.log(err);
+  });
+
+ 
+}
+
+}
+
diff --git a/src/app/delete-group/delete-group.component.html b/src/app/delete-group/delete-group.component.html
new file mode 100644
index 0000000..57081c3
--- /dev/null
+++ b/src/app/delete-group/delete-group.component.html
@@ -0,0 +1,14 @@
+<div class="grpStyle">
+  <md-toolbar style="background: white;padding-left: 143px;background: white;
+  color: #676464;
+  font-weight: 500;">{{'Delete Group' | translate}}</md-toolbar>
+</div>
+<div style="margin: 10px;">
+<p>{{'Are you sure to delete group ??' | translate}}</p>
+</div>
+<div>
+<md-dialog-actions>
+  <button md-raised-button (click)="onCloseConfirm()">{{'DELETE' | translate}}</button>&nbsp;
+  <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+</md-dialog-actions>
+</div>
diff --git a/src/app/delete-group/delete-group.component.scss b/src/app/delete-group/delete-group.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/delete-group/delete-group.component.spec.ts b/src/app/delete-group/delete-group.component.spec.ts
new file mode 100644
index 0000000..8af25c4
--- /dev/null
+++ b/src/app/delete-group/delete-group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteGroupComponent } from './delete-group.component';
+
+describe('DeleteGroupComponent', () => {
+  let component: DeleteGroupComponent;
+  let fixture: ComponentFixture<DeleteGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeleteGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/delete-group/delete-group.component.ts b/src/app/delete-group/delete-group.component.ts
new file mode 100644
index 0000000..e17815e
--- /dev/null
+++ b/src/app/delete-group/delete-group.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit,Inject} from '@angular/core';
+import { MdDialog,MdDialogRef,MD_DIALOG_DATA } from '@angular/material';
+import {ContactService} from '../contact.service';
+
+
+@Component({
+  selector: 'app-delete-group',
+  templateUrl: './delete-group.component.html',
+  styleUrls: ['./delete-group.component.scss']
+})
+export class DeleteGroupComponent implements OnInit {
+  devDelete:any;
+
+  constructor(public thisDialogRef: MdDialogRef<DeleteGroupComponent>, private contactService:ContactService, @Inject(MD_DIALOG_DATA) public data: any) {
+    this.devDelete = data.devId;
+   }
+
+  ngOnInit() {
+
+  }
+
+  onCloseConfirm(){
+
+    // console.log("deleted")
+      this.contactService.deleteGroup(this.devDelete).subscribe(res => {
+       
+      var a = res;
+      // console.log(a);
+      if(a==200){
+        // console.log("Group deleted Succesfully");
+       this.thisDialogRef.close("success");
+    }  
+
+      },
+      err=> {
+        // console.log("Check your Internet Connection");
+      })
+
+
+  }
+
+  onCloseCancel(){
+    // console.log("cancel button clicked");
+    this.thisDialogRef.close('Cancel');
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/app/details/details.component.css b/src/app/details/details.component.css
new file mode 100644
index 0000000..815c31f
--- /dev/null
+++ b/src/app/details/details.component.css
@@ -0,0 +1,123 @@
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 9%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+
diff --git a/src/app/details/details.component.html b/src/app/details/details.component.html
new file mode 100644
index 0000000..beea00b
--- /dev/null
+++ b/src/app/details/details.component.html
@@ -0,0 +1,232 @@
+<html>
+  
+      <head>
+          <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+         
+        </head>
+      <body>
+         
+          
+    <div class="upper">
+        <md-toolbar>My App</md-toolbar>
+    <md-toolbar flex style="background-color:white;width: 100%;" >
+        
+              <img src="../../assets/image/a.jpg" 
+              style=
+              "width:20%;padding-top: 8px;">
+              
+            <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                         </ul>
+              
+                         <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
+                          <!--    <li  style="float:right;" >
+                                 <div class="dropdown">
+                                       <img src="../../assets/image/us.jpg" height=30px>
+                                       <div class="dropdown-content">
+                                           <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
+                                           <h6><p id="insert4"></p></h6>
+                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
+                                            &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
+                                            
+                                               
+                                          </div>
+                                     </div>
+                            
+                             </li> -->
+                             <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                <!-- <b> <h4><p id="insert"></p></h4></b>
+                                <h6><p id="insert2"></p></h6> -->
+                                &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                   <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                              </md-menu>
+                              
+                              <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                               <!--   <md-icon>more_vert</md-icon> -->
+                                 <img src="../../assets/image/us.jpg" height=30px>
+                              </button>
+                       </ul>
+                             
+                      
+                   
+                           <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                           <!--     <li style="width:27%;float:right">
+                                 <div class="dropdown">
+                                       <img src="../../assets/image/us.jpg" height=30px>
+                                       <div class="dropdown-content">
+                                           <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
+                                           <h6><p id="insert2"></p></h6>
+                                           &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                              <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                               
+                                          </div>
+                                     </div>
+                               </li>
+                               -->
+                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                 <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                 <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                 <!-- <b> <h4><p id="insert"></p></h4></b>
+                                 <h6><p id="insert2"></p></h6> -->
+                                 &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                    <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                               </md-menu>
+                               
+                               <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                <!--   <md-icon>more_vert</md-icon> -->
+                                  <img src="../../assets/image/us.jpg" height=30px>
+                               </button>
+                           
+                         </ul>
+                               
+            
+           </md-toolbar>
+    </div>
+    
+<md-card >
+    <md-card-header>
+    <p style="margin-left:31px;margin-top:14px;float:left"><b>Device ID - </b>1234567890 &nbsp;&nbsp;&nbsp;&nbsp;<b>Device Name - </b>Gps</p>
+    <br><br><br></md-card-header>
+    
+<md-tab-group>
+  <md-tab label="Datamatrix">
+     <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;float:left;" (click)="openDialog()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
+    <!--  You chose: <i>{{animal}}</i> --><br>
+    <!--  You chose: <i>{{animal}}</i> --><br>
+
+    <div class="newspaper">
+
+
+  <h6 *ngFor="let ls of l" >
+     <h5><b><!-- &#9758; &#10132; -->   &#10140; </b>{{ ls}} </h5>
+    </h6>
+
+
+    </div>
+  
+  </md-tab>
+  <md-tab label="Rule">
+
+      <table class="table table-striped table-hover ">
+          
+          <thead style="background-color:#A2C523;color: white;">
+            <tr>
+              <th align="left">Action</th>
+              <th align="left">User Info</th>
+              <th align="left">Condition</th>
+              <th align="left">value</th>
+            </tr>
+          </thead>
+        
+          <tbody>
+      
+      <!--     <tr *ngFor="let device of devices" (click)="vewdev(device.Device_Name)">
+            <td>{{device.Device_ID }}</td>
+              <td>{{ device.Device_Name }}</td>
+              <td>{{device.type_of_device }}</td>
+              <td> {{device.Device_Des}}</td>
+          </tr> -->
+
+          <tr>
+                <td align="left">SMS</td>
+                <td align="left">9458075558</td>
+                <td align="left">Equal</td>
+                <td align="left">9:00 Pm</td>
+                <th align="left"> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
+                </th>
+            </tr>  
+          </tbody> 
+        </table> 
+        <br> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent; position: fixed;bottom: 0;right: 0;" (click)="openDialog2()">   <md-icon style="float:left;width:30px;height:30px;">add</md-icon></button></p>
+        
+  </md-tab>
+  <md-tab label="Scheduler">
+      <expansion-panels-container>
+          <expansion-panel (onCancel)='resetForm()' (onSubmit)='saveForm()'>
+              <expansion-panel-title>
+                  Add Scheduler
+              </expansion-panel-title>
+       
+              <expansion-panel-description-hidden>
+                  
+    
+              </expansion-panel-description-hidden>
+       
+              <expansion-panel-description-toggled>
+                  Adding
+              </expansion-panel-description-toggled>
+       
+              <expansion-panel-content style="height:30px">
+
+                <form>
+                <md-select style="margin-top:-18px;width:45%;float:left;margin-left:-31%;" name="typdev" placeholder="Select Action" [(ngModel)]="neww">
+                  <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+                  {{ food.viewValue }}
+                  </md-option>
+              </md-select>
+                <material-datepicker [(date)]="yourModelDate"></material-datepicker><br><br>
+                <md-select style="margin-top:-18px;width:45%;float:left;margin-left:-31%;" name="typdev" placeholder="Repitation" [(ngModel)]="neww">
+                    <md-option *ngFor="let foodd of foodss" [value]="foodd.viewValue" >
+                    {{ foodd.viewValue }}
+                    </md-option>
+                </md-select>
+                
+                </form>
+              
+              </expansion-panel-content>
+       
+              <expansion-panel-buttons>
+                  <!-- <button (click)='pancel.cancel()'>Cancel</button> -->
+<!--                   <button (click)='pancel.submit()'>Submit</button>
+ -->
+ <input type="submit" class="btn btn btn-success" style="float:center;" value="Generate Sheduler" (click)="addContact()" />
+ 
+</expansion-panel-buttons>
+          </expansion-panel>
+       
+      </expansion-panels-container>
+   <!--  <h6 *ngFor="let ls of l" >
+      <h5><b></b>{{ ls}} </h5>
+     </h6> -->
+
+<!--      <form class="form-group"  #lgForm="ngForm" style="float:left">   
+     <md-select name="typdev" placeholder="Select Action" [(ngModel)]="new">
+          <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+          {{ food.viewValue }}
+          </md-option>
+      </md-select>
+      <material-datepicker [(date)]="yourModelDate"></material-datepicker>
+     </form> -->
+      <br><table class="w3-table w3-striped">
+      <tr>
+        <th>Action</th>
+        <th>Selected Date</th>
+        <th>Selected Time</th>
+        <th>Repetation</th>
+      </tr>
+      <tr>
+        <td>SMS</td>
+        <td>06/10/2017</td>
+        <td>10:20 Am</td>
+        <td>Daily</td>
+        <td> <p><button data-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete()">   <md-icon>delete</md-icon></button></p>
+        </td> 
+      </tr>
+    </table>
+ 
+
+
+
+
+
+
+
+    
+  </md-tab>
+  <md-tab label="Intigrate">Intigrate</md-tab>
+</md-tab-group>
+</md-card>
+
+
+</body>
\ No newline at end of file
diff --git a/src/app/details/details.component.spec.ts b/src/app/details/details.component.spec.ts
new file mode 100644
index 0000000..35a2470
--- /dev/null
+++ b/src/app/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/details/details.component.ts b/src/app/details/details.component.ts
new file mode 100644
index 0000000..c7deb2f
--- /dev/null
+++ b/src/app/details/details.component.ts
@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {GmapComponent} from '../gmap/gmap.component';
+import {RuleComponent} from '../rule/rule.component';
+import { ExpansionPanelsModule } from 'ng2-expansion-panels';
+import { DateTimePickerModule } from 'ng-pick-datetime';
+import { DatepickerModule as YourAlias } from 'angular2-material-datepicker'
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.css']
+})
+export class DetailsComponent implements OnInit {
+  animal: string;
+  name: string;
+  foods = [
+    {value: 'SMS', viewValue: 'SMS'},
+    {value: 'Email', viewValue: 'Email'},
+    {value: 'Push', viewValue: 'Push Notification'},
+  ];
+  foodss = [
+    {value: 'Daily', viewValue: 'Daily'},
+    {value: 'Weekly', viewValue: 'Weekly'},
+    {value: 'Monthly', viewValue: 'Monthly'},
+    {value: 'Yearly', viewValue: 'Yearly'},
+  ];
+  delete(){
+    // console.log("DELETE RUNNING");
+  }
+  constructor(public dialog: MdDialog) { }
+  openDialog(): void {
+    let dialogRef = this.dialog.open(GmapComponent, {
+      width: '400px',
+      data: { name: "1234567890", animal: this.animal }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log('The dialog was closed');
+      this.animal = result;
+      // console.log(this.animal);
+      this.l.push(this.animal)
+    });
+  }
+  openDialog2(): void {
+    let dialogRef = this.dialog.open(RuleComponent, {
+      width: '700px',
+      //data: { name: "1234567890", animal: this.animal }
+    });
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log('The dialog was closed');
+     // this.animal = result;
+     // console.log(this.animal);
+     // this.l.push(this.animal)
+    });
+  }
+ l :any;
+  logout(){
+
+  }
+  resetForm(){
+
+  }
+  saveForm(){
+    
+  }
+  addContact(){
+    
+  }
+  neww:any;
+  yourModelDate:any;
+  fs:any;
+  ls:any;
+  or:any
+  ngOnInit() {
+    this.fs=1;
+    this.ls=2;
+    this.or=3
+  }
+
+}
diff --git a/src/app/device-entry/device-entry.component.html b/src/app/device-entry/device-entry.component.html
new file mode 100644
index 0000000..295b189
--- /dev/null
+++ b/src/app/device-entry/device-entry.component.html
@@ -0,0 +1,151 @@
+<app-all-menus></app-all-menus>
+<div class="container">
+   <div class="headerStyle">
+      <span>{{'Device Inventory' | translate}}</span>
+   </div>
+   <div class="formStyle">
+      <form [formGroup]="Inventory">
+         <div class="entryFields">
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <!-- <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" id="today_date" mdInput placeholder="mm/dd/yyyy" formControlName="systemDate" type="date">   -->
+                  <input id="today_date" bsDatepicker [bsConfig]="bsConfig" class="form-control form-control-sm" style="display: inline-grid;" name="Expiration date" placeholder="{{'System Date' | translate}}" formControlName="systemDate" mdInput  type="text" >
+                </md-form-field>
+               </div>
+               <div class="col-6">
+                  <md-form-field>
+                  <input placeholder="{{'Device IMEI' | translate}}" type = "Number" formControlName="Device_ID" minlength="15" maxlength="15" mdInput>
+                 </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                  <md-form-field>
+                  <input placeholder="{{'Vehicle Number' | translate}}" type = "text" formControlName="Device_Name" mdInput>
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'Chesis Number (Last 5 digits)' | translate}}" type = "text" formControlName="chessisNumber" mdInput>
+                </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'SIM Number 1' | translate}}" type = "Number" mdInput formControlName="sim_number_1">
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'SIM Provider 1' | translate}}" type = "text" mdInput formControlName="sim_provider_1">
+                  </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'SIM Number 2' | translate}}" type = "Number" mdInput formControlName="sim_number_2">
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'SIM Provider 2' | translate}}" type = "text" mdInput formControlName="sim_provider_2">
+                  </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'RTO' | translate}}" type = "text" mdInput formControlName="approvingRTO">
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'Owner Number (OTP)' | translate}}" type = "Number" mdInput formControlName="ownerNumber">
+                  </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'Alternate Number' | translate}}" type = "Number" mdInput formControlName="Alternatenumber">
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="{{'Email' | translate}}" type = "text" mdInput formControlName="email">
+                  </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="Costumer's First name" type = "text" mdInput formControlName="costumer_first_name">
+                  </md-form-field>
+               </div>
+               <div class="col-6">
+                 <md-form-field>
+                  <input placeholder="Costumer's Last name" type = "text" mdInput formControlName="costumer_last_name">
+                  </md-form-field>
+               </div>
+            </div>
+            <div class="row">
+               <div class="col-6">
+                  <md-select formControlName="status" placeholder="--Status--" style="width: 202px;" >
+                      <md-option *ngFor="let vhstat of vhStatus" [value]="vhstat">
+                        {{vhstat}}
+                      </md-option>
+                    </md-select>
+               </div>
+               <div class="col-6">
+                     <md-form-field>
+                      <input placeholder="Dealer's name" type = "text" mdInput formControlName="dealerName">
+                      </md-form-field>
+                   </div>
+               <!-- <div class="col-6">
+                  <md-select formControlName="dealerName" placeholder="--Dealers--" style="width: 202px;">
+                      <md-option *ngFor="let dealer of DealerName" [value]="dealer._id">
+                        {{dealer.first_name}}   {{dealer.last_name}}
+                      </md-option>
+                    </md-select>        
+               </div> -->
+            </div>
+            <div class="row">
+               <div class="col-6">
+                  <md-select formControlName="trackingSoft" placeholder="--{{'Tracking Software' | translate}}--" style="width: 202px;">
+                     <md-option *ngFor="let track of tracking_software" [value]="track">
+                       {{track}}
+                     </md-option>
+                   </md-select>
+               </div>
+               <div class="col-6">              
+                  <md-form-field>
+                     <input placeholder="{{'Engine Number' | translate}}" type="text" mdInput formControlName="engine_number">
+                  </md-form-field>
+               </div>
+            </div>    
+         </div>
+      </form>
+      <div class="row">
+         <div class="col-6" style="text-align: center">
+               <md-input-container>
+                     <input mdInput placeholder="{{'Device Model*' | translate}}" [mdAutocomplete]="tdAutoDevModel" name="state" #state="ngModel"
+                       [(ngModel)]="deviceModel" (ngModelChange)="filterDeviceModelState(deviceModel)">
+                     <md-autocomplete #tdAutoDevModel="mdAutocomplete">
+                       <md-option *ngFor="let model of dataDevModel" [value]="model.device_type" (click)="selectedDevModel(model)">
+                         <span>{{model.device_type}}</span>
+                       </md-option>
+                     </md-autocomplete>
+                   </md-input-container>
+         </div>
+      </div>
+      <div class="row">
+            <div class="col-12" style="margin-top: 50px;text-align: center;">
+               <button *ngIf="!buttonToggle" md-raised-button style="width: 190px; background: #31428c; color: white;" (click)="submitData()"> {{'Save' | translate}} </button>
+               <button *ngIf="buttonToggle" md-raised-button style="width: 190px; background: #31428c; color: white;" (click)="updateData()"> {{'UPDATE' | translate}} </button>
+            </div>
+         </div>
+   </div>
+</div>
\ No newline at end of file
diff --git a/src/app/device-entry/device-entry.component.scss b/src/app/device-entry/device-entry.component.scss
new file mode 100644
index 0000000..919d3b2
--- /dev/null
+++ b/src/app/device-entry/device-entry.component.scss
@@ -0,0 +1,53 @@
+.container{
+    margin-top: 10px;
+    .headerStyle{
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        background: MD_DIALOG_DATA;
+        color: white;
+        border-radius: 4px;
+    }
+
+    .entryFields{
+        .row{
+            text-align: center;
+        }
+    }
+
+    .formStyle{
+        border: 1px solid #e4e6e5;
+        border-radius: 4px;
+    }
+   
+  }
+
+  .mainBody{
+
+  }
+
+  
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/device-entry/device-entry.component.spec.ts b/src/app/device-entry/device-entry.component.spec.ts
new file mode 100644
index 0000000..b64aa15
--- /dev/null
+++ b/src/app/device-entry/device-entry.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceEntryComponent } from './device-entry.component';
+
+describe('DeviceEntryComponent', () => {
+  let component: DeviceEntryComponent;
+  let fixture: ComponentFixture<DeviceEntryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceEntryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-entry/device-entry.component.ts b/src/app/device-entry/device-entry.component.ts
new file mode 100644
index 0000000..f22ae70
--- /dev/null
+++ b/src/app/device-entry/device-entry.component.ts
@@ -0,0 +1,268 @@
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { MdSnackBar } from '@angular/material';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+
+@Component({
+  selector: 'app-device-entry',
+  templateUrl: './device-entry.component.html',
+  styleUrls: ['./device-entry.component.scss']
+})
+export class DeviceEntryComponent implements OnInit {
+  Inventory: FormGroup;
+  today_date = new Date();
+  colorTheme = 'theme-dark-blue';
+
+  bsConfig: Partial<BsDatepickerConfig>;
+  vhStatus = ['Tagged','Untagged'];
+  tracking_software = ['Yes','No'];
+  vstattt :any;
+  supAdminId: any;
+  userid: any;
+  DealerName: any;
+  InvantoryObject :any;
+  buttonToggle:boolean =false;
+  objectID: any;
+  dataDevModel: any[];
+  deviceModel:any;
+  DeviceModelValue: any;
+  constructor(
+    public formBuilder: FormBuilder,public snackBar: MdSnackBar,public contactService: ContactService, private router: Router,
+  ) {
+
+    
+    this.Inventory = formBuilder.group({
+      systemDate : [this.today_date,Validators.required],
+      Device_ID: ['',Validators.required],
+      Device_Name: ['', Validators.required],
+      chessisNumber : ['',Validators.required],
+      sim_number_1 : ['',Validators.required],
+      sim_provider_1 : ['IDEA'],
+      sim_number_2 : [''],
+      sim_provider_2 : ['BSNL'],
+      approvingRTO : [''],
+      ownerNumber : ['',Validators.required],
+      Alternatenumber : [''],
+      email : [''],
+      costumer_first_name : ['',Validators.required],
+      costumer_last_name : [''],
+      status:[this.vhStatus[1]],
+      trackingSoft : [this.tracking_software[1]],
+      dealerName :[''],
+      engine_number:['']
+    })
+
+    this.InvantoryObject = localStorage.getItem('invantoryObject');
+    if(this.InvantoryObject){
+       var parsedValue =  JSON.parse(this.InvantoryObject);
+      this.buttonToggle =true;
+      this.objectID = parsedValue._id;
+     
+      console.log(parsedValue);
+        var datetoedit = new Date(parsedValue.systemDate);
+        this.Inventory = formBuilder.group({
+        systemDate : [datetoedit,Validators.required],
+        Device_ID: [parsedValue.Device_ID,Validators.required],
+        Device_Name: [parsedValue.Device_Name, Validators.required],
+        chessisNumber : [parsedValue.chessisNumber,Validators.required],
+        sim_number_1 : [parsedValue.sim_number_1,Validators.required],
+        sim_provider_1 : [parsedValue.sim_provider_1],
+        sim_number_2 : [parsedValue.sim_number_2],
+        sim_provider_2 : [parsedValue.sim_provider_2],
+        approvingRTO : [parsedValue.approvingRTO],
+        ownerNumber : [parsedValue.ownerNumber,Validators.required],
+        Alternatenumber : [parsedValue.Alternatenumber],
+        email : [parsedValue.email],
+        costumer_first_name : [parsedValue.costumer_first_name,Validators.required],
+        costumer_last_name : [parsedValue.costumer_last_name],
+        status:[parsedValue.status],
+        trackingSoft : [parsedValue.trackingSoft],
+        dealerName :[parsedValue.dealerName],
+        engine_number:[parsedValue.engine_number]
+      })
+      if(parsedValue.device_model != undefined){
+        this.deviceModel = parsedValue.device_model.device_type;
+      }
+   
+    }
+   }
+
+  ngOnInit() {
+   var supAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+   this.userid = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   if(supAdmin == true){
+    this.supAdminId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   }else{
+     this.supAdminId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+
+   }
+   console.log(supAdmin);
+    this.dealerData();
+    this.getDeviceModel()
+  } 
+
+
+  submitData(){
+    console.log('this.Inventory.value',this.dataDevModel);
+    
+   console.log(JSON.stringify(this.Inventory.value.Device_ID).length);
+   if(this.Inventory.invalid){
+    let message1="Please fill all required filled";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    });  
+
+  }
+   else if(JSON.stringify(this.Inventory.value.Device_ID).length != 15){
+    let message1="Device Id must be of 15 digit";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    });  
+
+   }
+   else{
+      // submitData
+      this.Inventory.value.operator_id  = this.userid;
+      this.Inventory.value.superAdmin = this.supAdminId;
+      this.Inventory.value.device_model = this.dataDevModel[0]._id;
+      this.contactService.saveDevInventory(this.Inventory.value).subscribe(res=>{
+        console.log(res);
+        console.log(res.message)
+        let message1=res.message;
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,        
+        });  
+        this.router.navigateByUrl("Inventorylist");
+      },err=>{
+        console.log(err);
+        let message1=JSON.parse(err._body).message;
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+          
+        });  
+  
+      })
+    }
+  }
+
+  dealerData(){
+    this.contactService.getDealersDetails(this.supAdminId).subscribe(res=>{
+      console.log(res);
+      this.DealerName = res;
+    },err=>{
+      console.log(err);
+    })
+
+  }
+ 
+  ngOnDestroy(){
+    localStorage.removeItem('invantoryObject');
+  }
+
+  updateData(){
+    console.log('updateData');
+    console.log(this.Inventory.value);
+   
+    if(this.Inventory.invalid){
+      let message1="Please fill all required filled";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      });  
+
+    } else if(JSON.stringify(this.Inventory.value.Device_ID).length != 15){
+      let message1="Device Id must be of 15 digit";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      });  
+  
+     }
+    
+    else{
+      // submitData
+      // this.Inventory.value.operator_id  = this.userid;
+      this.Inventory.value.superAdmin = this.supAdminId;
+      this.Inventory.value._id = this.objectID;
+      if(this.dataDevModel != undefined){
+        this.Inventory.value.device_model = this.dataDevModel[0]._id;
+      }
+   
+      this.contactService.editDevInventory(this.Inventory.value).subscribe(res=>{
+        console.log(res);
+        console.log(res.message)
+        let message1=res.message;
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,        
+        });  
+        this.router.navigateByUrl("Inventorylist");
+      },err=>{
+        console.log(err);
+        let message1=JSON.parse(err._body).message;
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,         
+        });  
+  
+      })
+    }
+  }
+
+
+  selectedDevModel(devModel){
+    this.DeviceModelValue = devModel;
+    console.log(this.DeviceModelValue);
+  
+  }
+
+  device_Model: any;
+  getDeviceModel() {
+    this.contactService.getDevModel()
+      .subscribe(res => {
+        this.device_Model = res;
+        var devname = [];
+        console.log("Device_Model",this.device_Model);
+        for(var i = 0 ; i<this.device_Model.length;i++){
+          var a = {
+            model :this.device_Model[i].device_type,
+            id : this.device_Model[i]._id
+          }
+          devname.push(a);
+        }
+        console.log(devname);
+      })
+  }
+
+  filterDeviceModelState(devModelVal){ 
+    if(devModelVal == ''){
+      this.dataDevModel=[];
+    }
+    
+    if (devModelVal) {
+      const filterDevModelVal:any = devModelVal;
+      this.dataDevModel=[];
+        console.log('device_model' , this.device_Model);
+       this.dataDevModel = this.device_Model.filter(function(k){
+        
+        var z = k.device_type.toLocaleLowerCase().indexOf(filterDevModelVal.toLocaleLowerCase());
+      //  this.option = this.options[i];
+  
+        return z > -1;    
+      });
+      console.log("this.dataDevModel",this.dataDevModel);
+        return this.dataDevModel;
+  }
+  
+  }
+}
diff --git a/src/app/device-inventory/device-inventory.component.html b/src/app/device-inventory/device-inventory.component.html
new file mode 100644
index 0000000..dfcc3c8
--- /dev/null
+++ b/src/app/device-inventory/device-inventory.component.html
@@ -0,0 +1,540 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+  <div class="accordion" id="accordionExample">
+    <div class="card">
+
+      <div class="row" style="margin:0px">
+        <div class="col-12">
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+        </div>
+      </div>
+
+      <div class="card-header" id="headingOne">
+        <h2 class="mb-0">
+          <button class="btn btn-link" (click)="change()" type="button" data-toggle="collapse" data-target="#collapseZero"
+            aria-expanded="true" aria-controls="collapseZero">
+            Device Inventory
+          </button>
+          
+          <button (click)="addmultiple()" class="btn btn-primary btn-sm float-sm-right ml-2" type="button" data-toggle="collapse"
+          data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Add Multiple Device</button>
+          <!-- *ngIf="checkedList.length>0" -->
+          <button   class="dropdown-toggle btn btn-primary btn-sm float-sm-right ml-2" data-toggle="dropdown" id="dropdownMenuButton" 
+            type="button"><span class="mat-button-wrapper" >
+              Transfer Stock To
+            </span>
+            <div class="mat-button-ripple mat-ripple" md-ripple=""></div>
+            <div class="mat-button-focus-overlay"></div>
+          </button>
+
+          <button class="btn btn-primary btn-sm float-sm-right ml-2" type="button" (click)="change()" data-toggle="collapse"
+            data-target="#collapseSix" aria-expanded="true" aria-controls="collapseSix" (click)="selectTab('sent')">Transaction History</button>
+
+            <div  aria-labelledby="dropdownMenuButton" class="dropdown-menu" x-placement="bottom-start"
+              style="position: absolute; transform: translate3d(92px, 35px, 0px); top: 0px; left: 0px; will-change: transform;">
+              <a data-toggle="collapse" (click)="change()" data-target="#collapseThree"  aria-expanded="true" aria-controls="collapseThree" class="dropdown-item" style="cursor: pointer;"> Dealer</a>
+              <a data-toggle="collapse" (click)="change()" data-target="#collapseFour"  aria-expanded="true" aria-controls="collapseFour" class="dropdown-item" style="cursor: pointer;">Installer</a>
+              <a data-toggle="collapse" (click)="change()" data-target="#collapseFive" aria-expanded="true" aria-controls="collapseFour" class="dropdown-item" style="cursor: pointer;">Distributer</a>
+            </div>
+        </h2>
+      </div>
+
+      <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+        <div class=col-sm-12>
+        <div class="container mt-3 mb-3">
+          <div class="row">
+            <div  *ngFor="let item of inventoryCount" class="card shadow-sm col-sm rounded m-1 p-2 text-center"
+            [ngStyle]="{'background-color': item._id === 'Sold'?'#00c0ef':item._id === 'In Stock'?'#f39c12':'#00a65a'}">
+              <h6>{{item._id}} </h6>
+              <span class="text-white">{{item.TotalDev}}</span>
+            </div>
+            
+          </div>
+        </div>
+         
+          <div class="table-responsive">
+          <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+            <thead>
+              <tr>
+                <th><input type="checkbox"  id="customCheck1" [(ngModel)]="masterSelected" (change)="checkUncheckAll()"></th>
+                <th>{{'IMEI' | translate}}</th>
+                <th>{{'Owner' | translate}}</th>
+                <th>{{'Uploaded By' | translate}}</th>
+                <th>{{'Uploaded Date' | translate}}</th>
+                <th>{{'Bill Date' | translate}}</th>
+                <th>{{'Bill No.' | translate}}</th>
+                <th>{{'State' | translate}}</th>
+                <th>{{'E-SIM Validity' | translate}}</th>
+                <th>{{'Device Model Number' | translate}}</th>
+                <th>{{'Serial Number' | translate}}</th>
+                <th>{{'Iccid No' | translate}}</th>
+                <th>{{'Mob-1' | translate}}</th>
+                <th>{{'Mob-2' | translate}}</th>
+                <th>{{'Status' | translate}}</th>
+                <th>{{'Vendor' | translate}}</th>
+                <th>{{'Purchase Date' | translate}}</th>
+                <th>{{'Sold Date' | translate}}</th>
+                <th>{{'Activation Date' | translate}}</th>
+              </tr>
+            </thead>
+            <tbody *ngIf="showErrorupload">
+              <tr *ngFor="let failedDevices of inventory;index as i;">
+                <input type="checkbox" [(ngModel)]="failedDevices.isSelected" class="ml-2 mt-1"  id="customCheck1" (change)="isAllSelected()">
+                <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                <td style="cursor:pointer">{{failedDevices.Owner?failedDevices.Owner.first_name?failedDevices.Owner.first_name:'':''}} {{failedDevices.Owner?failedDevices.Owner.last_name?failedDevices.Owner.last_name:'':''}}</td>
+                <td style="cursor:pointer">{{failedDevices.uploaded_by.first_name}} {{failedDevices.uploaded_by.last_name}}</td>
+                <td style="cursor:pointer">{{failedDevices.Uploaded_date | date:'medium'}}</td>
+                <td style="cursor:pointer">
+                  <span *ngIf="failedDevices['BillDate']">{{failedDevices['BillDate'] | date:'medium'}}</span>
+                  <span *ngIf="!failedDevices['BillDate']">N/A</span>
+                </td>
+                <td style="cursor:pointer">
+                  <span *ngIf="failedDevices['BillNo']">{{failedDevices['BillNo']}}</span>
+                  <span *ngIf="!failedDevices['BillNo']">N/A</span>
+                </td>
+                <td style="cursor:pointer">
+                  <span *ngIf="failedDevices['State']">{{failedDevices['State']}}</span>
+                  <span *ngIf="!failedDevices['State']">N/A</span>
+                </td>
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices['eSIMValidaity']">{{failedDevices['eSIMValidaity']}}</span>
+                    <span *ngIf="!failedDevices['eSIMValidaity']">N/A</span>
+                  </td>
+                    <td style="cursor:pointer">
+                      <span *ngIf="failedDevices['DeviceModelNo']">{{failedDevices['DeviceModelNo']}}</span>
+                      <span *ngIf="!failedDevices['DeviceModelNo']">N/A</span>
+                    </td>
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices['SerialNo']">{{failedDevices['SerialNo']}}</span>
+                    <span *ngIf="!failedDevices['SerialNo']">N/A</span>
+                  </td>
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices['IccidNo']">{{failedDevices['IccidNo']}}</span>
+                    <span *ngIf="!failedDevices['IccidNo']">N/A</span>
+                  </td>
+
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices['Mob1']">{{failedDevices['Mob1']}}</span>
+                    <span *ngIf="!failedDevices['Mob1']">N/A</span>
+                  </td>
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices['Mob2']">{{failedDevices['Mob2']}}</span>
+                    <span *ngIf="!failedDevices['Mob2']">N/A</span>
+                  </td>
+                <td style="cursor:pointer">{{failedDevices.Status}}</td>
+                <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                <td style="cursor:pointer">{{failedDevices.Purchase_date}}</td>
+                <td style="cursor:pointer">
+                  <span *ngIf="failedDevices.Sold_date">{{failedDevices.Sold_date}}</span>
+                  <span *ngIf="!failedDevices.Sold_date">N/A</span>
+                  </td>
+                  <td style="cursor:pointer">
+                    <span *ngIf="failedDevices.Activation_date">{{failedDevices.Activation_date}}</span>
+                    <span *ngIf="!failedDevices.Activation_date">N/A</span>
+                  </td>
+              
+              </tr>
+            </tbody>
+          </table>
+          </div>
+        </div>
+
+      </div>
+
+
+      <div class="accordion" id="accordionExample">
+      
+        <div class="card">
+         
+          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+            <div class="card-body">
+
+              <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+                <div class="col-sm-12" style="text-align: left;font-size: initial;">
+                  
+                  <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+                    <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;"
+                      class="file-upload btn btn-primary">Browse
+                      for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+                    </label>
+                    <button type="button"
+                      style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+                      class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+                      aria-controls="collapseZero" (click)="uploadExcel()">Upload</button>
+
+                      <button type="button" class="btn btn-primary"  (click)="exportExcels()">Download Sample File</button>
+                   
+                  </div>
+                </div>
+              </div>
+              <div class="row" *ngIf="showErrorupload_1">
+                <div class=col-sm-12>
+                  <table class="table table-striped table-hover "
+                    style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                    <thead>
+                      <tr>
+                        <th>{{'IMEI' | translate}}</th>
+                        <th>{{'Vendor' | translate}}</th>
+                        <th>{{'Bill date' | translate}}</th>
+                        <th>{{'Bill no' | translate}}</th>
+                        <th>{{'Device model no' | translate}}</th>
+                        <th>{{'Iccid no' | translate}}</th>
+                        <th>{{'Mob-1' | translate}}</th>
+                        <th>{{'Mob-2' | translate}}</th>
+                        <th>{{'State' | translate}}</th>
+                        <th>{{'eSIM validaity' | translate}}</th>
+                      </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let failedDevices of uploadJSON">
+                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+                         
+                        </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+
+      <div class="accordion" id="accordionExample">
+      
+        <div class="card">
+      
+          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+            <div class="card-body row">
+              <div class="col-sm-6" style="text-align: right;">
+                <span>{{'Dealer' | translate}} :</span>
+                <md-input-container style="width: 60%;">
+                  <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto" name="state1"
+                    #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
+                  <md-autocomplete #tdAuto="mdAutocomplete">
+                    <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
+                      <span>{{ group.first_name }} {{ group.last_name }}</span>
+                    </md-option>
+                  
+                  </md-autocomplete>
+                </md-input-container>
+               </div>
+               <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
+                <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">Select
+                Excel file<input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file"(change)="uploadedFile($event)" multiple size="50" accept=".xlsx" />
+                </label>
+                <button style="margin: top -7px;margin-left:5px" [disabled]="this.dealerObj==undefined && checkedList.length==0 && faileduploadDevices.length==0" type="button"
+                  class="btn btn-success"  (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
+               
+                  <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"
+                     data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+                    aria-controls="collapseZero" (click)="transfer()">Transfer <i class="fas fa-exchange-alt"></i></button>
+                </div>
+               <div class="col-sm-3 mt-3"  *ngIf="checkedList.length>0">
+                 <button style="margin: top -7px;margin-left:5px" [disabled]="this.dealerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse"
+              data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero" (click)="transfer()">Transfer <i class="fas fa-exchange-alt"></i></button>
+               </div>
+      
+                </div>
+                <div class="row" *ngIf="showErrorupload_1">
+                  <div class=col-sm-12>
+                    <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                      <thead>
+                        <tr>
+                          <th>{{'IMEI' | translate}}</th>
+                          <th>{{'Vendor' | translate}}</th>
+                          <th>{{'Bill date' | translate}}</th>
+                          <th>{{'Bill no' | translate}}</th>
+                          <th>{{'Device model no' | translate}}</th>
+                          <th>{{'Iccid no' | translate}}</th>
+                          <th>{{'Mob-1' | translate}}</th>
+                          <th>{{'Mob-2' | translate}}</th>
+                          <th>{{'State' | translate}}</th>
+                          <th>{{'eSIM validaity' | translate}}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let failedDevices of uploadJSON">
+                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+                
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+
+              </div>
+      
+            </div>
+          </div>
+
+
+          <div class="accordion" id="accordionExample">
+          
+            <div class="card">
+          
+              <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
+                <div class="card-body row">
+                  <div class="col-sm-6" style="text-align: right;">
+                    <span>{{'Installer' | translate}} :</span>
+                    <md-input-container style="width: 60%;">
+                      <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                        #state="ngModel" [(ngModel)]="installerData" (ngModelChange)="filtergrpStatess1(installerData)">
+                      <md-autocomplete #tdAuto0="mdAutocomplete">
+                        <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+                          <span>{{ group.first_name }} {{ group.last_name }}</span>
+                        </md-option>
+                        
+                      </md-autocomplete>
+                    </md-input-container>
+                  </div>
+                  <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
+                    <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">Select
+                     Excel file<input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file" (change)="uploadedFile($event)" multiple size="50" accept=".xlsx" />
+                    </label>
+                    <button style="margin: top -7px;margin-left:5px" [disabled]="this.installerObj==undefined && checkedList.length==0  && faileduploadDevices.length==0" type="button" 
+                      class="btn btn-success"  (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
+                    
+                      <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
+                      aria-expanded="true" aria-controls="collapseZero" (click)="transfer1()">Transfer <i class="fas fa-exchange-alt"></i></button>
+                    </div>
+                  <div class="col-sm-3 mt-3" *ngIf="checkedList.length>0">
+                    <button style="margin: top -7px;margin-left:5px" [disabled]="this.installerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
+                      aria-expanded="true" aria-controls="collapseZero" (click)="transfer1()">Transfer <i class="fas fa-exchange-alt"></i></button>
+                  </div>
+          
+                </div>
+                <div class="row" *ngIf="showErrorupload_1">
+                  <div class=col-sm-12>
+                    <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                      <thead>
+                        <tr>
+                          <th>{{'IMEI' | translate}}</th>
+                          <th>{{'Vendor' | translate}}</th>
+                          <th>{{'Bill date' | translate}}</th>
+                          <th>{{'Bill no' | translate}}</th>
+                          <th>{{'Device model no' | translate}}</th>
+                          <th>{{'Iccid no' | translate}}</th>
+                          <th>{{'Mob-1' | translate}}</th>
+                          <th>{{'Mob-2' | translate}}</th>
+                          <th>{{'State' | translate}}</th>
+                          <th>{{'eSIM validaity' | translate}}</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr *ngFor="let failedDevices of uploadJSON">
+                          <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                          <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                          <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+                
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+
+              </div>
+          
+            </div>
+          </div>
+
+      <div class="accordion" id="accordionExample">
+      
+        <div class="card">
+      
+          <div id="collapseFive" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
+            <div class="card-body row">
+              <div class="col-sm-6" style="text-align: right;">
+                <span>{{'Distributer' | translate}} :</span>
+                <md-input-container style="width: 60%;">
+                  <input mdInput placeholder="{{'Select Distributer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                    #state="ngModel" [(ngModel)]="distributerData" (ngModelChange)="filtergrpStatess2(distributerData)">
+                  <md-autocomplete #tdAuto0="mdAutocomplete">
+                    <md-option *ngFor="let group of distributerSelect" [value]="group.fullName">
+                      <span>{{ group.first_name }} {{ group.last_name }}</span>
+                    </md-option>
+      
+                  </md-autocomplete>
+                </md-input-container>
+              </div>
+            <div class="col-sm-6" *ngIf="checkedList.length==0" style="margin-top: 3px;">
+              <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;margin-top: 4px;margin-right: 6px;" class="file-upload btn btn-warning">
+                Select Excel file <input style="width:10px;position: absolute;font-size: 50px;opacity: 0;right: 0;top: 0;" type="file" (change)="uploadedFile($event)" multiple size="50" accept=".xlsx"/>
+              </label>
+              <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && checkedList.length==0 && faileduploadDevices.length==0" type="button" 
+                class="btn btn-success" (click)="uploadExcelAndUpdate()">Upload <i class="fas fa-upload"></i></button>
+              <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && show1" class="btn btn-primary"
+                 data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+                aria-controls="collapseZero" (click)="transfer2()">Transfer <i class="fas fa-exchange-alt"></i></button>
+            </div>
+            <div class="col-sm-3 mt-3" *ngIf="checkedList.length>0">
+                <button style="margin: top -7px;margin-left:5px" [disabled]="this.distributerObj==undefined && checkedList.length==0" class="btn btn-primary"  data-toggle="collapse" data-target="#collapseZero"
+                  aria-expanded="true" aria-controls="collapseZero" (click)="transfer2()">Transfer <i class="fas fa-exchange-alt"></i></button>
+              </div>
+            </div>
+
+            <div class="row" *ngIf="showErrorupload_1">
+              <div class=col-sm-12>
+                <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                  <thead>
+                    <tr>
+                      <th>{{'IMEI' | translate}}</th>
+                      <th>{{'Vendor' | translate}}</th>
+                      <th>{{'Bill date' | translate}}</th>
+                      <th>{{'Bill no' | translate}}</th>
+                      <th>{{'Device model no' | translate}}</th>
+                      <th>{{'Iccid no' | translate}}</th>
+                      <th>{{'Mob-1' | translate}}</th>
+                      <th>{{'Mob-2' | translate}}</th>
+                      <th>{{'State' | translate}}</th>
+                      <th>{{'eSIM validaity' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let failedDevices of uploadJSON">
+                      <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                      <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                      <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+            
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+          </div>
+      
+        </div>
+      </div>
+
+
+        <div class="accordion" id="accordionExample">
+        
+          <div class="card">
+        
+            <div id="collapseSix" class="collapse" aria-labelledby="headingix" data-parent="#accordionExample">
+              
+              <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange" style="margin-top: 10px;">
+                  <li class="nav-item">
+                    <a class="nav-link active" data-toggle="tab" href="#Sent" role="tab" (click)="selectTab('sent')">Sent</a>
+                  </li>
+                  <li class="nav-item">
+                    <a class="nav-link" data-toggle="tab" href="#Received" role="tab" (click)="selectTab('recieved')">Received</a>
+                  </li>
+                </ul>
+
+                <div class="tab-content">
+                  <div class="tab-pane active" id="Sent" role="tabpanel">
+                      <table class="table table-striped table-hover">
+                        <thead>
+                          <tr>
+                            <th>IMEI</th>
+                            <th>Date</th>
+                            <th>From</th>
+                            <th>To</th>
+                            <th>Device Type</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let item of transaction">
+                            <td>{{item.DeviceID}}</td>
+                            <td>{{item.transferDate?(item.transferDate | date:'medium'):'' }}</td>
+                            <td>{{item.from?item.from.first_name?item.from.first_name:'':''}} {{item.from?item.from.last_name?item.from.last_name:'':''}}</td>
+                            <td>{{item.to?item.to.first_name?item.to.first_name:'':''}} {{item.to?item.to.last_name?item.to.last_name:'':''}}</td>
+                            <td>{{item.DeviceType?item.DeviceType:''}}</td>
+                      
+                          </tr>
+                        </tbody>
+                      </table>
+                  </div>
+                  
+                <div class="tab-pane" id="Received" role="tabpanel">
+                      <table class="table table-striped table-hover">
+                        <thead>
+                          <tr>
+                            <th>IMEI</th>
+                            <th>Date</th>
+                            <th>From</th>
+                            <th>To</th>
+                            <th>Device Type</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr *ngFor="let item of transaction">
+                            <td>{{item.DeviceID}}</td>
+                            <td>{{item.transferDate?(item.transferDate | date:'medium'):'' }}</td>
+                            <td>{{item.from?item.from.first_name?item.from.first_name:'':''}} {{item.from?item.from.last_name?item.from.last_name:'':''}}</td>
+                            <td>{{item.to?item.to.first_name?item.to.first_name:'':''}} {{item.to?item.to.last_name?item.to.last_name:'':''}}</td>
+                            <td>{{item.DeviceType?item.DeviceType:''}}</td>
+                      
+                          </tr>
+                        </tbody>
+                      </table>
+                </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+    </div>
+
+
+  <div *ngIf="show" style="width: 50%;height: 20px;position:absolute;top:-360px">
+    <table id="sample" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+      <thead style="background-color:#e0e0e0;color: #444444;">
+        <tr>
+          <th>IMEI</th>
+          <th>Device model no</th>
+          <th>Purchase_date</th>
+          <th>Serial no</th>
+          <th>Iccid no</th>
+          <th>Mob-1</th>
+          <th>Mob-2</th>
+          <th>Vendor_Name</th>
+          <th>Bill date</th>
+          <th>Bill no</th>
+          <th>State</th>
+          <th>eSIM validaity</th>
+        </tr>
+      </thead>
+    </table>
+  
+  
+  </div>
\ No newline at end of file
diff --git a/src/app/device-inventory/device-inventory.component.scss b/src/app/device-inventory/device-inventory.component.scss
new file mode 100644
index 0000000..cbbb14b
--- /dev/null
+++ b/src/app/device-inventory/device-inventory.component.scss
@@ -0,0 +1,17 @@
+.topDiv {
+  padding-top: 20px;
+  background: whitesmoke;
+  height: 100vh;
+}
+.bg-blue {
+  background-color: #00c0ef !important;
+}
+.bg-green {
+  background-color: #00a65a !important;
+}
+.bg-orange {
+  background-color: #f39c12 !important;
+}
+.bg-red {
+  background-color: #d9534f !important;
+}
diff --git a/src/app/device-inventory/device-inventory.component.spec.ts b/src/app/device-inventory/device-inventory.component.spec.ts
new file mode 100644
index 0000000..a215373
--- /dev/null
+++ b/src/app/device-inventory/device-inventory.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceInventoryComponent } from './device-inventory.component';
+
+describe('DeviceInventoryComponent', () => {
+  let component: DeviceInventoryComponent;
+  let fixture: ComponentFixture<DeviceInventoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceInventoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceInventoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-inventory/device-inventory.component.ts b/src/app/device-inventory/device-inventory.component.ts
new file mode 100644
index 0000000..35ab7b4
--- /dev/null
+++ b/src/app/device-inventory/device-inventory.component.ts
@@ -0,0 +1,777 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+declare var XLSX:any;
+declare var swal: any;
+// import * as XLSX from 'xlsx';
+declare var $: any;
+@Component({
+  selector: 'app-device-inventory',
+  templateUrl: './device-inventory.component.html',
+  styleUrls: ['./device-inventory.component.scss']
+})
+export class DeviceInventoryComponent implements OnInit {
+uploadJSON: any;
+ bsConfig: Partial<BsDatepickerConfig>;
+  tollList;
+  allUser:boolean=false;
+  from_date=new Date();
+  to_date=new Date();
+  masterSelected:boolean;
+  failedFiles=[];
+  selectedAll:boolean=false
+  failedUploadFiles:any;
+  showErrorupload: boolean =false;
+  faileduploadDevices=[];
+  showErrorupload_1: boolean =false;
+  Load: boolean;
+  useridd: any;
+  selectedArr=[]
+  inventory=[]
+  checkedList=[];
+ skip: number = 1;
+  limit: number = 100;
+  dealers_info: any;
+  dealerData: any;
+  dealerObj: any;
+  dealerSelect: any[];
+  installerData:any[];
+  distributerData:any[];
+  distributerSelect:any[]
+  installerSelect:any[];
+  distributer_info;
+  distributerObj
+  Obj
+  installerObj
+  dateId: any;
+  inventoryCount=[];
+  installer_info: any;
+  transaction=[]
+  myInput: any;
+ 
+  array=[{IMEI:'877',Vendor_Name:'test',Purchase_date:'2021-12-20T18:30:00.000Z','Bill date':'2021-12-20T18:30:00.000Z','Bill no':'2212',State:'Maharastra',
+       'eSIM validaity':'One Year/Two Year','Device model no':'3232','Serial no':'5443','Iccid no':'4223','Mob-1':'983993022','Mob-2':'983993022','vahanID':"45433"}]
+  constructor(private contactService:ContactService,private _flashMessagesService: FlashMessagesService) {
+    this.masterSelected = false;
+   }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.getInventory();
+    this.dealerDetail();
+    this.getInventoryCount();
+    this.distributerDetail()
+     let that = this;
+    //  this.testTable()
+
+     
+     $("#excelFile").change(function(e){
+      let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+         
+       that.uploadJSON=d.map(function(d){  
+        return d;
+          
+        });
+        console.log("file=>",that.uploadJSON);
+
+        console.log("Failed",that.failedFiles);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+      this.getInstallerData()
+  }
+
+  uploadExcel(){
+    this.failedUploadFiles = [];
+    this.uploadJSON.forEach(element => {
+      element=JSON.stringify(element)
+    });
+
+    // for(var i=0;i<this.uploadJSON.length;i++){
+    //   this.uploadJSON
+    // }
+    
+    console.log("Device Json Payload",this.uploadJSON);
+    var data={
+      data:this.uploadJSON,
+      user:this.useridd
+    }
+    console.log(data);
+    
+    this.contactService.addMultipleInventory(data).subscribe(res=>{
+      console.log(res);
+      this.getInventory()
+       var msg = "Records Added Successfully"
+     this._flashMessagesService.show(msg, { cssClass: 'alert-success', timeout: 3000 });
+    })
+  
+ }
+show1:boolean=true
+ uploadExcelAndUpdate(){
+this.failedUploadFiles = [];
+    this.uploadJSON.forEach(element => {
+      element=JSON.stringify(element)
+    });
+
+    console.log("Device Json Payload",this.uploadJSON);
+    var data={
+      data:this.uploadJSON,
+      user:this.useridd
+    }
+    console.log(data);
+    
+    this.contactService.post('/Device_inventory/addOrUpdateMultiPle',data).subscribe(res=>{
+      console.log(res);
+      this.show1=false;
+      this.getInventory()
+      swal({
+        // position: 'top-end',
+        // icon: 'success',
+        title: 'Records updated Successfully',
+        showConfirmButton: false,
+        timer: 1500
+      })
+
+
+    //    var msg = "Records updated Successfully"
+    //  this._flashMessagesService.show(msg, { cssClass: 'alert-success', timeout: 3000 });
+    })
+  }
+
+
+ 
+
+ getInventory(){
+   var dateObj={}
+   var url="/Device_inventory/getInventory?user="+this.useridd
+  if((this.dateId == 'to_date')||(this.to_date != undefined)){
+     dateObj['to_date'] = this.to_date.toISOString();
+  }
+  if((this.dateId == 'from_date')||(this.from_date != undefined)){
+     dateObj['from_date'] = this.from_date.toISOString();
+  }
+
+  //  if(dateObj != undefined){
+  //   url="/Device_inventory/getInventory?from="+this.from_date+'&to='+this.to_date
+  // }
+   this.contactService.get(url).subscribe((res:any)=>{
+     console.log(res);
+     for(let i=0;i<res.length;i++){
+       res[i].isSelected=false
+      }
+      this.inventory=res;
+    this.showErrorupload=true;
+     this.getCheckedItemList();
+   })
+ }
+ checkValue(data,index){
+   if(index){
+     this.selectedArr.push(data)
+   }else{
+     if(this.selectedAll){
+        this.selectedAll=false;
+        
+     }else{
+       const i=this.selectedArr.indexOf(data);
+       if (i > -1) {
+       this.selectedArr.splice(i,1)
+       }
+     }
+   }
+   console.log(this.selectedArr,index);
+   
+ }
+
+ selectAll(event){
+    this.selectedArr=[]
+   this.selectedAll=event;
+   if(this.selectedAll){
+     this.selectedArr=this.inventory;
+   }else{
+     this.selectedArr=[]
+   }
+   console.log(this.selectedArr);
+   
+ }
+ checkUncheckAll() {
+    for (var i = 0; i < this.inventory.length; i++) {
+      this.inventory[i].isSelected = this.masterSelected;
+    }
+    this.getCheckedItemList();
+  }
+
+  // Check All Checkbox Checked
+  isAllSelected() {
+    this.masterSelected = this.inventory.every(function(item:any) {
+        return item.isSelected == true;
+      })
+    this.getCheckedItemList();
+  }
+
+  getCheckedItemList(){
+    this.checkedList = [];
+    for (var i = 0; i < this.inventory.length; i++) {
+      if(this.inventory[i].isSelected)
+      this.checkedList.push(this.inventory[i]);
+    }
+    // this.checkedList = JSON.stringify(this.checkedList);
+    console.log(this.checkedList);
+    
+  }
+
+  getInstallerData(){
+    this.Load = true;
+     this.contactService.getTechnician(this.useridd, this.skip, this.limit,this.myInput,this.allUser).subscribe((res)=>{
+       this.Load = false ;
+        this.installer_info = res;
+        for(let i=0;i<this.installer_info.length;i++){
+          this.installer_info[i].fullName=this.installer_info[i].first_name+' '+this.installer_info[i].last_name;
+        }
+      },err=>{
+        this.Load=false;
+        this.installer_info=[];
+      })
+  }
+
+ 
+  dealerDetail() {
+    this.Load = true;
+   console.log("Inside function");
+  //  this.contactService.dealer_Info1(this.useridd,1,10000,2,null)
+ this.contactService.getDealersDetails(this.useridd)    
+   .subscribe(res => {
+        // console.log(res);
+        this.Load = false ;
+        this.dealers_info = res;
+        for(let i=0;i<this.dealers_info.length;i++){
+          this.dealers_info[i].fullName=this.dealers_info[i].first_name+' '+this.dealers_info[i].last_name;
+        }
+        console.log('this.dealers_info',this.dealers_info);
+      }, err => {
+        this.Load = false;
+        this.dealers_info=[];
+        // this.firstcall = true;
+        // this.lastcall = false;
+      })
+
+  }
+
+  distributerDetail() {
+    this.Load = true;
+   console.log("Inside function");
+  //  this.contactService.dealer_Info1(this.useridd,1,10000,2,null)
+ this.contactService.getDistributerList(this.useridd)    
+   .subscribe(res => {
+        // console.log(res);
+        this.Load = false ;
+        this.distributer_info = res;
+        for(let i=0;i<this.distributer_info.length;i++){
+          this.distributer_info[i].fullName=this.distributer_info[i].first_name+' '+this.distributer_info[i].last_name;
+        }
+        console.log('this.distributer_info',this.distributer_info);
+      }, err => {
+        this.Load = false;
+        this.distributer_info=[];
+        // this.firstcall = true;
+        // this.lastcall = false;
+      })
+
+  }
+  filtergrpStatess(val) {
+
+  console.log(val)
+  // console.log(this.options)
+ 
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.dealerSelect=[];
+     this.dealerSelect = this.dealers_info.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    // console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.dealerData){
+      for(let i=0;i<this.dealers_info.length;i++){
+        if(this.dealers_info[i].fullName==this.dealerData){
+          this.dealerObj=this.dealers_info[i]._id
+          console.log(this.dealers_info[i]);
+        }
+      }
+    }
+      console.log( this.dealerObj);
+      return this.dealerSelect;
+  }
+
+}
+
+filtergrpStatess1(val) {
+
+  console.log(val)
+  // console.log(this.options)
+ 
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.installerSelect=[];
+     this.installerSelect = this.installer_info.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    // console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.installerData){
+      for(let i=0;i<this.installer_info.length;i++){
+        if(this.installer_info[i].fullName==this.installerData){
+          this.installerObj=this.installer_info[i]._id
+          console.log(this.installer_info[i]);
+        }
+      }
+    }
+      console.log( this.installerObj);
+      return this.installerSelect;
+  }
+
+}
+
+ filtergrpStatess2(val) {
+
+  console.log(val)
+  // console.log(this.options)
+ 
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.distributerSelect=[];
+     this.distributerSelect = this.distributer_info.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    // console.log("TESTINg",c)
+      return c > -1;    
+    });
+    // console.log(this.distributerData);
+    
+    if(this.distributerData){
+      for(let i=0;i<this.distributer_info.length;i++){
+        if(this.distributer_info[i].fullName==this.distributerData){
+          this.distributerObj=this.distributer_info[i]._id
+          console.log(this.distributer_info[i]);
+        }
+      }
+    }
+      console.log( this.distributerObj);
+      return this.distributerSelect;
+  }
+
+}
+transfer(){
+  var data={
+      data:this.checkedList.length>0?this.checkedList:this.uploadJSON,
+      dealer:this.dealerObj,
+      user:this.useridd
+    }
+
+  this.contactService.transferInventory(data).subscribe((res:any)=>{
+    console.log(res);
+    this.getInventory()
+    
+  })
+}
+
+transfer1(){
+  var data={
+      data:this.checkedList.length>0?this.checkedList:this.uploadJSON,
+      dealer:this.installerObj,
+      user:this.useridd
+    }
+
+  this.contactService.transferInventory(data).subscribe((res:any)=>{
+    console.log(res);
+    this.getInventory()
+    
+  })
+}
+
+transfer2(){
+  var data={
+      data:this.checkedList.length>0?this.checkedList:this.uploadJSON,
+      dealer:this.distributerObj,
+      user:this.useridd
+    }
+
+  this.contactService.transferInventory(data).subscribe((res:any)=>{
+    console.log(res);
+    this.getInventory()
+    
+  })
+}
+
+
+changeDate(id){
+  this.dateId=id
+ this.getInventory()
+
+}
+getInventoryCount(){
+  this.contactService.getInventoryCount(this.useridd).subscribe((res:any)=>{
+    this.inventoryCount=res;
+   
+  })
+}
+applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    console.log(filterValue);
+    
+    // this.inventory.filter = filterValue.trim().toLowerCase();
+  }
+
+selectTab(id){
+  console.log(id);
+  
+  if(id=='sent'){
+    this.contactService.get('/DeviceInventoryTransaction/getByStatus?id=sent&user='+this.useridd).subscribe((res:any)=>{
+      this.transaction=res;
+    })
+
+  }else{
+     this.contactService.get('/DeviceInventoryTransaction/getByStatus?id=receive&user='+this.useridd).subscribe((res:any)=>{
+      this.transaction=res;
+    })
+  }
+
+}
+show:Boolean=false;
+addmultiple(){
+  this.show=!this.show;
+  this.testTable()
+  // this.tabelObj.ajax.reload();
+}
+
+tab:any;
+
+exportExcels() {
+  
+    this.downloadFile(this.array);
+  }
+
+  downloadFile(data, filename = 'Distance Report') {
+
+    let arrHeader = ["IMEI","Device model no","Purchase_date","Serial no","Iccid no","Mob-1","Mob-2", "Vendor_Name", "Bill date", "Bill no","State","eSIM validaity"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Sample.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+
+    let str = ""
+    let row = 'S.No,';
+
+
+    let newHeaders =["IMEI","Device model no","Purchase_date","Serial no","Iccid no","Mob-1","Mob-2", "Vendor_Name", "Bill date", "Bill no","State","eSIM validaity"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+
+exportExcel()
+{
+
+    var tab_text="<table><tr>";
+    var textRange; var j=0;
+    var table = $('#sample').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+// exportExcel(){
+
+//     var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+//     var textRange; var j=0;
+//     var table = $('#sample').clone();
+//     table[0].querySelector("thead").remove();
+//     table[0].prepend($(".dataTable thead").clone()[0]);
+//     var tab:any = table[0];//document.getElementById('deviceTable'); // id of table
+
+//     for(j = 0 ; j <  tab.rows.length ; j++) 
+//     {     
+//         tab_text=tab_text+ tab.rows[j].innerHTML+"</tr>";
+      
+//     }
+
+//     tab_text=tab_text+"</table>";
+   
+//     tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+//     var ua = window.navigator.userAgent;
+//     var msie = ua.indexOf("MSIE "); 
+
+//     var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+//     return (sa);
+// }
+
+tabelObj
+testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#sample').DataTable({
+      
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+       
+        
+        },
+        ajax: (dataTablesParameters, callback) => {
+         
+        callback({data:that.array})
+
+        },
+//  array=[{IMEI:'877',Vendor_Name:'test',Purchase_date:'2021-12-20','Bill date':'2021-12-20','Bill no':'2212',State:'Maharastra',
+//        'eSIM validaity':'One Year/Two Year','Device model no':'3232','Serial no':'5443','Iccid no':'4223','Mob-1':'983993022','Mob-2':'983993022'}]
+        "columns": [
+          {
+            "data": "IMEI",
+            "render": function (data, row) { 
+             return data?data:'N/A';  
+            }
+          },
+          {
+            "data": "Device model no",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "Purchase_date",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "Serial no",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+          {
+            "data": "Iccid no",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "Mob-1",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+          {
+            "data": "Mob-2",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "Vendor_Name",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+         
+           {
+            "data": "Bill date",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "Bill no",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+            {
+            "data": "State",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+            {
+            "data": "eSIM validaity",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+          
+           
+         
+         
+          
+        ],
+        // "columnDefs": [
+        //   { className: "dt-body-left", "targets": [0,1,2] },
+        //   {
+        //     "targets": '_all',
+        //     "createdCell": function (td, cellData, rowData, row, col) {
+        //       $(td).css('padding', '18px')
+        //     }
+        //   },
+        //   { "width": "10px", "targets": 0 },
+        //   { "width": "40px", "targets": 1 },
+        //   { "width": "100px", "targets": 2 },
+
+        // ], order: [[ 0, 'desc' ], [ 0, 'asc' ]]
+      });
+ 
+    });
+
+  }
+
+  uploadedFile(e){
+    console.log(e);
+    var that=this
+     let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+         
+       that.uploadJSON=d.map(function(d){  
+        return d;
+          
+        });
+        console.log("file=>",that.uploadJSON);
+
+        console.log("Failed",that.failedFiles);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+    
+  }
+  change(){
+    this.uploadJSON=[];
+    this.failedFiles=[];
+    this.dealerObj=undefined
+  }
+
+}
diff --git a/src/app/device-list/device-list.component.html b/src/app/device-list/device-list.component.html
new file mode 100644
index 0000000..b14696e
--- /dev/null
+++ b/src/app/device-list/device-list.component.html
@@ -0,0 +1,117 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+  <div id="toast">
+    <!-- <div id="desc">{{data_descip}}</div> -->
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Device List' | translate}}</h4>
+
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3"
+      style="padding-left: 20px; padding-right: 5px; padding-top: 15px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <app-report-filter (onReportFIlter)="getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+
+<!-- this.total_vech = this.devicess.Total_Vech;
+this.idle_vech = this.devicess["Ideal Devices"];
+this.off_vech = this.devicess["OFF Devices"];
+this.maintanance = this.devicess["Maintance Device"];
+this.expiredDevices = this.devicess["expire_status"];
+this.OutOfReach = this.devicess["OutOfReach"];
+this.no_data = this.devicess["no_data"]?this.devicess["no_data"]:0;
+this.Running = this.devicess["running_devices"];
+this.expire_status -->
+  <div class="col-sm-9 col-md-9 col-lg-9">
+
+    <div class="row">
+      <div class="col-md-02">
+      <div class="card shadow-sm rounded" style="background: #f0810f;">
+        <h6>Total Vehicle</h6>
+        <span>{{total_vech}}</span>
+
+      </div>
+      </div>
+      <div class="col-md-02" >
+       <div class="card shadow-sm rounded " style="background: #f5be41;">
+        <h6>Idle </h6>
+        <span>{{idle_vech}}</span>
+
+      </div>
+      </div>
+      <div class="col-md-02">
+        <div class="card shadow-sm rounded " style="background: red;">
+      <h6>Stopped </h6>
+      <span>{{off_vech}}</span>
+      </div>
+      </div>
+     
+      <div class="col-md-02">
+       <div class="card shadow-sm rounded" style="background:green;"> 
+        <h6>Running </h6>
+        <span>{{Running}}</span>
+
+      </div>
+      </div>
+      <div class="col-md-02">
+       <div class="card shadow-sm rounded " style="background: #712d33;">
+      <h6>Expired </h6>
+      <span>{{expiredDevices}}</span>
+
+      </div>
+      </div>
+      <div class="col-md-02">
+       <div class="card shadow-sm rounded " style="background: #4897d8;">
+        <h6>Out Of Reach </h6>
+        <span>{{OutOfReach}}</span>
+
+      </div>
+      </div>
+      <div class="col-md-02">
+       <div class="card shadow-sm rounded " style="background: #5b7065;">
+        <h6>No data </h6>
+        <span>{{no_data}}</span>
+
+      </div>
+      </div>
+
+    </div>
+
+
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div style="width: 100%;height:70vh;margin-top: 32px;">
+      <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+        <thead style="background-color:#e0e0e0;color: #444444;">
+          <tr>
+            <th style="text-align: left;">{{'Device Name' | translate}}</th>
+            <th style="text-align: left;">{{'Device IMEI' | translate}}</th>
+            <th style="text-align: left;">{{'User' | translate}}</th>
+            <th style="text-align: left;">{{'Distributer' | translate}}</th>
+            <th style="text-align: left;">{{'Distributer Mob' | translate}}</th>
+            <th style="text-align: left;">{{'Creation Date' | translate}}</th>
+            <th style="text-align: left;">{{'Expiration Date' | translate}}</th>
+            <th style="text-align: left;">{{'Renewed On' | translate}}</th>
+            <th style="text-align: left;">{{'Dealer name' | translate}}</th>
+            <th style="text-align: left;">{{'Is Supended' | translate}}</th>
+            <th style="text-align: left;">{{'Is Deleted' | translate}}</th>
+            <th style="text-align: left;">{{'Deleted On' | translate}}</th>
+            <th style="text-align: left;">{{'Integration Id' | translate}}</th>
+            <!-- <th style="text-align: left;">{{'Organization name' | translate}}</th> -->
+
+          </tr>
+        </thead>
+      </table>
+    </div>
+  </div>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/device-list/device-list.component.scss b/src/app/device-list/device-list.component.scss
new file mode 100644
index 0000000..7334f59
--- /dev/null
+++ b/src/app/device-list/device-list.component.scss
@@ -0,0 +1,93 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 350px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.card {
+  padding: 5px;
+  text-align: center;
+  margin: 5px;
+  width: 160px;
+  color: white;
+}
diff --git a/src/app/device-list/device-list.component.spec.ts b/src/app/device-list/device-list.component.spec.ts
new file mode 100644
index 0000000..c24e604
--- /dev/null
+++ b/src/app/device-list/device-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceListComponent } from './device-list.component';
+
+describe('DeviceListComponent', () => {
+  let component: DeviceListComponent;
+  let fixture: ComponentFixture<DeviceListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-list/device-list.component.ts b/src/app/device-list/device-list.component.ts
new file mode 100644
index 0000000..a7261c3
--- /dev/null
+++ b/src/app/device-list/device-list.component.ts
@@ -0,0 +1,362 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+declare var $: any;
+declare var moment:any;
+@Component({
+  selector: 'app-device-list',
+  templateUrl: './device-list.component.html',
+  styleUrls: ['./device-list.component.scss']
+})
+export class DeviceListComponent implements OnInit {
+  identifier='deviceList'
+  licenceStatus
+  supAdm
+  superAdm=JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id
+   fromdate
+  todate;
+  tabelObj: any ;
+  Load: boolean;
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  devicess: any;
+  total_vech=0;
+  idle_vech=0;
+  off_vech=0;
+  maintanance=0;
+  expiredDevices=0;
+  OutOfReach=0;
+  no_data=0;
+  expire_status=0;
+  Running=0;
+  from: any;
+  to: any;
+  groupId: any;
+  DealerID: any;
+  data
+    setTimeOut = {
+    value: 20,
+    viewValue: "20 Seconds"
+  };
+  timout = [{
+    value: 10,
+    viewValue: "10 Seconds"
+  },
+  {
+    value: 20,
+    viewValue: "20 Seconds"
+  },
+  {
+    value: 30,
+    viewValue: "30 Seconds"
+  }]
+
+  interval:any;
+  it: number;
+  constructor(private contactService:ContactService) { }
+
+  ngOnInit() {
+   this.data= JSON.parse(localStorage.getItem('dashboardCount'))
+    this.to = new Date().toISOString();
+    var d = new Date();
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    var fuelvalue  = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fuel_unit;
+    var today = new Date();
+      var startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.fromdate=startDate;
+      this.todate=new Date();
+    this.testTable();
+    this.getDashbord()
+    // this.superAdm=JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id
+    // this.timeIntervalRefresh();
+  }
+  timeIntervalRefresh() {
+  // var that=this;
+  clearInterval(this.interval);
+
+  this.it = (1000 * this.setTimeOut.value);
+
+  this.interval = setInterval(() => {
+    this.getDashbord()
+  }, this.it);
+
+
+}
+
+  getDashbord(){
+
+   this.contactService.getDashboard(this.emailid, this.from, this.to, this.superAdm, this.groupId,this.superAdm,this.DealerID).subscribe(
+      data => {
+        this.devicess = data
+        console.log(data);
+        
+        this.total_vech = this.devicess.Total_Vech;
+        this.idle_vech = this.devicess["Ideal Devices"];
+        this.off_vech = this.devicess["OFF Devices"];
+        this.maintanance = this.devicess["Maintance Device"];
+        this.expiredDevices = this.devicess["expire_status"];
+        this.OutOfReach = this.devicess["OutOfReach"];
+        this.no_data = this.devicess["no_data"]?this.devicess["no_data"]:0;
+        this.Running = this.devicess["running_devices"];
+        this.expire_status= this.devicess["expire_status"];
+
+      })
+    }
+ 
+
+  getData(){
+    var data={
+      f:this.fromdate,
+      t:this.todate,
+      deviceType:''
+    }
+    this.contactService.getVehicleList(data).subscribe(res=>{
+      console.log(res);
+      
+    })
+  }
+
+  getReport(data){
+    console.log(data);
+    if(data=="getExcel"){
+      this.exportExcel()
+
+    }else{
+      this.fromdate=new Date(data.fromDate).toISOString();
+      this.todate=new Date(data.toDate).toISOString();
+      this.licenceStatus=data.liecenceStatus;
+      if(data.distributerSelect[0]){
+        this.supAdm=data.distributerSelect[0]._id;
+        this.superAdm=data.distributerSelect[0]._id;
+        this.getDashbord()
+      }else{
+        this.supAdm=undefined;
+        this.superAdm=this.useridd;
+        this.getDashbord()
+      }
+      console.log(this.fromdate,this.todate);
+      this.tabelObj.ajax.reload();
+
+    }
+
+    
+  }
+
+  testTable(){
+  const that = this;
+  console.log("inside function");
+  // that.Load = true;
+
+   $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+       "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            // "rowCallback": function(row: Node, data: any | Object, index: number){
+          ajax: (mainData,callback) => {
+
+  var data={
+      f:that.fromdate,
+      t:that.todate,
+      deviceType:'',
+      licenceType:that.licenceStatus,
+      supAdm:that.supAdm
+    }
+
+    if(that.fromdate !=undefined && that.todate!=undefined){
+      that.contactService.getVehicleList(data).subscribe(res=>{
+        console.log(res);
+        that.Load = false;
+        if(res.length!=0){
+          callback({ data: res[0].data });
+
+        }else{
+           callback({ data: [] });
+        }
+        
+      })
+
+    }else{
+      callback({ data: [] });
+      that.Load = false;
+    }
+  },
+   "columns": [
+              {
+                  "data": "Device_Name",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "Device_ID",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "User",
+                  "render": function(data, type, row) {                   
+                    return data?(data.first_name+' '+data.last_name) : '';                  
+                  }
+              },
+              {
+                  "data": "Distributer",
+                  "render": function(data, type, row) {                   
+                    return data?(data.first_name+' '+data.last_name) : '';                  
+                  }
+              },
+               {
+                  "data": "Distributer",
+                  "render": function(data, type, row) {                   
+                    return data?(data.phone) : '';                  
+                  }
+              },
+               {
+                  "data": "created_on",
+                  "render": function(data, type, row) {                   
+                    return data?(data) : '';                  
+                  }
+              },
+               {
+                  "data": "expiration_date",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';              
+                  }
+              },
+              {
+                  "data": "renew_at",
+                  "render": function(data, type, row) {                   
+                    return data?(data) : '';                  
+                  }
+              }
+              ,{
+                  "data": "Dealer",
+                  "render": function(data, type, row) {                   
+                    return data?(data.first_name+' '+data.last_name) : '';              
+                  }
+              },
+              // "accountSuspended":1,"device_delete_on":1,"integrationId":1
+              {
+                  "data": "accountSuspended",
+                  "render": function(data, type, row) {                   
+                    return data;              
+                  }
+              },
+              {
+                  "data": "deletedDevice",
+                  "render": function(data, type, row) {                   
+                    return data?'true':'false';              
+                  }
+              },
+               {
+                  "data": "device_delete_on",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';              
+                  }
+              },
+              {
+                  "data": "integrationId",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';              
+                  }
+              },
+             
+              
+//               [5:57 PM, 7/5/2021] Job 1: creation date
+// [5:57 PM, 7/5/2021] Job 1: dealer name
+// [5:59 PM, 7/5/2021] Job 1: Organization name
+   
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9,10,11] },  
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },
+          //  { "width": "70px", "targets": 4 },
+          //   { "width": "70px", "targets": 5 },
+          //    { "width": "70px", "targets": 6 },  
+          //    { "width": "70px", "targets": 7 },
+          //    { "width": "70px", "targets": 8 },
+          //    { "width": "70px", "targets": 9 },
+          //           { "width": "10px", "targets": 10 },
+          //            { "width": "10px", "targets": 11 },   
+ 
+    //       {
+    //     targets: -1, //-1 es la ultima columna y 0 la primera
+    //     data: null,
+    //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+    // },
+          ] , order: [[ 3, 'desc' ], [ 0, 'asc' ]]
+      });
+
+  });
+
+}
+
+
+
+tab:any;
+  exportExcel()
+	{
+   console.log("Export");
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+    
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+
+}
+
+
+
+ 
\ No newline at end of file
diff --git a/src/app/device-model.ts b/src/app/device-model.ts
new file mode 100644
index 0000000..206866a
--- /dev/null
+++ b/src/app/device-model.ts
@@ -0,0 +1,10 @@
+export class DeviceModel{
+    _id: string;
+    device_type: string;
+    configuration_command:string;
+    location_command:string;
+    immoblizer_command:string;
+    reset_command:string;
+    resume_command:string;
+    __v:number
+}
diff --git a/src/app/device-model/device-model.component.css b/src/app/device-model/device-model.component.css
new file mode 100644
index 0000000..76d05a1
--- /dev/null
+++ b/src/app/device-model/device-model.component.css
@@ -0,0 +1,37 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+ 
+  height: 84vh;
+  
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+  
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-model/device-model.component.html b/src/app/device-model/device-model.component.html
new file mode 100644
index 0000000..eb9c9a7
--- /dev/null
+++ b/src/app/device-model/device-model.component.html
@@ -0,0 +1,176 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div
+    class="row"
+    style="
+      text-align: center;
+      background: #426e86;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      color: white;
+      box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+    "
+  >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <i
+        *ngIf="custtype || adbtn || superAdmin"
+        class="fas fa-plus-circle"
+        (click)="add_DeviceModel()"
+        md-tooltip="Add Model"
+        style="
+          box-shadow: 3px 1px 5px 0px #b2b0ae;
+          cursor: pointer;
+          float: left;
+          font-size: 30px;
+          border-radius: 50px;
+          margin-left: 20px;
+        "
+      ></i>
+      <button
+        md-tooltip="Export To Excel"
+        (click)="exportToExcel()"
+        style="
+          box-shadow: 3px 1px 5px 0px #b2b0ae;
+          cursor: pointer;
+          float: left;
+          font-size: 21px;
+          border-radius: 50px;
+          margin-left: 20px;
+          height: 38px;
+          width: 38px;
+          margin-top: -3px;
+        "
+      >
+        <i class="far fa-file-excel"></i>
+      </button>
+      <h4>{{ "Device Model" | translate }}</h4>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+   
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+         
+        </div>
+      </div>
+    </div> -->
+    <div
+      class="col-sm-12 col-md-12 col-lg-12"
+      style="padding-left: 5px; padding-right: 20px; padding-top: 5px"
+    >
+      <div
+        class="row"
+        style="
+          margin: 0px;
+          padding-top: 10px;
+          padding-bottom: 5px;
+          background: white;
+          box-shadow: 3px 1px 5px 0px #b2b0ae;
+        "
+      >
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <!-- <div style="width: 100%;height:82vh;overflow: auto;"> -->
+          <table
+            id="deviceTable"
+            class="table table-striped table-hover"
+            style="font-size: 12px"
+          >
+            <thead style="background-color: #e0e0e0; color: #444444">
+              <tr>
+                <th></th>
+                <th>{{ "Device Type" | translate }}</th>
+                <th>{{ "Configuration Command" | translate }}</th>
+                <th>{{ "Location Command" | translate }}</th>
+                <th>{{ "Immobilzer Command" | translate }}</th>
+                <th>{{ "Resume Command" | translate }}</th>
+                <th>{{ "Reset Command" | translate }}</th>
+                <th>{{ "Immoblizer Type" | translate }}</th>
+                <th>{{ "Port" | translate }}</th>
+                <th>{{ "SMS APN" | translate }}</th>
+                <th>{{ "SMS Ip" | translate }}</th>
+                <th>{{ "SMS Timezone" | translate }}</th>
+                <th>{{ "Edit" | translate }}</th>
+                <th>{{ "Delete" | translate }}</th>
+              </tr>
+            </thead>
+          </table>
+          <!-- </div>   -->
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- *ngIf="orgChk === true"
+*ngIf="orgChk === true" -->
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+  <div>
+    <p style="text-align: center; font-size: 25px; font-weight: 500; margin-top: 20px;">{{'Device Model' | translate}}</p>
+  </div>
+  <div class="filterStyle">
+    <div class="row">
+      <div class="col-12" style="padding: 0;">
+        <button md-tooltip="Add Device Model"
+          style="border:1px solid transparent; background-color: transparent;margin-top:8px" (click)="add_DeviceModel()"
+          *ngIf="custtype||adbtn||superAdmin">
+          <md-icon style="float: right;width:30px;height:30px;">add</md-icon>
+        </button>
+        <div style="float: right;margin-top: 8px;margin-right: 30px;">
+            <button [disabled]="lastcall" (click)="pre()"> < {{'Previous' | translate}} </button>
+            <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} > </button>
+        </div>
+      
+        <input type="search" id="myInput" class="form-control" style="margin-top: 8px; border-radius: 4px; width: 201px; font-size: 16px; height: 30px; margin-right: 42px;" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)" placeholder="Device Search" />
+      </div>
+    </div>
+      <div class="row">
+        <div class="col-12">
+          <flash-messages style="float: center;"></flash-messages>
+        </div>
+      </div>
+      <div class="row" class="scrollbar" id="style-1" >
+        <div class="col-12" style="padding: 0;">
+          <table id="myTable" class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+            <thead style="background-color:#A2C523;color: white;">
+              <tr>
+                <th>{{'Device Type' | translate}}</th>
+                <th>{{'Configuration Command' | translate}}</th>
+                <th>{{'Location Command' | translate}}</th>
+                <th>{{'Immobilzer Command' | translate}}</th>
+                <th>{{'Resume Command' | translate}}</th>
+                <th>{{'Reset Command' | translate}}</th>
+                <th>{{'Immoblizer Type' | translate}}</th>
+                <th>{{'Port' | translate}}</th>
+                <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>
+                <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>
+              </tr>
+            </thead>
+
+            <tbody>
+
+              <tr *ngFor="let data of deviceModel">
+
+                <td style="cursor:pointer">{{data.device_type}}</td>
+                <td style="cursor:pointer">{{data.configuration_command}}</td>
+                <td style="cursor:pointer">{{data.location_command}}</td>
+                <td style="cursor:pointer">{{data.immoblizer_command}}</td>
+                <td style="cursor:pointer">{{data.resume_command}}</td>
+                <td style="cursor:pointer">{{data.reset_command}}</td>
+                <td style="cursor:pointer">{{data.imobliser_type}}</td>
+                <td style="cursor:pointer">{{data.deviceport}}</td>
+                <td>
+                  <p *ngIf="orgChk === true"><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;text-align: center;cursor: pointer;" (click)="editDeviceModel(data)"> <md-icon>edit</md-icon> </button></p>
+                </td>
+                <td *ngIf="orgChk === true" style="float:left;cursor: pointer;"> <md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon> </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div> -->
diff --git a/src/app/device-model/device-model.component.spec.ts b/src/app/device-model/device-model.component.spec.ts
new file mode 100644
index 0000000..1d83c92
--- /dev/null
+++ b/src/app/device-model/device-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceModelComponent } from './device-model.component';
+
+describe('DeviceModelComponent', () => {
+  let component: DeviceModelComponent;
+  let fixture: ComponentFixture<DeviceModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-model/device-model.component.ts b/src/app/device-model/device-model.component.ts
new file mode 100644
index 0000000..e1231da
--- /dev/null
+++ b/src/app/device-model/device-model.component.ts
@@ -0,0 +1,477 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {DialogContentExampleDialogComponent} from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+/* import {Tab} from './tab'; */
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import {DeviceModel} from '../device-model';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import * as io from 'socket.io-client';
+/* import { DeviceReportComponent } from '../device-report/device-report.component';
+ */import { DeviceEditComponent } from '../dashboard/device-edit/device-edit.component';
+import {MdSnackBar} from '@angular/material';
+import { DeviceShareComponent } from '../dashboard/device-share/device-share.component';
+import { ShareUserComponent } from '../dashboard/share-user/share-user.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {ContactService} from '../contact.service';
+import { checkNoChangesNode } from '@angular/core/src/view/view';
+import { SpeednotifyComponent } from '../dashboard/speednotify/speednotify.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { EditDeviceModelComponent } from '../edit-device-model/edit-device-model.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+declare var $: any;
+
+declare var google: any;
+declare var swal: any;
+declare var moment:any;
+
+@Component({
+  selector: 'app-device-model',
+  templateUrl: './device-model.component.html',
+  styleUrls: ['./device-model.component.css'],
+  providers: [ContactService,SidebarComponent]
+})
+export class DeviceModelComponent implements OnInit {
+  modelChanged: Subject<string> = new Subject<string>();
+  adbtn: string;
+  chkAddBtn: string;
+ //private url = 'http://localhost:3000/api/graph';  
+  private socket;
+  Load:boolean=false
+ messages = [];
+ connection;
+ graphs:any;
+ message;
+  numberOfOnlineUsers: number;
+devices: Device[];
+device: Device;
+
+drivers:any=[];
+driver:any=[];
+
+deviceModels:any=[];
+deviceModel:any=[];
+Device_ID: string;
+Serial_Num: string;
+Manf: string;
+Model: string;
+del:boolean = false;
+Des: string;
+Hardware_Ver: string;
+Loca: string;
+login:any;  
+visibility:any;
+/* tabs: Tab[] = []; */
+calculateResult=[];
+value:any;
+a:any;
+homeVis:any;
+visibility0:any;
+j:any;
+id:any;
+dev:any;
+checked:any
+MdSlideToggleChange :any;
+e: Event;
+d:any;
+  orgChk: any;
+  custtype: any;
+  tabelObj: any;
+
+  constructor(public sidebar :SidebarComponent,public dialog: MdDialog,public snackBar: MdSnackBar,private router: Router, private contactService: ContactService, private activatedRoute: ActivatedRoute,public _flashMessagesService : FlashMessagesService) { 
+   
+  }
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.orgChk = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation ; 
+    this.adbtn = localStorage.getItem("dlrchk")
+
+    this.sidebar.sidebarData();
+  
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+   
+      // this.getDeviceModel();
+      this.testTable();
+
+  }
+
+// deleteRecord(data){
+
+//   swal({
+//     title: 'Are you sure?',
+//     text: "You won't be able to revert this!",
+//     type: 'warning',
+//     showCancelButton: true,
+//     confirmButtonColor: '#3085d6',
+//     cancelButtonColor: '#d33',
+//     confirmButtonText: 'Yes, delete it!'
+//   }).then((result: { value: boolean; }) => {
+//     if (result) {
+//       this.contactService.deleteDeviceModel(data).subscribe(
+//         data => {
+//           this.deviceModels=[];
+//           this.deviceModel=[];
+//           // this.getDeviceModel();
+//           swal(
+//             'Deleted!',
+//             'Your file has been deleted.',
+//             'success'
+//           )
+//         },err=>{
+//           swal(
+//             'Server Error',
+//             'Error occured while deleting device configuration , Please try after sometime !!!',
+//             'error'
+//           )
+//         });    
+//     }
+//   })
+
+
+// }
+
+add_DeviceModel(){
+ 
+
+this.router.navigate(["addDeviceModel"],{queryParams :  {user_id : this.useridd}});
+
+}
+
+  
+
+
+
+fs :any;
+ls :any;
+or :any;
+/* e =[];
+ */token :any;
+emailid :any;
+devicess :any;
+devicesss :any;
+userID:any;
+final:any;
+lat:any;
+lng:any;
+latLongArr:any
+convertedToString :String;
+useridd:any;
+notifi = [];
+g:any;
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+data_to_view=[];
+Durations:any;
+superAdmin:Boolean = false;
+
+
+  skip=0;
+  limit=1000000;
+  myInput:any;
+
+  // getDeviceModel(){
+  //   this.deviceModel = [];
+     
+  //   this.contactService.getDeviceModel(this.skip, this.limit,this.myInput).subscribe( 
+  //     data => {
+  //      for(let i=0;i<data.length;i++){
+  //       this.deviceModel.push(data[i]); 
+  //       }
+  
+  //     });
+      
+  // }
+
+  deviceData=[];
+  arrival_time:any;
+  baba=[]
+  status_toShow:any;
+  address_show:any;
+  lattitude:any;
+  longitude:any;
+  
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+            'serverSide': false,
+            "processing": true,
+            "searching": true,
+            "scrollX": true,
+            "scrollY": "500px",
+            "scrollCollapse": true,
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            // "scrollY":'65vh',
+            // "ordering": true,
+            order: [[0, 'desc']],  
+            // "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              dataTablesParameters.op = {};
+              dataTablesParameters.select = [];
+              dataTablesParameters.find = {};
+              var suburl = "";
+          
+              suburl += "/deviceModel/getDeviceModel";
+              that.contactService.get(suburl).subscribe(resp => {
+                  console.log("Response from datatable=>", resp); 
+            
+                  callback({data : resp });
+              }, err => {
+                callback({data : [] });
+              });
+            
+          },
+
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+            $('#editModel',row).bind('click',()=>{  
+                    console.log(data);
+
+                  if(that.dialog.openDialogs && that.dialog.openDialogs.length > 0){
+                      return false;
+                    }
+                    let dialogRef = that.dialog.open(EditDeviceModelComponent, {
+                      data : data
+                    });
+                  
+                    dialogRef.afterClosed().subscribe(result => {
+                      console.log(result);
+                      // console.log(result);
+                      if (result == "success") {
+                        that.tabelObj.ajax.reload();     
+                      }
+                    
+                    });
+          })
+            $('#deleteModel',row).bind('click',()=>{  
+              swal({
+                  // title: 'Are you sure?',
+                  text: "Do you want to delete Device model?",
+                  type: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Yes, delete'
+                }).then((result: { value: boolean; }) =>{                      
+                  if(result){
+                    console.log(data._id);
+                 
+                    that.contactService.deleteDeviceModel(data._id).subscribe(  
+                      data => {  
+                         
+                        swal(
+                          'Deleted',
+                          'Device Model deleted',
+                          'success'
+                        )
+
+                        that.tabelObj.ajax.reload();
+                  
+                      });
+              
+                  }                
+                });
+          })
+
+            },
+        
+            "columns": [
+              {
+                "data": "_id",
+                "visible":false,
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+            {
+              "data": "device_type",
+              "defaultContent": "",
+              "render": function(data, type, row) {  
+                return data?data : '';                  
+              }
+          },
+          
+              {
+                "data": "configuration_command",
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+                {
+                    "data": "location_command",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {  
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "immoblizer_command",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                     return data?data:''; 
+                    }
+                }, 
+                {
+                  "data": "resume_command",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              }, 
+                {
+                  "data": "reset_command",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                  
+                    return data ? data : "";  
+                  }
+              }, 
+         
+            {                
+              "data":"imobliser_type",
+              "defaultContent": "",
+              "render":function(data,type,row){  
+                return data ? data : "";  
+              }
+          } ,   
+          {                
+            "data":"deviceport",
+            "defaultContent": "",
+            "render":function(data,type,row){  
+              return data ? data : "";  
+            }
+        },
+        {                
+            "data":"sms_apn",
+            "defaultContent": "",
+            "render":function(data,type,row){  
+              return data ? data : "";  
+            }
+        },
+        {                
+            "data":"sms_ip",
+            "defaultContent": "",
+            "render":function(data,type,row){  
+              return data ? data : "";  
+            }
+        },
+        {                
+            "data":"sms_timezone",
+            "defaultContent": "",
+            "render":function(data,type,row){  
+              return data ? data : "";  
+            }
+        },   
+          {                
+            "data":null,
+            "defaultContent": "",
+            "render":function(data,type,row){  
+                return '<i id="editModel" class="fas fa-edit" style="cursor:pointer;color:green" title="Edit Model"></i>'
+            }
+        }  
+        ,   
+          {                
+            "data":null,
+            "defaultContent": "",
+            "render":function(data,type,row){  
+                return '<i id="deleteModel" class="fas fa-trash" style="cursor:pointer;color:green" title="Delete Model"></i>'
+            }
+        }                      
+            ],  
+
+        });
+
+        
+        that.colSwitch()
+
+  
+    });
+  
+  }
+
+   editDeviceModel(data){
+    
+    let dialogRef = this.dialog.open(EditDeviceModelComponent, {
+      data : data
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+      // console.log(result);
+      if (result == "success") {
+        // this.tost1("succ");
+    //   this._flashMessagesService.show('Model Updated !!!', { cssClass: 'alert-success', timeout: 2000 });
+          //  this.getDeviceModel();
+      }
+    
+    });
+   
+   }
+
+
+   colSwitch() {
+   
+        for (var k = 0; k <= 11; k++) { 
+          this.tabelObj.column(0).visible(false);
+          if (this.orgChk != true ) {
+            if ((k == 9) || (k == 10)) {
+              this.tabelObj.column(k).visible(false);
+          } else{
+            this.tabelObj.column(k).visible(true);
+          }  
+          }        
+                       
+            }
+        
+    }
+tab:any;
+
+  exportToExcel(){
+    console.log("IN EXPORT")
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+}
+
+
+
diff --git a/src/app/device-renew/device-renew.component.html b/src/app/device-renew/device-renew.component.html
new file mode 100644
index 0000000..663aaea
--- /dev/null
+++ b/src/app/device-renew/device-renew.component.html
@@ -0,0 +1,145 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'DEVICES RENEW REPORT' | translate}}
+      <div class="float-right mr-2" *ngIf="renewalType!='renewed'">
+            <button (click)="messageSend()" mdTooltip="Send Notification" class="btn btn-outline-warning">
+              Send Notification <span class="fa fa-bell"></span></button>
+      </div>
+      </h4>
+
+
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3"
+      style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <app-report-filter (onReportFIlter)="getReport($event)" [componentIdentifier]="identifier">
+          </app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:82vh;overflow: auto;">
+            <table id="deviceTable" class="table table-striped table-hover" style="font-size: 12px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align:center;white-space: nowrap;">{{'Device Name' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Device ID' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Status' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'User' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'User ID' | translate}}</th>
+                   <th style="text-align:center;white-space: nowrap;">{{"User's Phone" | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Dealer' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Phone' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Renewed at' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Expire On' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Icon Type' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'SIM Number' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Email' | translate}}</th>
+                  <th style="text-align:center;white-space: nowrap;">{{'Renew' | translate}}</th>
+                 
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <p class="headStyle">{{'DEVICES MASTER' | translate}}</p>  
+  <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-4" style="text-align: center;"> 
+          <md-input-container>
+          <input mdInput placeholder="{{'Search by Device ID' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+          #state="ngModel" [(ngModel)]="deviceName"
+          (ngModelChange)="filterDevices(deviceName)">
+         <md-autocomplete #tdAuto="mdAutocomplete">
+            <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" (click)="getExactValue(device)">
+              <span>{{device.viewValue}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+        <md-input-container>
+          <input mdInput placeholder="{{'Search by Sim Number' | translate}}" [mdAutocomplete]="tdAutosim" name="state" 
+          #state="ngModel" [(ngModel)]="simnumber"
+          (ngModelChange)="filterDevicesbysimnumber(simnumber)">
+         <md-autocomplete #tdAutosim="mdAutocomplete">
+            <md-option *ngFor="let sim of simNumberSelect" [value]="sim.sim_Number" (click)="getSIMValue(sim)">
+              <span>{{sim.sim_Number}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+      
+      </div>
+      <div class="col-md-2" style="padding-left: 0;">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-4" style="padding-top:17px;text-align: center;">
+        <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+            <md-slide-toggle md-tooltip="Deleted Devices" [(ngModel)]="deletedDevices" (change)="onChange($event)"></md-slide-toggle> 
+          <button style="background-color:#484848;color:#fdfdfd;width: 120px;margin-left: 20px;" md-raised-button (click)="callfunction()">{{'FIND' | translate}}</button> 
+           <a id="download" href="{{XLurl}}"  download style="text-decoration:none;" > 
+          <button style="background-color: #60ab1c;color:#fdfdfd;width: 135px;margin-left: 15px;" md-raised-button (click)="excelExport()">{{'EXPORT EXCEL' | translate}}</button>  
+            </a>        
+        </div>
+    </div>
+  </div>
+        <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+      
+  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device Name' | translate}}</th>
+            <th style="text-align:center;">{{'Device ID' | translate}}</th>
+            <th style="text-align:center;">{{'Status' | translate}}</th>
+            <th style="text-align:center;">{{'User' | translate}}</th>
+            <th style="text-align:center;">{{'Dealer' | translate}}</th>
+            <th style="text-align:center;">{{'Phone' | translate}}</th>
+            <th style="text-align:center;">{{'Created On' | translate}}</th>
+            <th style="text-align:center;">{{'Expire On' | translate}}</th>
+            <th style="text-align:center;">{{'Icon Type' | translate}}</th>
+            <th style="text-align:center;">{{'Fuel Voltage (mv)' | translate}}</th>
+            <th style="text-align:center;">{{'SIM Number' | translate}}</th>
+            <th style="text-align:center;">{{'Today ODO' | translate}}</th>
+            <th style="text-align:center;">{{'Total ODO' | translate}}</th>       
+            <th style="text-align:center;">{{'Email' | translate}}</th>           
+            <th  style="text-align:center;">{{'Edit' | translate}}</th>           
+            <th  style="text-align:center;">{{'Delete Permanently' | translate}}</th>   
+            <th  style="text-align:center;">{{'Restore' | translate}}</th>    
+            <th  style="text-align:center;">{{'Delete' | translate}}</th>         
+            <th style="text-align:center;">{{'Certificates' | translate}}</th>       
+            <th style="text-align:center;">{{'Reset ODO' | translate}}</th>     
+            <th style="text-align:center;">{{'Delete History' | translate}}</th>    
+            <th style="text-align:center;">{{'Recalculate ODO' | translate}}</th>        
+            <th style="text-align:center;" title="Clear System logs">{{'CLear Logs' | translate}}</th>                  
+        </tr>
+    </thead>  
+</table>
+</div>
+ -->
\ No newline at end of file
diff --git a/src/app/device-renew/device-renew.component.scss b/src/app/device-renew/device-renew.component.scss
new file mode 100644
index 0000000..26eb74d
--- /dev/null
+++ b/src/app/device-renew/device-renew.component.scss
@@ -0,0 +1,87 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/device-renew/device-renew.component.spec.ts b/src/app/device-renew/device-renew.component.spec.ts
new file mode 100644
index 0000000..162f498
--- /dev/null
+++ b/src/app/device-renew/device-renew.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceRenewComponent } from './device-renew.component';
+
+describe('DeviceRenewComponent', () => {
+  let component: DeviceRenewComponent;
+  let fixture: ComponentFixture<DeviceRenewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceRenewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceRenewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-renew/device-renew.component.ts b/src/app/device-renew/device-renew.component.ts
new file mode 100644
index 0000000..fbe5ae3
--- /dev/null
+++ b/src/app/device-renew/device-renew.component.ts
@@ -0,0 +1,978 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from './../contact.service';
+import { environment } from '../../environments/environment'
+declare var $: any, DataTable: any, swal: any;
+import * as moment from 'moment';
+// declare var jspdf: any;
+// import jsPDF from 'jspdf';
+//  const jsPDF = require('jspdf');
+
+import { MdDialog } from '@angular/material';
+
+// import { EditDeviceMasterComponent } from '../../edit-device-master/edit-device-master.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { saveAs } from 'file-saver';
+import { RenewVehicleComponent } from '../dashboard/renew-vehicle/renew-vehicle.component';
+// import { NormalCertComponent } from './normal-cert/normal-cert.component';
+// import { CertOptionComponent } from './cert-option/cert-option.component';
+declare var jsPDF: any;
+declare var autoTable: any;
+
+@Component({
+  selector: 'app-device-renew',
+  templateUrl: './device-renew.component.html',
+  styleUrls: ['./device-renew.component.scss']
+})
+export class DeviceRenewComponent implements OnInit {
+  option: any;
+  data=[]
+    Fromdate = new Date();
+    todate = new Date();
+    emailid: any;
+    renewalType="renewed"
+    useridd: any;
+    tabelObj: any;
+    errorStatus: string;
+    serviceResponse: boolean;
+    identifier:String='deviceRenew';
+    supAdmin: any;
+    supadm: any;
+    Load: boolean;
+    XLurl: any;
+    tempObj: any;
+    isDealer: any;
+    dlrID: any;
+    selectedDevice: any;
+    selectedDeviceWithSIM: any;
+    dev_url = environment.hostUrl;
+    Message: string;
+    data_descip: string;
+    phone
+    constructor(public contactService: ContactService, public dialog: MdDialog, private _flashMessagesService: FlashMessagesService) {
+        this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+        this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+        this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+        this.isDealer = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isDealer;
+        this.phone=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).phn
+        console.log(this.supadm, this.isDealer);
+
+
+        if (this.isDealer == true) {
+            this.dlrID = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._id
+        }
+        //    this.supAdmin = JSON.parse(window.atob(window.localStorage.superAdminToken.split('.')));
+        //    console.log(this.supAdmin);
+        // console.log(this.emailid);
+        // console.log(this.useridd);
+    }
+    deletedDevices: boolean = false;
+    showDeleted: boolean = false;
+    delFlag: boolean = false;
+    ngOnInit() {
+        this.Fromdate.setHours(0, 0, 0);
+        this.testTable();
+        // this.getAllDevice();
+    }
+    callfunction(): void {
+        this.tabelObj.draw();
+    }
+
+ 
+    testTable() {
+        const that = this;
+        $(document).ready(function () {
+            that.tabelObj = $('#deviceTable').DataTable({
+                serverSide: true,
+                "processing": true,
+                "searching": false,
+                // "scrollX": true,
+                
+                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+                ajax: (dataTablesParameters: any, callback) => {
+                    dataTablesParameters.op = {};
+                    dataTablesParameters.select = [];
+                    dataTablesParameters.find = {};
+                    dataTablesParameters.columns = [
+                        { data: "_id" },
+                        { data: "Device_Name" },
+                        { data: "user.first_name" },
+                        { data: "user.last_name" },
+                        { data: "user.user_id" },
+                        { data: "user.address" },
+                        { data: "user.phone" },
+                        { data: "user.pass" },
+                        { data: "expiration_date" },
+                        { data: "Device_ID" },
+                        { data: "contact_number" },
+                        { data: "sim_number" },
+                        { data: "renew_at" },
+                        {data : "deletedDevice"},
+                        { data: "iconType" },
+                        { data: "currentFuelVoltage" },
+                        { data: "today_odo" },
+                        { data: "total_odo" },
+                        { data: "expiration_date" },
+                        { data: "supAdmin" },
+                        { data: "numberOfSOS" },
+                        { data: "isDealer" },
+                        { data: "Dealer.first_name" },
+                        { data: "Dealer.last_name" },
+                        { data: "Dealer.address" },
+                        { data: "Email_ID" },
+                        { data: "last_loc" },
+                        { data: "engineNo" },
+                        { data: "CID_No" },
+                        { data: "status" },
+                        { data: "device_model.device_type" },
+                        { data: "device_model.Manufacturer" },
+                        { data: "typeOfVehicle" },
+                        { data: "manufacturingCompany" },
+                        { data: "vehicleRegDate" },
+                        { data: "vehicleManufacturingDate" },
+                        { data: "lastFitnessDate" },
+                        { data: "fitmentDate" },
+                        { data: "ICCICD" },
+                        { data: "IMSI" },
+                        { data: "uniqueID" },
+                        { data: "vehicleType.description" },
+                        { data: "invoiceNumber" },
+                        { data: "invoiceDate" },
+                        { data: "companyName" },
+                        { data: "companyAddress" },
+                        { data: "transportOfficeCity" },
+                        { data: "transportOfficeState" },
+                        { data: "ChassisNo" },
+                        { data: null, defaultContent: '' }
+                    ]
+
+                    //  dataTablesParameters.find.supAdmin = that.useridd;
+                           console.log("this.deviceObjIdthis.deviceObjId",that.deviceObjId);
+                           that.renewalType=that.deviceObjId?that.deviceObjId.type:"renewed"
+                          
+                        if(that.deviceObjId != undefined){
+                            if(that.deviceObjId.type =='IMEI'){
+                                dataTablesParameters.find['_id'] = that.deviceObjId.did;
+                            }
+                            if(that.deviceObjId.type =='SIM'){
+                                dataTablesParameters.find['sim_number'] = that.deviceObjId.did;
+                            }
+
+                        }
+
+                        if(that.renewalType=="renewed"){
+                            if (that.Fromdate) {
+                                var fdate = new Date(that.Fromdate).toISOString()
+                                dataTablesParameters.find['renew_at'] = dataTablesParameters.find['renew_at'] ? dataTablesParameters.find['renew_at'] : {};
+                                dataTablesParameters.find['renew_at']['$gte'] = fdate
+                            };
+                            // }
+                            if (that.todate) {
+                                var tdate = new Date(that.todate).toISOString()
+                                dataTablesParameters.find['renew_at'] = dataTablesParameters.find['renew_at'] ? dataTablesParameters.find['renew_at'] : {};
+                                dataTablesParameters.find['renew_at']['$lte'] = tdate;
+                            }
+                        } else if(that.renewalType=="pending"){
+                            if (that.Fromdate) {
+                                var fdate = new Date(that.Fromdate).toISOString()
+                                dataTablesParameters.find['expiration_date'] = dataTablesParameters.find['expiration_date'] ? dataTablesParameters.find['expiration_date'] : {};
+                                dataTablesParameters.find['expiration_date']['$gte'] = fdate
+                            };
+                            // }
+                            if (that.todate) {
+                                var tdate = new Date(that.todate).toISOString()
+                                dataTablesParameters.find['expiration_date'] = dataTablesParameters.find['expiration_date'] ? dataTablesParameters.find['expiration_date'] : {};
+                                dataTablesParameters.find['expiration_date']['$lte'] = tdate;
+                            }
+                        }else{
+
+                            if (that.Fromdate) {
+                                var fdate = new Date(that.Fromdate).toISOString()
+                                dataTablesParameters.find['expiration_date'] = dataTablesParameters.find['expiration_date'] ? dataTablesParameters.find['expiration_date'] : {};
+                                dataTablesParameters.find['expiration_date']['$gte'] = fdate
+                            };
+                            // }
+                            if (that.todate) {
+                                var tdate = new Date(that.todate).toISOString()
+                                dataTablesParameters.find['expiration_date'] = dataTablesParameters.find['expiration_date'] ? dataTablesParameters.find['expiration_date'] : {};
+                                dataTablesParameters.find['expiration_date']['$lte'] = tdate;
+                            }
+
+                            dataTablesParameters.find['status'] = "Expired"
+
+                        }
+
+                        console.log('that.showDeleted',that.showDeleted);
+                    if (that.showDeleted === true) {
+                        dataTablesParameters.find.deletedDevice = { $exists: true };
+                        that.delFlag = true;
+                        console.log("called");
+
+
+                    } else {
+                        dataTablesParameters.find.deletedDevice = { $exists: false };
+                        that.delFlag = false;
+                        console.log("called");
+                    }
+
+                    if (that.supadm == true) {
+                        dataTablesParameters.find.supAdmin = that.useridd;
+
+                    }
+
+                    if (that.isDealer == true) {
+                        dataTablesParameters.find.Dealer = that.dlrID;
+                    }
+
+
+                    var suburl = "";
+                    suburl += "/devices/datatable";
+                    // console.log(suburl);
+                    // console.log(dataTablesParameters);
+                    // console.log(suburl)
+                    that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+                        console.log("Response from datatable=>", resp);
+                        that.colSwitch();
+                        that.data=resp.data
+                        callback(resp);
+                    }, err => {
+                        // console.log(err);
+                        // console.log(err.status);
+                    });
+                },
+                "rowCallback": function (row: Node, data: any | Object, index: number) {
+
+                    $('#edit', row).bind('click', () => {
+                      
+                        data.actionId = "edit";
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;
+                      
+                    });
+
+                    $('#renewVehicle', row).bind('click', () => {
+                      let dialogRef = that.dialog.open(RenewVehicleComponent, {
+                        width: '1030px',
+                        data: data
+                
+                    });
+
+                     dialogRef.afterClosed().subscribe(result => {
+                        if(result=='succ'){
+                             that.callfunction();
+                        }
+                     })
+                    });
+
+                    $('#delete', row).bind('click', () => {
+                        // console.log("delete Method", data);
+                        var did = data.Device_ID;
+                        // console.log(did);
+                        that.contactService.deldev(did)
+                            .subscribe(res => {
+                                // console.log(res);
+                          
+                                that.Fromdate = new Date();
+                                that.Fromdate.setHours(0, 0, 0);
+                                that.todate = new Date();
+                                that.todate;
+
+                                that.callfunction();
+                                // that.toast('device_deleted');
+                            }, err => {
+                                // that.toast('error_while_deleting');
+                                // console.log(err);
+                            })
+                    });
+                    $('#exportPDF', row).bind('click', () => {
+
+
+                        data.actionId = "exportPdf";
+
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+                        //   data.Dealer_name = JSON.parse(JSON.stringify(data))
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;
+
+                        // let dialogRef = that.dialog.open(CertOptionComponent, {
+                        //     data: { "deviceInfo": data }
+                        // });
+
+
+                        // dialogRef.afterClosed().subscribe(result => {
+                        //     // console.log(result);
+
+                        //     if (result == "advance") {
+                        //         let dialogRef_1 = that.dialog.open(EditDeviceMasterComponent, {
+                        //             data: { "deviceInfo": data },
+                        //             width: '650px',
+                        //             height: '700px',
+                        //         });
+                        //     }
+
+                            // if (result == "basic") {
+                            //     let dialogRef_2 = that.dialog.open(NormalCertComponent, {
+                            //         data: { "deviceInfo": data }
+                            //     });
+                            // }
+                        // })
+
+                    });
+                    $('#restoreDevice', row).bind('click', () => {
+                        console.log('deviceRestore', data);
+                        that.contactService.restoreDevice(data.Device_ID).subscribe(res => {
+                      
+                            that.callfunction();
+                            that.toast('device_restored');
+                        }, err => {
+                            that.toast('error_while_restoring');
+                        })
+                    });
+                    $('#reset_odo', row).bind('click', () => {
+                        console.log(data);
+                        swal({
+                            title: '<strong>RESET ODO</strong>',
+                            icon: 'info',
+                            html: 'Please confirm to reset Vehicle ODO ?',
+                            showCloseButton: true,
+                            showCancelButton: true,
+                            focusConfirm: false,
+                            confirmButtonText: 'Reset today ODO',
+                            confirmButtonAriaLabel: 'Thumbs up, great!',
+                            cancelButtonText: 'Reset total ODO',
+                            cancelButtonAriaLabel: 'Thumbs down'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                if (that.supadm === true) {
+                                    var reset_by = data.supAdmin;
+                                } else {
+                                    var reset_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+
+                                let reset_payload = {
+                                    device_id: data._id,
+                                    odo_reset_by: reset_by,
+                                    reset_identifier: true
+                                }
+                                console.log(reset_payload);
+                                that.contactService.resetODO(reset_payload).subscribe(res => {
+                                    console.log(res);
+                                    that.callfunction();
+                                    that.data_descip = "Today ODO has been Reset";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+                            }
+                        }, function (dissmiss) {
+
+                            if (dissmiss === 'cancel') {
+                                if (that.supadm === true) {
+                                    var reset_by = data.supAdmin;
+                                } else {
+                                    var reset_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+                                let reset_payload = {
+                                    device_id: data._id,
+                                    odo_reset_by: reset_by,
+                                    reset_identifier: false
+                                }
+
+                                that.contactService.resetODO(reset_payload).subscribe(res => {
+                                    that.callfunction()
+                                    that.data_descip = "Total ODO has been Reset";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+
+                            }
+                        });
+                    });
+                    $('#delete_gps_data', row).bind('click', () => {
+                        console.log(data);
+                        swal({
+                            title: '<strong>Delete History</strong>',
+                            icon: 'info',
+                            html: 'Please confirm to Delete History ?',
+                            showCloseButton: true,
+                            showCancelButton: true,
+                            focusConfirm: false,
+                            confirmButtonText: "Delete today's History",
+                            confirmButtonAriaLabel: 'Thumbs up, great!',
+                           
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                if (that.supadm === true) {
+                                    var deleted_by = data.supAdmin;
+                                } else {
+                                    var deleted_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+
+                                let reset_payload = {
+                                    device_id: data.Device_ID,
+                                    history_delete_by: deleted_by,
+                                    delete_identifier: 'today'
+                                }
+                             
+                                that.contactService.delete_gps_data(reset_payload).subscribe(res => {
+                                    console.log(res);
+                                    that.callfunction();
+                                    that.data_descip = "Device History has been deleted";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+                            }
+                        }
+                       
+                        );
+                    });
+                    $('#pdelete', row).bind('click', () => {
+                        console.log('permanent delete clicked=>', data);
+
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "You won't be able to revert this!",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Yes, delete it!'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.deletePermanently(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Deleted',
+                                        'Device Deleted',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    }) ; 
+                    $('#recalculateODO', row).bind('click', () => {
+                       
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "Vahicle ODO will be recalculated",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Recalculate'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.recalculateODO(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Reset',
+                                        'Vehicle ODO has been reset',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    });
+                    $('#clearLogs', row).bind('click', () => {
+                       
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "System Logs will be deleted",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Clear'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.deleteSystemLogs(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Deleted',
+                                        'System Logs has been deleted',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    })
+                },
+                "columns": [
+                    {
+                        "data": "Device_Name",
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "Device_ID",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "status",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "user",
+                        render: function (data, type, row) {
+                            return data ? (data.first_name + " " + data.last_name) : "";
+                        }
+                    },
+                     {
+                        "data": "user",
+                        render: function (data, type, row) {
+                            return data ? (data.user_id) : "";
+                        }
+                    },
+                    {
+                        "data": "",
+                        render: function (data, type, row) {
+                            return row.user?row.user.phone:'';
+                        }
+                    },
+                    {
+                        "data": "Dealer",
+                        render: function (data, type, row) {
+                            return data ? (data.first_name + " " + data.last_name) : "";
+                        }
+                    },
+                    {
+                        "data": "contact_number",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "renew_at",
+                        "render": function (data, type, row) {
+                            var created_time = new Date(data);
+                            return data ? (moment(created_time).format('dddd,ll,LTS')) : "";
+                        }
+                    },
+                    {
+                        "data": "expiration_date",
+                        "render": function (data, type, row) {
+                            var expired_time = new Date(data);
+                            return data ? (moment(expired_time).format('dddd,ll,LTS')) : "";
+                        }
+                    },
+                   
+                    {
+                        "data": "sim_number",
+                        "render": function (data, type, row) {
+                            return data ? data : ""
+                        }
+                    },
+                
+                    {
+                        "data": "total_odo",
+                        "render": function (data, type, row) {
+                            return data ? (parseFloat(data).toFixed(2)) : 0;
+                        }
+                    },
+                    {
+                        "data": "Email_ID",
+                        // "visible": false,
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                   {
+                        "data":null,
+                        "visible":false,
+                        "render": function (data, type, row) {
+                            // console.log(that.renewalType=="expired"?true:false);
+                            
+                            return `<button style="color: #fff;background-color: #007bff;border-color: #007bff;" id='renewVehicle'>Renew</button>`
+                        }
+                    },
+
+                ],
+
+                // columnDefs: [
+
+                // ],
+
+            });
+         
+            that.colSwitch()
+
+        });
+
+    }
+
+
+    // table edit function
+
+    // editor:any;
+    // editDataTable(){
+    //   $(document).ready(function() {
+    //     console.log("Edit function Call!!");
+    //     var outerthis= this;
+    //     outerthis.editor = new $.fn.DataTable.Editor({
+    //         ajax: "",
+    //         table: "#deviceTable",
+    //         fields: [ {
+    //                 label: "Device Name:",
+    //                 name: "Device_Name"
+    //             }, {
+    //                 label: "Device ID:",
+    //                 name: "Device_ID"
+    //             }, {
+    //                 label: "User:",
+    //                 name: "user"
+    //             }, {
+    //                 label: "Phone:",
+    //                 name: "contact_number"
+    //             }, {
+    //                 label: "renew_at:",
+    //                 name: "extn"
+    //             }, {
+    //                 label: "expiration_date:",
+    //                 name: "start_date",
+    //                 type: "datetime"
+    //             }, {
+    //                 label: "iconType:",
+    //                 name: "iconType"
+    //             }
+    //         ]
+    //     } );
+    //   })
+    // }
+
+    // editDocumentTableActivate(){
+    //   console.log("function Call!!");
+    //   var outerthis= this;
+    //   $('#deviceTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
+    //     outerthis.editor.inline( this );
+    // } );
+    // }
+
+
+    deviceObj = [];
+    // getAllDevice() {
+
+    //     var dealer: any;
+    //     // this.Load = true;
+    //     if (this.supadm) {
+    //         var supadmin: any = this.useridd;
+    //     }
+    //     if (this.isDealer) {
+    //         dealer = this.dlrID;
+    //     }
+    //     var searchh;
+    //     this.contactService.alldevices1(this.useridd, this.emailid, supadmin, dealer, searchh)
+    //         .subscribe(res => {
+    //             // this.Load = false;
+    //             console.log("allDevices=>", res);
+    //             this.deviceObj = [];
+    //             var Alldevices = {
+    //                 id: "all",
+    //                 viewValue: "ALL Devices",
+    //                 sim_Number: "ALL Devices"
+    //             }
+    //             this.deviceObj.push(Alldevices);
+
+    //             for (var i = 0; i < res.devices.length; i++) {
+    //                 Alldevices = {
+    //                     id: res.devices[i]._id,
+    //                     viewValue: res.devices[i].Device_ID ? res.devices[i].Device_ID : "",
+    //                     sim_Number: res.devices[i].sim_number ? res.devices[i].sim_number : ""
+    //                 }
+    //                 this.deviceObj.push(Alldevices)
+    //             }
+    //             // console.log("deviceArray", this.deviceObj);
+
+    //         }, err => {
+    //             // this.Load = false;
+    //             // console.log(err.status);
+    //         })
+    // }
+
+
+    deviceSelect: any = [];
+    simNumberSelect: any = [];
+    deviceName: any;
+    simnumber: any;
+    filterDevices(dlr) {
+        console.log("Device", dlr);
+
+        if (dlr == '') {
+            this.deviceSelect = [];
+        } else {
+            const filterdealerValue: any = dlr;
+
+            this.deviceSelect = [];
+            this.deviceSelect = this.deviceObj.filter(function (pp) {
+
+                var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+                return t > -1;
+            });
+            console.log(this.deviceSelect);
+            return this.deviceSelect;
+        }
+
+    }
+
+    getExactValue(dev) {
+        this.selectedDevice = dev;
+        console.log(dev);
+
+    }
+
+    getSIMValue(sim) {
+        console.log("SIM value=>", sim)
+        this.selectedDeviceWithSIM = sim;
+        console.log(sim);
+
+    }
+
+    filterDevicesbysimnumber(simnum) {
+        if (simnum == '') {
+            this.simNumberSelect = [];
+        } else {
+            const filtersimValue: any = simnum;
+            this.simNumberSelect = [];
+            this.simNumberSelect = this.deviceObj.filter(function (pptt) {
+                // debugger;
+                // console.log(pp);
+                var t = pptt.sim_Number.toLocaleLowerCase().indexOf(filtersimValue.toLocaleLowerCase());
+                return t > -1;
+            });
+            return this.simNumberSelect;
+        }
+
+    }
+
+    excelExport() {
+        console.log("inside excel download");
+        var url = this.dev_url;
+        var from = new Date(this.Fromdate);
+        var to = new Date(this.todate);
+
+        this.XLurl = url + '/devices/devReport?user=' + this.useridd + "&fromDate=" + from + "&toDate=" + to
+        console.log(this.XLurl);
+
+        // this.Load = true;
+        // this.contactService.getVehicleExcelSheet(from.toISOString(),to.toISOString(),this.useridd).subscribe(res=>{
+        //     this.Load = false;
+        //     console.log(res);
+        //     this.saveToFileSystem(res)
+
+        // })
+    }
+
+    private saveToFileSystem(response) {
+        console.log(response);
+        console.log("Inside pdf");
+        var blob = new Blob([response._body], { type: "application/xlsx" });
+
+        var filename = "Vehicledata";
+        // console.log(filename);
+        saveAs(blob, filename);
+    }
+
+    pdfExport() {
+        var doc = new jsPDF();
+        var columns = [];
+        var rows = [];
+        // doc.autoTable(columns, rows, {
+        //     margin: {top: 60},
+        // }); 
+
+        doc.fromHTML($('#content').html(), 15, 15, {
+            'width': 170,
+
+        });
+
+        doc.text("Hello world", 1, 6);
+        doc.save('Test.pdf');
+    }
+
+
+
+    colSwitch() {
+        // console.log("IN COLLLLLL",this.renewalType);
+        
+        if(this.renewalType=='expired')
+        this.tabelObj.column(12).visible(true);
+        else
+        this.tabelObj.column(12).visible(false);
+
+    }
+
+    tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+deviceObjId:any;
+getReport(event){
+  
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    console.log('this.showDeleted',event.deletedDevice);
+    if(event.deletedDevice != undefined){
+        this.showDeleted = event.deletedDevice ; 
+       
+    }
+  
+    if(event.deviceId != undefined){
+        this.deviceObjId = {"did" : event.deviceId[0],"type":event.type}   ;
+        console.log('this.deviceObjId',this.deviceObjId);
+
+    }
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+   
+  }
+ 
+}
+
+toast(divid){
+   
+    if(divid == "device_restored"){
+      this.data_descip = "Device succesfully restored";
+      launch_toast();
+    }else if(divid == "error_while_restoring"){
+      
+      this.data_descip = "Error Occured while restoring";
+      launch_toast();
+    }
+    else if(divid == "device_deleted"){
+      this.data_descip = "Device Deleted Succesfully";
+      launch_toast();
+    }
+    else if(divid == "error_while_deleting"){
+      this.data_descip = "Error Occured while deleting";
+      launch_toast();
+    }
+    else if(divid == "device_edited"){
+      this.data_descip = "Information updated successfully";
+      launch_toast();
+    }else{
+         this.data_descip = "Notifications Sent Successfully";
+      launch_toast();
+    }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+     }
+
+messageSend(){
+    var msgContent
+    if(this.renewalType=="pending"){
+        msgContent="Your GPS lincense is going to expire soon.Please contact your service provider for renewal.Your service provider contact no is "+this.phone
+    }else{
+        msgContent="Your GPS lincense has expired.Please contact your service provider for renewal.Your service provider contact no is "+this.phone
+    }
+    if(this.data.length === 0){
+      this.data_descip = 'Please Select all Mendatory Fields';
+    //   this.launch_toast()
+      return;
+    }
+    var phoneObject = [];
+    for(var i = 0 ;i <this.data.length;i++){
+        console.log(this.data[i]);
+        
+      var pObj = {
+        phone : this.data[i].user.phone
+      }
+      var contains = phoneObject.some(elem =>{
+          console.log(JSON.stringify(pObj) === JSON.stringify(elem),typeof(pObj),typeof(elem));
+          
+        return JSON.stringify(pObj) === JSON.stringify(elem);
+    });
+    if (!contains) {
+    phoneObject.push(pObj)
+    }
+
+    }
+    var payLoad = {
+      numberArr : phoneObject,
+      messageTitle : "GPS license Expiration",
+      msgContent:msgContent,
+      notificationType:'NOTIFICATION'
+    }
+      console.log(payLoad);
+      this.contactService.sendMessages(payLoad).subscribe(res=>{
+        console.log(res);
+        this.toast('')
+      })
+
+
+  }
+
+     
+}
diff --git a/src/app/device-report/ac-report/ac-report.component.html b/src/app/device-report/ac-report/ac-report.component.html
new file mode 100644
index 0000000..ffcba44
--- /dev/null
+++ b/src/app/device-report/ac-report/ac-report.component.html
@@ -0,0 +1,56 @@
+<app-all-menus></app-all-menus>
+  <div style="min-height:100vh;padding-top: 5%;">
+    <p class="headStyle">{{'AC Report' | translate}}</p>
+    <div class="InputStyle">
+      <div class="row" style="margin-left: 50px;">
+        <div class="col-md-3">
+            <md-input-container>
+            <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option"
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.value">
+                <span>{{ option.value }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="ac_report()">{{'SEARCH' | translate}}</button>
+            <!-- <a id="download" href="{{XLurl}}" target="_blank" download style="text-decoration:none;"> -->
+            <!-- <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button> -->
+            <!-- </a> -->
+          </div>
+      </div>
+    </div>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
+    <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+       <thead style="background-color:#A2C523;color: white;">
+        <tr >
+          <th style="text-align: center">{{'Vehicle' |  translate}}</th>
+          <!-- <th>Action</th> -->
+          <th style="text-align: center">{{'ON Time' | translate}}</th>
+          <!-- <th>Action</th> -->
+          <th style="text-align: center">{{'OFF Time' | translate}}</th>
+      </thead>
+      <tbody >
+        <tr *ngFor="let report of acObject" >
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.vehicleNumber?report.vehicleNumber:""}}</td>
+          <!-- <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.action1?report.action1:""}}</td> -->
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionOnDuration?report.actionOnDuration:0)}}</td>
+          <!-- <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.action2?report.action2:""}}</td> -->
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionoffDuration?report.actionoffDuration:0)}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
\ No newline at end of file
diff --git a/src/app/device-report/ac-report/ac-report.component.scss b/src/app/device-report/ac-report/ac-report.component.scss
new file mode 100644
index 0000000..5c39046
--- /dev/null
+++ b/src/app/device-report/ac-report/ac-report.component.scss
@@ -0,0 +1,15 @@
+.headStyle{
+    text-align: center;
+    font-size: 20px;
+    margin-top: 30px;
+}
+
+
+/deep/ .mat-menu-panel.test{
+    margin-top: 25px;
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+}
\ No newline at end of file
diff --git a/src/app/device-report/ac-report/ac-report.component.spec.ts b/src/app/device-report/ac-report/ac-report.component.spec.ts
new file mode 100644
index 0000000..39009e7
--- /dev/null
+++ b/src/app/device-report/ac-report/ac-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcReportComponent } from './ac-report.component';
+
+describe('AcReportComponent', () => {
+  let component: AcReportComponent;
+  let fixture: ComponentFixture<AcReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/ac-report/ac-report.component.ts b/src/app/device-report/ac-report/ac-report.component.ts
new file mode 100644
index 0000000..1bac0e1
--- /dev/null
+++ b/src/app/device-report/ac-report/ac-report.component.ts
@@ -0,0 +1,205 @@
+import { Component, OnInit } from '@angular/core';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../contact.service';
+import { AcreportInfoComponent } from './acreport-info/acreport-info.component';
+
+
+@Component({
+  selector: 'app-ac-report',
+  templateUrl: './ac-report.component.html',
+  styleUrls: ['./ac-report.component.scss']
+})
+export class AcReportComponent implements OnInit {
+
+  ignition_data: any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate=new Date();
+  options=[];
+  logo:any;
+  superAdmin:Boolean = false;
+
+  t:any;
+  dataSelect: any[];
+  vname: string;
+  primaryObj: any;
+  errorMsg: string;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log("ignition option",this.options);
+      });
+
+
+
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+        
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+
+  }
+
+
+
+errorDialog:boolean = false;
+tableArr =[];
+acObject:any=[];
+ac_report(){
+  this.acObject =[];
+  this.Load = true;
+  console.log(this.dataSelect);
+    if(this.dataSelect.length != 0){
+    this.vname = this.dataSelect[0].did;
+  
+  }else{
+    this.vname = '';
+  }
+  this.errorDialog = false;
+  console.log(this.vname);
+  this.contactService.acReportMain(this.Fromdate,this.todate,this.useridd,this.vname).subscribe(res=>{
+    this.Load = false;
+    this.primaryObj = res;
+    console.log(this.primaryObj);
+    if(this.primaryObj.length != 0){
+      for(var i = 0;i<this.primaryObj.length;i++){
+        var reportData = {
+          vehicleNumber : this.primaryObj[i].VehicleName ? this.primaryObj[i].VehicleName :"",
+          action1 : this.primaryObj[i]['1stAction'],
+          actionOnDuration  : (this.primaryObj[i]['1stAction'] == 'ON')?this.primaryObj[i]['1stTime'] : this.primaryObj[i]['2stTime'],
+          action2: this.primaryObj[i]['2stAction'],
+          actionoffDuration : (this.primaryObj[i]['1stAction'] == 'OFF')?this.primaryObj[i]['1stTime'] : this.primaryObj[i]['2stTime'],
+          imei : this.primaryObj[i].imei
+        }
+     
+        this.acObject.push(reportData);
+
+    }
+    }else{
+      this.errorDialog = true;
+      this.errorMsg = 'No data Found';
+    }
+ 
+     console.log('this.acObject',this.acObject);
+  },err=>{
+    this.Load = false;
+  })
+
+}
+
+
+
+exportExcel(){
+  
+}
+
+additionalDetails(infoObject){
+  infoObject.fromDate = this.Fromdate;
+  infoObject.toDate = this.todate;
+  let dialogRef = this.dialog.open(AcreportInfoComponent, {
+    width: '800px',  
+    data: {"deviceInfo":infoObject}   
+  
+  });
+}
+
+
+timeconversion(total_min){
+ 
+  var hours = parseInt(total_min) / 60
+  var rhours = Math.floor(hours);
+  var minutes = (hours - rhours) * 60;
+  var rminutes = Math.round(minutes);
+
+  var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+  return Durations ;
+}
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val) {
+    const filterValue:any = val
+     this.dataSelect = this.options.filter( function(d){
+  
+      return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+    });
+    return this.dataSelect;
+  }
+
+}
+
+}
diff --git a/src/app/device-report/ac-report/acreport-info/acreport-info.component.html b/src/app/device-report/ac-report/acreport-info/acreport-info.component.html
new file mode 100644
index 0000000..887fa3d
--- /dev/null
+++ b/src/app/device-report/ac-report/acreport-info/acreport-info.component.html
@@ -0,0 +1,22 @@
+<div style="max-height: 550px;height: auto;border-radius: 8px">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div *ngIf="showError">
+    <p></p>
+  </div>
+  <table id="test" class="table table-striped table-hover" style="height: 500px ;overflow: auto;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Vehicle' | translate}}</th>
+        <th style="text-align: center">{{'On/Off' | translate}}</th>
+        <th style="text-align: center">{{'Time' | translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let report of tableArr; let i=index;">
+        <td style="text-align: center">{{report.vehicleName}}</td>
+        <td style="text-align: center">{{report.action}}</td>
+        <td style="text-align: center">{{report.actionTime | date : 'medium'}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/ac-report/acreport-info/acreport-info.component.scss b/src/app/device-report/ac-report/acreport-info/acreport-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device-report/ac-report/acreport-info/acreport-info.component.spec.ts b/src/app/device-report/ac-report/acreport-info/acreport-info.component.spec.ts
new file mode 100644
index 0000000..ff8095f
--- /dev/null
+++ b/src/app/device-report/ac-report/acreport-info/acreport-info.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcreportInfoComponent } from './acreport-info.component';
+
+describe('AcreportInfoComponent', () => {
+  let component: AcreportInfoComponent;
+  let fixture: ComponentFixture<AcreportInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcreportInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcreportInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/ac-report/acreport-info/acreport-info.component.ts b/src/app/device-report/ac-report/acreport-info/acreport-info.component.ts
new file mode 100644
index 0000000..79602b2
--- /dev/null
+++ b/src/app/device-report/ac-report/acreport-info/acreport-info.component.ts
@@ -0,0 +1,71 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../contact.service';
+
+@Component({
+  selector: 'app-acreport-info',
+  templateUrl: './acreport-info.component.html',
+  styleUrls: ['./acreport-info.component.scss']
+})
+export class AcreportInfoComponent implements OnInit {
+  useridd: any;
+  Fromdate: any;
+  todate: any;
+  vehimei: any;
+  Load : boolean = false;
+  errorMsg: string;
+
+  constructor(public dialogRef: MdDialogRef<AcreportInfoComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+
+      console.log('data=>',data);
+      console.log('data.fromDate',data.deviceInfo.fromDate);
+      console.log('data.toDate',data.deviceInfo.toDate);
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.Fromdate = new Date(data.deviceInfo.fromDate);
+      this.todate = new Date(data.deviceInfo.toDate);
+      this.vehimei = data.deviceInfo.imei;
+      console.log(data.deviceInfo);
+      console.log(this.vehimei);
+      
+     }
+
+  ngOnInit() {
+    this.ac_report();
+  }
+
+
+   
+tableArr =[];
+showError:boolean = false;
+ac_report(){
+  this.Load = true;
+  this.contactService.acReport(new Date(this.Fromdate),new Date(this.todate),this.useridd,this.vehimei).subscribe(res=>{
+    this.Load = false;
+    var acObject = res;
+    console.log(acObject);
+    if(res.length != 0){
+      for(var i = 0;i<res.length;i++){
+        var veh =res[i]._id;
+        for(var j = 0;j<res[i].s.length;j++){  
+        var tableObj = {vehicleName:veh,action:res[i].s[j].switch,actionTime : res[i].s[j].timestamp}
+        this.tableArr.push(tableObj);    
+        }
+  
+      }
+    }else{
+      console.log('no data found') ;
+      
+
+    }
+
+    console.log(this.tableArr);
+  },err=>{
+    // this.Load = false;
+    this.showError = true;
+    this.errorMsg = "Unable to fetch detail , please try after sometime";
+  })
+
+}
+
+}
diff --git a/src/app/device-report/alert-report/alert-report.component.html b/src/app/device-report/alert-report/alert-report.component.html
new file mode 100644
index 0000000..0bb64a2
--- /dev/null
+++ b/src/app/device-report/alert-report/alert-report.component.html
@@ -0,0 +1,85 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <app-all-menus></app-all-menus>
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+
+  <div style="min-height:100vh">
+    <p class="headStyle">{{'Alert Report' | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--Select Device--"  ngDefaultControl>
+            <md-option *ngFor="let option of options" [value]="option">
+              {{ option.value }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="alertReport(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead>
+        <tr>
+          <th>{{'No' | translate}}</th>
+          <th> {{'Date' | translate}}</th>
+          <th>{{'Power Cut' | translate}}</th>
+          <th>{{'Battery' | translate}}</th> 
+          <th>{{'SOS' | translate}}</th>   
+          <th>{{'Ignition' | translate}}</th> 
+          <th>{{'Geofencing' | translate}}</th> 
+          <th>{{'Overspeeding' | translate}}</th>    
+
+        </tr>
+      </thead>
+      <tbody>
+        <!-- <tr *ngFor="let device of alert_data">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.overSpeed}}</td>
+          <td style="cursor:pointer">{{device.address}}</td>
+          <td style="cursor:pointer">{{device.timestamp}}</td>
+        </tr> -->
+      </tbody>
+    </table>
+
+
+
+  </div>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/device-report/alert-report/alert-report.component.scss b/src/app/device-report/alert-report/alert-report.component.scss
new file mode 100644
index 0000000..ede7a15
--- /dev/null
+++ b/src/app/device-report/alert-report/alert-report.component.scss
@@ -0,0 +1,1094 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+  
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+
+    // .dtStyle{
+
+    // }
+  }
+  
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
+
+    
\ No newline at end of file
diff --git a/src/app/device-report/alert-report/alert-report.component.spec.ts b/src/app/device-report/alert-report/alert-report.component.spec.ts
new file mode 100644
index 0000000..b929063
--- /dev/null
+++ b/src/app/device-report/alert-report/alert-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertReportComponent } from './alert-report.component';
+
+describe('AlertReportComponent', () => {
+  let component: AlertReportComponent;
+  let fixture: ComponentFixture<AlertReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/alert-report/alert-report.component.ts b/src/app/device-report/alert-report/alert-report.component.ts
new file mode 100644
index 0000000..1a7bc23
--- /dev/null
+++ b/src/app/device-report/alert-report/alert-report.component.ts
@@ -0,0 +1,295 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Component({
+  selector: 'app-alert-report',
+  templateUrl: './alert-report.component.html',
+  styleUrls: ['./alert-report.component.scss']
+})
+export class AlertReportComponent implements OnInit {
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate= new Date();
+  options=[];
+  logo:any;
+  before:any;
+
+  superAdmin:Boolean = false;
+  date1:any;
+
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log(this.options);
+      });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       
+  }
+
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+
+  vehicleRoute(){
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+
+  notification(){
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  driverPerformance(){
+    this.cond = false;
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+alert_data=[];
+
+alertreport(){
+  this.cond = false
+
+  this.router.navigateByUrl("device-report/alert_report");
+
+}
+
+alertReport(Fromdate,todate,option){
+  // console.log("alert Details");
+}
+
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+
+
+
+}
diff --git a/src/app/device-report/daily-details/daily-details.component.html b/src/app/device-report/daily-details/daily-details.component.html
new file mode 100644
index 0000000..28a02a6
--- /dev/null
+++ b/src/app/device-report/daily-details/daily-details.component.html
@@ -0,0 +1,91 @@
+<div class=modal-header style="margin-bottom: 6px;">
+  <h4>Trip Details</h4>
+  <div class="text-right">
+    <button class="mat-raised-button" md-raised-button="" style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
+              width: 110px;" (click)="exportExcel()"><span class="mat-button-wrapper">Export To
+        Excel</span>
+      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+      <div class="mat-button-focus-overlay"></div>
+    </button>
+    <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
+                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i
+          class="fa fa-times" aria-hidden="true"></i>
+      </span>
+      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+      <div class="mat-button-focus-overlay"></div>
+    </button>
+  </div>
+</div>
+<h5>{{DeviceName}} &nbsp;&nbsp;{{date | date}}</h5>
+<div class="row">
+<div class="col-sm-3 col-md-3 col-lg-3">
+
+<table style="margin-top: 35px;" class="table table-bordered">
+  <tbody>
+    <tr>
+      <th>Distance</th>
+      <td>{{mainData.today_odo | number:'1.1-2'}}</td>
+     
+    </tr>
+    <tr>
+      <th>Running</th>
+      <td>{{Running}}</td>
+    
+    </tr>
+    <tr>
+      <th>Idle</th>
+      <td>{{Idle}}</td>
+     
+    </tr>
+    <tr>
+      <th>Stop</th>
+      <td>{{Stop}}</td>
+     
+    </tr>
+  </tbody>
+</table>
+
+</div>
+<div class="col-sm-9 col-md-9 col-lg-9">
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <!-- <div class="col-sm-12 col-md-12 col-lg-12">
+          <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+            style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+            | translate}} >></button>
+          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+            style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+            << {{'Previous' | translate}}</button>
+        </div> -->
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="loading" *ngIf="Load">Loading&#8230;</div>
+          <div>
+            <table id="dailyDetailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align: left;">{{'Event' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Time' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                  <th style="text-align: left;">{{'End Time' | translate}}</th>
+                  <th style="text-align: left;">{{'End Location' | translate}}</th>
+                  <th style="text-align: left;">{{'Duration' | translate}}</th>
+                  <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                  <!--<th style="text-align: left;">{{'Details' | translate}}</th> -->
+
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/daily-details/daily-details.component.scss b/src/app/device-report/daily-details/daily-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device-report/daily-details/daily-details.component.spec.ts b/src/app/device-report/daily-details/daily-details.component.spec.ts
new file mode 100644
index 0000000..7d2944b
--- /dev/null
+++ b/src/app/device-report/daily-details/daily-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DailyDetailsComponent } from './daily-details.component';
+
+describe('DailyDetailsComponent', () => {
+  let component: DailyDetailsComponent;
+  let fixture: ComponentFixture<DailyDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DailyDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/daily-details/daily-details.component.ts b/src/app/device-report/daily-details/daily-details.component.ts
new file mode 100644
index 0000000..9c5c93e
--- /dev/null
+++ b/src/app/device-report/daily-details/daily-details.component.ts
@@ -0,0 +1,505 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $: any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-daily-details',
+  templateUrl: './daily-details.component.html',
+  styleUrls: ['./daily-details.component.scss']
+})
+export class DailyDetailsComponent implements OnInit {
+  Load: boolean;
+  Fromdate: any;
+  todate: any;
+  useridd: any;
+  skip: any;
+  deviceArr: any;
+  reportArr: any[];
+  firstcall: boolean;
+  lastcall: boolean;
+date:any;
+device_id:any
+mainData
+Running
+Idle
+Stop
+DeviceName
+  constructor(public dialogRef: MdDialogRef<DailyDetailsComponent>,private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+       console.log('data=>',data);
+       this.mainData=data.data
+       this.Running=this.millisecondConversion(this.mainData.today_running);
+       this.Idle=this.millisecondConversion(this.mainData.t_idling);
+       this.Stop=this.millisecondConversion(this.mainData.today_stopped);
+       this.date=data.date;
+        this.DeviceName=this.mainData.Device_Name
+       this.device_id=data.data._id
+     
+    }
+
+
+  ngOnInit() {
+    this.testTable()
+  }
+  // Start Time	Start Location	Start Odometer	Start Coordinate	Reach Time	Reach Location	End Odometer	Reach Coordinate	Driver	Distance	Total Distance	Running 	Idle	Stop	AVG	MAX	Over Speed	Alert
+
+  tabelObj: any ;
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#dailyDetailsTable').DataTable({
+             
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+
+             
+            },
+          ajax: (dataTablesParameters,callback) => {
+           
+              var deviceID;
+              
+              that.Load = true;
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+        // user_trip/StoppageLogs?date=2020-12-31T11:48:45.670Z&device=5fc8af44aa0b1b5f1b778fcf
+            var suburl = "";
+            var limit = 26;
+            suburl += "/user_trip/StoppageLogs?date=" + that.date +"&device="+that.device_id
+            // if(that.deviceArr.length != 0){  
+            //   suburl +='&device='+that.deviceArr;
+            // }
+            that.contactService.get(suburl).subscribe((resp:any) => {   
+                that.Load = false;  
+                that.reportArr = [];
+                that.reportArr= resp.result ;           
+                if (that.reportArr.length != 0) {
+                  var j = 0;
+                  console.log(that.reportArr);
+                  
+                  var finalArr =  []
+                  // console.log(finalArr);
+                  for (var i = 0; i < that.reportArr.length; i++) {
+                  
+    
+                    that.clocation_1(that.reportArr[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        finalArr.push(succ);
+                        console.log(finalArr);
+                        j++;
+                        if (j === that.reportArr.length) {
+                          that.Load = false;
+                          finalArr.sort((a, b) => new Date(b.start_time).valueOf() - new Date(a.start_time).valueOf());
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+                } else {
+                  that.Load = false;
+                  that.firstcall=true;
+                  that.lastcall=(that.skip>0)?false:true;
+                  callback({ data: [] });
+    
+                }
+            }, err => {   
+              that.Load= false;    
+              callback({ data: [] });
+              console.log("error",err) ;     
+            });
+        },  "aaSorting": [],
+          "columns": [
+              {
+                  "data": "type",
+                  "render": function(data, type, row) {                   
+                    return row.type;
+                  }
+              },
+               {
+                  "data": "start_time",
+                  "render": function(data, type, row) {  
+                    var start_time
+                     if(row != undefined){
+                  //  start_time =  row.start_time;
+                   start_time =moment(row.start_time).format('lll')
+                  }else{
+                    start_time = '0:0'
+                  }
+                    return start_time;
+                  }
+              },
+              {
+                  "data": "startAddress",
+                  "render": function(data, type, row) {  
+                    
+                    return data;
+                  }
+              },
+              {
+                  "data": "end_time",
+                  "render": function(data, type, row) {  
+                     var end_time
+                     if(row != undefined){
+                  //  end_time =  row.end_time;
+                    end_time =moment(row.end_time).format('lll')  
+                  }else{
+                    end_time = '0:0'
+                  }
+                    return end_time;
+                  }                 
+                    // return end_time;
+                  },
+                  
+              {
+                  "data": "endAddress",
+                  "render": function(data, type, row) {  
+                     
+                    return data;
+                  }                 
+                    // return end_time;
+                  },
+              
+               {
+                  "data": "event_time",
+                  "render": function(data, type, row) { 
+                      var event_time
+                     if(row != undefined){
+                       
+                   event_time =  that.millisecondConversion(parseInt(row.event_time));
+                  }else{
+                    event_time = '0:0'
+                  }
+                    return event_time;
+                  }   
+                    // return row.event_time;
+                  },
+                  {
+                  "data": "distance",
+                  "render": function(data, type, row) { 
+                      var distance
+                  if(row.distance != undefined){
+                      distance =  (row.distance/1000).toFixed(2);
+                  }else{
+                    distance = '0:0'
+                  }
+                    return distance;
+                  }   
+                    
+                  }
+              // },
+     
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5] },  
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },  
+          { "width": "10px", "targets": 4 },
+          { "width": "10px", "targets": 5 },   
+ 
+    //       {
+    //     targets: -1, //-1 es la ultima columna y 0 la primera
+    //     data: null,
+    //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+    // },
+          ] 
+      });
+      // that.tabelObj.sort
+
+  });
+
+}
+
+millisecondConversion(duration){
+  
+  // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+  //   var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    
+  //   hours = (hours < 10) ? 0 + hours : hours;
+  //   minutes = (minutes < 10) ? 0 + minutes : minutes;
+    
+  //   return hours + ":" + minutes ;
+    
+    var x = duration;
+    var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours + ":" + mins;
+  
+}
+millisecondConversion2(totalSeconds){
+  var minute= totalSeconds/60000
+  var second=0
+  var totalTime
+  if(minute>=60){
+    totalTime=minute/60
+  }else{
+    totalTime=minute
+  }
+  console.log(totalTime);
+  
+  return totalTime;
+  // var hours   = Math.floor(totalSeconds / 3600);
+  // var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
+  // var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
+
+  // // round seconds
+  // seconds = Math.round(seconds * 100) / 100
+
+  // var result = (hours < 10 ? "0" + hours : hours);
+  //     result += "-" + (minutes < 10 ? "0" + minutes : minutes);
+  //     result += "-" + (seconds  < 10 ? "0" + seconds : seconds);
+  // return result;
+
+}
+exportExcel() {
+  for(var i=0;i<this.reportArr.length;i++){
+    if(this.reportArr[i].event_time)
+    this.reportArr[i].event_time=this.millisecondConversion(parseInt(this.reportArr[i].event_time));
+    if(this.reportArr[i].distance)
+    this.reportArr[i].distance=(this.reportArr[i].distance/1000).toFixed(2);
+  }
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Trip Details') {
+   
+    let arrHeader = ["type", "start_time", "startAddress", "end_time","endAddress","event_time","distance"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Trip Details.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Trip Details \r\n'+this.DeviceName+"   "+this.date+" \r\n"+"Distance: "+(this.mainData.today_odo).toFixed(2)+" \r\n"+
+    "Running:"+this.Running+" \r\n"+"Idle:"+this.Idle+" \r\n"+"Stop:"+this.Stop+" \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders =["Event", "Start Time", "Start Location", "End Time","End Location","Duration","Total K.M."];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+tab:any;
+  exportExcels()
+	{
+   console.log("Export");
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#dailyDetailsTable').clone();
+    
+      table[1].querySelector("thead").remove();
+      // table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+    
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  clocation_1(latlngObj,cb){
+console.log(latlngObj);
+
+  var outerThis = this;
+  var la = '';
+
+  let latLng = {
+    lat :"0",
+    long:"0"
+  };
+  if(latlngObj.start_lat){
+     latLng = {
+      lat: latlngObj.start_lat?latlngObj.start_lat:0,
+      long:latlngObj.start_long?latlngObj.start_long:0
+    }
+  }
+  // if(latlngObj.today_start_location){  
+  //    latLng = {
+  //     lat: latlngObj.today_start_location.lat?latlngObj.today_start_location.lat:0,
+  //     long: latlngObj.today_start_location.long?latlngObj.today_start_location.long:0
+  //   }        
+  // }  
+
+  // if () {
+  //   latLng = {
+  //     lat: 0,
+  //     long: 0
+  //   }
+  // }
+  
+  outerThis.contactService.getAddressByApi(latLng).subscribe(res=>{       
+    console.log('resaddresscomingfromAPi',res);   
+    if(res.message == "Address not found in databse"){
+        latlngObj['startAddress'] = "NA"; 
+      // cb(null,latlngObj);
+        var latLng_1 = {
+          lat :"0",
+          long:"0"
+        };
+        if(latlngObj.end_lat){
+          latLng_1 = {
+            lat: latlngObj.end_lat?latlngObj.end_lat:0,
+            long:latlngObj.end_long?latlngObj.end_long:0
+          }
+         
+        }
+        // if(latlngObj.end_location){  
+        //   latLng_1 = {
+        //     lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+        //     long: latlngObj.end_location.long?latlngObj.end_location.long:0
+        //   }
+        // }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+          console.log('resaddresscomingfromAPi',res);
+          if(res.message == "Address not found in databse"){
+            latlngObj['endAddress'] = "NA"; 
+            cb(null,latlngObj);
+
+        
+          }else{
+            latlngObj['endAddress'] = res.address; 
+            cb(null,latlngObj);
+          }
+
+        })
+  
+    }else{  
+      latlngObj['startAddress'] = res.address; 
+      var latLng_1 = {
+        lat :"0",
+        long:"0"
+      };
+      if(latlngObj.end_lat){
+        latLng_1 = {
+          lat: latlngObj.end_lat?latlngObj.end_lat:0,
+          long:latlngObj.end_long?latlngObj.end_long:0
+        }
+       
+      }
+      // if(latlngObj.end_location){  
+      //   latLng_1 = {
+      //     lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+      //     long: latlngObj.end_location.long?latlngObj.end_location.long:0
+      //   }
+      // }
+
+     
+      outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+        console.log('resaddresscomingfromAPi',res);
+        if(res.message == "Address not found in databse"){
+          latlngObj['endAddress'] = "NA"; 
+          cb(null,latlngObj);
+
+      
+        }else{
+          latlngObj['endAddress'] = res.address; 
+          cb(null,latlngObj);
+        }
+
+      })
+
+      // cb(null,latlngObj);
+    }
+  })
+
+}
+
+
+
+
+
+}
diff --git a/src/app/device-report/daily-logs/daily-logs.component.html b/src/app/device-report/daily-logs/daily-logs.component.html
new file mode 100644
index 0000000..e2c9df2
--- /dev/null
+++ b/src/app/device-report/daily-logs/daily-logs.component.html
@@ -0,0 +1,61 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>Daily Logs</h4>
+      <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th style="text-align:left;" title="Vehicle Name">{{'Vehicle' | translate}}</th>
+                    <th style="text-align:left;" title = "Device IMEI">{{'IMEI' | translate}}</th>       
+                    <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF'| translate}}</th>
+                    <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
+                    <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
+                    <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{"No GPS"|translate}}</th>
+                    <th style="text-align:left;">{{'Trips' | translate}}</th>
+                    <th style="text-align:left;" title="Max Speed (Km/hr)">{{"Max Speed" | translate}}</th>  
+                    <th style="text-align:left;" >{{'Start Location' | translate}}</th>  
+                    <th style="text-align:left;">{{'End Location' | translate}}</th>  
+                    <th style="text-align:left;" >{{'Start ODO (Kms.)' | translate}}</th>  
+                    <th style="text-align:left;">{{'End ODO (Kms.)' | translate}}</th>  
+                    <th style="text-align:left;" title="(As per Logbook)">{{'Total KMS (As per Logbook)' | translate}}</th>  
+                    <th style="text-align:left;" title="Total Distance (Km)">{{'Total KMS (As per GPS)' | translate}}</th>
+                    <th style="text-align:left;" title="(As per Logbook and gps)">{{'Difference In Logbook and Gps' | translate}}</th>  
+                    <th style="text-align:left;">{{'% of difference' | translate}}</th> 
+             
+                  </tr>
+              </thead>  
+          </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
diff --git a/src/app/device-report/daily-logs/daily-logs.component.scss b/src/app/device-report/daily-logs/daily-logs.component.scss
new file mode 100644
index 0000000..caced4f
--- /dev/null
+++ b/src/app/device-report/daily-logs/daily-logs.component.scss
@@ -0,0 +1,89 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
+
+    #toast {
+      visibility: hidden;
+      max-width: 250px;
+      height: 50px;
+      /*margin-left: -125px;*/
+      margin: auto;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      border-radius: 2px;
+  
+      position: fixed;
+      z-index: 1;
+      left: 60%;right:0;
+      bottom: 80%;
+      font-size: 13px;
+      white-space: nowrap;
+  }
+  #toast #img{
+    width: 250px;
+    height: 50px;
+      
+      float: left;
+      
+      padding-top: 16px;
+      padding-bottom: 16px;
+      
+      box-sizing: border-box;
+  
+      
+      background-color: #111;
+      color: #fff;
+  }
+  #toast #desc{
+  
+      
+      color: #fff;
+     
+      padding: 16px;
+      
+      overflow: hidden;
+    white-space: nowrap;
+  }
+  
+  #toast.show {
+      visibility: visible;
+      -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+      animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+  }
\ No newline at end of file
diff --git a/src/app/device-report/daily-logs/daily-logs.component.spec.ts b/src/app/device-report/daily-logs/daily-logs.component.spec.ts
new file mode 100644
index 0000000..b17dd46
--- /dev/null
+++ b/src/app/device-report/daily-logs/daily-logs.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DailyLogsComponent } from './daily-logs.component';
+
+describe('DailyLogsComponent', () => {
+  let component: DailyLogsComponent;
+  let fixture: ComponentFixture<DailyLogsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DailyLogsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyLogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/daily-logs/daily-logs.component.ts b/src/app/device-report/daily-logs/daily-logs.component.ts
new file mode 100644
index 0000000..ef72726
--- /dev/null
+++ b/src/app/device-report/daily-logs/daily-logs.component.ts
@@ -0,0 +1,797 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { ContactService } from '../../contact.service';
+declare var $: any;
+declare var moment : any;
+
+@Component({
+  selector: 'app-daily-logs',
+  templateUrl: './daily-logs.component.html',
+  styleUrls: ['./daily-logs.component.scss']
+})
+export class DailyLogsComponent implements OnInit {
+  deviceArr: any = [];
+  showSelectdevice: boolean = false;
+  identifier = 'daily_report';
+  reportArr: any[];
+  ingData: any
+  from1: any;
+  to1: any;
+  from2: any;
+  to2: any;
+  too: any;
+  date1: any;
+  Fromdate: any;
+  todate: any;
+  options = [];
+  option: any;
+  dataSelect: any = [];
+  from: any;
+  to: any;
+  before: any;
+  mb: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  superAdmin: Boolean = false;
+
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  device_data: any;
+  time: any;
+  Load: Boolean = false;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  devicess: any;
+  finall: any;
+  logo: any;
+  text: any;
+  test: number;
+  data_descip:any;
+
+  constructor(private contactService: ContactService, private router: Router, public dialog: MdDialog) { }
+
+  ngOnInit() {
+    this.dataSelect = [];
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.getDevices();
+    // this.dailyReport();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+    this.testTable();
+
+  }
+
+
+  tab: any;
+  exportExcel() {
+
+
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+      //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text = tab_text + "</table>";
+    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+
+  skip: number = 0;
+  limit: number = 10;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+
+
+  tabelObj: any;
+  callfunction(): void {
+    this.Load = true;
+    this.deviceArr = $('#select').multipleSelect('getSelects', 'value');
+    this.tabelObj.draw();
+  }
+  dtOptions: any = {}
+  testTable() {
+    const that = this;
+
+    this.Load = true;
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],
+        "processing": true,
+        "searching": false,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: true,
+        "scrollY": '55vh',
+        "scrollX": true,
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters: any, callback) => {
+          that.Load = true;
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+          var currDay = new Date().getDay();
+          var currMonth = new Date().getMonth();
+          var currYear = new Date().getFullYear();
+          var selectedDay = new Date(that.date1).getDay();
+          var selectedMonth = new Date(that.date1).getMonth();
+          var selectedYear = new Date(that.date1).getFullYear();
+
+          if ((currDay == selectedDay) && (currMonth == selectedMonth) && (currYear == selectedYear)) {
+            var devname = "Device_Name";
+            var devid = "Device_ID";
+            var today_odo = "today_odo";
+            var today_running = "today_running";
+            var today_stopped = "today_stopped";
+            var today_trips = "today_trips";
+            var maxSpeed = "maxSpeed";
+            var Mileage = "Mileage";
+            var start_location_lat = "today_start_location.lat";
+            var start_location_long = "today_start_location.long";
+            var end_location_lat = "last_location.lat";
+            var end_location_long = "last_location.long";
+            var start_odo_manual = "start_odo_manual";
+            var end_odo_manual = "end_odo_manual";
+
+          } else {
+
+            var devid = "imei";
+            var devname = "ID.Device_Name";
+            var today_odo = "today_odo";
+            var today_running = "today_running";
+            var today_stopped = "today_stopped";
+            var today_trips = "today_trips";
+            var maxSpeed = "ID.maxSpeed";
+            var Mileage = "Mileage";
+            var start_location_lat = "start_location.lat";
+            var start_location_long = "start_location.long";
+            var end_location_lat = "end_location.lat";
+            var end_location_long = "end_location.long";
+            var start_odo_manual = "start_odo_manual";
+            var end_odo_manual = "end_odo_manual";
+
+          }
+
+          dataTablesParameters.columns = [
+            // {data: "_id" },
+            { data: devname },
+            { data: devid },
+            { data: today_odo },
+            { data: today_running },
+            { data: Mileage },
+            { data: today_stopped },
+            { data: today_trips },
+            { data: maxSpeed },
+            { data: "t_idling" },
+            { data: "t_noGps" },
+            { data: "t_ofr" },
+            { data: start_location_lat },
+            { data: start_location_long },
+            { data: end_location_lat },
+            { data: end_location_long },
+            { data: start_odo_manual },
+            { data: end_odo_manual },
+            { data: null, defaultContent: '' }
+          ]
+
+          var deviceID;
+          dataTablesParameters.find.user_id = that.useridd;
+
+          if (that.deviceArr.length != 0) {
+
+            var dev_in = { '$in': that.deviceArr };
+            dataTablesParameters.find.devId = dev_in;
+          }
+
+          // if ((that.dataSelect.length!=0)&&(that.dataSelect[0].did!='all')) {
+          //     dataTablesParameters.find.devId = that.dataSelect[0].did;
+          // }
+
+          if (that.date1) {
+            var fdate = new Date(that.date1).toISOString()
+            // dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find.date = fdate
+          };
+          if(that.date1 && that.deviceArr.length != 0){
+          var suburl = "";
+          suburl += "/devices/daily_report";
+          that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+            that.reportArr = [];
+            that.reportArr = resp['data'];
+            if (that.reportArr.length != 0) {
+              var j = 0;
+              var finalArr = [];
+              for (var i = 0; i < that.reportArr.length; i++) {
+
+                that.clocation_1(that.reportArr[i], function (err, succ) {
+                  if (err) {
+                    console.log(err);
+                    j++;
+                  } else {
+                    finalArr.push(succ);
+                    console.log(finalArr);
+                    j++;
+                    if (j === that.reportArr.length) {
+                      callback({ data: finalArr });
+                    }
+                  }
+                })
+
+                that.Load = false;
+              }
+            } else {
+              that.Load = false;
+              callback({ data: [] });
+
+            }
+
+            // that.Load= false;         
+            // callback(resp);
+          }, err => {
+            that.Load = false;
+
+          });
+        }else {
+              that.Load = false;
+              callback({ data: [] });
+
+            }
+
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){ 
+          $('#manual_start', row).bind('click', () => {         
+            var msE = document.getElementById("openingReading"); 
+            var manualStartEntry = msE['value'] ; 
+            console.log('manualStartEntry',manualStartEntry);
+            var updateEntry = {
+              start_odo : manualStartEntry , 
+              id: data._id
+            };
+        
+          
+            that.contactService.updatedailyLog(updateEntry).subscribe(res=>{
+              that.data_descip = "Value Saved" ;  
+
+              launch_toast()
+              function launch_toast() {
+                // console.log(divid);
+                 var x = document.getElementById("toast")
+                 //console.log(x);
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+             }
+
+             that.tabelObj.ajax.reload();
+
+            },err=>{
+
+            })
+  
+          }); 
+          $('#manual_end', row).bind('click', () => {          
+            var mEE = document.getElementById('closingReading');
+            var manualEndEntry = mEE['value'];
+            console.log('manualEndEntry',manualEndEntry);
+            var updateEntry = {
+              end_odo:manualEndEntry,
+              id : data._id
+            };
+         
+            that.contactService.updatedailyLog(updateEntry).subscribe(res=>{
+              that.data_descip = "Value Saved" ;  
+              launch_toast()
+              function launch_toast() {
+                // console.log(divid);
+                 var x = document.getElementById("toast")
+                 //console.log(x);
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+             }
+             that.tabelObj.ajax.reload();
+
+            },err=>{
+
+            })
+              
+          }); 
+           },
+        "columns": [
+          {
+            "data": "Device_Name",
+            "defaultContent": "_id",
+            "render": function (data, type, row) {
+
+              if (row.Device_Name) {
+                return row.Device_Name
+              }
+              if (row.ID != null) {
+                return row.ID.Device_Name;
+              } else {
+                return "";
+              }
+
+            }
+          },
+          {
+            "data": "Device_ID",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return row.Device_ID ? row.Device_ID : row.imei;
+              // if(row.Device_ID){
+              //   return row.Device_ID;
+              //  }else{
+              //   row.imei;
+              //  }
+
+            }
+          },
+          {
+            "data": "Mileage",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              var mileage = ((data == undefined) || (data == NaN)) ? "NA" : (row.today_odo / parseFloat(data)).toFixed(2);
+              return mileage;
+            }
+          },
+          {
+            "data": "today_running",
+            render: function (data, type, row) {
+              var ign_on: any;
+
+              if (data != undefined) {
+                ign_on = that.millisecondConversion(parseInt(data));
+              } else {
+                ign_on = '0:0'
+              }
+
+
+
+              return ign_on;
+            }
+          },
+          {
+            "data": "today_stopped",
+            render: function (data, type, row) {
+
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var stopped = that.millisecondConversion(data);
+              } else {
+                var stopped = "0:0";
+              }
+              return stopped;
+            }
+          },
+          {
+            "data": "t_idling",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var idleTime = that.millisecondConversion(data);
+              } else {
+                var idleTime = "0:0";
+              }
+              return idleTime;
+            }
+          },
+          {
+            "data": "t_ofr",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var ofr = that.millisecondConversion(data);
+              } else {
+                var ofr = "0:0";
+              }
+              return ofr;
+            }
+
+          },
+          {
+            "data": "t_noGps",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                if ((data < 60000) && (data == undefined)) {
+                  var seconds = Math.floor((data / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+
+                  var n_gps = "0:0:" + seconds;
+                } else {
+                  var n_gps_1 = that.millisecondConversion(data);
+                  var n_gps = n_gps_1 + ':0'
+                }
+              } else {
+                var n_gps = "0:0:0";
+              }
+              return n_gps;
+            }
+
+          },
+          {
+            "data": "today_trips",
+            render: function (data, type, row) {
+              return data;
+            }
+          },
+          {
+            "data": "maxSpeed",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data;
+              if (row.maxSpeed) {
+                return row.maxSpeed
+              }
+              if (row.ID != null) {
+                return row.ID.maxSpeed;
+              } else {
+                return 0;
+              }
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+
+              return data ? data : "";
+
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "start_odo_manual",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+     
+              var inputField = '<div style="display:flex">'+
+              '<input type="number" style="width: 60px; margin-right: 6px;" placeholder ="Opening Reading (Logbook)" id="openingReading">'+
+              '<i id="manual_start" style="font-size:20px;color:green;cursor:pointer" title="Save Start ODO" class="fas fa-save"></i>'+
+              '</div>'; 
+              return data ? data : inputField;
+              
+            }
+          },
+          {
+            "data": "end_odo_manual",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              var inputField_1 = '<div style="display:flex">'+
+              '<input type="number" style="width: 60px; margin-right: 6px;" placeholder="Closing Reading (Logbook)" id="closingReading">'+
+              '<i id="manual_end" style="font-size:20px;color:green;cursor:pointer" title="Save End ODO" class="fas fa-save"></i>'+
+              '</div>'; 
+
+              return data ? data : inputField_1;
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var c : any;
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+              }else{
+               c = null ; 
+              }
+
+              return c;
+            }
+          },
+          
+          {
+            "data": "today_odo",
+            render: function (data, type, row) {
+              return data.toFixed(2);
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var d =  row.today_odo.toFixed(2) ; 
+              var c : any;
+              var e : any ; 
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+                e = d - c ; 
+              }else{
+               c = null ; 
+               e = null ; 
+              }
+              return e;
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var d =  row.today_odo.toFixed(2) ; 
+              var c : any;
+              var e : any ;
+              var f : any;  
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+                e = d - c ; 
+                f = (e/d)*100 ; 
+
+              }else{
+               c = null ; 
+               e = null ; 
+               f = null; 
+              }
+              return f;
+            }
+          }
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "50px", "targets": [10,11,14,15,16]}  
+        ]
+      });
+
+    });
+
+  }
+
+
+  millisecondConversion(duration) {
+   
+    // var minutes = Math.floor((duration / (1000 * 60)) % 60);
+    // var hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    // hours = (hours < 10) ? 0 + hours : hours;
+    // minutes = (minutes < 10) ? 0 + minutes : minutes;
+  
+    // return hours + ":" + minutes;
+
+    
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+var mainMIn = (hours>=24)?0:mins;
+return  hours + ":" + mainMIn;
+
+
+  }
+
+
+  loadropdown() {
+    let that = this;
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      that.showSelectdevice = true;
+      $('#select').multipleSelect({
+        width: 200,
+        placeholder: 'Select device.....',
+        filter: true,
+      })
+      // $('#select').show();
+
+    }, 100);
+  }
+
+
+  getReport(event) {
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+
+
+      var x = new Date(tpdata.toDate).setHours(23, 59, 59);
+
+      this.date1 = new Date(x).toISOString();
+      var d = new Date(this.date1);
+      let a = d.setHours(0, 0, 0, 0)
+      this.from = new Date(a).toISOString();
+
+
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+
+
+
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa); 
+      this.tabelObj.ajax.reload();
+    }
+
+  }
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_location) {
+      latLng = {
+        lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+        long: latlngObj.start_location.long ? latlngObj.start_location.long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+
+
+
+
+}
diff --git a/src/app/device-report/day-wise-report/day-wise-report.component.html b/src/app/device-report/day-wise-report/day-wise-report.component.html
new file mode 100644
index 0000000..30aece4
--- /dev/null
+++ b/src/app/device-report/day-wise-report/day-wise-report.component.html
@@ -0,0 +1,92 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Daywise Report' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th ></th>
+                        <th style="text-align:left;width:100px">{{'Date'|translate}} </th>
+                        <th style="text-align:left;width:100px">{{'Vehicle Name' | translate}}</th>
+                        <th style="text-align:left;">{{'Distance (Kms.)' | translate}}</th>
+                        <th style="text-align:left;width:100px">{{'Moving Time (hh:mm)' | translate}}</th>   
+                        <th style="text-align:left;width:100px">{{'Stoppage Time (hh:mm)' | translate}}</th>
+                        <th style="text-align:left;">{{'Idle Time (hh:mm)' | translate}}</th>
+                        <th style="text-align:left;width:300px">{{"Start Location" | translate}}</th>
+                        <th style="text-align:left;width:300px">{{'End Location' | translate}}</th>           
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+<!-- 
+<th style="text-align:left;">Stoppage Time</th>
+<th style="text-align:left;">Idle Time</th>
+<th style="text-align:left;">Start Location</th>
+<th style="text-align:left;">End Location</th> -->
+
+
+
+
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+  <p class="headStyle">{{'Daywise Report' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-4" style="display: inherit;">
+          <md-select style="display: grid;padding-top:11px;width:200px;margin-left: 25px;" name="neww" placeholder="Filter Report" [(ngModel)]="dateStr">
+              <md-option *ngFor="let dateStr of dateString" [value]="dateStr" (click)="filtered_report(dateStr)">
+                {{dateStr}}
+              </md-option>
+            </md-select>
+            <div style="padding-left: 50px; padding-top: 15px;">
+              <select id="dbselect" multiple="multiple">
+                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+              </select>
+            </div>
+      </div>
+      <div class="col-md-6" style="display:inherit;padding-top: 16px;">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="fDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        <span style="padding-left: 50px;">{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="tDate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2" style="padding-top: 15px;">
+        <button md-raised-button style="cursor: pointer;background-color: #427942;color: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>  
+    </div>
+  </div>
+</div>
+ -->
+
+
+
diff --git a/src/app/device-report/day-wise-report/day-wise-report.component.scss b/src/app/device-report/day-wise-report/day-wise-report.component.scss
new file mode 100644
index 0000000..bd3d1a9
--- /dev/null
+++ b/src/app/device-report/day-wise-report/day-wise-report.component.scss
@@ -0,0 +1,113 @@
+.headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    padding-bottom: 20px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+  }
+
+
+  
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 150px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 150px;
+	height: 150px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/device-report/day-wise-report/day-wise-report.component.spec.ts b/src/app/device-report/day-wise-report/day-wise-report.component.spec.ts
new file mode 100644
index 0000000..7909199
--- /dev/null
+++ b/src/app/device-report/day-wise-report/day-wise-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DayWiseReportComponent } from './day-wise-report.component';
+
+describe('DayWiseReportComponent', () => {
+  let component: DayWiseReportComponent;
+  let fixture: ComponentFixture<DayWiseReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DayWiseReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DayWiseReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/day-wise-report/day-wise-report.component.ts b/src/app/device-report/day-wise-report/day-wise-report.component.ts
new file mode 100644
index 0000000..8f38bae
--- /dev/null
+++ b/src/app/device-report/day-wise-report/day-wise-report.component.ts
@@ -0,0 +1,524 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Http, Headers, RequestOptions, ResponseContentType } from '@angular/http';
+import { saveAs } from 'file-saver';
+import { environment } from '../../../environments/environment';
+import { MdSnackBar } from '@angular/material';
+declare var $: any;
+declare var google: any;
+import * as moment from 'moment';
+
+
+
+
+
+const now = new Date();
+@Component({
+  selector: 'app-day-wise-report',
+  templateUrl: './day-wise-report.component.html',
+  styleUrls: ['./day-wise-report.component.scss']
+})
+export class DayWiseReportComponent implements OnInit {
+  dateStr: any;
+  Fromdate = new Date();
+  todate = new Date();
+  useridd: any;
+  fDate: any;
+  tDate: any;
+  dev_url = environment.hostUrl;
+  // dateString=['Today Report','Yesterday Report','Weekly Report','Monthly Report'];
+  fromDate: any;
+  toDate: any;
+  Load: boolean;
+  tabelObj: any;
+  custtype: any;
+  superAdmin: any;
+  data_descip: string;
+  reportArr :any= [];
+  constructor(private contactService: ContactService, private http: Http, public snackBar: MdSnackBar, ) {
+
+    // var script = document.createElement("script");
+    // script.setAttribute("type", "text/javascript");
+    // script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    // document.getElementsByTagName("head")[0].appendChild(script);
+
+  }
+
+  ngOnInit() {
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.tDate = new Date();
+    var fd = new Date();
+    fd.setHours(0, 0, 0, 0);
+    this.fDate = fd;
+    // this.getDevices();
+    this.testTable()
+
+  }
+
+  deviceArr = [];
+  tab: any;
+
+  exportExcel() {
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+  emailid: any;
+  devicesss: any;
+  options: any;
+  finall: any;
+
+  //   getDevices(){
+  //     console.log("Inside getDevice function");
+  //     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+  //       data => {
+  //         this.devicesss = data;
+  //         console.log('this.devicesss',this.devicesss);  
+  //         this.finall = (this.devicesss.devices);
+  //         this.options = [];
+
+  //         for(let i=0;i<this.devicesss.devices.length;i++){
+  //           console.log('this.devicesss.devices',i);
+
+  //           // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+  //             let a ={
+  //               value : this.devicesss.devices[i].Device_Name,
+  //               viewValue:this.devicesss.devices[i].Device_Name,
+  //               did:this.devicesss.devices[i].Device_ID,
+  //               id:this.devicesss.devices[i]._id,
+  //               user:this.devicesss.devices[i].user,
+  //               // email: this.devicesss.devices[i].Email_ID,
+  //               // deviceType: this.devicesss.devices[i].type_of_device,      
+  //             }  
+
+  //               a['selectedValue'] = this.devicesss.devices[i].Device_ID ; 
+
+
+  //             // }
+  //             this.options.push(a);
+  //           // }
+
+  //           if(i === (this.devicesss.devices.length -1)){
+  //             setTimeout(() => {
+  //               $('#dbselect').multipleSelect({
+  //                 width: 200,
+  //                 placeholder: 'Select Vehicle.....',
+  //                 filter: true,
+  //               })
+  //             }, 100);
+
+  //           }
+  //         }
+  //   })
+
+  // }
+
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          that.Load = true;
+
+
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+          // https://www.oneqlik.in/summary/getDayWiseReport?user=5e37c4a218ff144091101d3e&to=2020-02-27T18:29:59.115Z&from=2020-02-26T18:30:00.115Z&device=865205038055231   
+          suburl += "/summary/getDayWiseReport?from=" + temp.from_date.toISOString() + '&to=' + temp.to_date.toISOString() + '&user=' + temp.user;
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }else{
+            that.Load = false
+            callback({ data: [] });
+      
+          }
+
+          if ((temp.from_date != undefined) && (temp.to_date != undefined) && that.deviceArr.length != 0) {
+            //  console.log('resp=>',temp.from_date,temp.to_date); 
+            that.contactService.get(suburl).subscribe(resp => {
+              // console.log(ignReport.length);  
+               // that.Load = false;
+              that.reportArr = [];
+              that.reportArr= resp ; 
+              if (that.reportArr.length != 0) {
+                var j = 0;
+                var finalArr = [];
+                for (var i = 0; i < that.reportArr.length; i++) {
+  
+                  that.clocation_1(that.reportArr[i], function (err, succ) {
+                    if (err) {
+                      console.log(err);
+                      j++;
+                    } else {
+                      finalArr.push(succ);
+                      console.log(finalArr);
+                      j++;
+                      if (j === that.reportArr.length) {
+                        that.Load = false;
+                        var x = [];
+                        finalArr.sort(function(a,b){
+                          // Turn your strings into dates, and then subtract them
+                          // to get a value that is either negative, positive, or zero.
+                          var aDate:any = new Date(a.Date);
+                          var bDate:any = new Date(b.Date);  
+                          return bDate - aDate;
+                        });
+                
+                        
+                        callback({ data: finalArr });
+                      }
+                    }
+                  })
+  
+                 
+                }
+              } else {
+                that.Load = false;
+                callback({ data: [] });
+  
+              }
+            }, err => {
+              that.Load = false;
+              var errCode = err.status;
+              if(errCode == 500){
+                callback({ data: [] });
+              }
+
+            
+            });
+
+          } else {
+            let ta = [];
+            that.Load = false;
+            callback({ data: ta });
+          }
+
+        },
+
+        "columns": [
+          {
+            "data": "_id",
+            // "orderable":true,
+            "defaultContent": "",
+            "visible" :false, 
+            "render": function (data, type, row) {             
+              return  "";   
+            }
+          },
+          {
+            "data": "Date",
+            "render": function (data, type, row) {       
+              var reportDate = new Date(data);
+              return data ? (moment(reportDate).format('LL')) : "";   
+            }
+          },
+          {
+            "data": "VRN",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "Distance(Kms)",
+            render: function (data, type, row) {
+            
+              return data ? parseFloat(data).toFixed(2) : 0.0;
+
+            }
+          },
+          {
+            "data": "Moving Time",
+            "defaultContent": "",
+            render: function (data, type, row) {
+            
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          {
+            "data": "Stoppage Time",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data ? parseFloat(data).toFixed(2) : 0.0;
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                // console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                // console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          {
+            "data": "Idle Time",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data ? parseFloat(data).toFixed(2) : 0.0;
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          }
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+
+        ]
+      });
+
+    });
+
+  }
+
+
+
+
+
+  identifier: any = 'dayWiseReport';
+  getReport(event) {
+    console.log("inside function");
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+       
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+
+
+      this.Fromdate = fd;
+      this.todate = td;
+      this.tabelObj.ajax.reload();
+      // this.tabelObj.draw();  
+      // this.tabelObj.draw();
+      // if(this.ajaxCount != 0){
+
+      // }
+      // this.ajaxCount = 1 ; 
+    }
+
+  }
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_location) {
+      latLng = {
+        lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+        long: latlngObj.start_location.long ? latlngObj.start_location.long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+
+}
\ No newline at end of file
diff --git a/src/app/device-report/device-fuel-report/device-fuel-report.component.html b/src/app/device-report/device-fuel-report/device-fuel-report.component.html
new file mode 100644
index 0000000..c43f54b
--- /dev/null
+++ b/src/app/device-report/device-fuel-report/device-fuel-report.component.html
@@ -0,0 +1,145 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Fuel Consumption Report.' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <flash-messages style="float: center;width: 100%"></flash-messages> 
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;" title="Veicle Name">{{'Vehicle' | translate}}</th>
+                      <th style="text-align:left;">{{'Start Time' | translate}}</th>
+                      <th style="text-align:left;">End Time</th>    
+                      <th style="text-align:left;" title="Fuel Consumed (L)">{{'Fuel Consumed(Lt)' | translate}}</th>
+                      <th style="text-align:left;">{{'Distance(Kms)' | translate}}</th>
+                      <th style="text-align:left;" title="Fuel Fill Count">{{'Fill Count' | translate}}</th>
+                      <th style="text-align:left;" title="Fuel Theft Count">{{'Theft Count' | translate}}</th>
+                      <th style="text-align:left;" title="Milege">{{'Milege' | translate}}</th>
+                      <th style="text-align:left;">{{'Start Location' | translate}}</th>      
+                      <th style="text-align:left;">{{'Start Fuel' | translate}}</th>
+                      <th style="text-align:left;">{{'End Location' | translate}}</th>        
+                      <th style="text-align:left;">{{'End Fuel' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+  <p class="headStyle">{{'Fuel Consumption Report' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div class="InputStyle">
+      <div class="row">
+          <div class="col-md-2" style="text-align: center">
+              <md-input-container>
+              <input mdInput placeholder="{{'Search' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+              #state="ngModel" [(ngModel)]="deviceName" 
+              (ngModelChange)="filterDevices(deviceName)">
+             <md-autocomplete #tdAuto="mdAutocomplete">
+                <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+                  <span>{{device.viewValue}}</span>
+                </md-option >
+              </md-autocomplete>   
+            </md-input-container>
+          
+          </div>
+          <div class="col-md-2">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+          </div>
+          <div class="col-md-2">  
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+          </div>
+          <div class="col-3" style="text-align: center; padding-top: 17px; font-size: 20px;">
+            <label id="example-radio-group-label">{{'Report Type' | translate}} :</label>
+            <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="filterRtype">
+              <md-radio-button class="example-radio-button" *ngFor="let rtype of reportType" [value]="rtype" style="margin-left: 5px">
+                {{rtype}}
+              </md-radio-button>
+            </md-radio-group>
+          </div>
+          <div class="col-md-3" style="padding-left: 65px;padding-top:17px;">
+              <button style="background-color: #484848;color:#fdfdfd;width: 120px;" md-raised-button class="btn btn-primary w3-button/" (click)="devicefuelreport()">{{'SEARCH' | translate}}</button>       
+       
+            </div>
+          </div>
+       
+          <div class="row">
+            <div class="col-12">
+              <flash-messages style="float: center;width: 100%"></flash-messages> 
+            </div>
+          </div>
+        </div>
+  <table id="deviceTable" class="table " cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+  
+      <thead style="background-color:#A2C523;color: white;">
+          <tr>
+              <th style="text-align:center;">{{'Vehicle name' | translate}}</th>
+              <th style="text-align:center;">{{'Start Time' | translate}}</th>
+              <th style="text-align:center;">End Time</th>    
+              <th style="text-align:center;">{{'Fuel Consumed (L)' | translate}}</th>
+              <th style="text-align:center;">{{'Distance(Kms)' | translate}}</th>
+              <th style="text-align:center;">{{'Fuel Fill Count' | translate}}</th>
+              <th style="text-align:center;">{{'Fuel Theft Count' | translate}}</th>
+              <th style="text-align:center;">{{'Start Location' | translate}}</th>      
+              <th style="text-align:center;">{{'End Location' | translate}}</th>               
+          </tr>
+      </thead>  
+      <tbody  >
+        <tr *ngFor="let fuelval of fuelDataArr" >
+            <td style="text-align: center">{{((fuelval.vehicle_name != undefined)&&(fuelval.vehicle_name)&&(fuelval.vehicle_name.trim().length != 0))?fuelval.vehicle_name:tempVehName}}</td>
+          <td style="text-align: center" >{{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center" >{{fuelval.end_time | date:  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center">{{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}}</td>
+          <td style="text-align: center">{{(fuelval.distance != "NaN")?(fuelval.distance | number : '1.2-2') : "NA"}}</td>
+          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'in')">{{fuelval.in_event_count}}</td>
+          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'out')">{{fuelval.out_event_count}}</td>
+          <td style="cursor:pointer;text-align:center">     
+            <a href={{addressLink}} target="_blank" (click)= "getAddress(fuelval,'start')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+          </td>
+          <td style="cursor:pointer;text-align:center">
+            <div>        
+              <a href={{addressLink1}} target="_blank" (click)= "getAddress(fuelval,'end')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+            </div>       
+          </td>
+        </tr>
+      </tbody>
+  </table>
+</div>
+
+
+
+ -->
diff --git a/src/app/device-report/device-fuel-report/device-fuel-report.component.scss b/src/app/device-report/device-fuel-report/device-fuel-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/device-fuel-report/device-fuel-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/device-fuel-report/device-fuel-report.component.spec.ts b/src/app/device-report/device-fuel-report/device-fuel-report.component.spec.ts
new file mode 100644
index 0000000..6c69bf7
--- /dev/null
+++ b/src/app/device-report/device-fuel-report/device-fuel-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceFuelReportComponent } from './device-fuel-report.component';
+
+describe('DeviceFuelReportComponent', () => {
+  let component: DeviceFuelReportComponent;
+  let fixture: ComponentFixture<DeviceFuelReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceFuelReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceFuelReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/device-fuel-report/device-fuel-report.component.ts b/src/app/device-report/device-fuel-report/device-fuel-report.component.ts
new file mode 100644
index 0000000..a2cceac
--- /dev/null
+++ b/src/app/device-report/device-fuel-report/device-fuel-report.component.ts
@@ -0,0 +1,715 @@
+import { Component, OnInit } from '@angular/core';
+
+declare var $: any, DataTable: any, google: any;
+
+import * as moment from 'moment'
+import { MdDialog } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ContactService } from '../../contact.service';
+import { FuelObjectcomponentComponent } from '../../fuel-objectcomponent/fuel-objectcomponent.component';
+declare var $: any;
+@Component({
+  selector: 'app-device-fuel-report',
+  templateUrl: './device-fuel-report.component.html',
+  styleUrls: ['./device-fuel-report.component.scss']
+})
+export class DeviceFuelReportComponent implements OnInit {
+  option: any;
+  Fromdate = new Date();
+  todate = new Date();
+  emailid: any;
+  useridd: any;
+  identifier: any = 'fuel_consumption_report';
+  tabelObj: any ;
+  errorStatus: string;
+  filterRtype: any;
+  // reportType = ['Time','Daily','Trip']
+  serviceResponse: boolean;
+  devicesss: any;
+  finall: any;
+  fuelDataArr: any[];
+  eventT: any;
+  rowcolor: string;
+  xlbutton: boolean = false;
+  Load: boolean;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  lattitude1: any;
+  longitude1: any;
+  addressLink: any;
+  addressLink1: string;
+  tempVehName: any;
+  finalArr=[]
+  reportArr=[]
+  constructor(public contactService: ContactService, public dialog: MdDialog, private _flashMessagesService: FlashMessagesService) {
+
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   
+  }
+
+  ngOnInit() {
+    this.Fromdate.setHours(0, 0, 0);
+    this.testTable();
+    // this.getAllDevice();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+  }
+
+
+  deviceObj = [];
+  // getAllDevice() {
+  //   this.deviceObj = [];
+  //   this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+  //     data => {
+  //       this.devicesss = data
+  //       this.finall = (this.devicesss.devices);
+  //       for (let i = 0; i < this.devicesss.devices.length; i++) {
+
+  //         if (this.devicesss.devices[i].type_of_device == "Tracker") {
+
+  //           let a = {
+  //             value: this.devicesss.devices[i].Device_Name,
+  //             viewValue: this.devicesss.devices[i].Device_Name,
+  //             did: this.devicesss.devices[i].Device_ID,
+  //             id: this.devicesss.devices[i]._id,
+  //             user: this.devicesss.devices[i].user,
+  //             email: this.devicesss.devices[i].Email_ID,
+  //             deviceType: this.devicesss.devices[i].type_of_device
+  //           }
+  //           this.deviceObj.push(a);
+  //         }
+
+  //       }
+  //       // console.log(this.deviceObj);
+
+
+  //     });
+  // }
+
+
+  deviceSelect: any = [];
+  deviceName: any;
+  // filterDevices(dlr) {
+  //     // console.log("deviceData=>", dlr);
+  //     if (dlr) {
+  //         // console.log(dlr);
+  //         const filterdealerValue: any = dlr;
+  //         this.deviceSelect = [];
+  //         this.deviceSelect = this.deviceObj.filter(function(pp) {        
+  //             // console.log(pp);
+  //             var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+  //             return t > -1;
+  //         });
+  //         return this.deviceSelect;
+  //     }
+
+  // }
+
+
+  testTable() {
+    const that = this;
+   
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '63vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          that.fuelDataArr = [];
+          if ((that.filterRtype == 'Daily') || (that.filterRtype == 'Trip')) {
+            if (that.deviceArr.length == 0) {
+              that._flashMessagesService.show("Please Select Device ... ", { cssClass: 'alert-warning', timeout: 3000 });
+              return;
+            }
+          }
+          if (that.deviceArr.length == 0) {
+              that._flashMessagesService.show("Please Select Device ... ", { cssClass: 'alert-warning', timeout: 3000 });
+              return;
+            }
+          if (that.Fromdate == undefined) {
+            that._flashMessagesService.show("Please Select Fromdate  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+          }
+          if (that.todate == undefined) {
+            that._flashMessagesService.show("Please Select Todate  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+          }
+
+          var payloadObj = {
+            from: that.Fromdate.toISOString(),
+            to: that.todate.toISOString(),
+            user: that.useridd
+          }
+          var imei=[];
+          var vehicle=[]
+          var device=[]
+          for(var i=0;i<that.deviceArr.length;i++){
+            imei.push(that.deviceArr[i].did);
+            vehicle.push(that.deviceArr[i].id);
+            device.push({imei:that.deviceArr[i].did,name:that.deviceArr[i].value,id:that.deviceArr[i].id})
+          }
+          
+
+          if (that.filterRtype == 'Daily') {
+            if(imei.length>1){
+               that._flashMessagesService.show("Please Select One Vehicle  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+            }
+            payloadObj['daywise'] = true;
+            // payloadObj['imei'] = that.deviceArr[0].did;
+            // payloadObj['vehicle'] = that.deviceArr[0].id;
+             payloadObj['imei'] = imei[0];
+             payloadObj['device']=device[0]
+            payloadObj['vehicle'] = vehicle[0];
+          }
+          if (that.filterRtype == 'Trip') {
+            if(imei.length>1){
+               that._flashMessagesService.show("Please Select One Vehicle  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+            }
+            payloadObj['trip'] = true;
+             payloadObj['imei'] = imei[0];
+            payloadObj['vehicle'] = vehicle[0];
+            payloadObj['device']=device[0]
+            // payloadObj['imei'] = that.deviceArr[0].did;
+            // payloadObj['vehicle'] = that.deviceArr[0].id;
+          }
+
+          if (that.filterRtype == 'Time') {
+            if (that.deviceArr.length != 0) {
+              // payloadObj['imei'] = that.deviceArr[0].did;
+              // payloadObj['vehicle'] = that.deviceArr[0].id;
+              payloadObj['device']=device
+               payloadObj['imei'] = imei;
+            payloadObj['vehicle'] = vehicle;
+              delete payloadObj.user;
+            }
+          }
+          console.log(that.deviceArr);
+
+          that.Load = true;
+
+          that.contactService.devicefuelreport(payloadObj)
+            .subscribe(res => {
+              that.fuelDataArr = [];
+              that.Load = false;         
+             that.fuelDataArr = res;
+             that.reportArr = [];
+                that.reportArr= res ; 
+              var j = 0;
+                  that.finalArr = [];
+                  for (var i = 0; i < that.reportArr.length; i++) {
+
+                    that.clocation_1(that.reportArr[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        console.log(succ);
+                        that.finalArr.push(succ);
+                        j++;
+                        console.log(j," ===", that.reportArr.length,that.finalArr);
+                        if (j === that.reportArr.length) {
+                          console.log("in");
+                          
+                          that.Load = false;
+                           for (var k = 0; k < that.finalArr.length; k++) {
+                                // that.finalArr[i]['tempVehName'] = that.deviceArr[0].viewValue;
+                                  // console.log(that.finalArr[k].distance,that.finalArr[k].fuel_consumed);
+                                  
+                                 var distance=that.finalArr[k].distance?that.finalArr[k].distance:0
+                                  that.finalArr[k]['milege']=that.finalArr[k].fuel_consumed!=0?distance/(that.finalArr[k].fuel_consumed?that.finalArr[k].fuel_consumed:0):0
+                              }
+                            if ((that.finalArr.length != 0) && (that.deviceArr.length != 0)) {
+                              for (var d = 0; d < that.finalArr.length; d++) {
+                                that.finalArr[d]['tempVehName'] = that.deviceArr[0].viewValue;
+                                  // console.log(that.finalArr[i].distance,that.finalArr[i].fuel_consumed);
+                                  
+                                //  var distance=Number.isNaN(that.finalArr[d].distance)?0:that.finalArr[d].distance
+                                //   that.finalArr[d]['milege']=distance/(that.finalArr[d].fuel_consumed?that.finalArr[d].fuel_consumed:0)
+                              }
+                            }
+                          callback({ data: that.finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+              // console.log('that.fuelDataArr',that.fuelDataArr);
+              // callback({ data: that.fuelDataArr });
+
+            }, err => {
+              that.Load = false;
+              that._flashMessagesService.show("Internal Server error , Please try after sometime !!!", { cssClass: 'alert-warning', timeout: 2000 });
+              // console.log(err);
+            })
+        },
+        "rowCallback": function(row: Node, data:any | Object, index: number){  
+          $('#in', row).bind('click', () => {      
+                 
+            data.event = 'in';   
+            console.log('data',data.in_event_count);
+            if(data.in_event_count != 0){
+              let dialogRef_1 = that.dialog.open(FuelObjectcomponentComponent, { 
+                width: '950px',
+                data: data
+              });     
+            }
+                
+          });
+
+          $('#out', row).bind('click', () => {  
+            data.event = 'out';   
+         
+            if(data.out_event_count != 0){
+              let dialogRef_1 = that.dialog.open(FuelObjectcomponentComponent, {
+                width: '950px',
+                data: data
+              });   
+            }         
+           
+          }); 
+        
+        },  
+
+        "columns": [
+          {
+            "data": "vehicle_name",
+            "defaultContent": "_id",
+            "render": function (data, type, row) {
+              // console.log(row);
+              // var vname = ((data != undefined) && (data) && (data.trim().length != 0)) ? data : row.tempVehName;
+              var vname = (data!=undefined)?data:row.tempVehName ; 
+                return vname;
+            }
+          },
+          {
+            "data": "start_time",
+            render: function (data, type, row) {
+              var st = new Date(data);
+              return data ? (moment(st).format('llll')) : "";
+
+            }
+          },
+          {
+            "data": "end_time",
+            render: function (data, type, row) {
+              var et = new Date(data);
+              return data ? (moment(et).format('llll')) : "";
+            }
+          },
+          {
+            "data": "fuel_consumed",
+            render: function (data, type, row) {
+              var fc = data ? data.toFixed(2) : "0";
+              return fc;
+            }
+          },
+          {
+            "data": "distance",
+            render: function (data, type, row) {
+              var dis = (data != "NaN") ? data.toFixed(2) : "0"
+              return dis;
+            }
+          },
+          {
+            "data": "in_event_count",
+            render: function (data, type, row) {
+              let in_event_count =  "<i id='in' style='cursor:pointer'>"+data+"</i>" ; 
+              return in_event_count;
+            }
+          },
+          {
+            "data": "out_event_count",
+            render: function (data, type, row) {
+              // <i id="deviceSetting" style="font-size:20px" title="Share device" class="fas fa-cog"></i>
+              let out_event_element = "<i id='out' style='cursor:pointer'>"+data+"</i>" ; 
+              return out_event_element;
+             
+            }
+          },
+          {
+            "data": "milege",
+            render: function (data, type, row) {
+              var de
+              if(Number.isNaN(data)){
+               de=0
+                
+              }else{
+                de=data.toFixed(2) 
+              }
+              return de
+             
+            }
+          },
+          {
+            "data": "startAddress",
+            render: function (data, type, row) {
+              // if(row.start_address!='N/A'){
+              //   return row.start_address;
+              // }
+              // else{
+              //   let lat = (data != undefined)?data.lat: null;
+              //   let long = (data != undefined)?data.lng : null;
+              //   var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';               
+                  return data;                
+              // }
+            }
+          },
+          {
+            "data": "startFuel",
+            render: function (data, type, row) {
+            
+              return data?data:0;
+            }
+          },
+          {
+            "data": "endAddress",
+            render: function (data, type, row) {
+              // if(row.end_address!='N/A'){
+              //   return row.end_address;
+              // }
+              // else{
+              //   let lat = (data != undefined)?data.lat: null;
+              //   let long = (data != undefined)?data.long : null;
+              //   var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';                
+                  return data;      
+              // }           
+            }
+          },
+          {
+            "data": "endFuel",
+            render: function (data, type, row) {
+             return data?data:0;
+            }
+          },
+
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7,8,9,10,11] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+       
+          { "width": "13%", "targets": 1 },
+          { "width": "13%", "targets": 2 },
+      
+
+        ]
+      });
+
+    });
+
+  }
+
+
+  // devicefuelreport(){ 
+  //     console.log("this.filterDevices=>",this.filterRtype);
+  //     // pe = ['time','daily','trip']
+  //     if((this.filterRtype == 'Daily')||(this.filterRtype == 'Trip')){
+  //       if(this.deviceSele ct.length == 0){
+  //         this._flashMessagesService.show("Please Select Device ... ", { cssClass: 'alert-warning', timeout: 3000 });
+  //         return;
+  //       }
+
+  //     }
+
+  //     if(this.Fromdate == undefined){
+  //       this._flashMessagesService.show("Please Select Fromdate  ", { cssClass: 'alert-warning', timeout: 3000 });
+  //       return;
+  //     }
+  //     if(this.todate == undefined){
+  //       this._flashMessagesService.show("Please Select Todate  ", { cssClass: 'alert-warning', timeout: 3000 });
+  //       return;
+  //     }
+
+  //     var payloadObj = {
+  //       from : this.Fromdate.toISOString(),
+  //       to : this.todate.toISOString(),
+  //       user : this.useridd    
+  //     }
+
+  //     if(this.filterRtype == 'Daily'){
+  //       payloadObj['daywise'] = true;
+  //       payloadObj['imei'] = this.deviceSelect[0].did;
+  //       payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //     }
+  //     if(this.filterRtype == 'Trip'){
+  //       payloadObj['trip'] = true;
+  //       payloadObj['imei'] = this.deviceSelect[0].did;
+  //       payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //     }
+
+  //     if(this.filterRtype == 'Time'){
+  //       if(this.deviceSelect.length != 0){
+  //         payloadObj['imei'] = this.deviceSelect[0].did;
+  //         payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //         delete payloadObj.user;
+  //       }
+  //     }
+  //     console.log(payloadObj);
+
+  //     this.Load = true;
+  //     // this.todate.toISOString(),this.Fromdate.toISOString(),this.deviceSelect[0].did
+
+  //     this.contactService.devicefuelreport(payloadObj)
+  //         .subscribe(res=>{
+  //          this.Load =false;
+  //          this.xlbutton =false;
+  //          console.log("fuelconsumptionReport=>",res);
+  //          this.fuelDataArr = res;
+  //          if((this.fuelDataArr.length != 0)&&(this.deviceSelect.length != 0) ){
+  //            this.tempVehName = this.deviceSelect[0].viewValue ; 
+  //          }  
+  //         },err=>{
+  //           this.Load = false;   
+  //             this._flashMessagesService.show("Internal Server error , Please try after sometime !!!", { cssClass: 'alert-warning', timeout: 2000 });
+  //             // console.log(err);
+  //         })
+  // }
+
+  secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h + (h == 1 ? " hr, " : " hrs, ") : "";
+    var mDisplay = m > 0 ? m + (m == 1 ? " min, " : " mins, ") : "";
+    var sDisplay = s > 0 ? s + (s == 1 ? " sec" : " sec") : "";
+    return hDisplay + mDisplay + sDisplay;
+  }
+
+  colorChangefunc(fuelval) {
+    //   console.log(fuelval)
+  }
+
+  tab: any;
+  exportExcel() {
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+      // console.log('tab_text',JSON.parse(tab_text));
+      //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text = tab_text + "</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+
+  locationAddress: any;
+  getAddress(fuelval, val) {
+    var outerThis = this;
+    console.log(fuelval);
+    if (fuelval == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+      this.lattitude1 = null;
+      this.longitude1 = null;
+    } else {
+      if (val == 'start') {
+        this.lattitude = fuelval.start_location.lat;
+        this.longitude = fuelval.start_location.lng;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+      }
+      else if (val == 'end') {
+        this.lattitude1 = fuelval.end_location.lat;
+        this.longitude1 = fuelval.end_location.lng;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude1, this.longitude1);
+      } else {
+        this.lattitude = null;
+        this.longitude = null;
+        this.lattitude1 = null;
+        this.longitude1 = null;
+      }
+
+
+    }
+
+
+    this.addressLink = 'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+    this.addressLink1 = 'https://maps.google.com/?q=' + this.lattitude1 + ',' + this.longitude1
+
+  }
+
+  // showinoutReport(fuelObj, ev) {
+  //   if ((fuelObj.in_event_count == 0) && (ev == 'in')) {
+  //     return
+  //   }
+  //   if ((fuelObj.out_event_count == 0) && (ev == 'out')) {
+  //     return
+  //   }
+  //   fuelObj.event = ev;
+  //   let dialogRef_1 = this.dialog.open(FuelObjectcomponentComponent, {
+  //     // height:'500px',
+  //     width: '950px',
+  //     data: fuelObj
+  //   });
+  // }
+  deviceArr: any = []
+  getReport(event) {
+    console.log(event);
+    
+    this.deviceArr = [];
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      console.log('this.deviceArr', this.deviceArr);
+
+      this.Fromdate = fd;
+      this.todate = td;
+      this.filterRtype = tpdata.filter_type;
+
+
+      this.tabelObj.ajax.reload();    
+
+    }
+
+  }
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+      if(latlngObj.start_location!="NA"){
+        latLng = {
+          lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+          long: latlngObj.start_location.lng ? latlngObj.start_location.lng : 0
+        }
+      }
+    
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['startAddress'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+         if(latlngObj.end_location!="NA"){
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.lng ? latlngObj.end_location.lng : 0
+          }
+        }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+         if(latlngObj.end_location!="NA"){
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.lng ? latlngObj.end_location.lng : 0
+          }
+        }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+
+}
diff --git a/src/app/device-report/device-report.component.html b/src/app/device-report/device-report.component.html
new file mode 100644
index 0000000..b622538
--- /dev/null
+++ b/src/app/device-report/device-report.component.html
@@ -0,0 +1,100 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Daily Report'|translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th style="text-align:left;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
+                    <th style="text-align:left;" title = "Device IMEI">{{'IMEI' | translate}}</th>
+                    <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
+                    <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
+                    <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
+                    <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
+                    <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
+                    <th style="text-align:left;">{{'Trips' | translate}}</th>
+                    <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| translate}}</th>  
+                    <th style="text-align:left;" >{{'Start Location' | translate}}</th>  
+                    <th style="text-align:left;">{{'End Location' | translate}}</th>
+                    <th style="text-align: left;">{{'Details' | translate}}</th>
+                  </tr>
+              </thead>  
+          </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+
+<app-all-menus></app-all-menus>
+         <div style="min-height:100vh; padding-top: 6%;">
+          <p class="headStyle">{{'Daily Report' | translate}}</p>
+          <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+          <div class="InputStyle">
+            <div class="row">
+              <div class="col-4" style="padding-top: 18px;padding-left: 150px;" >
+              <select id="select" multiple="multiple">
+                        <option *ngFor="let option_1 of options" value={{option_1.did}} >{{ option_1.value }}</option>
+              </select>
+              </div>
+              <div class="col-4" >
+                <span>{{'Select Date' | translate}}</span>
+                <owl-date-time [(ngModel)]="date1" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+              </div>
+            
+              <div class="col-4" style="top: 16px;text-align: center">
+                <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button (click)="callfunction()">{{'SEARCH' | translate}}</button>
+                <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+              </div>
+            </div>
+          </div>      
+     
+         <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+          <thead style="background-color:#A2C523;color: white;">
+              <tr>
+                  <th style="text-align:center;">Device Name</th>
+                  <th style="text-align:center;">Device ID</th>
+                  <th style="text-align:center;">Total Distance (Km)</th>
+                  <th style="text-align:center;">Fuel consumption (Litre)</th>
+                  <th style="text-align:center;">Ignition ON Time (Hr:Min)</th>
+                  <th style="text-align:center;">Ignition OFF Time (Hr:Min)</th>
+                  <th style="text-align:center;">Idle Time (Hr:Min)</th>
+                  <th style="text-align:center;">Out of reach (Hr:Min)</th>
+                  <th style="text-align:center;">No GPS (Hr:Min:Sec)</th>
+                  <th style="text-align:center;">Trips</th>
+                  <th style="text-align:center;">Max Speed (Km/hr)</th>                
+              </tr>
+          </thead>  
+      </table>
+</div>
+        -->
\ No newline at end of file
diff --git a/src/app/device-report/device-report.component.scss b/src/app/device-report/device-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/device-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/device-report.component.spec.ts b/src/app/device-report/device-report.component.spec.ts
new file mode 100644
index 0000000..90457b5
--- /dev/null
+++ b/src/app/device-report/device-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceReportComponent } from './device-report.component';
+
+describe('DeviceReportComponent', () => {
+  let component: DeviceReportComponent;
+  let fixture: ComponentFixture<DeviceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/device-report.component.ts b/src/app/device-report/device-report.component.ts
new file mode 100644
index 0000000..ff2db9a
--- /dev/null
+++ b/src/app/device-report/device-report.component.ts
@@ -0,0 +1,972 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+//import { GaugeSegment, GaugeLabel } from 'ng-gauge';
+import {ContactService} from '../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Data } from '../data';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {DialogContentExampleDialogComponent} from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+declare var $: any, DataTable: any;
+import * as moment from 'moment';
+import { DailyDetailsComponent } from './daily-details/daily-details.component';
+declare var google: any;
+declare var $:any;
+
+
+@Component({
+  selector: 'app-device-report',
+  templateUrl: './device-report.component.html',
+  styleUrls: ['./device-report.component.scss'],
+  providers: [ContactService]
+})
+
+export class DeviceReportComponent implements OnInit {
+  deviceArr: any=[];
+  showSelectdevice:boolean=false;
+  identifier = 'daily_report';
+  reportArr: any[];
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) {
+   }
+
+  
+ 
+ingData:any
+from1:any;
+to1:any;
+from2:any;
+to2:any;
+too:any;
+date1 : any;
+Fromdate:any;
+todate:any;
+options=[];
+option:any;
+dataSelect:any=[];
+
+
+   fs :any;
+   ls :any;
+   emailid:any;
+   or:any;
+   useridd:any;
+   device_data:any;
+   time:any;
+   Load:Boolean = false;
+   final : any;
+   custtype:any;
+   cust:boolean=false;
+   devicess:any;
+   finall:any;
+   logo:any;
+   text:any;
+   ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  from:any;
+  to:any;
+  before:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  superAdmin:Boolean = false;
+
+   ngOnInit() {
+    this.dataSelect = [];
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.getDevices();
+    // this.dailyReport();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+ 
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];  
+  
+  this.testTable();
+
+  //  
+  }
+
+ 
+
+ 
+
+  tab:any;
+  exportExcels()
+	{
+   
+
+
+	 var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    console.log(table[0].querySelector("thead"));
+    
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+	}
+
+//   dailyReport() {
+//     this.to = this.date1;
+//     var x = new Date(this.to).setHours(23,59,59);
+//     console.log(x);
+//     var to_date = new Date(x).toISOString();
+    
+//     var d = new Date(this.date1);
+//     let a = d.setHours(0, 0, 0, 0)
+//     this.from = new Date(a).toISOString();
+//     console.log(to_date);
+//     console.log(this.from);
+//     window.localStorage['from_date'] = this.from;
+//     window.localStorage['to_date'] = to_date;
+//     var deviceID;
+
+//     if((this.dataSelect.length!=0)&&(this.dataSelect[0].did!='all')){
+//        deviceID = this.dataSelect[0].did;
+//     }
+//     this.Load = true;
+//     this.contactService.getDeviceReport(this.useridd,to_date, this.from,deviceID,this.skip,this.limit).subscribe(
+//       data => {
+//         this.Load = false;
+//         this.device_data = data
+//         this.finall = this.device_data.data;
+    
+//         if(this.finall.length==0){       
+        
+//           this.lastcall=true;
+//         }
+//         // console.log('dailyReport=>',this.finall);
+//       },(err)=>{
+//         // console.log("error");
+//         this.Load = false;
+//         this.firstcall=true;
+//       });
+//   }
+
+//   // search filter
+//   devicesss:any;
+//   getDevices(){
+//     // let a = {
+//     //   value: "All Devices",
+//     //   did : "all",
+//     //   id : "all"
+//     // }
+    
+//     //     this.options.push(a);
+//     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+//       data => {
+//         this.devicesss = data
+
+//         for(let i=0;i<this.devicesss.devices.length;i++){
+
+//           if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+//             let a ={
+//               value : this.devicesss.devices[i].Device_Name,      
+//               did:this.devicesss.devices[i].Device_ID,
+//               id:this.devicesss.devices[i]._id,
+
+//             }
+//             this.options.push(a);
+//           }
+
+//         }
+//           // console.log("deviceObj",this.options);
+//           let that = this;
+//           setTimeout(()=>{
+//             that.loadropdown();
+//           },100)  
+//       });
+//   }
+
+
+// filterStates(val) {
+
+//   // console.log(val)
+//   // console.log(this.options)
+
+//   if (val) {
+//     const filterValue:any = val
+//      this.dataSelect = this.options.filter( function(d){
+  
+//       return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+//     });
+//     return this.dataSelect;
+//   }
+
+// }
+
+skip: number = 0;
+limit: number = 10;
+firstcall: boolean = false;
+lastcall: boolean = true;
+
+// next(){
+//   this.lastcall = false;
+//   this.skip += 1;
+//   this.dailyReport();
+// }
+
+// pre(){
+//   // console.log(this.skip)
+//     if (this.skip > 0) {
+//       this.skip -= 1;
+//       this.lastcall = false;
+//       this.dailyReport();
+//     } else {
+//       this.lastcall = true;
+//       this.firstcall = false;
+//     }
+
+// }
+tabelObj: any;
+callfunction(): void {
+  this.Load = true;
+  this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+  this.tabelObj.draw();
+}
+dtOptions:any={}
+testTable() {
+  const that = this;
+
+  this.Load = true;
+  $(document).ready(function() {
+      that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": true,
+          "searching": false,
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: true,
+          "scrollY":'60vh', 
+          "scrollX": true, 
+          "scrollCollapse": true, 
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+
+            $('#edit', row).bind('click', () => {   
+              var internalThat  = that;         
+              let dialogRef = that.dialog.open(DailyDetailsComponent, {
+                // width: '950px',
+                // height: '1160px',   
+                data: { data:data,date:that.date1}
+                
+              });
+          
+              // dialogRef.afterClosed().subscribe(result => {
+              //   console.log("result",result);
+              //   that.ngOnInit();
+             
+              //     if(result=="done"){
+              //       console.log("resultdone",result)
+              //       that.tost1("update");
+              //       window.localStorage['DataUpdate'] = 'True';
+              //       that.sidebar.sidebarData();       
+              //     }
+              // });              
+            }); 
+            },
+          ajax: (dataTablesParameters: any, callback) => {
+                  that.Load = true;
+              dataTablesParameters.op = {};
+              dataTablesParameters.select = [];
+              dataTablesParameters.find = {};
+              var currDay = new Date().getDay();
+              var currMonth = new Date().getMonth();
+              var currYear = new Date().getFullYear();
+              var selectedDay = new Date(that.date1).getDay();
+              var selectedMonth  = new Date(that.date1).getMonth();
+              var selectedYear = new Date(that.date1).getFullYear();
+       
+              if((currDay== selectedDay)&&(currMonth==selectedMonth) && (currYear == selectedYear)){
+                 var devname = "Device_Name";
+                 var devid = "Device_ID";
+                 var today_odo = "today_odo";
+                 var today_running = "today_running";
+                 var today_stopped = "today_stopped";
+                 var today_trips = "today_trips"; 
+                 var maxSpeed = "maxSpeed";
+                 var Mileage = "Mileage";
+                 var start_location_lat = "today_start_location.lat";
+                 var start_location_long = "today_start_location.long";
+                 var end_location_lat = "last_location.lat";
+                 var end_location_long = "last_location.long";
+              
+              }else{
+              
+                var devid = "imei";
+                var devname = "ID.Device_Name";
+                var today_odo = "today_odo";
+                var today_running = "today_running";
+                var today_stopped = "today_stopped";
+                var today_trips = "today_trips"; 
+                var maxSpeed = "ID.maxSpeed";
+                var Mileage = "Mileage";
+                var start_location_lat = "start_location.lat";
+                var start_location_long = "start_location.long";
+                var end_location_lat = "end_location.lat";
+                var end_location_long = "end_location.long";
+
+              }
+
+              dataTablesParameters.columns = [
+                // {data: "_id" },
+                {data: devname},
+                {data: devid},
+                {data : today_odo},
+                {data : today_running},
+                {data : Mileage},           
+                {data: today_stopped},
+                {data :today_trips},
+                {data :maxSpeed},
+                {data :"t_idling"},
+                {data: "t_noGps"},
+                {data : "t_ofr" },
+                {data : start_location_lat},
+                {data : start_location_long},
+                {data : end_location_lat},
+                {data : end_location_long},
+                {data: null, defaultContent: ''}
+              ]        
+
+
+          
+              
+                var deviceID;
+                dataTablesParameters.find.user_id = that.useridd;
+
+                if(that.deviceArr.length != 0){
+                
+                  var dev_in = {'$in': that.deviceArr};
+                     dataTablesParameters.find.devId = dev_in;
+                }
+        
+              // if ((that.dataSelect.length!=0)&&(that.dataSelect[0].did!='all')) {
+              //     dataTablesParameters.find.devId = that.dataSelect[0].did;
+              // }
+
+              if (that.date1) {
+                  var fdate = new Date(that.date1).toISOString()  
+                  // dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+                  dataTablesParameters.find.date = fdate        
+              };
+
+              var suburl = "";
+              suburl += "/devices/daily_report"; 
+              if(that.date1 && that.deviceArr.length != 0) {             
+              that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                that.reportArr = [];
+                that.reportArr = resp['data'];
+                if(that.reportArr.length != 0){
+                  var j = 0 ;
+                  var finalArr = [];
+                  for(var i = 0 ;i<that.reportArr.length;i++){
+                   
+                  that.clocation_1(that.reportArr[i],function(err,succ){
+                    if(err){
+                      console.log(err);
+                        j++ ; 
+                    }else{
+                      finalArr.push(succ);
+                      console.log(finalArr);
+                        j++ ; 
+                        if(j  === that.reportArr.length){
+                          callback({data : finalArr});
+                        }
+                    }
+                  })
+
+                     that.Load= false;                 
+                  }
+                }else{
+                   that.Load= false;       
+                  callback({data : []});
+
+                }
+                
+                  // that.Load= false;         
+                  // callback(resp);
+              }, err => {   
+                that.Load= false;    
+                  
+              });
+            }else{
+                that.Load= false;       
+                  callback({data : []});
+            }
+          },  
+          "columns": [
+              {
+                  "data": "Device_Name",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+            
+                     if(row.Device_Name){
+                      return row.Device_Name
+                     }
+                     if(row.ID != null){
+                      return row.ID.Device_Name;
+                     }else{
+                       return "";
+                     }
+                      
+                  }
+              },
+              {
+                  "data": "Device_ID",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                      return row.Device_ID ? row.Device_ID : row.imei;
+                      // if(row.Device_ID){
+                      //   return row.Device_ID;
+                      //  }else{
+                      //   row.imei;
+                      //  }
+                
+                  }
+              },
+              {
+                  "data": "today_odo",
+                  render: function(data, type, row) {
+                      return data.toFixed(2);
+                  }
+              }, 
+              {
+                "data": "Mileage",
+                "defaultContent": "_id",
+                render: function(data, type, row) {                            
+                  var mileage = ((data == undefined)||(data == NaN))?"NA":(row.today_odo/parseFloat(data)).toFixed(2);
+                    return mileage;
+                }
+            },         
+              {
+                "data": "today_running",
+                render: function(data, type, row) {
+                  var ign_on:any;
+               
+                  if(data != undefined){
+                   ign_on =  that.millisecondConversion(parseInt(data));
+                  }else{
+                    ign_on = '0:0'
+                  }
+              
+            
+
+                    return ign_on;
+                }
+            },         
+            { 
+              "data": "today_stopped",
+              render: function(data, type, row) {
+
+               
+                if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                  var stopped = that.millisecondConversion(data); 
+                }else{
+                  var stopped = "0:0"; 
+                }
+                return stopped;
+              }
+          },  
+          {
+            "data" : "t_idling",
+            render : function(data,type,row){
+             
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                var idleTime = that.millisecondConversion(data); 
+              }else{
+                var idleTime = "0:0"; 
+              }     
+              return idleTime ; 
+            }
+          },  
+          {
+            "data" : "t_ofr",
+            render : function(data,type,row){
+            
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                var ofr = that.millisecondConversion(data); 
+              }else{
+                var ofr = "0:0"; 
+              }       
+                return ofr ;          
+            }
+
+          },  
+          {
+            "data" : "t_noGps",
+            render : function(data,type,row){
+            
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                if((data < 60000)&&(data == undefined)){
+                  var seconds = Math.floor((data / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+               
+                  var n_gps = "0:0:" + seconds;
+                }else{
+                  var n_gps_1 = that.millisecondConversion(data);
+                  var n_gps = n_gps_1 + ':0' 
+                }
+              }else{
+                var n_gps = "0:0:0"; 
+              }       
+                return n_gps ;          
+            }
+
+          },     
+          {
+            "data": "today_trips",
+            render: function(data, type, row) {
+                return data;
+            }
+        },   
+        {
+          "data": "maxSpeed",
+          "defaultContent": "_id",
+          render: function(data, type, row) {
+              // return data;
+              if(row.maxSpeed){
+                return row.maxSpeed
+               }
+               if(row. ID!= null){
+                return row.ID.maxSpeed;
+               }else{
+                 return 0;
+               }
+          }
+      },
+      {
+        "data": "startAddress",
+        "defaultContent": "",
+        render: function(data, type, row) {
+       
+      
+          return data?data : ""; 
+
+        }
+    },
+    {
+      "data": "endAddress",
+      "defaultContent": "",
+      render: function(data, type, row) {
+        
+          return data?data : "";
+      }
+  } ,
+   {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+      }
+    }                
+          ], 
+             "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          } 
+          // { "width": "40px", "targets": [11,12] }  
+           
+         
+          ]   
+      });
+
+  });
+
+}
+
+
+millisecondConversion(duration){
+ 
+    // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+    // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    // hours = (hours < 10) ? 0 + hours : hours;
+    // minutes = (minutes < 10) ? 0 + minutes : minutes;
+  
+    // return hours + ":" + minutes ;
+
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours + ":" + mins;
+  
+}
+
+
+loadropdown() {
+  let that = this;
+  var script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  
+  setTimeout(() => {
+    that.showSelectdevice = true;
+    $('#select').multipleSelect({
+      width: 200,
+      placeholder: 'Select device.....',
+      filter: true,
+    })
+   // $('#select').show();
+ 
+  }, 100);
+}
+
+
+getReport(event){
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+
+
+    
+    var x = new Date(tpdata.toDate).setHours(23,59,59);
+
+    this.date1 = new Date(x).toISOString();    
+    var d = new Date(this.date1);
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+  
+
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    
+    
+ 
+    // this.tabelObj.clear();
+    // var aa = [];
+    // this.tabelObj.rows.add(aa); 
+      this.tabelObj.ajax.reload();    
+  }
+ 
+}
+
+clocation_1(latlngObj,cb){
+
+  var outerThis = this;
+  var la = '';
+
+  let latLng = {
+    lat :"0",
+    long:"0"
+  };
+  if(latlngObj.start_location){
+     latLng = {
+      lat: latlngObj.start_location.lat?latlngObj.start_location.lat:0,
+      long:latlngObj.start_location.long?latlngObj.start_location.long:0
+    }
+  }
+  if(latlngObj.today_start_location){  
+     latLng = {
+      lat: latlngObj.today_start_location.lat?latlngObj.today_start_location.lat:0,
+      long: latlngObj.today_start_location.long?latlngObj.today_start_location.long:0
+    }        
+  }  
+
+  // if () {
+  //   latLng = {
+  //     lat: 0,
+  //     long: 0
+  //   }
+  // }
+  
+  outerThis.contactService.getAddressByApi(latLng).subscribe(res=>{       
+    console.log('resaddresscomingfromAPi',res);   
+    if(res.message == "Address not found in databse"){
+        latlngObj['startAddress'] = "NA"; 
+      // cb(null,latlngObj);
+        var latLng_1 = {
+          lat :"0",
+          long:"0"
+        };
+        if(latlngObj.last_location){
+          latLng_1 = {
+            lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+            long:latlngObj.last_location.long?latlngObj.last_location.long:0
+          }
+         
+        }
+        if(latlngObj.end_location){  
+          latLng_1 = {
+            lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+            long: latlngObj.end_location.long?latlngObj.end_location.long:0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+          console.log('resaddresscomingfromAPi',res);
+          if(res.message == "Address not found in databse"){
+            latlngObj['endAddress'] = "NA"; 
+            cb(null,latlngObj);
+
+        
+          }else{
+            latlngObj['endAddress'] = res.address; 
+            cb(null,latlngObj);
+          }
+
+        })
+  
+    }else{  
+      latlngObj['startAddress'] = res.address; 
+      var latLng_1 = {
+        lat :"0",
+        long:"0"
+      };
+      if(latlngObj.last_location){
+        latLng_1 = {
+          lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+          long:latlngObj.last_location.long?latlngObj.last_location.long:0
+        }
+       
+      }
+      if(latlngObj.end_location){  
+        latLng_1 = {
+          lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+          long: latlngObj.end_location.long?latlngObj.end_location.long:0
+        }
+      }
+
+     
+      outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+        console.log('resaddresscomingfromAPi',res);
+        if(res.message == "Address not found in databse"){
+          latlngObj['endAddress'] = "NA"; 
+          cb(null,latlngObj);
+
+      
+        }else{
+          latlngObj['endAddress'] = res.address; 
+          cb(null,latlngObj);
+        }
+
+      })
+
+      // cb(null,latlngObj);
+    }
+  })
+
+}
+
+// --------------------New Method for excel export-------------------
+exportExcel() {
+  for(var i=0;i<this.reportArr.length;i++){
+    if(this.reportArr[i].Mileage== undefined || (this.reportArr[i].Mileage == NaN))
+    {
+      this.reportArr[i].Mileage="NA"
+    }else{
+      this.reportArr[i].Mileage=(this.reportArr[i].today_odo/parseFloat(this.reportArr[i].Mileage)).toFixed(2);
+    }
+    if(this.reportArr[i].today_running){
+      this.reportArr[i].today_running=this.millisecondConversion(parseInt(this.reportArr[i].today_running))
+    }else
+     this.reportArr[i].today_running='0:0'
+    if((this.reportArr[i].today_stopped!=undefined)&&(this.reportArr[i].today_stopped!=null)&&(this.reportArr[i].today_stopped!=NaN)){
+      this.reportArr[i].today_stopped=this.millisecondConversion(this.reportArr[i].today_stopped)
+    }else
+    this.reportArr[i].today_stopped="0:0"
+
+    if((this.reportArr[i].t_idling!=undefined)&&(this.reportArr[i].t_idling!=null)&&(this.reportArr[i].t_idling!=NaN)){
+      this.reportArr[i].t_idling=this.millisecondConversion(this.reportArr[i].t_idling)
+    }else{
+       this.reportArr[i].t_idling="0:0"
+    }
+
+     if((this.reportArr[i].t_ofr!=undefined)&&(this.reportArr[i].t_ofr!=null)&&(this.reportArr[i].t_ofr!=NaN)){
+      this.reportArr[i].t_ofr=this.millisecondConversion(this.reportArr[i].t_ofr)
+    }else{
+       this.reportArr[i].t_ofr="0:0"
+    }
+
+     if((this.reportArr[i].t_noGps!=undefined)&&(this.reportArr[i].t_noGps!=null)&&(this.reportArr[i].t_noGps!=NaN)){
+      if((this.reportArr[i].t_noGps < 60000)&&(this.reportArr[i].t_noGps == undefined)){
+                  var seconds = Math.floor((this.reportArr[i].t_noGps / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+                  var n_gps = "0:0:" + seconds;
+                  this.reportArr[i].t_noGps=n_gps
+                }else{
+                  var n_gps_1 = this.millisecondConversion(this.reportArr[i].t_noGps);
+                  var n_gps = n_gps_1 + ':0' 
+                   this.reportArr[i].t_noGps=n_gps
+                }
+    }else{
+       this.reportArr[i].t_noGps="0:0"
+    }
+    //  if(this.reportArr[i].maxSpeed){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].maxSpeed
+    // }
+    // if(this.reportArr[i].ID!= null){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }else{
+    //    this.reportArr[i].maxSpeed=0
+    // }
+
+
+  }
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Trip Details') {
+   
+    let arrHeader = ["Device_Name", "Device_ID", "today_odo", "Mileage","today_running","today_stopped","t_idling","t_ofr","t_noGps","today_trips","maxSpeed","startAddress","endAddress"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Daily Report.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Daily Report \r\n'+new Date(this.date1).getDate()+"/"+new Date(this.date1).getMonth()+1+"/"+
+    new Date(this.date1).getFullYear()+" \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders =["Vehicle Name", "Device IMEI", "Total Distance (Km)", "Fuel consumption (Litre)","Ignition ON Time (Hr:Min)","Ignition OFF Time (Hr:Min)","Idle Time (Hr:Min)","Out of reach (Hr:Min)","No GPS (Hr:Min:Sec)","Trips","Max Speed","Start Location","End Location"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+
+
+
+}
+
+
+
+ // let geocoder = new google.maps.Geocoder();
+      // let t_latlng = new google.maps.LatLng(latlngObj.lat, latlngObj.long);
+
+      // let request = {
+      //   latLng: t_latlng
+      // };
+      // geocoder.geocode(request, function (data, status) {
+      //   if (status == google.maps.GeocoderStatus.OK) {
+      //     if (data[0] != null) {
+        
+      //       var addressObj = {
+      //         "lat":latlngObj.lat,
+      //         "long":latlngObj.long,
+      //         "address":la
+      //       }
+      //         this.contactService.saveAdd(addressObj).subscribe(res=>{
+                  
+      //          cb(null,data[0].formatted_address);      
+      //         },err=>{  
+      //           console.log("couldn't save address");           
+      //          cb(null,data[0].formatted_address);      
+      //         })        
+      //     } else {
+         
+      //     cb(null,"No address available");
+      //     }
+      //   }
+      //   else {
+      //     cb(null,'NA');
+      //   }
+
+      // })
\ No newline at end of file
diff --git a/src/app/device-report/device-sosreport/device-sosreport.component.html b/src/app/device-report/device-sosreport/device-sosreport.component.html
new file mode 100644
index 0000000..36e446e
--- /dev/null
+++ b/src/app/device-report/device-sosreport/device-sosreport.component.html
@@ -0,0 +1,120 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Device SOS Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;">{{'Device ID' | translate}}</th>
+                      <th style="text-align:left;">{{'Vehicle No.' | translate}}</th> 
+                      <th style="text-align:left;">{{'Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Address' | translate}}</th>         
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+<!-- <html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <app-all-menus></app-all-menus>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a>        
+  </md-menu> 
+</div> 
+  <div style="min-height:100vh;padding-top: 5%;">
+    <p class="headStyle" style="margin-top: 0%;">{{'SOS Report' | translate}}</p>
+     <div class="loading" *ngIf="Load"></div>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+            <md-input-container>
+            <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option"
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.value">
+                <span>{{ option.value }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+     
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+           
+          </div>
+      </div>
+    </div>
+    <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+      <thead style="background-color:#A2C523;color: white;">
+          <tr>
+              <th style="text-align:center;">{{'Device ID' | translate}}</th>
+              <th style="text-align:center;">{{'Vehicle No.' | translate}}</th>
+              <th style="text-align:center;">{{'Time' | translate}}</th>
+              <th style="text-align:center;">{{'Address' | translate}}</th>         
+          </tr>
+      </thead>  
+  </table>
+
+    
+  </div>
+</body>
+</html> -->
\ No newline at end of file
diff --git a/src/app/device-report/device-sosreport/device-sosreport.component.scss b/src/app/device-report/device-sosreport/device-sosreport.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/device-sosreport/device-sosreport.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/device-sosreport/device-sosreport.component.spec.ts b/src/app/device-report/device-sosreport/device-sosreport.component.spec.ts
new file mode 100644
index 0000000..82f3efe
--- /dev/null
+++ b/src/app/device-report/device-sosreport/device-sosreport.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceSOSreportComponent } from './device-sosreport.component';
+
+describe('DeviceSOSreportComponent', () => {
+  let component: DeviceSOSreportComponent;
+  let fixture: ComponentFixture<DeviceSOSreportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceSOSreportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceSOSreportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/device-sosreport/device-sosreport.component.ts b/src/app/device-report/device-sosreport/device-sosreport.component.ts
new file mode 100644
index 0000000..082b0c3
--- /dev/null
+++ b/src/app/device-report/device-sosreport/device-sosreport.component.ts
@@ -0,0 +1,308 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../../contact.service';
+declare var $: any, DataTable: any;
+import * as moment from 'moment';
+declare var swal: any;
+@Component({
+  selector: 'app-device-sosreport',
+  templateUrl: './device-sosreport.component.html',
+  styleUrls: ['./device-sosreport.component.scss']
+})
+export class DeviceSOSreportComponent implements OnInit {
+  option:any;
+  Fromdate:any = new Date();
+  todate:any= new Date();
+  dataSelect: any;
+  useridd: any;
+  t: any;
+  devicesss: any;
+  finall: any;
+  emailid: any;
+  options: any=[];
+  Load: boolean;
+  tabelObj: any;
+  DealerId: any;
+
+  constructor(private contactService: ContactService,private router: Router) { }
+   
+  ngOnInit() {
+      console.log(this.Fromdate.setHours(0,0,0));
+   //  var from = new Date()
+    // this.Fromdate = from.setHours(0,0,0);
+    // console.log(this.Fromdate);
+    this.t = document.getElementById("download");
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.DealerId = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+    console.log("oifjerteoimfspferkrepofwe,rpewrekewpoewerkewop",this.DealerId);
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log("ignition option",this.options);
+      });
+      this.testTable();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+}
+
+
+  filterStates(val) {
+    // console.log(val)
+    // console.log(this.options)
+    if (val) {
+      const filterValue:any = val
+       this.dataSelect = this.options.filter( function(d){
+    
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+      });
+      return this.dataSelect;
+    }
+  
+  }
+
+
+  // exportExcel(){
+
+  // }
+
+    // ======================================SOS ALERT by data Table ====================================
+
+    testTable() {
+      const that = this;
+
+      $(document).ready(function() {
+          that.tabelObj = $('#deviceTable').DataTable({
+              serverSide: true,
+              "processing": true,
+              "searching": false,
+              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+
+              ajax: (dataTablesParameters: any, callback) => {
+
+                  dataTablesParameters.op = {};
+                  dataTablesParameters.select = [];
+                  dataTablesParameters.find = {};
+
+
+                  // console.log(dataTablesParameters);
+                  // console.log("callback", callback);
+
+                  // dataTablesParameters.find = {
+                  //   _id: that.useridd         
+                  // };
+                  dataTablesParameters.columns = [
+                      { data: "_id" },
+                      { data: "device" },
+                      { data: "vehicleName" },
+                      { data: "timestamp" },
+                      { data: "address" }
+                   
+                    ]
+                  
+                      dataTablesParameters.find.user = that.useridd;
+                      dataTablesParameters.find.type = 'SOS';
+
+                 
+                  if (that.deviceArr.length != 0) {
+                       console.log(that.dataSelect);
+                      dataTablesParameters.find.device = that.deviceArr[0];
+                  }
+                  if (that.Fromdate) {
+                      
+                      var fdate = new Date(that.Fromdate).toISOString();
+                     
+                      dataTablesParameters.find['timestamp'] = dataTablesParameters.find['timestamp'] ? dataTablesParameters.find['timestamp'] : {};
+                      dataTablesParameters.find['timestamp']['$gte'] = fdate;       
+                  };
+                  // }
+                  if (that.todate) {
+                      var tdate =  new Date(that.todate).toISOString()
+                      dataTablesParameters.find['timestamp'] = dataTablesParameters.find['timestamp'] ? dataTablesParameters.find['timestamp'] : {};
+                      dataTablesParameters.find['timestamp']['$lte'] = tdate;
+                  }
+
+                  var suburl = "";
+                  suburl += "/notifs/statusReport";
+                  // console.log(suburl);
+                  // console.log(dataTablesParameters);
+                  // console.log(suburl)
+                  that.Load = true;
+                  that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                    that.Load = false;
+                    console.log(resp);
+                    // if(resp.data.length == 0){
+                    //   swal(
+                    //     'Oops !!!',
+                    //     'No data found',
+                    //     'error'
+                    //   )
+                    // }
+                      callback(resp);
+                  }, err => {
+                    that.Load =false;
+                    swal(
+                      'Error',
+                      'Internal server error, Please try after somtime !!!',
+                      'error'
+                    )
+                      // console.log(err);
+                      // console.log(err.status);
+                  });
+              },
+              "columns": [
+                  {
+                      "data": "device",
+                      "render": function(data, type, row) {
+                          return data ? data : "";
+                      }
+                  },
+                  {
+                    "data": "vehicleName",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                  {
+                      "data": "timestamp",
+                      render: function(data, type, row) {
+                        var created_time = new Date(data);
+                        return data ? (moment(created_time).format('dddd,ll,LTS')) : "";
+                      
+                      }
+                  },
+                  {
+                      "data": "address",
+                      render: function(data, type, row) {
+                          return data ? data : "";
+                      }
+                  }                        
+              ],
+
+              // columnDefs: [
+               
+              // ],
+
+          });
+          // $('#deviceTable tbody').on('click', 'button', function() {
+          //   debugger;
+          //     var data = that.tabelObj.row($(this).parents('tr')).data();
+          //     console.log("button clicked");
+          // });
+      });
+
+      
+
+  }
+
+
+
+
+
+
+
+
+    // ======================================SOS ALERT by data Table ====================================
+
+    tab:any;
+
+    exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        // console.log('tab_text',JSON.parse(tab_text));
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+    deviceArr = [];
+    identifier : any = 'device_sos_report';
+    getReport(event){
+      if(event == 'getExcel'){
+        this.exportExcel();
+      }else{
+        var deviceId: any;
+        var tpdata = event ; 
+        var that = this;
+        var fd = new Date(tpdata.fromDate);
+        var td  = new Date(tpdata.toDate);
+        
+        if(event.deviceArr.length==0){
+          deviceId=[];
+        }else{
+          deviceId= event.deviceArr;
+        }
+        this.deviceArr = deviceId; 
+        console.log('this.deviceArr',this.deviceArr);
+        
+        this.Fromdate = fd;
+        this.todate = td;
+        console.log("b4");
+        // this.tabelObj.clear();
+        // var aa = [];
+        // this.tabelObj.rows.add(aa); 
+    
+    
+       
+          // this.tabelObj.ajax.reload();    
+        
+        
+          this.tabelObj.draw();         
+
+        
+         
+          
+      
+      
+      }
+     
+    }
+    
+
+  
+
+}
diff --git a/src/app/device-report/device-speed-report/device-speed-report.component.html b/src/app/device-report/device-speed-report/device-speed-report.component.html
new file mode 100644
index 0000000..3150d0e
--- /dev/null
+++ b/src/app/device-report/device-speed-report/device-speed-report.component.html
@@ -0,0 +1,52 @@
+
+
+<app-all-menus></app-all-menus>
+<div style="float:left; width: 99%; height:86vh;padding-left: 3%;padding-top: 6%;">
+    <p class="headStyle">{{'Speed variation' | translate}}</p>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div id="c44"  style="margin-top: 16px;padding-bottom:2%">
+      <md-input-container>
+        <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+        #state="ngModel" [(ngModel)]="option"
+       (ngModelChange)="filterStates(option)">
+       <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let option of dataSelect" [value]="option.value">
+            <span>{{ option.value }}</span>
+          </md-option>
+        </md-autocomplete>   
+      </md-input-container>
+      </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+      
+    Select date : <!--  <angular2-date-picker [(ngModel)]="date1" [settings]="settings"></angular2-date-picker>  -->
+    <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+      
+    </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+        <button  (click)="creategraph()" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button></div><br>   
+        
+       
+    
+    
+    <br>
+     <br>
+     <div style="  width:100%;
+     height:66.67vh;">
+
+
+     <div style="display: block;">
+        <canvas baseChart  height=" 425px"
+        width= "874px"
+                    [datasets]="lineChartData"
+                    [labels]="lineChartLabels"
+                    [options]="lineChartOptions"
+                    [colors]="lineChartColors"
+                    [legend]="lineChartLegend"
+                    [chartType]="lineChartType"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+    </div> 
+  </div><br>
+</div>
+
diff --git a/src/app/device-report/device-speed-report/device-speed-report.component.scss b/src/app/device-report/device-speed-report/device-speed-report.component.scss
new file mode 100644
index 0000000..487933e
--- /dev/null
+++ b/src/app/device-report/device-speed-report/device-speed-report.component.scss
@@ -0,0 +1,1181 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+   
+    color: #6b6a6a;
+    padding-top: 7px;
+    margin: 0px;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#ac{
+  color: rgb(38, 38, 90)
+}
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: .4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262F;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555
+}
+
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .example-full-width {
+    width: 30%;
+  }
+  #c11 {
+    width: 25%; 
+    float:left
+}
+#c22{
+    width: 25%; 
+    float:left
+}
+#c33 {
+    width: 25%; 
+    float:left
+    
+}
+#c44{
+    width: 25%; 
+    float:left
+}
+.example-full-width[_ngcontent-c4] {
+    width: 86% !important;
+}
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+ /*  .example-full-width[_ngcontent-c9] {
+    width: 79% !important;
+  } */
+  .left-sidebar, .right-sidebar {
+    width: 330px;
+    max-width: 330px;
+    min-width: 330px;
+}
+.outer-wrapper {
+    padding: 30px;
+}
+.center-content{
+    background: #ffffff;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 3px;
+    padding: 15px;
+}
+
+/deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/device-report/device-speed-report/device-speed-report.component.spec.ts b/src/app/device-report/device-speed-report/device-speed-report.component.spec.ts
new file mode 100644
index 0000000..05990ca
--- /dev/null
+++ b/src/app/device-report/device-speed-report/device-speed-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceSpeedReportComponent } from './device-speed-report.component';
+
+describe('DeviceSpeedReportComponent', () => {
+  let component: DeviceSpeedReportComponent;
+  let fixture: ComponentFixture<DeviceSpeedReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceSpeedReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceSpeedReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/device-speed-report/device-speed-report.component.ts b/src/app/device-report/device-speed-report/device-speed-report.component.ts
new file mode 100644
index 0000000..45b7539
--- /dev/null
+++ b/src/app/device-report/device-speed-report/device-speed-report.component.ts
@@ -0,0 +1,441 @@
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Params, Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-device-speed-report',
+  templateUrl: './device-speed-report.component.html',
+  styleUrls: ['./device-speed-report.component.scss'],
+  providers: [ContactService]
+
+})
+export class DeviceSpeedReportComponent implements OnInit {
+  date1: Date = new Date();
+
+  option: any;
+
+  neww: any;
+  Load: Boolean = false
+  creategraph() {
+
+    // console.log('deviceObj=>',this.dataSelect[0].did);
+
+    let r = new Date(this.date1).toISOString();
+    // console.log(r);
+    this.Load = true;
+    this.contactService.getSpeedreport(this.dataSelect[0].did, r).subscribe(
+
+      data => {
+        this.Load = false;
+        this.device_data = data
+        //console.log(this.device_data); 
+        this.lineChartLabels.length = this.device_data.length;
+        this.getdata(this.device_data)
+
+      });
+
+  }
+
+  before: any;
+
+  // logout() {
+  //   window.localStorage.clear();
+  //   this.router.navigateByUrl("login");
+  // }
+  // devi() {
+  //   this.router.navigateByUrl("dashboard");
+
+  // }
+  // soon() {
+  //   this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  // }
+
+  // geofancingReport() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/geofancing");
+  // }
+
+  // addcus() {
+  //   this.router.navigateByUrl("add");
+  // }
+  // geo() {
+  //   this.router.navigateByUrl("geofencing");
+
+  // }
+
+  // Ddetail() {
+  //   this.router.navigateByUrl("driverdetail");
+  // }
+  // DModel() {
+  //   this.router.navigateByUrl("deviceModel");
+  // }
+  // VType() {
+  //   this.router.navigateByUrl("VehicleType");
+  // }
+
+
+  // openNav() {
+  //   /*  document.getElementById("myNav").style.width = "100%";
+  //   */
+  //   this.router.navigateByUrl("location");
+
+  // }
+  // ign() {
+  //   this.router.navigateByUrl("device-report/ign-report");
+
+  // }
+
+  // vehicleRoute() {
+  //   this.router.navigateByUrl("vehicleRoute");
+
+  // }
+
+  // dealerInfo() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("dealerInfo");
+  // }
+
+  // notification() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("notifications");
+  // }
+
+  // overspeed() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/overspeed");
+
+  // }
+
+  // distance_report() {
+
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/distance_report");
+  // }
+
+
+  // stoppage_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/stoppage_report");
+
+  // }
+
+  // trip_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/trip_report");
+
+  // }
+
+
+  // alert_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/alert_report");
+  // }
+
+
+  new() {
+    this.router.navigateByUrl("new");
+
+  }
+  cond: Boolean = false;
+  point: any = 0;
+  // a() {
+  //   // console.log(this.point);
+  //   if (this.point == 0) {
+  //     this.cond = true;
+  //     this.point++;
+  //   }
+  //   else if (this.point % 2 == 0) {
+  //     this.cond = true;
+  //     this.point++;
+  //   }
+  //   else {
+  //     this.cond = false
+  //     this.point++;
+  //   }
+
+
+  // }
+  // report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report");
+
+  // }
+  // driverPerformance() {
+  //   this.cond = false;
+  //   this.router.navigateByUrl("device-report/Driver-performance");
+  // }
+
+
+  // summaryReport() {
+   
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/summary-report");
+  // }
+
+  // ignition_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/ignition_report");
+
+
+  // }
+
+
+
+
+
+  // report_map() {
+  //   this.router.navigateByUrl("routeMapping");
+
+  // }
+
+  // routeViolation() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/routeViolation");
+
+  // }
+  // group() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("group_view");
+  // }
+
+  // report_speed() {
+  //   // console.log("report speed call")
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/device-speed-report");
+  // }
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+  _lineChartData: any;
+  public info: string;
+  public prevDatasets;
+
+  options = [];
+
+  // ideal() {
+  //   this.router.navigateByUrl("device-report/ideal-report");
+  // }
+
+  getdata(final) {
+    let fi = [];
+    let time = [];
+    this.lineChartLabels.length = 0;
+    for (let q = final.length - 1; q > 0; q--) {
+      fi.push(final[q].speed);
+      let t = new Date(final[q].time).toLocaleTimeString();
+      // console.log(t);
+      //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+      this.lineChartLabels.push(t)
+    }
+    this.Load = false;
+    this.lineChartData = [{
+      label: "Speed",
+      data: fi
+    }];
+
+  }
+
+
+
+
+  // lineChart
+  public lineChartData: Array<any> = [
+    { data: [0, 0, 0, 0, 0, 0, 0], label: 'Speed' },
+  ];
+
+  public lineChartLabels: Array<any> = ['', '', '', '', '', '', ''];
+  public lineChartOptions: any = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        ticks: {
+          beginAtZero: false,
+          max: 6000,
+          min: 0
+        }
+      }]
+    }
+
+  };
+  public lineChartColors: Array<any> = [
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    },
+    { // dark grey
+      backgroundColor: 'rgba(77,83,96,0.2)',
+      borderColor: 'rgba(77,83,96,1)',
+      pointBackgroundColor: 'rgba(77,83,96,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(77,83,96,1)'
+    },
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    }
+  ];
+  public lineChartLegend: boolean = true;
+  public lineChartType: string = 'line';
+
+
+
+  // events
+  public chartClicked(e: any): void {
+    // console.log(e);
+  }
+
+  public chartHovered(e: any): void {
+    // console.log(e);
+  }
+  // myaccount() {
+
+  //   this.cond = false
+  //   this.router.navigateByUrl("accountSettings");
+   
+  // }
+
+  constructor(private contactService: ContactService, private router: Router, public dialog: MdDialog) { }
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  time: any;
+
+  device_data: any;
+  devicess: any;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  logoutbut: boolean;
+  dealer: boolean;
+  logo: any;
+  text: any;
+  devicesss: any;
+  finall: any;
+  mb: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.getdev();
+
+
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.time = new Date();
+
+    this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for (let i = 0; i < this.devicesss.devices.length; i++) {
+
+          // if (this.devicesss.devices[i].type_of_device == "Tracker") {
+            /*      let a ={
+                   dname : this.devicess.devices[i].Device_Name,
+                   did:this.devicess.devices[i].Device_ID,
+                   id:this.devicess.devices[i]._id,
+                   user:this.devicess.devices[i].user
+                 }
+                 this.options.push(a); */
+            let a = {
+              value: this.devicesss.devices[i].Device_Name,
+              viewValue: this.devicesss.devices[i].Device_Name,
+              did: this.devicesss.devices[i].Device_ID,
+              id: this.devicesss.devices[i]._id,
+              user: this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          }
+
+        // }
+
+
+
+      });
+
+    /* 
+        this.contactService.getSpeedreport("087074133830").subscribe(
+          
+          data => {
+            this.Load = false;
+            this.device_data = data 
+           console.log(this.device_data); 
+           this.lineChartLabels.length = this.device_data.length;  
+           this.getdata(this.device_data)
+      
+          }); */
+
+
+  }
+  dataSelect = [];
+  filterStates(val) {
+
+    // console.log(val)
+    // console.log(this.options)
+
+    if (val) {
+      const filterValue: any = val
+      this.dataSelect = this.options.filter(function (d) {
+
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+
+  }
+
+
+
+}
diff --git a/src/app/device-report/distance-report/details/details.component.html b/src/app/device-report/distance-report/details/details.component.html
new file mode 100644
index 0000000..3251e79
--- /dev/null
+++ b/src/app/device-report/distance-report/details/details.component.html
@@ -0,0 +1,92 @@
+<!-- <div class="container">
+  <h2>Details</h2>
+  
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Device Name</th>
+        <th>Date</th>
+        <th>Distance</th>
+        <th>Start Location</th>
+        <th>End Location</th>
+
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let item of tableData">
+        <td>{{item.device.Device_Name}}</td>
+        <td>{{item.date}}</td>
+        <td>{{item.distance}}</td>
+        <td>{{item.startLat}}</td>
+        <td>{{item.endLat}}</td>
+
+
+        </tr>
+        </tbody>
+        </table> -->
+
+
+
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class=modal-header style="margin-bottom: 6px;">
+          <h4>Details</h4>
+          <div class="text-right">
+          <button  class="mat-raised-button" md-raised-button=""
+            style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
+              width: 110px;" (click)="exportExcel()"><span class="mat-button-wrapper">Export To
+              Excel</span>
+            <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+              ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+            <div class="mat-button-focus-overlay"></div>
+          </button>
+        <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
+                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i class="fa fa-times" aria-hidden="true"></i>
+</span>
+          <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+            ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+          <div class="mat-button-focus-overlay"></div>
+        </button>
+        </div>
+        </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+
+
+                  <!-- <button class="btn btn-default" (click)="exportExcel()">Export</button> -->
+                  <!-- <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+                    style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+                    | translate}} >></button>
+                  <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+                    style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+                    << {{'Previous' | translate}}</button> -->
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+                  <div style="width: 100%;height:70vh;">
+                    <table id="detailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                      <thead style="background-color:#e0e0e0;color: #444444;">
+                        <tr>
+                          <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                            <th style="text-align: left;">{{'Date' | translate}}</th>
+                          <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                          <th style="text-align: left;">{{'End Location' | translate}}</th>
+                          <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                          <!-- <th style="text-align: left;">{{'Action' | translate}}</th> -->
+        
+                        </tr>
+                      </thead>
+                    </table>
+                  </div>
+                </div>
+              </div>
+        
+            </div>
+        
+          </div>
+        </div>
+       
\ No newline at end of file
diff --git a/src/app/device-report/distance-report/details/details.component.scss b/src/app/device-report/distance-report/details/details.component.scss
new file mode 100644
index 0000000..a1ce51f
--- /dev/null
+++ b/src/app/device-report/distance-report/details/details.component.scss
@@ -0,0 +1,3 @@
+.mat-dialog-container {
+  overflow: hidden !important;
+}
diff --git a/src/app/device-report/distance-report/details/details.component.spec.ts b/src/app/device-report/distance-report/details/details.component.spec.ts
new file mode 100644
index 0000000..35a2470
--- /dev/null
+++ b/src/app/device-report/distance-report/details/details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/distance-report/details/details.component.ts b/src/app/device-report/distance-report/details/details.component.ts
new file mode 100644
index 0000000..a67e93b
--- /dev/null
+++ b/src/app/device-report/distance-report/details/details.component.ts
@@ -0,0 +1,530 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../contact.service';
+declare var $: any;
+declare var moment:any;
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.scss']
+})
+export class DetailComponent implements OnInit {
+fs : any;
+
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  date1:any;
+  daily_report_data:any;
+  superAdmin:Boolean = false;
+  uId:any;
+d_name:any;
+d_report:any;
+total_dist:any;
+total_km:any;
+start_add_lat:any;
+start_add_long:any;
+end_add_lat:any;
+end_add_long:any;
+device_summary=[];
+address_show:any;
+fromDate:any;
+toDate:any;
+  firstcall:boolean=true;
+  lastcall:boolean=true;
+  skip:number=0;
+end_add_show:any;
+identifier:any = 'distance_report';
+mainData:any
+tableData:any
+  deviceArr: any[];
+  reportArr: any[];
+  constructor(public dialogRef: MdDialogRef<DetailComponent>,private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+       console.log('data=>',data,data.from_date,data.to_date);
+       this.mainData=data
+       console.log(this.mainData);
+       
+       this.fromDate=data.from_date;
+       this.toDate=data.to_date
+    }
+
+  ngOnInit() {
+          this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+//  setTimeout(function(){ alert("Hello"); }, 3000);
+    this.testTable2(this.mainData)
+  }
+  tabelObj: any ;
+testTable() {
+  const that = this;
+  console.log("inside function");
+
+ that.Load = true;
+            var from_date =this.mainData.from_date;
+            var to_date = that.mainData.to_date;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user,
+            device:this.mainData._id
+            }
+            console.log('temp',temp);
+            
+        // '&user=' + "5fdb427d38956a5d79ffb09b" + '&skip='+that.skip + '&limit='+ limit+'&device='+"5fdb54cb8939f65e6cc02527";
+            var suburl = "";
+            var limit = 26;
+            suburl += "/summary/distanceNew?from=" + temp.from_date +'&to=' + temp.to_date + 
+            '&user=' + user + '&skip='+that.skip + '&limit='+ limit+'&device='+temp.device;
+         that.contactService.getDetails(suburl).subscribe(resp => {   
+                that.Load = false;  
+                console.log("TTTTT",resp);
+                this.tableData=resp;
+                
+         }, err => {   
+              that.Load= false;    
+              // callback({ data: [] });
+              console.log("error",err) ;     
+            });
+
+
+}
+
+testTable2(data1){
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#detailsTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //   'copy',
+        //   'print',
+        //   'excel'
+        // ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+
+            $('#edit', row).bind('click', () => {   
+              var internalThat  = that;
+              console.log('rowrowrowrow=>',row);
+              console.log('datadatadatadata',data);
+          
+  
+          
+              // dialogRef.afterClosed().subscribe(result => {
+              //   console.log("result",result);
+              //   that.ngOnInit();
+             
+              //     if(result=="done"){
+              //       console.log("resultdone",result)
+              //       that.tost1("update");
+              //       window.localStorage['DataUpdate'] = 'True';
+              //       that.sidebar.sidebarData();       
+              //     }
+              // });              
+            }); 
+          
+            },
+          ajax: (mainData,callback) => {
+           
+              var deviceID;
+              
+              that.Load = true;
+              console.log("ddddddd",data1);
+              var date=data1.from_date
+            var user = that.useridd;
+            var temp = {
+            from_date :date,
+            to_date :data1.to_date,
+            user : user,
+            device:data1._id
+            }
+            console.log('temp',temp);
+            
+        
+            var suburl = "";
+            var limit = 26;
+            suburl += "/summary/distanceNew?from=" + temp.from_date +'&to=' + temp.to_date + 
+            '&user=' + temp.user + '&skip='+that.skip + '&limit='+ limit+'&device='+temp.device;
+           
+            that.contactService.getDetails(suburl).subscribe(resp => {   
+                that.Load = false;  
+                that.reportArr = [];
+                that.reportArr= resp ; 
+                //  if (that.reportArr.length != 0) {
+                //   resp.forEach(element => {
+                //     console.log(element);
+                //     element.date=that.convertDate(element.date)
+                    
+                    
+                //   });
+                //  }
+            
+                if (that.reportArr.length != 0) {
+                  var j = 0;
+                  var finalArr = [];
+                  for (var i = 0; i < that.reportArr.length; i++) {
+    
+                    that.clocation_1(that.reportArr[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        finalArr.push(succ);
+                        console.log(finalArr);
+                        j++;
+                        if (j === that.reportArr.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+                } else {
+                  that.Load = false;
+                  that.firstcall=true;
+                  that.lastcall=(that.skip>0)?false:true;
+                  callback({ data: [] });
+    
+                }
+            }, err => {   
+              that.Load= false;    
+              callback({ data: [] });
+              console.log("error",err) ;     
+            });
+        },  
+      
+          "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {                   
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+               {
+              "data": "date",
+              render: function(data, type, row) { 
+               
+                // convertDate(element.date)
+           
+                return data ? (moment(data).format('DD-MM-YYYY')):0;
+              }
+          } ,
+              {
+                  "data": "startAddress",
+                  "defaultContent": "",
+                  render: function(data, type, row) {            
+                  
+                    var aiden = typeof(data) ;
+                    if(aiden == 'object'){
+                      var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                      return addressLink;
+                    }else{
+                      return data?data : '--';   
+                    }
+                     
+                    
+                  }
+              },
+              {
+                  "data": "endAddress",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var biden = typeof data ; 
+                    if(biden === 'object'){
+                      var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                      return addressLink; 
+                    }else{
+                      return data?data : '--';   
+                    }
+                 
+                  }
+              },        
+            {
+              "data": "distance",
+              render: function(data, type, row) { 
+           
+                return data?data.toFixed(2):0;
+              }
+          } ,
+    //      {
+    //       "data":null,
+    //       "defaultContent": "",
+    //       "render":function(data,type,row){   
+    //         return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+    //   }
+    // }
+// <i class="fas fa-info-circle"></i>
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4] },  
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },  
+                    { "width": "10px", "targets": 4 },   
+ 
+    //       {
+    //     targets: -1, //-1 es la ultima columna y 0 la primera
+    //     data: null,
+    //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+    // },
+          ] 
+      });
+
+  });
+
+}
+
+  convertDate(inputFormat) {
+          function pad(s) { return (s < 10) ? '0' + s : s; }
+            var d = new Date(inputFormat)
+           return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/')
+              }
+
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat: latlngObj.startLat ? latlngObj.startLat : 0,
+        long: latlngObj.startLng ? latlngObj.startLng : 0
+      }
+    
+  
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['startAddress'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.endLat ? latlngObj.endLat : 0,
+            long: latlngObj.endLng ? latlngObj.endLng : 0
+          }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.endLat ? latlngObj.endLat : 0,
+            long: latlngObj.endLng ? latlngObj.endLng : 0
+          }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+data_descip:any;
+getReport(event){
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    console.log('this.deviceArr',this.deviceArr);
+    this.Fromdate = fd.toISOString();
+    this.todate = td.toISOString();
+ 
+      var diff = moment(this.todate).diff(this.Fromdate, 'days')
+      console.log('difference :' + diff)
+      if(diff>=31){
+          this.data_descip = 'Report is unavailable for more than a month';
+          launch_toast();
+
+      }else{
+        this.skip = 0;
+        this.firstcall=false;
+        this.lastcall= true;
+        this.tabelObj.ajax.reload();     
+      }
+
+    
+    
+  }
+  function launch_toast() {
+    // console.log(divid);
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+  }
+    
+
+
+}
+
+tab:any;
+  exportExcel()
+	{
+   console.log("Export");
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#detailsTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+    
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+
+next() {
+    // this.deviceData =[];
+    this.lastcall=false;
+    this.skip += 1; 
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.tabelObj.ajax.reload();     
+  }
+  pre() {
+    // this.deviceData=[]
+    // console.log(this.skip)
+    if(this.skip>0){
+      this.skip -= 1;   
+      this.lastcall=false;
+      // this.sidebarData();
+      // this.ngOnInit();
+      this.tabelObj.ajax.reload();     
+    }else{
+      this.lastcall=true;
+      this.firstcall=false;
+    }
+   
+  }
+
+}
diff --git a/src/app/device-report/distance-report/distance-report.component.html b/src/app/device-report/distance-report/distance-report.component.html
new file mode 100644
index 0000000..3e443f8
--- /dev/null
+++ b/src/app/device-report/distance-report/distance-report.component.html
@@ -0,0 +1,124 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Distance Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
+              <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
+            </div>
+          </div>
+          <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-12">
+                <div class="loading" *ngIf="Load">Loading&#8230;</div>
+                <div style="width: 100%;height:84vh;">
+                  <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                      <thead style="background-color:#e0e0e0;color: #444444;">
+                          <tr>
+                            <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                            <th style="text-align: left;">{{'From Date' | translate}}</th>
+                            <th style="text-align: left;">{{'To Date' | translate}}</th>
+                            <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                            <th style="text-align: left;">{{'End Location' | translate}}</th>
+                            <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                              <th style="text-align: left;">{{'Details' | translate}}</th>
+
+                          </tr>
+                      </thead>  
+                  </table>
+              </div>       
+            </div>
+          </div>
+
+        </div>
+       
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+
+      <app-all-menus></app-all-menus>
+
+  <div style="min-height:100vh;padding-top: 6%;">
+    <p class="headStyle">{{'Distance Report' | translate}}</p>
+<div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+            <md-input-container>
+                <input mdInput placeholder="Devices" [mdAutocomplete]="tdAuto" name="state" 
+                #state="ngModel" [(ngModel)]="option" 
+               (ngModelChange)="filterStates(option)">
+               <md-autocomplete #tdAuto="mdAutocomplete">
+                  <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
+                    <span>{{ option_1.value }}</span>
+                  </md-option>
+                </md-autocomplete> 
+              </md-input-container>
+      
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="distanceRep(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+      </div>
+    </div>
+    <table id="test" class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'Device Name' | translate}}</th>
+          <th >{{'Start Location' | translate}}</th>
+          <th>{{'End Location' | translate}}</th>
+          <th>{{'Total K.M.' | translate}}</th>        
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let device of device_summary">
+          <td style="cursor:pointer">{{device.devicename}}</td>
+          <td style="cursor:pointer">{{device.address}}</td>
+          <td style="cursor:pointer">{{device.address_end}}</td>
+          <td style="cursor:pointer">{{device.totalkm | number:'1.2-2'}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div> -->
+
+  
+    
+ 
\ No newline at end of file
diff --git a/src/app/device-report/distance-report/distance-report.component.scss b/src/app/device-report/distance-report/distance-report.component.scss
new file mode 100644
index 0000000..ff5f073
--- /dev/null
+++ b/src/app/device-report/distance-report/distance-report.component.scss
@@ -0,0 +1,89 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 350px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.modal-open .modal {
+  margin-top: 60px;
+}
diff --git a/src/app/device-report/distance-report/distance-report.component.spec.ts b/src/app/device-report/distance-report/distance-report.component.spec.ts
new file mode 100644
index 0000000..099268a
--- /dev/null
+++ b/src/app/device-report/distance-report/distance-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DistanceReportComponent } from './distance-report.component';
+
+describe('DistanceReportComponent', () => {
+  let component: DistanceReportComponent;
+  let fixture: ComponentFixture<DistanceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DistanceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DistanceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/distance-report/distance-report.component.ts b/src/app/device-report/distance-report/distance-report.component.ts
new file mode 100644
index 0000000..953ae3a
--- /dev/null
+++ b/src/app/device-report/distance-report/distance-report.component.ts
@@ -0,0 +1,981 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { DetailComponent } from './details/details.component';
+// declare function show
+declare var google: any;
+declare var $: any;
+declare var moment:any;
+
+// function show(){
+//     alert('Hello!!!');
+// }
+
+@Component({
+  selector: 'app-distance-report',
+  templateUrl: './distance-report.component.html',
+  styleUrls: ['./distance-report.component.scss']
+})
+export class DistanceReportComponent implements OnInit {
+  dataSelect: any[];
+  closeProcess: number;
+  deviceArr: any=[];
+  reportArr: any=[];
+firstcall:boolean=true;
+  lastcall:boolean=true;
+  skip:number=0;
+  tabelObj: any ;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _flashMessagesService:FlashMessagesService) {
+
+   }
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  date1:any;
+  daily_report_data:any;
+  superAdmin:Boolean = false;
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+  //  show()
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+
+
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+    
+   }
+   else{
+       this.logoutbut = true
+   }
+        
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+     
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log(this.options);
+     
+
+    //   });
+
+
+    this.testTable();
+    // this.testTables()
+  }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+//   ignition_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/ignition_report");
+
+
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+
+
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+// summaryReport(){
+
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+
+// driverPerformance(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/Driver-performance");
+// }
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+// trip_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/trip_report");
+
+// }
+
+
+// alert_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/alert_report");
+// }
+
+   
+uId:any;
+d_name:any;
+d_report:any;
+total_dist:any;
+total_km:any;
+start_add_lat:any;
+start_add_long:any;
+end_add_lat:any;
+end_add_long:any;
+device_summary=[];
+address_show:any;
+
+end_add_show:any;
+identifier:any = 'distance_report';
+
+// distanceRep(Fromdate,todate){
+//   // console.log(this.dataSelect)
+//   this.device_summary=[];
+//   var devId='';
+//   var userID = this.useridd;
+//   if((this.dataSelect==undefined)||(this.dataSelect.length==0)){
+//     devId="";
+//   }else{
+//     devId= this.dataSelect?this.dataSelect[0].id:"";
+//   }
+
+
+// let f_date = Fromdate.toISOString();
+// let t_date =  todate.toISOString();
+
+
+// var outerThis = this;
+// this.Load=true;
+// this.contactService.distanceReport(f_date, t_date, userID,devId)
+//     .subscribe(res=>{
+//       this.Load=false;
+//       // console.log(res);
+//       this.d_report=res;
+//         var i = 0;
+//         // howManyTimes =  this.d_report.length;
+//         this.closeProcess=this.d_report.length;
+//         for(var k=0;k<this.d_report.length;k++){
+//           this.d_name = outerThis.d_report[k].device.Device_Name;
+//           this.total_km = outerThis.d_report[k].distance;
+//           this.device_summary.push({
+//             "devicename": outerThis.d_name,
+//             "totalkm":outerThis.total_km
+//           })
+//         }      
+//         function f() {
+//           outerThis.start_add_lat = outerThis.d_report[i].startLat?outerThis.d_report[i].startLat:null;
+//           outerThis.start_add_long = outerThis.d_report[i].startLng?outerThis.d_report[i].startLng:null;
+
+//           outerThis.end_add_lat= outerThis.d_report[i].endLat?outerThis.d_report[i].endLat:null;
+//           outerThis.end_add_long= outerThis.d_report[i].endLng?outerThis.d_report[i].endLng:null         
+//           var geocoder = new google.maps.Geocoder();
+//           var latlng_start = new google.maps.LatLng(outerThis.start_add_lat,outerThis.start_add_long);
+//           var geocoder_end = new google.maps.Geocoder();
+//           var latlng_end = new google.maps.LatLng(outerThis.end_add_lat,outerThis.end_add_long);
+
+//           var request={
+//             latLng:latlng_start
+//           }
+
+//           var request_end={
+//             latLng:latlng_end
+//           }
+       
+
+         
+
+//           geocoder.geocode(request, function(data,status){
+            
+
+//             if(status == google.maps.GeocoderStatus.OK){
+//               if(data[0]!=null){
+//                 // console.log(data[0].formatted_address);
+              
+//                  this.start_add = data[0].formatted_address;
+
+//                  if(this.start_add=="Antarctica"){
+//                   this.start_add="NA";
+//                  }
+                 
+//                  outerThis.address_show = this.start_add;
+               
+               
+//               }else{
+//                 this.start_add="NA";
+//               }
+//             }
+//             else{
+           
+//               this.start_add ='NA';
+//               outerThis.address_show = this.start_add
+           
+//             }  
+//             outerThis.device_summary[i-1].address= outerThis.address_show;
+//             // console.log(outerThis.address_show);
+//           })
+
+
+//           geocoder.geocode(request_end, function(data1,status){
+        
+//             if(status == google.maps.GeocoderStatus.OK){
+//               if(data1[0]!=null){
+//                  this.end_add = data1[0].formatted_address;
+
+//                  if(this.end_add=="Antarctica"){
+//                   this.end_add="NA";
+//                  }
+              
+//                  outerThis.end_add_show = this.end_add;
+               
+               
+//               }else{
+//                 this.end_add="NA";
+//               }
+//             }
+//             else{
+           
+//               this.end_add ='NA';
+//               outerThis.end_add_show  = this.end_add;
+           
+//             }  
+//             outerThis.device_summary[i-1].address_end= outerThis.end_add_show;
+//             // console.log(outerThis.address_show);
+//           })
+//           i++;
+//           if( i < outerThis.closeProcess ){
+//               setTimeout( f,4000 );
+//           }
+//         }
+//         f();
+
+      
+//     },(error)=>{
+//       this.Load=false;
+//       // console.log(error.status);
+//       // console.log("No Record Found !!!");
+//       this._flashMessagesService.show('No Record Found !!!', { cssClass: 'alert-danger', timeout: 3000 });
+//     })
+
+// }
+
+
+data_descip:any;
+getReport(event){
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    console.log('this.deviceArr',this.deviceArr);
+    this.Fromdate = fd.toISOString();
+    this.todate = td.toISOString();
+ 
+      var diff = moment(this.todate).diff(this.Fromdate, 'days')
+      if(diff>=31){
+
+          this.data_descip = 'Report is unavailable for more than a month';
+          launch_toast();
+
+      }else if(diff>=15 && this.deviceArr.length>=10){
+        // if(this.deviceArr.length>=10){
+  
+          this.data_descip = 'Please select less than 10 vehicals';
+          launch_toast();
+        // }
+      }else{
+        this.skip = 0;
+        this.firstcall=false;
+        this.lastcall= true;
+        this.tabelObj.ajax.reload();     
+      }
+    }
+    
+  function launch_toast() {
+    // console.log(divid);
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+  }
+  
+}
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //   'copy',
+        //   'print',
+        //   'excel'
+        // ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+
+            $('#edit', row).bind('click', () => {   
+              var internalThat  = that;
+              // console.log('rowrowrowrow=>',row);
+              // console.log('datadatadatadata',data);
+          
+              let dialogRef = that.dialog.open(DetailComponent, {
+                // width: '950px',
+                // height: '1160px',   
+                data: { _id: data.device._id, des: data.Device_Des, sim:data.sim_number, dname:data.Device_Name, speed:data.SpeedLimit,iconType:data.iconType,drname:data.driver_name,dcontact:data.contact_number,expdate:data.expiration_date,model:data.maxSpeed,mainmodel:data.device_model,assigned_to:data.user,vehicleType:data.vehicleType,devIMEI:data.Device_ID,S_provider:data.sim_provider,tot_ODO:data.total_odo,itiId:data.integrationId,simNUM2:data.sim_number2,simProvider2:data.sim_provider2,devObj:data,from_date :that.Fromdate,to_date : that.todate}
+                
+              });             
+            }); 
+            },
+          ajax: (dataTablesParameters,callback) => {
+           
+              var deviceID;
+              
+              that.Load = true;
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+        
+            var suburl = "";
+            // var limit = 26;
+            suburl += "/summary/distance?from=" + temp.from_date +'&to=' + temp.to_date + '&user=' + temp.user + '&skip='+that.skip ;
+            if(that.deviceArr.length != 0){  
+              suburl +='&device='+that.deviceArr;
+            }
+            if(that.deviceArr.length != 0 && temp.from_date && temp.to_date ){
+            that.contactService.get(suburl).subscribe(resp => {   
+                that.Load = false;  
+                that.reportArr = [];
+                that.reportArr= resp ; 
+            
+                if (that.reportArr.length != 0) {
+                  var j = 0;
+                  var finalArr = [];
+                  for (var i = 0; i < that.reportArr.length; i++) {
+    
+                    that.clocation_1(that.reportArr[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        finalArr.push(succ);
+                        console.log(finalArr);
+                        j++;
+                        if (j === that.reportArr.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+                } else {
+                  that.Load = false;
+                  that.firstcall=true;
+                  that.lastcall=(that.skip>0)?false:true;
+                  callback({ data: [] });
+    
+                }
+            }, err => {   
+              that.Load= false;    
+              callback({ data: [] });
+              console.log("error",err) ;     
+            });
+          }else{
+            that.Load= false;    
+              callback({ data: [] });
+          }
+        },  
+      
+          "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {                   
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+               {
+                  "data": "from_date",
+                  "render": function(data, type, row) { 
+                    let date=new Date(that.Fromdate).getDate()+"/"+new Date(that.Fromdate).getMonth()+1+"/"+new Date(that.Fromdate).getFullYear()                 
+                    return date;                  
+                  }
+              },
+               {
+                  "data": "to_date",
+                  "render": function(data, type, row) { 
+                    let date=new Date(that.todate).getDate()+"/"+new Date(that.todate).getMonth()+1+"/"+new Date(that.todate).getFullYear()                                   
+                    return date;                  
+                  }
+              },
+              {
+                  "data": "startAddress",
+                  "defaultContent": "",
+                  render: function(data, type, row) {            
+                  
+                    var aiden = typeof(data) ;
+                    if(aiden == 'object'){
+                      var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                      return addressLink;
+                    }else{
+                      return data?data : '--';   
+                    }
+                     
+                    
+                  }
+              },
+              {
+                  "data": "endAddress",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var biden = typeof data ; 
+                    if(biden === 'object'){
+                      var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                      return addressLink; 
+                    }else{
+                      return data?data : '--';   
+                    }
+                 
+                  }
+              },        
+            {
+              "data": "distance",
+              render: function(data, type, row) { 
+           
+                return data?data.toFixed(2):0;
+              }
+          } ,
+         {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+      }
+    }
+// <i class="fas fa-info-circle"></i>
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6] },  
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },  
+          //           { "width": "10px", "targets": 3 },   
+ 
+    //       {
+    //     targets: -1, //-1 es la ultima columna y 0 la primera
+    //     data: null,
+    //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+    // },
+          ] 
+      });
+
+  });
+
+}
+
+
+
+tab:any;
+  exportExcel()
+	{ 
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+
+  filterStates(val) {
+
+    // console.log(val)
+    // console.log(this.options)
+
+     
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+    
+    const filterValue:any = val;
+      
+    this.dataSelect = this.options.filter(function(d){
+     var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+   //  this.option = this.options[i];
+ 
+  
+     return t > -1;    
+   });
+   
+     return this.dataSelect;
+
+  }
+   
+ 
+  }
+
+  ngOnDestroy(){
+    this.closeProcess= 0;
+
+  }
+
+  
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat: latlngObj.startLat ? latlngObj.startLat : 0,
+        long: latlngObj.startLng ? latlngObj.startLng : 0
+      }
+    
+  
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['startAddress'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.endLat ? latlngObj.endLat : 0,
+            long: latlngObj.endLng ? latlngObj.endLng : 0
+          }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.endLat ? latlngObj.endLat : 0,
+            long: latlngObj.endLng ? latlngObj.endLng : 0
+          }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['endAddress'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+  
+  next() {
+    // this.deviceData =[];
+    this.lastcall=false;
+    this.skip += 1; 
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.tabelObj.ajax.reload();     
+  }
+  pre() {
+    // this.deviceData=[]
+    // console.log(this.skip)
+    if(this.skip>0){
+      this.skip -= 1;   
+      this.lastcall=false;
+      // this.sidebarData();
+      // this.ngOnInit();
+      this.tabelObj.ajax.reload();     
+    }else{
+      this.lastcall=true;
+      this.firstcall=false;
+    }
+   
+  }
+  
+// --------------------New Method for excel export-------------------
+exportExcels() {
+   for(var i=0;i<this.reportArr.length;i++){
+    this.reportArr[i].deviceName=this.reportArr[i].device.Device_Name;
+   }
+
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Trip Details') {
+   
+    let arrHeader = ["deviceName", "startAddress", "endAddress", "distance"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Trip Details.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Distance Report \r\n'+"From ="+this.Fromdate+"   To="+this.todate+" \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders =["Device Name", "Start Location", "End Location", "Total K.M"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+
+  
+ 
+
+}
diff --git a/src/app/device-report/drivers-performance-report/drivers-performance-report.component.html b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.html
new file mode 100644
index 0000000..7d823ca
--- /dev/null
+++ b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.html
@@ -0,0 +1,63 @@
+
+
+      <app-all-menus></app-all-menus>
+
+  <div style="min-height:420px;padding-top: 6%;">
+    <p class="headStyle">{{"Driver Performance Report" | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <!-- <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="groupVal" placeholder="--Select Group--"  ngDefaultControl>
+            <md-option *ngFor="let groupVal of grpName" [value]="groupVal">
+              {{ option.value }}
+            </md-option>
+          </md-select>
+        </div> -->
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="driverVal" placeholder="--{{'Select Driver' | translate}}--"  ngDefaultControl>
+            <md-option *ngFor="let driverVal of getDrivers" [value]="driverVal">
+              {{ driverVal.name }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="driverReport()">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table id="test" class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'Driver Name' | translate}}</th>
+          <th >{{'Total trip' | translate}}</th>
+          <th >{{'Total Ontime trip' | translate}}</th>
+          <th>{{'Ontime vehicles' | translate}}</th>
+          <th >{{'Total Delayed trip' | translate}} </th>
+          <th>{{'Delayed vehicles' | translate}}</th>        
+          <!-- <th>Performance</th>      -->
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of reportArr">
+          <td style="cursor:pointer">{{report.name}}</td>
+          <td style="cursor:pointer">{{report.tripCount}}</td>
+          <td style="cursor:pointer">{{report.onTimeCount}}</td>
+          <td style="cursor:pointer">{{report.Ontime}}</td>
+          <td style="cursor:pointer">{{report.delayCount}}</td>
+          <td style="cursor:pointer">{{report.Delay}}</td>
+          <!-- <td style="cursor:pointer"></td> -->
+        </tr>
+      </tbody>
+    </table>
+  </div>
diff --git a/src/app/device-report/drivers-performance-report/drivers-performance-report.component.scss b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.scss
new file mode 100644
index 0000000..1646112
--- /dev/null
+++ b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.scss
@@ -0,0 +1,1092 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+  
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+
+    // .dtStyle{
+
+    // }
+  }
+  
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/device-report/drivers-performance-report/drivers-performance-report.component.spec.ts b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.spec.ts
new file mode 100644
index 0000000..42e298a
--- /dev/null
+++ b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DriversPerformanceReportComponent } from './drivers-performance-report.component';
+
+describe('DriversPerformanceReportComponent', () => {
+  let component: DriversPerformanceReportComponent;
+  let fixture: ComponentFixture<DriversPerformanceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DriversPerformanceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DriversPerformanceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/drivers-performance-report/drivers-performance-report.component.ts b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.ts
new file mode 100644
index 0000000..2f27c50
--- /dev/null
+++ b/src/app/device-report/drivers-performance-report/drivers-performance-report.component.ts
@@ -0,0 +1,386 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Component({
+  selector: 'app-drivers-performance-report',
+  templateUrl: './drivers-performance-report.component.html',
+  styleUrls: ['./drivers-performance-report.component.scss']
+})
+export class DriversPerformanceReportComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate= new Date();
+  options=[];
+  logo:any;
+  before:any;
+  date1:any;
+  daily_report_data:any;
+  superAdmin:Boolean = false;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    var fTime = new Date();
+    this.Fromdate = new Date(fTime);
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+  if(this.custtype == true){
+    this.cust = true;
+  }  
+  if(this.mb.charAt(0)=="n"){
+    this.mb = ' '
+  }
+
+
+  if( window.localStorage['Custumer'] == 'ON'){
+    this.logoutbut = false
+    this.dealer = true
+ }
+ else{
+     this.logoutbut = true
+ }
+      
+ this.logo=window.localStorage['logo'];
+ this.text=window.localStorage['text'];
+   
+
+  this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    data => {
+      this.devicesss = data
+   
+      this.finall = (this.devicesss.devices);
+
+      for(let i=0;i<this.devicesss.devices.length;i++){
+
+        // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+          let a ={
+            value : this.devicesss.devices[i].Device_Name,
+            viewValue:this.devicesss.devices[i].Device_Name,
+            did:this.devicesss.devices[i].Device_ID,
+            id:this.devicesss.devices[i]._id,
+            user:this.devicesss.devices[i].user,
+            // email: this.devicesss.devices[i].Email_ID,
+            // deviceType: this.devicesss.devices[i].type_of_device
+          }
+          this.options.push(a);
+        // }
+
+      }
+        // console.log(this.options);
+    });
+
+    this.getDriverList();
+  }
+
+
+
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+notification(){
+  this.cond = false
+  this.router.navigateByUrl("notifications");
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+driverPerformance(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+}
+
+
+
+// component code starts here 
+
+groupVal:any;
+driverVal:any;
+getDrivers:any;
+reportArr=[]
+driverReport(){
+  // console.log(this.driverVal._id);
+  var driverId = this.driverVal._id;
+  // console.log(this.Fromdate);
+  // console.log(this.todate);
+  this.reportArr = [];
+  this.contactService.driverReport_data(this.Fromdate,this.todate,driverId)
+    .subscribe(res=>{
+      // console.log(res);
+      for(var i=0;i<res.length;i++){
+        this.reportArr[i] = {};
+        this.reportArr[i].name = res[i]._id.Driver_Name;
+        this.reportArr[i].tripCount = res[i].total_trips;
+        this.reportArr[i].Delay = "",  this.reportArr[i].Ontime = "";
+        for(var j=0;j<res[i].Overall_Details.length;j++){
+          
+          if(res[i].Overall_Details[j].status=="Ontime")
+          {
+            for(var k=0;k<res[i].Overall_Details[j].route_names.length;k++){
+              this.reportArr[i].Ontime+=(res[i].Overall_Details[j].route_names[k].names)+" | ";
+            }
+            this.reportArr[i].onTimeCount = res[i].Overall_Details[j].status_count;
+          }
+          if(res[i].Overall_Details[j].status=="Delay"){ 
+            for(var k=0;k<res[i].Overall_Details[j].route_names.length;k++){
+              this.reportArr[i].Delay+=(res[i].Overall_Details[j].route_names[k].names)+" | ";
+            }
+            this.reportArr[i].delayCount = res[i].Overall_Details[j].status_count;            
+          }
+         
+        }
+      }
+      // console.log(this.reportArr);
+    })
+  }
+
+getDriverList(){
+  let id= this.useridd;
+  this.contactService.getDrivers(id)
+    .subscribe(res =>{
+      // console.log(res)
+      this.getDrivers= res;
+    })
+}
+
+grpName:any;
+getGrp(){
+  this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      // console.log(res);     
+      this.grpName = res["group_details"];
+      // console.log(this.grpName);  
+    })
+}
+
+tab:any;
+exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    this.tab = document.getElementById('test'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+	}
+
+}
diff --git a/src/app/device-report/fuel-report/fuel-report.component.html b/src/app/device-report/fuel-report/fuel-report.component.html
new file mode 100644
index 0000000..8be1f20
--- /dev/null
+++ b/src/app/device-report/fuel-report/fuel-report.component.html
@@ -0,0 +1,128 @@
+
+<div  class="navbar navbar-default" style="margin-left: -15px;margin-top: -8px;">
+<app-all-menus *ngIf="!token_identifier"></app-all-menus>
+</div>
+
+<div style="margin-top: 30px;">
+
+  <div *ngIf="show" id="mySidebar" class="sidebar" style="background: white;
+    box-shadow: 3px 1px 5px 0px #b2b0ae;">
+    <!-- <button class="close pull-right" (click)="closeNav()"><i class="fas fa-times"></i></button> -->
+    <!-- <app-report-filter></app-report-filter> -->
+    <div class="row" style="margin: 0;padding-bottom: 10px;">
+      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+        <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{"Vehicle" | translate}} :</p>
+      </div>
+      <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">
+        <div>
+          <select id="dbselect" multiple="multiple">
+            <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="row" style="margin: 0;padding-bottom: 10px;">
+      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+        <!-- timefilter icons -->
+        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
+          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4"
+            (click)="changeDate('today')">{{'Today' | translate}}</button>
+          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5"
+            (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+          <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6"
+            (click)="changeDate('week')">{{'Week' | translate}}</button>
+          <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
+        </div>
+      </div>
+    </div>
+  <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+      <!-- from time label-->
+      <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <!-- from datetime picker -->
+      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+        [(ngModel)]="from_date" type="text">
+    </div>
+    </div>
+    <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+        <!-- tolabel -->
+        <span style="margin-bottom: 0%;font-size: 12px;">{{"To" | translate}} :</span>
+      </div>
+      <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+        <!-- tolabel picker -->
+        <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+          name="todate" [(ngModel)]="to_date" type="text">
+      </div>
+    </div>
+    <!-- <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+        <span class="col-md-4" style="margin-bottom: 0%;font-size: 12px;">{{"IN" | translate}} </span>
+      <md-slide-toggle class="col-md-4" style="float: right; padding: 8px 35.1px"
+        md-tooltip="Include Dealer's Customers" [(ngModel)]="event"></md-slide-toggle>
+          <span class="col-md-4" style="margin-bottom: 0%;font-size: 12px;">{{"OUT" | translate}}</span>
+
+    </div> -->
+
+    <div class="dropdown">
+      <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="reportFilter('data')">{{'Search' |
+        translate}}</button>
+      <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="dropdown-toggle" type="button"
+        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ 'Export To' |translate}}
+      </button>
+      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <a style="cursor: pointer;" class="dropdown-item" (click)="exportExel()"><i class="far fa-file-excel"></i> Excel</a>
+        <a style="cursor: pointer;" class="dropdown-item" (click)="exportPDF()"><i class="far fa-file-pdf"></i> PDF</a>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div id="line" class="line"></div>
+    <div class="wordwrapper">
+      <div id="line1" class="word">
+        <i style="color: floralwhite;" *ngIf="showLine" class="fas fa-chevron-circle-right" (click)="openNav()"></i>
+        <i style="color: black;font-size: 14px;margin-left: -11px;" *ngIf="!showLine" class="fas fa-chevron-circle-left"
+          (click)="openNav()"></i>
+      </div>
+
+    </div>
+  </div>
+
+  <div *ngIf="show" id="main" style="box-shadow: 3px 1px 5px 0px #b2b0ae">
+    <div class="row"
+      style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <h4>{{'Fuel Fill Report' | translate}}</h4>
+        <div id="toast">
+          <!-- <div id="desc">{{data_descip}}</div> -->
+        </div>
+      </div>
+    </div>
+
+    <div class="row"
+      style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <div *ngIf="Load" class="loading">Loading&#8230;</div>
+        <div style="width: 100%;height:84vh;">
+          <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+            <thead style="background-color:#e0e0e0;color: #444444;">
+              <tr>
+                <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+                <th style="text-align:center">{{'Event' | translate}}</th>
+                <th style="text-align:center">{{'Fuel Change (L)' | translate}}</th>
+                <th style="text-align:center">{{'Time' | translate}}</th>
+                <th style="text-align:center">{{'Location' | translate}}</th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+</div>
+
+
diff --git a/src/app/device-report/fuel-report/fuel-report.component.scss b/src/app/device-report/fuel-report/fuel-report.component.scss
new file mode 100644
index 0000000..d2c6240
--- /dev/null
+++ b/src/app/device-report/fuel-report/fuel-report.component.scss
@@ -0,0 +1,226 @@
+ul {
+  list-style-type: none;
+  margin: 55px 0px 0px 0px;
+  padding: 0;
+  width: 25%;
+  background-color: #f1f1f1;
+  position: fixed;
+
+  height: 100%;
+  overflow: auto;
+}
+
+li a {
+  display: block;
+  color: #000;
+  padding: 8px 0 8px 16px;
+  text-decoration: none;
+}
+
+li a.active {
+  background-color: #4caf50;
+  color: white;
+}
+
+li a:hover:not(.active) {
+  background-color: #555;
+  color: white;
+}
+
+.componentClass {
+  margin-left: 25%;
+  padding: 64px 16px;
+  height: 1000px;
+}
+/* The sidebar menu */
+.sidebar {
+  height: 100%; /* 100% Full-height */
+  width: 295px; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0;
+  left: 0;
+  top: 40px;
+  padding-left: 12px;
+  padding-right: 12px;
+  background: #f9f6f6 !important;
+  padding-left: 3px;
+  background-color: #111; /* Black*/
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+}
+
+/* The sidebar links */
+.sidebar a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+  color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidebar .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* The button used to open the sidebar */
+.openbtn {
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #111;
+  color: white;
+  margin-top: 35px;
+
+  padding: 10px 15px;
+  border: none;
+}
+
+.openbtn:hover {
+  background-color: #444;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left 0.5s; /* If you want a transition effect */
+  padding: 20px;
+  margin-left: 295px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidebar {
+    padding-top: 15px;
+  }
+  .sidebar a {
+    font-size: 18px;
+  }
+}
+.wrapper {
+  position: relative;
+  width: 250px;
+  height: 300px;
+  border: 1px dashed #ccc;
+  margin: 10px;
+}
+
+.line {
+  position: absolute;
+  left: 0%;
+  top: 0;
+  bottom: 0;
+  // width: 20px;
+  // width: 1px;
+  margin-left: 295px;
+  // background: #426e86;
+  z-index: 1;
+}
+
+.wordwrapper {
+  text-align: center;
+  height: 12px;
+  position: absolute;
+  left: 0;
+  // right: 0;
+
+  top: 50%;
+  margin-top: -12px;
+  z-index: 2;
+}
+
+.word {
+  color: #ccc;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 3px;
+  margin-left: 295px;
+  font: bold 12px arial, sans-serif;
+  // background: #fff;
+}
+.tabbable-panel {
+  border: 1px solid #eee;
+  padding: 10px;
+}
+
+.tabbable-line > .nav-tabs {
+  border: none;
+  margin: 0px;
+}
+.tabbable-line > .nav-tabs > li {
+  margin-right: 2px;
+}
+.tabbable-line > .nav-tabs > li > a {
+  border: 0;
+  margin-right: 0;
+  color: #737373;
+}
+.tabbable-line > .nav-tabs > li > a > i {
+  color: #a6a6a6;
+}
+.tabbable-line > .nav-tabs > li.open,
+.tabbable-line > .nav-tabs > li:hover {
+  border-bottom: 4px solid rgb(80, 144, 247);
+}
+.tabbable-line > .nav-tabs > li.open > a,
+.tabbable-line > .nav-tabs > li:hover > a {
+  border: 0;
+  background: none !important;
+  color: #333333;
+}
+.tabbable-line > .nav-tabs > li.open > a > i,
+.tabbable-line > .nav-tabs > li:hover > a > i {
+  color: #a6a6a6;
+}
+.tabbable-line > .nav-tabs > li.open .dropdown-menu,
+.tabbable-line > .nav-tabs > li:hover .dropdown-menu {
+  margin-top: 0px;
+}
+.tabbable-line > .nav-tabs > li.active {
+  border-bottom: 4px solid #32465b;
+  position: relative;
+}
+.tabbable-line > .nav-tabs > li.active > a {
+  border: 0;
+  color: #333333;
+}
+.tabbable-line > .nav-tabs > li.active > a > i {
+  color: #404040;
+}
+.tabbable-line > .tab-content {
+  margin-top: -3px;
+  background-color: #fff;
+  border: 0;
+  border-top: 1px solid #eee;
+  padding: 15px 0;
+}
+.portlet .tabbable-line > .tab-content {
+  padding-bottom: 0;
+}
+.switch-toggle {
+  float: left;
+  background: #242729;
+}
+.switch-toggle input {
+  position: absolute;
+  opacity: 0;
+}
+.switch-toggle input + label {
+  padding: 7px;
+  float: left;
+  color: #fff;
+  cursor: pointer;
+}
+.switch-toggle input:checked + label {
+  background: green;
+}
diff --git a/src/app/device-report/fuel-report/fuel-report.component.spec.ts b/src/app/device-report/fuel-report/fuel-report.component.spec.ts
new file mode 100644
index 0000000..29e1b13
--- /dev/null
+++ b/src/app/device-report/fuel-report/fuel-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelReportComponent } from './fuel-report.component';
+
+describe('FuelReportComponent', () => {
+  let component: FuelReportComponent;
+  let fixture: ComponentFixture<FuelReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/fuel-report/fuel-report.component.ts b/src/app/device-report/fuel-report/fuel-report.component.ts
new file mode 100644
index 0000000..1f53244
--- /dev/null
+++ b/src/app/device-report/fuel-report/fuel-report.component.ts
@@ -0,0 +1,302 @@
+import { Component, OnInit } from '@angular/core';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../contact.service';
+import * as moment from 'moment-timezone';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+declare var $:any;
+@Component({
+  selector: 'app-fuel-report',
+  templateUrl: './fuel-report.component.html',
+  styleUrls: ['./fuel-report.component.scss']
+})
+export class FuelReportComponent implements OnInit {
+ token_identifier: string;
+  dataSelect: any[];
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  options: any;
+   show:boolean=false
+  showLine:boolean=false;
+  ignition_data
+  from_date =new Date();
+  to_date = new Date();
+  showLoader: boolean;
+  event=true;
+bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+     this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: 'theme-dark-blue'});
+   this.token_identifier = localStorage.getItem('referrer_token=');
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+  
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+ 
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+     this.loadropdown()
+    this.getDevices()
+    this.testTable()
+
+  }
+  Load:boolean=false
+  tabelObj:any
+  finalArr=[]
+  testTable(){
+     const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            
+          ajax: (dataTablesParameters,callback) => {
+         
+         that.Load = true;
+          console.log("INNNNNS");
+           
+            if(that.deviceArr.length>0){
+            var data={
+      start_time:new Date(that.from_date).toISOString(),
+end_time: new Date(that.to_date).toISOString(),
+event: that.event==true?"IN":"OUT",
+imei: that.deviceArr[0]
+
+    }
+    that.contactService.post('/gps/getFuelNotifs',data).subscribe((res:any)=>{
+               that.Load= false;  
+              callback({ data: res });
+            }, err => {   
+              that.Load= false;    
+              callback({ data: [] });
+              console.log("error",err) ;     
+            });
+          }else{
+            that.Load= false; 
+              console.log("INNNNNS");   
+              callback({ data: [] });
+          }
+   
+           
+           
+        },  
+          "columns": [
+              {
+                  "data": "vehicleName",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+               {
+                  "data": "pour",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "litres",
+                  "render": function(data, type, row) {                   
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "timestamp",
+                  "render": function(data, type, row) {                   
+                   return data ? (moment(data).format('llll')) : "";                  
+                  }
+              },
+              {
+                  "data": "address",
+                  "render": function(data, type, row) {                   
+                   return data?data : '';                   
+                  }
+              },
+               
+
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3] },  
+          
+          ] 
+      });
+
+  });
+  }
+ 
+
+devicesss;
+finall
+ getDevices(){
+    
+     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+        data => {
+          this.devicesss = data
+          this.show=true
+          this.finall = (this.devicesss.devices);
+          this.options = [];
+        
+          for(let i=0;i<this.devicesss.devices.length;i++){
+  
+            // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+              let a ={
+                value : this.devicesss.devices[i].Device_Name,
+                viewValue:this.devicesss.devices[i].Device_Name,
+                did:this.devicesss.devices[i].Device_ID,
+                id:this.devicesss.devices[i]._id,
+                user:this.devicesss.devices[i].user,    
+              }
+               a['selectedValue'] = this.devicesss.devices[i].Device_ID ;
+            //  if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'distance_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report')){
+            //     a['selectedValue'] = this.devicesss.devices[i]._id ; 
+            //   }else if ((this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'over_speed')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'device_sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_report')|| (this.componentIdentifier === 'dayWiseReport')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master')){
+            //     a['selectedValue'] = this.devicesss.devices[i].Device_ID ; 
+            //   }
+              this.options.push(a);
+            // }
+          }
+          this.loadropdown()
+        })
+}
+
+openNav() {
+  if(this.showLine){
+    document.getElementById("mySidebar").style.width = "295px";
+    // document.getElementById("main").style.marginLeft = "295px";
+      document.getElementById("line").style.marginLeft = "295px";
+      document.getElementById("line1").style.marginLeft = "295px";
+      document.getElementById("line").style.background="none"
+      
+
+      this.showLine=false;
+  }else{
+    this.closeNav()
+  }
+
+
+}
+
+closeNav() {
+  document.getElementById("mySidebar").style.width = "0";
+  document.getElementById("main").style.marginLeft= "0";
+  document.getElementById("line").style.marginLeft= "0";
+  document.getElementById("line").style.background="#426E86"
+  document.getElementById("line").style.width="20px"
+  document.getElementById("line1").style.marginLeft= "0";
+
+    this.showLine=true
+}
+
+
+  
+changeDate(dateid) {
+
+  if (dateid == 'today') {
+    var td = new Date();
+    this.from_date = new Date(td.setHours(0, 0, 0));
+    this.to_date = new Date();
+    console.log('this.from_date', this.from_date);
+  }
+  if (dateid == 'yesterday') {
+    var yt = moment().subtract(1, 'days');
+    var ptt = new Date(yt).setHours(0, 0, 0);
+    var ttt = new Date(yt).setHours(23,59,59);
+    this.from_date = new Date(ptt);
+    this.to_date = new Date(ttt);
+    console.log('this.from_date', this.from_date);
+    console.log('this.to_date', this.to_date);
+  }
+  if (dateid == 'week') {
+    var wd = moment().startOf('week')
+    this.from_date = new Date(wd);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+  if (dateid == 'month') {
+    var md = moment().startOf('month').format();
+    this.from_date = new Date(md);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+}
+data_descip:any;
+getReport(event){
+  console.log(event);
+  
+  if(event == 'getExcel'){
+    // this.exportExcel();
+  }else{
+
+  }
+}
+
+ loadropdown() {
+    let that = this;
+   
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+  
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 210,
+          placeholder: 'Select Vehicles .....',
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+    
+       that.showLoader = false;
+      }, 100);
+      
+
+      
+   
+    
+  }
+  deviceArr=[]
+  reportFilter(){
+    this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(this.deviceArr,this.from_date,this.to_date);
+    var data={
+      start_time:new Date(this.from_date).toISOString(),
+end_time: new Date(this.to_date).toISOString(),
+event: this.event==true?"IN":"OUT",
+imei: this.deviceArr[0]
+
+    }
+     this.tabelObj.ajax.reload(); 
+    // this.contactService.post('/gps/getFuelNotifs',data).subscribe((res:any)=>{
+    //   console.log(res);
+    //   this.finalArr=res;
+    //   this.tabelObj.ajax.reload();  
+
+    // })
+  }
+  exportExel(){
+
+  }
+  exportPDF(){
+
+  }
+}
+// http://localhost:3000/gps/getFuelNotifs
+// {start_time: "2022-02-05T18:30:00.000Z", end_time: "2022-02-10T09:07:19.622Z", imei: "354018113208049",…}
+// end_time: "2022-02-10T09:07:19.622Z"
+// event: "IN"
+// imei: "354018113208049"
+// start_time: "2022-02-05T18:30:00.000Z"
\ No newline at end of file
diff --git a/src/app/device-report/geofancing-report/geofancing-report.component.html b/src/app/device-report/geofancing-report/geofancing-report.component.html
new file mode 100644
index 0000000..f22dba5
--- /dev/null
+++ b/src/app/device-report/geofancing-report/geofancing-report.component.html
@@ -0,0 +1,149 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Geofencing Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'In/Out' | translate}}</th>
+                      <th style="text-align: left;">{{'Datetime' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>
+                      <th style="text-align: left;">{{'GeoFence Name' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+      <app-all-menus></app-all-menus>
+
+
+  <div style="float:left; width: 100%; padding-top:6%;min-height: 100vh;">
+    <p class="headStyle">{{'Geofencing Report' | translate}}</p>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--{{'Select Geofencing' | translate}}--"  ngDefaultControl>
+            <md-option *ngFor="let option of geo_status" [value]="option">
+              {{ option.geoname }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="geofancing_Report(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table  class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align: center;">{{'In/Out' | translate}}</th>
+          <th style="text-align: center;">{{'Datetime' | translate}}</th>
+          <th style="text-align: center;">{{'Location' | translate}}</th>
+          <th style="text-align: center;">{{'GeoFence Name' | translate}}</th>
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let device of geofence">
+
+          <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>
+
+          <td style="cursor:pointer;text-align:center">{{device.direction}}</td>
+
+          <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>
+
+          <td style="cursor:pointer;text-align:center">
+            <p *ngIf="device.address != undefined">{{device.address}}</p>
+            <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+         
+          </td>
+
+          <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display:none">
+
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th style="text-align: center;">Vehicle Name</th>
+   <th style="text-align: center;">In/Out</th>
+   <th style="text-align: center;">Datetime</th>
+   <th style="text-align: center;">Location</th>
+   <th style="text-align: center;">GeoFence Name</th>
+ </tr>
+</thead>
+
+<tbody>
+
+ <tr *ngFor="let device of geofence">
+
+   <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>
+
+   <td style="cursor:pointer;text-align:center">{{device.direction}}</td>
+
+   <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>
+
+   <td style="cursor:pointer;text-align:center">
+     <p *ngIf="device.address != undefined">{{device.address}}</p>
+     <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+  
+   </td>
+
+   <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>
+
+ 
+ 
+
+ </tr>
+</tbody>
+</table>
+
+
+
+  </div>
+ -->
diff --git a/src/app/device-report/geofancing-report/geofancing-report.component.scss b/src/app/device-report/geofancing-report/geofancing-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/geofancing-report/geofancing-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/geofancing-report/geofancing-report.component.spec.ts b/src/app/device-report/geofancing-report/geofancing-report.component.spec.ts
new file mode 100644
index 0000000..006f1a9
--- /dev/null
+++ b/src/app/device-report/geofancing-report/geofancing-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofancingReportComponent } from './geofancing-report.component';
+
+describe('GeofancingReportComponent', () => {
+  let component: GeofancingReportComponent;
+  let fixture: ComponentFixture<GeofancingReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofancingReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofancingReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/geofancing-report/geofancing-report.component.ts b/src/app/device-report/geofancing-report/geofancing-report.component.ts
new file mode 100644
index 0000000..6c3ac32
--- /dev/null
+++ b/src/app/device-report/geofancing-report/geofancing-report.component.ts
@@ -0,0 +1,541 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+declare var google: any;
+import * as moment from 'moment';
+
+declare var google: any;
+declare var $:any;
+
+
+
+
+@Component({
+  selector: 'app-geofancing-report',
+  templateUrl: './geofancing-report.component.html',
+  styleUrls: ['./geofancing-report.component.scss']
+})
+export class GeofancingReportComponent implements OnInit {
+  date1:any;
+  finall:any;
+  identifier:any= 'geofence_report';
+  options= [];
+  logo:any;
+  Fromdate:any;
+  todate:any;
+  userName:any;
+  before:any;
+  deviceArr: any=[];
+
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+ 
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+
+text:any;
+option:any;
+geo_status=[];
+superAdmin:Boolean = false;
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       
+
+
+     this.testTable();
+  
+   
+  }
+
+  // openNav() {
+  //   /*  document.getElementById("myNav").style.width = "100%";
+  // */
+  //    this.router.navigateByUrl("location");
+  
+  // }
+
+
+  // mydealer(){
+  //   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  //   localStorage.removeItem('devices');
+  //   window.localStorage['DataUpdate'] = 'True';
+  //   if(window.localStorage['DataLoaded'] = 'True'){
+  //     window.localStorage['Custumer'] = 'OFF'
+  //     this.router.navigateByUrl("add")
+  //    // this.router.navigateByUrl("const?_status="+"OK");
+  //   }
+  // }
+
+  // myaccount(){
+   
+  //   let dialogRef = this.dialog.open(MyaccountComponent, {
+  //     width: '903px',
+  //     data: {}
+  //   });
+  
+  //   dialogRef.afterClosed().subscribe(result => {
+  
+  //     if(result == "succ"){
+  // //console.log("Updated")
+  //     }
+  
+  //   });
+  // }
+  // logout(){
+  //   window.localStorage.clear();
+  //   this.router.navigateByUrl("login");
+  // }
+  // devi(){
+  //   this.router.navigateByUrl("dashboard");
+  
+  // }
+  // soon(){
+  //   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  // }
+ 
+  // new(){
+  //   this.router.navigateByUrl("new");
+    
+  // }
+  // cond:Boolean = false;
+  // point : any = 0;
+  //  a(){
+  //    //console.log(this.point);
+  //    if(this.point == 0){
+  //     this.cond = true;
+  //     this.point ++;
+  //    }
+  //  else if(this.point % 2 == 0){
+  //   this.cond = true;
+  //   this.point ++;
+  //  }
+  //  else{
+  //    this.cond = false
+  //    this.point ++;
+  //  }
+  
+    
+  // }
+
+  // summaryReport(){
+  
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/summary-report");
+  // }
+  
+  
+  // overspeed(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/overspeed");
+  
+  // }
+
+  // driverPerformance(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/Driver-performance");
+  // }
+  
+  // route_map(){
+  //   this.router.navigateByUrl("routeMapping");
+
+  // }
+  // Ddetail(){
+  //   this.router.navigateByUrl("driverdetail");
+  // }
+  // DModel(){
+  //   this.router.navigateByUrl("deviceModel");
+  // }
+  // VType(){
+  //   this.router.navigateByUrl("VehicleType");
+  // }
+  
+  
+  // routeViolation(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/routeViolation");
+  
+  // }
+
+
+  // notification(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("notifications");
+  // }
+  
+  // stoppage_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/stoppage_report");
+  
+  // }
+  // group(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("group_view");
+  // }
+  // addcus(){
+  //   this.router.navigateByUrl("add");
+  // }
+  // report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report");
+  
+  // }
+  // report_speed(){
+  //   //console.log("report speed call")
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/device-speed-report");
+  // }
+
+  // ign(){
+  //   this.router.navigateByUrl("device-report/ign-report");
+  
+  // }
+
+  // ignition_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/ignition_report");
+
+
+  // }
+
+  // alert_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/alert_report");
+  // }
+
+
+  // trip_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/trip_report");
+  
+  // }
+
+  // ideal(){
+  //   this.router.navigateByUrl("device-report/ideal-report");
+  // }
+  // geo(){
+  //   this.router.navigateByUrl("geofencing");
+    
+  // }
+
+  // vehicleRoute(){
+  //   this.router.navigateByUrl("vehicleRoute");
+
+  // }
+
+  // dealerInfo(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("dealerInfo");
+  // }
+
+
+  // distance_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/distance_report");
+  // }
+
+  // geofancingReport(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/geofancing");
+  // }
+  
+ 
+  geofence=[];
+  show_time:any;
+  geofence_data=[];
+  address_show:any;
+ 
+  
+//   geofancing_Report(fd,td,devop){
+//     //console.log(devop);//console.log(fd);//console.log(td);//console.log(devop);
+//     let f_date = fd.toISOString();
+//     let t_date = td.toISOString();
+//     //console.log(f_date);//console.log(t_date);
+//     let uId = this.useridd;
+//     //console.log(uId);
+//     let geoId  = devop._id;
+// //console.log(geoId);
+//      var outerThis = this;
+//      this.Load = true; 
+//     this.contactService.geofenceData(f_date,t_date,uId,geoId)
+//         .subscribe(res=>{
+//           this.Load = false; 
+//     //console.log(res);
+//           this.geofence = res;
+//     console.log("this.geofence=>",this.geofence);   
+//         },err=>{
+//           this.Load = false; 
+//           console.log('Error While fetching data');
+//         })
+//   }
+tabelObj:any;
+testTable() {
+  const that = this;
+ 
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+      // dom: 'Bfrtip',
+      // buttons: [
+      //     'copy', 'csv', 'excel', 'pdf', 'print'
+      // ]  ,
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load= true;    
+              // dataTablesParameters.find._u = that.useridd;
+            
+              // dataTablesParameters.find._u = user;
+
+              // if(that.deviceArr.length != 0){
+         
+                // dataTablesParameters.find.vname = deviceId;
+              // }
+            // if (that.Fromdate) {
+                // var fdate = new Date(that.Fromdate).toISOString()      
+                // dataTablesParameters.find.f_date = fdate    
+                // dataTablesParameters.find.f_date =  from_date;    
+            // };
+
+            // if (that.todate) {
+              // var fdate = new Date(that.todate).toISOString()      
+              // dataTablesParameters.find.t_date = fdate     
+                // dataTablesParameters.find.t_date = to_date  ;
+          // };
+          // this.deviceArr = deviceId; 
+
+          var tempfd = new Date().setHours(0,0,0,0);
+          var tf = new Date(tempfd);
+          var temptd = new Date();
+         
+            var from_date = that.Fromdate?that.Fromdate:tf.toISOString();
+            var to_date = that.todate?that.todate:temptd.toISOString();
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            suburl += "/notifs/GeoFencingReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+           
+            console.log(this.deviceArr);
+            if(that.deviceArr.length != 0){  
+              suburl +='&geoid='+that.deviceArr[0];
+            }else{
+            
+              let resp =[];
+              callback({data : resp });
+            }
+            that.contactService.get(suburl).subscribe(resp => {   
+                // console.log(ignReport.length);   
+                that.Load= false;    
+                console.log('respresp=>',resp);      
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+        },  
+      
+          "columns": [
+              {
+                  "data": "vehicleName",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "direction",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "timestamp",
+                  render: function(data, type, row) {
+                    var cDate = new Date(data);
+                    return data ? (moment(cDate).format('llll')) : "";         
+                  }
+              },   
+            {
+              "data": "address",
+              "defaultContent": "_id",
+              render: function(data, type, row) { 
+                  let lat = row.lat;
+                  let long = row.long;           
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';          
+                  return data?data : addressLink;     
+       
+              }
+          }  ,
+          {
+            "data": "geoid",
+            render: function(data, type, row) { 
+              
+                return data?data.geoname : '';     
+     
+            }
+        }                         
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          },
+          { "width": "20%", "targets": 0 },
+          { "width": "10%", "targets": 1 },
+          { "width": "20%", "targets": 2 },
+          { "width": "30%", "targets": 3 },  
+          { "width": "20%", "targets": 4 },      
+         
+          ] 
+      });
+
+  });
+
+}
+  
+  addressLink = "";
+getlink(report){
+  console.log("inside function");
+  console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+
+  tab:any;
+
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  getReport(event){
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+    
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+     
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+    
+     
+      console.log(this.tabelObj);
+      this.tabelObj.ajax.reload();      
+        
+    
+    
+    }
+   
+  }
+  
+
+
+}
+
diff --git a/src/app/device-report/ideal-report/ideal-report.component.html b/src/app/device-report/ideal-report/ideal-report.component.html
new file mode 100644
index 0000000..e4bdcb3
--- /dev/null
+++ b/src/app/device-report/ideal-report/ideal-report.component.html
@@ -0,0 +1,49 @@
+<app-all-menus></app-all-menus>
+<div style="float:left; width: 99%; padding-top: 6%;padding-left: 3%;">
+<div class="loading" *ngIf="Load">Loading&#8230;</div>
+<div id="c44"  style="padding-top:1%;padding-bottom:2%">   
+  <md-select style="overflow-y: hidden;
+  overflow-x: hidden;" [name]="'typdev'" placeholder="Select Your Device" style="padding-left:5%;" [(ngModel)]="neww">
+  <md-option *ngFor="let option of options" [value]="option">
+    {{ option.viewValue }}
+  </md-option>
+    </md-select>  
+  </div>
+<div id="c11"  style="padding-top:1%;padding-bottom:2%">
+  
+Select date : <!--  <angular2-date-picker [(ngModel)]="date1" [settings]="settings"></angular2-date-picker>  -->
+<owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+  
+</div>
+<div id="c11"  style="padding-top:1%;padding-bottom:2%">
+    <button  (click)="creategraph(neww)" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button></div><br>   
+    
+   
+
+
+<br>
+ <br>
+ <div style="  width:100%;
+ height:66.67vh;">
+  
+
+
+  <div style="display: block;">
+    <canvas baseChart  height=" 425px"
+    width= "874px"
+     
+              [datasets]="barChartData"
+              [labels]="barChartLabels"
+              [options]="barChartOptions"
+              [legend]="barChartLegend"
+              [chartType]="barChartType"
+              (chartHover)="chartHovered($event)"
+              (chartClick)="chartClicked($event)"></canvas>
+    </div>
+
+  </div>
+
+</div>
+
+       
\ No newline at end of file
diff --git a/src/app/device-report/ideal-report/ideal-report.component.scss b/src/app/device-report/ideal-report/ideal-report.component.scss
new file mode 100644
index 0000000..2067b31
--- /dev/null
+++ b/src/app/device-report/ideal-report/ideal-report.component.scss
@@ -0,0 +1,1003 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#d:hover { 
+  color: rgb(14, 102, 18);
+
+  
+}
+#ac{
+  color: rgb(38, 38, 90)
+}
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/device-report/ideal-report/ideal-report.component.spec.ts b/src/app/device-report/ideal-report/ideal-report.component.spec.ts
new file mode 100644
index 0000000..b1db0c1
--- /dev/null
+++ b/src/app/device-report/ideal-report/ideal-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdealReportComponent } from './ideal-report.component';
+
+describe('IdealReportComponent', () => {
+  let component: IdealReportComponent;
+  let fixture: ComponentFixture<IdealReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IdealReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdealReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/ideal-report/ideal-report.component.ts b/src/app/device-report/ideal-report/ideal-report.component.ts
new file mode 100644
index 0000000..5ae6b3e
--- /dev/null
+++ b/src/app/device-report/ideal-report/ideal-report.component.ts
@@ -0,0 +1,366 @@
+import { Component, OnInit } from '@angular/core';
+import {ContactService} from '../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-ideal-report',
+  templateUrl: './ideal-report.component.html',
+  styleUrls: ['./ideal-report.component.scss'],
+  providers: [ContactService]
+})
+export class IdealReportComponent implements OnInit {
+  public barChartOptions:any = {
+    scaleShowVerticalLines: false,
+    responsive: true,
+    
+  };
+  myaccount(){
+
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+  Load:boolean = false;
+  device_data:any;
+  data:any;
+  neww:any;
+  before:any;
+  date1: Date = new Date();
+
+  creategraph(neww){
+    // console.log(neww);
+
+
+/* let rr = new Date(this.date1).setHours(0,0,0,0) */
+let rr = new Date().setHours(0,0,0,0) -1 ;
+let r = new Date(rr).toISOString();
+// console.log(r);
+this.Load = true;
+/* https://www.adnateiot.com/gps/getGpsIdlingReport?imei=865205032256181&to=2018-01-31T18:30:00.000Z */
+this.contactService.getIdealData(neww.did,r).subscribe(
+      
+  data => {
+    this.Load = false;
+    this.device_data = data 
+  //  console.log(this.device_data); 
+   this.barChartLabels.length = this.device_data.length;  
+   this.getdata(this.device_data)
+   //this.lineChartLabels.length = this.device_data.length;  
+  // this.getdata(this.device_data)
+/*
+0
+:
+{Total_idle_time: 21.778455, Date: "2018-01-24T09:43:58.180Z"}
+1
+:
+{Total_idle_time: 20.732545833333333, Date: "2018-01-25T09:43:58.180Z"}
+2
+:
+ */
+  });
+  }
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+  getdata(final){
+    let fi = [];
+    let time = [];
+    var day =0; 
+    var month = 0; 
+     var year = 0;
+      var final_date =null;
+    this.barChartLabels.length = 0;
+   /*  for(let q = final.length; q >0 ;q -- ) */
+   for(let q = 0; q <final.length ;q ++ )
+    {
+      fi.push(final[q].Total_idle_time.toFixed(2));
+    /*   let t = new Date(final[q].Date).toLocaleTimeString();
+      console.log(t); */
+      //var g = new Date(final[q].Date);
+          
+     // day = g.getDate()+1; 
+      // month = g.getMonth()+1; 
+       // year = g.getFullYear();
+      
+        // final_date = day+"/"+month+"/"+year
+         final_date=moment(final[q].Date).add(1,'ms').format('DD/MM/YYYY');
+
+      //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+      this.barChartLabels.push(final_date)
+    }
+   this.Load = false;
+    this.barChartData = [{
+      label: "Idle (Hours)",
+      data: fi
+    }];
+    
+  // console.log(this.barChartData)
+  
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+  logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+  
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  geofancingReport(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  overspeed(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+  
+  }
+  
+  stoppage_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+  
+  }
+
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  
+  
+
+  distance_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+  routeViolation(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+  
+  }
+
+  driverPerformance(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+summaryReport(){
+ 
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+  new(){
+    this.router.navigateByUrl("new");
+    
+  }
+
+  vehicleRoute(){
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+cond:any;
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+ideal(){
+  this.router.navigateByUrl("device-report/ideal-report");
+}
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+  public barChartLabels = [];
+  public barChartType:string = 'bar';
+  public barChartLegend:boolean = true;
+ 
+  public barChartData = [
+    {data: [0, 0, 0, 0, 0, 0, 0], label: 'Idle'}
+   ];
+ 
+  // events
+  public chartClicked(e:any):void {
+    // console.log(e);
+  }
+ 
+  public chartHovered(e:any):void {
+    // console.log(e);
+  }
+ 
+  public randomize():void {
+    // Only Change 3 values
+    let data = [
+      Math.round(Math.random() * 100),
+      59,
+      80,
+      (Math.random() * 100),
+      56,
+      (Math.random() * 100),
+      40];
+    let clone = JSON.parse(JSON.stringify(this.barChartData));
+    clone[0].data = data;
+    this.barChartData = clone;
+
+  }
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+fs:any;
+ls:any;
+emailid:any;
+or:any;
+useridd:any;
+custtype:any;
+cust:boolean = false;
+time :any;
+devicesss:any;
+finall:any;
+options = [];
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+superAdmin:Boolean = false;
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+  
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];
+    this.time = new Date();
+    
+     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+       /*      let a ={
+              dname : this.devicess.devices[i].Device_Name,
+              did:this.devicess.devices[i].Device_ID,
+              id:this.devicess.devices[i]._id,
+              user:this.devicess.devices[i].user
+            }
+            this.options.push(a); */
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          // }
+
+        }
+
+     
+
+      });
+
+  }
+
+}
diff --git a/src/app/device-report/idle-report/idle-report.component.html b/src/app/device-report/idle-report/idle-report.component.html
new file mode 100644
index 0000000..19beb31
--- /dev/null
+++ b/src/app/device-report/idle-report/idle-report.component.html
@@ -0,0 +1,94 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'IDLE REPORT' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Start Time' | translate}}</th>
+                      <th style="text-align: left;">{{'End Time' | translate}}</th>
+                      <th style="text-align: left;">{{'Duration (HH:MM)' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>    
+                      <th style="text-align: left;">{{'AC Status' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+  <div class="headerStyle">
+    <span>{{'IDLE REPORT' | translate}}</span>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  </div>
+  <div class="filterDiv">
+    <div class="row" style="width: 100%; padding-bottom: 25px; background: #efefef;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">
+        <div style="display: inline-flex; width: 80%;padding-bottom: 3px;">
+          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
+          <div style="width: inherit; margin-top: 9px;text-align: left">
+            <select id="select" multiple="multiple" style="text-align: left">
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+          </div>
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
+            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+            <label style="width: inherit;margin-top: 11px">{{'Min Idle Time (Min)' | translate}}</label>
+            <input id="minIdleTime" class="form-control form-control-sm" style="margin-top: 4px;width: 80px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+        </div>
+        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;"
+          (click)="callfunction()"> {{'SEARCH' | translate}} </button>
+
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+        <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+            <thead style="background-color:#A2C523;color: white;">
+                <tr>
+                    <th style="text-align:center;">{{'Device Name' | translate}}</th>
+                    <th style="text-align:center;">{{'Start Time' | translate}}</th>
+                    <th style="text-align:center;">{{'End Time' | translate}}</th>
+                    <th style="text-align:center;">{{'Duration (HH:MM:SS)' | translate}}</th>
+                    <th style="text-align:center;">{{'Location' | translate}}</th>    
+                    <th style="text-align:center;">{{'AC Status' | translate}}</th>
+                </tr>
+            </thead>  
+        </table>
+    </div>
+  </div>
+</div> -->
\ No newline at end of file
diff --git a/src/app/device-report/idle-report/idle-report.component.scss b/src/app/device-report/idle-report/idle-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/idle-report/idle-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/idle-report/idle-report.component.spec.ts b/src/app/device-report/idle-report/idle-report.component.spec.ts
new file mode 100644
index 0000000..823561e
--- /dev/null
+++ b/src/app/device-report/idle-report/idle-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdleReportComponent } from './idle-report.component';
+
+describe('IdleReportComponent', () => {
+  let component: IdleReportComponent;
+  let fixture: ComponentFixture<IdleReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IdleReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdleReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/idle-report/idle-report.component.ts b/src/app/device-report/idle-report/idle-report.component.ts
new file mode 100644
index 0000000..b72eac0
--- /dev/null
+++ b/src/app/device-report/idle-report/idle-report.component.ts
@@ -0,0 +1,456 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-idle-report',
+  templateUrl: './idle-report.component.html',
+  styleUrls: ['./idle-report.component.scss']
+})
+export class IdleReportComponent implements OnInit {
+  options: any=[];
+  devicesss: any;
+  superAdmin: any;
+  supAdmin: any;
+  fs: any;
+  minIdleTime:any= 5;
+  identifier:any='idle_report';
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  mb: any;
+  custtype: any;
+  Dealer: any;
+  finall: any;
+  from_date=new Date();
+  to_date=new Date();
+  colorTheme = 'theme-dark-blue';
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService: ContactService,  public dialog: MdDialog, public snackBar: MdSnackBar) { 
+    // this.bsConfig = Object.assign({ dateInputFormat: 'MMMM Do YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    // this.from_date.setHours(0,0,0,0); 
+  $('#select').hide();
+    console.log("loginDetails=>",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.supAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.Dealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer;
+
+  }
+
+  ngOnInit() {
+    // this.getDevices();
+    this.testTable();
+  }
+
+  // getDevices(){
+    
+  //   this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+  //     data => {
+  //       this.devicesss = data
+     
+  //       this.finall = (this.devicesss.devices);
+
+  //       for(let i=0;i<this.devicesss.devices.length;i++){
+
+  //         if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+  //           let a ={
+  //             value : this.devicesss.devices[i].Device_Name,
+  //             viewValue:this.devicesss.devices[i].Device_Name,
+  //             did:this.devicesss.devices[i].Device_ID,
+  //             id:this.devicesss.devices[i]._id,
+  //             user:this.devicesss.devices[i].user,
+  //             email: this.devicesss.devices[i].Email_ID,
+  //             deviceType: this.devicesss.devices[i].type_of_device
+  //           }
+  //           this.options.push(a);
+  //         }
+
+  //       }
+  //          console.log(this.options);
+  //          let that = this;
+  //          setTimeout(()=>{
+  //            that.loadropdown();
+  //          },100)  
+
+  //     });
+  
+  //   }
+
+
+    // loadropdown() {
+    //   let that = this;
+    //   var script = document.createElement("script");
+    //   script.setAttribute("type", "text/javascript");
+    //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    //   document.getElementsByTagName("head")[0].appendChild(script);
+    //   setTimeout(() => {
+  
+    //     $('#select').multipleSelect({
+    //       width: 200,
+    //       placeholder: 'Select device.....',
+    //       filter: true,
+      
+    //     })
+    //    // $('#select').show();
+    //   }, 100);
+  
+  
+    // }
+
+    tabelObj: any;
+    Load : boolean=false;
+    vCount = 0;
+    deviceArr:any=[];
+    callfunction(): void {
+      // this.Load = true;
+      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+      this.tabelObj.draw();
+    }
+    dtOptions:any={};
+    repCount = 0 ;
+    testTable() {
+      const that = this;
+      console.log("inside function");
+      // this.Load = true;
+      $(document).ready(function() {
+          that.tabelObj = $('#deviceTable').DataTable({
+            dom: 'lBftip',
+            buttons: [
+              'copy',
+              'print',
+              'excel'
+            ],       
+              "processing": true,
+              "searching": false,
+              pagingType: 'full_numbers',
+              pageLength: 25,
+              serverSide: true,
+              "scrollY":'65vh',
+              "scrollCollapse": true,     
+              lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+              ajax: (dataTablesParameters: any, callback) => {
+               
+                  dataTablesParameters.op = {};
+                  dataTablesParameters.select = [];
+                  dataTablesParameters.find = {};   
+                  dataTablesParameters.columns = [
+                    // {data: "_id" },
+                    {data: '_id'},
+                    {data: 'device'},
+                    {data: 'device.Device_Name'},
+                    {data : 'start_time'},
+                    {data : 'end_time'},
+                    {data : 'lat'},           
+                    {data: 'long'},
+                    {data :'ac_status'},       
+                    {data :'idle_time'},             
+                    {data : 'address'},
+                    {data: null, defaultContent: ''}
+                  ]  
+
+              
+                 
+                 if(that.repCount != 0){
+              
+                  console.log(that.repCount);
+                  // dataTablesParameters.find.user = that.useridd;
+                  if(that.deviceArr.length != 0){
+                    console.log('that.deviceArr',that.deviceArr);
+                    var dev_in = {'$in': that.deviceArr};
+                       dataTablesParameters.find.device = dev_in;
+                       if (that.from_date) {
+                        var fdate = new Date(that.from_date).toISOString()  
+                       
+                        dataTablesParameters.find.start_time = {$gte: fdate}        
+                    };
+                    if (that.to_date) {
+                      var tdate = new Date(that.to_date).toISOString()        
+                      dataTablesParameters.find.end_time = {$lte: tdate}        
+                  };
+
+                  // that.minIdleTime =
+                  that.Load = true; 
+                  dataTablesParameters.find.idle_time   = {$gte : that.minIdleTime * 60000};
+                  var suburl = "";
+                  suburl += "/stoppage/idleReportdatatable";
+                  that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                   
+                      console.log("Response from datatable=>",resp);     
+                      that.Load= false;         
+                      callback(resp);
+                  }, err => {  
+                
+                    that.Load= false;    
+                    let message1="Server Error, Please try again ";
+                    let action:any;
+                    that.snackBar.open(message1, action, {
+                      duration: 5000,
+                      
+                    });  
+                    console.log("error",err) ;     
+                  });
+                  }else{
+                    that.Load= false;    
+                    let message1="Please Select Device";
+                    let action:any;
+                    that.snackBar.open(message1, action, {
+                      duration: 5000,
+                      
+                    });  
+                    return;
+                  }
+                 }else{
+                  that.repCount =  that.repCount + 1 ; 
+                  that.Load= false;    
+                 }
+                                            
+           
+              },  
+              "columns": [
+                  {
+                      "data": "device",
+                      "visible" :true,
+                      "render": function(data, type, row) {
+                      
+                       return data.Device_Name?data.Device_Name:"";
+                          
+                      }
+                  },
+                  {
+                      "data": "start_time",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                        var Start_time ;
+                        if(data !=null){
+                          var ft= new Date(data);
+                         Start_time = moment(ft).format('llll');
+
+                          
+                        }else{
+                          Start_time = 'NA';
+
+                        }
+                        
+                        // return data ? (moment(created_time).format('llll')) : "";
+                          return Start_time;
+                        
+                    
+                      }
+                  },
+                  {
+                      "data": "end_time",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                        var end_time ;
+                        if(data !=null){
+                          var ft= new Date(data);
+                         end_time = moment(ft).format('llll');
+
+                          
+                        }else{
+                          end_time = 'NA';
+
+                        }
+                        
+                    
+                          return end_time;
+                      }
+                  }, 
+                  {
+                    "data": "idle_time",
+                    "visible" : true,
+                    render: function(data, type, row) {  
+                      var duration;
+                      // if((row.start_time == undefined)||(row.end_time == undefined)){
+                      //   duration = 'NA'
+                      // }else{
+
+                      //   var stime = new Date(row.start_time);
+                      //   var etime = new Date(row.end_time);
+                      //   var tdiff = etime.getTime() - stime.getTime()
+                      
+
+                      // }
+                      if((data != null)||(data!=undefined)){
+                        duration = that.millisecondConversion(data);
+                      }else{
+                        duration = "0:0";
+                      }
+                    
+                      // that.millisecondConversion(2000);
+                        return duration;
+                    }
+                },    
+         
+                  {
+                    "data": "long",
+                    "visible" :true,
+                    render: function(data, type, row) {
+                    
+                      var lattitude;
+                      var longitude;
+                      if((row.lat == undefined)||(row.long == undefined)||(row.lat == null)||(row.long == null)){
+                          lattitude = 0;
+                          longitude = 0;
+                          var addressLink = 'NA';
+                      }else{
+                        lattitude = row.lat;
+                        longitude = row.long;
+                        var alink =  "https://maps.google.com/?q=" + lattitude + "," + longitude+" "
+                        var addressLink =  '<a  href=' + alink  + 'target="_blank" ><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>'
+                      }
+                        var tempAdd = row.address;
+                        if(tempAdd != undefined){
+                              return tempAdd;
+                        }else{
+                          return addressLink;
+                        }
+                      
+                    }
+                },         
+                { 
+                  "data": "ac_status",
+                  "visible" :true,
+                  render: function(data, type, row) {
+               
+                  var aStatus;
+                  if(data == null){
+                    aStatus = 'NA';
+                  }
+                  if(data == '0'){
+                    aStatus = 'OFF';
+
+                  }
+                  if(data == '1'){
+                    aStatus = 'ON';
+
+                  }       
+                  return aStatus;
+                  }
+              },                    
+              ], 
+              "columnDefs": [
+                { className: "dt-body-left", "targets": [ 0,1,2,3,4,5 ] },
+                {
+                  "targets": '_all',
+                  "createdCell": function (td, cellData, rowData, row, col) {
+                      $(td).css('padding', '18px')
+                  }
+              } ,
+              { "width": "20%", "targets": 0 },
+            
+            
+              { "width": "20%", "targets": 3 },  
+             
+             
+              ]   
+          });
+    
+      });
+    
+    }
+    tab:any;
+    exportExcel()
+    {
+        var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+        var textRange; var j=0;
+        var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    
+        for(j = 0 ; j < this.tab.rows.length ; j++) 
+        {     
+            tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+            // console.log('tab_text',JSON.parse(tab_text));
+            //tab_text=tab_text+"</tr>";
+        }
+    
+        tab_text=tab_text+"</table>";
+        // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+        tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+        tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+    
+        var ua = window.navigator.userAgent;
+        var msie = ua.indexOf("MSIE "); 
+    
+        var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+    
+        return (sa);
+    }
+
+    millisecondConversion(duration){
+    
+        // var seconds = Math.floor((duration / 1000) % 60);
+        // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+        // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    
+        // hours = (hours < 10) ? 0 + hours : hours;
+        // minutes = (minutes < 10) ? 0 + minutes : minutes;
+        // seconds = (seconds < 10) ? 0 + seconds : seconds;
+      
+        // return hours + ":" + minutes + ":" + seconds;
+
+        var x = duration;
+        var d = moment.duration(x, 'milliseconds');
+        var hours = Math.floor(d.asHours());
+        var mins = Math.floor(d.asMinutes()) - hours * 60;
+        var mainMIn = (hours>=24)?0:mins;
+        return  hours + ":" + mainMIn;
+
+      
+    }
+
+    getReport(event){
+      console.log(event);
+      if(event == 'getExcel'){
+        this.exportExcel();
+      }else{
+        var deviceId: any;
+        var tpdata = event ; 
+        var that = this;
+        var fd = new Date(tpdata.fromDate);
+        var td  = new Date(tpdata.toDate);
+        that.minIdleTime = event.minidleT; 
+        
+        if(event.deviceArr.length==0){
+          deviceId=[];
+        }else{
+          deviceId= event.deviceArr;
+        }
+        this.deviceArr = deviceId; 
+        console.log('this.deviceArr',this.deviceArr);
+      
+        this.from_date = fd;
+        this.to_date = td;
+        console.log("b4");
+        // this.tabelObj.clear();
+        // var aa = [];
+        // this.tabelObj.rows.add(aa); 
+     
+          this.Load = true;
+        console.log(this.tabelObj);
+        this.tabelObj.draw();    
+          
+      
+      
+      }
+     
+    }
+    
+
+}
diff --git a/src/app/device-report/ign-report/ign-report.component.html b/src/app/device-report/ign-report/ign-report.component.html
new file mode 100644
index 0000000..e6079e9
--- /dev/null
+++ b/src/app/device-report/ign-report/ign-report.component.html
@@ -0,0 +1,293 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+  </head>
+  <body>
+
+      <div class="upper">
+          <md-toolbar>My App</md-toolbar>
+        <md-toolbar flex style="background-color:white;width: 100%;" >
+          
+                <img src={{this.logo}}
+                style=
+                "width:12%;padding-top:20px">
+                <ul style="
+                padding: 30px 0% 0px 16%;
+                box-sizing: border-box;
+                flex-direction: row;
+                display: flex;
+                height: 65px;width:auto"  fxLayout="row" >
+                  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                    <a  class="pointer" (click)="soon()"><span id="d"><md-icon style="display: block;
+                      position: absolute;
+                      margin-left: 18px;">dashboard</md-icon>DASHBOARD</span></a>
+                  </li>
+                  <li style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                    <a class="pointer" (click)="group()">
+                        <span id="d">
+                          <md-icon style="display: block;position: absolute;margin-left: 10px;" id="active">group</md-icon>GROUPS</span>
+                      </a>
+                    </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="devi()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 8px;">devices</md-icon>VEHICLES</span></a> 
+                  </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="openNav()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 13px;">my_location</md-icon>TRACKERS</span></a>
+                  </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="geo()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 22px;">blur_circular</md-icon>GEO FENCING</span></a>
+                  </li>
+  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a  class="pointer" [mdMenuTriggerFor]="appMenu3"  ><span id="ac"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 13px;">report</md-icon><span id="active">REPORTS</span></span></a>
+                  </li>
+                  <md-menu class="test" #appMenu3="mdMenu" [y-position]="before">
+                
+                    <a class="pointer" (click)="report()" >&nbsp;&nbsp;<span id="ac"><span id="active">Daily Report</span></span></a>
+                    <a class="pointer" (click)="report_speed()" >&nbsp;&nbsp;<span id="d">Speed Variation</span></a>
+                    <!-- <a class="pointer" (click)="ideal()" >&nbsp;&nbsp;<span id="d">Idle</span></a> -->
+                    <!-- <a class="pointer" (click)="ign()" >&nbsp;&nbsp;<span id="d">Ignition</span></a> -->
+                    <a class="pointer" (click)="trip_report()" >&nbsp;&nbsp;<span id="d">Trip Report</span></a> 
+                    <a class="pointer" (click)="summaryReport()" >&nbsp;&nbsp;<span id="d">Summary Report</span></a>
+                    <a class="pointer" (click)="geofancingReport()" >&nbsp;&nbsp;<span id="d">Geofencing Report</span></a>
+                    <a class="pointer" (click)="overspeed()" >&nbsp;&nbsp;<span id="d">Overspeeding Report</span></a>
+                    <a class="pointer" (click)="routeViolation()" >&nbsp;&nbsp;<span id="d">Route Violation Report</span></a>
+                    <a class="pointer" (click)="stoppage_report()" >&nbsp;&nbsp;<span id="d">Stoppage Report</span></a> 
+                    <a class="pointer" (click)="ignition_report()" >&nbsp;&nbsp;<span id="d">Ignition Report</span></a> 
+                    <a class="pointer" (click)="distance_report()" >&nbsp;&nbsp;<span id="d">Distance Report</span></a>
+ 
+                    <a class="pointer" (click)="alert_report()" >&nbsp;&nbsp;<span id="d">Alert Report</span></a>  
+ 
+                    </md-menu>
+  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" *ngIf="cust" (click)="addcus()" ><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 14px;">person_add</md-icon>CUSTOMERS</a>
+                  </li>
+  
+                             </ul>
+                
+                           <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
+                            <!--    <li  style="float:right;" >
+                                   <div class="dropdown">
+                                         <img src="../../assets/image/us.jpg" height=30px>
+                                         <div class="dropdown-content">
+                                             <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
+                                             <h6><p id="insert4"></p></h6>
+                                             &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
+                                              &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
+                                              
+                                                 
+                                            </div>
+                                       </div>
+                              
+                               </li> -->
+                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>            &nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                   <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                        </md-menu>
+                                
+                                <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                 <!--   <md-icon>more_vert</md-icon> -->
+                                   <img src="../../assets/image/us.jpg" height=24px>
+                                </button>
+                              <!--   <button md-icon-button [mdMenuTriggerFor]="appMenu2"  style="float:right;outline:none"> -->
+                                  <!--   <md-icon>more_vert</md-icon> -->
+                                <!--   <md-icon md-tooltip="Notification" style="float: right;padding-top:3%;color:#006699">notifications</md-icon>
+                                 </button>
+                                 <md-menu #appMenu2="mdMenu" class="my-full-width-menu"[overlapTrigger]="false">
+                                   <md-menu-header>&nbsp;&nbsp;<b>Notification</b><br></md-menu-header>
+                                  <div style="width:280px;height:61px">
+
+                                    <br>
+                                  </div>
+                                  
+                                  </md-menu> -->
+                         </ul>
+                               
+                        
+                     
+                             <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                             <!--     <li style="width:27%;float:right">
+                                   <div class="dropdown">
+                                         <img src="../../assets/image/us.jpg" height=30px>
+                                         <div class="dropdown-content">
+                                             <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
+                                             <h6><p id="insert2"></p></h6>
+                                             &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                                <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                                 
+                                            </div>
+                                       </div>
+                                 </li>
+                                 -->
+                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                  <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                  <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                  <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                  &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>&nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                     <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                 </md-menu>
+                                 
+                                 <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                  <!--   <md-icon>more_vert</md-icon> -->
+                                    <img src="../../assets/image/us.jpg" height=24px>
+                                 </button>
+                                 <app-notification></app-notification>
+
+                           </ul>
+                                 
+              
+             </md-toolbar>
+        </div>
+
+
+<!--
+<div class="container">
+  <div *ngFor = "let device of devices">
+    <div class="col-md-3">
+      {{device.Device_ID}}
+    </div>
+    <div class="col-md-3">
+        {{device.Serial_Num}}
+      </div>
+      
+    <div class="col-md-3">
+        {{device.Des}}
+      </div>
+
+      <div class="col-md-3">
+          {{device.Loca}}
+        </div>
+  </div>
+</div>-->
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+      <!--   <a href="http://localhost:4200/account">
+          <h6>PRODUCT LAUNCHER</h6></a> -->
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+         
+     <!--     <a href="http://localhost:4200/dashboard"><h6>DEVICES <md-icon style="float:right">devices</md-icon></h6></a> -->
+  </md-menu> 
+</div> 
+<!-- <div id="myNav" class="overlay">
+  <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
+  <div class="overlay-content">
+    
+          <h5 align="center">Current Location</h5>
+        <agm-map  [latitude]="18.602941" [longitude]="73.777147" [zoom]="10">
+     
+        <agm-marker [latitude]="18.602941" [longitude]="73.777147"></agm-marker>
+        </agm-map>
+        
+      
+
+    
+  </div>
+</div> -->
+
+
+    <div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
+    overflow-x: hidden;">
+    
+   <!--  <div  id="mySidenav" class="sidenav">
+        <a href="#" id="about"></a>
+        <a id="blog">
+    
+            <table class="table table-striped " style="overflow-y: hidden;
+               overflow-x: hidden;border: none;">
+               <thead>
+              
+                  <th  style="font-size: 12px" >Devices :</th>
+        
+               </thead>
+                <tbody>
+            
+             <tr *ngFor="let device of final ">
+                <td  style="cursor:pointer;font-size: 10px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device)">{{ device.Device_Name }}</td>
+              </tbody> 
+            </table> 
+        </a>
+      </div> -->
+          </div>
+
+<div style="float:left; width: 99%; height:86vh;padding-left: 3%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div id="c44"  style="padding-top:1%;padding-bottom:2%">
+        
+ 
+      <md-select style="overflow-y: hidden;
+      overflow-x: hidden;" [name]="'typdev'" placeholder="Select Your Device" style="padding-left:5%;" [(ngModel)]="neww">
+      <md-option *ngFor="let option of options" [value]="option">
+        {{ option.viewValue }}
+      </md-option>
+        </md-select>  
+
+      </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+      
+    Select date : <!--  <angular2-date-picker [(ngModel)]="date1" [settings]="settings"></angular2-date-picker>  -->
+    <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+      
+    </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+        <button  (click)="creategraph(neww)" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button></div><br>   
+        
+       
+    
+    
+    <br>
+     <br>
+     <div style="  width:100%;
+     height:66.67vh;">
+
+
+     <div style="display: block;">
+        <canvas baseChart  height=" 425px"
+        width= "874px"
+         
+                    [datasets]="lineChartData"
+                    [labels]="lineChartLabels"
+                    [options]="lineChartOptions"
+                    [colors]="lineChartColors"
+                    [legend]="lineChartLegend"
+                    [chartType]="lineChartType"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+      
+    </div> 
+  </div><br>
+</div>
+
+
+  </body>
+</html>
diff --git a/src/app/device-report/ign-report/ign-report.component.scss b/src/app/device-report/ign-report/ign-report.component.scss
new file mode 100644
index 0000000..a88edc7
--- /dev/null
+++ b/src/app/device-report/ign-report/ign-report.component.scss
@@ -0,0 +1,1162 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#ac{
+  color: rgb(38, 38, 90)
+}
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: .4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262F;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555
+}
+
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .example-full-width {
+    width: 30%;
+  }
+  #c11 {
+    width: 25%; 
+    float:left
+}
+#c22{
+    width: 25%; 
+    float:left
+}
+#c33 {
+    width: 25%; 
+    float:left
+    
+}
+#c44{
+    width: 25%; 
+    float:left
+}
+.example-full-width[_ngcontent-c4] {
+    width: 86% !important;
+}
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+ /*  .example-full-width[_ngcontent-c9] {
+    width: 79% !important;
+  } */
+  .left-sidebar, .right-sidebar {
+    width: 330px;
+    max-width: 330px;
+    min-width: 330px;
+}
+.outer-wrapper {
+    padding: 30px;
+}
+.center-content{
+    background: #ffffff;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 3px;
+    padding: 15px;
+}
\ No newline at end of file
diff --git a/src/app/device-report/ign-report/ign-report.component.spec.ts b/src/app/device-report/ign-report/ign-report.component.spec.ts
new file mode 100644
index 0000000..772ff92
--- /dev/null
+++ b/src/app/device-report/ign-report/ign-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgnReportComponent } from './ign-report.component';
+
+describe('IgnReportComponent', () => {
+  let component: IgnReportComponent;
+  let fixture: ComponentFixture<IgnReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IgnReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IgnReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/ign-report/ign-report.component.ts b/src/app/device-report/ign-report/ign-report.component.ts
new file mode 100644
index 0000000..a627a9a
--- /dev/null
+++ b/src/app/device-report/ign-report/ign-report.component.ts
@@ -0,0 +1,375 @@
+import { Component, OnInit, EventEmitter,Output  } from '@angular/core';
+import {ContactService} from '../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+
+@Component({
+  selector: 'app-ign-report',
+  templateUrl: './ign-report.component.html',
+  styleUrls: ['./ign-report.component.scss'],
+  providers: [ContactService]
+})
+export class IgnReportComponent implements OnInit {
+  myaccount(){
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+
+
+
+_lineChartData:any;
+public info: string;
+public prevDatasets;
+
+options = [];
+ign(){
+  this.router.navigateByUrl("device-report/ign-report");
+
+}
+
+ideal(){
+  this.router.navigateByUrl("device-report/ideal-report");
+}
+from:any;
+to:any;
+too:any;
+neww:any;
+before:any;
+creategraph(a){
+  this.too = new Date(this.date1).setHours(23,59,59,999) 
+  this.to = new Date(this.too).toISOString()
+  var d = new Date(this.date1);
+  let aa = d.setHours(0,0,0,0)
+  this.from = new Date(aa).toISOString();
+
+  let r = new Date(this.date1).toISOString();
+  // console.log(r);
+  this.Load = true;
+  this.contactService.ignitionGraph(a.did,this.from,this.to).subscribe(
+        
+    data => {
+      this.Load = false;
+      this.device_data = data 
+     //console.log(this.device_data); 
+     this.lineChartLabels.length = this.device_data.length;  
+     this.getdata(this.device_data)
+  
+    });
+  
+  }
+  mydealer(){
+    window.localStorage['token'] =  window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if(window.localStorage['DataLoaded'] = 'True'){
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+     // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+getdata(final){
+  let fi = [];
+  let time = [];
+  this.lineChartLabels.length = 0;
+  for(var q=0;q<final.length;q ++){
+    fi.push(final[q].ACC);
+    let t = new Date(final[q].insertionTime).toLocaleTimeString();
+   // console.log(t);
+    //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+    this.lineChartLabels.push(t)
+  }
+ this.Load = false;
+  this.lineChartData = [{
+    label: "Ignition",
+    data: fi
+  }];
+  
+
+
+}
+
+
+
+
+ // lineChart
+ public lineChartData:Array<any> = [
+  {data: [0, 0, 0, 0, 0, 0, 0], label: 'Ignition'},
+];
+
+public lineChartLabels:Array<any> = ['','','','','','',''];
+public lineChartOptions:any = {
+  responsive: true,
+  scales: {
+    xAxes: [{
+      ticks: {
+        beginAtZero: false,
+        max: 6000,
+        min: 0
+      }
+    }]  
+  }
+
+};
+public lineChartColors:Array<any> = [
+  { // grey
+    backgroundColor: 'rgba(148,159,177,0.2)',
+    borderColor: 'rgba(148,159,177,1)',
+    pointBackgroundColor: 'rgba(148,159,177,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+  },
+  { // dark grey
+    backgroundColor: 'rgba(77,83,96,0.2)',
+    borderColor: 'rgba(77,83,96,1)',
+    pointBackgroundColor: 'rgba(77,83,96,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(77,83,96,1)'
+  },
+  { // grey
+    backgroundColor: 'rgba(148,159,177,0.2)',
+    borderColor: 'rgba(148,159,177,1)',
+    pointBackgroundColor: 'rgba(148,159,177,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+  }
+];
+public lineChartLegend:boolean = true;
+public lineChartType:string = 'line';
+
+
+
+// events
+public chartClicked(e:any):void {
+  // console.log(e);
+}
+
+public chartHovered(e:any):void {
+  // console.log(e);
+}
+
+  
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  date1:any = new Date();
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  finall:any;
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+  ngOnInit() {
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+  
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];
+    this.date = new Date
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          }
+
+        // }
+
+     
+
+      });
+
+    // ignitionGraph
+  }
+
+}
diff --git a/src/app/device-report/ignition-report/ignition-report.component.html b/src/app/device-report/ignition-report/ignition-report.component.html
new file mode 100644
index 0000000..9e82cf6
--- /dev/null
+++ b/src/app/device-report/ignition-report/ignition-report.component.html
@@ -0,0 +1,119 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Ignition Report' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">{{'Vehicle' | translate}} </th>
+                        <th style="text-align:left;">{{'ON/OFF' | translate}}</th>
+                        <th style="text-align:left;">{{'Date Time' |translate}}</th>
+                        <th style="text-align:left;">{{'Location' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+
+      <app-all-menus></app-all-menus>
+        <div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <p class="headStyle">{{'Ignition Report' | translate}}</p>
+    <div class="InputStyle" style="padding-bottom:30px">
+      <div class="row">
+        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
+       
+          <select id="select" multiple="multiple">
+            <option *ngFor="let option_1 of options" value={{option_1.value}}>{{ option_1.value }}</option>
+          </select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button (click)="ignition_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+         
+            <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+         
+          </div>
+      </div>
+    </div>
+
+    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
+    <table class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+     
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+      
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover" style="display:none;">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: centser ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  -->
\ No newline at end of file
diff --git a/src/app/device-report/ignition-report/ignition-report.component.scss b/src/app/device-report/ignition-report/ignition-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/ignition-report/ignition-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/ignition-report/ignition-report.component.spec.ts b/src/app/device-report/ignition-report/ignition-report.component.spec.ts
new file mode 100644
index 0000000..fe73a94
--- /dev/null
+++ b/src/app/device-report/ignition-report/ignition-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgnitionReportComponent } from './ignition-report.component';
+
+describe('IgnitionReportComponent', () => {
+  let component: IgnitionReportComponent;
+  let fixture: ComponentFixture<IgnitionReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IgnitionReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IgnitionReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/ignition-report/ignition-report.component.ts b/src/app/device-report/ignition-report/ignition-report.component.ts
new file mode 100644
index 0000000..fdba69a
--- /dev/null
+++ b/src/app/device-report/ignition-report/ignition-report.component.ts
@@ -0,0 +1,673 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../contact.service';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { environment } from '../../../environments/environment';
+import { SearchFilterPipe } from '../../search-filter.pipe'
+
+
+declare var google: any;
+declare var $:any;
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+declare var _:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-ignition-report',
+  templateUrl: './ignition-report.component.html',
+  styleUrls: ['./ignition-report.component.scss']
+})
+export class IgnitionReportComponent implements OnInit {
+  ignition_data: any =[];
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+  tabelObj:any; 
+  tableFlag: boolean=true;
+  identifier : String = "ignition_report";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { 
+    
+  
+  }
+
+  ngOnInit() {
+ 
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // this.testTable();
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log("ignition option",this.options);
+    //       // let that = this;
+    //       // setTimeout(()=>{
+    //       //   that.loadropdown();
+    //       // },100)  
+      
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+    //  var fDate:any;
+    //  var tDate:any;
+    //  this.ignition_report(fDate,tDate);
+    this.testTable();
+  
+    
+     
+  }
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+  //   setTimeout(() => {
+  //     $('#select').multipleSelect({
+  //       width: 200,
+  //       placeholder: 'Select Vehicle.....',
+  //       filter: true,
+  //     })
+  //    // $('#select').show();
+  //   }, 100);
+
+
+  // }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+//   }
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+  
+  
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+
+//   ignition_report(Fromdate,todate){
+  
+//     var deviceId;
+//      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+//       if(this.deviceArr.length==0){
+//         deviceId=[];
+//       }else{
+//         deviceId= this.deviceArr;
+//       }
+//     let f_date = Fromdate.toISOString();
+//     let t_date =  todate.toISOString();
+//     this.contactService.ignitionReport(f_date,t_date,deviceId,this.uId)
+//     // console.log(option);
+//     this.uId =  this.useridd
+//     this.report_to_show=[];
+//     var outerThis = this;
+//     this.Load = true;
+ 
+//   this.contactService.ignitionReport(f_date,t_date,deviceId,this.useridd)
+//   .subscribe(res=>{
+//     this.ignition_data = res;
+//     console.log('this.ignition_data',this.ignition_data); 
+//     this.Load = false;
+//     if(this.ignition_data.length==0){
+//       this.errorDialog=true
+//x        this.errorMsg="No data Available"
+      
+//     }else{
+//       this.errorDialog=false;
+//       if(this.tableFlag === true){
+//         this.testTable(); 
+    
+//       }else{
+       
+//          this.tabelObj.clear();
+//          this.tabelObj.rows.add(this.ignition_data); 
+//          this.tabelObj.draw();      
+       
+//       }
+//       this.tableFlag = false;
+
+//     }
+    
+//     // console.log("ignition option",this.ignition_data);
+//   },err=>{
+//     this.Load = false;
+//   })
+   
+// }
+// XLurl:any;
+// export_to_XL(Fromdate,todate,option){
+  
+//   // console.log("Excel report");
+//   // console.log("thisisoption",option)
+//   let f_date = Fromdate.toISOString();
+//   let t_date = todate.toISOString();
+//   this.uId = option.value;
+//   // console.log(this.uId);
+//   this.contactService.ignXLreport(f_date,t_date,this.uId,this.useridd)
+//     .subscribe(res=>this.downloadXL(res)),
+//                 error =>
+//                  console.log("Error downloading the file."),
+//                 () => console.info("OK");
+//       // console.log(res);
+//       // let filePath = res;
+//       // this.XLurl= this.dev_url +"/"+res.filename;
+//       // window.open(this.XLurl);
+//       // this.t.href = this.XLurl;
+//       // console.log(this.XLurl);
+    
+
+// }
+
+// downloadXL(filepath){
+//   // console.log(filepath.filename);
+//   this.XLurl= this.dev_url+"/"+filepath.filename
+//   // console.log(this.XLurl);
+//   // var blob = new Blob(this.XLurl);
+//   // this.url= window.URL.createObjectURL(blob);
+//   window.location.href = this.XLurl;
+// }
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+optionVal:any;
+
+// filterStates(val) {
+//   if (val) {
+//     const filterValue:any = val
+//      this.dataSelect = this.options.filter( function(d){
+//       return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+//     });
+//     return this.dataSelect;
+//   }
+// }
+// autocompleteSearchObject = function autocompleteSearchFilter(err: any,searchResult:string){
+//   console.log("Inside function");
+// }
+
+addressLink = "";
+getlink(report){
+  // console.log("inside function");
+  // console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+
+getAdd(latitude,longitude){
+  var latti =0;
+  var longi = 0
+  if(latitude != undefined){
+    latti = latitude;
+
+  }
+  if(longitude != undefined){
+    longi = longitude
+
+  }
+    return 'https://maps.google.com/?q='+ latti + ',' + longi ; 
+}
+
+// callfunction(): void {
+//   // this.Load = true;
+//   this.tabelObj.draw();
+// }
+
+getReport(event){
+  
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+  
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+    // this.tabelObj.draw();  
+    // this.tabelObj.draw();
+    // if(this.ajaxCount != 0){
+ 
+    // }
+    // this.ajaxCount = 1 ; 
+  }
+ 
+}
+
+
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+    
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true;
+             
+              // dataTablesParameters.find._u = that.useridd;
+            
+              // dataTablesParameters.find._u = user;
+
+              // if(that.deviceArr.length != 0){
+         
+                // dataTablesParameters.find.vname = deviceId;
+              // }
+            // if (that.Fromdate) {
+                // var fdate = new Date(that.Fromdate).toISOString()      
+                // dataTablesParameters.find.f_date = fdate    
+                // dataTablesParameters.find.f_date =  from_date;    
+            // };
+
+            // if (that.todate) {
+              // var fdate = new Date(that.todate).toISOString()      
+              // dataTablesParameters.find.t_date = fdate     
+                // dataTablesParameters.find.t_date = to_date  ;
+          // };
+          // this.deviceArr = deviceId; 
+         
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            suburl += "/notifs/ignitionReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+            if(that.deviceArr.length != 0){  
+              suburl +='&device='+that.deviceArr;
+            }
+
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+              that.contactService.get(suburl).subscribe(resp => {   
+                // console.log(ignReport.length);  
+                
+                // that.getWorkingHour(resp);
+                that.Load = false;
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+
+            }else{
+              let ta = [];
+              that.Load = false;
+              callback({data : ta });
+            }
+          
+        },  
+      
+          "columns": [
+              {
+                  "data": "vehicleName",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "switch",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "timestamp",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var expDate = new Date(data);
+                    return data ? (moment(expDate).format('llll')) : "";  
+                
+                  }
+              }, 
+        
+              
+            {
+              "data": "address",
+              "defaultContent": "_id",
+              render: function(data, type, row) {        
+                  let lat = row.lat;
+                  let long = row.long;        
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                  if(data){
+                    return data ;
+                  }else{
+                    return addressLink;     
+                  }
+              }
+          }                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+       
+          ] 
+      });
+
+  });
+
+}
+
+getAddress(latLng){
+  console.log(latLng);
+  
+}
+
+
+exportPdf(){
+
+
+  html2canvas(document.getElementById('deviceTable'), {
+     onrendered: function (canvas) {
+        var data = canvas.toDataURL();
+        console.log(data);
+        var docDefinition = {
+            content: [{
+                image: data,
+                width: 1000
+            }]
+        };
+        pdfMake.createPdf(docDefinition).download("Table.pdf");
+    }
+});
+
+
+}
+
+// getWorkingHour(resp){
+//   console.log(resp);  
+//   var data = resp ;
+//   var finalObj = {};
+//   var that = this;
+//   var temp = {}, switchMap = { 'OFF': 'OFF-ON_time', 'ON': 'ON-OFF_time' }, switchParam = ['OFF', 'ON'];
+//   var process = function (param, temp) {
+//     // console.log('temp',temp);
+//     for (var j = 0; j < param.length; j++) {
+//       if (temp[0].switch == param[j]) {
+//         if (!finalObj[data[i].vehicleName])
+//           finalObj[data[i].vehicleName] = {};
+//         if (temp.length == 2) {
+//           if (!finalObj[data[i].vehicleName][switchMap[param[j]]])
+//           finalObj[data[i].vehicleName][switchMap[param[j]]] = 0;
+//           finalObj[data[i].vehicleName][switchMap[param[j]]] += new Date(temp[0].timestamp).getTime() - new Date(temp[1].timestamp).getTime();
+//           // console.log('finalObj',finalObj);
+//           // console.log(finalObj[data[i].vehicleName][switchMap[param[j]]]);
+
+//           console.log('finalObj',finalObj);
+//           temp.splice(0, 1);
+//         }
+//       }     
+//     }
+//   }
+//   for (var i = 0; i < data.length; i++) {
+//     if (!temp[data[i].vehicleName])
+//     temp[data[i].vehicleName] = [];
+//     temp[data[i].vehicleName].push(data[i]);
+//     process(switchParam, temp[data[i].vehicleName]);
+//   }
+//     // console.log('finalObj',finalObj);
+
+// }
+
+
+
+
+
+
+
+
+}
diff --git a/src/app/device-report/maintanance/maintanance.component.html b/src/app/device-report/maintanance/maintanance.component.html
new file mode 100644
index 0000000..4f033b3
--- /dev/null
+++ b/src/app/device-report/maintanance/maintanance.component.html
@@ -0,0 +1,40 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Maintenance Report' | translate}}</h4>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">{{'Service Date' | translate}} </th>
+                        <th style="text-align:left;">{{'Device name' | translate}} </th>
+                        <th style="text-align:left;">{{'IMEI' | translate}} </th>
+                        <th style="text-align:left;">{{'ODO' | translate}}</th>
+                        <th style="text-align:left;" title="work performed and service schedule">{{'work performed' |translate}}</th>
+                        <th style="text-align:left;">{{'performer' | translate}}</th>
+                        <th style="text-align:left;">{{'Additional notes' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
diff --git a/src/app/device-report/maintanance/maintanance.component.scss b/src/app/device-report/maintanance/maintanance.component.scss
new file mode 100644
index 0000000..c037a93
--- /dev/null
+++ b/src/app/device-report/maintanance/maintanance.component.scss
@@ -0,0 +1,37 @@
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/device-report/maintanance/maintanance.component.spec.ts b/src/app/device-report/maintanance/maintanance.component.spec.ts
new file mode 100644
index 0000000..13b4be5
--- /dev/null
+++ b/src/app/device-report/maintanance/maintanance.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaintananceComponent } from './maintanance.component';
+
+describe('MaintananceComponent', () => {
+  let component: MaintananceComponent;
+  let fixture: ComponentFixture<MaintananceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MaintananceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaintananceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/maintanance/maintanance.component.ts b/src/app/device-report/maintanance/maintanance.component.ts
new file mode 100644
index 0000000..945c437
--- /dev/null
+++ b/src/app/device-report/maintanance/maintanance.component.ts
@@ -0,0 +1,280 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
+
+declare var $:any;
+@Component({
+  selector: 'app-maintanance',
+  templateUrl: './maintanance.component.html',
+  styleUrls: ['./maintanance.component.scss']
+})
+export class MaintananceComponent implements OnInit {
+  identifier : String = "maintanance_report";
+  superAdmin: any;
+  useridd: any;
+  custtype: any;
+  optionVal:any;
+  deviceArr: any=[];
+  tabelObj: any;
+  Fromdate: Date;
+  todate: Date;
+  Load: boolean;
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;  
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.testTable();
+  }
+
+  tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+getReport(event){
+  
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+  
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+    // this.tabelObj.draw();  
+    // this.tabelObj.draw();
+    // if(this.ajaxCount != 0){
+ 
+    // }
+    // this.ajaxCount = 1 ; 
+  }
+ 
+}
+
+
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+    that.tabelObj = $('#deviceTable').DataTable({
+      dom: 'lBftip',
+      buttons: [
+        'copy',
+        'print',
+        'excel'
+      ],       
+        "processing": true,
+        "searching": false,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters: any, callback) => {
+          
+            dataTablesParameters.op = {};
+            dataTablesParameters.select = [];
+            dataTablesParameters.find = {};
+
+            dataTablesParameters.find['$and'] = [];
+            var userFilter = {};
+            userFilter['$or'] =[ {user : that.useridd}, {created_by :that.useridd} ]
+            dataTablesParameters.find['$and'].push(userFilter);
+
+            // dataTablesParameters.find['$or'] = [currUser,admin]  
+
+            dataTablesParameters.columns = [
+          
+          {data:"_id"},
+          {data:'user.first_name'},
+          {data:'user.last_name'},
+          {data:'device.Device_Name'},
+          {data:'device.Device_ID'},
+          {data:'reminder_date'},    
+          {data:'notification_type.SMS'},
+          {data:'notification_type.EMAIL'},
+          {data:'notification_type.PUSH_NOTIFICATION'},
+          {data : 'reminder_type'},
+          {data :'date_of_service'},
+          {data : 'performed_by'},
+          {data : 'prior_reminder'},
+          {data : 'odo'},
+          {data:'note'},
+          {data:'status'},
+            ]            
+           
+          
+            var reminder_date={};
+        
+       
+            // dataTablesParameters.find.user = that.useridd;
+            if(that.deviceArr.length != 0){
+              console.log('that.deviceArr',that.deviceArr);
+              var dev_in = {device : {'$in': that.deviceArr}};
+            
+                dataTablesParameters.find['$and'].push(dev_in);
+                }
+                 if (that.Fromdate) {
+                  var fdate = new Date(that.Fromdate).toISOString()                      
+                   reminder_date['$gte']=fdate  
+                
+
+              };
+              if (that.todate) {
+                var tdate = new Date(that.todate).toISOString()        
+                 reminder_date['$lte'] =  tdate     ;
+                
+            };
+            var r_d ={};
+            r_d['reminder_date'] = reminder_date ; 
+            dataTablesParameters.find['$and'].push(r_d);
+       
+          
+              var r_t = {};
+              r_t['status'] = 'Completed' ;
+              dataTablesParameters.find['$and'].push(r_t);               
+            
+            // dataTablesParameters.find.user = that.useridd ;       
+
+            
+           console.log('dataTablesParameters.find=>',dataTablesParameters.find);
+            if(that.deviceArr.length != 0 && that.Fromdate && that.todate){
+            // that.minIdleTime =      
+            var suburl = "";
+            suburl += "/reminder/reminderdatatable";
+            that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {     
+                console.log("Response from datatable=>",resp);     
+                that.Load= false;         
+                callback(resp);
+            }, err => {                
+              that.Load= false;    
+         
+            });
+          }else{
+              that.Load= false; 
+               callback({data : []});
+          }
+            // }else{
+            //   that.Load= false;    
+            //   let message1="Please Select Device";
+            //   let action:any;
+            //   that.snackBar.open(message1, action, {
+            //     duration: 5000,
+                
+            //   });  
+            //   return;
+            // }
+           
+                                      
+     
+        },  
+ 
+
+        "columns": [
+            {
+                "data": "date_of_service",
+                "visible" :true,
+                "render": function(data, type, row) {
+              
+                 return data?moment(data).format('llll'):'NA';
+                    
+                }
+            },
+            {
+                "data": "device.Device_Name",
+                "visible" :true,
+                render: function(data, type, row) {
+                    
+                    return data?data:'';           
+                }
+            },
+            {
+                "data": "device.Device_ID",
+                "visible" :true,
+                render: function(data, type, row) {
+                  console.log('data',data);                                      
+                    return data?data:'';
+                }
+            }, 
+            {
+              "data": "odo",
+              "visible" : true,
+              render: function(data, type, row) {  
+                
+                  return data?data:"NA";
+              }
+          },    
+            
+            {
+              "data": "reminder_type",
+              "visible" :true,
+              render: function(data, type, row) {             
+                  return data?data:'--';
+              }
+          },         
+          { 
+            "data": "performed_by",
+            "visible" :true,
+            render: function(data, type, row) {
+          return data?data:''
+            }
+        }, 
+        { 
+          "data": "note",
+          "visible" :true,
+          render: function(data, type, row) {
+           return data?data:''
+          }
+      }, 
+  
+                
+        ],   
+    });
+
+  });
+
+}
+
+
+}
diff --git a/src/app/device-report/over-speed/over-speed.component.html b/src/app/device-report/over-speed/over-speed.component.html
new file mode 100644
index 0000000..4ea08b2
--- /dev/null
+++ b/src/app/device-report/over-speed/over-speed.component.html
@@ -0,0 +1,124 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Overspeeding Report' | translate}}</h4>
+      <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Overspeed' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>
+                      <th style="text-align: left;">{{'Datetime' | translate}}</th>      
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+  <div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <p class="headStyle">{{'Overspeeding Report' | translate}}</p>
+    <div class="InputStyle" style="padding-bottom:30px">
+      <div class="row">
+        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
+           
+            
+            <select id="select" multiple="multiple">
+              <option *ngFor="let option_1 of options" value={{option_1.did}}>{{ option_1.value }}</option>
+            </select>
+    
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="overSpeeding_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+            
+              <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+         
+          </div>
+      </div>
+    </div>
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>Vehicle Name</th>
+          <th >Overspeed</th>
+          <th>Location</th>
+          <th>Datetime</th>        
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let device of overSpeed">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.overSpeed}}</td>
+          <td style="cursor:pointer">
+            <p *ngIf="device.address != undefined">{{device.address}}</p>
+            <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+          
+          </td>
+          <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display: none">
+
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th>Vehicle Name</th>
+   <th >Overspeed</th>
+   <th>Location</th>
+   <th>Datetime</th>        
+ </tr>
+</thead>
+<tbody>
+ <tr *ngFor="let device of overSpeed">
+   <td style="cursor:pointer">{{device.vehicleName}}</td>
+   <td style="cursor:pointer">{{device.overSpeed}}</td>
+   <td style="cursor:pointer">
+     <p *ngIf="device.address != undefined">{{device.address}}</p>
+     <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+   
+   </td>
+   <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+ </tr>
+</tbody>
+</table>
+  </div> -->
diff --git a/src/app/device-report/over-speed/over-speed.component.scss b/src/app/device-report/over-speed/over-speed.component.scss
new file mode 100644
index 0000000..661fe8f
--- /dev/null
+++ b/src/app/device-report/over-speed/over-speed.component.scss
@@ -0,0 +1,36 @@
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/over-speed/over-speed.component.spec.ts b/src/app/device-report/over-speed/over-speed.component.spec.ts
new file mode 100644
index 0000000..9405e87
--- /dev/null
+++ b/src/app/device-report/over-speed/over-speed.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverSpeedComponent } from './over-speed.component';
+
+describe('OverSpeedComponent', () => {
+  let component: OverSpeedComponent;
+  let fixture: ComponentFixture<OverSpeedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OverSpeedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OverSpeedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/over-speed/over-speed.component.ts b/src/app/device-report/over-speed/over-speed.component.ts
new file mode 100644
index 0000000..a302d08
--- /dev/null
+++ b/src/app/device-report/over-speed/over-speed.component.ts
@@ -0,0 +1,633 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { environment } from '../../../environments/environment';
+
+
+declare var google: any;
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-over-speed',
+  templateUrl: './over-speed.component.html',
+  styleUrls: ['./over-speed.component.scss']
+})
+export class OverSpeedComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  identifier:String = "over_speed";
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  dev_url = environment.hostUrl;
+  date1:any;
+
+  dataSelect:any;
+
+  superAdmin:Boolean = false;
+  deviceId: any;
+  tabelObj: any;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log(this.options);
+    //       let that = this;
+    //       setTimeout(()=>{
+    //         that.loadropdown();
+    //       },100)  
+      
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable();
+  }
+
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+  //   setTimeout(() => {
+
+  //     $('#select').multipleSelect({
+  //       width: 200,
+  //       placeholder: 'Select device.....',
+  //       filter: true,
+  //     })
+  //    // $('#select').show();
+  //   }, 100);
+
+
+  // }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+//   ignition_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/ignition_report");
+
+
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+// summaryReport(){
+
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+
+// alert_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/alert_report");
+// }
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// driverPerformance(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/Driver-performance");
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+
+
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+
+// trip_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/trip_report");
+
+// }
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+
+getReport(event){
+  if(event === 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd.toISOString();
+    this.todate = td.toISOString();
+    console.log("b4");
+    // this.tabelObj.clear();
+    // var aa = [];
+    // this.tabelObj.rows.add(aa); 
+  
+    console.log(this.tabelObj);
+    this.tabelObj.ajax.reload();      
+
+  }
+ 
+    
+
+
+}
+
+   
+
+
+  overSpeed_data=[];
+  overSpeed:any;
+  address_show:any;
+  vehicle_name:any;
+  show_time:any;
+  speed_ex:any;
+ 
+  start_add:any;
+  uId:any;
+  data_descip:any;
+  tost1(errcode){
+    if(errcode=="error_message"){
+      this.data_descip = "No Data Available";
+      launch_toast();
+
+    }
+
+    function launch_toast() {
+   
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }
+
+  }
+  start_add_long:any;
+  start_add_lat:any;
+  deviceArr = [];
+  overSpeeding_report(Fromdate,todate){
+    //  console.log(this.dataSelect);
+      var deviceId;
+
+      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+      if(this.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= this.deviceArr;
+      }
+  
+     
+      let did =this.useridd;
+     
+    let f_date = Fromdate.toISOString();
+    let t_date =  todate.toISOString();
+    // console.log(f_date);
+    // console.log(t_date);
+    this.overSpeed_data=[];  
+    var outerThis = this;
+    this.Load = true; 
+    this.contactService.overSpeed(f_date, t_date, did,deviceId)
+     .subscribe(res => {
+        this.overSpeed= res;
+        console.log("this.overSpeed=>",this.overSpeed);
+        this.Load = false;  
+      },err=>{
+        this.Load =false;
+        console.log("Error while fetching data",err);
+
+      })
+  }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+   
+       that.tabelObj = $('#deviceTable').DataTable({
+          dom: 'lBftip',
+          buttons: [
+            'copy',
+            'print',
+            'excel'
+          ],       
+            "processing": false,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              console.log('temptemptemptemptemp',dataTablesParameters);
+                var deviceID;
+                console.log('that.deviceArr',that.deviceArr);    
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+
+            
+              var suburl = "";
+              that.Load= true;    
+              suburl += "/notifs/overSpeedReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe(resp => {   
+                  // console.log(ignReport.length); 
+                  that.Load= false;      
+                 that.overSpeed=resp;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+          },  
+        
+            "columns": [
+                {
+                    "data": "vehicleName",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "overSpeed",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      return data?data:'';        
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      
+                      var lat = row.lat?row.lat:0;
+                      var long = row.long?row.long:0;
+                      var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle End location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';      
+                      return data?data.address : addressLink; 
+                  
+                    }
+                },        
+              {
+                "data": "timestamp",
+                "defaultContent": "",
+                render: function(data, type, row) { 
+                  var overspeedDate = new Date(data);
+                  return data ? (moment(overspeedDate).format('llll')) : "";              
+                 
+                }
+            }  
+            
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            }   ,
+            { "width": "10px", "targets": 0 },
+            { "width": "40px", "targets": 1 },
+            { "width": "100px", "targets": 2 },
+            { "width": "70px", "targets": 3 },
+           
+            ] 
+        });
+  
+    });
+  
+  }
+
+  addressLink = "";
+getlink(report){
+  console.log("inside function");
+  console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+  xlUrl:any;
+  export_to_XL(Fromdate,todate,option){
+    // console.log("Excel report");
+    let f_date = Fromdate.toISOString();
+    let t_date = todate.toISOString();
+    let uId1 = option.user.first_name;
+    // console.log(uId1);
+    this.contactService.OSXLreport(f_date,t_date,uId1,this.useridd)
+      .subscribe(res=>{
+      //  console.log(res);
+        this.xlUrl= this.dev_url +"/"+res.filename;
+        
+        // console.log(this.xlUrl);
+      })
+  
+  
+  
+  }
+
+
+  tab:any;
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+
+  }
+
+
+}
+
+
+}
diff --git a/src/app/device-report/poi-report/poi-report.component.html b/src/app/device-report/poi-report/poi-report.component.html
new file mode 100644
index 0000000..ddaeebc
--- /dev/null
+++ b/src/app/device-report/poi-report/poi-report.component.html
@@ -0,0 +1,107 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'POI Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align:left;">{{'Device ID' | translate}}</th>
+                      <th style="text-align:left;">{{'POI name' | translate}}</th>
+                      <th style="text-align:left;">{{'Arrival Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Departure Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Address' | translate}}</th>  
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div style="min-height:420px;padding-top: 6%;">
+  <p class="headStyle">{{'POI Report'  | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-2" style="padding-left: 18px;">
+          <md-input-container>
+          <input mdInput placeholder="{{'Type POI Name' | translate}}" [mdAutocomplete]="tdAutoRoute" name="state" 
+          #state="ngModel" [(ngModel)]="routeName"
+          (ngModelChange)="filterRoutes(routeName)">
+         <md-autocomplete #tdAutoRoute="mdAutocomplete">
+            <md-option *ngFor="let route of routeSelect" [value]="route.poiname" >
+              <span>{{route.poiname}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+      </div>
+      <div class="col-md-2">
+        <md-input-container>
+        <input mdInput placeholder="{{'Type Device Name' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+        #state="ngModel" [(ngModel)]="deviceName"
+        (ngModelChange)="filterDevices(deviceName)">
+       <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+            <span>{{device.viewValue}}</span>
+          </md-option >
+        </md-autocomplete>   
+      </md-input-container>
+   
+    </div>
+      <div class="col-md-3">
+        <span>{{'From Date' |  translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2" style="padding-left: 65px;padding-top:17px;">
+          <button style="background-color:#3e3737;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>       
+        </div>
+    </div>
+  </div>
+  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device Name' | translate}}</th>
+            <th style="text-align:center;">{{'Device ID' | translate}}</th>
+            <th style="text-align:center;">{{'POI name' | translate}}</th>
+            <th style="text-align:center;">{{'Arrival Time' | translate}}</th>
+            <th style="text-align:center;">{{'Departure Time' | translate}}</th>
+            <th style="text-align:center;">{{'Address' | translate}}</th>         
+        </tr>
+    </thead>    
+</table>
+</div>
+
+ -->
diff --git a/src/app/device-report/poi-report/poi-report.component.scss b/src/app/device-report/poi-report/poi-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/poi-report/poi-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/poi-report/poi-report.component.spec.ts b/src/app/device-report/poi-report/poi-report.component.spec.ts
new file mode 100644
index 0000000..76e979f
--- /dev/null
+++ b/src/app/device-report/poi-report/poi-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { POIReportComponent } from './poi-report.component';
+
+describe('POIReportComponent', () => {
+  let component: POIReportComponent;
+  let fixture: ComponentFixture<POIReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ POIReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(POIReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/poi-report/poi-report.component.ts b/src/app/device-report/poi-report/poi-report.component.ts
new file mode 100644
index 0000000..c13c97e
--- /dev/null
+++ b/src/app/device-report/poi-report/poi-report.component.ts
@@ -0,0 +1,389 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+
+declare var $: any, DataTable: any;
+import * as moment from 'moment'
+@Component({
+  selector: 'app-poi-report',
+  templateUrl: './poi-report.component.html',
+  styleUrls: ['./poi-report.component.scss']
+})
+export class POIReportComponent implements OnInit {
+    
+  option: any;
+  Fromdate = new Date();
+  todate = new Date();
+  emailid: any;
+  identifier = 'poi_report';
+  useridd: any;
+  tabelObj: any ;
+  deviceName:any;
+  routeName:any;
+  constructor(public contactService: ContactService) { 
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+
+  ngOnInit() {
+    this.Fromdate.setHours(0, 0, 0);
+    this.testTable();
+    // this.getAllDevice();
+    // this.getPOI();
+    // this.searchFilter();
+  }
+
+ 
+
+testTable() {
+    const that = this;
+    // console.log("selectedRoute=>",this.routeSelect);
+    $(document).ready(function() {
+        that.tabelObj = $('#deviceTable').DataTable({
+            serverSide: true,
+            "processing": true,
+            "searching": false,
+            "pageLength": 25,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,   
+            ajax: (dataTablesParameters: any, callback) => {
+
+                dataTablesParameters.op = {};
+                dataTablesParameters.select = [];
+                dataTablesParameters.find = {};
+                // console.log(dataTablesParameters);
+                // console.log("callback", callback);
+
+                // dataTablesParameters.find = {
+                //   _id: that.useridd         
+                // };
+                dataTablesParameters.columns = [
+                    { data: "_id" },
+                    { data: "device.Device_Name" },
+                    { data: "device.Device_ID" },
+                    { data: "address" },
+                    { data: "arrivalTime" },
+                    { data: "departureTime" },
+                    { data: "poi.poi.poiname" },
+                  ]
+                //   console.log("selectedRoute=>",that.routeSelect);
+                //   console.log("VehicleID",that.deviceSelect);
+
+                // ==========================================
+                if (that.Fromdate) {
+                    var arrGtObj = { "arrivalTime": { "$gte": that.Fromdate } }
+                    var depGtObj = { "departureTime": { "$gte": that.Fromdate } }
+                }
+
+                if (that.todate) {
+                    var arrLtObj = { "arrivalTime": { "$lte": that.todate } }
+                    var depLtObj = { "departureTime": { "$lte": that.todate } }
+                }
+
+                if (arrGtObj || arrLtObj) {
+                    var arrAndObj1 = { "$and": [] }
+                    if (arrGtObj)
+                        arrAndObj1["$and"].push(arrGtObj);
+                    if (arrLtObj)
+                        arrAndObj1["$and"].push(arrLtObj);
+                }
+
+                if (depGtObj || depLtObj) {
+                    var arrAndObj2 = { "$and": [] }
+                    if (depGtObj)
+                        arrAndObj2["$and"].push(depGtObj);
+                    if (depLtObj)
+                        arrAndObj2["$and"].push(depLtObj);
+                }
+
+                if (arrAndObj1 || arrAndObj2) {
+                    var orArr = []
+                    if (arrAndObj1)
+                        orArr.push(arrAndObj1);
+                    if (arrAndObj2)
+                        orArr.push(arrAndObj2);
+                }
+                var finalObj = { "$or": orArr};
+           
+                dataTablesParameters.find = finalObj;
+              
+                if (that.deviceObj.length != 0){
+                    // console.log(that.deviceSelect);
+                    dataTablesParameters.find.device = that.deviceObj[0];        
+                }
+
+                if (that.poi_id.length != 0) {
+                    
+                    // console.log("routeId=>",that.routeSelect[0].id);              
+                    dataTablesParameters.find.poi = that.poi_id[0];        
+                }
+
+                dataTablesParameters.find.user = that.useridd;
+
+
+                var suburl = "";
+                suburl += "/poi/datatable";
+                // console.log(suburl);
+                // console.log(dataTablesParameters);
+                // console.log(suburl)
+                that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                    console.log("poiResp",resp);
+                    callback(resp);
+                }, err => {           
+                    // console.log(err.status);
+                });
+            },
+            "columns": [
+                {
+                    "data": "device.Device_Name",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "device.Device_ID",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "poi.poi.poiname",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        // console.log("poiData=>",data);
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "arrivalTime",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        var A_time = new Date(data);
+                        return data ? (moment(A_time).format('llll')) : "";
+                    }
+                },
+                {
+                    "data": "departureTime",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        var D_time = new Date(data);
+                        return data ? (moment(D_time).format('llll')) : "";
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        var created_time = new Date(data);
+                        return data?data:"";
+                    }
+                },             
+            ],
+        });
+
+        that.tabelObj.columns().every( function () {
+            var that = this;
+     
+            $( 'input', this.footer() ).on( 'keyup change', function () {
+                if ( that.search() !== this.value ) {
+                    that
+                        .search( this.value )
+                        .draw();
+                }
+            } );
+        } );
+       
+    });
+
+}
+
+
+searchFilter(){
+    // DataTable
+    var table = $('#deviceTable').DataTable();
+ 
+    // Apply the search
+    table.columns().every( function () {
+        var that = this;
+ 
+        $( 'input', this.footer() ).on( 'keyup change', function () {
+            if ( that.search() !== this.value ) {
+                that
+                    .search( this.value )
+                    .draw();
+            }
+        } );
+    } );
+
+}
+deviceObj = [];
+// getAllDevice() {
+//     this.contactService.getDevice(this.emailid,this.useridd)
+//         .subscribe(res => {
+//             // console.log(res);
+//             // console.log("allDevices=>", res);
+//             this.deviceObj = [];
+//             var Alldevices = {
+//                 id: "all",
+//                 viewValue: "ALL Devices"
+//             }
+//             this.deviceObj.push(Alldevices);
+
+//             for (var i = 0; i < res.devices.length; i++) {
+//                 Alldevices = {
+//                     id: res.devices[i]._id,
+//                     viewValue: res.devices[i].Device_Name ? res.devices[i].Device_Name : ""
+//                 }
+
+//                 this.deviceObj.push(Alldevices)
+//             }
+//             // console.log("deviceArray", this.deviceObj);
+
+//         }, err => {
+//             // console.log(err.status);
+//         })
+// }
+
+
+
+
+deviceSelect: any = [];
+
+filterDevices(dlr) {
+
+    // console.log("deviceData=>", dlr);
+    if (dlr) {
+        // console.log(dlr);
+
+        const filterdealerValue: any = dlr;
+
+        this.deviceSelect = [];
+        this.deviceSelect = this.deviceObj.filter(function(pp) {
+         
+            // console.log("dealerValue=>",pp);
+            var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+
+            return t > -1;
+        });
+        // console.log(this.deviceSelect);
+        return this.deviceSelect;
+    }
+
+}
+
+// Routename filter 
+route_detail_show=[];
+poiArr=[];
+// getPOI(){
+//     // console.log("Mapping history !!!");
+//     this.contactService.getPOI(this.useridd)
+//     .subscribe(res=>{
+//     //   console.log("routedet",res);
+//       this.route_detail_show=res;
+
+//       var poiObj = {
+//           poiname: "All POI",
+//           id : "All"
+//       }
+//       this.poiArr.push(poiObj);
+//       for(var i=0;i<this.route_detail_show.length;i++){
+//         poiObj ={
+//             poiname: this.route_detail_show[i].poi.poiname,
+//             id : this.route_detail_show[i]._id
+//           }
+
+//           this.poiArr.push(poiObj);
+//       }
+
+//     //   console.log("routeDetails=>",this.poiArr);
+//     })
+//   }
+  routeSelect=[];
+//   filterRoutes(route_ID){
+//     //   console.log(route_ID);
+//       if (route_ID) {
+//         //   console.log(route_ID);
+//           const filterRouteValue: any = route_ID;
+  
+//           this.routeSelect = [];
+          
+//         //   console.log("routeData=>", this.route_detail_show);
+//           this.routeSelect = this.poiArr.filter(function(rte) {
+//             // console.log("routeObj=>",rte);
+//               var r = rte.poiname.toLocaleLowerCase().indexOf(filterRouteValue.toLocaleLowerCase());     
+//               return r > -1;
+//           });
+//         //   console.log("filtered route=>",this.routeSelect);
+//           return this.routeSelect;
+//       }
+
+//   }
+
+  tab:any;
+  exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        // console.log('tab_text',JSON.parse(tab_text));
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+  deviceArr :any=[];
+  poi_id:any=[];
+  getReport(event){
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+        console.log(event);
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceObj = deviceId; 
+      this.poi_id  = event.poi_id ;
+
+      
+      this.Fromdate = fd;
+      this.todate = td;
+
+      
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa);   
+      this.tabelObj.draw(); 
+        // this.tabelObj.ajax.reload();        
+    }
+   
+  }
+
+}
diff --git a/src/app/device-report/report-filter/report-filter.component.html b/src/app/device-report/report-filter/report-filter.component.html
new file mode 100644
index 0000000..ca4ed87
--- /dev/null
+++ b/src/app/device-report/report-filter/report-filter.component.html
@@ -0,0 +1,750 @@
+<div class="mainClass">
+  <div class="row" *ngIf="(componentIdentifier != 'billing_detail')&&(componentIdentifier != 'censor_detail')&&(componentIdentifier != 'usersMaster')&&(componentIdentifier != 'deviceMaster')&&(componentIdentifier != 'deviceRenew')&&(componentIdentifier != 'gps_master')&& (componentIdentifier != 'deviceList')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 10px; padding-right: 10px;">
+        <div *ngIf="(componentIdentifier != 'route_violation_report')&&(componentIdentifier != 'notification_master')" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{optionLabel | translate}} :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
+              <div>
+                <select id="dbselect" multiple="multiple" >
+                  <option  *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+                </select>
+              </div> 
+            </div>
+          </div> 
+          <div *ngIf="componentIdentifier === 'notification_master'" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">VEHICLE :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
+              <div>
+                <select id="dbselectNotif" multiple="multiple" >
+                  <option  *ngFor="let option_1 of notifDevArr" [value]="option_1.Device_ID">{{ option_1.Device_Name }}</option>
+                </select>
+              </div> 
+            </div>
+          </div> 
+          <div *ngIf="componentIdentifier === 'notification_master'" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Notification type' | translate}} :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
+              <div>
+                <select id="dbselect_notif" multiple="multiple">
+                  <option *ngFor="let noti of notificationArr" [value]="noti.value">{{ noti.view }}</option>
+                </select>
+              </div> 
+            </div>
+          </div>
+          <div *ngIf="this.componentIdentifier === 'route_violation_report'" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Route' | translate}} :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
+              <div>
+                <select id="dbselect_3" multiple="multiple">
+                  <option *ngFor="let route of routeArr" [value]="route._id">{{ route.name }}</option>
+                </select>
+              </div> 
+            </div>
+          </div>
+          <div *ngIf="componentIdentifier === 'poi_report'" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Select POI' | translate}} :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">   
+              <div>
+                <select id="dbselect_1" multiple="multiple">
+                  <option *ngFor="let poiname of poiArr" [value]="poiname.id">{{ poiname.poiname }}</option>
+                </select>
+              </div> 
+           
+            </div>
+          </div>     
+          <div *ngIf="componentIdentifier === 'stoppage_report'" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">{{'Duration' | translate}} :</p>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">    
+              <div>
+                <select  id="dbselect_2" multiple="multiple">
+                  <option  *ngFor="let ds of stoppage_duration" [value]="ds.value">{{ ds.view_value }}</option>
+                </select>
+              </div>
+         
+            </div>
+          </div>       
+          <div *ngIf="showFromDate === true" class="row" style="margin: 0;padding-bottom: 10px;">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+              <!-- timefilter icons -->
+              <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
+                  <button [disabled]= "(componentIdentifier === 'dayWiseReport')" type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
+                  <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+                  <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
+                  <button [disabled]= "(componentIdentifier === 'distance_report')" type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
+                </div>
+            </div>
+          </div>
+          <!-- <div class="row" style="margin: 0;padding-top: 5px; ">
+            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
+           
+              <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
+            </div>
+            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+           
+              <input id="minIdleTime" class="form-control form-control-sm" style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+            </div>
+          </div> -->
+          <div *ngIf="showFromDate === true" class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <!-- from time label-->
+             <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+              <!-- from datetime picker -->
+              <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
+            </div>
+          </div>
+          <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <!-- tolabel -->
+              <span style="margin-bottom: 0%;font-size: 12px;">{{lableVariable | translate}} :</span>       
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+              <!-- tolabel picker -->
+              <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
+            </div>
+          </div>
+          <div class="row" *ngIf="componentIdentifier === 'idle_report'" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <!-- tolabel -->
+              <span style="margin-bottom: 0%;font-size: 12px;">{{'Min Idle Time (Min)' | translate}} :</span>       
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+              <!-- tolabel picker -->
+              <input id="minIdleTime" class="form-control form-control-sm" style="margin-top: 4px;width: 80px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+            </div>
+          </div>
+
+          <div class="row" *ngIf="componentIdentifier === 'fuel_consumption_report'" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+              <!-- tolabel -->
+              <span style="margin-bottom: 0%;font-size: 12px;">{{'Report Type' | translate}} :</span>       
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+              <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="filterRtype">
+              <md-radio-button class="example-radio-button" *ngFor="let rtype of reportType" [value]="rtype" style="margin-left: 5px">
+                {{rtype}}
+              </md-radio-button>
+            </md-radio-group>
+            </div>
+          </div>
+         
+          <div class="row" style="margin: 0;padding-bottom: 10px;float: right;">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
+              <!-- button -->
+              <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
+              <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+            </div>
+          </div>
+          <!-- <div  *ngIf = "showTable" class="row" style="padding: 0%;padding-top: 10px;">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
+              <div class="row" style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
+                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" >
+              
+                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>
+                  
+                </div>
+                <div class="col-sm-2 col-md-2 col-lg-2" >
+               
+                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
+             
+                  <p></p>
+                </div>
+                <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
+             
+                  <i class="fas fa-times" style="color: red; cursor: pointer;" title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>
+                
+                </div>
+              </div>
+              <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
+                  <div style="max-height: 260px;">
+                    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" (click)="plotHistory(i)">
+                   
+                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}</p>
+                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
+                        </p>              
+                      </div>
+                      <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;" (click)="plotHistory(i)">
+                 
+                        <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}</p>
+                      </div>
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0%;text-align: center;padding-right: 0;" >
+                       
+                        <div>
+                            <md-icon *ngIf="SpeedMeter2"   class="play animateClass_8" (click)="inter('slow')"  mdTooltip="Rewind">fast_rewind</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='init'"   class="play animateClass_9" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='start'"  class="play animateClass_10" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='stop'"  class="play animateClass_11" (click)="play(i)"  mdTooltip="{{'Pause' | translate}}">pause_circle_outline</md-icon>
+                            <md-icon *ngIf="SpeedMeter2"  class="play animateClass_12" (click)="inter('fast')"  mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
+                       
+                        </div>
+                      </div>
+                      <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
+                        <i class="fas fa-times animateClass_13"  title="{{'Remove track' | translate}}"></i>
+                      </div>
+                    </div>                             
+                  </div>  
+                </div>
+              </div>       
+            </div>
+          </div>            -->
+    </div>
+</div>
+<div class="row" *ngIf="(componentIdentifier === 'billing_detail')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-sm-12 col-md-12 col-lg-12" >
+    <div class="row" style="margin-bottom: 10px;" >
+      <div class="col-4">
+       <label style="font-weight: 600;color: #948f8f;">{{'USER' | translate}}</label>
+      </div>
+      <div class="col-8">
+        <div>
+          <select id="dbselect" style="width:200px" multiple="multiple">
+            <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <div class="row"  style="margin-bottom: 10px;">
+      <div class="col-4">
+        <label style="font-weight: 600;color: #948f8f;">{{'TYPE' | translate}}</label>
+      </div>
+      <div class="col-8">
+        <div>
+          <select id="dbselect_billtype" style="width:200px" multiple="multiple">
+            <option *ngFor="let op of billingType" [value]="op.selectedValue">{{ op.value }}</option>
+          </select>     
+        </div>
+     
+      </div>
+    </div>
+    <div class="row"  style="margin-bottom: 10px;">
+        <div class="col-4">
+          <label style="font-weight: 600;color: #948f8f;">{{'STATUS' | translate}}</label>
+        </div>
+        <div class="col-8">
+          <div>
+            <select id="dbselect_billStatus" style="width:200px" multiple="multiple">
+              <option *ngFor="let opp of billing_status" [value]="opp.selectedValue">{{ opp.value }}</option>
+            </select>    
+          </div>
+          
+        </div>
+    </div>
+    <div class="row"  style="margin-bottom: 10px;">
+      <div class="col-4">
+        <label style="font-weight: 600;color: #948f8f;">{{'Select Month' | translate}}</label>
+      </div>
+      <div class="col-8">
+       <form class="container" style="padding:0px">
+        <input [(ngModel)]="modelDate" autocomplete="off" class="form-control" name="date" bsDatepicker [bsConfig]="{dateInputFormat: 'MM/YYYY'}" style="width:200px" (onShown)="onOpenCalendar($event)">
+        </form>
+      </div>
+    </div>
+    <div class="row"  style="margin-bottom: 10px;float:right;">
+      <div class="col-12">
+        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter_billing('data')">{{'Search' | translate}}</button>
+        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="row" *ngIf="(componentIdentifier === 'censor_detail')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-sm-12 col-md-12 col-lg-12" >
+      <div class="row">
+        <div class="col-3">{{'Device' | translate}}</div>
+        <div  class="col-9">
+          <div>
+            <select id="dbselect" multiple="multiple">
+              <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+            </select>
+          </div> 
+        </div>
+        <div class="row"  style="margin-bottom: 10px;float:right;">
+        </div>
+      <div class="col-12">
+        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;margin-top: 20px; float: right;" md-raised-button (click)="censor_detail()">{{'Search' | translate}}</button>    
+      </div>
+    </div>
+    
+  </div>
+</div>
+<div class="row" *ngIf="(componentIdentifier === 'usersMaster')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-sm-12 col-md-12 col-lg-12" >
+    <div class="row">
+      <div class="col-4"><p>{{'Search By' | translate}} : </p></div>
+      <div class="col-8">
+        <div style="display: flex;">
+          <md-radio-group
+          aria-labelledby="example-radio-group-label"
+          class="example-radio-group"
+          [(ngModel)]="userFilterType">
+          <md-radio-button class="example-radio-button" *ngFor="let utype of userRadio" [value]="utype" (change)="userRadioButton()" style="margin-left: 5px">
+            {{utype}}
+          </md-radio-button>
+        </md-radio-group>
+        </div>
+      </div>
+    </div>
+      <div class="row" style="margin-top: 10px;">
+        <div class="col-3">{{'Phone' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;">
+            <select id="dbselectPhone" multiple="multiple">
+              <option *ngFor="let uPhone of userArr" [value]="uPhone._id">{{ uPhone.phone }}</option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div class="row" style="margin-top: 20px;">
+        <div class="col-3">{{'Name' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;" >
+            <select id="dbselectName" multiple="multiple">
+              <option *ngFor="let uName of userArr" [value]="uName._id">{{ uName.first_name ? uName.first_name : '--'}} {{uName.last_name?uName.last_name:'--'}}</option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
+        <div class="col-5">{{'Deleted users' | translate}}</div>
+        <div  class="col-7">
+          <div style="display: flex;float:right;">
+            <md-slide-toggle md-tooltip="Deleted Users" [(ngModel)]="deleteduser" (change)="userDeleted($event)"></md-slide-toggle> 
+          </div> 
+        </div>
+      </div>
+      <div  class="row" style="margin: 0;padding-bottom: 20px;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+          <!-- timefilter icons -->
+          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
+              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
+              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
+            </div>
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- from time label-->
+         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- from datetime picker -->
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- tolabel picker -->
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
+        </div>
+      </div>
+    <div class="row"  style="margin-bottom: 20px;float:right;">
+      <div class="col-12">
+        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
+        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="row" *ngIf="(componentIdentifier === 'deviceMaster')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-12">
+    <div class="row">
+      <div class="col-5"><p>{{'Search By' | translate}} : </p></div>
+      <div class="col-7">
+        <div style="display: flex;">
+          <md-radio-group
+          aria-labelledby="example-radio-group-label"
+          class="example-radio-group"
+          [(ngModel)]="deviceFilterType">
+          <md-radio-button class="example-radio-button" *ngFor="let dtype of deviceRadio" [value]="dtype" (change)="deviceRadioButton()" style="margin-left: 5px">
+            {{dtype}}
+          </md-radio-button>
+        </md-radio-group>
+        </div>
+      </div>
+    </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12" >
+      <div class="row" style="margin-top: 10px;">
+        <div class="col-3">{{'IMEI' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;">
+            <select id="dbselectIMEI" multiple="multiple">
+              <option *ngFor="let udid of deviceArr_1" [value]="udid._id">{{ udid.Device_ID }}</option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div class="row"  style="margin-top: 20px;">
+        <div class="col-3">{{'SIM' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;">
+            <select id="dbselectSIM" multiple="multiple">
+              <option *ngFor="let uname of deviceArr_1" [value]="uname.sim_number">{{ uname.sim_number ? uname.sim_number : '--'}} </option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
+        <div class="col-5">{{'Deleted Device' | translate}}</div>
+        <div  class="col-7">
+          <div style="display: flex;float:right;">
+            <md-slide-toggle md-tooltip="Deleted Device" [(ngModel)]="deleteddevice" (change)="deletedDevices($event)"></md-slide-toggle> 
+          </div> 
+        </div>
+      </div>
+      <div  class="row" style="margin: 0;padding-bottom: 20px;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+          <!-- timefilter icons -->
+          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
+              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
+              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
+            </div>
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- from time label-->
+         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- from datetime picker -->
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- tolabel picker -->
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
+        </div>
+      </div>
+    <div class="row"  style="margin-bottom: 20px;float:right;">
+      <div class="col-12">
+        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
+        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+
+  </div>
+  </div>
+
+</div>
+
+<!-- Device Renew Report------------------------------------ -->
+
+<div class="row" *ngIf="(componentIdentifier === 'deviceRenew')"
+  style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-12">
+    
+    <div class="row">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+
+        
+        <div class="row" style="margin-top: 10px;margin-bottom: 6px;">
+          <div class="col-3">{{'IMEI' | translate}}</div>
+          <div class="col-9">
+            <div style="display: flex;">
+              <select id="dbselectIMEI" multiple="multiple">
+                <option *ngFor="let udid of deviceArr_1" [value]="udid._id">{{ udid.Device_ID }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="row" style="margin-top: 10px;margin-bottom: 6px;">
+          <div class="col-3">{{'Type' | translate}}</div>
+          <div class="col-9">
+            <div style="display: flex;">
+              <select  style="width: -webkit-fill-available;" [(ngModel)]="renewalType">
+                <option *ngFor="let udid of type" [value]="udid.value"  >{{ udid.Name }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="row" style="margin-top: 20px;">
+          <div class="col-3">{{'SIM' | translate}}</div>
+          <div class="col-9">
+            <div style="display: flex;">
+              <select id="dbselectSIM" multiple="multiple">
+                <option *ngFor="let uname of deviceArr_1" [value]="uname.sim_number">{{ uname.sim_number ?
+                  uname.sim_number : '--'}} </option>
+              </select>
+            </div>
+          </div>
+        </div> -->
+        <!-- <div class="row" style="margin-top: 20px;margin-bottom: 20px;">
+          <div class="col-5">{{'Deleted Device' | translate}}</div>
+          <div class="col-7">
+            <div style="display: flex;float:right;">
+              <md-slide-toggle md-tooltip="Deleted Device" [(ngModel)]="deleteddevice"
+                (change)="deletedDevices($event)"></md-slide-toggle>
+            </div>
+          </div>
+        </div> -->
+        <div class="row" style="margin: 0;padding-bottom: 20px;">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+            <!-- timefilter icons -->
+            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
+              <button type="button" style="width:25%;border-right: 2px solid white;"
+                class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;"
+                class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' |
+                translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;"
+                class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
+              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7"
+                (click)="changeDate('month')">{{'Month' | translate}}</button>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+            <!-- from time label-->
+            <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+          </div>
+          <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+            <!-- from datetime picker -->
+            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
+              [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+          </div>
+        </div>
+        <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+            <!-- tolabel -->
+            <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
+          </div>
+          <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+            <!-- tolabel picker -->
+            <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
+              [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+          </div>
+        </div>
+        <div class="row" style="margin-bottom: 20px;float:right;">
+          <div class="col-12">
+            <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button
+              (click)="reportFilter('data')">{{'Search' | translate}}</button>
+            <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;"
+              md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+</div>
+
+
+<!-- -------------------------- -->
+
+
+
+
+<div class="row" *ngIf="(componentIdentifier === 'gps_master')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+  <div class="col-12">
+    <div class="row">
+      <div class="col-5"><p>{{'Search By' | translate}} : </p></div>
+      <div class="col-7">
+        <div style="display: flex;">
+          <md-radio-group
+          aria-labelledby="example-radio-group-label"
+          class="example-radio-group"
+          [(ngModel)]="deviceFilterType">
+          <md-radio-button class="example-radio-button" *ngFor="let dtype of deviceRadio1" [value]="dtype" (change)="deviceRadioButton()" style="margin-left: 5px">
+            {{dtype}}
+          </md-radio-button>
+        </md-radio-group>
+        </div>
+      </div>
+    </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12" >
+      <div class="row" style="margin-top: 10px;">
+        <div class="col-3">{{'IMEI' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;">
+            <select id="dbselectIMEI" multiple="multiple">
+              <option *ngFor="let udid of deviceArr_1" [value]="udid.Device_ID">{{ udid.Device_ID }}</option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div class="row"  style="margin-top: 20px;margin-bottom: 20px;">
+        <div class="col-3">{{'Vahicle Name' | translate}}</div>
+        <div  class="col-9">
+          <div style="display: flex;">
+            <select id="dbselectVehicleName" multiple="multiple">
+              <option *ngFor="let uname of deviceArr_1" [value]="uname.Device_ID">{{ uname.Name ? uname.Name : '--'}} </option>
+            </select>
+          </div> 
+        </div>
+      </div>
+      <div  class="row" style="margin: 0;padding-bottom: 20px;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+          <!-- timefilter icons -->
+          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;" >
+              <button  type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4" (click)="changeDate('today')">{{'Today' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5" (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+              <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6" (click)="changeDate('week')">{{'Week' | translate}}</button>
+              <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7" (click)="changeDate('month')">{{'Month' | translate}}</button>
+            </div>
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- from time label-->
+         <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- from datetime picker -->
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
+        </div>
+      </div>
+      <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>       
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+          <!-- tolabel picker -->
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >              
+        </div>
+      </div>
+    <div class="row"  style="margin-bottom: 20px;float:right;">
+      <div class="col-12">
+        <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="reportFilter('data')">{{'Search' | translate}}</button>
+        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+
+  </div>
+  </div>
+
+</div>
+
+<div class="row" *ngIf="(componentIdentifier === 'deviceList')" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+<div class="col-12">
+<div class="row" style="margin: 0;padding-bottom: 20px;">
+  <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+  <md-input-container style="width: inherit;background: #efecec;height: 46px;">
+    <input mdInput placeholder="Search Distributer" style="color: black;" [mdAutocomplete]="tdAutoedit" name="state"
+      #state="ngModel" [(ngModel)]="distributerValue" (ngModelChange)="filterStates(distributerValue)">
+    <md-autocomplete #tdAutoedit="mdAutocomplete">
+      <md-option *ngFor="let dist of distributerSelect" [value]="dist.user_type">
+        <span>{{ dist.user_type }}</span>
+      </md-option>
+    </md-autocomplete>
+  </md-input-container>
+  </div>
+  </div>
+  
+  <div class="row" style="margin: 0;padding-bottom: 20px;">
+<div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+  <md-select [(ngModel)]="liecenceStatus" style="width: inherit;background: #efecec;"
+    placeholder="--{{'Licence Type' | translate}}--" ngDefaultControl (change)="licenceStatus($event)">
+    <md-option *ngFor="let liecenceStatus of liecenceTypeArray; let i = index" style="padding-left: 20px;"
+      [value]="liecenceStatus.name">
+      {{liecenceStatus.name}}
+    </md-option>
+  </md-select>
+  </div>
+  </div>
+
+  <div class="row" style="margin: 0;padding-bottom: 20px;">
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+      <!-- timefilter icons -->
+      <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%;">
+        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_4"
+          (click)="changeDate('today')">{{'Today' | translate}}</button>
+        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_5"
+          (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+        <button type="button" style="width:25%;border-right: 2px solid white;" class="btn btn-secondary animateClass_6"
+          (click)="changeDate('week')">{{'Week' | translate}}</button>
+       
+          <div class="btn-group dropright">
+            <button type="button" class="btn btn-secondary dropdown-toggle animateClass_7" data-toggle="dropdown" aria-haspopup="true"
+              aria-expanded="false">
+              Month
+            </button>
+            <div class="dropdown-menu" >
+              <a class="dropdown-item" *ngFor="let month of months" (click)="selectMonth(month)">{{month.name}}</a>
+            </div>
+          </div>
+
+
+       
+          <!-- <button type="button" style="width:25%;" class="btn btn-secondary animateClass_7"
+          (click)="changeDate('month')">{{'Month' | translate}}</button> -->
+      </div>
+    </div>
+  </div>
+  <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+      <!-- from time label-->
+      <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <!-- from datetime picker -->
+      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+        [(ngModel)]="from_date" type="text">
+    </div>
+  </div>
+  <div class="row" style="margin: 0;padding-bottom: 20px;padding-right: 3px;">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+      <!-- tolabel -->
+      <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <!-- tolabel picker -->
+      <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+        name="todate" [(ngModel)]="to_date" type="text">
+    </div>
+  </div>
+  <div class="row" style="margin-bottom: 20px;float:right;">
+    <div class="col-12">
+      <button style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;" md-raised-button
+        (click)="reportFilter('data')">{{'Search' | translate}}</button>
+      <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button
+        (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+    </div>
+  </div>
+
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/report-filter/report-filter.component.scss b/src/app/device-report/report-filter/report-filter.component.scss
new file mode 100644
index 0000000..501b467
--- /dev/null
+++ b/src/app/device-report/report-filter/report-filter.component.scss
@@ -0,0 +1,4 @@
+col-sm-9 col-md-9 col-lg-9 .ms-parent{
+ width:100% !important;
+}
+
diff --git a/src/app/device-report/report-filter/report-filter.component.spec.ts b/src/app/device-report/report-filter/report-filter.component.spec.ts
new file mode 100644
index 0000000..e00306a
--- /dev/null
+++ b/src/app/device-report/report-filter/report-filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportFilterComponent } from './report-filter.component';
+
+describe('ReportFilterComponent', () => {
+  let component: ReportFilterComponent;
+  let fixture: ComponentFixture<ReportFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/report-filter/report-filter.component.ts b/src/app/device-report/report-filter/report-filter.component.ts
new file mode 100644
index 0000000..5faa85f
--- /dev/null
+++ b/src/app/device-report/report-filter/report-filter.component.ts
@@ -0,0 +1,1150 @@
+import { Component, OnInit, Output, EventEmitter, Input, OnChanges } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+declare var $:any;
+import * as moment from 'moment-timezone';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'app-report-filter',
+  templateUrl: './report-filter.component.html',
+  styleUrls: ['./report-filter.component.scss']
+})
+export class ReportFilterComponent implements OnInit {
+  from_date =new Date();
+  to_date = new Date();
+  liecenceStatus="New"
+  distributerValue
+  type=[{Name:'Renewed',value:'renewed'},{Name:'Renewal Pending',value:'pending'},{Name:'Expired',value:'expired'}]
+  renewalType='renewed'
+  liecenceTypeArray=[
+    {name:"New",value:"new"},
+    {name:"Renewal",value:"renewal"}
+  ]
+  months=[{name:'January',value:0},{name:'February',value:1},{name:'March',value:2},{name:'April',value:3},{name:'May',value:4},{name:'June',value:5},
+          {name:'July',value:6},{name:'August',value:7},{name:'September',value:8},{name:'October',value:9},{name:'November',value:10},{name:'December',value:11}]
+  bsConfig: Partial<BsDatepickerConfig>;
+  @Output() onReportFIlter: EventEmitter<any> = new EventEmitter<any>();
+  superAdmin: any;
+  disDataFIlter=[]
+  fs: any;
+  emailid: any;
+  ls: any;
+  or: any;
+  useridd: any;
+  bilingMonth = new Date();
+  mb: any;
+  custtype: any;
+  devicesss: any;
+  minIdleTime:any=5;
+  showXL : Boolean =true; 
+  filterRtype = 'Time';
+  userFilterType='Name';
+  deviceFilterType='IMEI';
+  distributers=[]
+  reportType = ['Time','Daily','Trip'];
+  userRadio= ['Phone', 'Name'];
+  deviceRadio= ['IMEI','SIM'];
+  deviceRadio1= ['IMEI','NAME'];
+  billingType = [{
+    selectedValue:'Monthly',
+    value: 'Monthly'
+  },
+
+  {
+    selectedValue:'Yearly',
+    value: 'Yearly'
+  }]
+
+  billing_status =[
+    {
+      selectedValue:'Paid',
+      value: 'Paid'
+    },
+    {
+      selectedValue:'Pending',
+      value: 'Pending'
+    }
+
+  ]
+  finall: any;
+  deleteduser:boolean=false;
+  deleteddevice:boolean=false;
+  options: any=[{selectedValue : '',value:''}];
+  cust: boolean;
+  logoutbut: boolean;
+  dealer: boolean;
+  showLoader:boolean=true;
+  colorTheme = 'theme-dark-blue';
+  optionLabel:String = 'Vehicle';
+  showFromDate : Boolean = true;
+  lableVariable = 'To' ; 
+  stoppage_duration =[{value: "0",view_value:"All Data"},{value: "1",view_value:"Less Than 2 Hours"},{value: "2",view_value:"More Than 2 Hours"},{value: "6",view_value:"More Than 6 Hours"},{value: "12",view_value:"More Than 12 Hours"},{value: "24",view_value:"More Than 24 Hours"}];
+  selectedStopageDuration="0"
+  @Input() componentIdentifier: string;
+  constructor(private contactService: ContactService,private router:Router) { 
+     console.log("UEJJSKHHH",this.router.url);
+    
+    if(this.router.url=="/NotificationForCC"){
+      this.componentIdentifier=="notification_master"
+      
+    }
+    console.log(this.componentIdentifier,this.selectedStopageDuration);
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+  }
+
+  ngOnInit() {
+    this.loadropdown();
+    this.getSuperAdminList()
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.from_date = new Date(fTime);
+    console.log('this.componentIdentifier',this.componentIdentifier);
+
+    if(this.componentIdentifier === 'summary_report'){
+   
+      fTime.setDate(fTime.getDate()-1);
+     
+      this.from_date = new Date(fTime);
+  
+      var td  = new Date().setHours(23,59,59,999);
+      this.to_date = new Date(td);
+      this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYYY' }, { containerClass: this.colorTheme });
+
+    }
+
+    if((this.componentIdentifier === 'dayWiseReport')){
+      var yt = moment().subtract(1, 'days');
+      var ptt = new Date(yt).setHours(0, 0, 0);
+      var ttt = new Date(yt).setHours(23,59,59);
+      this.from_date = new Date(ptt);
+      this.to_date = new Date(ttt);
+      console.log('this.from_date', this.from_date);
+      console.log('this.to_date', this.to_date);
+    }
+   
+
+    if(this.componentIdentifier=="deviceList"){
+      var today = new Date();
+      var startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.from_date=startDate
+    }
+
+    if(this.componentIdentifier === 'daily_report'){
+      this.showFromDate = false;
+      this.lableVariable = 'Select Date';
+      
+    }
+
+
+    if((this.componentIdentifier === 'fuel_report_graph') || (this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'temp_report_graph')){
+      this.showXL = false;
+    }
+   
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+ 
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if(this.componentIdentifier === 'geofence_report'){
+      this.optionLabel = 'geofences'; 
+      this.getgeofence();
+    }else if(this.componentIdentifier === 'route_violation_report'){
+      this.routeViolationArr()
+    }else if(this.componentIdentifier === 'billing_detail'){
+      this.getUser();
+
+    }else{
+      this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+        data => {
+          this.devicesss = data
+       
+          this.finall = (this.devicesss.devices);
+          this.options = [];
+        
+          for(let i=0;i<this.devicesss.devices.length;i++){
+  
+            // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+              let a ={
+                value : this.devicesss.devices[i].Device_Name,
+                viewValue:this.devicesss.devices[i].Device_Name,
+                did:this.devicesss.devices[i].Device_ID,
+                id:this.devicesss.devices[i]._id,
+                user:this.devicesss.devices[i].user,
+                // email: this.devicesss.devices[i].Email_ID,
+                // deviceType: this.devicesss.devices[i].type_of_device,      
+              }
+              
+             if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'distance_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report')){
+                a['selectedValue'] = this.devicesss.devices[i]._id ; 
+              }else if ((this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'over_speed')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'device_sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_report')|| (this.componentIdentifier === 'dayWiseReport')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master')){
+                a['selectedValue'] = this.devicesss.devices[i].Device_ID ; 
+              }
+              this.options.push(a);
+            // }
+          }
+
+          if(this.componentIdentifier == 'poi_report'){
+            this.getPOI();
+          }else{
+            this.loadropdown();
+          }
+      
+
+        
+            // console.log("ignition option",this.options);
+            let that = this;
+            // setTimeout(()=>{ 
+            // },100)  
+        
+        });
+
+      
+
+    }
+  
+
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     } 
+     
+     if(this.componentIdentifier == 'usersMaster'){  
+      this.getAllUser();
+     }
+
+     if((this.componentIdentifier == 'deviceRenew')||(this.componentIdentifier == 'deviceMaster')||(this.componentIdentifier == 'gps_master')){  
+      this.getAllDevice();
+     }
+     if(this.componentIdentifier === 'notification_master'){
+          this.getDeviceForNotif();
+     }
+  
+     
+  }
+
+  loadropdown() {
+    let that = this;
+    var placeholderval;
+    if(this.componentIdentifier === 'geofence_report'){
+      placeholderval = 'Select Geofence .....'
+    }
+    if((this.componentIdentifier === 'distance_report')||(this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'censor_detail')){
+      placeholderval = 'Select Vehicles .....'
+    }
+    if(this.componentIdentifier === 'billing_detail'){
+      placeholderval = 'Select User .....'
+
+    }
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+  
+    // ||(this.componentIdentifier === 'notification_master')
+    if((this.componentIdentifier === 'geofence_report')||(this.componentIdentifier == 'usersMaster')||(this.componentIdentifier == 'deviceRenew')||(this.componentIdentifier == 'deviceMaster')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'billing_detail')||(this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'device_sos_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier ==='gps_master')){
+      console.log(placeholderval);
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 230,
+          placeholder: placeholderval,
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+    
+       that.showLoader = false;
+      }, 100);
+      
+
+      if(this.componentIdentifier === 'billing_detail'){
+        setTimeout(() => {
+
+          $('#dbselect_billtype').multipleSelect({
+            width: 200,
+            placeholder: "Select Type",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+       
+  
+          $('#dbselect_billStatus').multipleSelect({
+            width: 200,
+            placeholder: "Select Status",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+        }, 100);
+      }
+
+      if(this.componentIdentifier == 'usersMaster'){
+        setTimeout(() => {
+          $('#dbselectPhone').multipleSelect({
+            width: 250,
+            placeholder: "Customer Phone",
+            filter: true,
+            single: true,
+            selectAll: false  ,
+         
+          }) 
+
+          $("#dbselectPhone").multipleSelect("disable");
+    
+          $('#dbselectName').multipleSelect({
+            width: 250,
+            placeholder: "Customer Name",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+        },100)
+       }
+
+       if(this.componentIdentifier == 'deviceMaster'){
+
+        setTimeout(() => {
+          $('#dbselectIMEI').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle IMEI",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+          $('#dbselectSIM').multipleSelect({
+            width: 250,
+            placeholder: "Sim Number",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+
+          $("#dbselectSIM").multipleSelect("disable");
+    
+        },100)
+
+       }
+       
+
+       if(this.componentIdentifier == 'gps_master' || this.componentIdentifier=='deviceRenew'){
+
+        setTimeout(() => {
+          $('#dbselectIMEI').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle IMEI",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+          $('#dbselectVehicleName').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle Name",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+
+          $("#dbselectVehicleName").multipleSelect("disable");
+    
+        },100)
+
+       }
+
+     
+
+      
+    }else{
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 200,
+          placeholder: 'Select Vehicle.....',
+          filter: true,
+   
+        })  
+      }, 100);
+
+    }
+
+
+
+    if(this.componentIdentifier == 'poi_report'){
+      setTimeout(() => {
+        $('#dbselect_1').multipleSelect({
+          width: 200,
+          placeholder: "Select POI",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+      }, 100);
+    }
+
+  
+
+    if(this.componentIdentifier == 'stoppage_report'){
+      setTimeout(() => {
+        $('#dbselect_2').multipleSelect({
+          width: 200,
+          placeholder: "Select Duration",
+          filter: true,
+          single: true,
+          selectAll: false,  
+        }) 
+      }, 200);
+    }
+
+    if(this.componentIdentifier == 'route_violation_report'){
+      setTimeout(() => {
+        $('#dbselect_3').multipleSelect({
+          width: 200,
+          placeholder: "Select Route",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+      }, 100);
+    }
+
+    if(this.componentIdentifier == 'notification_master'){
+      setTimeout(() => {
+        $('#dbselect_notif').multipleSelect({
+          width: 200,
+          placeholder: "Select type",
+          filter: true,
+          // single: true,
+          // selectAll: false  
+        }) 
+
+        $('#dbselectNotif').multipleSelect({
+          width: 200,
+          placeholder: "Select Vehicle",
+          filter: true,
+          // single: true,
+          // selectAll: false  
+        }) 
+      }, 100);
+
+    
+    }
+
+
+    // if(this.componentIdentifier == 'usersMaster'){
+      
+    //   $('#dbselectPhone').multipleSelect({
+    //     width: 200,
+    //     placeholder: "Customer Phone",
+    //     filter: true,
+    //     single: true,
+    //     selectAll: false  
+    //   }) 
+
+    //   $('#dbselectName').multipleSelect({
+    //     width: 200,
+    //     placeholder: "Customer Name",
+    //     filter: true,
+    //     single: true,
+    //     selectAll: false  
+    //   }) 
+    // }
+    // var triggerReport = setTimeout(()=>{
+    //   clearTimeout(triggerReport);
+    //   var data = '';
+    //   if(that.componentIdentifier != 'fuel_report_graph'){
+    //     that.reportFilter(data);
+    //   }
+    
+    // },200)
+   
+  }
+
+
+  deviceArr = [];
+  deviceFilterArr :any;
+   reportFilter(data): void {
+    this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log('this.deviceArr',this.deviceArr);
+    var that  = this;
+     var filter = {
+       fromDate : this.from_date,
+       toDate : this.to_date,
+       deviceArr : this.deviceArr
+     }
+     if (this.componentIdentifier == 'fuel_consumption_report') {
+       filter['filter_type'] = this.filterRtype;
+          var tempArr = [];
+          // for(var i=0;i<this.options.length;i++){
+          //   for(var j=0;j<this.deviceArr.length;j++){
+          //     this.options[i].id=
+          //   }
+          // }
+          var dataArr = this.options.filter(function (item) {  
+            for(var i=0;i< that.deviceArr.length;i++){
+              if(item.id == that.deviceArr[i]){   
+                  return item;
+                }             
+            } 
+          });
+       
+          filter.deviceArr = dataArr ; 
+     }
+
+     if(this.componentIdentifier === 'idle_report'){
+      filter['minidleT'] = this.minIdleTime ; 
+     }
+
+     if(this.componentIdentifier === 'poi_report'){
+      let poi_id =  $('#dbselect_1').multipleSelect('getSelects','value');
+      filter['poi_id'] = poi_id ; 
+     }
+
+     
+     if(this.componentIdentifier === 'stoppage_report'){
+      let duration = [];
+      duration =  $('#dbselect_2').multipleSelect('getSelects','value');
+      filter['duration'] = duration ; 
+     }
+
+     if(this.componentIdentifier === 'route_violation_report'){
+      let vroute = [];
+      vroute =  $('#dbselect_3').multipleSelect('getSelects','value');
+      var routeArr = this.routeArr.filter(function (item) {  
+        if(item._id == vroute[0]){   
+          return item;
+        }             
+    });
+      filter['route'] = routeArr ; 
+     }
+
+     if(this.componentIdentifier === 'notification_master'){
+      let notif_type = [];
+      notif_type =  $('#dbselect_notif').multipleSelect('getSelects','value');
+
+      filter.deviceArr =  $('#dbselectNotif').multipleSelect('getSelects','value');
+
+      // var devIwner = this.notifDevArr.filter((u)=>{
+      //   filter.deviceArr.
+      // })
+  
+      filter['notitype'] = notif_type ; 
+     }
+
+      if(this.componentIdentifier === 'deviceList'){
+        filter['liecenceStatus'] = this.liecenceStatus ;
+        filter['distributerSelect'] = this.distributerSelect ;
+  //       liecenceStatus="new"
+  // distributerValue
+      }
+
+     if(this.componentIdentifier === 'usersMaster'){
+      var userID = $('#dbselectPhone').multipleSelect('getSelects','value'); 
+      var userID1 = $('#dbselectName').multipleSelect('getSelects','value'); 
+      if((userID != undefined)&&(this.userFilterType == 'Phone')){
+        filter['userId'] = userID;
+      }
+      if((userID1 != undefined)&&(this.userFilterType === 'Name')){
+        filter['userId'] = userID1;
+      }
+        filter['deletedUser']  = this.deleteduser;
+     }
+
+     if((this.componentIdentifier === 'deviceMaster')||(this.componentIdentifier === 'gps_master') ||(this.componentIdentifier === 'deviceRenew')){
+      var DID = $('#dbselectIMEI').multipleSelect('getSelects','value'); 
+      if((this.componentIdentifier === 'deviceMaster')){
+        var DID1 = $('#dbselectSIM').multipleSelect('getSelects','value'); 
+      }else{
+        var DID1 = $('#dbselectVehicleName').multipleSelect('getSelects','value'); 
+      }
+    
+      if(((DID != undefined)&&(this.deviceFilterType == 'IMEI'))|| ((DID != undefined)&&(this.componentIdentifier === 'deviceRenew')) ){
+        filter['deviceId'] = DID;
+        filter['type'] = 'IMEI';
+      }
+      if((DID1 != undefined)&&(this.deviceFilterType === 'SIM')){
+        filter['deviceId'] = DID1;
+        if(this.componentIdentifier === 'deviceMaster'){
+          filter['type'] = 'SIM';
+        }else{
+          filter['type'] = 'VNAME';
+        }
+    
+
+      }
+      console.log('this.deleteddevice',this.deleteddevice);
+        filter['deletedDevice']  = this.deleteddevice;
+        if(this.componentIdentifier === 'deviceRenew'){
+          filter['type']=this.renewalType
+        }
+       
+     }
+
+
+    this.onReportFIlter.emit(filter);
+}
+
+reportFilter_billing(){
+  var userObj =  $('#dbselect').multipleSelect('getSelects','value'); 
+  var billingType = $('#dbselect_billtype').multipleSelect('getSelects','value'); 
+  var billingStatus = $('#dbselect_billStatus').multipleSelect('getSelects','value'); 
+  
+  var filter = {
+    date : this.modelDate,
+    type : billingType,
+    status : billingStatus,
+    user :userObj
+  }
+
+  console.log(filter);
+
+  this.onReportFIlter.emit(filter);
+}
+
+
+  
+changeDate(dateid) {
+
+  if (dateid == 'today') {
+    var td = new Date();
+    this.from_date = new Date(td.setHours(0, 0, 0));
+    this.to_date = new Date();
+    console.log('this.from_date', this.from_date);
+  }
+  if (dateid == 'yesterday') {
+    var yt = moment().subtract(1, 'days');
+    var ptt = new Date(yt).setHours(0, 0, 0);
+    var ttt = new Date(yt).setHours(23,59,59);
+    this.from_date = new Date(ptt);
+    this.to_date = new Date(ttt);
+    console.log('this.from_date', this.from_date);
+    console.log('this.to_date', this.to_date);
+  }
+  if (dateid == 'week') {
+    var wd = moment().startOf('week')
+    this.from_date = new Date(wd);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+  if (dateid == 'month') {
+    var md = moment().startOf('month').format();
+    this.from_date = new Date(md);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+}
+
+exportExel(){
+  this.onReportFIlter.emit('getExcel');
+}
+geofenceArr = [];
+getgeofence(){
+  this.geofenceArr=[];
+  this.contactService.getallgeofence(this.useridd).subscribe(
+    data => {
+      this.options = data ;
+      for(var i = 0; i<this.options.length;i++){
+        this.options[i]['selectedValue'] = this.options[i]._id;
+        this.options[i]['value']  = this.options[i].geoname ; 
+      }
+      let that = this;
+      setTimeout(()=>{
+        that.loadropdown();
+      },100)  
+      console.log('this.options',this.options);
+    });
+}
+
+
+getUser(){
+  this.contactService.getDistributerList(this.useridd).subscribe(
+    data => {
+      console.log('data',data);
+      this.options = data ;
+      for(var i = 0; i<this.options.length;i++){
+        this.options[i]['selectedValue'] = this.options[i]._id;
+        this.options[i]['value']  = this.options[i].first_name + ' '  +  this.options[i].last_name; 
+      }
+      let that = this;
+      setTimeout(()=>{
+        that.loadropdown();
+      },100)  
+      console.log('this.options',this.options);
+    });
+
+}
+
+route_detail_show=[];
+poiArr=[];
+getPOI(){
+  // console.log("Mapping history !!!");
+  this.contactService.getPOI(this.useridd)
+  .subscribe(res=>{
+  //   console.log("routedet",res);
+    this.route_detail_show=res;
+
+    var poiObj; 
+
+    for(var i=0;i<this.route_detail_show.length;i++){
+      poiObj ={
+          poiname: this.route_detail_show[i].poi.poiname,
+          id : this.route_detail_show[i]._id
+        }
+
+        this.poiArr.push(poiObj);
+    }
+
+  
+    this.loadropdown();
+  //   console.log("routeDetails=>",this.poiArr);
+  },err=>{
+    this.loadropdown();
+  })
+}
+
+routeArr =[];
+
+routeViolationArr(){
+  var that =this;
+  this.contactService.routeViolation(this.useridd).subscribe(
+    res => {
+      
+      var route =[];
+      this.routeArr =[];
+      route = res;       
+      for(let i=0;i<route.length;i++){      
+          this.routeArr.push(route[i]);   
+      }
+        console.log(this.routeArr);
+
+        setTimeout(()=>{
+          that.loadropdown();
+        },100)  
+    });
+  
+}
+
+modelDate:any=new Date();
+
+onOpenCalendar(container) {
+  var that= this;
+  container.monthSelectHandler = (event: any): void => {
+    container._store.dispatch(container._actions.select(event.date));
+    console.log(that.modelDate);
+  };     
+    container.setViewMode('month');
+   
+ }
+
+ censor_detail(){
+  var deviceObj =  $('#dbselect').multipleSelect('getSelects','value'); 
+ 
+  console.log(deviceObj);
+  var filter = {
+   device : deviceObj
+  }
+
+  console.log(filter);
+
+  this.onReportFIlter.emit(filter);
+
+ }
+
+ userArr=[];
+ notifDevArr=[];
+ getAllUser(){
+   var that = this;
+   var userObj = {
+    "draw": 1,
+    "columns": [
+      {"data": "_id"},
+      {
+        "data": "first_name"},
+      { "data": "phone"},
+      {"data": "last_name"},
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "desc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": {
+      "supAdmin": this.useridd,
+      "DeletedUser": {
+        "$exists": false
+      }
+    }
+  }
+
+  if(this.deleteduser === true){
+        userObj.find.DeletedUser.$exists = true;
+  }
+  
+  var suburl = "/users/datatable";
+   that.contactService.post(suburl, userObj).subscribe(resp => {
+     this.userArrFunc(resp);
+   },err=>{
+     console.log(err);
+
+   })
+ }
+
+ userArrFunc(uOb){
+  this.userArr=[];
+  this.userArr = uOb.data;
+  console.log('userArr',this.userArr);
+  setTimeout(()=>{
+    this.loadropdown();
+    // $("#dbselectPhone").multipleSelect("disable");
+  },100)  
+
+ }
+
+
+ getAllDevice(){
+  
+  var findObj={};
+   if(this.custtype === true){
+    findObj = {
+      "$and" : [{"Dealer":this.useridd},{ "deletedDevice": {"$exists": this.deleteddevice}}]
+    };
+   }else{
+    findObj = {
+      "$and" : [{"supAdmin":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    };
+   }
+
+
+
+  var devObj = {
+    "draw": 1,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "Device_Name"
+      },
+     
+    
+      {
+        "data": "Device_ID"
+      },
+  
+      {
+        "data": "sim_number"
+      },
+   
+ 
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": findObj
+  }
+
+  // if(this.deleteddevice === true){
+  //   console.log("devObj.find['findObj']",devObj.find['findObj']);
+    
+  //   devObj.find['$and'][1]['deletedDevice']['$exists'] = true;
+  // }
+  console.log('devObj.find',devObj.find);
+
+  var suburl = "/devices/datatable";
+ 
+  this.contactService.post(suburl, devObj).subscribe(resp => {
+    console.log('device api respoonse=>',resp);
+    this.deviceArrFunc(resp);
+  })
+
+ }
+ getDeviceForNotif(){
+  
+  var findObj={};
+   if(this.custtype === true){
+    findObj = {
+      "$and" : [{"Dealer":this.useridd},{ "deletedDevice": {"$exists": this.deleteddevice}}]
+    };
+   } else if(this.superAdmin === true){
+    findObj = {
+      "$and" : [{"supAdmin":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    }
+   }else{
+    findObj = {
+      "$and" : [{"user":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    }
+   }
+
+
+  var devObj = {
+    "draw": 1,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "Device_Name"
+      },
+     
+    
+      {
+        "data": "Device_ID"
+      },
+  
+      {
+        "data": "sim_number"
+      },
+      {
+        "data": "user"
+      },
+   
+ 
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": findObj
+  }
+
+  // if(this.deleteddevice === true){
+  //   console.log("devObj.find['findObj']",devObj.find['findObj']);
+    
+  //   devObj.find['$and'][1]['deletedDevice']['$exists'] = true;
+  // }
+  console.log('devObj.find',devObj.find);
+
+  var suburl = "/devices/datatable";
+ 
+  this.contactService.post(suburl, devObj).subscribe(resp => {
+    console.log('device api respoonse=>',resp);
+    this.deviceArrFunc1(resp);
+    // notifDevArr
+  })
+
+ }
+
+
+
+ deviceArr_1:any=[]
+ deviceArrFunc(dOb){
+  this.deviceArr_1=[];
+  this.deviceArr_1 = dOb.data;
+  console.log('deviceArr_1',this.deviceArr_1);
+  var that= this;
+  setTimeout(()=>{
+    that.loadropdown();
+   
+  },100)  
+
+ }
+
+ deviceArrFunc1(dOb){
+  this.notifDevArr=[];
+  this.notifDevArr = dOb.data;
+  console.log('deviceArr_1',this.deviceArr_1);
+  var that= this;
+  setTimeout(()=>{
+    that.loadropdown();
+   
+  },100)  
+
+ }
+ userRadioButton(){
+  console.log('userFilterType',this.userFilterType);
+  // userRadio= ['Phone', 'Name'];
+  // deviceRadio= ['IMEI','SIM'];
+  if(this.userFilterType === 'Phone'){
+    $("#dbselectPhone").multipleSelect("disable");
+    $("#dbselectName").multipleSelect("enable");
+  }
+  if(this.userFilterType === 'Name'){
+   
+    $("#dbselectName").multipleSelect("disable");
+    $("#dbselectPhone").multipleSelect("enable");
+  }
+
+ }
+
+
+ deviceRadioButton(){
+  console.log('userFilterType',this.deviceFilterType);
+  if(this.deviceFilterType === 'IMEI'){
+    $("#dbselectIMEI").multipleSelect("disable");
+    $("#dbselectSIM").multipleSelect("enable");
+  }
+  if(this.deviceFilterType === 'SIM'){
+    $("#dbselectSIM").multipleSelect("disable");
+    $("#dbselectIMEI").multipleSelect("enable");
+  
+  }
+ }
+ userDeleted(ev){
+   console.log('event=>',ev);
+   this.deleteduser = ev.checked ;
+      this.getAllUser();
+ }
+
+ deletedDevices(ev1){
+   this.deleteddevice = ev1.checked ;
+   this.getAllDevice();
+ }
+
+//  callMethod(id) {
+  
+//   if(id == 'grouped'){
+//     $("#dbselect").multipleSelect("disable");
+   
+//   }else{
+//     $("#dbselect").multipleSelect("enable");
+//   }
+
+// }
+
+
+notificationArr= [
+  {view:'Overspeed',value:'overspeed'}, {view:'Ignition',value:'IGN'}, {view:'Point of intrest',value:'Route'}, {view:'Geofence',value:'Geo-Fence'}, {view:'Maxstoppage',value:'MAXSTOPPAGE'}, {view:'Fuel',value:'Fuel'}, {view:'AC',value:'AC'}, {view:'Route POI',value:'route-poi'}, {view:'Power',value:'power'}, {view:'Panic button',value:'SOS'}, {view:'Relay',value:'immo'},{view:'Parking',value:'theft'}
+]
+
+getSuperAdminList(){
+    console.log("KJDKJDKJKDJKJKDJD");
+    
+    this.contactService.getSuperAdminList().subscribe(res=>{
+      console.log(res);
+      this.distributers=res;
+       var loadinguser1 = {
+              user_type: "All",
+              _id: "All User"
+            }
+            for(var i=0;i<this.distributers.length;i++){
+              loadinguser1 = {
+                user_type:  this.distributers[i].first_name + " " + this.distributers[i].last_name,
+                _id: this.distributers[i]._id
+              }
+              this.disDataFIlter.push(loadinguser1);
+            }
+      
+    })
+  }
+
+  distributerSelect = [];
+  filterStates(usr1) {
+    // console.log("userObj=>",usr);
+    if(usr1.length == 0){
+      this.distributerSelect =[];
+    }
+    
+    if (usr1) {
+      console.log("user=>",usr1);
+      const filterdealerValue:any = usr1;
+      this.distributerSelect=[];
+       this.distributerSelect = this.disDataFIlter.filter(function(ppp){
+       console.log(ppp);
+       
+        var t = ppp.user_type.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+      //  this.option = this.options[i];
+      console.log("India1");
+        return t > -1;    
+      });
+        console.log(this.distributerSelect);
+        // if(this.distributerSelect.length==this.disDataFIlter.length){
+        //   this.getdev()
+        // }
+        if(this.distributerSelect.length === 1){
+          // this.getSuperAdminVehicles(this.distributerSelect);
+
+        }else{
+          // this.getdev()
+        }
+        return this.distributerSelect;
+    }
+  
+  }
+
+ licenceStatus(ev){
+    console.log(this.liecenceStatus,ev);
+    // this.getdev();
+    
+  }
+
+  selectMonth(month){
+    console.log(month);
+    var date=new Date("1/"+month.value+"/"+moment().year());
+    console.log(new Date(date));
+    
+     var md = new Date(moment().startOf('month').format());
+     var ed= new Date(moment().endOf('month').format());
+    this.from_date=new Date(md.setMonth(month.value));
+    this.to_date=new Date(new Date(ed.setMonth(month.value)));
+    console.log(this.to_date.getMonth(),this.to_date.getMonth()!=(month.value+1));
+    
+    if(!(this.to_date.getMonth()==(month.value+1))){
+      console.log(this.to_date.getMonth(),month);
+      
+    }else{
+      this.to_date.setDate(this.to_date.getDate()-this.to_date.getDate())
+      console.log("IN ELSE",this.to_date);
+      
+    }
+    // this.to_date.setDate(this.to_date.getDate()-1)
+
+    // console.log(new Date(this.to_date.getFullYear(), date.getMonth(), 0).getDate())
+    console.log("startDate=",md.toISOString(),ed.toISOString());
+    // this.to_date = new Date();
+    
+  }
+
+}
+
+
+
diff --git a/src/app/device-report/route-violation/route-violation.component.html b/src/app/device-report/route-violation/route-violation.component.html
new file mode 100644
index 0000000..c25a0b8
--- /dev/null
+++ b/src/app/device-report/route-violation/route-violation.component.html
@@ -0,0 +1,100 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Route Violation Report' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: center;">{{'Route' | translate}}</th>
+                      <th style="text-align: center;">{{'Location' | translate}}</th>
+                      <th style="text-align: center;">{{'Datetime' | translate}}</th> 
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+      <!-- <app-all-menus></app-all-menus> 
+  <div style="float:left; width: 100%;min-height:100vh;padding-top:6%">
+    <p class="headStyle">{{'Route Violation Report' | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" placeholder="--{{'Select Route' | translate}}--"  [(ngModel)]="option" ngDefaultControl>
+            <md-option *ngFor="let option of options" [value]="option">
+              {{ option.name }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button md-raised-button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" (click)="route_vioation(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button md-raised-button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table id="test" class="table table-striped table-hover "style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align: center;">{{'Route' | translate}}</th>
+          <th style="text-align: center;">{{'Location' | translate}}</th>
+          <th style="text-align: center;">{{'Datetime' | translate}}</th>        
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let device of route">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.track?device.track.name:'NA'}}</td>
+          <td style="cursor:pointer">{{device.address}}</td>
+          <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ -->
diff --git a/src/app/device-report/route-violation/route-violation.component.scss b/src/app/device-report/route-violation/route-violation.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/route-violation/route-violation.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/route-violation/route-violation.component.spec.ts b/src/app/device-report/route-violation/route-violation.component.spec.ts
new file mode 100644
index 0000000..20fe698
--- /dev/null
+++ b/src/app/device-report/route-violation/route-violation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteViolationComponent } from './route-violation.component';
+
+describe('RouteViolationComponent', () => {
+  let component: RouteViolationComponent;
+  let fixture: ComponentFixture<RouteViolationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteViolationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteViolationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/route-violation/route-violation.component.ts b/src/app/device-report/route-violation/route-violation.component.ts
new file mode 100644
index 0000000..e4e25e5
--- /dev/null
+++ b/src/app/device-report/route-violation/route-violation.component.ts
@@ -0,0 +1,506 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+declare var google: any;
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-route-violation',
+  templateUrl: './route-violation.component.html',
+  styleUrls: ['./route-violation.component.scss']
+})
+export class RouteViolationComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  tabelObj:any;
+  superAdmin:Boolean = false;
+  date1:any;
+  user_against_route: any=[];
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+   
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       this.testTable();
+      
+  }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+//   ignition_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/ignition_report");
+
+
+//   }
+
+
+//   alert_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/alert_report");
+//   }
+
+
+
+//   trip_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/trip_report");
+  
+//   }
+
+// 	Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+  
+//   route_map(){
+//     this.router.navigateByUrl("routeMapping");
+
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+  
+//   driverPerformance(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/Driver-performance");
+//   }
+  
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+// summaryReport(){
+
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+  routeViolation_data=[];
+  route:any;
+  show_time:any;;
+  vehicle_name:any;
+  address_show:any;
+  start_add:any;
+  lattitude:any;
+  longitude:any;
+  route_name:any;
+
+  route_vioation(Fromdate,todate,option){
+    let f_date = Fromdate.toISOString();
+    let t_date =  todate.toISOString();
+    this.routeViolation_data=[];
+    let uId = option.user;
+    var outerThis = this;
+
+    this.contactService.route_violation(f_date, t_date, uId) 
+    .subscribe(res=>{
+        // console.log(res);
+        this.route = res;
+      })
+  }
+
+
+
+  // export_to_XL(Fdate,tdate,option){
+  //   // console.log(Fdate);
+  //   // console.log(tdate);
+  //   // console.log(option)
+  //   let uId = option.user;
+  //   let vName= option.value;
+  //   this.contactService.xlRVReport(Fdate.toISOString(),tdate.toISOString(),this.useridd)
+  //     .subscribe(res=>{
+  //       // console.log('xcelreport',res);
+  //     })
+  // }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              console.log('temptemptemptemptemp',dataTablesParameters);
+                var deviceID;
+                that.Load = true;
+               
+                // dataTablesParameters.find._u = that.useridd;
+              
+                // dataTablesParameters.find._u = user;
+  
+                // if(that.deviceArr.length != 0){
+           
+                  // dataTablesParameters.find.vname = deviceId;
+                // }
+              // if (that.Fromdate) {
+                  // var fdate = new Date(that.Fromdate).toISOString()      
+                  // dataTablesParameters.find.f_date = fdate    
+                  // dataTablesParameters.find.f_date =  from_date;    
+              // };
+  
+              // if (that.todate) {
+                // var fdate = new Date(that.todate).toISOString()      
+                // dataTablesParameters.find.t_date = fdate     
+                  // dataTablesParameters.find.t_date = to_date  ;
+            // };
+            // this.deviceArr = deviceId; 
+           
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              let user; 
+          if(that.user_against_route.length != 0){
+             user = that.user_against_route[0].user
+          }else{
+            console.log("Please Select Route");
+          }
+          console.log(user);
+            if((from_date != undefined)&&(to_date != undefined)){
+              that.contactService.route_violation(from_date, to_date, user).subscribe(res=>{
+                // console.log(res);
+                that.Load = false;
+                that.route = res;
+                callback({data : that.route})
+              },err=>{
+                that.Load = false;
+              })
+
+            }else{
+              let ta =[];
+              that.Load = false;
+              callback({data : ta})
+            }
+      
+             
+            
+          },  
+        
+            "columns": [
+                {
+                    "data": "vehicleName",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "track",
+                    render: function(data, type, row) {
+                      return data?data.name:'';        
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "_id",
+                    render: function(data, type, row) {
+                      return data?data:"";  
+                    }
+                },            
+              {
+                "data": "timestamp",
+                render: function(data, type, row) {        
+                  var rt = new Date(data);
+                  return data ? (moment(rt).format('llll')) : "";  
+                }
+            }                       
+            ],  
+            "columnDefs": [ 
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            } ,
+            { "width": "10px", "targets": 0 },
+            { "width": "40px", "targets": 1 },
+            { "width": "100px", "targets": 2 },
+            { "width": "70px", "targets": 3 },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+
+
+
+  tab:any;
+  exportExcel()
+  {
+  
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      // table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];
+  
+      for(j = 0 ; j < this.tab.rows.length ; j++) 
+      {     
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+         
+      }
+  
+      tab_text=tab_text+"</table>";
+     
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+  
+  deviceArr =[];
+  identifier  ="route_violation_report";
+
+  getReport(event){
+    this.user_against_route =[];
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      // if(event.deviceArr.length==0){
+      //   deviceId=[];
+      // }else{
+      //   deviceId= event.deviceArr;
+      // }
+      // this.deviceArr = deviceId; 
+        if(event.route.length != 0){
+          this.user_against_route = event.route;
+        }
+     
+      console.log('this.deviceArr', this.user_against_route);
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+      
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa);  
+       this.tabelObj.ajax.reload();    
+    
+    }
+   
+  }
+  
+ 
+
+
+}
diff --git a/src/app/device-report/stoppage-report/stoppage-report.component.html b/src/app/device-report/stoppage-report/stoppage-report.component.html
new file mode 100644
index 0000000..ddca26e
--- /dev/null
+++ b/src/app/device-report/stoppage-report/stoppage-report.component.html
@@ -0,0 +1,159 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Stoppage Report' | translate}}</h4>
+      <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th>{{'Vehicle Name' | translate}}</th>
+                      <th>{{'From Time' | translate}}</th>
+                      <th>{{'To Time' | translate}}</th>
+                      <th>{{'Duration' | translate}}</th>
+                      <th>{{'Location' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+    <p class="headStyle">{{'Stoppage Report' | translate}}</p>
+    <div class="InputStyle">
+        <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+      <div class="row">
+          <div class="col-md-2">
+              <md-select  [(ngModel)]="duration" placeholder="--{{'Select Duration' | translate}}--" md-tooltip="{{'Search report by Duration' | translate}}">
+                  <md-option *ngFor="let duration of filterDurations" [value]="duration" (click)="filterReport()">
+                    {{ duration.viewvalue }}
+                  </md-option>
+                </md-select>
+          </div>
+        <div class="col-md-3">
+            <i style="cursor:pointer;" class="material-icons">settings_backup_restore</i>
+            <md-input-container>
+                <input mdInput placeholder="Devices" [mdAutocomplete]="tdAutoS" name="state" 
+                #state="ngModel" [(ngModel)]="option" 
+               (ngModelChange)="filterStoppageStates(option)">
+               <md-autocomplete #tdAutoS="mdAutocomplete">
+                  <md-option *ngFor="let optionS of dataStoppage" [value]="optionS.value" (click)="getStoppageObj(optionS)">
+                    <span>{{ optionS.value }}</span>
+                  </md-option>
+                </md-autocomplete> 
+              </md-input-container>
+       
+        </div>
+        <div class="col-md-2">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-2">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;" >
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="stoppageReport(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/"(click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+    
+      </div>
+    </div>
+   
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'Vehicle Name' | translate}}</th>
+          <th>{{'From Time' | translate}}</th>
+          <th>{{'To Time' | translate}}</th>
+          <th>{{'Duration' | translate}}</th>
+          <th>{{'Location' | translate}}</th>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let report of report_to_show">
+            
+          <td style="cursor:pointer">{{report.deviceName}}</td>
+
+          <td style="cursor:pointer">{{report.arrivalTime}}</td>
+
+          <td style="cursor:pointer">{{report.departureTime}}</td>
+
+          <td style="cursor:pointer">{{report.duration}}</td>
+
+          <td style="cursor:pointer">
+            <p *ngIf="report.location != undefined">{{report.address}}</p>
+            <a *ngIf="report.location == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+           
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display: none">
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th>Vehicle Name</th>
+   <th>From Time</th>
+   <th>To Time</th>
+   <th>Duration</th>
+   <th>Location</th>
+</thead>
+
+<tbody>
+
+ <tr *ngFor="let report of report_to_show">
+     
+   <td style="cursor:pointer">{{report.deviceName}}</td>
+
+   <td style="cursor:pointer">{{report.arrivalTime}}</td>
+
+   <td style="cursor:pointer">{{report.departureTime}}</td>
+
+   <td style="cursor:pointer">{{report.duration}}</td>
+
+   <td style="cursor:pointer">
+     <p *ngIf="report.location != undefined">{{report.address}}</p>
+     <a *ngIf="report.location == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
+
+   </td>
+ </tr>
+</tbody>
+</table>
+  </div> -->
diff --git a/src/app/device-report/stoppage-report/stoppage-report.component.scss b/src/app/device-report/stoppage-report/stoppage-report.component.scss
new file mode 100644
index 0000000..bc76d71
--- /dev/null
+++ b/src/app/device-report/stoppage-report/stoppage-report.component.scss
@@ -0,0 +1,90 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+  
+  #toast {
+    visibility: hidden;
+    max-width: 250px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/device-report/stoppage-report/stoppage-report.component.spec.ts b/src/app/device-report/stoppage-report/stoppage-report.component.spec.ts
new file mode 100644
index 0000000..6160c55
--- /dev/null
+++ b/src/app/device-report/stoppage-report/stoppage-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StoppageReportComponent } from './stoppage-report.component';
+
+describe('StoppageReportComponent', () => {
+  let component: StoppageReportComponent;
+  let fixture: ComponentFixture<StoppageReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StoppageReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StoppageReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/stoppage-report/stoppage-report.component.ts b/src/app/device-report/stoppage-report/stoppage-report.component.ts
new file mode 100644
index 0000000..bb172c2
--- /dev/null
+++ b/src/app/device-report/stoppage-report/stoppage-report.component.ts
@@ -0,0 +1,541 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+declare var google: any;
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-stoppage-report',
+  templateUrl: './stoppage-report.component.html',
+  styleUrls: ['./stoppage-report.component.scss']
+})
+export class StoppageReportComponent implements OnInit {
+  identifier : any = 'stoppage_report';
+  address: any;
+  // overSpeedobject:any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  dataStoppage: any[];
+  stoppage_obj: any;
+  duration:any;
+  // filterDurations=[{
+  //   value:2,
+  //   viewvalue:"More than 2 Hours"
+  // },
+  // {
+  //   value:6,
+  //   viewvalue:"More than 6 Hours"
+  // },
+  // {
+  //   value:12,
+  //   viewvalue:"More than 12 Hours"
+  // },{
+  //   value:24,
+  //   viewvalue:" More than 24 Hours"
+  // }]
+  stoppage_duration: any;
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log(this.options);
+     
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable()
+    // this.tabelObj;
+       
+  }
+
+ 
+
+
+  stoppage_data=[];
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  // stoppageReport(Fromdate,todate){
+ 
+  //   let f_date = Fromdate.toISOString();
+  //   let t_date =  todate.toISOString();
+  
+  //   var uId= this.useridd
+   
+
+  //   var vName="";
+  // if((this.dataStoppage==undefined)||(this.dataStoppage.length==0)){
+  //   vName="";
+  // }else{
+  //   vName= this.dataStoppage?this.dataStoppage[0].id:"";
+  // }
+
+  //   // console.log(vName)
+  //   this.report_to_show=[];
+  //   var outerThis = this;
+   
+  //   // console.log('completeObj',uId,vName);
+  //   this.Load =true;
+  //   this.contactService.stoppage_report(f_date,t_date,uId,vName)
+  //   .subscribe(res=>{
+  //     console.log(res)
+  //    this.Load = false;
+  //     this.stoppage_data = res;
+  //     // console.log(this.stoppage_data)
+
+  //     // for(var i=0;i<this.stoppage_data.length;i++){
+  //      for(var i=0;i<this.stoppage_data.length;i++){
+  //       this.arrival_time = new Date(this.stoppage_data[i].arrival_time).toLocaleString();
+       
+  //       this.departure_time = new Date(this.stoppage_data[i].departure_time).toLocaleString();
+  //       var fd = new Date(this.arrival_time ).getTime();
+  //       var td = new Date(this.departure_time).getTime();
+  //       var time_difference = td-fd;
+  //       var total_min = time_difference/60000;
+  //       var hours = total_min/60
+  //       var rhours = Math.floor(hours);
+  //       var minutes = (hours - rhours) * 60;
+  //       var rminutes = Math.round(minutes);
+      
+  //       this.Durations = rhours +'hrs'+ rminutes + 'min';
+  //       this.address = this.stoppage_data[i].address
+        
+  //       this.overSpeedobject = {
+  //         deviceName : this.stoppage_data[i].device?this.stoppage_data[i].device.Device_Name:"NA",
+  //         arrivalTime:this.arrival_time,
+  //         departureTime: this.departure_time,
+  //         duration:this.Durations,
+  //         location: this.address,
+  //         lattitude   : this.stoppage_data[i].lat?this.stoppage_data[i].lat : 0,
+  //         longitude : this.stoppage_data[i].long?this.stoppage_data[i].long : 0,
+  //       }
+   
+  //     this.report_to_show.push(this.overSpeedobject)
+
+  //      }
+  //   },err=>{
+  //     this.Load = false;
+  //     console.log("error while fetching data",err);
+  //   })    
+  // }
+
+  // xlStoppageReport(Fdate,tdate,option){
+  //   let uId = option.user;
+  //   let vName= option._id;
+  //   this.contactService.xlStoppageReport(Fdate.toISOString(),tdate.toISOString(),this.useridd,vName)
+  //     .subscribe(res=>{
+  //       // console.log('xcelreport',res);
+  //     })
+  // }
+
+
+addressLink = "";
+// getlink(report){
+ 
+//   var lat = report.lattitude?report.lattitude:0;
+//   var lng = report.longitude?report.longitude:0;
+//   this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+//   return this.addressLink ; 
+// }
+
+
+  tab:any;
+  exportExcel()
+  {
+  
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+  
+      for(j = 0 ; j < this.tab.rows.length ; j++) 
+      {     
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+          // console.log('tab_text',JSON.parse(tab_text));
+          //tab_text=tab_text+"</tr>";
+      }
+  
+      tab_text=tab_text+"</table>";
+      // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+      // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+  
+
+
+  // filterStoppageStates(val) {
+
+  //   if (val=="") {
+  //     this.dataStoppage =[];
+  //     // console.log("empty dataStoppage")
+  //   }else{
+ 
+  //     const filterValue:any = val;
+      
+  //      this.dataStoppage = this.options.filter(function(d){
+  //       var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+  //     //  this.option = this.options[i];
+    
+     
+  //       return t > -1;    
+  //     });
+      
+  //       return this.dataStoppage;
+  //   }
+  
+  // }
+
+  // getStoppageObj(valS){
+  //   this.stoppage_obj = valS;
+  // }
+
+
+  // filterReport(){
+  //   var tableFilteredData = [];
+  //   // console.log('Inside function')
+  //   // console.log(this.duration.value);
+  //   for(var i=0;i<this.report_to_show.length;i++){
+  //     if(Number(this.report_to_show[i].duration.split("h")[0])>this.duration.value){
+  //       tableFilteredData.push(this.report_to_show[i]);
+  //     }
+  //   }
+  //   this.report_to_show = tableFilteredData;
+  // }
+
+  tabelObj :  any;
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+            
+                var deviceID;
+             
+                var vName; 
+                var dr ; 
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              if(that.deviceArr.length != 0){
+                vName = that.deviceArr[0];
+              }
+              if((that.stoppage_duration != undefined )&&(that.stoppage_duration.length != 0 )){
+              
+                  dr = that.stoppage_duration[0];
+                  console.log("DR-",dr);
+                  
+              }
+                  that.Load = true ; 
+                if((from_date != undefined)&&(to_date != undefined)){
+                  that.contactService.stoppage_report(from_date,to_date,user,vName)
+                  .subscribe(res=>{ 
+                    that.stoppage_data =[];     
+                    that.Load = false ; 
+                    that.stoppage_data = that.durationFilter(res);  
+                     callback({data : that.stoppage_data});
+                  },err=>{
+                    that.Load = false ; 
+                    console.log("error while fetching data",err);
+                  }) 
+
+                }else{
+                  that.Load = false; 
+                      let ta = [];
+                     callback({data : ta});
+                }
+         
+          }, 
+        
+            "columns": [
+                {
+                    "data": "device",   
+                    "render": function(data, type, row) {
+                        
+                      return data?data.Device_Name : '';                  
+                    }
+                },
+                {
+                    "data": "arrival_time",
+                    render: function(data, type, row) {
+                      var atime = new Date(data);
+                      return data ? (moment(atime).format('llll')) : "";    
+                    }
+                },
+                {
+                    "data": "departure_time",
+                
+                    render: function(data, type, row) {
+                      var dtime = new Date(data);
+                      return data ? (moment(dtime).format('llll')) : "";  
+                  
+                    }
+                }, 
+          
+                
+              {
+                "data": "_id",
+                "defaultContent": null,
+                render: function(data, type, row) {    
+                  let arrival_time = new Date(row.arrival_time).toLocaleString();                 
+                  let departure_time = new Date(row.departure_time).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                
+                  let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+                  
+                  return Durations;
+                 
+                }
+            } ,
+            {
+              "data": "address",
+              render: function(data, type, row) {            
+                var lat = row.lat?row.lat:0;
+                var lng = row.long?row.long:0;    
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+lng +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                  if(data){
+                    return data ;
+                  }else{
+                    return addressLink;     
+                  }
+              }
+          }                       
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3,4 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            } ,
+            // { "width": "10px", "targets": 0 },
+            // { "width": "40px", "targets": 1 },
+            // { "width": "100px", "targets": 2 },
+            // { "width": "70px", "targets": 3 },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+  deviceArr=[];
+  data_descip = '';
+  getReport(event){
+    console.log(event);
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+        this.data_descip = 'Please Select Device';
+        launch_toast(); 
+        return
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+    
+      this.stoppage_duration = event.duration ; 
+      if(this.stoppage_duration.length == 0){
+        // this.data_descip = 'Please Select Duration';
+        // launch_toast(); 
+        // return
+        this.stoppage_duration.push(0)
+        
+      }
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+     
+        this.tabelObj.ajax.reload(); 
+        
+    
+    }
+
+
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }    
+   
+  }
+
+  durationFilter(data){
+    var temp=[];
+    var diff
+    console.log(data,this.stoppage_duration[0]);
+     if(this.stoppage_duration[0]==0){
+        temp=data
+       }else{
+    if(data.length!=0){
+    for(var i=0;i<data.length;i++){
+      diff=this.dateDiffrence(data[i].arrival_time,data[i].departure_time);
+     if((this.stoppage_duration != undefined )&&(this.stoppage_duration.length != 0 )){
+      
+       if(this.stoppage_duration[0]==1){
+            if(diff.hrs<=2){
+              if(diff.hrs==2){
+                if(diff.min>0){
+
+                }else{
+                  temp.push(data[i]);
+                }
+              }else
+                temp.push(data[i]);
+            }
+       }else{
+          if(diff.hrs>=this.stoppage_duration[0]){
+         temp.push(data[i]);
+       }
+
+       }
+      
+      }
+    }
+  }
+}
+      return temp;
+  }
+  dateDiffrence(date1,date2){
+                  let arrival_time = new Date(date1).toLocaleString();                 
+                  let departure_time = new Date(date2).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                  let Durations = rhours;
+                  return {hrs:Durations,min:rminutes};
+  }
+  
+}
+
+
diff --git a/src/app/device-report/summary-report/summary-report.component.html b/src/app/device-report/summary-report/summary-report.component.html
new file mode 100644
index 0000000..142e6ac
--- /dev/null
+++ b/src/app/device-report/summary-report/summary-report.component.html
@@ -0,0 +1,182 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Summary Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;font-size: 12px;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Start Point' | translate}}</th>
+                      <th style="text-align: left;">{{'End Point' | translate}}</th>
+                      <th style="text-align: left;">{{'Total KM' | translate}}</th>
+                      <th style="text-align: left;" title="Fuel Consumption (Litre)">{{'Fuel (Litre)' | translate}}</th>
+                      <th style="text-align: left;">{{'Trips' | translate}}</th>
+                      <th style="text-align: left;" title="Running Time (HH:MM)">{{'Running (HH:MM)' | translate}}</th>    
+                      <th style="text-align: left;" title="Stop Time (HH:MM)">{{'Stop (HH:MM)' | translate}}</th>
+                      <th style="text-align: left;" title="Idle Time (HH:MM)">{{'Idle (HH:MM)' | translate}}</th>
+                      <th style="text-align: left;" title="Out of reach Time (HH:MM)">{{'OFR (HH:MM)' | translate}}</th>
+                      <!-- <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th> -->
+                      <th style="text-align: left;" title="No gps Time (HH:MM)">{{'No gps (HH:MM)' | translate}}</th>        
+                      <th style="text-align: left;" title="Overspeeding (HH:MM)">{{'Overspeeding' | translate}}</th>
+                      <th style="text-align: left;" title="Max Speed (kmph)">{{'Max Speed (kmph)' | translate}}</th>
+                      <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th>
+                      <th style="text-align: left;" title="Engine off time (kmph)">{{'Engine off time' | translate}}</th>
+                  
+
+                      <th style="text-align: left;">{{'Route Violation' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <p class="headStyle">{{'Summary Report' | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div  class="col-md-3" style="margin-top: 18px;">
+       
+          <select id="select" multiple="multiple">
+            <option *ngFor="let option_1 of options" value={{option_1.did}} >{{ option_1.value }}</option>
+          </select>
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="top: 16px;">
+        <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="summary_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button [disabled]="!xlbutton" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+  </div>
+
+  <table  class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th>{{'Device Name' | translate}}</th>
+        <th>{{'Start Point' | translate}}</th>
+        <th>{{'End Point' | translate}}</th>
+        <th>{{'Total KM' | translate}}</th>
+        <th>{{'Fuel Consumption (Litre)' | translate}}</th>
+        <th>{{'Trips' | translate}}</th>
+        <th>{{'Total Running Time (HH:MM)' | translate}}</th>    
+        <th >{{'Total Stop Time (HH:MM)' | translate}}</th>
+        <th>{{'Total Idle Time (HH:MM)' | translate}}</th>
+        <th>{{'Total Out of reach Time (HH:MM)' | translate}}</th>
+        <th>{{'Total No gps Time (HH:MM)' | translate}}</th>
+    
+        <th>{{'Overspeeding (HH:MM)' | translate}}</th>
+        <th>{{'Route Violation' | translate}}</th>
+      
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let device of device_summary ">
+        <td style="cursor:pointer">{{device.devicename}}</td>
+        <td style="cursor:pointer" >
+          <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
+        </td>
+        <td style="cursor:pointer">
+          <a href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>   
+        </td>
+        <td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
+        <td style="cursor:pointer">{{device.fuelConsumption}}</td>
+        <td style="cursor:pointer">{{device.trip}}</td>
+        <td style="cursor:pointer">{{device.TotalrunningTime }}</td>
+     
+        <td style="cursor:pointer">{{device.stopTime}}</td>
+        <td style="cursor:pointer">{{device.idleTime}}</td>
+        <td style="cursor:pointer">{{device.ourTime}}</td>
+        <td style="cursor:pointer">{{device.nogps}}</td>
+        
+       
+        <td style="cursor:pointer">{{device.overSpeed}}</td>
+        <td style="cursor:pointer">{{device.routeViolation}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+
+  <table id="test" class="table table-striped table-hover " style="display:none">
+
+<thead style="background-color:#A2C523;color: white;">
+<tr>
+<th>Device Name</th>
+<th>Start Point</th>
+<th>End Point</th>
+<th>Total KM</th>
+<th>Fuel Consumption (Litre)</th>
+<th>Trips</th>
+<th>Total Running Time (HH:MM)</th>    
+<th >Total Stop Time (HH:MM)</th>
+<th >Total Idle Time (HH:MM)</th>
+<th >Total Out of reach Time (HH:MM)</th>
+<th >Total No gps Time (HH:MM)</th>
+<th>Overspeeding (HH:MM)</th>
+<th>Route Violation</th>
+
+</tr>
+</thead>
+<tbody>
+<tr *ngFor="let device of device_summary">
+<td style="cursor:pointer">{{device.devicename}}</td>
+<td style="cursor:pointer" >
+  <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+</td>
+<td style="cursor:pointer">
+  <a  href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a> 
+</td>
+<td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
+<td style="cursor:pointer">{{device.fuelConsumption}}</td>
+<td style="cursor:pointer">{{device.trip}}</td>
+<td style="cursor:pointer">{{device.TotalrunningTime }}</td>
+<td style="cursor:pointer">{{device.stopTime}}</td>
+<td style="cursor:pointer">{{device.idleTime}}</td>
+<td style="cursor:pointer">{{device.ourTime}}</td>
+<td style="cursor:pointer">{{device.nogps}}</td>
+<td style="cursor:pointer">{{device.overSpeed}}</td>
+<td style="cursor:pointer">{{device.routeViolation}}</td>
+</tr>
+</tbody>
+</table>
+
+</div> -->
+       
diff --git a/src/app/device-report/summary-report/summary-report.component.scss b/src/app/device-report/summary-report/summary-report.component.scss
new file mode 100644
index 0000000..661fe8f
--- /dev/null
+++ b/src/app/device-report/summary-report/summary-report.component.scss
@@ -0,0 +1,36 @@
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/summary-report/summary-report.component.spec.ts b/src/app/device-report/summary-report/summary-report.component.spec.ts
new file mode 100644
index 0000000..660a6e9
--- /dev/null
+++ b/src/app/device-report/summary-report/summary-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryReportComponent } from './summary-report.component';
+
+describe('SummaryReportComponent', () => {
+  let component: SummaryReportComponent;
+  let fixture: ComponentFixture<SummaryReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SummaryReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SummaryReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/summary-report/summary-report.component.ts b/src/app/device-report/summary-report/summary-report.component.ts
new file mode 100644
index 0000000..6b6ef1d
--- /dev/null
+++ b/src/app/device-report/summary-report/summary-report.component.ts
@@ -0,0 +1,1036 @@
+
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { min } from 'rxjs/operator/min';
+
+
+declare var google: any;
+// declare var jquery:any;
+declare var $:any;
+declare var moment :any;
+// declare var $:any;
+// declare var TableExport:any;
+
+@Component({
+  selector: 'app-summary-report',
+  templateUrl: './summary-report.component.html',
+  styleUrls: ['./summary-report.component.scss']
+})
+export class SummaryReportComponent implements OnInit {
+
+  sumReport: any;
+  date1:any;
+  neww:any;
+  fs : any;
+  Load:boolean=false;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  xlbutton: boolean= false;
+  dataSelect: any[];
+  closeProcess: any;
+  lattitude: any;
+  longitude: any;
+  lattitude1: any;
+  longitude1: any;
+  addressLink: string;
+  addressLink1: string;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) { }
+
+  
+
+  ngOnInit() {
+
+    var fTime = new Date();
+    // fTime.setDate(fTime.getDate()-1);
+    // fTime.setHours(0,0,0,0); 
+    // this.Fromdate=new Date(fTime);
+    $('#select').hide();
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // $('.demo').fSelect();
+  
+
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //        console.log(this.options);
+    //        let that = this;
+    //        setTimeout(()=>{
+    //          that.loadropdown();
+    //        },100)  
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+     this.testTable();  
+  }
+
+  selectedPeople:any;
+  people= ['1','2','3',];
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+//   selectedValue:any;
+
+//   loadropdown() {
+//     let that = this;
+//     var script = document.createElement("script");
+//     script.setAttribute("type", "text/javascript");
+//     script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+//     document.getElementsByTagName("head")[0].appendChild(script);
+//     setTimeout(() => {
+
+//       $('#select').multipleSelect({
+//         width: 200,
+//         placeholder: 'Select device.....',
+//         filter: true,
+//       })
+//      // $('#select').show();
+//     }, 100);
+
+
+//   }
+
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+  
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+
+
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+
+
+// trip_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/trip_report");
+
+// }
+
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+// ignition_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/ignition_report");
+
+
+// }
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+// summaryReport(){
+ 
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// driverPerformance(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/Driver-performance");
+// }
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+
+// alert_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/alert_report");
+// }
+
+  // showdropDown :boolean = false;
+  device_summary =[];
+  summary:any;
+  d_name:any;
+  total_running_time:any;
+  stop_time:any;
+  overSpeed:any;
+  route_violation:any;
+  trips:any;
+  total_km:any;
+  address_show:any;
+  end_add_show:any;
+  start_add:any;
+  end_add:any;
+  start_add_lat:any;
+  start_add_long:any;
+  end_add_lat:any;
+  end_add_long:any;
+  uId:any;
+  
+  deviceArr = [];
+
+  getReport(event){
+    if(event === 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+     
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+      console.log("b4");
+   
+    
+      
+      this.tabelObj.ajax.reload();      
+        
+    
+    }
+    
+  
+  }
+  // summary_report(Fromdate,todate){
+  //   // console.log(this.dataSelect[0]);
+  //   // console.log(this.dataSelect) 
+  //   console.log($('#select').multipleSelect('getSelects','value'));
+  //   this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+  //   console.log(Fromdate,todate);
+  //   var devID;
+  //   // if(!option){
+  //     this.uId = this.useridd;
+  //     if((this.deviceArr==undefined)||(this.deviceArr.length==0)){
+  //       devID=[];
+  //     }else{
+  //       devID= this.deviceArr;
+  //       console.log("device ID=>",devID);
+  //     }
+
+  //     if(Fromdate == null){
+  //       this._flashMessagesService.show("Please select fromdate ", { cssClass: 'alert-danger', timeout: 3000 });
+  //       return;
+  //     }
+  //     if(todate == null){
+  //       this._flashMessagesService.show("Please Select todate", { cssClass: 'alert-danger', timeout: 3000 });
+  //       return ;
+  //     }
+  //   let f1 = new Date(Fromdate).setHours(0,0,0,0);
+  //   console.log("f1",f1);
+    
+  //   let f_date = new Date(f1).toISOString();
+  //   let t1 = new Date(todate).setHours(23,59,59,999);
+  //   console.log('t1',t1);
+  //   let t_date =  new Date(t1).toISOString();
+  //   // console.log(f_date);
+  //   // console.log(t_date);
+  //   this.device_summary=[];
+  //   var outerThis = this;
+  //   // console.log(this.useridd);
+  //   // console.log(this.uId);
+  //   this.Load = true;
+  //   this.contactService.summary_rep_new(f_date, t_date, this.uId,devID)
+  //     .subscribe(res=>{
+  //       if(res.message == 'Fromdate is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+  //       if(res.message == 'todate is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+  //       if(res.message == 'user is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+
+     
+        
+  //       this.Load = false;
+  //        console.log("summary console =>",res);
+  //       this.summary=res;
+  //       if(this.summary.length == 0){
+  //         this._flashMessagesService.show("No record found", { cssClass: 'alert-danger', timeout: 3000 });
+  //       }
+  //       console.log(this.summary);
+  //       var i = 0;
+  //       // howManyTimes =  this.summary.length;
+  //       this.closeProcess= this.summary.length;
+        
+  //       var hourconversion = 2.7777778 / 10000000 ; 
+       
+  //       for(var j=0;j<this.summary.length;j++){
+  //         this.device_summary.push({
+  //           "devicename": this.summary[j].devObj[0]?this.summary[j].devObj[0].Device_Name:'NA',
+  //           "TotalrunningTime":this.millisecondConversion(this.summary[j].today_running),
+  //           "stopTime": this.millisecondConversion(this.summary[j].today_stopped),
+  //           "idleTime": this.millisecondConversion(this.summary[j].t_idling),
+  //           "ourTime": this.millisecondConversion(this.summary[j].t_ofr),
+  //           "nogps" :this.millisecondConversion(this.summary[j].t_noGps),
+  //           "overSpeed": this.millisecondConversion(this.summary[j].today_overspeeds),
+  //           "routeViolation": this.summary[j].today_routeViolations,
+  //           "start_add": this.summary[j].start_location,
+  //           "end_add": this.summary[j].end_location,
+  //           "trip": this.summary[j].today_trips,
+  //           "totalkm":this.summary[j].today_odo,
+  //           "fuelConsumption" : ((this.summary[j].devObj[0].Mileage == null)||(this.summary[j].devObj[0].Mileage == undefined))?"NA":(this.summary[j].today_odo/parseFloat(this.summary[j].devObj[0].Mileage)).toFixed(2)
+  //           // "todayRunning" : todayRunning,
+  //           // "todayStopped" : todayStopped
+  //         })
+  //       }
+        
+  //       // function f() {
+  //       //   if((outerThis.summary[i].start_location!=null)&&(outerThis.summary[i].end_location!=null)){
+  //       //     outerThis.start_add_lat =  outerThis.summary[i].start_location.lat;
+  //       //     outerThis.start_add_long= outerThis.summary[i].start_location.long;
+           
+  //       //   }else{
+  //       //     outerThis.start_add_lat = null;
+  //       //     outerThis.start_add_long= null;
+          
+  //       //   }
+
+  //       //   if((outerThis.summary[i].end_location!=null)&&(outerThis.summary[i].end_location!=null)){
+  //       //     outerThis.end_add_lat= outerThis.summary[i].end_location.lat;
+  //       //     outerThis.end_add_long= outerThis.summary[i].end_location.long;
+
+  //       //   }else{
+
+  //       //     outerThis.end_add_lat=null;
+  //       //     outerThis.end_add_long=null;
+
+  //       //   }
+       
+  //       //   var geocoder = new google.maps.Geocoder();
+  //       //   var latlng_start = new google.maps.LatLng(outerThis.start_add_lat,outerThis.start_add_long);
+  //       //   var end_add = new google.maps.Geocoder();
+  //       //   var latlng_end = new google.maps.LatLng(outerThis.end_add_lat,outerThis.end_add_long);
+
+  //       //   var request={
+  //       //     latLng:latlng_start
+  //       //   }
+
+  //       //   var request_end={
+  //       //     latLng:latlng_end
+  //       //   }
+      
+       
+  //       //   geocoder.geocode(request, function(data,status){
+  //       //     if(status == google.maps.GeocoderStatus.OK){
+  //       //       if(data[0]!=null){
+              
+  //       //          this.start_add = data[0].formatted_address;
+  //       //          if(this.start_add=="Antarctica"){
+  //       //           this.start_add="NA";
+  //       //          }
+  //       //          outerThis.address_show = this.start_add;
+               
+               
+  //       //       }else{
+  //       //         this.start_add="NA";
+  //       //       }
+  //       //     }
+  //       //     else{
+           
+  //       //       this.start_add ="NA";
+  //       //       outerThis.address_show = this.start_add
+           
+  //       //     }  
+  //       //     outerThis.device_summary[i-1].address= outerThis.address_show;
+           
+  //       //   })
+
+
+  //       //   geocoder.geocode(request_end, function(data1,status){
+  //       //     if(status == google.maps.GeocoderStatus.OK){
+  //       //       if(data1[0]!=null){
+              
+  //       //          this.end_add = data1[0].formatted_address;
+  //       //          if(this.end_add=="Antarctica"){
+  //       //           this.end_add="NA";
+  //       //          }
+  //       //          outerThis.end_add_show = this.end_add;
+               
+               
+  //       //       }else{
+  //       //         this.end_add="NA"
+  //       //       }
+  //       //     }
+  //       //     else{
+           
+  //       //       this.end_add ='NA';
+  //       //       outerThis.end_add_show  = this.end_add;
+           
+  //       //     }  
+  //       //     outerThis.device_summary[i-1].address_end= outerThis.end_add_show;
+  //       //     // console.log(outerThis.address_show);
+  //       //   })
+  //       //   i++;
+  //       //   if( i < outerThis.closeProcess ){
+  //       //       setTimeout( f,5000 );
+  //       //   }
+  //       // }
+  //       // f();
+
+  //       this.xlbutton = true;
+    
+    
+  //     },(error)=>{
+  //       this.Load=false;
+  //       // console.log(error.status);
+  //       // console.log("No Record Found !!!");
+  //       this._flashMessagesService.show('Internal Server Error', { cssClass: 'alert-danger', timeout: 3000 });
+  //     })
+  // }
+
+
+  tabelObj: any ;
+  identifier:String = 'summary_report';
+testTable() {
+  const that = this;
+  console.log("inside function");
+ 
+  $(document).ready(function() {
+ 
+     that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'63vh',     
+          "scrollX": true,
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            var deviceID;
+            that.Load= true;    
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+
+            var suburl = "";
+            that.device_summary =[];
+
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+              suburl += "/summary/summaryReport?from=" + temp.from_date +'&to=' + temp.to_date + '&user=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe(resp => {   
+                  // console.log(ignReport.length); 
+                  that.summary =[];
+                  that.Load= false;    
+                  that.device_summary = [];      
+                  that.summary = resp ; 
+                  console.log(that.summary);
+                  var hourconversion = 2.7777778 / 10000000 ; 
+                  // for(var j=0;j<that.summary.length;j++){
+                  //   that.device_summary.push({
+                  //     "devicename": that.summary[j].devObj[0]?that.summary[j].devObj[0].Device_Name:'NA',
+                  //     "TotalrunningTime":that.millisecondConversion(that.summary[j].today_running),
+                  //     "stopTime": that.millisecondConversion(that.summary[j].today_stopped),
+                  //     "idleTime": that.millisecondConversion(that.summary[j].t_idling),
+                  //     "ourTime": that.millisecondConversion(that.summary[j].t_ofr),
+                  //     "nogps" :that.millisecondConversion(that.summary[j].t_noGps),
+                  //     "overSpeed": that.millisecondConversion(that.summary[j].today_overspeeds),
+                  //     "routeViolation": that.summary[j].today_routeViolations,
+                  //     "start_add": that.summary[j].start_location,
+                  //     "end_add": that.summary[j].end_location,
+                  //     "trip": that.summary[j].today_trips,
+                  //     "totalkm":that.summary[j].today_odo,
+                  //     "fuelConsumption" : ((that.summary[j].devObj[0].Mileage == null)||(that.summary[j].devObj[0].Mileage == undefined))?"NA":(that.summary[j].today_odo/parseFloat(that.summary[j].devObj[0].Mileage)).toFixed(2)
+                   
+                  //   })
+                  // }  
+               
+                    callback({data : that.summary });    
+                 
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+            }else{
+              that.Load= false;    
+              let ta = [];
+              callback({data : ta });  
+
+            }
+
+ 
+        },  
+      
+          "columns": [
+            {
+              "data": "devObj",
+              "defaultContent": "",
+              "render": function (data, type, row) {  
+                        
+                return (data.length != 0) ? data[0].Device_Name : '';
+              }
+            },
+     
+                    {
+              "data": "start_location",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                  
+                let lat = data?data.lat:null;
+                let long = data?data.long:null;        
+                var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle Start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                return  addressLink;  
+              
+              }
+            },    
+            {
+              "data": "end_location",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                let lat_1 = data?data.lat:null;
+                    let long_1 = data?data.long:null;        
+                    var addressLink_1 = '<a href="https://maps.google.com/?q='+ lat_1 +','+long_1 +' "  target="_blank" title="Click to get vehicle End location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                    return  addressLink_1;  
+              
+              }
+            }, 
+            {
+              "data": "today_odo",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data.toFixed(2) : "00.00";
+              }
+            }
+            ,    
+            {
+              "data": "devObj",
+              "defaultContent": "",
+              render: function (data, type, row) {
+              
+                console.log(data.Mileage);
+          
+              var milage =   (data.length==0)?"NA":((data[0].Mileage == null)||(data[0].Mileage == undefined))?"NA":(row.today_odo/parseInt(data[0].Mileage)).toFixed(2);
+                return milage ? milage : "00:00";
+              }
+            },
+       
+      
+            {
+              "data": "today_trips",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data:"0";
+              }
+            },
+       
+            {
+              "data": "today_running",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?that.millisecondConversion(data):"00:00";
+              }
+            },
+             
+         
+        
+            {
+              "data": "today_stopped",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?that.millisecondConversion(data):0;
+              }
+            },
+         
+       
+            {
+              "data": "t_idling",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?that.millisecondConversion(data):"00:00";
+              }
+            },
+        
+         
+            {
+              "data": "t_ofr",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?that.millisecondConversion(data):"00:00";
+              }
+            },
+            // {
+            //   "data": null,
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+            //     console.log('datatatatatatatatatata=>',data);
+            //     var dateDiff = ((data.today_running!=undefined)?data.today_running:0) + ((data.t_idling !=undefined)?data.t_idling:0);
+            //     return data?that.millisecondConversion(dateDiff):"00:00";
+            //   }
+            // },
+         
+          
+            {
+              "data": "t_noGps",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+              return data?that.millisecondConversion(data):"00:00";
+              }
+            },
+         
+            {
+              "data": "today_overspeeds",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?that.millisecondConversion(data):"0.0";
+              }
+            },
+            {
+              "data": "today_maxSpeed",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data:0;
+              }
+            },      
+            {
+              "data": "today_ign_on",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data:0;
+              }
+            },    {
+              "data": "today_ign_off",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data:0;
+              }
+            },
+            {
+              "data": "today_routeViolations",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data:0;
+              }
+            }                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9,10,11,12 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          }   
+           
+         
+          ] 
+      });
+
+  });
+
+}
+
+
+
+  // exportExcel(tableID, filename){
+  //   // TableExport(document.getElementsByTagName("table"));
+  
+  //     var downloadLink;
+  //     var dataType = 'application/vnd.ms-excel';
+  //     var tableSelect = document.getElementById(tableID);
+  //     var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
+      
+  //     // Specify file name
+  //     filename = filename?filename+'.xls':'excel_data.xls';
+      
+  //     // Create download link element
+  //     downloadLink = document.createElement("a");
+      
+  //     document.body.appendChild(downloadLink);
+      
+  //     if(navigator.msSaveOrOpenBlob){
+  //         var blob = new Blob(['\ufeff', tableHTML], {
+  //             type: dataType
+  //         });
+  //         navigator.msSaveOrOpenBlob( blob, filename);
+  //     }else{
+  //         // Create a link to the file
+  //         downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
+      
+  //         // Setting the file name
+  //         downloadLink.download = filename;
+          
+  //         //triggering the function
+  //         downloadLink.click();
+  //     }
+  // }
+tab:any;
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+          
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  filterStates(val) {
+
+
+    if (val==""){
+
+      this.dataSelect = [];
+      // console.log("deviceValue",this.dataSelect);
+    } else{
+ 
+      const filterValue:any = val;
+      
+       this.dataSelect = this.options.filter(function(d){
+        var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+      //  this.option = this.options[i];
+    
+     
+        return t > -1;    
+      });
+      
+        return this.dataSelect;
+    }
+   
+  
+  
+  }
+  ngOnDestroy(){
+    this.closeProcess= 0;
+
+  }
+
+
+  getlink(report : any){
+      // console.log("report=>",report);
+    var lat = report.start_add?report.start_add.lat:0;
+    var lng = report.start_add?report.start_add.long:0;
+    this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;  
+    return this.addressLink ; 
+  }
+  
+  getlink1(report:any){
+   
+    // console.log("report=>",report);
+    var lat = report.end_add?report.end_add.lat:0;
+    var lng = report.end_add?report.end_add.long:0;
+    this.addressLink1 =  'https://maps.google.com/?q=' + lat + ',' + lng;
+    return this.addressLink ; 
+  }
+
+
+  millisecondConversion(duration){
+   
+      // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+      // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+  
+      // hours = (hours < 10) ? 0 + hours : hours;
+      // minutes = (minutes < 10) ? 0 + minutes : minutes;
+    
+      // return hours + ":" + minutes ;
+      var x = duration;
+      var d = moment.duration(x, 'milliseconds');
+      var hours = Math.floor(d.asHours());
+      var mins = Math.floor(d.asMinutes()) - hours * 60;
+      var mainMIn = (hours>=24)?0:mins;
+      return  hours + ":" + mainMIn;
+
+    
+  }
+  
+
+
+
+  }
+
+
+
+         //   if((outerThis.summary[i].start_location!=null)&&(outerThis.summary[i].end_location!=null)){
+        //     outerThis.start_add_lat =  outerThis.summary[i].start_location.lat;
+        //     outerThis.start_add_long= outerThis.summary[i].start_location.long;
+           
+        //   }else{
+        //     outerThis.start_add_lat = null;
+        //     outerThis.start_add_long= null;
+          
+        //   }
+
+        //   if((outerThis.summary[i].end_location!=null)&&(outerThis.summary[i].end_location!=null)){
+        //     outerThis.end_add_lat= outerThis.summary[i].end_location.lat;
+        //     outerThis.end_add_long= outerThis.summary[i].end_location.long;
+
+        //   }else{
+
+        //     outerThis.end_add_lat=null;
+        //     outerThis.end_add_long=null;
+
+        //   }
+
+  
+
+
+
+
diff --git a/src/app/device-report/tempreture-graph/tempreture-graph.component.html b/src/app/device-report/tempreture-graph/tempreture-graph.component.html
new file mode 100644
index 0000000..73bc9f2
--- /dev/null
+++ b/src/app/device-report/tempreture-graph/tempreture-graph.component.html
@@ -0,0 +1,31 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Temprature Graph' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="fuelChart" style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas> 
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/tempreture-graph/tempreture-graph.component.scss b/src/app/device-report/tempreture-graph/tempreture-graph.component.scss
new file mode 100644
index 0000000..047ea1f
--- /dev/null
+++ b/src/app/device-report/tempreture-graph/tempreture-graph.component.scss
@@ -0,0 +1,39 @@
+ 
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/device-report/tempreture-graph/tempreture-graph.component.spec.ts b/src/app/device-report/tempreture-graph/tempreture-graph.component.spec.ts
new file mode 100644
index 0000000..bd3803e
--- /dev/null
+++ b/src/app/device-report/tempreture-graph/tempreture-graph.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TempretureGraphComponent } from './tempreture-graph.component';
+
+describe('TempretureGraphComponent', () => {
+  let component: TempretureGraphComponent;
+  let fixture: ComponentFixture<TempretureGraphComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TempretureGraphComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TempretureGraphComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/tempreture-graph/tempreture-graph.component.ts b/src/app/device-report/tempreture-graph/tempreture-graph.component.ts
new file mode 100644
index 0000000..9090472
--- /dev/null
+++ b/src/app/device-report/tempreture-graph/tempreture-graph.component.ts
@@ -0,0 +1,180 @@
+import { Component, OnInit } from '@angular/core';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ContactService } from '../../contact.service';
+
+declare var Chart :any;
+
+@Component({
+  selector: 'app-tempreture-graph',
+  templateUrl: './tempreture-graph.component.html',
+  styleUrls: ['./tempreture-graph.component.scss']
+})
+export class TempretureGraphComponent implements OnInit {
+  dataSelect: any;
+  Load : Boolean = false;
+  Fromdate = new Date();
+  todate=new Date();
+  useridd: any;
+  options: any=[];
+  option:any;
+  emailid: any;
+  devicesss: any;
+  finall: any;
+  identifier : any= "temp_report_graph"; 
+  
+
+  constructor(private contactService:ContactService,private _flashMessagesService: FlashMessagesService) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+  }
+
+  flag:boolean = false;
+  InsertionTime = [];
+  fuelGraphData = [];
+  fuelVoltage = [];
+
+  getGraphData(){
+    this.InsertionTime=[];
+    this.fuelGraphData=[];
+    this.fuelVoltage = [];
+   
+    console.log(this.dataSelect);
+    if((this.deviceArr == undefined)||(this.deviceArr.length == 0)){
+    return  this._flashMessagesService.show("Select Device First", { cssClass: 'alert-danger', timeout: 2000 });
+    }else{
+      var dID = this.deviceArr[0];
+    }
+    var fDate = this.Fromdate.toISOString();
+    var tDate = this.todate.toISOString();
+    this.Load = true;
+    this.contactService.fuelReportData(dID,fDate,tDate)
+      .subscribe(res=>{
+        this.Load  = false;
+        let graphData=res
+        console.log("graphData",res);
+        if(graphData.length != 0){
+          this.flag = true;
+        }
+        for(var i=graphData.length-1; i>=0;i--){
+          var fuelData = graphData[i].currentFuel?graphData[i].currentFuel:0;
+          var voltageData = graphData[i].fuelVoltage?parseFloat(graphData[i].fuelVoltage)/1000:0;
+          this.fuelVoltage.push(voltageData);
+          this.fuelGraphData.push(fuelData);
+          var iTime = new Date(graphData[i].insertionTime).toLocaleString();
+          this.InsertionTime.push(iTime)
+        }
+
+        // this.getgraphoption();
+        this.dataToPlot();
+     
+      
+      },err=>{
+        this.Load  = false;
+      })
+  }
+   fuelChart:any;
+  dataToPlot(){
+  
+    if(this.fuelChart != undefined){
+      this.fuelChart.destroy();
+    }
+    this.fuelVoltage
+    this.fuelGraphData
+    this.InsertionTime
+  
+    var that = this;
+    var canvas = <HTMLCanvasElement> document.getElementById("fuelChart");
+    var ctx = canvas.getContext("2d");
+
+     this.fuelChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+          labels: this.InsertionTime,
+          datasets: [{
+              label: 'Temprature',
+              data: this.fuelGraphData,
+              backgroundColor: [
+                  'rgba(255, 99, 132, 0.2)',
+                  'rgba(54, 162, 235, 0.2)',
+                  'rgba(255, 206, 86, 0.2)',
+                  'rgba(75, 192, 192, 0.2)',
+                  'rgba(153, 102, 255, 0.2)',
+                  'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                  'rgba(255, 99, 132, 1)',
+                  'rgba(54, 162, 235, 1)',
+                  'rgba(255, 206, 86, 1)',
+                  'rgba(75, 192, 192, 1)',
+                  'rgba(153, 102, 255, 1)',
+                  'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1
+          },
+          {
+            label: 'Voltage',
+            data: this.fuelVoltage,
+            backgroundColor: [
+              'rgba(73,188,170,0.4)'
+            ],
+            borderColor: [
+              'rgba(73,188,170,1)',
+             
+            ],
+            borderWidth: 1
+        }
+         ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }]
+          }
+      }
+  });
+
+
+
+
+  }
+
+  deviceArr=[];
+
+  getReport(event){
+   
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+      console.log('this.deviceArr',this.deviceArr);
+      
+      this.Fromdate = fd;
+      this.todate = td;
+      console.log("b4");
+     
+  
+     
+     
+      this.getGraphData();
+        
+  
+   
+  }
+  
+
+}
diff --git a/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.html b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.html
new file mode 100644
index 0000000..873c201
--- /dev/null
+++ b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.html
@@ -0,0 +1,3 @@
+<p>
+  new-temp-report works!
+</p>
diff --git a/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.scss b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.spec.ts b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.spec.ts
new file mode 100644
index 0000000..db685f4
--- /dev/null
+++ b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewTempReportComponent } from './new-temp-report.component';
+
+describe('NewTempReportComponent', () => {
+  let component: NewTempReportComponent;
+  let fixture: ComponentFixture<NewTempReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewTempReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewTempReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.ts b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.ts
new file mode 100644
index 0000000..9750832
--- /dev/null
+++ b/src/app/device-report/tempreture-report/new-temp-report/new-temp-report.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-new-temp-report',
+  templateUrl: './new-temp-report.component.html',
+  styleUrls: ['./new-temp-report.component.scss']
+})
+export class NewTempReportComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/device-report/tempreture-report/tempreture-report.component.html b/src/app/device-report/tempreture-report/tempreture-report.component.html
new file mode 100644
index 0000000..0eb44fc
--- /dev/null
+++ b/src/app/device-report/tempreture-report/tempreture-report.component.html
@@ -0,0 +1,150 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;min-height: 100vh;">
+  <div class="row" style="width:100%;">
+    <div class="col-12">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+      <p style=" text-align: center; font-weight: 500; font-size: 24px;" class="headStyle">{{'TEMPERATURE REPORT' | translate}}</p>
+      <div class="float-right" style="position: absolute;top: 0;padding: 3px;right: 0;border: 1px solid red;">
+        <span>List View</span>
+        <md-slide-toggle  style="height: 0px !important"
+          ngDefaultControl (change)="viewGraph($event)"></md-slide-toggle>
+          <span>Graph View</span>
+      </div>
+      <flash-messages style="float: center;"></flash-messages>
+    </div>
+  </div>
+  <div class="row" style=" width: 100%; padding-bottom: 10px; padding-top: 10px; background: #e5e5e5;">
+    <div class="col-2" style="text-align: right">
+      <md-select  [(ngModel)]="travelPat_duration.interval" placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
+        <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
+          {{path.label}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-2" style="text-align: center;margin-top:5px;">
+        <md-input-container>
+            <input mdInput placeholder="{{'Devices' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option" 
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
+                <span>{{ option_1.value }}</span>
+              </md-option>
+            </md-autocomplete> 
+          </md-input-container>    
+    </div>  
+    <div class="col-4" style="margin-top: 5px">
+      <div class="row">
+        <div class="col-6">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-6">
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true" ></owl-date-time>
+        </div>
+      </div>
+    </div>
+    <div class="col-4" style="margin-top: 20px; text-align: center; padding-left: 0; padding-right: 0;">
+        <!-- <md-checkbox type=”checkbox” [disabled] = "!disable_pdf_button" style= "margin-right:10px;margin-bottom:0px;" md-tooltip= "Show address" (change)="selectedStatus($event)"></md-checkbox> -->
+        <button style="background-color: #2d4262;color:#fdfdfd;" md-raised-button (click)="travelPathReport()">{{'SEARCH' | translate}}</button>
+        <button [disabled] = "!disable_pdf_button" style="background-color: #d81111;color:#fdfdfd;" md-raised-button (click)="export_pdf()">{{'EXPORT PDF' | translate}}</button>
+        <button style="background-color: #308411;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'EXPORT EXCEL' | translate}}</button>
+        <!-- <span [ngClass]="" (click)="selectedStatus('showAdd')" style="margin-right: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span> -->       
+    </div>
+
+  </div>
+  <div *ngIf="shownote" class="row" style="text-align: center;color: red">
+    <div class="col-12" >
+      <p>{{noteForpdf}}</p>
+    </div>
+  </div>  
+
+    <div *ngIf="!showGraph" class="row" style="width: 100%" > 
+      <div class="col-12" style="padding-left: 0;">
+          <table id="deviceTable" class="table table-striped table-hover" style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Device' | translate}}</th>
+        <th style="text-align: center">{{'IMEI' | translate}}</th>
+        <th style="text-align: center">{{'Date' | translate}}</th>
+        <th style="text-align: center">{{'ODO (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Speed (Km/hr)' | translate}}</th>
+        <th style="text-align: center">{{'External Battery' | translate}}</th>
+        <th style="text-align: center">{{'Temprature' | translate}}</th>
+        <th style="text-align: center">{{'Cumulative Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Location' | translate}}</th>     
+      </tr>
+    </thead> 
+    <!-- {{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}} -->
+    <!-- {{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}} -->
+    <tbody>
+      <tr *ngFor = "let gps_report of pathReport ; let i = index">
+        <td style="cursor:pointer ; text-align: center">{{gps_report.device_name}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{(gps_report.imei) ? gps_report.imei : "NA"}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{gps_report.date  | date :  'd/M/yyyy, h:mm a'}}</td> 
+        <td style="cursor:pointer ; text-align: center">{{gps_report.odo ?(gps_report.odo | number : '1.2-2' ): "NA"}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{get_distance(pathReport,i)}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{gps_report.speed ? (gps_report.speed  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gps_report.external_Battery?  (gps_report.external_Battery  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gettempExac(gps_report.temp)}}</td>
+        <td style="cursor:pointer ; text-align: center">{{getcummulative_distance(pathReport,i)}}</td>
+        <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "locationOnDemand">
+          <a href={{addressLink}} target="_blank" (click)= getlink(gps_report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+        </td> -->
+        <td style="cursor:pointer ; text-align: center;width:40%" >{{gps_report.address}}</td>
+      </tr>
+    </tbody>
+  </table>
+      </div>
+    </div>
+
+
+    <!-- ------------------------------------- GRAPH VIEW--------------------------------------- -->
+
+    <div id="graph" *ngIf="hide" style="  width:100%;
+         height:66.67vh;">
+    
+    
+      <div style="display: block;position: fixed;width: auto;">
+        <canvas baseChart height=" 425px" width="874px" [datasets]="lineChartData" [labels]="lineChartLabels"
+          [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
+          (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
+      </div>
+    </div>
+
+
+  </div>
+
+  <table *ngIf="!showGraph" style="display: block;position: fixed;width: auto;" id="headerTable" >
+    <tr style="text-align:center">
+      <div style="text-align:center">Table</div>
+    </tr>
+    <tr style="height:30px;border-top:1px solid black">
+      <td>
+        <span style="font-weight: 700;">Name</span>: {{deviceName}}
+      </td>
+      <td>
+        <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <span style="font-weight: 700;">Start Time</span>: {{Fromdate |date :'medium'}}
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Time</span>: {{todate | date :'medium'}}
+      </td>
+    </tr>
+    <tr style="height:30px;border-top:1px solid black">
+      <td>
+        <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Address</span>: {{endAddress}}
+      </td>
+    </tr>
+  </table>
+
+  <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "!locationOnDemand">{{gps_report.address}}</td> -->
diff --git a/src/app/device-report/tempreture-report/tempreture-report.component.scss b/src/app/device-report/tempreture-report/tempreture-report.component.scss
new file mode 100644
index 0000000..0fe5fac
--- /dev/null
+++ b/src/app/device-report/tempreture-report/tempreture-report.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/device-report/tempreture-report/tempreture-report.component.spec.ts b/src/app/device-report/tempreture-report/tempreture-report.component.spec.ts
new file mode 100644
index 0000000..eff7855
--- /dev/null
+++ b/src/app/device-report/tempreture-report/tempreture-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TempretureReportComponent } from './tempreture-report.component';
+
+describe('TempretureReportComponent', () => {
+  let component: TempretureReportComponent;
+  let fixture: ComponentFixture<TempretureReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TempretureReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TempretureReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/tempreture-report/tempreture-report.component.ts b/src/app/device-report/tempreture-report/tempreture-report.component.ts
new file mode 100644
index 0000000..999f37b
--- /dev/null
+++ b/src/app/device-report/tempreture-report/tempreture-report.component.ts
@@ -0,0 +1,943 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdSnackBar } from '@angular/material';
+declare var google :any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+declare var CanvasJS:any
+declare var html2canvas:any
+@Component({
+  selector: 'app-tempreture-report',
+  templateUrl: './tempreture-report.component.html',
+  styleUrls: ['./tempreture-report.component.scss']
+})
+export class TempretureReportComponent implements OnInit {
+  pathDuration = [
+    {label  :"1 Minutes",interval : "1"},
+    {label  :"2 Minutes",interval : "2"},
+    {label  :"5 Minutes",interval : "5"},
+    {label  :"10 Minutes",interval : "10"},
+    // {label  :"60 Minutes",interval : "60"}
+  
+  ];
+  hide:boolean=false
+  public lineChartData: Array<any> = [
+    { data: [0, 0, 0, 0, 0, 0, 0], label: 'Temperature' },
+  ];
+  public lineChartLabels: Array<any> = ['', '', '', '', '', '', ''];
+  public lineChartOptions: any = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        ticks: {
+          beginAtZero: false,
+          max: 6000,
+          min: 0
+        }
+      }]
+    }
+
+  };
+  public lineChartColors: Array<any> = [
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    },
+    { // dark grey
+      backgroundColor: 'rgba(77,83,96,0.2)',
+      borderColor: 'rgba(77,83,96,1)',
+      pointBackgroundColor: 'rgba(77,83,96,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(77,83,96,1)'
+    },
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    }
+  ];
+  public lineChartLegend: boolean = true;
+  public lineChartType: string = 'line';
+  deviceNameForPDF: any;
+  startTime: any;
+  endTime: any;
+  startAddress: any;
+  endAddress: any;
+
+
+
+  // events
+  public chartClicked(e: any): void {
+    // console.log(e);
+  }
+
+  public chartHovered(e: any): void {
+    // console.log(e);
+  }
+  travelPat_duration ={label  :"10 Minutes",interval : "10"};
+  superAdmin: any;
+  fs: any;
+
+  disable_pdf_button : boolean = false;
+  ls: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  devicesss: any;
+  finall: any;
+  options: any=[];
+  option : any;
+  dataSelect: any=[];
+  cust: boolean;
+  mb: string;
+  logoutbut: boolean;
+  dealer: boolean;
+  or: any;
+  logo: any;
+  text: any;
+  Fromdate = new Date();
+  todate = new Date();
+  showError : boolean = false;
+  Load: boolean =false;
+  pathReport: any;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  start_add_lat: any;
+  start_add_long: any;
+  clear_interval: any;
+  noteForpdf: string;
+  showGraph:boolean=false;
+  constructor(private contactService: ContactService,private router: Router,public snackBar: MdSnackBar) { }
+
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+    // var to_date = new Date();
+    // this.todate.setMinutes(this.todate.getMinutes() + parseInt(this.travelPat_duration.interval));
+    // this.Fromdate.setHours()
+
+    
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              image:this.devicesss.devices[i].supAdmin?this.devicesss.devices[i].supAdmin.imageDoc:''
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log(this.options);
+     
+
+      });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+
+  
+
+}
+
+travelPathReport(){
+  var that = this;
+  if((this.Fromdate == undefined)||(this.todate == undefined)){
+    let message1="Please Select Date";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  if(this.Fromdate.getTime() > this.todate.getTime()){
+    let message1="From Date cannot be greater than to date...";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  var diff = (this.todate.getTime() - this.Fromdate.getTime()) / 3600000;
+  console.log(diff);
+
+var now  = this.todate;
+var then = this.Fromdate;
+
+// var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
+var difference =this.todate.getTime() - this.Fromdate.getTime();
+// var d = moment.duration(ms);
+// var s = d.format("hh:mm:ss");
+var hour = (difference / (60*60*1000));
+// var hourCount = Number(hour);
+var diff_hr = Math.round(hour);
+console.log('diff_hr',diff_hr);
+if(diff_hr>(24*15)){
+  let message1="Date difference should not be greater then 15 Days";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000, 
+    }); 
+    return;
+}
+
+// let r_I = difference / (1000*60) ; 
+// let report_Interval = r_I/360 ;
+
+
+
+// let Rlabel;
+// let Rinterval ;
+// // this.travelPat_duration.interval = JSON.stringify(Math.round(report_Interval)) ; 
+//  Rlabel = JSON.stringify(Math.round(report_Interval))  + " " + "Minutes";
+//  Rinterval = JSON.stringify(Math.round(report_Interval));
+//  if(parseInt(JSON.stringify(report_Interval)) < 10){
+//   Rlabel = JSON.stringify(10)  + " " + "Minutes";
+//   Rinterval = JSON.stringify(10);
+// }
+
+// this.pathDuration.push({label  :Rlabel,interval : Rinterval}) ;
+// this.travelPat_duration = {label  :Rlabel,interval : Rinterval};
+
+// // outputs: "48:39:30"
+// if (diff > 24) { 
+//   let message1="Date difference should not be more than 24 hours...";
+//   let action:any;
+//   this.snackBar.open(message1, action, {
+//     duration: 5000,
+//   }); 
+//   return;
+//  }
+
+  if((this.dataSelect.length == 0)||(this.dataSelect[0].did==undefined)){
+    let message1="Please Select Device";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Device", { cssClass: 'alert-danger', timeout: 3000 });
+    return;
+  }
+
+ 
+
+this.pathReport=[];
+  var payload ={
+    "to":this.todate,
+    "from" : this.Fromdate,
+    "device" : this.dataSelect[0].did,
+    "interval" : this.travelPat_duration.interval
+  }
+
+
+  this.Load = true;
+  var device_name = this.dataSelect[0].viewValue ; 
+  console.log("payload=>",payload);
+
+  this.contactService.getTravel_path_report(payload).subscribe(res=>{
+    clearTimeout(this.clear_interval);
+    // this.Load = false;
+    this.disable_pdf_button = true;
+    // var reportArr1=res;
+    var reportArr1=  res.filter(function (el) {
+                  return el != null;
+                });
+    var finalArra=[]
+    const that = this;
+     var j = 0;
+     if(reportArr1.length>0){
+       for (var i = 0; i < reportArr1.length; i++) {
+                       that.clocation_1(reportArr1[i], function (err, succ) {
+                         if (err) {
+                           console.log(err);
+                           j++;
+                         } else {
+                           // console.log(succ);
+                           succ['index']=j
+                           finalArra.push(succ);
+                           // console.log(finalArra,j);
+                           j++;
+                           if (j === reportArr1.length) {
+                             that.Load = false;
+                              finalArra.sort(function(a:any,b:any){
+    
+                             return new Date(b.date).valueOf() - new Date(a.date).valueOf();
+                           });
+                           console.log(finalArra);
+                           that.pathReport=finalArra;
+                           that.hide=true;
+                           that.getdata(that.pathReport)
+                             // callback({ data: that.finalArr });
+                           }
+                         }
+                       })
+       
+                      
+                     }
+
+     }else{
+        this.Load = false;
+     }
+
+ 
+    // for(let i = 0; i <res.length ; i++){
+    //   if(res[i]!=null){
+    //     res[i].Device_name = device_name;
+    //     this.pathReport.push(res[i]);
+    //   }else{
+    //     console.log('resnullresnullresnullresnullres=>',res[i]);
+    //   }
+    // }
+
+    // if(this.pathReport.length == 0){  
+    //   this.disable_pdf_button = false;
+    //   let message1="No Data Available";
+    //   let action:any;
+    //   this.snackBar.open(message1, action, {
+    //     duration: 5000,      
+    //   }); 
+    //   // this._flashMessagesService.show("No Data Available", { cssClass: 'alert-danger', timeout: 3000 });
+    // }else{
+    //   this.convertAddress();
+
+    // }
+
+  },err=>{
+    this.Load = false;
+    let message1="Please Try Again";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      }); 
+    // this._flashMessagesService.show("Please Try Again", { cssClass: 'alert-danger', timeout: 3000 });
+  })
+
+
+}
+
+   clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+      }
+    
+  
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['address'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = bdata;
+            latlngObj['device_name']=outerThis.deviceName
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            latlngObj['device_name']=outerThis.deviceName
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['address'] = res.address;
+        latlngObj['device_name']=outerThis.deviceName
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = cdata;
+            latlngObj['device_name']=outerThis.deviceName
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            latlngObj['device_name']=outerThis.deviceName
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index].odo)-parseFloat(gps_report[0].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index_1].odo)-parseFloat(gps_report[index_1-1].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+export_pdf(){
+  console.log('pdf');
+  var image=""
+  console.log(this.dataSelect);
+  
+    if(this.dataSelect[0].image.length != 0){
+        var str =  this.dataSelect[0].image[0]
+        var splitStr = str.split('/');
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+          concatStr += '/'+tt ; 
+         }
+       }
+       image='https://www.oneqlik.in' + concatStr
+       console.log("IMAGE==>",image);
+      
+      }
+
+  this.startTime=this.pathReport[0].fromTime
+  this.endTime=this.pathReport[0].toTime;
+   this.startAddress=this.pathReport[0].address
+  this.endAddress=this.pathReport[this.pathReport.length-1].address
+  var name=this.deviceName+" Temperature Report from "+moment(this.Fromdate).format('lll')+" to "+moment(this.todate).format('lll')+'.pdf'
+ 
+  console.log(name,this.startTime,this.endTime,image);
+  
+  const that=this
+  // var element = $('#graph');
+        var pdfOptions = {
+            orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+            unit: "pt",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+            format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+        };
+
+        // var doc = new jsPDF(pdfOptions);
+
+        // var pageWidth = doc.internal.pageSize.width-20;
+        // var width  =  pageWidth;
+
+        html2canvas(document.getElementById('graph'), { useCORS: true,letterRendering: 1, allowTaint : true, onrendered : function (canvas) {
+           
+            let img = new Image();
+      img.src = canvas.toDataURL('image/png');
+      console.log(img.src);
+      
+      img.onload = function () {
+        console.log("IN ");
+        let pdf = new jsPDF(pdfOptions);
+        var header = function(data) {
+                      pdf.setFontSize(15);
+                      pdf.setTextColor(40);
+                      pdf.setFontStyle('normal');
+                     
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      pdf.text("Temperature Report", data.settings.margin.left, 50);
+                    };
+         var element = $('#graph');
+              var imgWidth = element.width();
+                var imgHeight = element.height();
+                var pageWidth = pdf.internal.pageSize.width+20;
+                var height =  (pageWidth * imgHeight)/ imgWidth
+        console.log(img);
+        // that.showGraph=false;
+        pdf.addImage(img, 'PNG', 5, 102 , pageWidth, 180);
+
+        let finalY = pdf.previousAutoTable.finalY;
+            that.toDataURL(image, function (dataUrl) {
+                  if(image)
+                   pdf.addImage(dataUrl, 'JPEG', 4, 4, 45, 45);
+                  let finalY = pdf.previousAutoTable.finalY;
+                  pdf.text('Temperature Report', 55, 20);
+                   var header = function(data) {
+                      pdf.setFontSize(15);
+                      pdf.setTextColor(40);
+                      pdf.setFontStyle('normal');
+                      console.log(dataUrl);
+                     
+                    };
+                    pdf.autoTable({html:"#headerTable",margin:{bottom:140,left:55,right:8,top:30},theme:'plain'});
+                 
+                  // doc.autoTable({
+                  //     head: outerThis.headRows(),
+                  //     // margin: { top: 80 },
+                  //     startY: doc.autoTable.previous.finalY + 200,
+                  //     body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+                  //     // beforePageContent: header,
+                  // });
+                  // doc.save(name);
+             
+                  pdf.autoTable({
+                  theme: 'grid',
+                  html: '#deviceTable', 
+                  //  margin: {top: 320},
+                   startY: pdf.autoTable.previous.finalY + 200,
+              
+            });
+            pdf.save(name);
+              });
+};
+
+}
+ });
+
+}
+
+ toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+    // var imgWidth = element.width();
+    //       var imgHeight = element.height();
+
+    //       var height =  (pageWidth * imgHeight)/ imgWidth;
+
+    //       var imgData = canvas.toDataURL('image/png');
+    //       console.log(imgData);
+          
+    //       doc.addImage(canvas.toDataURL('image/png'), 'PNG', 5, 30 , width, height);
+
+
+        // html2canvas(element, {
+        //     useCORS: true, // MUST
+        //     onrendered: function(canvas) {
+        //         var imgWidth = element.width();
+        //         var imgHeight = element.height();
+
+        //         var height =  (pageWidth * imgHeight)/ imgWidth;
+
+        //         var imgData = canvas.toDataURL('image/png');
+        //         console.log(imgData);
+                
+        //         doc.addImage(imgData, 'PNG', 5, 30 , width, height);
+        //     }
+
+        //   })
+
+    //       html2canvas(document.querySelector('#graph'), {useCORS: true},function(canvas) {
+    //   let img = new Image();
+    //   img.src = canvas.toDataURL('image/png');
+    //   img.onload = function () {
+    //     let pdf = new jsPDF('landscape', 'mm', 'a4');
+    //     pdf.addImage(img, 0, 0, pdf.internal.pageSize.width, pdf.internal.pageSize.height);
+    //     pdf.save('certificate.pdf');
+    //   };
+    // })
+    // };
+
+
+  // this.noteForpdf = '';
+  // var f_date = moment(this.Fromdate).format('lll'); 
+  // var t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + '-' + t_date;
+  // let doc = new jsPDF('l','pt','a4');
+  // doc.text('Travel Path Report', 350, 30);
+  // doc.text(date_combine, 250, 60);
+  
+
+  // doc.addHTML(document.getElementById("exportPdf"), function() {
+  //   var tpr ="";
+  //    doc.save("obrz.pdf");
+  // });
+
+  // var specialElementHandlers = {
+  //   '#editor': function (element: any, renderer: any) {
+  //     return true;
+  //   }
+  // };
+
+  // doc.autoTable({
+  //   theme: 'striped',
+  //   html: '#deviceTable', 
+  //   margin: {top: 100},
+  //   // styles :  {
+  //   //   cellWidth : 50
+  //   // },     
+  //   willDrawCell: data => {
+  //     console.log('data=>',data);
+
+  //   //  console.log('data=>',data.row.index.length);
+     
+  //   // if(data.cell.text[0] === "Device"){
+  //   //   data.row.cells[0].styles.fillColor =  [224,224,224];
+  //   // }
+  //     if((data.row.index === 0)||(data.cell.text[0] === "Device")){ 
+  //       // data.row.cells[0].styles.halign = 'center';
+  //       data.row.cells[1].styles.halign = 'center';
+  //       data.row.cells[2].styles.halign = 'center';
+  //       data.row.cells[3].styles.halign = 'center';
+  //       data.row.cells[4].styles.halign = 'center';
+  //       data.row.cells[5].styles.halign = 'center';
+  //       data.row.cells[6].styles.halign = 'center';
+  //       // data.row.cells[0].styles.fillColor =  [224,224,224];
+  //       // doc.setLineHeightFactor()
+  //     }  
+  //     // data.row.cells[0].styles.halign = 'center';
+  //     data.row.cells[1].styles.halign = 'center';
+  //     data.row.cells[2].styles.halign = 'center';
+  //     data.row.cells[3].styles.halign = 'center';
+  //     data.row.cells[4].styles.halign = 'center';
+  //     data.row.cells[5].styles.halign = 'center';
+  //     data.row.cells[6].styles.halign = 'center';
+
+
+    
+  //   }
+    
+  // });
+  // var pdfNameStr = travel_path_report
+  // doc.save('travel_path_report.pdf');
+
+
+
+// }
+deviceName
+filterStates(val) {
+  this.deviceName=val
+  console.log(this.deviceName);
+
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    console.log(this.dataSelect);
+    
+      return this.dataSelect;
+
+  }
+}
+locationOnDemand : boolean =true;
+shownote:boolean = false;
+locationAddress: any;
+
+addressLink = "";
+getlink(gps_report){
+  console.log("gps_report");
+  if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+    this.lattitude = null;
+  } else {
+      this.lattitude =gps_report.latDecimal;  
+  }
+  if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+    this.longitude = null;
+  }else{
+    this.longitude =gps_report.longDecimal;
+  }
+  this.addressLink =  'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+  return this.addressLink ; 
+}
+
+closeProcess:any;
+convertAddress(){
+  
+  // console.log('gRport=>',gRport);
+ 
+  var i = 0;
+  this.closeProcess= this.pathReport.length;
+  var outerThis =this;
+  console.log('this.closeProcess',this.closeProcess);
+  // let conditionalLogic = 2000 ; 
+  function f() {
+    let start_add_lat:any;
+    let start_add_long:any;
+    if((outerThis.pathReport[i].latDecimal!=null)&&(outerThis.pathReport[i].longDecimal!=null)){
+      start_add_lat =  outerThis.pathReport[i].latDecimal;
+      start_add_long= outerThis.pathReport[i].longDecimal; 
+    }else{
+      start_add_lat = null;
+      start_add_long= null;  
+    }
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng_start = new google.maps.LatLng(start_add_lat,start_add_long);
+   
+    var request={
+      latLng:latlng_start
+    }
+
+    let apiPayload = {
+      lat : start_add_lat,
+      long  : start_add_long
+
+    }
+
+    outerThis.contactService.getAddressByApi(apiPayload).subscribe(res=>{
+      // console.log('addressresponse=>', res);
+      if (res.message == "Address not found in databse") {
+        // conditionalLogic = 5000 ; 
+     
+        geocoder.geocode(request, function (data, status) {
+          let start_add: any;
+          if (status == google.maps.GeocoderStatus.OK) {
+            if (data[0] != null) {
+              start_add = data[0].formatted_address;
+              if (start_add == "Antarctica") {
+                start_add = "NA";
+              }
+
+            } else {
+              start_add = "NA";
+            }
+            outerThis.pathReport[i-1].address = start_add;
+          }
+          else {
+            start_add = "NA";    
+           
+          }
+          outerThis.pathReport[i-1].address = start_add;
+
+
+        })
+        }else{   
+            // conditionalLogic = 100 ;         
+            outerThis.pathReport[i-1].address = res.address;       
+        } 
+    },err=>{
+
+    })
+
+  
+    i++;
+    if( i < outerThis.closeProcess ){
+     
+      outerThis.clear_interval =  setTimeout( f,2000 );
+    }
+  }
+  f();
+
+}
+
+
+
+tab:any;
+
+exportExcel() {
+
+  var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+  var textRange; var j=0;
+  this.tab = document.getElementById('deviceTable'); // id of table
+
+  for(j = 0 ; j < this.tab.rows.length; j++) 
+  {     
+      tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      //tab_text=tab_text+"</tr>";
+  }
+
+  tab_text=tab_text+"</table>";
+  tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+
+
+  var ua = window.navigator.userAgent;
+  var msie = ua.indexOf("MSIE "); 
+
+  var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+  return (sa);
+}
+
+gettempExac(temp){
+  if(temp){
+    return (parseFloat(temp)/10).toFixed(2)
+  }else{
+    return 0;
+  }
+
+}
+
+  viewGraph(ev){
+    console.log(ev);
+    
+    this.showGraph=ev.checked
+
+    
+
+  }
+
+   getdata(final) {
+    //  this.showGraph=true;
+    final.sort((x, y) => +new Date(y.date) - +new Date(x.date));
+    let fi = [];
+    let f2=[]
+    let time = [];
+    this.lineChartLabels.length = 0;
+    for (let q = final.length - 1; q > 0; q--) {
+      fi.push(final[q].temp?(parseFloat(final[q].temp)/10).toFixed(2) :0);
+       f2.push(final[q].temp2?(parseFloat(final[q].temp2)/10).toFixed(2) :0);
+      let t = new Date(final[q].date).toLocaleTimeString();
+      // console.log(t);
+      //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+      this.lineChartLabels.push(t)
+    }
+    this.Load = false;
+    this.lineChartData = [{
+      label: "Temp1",
+      data: fi
+    },
+    {
+      label: "Temp2",
+      data: f2
+    }
+  ];
+
+  }
+
+  
+}
diff --git a/src/app/device-report/travel-path-report/travel-path-report.component.html b/src/app/device-report/travel-path-report/travel-path-report.component.html
new file mode 100644
index 0000000..1cc6c3e
--- /dev/null
+++ b/src/app/device-report/travel-path-report/travel-path-report.component.html
@@ -0,0 +1,98 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;min-height: 100vh;">
+  <div class="row" style="width:100%; text-align: center; font-weight: 500; font-size: 24px;">
+    <div class="col-12">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+      <p class="headStyle">{{'TRAVEL PATH REPORT' | translate}}</p>
+      <flash-messages style="float: center;"></flash-messages>
+    </div>
+  </div>
+  <div class="row" style=" width: 100%; padding-bottom: 10px; padding-top: 10px; background: #e5e5e5;">
+    <div class="col-2" style="text-align: right">
+      <md-select [disabled]="true" [(ngModel)]="travelPat_duration.interval" placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
+        <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
+          {{path.label}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-2" style="text-align: center;margin-top:5px;">
+        <md-input-container>
+            <input mdInput placeholder="{{'Devices' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option" 
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
+                <span>{{ option_1.value }}</span>
+              </md-option>
+            </md-autocomplete> 
+          </md-input-container>    
+    </div>  
+    <div class="col-4" style="margin-top: 5px">
+      <div class="row">
+        <div class="col-6">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-6">
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true" ></owl-date-time>
+        </div>
+      </div>
+    </div>
+    <div class="col-4" style="margin-top: 20px; text-align: center; padding-left: 0; padding-right: 0;">
+        <!-- <md-checkbox type=”checkbox” [disabled] = "!disable_pdf_button" style= "margin-right:10px;margin-bottom:0px;" md-tooltip= "Show address" (change)="selectedStatus($event)"></md-checkbox> -->
+        <button style="background-color: #2d4262;color:#fdfdfd;" md-raised-button (click)="travelPathReport()">{{'SEARCH' | translate}}</button>
+        <button [disabled] = "!disable_pdf_button" style="background-color: #d81111;color:#fdfdfd;" md-raised-button (click)="export_pdf()">{{'EXPORT PDF' | translate}}</button>
+        <button style="background-color: #308411;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'EXPORT EXCEL' | translate}}</button>
+        <!-- <span [ngClass]="" (click)="selectedStatus('showAdd')" style="margin-right: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span> -->       
+    </div>
+
+  </div>
+  <div *ngIf="shownote" class="row" style="text-align: center;color: red">
+    <div class="col-12" >
+      <p>{{noteForpdf}}</p>
+    </div>
+  </div>  
+
+    <div class="row" style="width: 100%" > 
+      <div class="col-12" style="padding-left: 0;">
+          <table id="deviceTable" class="table table-striped table-hover" style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Device' | translate}}</th>
+        <th style="text-align: center">{{'IMEI' | translate}}</th>
+        <th style="text-align: center">{{'Date' | translate}}</th>
+        <th style="text-align: center">{{'ODO (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Speed (Km/hr)' | translate}}</th>
+        <th style="text-align: center">{{'External Battery' | translate}}</th>
+        <th style="text-align: center">{{'Temprature' | translate}}</th>
+        <th style="text-align: center">{{'Cumulative Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Location' | translate}}</th>     
+      </tr>
+    </thead> 
+    <!-- {{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}} -->
+    <!-- {{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}} -->
+    <tbody>
+      <tr *ngFor = "let gps_report of pathReport ; let i = index">
+        <td style="cursor:pointer ; text-align: center">{{gps_report.Device_name}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{(gps_report.imei) ? gps_report.imei : "NA"}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{gps_report.date  | date :  'd/M/yyyy, h:mm a'}}</td> 
+        <td style="cursor:pointer ; text-align: center">{{gps_report.odo ?(gps_report.odo | number : '1.2-2' ): "NA"}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{get_distance(pathReport,i)}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{gps_report.speed ? (gps_report.speed  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gps_report.external_Battery?  (gps_report.external_Battery  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gettempExac(gps_report.temp)}}</td>
+        <td style="cursor:pointer ; text-align: center">{{getcummulative_distance(pathReport,i)}}</td>
+        <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "locationOnDemand">
+          <a href={{addressLink}} target="_blank" (click)= getlink(gps_report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+        </td> -->
+        <td style="cursor:pointer ; text-align: center;width:40%" >{{gps_report.address}}</td>
+      </tr>
+    </tbody>
+  </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "!locationOnDemand">{{gps_report.address}}</td> -->
diff --git a/src/app/device-report/travel-path-report/travel-path-report.component.scss b/src/app/device-report/travel-path-report/travel-path-report.component.scss
new file mode 100644
index 0000000..7a5fa9b
--- /dev/null
+++ b/src/app/device-report/travel-path-report/travel-path-report.component.scss
@@ -0,0 +1,38 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/travel-path-report/travel-path-report.component.spec.ts b/src/app/device-report/travel-path-report/travel-path-report.component.spec.ts
new file mode 100644
index 0000000..766cf2a
--- /dev/null
+++ b/src/app/device-report/travel-path-report/travel-path-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TravelPathReportComponent } from './travel-path-report.component';
+
+describe('TravelPathReportComponent', () => {
+  let component: TravelPathReportComponent;
+  let fixture: ComponentFixture<TravelPathReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TravelPathReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TravelPathReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/travel-path-report/travel-path-report.component.ts b/src/app/device-report/travel-path-report/travel-path-report.component.ts
new file mode 100644
index 0000000..940414e
--- /dev/null
+++ b/src/app/device-report/travel-path-report/travel-path-report.component.ts
@@ -0,0 +1,598 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdSnackBar } from '@angular/material';
+declare var google :any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+
+
+@Component({
+  selector: 'app-travel-path-report',
+  templateUrl: './travel-path-report.component.html',
+  styleUrls: ['./travel-path-report.component.scss']
+})
+export class TravelPathReportComponent implements OnInit {
+  pathDuration = [
+    {label  :"10 Minutes",interval : "10"},
+    // {label  :"20 Minutes",interval : "20"},
+    // {label  :"30 Minutes",interval : "30"},
+    // {label  :"45 Minutes",interval : "45"},
+    // {label  :"60 Minutes",interval : "60"}
+  
+  ];
+  travelPat_duration ={label  :"10 Minutes",interval : "10"};
+  superAdmin: any;
+  fs: any;
+
+  disable_pdf_button : boolean = false;
+  ls: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  devicesss: any;
+  finall: any;
+  options: any=[];
+  option : any;
+  dataSelect: any=[];
+  cust: boolean;
+  mb: string;
+  logoutbut: boolean;
+  dealer: boolean;
+  or: any;
+  logo: any;
+  text: any;
+  Fromdate = new Date();
+  todate = new Date();
+  showError : boolean = false;
+  Load: boolean =false;
+  pathReport: any;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  start_add_lat: any;
+  start_add_long: any;
+  clear_interval: any;
+  noteForpdf: string;
+  constructor(private contactService: ContactService,private router: Router,public snackBar: MdSnackBar) { }
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+    // var to_date = new Date();
+    // this.todate.setMinutes(this.todate.getMinutes() + parseInt(this.travelPat_duration.interval));
+    // this.Fromdate.setHours()
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log(this.options);
+     
+
+      });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+
+  
+
+}
+
+travelPathReport(){
+  var that = this;
+  if((this.Fromdate == undefined)||(this.todate == undefined)){
+    let message1="Please Select Date";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  if(this.Fromdate.getTime() > this.todate.getTime()){
+    let message1="From Date cannot be greater than to date...";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  var diff = (this.todate.getTime() - this.Fromdate.getTime()) / 3600000;
+  console.log(diff);
+
+var now  = this.todate;
+var then = this.Fromdate;
+
+// var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
+var difference =this.todate.getTime() - this.Fromdate.getTime();
+// var d = moment.duration(ms);
+// var s = d.format("hh:mm:ss");
+var hour = (difference / (60*60*1000));
+// var hourCount = Number(hour);
+var diff_hr = Math.round(hour);
+console.log('diff_hr',diff_hr);
+if(diff_hr>(24*15)){
+  let message1="Date difference should not be greater then 15 Days";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000, 
+    }); 
+    return;
+}
+
+let r_I = difference / (1000*60) ; 
+let report_Interval = r_I/360 ;
+
+
+
+let Rlabel;
+let Rinterval ;
+// this.travelPat_duration.interval = JSON.stringify(Math.round(report_Interval)) ; 
+ Rlabel = JSON.stringify(Math.round(report_Interval))  + " " + "Minutes";
+ Rinterval = JSON.stringify(Math.round(report_Interval));
+ if(parseInt(JSON.stringify(report_Interval)) < 10){
+  Rlabel = JSON.stringify(10)  + " " + "Minutes";
+  Rinterval = JSON.stringify(10);
+}
+
+this.pathDuration.push({label  :Rlabel,interval : Rinterval}) ;
+this.travelPat_duration = {label  :Rlabel,interval : Rinterval};
+
+// // outputs: "48:39:30"
+// if (diff > 24) { 
+//   let message1="Date difference should not be more than 24 hours...";
+//   let action:any;
+//   this.snackBar.open(message1, action, {
+//     duration: 5000,
+//   }); 
+//   return;
+//  }
+
+  if((this.dataSelect.length == 0)||(this.dataSelect[0].did==undefined)){
+    let message1="Please Select Device";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Device", { cssClass: 'alert-danger', timeout: 3000 });
+    return;
+  }
+
+ 
+
+this.pathReport=[];
+  var payload ={
+    "to":this.todate,
+    "from" : this.Fromdate,
+    "device" : this.dataSelect[0].did,
+    "interval" : this.travelPat_duration.interval
+  }
+
+
+  this.Load = true;
+  var device_name = this.dataSelect[0].viewValue ; 
+  console.log("payload=>",payload);
+
+  this.contactService.getTravel_path_report(payload).subscribe(res=>{
+    clearTimeout(this.clear_interval);
+    this.Load = false;
+    this.disable_pdf_button = true;
+ 
+    for(let i = 0; i <res.length ; i++){
+      if(res[i]!=null){
+        res[i].Device_name = device_name;
+        this.pathReport.push(res[i]);
+      }else{
+        console.log('resnullresnullresnullresnullres=>',res[i]);
+      }
+    }
+
+    if(this.pathReport.length == 0){  
+      this.disable_pdf_button = false;
+      let message1="No Data Available";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,      
+      }); 
+      // this._flashMessagesService.show("No Data Available", { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+      this.convertAddress();
+    }
+
+  },err=>{
+    this.Load = false;
+    let message1="Please Try Again";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      }); 
+    // this._flashMessagesService.show("Please Try Again", { cssClass: 'alert-danger', timeout: 3000 });
+  })
+
+
+}
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index].odo)-parseFloat(gps_report[0].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index_1].odo)-parseFloat(gps_report[index_1-1].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+export_pdf(){
+  console.log('pdf');
+  // jsPDF(orientation, unit, format
+
+  this.noteForpdf = '';
+  var f_date = moment(this.Fromdate).format('lll'); 
+  var t_date =moment(this.todate).format('lll');
+  var date_combine = f_date + '-' + t_date;
+  let doc = new jsPDF('l','pt','a4');
+  doc.text('Travel Path Report', 350, 30);
+  doc.text(date_combine, 250, 60);
+  
+
+  // doc.addHTML(document.getElementById("exportPdf"), function() {
+  //   var tpr ="";
+  //    doc.save("obrz.pdf");
+  // });
+
+  var specialElementHandlers = {
+    '#editor': function (element: any, renderer: any) {
+      return true;
+    }
+  };
+
+  doc.autoTable({
+    theme: 'striped',
+    html: '#deviceTable', 
+    margin: {top: 100},
+    // styles :  {
+    //   cellWidth : 50
+    // },     
+    willDrawCell: data => {
+      console.log('data=>',data);
+
+    //  console.log('data=>',data.row.index.length);
+     
+    // if(data.cell.text[0] === "Device"){
+    //   data.row.cells[0].styles.fillColor =  [224,224,224];
+    // }
+      if((data.row.index === 0)||(data.cell.text[0] === "Device")){ 
+        // data.row.cells[0].styles.halign = 'center';
+        data.row.cells[1].styles.halign = 'center';
+        data.row.cells[2].styles.halign = 'center';
+        data.row.cells[3].styles.halign = 'center';
+        data.row.cells[4].styles.halign = 'center';
+        data.row.cells[5].styles.halign = 'center';
+        data.row.cells[6].styles.halign = 'center';
+        // data.row.cells[0].styles.fillColor =  [224,224,224];
+        // doc.setLineHeightFactor()
+      }  
+      // data.row.cells[0].styles.halign = 'center';
+      data.row.cells[1].styles.halign = 'center';
+      data.row.cells[2].styles.halign = 'center';
+      data.row.cells[3].styles.halign = 'center';
+      data.row.cells[4].styles.halign = 'center';
+      data.row.cells[5].styles.halign = 'center';
+      data.row.cells[6].styles.halign = 'center';
+
+
+    
+    }
+    
+  });
+  // var pdfNameStr = travel_path_report
+  doc.save('travel_path_report.pdf');
+
+
+
+}
+
+// changeDate(path){
+//   console.log("inside function");
+ 
+//   this.todate = new Date(this.Fromdate.setMinutes(this.Fromdate.getMinutes() + parseInt(path.interval)))
+//   console.log("this.travelPat_duration",this.todate);
+
+// }
+
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+
+  }
+}
+locationOnDemand : boolean =true;
+shownote:boolean = false;
+// selectedStatus(ev){
+//   // if(ev.checked === true){
+//   //   this.locationOnDemand = !this.locationOnDemand;
+//   //   this.disable_pdf_button = true;
+//   //   this.shownote = true;
+//   //   this.noteForpdf = "Please wait while we are fetching Address, We recommend you not to download pdf before complete address conversion !!!"
+//   //   this.convertAddress();
+
+//   // }else{
+//     // clearTimeout(this.clear_interval);
+//     // this.shownote = false;
+//     this.noteForpdf = ""
+//     this.disable_pdf_button = false;
+//     // this.travelPathReport()
+//     // this.locationOnDemand = !this.locationOnDemand
+
+//   // }
+// }
+
+locationAddress: any;
+// getAddress(gps_report) {
+//   var outerThis = this;
+//   if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+//     this.lattitude = null;
+//   } else {
+//       this.lattitude =gps_report.latDecimal;  
+//   }
+//   if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+//     this.longitude = null;
+//   }else{
+//     this.longitude =gps_report.longDecimal;
+//   }
+
+
+//   var geocoder = new google.maps.Geocoder();
+//   var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+//   // var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+//   console.log("this.lattitude, this.longitude",this.lattitude, this.longitude);
+
+//   var request = {
+//     latLng: latlng
+//   };
+
+//   var that = this;
+//   geocoder.geocode(request, function (data, status) {
+//     if (status == google.maps.GeocoderStatus.OK) {
+//       if (data[0] != null) {
+//         outerThis.address_show = data[0].formatted_address;
+//           gps_report.locationAddress = outerThis.address_show;
+//       } else { 
+//         gps_report.locationAddress = "No address available";     
+//       }
+//     }
+//     else {
+//       outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+//       gps_report.locationAddress = outerThis.address_show;
+//     }
+
+//   })
+// }
+
+addressLink = "";
+getlink(gps_report){
+  console.log("gps_report");
+  if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+    this.lattitude = null;
+  } else {
+      this.lattitude =gps_report.latDecimal;  
+  }
+  if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+    this.longitude = null;
+  }else{
+    this.longitude =gps_report.longDecimal;
+  }
+  this.addressLink =  'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+  return this.addressLink ; 
+}
+
+closeProcess:any;
+convertAddress(){
+  
+  // console.log('gRport=>',gRport);
+ 
+  var i = 0;
+  this.closeProcess= this.pathReport.length;
+  var outerThis =this;
+  console.log('this.closeProcess',this.closeProcess);
+  // let conditionalLogic = 2000 ; 
+  function f() {
+    let start_add_lat:any;
+    let start_add_long:any;
+    if((outerThis.pathReport[i].latDecimal!=null)&&(outerThis.pathReport[i].longDecimal!=null)){
+      start_add_lat =  outerThis.pathReport[i].latDecimal;
+      start_add_long= outerThis.pathReport[i].longDecimal; 
+    }else{
+      start_add_lat = null;
+      start_add_long= null;  
+    }
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng_start = new google.maps.LatLng(start_add_lat,start_add_long);
+   
+    var request={
+      latLng:latlng_start
+    }
+
+    let apiPayload = {
+      lat : start_add_lat,
+      long  : start_add_long
+
+    }
+
+    outerThis.contactService.getAddressByApi(apiPayload).subscribe(res=>{
+      // console.log('addressresponse=>', res);
+      if (res.message == "Address not found in databse") {
+        // conditionalLogic = 5000 ; 
+     
+        geocoder.geocode(request, function (data, status) {
+          let start_add: any;
+          if (status == google.maps.GeocoderStatus.OK) {
+            if (data[0] != null) {
+              start_add = data[0].formatted_address;
+              if (start_add == "Antarctica") {
+                start_add = "NA";
+              }
+
+            } else {
+              start_add = "NA";
+            }
+            outerThis.pathReport[i-1].address = start_add;
+          }
+          else {
+            start_add = "NA";    
+           
+          }
+          outerThis.pathReport[i-1].address = start_add;
+
+
+        })
+        }else{   
+            // conditionalLogic = 100 ;         
+            outerThis.pathReport[i-1].address = res.address;       
+        } 
+    },err=>{
+
+    })
+
+  
+    i++;
+    if( i < outerThis.closeProcess ){
+     
+      outerThis.clear_interval =  setTimeout( f,2000 );
+    }
+  }
+  f();
+
+}
+
+
+
+tab:any;
+
+exportExcel() {
+
+  var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+  var textRange; var j=0;
+  this.tab = document.getElementById('deviceTable'); // id of table
+
+  for(j = 0 ; j < this.tab.rows.length; j++) 
+  {     
+      tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      //tab_text=tab_text+"</tr>";
+  }
+
+  tab_text=tab_text+"</table>";
+  tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+
+
+  var ua = window.navigator.userAgent;
+  var msie = ua.indexOf("MSIE "); 
+
+  var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+  return (sa);
+}
+
+gettempExac(temp){
+  if(temp){
+    return (parseFloat(temp)/10).toFixed(2)
+  }else{
+    return 0;
+  }
+
+}
+
+}
\ No newline at end of file
diff --git a/src/app/device-report/trip-by-device/expense-component/expense-component.component.html b/src/app/device-report/trip-by-device/expense-component/expense-component.component.html
new file mode 100644
index 0000000..a755196
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expense-component/expense-component.component.html
@@ -0,0 +1,95 @@
+<div class="container">
+  <div class="row" style="padding-bottom: 10px;">
+    <div class="col-12">
+        <p style="text-align: center; font-size: 20px; background: #4859a5; color: white;">{{'TRIP EXPENSE' | translate}}</p>
+    </div>
+
+  </div>
+  <div class="row" style="margin: 0px;">
+    <div class="col-6" style="padding-top:8px;">
+        <input type="number" min=0 class="form-control" [(ngModel)]="totalExpense" id="totalExpense" aria-describedby="emailHelp" placeholder="{{'Enter Amount' | translate}}">
+    </div>
+    <div class="col-6">
+        <md-input-container style="display: inline;" class="example-full-width width"> 
+            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" #state="ngModel" [(ngModel)]="optiondefault" (ngModelChange)="filterStates(optiondefault)">
+           <md-autocomplete #tdAutoedit="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.country">
+                <span>{{ option.country }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+    </div>
+  </div>
+  <div class="row" style="margin: 0px;">
+    <div class="col-6">
+      <!-- <div class="row"> -->
+        <!-- <div class="col-4"> -->
+          <!-- <p>Payment Mode :</p> -->
+        <!-- </div> -->
+        <!-- <div class="col-8"> -->
+            <md-select  style="display: inherit;" [(ngModel)]="prepaymentVal" placeholder="--{{'Payment Mode' | translate}}--"  ngDefaultControl>
+                <md-option *ngFor="let payment of paymentMethod" [value]="payment.value">
+                  {{payment.viewValue}}
+                </md-option>
+              </md-select>
+        <!-- </div> -->
+      <!-- </div> -->
+     
+    </div>
+    <div class="col-6">
+        <!-- <div class="row"> -->
+            <!-- <div class="col-4"> -->
+              <!-- <p>Expense Type :</p> -->
+            <!-- </div> -->
+            <!-- <div class="col-8"> -->
+                <md-select  [(ngModel)]="expenseVal" style="display: inherit" placeholder="--{{'Expense type' | translate}}--"  ngDefaultControl>
+                    <md-option *ngFor="let expense of expenseType" [value]="expense.value">
+                      {{expense.viewValue}}
+                    </md-option>
+                  </md-select>
+            <!-- </div> -->
+          <!-- </div> -->
+    </div>
+  </div>
+  <div clas="row" style="margin-top: 30px; text-align: center;">
+    <div class="col-12">
+        <button md-raised-button style="background: #31428c; color: white;" (click)="saveExpense()">{{'SAVE' | translate}}</button>
+        <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'CLOSE' | translate}}</button>
+    </div>     
+  </div>
+  <div class="row" style="padding-top: 40px;" >
+    <div class= "col-12">
+      <p *ngIf="showError" style="text-align: center; color: red; font-size: 15px;">{{errorMsg}}</p>
+      <div style="margin-bottom: 15px; font-weight: 600;">
+        <span>{{'Total Expense' | translate }} :</span><span style="margin-left: 30px; font-weight: 600;">INR</span><span style="margin-left: 10px; font-weight: 600;">{{expenseTotal}}</span>
+      </div>
+    
+        <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+          overflow-x: hidden;font-size:12px">
+          <thead>
+            <tr>
+              <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+              <th style="text-align:center">{{'Amount' | translate}}</th>
+              <th style="text-align:center">{{'Currency' | translate}}</th>
+              <th style="text-align:center">{{'Payment Mode' | translate}}</th>
+              <th style="text-align:center">{{'Expense type' | translate}}</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let expObj of expenseArr">
+              <td style="text-align: center">{{(expObj.vehicle != null)?expObj.vehicle.Device_Name : "NA"}}</td>
+              <td style="text-align: center">{{expObj.amount ? expObj.amount : "0"}}</td>
+              <td style="text-align: center">{{expObj.currency}}</td>
+              <td style="text-align: center">{{expObj.payment_mode}}</td>
+              <td style="text-align: center">{{expObj.type}}</td>
+              <td style="text-align: center;cursor:pointer">
+                  <div>
+                      <i class="fas fa-trash-alt" (click)="delete(expObj)" style="font-size: 20px;color: #2e3e84;cursor: pointer"></i>
+                    </div>  
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+    </div>
+  </div>
+</div>
diff --git a/src/app/device-report/trip-by-device/expense-component/expense-component.component.scss b/src/app/device-report/trip-by-device/expense-component/expense-component.component.scss
new file mode 100644
index 0000000..fee7f6d
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expense-component/expense-component.component.scss
@@ -0,0 +1,4 @@
+.container{
+    height: 500px;
+ 
+}
\ No newline at end of file
diff --git a/src/app/device-report/trip-by-device/expense-component/expense-component.component.spec.ts b/src/app/device-report/trip-by-device/expense-component/expense-component.component.spec.ts
new file mode 100644
index 0000000..578ca98
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expense-component/expense-component.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpenseComponentComponent } from './expense-component.component';
+
+describe('ExpenseComponentComponent', () => {
+  let component: ExpenseComponentComponent;
+  let fixture: ComponentFixture<ExpenseComponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpenseComponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpenseComponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-by-device/expense-component/expense-component.component.ts b/src/app/device-report/trip-by-device/expense-component/expense-component.component.ts
new file mode 100644
index 0000000..2e04a68
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expense-component/expense-component.component.ts
@@ -0,0 +1,395 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../contact.service';
+
+@Component({
+  selector: 'app-expense-component',
+  templateUrl: './expense-component.component.html',
+  styleUrls: ['./expense-component.component.scss']
+})
+export class ExpenseComponentComponent implements OnInit {
+  expenseVal :any;
+  expenseTotal:number=0;
+  expenseType=[
+   { "value" : "FOOD EXP.", "viewValue" : "FOOD EXP." },
+   { "value" : "POLICE/TRO", "viewValue" : "POLICE/TRO" }, 
+   { "value" : "PETTA", "viewValue" : "PETTA" }, 
+   { "value" : "TELEPHONE", "viewValue" : "TELEPHONE" },
+    { "value" : "TOLE", "viewValue" : "TOLE" }, 
+   { "value" : "TRAVELLING", "viewValue" : "TRAVELLING" }, 
+   { "value" : "MISCE EXP.", "viewValue" : "MISCE EXP." } ,
+   { "value" : "FUEL", "viewValue" : "FUEL" } ,
+   { "value" : "TYRE", "viewValue" : "TYRE" } ,
+   { "value" : "WORKSHOP", "viewValue" : "WORKSHOP" } ,
+   { "value" : "SPARES", "viewValue" : "SPARES" } ,
+   { "value" : "ROOMRENT", "viewValue" : "ROOMRENT" } ,
+   { "value" : "PERMIT", "viewValue" : "PERMIT" } ,
+   { "value" : "DONATION", "viewValue" : "DONATION" } 
+  ];
+  paymentMethod = [
+    {"value": "CASH","viewValue":"CASH"},
+    {"value": "CHEQUE","viewValue":"CHEQUE"},
+    {"value": "ONLINE","viewValue":"ONLINE"},
+    {"value": "OTHER","viewValue":"OTHER"}
+  ]
+  
+prepaymentVal:any
+  tripPayload: any;
+  expenseArr: any=[];
+  Load: boolean=false;
+  errorMsg: string;
+  constructor(public dialogRef: MdDialogRef<ExpenseComponentComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,) { 
+     
+      this.tripPayload = data;
+      console.log('this.tripPayload',this.tripPayload);
+    }
+
+  ngOnInit() {
+    this.expenseArr = [];
+    this.getExpense(this.tripPayload._id);
+    this.getCurrencies();
+  }
+
+
+  dataSelect=[];
+  filterStates(val) {
+    console.log(val)
+    // console.log(this.dummyuserData)
+    if (val) {
+      const filterValue: any = val;
+      console.log(this.currency);
+      this.dataSelect = this.currency.filter(function (d) {
+              console.log("inside Search Method=>",d);
+        return d.country.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+    // console.log("searched user=>",this.dataSelect);
+  }
+
+
+  currency = [];
+  optiondefault:any;
+  getCurrencies(){
+    this.currency = [];
+    // this.contactService.getCurrencies().subscribe(res=>{   
+      var currencyObj = this.currencyJson;  
+        console.log('currencyObj',currencyObj);
+      for(var i in currencyObj){
+        if(this.data.currency != undefined){
+          var devicecurr = this.data.currency ; 
+          if(i == devicecurr){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+
+        }else{
+          if(i == 'INR'){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+        }
+    
+      var tempObj = {
+        currencyVal : i,
+        country       : i+ '-' +  currencyObj[i]
+      }
+        this.currency.push(tempObj);
+      }
+    
+      console.log(this.currency);
+      // this.loadropdown();
+    // })
+  }
+
+  totalExpense:any;
+  showTable : boolean = true;
+
+  saveExpense(){
+    let that = this;
+    if(this.totalExpense == undefined){
+      this.errorMsg = "Amount is required";
+      this.showError = true;
+      var error =  setTimeout(function(){
+        that.showError = false; 
+        
+        clearInterval(error);
+      },5000)
+
+    }else{
+      var expensePayload ={
+        "user": this.tripPayload.user,
+        "currency":this.optiondefault.split('-')[0],
+         "vehicle": this.tripPayload.deviceObjId,
+         "payment_mode":this.prepaymentVal,
+         "amount":this.totalExpense,
+         "odometer":this.tripPayload.total_odo,
+         "type":this.expenseVal,
+         "trip" : this.tripPayload._id,
+         "date": new Date().toISOString(),
+      }
+  
+      console.log('expensePayload=>',expensePayload);
+      this.contactService.saveExpense(expensePayload).subscribe(res=>{
+        console.log(res);
+    
+        if(res.message=="added Successfully"){
+          this.errorMsg = "Trip expense added !";
+          this.showError = true;
+          var error =  setTimeout(function(){
+            that.showError = false; 
+       
+            clearInterval(error);
+          },5000)
+       
+          this.getExpense(this.tripPayload._id);
+  
+         
+          // this.dialogRef.close('success');
+        }
+      },err=>{
+        console.log(err);
+      })
+  
+    }
+
+
+  }
+  showError :boolean=false;
+  
+  getExpense(tripid){
+
+    let that = this;
+    this.Load   = true;
+    this.contactService.getExpense(tripid).subscribe(res=>{
+      this.Load= false;
+      this.showTable = true;
+      console.log("response=>",res);
+     var eArr = res;
+  
+      if(eArr.length == 0){
+          console.log("no expense");
+          this.expenseTotal = 0;
+      }else{
+        this.expenseArr = res;
+        this.addAmount(this.expenseArr);
+      }
+
+    },err=>{
+      this.Load= false;
+      console.log("inside no expense block")
+      this.showTable = false;
+      this.showError = true;
+      this.errorMsg = "No Expence record found";
+      this.expenseTotal = 0;
+      // this.getExpense(tripid);
+    
+      this.expenseArr = [];
+      var error =  setTimeout(function(){  
+        that.showError = false; 
+        clearInterval(error);
+      },5000)
+
+    })
+  }
+
+  delete(listObj){
+    this.contactService.deleteExpense(listObj._id).subscribe(res=>{
+      console.log(res);
+     let tid =  this.tripPayload._id
+      this.getExpense(tid);
+    })
+
+  }
+
+  addAmount(amountArr){
+    console.log('amountArr',amountArr);
+    this.expenseTotal = 0;
+    if(amountArr.length != 0){  
+      var expenseSum =0;
+      for(var i = 0 ;i<amountArr.length;i++){
+        expenseSum = amountArr[i].amount?parseFloat(amountArr[i].amount):0;
+        this.expenseTotal +=  expenseSum ;
+      }
+    }
+
+  }
+
+
+  cancel(){
+    this.dialogRef.close('cancel');
+  }
+  currencyJson = {
+    "AED": "United Arab Emirates Dirham",
+    "AFN": "Afghan Afghani",
+    "ALL": "Albanian Lek",
+    "AMD": "Armenian Dram",
+    "ANG": "Netherlands Antillean Guilder",
+    "AOA": "Angolan Kwanza",
+    "ARS": "Argentine Peso",
+    "AUD": "Australian Dollar",
+    "AWG": "Aruban Florin",
+    "AZN": "Azerbaijani Manat",
+    "BAM": "Bosnia-Herzegovina Convertible Mark",
+    "BBD": "Barbadian Dollar",
+    "BDT": "Bangladeshi Taka",
+    "BGN": "Bulgarian Lev",
+    "BHD": "Bahraini Dinar",
+    "BIF": "Burundian Franc",
+    "BMD": "Bermudan Dollar",
+    "BND": "Brunei Dollar",
+    "BOB": "Bolivian Boliviano",
+    "BRL": "Brazilian Real",
+    "BSD": "Bahamian Dollar",
+    "BTC": "Bitcoin",
+    "BTN": "Bhutanese Ngultrum",
+    "BWP": "Botswanan Pula",
+    "BYN": "Belarusian Ruble",
+    "BZD": "Belize Dollar",
+    "CAD": "Canadian Dollar",
+    "CDF": "Congolese Franc",
+    "CHF": "Swiss Franc",
+    "CLF": "Chilean Unit of Account (UF)",
+    "CLP": "Chilean Peso",
+    "CNH": "Chinese Yuan (Offshore)",
+    "CNY": "Chinese Yuan",
+    "COP": "Colombian Peso",
+    "CRC": "Costa Rican Colón",
+    "CUC": "Cuban Convertible Peso",
+    "CUP": "Cuban Peso",
+    "CVE": "Cape Verdean Escudo",
+    "CZK": "Czech Republic Koruna",
+    "DJF": "Djiboutian Franc",
+    "DKK": "Danish Krone",
+    "DOP": "Dominican Peso",
+    "DZD": "Algerian Dinar",
+    "EGP": "Egyptian Pound",
+    "ERN": "Eritrean Nakfa",
+    "ETB": "Ethiopian Birr",
+    "EUR": "Euro",
+    "FJD": "Fijian Dollar",
+    "FKP": "Falkland Islands Pound",
+    "GBP": "British Pound Sterling",
+    "GEL": "Georgian Lari",
+    "GGP": "Guernsey Pound",
+    "GHS": "Ghanaian Cedi",
+    "GIP": "Gibraltar Pound",
+    "GMD": "Gambian Dalasi",
+    "GNF": "Guinean Franc",
+    "GTQ": "Guatemalan Quetzal",
+    "GYD": "Guyanaese Dollar",
+    "HKD": "Hong Kong Dollar",
+    "HNL": "Honduran Lempira",
+    "HRK": "Croatian Kuna",
+    "HTG": "Haitian Gourde",
+    "HUF": "Hungarian Forint",
+    "IDR": "Indonesian Rupiah",
+    "ILS": "Israeli New Sheqel",
+    "IMP": "Manx pound",
+    "INR": "Indian Rupee",
+    "IQD": "Iraqi Dinar",
+    "IRR": "Iranian Rial",
+    "ISK": "Icelandic Króna",
+    "JEP": "Jersey Pound",
+    "JMD": "Jamaican Dollar",
+    "JOD": "Jordanian Dinar",
+    "JPY": "Japanese Yen",
+    "KES": "Kenyan Shilling",
+    "KGS": "Kyrgystani Som",
+    "KHR": "Cambodian Riel",
+    "KMF": "Comorian Franc",
+    "KPW": "North Korean Won",
+    "KRW": "South Korean Won",
+    "KWD": "Kuwaiti Dinar",
+    "KYD": "Cayman Islands Dollar",
+    "KZT": "Kazakhstani Tenge",
+    "LAK": "Laotian Kip",
+    "LBP": "Lebanese Pound",
+    "LKR": "Sri Lankan Rupee",
+    "LRD": "Liberian Dollar",
+    "LSL": "Lesotho Loti",
+    "LYD": "Libyan Dinar",
+    "MAD": "Moroccan Dirham",
+    "MDL": "Moldovan Leu",
+    "MGA": "Malagasy Ariary",
+    "MKD": "Macedonian Denar",
+    "MMK": "Myanma Kyat",
+    "MNT": "Mongolian Tugrik",
+    "MOP": "Macanese Pataca",
+    "MRO": "Mauritanian Ouguiya (pre-2018)",
+    "MRU": "Mauritanian Ouguiya",
+    "MUR": "Mauritian Rupee",
+    "MVR": "Maldivian Rufiyaa",
+    "MWK": "Malawian Kwacha",
+    "MXN": "Mexican Peso",
+    "MYR": "Malaysian Ringgit",
+    "MZN": "Mozambican Metical",
+    "NAD": "Namibian Dollar",
+    "NGN": "Nigerian Naira",
+    "NIO": "Nicaraguan Córdoba",
+    "NOK": "Norwegian Krone",
+    "NPR": "Nepalese Rupee",
+    "NZD": "New Zealand Dollar",
+    "OMR": "Omani Rial",
+    "PAB": "Panamanian Balboa",
+    "PEN": "Peruvian Nuevo Sol",
+    "PGK": "Papua New Guinean Kina",
+    "PHP": "Philippine Peso",
+    "PKR": "Pakistani Rupee",
+    "PLN": "Polish Zloty",
+    "PYG": "Paraguayan Guarani",
+    "QAR": "Qatari Rial",
+    "RON": "Romanian Leu",
+    "RSD": "Serbian Dinar",
+    "RUB": "Russian Ruble",
+    "RWF": "Rwandan Franc",
+    "SAR": "Saudi Riyal",
+    "SBD": "Solomon Islands Dollar",
+    "SCR": "Seychellois Rupee",
+    "SDG": "Sudanese Pound",
+    "SEK": "Swedish Krona",
+    "SGD": "Singapore Dollar",
+    "SHP": "Saint Helena Pound",
+    "SLL": "Sierra Leonean Leone",
+    "SOS": "Somali Shilling",
+    "SRD": "Surinamese Dollar",
+    "SSP": "South Sudanese Pound",
+    "STD": "São Tomé and Príncipe Dobra (pre-2018)",
+    "STN": "São Tomé and Príncipe Dobra",
+    "SVC": "Salvadoran Colón",
+    "SYP": "Syrian Pound",
+    "SZL": "Swazi Lilangeni",
+    "THB": "Thai Baht",
+    "TJS": "Tajikistani Somoni",
+    "TMT": "Turkmenistani Manat",
+    "TND": "Tunisian Dinar",
+    "TOP": "Tongan Pa'anga",
+    "TRY": "Turkish Lira",
+    "TTD": "Trinidad and Tobago Dollar",
+    "TWD": "New Taiwan Dollar",
+    "TZS": "Tanzanian Shilling",
+    "UAH": "Ukrainian Hryvnia",
+    "UGX": "Ugandan Shilling",
+    "USD": "United States Dollar",
+    "UYU": "Uruguayan Peso",
+    "UZS": "Uzbekistan Som",
+    "VEF": "Venezuelan Bolívar Fuerte (Old)",
+    "VES": "Venezuelan Bolívar Soberano",
+    "VND": "Vietnamese Dong",
+    "VUV": "Vanuatu Vatu",
+    "WST": "Samoan Tala",
+    "XAF": "CFA Franc BEAC",
+    "XAG": "Silver Ounce",
+    "XAU": "Gold Ounce",
+    "XCD": "East Caribbean Dollar",
+    "XDR": "Special Drawing Rights",
+    "XOF": "CFA Franc BCEAO",
+    "XPD": "Palladium Ounce",
+    "XPF": "CFP Franc",
+    "XPT": "Platinum Ounce",
+    "YER": "Yemeni Rial",
+    "ZAR": "South African Rand",
+    "ZMW": "Zambian Kwacha",
+    "ZWL": "Zimbabwean Dollar"
+  }
+
+}
diff --git a/src/app/device-report/trip-by-device/expenselist/expenselist.component.html b/src/app/device-report/trip-by-device/expenselist/expenselist.component.html
new file mode 100644
index 0000000..a059bfa
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expenselist/expenselist.component.html
@@ -0,0 +1,46 @@
+<div style="height: 535px;">
+    <div class="row" style="text-align: center; font-size: 20px; background: #4859a5; color: white;padding-top: 10px">
+      <div class="col-12" >
+        <div class="row">
+          <div class="col-6">
+              <p style="text-align: left; font-size: 20px; background: #4859a5; color: white;">{{'EXPENSE LIST' | translate}}</p>
+          </div>
+          <div class="col-6" style="text-align: end;">
+              <i class="fas fa-times-circle" (click)="cancel()" style="font-size: 20px;color: red;cursor: pointer"></i>
+            </div>
+        </div>       
+      </div>
+    </div>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div class="row">
+      <div class="col-12">
+          <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+          overflow-x: hidden;font-size:12px">
+          <thead>
+            <tr>
+              <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+              <th style="text-align:center">{{'Amount' | translate}}</th>
+              <th style="text-align:center">{{'Currency' | translate}}</th>
+              <th style="text-align:center">{{'Payment Mode' | translate}}</th>
+              <th style="text-align:center">{{'Expense type' | translate}}</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let expObj of expenseArr">
+              <td style="text-align: center">{{(expObj.vehicle != null)?expObj.vehicle.Device_Name : "NA"}}</td>
+              <td style="text-align: center">{{expObj.amount ? expObj.amount : "0"}}</td>
+              <td style="text-align: center">{{expObj.currency}}</td>
+              <td style="text-align: center">{{expObj.payment_mode}}</td>
+              <td style="text-align: center">{{expObj.type}}</td>
+              <td style="text-align: center;cursor:pointer">
+                  <div>
+                      <i class="fas fa-trash-alt" (click)="delete(expObj)" style="font-size: 20px;color: #2e3e84;cursor: pointer"></i>
+                    </div>  
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      
+    </div>
+   
+  </div>
\ No newline at end of file
diff --git a/src/app/device-report/trip-by-device/expenselist/expenselist.component.scss b/src/app/device-report/trip-by-device/expenselist/expenselist.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device-report/trip-by-device/expenselist/expenselist.component.spec.ts b/src/app/device-report/trip-by-device/expenselist/expenselist.component.spec.ts
new file mode 100644
index 0000000..53d0445
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expenselist/expenselist.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExpenselistComponent } from './expenselist.component';
+
+describe('ExpenselistComponent', () => {
+  let component: ExpenselistComponent;
+  let fixture: ComponentFixture<ExpenselistComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExpenselistComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExpenselistComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-by-device/expenselist/expenselist.component.ts b/src/app/device-report/trip-by-device/expenselist/expenselist.component.ts
new file mode 100644
index 0000000..3579ad8
--- /dev/null
+++ b/src/app/device-report/trip-by-device/expenselist/expenselist.component.ts
@@ -0,0 +1,52 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Router } from '@angular/router';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-expenselist',
+  templateUrl: './expenselist.component.html',
+  styleUrls: ['./expenselist.component.scss']
+})
+export class ExpenselistComponent implements OnInit {
+  expenseObject=[];
+  Load : boolean = false;
+  trip_id: any;
+  expenseArr: any;
+  constructor(private contactService: ContactService,private router: Router,public dialogRef: MdDialogRef<ExpenselistComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log(data);
+      this.trip_id = data._id;
+    }
+
+  ngOnInit() {
+    this.Load  = true;
+    this.expenseArr = [];
+    this.contactService.getExpense(this.trip_id).subscribe(res=>{
+      this.Load= false;
+      console.log("response=>",res);
+     var eArr = res;
+      if(eArr.length == 0){
+
+      }else{
+        this.expenseArr = res;
+      }
+
+    },err=>{
+      this.Load= false;
+    })
+  }
+
+  delete(listObj){
+    this.contactService.deleteExpense(listObj._id).subscribe(res=>{
+      console.log(res);
+      this.ngOnInit();
+    })
+
+  }
+
+  cancel(){
+    this.dialogRef.close('cancel');
+  }
+
+}
diff --git a/src/app/device-report/trip-by-device/trip-by-device.component.html b/src/app/device-report/trip-by-device/trip-by-device.component.html
new file mode 100644
index 0000000..d0ea33e
--- /dev/null
+++ b/src/app/device-report/trip-by-device/trip-by-device.component.html
@@ -0,0 +1,76 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+  <div class="headerStyle">
+    <span>{{'TRIP REPORT' | translate}}</span>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  </div>
+  <div class="filterDiv">
+    <div class="row" style="margin-bottom: 20px;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">
+        <div style="display: inline-flex; width: 60%;padding-bottom: 3px;">
+          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
+          <div style="width: inherit; margin-top: 9px;text-align: left">
+            <select id="select" multiple="multiple" style="text-align: left">
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+          </div>
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
+            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
+            [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+        </div>
+        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;"
+          (click)="tripListList()"> {{'SEARCH' | translate}} </button>
+        <!-- <button md-raised-button style="width: 190px; background: #1d8216; color: white;" (click)="exportExcel()">Export
+          To Excel</button> -->
+      </div>
+    </div>
+  </div>
+  <div>
+    <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'TRIP ID' | translate}}</th>
+          <th>{{'VEHICLE NAME' | translate}}</th>
+          <th>{{'IMEI' | translate}}</th>
+          <th>{{'SOURCE ADDRESS' | translate}}</th>
+          <th>{{'DESTINATION ADDRESS' | translate}}</th>
+          <th>{{'DISTANCE' | translate}}</th>
+          <th>{{'DURATION' | translate}}</th>
+          <th>{{'TRIP STATUS' | translate}}</th>
+          <th>{{'MILEAGE' | translate}}</th> 
+          <th>{{'ADD EXPENSES' | translate}}</th>   
+          <th>{{'EXPENSES LIST' | translate}}</th>   
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of tripReport">
+          <td style="cursor:pointer">{{report.trip_id}}</td>
+          <td style="cursor:pointer">{{report.device.Device_ID}}</td>
+          <td style="cursor:pointer">{{report.device.Device_Name}}</td>
+          <td style="cursor:pointer">
+            <!-- {{report.start_lat?report.start_lat:0}}{{quomaseprate}}{{report.start_long?report.start_long:0}} -->
+            <a href={{addressLink}} target="_blank" (click)= "getAddress(report,'start')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+          </td>
+          <td style="cursor:pointer">
+              <a href={{addressLink1}} target="_blank" (click)= "getAddress(report,'end')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+            <!-- {{report.end_lat?report.end_lat:0}}{{quomaseprate}}{{report.end_long?report.end_long:0}} -->
+          </td>
+          <td style="cursor:pointer">{{report.distance?((report.distance/1000) | number : '1.2-2') : 0}}</td>
+          <td style="cursor:pointer">{{report.duration ? report.duration : "Trip Ongoing"}}</td>
+          <td style="cursor:pointer">{{report.trip_status}}</td>
+          <td style="cursor:pointer">NA</td>
+          <td>
+            <i class="fas fa-wallet" (click)="addExpense(report)" style="font-size: 20px;cursor: pointer"></i>
+          </td>
+          <td>
+            <i class="fas fa-list" (click)="expenseList(report)" style="font-size: 20px;cursor: pointer"></i>
+          </td>
+       
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/trip-by-device/trip-by-device.component.scss b/src/app/device-report/trip-by-device/trip-by-device.component.scss
new file mode 100644
index 0000000..ceed4f8
--- /dev/null
+++ b/src/app/device-report/trip-by-device/trip-by-device.component.scss
@@ -0,0 +1,36 @@
+
+    .container-fluid .headerStyle{
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        font-weight: 500;
+        background: white;
+        color: black;
+        border-radius: 4px;
+    }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/device-report/trip-by-device/trip-by-device.component.spec.ts b/src/app/device-report/trip-by-device/trip-by-device.component.spec.ts
new file mode 100644
index 0000000..1bd32ad
--- /dev/null
+++ b/src/app/device-report/trip-by-device/trip-by-device.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripByDeviceComponent } from './trip-by-device.component';
+
+describe('TripByDeviceComponent', () => {
+  let component: TripByDeviceComponent;
+  let fixture: ComponentFixture<TripByDeviceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripByDeviceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripByDeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-by-device/trip-by-device.component.ts b/src/app/device-report/trip-by-device/trip-by-device.component.ts
new file mode 100644
index 0000000..9442a26
--- /dev/null
+++ b/src/app/device-report/trip-by-device/trip-by-device.component.ts
@@ -0,0 +1,262 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { ExpenseComponentComponent } from './expense-component/expense-component.component';
+import { ExpenselistComponent } from './expenselist/expenselist.component';
+declare var $:any;
+declare var google : any;
+
+@Component({
+  selector: 'app-trip-by-device',
+  templateUrl: './trip-by-device.component.html',
+  styleUrls: ['./trip-by-device.component.scss']
+})
+export class TripByDeviceComponent implements OnInit {
+  trip_data =[];
+  from_date=new Date();
+  to_date=new Date();
+  bsConfig: Partial<BsDatepickerConfig>;
+  colorTheme = 'theme-dark-blue';
+  vehicle: any;
+  deviceArr: any=[];
+  superAdmin: any;
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  mb: any;
+  custtype: any;
+  devicesss: any;
+  finall: any;
+  options: any=[];
+  supAdmin: any;
+  Dealer: any;
+  tripReport: any=[];
+  quomaseprate = " "
+  lattitude: any;
+  longitude: any;
+  lattitude1: any;
+  longitude1: any;
+  addressLink: string;
+  addressLink1: string;
+  constructor(private contactService: ContactService,  public dialog: MdDialog, public snackBar: MdSnackBar) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    this.from_date.setHours(0,0,0,0); 
+   }
+
+  ngOnInit() {
+    var that = this;
+
+    $('#select').hide();
+    console.log("loginDetails=>",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.supAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.Dealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer;
+    // $('.demo').fSelect();
+  
+
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          }
+
+        // }
+           console.log(this.options);
+           let that = this;
+           setTimeout(()=>{
+             that.loadropdown();
+           },100)  
+
+      });
+ 
+  }
+
+  loadropdown() {
+    let that = this;
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    setTimeout(() => {
+
+      $('#select').multipleSelect({
+        width: 200,
+        placeholder: 'Select device.....',
+        filter: true,
+      })
+     // $('#select').show();
+    }, 100);
+
+
+  }
+    Load : boolean = false;
+  tripListList(){
+    console.log($('#select').multipleSelect('getSelects','value'));
+    this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+    console.log('this.deviceArr',this.deviceArr);
+    // var query ={}
+    // query["$and"] = [];
+  
+    // var query1 = {
+    //   $or:[{
+    //     user :this.useridd,   
+    //   },{
+    //     dealer :(this.custtype == true)?this.Dealer:this.useridd,
+    //   },{
+    //     supAdmin : (this.superAdmin==true)?this.useridd:this.supAdmin
+    //   }]
+    // }
+    // query["$and"].push(query1);
+    // if(this.deviceArr.length>0){
+    //  var deviceArrQuery = {$in : this.deviceArr};
+    //  query["$and"].push(deviceArrQuery);
+    // }
+
+    // if(this.from_date){
+    //   var fDate = {start_time : {$gte : this.from_date.toISOString()}};
+    //   query["$and"].push(fDate);
+    // }
+    // if(this.to_date){
+    //   var tDate ={start_time :  {$lte : this.to_date.toISOString()}};
+    //   query["$and"].push(tDate);
+    // }
+
+
+    var query = {
+      
+    };
+    console.log('this.deviceArr=>',this.deviceArr);
+    query['user'] = this.useridd;
+    query['fromDate'] = this.from_date.toISOString();
+    query['toDate'] = this.to_date.toISOString();
+    query['device'] = this.deviceArr;
+    this.Load = true;
+    this.contactService.gettripByDevice(query).subscribe(res=>{
+      console.log(res);
+      this.Load = false;
+      if(res.message == "No Trip Found"){
+        let message1="No Trip Found";
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+          
+        });
+        this.tripReport=[];
+      }else{
+        this.tripReport =  res;
+      }
+    
+    },err=>{
+      this.Load = false;
+      let message1="Please try again";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      });
+      console.log(err);
+    })  
+  }
+
+
+  
+
+
+  locationAddress: any;
+  getAddress(fuelval,val) {
+    var outerThis = this;
+    console.log(fuelval);
+    if (fuelval == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+      this.lattitude1 = null;
+      this.longitude1 = null;
+    } else {
+      if(val == 'start'){
+        this.lattitude = fuelval.start_lat;
+        this.longitude = fuelval.start_long;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+      }
+      else if(val == 'end'){
+        this.lattitude1 = fuelval.end_lat;
+        this.longitude1 = fuelval.end_long;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude1, this.longitude1);
+      }else{
+        this.lattitude = null;
+        this.longitude = null;
+        this.lattitude1 = null;
+        this.longitude1 = null;
+      }
+
+    }
+
+
+    this.addressLink =  'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+    this.addressLink1 = 'https://maps.google.com/?q=' + this.lattitude1 + ',' + this.longitude1
+
+  }
+
+  exportExcel(){}
+
+  addExpense(tripObject){
+    console.log('tripObject=>',tripObject);
+    let dialogRef = this.dialog.open(ExpenseComponentComponent, {
+      width : "700px",
+      data: tripObject
+      
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if(result == "success"){
+        let message1="Expense Added";
+        let action:any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,          
+        });        
+      }  
+    });  
+  }
+  
+  expenseList(tripObject)
+  {
+    let dialogRef = this.dialog.open(ExpenselistComponent, {
+      width : "700px",
+      data: tripObject
+    });
+  
+  }
+  
+
+}
diff --git a/src/app/device-report/trip-details/trip-details.component.html b/src/app/device-report/trip-details/trip-details.component.html
new file mode 100644
index 0000000..bcfc155
--- /dev/null
+++ b/src/app/device-report/trip-details/trip-details.component.html
@@ -0,0 +1,75 @@
+
+<div style="float:left; width: 100%; padding-top: 6%;">
+    <br><br>
+    <div *ngIf="Load"  >
+      <div class="loading">Loading&#8230;</div>
+    </div>
+    <h5>Trip Details:<div  style="float:right;    font-size: 13px;">
+        <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'"  [autoClose]="true"></owl-date-time>    </div> </h5>
+        <!-- [dateFormat]="'DD/MM/YYYY'"  (ngModelChange)="table1ch()" -->
+        <!--  <button  title="Add Devices" style="border:1px solid transparent; background-color: transparent;">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon>
+           
+         </button> -->
+    <!--    <button md-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;margin-top:29px" (click)="adddev()">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon></button> -->
+           <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+           
+           <thead style="background-color:#A2C523;color: white;">
+             <tr>
+               <th>From Date</th>
+               <th>Form location</th>
+               <th>To Date</th>
+               <th>To Location</th>
+               <th>
+                 <span>
+                  Distance
+                 </span>
+                 <span style="margin-left:2px;">
+                   (Km/hr)
+                 </span>
+               </th>
+          
+             </tr>
+           </thead>
+         
+           <tbody>
+      
+        <tr *ngFor="let device of trip_detail_log">
+
+              <td   style="cursor:pointer">{{device.startTime}}</td>
+
+               <td  style="cursor:pointer">{{device.start_address}}</td>
+
+               <td  style="cursor:pointer" >{{device.endTime}}</td>
+
+               <td  style="cursor:pointer" ></td>
+
+              <td  style="cursor:pointer">{{device.distance}}</td>
+          
+          
+
+            <!--    <td>
+                <md-slide-toggle 
+                [(ngModel)]="device.maintenance"
+                (change)="onChange($event,device._id)" 
+                ></md-slide-toggle>
+              </td -->
+
+             <!--  <td>
+                
+                  <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;"(click)="openDialog2(device._id,device.Device_Des,device.sim_number,device.Device_Name)">   
+                 
+                      <md-icon>edit</md-icon></button></p>
+              </td> -->
+              <!--  <td> <p><button md-tooltip="Remove Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete(device.Device_ID)">   
+                 
+                <md-icon>delete</md-icon></button></p>
+               </td> -->
+           </tr>  
+           </tbody> 
+         </table> 
+       
+ 
+   
+</div>
+
diff --git a/src/app/device-report/trip-details/trip-details.component.scss b/src/app/device-report/trip-details/trip-details.component.scss
new file mode 100644
index 0000000..9d5d7b1
--- /dev/null
+++ b/src/app/device-report/trip-details/trip-details.component.scss
@@ -0,0 +1,1003 @@
+::-webkit-scrollbar {
+  display: none;
+  }
+
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+
+/deep/ .mat-menu-panel.test{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a{
+    display: block;
+  padding: 9px 10px;
+  margin: 0;
+  border-bottom: 1px solid #999;
+  }
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg); 
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg); 
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s; 
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s; 
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s; 
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s; 
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s; 
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s; 
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s; 
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; } 
+}
+#active{
+  text-decoration-line: underline;
+  text-decoration-color: rgb(66, 26, 245);
+} 
+#d:hover { 
+  color: rgb(14, 102, 18);
+
+}
+#ac{
+  color: rgb(38, 38, 90)
+}
+ul, li {
+  list-style: none;
+  float: left;
+  line-height: 15vh;
+}
+.upper{
+  margin-top: -70px;
+  width: 100%;
+  height: 15%;
+ /* margin-left: -2px;*/
+  position: fixed;
+  background-color: white;
+  top: 0;
+  z-index: 1
+}
+.up{
+  color: gray;
+  /* Add a font */
+ 
+  /* Set the font-size to 25 pixels */
+  font-size: 25px;
+
+}  
+.middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  margin-left: -220px;
+  margin-top: -20px;
+  
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.desc {
+  padding: 15px;
+  text-align: center;
+}
+#insert{
+  margin-left:8px;
+  margin-top:-15px;
+  text-shadow: 20px;
+}
+#insert2{
+  margin-left:8px;
+  margin-top:-15px;
+  text-shadow: 20px;
+}
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+.vertical-menu {
+  width: 250px;
+  padding-left: 10px;
+}
+
+.vertical-menu a {
+  background-color: #eee;
+  color: black;
+  display: block;
+  padding: 12px;
+  text-decoration: none;
+ 
+}
+
+.vertical-menu a:hover {
+  background-color: #ccc;
+}
+
+.vertical-menu a.active {
+  
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+// #c2 {
+  
+  
+// }
+#c1 {
+  float:left;
+
+}
+
+body {margin:0}
+
+.icon-bar {
+  width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+  margin-top: -9px;
+  height:100%;
+  position: fixed;
+  display: inline-block;
+  margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+  .off{
+     display: none;
+  }
+}
+.icon-bar2 {
+  
+  width: 299px;
+  background-color: white;
+  margin-top: -7px;
+  height:86vh;
+  position: fixed;
+ 
+}
+.icon-bar a {
+  display: block;
+  text-align: center;
+  padding: 16px;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+  text-align: left;
+}
+
+.icon-bar a:hover {
+  background-color: #000;
+}
+
+.active {
+  background-color: #4CAF50 !important;
+}
+.iphone {
+  width: 201px;
+  height: 378px;
+  background: #f9f7f9;
+  border: 5px solid #c1bfc1;
+  border-radius: 45px;
+  opacity: 0.8;
+}
+.highlight {
+  width: 185px;
+  height: 366px;
+  border: 3px solid #fff;
+  border-radius: 45px;
+  position: relative;
+  z-index: 10;
+  top: -748px;
+  left: 10px;
+}
+.circle {
+  width: 7px;
+  height: 7px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -370px;
+  left: 92px;
+}
+.camera {
+  width: 10px;
+  height: 10px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -376px;
+  left: 66px;
+}
+.speaker {
+  width: 59px;
+  height: 3px;
+  background: #333;
+  border-radius: 5px;
+  position: relative;
+  top: -372px;
+  left: 73px;
+}
+.screen {
+  width: 166px;
+  height: 255px;
+  border: 3px solid #333;
+  border-radius: 5px;
+  position: relative;
+  left: 18px;
+  top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+  width: 47px;
+  height: 47px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  top: -353px;
+  left: 79px;
+  z-index: 2;
+}
+.home2 {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: relative;
+  top: -403px;
+      left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+  //background:green;
+  float:right;
+}
+#c1, #c2 {
+  width: 33%; 
+  //background: rebeccapurple
+}
+
+#c3 {
+  width: auto;
+   width:34%;
+  // background: red
+}
+.off{
+  margin: auto;
+  width: 60%;
+  top:70%;
+  padding: 10px;
+  margin-right:30%
+  
+}
+.newspaper {
+  -webkit-column-count: 2; /* Chrome, Safari, Opera */
+  -moz-column-count: 2; /* Firefox */
+  column-count: 2;
+  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+  -moz-column-gap: 40px; /* Firefox */
+  column-gap: 40px;
+  align-content:left;
+  text-align: left;
+}
+#demo {
+  margin: 30px 0 50px 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  
+}
+
+#demo .wrapper {
+  display: inline-block;
+  width: 180px;
+  margin: 0 10px 0 0;
+  height: 20px;
+  position: relative;
+
+}
+
+#demo .parent {
+  height: 100%;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  border-radius: 5px;
+  background: #F9F9F9;
+  border: 1px solid #AAA;
+  border-bottom: 1px solid #777;
+  color: #282D31;
+  font-weight: bold;
+  z-index: 2;
+  position: relative;
+  -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+  -webkit-transition-delay: .8s;
+  text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+  background: #fff;
+  -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+#demo .content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: 1;
+  height: 0;
+  width: 180px;
+  padding-top: 30px;
+  -webkit-transition: height .5s ease;
+  -webkit-transition-delay: .4s;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+  text-decoration: none;
+}
+
+#demo .content li:hover {
+  background: #eee;
+  color: #333;
+}
+
+#demo .content li {
+  list-style: none;
+  text-align: left;
+  color: #888;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.customClass {
+  background-color: #dd3;
+  border-radius: 5px;
+  margin:5px;
+  width: 500px;
+}
+
+.customClass .img-ul-upload {
+  background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+  background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+  color: purple !important;
+}
+
+.customClass .img-ul-container {
+  background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+  padding: 16px;
+  height: 201px !important;
+}
+.weekDays-selector input {
+  display: none!important;
+}
+
+.weekDays-selector input[type=checkbox] + label {
+  display: inline-block;
+  border-radius: 6px;
+  background: #dddddd;
+  height: 40px;
+  width: 34.2px;
+  margin-right: 3px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.weekDays-selector input[type=checkbox]:checked + label {
+  background: #2AD705;
+  color: #ffffff;
+}
+@media screen and (max-width: 900px) {
+      .icon-bar{
+          display: none;
+          
+      }
+      .sch{
+          display: none;
+      }
+      .first{
+          width:1%!important;
+      }
+      .second{
+          margin-left: 8px!important;
+      }
+      .small{
+          display: block!important;
+      }
+      .image{
+          display: none;
+      }
+      .schlar{
+          display: block!important;
+      }
+}
+
+@media screen and (min-width: 900px) {
+.schlar{
+  display: none;
+}
+
+}
+.small{
+    display: none;
+}
+.first{
+  float:left;
+  width: 16%; 
+  height:86vh;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  margin-right: 5px
+}
+.second{
+  width: 88%; 
+  height:86vh;
+  margin-left:171px;
+}
+.mat-dialog-container {
+  max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+  cursor:pointer !important;
+  font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: .4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262F;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555
+}
+
+.expansion-panel__content{
+  margin-left: 0% !important;
+}
+
+
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+  color: #000;
+  background-color: transparent;
+  border: none;
+  padding: 1em;
+  font-size: 1em; }
+  .ngx-picker--btn__selected {
+    background-color: #eee; }
+  .ngx-picker--btn:hover {
+    transition: .25s ease;
+    background-color: #eee;
+    cursor: pointer; }
+  .ngx-picker--btn:focus {
+    outline-color: transparent; }
+
+.ngx-picker--btn__month:hover {
+  border-top-left-radius: 0.2em; }
+
+.ngx-picker--btn__done:hover {
+  border-bottom-right-radius: 0.2em; }
+
+.ngx-picker--btn__now:hover {
+  border-bottom-left-radius: 0.2em; }
+
+.ngx-picker--btn__next:hover {
+  border-top-right-radius: 0.2em; }
+
+.calendar {
+  position: absolute;
+  background-color: #e6e6e6;
+  max-width: 16em;
+  min-width: 16em;
+  font-size: 16px;
+  font-family: "Arial", sans-serif;
+  border-radius: 0.2em;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+
+.calendar--previous-and-next {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: flex-end; }
+
+.calendar--footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #e6e6e6;
+  padding: 0;
+  border-radius: 0.2em; }
+
+.calendar--years-select,
+.calendar--months-select {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 14.85em;
+  background-color: #fff;
+  width: 100%; }
+
+.calendar--year,
+.calendar--month {
+  display: block;
+  padding: .5em 1em;
+  width: 100%;
+  overflow: hidden;
+  color: #000; }
+  .calendar--year__selected,
+  .calendar--month__selected {
+    color: #000;
+    font-weight: bold;
+    background-color: #eee; }
+  .calendar--year:hover,
+  .calendar--month:hover {
+    cursor: pointer;
+    background-color: #eee;
+    font-weight: 400;
+    color: #000; }
+
+.calendar--days-of-week {
+  display: flex;
+  justify-content: space-around;
+  background-color: #eee; }
+
+.calendar--day-of-week {
+  position: relative;
+  padding: .5em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #000;
+  font-size: .9em; }
+
+.calendar--days-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff; }
+
+.calendar--day {
+  text-align: center;
+  width: 1.285em;
+  padding: .5em;
+  font-weight: 500;
+  color: #000; }
+  .calendar--day__muted {
+    color: #999; }
+  .calendar--day__selected {
+    background-color: #eee;
+    color: #000; }
+  .calendar--day:hover {
+    cursor: pointer;
+    color: #000;
+    background-color: #eee; }
+
+.ngx-picker {
+  display: flex;
+  position: relative; }
+  .ngx-picker .calendar {
+    position: absolute;
+    left: 0;
+    top: 2.5em;
+    z-index: 3; }
+
+.time-picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #e6e6e6; }
+
+.time--values {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #eee; }
+
+.time--value {
+  width: 2.66em;
+  font-size: 1em;
+  padding: .5em 0;
+  text-align: center;
+  color: #000; }
+  .time--value__selected {
+    color: #000;
+    background-color: #e6e6e6; }
+  .time--value:hover {
+    transition: .25s ease;
+    cursor: pointer;
+    background-color: #e6e6e6; }
+
+[hidden] {
+  display: none !important; }
+  #c11 {
+      width: 25%; 
+      float:left
+  }
+  #c22{
+      width: 25%; 
+      float:left
+  }
+  #c33 {
+      width: 25%; 
+      float:left
+      
+  }
+  #c44{
+      width: 25%; 
+      float:left
+  }
+  #c111 {
+      width: 50%; 
+      float:left
+  }
+  #c222{
+      width: 45%; 
+      float:left
+  }
+  #c333 {
+      width: 5%; 
+      float:left
+      
+  }
+  /* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/src/app/device-report/trip-details/trip-details.component.spec.ts b/src/app/device-report/trip-details/trip-details.component.spec.ts
new file mode 100644
index 0000000..05efc03
--- /dev/null
+++ b/src/app/device-report/trip-details/trip-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripDetailsComponent } from './trip-details.component';
+
+describe('TripDetailsComponent', () => {
+  let component: TripDetailsComponent;
+  let fixture: ComponentFixture<TripDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-details/trip-details.component.ts b/src/app/device-report/trip-details/trip-details.component.ts
new file mode 100644
index 0000000..e6a7a87
--- /dev/null
+++ b/src/app/device-report/trip-details/trip-details.component.ts
@@ -0,0 +1,314 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+
+declare var google: any;
+
+
+@Component({
+  selector: 'app-trip-details',
+  templateUrl: './trip-details.component.html',
+  styleUrls: ['./trip-details.component.scss']
+})
+export class TripDetailsComponent implements OnInit {
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  date1:any = new Date();
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  finall:any;
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+deviceId:any;
+userId : any;
+d_detail:any;
+
+from_date = new Date();
+to_date = new Date();
+superAdmin:Boolean = false;
+  ngOnInit() {
+
+    this.from_date =new Date( window.localStorage.getItem("from_date"));
+    // console.log(this.from_date);
+
+    this.to_date =new Date( window.localStorage.getItem("to_date"));
+    // console.log(this.to_date);
+
+    this.deviceId = window.localStorage.getItem("Device_id");
+    this.userId =  window.localStorage.getItem("userId");
+
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+
+
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+   this.trip_details();
+
+  }
+
+  cond:Boolean = false;
+    point : any = 0;
+
+  a(){
+   
+    // console.log(this.point);
+    if(this.point == 0){
+     this.cond = true;
+     this.point ++;
+    }
+  else if(this.point % 2 == 0){
+   this.cond = true;
+   this.point ++;
+  }
+  else{
+    this.cond = false
+    this.point ++;
+  }
+  
+    
+  }
+
+  
+summaryReport(){
+ 
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+
+route_map(){
+  this.cond =false;
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+  soon(){
+
+  }
+
+  devi(){
+
+  }
+
+  openNav(){
+
+  }
+
+
+  geo(){
+
+  }
+
+  report(){
+
+  }
+
+  report_speed(){
+
+  }
+
+  ideal(){
+
+  }
+
+  ign(){
+
+  }
+
+  before:any;
+
+  myaccount(){
+
+  }
+
+  mydealer(){
+
+  }
+  logout(){
+
+  }
+
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  distance_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+  
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+ trip_detail_log =[];
+ start_add:any="";
+  trip_details(){
+    let user = this.userId;
+    let devID = this.deviceId;
+    // console.log(this.from_date);
+    let fDate = this.from_date.toISOString();
+    let tdate = this.to_date.toISOString();
+    // console.log(fDate);
+    // console.log(tdate);
+
+    this.contactService.trip_logs(user,fDate,tdate,devID)
+      .subscribe((res)=>{
+        this.d_detail = res;
+        // console.log(res);
+        // console.log(this.d_detail);
+
+        for(let i=0;i<this.d_detail.length;i++){
+       
+          let lat = this.d_detail[i].start_lat;
+          let long = this.d_detail[i].start_long;
+          var geocoder = new google.maps.Geocoder();
+          var latlng = new google.maps.LatLng(lat,long);
+    
+          var request = {
+            latLng:latlng
+          };
+    
+          geocoder.geocode(request, function(data,status){
+            if(status == google.maps.GeocoderStatus.OK){
+              if(data[0]!=null){
+              
+                 this.start_add = data[0].formatted_address;
+                //  console.log("address is: " + this.start_add);
+
+               
+               
+              }else{
+                // console.log("No address available")
+              }
+            }
+            else{
+              // $scope.allDevices[index].address = device.last_location.lat + ' ,' + device.last_location.long
+              // console.log("lat long numeric address  : NA" );
+              this.start_add ='NA';
+            //  this.trip_detail_log.push({"start_address":this.start_add});
+            }
+            
+          })
+          let show_add = this.start_add;
+          let fd = this.d_detail[i].start_time.toLocaleString();
+          let td = this.d_detail[i].end_time.toLocaleString();
+          // console.log(fd);
+          // console.log(td);     
+          let dist =  this.d_detail[i].distance/1000
+          this.trip_detail_log.push({"distance":dist,
+          "startTime":fd,
+          "endTime":td,
+         });
+        
+          
+        }
+       
+
+        // console.log(this.trip_detail_log);
+      })
+    
+
+  }
+
+}
diff --git a/src/app/device-report/trip-load-unload/trip-load-unload.component.html b/src/app/device-report/trip-load-unload/trip-load-unload.component.html
new file mode 100644
index 0000000..4f1c302
--- /dev/null
+++ b/src/app/device-report/trip-load-unload/trip-load-unload.component.html
@@ -0,0 +1,88 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Loading Unloading Trip' | translate}}</h4>
+      <!-- <i class="fas fa-download"></i> -->
+    </div>
+  </div>  
+
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier" ></app-report-filter>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <ul class="nav nav-tabs" id="myTab" role="tablist" > 
+        <li class="nav-item" (click)="changeDetector('group')">
+          <a class="nav-link active" id="grouped-tab" data-toggle="tab" href="#grouped" role="tab" aria-controls="grouped logs" aria-selected="false">{{'Group' | translate}}</a>
+        </li>
+        <li class="nav-item" (click)="changeDetector('detail')">
+          <a class="nav-link" id="detailed-tab" data-toggle="tab" href="#detailed" role="tab" aria-controls="detialed data" aria-selected="true">{{'Detail'|translate}}</a>
+        </li>
+      </ul>
+      <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="grouped" role="tabpanel" aria-labelledby="groupes-tab">
+          <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div *ngIf="Load" class="loading">Loading&#8230;</div>
+              <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+              <div style="width: 100%;height:84vh;">
+                <table id="deviceTable_grouped" cellspacing="0" style="width: 100%;font-size: 14px;">
+                    <thead style="background-color:#e0e0e0;color: #444444;width: 100%;">
+                        <tr>
+                           <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
+                            <th style="text-align:left;">{{'Trip Start Geofence' | translate}}</th>
+                            <th style="text-align:left;">{{'Trip End Geofence' | translate}}</th>
+                            <th style="text-align:left;">{{'Distance' | translate}}</th>
+                            <th style="text-align:left;">{{'Running' | translate}}</th>
+                            <th style="text-align:left;">{{'Stop' | translate}}</th>
+                            <th style="text-align:left;">{{'Idle' | translate}}</th>
+                            <th style="text-align:left;">{{'Utilization %' | translate}}</th>
+                            <th style="text-align:left;">{{'Efficiency %' | translate}}</th>                
+                            <th style="text-align:left;">{{'No. of trips' | translate}}</th>  
+                        </tr>
+                    </thead>  
+                </table>
+            </div> 
+            </div>
+          </div> 
+        </div>
+        <div class="tab-pane fade" id="detailed" role="tabpanel" aria-labelledby="detailed-tab">
+          <div *ngIf="tableSwitch" class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div *ngIf="Load" class="loading">Loading&#8230;</div>
+              <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+              <div >
+                <table id="deviceTable" style="font-size: 14px;width:100%">
+                    <thead style="background-color:#e0e0e0;color: #444444;">
+                        <tr>
+                          <th style="text-align:left">{{'Vehicle Name' | translate}}</th>
+                            <th style="text-align:left">{{'Trip Start' | translate}}</th>
+                            <th style="text-align:left">{{'Trip End' | translate}}</th>
+                            <th style="text-align:left;">{{'Trip Start time' | translate}}</th>
+                            <th style="text-align:left">{{'Trip End time' | translate}}</th>   
+                            <th style="text-align:left">{{'Distance (Kms.)' | translate}}</th>
+                            <th style="text-align:left;">{{'Duration (HH:MM)' |translate}}</th>
+                            <th style="text-align:left">{{'Running Time (HH:MM)' |translate}}</th>
+                            <th style="text-align:left">{{'Stoppage Time (HH:MM)' | translate}}</th>        
+                            <th style="text-align:left">{{'Idle Time (HH:MM)' | translate}}</th>   
+                            <th style="text-align: left">{{'Status' | translate}}</th>      
+                            <th style="text-align: left">{{'Replay' | translate}}</th>           
+                        </tr>
+                    </thead>  
+                </table>
+            </div> 
+            </div>
+          </div> 
+        </div>
+       
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/device-report/trip-load-unload/trip-load-unload.component.scss b/src/app/device-report/trip-load-unload/trip-load-unload.component.scss
new file mode 100644
index 0000000..a467f38
--- /dev/null
+++ b/src/app/device-report/trip-load-unload/trip-load-unload.component.scss
@@ -0,0 +1,50 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
+
+    th, td { 
+      white-space: nowrap;
+      }
+      
+      div.dataTables_wrapper {
+          width: 80%;
+          margin: 0 auto;
+      }
+      
+   
\ No newline at end of file
diff --git a/src/app/device-report/trip-load-unload/trip-load-unload.component.spec.ts b/src/app/device-report/trip-load-unload/trip-load-unload.component.spec.ts
new file mode 100644
index 0000000..3f08195
--- /dev/null
+++ b/src/app/device-report/trip-load-unload/trip-load-unload.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripLoadUnloadComponent } from './trip-load-unload.component';
+
+describe('TripLoadUnloadComponent', () => {
+  let component: TripLoadUnloadComponent;
+  let fixture: ComponentFixture<TripLoadUnloadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripLoadUnloadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripLoadUnloadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-load-unload/trip-load-unload.component.ts b/src/app/device-report/trip-load-unload/trip-load-unload.component.ts
new file mode 100644
index 0000000..9fcf7ed
--- /dev/null
+++ b/src/app/device-report/trip-load-unload/trip-load-unload.component.ts
@@ -0,0 +1,570 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Http, Headers, RequestOptions, ResponseContentType } from '@angular/http';
+import { saveAs } from 'file-saver';
+import { environment } from '../../../environments/environment';
+import { MdSnackBar, MdDialog } from '@angular/material';
+declare var $: any;
+declare var google: any;
+import * as moment from 'moment';
+import { PlayTripComponent } from '../../play-trip/play-trip.component';
+const now = new Date();
+
+@Component({
+  selector: 'app-trip-load-unload',
+  templateUrl: './trip-load-unload.component.html',
+  styleUrls: ['./trip-load-unload.component.scss']
+})
+export class TripLoadUnloadComponent implements OnInit {
+  dateStr: any;
+  Fromdate = new Date();
+  tableSwitch:boolean= true;
+  todate = new Date();
+  useridd: any;
+  fDate: any;
+  tDate: any;
+  dev_url = environment.hostUrl;
+  // dateString=['Today Report','Yesterday Report','Weekly Report','Monthly Report'];
+  fromDate: any;
+  toDate: any;
+  Load: boolean;
+  tabelObj: any;
+  tabelObj_grouped:any;
+  custtype: any;
+  superAdmin: any;
+  data_descip: string;
+  reportArr :any= [];
+  emailid: any;
+  devicesss: any;
+  options: any;
+  finall: any;
+
+  constructor(private contactService: ContactService, private http: Http, public snackBar: MdSnackBar,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.tDate = new Date();
+    var fd = new Date();
+    fd.setHours(0, 0, 0, 0);
+    this.fDate = fd;
+    // this.getDevices();
+  
+    this.testTable();
+    var tt= this;
+    setTimeout(()=>{
+      tt.testTable_grouped();
+     
+    },5000)
+  
+  }
+
+  deviceArr = [];
+  tab: any;
+
+  exportExcel() {
+    console.log('Inside detailed');
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+  exportExcel_grouped() {
+   
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable_grouped').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+       
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+  }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({  
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        deferRender: true,
+        scrollY:    '55vh',
+        scrollX : true,
+        scrollCollapse: true,
+     
+        "sScrollX": "100%",
+        scroller:       true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          that.Load = true;
+
+
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+          // https://www.oneqlik.in/trackRouteMap/getTripReport?userid=59cbbdbe508f164aa2fef3d8
+          suburl += "/trackRouteMap/getTripReport?userid=" + that.useridd +'&from='+from_date.toISOString()+ '&to='+ to_date.toISOString();
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }
+
+          console.log('that.deviceArr',that.deviceArr);
+       
+            that.contactService.get(suburl).subscribe(resp => {
+              console.log('resp=>',resp); 
+              // var tripData = [];
+              // tripData = resp ; 
+
+              // that.reportArr = [];
+              // that.reportArr= resp ; 
+              that.Load = false; 
+            
+              callback({ data: resp });
+       
+            }, err => {
+              that.Load = false;
+              var errCode = err.status;
+              if(errCode == 500){
+                callback({ data: [] });
+              }
+              console.log("error", err);
+            });
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#playTrip', row).bind('click', () => {  
+            console.log(data);
+           console.log(data.reportingDateTime);
+           console.log(data.exitDateTime);
+            var fd = new Date(data.loadingPoint.reportingDateTime).toISOString();
+            var td = new Date(data.destination.exitDateTime).toISOString();
+              var replayObj= {
+                fromdate:fd,
+                todate : td,
+                user : that.useridd,
+                device:{imei: data.deviceId,_id: data.device_id,iconType:'car'},
+                geofences:[data.Source, data.Destination]  ,
+                distance: (typeof data.distanceTravelled === 'number')?(parseFloat(data.distanceTravelled).toFixed(2)):0    
+              }
+
+              let dialogRef = that.dialog.open(PlayTripComponent, {    
+                data: replayObj
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+                if(result == 'cancelled'){
+                
+                }
+              })  
+             
+              
+            }); 
+             
+        }
+      ,
+         
+
+        "columns": [
+          // {
+          //   "data": "_id",
+          //   "defaultContent": "",
+          //   "visible" : false,
+          //   "render": function (data, type, row) {       
+           
+          //     return data ? data : "";   
+          //   }
+          // },
+          
+          {
+            "data": "vrn",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data : "";   
+            }
+          },
+          {
+            "data": "Source",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data.geoname : "";   
+            }
+          },
+          {
+            "data": "Destination",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? data.geoname : '';
+            }
+          },
+          {
+            "data": "loadingPoint",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return data ? moment(data.reportingDateTime).format('llll') : "--";
+            }
+          },
+          {
+            "data": "destination",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data ? moment(data.exitDateTime).format('llll') : '--';
+            }
+          },
+          {
+            "data": "distanceTravelled",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? parseFloat(data).toFixed(2) : 0.0;
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? that.secondsToHms(data.total) : "0:0";
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              that.secondsToHms(data.running);
+              return data ? that.secondsToHms(data.running) : '0:0';
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? that.secondsToHms(data.stoppage) :'0:0';
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return  '--';
+            }
+          }
+          ,
+          {
+            "data": "status",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return  data;
+            }
+          }
+          ,
+          {
+            "data": "null",
+            "defaultContent": "",
+            render: function(data, type, row) {    
+              if(row.status  == 'COMPLETED'){
+                return '<i id="playTrip" style="color:green;cursor:pointer" class="fas fa-play"></i>';
+              }else{
+                return '<i class="fas fa-times"></i>';
+              }
+          
+            }
+        }    
+        ]
+        // "columnDefs": [
+        //   { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7] },
+        //   {
+        //     "targets": '_all',
+        //     "createdCell": function (td, cellData, rowData, row, col) {
+        //       $(td).css('padding', '18px')
+        //     }
+        //   },
+        //   { "width": "10px", "targets": 0 },
+        //   { "width": "40px", "targets": 1 },
+        //   { "width": "100px", "targets": 2 },
+        //   { "width": "70px", "targets": 3 },
+
+        // ]
+      });
+
+    });
+
+  }
+
+  testTable_grouped() {
+
+    const that = this;
+    console.log("inside function grouped");
+    $(document).ready(function () {
+      that.tabelObj_grouped = $('#deviceTable_grouped').DataTable({
+      
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          // that.Load = true;
+
+
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+        
+          suburl += "/trackRouteMap/getTripCountReport?userid=" +that.useridd +'&from='+from_date.toISOString()+ '&to='+ to_date.toISOString();
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }
+          console.log('B4 grouped data called');
+            that.contactService.get(suburl).subscribe(resp => {    
+              // console.log('response for grouped Data',resp);
+            callback({ data: resp });
+            }, err => {
+              // that.Load = false;
+              console.log('Error Detected in load unload grouped');
+              callback({ data: [] });
+              // var errCode = err.status;
+              // if(errCode == 500){
+               
+              // }
+            });
+        },
+        "rowCallback": function( row, data, index ) {
+          // console.log(data);
+         
+          // var colorChk = data.utilization?parseFloat(data.utilization).toFixed(2):null;
+          // console.log(row);
+          if (data.utilization >= 60 )
+          {
+              $('td', row).css({'background-color': '#3ded1d','border-bottom' :'1px solid white'});
+          }
+          else if(data.utilization<60)
+          {
+              $('td', row).css({'background-color': '#FF0800' ,'border-bottom' :'1px solid white'});
+          }else{
+            $('td', row).css({'background-color': 'grey','border-bottom' :'1px solid white'});
+          }
+      },
+ 
+        "columns": [
+       
+          
+          {
+            "data": "Vehicle Name",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data : "";   
+            }
+          },
+          {
+            "data": "Source",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+              // console.log('datadatadatadatadatadatadatadata',data.source)
+              return data ? data.geoname : "--";   
+            }
+          },
+          {
+            "data": "Destination",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              // console.log('datadatadatadatadatadatadatadata',data)
+              return data ? data.geoname : '--';
+            }
+          },
+          {
+            "data": "distanceTravelled",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return data ? data.toFixed(2):0;
+            }
+          },
+          {
+            "data": "running",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "stoppage",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "idle",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "utilization",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            var  d = data?parseFloat(data).toFixed(2):'0'
+            return  d;
+            }
+          },
+          {
+            "data": "efficiency",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+              var  e = data?parseFloat(data).toFixed(2):'0'
+            return  e;
+            }
+          },
+          {
+            "data": "tripCount",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data ?data:0;
+            }
+          }
+      
+        ],
+        "columnDefs": [
+          // { className: "dt-body-left", "targets": [0, 1, 2, 3,4] },
+        ]
+      });
+
+    });
+
+  }
+
+  identifier: any = 'loadunloadTrip';
+  getReport(event) {
+    console.log("inside function");
+    if (event == 'getExcel') {
+      if(this.detector === 'group'){
+        this.exportExcel_grouped();
+        
+      }
+      if(this.detector === 'detail'){
+        this.exportExcel();
+        
+      }
+     
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+       
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      this.Fromdate = fd;
+      this.todate = td;
+     
+      this.tabelObj.ajax.reload();
+     var pt = this;
+     var tmp =  setTimeout(()=>{
+        pt.tabelObj_grouped.ajax.reload();
+        clearTimeout(tmp);
+      },2000)
+     
+    }
+
+  }
+
+
+   secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h : "0";
+    var mDisplay = m > 0 ? m : "0";
+    var sDisplay = s > 0 ? s  : "0";
+    return hDisplay + ":" +mDisplay; 
+}
+
+detector='group';
+changeDetector(iden){
+ 
+  
+  if(iden === 'detail'){
+    this.detector = 'detail';
+  }
+  if(iden === 'group'){
+    this.detector = 'group';
+
+
+  }
+}
+
+
+
+
+}
diff --git a/src/app/device-report/trip-report/trip-report.component.html b/src/app/device-report/trip-report/trip-report.component.html
new file mode 100644
index 0000000..18c12f6
--- /dev/null
+++ b/src/app/device-report/trip-report/trip-report.component.html
@@ -0,0 +1,147 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Trip Report'|translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left">{{'From Date' | translate}}</th>
+                      <th style="text-align: left">{{'From Location' | translate}}</th>
+                      <th style="text-align: left">{{'To date' | translate}}</th>
+                      <th style="text-align: left">{{'To location' | translate}}</th>
+                      <th style="text-align: left">{{'Distance (Km/hr)' | translate}}</th>
+                      <th style="text-align: left">{{'Replay' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+
+<app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top:6%">
+  <p class="headStyle">{{'Trips Report' | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-3" style="padding-left: 70px; padding-top: 15px;">
+  
+          <select id="select" multiple="multiple" >
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="top: 16px;">
+        <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="tripReport(Fromdate,todate)">{{'Trip Report' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+  <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Vehicle Name' | translate}}</th>
+        <th style="text-align: center">{{'From Date' | translate}}</th>
+        <th style="text-align: center">{{'From Location' | translate}}</th>
+        <th style="text-align: center">{{'To date' | translate}}</th>
+        <th style="text-align: center">{{'To location' | translate}}</th>
+        <th style="text-align: center">{{'Distance (Km/hr)' | translate}}</th>
+     
+      </tr>
+    </thead>
+    <tbody>
+
+      <tr *ngFor="let device of summary">
+        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
+        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+       
+            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
+            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
+       
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
+          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <table id="test"class="table table-striped table-hover " style="display: none">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">Vehicle Name</th>
+        <th style="text-align: center">From Date</th>
+        <th style="text-align: center">From Location</th>
+        <th style="text-align: center">To date</th>
+        <th style="text-align: center">To location</th>
+        <th style="text-align: center">Distance (Km/hr)</th>
+     
+      </tr>
+    </thead>
+
+    <tbody>
+
+      <tr *ngFor="let device of summary">
+        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
+        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+      
+            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
+            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+       
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
+          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a>
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div> -->
diff --git a/src/app/device-report/trip-report/trip-report.component.scss b/src/app/device-report/trip-report/trip-report.component.scss
new file mode 100644
index 0000000..06f454f
--- /dev/null
+++ b/src/app/device-report/trip-report/trip-report.component.scss
@@ -0,0 +1,37 @@
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+ 
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/device-report/trip-report/trip-report.component.spec.ts b/src/app/device-report/trip-report/trip-report.component.spec.ts
new file mode 100644
index 0000000..8ba785b
--- /dev/null
+++ b/src/app/device-report/trip-report/trip-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripReportComponent } from './trip-report.component';
+
+describe('TripReportComponent', () => {
+  let component: TripReportComponent;
+  let fixture: ComponentFixture<TripReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/trip-report/trip-report.component.ts b/src/app/device-report/trip-report/trip-report.component.ts
new file mode 100644
index 0000000..b97f099
--- /dev/null
+++ b/src/app/device-report/trip-report/trip-report.component.ts
@@ -0,0 +1,391 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+
+declare var google: any;
+declare var $: any;
+import * as moment from 'moment';
+import { PlayTripComponent } from '../../play-trip/play-trip.component';
+
+@Component({
+  selector: 'app-trip-report',
+  templateUrl: './trip-report.component.html',
+  styleUrls: ['./trip-report.component.scss']
+})
+export class TripReportComponent implements OnInit {
+  dataSelect: any[];
+  addressLink1: string;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  date1:any;
+  neww:any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  identifier : String = "trip_report";
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  ngOnInit() {
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+ 
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable();
+       
+  }
+
+  
+device_summary =[];
+summary:any;
+d_name:any;
+total_running_time:any;
+stop_time:any;
+overSpeed:any;
+route_violation:any;
+trips:any;
+total_km:any;
+address_show:any;
+end_add_show:any;
+start_add:any;
+end_add:any;
+start_add_lat:any;
+start_add_long:any;
+end_add_lat:any;
+end_add_long:any;
+uId:any;
+devId:any;
+
+Durations:any;
+deviceArr:any=[];
+
+getReport(event){
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+ 
+  
+   
+    this.tabelObj.ajax.reload();      
+   
+
+  }
+    
+
+
+}
+
+
+tab:any;
+exportExcel()
+{
+ 
+ 
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+filterStates(val) {
+
+  // console.log(val)
+
+ 
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+ 
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+  }
+
+}
+
+addressLink = "";
+getlink(report : any){
+ 
+  // console.log("report=>",report);
+  var lat = report.start_lat?report.start_lat:0;
+  var lng = report.start_long?report.start_long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+getlink1(report:any){
+ 
+  // console.log("report=>",report);
+  var lat = report.end_lat?report.end_lat:0;
+  var lng = report.end_long?report.end_long:0;
+  this.addressLink1 =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+tabelObj: any ;
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+ 
+     that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true
+              console.log('that.deviceArr',that.deviceArr);    
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){        
+              suburl += "/user_trip/trip_detail?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&uId=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe(resp => {   
+              
+                 that.Load = false ;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+
+            }else{
+              that.Load = false ;
+              callback({data : [] });
+
+            }
+
+       
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#playTrip', row).bind('click', () => {  
+            console.log(data);
+            var fd = new Date(data.start_time).toISOString();
+            var td = new Date(data.end_time).toISOString();
+              var replayObj= {
+                fromdate:fd,
+                todate : td,
+                user : that.useridd,
+                device:{imei: data.device.Device_ID,_id: data.device._id,iconType:data.device.iconType},
+                distance: (typeof data.distance === 'number')?(parseFloat(data.distance).toFixed(2)):0
+                
+              }
+
+              let dialogRef = that.dialog.open(PlayTripComponent, {    
+                data: replayObj
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+                if(result == 'cancelled'){
+                
+                }
+              })  
+             
+              
+            }); 
+             
+        }
+      ,
+
+      
+          "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {    
+                    console.log(data);
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "start_time",
+                  render: function(data, type, row) {
+                    var st = new Date(data);
+                    return data ? (moment(st).format('llll')) : "";  
+                    
+                  }
+              },
+              {
+                  "data": "startAddress",
+                  "defaultContent": "_id",
+                  render: function(data, type, row) {
+                    var lat = row.start_lat?row.start_lat:0;
+                    var long = row.start_long?row.start_long:0;   
+                    var addressLink_start = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';       
+                    return data?data : addressLink_start;  
+                
+                  }
+              },        
+            {
+              "data": "end_time",
+              render: function(data, type, row) { 
+                var et = new Date(data);
+                return data ? (moment(et).format('llll')) : "";     
+              }
+          }  ,
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function(data, type, row) { 
+              var lat = row.end_lat?row.end_lat:0;
+              var long = row.end_long?row.end_long:0;
+              var addressLink_end = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle End location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';      
+              return data?data : addressLink_end;  
+           
+            }
+        },
+        {
+          "data": "distance",
+          render: function(data, type, row) {    
+          return data?(data/1000).toFixed(2):'';
+          }
+      }      ,
+      {
+        "data": "null",
+        "defaultContent": "",
+        render: function(data, type, row) {    
+        return '<i id="playTrip" class="fas fa-play" title="Trip replay" style="color:green;cursor :pointer"></i>';
+        }
+    }      
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          }   ,
+       
+
+          { "width": "15%", "targets": 0 },
+             { "width": "20%", "targets": 1 },
+          { "width": "20%", "targets": 3 },
+         
+          ] 
+      });
+
+  });
+
+}
+
+
+}
diff --git a/src/app/device-report/working-hour-detail/working-hour-detail.component.html b/src/app/device-report/working-hour-detail/working-hour-detail.component.html
new file mode 100644
index 0000000..312c81c
--- /dev/null
+++ b/src/app/device-report/working-hour-detail/working-hour-detail.component.html
@@ -0,0 +1,30 @@
+<div style="height: 535px;">
+  <div class="row" no-padding>
+    <div class="col-9" no-padding>
+        <h4 style="text-align: center; margin-left: 25%;">{{'Working Hour Details' | translate}}</h4>
+    </div>
+    <div class="col-3" style="text-align: right" no-padding>
+      <i class="far fa-times-circle" style="font-size: 25px;color: red;margin-top: 2px;" (click)="cancel()" title="Close"></i>
+    </div>  
+  </div>
+  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
+  <div>
+    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th>{{'Time' | translate}}</th>
+          <th>{{'Vehicle Name' | translate}}</th>
+          <th>{{'Ignition Status' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let flobj of ignitionObj">
+          <td >{{flobj.timestamp | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td >{{flobj.vehicleName}}</td>
+          <td >{{flobj.switch}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/working-hour-detail/working-hour-detail.component.scss b/src/app/device-report/working-hour-detail/working-hour-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device-report/working-hour-detail/working-hour-detail.component.spec.ts b/src/app/device-report/working-hour-detail/working-hour-detail.component.spec.ts
new file mode 100644
index 0000000..3055046
--- /dev/null
+++ b/src/app/device-report/working-hour-detail/working-hour-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkingHourDetailComponent } from './working-hour-detail.component';
+
+describe('WorkingHourDetailComponent', () => {
+  let component: WorkingHourDetailComponent;
+  let fixture: ComponentFixture<WorkingHourDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkingHourDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkingHourDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/working-hour-detail/working-hour-detail.component.ts b/src/app/device-report/working-hour-detail/working-hour-detail.component.ts
new file mode 100644
index 0000000..8cd954d
--- /dev/null
+++ b/src/app/device-report/working-hour-detail/working-hour-detail.component.ts
@@ -0,0 +1,87 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+
+@Component({
+  selector: 'app-working-hour-detail',
+  templateUrl: './working-hour-detail.component.html',
+  styleUrls: ['./working-hour-detail.component.scss']
+})
+export class WorkingHourDetailComponent implements OnInit {
+  useridd: any;
+  organisationFlag: any;
+  superAdmin: any;
+  isDealer: any;
+  ignitionObj=[];
+  digitalInput
+
+  constructor(public dialogRef: MdDialogRef<WorkingHourDetailComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+    console.log(data);
+    this.digitalInput=data.deviceInfo
+
+   }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+    this.organisationFlag = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOrganisation  ;     
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      this.isDealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      // if(this.digitalInput==1)
+      // {
+      //   this.getIgnitionReport();
+      // }else{
+      //   this.AcReport()
+      // }
+      this.ignitionObj=this.digitalInput
+  }
+
+  cancel(){
+    this.dialogRef.close('close');
+
+  }
+
+  AcReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    var suburl = "";
+     suburl += "/notifs/acReport?from_date=" + payload.fromDate +'&to_date=' + payload.toDate + '&_u=' + payload.user +'&device='+payload.device;
+              if((payload.fromDate != undefined)&&(payload.toDate != undefined)){
+                this.contactService.get(suburl).subscribe(resp => {  
+                  console.log(resp[0].s)
+                this.ignitionObj = resp[0].s;
+                })
+              }
+
+  }
+
+   getIgnitionReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    console.log(payload);
+    this.contactService.getIgnition(payload).subscribe(res=>{
+      console.log(res);
+      this.ignitionObj = res;
+
+    })
+  }
+}
diff --git a/src/app/device-report/working-hour-report/working-hour-report.component.html b/src/app/device-report/working-hour-report/working-hour-report.component.html
new file mode 100644
index 0000000..1d69735
--- /dev/null
+++ b/src/app/device-report/working-hour-report/working-hour-report.component.html
@@ -0,0 +1,54 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Working Hours Report' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <!-- <th style="text-align:left;">DID</th> -->
+                        <th style="text-align:left;">{{'Vehicle'|translate}} </th>     
+                            <th style="text-align:left;">{{'IMEI' | translate}}</th> 
+                        <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>     
+                        <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>     
+                        <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>     
+                    </tr>
+                </thead>  
+            </table>
+            <!-- <table *ngIf="digital_input==2" id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                 
+                  <th style="text-align:left;">{{'Vehicle'|translate}} </th>
+                  <th style="text-align:left;">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>
+                  <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>
+                  <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>
+                </tr>
+              </thead>
+            </table> -->
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/device-report/working-hour-report/working-hour-report.component.scss b/src/app/device-report/working-hour-report/working-hour-report.component.scss
new file mode 100644
index 0000000..b5953d3
--- /dev/null
+++ b/src/app/device-report/working-hour-report/working-hour-report.component.scss
@@ -0,0 +1,92 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+
+
+
+    
+  #toast {
+    visibility: hidden;
+    max-width: 150px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+  width: 150px;
+  height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+  
\ No newline at end of file
diff --git a/src/app/device-report/working-hour-report/working-hour-report.component.spec.ts b/src/app/device-report/working-hour-report/working-hour-report.component.spec.ts
new file mode 100644
index 0000000..bb21da3
--- /dev/null
+++ b/src/app/device-report/working-hour-report/working-hour-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkingHourReportComponent } from './working-hour-report.component';
+
+describe('WorkingHourReportComponent', () => {
+  let component: WorkingHourReportComponent;
+  let fixture: ComponentFixture<WorkingHourReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkingHourReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkingHourReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device-report/working-hour-report/working-hour-report.component.ts b/src/app/device-report/working-hour-report/working-hour-report.component.ts
new file mode 100644
index 0000000..6eec239
--- /dev/null
+++ b/src/app/device-report/working-hour-report/working-hour-report.component.ts
@@ -0,0 +1,898 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../contact.service';
+import { MyaccountComponent } from '../../myaccount/myaccount.component';
+import { environment } from '../../../environments/environment';
+import { SearchFilterPipe } from '../../search-filter.pipe'
+
+
+declare var google: any;
+declare var $:any;
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+import * as moment from 'moment';
+import { WorkingHourDetailComponent } from '../working-hour-detail/working-hour-detail.component';
+import { DialogDemoComponent } from '../../dialog-demo/dialog-demo.component';
+import { AcreportInfoComponent } from '../ac-report/acreport-info/acreport-info.component';
+
+@Component({
+  selector: 'app-working-hour-report',
+  templateUrl: './working-hour-report.component.html',
+  styleUrls: ['./working-hour-report.component.scss']
+})
+export class WorkingHourReportComponent implements OnInit {
+  ignition_data: any =[];
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+totalWorkingHours=[]
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  dataForDigital1
+  dataForDigital2
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+  tabelObj:any; 
+  tabelObj1:any; 
+  tableFlag: boolean=true;
+  identifier : String = "working_report";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  data_descip: string;
+  digital_input: any;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { 
+    
+  
+  }
+
+  ngOnInit() {
+ 
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     
+     this.getUserDeatils()
+     
+  }
+
+  getUserDeatils(){
+    this.contactService.getUserObj(this.useridd).subscribe(res=>{
+      this.digital_input=res.digital_input?res.digital_input:1;
+      if(this.digital_input==1){
+          this.testTable();
+      }else{
+          this.testTable2();
+      }
+  })
+  }
+// this.contactService.acReportMain(this.Fromdate,this.todate,this.useridd,this.vname).subscribe(res=>{1stAction: "OFF"
+// 1stTime: 5002.068983333334
+// 2stAction: "ON"
+// 2stTime: 6529.886616666667
+// VehicleName: "JCB"
+// imei: "862007228064955"
+  testTable2(){
+   
+  const that = this;
+  console.log("inside digital 2");
+  $(document).ready(function() {
+     that.tabelObj1 = $('#deviceTable').DataTable({
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers', 
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+              var deviceID;
+              that.Load = true;
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              // https://socket.oneqlik.in/notifs/ACSwitchReport
+              var suburl = "";
+              suburl += "/notifs/acReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr[0];
+              }
+              
+              if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+                that.contactService.get(suburl).subscribe(resp => {   
+                  // console.log(ignReport.length);  
+                //  that.rowData=resp
+                that.dataForDigital2=resp[0].s
+                  that.calculateACHours(resp[0].s)
+                  var wrReport = [];
+                  for(var r in resp){
+                        // console.log('foreach',resp[r]);
+                        var tempObj = {
+                          'vehName' : r,
+                          'ON-OFF_time': resp[r]['ON-OFF_time'],
+                          'OFF-ON_time' :resp[r]['OFF-ON_time'],
+                          'Imei' :resp[r]['deviceId']
+                        }
+                        wrReport.push(tempObj);
+                  }
+                  // console.log('result',wrReport);
+                  that.Load = false;
+                  callback({data : that.reportArray });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ; 
+                var tt = [];  
+                callback({data : tt });  
+              });
+  
+              }else{
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+                      
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#getDetail', row).bind('click', () => {         
+            console.log("Row Data",data);
+                data['fromDate'] = that.Fromdate;
+                data['toDate'] = that.todate
+
+
+            // let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+            //   width: '548px',
+            //   data: { device :data}
+            // });
+            let dialogRef = that.dialog.open(WorkingHourDetailComponent, {
+                width: '800px',  
+                data: {"deviceInfo":that.dataForDigital2,"digitalInput":that.digital_input}   
+
+               });
+          
+            dialogRef.afterClosed().subscribe(result => {
+              console.log(result);
+              if(result == 'close'){
+                    console.log(close);
+              }
+            })  
+               
+            });
+          }, 
+      
+          "columns": [
+              {
+                  "data": "deviceName",
+                  "visible": true,
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "Device_ID",
+                "visible": true,
+                "render": function(data, type, row) {
+                    
+                  return data?data : '';                  
+                }
+            },
+     
+              {
+                  "data": "workingHours",
+                  "visible": true,
+                  render: function(data, type, row) {
+                    // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+                    return data ?data: 0.0; 
+                  }
+              },
+              { 
+                "data": "stopHours",
+                "visible": true,
+                render: function(data, type, row) {
+                  return data ? data : 0.0; 
+                }
+            },
+            {
+              "data": "_id",
+              "visible": true,
+              render: function(data, type, row) {
+                return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+              }
+          }
+          ],  
+
+      });
+      
+
+  });
+}
+
+timeconversion(total_min){
+ 
+  var hours = parseInt(total_min) / 60
+  var rhours = Math.floor(hours);
+  var minutes = (hours - rhours) * 60;
+  var rminutes = Math.round(minutes);
+
+  var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+  return Durations ;
+}
+
+  
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+optionVal:any;
+
+getAdd(latitude,longitude){
+  var latti =0;
+  var longi = 0
+  if(latitude != undefined){
+    latti = latitude;
+
+  }
+  if(longitude != undefined){
+    longi = longitude
+
+  }
+    return 'https://maps.google.com/?q='+ latti + ',' + longi ; 
+}
+
+// callfunction(): void {
+//   // this.Load = true;
+//   this.tabelObj.draw();
+// }
+
+getReport(event){
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    this.totalWorkingHours=[]
+    this.workingHoursArray=[]
+     this.workingHoursArray1=[];
+     this.reportArray=[]
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = tpdata.fromDate;
+    var td  = tpdata.toDate;
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+    console.log(this.digital_input);
+    
+    if(this.digital_input==1){
+      this.tabelObj.ajax.reload(); 
+    }else{
+    this.tabelObj1.ajax.reload(); 
+
+    }
+  }
+ 
+}
+
+// --------------------- New Method for working Hours---------------------------------
+
+testTable() {
+  this.reportArray=[]
+    this.workingHoursArray1=[]
+  this.workingHoursArray=[];
+  this.totalWorkingHours=[]
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+              var deviceID;
+              that.Load = true;
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              var suburl = "";
+              suburl += "/notifs/ignitionReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              
+              if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+                that.contactService.get(suburl).subscribe(resp => {   
+                  // console.log(ignReport.length);  
+                //  that.rowData=resp
+                  that.calculateWorkingHours(resp)
+                  that.dataForDigital1=resp
+                  var wrReport = [];
+                  for(var r in resp){
+                        // console.log('foreach',resp[r]);
+                        var tempObj = {
+                          'vehName' : r,
+                          'ON-OFF_time': resp[r]['ON-OFF_time'],
+                          'OFF-ON_time' :resp[r]['OFF-ON_time'],
+                          'Imei' :resp[r]['deviceId']
+                        }
+                        wrReport.push(tempObj);
+                  }
+                  // console.log('result',wrReport);
+                  that.Load = false;
+                  callback({data : that.totalWorkingHours });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ; 
+                var tt = [];  
+                callback({data : tt });  
+              });
+  
+              }else{
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+                      
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#getDetail', row).bind('click', () => {         
+            console.log("Row Data",data);
+                data['fromDate'] = that.Fromdate;
+                data['toDate'] = that.todate
+
+
+            let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+              width: '548px',
+              data: {"deviceInfo":that.dataForDigital1,"digitalInput":that.digital_input}   
+            });
+          
+            dialogRef.afterClosed().subscribe(result => {
+              console.log(result);
+              if(result == 'close'){
+                    console.log(close);
+              }
+            })  
+               
+            });
+          }, 
+      
+          "columns": [
+          //   {
+          //     "data": "deviceId",
+          //     "visible": false,
+          //     render: function(data, type, row) {
+              
+          //       return data ? data : "";  
+            
+          //     }
+          // },
+              {
+                  "data": "deviceName",
+                  "visible": true,
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "Device_ID",
+                "visible": true,
+                "render": function(data, type, row) {
+                    
+                  return data?data : '';                  
+                }
+            },
+     
+              {
+                  "data": "workingHours",
+                  "visible": true,
+                  render: function(data, type, row) {
+                    // console.log(row);
+                    // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+                    return data ? data : 0.0; 
+                  }
+              },
+              { 
+                "data": "stopHours",
+                "visible": true,
+                render: function(data, type, row) {
+                  return data ? data : 0.0; 
+                }
+            },
+            {
+              "data": "_id",
+              "visible": true,
+              render: function(data, type, row) {
+                return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+              }
+          }
+        
+          
+     
+          ],  
+
+      });
+      
+
+  });
+
+
+}
+workingHoursArray=[]
+async newMethod(data){
+  console.log("hhhh",data);
+  var tempArry=[]
+  var stopHr=0;
+  var workinHr=0
+  var result = await data.reduce(function (r, a) {
+        r[a.device.Device_ID] = r[a.device.Device_ID] || [];
+        r[a.device.Device_ID].push(a);
+        return r;
+    }, Object.create(null));
+  console.log(result);
+
+  for(var i=0;i<this.deviceArr.length;i++){
+    for(var j=0;j<result[this.deviceArr[i]].length;j++){
+      console.log("1");
+      
+      // if(j!==result[this.deviceArr[i]].length){
+         console.log("11",result[this.deviceArr[i]][j]);
+      if(result[this.deviceArr[i]][j].switch=="OFF"){
+         console.log("111",(result[this.deviceArr[i]][j].timestamp).replace('Z', '').replace('T', ''));
+         if(result[this.deviceArr[i]][j+1]){
+        if((new Date(result[this.deviceArr[i]][j].timestamp).getTime())>(new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())){
+          workinHr=(new Date(result[this.deviceArr[i]][j].timestamp).getTime()-new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())/1000;
+          stopHr=(new Date(this.todate).getTime()-new Date(this.Fromdate).getTime())/1000;
+          
+        }
+      }
+      }
+    // }
+    }
+    tempArry.push({deviceName:result[this.deviceArr[i]][j-1].vehicleName,Device_ID:this.deviceArr[i],stopHours:this.secondsToHms(stopHr),workingHours:this.secondsToHms(workinHr)})
+    stopHr=0;
+    workinHr=0;
+  }
+  this.totalWorkingHours=tempArry
+  console.log("TEMP==>",tempArry);
+  
+
+}
+workingHoursArray1=[]
+reportArray=[]
+calculateACHours(data){
+  var total=0
+  console.log(data);
+  for(let i=0;i<data.length;i++){
+    if(i!==(data.length-1)){
+    if(data[0].switch=="OFF"){
+    if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+      // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+      var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+      // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:this.deviceArr[0]})
+    }
+  }
+  else{
+    if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+      // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+       var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+    }
+  }
+}else{
+  for(var j=0;j<this.workingHoursArray1.length;j++){
+    total=total+this.workingHoursArray1[j].timestamp;
+  }
+ var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+        var stopHrs=this.secondsToHms((time-total))
+  this.reportArray.push({Device_ID:this.deviceArr[0],deviceName:data[0].vehicleName,workingHours:this.secondsToHms(total),stopHours:stopHrs});
+  }
+
+  }
+  console.log("JEDHJDH",this.workingHoursArray1,this.reportArray);
+  
+  
+
+}
+
+calculateWorkingHours(data){
+  // workingHoursArray
+  var totalTimestamp=0
+console.log(data);
+for(let i=0;i<data.length;i++){
+  if(i!==(data.length-1)){
+  if(data[i].vehicleName==data[i+1].vehicleName){
+    if(data[0].switch=="OFF"){
+    if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+      // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+      var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:data[i].device.Device_ID})
+      // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:data[i].device.Device_ID})
+    }
+  }
+  else{
+    if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+      // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+       var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:data[i].device.Device_ID})
+    }
+  }
+  }
+}else{
+  this.finalArrayBuild()
+}
+}
+// console.log("TOTAL==",this.workingHoursArray);
+}
+
+timeDifference(date1,date2) {
+  // console.log(date1,date2);
+  
+  //   var difference = date1.getTime() - date2.getTime();
+
+  //   var daysDifference = Math.floor(difference/1000/60/60/24);
+  //   difference -= daysDifference*1000*60*60*24
+
+  //   var hoursDifference = Math.floor(difference/1000/60/60);
+  //   difference -= hoursDifference*1000*60*60
+
+  //   var minutesDifference = Math.floor(difference/1000/60);
+  //   difference -= minutesDifference*1000*60
+
+  //   var secondsDifference = Math.floor(difference/1000);
+    
+  //   console.log('difference = ' + 
+  //     daysDifference + ' day/s ' + 
+  //     hoursDifference + ' hour/s ' + 
+  //     minutesDifference + ' minute/s ' + 
+  //     secondsDifference + ' second/s ');
+  //     var data={
+  //       days:daysDifference,hours:hoursDifference,minute:minutesDifference,seconds:secondsDifference
+  //     }
+  //     return data;
+  var seconds = (date1.getTime() - date2.getTime()) / 1000;
+  return seconds
+}
+
+finalArrayBuild(){
+  // var totalWorkingHours=[]
+ var tempSec=0;
+ var tempDays
+ var temMin=0;
+ var tempHr=0
+ var temp
+  var result = this.workingHoursArray.reduce(function (r, a) {
+        r[a.Device_ID] = r[a.Device_ID] || [];
+        r[a.Device_ID].push(a);
+        return r;
+    }, Object.create(null));
+
+    // console.log("==",result);
+    for(var i=0;i<this.deviceArr.length;i++){
+      if(result[this.deviceArr[i]]){
+      for(var j=0;j<result[this.deviceArr[i]].length;j++){
+        tempSec=tempSec+result[this.deviceArr[i]][j].timestamp;
+      }
+    }
+      // console.log("FromDate=>",new Date(this.Fromdate).get(),new Date(this.todate).getDate());
+      // if(new Date(this.Fromdate).getDate()==new Date(this.todate).getDate() && new Date(this.Fromdate).getMonth()==new Date(this.todate).getMonth() && new Date(this.Fromdate).getFullYear()==new Date(this.todate).getFullYear())
+      // {
+      //   var stopHr=this.secondsToHms(86400-tempSec);
+      //   this.totalWorkingHours.push({Device_ID:result[this.deviceArr[i]][j-1].Device_ID,deviceName:result[this.deviceArr[i]][j-1].deviceName,workingHours:this.secondsToHms(tempSec),stopHours:stopHr});
+      // }else{
+        var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+        // console.log("++++",time);
+        
+        var stopHrs=this.secondsToHms((time-tempSec))
+        console.log("++++11",stopHrs);
+        if(result[this.deviceArr[i]])
+        this.totalWorkingHours.push({Device_ID:result[this.deviceArr[i]][j-1].Device_ID,deviceName:result[this.deviceArr[i]][j-1].deviceName,workingHours:this.secondsToHms(tempSec),stopHours:stopHrs});
+      // }
+      
+      tempSec=0
+    }
+  console.log("sec==>",this.secondsToHms(tempSec),"TOTAL=-",this.totalWorkingHours);
+
+}
+
+secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
+    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
+    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
+    return hDisplay + mDisplay + sDisplay; 
+//     var days = num_seconds / (60 * 60 * 24);
+// num_seconds -= days * (60 * 60 * 24);
+// var hours = num_seconds / (60 * 60);
+// num_seconds -= hours * (60 * 60);
+// var minutes = num_seconds / 60;
+// return days+':'+hours+':'+minutes
+}
+// testTable() {
+//   const that = this;
+//   console.log("inside function");
+//   $(document).ready(function() {
+//      that.tabelObj = $('#deviceTable').DataTable({
+//           "processing": true,
+//           "searching": true, 
+//           pagingType: 'full_numbers',
+//           pageLength: 25,
+//           serverSide: false,
+//           "scrollY":'65vh',  
+//           "scrollCollapse": true,     
+//           lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+//           ajax: (dataTablesParameters,callback) => {
+//             console.log('temptemptemptemptemp',dataTablesParameters);
+//               var deviceID;
+//               that.Load = true;
+             
+         
+//               var from_date = that.Fromdate;
+//               var to_date = that.todate;
+//               var user = that.useridd;
+//               var temp = {
+//               from_date : from_date,
+//               to_date : to_date,
+//               user : user
+//               }
+//               var suburl = "";
+//               suburl += "/notifs/workingReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+//               if(that.deviceArr.length != 0){  
+//                 suburl +='&device='+that.deviceArr;
+//               }
+  
+//               if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+//                 that.contactService.get(suburl).subscribe(resp => {   
+//                   // console.log(ignReport.length);  
+//                   console.log('resp',resp);
+
+//                   // var result = Object.keys(resp).map((key) => [key, resp[key]]);
+//                   // that.totalWorkingHour(resp);
+//                   var wrReport = [];
+//                   for(var r in resp){
+//                         // console.log('foreach',resp[r]);
+//                         var tempObj = {
+//                           'vehName' : r,
+//                           'ON-OFF_time': resp[r]['ON-OFF_time'],
+//                           'OFF-ON_time' :resp[r]['OFF-ON_time'],
+//                           'Imei' :resp[r]['deviceId']
+//                         }
+//                         wrReport.push(tempObj);
+//                   }
+//                   // console.log('result',wrReport);
+//                   that.Load = false;
+//                   callback({data : wrReport });
+//               }, err => {   
+//                 that.Load= false;    
+//                 console.log("error",err) ; 
+//                 var tt = [];  
+//                 callback({data : tt });  
+//               });
+  
+//               }else{
+//                 let ta = [];
+//                 that.Load = false;
+//                 callback({data : ta });
+//               }
+                      
+//         },  
+//         "rowCallback": function(row: Node, data: any | Object, index: number){  
+//           $('#getDetail', row).bind('click', () => {         
+//             console.log("Row Data",data);
+//                 data['fromDate'] = that.Fromdate;
+//                 data['toDate'] = that.todate
+
+
+//             let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+//               width: '548px',
+//               data: { device :data}
+//             });
+          
+//             dialogRef.afterClosed().subscribe(result => {
+//               console.log(result);
+//               if(result == 'close'){
+//                     console.log(close);
+//               }
+//             })  
+               
+//             });
+//           }, 
+      
+//           "columns": [
+//           //   {
+//           //     "data": "deviceId",
+//           //     "visible": false,
+//           //     render: function(data, type, row) {
+              
+//           //       return data ? data : "";  
+            
+//           //     }
+//           // },
+//               {
+//                   "data": "vehName",
+//                   "visible": true,
+//                   "render": function(data, type, row) {
+                      
+//                     return data?data : '';                  
+//                   }
+//               },
+//               {
+//                 "data": "Imei",
+//                 "visible": true,
+//                 "render": function(data, type, row) {
+                    
+//                   return data?data : '';                  
+//                 }
+//             },
+     
+//               {
+//                   "data": "ON-OFF_time",
+//                   "visible": true,
+//                   render: function(data, type, row) {
+//                     // console.log(row);
+//                     // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+//                     return data ? that.millisecondConversion(data) : 0.0; 
+//                   }
+//               },
+//               { 
+//                 "data": "OFF-ON_time",
+//                 "visible": true,
+//                 render: function(data, type, row) {
+//                   return data ? that.millisecondConversion(data) : 0.0; 
+//                 }
+//             },
+//             {
+//               "data": "_id",
+//               "visible": true,
+//               render: function(data, type, row) {
+//                 return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+//               }
+//           }
+        
+          
+     
+//           ],  
+
+//       });
+      
+
+//   });
+
+// }
+
+
+millisecondConversion(duration){
+ 
+    // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+    // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    // hours = (hours < 10) ? 0 + hours : hours;
+    // minutes = (minutes < 10) ? 0 + minutes : minutes;
+  
+    // return hours + ":" + minutes ;
+  
+
+    var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+    var mainMIn = (hours>=24)?0:mins;
+return  hours + ":" + mainMIn 
+}
+}
+
+
diff --git a/src/app/device.ts b/src/app/device.ts
new file mode 100644
index 0000000..e84d8a4
--- /dev/null
+++ b/src/app/device.ts
@@ -0,0 +1,13 @@
+export class Device{
+    _id?: string;
+    devicename: string;
+    deviceid: string;
+    des: string;
+    model: string;
+    Des: string;
+    hrdwr: string;
+    typedev: string;
+    sim_number:string;
+    drname:string;
+    user:any;
+}
diff --git a/src/app/device/cert-option/cert-option.component.html b/src/app/device/cert-option/cert-option.component.html
new file mode 100644
index 0000000..36537d5
--- /dev/null
+++ b/src/app/device/cert-option/cert-option.component.html
@@ -0,0 +1,20 @@
+<div class="container">
+  <div class="row">
+    <div class="col-12">
+        <p style="text-align: center; font-weight: 600; font-size: 25px;">{{'Certificate type' | translate}}</p>
+        <p style="font-size: 18px;">{{'Please select type of certificate you want to view and download.' | translate}}</p>
+    </div>  
+  </div>
+  <div class="row">
+    <div class="col-12">
+        <div class="12" style="text-align: center; width: 100%; margin: 20px auto 30px auto">
+            <button style="background-color: #484848;color:#fdfdfd;margin-right: 10px" class="btn btn-primary w3-button/" md-raised-button
+              (click)="basic()">{{'BASIC PDF' | translate}}</button>
+            <button id="cmd" style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/"
+              md-raised-button (click)="advance()">{{'ADVANCE PDF' | translate}}</button>
+          </div>
+
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/device/cert-option/cert-option.component.scss b/src/app/device/cert-option/cert-option.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device/cert-option/cert-option.component.spec.ts b/src/app/device/cert-option/cert-option.component.spec.ts
new file mode 100644
index 0000000..0c8f298
--- /dev/null
+++ b/src/app/device/cert-option/cert-option.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CertOptionComponent } from './cert-option.component';
+
+describe('CertOptionComponent', () => {
+  let component: CertOptionComponent;
+  let fixture: ComponentFixture<CertOptionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CertOptionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CertOptionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device/cert-option/cert-option.component.ts b/src/app/device/cert-option/cert-option.component.ts
new file mode 100644
index 0000000..595e216
--- /dev/null
+++ b/src/app/device/cert-option/cert-option.component.ts
@@ -0,0 +1,29 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA, MdDialog } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-cert-option',
+  templateUrl: './cert-option.component.html',
+  styleUrls: ['./cert-option.component.scss']
+})
+export class CertOptionComponent implements OnInit {
+  dataobject: any;
+
+  constructor(public dialogRef: MdDialogRef<CertOptionComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,public dialog: MdDialog,private contactService: ContactService) {
+      console.log(data);
+      this.dataobject = data;
+     }
+  ngOnInit() {
+  }
+  
+  basic(){
+    this.dialogRef.close('basic');
+  }
+
+  advance(){
+    this.dialogRef.close('advance');
+ 
+  }
+}
diff --git a/src/app/device/device.component.html b/src/app/device/device.component.html
new file mode 100644
index 0000000..0b2ef40
--- /dev/null
+++ b/src/app/device/device.component.html
@@ -0,0 +1,143 @@
+
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+<div id="toast"> <div id="desc">{{data_descip}}</div></div>
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'DEVICES MASTER' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:82vh;overflow: auto;">
+            <table  id="deviceTable" class="table table-striped table-hover" style="font-size: 12px;">         
+            <thead style="background-color:#e0e0e0;color: #444444;">
+              <tr>
+                <th style="text-align:center;white-space: nowrap;">{{'Device Name' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Device ID' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Status' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'User' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Dealer' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Phone' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Created On' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Expire On' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Icon Type' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Fuel Voltage (mv)' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'SIM Number' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Today ODO' | translate}}</th>
+                <th style="text-align:center;white-space: nowrap;">{{'Total ODO' | translate}}</th>       
+                <th style="text-align:center;white-space: nowrap;">{{'Email' | translate}}</th>           
+                <th  style="text-align:center;white-space: nowrap;">{{'Edit' | translate}}</th>           
+                <th  style="text-align:center;white-space: nowrap;">{{'Delete Permanently' | translate}}</th>   
+                <th  style="text-align:center;white-space: nowrap;">{{'Restore' | translate}}</th>    
+                <th  style="text-align:center;white-space: nowrap;">{{'Delete' | translate}}</th>         
+                <th style="text-align:center;white-space: nowrap;">{{'Certificates' | translate}}</th>       
+                <th style="text-align:center;white-space: nowrap;">{{'Reset ODO' | translate}}</th>     
+                <th style="text-align:center;white-space: nowrap;">{{'Delete History' | translate}}</th>    
+                <th style="text-align:center;white-space: nowrap;">{{'Recalculate ODO' | translate}}</th>        
+                <th style="text-align:center;white-space: nowrap;" title="Clear System logs">{{'CLear Logs' | translate}}</th>                  
+                <th style="text-align:center;white-space: nowrap;">{{'Last Ping On' | translate}}</th>
+              </tr>
+            </thead> 
+          </table>      
+         </div>  
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <p class="headStyle">{{'DEVICES MASTER' | translate}}</p>  
+  <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-4" style="text-align: center;"> 
+          <md-input-container>
+          <input mdInput placeholder="{{'Search by Device ID' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+          #state="ngModel" [(ngModel)]="deviceName"
+          (ngModelChange)="filterDevices(deviceName)">
+         <md-autocomplete #tdAuto="mdAutocomplete">
+            <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" (click)="getExactValue(device)">
+              <span>{{device.viewValue}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+        <md-input-container>
+          <input mdInput placeholder="{{'Search by Sim Number' | translate}}" [mdAutocomplete]="tdAutosim" name="state" 
+          #state="ngModel" [(ngModel)]="simnumber"
+          (ngModelChange)="filterDevicesbysimnumber(simnumber)">
+         <md-autocomplete #tdAutosim="mdAutocomplete">
+            <md-option *ngFor="let sim of simNumberSelect" [value]="sim.sim_Number" (click)="getSIMValue(sim)">
+              <span>{{sim.sim_Number}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+      
+      </div>
+      <div class="col-md-2" style="padding-left: 0;">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-4" style="padding-top:17px;text-align: center;">
+        <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+            <md-slide-toggle md-tooltip="Deleted Devices" [(ngModel)]="deletedDevices" (change)="onChange($event)"></md-slide-toggle> 
+          <button style="background-color:#484848;color:#fdfdfd;width: 120px;margin-left: 20px;" md-raised-button (click)="callfunction()">{{'FIND' | translate}}</button> 
+           <a id="download" href="{{XLurl}}"  download style="text-decoration:none;" > 
+          <button style="background-color: #60ab1c;color:#fdfdfd;width: 135px;margin-left: 15px;" md-raised-button (click)="excelExport()">{{'EXPORT EXCEL' | translate}}</button>  
+            </a>        
+        </div>
+    </div>
+  </div>
+        <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+      
+  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device Name' | translate}}</th>
+            <th style="text-align:center;">{{'Device ID' | translate}}</th>
+            <th style="text-align:center;">{{'Status' | translate}}</th>
+            <th style="text-align:center;">{{'User' | translate}}</th>
+            <th style="text-align:center;">{{'Dealer' | translate}}</th>
+            <th style="text-align:center;">{{'Phone' | translate}}</th>
+            <th style="text-align:center;">{{'Created On' | translate}}</th>
+            <th style="text-align:center;">{{'Expire On' | translate}}</th>
+            <th style="text-align:center;">{{'Icon Type' | translate}}</th>
+            <th style="text-align:center;">{{'Fuel Voltage (mv)' | translate}}</th>
+            <th style="text-align:center;">{{'SIM Number' | translate}}</th>
+            <th style="text-align:center;">{{'Today ODO' | translate}}</th>
+            <th style="text-align:center;">{{'Total ODO' | translate}}</th>       
+            <th style="text-align:center;">{{'Email' | translate}}</th>           
+            <th  style="text-align:center;">{{'Edit' | translate}}</th>           
+            <th  style="text-align:center;">{{'Delete Permanently' | translate}}</th>   
+            <th  style="text-align:center;">{{'Restore' | translate}}</th>    
+            <th  style="text-align:center;">{{'Delete' | translate}}</th>         
+            <th style="text-align:center;">{{'Certificates' | translate}}</th>       
+            <th style="text-align:center;">{{'Reset ODO' | translate}}</th>     
+            <th style="text-align:center;">{{'Delete History' | translate}}</th>    
+            <th style="text-align:center;">{{'Recalculate ODO' | translate}}</th>        
+            <th style="text-align:center;" title="Clear System logs">{{'CLear Logs' | translate}}</th>                  
+        </tr>
+    </thead>  
+</table>
+</div>
+ -->
diff --git a/src/app/device/device.component.scss b/src/app/device/device.component.scss
new file mode 100644
index 0000000..571a2ba
--- /dev/null
+++ b/src/app/device/device.component.scss
@@ -0,0 +1,90 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 250px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/device/device.component.spec.ts b/src/app/device/device.component.spec.ts
new file mode 100644
index 0000000..4229bbb
--- /dev/null
+++ b/src/app/device/device.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceComponent } from './device.component';
+
+describe('DeviceComponent', () => {
+  let component: DeviceComponent;
+  let fixture: ComponentFixture<DeviceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device/device.component.ts b/src/app/device/device.component.ts
new file mode 100644
index 0000000..1bf1b0e
--- /dev/null
+++ b/src/app/device/device.component.ts
@@ -0,0 +1,1040 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from './../contact.service';
+import { environment } from '../../environments/environment'
+declare var $: any, DataTable: any, swal: any;
+import * as moment from 'moment';
+// declare var jspdf: any;
+// import jsPDF from 'jspdf';
+//  const jsPDF = require('jspdf');
+
+import { MdDialog } from '@angular/material';
+
+import { EditDeviceMasterComponent } from './edit-device-master/edit-device-master.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { saveAs } from 'file-saver';
+import { NormalCertComponent } from './normal-cert/normal-cert.component';
+import { CertOptionComponent } from './cert-option/cert-option.component';
+declare var jsPDF: any;
+declare var autoTable: any;
+@Component({
+    selector: 'app-device',
+    templateUrl: './device.component.html',
+    styleUrls: ['./device.component.scss']
+})
+export class DeviceComponent implements OnInit {
+    option: any;
+    Fromdate = new Date();
+    todate = new Date();
+    emailid: any;
+    
+    useridd: any;
+    tabelObj: any;
+    errorStatus: string;
+    serviceResponse: boolean;
+    identifier:String='deviceMaster';
+    supAdmin: any;
+    supadm: any;
+    Load: boolean;
+    XLurl: any;
+    tempObj: any;
+    isDealer: any;
+    dlrID: any;
+    selectedDevice: any;
+    selectedDeviceWithSIM: any;
+    dev_url = environment.hostUrl;
+    Message: string;
+    data_descip: string;
+    constructor(public contactService: ContactService, public dialog: MdDialog, private _flashMessagesService: FlashMessagesService) {
+        this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+        this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+        this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+        this.isDealer = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isDealer;
+        console.log(JSON.parse(window.atob(window.localStorage.token.split('.')[1])));
+        console.log(this.supadm, this.isDealer);
+
+
+        if (this.isDealer == true) {
+            this.dlrID = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._id
+        }
+        //    this.supAdmin = JSON.parse(window.atob(window.localStorage.superAdminToken.split('.')));
+        //    console.log(this.supAdmin);
+        // console.log(this.emailid);
+        // console.log(this.useridd);
+    }
+    deletedDevices: boolean = false;
+    showDeleted: boolean = false;
+    delFlag: boolean = false;
+    ngOnInit() {
+        this.Fromdate.setHours(0, 0, 0);
+        this.testTable();
+        // this.getAllDevice();
+    }
+    callfunction(): void {
+        this.tabelObj.draw();
+    }
+
+ 
+    testTable() {
+        const that = this;
+        $(document).ready(function () {
+            that.tabelObj = $('#deviceTable').DataTable({
+                serverSide: true,
+                "processing": true,
+                "searching": false,
+                // "scrollX": true,
+                
+                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+                ajax: (dataTablesParameters: any, callback) => {
+                    dataTablesParameters.op = {};
+                    dataTablesParameters.select = [];
+                    dataTablesParameters.find = {};
+                    dataTablesParameters.columns = [
+                        { data: "_id" },
+                        { data: "Device_Name" },
+                        { data: "user.first_name" },
+                        { data: "user.last_name" },
+                        { data: "user.address" },
+                        { data: "expiration_date" },
+                        { data: "Device_ID" },
+                        { data: "contact_number" },
+                        { data: "sim_number" },
+                        { data: "created_on" },
+                        {data : "deletedDevice"},
+                        { data: "iconType" },
+                        { data: "currentFuelVoltage" },
+                        { data: "today_odo" },
+                        { data: "total_odo" },
+                        { data: "expiration_date" },
+                        { data: "supAdmin" },
+                        { data: "supAdmin.email" },
+                        { data: "numberOfSOS" },
+                        { data: "isDealer" },
+                        { data: "Dealer.first_name" },
+                        { data: "Dealer.last_name" },
+                        { data: "Dealer.address" },
+                        { data: "Dealer.phone" },
+                        { data: "Email_ID" },
+                        { data: "last_loc" },
+                        { data: "engineNo" },
+                        { data: "CID_No" },
+                        { data: "status" },
+                        { data: "device_model.device_type" },
+                        { data: "device_model.Manufacturer" },
+                        { data: "typeOfVehicle" },
+                        { data: "manufacturingCompany" },
+                        { data: "vehicleRegDate" },
+                        { data: "vehicleManufacturingDate" },
+                        { data: "lastFitnessDate" },
+                        { data: "fitmentDate" },
+                        { data: "ICCICD" },
+                        { data: "IMSI" },
+                        { data: "uniqueID" },
+                        { data: "vehicleType.description" },
+                        { data: "invoiceNumber" },
+                        { data: "invoiceDate" },
+                        { data: "companyName" },
+                        { data: "companyAddress" },
+                        { data: "transportOfficeCity" },
+                        { data: "transportOfficeState" },
+                        {data:"deviceImage"},
+                        { data: "ChassisNo" },
+                        {data:"last_device_time"},
+                        {data:"last_ping_on"},
+                        { data: null, defaultContent: '' }
+                    ]
+
+                    //  dataTablesParameters.find.supAdmin = that.useridd; last_device_time,last_ping_on
+                           console.log("this.deviceObjIdthis.deviceObjId",that.deviceObjId);
+                          
+                        if(that.deviceObjId != undefined){
+                            if(that.deviceObjId.type =='IMEI'){
+                                dataTablesParameters.find['_id'] = that.deviceObjId.did;
+                            }
+                            if(that.deviceObjId.type =='SIM'){
+                                dataTablesParameters.find['sim_number'] = that.deviceObjId.did;
+                            }
+
+                        }
+                    if (that.Fromdate) {
+                        var fdate = new Date(that.Fromdate).toISOString()
+                        dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+                        dataTablesParameters.find['created_on']['$gte'] = fdate
+                    };
+                    // }
+                    if (that.todate) {
+                        var tdate = new Date(that.todate).toISOString()
+                        dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+                        dataTablesParameters.find['created_on']['$lte'] = tdate;
+                    }
+                        console.log('that.showDeleted',that.showDeleted);
+                    if (that.showDeleted === true) {
+                        dataTablesParameters.find.deletedDevice = { $exists: true };
+                        that.delFlag = true;
+                        console.log("called");
+
+
+                    } else {
+                        dataTablesParameters.find.deletedDevice = { $exists: false };
+                        that.delFlag = false;
+                        console.log("called");
+                    }
+
+                    if (that.supadm == true) {
+                        dataTablesParameters.find.supAdmin = that.useridd;
+
+                    }
+
+                    if (that.isDealer == true) {
+                        dataTablesParameters.find.Dealer = that.dlrID;
+                    }
+
+
+                    var suburl = "";
+                    suburl += "/devices/datatable";
+                    // console.log(suburl);
+                    // console.log(dataTablesParameters);
+                    // console.log(suburl)
+                    that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                        console.log("Response from datatable=>", resp);
+                        that.colSwitch();
+                        callback(resp);
+                    }, err => {
+                        // console.log(err);
+                        // console.log(err.status);
+                    });
+                },
+                "rowCallback": function (row: Node, data: any | Object, index: number) {
+
+                    $('#edit', row).bind('click', () => {
+                        // console.log("Edit Method",data);
+                        // $('#edit').css("visibility","hidden");
+
+                        let dialogRef = that.dialog.open(EditDeviceMasterComponent, {
+                            width: '650px',
+                            height: '700px',
+                            data: { "deviceInfo": data }
+                        });
+                        data.actionId = "edit";
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;
+                        dialogRef.afterClosed().subscribe(result => {
+                            // console.log(result);
+                            if (result == "success") {
+                                that.toast('device_edited');
+                                that.callfunction();
+                            }
+                        })
+                    });
+
+                    $('#delete', row).bind('click', () => {
+                        // console.log("delete Method", data);
+                        var did = data.Device_ID;
+                        var req={
+                      device:data.Device_ID,
+                      userId:that.useridd
+                    }
+                        // console.log(did);
+                        that.contactService.deldev(req)
+                            .subscribe(res => {
+                                // console.log(res);
+                          
+                                that.Fromdate = new Date();
+                                that.Fromdate.setHours(0, 0, 0);
+                                that.todate = new Date();
+                                that.todate;
+
+                                that.callfunction();
+                                that.toast('device_deleted');
+                            }, err => {
+                                that.toast('error_while_deleting');
+                                // console.log(err);
+                            })
+                    });
+                    $('#exportPDF', row).bind('click', () => {
+
+
+                        data.actionId = "exportPdf";
+
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+                        //   data.Dealer_name = JSON.parse(JSON.stringify(data))
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;data.deviceImage=data.deviceImage
+
+                        let dialogRef = that.dialog.open(CertOptionComponent, {
+                            data: { "deviceInfo": data }
+                        });
+
+
+                        dialogRef.afterClosed().subscribe(result => {
+                            // console.log(result);
+
+                            if (result == "advance") {
+                                let dialogRef_1 = that.dialog.open(EditDeviceMasterComponent, {
+                                    data: { "deviceInfo": data },
+                                    width: '650px',
+                                    height: '700px',
+                                });
+                            }
+
+                            if (result == "basic") {
+                                let dialogRef_2 = that.dialog.open(NormalCertComponent, {
+                                    data: { "deviceInfo": data }
+                                });
+                            }
+                        })
+
+                    });
+                    $('#restoreDevice', row).bind('click', () => {
+                        console.log('deviceRestore', data);
+                        that.contactService.restoreDevice(data.Device_ID).subscribe(res => {
+                      
+                            that.callfunction();
+                            that.toast('device_restored');
+                        }, err => {
+                            that.toast('error_while_restoring');
+                        })
+                    });
+                    $('#reset_odo', row).bind('click', () => {
+                        console.log(data);
+                        swal({
+                            title: '<strong>RESET ODO</strong>',
+                            icon: 'info',
+                            html: 'Please confirm to reset Vehicle ODO ?',
+                            showCloseButton: true,
+                            showCancelButton: true,
+                            focusConfirm: false,
+                            confirmButtonText: 'Reset today ODO',
+                            confirmButtonAriaLabel: 'Thumbs up, great!',
+                            cancelButtonText: 'Reset total ODO',
+                            cancelButtonAriaLabel: 'Thumbs down'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                if (that.supadm === true) {
+                                    var reset_by = data.supAdmin;
+                                } else {
+                                    var reset_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+
+                                let reset_payload = {
+                                    device_id: data._id,
+                                    odo_reset_by: reset_by,
+                                    reset_identifier: true
+                                }
+                                console.log(reset_payload);
+                                that.contactService.resetODO(reset_payload).subscribe(res => {
+                                    console.log(res);
+                                    that.callfunction();
+                                    that.data_descip = "Today ODO has been Reset";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+                            }
+                        }, function (dissmiss) {
+
+                            if (dissmiss === 'cancel') {
+                                if (that.supadm === true) {
+                                    var reset_by = data.supAdmin;
+                                } else {
+                                    var reset_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+                                let reset_payload = {
+                                    device_id: data._id,
+                                    odo_reset_by: reset_by,
+                                    reset_identifier: false
+                                }
+
+                                that.contactService.resetODO(reset_payload).subscribe(res => {
+                                    that.callfunction()
+                                    that.data_descip = "Total ODO has been Reset";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+
+                            }
+                        });
+                    });
+                    $('#delete_gps_data', row).bind('click', () => {
+                        console.log(data);
+                        swal({
+                            title: '<strong>Delete History</strong>',
+                            icon: 'info',
+                            html: 'Please confirm to Delete History ?',
+                            showCloseButton: true,
+                            showCancelButton: true,
+                            focusConfirm: false,
+                            confirmButtonText: "Delete today's History",
+                            confirmButtonAriaLabel: 'Thumbs up, great!',
+                           
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                if (that.supadm === true) {
+                                    var deleted_by = data.supAdmin;
+                                } else {
+                                    var deleted_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                                }
+
+                                let reset_payload = {
+                                    device_id: data.Device_ID,
+                                    history_delete_by: deleted_by,
+                                    delete_identifier: 'today'
+                                }
+                             
+                                that.contactService.delete_gps_data(reset_payload).subscribe(res => {
+                                    console.log(res);
+                                    that.callfunction();
+                                    that.data_descip = "Device History has been deleted";
+                                    launch_toast()
+                                    function launch_toast() {
+                                        // console.log(divid);
+                                        var x = document.getElementById("toast")
+                                        //console.log(x);
+                                        x.className = "show";
+                                        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                                    }
+
+                                })
+                            }
+                        }
+                        // , function (dissmiss) {
+
+                        //     if (dissmiss === 'cancel') {
+                        //         if (that.supadm === true) {
+                        //             var deleted_by = data.supAdmin;
+                        //         } else {
+                        //             var deleted_by = data.Dealer ? data.Dealer._id : data.supAdmin
+                        //         }
+
+                        //         let reset_payload = {
+                        //             device_id: data.Device_ID,
+                        //             history_delete_by: deleted_by,
+                        //             delete_identifier: 'all'
+                        //         }
+
+                        //         that.contactService.delete_gps_data(reset_payload).subscribe(res => {
+                        //             that.callfunction()
+                        //             that.data_descip = "Device history has been deleted";
+                        //             launch_toast()
+                        //             function launch_toast() {
+                        //                 // console.log(divid);
+                        //                 var x = document.getElementById("toast")
+                        //                 //console.log(x);
+                        //                 x.className = "show";
+                        //                 setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+                        //             }
+
+                        //         })
+
+                        //     }
+                        // }
+                        );
+                    });
+                    $('#pdelete', row).bind('click', () => {
+                        console.log('permanent delete clicked=>', data);
+
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "You won't be able to revert this!",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Yes, delete it!'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.deletePermanently(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Deleted',
+                                        'Device Deleted',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    }) ; 
+                    $('#recalculateODO', row).bind('click', () => {
+                       
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "Vahicle ODO will be recalculated",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Recalculate'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.recalculateODO(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Reset',
+                                        'Vehicle ODO has been reset',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    });
+                    $('#clearLogs', row).bind('click', () => {
+                       
+                        // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+                        swal({
+                            title: 'Are you sure?',
+                            text: "System Logs will be deleted",
+                            type: 'warning',
+                            showCancelButton: true,
+                            confirmButtonColor: '#3085d6',
+                            cancelButtonColor: '#d33',
+                            confirmButtonText: 'Clear'
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                                that.contactService.deleteSystemLogs(data.Device_ID).subscribe(res => {
+                                    that.callfunction();
+                                    swal(
+                                        'Deleted',
+                                        'System Logs has been deleted',
+                                        'success'
+                                    )
+                                })
+                            }
+                        });
+                    })
+                },
+                "columns": [
+                    {
+                        "data": "Device_Name",
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "Device_ID",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "status",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "user",
+                        render: function (data, type, row) {
+                            return data ? (data.first_name + " " + data.last_name) : "";
+                        }
+                    },
+                    {
+                        "data": "Dealer",
+                        render: function (data, type, row) {
+                            return data ? (data.first_name + " " + data.last_name) : "";
+                        }
+                    },
+                    {
+                        "data": "contact_number",
+                        render: function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "created_on",
+                        "render": function (data, type, row) {
+                            var created_time = new Date(data);
+                            return data ? (moment(created_time).format('dddd,ll,LTS')) : "";
+                        }
+                    },
+                    {
+                        "data": "expiration_date",
+                        "render": function (data, type, row) {
+                            var expired_time = new Date(data);
+                            return data ? (moment(expired_time).format('dddd,ll,LTS')) : "";
+                        }
+                    },
+                    
+                    {
+                        "data": "iconType",
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "currentFuelVoltage",
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": "sim_number",
+                        "render": function (data, type, row) {
+                            return data ? data : ""
+                        }
+                    },
+                    {
+                        "data": "today_odo",
+                        "render": function (data, type, row) {
+                            return data ? (parseFloat(data).toFixed(2)) : 0;
+                        }
+                    },
+                    {
+                        "data": "total_odo",
+                        "render": function (data, type, row) {
+                            return data ? (parseFloat(data).toFixed(2)) : 0;
+                        }
+                    },
+                    {
+                        "data": "Email_ID",
+                        "visible": false,
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        "data": null,
+
+                        "render": function (data, type, row) {
+                            return '<button id="edit" type="button" class="btn btn-primary" style="background:blue;border:0px;">Edit</button>'
+
+                        }
+                    },
+                    {
+                        "data": null,
+
+                        "render": function (data, type, row) {
+                            return '<button id="pdelete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete permanently</button>'
+
+                        }
+                    },
+
+
+                    {
+                        "data": null,
+
+                        "render": function (data, type, row) {
+                            return '<button id="restoreDevice" type="button" class="btn btn-primary" style="background:#60ab1c;border:0px;">Restore</button>'
+                        }
+                    },
+                    {
+                        "data": null,
+
+                        "render": function (data, type, row) {
+                            return '<button id="delete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete</button>'
+
+                        }
+                    },
+                    {
+                        "data": null,
+
+                        "render": function (data, type, row) {
+                            return '<button id="exportPDF" type="button" class="btn btn-primary"  style="background:#118a57;border:0px;">Export Pdf</button>'
+                        }
+                    },
+                    {
+                        "data": null,
+                        "render": function (data, type, row) {
+                            // return '<button id="reset_ODO" type="button" class="btn btn-primary"  style="background:#118a57;border:0px;">Export Pdf</button>'   
+                            // '<img id="Reset odo" src="smiley.gif" alt="Reset ODO" title="Reset ODO" height="42" width="42">'
+                            return '<i id="reset_odo" class="material-icons" title="Reset ODO" style="cursor:pointer"> cached </i>'
+                        }
+                    }
+                    ,
+                    {
+                        "data": null,
+                        "render": function (data, type, row) {  
+                            return '<i id="delete_gps_data" class="material-icons" title="Delete History Data" style="cursor:pointer;color:red"> delete_outline </i>'
+                        }
+                    },
+                    {
+                        "data": null,
+                        "render": function (data, type, row) {  
+                            return '<i id="recalculateODO" class="material-icons" title="Recalculate Vehicle ODO" style="cursor:pointer;color:blue"> settings_backup_restore </i>'
+                        }   
+                    },
+                    {
+                        "data": null,
+                        "render": function (data, type, row) {  
+                            return '<i id="clearLogs" class="fas fa-warehouse" title="Clear System logs" style="cursor:pointer;color:blue">  </i>'
+                        
+                        }
+                    },
+                    {
+                        "data": "last_ping_on",
+                        "render": function (data, type, row) {
+                            var expired_time = new Date(data);
+                            return data ? (moment(expired_time).format('dddd,ll,LTS')) : "";
+                        }
+                    },
+
+
+                ],
+
+                // columnDefs: [
+
+                // ],
+
+            });
+         
+            that.colSwitch()
+
+        });
+
+    }
+
+
+    // table edit function
+
+    // editor:any;
+    // editDataTable(){
+    //   $(document).ready(function() {
+    //     console.log("Edit function Call!!");
+    //     var outerthis= this;
+    //     outerthis.editor = new $.fn.DataTable.Editor({
+    //         ajax: "",
+    //         table: "#deviceTable",
+    //         fields: [ {
+    //                 label: "Device Name:",
+    //                 name: "Device_Name"
+    //             }, {
+    //                 label: "Device ID:",
+    //                 name: "Device_ID"
+    //             }, {
+    //                 label: "User:",
+    //                 name: "user"
+    //             }, {
+    //                 label: "Phone:",
+    //                 name: "contact_number"
+    //             }, {
+    //                 label: "created_on:",
+    //                 name: "extn"
+    //             }, {
+    //                 label: "expiration_date:",
+    //                 name: "start_date",
+    //                 type: "datetime"
+    //             }, {
+    //                 label: "iconType:",
+    //                 name: "iconType"
+    //             }
+    //         ]
+    //     } );
+    //   })
+    // }
+
+    // editDocumentTableActivate(){
+    //   console.log("function Call!!");
+    //   var outerthis= this;
+    //   $('#deviceTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
+    //     outerthis.editor.inline( this );
+    // } );
+    // }
+
+
+    deviceObj = [];
+    // getAllDevice() {
+
+    //     var dealer: any;
+    //     // this.Load = true;
+    //     if (this.supadm) {
+    //         var supadmin: any = this.useridd;
+    //     }
+    //     if (this.isDealer) {
+    //         dealer = this.dlrID;
+    //     }
+    //     var searchh;
+    //     this.contactService.alldevices1(this.useridd, this.emailid, supadmin, dealer, searchh)
+    //         .subscribe(res => {
+    //             // this.Load = false;
+    //             console.log("allDevices=>", res);
+    //             this.deviceObj = [];
+    //             var Alldevices = {
+    //                 id: "all",
+    //                 viewValue: "ALL Devices",
+    //                 sim_Number: "ALL Devices"
+    //             }
+    //             this.deviceObj.push(Alldevices);
+
+    //             for (var i = 0; i < res.devices.length; i++) {
+    //                 Alldevices = {
+    //                     id: res.devices[i]._id,
+    //                     viewValue: res.devices[i].Device_ID ? res.devices[i].Device_ID : "",
+    //                     sim_Number: res.devices[i].sim_number ? res.devices[i].sim_number : ""
+    //                 }
+    //                 this.deviceObj.push(Alldevices)
+    //             }
+    //             // console.log("deviceArray", this.deviceObj);
+
+    //         }, err => {
+    //             // this.Load = false;
+    //             // console.log(err.status);
+    //         })
+    // }
+
+
+    deviceSelect: any = [];
+    simNumberSelect: any = [];
+    deviceName: any;
+    simnumber: any;
+    filterDevices(dlr) {
+        console.log("Device", dlr);
+
+        if (dlr == '') {
+            this.deviceSelect = [];
+        } else {
+            const filterdealerValue: any = dlr;
+
+            this.deviceSelect = [];
+            this.deviceSelect = this.deviceObj.filter(function (pp) {
+
+                var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+                return t > -1;
+            });
+            console.log(this.deviceSelect);
+            return this.deviceSelect;
+        }
+
+    }
+
+    getExactValue(dev) {
+        this.selectedDevice = dev;
+        console.log(dev);
+
+    }
+
+    getSIMValue(sim) {
+        console.log("SIM value=>", sim)
+        this.selectedDeviceWithSIM = sim;
+        console.log(sim);
+
+    }
+
+    filterDevicesbysimnumber(simnum) {
+        if (simnum == '') {
+            this.simNumberSelect = [];
+        } else {
+            const filtersimValue: any = simnum;
+            this.simNumberSelect = [];
+            this.simNumberSelect = this.deviceObj.filter(function (pptt) {
+                // debugger;
+                // console.log(pp);
+                var t = pptt.sim_Number.toLocaleLowerCase().indexOf(filtersimValue.toLocaleLowerCase());
+                return t > -1;
+            });
+            return this.simNumberSelect;
+        }
+
+    }
+
+    excelExport() {
+        console.log("inside excel download");
+        var url = this.dev_url;
+        var from = new Date(this.Fromdate);
+        var to = new Date(this.todate);
+
+        this.XLurl = url + '/devices/devReport?user=' + this.useridd + "&fromDate=" + from + "&toDate=" + to
+        console.log(this.XLurl);
+
+        // this.Load = true;
+        // this.contactService.getVehicleExcelSheet(from.toISOString(),to.toISOString(),this.useridd).subscribe(res=>{
+        //     this.Load = false;
+        //     console.log(res);
+        //     this.saveToFileSystem(res)
+
+        // })
+    }
+
+    private saveToFileSystem(response) {
+        console.log(response);
+        console.log("Inside pdf");
+        var blob = new Blob([response._body], { type: "application/xlsx" });
+
+        var filename = "Vehicledata";
+        // console.log(filename);
+        saveAs(blob, filename);
+    }
+
+    pdfExport() {
+        var doc = new jsPDF();
+        var columns = [];
+        var rows = [];
+        // doc.autoTable(columns, rows, {
+        //     margin: {top: 60},
+        // }); 
+
+        doc.fromHTML($('#content').html(), 15, 15, {
+            'width': 170,
+
+        });
+
+        doc.text("Hello world", 1, 6);
+        doc.save('Test.pdf');
+    }
+
+
+
+    colSwitch() {
+        if (this.isDealer == true) {
+            for (var k = 0; k < 18; k++) {
+                if (this.delFlag == false) {
+                    this.tabelObj.column(17).visible(true);
+                    if (((k == 13) || (k == 14) || (k == 15) || (k == 16))) {
+                        this.tabelObj.column(k).visible(false);
+                    }
+                } else {
+                    this.tabelObj.column(15).visible(true);
+                    this.tabelObj.column(16).visible(true);
+                    if ((k == 13) || (k == 14) || (k == 17)) {
+                        this.tabelObj.column(k).visible(false);
+                    }
+                }
+
+
+            }
+        }
+
+        if (this.supadm == true) {
+            console.log("Inside function");
+            for (var k = 0; k <= 18; k++) {
+                if (this.delFlag == true) {
+                    // if(((k ==13) || (k==14))){
+                    //     this.tabelObj.column( k ).visible( false );
+                    //     this.tabelObj.column(k + 1).visible(true);
+                    //     this.tabelObj.column(k + 2).visible(true);
+                    // }
+
+                    if (((k == 15) || (k == 16) || (k == 17))) {
+                        this.tabelObj.column(k).visible(true);
+                    }
+                    if (((k == 18) || (k == 17))) {
+                        this.tabelObj.column(k).visible(false);
+                    }
+
+                } else {
+                    this.tabelObj.column(14).visible(true);
+                    this.tabelObj.column(13).visible(true);
+                    this.tabelObj.column(17).visible(true);
+                    this.tabelObj.column(18).visible(true);
+
+                    if ((k == 15) || (k == 16)) {
+                        this.tabelObj.column(k).visible(false);
+                    }
+                }
+            }
+        }
+    }
+
+    tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+deviceObjId:any;
+getReport(event){
+  
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    console.log('this.showDeleted',event.deletedDevice);
+    if(event.deletedDevice != undefined){
+        this.showDeleted = event.deletedDevice ; 
+       
+    }
+  
+    if(event.deviceId != undefined){
+        this.deviceObjId = {"did" : event.deviceId[0],"type":event.type}   ;
+        console.log('this.deviceObjId',this.deviceObjId);
+
+    }
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+   
+  }
+ 
+}
+
+toast(divid){
+   
+    if(divid == "device_restored"){
+      this.data_descip = "Device succesfully restored";
+      launch_toast();
+    }else if(divid == "error_while_restoring"){
+      
+      this.data_descip = "Error Occured while restoring";
+      launch_toast();
+    }
+    else if(divid == "device_deleted"){
+      this.data_descip = "Device Deleted Succesfully";
+      launch_toast();
+    }
+    else if(divid == "error_while_deleting"){
+      this.data_descip = "Error Occured while deleting";
+      launch_toast();
+    }
+    else if(divid == "device_edited"){
+      this.data_descip = "Information updated successfully";
+      launch_toast();
+    }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+     }
+
+}
diff --git a/src/app/device/edit-device-master/edit-device-master.component.html b/src/app/device/edit-device-master/edit-device-master.component.html
new file mode 100644
index 0000000..7505a9d
--- /dev/null
+++ b/src/app/device/edit-device-master/edit-device-master.component.html
@@ -0,0 +1,331 @@
+<div *ngIf="editTemplate">
+<h1 style="text-align: center;font-size: 24px;background: #ececec;padding: 11px;">{{'Edit Device' | translate}}</h1>
+<div class="row">
+  <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+    {{'Device Name' | translate}} :
+  </div>
+  <div class="col-sm-8">
+    <md-form-field  class="example-full-width width" style="display: initial;">
+      <input mdInput [(ngModel)]="devName" type="text" name="dname" required>
+      <md-error class="pattern">{{'Enter Device Name' | translate}}</md-error>
+    </md-form-field>
+  </div>
+</div>
+<div class="row">
+    <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+      {{'Phone' | translate}} :
+    </div>
+    <div class="col-sm-8">
+      <md-form-field  class="example-full-width width" style="display: initial;">
+        <input mdInput [(ngModel)]="phNum" type="number" name="dname" required>
+        <md-error class="pattern">{{'Phone' | translate}}</md-error>
+      </md-form-field>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+      {{'Email' | translate}} :
+    </div>
+    <div class="col-sm-8">
+      <md-form-field  class="example-full-width width" style="display: initial;">
+        <input mdInput [(ngModel)]="emailId" type="text" name="email" >
+    
+      </md-form-field>
+    </div>
+  </div>
+  <div class="row" style="padding-bottom: 16px;">
+      <div class="col-sm-4" style="padding-left: 50px">
+        {{'Created On' | translate}} :
+     </div>
+      <div class="col-sm-8">
+          <owl-date-time [(ngModel)]="createdOn" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-4" style="padding-left: 50px">
+          {{'Expired On' | translate}} :
+    </div>
+        <div class="col-sm-8">
+            <owl-date-time [(ngModel)]="expOn" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+      </div>
+      <!-- change below method to get Distributer -->
+      <!-- <div class="row" *ngIf="organisationFlag">
+          <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
+            <span>Distributer:</span>
+          </div>
+          <div class="col-sm-8" style="padding-right: 12%;">
+            <md-input-container style="padding-right: 12%;">
+              <input mdInput placeholder="Search Distributer..." [mdAutocomplete]="tdAuto5" name="state" #state="ngModel" [(ngModel)]="distributerName"
+                (ngModelChange)="filterDistStates(distributer)">
+              <md-autocomplete #tdAuto5="mdAutocomplete">
+                <md-option *ngFor="let distr of distSelect" [value]="distr.dealer_firstname">
+                  <span>{{ distr.dealer_firstname }} {{ distr.dealer_lastname }}</span>
+                </md-option>
+                
+              </md-autocomplete>
+            </md-input-container>
+          </div>
+        </div> -->
+        <div class="row">
+            <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
+              <span>{{'Dealer' | translate}}:</span>
+            </div>
+            <div class="col-sm-8" style="padding-right: 12%;margin-top: 15px;">
+              <!-- <md-input-container style="padding-right: 12%;">
+                <input mdInput placeholder="{{'Search Dealer' | translate}}" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
+                  (ngModelChange)="filterDealerStates(dealerName)">
+                <md-autocomplete #tdAuto2="mdAutocomplete">
+                  <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname">
+                    <span>{{ dealer.dealer_firstname }} {{ dealer.dealer_lastname }}</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container> -->
+              <select id="dbselect" multiple="multiple">
+                <option *ngFor="let option_1 of dealers_info" [value]="option_1.dealer_id" [selected] = "option_1.dealer_id === dealerId">{{ option_1.dealer_firstname  }} {{option_1.dealer_lastname ? option_1.dealer_lastname :''}}</option>
+              </select>
+            </div>
+          </div>
+        <div class="row">
+          <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
+            <span>{{'User' | translate}}:</span>
+          </div>
+          <div class="col-sm-8" style="padding-right: 12%; margin-top: 15px;">
+            <!-- <md-input-container>
+              <input mdInput placeholder="{{'Search' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+              #state="ngModel" [(ngModel)]="userName"
+             (ngModelChange)="filteruserStates(userName)">
+             <md-autocomplete #tdAuto="mdAutocomplete">
+                <md-option *ngFor="let option of userSelect" [value]="option.user_type">
+                  <span>{{ option.user_type }}</span>
+                </md-option>
+              </md-autocomplete>   
+            </md-input-container> -->
+            <select id="dbselect_1" multiple="multiple" >
+              <option *ngFor="let cust of costumers" [value]="cust._id" [selected] = "cust._id === initialUser">{{ cust.first_name }} {{cust.last_name ? cust.last_name : ''}} </option>
+            </select>
+          </div>              
+        </div>
+    
+        <div class="row">
+            <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
+              {{'SIM Number' | translate}} :
+            </div>
+            <div class="col-sm-8">
+              <md-form-field class="example-full-width width" style="display: initial;">
+                <input mdInput [(ngModel)]="simNum" type="number" name="dname" required>
+                <md-error class="pattern">{{'Phone' | translate}}</md-error>
+              </md-form-field>
+            </div>
+          </div>
+          <div class="row">
+              <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
+                Today's ODO :
+              </div>
+              <div class="col-sm-8">
+                <md-form-field class="example-full-width width" style="display: initial;">
+                  <input [(ngModel)]="todayODO" mdInput type="number" name="dname" required>
+                  <md-error class="pattern">{{'Phone' | translate}}</md-error>
+                </md-form-field>
+              </div>
+            </div>
+            <div class="row">
+                <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
+                  {{'Total ODO' | translate}} :
+                </div>
+                <div class="col-sm-8">
+                  <md-form-field class="example-full-width width" style="display: initial;">
+                    <input mdInput [(ngModel)]="totalODO" type="number" name="dname" required>
+                    <md-error class="pattern">{{'Phone' | translate}}</md-error>
+                  </md-form-field>
+                </div>
+              </div>
+<!-- last_ping,device_time -->
+              <div class="row" style="padding-bottom: 16px;">
+                <div class="col-sm-4" style="padding-left: 50px">
+                  {{'Last Ping' | translate}} :
+                </div>
+                <div class="col-sm-8">
+                  <owl-date-time [(ngModel)]="lastPingOn" disabled [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+                  </owl-date-time>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4" style="padding-left: 50px">
+                  {{'Device Time' | translate}} :
+                </div>
+                <div class="col-sm-8">
+                  <owl-date-time [(ngModel)]="lastDeviceTime" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+                  </owl-date-time>
+                </div>
+              </div>
+
+
+              <footer>
+                <div class="row" style="padding-left: 26%;margin-top: 8px;">      
+                      <button (click)="editDetails()" style=" width: 171px;height: 43px;letter-spacing: 5px;margin-right: 6px;" class="btn btn-primary btn-block">{{'Edit' | translate}}</button>
+                      <button (click)="cancelEdit()" style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;">{{'Cancel' | translate}}</button>           
+                </div>
+              </footer>
+             </div>
+
+             <div id='pdf' *ngIf="ExportPdf" style="height: 90vh;">
+                <div>
+                    <button type="button" class="btn btn-primary" style="background: #595454;;border:0px;float: right" (click)="exportAsPdf()">{{'Export Pdf' | translate}}</button>
+                    <!-- <button type="button" class="btn btn-primary" style="background: #595454;;border:0px;float: right" (click)="qrCodeGenerator()">Qrcode</button> -->
+                 </div>            
+              <table id="testPdf" style="font-weight: 600;" >            
+                <tr>   
+                  <td></td>
+                  <td style="text-align: center;font-weight: 700"> 
+                      {{devicetype}} GPS DEVICE<br>
+                      (AIS-140 COMPLIANT)<br>
+                      INSTALLATION/FITMENT CERTIFICATE<br>
+                      {{companyName}}<br>
+                      {{companyAddress}}                           
+                  </td>  
+                  <td style="text-align:center" >  
+                    <div>
+                      <img src="{{imgURL}}" width="150px" height="150px">
+                    </div>                   
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="2">
+                    To,<br>
+                    The Regional Transport Officer,<br>
+                    {{transportOfficeCity}}<br>
+                    {{transportOfficeState}}<br>
+                  </td>
+                  
+                  <td>Fitment Date : {{fitmentDate | date:'dd-MM-yyyy'}}</td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                      <h6 style="font-size:18px;">Vehicle Details :-</h6>
+                  </td>       
+                </tr>          
+                <tr>
+                    <td>
+                     Vehicle no. : {{devName}}<br>
+                     Engine no. :   {{engineNo}}<br>
+                     Chassis no. : {{ChassisNo}}<br>
+                     <!-- Vehicle Model : <br> -->
+                    </td>
+                    <td>
+                      Type of Vehicle : {{typeOfVehicle}}<br>
+                      Manufacturing Company : {{manufacturingCompany}}<br>
+                      Last fitness date : {{lastFitnessDate | date :'dd-MM-yyyy'}}
+                    </td>
+                    <td>
+                      Registration Date : {{vehicleRegDate | date:'dd-MM-yyyy'}}<br>
+                      Date of Manufaturing year : {{vehicleManufacturingDate | date:'dd-MM-yyyy'}}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td colspan="3">
+                        <h6 style="font-size:18px;margin: 20px 0 10px 0px;">Vehicle owner Details : - </h6>
+                    </td>             
+                  </tr>           
+                <tr>
+                  <td>
+                    Owner Name : {{userName}}<br>
+                  </td>
+                  <td>
+                    Owner Address : {{userAddress}}               
+                  </td>
+                  <td>
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">  Dealer Details :- </h6>
+                  </td>
+                </tr>           
+                <tr>
+                    <td>
+                      Dealer Name : {{dealerName}}
+                    </td>
+                    <td>
+                      Dealer Address : {{dealerAddress}}
+                      </td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;"> VTS Details :- </h6>  
+                  </td>         
+                </tr>        
+                <tr>
+                  <td>
+                    VTS Model : {{devicetype}}<br>
+                    Device IMEI : {{devID}}<br>
+                    ICCID No. : {{ICCICD}}
+                  </td>
+                  <td>
+                    Invoice Date : {{InvoiceDate | date:'dd-MM-yyyy'}}<br>
+                  
+                    IMSI : {{IMSI}}<br>
+                    Unique ID : {{uniqueID}}
+                  </td>
+                  <td>
+                    Invoice No. : {{invoiceNum}}<br>
+                    No. of SOS : {{numberOfSOS}} <br>
+                    CID No. :{{CID_No}}<br>
+                    Expiration Date : {{expiration_date | date:'dd-MM-yyyy'}}<br>
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="3">
+                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;"> Vehicle Current Detail :- </h6> 
+                  </td>            
+                </tr>   
+                <tr>
+                  <td>
+                    Timestamp : <br>
+                    Location : <br>
+                  </td>
+                  <td>
+                    Lattitude : {{lattitude}}
+                  </td>
+                  <td>
+                    Longitude : {{longitude}}
+                  </td>                  
+                </tr>
+                <tr>
+                  <td colspan="3">
+                      <h6 style="font-size:18px;margin: 20px 0 10px 0px;">Fitment Images :- </h6>
+                  </td>  
+                  <!-- {{deviceImage |json}} -->
+                  <td style="margin-left: -155px;" *ngIf="deviceImage.length && deviceImage[0]">
+                    <img style="    margin-left: -91px;" src="{{deviceImage[0]}}" width="90px" height="90px">
+                  </td>
+                  <td *ngIf="deviceImage.length && deviceImage[1]"> 
+                    <img src="{{deviceImage[1]}}" width="90px" height="90px">
+                  </td>              
+                    <td *ngIf="deviceImage.length && deviceImage[2]">
+                    <img src="{{deviceImage[2]}}" width="90px" height="90px">
+                    </td>
+                </tr>         
+                <tr>
+                  <td colspan="2">
+                      Authorised Dealer<br>               
+                      (Seal & Sign)
+                  </td>                
+                  <td>
+                      Department of Transport<br>
+                      Checked & Verified<br>
+                      Signature of MVI/RTO<br>
+                  </td>            
+                </tr >   
+                <tr>
+                  <td colspan="3" style="text-align:center;margin-top: 10px">
+                      (PRODUCT SATISFACTION BY VEHICLE OWNER)<br>
+                      1.This is to ackknowledge and confirmed that we have got our vehicle bearing and registration number..<br>
+                      fitted with GPS device (Model No.  {{devicetype}},AIS 140 Compliant) Manufatured by {{deviceManufacturer}})
+                  </td>
+                </tr >   
+            </table>  
+           
+            <div id="editor"></div>
+             </div>
+         
diff --git a/src/app/device/edit-device-master/edit-device-master.component.scss b/src/app/device/edit-device-master/edit-device-master.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/device/edit-device-master/edit-device-master.component.spec.ts b/src/app/device/edit-device-master/edit-device-master.component.spec.ts
new file mode 100644
index 0000000..50b8a6f
--- /dev/null
+++ b/src/app/device/edit-device-master/edit-device-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditDeviceMasterComponent } from './edit-device-master.component';
+
+describe('EditDeviceMasterComponent', () => {
+  let component: EditDeviceMasterComponent;
+  let fixture: ComponentFixture<EditDeviceMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditDeviceMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditDeviceMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device/edit-device-master/edit-device-master.component.ts b/src/app/device/edit-device-master/edit-device-master.component.ts
new file mode 100644
index 0000000..dbc13dc
--- /dev/null
+++ b/src/app/device/edit-device-master/edit-device-master.component.ts
@@ -0,0 +1,634 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { DeviceEditComponent } from '../../dashboard/device-edit/device-edit.component';
+import { ContactService } from '../../contact.service';
+import * as moment from 'moment';
+declare var swal: any;
+declare var jsPDF:any;
+// declare var qrcode:any;
+// declare var QRCode :any;
+declare var QRious:any;
+declare var $:any;
+declare var html2canvas:any
+@Component({
+  selector: 'app-edit-device-master',
+  templateUrl: './edit-device-master.component.html',
+  styleUrls: ['./edit-device-master.component.scss']
+})
+export class EditDeviceMasterComponent implements OnInit {
+devName:any;
+phNum:any;
+createdOn:any;
+expOn:any;
+
+DealerObj = [];
+userObj = [];
+// iconType:any;
+simNum:any;
+todayODO:any;
+totalODO:any;
+useridd: any;
+emailId:any ="";
+costumers: any = [];
+deviceID: any;
+userName:any;
+devmodel:any;
+newUserArr=[];
+editTemplate:boolean=true;
+deletetemplate:boolean=false;
+  orignalEmail: any;
+  initialUser: any;
+  ExportPdf: boolean;
+  devID: any;
+  InvoiceDate: any;
+  devicetype: any;
+  fitmentDate: any;
+  engineNo: any;
+  typeOfVehicle: any;
+  manufacturingCompany: any;
+  lastFitnessDate: any;
+  vehicleRegDate: any;
+  vehicleManufacturingDate: any;
+  ICCICD: any;
+  IMSI: any;
+  uniqueID: any;
+  lattitude: any;
+  longitude: any;
+  userAddress: any;
+  dealerAddress: any;
+  CID_No: any;
+  imgUrl: any;
+  imgURL: any;
+  companyName: any;
+  companyAddress: any;
+  transportOfficeCity: any;
+  transportOfficeState: { data: string; };
+  ChassisNo: any;
+  deviceManufacturer: any;
+  invoiceNum: any;
+  numberOfSOS: any;
+  expiration_date: any;
+  organisationFlag: any;
+  distributerName:any;
+  distSelect: any=[];
+  superAdmin: any;
+  isDealer: any;
+  dealerId: any;
+  lastPingOn:any
+  lastDeviceTime:any
+  deviceImage=[]
+  constructor(public dialogRef: MdDialogRef<EditDeviceMasterComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+      this.organisationFlag = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOrganisation  ;     
+        this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+        this.isDealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      //  this.deviceImage=this.data.deviceImage
+      //   console.log(this.deviceImage);
+    }
+
+  ngOnInit() {
+    console.log("Init function call");
+    var that = this;
+    this.getUser();
+    this.dealerDetail();
+    console.log("DATA",this.data);
+    this.lastDeviceTime=this.data.deviceInfo.last_device_time;
+    this.lastPingOn=this.data.deviceInfo.last_ping_on
+    this.devName = this.data.deviceInfo.Device_Name;
+    this.devID = this.data.deviceInfo.Device_ID?this.data.deviceInfo.Device_ID:"";
+    this.phNum =this.data.deviceInfo.contact_number;
+    this.createdOn = this.data.deviceInfo.created_on?(new Date(this.data.deviceInfo.created_on).toISOString()):"";
+    this.expOn = this.data.deviceInfo.expiration_date?(new Date(this.data.deviceInfo.expiration_date).toISOString()):"";
+    // this.iconType=this.data.deviceInfo.iconType;
+    this.simNum =this.data.deviceInfo.sim_number;
+    this.orignalEmail =  this.data.deviceInfo.Email_ID
+    this.emailId = this.data.deviceInfo.Email_ID;
+    this.deviceImage=this.data.deviceInfo.deviceImage
+       
+    for(var i=0;i<this.deviceImage.length;i++){
+
+        this.deviceImage[i] = 'https://www.oneqlik.in' + this.deviceImage[i].substring(6)
+        
+      
+    }
+     console.log(this.deviceImage);
+    this.todayODO=this.data.deviceInfo.today_odo;
+    this.totalODO =this.data.deviceInfo.total_odo;
+    this.deviceID = this.data.deviceInfo._id;
+    this.initialUser = this.data.deviceInfo.user._id;
+
+    this.userName = this.data.deviceInfo.OwnerName;
+    this.userAddress = this.data.deviceInfo?this.data.deviceInfo.user.address:"";
+    this.dealerName = this.data.deviceInfo.Dealer_name ;
+    this.dealerId = this.data.deviceInfo.Dealer?this.data.deviceInfo.Dealer._id : ""; 
+    console.log('this.dealerId',this.dealerId);
+    this.dealerAddress = this.data.deviceInfo.DealerAddress;
+    this.InvoiceDate = this.data.deviceInfo.invoiceDate?(new Date(this.data.deviceInfo.invoiceDate).toISOString()):"";
+    this.invoiceNum = this.data.deviceInfo.invoiceNumber
+    this.CID_No = this.data.deviceInfo.CID_No
+    this.devicetype = this.data.deviceInfo.device_model?this.data.deviceInfo.device_model.device_type:"";
+    this.ICCICD = this.data.deviceInfo.ICCICD;
+    this.IMSI = this.data.deviceInfo.IMSI;
+    this.uniqueID = this.data.deviceInfo.uniqueID;
+    this.fitmentDate = this.data.deviceInfo.fitmentDate?new Date(this.data.deviceInfo.fitmentDate):"";
+    this.expiration_date =this.data.deviceInfo.expiration_date?new Date(this.data.deviceInfo.expiration_date):"";
+    this.engineNo = this.data.deviceInfo.engineNo;
+    this.typeOfVehicle = this.data.deviceInfo.typeOfVehicle;
+    this.manufacturingCompany = this.data.deviceInfo.manufacturingCompany;
+  
+    this.lastFitnessDate = this.data.deviceInfo.lastFitnessDate?new Date(this.data.deviceInfo.lastFitnessDate):"";
+    this.vehicleRegDate = this.data.deviceInfo.vehicleRegDate? new Date(this.data.deviceInfo.vehicleRegDate):"";
+    this.vehicleManufacturingDate = this.data.deviceInfo.vehicleManufacturingDate?new Date(this.data.deviceInfo.vehicleManufacturingDate):"";
+    this.lattitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[0]:"";
+    this.longitude = this.data.deviceInfo.last_loc?this.data.deviceInfo.last_loc.coordinates[1]:"";
+    // console.log(this.CID_No,this.devicetype,this.ICCICD,this.IMSI,this.uniqueID,this.fitmentDate,this.engineNo,this.typeOfVehicle,this.manufacturingCompany);
+    // console.log(this.lastFitnessDate,this.vehicleRegDate,this.vehicleManufacturingDate,this.lattitude,this.longitude)
+    if(this.data.deviceInfo['actionId']=="exportPdf"){
+      this.companyName = this.data.deviceInfo.companyName;
+      this.companyAddress = this.data.deviceInfo.companyAddress;
+      this.transportOfficeCity = this.data.deviceInfo.transportOfficeCity;
+      this.transportOfficeState = this.data.deviceInfo.transportOfficeState;
+      this.ChassisNo = this.data.deviceInfo.ChassisNo;
+      this.deviceManufacturer = this.data.deviceInfo.device_model?this.data.deviceInfo.device_model.Manufacturer:"";
+      this.numberOfSOS = this.data.deviceInfo.numberOfSOS;
+      this.editTemplate =false;
+      this.deletetemplate = false;
+      this.ExportPdf =true;
+    }
+
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 200,
+          placeholder: "Select Dealer",
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+      }, 100);
+  
+      setTimeout(() => {
+        $('#dbselect_1').multipleSelect({
+          width: 200,
+          placeholder: "Select User",
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+      }, 100);  
+
+
+
+
+
+  }
+
+
+  getDevmodel(ev){
+    console.log(ev);
+  }
+
+  editDetails(){
+    console.log(this.initialUser);
+    this.dealerSelect = $('#dbselect').multipleSelect('getSelects','value'); 
+    this.userSelect =  $('#dbselect_1').multipleSelect('getSelects','value'); 
+
+  //   console.log('this.emailId',this.emailId);
+  //   if(this.userSelect.length!=0){
+  //      if(this.orignalEmail == this.emailId){
+  //        var errormsg =   swal(
+  //         'Change Email',
+  //         'Please change email before changing user !!!',
+  //         'error'
+  //       )  
+  //        return errormsg;
+  //      }
+  //  }
+    var devObj = {
+      'Device_Name' : this.devName,  
+      'contact_number' :this.phNum,    
+      'created_on' : this.createdOn?(new Date(this.createdOn).toISOString()):"",
+      'expiration_date' : this.expOn?(new Date(this.expOn).toISOString()):"",
+      // 'iconType' : this.iconType,
+      'Email_ID' :this.emailId,
+      'sim_number': this.simNum,
+      'today_odo':this.todayODO,
+      'total_odo' : this.totalODO,
+      '_id':this.deviceID,
+      'last_device_time':this.lastDeviceTime?(new Date(this.lastDeviceTime).toISOString()):"",  
+      'last_ping_on': this.lastPingOn?(new Date( this.lastPingOn).toISOString()):"",  
+    }
+  
+    if(this.userSelect.length!=0){
+      devObj['user'] = this.userSelect[0];    
+    }
+    
+
+
+    if(this.dealerSelect.length!=0){
+       devObj['created_by'] = this.dealerSelect[0];
+       devObj['Dealer'] = this.dealerSelect[0];
+      //  dealerId
+    }
+    // else{
+    //   devObj['Dealer'] = this.useridd;
+    // }
+    
+    console.log("deviceObject=>",devObj);
+
+    this.contactService.editDevMaster(devObj)
+      .subscribe(res=>{
+        console.log(res);
+        if(res){
+          this.dialogRef.close("success");
+        }
+
+      },err=>{
+        console.log(err);
+      })
+  
+   
+
+
+  }
+
+  cancelEdit(){
+    this.dummyuserData=[];
+    this.dialogRef.close();
+  }
+  dummyuserData=[];
+  defaultCustomer:any=''
+  getUser() {
+    this.contactService.getContactsbyUser(this.useridd)
+      .subscribe(res => {  
+        this.costumers = res;
+        console.log('this.costumers',this.costumers);
+
+        setTimeout(() => {
+          $('#dbselect_1').multipleSelect({
+            width: 200,
+            placeholder: "Select User",
+            filter: true,
+            single: true,
+            selectAll: false
+     
+          })
+        }, 100);  
+
+   
+      },err=>{
+        console.log(err);
+      })
+  }
+
+
+  deleteDetails(){
+    console.log("Deleted");
+
+  }
+
+  userSelect=[];
+  // filteruserStates(usr) {
+  //   console.log("userObj=>",usr);
+  //   if (usr) {
+ 
+  //     const filterdealerValue:any = usr;
+  //     this.userSelect=[];
+  //      this.userSelect = this.dummyuserData.filter(function(p){
+  //       var t = p.user_type.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+  //     //  this.option = this.options[i];
+  //       return t > -1;    
+  //     });
+  //       console.log("selectedUser=>",this.userSelect);
+  //       this.emailId = this.userSelect[0].email;
+  //       return this.userSelect;
+  //   }
+  
+  // }
+
+  dealers_info=[];
+
+dealerDetail(){ 
+  var getDealerPayload = (this.superAdmin===true)?this.useridd:this.isDealer ; 
+  this.contactService.dealer_Info_dealer_list_copy(getDealerPayload).subscribe(res=>{
+    this.dealers_info = res;
+    console.log(this.dealers_info);
+    setTimeout(() => {
+      $('#dbselect').multipleSelect({
+        width: 200, 
+        placeholder: "Select Dealer",
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+    }, 100);
+  },err=>{
+    console.log(err);
+  })
+
+}
+
+dealerSelect:any=[];
+dealerName:any;
+// filterDealerStates(dlr) {
+//   console.log(dlr);
+//   if (dlr) {
+//     const filterdealerValue:any = dlr;
+//     this.dealerSelect=[];
+//      this.dealerSelect = this.dealers_info.filter(function(p){
+//       var t = p.dealer_firstname.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+//     //  this.option = this.options[i];
+//       return t > -1;    
+//     });
+//       console.log(this.dealerSelect);
+//       return this.dealerSelect;
+//   }
+
+// }
+
+
+filterDistStates(dst){
+  console.log(dst);
+  if (dst) {
+    const filterdealerValue:any = dst;
+    this.distSelect=[];
+     this.distSelect = this.dealers_info.filter(function(p){
+      var t = p.dealer_firstname.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+      return t > -1;    
+    });
+      console.log(this.distSelect);
+      return this.distSelect;
+  }
+}
+
+
+ 
+
+  filterModelStates(devmdl){
+    console.log(devmdl)
+
+  }
+
+  exportAsPdf() {
+    var that=this
+    console.log(this.imgURL);
+    var doc = new jsPDF();
+    var specialElementHandlers = {
+      '#editor': function (element: any, renderer: any) {
+        return true;
+      }
+    };
+
+    doc.autoTable({
+      theme: 'plain',
+      html: '#testPdf', 
+      styles :  {
+        cellWidth : 50
+      },     
+      willDrawCell: data => {
+        if(data.row.index === 0){ 
+          data.row.height = 50;      
+          data.row.cells[1].styles.halign = 'center';
+           data.row.cells[1].styles.fontSize = 11;
+          // data.row.cells[1].styles.lineHeight= "2.5";
+          // doc.setLineHeightFactor()
+      
+          
+          doc.addImage(this.imgURL,'JPEG', 140, 12,40,40);
+          
+        }  
+        if(data.row.index ===3){    
+         
+        }
+
+        if((data.row.index ===2) || (data.row.index ===4) || (data.row.index ===6) ||(data.row.index ===8) ||(data.row.index ===10) || (data.row.index ===12)){
+          doc.setFontStyle('bold');         
+          
+        }
+        if(data.row.index ===12){
+          data.row.height = 25;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+
+        if(data.row.index ===13){
+          data.row.height = 25;    
+          // data.row.cells[0].styles.halign = 'center';
+          // doc.halign = 'center';
+        }
+       
+   
+      }
+      
+    });
+   
+
+    var myImage = new Image();
+    myImage.src = that.deviceImage[0]?that.deviceImage[0]:'';
+    myImage.crossOrigin="anonymous";
+
+    var myImage1 = new Image();
+    myImage1.src = that.deviceImage[1]?that.deviceImage[1]:'';
+    myImage1.crossOrigin="anonymous";
+
+    var myImage2 = new Image();
+    myImage2.src = that.deviceImage[2]?that.deviceImage[2]:'';
+    myImage2.crossOrigin="anonymous";
+
+    if(that.deviceImage.length==0){
+       doc.save('sample-file.pdf');
+    }
+
+    function f1() {
+    return new Promise((resolve, reject) => {
+      myImage.onload = function(){
+      console.log("1");
+      doc.addImage(myImage , 'png', 40, 180, 30, 20);
+      if(that.deviceImage.length==1){
+        doc.save('sample-file.pdf');
+      }
+      
+    };
+        resolve('');
+    });
+}
+
+function f3(){
+ myImage2.onload = function(){
+           console.log("3");
+        
+        doc.addImage(myImage2 , 'png', 80, 180, 30, 20);
+          doc.save('sample-file.pdf');
+        
+        
+      };
+}
+
+function f2() {
+  return new Promise((resolve, reject) => {
+    myImage1.onload = function(){
+        console.log("2");
+        doc.addImage(myImage1 , 'png', 60, 180, 30, 20);
+        if(that.deviceImage.length==2){
+        doc.save('sample-file.pdf');
+      }
+      };
+       resolve('');
+    })
+      
+
+}
+
+f1().then(res => f2().then(res1=>f3()));
+
+
+    
+   
+     
+
+   
+  }
+
+    toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  ngAfterViewInit(){
+    if(this.data.deviceInfo['actionId']=="exportPdf"){
+      console.log("after ngOninit");
+       this.qrCodeGenerator();
+    }
+    
+  }
+
+  qrCodeGenerator() {
+    var qrcodeDATA ="";
+    if(this.userName){
+      qrcodeDATA += "Owner Name : " + this.userName + " " ;
+    }
+    // if(this.userAddress){
+    //    qrcodeDATA += "Owner Add" + this.userAddress + " " ;
+    // }
+
+    if(this.engineNo){
+      qrcodeDATA += "Engine no. :" + this.engineNo + " " ;
+    }
+    if(this.ChassisNo){
+      qrcodeDATA +=  "Chassis:" + this.ChassisNo + " " ;
+    }
+    if(this.uniqueID){
+      qrcodeDATA +=  "UID:" + this.uniqueID + " " ;
+
+    }
+    if(this.devID){
+      qrcodeDATA += "IMEI :" + this.devID +" " ;
+    }
+    if(this.devName){
+      qrcodeDATA +=  "Device name :" +  this.devName  + " " ;
+    }
+    if(this.invoiceNum){
+      qrcodeDATA += "Invoice Number :" + this.invoiceNum + " ";
+    }
+    if(this.ICCICD){
+      qrcodeDATA += "ICCID :" + this.ICCICD + " " ; 
+    }
+    if(this.IMSI){
+      qrcodeDATA += "IMSI :" + this.IMSI + " " ;
+  
+    }
+
+    if(this.simNum){
+      qrcodeDATA += "SIM :" +  this.simNum + " " ;
+     
+    }
+    if(this.CID_No){
+      qrcodeDATA +=   "CID no :" + this.CID_No + " " ;
+     
+    }
+    if(this.typeOfVehicle){
+      qrcodeDATA +=  "Vehicle:" + this.typeOfVehicle + " " ;
+    }
+
+
+ 
+    if((this.fitmentDate != undefined)&&(this.fitmentDate != '')){
+     var fdate = new Date(this.fitmentDate);
+     var  fDate =  moment(fdate).format('l');
+  
+     qrcodeDATA +=  "Fitment Date :" + fDate + " " ;
+
+    }
+    if((this.InvoiceDate != undefined)&&(this.InvoiceDate!='')){
+      var iDate =  new Date(this.InvoiceDate);
+      var invDate = moment(iDate).format('l');
+      qrcodeDATA +=  "Invoice Date :" + invDate + " ";
+    
+    }
+
+    if((this.vehicleRegDate != undefined)&&(this.vehicleRegDate != "")){ 
+      console.log("vehRegistration Date =>",this.vehicleRegDate);
+      var vehregD = new Date(this.vehicleRegDate);
+      var vehRegDate = moment(vehregD).format('l');
+      qrcodeDATA +=  "Reg Date :" + vehRegDate ;   
+    }
+     
+    // var typeNumber = 4;
+    // var errorCorrectionLevel = 'L';
+    // var qr = qrcode(typeNumber, errorCorrectionLevel);
+    // qr.addData(qrcodeDATA);
+    // qr.make();
+    // this.imgURL = qr.createDataURL();
+
+   
+
+    var qr = new QRious();
+    qr.set({
+      // background: 'green',
+      backgroundAlpha: 0.8,
+      // foreground: 'blue',
+      foregroundAlpha: 0.8,
+      level: 'L',
+      padding: 25,
+      size: 500,
+      value: qrcodeDATA
+    });
+  
+
+    this.imgURL= qr.toDataURL();
+    
+  
+  
+  }
+
+  // + "Email " +this.orignalEmail +"IMEI " + this.deviceID + "Device User " + this.userName + "Dealer Name " + this.dealerName; last_device_time,last_ping_on
+  
+
+}
+
+
+
+
+
+// this.companyName 
+// this.companyAddress
diff --git a/src/app/device/normal-cert/normal-cert.component.html b/src/app/device/normal-cert/normal-cert.component.html
new file mode 100644
index 0000000..52129be
--- /dev/null
+++ b/src/app/device/normal-cert/normal-cert.component.html
@@ -0,0 +1,271 @@
+ <div class="container" id="content" #content style="height: 500px">
+  
+  <ul class="nav nav-tabs mb-3" id="ex1" role="tablist">
+  <li class="nav-item" role="presentation">
+    <a
+      class="nav-link active" data-toggle="tab" role="tab" href="#type1"
+      >Type 1</a
+    >
+  </li>
+  <li class="nav-item" role="presentation">
+    <a
+      class="nav-link" data-toggle="tab" role="tab" href="#type2"
+      >Type 2</a
+    >
+  </li>
+ 
+</ul>
+<!-- Tabs navs -->
+
+<!-- Tabs content -->
+<div class="tab-content" id="ex1-content">
+  <div
+    class="tab-pane fade show active"
+    id="type1"
+    role="tabpanel"
+    aria-labelledby="ex1-tab-1"
+  >
+   <div class="row">
+     <div class="col-12">
+       <table id="testPdf" style="margin: 50px 100px 50px 100px;">
+         <tr>
+           <td colspan="2">
+              <img src={{imgurl}} alt="Company Logo" height="50" width="100">        
+           </td>
+           <td></td>
+         </tr>  
+         <tr style="height: 75px;">
+           <td  colspan="2" style="text-align: center;font-weight: 600">
+             PROOF OF FITMENT OF GPS VEHICLE TRACKING SYSTEM
+           </td>
+           <td></td>
+         </tr>
+         <tr>
+           <td style="text-align: left;width:50%">
+              FROM<br>
+              Adnate IOT Pvt. Ltd.<br>
+              H202,La Vida Loca, Pimple Saudagar, Pune, Maharashtra 411027<br>
+           </td>
+           <td style="text-align: center;width: 50%">
+              BILLED TO<br>
+              {{customerName}}<br>
+              {{address}}     
+           </td>
+         </tr>
+         <tr style= "height: 80px; font-weight: 500;">
+           <td colspan="2" style="text-align: center">
+             This is to certify that the GPS tracking device fitted and tested as per the details given below,
+                it is ckecked and functioning in all matters.<br>
+           </td>       
+         </tr>
+         <tr style="font-weight: 600;">
+           <td colspan="2">
+              CLIENT NAME : {{customerName}}<br>
+              {{device_name}}<br>
+              VEHICLE REG NO. : NEW REGISTRATION<br>
+              {{engineno}}<br>
+              {{chessisno}}<br>
+              {{imei}}<br>
+              DEVICE SIM NO.<br>
+              {{this.validity}}<br>
+           </td>      
+         </tr>
+         <tr >
+           <td colspan='2'> <p style="font-weight: 700;margin-top: 20px;">TERMS AND CONDITIONS</p></td>
+         </tr>
+         <tr>
+           <td colspan="2">
+              <P>Adnate IOT Pvt. Ltd. does not promote or misuse of any of our device or software’s function.
+                  Adnate IOT Pvt. Ltd. will not be responsible for any break in the privacy of any individual
+                  are business by use of our devices or software.
+                  All our customers are responsible themselves for any activities related to using our products.
+                  According with the information technology act of 2000 section 72.
+                  Penalty for breach of confidentiality and privacy. Save as otherwise provided in this act or any
+                  other law for the time being inforce any person who in pursuance of any of the powers conferred
+                  under this act rules or regulations made there under has secured access to any electronics
+                  record, book, register, correspondence, information, document or other material to any other
+                  person shall be punished with imprisonment for a term which may extend to two years or with
+                  fine may extend to one lakh rupees or both. Any complaint with regard to this order should be intimated within 7 days.</P>
+           </td>
+         </tr>
+        
+
+       </table>
+     </div>
+   </div>
+     <div class="row">
+      <div class="12" style="text-align: center; width: 100%; margin: 20px auto 30px auto">
+        <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button
+          (click)="download1()">DOWNLOAD</button>
+        <button id="cmd" style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/"
+          md-raised-button (click)="cancel()">CANCEL</button>
+      </div>
+    </div>
+  </div>
+  <div class="tab-pane fade" id="type2" role="tabpanel" aria-labelledby="ex1-tab-2">
+    <div id="certificate">
+    
+    
+    <header class="clearfix">
+       <div class="text-center">
+    
+         <h5>Installation Certificate</h5>
+       </div>
+    
+       <div id="logo">
+        <img src={{imgurl}} alt="Company Logo" height="50" width="100"> 
+       </div>
+      
+       <!-- </div> -->
+     </header>
+    
+       <div id="details" class="clearfix">
+          <div class="to mt-2 mb-3"><b>Declaration:</b></div>
+           <div class="address">This is to certify that the vehicle with below mentioned details has been fitted with VTS
+    device, programmed with GPRS.</div>
+         
+       </div>
+       <hr>
+       <div id="details" class="clearfix">
+         <div class="to mt-2 mb-3"><b>Vehicle Details:</b></div>
+    
+         <table id="table1" class="table table-bordered">
+           <thead>
+             <tr>
+               <th>Vehicle Owner</th>
+               <td>
+                 {{customerName}}
+               </td>
+                <td colspan="2">
+                 
+               </td>
+    
+             </tr>
+             <tr>
+                <th>Registration No.</th>
+                 <td>
+                 {{device_name}}
+               </td>
+                <th>Chassis No.</th>
+                <td>
+                 {{chessisno}}
+               </td>
+             </tr>
+             <tr>
+                <th>Model of Vehicle</th>
+                 <td>
+                 {{deviceModel}}
+               </td>
+                <th>Year of Manufacture</th>
+                <td>
+                 
+               </td>
+             </tr>
+           </thead>
+    
+         </table>
+         
+       </div>
+       <hr>
+       <div id="details" class="clearfix">
+         <div class="to mt-2 mb-3"><b>VTS Details:</b></div>
+    
+         <table id="table2" class="table table-bordered">
+           <thead>
+            <tr>
+                <th>Serial No.</th>
+                 <td>
+                   {{imei}}
+               </td>
+                <th>GPRS SIM No.</th>
+                <td>
+                 {{sim_number}}
+               </td>
+             </tr>
+             <tr>
+                <th>Date of Installation</th>
+                 <td>
+                 {{fromDate}}
+               </td>
+                <th>Technician Name</th>
+                <td>
+                 
+               </td>
+             </tr>
+             <tr>
+                <th>Comments / Remarks</th>
+                 <td colspan="3">
+                 
+               </td>
+               
+             </tr>
+           </thead>
+    
+         </table>
+         
+       </div>
+       <hr>
+         <div id="details" class="clearfix">
+         <div class="to mt-2 mb-3"><b>DEALER DETAILS: </b></div>
+    
+         <table id="table3" class="table table-bordered">
+           <thead>
+            <tr>
+                <th>Installation Hub Name</th>
+                 <td colspan="3">
+                 
+               </td>
+                
+             </tr>
+              <tr>
+                <th>Address & Phone</th>
+                 <td >
+                 {{dealerAddress}}
+               </td>
+               <td>
+                {{dealerPhone}}
+               </td>
+                
+             </tr>
+             <tr>
+                <th>Date of Inspection</th>
+                 <td>
+                 
+               </td>
+                <th>Next calibration date</th>
+                <td>
+                 
+               </td>
+             </tr>
+            
+           </thead>
+    
+         </table>
+         
+       </div>
+       <ul>
+    <li>1 YEAR WARRANTY ON THE UNIT FROM DATE OF INSTALLATION AGAINST ANY MANUFACTURING DEFECT</li>
+    <li>WARRANTY WILL BE VOID IF ANY REPAIR / MISUSE / TAMPERING WITHOUT WRITTEN CONCENT FROM DEALER</li>
+    <li>RENEWAL ON OR BEFORE THE NEXT CALIBRATION DATE ENSURES THE UNINTERRUPTED SERVICE</li>
+    <li>SOFT COPY OR HARD COPY OF VALID CERTIFICATE IS MANDATORY FOR ANY SERVICE REQUESTS</li>
+    <li>ALL SERVICE REQUESTS SHOULD BE COMMUNICATED VIA EMAIL TO SUPPORT@AURATRAQ.COM</li>
+    <li>THIS CERTIFICATE IS VALID ONLY WITH STAMP & SIGNATURE</li>
+    </ul>  
+    
+    
+    </div>  
+    <div class="row">
+       <div class="12" style="text-align: center; width: 100%; margin: 20px auto 30px auto">
+         <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button
+           (click)="download()">DOWNLOAD</button>
+         <button id="cmd" style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/"
+           md-raised-button (click)="cancel()">CANCEL</button>
+       </div>
+     </div>
+   
+  </div>
+ 
+</div>
+
+   
+</div>
diff --git a/src/app/device/normal-cert/normal-cert.component.scss b/src/app/device/normal-cert/normal-cert.component.scss
new file mode 100644
index 0000000..c6aeb5d
--- /dev/null
+++ b/src/app/device/normal-cert/normal-cert.component.scss
@@ -0,0 +1,11 @@
+// @font-face {
+//     font-family: SourceSansPro;
+//     // src: url(SourceSansPro-Regular.ttf);
+// }
+
+.clearfix:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
diff --git a/src/app/device/normal-cert/normal-cert.component.spec.ts b/src/app/device/normal-cert/normal-cert.component.spec.ts
new file mode 100644
index 0000000..d82a607
--- /dev/null
+++ b/src/app/device/normal-cert/normal-cert.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NormalCertComponent } from './normal-cert.component';
+
+describe('NormalCertComponent', () => {
+  let component: NormalCertComponent;
+  let fixture: ComponentFixture<NormalCertComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NormalCertComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NormalCertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/device/normal-cert/normal-cert.component.ts b/src/app/device/normal-cert/normal-cert.component.ts
new file mode 100644
index 0000000..fe9eefb
--- /dev/null
+++ b/src/app/device/normal-cert/normal-cert.component.ts
@@ -0,0 +1,258 @@
+import { Component, OnInit, Inject,ViewChild ,ElementRef} from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var jsPDF : any;
+declare var html2canvas :any;
+import * as moment from 'moment';
+
+
+
+@Component({
+  selector: 'app-normal-cert',
+  templateUrl: './normal-cert.component.html',
+  styleUrls: ['./normal-cert.component.scss']
+})
+export class NormalCertComponent implements OnInit {
+  @ViewChild('content') content : ElementRef;
+  certificateImgage: any;
+  customerName: string;
+  address: any;
+  device_name: any;
+  engineno: any;
+  chessisno: any;
+  imei: any;
+  sim_number: any;
+  fromDate: any;
+  todate: any;
+  imgurl: any;
+  validity: any;
+  dealerName
+  dealerAddress;
+  manufacturer
+  deviceModel
+  dealerPhone;
+  convertedImage: any;
+  constructor(public dialogRef: MdDialogRef<NormalCertComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+      console.log(data);
+      var devObject = data.deviceInfo;
+    this.dealerName = devObject.Dealer_name ? devObject.Dealer_name:''
+    this.dealerAddress = devObject.DealerAddress ? devObject.DealerAddress:''
+    this.dealerPhone = devObject.Dealer ? devObject.Dealer.phone:''
+    this.deviceModel = devObject.device_model ? devObject.device_model.device_type:''
+     if(devObject.user){
+       var fName =devObject.user?devObject.user.first_name:"";
+       var lName = devObject.user?devObject.user.last_name:"";
+       console.log(fName+ lName)
+       this.customerName =fName + " " + lName  }
+       this.address = devObject.user?devObject.user.address:"NA";
+       this.device_name =(devObject.Device_Name?devObject.Device_Name:"NA");
+       this.engineno =(devObject.engineNo?devObject.engineNo:"NA");
+       this.chessisno = (devObject.ChassisNo? devObject.ChassisNo:"NA");
+       this.imei =(devObject.Device_ID?devObject.Device_ID:"NA");
+       this.sim_number =devObject.sim_number?devObject.sim_number:"NA";
+       if(devObject.created_on){   
+         var created_time = new Date(devObject.created_on);
+         this.fromDate= moment(created_time).format('DD-MM-YYYY');
+
+
+       }else{
+        this.fromDate = 'NA';
+       }
+       if(devObject.expiration_date){
+        
+         var e_time = new Date(devObject.expiration_date);
+         this.todate =    moment(e_time).format('DD-MM-YYYY');
+
+       }else{
+        this.todate ="NA"
+       }
+
+       this.validity =  "VELIDITY OF DEVICE" + ":"+" " + this.fromDate + " " + 'TO' + " " + this.todate;
+       
+
+     }
+
+  ngOnInit() {
+    var that = this ;
+    if (localStorage.getItem('profilePic')){
+      this.imgurl = localStorage.getItem('profilePic');
+    }else
+    this.imgurl= '../../assets/image/f2_logo.png';
+  this.toDataURL(this.imgurl, function(dataUrl) {
+  console.log('RESULT:', dataUrl)
+  that.convertedImage = dataUrl ; 
+})
+  }
+
+
+
+  
+
+
+  cancel(){
+    this.dialogRef.close('cancel');
+  }
+  
+
+  toDataURL(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.onload = function() {
+      var reader = new FileReader();
+      reader.onloadend = function() {
+        callback(reader.result);
+      }
+      reader.readAsDataURL(xhr.response);
+    };
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.send();
+  }
+  
+  download1(){
+    var that = this;
+    var doc = new jsPDF();
+   
+    var specialElementHandlers = {
+      '#editor': function (element: any, renderer: any) {
+        return true;
+      }
+    };
+
+    doc.autoTable({
+      theme: 'plain',
+      html: '#testPdf', 
+      margin:{left:25,right:25},
+      styles :  {
+        cellWidth : 50
+      }, 
+         
+      willDrawCell: data => {
+        if(data.row.index === 0){ 
+          data.row.height = 25;             
+          // data.row.cells[0].styles.lineHeight= "30";
+          // doc.setLineHeightFactor()   
+          doc.addImage(that.convertedImage,'JPEG',25, 10,25,15);
+        }  
+
+        doc.text(28, 200, 'DEALER STAMP & SEAL');
+        doc.text(100, 200, 'CUSTOMER SIGNATURE');
+
+        if((data.row.index === 1)){
+          // data.row.cells[0].styles.halign = 'right';
+          data.row.height = 15;             
+        }
+        
+        if((data.row.index === 7)){
+             
+        }
+        if((data.row.index===1)||(data.row.index===4)||(data.row.index===5)){
+          doc.setFontStyle('bold');    
+        }
+        
+      }
+      
+    });
+    doc.save('Device_Cert.pdf');
+
+  }
+  download(){
+console.log("in ");
+    
+    var that=this
+    let doc = new jsPDF('p', 'pt', 'a4');
+    doc.setFontSize(18);
+    // doc.text('Travel Path Report', 350, 30);
+    doc.text("INSTALLATION CERTIFICATE", 160, 30);
+    doc.setFontSize(13);
+    doc.text("DECLARATION :", 40, 120);
+    doc.addImage(that.convertedImage, 'JPEG', 500, 10, 80, 80);
+    doc.setFontSize(10);
+    doc.text("This is to certify that the vehicle with below mentioned details has been fitted with VTS device, programmed with GPRS.", 50, 140);
+
+    var header = function (data) {
+      doc.setFontSize(13);
+      doc.setTextColor(40);
+      doc.setFontStyle('normal');
+      //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+
+      doc.text("VEHICLE DETAILS :", data.settings.margin.left, 190);
+    };
+    
+    doc.autoTable({
+      // beforePageContent: header,
+      beforePageContent: header,
+      startY: doc.autoTableEndPosY() + 200,
+      theme: 'grid',
+      margin:{top:80},
+      headStyles: { fontSize: 10 },
+      bodyStyles: { fontSize: 10 },
+
+      // head: [['ID', 'Name', 'Country']],
+      body: [['Registration No :',this.device_name, 'Chassis No:',that.chessisno],
+        ['Vehicle Owner :', that.customerName, ],
+        ['Model of Vehicle :', this.deviceModel, 'Year of Manufacture', '']],
+
+    });
+    var header1 = function (data) {
+      doc.setFontSize(13);
+      doc.setTextColor(40);
+      doc.setFontStyle('normal');
+      //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+      doc.text("VTS DETAILS :", data.settings.margin.left, 310);
+    };
+    doc.autoTable({
+      beforePageContent: header1,
+      theme: 'grid',
+      headStyles: { fontSize: 10 },
+      bodyStyles: { fontSize: 10 },
+      startY: doc.autoTableEndPosY() + 50,
+      // head: [['ID', 'Name', 'Country']],
+      body: [['Serial No:', that.imei, 'GPRS SIM No :',  that.sim_number],
+        ['Date of Installation :', '', 'Technician Name:',''],
+        ['Comments / Remarks :', '', ]],
+    });
+    var header2 = function (data) {
+      doc.setFontSize(13);
+      doc.setTextColor(40);
+      doc.setFontStyle('normal');
+      //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+      doc.text("DEALER DETAILS :", data.settings.margin.left, 420);
+    };
+    doc.autoTable({
+      beforePageContent: header2,
+      startY: doc.autoTableEndPosY() + 50,
+      theme: 'grid',
+      headStyles: { fontSize: 10 },
+      bodyStyles: { fontSize: 10 },
+
+      // head: [['ID', 'Name', 'Country']],
+      body: [['Date of Inspection :', '', 'Next calibration date :', ''],
+        ['Installation Hub Name :', ''],
+        ['Address & Phone :', that.dealerAddress, that.dealerPhone]],
+    });
+    doc.setFontSize(9);
+    doc.text("1) 1 YEAR WARRANTY ON THE UNIT FROM DATE OF INSTALLATION AGAINST ANY MANUFACTURING DEFECT", 50, 540);
+    doc.text("2) WARRANTY WILL BE VOID IF ANY REPAIR / MISUSE / TAMPERING WITHOUT WRITTEN CONCENT FROM DEALER", 50, 555);
+    doc.text("3) RENEWAL ON OR BEFORE THE NEXT CALIBRATION DATE ENSURES THE UNINTERRUPTED SERVICE", 50, 570);
+    doc.text("4) SOFT COPY OR HARD COPY OF VALID CERTIFICATE IS MANDATORY FOR ANY SERVICE REQUESTS", 50, 585);
+    doc.text("5) ALL SERVICE REQUESTS SHOULD BE COMMUNICATED VIA EMAIL TO SUPPORT@AURATRAQ.COM", 50, 600);
+    doc.text("6) THIS CERTIFICATE IS VALID ONLY WITH STAMP & SIGNATURE", 50, 615);
+
+    doc.text("Stamp & Signature", 450, 795);
+
+    
+    doc.save('table.pdf');  
+    // doc.output('dataurlnewwindow'); //to check pdf generate
+
+    // }).then(canvas => {
+    //   const contentDataURL = canvas.toDataURL('image/png')
+    //   let pdf = new jsPDF('l', 'cm', 'a4'); //Generates PDF in landscape mode
+    //   // let pdf = new jspdf('p', 'cm', 'a4'); Generates PDF in portrait mode
+    //   pdf.addImage(contentDataURL, 'PNG', 0, 0, 29.7, 21.0);
+    //   pdf.save('Filename.pdf');
+    // }); 
+  }
+
+}
+
diff --git a/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.css b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.css
new file mode 100644
index 0000000..ec8b4f5
--- /dev/null
+++ b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.css
@@ -0,0 +1,89 @@
+.mainClass {
+  padding-top: 80px;
+
+  /* margin-right: 10px; */
+  /* box-shadow: 4px 5px #ececec; */
+}
+
+.mainClass p.head_style {
+  padding-top: 8px;
+  color: white;
+  margin-bottom: 0px;
+}
+
+/* .mainClass p.head_style1{
+  font-size: 15px;
+  font-weight: 500;
+  color: #615c5c;
+  text-align: left; 
+  padding-left: 1%;
+} */
+
+/* .rowStyle{
+  padding-right: 15%;
+} */
+
+.formfieldstyle {
+  width: 40%;
+}
+
+.rowHeight {
+  /* height: 145px; */
+  overflow: auto;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+/deep/ .mat-input-flex {
+  border: 1px solid #c1c1c1;
+  background: #f2f2f2;
+}
diff --git a/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.html b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.html
new file mode 100644
index 0000000..1995a71
--- /dev/null
+++ b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.html
@@ -0,0 +1,1341 @@
+
+ <app-all-menus></app-all-menus>
+ <div class="mainClass">  
+  <div style="background: #A2C523;text-align: center;font-size: 20px;border-radius: 3px;box-shadow: 2px 3px #ececec;">
+      <p class="head_style">{{'ADD DEVICE' | translate}}</p>
+      <div id="toast"><div id="desc">{{data_descip}}</div></div>
+  </div>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <!-- <flash-messages style="float: center;"></flash-messages>  -->
+
+  
+  <ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link" data-toggle="tab" href="#tabs-0" role="tab">Add Customer</a>
+      </li>
+    <li class="nav-item">
+      <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">General Setting</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Additional Setting</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Document Upload Setting</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">Add Multiple Devices</a>
+    </li>
+  </ul><!-- Tab panes -->
+  <div class="tab-content" style="margin-top: 13px;height: 90vh;margin: 20px;">
+    <div class="tab-pane active" id="tabs-1" role="tabpanel">
+    
+      <div class="form-row">
+        <div class="form-group col-md-4" *ngIf="!inventoryManagement">
+          <label for="inputPassword4">{{"Device ID (IMEI No.)" | translate}}</label> <span>*</span>
+          <input [(ngModel)]=" deviceid" name=" deviceid" placeholder="Please Enter Device ID (IMEI)" type="text" class="form-control">
+          
+        </div>
+        <div class="form-group col-md-4" *ngIf="inventoryManagement">
+          <label for="inputPassword4">{{"Device ID (IMEI No.)" | translate}}</label> <span>*</span>
+          <select id="inventory" multiple="multiple">
+            <option *ngFor="let option_1 of inventory" [value]="option_1.IMEI">{{ option_1.IMEI }}</option>
+          </select>
+        </div>
+        
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{'Vehicle Registration No.' | translate}}</label> <span>*</span>
+          <input [(ngModel)]="devicename"  type="text" class="form-control" id="inputEmail4" placeholder="Please Enter Registration number" >
+          
+        </div>
+
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Description" | translate}}</label> 
+          <input [(ngModel)]="des" type="text" class="form-control" id="inputEmail4"
+            placeholder="Please Enter Description">
+          </div>
+
+      
+      
+      </div>
+
+      <div class="form-row">
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">{{"SIM Number" | translate}}</label> <span>*</span>
+            <input (keypress)="click1($event)" onkeydown="call(event)"  type="number" minlength="10" maxlength="13"
+                  [(ngModel)]="hrdwr" name="hrdwr" placeholder="{{'Please Enter SIM Number' | translate}}" class="form-control"
+              id="inputEmail4">
+          </div>
+      
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{'SIM Provider' | translate}}</label> <span>*</span>
+          <input [(ngModel)]="SIM_provider" name="hrdwr" placeholder="{{'Please Enter SIM Provider' | translate}}" class="form-control" id="inputEmail4">
+        </div>
+      
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"SIM Number 2" | translate}}</label>
+          <input (keypress)="click1($event)" onkeydown="call(event)" type="text" maxlength="13" [(ngModel)]="hrdwr2"
+                  name="hrdwr2" class="form-control" id="inputEmail4" placeholder="{{'Please Enter SIM Number 2' | translate}}">
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"SIM Provider 2" | translate}}</label>
+          <input  [(ngModel)]="SIM_provider2" placeholder="{{'Please Enter SIM Provider 2' | translate}}" class="form-control" id="inputEmail4">
+        </div>
+      
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{'Integration ID' | translate}}</label>
+          <input  [(ngModel)]="IntegrationId" placeholder="{{'Please Enter Integration ID' | translate}}" class="form-control"
+            id="inputEmail4">
+        </div>
+      
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{'Driver Name' | translate}}</label>
+          <input [(ngModel)]="driver" name="driver" class="form-control" id="inputEmail4" placeholder="{{'Please Enter Driver Name' | translate}}">
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Driver contact number" | translate}}</label>
+          <input (keypress)="click1($event)" onkeydown="call(event)" type="text" minlength="10" maxlength="10"
+            [(ngModel)]="dcontact" placeholder="{{'Driver contact number' | translate}}" class="form-control"
+            id="inputEmail4">
+        </div>
+      
+        <div *ngIf="showFieldsDealer && showFieldsUser" class="form-group col-md-8 row">
+          <div class="col-md-6">
+            <label for="inputEmail4">{{'Dealer' | translate}}</label>
+            <!-- <md-input-container> -->
+            <input placeholder="{{'Select dealer' | translate}}" class="form-control" [mdAutocomplete]="tdAuto0" name="state"
+              #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
+            <md-autocomplete #tdAuto0="mdAutocomplete">
+              <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
+                <span>{{ group.first_name }} {{ group.last_name }}</span>
+              </md-option>
+              <!-- <md-option *ngIf="dealers_info.length==0">
+                                              <span>No Data Found</span>
+                                            </md-option> -->
+            </md-autocomplete>
+            <!-- </md-input-container> -->
+      
+          </div>
+      
+          <!-- (click)="selectDealer(group._id)" -->
+          <div class="form-group col-md-6">
+            <label for="inputEmail4">{{'User' | translate}}</label>
+            <!-- <md-input-container > -->
+            <input placeholder="{{'Select User' | translate}}" class="form-control" [mdAutocomplete]="tdAuto" name="state"
+              #state="ngModel" [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
+            <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
+                <!-- (click)="selectMainUser(userName)" -->
+                <span>{{userName.full_name}}</span>
+              </md-option>
+              <md-option *ngIf="costumers.length==0">
+                <span>No Data Found</span>
+              </md-option>
+            </md-autocomplete>
+            <!-- </md-input-container> -->
+          </div>
+        </div>
+      
+        <div *ngIf="!showFieldsDealer && showFieldsUser && custtype" class="form-group col-md-4">
+          <label for="inputEmail4">{{"User" | translate}}</label>
+          <!-- <md-input-container style="width: 60%;"> -->
+          <input placeholder="{{'Select User' | translate}}" class="form-control" [mdAutocomplete]="tdAuto" name="state"
+            #state="ngModel" [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
+          <md-autocomplete #tdAuto="mdAutocomplete">
+            <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
+              <!-- (click)="selectMainUser(userName)" -->
+              <span>{{userName.full_name}}</span>
+            </md-option>
+            <md-option *ngIf="costumers.length==0">
+              <span>No Data Found</span>
+            </md-option>
+          </md-autocomplete>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="col-md-4">
+          <span>{{'Device model *' | translate}} :</span>
+          <!-- <md-input-container style="width: 60%;"> -->
+            <input class="form-control" placeholder="{{'Device Model*' | translate}}" [mdAutocomplete]="tdAutoDevModel" name="state"
+              #state="ngModel" [(ngModel)]="deviceModel" (ngModelChange)="filterDeviceModelState(deviceModel)">
+            <md-autocomplete #tdAutoDevModel="mdAutocomplete">
+              <md-option *ngFor="let model of dataDevModel" [value]="model.modelName">
+                <span style="font-size:13px;">{{model.modelName}}</span>
+              </md-option>
+            </md-autocomplete>
+          <!-- </md-input-container> -->
+        </div>
+        <!-- (click)="selectedDevModel(model)" -->
+        <div class="col-md-4">
+          <span>{{'Vehicle type *' | translate}} :</span>
+          <!-- <md-input-container style="width: 60%;"> -->
+            <input class="form-control" placeholder="{{'Select Vehicle type*' | translate}}" [mdAutocomplete]="tdAutoVehicleType"
+              name="state" #state="ngModel" [(ngModel)]="vehType" (ngModelChange)="filterVehType(vehType)">
+            <md-autocomplete #tdAutoVehicleType="mdAutocomplete">
+              <md-option *ngFor="let vh of vehicle_Type" [value]="vh.vehicle_name">
+                <span style="font-size: 13px;">{{vh.vehicle_name}}</span>
+              </md-option>
+            </md-autocomplete>
+          <!-- </md-input-container> -->
+        </div>
+
+        <div class="col-sm-4">
+          <span>{{'Installer' | translate}} :</span>
+          <!-- <md-input-container style="width: 60%;"> -->
+          <input class="form-control" placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+            #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
+          <md-autocomplete #tdAuto0="mdAutocomplete">
+            <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+              <span>{{ group.first_name }} {{ group.last_name }}</span>
+            </md-option>
+            <!-- <md-option *ngIf="dealers_info.length==0">
+                                                                                <span>No Data Found</span>
+                                                                              </md-option> -->
+          </md-autocomplete>
+          <!-- </md-input-container> -->
+        </div>
+
+      </div>
+
+          <div class="form-row">
+            <div class="form-group col-md-4">
+              <lable>{{'Group' | translate}} :</lable>
+              <!-- <md-input-container style="width: 60%;"> -->
+                <input class="form-control" placeholder="{{'Select Group' | translate}}" [mdAutocomplete]="tdAuto1" name="state" #state="ngModel"
+                  [(ngModel)]="groupInfo" (ngModelChange)="filtergrpStates(groupInfo)">
+                <md-autocomplete #tdAuto1="mdAutocomplete">
+                  <md-option *ngFor="let group of datagrpSelect" [value]="group.GroupName" (click)="selectMainGrp(group)">
+                    <span>{{ group.GroupName }}</span>
+                  </md-option>
+                </md-autocomplete>
+              <!-- </md-input-container> -->
+            </div>
+            <!-- for admin----------- -->
+            <!-- <div class="form-group col-md-8 row"> -->
+              <div class="form-group col-sm-4">
+                <lable>{{'Fast tag Id' | translate}} :</lable>
+                  <input class="form-control" type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
+                
+              </div>
+            
+              <div class="form-group col-sm-4">
+                <lable>{{'License' | translate}} :</lable>
+                <select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" class="form-control">
+                  <option *ngFor="let license of licenseArr" [value]="license">{{license}}</option>
+                </select>
+              </div>
+             <!-- </div> -->
+            </div>
+            <div class="form-row">
+              <!-- -------------------------DEVICE DISTANCE VARIATION----------------------- -->
+            
+              <div class="col-md-4">
+                  <span>{{'Device Distance Variation' | translate}}</span>
+                  <div class="input-group">
+                    <div class="input-group-prepend">
+                      <select style="height: 30px;" [(ngModel)]="selcetedSign">
+                        <option value="+">+</option>
+                        <option value="-">-</option>
+                      </select>
+                      <!-- <span class="input-group-text" id="inputGroup-sizing-default">Default</span> -->
+                    </div>
+
+                    <input type="number" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default" [(ngModel)]="deviceDistanceVariation">
+                    <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+                  </div>
+                <!-- <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> -->
+              </div>
+              
+              
+              <div class="col-md-4">
+                <span>{{'Installer' | translate}} :</span>
+                <!-- <md-input-container style="width: 60%;"> -->
+                  <input class="form-control" placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                    #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
+                  <md-autocomplete #tdAuto0="mdAutocomplete">
+                    <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+                      <span>{{ group.first_name }} {{ group.last_name }}</span>
+                    </md-option>
+              
+                  </md-autocomplete>
+                <!-- </md-input-container> -->
+              </div>
+
+              <div class="col-md-4">
+                <label>{{'Expiration date' | translate}} <span style="color:red">*</span> :</label>
+                <!-- <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;"> -->
+                  <input id="expDate" [disabled]='showDate' bsDatepicker [bsConfig]="bsConfig" name="Expiration date" class="form-control"
+                    [(ngModel)]="expDate" type="text">
+                <!-- </md-form-field> -->
+              </div>
+
+
+            </div>
+
+            <div class="form-row">
+              <div class="col-md-4">
+                <span>{{'Sells Person' | translate}} :</span>
+               
+                  <input class="form-control" type="text" [(ngModel)]="sellsPerson" name="sells person"
+                    placeholder="{{'Sells Person' | translate}}">
+                
+              </div>
+
+              <div class="col-md-4 mt-3">
+                <span>{{'Ignition Wire connected' | translate}} :</span>
+                <md-slide-toggle  style="float: right; padding: 8px 35.1px"
+                  md-tooltip="Change status" [(ngModel)]="ignitionWire"></md-slide-toggle>
+               
+              
+              </div>
+
+              
+
+            </div>
+
+
+
+
+     
+
+
+<!--      
+
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div *ngIf="!inventoryManagement" class="col-sm-6" style="text-align: right;">
+              <span>{{"Device ID (IMEI No.) *" | translate}} :</span>
+              <md-form-field style="width: 60%;" class="formfieldstyle">
+                <input mdInput type="text" class="no-spin" [(ngModel)]=" deviceid" name=" deviceid" placeholder="Device ID (IMEI)"
+                  required />
+                <md-error class="required">{{'Enter Device ID' | translate}}</md-error>
+              </md-form-field>
+            </div>
+
+            <div *ngIf="inventoryManagement" class="col-sm-6" style="text-align: end">
+              <div style="width: 100%;" class="formfieldstyle">
+                <span>{{"Device ID (IMEI No.) *" | translate}} :</span>
+                  <select id="inventory" multiple="multiple">
+                    <option *ngFor="let option_1 of inventory" [value]="option_1.IMEI">{{ option_1.IMEI }}</option>
+                  </select>
+
+                </div>
+            </div>
+
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Vehicle Registration No. *' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="devicename" name="devicename" placeholder="Registration number"
+                  required />
+                <md-error class="required">{{'Vehicle Registration No.' | translate}}</md-error>
+              </md-form-field>
+            </div>
+          </div>
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{"Description" | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="des" name="des" placeholder="{{'Description' | translate}}" />
+              </md-form-field>
+            </div>
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{"SIM Number *" | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="number" minlength="10" maxlength="13"
+                  [(ngModel)]="hrdwr" name="hrdwr" placeholder="SIM Number" required>
+              </md-form-field>
+            </div>
+          </div>
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'SIM Provider' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="SIM_provider" name="hrdwr" placeholder="{{'SIM Provider' | translate}}"
+                  required>
+                <md-error class="required">{{'Enter SIM Provider' | translate}}</md-error>
+              </md-form-field>
+            </div>
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'SIM Number 2' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" maxlength="13" [(ngModel)]="hrdwr2"
+                  name="hrdwr2" placeholder="{{'SIM Number 2' | translate}}">
+              </md-form-field>
+            </div>
+          </div>
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'SIM Provider 2' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="SIM_provider2" name="hrdwr2"
+                  placeholder="{{'SIM Provider 2' | translate}}">
+                <md-error class="required">{{'Enter SIM Provider 2' | translate}}</md-error>
+              </md-form-field>
+            </div>
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Integration ID' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="IntegrationId" placeholder="{{'Integration ID' | translate}}">
+              </md-form-field>
+            </div>
+          </div>
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Driver Name' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="driver" name="driver" placeholder="{{'Driver Name' | translate}}" />
+              </md-form-field>
+            </div>
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Driver contact number' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input (keypress)="click1($event)" onkeydown="call(event)" mdInput type="text" minlength="10" maxlength="10"
+                  [(ngModel)]="dcontact" name="dcontact" placeholder="{{'Driver Contact Number' | translate}}">
+              </md-form-field>
+            </div>
+          </div>
+          
+         
+          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Dealer' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select dealer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                  #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
+                <md-autocomplete #tdAuto0="mdAutocomplete">
+                  <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
+                    <span>{{ group.first_name }} {{ group.last_name }}</span>
+                  </md-option>
+                
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+           
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'User' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select User' | translate}}" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
+                  [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
+                <md-autocomplete #tdAuto="mdAutocomplete">
+                  <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
+                  
+                    <span>{{userName.full_name}}</span>
+                  </md-option>
+                  <md-option *ngIf="costumers.length==0">
+                    <span>No Data Found</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+          </div>
+         
+          <div *ngIf="!showFieldsDealer && showFieldsUser && custtype" class="row"
+            style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'User' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select User' | translate}}" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
+                  [(ngModel)]="userDetail" (ngModelChange)="filterUserStates(userDetail)">
+                <md-autocomplete #tdAuto="mdAutocomplete">
+                  <md-option *ngFor="let userName of datauserSelect" [value]="userName.full_name">
+                    
+                    <span>{{userName.full_name}}</span>
+                  </md-option>
+                  <md-option *ngIf="costumers.length==0">
+                    <span>No Data Found</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+            
+            
+          
+           
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Fast tag Id' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
+              </md-form-field>
+            </div>
+          
+          </div>
+          
+         
+          <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+          
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Device model *' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Device Model*' | translate}}" [mdAutocomplete]="tdAutoDevModel" name="state"
+                  #state="ngModel" [(ngModel)]="deviceModel" (ngModelChange)="filterDeviceModelState(deviceModel)">
+                <md-autocomplete #tdAutoDevModel="mdAutocomplete">
+                  <md-option *ngFor="let model of dataDevModel" [value]="model.modelName">
+                    <span style="font-size:13px;">{{model.modelName}}</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container>
+            </div> -->
+<!--           
+            <div class="col-sm-6" style="text-align: right">
+              <span>{{'Vehicle type *' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select Vehicle type*' | translate}}" [mdAutocomplete]="tdAutoVehicleType"
+                  name="state" #state="ngModel" [(ngModel)]="vehType" (ngModelChange)="filterVehType(vehType)">
+                <md-autocomplete #tdAutoVehicleType="mdAutocomplete">
+                  <md-option *ngFor="let vh of vehicle_Type" [value]="vh.vehicle_name">
+                    <span style="font-size: 13px;">{{vh.vehicle_name}}</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+          </div>
+        
+          <div class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right">
+              <label>{{'Expiration date' | translate}} <span style="color:red">*</span> :</label>
+              <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+                <input id="expDate" [disabled]='showDate' bsDatepicker [bsConfig]="bsConfig" name="Expiration date" mdInput [(ngModel)]="expDate"
+                  type="text" style="width: 40%;height: 65%;background: #f2f2f2;border: none;margin-left: 2%">
+              </md-form-field>
+            </div>
+         
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Group' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select Group' | translate}}" [mdAutocomplete]="tdAuto1" name="state"
+                  #state="ngModel" [(ngModel)]="groupInfo" (ngModelChange)="filtergrpStates(groupInfo)">
+                <md-autocomplete #tdAuto1="mdAutocomplete">
+                  <md-option *ngFor="let group of datagrpSelect" [value]="group.GroupName" (click)="selectMainGrp(group)">
+                    <span>{{ group.GroupName }}</span>
+                  </md-option>
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+          </div>
+          
+          
+        
+          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Fast tag Id' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
+              </md-form-field>
+            </div>
+           
+            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
+              <span>{{'License' | translate}} :</span>
+              <md-select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" style="width: 72%;padding-right: 11%;float: right;padding-top: 0;">
+                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
+              </md-select>
+            </div>
+          </div>
+          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+           
+           
+            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
+             
+              <span>{{'Device Distance Variation' | translate}} :</span>
+              <select style="height: 30px;" [(ngModel)]="selcetedSign">
+                <option value="+">+</option>
+                <option value="-">-</option>
+              </select>
+              <input mdInput
+                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
+                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
+              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+             
+            </div>
+
+            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
+              <span>{{'Installer' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
+                <md-autocomplete #tdAuto0="mdAutocomplete">
+                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+                    <span>{{ group.first_name }} {{ group.last_name }}</span>
+                  </md-option>
+                
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+
+           
+          </div>
+
+          <div *ngIf="showFieldsDealer && showFieldsUser" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Sells Person' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person"
+                  placeholder="{{'Sells Person' | translate}}">
+              </md-form-field>
+            </div>
+
+            </div>
+          
+        
+          <div *ngIf="!showFieldsDealer && showFieldsUser" class="row"
+            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+           
+            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
+              <span>{{'License' | translate}} :</span>
+              <md-select [(ngModel)]="licenseVal" style="width: 72%;padding-right: 6%;float: right;padding-top: 0;">
+                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
+              </md-select>
+            </div>
+
+            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
+              <span>{{'Installer' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
+                <md-autocomplete #tdAuto0="mdAutocomplete">
+                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+                    <span>{{ group.first_name }} {{ group.last_name }}</span>
+                  </md-option>
+                
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+          
+          </div>
+          
+          <div *ngIf="!showFieldsDealer && showFieldsUser" class="row"
+            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
+              <span>{{'Device Distance Variation' | translate}} :</span>
+              <select style="height: 30px;" [(ngModel)]="selcetedSign">
+                <option value="+">+</option>
+                <option value="-">-</option>
+              </select>
+              <input mdInput
+                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
+                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
+              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+            </div>
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Sells Person' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person"
+                  placeholder="{{'Sells Person' | translate}}">
+              </md-form-field>
+            </div>
+          </div>
+          
+          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row"
+            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Fast tag Id' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="fastag" name="fastagid" placeholder="{{'FASTag ID' | translate}}">
+              </md-form-field>
+            </div>
+          
+            <div class="col-sm-6" style="padding-top: 5px;text-align: right;margin-left: 74px;">
+              <span>{{'License' | translate}} :</span>
+              <md-select [(ngModel)]="licenseVal" style="width: 72%;padding-right: 6%;float: right;padding-top: 0;">
+                <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
+              </md-select>
+            </div>
+          </div>
+          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row"
+            style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+           
+          
+            <div class="col-sm-6 row" style="text-align: right;margin-left: 74px;">
+              <span>{{'Device Distance Variation' | translate}} :</span>
+              <select style="height: 30px;" [(ngModel)]="selcetedSign">
+                <option value="+">+</option>
+                <option value="-">-</option>
+              </select>
+              <input mdInput
+                style="background: #ececec;float: right;width: 53%;height: 30px;margin-left: 5px;border: 1px solid #c1c1c1;"
+                type="number" id="name" [(ngModel)]="deviceDistanceVariation">
+              <span style="margin: 6px 2px 1px;font-weight: 700;">%</span>
+            </div>
+
+            <div class="col-sm-6" style="text-align: right;margin-left: -55px;">
+              <span>{{'Installer' | translate}} :</span>
+              <md-input-container style="width: 60%;">
+                <input mdInput placeholder="{{'Select Installer' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+                  #state="ngModel" [(ngModel)]="installer" (ngModelChange)="filtergrpStatess1(installer)">
+                <md-autocomplete #tdAuto0="mdAutocomplete">
+                  <md-option *ngFor="let group of installerSelect" [value]="group.fullName">
+                    <span>{{ group.first_name }} {{ group.last_name }}</span>
+                  </md-option>
+                  
+                </md-autocomplete>
+              </md-input-container>
+            </div>
+          </div>
+
+          <div *ngIf="!showFieldsDealer && !showFieldsUser && !custtype" class="row" style="padding-right: 15%;height: 50px;flex-wrap: inherit;">
+            <div class="col-sm-6" style="text-align: right;">
+              <span>{{'Sells Person' | translate}} :</span>
+              <md-form-field style="width: 60%;">
+                <input mdInput type="text" [(ngModel)]="sellsPerson" name="sells person" placeholder="{{'Sells Person' | translate}}">
+              </md-form-field>
+            </div>
+
+           
+
+          </div> -->
+          <div class="accordion" id="accordionExample">
+            <div class="card" style="margin-left: 61px;margin-top: 23px;margin-right: 151px;">
+              <div class="card-header" id="headingOne">
+                <h2 class="mb-0">
+                  <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                    aria-expanded="true" aria-controls="collapseOne">
+                    Upload Device Image
+                  </button>
+                </h2>
+              </div>
+          
+              <div id="collapseOne" class="collapse collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
+                <div class="card-body">
+
+                  <div class="row">
+                    <div class="col-md-2">
+                      <span>Device Image 1: </span>
+                    </div>
+
+                    <div class="col-md-4">
+                    <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
+                      (change)="onDeviceImageChanged($event)">
+                    </div>
+
+                    <div class="col-md-4">
+                      <i class="fas fa-cloud-upload-alt"
+                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
+                        (click)="onDeviceImageUploadUpload()"></i>
+                    </div>
+
+                  </div>
+
+                  <div class="row">
+                    <div class="col-md-2">
+                      <span>Device Image 2: </span>
+                    </div>
+                  
+                    <div class="col-md-4">
+                      <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
+                        (change)="onDeviceImageChanged($event)">
+                    </div>
+                  
+                    <div class="col-md-4">
+                      <i class="fas fa-cloud-upload-alt"
+                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
+                        (click)="onDeviceImageUploadUpload()"></i>
+                    </div>
+                  
+                  </div>
+
+                  <div class="row">
+                    <div class="col-md-2">
+                      <span>Device Image 3: </span>
+                    </div>
+                  
+                    <div class="col-md-4">
+                      <input style="background: #ececec;width: 80%;margin-left: 5px;border: 1px solid #c1c1c1;" type="file"
+                        (change)="onDeviceImageChanged($event)">
+                    </div>
+                  
+                    <div class="col-md-4">
+                      <i class="fas fa-cloud-upload-alt"
+                        style="color: #4c6ef5;float: left;font-size: 23px;line-height: 2.1rem;cursor: pointer;" title="Upload Image"
+                        (click)="onDeviceImageUploadUpload()"></i>
+                    </div>
+                  
+                  </div>
+                 
+
+                </div>
+              </div>
+            </div>
+            </div>
+          
+          
+          
+          <div class="row">
+            <div class="col-sm-12" style="text-align:center;padding-top:3%">
+              <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(0)"
+                style="cursor:pointer;width: auto;height: 30px;">{{'ADD DEVICE' | translate}}</button>
+            </div>
+          </div>
+          <div style="position: absolute;right: 20%;top: 10%;" class="row" *ngIf="showError0">
+            <div class="col-sm-12">
+              <flash-messages style="float: center;"></flash-messages>
+            </div>
+          </div>
+
+
+
+    </div>
+    <div class="tab-pane" id="tabs-2" role="tabpanel">
+    
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Engine number" | translate}}</label>
+          <input [(ngModel)]="EngineNo" placeholder="{{'Please Enter Engine Number' | translate}}" class="form-control"
+            id="inputEmail4">
+        </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">{{"Type of Vehicle" | translate}}</label>
+            <input [(ngModel)]="typeofVeh" placeholder="{{'Please Enter Type of Vehicle' | translate}}" class="form-control" id="inputEmail4">
+          </div>
+          <div class="form-group col-md-4">
+            <label for="inputEmail4">{{"Manufacturing company" | translate}}</label>
+          <select [(ngModel)]="manufacturingCompany" (ngModelChange)="selectModel($event)"
+           class="form-control">
+            <option value="" selected disabled>Please Manufacturing company</option>
+            <option *ngFor="let item of manufacturingData" [value]="item">{{item}}</option>
+          </select>
+          </div>
+
+      </div>
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Registration date" | translate}}</label>
+          <input  id="vehRegDate" bsDatepicker [bsConfig]="bsConfig" name="VehicleRegDate" placeholder="mm/dd/yyyy"
+            [(ngModel)]="vehRegDate" class="form-control" >
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Date of Manufacturing Year" | translate}}</label>
+          <input id="vehManufacturingYear" bsDatepicker [bsConfig]="bsConfig" name="vehManufacturingYear"
+            placeholder="mm/dd/yyyy" [(ngModel)]="vehManufacturingYear" type="text" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+            <label for="inputEmail4">{{"Last fitness date" | translate}}</label>
+            <input id="lastFitnessDate" bsDatepicker [bsConfig]="bsConfig" name="lastFitnessDate"
+            placeholder="mm/dd/yyyy" [(ngModel)]="lastFitnessDate" type="text" class="form-control">
+        </div>
+      
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"ICCICD Number" | translate}}</label>
+          <input  type="text" [(ngModel)]="iccidNo" placeholder="{{'Please Enter ICCICD Number' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Fitment Date" | translate}}</label>
+          <input id="fitmentDate" bsDatepicker [bsConfig]="bsConfig" name="fitmentDate"
+            placeholder="mm/dd/yyyy" [(ngModel)]="fitmentDate" type="text" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"RTO Number" | translate}}</label>
+          <input class="form-control" placeholder="{{'Please Enter Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+            #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
+          <md-autocomplete #tdAuto0="mdAutocomplete">
+            <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
+              <span>{{ group.RTO_Code }}</span>
+            </md-option>
+          </md-autocomplete>
+        </div>
+      
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Unique ID" | translate}}</label>
+          <input type="text" [(ngModel)]="UIDnumber" placeholder="{{'Please Enter Unique ID' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"CID number" | translate}}</label>
+          <input type="text" [(ngModel)]="CIDNO" placeholder="{{'Please Enter CID number' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Chassis number" | translate}}</label>
+          <input type="text" [(ngModel)]="chassisno" placeholder="{{'Please Enter Chassis number' | translate}}" class="form-control">
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Comapny Name" | translate}}</label>
+          <input type="text"  [(ngModel)]="companyName" placeholder="{{'Comapny Name' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Company Address" | translate}}</label>
+          <input type="text"  [(ngModel)]="companyAddress" placeholder="{{'Please Enter Company Address' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Transport Office City" | translate}}</label>
+          <input type="text" [(ngModel)]="transportOfficeCity" placeholder="{{'Please Enter Transport Office City' | translate}}" class="form-control">
+        </div>
+      
+      
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Transport Office State" | translate}}</label>
+          <input type="text"type="text" [(ngModel)]="transportOfficeState" placeholder="{{'Transport Office State' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Invoice Number" | translate}}</label>
+          <input type="text"  [(ngModel)]="invoice_number" placeholder="{{'Invoice Number' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Invoice Date" | translate}}</label>
+          <input type="text" bsDatepicker  [bsConfig]="bsConfig" name="invoice_date" placeholder="mm/dd/yyyy"
+            [(ngModel)]="invoice_date" type="text"
+            class="form-control">
+        </div>
+      
+      
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"SOS" | translate}}</label>
+          <select [(ngModel)]="numberOfSOS" class="form-control">
+            <option value="" selected disabled>Please select SOS</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">8</option>
+            <option value="9">9</option>
+            <option value="10">10</option>
+            <option value="11">11</option>
+            <option value="12">12</option>
+            <option value="13">13</option>
+            <option value="14">14</option>
+            <option value="15">15</option>
+          </select>
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"'T-pin" | translate}}</label>
+          <input type="text" type="text" [(ngModel)]="tpin" placeholder="{{'T-pin' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Model company" | translate}}</label>
+          <select [(ngModel)]="models" class="form-control">
+            <option value="" selected disabled>Please select Model</option>
+            <option *ngFor="let item of modelData" [value]="item.ModelName">{{item.ModelName}}</option>
+          </select>
+        </div>
+      
+      
+      </div>
+
+      <div class="form-row">
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Colour" | translate}}</label>
+          <input type="text" [(ngModel)]="colour" placeholder="{{'Colour' | translate}}" class="form-control">
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"Transmission" | translate}}</label>
+          <select [(ngModel)]="transmission" class="form-control">
+            <option value="" selected disabled>Please select transmission</option>
+            <option value="auto">auto</option>
+            <option value="manual">manual</option>
+          </select>
+        </div>
+        <div class="form-group col-md-4">
+          <label for="inputEmail4">{{"IMSI" | translate}}</label>
+          <input type="text" [(ngModel)]="Imsi" placeholder="{{'IMSI'| translate}}" class="form-control">
+        </div>
+      
+      
+      </div>
+      
+      
+
+
+      <!-- OLd -->
+ 
+      <!-- <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Engine number' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="EngineNo" placeholder="{{'Engine Number' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Type of Vehicle' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="typeofVeh" placeholder="{{'Type of Vehicle' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height: 45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+      <span>{{'Manufacturing company' | translate}} :</span>
+        <md-select [(ngModel)]="manufacturingCompany" (ngModelChange)="selectModel($event)" style="width: 60%;background: #f2f2f2;">
+          <md-option value="" selected disabled>Please Manufacturing company</md-option>
+          <md-option *ngFor="let item of manufacturingData" [value]="item">{{item}}</md-option>
+        </md-select>
+        </div>
+     
+      <div class="col-sm-6" style="text-align: right">
+        <label>{{'Registration date' | translate}} :</label>
+        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+          <input id="vehRegDate" bsDatepicker [bsConfig]="bsConfig" mdInput name="VehicleRegDate" placeholder="mm/dd/yyyy"
+            [(ngModel)]="vehRegDate" type="text"
+            style="width: 40%;height: 65%;background: #f2f2f2;border: none;margin-left: 2%">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right">
+        <label>{{'Date of Manufacturing Year' | translate}} :</label>
+        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+          <input id="vehManufacturingYear" bsDatepicker [bsConfig]="bsConfig" mdInput name="vehManufacturingYear"
+            placeholder="mm/dd/yyyy" [(ngModel)]="vehManufacturingYear" type="text"
+            style="width: 40%;height: 65%;background: #f2f2f2;">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right">
+        <label>{{'Last fitness date' | translate}} :</label>
+        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+          <input id="lastFitnessDate" bsDatepicker [bsConfig]="bsConfig" mdInput name="lastFitnessDate"
+            placeholder="mm/dd/yyyy" [(ngModel)]="lastFitnessDate" type="text"
+            style="width: 40%;height: 65%;background: #f2f2f2;">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right">
+        <span>{{'ICCICD Number' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="iccidNo" placeholder="{{'ICCICD Number' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right">
+  
+        <label>{{'Fitment Date' | translate}} :</label>
+        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+          <input id="fitmentDate" mdInput bsDatepicker [bsConfig]="bsConfig" name="fitmentDate" [(ngModel)]="fitmentDate"
+            placeholder="mm/dd/yyyy" type="text" style="width: 40%;height: 65%;background: #f2f2f2;">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'RTO Number' | translate}} :</span>
+        <md-input-container style="width: 60%;">
+          <input mdInput placeholder="{{'Select RTO Number' | translate}}" [mdAutocomplete]="tdAuto0" name="state"
+            #state="ngModel" [(ngModel)]="RTO" (ngModelChange)="filtergrpStatess2(RTO)">
+          <md-autocomplete #tdAuto0="mdAutocomplete">
+            <md-option *ngFor="let group of RTOSelect" [value]="group.RTO_Code">
+              <span>{{ group.RTO_Code }}</span>
+            </md-option>
+          </md-autocomplete>
+        </md-input-container>
+      </div>
+      
+     
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Unique ID' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="UIDnumber" placeholder="{{'Unique ID' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'CID number' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="CIDNO" placeholder="{{'CID number' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Chassis number' | translate}} :</span>
+        <md-form-field style="width: 60%">
+          <input mdInput type="text" [(ngModel)]="chassisno" placeholder="{{'Chassis number' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Comapny Name' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="companyName" placeholder="{{'Comapny Name' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Comapny Address' | translate}} :</span>
+        <md-form-field style="width: 60%">
+          <input mdInput type="text" [(ngModel)]="companyAddress" placeholder="{{'Company Address' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Transport Office City' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="transportOfficeCity"
+            placeholder="{{'Transport Office City' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Transport Office State' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="transportOfficeState"
+            placeholder="{{'Transport Office State' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Invoice number' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="invoice_number" placeholder="{{'Invoice Number' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <label>{{'Invoice Date' | translate}} :</label>
+        <md-form-field style="width: 60%;height: 65%;background: #f2f2f2;">
+          <input id="invoice_date" bsDatepicker mdInput [bsConfig]="bsConfig" name="invoice_date" placeholder="mm/dd/yyyy"
+            [(ngModel)]="invoice_date" type="text" style="width: 40%;height: 65%;background: #f2f2f2;">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right; margin-top: 3px;">
+        <span>{{'No. of SOS' | translate}} :</span>
+        <md-select [(ngModel)]="numberOfSOS" style="width: 60%;background: #f2f2f2;">
+          <md-option value="" selected disabled>Please select SOS</md-option>
+          <md-option value="1">1</md-option>
+          <md-option value="2">2</md-option>
+          <md-option value="3">3</md-option>
+          <md-option value="4">4</md-option>
+          <md-option value="5">5</md-option>
+          <md-option value="6">6</md-option>
+          <md-option value="7">7</md-option>
+          <md-option value="8">8</md-option>
+          <md-option value="9">9</md-option>
+          <md-option value="10">10</md-option>
+          <md-option value="11">11</md-option>
+          <md-option value="12">12</md-option>
+          <md-option value="13">13</md-option>
+          <md-option value="14">14</md-option>
+          <md-option value="15">15</md-option>
+        </md-select>
+       
+      </div>
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'T-pin' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="tpin" placeholder="{{'T-pin' | translate}}">
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'E-pin' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="epin" placeholder="{{'E-pin' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right;margin-top: 3px;">
+        <span>{{'Model company' | translate}} :</span>
+        <md-select [(ngModel)]="models"
+          style="width: 60%;background: #f2f2f2;">
+          <md-option value="" selected disabled>Please select Model</md-option>
+          <md-option *ngFor="let item of modelData" [value]="item.ModelName">{{item.ModelName}}</md-option>
+        </md-select>
+      </div>
+    
+    </div>
+    
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'Colour' | translate}} :</span>
+        <md-form-field style="width: 60%;">
+          <input mdInput type="text" [(ngModel)]="colour" placeholder="{{'Colour' | translate}}">
+        </md-form-field>
+      </div>
+      <div class="col-sm-6" style="text-align: right; margin-top: 3px;">
+
+        <span>{{'Transmission' | translate}} :</span>
+        <md-select [(ngModel)]="transmission" style="width: 60%;background: #f2f2f2;">
+          <md-option value="" selected disabled>Please select transmission</md-option>
+          <md-option  value="auto">auto</md-option>
+          <md-option value="manual">manual</md-option>
+        </md-select>
+
+      </div>
+    </div>
+    <div class="row" style="padding-right: 15%;height:45px;flex-wrap: inherit;">
+      <div class="col-sm-6" style="text-align: right;">
+        <span>{{'IMSI' | translate }} :</span>
+        <md-form-field style="width: 60%">
+          <input mdInput type="text" [(ngModel)]="Imsi" placeholder="{{'IMSI'| translate}}">
+        </md-form-field>
+      </div>
+    </div> -->
+    
+    <div class="row">
+      <div class="col-sm-12" style="text-align:center;padding-top:3%">
+        <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(1)"
+          style="cursor:pointer;width: 170px;height: 30px;">{{'UPDATE DEVICE INFO' | translate}}</button>
+      </div>
+    </div>
+    <div style="position: absolute;right: 0;" class="row" *ngIf="showError1">
+      <div class="col-sm-12">
+        <flash-messages style="float: center;"></flash-messages>
+      </div>
+    </div>
+    </div>
+    <div class="tab-pane" id="tabs-3" role="tabpanel">
+    <div class="row">
+      <div class="col-sm-6" style="display: inherit">
+        <p style="padding-top:9px">{{'Add Document field' | translate}}</p>
+        <button mdTooltip="{{'upload Documents' | translate}}"
+          style="border:1px solid transparent; background-color: transparent;cursor:pointer;margin-left: 5px"
+          (click)="AddDocumentsField('addedrow')">
+          <i class="fas fa-plus" style="float: right;width:30px;height:30px;cursor:pointer"></i>
+          <!-- <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon> -->
+        </button>
+      </div>
+    </div>
+    <div style="overflow: auto;overflow-x: hidden;min-height: 200px" [ngClass]="{'rowHeight':docRow}">
+      <div class="row" *ngFor="let data of imageuploadObject; let i = index">
+        <div class="col-sm-3" style="padding-top: 8px;">
+          <md-select (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype"
+            placeholder="{{'Doc Type' | translate}}" style="width:40%">
+            <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+          </md-select>
+          <input type="text" style="margin-right: 2%;" [(ngModel)]="data.phone" placeholder="{{'Doc number' | translate}}">
+        </div>
+        <div class="col-sm-3" style="padding-top: 1.5%">
+          <label>{{'Document issued date' | translate}} :</label>
+          <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
+            placeholder="mm/dd/yyyy" [(ngModel)]="data.docdate" type="text" style="width: 40%">
+        </div>
+        <div class="col-sm-5" style="padding-top: 1%">
+          <span><input type="file" class="btn btn btn-success"
+              style="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;"
+              (change)="onFileChanged($event)"></span>
+          <span><button class="btn btn btn-success" (click)="onUpload(i)">{{uploadStatus}}</button></span>
+          <a href="*">{{'view' | translate}}</a>
+          <span><button mdTooltip="{{'Delete field' | translate}}"
+              style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right"
+              (click)="DeleteDocumentsField(i)">
+              <i class="fas fa-trash-alt"style="float: right;width:50px;height:50px;color:red; cursor:pointer"></i>
+              <!-- <md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon> -->
+            </button></span>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12" style="text-align:center;padding-top:3%">
+        <button class="btn btn-primary btn-block/" (click)="devInformationUpdate(2)"
+          style="cursor:pointer;width: 156px;;height: 30px;">{{'UPDATE AND SAVE' | translate}}</button>
+      </div>
+    </div>
+    <div style="position: absolute;right: 0;" class="col-sm-12">
+      <div class="row" *ngIf="showError2">
+      </div>
+      <flash-messages style="float: center;"></flash-messages>
+    </div>
+    </div>
+    <!-- tab-4 -->
+    <div class="tab-pane" id="tabs-4" role="tabpanel">
+      <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+        <div class="col-sm-12" style="text-align: left;font-size: initial;">
+          <!-- <label >Choose an Excel File:</label>
+                <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
+
+            <!-- <div class="row" style="text-align: center;">
+              <div class="col-md-1"></div>
+                <div class="form-group col-sm-4">
+                  <lable>{{'Expire Validity' | translate}} :</lable>
+                  <select [(ngModel)]="licenseVal" (ngModelChange)="changeLiecence($event)" class="form-control">
+                    <option *ngFor="let license of licenseArr1" [value]="license">{{license}}</option>
+                  </select>
+                </div>
+
+                <div class="form-group col-sm-4">
+                  <lable>{{'Vehicle Category' | translate}} :</lable>
+                  <select [(ngModel)]="vehicleCategory" class="form-control">
+                    <option *ngFor="let license of vehicleCat" [value]="license">{{license}}</option>
+                  </select>
+                </div>
+
+             
+            </div> -->
+            <!-- <div  style="width: 50%;height: 20px;position:absolute;top:-360px">
+              <table id="sample" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th>Device_Name</th>
+                    <th>DeviceID</th>
+                    <th>SimNumber</th>
+                    <th>SimNumber2</th>
+                    <th>SIMProvider</th>
+                    <th>VehicleType</th>
+                    <th>DeviceModel</th>
+                    <th>phone</th>
+                    <th>first_name</th>
+                    <th>last_name</th>
+                    <th>expire_validity</th>
+                  </tr>
+                </thead>
+              </table>
+            
+            
+            </div> -->
+
+          <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+            <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;" class="file-upload btn btn-primary">Browse
+              for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+            </label>
+            <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+              class="btn btn-primary" (click)="uploadExcel()">Upload</button>
+            <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
+              style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
+              class="btn btn-primary">Download Excel</a> -->
+              <a  type="button" (click)="exportExcel()" style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
+              class="btn btn-primary">Download Excel</a>
+          </div>
+        </div>
+      </div>
+      <div class="row" *ngIf="showErrorupload_1">
+        <div class=col-sm-12>
+          <p style="color: red; text-align: center; font-size: 18px;">{{'Duplicate Entries' | translate}}</p>
+          <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+            <thead>
+              <tr>
+                <th>{{'Device Name' | translate}}</th>
+                <th>{{'Device ID' | translate}}</th>
+                <th>{{'Reason' | translate}}</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngFor="let failedDevices of faileduploadDevices">
+                <td style="cursor:pointer">{{failedDevices.Device_Name}}</td>
+                <td style="cursor:pointer">{{failedDevices.Device_ID}}</td>
+                <td style="cursor:pointer">{{failedDevices.Reason}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row" style="position: absolute;right: 0;">
+        <div class="col-sm-12">
+          <flash-messages style="float: center;"></flash-messages>
+        </div>
+      </div>
+    </div>
+
+    <div class="tab-pane" id="tabs-0" role="tabpanel">
+     <app-add-cust></app-add-cust>
+    </div>
+  </div>
+
+  
+  </div>
\ No newline at end of file
diff --git a/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.spec.ts b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.spec.ts
new file mode 100644
index 0000000..f431932
--- /dev/null
+++ b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogContentExampleDialogComponent } from './dialog-content-example-dialog.component';
+
+describe('DialogContentExampleDialogComponent', () => {
+  let component: DialogContentExampleDialogComponent;
+  let fixture: ComponentFixture<DialogContentExampleDialogComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogContentExampleDialogComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogContentExampleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.ts b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.ts
new file mode 100644
index 0000000..2786c85
--- /dev/null
+++ b/src/app/dialog-content-example-dialog/dialog-content-example-dialog.component.ts
@@ -0,0 +1,2183 @@
+import { Component, OnInit } from '@angular/core';
+import { JSONEditor } from 'jsoneditor';
+import { Device } from '../device';
+import { Token } from '../token';
+import { Contact } from '../contact';
+import { MdSnackBar } from '@angular/material';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { ContactService } from '../contact.service';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { Observable, Subject } from 'rxjs/Rx';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
+import { ReportService } from '../report/report.service';
+declare var swal: any;
+// import * as FileSaver from 'file-saver';
+// import * as XLSX from 'xlsx';
+declare var XLSX:any;
+declare var $:any;
+const EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+const EXCEL_EXTENSION = '.xlsx';
+@Component({
+  selector: 'app-dialog-content-example-dialog',
+  templateUrl: './dialog-content-example-dialog.component.html',
+  styleUrls: ['./dialog-content-example-dialog.component.css'],
+  providers: [ContactService, SidebarComponent]
+})
+export class DialogContentExampleDialogComponent implements OnInit {
+  colorTheme = 'theme-dark-blue';
+  bsConfig: Partial<BsDatepickerConfig>;
+  modelChanged: Subject<string> = new Subject<string>();
+  date1=new Date()
+  EngineNo:any;
+  name1;
+  sellsPerson
+  installerData;
+  installer;
+  RTO;
+  RTOObj;
+  ignitionWire:Boolean=true;
+  installerSelect=[];
+  typeofVeh:any;
+  manufacturingCompany:any;
+  UIDnumber:any;
+  iccidNo:any;
+  Imsi:any;
+  device_Id: string;
+  dev: any;
+  SIM_provider:any;
+  SIM_provider2:any;
+  deviceId: any;
+  deviceModel: any;
+  group_info: any;
+  executed2: any;
+  companyName:any;
+  companyAddress:any;
+  groupInfo: any;
+  groupName
+  dealers:any;
+  date = new Date();
+  vehRegDate:any;
+  licenseVal:any='Yearly';
+  licenseArr=['Yearly','Two years','Three years','Lifetime'];
+  licenseArr1=['One Year','Two years'];
+  vehicleCat=['Truck','Bus','Car','School Van'];
+  vehicleCategory="Car"
+  vehManufacturingYear :any;
+  lastFitnessDate : any;
+  fitmentDate :any;
+  invoice_date:any;
+  uploadStatus: any = 'Upload';
+  devices: Device[] = []
+  device: Device
+  fuel_tank_capicity: any;
+  voltage_tank_empty: any;
+  tankfull_capicity: any;
+  tokens: Token[] = []
+  token: Token;
+  docdate:any;
+  expDate:any = new Date(this.date.getFullYear() + 1, this.date.getMonth(), this.date.getDate()).toLocaleString();
+  superAdmin:Boolean = false;
+  userDetail:any;
+  vehType:any;
+  custId: any;
+  deviceInformation: {
+  devicename: any; deviceid: any; des: any; model: any; hrdwr: any;hrdwr2: any; typdev: string; emailid: any; phn: any; sim_number: any; created_by: any;
+    // iconType: this.neww.value,
+    driver_name: any; contact_number: any; vehicleGroup: string;
+    // fuelCapicity: this.fuel_tank_capicity,
+    // voltageTankempity: this.voltage_tank_empty,
+    // tankfullcapicity: this.tankfull_capicity,
+    device_model: any; expdate: Date; vehicleType: string; user: any;
+  };
+  newDevInfo:any;
+  newDevice: any;
+  dataSelect: any[];
+  datagrpSelect: any;
+  dealerData:any
+  datauserSelect: any;
+  numberOfSOS:any;
+  tpin:any;
+  epin:any;
+  colour:any;
+  models:any;
+  transmission:any
+  userObj: any;
+  IntegrationId:any;
+  sup_admin: any;
+  Dealer: any;
+  DealerId: any;
+  CIDNO: any;
+  chassisno:any;
+  transportOfficeCity: any;
+  transportOfficeState: any;
+  invoice_number: any;
+  DeviceModelValue: any;
+  dataDevModel: any[];
+  vehicle_Type: any[];
+    skip: number = 1;
+  limit: number = 100;
+  vehicleTypevalue: any;
+  showCustomer:boolean=true
+  // uploadStatus: any = 'UPLOAD';
+  imageuploadObject = [{doctype:'Adhar card1',image:'',phone:'',docdate:''},
+{doctype:'Adhar card2',image:'',phone:'',docdate:''},
+{doctype:'Warrenty Card',image:'',phone:'',docdate:''},
+{doctype:'vehicle sales invoice',image:'',phone:'',docdate:''},
+{doctype:'vehicle RC',image:'',phone:'',docdate:''},
+{doctype:'vehicle Photo',image:'',phone:'',docdate:''},
+];
+  array=[
+    {
+        "Device_Name": "test1021",
+        "DeviceID": 102123,
+        "SimNumber": 48839,
+        "SimNumber2": 843993,
+        "SIMProvider": "Vodafone",
+        "VehicleType": "6225fe23046ce87675b0cfd4",
+        "DeviceModel": "6110fabd99b02346e558abe9",
+        "phone": 57655656,
+        "first_name": "test",
+        "last_name": "customer",
+        "expire_validity": "One Year/Two Year",
+        "expDate": "2024-03-08T06:16:20.530Z",
+        "superAdmin": "61408bce53c0112864ef594f",
+        "DealerId": "61408bce53c0112864ef594f",
+        "userId": "61408bce53c0112864ef594f",
+        "emailId": "employeetrack@gmail.com",
+        "phone_num": "8434838439"
+    }
+]
+  documentList = [
+    {
+      "docId": "Adhar card1",
+      "docName": "Adhar Card Front"
+    },
+     {
+      "docId": "Adhar card2",
+      "docName": "Adhar Card Back"
+    },
+    {
+      "docId": "vehicle sales invoice",
+      "docName": "vehicle sales invoice"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "vehicle RC",
+      "docName": "vehicle RC"
+    },
+    {
+      "docId": "vehicle Photo",
+      "docName": "vehicle Photo"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Co.registered Card",
+      "docName": "Co.registered Card"
+    },
+    {
+      "docId": "Nepal Citizenship",
+      "docName": "Nepal Citizenship"
+    },
+    {
+      "docId": "Blue Book",
+      "docName": "Blue Book"
+    },
+    {
+      "docId": "Warrenty Card",
+      "docName": "Warrenty Card"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+
+  showError1: boolean;
+  showError2: boolean;
+  showError0: boolean;
+  editDeviceObject: any;
+  uploadJSON: any;
+  showErrorupload: boolean;
+  faileduploadDevices: any;
+  showErrorupload_1: boolean =false;
+  portValue: any;
+  showport: boolean = false;
+  deviceImg=[];
+  dealers_info: any[];
+  myInput: string;
+  dealerObj: any;
+  installerObj:any
+  dealerSelect: any[];
+  RTOSelect:any[]
+  deviceDistanceVariation
+  selcetedSign='+'
+  myaccount() {
+
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+    // let dialogRef = this.dialog.open(MyaccountComponent, {
+    //   width: '903px',
+    //   data: {}
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+
+    //   if(result == "succ"){
+    //     console.log("Updated")
+    //   }
+
+    // });
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+    this.router.navigateByUrl("location");
+
+  } logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon() {
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  }
+
+  vehicleRoute() {
+    this.cond = false
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+  route_map() {
+    this.cond = false;
+    this.router.navigateByUrl("routeMapping");
+
+  }
+
+
+
+  // new_1(){
+  //   this.router.navigateByUrl("new");
+
+  // }
+
+
+
+
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+  }
+
+
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert-report");
+
+  }
+
+  summaryReport() {
+  
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+
+  notifications() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  addgeo() {
+    this.router.navigateByUrl("geofence-add");
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+
+  a() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  addcus() {
+    this.router.navigateByUrl("add");
+  } report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  report_speed() {
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  devicename: any;
+  deviceid: any;
+  des: any;
+  model: any;
+  Des: any;
+  hrdwr: any;
+  hrdwr2: any;
+  typdev: any;
+  Device_ID: string;
+  Serial_Num: string;
+  Manf: string;
+  Model: string;
+  tkstatus: any;
+  value: any;
+  Lo: string;
+  Hardware_Ver: string;
+  Loca: string;
+  temp: any
+  food: any
+  new: any;
+  email: any;
+  message: string;
+  selectedValue: any;
+  show: boolean = false;
+  showFieldsDealer:boolean=false;
+    showFieldsUser:boolean=false;
+
+  /* ../../assets/image/bgtry2.jpg */
+  foods = [
+    { value: 'Smart Switch', viewValue: 'Smart Switch' },
+    { value: 'Tracker', viewValue: 'Tracker' },
+    { value: 'Smart Motor', viewValue: 'Smart Motor' },
+    { value: 'Sensors', viewValue: 'Sensors' },
+  ];
+  foodds = [
+    { value: 'car', viewValue: 'Car' },
+    { value: 'bike', viewValue: 'Bike' },
+    { value: 'truck', viewValue: 'Bus/Truck' },
+  ];
+  cultivoChange(val) {
+
+    if (val.value == "Tracker") {
+      this.show = true
+    }
+    else {
+      this.show = false
+    }
+  }
+
+  back2home() {
+    //console.log("Runnig Back")
+    this.router.navigateByUrl("dashboard");
+
+  }
+
+  constructor(private _formBuilder: FormBuilder, private router: Router, public snackBar: MdSnackBar, private contactService: ContactService, private _flashMessagesService: FlashMessagesService, private sidebar: SidebarComponent, public dialog: MdDialog,private reportService:ReportService) { 
+    this.bsConfig = Object.assign({}, { containerClass: this.colorTheme });
+     this.reportService.addCustomer.subscribe(value => {
+       console.log("INNSJNSKHJBNKDHB");
+       
+         this.ngOnInit()       
+      
+      }); 
+ 
+  }
+  test() {
+    //console.log("Runnig Test")
+    //console.log(this.new.value);
+  }
+
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+  /*  TOKEN GENERATION  */
+  tokenn() {
+    if (this.deviceid == null) {
+
+      this._flashMessagesService.show('Error : Empty Device ID', { cssClass: 'alert-danger', timeout: 2000 });
+      this.tkstatus = 0;
+    }
+    else {
+      // console.log("GENERATING TOKEN")
+      /*  const newToken ={
+         deviceid: this.deviceid,
+         eid: "test@test.com",
+         }
+          this.contactService.addToken(newToken)
+           .subscribe(token => {
+             this.tokens.push(token);
+           });   
+           this.tkstatus=1;  */
+    }
+  }
+
+  /*  ADD DEVICE   */
+
+  mess: any;
+  mess2: any;
+  mess3: any;
+  neww: any;
+  driver: any;
+  before: any;
+  dcontact: any;
+  timer: any;
+  subscription: any;
+  Load: boolean = false
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+
+showDate:boolean=false;
+  
+  addDevice(btnindex) {
+    console.log("In addDevice");
+    
+    if(btnindex == 0){
+      this.showError0 = true;
+    }
+     if(btnindex == 1){
+       this.showError1 = true;
+     }
+     if(btnindex == 2){
+      this.showError2 = true;
+    }
+    if(this.inventoryManagement){
+      this.deviceid=$('#inventory').multipleSelect('getSelects','value');
+    }
+  
+    if (this.deviceid == null) {
+console.log("1");
+
+      this._flashMessagesService.show('Error : Empty Device ID', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false ; 
+      return
+    }
+    else if ((this.devicename == null) ||(this.devicename == undefined)) {
+      console.log("2");
+      this._flashMessagesService.show('Error : Empty Device Name', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false ; 
+      return
+    }
+    else if (this.hrdwr == null) {
+      console.log("3");
+      this._flashMessagesService.show('Error : Empty SIM Number', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false ; 
+      return ; 
+    }else if((!this.DeviceModelValue)||(this.dataDevModel.length ==0)||(this.DeviceModelValue  == undefined)){
+      console.log("4");
+      this._flashMessagesService.show('Error : Select Device model ', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false ; 
+      return ; 
+    }
+    else {
+      console.log("In Else Block");
+      
+      this.Load = true
+      // console.log(this.groupInfo);
+      if(this.custtype==true){
+        var owner = this.useridd;
+      }else {
+        var owner = this.dealerId?typeof(this.dealerId)=="object"?this.dealerId._id:this.dealerId:this.useridd;
+      }
+
+
+      // console.log(this.expDate)
+   
+      // console.log("userDetailTopass",this.userDetail._id);
+      // console.log("vehdata",this.vehType._id)
+      //this._flashMessagesService.show('Congratulation Device Added as '+this.deviceid, { cssClass: 'alert-success', timeout: 2000 });
+      this.newDevice = {
+        devicename: this.devicename,
+        deviceid: this.deviceid,
+        des: this.des,
+        model: this.model,
+        hrdwr: this.hrdwr,
+        typdev: "Tracker",
+        emailid: this.emailid,
+        Mileage : "10",
+        phn: this.phoneno,
+        sim_number: this.hrdwr,
+        created_by: owner,
+        supAdmin: this.sup_admin,
+        driver_name: this.driver,
+        contact_number: this.dcontact,
+        device_model: this.DeviceModelValue,
+        expdate: new Date(this.expDate),
+        License : this.licenseVal,
+        deviceDistanceVariation:this.selcetedSign+(this.deviceDistanceVariation?this.deviceDistanceVariation:'0')
+
+        // Dealer:this.dealerObj?this.dealerObj:this.sup_admin
+      }
+      if(this.inventoryManagement){
+         this.newDevice['inventoryManagement']=this.inventoryManagement;
+      }
+      if(this.ignitionWire==true){
+         this.newDevice['ignWire']=this.ignitionWire;
+         this.newDevice['ignDetection']="ACC"
+      }else{
+        this.newDevice['ignWire']=this.ignitionWire;
+         this.newDevice['ignDetection']="MOVEMENT"
+      }
+      if(this.sellsPerson){
+        this.newDevice['sellsPerson']=this.sellsPerson;
+      }
+      if(this.installerObj){
+         this.newDevice['installer'] =this.installerObj
+      }
+
+
+      
+      if (this.custtype) {
+        this.newDevice['Dealer'] = this.useridd;
+      } else if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON') ) {
+        this.newDevice['Dealer'] = this.DealerId
+      }else{
+        this.newDevice['Dealer'] =this.dealerObj?this.dealerObj:this.sup_admin
+      }
+
+      if((this.custId==undefined)&&(this.userObj==undefined)){
+        this.newDevice['user'] = this.useridd
+        // var userID= this.useridd;
+  
+      }else if((this.custId)&&(this.userObj==undefined)){
+        this.newDevice['user'] = this.custId
+        // var userID= this.custId;
+      }
+      else{
+        this.newDevice['user'] = this.userObj;
+        // var userID= 
+      }
+
+      if(this.EngineNo){
+        this.newDevice['engineNo'] = this.EngineNo;
+      }
+
+      if(this.CIDNO){
+        this.newDevice['CID_No'] = this.CIDNO;
+      }
+
+      if(this.fastag){
+        this.newDevice['fastag'] = this.fastag;
+      }
+
+      if(this.licenseVal === 'Lifetime'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 5;
+        eDate.setFullYear(LifeTimeyear);
+        this.newDevice['expdate'] = new Date(eDate);
+        
+      }
+      
+      if(this.licenseVal === 'Two years'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 2;
+        eDate.setFullYear(LifeTimeyear);
+        this.newDevice['expdate'] = new Date(eDate);
+       
+      }
+      if(this.licenseVal === 'Three years'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 3;
+        eDate.setFullYear(LifeTimeyear);
+        this.newDevice['expdate'] = new Date(eDate);
+        
+      }
+      if(this.licenseVal === 'One Year'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 1;
+        eDate.setFullYear(LifeTimeyear);
+        this.newDevice['expdate'] = new Date(eDate);
+        
+      }
+
+
+
+
+      if(this.chassisno){
+        this.newDevice['ChassisNo'] = this.chassisno;
+      }
+      if(this.manufacturingCompany){
+       this.newDevice['manufacturingCompany'] = this.manufacturingCompany;
+      }
+      if(this.UIDnumber){
+        this.newDevice['uniqueID'] = this.UIDnumber;
+      }
+      if(this.iccidNo){
+        this.newDevice['ICCICD'] = this.iccidNo;
+      }
+      if(this.Imsi){
+        this.newDevice['IMSI'] = this.Imsi;
+      }
+
+      if(this.vehRegDate){
+        this.newDevice['vehicleRegDate'] = new Date(this.vehRegDate);  
+      }
+
+
+      if(this.typeofVeh){
+        this.newDevice['typeOfVehicle'] = this.typeofVeh;  
+      }
+
+
+      
+      if(this.vehManufacturingYear){  
+        this.newDevice['vehicleManufacturingDate'] = new Date(this.vehManufacturingYear);
+      }
+
+      if(this.lastFitnessDate){
+        this.newDevice['lastFitnessDate'] = new Date(this.lastFitnessDate);
+      }
+
+      if(this.fitmentDate){
+        this.newDevice['fitmentDate'] = new Date(this.fitmentDate);
+      }
+       
+      if(this.invoice_date){
+        this.newDevice['invoice_date'] = new Date(this.invoice_date);
+      }
+
+      if(this.invoice_number){
+        this.newDevice['invoice_number'] = this.invoice_number;
+      }
+
+
+
+
+      if(this.IntegrationId){
+        this.newDevice['integrationId'] = this.IntegrationId;
+      }
+      if(this.companyName){
+        this.newDevice['companyName'] = this.companyName;
+      }
+      if(this.companyAddress){
+        this.newDevice['companyAddress'] = this.companyAddress;
+      }
+      if(this.transportOfficeCity){
+        this.newDevice['transportOfficeCity'] = this.transportOfficeCity;
+      }
+      if(this.transportOfficeState){
+        this.newDevice['transportOfficeState'] = this.transportOfficeState;
+      }
+
+      if(this.numberOfSOS){
+        this.newDevice['numberOfSOS'] = this.numberOfSOS;
+      }
+      if(this.epin){
+        this.newDevice['epin'] = this.epin;
+      }
+      if(this.tpin){
+        this.newDevice['tpin'] = this.tpin;
+      }
+     if(this.colour){
+        this.newDevice['colour'] = this.colour;
+      }
+       if(this.models){
+        this.newDevice['model'] = this.models;
+      }
+       if(this.transmission){
+        this.newDevice['transmission'] = this.transmission;
+      }
+
+      if(this.SIM_provider==undefined){
+        this.newDevice;
+      }else{
+        this.newDevice.sim_provider = this.SIM_provider;
+      }
+
+      if(this.SIM_provider2==undefined){
+        this.newDevice;
+      }else{
+        this.newDevice.sim_provider2 = this.SIM_provider2;
+      }
+
+      if(this.hrdwr2==undefined){
+        this.newDevice;
+      }else{
+        this.newDevice.sim_number2= this.hrdwr2;
+      }
+
+      if (this.grpObject == undefined) {
+        this.newDevice;
+
+      } else {
+        this.newDevice.vehicleGroup = this.grpObject.devId;
+        this.newDevice.groupName=this.grpObject.GroupName;
+      }
+
+      if(this.deviceImg != undefined){
+        this.newDevice['deviceImage'] = this.deviceImg; 
+      }
+
+      if ((!this.vehicleTypevalue) || (this.vehicle_Type.length == 0)|| (this.vehicleTypevalue == undefined)) {
+        this._flashMessagesService.show('Error : Select Vehicle type', { cssClass: 'alert-danger', timeout: 2000 });
+        this.Load = false;
+        return;
+      } else {
+        this.newDevice.vehicleType = this.vehicleTypevalue;
+      }
+
+      console.log("imageuploadDocument",this.imageuploadObject);
+      if((this.imageuploadObject.length !=0)&&(btnindex == 2)){
+        this.newDevice['imageDoc'] = this.imageuploadObject ;
+      }
+      console.log("=======>",this.newDevice,this.dealerData,this.userObj,this.DealerId,this.sup_admin)
+       this.Load = false;
+      this.contactService.addDevice(this.newDevice)
+        .subscribe((device) => {
+          window.localStorage['DataUpdate'] = 'True';
+          this.sidebar.sidebarData();
+          // console.log("deviceAdded", device);
+          this.timer = Observable.timer(100, 100);
+          this.subscription = this.timer.subscribe(t => {
+            if (window.localStorage['DataUpdate'] == 'False') {
+              window.localStorage['FinalAddDevice'] = 'True'
+              this.subscription.unsubscribe();
+              this.Load = false;
+              this.router.navigateByUrl("dashboard");
+            }
+            this.Load = false
+          })
+          this.router.navigateByUrl("dashboard");
+          // this.devices.push(device);
+        }, (err: any) => {
+          // console.log(err.status);
+          // console.log(err);
+          var that = this;
+          if (err.status == 400) {
+              console.log(JSON.parse(err._body).deviceObj);
+            var dupObj = JSON.parse(err._body).deviceObj ; 
+              this.Load = false;
+             var devicesupAdmin = dupObj.supAdmin;
+              var deviceDealer = dupObj.Dealer;
+              var devOwner = dupObj.user;
+              debugger;
+            if((this.useridd === devicesupAdmin)||(this.useridd === deviceDealer)||(this.useridd===devOwner)){
+              swal({
+                title: 'Duplicate Entry',
+                text: "The Device ID already exists in our system, do you want to delete this it ?",
+                type: 'error',
+                showCancelButton: true, 
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                cancelButtonText: 'NO',
+                confirmButtonText: 'Yes'
+              }).then((result1) => {   
+                if (result1) {   
+                    console.log(result1);
+                    that.contactService.deletePermanently(that.deviceid)
+                    .subscribe(res => {
+                        // console.log(res);
+                        that._flashMessagesService.show("Device Deleted", { cssClass: 'alert-success', timeout: 2000 });      
+                    }, err => {
+                      if(err.status==401){
+                         that._flashMessagesService.show("Access Denied", { cssClass: 'alert-warning', timeout: 2000 });
+                      }else
+                        that._flashMessagesService.show("Internal Server Error", { cssClass: 'alert-warning', timeout: 2000 }); 
+                        // console.log(err);
+                    })
+                    
+                }
+              },err=>{
+                console.log(err);
+                if(err == 'cancel'){
+                    console.log('cancel clicked');
+                }
+              }) 
+              console.log("Error");
+
+            }else{
+
+              swal("Duplicate Entry", "This device is already added to the system and its not associated with you account, Contact admin.", "error");
+            }
+
+            // this._flashMessagesService.show(this.mess2 + this.mess3 + " Duplicate Entry", { cssClass: 'alert-danger', timeout: 3000 });
+       
+        
+          }
+          else {  
+            var message
+            if(err.status==401){
+              message="Access Denied !!!"
+
+            }else{
+               message="Network Error !!!"
+            }
+            console.log(err);
+            
+            this._flashMessagesService.show(message, { cssClass: 'alert-danger', timeout: 2000 });
+            this.Load = false
+          }
+        }
+        );
+
+    }
+
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+  click1(event) {
+
+    if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+
+    else
+      event.preventDefault();
+  }
+  fs: any;
+  ls: any;
+  or: any;
+  userid: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  cust: boolean = true;
+  isLinear = false;
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+  phoneno: any;
+  logo: any;
+  text: any;
+  dealerId:any;
+  ideal() {
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  mb: any
+  logoutbut: boolean;
+  dealer: boolean;
+  groups = [];
+  ngOnInit() {
+    let that = this;
+    this.neww = this.foodds[0];
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer_ID;
+    var temp =JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    console.log(temp);
+    // this.testTable()
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+   
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+    // console.log("superAdmin=>",this.sup_admin);
+  
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custId = localStorage.getItem('custId');
+
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    console.log(this.custtype);
+    
+
+    if((this.custtype == false)&&(window.localStorage['Custumer'] == 'ON')){
+   this.showCustomer=false;
+       this.DealerId =  JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1]))._id;  
+       console.log("DealerID",this.DealerId) 
+    }
+  
+    
+    // this.superadmin
+    //this.getdev();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+//     $(".sel").change(function(){
+
+//     var selValue = $(this).val();
+
+//     alert(selValue);
+
+// });
+$(document).on('change','#inventory',function() {
+    var value = $('#inventory').val();
+    for(var i=0;i<that.inventory.length;i++){
+      if(value==that.inventory[i].IMEI){
+        that.hrdwr=that.inventory[i].Mob1
+        that.hrdwr2=that.inventory[i].Mob2
+      }
+    }
+   
+});
+
+    
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.getInstallerData()
+    $("#excelFile").change(function(e){
+      let _e:any = e;
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+      
+         
+       that.uploadJSON=d.map(function(d){  
+        console.log(d);
+        var exp=new Date();
+        if(d.expire_validity=="One Year"){
+          
+        var LifeTimeyear = exp.getFullYear() + 1;
+        exp.setFullYear(LifeTimeyear);
+        d.expDate = new Date(exp);
+        }else{
+        var LifeTimeyear = exp.getFullYear() + 2;
+        exp.setFullYear(LifeTimeyear);
+        d.expDate = new Date(exp);
+        }
+          // var splitDeviceModel = d.DeviceModel.split("(")[1].split(")")[0];
+        
+          // var splitvehicletype = d.VehicleType.split("(")[1].split(")")[0];
+      
+        d.SIMProvider  = "Vodafone";
+        // d.DeviceModel = splitDeviceModel;
+        // d.VehicleType = splitvehicletype;     
+        d.superAdmin =   that.sup_admin;
+        d.DealerId = (that.custtype==true) ? that.useridd : that.sup_admin ;
+        d.userId = that.useridd;
+        d.emailId =that.emailid;
+        d.phone_num =that.mb;
+       
+        return d;
+        });
+        console.log("file=>",that.uploadJSON);
+     
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+     this.contactService.getDevice(this.emailid, this.useridd)
+      .subscribe(devices => this.devices = devices);
+        this.tkstatus = 0;
+    // console.log(this.devices);
+
+
+    this.groups = [];
+    this.contactService.getGroup(this.useridd).subscribe(
+      res => {
+        // console.log(res);
+
+        this.group_info = res["group_details"];
+        // console.log(this.group_info);
+     
+        for (var i = 0; i < this.group_info.length; i++) {
+          let group_logs = this.group_info[i];
+          // console.log(group_logs);
+          let group_name = group_logs.name;
+          let status = group_logs.status;
+          let date = new Date(group_logs.last_modified);
+          let d = date.toLocaleDateString();
+          this.deviceId = group_logs._id;
+
+          this.groups.push({
+            "GroupName": group_name,
+            "Status": status,
+            "created_date": d,
+            "Vehicles": this.dev,
+            "devId": this.deviceId,
+          })
+        }
+        // console.log(this.groups);
+
+      });
+
+     console.log("dskfdshfkdsgndfgk;dfgjhfkgdfntgkjdbnfdjk",localStorage.getItem('deviceforedit'));
+     var objectforedit = localStorage.getItem('deviceforedit')?localStorage.getItem('deviceforedit'):null;
+   this.loadropdown()
+    // this.updateFieldswithvalue(objectforedit);
+    this.getDeviceModel();
+    this.getUser(this.useridd);
+    this.getvehDetail();
+     this.getUserSetting(this.useridd);
+     this.getRTOData()
+     this.getModelData()
+    // this.modelChanged
+    //   .debounceTime(1000) // wait 300ms after the last event before emitting last event
+    //   .distinctUntilChanged() // only emit if value is different from previous value
+      // super==on and dealer==on and cust=?---dealer
+      //super=?
+      //cistomer== three on super==false, dealer=false
+
+      // condition For SuperAdmin
+
+
+
+      // if((!localStorage.getItem('superadmin')) || (localStorage.getItem('superadmin')=='ON' && localStorage.getItem('Dealer')=='OFF' && 
+      // localStorage.getItem('Custumer')=='OFF') ||(localStorage.getItem('superadmin')=='ON' && localStorage.getItem('Dealer')=='OFF' && localStorage.getItem('Custumer')=='OFF') )
+      if(this.superAdmin)
+      {
+        console.log("1");
+        
+            this.showFieldsDealer=true
+           this.showFieldsUser=true; 
+      }
+       if(((localStorage.getItem('superadmin')=='ON' || (!localStorage.getItem('superadmin'))) && localStorage.getItem('Dealer')=='ON' && localStorage.getItem('Custumer')=='OFF' || (!localStorage.getItem('Custumer'))) && !this.superAdmin )
+      {console.log("2");
+          this.showFieldsDealer=false
+           this.showFieldsUser=true; 
+      } 
+      if(this.superAdmin==true && this.custtype==true){
+        console.log("3");
+         this.showFieldsDealer=true;
+           this.showFieldsUser=true; 
+      }  
+      if(this.superAdmin==false && this.custtype==true){
+        console.log("4");
+         this.showFieldsDealer=false;
+           this.showFieldsUser=true; 
+      }
+      if(this.superAdmin==false && this.custtype==false){
+        console.log("4");
+         this.showFieldsDealer=false;
+           this.showFieldsUser=false; 
+      }
+      // else{
+      //   console.log("5");
+      //    this.showFieldsDealer=false;
+      //      this.showFieldsUser=false; 
+      // }
+      console.log(this.showFieldsDealer,this.showFieldsUser,this.superAdmin);
+      
+       this.dealerDetail();
+     
+
+
+  }
+  RTOData
+  getRTOData(){
+    this.contactService.get('/RTO_master/get').subscribe((res:any)=>{
+      this.RTOData=res
+    })
+  }
+  manufacturingData
+  getModelData(){
+     this.contactService.get('/model_master/GetNames').subscribe((res:any)=>{
+      this.manufacturingData=res
+    })
+  }
+
+   loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#inventory').multipleSelect({
+        width: 380,
+        placeholder: 'Select IMEI',
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+  fuel_calibration() {
+    // console.log("Inside fuel Callibration !!!");
+    if (this.fuel_tank_capicity == null) {
+
+      this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false
+    }
+    else if (this.voltage_tank_empty == null) {
+      this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false
+    }
+    else if (this.tankfull_capicity == null) {
+      this._flashMessagesService.show('Error : Empty entry', { cssClass: 'alert-danger', timeout: 2000 });
+      this.Load = false
+    }
+
+
+    const fuelCapicity = {
+      fuelCapacity: this.fuel_tank_capicity,
+      voltageTankempty: this.voltage_tank_empty,
+      tankfullcapacity: this.tankfull_capicity,
+
+    }
+
+    // console.log(fuelCapicity);
+  }
+
+
+
+  device_Model: any;
+  getDeviceModel() {
+    this.contactService.getDevModel()
+      .subscribe(res => {
+        this.device_Model = res;
+        var devname = [];
+        console.log("Device_Model",this.device_Model);
+        for(var i = 0 ; i<this.device_Model.length;i++){
+          var a = {
+            model :this.device_Model[i].device_type,
+            id : this.device_Model[i]._id
+          }
+          var modelName;
+        
+          if(this.device_Model[i].deviceport != undefined){
+            modelName = this.device_Model[i].device_type + " " + "(Port : " + this.device_Model[i].deviceport + ")";
+         
+          }else{
+            modelName = this.device_Model[i].device_type;
+          }
+          this.device_Model[i].modelName = modelName ; 
+          devname.push(a);
+        }
+        console.log('this.device_Model',this.device_Model);
+        console.log(devname);
+      })
+  }
+  inventoryManagement:Boolean=false;
+  inventory=[]
+  getUserSetting(userId){
+    
+    this.contactService.post('/users/get_user_setting',{uid: userId}).subscribe((res:any)=>{
+      this.inventoryManagement=res.inventoryManagement;
+      if(this.inventoryManagement){
+        console.log(this.useridd,this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer);
+        var isDealer=this.dealerId=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer
+        var user=isDealer?this.useridd:this.sup_admin
+        console.log(user);
+        
+        this.contactService.get('/Device_inventory/getInventory?user='+user).subscribe((res:any)=>{
+          this.inventory=res;
+          this.loadropdown()
+        })
+      }
+    })
+  }
+  
+  costumers:any;
+  getUser(userId){
+    this.datauserSelect=[]
+    this.costumers=[]
+    this.contactService.getContactsbyDealer(userId)
+    .subscribe(res=>{
+      // console.log("Alluserobject",res);
+      this.costumers = res;
+      for(var i =0; i<this.costumers.length;i++){
+        var n = this.costumers[i].first_name + " " + (this.costumers[i]?this.costumers[i].last_name:"") +(this.costumers[i]?this.costumers[i].user_id?" ("+this.costumers[i].user_id+")":"":"");
+        this.costumers[i].full_name = n; 
+      }
+
+      // console.log("new costumer Object",this.costumers);  
+
+    })
+  }
+ vehData:any;
+getvehDetail(){
+  this.contactService.getvehType(this.useridd)
+    .subscribe(res=>{
+      // console.log(res);
+      this.vehData=res;
+      var vdata = res;
+      for(var a = 0;a<this.vehData.length;a++){
+          var vehtypename = vdata[a].brand + " " + vdata[a].model;
+          this.vehData[a].vehicle_name = vehtypename;
+      }
+       console.log("allveh",this.vehData);
+    })
+}
+
+
+filtergrpStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+ 
+  if (val) {
+
+    const filtergrpValue:any = val;
+    this.datagrpSelect=[];
+     this.datagrpSelect = this.groups.filter(function(g){
+      var c = g.GroupName.toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+
+      return c > -1;    
+    });
+      // console.log(this.datagrpSelect);
+      return this.datagrpSelect;
+  }
+
+}
+filtergrpStatess(val) {
+
+  console.log(val)
+  // console.log(this.options)
+ 
+  if (val) {
+this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.dealerSelect=[];
+     this.dealerSelect = this.dealers_info.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.dealerData){
+      for(let i=0;i<this.dealers_info.length;i++){
+        if(this.dealers_info[i].fullName==this.dealerData){
+          this.dealerObj=this.dealers_info[i]._id
+          console.log(this.dealers_info[i]);
+          
+          this.getUser(this.dealers_info[i]._id)
+        }
+      }
+    }
+      console.log(this.dealerSelect,this.dealerData, this.dealerObj);
+      return this.dealerSelect;
+  }
+
+}
+
+filtergrpStatess1(val) {
+  console.log(val)
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.installerSelect=[];
+     this.installerSelect = this.installerData.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.installer){
+      for(let i=0;i<this.installerData.length;i++){
+        if(this.installerData[i].fullName==this.installer){
+          this.installerObj=this.installerData[i]._id
+          console.log(this.installerData[i]);
+          
+          // this.getUser(this.installerData[i]._id)
+        }
+      }
+    }
+      console.log(this.installerSelect,this.installer, this.installerObj);
+      return this.installerSelect;
+  }
+
+}
+
+filtergrpStatess2(val) {
+  console.log(val)
+  if (val) {
+// this.userDetail=undefined
+    const filtergrpValue:any = val;
+
+    this.RTOSelect=[];
+     this.RTOSelect = this.RTOData.filter(function(g){
+     
+      var c = (g.RTO_Code).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.RTO){
+      for(let i=0;i<this.RTOData.length;i++){
+        if(this.RTOData[i].RTO_Code==this.RTO){
+          this.transportOfficeCity=this.RTOData[i].city;
+          this.transportOfficeState=this.RTOData[i].state
+
+          this.RTOObj=this.RTOData[i]._id
+          console.log(this.RTOData[i]);
+          
+          // this.getUser(this.RTOData[i]._id)
+        }
+      }
+    }
+      console.log(this.RTOSelect,this.RTO, this.RTOObj);
+      return this.RTOSelect;
+  }
+
+}
+
+grpObject:any;
+selectMainGrp(grp){
+this.grpObject=grp;
+console.log(this.grpObject);
+
+}
+// selectDealer(value){
+//   if(value){  
+//   this.DealerId=value
+//   console.log("value",this.DealerId);
+//   this.getUser(this.DealerId);
+//   }
+  
+// }
+
+selectedDevModel(devModel){
+  this.DeviceModelValue = devModel;
+  console.log('this.DeviceModelValue',this.DeviceModelValue);
+  console.log(this.DeviceModelValue);
+}
+
+filterUserStates(userVal){
+  // console.log(userVal)
+  // console.log(this.options)
+ 
+  if (userVal) {
+
+    const filteruserValue:any = userVal;
+    this.datauserSelect=[];
+    console.log("testCostumer=>",this.costumers);
+     this.datauserSelect = this.costumers.filter(function(d){
+      var t = d.first_name.toLocaleLowerCase().indexOf(filteruserValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+
+      return t > -1;    
+    });
+    //  if(this.userObj){
+      for(let i=0;i<this.costumers.length;i++){
+        if(this.costumers[i].full_name==this.userDetail){
+          console.log(this.costumers[i]);
+          
+          this.userObj=this.costumers[i]._id
+        // }
+      }
+    }
+      console.log(this.datauserSelect,this.userObj,this.userDetail);
+    
+      return this.datauserSelect;
+}
+
+}
+
+filterDeviceModelState(devModelVal){ 
+  if(devModelVal == ''){
+    this.dataDevModel=[];
+  }
+  
+  if (devModelVal) {
+ 
+    const filterDevModelVal:any = devModelVal;
+    this.dataDevModel=[];
+      // console.log('device_model' , this.device_Model);
+     this.dataDevModel = this.device_Model.filter(function(k){
+      // console.log('devicemodel object=>',k)
+      var z = k.modelName.toLocaleLowerCase().indexOf(filterDevModelVal.toLocaleLowerCase());
+    
+
+      return z > -1;    
+    });
+    for(let i=0;i<this.device_Model.length;i++)
+    {
+      if(this.device_Model[i].modelName==this.deviceModel){
+        this.DeviceModelValue=this.device_Model[i]._id
+        console.log("Device Model",this.device_Model[i]._id);
+      }
+    }    
+      
+      return this.dataDevModel;
+}
+
+}
+
+selectvehType(v_type){
+  
+  this.vehicleTypevalue = v_type;
+  console.log("vehicletypevalue",this.vehicleTypevalue)
+
+}
+
+filterVehType(vehicle_type){
+  console.log("vehicle_type",vehicle_type);
+  if(vehicle_type == ''){
+    this.vehicle_Type=[];
+  }
+
+  if (vehicle_type) {
+    const filtervehTypevalue:any = vehicle_type;
+    this.vehicle_Type=[];
+    console.log("vehicle Array=>",this.vehData);
+     this.vehicle_Type = this.vehData.filter(function(tt){    
+      var vt = tt.vehicle_name.toLocaleLowerCase().indexOf(filtervehTypevalue.toLocaleLowerCase());
+   
+      return vt > -1;    
+    });
+    for(let i=0;i<this.vehData.length;i++){
+      if(this.vehData[i].vehicle_name==this.vehType){
+        this.vehicleTypevalue=this.vehData[i]._id
+      }
+    }
+  
+      return this.vehicle_Type;
+}
+}
+
+// neww-------------------
+
+
+
+
+selectMainUser(userSelect){
+  this.userObj = userSelect;
+  // console.log(this.userObj)
+}
+
+deleteDoc(doc,index){
+  console.log(index);
+  console.log(doc);
+
+}
+// imageuploadObject = [{doctype:'',image:'',phone:'',docdate:''}];
+disableDelete: boolean;
+showUpload: boolean=false;
+ifuploadArr: boolean ;
+Adddocuments(doc:any){
+  console.log(doc);
+  this.disableDelete = true;
+  this.showUpload = true;
+  if(this.imageuploadObject.length == 0){
+    this.ifuploadArr = false;
+  }
+}
+
+docRow:boolean=false;
+AddDocumentsField(addedRow:any){
+  console.log("Inside function !!!");
+    if(addedRow){    
+      this.docRow = true;
+    }
+    
+     var obj={doctype:'',image:'',phone:'',docdate:''};
+     this.imageuploadObject.push(obj);
+     console.log(this.imageuploadObject);
+    // console.log("ImageuploadObject=>",this.imageuploadObject);
+}
+
+DeleteDocumentsField(index){
+  console.log(this.imageuploadObject.length);
+  if(this.imageuploadObject.length == 1){
+    this.docRow = false;
+    this.showUpload = false;
+  }
+  this.imageuploadObject.splice(index, 1);
+
+}
+
+documentType(docType){
+  console.log("doctypeObject=>",docType);
+
+}
+selectedFile: File;
+onFileChanged(event) { 
+  this.selectedFile = <File>event.target.files[0];
+  console.log(this.selectedFile); 
+}
+
+onUpload(imgIndex) {
+  console.log(imgIndex);
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+  console.log("selected file name =>",this.selectedFile.name);
+  if(this.selectedFile.name == " "){
+    swal(
+      'Upload Error',
+      'Please select document type before upload !!!',
+      'error'
+    )
+  }else{
+    fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      this.imageuploadObject[imgIndex].image = resImage;
+       console.log(this.imageuploadObject);
+      // console.log(res);
+    },err=>{
+      this.Load= false;
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+    })
+  }
+ }
+
+ devInformationUpdate(btnpress){
+   if(btnpress == 0){
+      // swal({
+      //   title: 'Are you sure ?',
+      //   text: "Do you want to add additional information ?",
+      //   type: 'success',
+      //   showCancelButton: true,
+      //   confirmButtonColor: '#3085d6',
+      //   cancelButtonColor: '#d33',
+      //   cancelButtonText: 'NO',
+      //   confirmButtonText: 'Yes'
+      // }).then((result) => {
+      //   console.log(result);
+      //   if (result) {   
+      //     console.log(result);
+      //   }
+      // },err=>{
+      //   console.log(err);
+      //   if(err == 'cancel'){
+          this.addDevice(btnpress);
+      //   }
+      // }) 
+   }
+
+   if(btnpress == 1){
+      // swal({
+      //   title: 'Are you sure ?',
+      //   text: "Do you want to upload device document now ?",
+      //   type: 'warning',
+      //   showCancelButton: true,
+      //   confirmButtonColor: '#3085d6',
+      //   cancelButtonColor: '#d33',
+      //   cancelButtonText: 'No',
+      //   confirmButtonText: 'Yes'
+      // }).then((result: { value: boolean; }) => {
+      //   console.log(result);
+      //   if (result) {
+      //    console.log(result);
+         
+      //   }
+      // },err=>{
+      //   console.log(err);
+      //   if(err == 'cancel'){
+          this.addDevice(btnpress);
+      //   }
+      // }) 
+   }
+
+   if(btnpress == 2){
+      // swal({
+      //   title: 'Document uploaded Successfully',
+      //   text: "Are you sure to add Device ?",
+      //   type: 'warning',
+      //   showCancelButton: true,
+      //   confirmButtonColor: '#3085d6',
+      //   cancelButtonColor: '#d33',
+      //   confirmButtonText: 'Yes, add it!'
+      // }).then((result: { value: boolean; }) => {
+      //   console.log(result);
+      //   if (result) {
+          this.addDevice(btnpress);
+      //   }else{
+      //     console.log("no clicked");
+      //   }
+      // })
+   }
+   
+  }
+  dealerDetail() {
+    this.Load = true;
+   console.log("Inside function");
+  //  this.contactService.dealer_Info1(this.useridd,1,10000,2,null)
+ this.contactService.dealer_Info1(this.useridd, this.skip, this.limit,this.myInput,null)    
+   .subscribe(res => {
+        // console.log(res);
+        this.Load = false ;
+        this.dealers_info = res;
+        for(let i=0;i<this.dealers_info.length;i++){
+          this.dealers_info[i].fullName=this.dealers_info[i].first_name+' '+this.dealers_info[i].last_name;
+        }
+        console.log('this.dealers_info',this.dealers_info);
+      }, err => {
+        this.Load = false;
+        this.dealers_info=[];
+        // this.firstcall = true;
+        // this.lastcall = false;
+      })
+
+  }
+
+ 
+
+
+  // updateFieldswithvalue(deviceobjectforedit) {
+  //   console.log("gfdjgdlkgfdngfdlkgndk;flngfdkgnfdkbdfnd=>", JSON.parse(deviceobjectforedit));
+  //   var tempdevobj = JSON.parse(deviceobjectforedit);
+  //   if (deviceobjectforedit != null) {
+  //     console.log(JSON.parse(deviceobjectforedit))
+  //     this.deviceid = tempdevobj.Device_ID;
+  //     this.devicename = tempdevobj.Device_Name;
+  //     this.hrdwr = tempdevobj.sim_number;
+  //     this.SIM_provider = tempdevobj.sim_provider;
+  //     this.hrdwr2 = tempdevobj.sim_number2;
+  //     this.SIM_provider2 = tempdevobj.sim_provider2;
+  //     this.EngineNo = tempdevobj.engineNo;
+  //     this.manufacturingCompany = tempdevobj.manufacturingCompany;
+  //     this.typeofVeh = tempdevobj.typeOfVehicle;
+  //     this.iccidNo = tempdevobj.ICCICD;
+  //     this.Imsi = tempdevobj.IMSI;
+  //     this.UIDnumber = tempdevobj.uniqueID;
+  //     this.chassisno = tempdevobj.ChassisNo;
+  //     this.companyName = tempdevobj.companyName;
+  //     this.companyAddress = tempdevobj.companyAddress;
+  //     this.transportOfficeCity = tempdevobj.transportOfficeCity;
+  //     this.transportOfficeState = tempdevobj.transportOfficeState;
+  //     this.invoice_number = tempdevobj.invoiceNumber;
+  //     this.IntegrationId = tempdevobj.integrationId
+  //     this.numberOfSOS = tempdevobj.numberOfSOS;
+  //     this.CIDNO = tempdevobj.CID_No;
+  //     this.driver = tempdevobj.driver_name;
+  //     this.dcontact = tempdevobj.contact_number;
+  //     this.des = tempdevobj.Device_Des;
+  //     if (tempdevobj.expDate) {
+  //       console.log(tempdevobj.expDate);
+  //       this.expDate = tempdevobj.expdate;
+  //     }
+  //     if (tempdevobj.invoiceDate) {
+  //       this.invoice_date = new Date(tempdevobj.invoiceDate);
+  //     }
+  //     if (tempdevobj.fitmentDate) {
+  //       this.fitmentDate = new Date(tempdevobj.fitmentDate);
+  //     }
+  //     if (tempdevobj.lastFitnessDate) {
+  //       this.lastFitnessDate = new Date(tempdevobj.lastFitnessDate);
+  //     }
+  //     if (tempdevobj.vehicleRegDate) {
+  //       this.vehRegDate = new Date(tempdevobj.vehicleRegDate)
+  //     }
+  //     if (tempdevobj.vehicleManufacturingDate) {
+  //       this.vehManufacturingYear = new Date(tempdevobj.vehicleManufacturingDate);
+  //     }
+
+  //     if(tempdevobj.imageDoc){
+  //       if(tempdevobj.imageDoc.length != 0){
+  //         console.log(tempdevobj.imageDoc);
+  //         for(var i =0;i<tempdevobj.imageDoc.length;i++){
+  //           if(tempdevobj.imageDoc[i].docdate){
+  //             tempdevobj.imageDoc[i].docdate = new Date(tempdevobj.imageDoc[i].docdate);        
+  //           }
+  //         }   
+  //         this.imageuploadObject = tempdevobj.imageDoc ; 
+  //         console.log("kdjfbsafkjbdskjfbvdskjfbjdsfbsdj=>",this.imageuploadObject[0].image);
+  //       }
+  //     }
+  //   }  
+  // }
+
+ ngOnDestroy(){
+   localStorage.removeItem('deviceforedit');
+
+ }
+ fastag:any;
+
+ responseMessage:any;
+ failedReason:any;
+ failedUploadFiles:any;
+ uploadExcel(){
+  console.log("Device Json Payload",this.uploadJSON);
+  this.failedUploadFiles = [];
+  this.Load =true;
+  this.contactService.addMultipleDevice(this.uploadJSON)
+      .subscribe(res=>{
+        console.log(res);
+        this.failedUploadFiles =  res.failedJson;
+        this.responseMessage  =   res.message;
+        // this.failedReason=res.reason;
+       
+        if(this.failedUploadFiles.length == 0){
+          // this.showErrorupload = true;
+          // this._flashMessagesService.show("Device" + " " + this.responseMessage, { cssClass: 'alert-success', timeout: 2000 });
+          
+          this.Load = false;
+          this.router.navigateByUrl("dashboard");
+        }else{
+          this.showErrorupload_1 = true;
+          this.Load = false;
+          this.faileduploadDevices = [];
+          console.log(this.failedUploadFiles); 
+          for(var k = 0 ;k < this.failedUploadFiles.length; k ++ ){
+            var failedObj = {
+              Device_ID : this.failedUploadFiles[k].DeviceID,
+              Device_Name : this.failedUploadFiles[k].Device_Name,
+              Reason : this.failedUploadFiles[k].reason
+            }
+
+            this.faileduploadDevices.push(failedObj);
+          }
+          // this._flashMessagesService.show("Device" + " " + this.responseMessage + "with Some fialed condition", { cssClass: 'alert-success', timeout: 2000 });
+          // this.Load = false;
+          // this.router.navigateByUrl("dashboard");
+        }
+      
+        // console.log(this.failedReason);
+      },err=>{
+        this.Load = false;
+        this.router.navigateByUrl("dashboard");
+        console.log(err);
+      })
+ }
+
+
+
+
+ imageURL:any;
+ selectedDeviceFile:File;
+ data_descip : any;
+onDeviceImageChanged(event) {
+  this.selectedDeviceFile = <File>event.target.files[0];
+}
+
+onDeviceImageUploadUpload(){
+  const fdDevice = new FormData();
+  fdDevice.append('photo',this.selectedDeviceFile,this.selectedDeviceFile.name)
+   console.log("Binaryimage = > ",fdDevice );
+   this.contactService.deviceImageupload(fdDevice)
+     .subscribe(res=>{
+           console.log(res);
+           if(res){
+             this.deviceImg.push(res['_body'])
+           }
+
+          console.log('this.deviceImg',this.deviceImg);
+           this.data_descip = "Image Uploaded";
+           launch_toast();
+     },err=>{
+      this.data_descip = "Internal Server Error";
+      launch_toast();
+       console.log(err);
+     })
+ 
+     function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+ 
+}
+
+getInstallerData(){
+  this.contactService.getTechnician(this.useridd, this.skip, this.limit,this.myInput,false).subscribe(
+    (res:any)=>{
+      this.installerData=res;
+       for(let i=0;i<this.installerData.length;i++){
+          this.installerData[i].fullName=this.installerData[i].first_name+' '+this.installerData[i].last_name;
+        }
+    })
+}
+changeLiecence(licenseVal)
+{
+  console.log(licenseVal);
+  
+  if(licenseVal == 'Lifetime'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 5;
+        eDate.setFullYear(LifeTimeyear);
+       this.expDate = new Date(eDate);
+        this.showDate=true;
+      }else if(licenseVal == 'Two years'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 2;
+        eDate.setFullYear(LifeTimeyear);
+       this.expDate = new Date(eDate);
+        this.showDate=true;
+      }else if(licenseVal == 'Three years'){
+        var eDate = new Date();
+        var LifeTimeyear = eDate.getFullYear() + 3;
+        eDate.setFullYear(LifeTimeyear);
+       this.expDate = new Date(eDate);
+         this.showDate=true;
+      }else{
+        this.showDate=false;
+      }
+}
+modelData
+selectModel(event){
+  console.log(event);
+
+  this.contactService.get('/model_master/getModel?name='+event).subscribe((res:any)=>{
+    this.modelData=res
+  })
+  
+}
+
+
+tabelObj
+testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#sample').DataTable({
+      
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+       
+        
+        },
+        ajax: (dataTablesParameters, callback) => {
+         
+        callback({data:that.array})
+
+        },
+// "Device_Name": "test1021",
+//         "DeviceID": 102123,
+//         "SimNumber": 48839,
+//         "SimNumber2": 843993,
+//         "SIMProvider": "Vodafone",
+//         "VehicleType": "6225fe23046ce87675b0cfd4",
+//         "DeviceModel": "6110fabd99b02346e558abe9",
+//         "phone": 57655656,
+//         "first_name": "test",
+//         "last_name": "customer",
+//         "expire_validity": "Two Year",
+//         "expDate": "2024-03-08T06:16:20.530Z",
+//         "superAdmin": "61408bce53c0112864ef594f",
+//         "DealerId": "61408bce53c0112864ef594f",
+//         "userId": "61408bce53c0112864ef594f",
+//         "emailId": "employeetrack@gmail.com",
+//         "phone_num": "8434838439"
+        "columns": [
+          {
+            "data": "Device_Name",
+            "render": function (data, row) { 
+             return data?data:'N/A';  
+            }
+          },
+          {
+            "data": "DeviceID",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "SimNumber",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "SimNumber2",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+          {
+            "data": "SIMProvider",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "VehicleType",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+          {
+            "data": "DeviceModel",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "phone",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+         
+           {
+            "data": "first_name",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "last_name",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+            {
+            "data": "expire_validity",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+            
+        ],
+        
+      });
+ 
+    });
+
+  }
+exportExcel()
+{
+this.downloadFile(this.array);
+}
+
+
+downloadFile(data) {
+
+    let arrHeader = ["Device_Name", "DeviceID","SimNumber", "SimNumber2", "SIMProvider","VehicleType","DeviceModel","phone","first_name","last_name","expire_validity"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Sample.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+
+    let str = ""
+    let row = 'S.No,';
+
+
+    let newHeaders =["Device_Name", "DeviceID","SimNumber", "SimNumber2", "SIMProvider","VehicleType","DeviceModel","phone","first_name","last_name","expire_validity"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+    strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  //  exportAsExcelFile(json: any[], excelFileName: string): void {
+    
+  //   const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
+  //   console.log('worksheet',worksheet);
+  //   const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
+  //   const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+  //   //const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'buffer' });
+  //   this.saveAsExcelFile(excelBuffer, excelFileName);
+  // }
+
+  // private saveAsExcelFile(buffer: any, fileName: string): void {
+  //   const data: Blob = new Blob([buffer], {
+  //     type: EXCEL_TYPE
+  //   });
+  //   FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+  // }
+}
+
+
diff --git a/src/app/dialog-demo/dialog-demo.component.html b/src/app/dialog-demo/dialog-demo.component.html
new file mode 100644
index 0000000..ef80628
--- /dev/null
+++ b/src/app/dialog-demo/dialog-demo.component.html
@@ -0,0 +1,3 @@
+<p>
+  dialog-demo works!
+</p>
diff --git a/src/app/dialog-demo/dialog-demo.component.scss b/src/app/dialog-demo/dialog-demo.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/dialog-demo/dialog-demo.component.spec.ts b/src/app/dialog-demo/dialog-demo.component.spec.ts
new file mode 100644
index 0000000..d51abb1
--- /dev/null
+++ b/src/app/dialog-demo/dialog-demo.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogDemoComponent } from './dialog-demo.component';
+
+describe('DialogDemoComponent', () => {
+  let component: DialogDemoComponent;
+  let fixture: ComponentFixture<DialogDemoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DialogDemoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogDemoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/dialog-demo/dialog-demo.component.ts b/src/app/dialog-demo/dialog-demo.component.ts
new file mode 100644
index 0000000..71e52c8
--- /dev/null
+++ b/src/app/dialog-demo/dialog-demo.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-dialog-demo',
+  templateUrl: './dialog-demo.component.html',
+  styleUrls: ['./dialog-demo.component.scss']
+})
+export class DialogDemoComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/distributers-list/distributers-list.component.html b/src/app/distributers-list/distributers-list.component.html
new file mode 100644
index 0000000..6a08f3a
--- /dev/null
+++ b/src/app/distributers-list/distributers-list.component.html
@@ -0,0 +1,91 @@
+<app-all-menus></app-all-menus>
+<div id="toast">
+  <div id="desc">{{data_descip}}</div>
+</div>
+<div class="container-fluid" style="padding-top: 6%;">
+    <div class="headerStyle" style="background-color: #426e86;margin-bottom: 5px;">
+      <!-- <button md-tooltip="{{'Add Distributer' | translate}}"
+        style="border:1px solid transparent;float:left; background-color: transparent;" (click)="adddev()"> -->
+        <!-- <md-icon style="float: right;width:30px;height:30px;">add</md-icon> -->
+        <i class="fas fa-plus-circle" (click)="adddev()" mdTooltip="{{'Add Distributer' | translate}}"
+          style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left;margin-top: 13px; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+      <!-- </button>  -->
+
+                <!-- <i class="fas fa-plus-circle" (click)="addDealer()" mdTooltip="{{'Add Dealer' | translate}}"
+                  style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i> -->
+
+      
+      <span style="margin-right: 342px;font-weight: 600;margin-left: 314px;">{{'DISTRIBUTERS' | translate}}</span>
+      <div style="display: inline-flex;padding-bottom: 3px;">
+        <input type="search" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
+          style="margin-top: 9px; margin-right: 13px;height: 29px;" (ngModelChange)="searchFilter($event)"
+          placeholder="Search Distributer" />
+        <!-- <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label> -->
+        <input id="from_date" placeholder="From Date" bsDatepicker class="form-control form-control-sm" style="margin-top: 9px;" [bsConfig]="bsConfig"
+          [(ngModel)]="from_date" type="text">
+        <!-- <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label> -->
+        <input id="to_date" placeholder="To date" bsDatepicker class="form-control form-control-sm" style="margin-top: 9px;" [bsConfig]="bsConfig"
+          name="todate" [(ngModel)]="to_date" type="text">
+      </div>
+
+              <button md-raised-button
+                style=" background: #31428c; color: white; float: right;margin-right: 12px;"
+                (click)="Distributers()"> {{'Get Detail' | translate}} </button>
+
+
+      </div>
+  <!-- <div class="filterDiv">
+    <div class="row" style="margin-bottom: 20px;"> -->
+      <!-- <div class="col-12" style="text-align: center;margin-top: 30px;">   -->
+        <!-- <button  md-tooltip="{{'Add Distributer' | translate}}" style="border:1px solid transparent;float:left; background-color: transparent;" (click)="adddev()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>      -->
+        <!-- <div style="display: inline-flex; width: 64%;padding-bottom: 3px;">
+          <input type="search" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" style="height: 90%; margin-top: 4px; margin-right: 20px;" (ngModelChange)="searchFilter($event)" placeholder="Search Distributer" />
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >  
+            <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >          
+        </div> -->
+        <!-- <button md-raised-button style="width: 190px; background: #31428c; color: white; height: 37px; line-height: 40px; margin-left: 25px;" (click)="Distributers()"> {{'Get Detail' | translate}} </button> -->
+        <!-- <button md-raised-button style="width: 190px; background: #1d8216; color: white;" (click)="exportExcel()">Export To Excel</button> -->
+        <!-- <div>
+          
+        </div> -->
+      <!-- </div> -->
+        <!-- <div class="col-4" style="text-align: center;margin-top: 30px;">
+         
+          </div>  -->
+          <!-- <div class="col-4" style="margin-top: 30px;">
+         
+          </div>   -->
+      <!-- </div>
+    </div> -->
+    <div>
+        <table id="userTable" class="display mt-3" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+          <thead style="background-color:#add8e6;color: white;height: 45px;">
+            <tr style="height: 45px;">
+                <th style="text-align:left;">{{'ID' | translate}}</th>
+                <th style="text-align:left;">{{'Name' | translate}}</th>
+                <!-- <th style="text-align:left;">Dealer</th>
+                <th style="text-align:left;">Is Dealer</th> -->
+                <th style="text-align:left;">{{'Created on' | translate}}</th>
+                <th style="text-align:left;">{{'Email' | translate}}</th>
+                <th style="text-align:left;;">{{'Phone' | translate}}</th>
+                <th style="text-align:left;">{{'Password' | translate}}</th>
+                <th style="text-align:left;">{{'Address' | translate}}</th>
+                <th style="text-align:left;">{{'Organisation Name' | translate}}</th>
+                <th style="text-align:left;">{{'Point Allocated' | translate}}</th>
+                <!-- <th style="text-align:left;">{{'Available Points' | translate}}</th> -->
+                <th style="text-align:left;">{{'Point Shared' | translate}}</th>
+                <th style="text-align:left;">{{'Status' | translate}}</th>
+                <th style="text-align:left;">{{'Edit' | translate}}</th>
+                <th style="text-align:left;">{{'Add Points' | translate}}</th>
+                <th style="text-align:left;">{{'Suspend Account' | translate}}</th>
+                <!-- <th style="text-align:left;">{{'Open Account' | translate}}</th> -->
+            </tr>
+        </thead>
+        </table>
+        <!-- <table id="deviceTable" datatable [dtOptions]="dtOptions" style="width:100%" class="mt-5 table table-striped table-bordered full-data-table" >
+        </table> -->
+    </div>
+  </div>
+
diff --git a/src/app/distributers-list/distributers-list.component.scss b/src/app/distributers-list/distributers-list.component.scss
new file mode 100644
index 0000000..615ecc4
--- /dev/null
+++ b/src/app/distributers-list/distributers-list.component.scss
@@ -0,0 +1,166 @@
+.container-fluid .headerStyle {
+  text-align: center;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  font-size: 20px;
+  background: #426e86;
+  color: white;
+  border-radius: 4px;
+}
+.dataTables_length {
+  margin-top: -4px;
+  margin-bottom: -17px;
+}
+// width: 100%;
+//     text-align: center;
+//     align-items: center;
+//     background: #426e86;
+//     padding-top: 10px;
+//     padding-bottom: 10px;
+//     color: white;
+//     box-shadow: 3px 1px 5px 0px rgb(178 176 174);
+
+/deep/ .mat-menu-panel.test {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a {
+    display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+  }
+}
+
+/deep/ .mat-menu-panel.test_1 {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+  margin-top: 48px;
+}
+
+th,
+td {
+  white-space: nowrap;
+}
+div.dataTables_wrapper {
+  width: 800px;
+  margin: 0 auto;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+#toast #img {
+  width: 250px;
+  height: s50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/distributers-list/distributers-list.component.spec.ts b/src/app/distributers-list/distributers-list.component.spec.ts
new file mode 100644
index 0000000..3466418
--- /dev/null
+++ b/src/app/distributers-list/distributers-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DistributersListComponent } from './distributers-list.component';
+
+describe('DistributersListComponent', () => {
+  let component: DistributersListComponent;
+  let fixture: ComponentFixture<DistributersListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DistributersListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DistributersListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/distributers-list/distributers-list.component.ts b/src/app/distributers-list/distributers-list.component.ts
new file mode 100644
index 0000000..627a3dc
--- /dev/null
+++ b/src/app/distributers-list/distributers-list.component.ts
@@ -0,0 +1,533 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import * as moment from 'moment';
+import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { MdDialog } from '@angular/material';
+
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AddDistributersComponent } from '../add-distributers/add-distributers.component';
+import { Subject } from 'rxjs/Subject';
+import { PointShareComponent } from '../point-share/point-share.component';
+import { environment } from '../../environments/environment';
+declare var $: any, DataTable: any;
+declare var  swal:any;
+
+@Component({
+  selector: 'app-distributers-list',
+  templateUrl: './distributers-list.component.html',
+  styleUrls: ['./distributers-list.component.scss']
+})
+export class DistributersListComponent implements OnInit {
+  dev_url = environment.hostUrl;
+  from_date: Date;
+  to_date: Date;
+  bsConfig: Partial<BsDatepickerConfig>;
+  tabelObj: any;
+  useridd: any;
+  myInput:any;
+  supadm: any;
+  modelChanged: Subject<string> = new Subject<string>();
+  
+  isOperator: boolean = false;
+  supAdminId: any;
+  newVar:any;
+  newVar1:any;
+  colorTheme = 'theme-dark-blue';
+  tttpppcccc: any='';
+  data_descip: string;
+
+  constructor(public contactService: ContactService, private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) { 
+ 
+    // this.from_date = new Date();
+    // this.from_date.setHours(0,0,0,0);
+    // this.from_date.setMonth(this.from_date.getMonth() -1);
+    // if(this.from_date.getMonth() == 1){
+    //   this.from_date.setMonth(12);
+    //   this.from_date.setFullYear(this.from_date.getUTCFullYear()-1);
+    // }
+
+    // this.to_date = new Date();
+
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+
+    this.modelChanged
+    .debounceTime(2000) // wait 300ms after the last event before emitting last event
+    .distinctUntilChanged() // only emit if value is different from previous value
+    .subscribe(myInput => {
+      this.myInput = myInput;
+      console.log('this.myInput in constructor = > ',this.myInput);
+      this.tabelObj.draw();
+
+
+    });
+  }
+
+  ngOnInit() {
+
+    this.testTable();
+        this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+        this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+        this.isOperator = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOperator;
+        this.supAdminId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+
+     
+  }
+
+  testTable() {
+    console.log("Inside function");
+    const that = this;
+   
+    $(document).ready(function () {
+      that.tabelObj = $('#userTable').DataTable({
+        "ordering": true,
+        'serverSide': true,
+        "processing": true, 
+        "searching": false,
+        scrollX: true,
+        order: [[0, 'desc']],
+        ajax: (dataTablesParameters: any, callback) => {
+
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+          console.log('dataTablesParameters',dataTablesParameters);
+        
+          // console.log(dataTablesParameters);
+          // console.log("callback", callback);
+
+          // dataTablesParameters.find = {
+          //   _id: that.useridd         
+          // };
+          dataTablesParameters.columns = [    
+            {data : '_id', "orderable": "true" },    
+            { data: "first_name" },
+            { data: "email" },
+            { data: "phone" },
+            { data: "user_id" },
+            { data: "pushNotification" },
+            { data: "organisation_name" },
+            {data : "point_Allocated"},
+            {data : "point_Shared_Other"},
+            {data : "std_code"},
+            { data: "welcome_msg" },
+            { data: "created_on" },
+            {data:'expire_date'},
+            {data : "accountSuspended"},
+            {data : 'pass'},
+            {data : 'billing_id.billing_contact'},
+            {data : 'billing_id.billing_rate'},
+            {data : 'billing_id.BillingType'},
+            {data : 'billing_id.std_code'},
+            {data : 'billing_id.email'},
+            { data: "Dealer.first_name" },
+            { data: "Dealer.last_name" },
+            { data: "last_name" },   
+            { data: "address"},
+            {data : "status" },
+            {data : "kyc_verification_mail" },
+            {data : "inventoryManagement" },
+            {data : "bussinessType" },
+            {data:'devicePermission.Add'},
+            {data:'devicePermission.Edit'},
+            {data:'devicePermission.Delete'},
+            {data:'userPermission.Add'},
+            {data:'userPermission.Edit'},
+            {data:'userPermission.Delete'},
+            // {data:'userPermission'},
+            {data : "Plan" },
+            {data:'support1'},
+            {data:'support2'},
+            {data:'support3'},
+             {data:'service1'},
+              {data:'service2'},
+              {data:'SpeedLimit'},
+               {data:'outOfReach'},
+              ]
+    //           support1:{type:String},
+    // support2:{type:String},
+    // support3:{type:String},
+    // service1:{type:String},
+    // service2:{type:String},
+              // this.userSelect._id
+              // dataTablesParameters.find.supAdmin = that.useridd;
+                
+          // if ((that.userSelect)&&(that.userSelect.length!=0)&&(that.userSelect[0].user_type!="All")) {
+          //   dataTablesParameters.find._id = that.userSelect[0]._id;
+          // }
+
+          // if ((that.userSelect1)&&(that.userSelect1.length!=0)&&(that.userSelect1[0].user_type!="All")) {
+          //   dataTablesParameters.find._id = that.userSelect1[0]._id;
+          // }
+
+
+          if (that.from_date) {
+            dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find['created_on']['$gte'] = {
+              _eval: 'date',
+              value: new Date(that.from_date).toISOString()
+            }
+          };
+          // }
+          if (that.to_date) {
+            dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find['created_on']['$lte'] = {
+              _eval: 'date',
+              value: new Date(that.to_date).toISOString()
+            };
+          }
+
+          if((that.myInput != undefined) &&(that.myInput != '')){
+            console.log('that.myInput',that.myInput);
+            dataTablesParameters.find['$or']  = [{'phone' : {"$regex" : that.myInput, $options : 'i'}},{first_name : {"$regex" : that.myInput, $options : 'i'}},{email : {"$regex" : that.myInput, $options : 'i'}}];
+          }
+
+          // if(this.supadm){
+          //   dataTablesParameters.find.supAdmin = that.useridd;
+          // }
+          dataTablesParameters.find.organisation = that.useridd ; 
+          dataTablesParameters.sort = {_id :-1}
+          
+          var suburl = "";
+          suburl += "/users/datatable";
+          // console.log(suburl);
+          // console.log(dataTablesParameters);
+          // console.log(suburl)
+          that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+
+            callback(resp);
+
+          }, err => {
+            // console.log(err);
+            // console.log(err.status);
+          });
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#accountActivity', row).bind('click', () => {    
+                  console.log(data);
+                  swal("Are you sure ?", "Do you want to change account status ?").then((ans)=>{
+                    console.log(ans);
+                    that.accountActivityFunc(data);
+                  },err=>{
+                    console.log(err);
+                  });
+               
+            });
+
+            // $('#openNewTab', row).bind('click', () => {    
+            //       that.router.navigate([]).then(result => { 
+            //         console.log(data,row);
+            //       that.contactService.getcustToken(data['_id']).subscribe(res=>{
+            //         console.log(res.cust);
+            //         console.log(res.cust.custumer_token);
+            //         // window.addEventListener('storage', (e) => {
+            //              localStorage.setItem('token',res.custumer_token) ;
+            //       //  });
+                 
+            //         // window.localStorage['token'] = ;
+            //         window.open(that.dev_url+"/const?_status="+"OK", '_blank'); });   
+            //         console.log('new window');
+            //       })      
+            // });
+                  
+          $('#edit', row).bind('click', () => {    
+          // console.log("Edit Method",data);
+          data.edit = true;
+          let dialogRef = that.dialog.open(AddDistributersComponent, {
+            width: '800px',
+      
+            data: {"userInfo":data}                      
+          });
+
+          dialogRef.afterClosed().subscribe(result => {   
+            // console.log(result);
+          
+               that.Distributers();      
+            
+          })  
+
+          });
+
+          $('#pointShare', row).bind('click', () => {    
+            // console.log("Edit Method",data);
+            data.edit = true;
+            let dialogRef = that.dialog.open(PointShareComponent, {
+              width: '300px',     
+              data: {"userInfo":data}                      
+            });
+  
+            dialogRef.afterClosed().subscribe(result => {   
+              // console.log(result);
+              if(result == 'added'){
+                this.data_descip =  "Point Added";
+                that.Distributers();    
+                launch_toast();       
+              }
+                 
+                 function launch_toast() {
+                  // console.log(divid);
+                   var x = document.getElementById("toast")
+                   //console.log(x);
+                   x.className = "show";
+                   setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+               }    
+            })  
+            });
+          },
+        "columns": [
+          {
+            "data": "_id",
+            "visible": false,
+            "render": function (data, type, row) {
+              return data;
+            }
+          },
+          {
+            "data": "first_name",
+            "render": function (data, type, row) {
+              return data ? (data + " " + row.last_name) : "";
+            }
+          },
+          // {
+          //   "data": "Dealer",
+          //   render: function (data, type, row) {
+          //     return data ? (data.first_name + " " + data.last_name) : ""
+          //   }
+          // },
+          // {
+          //  "data": "isDealer",
+          //   render: function (data, type, row) {
+          //   return data?data:'false' ;
+          //   }
+          // },
+          {
+            "data": "created_on",
+            "render": function (data, type, row) {
+              // return new Date(data).getTime();
+              var created_time = new Date(data);
+
+              return data ? (moment(created_time).format('LL')) : "";
+            }
+          },
+          {
+            "data": "email",
+            render: function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "phone",
+         
+            "render": function (data, type, row) {
+              console.log('row=>',row);
+              var phoneShow = '';
+              if(row.std_code != undefined){
+                phoneShow ='+' + row.std_code.dialcode + '-' + data ; 
+              }else{
+                phoneShow = data ; 
+              }
+              return phoneShow;
+            }
+          },
+          {
+            "data": "pass",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "address",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "organisation_name",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "point_Allocated",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          }, 
+          // {
+          //   "data" : "_id",
+          //   "render" : function(data, type,row){
+         
+          //     let promiseName = new Promise(function(resolve, reject) {
+          //       var distPoint = '0';
+          //       that.contactService.getAvialblePoints(row._id,distPoint).subscribe(res=>{
+                
+          //         var pointCount =res.available_points?res.available_points: 0 ; 
+              
+          //         resolve(pointCount);
+          //       },err=>{
+          //         reject("Error");
+          //       })        
+          //       });
+          //     promiseName.then(pResult =>{
+          //       console.log(pResult);
+          //      that.tttpppcccc = pResult  ;
+              
+          //     });
+          //     return that.tttpppcccc;
+           
+          //   }
+          // },
+          { 
+            "data": "point_Shared_Other",
+            "render": function (data, type, row) {
+              // console.log('typeof(data)',typeof(data));
+              return data ? data : "";
+            }
+          }, 
+            
+          {
+
+            "data": "status", 
+            "render": function (data, type, row) {
+              // console.log(data);
+              if(data == true){
+                var distStatus = 'Active'
+              }
+              if(data == false){
+                var distStatus = 'Inactive'
+              }
+            
+              return distStatus;
+            }
+          },
+
+          // {
+
+          //   "data": "pushNotification",
+          //   "render": function (data, type, row) {
+          //     var tokenCount = data ?  data.length :0;
+          //     return tokenCount;
+          //   }
+          // },
+          {
+            "data":null,"render":function(data,type,row){
+            // return '<button id="edit" type="button" md-raised-button class="btn btn-primary">Edit</button>';
+            return '<i id="edit" type="button" class="far fa-edit" md-tooltip="Edit" style="cursor: pointer;"></i>'
+          }
+          },
+          {
+            "data":null,"render":function(data,type,row){
+         
+            return '<i id="pointShare" style="cursor:pointer" class="fas fa-coins"></i>'
+          }
+          }  ,
+          {
+            "data":"accountSuspended","render":function(data,type,row){
+              console.log(data);
+            var btnClr = '';
+            if(data === false){
+              btnClr = 'green';
+            }else{
+              var btnClr = 'red';
+            }
+            var accountAction =   '<i id="accountActivity" style="color:'+btnClr+'" class="fas fa-power-off"></i>';
+            return accountAction;
+          }
+          }
+          // ,
+          // {
+          //   "data":"_id",
+          //   "render":function(data,type,row){
+          //   return '<i id="openNewTab" class="fas fa-toggle-off"></i>';
+           
+          // }
+          // }
+
+        ],
+        columnDefs: [
+          {      
+              "className": "dt-body-left",
+               "targets": [ 0,1,2,3,4,5,6,7] , 
+           
+              
+          },
+     
+        ]
+
+      });
+     
+    });
+
+  }
+
+
+  Distributers() {
+    console.log(this.from_date);
+    console.log(this.to_date);
+    this.tabelObj.draw();
+
+}
+
+adddev(){
+  var that = this;
+  let dialogRef = this.dialog.open(AddDistributersComponent, {
+    width: '1000px',
+    // height: '1000px', 
+
+  });
+
+  dialogRef.afterClosed().subscribe(result => {
+    // console.log(result);
+    if (result == "success") {
+   
+      that.Distributers();     
+
+    }
+  });
+}
+
+searchFilter(text: string) {
+  console.log('texttext',text);
+  this.modelChanged.next(text);
+ 
+
+}
+
+accountActivityFunc(distObj){
+  console.log(distObj);
+  var activity = !distObj.accountSuspended;
+  console.log('activity',activity);
+  var payload = {
+    accountSuspended : activity,
+    acoountId : distObj._id  ,
+    suspendedBy : 'org' 
+  }
+
+  this.contactService.accountSuspend(payload).subscribe(res=>{
+    console.log(res);
+    this.data_descip =  "Account Status Changed";
+    launch_toast();
+    this.tabelObj.draw();
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+   }    
+
+
+  })
+}
+
+ngOnDestroy(): void {
+    console.log("Destroying loop"); // ngOnDestroy is not triggering
+    // this.tabelObj.un
+  }
+ 
+}
diff --git a/src/app/driver-detail/driver-detail.component.css b/src/app/driver-detail/driver-detail.component.css
new file mode 100644
index 0000000..76d05a1
--- /dev/null
+++ b/src/app/driver-detail/driver-detail.component.css
@@ -0,0 +1,37 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+ 
+  height: 84vh;
+  
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+  
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/driver-detail/driver-detail.component.html b/src/app/driver-detail/driver-detail.component.html
new file mode 100644
index 0000000..794dc1c
--- /dev/null
+++ b/src/app/driver-detail/driver-detail.component.html
@@ -0,0 +1,131 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <i class="fas fa-plus-circle" (click)="add_Driver()" md-tooltip="Add Driver" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Driver Detail' | translate}}</h4>
+      <button (click)="exportToExcel()"  style="cursor: pointer; float: right;margin-right: 25px; margin-top: -25px;"><i class="fas fa-file-excel-o" aria-hidden="true"></i>Export To Excel</button>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+   
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+         
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th></th>
+                      <th style="padding:18px">{{'Driver Name' | translate}}</th>
+                      <th style="padding:18px">{{'Driver Address' | translate}}</th>
+                      <th style="padding:18px">{{'Driver Status' | translate}}</th>
+                      <th style="padding:18px">{{'License Number' | translate}}</th>   
+                      <th style="padding:18px">{{'Salary' | translate}}</th>
+                      <th style="padding:18px">{{'DOJ' | translate}}</th>
+                      <th style="padding:18px">{{'Delete' | translate}}</th>
+                      <th style="padding:18px">{{'Edit' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- <html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+<app-all-menus></app-all-menus>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+
+
+  <div style="float:left; width: 100%;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+
+  <div id="toast"><div id="desc">{{data_descip}}</div></div>
+
+  <button md-tooltip="Add Driver" style="border:1px solid transparent; background-color: transparent;margin-top:8px" (click)="add_Driver()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>
+  <input type="search"   id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Driver Search"/>
+
+
+
+  <table  id="myTable" class="table table-striped table-hover " style="overflow-y: hidden;
+  overflow-x: hidden;font-size:12px">         
+  <thead style="background-color:#A2C523;color: white;">
+    <tr>
+
+      <th>{{'Driver Name' | translate}}</th>
+      <th>{{'Driver Address' | translate}}</th>
+      <th>{{'Driver Status' | translate}}</th>
+      <th>{{'License Number' | translate}}</th>   
+      <th>{{'Salary' | translate}}</th>
+      <th>{{'DOJ' | translate}}</th>
+      <th>{{'Delete' | translate}}</th>
+           
+    </tr>
+  </thead>
+
+  <tbody>
+
+<tr *ngFor="let data of driver">
+
+      <td  style="cursor:pointer" >{{data.name}}</td>
+
+      <td  style="cursor:pointer" >{{data.address}}</td>
+
+      <td  style="cursor:pointer" >{{data.status}}</td>
+
+      <td  style="cursor:pointer" >{{data.license_number}}</td>
+
+     
+      <td  style="cursor:pointer">{{data.salary}}</td>
+
+   <td  style="cursor:pointer" >{{data.date_of_joining}}</td> 
+   
+      <td style="float:left;padding-top: 2%;"><md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon ></td>
+    
+
+  </tr>  
+  </tbody> 
+</table> 
+
+
+</div>
+
+</body> -->
diff --git a/src/app/driver-detail/driver-detail.component.spec.ts b/src/app/driver-detail/driver-detail.component.spec.ts
new file mode 100644
index 0000000..06c81b7
--- /dev/null
+++ b/src/app/driver-detail/driver-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DriverDetailComponent } from './driver-detail.component';
+
+describe('DriverDetailComponent', () => {
+  let component: DriverDetailComponent;
+  let fixture: ComponentFixture<DriverDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DriverDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DriverDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/driver-detail/driver-detail.component.ts b/src/app/driver-detail/driver-detail.component.ts
new file mode 100644
index 0000000..a9ecec8
--- /dev/null
+++ b/src/app/driver-detail/driver-detail.component.ts
@@ -0,0 +1,408 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {DialogContentExampleDialogComponent} from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+/* import {Tab} from './tab'; */
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import * as io from 'socket.io-client';
+/* import { DeviceReportComponent } from '../device-report/device-report.component';
+ */import { DeviceEditComponent } from '../dashboard/device-edit/device-edit.component';
+import {MdSnackBar} from '@angular/material';
+import { DeviceShareComponent } from '../dashboard/device-share/device-share.component';
+import { ShareUserComponent } from '../dashboard/share-user/share-user.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {ContactService} from '../contact.service';
+import { checkNoChangesNode } from '@angular/core/src/view/view';
+import { SpeednotifyComponent } from '../dashboard/speednotify/speednotify.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { AddDriverComponent } from '../add-driver/add-driver.component';
+
+declare var $: any;
+declare var moment:any;
+declare var swal:any;
+
+declare var google: any;
+
+@Component({
+  selector: 'app-driver-detail',
+  templateUrl: './driver-detail.component.html',
+  styleUrls: ['./driver-detail.component.css'],
+  providers: [ContactService,SidebarComponent]
+
+})
+export class DriverDetailComponent implements OnInit {
+  adbtn: string;
+  chkAddBtn: string;
+ //private url = 'http://localhost:3000/api/graph';  
+  private socket;
+  Load:boolean=false
+ messages = [];
+ connection;
+ graphs:any;
+ message;
+  numberOfOnlineUsers: number;
+devices: Device[];
+device: Device;
+
+drivers:any=[];
+driver:any=[];
+Device_ID: string;
+Serial_Num: string;
+Manf: string;
+Model: string;
+del:boolean = false;
+Des: string;
+Hardware_Ver: string;
+Loca: string;
+login:any;  
+visibility:any;
+/* tabs: Tab[] = []; */
+calculateResult=[];
+value:any;
+a:any;
+homeVis:any;
+visibility0:any;
+j:any;
+id:any;
+dev:any;
+checked:any
+MdSlideToggleChange :any;
+e: Event;
+d:any;
+  tabelObj: any;
+
+
+
+// deleteRecord(data){
+//   this.contactService.deleteDriver(data).subscribe(  
+//     data => {  
+//       this.drivers=[];
+//       this.driver=[];
+//       this.getDriver();
+
+//     });
+// }
+
+
+
+cond:Boolean = false;
+point : any = 0;
+
+
+
+
+add_Driver(){
+
+this.router.navigate(["addDriver"],{queryParams :  {user_id : this.useridd}});
+
+}
+
+
+
+  constructor(public sidebar :SidebarComponent,public dialog: MdDialog,public snackBar: MdSnackBar,private router: Router, private contactService: ContactService, private activatedRoute: ActivatedRoute) { 
+   
+  }
+
+sha :any;
+
+
+
+
+myInput:any;
+data_descip :any;
+before:any;
+// TOAST
+
+fs :any;
+ls :any;
+or :any;
+/* e =[];
+ */token :any;
+emailid :any;
+devicess :any;
+devicesss :any;
+userID:any;
+final:any;
+lat:any;
+lng:any;
+latLongArr:any
+convertedToString :String;
+useridd:any;
+notifi = [];
+g:any;
+
+custtype:any;
+cust:boolean=false;
+
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+data_to_view=[];
+Durations:any;
+superAdmin:Boolean = false;
+
+  ngOnInit() {
+
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.adbtn = localStorage.getItem("dlrchk")
+   
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];  
+    window.localStorage['DataUpdate'] = 'True'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // console.log("abc", this.custtype);
+    //this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+         let  foods = [ ];
+
+         if(this.mb.charAt(0)=="n"){
+          this.mb = ' '
+        }
+        if( window.localStorage['Custumer'] == 'ON'){
+          this.logoutbut = false
+          this.dealer = true
+       }
+       else{
+           this.logoutbut = true
+       }
+
+       this.logo=window.localStorage['logo'];
+       this.text=window.localStorage['text'];
+
+
+   
+      this.testTable();
+
+  }
+
+  getDriver(){
+    this.contactService.getDriver(this.useridd).subscribe(
+          
+      data => {
+     
+       for(let i=0;i<data.length;i++){
+        this.driver.push(data[i]);
+        //  console.log( this.driver);
+      
+        }
+  
+      });
+      
+  }
+
+/*   this.socket = io.connect('https://13.126.36.205:5000');
+  this.socket.on('connect', function(){
+    console.log("IO Connected");
+  
+  }); */
+  deviceData=[];
+  arrival_time:any;
+  baba=[]
+  status_toShow:any;
+  address_show:any;
+  lattitude:any;
+  longitude:any;
+  
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+            'serverSide': false,
+            "processing": true,
+            "searching": true,
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            "scrollY":'65vh',
+            // "ordering": true,
+            order: [[0, 'desc']],  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              dataTablesParameters.op = {};
+              dataTablesParameters.select = [];
+              dataTablesParameters.find = {};
+
+              var suburl = "";
+              suburl += "/driver/getDrivers?userid="+that.useridd;
+              that.contactService.get(suburl).subscribe(resp => {
+                  console.log("Response from datatable=>", resp); 
+            
+                  callback({data : resp });
+              }, err => {
+                callback({data : [] });
+              });
+            
+          },  
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+            $('#deleteDriver',row).bind('click',()=>{  
+              swal({
+                  // title: 'Are you sure?',
+                  text: "Do you want to delete driver data?",
+                  type: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Yes, delete'
+                }).then((result: { value: boolean; }) =>{                      
+                  if(result){
+                    console.log(data._id);
+                    that.contactService.deleteDriver(data._id).subscribe(  
+                      data => {  
+                         
+                        swal(
+                          'Deleted',
+                          'Driver deleted',
+                          'success'
+                        )
+
+                        that.tabelObj.ajax.reload();
+                  
+                      });
+              
+                  }                
+                });
+          })
+
+          $('#editDriver',row).bind('click',()=>{  
+             const dialog= that.dialog.open(AddDriverComponent, {
+              width: '800px',
+              // height: '700px',
+              data: data
+          });
+
+          dialog.afterClosed().subscribe(result => {
+            that.tabelObj.ajax.reload();
+            // //console.log(result);
+
+          })
+      })
+
+            },
+        
+            "columns": [
+              {
+                "data": "_id",
+                "visible":false,
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+            {
+              "data": "name",
+              "defaultContent": "",
+              "render": function(data, type, row) {  
+                return data?data : '';                  
+              }
+          },
+          
+              {
+                "data": "address",
+                "defaultContent": "",
+                "render": function(data, type, row) {  
+                  return data?data : '';                  
+                }
+            },
+                {
+                    "data": "status",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {  
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "license_number",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                     return data?data:''; 
+                    }
+                }, 
+                {
+                  "data": "salary",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              }, 
+                {
+                  "data": "date_of_joining",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var doj = new Date(data);
+                    return data ? (moment(doj).format('llll')) : "";  
+                  }
+              }, 
+         
+            {                
+              "data":null,
+            
+              "render":function(data,type,row){  
+                  return '<i id="deleteDriver" class="fas fa-trash" style="cursor:pointer;color:green" title="Delete driver"></i>'
+              }
+          },
+          {                
+              "data":null,
+            
+              "render":function(data,type,row){  
+                  return '<i id="editDriver" class="fas fa-edit" style="cursor:pointer;color:green" title="Delete driver"></i>'
+              }
+          }  
+
+            ],  
+
+        });
+  
+    });
+  
+  }
+  tab:any;
+
+  exportToExcel(){
+    console.log("IN EXPORT")
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+}
diff --git a/src/app/driver.ts b/src/app/driver.ts
new file mode 100644
index 0000000..f0a4255
--- /dev/null
+++ b/src/app/driver.ts
@@ -0,0 +1,12 @@
+export class Driver{
+    _id?: string;
+    name: string;
+    address: string;
+    status: string;
+    license_number: string;
+    license_upload: string;
+    salary: string;
+    doj: string;
+    driver_imagePath:string;
+    user_id:string;
+}
diff --git a/src/app/edit-costumer/edit-costumer.component.html b/src/app/edit-costumer/edit-costumer.component.html
new file mode 100644
index 0000000..1241bca
--- /dev/null
+++ b/src/app/edit-costumer/edit-costumer.component.html
@@ -0,0 +1,332 @@
+<div id="container" class="container-fluid" style="background: #f9f9f9;padding:0px;height:60vh">
+<div class="dealer_edit" *ngIf="pageId == 'edit'">
+  <!-- <p style="font-size: 24px;color: #615f5f;">{{'Edit Customer' | translate}}</p> -->
+<div
+    style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
+    <p style="margin-bottom: 0px;">{{'Edit Customer' | translate}}</p>
+</div>
+  <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
+  <div class="row" style="margin-top: 8px;">
+      <div class="col-md-6">
+          <!-- <span style="padding: 17px 0px 0px 10px;">{{'User ID' | translate}}</span> -->
+              <md-form-field class="example-full-width width">
+                      <input mdInput class="no-spin" [(ngModel)]="userId" name="userId" placeholder="User Id" required/>
+                      <md-error class="required">{{'Enter User Id' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+        <div class="col-md-6">
+<!-- <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span> -->
+<md-form-field class="example-full-width width"
+    >
+    <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="First name" required />
+    <md-error class="required">{{'Enter First name' | translate}}</md-error>
+</md-form-field>
+
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span> -->
+        <md-form-field class="example-full-width width"
+            >
+            <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname"
+                placeholder="{{'Enter Last name' | translate}}" required />
+            <md-error class="required">{{'Enter Last name' | translate}}</md-error>
+        </md-form-field>
+        </div>
+        <div class="col-md-6">
+<!-- <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span> -->
+<md-form-field class="example-full-width width" >
+    <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="Email" required />
+    <md-error class="required">{{'Enter email' | translate}}</md-error>
+</md-form-field>
+            </div>
+    </div>
+    <div class="row">
+        <div class="col-md-6">
+        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span> -->
+        <md-form-field class="example-full-width width" >
+            <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum"
+                placeholder="{{'Mobile number' | translate}}" required />
+            <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
+        </md-form-field>
+        </div>
+        <div class="col-md-6">
+<div style="display: inline-flex;width: 75%;" *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
+    <span >{{'Expiration date' | translate}}</span>
+    <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+    </owl-date-time>
+</div>
+            </div>
+        
+    </div>
+
+    <div class="row">
+        <div class="col-md-6">
+        <!-- <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span> -->
+        <md-form-field class="example-full-width width"
+           >
+            <input mdInput class="no-spin" [(ngModel)]="address" name=" address"
+                placeholder="{{'Address' | translate}}" required />
+            <md-error class="required">{{'Enter Address' | translate}}</md-error>
+        </md-form-field>
+        </div>
+        <div class="col-md-6">
+        </div>
+    </div>
+
+    <span data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" (click)="expand(is_expand=!is_expand)" aria-controls="collapseExample"
+        style="font-size: 15px;font-weight: 500;color: #615c5c;text-align: left; ">{{'EMERGENCY CONTACT' |
+        translate}}</span>
+    
+    <div class="collapse" id="collapseExample">
+        <form [formGroup]="emergencyForm">
+            <div class="row" style="margin:10px">
+                <div class="col-6" style="border: solid 1px black;
+        margin-top: 8px;">
+                    <h6 style="text-align: center;margin-top: 10px;">Contact Details 1</h6>
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_name1" placeholder="{{'name' | translate}}"
+                            name="name">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_cell1"
+                            placeholder="{{'Mobile Number 1' | translate}}" name="emg_cell1">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_cell2"
+                            placeholder="{{'Mobile Number 2' | translate}}" name="emg_cell2">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_phone1"
+                            placeholder="{{'Phone Number 1' | translate}}" name="emg_phone1">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_phone2"
+                            placeholder="{{'Phone Number 2' | translate}}" name="emg_phone2">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+                </div>
+                <div class="col-6" style="border: solid 1px black;
+        margin-top: 8px;">
+                    <h6 style="text-align: center;margin-top: 10px;">Contact Details 2</h6>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_name2" placeholder="{{'name' | translate}}"
+                            name="name">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_cell3"
+                            placeholder="{{'Mobile Number 1' | translate}}" name="emg_cell1">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_cell4"
+                            placeholder="{{'Mobile Number 2' | translate}}" name="emg_cell2">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_phone3"
+                            placeholder="{{'Phone Number 1' | translate}}" name="emg_phone1">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+                    <md-form-field class="example-full-width width">
+                        <input mdInput type="text" formControlName="emg_phone4"
+                            placeholder="{{'Phone Number 2' | translate}}" name="emg_phone2">
+                        <!-- <md-error class="pattern">{{'Please Enter address' | translate}}</md-error> -->
+                    </md-form-field>
+    
+    
+                </div>
+    
+    
+            </div>
+        </form>
+    </div>
+
+<div class="row" style="padding-left:38%">
+    <button class="btn btn-primary btn-block/" (click)="editCustmer()"
+        style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT CUSTOMER</button>
+</div>
+    <!-- </div> -->
+  <!-- <div class="row">
+      <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span>
+          <md-form-field class="example-full-width width" >
+                  <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="Enter First name" required/>
+                  <md-error class="required">{{'Enter First name' | translate}}</md-error>
+              </md-form-field>
+  </div> -->
+  <!-- <div class="row">
+          <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span>
+          <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 67px;display: inline-block;">
+                  <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname" placeholder="{{'Enter Last name' | translate}}" required/>
+                  <md-error class="required">{{'Enter Last name' | translate}}</md-error>
+              </md-form-field>
+  </div> -->
+  <!-- <div class="row">
+          <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span>
+          <md-form-field class="example-full-width width" style="float:left;width: 84%;padding-left: 98px;display: inline-block;">
+                  <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="Enter email" required/>
+                  <md-error class="required">{{'Enter email' | translate}}</md-error>
+              </md-form-field>
+  </div>
+  <div class="row">         
+          <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span>
+          <md-form-field class="example-full-width width" style="float:left;width: 70%;padding-left: 30px;display: inline-block;">
+                  <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum" placeholder="{{'Enter mobile number' | translate}}" required/>
+                  <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
+              </md-form-field>
+  </div> -->
+  <!-- <div class="row">
+          <span style="padding: 17px 0px 0px 10px;">Password </span>
+          <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 69px;display: inline-block;">
+                  <input mdInput class="no-spin" [(ngModel)]="password" name=" password" placeholder="Enter password" required/>
+                  <md-error class="required">Enter password</md-error>
+              </md-form-field>
+  </div>
+
+  <div class="row">
+          <span style="padding: 17px 0px 0px 10px;">Confirm password </span>
+          <md-form-field class="example-full-width width" style="float:left;width: 66%;padding-left: 30px;display: inline-block;">
+                  <input mdInput class="no-spin" [(ngModel)]="cnfrmPass" name=" cnfrmPass" placeholder="Confirm password" required/>
+                  <md-error class="required">Confirm password</md-error>
+              </md-form-field>
+  </div> -->
+  <!-- <div style="display: inline-flex;width: 75%;" *ngIf="((superadminAccess == 'ON')||(this.superAdmin==true))">
+        <span style="float: left;padding-bottom: 2px;margin-right: 58px;">{{'Expiration date' | translate}}</span>
+        <owl-date-time [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>  -->
+<!-- 
+  <div class="row">
+        <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span>
+        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 75px;display: inline-block;">
+                <input mdInput class="no-spin" [(ngModel)]="address" name=" address" placeholder="{{'Enter Address' | translate}}" required/>
+                <md-error class="required">{{'Enter Address' | translate}}</md-error>
+            </md-form-field>
+</div> -->
+  <!-- <div class="row" style="padding-left:38%">  
+              <button class="btn btn-primary btn-block/"(click)="editCustmer()" style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT CUSTOMER</button>
+      </div> -->
+      
+  </div>  
+  <div *ngIf="pageId == 'delete'">
+        <h4 style="text-align: center;">{{alertLabel | translate}}</h4>
+        <h5 style="text-align: center;margin-top: 5%;font-size: 1.8rem;">{{'Are you sure ?' | translate}}</h5>
+        <p style="text-align: center;font-size: 1.5rem;">{{alertLabel_1 | translate}}</p>
+        <button class="btn btn-primary btn-block/"(click)="deleteResponse('yes')" style="background:green;cursor:pointer;width: 159px;height: 44px;margin-left: 12%;">Yes, Delete it!</button>
+        <button class="btn btn-primary btn-block/"(click)="deleteResponse('no')" style="background:red;cursor:pointer;width: 159px;height: 44px;margin-left: 6%;">{{'Cancel'}}</button>
+ </div>
+<div *ngIf="pageId == 'viewDoc'">
+   <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+   <flash-messages></flash-messages>
+    <h4 style="text-align: center;margin-bottom: 5%;">Documents
+    <div class="float-right">
+        <!-- <label style="font-size: medium;">KYC Status:</label>
+        <select style="font-size:medium;" [(ngModel)]="data.dealer_payload.kycStatus" (ngModelChange)="changeKYC($event)">
+            <option *ngFor="let item of kycStatus" [value]="item.Name">{{item.Name}}</option>
+        </select> -->
+        <!-- <button class="btn btn-danger" style="border-radius: 50%;background-color: red;font-size: small;" (click)="dialogRef.close()"><i class="fa fa-times" aria-hidden="true"></i></button> -->
+    </div>
+    </h4>
+    <div [hidden]="doclist">
+        <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
+            <thead style="background-color:#A2C523;color: white;">
+                <tr>
+                    <th>Document Name</th>
+                    <th>Document number</th>
+                    <th>Image</th>
+                    <th style="text-align: center;padding-left: 10%;">Action</th>
+            </thead>
+            <tbody>
+                <tr *ngFor="let doc of testDocuments; let i = index">
+                    <td style="cursor:pointer">{{doc.doctype}}</td>
+                    <td style="cursor:pointer">{{doc.phone}}</td>
+                    <td>
+                        <h4 *ngIf="doc.ext=='pdf'">
+                            <a href={{doc.image}} target="_blank"><i class="fa fa-file-pdf"></i></a>
+                        </h4>
+                        <span *ngIf="doc.ext!='pdf'">
+                            <img style="width: 100px;" [src]="'https://www.oneqlik.in/'+doc.image" (click)="openModal(template,doc)">
+                        </span>
+                        </td>
+                    <td style="cursor:pointer">
+                        <button class="btn btn-primary btn-block/" (click)="downloadDoc(doc)" style="background: green;cursor: pointer;float: right;border:none;">Download</button>
+                        <!-- <button class="btn btn-primary btn-block/" [disabled]="disableDelete" (click)="SaveDocuments('deldoc',i)" style="background: #f90808;cursor: pointer;float: right;border-color: transparent;margin-right: 16px;border:none;">Delete</button> -->
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="row text-center mt-2" style="justify-content: center;">
+            <!-- <button class="btn btn-primary m-1" (click)="Adddocuments(doc)">Add <i class="fa fa-plus-circle"></i></button> -->
+            <button class="btn btn-success m-1" [disabled]="data.dealer_payload.kycStatus=='Approved'" (click)="changeKYC('Approved')">Approve <i class="fa fa-check-circle"></i></button>
+            <button class="btn btn-danger m-1" [disabled]="data.dealer_payload.kycStatus=='Approved'" (click)="changeKYC('Reject')">Reject <i class="fa fa-times-circle"></i></button>
+
+            <!-- <button class="btn btn-primary btn-block/" (click)="Adddocuments(doc)" style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Add</button>
+            <button class="btn btn-primary btn-block/" (click)="changeKYC('Approved')"
+                style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Approve</button>
+                <button class="btn btn-primary btn-block/" (click)="changeKYC('Reject')"
+                    style="background: green;cursor: pointer;border: none;width: 125px;margin-right: 43%;">Reject</button> -->
+        </div>
+    </div>
+    <!-- <div [hidden]="!doclist">
+        <button class="btn btn-primary btn-block/" (click)="Adddocuments(doc)" style="background: green;cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Add</button>
+    </div> -->
+
+   
+
+    <!-- <div [hidden]="!showUpload" style="margin-top:12%">
+    <div class="row">
+            <div class = "col-sm-6">
+                <p>Upload Documents * </p>
+            </div>
+            <div class = "col-sm-6">
+                <button mdTooltip="upload Documents"  style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button> 
+            </div>
+        </div>
+        <div style="overflow: scroll;overflow-x: hidden;" [ngClass]="{'rowHeight':docRow}">
+        <div class= "row" style="margin-bottom: 2%;" *ngFor="let data of imageuploadObject; let i = index">
+            <div class="col-sm-2" >
+                    <md-select (ngModelChange)="documentType($event)" [(ngModel)] = "data.doctype" placeholder = "Doc Type">
+                      <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+                    </md-select>
+            </div>
+             <div class="col-sm-10" style="margin-top: 2%;">
+                <input type="text" style ="margin-right: 2%;margin-left: 7px;" [(ngModel)]="data.phone" placeholder="Doc number">
+                <span><input type="file" class="btn btn btn-success" style ="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:36%;" (change)="onFileChanged($event)" ></span>
+                <span><button class="btn btn btn-success" (click)="onUpload(i)">{{uploadStatus}}</button></span>
+                <span><button mdTooltip="Delete field" style="padding:0px;border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="DeleteDocumentsField(i)"><md-icon style="float: right;width:50px;height:50px;color:red; cursor:pointer">delete</md-icon></button></span>
+            </div>
+        </div>
+    </div>
+    <button [disabled]="!ifuploadArr" class="btn btn-primary btn-block/" (click)="SaveDocuments(editdoc,null)" style="cursor: pointer;float: right;border: none;width: 125px;margin-right: 43%;">Save</button>
+</div> -->
+</div>
+</div>
+
+
+<ng-template #template>
+    <div class="modal-header">
+        <h4 class="modal-title pull-left">{{header}}</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
+    <div class="modal-body">
+        
+        <img style="width: -webkit-fill-available;" src={{image}}>
+
+    </div>
+</ng-template>
\ No newline at end of file
diff --git a/src/app/edit-costumer/edit-costumer.component.scss b/src/app/edit-costumer/edit-costumer.component.scss
new file mode 100644
index 0000000..75dfca2
--- /dev/null
+++ b/src/app/edit-costumer/edit-costumer.component.scss
@@ -0,0 +1,7 @@
+.rowHeight {
+  height: 145px;
+  overflow: auto;
+}
+.row {
+  margin-left: 8px;
+}
diff --git a/src/app/edit-costumer/edit-costumer.component.spec.ts b/src/app/edit-costumer/edit-costumer.component.spec.ts
new file mode 100644
index 0000000..6158a22
--- /dev/null
+++ b/src/app/edit-costumer/edit-costumer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditCostumerComponent } from './edit-costumer.component';
+
+describe('EditCostumerComponent', () => {
+  let component: EditCostumerComponent;
+  let fixture: ComponentFixture<EditCostumerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditCostumerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditCostumerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-costumer/edit-costumer.component.ts b/src/app/edit-costumer/edit-costumer.component.ts
new file mode 100644
index 0000000..e2ddabe
--- /dev/null
+++ b/src/app/edit-costumer/edit-costumer.component.ts
@@ -0,0 +1,469 @@
+import { Component, OnInit, Inject, TemplateRef } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+import { saveAs } from 'file-saver';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap';
+declare var swal: any;
+
+@Component({
+  selector: 'app-edit-costumer',
+  templateUrl: './edit-costumer.component.html',
+  styleUrls: ['./edit-costumer.component.scss'],
+
+
+})
+export class EditCostumerComponent implements OnInit {
+  custId: any;
+   kycStatus=[{Name:'Approved',value:'Approved'},{Name:'Reject',value:'Reject'},{Name:'Pending',value:'Pending'}]
+  dealerInfo:any;
+  dealerEditForm:any;
+  firstName:any;
+  lastName:any;
+  email:any;
+  is_expand:boolean=false;
+  PhoneNum:any;
+  password:any;
+  cnfrmPass:any;
+  image
+    emergencyForm:FormGroup;
+
+  userId:any;
+  address:any;
+  date=new Date();
+  expDate = new Date(this.date.getFullYear()+1,this.date.getMonth(), this.date.getDate()).toLocaleString();
+  pageId: any;
+  testDocuments: any=[];
+  doclist: boolean=false;
+  imageuploadObject = [];
+  documentList = [
+    {
+      "docId": "Adhar card",
+      "docName": "Adhar Card"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+  showUpload: boolean=false;
+  Load: boolean;
+  uploadStatus: any = 'Upload';
+  ifuploadArr: boolean ;
+  useridForDocUpload: any;
+  disableDelete: boolean;
+  errorMsg: string;
+  showError: boolean = false;
+  dealerStatus: any;
+  superAdmin: any;
+  superadminAccess: any;
+  label: any;
+   modalRef: BsModalRef;
+  header: any;
+  constructor(public dialogRef: MdDialogRef<EditCostumerComponent>,private modalService: BsModalService,public thisDialogRef: MdDialogRef<EditCostumerComponent>,private fb:FormBuilder,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService) {
+      var  initialObj = {
+        doctype:'',
+        image:'',
+        phone:''
+      }
+      this.imageuploadObject.push(initialObj);
+     }
+     alertLabel:any = 'Delete Dealer';
+     alertLabel_1:any = 'you want to delete dealer';
+
+
+     ngOnInit() {
+    if(this.data.dealer_payload.emergency_contact){
+
+      this.emergencyForm=this.fb.group({
+       emg_name1:[this.data.dealer_payload.emergency_contact.contact1.name?this.data.dealer_payload.emergency_contact.contact1.name:''],
+       emg_name2:[this.data.dealer_payload.emergency_contact.contact2.name?this.data.dealer_payload.emergency_contact.contact2.name:''],
+       emg_cell1:[this.data.dealer_payload.emergency_contact.contact1.cell1?this.data.dealer_payload.emergency_contact.contact1.cell1:''],
+       emg_cell2:[this.data.dealer_payload.emergency_contact.contact1.cell2?this.data.dealer_payload.emergency_contact.contact2.cell2:''],
+       emg_cell3:[this.data.dealer_payload.emergency_contact.contact2.cell1?this.data.dealer_payload.emergency_contact.contact1.cell1:''],
+       emg_cell4:[this.data.dealer_payload.emergency_contact.contact2.cell2?this.data.dealer_payload.emergency_contact.contact2.cell2:''],
+       emg_phone1:[this.data.dealer_payload.emergency_contact.contact1.phone1?this.data.dealer_payload.emergency_contact.contact1.phone1:''],
+       emg_phone2:[this.data.dealer_payload.emergency_contact.contact1.phone2?this.data.dealer_payload.emergency_contact.contact1.phone2:''],
+       emg_phone3:[this.data.dealer_payload.emergency_contact.contact2.phone1?this.data.dealer_payload.emergency_contact.contact2.phone1:''],
+       emg_phone4:[this.data.dealer_payload.emergency_contact.contact2.phone2?this.data.dealer_payload.emergency_contact.contact2.phone2:'']
+ 
+     })
+    }else{
+      this.emergencyForm=this.fb.group({
+       emg_name1:[''],
+       emg_name2:[''],
+       emg_cell1:[''],
+       emg_cell2:[''],
+       emg_cell3:[''],
+       emg_cell4:[''],
+       emg_phone1:[''],
+       emg_phone2:[''],
+       emg_phone3:[''],
+       emg_phone4:['']
+ 
+     })
+    }
+    console.log("Emergency Contacts==>",this.data.dealer_payload.emergency_contact);
+    
+    this.dealerInfo=this.data;
+    console.log(this.dealerInfo);
+    this.userId = this.dealerInfo.dealer_payload.user_id?this.dealerInfo.dealer_payload.user_id:'';
+     console.log(this.userId);
+    this.expDate = this.dealerInfo.dealer_payload.expire_date?this.dealerInfo.dealer_payload.expire_date:'';
+    this.firstName = this.dealerInfo.dealer_payload.first_name?this.dealerInfo.dealer_payload.first_name:'';
+    this.lastName = this.dealerInfo.dealer_payload.last_name?this.dealerInfo.dealer_payload.last_name:'';
+    this.email = this.dealerInfo.dealer_payload.email?this.dealerInfo.dealer_payload.email:'';
+    this.PhoneNum = this.dealerInfo.dealer_payload.phone?this.dealerInfo.dealer_payload.phone:'';
+    this.address =this.dealerInfo.dealer_payload.address?this.dealerInfo.dealer_payload.address:'';
+    this.custId = this.dealerInfo.dealer_payload._id?this.dealerInfo.dealer_payload._id:'';
+    this.pageId = this.dealerInfo.dealer_payload.ID;
+  
+    if(this.dealerInfo.dealer_payload){
+      if(this.dealerInfo.dealer_payload.page === 'cust'){
+        this.alertLabel = 'Delete Customer';
+        this.alertLabel_1 = 'you want to delete Customer'
+      }
+    }
+    // console.log("image Document Object=>",this.data.dealer_payload.imageDoc);
+
+    this.dealerStatus = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    // 'superadmin :on'
+    // 'isDealer : true'
+    this.superadminAccess = localStorage.getItem('superadmin');
+
+    console.log("this.superadminAccess,this.dealerStatus",this.superadminAccess,this.dealerStatus);
+    
+    console.log("val=",this.pageId);
+    this.testDocuments = this.data.dealer_payload.imageDoc;
+    for(var i=0;i<this.testDocuments.length;i++){
+      if(this.testDocuments[i].image){
+        var ext=this.testDocuments[i].image.split('.').pop(); 
+        this.testDocuments[i].ext=ext
+        this.testDocuments[i].image=(this.testDocuments[i].image).substring(6);
+
+      }
+    }
+    if(this.testDocuments){
+      if(this.testDocuments.length == 0){
+        this.doclist = true;
+      }
+    }
+   
+    if(this.pageId == 'viewDoc'){
+      console.log(this.data);
+       this.useridForDocUpload = this.data.dealer_payload.dealer_id?this.data.dealer_payload.dealer_id:this.data.dealer_payload._id
+      console.log(this.useridForDocUpload);
+    }
+  }
+
+  editCustmer(){
+    // console.log("Custmer method");
+     var emergencyContact={
+          contact1:{
+            name:this.emergencyForm.value.emg_name1,
+            cell1:this.emergencyForm.value.emg_cell1,
+            cell2:this.emergencyForm.value.emg_cell2,
+            phone1:this.emergencyForm.value.emg_phone1,
+            phone2:this.emergencyForm.value.emg_phone2
+
+          },
+           contact2:{
+            name:this.emergencyForm.value.emg_name2,
+            cell1:this.emergencyForm.value.emg_cell3,
+            cell2:this.emergencyForm.value.emg_cell4,
+            phone1:this.emergencyForm.value.emg_phone3,
+            phone2:this.emergencyForm.value.emg_phone4
+
+          }
+        }
+    var editDealerPayload = {
+      first_name : this.firstName,
+      last_name:this.lastName,
+      user_id:this.userId,
+      // email:this.email,
+      // phone:this.PhoneNum,
+      address:this.address,
+      contactid:this.custId,
+      expire_date:new Date(this.expDate),
+       emergencyContact:emergencyContact
+    
+    }
+    // status: true
+    // this.dealerInfo.dealer_payload.status
+    if(this.PhoneNum !== this.dealerInfo.dealer_payload.phone){
+      editDealerPayload['phone'] = this.PhoneNum
+    }
+    if(this.email!== this.dealerInfo.dealer_payload.email){
+      editDealerPayload['email'] = this.email
+    }
+    this.contactService.editDealer(editDealerPayload)
+      .subscribe(res=>{
+        // console.log(res);
+        if(res){
+          // console.log(res);
+          this.thisDialogRef.close("success");
+      }  
+      },err=>{
+        var that = this;
+        console.log(JSON.parse(err._body).message);
+        var errorM = (JSON.parse(err._body).message).split(":");
+        console.log(errorM);
+        var mainErr =errorM[2];
+        if(mainErr == " phone_1 dup key"){
+          this.errorMsg = "Phone number already exists";
+        }else if(mainErr == " email_1 dup key"){
+          this.errorMsg = "Email id already exists";
+        }else{
+          this.errorMsg = "Internal server error";
+        }
+
+        this.showError  = true;
+      
+        var error =  setTimeout(function(){
+          clearInterval(error);
+          that.showError = false; 
+        },5000)
+      })
+  }
+
+  deleteResponse(action){
+    if(action =='yes'){
+      this.thisDialogRef.close("yes");
+    }else{
+      this.thisDialogRef.close("no");
+    }
+  
+  }
+
+
+
+  downloadDoc(doc:any){
+    console.log(doc.image);
+    var imageLink = doc.image; 
+    var filetext  = imageLink.split('.');
+    console.log(filetext[1]);
+    
+    this.contactService.DownloadDocument(doc.image).subscribe(res=>{
+      console.log(res);
+      this.saveToFileSystem(res,doc,filetext[1]);
+    },err=>{
+      console.log(err);
+    })
+  }
+
+  private saveToFileSystem(response,doc,fileex) { 
+    console.log(response._body);
+    if(fileex == 'pdf'){
+      console.log("Inside pdf");
+      var blob = new Blob([response._body], { type: "application/pdf" });
+    }else{
+      var blob = new Blob([response._body], { type: "image/png" });
+    }
+   
+    var filename = doc.doctype+'_'+doc.phone;
+    // console.log(filename);
+    saveAs(blob,filename);
+  }
+
+  deleteDoc(doc,index){
+    console.log(index);
+    console.log(doc);
+
+  }
+
+  Adddocuments(doc){
+    console.log(doc);
+    this.disableDelete = true;
+    this.showUpload = true;
+    if(this.imageuploadObject.length == 0){
+      this.ifuploadArr = false;
+    }
+  }
+
+  docRow:boolean=false;
+  AddDocumentsField(addedRow:any){
+    console.log("Inside function !!!");
+      if(addedRow){    
+        this.docRow = true;
+      }
+       var obj={doctype:'',image:'',phone:''};
+       this.imageuploadObject.push(obj);
+       console.log(this.imageuploadObject);
+  }
+
+  DeleteDocumentsField(index){
+    console.log(this.imageuploadObject.length);
+    if(this.imageuploadObject.length == 1){
+      this.docRow = false;
+      this.showUpload = false;
+    }
+    this.imageuploadObject.splice(index, 1);
+
+  }
+  
+  documentType(docType){
+    console.log("doctypeObject=>",docType);
+
+  }
+  selectedFile: File;
+  onFileChanged(event) { 
+    console.log(event.target.files[0]);
+    this.selectedFile = <File>event.target.files[0];
+    console.log(this.selectedFile); 
+  }
+
+  onUpload(imgIndex) {
+    console.log(imgIndex);
+    console.log(this.imageuploadObject);
+    const fd = new FormData();
+    console.log("selected file name =>",this.selectedFile.name);
+    if(this.selectedFile.name == " "){
+      swal(
+        'Upload Error',
+        'Please select document type before upload !!!',
+        'error'
+      )
+    }else{
+      fd.append('photo',this.selectedFile,this.selectedFile.name)
+      console.log("imgURL=>",fd) ;
+      this.Load = true;
+      this.contactService.imageupload(fd)
+      .subscribe(res=>{
+        this.Load = false;
+        this.ifuploadArr = true;
+   
+        console.log(res);
+        var resImage ='';
+        resImage = res['_body'];
+        console.log(res['_body']);
+        this.imageuploadObject[imgIndex].image = resImage;
+         console.log(this.imageuploadObject);
+    
+      },err=>{
+        this.Load= false;
+        this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+      })
+    }
+   }
+
+
+   SaveDocuments(actionString,objIndex){
+    console.log(this.imageuploadObject);
+    console.log("Save");
+    var imageuploadArr = {
+      _id : this.useridForDocUpload
+    }
+    if(actionString == 'deldoc'){
+      this.testDocuments.splice(objIndex,1);
+      console.log("testArray after deleting doc =>",this.testDocuments); 
+    }
+     for(var d = 0 ;d <this.imageuploadObject.length;d++){
+      if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+            this.imageuploadObject.splice(d,1);         
+      }
+    }
+   console.log(this.imageuploadObject);
+   for(var j = 0;j< this.testDocuments.length;j++){
+        console.log(this.testDocuments[j]);
+        this.imageuploadObject.push(this.testDocuments[j]);
+   }
+   
+   imageuploadArr['imageDoc'] = this.imageuploadObject;
+   console.log(this.imageuploadObject.length);
+   this.contactService.updateImage(imageuploadArr).subscribe(res=>{
+     console.log(res);
+     if(actionString != 'deldoc'){
+      this.thisDialogRef.close("imageupdated"); 
+     }   
+     if(actionString == 'deldoc'){
+      this.imageuploadObject = [];
+     }
+   },err=>{
+    this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+   })
+   }
+
+   expand(value){
+     console.log(value);
+     if(value){
+       document.getElementById('container').style.width='80vh'
+     }else{
+       
+     }
+     
+
+   }
+
+   
+changeKYC(event){
+  console.log(event);
+  var req={
+    user:this.data.dealer_payload._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+    //  this.tost1('kyc');
+    this.dialogRef.close('yes')
+  })
+  
+}
+
+openModal(template: TemplateRef<any>,data) {
+    this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+    this.header=data.doctype
+    this.image='https://www.oneqlik.in/'+data.image
+  }
+}
+
+
+// swal({
+//   title: 'Are you sure?',
+//   text: "You won't be able to revert this!",
+//   type: 'warning',
+//   showCancelButton: true,
+//   confirmButtonColor: '#3085d6',
+//   cancelButtonColor: '#d33',
+//   confirmButtonText: 'Yes, delete it!'
+// }).then((result: { value: boolean; }) => {
+//   if (result) {
+//               swal(
+//                   'Deleted!',
+//                   'Your file has been deleted.',
+//                   'success'
+//                 )
+    
+//               swal(
+//                   'Server Error',
+//                   'Error occured while deleting POI , Please try after sometime !!!',
+//                   'error'
+//                 )
+         
+//   }
+// })
\ No newline at end of file
diff --git a/src/app/edit-dealer/edit-dealer.component.html b/src/app/edit-dealer/edit-dealer.component.html
new file mode 100644
index 0000000..9d39f37
--- /dev/null
+++ b/src/app/edit-dealer/edit-dealer.component.html
@@ -0,0 +1,75 @@
+<div class="dealer_edit" *ngIf="pageId == 'edit'">
+    <p style="font-size: 24px;color: #615f5f;" >{{'Edit Dealer' | translate}}</p>
+    <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
+    <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">{{'User ID' | translate}}</span>
+                <md-form-field class="example-full-width width" style="float: left;width: 83%;padding-left: 89px;display: inline-block;">
+                        <input mdInput class="no-spin" [(ngModel)]="userId" name="userId" placeholder="{{'Enter User Id' | translate}}" required/>
+                        <md-error class="required">{{'Enter User Id' | translate}}</md-error>
+                    </md-form-field>
+        </div>
+    <div class="row">
+        <span style="padding: 17px 0px 0px 10px;">{{'First name' | translate}}</span>
+            <md-form-field class="example-full-width width" style="float: left;width: 78%;padding-left: 67px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="firstName" name="firstname" placeholder="{{'Enter First name' | translate}}" required/>
+                    <md-error class="required">{{'Enter First name' | translate}}</md-error>
+                </md-form-field>
+    </div>
+    <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">{{'Last name' | translate}}</span>
+            <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 67px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="lastName" name=" lastname" placeholder="{{'Enter Last name' | translate}}" required/>
+                    <md-error class="required">{{'Enter Last name' | translate}}</md-error>
+                </md-form-field>
+    </div>
+    <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">{{'Email' | translate}} </span>
+            <md-form-field class="example-full-width width" style="float:left;width: 84%;padding-left: 98px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="email" name="email" placeholder="{{'Enter email' | translate}}" required/>
+                    <md-error class="required">{{'Enter email' | translate}}</md-error>
+                </md-form-field>
+    </div>
+    <div class="row">         
+            <span style="padding: 17px 0px 0px 10px;">{{'Mobile number' | translate}}</span>
+            <md-form-field class="example-full-width width" style="float:left;width: 70%;padding-left: 30px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="PhoneNum" name=" phoneNum" placeholder="{{'Enter mobile number' | translate}}" required/>
+                    <md-error class="required">{{'Enter mobile number' | translate}}</md-error>
+                </md-form-field>
+    </div>
+    <div style="display: inline-flex;width: 75%;" >
+        <span style="float: left;padding-bottom: 2px;margin-right: 58px;">{{'Expiration date' | translate}}</span>
+        <owl-date-time  [(ngModel)]="expDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div> 
+    <!-- <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">Password </span>
+            <md-form-field class="example-full-width width" style="float:left;width: 78%;padding-left: 69px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="password" name=" password" placeholder="Enter password" required/>
+                    <md-error class="required">Enter password</md-error>
+                </md-form-field>
+    </div>
+    <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">Confirm password </span>
+            <md-form-field class="example-full-width width" style="float:left;width: 66%;padding-left: 30px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="cnfrmPass" name=" cnfrmPass" placeholder="Confirm password" required/>
+                    <md-error class="required">Confirm password</md-error>
+                </md-form-field>
+    </div> -->
+    <div class="row">
+            <span style="padding: 17px 0px 0px 10px;">{{'Address' | translate}}</span>
+            <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 75px;display: inline-block;">
+                    <input mdInput class="no-spin" [(ngModel)]="address" name=" address" placeholder="{{'Enter Address' | translate}}" required/>
+                    <md-error class="required">{{'Enter Address' | translate}}</md-error>
+                </md-form-field>
+    </div>
+    
+    <div class="row" style="padding-left:38%">  
+                <button class="btn btn-primary btn-block/"(click)="editDealer()" style="background:green;cursor:pointer;width: 159px;height: 44px;">EDIT DEALER</button>
+        </div>
+    </div>
+    <div *ngIf="pageId == 'delete'">
+        <h4 style="text-align: center;">{{'Delete Dealer' | translate}}</h4>
+        <h5 style="text-align: center;margin-top: 5%;font-size: 1.8rem;">{{'Are you sure ?' | translate}}</h5>
+        <p style="text-align: center;font-size: 1.5rem;">you want to delete dealer</p>
+        <button class="btn btn-primary btn-block/"(click)="deleteResponse('yes')" style="background:green;cursor:pointer;width: 159px;height: 44px;margin-left: 12%;">{{"Yes, Delete it!" | translate}}</button>
+        <button class="btn btn-primary btn-block/"(click)="deleteResponse('no')" style="background:red;cursor:pointer;width: 159px;height: 44px;margin-left: 6%;">{{'Cancel' | translate}}</button>
+    </div>
\ No newline at end of file
diff --git a/src/app/edit-dealer/edit-dealer.component.scss b/src/app/edit-dealer/edit-dealer.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/edit-dealer/edit-dealer.component.spec.ts b/src/app/edit-dealer/edit-dealer.component.spec.ts
new file mode 100644
index 0000000..b3fa83b
--- /dev/null
+++ b/src/app/edit-dealer/edit-dealer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditDealerComponent } from './edit-dealer.component';
+
+describe('EditDealerComponent', () => {
+  let component: EditDealerComponent;
+  let fixture: ComponentFixture<EditDealerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditDealerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditDealerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-dealer/edit-dealer.component.ts b/src/app/edit-dealer/edit-dealer.component.ts
new file mode 100644
index 0000000..f0616c2
--- /dev/null
+++ b/src/app/edit-dealer/edit-dealer.component.ts
@@ -0,0 +1,119 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-edit-dealer',
+  templateUrl: './edit-dealer.component.html',
+  styleUrls: ['./edit-dealer.component.scss']
+})
+export class EditDealerComponent implements OnInit {
+
+  dealerInfo:any;
+  dealerEditForm:any;
+  firstName:any;
+  lastName:any;
+  email:any;
+  PhoneNum:any;
+  password:any;
+  cnfrmPass:any;
+  userId:any;
+  address:any;
+  date=new Date();
+  expDate = new Date(this.date.getFullYear()+1,this.date.getMonth(), this.date.getDate()).toLocaleString();
+  pageId: any;
+  errorMsg: any;
+  dealerStatus: any;
+  superAdmin: any;
+
+  constructor(public dialogRef: MdDialogRef<EditDealerComponent>,public thisDialogRef: MdDialogRef<EditDealerComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+        this.dealerInfo=data;
+        console.log(this.dealerInfo);   
+        this.userId = this.dealerInfo.dealer_payload.user_id?this.dealerInfo.dealer_payload.user_id:'';
+        this.firstName = this.dealerInfo.dealer_payload.first_name?this.dealerInfo.dealer_payload.first_name:'';
+        this.lastName = this.dealerInfo.dealer_payload.last_name?this.dealerInfo.dealer_payload.last_name:'';
+        this.email = this.dealerInfo.dealer_payload.email?this.dealerInfo.dealer_payload.email:'';
+        this.PhoneNum = this.dealerInfo.dealer_payload.phone?this.dealerInfo.dealer_payload.phone:'';
+        this.address =this.dealerInfo.dealer_payload.address?this.dealerInfo.dealer_payload.address:'';
+        this.expDate = this.dealerInfo.dealer_payload.expire_date?this.dealerInfo.dealer_payload.expire_date:'';
+        console.log(this.dealerInfo);
+        // this.pageId = this.dealerInfo.id;
+        // console.log("PAGEID=>",this.pageId);
+
+       
+     
+     }
+
+     useridd:any;
+
+  ngOnInit() {
+    this.pageId = this.dealerInfo.dealer_payload.ID;
+    console.log("val=",this.pageId);
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+  showError :boolean = false;
+
+  editDealer(){
+    var editDealerPayload = {
+      first_name : this.firstName,
+      last_name:this.lastName,
+      address:this.address,
+      user_id:this.userId,  
+      contactid:this.dealerInfo.dealer_payload._id,
+      expire_date:new Date(this.expDate),
+     
+    }
+    // this.dealerInfo.dealer_payload.status
+    if(this.PhoneNum !== this.dealerInfo.dealer_payload.phone){
+      editDealerPayload['phone'] = this.PhoneNum
+    }
+    if(this.email!== this.dealerInfo.dealer_payload.email){
+      editDealerPayload['email'] = this.email
+    }
+   
+    this.contactService.editDealer(editDealerPayload)
+      .subscribe(res=>{
+      
+        // console.log(res);
+        if(res){
+          // console.log(res);
+          this.thisDialogRef.close("success");
+      }  
+      },err=>{
+        var that = this;
+        console.log(JSON.parse(err._body).message);
+        var errorM = (JSON.parse(err._body).message).split(":");
+        var mainErr =errorM[2];
+        if(mainErr == " phone_1 dup key"){
+          this.errorMsg = "Phone number already exists";
+        }else if(mainErr == " email_1 dup key"){
+          this.errorMsg = "Email id already exists";
+        }else{
+          this.errorMsg = "Internal server error";
+        }
+
+        this.showError  = true;
+      
+        var error =  setTimeout(function(){
+          clearInterval(error);
+          that.showError = false; 
+        },5000)
+
+      })
+
+  }
+
+
+  deleteResponse(action){
+    if(action =='yes'){
+      this.thisDialogRef.close("yes");
+    }else{
+      this.thisDialogRef.close("no");
+    }
+  
+  }
+
+
+
+}
diff --git a/src/app/edit-device-model/edit-device-model.component.html b/src/app/edit-device-model/edit-device-model.component.html
new file mode 100644
index 0000000..462d20d
--- /dev/null
+++ b/src/app/edit-device-model/edit-device-model.component.html
@@ -0,0 +1,92 @@
+<div>
+  <div>
+    <header>
+      <h4 style="text-align: center;margin-bottom: 7%;">{{'Edit Model' | translate}}</h4>
+    </header>
+  </div>
+  <div *ngIf="!showError">
+      <flash-messages style="float: center;"></flash-messages>
+  </div>
+    <div class="row">
+      <div class="col-sm-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="devType" placeholder="{{'Enter device model' | translate}}" name="Device Model">
+          </md-form-field>          
+      </div>
+      <div class="col-sm-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="cnfigCMD" placeholder="{{'Configuration command' | translate}}" name="Config command">
+          </md-form-field>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-6">
+            <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="locCmd" placeholder="{{'Location command' | translate}}" name="Location command">
+            </md-form-field>          
+        </div>
+        <div class="col-sm-6">
+            <md-form-field class="example-full-width width">
+                <input mdInput type="text" [(ngModel)]="immobilizerCmd" placeholder="{{'Imobilizer command' | translate}}" name="Imobilizer command">
+            </md-form-field>   
+          </div>
+      </div>
+      <div class="row">
+          <div class="col-sm-6">
+              <md-form-field class="example-full-width width">
+                  <input mdInput type="text" [(ngModel)]="resumeCmd" placeholder="{{'Resume command' | translate}}" name="Resume command">
+              </md-form-field>         
+          </div>
+          <div class="col-sm-6">
+              <md-form-field class="example-full-width width">
+                  <input mdInput type="text" [(ngModel)]="resetCmd" placeholder="{{'Reset command' | translate}}" name="Reset command">
+              </md-form-field>
+            </div>
+        </div>  
+        <div class="row">
+            <div class="col-sm-6">
+                <md-form-field  class="example-full-width width" >
+                    <input mdInput type="text" [(ngModel)]="Manufacturer" placeholder="{{'Manufacturer' | translate}}" > 
+                </md-form-field>     
+            </div>
+            <div class="col-sm-6">
+                <md-select name="neww" placeholder="{{'Immobilizer Type' | translate}}" [(ngModel)]="selectedImmobilizer" (ngModelChange)="getImmobilizerType($event)">
+                    <md-option value="srvrcmd">Server Command</md-option>
+                    <md-option value="mblcmd">Mobile Command</md-option>
+                  </md-select>
+              </div>
+          </div>  
+          <div class="row">
+              <div class="col-sm-6">
+                    <md-form-field  class="example-full-width width" >
+                            <input mdInput type="number" [(ngModel)]="deviceport" placeholder="{{'Device port' | translate}}" > 
+                        </md-form-field>  
+              </div>
+            <div class="col-sm-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="sms_apn" placeholder="{{'SMS APN' | translate}}">
+                </md-form-field>
+            </div>
+          </div>
+        <div class="row">
+            <div class="col-sm-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="sms_ip" placeholder="{{'SMS IP' | translate}}">
+                </md-form-field>
+            </div>
+            <div class="col-sm-6">
+                <md-form-field class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="sms_timezone" placeholder="{{'SMS Timezone' | translate}}">
+                </md-form-field>
+            </div>
+        </div>
+  <div class="row">
+    <div class="col-sm-6">
+        <md-button  class="btn btn-primary w3-button/" style="float: right;width:60%" (click)="editDeviceModel()">{{'Edit' | translate}}</md-button>
+    </div>
+    <div class="col-sm-6">
+        <md-button  class="btn btn-danger w3-button/" style="width:60%;" (click)="cancel(null)">{{'Cancel' | translate}}</md-button>
+      </div>
+  </div>
+</div>
+
diff --git a/src/app/edit-device-model/edit-device-model.component.scss b/src/app/edit-device-model/edit-device-model.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/edit-device-model/edit-device-model.component.spec.ts b/src/app/edit-device-model/edit-device-model.component.spec.ts
new file mode 100644
index 0000000..f6b6084
--- /dev/null
+++ b/src/app/edit-device-model/edit-device-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditDeviceModelComponent } from './edit-device-model.component';
+
+describe('EditDeviceModelComponent', () => {
+  let component: EditDeviceModelComponent;
+  let fixture: ComponentFixture<EditDeviceModelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditDeviceModelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditDeviceModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-device-model/edit-device-model.component.ts b/src/app/edit-device-model/edit-device-model.component.ts
new file mode 100644
index 0000000..ad036f1
--- /dev/null
+++ b/src/app/edit-device-model/edit-device-model.component.ts
@@ -0,0 +1,113 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+@Component({
+  selector: 'app-edit-device-model',
+  templateUrl: './edit-device-model.component.html',
+  styleUrls: ['./edit-device-model.component.scss']
+})
+export class EditDeviceModelComponent implements OnInit {
+  imobliser_type:any;
+  devType:any;
+  cnfigCMD:any;
+  locCmd:any;
+  immobilizerCmd:any;
+  resumeCmd:any;
+  resetCmd:any;
+  modelID:any;
+  showError:boolean = false;
+  Manufacturer:any;
+  selectedImmobilizer: any;
+  deviceport: any;
+  sms_ip;
+  sms_apn;
+  sms_timezone;
+
+  constructor(public dialogRef: MdDialogRef<EditDeviceModelComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService, public _flashMessagesService : FlashMessagesService) { 
+      console.log('DATA=>',data); 
+      this.cnfigCMD = data.configuration_command;
+      this.devType = data.device_type;
+      this.immobilizerCmd = data.immoblizer_command;
+      this.imobliser_type = data.imobliser_type;
+      this.locCmd = data.location_command;
+      this.resetCmd = data.reset_command;
+      this.resumeCmd = data.resume_command;
+      this.modelID = data._id;
+      this.deviceport = data.deviceport;
+      this.Manufacturer = data.Manufacturer;
+      this.sms_apn=data.sms_apn;
+      this.sms_ip=data.sms_ip;
+      this.sms_timezone=data.sms_timezone
+      console.log(this.imobliser_type);
+      if(this.imobliser_type == 1){
+        this.selectedImmobilizer = 'srvrcmd'
+      }
+      if(this.imobliser_type == 0){
+        this.selectedImmobilizer = 'mblcmd'
+      }
+    }
+
+  ngOnInit() {
+  }
+    errMsg  = "Internal Server Error" ;
+  editDeviceModel(){
+    var outerthis = this;
+    var devModelObject  = {
+            _id :this.modelID,
+      device_type:this.devType,
+        config_cmd:this.cnfigCMD,
+           loc_cmd:this.locCmd,
+          imob_cmd:this.immobilizerCmd,
+         reset_cmd:this.resetCmd,
+        resume_cmd:this.resumeCmd,
+    }
+    console.log(this.selectedImmobilizer);
+    if(this.selectedImmobilizer){
+      if(this.selectedImmobilizer == 'srvrcmd') this.serverCmd = '1.0';
+      if(this.selectedImmobilizer == 'mblcmd')   this.serverCmd = '0.0';
+      devModelObject['imobliser_type'] = this.serverCmd;
+    }
+
+    if(this.Manufacturer){
+      devModelObject['Manufacturer'] = this.Manufacturer;
+    }
+
+    if(this.deviceport){
+      devModelObject['deviceport'] = this.deviceport;
+    }
+
+     if(this.sms_apn){
+      devModelObject['sms_apn'] = this.sms_apn;
+    }
+     if(this.sms_ip){
+      devModelObject['sms_ip'] = this.sms_ip;
+    }
+     if(this.sms_timezone){
+      devModelObject['sms_timezone'] = this.sms_timezone;
+    }
+
+
+
+    this.contactService.editDevModel(devModelObject)
+      .subscribe(res=>{
+          console.log(res);
+          this.dialogRef.close('success');
+      },err=>{
+        console.log(err);
+        this.errMsg = err._body;
+        this._flashMessagesService.show(this.errMsg, { cssClass: 'alert-danger', timeout: 2000 });  
+      })
+  }
+  cancel(a){
+  console.log(a);
+  this.dialogRef.close(a);
+  }
+  serverCmd:any;
+  getImmobilizerType(ev:any){
+    console.log(this.selectedImmobilizer);
+  }
+
+}
diff --git a/src/app/edit-group/edit-group.component.html b/src/app/edit-group/edit-group.component.html
new file mode 100644
index 0000000..7b98df0
--- /dev/null
+++ b/src/app/edit-group/edit-group.component.html
@@ -0,0 +1,68 @@
+<!-- <div >
+  <md-toolbar style="background: white;padding-left: 143px;background: white;
+  color: #676464;
+  font-weight: 500;">{{'Update Group' | translate}}</md-toolbar>
+  <input id="myInput" type="text" [(ngModel)]="name" placeholder="Type group name" />
+  <md-select placeholder="--{{'Status' | translate}}--" [(ngModel)]="option">
+    <md-option *ngFor="let foodd of foodds" [value]="foodd">{{foodd}}</md-option> 
+  </md-select>
+</div>
+<div>
+</div>
+<div style="margin: 10px;">
+  <md-dialog-actions>
+    <div class="row" style="width:50%;margin-left:-4px;">
+   
+         <button md-icon-button (click)="car_status()">
+             <img class="png-icon"  src="../assets/image/car_1.png" style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+            </button>
+   
+     
+         <button md-icon-button (click)="bike_status()" style="margin-left: 13px">
+             <img class="png-icon" src="../assets/image/bike_1.png" style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+            </button>
+     
+   
+         <button md-icon-button (click)="truck_status()"  style="margin-left: 13px">
+             <img class="png-icon" src="../assets/image/truck_1.png"  style="width: 50px;height: 40px;border: 1px solid #863619;border-radius: 5px;">
+            </button>
+   
+    </div>
+ </md-dialog-actions>
+ </div>
+<div>
+<md-dialog-actions>
+  <button md-raised-button (click)="onCloseConfirm(name,option)">{{'Update' | translate}}</button>&nbsp;
+  <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+</md-dialog-actions>
+</div>
+
+<p ng-if="showError" style="text-align:center">{{errortext}}</p> -->
+
+
+<div class="card">
+  <div class="card-header">
+    <h4>Update Group</h4>
+  </div>
+  <div class="card-body">
+    <div class="row p-2">
+      <input id="myInput" type="text" class="form-control" [(ngModel)]="name"
+        placeholder="{{'Type group name' | translate}}" />
+    </div>
+
+    <div class="row p-2">
+      <md-select placeholder="--{{'Status' | translate}}--" [(ngModel)]="option" class="form-control">
+        <md-option *ngFor="let foodd of foodds" [value]="foodd">{{foodd}}</md-option>
+      </md-select>
+    </div>
+    <p ng-if="showError" style="text-align:center">{{errortext}}</p>
+  </div>
+
+  <div class="card-footer text-center">
+    <!-- <md-dialog-actions> -->
+    <button md-raised-button (click)="onCloseConfirm(name,option)">{{'CONFIRM' | translate}}</button>&nbsp;
+    <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+    <!-- </md-dialog-actions> -->
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/edit-group/edit-group.component.scss b/src/app/edit-group/edit-group.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/edit-group/edit-group.component.spec.ts b/src/app/edit-group/edit-group.component.spec.ts
new file mode 100644
index 0000000..37d6ab4
--- /dev/null
+++ b/src/app/edit-group/edit-group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGroupComponent } from './edit-group.component';
+
+describe('EditGroupComponent', () => {
+  let component: EditGroupComponent;
+  let fixture: ComponentFixture<EditGroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditGroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-group/edit-group.component.ts b/src/app/edit-group/edit-group.component.ts
new file mode 100644
index 0000000..4c0cd05
--- /dev/null
+++ b/src/app/edit-group/edit-group.component.ts
@@ -0,0 +1,115 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialogRef,MdDialog,MD_DIALOG_DATA} from '@angular/material';
+import { ContactService } from '../contact.service';
+
+
+@Component({
+  selector: 'app-edit-group',
+  templateUrl: './edit-group.component.html',
+  styleUrls: ['./edit-group.component.scss']
+})
+export class EditGroupComponent implements OnInit {
+  icon: string;
+  devUpdateId:any;
+  useridd:any;
+  be:any;
+  errortext:any;
+  name:any;
+  status:any; 
+  option:any;
+
+
+  constructor(public thisDialogRef: MdDialogRef<EditGroupComponent>,private contactService:ContactService, @Inject(MD_DIALOG_DATA) public data: any) { 
+    this.devUpdateId=data._id;
+    this.name=data.name;
+    this.option=data.status?"Active":"InActive";
+    this.icon = data.logoPath;
+    // console.log(this.devUpdateId);
+
+  }
+
+  foodds = [
+   'Active','InActive'
+  ];
+
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   
+   
+  }
+
+
+  car_status(){
+    this.icon="car"
+  }
+
+  truck_status(){
+    this.icon="truck"
+  }
+  bike_status(){
+    this.icon="bike"
+  }
+
+  showError=false;
+  group_payload:any;
+  onCloseConfirm(name,option){
+  
+  
+    // console.log("done")
+    let a = name;
+   
+    if(option!=undefined){
+      this.be =option;
+    }else{
+      this.be=option;
+    }
+   
+ 
+    if((a==undefined)&&(this.be==undefined)){
+
+     this.showError=true;
+     this.errortext="Please provide details ";
+    }
+    if(a==undefined){
+      this.showError=true;
+     this.errortext="Please type group name";
+
+    }else if(this.be==undefined){
+      this.showError=true;
+      this.errortext="Please select status";
+
+    }else{
+
+      
+      // console.log("now call post service here and on success response close the dialog box")
+
+      this.group_payload ={ 
+      "name" : a,
+      "status" : this.be=="Active"?true:false,
+      "logopath" :this.icon,
+      "_id": this.devUpdateId
+      }
+
+       this.contactService.editGroup(this.group_payload).subscribe(   
+      res => {
+        if(res){
+            //console.log(res);
+            //console.log('Group edited successfully');
+            this.thisDialogRef.close("success");
+        }  
+        //console.log(res);    
+      },
+      err=> {
+        //console.log("Check your Internet Connection");
+      });
+    } 
+  }
+
+  onCloseCancel(){
+    //console.log("cancel button clicked");
+    this.thisDialogRef.close('Cancel');
+  }
+
+
+}
diff --git a/src/app/edit-route-map/edit-route-map.component.html b/src/app/edit-route-map/edit-route-map.component.html
new file mode 100644
index 0000000..cfd6c57
--- /dev/null
+++ b/src/app/edit-route-map/edit-route-map.component.html
@@ -0,0 +1,181 @@
+<!-- <div style="opacity: .9;text-align: center;padding-top: 100px;background: #fcfbfb;">
+
+  <span style="color:#855353;font-size:20px;font-weight: 500;">{{'Edit trip details' | translate}}</span>
+  <br>
+  <hr>
+
+  <div class="row" style="padding:25px;">
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="Route name" [(ngModel)]="selectedvalue._id" (ngModelChange)="changeRouteName($event)">
+        <md-option *ngFor="let route_edit1 of routeNameArr" [value]="route_edit1._id" >
+          {{route_edit1.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Select group' | translate}}" [(ngModel)]="existingGrp._id" (ngModelChange)="getDevName($event)">
+        <md-option *ngFor="let grp of grpArr" [value]="grp._id">
+          {{grp.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Vehicles name' | translate}}" [(ngModel)]="selectedValue1._id">
+        <md-option *ngFor="let route_1 of vehArr" [value]="route_1._id">
+          {{route_1.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
+      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
+        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="routeRadius" name="devicename" placeholder="{{'Radius (in meter)' | translate}}" required/>
+        <md-error class="required"></md-error>
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Driver name' | translate}}" [(ngModel)]="driverDetail._id">
+        <md-option *ngFor="let driverName of driverArr" [value]="driverName._id">
+            {{driverName.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left;" name="neww" placeholder="Loading site" [(ngModel)]="geofenceload._id">
+        <md-option *ngFor="let load of geofenceObj" [value]="load._id">
+          {{load.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select  style="display: grid;text-align:left" name="neww" placeholder="{{'Unloading site' | translate}}" [(ngModel)]="geofenceUnload._id">
+        <md-option *ngFor="let unload of geofenceObj" [value]="unload._id">
+          {{unload.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+        <span>{{'Start Date/Time' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;" >
+      <span>{{'End Date/Time' | translate}}</span>
+      <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
+      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
+        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="lrNumber" name="lrnumber" placeholder="{{'LR Number' | translate}}" />      
+      </md-form-field>
+    </div>
+    <div class="col-sm-7 col-md-7" style="margin-top:2%;"> 
+      <md-radio-group  style="float:left;margin-left:25px;" [(ngModel)]="allow_reverse">
+          <md-radio-button value="1">{{'One way trip' | translate}}</md-radio-button>
+          <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
+        </md-radio-group>
+  </div>
+  </div>
+
+  <div style="padding-top:5%;">
+    <button style=" width: 171px;height: 43px;letter-spacing: 5px;" class="btn btn-primary btn-block/" (click)="editDetails()">{{'SAVE' | translate}}</button>
+    <button style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;" class="btn btn-primary btn-block/" (click)="onCloseCancel()">{{'Cancel' | translate}}</button>
+  </div>
+  <br>
+  <flash-messages style="float: center;"></flash-messages>
+</div> -->
+
+<flash-messages style="float: center;"></flash-messages>
+<div class="card">
+  <div class="card-header">
+    <h3>Edit Trip</h3>
+    <div class="float-right">
+      <button class="btn btn-danger" style="border-radius: 50%;margin-top: -32px;float: right;" (click)="dialogRef.close()"><i class="fa fa-times"></i></button>
+    </div>
+  </div>
+  <div class="card-body" style="height: 50vh;">
+    <!-- <div class="row" style="padding:25px;">
+      <div class="col-sm-4 col-md-4" style="padding-bottom:10px;"> -->
+    <form class="form" [formGroup]="tripForm" (ngSubmit)="Submit()">
+      <div class="row">
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Route Name</label>
+          <select class="form-control" placeholder="Enter Route Name" formControlName="routeName">
+            <option disabled selected value="">Select Route Name</option>
+            <option *ngFor="let route of route_detail_show" [value]="route._id">
+              {{route.name}}
+            </option>
+          </select>
+          <!-- <input type="text" class="form-control" placeholder="Enter Route Name" formControlName="routeName">  -->
+        </div>
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Vehicle Name</label>
+          <select class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName">
+            <option disabled selected value="">Select Vehicle Name</option>
+            <option *ngFor="let route_1 of devices" [value]="route_1._id">
+              {{route_1.Device_Name}}
+            </option>
+          </select>
+          <!-- <input type="text" class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName"> -->
+        </div>
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Driver Name</label>
+          <input type="text" class="form-control" placeholder="Enter Driver Name" formControlName="driverName">
+        </div>
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Loading Site</label>
+          <select class="form-control" formControlName="loadingSite">
+            <option disabled selected value="">Select Loading Site</option>
+            <option *ngFor="let load of geofenceName" [value]="load">
+              {{load.geoname}}
+            </option>
+          </select>
+
+          <!-- <input type="text" class="form-control" formControlName="loadingSite"> -->
+        </div>
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Unloading Site</label>
+          <select class="form-control" formControlName="unloadingSite">
+            <option disabled selected value="">Select UnLoading Site</option>
+            <option *ngFor="let unload of geofenceName" [value]="unload">
+              {{unload.geoname}}
+            </option>
+          </select>
+          <!-- <input type="text" class="form-control" formControlName="unloadingSite"> -->
+        </div>
+
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>Start Date/Time</label>
+          <owl-date-time class="form-control datep" formControlName="startTime" [hourFormat]="'12'"
+            [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+          </owl-date-time>
+          <!-- <input type="text" class="form-control" formControlName="startTime"> -->
+        </div>
+
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>End Date/Time</label>
+          <owl-date-time class="form-control datep" formControlName="endTime" [hourFormat]="'12'"
+            [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+          </owl-date-time>
+          <!-- <input type="text" class="form-control" formControlName="endTime"> -->
+        </div>
+
+        <div class="col-sm-4 col-md-4 mt-2">
+          <label>LR Number</label>
+          <input type="text" class="form-control" formControlName="lrNumber">
+        </div>
+
+        <div class="col-sm-4 col-md-4 mt-2">
+          <md-radio-group formControlName="allow_reverse">
+            <md-radio-button style="margin-top: 39px;" value='1'>{{'One way trip' | translate}}</md-radio-button>
+            <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
+            <!-- <md-radio-button value="0">{{'Round trip' | translate}}</md-radio-button> -->
+          </md-radio-group>
+        </div>
+      </div>
+      <div class="card-footer text-center mt-4">
+        <button type="submit" class="btn btn-primary btn-md">Save</button>
+      </div>
+
+
+    </form>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/edit-route-map/edit-route-map.component.scss b/src/app/edit-route-map/edit-route-map.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/edit-route-map/edit-route-map.component.spec.ts b/src/app/edit-route-map/edit-route-map.component.spec.ts
new file mode 100644
index 0000000..c5045e0
--- /dev/null
+++ b/src/app/edit-route-map/edit-route-map.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditRouteMapComponent } from './edit-route-map.component';
+
+describe('EditRouteMapComponent', () => {
+  let component: EditRouteMapComponent;
+  let fixture: ComponentFixture<EditRouteMapComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditRouteMapComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditRouteMapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-route-map/edit-route-map.component.ts b/src/app/edit-route-map/edit-route-map.component.ts
new file mode 100644
index 0000000..25436a8
--- /dev/null
+++ b/src/app/edit-route-map/edit-route-map.component.ts
@@ -0,0 +1,446 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+declare var _ :any;
+@Component({
+  selector: 'app-edit-route-map',
+  templateUrl: './edit-route-map.component.html',
+  styleUrls: ['./edit-route-map.component.scss']
+})
+export class EditRouteMapComponent implements OnInit {
+  deviceName:any;
+  tripDetails: any;
+  geofenceName: any;
+  grpName: any;
+  lrNumber:any;
+  tripForm:FormGroup
+  
+  emailid:any;or:any;useridd:any;
+  devices=[]
+  groups=[];
+  group_info:any;
+  myInput:any;
+  deviceId:any;
+  device_update:any;
+ 
+  route_detail_show=[];
+  route:any;
+  route_1:any;
+  Fromdate=new Date();
+  todate=new Date();
+  routeRadius:any;
+  driverName:any;
+  Load:any;
+  grp:any;loading:any;unloading:any;
+  oneWayTrip:any;
+  roundTrip:any;
+  allow_reverse:any;
+  startDate= new Date();
+  endDate= new Date();
+  route_edit: any;
+  routeObject: { name: any; _id: any; };
+  selectedvalue:any;
+  vehicleObj: { name: any; _id: any; };
+  veh_edit: any;
+  vehicleValue: any;
+  driverDetail:any;
+  driverObj: { name: any; _id: any; };
+  vehicleGroup: any;
+  existingGrp:any;
+  grpObj: { name: string; _id: string; };
+  geofenceObj: any;
+  geofenceload:any;
+  geofenceUnload:any;
+  selectedValue1: any;
+  constructor(private contactService: ContactService,private fb:FormBuilder,public dialogRef: MdDialogRef<EditRouteMapComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+
+
+
+    this.tripDetails = data;
+    console.log("DATA=====",this.tripDetails);
+    
+    this.geofenceload = {
+      name:this.tripDetails.routeId.Loading_Site,
+      _id:this.tripDetails.routeId.Loading_Site_Id
+    }
+
+    this.geofenceUnload={
+      name:this.tripDetails.routeId.Unloading_Site,
+      _id:this.tripDetails.routeId.Unloading_Site_Id
+    }
+
+    // console.log('geofencePayload',this.geofenceUnload)
+    // this.vehicleGroup =data.vehicleGroup;
+        // console.log("mainPayload",this.tripDetails)
+    this.existingGrp = {
+      name : this.tripDetails.routeId.VehicleGroup_Name,
+      _id:this.tripDetails.routeId.VehicleGroup_Id
+    }
+
+
+    this.getDevName(this.existingGrp._id);
+
+    // console.log('checking grp',this.existingGrp._id);
+    
+    this.route_edit=
+    {
+      name:this.tripDetails.routeId.Route_Name,
+      _id:this.tripDetails.routeId.Route_Id
+    }
+    this.selectedvalue=_.cloneDeep(this.route_edit);
+
+    this.veh_edit={
+      name:this.tripDetails.routeId.Device_Name,
+      _id:this.tripDetails.routeId.Device_Id
+    }
+
+    this.selectedValue1 = _.cloneDeep(this.veh_edit);
+    // console.log("datafrompreCOmponent",this.veh_edit)
+    this.driverDetail={
+      name:this.tripDetails.routeId.Driver,
+      _id:this.tripDetails.routeId.Driver_Id
+      
+    }
+
+
+    this.Fromdate = new Date(this.tripDetails.routeId.Planned_Start_Time);
+    this.todate = new Date(this.tripDetails.routeId.Planned_End_Time);
+
+
+    // this.vehicleValue = _.cloneDeep(this.veh_edit);
+
+
+    // console.log('this.selectedvalue',this.selectedvalue);
+    // console.log('this.vehvalue',this.vehicleValue)
+    // console.log('thisiskey',this.route_edit)
+    this.routeRadius = this.tripDetails.routeId.Radius;
+    this.allow_reverse=this.tripDetails.routeId.Allow_Reverse;
+    //  console.log("nameofroute",this.allow_reverse);
+      this.allow_reverse = this.allow_reverse?"2":"1";
+     }
+
+  ngOnInit() {
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.getRouteMap();
+    this.getGrp();
+//     Allow_Reverse: false
+// Device_Id: "2049080054708"
+// Device_Name: "siwitest"
+// Planned_End_Time: "2021-09-07T14:57:27.640Z"
+// Planned_Start_Time: "2021-09-07T14:57:27.640Z"
+// Radius: 200
+// Status: "ASSIGNED"
+// deviceObjId: "612f33fa9e94de2c84f8278a"
+// lrNumber: "0004343"
+// routeId: "61377dee12c0622dc4465aa2"
+// total_odo: 0
+// tripType: 1
+
+    this.getDriverDetail();
+      this.tripForm=this.fb.group({
+      routeName:[''],
+      vehicleName:[''],
+      driverName:[''],
+      loadingSite:[''],
+      unloadingSite:[''],
+      startTime:[''],
+      endTime:[''],
+      lrNumber:[''],
+      allow_reverse:['']
+    })
+
+    this.getVehicles();
+    this.patchValues()
+    this.contactService.getallgeofence(this.useridd)
+    .subscribe(res=>{
+      this.geofenceName =res;
+      // console.log(res);
+    })
+  }
+
+  patchValues(){
+    this.tripForm.patchValue({
+       routeName:this.tripDetails.routeId.Route_Id?this.tripDetails.routeId.Route_Id:'',
+      vehicleName:this.tripDetails.routeId.deviceObjId?this.tripDetails.routeId.deviceObjId:'',
+      driverName:'',
+      loadingSite:this.tripDetails.routeId.Loading_Site_Id?this.tripDetails.routeId.Loading_Site_Id:undefined,
+      unloadingSite:this.tripDetails.routeId.Unloading_Site_Id?this.tripDetails.routeId.Unloading_Site_Id:undefined,
+      startTime:this.tripDetails.routeId.Planned_Start_Time?this.tripDetails.routeId.Planned_Start_Time:'',
+      endTime:this.tripDetails.routeId.Planned_End_Time?this.tripDetails.routeId.Planned_End_Time:'',
+      lrNumber:this.tripDetails.routeId.lrNumber?this.tripDetails.routeId.lrNumber:'',
+      allow_reverse:this.tripDetails.routeId.tripType?'2':'1'
+    })
+  } 
+
+
+  driver: any;
+  driverArr=[]
+  getDriverDetail() {
+  
+    this.driverArr=[];
+    this.contactService.getRouteDriver(this.useridd)
+      .subscribe(res => {
+        this.driver = res;
+        // console.log("abcd", this.driver);
+        for(var i=0;i<this.driver.length;i++){
+          this.driverObj={
+            name:this.driver[i].name,
+            _id:this.driver[i]._id
+          }
+
+          this.driverArr.push(this.driverObj);
+        }
+
+      })
+  }
+
+  grpArr=[];
+
+  getGrp(){
+    this.grpArr=[];
+    this.contactService.getGroup(this.useridd).subscribe(      
+      res => {
+        // console.log(res);     
+        this.grpName = res["group_details"];
+        // console.log('grpobj',this.grpName);
+        if(this.grpName){
+          for(var i=0;i<this.grpName.length;i++){
+            this.grpObj={
+              name:this.grpName[i].name,
+              _id:this.grpName[i]._id
+            }
+              this.grpArr.push(this.grpObj);
+          }
+        }
+     
+        // console.log('finalgrppayload',this.grpArr);  
+      })
+  }
+
+  routeNameArr=[];
+  getRouteMap(){
+    this.routeNameArr=[];
+    // console.log("Mapping history !!!");
+    this.contactService.getRouteDetail(this.useridd)
+    .subscribe(res=>{
+      // console.log("routedet",res);
+      this.route_detail_show=res;
+      let temp =[];
+      for(var i=0;i<this.route_detail_show.length;i++){
+            this.routeObject={
+              name:this.route_detail_show[i].name,
+              _id:this.route_detail_show[i]._id
+            }
+            
+            temp.push(this.routeObject);
+      }
+      this.routeNameArr=_.cloneDeep(temp);
+  
+    })
+
+    // console.log("newObj",this.routeNameArr);
+  }
+
+vehArr=[];
+  getDevName(grpId){
+  // console.log('groupId',grpId);
+  var grpVehiclePayload= grpId;
+  this.geofenceObj=[];
+  this.vehArr=[];
+  var temp1 = [];
+  this.contactService.getVehDetail(grpVehiclePayload)
+    .subscribe(res=>{
+      this.deviceName = res;
+      // console.log('deviceName',this.deviceName);
+      let tempVeh=[];
+      for(var i=0;i<this.deviceName.length;i++){
+        this.vehicleObj={
+          name:this.deviceName[i].Device_Name,
+          _id:this.deviceName[i]._id
+        }
+        
+        temp1.push(this.vehicleObj);
+      }
+
+
+
+       this.vehArr = _.cloneDeep(temp1);
+      //  console.log('vehicleDetails',this.vehArr);
+    })
+
+   this.contactService.getLoadUnload(grpVehiclePayload)
+    .subscribe(res=>{
+      this.geofenceName =res;
+      // console.log("geofenceval",this.geofenceName);
+
+      for(var i=0;i<this.geofenceName.length;i++){
+        var loadingObj={
+          name:this.geofenceName[i].geoname,
+          _id:this.geofenceName[i]._id
+         
+        }
+        this.geofenceObj.push(loadingObj);
+
+      }
+     
+        // console.log('geofencedata',this.geofenceObj);
+    })
+}
+
+
+
+editDetails(){
+
+  var outerThis =this;   
+     let data =  _.find(this.routeNameArr, function(o) { 
+        if(o._id == outerThis.selectedvalue._id){
+          return o;
+        } 
+      });
+      // console.log("data=",data.name);
+ 
+
+      let vehData =  _.find(this.vehArr, function(v) { 
+        if(v._id == outerThis.selectedValue1._id){
+          return v;
+        } 
+      });
+        // console.log("vehData=",vehData.name);
+      // console.log('vehData=',vehData);
+      // console.log("PlannedStartTime",this.Fromdate);
+      // console.log("PlannedEndTime",this.todate);
+      // console.log('allowReverse',this.allow_reverse);
+      // console.log("DriverId",this.driverDetail._id);
+      // console.log("vehicleID",this.veh_edit._id)
+      // console.log("loadingId",this.geofenceload._id);
+      // console.log("unloading",this.geofenceUnload._id);
+      var tripVal;
+      if(this.allow_reverse=="2"){
+        tripVal = true;
+      }else{
+        tripVal = false;
+      }
+      // console.log("allowRevVal",tripVal);
+
+      // console.log('vehicleID=>',this.veh_edit._id);
+       var tripUpdateObj={
+            "_id":this.tripDetails.routeId.routeId,
+            "route" : data._id,    
+            "device" :this.veh_edit._id,
+            "radius" :this.routeRadius,
+            "user" : this.useridd,
+            "startsOn" :new Date(this.Fromdate),
+            "expiresOn" :new Date(this.todate),
+            "allowReverse" :tripVal,
+            "routeName" :data.name,
+            "deviceName":vehData.name,
+            "driver":this.driverDetail._id,
+            "startSite":this.geofenceload._id,
+            "endSite":this.geofenceUnload._id,
+          
+        }
+
+        if(this.lrNumber){
+          tripUpdateObj['lrNumber'] =  this.lrNumber;
+        }
+
+      // console.log("finaltripobjPayload",tripUpdateObj);
+
+      this.contactService.updateRouteMap(tripUpdateObj)
+        .subscribe(res=>{
+          // console.log(res);
+          this.dialogRef.close("success");
+        })
+    
+}
+
+onCloseCancel(){
+  // console.log("cancel button clicked");
+  this.dialogRef.close('Cancel');
+}
+  // http://localhost:3000/trackRoute/5b1e54b2aa6dde281abf04c3
+
+
+  changeRouteName(event){
+    // console.log(event);
+  }
+
+  Submit(){
+    console.log(this.tripForm.value);
+    var Device_Name,routeName
+    for(var i=0;i<this.devices.length;i++){
+    if(this.tripForm.value.vehicleName==this.devices[i]._id){
+     Device_Name=this.devices[i].Device_Name
+    }
+  }
+
+  for(var i=0;i<this.route_detail_show.length;i++){
+    if(this.tripForm.value.routeName==this.route_detail_show[i]._id){
+      routeName=this.route_detail_show[i].name
+    }
+  }
+
+     var tripVal;
+      if(this.tripForm.value.allow_reverse=="2"){
+        tripVal = true;
+      }else{
+        tripVal = false;
+      }
+      // console.log("allowRevVal",tripVal);
+
+      // console.log('vehicleID=>',this.veh_edit._id);
+       var tripUpdateObj={
+            "_id":this.tripDetails.routeId.routeId,
+            // "route" : this.tripForm.value.routeName,    
+            "device" :this.tripForm.value.vehicleName,
+            // "radius" :this.routeRadius,
+            "user" : this.useridd,
+            "startsOn" :new Date( this.tripForm.value.startTime),
+            "expiresOn" :new Date(this.tripForm.value.endTime),
+            "allowReverse" :tripVal,
+            "routeName" :routeName,
+            "deviceName":Device_Name,
+            "driver":this.tripForm.value.driverName,
+            "startSite":this.tripForm.value.loadingSite,
+            "endSite":this.tripForm.value.unloadingSite,
+          
+        }
+        if(this.tripForm.value.routeName){
+          tripUpdateObj['route'] =  this.tripForm.value.routeName;
+        }
+
+         if(this.tripForm.value.loadingSite){
+          tripUpdateObj['startSite'] =  this.tripForm.value.loadingSite;
+        }
+
+        if(this.tripForm.value.unloadingSite){
+          tripUpdateObj['endSite'] =  this.tripForm.value.unloadingSite;
+        }
+
+        if(this.tripForm.value.lrNumber){
+          tripUpdateObj['lrNumber'] =  this.tripForm.value.lrNumber;
+        }
+
+      console.log("finaltripobjPayload",tripUpdateObj);
+
+      this.contactService.updateRouteMap(tripUpdateObj)
+        .subscribe(res=>{
+          // console.log(res);
+          this.dialogRef.close("success");
+        })
+  }
+
+  getVehicles(){
+  this.contactService.getDevice(this.emailid,this.useridd).subscribe((res:any)=>{
+    this.devices=res.devices
+  })
+
+  
+}
+
+}
+
+
diff --git a/src/app/edit-sche/edit-sche.component.html b/src/app/edit-sche/edit-sche.component.html
new file mode 100644
index 0000000..1045a76
--- /dev/null
+++ b/src/app/edit-sche/edit-sche.component.html
@@ -0,0 +1,44 @@
+<h2>
+Edit Scheduling
+</h2>
+<hr>
+<h3>
+  <b>Device Name: </b>{{data.Device_name}}</h3>
+  <div style="
+  
+    outline: none;
+      width: 45%;
+    cursor: pointer;float:left;">
+    <p class="light">ON Time:</p>
+    <timepicker [(ngModel)]="onn_time"></timepicker></div>
+    <!-- <input type="time" name="onn_time" [(ngModel)]="onn_time"style="width:191px;margin-left:-121px;outline: none;cursor:pointer;" required> -->
+
+ 
+   <div style="
+   outline: none;
+   cursor: pointer;
+  
+   ">
+   <p  class="light">OFF Time:</p><timepicker [(ngModel)]="offf_time"></timepicker></div>
+   <p  class="light">Days: </p>
+
+   <div class="weekDays-selector" >
+    <input name="dayselM" type="checkbox" id="weekday-mon" class="weekday"  [(ngModel)]="dayselM" />
+    <label for="weekday-mon">M</label>
+    <input   name="dayselT" type="checkbox" id="weekday-tue" class="weekday"  [(ngModel)]="dayselT"/>
+    <label for="weekday-tue">T</label>
+    <input name="dayselW"  type="checkbox" id="weekday-wed" class="weekday"  [(ngModel)]="dayselW"/>
+    <label for="weekday-wed">W</label>
+    <input name="dayselTH" type="checkbox" id="weekday-thu" class="weekday"  [(ngModel)]="dayselTH" />
+    <label for="weekday-thu">Th</label>
+    <input name="dayselF" name="daysel" type="checkbox" id="weekday-fri" class="weekday"  [(ngModel)]="dayselF" />
+    <label for="weekday-fri">F</label>
+    <input name="dayselSa" type="checkbox" id="weekday-sat" class="weekday"  [(ngModel)]="dayselSa"/>
+    <label for="weekday-sat">Sa</label>
+    <input name="dayselSu" type="checkbox" id="weekday-sun" class="weekday"  [(ngModel)]="dayselSu"/>
+    <label for="weekday-sun">S</label>
+  </div>
+  <input type="submit" class="btn btn-primary" style="margin-left:-22px;margin-top: 18px;cursor:pointer;    margin-left: 19%;"  value="Cancel"(click)='onNoClick()'/>  
+  <input type="submit" class="btn btn btn-success" style="margin-left:2px;margin-top: 18px;cursor:pointer
+  " value="Reshedule Scheduler" (click)="editsche(onn_time,offf_time)" />                                                   
+  <flash-messages style="margin-top:2%;padding-top:2%"></flash-messages>
\ No newline at end of file
diff --git a/src/app/edit-sche/edit-sche.component.scss b/src/app/edit-sche/edit-sche.component.scss
new file mode 100644
index 0000000..267a814
--- /dev/null
+++ b/src/app/edit-sche/edit-sche.component.scss
@@ -0,0 +1,31 @@
+h2 {
+    font-size: 27px;
+    line-height: 5px;
+}
+h3 {
+    font-size: 18px;
+    line-height: 40px;
+}
+p.light {
+    font-weight: 550;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
diff --git a/src/app/edit-sche/edit-sche.component.spec.ts b/src/app/edit-sche/edit-sche.component.spec.ts
new file mode 100644
index 0000000..94693c5
--- /dev/null
+++ b/src/app/edit-sche/edit-sche.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditScheComponent } from './edit-sche.component';
+
+describe('EditScheComponent', () => {
+  let component: EditScheComponent;
+  let fixture: ComponentFixture<EditScheComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditScheComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditScheComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-sche/edit-sche.component.ts b/src/app/edit-sche/edit-sche.component.ts
new file mode 100644
index 0000000..5722a2e
--- /dev/null
+++ b/src/app/edit-sche/edit-sche.component.ts
@@ -0,0 +1,110 @@
+import { Component, OnInit , Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { DatepickerModule as YourAlias } from 'angular2-material-datepicker'
+import * as moment from 'moment-timezone';
+import {ContactService} from '../contact.service';
+import {Schedule} from '../shedule';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+@Component({
+  selector: 'app-edit-sche',
+  templateUrl: './edit-sche.component.html',
+  styleUrls: ['./edit-sche.component.scss'],
+  providers: [ContactService]
+})
+
+export class EditScheComponent implements OnInit {
+  onn_time: Date ;
+  offf_time: Date;
+  timme:any; 
+  schedules: Schedule[];
+  schedule: Schedule;
+  shdata:any;
+  data2:any;
+  tim :any;
+  did:any;
+  ontime:any;
+  on_uid:any;
+  offtime:any;
+  mess:any;
+  mess2:any;
+  constructor( private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<EditScheComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+      // 4:38 PM
+      this.did = data.Device_name;
+      this.on_uid= data.on_id;
+      // console.log(data);
+      this.timme = moment(data.on_time, 'HH:mm a');
+      this.tim = moment(data.off_time, 'HH:mm a');
+      this.onn_time= new Date( this.timme ); 
+      this.offf_time=new Date( this.tim );
+      this.data2 = data.on_id;
+     }
+    onNoClick(): void {
+      this.dialogRef.close();
+    }
+    editsche(on,off){
+      // console.log(on);
+      this.ontime = on;
+      this.offtime = off;
+    
+      const newshe ={
+        did : this.did,
+        ontime: this.ontime,
+        on_uid:this.on_uid,
+        offtime: this.offtime,
+        wday: [this.dayselM,this.dayselT,this.dayselW,this.dayselTH,this.dayselF,this.dayselSa,this.dayselSu]   
+     }
+  // console.log(newshe)
+  this.contactService.editshe(newshe)
+  .subscribe(schedule => {
+    this.onNoClick()   
+  this.schedules.push(schedule);
+  
+  
+  } , (err: any) => {
+    //  console.log(err.status); 
+    // console.log(err);
+  if(err.status ==   500)
+  {
+    this.mess = err._body.split(":")[1] ;
+    this.mess2 = this.mess.split("}")[0];
+    
+    this._flashMessagesService.show("Error: "+this.mess2, { cssClass: 'alert-danger',timeout: 2000 });
+
+  }     
+}
+); 
+
+
+    }
+    dayselM:any;
+    dayselT:any;
+    dayselW:any ;
+    dayselTH:any;
+    dayselF:any;
+    dayselSa:any;
+    dayselSu:any;
+  ngOnInit() {
+   // mytime: 
+
+  // console.log(this.data2);
+   this.contactService.getsh( this.data2 ).subscribe(
+    
+    data => {
+      this.shdata = data           
+    //  console.log(this.shdata[0].daily_sched.weekdays);
+      
+     this.dayselM = this.shdata[0].daily_sched.weekdays[0];
+     this.dayselT = this.shdata[0].daily_sched.weekdays[1];
+     this.dayselW = this.shdata[0].daily_sched.weekdays[2];
+     this.dayselTH = this.shdata[0].daily_sched.weekdays[3];
+     this.dayselF = this.shdata[0].daily_sched.weekdays[4];
+     this.dayselSa = this.shdata[0].daily_sched.weekdays[5];
+     this.dayselSu = this.shdata[0].daily_sched.weekdays[6];
+    });
+  }
+
+  }
+
+
diff --git a/src/app/edit-vehicle-type/edit-vehicle-type.component.html b/src/app/edit-vehicle-type/edit-vehicle-type.component.html
new file mode 100644
index 0000000..374f8a7
--- /dev/null
+++ b/src/app/edit-vehicle-type/edit-vehicle-type.component.html
@@ -0,0 +1,135 @@
+
+
+  <app-all-menus></app-all-menus>
+  <div class="container-fluid" style="padding-top: 6%;">
+    <md-card style="opacity: .9;margin-top: 15px;background: #fcfbfb;height:100%">
+      <h4 style="float:left;color:#855353">{{'Edit Vehicle Type' | translate}}</h4> <br><hr>
+      <flash-messages style="float: center;"></flash-messages>
+    <form #signupForm="ngForm">
+      <div class="form-group">
+        <!-- Vehicle Brand Name  -->
+        <label class="example-full-width width" style="padding-left: 2%;
+           width: 12%;
+           float: left;
+           padding-top: 2%;">{{'Brand' | translate}}:</label>
+        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
+          <input mdInput class="no-spin" [(ngModel)]="brand" name="brand1" placeholder="{{'Enter Brand Name' | translate}}" required/>
+          <md-error class="required">{{'Enter Brand Name' | translate}}</md-error>
+        </md-form-field>
+      </div>
+      <!-- Vehicle description -->
+      <div class="form-group">
+        <label style="padding-left: 2%;
+                   width: 12%;
+                   float: left;
+                   padding-top: 2%;">{{'Description' | translate}}:</label>
+        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
+          <input mdInput class="no-spin" [(ngModel)]="description" name="description1" placeholder="{{'Enter description' | translate}}" required/>
+          <md-error class="required">{{'Enter Description' | translate}}</md-error>
+        </md-form-field>
+  
+      </div>
+      <!--Enter Model -->
+      <div class="form-group">
+        <label style="padding-left: 2%;
+                 width: 12%;
+                 float: left;
+                 padding-top: 2%;">{{'Model' | translate}}:</label>
+        <div>
+          <md-form-field style="float:left;width: 44%;padding-left: 5%;">
+            <input mdInput class="no-spin" [(ngModel)]="model" name="model1" placeholder="{{'Enter Model' | translate}}" required/>
+            <md-error class="required">{{'Please Enter Description' | translate}}</md-error>
+          </md-form-field>
+          <md-select style="float: left;padding-left: 2%;text-align:left;padding-top: 13px;width: 36%;" name="neww" placeholder="{{'Select icon type' | translate}}"
+            [(ngModel)]="iconObj.value" ngDefaultControl>
+            <md-option *ngFor="let icon of IconType" [value]="icon.value">{{icon.viewValue}}</md-option>
+          </md-select>
+        </div>
+      </div>
+      <!-- VOLTAGE_CALIBERATION labels for voltage value and fuel value in a table -->
+      <div class="form-group" style="width:100%">
+        <table style="width:100%">
+          <tr style="width:100%;">
+            <th style=" float: left;width:45%;padding-left: 18%;padding-bottom:1%;">{{'Voltage Value' | translate}}</th>
+            <th style="padding-left: 13%; float: left;width:45%;;padding-bottom:1%;">{{'Fuel value' | translate}}</th>
+            <th style="float: left;">
+              <md-icon style="cursor:pointer;" (click)="addRow(0,0)">add</md-icon>
+            </th>
+          </tr>
+  
+          <tr style="width:100%" *ngFor="let data of voltage_calibration; let i =index">
+            <label style="width:16%;float:left;padding-top: 3%;">{{'Volatage Calibrator' | translate}}</label>
+            <td style="float:left;width: 40%;padding-left: 2%;">
+  
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="number" class="no-spin" [(ngModel)]="data.voltage" (keypress)="click1($event)" name="data.voltage{{i}}"
+                  #voltage placeholder="{{'Enter in volts' | translate}}" required/>
+                <md-error class="required">{{'Please Enter voltage' | translate}}</md-error>
+              </md-form-field>
+  
+            </td>
+            <td style="float:left;width: 37%;padding-left: 2%;">
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="number" class="no-spin" [(ngModel)]="data.fuel" (keypress)="click1($event)" name="data.fuel{{i}}" #fuel
+                  placeholder="{{'Enter fuel in liters' | translate}}" required/>
+                <md-error class="required">{{'Please fuel value' | translate}}</md-error>
+              </md-form-field>
+  
+            </td>
+            <td style="float:left;padding-top: 2%;">
+              <md-icon (click)="deleteRow(i)">delete_sweep</md-icon>
+            </td>
+  
+          </tr>
+        </table>
+      </div>
+  
+      <!--Voltage Calibration -->
+  
+      <!--Enter Full Tank Size -->
+  
+  
+      <div class="form-group" style="width:100%">
+        <label style="padding-left: 4%;
+                     
+                     float: left;
+                     padding-top: 2%;">{{'Tank Size' | translate}}:</label>
+        <md-form-field class="example-full-width width" style="float:left;width: 82%;padding-left: 6%;">
+          <input mdInput type="text" class="no-spin" [(ngModel)]="tank_size" name="tank_size1" (keypress)="click1($event)" placeholder="{{'Enter Tank Size' | translate}}"
+            required/>
+          <md-error class="required">{{'Please Enter Tank Size' | translate}}</md-error>
+        </md-form-field>
+  
+      </div>
+      <!--Enter Mileage -->
+  
+  
+      <div class="form-group">
+        <label style="padding-left: 2%;
+                     width: 12%;
+                     float: left;
+                     padding-top: 2%;">{{'Mileage' | translate}}</label>
+        <md-form-field class="example-full-width width" style="float:left;width: 80%;padding-left: 5%;">
+          <input mdInput type="text" class="no-spin" [(ngModel)]="mileage" name="mileage1" (keypress)="click1($event)" placeholder="{{'Enter Mileage' | translate}}"
+            required/>
+          <md-error class="required">{{'Please Enter Mileage' | translate}}</md-error>
+        </md-form-field>
+      </div>
+    </form>
+    <br>
+    <input type="submit" [disabled]="!signupForm.form.valid" (click)="editVehicleType(signupForm.form)" class="btn btn-primary btn-block/"
+      value="Edit Vehicle Type" style="cursor:pointer;width: 159px;height: 44px;" fxFlexAlign="center">&nbsp;&nbsp;
+    <!-- <input type="submit"  (click) ="NewVehicleType(signupForm.form)" class="btn btn-primary btn-block/" value="Cancel" style="cursor:pointer;width: 159px;height: 44px;"  > -->
+    <br>
+    <flash-messages style="float: center;"></flash-messages>
+    <!-- form button and flash msgs end here  -->
+    <div>
+      <div style="padding-top:4%;">
+        <!-- <button class="btn btn-primary btn-block/"(click)="addVehicleType()" style="cursor:pointer;width: 159px;height: 44px;">EDIT VEHICLE</button>  -->
+      </div>
+      <br>
+      <flash-messages style="float: center;"></flash-messages>
+      </div>
+    </md-card>
+  
+  </div>
diff --git a/src/app/edit-vehicle-type/edit-vehicle-type.component.scss b/src/app/edit-vehicle-type/edit-vehicle-type.component.scss
new file mode 100644
index 0000000..715335a
--- /dev/null
+++ b/src/app/edit-vehicle-type/edit-vehicle-type.component.scss
@@ -0,0 +1,161 @@
+
+    .container-fluid .headerStyle{
+
+
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        background: white;
+        color: black;
+        border-radius: 4px;
+    }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
+
+
+
+
+
+th, td { white-space: nowrap; }
+div.dataTables_wrapper {
+  width: 800px;
+  margin: 0 auto;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+#toast #img{
+	width: 250px;
+	height: s50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/edit-vehicle-type/edit-vehicle-type.component.spec.ts b/src/app/edit-vehicle-type/edit-vehicle-type.component.spec.ts
new file mode 100644
index 0000000..cf34464
--- /dev/null
+++ b/src/app/edit-vehicle-type/edit-vehicle-type.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditVehicleTypeComponent } from './edit-vehicle-type.component';
+
+describe('EditVehicleTypeComponent', () => {
+  let component: EditVehicleTypeComponent;
+  let fixture: ComponentFixture<EditVehicleTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditVehicleTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditVehicleTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/edit-vehicle-type/edit-vehicle-type.component.ts b/src/app/edit-vehicle-type/edit-vehicle-type.component.ts
new file mode 100644
index 0000000..e7f0e61
--- /dev/null
+++ b/src/app/edit-vehicle-type/edit-vehicle-type.component.ts
@@ -0,0 +1,141 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-edit-vehicle-type',
+  templateUrl: './edit-vehicle-type.component.html',
+  styleUrls: ['./edit-vehicle-type.component.scss']
+})
+export class EditVehicleTypeComponent implements OnInit {
+
+  brand:any="";
+  description:any;
+  model:any;
+  iconObj:any = {
+    value : '',
+    viewValue : ''
+  };
+  tank_size:any;
+  voltage_calibration=[];
+  mileage:any;
+  IconType = [
+    { value: 'car', viewValue: 'Car' },
+    { value: 'bike', viewValue: 'Bike' },
+    { value: 'bus', viewValue: 'Bus' },
+    { value: 'pickup', viewValue: 'Pickup' },
+    { value: 'tractor', viewValue: 'Tractor' },
+    { value: 'truck', viewValue: 'Truck' },
+    { value: 'truck', viewValue: 'Heavy Truck' },
+    { value: 'tanker', viewValue: 'Tanker' },
+    { value: 'jcb', viewValue: 'JCB' },
+    { value: 'roadroller', viewValue: 'Roadroller' },
+    { value : 'user' ,viewValue : 'User'}
+  ];
+
+  
+  vehId: any;
+  editvehTypeObj:any;
+  IconType1: any;
+  setTimeOut: any;
+  savedInt = 10;
+  useridd: any;
+  vehtypeID: any;
+
+  constructor(public contactService: ContactService, public _flashMessagesService : FlashMessagesService,public router:Router) { }
+
+  ngOnInit() {
+  this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+  this.editvehTypeObj =  JSON.parse(localStorage.getItem('vehType')); 
+  this.vehtypeID = this.editvehTypeObj._id;
+  console.log("EditVehType=>",this.editvehTypeObj);
+  this.brand=this.editvehTypeObj.brand;
+  this.description=this.editvehTypeObj.description;
+  this.model=this.editvehTypeObj.model;
+ // this.IconType1= this.editvehTypeObj.iconType;
+  this.tank_size = this.editvehTypeObj.tank_size;
+//  this.getIconTypeObj(this.editvehTypeObj.iconType);
+    this.iconObj.value = this.editvehTypeObj.iconType;
+   
+  // this.voltage_calibration=[];
+
+  // if(this.IconType1 == 'car'){
+  
+
+  // }
+  for(var i = 0 ;i<this.editvehTypeObj.voltage_calibration.length;i++){
+
+          this.voltage_calibration.push(this.editvehTypeObj.voltage_calibration[i]);
+
+          console.log(this.voltage_calibration);
+  }
+  console.log(this.voltage_calibration);
+  this.mileage = this.editvehTypeObj.mileage;
+
+
+   
+  }
+
+  click1(event){
+    if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+      
+            }
+            else
+              event.preventDefault();
+          }
+
+  addRow(voltage,fuel){
+    var obj={};
+    //let contact =  this.voltage_calibration({voltage:0,fuel:0});
+    obj={voltage:voltage,fuel:fuel};
+    this.voltage_calibration.push(JSON.parse(JSON.stringify(obj)));
+  }
+
+
+  deleteRow(index){
+    console.log(index);
+    this.voltage_calibration.splice(index, 1);
+    console.log("delete voltage index = >",this.voltage_calibration);
+  }
+
+  editVehicleType(signUp_form){
+    // console.log(signUp_form.value);
+    // console.log("Voltage Calibration =>",this.voltage_calibration);
+    var voltage_calibration_arr =[];
+        for(var i = 0 ;i<this.voltage_calibration.length;i++ ){
+          var voltage_calibration_obj = {
+            fuel:this.voltage_calibration[i].fuel,
+            voltage: this.voltage_calibration[i].voltage
+          }
+           voltage_calibration_arr.push(voltage_calibration_obj);
+        }
+        console.log(voltage_calibration_arr);
+    var updateVehType = { 
+      "_id": this.vehtypeID,
+      "brand": signUp_form.value.brand1,
+      "description": signUp_form.value.description1,
+      "model": signUp_form.value.model1,
+      "voltage_calibration": voltage_calibration_arr,
+      "tank_size": signUp_form.value.tank_size1,
+      "mileage": signUp_form.value.mileage1,
+      "iconType": signUp_form.value.neww,
+    }
+    this.contactService.updateVehType(updateVehType)
+      .subscribe(res=>{
+        console.log(res);
+    //    this._flashMessagesService.show("Vehicletype  configuratiuon changed", { cssClass: 'alert-success', timeout: 2000 });  
+        this.router.navigateByUrl("VehicleType");
+      },err=>{
+        console.log(err);
+        this._flashMessagesService.show("Values couldn't changed , Please try after sometime!!!", { cssClass: 'alert-danger', timeout: 2000 });  
+      })
+
+    console.log(updateVehType);
+
+  
+  }
+
+
+}
diff --git a/src/app/fuel-objectcomponent/fuel-objectcomponent.component.html b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.html
new file mode 100644
index 0000000..4dcca2c
--- /dev/null
+++ b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.html
@@ -0,0 +1,39 @@
+<div style="height: 535px;">
+  <div class="row" no-padding>
+    <div class="col-9" no-padding>
+        <h4 style="text-align: center; margin-left: 25%;">{{'FUEL EVENTS' | translate}}</h4>
+    </div>
+    <div class="col-3" style="text-align: right" no-padding>
+        <button md-raised-button style="width: 90px; background: red; color: white;text-align: right;margin-bottom: 10%;" (click)="cancel()">{{'CANCEL' | translate}}</button>
+    </div>  
+  </div>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div>
+    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align:center">{{'Event' | translate}}</th>
+          <th style="text-align:center">{{'Fuel Change (L)' | translate}}</th>
+          <th style="text-align:center">{{'Time' | translate}}</th>
+          <th style="text-align:center">{{'Location' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let flobj of fuelObject">
+          <td style="text-align: center">{{flobj.vehicleName}}</td>
+          <td style="text-align: center">{{flobj.pour}}</td>
+          <td style="text-align: center">{{flobj.litres}}</td>
+          <td style="text-align: center">{{flobj.timestamp | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center;cursor:pointer">
+              <div>
+                  <img style="width: 25px" src='../../../assets/image/addressICON.png' (click)="getAddress(flobj)" md-tooltip="Click to get device's last location">
+                  <span style="margin-top:2px;">{{flobj.locationAddress}}</span>
+                </div>  
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+</div>
\ No newline at end of file
diff --git a/src/app/fuel-objectcomponent/fuel-objectcomponent.component.scss b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/fuel-objectcomponent/fuel-objectcomponent.component.spec.ts b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.spec.ts
new file mode 100644
index 0000000..334ef4f
--- /dev/null
+++ b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelObjectcomponentComponent } from './fuel-objectcomponent.component';
+
+describe('FuelObjectcomponentComponent', () => {
+  let component: FuelObjectcomponentComponent;
+  let fixture: ComponentFixture<FuelObjectcomponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelObjectcomponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelObjectcomponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/fuel-objectcomponent/fuel-objectcomponent.component.ts b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.ts
new file mode 100644
index 0000000..d955082
--- /dev/null
+++ b/src/app/fuel-objectcomponent/fuel-objectcomponent.component.ts
@@ -0,0 +1,127 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+declare var google:any;
+
+@Component({
+  selector: 'app-fuel-objectcomponent',
+  templateUrl: './fuel-objectcomponent.component.html',
+  styleUrls: ['./fuel-objectcomponent.component.scss']
+})
+export class FuelObjectcomponentComponent implements OnInit {
+  populateHistory:any=[];
+  fuelobjectdata: any;
+  Load : boolean = false;
+  fuelObject: any=[];
+  longitude: any;
+  lattitude: any;
+
+  address_show: any;
+  constructor(private contactService: ContactService,private router: Router,public dialogRef: MdDialogRef<FuelObjectcomponentComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log(data);
+      this.fuelobjectdata = data;
+    }
+
+  ngOnInit() {
+      this.eventCall();
+  }
+
+  eventCall(){
+    // this.Load = true;
+  // "start_time":"2019-08-02T13:22:06.118Z",
+  // "end_time":"2019-08-07T06:22:06.118Z",
+  // "imei":"352094089196627",
+  // "event":"IN"
+  this.fuelObject = [];
+    console.log(this.fuelobjectdata);
+
+    var fuelPayLoad = {
+      "start_time":this.fuelobjectdata.start_time,
+      "end_time":this.fuelobjectdata.end_time,
+      "imei":this.fuelobjectdata.imei,
+    }
+
+    if(this.fuelobjectdata.event == "in"){
+      fuelPayLoad['event'] = "IN"
+    }
+
+    if(this.fuelobjectdata.event == "out"){
+      fuelPayLoad['event'] = "OUT"
+    }    
+
+  // http://localhost:3000/gps/getFuelNotifs
+    this.Load = true;
+  this.contactService.fueleventCall(fuelPayLoad).subscribe(res=>{
+    console.log(res);
+    this.Load = false;
+    if(res.message=="no event found"){
+      this.Load = false;
+    }else{
+
+      this.fuelObject = res;
+      this.Load = false;
+    }
+  },err=>{
+    this.Load = false;
+  })
+  }
+
+  cancel(){
+    this.dialogRef.close();
+  }
+
+
+  locationAddress: any;
+  getAddress(flobj) {
+  
+    var outerThis = this;
+    if (flobj == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+    } else {
+        this.lattitude = flobj.lat;
+        this.longitude = flobj.long;    
+    }
+
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+
+    var request = {
+      latLng: latlng
+    };
+
+
+
+    geocoder.geocode(request, function (data, status) {
+     
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          outerThis.address_show = data[0].formatted_address;
+        
+          flobj.locationAddress = outerThis.address_show;
+         
+
+        } else {
+       
+          flobj.locationAddress = "No address available";
+             
+        }
+      }
+      else {
+
+        outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+       
+        flobj.locationAddress = outerThis.address_show;
+       
+
+      }
+
+    })
+  }
+
+
+}
diff --git a/src/app/fuel-price/fuel-price.component.html b/src/app/fuel-price/fuel-price.component.html
new file mode 100644
index 0000000..e509b7b
--- /dev/null
+++ b/src/app/fuel-price/fuel-price.component.html
@@ -0,0 +1,142 @@
+<app-all-menus></app-all-menus>
+
+  <div class="topDiv">
+    <!-- <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div> -->
+    <div class="row"
+      style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <h4>{{'Fuel Price List' | translate}}
+
+        <button class="btn btn-primary btn-sm" *ngIf="useridd=='59cbbdbe508f164aa2fef3d8'" style="float: right;" [routerLink]="['/addFuelPrice']"><i class="fas fa-plus"></i> Add Fuel Price</button>
+          </h4>
+      </div>
+    </div>
+
+  <div class="row">
+    <div class="col-md-3">
+      <div class="sidebar">
+       
+
+       
+
+        <div class="accordion" id="accordionExample">
+          <!-- <div class="card"> -->
+            <!-- <div class="card-header" id="headingOne"> -->
+              <h2 class="mb-2">
+                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                  aria-expanded="true" aria-controls="collapseOne" (click)="selectOptions(1)">
+                  Get Fuel Price By State
+                </button>
+              </h2>
+            <!-- </div> -->
+        
+            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+              <!-- <div class="card-body"> -->
+                <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+                  <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+                    <span style="margin-bottom: 0%;font-size: 12px;"> {{'State' | translate}} :</span>
+                  </div>
+                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                    <select style="margin-top: -20px;width: inherit;" [(ngModel)]="currState" ngDefaultControl>
+                      <option *ngFor="let ustate of Indianstate" [value]="ustate">
+                        {{ustate}}
+                      </option>
+                    </select>
+                  </div>
+                </div>
+                
+                
+                <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+                  <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+                    <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
+                  </div>
+                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                    <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+                      [(ngModel)]="from_date" type="text">
+                  </div>
+                </div>
+                
+                <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+                  <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+                    <span style="margin-bottom: 0%;font-size: 12px;"> {{'To' | translate}} :</span>
+                  </div>
+                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                    <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+                      [(ngModel)]="to_date" type="text">
+                  </div>
+                <!-- </div> -->
+              </div>
+            </div>
+          <!-- </div> -->
+          <!-- <div class="card">
+            <div class="card-header" id="headingTwo"> -->
+              <h2 class="mb-0">
+                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
+                  aria-expanded="false" aria-controls="collapseTwo" (click)="selectOptions(2)">
+                  Get Fuel Price of all states
+                </button>
+              </h2>
+            <!-- </div> -->
+            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+              <!-- <div class="card-body"> -->
+                <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+                  <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+                    <span style="margin-bottom: 0%;font-size: 12px;"> {{'Date' | translate}} :</span>
+                  </div>
+                  <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                    <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+                      [(ngModel)]="to_date" type="text">
+                  </div>
+                </div>
+              <!-- </div> -->
+            </div>
+          <!-- </div> -->
+
+          </div>
+          <!-- </div> -->
+
+        
+
+        <div class="text-center">
+
+          <button class="btn btn-primary" (click)="submit()"> Submit</button>
+        </div>
+
+      </div>
+
+    </div>
+    <div class="col-md-9 main">
+      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+        <div class="row"
+          style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <div *ngIf="Load" class="loading">Loading&#8230;</div>
+            <!-- <div id="toast">
+                    <div id="desc">{{data_descip}}</div>
+                  </div> -->
+            <div class="row" style="padding: 8px;margin-bottom: 8px;">
+      
+      
+              <div style="width: 100%;height:84vh;">
+                <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                  <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;width:100px">{{'Date'|translate}} </th>
+                      <th style="text-align:left;width:100px">{{'State' | translate}}</th>
+                      <th style="text-align:left;width:100px">{{'Petrol Price' | translate}}</th>
+                      <th style="text-align:left;width:100px">{{'Diesel Price' | translate}}</th>                   
+      
+                    </tr>
+                  </thead>
+                </table>
+      
+      
+              </div>
+              </div>
+              </div>
+              </div>
+    </div>
+
+  </div>
\ No newline at end of file
diff --git a/src/app/fuel-price/fuel-price.component.scss b/src/app/fuel-price/fuel-price.component.scss
new file mode 100644
index 0000000..88909a5
--- /dev/null
+++ b/src/app/fuel-price/fuel-price.component.scss
@@ -0,0 +1,46 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+#myInput {
+  border-radius: 15px;
+  /* border: 2px solid #18262F; */
+  padding: 7px;
+  width: 116px;
+  height: 17px;
+  font-size: 9px;
+  outline: none;
+  float: right;
+  margin-top: 2%;
+}
+
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+
+  color: #6b6a6a;
+  padding-top: 7px;
+  margin: 0px;
+}
+.sidebar {
+  height: 84vh;
+  width: 24%;
+  text-align: left;
+  background: white;
+  box-shadow: 3px 1px 5px 0px #b2b0ae;
+  position: fixed;
+  padding: 10px;
+}
+.main {
+  box-shadow: 3px 1px 5px 0px #b2b0ae;
+  padding: 10px;
+  background: white;
+  //   margin-left: 5px;
+}
+
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/fuel-price/fuel-price.component.spec.ts b/src/app/fuel-price/fuel-price.component.spec.ts
new file mode 100644
index 0000000..4c41917
--- /dev/null
+++ b/src/app/fuel-price/fuel-price.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelPriceComponent } from './fuel-price.component';
+
+describe('FuelPriceComponent', () => {
+  let component: FuelPriceComponent;
+  let fixture: ComponentFixture<FuelPriceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelPriceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelPriceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/fuel-price/fuel-price.component.ts b/src/app/fuel-price/fuel-price.component.ts
new file mode 100644
index 0000000..bfc72ec
--- /dev/null
+++ b/src/app/fuel-price/fuel-price.component.ts
@@ -0,0 +1,196 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import * as moment from 'moment-timezone';
+import { ContactService } from '../contact.service';
+declare var $: any;
+
+@Component({
+  selector: 'app-fuel-price',
+  templateUrl: './fuel-price.component.html',
+  styleUrls: ['./fuel-price.component.scss']
+})
+export class FuelPriceComponent implements OnInit {
+  currState: any;
+  from_date;
+  to_date= new Date();
+   bsConfig: Partial<BsDatepickerConfig>;
+   Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  tabelObj:any
+  Load: boolean;
+  useridd
+  constructor(private contactService:ContactService) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    var wd = moment().startOf('week')
+    this.from_date = new Date(wd);
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: 'theme-dark-blue' });
+    this.testTable()
+  }
+
+  submit(){
+    // if(this.currState){
+     this.tabelObj.ajax.reload()
+
+    // }else{
+
+    // }
+  }
+
+  testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+    
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true;
+             
+            var from_date = that.from_date;
+            var to_date = that.to_date;
+            // var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            // user : user
+            }
+            var suburl = "";
+           
+            if(that.id==1){
+              if((temp.from_date != undefined)&&(temp.to_date != undefined)&&(that.currState != undefined)){
+                suburl += "/googleAddress/getFuelPrice?from_date=" + new Date(temp.from_date).toISOString() +'&to_date=' + new Date(temp.to_date).toISOString() + '&state=' + that.currState;
+               
+                that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log(ignReport.length);  
+                  if(resp.length>0){
+                    that.Load = false;
+                    callback({data : resp });
+                  }else{
+                     callback({data : [] });
+                     that.Load = false;
+                  }
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+  
+              }else{
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+
+            }else{
+              if(temp.to_date != undefined){
+                suburl += "/googleAddress/getFuelPriceForAllState?&date=" + new Date(temp.to_date).toISOString()
+               
+                that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log(ignReport.length);  
+                  if(resp.length>0){
+                    that.Load = false;
+                    callback({data : resp });
+                  }else{
+                     callback({data : [] });
+                     that.Load = false;
+                  }
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+              }
+            }
+
+            // googleAddress/getFuelPrice?state=Arunachal%20Pradesh
+          
+        },  
+     
+          "columns": [
+              {
+                  "data": "date",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "state",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "petrol",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';  
+                
+                  }
+              },
+               {
+                  "data": "diesel",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                   return data?data:'';   
+                
+                  }
+              },
+                           
+          ],  
+          
+      });
+
+  });
+
+}
+id=1
+selectOptions(id){
+  this.id=id
+}
+}
diff --git a/src/app/fuel-report-graph/fuel-report-graph.component.html b/src/app/fuel-report-graph/fuel-report-graph.component.html
new file mode 100644
index 0000000..b783125
--- /dev/null
+++ b/src/app/fuel-report-graph/fuel-report-graph.component.html
@@ -0,0 +1,75 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Fuel Report' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="fuelChart" style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas> 
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- <app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <h4 style="text-align:center;text-align: center;padding: 20px;color: #797474;font-size: 1.3rem;">{{'FUEL REPORT' | translate}}</h4>
+  <div class="row">
+    <div class="col-3" style="padding-left: 44px;text-align: center;">
+      <md-input-container>
+        <input mdInput placeholder="Search Device" [mdAutocomplete]="tdAuto" name="state" 
+        #state="ngModel" [(ngModel)]="option"
+       (ngModelChange)="filterStates(option)">
+       <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let option of dataSelect" [value]="option.value">
+            <span>{{ option.value }}</span>
+          </md-option>
+        </md-autocomplete>   
+      </md-input-container>
+    </div>
+    <div class="col-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+    <div class="col-3">
+        <span>{{'To Date' | translate}}</span>
+      <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+ 
+    <div class="col-sm-3 " style="margin-top: 17px;">
+        <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="getGraphData()">{{'Generate Report' | translate}}</button>    
+    </div>
+  </div>
+  <div class="row"> 
+    <div class="col-12">
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12" >
+        <canvas id="fuelChart"></canvas> 
+    </div>  
+</div> 
+</div>
+      -->
\ No newline at end of file
diff --git a/src/app/fuel-report-graph/fuel-report-graph.component.scss b/src/app/fuel-report-graph/fuel-report-graph.component.scss
new file mode 100644
index 0000000..d95c733
--- /dev/null
+++ b/src/app/fuel-report-graph/fuel-report-graph.component.scss
@@ -0,0 +1,59 @@
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+
+  // canvas{
+
+  //   width:1200px !important;
+  //   height:700px !important;
+  
+  // }
+
+
+  
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/fuel-report-graph/fuel-report-graph.component.spec.ts b/src/app/fuel-report-graph/fuel-report-graph.component.spec.ts
new file mode 100644
index 0000000..4905c34
--- /dev/null
+++ b/src/app/fuel-report-graph/fuel-report-graph.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelReportGraphComponent } from './fuel-report-graph.component';
+
+describe('FuelReportGraphComponent', () => {
+  let component: FuelReportGraphComponent;
+  let fixture: ComponentFixture<FuelReportGraphComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelReportGraphComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelReportGraphComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/fuel-report-graph/fuel-report-graph.component.ts b/src/app/fuel-report-graph/fuel-report-graph.component.ts
new file mode 100644
index 0000000..fe93582
--- /dev/null
+++ b/src/app/fuel-report-graph/fuel-report-graph.component.ts
@@ -0,0 +1,238 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+// import { BaseChartDirective } from 'ng2-charts';
+declare var Chart :any;
+
+@Component({
+  selector: 'app-fuel-report-graph',
+  templateUrl: './fuel-report-graph.component.html',
+  styleUrls: ['./fuel-report-graph.component.scss']
+})
+export class FuelReportGraphComponent implements OnInit {
+  dataSelect: any;
+  Load : Boolean = false;
+  Fromdate = new Date();
+  todate=new Date();
+  useridd: any;
+  options: any=[];
+  option:any;
+  emailid: any;
+  devicesss: any;
+  finall: any;
+  identifier : any= "fuel_report_graph"; 
+  
+
+  constructor(private contactService:ContactService,private _flashMessagesService: FlashMessagesService) { }
+ 
+
+  ngOnInit() {
+ 
+   
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+
+  // this.vehicleArray();
+  }
+
+
+  // vehicleArray(){
+  //   this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+  //     data => {
+  //       this.devicesss = data
+  //       // console.log("random",this.devicesss)
+     
+  //       this.finall = (this.devicesss.devices);
+
+  //       for(let i=0;i<this.devicesss.devices.length;i++){
+
+  //         if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+  //           let a ={
+  //             value : this.devicesss.devices[i].Device_Name,
+  //             viewValue:this.devicesss.devices[i].Device_Name,
+  //             did:this.devicesss.devices[i].Device_ID,
+  //             id:this.devicesss.devices[i]._id,
+  //             user:this.devicesss.devices[i].user,
+  //             email: this.devicesss.devices[i].Email_ID,
+  //             deviceType: this.devicesss.devices[i].type_of_device
+  //           }
+  //           this.options.push(a);
+  //         }
+
+  //       }
+  //         // console.log("ignition option",this.options);
+  //     });
+  // }
+
+  // filterStates(val) {
+
+  //   // console.log(val);
+  //   // console.log(this.options)
+  
+  //   if (val) {
+  //     const filterValue:any = val
+  //      this.dataSelect = this.options.filter( function(d){
+    
+  //       return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+  //     });
+  //     return this.dataSelect;
+  //   }
+
+  
+  // }
+
+
+  flag:boolean = false;
+  InsertionTime = [];
+  fuelGraphData = [];
+  fuelVoltage = [];
+
+  getGraphData(){
+    this.InsertionTime=[];
+    this.fuelGraphData=[];
+    this.fuelVoltage = [];
+   
+    console.log(this.dataSelect);
+    if((this.deviceArr == undefined)||(this.deviceArr.length == 0)){
+    return  this._flashMessagesService.show("Select Device First", { cssClass: 'alert-danger', timeout: 2000 });
+    }else{
+      var dID = this.deviceArr[0];
+    }
+    var fDate = this.Fromdate.toISOString();
+    var tDate = this.todate.toISOString();
+    this.Load = true;
+    this.contactService.fuelReportData(dID,fDate,tDate)
+      .subscribe(res=>{
+        this.Load  = false;
+        let graphData=res
+        console.log("graphData",res);
+        if(graphData.length != 0){
+          this.flag = true;
+        }
+        for(var i=graphData.length-1; i>=0;i--){
+          var fuelData = graphData[i].currentFuel?graphData[i].currentFuel:0;
+          var voltageData = graphData[i].fuelVoltage?parseFloat(graphData[i].fuelVoltage)/1000:0;
+          this.fuelVoltage.push(voltageData);
+          this.fuelGraphData.push(fuelData);
+          var iTime = new Date(graphData[i].insertionTime).toLocaleString();
+          this.InsertionTime.push(iTime)
+        }
+
+        // this.getgraphoption();
+        this.dataToPlot();
+     
+      
+      },err=>{
+        this.Load  = false;
+      })
+  }
+   fuelChart:any;
+  dataToPlot(){
+  
+    if(this.fuelChart != undefined){
+      this.fuelChart.destroy();
+    }
+    this.fuelVoltage
+    this.fuelGraphData
+    this.InsertionTime
+  
+    var that = this;
+    var canvas = <HTMLCanvasElement> document.getElementById("fuelChart");
+    var ctx = canvas.getContext("2d");
+
+     this.fuelChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+          labels: this.InsertionTime,
+          datasets: [{
+              label: 'Fuel',
+              data: this.fuelGraphData,
+              backgroundColor: [
+                  'rgba(255, 99, 132, 0.2)',
+                  'rgba(54, 162, 235, 0.2)',
+                  'rgba(255, 206, 86, 0.2)',
+                  'rgba(75, 192, 192, 0.2)',
+                  'rgba(153, 102, 255, 0.2)',
+                  'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                  'rgba(255, 99, 132, 1)',
+                  'rgba(54, 162, 235, 1)',
+                  'rgba(255, 206, 86, 1)',
+                  'rgba(75, 192, 192, 1)',
+                  'rgba(153, 102, 255, 1)',
+                  'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1
+          },
+          {
+            label: 'Voltage',
+            data: this.fuelVoltage,
+            backgroundColor: [
+              'rgba(73,188,170,0.4)'
+            ],
+            borderColor: [
+              'rgba(73,188,170,1)',
+             
+            ],
+            borderWidth: 1
+        }
+         ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }]
+          }
+      }
+  });
+
+
+
+
+  }
+
+  deviceArr=[];
+
+  getReport(event){
+   
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+      console.log('this.deviceArr',this.deviceArr);
+      
+      this.Fromdate = fd;
+      this.todate = td;
+      console.log("b4");
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa); 
+  
+  
+     
+     
+      this.getGraphData();
+        
+    
+    
+    
+   
+  }
+  
+}
diff --git a/src/app/gateway/gateway.component.css b/src/app/gateway/gateway.component.css
new file mode 100644
index 0000000..f1294b3
--- /dev/null
+++ b/src/app/gateway/gateway.component.css
@@ -0,0 +1,148 @@
+body{
+    overflow-y: hidden;
+    overflow-x: hidden;
+}
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 9%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+.sebm-google-map-container {
+    height: 196px;
+  }
+  mwl-gauge {
+    width: 233px;
+    height: 300px;
+    display: block;
+    padding: 10px;
+  }
+  mwl-gauge > .gauge > .dial {
+    stroke: #eee;
+    stroke-width: 20;
+    fill: rgba(0,0,0,0);
+  }
+  mwl-gauge > .gauge > .value {
+    stroke: rgb(47, 227, 255);
+    stroke-width: 20;
+    fill: rgba(0,0,0,0);
+  
+  }
+  mwl-gauge > .gauge > .value-text {
+    fill: rgb(47, 227, 255);
+    font-family: sans-serif;
+    font-weight: bold;
+    font-size: 10em;
+   
+  }
+  #chartdiv {
+	width: 100%;
+	height: 100%;
+}
diff --git a/src/app/gateway/gateway.component.html b/src/app/gateway/gateway.component.html
new file mode 100644
index 0000000..b1b26b7
--- /dev/null
+++ b/src/app/gateway/gateway.component.html
@@ -0,0 +1,449 @@
+<html>
+
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+        <script src="../eon-spark.js"></script>
+    </head>
+    <body>
+       
+        
+  <div class="upper">
+      <md-toolbar>My App</md-toolbar>
+      
+  <md-toolbar flex style="background-color:white;width: 100%;overflow: hidden;position: fixed; top: 0;z-index: 2;" >
+      
+            <img src="../../assets/image/a.jpg" 
+            style=
+            "width:20%;padding-top: 8px;">
+            
+          <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                       </ul>
+            
+                       <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
+                        <!--    <li  style="float:right;" >
+                               <div class="dropdown">
+                                     <img src="../../assets/image/us.jpg" height=30px>
+                                     <div class="dropdown-content">
+                                         <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
+                                         <h6><p id="insert4"></p></h6>
+                                         &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
+                                          &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
+                                          
+                                             
+                                        </div>
+                                   </div>
+                          
+                           </li> -->
+                           <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                              <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                              <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                              <!-- <b> <h4><p id="insert"></p></h4></b>
+                              <h6><p id="insert2"></p></h6> -->
+                              &nbsp; <!-- <button type="reset" class="btn btn-default" >My Account</button>  -->                 
+                                 <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                            </md-menu>
+                            
+                            <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                             <!--   <md-icon>more_vert</md-icon> -->
+                               <img src="../../assets/image/us.jpg" height=30px>
+                            </button>
+                     </ul>
+                           
+                    
+                 
+                         <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                         <!--     <li style="width:27%;float:right">
+                               <div class="dropdown">
+                                     <img src="../../assets/image/us.jpg" height=30px>
+                                     <div class="dropdown-content">
+                                         <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
+                                         <h6><p id="insert2"></p></h6>
+                                         &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                            <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                             
+                                        </div>
+                                   </div>
+                             </li>
+                             -->
+                             <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                               <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                               <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                               <!-- <b> <h4><p id="insert"></p></h4></b>
+                               <h6><p id="insert2"></p></h6> -->
+                               &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                  <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                             </md-menu>
+                             
+                             <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                              <!--   <md-icon>more_vert</md-icon> -->
+                                <img src="../../assets/image/us.jpg" height=30px>
+                             </button>
+                             <!-- <button md-icon-button [mdMenuTriggerFor]="appMenu2"  style="float:right;outline:none"> -->
+                              <!--   <md-icon>more_vert</md-icon> -->
+                        <!--       <md-icon md-tooltip="Notification" style="float: right;padding-top:3%;color:#006699">notifications</md-icon>
+                             </button>
+                             <md-menu #appMenu2="mdMenu" class="my-full-width-menu"[overlapTrigger]="false">
+                               <md-menu-header>&nbsp;&nbsp;<b>Notification</b><br></md-menu-header>
+                              <div style="width:280px;height:61px">
+
+                                <br>
+                              </div>
+                              
+                              </md-menu> -->
+                       </ul>
+                             
+          
+         </md-toolbar>
+  </div>
+  
+
+<!-- <form class="form-group"  #lgForm="ngForm">  
+<div class ="form-group">
+  <md-form-field class="example-full-width width">
+  <input mdInput type="text" [(ngModel)]="otp" name="otp" placeholder="Enter otp here" required>
+  <md-error class="required">Enter OTP</md-error>
+  </md-form-field>
+</div>
+<input type ="button" class="btn btn-primary"(click)="randomize()"  style="float: left;margin:0px 8px;" value="OT"/>
+</form> -->
+<!-- ...............................Graph_1........................... -->
+
+<!-- <div class="row" style="margin-left:2px;">
+    <div class="col-md-6">
+      <div style="display: block;">
+            <h5 align="center">Temprature Vs Humidity</h5>
+      <canvas baseChart width="478px" height="320px"
+                  [datasets]="lineChartData"
+                  [labels]="lineChartLabels"
+                  [options]="lineChartOptions"
+                  [colors]="lineChartColors"
+                  [legend]="lineChartLegend"
+                  [chartType]="lineChartType"
+                  (chartHover)="chartHovered($event)"
+                  (chartClick)="chartClicked($event)"></canvas>
+      </div> -->
+   
+<!--     <div class="col-md-6" style="margin-bottom: 10px">
+  <table class="table table-responsive table-condensed">
+        <tr>
+          <th *ngFor="let label of lineChartLabels">{{label}}</th>
+        </tr>
+        <tr *ngFor="let d of lineChartData">
+          <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
+        </tr>
+      </table> 
+       <button class="btn btn btn-success" (click)="randomize()">Refresh</button>
+   </div> -->
+  <!--  <button class="btn btn btn-success" (click)="randomize()">Refresh</button>
+  </div>
+</div> -->
+
+<!-- <div id="NW">
+        <div class="row">
+                <div class="col-md-6">
+                  <div style="display: block;">
+                        <h5 align="center">Temprature Vs Humidity</h5>
+                  <canvas baseChart width="478px" height="320px"
+                              [datasets]="lineChartData"
+                              [labels]="lineChartLabels"
+                              [options]="lineChartOptions"
+                              [colors]="lineChartColors"
+                              [legend]="lineChartLegend"
+                              [chartType]="lineChartType"
+                              (chartHover)="chartHovered($event)"
+                              (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                 </div>
+              </div>
+
+</div>
+<div id="NE">
+        <div class="row">
+                <div class="col-md-6">
+                  <div style="display: block;">
+                        <h5 align="center">Temprature Vs Humidity</h5>
+                  <canvas baseChart width="478px" height="320px"
+                              [datasets]="lineChartData"
+                              [labels]="lineChartLabels"
+                              [options]="lineChartOptions"
+                              [colors]="lineChartColors"
+                              [legend]="lineChartLegend"
+                              [chartType]="lineChartType"
+                              (chartHover)="chartHovered($event)"
+                              (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                </div>
+              </div>
+
+</div>
+<div id="SW">
+
+        <div class="row">
+                <div class="col-md-6">
+                  <div style="display: block;">
+                        <h5 align="center">Temprature Vs Humidity</h5>
+                  <canvas baseChart width="478px" height="320px"
+                              [datasets]="lineChartData"
+                              [labels]="lineChartLabels"
+                              [options]="lineChartOptions"
+                              [colors]="lineChartColors"
+                              [legend]="lineChartLegend"
+                              [chartType]="lineChartType"
+                              (chartHover)="chartHovered($event)"
+                              (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                 </div>
+              </div>
+
+</div>
+<div id="SE">
+        <div class="row">
+                <div class="col-md-6">
+                  <div style="display: block;">
+                        <h5 align="center">Temprature Vs Humidity</h5>
+                  <canvas baseChart width="478px" height="320px"
+                              [datasets]="lineChartData"
+                              [labels]="lineChartLabels"
+                              [options]="lineChartOptions"
+                              [colors]="lineChartColors"
+                              [legend]="lineChartLegend"
+                              [chartType]="lineChartType"
+                              (chartHover)="chartHovered($event)"
+                              (chartClick)="chartClicked($event)"></canvas>
+                  </div>
+                </div>
+              </div>
+
+</div>
+ -->
+
+<!-- 
+<md-card style="width:480px;height:345px;margin-left: 27px;float:left">
+
+
+</md-card>
+<md-card style="width:480px;height:345px;margin-right: 27px;float:right">
+        
+        
+</md-card> -->
+
+<div class="row">
+ <!--    <linear-gauge
+    width="150"
+    height="400"
+    units="°C"
+    title="Temperature"
+    min-value="-50"
+    max-value="50"
+    major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
+    minor-ticks="5"
+    stroke-ticks="true"
+    ticks-width="15"
+    ticks-width-minor="7.5"
+    highlights='[ {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
+    {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"} ]'
+    color-major-ticks="#ffe66a"
+    color-minor-ticks="#ffe66a"
+    color-title="#eee"
+    color-units="#ccc"
+    color-numbers="#eee"
+    color-plate="#2465c0"
+    color-plate-end="#327ac0"
+    border-shadow-width="0"
+    borders="false"
+    border-radius="10"
+    needle-type="arrow"
+    needle-width="3"
+    animation-duration="250"
+    animation-rule="linear"
+    animated-value="true"
+    color-needle="#222"
+    color-needle-end=""
+    color-bar-progress="#327ac0"
+    color-bar="#f5f5f5"
+    bar-stroke="0"
+    bar-width="8"
+    bar-begin-circle="false"
+    [attr.value]=temp
+  ></linear-gauge> -->
+    <div class="col-md-6">
+        <div style="display: block;"> 
+<md-card  style="height:270px;margin-top:26px;">
+<h5 align="center">Temprature (&deg;C)</h5>
+<p align="center">
+<mwl-gauge
+[max]="60"     
+[dialStartAngle]="-90"
+[dialEndAngle]="-90.001"
+[value]=temp 
+[animated]="true"
+[animationDuration]="1">
+</mwl-gauge></p></md-card></div></div>
+<!--     <div class="col-md-6">
+      <div style="display: block;">
+        <md-card style="margin-top:5px;">
+            <h5 align="center">Humidity</h5>
+
+                  <div class="chart">
+                      <canvas baseChart
+                        [datasets]="datasets"
+                        [labels]="labels"
+                        [options]="options"
+                        [chartType]="'line'" 
+                        (click)="clickData_CorrectAnimation()">
+                      </canvas>
+                    
+                    </div>
+        </md-card>
+ 
+      </div>
+    </div> -->
+    <div class="col-md-6">
+        <div style="display: block;"> 
+            <md-card  style="height:270px;margin-top:26px;">
+            <h5 align="center">Temprature (&deg;F)</h5>
+            <p align="center">
+            <mwl-gauge
+            [max]="1000"     
+            [dialStartAngle]="-90"
+            [dialEndAngle]="-90.001"
+            [value]=temp2 
+            [animated]="true"
+            [animationDuration]="1">
+            </mwl-gauge></p></md-card></div>
+     <!--    <div style="display: block;">
+          <md-card style="margin-top:5px;">
+              <h5 align="center">Rack 1</h5>
+  
+                    <div class="chart">
+                        <canvas baseChart
+                          [datasets]="datasetsss"
+                          [labels]="labelsss"
+                          [options]="optionsss"
+                          [chartType]="'line'" 
+                          (click)="clickData_CorrectAnimationnn()">
+                        </canvas>
+                      
+                      </div>
+          </md-card>
+   
+        </div> -->
+      </div>
+    <div class="col-md-6" style="margin-bottom: 10px">
+  <!--       <md-card style="margin-top:5px;">
+            <h5 align="center">Rack 2</h5>
+
+                  <div class="chart">
+                      <canvas baseChart
+                        [datasets]="datasetss"
+                        [labels]="labelss"
+                        [options]="optionss"
+                        [chartType]="'line'" 
+                        (click)="clickData_CorrectAnimationn()">
+                      </canvas>
+                    
+                    </div>
+        </md-card> -->
+     <!--  <table class="table table-responsive table-condensed">
+        <tr>
+          <th *ngFor="let label of lineChartLabels">{{label}}</th>
+        </tr>
+        <tr *ngFor="let d of lineChartData">
+          <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td>
+        </tr>
+      </table>
+      <button (click)="randomize()">CLICK</button> -->
+  <!--     <div style="display: block;">
+            <canvas baseChart width="478" height="320"
+                        [datasets]="lineChartData"
+                        [labels]="lineChartLabels"
+                        [options]="lineChartOptions"
+                        [colors]="lineChartColors"
+                        [legend]="lineChartLegend"
+                        [chartType]="lineChartType"
+                        (chartHover)="chartHovered($event)"
+                        (chartClick)="chartClicked($event)"></canvas>
+            </div> -->
+        
+            
+    </div>
+  </div>
+  <div class="row">
+      <div class="col-md-6">
+          <div style="display: block;">
+            <md-card style="margin-top:5px;">
+                <h5 align="center">Sleep Mode Temprature</h5>
+    
+                      <div class="chart">
+                          <canvas baseChart
+                            [datasets]="datasetssss"
+                            [labels]="labelssss"
+                            [options]="optionssss"
+                            [chartType]="'line'" 
+                            (click)="clickData_CorrectAnimationnnn()">
+                          </canvas>
+                        
+                        </div>
+            </md-card>
+     
+          </div>
+        </div>
+   <!--      <div class="col-md-6">
+            <div style="display: block;">     
+      <md-card style="height:270px;margin-top:-27px;">
+
+          <div>
+              <div style="display: block">
+                <canvas baseChart
+                        [datasets]="barChartData"
+                        [labels]="barChartLabels"
+                        [options]="barChartOptions"
+                        [legend]="barChartLegend"
+                        [chartType]="barChartType"
+                      ></canvas>
+              </div>
+             
+            </div>
+        </md-card>
+      </div></div> -->
+   <!--  <div class="col-md-6">
+      <div style="display: block;">     
+<md-card style="height:270px;margin-top:-27px;">
+<h5 align="center">Current Location</h5>
+  <sebm-google-map
+  [latitude]="lat"
+  [longitude]="lng">
+  <sebm-google-map-marker
+  [latitude]="lat"
+  [longitude]="lng">
+  </sebm-google-map-marker>
+  </sebm-google-map>
+
+</md-card>
+      </div></div> -->
+     <!--  <div class="col-md-6">
+        <div style="display: block;"> 
+<md-card  style="height:270px;margin-top:-27px;">
+<h5 align="center">Temprature (&deg;C)</h5>
+<p align="center">
+<mwl-gauge
+[max]="60"     
+[dialStartAngle]="-90"
+[dialEndAngle]="-90.001"
+[value]=temp 
+[animated]="true"
+[animationDuration]="1">
+</mwl-gauge></p></md-card></div></div> --></div>
+
+<md-card>
+  <h5>Switch</h5>
+<button id="on" (click)="sendsocket()">ON</button>
+
+<button id="off"(click)="sendsocketoff()">OFF</button>
+</md-card>
+
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/app/gateway/gateway.component.spec.ts b/src/app/gateway/gateway.component.spec.ts
new file mode 100644
index 0000000..c4787e2
--- /dev/null
+++ b/src/app/gateway/gateway.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GatewayComponent } from './gateway.component';
+
+describe('GatewayComponent', () => {
+  let component: GatewayComponent;
+  let fixture: ComponentFixture<GatewayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GatewayComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GatewayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/gateway/gateway.component.ts b/src/app/gateway/gateway.component.ts
new file mode 100644
index 0000000..0665438
--- /dev/null
+++ b/src/app/gateway/gateway.component.ts
@@ -0,0 +1,752 @@
+import { environment } from './../../environments/environment';
+
+import { Component, Output, OnInit,EventEmitter, ContentChildren, QueryList, AfterContentInit,ViewChild } from '@angular/core';
+import { DashComponent } from '../dash/dash.component';
+import {ContactService} from '../contact.service';
+import {Graph} from '../graph';
+import { Injectable } from '@angular/core';
+import {Observable} from 'rxjs/Rx';
+import { BrowserModule } from '@angular/platform-browser';
+import { ChartsModule } from 'ng2-charts/ng2-charts';
+import { BaseChartDirective } from 'ng2-charts/ng2-charts';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import * as io from 'socket.io-client';
+import {DatainjectionService} from '../datainjection.service'
+@Component({
+ selector: 'form-wizard',
+ templateUrl: './gateway.component.html',
+ styleUrls: ['./gateway.component.css'],
+ providers: [ContactService],
+})
+export class GatewayComponent implements OnInit {
+ @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
+ // lineChart
+ cor:any;
+ username:any;
+ otp:any;
+ graphs: Graph[];
+ graph: Graph;
+ private socket;
+ socket_5000 = environment.socket5000
+
+// mos_channel_link = environment.mosChannel;
+ logout(){
+ 
+ window.localStorage.clear();
+ this.router.navigateByUrl("login");
+ // window.localStorage.removeItem('_i');
+ //this.fs.clearCache();
+ //this.router.navigateByUrl("login");
+ // this.activatedRoute.queryParams.subscribe((params: Params) => {
+ // let userId = params['_i'];
+ // userId === null;
+// });
+// this.fs === null;
+ // this.ls === null; 
+ // this.or === null;
+ 
+ 
+ }
+ addContact2(){
+console.log(this.graphs);
+ /* setInterval(function(){alert("Hello")},3000) */
+console.log(this.otp);
+
+}
+ideal(){
+ this.router.navigateByUrl("device-report/ideal-report");
+}
+
+_lineChartData:any;
+public info: string;
+public prevDatasets;
+public datasets = [
+ {
+ label: "Humidity",
+ data: [1, 1, 1, 1, 1, 1]
+ }
+];
+public datasetss = [
+ {
+ label: "Rack 2",
+ data: [0, 0, 0, 0, 0, 0]
+ }
+];
+public datasetsss = [
+ {
+ label: "Rack 1",
+ data: [0, 0, 0, 0, 0, 0]
+ }
+];
+public datasetssss = [
+ {
+ label: "Sleep Mode Temprature",
+ data: [0, 0, 0, 0, 0, 0]
+ }
+];
+public labels = ['', '', '', '', '', ''];
+public labelss = ['', '', '', '', '', ''];
+public labelsss = ['', '', '', '', '', ''];
+public labelssss = ['', '', '', '', '', ''];
+
+public options = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: false,
+ max: 100,
+ min: 0
+ }
+ }] 
+ }
+};
+public optionss = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ max: 100,
+ min: 0
+ }
+ }] 
+ }
+};
+public optionsss = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ max: 100,
+ min: 0
+ }
+ }] 
+ }
+};
+public optionssss = {
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ max: 250,
+ min: 0
+ }
+ }] 
+ }
+};
+
+change() {
+ this.datasets = [{
+ label: "Humidity",
+ data: []
+ }];
+ 
+ this.labels = [];
+}
+changee() {
+ this.datasets = [{
+ label: "Distance",
+ data: []
+ }];
+ 
+ this.labels = [];
+}
+changeee() {
+ this.datasets = [{
+ label: "Distance",
+ data: []
+ }];
+ 
+ this.labels = [];
+}
+changeeee() {
+ this.datasets = [{
+ label: "Distance",
+ data: []
+ }];
+ 
+ this.labels = [];
+}
+sendsocket(){
+ console.log("Running ON Socket");
+ var devicename = "qlikAway_Smartswitch";
+ var command = "on";
+ this.socket.emit('publish',{topic:devicename,payload:command}); 
+ 
+}
+sendsocketoff(){
+ console.log("Running OFF Socket");
+ var devicename = "qlikAway_Smartswitch";
+ var command = "off";
+ this.socket.emit('publish',{topic:devicename,payload:command}); 
+ 
+}
+time:any;
+tem:any;
+clickData_CorrectAnimation() {
+
+ 
+ this.socket.on('mqtt', (msg) => {
+ 
+ // console.log(msg);
+ // console.log(msg.topic +" => "+ msg.payload);
+ if(msg.topic==="humid")
+ {
+ //console.log(new Date().toISOString());
+ this.time = new Date().toLocaleTimeString();
+ //this.a= this.time.split("T")[1];
+ 
+ this.humid = parseFloat(msg.payload); 
+ let newData = this.datasets[0].data.slice();
+ let newTime = this.labels.slice();
+ newData.shift();
+ newTime.shift();
+ newData.push(this.humid);
+ // newTime.push(this.a);
+ this.datasets = [{
+ label: "Humidity",
+ data: newData
+ }];
+ this.labels.shift();
+ this.labels.push(this.time)
+ // this.labels = newTime;
+ console.log(this.labels);
+ }
+ else if(msg.topic ==="distance21"){
+ console.log("************Sleep Mode TIME DATE**************")
+ console.log(msg.payload) 
+ console.log(new Date()) 
+ console.log("**********************************************")
+ this.dist = parseFloat(msg.payload); 
+ let newDataaaa = this.datasetssss[0].data.slice();
+ let newTimee = this.labels.slice();
+ 
+ 
+ if(this.dist){
+ // console.log("Dist TRue")
+ this.timee = new Date().toLocaleTimeString();
+ // console.log(this.dist);
+ // console.log(this.timee);
+ newDataaaa.shift();
+ newDataaaa.push(this.dist);
+ /* this.labelss.shift();
+ this.labelss.push(this.timee) */
+ this.dist = 0;
+ this.timee = 0;
+ }
+ this.datasetssss = [{
+ label: "Sleep Mode Temprature",
+ data: newDataaaa
+ }];
+ // this.clickData_CorrectAnimationn()
+ // this.clickData_CorrectAnimationnn()
+ // this.clickData_CorrectAnimationnnn()
+ //clickData_CorrectAnimationn
+ } 
+ /* else if(msg.topic==="distance2"){
+ this.clickData_CorrectAnimationnn()
+ 
+ } 
+ else if(msg.topic==="distance3"){
+ this.clickData_CorrectAnimationnnn()
+ 
+ } */
+ /* temp */
+ else if(msg.topic==="temp"){
+ this.temp = parseFloat(msg.payload); 
+ console.log("************TIME DATE**************")
+ console.log(msg.payload) 
+ console.log(new Date()) 
+ console.log("***********************************")
+
+ /* T(°F) = T(°C) × 1.8 + 32
+
+ */
+ this.temp2 = this.temp * 1.8 + 32
+ }
+ else if(msg.topic==="gps"){
+ this.lng = parseFloat(msg.payload.longitude);
+ this.lat = parseFloat(msg.payload.latitude);
+ }
+ });
+ 
+ 
+ 
+ 
+ /* this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ 
+ console.log("Data at Component", this.testResponse);
+ 
+ 
+ 
+
+ this.humid = parseFloat(this.testResponse.humidity[0]);
+ let newData = this.datasets[0].data.slice();
+ newData.shift();
+ newData.push(this.testResponse.humidity[0]);
+ 
+ this.datasets = [{
+ label: "Humidity",
+ data: newData
+ }];
+
+ 
+ 
+ }
+ 
+ ); */
+
+ } 
+
+timee:any
+t:any = 0;
+ clickData_CorrectAnimationn() {
+
+ this.socket.on('mqtt', (msg) => {
+ 
+ 
+ if(msg.topic==="distance1")
+ {
+ console.log("Distance 1")
+ 
+ console.log(msg.payload)
+ 
+ this.dist = parseFloat(msg.payload); 
+ let newDataa = this.datasetsss[0].data.slice();
+ let newTimee = this.labels.slice();
+ 
+ 
+ if(this.dist){
+ // console.log("Dist TRue")
+ this.timee = new Date().toLocaleTimeString();
+ // console.log(this.dist);
+ // console.log(this.timee);
+ newDataa.shift();
+ newDataa.push(this.dist);
+ this.barChartData.push(this.datasetsss);
+ /* this.labelss.shift();
+ this.labelss.push(this.timee) */
+ this.dist = 0;
+ this.timee = 0;
+ 
+ }
+ this.datasetsss = [{
+ label: "Rack 1",
+ data: newDataa
+ }];
+ 
+ // this.labels = newTime;
+ // console.log(this.labelss);
+ 
+ } 
+ });
+ 
+ 
+ 
+ /* this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ 
+ console.log("Data at Component", this.testResponse);
+ 
+ 
+ 
+ 
+ 
+ let newDataa = this.datasetss[0].data.slice();
+ newDataa.shift();
+ newDataa.push(this.testResponse.distance[0]);
+ 
+ this.datasetss = [{
+ label: "Distance",
+ data: newDataa
+ }];
+ 
+ 
+ 
+ }
+ 
+ ); */
+ 
+ } 
+ 
+
+ clickData_CorrectAnimationnn() {
+
+ this.socket.on('mqtt', (msg) => {
+ 
+ 
+ if(msg.topic==="distance2")
+ {
+ console.log("Distance2")
+ 
+ 
+ this.dist = parseFloat(msg.payload); 
+ let newDataaa = this.datasetss[0].data.slice();
+ let newTimee = this.labels.slice();
+ 
+ 
+ if(this.dist){
+ // console.log("Dist TRue")
+ this.timee = new Date().toLocaleTimeString();
+ // console.log(this.dist);
+ // console.log(this.timee);
+ newDataaa.shift();
+ newDataaa.push(this.dist);
+ /* this.labelss.shift();
+ this.labelss.push(this.timee) */
+ this.dist = 0;
+ this.timee = 0;
+ }
+ this.datasetss = [{
+ label: "Rack 2",
+ data: newDataaa
+ }];
+ 
+ // this.labels = newTime;
+ // console.log(this.labelss);
+ 
+ } 
+ });
+ 
+ 
+ 
+ /* this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ 
+ console.log("Data at Component", this.testResponse);
+ 
+ 
+ 
+ 
+ 
+ let newDataa = this.datasetss[0].data.slice();
+ newDataa.shift();
+ newDataa.push(this.testResponse.distance[0]);
+ 
+ this.datasetss = [{
+ label: "Distance",
+ data: newDataa
+ }];
+ 
+ 
+ 
+ }
+ 
+ ); */
+ 
+ } 
+
+
+
+
+
+ clickData_CorrectAnimationnnn() {
+
+ this.socket.on('mqtt', (msg) => {
+ 
+ 
+ if(msg.topic==="distance21")
+ {
+ //console.log("Distance 3")
+ 
+ 
+ 
+ this.dist = parseFloat(msg.payload); 
+ let newDataaaa = this.datasetssss[0].data.slice();
+ let newTimee = this.labels.slice();
+ 
+ 
+ if(this.dist){
+ // console.log("Dist TRue")
+ this.timee = new Date().toLocaleTimeString();
+ // console.log(this.dist);
+ // console.log(this.timee);
+ newDataaaa.shift();
+ newDataaaa.push(this.dist);
+ /* this.labelss.shift();
+ this.labelss.push(this.timee) */
+ this.dist = 0;
+ this.timee = 0;
+ }
+ this.datasetssss = [{
+ label: "Sleep Mode Temprature",
+ data: newDataaaa
+ }];
+ 
+ // this.labels = newTime;
+ // console.log(this.labelss);
+ 
+ } 
+ });
+ 
+ 
+ 
+ /* this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ 
+ console.log("Data at Component", this.testResponse);
+ 
+ 
+ 
+ 
+ 
+ let newDataa = this.datasetss[0].data.slice();
+ newDataa.shift();
+ newDataa.push(this.testResponse.distance[0]);
+ 
+ this.datasetss = [{
+ label: "Distance",
+ data: newDataa
+ }];
+ 
+ 
+ 
+ }
+ 
+ ); */
+ 
+ } 
+
+
+
+
+
+
+
+
+
+
+ public lineChartData:Array<any> =
+ 
+ [
+ 
+ {data: [], label: 'Humidity'}
+]; 
+
+public lineChartLabels:Array<any> = [];
+public lineChartOptions:any = {
+ responsive: true
+};
+public lineChartColors:Array<any> = [
+ { // grey
+ backgroundColor: 'rgba(148,159,177,0.2)',
+ borderColor: 'rgba(148,159,177,1)',
+ pointBackgroundColor: 'rgba(148,159,177,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+ },
+ { // dark grey
+ backgroundColor: 'rgba(77,83,96,0.2)',
+ borderColor: 'rgba(77,83,96,1)',
+ pointBackgroundColor: 'rgba(77,83,96,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(77,83,96,1)'
+ },
+ { // grey
+ backgroundColor: 'rgba(148,159,177,0.2)',
+ borderColor: 'rgba(148,159,177,1)',
+ pointBackgroundColor: 'rgba(148,159,177,1)',
+ pointBorderColor: '#fff',
+ pointHoverBackgroundColor: '#fff',
+ pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+ }
+];
+
+public lineChartLegend:boolean = true;
+public lineChartType:string = 'line';
+
+public randomize():void {
+ let _lineChartData:Array<any> = new Array(this.lineChartData.length);
+/* for (let i = 0; i < this.lineChartData.length; i++) {
+ _lineChartData[i] = {data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label};
+ for (let j = 0; j < this.lineChartData[i].data.length; j++) {
+ _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
+ }
+ } */
+ for(let i=0;i< this.lineChartData.length; i++){
+ _lineChartData[i] = this.otp;
+ }
+ this.lineChartData = _lineChartData;
+}
+
+// events
+/* public chartClicked(e:any):void {
+ console.log(e);
+} */
+constructor(private contactService:ContactService, private activatedRoute: ActivatedRoute,private router: Router, private injectData:DatainjectionService){
+
+}
+public barChartOptions:any = {
+ scaleShowVerticalLines: false,
+ responsive: true
+};
+public barChartLabels:string[] = ['', '', '', '', '', '', ''];
+public barChartType:string = 'bar';
+public barChartLegend:boolean = true;
+
+/* change() {
+ this.datasets = [{
+ label: "Humidity",
+ data: []
+ }];
+ 
+ this.labels = [];
+} */
+public barChartData:any[] = [
+ {data: [], label: 'Rack'}
+];
+
+// events
+public chartClicked(e:any):void {
+ console.log(e);
+}
+
+public chartHovered(e:any):void {
+ console.log(e);
+}
+
+
+
+
+
+
+testResponse :any;
+lat: any;
+lng:any;
+temp:any = 0;
+temp2:any = 0;
+humid:any;
+dist:any;
+Chart:any;
+i=0;
+a:any;
+fs:any;
+ls:any;
+or:any;
+ngOnInit() {
+ this.fs = "Gaurav";
+ this.ls = "Gupta";
+ this.or = "adnate"
+/* this.activatedRoute.queryParams.subscribe((params: Params) => {
+
+ let userId = window.localStorage['token'] = params['_i'];
+
+ this.fs = JSON.parse(window.atob(userId.split(".")[1])).fn;
+ this.ls = JSON.parse(window.atob(userId.split(".")[1])).ln;
+ this.or = JSON.parse(window.atob(userId.split(".")[1]))._orgName;
+
+ function splitString(stringToSplit, separator) {
+ var arrayOfStrings = stringToSplit.split(separator);
+ 
+ 
+ this.fs = JSON.parse(window.atob(arrayOfStrings[1])).fn;
+ 
+ 
+ }
+ 
+ var comma = '.';
+ 
+ 
+ }); */
+
+/* Observable.interval(2000).subscribe(x => {
+ 
+ 
+ 
+ 
+ this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ 
+ console.log("Data at Component", this.testResponse);
+ this.clickData_CorrectAnimation();
+ this.clickData_CorrectAnimationn();
+ this.humid = parseFloat(this.testResponse.humidity[0]);
+ this.dist = parseFloat(this.testResponse.distance[0]);
+ this.temp = parseFloat(this.testResponse.temperature[0]);
+ this.lat = parseFloat(this.testResponse.gps[0].longitude);
+ this.lng = parseFloat(this.testResponse.gps[0].latitude);
+ console.log("lat"+this.lat);
+ console.log("lng"+this.lng);
+ console.log("temp"+this.temp);
+ console.log("humid"+this.humid);
+ console.log("dis"+this.dist)
+ 
+ 
+ }
+ 
+ );
+ }); */
+ /* this.lineChartData[0].data.push(this.otp);
+ 
+ this.contactService.getDataObservable(this.mos_channel_link).subscribe(
+ 
+ data => {
+ this.testResponse = data
+ console.log("Data at Component", this.testResponse);
+
+ this.lat = parseFloat(this.testResponse.gps[0]);
+ this.temp = parseFloat(this.testResponse.temperature[0]);
+ this.humid = parseFloat(this.testResponse.humidity[0]);
+ console.log("lat"+this.lat);
+ 
+ console.log("temp"+this.temp)
+ console.log("humid"+this.humid)
+ // this.lng = 78.9629; AIzaSyBipEX9tdWLlKYKtRqHB3laWqFH9J1SEk4
+ this.lineChartData[0].data.push(this.humid);
+ }
+ 
+ ); */
+ 
+ 
+ /* var mychartEle = document.getElementById('myChart');
+ console.log(mychartEle);
+ var ctx = mychartEle.getAttribute;
+ console.log(ctx); */
+/* var chart = new this.Chart(ctx, {
+ type: 'line',
+ data: {
+ datasets: [{
+ data: []
+ },{
+ data: []
+ }]
+ },
+ options: {
+ scales: {
+ xAxes: [{
+ type: 'realtime'
+ }]
+ }
+ }
+ }); */
+ console.log("Sockets....");
+ 
+ this.socket = this.injectData.getSocket_5000();
+ io.connect(this.socket_5000);
+ this.socket.on('connect', function(){
+ console.log("IO Connected");
+ 
+ });
+
+
+ /* Commented bcz the mqtt socket is not working || Please Renove Comment " this.clickData_CorrectAnimation();" for temprature graph */
+
+ 
+ this.clickData_CorrectAnimation();
+ //this.clickData_CorrectAnimationn();
+ 
+} 
+
+}
\ No newline at end of file
diff --git a/src/app/geofence-add/geofence-add.component.html b/src/app/geofence-add/geofence-add.component.html
new file mode 100644
index 0000000..3eb5b32
--- /dev/null
+++ b/src/app/geofence-add/geofence-add.component.html
@@ -0,0 +1,221 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <button (click)="loaction.back()" type="button" style="float: left;color: beige;" class="btn btn-outline-primary"><i class="fa fa-arrow-left"></i>  Back</button>
+      <h4>{{'Add Geo Fence' | translate}}</h4>
+    </div>
+  </div> 
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+  </div>
+  <div class="row" style="padding:0px">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
+      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Address' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">    
+              <input id="pac-input" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Places">  
+            </div>
+          </div>
+            <!-- <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Group' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">  
+                  <select id="dbselect" multiple="multiple">
+                    <option *ngFor="let grp of grpName" [value]="grp._id">{{grp.name}}</option>
+                  </select>  -->
+               
+                    <!-- <md-select style="display: grid;padding-top:11px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
+                      <md-option *ngFor="let grp of grpName" [value]="grp">
+                        {{grp.name}}
+                      </md-option>
+                    </md-select> -->
+                <!-- </div>
+              </div> -->
+            <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Geofence Type' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">
+                  <select id="dbselect_1" multiple="multiple">
+                    <option *ngFor="let geoT of geoType" [value]="geoT">{{geoT}}</option>
+                  </select> 
+                  <!-- <md-select style="display: grid;padding-top:11px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
+                    <md-option *ngFor="let geoT of geoType" [value]="geoT">
+                      {{geoT}}
+                    </md-option>
+                  </md-select> -->
+                </div>
+              </div>   
+              <!-- <div class="row" style="margin: 0;margin-top: 5px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0; padding-top: 15px;font-size: 12px;">{{'Drawing Type' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;">
+             
+                 
+                </div>
+              </div>        -->
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;">
+                  <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Geofence Name' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
+                  <!-- <md-form-field class="example-full-width width" style="width:100%;float:left"> -->
+                    <input type="text" style="height: 28px;" class="form-control" name="geoname" type="text" [(ngModel)]="geoname"  placeholder="{{'Geofence Name' | translate}}" />
+                    <!-- <input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/> -->
+                    <!-- <md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error> -->
+                  <!-- </md-form-field> -->
+                </div>
+              </div>   
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Halt Alert' | translate}}</p>          
+                </div>
+                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
+                  <md-checkbox [(ngModel)]="halt_alert" style="float:left;margin-top: 4px;"></md-checkbox>           
+                  <input [disabled] = "halt_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="haltAlert" placeholder="Min." />             
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
+                  <p>Min.</p>
+                 </div>
+              </div>
+              <div class="row" style="margin: 0;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Geofence Alert' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px;">    
+                  <md-checkbox [(ngModel)]="enter" style="float:left;">{{'Entering' | translate}}</md-checkbox>     
+                  <md-checkbox style="float:left;margin-left: 20px;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
+                </div>
+              </div>   
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Geofence Color' | translate}}</p>
+                </div>
+                <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px;">    
+                  <input type="color" name="favcolor" value="#ff0000" [(ngModel)]="geofenceColor">    
+                </div>
+              </div> 
+              <div class="row" style="margin:0;margin-bottom:10px" *ngIf="btnTag === 'Create'">
+                <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+                <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;" ngDefaultControl>
+                  <md-option type="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"
+                    (click)="change(item, i)">{{item.deviceName}}</md-option>
+                </md-select> -->
+              <!-- <select id="dbselect" multiple="multiple">
+                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+              </select>
+              {{options|json}} -->
+
+              </div>    
+              <div class="row" style="margin: 0;margin-top: 20px;">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
+                  <button style="background-color: #0e6cfb; color: white; float: right;" md-raised-button (click)="creategeo()">{{btnTag | translate}}</button>
+                
+                </div>
+              </div>
+    </div></div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <div  id="map" style="width: 100%; height: 85vh"></div>
+    </div>
+  </div>
+  </div> 
+
+
+
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+
+
+
+  <div class="small">
+    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
+      <i class="material-icons">list</i>
+    </button>
+    <md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+          <md-icon style="float:right">dashboard</md-icon>
+        </h6>
+      </a>
+
+
+      <a href="#">
+        <h6>RULES
+          <md-icon style="float:right">dock</md-icon>
+        </h6>
+      </a>
+
+
+    </md-menu>
+  </div>
+
+  <div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
+      overflow-x: hidden;">
+    <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+  </div>
+  <div style="float:left; width: 99%; padding-top: 6%;">
+    <b>
+      <h4 style="text-align:center;padding-top:1%">{{'Add Geo Fence' | translate}}</h4>
+    </b>
+    <table class="scroll" id="myTable" class="table table-striped ">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
+              <md-option *ngFor="let grp of grpName" [value]="grp">
+                {{grp.name}}
+              </md-option>
+            </md-select>
+          </td>
+          <td>
+            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
+              <md-option *ngFor="let geoT of geoType" [value]="geoT">
+                {{geoT}}
+              </md-option>
+            </md-select>
+          </td>
+          <td style="width:30%">
+            <md-form-field class="example-full-width width" style="width:100%;float:left">
+              <input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/>
+              <md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error>
+            </md-form-field>
+          </td>
+          <td style="width:15%">
+            <p style="padding-top: 18%;">{{'Get Alert on' | translate}} :</p>
+          </td>
+          <td style="width:15%;padding-top: 19px;">
+            <md-checkbox [(ngModel)]=" enter" style="float:left;padding-top: 8%;">{{'Entering' | translate}}</md-checkbox>
+          </td>
+          <td style="width:20%;padding-top: 19px;">
+            <md-checkbox style="float:left;padding-top: 8%;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
+          </td>
+          <td style="width:20%;padding-top: 19px;">
+            <button style="width: 60%;cursor:pointer;margin-top: 4%;" class="btn btn-success" (click)="creategeo()">{{'Create' | translate}}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p style=float:left>{{'Select Your Geo Fence Region' | translate}} :</p>
+    <br>
+    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
+    <div id="map" style="padding: 0px;width: 100%;display: flex;height: 57vh;"></div>
+  </div>
+ -->
diff --git a/src/app/geofence-add/geofence-add.component.scss b/src/app/geofence-add/geofence-add.component.scss
new file mode 100644
index 0000000..9dc4a62
--- /dev/null
+++ b/src/app/geofence-add/geofence-add.component.scss
@@ -0,0 +1,77 @@
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 300px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img{
+width: 50px;
+height: 50px;
+  
+  float: left;
+  
+  padding-top: 16px;
+  padding-bottom: 16px;
+  
+  box-sizing: border-box;
+
+  
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc{
+
+  
+  color: #fff;
+ 
+  padding: 16px;
+  
+  overflow: hidden;
+white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+div[title="Stop drawing"] {
+      
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a circle"] {
+ 
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a rectangle"] {
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+
diff --git a/src/app/geofence-add/geofence-add.component.spec.ts b/src/app/geofence-add/geofence-add.component.spec.ts
new file mode 100644
index 0000000..fd749c3
--- /dev/null
+++ b/src/app/geofence-add/geofence-add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofenceAddComponent } from './geofence-add.component';
+
+describe('GeofenceAddComponent', () => {
+  let component: GeofenceAddComponent;
+  let fixture: ComponentFixture<GeofenceAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofenceAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofenceAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/geofence-add/geofence-add.component.ts b/src/app/geofence-add/geofence-add.component.ts
new file mode 100644
index 0000000..fa8c4d2
--- /dev/null
+++ b/src/app/geofence-add/geofence-add.component.ts
@@ -0,0 +1,1149 @@
+import { Component, OnInit } from '@angular/core';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import {ContactService} from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { typeSourceSpan } from '@angular/compiler';
+import { Location } from '@angular/common';
+
+declare var google: any;
+declare var $:any;
+
+@Component({
+  selector: 'app-geofence-add',
+  templateUrl: './geofence-add.component.html',
+  styleUrls: ['./geofence-add.component.scss'],
+  providers: [ContactService]
+  
+})
+export class GeofenceAddComponent implements OnInit {
+  grpName: any =[];
+  geoT:any;
+  geofenceColor :any='#ff0000';
+  geoType= ["Loading","Unloading","Parking"];
+  fs :any;
+  ls:any;
+  emailid:any;
+  or:any;
+  onn_time:any;
+  min:any;
+  corect_min:any;
+  hr:any;
+  grp:any;
+  shapeRadius: any;
+  shapeLocation: { lat: any; lng: any; };
+  address: any;
+  halt_alert : Boolean = false;
+  gMap: any;
+  flightPath: any;
+  btnTag: string= 'Create';
+  geofence_id: string;
+  devicesss=[];
+  uncheckedArr=[]
+  poiDevices=[];
+  tempArray: any[];
+  untrackedDev=[];
+  selectedDevices: any[];
+  notSelectedPOIArray=[];
+  options: any=[{selectedValue : '',value:''}];
+  run(){
+  
+  }
+  data_descip:any;
+  tost1(divid){
+    if(divid == "Error : Please Select Geo Fence Region"){
+      this.data_descip = 'Error : Please Select Geo Fence Region';
+      launch_toast();
+    }
+    else if(divid == "Error : Select Alert Type"){
+      this.data_descip ='Error : Select Alert Type';
+      launch_toast();
+    }
+    else if(divid == 'Error : Please enter your Geo Fence name'){
+      this.data_descip = 'Error : Please enter your Geo Fence name';
+      launch_toast();
+    }
+    else if(divid == "blankemail"){
+      this.data_descip = "Blank Email ID or Mobile Number";
+      launch_toast();
+    }
+    else if(divid == "deleteshareDevice"){
+      this.data_descip = "Share Device Succesfully Removed";
+      
+      launch_toast();
+    }
+    else if(divid == "removeuser"){
+      this.data_descip = "Share Device User Succesfully Removed";
+      
+      launch_toast();
+    }
+    else if(divid == "No_Dev"){
+      this.data_descip = "No Shared Users for this Device";
+      
+      launch_toast();
+    }
+    else if(divid == "device_alert"){
+      this.data_descip = "Speed Alert Sucessfully Added";
+      launch_toast();
+    }
+    else if(divid == "NotSucc"){
+      this.data_descip = "Speed Alert Removed";
+      launch_toast();
+    }
+    else if(divid == "new_Device"){
+      window.localStorage['FinalAddDevice'] = 'False'
+      this.data_descip = "New Device Added";
+      launch_toast();        
+    }else if(divid == 'Error : Please Select Group'){
+      window.localStorage['FinalAddDevice'] = 'False'
+      this.data_descip = "Please Select Group";
+      launch_toast();
+    }else if(divid === "Error : Please Select Geofence type"){
+      window.localStorage['FinalAddDevice'] = 'False'
+      this.data_descip = "Please Select Geofence type";
+      launch_toast();
+    }else if (divid === "Error : Please create Geo Fence"){
+      window.localStorage['FinalAddDevice'] = 'False'
+      this.data_descip = "Please create Geo Fence";
+      launch_toast();
+    }else if (divid === "deleteFirst"){
+      this.data_descip = "Recreate Geofence first";
+      launch_toast();
+    }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2500);
+    }
+     }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+ 
+    constructor(public loaction:Location,private router: Router ,private contactService:ContactService,private _flashMessagesService: FlashMessagesService,public dialog: MdDialog) {
+   
+     }
+
+    mydealer(){
+      window.localStorage['token'] =  window.localStorage['Dealer_token'];
+      localStorage.removeItem('devices');
+      window.localStorage['DataUpdate'] = 'True';
+      if(window.localStorage['DataLoaded'] = 'True'){
+        window.localStorage['Custumer'] = 'OFF'
+        this.router.navigateByUrl("add")
+       // this.router.navigateByUrl("const?_status="+"OK");
+      }
+    }
+    cond:Boolean = false;
+    point : any = 0;
+    
+    devicess:any;
+    final:any;
+    getdev(){
+      let foods = []
+      this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+          
+        data => {
+          this.devicess = data.devices ;
+          console.log("IN DEVICE___",this.devicess);
+          
+
+          for(let i=0;i<this.devicess.length;i++){
+              let a ={
+                value : this.devicess[i].Device_Name,
+                viewValue:this.devicess[i].Device_Name,
+                did:this.devicess[i].Device_ID,
+                id:this.devicess[i]._id,
+                user:this.devicess[i].user,
+               
+              }
+             
+                a['selectedValue'] = this.devicess[i]._id ; 
+                this.options.push(a);
+              }
+
+    
+        });
+    }
+
+    geoname:any = null;
+    new:any = null;
+    enter:any;
+    exit:any;
+    geoadd:any;
+    before:any;
+    haltAlert:number = 60;
+    creategeo(){
+
+      if(this.flightPathArr.length != 0){
+        this.tost1('deleteFirst');
+        return;
+        
+
+      }
+     
+      // var grp =  $('#dbselect').multipleSelect('getSelects','value'); 
+      var geoType =  $('#dbselect_1').multipleSelect('getSelects','value'); 
+      var retrievedData = localStorage.getItem("cordinates");
+      var cord = JSON.parse(retrievedData);   
+      // console.log(grp,geoType);
+     
+      // if((grp === undefined)||(grp.length === 0)){
+      //    this.tost1('Error : Please Select Group');
+      // }
+      // else 
+      if((geoType === undefined)||(geoType.length === 0)){
+        this.tost1('Error : Please Select Geofence type');
+      }         
+      else if((cord == null || cord == undefined) && (this.shapeIdentifier == 'polygon')){
+       /*  this._flashMessagesService.show('Error : Please Select Geo Fence Region', { cssClass: 'alert-danger', timeout: 2000 });   */
+        this.tost1('Error : Please Select Geo Fence Region')
+      }
+      else if(this.enter == false && this.exit == false){
+     /*    this._flashMessagesService.show('Error : Select Alert Type', { cssClass: 'alert-danger', timeout: 2000 });  */ 
+        this.tost1('Error : Select Alert Type')
+      }
+      else if(this.geoname == null || this.geoname == undefined){
+      /*   this._flashMessagesService.show('Error : Please enter your Geo Fence name', { cssClass: 'alert-danger', timeout: 2000 });  */
+        this.tost1('Error : Please enter your Geo Fence name') 
+      }else if(this.shapeIdentifier === undefined){
+        this.tost1('Error : Please create Geo Fence') 
+      }
+      else{
+
+        // console.log("Coordinates",cord);    
+   
+        if (this.shapeIdentifier === 'polygon') {
+          const newGeo ={
+            uid: this.useridd,
+            geofence:cord,
+            geoname: this.geoname,
+            entering:this.enter,
+            exiting:this.exit,
+            // vehicleGroup:grp[0],
+            type:geoType[0],
+            // untrackedDevice:this.notSelectedPOIArray      
+          }
+
+          if(this.halt_alert === true){
+            newGeo['halt_notif'] = this.halt_alert ; 
+            newGeo['halt_time'] = JSON.stringify(this.haltAlert) ; 
+          }else{
+            newGeo['halt_notif']  = false; 
+          }
+
+          if(this.btnTag === 'Create'){
+            // newGeo['untrackedDevice']=this.notSelectedPOIArray 
+            console.log("NEEJDKJ",newGeo);
+            
+            this.contactService.addGeo(newGeo).subscribe(devgeo => {
+              localStorage.removeItem("cordinates");
+              this.router.navigateByUrl("geofencing");
+              this.geoadd.push(devgeo);
+            }, (err: any) => { 
+  
+            });
+          }
+
+          if(this.btnTag === 'Update'){
+      
+            newGeo['_id'] = this.geofence_id;
+            this.contactService.updateGeo(newGeo).subscribe(devgeo => {
+              localStorage.removeItem("cordinates");
+              this.router.navigateByUrl("geofencing");
+              // this.geoadd.push(devgeo);
+            }, (err: any) => { 
+  
+            });
+          }
+
+        }
+
+
+        if (this.shapeIdentifier === 'circle') {
+          var circleObj = 
+          {
+            "poi": [
+              {
+                "location": {
+                  "type": "Point",
+                  "coordinates": [
+                    this.shapeLocation.lat,
+                    this.shapeLocation.lng
+                  ]
+                },
+                "poiname": this.geoname,
+                // "group" : grp[0],
+                "status": "Active",
+                "user": this.useridd,
+                "address":  this.address,
+                "radius":  this.shapeRadius ,
+                "entering":this.enter,
+                "exiting":this.exit
+              }
+            ]
+          }
+          
+          if(this.halt_alert === true){
+            circleObj['halt_notif'] = this.halt_alert ; 
+            circleObj['halt_time'] = JSON.stringify(this.haltAlert) ; 
+          }else{
+            circleObj['halt_notif']  = false; 
+          }
+
+            this.contactService.addOnePoi(circleObj).subscribe(poiResp => {
+              console.log('poiResp',poiResp);
+              localStorage.removeItem("cordinates");
+              this.router.navigateByUrl("geofencing");
+              // this.geoadd.push(devgeo);
+            }, (err: any) => { 
+              console.log(err);
+            });
+        }
+    }
+
+      //this.showgeo();
+
+    }
+  
+    showgeo(){
+      var that =this;
+       let map;
+       let cord = [];
+       let finalcord = [];
+      var outerThis= this;
+      // console.log("Running GEO")
+      if (navigator.geolocation) {  
+       
+        if(location.protocol != 'https:'){
+          console.log('https nahi hai');
+
+          this.contactService.getlatLong().subscribe(res=>{
+            console.log(res);
+            var position = {
+              coords: { 
+                latitude: res.lat,
+                longitude: res.lon
+              }
+            };
+
+         
+
+            this.getAddress(res.lat,res.lon);
+
+            map = new google.maps.Map(document.getElementById('map'), {
+              center: {
+                  lat: position.coords.latitude,
+                  lng: position.coords.longitude
+              },
+            
+              zoom: 18
+          });    
+          that.gMap = map;
+          drawPoly();
+            this.geofenceFunction(map,finalcord,cord,position)
+          })
+        }else{
+          console.log('https hai');
+
+          navigator.geolocation.getCurrentPosition(function(position) {
+              
+            map = new google.maps.Map(document.getElementById('map'), {
+                center: {
+                    lat: position.coords.latitude,
+                    lng: position.coords.longitude
+                },
+            
+                zoom: 18
+            });
+            that.gMap = map;
+            drawPoly();
+            outerThis.getAddress(position.coords.latitude,position.coords.longitude)
+            outerThis.geofenceFunction(map,finalcord,cord,position)
+
+        });
+        }
+
+            }
+
+            function drawPoly(){
+            
+              if(that.flightPathArr.length !=0){
+                console.log('that.flightPathArr',that.flightPathArr);
+                that.flightPath = new google.maps.Polyline({
+                  path: that.flightPathArr,
+                  geodesic: true,
+                  fillColor:'red',
+                  strokeColor: "#0000FF",
+                  strokeOpacity: 1.0,
+                  strokeWeight: 6
+                });
+      
+                map.setCenter(new google.maps.LatLng(that.flightPathArr[0].lat, that.flightPathArr[0].lng));
+                that.flightPath.setMap(map);
+              }
+            
+    
+            }
+    }
+  
+    shapeIdentifier: any;
+    mainMarker:any;
+  geofenceFunction(map, finalcord, cord,position) {
+    var that = this;
+    var myLatLng = {
+      lat :position.coords.latitude,
+      lng : position.coords.longitude
+    }
+  
+    
+   this.mainMarker = new google.maps.Marker({
+      position: myLatLng,
+      map: map,
+      title: JSON.stringify({Latitude : position.coords.latitude, Longitude : position.coords.longitude})
+    });
+
+    this.mainMarker.setMap(map);
+    var input = document.getElementById('pac-input');
+    var searchBox = new google.maps.places.SearchBox(input);
+    
+
+    map.addListener('bounds_changed', function () {
+      searchBox.setBounds(map.getBounds());
+    });
+
+    var markers = [];
+
+    searchBox.addListener('places_changed', function () {
+      var places = searchBox.getPlaces();
+      if (places.length == 0) {
+        return;
+      }
+
+     that.address = places.formatted_address ; 
+      var bounds = new google.maps.LatLngBounds();
+      places.forEach(function (place) {
+        if (!place.geometry) {
+          return;
+        }
+
+
+        that.mainMarker.setMap(null);
+        var latLngM = {
+          lat : place.geometry?place.geometry.location.lat():null,
+          lng : place.geometry?place.geometry.location.lng():null, 
+        } 
+
+         
+        that.mainMarker = new google.maps.Marker({
+          position: latLngM,
+          map: map,
+          title: JSON.stringify({Latitude : latLngM.lat, Longitude : latLngM.lng})
+        });
+  
+        that.mainMarker.setMap(map);
+
+        
+        var icon = {
+          url: place.icon,
+          size: new google.maps.Size(71, 71),
+          origin: new google.maps.Point(0, 0),
+          anchor: new google.maps.Point(17, 34),
+          scaledSize: new google.maps.Size(25, 25)
+        };
+
+
+
+        if (place.geometry.viewport) {
+          // Only geocodes have viewport.
+          bounds.union(place.geometry.viewport);
+        } else {
+          bounds.extend(place.geometry.location);
+        }
+      });
+      map.fitBounds(bounds);
+    });
+
+
+    var all_overlays = [];
+    var selectedShape;
+    if(this.btnTag === 'Update'){
+      var drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: google.maps.drawing.OverlayType.MARKER,
+        drawingControl: true,
+        drawingControlOptions: {
+          position: google.maps.ControlPosition.TOP_CENTER,
+          drawingModes: [
+            
+            google.maps.drawing.OverlayType.POLYGON
+          ]
+        },
+        markerOptions: {
+          icon: 'images/beachflag.png'
+        },
+  
+        polygonOptions: {
+          clickable: true,
+          draggable: true,
+          editable: true,
+          fillColor: '#ffff00',
+          fillOpacity: 1,
+  
+        },
+        rectangleOptions: {
+          clickable: true,
+          draggable: true,
+          editable: true,
+          fillColor: '#ffff00',
+          fillOpacity: 0.5,
+        }
+      });
+    }else{
+      var drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: google.maps.drawing.OverlayType.MARKER,
+        drawingControl: true,
+        drawingControlOptions: {
+          position: google.maps.ControlPosition.TOP_CENTER,
+          drawingModes: [
+            google.maps.drawing.OverlayType.CIRCLE,
+            google.maps.drawing.OverlayType.POLYGON
+          ]
+        },
+        markerOptions: {
+          icon: 'images/beachflag.png'
+        },
+        circleOptions: {
+          fillColor: '#ffff00',
+          fillOpacity: 0.2,
+          strokeWeight: 3,
+          clickable: false,
+          editable: true,
+          zIndex: 1
+        },
+        polygonOptions: {
+          clickable: true,
+          draggable: true,
+          editable: true,
+          fillColor: '#ffff00',
+          fillOpacity: 1,
+  
+        },
+        rectangleOptions: {
+          clickable: true,
+          draggable: true,
+          editable: true,
+          fillColor: '#ffff00',
+          fillOpacity: 0.5,
+        }
+      });
+    }
+    var drawingManager = new google.maps.drawing.DrawingManager({
+      drawingMode: google.maps.drawing.OverlayType.MARKER,
+      drawingControl: true,
+      drawingControlOptions: {
+        position: google.maps.ControlPosition.TOP_CENTER,
+        drawingModes: [
+          google.maps.drawing.OverlayType.CIRCLE,
+          google.maps.drawing.OverlayType.POLYGON
+        ]
+      },
+      markerOptions: {
+        icon: 'images/beachflag.png'
+      },
+      circleOptions: {
+        fillColor: '#ffff00',
+        fillOpacity: 0.2,
+        strokeWeight: 3,
+        clickable: false,
+        editable: true,
+        zIndex: 1
+      },
+      polygonOptions: {
+        clickable: true,
+        draggable: true,
+        editable: true,
+        fillColor: '#ffff00',
+        fillOpacity: 1,
+
+      },
+      rectangleOptions: {
+        clickable: true,
+        draggable: true,
+        editable: true,
+        fillColor: '#ffff00',
+        fillOpacity: 0.5,
+      }
+    });
+
+    function clearSelection() {
+      if (selectedShape) {
+        selectedShape.setEditable(false);
+        selectedShape = null;
+      }
+    }
+
+    function setSelection(shape) {
+      console.log('abc');
+      clearSelection();
+      selectedShape = shape;
+      shape.setEditable(true);
+      if(that.shapeIdentifier === 'polygon'){
+    
+        google.maps.event.addListener(selectedShape.getPath(), 'set_at', getPolygonCoords(shape));
+      } 
+    }
+
+    function deleteSelectedShape() {
+      if(that.flightPathArr.length != 0){
+        that.flightPathArr=[];
+        that.flightPath.setMap(null);
+
+      }
+      console.log('deleteButtonClicked')
+
+      if (selectedShape) {
+        selectedShape.setMap(null);
+      }
+      finalcord = [];
+      cord = [];
+    }
+
+    function deleteAllShape() {
+      for (var i = 0; i < all_overlays.length; i++) {
+        all_overlays[i].overlay.setMap(null);
+        }
+      all_overlays = [];
+      finalcord = [];
+      cord = [];
+    }
+    var that = this;
+    function CenterControl(controlDiv, map) {
+
+      // Set CSS for the control border.
+      console.log('controlUI',controlUI);
+      map.controls[google.maps.ControlPosition.BOTTOM_CENTER].clear();
+    
+        var controlUI = document.createElement('div');
+        controlUI.style.backgroundColor = '#fff';
+        controlUI.style.border = '2px solid #fff';
+        controlUI.style.borderRadius = '3px';
+        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+        controlUI.style.cursor = 'pointer';
+        controlUI.style.marginBottom = '22px';
+        controlUI.style.textAlign = 'center';
+        controlUI.title = 'Select to delete the shape';
+        controlDiv.appendChild(controlUI);
+  
+        // Set CSS for the control interior.
+        var controlText = document.createElement('div');
+        controlText.style.color = 'rgb(25,25,25)';
+        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+        controlText.style.fontSize = '16px';
+        controlText.style.lineHeight = '38px';
+        controlText.style.paddingLeft = '5px';
+        controlText.style.paddingRight = '5px';
+        controlText.innerHTML = 'Delete Selected Area';
+        controlUI.appendChild(controlText);
+        // Setup the click event listeners: simply set the map to Chicago.
+        controlUI.addEventListener('click', function () {
+          deleteSelectedShape();
+          localStorage.removeItem("cordinates");
+        });
+      
+
+     
+     
+
+    }
+    drawingManager.setMap(map);
+    var getPolygonCoords = function (newShape) {
+      //  console.log("We are one");
+      console.log('abc');
+      console.log('newShape', newShape);
+      var len = newShape.getPath().getLength();
+
+      for (var i = 0; i < len; i++) {
+      
+        let b = newShape.getPath().getAt(i).toUrlValue(6)
+        //console.log(b)
+        let a = [
+        ]
+        a.push(parseFloat(b.split(",")[1]))
+        a.push(parseFloat(b.split(",")[0]))
+        cord.push(a);
+
+      }
+      let p = cord[0];
+      cord.push(p);
+      finalcord.push(cord)   
+      let val = JSON.stringify(finalcord);  
+      localStorage.setItem("cordinates", val);
+    };
+
+    google.maps.event.addListener(drawingManager, 'polygoncomplete', function (event) {
+      if(that.flightPathArr.length!=0){
+        that.flightPathArr=[];
+        that.flightPath.setMap(null);
+
+      }
+      event.getPath().getLength();
+      google.maps.event.addListener(event.getPath(), 'insert_at', function () {
+        var len = event.getPath().getLength();
+        for (var i = 0; i < len; i++) {
+        
+        }
+      });
+      google.maps.event.addListener(event.getPath(), 'set_at', function () {
+        console.log('abc');
+        var len = event.getPath().getLength();
+        for (var i = 0; i < len; i++) {
+          //  console.log(event.getPath().getAt(i).toUrlValue(5));
+        }
+      });
+    });
+
+
+    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {  
+      console.log('abc');
+      // console.log('circleComplete');
+      console.log(event);
+      event.overlay.fillColor = that.geofenceColor ; 
+     
+      
+      all_overlays.push(event);
+      if (event.type !== google.maps.drawing.OverlayType.MARKER) {
+        console.log(event.overlay);
+        drawingManager.setDrawingMode(null);
+        //Write code to select the newly selected object.
+        var newShape = event.overlay;
+        newShape.type = event.type;
+        that.shapeIdentifier = event.type; 
+        console.log(that.shapeIdentifier);  
+        google.maps.event.addListener(newShape, 'click', function () {
+          console.log(newShape);
+          setSelection(newShape);
+        });   
+          setSelection(newShape);    
+      }   
+    });
+
+
+    // =================================circle listner =======================================
+    google.maps.event.addListener(drawingManager, 'circlecomplete', function (event) {
+    
+      console.log('abc');
+      var newShape_circle = event;
+      console.log(newShape_circle);
+
+      var circle;
+      if (event == null || (!(event instanceof google.maps.Circle))) return;
+      if (circle != null) {
+        circle.setMap(null);
+        circle = null;
+      }
+      circle = event;
+      console.log('radius', circle.getRadius());
+      console.log('lat', circle.getCenter().lat());
+      console.log('lng', circle.getCenter().lng());
+      that.shapeRadius = circle.getRadius() ; 
+      that.shapeLocation = {
+        lat : circle.getCenter().lat(),
+        lng : circle.getCenter().lng()
+      }
+
+      console.log('that.shapeLocation=>',that.shapeLocation);
+     
+    });
+
+    var centerControlDiv = document.createElement('div');
+    var centerControl = new CenterControl(centerControlDiv, map);
+    map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
+
+  }
+
+
+
+  useridd:any;
+
+  foods=[]
+  custtype:any;
+  cust:boolean=false;
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+superAdmin:Boolean = false;
+    ngOnInit() {
+       var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  setTimeout(() => {
+    // $('#dbselectIMEI').multipleSelect({
+        //   width: 250,
+        //   placeholder: "Vehicle IMEI",
+        //   filter: true,
+        //   single: true,
+        //   selectAll: false  
+        // }) 
+  
+        $('#dbselectVehicleName').multipleSelect({
+          width: 250,
+          placeholder: "Vehicle Name",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+        
+        // $("#dbselectVehicleName").multipleSelect("disable");
+        
+      },100)
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      this.getdev();
+      if(this.custtype == true){
+        this.cust = true;
+      }
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+    
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];
+    
+      this.enter=false;
+      this.exit=false
+
+     
+
+        let geofence_id =window.location.search;
+        var that= this;
+        if(geofence_id != ''){
+          let gid = JSON.stringify(geofence_id).split("=")[1].split('"')[0];
+          this.geofence_id = gid;
+          this.btnTag = 'Update';
+          this.contactService.getperGeoFence(gid).subscribe(geoObj=>{
+            console.log(geoObj);
+          
+              this.geoname = geoObj[0].geoname;
+              this.halt_alert= geoObj[0].halt_notif?geoObj[0].halt_notif:false;
+              this.haltAlert = geoObj[0].halt_time?geoObj[0].halt_time:false;
+              this.enter = geoObj[0].entering;
+              this.exit=geoObj[0].exiting;
+              this.shapeIdentifier = 'polygon';
+              
+              // outerThis.flightPathArr.push({ lat: msg.latDecimal, lng: msg.longDecimal }); 
+              var latLngArr = geoObj[0].geofence.coordinates?geoObj[0].geofence.coordinates[0]:[];
+              console.log('latLngArr',latLngArr);
+              for(var i=0;i<latLngArr.length;i++){
+                this.flightPathArr.push({ lat:latLngArr[i][1], lng: latLngArr[i][0] });
+              }     
+              // var drawPath = setTimeout(()=>{
+              //   that.drawFlightPath();
+              //   clearTimeout(drawPath);
+              // },5000)
+              this.showgeo();
+          })
+        }else{
+          this.showgeo();
+        }
+   
+     
+
+        this.loadropdown();
+        this.getGrp();
+        this.getUserDevices();
+        this.getDevices()
+       
+    }
+    getDevices(){
+       this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+        
+        data => {
+          this.devicess = data 
+         /*  this.final = this.devicess.devices[0]; */
+         this.final = (this.devicess.devices);
+        
+         for(let i=0;i<this.devicess.devices.length;i++){
+         
+           if(this.devicess.devices[i].type_of_device =="Tracker"){
+             let a ={
+              value : this.devicess.devices[i].Device_Name,
+              viewValue:this.devicess.devices[i].Device_Name,
+              did:this.devicess.devices[i].Device_ID,
+              id:this.devicess.devices[i]._id,
+              user:this.devicess.devices[i].user,
+              email:this.devicess.devices[i].Email_ID,
+             }
+             this.foods.push(a);
+           }
+        
+         }
+    
+        });
+    }
+    // summaryReport(){
+   
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/summary-report");
+    // }
+    
+    // geofancingReport(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/geofancing");
+    // }
+    
+    // distance_report(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/distance_report");
+    // }
+    
+    // alert_report(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/alert_report");
+    // }
+    
+    // trip_report(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/trip_report");
+    
+    // }
+    
+    // overspeed(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/overspeed");
+    
+    // }
+    // stoppage_report(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/stoppage_report");
+    
+    // }
+    
+    // group(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("group_view");
+    // }
+    
+    // ignition_report(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/ignition_report");
+    
+    
+    // }
+    
+    // routeViolation(){
+    //   this.cond = false
+    //   this.router.navigateByUrl("device-report/routeViolation");
+    
+    // }
+
+    // route_map(){
+    //   this.router.navigateByUrl("routeMapping");
+  
+    // }
+
+  
+    getGrp(){
+      this.contactService.getGroup(this.useridd).subscribe(      
+        res => {
+          // console.log(res);     
+          this.grpName = res["group_details"];
+          console.log(this.grpName);
+          this.loadropdown();
+        })
+    }
+
+    // Ddetail(){
+    //   this.router.navigateByUrl("driverdetail");
+    // }
+    // DModel(){
+    //   this.router.navigateByUrl("deviceModel");
+    // }
+    // VType(){
+    //   this.router.navigateByUrl("VehicleType");
+    // }
+
+    loadropdown() {
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+        setTimeout(() => {
+          $('#dbselect').multipleSelect({
+            width: 230,
+            placeholder: 'Select Group',
+            filter: true,
+            single: true,
+            selectAll: false
+     
+          })
+        }, 100);
+        setTimeout(() => {
+          $('#dbselect_1').multipleSelect({
+            width: 230,
+            placeholder: 'Select Geofence type.....',
+            filter: true,
+            single: true,
+            selectAll: false
+     
+          })
+         // $('#select').show();
+      
+        }, 100);
+    }
+
+
+    getAddress(lat,lng){
+     var outerThis = this;
+      let latLng = {
+        lat: "0",
+        long: "0"
+      };
+        latLng = {
+          lat: lat ? lat : 0,
+          long: lng ? lng : 0
+        }
+        this.contactService.getAddressByApi(latLng).subscribe(res=>{   
+  
+          if(res.message == "Address not found in databse"){
+            let geocoder = new google.maps.Geocoder();
+            let t_latlng = new google.maps.LatLng(lat, lng);
+      
+            let request = {
+              latLng: t_latlng
+            };
+            geocoder.geocode(request, function (data, status) {
+              if (status == google.maps.GeocoderStatus.OK) {
+                if (data[0] != null) {
+                  // outerThis.address_show = data[0].formatted_address;
+                  document.getElementById('pac-input').setAttribute("value", data[0].formatted_address);  
+                  outerThis.address = data[0].formatted_address ; 
+                } else {
+                  // console.log("No address available")            
+                  document.getElementById('pac-input').setAttribute("value", 'NA');  
+                  outerThis.address = 'NA';
+                }
+              }
+              else {
+                document.getElementById('pac-input').setAttribute("value", 'NA'); 
+                outerThis.address = 'NA'; 
+
+              }
+            })
+          }else{
+            document.getElementById('pac-input').setAttribute("value", res.address);  
+            outerThis.address = res.address;
+          }
+        })
+
+    }
+    flightPathArr=[];
+    // drawFlightPath(){
+    //   console.log('inside flightpathDraw',this.flightPathArr);
+    //   var flightPath = new google.maps.Polyline({
+    //     path: this.flightPathArr,
+    //     geodesic: true,
+    //     strokeColor: "#0000FF",
+    //     strokeOpacity: 1.0,
+    //     strokeWeight: 6
+    //   });
+    //   // //console.log(mapData);
+    //   flightPath.setMap(this.gMap);
+    // }
+
+ getUserDevices(){
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      data => {
+        this.devicesss = data.devices;
+        console.log("deviceObj=>",this.devicesss);
+        for(var i = 0; i<data.devices.length ; i++){       
+            var dev = {
+              isTrue:false,
+              id:data.devices[i]._id,
+              deviceName: data.devices[i].Device_Name
+            }  
+
+          this.uncheckedArr.push(dev);  
+          this.poiDevices.push(dev);          
+        }   
+
+          var newArr = [];
+          for(var t = 0 ;t<this.untrackedDev.length;t++){
+            for(var n=0;n<this.uncheckedArr.length;n++){
+              if(this.untrackedDev[t]==this.uncheckedArr[n].id){
+               
+                // this.poiDevices[n].isTrue = true;  
+                // console.log("newArr=>",this.poiDevices);  
+                this.uncheckedArr.splice(n,1);
+             
+              }
+            }
+             }
+              var tarr =[];
+             for(var l = 0;l<this.uncheckedArr.length;l++){     
+               tarr.push(this.uncheckedArr[l].id);
+               this.tempArray = tarr;            
+             }
+            console.log("whats here =>",this.tempArray );
+           console.log("bigger deviceArr =>",this.poiDevices);
+        
+     
+        this.selectedDevices = this.tempArray;
+        
+      },err=>{
+      
+        console.log(err);
+      });
+  }
+
+   change(obj: any,ind:any){ 
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  }
+  
+
diff --git a/src/app/geofencing-view/geofencing-view.component.html b/src/app/geofencing-view/geofencing-view.component.html
new file mode 100644
index 0000000..6797f3f
--- /dev/null
+++ b/src/app/geofencing-view/geofencing-view.component.html
@@ -0,0 +1,14 @@
+<app-all-menus></app-all-menus>
+<div class="container">
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <button mdTooltip="close" (click)="Back()"style="cursor: pointer; float: right; border:1px solid transparent; background-color: transparent;padding-top:2%"><md-icon style="float: right;width:30px;height:30px;">close </md-icon></button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div id="map" style="height: 75vh;"></div>
+    </div>
+  </div>
+</div>
+ 
\ No newline at end of file
diff --git a/src/app/geofencing-view/geofencing-view.component.scss b/src/app/geofencing-view/geofencing-view.component.scss
new file mode 100644
index 0000000..3e3a963
--- /dev/null
+++ b/src/app/geofencing-view/geofencing-view.component.scss
@@ -0,0 +1,4 @@
+.container{
+  padding-top: 5%;
+  max-width: 100%;
+}
diff --git a/src/app/geofencing-view/geofencing-view.component.spec.ts b/src/app/geofencing-view/geofencing-view.component.spec.ts
new file mode 100644
index 0000000..6a5502a
--- /dev/null
+++ b/src/app/geofencing-view/geofencing-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofencingViewComponent } from './geofencing-view.component';
+
+describe('GeofencingViewComponent', () => {
+  let component: GeofencingViewComponent;
+  let fixture: ComponentFixture<GeofencingViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofencingViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofencingViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/geofencing-view/geofencing-view.component.ts b/src/app/geofencing-view/geofencing-view.component.ts
new file mode 100644
index 0000000..3f27a07
--- /dev/null
+++ b/src/app/geofencing-view/geofencing-view.component.ts
@@ -0,0 +1,242 @@
+import { Component, OnInit } from '@angular/core';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import {ContactService} from '../contact.service';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+declare var google: any;
+@Component({
+  selector: 'app-geofencing-view',
+  templateUrl: './geofencing-view.component.html',
+  styleUrls: ['./geofencing-view.component.scss'],
+  providers: [ContactService]
+})
+
+export class GeofencingViewComponent implements OnInit {
+  fs :any;
+  ls:any;
+  emailid:any;
+  or:any;
+  onn_time:any;
+  min:any;
+  before:any;
+  corect_min:any;
+  hr:any
+  custtype:any;
+  cust:boolean=false;
+  run(){
+  
+  }
+  mydealer(){
+    window.localStorage['token'] =  window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if(window.localStorage['DataLoaded'] = 'True'){
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+     // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+
+  devicess:any;
+  final:any;
+  getdev(){
+    let foods = []
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+        
+      data => {
+        this.devicess = data 
+  
+        let swap;
+        for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+          for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+            if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+                swap = this.devicess.devices[c];
+                this.devicess.devices[c] = this.devicess.devices[c+1];
+                this.devicess.devices[c+1] = swap;
+            }
+          }
+        }
+        
+        this.final = this.devicess.devices
+       for(let i=0;i<this.devicess.devices.length;i++){
+           let a ={
+            value : this.devicess.devices[i].Device_Name,
+            viewValue:this.devicess.devices[i].Device_Name
+           }
+           foods.push(a);
+         }
+      });
+  }
+
+
+ 
+    constructor(private router: Router,private contactService:ContactService,public dialog: MdDialog) { }
+
+  
+  
+    soon(){
+      this.router.navigateByUrl("const?_i="+window.localStorage.token);
+      
+    }
+  
+    cond:Boolean = false;
+    point : any = 0;
+     a(){
+      // console.log(this.point);
+       if(this.point == 0){
+        this.cond = true;
+        this.point ++;
+       }
+     else if(this.point % 2 == 0){
+      this.cond = true;
+      this.point ++;
+     }
+     else{
+       this.cond = false
+       this.point ++;
+     }
+    
+      
+    }
+    
+    Back(){
+      this.router.navigateByUrl("geofencing");
+    }
+
+    draw(zzz,yyy){
+      var map;
+      var infoWindow;
+     // console.log(typeof zzz)
+      var GeoFencCoords = zzz
+      var GeoName = yyy
+     //  console.log(zzz[0].lat)
+      initMap(GeoFencCoords);
+      function initMap(GeoFencCoords) {
+        map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 17,
+          center: {lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng},
+          mapTypeId: 'terrain'
+        });
+
+        
+        var bermudaTriangle = new google.maps.Polygon({
+          paths: GeoFencCoords,
+          strokeColor: '#FF0000',
+          strokeOpacity: 0.8,
+          strokeWeight: 3,
+          fillColor: '#FF0000',
+          fillOpacity: 0.35
+        });
+        bermudaTriangle.setMap(map);
+
+        // Add a listener for the click event.
+        bermudaTriangle.addListener('click', showArrays);
+
+        infoWindow = new google.maps.InfoWindow;
+      }
+
+      /** @this {google.maps.Polygon} */
+      function showArrays(event) {
+        // Since this polygon has only one path, we can call getPath() to return the
+        // MVCArray of LatLngs.
+        var vertices = this.getPath();
+
+        var contentString = '<b>Geo Fence</b><br>' +
+            'Name: ' + GeoName;
+
+        // Iterate over the vertices.
+     /*    for (var i =0; i < vertices.getLength(); i++) {
+          var xy = vertices.getAt(i);
+          contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
+              xy.lng();
+        }
+ */
+        // Replace the info window's content and position.
+        infoWindow.setContent(contentString);
+        infoWindow.setPosition(event.latLng);
+
+        infoWindow.open(map);
+      }
+    }
+
+
+    useridd:any;
+ 
+    cordin = [];
+    ideal(){
+      this.router.navigateByUrl("device-report/ideal-report");
+    }
+    mb:any;
+    logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+superAdmin:Boolean = false;
+    ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+      let datacoming =window.location.search;
+      console.log('datacomingdatacomingdatacomingdatacomingdatacoming=>',datacoming);
+      let tblid = JSON.stringify(datacoming).split("=")[1].split('"')[0];
+    
+      this.contactService.getperGeoFence(tblid).subscribe(      
+        data => {
+          this.devicess = data 
+          // console.log(this.devicess);
+          let a = this.devicess[0].geofence.coordinates[0];
+          for(let k=0;k<a.length;k++){
+          let b ={
+          lat : a[k][1],
+          lng : a[k][0]
+          }
+          this.cordin.push(b);
+          }  
+          this.draw(this.cordin, this.devicess[0].geoname);
+        });
+ 
+      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      this.getdev();
+      if(this.custtype == true){
+        this.cust = true;
+      }
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+
+    } 
+  }
+  
+  
diff --git a/src/app/geofencing-view2/geofencing-view2.component.html b/src/app/geofencing-view2/geofencing-view2.component.html
new file mode 100644
index 0000000..7bbfb71
--- /dev/null
+++ b/src/app/geofencing-view2/geofencing-view2.component.html
@@ -0,0 +1,109 @@
+<html>
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+      
+  
+        
+      </head>
+    <body>
+  
+        <div class="upper">
+            <md-toolbar>My App</md-toolbar>
+          <md-toolbar flex style="background-color:white;width: 100%;" >
+            
+                  <img src="../../assets/image/a.jpg" 
+                  style=
+                  "width:12%;padding-top: 8px;">
+                  
+                <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                             </ul>
+                  
+                             <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
+                       
+                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                    <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                    <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                              
+                                    &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                       <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                  </md-menu>
+                                  
+                                  <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                           
+                                     <img src="../../assets/image/us.jpg" height=30px>
+                                  </button>
+                           </ul>
+                                 
+                          
+                       
+                               <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                       
+                                   <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                     <h5>&nbsp;&nbsp;{{fs}} {{ls}}</h5>
+                                     <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                  
+                                     &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                        <button class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                   </md-menu>
+                                   
+                                   <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                  
+                                      <img src="../../assets/image/us.jpg" height=30px>
+                                   </button>
+                               
+                             </ul>
+                                   
+                
+               </md-toolbar>
+          </div>
+  
+  
+  
+   <div class="small">
+    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+  <md-menu #menu="mdMenu">
+  
+        <a href="#">
+          <h6>DASHBOARD
+          <md-icon style="float:right">dashboard</md-icon>
+        </h6>
+      </a>
+        
+    
+           <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+           
+     
+    </md-menu> 
+  </div> -
+  <div class="first">
+  <div style="float:left; width: 19%; height:86vh;overflow-y: hidden;
+  overflow-x: hidden;">
+  <div class="icon-bar">
+   
+      <a class="pointer" (click)="soon()">DASHBOARD  <md-icon style="float:right">dashboard</md-icon></a>
+      
+      
+         <a class="pointer" (click)="soon()">RULES<md-icon style="float:right">dock</md-icon></a> 
+         
+         
+          <a class="pointer" (click)="devi()" >DEVICES <md-icon style="float:right">devices</md-icon></a>
+  <!--         <a class="pointer" (click)="openNav()" >GPS TRACKER<md-icon style="float:right">my_location</md-icon></a>
+   -->    
+   <a class="pointer" (click)="openNav()" >GPS TRACKER<md-icon style="float:right">my_location</md-icon></a>
+   <a class="pointer" (click)="geo()" >GEO FENCING<md-icon style="float:right">blur_circular</md-icon></a>
+  
+  </div>
+        </div>
+      </div>  
+    <div style="float:right; width: 81%; height:86vh;">
+      
+      <button mdTooltip="Back" (click)="Back()"style="    cursor: pointer;
+      float: right; border:1px solid transparent; background-color: transparent;"><md-icon style="float: right;width:30px;height:30px;">keyboard_arrow_right
+      </md-icon></button>
+      <div id="map" style="padding: 0px;width: 100%;display: flex;height: 75vh;"></div>
+  
+  
+       
+  </div>
+      
+    </body>
\ No newline at end of file
diff --git a/src/app/geofencing-view2/geofencing-view2.component.scss b/src/app/geofencing-view2/geofencing-view2.component.scss
new file mode 100644
index 0000000..e0995df
--- /dev/null
+++ b/src/app/geofencing-view2/geofencing-view2.component.scss
@@ -0,0 +1,821 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+
+
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    
\ No newline at end of file
diff --git a/src/app/geofencing-view2/geofencing-view2.component.spec.ts b/src/app/geofencing-view2/geofencing-view2.component.spec.ts
new file mode 100644
index 0000000..6cfd7dd
--- /dev/null
+++ b/src/app/geofencing-view2/geofencing-view2.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofencingView2Component } from './geofencing-view2.component';
+
+describe('GeofencingView2Component', () => {
+  let component: GeofencingView2Component;
+  let fixture: ComponentFixture<GeofencingView2Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofencingView2Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofencingView2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/geofencing-view2/geofencing-view2.component.ts b/src/app/geofencing-view2/geofencing-view2.component.ts
new file mode 100644
index 0000000..eea1f6b
--- /dev/null
+++ b/src/app/geofencing-view2/geofencing-view2.component.ts
@@ -0,0 +1,155 @@
+import { Component, OnInit } from '@angular/core';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import {ContactService} from '../contact.service';
+declare var google: any;
+
+@Component({
+  selector: 'app-geofencing-view2',
+  templateUrl: './geofencing-view2.component.html',
+  styleUrls: ['./geofencing-view2.component.scss'],
+  providers: [ContactService]
+})
+export class GeofencingView2Component implements OnInit {
+  fs :any;
+  ls:any;
+  emailid:any;
+  or:any;
+  onn_time:any;
+  min:any;
+  corect_min:any;
+  hr:any
+  run(){
+  
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  }
+    constructor(private router: Router,private contactService:ContactService) {
+   
+     }
+    logout(){
+      this.router.navigateByUrl("login");
+    }
+    devi(){
+      this.router.navigateByUrl("dashboard?_i="+window.localStorage.token);
+  
+    }
+    soon(){
+      this.router.navigateByUrl("const");
+      
+    }
+    addgeo(){
+      this.router.navigateByUrl("geofence-add");
+    }
+    geo(){
+      this.router.navigateByUrl("geofencing");
+      
+    }
+    Back(){
+      this.router.navigateByUrl("geofencing");
+    }
+
+    draw(zzz,yyy){
+      var map;
+      var infoWindow;
+      var GeoFencCoords = null
+       GeoFencCoords = zzz.slice(0)
+      var GeoName = yyy
+
+      var q;
+      //  console.log(GeoFencCoords)
+      initMap(GeoFencCoords);
+      function initMap(GeoFencCoords) {
+        map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 17,
+          center: {lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng},
+          mapTypeId: 'terrain'
+        });
+  
+
+        // console.log("Inside Polygon");
+          
+        var bermudaTriangle = new google.maps.Polygon({
+         
+          paths: GeoFencCoords,
+          strokeColor: '#FF0000',
+          strokeOpacity: 0.8,
+          strokeWeight: 3,
+          fillColor: '#FF0000',
+          fillOpacity: 0.35
+        });
+        bermudaTriangle.setMap(map);
+
+        // Add a listener for the click event.
+        bermudaTriangle.addListener('click', showArrays);
+        infoWindow = new google.maps.InfoWindow;
+        
+      }
+
+      /** @this {google.maps.Polygon} */
+      function showArrays(event) {
+      
+        var vertices = this.getPath();
+
+        var contentString = '<b>Geo Fence</b><br>' +
+            'Name: ' + GeoName;
+
+        infoWindow.setContent(contentString);
+        infoWindow.setPosition(event.latLng);
+
+        infoWindow.open(map);
+      }
+    }
+
+
+    useridd:any;
+    devicess:any;
+    final:any;
+    custtype:any;
+    cust:boolean=false;
+
+    ngOnInit() {
+ 
+      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+ 
+      if(this.custtype == true){
+        this.cust = true;
+      }
+      this.contactService.getGeoFence(this.useridd).subscribe(
+        
+        data => {
+          this.devicess = data 
+     
+          for(let i=0;i< this.devicess.length;i++){
+           let  cordin = [];
+           
+            let a = this.devicess[i].geofence.coordinates;
+           
+            for(let k=0;k<a.length;k++){
+            let b ={
+            lat : a[k][0],
+            lng : a[k][1]
+            }
+            cordin.push(b);
+            }  
+            // console.log(cordin);
+            this.draw(cordin, this.devicess[i].geoname);
+            
+          }
+  
+        });
+    } 
+  
+  }
+  
+  
diff --git a/src/app/geofencing/geofencing.component.html b/src/app/geofencing/geofencing.component.html
new file mode 100644
index 0000000..47cc973
--- /dev/null
+++ b/src/app/geofencing/geofencing.component.html
@@ -0,0 +1,212 @@
+
+<app-all-menus></app-all-menus>
+    <div style="float:left; width: 100%;padding-top: 6%;overflow:auto">
+        <p class="headStyle">{{'GEOFENCES' | translate}} 
+            <button mdTooltip="Add Geofence"
+                style="margin-left: -45px;float: right;border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
+                (click)="addgeo()">
+                <md-icon style="width:30px;height:30px;cursor:pointer">add</md-icon>
+            </button>
+        </p>
+        
+
+        
+        <!-- <input type="search" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="table1ch()" placeholder="{{'Geofence Search' | translate}}" /> -->
+        <md-tab-group (selectedIndexChange)="selectedIndexChange($event)" [selectedIndex]="selectedIndex" >
+            <md-tab >
+                <ng-template md-tab-label style="background:#ff6f06; color:white;"> <md-icon style="color:#2a00cc;" class="example-tab-icon">layers</md-icon> {{'Polygon' | translate}} </ng-template>
+                <!-- <div class="mat-tab-body-content" style="overflow-y: scroll;height: max-content;max-height: max-content;">
+                    <table id="myTable" class="table table-striped table-hover " style="overflow-y: auto; overflow-x: auto;font-size:12px">
+                        <thead style="background-color:#A2C523;color: white;">
+                            <tr>
+                               
+                                <th>{{'Geofence type' | translate}}</th>
+                                <th>{{'Geo Fencing Name' | translate}}</th>
+                                <th>{{'Enter Alert' | translate}}</th>
+                                <th>{{'Exit Alert' | translate}}</th>
+                                <th>{{'Status' | translate}}</th>
+                                <th>{{'Vehicles' | translate}}</th>
+                                <th>{{'Edit' | translate}}</th>
+                                <th>{{'Delete' | translate}}</th>
+                                <th>{{'Tracked Vehicles' | translate}}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            
+                            <tr *ngFor="let device of devicesss">
+                              
+                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.type?device.type:"Not present"}}</td>
+                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.geoname }}</td>
+                                <td> <md-slide-toggle [(ngModel)]="device.entering" ngDefaultControl (change)="onChange(device._id,device.status,$event.checked,device.exiting)"></md-slide-toggle> </td>
+                                <td> <md-slide-toggle [(ngModel)]="device.exiting" ngDefaultControl (change)="onChange(device._id,device.status,device.entering,$event.checked)"></md-slide-toggle> </td>
+                                <td> <md-slide-toggle [(ngModel)]="device.status" ngDefaultControl (change)="onChange(device._id,$event.checked,device.entering,device.exiting)"></md-slide-toggle> </td>
+                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.devicesWithin.length}}</td>
+                                <td>
+                                    <i class="fas fa-pen" style="cursor: pointer;color:#056f52" (click)="updateGeofence(device)"></i>
+                                </td>
+                                <td>
+                                    <p>
+                                        <button md-tooltip="Remove GeoFence" style="border:1px solid transparent; background-color: transparent;cursor:pointer" (click)="delete(device._id)">
+                                            <md-icon>delete</md-icon>
+                                        </button>
+                                    </p>
+                                </td>
+                                <td>
+                                    <p>
+                                        <button md-tooltip="Change Untrack Vehicles"
+                                            style="border:1px solid transparent; background-color: transparent;cursor:pointer"
+                                            (click)="untrack(device)">
+                                            <i class="fa fa-edit"></i>
+                                        </button>
+                                    </p>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div> -->
+
+                <div class="mat-tab-body-content" style="padding: 10px;overflow-y: scroll;height: max-content;max-height: max-content;">
+                    <div style="width: 100%;height:84vh;">
+                        <table id="geofence" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                            <thead style="background-color:#e0e0e0;color: #444444;">
+                                <tr>
+                                    <th style="text-align:left;width:100px">{{'Geofence type'|translate}} </th>
+                                    <th style="text-align:left;width:100px">{{'Geo Fencing Name'|translate}} </th>
+                                    <th style="text-align:left;width:100px">{{'Enter Alert'|translate}} </th>
+                                    <th style="text-align:left;width:100px">{{'Exit Alert'|translate}} </th>
+                                    <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'Vehicles Inside Geofence' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'Area(Acre)' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'Edit' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'Delete' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'Tracked Vehicles' | translate}}</th>
+                                    <th style="text-align:left;width:100px">{{'View' | translate}}</th>
+                    
+                                </tr>
+                            </thead>
+                        </table>
+                    
+                    
+                    </div>
+                </div>
+
+
+            </md-tab>
+            <md-tab style="height: 70vh;" >
+                <ng-template md-tab-label style="background: #e2e2e2;" >
+                    <div (click)="testTable1()">
+                        <md-icon style="color: #056f52;" class="example-tab-icon">radio_button_unchecked</md-icon>
+                        <span style="margin-left:4px;margin-left:4px;">{{'Circular' | translate}}</span>
+                    </div>
+                </ng-template>  
+                                <!-- <div class="row">
+                                    <div class="col-sm-12 col-md-12 col-lg-12"> 
+                                        <div class="tableObj" style="max-height: 66vh;">
+                                            <table id="myTable1" class="table table-striped table-hover" >
+                                                <thead style="background: #426E86; color: white;">
+                                                  <tr>
+                                                    <th>{{'POI name' | translate}}</th>
+                                                    <th>{{'Address' | translate}}</th>
+                                                    <th >{{"Radius" | translate}}</th>
+                                                    <th >{{'Lattitude' | translate}}</th>
+                                                    <th >{{'Longitude' | translate}}</th>
+                                                    <th >{{'Status' | translate}}</th>              
+                                                  </tr>
+                                                </thead>
+                                                <tbody  style="cursor: pointer;">
+                                                  <tr *ngFor="let circlularGeofence of circular_geofence">
+                                                    <td >{{circlularGeofence.poi.poiname?circlularGeofence.poi.poiname:'NA'}}</td>   
+                                                    <td >{{circlularGeofence.poi.address?circlularGeofence.poi.address:'NA'}}</td>
+                                                    <td >{{circlularGeofence.radius?circlularGeofence.radius:'NA'}}</td>
+                                                    <td >{{circlularGeofence.poi.location.coordinates?circlularGeofence.poi.location.coordinates[1]:"NA"}}</td>
+                                                    <td >{{circlularGeofence.poi.location.coordinates?circlularGeofence.poi.location.coordinates[0]:"NA"}}</td>
+                                                    <td >{{circlularGeofence.status?circlularGeofence.status:''}}</td>
+                                                  </tr>
+                                                </tbody>
+                                              </table>
+                                        </div>
+                                    </div>
+                                </div> -->
+                                <!-- <th>{{'POI name' | translate}}</th>
+                                <th>{{'Address' | translate}}</th>
+                                <th>{{"Radius" | translate}}</th>
+                                <th>{{'Lattitude' | translate}}</th>
+                                <th>{{'Longitude' | translate}}</th>
+                                <th>{{'Status' | translate}}</th> -->
+
+                                <!--  -->
+                                <div class="mat-tab-body-content" style="padding: 10px;overflow-y: scroll;height: max-content;max-height: max-content;">
+                                    <div style="width: 100%;height:84vh;">
+                                        <table id="geofence1" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                                            <thead style="background-color:#e0e0e0;color: #444444;">
+                                                <tr>
+                                                    <th style="text-align:left;width:100px">{{'POI name'|translate}} </th>
+                                                    <th style="text-align:left;width:100px">{{'Address'|translate}} </th>
+                                                    <th style="text-align:left;width:100px">{{'Radius'|translate}} </th>
+                                                    <th style="text-align:left;width:100px">{{'Lattitude'|translate}} </th>
+                                                    <th style="text-align:left;width:100px">{{'Longitude' | translate}}</th>
+                                                    <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
+                                                   
+                                
+                                                </tr>
+                                            </thead>
+                                        </table>
+                                
+                                
+                                    </div>
+                                </div>
+
+                                <!-- --------------------- -->
+                                <!-- <div *ngIf="geo.t">
+                                    <canvas baseChart width="200" height="200" [data]="geo.statusCount" [chartType]="doughnutChartType" [labels]="geo.statusList"
+                                        [options]="options" [colors]="doughnutChartColor">
+                                    
+                                    </canvas>
+                                    <div style="position: sticky;
+ margin-top: -60%;
+ cursor: pointer;
+ margin-bottom: 35%;
+ margin-left: 25%;
+ margin-right: 25%;">
+                                        <p style=" text-align: center;
+ font-weight: 500;
+ margin-bottom: 0px;
+ color: #6191d7;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 5px 0px -5px 0px;" md-tooltip="{{geo.name}}"> {{geo.name}}
+                                        </p>
+                                        <p style="text-align:center;font-size:15px;" md-tooltip="{{geo.totalCount}}">{{geo.totalCount}}</p>
+                                    </div>
+                                </div>
+
+                                <div *ngIf="!geo.t" style="width: 200px;
+ height: 200px;
+ border: 25px solid #e5e5e5;
+ border-radius: 50%;
+ text-align: center;
+ display: inline-block;">
+                                    <div style="position: sticky;
+ cursor: pointer;
+ margin-top:35%;
+ margin-bottom: 35%;
+ margin-left: 25%;
+ margin-right: 25%;">
+                                        <p style=" text-align: center;
+ font-weight: 500;
+ margin-bottom: 0px;
+ color: #6191d7;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin: 5px 0px -5px 0px;" md-tooltip="{{geo.name}}"> {{geo.name}}
+                                        </p>
+                                        <p style="text-align:center;font-size:15px;" md-tooltip="{{geo.totalCount}}">{{geo.totalCount}}</p>
+                                    </div>
+                                </div> -->
+                          
+            </md-tab>
+        </md-tab-group>
+    </div>
+
diff --git a/src/app/geofencing/geofencing.component.scss b/src/app/geofencing/geofencing.component.scss
new file mode 100644
index 0000000..c08bba9
--- /dev/null
+++ b/src/app/geofencing/geofencing.component.scss
@@ -0,0 +1,1070 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+#myInput {
+  border-radius: 15px;
+  /* border: 2px solid #18262F; */
+  padding: 7px;
+  width: 116px;
+  height: 17px;
+  font-size: 9px;
+  outline: none;
+  float: right;
+  margin-top: 2%;
+}
+
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+
+  color: #6b6a6a;
+  padding-top: 7px;
+  margin: 0px;
+}
+
+.addStyle {
+  // border-top: 1px solid #d6d6d6;
+  border-bottom: 1px solid #d6d6d6;
+  padding-top: 7px;
+  padding-bottom: 8px;
+}
+
+.cardStyle {
+  display: inline-block;
+  padding: 5px;
+}
+
+// ::-webkit-scrollbar {
+//     display: none;
+//     }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 6px;
+  left: 11px;
+  right: 7px;
+  bottom: 7px;
+  background-color: #ccc;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 11px;
+  width: 11px;
+  left: 2px;
+  bottom: 5px;
+  background-color: white;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+#d:hover {
+  color: rgb(14, 102, 18);
+}
+#active {
+  text-decoration-line: underline;
+  text-decoration-color: rgb(66, 26, 245);
+}
+#ac {
+  color: rgb(38, 38, 90);
+}
+ul,
+li {
+  list-style: none;
+  float: left;
+  line-height: 15vh;
+}
+.upper {
+  margin-top: -70px;
+  width: 100%;
+  height: 15%;
+  /* margin-left: -2px;*/
+  position: fixed;
+  background-color: white;
+  top: 0;
+  z-index: 1;
+}
+.up {
+  color: gray;
+  /* Add a font */
+
+  /* Set the font-size to 25 pixels */
+  font-size: 25px;
+}
+.middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-left: -220px;
+  margin-top: -20px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.desc {
+  padding: 15px;
+  text-align: center;
+}
+#insert {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+#insert2 {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+.vertical-menu {
+  width: 250px;
+  padding-left: 10px;
+}
+
+.vertical-menu a {
+  background-color: #eee;
+  color: black;
+  display: block;
+  padding: 12px;
+  text-decoration: none;
+}
+
+.vertical-menu a:hover {
+  background-color: #ccc;
+}
+
+.vertical-menu a.active {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+#c2 {
+}
+#c1 {
+  float: left;
+}
+
+body {
+  margin: 0;
+}
+
+.icon-bar {
+  width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262f;
+  margin-top: -9px;
+  height: 100%;
+  position: fixed;
+  display: inline-block;
+  margin-left: -16px;
+}
+@media screen and (max-width: 1000px) {
+  .off {
+    display: none;
+  }
+}
+.icon-bar2 {
+  width: 299px;
+  background-color: white;
+  margin-top: -7px;
+  height: 86vh;
+  position: fixed;
+}
+.icon-bar a {
+  display: block;
+  text-align: center;
+  padding: 16px;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+  text-align: left;
+}
+
+.icon-bar a:hover {
+  background-color: #000;
+}
+
+.active {
+  background-color: #4caf50 !important;
+}
+.iphone {
+  width: 201px;
+  height: 378px;
+  background: #f9f7f9;
+  border: 5px solid #c1bfc1;
+  border-radius: 45px;
+  opacity: 0.8;
+}
+.highlight {
+  width: 185px;
+  height: 366px;
+  border: 3px solid #fff;
+  border-radius: 45px;
+  position: relative;
+  z-index: 10;
+  top: -748px;
+  left: 10px;
+}
+.circle {
+  width: 7px;
+  height: 7px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -370px;
+  left: 92px;
+}
+.camera {
+  width: 10px;
+  height: 10px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -376px;
+  left: 66px;
+}
+.speaker {
+  width: 59px;
+  height: 3px;
+  background: #333;
+  border-radius: 5px;
+  position: relative;
+  top: -372px;
+  left: 73px;
+}
+.screen {
+  width: 166px;
+  height: 255px;
+  border: 3px solid #333;
+  border-radius: 5px;
+  position: relative;
+  left: 18px;
+  top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+  width: 47px;
+  height: 47px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  top: -353px;
+  left: 79px;
+  z-index: 2;
+}
+.home2 {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: relative;
+  top: -403px;
+  left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+#c2 {
+  //background:green;
+  float: right;
+}
+#c1,
+#c2 {
+  width: 33%;
+  //background: rebeccapurple
+}
+
+#c3 {
+  width: auto;
+  width: 34%;
+  // background: red
+}
+.off {
+  margin: auto;
+  width: 60%;
+  top: 70%;
+  padding: 10px;
+  margin-right: 30%;
+}
+.newspaper {
+  -webkit-column-count: 2; /* Chrome, Safari, Opera */
+  -moz-column-count: 2; /* Firefox */
+  column-count: 2;
+  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+  -moz-column-gap: 40px; /* Firefox */
+  column-gap: 40px;
+  align-content: left;
+  text-align: left;
+}
+#demo {
+  margin: 30px 0 50px 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#demo .wrapper {
+  display: inline-block;
+  width: 180px;
+  margin: 0 10px 0 0;
+  height: 20px;
+  position: relative;
+}
+
+#demo .parent {
+  height: 100%;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  border-radius: 5px;
+  background: #f9f9f9;
+  border: 1px solid #aaa;
+  border-bottom: 1px solid #777;
+  color: #282d31;
+  font-weight: bold;
+  z-index: 2;
+  position: relative;
+  -webkit-transition: border-radius 0.1s linear, background 0.1s linear,
+    z-index 0s linear;
+  -webkit-transition-delay: 0.8s;
+  text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+  background: #fff;
+  -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+#demo .content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: 1;
+  height: 0;
+  width: 180px;
+  padding-top: 30px;
+  -webkit-transition: height 0.5s ease;
+  -webkit-transition-delay: 0.4s;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+#demo .wrapper:active .content {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content ul {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+  text-decoration: none;
+}
+
+#demo .content li:hover {
+  background: #eee;
+  color: #333;
+}
+
+#demo .content li {
+  list-style: none;
+  text-align: left;
+  color: #888;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.customClass {
+  background-color: #dd3;
+  border-radius: 5px;
+  margin: 5px;
+  width: 500px;
+}
+
+.customClass .img-ul-upload {
+  background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+  background-color: #b819bb !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+  color: purple !important;
+}
+
+.customClass .img-ul-container {
+  background-color: #ff6cad !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+  padding: 16px;
+  height: 201px !important;
+}
+.weekDays-selector input {
+  display: none !important;
+}
+
+.weekDays-selector input[type="checkbox"] + label {
+  display: inline-block;
+  border-radius: 6px;
+  background: #dddddd;
+  height: 40px;
+  width: 34.2px;
+  margin-right: 3px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.weekDays-selector input[type="checkbox"]:checked + label {
+  background: #2ad705;
+  color: #ffffff;
+}
+@media screen and (max-width: 900px) {
+  .icon-bar {
+    display: none;
+  }
+  .sch {
+    display: none;
+  }
+  .first {
+    width: 1% !important;
+  }
+  .second {
+    margin-left: 8px !important;
+  }
+  .small {
+    display: block !important;
+  }
+  .image {
+    display: none;
+  }
+  .schlar {
+    display: block !important;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .schlar {
+    display: none;
+  }
+}
+.small {
+  display: none;
+}
+.first {
+  float: left;
+  width: 16%;
+  height: 86vh;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  margin-right: 5px;
+}
+.second {
+  width: 88%;
+  height: 86vh;
+  margin-left: 171px;
+}
+.mat-dialog-container {
+  max-width: none !important;
+}
+.sch {
+}
+.schlar {
+}
+.pointer {
+  cursor: pointer !important;
+  font-size: 11px;
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: 0.4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262f;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555;
+}
+
+.expansion-panel__content {
+  margin-left: 0% !important;
+}
+
+.button2 {
+  background-color: #008cba;
+}
+.ngx-picker--btn {
+  color: #000;
+  background-color: transparent;
+  border: none;
+  padding: 1em;
+  font-size: 1em;
+}
+.ngx-picker--btn__selected {
+  background-color: #eee;
+}
+.ngx-picker--btn:hover {
+  transition: 0.25s ease;
+  background-color: #eee;
+  cursor: pointer;
+}
+.ngx-picker--btn:focus {
+  outline-color: transparent;
+}
+
+.ngx-picker--btn__month:hover {
+  border-top-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__done:hover {
+  border-bottom-right-radius: 0.2em;
+}
+
+.ngx-picker--btn__now:hover {
+  border-bottom-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__next:hover {
+  border-top-right-radius: 0.2em;
+}
+
+.calendar {
+  position: absolute;
+  background-color: #e6e6e6;
+  max-width: 16em;
+  min-width: 16em;
+  font-size: 16px;
+  font-family: "Arial", sans-serif;
+  border-radius: 0.2em;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
+.calendar--previous-and-next {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.calendar--footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #e6e6e6;
+  padding: 0;
+  border-radius: 0.2em;
+}
+
+.calendar--years-select,
+.calendar--months-select {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 14.85em;
+  background-color: #fff;
+  width: 100%;
+}
+
+.calendar--year,
+.calendar--month {
+  display: block;
+  padding: 0.5em 1em;
+  width: 100%;
+  overflow: hidden;
+  color: #000;
+}
+.calendar--year__selected,
+.calendar--month__selected {
+  color: #000;
+  font-weight: bold;
+  background-color: #eee;
+}
+.calendar--year:hover,
+.calendar--month:hover {
+  cursor: pointer;
+  background-color: #eee;
+  font-weight: 400;
+  color: #000;
+}
+
+.calendar--days-of-week {
+  display: flex;
+  justify-content: space-around;
+  background-color: #eee;
+}
+
+.calendar--day-of-week {
+  position: relative;
+  padding: 0.5em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #000;
+  font-size: 0.9em;
+}
+
+.calendar--days-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.calendar--day {
+  text-align: center;
+  width: 1.285em;
+  padding: 0.5em;
+  font-weight: 500;
+  color: #000;
+}
+.calendar--day__muted {
+  color: #999;
+}
+.calendar--day__selected {
+  background-color: #eee;
+  color: #000;
+}
+.calendar--day:hover {
+  cursor: pointer;
+  color: #000;
+  background-color: #eee;
+}
+
+.ngx-picker {
+  display: flex;
+  position: relative;
+}
+.ngx-picker .calendar {
+  position: absolute;
+  left: 0;
+  top: 2.5em;
+  z-index: 3;
+}
+
+.time-picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #e6e6e6;
+}
+
+.time--values {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #eee;
+}
+
+.time--value {
+  width: 2.66em;
+  font-size: 1em;
+  padding: 0.5em 0;
+  text-align: center;
+  color: #000;
+}
+.time--value__selected {
+  color: #000;
+  background-color: #e6e6e6;
+}
+.time--value:hover {
+  transition: 0.25s ease;
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+[hidden] {
+  display: none !important;
+}
+#c11 {
+  width: 25%;
+  float: left;
+}
+#c22 {
+  width: 25%;
+  float: left;
+}
+#c33 {
+  width: 25%;
+  float: left;
+}
+#c44 {
+  width: 25%;
+  float: left;
+}
+#c111 {
+  width: 50%;
+  float: left;
+}
+#c222 {
+  width: 45%;
+  float: left;
+}
+#c333 {
+  width: 5%;
+  float: left;
+}
+
+/deep/ .mat-menu-panel.test {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a {
+    display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+  }
+}
+
+/deep/ .mat-menu-panel.test_1 {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+  margin-top: 48px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+input:checked + .slider {
+  background-color: #2196f3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
diff --git a/src/app/geofencing/geofencing.component.spec.ts b/src/app/geofencing/geofencing.component.spec.ts
new file mode 100644
index 0000000..792d8ec
--- /dev/null
+++ b/src/app/geofencing/geofencing.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofencingComponent } from './geofencing.component';
+
+describe('GeofencingComponent', () => {
+  let component: GeofencingComponent;
+  let fixture: ComponentFixture<GeofencingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofencingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofencingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/geofencing/geofencing.component.ts b/src/app/geofencing/geofencing.component.ts
new file mode 100644
index 0000000..b1477a3
--- /dev/null
+++ b/src/app/geofencing/geofencing.component.ts
@@ -0,0 +1,1048 @@
+import { Component, OnInit } from '@angular/core';
+import {Router, ActivatedRoute, Params} from '@angular/router';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { MDBBootstrapModule } from 'angular-bootstrap-md';
+import {ContactService} from '../contact.service';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { SelectUntrackVehiclesComponent } from './select-untrack-vehicles/select-untrack-vehicles.component';
+declare var $: any;
+declare var swal: any
+import * as moment from 'moment';
+@Component({
+ selector: 'app-geofencing',
+ templateUrl: './geofencing.component.html',
+ styleUrls: ['./geofencing.component.scss'],
+ providers: [ContactService]
+})
+export class GeofencingComponent implements OnInit {
+ testCount=[1,2,3];
+ circular_geofence =[];
+fs :any;
+Load: boolean;
+tabelObj: any;
+ls:any;
+emailid:any;
+or:any;
+onn_time:any;
+min:any;
+corect_min:any;
+hr:any;
+before:any;
+  tabelObj1: any;
+  finalArr=[]
+run(){
+
+}
+myaccount(){
+ 
+ this.cond = false
+ this.router.navigateByUrl("accountSettings");
+ 
+ // let dialogRef = this.dialog.open(MyaccountComponent, {
+ // width: '903px',
+ // data: {}
+ // });
+
+ // dialogRef.afterClosed().subscribe(result => {
+
+ // if(result == "succ"){
+ // console.log("Updated")
+ // }
+
+ // });
+}
+openNav() {
+ /* document.getElementById("myNav").style.width = "100%";
+*/
+ this.router.navigateByUrl("location");
+
+}
+ constructor(private router: Router,private contactService:ContactService,public dialog: MdDialog) {
+ 
+ }
+ myInput:any
+ logout(){
+ window.localStorage.clear();
+ this.router.navigateByUrl("login");
+ }
+ devi(){
+ this.router.navigateByUrl("dashboard");
+
+ }
+ soon(){
+ this.router.navigateByUrl("const?_i="+window.localStorage.token);
+ 
+ }
+
+ 
+summaryReport(){
+
+ this.cond = false
+ this.router.navigateByUrl("device-report/summary-report");
+}
+
+group(){
+ this.cond = false
+ this.router.navigateByUrl("group_view");
+}
+
+
+ addgeo(){
+ this.router.navigateByUrl("geofence-add");
+ }
+ geo(){
+ this.router.navigateByUrl("geofencing");
+ 
+ }
+
+ geofancingReport(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/geofancing");
+ }
+
+
+ overspeed(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/overspeed");
+ 
+ }
+ 
+ 
+ stoppage_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/stoppage_report");
+ 
+ }
+ 
+
+ vehicleRoute(){
+ this.router.navigateByUrl("vehicleRoute");
+ 
+ }
+ 
+ dealerInfo(){
+ this.cond = false
+ this.router.navigateByUrl("dealerInfo");
+ }
+ 
+ ignition_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/ignition_report");
+ 
+ 
+ }
+ route_map(){
+ this.router.navigateByUrl("routeMapping");
+
+ }
+ routeViolation(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/routeViolation");
+ 
+ }
+ alert_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/alert_report");
+ }
+
+ notification(){
+ this.cond = false
+ this.router.navigateByUrl("notifications");
+ }
+
+
+
+
+ distance_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/distance_report");
+ }
+
+ driverPerformance(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/Driver-performance");
+ }
+
+ trip_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/trip_report");
+ 
+ }
+ 
+
+
+ 
+ cond:Boolean = false;
+ point : any = 0;
+ a(){
+//  console.log(this.point);
+ if(this.point == 0){
+ this.cond = true;
+ this.point ++;
+ }
+ else if(this.point % 2 == 0){
+ this.cond = true;
+ this.point ++;
+ }
+ else{
+ this.cond = false
+ this.point ++;
+ }
+ 
+ 
+ }
+ addcus(){
+ this.router.navigateByUrl("add");
+ }
+ devicess:any;
+ final:any;
+ getdev(){
+ let foods = []
+ this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+ 
+ data => {
+ this.devicess = data 
+ 
+ let swap;
+ for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+ for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+ if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+ swap = this.devicess.devices[c];
+ this.devicess.devices[c] = this.devicess.devices[c+1];
+ this.devicess.devices[c+1] = swap;
+ }
+ }
+ }
+ 
+ this.final = this.devicess.devices
+ 
+ for(let i=0;i<this.devicess.devices.length;i++){
+ 
+//  if(this.devicess.devices[i].type_of_device =="Tracker"){
+ let a ={
+ value : this.devicess.devices[i].Device_Name,
+ viewValue:this.devicess.devices[i].Device_Name
+ }
+ foods.push(a);
+//  console.log(a);
+//  }
+ 
+ }
+ 
+ });
+ }
+ report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report");
+ 
+ }
+ report_speed(){
+//  console.log("report speed call")
+ this.cond = false
+ this.router.navigateByUrl("device-report/device-speed-report");
+ }
+ 
+de:any;
+ delete(id){
+var that=this
+  swal({
+                  // title: 'Are you sure?',
+                  text: "Do you want to delete geofence?",
+                  type: 'warning',
+                  showCancelButton: true,
+                  confirmButtonColor: '#3085d6',
+                  cancelButtonColor: '#d33',
+                  confirmButtonText: 'Yes, delete'
+                }).then((result: { value: boolean; }) =>{                      
+                  if(result){
+                    console.log(id);
+                 
+                   that.contactService.deleteGeoFence(id).subscribe(da => {
+                      that.de = da
+                      
+                        swal(
+                          'Deleted',
+                          'Geofence deleted',
+                          'success'
+                        )
+
+                        that.tabelObj.ajax.reload();
+                  
+                      });
+              
+                  }                
+                });
+
+ 
+//  console.log("delete called" +id)
+//  this.contactService.deleteGeoFence(id).subscribe(
+ 
+//  da => {
+//  this.de = da
+//   this.tabelObj.ajax.reload()
+ 
+//  });
+ 
+ 
+ }
+
+ useridd:any;
+
+ geostatus:any;
+ foods = [];
+ vewdev(a){
+ this.router.navigateByUrl("geofencing-view?_i="+a);
+ }
+
+ vewdev_1(b){
+     var drawCircle ={
+         poiname  : b.poi.poiname,
+         address : b.poi.address,
+         latlong : b.poi.location.coordinates,
+         radius : b.radius,
+         identifier : 'circular'
+     }
+  
+    this.router.navigateByUrl("geofencing-view?_i="+drawCircle);
+ }
+ googlemapview(){
+ this.router.navigateByUrl("geofencing-view2");
+ }
+ mydealer(){
+ window.localStorage['token'] = window.localStorage['Dealer_token'];
+ localStorage.removeItem('devices');
+ window.localStorage['DataUpdate'] = 'True';
+ if(window.localStorage['DataLoaded'] = 'True'){
+ window.localStorage['Custumer'] = 'OFF'
+ this.router.navigateByUrl("add")
+ // this.router.navigateByUrl("const?_status="+"OK");
+ }
+ }
+ onChange(a,b,c,d){
+ 
+ this.contactService.statusUpdateGeoFence(a,Boolean(b),Boolean(c),Boolean(d)).subscribe(
+ 
+ geo => {
+ this.geostatus = geo
+ 
+ });
+ /* console.log(a.checked);
+ let status = a.checked;
+ let g_id = b;
+ this.contactService.statusUpdateGeoFence(status,g_id).subscribe(
+ 
+ geo => {
+ this.geostatus = geo
+ 
+ }); */
+ }
+ geo_status:any;
+ custtype:any;
+ cust:boolean=false;
+ devicesss:any;
+ ideal(){
+ this.router.navigateByUrl("device-report/ideal-report");
+ }
+ ign(){
+ this.router.navigateByUrl("device-report/ign-report");
+ 
+ }
+ table1ch(){
+ 
+ myFunction();
+ function myFunction() {
+ var input, filter, table, tr, td, i,td1;
+ input = document.getElementById("myInput");
+ 
+ filter = input.value.toUpperCase();
+ table = document.getElementById("myTable");
+ tr = table.getElementsByTagName("tr");
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByTagName("td")[1];
+ td1= tr[i].getElementsByTagName("td")[0]
+ if (td) {
+ if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } 
+ else if(td1.innerHTML.toUpperCase().indexOf(filter) > -1){
+ tr[i].style.display = "";
+ }
+ else {
+ tr[i].style.display = "none";
+ }
+ } 
+ }
+ }
+ }
+ mb:any;
+ logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+superAdmin:Boolean = false;
+ ngOnInit() {
+ 
+ this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+ 
+ this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+ this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+ this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+ this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+ this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+ this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+ this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+ //this.getdev();
+ if(this.custtype == true){
+ this.cust = true;
+ }
+ if(this.mb.charAt(0)=="n"){
+ this.mb = ' '
+ }
+ if( window.localStorage['Custumer'] == 'ON'){
+ this.logoutbut = false
+ this.dealer = true
+ }
+ else{
+ this.logoutbut = true
+ }
+
+ this.logo=window.localStorage['logo'];
+ this.text=window.localStorage['text'];
+ this.testTable();
+ this.testTable1() ;
+ var _thisDoc = this;
+    $('#geofence').on('click', '.btn-circle', function(){
+      _thisDoc.CO(this.id);
+    });
+//  this.getAllGeofences()
+ 
+ 
+ }
+CO(e) {
+    console.log(e); //row.KC value
+  } 
+ getAllGeofences(){
+this.contactService.getallgeofence(this.useridd).subscribe(
+ data => {
+ this.devicesss = data 
+ this.geo_status = this.devicesss.status;
+
+ });
+ }
+
+ total =0;
+ t:any=0;
+ public doughnutChartType:string = 'doughnut';
+ statusArr = [0,0,0];
+ statusList=['Loading','Unloading','Parking'];
+ geofence_info=[];
+ geofence=[];
+ GeofenceGridData(){ 
+ this.geofence=[];
+//  console.log(this.useridd);
+ this.contactService.getGeoFenceData(this.useridd)
+ .subscribe(res=>{
+//  console.log(res);
+ this.geofence_info = res;
+//  console.log(this.geofence_info.length);
+
+ for(var i = 0;i<this.geofence_info.length;i++) {
+ let group_logs = this.geofence_info[i];
+//  console.log(group_logs);
+ let _id = group_logs._id.vehicleGroupName;
+ let group_name = group_logs._id.vehicleGroupName.toUpperCase();
+ let statusListArr = group_logs.geoType;
+ this.total = 0;
+ this.t=0;
+ this.statusArr = [0,0,0];
+ if(statusListArr){
+ for(var j=0;j<statusListArr.length;j++){
+ var index = this.statusList.indexOf(statusListArr[j].type);
+ if(index>-1){
+ this.statusArr[index] = (statusListArr[j].count);
+ }
+ this.total += statusListArr[j].count;
+ this.t += statusListArr[j].count;
+ }
+ }
+ this.geofence.push({
+ "_id":_id,
+ "name":group_name,
+ "statusCount" : this.statusArr,
+ "totalCount" : this.total,
+ "statusList" : this.statusList,
+ "t":this.t 
+ })
+//  console.log(this.geofence);
+ }
+ },err=>{
+//  console.log("error");
+ })
+ }
+
+ Ddetail(){
+ this.router.navigateByUrl("driverdetail");
+ }
+ DModel(){
+ this.router.navigateByUrl("deviceModel");
+ }
+ VType(){
+ this.router.navigateByUrl("VehicleType");
+ }
+
+ selectedIndex:number=0;
+ showVehiclesByGroup(group,ev){
+
+ this.contactService.getfilteredgeofance(group._id,this.useridd)
+ .subscribe(res=>{
+//  console.log(res);
+ this.devicesss=res;
+ this.geo_status = this.devicesss.status;
+ this.selectedIndex=0;
+ })
+ 
+ }
+
+ selectedIndexChange(val :number ){
+ this.selectedIndex=val;
+//  console.log(this.selectedIndex);
+ }
+
+ options = { 
+ legend: {
+ display: false
+ },
+ cutoutPercentage: 75
+ };
+
+ public doughnutChartColor: Array<any> = [
+ {
+ backgroundColor: ['lime','green','tomato']
+ }
+ ];
+
+ getPOI(){
+
+  this.tabelObj1.ajax.reload()
+
+  //   var suburl = "";
+  //   suburl += "/poi/poidatatable";
+
+  //   var dataTablesParameters = {
+  //       "draw": 1,
+  //       "columns": [
+  //         {
+  //           "data": "user"
+  //         },
+  //         {
+  //           "data": "radius"
+  //         },
+  //         {
+  //           "data": "poi.location.coordinates"
+  //         },
+  //         {
+  //           "data": "poi.poiname"
+  //         },
+  //         {
+  //           "data": "createdOn"
+  //         },
+  //         {
+  //           "data": "status"
+  //         },
+  //         {
+  //           "data": "poi.address"
+  //         },
+  //         {
+  //           "data": "untrackedDevice"
+  //         }
+  //       ],
+  //       "order": [
+  //         {
+  //           "column": 3,
+  //           "dir": "desc"
+  //         }
+  //       ],
+  //       "start": 0,
+  //       "length": 50,
+  //       "search": {
+  //         "value": "",
+  //         "regex": false
+  //       },
+  //       "op": {},
+  //       "select": [],
+  //       "find": {
+  //         "user": this.useridd
+  //       }
+  //     }
+      
+  // this.contactService.post(suburl, dataTablesParameters).subscribe(res=>{
+  //     console.log('res=>',res['data']);
+  //     this.circular_geofence = res['data'];
+  //     return res['data']
+  // },err=>{
+  //     console.log(err);
+  //     return []
+  // })
+ }
+
+ updateGeofence(geoObj){
+   console.log(geoObj);
+   this.router.navigateByUrl("geofence-add?_i="+geoObj._id);
+ }
+ untrack(data){
+
+  if(this.dialog.openDialogs && this.dialog.openDialogs.length > 0){
+      return false;
+    }
+    let dialogRef = this.dialog.open(SelectUntrackVehiclesComponent, {
+//  width: '503px',
+//  height:'400px',
+ data: data
+ });
+    dialogRef.afterClosed().subscribe((result) => {
+      dialogRef = null;
+      this.tabelObj.ajax.reload()
+    if(result == "succ"){
+      console.log("Updated")
+    }
+      //add code to perform any other actions on pop-up close.
+    });
+
+//     let dialogRef = this.dialog.open(SelectUntrackVehiclesComponent, {
+// //  width: '503px',
+// //  height:'400px',
+//  data: data
+//  });
+
+//  dialogRef.afterClosed().subscribe(result => {
+//    console.log(result);
+   
+//   this.tabelObj.ajax.reload()
+//  if(result == "succ"){
+//  console.log("Updated")
+//  }
+
+//  });
+ }
+
+
+
+testTable1() {
+    const that = this;
+    console.log("inside TABLE 1");
+    $(document).ready(function () {
+      that.tabelObj1 = $('#geofence1').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         "rowCallback": function(row: Node, data: any | Object, index: number){
+          
+         },
+        ajax: (dataTablesParameters, callback) => {
+           that.Load = true;
+          var suburl = "";
+    suburl += "/poi/poidatatable";
+
+    var dataTablesParameters1 = {
+        "draw": 1,
+        "columns": [
+          {
+            "data": "user"
+          },
+          {
+            "data": "radius"
+          },
+          {
+            "data": "poi.location.coordinates"
+          },
+          {
+            "data": "poi.poiname"
+          },
+          {
+            "data": "createdOn"
+          },
+          {
+            "data": "status"
+          },
+          {
+            "data": "poi.address"
+          },
+          {
+            "data": "untrackedDevice"
+          }
+        ],
+        "order": [
+          {
+            "column": 3,
+            "dir": "desc"
+          }
+        ],
+        "start": 0,
+        "length": 50,
+        "search": {
+          "value": "",
+          "regex": false
+        },
+        "op": {},
+        "select": [],
+        "find": {
+          "user": that.useridd
+        }
+      }
+      
+  that.contactService.post(suburl, dataTablesParameters1).subscribe(res=>{
+      console.log('res=>',res['data']);
+      for(var i=0;i<res['data'].length;i++){
+        res['data'][i].radius=res['data'][i].radius?res['data'][i].radius:'N/A'
+      }
+       that.Load = false
+        callback({ data: res['data'] });
+  },err=>{
+        that.Load = false
+        callback({ data: [] });
+  })
+    
+        },
+
+        "columns": [
+           {
+            "data": "poi",
+           
+            "render": function (data, row) {  
+              // console.log(row);
+                         
+              return data?data.poiname:'N/A';   
+            }
+          },
+          {
+            "data": "poi",
+           
+            "render": function (data, row) {             
+              return data.address?data.address:'N/A';   
+            }
+          },
+           {
+            "data": "radius",
+           "render": function (data, row) {             
+              return data?data:'N/A';   
+            }
+          },
+
+          {
+            "data": "poi",
+           "render": function (data, row) {             
+              return data?data.location?data.location.coordinates?data.location.coordinates[1]:'N/A':'N/A':'N/A';   
+            }
+          },
+          {
+            "data": "poi",
+           "render": function (data, row) {             
+              return data?data.location?data.location.coordinates?data.location.coordinates[0]:'N/A':'N/A':'N/A';   
+            }
+          },
+           {
+            "data": "poi",
+           "render": function (data, row) {             
+              return row.status?row.status:'N/A';   
+            }
+          },
+         
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2,3,4,5] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "70px", "targets": 4 },
+           { "width": "70px", "targets": 5 },
+          //  { "width": "70px", "targets": 6 },
+          //  { "width": "70px", "targets": 7 },
+          //  { "width": "70px", "targets": 8 },
+          //  { "width": "70px", "targets": 9 },
+          //  { "width": "70px", "targets": 10 },
+
+        ], order: [[ 4, 'desc' ], [ 0, 'asc' ]]
+      });
+
+    });
+
+  }
+
+ testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#geofence').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#entering', row).bind('click', () => {  
+              var id=data._id 
+               var entering=!data.entering;
+               var exiting=data.exiting;
+               var status=data.status
+            that.onChange(id,status,entering,exiting)
+                     
+            });
+
+            $('#status', row).bind('click', () => {  
+              var id=data._id 
+               var entering=data.entering;
+               var exiting=data.exiting;
+               var status=!data.status
+            that.onChange(id,status,entering,exiting)
+                     
+            });
+
+             $('#exiting', row).bind('click', () => {  
+              var id=data._id 
+               var entering=data.entering;
+               var exiting=!data.exiting;
+               var status=data.status
+            that.onChange(id,status,entering,exiting)
+                     
+            });
+            $('#edit', row).bind('click', () => {  
+              that.updateGeofence(data)
+                     
+            });
+             $('#delete', row).bind('click', () => {  
+              that.delete(data._id)
+                     
+            });
+             $('#track', row).bind('click', () => {  
+              that.untrack(data)
+                     
+            });
+
+             $('#view', row).bind('click', () => {  
+             that.vewdev(data._id)
+                     
+            });
+         },
+
+         
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+           that.Load = true;
+          var suburl = "";
+        that.contactService.getallgeofence(that.useridd).subscribe((res:any)=>{
+        console.log(res);
+        var j = 0;
+        that.finalArr=[]
+        if(res.length>0){
+          for(var i=0;i<res.length;i++){
+            res.type=res.type?res.type:'N/A'
+            that.clocation_1(res[i],function(err,succ){
+               if (err) {
+                          console.log(err);
+                          j++;
+                        }
+                else {
+                          that.finalArr.push(succ);
+                          
+                          j++;
+                          if (j === res.length) {
+                            // that.endAddress=succ.address
+                            that.Load = false;
+                            callback({ data:  that.finalArr });
+                          //    that.finalArr.sort(function(a:any,b:any){
+                          // // return new Date(a.date).valueOf() - new Date(b.date).valueOf();
+                          // });
+                        }
+            }
+            })
+          }
+
+        }else{
+             that.Load = false
+        callback({ data: [] });
+        }
+        //  that.Load = false
+        // callback({ data: res });
+         },err=>{
+             that.Load = false
+        callback({ data: [] });
+         })
+
+        },
+
+        "columns": [
+           {
+            "data": "type",
+           
+            "render": function (data, row) {  
+              // console.log(row);
+                         
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "geoname",
+           
+            "render": function (data, row) {             
+              return data?data:'N/A';   
+            }
+          },
+           {
+            "data": "entering",
+            "render": function (data, type, row) {    
+              var button 
+              if(row.entering) {
+                 button= `<input id='entering' type='checkBox' checked>`;
+              } else{
+                button=`<input id='entering' type='checkBox'>`;
+              }
+              return button 
+            }
+          },
+          {
+            "data": "exiting",
+            "render": function (data, type, row) {    
+              var button 
+              if(row.exiting) {
+               button= `<input id='exiting' type='checkBox' checked>`;
+              } else{
+                button=`<input id='exiting' type='checkBox'>`;
+              }
+              return button 
+            }
+          },
+            {
+            "data": "status",
+            "render": function (data, type, row) {    
+              var button 
+              if(row.status) {
+                button= `<input id='status' type='checkBox' checked>`;
+              } else{
+                button=`<input id='status' type='checkBox'>`;
+              }
+              return button 
+            }
+          },
+            {
+            "data": "devicesWithin",
+            "render": function (data, type, row) {       
+              return data?data.length:'N/A';   
+            }
+          },
+          {
+            "data": "area",
+            "render": function (data, type, row) {       
+              return data?((data/1000000)*247).toFixed(2):'N/A';   
+            }
+          },
+           {
+            "data": null,
+            "render": function (data, type, row) {    
+              
+              return `<button class="btn btn=info btn-sm"><i id="edit"  style="font-size:20px;color: green" class="fas fa-edit"></i></button> `
+            }
+          },
+           {
+            "data": null,
+            "render": function (data, type, row) {    
+              
+              return `<button class="btn btn=info btn-sm"><i id="delete" style="font-size:20px;color: red" class="fas fa-trash-alt"></i></button> `
+            }
+          },
+
+           {
+            "data": null,
+            "render": function (data, type, row) {    
+              
+              return `<button class="btn btn=info btn-sm"><i id="track" style="font-size:20px;color: blue" class="fa fa-car"></i></button> `
+            }
+          },
+             {
+            "data": null,
+            "render": function (data, type, row) {    
+              
+              return `<button class="btn btn=info btn-sm"><i id="view" style="font-size:20px;color: blue" class="fa fa-eye"></i></button> `
+            }
+          },
+         
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2,3,4,5,6,7,8,9,10] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "70px", "targets": 4 },
+           { "width": "70px", "targets": 5 },
+           { "width": "70px", "targets": 6 },
+           { "width": "70px", "targets": 7 },
+           { "width": "70px", "targets": 8 },
+           { "width": "70px", "targets": 9 },
+           { "width": "70px", "targets": 10 },
+
+        ], order: [[ 4, 'desc' ], [ 0, 'asc' ]]
+      });
+
+    });
+
+  }
+
+   clocation_1(data,cb) {
+     console.log("IN",data.geofence);
+     var latlongArr=[];
+     if(data.geofence.coordinates){
+       if(data.geofence.coordinates[0].length>0){
+         for(var i=0;i<data.geofence.coordinates[0].length;i++){
+          latlongArr.push({"latitude": data.geofence.coordinates[0][i][1], "longitude": data.geofence.coordinates[0][i][0] })
+          if(i==(data.geofence.coordinates[0].length-1)){
+            this.contactService.post('/hulls/calculateArea',{points:latlongArr}).subscribe((res:any)=>{
+              data.area=res.area;
+             cb(null,data)
+            },err=>{
+              data.area=0;
+             cb(null,data)
+            })
+
+          }
+         }
+       }
+     }
+
+  }
+
+  
+
+}
\ No newline at end of file
diff --git a/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.html b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.html
new file mode 100644
index 0000000..c576f16
--- /dev/null
+++ b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.html
@@ -0,0 +1,38 @@
+<div class="card">
+  <div class="card-body">
+    <div class="row" style="margin:0;margin-bottom:10px">
+      <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+      <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;">
+        <md-option type="checkbox" *ngFor="let item of poiDevices;let i = index;" ng-selected="item.isTrue" [value]="item.id"
+          (click)="change(item, i)">{{item.deviceName}}</md-option>
+      </md-select> -->
+
+      <div style="width: 100%;height: 78vh;">
+        <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align:left;width:100px"><input (change)="selectAll($event)" type="checkbox"> </th>
+              <th style="text-align:left;width:100px">{{'Vehicle Name'|translate}} </th>
+              <th style="text-align:left;width:100px">{{'IMEI'|translate}} </th>
+             
+      
+            </tr>
+          </thead>
+        </table>
+      
+      
+      </div>
+
+
+      
+    </div>
+
+  </div>
+  <div class="card-footer">
+    <div class="text-center">
+      <button class="btn btn-primary btn-sm" (click)="update()">Update</button>
+    </div>
+
+  </div>
+
+</div>
diff --git a/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.scss b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.spec.ts b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.spec.ts
new file mode 100644
index 0000000..869f8d3
--- /dev/null
+++ b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectUntrackVehiclesComponent } from './select-untrack-vehicles.component';
+
+describe('SelectUntrackVehiclesComponent', () => {
+  let component: SelectUntrackVehiclesComponent;
+  let fixture: ComponentFixture<SelectUntrackVehiclesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SelectUntrackVehiclesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectUntrackVehiclesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.ts b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.ts
new file mode 100644
index 0000000..6e069e0
--- /dev/null
+++ b/src/app/geofencing/select-untrack-vehicles/select-untrack-vehicles.component.ts
@@ -0,0 +1,353 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-select-untrack-vehicles',
+  templateUrl: './select-untrack-vehicles.component.html',
+  styleUrls: ['./select-untrack-vehicles.component.scss']
+})
+export class SelectUntrackVehiclesComponent implements OnInit {
+  emailid: any;
+  useridd: any;
+  devicesss: any;
+  uncheckedArr=[];
+  tabelObj: any;
+  poiDevices=[];
+  untrackedDev=[];
+  tempArray: any[];
+  selectedDevices: any[];
+  notSelectedPOIArray=[];
+  Load: boolean;
+  changed:boolean=true
+  superAdmin: any;
+  trackedDevices
+ constructor(public dialogRef: MdDialogRef<SelectUntrackVehiclesComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService:ContactService) {
+      console.log(data);
+      // this.untrackedDev=data.untrackedDevice?data.untrackedDevice:[]
+      var deviceIDs = data.untrackedDevice?data.untrackedDevice:[];
+      this.trackedDevices=data.trackedDevice?data.trackedDevice:[];
+        //  console.log(deviceIDs);
+        if(deviceIDs.length != 0){
+         for(var k =0; k<deviceIDs.length;k++){
+          //  console.log(deviceIDs[k])
+           this.untrackedDev.push(deviceIDs[k]);
+          }
+          console.log("untrackedDevice=>",this.untrackedDev);
+        }
+         this.notSelectedPOIArray = this.untrackedDev;
+     }
+
+  ngOnInit() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  setTimeout(() => {
+    // $('#dbselectIMEI').multipleSelect({
+        //   width: 250,
+        //   placeholder: "Vehicle IMEI",
+        //   filter: true,
+        //   single: true,
+        //   selectAll: false  
+        // }) 
+  
+        $('#dbselectVehicleName').multipleSelect({
+          width: 250,
+          placeholder: "Vehicle Name",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+        
+        // $("#dbselectVehicleName").multipleSelect("disable");
+        
+      },100)
+       this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+        // this.getUserDevices();
+        this.testTable()
+  }
+
+
+  change(obj: any,ind:any){ 
+    console.log(obj, ind);
+    
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  update(){
+
+    console.log(this.data,this.trackedDevices.length)
+     const newGeo ={
+            uid: this.useridd,
+            geofence:this.data.geofence.coordinates,
+            geoname: this.data.geoname,
+            entering:this.data.entering,
+            exiting:this.data.exiting,
+            // vehicleGroup:grp[0],
+            type:this.data.type,
+            _id:this.data._id,
+            untrackedDevice:this.notSelectedPOIArray,
+            trackedDevice:this.trackedDevices   
+          }
+          this.contactService.updateGeo(newGeo).subscribe(devgeo => {
+              // localStorage.removeItem("cordinates");
+              // this.router.navigateByUrl("geofencing");
+              this.dialogRef.close()
+              // this.geoadd.push(devgeo);
+            }, (err: any) => { 
+  
+            });
+  }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+        //  "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+           
+                console.log(data);
+            var ind=that.poiDevices.indexOf(data)
+              console.log(that.poiDevices[ind],ind);
+            that.poiDevices[ind].isTrue = that.poiDevices[ind].isTrue?!that.poiDevices[ind].isTrue:true;
+           var i = that.notSelectedPOIArray.indexOf(data.id);
+            var index=that.trackedDevices.indexOf(data.id);
+            console.log(index==-1);
+            
+            if(index==-1){
+              if(!that.trackedDevices.includes(data.id)){
+                console.log(that.trackedDevices.length);
+                
+                console.log("In tracked Device");
+                
+                that.trackedDevices.push(data.id);
+                console.log(that.trackedDevices.length);
+              }
+              if(that.notSelectedPOIArray.includes(data.id)){
+                 that.notSelectedPOIArray.splice(i,1);
+              }
+              
+            }else{
+               console.log("In Untracked Device");
+              if(!that.notSelectedPOIArray.includes(data.id)){
+
+                that.notSelectedPOIArray.push(data.id);
+              }
+              if(that.trackedDevices.includes(data.id)){
+                 console.log(that.trackedDevices.length,i);
+                 that.trackedDevices.splice(index,1);
+                  console.log(that.trackedDevices.length);
+              }
+
+              // that.trackedDevices.splice(index,1);
+              // that.notSelectedPOIArray.push(data.id);
+            }
+            // if( i==-1){
+            //  that.notSelectedPOIArray.push(data.id);
+            // }
+            // else{
+            //   that.trackedDevices.push(data.id);
+            //   that.notSelectedPOIArray.splice(i,1);  
+            // }
+      console.log(that.notSelectedPOIArray,that.trackedDevices); 
+      
+         })
+        },
+        ajax: (dataTablesParameters, callback) => {
+           that.Load = true;
+          var suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all';
+          if(that.superAdmin){
+             suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all&supAdmin='+that.useridd;
+          }
+          if(that.changed){
+            that.contactService.get(suburl).subscribe((res:any)=>{
+        
+        that.devicesss=res.devices;
+       for(var i = 0; i<res.devices.length ; i++){       
+            var dev = {
+              isTrue:true,
+              id:res.devices[i]._id,
+              Device_Name: res.devices[i].Device_Name,
+              Device_ID:res.devices[i].Device_ID
+            }  
+          that.poiDevices.push(dev);  
+      //     // that.notSelectedPOIArray.push(res.devices[i]._id)        
+        }   
+      var finalArr=[]  ;
+      var j=0 
+      for (var i = 0; i < that.poiDevices.length; i++) {
+                    that.clocation_1(that.poiDevices[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        finalArr.push(succ);
+                        // console.log(finalArr,j);
+                        j++;
+                        if (j === that.poiDevices.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+         that.Load = false;
+         })
+        }else{
+          // console.log(that.poiDevices);
+          
+          callback({ data: that.poiDevices});
+           that.Load = false;
+           that.changed=true
+        }
+
+        },
+
+        "columns": [
+          {
+            "data": "isTrue",
+            "render": function (data, row) { 
+              if(data){
+                return "<input checked type='checkbox' id='edit'>"   
+              } else{
+                 return "<input  type='checkbox' id='edit'>" 
+              }
+            }
+          },
+           {
+            "data": "Device_Name",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Device_ID",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+         
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+
+        ], order: [[ 0, 'desc' ], [ 0, 'asc' ]]
+      });
+  //     $('#deviceTable tbody').on('change', 'input[type="checkbox"]', function(e){
+  //     // If checkbox is not checked
+  //     console.log("dis",e);
+      
+  //     if(!this.checked){
+  //        var el = $('#example-select-all').get(0);
+  //        console.log(el);
+         
+  //        // If "Select all" control is checked and has 'indeterminate' property
+  //        if(el && el.checked && ('indeterminate' in el)){
+  //           // Set visual state of "Select all" control 
+  //           // as 'indeterminate'
+  //           el.indeterminate = true;
+  //        }
+  //     }
+  //  });  
+  //  $(".deviceTable").on('change', 'input[type="checkbox"]', function(e) {
+  //   var attendance = {
+  //     name: $(this).closest("tr").find("td:nth-child(1)")
+  //   };
+  //   console.log(attendance);
+  // });
+
+    });
+
+  }
+  selectAll(event){
+    this.changed=false
+    // console.log(event);
+    
+    if(event.target.checked){
+      for(var i=0;i<this.poiDevices.length;i++){
+      this.poiDevices[i].isTrue=true;
+      this.trackedDevices.push(this.poiDevices[i].id)
+     
+    }
+      this.notSelectedPOIArray=[];
+    }else{
+      for(var i=0;i<this.poiDevices.length;i++){
+        this.poiDevices[i].isTrue=false
+         this.notSelectedPOIArray.push(this.poiDevices[i].id)
+      }
+       
+       this.trackedDevices=[]
+    }
+    this.tabelObj.ajax.reload();
+    
+    console.log(this.notSelectedPOIArray,this.trackedDevices);
+  }
+
+   clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    //  console.log(latlngObj);
+     
+     if(this.trackedDevices.includes(latlngObj.id)){
+        latlngObj.isTrue=true;
+        cb(null, latlngObj);
+     }else{
+        latlngObj.isTrue=false;
+          cb(null, latlngObj);
+     }
+     }
+    
+   
+
+  }
+
+
+
diff --git a/src/app/gmap/gmap.component.css b/src/app/gmap/gmap.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/gmap/gmap.component.html b/src/app/gmap/gmap.component.html
new file mode 100644
index 0000000..74f618d
--- /dev/null
+++ b/src/app/gmap/gmap.component.html
@@ -0,0 +1,27 @@
+<h1 md-dialog-title>Device Id- {{data.did}}</h1>
+<div md-dialog-content>
+  <p>Matrix Input</p>
+
+        <md-form-field class="example-full-width width">
+        <input mdInput type="text"  [(ngModel)]="Matrix_Name" name="Matrix_Name" placeholder="Matrix Name">
+         </md-form-field>
+
+
+<div *ngFor="let input of inputs">
+        <md-form-field class="example-full-width width" >
+        <input mdInput [(ngModel)]="input.topic" placeholder="Topic">
+        </md-form-field>
+        <md-form-field class="example-full-width width">
+        <input style="padding-left:8%" mdInput [(ngModel)]="input.message" placeholder="Message">
+        </md-form-field>
+</div>
+<br> 
+<input type="submit" class="btn btn btn-warning" style="cursor:pointer" value="ADD Message" (click)="addInput()"   />
+<input type="submit" class="btn btn btn-success" style="cursor:pointer" value="Submit" (click)="addmatrix()"   />
+
+
+    <br>
+    
+                     
+
+</div>
diff --git a/src/app/gmap/gmap.component.ts b/src/app/gmap/gmap.component.ts
new file mode 100644
index 0000000..1e26c0f
--- /dev/null
+++ b/src/app/gmap/gmap.component.ts
@@ -0,0 +1,94 @@
+import { Component, OnInit , Inject } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import {Map} from '../map';
+import {Contact} from '../contact';
+import {ContactService} from '../contact.service';
+import { Injectable } from '@angular/core';
+import {Matrix} from '../matrix';
+import * as moment from 'moment-timezone';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+declare var google: any;
+@Component({
+  selector: 'gmap',
+  templateUrl: 'gmap.component.html',
+  styleUrls: ['gmap.component.css'],
+  providers: [ContactService]
+})
+@Injectable()
+export class GmapComponent  implements OnInit {
+
+
+    constructor( public dialogRef: MdDialogRef<GmapComponent>,
+      @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { }
+      onNoClick(): void {
+        this.dialogRef.close();
+      }
+      matrixs: Matrix[];
+      matrix: Matrix;
+      Device_ID : any;
+      Matrix_Name : any;
+      Topic : any;
+      Message : any;
+      User_ID : any;
+      mat:any;
+row:any;
+input:any;
+ontime:any;
+offtime:any;
+onn_time:any;
+offf_time:any;
+      addmatrix(){
+console.log(this.inputs)
+
+ /*    console.log(this.offtime)
+
+        const newMatrix ={
+          
+          Device_ID: this.data.did,
+          Matrix_Name: this.Matrix_Name,
+          User_ID: this.emailid,
+          Mess_Top: this.inputs,
+      
+     } 
+      console.log(newMatrix);
+       this.contactService.addmatrix(newMatrix)
+      .subscribe(matrix => {
+        this.matrixs.push(matrix);
+
+    
+      }
+       
+      )
+      this.dialogRef.close();
+      this.contactService.getmatrix( this.data.did).subscribe(
+        
+        mat_data => {
+          this.mat = mat_data 
+        }); */ 
+    
+    }
+    save(my){
+      console.log(my);
+    }
+
+      emailid:any;
+    //  aa:any;
+ 
+   
+      inputs = [{topic: '' , message: ''}];
+      addInput()  {
+        this.inputs.push({topic: '',message:''});
+      }
+    ngOnInit() {
+  
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    }   
+      
+  
+}
+
+
+
+
+
+
diff --git a/src/app/gps-master/gps-edit-master/gps-edit-master.component.html b/src/app/gps-master/gps-edit-master/gps-edit-master.component.html
new file mode 100644
index 0000000..ae6d4f0
--- /dev/null
+++ b/src/app/gps-master/gps-edit-master/gps-edit-master.component.html
@@ -0,0 +1,103 @@
+<div class="container">
+    <h1 style="text-align: center;font-size: 24px;background: #ececec;padding: 11px;">Edit User Details</h1>
+    <div class="row">
+      <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+        First Name :
+      </div>
+      <div class="col-sm-8" style="padding-right: 12%;">
+        <md-form-field class="example-full-width width" style="display: initial;">
+          <input mdInput placeholder="Enter your first name" [(ngModel)]="f_Name" type="text" name="dname" required>
+          <md-error class="pattern">Enter First Name</md-error>
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+        Last Name :
+      </div>
+      <div class="col-sm-8" style="padding-right: 12%;">
+        <md-form-field class="example-full-width width" style="display: initial;">
+          <input mdInput [(ngModel)]="l_Name" placeholder="Enter your Last name" type="text" name="dname" required>
+          <md-error class="pattern">Enter Last Name</md-error>
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row" style="padding-bottom: 16px;">
+      <div class="col-sm-4" style="margin-top: 13px;padding-left: 50px">
+        Created On :
+      </div>
+      <div class="col-sm-8" style="padding-top: 2%;padding-right: 12%;">
+        <owl-date-time [(ngModel)]="createdOn" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+    </div>
+    
+    <div class="row">
+      <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
+        Email :
+      </div>
+      <div class="col-sm-8" style="padding-right: 12%;">
+        <md-form-field class="example-full-width width" style="display: initial;">
+          <input mdInput [(ngModel)]="email" placeholder="Enter your email" type="text" name="dname" required>
+          <md-error class="pattern">Please enter email</md-error>
+        </md-form-field>
+      </div>
+    </div>
+    <!-- <div class="row">
+                <div class="col-sm-4" style="margin-top: 14px;">
+                  Email :
+                </div>
+                <div class="col-sm-8">
+                  <md-form-field class="example-full-width width" style="display: initial;">
+                    <input mdInput [(ngModel)]="email" type="number" name="dname" required>
+                    <md-error class="pattern">Phone</md-error>
+                  </md-form-field>
+                </div>
+              </div> -->
+    <div class="row">
+      <div class="col-sm-4" style="margin-top: 14px;padding-left: 50px">
+        Phone :
+      </div>
+      <div class="col-sm-8" style="padding-right: 12%;">
+        <md-form-field class="example-full-width width" style="display: initial;">
+          <input [(ngModel)]="phone" placeholder="Enter your Phone number" mdInput type="number" name="dname" required>
+          <md-error class="pattern">Phone</md-error>
+        </md-form-field>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-4" style="margin-top: 15px;padding-left: 50px">
+        <span>Dealer:</span>
+      </div>
+      <div class="col-sm-8" style="padding-right: 12%;">
+        <md-input-container style="padding-right: 12%;">
+          <input mdInput placeholder="Search Dealer" [mdAutocomplete]="tdAuto2" name="state" #state="ngModel" [(ngModel)]="dealerName"
+            (ngModelChange)="filterDealerStates(dealerName)">
+          <md-autocomplete #tdAuto2="mdAutocomplete">
+            <md-option *ngFor="let dealer of dealerSelect" [value]="dealer.dealer_firstname">
+              <span>{{ dealer.dealer_firstname }} {{ dealer.dealer_lastname }}</span>
+            </md-option>
+          </md-autocomplete>
+        </md-input-container>
+      </div>
+    </div>
+    <div class="row" style="padding-bottom: 25px;padding-top: 7px;">
+      <div class="col-sm-4" style="padding-left: 50px">
+        Dealer Status :
+      </div>
+      <div class="col-sm-2" style="padding-right: 12%;">
+        <md-slide-toggle [(ngModel)]="dealer"  ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle> 
+      </div>
+      <div class="col-sm-3" style="padding-left: 50px">
+        Superadmin
+      </div>
+      <div class="col-sm-3" style="padding-right: 12%;">
+        <md-slide-toggle [(ngModel)]="superAdmin"  ngDefaultControl (change)="onChange(superAdmin,$event)"></md-slide-toggle> 
+      </div>
+    </div>
+    <footer>
+      <div class="row" style="padding-left: 26%;">
+        <button (click)="editDetails()" style=" width: 171px;height: 43px;letter-spacing: 5px;margin-right: 6px;" class="btn btn-primary btn-block">Edit</button>
+        <button (click)="cancelEdit()" style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #ff0f0f; border: 0px;">Cancel</button>
+      </div>
+    </footer>
+</div>
diff --git a/src/app/gps-master/gps-edit-master/gps-edit-master.component.scss b/src/app/gps-master/gps-edit-master/gps-edit-master.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/gps-master/gps-edit-master/gps-edit-master.component.spec.ts b/src/app/gps-master/gps-edit-master/gps-edit-master.component.spec.ts
new file mode 100644
index 0000000..a037ed3
--- /dev/null
+++ b/src/app/gps-master/gps-edit-master/gps-edit-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GpsEditMasterComponent } from './gps-edit-master.component';
+
+describe('GpsEditMasterComponent', () => {
+  let component: GpsEditMasterComponent;
+  let fixture: ComponentFixture<GpsEditMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GpsEditMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GpsEditMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/gps-master/gps-edit-master/gps-edit-master.component.ts b/src/app/gps-master/gps-edit-master/gps-edit-master.component.ts
new file mode 100644
index 0000000..9f5c1fe
--- /dev/null
+++ b/src/app/gps-master/gps-edit-master/gps-edit-master.component.ts
@@ -0,0 +1,129 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA, MdSnackBar} from '@angular/material';
+import { ContactService } from '../../contact.service';
+@Component({
+  selector: 'app-gps-edit-master',
+  templateUrl: './gps-edit-master.component.html',
+  styleUrls: ['./gps-edit-master.component.scss']
+})
+export class GpsEditMasterComponent implements OnInit {
+f_Name:any;
+l_Name:any;
+createdOn:any;
+expOn:any;
+iconType:any;
+email:any;
+phone:any;
+os:any;
+superAdmin:any;
+dealerName:any;
+  useridd: any;
+  constructor(public dialogRef: MdDialogRef<GpsEditMasterComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService, public snackBar: MdSnackBar) {
+      console.log(data);
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.f_Name= data.userInfo?data.userInfo.first_name:"";
+      this.l_Name =data.userInfo?data.userInfo.last_name:"";
+      this.createdOn = data.userInfo.created_on?(new Date(data.userInfo.created_on).toISOString()):null;
+      this.email = data.userInfo?data.userInfo.email:"";
+      this.phone= data.userInfo?data.userInfo.phone:"";
+      this.dealer = data.userInfo?data.userInfo.isDealer:false;
+      this.superAdmin = data.userInfo.isSuperAdmin;
+     
+      if(data.userInfo.Dealer)
+      this.dealerName =data.userInfo.Dealer.first_name;    
+     }
+
+  ngOnInit() {
+    this.dealerDetail();
+  }
+
+  editDetails(){
+
+    if((this.dealer == true)&&(this.superAdmin == true)){
+      let message1="A user can only be Dealer or admin";
+      let action:any;
+      this.snackBar.open(message1, action, {
+       duration: 5000,    
+      });  
+      return
+    }
+
+    console.log(this.dealerSelect)
+    var userObj = {
+      'first_name' : this.f_Name,
+      'last_name'  : this.l_Name,
+      'phone' :this.phone,
+      'email' : this.email,
+      'created_on' : new Date(this.createdOn).toISOString(),    
+      'contactid' : this.data.userInfo._id, 
+    }
+    console.log("createdObj=>",userObj);
+    if(this.dealerSelect.length!=0){
+      userObj['Dealer'] = this.dealerSelect[0].dealer_id
+    }
+
+    if(this.dealer == true){
+      userObj['isDealer'] = this.dealer ; 
+      userObj['Dealer'] = this.data.userInfo._id;
+    }
+    if(this.superAdmin == true){
+      userObj['isSuperAdmin'] = this.superAdmin ; 
+    }
+   
+
+
+    this.contactService.editUsermaster(userObj)
+      .subscribe(res=>{
+        console.log(res);
+        if(res){
+          this.dialogRef.close("success");
+        }
+      },err=>{
+          console.log(err.status);
+      })
+  }
+
+cancelEdit(){
+  this.dealers_info=[];
+  this.dialogRef.close();
+
+}
+dealer:any;
+onChange(dealer,$event){
+
+}
+dealers_info=[];
+
+dealerDetail(){
+  this.contactService.dealer_Info_dealer_list(this.useridd)
+  .subscribe(res=>{
+    console.log(res);
+    this.dealers_info=res;
+  })
+  
+
+}
+
+dealerSelect:any=[];
+
+filterDealerStates(dlr) {
+
+  console.log(dlr);
+  if (dlr) {
+
+    const filterdealerValue:any = dlr;
+    this.dealerSelect=[];
+     this.dealerSelect = this.dealers_info.filter(function(p){
+      var t = p.dealer_firstname.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+      console.log(this.dealerSelect);
+      return this.dealerSelect;
+  }
+
+}
+}
diff --git a/src/app/gps-master/gps-master.component.html b/src/app/gps-master/gps-master.component.html
new file mode 100644
index 0000000..30a1ff5
--- /dev/null
+++ b/src/app/gps-master/gps-master.component.html
@@ -0,0 +1,134 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'System Logs' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;position: absolute;"></flash-messages>
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="gpsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:center;">{{'Device IMEI' | translate}}</th>
+                      <th style="text-align:center;">{{'Lattitude' | translate}}</th>
+                      <th style="text-align:center;">{{'Longitude' | translate}}</th>
+                      <th style="text-align:center;">{{'Speed' | translate}}</th>
+                      <th style="text-align:center;">{{'Device Time' | translate}}</th>
+                      <th style="text-align:center;">{{'Insertion Time' | translate}}</th>
+                      <th style="text-align:center;">{{'Last Push' | translate}}</th>
+                      <th style="text-align:center;">{{'Integration Respnse' | translate}}</th>
+                      <th style="text-align:center;">{{'Ignition' | translate}}</th>
+                      <th style="text-align:center;">{{'Power' | translate}}</th>
+                      <th style="text-align:center;">{{'GPS positioned' | translate}}</th>
+                      <th style="text-align:center;">{{'isFluctuation' | translate}}</th>
+                      <th style="text-align:center;">{{'isPastData' | translate}}</th>
+                      <th style="text-align:center;">{{'Ext. Volt.' | translate}}</th>
+                      <th style="text-align:center;">{{'Fuel Volt.' | translate}}</th>
+                      <th style="text-align:center;">{{'Fuel Value (L)' | translate}}</th>
+                      <th style="text-align:center;">{{'Raw Data' | translate}}</th>
+                      <th style="text-align:center;">{{'AC' | translate}}</th>
+                      <th style="text-align:center;">{{'Powercut Alarm' | translate}}</th>
+                      <th style="text-align:center;">{{'Sattelite' | translate}}</th>       
+                      <th style="text-align:center;">{{'Delete' | translate}}</th>     
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <p class="headStyle">{{'System Logs' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-5" style="padding-left: 75px;">
+        <md-input-container>
+          <input mdInput placeholder="Search by vehicle name" [mdAutocomplete]="tdAuto1" name="state" 
+          #state="ngModel" [(ngModel)]="deviceName1"
+          (ngModelChange)="filterDevices1(deviceName1)">
+         <md-autocomplete #tdAuto1="mdAutocomplete">
+           <md-option *ngFor="let device1 of deviceSelect1" [value]="device1.viewValue" >
+            <span>{{device1.viewValue}}</span>
+          </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+          <md-input-container style="margin-left: 21px;">
+          <input mdInput placeholder="Search by vehicle no." [mdAutocomplete]="tdAuto" name="state" 
+          #state="ngModel" [(ngModel)]="deviceName"
+          (ngModelChange)="filterDevices(deviceName)">
+         <md-autocomplete #tdAuto="mdAutocomplete">
+           <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+            <span>{{device.viewValue}}</span>
+          </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2" style="padding-left: 65px;padding-top:17px;">
+          <button md-raised-button style="background-color:#3e3737;color:white;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'FIND' | translate}}</button>       
+        </div>
+    </div>
+  </div>
+
+  <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+  <table id="gpsTable" class="display" style="width:100%;font-size:15px;text-align: center;">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device IMEI' | translate}}</th>
+            <th style="text-align:center;">{{'Lattitude' | translate}}</th>
+            <th style="text-align:center;">{{'Longitude' | translate}}</th>
+            <th style="text-align:center;">{{'Speed' | translate}}</th>
+            <th style="text-align:center;">{{'Device Time' | translate}}</th>
+            <th style="text-align:center;">{{'Insertion Time' | translate}}</th>
+            <th style="text-align:center;">{{'Last Push' | translate}}</th>
+            <th style="text-align:center;">{{'Integration Respnse' | translate}}</th>
+            <th style="text-align:center;">{{'Ignition' | translate}}</th>
+            <th style="text-align:center;">{{'Power' | translate}}</th>
+            <th style="text-align:center;">{{'Ext. Volt.' | translate}}</th>
+            <th style="text-align:center;">{{'Fuel Volt.' | translate}}</th>
+            <th style="text-align:center;">{{'Fuel Value (L)' | translate}}</th>
+            <th style="text-align:center;">{{'Raw Data' | translate}}</th>
+            <th style="text-align:center;">{{'AC' | translate}}</th>
+            <th style="text-align:center;">{{'Powercut Alarm' | translate}}</th>
+            <th style="text-align:center;">{{'Sattelite' | translate}}</th>       
+            <th style="text-align:center;">{{'Delete' | translate}}</th>       
+        </tr>
+    </thead>
+</table>
+</div>
+
+ -->
diff --git a/src/app/gps-master/gps-master.component.scss b/src/app/gps-master/gps-master.component.scss
new file mode 100644
index 0000000..c80b458
--- /dev/null
+++ b/src/app/gps-master/gps-master.component.scss
@@ -0,0 +1,86 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 350px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
diff --git a/src/app/gps-master/gps-master.component.spec.ts b/src/app/gps-master/gps-master.component.spec.ts
new file mode 100644
index 0000000..3172355
--- /dev/null
+++ b/src/app/gps-master/gps-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GpsMasterComponent } from './gps-master.component';
+
+describe('GpsMasterComponent', () => {
+  let component: GpsMasterComponent;
+  let fixture: ComponentFixture<GpsMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GpsMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GpsMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/gps-master/gps-master.component.ts b/src/app/gps-master/gps-master.component.ts
new file mode 100644
index 0000000..9f532e0
--- /dev/null
+++ b/src/app/gps-master/gps-master.component.ts
@@ -0,0 +1,408 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from './../contact.service';
+
+declare var $: any, DataTable: any;
+import * as moment from 'moment';
+
+import { MdDialog } from '@angular/material';
+import { GpsEditMasterComponent } from './gps-edit-master/gps-edit-master.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+
+@Component({
+  selector: 'app-gps-master',
+  templateUrl: './gps-master.component.html',
+  styleUrls: ['./gps-master.component.scss']
+})
+export class GpsMasterComponent implements OnInit {
+  Fromdate=new Date();
+  todate=new Date();
+  tabelObj: any;
+  emailid: any;
+  useridd: any;
+  option: any;
+  supadm: any;
+  deviceObjwithName: any=[];
+  deviceSelect1: any=[];
+  
+  identifier:String='gps_master';
+  Load: boolean;
+  super_admin : any;
+  isDealer: any;
+  dlrID: any;
+  constructor(public contactService: ContactService,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+    this.Fromdate.setHours(0, 0, 0);
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.isDealer = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isDealer;
+    if(this.isDealer == true){
+      this.dlrID = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._id
+  }
+   
+  }
+
+  ngOnInit() {
+    // this.getAllDevice();
+    this.testTable();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+  }
+
+
+  testTable() {
+    //console.log("initId=>",id);
+    console.log('Inside testTable');
+    const that = this;
+    $(document).ready(function () {
+      that.tabelObj = $('#gpsTable').DataTable({
+        "serverSide": true,
+        "processing": true,
+        "searching": false,
+        "scrollX": true,
+        "scrollY": "480px",
+        "scrollCollapse": true,
+        "responsive" :true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters: any, callback) => {
+          console.log('inside ajax call');
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+
+
+          // console.log(dataTablesParameters);
+          // console.log("callback", callback);
+
+          // dataTablesParameters.find = {
+          //   _id: that.useridd         
+          // };
+          dataTablesParameters.columns = [
+            {data : "_id"},
+            { data: "imei" },
+            { data: "date" },
+            { data: "latDecimal" },
+            { data: "longDecimal" },
+            { data: "insertionTime" },
+            {data : 'syncedAt'},
+            {data : 'integrationResponse'},            
+            { data: "speed" },
+            {data:"ac"},
+            {data : "currentFuel"},
+            {data  : "raw"},
+            { data: "ignition" },
+            { data: "power" },
+            {data : "fuelVoltage"},
+            { data: "external_Battery" },
+            { data: "powerCutAlarm" },
+            { data: "satellites" },
+            {data:'GPS positioned'},
+            {data:'isFluctuation'},
+            {data:'isPastData'},
+          ]
+
+       
+            //  dataTablesParameters.find.supAdmin = that.useridd;
+         
+
+          if (that.deviceArr.length !=0) {
+            // console.log(that.deviceSelect[0].id);
+            dataTablesParameters.find.imei =that.deviceArr[0];
+          }
+
+        
+          if (that.Fromdate) {
+            console.log('that.Fromdate',that.Fromdate.toISOString());
+            dataTablesParameters.find['insertionTime'] = dataTablesParameters.find['insertionTime'] ? dataTablesParameters.find['insertionTime'] : {};
+            dataTablesParameters.find['insertionTime']['$gte'] = {
+              _eval: 'date',
+              value: new Date(that.Fromdate).toISOString()
+            }
+          };
+          // }
+          if (that.todate) {    
+            that.todate.setSeconds(0);
+            that.todate.setMilliseconds(0);
+            console.log('that.todate',that.todate.toISOString())
+
+            dataTablesParameters.find['insertionTime'] = dataTablesParameters.find['insertionTime'] ? dataTablesParameters.find['insertionTime'] : {};
+            dataTablesParameters.find['insertionTime']['$lte'] = {
+              _eval: 'date',
+              value: new Date(that.todate).toISOString()
+            };
+          }
+
+
+
+          // if(this.supadm){
+          //   dataTablesParameters.find.supAdmin = that.useridd;
+          // }
+
+          var suburl = "";
+          suburl += "/gps/datatable";
+          // console.log(suburl);
+          // console.log(dataTablesParameters);
+          // console.log(suburl)
+      //   if(id != 0)
+            console.log('calling api');
+        that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+          callback(resp);
+        }, err => {
+          // console.log(err);
+          // console.log(err.status);
+          callback({data:[]})
+        });
+    
+         
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){                    
+          $('#delete', row).bind('click', () => {    
+            // console.log("delete Method",data);
+            var gpsId = data._id;
+            that.contactService.deletegpsdata(gpsId)
+              .subscribe(res=>{
+                // console.log(res);
+                that._flashMessagesService.show("Data Deleted", { cssClass: 'alert-warning', timeout: 2000 });
+                that.callfunction();
+              },err=>{
+                that._flashMessagesService.show("Internal server error", { cssClass: 'alert-warning', timeout: 2000 });
+                // console.log(err);
+              })    
+          });
+          },
+
+        "columns": [
+          {
+            "data": "imei",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "latDecimal",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "longDecimal",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "speed",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "date",
+            "render": function (data, type, row) {
+
+              var device_time = new Date(data);
+              return data ? (moment(device_time).format('dddd,ll,LTS')) : "";
+            }
+          },
+          {
+            "data": "insertionTime",
+            "render": function (data, type, row) {
+              var created_time = new Date(data);
+              return data ? (moment(created_time).format('dddd,ll,LTS')) : "";
+            }
+          },
+          {
+            "data": "syncedAt",
+            "render": function (data, type, row) { 
+              var insertion_time = new Date(data);
+              return data ? (moment(insertion_time).format('dddd,ll,LTS')) : "";
+            }
+          }, 
+          {
+            "data": "integrationResponse",
+            "render": function (data, type, row) {
+              if(data)
+              // alert(data);
+              console.log(typeof(data));
+              if(typeof(data) === 'object'){
+                data = JSON.stringify(data);
+
+              }
+              return data ? data: "";
+            }
+          },      
+          {
+            "data": "ignition",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "power",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+           {
+            "data": "GPS positioned",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "isFluctuation",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "isPastData",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "external_Battery",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "fuelVoltage",
+            "render": function (data, type, row) {
+              return data ? (data/1000).toFixed(2) : ""
+            }
+          },
+          {
+            "data": "currentFuel",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            }
+          },
+          {
+            "data": "raw",
+            "render": function (data, type, row) {
+              return data ? data : "" ; 
+            }
+          },
+          {
+            "data": "ac",
+            "render": function (data, type, row) {
+              return data ? data : ""
+            } 
+          },
+          {
+            "data": "powerCutAlarm",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "satellites",
+            "render": function (data, type, row) {
+              return data ? data : "";
+            }
+          },
+          {
+            "data":null,"render":function(data,type,row){
+            return '<i id="delete" class="fas fa-trash" style="cursor:pointer;color:red", title="Delete log"></i>'
+        }}    
+        ],
+        "columnDefs": [
+    
+          { width: '20px', targets: ['15'] } 
+        ]
+      });
+    });
+
+  }
+
+  deviceObj=[];
+
+
+
+deviceSelect:any=[];
+deviceName:any;
+deviceName1:any;
+
+  deviceArr=[];
+  data_descip:any;
+
+  getReport(event){  
+    this.deviceArr=[];
+    console.log("inside function",event);
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      var Fromdate = fd.toISOString();
+      var todate = td.toISOString();
+ 
+      var diff = moment(todate).diff(Fromdate, 'days')
+      // console.log(diff,"999999999");
+      
+      if(diff>=31){
+         console.log('difference :' + diff)
+          this.data_descip = 'Report is unavailable for more than a month';
+          launch_toast();
+
+      }else{
+      if(event.deviceId.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceId;
+      }
+      this.deviceArr = deviceId;   
+      this.Fromdate = fd;
+      this.todate = td;
+       this.tabelObj.ajax.reload();  
+      }
+    }
+   
+    function launch_toast() {
+    // console.log(divid);
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+  }
+  
+}
+
+
+  tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#gpsTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+  
+}
diff --git a/src/app/gps.ts b/src/app/gps.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/graph.ts b/src/app/graph.ts
new file mode 100644
index 0000000..06c1694
--- /dev/null
+++ b/src/app/graph.ts
@@ -0,0 +1,4 @@
+export class Graph{
+    _id?: string;
+  x: string;
+}
\ No newline at end of file
diff --git a/src/app/group/group.component.html b/src/app/group/group.component.html
new file mode 100644
index 0000000..998b2c7
--- /dev/null
+++ b/src/app/group/group.component.html
@@ -0,0 +1,91 @@
+
+
+<app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+        <p style="text-align: center;font-size: 22px;font-weight: 500;color:#797676;margin-bottom:4px">{{'Groups' | translate}}</p>
+        <div class="addStyle">
+            <md-icon style="margin-left:15px; cursor: pointer;" (click)="addGroupComponent()">add</md-icon>
+        </div>
+    
+    
+        <div style="width:100%; text-align: center;" class="row">
+            <div class="cardStyle col-xl-3 col-lg-3 col-md-4 col-sm-6 col-12" style="width:100%;" *ngFor="let group of groups" (mouseenter)="showGroupOptions(group)"
+                (mouseleave)="hideGroupOptions(group)">
+                <!-- <div class="row"> -->
+                <!-- <div > -->
+                <md-card>
+                    <md-card-content>
+    
+    
+                        <!-- Version 3 -->
+                        <span *ngIf="group.isShowGroupOptions">
+                            <md-icon (click)="editGroupById(group._id)" style="position: absolute;
+     top: 10px;
+     right: 40px;
+     cursor: pointer;">edit</md-icon>
+                            <md-icon style="margin-left:15px; cursor: pointer" (click)="deletegroup(group._id)" style="position: absolute;
+     top: 10px;
+     right: 10px;
+     cursor: pointer;">delete</md-icon>
+                        </span>
+                        <div *ngIf="group.t">
+    
+    
+                            <canvas baseChart width="200" height="200" [data]="group.statusCount" [chartType]="doughnutChartType" [labels]="group.statusList"
+                                [options]="options">
+                                <!-- (chartHover)="chartHovered($event)"
+     (chartClick)="chartClicked($event)" -->
+                            </canvas>
+                            <div style="position: sticky;
+     margin-top: -60%;
+     cursor: pointer;
+     margin-bottom: 35%;
+     margin-left: 25%;
+     margin-right: 25%;" (click)="showVehiclesByGroup(group)">
+                                <p style=" text-align: center;
+     font-weight: 500;
+     margin-bottom: 0px;
+     color: #6191d7;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     margin: 5px 0px -5px 0px;" md-tooltip="{{group.name}}"> {{group.name}}
+                                </p>
+                                <p style="text-align:center;font-size:15px;" md-tooltip="{{group.totalCount}}">{{group.totalCount}}</p>
+                            </div>
+                        </div>
+    
+                        <div *ngIf="!group.t" style="width: 200px;
+     height: 200px;
+     border: 25px solid #e5e5e5;
+     border-radius: 50%;
+     text-align: center;
+     display: inline-block;">
+                            <div style="position: sticky;
+     cursor: pointer;
+     margin-top:35%;
+     margin-bottom: 35%;
+     margin-left: 25%;
+     margin-right: 25%;" (click)="showVehiclesByGroup(group)">
+                                <p style=" text-align: center;
+     font-weight: 500;
+     margin-bottom: 0px;
+     color: #6191d7;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     margin: 5px 0px -5px 0px;" md-tooltip="{{group.name}}"> {{group.name}}
+                                </p>
+                                <p style="text-align:center;font-size:15px;" md-tooltip="{{group.totalCount}}">{{group.totalCount}}</p>
+                            </div>
+                        </div>
+                    </md-card-content>
+                </md-card>
+                <!-- </div> -->
+                <!-- </div> -->
+            </div>
+        </div>
+    
+    
+</div>
+  
\ No newline at end of file
diff --git a/src/app/group/group.component.scss b/src/app/group/group.component.scss
new file mode 100644
index 0000000..e29f0f0
--- /dev/null
+++ b/src/app/group/group.component.scss
@@ -0,0 +1,739 @@
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+
+  
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  ::-webkit-scrollbar {
+    display: none;
+    }
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+    /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+.close-thik:after {
+    content: '✖'; /* UTF-8 symbol */
+    position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+  }
+  [data-tooltip] {
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+  }
+  
+  /* Hide the tooltip content by default */
+  [data-tooltip]:before,
+//   [data-tooltip]:after {
+//     visibility: hidden;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+//     opacity: 0;
+//     pointer-events: none;
+//   }
+  
+  /* Position tooltip above the element */
+  [data-tooltip]:before {
+    position: absolute;
+    bottom: 110%;
+    left: 50%;
+    margin-bottom: -5px;
+    margin-left: -40px;
+    padding: 7px;
+    width: 100px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #000;
+    background-color: hsla(0, 0%, 20%, 0.9);
+    color: #fff;
+    content: attr(data-tooltip);
+    text-align: center;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+  
+  /* Triangle hack to make tooltip look like a speech bubble */
+  [data-tooltip]:after {
+    position: absolute;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    border-top: 5px solid #000;
+    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+  }
+  
+  /* Show tooltip content on hover */
+  [data-tooltip]:hover:before,
+//   [data-tooltip]:hover:after {
+//     visibility: visible;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+//     opacity: 1;
+//   }
+  button3 {
+    background-color: Transparent;
+    background-repeat:no-repeat;
+    border: none;
+    cursor:pointer;
+    overflow: hidden;
+    outline:none;
+}
+.icon-bar {
+    width: 17%;
+    background-color: #18262F;
+    margin-top: -9px;
+    height: 100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 297px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+@media screen and (max-width: 900px) {
+    .icon-bar{
+        display: none;
+        
+    }
+    .sch{
+        display: none;
+    }
+    .first{
+        width:1%!important;
+    }
+    .second{
+        margin-left: 8px!important;
+    }
+    .small{
+        display: block!important;
+    }
+    .image{
+        display: none;
+    }
+    .schlar{
+        display: block!important;
+    }
+}
+.small{
+    display: none;
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+#d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+#ac{
+    color: rgb(38, 38, 90)
+}
+#contact {
+    top: 200px;
+    background-color: #555
+}
+#active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+.overlay {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0, 0.9);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.overlay-content {
+    position: relative;
+    top: 25%;
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.overlay a {
+    padding: 8px;
+    text-decoration: none;
+    font-size: 36px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+.overlay a:hover, .overlay a:focus {
+    color: #f1f1f1;
+}
+
+.overlay .closebtn {
+    position: absolute;
+    top: 20px;
+    right: 45px;
+    font-size: 60px;
+}
+
+@media screen and (max-height: 450px) {
+  .overlay a {font-size: 20px}
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+agm-map {
+    height: 300px;
+  }
+
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+.mat-slide-toggle-thumb-container {
+    z-index: auto !important;
+}
+
+.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+    z-index:auto!important;
+    
+}
+.mat-menu-panel.mat-menu-before.mat-menu-below{
+    overflow: hidden !important;
+}
+.mat-menu-panel.my-full-width-menu {
+    max-width: none;
+    width: 100vw;
+    margin-left: -8px;
+    margin-top: 24px;
+  }
+  .menu-overflow-hidden {
+    overflow: hidden !important;
+  }
+  
+/* Notification */
+#nav{list-style:none;margin: 0px;padding: 0px;}
+#nav li {
+float: right;
+margin-right: 20px;
+font-family: Arial;
+font-size: 14px;
+font-weight:bold;
+}
+#nav li a{color:#333333;text-decoration:none}
+#nav li a:hover{color:#1788c0;text-decoration:none}
+
+
+#notification_li
+{
+position:relative
+}
+#notificationContainer 
+{
+background-color: #fff;
+border: 1px solid rgba(100, 100, 100, .4);
+-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+overflow: visible;
+position: absolute;
+top: 30px;
+margin-left: -170px;
+width: 400px;
+z-index: -1;
+display: none;
+}
+
+#notificationContainer:before {
+content: '';
+display: block;
+position: absolute;
+width: 0;
+height: 0;
+color: transparent;
+border: 10px solid black;
+border-color: transparent transparent white;
+margin-top: -20px;
+margin-left: 188px;
+}
+#notificationTitle
+{
+font-weight: bold;
+padding: 8px;
+font-size: 13px;
+background-color: #ffffff;
+position: fixed;
+z-index: 1000;
+width: 384px;
+border-bottom: 1px solid #dddddd;
+
+}
+#notificationsBody
+{
+padding: 33px 0px 0px 0px !important;
+min-height:300px;
+}
+
+
+.addStyle{
+     
+    // border-top: 1px solid #d6d6d6;
+    border-bottom: 1px solid #d6d6d6; 
+    padding-top: 7px;
+    padding-bottom: 8px;
+   
+}
+
+
+#notificationFooter
+{
+/* 
+    font-weight: bold;
+    padding: 8px;
+    font-size: 13px;
+    background-color: #ffffff;
+    position: fixed;
+    z-index: 1000;
+    width: 384px;
+    border-bottom: 1px solid #dddddd; */
+
+background-color: #e9eaed;
+text-align: center;
+font-weight: bold;
+z-index: 1000;
+padding: 8px;
+font-size: 13px;
+border-top: 1px solid #dddddd;
+}
+
+
+.cardStyle{
+    display: inline-block;
+    padding:5px;
+}
+
+
+
+#notification_count 
+{
+padding: 3px 7px 3px 7px;
+background: #cc0000;
+color: #ffffff;
+font-weight: bold;
+margin-left: 77px;
+border-radius: 9px;
+-moz-border-radius: 9px; 
+-webkit-border-radius: 9px;
+position: absolute;
+margin-top: -11px;
+font-size: 11px;
+}
+
+
+/deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+}
+
+  
+/deep/ .mat-menu-panel.test_1{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff; 
+    margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/group/group.component.spec.ts b/src/app/group/group.component.spec.ts
new file mode 100644
index 0000000..c982376
--- /dev/null
+++ b/src/app/group/group.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupComponent } from './group.component';
+
+describe('GroupComponent', () => {
+  let component: GroupComponent;
+  let fixture: ComponentFixture<GroupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GroupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/group/group.component.ts b/src/app/group/group.component.ts
new file mode 100644
index 0000000..0ac1a62
--- /dev/null
+++ b/src/app/group/group.component.ts
@@ -0,0 +1,428 @@
+import { Component, OnInit } from '@angular/core';
+import {ContactService} from '../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { AddGroupComponent } from '../add-group/add-group.component';
+import { EditGroupComponent } from '../edit-group/edit-group.component';
+import { DeleteGroupComponent } from '../delete-group/delete-group.component';
+
+
+@Component({
+ selector: 'app-group',
+ templateUrl: './group.component.html',
+ styleUrls: ['./group.component.scss']
+})
+export class GroupComponent implements OnInit {
+
+ icon: string;
+ dev: any;
+
+ constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { 
+ 
+
+ }
+ before:any;
+ logoutbut:boolean;
+ cust:boolean=false;
+ logo:any;
+ text:any;
+ fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+ showImage:any;
+ groups=[];
+ group_info:any;
+
+ deviceId:any;
+ device_update:any;
+ superAdmin:Boolean = false;
+
+ statusList = ['ASSIGNED','LOADING','TRANSIT','UNLOADING','UNASSIGNED'];
+ statusArr:any=[0,0,0,0,0];
+ total:any = 0;
+ t:any=0;
+ public doughnutChartType:string = 'doughnut';
+
+ options = { 
+ legend: {
+ display: false
+ },
+ cutoutPercentage: 75
+ };
+ 
+ ngOnInit() {
+ 
+ this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+ this.logo=window.localStorage['logo'];
+ this.text=window.localStorage['text']; 
+ window.localStorage['DataUpdate'] = 'True'
+ 
+ 
+ this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+ this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+ this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+ this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+ this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+ this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+ 
+ this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+ //this.getdev();
+ if(this.custtype == true){
+ this.cust = true;
+ } 
+ let foods = [ ];
+ 
+ if(this.mb.charAt(0)=="n"){
+ this.mb = ' '
+ }
+ if( window.localStorage['Custumer'] == 'ON'){
+ this.logoutbut = false
+ this.dealer = true
+ }
+ else{
+ this.logoutbut = true
+ }
+ this.getGroupWithStatus();
+ }
+
+ mydealer(){
+//  console.log('Dealer')
+ }
+ delDev:any
+ deletegroup(devId){
+//  console.log(devId);
+ 
+
+ let dialogRef = this.dialog.open(DeleteGroupComponent, {
+ height:'300px',
+ width:'430px',
+ 
+ data: {devId}
+ });
+ 
+ dialogRef.afterClosed().subscribe(result => {
+ 
+//  console.log(result);
+ if(result=="success"){
+ this.getGroupWithStatus();
+ }else if(result=="Cancel"){
+//  console.log("close dialog only");
+ }
+ });
+
+
+ }
+
+ myaccount(){
+
+ 
+ this.cond = false
+ this.router.navigateByUrl("accountSettings");
+ 
+ 
+ 
+ // let dialogRef = this.dialog.open(MyaccountComponent, {
+ // width: '903px',
+ // data: {}
+ // });
+ 
+ // dialogRef.afterClosed().subscribe(result => {
+ 
+ // if(result == "succ"){
+ // console.log("Updated")
+ // }
+ 
+ // });
+ 
+ 
+ }
+ addcus(){
+ this.router.navigateByUrl("add");
+ }
+ geo(){
+ this.router.navigateByUrl("geofencing");
+ 
+ }
+
+openNav() {
+ /* document.getElementById("myNav").style.width = "100%";
+*/
+ this.router.navigateByUrl("location");
+
+}
+
+
+vehicleRoute(){
+ this.cond = false
+ this.router.navigateByUrl("vehicleRoute");
+
+}
+
+route_map(){
+ this.router.navigateByUrl("routeMapping");
+
+}
+
+notification(){
+ this.cond = false
+ this.router.navigateByUrl("notifications");
+}
+
+dealerInfo(){
+ this.cond = false
+ this.router.navigateByUrl("dealerInfo");
+}
+
+logout(){
+ window.localStorage.clear();
+ this.router.navigateByUrl("login");
+}
+devi(){
+ this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+ this.router.navigateByUrl("const?_i="+window.localStorage.token);
+ 
+}
+new(){
+ this.router.navigateByUrl("new");
+ 
+}
+
+group(){
+ this.cond = false
+ this.router.navigateByUrl("group_view");
+}
+
+
+cond:Boolean = false;
+point : any = 0;
+ aa(){
+//  console.log(this.point);
+ if(this.point == 0){
+ this.cond = true;
+ this.point ++;
+ }
+ else if(this.point % 2 == 0){
+ this.cond = true;
+ this.point ++;
+ }
+ else{
+ this.cond = false
+ this.point ++;
+ }
+
+ 
+}
+report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report");
+
+}
+routeViolation(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/routeViolation");
+
+}
+report_speed(){
+//  console.log("report speed call")
+ this.cond = false
+ this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+
+alert_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+summaryReport(){
+
+ this.cond = false
+ this.router.navigateByUrl("device-report/summary-report");
+}
+
+overspeed(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/overspeed");
+
+}
+stoppage_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+ignition_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+geofancingReport(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+driverPerformance(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/Driver-performance");
+}
+
+
+
+distance_report(){
+this.cond = false
+this.router.navigateByUrl("device-report/distance_report");
+}
+
+trip_report(){
+ this.cond = false
+ this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+getGroupWithStatus(){
+ this.groups = [];
+ this.contactService.getGroupWithStatus(this.useridd).subscribe( 
+ res => {
+//  console.log(res);
+ 
+ this.group_info = res;
+ for(var i = 0;i<this.group_info.length;i++) {
+ let group_logs = this.group_info[i];
+ let _id = group_logs._id.Groupid;
+ let group_name = group_logs._id.GroupName.toUpperCase();
+ let statusListArr = group_logs.TripStatus ? group_logs.TripStatus : [];
+ this.total = 0;
+ this.t=0;
+ this.statusArr = [0,0,0,0,0];
+ for(var j=0;j<statusListArr.length;j++){
+ var index = this.statusList.indexOf( statusListArr[j].Status);
+ if(index>-1){
+ this.statusArr[index] = (statusListArr[j].Count);
+ this.t += statusListArr[j].Count;
+ }
+ this.total += statusListArr[j].Count;
+ }
+
+if(this.total==0){
+    this.total = "No Device";
+    // console.log("totalDevice=>",this.total)
+}
+
+ this.groups.push({
+ "_id":_id,
+ "name":group_name,
+ "statusCount" : this.statusArr,
+ "totalCount" : this.total,
+ "statusList" : this.statusList,
+ "t":this.t,
+ "isShowGroupOptions":false
+ })
+//  console.log("group");
+//  console.log(this.groups);
+ }
+//  console.log(this.groups);
+ },
+ err=> {
+//  console.log("Check your Internet Connection");
+ });
+}
+
+addGroupComponent(){
+ let dialogRef = this.dialog.open(AddGroupComponent, {
+ height:'300px',
+ width:'430px',
+ 
+ data: {}
+ });
+
+ dialogRef.afterClosed().subscribe(result => {
+ 
+//  console.log(result);
+ if(result=="success"){
+ this.getGroupWithStatus();
+
+ }else if(result=="Cancel"){
+//  console.log("close dialog only");
+ }
+ });
+}
+
+
+
+editgroupComponent(group){
+
+
+
+ 
+ 
+ 
+ // var _id = group._id.Groupid;
+ // var name = group._id.GroupName;
+ 
+ 
+ let dialogRef_1 = this.dialog.open(EditGroupComponent, {
+ height:'300px',
+ width:'430px',
+ data: group
+ });
+
+
+ dialogRef_1.afterClosed().subscribe(result => {
+ 
+//  console.log(result);
+ if(result=="success"){
+ this.getGroupWithStatus();
+ }else if(result=="Cancel"){
+//  console.log("close dialog only");
+ }
+ });
+}
+
+showVehiclesByGroup = function(group){
+
+ group.dataSource = "GROUPS";
+ this.contactService.setService(group);
+ this.router.navigateByUrl("const?_i="+window.localStorage.token);
+}
+
+Ddetail(){
+ this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+ this.router.navigateByUrl("deviceModel");
+}
+VType(){
+ this.router.navigateByUrl("VehicleType");
+}
+
+showGroupOptions(group){
+
+ group.isShowGroupOptions = true;
+}
+
+hideGroupOptions(group){
+
+ group.isShowGroupOptions = false;
+}
+
+editGroupById(groupId){
+
+ this.contactService.getGroupById(groupId).subscribe( 
+ res => {
+//  console.log(res);
+ this.editgroupComponent(res[0]);
+ },
+ err=> {
+//  console.log("Check your Internet Connection");
+ });
+}
+
+
+
+}
\ No newline at end of file
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
new file mode 100644
index 0000000..8a24f00
--- /dev/null
+++ b/src/app/home/home.component.css
@@ -0,0 +1,234 @@
+/* .ng-valid[required], .ng-valid.required {
+  border-left: 5px solid #42A948;
+} */
+
+ /*  .ng-invalid:not(form){
+      border-left: 5px solid #a94442;
+  }
+ */
+
+ #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+  html,body{
+	height:100%;
+ }
+ .text_bg{
+	color: black;
+	opacity: .8;
+	text-decoration-color: whitesmoke;
+ }
+ .width{
+	 width:100%
+ }
+ .background-image2{
+	width: 100%;
+	height: 331px;
+
+/* 	max-height: 100%;
+	margin: -16px;
+	padding: 0; */
+	background-image: url('../../assets/image/bg_content.png');
+	background-size: 100%;
+	background-repeat: no-repeat;
+  }
+  table {
+    border-collapse: collapse;
+}
+
+td {
+    padding-top: .5em;
+    padding-bottom: .5em;
+}
+.container{
+  
+    position:relative;
+    }
+  .car {
+      position: absolute;
+      z-index: 1;
+     /*  top: 306px; */
+      right:-50px;
+      animation:run 10s infinite linear;
+  }
+  .car2 {
+    /*   top: 354px; */
+    right:50px;
+        -webkit-animation-duration: 15s; 
+      animation-duration: 15s;
+  }
+  .car-body img{width:200px;}
+  .tair{
+    position:absolute;
+  }.tair img{width:40px;animation:rotate 3s infinite linear;position:relative;}
+  .tair1{  
+    left:35px;
+    top:106px;
+  }
+  .tair2{  
+    left:128px;
+    top:106px;
+  }
+  @keyframes rotate{
+    100% {transform: rotate(-360deg);}
+  }
+  
+  @keyframes run{
+    100% {transform:translateX(-1200px);}
+  }
+ .background-image{
+	width: 100%;
+	height: 328px;
+
+/* 	max-height: 100%;
+	margin: -16px;
+	padding: 0; */
+	background-image: url('../../assets/image/bg-c.jpg');
+	background-size: 100%;
+	/* background-repeat: no-repeat; */
+  }
+ .carousel,.item,.active{
+	height:100%;
+  }
+ .carousel-inner{
+	 height:100%;
+ }
+.arrows {
+	width: 60px;
+	height: 72px;
+	position: absolute;
+	left: 50%;
+	margin-left: -30px;
+	bottom: 20px;
+}
+
+.arrows path {
+	stroke: black;
+	fill: transparent;
+	stroke-width: 1px;	
+	animation: arrow 1s infinite;
+	-webkit-animation: arrow 2s infinite; 
+}
+
+@keyframes arrow
+{
+0% {opacity:0}
+40% {opacity:1}
+80% {opacity:0}
+100% {opacity:0}
+}
+
+@-webkit-keyframes arrow /*Safari and Chrome*/
+{
+0% {opacity:0}
+40% {opacity:1}
+80% {opacity:0}
+100% {opacity:0}
+}
+
+.arrows path.a1 {
+	animation-delay:-1s;
+	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
+}
+
+.arrows path.a2 {
+	animation-delay:-0.5s;
+	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
+}
+
+.arrows path.a3 {	
+	animation-delay:0s;
+	-webkit-animation-delay:0s; /* Safari 和 Chrome */
+}
+
+.arrows path.a4 {	
+	animation-delay:0s;
+	-webkit-animation-delay:0s; /* Safari 和 Chrome */
+}
+
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..590bf6f
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,275 @@
+<html>
+  <body class="home" >
+    
+<!--     <div class="app-content"> -->
+      
+       <!--  <md-card style="width: 100%;" >  style="height:45%"-->
+        <carousel>
+          <slide>
+            <img src="../../assets/image/track_slide_4.jpg"style="display: block; width: 100%" >
+            <div class="carousel-caption">
+             
+            </div>
+          </slide>
+                           <slide>
+                                     <img src="../../assets/image/track_slide_2.jpg" style="display: block; width: 100%" >
+                                            
+                                          </slide>
+                                       
+                                          <slide>
+                                                <img src="../../assets/image/track_slide_3.jpg"style="display: block; width: 100%" >
+                                                <div class="carousel-caption">
+                                                 
+                                                </div>
+                                              </slide>
+                                             
+                                   
+                                                
+                      </carousel>
+                      <!-- Codes by HTMLcodes.ws -->
+<!-- <div style="background:url('http://www.htmlcodes.ws/images/image-codes/repeat-image-1.gif') repeat-x;width:340px;height:240px;border:1px solid #ccc;"></div> -->
+                    <!--   <div class="road">
+                        <div class="car car1">
+                          <div class="car-body">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/car.png" alt="" />
+                          </div>
+                          <div class="tair1 tair">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/tyre.png" alt="" />
+                          </div>
+                          <div class="tair2 tair">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/tyre.png" alt="" />
+                          </div>
+                        </div>
+                        <div class="car car2">
+                          <div class="car-body">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/car3.png" alt="" />
+                          </div>
+                          <div class="tair1 tair">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/tyre.png" alt="" />
+                          </div>
+                          <div class="tair2 tair">
+                            <img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/tyre.png" alt="" />
+                          </div>
+                        </div>
+                        <div class="road">
+                            <img src="../../assets/image/road1.jpg"style="display: block;     width: 23%;  background-repeat: repeat-x" >
+                          </div> -->
+
+                    <!--     <div class="road"><img src="https://hasinhayder.github.io/CSS3-Keyframe-Transition/img/road.jpg" alt="" /></div> -->
+                      
+                     <!--  </div> -->
+                  <!--   <marquee><img src="../../assets/image/Vehicles-hp.png"style="display: block; width: 100%" >
+                    </marquee>  -->
+                    <img src="../../assets/image/Vehicles-hp.png"style="display: block; width: 100%" >
+                  <!--   --><!-- </div> -->
+                     
+
+                    <!--   <carousel>
+                            <slide>
+                              <img src="../../assets/image/c2.jpg" alt="First slide">
+                            </slide>
+                            <slide>
+                              <img src="../../assets/image/c1.jpg" alt="Second slide">
+                            </slide>
+                            <slide>
+                              <img src="../../assets/image/c2.jpg" alt="Third slide">
+                            </slide>
+                          </carousel> -->
+
+                          <!-- ...................................................... -->
+                        <!--   <div fxLayout="row" fxLayout.xs='column' flex >
+                          <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em;">
+                              <img src="../../assets/image/ic3.png" style="width: 20%;"><br>
+                              <br><h3>New to Adnate IOT</h3>
+                            <p>MQTT is a light-weight, open and scalable protocol for the Internet of Things. Near real time delivery of messages in an efficient, cost-effective way, even in unreliable networks, is where MQTT excels. Being an official ISO (ISO/IEC 20922:2016) and OASIS standard, MQTT is used in all major industries for connecting hundreds of thousands of (constrained) devices with minimal effort. </p></md-card>
+
+                            <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em">
+                                <img src="../../assets/image/ic1.png" style="width: 20%;"><br>
+                                <br><h3>Meet Adnate IOT</h3>
+                                  <p>MQTT is a light-weight, open and scalable protocol for the Internet of Things. Near real time delivery of messages in an efficient, cost-effective way, even in unreliable networks, is where MQTT excels. Being an official ISO (ISO/IEC 20922:2016) and OASIS standard, MQTT is used in all major industries for connecting hundreds of thousands of (constrained) devices with minimal effort. </p></md-card>
+
+                                  <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em"><img src="../../assets/image/ic2.png" style="width: 20%;"><br>
+                                    <br><h3>We are IOT Experts</h3>
+                                      <p>MQTT is a light-weight, open and scalable protocol for the Internet of Things. Near real time delivery of messages in an efficient, cost-effective way, even in unreliable networks, is where MQTT excels. Being an official ISO (ISO/IEC 20922:2016) and OASIS standard, MQTT is used in all major industries for connecting hundreds of thousands of (constrained) devices with minimal effort. </p></md-card>
+
+                          </div>
+ -->
+
+                          
+                          <!-- ...................................................... -->
+
+                          <div fxLayout="row" fxLayout.xs='column' flex >
+                            <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em;box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.19) 0px 1px 29px 0px">
+                                <img src="../../assets/image/live.png" style="width: 10%;"><br>
+                                <br><h3 style="font-size: 21px;">Real Time GPS Based Vechicle Tracking</h3>
+                            
+                                
+                                    <ul style="font-size: 12px;text-align: left;">
+                                      <li>Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.</li>
+                                      <li>Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.</li>
+                                      <li>User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.</li>
+                                      <li>Software as a Service(Saas) with perpetual uptime.</li>               
+                                     </ul> 
+                             </md-card>
+  
+                              <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em;box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.19) 0px 1px 29px 0px">
+                                  <img src="../../assets/image/alert2.png" style="width: 10%;"><br>
+                                  <br><h3 style="font-size: 21px;">Alerts and Event Notifications</h3>
+                                
+                                      <ul style="font-size: 12px;text-align: left;">
+                                        <li>Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.</li>
+                                        <li>Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.</li>
+                                        <li>Schedule your alerts as per your convenience that suits your needs.</li>
+                                        <li>Detailed Reports for analysis is also available for making quik decisions.</li>                </ul>                                  
+                                  </md-card>
+  
+                                 
+  
+                            </div>
+                       <div fxLayout="row" fxLayout.xs='column' flex style="margin-top: -3%;  ">
+                              <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em;box-shadow:rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.19) 0px 1px 29px 0px">
+                                  <img src="../../assets/image/geo.png" style="width: 10%;"><br>
+                                  <br><h3 style="font-size: 21px;">Geofences</h3>
+                            
+                                <ul style="font-size: 12px;text-align: left;">
+                                  <li>Upload all Geofence in your account and assign them to the vehicles.</li>
+                                  <li>Find and mark geofences without knowing latitude and longitude values.</li>
+                                  <li>Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.</li></ul>
+                             </md-card>
+    
+                                <md-card fxFlex fxFlex.lt-sm="100%" style="color:black;float:left;margin:2em 1em;box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px 0px, rgba(0, 0, 0, 0.19) 0px 1px 29px 0px;">
+                                    <img src="../../assets/image/report.png" style="width: 10%;"><br>
+                                    <br><h3 style="font-size: 21px;">Report </h3>
+                                     <ul style="font-size: 12px;text-align: left;">
+                                        <li>Date and Time Based reports available for analyzing vehicle usage.</li>
+                                        <li>Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.</li>
+                                        <li>Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).</li>
+                                        <li>Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..</li>           
+                                        <li>Geofence report, detailed report when and at what time vehicle enteredin geo  areas.</li> 
+                                           </ul></md-card>
+    
+    
+                              </div>
+
+                              <div>
+                                <hr>
+                                  <h5  align="center"style="font-size: 30px;padding-top: 0%;">How it works</h5>
+                                  <img src="../../assets/image/working.png" style="width: 100%;">
+                                  
+                              </div>
+
+<div  class="background-image">
+ <!--    <img src="../../assets/image/bg_content.png" style="width: 80%;"> -->
+ <h4 style="color: white;
+ font-size: 35px;
+ padding-top: 2%;
+ padding-left: 2%;
+ text-shadow: -1px 3px rgba(0, 0, 0, 0.75);">Functionality</h4>
+<table style="color: white;
+margin-left: 5%;
+margin-top: 1%;width: 100%; ">
+<tr style="width: 100%;font-size: 20px;text-shadow: -1px 3px rgba(0, 0, 0, 0.75);padding-bottom: 1em">
+<td style="width: 30%"> <img src="../../assets/image/live.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;Real-time tracking</td>
+<td style="width: 30%"> <img src="../../assets/image/report2.png" style="width: 5%">&nbsp;&nbsp;&nbsp;Advanced Reporting</td>
+<td style="width: 30%"><img src="../../assets/image/alert2.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;Alerts & Warning</td>
+  </tr>
+
+  <tr style="width: 100%;font-size: 20px;text-shadow: -1px 3px rgba(0, 0, 0, 0.75);">
+      <td style="width: 30%"><img src="../../assets/image/2-way-icon2.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;2-Way messaging</td>
+      <td style="width: 30%"><img src="../../assets/image/ignition.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;Engine immobilisation</td>
+      <td style="width: 30%"><img src="../../assets/image/gauge.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;Monitor gauges</td>
+   </tr>
+   
+   <tr style="width: 100%;font-size: 20px;text-shadow: -1px 3px rgba(0, 0, 0, 0.75);">
+      <td style="width: 30%"><img src="../../assets/image/geo.png" style="width: 5%;">&nbsp;&nbsp;&nbsp;Geofencing</td>
+      <td style="width: 30%"></td>
+      <td style="width: 30%"></td>
+   </tr>
+
+  </table>
+</div>
+<div fxLayout="row" fxLayout.xs='column' flex>
+  <div fxFlex fxFlex.lt-sm="100%">
+      <h5 style="font-size: 30px;padding-top: 2%;">Access anytime, anywhere!</h5>
+      <div style="padding-top:3%">
+          <img src="../../assets/image/tick.png" style="width: 3%;">&nbsp;&nbsp;&nbsp;Web browser based software<br>
+      </div>
+      <div style="padding-top:3%">
+          <img src="../../assets/image/tick.png" style="width: 3%;">&nbsp;&nbsp;&nbsp;Android app<br>
+      </div>
+      <div style="padding-top:3%">
+          <img src="../../assets/image/tick.png" style="width: 3%;">&nbsp;&nbsp;&nbsp;iPhone app<br> 
+        </div>
+        <a target="_blank" href={{android}}><img src="../../assets/image/android.png" style="width: 34%;
+        padding-top: 5%;"></a>
+        <a target="_blank" href={{iphone}}><img src="../../assets/image/iphone.png" style="width: 34%;
+          padding-top: 5%;cursor:pointer"> </a> 
+        
+    </div>
+    <div fxFlex fxFlex.lt-sm="100%">
+        <img src="../../assets/image/access.png" style="width: 100%;
+        float: right;
+        padding-top: 10%;">
+      </div> 
+
+  </div>
+  <hr>
+<div>
+ 
+    <h5 style="font-size: 30px;padding-top: 0%;">Request for Demo</h5>
+    <div id="toast"><div id="desc">{{data_descip}}</div></div>  
+    <div fxLayout="row" fxLayout.xs='column' flex>
+        <div fxFlex fxFlex.lt-sm="100%" > 
+            <md-card style="float: left;background-color: white;opacity: .8; margin-left: 10%">
+       
+
+                <form class="form-group"  #lgForm="ngForm">   
+                       <div class ="form-group" style="width: 45%;float:left">
+                            <md-form-field class="example-full-width width">
+                            <input mdInput type="text" [(ngModel)]="first_name" name="first_name"placeholder="First Name" required> 
+                            <md-error class="required">Enter First Name</md-error>
+                           </md-form-field>
+                           
+                        </div>           
+                       <div class ="form-group" style="width: 45%;float:left;padding-left:5%"> 
+                          <md-form-field class="example-full-width width">
+                              <input mdInput type="text" [(ngModel)]="last_name" name="last_name"placeholder="Last Name" required> 
+                              <md-error class="required">Enter Last Name</md-error>
+                             </md-form-field>
+                       </div>
+                    
+                      <div class ="form-group" style="width: 45%;float:left;margin-top: 0px;">
+                         <md-form-field class="example-full-width width">
+                          <input pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}"  mdInput type="text" [(ngModel)]="email"  name="email" placeholder="Email" >
+    
+                         </md-form-field>
+                     </div>
+                     <div class ="form-group" style="width: 45%;float:left;padding-left:5%">
+                         <md-form-field class="example-full-width width">
+                       <input  onkeydown="call(event)"  mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone" name="phone"placeholder="Mobile Number" >
+                           
+                         </md-form-field>
+                         </div><br>
+                         <br>
+                         <button style="float: left;cursor:pointer"  class="btn btn-success"(click)="demorequest()" style="cursor:pointer;position: absolute;
+                         left: 41%;
+                         bottom: 10px;" >Submit</button>
+                       
+    </form>
+    
+    </md-card>  
+          </div>
+          <div fxFlex fxFlex.lt-sm="100%" > 
+              
+              <img src="../../assets/image/trial.png" style="width: 71%;
+              float: left;
+              padding-top: 1%;">
+            </div>
+      </div>
+      
+
+</div>
+
+  </body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..cb851e9
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -0,0 +1,122 @@
+import { Component, OnInit } from '@angular/core';
+import { CarouselConfig } from 'ngx-bootstrap/carousel';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {ContactService} from '../contact.service';
+import { ViewChild, ElementRef } from '@angular/core';
+
+@ViewChild('submitButton') 
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css'],
+  providers: [{provide: CarouselConfig, useValue: {interval: 6050}}]
+})
+export class HomeComponent implements OnInit {
+  items: Array<any> = []
+  onSubmit(value:any){
+    // console.log(value);
+  }
+  scrolldelay:any;
+  first_name:any;
+  last_name:any;
+  email:any;
+  phone:any;
+  submitButton:ElementRef;
+  demo:any;
+  data_descip:any;
+/* hello(a){
+if(a == null){
+  return false;
+}
+else{
+  return true;
+}
+} */
+  tost1(divid){
+    if(divid == "dup_email"){
+      this.data_descip = "We will contact you soon"
+      launch_toast();
+    }
+    else if(divid == "email"){
+      this.data_descip = "Please Enter either Email ID or Mobile Number"
+      launch_toast();
+    }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+    }
+     }
+
+  ToggleButton:any;
+  dealerid:any;
+  android:any;
+  demorequest(){
+    console.log(this.email,"this.email");
+
+    if(this.email == null && this.phone == null){
+      this.tost1("email");
+    }
+    else if(this.email == undefined && this.phone == undefined){
+      this.tost1("email");
+    }
+    else{
+      
+      
+        this.contact.demo(this.first_name,this.last_name,this.email,this.phone,this.dealerid).subscribe(   
+          data => {
+            this.demo = data 
+            this.tost1("dup_email");
+            this.first_name=" ";
+            this.last_name=" ";
+            this.email=undefined;
+            this.phone=undefined;
+          });
+         
+      
+ 
+    
+    }
+
+  }
+  constructor(private router: Router,private contact: ContactService,private contactService:ContactService) { 
+/*  */
+  }
+  call(e) {
+    {
+           if (e.keyCode == 32) {
+               e.preventDefault();
+           }
+       }
+}
+userData:any;
+url:any;
+iphone:any;
+  ngOnInit() {
+
+    this.dealerid =  window.localStorage['DealerID'];
+    // console.log('dealerid',this.dealerid  );
+    // this.android =  window.localStorage['android'];
+    // // console.log(this.android)
+    // this.iphone =  window.localStorage['iphone'];
+
+    // if(window.localStorage.token){
+    //   if( window.localStorage['Custumer'] == 'ON'){
+    //     window.localStorage['token'] =  window.localStorage['Dealer_token'];
+    //     window.localStorage['Custumer'] = 'OFF'
+    //     this.router.navigateByUrl("const?_status="+"OK");
+    //   }
+    //   else{
+    //     this.router.navigateByUrl("const?_status="+"OK");
+    //   }
+     
+    // }
+    // else{
+  
+    // }
+    }
+  }
+
diff --git a/src/app/ignition-report/ignition-report.component.html b/src/app/ignition-report/ignition-report.component.html
new file mode 100644
index 0000000..297d5d0
--- /dev/null
+++ b/src/app/ignition-report/ignition-report.component.html
@@ -0,0 +1,195 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <div class="upper">
+          <md-toolbar>My App</md-toolbar>
+        <md-toolbar flex style="background-color:white;width: 100%;" >
+          
+                <img src={{this.logo}}
+                style=
+                "width:12%;padding-top:20px;">
+              <ul style="
+              padding: 30px 0% 0px 16%;
+              box-sizing: border-box;
+              flex-direction: row;
+              display: flex;
+              height: 65px;width:auto"  fxLayout="row" >
+                
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                  <a  class="pointer" (click)="soon()"><span id="ac"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 18px;">dashboard</md-icon><span >{{'DASHBOARD' | translate}}</span></span></a>
+                </li>
+                <li style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                  <a class="pointer" (click)="group()">
+                      <span id="d">
+                        <md-icon style="display: block;position: absolute;margin-left: 10px;">group</md-icon>{{'GROUPS' | translate}}</span>
+                    </a>
+                  </li>
+                <li style="line-height: 65px;width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="devi()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 8px;">devices</md-icon>{{'VEHICLES' | translate}}</span></a> 
+                </li>
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="openNav()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 13px;">my_location</md-icon>{{'TRACKER' | translate}}</span></a>
+                </li>
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="geo()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 22px;">blur_circular</md-icon>{{'GEO FENCING' | translate}}</span></a>
+                </li>
+
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" [mdMenuTriggerFor]="appMenu3"  ><span id="active"><md-icon style="display: block;position: absolute;
+                  margin-left: 13px;">report</md-icon>{{'REPORTS' | translate}}</span></a>
+                </li>
+                <li [mdMenuTriggerFor]="routeMenu" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                  <a class="pointer">
+                      <span id="d">
+                        <md-icon style="display: block;position: absolute;margin-left: 10px;">swap_calls</md-icon>ROUTES</span>
+                    </a>
+                  </li>
+                  <li *ngIf="superAdmin" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                    <a class="pointer" (click)="dealerInfo()">
+                        <span id="d">
+                          <md-icon style="display: block;position: absolute;margin-left: 10px;">supervisor_account</md-icon>DEALERS</span>
+                      </a>
+                    </li>
+                <md-menu class="test" #appMenu3="mdMenu" [y-position]="before">              
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report()" >&nbsp;&nbsp;<span id="ac"><span id="active">Daily Report</span></span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report_speed()" >&nbsp;&nbsp;<span id="d">Speed Variation</span></a>
+                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ideal()" >&nbsp;&nbsp;<span id="d">Idle</span></a> -->
+                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ign()" >&nbsp;&nbsp;<span id="d">Ignition</span></a> -->
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="trip_report()" >&nbsp;&nbsp;<span id="d">Trip Report</span></a> 
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="summaryReport()" >&nbsp;&nbsp;<span id="d">Summary Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="geofancingReport()" >&nbsp;&nbsp;<span id="d">Geofencing Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="overspeed()" >&nbsp;&nbsp;<span id="d">Overspeeding Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="routeViolation()" >&nbsp;&nbsp;<span id="d">Route Violation Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="stoppage_report()" >&nbsp;&nbsp;<span id="d">Stoppage Report</span></a> 
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ignition_report()" >&nbsp;&nbsp;<span id="d">Ignition Report</span></a>   
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="distance_report()" >&nbsp;&nbsp;<span id="d">Distance Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="alert_report()" >&nbsp;&nbsp;<span id="d">Alert Report</span></a>      
+                  </md-menu>
+                  <md-menu class="test" #routeMenu="mdMenu" [y-position]="before">              
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="vehicleRoute()" >&nbsp;&nbsp;<span id="ac"><span id="active">ROUTE LIST</span></span></a>
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="route_map()" >&nbsp;&nbsp;<span id="d">ROUTE MAPPING</span></a>
+                    </md-menu>
+                <li style="line-height:65px;width:auto;margin-left:7px;">
+                <a class="pointer" *ngIf="cust" (click)="addcus()" ><span id="d"><md-icon style="display: block;position: absolute;margin-left: 14px;">person_add</md-icon>CUSTOMER</span></a>
+                </li>
+                           </ul>
+                
+                           <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
+                     
+                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                  <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                  <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                  <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                  &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>&nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                     <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                </md-menu>
+                                
+                                <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                         
+                                   <img src="../../assets/image/us.jpg" height=24px>
+                                </button>
+                         </ul>
+                               
+                        
+                     
+                             <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                     
+                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                   <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                   <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                   <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                   &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default"  (click)="myaccount()" >My Account</button>       &nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;    
+                                      <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                 </md-menu>
+                                 
+                                 <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                
+                                    <img src="../../assets/image/us.jpg" height=24px>
+                                 </button>
+                                 <app-notification></app-notification>
+                             
+                           </ul>
+                                 
+              
+             </md-toolbar>
+        </div>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+  <div style="min-height:420px">
+    <p class="headStyle">Ignition Report</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--Select Device--"  ngDefaultControl>
+            <md-option *ngFor="let option of options" [value]="option">
+              {{ option.value }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>From Date</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>To Date</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="ignition_report(Fromdate,todate,option)">Ignition Report</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="export_to_XL(Fromdate,todate,option)">Export to excel</button>
+          </div>
+      </div>
+    </div>
+    <table class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th>On/Off</th>
+          <th>Date Time</th>
+          <th>Location</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer">{{report.switch}}</td>
+          <td style="cursor:pointer">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer">{{report.address}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/app/ignition-report/ignition-report.component.scss b/src/app/ignition-report/ignition-report.component.scss
new file mode 100644
index 0000000..5a22afb
--- /dev/null
+++ b/src/app/ignition-report/ignition-report.component.scss
@@ -0,0 +1,1025 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+  }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
diff --git a/src/app/ignition-report/ignition-report.component.spec.ts b/src/app/ignition-report/ignition-report.component.spec.ts
new file mode 100644
index 0000000..fe73a94
--- /dev/null
+++ b/src/app/ignition-report/ignition-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgnitionReportComponent } from './ignition-report.component';
+
+describe('IgnitionReportComponent', () => {
+  let component: IgnitionReportComponent;
+  let fixture: ComponentFixture<IgnitionReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IgnitionReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IgnitionReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/inactive-admin/inactive-admin.component.html b/src/app/inactive-admin/inactive-admin.component.html
new file mode 100644
index 0000000..6844084
--- /dev/null
+++ b/src/app/inactive-admin/inactive-admin.component.html
@@ -0,0 +1,64 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Inactive Admins' | translate}}</h4>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div style="width: fit-content;" class="input-group mb-3">
+            <input type="number" class="form-control" [(ngModel)]="noDays" placeholder="Enter Number of Days">
+            
+            <div class="input-group-append">
+              <button class="btn btn-primary btn-md" (click)="search()">Search</button>
+              <!-- <span class="input-group-text" id="basic-addon2">@example.com</span> -->
+            </div>
+          </div>
+          <button style="float: right;margin-top: -50px;" class="btn btn-info" (click)="exportToExcel()">Export to Excel</button>
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div>
+            <div id="toast">
+              <div id="desc">{{data_descip}}</div>
+            </div> -->
+          <!-- <div class="row" style="padding: 8px;margin-bottom: 8px;">
+            <div class="col-md-4">
+              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                <label>From</label>
+                <input id="from_date" bsDatepicker class="form-control form-control-sm" [(ngModel)]="fromDate"
+                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                <label>To</label>
+                <input id="todate" bsDatepicker class="form-control form-control-sm" [(ngModel)]="toDate"
+                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
+              </div>
+            </div>
+
+          </div> -->
+
+          <div style="width: 100%;height:84vh;">
+            <div class="loading" *ngIf="Load">Loading&#8230;</div>
+            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align:left;width:100px">{{'Name'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Mobile'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Email'|translate}} </th>
+                 
+
+                </tr>
+              </thead>
+            </table>
+
+
+          </div>
\ No newline at end of file
diff --git a/src/app/inactive-admin/inactive-admin.component.scss b/src/app/inactive-admin/inactive-admin.component.scss
new file mode 100644
index 0000000..f283bbb
--- /dev/null
+++ b/src/app/inactive-admin/inactive-admin.component.scss
@@ -0,0 +1,109 @@
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #6b6a6a;
+}
+
+.InputStyle {
+  padding: 10px;
+  padding-bottom: 20px;
+  background-color: #efefef;
+  margin-bottom: 10px;
+  .selecStyle {
+    display: inherit;
+    width: 56%;
+    padding-left: 16px;
+    margin-left: 50px;
+
+    border-radius: 10px;
+  }
+}
+
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  //   max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 150px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/inactive-admin/inactive-admin.component.spec.ts b/src/app/inactive-admin/inactive-admin.component.spec.ts
new file mode 100644
index 0000000..83187ba
--- /dev/null
+++ b/src/app/inactive-admin/inactive-admin.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InactiveAdminComponent } from './inactive-admin.component';
+
+describe('InactiveAdminComponent', () => {
+  let component: InactiveAdminComponent;
+  let fixture: ComponentFixture<InactiveAdminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InactiveAdminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InactiveAdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/inactive-admin/inactive-admin.component.ts b/src/app/inactive-admin/inactive-admin.component.ts
new file mode 100644
index 0000000..27b2913
--- /dev/null
+++ b/src/app/inactive-admin/inactive-admin.component.ts
@@ -0,0 +1,135 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+declare var moment:any;
+declare var $: any;
+@Component({
+  selector: 'app-inactive-admin',
+  templateUrl: './inactive-admin.component.html',
+  styleUrls: ['./inactive-admin.component.scss']
+})
+export class InactiveAdminComponent implements OnInit {
+noDays;
+data_descip;
+tabelObj;
+inactiveSup=[];
+Load:boolean=false
+  constructor(private contactService:ContactService) { }
+  
+  ngOnInit() {
+    this.testTable()
+  }
+
+  search(){
+     
+    console.log(this.noDays);
+    
+    if(this.noDays==null || this.noDays==undefined){
+      this.data_descip = 'Please enter number of days';
+      launch_toast()
+    }else{
+      this.Load = true;
+      var from=moment(new Date()).subtract(this.noDays, "days"); 
+      var to= new Date().toISOString()
+      console.log(from,new Date(to).toISOString());
+      
+      this.contactService.get('/users/getInactiveAdmins?from='+new Date(from).toISOString()+"&to="+to).subscribe((res:any)=>{
+        console.log(res);
+        this.inactiveSup=res;
+         this.Load = false;
+        this.tabelObj.ajax.reload();
+      })
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+  }
+
+  testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+              
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+
+            },
+             ajax: (dataTablesParameters,callback) => {
+                callback({ data: that.inactiveSup });
+           
+            },  
+      
+          "columns": [
+              {
+                  "data": "_id",
+                  "render": function(data, type, row) {                   
+                    return row.first_name?row.first_name: ''+' '+row.last_name?row.last_name: '';                  
+                  }
+              },
+               {
+                  "data": "phone",
+                  "render": function(data, type, row) { 
+                   
+                    return data?data:''               
+                  }
+              },
+               {
+                  "data": "email",
+                  "render": function(data, type, row) { 
+                   return data?data:''                    
+                  }
+              },
+              
+    
+
+          ],  
+          
+      });
+      })
+      }
+      tab
+      exportToExcel(){
+        
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  
+      }
+
+
+}
diff --git a/src/app/inventory-list/inventory-list.component.html b/src/app/inventory-list/inventory-list.component.html
new file mode 100644
index 0000000..a7d7528
--- /dev/null
+++ b/src/app/inventory-list/inventory-list.component.html
@@ -0,0 +1,69 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+    <div class="headerStyle">
+        <span>{{'INVENTORY LIST' | translate}}</span>
+      </div>
+  <div class="filterDiv">
+    <div class="row" style="margin-bottom: 20px;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">  
+        <button *ngIf="isOperator" md-tooltip="Add Device" style="border:1px solid transparent;float:left; background-color: transparent;" (click)="adddev()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>     
+        <div style="display: inline-flex; width: 45%;padding-bottom: 3px;">
+        
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >  
+            <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"   name="todate"  [(ngModel)]="to_date" type="text" >
+        
+        </div>
+        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;" (click)="InventoryList()"> {{'Get Detail' | translate}} </button>
+        <button md-raised-button style="width: 190px; background: #1d8216; color: white;" (click)="exportExcel()">{{'Export To Excel' | translate}}</button>
+        <!-- <div>
+          
+        </div> -->
+      </div>
+        <!-- <div class="col-4" style="text-align: center;margin-top: 30px;">
+         
+          </div>  -->
+          <!-- <div class="col-4" style="margin-top: 30px;">
+         
+          </div>   -->
+      </div>
+    </div>
+    <div>
+        <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+            <thead style="background-color:#A2C523;color: white;">
+                <tr>
+                    <th style="text-align:center;">System Date</th>
+                    <th style="text-align:center;">Vehicle Number</th>
+                    <th style="text-align:center;">Chassis Number</th>
+                    <th style="text-align:center;">Engine Number</th>
+                    <th style="text-align:center;">Device Model</th>
+                    <th style="text-align:center;">VLT No. (IMEI)</th>
+                    <th style="text-align:center;">VLT SIM (IDEA)</th>            
+                    <th style="text-align:center;">VLT SIM  (BSNL)</th>
+                    <th style="text-align:center;">Approving RTO</th>
+                    <th style="text-align:center;">Owner Number</th>
+                    <th style="text-align:center;">Alternate Number</th>
+                    <th style="text-align:center;">Status</th>
+                    <th style="text-align:center;">Dealer Name</th>
+                    <th style="text-align:center;">Tracking Software</th> 
+                
+               <!-- <Device Model  -->
+                 <th></th>
+                  <th style="text-align:center;">Costumer Name</th>
+          
+                    <th style="text-align:center;">Email</th>                
+            
+                  
+                  <!-- <th style="text-align:center;">Costumer Name</th> -->
+              
+                    <th style="text-align:center;">Operator Name</th>
+                    <th  style="text-align:center;">Edit</th>           
+                </tr>
+            </thead>
+        </table>
+        <!-- <table id="deviceTable" datatable [dtOptions]="dtOptions" style="width:100%" class="mt-5 table table-striped table-bordered full-data-table" >
+        </table> -->
+    </div>
+  </div>
+
diff --git a/src/app/inventory-list/inventory-list.component.scss b/src/app/inventory-list/inventory-list.component.scss
new file mode 100644
index 0000000..a894739
--- /dev/null
+++ b/src/app/inventory-list/inventory-list.component.scss
@@ -0,0 +1,35 @@
+
+    .container-fluid .headerStyle{
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        background: white;
+        color: black;
+        border-radius: 4px;
+    }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/inventory-list/inventory-list.component.spec.ts b/src/app/inventory-list/inventory-list.component.spec.ts
new file mode 100644
index 0000000..8ad6835
--- /dev/null
+++ b/src/app/inventory-list/inventory-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InventoryListComponent } from './inventory-list.component';
+
+describe('InventoryListComponent', () => {
+  let component: InventoryListComponent;
+  let fixture: ComponentFixture<InventoryListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InventoryListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InventoryListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/inventory-list/inventory-list.component.ts b/src/app/inventory-list/inventory-list.component.ts
new file mode 100644
index 0000000..c210384
--- /dev/null
+++ b/src/app/inventory-list/inventory-list.component.ts
@@ -0,0 +1,387 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import * as moment from 'moment';
+import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { MdDialog } from '@angular/material';
+import { DeviceEntryComponent } from '../device-entry/device-entry.component';
+import { FlashMessagesService } from 'angular2-flash-messages';
+declare var $: any, DataTable: any;
+@Component({
+    selector: 'app-inventory-list',
+    templateUrl: './inventory-list.component.html',
+    styleUrls: ['./inventory-list.component.scss']
+})
+export class InventoryListComponent implements OnInit {
+    from_date: Date;
+    to_date: Date;
+    bsConfig: Partial<BsDatepickerConfig>;
+    tabelObj: any;
+    useridd: any;
+    supadm: any;
+    isOperator: boolean = false;
+    supAdminId: any;
+    newVar:any;
+    newVar1:any;
+    colorTheme = 'theme-dark-blue';
+    constructor(public contactService: ContactService, private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+        this.from_date = new Date();
+        this.from_date.setHours(0,0,0,0);
+        this.to_date = new Date();
+        this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    }
+
+    ngOnInit() {
+        this.testTable();
+        this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+        this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+        this.isOperator = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOperator;
+        this.supAdminId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+        // this.isOperator =  JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOperator;
+    }
+    InventoryList() {
+        console.log(this.from_date);
+        console.log(this.to_date);
+        this.tabelObj.draw();
+    }
+
+    adddev(){
+        // console.log("Inside adddiv");
+        //console.log(id);   
+        this.router.navigateByUrl("deviceEntry");
+      }
+
+
+    testTable() {
+        const that = this;
+        $(document).ready(function () {
+            that.tabelObj = $('#deviceTable').DataTable({
+                "serverSide": true,
+                "processing": true,
+               
+                "order": [[3, "desc"]],
+                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+                "fields" :[{label :"Vehicle Number",name : "Device_Name"}],
+                scrollX: true,
+                ajax: (dataTablesParameters: any, callback) => {
+                    dataTablesParameters.op = {};
+                    dataTablesParameters.select = ['Device_ID'];
+                    dataTablesParameters.find = {};
+                    // dataTablesParameters.search.regex = true;
+                
+                    if(that.supadm == true){
+                        dataTablesParameters.find['superAdmin'] = that.useridd;
+                    }
+                
+                    if(that.isOperator == true){
+                        dataTablesParameters.find['operator_id'] = that.useridd;
+                    }
+
+                    if (that.from_date) {
+                        dataTablesParameters.find['systemDate'] = dataTablesParameters.find['systemDate'] ? dataTablesParameters.find['systemDate'] : {};
+                        dataTablesParameters.find['systemDate']['$gte'] = {
+                          _eval: 'date',
+                          value: new Date(that.from_date).toISOString()
+                        }
+                      };
+                      // }
+                      if (that.to_date) {
+                        dataTablesParameters.find['systemDate'] = dataTablesParameters.find['systemDate'] ? dataTablesParameters.find['systemDate'] : {};
+                        dataTablesParameters.find['systemDate']['$lte'] = {
+                          _eval: 'date',
+                          value: new Date(that.to_date).toISOString()
+                        };
+                      }
+                  
+                    dataTablesParameters.columns = [
+                        {data : "_id"},
+                        { data: "systemDate" },
+                        { data: "Device_ID" },
+                        { data: "Device_Name" },
+                        { data: "chessisNumber" },
+                        { data: "sim_number_1" },
+                        { data: "sim_provider_1" },
+                        { data: "sim_number_2" },
+                        { data: "sim_provider_2" },
+                        {data : "trackingSoft"},
+                        { data: "approvingRTO" },
+                        { data: "ownerNumber" },
+                        { data: "Alternatenumber" },
+                        { data: "email" },
+                        { data: "status" },
+                        { data: "dealerName" },
+                        {data :"engine_number"},
+                        {data :"device_model.device_type" },
+
+                        { data: "operator_id.first_name" }, { data: "operator_id.last_name" }, { data: "costumer_first_name" },{data : "costumer_last_name"}
+                    ]
+                    // dataTablesParameters.find.user = that.useridd;
+
+                    var suburl = "";
+                    suburl += "/inventory/inventorydatatable";
+                    that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {  
+                        callback(resp);
+                    }, err => {
+
+                        // console.log(err.status);
+                    });
+                },
+                "rowCallback": function(row: Node, data: any | Object, index: number){  
+                    $('#edit', row).bind('click', () => {    
+                        var editData = data;  
+                        editData.actionId= "edit";  
+                       localStorage.setItem("invantoryObject",JSON.stringify(editData));
+                        that.router.navigateByUrl('deviceEntry');
+              
+                    });    
+                  },
+
+                "columns": [
+                    {                    
+                        "data": "systemDate",
+                        // "searchable" : true,
+                        "render": function (data, type, row) {
+                            var system_date = new Date(data);
+                            return data ? (moment(system_date).format('dddd,ll,LTS')) : "";
+
+                        }
+                    },
+                    {
+                        
+                        "data": "Device_Name",
+                        // "searchable" : true,
+                        render: function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "chessisNumber",
+                        // "searchable" : true,
+                        render: function (data, type, row) {
+
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "engine_number",
+                        // "searchable" : true,          
+                        render: function (data, type, row) {
+                            console.log("engine_number=>",data);
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "device_model",
+                        // "searchable" : true,
+                        render: function (data, type, row) {
+                            console.log("device_model=>",data);
+                            return data ? data.device_type : "NA";
+                        }
+                    },
+                    {       
+                        "data": "Device_ID",
+                        "searchable" : true,
+                        render: function (data, type, row) {
+                            console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+           
+                
+                    {
+                        
+                        "data": "sim_number_1",
+                        // "searchable" : true,
+                        render: function (data, type, row) {
+
+                            return data ? data : "";
+                        }
+                    },
+                    // {
+                        
+                    //     "data": "sim_provider_1",
+                    //     // "searchable" : true,
+                    //     // "visible" :false,
+
+                    //     "render": function (data, type, row) {
+                    //         // console.log(data);
+                    //         return data ? data : "";
+                    //     }
+                    // },
+                    {
+                        
+                        "data": "sim_number_2",
+                        // "searchable" : true,
+                        "render": function (data, type, row) {
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "approvingRTO",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "ownerNumber",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                   
+                    {
+                        
+                        "data": "Alternatenumber",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "status",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                        {
+                        
+                        "data": "dealerName",
+                        "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+
+                
+                    {
+                        
+                        "data": "trackingSoft",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+                    {
+                        
+                        "data": "costumer_first_name",
+                        // "searchable" : false,
+                        "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return row ? (row.costumer_first_name + "" + row.costumer_last_name) : "";;
+                        }
+                    },
+                    {
+                        
+                        "data": "costumer_last_name",
+                        // "searchable" : true,
+                         "visible" :true,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return row ? (row.costumer_first_name + " " + row.costumer_last_name) : "";
+                        }
+                    },                         
+                    {
+                        
+                        "data": "email",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+                            return data ? data : "";
+                        }
+                    },
+        
+                
+                    {
+                        
+                        "data": "operator_id",
+                        // "searchable" : true,
+                        // "visible" :false,
+
+                        "render": function (data, type, row) {
+                            // console.log(data);
+
+                            return data ? (data.first_name + " " + data.last_name) : "";
+                        }
+                    },
+                    {
+                        "data":null,
+                       
+                        "render":function(data,type,row){                
+                          return '<button id="edit" type="button" class="btn btn-primary" style="background:blue;border:0px;">Edit</button>'
+
+                    }
+                } ,
+                ],
+                
+            });
+
+      
+        });
+
+    }
+
+    tab:any;
+
+    exportExcel() {
+ 
+ 
+        var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+        var textRange; var j=0;
+        this.tab = document.getElementById('deviceTable'); // id of table
+    
+        for(j = 0 ; j < this.tab.rows.length; j++) 
+        {     
+            tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+            //tab_text=tab_text+"</tr>";
+        }
+    
+        tab_text=tab_text+"</table>";
+        tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+        tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+        tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+        // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+    
+    
+        var ua = window.navigator.userAgent;
+        var msie = ua.indexOf("MSIE "); 
+    
+        var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+    
+        return (sa);
+    }
+
+
+}
diff --git a/src/app/issue-list/issue-list.component.html b/src/app/issue-list/issue-list.component.html
new file mode 100644
index 0000000..cd30aab
--- /dev/null
+++ b/src/app/issue-list/issue-list.component.html
@@ -0,0 +1,61 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Issue List' | translate}}</h4>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+        <div class="row"
+          style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div>
+            <div id="toast">
+              <div id="desc">{{data_descip}}</div>
+            </div> -->
+            <div class="row" style="padding: 8px;margin-bottom: 8px;">
+              <div class="col-md-4">
+                <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                  <!-- from datetime picker -->
+                  <label>From</label>
+                  <input id="from_date" bsDatepicker class="form-control form-control-sm" [(ngModel)]="fromDate" (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig"
+             type="text">
+                </div>
+              </div>
+              <div class="col-md-4">
+                <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                  <!-- from datetime picker -->
+                  <label>To</label>
+                  <input id="todate" bsDatepicker class="form-control form-control-sm" [(ngModel)]="toDate" (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig"
+                     type="text">
+                </div>
+              </div>
+
+            </div>
+
+            <div style="width: 100%;height:84vh;">
+              <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th style="text-align:left;width:100px">{{'Ticket ID'|translate}} </th>
+                    <th style="text-align:left;width:100px">{{'Posted By'|translate}} </th>
+                    <th style="text-align:left;width:100px">{{'Email'|translate}} </th>
+                    <th style="text-align:left;width:100px">{{'Phone'|translate}} </th>
+                    <th style="text-align:left;width:100px">{{'Posted On' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Assigned To' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Message' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Remark' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Closed Date' | translate}}</th>
+                    <th style="text-align:left;width:100px">{{'Update Status' | translate}}</th>
+
+                    </tr>
+                    </thead>
+                    </table>
+
+
+  </div>
+
diff --git a/src/app/issue-list/issue-list.component.scss b/src/app/issue-list/issue-list.component.scss
new file mode 100644
index 0000000..380b366
--- /dev/null
+++ b/src/app/issue-list/issue-list.component.scss
@@ -0,0 +1,109 @@
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #6b6a6a;
+}
+
+.InputStyle {
+  padding: 10px;
+  padding-bottom: 20px;
+  background-color: #efefef;
+  margin-bottom: 10px;
+  .selecStyle {
+    display: inherit;
+    width: 56%;
+    padding-left: 16px;
+    margin-left: 50px;
+
+    border-radius: 10px;
+  }
+}
+
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 150px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/issue-list/issue-list.component.spec.ts b/src/app/issue-list/issue-list.component.spec.ts
new file mode 100644
index 0000000..71b135a
--- /dev/null
+++ b/src/app/issue-list/issue-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IssueListComponent } from './issue-list.component';
+
+describe('IssueListComponent', () => {
+  let component: IssueListComponent;
+  let fixture: ComponentFixture<IssueListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IssueListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IssueListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/issue-list/issue-list.component.ts b/src/app/issue-list/issue-list.component.ts
new file mode 100644
index 0000000..fb5f4fc
--- /dev/null
+++ b/src/app/issue-list/issue-list.component.ts
@@ -0,0 +1,281 @@
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+declare var $: any;
+declare var swal: any
+import * as moment from 'moment';
+@Component({
+  selector: 'app-issue-list',
+  templateUrl: './issue-list.component.html',
+  styleUrls: ['./issue-list.component.scss']
+})
+export class IssueListComponent implements OnInit {
+  issues=[];
+  modalRef: BsModalRef;
+  bsConfig: Partial<BsDatepickerConfig>;
+  fromDate=new Date();
+  toDate=new Date();
+  tabelObj: any;
+  userId
+  colorTheme = 'theme-dark-blue';
+  Load: boolean;
+  constructor(private contactService:ContactService,private modalService: BsModalService) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+
+  ngOnInit() {
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.fromDate = new Date(fTime);
+
+      var today = new Date();
+      var startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.fromDate=startDate
+    this.userId= JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    // this.getIssues()
+    this.testTable()
+  }
+
+  getIssues(){
+   
+    
+    this.contactService.get("/customer_support/getIssues?user="+this.userId+"&from="+this.fromDate+"&to="+this.toDate).subscribe((res:any)=>{
+      console.log(res);
+      this.issues=res;
+    })
+  }
+
+
+   testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+             
+              console.log(data);
+
+              var body={}
+              if(data.support_status=='OPEN'){
+                body={
+                  title: "Update Status",
+                  // text: "Please Enter Solution Remark:",
+                  // input: 'text',
+                  showCancelButton: true ,
+                  confirmButtonColor: 'green',
+                   confirmButtonText:'IN PROGRESS'
+                }
+              }else{
+                 body={
+                  title: "Update Status",
+                  text: "Please Enter Solution Remark:",
+                  input: 'text',
+                  showCancelButton: true ,
+                  confirmButtonColor: 'green',
+                 
+                }
+              }
+              // var req={
+              //   id:data._id,
+              //   ticketStatus:'RESOLVED'
+              // }
+              // that.contactService.post('/customer_support/updateCustomerQuery',req).subscribe(res=>{
+              //   console.log(res);
+              //   that.tabelObj.ajax.reload()
+              // })
+               swal(body
+                //  {
+                //   // title: 'Are you sure?',
+                //   title: "Update Status",
+                //   text: "Please Enter Solution Remark:",
+                //   input: 'text',
+                //   showCancelButton: true ,
+                //   confirmButtonColor: 'green',
+                // }
+                ).then((result) =>{                      
+                  if(result){
+                    console.log(result);
+                    var req={
+                id:data._id,
+                solutionRemarks:data.support_status=='OPEN'?undefined:result,
+                ticketStatus:data.support_status=='OPEN'?'IN PROGRESS':'CLOSE'
+              }
+              that.contactService.post('/customer_support/updateCustomerQuery',req).subscribe(res=>{
+                console.log(res);
+                that.tabelObj.ajax.reload()
+              })
+               
+                    }else{
+                       console.log(result);
+                    }
+                      
+                  })               
+                     
+            });
+         },
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+           that.Load = true;
+          var suburl = "";
+         that.contactService.get("/customer_support/getIssues?user="+that.userId+"&from="+that.fromDate+"&to="+that.toDate).subscribe((res:any)=>{
+        console.log(res);
+        that.issues=res;
+        for(var i=0;i<res.length;i++){
+          if(!res[i].ticketId){
+            res[i].ticketId='N/A'
+          }
+          if(!res[i].solutionRemarks){
+            res[i].solutionRemarks='N/A'
+          }
+          if(!res[i].closedDate){
+            res[i].closedDate='N/A'
+          }
+          // console.log(res);
+          
+        }
+        
+         that.Load = false
+        callback({ data: res });
+         })
+
+        },
+
+        "columns": [
+           {
+            "data": "ticketId",
+           
+            "render": function (data, row) {  
+              // console.log(row);
+                         
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "posted_by",
+           
+            "render": function (data, row) {             
+              return data.first_name+" "+data.last_name;   
+            }
+          },
+          {
+            "data": "posted_by",
+           
+            "render": function (data, row) {             
+              return data.email;   
+            }
+          },
+          {
+            "data": "posted_by",
+           
+            "render": function (data, row) {             
+              return data.phone;   
+            }
+          },
+            {
+            "data": "posted_on",
+            "render": function (data, type, row) {       
+              var reportDate = new Date(data);
+              return data ? (moment(reportDate).format('LL')) : "";   
+            }
+          },
+            {
+            "data": "assigned_to",
+            "render": function (data, type, row) {       
+              return data.first_name+" "+data.last_name;   
+            }
+          },
+           {
+            "data": "message",
+            "render": function (data, type, row) {       
+              return data;   
+            }
+          },
+          {
+            "data": "support_status",
+            "render": function (data, type, row) {  
+              return data=='CLOSE' || data=='CLOSED'?'CLOSED':data=='IN PROGRESS'?data:'OPEN';   
+            }
+          },
+          {
+            "data": "solutionRemarks",
+            "render": function (data, type, row) { 
+              var solutionRemarks=  data?data:'N/A';     
+              return solutionRemarks
+            }
+          },
+          {
+            "data": "closedDate",
+            "render": function (data, type, row) { 
+              var closedDate= data!='N/A'? moment(data).format('llll'):'N/A';
+                  
+              return closedDate
+            }
+          },
+           {
+            "data": "support_status",
+            "render": function (data, type, row) {    
+              var button 
+              if(row.support_status=='CLOSE') {
+                button= `<button disabled class="btn btn=info btn-sm"><i  title="Query Closed" style="font-size:20px;color: green" class="fas fa-check"></i></button>`;
+              } else{
+                button=`<button class="btn btn=info btn-sm"><i id="edit" title="Resolve Query" style="font-size:20px;color: green" class="fas fa-edit"></i></button>`;
+              }
+              return button 
+            }
+          },
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2,3,4,5,6,7,8,9,10] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "70px", "targets": 4 },
+           { "width": "70px", "targets": 5 },
+           { "width": "70px", "targets": 6 },
+           { "width": "70px", "targets": 7 },
+           { "width": "70px", "targets": 8 },
+           { "width": "70px", "targets": 9 },
+           { "width": "70px", "targets": 10 },
+
+        ], order: [[ 4, 'desc' ], [ 0, 'asc' ]]
+      });
+
+    });
+
+  }
+  changeDate(){
+    console.log("chabjhdsb",this.toDate,this.fromDate);
+    
+    this.tabelObj.ajax.reload();
+  }
+
+  openModal(template: TemplateRef<any>,data) {
+    this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+    
+  }
+
+  
+
+}
diff --git a/src/app/job-card/add-job-card/add-job-card.component.html b/src/app/job-card/add-job-card/add-job-card.component.html
new file mode 100644
index 0000000..56cbad6
--- /dev/null
+++ b/src/app/job-card/add-job-card/add-job-card.component.html
@@ -0,0 +1,171 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>
+        <button  mdtooltip="Back"  style="float: left;background-color: transparent;color: white;border: none;" [routerLink]="['/JobCard']"><i class="fas fa-arrow-left"></i></button>
+        {{title | translate}}</h4>
+    </div>
+  </div>
+  <div class="row rowStyle">
+    <div class="col-6">
+      <form [formGroup]="jobCardForm" (ngSubmit)="save()"  class="needs-validation m-4">
+        <div class="form-row">
+          <div class="col-md-6 mb-3">
+            <label for="validationCustom01">Job Type</label>
+            <select class="form-control" formControlName="JobType">
+              <option selected disabled value="">Select Job Type</option>
+              <option *ngFor="let item of jobType" [value]="item">{{item}}</option>
+            </select>
+            <!-- <input type="text" class="form-control" formControlName="JobType" id="validationCustom01" placeholder="Enter Job Type">
+            <div class="valid-feedback">
+              Looks good!
+            </div> -->
+          </div>
+            <div class="col-md-6 mb-3">
+              <label for="validationCustom04">Description</label>
+              <input type="text" class="form-control" formControlName="Description" id="validationCustom04"
+                placeholder="Enter Description">
+              <div class="invalid-feedback">
+                Please provide a valid state.
+              </div>
+            </div>
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom02">Customer Name</label>
+          <input type="text" class="form-control" formControlName="CustomerName"  placeholder="Enter Customer Name">
+          <div class="valid-feedback">
+            Looks good!
+          </div>
+        </div>
+        <div class="col-md-6 mb-3">
+          <label for="validationCustomUsername">Mobile</label>
+          <div class="input-group">
+            <!-- <div class="input-group-prepend">
+              <span class="input-group-text" id="inputGroupPrepend">@</span>
+            </div> -->
+            <input type="text" class="form-control" formControlName="Mobile" placeholder="Enter Mobile Number">
+            <div class="invalid-feedback">
+              Please choose a username.
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom03">Google Address</label>
+          <input type="text" class="form-control" id="txtSource" placeholder="Enter Address">
+          <div class="invalid-feedback">
+            Please provide a valid city.
+          </div>
+        </div>
+      
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom05">No Of Installation</label>
+          <select class="form-control" formControlName="NoOfInstallation" placeholder="No Of Installation">
+            <option disabled value="" selected>Select No.of Installation</option>
+            <option *ngFor="let i of number" [value]='i'>{{i}}</option>
+          </select>
+          <!-- <input type="text" class="form-control" formControlName="NoOfInstallation" id="validationCustom05" placeholder="No Of Installation">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div> -->
+        </div>
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom05">Amount</label>
+          <input type="text" class="form-control" formControlName="Amount"
+            placeholder="Amount">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div>
+        </div>
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom05">Payment Status</label>
+          <select class="form-control" formControlName="PaymentStatus"  placeholder="Payment Status">
+            <option disabled value="" selected>Select Payment Status</option>
+            <option value="yes">Yes</option>
+            <option value="no">No</option>
+          </select>
+          <small>Payment Collection Status from customer</small>
+          <!-- <input type="text" class="form-control" formControlName="PaymentStatus" placeholder="Payment Status">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div> -->
+        </div>
+
+        <div class="col-md-6 mb-3" *ngIf="!add">
+          <label for="validationCustom05">Status</label>
+          <select  class="form-control" formControlName="Status">
+            <option value="pending" selected>Pending</option>
+            <option value="complete" >Complete</option>
+          </select>
+
+          <!-- <input type="text" class="form-control" formControlName="Status" placeholder="Status">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div> -->
+        </div>
+        <!-- <input id="from_date" bsDatepicker class="form-control form-control-sm" [(ngModel)]="fromDate"
+          (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text"> -->
+        
+
+        <div class="col-md-6 mb-3">
+          <label for="from_date">Schedule Date</label>
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" formControlName="JobDate"
+             [bsConfig]="bsConfig" type="text">
+          <!-- <input type="text" class="form-control" formControlName="Remarks" placeholder="Remarks"> -->
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom05">Remarks</label>
+          <input type="text" class="form-control" formControlName="Remarks" placeholder="Remarks">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div>
+        </div>
+
+        <div class="col-md-6 mb-3">
+          <label for="validationCustom05">Technician</label>
+          <!-- <input type="text" class="form-control" formControlName="Technician" placeholder="Technician">
+          <div class="invalid-feedback">
+            Please provide a valid zip.
+          </div>
+           -->
+          <input placeholder="Installer" class="form-control" [mdAutocomplete]="tdAutoedit11" name="neww21" 
+           formControlName="Technician" (ngModelChange)="filtergrpStatess12(jobCardForm.value.Technician)">
+          <md-autocomplete #tdAutoedit11="mdAutocomplete">
+            <md-option *ngFor="let vh of installerSelect" [value]="vh.fullName">{{ vh.first_name }} {{ vh.last_name }}</md-option>
+          </md-autocomplete>
+          </div>
+
+          <div class="col-md-6 mb-3">
+            <label for="validationCustom03"> Address</label>
+            <input type="text" class="form-control" formControlName="Address" placeholder="Enter Address">
+            <div class="invalid-feedback">
+              Please provide a valid city.
+            </div>
+          </div>
+          
+          
+        </div>
+        <div class="text-center">
+          <button class="btn btn-primary" type="submit">{{btnText}}</button>
+        </div>
+        
+      </form>
+      <!-- <md-input-container>
+      <input mdInput placeholder="Installer" [mdAutocomplete]="tdAutoedit11" name="neww21" #state="ngModel"
+        [(ngModel)]="installer" (ngModelChange)="filtergrpStatess12(installer)">
+      <md-autocomplete #tdAutoedit11="mdAutocomplete">
+        <md-option *ngFor="let vh of installerSelect" [value]="vh.fullName">{{ vh.first_name }} {{ vh.last_name }}</md-option>
+      </md-autocomplete>
+      </md-input-container> -->
+    </div>
+
+  <div class="col-6">
+    <div id="poiAddMap" style="padding: 0px;display: flex;height: 80vh;"></div>
+  </div>
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/job-card/add-job-card/add-job-card.component.scss b/src/app/job-card/add-job-card/add-job-card.component.scss
new file mode 100644
index 0000000..32ea635
--- /dev/null
+++ b/src/app/job-card/add-job-card/add-job-card.component.scss
@@ -0,0 +1,12 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
diff --git a/src/app/job-card/add-job-card/add-job-card.component.spec.ts b/src/app/job-card/add-job-card/add-job-card.component.spec.ts
new file mode 100644
index 0000000..ad5b69b
--- /dev/null
+++ b/src/app/job-card/add-job-card/add-job-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddJobCardComponent } from './add-job-card.component';
+
+describe('AddJobCardComponent', () => {
+  let component: AddJobCardComponent;
+  let fixture: ComponentFixture<AddJobCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddJobCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddJobCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/job-card/add-job-card/add-job-card.component.ts b/src/app/job-card/add-job-card/add-job-card.component.ts
new file mode 100644
index 0000000..1c0e694
--- /dev/null
+++ b/src/app/job-card/add-job-card/add-job-card.component.ts
@@ -0,0 +1,407 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { router } from '../../app.router';
+import { ContactService } from '../../contact.service';
+import { ReportService } from '../../report/report.service';
+declare var google: any;
+
+@Component({
+  selector: 'app-add-job-card',
+  templateUrl: './add-job-card.component.html',
+  styleUrls: ['./add-job-card.component.scss']
+})
+export class AddJobCardComponent implements OnInit {
+  source_address: any;
+  jobType=['New Installation','Service','Sim Change','Device with Fuel/Tempreture Sensor']
+//   [6:28 PM, 8/30/2021] Job 1: New Installation
+// [6:28 PM, 8/30/2021] Job 1: Service
+// [6:28 PM, 8/30/2021] Job 1: Sim Cange
+// [6:28 PM, 8/30/2021] Job 1: Device with Fuel/Tempreture Sensor
+  title="Add Job Card"
+  addLat: any;
+  btnText="Submit"
+  addlng: any;
+  AddMapObj: any;
+  addressString: any;
+  jobCardForm:FormGroup;
+  installerSelect
+  installerData
+  installer
+  installerObj: any;
+  useridd: any;
+  skip: number = 1;
+  limit: number = 100;
+  myInput: any;
+  maindata;
+  bsConfig: Partial<BsDatepickerConfig>;
+  add:boolean=true
+  number=[]
+  constructor(private contactService:ContactService,private fb:FormBuilder,private reportService:ReportService,private router:Router) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' });
+    reportService.JobCard.subscribe(data=>{
+      console.log(data);
+      this.maindata=data
+      
+    });
+    for (let i = 1; i <= 100; i++) {
+      this.number.push(i)
+    }
+   }
+
+   patchValue(data){
+    //  var main=JSON.parse(data)
+    this.maindata=data
+    if(data){
+      console.log("IN",data);
+      this.add=false
+        this.title="Edit Job Card";
+        this.btnText="Update"
+        this.jobCardForm.patchValue({
+JobType:data.JobType?data.JobType:'',
+Description:data.Description?data.Description:'',
+CustomerName:data.CustomerName?data.CustomerName:'',
+Mobile:data.Mobile?data.Mobile:'',
+Address:data.Address?data.Address:'',
+Location:data.Location?data.Location:'',
+NoOfInstallation:data.NoOfInstallation?data.NoOfInstallation:'',
+Amount:data.Amount?data.Amount:'',
+PaymentStatus:data.PaymentStatus?data.PaymentStatus:'',
+Status:data.Status?data.Status:'',
+Remarks:data.Remarks?data.Remarks:'',
+Technician:data.Technician.first_name?data.Technician.first_name+' '+data.Technician.last_name:'',
+JobDate:data.JobDate?data.JobDate:new Date()
+        })
+
+      }
+
+      var temp  = data.Location.coordinates;
+      var poiLat = temp[1];
+      var poiLong = temp[0];
+      var current_add = new google.maps.LatLng(poiLat, poiLong);
+      var mapOptions = {
+        zoom: 15,
+        center: current_add
+      };
+  
+      var map = new google.maps.Map(document.getElementById('poiAddMap'), mapOptions);
+      // this.poiMap = map;
+    
+  
+      var icon1 = {
+        url: "./assets/image/ico_direccion.png", // url
+        scaledSize: new google.maps.Size(50, 50), // scaled size
+      
+    };
+      var marker = new google.maps.Marker({
+        position: current_add,
+        map: map,
+        draggable:true,
+        icon: icon1
+      });
+      google.maps.event.addListener(marker, 'dragend', function() 
+  {
+      console.log("Inside dragend");
+  
+      // outerThis.poiLat = marker.getPosition().lat();
+      // outerThis.poiLong = marker.getPosition().lng(); 
+
+   })
+  }
+
+  ngOnInit() {
+    
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.getInstallerData() ;
+    // this.patchValue()
+    this.jobCardForm=this.fb.group({
+      JobType:[''],
+Description:[''],
+CustomerName:[''],
+Mobile:[''],
+Address:[''],
+Location:[''],
+NoOfInstallation:[''],
+Amount:[''],
+PaymentStatus:[''],
+Status:[''],
+Remarks:[''],
+Technician:[''],
+JobDate:[new Date()]
+    })
+    if(localStorage.getItem('Carddata')){
+      this.patchValue(JSON.parse(localStorage.getItem('Carddata')));
+      localStorage.removeItem('Carddata')
+    }
+    let outerThis = this;
+  //   if(this.actionId == "edit"){
+  //     var temp  = this.poiObject.poiData.poi.location.coordinates;
+  //     this.poiLat = temp[1];
+  //     this.poiLong = temp[0];
+  //     var current_add = new google.maps.LatLng(this.poiLat, this.poiLong);
+  //     var mapOptions = {
+  //       zoom: 15,
+  //       center: current_add
+  //     };
+  
+  //     var map = new google.maps.Map(document.getElementById('poiEditMap'), mapOptions);
+  //     this.poiMap = map;
+    
+  
+  //     var icon1 = {
+  //       url: "./assets/image/ico_direccion.png", // url
+  //       scaledSize: new google.maps.Size(50, 50), // scaled size
+      
+  //   };
+  //     var marker = new google.maps.Marker({
+  //       position: current_add,
+  //       map: map,
+  //       draggable:true,
+  //       icon: icon1
+  //     });
+  //     google.maps.event.addListener(marker, 'dragend', function() 
+  // {
+  //     console.log("Inside dragend");
+  
+  //     outerThis.poiLat = marker.getPosition().lat();
+  //     outerThis.poiLong = marker.getPosition().lng(); 
+  // });
+  //   }  
+
+  //   if(this.actionId == "add"){
+      this.mapFunction();
+
+       this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+      
+    }
+  
+
+  mapFunction(){
+    var that = this;
+    console.log("add");
+    if (navigator.geolocation) {
+      if(location.protocol != 'https:'){
+        
+        this.contactService.getlatLong().subscribe(res=>{
+          console.log(res);
+          var position = {
+            coords: { 
+              latitude: res.lat,
+              longitude: res.lon
+            }
+          };
+
+          that.addLat =  position.coords.latitude;
+          that.addlng = position.coords.longitude;
+
+          var curr_position = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          }  
+
+          var mapAdd = new google.maps.Map(document.getElementById('poiAddMap'), {
+            center: {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude
+            },
+            zoom: 18
+        });
+
+        this.AddMapObj = mapAdd;
+
+        
+          this.poiFunction(mapAdd,curr_position);
+        })
+      }
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        var curr_position = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        }  
+        // console.log(this.curr_position);
+        that.addLat =  position.coords.latitude;
+        that.addlng = position.coords.longitude;
+        var mapAdd = new google.maps.Map(document.getElementById('poiAddMap'),{
+          center: {lat:  curr_position.lat, lng: curr_position.lng},
+          zoom: 15
+        });
+        that.AddMapObj = mapAdd;
+        that.poiFunction(mapAdd,curr_position);
+
+
+ 
+      })  
+     }
+  }
+
+  poiFunction(mapAdd,curr_position){
+    var that = this;
+    var icon1 = {
+      url: "./assets/image/ico_direccion.png", // url
+      scaledSize: new google.maps.Size(50, 50), // scaled size
+    
+  };
+    var marker = new google.maps.Marker({
+      position: curr_position,
+      map: mapAdd,
+      draggable:true,
+      icon: icon1
+    });
+
+    google.maps.event.addListener(marker, 'dragend', function() 
+    {
+        console.log("Inside dragend");
+    
+         var la = marker.getPosition().lat();
+         var ln = marker.getPosition().lng(); 
+         that.addLat =la;
+         that.addlng = ln;
+
+         console.log(that.addLat,that.addlng);
+     
+    });
+
+
+    var input = document.getElementById('txtSource');
+            var searchBox = new google.maps.places.SearchBox(input);
+          
+            searchBox.addListener('places_changed', function() {
+              var places = searchBox.getPlaces();
+              if (places.length == 0) {
+                return;
+              }
+              console.log(places);
+    
+              var bounds = new google.maps.LatLngBounds();
+              places.forEach(function(place:any) {
+                console.log('place.formatted_address',place.formatted_address);
+                console.log(place.geometry.location);
+                that.addressString = place.formatted_address;
+                that.addLat =  place.geometry.location.lat();
+                that.addlng = place.geometry.location.lng();
+                console.log(that.addLat,that.addlng);
+
+
+                if (!place.geometry) {
+                  // console.log("Returned place contains no geometry");
+                  return;
+                }
+                var icon = {
+                  url: icon1,
+                  size: new google.maps.Size(50, 50),
+              
+                };
+
+    
+                if (place.geometry.viewport) {
+                  // Only geocodes have viewport.
+                  
+                  bounds.union(place.geometry.viewport);
+                } else {
+                  bounds.extend(place.geometry.location);
+                }
+                marker.setPosition(place.geometry.location);
+                marker.setVisible(true);
+              });
+              mapAdd.fitBounds(bounds);
+            });
+    
+  }
+
+  save(){
+    console.log(this.jobCardForm.value);
+    if(!this.add){
+       var data1={
+  JobType:this.jobCardForm.value.JobType,
+  Description:this.jobCardForm.value.Description,
+  CustomerName:this.jobCardForm.value.CustomerName,
+  Mobile:this.jobCardForm.value.Mobile,
+  Address:this.jobCardForm.value.Address,
+  Location:this.addLat?{ "coordinates": [this.addLat,this.addlng], type: "Point" }:this.maindata.Location,
+  NoOfInstallation:this.jobCardForm.value.NoOfInstallation,
+  Amount:this.jobCardForm.value.Amount,
+  PaymentStatus:this.jobCardForm.value.PaymentStatus,
+  Status:'complete',
+  Remarks:this.jobCardForm.value.Remarks,
+  Technician:this.installerSelect?this.installerSelect[0]?this.installerSelect[0]._id:undefined:undefined,
+  SupAdmin:this.useridd,
+  JobCompletedOn:new Date().toISOString()
+  // JobDate:new Date(this.jobCardForm.value.JobDate).toISOString(),
+  // CreatedDate:new Date().toISOString()
+      }
+      this.contactService.post('/JobCard/update?id='+this.maindata._id,data1).subscribe(res=>{
+        console.log(res);
+        this.router.navigate(['/JobCard'])
+        
+      })
+
+
+    }else{
+      var data={
+  JobType:this.jobCardForm.value.JobType,
+  Description:this.jobCardForm.value.Description,
+  CustomerName:this.jobCardForm.value.CustomerName,
+  Mobile:this.jobCardForm.value.Mobile,
+  Address:this.jobCardForm.value.Address,
+  Location:{ "coordinates": [this.addLat,this.addlng], type: "Point" },
+  NoOfInstallation:this.jobCardForm.value.NoOfInstallation,
+  Amount:this.jobCardForm.value.Amount,
+  PaymentStatus:this.jobCardForm.value.PaymentStatus,
+  Status:'pending',
+  Remarks:this.jobCardForm.value.Remarks,
+  Technician:this.installerSelect?this.installerSelect[0]?this.installerSelect[0]._id:undefined:undefined,
+  SupAdmin:this.useridd,
+  JobDate:new Date(this.jobCardForm.value.JobDate).toISOString(),
+  CreatedDate:new Date().toISOString()
+      }
+      this.contactService.post('/JobCard/add',data).subscribe(res=>{
+        console.log(res);
+        this.router.navigate(['/JobCard'])
+        
+      })
+
+    }
+    
+  }
+
+ getInstallerData(){
+  this.contactService.getTechnician(this.useridd, this.skip, this.limit,this.myInput,false).subscribe(
+    (res:any)=>{
+      this.installerData=res;
+       for(let i=0;i<this.installerData.length;i++){
+          this.installerData[i].fullName=this.installerData[i].first_name+' '+this.installerData[i].last_name;
+        }
+    })
+}
+ 
+
+    filtergrpStatess12(val) {
+  console.log(val)
+  if (val) {
+
+    const filtergrpValue:any = val;
+    this.installerSelect=[];
+     this.installerSelect = this.installerData.filter(function(g){
+      var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+    console.log("TESTINg",c)
+      return c > -1;    
+    });
+    if(this.jobCardForm.value.Technician){
+      for(let i=0;i<this.installerData.length;i++){
+        if(this.installerData[i].fullName==this.installer){
+          this.installerObj=this.installerData[i]._id
+          console.log(this.installerData[i]);
+          
+          // this.getUser(this.installerData[i]._id)
+        }
+      }
+    }
+      console.log(this.installerSelect,this.installer, this.installerObj);
+      return this.installerSelect;
+  }
+
+}
+
+}
diff --git a/src/app/job-card/job-card.component.html b/src/app/job-card/job-card.component.html
new file mode 100644
index 0000000..1d0f45d
--- /dev/null
+++ b/src/app/job-card/job-card.component.html
@@ -0,0 +1,70 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Job Card List' | translate}}</h4>
+      <button class="btn btn-outline-warning btn-sm" [routerLink]="['/JobCardAdd']" mdtooltip="Add Job card"
+        style="height: 31px; float: right;margin-top: -32px; margin: 4px; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
+        class="btn btn-outline-warning btn-sm">
+        Add Job Card<md-icon class="mat-icon material-icons" role="img"
+          style="float: right;width:30px;height:30px;cursor:pointer" aria-hidden="true">add</md-icon>
+      </button>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+         
+          <div class="row" style="padding: 8px;margin-bottom: 8px;">
+            <div class="col-md-4">
+              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                <!-- from datetime picker -->
+                <label>From</label>
+                <input id="from_date" bsDatepicker class="form-control form-control-sm" [(ngModel)]="fromDate"
+                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
+              </div>
+            </div>
+            <div class="col-md-4">
+              <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+                <!-- from datetime picker -->
+                <label>To</label>
+                <input id="todate" bsDatepicker class="form-control form-control-sm" [(ngModel)]="toDate"
+                  (ngModelChange)="changeDate()" style="height: 25px;" [bsConfig]="bsConfig" type="text">
+              </div>
+            </div>
+
+          </div>
+
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align:left;width:100px">{{'Job Type'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Customer Name'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Mobile'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Address'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Location' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Description' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'No.Of Installation' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'SIM' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Amount' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Payment Status' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Created On' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Schedule Date' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Completed On' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Remarks' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Technician' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Edit' | translate}}</th>
+
+                </tr>
+              </thead>
+            </table>
+
+
+          </div>
\ No newline at end of file
diff --git a/src/app/job-card/job-card.component.scss b/src/app/job-card/job-card.component.scss
new file mode 100644
index 0000000..380b366
--- /dev/null
+++ b/src/app/job-card/job-card.component.scss
@@ -0,0 +1,109 @@
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #6b6a6a;
+}
+
+.InputStyle {
+  padding: 10px;
+  padding-bottom: 20px;
+  background-color: #efefef;
+  margin-bottom: 10px;
+  .selecStyle {
+    display: inherit;
+    width: 56%;
+    padding-left: 16px;
+    margin-left: 50px;
+
+    border-radius: 10px;
+  }
+}
+
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 150px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/job-card/job-card.component.spec.ts b/src/app/job-card/job-card.component.spec.ts
new file mode 100644
index 0000000..9553f9e
--- /dev/null
+++ b/src/app/job-card/job-card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { JobCardComponent } from './job-card.component';
+
+describe('JobCardComponent', () => {
+  let component: JobCardComponent;
+  let fixture: ComponentFixture<JobCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JobCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JobCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/job-card/job-card.component.ts b/src/app/job-card/job-card.component.ts
new file mode 100644
index 0000000..9ed776d
--- /dev/null
+++ b/src/app/job-card/job-card.component.ts
@@ -0,0 +1,261 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+declare var $: any;
+declare var swal: any
+import * as moment from 'moment';
+import { ReportService } from '../report/report.service';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'app-job-card',
+  templateUrl: './job-card.component.html',
+  styleUrls: ['./job-card.component.scss']
+})
+export class JobCardComponent implements OnInit {
+fromDate=new Date();
+  toDate=new Date();
+  tabelObj: any;
+  userId;
+  jobCards=[]
+   bsConfig: Partial<BsDatepickerConfig>;
+  colorTheme = 'theme-dark-blue';
+  Load: boolean;
+  constructor(private contactService:ContactService,private reportService:ReportService,private router:Router) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+
+  ngOnInit() {
+      var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.fromDate = new Date(fTime);
+
+      var today = new Date();
+      var startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+      this.fromDate=startDate
+    this.userId= JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.testTable()
+  }
+
+   testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+            localStorage.setItem('Carddata',JSON.stringify(data))
+            that.router.navigate(['/JobCardAdd'])
+              that.reportService.openEditJobCard(data);
+          })
+         },
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+           that.Load = true;
+          var suburl = "";
+         that.contactService.get("/jobCard/get?id="+that.userId+"&from="+new Date(that.fromDate).toISOString()+"&to="+new Date(that.toDate).toISOString()).subscribe((res:any)=>{
+        console.log(res);
+        that.jobCards=res;
+        for(var i=0;i<res.length;i++){
+          if(!res[i].JobCompletedOn){
+            res[i].JobCompletedOn='N/A'
+          }
+          if(!res[i].SIM){
+            res[i].SIM='N/A'
+          }
+           if(!res[i].IMEI){
+            res[i].IMEI='N/A'
+          }
+          // if(!res[i].solutionRemarks){
+          //   res[i].solutionRemarks='N/A'
+          // }
+          // if(!res[i].closedDate){
+          //   res[i].closedDate='N/A'
+          // }
+          // console.log(res);
+
+          
+        }
+        
+        
+         that.Load = false
+        callback({ data: res });
+         })
+
+        },
+
+        "columns": [
+           {
+            "data": "JobType",
+           
+            "render": function (data, row) {  
+              // console.log(row);
+                         
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "CustomerName",
+           
+            "render": function (data, row) {             
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Mobile",
+           
+            "render": function (data, row) {             
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Address",
+           
+            "render": function (data, row) {             
+              return data?data:'N/A';   
+            }
+          },
+            {
+            "data": "Location",
+            "render": function (data, type, row) {       
+             
+              return "";   
+            }
+          },
+            {
+            "data": "Description",
+            "render": function (data, type, row) {       
+              return data?data:'N/A';   
+            }
+          },
+           {
+            "data": "NoOfInstallation",
+            "render": function (data, type, row) {       
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "SIM",
+            "render": function (data, type, row) {       
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "IMEI",
+            "render": function (data, type, row) {       
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Amount",
+            "render": function (data, type, row) {  
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "PaymentStatus",
+            "render": function (data, type, row) { 
+              var solutionRemarks=  data?data:'N/A';     
+              return solutionRemarks
+            }
+          },
+          {
+            "data": "CreatedDate",
+            "render": function (data, type, row) { 
+              var solutionRemarks=  data?(moment(data).format('LL')):'N/A';     
+              return solutionRemarks
+            }
+          },
+          {
+            "data": "JobDate",
+            "render": function (data, type, row) { 
+             var solutionRemarks=  data?(moment(data).format('LL')):'N/A';     
+              return solutionRemarks
+            }
+          },
+          {
+            "data": "JobCompletedOn",
+            "render": function (data, type, row) { 
+              var solutionRemarks=  data!='N/A'?(moment(data).format('LL')):'N/A';     
+              return solutionRemarks
+            }
+          },
+          {
+            "data": "Status",
+            "render": function (data, type, row) { 
+              return data?data:'N/A'
+            }
+          },
+           {
+            "data": "Remarks",
+            "render": function (data, type, row) { 
+              return data?data:'N/A'
+            }
+          },
+          {
+            "data": "Technician",
+            "render": function (data, type, row) { 
+              return data?data.first_name+' '+data.last_name:'N/A'
+            }
+          },
+           {
+            "data": 'Status',
+            "render": function (data, type, row) { 
+                var button
+              if(data=='complete' || data=='Complete') {
+                button= `<button disabled class="btn btn=info btn-sm"><i  title="Closed" style="font-size:20px;color: green" class="fas fa-check"></i></button>`;
+              } else{
+                button=`<button class="btn btn=info btn-sm"><i id="edit" title="Edit Job Card" style="font-size:20px;color: green" class="fas fa-edit"></i></button>`;
+              }
+              // var button=`<button class="btn btn=info btn-sm"><i id="edit" title="Edit Job Card" style="font-size:20px;color: green" class="fas fa-edit"></i></button>`;
+              return button 
+            }
+          },
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2,3,4,5,6,7,8,9,10] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "70px", "targets": 4 },
+           { "width": "70px", "targets": 5 },
+           { "width": "70px", "targets": 6 },
+           { "width": "70px", "targets": 7 },
+           { "width": "70px", "targets": 8 },
+           { "width": "70px", "targets": 9 },
+           { "width": "70px", "targets": 10 },
+
+        ], order: [[ 4, 'desc' ], [ 0, 'asc' ]]
+      });
+
+    });
+
+  }
+
+  changeDate(){
+    console.log("chabjhdsb",this.toDate,this.fromDate);
+    
+    this.tabelObj.ajax.reload();
+  }
+
+}
diff --git a/src/app/kyc-approval/device-doc/device-doc.component.html b/src/app/kyc-approval/device-doc/device-doc.component.html
new file mode 100644
index 0000000..7d9b576
--- /dev/null
+++ b/src/app/kyc-approval/device-doc/device-doc.component.html
@@ -0,0 +1,204 @@
+
+
+<div class="card" style="height: 90vh;">
+  <div class="card-header">
+    <h4>Documents</h4>
+
+  </div>
+  <div *ngIf="!hide" class="card-body" style="height: 80vh;
+    overflow-y: scroll;">
+    <div id="toast">
+      <div id="desc">{{ data_descip }}</div>
+    </div>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <table  class="table table-striped">
+      <thead>
+        <tr>
+          <th>Image</th>
+          <th>Doc Number</th>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of imageDoc">
+          <td><img style="width: 100px;" [src]="'https://www.oneqlik.in'+item.image.substring(6)" (click)="openModal(template,item)"></td>
+          <td>{{item.phone}}</td>
+          <td>{{item.doctype}}</td>
+        </tr>
+      </tbody>
+    </table>
+
+  </div>
+  <div  class="collapse" id="collapseExample">
+    <div class="card card-body" *ngIf="!show">
+     <table>
+       <tr>
+        <td>
+          Vahan Certificate
+        </td>
+         <td>
+           <input type="file" (change)="onFileChanged($event,'vahan')">
+         </td>
+        <!-- <td>
+          <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
+            placeholder="mm/dd/yyyy" [(ngModel)]="vaahan_certifcate_date" type="text" style="width: 40%">
+        </td> -->
+        <td>
+          <button class="btn btn-primary btn-sm"  (click)="onUpload('vahan')"><i class="fas fa-upload"></i></button>
+        </td>
+       </tr>
+        <tr>
+          <td>
+            State RTO Certificate
+          </td>
+          <td>
+            <input type="file" (change)="onFileChanged($event,'state')">
+          </td>
+          <!-- <td>
+            <input id="docdate" bsDatepicker [bsConfig]="bsConfig" name="docdate" style="background: grey;height: 30px"
+              placeholder="mm/dd/yyyy" [(ngModel)]="state_certifcate_date" type="text" style="width: 40%">
+          </td> -->
+          <td>
+            <button class="btn btn-primary btn-sm" (click)="onUpload('state')"><i class="fas fa-upload"></i></button>
+          </td>
+        </tr>
+     </table>
+     <div class="text-center">
+      <button class="btn btn-primary" (click)="submit()">Submit</button>
+     </div>
+    </div>
+    <div class="card card-body" *ngIf="show"> 
+      <table  class="table table-striped">
+        
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Image</th>
+              <th>Date</th>
+            </tr>
+          </thead>
+          <tr>
+            <td>State RTO Certificate</td>
+            <td>
+              <img style="width: 100px;" [src]="'https://www.oneqlik.in'+statePic.substring(6)"
+                (click)="openModal1(template,statePic.substring(6))">
+              </td>
+            <td>
+             {{state_certifcate_date |date:"medium"}}
+            </td>
+          
+          </tr>
+          <tr>
+            <td>Vahan Certificate</td>
+            <td>
+              <img style="width: 100px;" [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
+                (click)="openModal1(template,vahanPic.substring(6))">
+            </td>
+            <td>
+              {{vaahan_certifcate_date |date:"medium"}}
+            </td>
+          </tr>
+       
+      </table>
+    </div>
+  </div>
+<div *ngIf="hide && show" class="card-body">
+  <table class="table table-striped">
+   
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Image</th>
+          <th>Date</th>
+          <th>Download</th>
+        </tr>
+      </thead>
+      <tr>
+        <td>State RTO Certificate</td>
+        <td>
+          <img style="width: 100px;" [src]="'https://www.oneqlik.in'+statePic.substring(6)"
+            (click)="openModal1(template,statePic.substring(6))">
+        </td>
+        <td>
+          {{state_certifcate_date |date:"medium"}}
+        </td>
+        <td>
+          <a (click)="downloadImage('https://www.oneqlik.in'+statePic.substring(6),'State_RTO_Certificate.jpg')" class="btn btn-primary btn-sm"><i class="fas fa-download"></i></a>
+        </td>
+  
+      </tr>
+      <tr>
+        <td>Vahan Certificate</td>
+        <td>
+          <img style="width: 100px;" [src]="'https://www.oneqlik.in'+vahanPic.substring(6)"
+            (click)="openModal1(template,vahanPic.substring(6))">
+        </td>
+        <td>
+          {{vaahan_certifcate_date |date:"medium"}}
+        </td>
+        <td>
+          <a (click)="downloadImage('https://www.oneqlik.in'+vahanPic.substring(6),'Vahan_Certificate.jpg')" class="btn btn-primary btn-sm" ><i class="fas fa-download"></i></a>
+        </td>
+      </tr>
+    
+  </table>
+
+</div>
+<div *ngIf="hide && !show" class="text-center">
+  <h4>Documents Not Uploaded</h4>
+</div>
+
+  <div class="card-footer float-right">
+    <button *ngIf="!hide" class="btn btn-primary" [disabled]='disabled' (click)="submit1('approved')">Approve</button>
+    <button *ngIf="!hide" class="btn btn-danger" [disabled]='disabled' (click)="submit1('reject')">Reject</button>
+    <button class="btn btn-warning" md-dialog-close>Cancel</button>
+    <button *ngIf="!hide" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample"
+      aria-expanded="false" aria-controls="collapseExample">
+      {{title}}
+    </button>
+  </div>
+
+</div>
+
+<ng-template #template>
+  <div class="modal-header">
+    <h4 class="modal-title pull-left">{{titleForDoc}}</h4>
+    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body row">
+    <div class="col-md-6">
+      <img style="width: -webkit-fill-available;" src={{image}}>
+
+    </div>
+    <div class="col-md-6" style="padding: 64px;font-size: larger;">
+      <div class="table-responsive">
+      <table class="table table-bordered">
+        <thead>
+          <tr >
+            <th *ngFor="let item of key;">
+              {{item}}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr >
+            <td *ngFor="let item of value;index as i">
+              {{value[i]}}
+            </td>
+          </tr>
+        </tbody>
+
+      </table>
+      </div>
+      <!-- <div class="col" *ngFor="let item of key; let i = index">
+        <b>{{ key[i]}}</b> : {{value[i]}}
+      </div> -->
+    
+    </div>
+
+
+  </div>
+</ng-template>
+
diff --git a/src/app/kyc-approval/device-doc/device-doc.component.scss b/src/app/kyc-approval/device-doc/device-doc.component.scss
new file mode 100644
index 0000000..aefb4da
--- /dev/null
+++ b/src/app/kyc-approval/device-doc/device-doc.component.scss
@@ -0,0 +1,121 @@
+.mainClass {
+  padding-top: 80px;
+
+  margin-right: 10px;
+  box-shadow: 4px 5px #ececec;
+}
+
+.mainClass p.head_style {
+  padding-top: 8px;
+  color: white;
+  margin-bottom: 0px;
+}
+
+/* .mainClass p.head_style1{
+  font-size: 15px;
+  font-weight: 500;
+  color: #615c5c;
+  text-align: left; 
+  padding-left: 1%;
+} */
+
+/* .rowStyle{
+  padding-right: 15%;
+} */
+
+.formfieldstyle {
+  width: 40%;
+}
+
+// .rowHeight {
+//   height: 145px;
+//   overflow: auto;
+// }
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+/deep/ .mat-input-flex {
+  border: 1px solid #c1c1c1;
+  background: #f2f2f2;
+}
+.modal-class {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.modal-lg {
+  max-width: 1068px;
+}
+::ng-deep .modal-dialog {
+  max-width: 1200px !important;
+  width: 1200px;
+}
diff --git a/src/app/kyc-approval/device-doc/device-doc.component.spec.ts b/src/app/kyc-approval/device-doc/device-doc.component.spec.ts
new file mode 100644
index 0000000..920b6da
--- /dev/null
+++ b/src/app/kyc-approval/device-doc/device-doc.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceDocComponent } from './device-doc.component';
+
+describe('DeviceDocComponent', () => {
+  let component: DeviceDocComponent;
+  let fixture: ComponentFixture<DeviceDocComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceDocComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceDocComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/kyc-approval/device-doc/device-doc.component.ts b/src/app/kyc-approval/device-doc/device-doc.component.ts
new file mode 100644
index 0000000..d052890
--- /dev/null
+++ b/src/app/kyc-approval/device-doc/device-doc.component.ts
@@ -0,0 +1,458 @@
+import { Component, Inject, OnInit, TemplateRef } from '@angular/core';
+import { MdDialogRef, MdSnackBar, MD_DIALOG_DATA } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { BsDatepickerConfig, BsModalRef, BsModalService } from 'ngx-bootstrap';
+import { ViewCustomerDetailsComponent } from '../../add/view-customer-details/view-customer-details.component';
+import { ContactService } from '../../contact.service';
+declare var swal: any;
+import { Observable, Observer } from "rxjs";
+@Component({
+  selector: 'app-device-doc',
+  templateUrl: './device-doc.component.html',
+  styleUrls: ['./device-doc.component.scss']
+})
+export class DeviceDocComponent implements OnInit {
+ docRow:boolean=false;
+
+//  adhar front - mandatory
+// adhar back  - mandatory
+// warranty card - mandatory
+// vehicle sales invoice/vehicle RC - mandatory
+// vehicle RC   - 
+// vehicle Photo -
+ modalRef: BsModalRef;
+ disabled:boolean=false
+  imageuploadObject = [{doctype:'Adhar card1',image:'',phone:'',docdate:''},
+{doctype:'Adhar card2',image:'',phone:'',docdate:''},
+{doctype:'Warrenty Card',image:'',phone:'',docdate:''},
+{doctype:'vehicle sales invoice',image:'',phone:'',docdate:''},
+{doctype:'vehicle RC',image:'',phone:'',docdate:''},
+{doctype:'vehicle Photo',image:'',phone:'',docdate:''},
+];
+    uploadStatus: any = 'Upload';
+  documentList = [
+    {
+      "docId": "Adhar card1",
+      "docName": "Adhar Card Front"
+    },
+     {
+      "docId": "Adhar card2",
+      "docName": "Adhar Card Back"
+    },
+    {
+      "docId": "vehicle sales invoice",
+      "docName": "vehicle sales invoice"
+    },
+    {
+      "docId": "voter Id",
+      "docName": "Voter Id"
+    },
+    {
+      "docId": "vehicle RC",
+      "docName": "vehicle RC"
+    },
+    {
+      "docId": "vehicle Photo",
+      "docName": "vehicle Photo"
+    },
+    {
+      "docId": "PAN card",
+      "docName": "Pan Card"
+    },
+    {
+      "docId": "Driving License",
+      "docName": "Driving License"
+    },
+    {
+      "docId": "RC Book",
+      "docName": "RC Book"
+    },
+    {
+      "docId": "Device Image",
+      "docName": "Device Image"
+    },
+    {
+      "docId": "Co.registered Card",
+      "docName": "Co.registered Card"
+    },
+    {
+      "docId": "Nepal Citizenship",
+      "docName": "Nepal Citizenship"
+    },
+    {
+      "docId": "Blue Book",
+      "docName": "Blue Book"
+    },
+    {
+      "docId": "Warrenty Card",
+      "docName": "Warrenty Card"
+    },
+    {
+      "docId": "Other",
+      "docName": "Other"
+    }
+    
+  ];
+    bsConfig: Partial<BsDatepickerConfig>;
+    imageDoc;
+    show:boolean=false;
+    hide:boolean=false
+    title="Upload Certificates"
+  data_descip: string;
+  constructor(private modalService: BsModalService,public dialogRef: MdDialogRef<ViewCustomerDetailsComponent>,public snackBar: MdSnackBar,
+     private contactService: ContactService, private _flashMessagesService: FlashMessagesService,@Inject(MD_DIALOG_DATA) public data: any) {
+        console.log(data);
+        this.hide=data.dealer_payload.hide?data.dealer_payload.hide:false;
+        if(data.dealer_payload.vaahan_certificate && data.dealer_payload.state_rto_certificate_path){
+          this.show=true;
+          console.log(this.hide,this.show);
+          
+          this.title="Show Certificates";
+          this.statePic=data.dealer_payload.state_rto_certificate_path;
+           this.vahanPic=data.dealer_payload.vaahan_certificate;
+           this.state_certifcate_date=data.dealer_payload.state_certifcate_date;
+          this.vaahan_certifcate_date=data.dealer_payload.vaahan_certifcate_date
+        }
+        if(data.dealer_payload.kycStatus=="Approved" || data.dealer_payload.kycStatus=="Reject"){
+          this.disabled=true
+        }
+        this.imageDoc=data.dealer_payload.imageDoc
+  }
+  ngOnInit() {
+    this.bsConfig = Object.assign({}, { containerClass:  'theme-dark-blue' });
+  }
+
+
+   
+AddDocumentsField(addedRow:any){
+  console.log("Inside function !!!");
+    if(addedRow){    
+      this.docRow = true;
+    }
+    
+     var obj={doctype:'',image:'',phone:'',docdate:''};
+     this.imageuploadObject.push(obj);
+     console.log(this.imageuploadObject);
+    // console.log("ImageuploadObject=>",this.imageuploadObject);
+}
+selectedFile: File;
+statePic;
+vahanPic
+onFileChanged(event1,type) { 
+  this.selectedFile = <File>event1.target.files[0];
+  console.log(this.selectedFile,type); 
+
+  var fileToUpload = event1.target.files.item(0);
+
+    //Show image preview
+    if(type=="state"){
+      console.log("in STATE");
+      
+      let reader = new FileReader();
+      reader.onload = (event: any) => {
+        this.statePic = event.target.result;
+        reader.readAsDataURL(fileToUpload);
+      }
+
+    }else{
+       let reader = new FileReader();
+      reader.onload = (event: any) => {
+        this.vahanPic = event.target.result;
+        reader.readAsDataURL(fileToUpload);
+      }
+      
+    }
+
+}
+Load:Boolean=false;
+ifuploadArr:Boolean=false;
+onUpload(imgIndex) {
+  console.log(imgIndex);
+  console.log(this.imageuploadObject);
+  const fd = new FormData();
+  console.log("selected file name =>",this.selectedFile.name);
+  if(this.selectedFile.name == " "){
+    swal(
+      'Upload Error',
+      'Please select document type before upload !!!',
+      'error'
+    )
+  }else{
+    fd.append('photo',this.selectedFile,this.selectedFile.name)
+    console.log("imgURL=>",fd) ;
+    this.Load = true;
+    this.contactService.imageupload(fd)
+    .subscribe(res=>{
+      this.Load = false;
+      this.ifuploadArr = true;
+   //   this.uploadStatus = 'Uploaded';
+      console.log(res);
+      var resImage ='';
+      resImage = res['_body'];
+      console.log(res['_body']);
+      if(imgIndex=='vahan'){
+        this.vahanPic=resImage
+      }else{
+        this.statePic=resImage
+      }
+      // this.imageuploadObject[imgIndex].image = resImage;
+      //  console.log(this.imageuploadObject);
+      // console.log(res);
+    },err=>{
+      this.Load= false;
+      this._flashMessagesService.show('Internal server error , try again', { cssClass: 'alert-success', timeout: 2000 }); 
+    })
+  }
+ }
+showUpload
+ DeleteDocumentsField(index){
+  console.log(this.imageuploadObject.length);
+  if(this.imageuploadObject.length == 1){
+    this.docRow = false;
+    this.showUpload = false;
+  }
+  this.imageuploadObject.splice(index, 1);
+
+}
+//  vaahan_certificate:{
+//       type:String
+//     },
+//     state_rto_certificate_path:{
+//       type:String
+//     },
+//     vaahan_certifcate_date:{
+//       type:Date
+//     },
+//     state_certifcate_date:{
+//       type:Date
+//     },
+vaahan_certifcate_date;
+state_certifcate_date;
+submit(){
+
+  if(this.vahanPic && this.statePic){
+    var request={
+      _id:this.data.dealer_payload._id,
+      device_model: this.data.dealer_payload.device_model._id,
+      vehicleType:this.data.dealer_payload.device_model._id,
+      vaahan_certificate:this.vahanPic,
+      state_rto_certificate_path:this.statePic,
+      vaahan_certifcate_date:new Date(),
+      state_certifcate_date:new Date()
+    }
+  console.log(request);
+  
+    this.contactService.editdevice(request).subscribe((res)=>{
+      this.dialogRef.close('yes')
+    })
+
+  }else{
+    this.data_descip = "All Documents are mandatory !!!"; 
+    launch_toast();
+    
+
+     this._flashMessagesService.show('All Documents are mandatory', { cssClass: 'alert-danger', timeout: 2000 }); 
+  }
+function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+
+}
+image
+number
+key=[];
+value=[];
+titleForDoc
+
+openModal(template: TemplateRef<any>,doc){
+   this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-dialog-centered'});
+  //  this.number=doc.phone;
+  var name=(this.data.dealer_payload.user?this.data.dealer_payload.user.first_name?this.data.dealer_payload.user.first_name:"":''+" "+
+      this.data.dealer_payload.user?this.data.dealer_payload.user.last_name?this.data.dealer_payload.user.last_name:"":'')
+  this.titleForDoc=doc.doctype?doc.doctype=="Adhar card1"?"Adhar card Front":doc.doctype=="Adhar card2"?"Adhar card Back":doc.doctype:doc.doctype
+  this.key=[];
+  this.value=[]
+   if(doc.doctype=="Adhar card1" || doc.doctype=="Adhar card1 *"){
+     this.key=['Name',"Address","Adhaar no"];
+     this.value=[name,
+      this.data.dealer_payload.user?this.data.dealer_payload.user.address?this.data.dealer_payload.user.address:"":'',
+      doc.phone]
+    
+   }else if(doc.doctype=="Adhar card2"  || doc.doctype=="Adhar card2 *"){
+      this.key=['Name',"Address","Adhaar no"];
+     this.value=[this.data.dealer_payload.user?this.data.dealer_payload.user.first_name?this.data.dealer_payload.user.first_name:"":''+" "+
+      this.data.dealer_payload.user?this.data.dealer_payload.user.last_name?this.data.dealer_payload.user.last_name:"":'',
+      this.data.dealer_payload.user?this.data.dealer_payload.user.address?this.data.dealer_payload.user.address:"":'',
+      doc.phone]
+
+   }else if(doc.doctype=="vehicle sales invoice"|| doc.doctype=="vehicle sales invoice *" ){
+      this.key=['Name',"Address","Chassis no","Engine no","Number"];
+     this.value=[name,
+      this.data.dealer_payload.user?this.data.dealer_payload.user.address?this.data.dealer_payload.user.address:"":'',
+      this.data.dealer_payload.engineNo?this.data.dealer_payload.engineNo:"",
+      this.data.dealer_payload.ChassisNo?this.data.dealer_payload.ChassisNo:"",
+      doc.phone]
+
+
+   }else if(doc.doctype=="vehicle RC"|| doc.doctype=="vehicle RC"){
+      this.key=['Name',"Vehicle Number","Address","Engine No.","Chassis No.","Number"];
+      this.value=[name,
+      this.data.dealer_payload.user?this.data.dealer_payload.user.address?this.data.dealer_payload.user.address:"":'',
+      this.data.dealer_payload.Device_Name?this.data.dealer_payload.Device_Name:"",
+      this.data.dealer_payload.engineNo?this.data.dealer_payload.engineNo:"",
+      this.data.dealer_payload.ChassisNo?this.data.dealer_payload.ChassisNo:"",
+      doc.phone]
+   }
+   else if(doc.doctype=="vehicle Photo"){
+     this.key=['Name',"Vehicle Number","IMEI.","Number"];
+      this.value=[name,
+      this.data.dealer_payload.Device_Name?this.data.dealer_payload.Device_Name:"",
+      this.data.dealer_payload.Device_ID?this.data.dealer_payload.Device_ID:"",
+
+      doc.phone]
+//      Warranty card
+// 1. Name
+// 2. IMEI no
+// 3. Mobile no
+// 4. Address
+// 5. Vehicle chassi no
+// 6. Engine number
+// 7 vehicle RC
+   } else if(doc.doctype=="Warrenty Card" || doc.doctype=="Warrenty Card *"){
+     this.key=['Name',"Vehicle Number","IMEI.","Address","Engine No.","Chassis No","Number"];
+      this.value=[name,
+      this.data.dealer_payload.Device_Name?this.data.dealer_payload.Device_Name:"",
+      this.data.dealer_payload.Device_ID?this.data.dealer_payload.Device_ID:"",
+        this.data.dealer_payload.user?this.data.dealer_payload.user.address?this.data.dealer_payload.user.address:"":'',
+         this.data.dealer_payload.engineNo?this.data.dealer_payload.engineNo:"",
+      this.data.dealer_payload.ChassisNo?this.data.dealer_payload.ChassisNo:"",
+
+      doc.phone]
+     
+   }
+this.image='https://www.oneqlik.in'+doc.image.substring(6)
+}
+
+openModal1(template: TemplateRef<any>,doc){
+   this.modalRef = this.modalService.show(template,{'backdrop':'static',class:'modal-lg modal-dialog-centered'});
+   this.number=doc.phone
+this.image='https://www.oneqlik.in'+doc
+}
+
+submit1(status){
+
+  if(status=="reject"){
+    swal({
+  title: 'Please Enter Remark',
+  input: 'text',
+  inputAttributes: {
+    autocapitalize: 'off'
+  },
+  showCancelButton: true,
+  confirmButtonText: 'Submit',
+  showLoaderOnConfirm: true,
+  
+}).then((result) => {
+   console.log(result)
+    if(!result){
+       swal({
+      title: "Remark is mandatory",
+    })
+    }else{
+      var request={
+            _id:this.data.dealer_payload._id,
+            device_model: this.data.dealer_payload.device_model._id,
+            vehicleType:this.data.dealer_payload.device_model._id,
+            kycStatus:'Reject',
+            remark:result,
+            kycApprovalDate:new Date()
+          }
+        console.log(request);
+        var title
+          if(status=="reject"){
+            title="KYC Rejected"
+          }else{
+            title="KYC Approved"
+          }
+          this.contactService.editdevice(request).subscribe((res)=>{
+            swal({
+             title:title,
+            })
+            this.dialogRef.close('yes')
+          })
+    }
+
+  
+  
+})
+
+  }else{
+     var request={
+            _id:this.data.dealer_payload._id,
+            device_model: this.data.dealer_payload.device_model._id,
+            vehicleType:this.data.dealer_payload.device_model._id,
+            kycStatus:'Approved',
+            kycApprovalDate:new Date()
+            
+          }
+          this.contactService.editdevice(request).subscribe((res)=>{
+             swal({
+              title: "KYC approved successfully",
+             })
+            this.dialogRef.close('yes')
+          })
+  }
+}
+
+base64Image
+downloadImage(imageUrl,name) {
+ 
+    this.getBase64ImageFromURL(imageUrl).subscribe(base64data => {
+      this.base64Image = "data:image/jpg;base64," + base64data;
+      // save image to disk
+      var link = document.createElement("a");
+
+      document.body.appendChild(link); // for Firefox
+
+      link.setAttribute("href", this.base64Image);
+      link.setAttribute("download", name);
+      link.click();
+    });
+  }
+
+  getBase64ImageFromURL(url: string) {
+    return Observable.create((observer: Observer<string>) => {
+      const img: HTMLImageElement = new Image();
+      img.crossOrigin = "Anonymous";
+      img.src = url;
+      if (!img.complete) {
+        img.onload = () => {
+          observer.next(this.getBase64Image(img));
+          observer.complete();
+        };
+        img.onerror = err => {
+          observer.error(err);
+        };
+      } else {
+        observer.next(this.getBase64Image(img));
+        observer.complete();
+      }
+    });
+  }
+
+  getBase64Image(img: HTMLImageElement) {
+    const canvas: HTMLCanvasElement = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    const ctx: CanvasRenderingContext2D = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0);
+    const dataURL: string = canvas.toDataURL("image/png");
+
+    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
+  }
+
+}
diff --git a/src/app/kyc-approval/device-kyc/device-kyc.component.html b/src/app/kyc-approval/device-kyc/device-kyc.component.html
new file mode 100644
index 0000000..3392ae7
--- /dev/null
+++ b/src/app/kyc-approval/device-kyc/device-kyc.component.html
@@ -0,0 +1,361 @@
+<div class="container mt-3 mb-3">
+  <div class="row">
+    <div
+      *ngFor="let item of inventoryCount"
+      class="card shadow-sm col-sm rounded p-1 mr-1 text-center"
+      [ngStyle]="{
+        'background-color':
+          item._id === 'Pending'
+            ? '#00c0ef'
+            : item._id === 'Reject'
+            ? '#f39c12'
+            : '#00a65a'
+      }"
+    >
+      <h6>{{ item._id }}</h6>
+      <span class="text-white">{{ item.TotalDev }}</span>
+    </div>
+  </div>
+</div>
+
+<div
+  class="card-header"
+  style="
+    width: 100%;
+    text-align: center;
+    align-items: center;
+    background: #426e86;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    color: white;
+    box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+  "
+>
+  <!-- style="float: left;background: #efecec;margin-right: 5px;height: 33px;margin-top: 6px;" -->
+  <select
+    [(ngModel)]="limit"
+    (ngModelChange)="callDataTable()"
+    style="
+      background: #efecec;
+      height: 35px;
+      width: 63px;
+      float: left;
+      margin-top: 3px;
+    "
+  >
+    <option *ngFor="let page of pageLengthArr; let i = index" [value]="page">
+      {{ page }}
+    </option>
+  </select>
+
+  <button
+    class="btn btn-default"
+    [disabled]="previewButton"
+    (click)="pre()"
+    style="border-right-color: #2d4262"
+  >
+    << {{ "Previous" | translate }}
+  </button>
+  <button
+    class="btn btn-default"
+    [disabled]="nextButton"
+    (click)="next()"
+    style="margin-right: 10px"
+  >
+    {{ "Next" | translate }} >>
+  </button>
+
+  <select
+    [(ngModel)]="status"
+    (ngModelChange)="changeStatus($event)"
+    style="background: #efecec; height: 35px"
+  >
+    <option value="" selected>Please select status</option>
+    <option value="Pending">Pending</option>
+    <option value="Approved">Approved</option>
+    <option value="Reject">Reject</option>
+  </select>
+
+  <select
+    [(ngModel)]="state"
+    id="state"
+    (ngModelChange)="changeStatus($event)"
+    style="background: #efecec; height: 35px"
+  >
+    <option value="" selected>Please select state</option>
+    <option *ngFor="let ustate of Indianstate" [value]="ustate">
+      {{ ustate }}
+    </option>
+  </select>
+
+  <div style="float: right">
+    <input
+      type="search"
+      style="
+        width: 225px;
+        float: right;
+        border-radius: 0px;
+        line-height: 1.9;
+        background: #efecec;
+        box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+      "
+      class="form-control"
+      id="myInput"
+      name="myInput"
+      type="text"
+      [(ngModel)]="myInput"
+      (ngModelChange)="searchFilter($event)"
+      placeholder="{{ 'Device Search' | translate }}"
+    />
+  </div>
+</div>
+<div class="table-responsive" style="height: 71vh">
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>
+          {{ "NAME" | translate }}
+        </th>
+        <!-- <th >
+          {{ "USER ID" | translate }}
+        </th> -->
+        <th>
+          {{ "EMAIL ID" | translate }}
+        </th>
+        <th>
+          {{ "PHONE" | translate }}
+        </th>
+        <th>
+          {{ "Dealer" | translate }}
+        </th>
+        <th>
+          {{ "Distributer" | translate }}
+        </th>
+        <th>
+          {{ "DEVICE NAME" | translate }}
+        </th>
+        <th>
+          {{ "IMEI" | translate }}
+        </th>
+        <th>
+          {{ "E sim Validity" | translate }}
+        </th>
+        <th>
+          {{ "KYC Date" | translate }}
+        </th>
+        <th>
+          {{ "KYC Approval Date" | translate }}
+        </th>
+        <th>
+          {{ "RTO Cer. Date" | translate }}
+        </th>
+        <th>
+          {{ "Vaahan Cer. Date" | translate }}
+        </th>
+        <th>
+          {{ "Remarks" | translate }}
+        </th>
+        <th>
+          {{ "RTO State" | translate }}
+        </th>
+        <th>
+          {{ "RTO City" | translate }}
+        </th>
+        <th>
+          {{ "KYC Status" | translate }}
+        </th>
+        <th>
+          {{ "Installation Certificates" | translate }}
+        </th>
+        <th>
+          {{ "View" | translate }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let cust_array of custumer">
+        <td>
+          {{
+            cust_array.user
+              ? cust_array.user.first_name
+                ? cust_array.user.first_name
+                : ""
+              : ""
+          }}
+          {{
+            cust_array.user
+              ? cust_array.user.last_name
+                ? cust_array.user.last_name
+                : ""
+              : ""
+          }}
+        </td>
+        <!-- <td>
+          {{cust_array.user? cust_array.user.user_id ? cust_array.user.user_id : "NA":'' }}
+        </td> -->
+        <td>
+          {{
+            cust_array.user
+              ? cust_array.user.email
+                ? cust_array.user.email
+                : ""
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.user
+              ? cust_array.user.phone
+                ? cust_array.user.phone
+                : ""
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.Dealer
+              ? cust_array.Dealer.first_name
+                ? cust_array.Dealer.first_name
+                : ""
+              : ""
+          }}
+          {{
+            cust_array.Dealer
+              ? cust_array.Dealer.last_name
+                ? cust_array.Dealer.last_name
+                : ""
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.supAdmin
+              ? cust_array.supAdmin.first_name
+                ? cust_array.supAdmin.first_name
+                : ""
+              : ""
+          }}
+          {{
+            cust_array.supAdmin
+              ? cust_array.supAdmin.last_name
+                ? cust_array.supAdmin.last_name
+                : ""
+              : ""
+          }}
+        </td>
+        <td>
+          {{ cust_array.Device_Name ? cust_array.Device_Name : "" }}
+        </td>
+        <td>
+          {{ cust_array.Device_ID ? cust_array.Device_ID : "" }}
+        </td>
+        <td>
+          {{
+            cust_array.esim_validity
+              ? (cust_array.esim_validity | date: "medium")
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.created_on
+              ? (cust_array.created_on | date: "medium")
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.kycApprovalDate
+              ? (cust_array.kycApprovalDate | date: "medium")
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.state_certifcate_date
+              ? (cust_array.state_certifcate_date | date: "medium")
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.vaahan_certifcate_date
+              ? (cust_array.vaahan_certifcate_date | date: "medium")
+              : ""
+          }}
+        </td>
+        <td>
+          {{ cust_array.remark ? cust_array.remark : "" }}
+        </td>
+        <td>
+          {{
+            cust_array.transportOfficeState
+              ? cust_array.transportOfficeState
+              : ""
+          }}
+        </td>
+        <td>
+          {{
+            cust_array.transportOfficeCity ? cust_array.transportOfficeCity : ""
+          }}
+        </td>
+        <td>
+          <button
+            class="btn btn-warning btn-sm"
+            style="
+              border-radius: 40px;
+              font-size: x-small;
+              background-color: orange;
+            "
+            *ngIf="cust_array.kycStatus == undefined"
+          >
+            Pending
+          </button>
+          <button
+            class="btn btn-warning btn-sm"
+            style="
+              border-radius: 40px;
+              font-size: x-small;
+              background-color: orange;
+            "
+            *ngIf="cust_array.kycStatus == 'Pending'"
+          >
+            {{ cust_array.kycStatus }}
+          </button>
+          <button
+            class="btn btn-success btn-sm"
+            style="
+              border-radius: 40px;
+              font-size: x-small;
+              background-color: green;
+            "
+            *ngIf="cust_array.kycStatus == 'Approved'"
+          >
+            {{ cust_array.kycStatus }}
+          </button>
+          <button
+            class="btn btn-danger btn-sm"
+            style="
+              border-radius: 40px;
+              font-size: x-small;
+              background-color: red;
+            "
+            *ngIf="cust_array.kycStatus == 'Reject'"
+          >
+            {{ cust_array.kycStatus }}
+          </button>
+        </td>
+        <td style="text-align: center; cursor: pointer">
+          <i
+            *ngIf="cust_array.kycStatus == 'Approved'"
+            class="fas fa-file"
+            (click)="exportCertificate(cust_array)"
+          ></i>
+        </td>
+        <td style="text-align: center; cursor: pointer">
+          <i class="fas fa-eye" (click)="viewDocuments(cust_array)"></i>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/app/kyc-approval/device-kyc/device-kyc.component.scss b/src/app/kyc-approval/device-kyc/device-kyc.component.scss
new file mode 100644
index 0000000..057f052
--- /dev/null
+++ b/src/app/kyc-approval/device-kyc/device-kyc.component.scss
@@ -0,0 +1,65 @@
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+  font-size: 12px;
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
diff --git a/src/app/kyc-approval/device-kyc/device-kyc.component.spec.ts b/src/app/kyc-approval/device-kyc/device-kyc.component.spec.ts
new file mode 100644
index 0000000..165083b
--- /dev/null
+++ b/src/app/kyc-approval/device-kyc/device-kyc.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceKYCComponent } from './device-kyc.component';
+
+describe('DeviceKYCComponent', () => {
+  let component: DeviceKYCComponent;
+  let fixture: ComponentFixture<DeviceKYCComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceKYCComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceKYCComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/kyc-approval/device-kyc/device-kyc.component.ts b/src/app/kyc-approval/device-kyc/device-kyc.component.ts
new file mode 100644
index 0000000..22b00fa
--- /dev/null
+++ b/src/app/kyc-approval/device-kyc/device-kyc.component.ts
@@ -0,0 +1,631 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Contact } from '../../contact';
+
+import {MdSnackBar} from '@angular/material';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import { ContactService } from '../../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { DeviceDocComponent } from '../device-doc/device-doc.component';
+import { ReportService } from '../../report/report.service';
+import { NormalCertComponent } from '../../device/normal-cert/normal-cert.component';
+import { CertOptionComponent } from '../../device/cert-option/cert-option.component';
+import { EditDeviceMasterComponent } from '../../device/edit-device-master/edit-device-master.component';
+declare var swal: any;
+
+@Component({
+  selector: 'app-device-kyc',
+  templateUrl: './device-kyc.component.html',
+  styleUrls: ['./device-kyc.component.scss']
+})
+export class DeviceKYCComponent implements OnInit {
+modelChanged: Subject<string> = new Subject<string>();
+  status
+  pageLengthArr=[10,25,50,100,200,500,"All"];
+  state
+  kycStatus=[{Name:'Approved',value:'Approved'},{Name:'Reject',value:'Reject'},{Name:'Pending',value:'Pending'}]
+  dealerChk: boolean = false;
+  ev: any;
+  show1: boolean = false;
+  show2: boolean = true;
+  show3: boolean = false;
+  first_name: any;
+  logoutbut: boolean;
+  last_name: any;
+  passwordd: any;
+  org_name: any;
+  allUser:boolean=false;
+  emaill: any;
+  phone: any;
+  executed: any;
+  $event2: any;
+  dealer: any;
+  contacts: Contact[] = [];
+  contact: Contact;
+  login1: any;
+  mess2: any;
+  mess: any;
+  otp: any;
+  switchVal: any;
+  str: boolean = false;
+  password2: any;
+  cust_load: any;
+  errmsg: boolean =true;
+  serviceResponse: string;
+  errorMsg: boolean;
+  showNav: boolean =false;
+  url: any;
+  dealer_Permission: any;
+  adbtn: string;
+  myInput: string;
+
+  before: any;
+  emmnerr: any;
+  Load: any
+  $event: any;
+   Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  organisation: any;
+  constructor(private contactService: ContactService, public snackBar: MdSnackBar, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog,private reportService:ReportService) {
+    this.reportService.deviceExcel.subscribe(value=>{
+        if(value){
+          this.downloadExcel()
+        }
+    })
+    this.modelChanged
+      .debounceTime(1000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+        console.log('myInput')
+        // this.dealerDetail();
+       
+        this.ngOnInit();
+      });
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  data_descip: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i, td1;
+      input = document.getElementById("myInput");
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[1];
+        td1 = tr[i].getElementsByTagName("td")[0]
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+searchFilter(text: string) {
+    this.modelChanged.next(text);
+    // this.myInput;
+    // console.log(this.myInput);
+    // this.sidebarData()
+
+  }
+  tost1(divid) {
+    if (divid == "EmM") {
+      this.data_descip = this.emmnerr.split(":")[1]
+      launch_toast();
+    }
+    else if (divid == "succ") {
+      this.data_descip = "Custumer Successfully Added"
+      launch_toast();
+    }else if(divid == "reportPref"){
+      this.data_descip = "Report Preference updated !!!"
+      launch_toast();
+    }else if(divid == "password_changed"){
+      this.data_descip = "Password updated !!!";
+      launch_toast();
+    }else if(divid == "alertset"){
+      this.data_descip = "Alert preference updated !!!";
+      launch_toast();
+    }else if(divid=="kyc"){
+       this.data_descip = "KYC Status updated !!!";
+      launch_toast();
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+  }
+
+  changeStatus(ev){
+    console.log(ev);
+    this.getCustomer()
+
+  }
+
+  valclear() {
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 2000 });
+
+  }
+
+  click1(event) {
+    this.show2 = false;
+    this.show3 = true;
+    if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+
+    else
+      event.preventDefault();
+  }
+  click2(event2) {
+    this.show2 = true;
+    this.show3 = false;
+
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+  devicess: any;
+  final: any;
+ 
+   cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  run() {
+
+  }
+
+  devicesss: any;
+  subscription: any;
+  timer: any;
+  messageSuccess: any = true;
+  selectedlanguage :any; 
+
+
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  custumer: any=[];
+  mb: any;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      console.log('whatishere=>',this.superAdmin);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).cust_add_permission;
+    this.organisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).organisation;
+    // console.log(test);
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.adbtn = localStorage.getItem("dlrchk");
+    localStorage.setItem("dlrchk", this.custtype);
+    //  this.getdev();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+ 
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+      history.pushState(null, null, document.URL);
+    });
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.getSupAdmin();
+  }
+
+  getSupAdmin(){
+    this.contactService.get('/users/shareProfileImage?uid='+this.useridd).subscribe((res:any)=>{
+      this.emailid=res.email;
+      this. getCustomer();
+      this.getDeviceCount()
+    })
+  }
+
+ callDataTable(){
+    this.skip = 0;
+    // that.limit = len;
+    this.getCustomer();
+  }
+  getCustomer(){
+     this.Load = true;  
+     var url="/devices/getAllVehi?id="+this.organisation+"&skip="+this.skip+'&limit='+this.limit
+     if(this.myInput){
+       url=url+'&search='+this.myInput
+       console.log(this.myInput,url);
+     }
+    if(this.status){
+        url=url+'&status='+this.status
+    }
+    // else{
+    //    url="/devices/getAllVehi?id="+this.organisation+"&skip="+this.skip+'&limit='+this.limit
+
+    //  }
+     if(this.state){
+       url=url+'&state='+this.state
+     }
+     var group,statuss,dateObj,DealerID,status1
+    //  this.contactService.getAllVehi()
+    this.contactService.get(url)
+    .subscribe(  
+      (data:any) => {
+        this.Load = false;
+        this.custumer=[];
+         if(data.length==0){
+          this.nextButton=true;
+          this.previewButton=false;
+        }
+        this.custumer = data;
+        
+        console.log("custDetail=>", this.custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        this.custumer=[];
+        this.nextButton = true;
+        this.previewButton = false;
+      });
+  }
+
+  
+
+
+ 
+
+  skip: number = 0;
+  limit: number = 25;
+  nextButton: boolean = false;
+  previewButton: boolean = true;
+  next() {
+    this.previewButton = false;
+    this.skip += 1;
+    this.ngOnInit();
+    // this.sidebarData();
+  }
+  pre() {
+    console.log(this.skip)
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.previewButton = false;
+      this.nextButton = false;
+      this.ngOnInit();
+      // this.sidebarData();
+    } else {
+      this.previewButton = true;
+      this.nextButton = false;
+    }
+
+  }
+  
+
+  custPhone(dlr){
+  var dphn = '';
+  if(dlr.std_code != undefined){
+     dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+     return dphn ; 
+  }else{
+     dphn = dlr.phone ; 
+    return dphn ; 
+  }
+}
+
+allUserFunction(ev){
+  console.log('event=>',ev);
+  this.allUser = ev.checked ;
+   
+    this.skip = 1;
+    this.getCustomer(); 
+}
+
+
+
+changeKYC(data,event){
+  console.log(event);
+  var req={
+    user:data._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+     this.tost1('kyc');
+  })
+  
+}
+
+
+tab:any;
+  
+  downloadExcel() {
+
+      this.Load = true;  
+    // this.contactService.get('/users/getCustomer?uid='+this.useridd).subscribe(  
+    //   (data:any) => {
+    //     this.Load = false;
+    //    var custumer=[];
+    //     custumer = data;
+        for(var i=0;i<this.custumer.length;i++){
+           this.custumer[i].email=this.custumer[i].user.email?this.custumer[i].user.email:''
+           this.custumer[i].user_id=this.custumer[i].user.user_id?this.custumer[i].user.user_id:''
+           this.custumer[i].phone=this.custumer[i].user.phone?this.custumer[i].user.phone:''
+           this.custumer[i].fullName=this.custumer[i].user.first_name?this.custumer[i].user.first_name:''+" "+this.custumer[i].user.last_name?this.custumer[i].user.last_name:'';
+          if(i==(this.custumer.length-1)){
+
+            this.downloadFile(this.custumer);
+          }
+          }
+      //   console.log("custDetail=>", custumer);
+      // }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        // custumer=[];
+        // this.nextButton = true;
+        // this.previewButton = false;
+      // });
+
+
+  //  for(var i=0;i<this.custumer.length;i++){
+  //   // this.custumer[i].user.fullName=this.custumer[i].first_name?this.custumer[i].first_name:''+" "+this.custumer[i].last_name?this.custumer[i].last_name:'';
+  //  }
+
+    
+  }
+
+  downloadFile(data) {
+   
+    let arrHeader = ["fullName", "email", "phone", "user_id","kycStatus","Device_Name","Device_ID","esim_validity","remark","RtoState","RtoCity"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Customer List.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+     this.Load = false;
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Customer List \r\n';
+    let row = 'S.No,';
+// name,emial,phone,id,password and status no of vehicles
+    let newHeaders =["Name", "Email", "Phone", "User id","KYC Status","Device Name","IMEI","E Sim Validity","Remark","RTO State","RTO City"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  viewDocuments(docs){
+    console.log("Documents=>", docs);
+    var  that =this;
+    docs.ID = 'viewDoc';
+    console.log(docs);
+    let dialogRef = this.dialog.open(DeviceDocComponent, {
+      width: '900px', 
+      // height:'900px',
+      data: { dealer_payload: docs }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "yes") {
+        this.getCustomer();
+        this.getDeviceCount()
+      }
+
+      if (result == "no") {
+     
+      }
+      if(result == 'imageupdated'){
+        swal(
+          'Updated',
+          'Documents has been Updated.',
+          'success'
+        ) 
+          this.ngOnInit();
+      }
+    });
+  }
+  inventoryCount=[{_id: "Pending", TotalDev: 0},{_id: "Approved", TotalDev: 0},{_id: "Reject", TotalDev: 0}]
+getDeviceCount(){
+  this.contactService.get("/devices/getStatusCount?id="+this.organisation).subscribe((res:any)=>{
+   for(var i=0;i<res.length;i++){
+     for(var j=0;j<this.inventoryCount.length;j++){
+       if(res[i]._id==null){
+         this.inventoryCount[0].TotalDev=res[i].TotalDev
+       }
+       if(this.inventoryCount[j]._id==res[i]._id){
+        this.inventoryCount[j].TotalDev=res[i].TotalDev
+       }
+     }
+   }
+    // this.inventoryCount=res;
+   
+  })
+}
+
+exportCertificate(data){
+  
+                        data.actionId = "exportPdf";
+
+                        data.OwnerName = JSON.parse(JSON.stringify(data)).user.first_name + " " + JSON.parse(JSON.stringify(data)).user.last_name;
+                        //   data.Dealer_name = JSON.parse(JSON.stringify(data))
+                        var fstname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.first_name : "";
+                        var lsname = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.last_name : "";
+                        var dlraddress = (JSON.parse(JSON.stringify(data)).Dealer != undefined) ? JSON.parse(JSON.stringify(data)).Dealer.address : "";
+                        data.Dealer_name = fstname + " " + lsname;
+                        data.DealerAddress = dlraddress;data.deviceImage=data.deviceImage
+
+                        let dialogRef = this.dialog.open(CertOptionComponent, {
+                            data: { "deviceInfo": data }
+                        });
+
+
+                        dialogRef.afterClosed().subscribe(result => {
+                            // console.log(result);
+
+                            if (result == "advance") {
+                                let dialogRef_1 = this.dialog.open(EditDeviceMasterComponent, {
+                                    data: { "deviceInfo": data },
+                                    width: '650px',
+                                    height: '700px',
+                                });
+                            }
+
+                            if (result == "basic") {
+                                let dialogRef_2 = this.dialog.open(NormalCertComponent, {
+                                    data: { "deviceInfo": data }
+                                });
+                            }
+                        })
+}
+
+}
\ No newline at end of file
diff --git a/src/app/kyc-approval/kyc-approval.component.html b/src/app/kyc-approval/kyc-approval.component.html
new file mode 100644
index 0000000..a02454f
--- /dev/null
+++ b/src/app/kyc-approval/kyc-approval.component.html
@@ -0,0 +1,232 @@
+
+
+<div class="limiter">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="height: 65px;">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
+      aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <h6 class="navbar-brand" >KYC</h6>
+  
+    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
+      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+        <li class="nav-item active">
+        <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
+          class="fas fa-file-excel" (click)="downloadExcel()"></i>
+        </li>
+        <!-- <li class="nav-item">
+          <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
+            class="fas fa-file-pdf" (click)="downloadExcel()"></i>
+        
+        </li> -->
+        
+      </ul>
+      <ul style="position: absolute;left: 50%;transform: translatex(-50%);" class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange">
+        <!-- <li class="nav-item">
+          <a class="nav-link active" data-toggle="tab" href="#CustomerKYC" (click)="changeTab('customerKYC')" role="tab">Customer KYC</a>
+        </li> -->
+        <li class="nav-item">
+          <a class="nav-link active" data-toggle="tab" href="#DeviceKYC" (click)="changeTab('deviceKYC')" role="tab">Device KYC</a>
+        </li>
+      
+      </ul>
+      <form class="form-inline my-2 my-lg-0">
+        <div style="float: right;">
+          <div style="width: 80px; float: right; margin-top: -8px;">
+        
+            <button md-icon-button mdTooltip="Logout" style="float:right;outline:none;padding-top: 6px;" (click)="logout()">
+              <i class="fas fa-sign-out-alt" style=" color: white; font-size: 20px;"></i>
+            </button>
+            <app-notification></app-notification>
+          </div>
+        </div>
+
+        <!-- <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
+      </form>
+    </div>
+  </nav>
+  <div id="toast">
+    <div id="desc">{{ data_descip }}</div>
+  </div>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div class="card">
+    <div>
+      <!-- <div class="row card-header"> -->
+        <!-- <div class="col-5" style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          "> -->
+          <!-- <i style="cursor: pointer;float: left;font-size: 24px;margin-left: 16px;touch-action: none;user-select: none;"
+            class="fas fa-file-excel" (click)="downloadExcel()"></i> -->
+        <!-- <ul class="nav nav-tabs nav-tabs-neutral justify-content-center" role="tablist" data-background-color="orange">
+          <li class="nav-item">
+            <a class="nav-link active" data-toggle="tab" href="#CustomerKYC" role="tab">Customer KYC</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" data-toggle="tab" href="#DeviceKYC" role="tab">Device KYC</a>
+          </li>
+        
+        </ul> -->
+
+        <!-- </div> -->
+        <!-- <div class="col-7" style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          "> -->
+                         <!-- <div style="float: right;">
+                <div style="width: 80px; float: right; margin-top: -8px;">
+                 
+                  <button md-icon-button mdTooltip="Logout"  style="float:right;outline:none;padding-top: 6px;" (click)="logout()">
+                    <i class="fas fa-sign-out-alt" style=" color: white; font-size: 20px;"></i>
+                  </button>
+                  <app-notification></app-notification>
+                </div>
+              </div> -->
+        <!-- </div> -->
+      <!-- </div> -->
+      
+      <flash-messages class='fmsg'></flash-messages>
+      <div>
+      
+        <div class=card-body style="padding-top: 0px;">
+
+          
+          <div class="tab-content">
+            <div class="tab-pane" id="CustomerKYC" role="tabpanel">
+
+              <div class="card-header" style="
+                          width: 100%;
+                          text-align: center;
+                          align-items: center;
+                          background: #426e86;
+                          padding-top: 10px;
+                          padding-bottom: 10px;
+                          color: white;
+                          box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+                        ">
+                <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262">
+                  << {{ "Previous" | translate }} </button>
+                  
+                  <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px">
+                      {{ "Next" | translate }} >>
+                    </button>
+              
+                    <select [(ngModel)]="status" (ngModelChange)="changeStatus($event)" style="background: #efecec;height: 35px;">
+                      <option value="" selected disabled>Please select status</option>
+                      <option value="Pending">Pending</option>
+                      <option value="Approved">Approved</option>
+                      <option value="Reject">Reject</option>
+                    </select>
+
+                    <div style="float: right;">
+                      <input type="search"
+                        style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);"
+                        class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
+                        (ngModelChange)="searchFilter($event)" placeholder="{{ 'Customer Search' | translate }}" />
+                    </div>
+              </div>
+
+          <div class="table-responsive">
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                    <th>
+                      {{ "NAME" | translate }}
+                    </th>
+                    <th>
+                      {{ "USER ID" | translate }}
+                    </th>
+                    <th>
+                      {{ "EMAIL ID" | translate }}
+                    </th>
+                    <th>
+                      {{ "Dealer" | translate }}
+                    </th>
+                    <th>
+                      {{ "Distributer" | translate }}
+                    </th>
+                    <th>
+                      {{ "PHONE" | translate }}
+                    </th>
+                  <th>
+                    {{ "KYC Status" | translate }}
+                  </th>
+                    <th>
+                      {{ "View" | translate }}
+                    </th>
+                 
+               
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let cust_array of custumer">
+                 
+                  <td >
+                    {{ cust_array.first_name ? cust_array.first_name : "" }}
+                    {{ cust_array.last_name ? cust_array.last_name : "" }}
+                  </td>
+                  <td >
+                    {{ cust_array.user_id ? cust_array.user_id : "NA" }}
+                  </td>
+                  <td >
+                    {{ cust_array.email }}
+                  </td>
+                    <td>
+                      {{ cust_array.DealerDetails?cust_array.DealerDetails[0].first_name ? cust_array.DealerDetails[0].first_name : "" :''}}
+                      {{ cust_array.DealerDetails?cust_array.DealerDetails[0].last_name ? cust_array.DealerDetails[0].last_name : "" :''}}
+                      
+                    </td>
+                      <td>
+                        {{ cust_array.AdminDetails?cust_array.AdminDetails[0].first_name ? cust_array.AdminDetails[0].first_name : "" :''}}
+                        {{ cust_array.AdminDetails?cust_array.AdminDetails[0].last_name ? cust_array.AdminDetails[0].last_name : "" :''}}
+                      </td>
+                  <td>
+                    {{ custPhone(cust_array) }}
+                  </td>
+                
+                  <td >
+                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                      *ngIf="cust_array.kycStatus==undefined">Pending</button>
+                    <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small; background-color: orange;" *ngIf="cust_array.kycStatus=='Pending'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-success btn-sm" style="border-radius: 40px; font-size: x-small; background-color: green;" *ngIf="cust_array.kycStatus=='Approved'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-danger btn-sm" style="border-radius: 40px; font-size: x-small; background-color: red;" *ngIf="cust_array.kycStatus=='Reject'">{{cust_array.kycStatus}}</button>
+                    
+                  </td>
+
+                  <td>
+                    <i class="fas fa-eye" (click)="viewDocuments(cust_array)"></i>
+                  </td>
+                  
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          </div>
+
+
+          <!-- --------------------DEVICE KYC-------------------- -->
+          <div class="tab-pane active" id="DeviceKYC" role="tabpanel">
+            <app-device-kyc></app-device-kyc>
+          
+            </div>
+
+        </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/kyc-approval/kyc-approval.component.scss b/src/app/kyc-approval/kyc-approval.component.scss
new file mode 100644
index 0000000..a6aa3d4
--- /dev/null
+++ b/src/app/kyc-approval/kyc-approval.component.scss
@@ -0,0 +1,372 @@
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+  font-size: 12px;
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
+button,
+input {
+  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+}
+
+a {
+  color: #f96332;
+}
+
+a:hover,
+a:focus {
+  color: #f96332;
+}
+
+p {
+  line-height: 1.61em;
+  font-weight: 300;
+  font-size: 1.2em;
+}
+
+.category {
+  text-transform: capitalize;
+  font-weight: 700;
+  color: #9a9a9a;
+}
+
+body {
+  color: #2c2c2c;
+  font-size: 14px;
+  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
+  overflow-x: hidden;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.nav-item .nav-link,
+.nav-tabs .nav-link {
+  -webkit-transition: all 300ms ease 0s;
+  -moz-transition: all 300ms ease 0s;
+  -o-transition: all 300ms ease 0s;
+  -ms-transition: all 300ms ease 0s;
+  transition: all 300ms ease 0s;
+}
+
+.card a {
+  -webkit-transition: all 150ms ease 0s;
+  -moz-transition: all 150ms ease 0s;
+  -o-transition: all 150ms ease 0s;
+  -ms-transition: all 150ms ease 0s;
+  transition: all 150ms ease 0s;
+}
+
+[data-toggle="collapse"][data-parent="#accordion"] i {
+  -webkit-transition: transform 150ms ease 0s;
+  -moz-transition: transform 150ms ease 0s;
+  -o-transition: transform 150ms ease 0s;
+  -ms-transition: all 150ms ease 0s;
+  transition: transform 150ms ease 0s;
+}
+
+[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.now-ui-icons {
+  display: inline-block;
+  font: normal normal normal 14px/1 "Nucleo Outline";
+  font-size: inherit;
+  //   speak: none;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@-webkit-keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes nc-icon-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes nc-icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.now-ui-icons.objects_umbrella-13:before {
+  content: "\ea5f";
+}
+
+.now-ui-icons.shopping_cart-simple:before {
+  content: "\ea1d";
+}
+
+.now-ui-icons.shopping_shop:before {
+  content: "\ea50";
+}
+
+.now-ui-icons.ui-2_settings-90:before {
+  content: "\ea4b";
+}
+
+.nav-tabs {
+  border: 0;
+  padding: 15px 0.7rem;
+}
+
+.nav-tabs:not(.nav-tabs-neutral) > .nav-item > .nav-link.active {
+  box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
+}
+
+.card .nav-tabs {
+  border-top-right-radius: 0.1875rem;
+  border-top-left-radius: 0.1875rem;
+}
+
+.nav-tabs > .nav-item > .nav-link {
+  color: #888888;
+  margin: 0;
+  margin-right: 5px;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 30px;
+  font-size: 14px;
+  padding: 11px 23px;
+  line-height: 1.5;
+}
+
+.nav-tabs > .nav-item > .nav-link:hover {
+  background-color: transparent;
+}
+
+.nav-tabs > .nav-item > .nav-link.active {
+  background-color: #444;
+  border-radius: 30px;
+  color: #ffffff;
+}
+
+.nav-tabs > .nav-item > .nav-link i.now-ui-icons {
+  font-size: 14px;
+  position: relative;
+  top: 1px;
+  margin-right: 3px;
+}
+
+.nav-tabs.nav-tabs-neutral > .nav-item > .nav-link {
+  color: #ffffff;
+}
+
+.nav-tabs.nav-tabs-neutral > .nav-item > .nav-link.active {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.card {
+  border: 0;
+  border-radius: 0.1875rem;
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  //   margin-bottom: 30px;
+  //   box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+}
+
+.card .card-header {
+  background-color: transparent;
+  border-bottom: 0;
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+}
+
+.card[data-background-color="orange"] {
+  // background-color: #2d4262;
+}
+
+.card[data-background-color="red"] {
+  background-color: #ff3636;
+}
+
+.card[data-background-color="yellow"] {
+  background-color: #ffb236;
+}
+
+.card[data-background-color="blue"] {
+  background-color: #2ca8ff;
+}
+
+.card[data-background-color="green"] {
+  background-color: #15b60d;
+}
+
+[data-background-color="orange"] {
+  // background-color: #2d4262;
+}
+
+[data-background-color="black"] {
+  // background-color: #2c2c2c;
+}
+
+[data-background-color]:not([data-background-color="gray"]) {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"]) p {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"])
+  a:not(.btn):not(.dropdown-item) {
+  color: #ffffff;
+}
+
+[data-background-color]:not([data-background-color="gray"])
+  .nav-tabs
+  > .nav-item
+  > .nav-link
+  i.now-ui-icons {
+  color: #ffffff;
+}
+
+@font-face {
+  font-family: "Nucleo Outline";
+  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
+  src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot")
+    format("embedded-opentype");
+  src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+.now-ui-icons {
+  display: inline-block;
+  font: normal normal normal 14px/1 "Nucleo Outline";
+  font-size: inherit;
+  //   speak: none;
+  text-transform: none;
+  /* Better Font Rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+footer {
+  margin-top: 50px;
+  color: #555;
+  background: #fff;
+  padding: 25px;
+  font-weight: 300;
+  background: #f7f7f7;
+}
+.footer p {
+  margin-bottom: 0;
+}
+footer p a {
+  color: #555;
+  font-weight: 400;
+}
+
+footer p a:hover {
+  color: #e86c42;
+}
+
+@media screen and (max-width: 768px) {
+  .nav-tabs {
+    display: inline-block;
+    width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    text-align: center;
+  }
+
+  .nav-tabs .nav-item > .nav-link {
+    margin-bottom: 5px;
+  }
+}
+.mat-dialog-container {
+  padding: 0px !important;
+}
diff --git a/src/app/kyc-approval/kyc-approval.component.spec.ts b/src/app/kyc-approval/kyc-approval.component.spec.ts
new file mode 100644
index 0000000..4917a05
--- /dev/null
+++ b/src/app/kyc-approval/kyc-approval.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KycApprovalComponent } from './kyc-approval.component';
+
+describe('KycApprovalComponent', () => {
+  let component: KycApprovalComponent;
+  let fixture: ComponentFixture<KycApprovalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ KycApprovalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(KycApprovalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/kyc-approval/kyc-approval.component.ts b/src/app/kyc-approval/kyc-approval.component.ts
new file mode 100644
index 0000000..d8f163f
--- /dev/null
+++ b/src/app/kyc-approval/kyc-approval.component.ts
@@ -0,0 +1,548 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { Contact } from '../contact';
+import { ContactService } from '../contact.service';
+import {MdSnackBar} from '@angular/material';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AddCustComponent } from '../add-cust/add-cust.component';
+
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+import { EditCostumerComponent } from '../edit-costumer/edit-costumer.component';
+import { ReportService } from '../report/report.service';
+
+declare var swal: any;
+@Component({
+  selector: 'app-kyc-approval',
+  templateUrl: './kyc-approval.component.html',
+  styleUrls: ['./kyc-approval.component.scss']
+})
+export class KycApprovalComponent implements OnInit {
+ modelChanged: Subject<string> = new Subject<string>();
+  status
+  isCustomerKYC:Boolean=false;
+  kycStatus=[{Name:'Approved',value:'Approved'},{Name:'Reject',value:'Reject'},{Name:'Pending',value:'Pending'}]
+  dealerChk: boolean = false;
+  ev: any;
+  show1: boolean = false;
+  show2: boolean = true;
+  show3: boolean = false;
+  first_name: any;
+  logoutbut: boolean;
+  last_name: any;
+  passwordd: any;
+  org_name: any;
+  allUser:boolean=false;
+  emaill: any;
+  phone: any;
+  executed: any;
+  $event2: any;
+  dealer: any;
+  contacts: Contact[] = [];
+  contact: Contact;
+  login1: any;
+  mess2: any;
+  mess: any;
+  otp: any;
+  switchVal: any;
+  str: boolean = false;
+  password2: any;
+  cust_load: any;
+  errmsg: boolean =true;
+  serviceResponse: string;
+  errorMsg: boolean;
+  showNav: boolean =false;
+  url: any;
+  dealer_Permission: any;
+  adbtn: string;
+  myInput: string;
+  report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  clear() {
+    this.first_name = ' '
+    this.last_name = ' '
+    this.emaill = null
+    this.phone = null
+  }
+  before: any;
+  emmnerr: any;
+  Load: any
+  $event: any;
+  openDialog() {
+  
+        let dialogRef = this.dialog.open(AddCustComponent, {
+          width: '800px',
+        //  height: '600px', 
+    
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          // console.log(result);
+          if (result == "succ") {
+            this.tost1("succ");
+            this.ngOnInit();
+    
+          }
+        });
+  }
+
+
+
+  constructor(private contactService: ContactService, public snackBar: MdSnackBar, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog,private reportService:ReportService) {
+    this.modelChanged
+      .debounceTime(1000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+        // console.log('debounce')
+        // this.dealerDetail();
+       
+        this.ngOnInit();
+      });
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  data_descip: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i, td1;
+      input = document.getElementById("myInput");
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[1];
+        td1 = tr[i].getElementsByTagName("td")[0]
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+searchFilter(text: string) {
+    this.modelChanged.next(text);
+    // this.myInput;
+    // console.log(this.myInput);
+    // this.sidebarData()
+
+  }
+  tost1(divid) {
+    if (divid == "EmM") {
+      this.data_descip = this.emmnerr.split(":")[1]
+      launch_toast();
+    }
+    else if (divid == "succ") {
+      this.data_descip = "Custumer Successfully Added"
+      launch_toast();
+    }else if(divid == "reportPref"){
+      this.data_descip = "Report Preference updated !!!"
+      launch_toast();
+    }else if(divid == "password_changed"){
+      this.data_descip = "Password updated !!!";
+      launch_toast();
+    }else if(divid == "alertset"){
+      this.data_descip = "Alert preference updated !!!";
+      launch_toast();
+    }else if(divid=="kyc"){
+       this.data_descip = "KYC Status updated !!!";
+      launch_toast();
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+  }
+
+  changeStatus(ev){
+    console.log(ev);
+    this.getCustomer()
+
+  }
+
+  valclear() {
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 2000 });
+
+  }
+
+  click1(event) {
+    this.show2 = false;
+    this.show3 = true;
+    if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+
+    else
+      event.preventDefault();
+  }
+  click2(event2) {
+    this.show2 = true;
+    this.show3 = false;
+
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+  devicess: any;
+  final: any;
+ 
+   cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  run() {
+
+  }
+
+  devicesss: any;
+  subscription: any;
+  timer: any;
+  messageSuccess: any = true;
+  selectedlanguage :any; 
+
+
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  custumer: any=[];
+  mb: any;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      console.log('whatishere=>',this.superAdmin);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).cust_add_permission;
+
+    // console.log(test);
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.adbtn = localStorage.getItem("dlrchk");
+    localStorage.setItem("dlrchk", this.custtype);
+    //  this.getdev();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+ 
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+      history.pushState(null, null, document.URL);
+    });
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.getCustomer();
+  }
+
+
+  getCustomer(){
+     this.Load = true;  
+    this.contactService.getCustumer1(this.useridd, this.skip, this.limit,this.myInput,this.allUser,this.status).subscribe(  
+      data => {
+        this.Load = false;
+        this.custumer=[];
+        this.custumer = data;
+        for(var i=0;i<this.custumer.length;i++){
+          if(this.custumer[i].adminAlert == undefined){
+            this.custumer[i]['adminAlert'] = false;
+          }
+          if(this.custumer[i].dealerAlert == undefined){
+            this.custumer[i]['dealerAlert'] = false;
+          }
+        }
+        console.log("custDetail=>", this.custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        this.custumer=[];
+        this.firstcall = true;
+        this.lastcall = false;
+      });
+  }
+
+  
+
+
+ 
+
+  skip: number = 1;
+  limit: number = 20;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    this.ngOnInit();
+    // this.sidebarData();
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 1) {
+      this.skip -= 1;
+      this.lastcall = false;
+      this.firstcall = false;
+      this.ngOnInit();
+      // this.sidebarData();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+  
+
+   viewDocuments(docs){
+    console.log("Documents=>", docs);
+    var  that =this;
+    docs.ID = 'viewDoc';
+    console.log(docs);
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '900px', 
+      data: { dealer_payload: docs }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "yes") {
+        this.getCustomer()
+      }
+
+      if (result == "no") {
+     
+      }
+      if(result == 'imageupdated'){
+        swal(
+          'Updated',
+          'Documents has been Updated.',
+          'success'
+        ) 
+          this.ngOnInit();
+      }
+    });
+  }
+
+  custPhone(dlr){
+  var dphn = '';
+  if(dlr.std_code != undefined){
+     dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+     return dphn ; 
+  }else{
+     dphn = dlr.phone ; 
+    return dphn ; 
+  }
+}
+
+allUserFunction(ev){
+  console.log('event=>',ev);
+  this.allUser = ev.checked ;
+   
+    this.skip = 1;
+    this.getCustomer(); 
+}
+
+
+
+changeKYC(data,event){
+  console.log(event);
+  var req={
+    user:data._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+     this.tost1('kyc');
+  })
+  
+}
+
+
+tab:any;
+  
+  downloadExcel() {
+
+    if(this.isCustomerKYC){
+      this.Load = true;  
+    this.contactService.get('/users/getCustomer?uid='+this.useridd).subscribe(  
+      (data:any) => {
+        this.Load = false;
+       var custumer=[];
+        custumer = data;
+        for(var i=0;i<custumer.length;i++){
+         
+           custumer[i].fullName=custumer[i].first_name?custumer[i].first_name:''+" "+custumer[i].last_name?custumer[i].last_name:'';
+          if(i==(custumer.length-1)){
+  
+            this.downloadFile(custumer);
+          }
+          }
+        console.log("custDetail=>", custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        // custumer=[];
+        // this.firstcall = true;
+        // this.lastcall = false;
+      });
+
+    }else{
+      this.reportService.downloadDeviceExcel(true);
+    }
+
+
+    
+  }
+
+  downloadFile(data) {
+   
+    let arrHeader = ["fullName", "email", "phone", "user_id","kycStatus","total_vehicle"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Customer List.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+     this.Load = false;
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Customer List \r\n';
+    let row = 'S.No,';
+// name,emial,phone,id,password and status no of vehicles
+    let newHeaders =["Name", "Email", "Phone", "User id","Status","Number of Vehicle"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+ 
+
+logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+
+  changeTab(type){
+    if(type=="deviceKYC"){
+      this.isCustomerKYC=false
+    }else{
+       this.isCustomerKYC=true
+    }
+
+  }
+
+}
diff --git a/src/app/load-management/load-management.component.html b/src/app/load-management/load-management.component.html
new file mode 100644
index 0000000..2826fd1
--- /dev/null
+++ b/src/app/load-management/load-management.component.html
@@ -0,0 +1,26 @@
+<app-all-menus></app-all-menus>
+<div style="padding-top: 70px;">
+<h4 style="text-align:center;text-align: center;padding: 20px;color: #797474;font-size: 1.3rem;">LOAD MANAGEMENT</h4>
+<flash-messages></flash-messages>
+<table id="test" class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+  <thead style="background-color:#A2C523;color: white;">
+    <tr>
+      <th>Group</th>
+      <th>Device Name</th>
+      <th>Loading Site</th>
+      <th>Distance </th>
+      <th>ETA</th>
+  </thead>
+  <tbody>
+    <tr *ngFor="let load of loadManagement">
+      <td style="cursor:pointer">{{load.groupName}}</td>
+      <td style="cursor:pointer">{{load.deviceName}}</td>
+
+      <td style="cursor:pointer">{{load.geofenceName}}</td>
+      <td style="cursor:pointer">{{load.Distance}}</td>
+      <td style="cursor:pointer"></td>
+    </tr>
+  </tbody>
+</table>
+</div>
\ No newline at end of file
diff --git a/src/app/load-management/load-management.component.scss b/src/app/load-management/load-management.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/load-management/load-management.component.spec.ts b/src/app/load-management/load-management.component.spec.ts
new file mode 100644
index 0000000..4e7fd6d
--- /dev/null
+++ b/src/app/load-management/load-management.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadManagementComponent } from './load-management.component';
+
+describe('LoadManagementComponent', () => {
+  let component: LoadManagementComponent;
+  let fixture: ComponentFixture<LoadManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoadManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/load-management/load-management.component.ts b/src/app/load-management/load-management.component.ts
new file mode 100644
index 0000000..fbf183b
--- /dev/null
+++ b/src/app/load-management/load-management.component.ts
@@ -0,0 +1,85 @@
+import { ContactService } from './../contact.service';
+import { Component, OnInit } from '@angular/core';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+@Component({
+  selector: 'app-load-management',
+  templateUrl: './load-management.component.html',
+  styleUrls: ['./load-management.component.scss']
+})
+export class LoadManagementComponent implements OnInit {
+  loadManagement=[];
+  useridd: any;
+  reportData: {};
+  loadManagement_response: any;
+  errorMsg: string;
+  data_descip: any;
+
+  constructor(public _contactService :ContactService,private _flashMessagesService: FlashMessagesService) { }
+
+  ngOnInit() {
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.getLoadManagementData();
+  }
+
+
+  getLoadManagementData(){
+    
+    var uId = this.useridd;
+    this._contactService.getLoad_managementData(uId)
+      .subscribe(res=>{
+        // console.log(res);
+        this.loadManagement_response=res;
+
+        if(this.loadManagement_response.length==0){
+          this._flashMessagesService.show('No data Available', { cssClass: 'alert-danger', timeout: 3000 });
+        }else{
+          for(var i=0;i<this.loadManagement_response.length;i++){
+            this.reportData = {
+              deviceName: this.loadManagement_response[i].devName,
+              groupName : (this.loadManagement_response[i].devGrp.length!=0)?this.loadManagement_response[i].devGrp[0].name:"", 
+              geofenceName:(this.loadManagement_response[i].gfs.length!=0)?this.loadManagement_response[i].gfs[0].geoname:"",
+              Distance:(this.loadManagement_response[i].gfs.length!=0)?parseFloat((this.loadManagement_response[i].gfs[0].dist.calculated)).toFixed(2):""
+            } 
+            this.loadManagement.push(this.reportData);
+  
+          }
+          // console.log("dataToShow",this.loadManagement);
+        }
+    
+      },err=>{
+        // console.log(err.status);
+        if(err.status==500){
+          this._flashMessagesService.show('Internal Server error, Please try after sometime', { cssClass: 'alert-danger', timeout: 3000 });
+        }
+        
+      })
+     
+  }
+
+
+  tost1(divid){
+    if(divid == "Isr"){
+      this.data_descip = "Internal server error";
+      launch_toast();
+      
+    }
+   else if(divid == "emptyArr"){
+    this.data_descip = "No data available";
+    launch_toast();
+    
+    // this.onNoClick("succ");
+   }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", "this.data_descip"); }, 1500);
+    }
+     }
+
+
+
+}
diff --git a/src/app/loader-service/loader-service.component.html b/src/app/loader-service/loader-service.component.html
new file mode 100644
index 0000000..4effdf8
--- /dev/null
+++ b/src/app/loader-service/loader-service.component.html
@@ -0,0 +1,3 @@
+<p>
+  loader-service works!
+</p>
diff --git a/src/app/loader-service/loader-service.component.scss b/src/app/loader-service/loader-service.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/loader-service/loader-service.component.spec.ts b/src/app/loader-service/loader-service.component.spec.ts
new file mode 100644
index 0000000..b0aa001
--- /dev/null
+++ b/src/app/loader-service/loader-service.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderServiceComponent } from './loader-service.component';
+
+describe('LoaderServiceComponent', () => {
+  let component: LoaderServiceComponent;
+  let fixture: ComponentFixture<LoaderServiceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderServiceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderServiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loader-service/loader-service.component.ts b/src/app/loader-service/loader-service.component.ts
new file mode 100644
index 0000000..22a8e16
--- /dev/null
+++ b/src/app/loader-service/loader-service.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loader-service',
+  templateUrl: './loader-service.component.html',
+  styleUrls: ['./loader-service.component.scss']
+})
+export class LoaderServiceComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/location/add-device/add-device.component.html b/src/app/location/add-device/add-device.component.html
new file mode 100644
index 0000000..13e90b5
--- /dev/null
+++ b/src/app/location/add-device/add-device.component.html
@@ -0,0 +1,58 @@
+<div class="container-fluid" style="background: #f9f9f9;padding:0px">
+  <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
+      <p style="margin-bottom: 0px;">{{'ADD DEVICE' | translate}}</p>
+  </div>
+  <div class="row" style="margin:0px;padding-top: 10px;">
+      <div class="col-12">
+        <p *ngIf="errorIcon" style="text-align: left;font-size: 15px;font-weight: 600;color: red;">{{ImmErrMsg}}</p>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+              <md-form-field class="example-full-width width" style="width: 100%;">
+                      <input mdInput type="number" [(ngModel)]="device_id" placeholder="Enter device id" name="did" required>
+                      <md-error class="pattern">{{'Device id is mendatory' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+      <div class="col-6">
+              <md-form-field class="example-full-width width" style="width: 100%;">
+                      <input mdInput type="text" [(ngModel)]="device_name" placeholder="{{'Enter device name' | translate}}" name="dname" required>
+                      <md-error class="pattern">{{'Please device name' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+              <md-form-field class="example-full-width width" style="width: 100%;padding-top: 6px;">
+                      <input  mdInput type="number" minlength="10" maxlength="13" [(ngModel)]="device_sim" placeholder="{{'Enter sim number' | translate}}" name="sim" required>
+                      <md-error class="pattern">{{'Please Enter sim number' | translate}}</md-error>
+                  </md-form-field>
+      </div>
+      <div class="col-6">
+        <md-select  [(ngModel)]="device_license" style="width: 100%;">
+          <md-option *ngFor="let license of licenseArr" [value]="license">{{license}}</md-option>
+        </md-select>
+        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select license type</small>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+        <md-select  [(ngModel)]="modelId" style="width: 100%;">
+          <md-option *ngFor="let model of modelArr" [value]="model._id">{{model.modelName}}</md-option>
+        </md-select>  
+        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select device model</small>
+      </div>
+      <div class="col-6">
+        <md-select  [(ngModel)]="vtypeId" style="width: 100%;" >
+          <md-option *ngFor="let vArr of vehicleArr" [value]="vArr._id">{{vArr.vehicle_name}}</md-option>
+        </md-select>
+        <small id="g" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please select vehicle type</small>
+      </div>
+  </div>
+  <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
+      <div class="col-12">
+          <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="add()">{{'ADD' | translate}}</button>
+          <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="close()">{{'CANCEL' | translate}}</button>
+      </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/location/add-device/add-device.component.scss b/src/app/location/add-device/add-device.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/location/add-device/add-device.component.spec.ts b/src/app/location/add-device/add-device.component.spec.ts
new file mode 100644
index 0000000..202f27e
--- /dev/null
+++ b/src/app/location/add-device/add-device.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddDeviceComponent } from './add-device.component';
+
+describe('AddDeviceComponent', () => {
+  let component: AddDeviceComponent;
+  let fixture: ComponentFixture<AddDeviceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddDeviceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddDeviceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/add-device/add-device.component.ts b/src/app/location/add-device/add-device.component.ts
new file mode 100644
index 0000000..5e050df
--- /dev/null
+++ b/src/app/location/add-device/add-device.component.ts
@@ -0,0 +1,202 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+@Component({
+  selector: 'app-add-device',
+  templateUrl: './add-device.component.html',
+  styleUrls: ['./add-device.component.scss']
+})
+export class AddDeviceComponent implements OnInit {
+  errmsg:any='';
+  device_license:any='Yearly';
+  device_id:any;
+  device_name:any;
+  device_sim:any;
+  licenseArr=['Yearly','Lifetime'];
+  modelArr=[];
+  vehicleArr=[];
+  modelId:any;
+  vtypeId:any;
+  useridd: any;
+  superAdmin: any;
+  emailid: any;
+  sup_admin: any;
+  custId: string;
+  custtype: any;
+  DealerId: any;
+  cust: boolean;
+  createdby: any;
+  dealerid: any;
+  owner: any;
+  errorIcon: boolean=false;
+  ImmErrMsg: string;
+  constructor(public dialogRef: MdDialogRef<AddDeviceComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,) { 
+
+    }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;  
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+
+    this.custId = localStorage.getItem('custId');
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.DealerId =  JSON.parse(window.atob(window.localStorage.Dealer_token.split(".")[1]))._id;  
+    console.log("DealerID",this.DealerId) 
+    var accountToggle ;
+    var sat =localStorage.getItem('superadmin') ;
+    var ddt =localStorage.getItem('Dealer') ;
+    var cst = localStorage.getItem('Custumer');
+    var d =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer_ID;
+    console.log('sat,ddt,cst',sat,ddt,cst);
+    if((sat === 'ON')&&(ddt=== 'ON')&&(cst === 'ON')){
+      this.dealerid= d._id;
+      this.owner = d._id;
+    }
+    if((sat === 'ON')&&(ddt=== 'ON')&&(cst === 'OFF')){
+            this.dealerid= this.useridd;
+            this.owner = this.sup_admin;
+
+    }
+
+    if((sat === 'OFF')&&(ddt=== 'ON')&&(cst === 'OFF')){
+            this.dealerid=  this.sup_admin;
+            this.owner = this.sup_admin;
+    }
+
+ 
+   this.getDeviceModel();
+    this.getvehDetail();
+    
+
+  }
+
+  add(){
+    console.log();
+    if((this.device_id === undefined)||(this.device_name === undefined)||(this.device_sim === undefined)||(this.modelId === undefined)||(this.vtypeId === undefined)){
+      // this._flashMessagesService.show('Please fill all mendatory field', { cssClass: 'alert-danger', timeout: 3000 });
+      var that = this ;
+
+      var timeOutVal = setTimeout(()=>{
+        console.log('inside tout');
+        that.errorIcon = false;
+        that.ImmErrMsg = "";
+        clearTimeout(timeOutVal);
+      },3000)
+      this.errorIcon = true;
+      this.ImmErrMsg = "Please fill all mendatory field";
+    }else{
+      var ed = new Date();
+      var newDevice = {
+        devicename: this.device_name,
+        deviceid: this.device_id,
+        model: this.modelId,
+        typdev: "Tracker",
+        emailid: this.emailid,
+        Mileage : "10",
+        sim_number: this.device_sim,
+        created_by: this.owner,
+        Dealer :  this.dealerid,
+        vehicleType :  this.vtypeId,
+        supAdmin: this.sup_admin,
+        device_model: this.modelId,
+        expdate: ed.setFullYear(ed.getFullYear()+1),
+        License : this.device_license,
+        user : this.useridd  
+      }
+      console.log(newDevice);
+      this.contactService.addDevice(newDevice)
+      .subscribe((device) => {
+        this.dialogRef.close('added')
+      },err=>{
+        if (err.status == 400) {
+
+          var that = this ;
+
+          var timeOutVal = setTimeout(()=>{
+            console.log('inside tout');
+            that.errorIcon = false;
+            that.ImmErrMsg = "";
+            clearTimeout(timeOutVal);
+          },3000)
+          // this._flashMessagesService.show('The Device ID already exists in our system.', { cssClass: 'alert-danger', timeout: 3000 });
+          this.errorIcon = true;
+          this.ImmErrMsg = "The Device ID already exists in our system.";
+        }else{
+
+          var that = this ;
+
+          var timeOutVal = setTimeout(()=>{
+            console.log('inside tout');
+            that.errorIcon = false;
+            that.ImmErrMsg = "";
+            clearTimeout(timeOutVal);
+          },3000)
+            // this._flashMessagesService.show('Internal server error', { cssClass: 'alert-danger', timeout: 3000 });
+            this.errorIcon = true;
+            this.ImmErrMsg = "Internal server error";
+        }
+      })
+
+
+      
+      // if (this.custtype) {
+      //   newDevice['Dealer'] = this.useridd;
+      // } else {
+      //   newDevice['Dealer'] = this.DealerId
+      // }
+   
+
+
+
+    }
+  }
+
+  close(){
+    // this._flashMessagesService.hide()
+  
+    this.dialogRef.close();
+  }
+
+  getDeviceModel() {
+    this.contactService.getDevModel()
+      .subscribe(res => {
+        this.modelArr=[];
+        this.modelArr = res;
+        var devname = [];
+      
+        for(var i = 0 ; i<this.modelArr.length;i++){
+          var modelName;        
+          if(this.modelArr[i].deviceport != undefined){
+            modelName = this.modelArr[i].device_type + " " + "(Port : " + this.modelArr[i].deviceport + ")";   
+          }else{
+            modelName = this.modelArr[i].device_type;
+          }
+          this.modelArr[i]['modelName']= modelName;
+        }
+        console.log(devname);
+      })
+  }
+
+
+  getvehDetail(){
+    this.contactService.getvehType(this.useridd)
+      .subscribe(res=>{
+        this.vehicleArr=res;
+        var vdata = res;
+        for(var a = 0;a<this.vehicleArr.length;a++){
+            var vehtypename = vdata[a].brand + " " + vdata[a].model;
+            this.vehicleArr[a].vehicle_name = vehtypename;
+        }
+         console.log("allveh",this.vehicleArr);
+      })
+  }
+
+}
diff --git a/src/app/location/cmd-ui/cmd-ui.component.html b/src/app/location/cmd-ui/cmd-ui.component.html
new file mode 100644
index 0000000..f249235
--- /dev/null
+++ b/src/app/location/cmd-ui/cmd-ui.component.html
@@ -0,0 +1,46 @@
+
+<div class="container">
+  <div class="row" >
+   <div class="col-12" > 
+    <p style="text-align: center;padding-top: 5px; padding-bottom: 5px;color: white;background: #202f46;margin-bottom: 0;">Send  Command</p>
+   </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Action</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="action" aria-describedby="phoneHelp" placeholder="Action">
+      <small id="exampleInputphone12" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Action</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <div class="row">
+        <div class="col-12">
+        <div *ngFor="let cmd of commands">
+          <!-- <div (change)="changeColor(command)" class="cclr" style="display: flex;background: #2f4f60;color: white;padding: 7px;cursor: pointer;border: 1px solid white;">
+          
+            <p style="width: 50%">{{cmd.name?cmd.name:'--'}}</p>
+            <p style="width: 50%" >{{cmd.value?cmd.value:'--'}}</p>
+          </div>
+         -->
+        </div>  
+        </div>
+      </div>
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Command</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="command" aria-describedby="phoneHelp" placeholder="Command">
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type command for trigger</small>
+    </div>
+  </div>
+
+
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 14px;font-weight: 500;margin-bottom: 10px;">{{errmsg}}</p>
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="triggerCommand()"> Send Commanad </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="close()"> Cancel </button> 
+    </div>
+  </div>
+</div>
+<!-- style="width:25%;border-right: 2px solid white;"
+style="width:25%;border-right: 2px solid white;"
+style="width:25%;border-right: 2px solid white;" -->
\ No newline at end of file
diff --git a/src/app/location/cmd-ui/cmd-ui.component.scss b/src/app/location/cmd-ui/cmd-ui.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/location/cmd-ui/cmd-ui.component.spec.ts b/src/app/location/cmd-ui/cmd-ui.component.spec.ts
new file mode 100644
index 0000000..614ed67
--- /dev/null
+++ b/src/app/location/cmd-ui/cmd-ui.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CmdUIComponent } from './cmd-ui.component';
+
+describe('CmdUIComponent', () => {
+  let component: CmdUIComponent;
+  let fixture: ComponentFixture<CmdUIComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CmdUIComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CmdUIComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/cmd-ui/cmd-ui.component.ts b/src/app/location/cmd-ui/cmd-ui.component.ts
new file mode 100644
index 0000000..9049329
--- /dev/null
+++ b/src/app/location/cmd-ui/cmd-ui.component.ts
@@ -0,0 +1,60 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-cmd-ui',
+  templateUrl: './cmd-ui.component.html',
+  styleUrls: ['./cmd-ui.component.scss']
+})
+export class CmdUIComponent implements OnInit {
+  useridd: any;
+  errFlag:boolean=false;
+  errmsg:any='';
+  command:any;
+  action:any;
+  device_type: any;
+
+
+    constructor(public dialogRef: MdDialogRef<CmdUIComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+      
+
+     }
+     commands=[];
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    var d_model = this.data.deviceObject.device_model;
+    this.contactService.getDeviceModelbyID(d_model).subscribe(res=>{
+      console.log('deviceModel=>',res);
+      this.device_type = res[0].device_type;
+    })
+
+
+  }
+
+  triggerCommand(){
+    console.log(this.data);
+    var imei = this.data.deviceObject.Device_ID; 
+        console.log('this.device_type',this.device_type);
+
+    var pld = {
+      command:this.command,
+      protocol_type:this.device_type, 
+      action:this.action,
+      imei:imei,
+      user : this.useridd
+    }
+        console.log("command triggered",pld);
+        this.contactService.triggerCommand(pld).subscribe(res=>{
+          console.log(res);
+          this.dialogRef.close('success');
+        })
+  }
+
+
+  close(){
+    console.log('closed');
+    this.dialogRef.close('cancel');
+  }
+}
diff --git a/src/app/location/command-window/command-window.component.html b/src/app/location/command-window/command-window.component.html
new file mode 100644
index 0000000..4e03f3d
--- /dev/null
+++ b/src/app/location/command-window/command-window.component.html
@@ -0,0 +1,40 @@
+  <div class="limiter" *ngIf= "menuShow">
+    <div class="row" style="margin: 0; padding: 5px;background: #1f5652;color: white;cursor: pointer;">
+      <div class="col-12">
+        <span>{{DeviceName}}</span>
+        <i class="far fa-times-circle" style="float: right;
+        color: white;
+        padding-top: 5px;" (click)="close()"></i>
+      </div>
+    </div>
+  <div class="row limiter1">
+    <div class="col-12">
+      <div *ngFor="let cmdName of CommandArr">
+        <button type="button" style="width: 100%; border-radius: 0;margin: 0; text-align: inherit;" class="btn btn-outline-dark" (click)="triggerCMd(cmdName)">
+          {{cmdName.name}}
+          <i class="fas fa-angle-right" style="color: white;float: right;padding-top: 5px;cursor: pointer;"></i>
+        </button>
+      </div>
+    </div>  
+  </div>
+</div> 
+<div class="limiter" *ngIf="!menuShow" style="height: 225px;">
+  <i style="font-size: 20px;float:right;;color: red;cursor: pointer;" title="Close"  (click)="close()" class="far fa-times-circle"></i>
+  <div *ngIf="showErr === false" >
+    <div style="text-align: center; padding: 20px;color: #426e86;">
+      <i style="font-size: 60px; text-align: center;" class="far fa-clock"></i>
+    </div>     
+    <p style="text-align: center;font-size: 16px;font-weight: 600;color: #a2a2a2;">Command Triggered , Please wait :</p>
+    <div style="text-align: center; padding: 10px;font-size: 16px;font-weight: 600;color: #a2a2a2;">
+      <span style="font-size: 40px;">{{immobilizeCount}}</span>
+      <span>Sec.</span>
+    </div>      
+  </div> 
+  <div  *ngIf="showErr === true">
+    <div *ngIf="errorIcon" style="text-align: center; padding: 20px;">
+      <i  style="font-size: 60px;" class="far fa-times-circle"></i>
+    </div>     
+    <p *ngIf="errorIcon" style="text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;">{{ImmErrMsg}}</p>
+    <p *ngIf="!errorIcon" style="padding:60px;text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;overflow-wrap: break-word;">{{ImmErrMsg}}</p>
+  </div>   
+</div> 
\ No newline at end of file
diff --git a/src/app/location/command-window/command-window.component.scss b/src/app/location/command-window/command-window.component.scss
new file mode 100644
index 0000000..cdbca2f
--- /dev/null
+++ b/src/app/location/command-window/command-window.component.scss
@@ -0,0 +1,12 @@
+// .limiter{
+    
+//     max-height: 500px;
+//     overflow: auto;
+//     overflow-x: hidden;
+// }
+
+.limiter1{
+    max-height: 500px;
+    overflow: auto;
+    overflow-x: hidden;
+}
\ No newline at end of file
diff --git a/src/app/location/command-window/command-window.component.spec.ts b/src/app/location/command-window/command-window.component.spec.ts
new file mode 100644
index 0000000..736e1c4
--- /dev/null
+++ b/src/app/location/command-window/command-window.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommandWindowComponent } from './command-window.component';
+
+describe('CommandWindowComponent', () => {
+  let component: CommandWindowComponent;
+  let fixture: ComponentFixture<CommandWindowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommandWindowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommandWindowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/command-window/command-window.component.ts b/src/app/location/command-window/command-window.component.ts
new file mode 100644
index 0000000..b6d24a2
--- /dev/null
+++ b/src/app/location/command-window/command-window.component.ts
@@ -0,0 +1,326 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var swal: any;
+@Component({
+  selector: 'app-command-window',
+  templateUrl: './command-window.component.html',
+  styleUrls: ['./command-window.component.scss']
+})
+export class CommandWindowComponent implements OnInit {
+  useridd: any;
+  device_type: any;
+  CommandArr=[];
+  DeviceName: any;
+  menuShow:boolean=true;
+  immobilizeCount: number;
+  errIcon: boolean;
+  showErr: boolean=false;
+  ImmErrMsg: any;
+  shoError: any;
+  errorIcon: boolean;
+
+  constructor(public dialogRef: MdDialogRef<CommandWindowComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { }
+
+  ngOnInit() {
+    this.CommandArr=[];
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    var d_model = this.data.deviceObject.device_model;
+    console.log(this.data);
+    
+    this.DeviceName = this.data.deviceObject.Device_Name; 
+    this.contactService.getDeviceModelbyID(d_model).subscribe(res=>{
+      console.log('deviceModel=>',res);
+      this.device_type = res[0].device_type;
+ 
+    //   sms_ip:{
+    //   type:String
+    // },
+    // sms_apn:{
+    //   type:String
+    // },
+    //  sms_timezone:{
+    //   type:Date
+    // },
+    // sms_loc:{
+    //   type:String
+    // },
+    // sms_param:{
+    //   type:String
+    // },
+    //  sms_reset:{
+    //   type:String
+    // },
+    // image_path:{
+    //   type:String
+    // },
+
+      if(res[0].location_command){
+        var temp = {
+          name: "Check Location",
+          action: "LOCATION",
+          value: res[0].location_command,
+          value1: res[0].sms_loc,
+        }
+        
+        this.CommandArr.push(temp);
+      }
+      if(res[0].reset_command){
+        var temp1 = {
+          name: "Reset",
+          action:"",
+          value: res[0].reset_command,
+          value1: res[0].sms_reset,
+        }
+        this.CommandArr.push(temp1);
+      }
+      if(res[0].resume_command){
+        var temp2 = {
+          name: "Restore Engine",
+          action:"ON",
+          value: res[0].resume_command,
+          //  value1: res[0].sms_reset,
+        }
+        this.CommandArr.push(temp2);
+      }
+
+    var  tempObj = {
+        name: "Stop Engine",
+        action :"OFF",
+        value: ''
+      }
+      this.CommandArr.push(tempObj);
+    
+      tempObj = {
+        name: "SOS Number",
+        action:"SOSNUMBER",
+        value: ''
+      }
+      this.CommandArr.push(tempObj);
+
+      tempObj = {
+        name: "Check Status",
+        action:"STATUS",
+        value: ''
+      }
+      this.CommandArr.push(tempObj);
+
+      tempObj = {
+        name: "Check Parameters",
+        action:"PARAM",
+        value: ''
+      }
+      this.CommandArr.push(tempObj);
+
+      tempObj = {
+        name: "Check Settings",
+        action:"SETTING",
+        value: ''
+      }
+      this.CommandArr.push(tempObj);
+
+      tempObj = {
+        name: "Firmware Version",
+        action:"PARAM",
+        value: 'FIRMVERSION'
+      }
+      this.CommandArr.push(tempObj);
+
+      if(res[0].configuration_command){
+        var temp3 = {
+          name: "Configuration Command",
+          action: "CONFIG",
+          value: res[0].configuration_command
+        }
+        this.CommandArr.push(temp3);
+        
+
+      }
+      if(res[0].immoblizer_command){
+        var temp4 = {
+          name: "Immobilise Command",
+          action:"",
+          value: res[0].immoblizer_command
+        }
+        this.CommandArr.push(temp4);
+
+
+      }
+
+      var tempObj = {
+        name: "More",
+        action:"",
+        value: 'openWindow'
+      }
+
+      this.CommandArr.push(tempObj);
+      console.log('this.CommandArr',this.CommandArr);
+
+      console.log(this.data);
+      var imei = this.data.deviceObject.Device_ID; 
+          console.log('this.device_type',this.device_type);
+  
+ 
+
+
+
+    })
+
+  }
+
+  triggerCMd(cmdObj){
+    this.errorIcon= false;
+    var that =this;
+    var pld = {
+          cmd: cmdObj.action,
+          imei:this.data.deviceObject.Device_ID,
+          protocol_type: this.device_type, 
+          user : this.data.deviceObject.user
+      }
+    console.log(cmdObj);
+    if(cmdObj.value === 'openWindow'){
+      this.dialogRef.close('openOther');
+    }else{
+
+  //     $(document).ready(function() {
+  // $("#close_account").on("click", function(e) {
+    var buttons = $('<div>')
+    .append(that.createButton('GPRS Command', function() {
+       
+      //  console.log('ok');
+       that.gpsCommand(pld) 
+    })).append(that.createButton('SMS Command', function() {
+       swal.close();
+       that.smsCommand(cmdObj.value1)
+      //  console.log('Later'); 
+    })).append(that.createButton('Cancel', function() {
+       swal.close();
+       console.log('Cancel');
+    }));
+    
+    // e.preventDefault();
+    swal({
+      title: "Please choose command",
+      html: buttons,
+      type: "info",
+      showConfirmButton: false,
+      showCancelButton: false
+    });
+     
+      
+    console.log("command triggered",pld);
+ 
+    // this.contactService.triggerCommand1(pld).subscribe(res=>{
+    //   console.log('command triggered Response',res);
+    //   this.checkCmdstatus(res['_id']);
+    //   },err=>{
+    //       // this.dialogRef.close('close');  
+    //       this.menuShow = !this.menuShow;
+    //       console.log(JSON.parse(err['_body']));
+    //       var errorMessage = JSON.parse(err['_body']);
+    //       that.errorIcon= true;
+    //       that.showErr  =  !that.showErr ;
+    //       that.ImmErrMsg = errorMessage.message;
+    //   })
+
+    }
+
+  }
+
+  smsCommand(s){
+    console.log(s);
+    
+    var pld={
+      phone:this.data.deviceObject.sim_number,
+      user:this.useridd,
+      sentence:s
+    }
+    this.contactService.post('/notifs/sendMessage',pld).subscribe(res=>{
+      console.log('command triggered Response',res);
+      // this.checkCmdstatus(res['_id']);
+      },err=>{
+          // this.dialogRef.close('close');  
+          this.menuShow = !this.menuShow;
+          console.log(JSON.parse(err['_body']));
+          var errorMessage = JSON.parse(err['_body']);
+          this.errorIcon= true;
+          this.showErr  =  !this.showErr ;
+          this.ImmErrMsg = errorMessage.message;
+          swal.close();
+      })
+  }
+
+  gpsCommand(pld){
+    this.contactService.triggerCommand1(pld).subscribe(res=>{
+      console.log('command triggered Response',res);
+      this.checkCmdstatus(res['_id']);
+      },err=>{
+          // this.dialogRef.close('close');  
+          this.menuShow = !this.menuShow;
+          console.log(JSON.parse(err['_body']));
+          var errorMessage = JSON.parse(err['_body']);
+          this.errorIcon= true;
+          this.showErr  =  !this.showErr ;
+          this.ImmErrMsg = errorMessage.message;
+          swal.close();
+      })
+  }
+
+
+createButton(text, cb) {
+  if(text=="cancel"){
+     return $('<button style="background: red;color: white;border-radius: 5px;padding: 7px;margin: 8px; ">' + text + '</button>').on('click', cb);
+  }else
+  return $('<button style="background: blue;color: white;border-radius: 5px;padding: 7px;margin: 8px; ">' + text + '</button>').on('click', cb);
+}
+  checkCmdstatus(cmdQId){
+    this.menuShow = !this.menuShow;
+    this.immobilizeCount = 45; 
+    var that=this;
+    var timer = setInterval(()=>{
+      that.immobilizeCount--
+      if( that.immobilizeCount=== 0){
+        clearInterval(timer);
+        clearInterval(callApi);
+        that.errorIcon= true;
+        that.showErr  =  !that.showErr ;
+        that.ImmErrMsg = "Timeout occured, Please Try again";
+      }
+    },1000)
+
+    // var stopCalling = setTimeout(()=>{
+    //   clearInterval(timer);
+    //   clearInterval(callApi);
+    //   clearTimeout(stopCalling);
+
+    // },45000)
+
+    var callApi = setInterval(()=>{
+      this.contactService.getEngineCutStatus_1(cmdQId).subscribe(res1=>{
+        // console.log('res11111111111111111111111111111111111111=>',res1.status);
+        if(res1.status == 'SUCCESS'){
+          clearInterval(timer);
+          clearInterval(callApi);
+          that.showErr  =  !that.showErr ;
+          // console.log('res11111111111111111111111111111111111111=>',res1)
+          that.ImmErrMsg = res1.deviceResponse;
+        }       
+      },err=>{
+        clearInterval(timer);
+        clearInterval(callApi);
+        that.showErr  =  !that.showErr ;
+        that.ImmErrMsg = "Please Try after sometime";
+      })
+    },4000)
+ 
+
+  }
+
+
+
+  close(){
+    this.dialogRef.close('close');
+  }
+}
+
+
diff --git a/src/app/location/create-trip/create-trip.component.html b/src/app/location/create-trip/create-trip.component.html
new file mode 100644
index 0000000..77e86ce
--- /dev/null
+++ b/src/app/location/create-trip/create-trip.component.html
@@ -0,0 +1,53 @@
+<!-- <div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <p>CREATE TRIP</p>
+    </div>
+  </div>
+  <div class="row">
+    <md-form-field style="margin-left: 2%;">
+        <input type="text" mdInput name="text" [(ngModel)]="TripName" placeholder="Trip Name">
+      </md-form-field>   
+    <md-form-field  style="margin-left: 2%;">
+        <input type="text" mdInput name="text" id="txtSource"  placeholder="Your Location">
+      </md-form-field>
+      <md-form-field style="margin-left: 2%;">
+        <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius">
+      </md-form-field>
+      <button md-raised-button (click)="create_trip()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">Create Trip</button>
+      <button class="btn btn-danger w3-button/" (click)="cancel()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">Cancel</button>
+</div>
+<div class="row">
+  <div class="col-12">
+      <div id="poiAddMap" style="padding: 0px;width: 100%;height: 100%;"></div>
+  </div>
+</div>
+</div> -->
+
+<div class="container-fluid" style="padding: 0%;margin:0%;background: #ededed">
+  <p style="text-align: center; font-size: 20px; font-weight: 500; padding-top: 14px; padding-bottom: 10px;">{{'CREATE TRIP' | translate}}</p>
+  <div class="row" style="text-align: center;margin-bottom: 12px">
+    <div class="col-4">
+      <md-form-field style="margin-left: 2%;">
+        <input type="text" mdInput name="text" [(ngModel)]="TripName" placeholder="{{'Trip Name' | translate}}">
+      </md-form-field>
+    </div>
+    <div class="col-4">
+        <md-form-field  style="margin-left: 2%;">
+            <input type="text" mdInput name="text" id="txtSource"  placeholder="{{'Select destination' | translate}}">
+          </md-form-field>
+    </div>
+    <div class="col-4" style="margin-top: 5px;">
+        <button md-raised-button style="background: #31428c; color: white;" (click)="create_trip()" >{{'Create Trip' | translate}}</button>
+        <button md-raised-button style="background: red; color: white;" (click)="this.dialogRef.close()" >{{'Cancel' | translate}}</button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12" style="padding-left: 50px; font-weight: 500; color: #7d1e1e;">
+      <p style="margin-bottom: 0%">Total Distance: <span id="total"></span></p>
+    </div>
+  </div>
+
+  <div id="poiAddMap" style="width: 100% ; height:400px"></div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/location/create-trip/create-trip.component.scss b/src/app/location/create-trip/create-trip.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/location/create-trip/create-trip.component.spec.ts b/src/app/location/create-trip/create-trip.component.spec.ts
new file mode 100644
index 0000000..5fd245d
--- /dev/null
+++ b/src/app/location/create-trip/create-trip.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateTripComponent } from './create-trip.component';
+
+describe('CreateTripComponent', () => {
+  let component: CreateTripComponent;
+  let fixture: ComponentFixture<CreateTripComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateTripComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateTripComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/create-trip/create-trip.component.ts b/src/app/location/create-trip/create-trip.component.ts
new file mode 100644
index 0000000..10fc494
--- /dev/null
+++ b/src/app/location/create-trip/create-trip.component.ts
@@ -0,0 +1,314 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { GetdevdetailComponent } from '../../const/getdevdetail/getdevdetail.component';
+import { ContactService } from '../../contact.service';
+declare var google: any;
+declare var swal: any;
+@Component({
+  selector: 'app-create-trip',
+  templateUrl: './create-trip.component.html',
+  styleUrls: ['./create-trip.component.scss']
+})
+export class CreateTripComponent implements OnInit {
+  addLat: number;
+  addlng: number;
+  AddMapObj: any;
+  addressString: any;
+  source_address: any;
+  poiRadius:any;
+  POINAME:any;
+  TripName:any;
+  vehData: any;
+  destLat: any;
+  destLong: any;
+  directionsService: any;
+  directionsDisplay: any;
+  useridd: any;
+  IMEI: any;
+  Dealer: any;
+  supAdmin: any;
+
+  constructor(public dialogRef: MdDialogRef<GetdevdetailComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,public contactService: ContactService) { 
+      console.log("dataVehicle=>",data);
+      this.vehData = data;
+    }
+
+  ngOnInit() {
+    this.mapFunction();
+    this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+
+    this.contactService.getdevById(this.vehData.vehicleId).subscribe(res=>{
+      var tempObj = JSON.parse(res['_body']);
+      console.log("tempObj", tempObj);
+
+      this.IMEI = tempObj._id;
+      this.useridd = tempObj.user;
+      if(tempObj.Dealer){
+        this.Dealer = tempObj.Dealer;
+
+      }
+      if(tempObj.supAdmin){
+        this.supAdmin  = tempObj.supAdmin;
+      }
+      console.log("this.IMEI",this.IMEI);
+    },err=>{
+      console.log(err);
+    })
+
+    
+  }
+
+  mapFunction(){
+    var that = this;
+    console.log("add");
+  
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        var curr_position :any;
+     
+        if(that.vehData.LatLng){
+           curr_position = {
+            lat: that.vehData.LatLng.lat,
+            lng: that.vehData.LatLng.long
+          } 
+          
+          that.addLat =  that.vehData.LatLng.lat;
+          that.addlng = that.vehData.LatLng.long;
+        }else{
+           curr_position = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          }  
+
+          that.addLat =  position.coords.latitude;
+          that.addlng = position.coords.longitude;
+        }
+       
+        // console.log(this.curr_position);
+        that.addLat =  position.coords.latitude;
+        that.addlng = position.coords.longitude;
+        var mapAdd = new google.maps.Map(document.getElementById('poiAddMap'),{
+          center: {lat:  curr_position.lat, lng: curr_position.lng},
+          zoom: 15
+        });
+        // that.AddMapObj = mapAdd;
+
+        var icon1 = {
+          url: "./assets/image/ico_direccion.png", // url
+          scaledSize: new google.maps.Size(50, 50), // scaled size
+        
+      };
+
+        var marker = new google.maps.Marker({
+          position: curr_position,
+          map: mapAdd,
+          // draggable:true,
+          icon: icon1
+        });
+    
+      
+        // google.maps.event.addListener(marker, 'dragend', function() 
+        // {
+        //     console.log("Inside dragend");
+        
+        //      var la = marker.getPosition().lat();
+        //      var ln = marker.getPosition().lng(); 
+        //      that.addLat =la;
+        //      that.addlng = ln;
+
+        //      console.log(that.addLat,that.addlng);
+         
+        // });
+
+                var input = document.getElementById('txtSource');
+               
+                var searchBox = new google.maps.places.SearchBox(input);
+            
+                var directionsService = new google.maps.DirectionsService;
+                var directionsDisplay = new google.maps.DirectionsRenderer({
+                    // draggable: true,
+                    map: mapAdd
+                  });
+
+                  directionsDisplay.setOptions( { suppressMarkers: true } );
+               
+                  marker.setMap(null);
+              
+                searchBox.addListener('places_changed', function() {
+                  if(that.markerNew){   
+                    that.markerNew.setMap(null);
+                  }
+                  var places = searchBox.getPlaces();
+                  if (places.length == 0) {
+                    return;
+                  }
+                  console.log(places);
+               
+                  var bounds = new google.maps.LatLngBounds();
+                  places.forEach(function(place:any) {
+                    console.log(place.formatted_address);
+                    console.log(place.geometry.location);
+                    that.addressString = place.formatted_address;
+                    // that.addLat =  place.geometry.location.lat();
+                    // that.addlng = place.geometry.location.lng();
+                
+                    that.destLat = place.geometry.location.lat();
+                    that.destLong = place.geometry.location.lng();
+                    var destination = new google.maps.LatLng(that.destLat, that.destLong);
+                    console.log(that.destLat,that.destLong);
+                    if (!place.geometry) {
+                      // console.log("Returned place contains no geometry");
+                      return;
+                    }
+
+                    var icon2 = {
+                      url: "./assets/image/ico_dest_direccion.png", // url
+                      scaledSize: new google.maps.Size(50, 50), // scaled size
+                    
+                  };
+
+                  // var marker = new google.maps.Marker({
+                  //   position: curr_position,
+                  //   map: mapAdd,
+                  //   // draggable:true,
+                  //   icon: icon1
+                  // });
+
+
+                  var sourcePoint  = new google.maps.LatLng(curr_position.lat, curr_position.lng);
+
+
+                  var destPosition = {
+                    lat: that.destLat,
+                    lng: that.destLong
+                  }
+            
+                    // var marker_dest = new google.maps.Marker({
+                    //   position: destPosition,
+                    //   map: mapAdd,
+                    //   // draggable:true,
+                    //   icon: icon2
+                    // });
+                                     google.maps.event.addListener(directionsDisplay, 'click', function(h) {
+                        // console.log(h.latLng.lat(),h.latLng.lng());
+                      });
+                      // that.computeTotalDistance(that.directionsDisplay.getDirections());
+                    
+                      directionsDisplay.addListener('directions_changed', function() {
+                        that.computeTotalDistance(directionsDisplay.getDirections());
+                      });  
+                    
+                      that.displayRoute(sourcePoint, destination, directionsService,directionsDisplay,mapAdd,icon1,icon2)
+                    
+        
+                    // if (place.geometry.viewport) {
+                    //   // Only geocodes have viewport.
+                      
+                    //   bounds.union(place.geometry.viewport);
+                    // } else {
+                    //   bounds.extend(place.geometry.location);
+                    // }
+                    // marker.setPosition(place.geometry.location);
+                    // marker.setVisible(true);
+                  });
+                  mapAdd.fitBounds(bounds);
+                });
+ 
+      })  
+     }
+  }
+
+  totalDistance : any;
+  computeTotalDistance(result) {
+    var total = 0;
+    var myroute = result.routes[0];
+    for (var i = 0; i < myroute.legs.length; i++) {
+      total += myroute.legs[i].distance.value;
+    }
+    total = total / 1000;
+    this.totalDistance = total;
+    document.getElementById('total').innerHTML = total + ' km';
+  }
+
+  displayRoute(origin, destination, service, display,map,i1,i2) {
+    var that= this;
+  
+    console.log(origin, destination);
+      service.route({
+        origin: origin,
+        destination: destination, 
+        travelMode: 'DRIVING',   
+        avoidTolls: true
+      }, function(response, status) {
+        if (status === 'OK') {
+          display.setDirections(response);
+          console.log('response=>',response);
+
+          var leg = response.routes[ 0 ].legs[ 0 ];
+          that.makeMarker( leg.start_location, i1, "title",map );
+          that.makeMarker( leg.end_location, i2, 'title',map );
+        }else{
+         
+          alert('Could not display directions due to: ' + status);
+        }
+      });
+      
+  }
+  markerNew:any;
+  makeMarker(position, icon, title,map){
+   
+ this.markerNew =  new google.maps.Marker({
+      position: position,
+      map: map,
+      icon: icon,
+      title: title
+     });
+ 
+  }
+  create_trip(){
+  
+   
+  if(this.TripName == undefined){
+    console.log("TripName is Mendatory");
+  }else{
+    var payload = {
+      "user": this.useridd,
+      "device": this.IMEI,
+      "start_loc": {
+        "lat": this.addLat,
+        "long": this.addlng
+      },
+      "trip_status": 'Started',
+      "end_loc": {
+        "lat": this.destLat,
+        "long": this.destLong
+      },
+      "trip_name": this.TripName,
+      "start_time": new Date().toISOString()
+  
+  }
+
+  if(this.Dealer != undefined){
+    payload['Dealer'] = this.Dealer;
+  }
+  if(this.supAdmin != undefined){
+    payload['supAdmin'] = this.supAdmin;
+  }
+
+  this.contactService.createTrip(payload).subscribe(res=>{
+            console.log(res);
+            var tripInfo = {};
+            tripInfo['reponse'] = res;
+            tripInfo['msg'] = 'created'
+            this.dialogRef.close(JSON.stringify(tripInfo));
+  },err=>{
+
+  })
+
+  }
+    
+  }
+}
+
+
diff --git a/src/app/location/immobilize/immobilize.component.html b/src/app/location/immobilize/immobilize.component.html
new file mode 100644
index 0000000..ff1292d
--- /dev/null
+++ b/src/app/location/immobilize/immobilize.component.html
@@ -0,0 +1,16 @@
+<div class="mainDiv">
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <label for="exampleInputEmail1" style="font-weight: 500;">Engine Lock Password</label>
+    <input type="password" class="form-control" id="exampleInputEmail1" [(ngModel)]="inputEngincutPass" aria-describedby="emailHelp" placeholder="Enter password">
+    <small id="emailHelp" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type immobilize password for lock/unlock engine</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+        <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 12px;">{{errmsg}}</p>
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="proceed()"> Proceed </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="close()"> Cancel </button> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/location/immobilize/immobilize.component.scss b/src/app/location/immobilize/immobilize.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/location/immobilize/immobilize.component.spec.ts b/src/app/location/immobilize/immobilize.component.spec.ts
new file mode 100644
index 0000000..384995c
--- /dev/null
+++ b/src/app/location/immobilize/immobilize.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImmobilizeComponent } from './immobilize.component';
+
+describe('ImmobilizeComponent', () => {
+  let component: ImmobilizeComponent;
+  let fixture: ComponentFixture<ImmobilizeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImmobilizeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImmobilizeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/immobilize/immobilize.component.ts b/src/app/location/immobilize/immobilize.component.ts
new file mode 100644
index 0000000..2428093
--- /dev/null
+++ b/src/app/location/immobilize/immobilize.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-immobilize',
+  templateUrl: './immobilize.component.html',
+  styleUrls: ['./immobilize.component.scss']
+})
+export class ImmobilizeComponent implements OnInit {
+  inputEngincutPass:any;
+  engine_cut_password:any;
+  errmsg: string;
+  constructor(public dialogRef: MdDialogRef<ImmobilizeComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+        this.engine_cut_password = this.data.engineCutpass ;
+        console.log('engine_cut_password',this.engine_cut_password);
+    }
+
+  ngOnInit() {
+  }
+
+  errFlag= false;
+  proceed(){
+    if(this.engine_cut_password === this.inputEngincutPass){
+      this.dialogRef.close('succ');
+
+    }else{
+      this.errmsg = "password not matched";
+      this.errFlag = true
+      var that = this ; 
+     var endTIme =  setTimeout(function(){ 
+            that.errFlag = false;
+            clearTimeout(endTIme);
+       }, 7000);
+
+    }
+
+  }
+
+  close(){
+    this.dialogRef.close('close');
+  }
+
+}
diff --git a/src/app/location/live-history/live-history.component.html b/src/app/location/live-history/live-history.component.html
new file mode 100644
index 0000000..d18d9f7
--- /dev/null
+++ b/src/app/location/live-history/live-history.component.html
@@ -0,0 +1,95 @@
+
+  <app-all-menus></app-all-menus>
+  <div style="min-height:420px;padding-top: 70px;">
+    <p class="headStyle">{{'Vehicle History' | translate}}</p>
+    <div class="loading" *ngIf="Load"></div>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-2">
+          <md-input-container>
+            <input mdInput placeholder="Search" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="deviceName"
+            (ngModelChange)="filterDevices(deviceName)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+                <span>{{device.viewValue}}</span>
+              </md-option >
+            </md-autocomplete>   
+          </md-input-container>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-4" style="top: 16px;">
+          <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="generateHistory()">{{'Generate History' | translate}}</button>
+          <!-- <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button> -->     
+            <a  *ngIf="SpeedMeter2"  (click)="inter('slow')" style="padding-left:20px;" id="blog6" mdTooltip="Rewind"> <img src="../../assets/image/rewind.png"></a> 
+            <a   (click)="play(null)" style="padding-left:20px; padding-right:20px;" id="blog4" mdTooltip="Play History"> <img src="../../assets/image/ic_play.png"></a>    
+            <a  *ngIf="SpeedMeter2" (click)="inter('fast')" id="blog5" mdTooltip="Fast Forward"> <img src="../../assets/image/forward.png"></a>
+        </div>
+      </div>
+    </div>
+    <div style="width: 100%">
+      <div id="poiAddMap" style="padding: 0px;width: 100%;display: flex;height: 70vh;"></div>
+      <canvas style="position:absolute;top:25%;right: 5%;" *ngIf="SpeedMeter2" data-type="radial-gauge"
+data-width="140px"
+ data-height="138px"
+ data-units="Speed"
+ data-units="KMPH"
+ data-min-value="0"
+ data-max-value="220"
+ data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
+ data-minor-ticks="2"
+ data-stroke-ticks="true"
+ data-highlights='[
+            { "from": 0, "to": 50, "color": "#6fff72" },
+            { "from": 50, "to": 100, "color": "yellow" },
+            { "from": 100, "to": 150, "color": "#fb3232" },
+            { "from": 150, "to": 200, "color": "red" },
+            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
+        ]'
+ data-ticks-angle="225"
+ data-start-angle="67.5"
+ data-color-major-ticks="black"
+ data-color-minor-ticks="black"
+ data-color-title="black"
+ data-color-units="black"
+ data-color-numbers="black"
+ data-color-plate="#f9f9f9"
+ data-border-shadow-width="0"
+ data-borders="true"
+ data-needle-type="arrow"
+ data-needle-width="1"
+ data-needle-circle-size="7"
+ data-needle-circle-outer="true"
+ data-needle-circle-inner="false"
+ data-animation-duration="1500"
+ data-animation-rule="linear"
+ data-color-border-outer="#ddd"
+ data-color-border-outer-end="#ddd"
+ data-color-border-middle="#ddd"
+ data-color-border-middle-end="#ddd"
+ data-color-border-inner="#ddd"
+ data-color-border-inner-end="#ddd"
+ data-color-needle-shadow-down="#333"
+ data-color-needle-circle-outer="#333"
+ data-color-needle-circle-outer-end="#111"
+ data-color-needle-circle-inner="#111"
+ data-color-needle-circle-inner-end="#222"
+ data-value-box-border-radius="0"
+ data-color-value-box-rect="white"
+ data-color-value-box-rect-end="white"
+ data-font-value="Led"
+ data-font-numbers="Led"
+ data-font-title="Led"
+ data-font-units="Led"
+data-value="0"
+[attr.data-value]=speeed2
+></canvas>
+  </div>
+  </div>
diff --git a/src/app/location/live-history/live-history.component.scss b/src/app/location/live-history/live-history.component.scss
new file mode 100644
index 0000000..791e961
--- /dev/null
+++ b/src/app/location/live-history/live-history.component.scss
@@ -0,0 +1,20 @@
+.headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+      border-radius: 10px;
+    }
+  }
\ No newline at end of file
diff --git a/src/app/location/live-history/live-history.component.spec.ts b/src/app/location/live-history/live-history.component.spec.ts
new file mode 100644
index 0000000..e4ab400
--- /dev/null
+++ b/src/app/location/live-history/live-history.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LiveHistoryComponent } from './live-history.component';
+
+describe('LiveHistoryComponent', () => {
+  let component: LiveHistoryComponent;
+  let fixture: ComponentFixture<LiveHistoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LiveHistoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LiveHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/live-history/live-history.component.ts b/src/app/location/live-history/live-history.component.ts
new file mode 100644
index 0000000..5858bc8
--- /dev/null
+++ b/src/app/location/live-history/live-history.component.ts
@@ -0,0 +1,926 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+declare var google: any;
+declare var swal: any;
+import * as moment from 'moment-timezone';
+declare var MarkerClusterer: any;
+@Component({
+  selector: 'app-live-history',
+  templateUrl: './live-history.component.html',
+  styleUrls: ['./live-history.component.scss']
+})
+export class LiveHistoryComponent implements OnInit {
+  Fromdate = new Date();
+  todate = new Date();
+  deviceObj =[];
+  Load: boolean;
+  globalMap : any;
+  globalMarker: any;
+  emailid: any;
+  useridd: any;
+  latLngLine: any[];
+  dev_id: any;
+  ddid: any;
+  latlongObjArr: any=[];
+  path: any;
+  speed: any;
+  im: any;
+  datee: string;
+  time: any;
+  dataArrayCoords: any=[];
+  lat: any;
+  lng: any;
+  devicon: any;
+  dis: boolean;
+  stoppage_container: any[];
+  arrival: Date;
+  departure: Date;
+  data2: any;
+  total_dis: any;
+  avg_speed: any;
+  ideal_time: any;
+  latLongArr2: any[];
+  latitude: any;
+  longitude: any;
+  arrivalTime: string;
+  departureTime: string;
+  addresslocation: any;
+  Durations: string;
+  SpeedMeter2: boolean;
+  speeed2: number=0;
+  superAdmin: any;
+  custtype: any;
+  supadmin: any;
+  dealerid: any;
+  userID: any;
+  constructor(private contactService:ContactService) { }
+
+  ngOnInit() {
+    var alpha = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+    console.log(alpha);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email 
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    console.log(this.superAdmin);
+    console.log(this.custtype);
+
+    if(this.superAdmin == true){
+      this.supadmin =this.useridd;
+    }
+     if(this.custtype == true){
+      this.dealerid = this.useridd;
+    }
+
+
+    this.Fromdate.setHours(0,0,0);
+    this.getAllDevice();
+    var that = this;
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        var curr_position = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        }  
+  
+        var map = new google.maps.Map(document.getElementById('poiAddMap'),{
+          center: {lat:  curr_position.lat, lng: curr_position.lng},
+          zoom: 15
+        });
+        console.log(that.globalMap);
+        that.globalMap = map;
+        var icon1 = {
+          url: "./assets/image/ico_direccion.png", // url
+          scaledSize: new google.maps.Size(50, 50), // scaled size
+        
+      };
+        var marker = new google.maps.Marker({
+          position: curr_position,
+          map: map,
+          draggable:false,
+          icon: icon1
+        });
+
+        that.globalMarker = marker;
+      })
+      }
+
+  }
+
+
+  getAllDevice() {
+    this.Load = true;
+    console.log(this.supadmin,this.dealerid,this.userID);
+    var search ;
+    this.contactService.alldevices1(this.useridd,this.emailid,this.supadmin,this.dealerid,search)
+      .subscribe(res => {
+        this.Load = false;   
+        this.deviceObj = [];
+        var Alldevices = {
+          id: "all",
+          viewValue: "ALL Devices",
+          iconType : "",
+          deviceId:""
+        }
+        console.log("device obj =>",res.devices);
+        this.deviceObj.push(Alldevices);
+        for (var i = 0; i < res.devices.length; i++) {
+          Alldevices = {
+            id: res.devices[i]._id,
+            viewValue: res.devices[i].Device_Name ? res.devices[i].Device_Name : "",
+            iconType : res.devices[i].iconType,
+            deviceId : res.devices[i].Device_ID      
+          }
+          this.deviceObj.push(Alldevices)
+        }
+      }, err => {
+        this.Load = false;
+        console.log(err);
+      })
+  }
+
+  deviceSelect: any = [];
+  deviceName: any;
+  filterDevices(dlr) {
+    if(dlr.length == 0){
+      this.deviceSelect =[];
+    }
+      if (dlr) {
+          const filterdealerValue: any = dlr;
+          this.deviceSelect = [];
+          this.deviceSelect = this.deviceObj.filter(function(pp) {
+              var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+              return t > -1;
+          });
+          return this.deviceSelect;
+      }
+  }
+
+  inter(b) {
+    // console.log(b);
+    if (b == 'fast') {
+      this.speed = 2 * this.speed;
+      // console.log(this.speed)
+    }
+    else if (b == 'slow') {
+      if (this.speed > 50) {
+        this.speed = this.speed / 2;
+        // console.log(this.speed)
+      }
+      else {
+        /*  this.speed =200 */
+      }
+    }
+    else {
+      this.speed = 200
+    }
+    //this.play(null)
+  }
+
+  play(a) {
+    var ongoingMoveMarker = null;
+    this.SpeedMeter2 = true;
+   
+    // console.log("viewObj", this.dataArrayCoords)
+    // console.log(this.dataArrayCoords);
+    var map, marker;
+  
+    var coord = this.dataArrayCoords[0];
+    // console.log(coord);
+    var lat = coord[0];
+    // console.log(lat);
+    var lng = coord[1];
+    let outerThis = this
+    var startPos = [lat, lng];
+    this.speed = 200
+
+
+    var iconselected = this.devicon
+    var delay = 100;
+    var car = 'M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z';
+    var bike = "M419 1754 l3 -44 -37 0 c-21 0 -34 4 -30 10 3 6 -1 10 -9 10 -19 0 -66 -21 -66 -30 0 -18 44 -44 71 -42 16 1 29 0 29 -2 0 -12 -24 -56 -30 -56 -4 0 -7 -6 -7 -12 0 -7 -8 -29 -16 -48 l-15 -35 -7 30 c-4 17 -8 36 -11 43 -6 19 -40 14 -69 -11 l-27 -23 16 -134 c12 -99 23 -149 41 -186 28 -57 25 -84 -10 -84 -34 0 -51 -25 -31 -45 9 -9 16 -33 16 -53 0 -30 -9 -46 -44 -84 -24 -27 -42 -48 -40 -48 2 0 -10 -21 -26 -47 -17 -27 -30 -61 -30 -79 0 -35 35 -189 52 -232 6 -15 10 -41 9 -59 -3 -34 19 -53 58 -53 12 0 21 -6 21 -14 0 -12 -7 -13 -32 -5 -44 12 -70 11 -66 -2 2 -6 21 -12 41 -14 21 -1 43 -7 49 -13 17 -17 23 -119 8 -137 -10 -12 -9 -19 3 -38 l15 -23 -46 23 c-29 15 -63 23 -94 23 -56 0 -61 -14 -17 -48 24 -20 42 -24 97 -24 63 -1 69 -3 109 -39 22 -21 38 -41 35 -44 -4 -4 -2 -5 3 -4 6 1 30 -3 55 -10 54 -16 142 -9 176 14 13 8 24 13 24 10 0 -3 16 13 36 34 35 39 36 40 103 39 59 -1 73 2 99 23 45 35 41 49 -17 49 -32 0 -64 -8 -97 -25 -27 -14 -42 -20 -33 -13 10 8 14 23 11 38 -10 54 -7 139 6 152 7 7 30 13 52 13 27 0 40 4 40 13 0 11 -9 13 -36 8 -19 -4 -42 -10 -50 -13 -10 -3 -12 0 -8 10 3 8 18 17 33 20 23 5 30 13 35 41 4 18 13 47 20 62 8 16 26 77 41 136 l26 106 -45 90 c-24 49 -56 102 -70 119 -14 17 -23 33 -19 37 3 3 1 6 -5 6 -15 0 -16 57 -1 62 22 7 -3 38 -31 38 -19 0 -31 6 -34 18 -7 20 38 114 49 104 5 -4 5 -2 2 4 -4 7 0 67 9 135 8 68 13 134 10 145 -8 29 -60 51 -81 34 -8 -7 -15 -22 -15 -35 0 -43 -13 -33 -46 36 -19 39 -34 73 -34 76 0 3 13 3 30 1 22 -3 35 2 50 17 27 29 17 49 -26 53 -22 1 -33 -2 -29 -8 4 -6 -8 -10 -29 -10 -34 0 -35 1 -38 43 -3 42 -3 42 -43 43 l-40 1 4 -43z m-140 -187 c13 -16 5 -27 -21 -27 -14 0 -18 -5 -14 -17 8 -29 26 -196 24 -220 -5 -48 -19 -2 -32 106 -16 127 -15 133 3 155 16 20 25 20 40 3z m402 -3 c7 -9 14 -22 15 -30 4 -26 -25 -237 -34 -246 -12 -12 -12 12 0 127 6 55 16 103 22 107 6 4 -2 12 -22 19 -26 9 -30 14 -21 25 15 18 24 18 40 -2z m-123 -226 c48 -23 54 -30 46 -51 -5 -13 -10 -14 -39 -1 -50 21 -163 18 -207 -5 -35 -17 -37 -17 -41 0 -7 24 23 49 85 70 58 20 89 18 156 -13z m28 -469 c39 -36 56 -76 56 -134 2 -169 -205 -230 -284 -85 -26 47 -21 155 7 176 10 8 15 14 10 14 -13 0 27 41 50 51 11 5 46 7 77 6 45 -3 64 -9 84 -28z m131 -37 c7 -8 10 -19 7 -23 -3 -5 -1 -9 4 -9 17 0 21 -41 10 -103 -10 -59 -28 -100 -28 -64 0 14 -44 137 -75 209 -6 15 -2 16 32 11 21 -3 43 -12 50 -21z m-455 -49 c-15 -38 -30 -71 -35 -74 -5 -3 -8 -9 -8 -13 3 -21 0 -36 -8 -36 -5 0 -11 30 -13 68 -5 61 -3 69 20 95 14 15 36 27 48 27 l22 0 -26 -67z m377 -317 c19 14 25 14 32 3 13 -21 12 -23 -21 -42 -16 -10 -30 -23 -30 -28 0 -6 -4 -8 -8 -5 -4 2 -9 -9 -10 -25 -2 -22 2 -29 16 -29 14 0 21 -12 29 -44 10 -43 9 -45 -13 -43 -13 1 -29 10 -37 21 -13 17 -15 14 -37 -40 -13 -33 -30 -65 -38 -72 -9 -6 -12 -12 -7 -12 4 0 0 -9 -10 -20 -35 -39 -107 -11 -117 45 -1 11 -9 26 -15 33 -12 12 -17 33 -15 54 1 3 -5 11 -13 18 -11 9 -16 7 -25 -9 -12 -23 -50 -29 -50 -7 0 44 14 76 32 76 17 0 19 4 13 23 -4 12 -7 30 -8 39 -1 9 -4 15 -8 12 -4 -2 -19 6 -33 18 -19 16 -23 27 -17 37 8 12 13 12 34 -2 l25 -16 7 39 c4 22 8 40 9 40 1 0 18 -9 39 -19 l37 -19 -28 -8 c-15 -4 -30 -7 -33 -6 -3 0 -6 -11 -5 -26 l1 -27 125 0 c120 0 125 1 128 21 2 16 -5 25 -27 34 l-31 12 33 22 32 22 10 -43 c10 -43 10 -44 34 -27z m-161 11 c2 -10 -3 -17 -12 -17 -18 0 -29 16 -21 31 9 14 29 6 33 -14z m-58 -11 c0 -16 -18 -31 -27 -22 -8 8 5 36 17 36 5 0 10 -6 10 -14z m108 -10 c3 -12 -1 -17 -10 -14 -7 3 -15 13 -16 22 -3 12 1 17 10 14 7 -3 15 -13 16 -22z m-148 -5 c0 -14 -18 -23 -31 -15 -8 4 -7 9 2 15 18 11 29 11 29 0z m198 -3 c-3 -7 -11 -13 -18 -13 -7 0 -15 6 -17 13 -3 7 4 12 17 12 13 0 20 -5 18 -12z m-430 -224 c37 -10 25 -23 -14 -14 -19 5 -38 11 -41 14 -8 8 26 7 55 0z m672 -3 c-8 -5 -35 -11 -60 -15 l-45 -6 35 14 c39 16 96 21 70 7z m-454 -113 l29 -30 -30 15 c-17 8 -38 24 -48 35 -18 20 -18 20 1 15 11 -2 33 -18 48 -35z m239 15 c-11 -8 -33 -21 -50 -30 l-30 -15 30 31 c16 17 35 29 42 27 7 -3 13 0 13 6 0 6 3 8 7 4 5 -4 -1 -14 -12 -23z"
+    var truck = 'M180 1725 c0 -8 -21 -25 -47 -37 -27 -12 -58 -31 -70 -42 l-23 -20 0 -495 0 -496 23 -18 c12 -10 31 -24 42 -32 20 -13 20 -14 -2 -37 -21 -22 -23 -34 -23 -131 0 -65 -4 -107 -10 -107 -5 0 -10 -7 -10 -15 0 -8 5 -15 10 -15 6 0 10 -31 10 -74 0 -44 5 -78 11 -82 8 -4 7 -9 -2 -15 -38 -23 96 -89 181 -89 85 0 219 66 181 89 -9 6 -10 11 -2 15 6 4 11 38 11 82 0 43 4 74 10 74 6 0 10 7 10 15 0 8 -4 15 -10 15 -6 0 -10 43 -10 108 0 96 -2 108 -20 120 -30 18 -24 38 20 69 l40 28 0 491 0 491 -22 24 c-22 24 -86 59 -106 59 -5 0 -12 9 -15 20 -5 18 -14 20 -91 20 -70 0 -86 -3 -86 -15z m115 -101 c21 -8 35 -45 28 -72 -7 -29 -47 -44 -78 -30 -29 13 -38 36 -29 72 7 30 43 44 79 30z m-148 -726 c-1 -134 -2 -25 -2 242 0 267 1 376 2 243 2 -134 2 -352 0 -485z m250 0 c-1 -134 -2 -25 -2 242 0 267 1 376 2 243 2 -134 2 -352 0 -485z m-102 326 c21 -9 35 -46 28 -74 -12 -44 -93 -46 -108 -1 -17 54 27 95 80 75z m20 -436 c2 -2 6 -15 10 -30 10 -38 -26 -72 -68 -64 -37 8 -35 6 -43 43 -8 42 18 67 64 59 19 -3 36 -6 37 -8z m18 -245 c-36 -16 -102 -16 -130 0 -18 10 -7 12 68 12 80 0 87 -1 62 -12z m-203 -69 c0 -21 -4 -33 -10 -29 -5 3 -10 19 -10 36 0 16 5 29 10 29 6 0 10 -16 10 -36z m300 1 c0 -24 -5 -35 -15 -35 -15 0 -22 50 -8 63 15 15 23 5 23 -28z m-300 -87 c0 -24 -5 -50 -10 -58 -7 -11 -10 2 -10 43 0 31 4 57 10 57 6 0 10 -19 10 -42z m300 -20 c0 -43 -3 -58 -10 -48 -13 20 -23 87 -15 100 15 25 25 5 25 -52z m-201 -44 c31 -4 80 -2 108 4 59 10 70 5 75 -43 3 -29 2 -30 -57 -38 -58 -8 -199 -2 -229 9 -12 5 -12 11 2 45 11 28 20 38 30 34 9 -3 40 -8 71 -11z m147 -222 c-14 -15 -15 -13 -3 17 8 23 13 28 15 16 2 -10 -3 -25 -12 -33z m-213 18 c3 -11 1 -20 -4 -20 -5 0 -9 9 -9 20 0 11 2 20 4 20 2 0 6 -9 9 -20z m267 -25 c0 -2 -10 -10 -22 -16 -21 -11 -22 -11 -9 4 13 16 31 23 31 12z'
+    var user = "M256,0C156.011,0,74.667,81.344,74.667,181.333c0,175.296,167.232,321.92,174.357,328.064 c2.005,1.728,4.48,2.603,6.976,2.603c2.496,0,4.971-0.875,6.976-2.603c7.125-6.144,174.357-152.768,174.357-328.064 C437.333,81.344,355.989,0,256,0z M256,486.869C224.363,457.067,96,327.125,96,181.333c0-88.235,71.765-160,160-160 s160,71.765,160,160C416,327.125,287.637,457.067,256,486.869z M344.725,238.144c-5.461-3.328-10.475-5.419-15.509-6.571l-31.957-8.021l-1.323-5.376 c8.32-9.088,14.187-20.821,16.597-33.088c5.696-2.923,9.877-8.491,10.795-15.211l2.347-18.688 c0.64-5.525-1.067-11.093-4.672-15.296c-1.173-1.387-2.56-2.603-4.075-3.605l0.512-11.2l2.069-2.048 c5.803-6.293,11.051-17.003,3.563-31.509c-0.661-1.643-1.301-2.923-2.453-4.821c-5.547-8.533-17.045-18.731-40.299-18.731 c-3.84,0-9.131,0.235-15.189,1.216c-7.893,1.323-15.168,4.011-21.632,8.043c-43.968,1.6-49.152,25.323-49.152,43.221 c0,3.456,0.619,10.005,1.195,15.467c-1.579,0.981-3.029,2.219-4.288,3.605c-3.797,4.245-5.589,9.963-4.928,15.765l2.368,18.688 c0.939,6.891,5.397,12.587,11.925,15.424c2.368,11.691,7.915,22.955,15.68,31.915l-1.536,6.208l-31.723,7.979 c-5.291,1.195-10.304,3.307-15.765,6.613c-2.624,1.579-4.437,4.224-4.971,7.232s0.235,6.101,2.133,8.512 c22.507,28.459,55.893,44.8,91.563,44.8s69.056-16.341,91.563-44.779c1.899-2.411,2.667-5.483,2.133-8.512 C349.163,242.368,347.349,239.723,344.725,238.144z M256,277.333c-24.256,0-47.232-9.28-64.896-25.856l35.115-8.789 c3.819-0.981,6.805-3.947,7.744-7.787l4.48-18.133c0.939-3.733-0.235-7.701-3.051-10.325c-8.277-7.765-13.717-19.2-14.592-30.592 c-0.427-5.547-5.376-8.619-10.944-8.619l-2.688-17.024c3.072,0,5.973-1.323,8-3.605c2.027-2.304,2.965-5.333,2.581-8.384 c0,0-2.048-16.299-2.048-21.739c0-11.115,0-21.611,31.275-21.973c2.155-0.021,4.267-0.704,6.037-1.963 c4.501-3.2,9.771-5.312,15.573-6.272c4.651-0.747,8.768-0.939,11.755-0.939c10.965,0,18.517,3.051,22.4,9.024l8.939-5.803 l-8,7.851c2.752,5.355,1.429,6.763,0.448,7.851l-4.693,4.693c-1.877,1.877-2.987,4.395-3.115,7.04l-1.067,23.04 c-0.128,2.859,0.384,4.843,2.304,6.955c1.941,2.091,4.117,2.56,6.955,2.667l-1.579,17.344c-5.589,0-10.219,4.309-10.645,9.877 c-0.875,11.627-6.699,23.467-15.189,30.976c-2.965,2.624-4.245,6.677-3.307,10.539l4.267,17.472 c0.939,3.819,3.925,6.827,7.765,7.808l35.072,8.811C303.232,268.053,280.256,277.333,256,277.333z"
+
+    var carIcon = {
+      path: car,
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'green',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(10, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      path: bike,
+
+      scale: .019,
+      strokeColor: 'black',
+      strokeWeight: .90,
+      fillOpacity: 0.8,
+      fillColor: 'green',
+      //fillColor: '#b75656',
+      offset: '0%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(400, 900), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var truckIcon = {
+      path: truck,
+
+      scale: .03,
+      strokeColor: 'black',
+      strokeWeight: .90,
+      fillOpacity: 0.8,
+      fillColor: 'green',
+      //fillColor: '#b75656',
+      offset: '0%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(250, 700), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var userIcon = {
+      path: user,
+
+      scale: .08,
+      strokeColor: 'black',
+      strokeWeight: 1.2,
+      fillOpacity: 1,
+      fillColor: 'green',
+      //fillColor: '#b75656',
+      offset: '0%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(250, 700), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "user" : userIcon
+    }
+
+    // If you set the delay below 1000ms and you go to another tab,
+    // the setTimeout function will wait to be the active tab again
+    // before running the code.
+    // See documentation :
+    // https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Inactive_tabs
+    var contentString
+
+    function animateMarker(marker, coords, km_h, iconType) {
+
+      // console.log("speed variable", km_h);
+
+      //console.log(km_h);
+      //     console.log($scope.trackerType)
+      var target = 0;
+      var km_h = km_h || 50;
+      if (!startPos.length)
+        coords.push([startPos[0], startPos[1]]);
+
+
+
+      function goToPoint() {
+        var lat = marker.position.lat();
+        var lng = marker.position.lng();
+        var step = (km_h * 1000 * delay) / 3600000; // in meters
+        // let outerThis
+        var dest = new google.maps.LatLng(
+          coords[target][0], coords[target][1]);
+        //  console.log(coords[target][2])
+        var r = coords[target][2]
+        outerThis.speeed2 = r
+
+        var distance =
+          google.maps.geometry.spherical.computeDistanceBetween(
+            dest, marker.position); // in meters
+
+        var numStep = distance / step;
+        var i = 0;
+        var deltaLat = (coords[target][0] - lat) / numStep;
+        var deltaLng = (coords[target][1] - lng) / numStep;
+
+        function moveMarker() {
+
+
+          lat += deltaLat;
+          lng += deltaLng;
+          i += step;
+
+          if (i < distance) {
+
+            var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng))
+            if (head != 0) {
+              icons[iconselected].rotation = head
+            }
+            marker.setIcon(icons[iconselected]);
+            marker.setPosition(new google.maps.LatLng(lat, lng));
+
+            map.setCenter({ lat: lat, lng: lng });
+            setTimeout(moveMarker, delay);
+          }
+          else {
+            var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), dest)
+            if (head != 0) {
+              icons[iconselected].rotation = head
+            }
+            marker.setIcon(icons[iconselected]);
+            marker.setPosition(dest);
+            map.setCenter({ lat: coords[target][0], lng: coords[target][1] });
+            target++;
+            if (target == coords.length) { target = 0; }
+
+            setTimeout(goToPoint, delay);
+          }
+        }
+        a++
+        if (a > coords.length) {
+        outerThis.speeed2 = 0
+        }
+        else {
+          moveMarker();
+          km_h = outerThis.speed
+        }
+      }
+      var a = 0;
+        goToPoint();
+    }
+
+
+    function initialize() {
+      var myOptions = {
+        zoom: 16,
+        center: new google.maps.LatLng(lat, lng),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+       map = new google.maps.Map(document.getElementById("poiAddMap"), myOptions);
+      // console.log("Abinash");
+      marker = new google.maps.Marker({
+        position: new google.maps.LatLng(startPos[0], startPos[1]),
+        map: map,
+
+      });
+
+      google.maps.event.addListenerOnce(map, 'idle', function () {
+
+        animateMarker(marker, outerThis.dataArrayCoords, outerThis.speed, iconselected);
+      });
+      // console.log("Abinash")
+
+      var flightPath = new google.maps.Polyline({
+        path: outerThis.latLngLine,
+        geodesic: true,
+        strokeColor: '#FF0000',
+        strokeOpacity: 1.0,
+        strokeWeight: 2,
+        icons: [{
+          icon: {
+            strokeColor: '#800000',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
+          },
+          offset: '0',
+          repeat: '100px'
+        }],
+
+      });
+
+      flightPath.setMap(map);
+
+    }
+
+    initialize();
+
+  }
+
+  generateHistory(){
+    console.log(this.Fromdate);
+    console.log(this.todate);
+    console.log(this.deviceSelect);
+    let isMapInit = false;
+    this.latLngLine = [];
+      var position;
+      let outerThis = this ;
+      this.dev_id = this.deviceSelect[0];
+      //  console.log(this.date1)
+      var fromtime = new Date(this.Fromdate).toISOString();
+      var totime = new Date(this.todate).toISOString();
+      console.log("deviceID=>",this.dev_id);                 
+      if (fromtime > totime) {
+        this.Load = false;
+        let message = "Error: From Time Never Greater then To Time";
+        swal(
+          'Date',
+          'From Time Never Greater then To Time',
+          'error'
+        )
+      
+        // show swal error here 
+      }
+     
+      else if (this.dev_id === null || this.dev_id === undefined || this.dev_id === '') {
+        this.Load = false;
+        let message = "Error: Please choose a device";
+        swal(
+          'Select device',
+          'Please choose a device',
+          'error'
+        )
+   
+        // show swal error here 
+      }
+      else {
+        this.ddid = this.dev_id.deviceId;
+        this.devicon = this.dev_id.iconType;
+        this.Load = true;
+        this.contactService.getCurrentLocation(this.ddid, fromtime, totime).subscribe((data3) => {
+          this.Load =false;
+          this.latlongObjArr = data3;
+          console.log("LatlongObjectArray=>",this.latlongObjArr)
+          initialize();
+          let cluster_arr = [];
+          this.path = flightPath.getPath(); 
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {   
+         
+            var d_name = this.dev_id.viewValue;
+            this.speed = this.latlongObjArr[i].speed + "Km/hr";
+            this.im = this.latlongObjArr[i].imei;
+            // this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime).split('"')[1].split('T')[0];
+            // var gmtDateTime = moment.utc(JSON.stringify(this.latlongObjArr[i].insertionTime).split('T')[1].split('.')[0], "HH:mm:ss");
+            var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+              this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+              // console.log(JSON.parse(this.datee));
+              // var insTime = new Date(this.datee);
+              this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a'); 
+              // console.log("Insertion date=>",insTime);
+              // console.log(this.datee);
+  
+            var content = '<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+            '</div></div>'
+  
+         
+            var arr = [];
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+            this.latLngLine.push(cord);
+            var iconSrc = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000' ; 
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+              var markerCurrent:any;
+              var markerSrc:any
+// =============================================added==========================================
+              // this.lat = this.latlongObjArr[i].lat;
+              // this.lng = this.latlongObjArr[i].lng;
+
+              // ====================================added==============================================
+             
+        
+              // this.path.push(new google.maps.LatLng(this.lat, this.lng));
+
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined ||this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+              var markersPast = new google.maps.Marker({
+                position: new google.maps.LatLng(this.lat, this.lng),
+              
+                icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: '#00F', fillOpacity: 0.6, strokeColor: '#00A', strokeOpacity: 0.9, strokeWeight: 1, scale: 2 },
+  
+              })
+  
+              markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); google.maps.event.addListener(markersPast, 'click', function () { this['infowindow'].open(this.globalMap, this); });
+  
+              cluster_arr.push(markersPast);
+  
+  
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: this.globalMap,
+                  icon :iconDest
+  
+                });
+                this.globalMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(this.globalMap);
+              }
+  
+              if(i ==( this.latlongObjArr.length - 1)){
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: this.globalMap,
+                  icon: iconSrc
+  
+                });
+              }
+           
+            }
+            else {
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;      
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+                var markersPast = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  //map: map,
+                  icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: '#00F', fillOpacity: 0.6, strokeColor: '#00A', strokeOpacity: 0.9, strokeWeight: 1, scale: 2 },
+  
+                })
+                markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); google.maps.event.addListener(markersPast, 'click', function () { this['infowindow'].open(this.globalMap, this); });
+               
+                cluster_arr.push(markersPast);
+  
+              }
+              
+              console.log("this.path=>",this.path);
+  
+              if (i == 1) {
+                console.log(this.lat,this.lng);
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: this.globalMap,
+                  icon : iconDest
+  
+                });
+                this.globalMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(this.globalMap);
+              }
+  
+              if(i == ( this.latlongObjArr.length - 1)){
+                console.log(this.lat,this.lng);
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: this.globalMap,
+                  icon : iconSrc
+  
+                });
+              } 
+            }
+          }
+          // console.log(this.dataArrayCoords);
+          var markerCluster = new MarkerClusterer(this.globalMap, cluster_arr, { zoomOnClick: true, minimumClusterSize: 50, gridSize: 50, maxZoom: 15, imagePath: '/assets/images/m' });
+          /*             this.spinnerService.hide();
+          */
+          //  this.Playback(this.latlongObjArr)
+  
+         this.dis = true
+  
+  
+        });
+  
+        //stoppage function
+  
+        var stop_locations = [];
+        this.contactService.stoppage_points(this.dev_id.id, fromtime, totime, this.useridd)
+          .subscribe((res) => {
+  
+            console.log("stopage Point => ", res);
+            // console.log(res);
+            let test = res;
+            // console.log("parking Point=>",test);
+            if(test.length == 0 ){
+              // error of no stoppagepoint found
+             //this._flashMessagesService.show('No stoppage found !!!', { cssClass: 'alert-success', timeout: 2000 });
+            }
+            // console.log(test.length);
+            //   this.stoppage_container = [];
+            for (var i = 0; i < test.length; i++) {
+  
+              this.stoppage_container = [];
+              this.stoppage_container.push(test[i].lat);
+              this.stoppage_container.push(test[i].long);
+              // console.log(test[i].lat);
+              // console.log(test[i].long);
+  
+              //  this.stoppage_container.push(test[i].lat);
+              //   this.stoppage_container.push(test[i].long);
+              this.arrival = new Date(test[i].arrival_time);
+              this.stoppage_container.push(this.arrival);
+              // console.log(this.arrival);
+              this.departure = new Date(test[i].departure_time);
+              this.stoppage_container.push(this.departure);
+              // console.log(this.departure)
+  
+              stop_locations.push(this.stoppage_container)
+  
+  
+            }
+             console.log("stopLocationPush ======>",stop_locations);
+           
+             console.log("Stoppage location sflksajfslfksdnfslk");
+            // service for display averagespeed and total distance on map as a infowindow
+            // console.log("fromTime", fromtime);
+            // console.log("totime", totime);
+            console.log("entering getDistance method");
+            this.contactService.getDistance(this.ddid, fromtime, totime,undefined).subscribe((data3) => {
+               console.log("response for totaldistance");
+              this.data2 = data3;
+              console.log("getdistanceService",this.data2)
+              // initialize();
+              //  console.log(this.data2);
+              let a = this.data2["Distance"]?this.data2["Distance"]:0;
+                console.log(a);
+              this.total_dis = a;
+              let b = this.data2["Average Speed"]?this.data2["Average Speed"]:0;
+              this.avg_speed = b;
+              this.ideal_time = this.data2["Idle Time"]?this.data2["Idle Time"]:0;
+              customTxt = "<html> <head><style> </style> </head><body>Total Distance - " + this.total_dis + " Km<br>Average Speed - " + this.avg_speed + " Km/hr <br>Ideal Time - " + this.ideal_time + " min</body> </html> "
+        
+              console.log("customtext = >",customTxt);
+              var centerControlDiv = document.createElement('div');
+              var centerControl = new CenterControl(centerControlDiv, this.globalMap, customTxt);
+               this.globalMap.controls[google.maps.ControlPosition.LEFT_TOP].push(centerControlDiv);
+              //  console.log("displaydiv=>",centerControlDiv);
+              if(stop_locations.length > 0){
+                initParking();
+               }else{
+                 console.log("Inside no stoppage function");
+                // swal(
+                //   'No stoppage',
+                //   'No stoppage detail found',
+                //   'error'
+                // )
+               }
+            })
+          })
+  
+        // console.log(this.dev_id.id);
+      }
+      // console.log(totime)
+      this.latLongArr2 = [];
+      var customTxt;
+      var txt;
+
+      function CenterControl(controlDiv, map, text) {
+  
+        // Set CSS for the control border.
+        var controlUI = document.createElement('div');
+        controlUI.style.backgroundColor = '#fff';
+        controlUI.style.border = '2px solid #fff';
+        controlUI.style.borderRadius = '3px';
+        controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+        controlUI.style.cursor = 'pointer';
+        controlUI.style.marginBottom = '22px';
+        controlUI.style.textAlign = 'left';
+        controlUI.style.marginLeft = '11px';
+        controlUI.style.opacity = "0.9";
+        controlDiv.appendChild(controlUI);
+  
+        // Set CSS for the control interior.
+        var controlText = document.createElement('div');
+        controlText.style.color = 'rgb(25,25,25)';
+        controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+        controlText.style.fontSize = '16px';
+        controlText.style.lineHeight = '38px';
+        controlText.style.paddingLeft = '5px';
+        controlText.style.paddingRight = '5px';
+        controlText.innerHTML = text;
+        controlUI.appendChild(controlText);
+  
+        // Setup the click event listeners: simply set the map to Chicago.
+  
+  
+      }
+  
+      function geocodePosition(pos, callback) {
+        var geocoder = new google.maps.Geocoder();
+        geocoder.geocode({
+          latLng: pos
+        }, function (responses) {
+          callback(responses[0].formatted_address)
+  
+        });
+      }
+      var k;
+  
+      function initParking(){
+        //  console.log(outerThis.stop_locations);
+        // if(!isMapInit){
+        const myOptions = {
+          zoom: 15,
+          center: new google.maps.LatLng(18.602941, 73.777147),
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        // console.log(myOptions);
+        // map = new google.maps.Map(document.getElementById('map2'), myOptions);
+        var trafficLayer = new google.maps.TrafficLayer();
+        trafficLayer.setMap(outerThis.globalMap);
+        // console.log("Map Intialized")
+        isMapInit = true;
+  
+        // ============================
+        var pinImage = new google.maps.MarkerImage("https://png.icons8.com/office/30/000000/parking.png");
+        var infowindow = new google.maps.InfoWindow();
+  
+        var marker: any, k: any;
+        var l: number
+         console.log('stoppagelocationArr',stop_locations);
+       
+          for (l = 0; l < stop_locations.length; l++) {
+            outerThis.latitude = stop_locations[l][0];
+            outerThis.longitude = stop_locations[l][1];
+            outerThis.arrivalTime = new Date(stop_locations[l][2]).toLocaleString();
+    
+            outerThis.departureTime = new Date(stop_locations[l][3]).toLocaleString();
+            outerThis.addresslocation = stop_locations[l][4];
+            
+            var fd = new Date(outerThis.arrivalTime).getTime();
+            var td = new Date(outerThis.departureTime).getTime();
+            var time_difference = td - fd;
+            var total_min = time_difference / 60000;
+            var hours = total_min / 60
+            var rhours = Math.floor(hours);
+            var minutes = (hours - rhours) * 60;
+            var rminutes = Math.round(minutes);
+       
+            outerThis.Durations = rhours + ':' + rminutes
+      
+            marker = new google.maps.Marker({
+              position: new google.maps.LatLng(stop_locations[l][0], stop_locations[l][1]),
+              map: outerThis.globalMap,
+              icon: pinImage,
+    
+            });
+    
+            google.maps.event.addListener(marker, 'dragend', function () {
+    
+              this.geocodePosition(marker.getPosition());
+            });
+            outerThis.globalMap.setCenter(marker.getPosition());
+    
+    
+            var content = '<div ><div> Arrival Time-: '
+              + outerThis.arrivalTime + '</div><br><div>Departure Time-: '
+              + outerThis.departureTime + '</div><br><div>Time Duration-: '
+              + outerThis.Durations + ' </div></br><div> Latitude-: '
+              + outerThis.latitude + ' </div></br><div> Longitude-: '
+              + outerThis.longitude + ' </div><div>'
+    
+    
+            // console.log("show content=>", content);
+            google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
+              return function () {
+                geocodePosition(marker.getPosition(), function (result) {
+                  infowindow.setContent(content);
+                  infowindow.open(outerThis.globalMap, marker, content);
+                });
+              }
+            })(marker, content, infowindow));     
+          }
+
+           console.log("Inside no stoppage function");
+
+      }
+  
+      function initialize() {
+  
+        //  console.log(outerThis.stop_locations);
+        // if(!isMapInit){
+        const myOptions = {
+          zoom: 15,
+          center: new google.maps.LatLng(18.602941, 73.777147),
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        // console.log(myOptions);
+        outerThis.globalMap = new google.maps.Map(document.getElementById('poiAddMap'), myOptions);
+        var trafficLayer = new google.maps.TrafficLayer();
+        trafficLayer.setMap(outerThis.globalMap);
+        // console.log("Map Intialized")
+        isMapInit = true;
+  
+        // ============================
+        var pinImage = new google.maps.MarkerImage("https://png.icons8.com/office/30/000000/parking.png");
+        var infowindow = new google.maps.InfoWindow();
+  
+        var marker: any, k: any;
+        var l: number
+         console.log('stoppagelocationArr',stop_locations);
+        for (l = 0; l < stop_locations.length; l++) {
+          outerThis.latitude = stop_locations[l][0];
+          outerThis.longitude = stop_locations[l][1];
+          outerThis.arrivalTime = new Date(stop_locations[l][2]).toLocaleString();
+  
+          outerThis.departureTime = new Date(stop_locations[l][3]).toLocaleString();
+          outerThis.addresslocation = stop_locations[l][4];
+          
+          var fd = new Date(outerThis.arrivalTime).getTime();
+          var td = new Date(outerThis.departureTime).getTime();
+          var time_difference = td - fd;
+          var total_min = time_difference / 60000;
+          var hours = total_min / 60
+          var rhours = Math.floor(hours);
+          var minutes = (hours - rhours) * 60;
+          var rminutes = Math.round(minutes);
+     
+          outerThis.Durations = rhours + ':' + rminutes
+         
+          marker = new google.maps.Marker({
+            position: new google.maps.LatLng(stop_locations[l][0], stop_locations[l][1]),
+            map: outerThis.globalMap,
+            icon: pinImage,
+  
+          });
+  
+          google.maps.event.addListener(marker, 'dragend', function () {
+  
+            this.geocodePosition(marker.getPosition());
+          });
+          outerThis.globalMap.setCenter(marker.getPosition());
+  
+  
+          var content = '<div ><div> Arrival Time-: '
+            + outerThis.arrivalTime + '</div><br><div>Departure Time-: '
+            + outerThis.departureTime + '</div><br><div>Time Duration-: '
+            + outerThis.Durations + ' </div></br><div> Latitude-: '
+            + outerThis.latitude + ' </div></br><div> Longitude-: '
+            + outerThis.longitude + ' </div><div>'
+  
+  
+          // console.log("show content=>", content);
+          google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
+            return function () {
+              geocodePosition(marker.getPosition(), function (result) {
+                infowindow.setContent(content);
+                infowindow.open(this.globalMap, marker, content);
+              });
+            }
+          })(marker, content, infowindow));     
+        } 
+      }
+  
+      var lineSymbol = {
+        path: 'M 0,-1 0,1',
+        strokeOpacity: 1,
+        scale: 4
+      };
+  
+      var flightPath = new google.maps.Polyline({
+        geodesic: true,
+        strokeColor: '#0000FF',
+        strokeOpacity: 1.0,
+        strokeWeight: 2,
+        icons: [{
+          icon: {
+            strokeColor: '#800000',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
+          },
+          offset: '0',
+          repeat: '100px'
+        }],
+  
+      });
+  }
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+// this.globalMap =  new google.maps.Map(document.getElementById('poiAddMap'),{
+//   center: {lat:  25.594095, lng: 85.137566},
+//   zoom: 15
+// });
+// var icon1 = {
+//   url: "./assets/image/ico_direccion.png", // url
+//   scaledSize: new google.maps.Size(50, 50), // scaled size
+
+//   };
+// this.globalMarker = new google.maps.Marker({
+//   position: {lat:  25.594095, lng: 85.137566},
+//   map: this.globalMap,
+//   draggable:false,
+//   icon: icon1
+// });
diff --git a/src/app/location/location.component.html b/src/app/location/location.component.html
new file mode 100644
index 0000000..8b26ef9
--- /dev/null
+++ b/src/app/location/location.component.html
@@ -0,0 +1,1335 @@
+<app-all-menus *ngIf="!token_identifier"></app-all-menus>
+<button *ngIf="token_identifier"
+  style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;z-index: 111;" md-raised-button>NLET
+  ERP</button>
+<div class="topWrapper" id="main">
+  <div class="mainWrapperWrapper">
+    <div class="row" style="background: #426E86">
+      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center; padding-top: 10px;">     
+      </div>
+      <div class="col-sm-4 col-md-4 col-lg-4">
+        <p
+          style="margin: 0; padding-top: 5px;text-align: center; padding-bottom: 5px; font-size: 20px; font-weight: 500;color: white; ">
+          {{headingName | translate}}</p>
+        </div> <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+      </div>
+      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center;"> </div>
+    <div class="row rowStyle" style="padding-bottom: 39px;">
+      <div class="col-sm-4 col-md-4 col-lg-4" style="padding-right: 0px;padding-left: 0px;overflow: auto">
+        <div class="row" style='margin: 0;height: 100%;background: white;'>
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
+            <md-tab-group style="height : 100% ;background: #efecec;" [selectedIndex]="tabIndexValue"
+              class="tabCustomStyle" (selectedIndexChange)="getTab($event)">
+              <md-tab [disabled]="tab_1">
+                <ng-template md-tab-label> {{"Live Track" | translate}} </ng-template>
+                <div class="row" style="margin:0%">
+                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
+                    <md-button-toggle-group style="width: 100%;padding: 5px;box-shadow: none;height: 40px;"
+                      name="fontStyle" aria-label="Font Style">
+                      <md-button-toggle style="width: 100%;font-size: 12px; text-align: center;"
+                        *ngFor="let vehStatus of AllVeh"
+                        [ngClass]="{ 'selectedRunning' :(vehStatus.status == 'Running'), 'deselected' : !vehStatus.status, 'selectedStopped' :(vehStatus.status == 'Stopped'), 'Inactice' :(vehStatus.status == 'Inactive'),'selectIdling' :(vehStatus.status == 'Idle'), 'selectedNodata' :  (vehStatus.status == 'No data')}">
+                        <div (click)="getDeviceBYfilter(vehStatus.status,'tclick')">
+                          {{vehStatus.totalCount}}
+                          {{vehStatus.status | translate}}
+                        </div>
+                      </md-button-toggle>
+                    </md-button-toggle-group>
+                  </div>
+                </div>
+                <div class="row" style="margin:0%">
+                  <div class="col-sm-12 col-md-12 col-lg-12"
+                    style="padding: 0%; display: inherit; padding-left: 5px; padding-right: 7px; padding-bottom: 5px;">
+                    <input style="float: right;border-radius: 0px;line-height: 1.3;" class="form-control" id="myInput"
+                      name="myInput" [(ngModel)]="myInput" type="text"
+                      (ngModelChange)="searchFilter($event,'devSearch')"
+                      placeholder="{{'Device/Group search' | translate}}" />
+                    <button md-raised-button [disabled]=" " md-raised-button (click)="pre()"
+                      style="float:right;background: #2C7873; color: white;font-size: 14px;border-radius:0px;">
+                      <<< </button> <button md-raised-button [disabled]="firstcall" md-raised-button (click)="next()"
+                        style="float: right;background: #004445; color: white;font-size: 14px;border-radius:0px;"> >>>
+                    </button>
+                    <i class="fas fa-sync animateClass" title="{{'Refresh' | translate}}" (click)="refresh()"></i>
+                    <i class="fas fa-plus-circle mr-1" style="font-size: 35px;padding-top: 4px;color: #426e86;cursor: pointer;" *ngIf="(custtype && ((dealer_Permission == true)||(dealer_Permission === undefined)))||superAdmin||adbtn" title="{{'Add Vehicle' | translate}}" (click)="addVehicle()"></i>
+                   <!-- <button class="btn btn-primary btn-sm rounded-circle" style="width: 35px;height: 35px;margin-top: 3px;float: right;">
+                    <i class="fas fa-arrow-circle-down" style="font-size: 14px;cursor: pointer;" data-toggle="collapse" title="{{'Groups' | translate}}" data-target="#collapseExample"
+                    aria-expanded="false" aria-controls="collapseExample"></i>
+                    </button> -->
+                  </div>
+                </div>
+                <!-- <div class="collapse" id="collapseExample">
+                  <div class="card card-body">
+                    <md-select [formControl]="toppings" multiple (change)="selectedGroup($event)" placeholder="Please select Group">
+                      <md-option style="width: 360px;" *ngFor="let topping of groups" [value]="topping._id">{{topping.name}}</md-option>
+                    </md-select>
+                  </div>
+                </div> -->
+                <div class="row" style="margin:0%">
+                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
+                    <div style="font-size: 11px;padding-left: 5px; padding-right: 7px;height: 69vh;overflow: auto;">
+                      <table id="myTable1" class="table table-hover" style="margin:0;padding-bottom: 39px;">
+                        <thead style="background: #426E86; color: white;">
+                          <tr>
+                            <th>
+                                <div>
+                                  <md-checkbox type="checkbox" [checked]="true" (change)="selectAllVehicles($event)"></md-checkbox>
+                                  <!-- <md-checkbox type="checkbox" [checked]="device.checked" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox> -->
+                                </div>
+                            </th>
+                            <th>{{'Icon' | translate}}</th>
+                            <th>{{'Reg. number' | translate}}</th>
+                            <th>{{'Group' | translate}}</th>
+                            <th>{{'Last Speed' | translate}}</th>
+                            <th>{{'AC' | translate}}</th>
+                            <th>{{'IGN' | translate}}</th>
+                            <th>{{'PWR' | translate}}</th>
+                            <!-- <th>{{'GSM' | translate}}</th> -->
+                            <th title="{{'Additional Menu' | translate}}" style="text-align: center;cursor: pointer;"><i class="far fa-clipboard" style="font-size: 15px;"></i></th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <!-- <tr *ngFor="let item of groups">
+                            <div style="padding-top: 13px;padding-left: 5px;">
+                              <md-checkbox type="checkbox" (change)="selectGroup($event,item)" [checked]="false"></md-checkbox>
+                            </div>
+                            <td>
+                             {{item.name}}
+                            </td>
+                          </tr> -->
+                          <tr *ngFor="let device of deviceList  ; let i = index" [ngStyle]="{'background' : device.columnHighlight === true ? '#f1efef' : 'white'}">
+                            <div style="padding-top: 13px;padding-left: 5px;">
+                               <md-checkbox type="checkbox" [checked]="device.checked === true" (change)="checkBoxValue($event,i)"></md-checkbox>
+                               <!-- <md-checkbox type="checkbox" [checked]="device.checked" (change)="selectedStatus(i,$event,'rVisibility')"></md-checkbox> -->
+                            </div>            
+                            <td style="padding-top:7px;padding-bottom: 5px;">
+                              <div *ngIf="iconCheck(device.status,device.iconType)">
+                                <img *ngIf="device.iconType != 'jcb'" style="width: 16px;" src={{devIcon}}>
+                                <img *ngIf="device.iconType === 'jcb'" style="width: 20px;" src={{devIcon}}>
+                              </div>
+                            </td>
+                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;">
+                              {{device.Device_Name}}</td>
+                            <td (click)="updateLiveTracking(device,null)"
+                              style="cursor:pointer;text-align: left;"> {{device.vehicleGroup?device.vehicleGroup.name:'N/A'}}</td>
+                              <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;text-align: center;">
+                                {{device.last_speed}}</td>
+                            <!-- <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
+                                class="fas fa-wifi"
+                                [ngStyle]="{color :getVehColor('gpsStatus',device.gpsTracking)}"></i> </td> -->
+                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
+                                class="fas fa-snowflake" [ngStyle]="{color : getVehColor('acStatus',device.ac)}"></i>
+                            </td>
+                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
+                                class="fas fa-key" [ngStyle]="{color : getVehColor('ignStatus',device.last_ACC)}"></i>
+                            </td>
+                            <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
+                                class="fas fa-power-off"
+                                [ngStyle]="{color : getVehColor('powerStatus',device.power)}"></i> </td>
+                            <!-- <td (click)="updateLiveTracking(device,null)" style="cursor:pointer;"> <i
+                                class="fas fa-wifi" [ngStyle]="{color : getVehColor('gsmStatus',device.gsmSignal)}"></i>
+                            </td> -->
+                            <td [mdMenuTriggerFor]="additionalMenu" style="cursor:pointer;"
+                              title="{{'Open Additional Menu'| translate}}">
+                              <i class="fas fa-chevron-circle-down animateDropDown"></i>
+                              <md-menu #additionalMenu="mdMenu" [overlapTrigger]="false" class="styleMenu">
+                                <div style="display: inline-grid;">
+                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="createTrip(device)"
+                                    *ngIf="playPause === true" title="{{'Create Trip' | translate}}"
+                                    style="width: 28px;margin-left: 2px;" class="play animateClass_10">play_arrow
+                                  </md-icon>
+                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="endTrip(device)"
+                                    *ngIf="playPause === false" title="{{'End Trip' | translate}}"
+                                    style="width: 28px;" class="play animateClass_11">pause_circle_outline</md-icon>
+                                  <i [disabled]="(device.columnHighlight == true)" class="material-icons"
+                                    style="cursor:pointer;font-size: 18px; text-align: center; padding-top: 3px; padding-bottom: 3px;"
+                                    (click)="engineCut(device)" title="Immobilize"
+                                    [ngStyle]="{'color':device.ignitionLock == '0'?'green':'red'}"> power_settings_new
+                                  </i>
+                                  <div>
+                                    <img [disabled]="(device.columnHighlight == true)"
+                                      src="../../assets/image/armSensor.png"
+                                      *ngIf="(device.arm === '0')||(device.arm === undefined)"
+                                      title="{{'Arm Vehicle' | translate}}" style="width:30px; cursor: pointer;"
+                                      (click)="armDisarm(device, 'on')">
+                                    <img [disabled]="(device.columnHighlight == true)"
+                                      src="../../assets/image/disarmSensor.png" *ngIf="device.arm === '1'"
+                                      title="{{'Disarm Vehicle' | translate}}"
+                                      style="width:23px; cursor: pointer;margin-left: 3px;"
+                                      (click)="armDisarm(device, 'off')">
+                                  </div>
+                                  <md-icon [disabled]="(device.columnHighlight == true)" (click)="locationShare(device)"
+                                    title="{{'Share Location' | translate}}"
+                                    style="font-size: 18px; text-align: center; padding-top: 5px; color: #3F51B5;"
+                                    class="play animateClass_11">share</md-icon>
+                                    <i class="fas fa-location-arrow" style="cursor:pointer;margin-top: 10px;color: red;margin-left: 5px;" title="Show Direction" (click)="directionShow(device)"></i>
+                                    <i class="fas fa-terminal" style="cursor:pointer;margin-top: 10px;color: black;margin-left: 5px;" title="Trigger Command" (click)="triggerDeviceCmd(device)"></i>
+                                </div>
+                              </md-menu>
+                            </td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>    
+                
+              </md-tab>
+              <md-tab [disabled]="tab_2">
+                <ng-template md-tab-label> {{"Geofence" | translate}} </ng-template>
+                <div class="row">
+                  <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div class="row" style="margin:0%">
+                      <div class="col-sm-12 col-md-12 col-lg-12"
+                        style="padding: 0%; display: inherit; padding-left: 5px;padding-top: 5px; padding-right: 7px; padding-bottom: 5px;">
+                        <input style="float: right;border-radius: 0px;line-height: 1.3;background: white;"
+                          class="form-control" id="myInput_1" name="myInput" [(ngModel)]="myInput" type="text"
+                          (ngModelChange)="searchFilter($event,'geoSearch')"
+                          placeholder="{{'Geofence Search' | translate}}" />
+                        <button md-raised-button
+                          style="float:right;background: #2C7873; color: white;font-size: 14px;border-radius:0px;">
+                          <<< </button> <button md-raised-button (click)="next()"
+                            style="float: right;background: #004445; color: white;font-size: 14px;border-radius:0px;">
+                            >>>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row" style="margin:0%">
+                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0%">
+                    <div style="font-size: 11px;padding-left: 5px; padding-right: 7px;height:540px">
+                      <table id="myTable" class="table table-hover " style="margin:0;padding-bottom: 39px;">
+                        <thead style="background: #426E86; color: white;">
+                          <tr>
+                            <th>{{'Group' | translate}}</th>
+                            <th>{{'Geofence type' | translate}}</th>
+                            <th>{{'Geo Fencing Name' | translate}}</th>
+                            <th>{{'Status' | translate}}</th>
+                            <th>{{'Vehicles' | translate}}</th>
+                          </tr>
+                        </thead>
+
+                        <tbody>
+                          <!-- *ngFor="let device of final" -->
+                          <tr *ngFor="let geoObj of geoArr">
+                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
+                              {{geoObj.vehicleGroup?geoObj.vehicleGroup.name:"Not available"}}</td>
+                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
+                              {{geoObj.type?geoObj.type:"Not present"}}</td>
+                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
+                              {{geoObj.geoname }}</td>
+                            <td>
+                              <md-slide-toggle [(ngModel)]="geoObj.status" ngDefaultControl></md-slide-toggle>
+                            </td>
+                            <td style="cursor:pointer" (click)='draw(geoObj.geofence,geoObj.geoname)'>
+                              {{geoObj.devicesWithin?geoObj.devicesWithin.length:0}}</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </md-tab>
+              <md-tab [disabled]="tab_3">
+                <ng-template md-tab-label> {{'History Track' | translate}} </ng-template>
+                <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+                  <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 20px; padding-right: 20px;">
+                    <div class="row" style="margin: 0;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
+                        <p style="margin-bottom: 0; padding-top: 10px;font-size: 12px">{{'Vehicle' | translate}}</p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 25px; padding-right: 5px;">
+                        <!-- linethickness option -->
+                    
+                        <div *ngIf="devReady === false" >
+                          <img src="../../assets/image/loaderGif.gif" style="width: 156px;height:40px;">               
+                        </div>
+                        <md-input-container *ngIf="devReady === true" style="width: 100%;height:40px;font-size: 12px;" [disabled]='disableSearch'>
+                          <input mdInput placeholder="Search" [mdAutocomplete]="tdAuto" name="state" #state="ngModel"
+                            [(ngModel)]="deviceName" (ngModelChange)="filterDevices(deviceName)"
+                            [disabled]='disableSearch'>
+                          <md-autocomplete #tdAuto="mdAutocomplete">
+                            <md-option *ngFor="let device of foods" [value]="device.viewValue" (click)="change(device)">
+                              <span>{{device.viewValue}}</span>
+                            </md-option>
+                          </md-autocomplete>
+                        </md-input-container>
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
+                        <p style="margin-bottom: 0; padding-top: 8px;font-size: 12px;">{{'Line Thickness' | translate}}
+                        </p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6">
+                        <!-- linethickness option -->
+                        <md-select style="padding-top: 0;margin-left: 10px;color: white;width:100%;background:white"
+                          [(ngModel)]="thicknessVal" ngDefaultControl>
+                          <md-option *ngFor="let thickness of thicknessArr" [value]="thickness">
+                            {{thickness}}
+                          </md-option>
+                        </md-select>
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;padding-top: 5px ; padding-bottom:5px;">
+                      <div class="col-sm-6 col-md-6 col-lg-6"> </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6">
+                        <!-- various options -->
+                        <div style="padding-left: 10px;font-size: 12px;">
+                          <i class="fas fa-info animateClass_1" title="{{'Idling'| translate}}"
+                            [ngStyle]="{'background-color':idleColor == true?'#FFFCBB':'#c7c7c7'}"
+                            (click)="changeColor('idle')"></i>
+                          <i class="fas fa-parking animateClass_2" title="{{'parking'| translate}}"
+                            [ngStyle]="{'background-color' : parkingColor === true ? 'red' : '#c7c7c7'}"
+                            (click)="changeColor('parking')"></i>
+                          <i class="fas fa-map-marker-alt animateClass_3" title="{{'Data Points'| translate}}"
+                            [ngStyle]="{'background-color':dataColor == true?'#0e6cfb':'#c7c7c7'}"
+                            (click)="changeColor('datapoint')"></i>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;">
+                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0%;padding-left: 0;">
+                        <!-- timefilter icons -->
+                        <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%">
+                          <button type="button" style="width:25%;border-right: 2px solid white;"
+                            class="btn btn-secondary animateClass_4"
+                            (click)="changeDate('today')">{{'Today' | translate}}</button>
+                          <button type="button" style="width:25%;border-right: 2px solid white;"
+                            class="btn btn-secondary animateClass_5"
+                            (click)="changeDate('yesterday')">{{'Yesterday' | translate}}</button>
+                          <button type="button" style="width:25%;border-right: 2px solid white;"
+                            class="btn btn-secondary animateClass_6"
+                            (click)="changeDate('week')">{{'Week' | translate}}</button>
+                          <button [disabled]="true" type="button" class="btn btn-secondary animateClass_7"
+                            (click)="changeDate('month')">{{'Month' | translate}}</button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;padding-top: 5px; ">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
+                        <!-- ignition option label-->
+                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+                        <!-- ignition input -->
+                        <input id="minIdleTime" class="form-control form-control-sm"
+                          style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;"
+                          name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+                      </div>
+                    </div>
+<!------------------- satelight dropdown added --------------------------->
+                    <div class="row" style="margin: 0;padding-top: 5px; ">
+                      <div class="col-sm-1 col-md-1 col-lg-1" style="padding-left: 0;">
+                      <md-checkbox type="checkbox" [checked]="satelliteDisabled === true" (change)="checkBoxValue1($event)"></md-checkbox>
+                      </div>
+                      <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
+                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Satellite' | translate}}</p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+                        <!-- <md-input-container> -->
+                          <input placeholder="Satellite" [disabled]="!satelliteDisabled" [mdAutocomplete]="tdAutoedit2" name="neww2" #state="ngModel"
+                            [(ngModel)]="satelite" (ngModelChange)="filterStates1(satelite)" class="form-control form-control-sm"
+                          style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;">
+                          <md-autocomplete #tdAutoedit2="mdAutocomplete">
+                            <md-option *ngFor="let model of dataSelect2" [value]="model.value">{{model.value}}</md-option>
+                          </md-autocomplete>
+                        <!-- </md-input-container> -->
+                      </div>
+
+                      <!-- <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
+                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Geofence' | translate}}</p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+                       
+                       
+                      <md-slide-toggle  style="float: right; padding: 8px 35.1px"
+                        md-tooltip="Show Geofences">
+                      </md-slide-toggle>
+                        
+                      </div>
+
+                      <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 0;">
+                        <p style="margin-bottom: 0%;font-size: 12px;">{{'Route' | translate}}</p>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+                       
+                      
+                        <md-slide-toggle style="float: right; padding: 8px 35.1px" md-tooltip="Show routes">
+                        </md-slide-toggle>
+                        
+                      </div> -->
+
+                    </div>
+<!-- ----------------------------------------------------------------------- -->
+                    <div class="row" style="margin: 0;padding-top: 5px;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-top: 5px;padding-left: 0;">
+                        <!-- from time label-->
+                        <spn style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</spn>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-right: 0;padding-left:25px">
+                        <!-- from datetime picker -->
+                        <input id="datefrom" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
+                          [bsConfig]="bsConfig" [(ngModel)]="datefrom" type="text">
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;padding-top: 5px;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-top: 5px;padding-left: 0;">
+                        <!-- tolabel -->
+                        <span style="margin-bottom: 0%;font-size: 12px;">{{'To' | translate}} :</span>
+                      </div>
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-right: 0;padding-left:25px">
+                        <!-- tolabel picker -->
+                        <input id="date2" bsDatepicker class="form-control form-control-sm" style="height: 25px;"
+                          [bsConfig]="bsConfig" name="todate" [(ngModel)]="date2" type="text">
+                      </div>
+                    </div>
+                    <div class="row" style="margin: 0;padding-top: 8px;padding-bottom: 5px;">
+                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
+                        
+                        <button class="ml-1" style="background-color: #0e6cfb; color: white; float: right;" md-raised-button (click)="maphistory('')">{{'Show Track' | translate}}</button>
+                        <button class="ml-1" *ngIf="showTable" style="background-color: red; color: white; float: right;" md-raised-button (click)="pdf()">{{'Export To PDF' | translate}}</button>
+                        <button class="ml-1" *ngIf="showTable" style="background-color: green; color: white; float: right;" md-raised-button (click)="saveRoutePath()">{{'Save Route Path' | translate}}</button>
+                      </div>
+
+                      <!-- <div class="col-sm-6 col-md-6 col-lg-6">
+                        <button style="background-color: #0e6cfb; color: white; float: right;" md-raised-button
+                          (click)="showArea()">{{'Show Area' | translate}}</button>
+                      </div> -->
+                    </div>
+                    <div *ngIf="showTable" class="row" style="padding: 0%;padding-top: 10px;">
+                      <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
+                        <div class="row"
+                          style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
+                          <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;">
+                            <!-- Vehicle heading -->
+                            <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>
+
+                          </div>
+                          <div class="col-sm-2 col-md-2 col-lg-2">
+                            <!-- Speed heading-->
+                            <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
+                          </div>
+                          <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
+                            <!-- Controls heading-->
+                            <p></p>
+                          </div>
+                          <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
+                            <!-- Close Icon-->
+                            <i class="fas fa-times" style="color: red; cursor: pointer;"
+                              title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>
+
+                          </div>
+                        </div>
+                        <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
+                          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
+                            <div style="max-height: 260px;">
+                              <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index"
+                                style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
+                                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;"
+                                  (click)="plotHistory(i)">
+                                  <!-- Vehicle value -->
+                                  <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}
+                                  </p>
+                                  <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
+                                    <span
+                                      style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
+                                    <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
+                                    <span
+                                      style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
+                                  </p>
+                                </div>
+                                <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;"
+                                  (click)="plotHistory(i)">
+                                  <!-- Speed value-->
+                                  <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}
+                                  </p>
+                                </div>
+                                <div class="col-sm-3 col-md-3 col-lg-3"
+                                  style="padding-left: 0%;text-align: center;padding-right: 0;">
+                                  <!-- Controls value-->
+                                  <div>
+                                    <md-icon *ngIf="SpeedMeter2" class="play animateClass_8" (click)="inter('slow')"
+                                      mdTooltip="Rewind">fast_rewind</md-icon>
+                                    <md-icon *ngIf="tempMapHistory[i].flag=='init'" class="play animateClass_9"
+                                      (click)="play(i)" mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                                    <md-icon *ngIf="tempMapHistory[i].flag=='start'" class="play animateClass_10"
+                                      (click)="play(i)" mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                                    <md-icon *ngIf="tempMapHistory[i].flag=='stop'" class="play animateClass_11"
+                                      (click)="play(i)" mdTooltip="{{'Pause' | translate}}">pause_circle_outline
+                                    </md-icon>
+                                    <md-icon *ngIf="SpeedMeter2" class="play animateClass_12" (click)="inter('fast')"
+                                      mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
+                                    <!-- <i class="fal fa-octagon"></i> -->
+                                  </div>
+                                </div>
+                                <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
+                                  <i class="fas fa-times animateClass_13" title="{{'Remove track' | translate}}"></i>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </md-tab>
+            </md-tab-group>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-8 col-md-8 col-lg-8 panel-body panel-resizable" style="padding:0px; overflow: hidden">
+        <div *ngIf="Load">
+          <div class="loading">Loading&#8230;</div>
+        </div>
+        <!-- *ngIf="(immobilizeChk === true)&&(showHistory === false)"  -->
+        <div *ngIf="(immobilizeChk === true)"  style="width: 350px;height: 250px;z-index: 3;position: absolute;background: white;top: 20%;left: 37%;background: white;border-radius: 12px;padding: 15px 20px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+          <div *ngIf="showErr === false" >
+            <div style="text-align: center; padding: 20px;color: #426e86;">
+              <i style="font-size: 60px; text-align: center;" class="far fa-clock"></i>
+              <!-- <img  src={{timerGif}}> -->
+            </div>     
+            <p style="text-align: center;font-size: 16px;font-weight: 600;color: #a2a2a2;">Command Triggered , Please wait :</p>
+            <div style="text-align: center; padding: 10px;font-size: 16px;font-weight: 600;color: #a2a2a2;">
+              <span style="font-size: 40px;">{{immobilizeCount}}</span>
+              <span>Sec.</span>
+            </div>      
+          </div> 
+          <div  *ngIf="showErr === true">
+            <div style="text-align: center; padding: 20px;">     
+              <i *ngIf= "errIcon=== true" style="font-size: 60px; text-align: center;color: red;"  class="far fa-times-circle"></i>
+              <i *ngIf= "locked=== true" style="font-size: 60px; text-align: center;color: red;" class="fas fa-lock"></i>
+              <i  *ngIf= "unlocked === true" style="font-size: 60px; text-align: center;color: green;" class="fas fa-lock-open"></i>
+            </div>
+            <p style="text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;">{{ImmErrMsg}}</p>
+          </div>           
+        </div>
+        <div *ngIf="showHistory === false" id="map" style="width: 100%; height: 100%;"></div>
+        <div *ngIf="showHistory === true" id="map2" style="width: 100%; height: 100%;"></div>
+        <div id='buttons' style=" width: 100px; top: 110px; right: -7px; position: absolute; z-index: 1;">
+          <input type="range" min="0" max="22" value="5" class="slider" id="myRange"
+            style="transform: rotate(-90deg);  height: 7px; box-shadow: 0px 0px 6px 5px lightg">
+          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 80px;">
+            <a style="float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid;text-align: center;width:38px;"
+              [ngStyle]="{'background' : (mapTypeId=='roadmap') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('roadmap')">
+              <!-- <span id="d"> -->
+              <!-- <i class="material-icons" mdTooltip="Selected"  style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Street">
+                streetview </i>
+              <!-- </span> -->
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='terrain') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('terrain')">
+              <!-- <span id="d"> -->
+              <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='terrain'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px" mdTooltip="Google Physical">
+                terrain </i>
+              <!-- </span> -->
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='satellite') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('satellite')">
+              <span id="e">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='satellite'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
+                  mdTooltip="Google Satellite"> satellite </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='hybrid') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('hybrid')">
+              <span id="f">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Hybrid">
+                  layers </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='darkmode') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('darkmode')">
+              <span id="k">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Night Mode">
+                  nights_stay </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (isTraffic==true) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
+              (click)="setMapType('traffic')">
+              <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Traffic">
+                  traffic </i>
+              </span>
+            </a>
+          </div>
+
+          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 15px;">
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (enableRouteComponent) ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="toggleMapComponents('route')">
+              <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Route">
+                  directions
+                </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (enablePOIComponent) ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="toggleMapComponents('pointofinterest')">
+              <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
+                  mdTooltip="Point Of Interest"> person_pin_circle
+                </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (enableGeofenceComponent) ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="toggleMapComponents('geofencing')"> <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Geofencing">
+                  filter_tilt_shift
+                </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+            [ngStyle]="{'background' : (enabletrail) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
+            (click)="enableMapTrail()"> <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Trail"> timeline
+                </i>
+              </span>
+            </a>
+
+           <!-- <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+           [ngStyle]="{'background' : (enabletrail) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
+            (click)="viewStreet()"> <span id="viewStreet">
+              
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip=""> timeline
+              </i>
+            </span>
+          </a> -->
+
+          <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+            [ngStyle]="{'background' : parkingButtonShow}" class="pointer animateClass_10"
+            (click)="changeParking()"> <span id="viewStreet">
+              <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="">local_parking
+              </i>
+            </span>
+          </a>
+          </div>
+        </div>
+
+
+        <!-- <a (click)="createTrip()" *ngIf="playPause" id="blog2"
+          style="position: absolute; z-index: 1;rights: 18px; top: 200px;" mdTooltip="Create Trip"> <img
+            src="../../assets/image/play-trip.png"></a>
+        <a (click)="endTrip()" *ngIf="!playPause" id="blog2"
+          style="position: absolute; z-index: 1;right: 18px; top: 200px;cursor: pointer;" mdTooltip="End Trip"> <img
+            src="../../assets/image/pause-trip.png"></a> -->
+        <div class="row" *ngIf="((showSocketData === true)&&(!token_identifier))"
+          style="z-index: 1; bottom: 0px; position: absolute;background: white; padding: 10px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);left:15px;width:100%">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0px;padding-left: 0px">
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
+              <li class="nav-item">
+                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="Socket data" aria-selected="true">{{'Socket Data'|translate}}</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="System logs" aria-selected="false">{{'System Logs' | translate}}</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" id="nearby-tab" data-toggle="tab" href="#nearby" role="tab" aria-controls="nearby" aria-selected="false">{{'Nearby Vehicles' | translate}}</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" id="dcq-tab" data-toggle="tab" href="#dcq" role="tab" aria-controls="dcq" aria-selected="false">{{'GPRS Command' | translate}}</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" id="view-tab" data-toggle="tab" href="#viewParanoma_1" role="tab" aria-controls="viewTab" aria-selected="false">{{'Vehicle Street View' | translate}}</a>
+              </li>
+              <li class="nav-item" >
+                <a class="nav-link" id="view-tab" data-toggle="tab" href="#eventTab" role="tab" aria-controls="evetCLick" aria-selected="false">{{'Events' | translate}}</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false"><i class="fas fa-angle-down"></i></a>
+              </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+                <div class="row" *ngIf="((showSocketData === true)&&(!token_identifier))" style="margin-left: 0;">
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Fuel Voltage' | translate}} :</span>
+                        <span>{{socketData?socketData.fuelVoltage:''}}</span>
+                      </div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Heading' | translate}} :</span>
+                        <!-- tempDevInfo.heading?tempDevInfo.heading: -->
+                        <span>{{socketData?socketData.heading:''}}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Lattitude' | translate}} :</span>
+                        <span>{{socketData?socketData.latDecimal:''}}</span>
+                      </div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Longitude' | translate}} :</span>
+                        <span>{{socketData?socketData.longDecimal:''}}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'IMEI' | translate}} :</span>
+                        <span>{{socketData?socketData.imei:''}}</span>
+                      </div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Speed' | translate}} :</span>
+                        <span>{{socketData?socketData.speed:''}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <!-- {{socketData | json}} -->
+                        <span style="font-weight: 500;">{{'GPS Positioned' | translate}} :</span>
+                        <span>{{socketData?socketData['GPS positioned']==1?'Fixed':socketData['GPS positioned']==0?'Not Fixed':'NA':'NA'}}</span>
+                      </div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Command' | translate}} :</span>
+                        <span>{{socketData?socketData.command?socketData.command:'NA':'NA'}}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <!-- tempDevInfo?convertDate(tempDevInfo.last_ping_on): -->
+                        <span style="font-weight: 500;">{{'Date' | translate}} :</span>
+                        <span>{{socketData?convertDate(socketData.date):''}}</span>
+                      </div>
+                      <div>
+                        <!-- tempDevInfo?tempDevInfo.satellites: -->
+                        <span style="font-weight: 500;">{{'Satellites' | translate}} :</span>
+                        <span>{{socketData?socketData.satellites:'NA'}}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <!-- tempDevInfo?tempDevInfo.last_ACC: -->
+                        <span style="font-weight: 500;">{{'Ignition' | translate}} :</span>
+                        <span>{{socketData?socketData.ignition==1?'ON':'OFF':'NA'}}</span>
+                      </div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Port' | translate}} :</span>
+                        <span>{{socketData?socketData.port:'NA'}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Ext. Voltage' | translate}} :</span>
+                        <span>{{socketData?socketData.external_Battery?socketData.external_Battery:'NA' :'NA'}}</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    <!-- <span style="font-weight: 500;">{{'Area ' | translate}} :</span>
+                    <span>{{(area | number)}}</span> -->
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'AC Status' | translate}} :</span>
+                        <!-- {{ac}} -->
+                        <!-- ==0?'OFF':socketData.ac==1?'ON' :ac==0?"OFF":ac==1?"ON":'NA':'NA' -->
+                        <span>{{socketData?socketData.ac?socketData.ac==1?'ON':socketData.ac==0?'OFF':'NA':ac==0?"OFF":ac==1?"ON":'NA':'NA'}}</span>
+                        <!-- <span>{{socketData?socketData.ac==1?socketData.ac:socketData.ac==2?socketData.ac :socketData.ac:'NA'}}</span> -->
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-sm-4 col-md-4 col-lg-4">
+                    
+                  </div>
+                </div>
+                <div class="row" *ngIf="showSocketData === true" style="margin-left: 0;">
+                  <div class="col-sm-12 col-md-12 col-lg-12">
+                    <div>
+                      <div>
+                        <span style="font-weight: 500;">{{'Address' | translate}} :</span>
+                        <span>{{liveAdd}}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
+                <div class="row">
+                  <div class="col-12">
+                      <div style="width: 100%;">
+                        <div class="limiterTable">
+                          <div class="container-table100">
+                            <div class="wrap-table100">
+                              <div class="table100">
+                                <table class="thisTableOnly">
+                                  <thead style="background: #efecec;font-size: 12px;">
+                                    <tr class="table100-head">
+                                      <th class="column1">{{'IMEI' | translate }}</th>
+                                      <th class="column2">{{'LATTITUDE' | translate}}</th>
+                                      <th class="column3">{{'LONGITUDE' | translate}}</th>
+                                      <th class="column3">{{'DEVICE TIME' | translate}}</th>
+                                      <th class="column4">{{'INSERTION TIME' | translate}}</th>
+                                      <th class="column5">{{'LAST PUSH' | translate}}</th>
+                                      <th class="column6">{{'INT. RESPONSE' | translate}}</th>
+                                      <th class="column1">{{'IGNITION' | translate}}</th>
+                                      <th class="column2">{{'POWER' | translate}}</th>
+                                      <th class="column3">{{'FUEL VOLTAGE' | translate}}</th>
+                                      <th class="column4">{{'RAW DATA' | translate}}</th>
+                                      <th class="column5">{{'AC' | translate}}</th>
+                                      <th class="column6">{{'POWERCUT ALARM' | translate}}</th>
+                                      <th class="column6">{{'SATTELITE' | translate}}</th>
+                                      <th class="column6">{{'RAW IO' | translate}}</th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                      <tr *ngFor="let rawData of gpsDataArr">
+                                        <td class="column1">{{rawData.imei}}</td>
+                                        <td class="column2">{{rawData.latDecimal}}</td>
+                                        <td class="column3">{{rawData.longDecimal}}</td>
+                                        <td class="column4">{{rawData.date  | date:'medium' }}</td>
+                                        <td class="column4">{{rawData.insertionTime  | date:'medium' }}</td>
+                                        <td class="column5">{{rawData.syncedAt?(rawData.syncedAt | date : 'medium'):'--'}}</td>
+                                        <td class="column6">{{rawData.integrationResponse?rawData.integrationResponse:'--'}}</td>
+                                        <td class="column1">{{rawData.ignition?rawData.ignition:'--'}}</td>
+                                        <td class="column2">{{rawData.power?rawData.power:'--'}}</td>
+                                        <td class="column4">{{rawData.fuelVoltage?rawData.fuelVoltage:'--'}}</td>
+                                        <td class="column3">{{rawData.raw}}</td>
+                                        <td class="column5">{{rawData.ac?rawData.ac:'--'}}</td>
+                                        <td class="column6">{{rawData.powerCutAlarm?rawData.powerCutAlarm:'--'}}</td>
+                                        <td class="column6">{{rawData.satellites?rawData.satellites:'--'}}</td>
+                                        <td class="column6">{{rawData.rawio?getStringifyio(rawData.rawio):'--'}}</td>
+                                      </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>                 
+                      </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="nearby" role="tabpanel" aria-labelledby="nearby-tab">
+                <div class="row">
+                  <div class="col-12">
+                    <div style="display: flex;margin-top: 10px;">
+                      <label style="margin-top: 10px;">{{'Select Distance (in Meters)' | translate}}</label>
+                      <div style="margin-top:15px">
+                        <input type="range" min="0" max="20000"  [(ngModel)]="nearByValue" class="slider" id="nearbySlider" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg" (change)="changeRangeNearby()">
+                        <p style="text-align: center;">{{nearByValue}} {{'meters' | translate}}</p>
+                      </div> 
+                      <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;height: 45px;" md-raised-button (click)="getNearByVehicles(socketData)">Vehicles</button>  
+                    </div>
+                  </div>
+                </div>
+               
+              </div>
+              <div class="tab-pane fade" id="dcq" role="tabpanel" aria-labelledby="profile-tab">
+                <div class="row">
+                  <div class="col-12">
+                      <div style="width: 100%;">
+                        <div class="limiterTable">
+                          <div class="container-table100">
+                            <div class="wrap-table100">
+                              <div class="table100">
+                                <table class="thisTableOnly">
+                                  <thead style="background: #efecec;font-size: 12px;">
+                                    <tr class="table100-head">
+                                      <th class="column1">{{'IMEI' | translate}}</th>
+                                      <th class="column2">{{'STATUS' | translate}}</th>
+                                      <th class="column3">{{'ACTION' | translate}}</th>
+                                      <th class="column3">{{'TYPE' | translate}}</th>
+                                      <th class="column3">{{'MODEL' | translate}}</th>
+                                      <th class="column4">{{'EXECUTION TIME' | translate}}</th>
+                                      <th class="column5">{{'QUEUED TIME' | translate}}</th>
+                                      <th class="column6">{{'COMMAND' | translate}}</th>
+                                      <th class="column6">{{'RESPONSE' | translate}}</th>
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                      <tr *ngFor="let dcq of dcqData">
+                                        <td class="column1">{{dcq.imei}}</td>
+                                        <td class="column2">{{dcq.status}}</td>
+                                        <td class="column3">{{dcq.action}}</td>
+                                        <td class="column3">{{dcq.cmd_type?dcq.cmd_type:'--'}}</td>
+                                        <td class="column4">{{dcq.model}}</td>
+                                        <td class="column4">{{dcq.executedAt  | date:'medium' }}</td>
+                                        <td class="column5">{{dcq.queuedAt?(dcq.queuedAt | date : 'medium'):'--'}}</td>
+                                        <td class="column6">{{dcq.command?dcq.command:'--'}}</td>
+                                        <td class="column6">{{dcq.deviceResponse?dcq.deviceResponse:'--'}}</td>
+                                      </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>                 
+                      </div>
+                  </div>
+                </div>
+              </div>
+              <div class="tab-pane fade" id="viewParanoma_1" role="tabpanel" aria-labelledby="view-tab">
+         
+                <div id="viewParanoma" style="width: 400px;height: 200px;margin-left: 250px;"></div>
+              </div>
+              <div class="tab-pane fade" id="eventTab" role="tabpanel" aria-labelledby="event-tab">
+                <div class="row">
+                  <div class="col-12">
+                      <div style="width: 100%;">
+                        <div class="limiterTable">
+                          <div class="container-table100">
+                            <div class="wrap-table100">
+                              <div class="table100">
+                                <table  class="table table-striped table-hover" >  
+                                  <tbody>
+                                    <tr *ngFor="let notif of liveEventsData" style="margin-top:10px;">
+                                      <td>
+                                        <div>
+                                          <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
+                                          <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
+                                          <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
+                                        </div>   
+                                      </td>  
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </div>
+                            </div>
+                          </div>
+                        </div>                 
+                      </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"></div>
+            </div>
+          </div>
+        </div>
+        <div class="row" *ngIf="historyDataCondition === true" style="z-index: 1; bottom: 0px; position: absolute;background: white; padding: 10px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);left:15px;width:100%">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0px;padding-left: 0px">
+            <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="position: absolute;top: -86px;background: white;border-radius: 12px;padding: 15px 20px;left: 20pc;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+              <div class="col-12">
+                <div style="display: flex;">
+                  <div>
+                  <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='init'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                  <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                  <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)" mdTooltip="{{'Pause' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                  </div>
+                  <input type="range" min="0" max={{seekBarValue}}  [(ngModel)]="sliderValue" class="slider" id="slider1" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"  (change)="zoomSet()">
+                  <!-- (change)="changeRange()" -->
+                  <div class="kWgQNm" id="myDIV">
+                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
+                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
+                    <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
+                    <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+              <div class="row" >
+                <div class="col-sm-12 col-md-12 col-lg-12" >
+                  <ul class="nav nav-tabs" id="myTabHistory" role="tablistHIstory">
+                    <li class="nav-item">
+                        <a class="nav-link active" id="history-tab" data-toggle="tab" href="#homeH" role="tab" aria-controls=" data" aria-selected="true">{{'History'|translate}}</a>
+                      </li>
+                    <li class="nav-item">
+                      <a class="nav-link" id="parking-tab" data-toggle="tab" href="#parking" role="tab" aria-controls="Socket data" aria-selected="false">{{'Parking'|translate}}</a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" id="event-tab" data-toggle="tab" href="#events" role="tab" aria-controls="Systessm logs" aria-selected="false">{{'Events' | translate}}</a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" id="extra-tab" data-toggle="tab" href="#contactH" role="tab" aria-controls="cfcontact" aria-selected="false"><i class="fas fa-angle-down"></i></a>
+                    </li>
+                  </ul>
+                  <div class="tab-content" id="myTabContent_1">
+                    <div class="tab-pane fade show active" id="homeH" role="tabpanel" aria-labelledby="history-tab">
+                        <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer" title="Time">Time <span *ngIf="playingHistory">{{historyDate}}</span></span>
+                            </div>
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer"
+                                title="Cumulative Distance (Kms.)">Cumulative Distance <span
+                                  *ngIf="playingHistory">{{cummulative_Distance}}</span></span>
+                            </div>
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <span *ngIf="playingHistory" style="font-weight: 500;cursor:pointer" title="Speed">Speed</span> <span *ngIf="playingHistory">{{speeed2}} <span
+                                  style="text-align: center; padding-top: 10px;" *ngIf="playingHistory"
+                                  title="Speed">{{'Km/Hr' | translate}}</span></span>
+                            </div>
+                          </div>
+                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <div>
+                                  <span style="font-weight: 500;">{{'Total Distance' | translate}} :</span>
+                                  <span>{{total_dis}}</span>
+                                </div>
+                                <div>
+                                  <span style="font-weight: 500;">{{'Stoppage Time' | translate}} :</span>
+                                  <span>{{ideal_time}}</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <div>
+                                  <span style="font-weight: 500;cursor: pointer;" title="Command">{{'Command' | translate}}</span>
+                                  <span title="Command">{{socketData?socketData.command:''}}</span>
+                                  <!-- <span style="font-weight: 500;">{{'Cumulative Distance (Kms.)' | translate}} :</span>
+                                <span>{{cummulative_Distance}}</span> -->
+                                  <!-- <span style="font-weight: 500;">{{'Average Speed' | translate}} :</span> -->
+                                  <!-- <span>{{avg_speed}}</span> -->
+                                </div>
+                                <div>
+                                  <span style="font-weight: 500; cursor: pointer;" title="No. of Parkings"> Parking</span>
+                                  <span title="No. of Parkings">{{stoppageCount}}</span>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <div title="Max Speed" styl e="cursor: pointer;">
+                                  <span style="font-weight: 500;">{{'Max Speed'|translate}}</span>
+                                  <span>{{maxSpeedd}}</span><span style="padding-left: 2px;">{{'Km/Hr' | translate}}</span>
+                                </div>
+                                <div style="cursor: pointer" title="Average Speed">
+                                  <span style="font-weight: 500">{{'Average Speed' | translate}}</span>
+                                  <span>{{avg_speed}}</span><span style="padding-left: 2px;">{{'Km/Hr' | translate}}</span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <span style="font-weight: 500;" title="Fuel Consumption">{{'Fuel Consumption' | translate}}</span>
+                                <span title="Fuel Consumption">NA</span>
+                              </div>
+                            </div>  
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <span style="font-weight: 500;" title="Fuel Consumption">{{'Ext. Voltage' | translate}}</span>
+                                <span title="ext_voltage" style="padding-left: 20px;">{{'ext_voltage' | translate}}</span>
+                                <span *ngIf="ext_voltage" style="padding-left: 10px;">{{'volt' | translate}}</span>
+                              </div>
+                            </div>
+                            <div class="col-sm-4 col-md-4 col-lg-4" *ngIf="historyDataCondition === true">
+                            <span style="font-weight: 500;">{{'Area (Acre)' | translate}} :</span>
+                            <span>{{(area | number)}}</span>
+                            </div>
+                          </div>
+                          <div class="row" *ngIf="historyDataCondition === true" style="margin-left: 0;">
+                            <div class="col-sm-8 col-md-8 col-lg-8">
+                              <div>
+                                <span style="font-weight: 500;" title="Fuel Consumption">Address</span>
+                                <span title="Fuel Consumption">{{historyAdress}}</span>
+                              </div>
+                            </div> 
+                            <div class="col-sm-4 col-md-4 col-lg-4">
+                              <div>
+                                <span style="font-weight: 500;" title="Fuel Consumption">Working Hours</span>
+                                <span title="Fuel Consumption">{{workingHours}}</span>
+                              </div>
+                            </div>
+                          </div>
+                    </div>
+                    <div class="tab-pane fade" id="parking" role="tabpanel" aria-labelledby="parking-tab">
+                      <div class="row">
+                        <div class="col-12">
+                            <div style="width: 100%;">
+                              <div class="limiterTable">
+                                <div class="container-table100">
+                                  <div class="wrap-table100">
+                                    <div class="table100">
+                                      <table class="thisTableOnly" style="width: 100%;">
+                                        <thead style="background: #efecec;font-size: 12px;">
+                                          <tr class="table100-head">
+                                            <th style="padding: 10px;">{{'Vehicle Name' | translate}}</th>
+                                            <th style="padding: 10px;">{{'From Time' | translate}}</th>
+                                            <th style="padding: 10px;">{{'To Time' | translate}}</th>
+                                            <th style="padding: 10px;">{{'Duration' | translate}}</th>
+                                            <th style="padding: 10px;">{{'Location' | translate}}</th>
+                                          </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr *ngFor="let park of parkingArr">
+                                              <td class="column1">{{park.device?park.device.Device_Name : '--'}}</td>
+                                              <td class="column2">{{park.arrival_time | date:'medium' }}</td>
+                                              <td class="column3">{{park.departure_time |  date:'medium'}}</td>
+                                              <td class="column4">{{getDuration(park.arrival_time,park.departure_time)}}</td>
+                                              <td class="column4" *ngIf="park.address">{{park.address?park.address:'--'}}</td>
+                                              <td class="column4" *ngIf="!park.address">
+                                                 <a href={{getAlink(park.lat,park.long)}}  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>            
+                                              </td>
+                                            </tr>
+                                        </tbody>
+                                      </table>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>                 
+                            </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="tab-pane fade" id="events" role="tabpanel" aria-labelledby="events-tab">
+                      <div class="row">
+                        <div class="col-12">
+                            <div style="width: 100%;">
+                              <div class="limiterTable">
+                                <div class="container-table100">
+                                  <div class="wrap-table100">
+                                    <div class="table100">
+                                      <table  class="table table-striped table-hover" >  
+                                        <tbody>
+                                          <tr *ngFor="let notif of notifArray" style="margin-top:10px;">
+                                            <td>
+                                              <div>
+                                                <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
+                                                <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
+                                                <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
+                                              </div>   
+                                            </td>
+                                          </tr>     
+                                        </tbody>
+                                      </table>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>                 
+                            </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="tab-pane fade" id="contactH" role="tabpanel" aria-labelledby="contactH-tab"></div>
+                  </div>         
+                </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="row" style="padding: 0px;margin: 0px;">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0;margin: 0;">
+            <div class="row">
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <div>
+                    <i class="fas fa-expand" title="Hide work area" (click)="showHideWorkArea()"></i>
+                </div> 
+              </div>
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <div>
+                  <i class="fas fa-book-open"></i>
+                </div>
+                <div>
+                  <p>{{currentTime}}</p>
+                </div>    
+              </div>
+            </div>
+          </div>
+    </div> -->
+  </div>
+
+</div>
+
+<!-- <div *ngIf="false"> -->
+  <table id="headerTable" style="border: 1px solid black;width: 100%;
+    border-collapse: collapse;">
+    <tr style="text-align:center">
+      <div style="text-align:center">Table</div>
+    </tr>
+    <tr style="height:30px;border-top:1px solid black">
+      <td>
+        <span style="font-weight: 700;">Name</span>: {{deviceNameForPDF}}
+      </td>
+      <td>
+        <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <span style="font-weight: 700;">Start Time</span>: {{startTime}}
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Time</span>: {{endTime}}
+      </td>
+    </tr>
+    <tr style="height:30px;border-top:1px solid black">
+      <td>
+        <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Address</span>: {{endAddress}}
+      </td>
+    </tr>
+  </table>
+<div class="w3-sidebar w3-bar-block w3-animate-right" style="display:none;right:0;width: 340px;top: 60px;background: transparent;" id="rightMenu">
+  <button (click)="closeRightMenu()" class="w3-bar-item w3-button w3-large">Close &times;</button>
+ <div class="card m-2" style="border: 1px solid #dadada;
+  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.2s;background: linear-gradient(45deg, #7a33df, #e9ecef);">
+   <div class="card-body" style="font-family: initial;">
+     <h6> {{liveAdd}}</h6>
+     <span>Latitude:{{socketData?socketData.latDecimal:''}}</span>
+      <span>Longitude:{{socketData?socketData.longDecimal:''}}</span>
+
+   </div>
+
+ </div>
+
+<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
+ background: linear-gradient(33deg, #ffe607ed, #cbe9ba);">
+  <div class="card-body" style="font-family: initial;">
+    <div class="row">
+      <div class="col-md-6">
+        <!-- <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6> -->
+        <h6 [md-tooltip]="socketData?socketData.ac?socketData.ac==1?'Ac ON':socketData.ac==0?'AC OFF':'AC Not Supported':ac==1?'Ac ON':ac==0?'AC OFF':'AC Not Supported':'AC Not Supported'" ><img  style="width: 20px;" src="../../assets/image/acGrey.png"> {{socketData?socketData.ac?socketData.ac==1?'ON':socketData.ac==0?'OFF':'NA':ac==0?"OFF":ac==1?"ON":'NA':'NA'}}</h6>
+        <h6 [md-tooltip]="socketData?socketData.power?socketData.power=='1'?'Power ON':socketData.power=='0'?'Power OFF':'':power=='1'?'Power ON':power=='0'?'Power OFF':'':''" class="mt-3"><img  style="width: 20px;" src="../../assets/image/power_off.png">
+          {{socketData?socketData.power?socketData.power=="1"?'ON':socketData.power=="0"?'OFF':'NA':power=="0"?"OFF":power=="1"?"ON":'NA':'NA'}}</h6>
+
+      </div>
+      <div class="col-md-6">
+        <h6 [md-tooltip]="socketData?socketData.ignition==1?'Ignition ON':'Ignition OFF':''"><img style="width: 20px;" src="../../assets/image/enginered.png"> {{socketData?socketData.ignition==1?'ON':'OFF':''}}</h6>
+        <h6 md-tooltip="Door Status" class="mt-3"><img style="width: 26px;" src="../../assets/images/liveTrackIcons/car-door.png">
+                  {{socketData?socketData.ignition==1?'ON':'OFF':''}}</h6>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
+ background: linear-gradient(33deg, #f44336, #cbe9ba)">
+  <div class="card-body" style="font-family: initial;">
+    <div class="row">
+      <div class="col-md-6">
+        <h6>Speed:<span class="font-weight-bold">{{socketData?socketData.speed:''}}</span> km/hr</h6>
+        <h6 class="mt-3">Fuel Consumtion:<span class="font-weight-bold">{{fuelConsumption}}</span></h6>
+        
+      </div>
+      <div class="col-md-6">
+        <h6>Today's Odo:<span class="font-weight-bold">{{todaysOdo}}</span> km</h6>
+        
+      </div>
+
+    </div>
+
+  </div>
+
+</div>
+
+<div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
+ background: linear-gradient(33deg, #8f83ae, #544545);">
+  <div class="card-header">
+    <h6>Alerts</h6>
+  </div>
+ 
+  <div class="card-body"  style="font-family: initial;">
+    <div class="row">
+      <div class="col-md-6">
+        <!-- <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6> -->
+        
+        <h6 md-tooltip="Power Alert"><img style="width: 20px;" src="../../assets/image/powerON.png"> Power alert:<span class="font-weight-bold">0</span></h6>
+        <h6  class="mt-3" md-tooltip="Parking Alert"><i class="material-icons" >local_parking</i> Parking alert:<span class="font-weight-bold">0</span></h6>
+        <h6 class="mt-3" md-tooltip="Toll Alert"><img style="width: 20px;" src="../../assets/image/tollbooth.png"> Toll alert:<span class="font-weight-bold">0</span></h6>
+      </div>
+      <div class="col-md-6">
+        <h6 md-tooltip="Ignition Alert"><img style="width: 20px;"
+            src="../../assets/image/enginena.png"> Ignition alert:<span  class="font-weight-bold">0</span></h6>
+        <h6 class="mt-3" md-tooltip="Overspeed Alert"><i class="fas fa-tachometer-alt"></i> Overspeed alert:<span class="font-weight-bold">0</span></h6>
+        <h6 class="mt-3" md-tooltip="Geofence Alert"><img style="width: 20px;" src="../../assets/image/geofence.png"> Geofence Alert:<span class="font-weight-bold">0</span></h6>
+      </div>
+    
+    
+    </div>
+  </div>
+
+</div>
+<!-- <div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div> -->
+</div>
+
diff --git a/src/app/location/location.component.scss b/src/app/location/location.component.scss
new file mode 100644
index 0000000..01a2595
--- /dev/null
+++ b/src/app/location/location.component.scss
@@ -0,0 +1,820 @@
+.topWrapper{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+}
+
+.mainWrapperWrapper{
+    height: inherit;
+    width: inherit;
+    padding-top: 59px; 
+    background: #efecec;
+}
+
+.rowStyle{
+    height: inherit;
+    width: inherit;
+    margin: 0;
+}
+
+.tabCustomStyle{
+    .mat-tab-header{
+        background: white;
+    }
+
+}
+
+.selectedRunning{
+    background: #86ac41c7;
+    color: white;
+    border-right: 2px solid #ededed;
+}
+
+.selectedStopped{
+    background: #cb0000d9;
+    color: white;
+    border-right: 2px solid #ededed;
+}
+
+.Inactice{
+    background: #4897D8;
+    color: white;
+    border-right: 2px solid #ededed;
+   
+}
+
+.selectIdling{
+    background: #ffc13c;
+    color: white;
+    border-right: 2px solid #ededed;
+}
+
+.selectedNodata{
+    background: #5B7065;
+    color: white;
+    border-right: 2px solid #ededed;
+}
+
+.deselected{
+    background: white;
+    color: black;
+}
+
+.scrollit {
+    overflow:scroll;
+    height:100%;    
+}
+
+.panel-resizable {
+    resize: vertical;
+  overflow: auto
+}
+
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+  
+  .buttonStyle{
+      background: white;
+      color:black;
+
+  }
+
+  .buttonStyle:hover{
+    background: grey;
+    color:black;
+
+}
+
+.animateClass{
+    font-size: 12px; padding: 12px; cursor: pointer; margin-left: 10px; margin-right: 10px; color: white; background: #989898; border-radius: 25px;     font-size: 12px; padding: 12px; cursor: pointer; margin-left: 10px; margin-right: 10px; color: white; background: #989898; border-radius: 25px;box-shadow:  -2px 1px 3px 0px #b2b0ae;
+
+}
+
+.animateClass_1{
+    padding: 5px;padding-left: 7px; padding-right: 7px;color:black;cursor: pointer;  border: 1px solid #b5b5b5 ;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+}
+
+.animateClass_2{
+    padding: 5px;color:rgb(255, 254, 254);cursor: pointer; border: 1px solid #b5b5b5;box-shadow: 0px 2px 2px 0px #b2b0ae ;
+}
+
+.animateClass_3{
+    padding: 5px;color: rgb(255, 254, 254);cursor: pointer; border: 1px solid #b5b5b5;box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+
+
+.animateClass_1:active {
+    //   background-color: #3e8e41;
+      box-shadow: 0 1px #666;
+      transform: translateY(1px);
+    }
+
+    .animateClass_2:active {
+        //   background-color: #3e8e41;
+          box-shadow: 0 1px #666;
+          transform: translateY(1px);
+        }
+
+        .animateClass_3:active {
+            //   background-color: #3e8e41;
+              box-shadow: 0 1px #666;
+              transform: translateY(1px);
+            }
+
+
+
+
+
+.animateClass:hover {
+    // background-color: #3e8e41
+}
+
+.animateClass:active {
+//   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+
+
+.animateClass_4{
+    width:25%;border-right: 2px solid white;
+}
+.animateClass_5{
+    width:25%;border-right: 2px solid white;
+}
+.animateClass_6{
+    width:25%;border-right: 2px solid white;
+}
+
+.animateClass_7{
+    width:25%;
+}
+
+.animateClass_4:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_5:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_6:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateClass_7:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+
+
+.animateClass_8{
+   cursor: pointer;
+   color:#2d4262;
+}
+.animateClass_9{
+    cursor: pointer;
+    color:green ; 
+}
+.animateClass_10{
+    cursor: pointer;
+    color:green ; 
+}
+
+.animateClass_11{
+    cursor: pointer;
+    color : red;
+}
+
+.animateClass_12{
+    cursor: pointer;
+    color:#2d4262;
+}
+.animateClass_13{
+    cursor: pointer;
+    color:red
+}
+
+.animateDropDown{
+    font-size: 15px;
+    color: #888888;
+    border-radius: 25px;
+    box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+.animateDropDown:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateDropDown:hover{
+    color: blue;
+}
+
+.animateClass_4:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_5:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_6:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateClass_7:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateClass_8:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_9:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+.animateClass_10:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateClass_11:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.animateClass_12:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+
+.animateClass_13:active{
+    box-shadow: 0 1px #666;
+    transform: translateY(1px);
+}
+
+.mat-menu-panel.styleMenu{
+    max-width: 35px;
+    min-width: 30px;
+    background: #efecec;
+    border: 1px solid #afadad;
+}
+
+
+#slider {
+    margin: 20px;
+  }
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 150px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+  width: 150px;
+  height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+
+
+  
+  
+  
+  /*//////////////////////////////////////////////////////////////////
+  [ RESTYLE TAG ]*/
+  * {
+      margin: 0px; 
+      padding: 0px; 
+      box-sizing: border-box;
+  }
+  
+  body, html {
+      height: 100%;
+      font-family: sans-serif;
+  }
+  
+  /* ------------------------------------ */
+  a {
+      margin: 0px;
+      transition: all 0.4s;
+      -webkit-transition: all 0.4s;
+    -o-transition: all 0.4s;
+    -moz-transition: all 0.4s;
+  }
+  
+  a:focus {
+      outline: none !important;
+  }
+  
+  a:hover {
+      text-decoration: none;
+  }
+  
+  /* ------------------------------------ */
+  h1,h2,h3,h4,h5,h6 {margin: 0px;}
+  
+  p {margin: 0px;}
+  
+  ul, li {
+      margin: 0px;
+      list-style-type: none;
+  }
+  
+  
+  /* ------------------------------------ */
+  input {
+    display: block;
+      outline: none;
+      border: none !important;
+  }
+  
+  textarea {
+    display: block;
+    outline: none;
+  }
+  
+  textarea:focus, input:focus {
+    border-color: transparent !important;
+  }
+  
+  /* ------------------------------------ */
+  button {
+      outline: none !important;
+      border: none;
+      background: transparent;
+  }
+  
+  button:hover {
+      cursor: pointer;
+  }
+  
+  iframe {
+      border: none !important;
+  }
+  
+  
+  
+  
+  /*//////////////////////////////////////////////////////////////////
+  [ Utiliti ]*/
+  
+  
+  
+  
+  
+  
+  /*//////////////////////////////////////////////////////////////////
+  [ Table ]*/
+  
+  .limiterTable {
+    width: 100%;
+    margin: 0 auto;
+    height: 20vh;
+    overflow: auto;
+  }
+  
+  .container-table100 {
+    width: 100%;
+    // min-height: 100vh;
+    // background: #c850c0;
+    // background: -webkit-linear-gradient(45deg, #4158d0, #c850c0);
+    // background: -o-linear-gradient(45deg, #4158d0, #c850c0);
+  //  background: -moz-linear-gradient(45deg, #4158d0, #c850c0);
+    // background: linear-gradient(45deg, #4158d0, #c850c0);
+  
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    // padding: 33px 30px;
+  }
+  
+  .wrap-table100 {
+    width: inherit;
+  }
+  
+  // thisTableOnly {
+  //   border-spacing: 1;
+  //   border-collapse: collapse;
+  //   background: white;
+  //   border-radius: 10px;
+  //   overflow: hidden;
+  //   width: 100%;
+  //   margin: 0 auto;
+  //   position: relative;
+  // }
+  // thisTableOnly * {
+  //   position: relative;
+  // }
+  // thisTableOnly td, thisTableOnly th {
+  //   padding-left: 8px;
+  // }
+  // thisTableOnly thead tr {
+  //   height: 60px;
+  //   background: #36304a;
+  // }
+  // thisTableOnly tbody tr {
+  //   height: 50px;
+  // }
+  // thisTableOnly tbody tr:last-child {
+  //   border: 0;
+  // }
+  // thisTableOnly td, thisTableOnly th {
+  //   text-align: left;
+  // }
+  // thisTableOnly td.l, thisTableOnly th.l {
+  //   text-align: right;
+  // }
+  // thisTableOnly td.c, thisTableOnly th.c {
+  //   text-align: center;
+  // }
+  // thisTableOnly td.r, thisTableOnly th.r {
+  //   text-align: center;
+  // }
+  
+  
+  // .table100-head th{
+  //   // font-family: OpenSans-Regular;
+  //   font-size: 18px;
+  //   color: #fff;
+  //   line-height: 1.2;
+  //   font-weight: unset;
+  // }
+  
+  tbody tr:nth-child(even) {
+    background-color: #f5f5f5;
+  }
+  
+  // tbody tr {
+
+  //   font-size: 15px;
+  //   color: #808080;
+  //   line-height: 1.2;
+  //   font-weight: unset;
+  // }
+  
+  // tbody tr:hover {
+  //   color: #555555;
+  //   background-color: #f5f5f5;
+  //   cursor: pointer;
+  // }
+  
+  .column1 {
+    width: 260px;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  .column2 {
+    width: 160px;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  .column3 {
+    width: 245px;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  .column4 {
+    width: 110px;
+    // text-align: right;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  .column5 {
+    width: 170px;
+    // text-align: right;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  .column6 {
+    width: 222px;
+    // text-align: right;
+    padding-right: 62px;
+    white-space: nowrap;
+    padding: 10px 10px 10px 10px;
+  }
+  
+  
+  // @media screen and (max-width: 992px) {
+  //   table {
+  //     display: block;
+  //   }
+  //   table > *, table tr, table td, table th {
+  //     display: block;
+  //   }
+  //   table thead {
+  //     display: none;
+  //   }
+  //   table tbody tr {
+  //     height: auto;
+  //     padding: 37px 0;
+  //   }
+  //   table tbody tr td {
+  //     padding-left: 40% !important;
+  //     margin-bottom: 24px;
+  //   }
+  //   table tbody tr td:last-child {
+  //     margin-bottom: 0;
+  //   }
+  //   table tbody tr td:before {
+  //   //   font-family: OpenSans-Regular;
+  //     font-size: 14px;
+  //     color: #999999;
+  //     line-height: 1.2;
+  //     font-weight: unset;
+  //     position: absolute;
+  //     width: 40%;
+  //     left: 30px;
+  //     top: 0;
+  //   }
+  //   table tbody tr td:nth-child(1):before {
+  //     content: "Date";
+  //   }
+  //   table tbody tr td:nth-child(2):before {
+  //     content: "Order ID";
+  //   }
+  //   table tbody tr td:nth-child(3):before {
+  //     content: "Name";
+  //   }
+  //   table tbody tr td:nth-child(4):before {
+  //     content: "Price";
+  //   }
+  //   table tbody tr td:nth-child(5):before {
+  //     content: "Quantity";
+  //   }
+  //   table tbody tr td:nth-child(6):before {
+  //     content: "Total";
+  //   }
+  
+  //   .column4,
+  //   .column5,
+  //   .column6 {
+  //     text-align: left;
+  //   }
+  
+  //   .column4,
+  //   .column5,
+  //   .column6,
+  //   .column1,
+  //   .column2,
+  //   .column3 {
+  //     width: 100%;
+  //   }
+  
+  //   tbody tr {
+  //     font-size: 14px;
+  //   }
+  // }
+  
+  // @media (max-width: 576px) {
+  //   .container-table100 {
+  //     padding-left: 15px;
+  //     padding-right: 15px;
+  //   }
+  // }
+
+  .kWgQNm {
+    box-sizing: border-box;
+    display: flex;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    align-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    max-width: unset;
+    min-width: unset;
+    min-height: unset;
+    cursor: unset;
+    transform: unset;
+    word-break: unset;
+    z-index: unset;
+    padding: 0px;
+    margin: 0px;
+    overflow: unset;
+    background: unset;
+    border-right: unset;
+    border-bottom: unset;
+    flex: 0 0 auto;
+    border-radius: unset;
+    transition: initial;
+}
+
+.dfmgGo {
+    z-index: 0;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
+    box-shadow: unset;
+    -webkit-box-flex: unset;
+    flex-grow: unset;
+    background-color: rgb(255, 255, 255);
+    color: rgb(30, 172, 178);
+    font-size: 14px;
+    backdrop-filter: unset;
+    width: 30px;
+    max-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    align-self: unset;
+    padding: 3px;
+    border-left: 1px solid rgb(30, 172, 178);
+    border-right: none;
+    border-top: 1px solid rgb(30, 172, 178);
+    border-bottom: 1px solid rgb(30, 172, 178);
+    margin: 0px;
+    border-radius: 18px 0px 0px 18px;
+}
+
+.jXaklS {
+    z-index: 0;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
+    box-shadow: unset;
+    -webkit-box-flex: unset;
+    flex-grow: unset;
+    background-color: rgb(255, 255, 255);
+    color: rgb(30, 172, 178);
+    font-size: 14px;
+    backdrop-filter: unset;
+    width: 30px;
+    max-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    align-self: unset;
+    padding: 3px;
+    border-left: none;
+    border-right: none;
+    border-top: 1px solid rgb(30, 172, 178);
+    border-bottom: 1px solid rgb(30, 172, 178);
+    margin: 0px;
+    border-radius: 0px;
+}
+
+.jXaklS {
+    z-index: 0;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
+    box-shadow: unset;
+    -webkit-box-flex: unset;
+    flex-grow: unset;
+    background-color: rgb(255, 255, 255);
+    color: rgb(30, 172, 178);
+    font-size: 14px;
+    backdrop-filter: unset;
+    width: 30px;
+    max-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    align-self: unset;
+    padding: 3px;
+    border-left: none;
+    border-right: none;
+    border-top: 1px solid rgb(30, 172, 178);
+    border-bottom: 1px solid rgb(30, 172, 178);
+    margin: 0px;
+    border-radius: 0px;
+}
+
+.bvKoMW {
+    z-index: 0;
+    top: unset;
+    right: unset;
+    bottom: unset;
+    left: unset;
+    box-shadow: unset;
+    -webkit-box-flex: unset;
+    flex-grow: unset;
+  
+   color: #1eacb2;;
+    font-size: 14px;
+    backdrop-filter: unset;
+    width: 30px;
+    max-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    align-self: unset;
+    padding: 3px;
+    border-left: none;
+    border-right: 1px solid rgb(30, 172, 178);
+    border-top: 1px solid rgb(30, 172, 178);
+    border-bottom: 1px solid rgb(30, 172, 178);
+    margin: 0px;
+    border-radius: 0px 18px 18px 0px;
+}
+
+
+.kWgQNm{
+//   .active,  .dfmgGo:hover{
+//         background-color: rgb(30, 172, 178);
+//         border-right: 1px solid rgb(30, 172, 178);
+//         border-top: 1px solid rgb(30, 172, 178);
+//         border-bottom: 1px solid rgb(30, 172, 178);
+//         color:white;
+//     }
+    
+    .active, .sc-bdVaJa:hover{
+        background-color: rgb(30, 172, 178);
+        color:white;
+        border-bottom: 1px solid rgb(30, 172, 178);
+    }
+    
+    // .active, .bvKoMW:hover{
+    //     background-color: rgb(30, 172, 178);
+    //     border-right: 1px solid rgb(30, 172, 178);
+    //     border-top: 1px solid rgb(30, 172, 178);
+    //     border-bottom: 1px solid rgb(30, 172, 178);
+    //     color:white;
+    // }
+
+}
+
diff --git a/src/app/location/location.component.spec.ts b/src/app/location/location.component.spec.ts
new file mode 100644
index 0000000..7171d73
--- /dev/null
+++ b/src/app/location/location.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LocationComponent } from './location.component';
+
+describe('LocationComponent', () => {
+  let component: LocationComponent;
+  let fixture: ComponentFixture<LocationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LocationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/location.component.ts b/src/app/location/location.component.ts
new file mode 100644
index 0000000..5fb5567
--- /dev/null
+++ b/src/app/location/location.component.ts
@@ -0,0 +1,8859 @@
+import { Component, OnInit, NgZone, EventEmitter, ContentChildren, QueryList, AfterContentInit, ViewChild, OnDestroy, OnChanges, ElementRef, Output, ViewEncapsulation, HostListener } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdTabChangeEvent } from '@angular/material';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { MdSnackBar } from '@angular/material';
+import { DatainjectionService } from '../datainjection.service'
+import { ContactService } from '../contact.service';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import * as moment from 'moment-timezone';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ShareLocComponent } from '../location/share-loc/share-loc.component';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs/Rx';
+import { BrowserModule } from '@angular/platform-browser';
+import { ChartsModule, BaseChartDirective } from 'ng2-charts/ng2-charts';
+import * as io from 'socket.io-client';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { SidemenuFuelComponent } from '../sidemenu-fuel/sidemenu-fuel.component';
+import { AddpoiBylocationComponent } from '../addpoi-bylocation/addpoi-bylocation.component';
+import { CreateTripComponent } from './create-trip/create-trip.component';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ImmobilizeComponent } from './immobilize/immobilize.component';
+import { CmdUIComponent } from './cmd-ui/cmd-ui.component';
+import { CommandWindowComponent } from './command-window/command-window.component';
+import { AddDeviceComponent } from './add-device/add-device.component';
+import { FormControl } from '@angular/forms';
+import { ShoRoutePlanComponent } from './sho-route-plan/sho-route-plan.component';
+
+declare var jsPDF : any;
+declare var html2canvas:any
+
+declare var swal: any;
+declare var ol:any;
+
+/* import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
+*/
+declare var google: any;
+
+declare var MarkerClusterer: any;
+declare var InfoBox: any;
+declare var RadialGauge: any;
+/* declare var Gauge: any;
+ */@Component({
+  selector: 'app-location',
+  templateUrl: './location.component.html',
+  providers: [SidebarComponent],
+  styleUrls: ['./location.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class LocationComponent implements OnInit, OnDestroy {
+  @ViewChild(SidemenuFuelComponent) child1: SidemenuFuelComponent;
+  @ViewChild('main')main:ElementRef;
+  modelChanged: Subject<string> = new Subject<string>();
+  area=0;
+  toppings = new FormControl();
+
+  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+  imei
+  // private fuelComponent: SidemenuFuelComponent;
+  showLabels:boolean=true;
+  showAddress:boolean=false;
+  showSocketData: boolean = false;
+  satelliteDisabled:boolean=false
+  immobilizeChk:boolean = false;
+  testData: any;
+  reloadCOmponent: boolean;
+  mapWidth: string;
+  showButton: boolean = true;
+  test_stop: any = [];
+  Durations: string;
+  park_icon = [];
+  speeed_1 = 10;
+  test_Data: any;
+  timerGif = "../../assets/images/timerGif.gif";
+  addresslocation: any;
+  departureTime: string;
+  arrivalTime: string;
+  longitude: any;
+  minIdleTime: number = 10;
+  locations: any;
+  latitude: any;
+  stoppage_container: any = [];
+  // stop_locations: any =[];
+  departure: Date;
+  arrival: Date;
+  dev_id: any;
+  //date: any
+  MapLoad: boolean = true;
+  loc: any;
+  lcShr: Boolean = false;
+  before: any;
+  SpeedMeter: Boolean;
+  zoomLevel: number;
+  data_descip: any;
+  superAdmin: Boolean = false;
+  liveAdd: any = "";
+  mapNew: any;
+  trafficLayer: any;
+  routeDetails: (uId: any, choice: any) => void;
+  routeDetails1: (uId: any, choice: any) => void;
+  latitudeInDMS: any;
+  longitudeInDMS: any;
+  toggleGeofence: (choice: any) => void;
+  toggleGeofence1: (choice: any) => void;
+  enabletrail:boolean = false;
+  parkingButtonShow;
+  selectedDevice
+  showHistory: boolean = false;
+  togglePOI: (choice: any) => void;
+   togglePOI1: (choice: any) => void;
+  colorTheme = 'theme-dark-blue';
+  last_speed: string;
+  DealerID: any;
+  supAdm: any;
+  deviceObj: any = [];
+  dealerid: any;
+  supadmin: any;
+  deviceSelect: any = [];
+  deviceName: any;
+  stoppageCount: any;
+  speedArr: any;
+  maxSpeedd: any;
+  dev_by_dashboard: string;
+  latToPass: any;
+  longToPass: any;
+  directionsService: any;
+  directionsDisplay: any;
+  EndTripStartLat: any;
+  EndTripStartLong: any;
+  ETA: any;
+  bsConfig: Partial<BsDatepickerConfig>;
+  tripId: any;
+  historyDate: any;
+
+  goToPoint: () => void;
+  moveMarker: () => void;
+  marker4: any;
+  start: any;
+  historyMap: any;
+  navId: String;
+  deviceList: any = [];
+  to: string;
+  tab_1 : boolean =false;
+  tab_2:boolean =false;
+  tab_3:boolean= false;
+  from: string;
+  total_vech: any;
+  idle_vech: any;
+  off_vech: any;
+  maintanance: any;
+  expiredDevices: any;
+  OutOfReach: any;
+  no_data: any;
+  Running: any;
+  idle_duration: any;
+  off_duration: any;
+  maintenance_ids: any;
+  idle_ids: any;
+  expired_ids: any;
+  off_ids: any;
+  runnigg: any;
+  outofreach_ids: any;
+  alldevvice: any;
+  no_gps_name: any;
+  id_running: any;
+  id_stop: any;
+  id_out: any;
+  id_idel: any;
+  unloading: any;
+  loading: any;
+  id_main: any;
+  currentTime = new Date();
+  not_on_root: any;
+  cordin: any;
+  temptrackingDev: any;
+  buindhistoryDevice: any;
+  currStatus: any;
+  socketData: any;
+  tempMapHistory: any = [];
+  showTable: boolean = false;
+  historyDataCondition: boolean = false;
+  liveLocationMarkerObj: any;
+  darkModeSwitch: boolean = false;
+  tttttt: any = [];
+   tabIndexValue: any = "0";
+   tempDevInfo: any;
+   cummulative_Distance: number =0;
+   token_identifier: string;
+   contentAdd: string;
+   historyAdress: any = '';
+   gpsDataArr: any;
+   ext_voltage: any;
+   seekBarValue: any=200;
+   sliderValue: number = 0;
+   indexValue: any;
+   status_cmdq: any;
+   intervalTimeOut:any;
+   immobilizeCount: number;
+   ImmErrMsg: string;
+   showErr: boolean =false;
+   unlocked: boolean =false;
+   errIcon:boolean=false;
+   locked: boolean=false;
+   shoError:any;
+   private socket_Notify;
+   dealer_Permission: any;
+   adbtn: string;
+   markerArray: any;
+   satelite=5;
+   dataSelect2:any;
+   newArr=[{"value":"1"},{"value":"2"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"},{"value":"7"},{"value":"8"},{"value":"9"},
+   {"value":"10"},{"value":"11"},{"value":"12"},{"value":"13"},{"value":"14"},{"value":"15"}]
+   distanceVariation: any;
+   digitalInput: any;
+  myaccount() {
+
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+
+    // let dialogRef = this.dialog.open(MyaccountComponent, {
+    //   width: '903px',
+    //   data: {}
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+
+    //   if(result == "succ"){
+        // console.log("Updated")
+    //   }
+
+    // });
+  }
+
+  filterStates1(val) {
+    // console.log("===>",val)
+    if (val) {
+      const filterValue: any = val ; 1
+      this.dataSelect2 = this.newArr.filter(function (d) {
+    // console.log("inside Search Method=>",d);
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+      });
+      if(this.dataSelect2.length!=0){
+      this.satelite=val
+      // console.log("searched model=>",this.dataSelect2,"----------",this.satelite);
+    }
+      return this.dataSelect2;
+    }
+  }
+
+  addcus() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("add");
+  }
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+
+  // geo(){
+  //   this.router.navigateByUrl("geofencing");
+
+  // }
+  shareLocation(device) {
+    // console.log(a);
+
+    // console.log(this.new, this.prev_map);
+
+    if (this.new) {
+      if (this.new == null || this.new == undefined) {
+        this.tost1("shrlcnd");
+      }
+      else {
+        let dialogRef = this.dialog.open(ShareLocComponent, {
+          width: '528px',
+          data: { did: device.Device_ID, dname: device.viewValue }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+
+          if (result == "shareloc") {
+            this.new = null
+            this.tost1("shareloc");
+          }
+
+        });
+      }
+
+    }
+    else if (this.prev_map) {
+      if (this.prev_map == null || this.prev_map == undefined) {
+        this.tost1("shrlcnd");
+      }
+      else {
+        /*       window.localStorage['mapLoad_Name'] = name */
+
+        let dialogRef = this.dialog.open(ShareLocComponent, {
+          width: '528px',
+          data: { did: this.prev_map, dname: window.localStorage.mapLoad_Name }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+
+          // console.log(result);
+          if (result == "shareloc") {
+            this.tost1("shareloc");
+          }
+
+        });
+      }
+
+    }
+    else {
+      this.tost1("shrlcnd");
+    }
+  }
+
+  // TOAST
+  tost1(divid) {
+    if (divid == "shareloc") {
+      this.data_descip = "Location Sucessfully Shared";
+      launch_toast();
+    }
+    else if (divid == "nullsrlc") {
+      this.data_descip = "Please Enter ether Email ID or Phone Number";
+      launch_toast();
+    }
+    else if (divid == "shrlcnd") {
+      this.data_descip = "Please Select any Device";
+      launch_toast();
+    }else if(divid === 'added'){
+      this.data_descip = "Device added";
+      launch_toast();
+    }
+
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      // console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    }
+  }
+  dataa: any;
+  /* 
+  shreloc(b){
+    if(this.loc == null || this.loc == undefined ){
+      // console.log("hkfhl")
+      this.tost1("nullsrlc");
+    }
+    else{
+      this.contactService.shareloc(b.did,this.loc).subscribe(
+        
+        data => {
+          this.dataa = data 
+          this.lcShr = false;
+          this.tost1("shareloc");
+        // }, (err: any) => { //console.log(err.status); 
+          // console.log(err);
+          if(err.status !=   200)
+          {
+            
+          }
+          
+          
+          
+        })
+        
+      }
+    } */
+
+
+  settings = {
+    /*  bigBanner: true, */
+    date1: new Date().setHours(0, 0, 0),
+    date2: new Date(),
+    timePicker: true,
+    format: 'dd-MMM-yyyy hh:mm a',
+    closeOnSelect: true
+
+    /*   defaultOpen: true */
+  }
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("dashboard");
+
+  }
+
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+
+  soon() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("const");
+  }
+  point: any = 0;
+  a() {
+    //  console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  report() {
+    this.cond = false
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report");
+
+  }
+
+
+  vehicleRoute() {
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  route_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+
+  notification() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  report_speed() {
+    // console.log("report speed call")
+    this.cond = false
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  openNav() {
+    this.router.navigateByUrl("location");
+  }
+  geoo() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("geofencing");
+
+  }
+  ideal() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  cond: Boolean = false;
+  /*
+  foods = [
+    {value: 'Device 1', viewValue: 'Device 1'},
+    {value: 'Device 2', viewValue: 'Device 2'},
+    
+  ]; */
+
+  mainmap: boolean = false;
+  speed: any;
+  datee: any
+  time: any
+  online: Boolean;
+  latLongArr3 = []
+  offline: Boolean = false;
+  geo: Boolean = false;
+  foods = [];
+  devmap(a) {
+    // console.log(a);
+  }
+
+
+  showhistory(a) {
+    //  console.log(this.new);
+    if (this.new) {
+      var selectedDevice = {
+        id: this.new.id,
+        viewValue: this.new.viewValue,
+        iconType: this.new.iconType,
+        deviceId: this.new.did
+      }
+      this.deviceName = selectedDevice.viewValue;
+      // console.log(selectedDevice);
+      // console.log(this.deviceSelect);
+      this.deviceSelect.push(selectedDevice);
+      // console.log("Selected Device",this.deviceSelect);
+      //  a = this.new;
+      a = this.deviceSelect[0];
+    }
+
+
+    this.showButton = !this.showButton;
+    // this.date1 = new Date();
+    this.date2 = new Date();
+    this.mapp = false;
+    this.mappp = false
+    this.MapLoad = false
+    this.historyData = true
+    this.hismap = true;
+    this.lcShr = false;
+    this.online = false;
+    this.offline = true;
+    this.latlongObjArr = [];
+    this.latLongArr2 = [];
+    this.lat = null;
+    this.lng = null;
+
+    if (a == undefined) {
+    }
+    else {
+      this.socket.removeAllListeners(a.deviceId);
+      //this.socket_Geo.removeAllListeners(a.did);
+    }
+
+    // console.log("Runnig History Tracking")
+    //this.hismap = false;
+    //this.mapp = true;
+    this.latLongArr = []
+
+  }
+
+  showgeo() {
+    this.mapp = false;
+    this.mappp = false
+    // console.log("showgeo")
+    this.online = false;
+    this.offline = false;
+    this.lcShr = false;
+    this.geo = true;
+    let map;
+    this.geofun = true;
+    runMaps();
+
+    function runMaps() {
+
+      // console.log("Running GeoFencing")
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(function (position) {
+
+          map = new google.maps.Map(document.getElementById('map'), {
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            zoom: 15,
+
+          });
+          google.maps.event.addListener(map, 'click', function (event) {
+            placeMarker(event.latLng);
+            // console.log(event.latLng.toUrlValue(5));
+          });
+
+          function placeMarker(location) {
+            var marker = new google.maps.Marker({
+              position: location,
+              map: map,
+
+            });
+
+          }
+          var all_overlays = [];
+          var selectedShape;
+          var drawingManager = new google.maps.drawing.DrawingManager({
+            drawingMode: google.maps.drawing.OverlayType.MARKER,
+            drawingControl: true,
+            drawingControlOptions: {
+              position: google.maps.ControlPosition.TOP_CENTER,
+              drawingModes: [
+                //google.maps.drawing.OverlayType.MARKER,
+                google.maps.drawing.OverlayType.CIRCLE,
+                google.maps.drawing.OverlayType.POLYGON,
+                google.maps.drawing.OverlayType.RECTANGLE
+              ]
+            },
+            markerOptions: {
+              icon: 'images/beachflag.png'
+            },
+            circleOptions: {
+              fillColor: '#ffff00',
+              fillOpacity: 0.2,
+              strokeWeight: 3,
+              clickable: false,
+              editable: true,
+              zIndex: 1
+            },
+            polygonOptions: {
+              clickable: true,
+              draggable: true,
+              editable: true,
+              fillColor: '#ffff00',
+              fillOpacity: 1,
+
+            },
+            rectangleOptions: {
+              clickable: true,
+              draggable: true,
+              editable: true,
+              fillColor: '#ffff00',
+              fillOpacity: 0.5,
+            }
+          });
+
+          function clearSelection() {
+            if (selectedShape) {
+              selectedShape.setEditable(false);
+              selectedShape = null;
+            }
+          }
+
+          function setSelection(shape) {
+            clearSelection();
+            selectedShape = shape;
+            shape.setEditable(true);
+            // google.maps.event.addListener(selectedShape.getPath(), 'insert_at', getPolygonCoords(shape));
+            // google.maps.event.addListener(selectedShape.getPath(), 'set_at', getPolygonCoords(shape));
+          }
+
+          function deleteSelectedShape() {
+            if (selectedShape) {
+              selectedShape.setMap(null);
+            }
+          }
+
+          function deleteAllShape() {
+            for (var i = 0; i < all_overlays.length; i++) {
+              all_overlays[i].overlay.setMap(null);
+            }
+            all_overlays = [];
+          }
+
+          function CenterControl(controlDiv, map) {
+
+            // Set CSS for the control border.
+            var controlUI = document.createElement('div');
+            controlUI.style.backgroundColor = '#fff';
+            controlUI.style.border = '2px solid #fff';
+            controlUI.style.borderRadius = '3px';
+            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+            controlUI.style.cursor = 'pointer';
+            controlUI.style.marginBottom = '22px';
+            controlUI.style.textAlign = 'center';
+            controlUI.title = 'Select to delete the shape';
+            controlDiv.appendChild(controlUI);
+
+            // Set CSS for the control interior.
+            var controlText = document.createElement('div');
+            controlText.style.color = 'rgb(25,25,25)';
+            controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+            controlText.style.fontSize = '16px';
+            controlText.style.lineHeight = '38px';
+            controlText.style.paddingLeft = '5px';
+            controlText.style.paddingRight = '5px';
+            controlText.innerHTML = 'Delete Selected Area';
+            controlUI.appendChild(controlText);
+
+            // Setup the click event listeners: simply set the map to Chicago.
+            controlUI.addEventListener('click', function () {
+              deleteSelectedShape();
+            });
+
+          }
+          drawingManager.setMap(map);
+          var getPolygonCoords = function (newShape) {
+            // console.log("We are one");
+            var len = newShape.getPath().getLength();
+            for (var i = 0; i < len; i++) {
+              // console.log(newShape.getPath().getAt(i).toUrlValue(6));
+            }
+          };
+
+          google.maps.event.addListener(drawingManager, 'polygoncomplete', function (event) {
+
+            event.getPath().getLength();
+            google.maps.event.addListener(event.getPath(), 'insert_at', function () {
+              var len = event.getPath().getLength();
+              for (var i = 0; i < len; i++) {
+                // console.log(event.getPath().getAt(i).toUrlValue(5));
+              }
+            });
+            google.maps.event.addListener(event.getPath(), 'set_at', function () {
+              var len = event.getPath().getLength();
+              for (var i = 0; i < len; i++) {
+                // console.log(event.getPath().getAt(i).toUrlValue(5));
+              }
+            });
+          });
+
+          google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
+
+            all_overlays.push(event);
+            if (event.type !== google.maps.drawing.OverlayType.MARKER) {
+              drawingManager.setDrawingMode(null);
+              //Write code to select the newly selected object.
+
+              var newShape = event.overlay;
+              newShape.type = event.type;
+              google.maps.event.addListener(newShape, 'click', function () {
+                setSelection(newShape);
+              });
+
+              setSelection(newShape);
+            }
+          });
+
+
+          var centerControlDiv = document.createElement('div');
+          var centerControl = new CenterControl(centerControlDiv, map);
+
+
+          //centerControlDiv.index = 1;
+          map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
+        });
+      }
+    };
+
+
+  }
+
+
+  CurrLiveValue: any = null
+  deviceToTrack = []
+  live(b) {
+    // console.log(b);
+  
+    this.mappp = true;
+    this.MapLoad = true;
+    this.historyData = false
+    this.SpeedMeter = true;
+    this.showButton = true;
+    // console.log("sjkdfbaajkdsbnsafasfasfasfa");
+    // console.log(this.new);
+    // console.log(this.deviceSelect[0]);
+    var devId: any;
+    if (this.deviceSelect) {
+      devId = this.deviceSelect[0].deviceId;
+      // console.log(devId);
+    } else {
+      devId = this.new.did;
+      // console.log(devId);
+    }
+    // if (b == undefined) {
+
+    //   this.livetrack(null);
+    // }
+    // else {
+
+    //   this.livetrack(b.did);
+    // }
+    // console.log('devId=>',devId);
+    if (devId) {
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+        // console.log("11111111111111");
+        
+        this.livetrack(devId);
+      }
+     
+    } else {
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+        // console.log("111111111112222");
+        this.livetrack(null);
+      }
+      
+    }
+  }
+  cancells() {
+    this.mappp = true;
+    this.mapp = true;
+    this.lcShr = false;
+  }
+
+
+  speedshow: any
+  location = []
+  historyData: boolean = true;
+  //Main Declaration of LiveTrack Function *********************
+  livetrack(a) {
+    // console.log("ID==========",a);
+    this.markerArray=[];
+    var count =0 ;
+    var that = this;
+    this.SpeedMeter2 = false
+    this.PlayData = false;
+    this.pauseDate = false;
+    var outerThis = this;
+    this.mainmap = false;
+    if (a == undefined) {
+      a = null;
+    }
+    // if(a == undefined){
+    //   this.online = true;
+    //   this.offline =false;
+    //   this.hismap = false;
+    //   this.mapp = true;
+
+    //   return;
+    // }
+    for (var e = 0; e < this.deviceToTrack.length; e++) {
+      this.socket.removeAllListeners(this.deviceToTrack[e])
+    }
+    this.deviceToTrack = [];
+   
+
+    for (let i = 0; i < this.foods.length; i++) {
+      if (this.foods[i].deviceType == "Tracker") {
+
+        let aTemp = {
+          did: this.foods[i].did,
+          dname: this.foods[i].viewValue
+        }
+        this.device_imei.push(aTemp);
+
+        if (a === null || a === undefined) {
+          // console.log(this.foods[i].did)
+          this.SpeedMeter = false;
+          this.mapWidth = '95vw'
+          this.deviceToTrack.push(this.foods[i].did)
+          this.zoomLevel = 5
+        }
+        else {
+          this.SpeedMeter = true
+          this.zoomLevel = 18
+          this.mapWidth = '87vm'
+        }
+      }
+
+    }
+    if (a) {
+
+      this.deviceToTrack.push(a)
+    }
+    this.geoFenceaction(this.device_imei)
+
+
+
+    //this.CurrLiveValue = a.did;
+    this.online = true;
+    this.offline = false;
+    // console.log("Runnig Live Tracking")
+    this.hismap = false;
+    this.mapp = true;
+    this.latLongArr = []
+
+    let map;
+    let marker = {};
+    let oldChannel = null;
+    //let newChannel = a.did;
+    let delay = 100;
+    let target = {};
+    let coords = {};
+    let ongoingGoToPoint = {};
+    let ongoingMoveMarker = {};
+    let isMapInit = false;
+    let flag;
+    let flag2;
+    let locations = []
+    // =============== ~animation functions =====================
+  
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(50, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var jcbIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/idlingjcb.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var ambulanceIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/ambulance_b.png',
+      scaledSize: new google.maps.Size(50, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',  
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    // var rickShawIcon = {
+    //   url: '/assets/images/liveTrackIcons/rtractor.png',
+    //   scaledSize: new google.maps.Size(35, 50),
+    //   //size: new google.maps.Size(30, 100),
+    //   scale: .6,
+    //   strokeColor: 'white',
+    //   strokeWeight: .10,
+    //   fillOpacity: 1,
+    //   fillColor: 'blue',
+    //   //fillColor: '#b75656',
+    //   offset: '5%',
+    //   // rotation: parseInt(heading[i]),
+    //   anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+    //   rotation: 0
+    // };
+
+    // var tempoIcon = {
+    //   url: '/assets/images/liveTrackIcons/rtractor.png',
+    //   scaledSize: new google.maps.Size(35, 50),
+    //   //size: new google.maps.Size(30, 100),
+    //   scale: .6,
+    //   strokeColor: 'white',
+    //   strokeWeight: .10,
+    //   fillOpacity: 1,
+    //   fillColor: 'blue',
+    //   //fillColor: '#b75656',
+    //   offset: '5%',
+    //   // rotation: parseInt(heading[i]),
+    //   anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+    //   rotation: 0
+    // };
+
+
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon,
+      "jcb" : jcbIcon,
+      "ambulance" : ambulanceIcon
+    
+    }
+    // console.log('deviceListdeviceListdeviceListdeviceList',this.deviceToTrack);
+
+
+    this.flightPathArr = [];
+    this.tttttt = [];
+    var tempTimeInterval:any;
+
+
+    // console.log("Runnig ON Change");
+    // reset variables and remove existing data of previous channel, also stop animation functions
+    // console.log(newChannel);
+    coords = {}
+    for (var key in ongoingGoToPoint) {
+      if (ongoingGoToPoint.hasOwnProperty(key)) {
+        clearTimeout(ongoingGoToPoint[key]);
+      }
+    }
+
+
+    for (var key in ongoingMoveMarker) {
+      if (ongoingMoveMarker.hasOwnProperty(key)) {
+        clearTimeout(ongoingMoveMarker[key]);
+      }
+    }
+
+   
+    for (var x = 0; x < this.deviceToTrack.length; x++) {
+      var newChannel = this.deviceToTrack[x].toString();
+      var date = new Date().setHours(0, 0, 0, 0)
+      this.socket.on(newChannel, channelListener(newChannel));
+      this.socket.emit('initLive', newChannel, date);
+
+      //console.log("newChannel",newChannel,"date",date);
+      
+    }
+   
+    var r
+
+    function channelListener(newChannel) {
+      return function (msg, initData, deviceInfo) {
+     
+        outerThis.tempDevInfo = {};
+        outerThis.flightPathArr.push({ lat: msg.latDecimal, lng: msg.longDecimal });      
+        if(outerThis.enabletrail == true){
+          outerThis.draw_flight_trail(outerThis.flightPathArr);
+        }
+
+          console.log('devobject coming from socket',deviceInfo,msg,initData);
+          // console.log('device object coming from service',outerThis.deviceList)
+        // if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+        //   if (deviceInfo.status != 'RUNNING') {   
+        //     outerThis.addressConversion(msg);
+        //   } 
+        
+        // }else{
+          // console.log('no address api call');
+        // }
+        // console.log('outerThis.deviceList',outerThis.deviceList);
+        outerThis.deviceList.filter(function (dd, index) {
+      
+            if(dd.Device_ID === deviceInfo.Device_ID){
+              deviceInfo['checked']  = dd.checked;
+            }
+        })
+        // console.log('1345678909876543267898765432345676543=>',deviceInfo.checked);
+      
+        if (outerThis.deviceToTrack.length == 1) {
+          outerThis.deviceList.filter(function (colHilight, i) {
+            outerThis.deviceList[i]['playPause'] = true;
+            if (colHilight.Device_ID === outerThis.deviceToTrack[0]) {
+              outerThis.deviceList[i]['columnHighlight'] = true;
+              if (msg['GPS positioned']) {
+                outerThis.deviceList[i].gpsTracking = msg['GPS positioned'];
+              }
+              if (msg.ignition) {
+                outerThis.deviceList[i].last_ACC = msg.ignition;
+              }
+              if (msg.power) {
+                outerThis.deviceList[i].power = msg.power;
+              }
+              if (msg.speed) {
+                outerThis.deviceList[i].last_speed = msg.speed;
+              }
+              
+              
+
+              if (outerThis.currentPage === 1) {
+                outerThis.showSocketData = true;
+                // console.log({"colHilight=>":colHilight});
+            
+                // console.log({"msg=>":msg});
+                outerThis.showSocketData = true;
+                // date satellites ignition port
+                if(msg.date== undefined){
+                  msg['date'] = colHilight.last_ping_on
+
+                }
+
+                if(msg.satellites == undefined){ 
+                  msg['satellites'] = colHilight.satellites
+
+                }
+                if(msg.ignition == undefined){ 
+                  msg['ignition'] = colHilight.last_ACC ;
+
+                }
+                if(msg.port == undefined){ 
+                  msg['port'] = colHilight.port ; 
+                }
+               
+                outerThis.socketData = msg;
+                outerThis.getSystemLogs(colHilight);
+                outerThis.deviceCQ(colHilight);
+                outerThis.getRecentNotification(colHilight);
+              }
+            } else {
+              outerThis.deviceList[i]['columnHighlight'] = false;
+            }
+          })
+
+     
+        }
+        this.lat = deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[1] : null;
+        this.lng = deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[0] : null;
+      
+        r = 0
+        if (coords[newChannel] === null || coords[newChannel] === undefined) coords[newChannel] = [];
+        outerThis.mainmap = true;
+        if (initData == 'ping' || (initData == 'initPing' && coords[newChannel].length == 0)) {
+          // console.log('deviceInfo=>',deviceInfo);
+          // addressConversion======================================================
+          if(outerThis.navId != 'locationComponent'){
+            outerThis.liveAdd ='';
+            outerThis.tempDevInfo = deviceInfo ; 
+    
+            let d_lat = msg.latDecimal?msg.latDecimal : deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[1] : null;
+            let d_lng = msg.longDecimal?msg.longDecimal : deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[0] : null;
+       
+            var latlng_1 =
+            {
+              "lat": d_lat,
+              "long":  d_lng
+            }
+            outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{   
+              if(res.message == "Address not found in databse"){
+                let geocoder = new google.maps.Geocoder();
+                let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+
+                let request = {
+                  latLng: t_latlng
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      outerThis.liveAdd = data[0].formatted_address;
+                      // console.log(outerThis.liveAdd);
+                      outerThis.saveAddress(d_lat, d_lng,outerThis.liveAdd)
+                    } else {
+                      // console.log("No address available")
+                      outerThis.liveAdd = "No address available";
+                    }
+                  }
+                  else {
+  
+                    outerThis.liveAdd = 'NA';
+  
+  
+                  }
+  
+                })
+              }else{
+               
+                outerThis.liveAdd = res.address;
+              }
+              // console.log("ADDRESS---->",outerThis.liveAdd);
+              
+            })
+          }
+          
+          // addressConversion=========================================================
+
+          this.latLongArr = [];
+          coords[newChannel].splice(0, coords[newChannel].length - 1);
+          const speed = parseFloat(msg.speed);
+          if (initData == 'ping') {
+            outerThis.speeed = msg.speed;
+          }
+          outerThis.MapLoad = false
+          outerThis.test_Data = msg.currentFuel;
+         
+          var x = msg.speed;
+
+          const heading = parseFloat(msg.heading);
+          const message = 'IMEI: ' + msg.imei + ' Speed: ' + msg.speed + 'Km/hr';
+          if (msg.interpolated == null || msg.interpolated === undefined) {
+           
+            this.lat = msg.latDecimal;
+            this.lng = msg.longDecimal;
+            // console.log("lat long= >",this.lat,this.lng);
+            coords[newChannel].push([this.lat, this.lng]);
+            let a = {
+              lat: msg.latDecimal,
+              lng: msg.longDecimal,
+              did: msg.imei
+            }
+
+            if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+              var geocoder = new google.maps.Geocoder();
+              var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+  
+            }
+        
+            var request = {
+              latLng: latlng
+            };
+         
+              var latlng_1 =
+              {
+                "lat": msg.latDecimal,
+                "long":  msg.longDecimal
+              }
+
+        
+            
+
+            //address function end here
+          } else {
+        
+            for (let k = 0; k < msg.interpolated.length; k++) {
+              if (msg.interpolated[k].location.latitude == null || msg.interpolated[k].location.longitude == null) {
+                // console.log("Lattitude Longitude if location.lattitude is null=>",msg.interpolated[k].location.latitude,msg.interpolated[k].location.longitude);
+                this.lat = msg.latDecimal;
+                this.lng = msg.longDecimal;
+                this.titleMarker = message;
+                this.titleMarker2 = message;
+                this.latLongArr.push([this.lat, this.lng]);
+                coords[newChannel].push([this.lat, this.lng]);
+                let a = {
+                  lat: msg.latDecimal,
+                  lng: msg.longDecimal,
+                  did: msg.imei
+                }
+              } else {
+                // console.log("Lattitude Longitude if location.lattitude is not null=>",msg.interpolated[k].location.latitude,msg.interpolated[k].location.longitude)
+                this.lat = msg.interpolated[k].location.latitude;
+                this.lng = msg.interpolated[k].location.longitude;
+                this.titleMarker = message;
+                this.titleMarker2 = message;
+                this.latLongArr.push([this.lat, this.lng]);
+                coords[newChannel].push([this.lat, this.lng]);
+
+              }
+
+
+              // converting Address 
+
+             
+              var geocoder = new google.maps.Geocoder();
+              var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+
+              var request = {
+                latLng: latlng
+              };
+
+
+
+            
+
+              var latlng_1 =
+              {
+                "lat": msg.latDecimal,
+                "long":  msg.longDecimal
+              }
+
+              // if((a != null) && (a != undefined) &&(outerThis.navId != 'locationComponent')){
+              //   outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{
+             
+              //     if(res.message == "Address not found in databse"){
+              //       geocoder.geocode(request, function (data, status) {
+              //         if (status == google.maps.GeocoderStatus.OK) {
+              //           if (data[0] != null) {
+              //             outerThis.liveAdd = data[0].formatted_address;
+                          console.log(outerThis.liveAdd);
+              //             outerThis.saveAddress(msg.latDecimal, msg.longDecimal,outerThis.liveAdd)
+              //           } else {
+                          console.log("No address available")
+              //             outerThis.liveAdd = "No address available";
+              //           }
+              //         }
+              //         else {
+      
+              //           outerThis.liveAdd = 'NA';
+      
+      
+              //         }
+      
+              //       })
+              //     }else{
+                   
+              //       outerThis.liveAdd = res.address;
+              //     }
+              //   })
+              // }
+           
+          
+
+              //address function end here
+            }
+
+          }
+
+       
+          var boxCheck = deviceInfo.checked;
+          // that.socketData=deviceInfo;
+          // console.log('checkbox value coming from =>',deviceInfo,boxCheck);
+          if (!isMapInit) {
+         
+              initialize(this.lat, this.lng, newChannel);
+            
+          
+          }
+          // console.log(boxCheck);
+        
+            if(boxCheck === true){
+              initializeMarker(that.elementRef, this.lat, this.lng, newChannel, deviceInfo.Device_Name, deviceInfo.status, deviceInfo.status_updated_at, deviceInfo.last_ping_on, msg, initData, deviceInfo.iconType, deviceInfo);
+            }
+         
+          
+          if ((initData == 'ping') || (status == 'RUNNING')) {
+            if(boxCheck === true){
+              animateMarker(that.elementRef, marker, speed, heading, true, newChannel, deviceInfo.Device_Name, deviceInfo.status, deviceInfo.status_updated_at, deviceInfo.last_ping_on, msg, initData, deviceInfo.iconType, deviceInfo);
+            }
+           
+          }
+          flag = false;
+        }
+      }
+    }
+
+    window.localStorage.shareloc = function (device) {
+      this.shareLocation(device);
+    }
+
+    function animateMarker(elementRef, marker, km_h, heading, cancel, device, deviceName, status, since, lastUpdate, msg, initData, iconType, _devInfo) {
+      // console.log('STATUS==>',status);
+
+      // console.log('lastPingOn=>',_devInfo.last_ping_on)
+
+   
+      // console.log('statusstatusstatusstatusstatus=>', status);
+      var deviceSpeed = (status == 'STOPPED') ? 0 : msg.speed;
+
+
+      var lastPing = new Date(_devInfo.last_ping_on).getTime();
+      var currTime = new Date().getTime();
+      var timediff = currTime - lastPing;
+      var oneHourVal = 1 * 60 * 60 * 1000;
+      // console.log("Vehicle Speed",msg.speed);
+      outerThis.last_speed = msg.speed;
+
+
+      // ============================================================================
+
+      // console.log("totalhours=>",thours,_devInfo);
+      // if(timediff>oneHourVal){
+      //   var arrival_time= new Date(_devInfo.last_ping_on)
+      // }else{
+      var arrival_time = new Date(since);
+      // }
+      //  var arrival_time = new Date(since);
+
+      var curr_time = new Date();
+      var fd = new Date(arrival_time).getTime();
+      var td = curr_time.getTime();
+      var timedev_status_difference = td - fd;
+      var total_min = timedev_status_difference / 60000;
+      var hours = total_min / 60
+      var rhours = Math.floor(hours);
+      var minutes = (hours - rhours) * 60;
+      var rminutes = Math.round(minutes);
+      var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+      // console.log("animate %s, target[device] is %s, coords[device].length is %s", device, target[device], coords[device].length)
+      // console.log("time coming from socket", since);
+      if (since == undefined) {
+        var deviceData = "";
+
+      } else if (timediff > oneHourVal) {
+        var status_toShow = "OUT OF REACH " + 'Since ' + Durations
+      } else {
+
+        if (status == undefined) {
+
+          var status_toShow = "NA";
+
+        } else {
+          var status_toShow = status + " " + "Since" + " " + Durations;
+        }
+
+        var deviceData = status_toShow;
+
+
+      }
+
+
+
+      var gsm_signal = '';
+      if (msg != undefined) {
+        gsm_signal = msg.gsmSignal;
+
+      } else {
+        gsm_signal = _devInfo.gsmSignal;
+      }
+
+      // console.log("gps_signal", msg, _devInfo);
+      // console.log("Speed is %s", km_h);
+      clearTimeout(ongoingGoToPoint[device]);
+      clearTimeout(ongoingMoveMarker[device]);
+      var contentString = ''
+      if (initData == 'initPing') {
+        // console.log("Change features");
+        var lastLat = _devInfo.last_location.lat;
+        var lastlong = _devInfo.last_location.long;
+        // console.log("INDDDDDDDDDDDDDDDDDDDDDDDDDDDDEH");
+        
+        contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+          '<button style= "position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lastLat + ',' + lastlong + '\');})"> add poi </button>' + 
+          '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+          '</div>'+
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last updated" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (lastUpdate ? (moment(lastUpdate).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdate).fromNow() + ')') : "No Data Available") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "GPS Positioned" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (_devInfo.gpsTracking == '1' ? 'Yes' : (_devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "GPS Signal" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((gsm_signal != undefined) ? gsm_signal : "NA") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Name" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Number" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last Speed" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (_devInfo.last_speed) + " kmph" +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Status" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+          '</div>' +
+          '</div>' 
+          
+
+      }
+      else if (initData == 'ping') {
+
+        // console.log('1', outerThis.liveAdd);
+        var lastLat = _devInfo.last_location.lat;
+        var lastlong = _devInfo.last_location.long;
+        contentString = ""
+        contentString = '<div class="infoB">' +
+        '<div class="DeviceHead">'+
+         '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' +  lastLat + ',' + lastlong + '\');})">add poi</button>' +
+        '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+        '</div>'+
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last updated" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          moment(lastUpdate).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdate).fromNow() + ')' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "GPS Positioned" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((_devInfo.gpsTracking == '1' ? 'Yes' : _devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "GPS Signal" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((gsm_signal != undefined) ? gsm_signal : "NA") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Name" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + ( outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Number" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Speed" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          deviceSpeed + " " + "kmph"
+        '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Status" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+          '</div>' +
+          '</div>' 
+          // '</div>' +
+          // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + _devInfo + '\');})">add poi</button>'
+
+        // '<div class="infoB"><div>Device : '
+        //   + deviceName + ' (' + device + ')</div></br><div> Last Updated : '
+        //   + moment(lastUpdate).fromNow() + '</div><br><div>GPS positioned : '
+        //   + (msg['GPS positioned'] == '1' ? 'Yes' : (msg['GPS positioned'] == '0' ? 'No' : '<small>Feature not supported by device</small>'))     
+        //   + '</div><br><div>Address :' + outerThis.liveAdd + '</div><br></br>' 
+        //   +'<div>Speed : '       
+        //   + msg.speed + ' kmph</div></div>'       
+        //   + '</div><br>'
+
+      }
+     
+      marker[device]['infowindow'].setContent(contentString);
+      // console.log("Inside Infowindow");
+       
+      function goToPoint() {
+        // console.log("Inside function!!!")
+       
+        let lat = marker[device].position.lat();
+        let lng = marker[device].position.lng();
+        // tslint:disable-next-line:prefer-const
+        let step = (km_h * 1000 * delay) / 3600000; // in meters
+        // tslint:disable-next-line:prefer-const
+        // console.log('coords[device]coords[device]coords[device]=>',coords[device]);
+        var LTlat_dest: any;
+        var LTlng_dest: any;
+
+        if (coords[device].length == 0) {
+          LTlat_dest = _devInfo.last_location.lat;
+          LTlng_dest = _devInfo.last_location.long;
+        } else {
+          LTlat_dest = coords[device][target[device]][0];
+          LTlng_dest = coords[device][target[device]][1];
+
+
+        }
+
+
+        let dest = new google.maps.LatLng(LTlat_dest, LTlng_dest);
+
+        // tslint:disable-next-line:prefer-const
+        let distance =
+          google.maps.geometry.spherical.computeDistanceBetween(
+            dest, marker[device].position); // in meters
+        // var heading = google.maps.geometry.spherical.computeHeading(dest, marker[device].position);
+        // tslint:disable-next-line:prefer-const
+        let numStep = distance / step;
+        let i = 0;
+        // tslint:disable-next-line:prefer-const
+        let deltaLat = (LTlat_dest - lat) / numStep;
+        // tslint:disable-next-line:prefer-const
+        let deltaLng = (LTlng_dest - lng) / numStep;
+
+        function moveMarker() {
+          // console.log("deltaLat",deltaLat,"deltaLng",deltaLng);
+          
+          lat += deltaLat;
+          lng += deltaLng;
+          
+          i += step;
+          let markerDOM: any;
+          var liveSpeed = parseInt(msg.speed);
+          if (i < distance) {
+          
+            if (status == "OUT OF REACH") {
+              // icons[iconType].url = '/assets/images/liveTrackIcons/outofreach_car.png';
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "STOPPED") {       
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                 markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+           
+            } else if (status == "RUNNING") {
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }  else if (status == "NO DATA") {
+              icons[iconType].url = "/assets/image/no_data.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "IDLING") {
+            
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+            
+            }
+
+      
+
+            // console.log(msg.ignition, )
+            // _devInfo
+            var head = google.maps.geometry.spherical.computeHeading(marker[device].getPosition(), new google.maps.LatLng(lat, lng));
+            // console.log("HEAD__===",head,"Marker==>",marker[device].getPosition(),"LAT LONG=>",new google.maps.LatLng(lat, lng),"==>",lat,lng);
+         
+            if ((head != 0) || (head == NaN)) {
+              // icons[iconType].rotation = head;
+              if (markerDOM) {
+                markerDOM.style.transform = 'rotate(' + head + 'deg)';
+              }
+            }
+            // console.log("s")
+
+            // console.log("totalhours=>",thours,_devInfo);
+
+
+            // ==============================commented on 4-1-2019 =================================
+            // console.log('STATUS1==>',status);
+            // if (timediff>oneHourVal) {
+            //   icons[iconType].fillColor = "blue";
+            // }else  if ((_devInfo.last_ACC == 0) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "red";
+            // } else if ((_devInfo.last_ACC == 1) && (msg.speed > 0)) {
+            //   icons[iconType].fillColor = "green";
+            // } else if ((_devInfo.last_ACC == 1) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "yellow";
+            // }
+
+            // ==============================commented on 4-1-2019 =================================
+
+
+            marker[device].setIcon(icons[iconType]);
+            marker[device].setPosition(new google.maps.LatLng(lat, lng));
+            if (outerThis.deviceToTrack.length == 1) map.setCenter({ lat: lat, lng: lng });
+            ongoingMoveMarker[device] = setTimeout(moveMarker, delay);
+          } else {
+
+            status == "OUT OF REACH";
+            if (status == "OUT OF REACH") {
+              // icons[iconType].url = '/assets/images/liveTrackIcons/outofreach_car.png';
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "STOPPED") {  
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{        
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+           
+            } else if (status == "RUNNING") {
+              // icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }  else if (status == "NO DATA") {
+              icons[iconType].url = "/assets/image/no_data.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }else if (status == "IDLING") {
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{       
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+            
+            }
+            // ========================= commented on 1-4-2019 ================================
+            // console.log('STATUS2==>',status);
+            // if (timediff>oneHourVal) {
+            //   icons[iconType].fillColor = "blue";
+            // } else if ((_devInfo == 0) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "red";
+            // } else if ((_devInfo == 1) && (msg.speed > 0)) {
+            //   icons[iconType].fillColor = "green";
+            // } else if ((_devInfo == 1) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "yellow";
+            // } 
+
+            // ========================= commented on 1-4-2019 ================================
+    
+            var head = google.maps.geometry.spherical.computeHeading(marker[device].getPosition(), dest)
+            // console.log("head : " + marker[device].getPosition() + ',' + dest)
+            if ((head != 0) || (head == NaN)) {
+              // icons[iconType].rotation = head
+              if (markerDOM) {
+                markerDOM.style.transform = 'rotate(' + head + 'deg)';
+              }
+            }
+
+            marker[device].setIcon(icons[iconType]);
+            marker[device].setPosition(dest);
+
+
+
+            if (outerThis.deviceToTrack.length == 1) map.setCenter({ lat: LTlat_dest, lng: LTlng_dest });
+
+            target[device] = target[device] + 1;
+            if (target[device] === coords[device].length) {
+              target[device] = 0;
+            } else {
+              ongoingGoToPoint[device] = setTimeout(goToPoint, delay);
+            }
+          }
+        }
+        moveMarker();
+      }
+      // console.log('The target[device] is %s', target[device]);
+      // console.log('coords[device].length is %s', coords[device].length);
+      // do nothing, new points have been added to coords[device]
+      // console.log('coords[device]',coords[device].length);
+      // console.log('coords[device]',coords[device]);
+      // console.log('devinfo',_devInfo);
+      // console.log('coords[device][0][0]coords[device][0][0]coords[device][0][0]',coords[device][0][1]);
+      var LTlat: any;
+      var LTlng: any;
+      // console.log('_devInfo_devInfo_devInfo', _devInfo);
+      if (coords[device].length == 0) {
+        LTlat = _devInfo.sec_last_location.lat;
+        LTlng = _devInfo.sec_last_location.long;
+      } else {
+        LTlat = coords[device][0][0];
+        LTlng = coords[device][0][1];
+      }
+
+      // console.log('LTlat,LTlng_devInfo',LTlat, LTlng);
+      marker[device].setPosition(new google.maps.LatLng(LTlat, LTlng));
+      target[device] = 0;
+      goToPoint();
+    }
+    function button() {
+
+    }
+
+    function initialize(lat, long, device) {
+      //   initialize: (lat, long, device)=> {
+        if(outerThis.showAddress){
+        // console.log("!isMapInit=______________________________________________________________________________________-----------",isMapInit);
+
+        var latlng_1 =
+             {
+               "lat": lat,
+               "long":  long
+             }
+             outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+              if(res.message == "Address not found in databse"){
+                 let geocoder = new google.maps.Geocoder();
+                 let t_latlng = new google.maps.LatLng(lat, long);
+ 
+                 let request = {
+                   latLng: t_latlng
+                 };
+                 geocoder.geocode(request, function (data, status) {
+                   if (status == google.maps.GeocoderStatus.OK) {
+                     if (data[0] != null) {
+                       outerThis.liveAdd = data[0].formatted_address;
+                     }else{
+                       outerThis.liveAdd ="N/A"
+                     }
+                   }
+                 })
+               }else{
+                outerThis.liveAdd= res.address;
+               }
+               outerThis.showAddress=false
+             }) 
+      }
+
+      // console.log("Lattitude Longitude", lat ,long,device,outerThis.liveAdd);
+
+      if (!isMapInit) {
+
+        var styledMapType = new google.maps.StyledMapType(
+          [
+            { elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
+            { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
+            { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
+            {
+              featureType: 'administrative.locality',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'poi',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'geometry',
+              stylers: [{ color: '#263c3f' }]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#6b9a76' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry',
+              stylers: [{ color: '#38414e' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry.stroke',
+              stylers: [{ color: '#212a37' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#9ca5b3' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry',
+              stylers: [{ color: '#746855' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry.stroke',
+              stylers: [{ color: '#1f2835' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#f3d19c' }]
+            },
+            {
+              featureType: 'transit',
+              elementType: 'geometry',
+              stylers: [{ color: '#2f3948' }]
+            },
+            {
+              featureType: 'transit.station',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'geometry',
+              stylers: [{ color: '#17263c' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#515c6d' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'labels.text.stroke',
+              stylers: [{ color: '#17263c' }]
+            }
+          ],
+          { name: 'Styled Map' });
+
+        const myOptions = {
+          zoom: outerThis.zoomLevel,
+          center: new google.maps.LatLng(lat, long),
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+          // styles: [],
+          panControl: true,
+          // zoomControl: true,
+          scaleControl: true,
+          // mapTypeControl:true,
+          streetViewControl: true,
+
+          overviewMapControl: true,
+          rotateControl: true,
+          mapTypeControl: true,
+          // mapTypeControlOptions: {
+          //   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,      
+          //   mapTypeIds: ['styled_map']
+          // },
+
+          zoomControl: true,
+          zoomControlOptions: {
+            style: google.maps.ZoomControlStyle.SMALL,
+          }
+        };
+
+
+
+        map = new google.maps.Map(document.getElementById('map'), myOptions);
+        map.mapTypes.set('darkmode', styledMapType);
+        outerThis.mapNew = map;
+        var trafficLayer = new google.maps.TrafficLayer();
+        trafficLayer.setMap(map);
+        //  outerThis.geoService(map);
+        outerThis.trafficLayer = trafficLayer;
+
+
+        // flight path ==========================
+
+
+
+
+        // =================================================
+
+
+
+        // map.mapTypes.set('styled_map', styledMapType);
+        // map.setMapTypeId('styled_map');
+        // map.setMapTypeId('terrain');
+        //  console.log(map.getCameraPosition().zoom);
+        // console.log("zoom" + map.getZoom());
+
+        // map.setZoom(18);
+
+
+
+        google.maps.event.addListener(map, 'mousemove', function (event) {
+
+          // console.log("event" + event);
+          displayCoordinates(event.latLng);
+        });
+        var zoomBar: any;
+        zoomBar = document.getElementById('myRange');
+        map.setZoom(map.getZoom());
+
+        //zoomBar.max=map.minZoom || 0; zoomBar.min=map.maxZoom||22;
+        zoomBar.value = map.getZoom();
+        // Update the current slider value (each time you drag the slider handle)
+        zoomBar.oninput = function () {
+          // console.log("inside zoombar Value");
+          map.setZoom(parseInt(this.value));
+        }
+
+      
+       
+   
+        google.maps.event.addListener(map, 'zoom_changed', function (event) {
+
+          // console.log("event" + event);
+          // console.log(map.getZoom());
+          if (zoomBar.value)
+            zoomBar.value = map.getZoom();
+        });
+
+
+        /*          var controlMarkerUI = document.createElement('div');
+                 controlMarkerUI.style.cursor = 'pointer';
+                 controlMarkerUI.style.backgroundImage = "url(../../assets/image/history.png)";
+                 controlMarkerUI.style.height = '28px';
+                 controlMarkerUI.style.width = '38px';
+                 controlMarkerUI.title = 'History';
+                 
+                 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlMarkerUI);
+                 
+                 controlMarkerUI.addEventListener('click', ()=>{
+           
+                 }); */
+
+
+        /*            var controlTrashUI = document.createElement('div');
+                 controlTrashUI.style.cursor = 'pointer';
+                  controlTrashUI.style.backgroundImage = "url(../../assets/image/share.png)";
+                  controlTrashUI.style.height = '28px';
+                  controlTrashUI.style.width = '38px';
+    
+                  controlTrashUI.title = 'Share';
+                  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlTrashUI);
+                  controlTrashUI.addEventListener('click', function(e){
+                    // console.log("Share Calling...")
+                  }); */
+      }
+
+
+      isMapInit = true;
+      flag2 = true;
+      outerThis.getDevicebyId();
+
+    }
+
+
+
+    function displayCoordinates(pnt) {
+      var latitudeInDMS, longitudeInDMS;
+      //lat in DMS string format
+      latitudeInDMS = ConvertDDToDMS(pnt.lat(), false);
+      outerThis.latitudeInDMS = latitudeInDMS.dir + " " + latitudeInDMS.deg + "° " + latitudeInDMS.min + "' " + latitudeInDMS.sec + "''";
+      //lon in DMS string format
+      longitudeInDMS = ConvertDDToDMS(pnt.lng(), true);
+      outerThis.longitudeInDMS = longitudeInDMS.dir + " " + longitudeInDMS.deg + "° " + longitudeInDMS.min + "' " + longitudeInDMS.sec + "''";
+
+      // console.log(outerThis.latitudeInDMS + "-" + outerThis.longitudeInDMS);
+    }
+
+    function ConvertDDToDMS(D, lng) {
+      return {
+        dir: D < 0 ? lng ? 'W' : 'S' : lng ? 'E' : 'N',
+        deg: 0 | (D < 0 ? D = -D : D),
+        min: 0 | D % 1 * 60,
+        sec: (0 | D * 60 % 1 * 6000) / 100
+      };
+    }
+
+    function toggleGeofence(choice) {
+      // console.log(choice);
+      if (choice) {
+        outerThis.geoService(map);
+
+      }
+      else {
+        outerThis.removeGeofence();
+        outerThis.enableGeofenceComponent = !outerThis.enableGeofenceComponent;
+      }
+    }
+
+    this.toggleGeofence = toggleGeofence;
+    var routePath;
+    var flightPath;
+    var allSourceDestinationMarkers = [];
+    var poiMarkers = [];
+    var allRoutePathPoints = [];
+    function routeDetails(uId, choice) {
+
+      // console.log(uId);
+
+      if (choice) {
+        outerThis.contactService.getRouteDetail_path(uId)
+          .subscribe(res => {
+            // console.log("abcd2", res)
+            routePath = res;
+            showRoutes();
+            outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+          });
+      }
+      else {
+        //removing Route source destination markers 
+        for (var i = 0; i < allSourceDestinationMarkers.length; i++) {
+          allSourceDestinationMarkers[i].setMap(null);
+        }
+        allSourceDestinationMarkers = [];
+        //removing Route points 
+        for (var i = 0; i < allRoutePathPoints.length; i++) {
+          allRoutePathPoints[i].setMap(null);
+        }
+        allRoutePathPoints = [];
+        outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+      }
+    }
+
+    var mapData, poiData;
+    var marker1;
+    this.routeDetails = routeDetails;
+    function showRoutes() {
+      // console.log(routePath[1].path);
+      //["skyblue","green","purple","orange","darkblue","yellow","red"]             
+      let colors = ['1E90FF', '28B463', '6C3483', 'D35400', '2C3E50', 'F1C40F', 'E74C3C'];
+      for (var j = 0; j < routePath.length; j++) {
+        //outerThis.dataArrayCoords = []; 
+        mapData = [];
+        for (var i = 0; i < routePath[j].path.length; i++) {
+          var arr = [];
+          arr.push(routePath[j].path[i].location.coordinates[1]);
+          arr.push(routePath[j].path[i].location.coordinates[0]);
+          //outerThis.dataArrayCoords.push(arr);
+
+          mapData.push({
+            "lat": routePath[j].path[i].location.coordinates[1],
+            "lng": routePath[j].path[i].location.coordinates[0]
+          });
+        }
+
+        // console.log(outerThis.dataArrayCoords);
+
+        // console.log(mapData[0]);
+        // console.log(mapData[mapData.length - 1]);
+
+        var colorForPath = colors[(j) % (colors.length)];
+        var strokeColor = "#" + colorForPath;
+        // console.log("j:" + j + "Color:" + strokeColor + " deno:" + (colors.length - 1) + "nume:" + (j + 1));
+
+        var sourceIcon = "http://www.googlemapsmarkers.com/v1/S/" + "009933" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage = new google.maps.MarkerImage(sourceIcon);
+        marker = new google.maps.Marker({
+          position: mapData[0],
+          map: map,
+          icon: pinImage,
+          title: "Source"
+        });
+        allSourceDestinationMarkers.push(marker);
+        // console.log(allSourceDestinationMarkers);
+        
+
+        var destinationIcon = "http://www.googlemapsmarkers.com/v1/D/" + "FF3300" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage1 = new google.maps.MarkerImage(destinationIcon);
+        marker1 = new google.maps.Marker({
+          position: mapData[mapData.length - 1],
+          map: map,
+          icon: pinImage1,
+          title: "Destination"
+        });
+        allSourceDestinationMarkers.push(marker1);
+
+        flightPath = new google.maps.Polyline({
+          path: mapData,
+          geodesic: true,
+          strokeColor: strokeColor,
+          strokeOpacity: 1.0,
+          strokeWeight: 6
+        });
+        allRoutePathPoints.push(flightPath);
+        // console.log(mapData);
+        flightPath.setMap(map);
+        // console.log(flightPath);
+
+      }
+    }
+
+
+    function togglePOI(choice) {
+      // console.log(choice);
+      if (choice) {
+        getPOIs(this.useridd);
+      }
+      else {
+        removePOIs();
+        outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+      }
+    }
+
+    this.togglePOI = togglePOI;
+
+
+    var pois = [];
+    function getPOIs(uId) {
+      outerThis.contactService.getPOI(uId)
+        .subscribe(res => {
+          // console.log("pois", res)
+          pois = res;
+          plotAllPOIs();
+          outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+        });
+    }
+
+    function removePOIs() {
+      for (var i = 0; i < poiMarkers.length; i++) {
+        poiMarkers[i].setMap(null);
+      }
+      poiMarkers = [];
+    }
+
+    function plotAllPOIs() {
+
+      // console.log("PLOTING POIIIISISISISI")
+
+      for (var i = 0; i < pois.length; i++) {
+        //var arr = [];
+        poiData = [];
+        //arr.push(pois[i].poi.location.coordinates[1]);
+        //arr.push(pois[i].poi.location.coordinates[0]);
+
+        poiData.push({
+          "lat": pois[i].poi.location.coordinates[1],
+          "lng": pois[i].poi.location.coordinates[0]
+        });
+
+        var poiIcon="/assets/images/liveTrackIcons/building.jpg"
+        // var poiIcon="https://img.icons8.com/ios-filled/50/000000/building-with-rooftop-terrace.png"
+        // building.jpeg
+        // var poiIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
+        //"http://www.googlemapsmarkers.com/v1/P/" + "000000" + "/FFFFFF/000000/ ";//'/assets/images/poi.png';//colorForPath
+        var poiImage = new google.maps.MarkerImage(poiIcon);
+        marker = new google.maps.Marker({
+          position: poiData[0],
+          map: map,
+          icon: poiImage,
+          title: pois[i].poi.poiname
+        });
+        poiMarkers.push(marker);
+
+        var infobox_numberPlate = new InfoBox({
+            content: "<div class='infobox' style='padding:2px;background:#575656;margin-left: -25px;'><small><b style='color: #ffffff;font-weight:300;font-size:12px;'>" + pois[i].poi.poiname + "</b></small></div>",
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+
+          infobox_numberPlate.open(map, marker);
+
+
+
+      //   var infoWindow = new google.maps.InfoWindow;
+
+    
+
+      // var contentString = '<b>'+pois[i].poi.poiname+'</b>' 
+      // infoWindow.setContent(contentString);
+      // infoWindow.setPosition(poiData[0]);
+
+      // infoWindow.open(map);
+
+
+      }
+
+    }
+
+    function dayClick() {
+      // console.log("fdf");
+      this.showhistory();
+
+    }
+
+    function initializeMarker(elementRef, lat, long, device, deviceName, status, since, lastUpdatedTime, msg, initData, iconType, _devInfo) {
+      // console.log("Initialize marker called");
+      // console.log("Vehicle Speed",msg.speed);
+     
+      
+      outerThis.latToPass = lat;
+      outerThis.longToPass = long;
+
+
+
+
+      // ======================================Converting Address==============================================================
+      var liveAddress = "";
+      // if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+      //   var geocoder = new google.maps.Geocoder();
+      //   var latlng = new google.maps.LatLng(lat, long);
+  
+      //   var request = {
+      //     latLng: latlng
+      //   };
+        console.log("staticLatLongVal", lat, long)
+  
+  
+      //   geocoder.geocode(request, function (data, status) {
+  
+      //     if (status == google.maps.GeocoderStatus.OK) {
+      //       if (data[0] != null) {
+      //         liveAddress = data[0].formatted_address;
+      //         var add = liveAddress;
+         
+              console.log('entering Address field');
+      //       } else {
+              console.log('entering Address field');
+      //         liveAddress = "No address available";
+      //       }
+      //     }
+      //     else {
+            console.log('entering Address field');
+      //       liveAddress = 'static address';
+  
+            console.log(liveAddress);
+      //     }
+  
+      //   })
+
+      // }
+     
+    
+
+      // ======================================Converting Address==============================================================
+
+
+      // console.log("time coming from socket", since);
+
+
+
+      var lastPing = new Date(_devInfo.last_ping_on).getTime();
+      var currTime = new Date().getTime();
+      var timediff = currTime - lastPing;
+      // var totMin = timediff / 60000;
+      // var tothours = totMin / 60;
+      var oneHourVal = 1 * 60 * 60 * 1000;
+
+      // var t_hours = Math.floor(tothours);
+      // var Tminutes = (tothours - t_hours) * 60;
+      // var Tminutes = Math.round(minutes);
+      // var thours = t_hours;
+
+
+      // ================================================================================
+
+      // if((timediff>oneHourVal)){
+      //   var arrival_time= new Date(_devInfo.last_ping_on)
+      // }else{
+      var arrival_time = new Date(since);
+      // }
+      // var arrival_time = new Date(since);
+
+      var curr_time = new Date();
+      var fd = new Date(arrival_time).getTime();
+      var td = curr_time.getTime();
+      var timedev_status_difference = td - fd;
+      var total_min = timedev_status_difference / 60000;
+      var hours = total_min / 60
+      var rhours = Math.floor(hours);
+      var minutes = (hours - rhours) * 60;
+      var rminutes = Math.round(minutes);
+
+      var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+      if (since == undefined) {
+        var deviceData = "";
+
+      }
+      //  else if((timediff>oneHourVal)){
+      //   var deviceData = "OUT OF REACH  " + 'since  ' + Durations;
+
+      // }
+      else {
+
+        if (status == undefined) {
+
+          var status_toShow = "NA";
+
+        } else {
+          var status_toShow = status + " " + "Since" + " " + Durations;
+        }
+
+        var deviceData = status_toShow;
+
+
+      }
+
+
+          // console.log(marker[device]);
+          // console.log(marker);
+      if (marker[device] == null || marker[device] == undefined) {
+
+        //  var lastPing = new Date(_devInfo.last_ping_on).getTime();
+        //  var currTime = new Date().getTime();
+        //  var timediff = currTime-lastPing;
+        //  var totMin =timediff / 60000;
+        //  var tothours =totMin/60;
+        //  var thours = Math.floor(tothours);
+        //  console.log('totalHours=>',thours);
+        // ==================================================below code commented on 15-may-2019 =============================== 
+        // if((icons[iconType] != null)||(icons[iconType] != undefined)){
+        //   if (status == "OUT OF REACH") {
+        //     icons[iconType].fillColor = "blue";
+        //   }else if (status == "STOPPED") {
+        //     icons[iconType].fillColor = "red";
+        //   } else if (status == "RUNNING") {
+        //     icons[iconType].fillColor = "green";
+        //   } else if (status == "IDLING") {
+        //     icons[iconType].fillColor = "yellow";
+        //   }
+        // }
+
+        // ==================================================above code commented on 15-may-2019 ===============================
+
+        let markerDOM: any;
+
+
+        if ((icons[iconType] != null) || (icons[iconType] != undefined)) {
+          if (status == "OUT OF REACH") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+          
+          
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/outofreach_car.png']");
+          } else if (status == "STOPPED") {
+           
+            icons[iconType].url = that.iconSelector(status, iconType, msg);   
+         
+       
+         
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/stopped_car.png']");
+          } else if (status == "RUNNING") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+           
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/running_car.png']");
+          } else if (status == "NO DATA") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+           
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/running_car.png']");
+          } else if (status == "IDLING") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg); 
+          
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/idle_car.png']");
+          }
+        }
+        // ==========================commented on 4-1-2019 ==========================
+        // if (timediff>oneHourVal) {
+        //   icons[iconType].fillColor = "blue";
+        // }else if ((_devInfo.last_ACC == 0) && (msg.speed == 0)) {
+        //   icons[iconType].fillColor = "red";
+        // } else if ((_devInfo.last_ACC == 1) && (msg.speed > 0)) {
+        //   icons[iconType].fillColor = "green";
+        // } else if ((_devInfo.last_ACC == 1) && (msg.speed == 0)) {
+        //   icons[iconType].fillColor = "yellow";
+        // }
+        // ==========================commented on on 4-1-2019==========================
+
+
+        var m = new google.maps.Marker({
+          position: new google.maps.LatLng(lat, long),
+          map: map,
+          icon: icons[iconType],   
+        });
+
+
+        // var mtemp = {
+        //   marker : m,
+        //   // imei: _devInfo,
+        //   icon :icons[iconType],
+        //   lat: lat,
+        //   lng:long
+        // }
+        // outerThis.markerArray.push(mtemp);
+        // console.log('marker Temp array=>',outerThis.markerArray);
+    
+        // var sec_last_lat = _devInfo.sec_last_location?_devInfo.sec_last_location.lat:null;
+        // var sec_last_lng = _devInfo.sec_last_location?_devInfo.sec_last_location.long:null;
+        var Initial_head = _devInfo?parseFloat(_devInfo.heading) : 0;
+        // var Initial_head = google.maps.geometry.spherical.computeHeading(new google.maps.LatLng(sec_last_lat,sec_last_lng),new google.maps.LatLng(lat,long));
+        // console.log('Initial_head',Initial_head);
+      
+        if(count == 0){
+          var marker_init = setTimeout(function () {
+            var  markerDOM_temp = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']"); 
+            if(markerDOM_temp){
+              markerDOM_temp.style.transform = 'rotate(' + Initial_head + 'deg)';
+              count = 1 ; 
+              clearTimeout(marker_init);
+            }   
+          
+            }, 2000)
+        }
+         var infobox_numberPlate
+        if( outerThis.showLabels){
+          // console.log("HOWWWWWWWWWWW");
+          
+          infobox_numberPlate = new InfoBox({
+            content: "<div class='infobox' style='padding:2px;background:#575656;margin-left: -25px;'><small><b style='color: #ffffff;font-weight:300;font-size:12px;'>" + deviceName + "</b></small></div>",
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+
+        }else{
+          // console.log("NHOWWWWWWWWWWW");
+          infobox_numberPlate = new InfoBox({
+            content:'',
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+        }
+
+
+
+        locations.push(m);
+        // infobox_numberPlate.open(map, m);
+        infobox_numberPlate.open(map, m);
+        var gsm_signal = '';
+        if (msg != undefined) {
+          gsm_signal = msg.gsmSignal;
+
+        } else {
+          gsm_signal = _devInfo.gsmSignal;
+        }
+       
+
+
+
+        //m['infowindow'] = new google.maps.InfoWindow();
+        var contentString = ''
+        if (initData == 'initPing') {
+          contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+          '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})"> add poi </button>'+
+         '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+         '</div>'+
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last updated" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (lastUpdatedTime ? (moment(lastUpdatedTime).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdatedTime).fromNow() + ')') : "No Data Available") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "GPS Positioned" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (_devInfo.gpsTracking == '1' ? 'Yes' : (_devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "GPS Signal" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((gsm_signal != undefined) ? gsm_signal : "NA") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Name" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Number" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last Speed" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (_devInfo.last_speed) + " kmph" +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Status" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+            '</div>' +
+            '</div>' 
+          
+            // '<div class="row" id="viewParanoma">'+
+            // '<div class="col-sm-12">'+
+            // '<p>'+'StreetView Content'+'</p>'+
+            // +'</div></div>'
+
+            // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})"> add poi </button>'
+
+        }
+        else if (initData == 'ping') {
+          // console.log('statusdeviceSpeeddeviceSpeeddeviceSpeeddeviceSpeed=>',speed);
+          outerThis.last_speed = msg.speed;
+          contentString = ''
+          contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+        '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})">add poi</button>'+
+         '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+         '</div>'+
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last updated" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (lastUpdatedTime ? (moment(lastUpdatedTime).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdatedTime).fromNow() + ')') : "No Data Available") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "GPS Positioned" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((_devInfo.gpsTracking == '1' ? 'Yes' : _devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "GPS Signal" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((gsm_signal != undefined) ? gsm_signal : "NA") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Name" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Number" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Speed" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            outerThis.last_speed + " " + "kmph"
+          '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Status" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+            '</div>' +
+            '</div>' 
+              
+            // '<div class="row" id="viewParanoma">'+
+            // '<div class="col-sm-12">'+
+            // '<p>'+'StreetView Content'+'</p>'+
+            // +'</div></div>'
+
+            // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})">add poi</button>'
+
+        }
+
+
+
+        var myOptions = {
+          content: contentString
+          , disableAutoPan: false
+       
+          , maxWidth: 0
+          , pixelOffset: new google.maps.Size(-18, -25)
+          , zIndex: null
+          , boxStyle: {
+            //background: "url('https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/infobox/examples/tipbox.gif') no-repeat"
+            // ,
+            opacity: 0.8
+            // , width: "380px" 
+            // , padding: "10px"
+            // , "background-color" : "white"
+          }
+          , closeBoxMargin: "10px 5px 3px 3px"
+          , closeBoxURL: "/assets/image/close.png"
+          , infoBoxClearance: new google.maps.Size(10, 10)
+          , isHidden: false
+          , pane: "floatPane"
+          , enableEventPropagation: true
+          , alignBottom: true
+        };
+        m['infowindow'] = new InfoBox(myOptions);
+          // console.log("Infowindow card",m);
+
+        var mtemp = {
+          marker : m,
+          imei: _devInfo.Device_ID,
+          icon :icons[iconType],
+          lat: lat,
+          lng:long,
+          infowindow : new InfoBox(myOptions),
+          number_plate : infobox_numberPlate
+        }
+        outerThis.markerArray.push(mtemp);
+        console.log('marker Temp array=>',outerThis.markerArray,outerThis.socketData);
+        google.maps.event.addListener(m, 'click', function () {
+          // console.log('Opening Infow window',m);
+          // { lat: , lng: }
+          var fenway = { lat: m.position.lat(), lng:  m.position.lng() };
+          // console.log("latlnglitrals",m.position.lat(),m.position.lng());
+          // console.log(fenway);
+          var panorama = new google.maps.StreetViewPanorama(
+            document.getElementById("viewParanoma"),
+            {
+              position: fenway,
+              pov: {
+                heading: 34,
+                pitch: 10
+              }
+            }
+          );
+          map.setStreetView(panorama);  
+          // console.log('111111111111111111111111111111111111111111111111111=>',this) 
+          this['infowindow'].open(map, this);
+        });
+        marker[device] = m;
+        target[device] = 0;
+
+      }
+      //  console.log(locations)
+      var z = locations
+        }
+    
+      //  this.togglePOI(true);
+  
+      }
+  flightPathArr: any = [];
+  isTraffic: boolean = true;
+  mapTypeId: any = "roadmap";
+  setMapType(mapTypeId) {
+    // console.log(mapTypeId);
+    this.darkModeSwitch = false;
+
+    if (mapTypeId == "traffic") {
+
+      this.isTraffic = !this.isTraffic;
+      if (this.isTraffic) {
+
+        this.trafficLayer.setMap(this.mapNew);
+      }
+      else {
+        this.trafficLayer.setMap(null);
+      }
+
+    }
+    else {
+      this.mapTypeId = mapTypeId;
+      if (mapTypeId === 'darkmode') {
+        this.darkModeSwitch = true;
+      }
+      this.mapNew.setMapTypeId(mapTypeId);
+    }
+  }
+
+  enableRouteComponent = false;
+  enableGeofenceComponent = false;
+  enablePOIComponent = false;
+
+  toggleMapComponents(option) {
+    if(this.showHistory){
+      if (option == "route")//route,pointofinterest,geofencing 
+      {
+        this.routeDetails1(this.useridd, !this.enableRouteComponent);
+      }
+      else if (option == "geofencing") {
+        this.toggleGeofence1(!this.enableGeofenceComponent);
+      }
+      else if (option == "pointofinterest") {
+        // console.log(option);
+        this.togglePOI1(!this.enablePOIComponent);
+      }
+
+
+    }else{
+      if (option == "route")//route,pointofinterest,geofencing 
+      {
+        this.routeDetails(this.useridd, !this.enableRouteComponent);
+      }
+      else if (option == "geofencing") {
+        this.toggleGeofence(!this.enableGeofenceComponent);
+      }
+      else if (option == "pointofinterest") {
+        // console.log(option);
+        this.togglePOI(!this.enablePOIComponent);
+      }
+
+    }
+    //var useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+
+
+  allGeofencePolygon = [];
+  geoService(map) {
+
+
+    this.contactService.getGeoFence(this.useridd).subscribe(
+
+      data => {
+        this.devicess = data
+
+        for (let i = 0; i < this.devicess.length; i++) {
+          let cordin = [];
+
+          let a = this.devicess[i].geofence.coordinates[0];
+
+          for (let k = 0; k < a.length; k++) {
+            let b = {
+              lat: a[k][1],
+              lng: a[k][0]
+            }
+            cordin.push(b);
+          }
+          this.geofence(cordin, this.devicess[i].geoname, map);
+
+        }
+        this.enableGeofenceComponent = !this.enableGeofenceComponent;
+      });
+  }
+
+  geofence(zzz, yyy, map) {
+
+    var infoWindow;
+    var outerThis = this;
+    var GeoFencCoords = zzz
+    var GeoName = yyy
+
+    // console.log(GeoFencCoords)
+    plotGeoFence(GeoFencCoords);
+    function plotGeoFence(GeoFencCoords) {
+
+      var bermudaTriangle = new google.maps.Polygon({
+        paths: GeoFencCoords,
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 3,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35
+      });
+      bermudaTriangle.setMap(map);
+
+      outerThis.allGeofencePolygon.push(bermudaTriangle);
+      bermudaTriangle.addListener('click', showArrays);
+
+      infoWindow = new google.maps.InfoWindow;
+
+    }
+
+    /** @this {google.maps.Polygon} */
+    function showArrays(event) {
+
+      var vertices = this.getPath();
+
+      var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+
+      infoWindow.setContent(contentString);
+      infoWindow.setPosition(event.latLng);
+
+      infoWindow.open(map);
+    }
+  }
+
+
+  removeGeofence() {
+    for (var i = 0; i < this.allGeofencePolygon.length; i++) {
+      this.allGeofencePolygon[i].setMap(null);
+    }
+    this.allGeofencePolygon = [];
+  }
+
+
+  // Outside Function declaration
+  ongoingGoToPoint: any;
+  ongoingMoveMarker: any;
+  isMapInit: any;
+  marker: any
+  map2load: Boolean = false;
+
+
+  geofun: Boolean = false;
+  date1: any = new Date()
+  date2: any = new Date();
+  interpolated: any;
+  Load: Boolean = false;
+  Load2: Boolean = false;
+
+
+  showHideClusters() {
+    // console.log("Show hide clusters")
+  }
+  last_pointer: any
+  SpeedMeter2: boolean = false
+  speeed2: any = 0;
+  PlayData: boolean = false;
+  pauseDate: boolean = false;
+  inter(b) {
+    // console.log(b);
+    if (b == 'fast') {
+      this.speed = 2 * this.speed;
+      // console.log(this.speed)
+    }
+    else if (b == 'slow') {
+      if (this.speed > 50) {
+        this.speed = this.speed / 2;
+        // console.log(this.speed)
+      }
+      else {
+        /*  this.speed =200 */
+      }
+    }
+    else {
+      this.speed = 200
+    }
+    //this.play(null)
+  }
+  // play(a) {
+
+  animateMarker_history(marker, coords, km_h, iconType) {
+    this.cummulative_Distance = 0;
+    // console.log('coords=>',coords);
+    var ongoingMoveMarker = null;
+    this.SpeedMeter2 = true;
+    // this.pauseDate = true;
+    this.PlayData = true;
+    // this.playingHistory = true;
+    this.historyMap.setZoom(15);
+    if ((km_h == 0) || (km_h == '0')) {
+      km_h = 50;
+    }
+    var map, marker;
+    var coord = this.dataArrayCoords[0];
+    this.playingHistory = true;
+
+    var lat = coord[0];
+    // console.log(lat);
+    var lng = coord[1];
+    let outerThis = this
+    var startPos = [lat, lng];
+    this.speed = 200
+    var iconselected = this.devicon
+    var delay = 100;
+  
+
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(60, 60),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+
+    var ambulance = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/ambulance_b.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+
+
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon,
+      "ambulance":ambulance
+    }
+    var that = this;
+
+    var contentString
+
+    map = this.historyMap;
+
+    var target = 0;
+    // if(this.rangeDetector == true){
+    //   target = this.indexValue; 
+    // }
+    // this.rangeDetector=false;
+    var km_h = km_h || 50;
+    
+
+    if (!startPos.length)
+      coords.push([startPos[0], startPos[1]]);
+
+    that.goToPoint = function () {
+      // console.log("Go to point function");
+      if(that.rangeDetector === true){
+        a= that.indexValue;
+        target   = that.indexValue;
+        that.sliderValue = that.indexValue;
+      }
+      var lat = marker.position.lat();
+      var lng = marker.position.lng();
+      that.getAddress(lat,lng);
+   
+      if(km_h === 0){
+        km_h = 200 ;  
+      }
+      var step = (km_h * 1000 * delay) / 3600000; // in meters
+      var dest = new google.maps.LatLng(
+        coords[target][0], coords[target][1]);
+      //  console.log(coords[target][2])
+      var r = coords[target][2]
+      outerThis.speeed2 = r;
+      outerThis.ext_voltage = '22v';
+
+      outerThis.historyDate = coords[target][4];
+      outerThis.ext_voltage = coords[target][5];
+      // console.log("outerThis.historyDate",coords);
+
+      var distance = google.maps.geometry.spherical.computeDistanceBetween(dest, marker.position); // in meters
+
+      var numStep = distance / step;
+   
+      var i = 0;
+      var deltaLat = (coords[target][0] - lat) / numStep;
+      var deltaLng = (coords[target][1] - lng) / numStep;
+      // console.log('cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc',target);
+      that.moveMarker = function () {
+        // console.log("Move Marker Function");
+        // console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz',a,target);
+        // ye wala movemarker function h  
+      outerThis.sliderValue = a; 
+        outerThis.cummulative_Distance  = coords[target][3] ; 
+        lat += deltaLat;
+        lng += deltaLng;
+        i += step;
+        // console.log('icons[iconselected].rotation',icons[iconselected].rotation);
+        let markerDOM: any;
+        var status = "RUNNING";
+      
+        if (i < distance) {
+          // let iconType = 'car';
+          // console.log('iconsiconsiconsiconsiconsicons',icons);
+          // console.log(icons['iconType'].url);
+          // console.log(icons[iconType]);
+          // console.log(icons[iconType].url);
+          var msg;
+          // console.log('iconType',iconType);
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+          // console.log('markerDOM',markerDOM);
+          
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng));
+
+      
+          // console.log('head',head);
+        
+          // if (head != 0) {
+            // icons[iconselected].rotation = head
+           
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(new google.maps.LatLng(lat, lng));
+
+          map.setCenter({ lat: lat, lng: lng });
+          // console.log("Abinash");
+          that.start = setTimeout(that.moveMarker, delay);
+        }
+        else {
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), dest);
+         
+        
+
+          // var iconType = 'car';
+          // console.log(iconType);
+          
+          // console.log(icons[iconType]);
+          // console.log(icons[iconType]);
+          // console.log(icons[iconType].url);
+
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(dest);
+          map.setCenter({ lat: coords[target][0], lng: coords[target][1] });
+          // console.log('target',target);
+          target++;
+          if (target == coords.length) { target = 0; }
+          that.start = setTimeout(that.goToPoint, delay);
+
+        }
+      }
+      a++
+   
+  
+      that.rangeDetector = false;
+      // console.log("outside moveMarker function");
+      if (a > coords.length) {
+        // console.log("Cord.length if condition");  
+        outerThis.speeed2 = 0;
+    
+      }
+      else {     
+        // console.log("Cord.length else condition");   
+        that.moveMarker();
+        km_h = outerThis.speed;
+      }
+    }
+    var a = 0;
+   
+   
+    // console.log("Gotopoint function");
+    that.goToPoint();
+
+  }
+
+
+rangeDetector:boolean=false;
+changeRange(){ 
+  
+  clearTimeout(this.start);
+  this.rangeDetector = true;
+  var rangeVal = document.getElementById("slider1");
+//  console.log(rangeVal);
+ 
+  // var zoomTImeOut = setTimeout(()=>{
+  //           this.historyMap.setZoom(15);
+  //           clearTimeout(zoomTImeOut);
+  // },5000)
+
+  this.indexValue  = rangeVal['value'];
+
+ if(this.tempMapHistory[0]['flag'] == 'stop'){
+    this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.historyMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    // clearTimeout(this.start);
+    // this.moveMarker();
+    this.goToPoint();
+  
+ } 
+ if(this.tempMapHistory[0]['flag'] == 'start'){
+  // this.speed = 0 ;
+  this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.historyMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.tempMapHistory[0]['flag'] = 'stop';
+  // clearTimeout(this.start);
+  this.goToPoint();
+
+ }
+
+}
+
+zoomSet(){
+  this.historyMap.setZoom(15);
+}
+
+
+
+
+  // }
+
+
+  pause() {
+    this.PlayData = !this.PlayData;
+    this.pauseDate = !this.pauseDate;
+  }
+
+
+  histortyRply(dev, data) {
+    //  this.Load = true;
+    // console.log(data)
+
+    this.map2load = false;
+    let Outerthis = this
+    let map;
+    let markerCurrent;
+    var isMapInit = false;
+    let markersPast;
+    this.online = false;
+    this.historyData = false
+    this.PlayData = true;
+    this.offline = true;
+    from1 = null;
+    this.latLongArr = [];
+    this.latLongArr3 = []
+    to1 = null;
+    //  console.log(this.date1)
+    var currtime = new Date();
+    var from1 = new Date(this.datefrom);
+    var position
+    // console.log("DATE ::"+from1);
+    var fromtime = new Date(from1).toISOString();
+    //  console.log(fromtime)
+    var to1 = new Date(this.date2)
+
+    let outerThis = this
+    var marker = undefined;
+    var totime = new Date(new Date(to1).setSeconds(0)).toISOString();
+
+    this.ddid = dev.did
+    this.contactService.getCurrentLocation(this.ddid, fromtime, totime).subscribe((data5) => {
+      this.latlongObjArr = data5;
+      // console.log("currlocdata=>",data5)
+      // console.log(this.latlongObjArr)
+      this.last_pointer = this.latlongObjArr.length - 1;
+      /*  var result = [me.latLng.lat(), me.latLng.lng()];
+       transition(result); */
+      if (this.latlongObjArr[this.last_pointer].interpolated == null || this.latlongObjArr[this.last_pointer].interpolated == undefined) {
+        let a = this.latlongObjArr[this.last_pointer].latDecimal;
+        let b = this.latlongObjArr[this.last_pointer].longDecimal;
+
+        position = [a, b];
+        //  initialize();
+        this.last_pointer--
+      }
+      else {
+        let a = this.latlongObjArr[this.last_pointer].interpolated.location.latitude
+        let b = this.latlongObjArr[this.last_pointer].interpolated.location.longitude
+        position = [a, b];
+        //   initialize();
+        this.last_pointer--
+      }
+
+
+
+    })
+
+
+    function initialize() {
+
+      // console.log("Abinash");
+      var latlng = new google.maps.LatLng(position[0], position[1]);
+      var myOptions = {
+        zoom: 8,
+        center: latlng,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      map = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+      marker = new google.maps.Marker({
+        position: latlng,
+        map: map,
+        title: "Your current location!",
+
+      });
+
+
+
+
+      google.maps.event.addListener(map, 'click', function (me) {
+      
+        setInterval(function () {
+          // console.log("Interval Started")
+          if (outerThis.latlongObjArr[outerThis.last_pointer].interpolated == null || outerThis.latlongObjArr[outerThis.last_pointer].interpolated == undefined) {
+            let a = outerThis.latlongObjArr[outerThis.last_pointer].latDecimal;
+            let b = outerThis.latlongObjArr[outerThis.last_pointer].longDecimal;
+
+            position = [a, b];
+            // console.log(position)
+            transition(position);
+            outerThis.last_pointer
+          }
+          else {
+            let a = outerThis.latlongObjArr[outerThis.last_pointer].interpolated.location.latitude
+            let b = outerThis.latlongObjArr[outerThis.last_pointer].interpolated.location.longitude
+            position = [a, b];
+            // console.log(position)
+            transition(position);
+            outerThis.last_pointer
+          }
+          // outerThis.last_pointer--
+        }, 4000)
+
+        //}
+
+      });
+      var numDeltas = 100;
+      var delay = 4000; //milliseconds
+      let i = 0;
+      var deltaLat;
+      var deltaLng;
+      function transition(result) {
+        i = 0;
+        deltaLat = (result[0] - position[0]) / numDeltas;
+        deltaLng = (result[1] - position[1]) / numDeltas;
+        moveMarker();
+      }
+      function moveMarker() {
+        position[0] += deltaLat;
+        position[1] += deltaLng;
+        var latlng = new google.maps.LatLng(position[0], position[1]);
+        marker.setPosition(latlng);
+        if (i != numDeltas) {
+          i++;
+          setTimeout(moveMarker, delay);
+        }
+      }
+      /* 
+                    setInterval(function(){
+                     
+                      if ( this.latlongObjArr[last_pointer].interpolated == null || this.latlongObjArr[last_pointer].interpolated == undefined){
+                        let a = this.latlongObjArr[last_pointer].latDecimal;
+                       let b = this.latlongObjArr[last_pointer].longDecimal;
+                       
+                        position = [a, b];
+                        transition(position);
+               ;
+                      }
+                      else{
+                        let a =  this.latlongObjArr[last_pointer].interpolated.location.latitude
+                        let b = this.latlongObjArr[last_pointer].interpolated.location.longitude
+                         position = [a,b];
+                         transition(position);
+                  
+                      }
+                      
+                     },3000); */
+    }
+
+  }
+  path: any;
+  devicon: any;
+  latLngLine = [];
+
+  dataArrayCoords = [];
+  dataspeed = []
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  showStatus: boolean = false;
+  flag: any;
+  playing: boolean = false;
+  play(playindex) {
+    // console.log('playindex',playindex);
+  
+    this.showStatus = true
+
+    var icontype = this.dev_id.iconType;
+    var tempObj = { "icontype": icontype }
+    var tempDataCoordArr = this.tempMapHistory[playindex].dataArrayCoords;
+    
+    tempObj["tempDataCoordArr"] = tempDataCoordArr;
+
+    if (this.tempMapHistory[playindex]['flag'] == 'init') {
+      this.animateMarker_history(this.marker4, tempDataCoordArr, 50, icontype);
+      tempObj["marker"] = this.marker4;
+      this.tempMapHistory[playindex]['flag'] = 'stop';
+      tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+ 
+    } else if (this.tempMapHistory[playindex]['flag'] == 'start') {
+      
+        this.moveMarker();
+        // clearTimeout(this.start);
+        this.tempMapHistory[playindex]['flag'] = 'stop';
+        tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+      
+      } else
+        if (this.tempMapHistory[playindex]['flag'] == 'stop') {
+          this.speed = 0;
+          clearTimeout(this.start);
+          this.tempMapHistory[playindex]['flag'] = 'start';
+          tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+        }
+
+    if (this.flag == 'reset') {
+      this.marker4.setPosition({ lat: this.latLngLine[0].lat, lng: this.latLngLine[0].lng });
+      this.flag = 'init';
+    }
+
+  }
+
+  headingName = 'Live Tracking';
+  playingHistory: boolean = false;
+  parkingPOINTS=[]
+  fromTIME
+  stop_locationss=[]
+  counter
+  maphistory(data) {
+
+    this.showArea();
+    this.pdfFunction(this.deviceSelect[0]);
+    this.getTravelPathReport(this.deviceSelect[0])
+    if(this.digitalInput==1){
+      this.workingHoursFunction1(this.deviceSelect[0])
+    }else{
+      this.workingHoursFunction2(this.deviceSelect[0])
+    }
+    this.historyAdress ='';
+    this.sliderValue=0;
+    this.showSocketData = false;
+    this.Load = true;
+    this.map2load = false;
+    this.SpeedMeter2 = false;
+    this.PlayData = true;
+    this.playingHistory = false;
+    let map;
+    let markerCurrent;
+    let markerSrc;
+    var isMapInit = false;
+    let markersPast;
+    this.online = false;
+    // this.PlayData = true;
+    this.historyData = false;
+    this.latLngLine = [];
+    this.dataArrayCoords = [];
+    var position;
+    let outerThis = this
+    this.offline = true;
+    from1 = null;
+    this.latLongArr = [];
+    this.latLongArr3 = []
+    to1 = null;
+
+ 
+    this.dev_id = this.deviceSelect[0];
+    // console.log("Trssss",this.deviceSelect[0]);
+    
+    var currtime = new Date();
+    var from1 = new Date(this.datefrom).toISOString();
+    var to1 = new Date(this.date2).toISOString();
+
+    var fromtime = new Date(from1).toISOString();
+    var totime = new Date(to1).toISOString();
+
+    this.fromTIME=new Date(from1).toISOString();
+    //  console.log(fromtime)
+
+
+    var diff = moment(totime).diff(fromtime, 'days')
+    // console.log('difference :' + diff)
+ 
+    if ((fromtime > totime)||(diff>=31)) {
+      this.Load = false;
+      let error = (fromtime > totime)?"Error: From Time Never Greater then To Time" : "History is unavailable for more than one month";
+      // let message = "Error: From Time Never Greater then To Time";
+      let action
+      this.snackBar.open(error, action, {
+        duration: 4000,
+
+      });
+
+    }
+
+    else if (this.dev_id === null || this.dev_id === undefined || this.dev_id === '') {
+      this.Load = false;
+      let message = "Error: Please choose a device";
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+
+      });
+    }
+    else {
+
+      // this.ddid = dev.did;
+      // this.devicon = dev.iconType;
+      // console.log(this.navId);
+      
+      if(this.navId === 'locationHistory'){
+        this.ddid=this.dev_id.did
+      }else{
+        this.ddid=this.dev_id.Device_ID
+      }
+ 
+      // this.ddid = (this.navId === 'locationHistory')? this.dev_id.did : this.dev_id.Device_ID;
+      // console.log("DID",this.ddid,this.dev_id.did);
+      
+      this.devicon = this.dev_id.iconType;
+      this.speedArr = [];
+      var counter = 0
+      var countTime = setInterval(()=>{
+        counter++
+      
+      },1000)
+
+      if(data==1){
+
+         var ft = new Date(fromtime);
+          var tt = new Date(totime);
+          var dname = this.deviceSelect[0];
+       
+          if (this.coloumnClicked === false) {
+            var tempData = {
+              fromTime: ft.toLocaleString(),
+              toTime: tt.toLocaleString(),
+              device_name: this.deviceName,
+              device_obj: this.deviceSelect[0],
+              lineThickness: this.thicknessVal,
+              idleColor: this.idleColor,
+              parkingColor: this.parkingColor,
+              dataColor: this.dataColor,
+              flag: 'init',
+            }
+          }
+  
+          this.showTable = true;
+          this.flag = 'init';
+          initialize();
+  
+          this.Load = false;
+        
+  
+          let cluster_arr = [];  
+         console.log(flightPath.getPath());
+
+          this.path = flightPath.getPath();
+  
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = (this.navId === 'locationHistory')? this.dev_id.viewValue:this.dev_id.Device_Name;
+            this.speed = this.latlongObjArr[i].speed + "Km/hr";
+            this.im = this.latlongObjArr[i].imei;
+  
+            this.speedArr.push(this.latlongObjArr[i].speed);
+  
+            var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // console.log(JSON.parse(this.datee));
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+  
+            var harshAcc = this.latlongObjArr[i].harshAccel;
+            var harshBreak = this.latlongObjArr[i].harshBrake;
+            var harshCorner = this.latlongObjArr[i].harshCorner;
+            // console.log(harshAcc,harshBreak,harshCorner);
+            var fill_color = '#00F';
+            var stroke_color = '#00A';
+            var content = '';
+            // <button value=${i} id="deletePoint" style="background-color: red;border: double;border-radius: 21%;color: white;padding: 8px 15px;cursor: pointer;opacity: 0.9;margin-left:50%">Delete</button>
+            content = `<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : `
+             + d_name + `</b><br><b>IMEI : `
+             + this.im + `</b><br><b>DEVICE DATE : ` 
+             + this.datee + `</b><br><b>SPEED : ` 
+             + this.speed + `</b><br><b style="margin-bottom:10px" id="addressBinding">Address : `
+              + this.contentAdd + `</b></div></b></div>
+              </div></div>`
+            var harsh = this.latlongObjArr[i].gforce ? (parseFloat(this.latlongObjArr[i].gforce) / 10) : 0;
+            if ((harshAcc != undefined) && (harshAcc == 'true')) {
+              fill_color = '#008000';
+              stroke_color = '#008000';
+  
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #008000;">Harsh Acceleration</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+            if ((harshBreak != undefined) && (harshBreak == 'true')) {
+              fill_color = '#FF0000';
+              stroke_color = '#FF0000';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #FF0000;">Harsh Break</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+  
+              }
+            }
+            if ((harshCorner != undefined) && (harshCorner == 'true')) {
+              fill_color = '#c407b1';
+              stroke_color = '#c407b1';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #c407b1;">Harsh Corner</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+  
+            
+          
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+         
+            var arr = [];      
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+       
+  
+            this.latLngLine.push(cord);
+          var contentString = '<div>' +
+            '<div>'+
+            '<p style="margin-bottom: 5px;font-weight:700">' + this.deviceName + '</p>' +
+            '</div>'
+            var iconSrc = this.iconSelector("RUNNING","truck",{});
+            // 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000'
+            // this.iconSelector("RUNNING","car",{});
+            
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+              if (this.dataColor === true) {
+                var markersPasts = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                  map: map,
+                })
+  
+                markersPasts['infowindow'] = new google.maps.InfoWindow({ content: content });
+             
+  
+                google.maps.event.addListener(markersPasts, 'click', function () {
+            
+                  var lattitude = markersPasts.position.lat();
+                  var longitude = markersPasts.position.lng()  ;
+                  var latlng_1 =
+                  {
+                    "lat": lattitude,
+                    "long":  longitude
+                  }
+                  outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                 
+                 if(res.message == "Address not found in databse"){ 
+                  var geocoder = new google.maps.Geocoder();
+                  var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+                  var request = {
+                    latLng: latlng
+                  };
+                  // console.log('latlongVal', request)
+                  var innerThis = this ; 
+                  this['infowindow'].open(map, innerThis); 
+                  geocoder.geocode(request, function (data, status) { 
+                    if (status == google.maps.GeocoderStatus.OK) {
+                      if (data[0] != null) {
+                        // innerThis.contentAdd = data[0].formatted_address;
+                        var tempAdd = data[0].formatted_address;
+                          var getAddressContent = document.getElementById('addressBinding');
+                          getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+                       
+                      } else {
+                        // console.log("No address available")
+                        var tempAdd_1 = "No address available";
+                        var getAddressContent = document.getElementById('addressBinding');
+                        getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+                      
+                     
+                     
+                      }
+                    }
+                    else {
+                      var tempAdd_2 = 'NA';
+                      var getAddressContent = document.getElementById('addressBinding');
+                      getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+                      // console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+                    
+                    }
+              
+                  })
+  
+                    }else{
+                      var innerThis_1 = this ; 
+                  
+                      this['infowindow'].open(map, innerThis_1);      
+                      var tempAdd  = res.address ; 
+                      // console.log('innerThis_1.contentAdd',tempAdd);
+                      var chkTmout = setTimeout(function(){
+                        var getAddressContent = document.getElementById('addressBinding');
+                        // console.log('getAddressContent',getAddressContent);
+                        getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+                        clearTimeout(chkTmout);
+                      },500)
+                    
+                    }
+  
+                  })
+  
+               
+                  
+                  })
+                // cluster_arr.push(markersPast);
+  
+              }
+  
+  
+  
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc,
+                  scaledSize: new google.maps.Size(20, 20),
+                });
+                //  markerSrc['infowindow'] = new google.maps.InfoWindow({ content: content });
+                 const infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                  });
+                   infowindow.open(map, markerSrc);
+                 markerSrc.addListener("click", () => {
+                infowindow.open(map, markerSrc);
+                });
+                outerThis.marker4 = markerSrc;
+              }
+  
+  
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+                if (this.dataColor) {
+                  var markersPasts = new google.maps.Marker({
+                    position: new google.maps.LatLng(this.lat, this.lng),
+                    icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                    map: map,
+                  })
+                  markersPasts['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                  google.maps.event.addListener(markersPasts, 'click', function () { 
+                    // console.log("inside info window function 1");
+                    this['infowindow'].open(map, this); });
+               
+  
+                }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+  
+                // outerThis.marker4 = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+  
+              }
+  
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc
+                })
+                outerThis.marker4 = markerSrc;
+              }
+            }
+          }
+  
+  
+      
+          // console.log(this.coloumnClicked) ;
+          if (this.coloumnClicked === false) {
+            tempData['dataArrayCoords'] = this.dataArrayCoords;
+  
+          }
+  
+          // console.log('this.dataArrayCoords',this.dataArrayCoords); 
+            if(this.dataArrayCoords.length<1){
+              var fdd = new Date(this.datefrom);
+              var tdd= new Date(this.date2);
+              swal("No Data Found", "Vehicle has not moved from" +" "+ moment(fdd).format('LLL') + "to " + moment(tdd).format('LLL')).then((ans)=>{
+                // console.log(ans);
+             
+              },err=>{
+                // console.log(err);
+              });
+  
+            }
+         
+          this.seekBarValue = this.dataArrayCoords.length;
+  
+          this.maxSpeedd = Math.max.apply(null, this.speedArr); 
+          this.dis = true;
+  
+          this.contactService.getDistance(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3) => {
+  
+            this.data2 = data3;
+  
+            // initialize();
+            //  console.log(this.data2);
+            let a = this.data2["Distance"] ? this.data2["Distance"] : 0;
+            if (this.coloumnClicked === false) {
+              tempData['mileage'] = a;
+              this.tempMapHistory.push(tempData);
+  
+            }
+  
+       
+  
+            this.total_dis = a;
+            let b = this.data2["Average Speed"] ? this.data2["Average Speed"] : 0;
+            this.avg_speed = b;
+         
+            this.ideal_time = this.data2["Idle Time"] ? this.minToHoursConversion(this.data2["Idle Time"]) : 0;
+            if (parseFloat(this.ideal_time) < 0) {
+              this.ideal_time = 0;
+            }
+  
+            this.historyDataCondition = true;
+  
+            var playerSeekbar: any;
+            $( document ).ready(function() {
+              playerSeekbar = document.getElementById('slider1'); 
+              console.log( "ready!", playerSeekbar['value']);
+              playerSeekbar.oninput = function () { 
+               
+                    zoomToObject(flightPath);
+                    outerThis.changeRange();
+                 
+                  }
+               });
+              })
+
+              
+      }
+      else{
+        this.contactService.getCurrentLocation1(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3:any) => {
+          if(data3){
+            clearInterval(countTime);
+          }
+         
+          // console.log('countercountercountercountercountercountercounter',counter,data3);
+          var ft = new Date(fromtime);
+          var tt = new Date(totime);
+          var dname = this.deviceSelect[0];
+       
+          if (this.coloumnClicked === false) {
+            var tempData = {
+              fromTime: ft.toLocaleString(),
+              toTime: tt.toLocaleString(),
+              device_name: this.deviceName,
+              device_obj: this.deviceSelect[0],
+              lineThickness: this.thicknessVal,
+              idleColor: this.idleColor,
+              parkingColor: this.parkingColor,
+              dataColor: this.dataColor,
+              flag: 'init',
+             
+            }
+          }
+  
+          this.showTable = true;
+  
+          this.latlongObjArr = data3;
+          this.flag = 'init';
+          initialize();
+          this.Load = false;
+          let cluster_arr = [];
+          // console.log(flightPath.getPath());
+          
+          this.path = flightPath.getPath();
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = (this.navId === 'locationHistory')? this.dev_id.viewValue:this.dev_id.Device_Name;
+            this.speed = this.latlongObjArr[i].speed + "Km/hr";
+            this.im = this.latlongObjArr[i].imei;
+            // console.log(this.latlongObjArr[i]);
+            var insertionTime=moment(this.latlongObjArr[i].insTime).format('MMMM Do YYYY, h:mm:ss a');
+            var raw=this.latlongObjArr[i].raw;
+            this.speedArr.push(this.latlongObjArr[i].speed);
+
+            var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // console.log(this.latlongObjArr[i],"lakskalskalkl");
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+            var lastLat=this.latlongObjArr[i].lat
+             var lastlong=this.latlongObjArr[i].lng
+            var harshAcc = this.latlongObjArr[i].harshAccel;
+            var harshBreak = this.latlongObjArr[i].harshBrake;
+            var harshCorner = this.latlongObjArr[i].harshCorner;
+            // console.log(harshAcc,harshBreak,harshCorner);
+            var fill_color = '#00F';
+            var stroke_color = '#00A';
+            var content = '';
+            // content=`<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME :$d_name`
+            content = `<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : `
+             + d_name + `</b><br><b>IMEI : `
+             + this.im + `</b><br><b>DEVICE DATE : ` 
+             + this.datee + `</b><br><b>SPEED : `+ this.speed +
+             `</b><br><b>INSERTION TIME : `+ insertionTime +
+             `</b><br><b>RAW : `+ raw +
+             `</b><br><b style="margin-bottom:10px" id="addressBinding">Address : `
+              + this.contentAdd + '</b></div></b><br>'
+              +'<button style="margin-top:10px;background-color: blue;color: white;padding: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lastLat + ',' + lastlong + '\');})">ADD POI</button></div></div></div>'
+              // '<button style= "position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lastLat + ',' + lastlong + '\');})"> add poi </button>'
+              // <button value=${i} id="deletePoint" style="background-color: red;border: double;border-radius: 21%;color: white;padding: 8px 15px;cursor: pointer;opacity: 0.9;margin-left:50%">Delete</button>
+           
+            var harsh = this.latlongObjArr[i].gforce ? (parseFloat(this.latlongObjArr[i].gforce) / 10) : 0;
+            if ((harshAcc != undefined) && (harshAcc == 'true')) {
+              fill_color = '#008000';
+              stroke_color = '#008000';
+  
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #008000;">Harsh Acceleration</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+            if ((harshBreak != undefined) && (harshBreak == 'true')) {
+              fill_color = '#FF0000';
+              stroke_color = '#FF0000';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #FF0000;">Harsh Break</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+  
+              }
+            }
+            if ((harshCorner != undefined) && (harshCorner == 'true')) {
+              fill_color = '#c407b1';
+              stroke_color = '#c407b1';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #c407b1;">Harsh Corner</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+  
+            
+          
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+         
+            var arr = [];      
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+       
+  
+            this.latLngLine.push(cord);
+          var contentString = '<div>' +
+            '<div>'+
+            '<p style="margin-bottom: 5px;font-weight:700">' + this.deviceName + '</p>' +
+            '</div>'
+            var iconSrc = this.iconSelector("RUNNING","truck",{});
+            // 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000'
+            // this.iconSelector("RUNNING","car",{});
+            
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+            // iconSrc['infowindow'] = new google.maps.InfoWindow({ content: contentString });
+            // '/assets/images/liveTrackIcons/ocar.png';
+            // ======================added ========================================
+            // this.lat = this.latlongObjArr[i].lat;
+            // this.lng = this.latlongObjArr[i].lng;       
+            // this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+              if (this.dataColor === true) {
+                var markersPast = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                  map: map,
+                })
+  
+                markersPast['infowindow'] = new google.maps.InfoWindow({ content: content });
+               
+                google.maps.event.addListener(markersPast, 'click', function () {
+                  
+            
+                  var lattitude = markersPast.position.lat();
+                  var longitude = markersPast.position.lng()  ;
+                  var latlng_1 =
+                  {
+                    "lat": lattitude,
+                    "long":  longitude
+                  }
+                  outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                 
+                 if(res.message == "Address not found in databse"){ 
+                  var geocoder = new google.maps.Geocoder();
+                  var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+                  var request = {
+                    latLng: latlng
+                  };
+                  // console.log('latlongVal', request)
+                  var innerThis = this ; 
+                  this['infowindow'].open(map, innerThis); 
+                  geocoder.geocode(request, function (data, status) { 
+                    if (status == google.maps.GeocoderStatus.OK) {
+                      if (data[0] != null) {
+                        // innerThis.contentAdd = data[0].formatted_address;
+                        var tempAdd = data[0].formatted_address;
+                          var getAddressContent = document.getElementById('addressBinding');
+                          getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+                       
+                      } else {
+                        // console.log("No address available")
+                        var tempAdd_1 = "No address available";
+                        var getAddressContent = document.getElementById('addressBinding');
+                        getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+                      
+                     
+                     
+                      }
+                    }
+                    else {
+                      var tempAdd_2 = 'NA';
+                      var getAddressContent = document.getElementById('addressBinding');
+                      getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+                      // console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+                    
+                    }
+              
+                  })
+  
+                    }else{
+                      var innerThis_1 = this ; 
+                  
+                      this['infowindow'].open(map, innerThis_1);      
+                      var tempAdd  = res.address ; 
+                      // console.log('innerThis_1.contentAdd',tempAdd);
+                      var chkTmout = setTimeout(function(){
+                        var getAddressContent = document.getElementById('addressBinding');
+                        // console.log('getAddressContent',getAddressContent);
+                        getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+                        clearTimeout(chkTmout);
+                      },500)
+                    
+                    }
+  
+                  })
+                  })
+               
+              }
+  
+  
+  
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc,
+                  scaledSize: new google.maps.Size(20, 20),
+                });
+                //  markerSrc['infowindow'] = new google.maps.InfoWindow({ content: content });
+                 const infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                  });
+                   infowindow.open(map, markerSrc);
+                 markerSrc.addListener("click", () => {
+                infowindow.open(map, markerSrc);
+                });
+                outerThis.marker4 = markerSrc;
+              }
+
+
+              
+
+  
+  
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+                if (this.dataColor) {
+                  var markersPast = new google.maps.Marker({
+                    position: new google.maps.LatLng(this.lat, this.lng),
+                    icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                    map: map,
+                  })
+                  markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                  google.maps.event.addListener(markersPast, 'click', function () { 
+                    // console.log("inside info window function 1");
+                    this['infowindow'].open(map, this); });
+               
+  
+                }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+  
+                // outerThis.marker4 = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+  
+              }
+  
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc
+                })
+                outerThis.marker4 = markerSrc;
+              }
+            }
+          }
+  
+          if (this.coloumnClicked === false) {
+            tempData['dataArrayCoords'] = this.dataArrayCoords;
+  
+          }
+  
+            if(this.dataArrayCoords.length<1){
+              var fdd = new Date(this.datefrom);
+              var tdd= new Date(this.date2);
+              swal("No Data Found", "Vehicle has not moved from" +" "+ moment(fdd).format('LLL') + "to " + moment(tdd).format('LLL')).then((ans)=>{
+                // console.log(ans);
+             
+              },err=>{
+                // console.log(err);
+              });
+  
+            }
+         
+          this.seekBarValue = this.dataArrayCoords.length;
+  
+          this.maxSpeedd = Math.max.apply(null, this.speedArr);
+          this.dis = true;
+  
+          this.contactService.getDistance(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3) => {
+  
+            this.data2 = data3;
+  
+            // initialize();
+             console.log("__________________",this.data2,this.distanceVariation);
+            let a = Number(this.data2["Distance"] ? this.data2["Distance"] : 0);
+            // if(this.distanceVariation){
+            //   if(this.distanceVariation[0]=="+"){
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+                // console.log("MILEGE->",milege,'-',a);
+            //     a=a+milege
+
+            //   }else{
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+                // console.log("MILEGE->",milege,'-',a);
+            //     a=a-milege
+            //   }
+            // }
+            if (this.coloumnClicked === false) {
+              tempData['mileage'] = a.toFixed(2);
+              this.tempMapHistory.push(tempData);
+  
+            }
+  
+            this.total_dis = a;
+            let b = this.data2["Average Speed"] ? this.data2["Average Speed"] : 0;
+            this.avg_speed = b;
+         
+            this.ideal_time = this.data2["Idle Time"] ? this.minToHoursConversion(this.data2["Idle Time"]) : 0;
+            if (parseFloat(this.ideal_time) < 0) {
+              this.ideal_time = 0;
+            }
+  
+            this.historyDataCondition = true;
+  
+            var playerSeekbar: any;
+            $( document ).ready(function() {
+              playerSeekbar = document.getElementById('slider1'); 
+              console.log( "ready!", playerSeekbar['value']);
+              playerSeekbar.oninput = function () { 
+               
+                    zoomToObject(flightPath);
+                    outerThis.changeRange();
+                 
+                  }
+               });
+          })
+        });
+
+      }
+      
+
+
+
+
+      let min_time = this.minIdleTime;
+      var deviceObjectid = (this.navId === 'locationHistory')?this.dev_id.id: this.dev_id._id;
+      // console.log(deviceObjectid);
+
+      if (this.idleColor === true) {
+        this.idlePlot(fromtime, totime, deviceObjectid, min_time, map)
+      }
+      var stop_locations = [];
+      if (this.parkingColor === true) {
+    //     var from1 = new Date(this.datefrom).toISOString();
+    // var to1 = new Date(this.date2).toISOString();
+
+    // var fromtime = new Date(from1).toISOString();
+    // var totime = new Date(to1).toISOString();
+          // console.log('this.useriddthis.useridd',this.useridd,"IIIIIIIIIIIIIIIi",this.dev_id.id?this.dev_id.id: this.dev_id._id);
+          var userid=(this.dev_id.user._id != undefined)?this.dev_id.user._id:this.dev_id.user;
+          this.contactService.stoppage_points(deviceObjectid, fromtime, totime, userid)
+        // this.contactService.stoppage_report(fromtime,totime,userid,this.dev_id.id?this.dev_id.id: this.dev_id._id)
+          .subscribe((res) => {
+            // console.log("===========================>",res,this.parkingArr);
+            // this.parkingArr=res
+            let test = res;
+            // let test = res;
+            this.Load = false;
+            this.stoppageCount = (test.length != 0)?test.length : 0;
+            for (var i = 0; i < test.length; i++) {
+
+              this.stoppage_container = [];
+              this.stoppage_container.push(test[i].lat);
+              this.stoppage_container.push(test[i].long);
+             
+              this.arrival = new Date(test[i].arrival_time);
+              this.stoppage_container.push(this.arrival);
+              this.departure = new Date(test[i].departure_time);
+              this.stoppage_container.push(this.departure);
+              stop_locations.push(this.stoppage_container);
+              this.stop_locationss.push(this.stoppage_container);
+
+
+            }
+              // debugger;
+               console.log("initParking",stop_locations.length)
+            if (stop_locations.length > 0) {
+              // for(var l=0;l<stop_locations.length;l++){
+              //   this.parkingPOINTS.push(this.parkingPonit(fromtime,stop_locations,l))
+                // console.log("KSSSSSSSSS",this.parkingPOINTS)
+              // }
+              initParking();
+              // console.log("initParking")
+            } else {
+              // console.log("In Else part initParking",stop_locations)
+            }
+          })
+      }
+
+    }
+    
+    // console.log(totime)
+    this.latLongArr2 = [];
+    var customTxt;
+    var txt;
+    function geocodePosition(pos, callback) {
+      var geocoder = new google.maps.Geocoder();
+      geocoder.geocode({
+        latLng: pos
+      }, function (responses) {
+        callback(responses[0].formatted_address)
+
+      });
+    }
+    var k;
+    
+
+    function initParking() {
+      // console.log('counter + 5000',counter + 8000);
+      var ttVal = counter + 5000;
+        var callTimeout = setTimeout(()=>{
+       
+      isMapInit = true;
+      // ============================
+      // var pinImage = new google.maps.MarkerImage("https://png.icons8.com/office/30/000000/parking.png");
+      var pinImage = new google.maps.MarkerImage("../../assets/image/parkingPoint1.png");
+      var infowindow = new google.maps.InfoWindow();
+
+      // var marker: any;
+      var k: any;
+      var l: number
+     
+
+       console.log('stoppagelocationArr',stop_locations.length);
+       var index=stop_locations.length
+      for (l = 0; l < stop_locations.length; l++) {
+        index--;
+        outerThis.latitude = stop_locations[l][0];
+        outerThis.longitude = stop_locations[l][1];
+        outerThis.arrivalTime = new Date(stop_locations[l][2]).toLocaleString();
+        outerThis.departureTime = new Date(stop_locations[l][3]).toLocaleString();
+        outerThis.addresslocation = stop_locations[l][4];
+      
+        var fd = new Date(outerThis.arrivalTime).getTime();
+        var td = new Date(outerThis.departureTime).getTime();
+        var time_difference = td - fd;
+        var total_min = time_difference / 60000;
+        var hours = total_min / 60
+        var rhours = Math.floor(hours);
+        var minutes = (hours - rhours) * 60;
+        var rminutes = Math.round(minutes);
+        outerThis.Durations = rhours + ':' + rminutes
+      let  marker = new google.maps.Marker({
+          position: new google.maps.LatLng(stop_locations[l][0], stop_locations[l][1]),
+          map: outerThis.historyMap,
+          // icon: pinImage,
+          label: {color: '#000', fontSize: '12px', fontWeight: '600',
+      text: index.toString()}
+
+        });
+
+        google.maps.event.addListener(marker, 'dragend', function () {
+
+          this.geocodePosition(marker.getPosition());
+        });
+        outerThis.historyMap.setCenter(marker.getPosition());
+        // console.log(outerThis.parkingPonit(fromtime,stop_locations,l),'erueruu')
+        // outerThis.counter=l
+        
+        // setTimeout(function(){
+          var content = '<div><div> Arrival Time-: '
+          + outerThis.arrivalTime + '</div><br><div>Departure Time-: '
+          + outerThis.departureTime + '</div><br><div>Time Duration-: '
+          + outerThis.Durations + ' </div></br><div> Latitude-: '
+          + outerThis.latitude + ' </div></br><div> Longitude-: '
+          + outerThis.longitude + ' </div><br></div>'
+          // console.log("CONTENt",content)<div>Odo-:'+dataa+'
+          // },2000)
+          // var dataa
+          //  console.log(outerThis.fromTIME,outerThis.stop_locationss,outerThis.counter,"))))))))))))))))");
+              
+          //      outerThis.contactService.getDistance(outerThis.ddid, outerThis.fromTIME, (outerThis.stop_locationss[l][2]).toISOString(),outerThis.satelliteDisabled?outerThis.satelite:undefined).subscribe((data3:any) => {
+                  //  console.log("DADADADADADADAD--->",data3);
+          //          dataa=data3.Distance?data3.Distance:''
+          //         content=content+`<div>Odo-:`+ data3.Distance?data3.Distance:''+'</div>'
+          //      })
+
+        google.maps.event.addListener(marker, 'click', (function (marker,content, infowindow) {
+          return function () {
+      //       var dataa
+            // console.log(outerThis.fromTIME,outerThis.stop_locationss,outerThis.counter,"))))))))))))))))");
+            
+      //        outerThis.contactService.getDistance(outerThis.ddid, outerThis.fromTIME, (outerThis.stop_locationss[outerThis.counter][2]).toISOString(),outerThis.satelliteDisabled?outerThis.satelite:undefined).subscribe((data3:any) => {
+                //  console.log("DADADADADADADAD--->",data3);
+      //           dataa=data3.Distance?data3.Distance:''
+      //         //  return data3
+      // })
+      // setTimeout(function(){
+            // content=content+`<div>Odo-:`+ dataa+'</div>'
+            // console.log(content,"+++");
+            geocodePosition(marker.getPosition(), function (result) {
+              infowindow.setContent(content);
+              infowindow.open(map, marker, content);
+            });
+          // }, 2000);
+
+          }
+        })(marker, content, infowindow));
+       
+      }
+      clearTimeout(callTimeout);
+        },ttVal)
+      
+    }
+
+      function initialize() {
+      const myOptions = {
+        zoom:8,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+      map = new google.maps.Map(document.getElementById('map2'), myOptions);
+      // console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+      outerThis.historyMap = map;
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+     
+      isMapInit = true;
+
+      var zoomBar: any;
+      zoomBar = document.getElementById('myRange');
+      console.log(map.getZoom());
+      
+      map.setZoom(map.getZoom());
+
+    
+      zoomBar.value = map.getZoom();
+  
+      zoomBar.oninput = function () {
+        // console.log('zoomValue',map.getZoom());
+        map.setZoom(parseInt(this.value));
+      }
+
+      google.maps.event.addListener(map, 'zoom_changed', function (event) {
+        // console.log("Inside zoom in out function");
+        if (zoomBar.value)
+          zoomBar.value = map.getZoom();
+      });
+
+       
+
+    }
+
+    function toggleGeofence1(choice) {
+      // console.log(choice);
+      if (choice) {
+        outerThis.geoService(map);
+
+      }
+      else {
+        outerThis.removeGeofence();
+        outerThis.enableGeofenceComponent = !outerThis.enableGeofenceComponent;
+      }
+    }
+
+    this.toggleGeofence1 = toggleGeofence1;
+    var routePath;
+    var flightPath;
+    var allSourceDestinationMarkers = [];
+    var poiMarkers = [];
+    var allRoutePathPoints = [];
+
+    function routeDetails1(uId, choice) {
+
+      // console.log(uId);
+
+      if (choice) {
+        outerThis.contactService.getRouteDetail_path(uId)
+          .subscribe(res => {
+            // console.log("abcd2", res)
+            routePath = res;
+            showRoutes1();
+            outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+          });
+      }
+      else {
+        //removing Route source destination markers 
+        for (var i = 0; i < allSourceDestinationMarkers.length; i++) {
+          allSourceDestinationMarkers[i].setMap(null);
+        }
+        allSourceDestinationMarkers = [];
+        //removing Route points 
+        for (var i = 0; i < allRoutePathPoints.length; i++) {
+          allRoutePathPoints[i].setMap(null);
+        }
+        allRoutePathPoints = [];
+        outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+      }
+    }
+
+    var mapData, poiData;
+    var marker1;
+    this.routeDetails1 = routeDetails1;
+    function showRoutes1() {
+      // console.log(routePath[1].path);
+      //["skyblue","green","purple","orange","darkblue","yellow","red"]             
+      let colors = ['1E90FF', '28B463', '6C3483', 'D35400', '2C3E50', 'F1C40F', 'E74C3C'];
+      for (var j = 0; j < routePath.length; j++) {
+        //outerThis.dataArrayCoords = []; 
+        mapData = [];
+        for (var i = 0; i < routePath[j].path.length; i++) {
+          var arr = [];
+          arr.push(routePath[j].path[i].location.coordinates[1]);
+          arr.push(routePath[j].path[i].location.coordinates[0]);
+          //outerThis.dataArrayCoords.push(arr);
+
+          mapData.push({
+            "lat": routePath[j].path[i].location.coordinates[1],
+            "lng": routePath[j].path[i].location.coordinates[0]
+          });
+        }
+
+        // console.log(outerThis.dataArrayCoords);
+
+        // console.log(mapData[0]);
+        // console.log(mapData[mapData.length - 1]);
+
+        var colorForPath = colors[(j) % (colors.length)];
+        var strokeColor = "#" + colorForPath;
+        // console.log("j:" + j + "Color:" + strokeColor + " deno:" + (colors.length - 1) + "nume:" + (j + 1));
+
+        var sourceIcon = "http://www.googlemapsmarkers.com/v1/S/" + "009933" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage = new google.maps.MarkerImage(sourceIcon);
+       var marker = new google.maps.Marker({
+          position: mapData[0],
+          map: map,
+          icon: pinImage,
+          title: "Source"
+        });
+        allSourceDestinationMarkers.push(marker);
+        // console.log(allSourceDestinationMarkers);
+        
+
+        var destinationIcon = "http://www.googlemapsmarkers.com/v1/D/" + "FF3300" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage1 = new google.maps.MarkerImage(destinationIcon);
+        marker1 = new google.maps.Marker({
+          position: mapData[mapData.length - 1],
+          map: map,
+          icon: pinImage1,
+          title: "Destination"
+        });
+        allSourceDestinationMarkers.push(marker1);
+
+        flightPath = new google.maps.Polyline({
+          path: mapData,
+          geodesic: true,
+          strokeColor: strokeColor,
+          strokeOpacity: 1.0,
+          strokeWeight: 6
+        });
+        allRoutePathPoints.push(flightPath);
+        // console.log(mapData);
+        flightPath.setMap(map);
+        // console.log(flightPath);
+
+      }
+    }
+
+
+    function togglePOI1(choice) {
+      // console.log(choice);
+      if (choice) {
+        getPOIs1(this.useridd);
+      }
+      else {
+        removePOIs1();
+        outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+      }
+    }
+
+    this.togglePOI1 = togglePOI1;
+
+
+    var pois = [];
+    function getPOIs1(uId) {
+      outerThis.contactService.getPOI(uId)
+        .subscribe(res => {
+          // console.log("pois", res)
+          pois = res;
+          plotAllPOIs1();
+          outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+        });
+    }
+
+    function removePOIs1() {
+      for (var i = 0; i < poiMarkers.length; i++) {
+        poiMarkers[i].setMap(null);
+      }
+      poiMarkers = [];
+    }
+
+    function plotAllPOIs1() {
+
+      // console.log("PLOTING POIIIISISISISI")
+
+      for (var i = 0; i < pois.length; i++) {
+        //var arr = [];
+        poiData = [];
+        //arr.push(pois[i].poi.location.coordinates[1]);
+        //arr.push(pois[i].poi.location.coordinates[0]);
+
+        poiData.push({
+          "lat": pois[i].poi.location.coordinates[1],
+          "lng": pois[i].poi.location.coordinates[0]
+        });
+
+        var poiIcon="/assets/images/liveTrackIcons/building.jpg"
+        // var poiIcon="https://img.icons8.com/ios-filled/50/000000/building-with-rooftop-terrace.png"
+        // building.jpeg
+        // var poiIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
+        //"http://www.googlemapsmarkers.com/v1/P/" + "000000" + "/FFFFFF/000000/ ";//'/assets/images/poi.png';//colorForPath
+        var poiImage = new google.maps.MarkerImage(poiIcon);
+        var marker = new google.maps.Marker({
+          position: poiData[0],
+          map: map,
+          icon: poiImage,
+          title: pois[i].poi.poiname
+        });
+        poiMarkers.push(marker);
+
+        var infobox_numberPlate = new InfoBox({
+            content: "<div class='infobox' style='padding:2px;background:#575656;margin-left: -25px;'><small><b style='color: #ffffff;font-weight:300;font-size:12px;'>" + pois[i].poi.poiname + "</b></small></div>",
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+
+          infobox_numberPlate.open(map, marker);
+
+
+      }
+
+    }
+
+
+    var lineSymbol = {
+      path: 'M 0,-1 0,1',
+      strokeOpacity: 1,
+      scale: 4
+    };
+
+    var flightPath = new google.maps.Polyline({
+      geodesic: true,
+      strokeColor: '#0000FF',
+      strokeOpacity: 1.0,
+      strokeWeight: parseInt(this.thicknessVal),
+      icons: [{
+        icon: {
+          strokeColor: '#056608',
+
+          fillColor: '#056608',
+          strokeOpacity: 0.8,
+          strokeWeight: parseInt(this.thicknessVal),
+          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
+        },
+        offset: '0',
+        repeat: '100px'
+      }
+        // ,
+        // {
+        //   icon: {
+        //     strokeColor: '#FF0000 ',
+        //     fillColor: '#FF0000',
+        //     strokeOpacity: 0.8,
+        //     strokeWeight: parseInt(this.thicknessVal),
+        //     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
+        //   },
+        //   offset: '0',
+        //   repeat: '100px'
+        // }
+      ],
+
+    });
+
+
+    function zoomToObject(obj){
+    var bounds = new google.maps.LatLngBounds();
+    var points = obj.getPath().getArray();
+    for (var n = 0; n < points.length ; n++){
+        bounds.extend(points[n]);
+    }
+    map.fitBounds(bounds);
+}
+
+    this.parkingData(fromtime, totime,this.useridd,this.dev_id);
+
+    this.notificationData(fromtime, totime,this.useridd,this.dev_id);
+
+  }
+  parkingPonit(fromtime,stop_locations,l){
+    // console.log(fromtime,stop_locations,l,"--------------");
+    
+      var data
+    this.contactService.getDistance(this.ddid, fromtime, (stop_locations[l][2]).toISOString(),this.satelliteDisabled?this.satelite:undefined).subscribe((data3:any) => {
+        // console.log("DADADADADADADAD--->",data3.Distance);
+        data=data3
+        return data3
+      })
+    }
+
+
+  harshImpact(harshVal) {
+    // console.log('harshVal',harshVal)
+    if (harshVal < 3.5) {
+      var hStatus = 'Low'
+      return hStatus;
+    }
+    if ((harshVal >= 3.5) && (harshVal < 4.5)) {
+
+      var hStatus = 'Medium'
+      return hStatus;
+    }
+    if ((harshVal >= 4.5) && (harshVal < 5)) {
+
+      var hStatus = 'High';
+      return hStatus;
+
+    }
+    if (harshVal >= 5) {
+      // console.log('Severe');
+      var hStatus = 'SEVERE';
+      return hStatus;
+    }
+
+  }
+
+
+
+  ideal_time: any;
+  total_dis: any;
+  dis: Boolean = false;
+  avg_speed: any;
+  //Geofence
+  draw(zzz, yyy) {
+    // console.log('zzz', zzz,'yyy', yyy);
+    // console.log('yyy', yyy);
+    var map;
+    var infoWindow;
+
+    this.cordin = [];
+    let a = zzz.coordinates[0];
+    for (let k = 0; k < a.length; k++) {
+      let b = {
+        lat: a[k][1],
+        lng: a[k][0]
+      }
+      this.cordin.push(b);
+    }
+
+
+
+    var GeoFencCoords = this.cordin;
+    var GeoName = yyy
+
+    initMap(GeoFencCoords);
+    let outerThis = this;
+    function initMap(GeoFencCoords) {
+      map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 17,
+        center: { lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng },
+        mapTypeId: 'terrain'
+      });
+
+
+      var bermudaTriangle = new google.maps.Polygon({
+        paths: GeoFencCoords,
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 3,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35
+      });
+      bermudaTriangle.setMap(map);
+
+      // Add a listener for the click event.
+      bermudaTriangle.addListener('click', showArrays);
+
+      infoWindow = new google.maps.InfoWindow;
+
+    }
+
+    /** @this {google.maps.Polygon} */
+    function showArrays(event) {
+
+      var vertices = this.getPath();
+
+      var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+
+      infoWindow.setContent(contentString);
+      infoWindow.setPosition(event.latLng);
+
+      infoWindow.open(map);
+    }
+  }
+  device_imei = []
+  private socket_Geo;
+  data2: any;
+  //Get Device Imei
+  calldevice() {
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+
+    this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+
+      data => {
+        this.devicess = data
+
+
+        for (let i = 0; i < this.devicess.devices.length; i++) {
+
+          // if (this.devicess.devices[i].type_of_device == "Tracker") {
+
+            let a = {
+              did: this.devicess.devices[i].Device_ID,
+              dname: this.devicess.devices[i].Device_Name
+            }
+            this.device_imei.push(a);
+          }
+
+        // }
+        this.geoFenceaction(this.device_imei)
+      });
+  }
+
+  minToHoursConversion(num){
+   var hours = Math.floor(num / 3600);
+num %= 3600;
+var minutes = Math.floor(num / 60);
+var seconds = num % 60;
+//     var hours = (num / 60);
+//   var rhours = Math.floor(hours);
+//   var minutes = (hours - rhours) * 60;
+// var rminutes = Math.round(minutes);
+  return  hours + " hrs " + minutes + " min ";
+  }
+
+  //GeoFence Action
+
+  geoFenceaction(imei) {
+
+    for (let i = 0; i < imei.length; i++) {
+      // console.log(imei[i])
+
+      //this.socket_Geo.on(imei[i].did, (data,geo,a,c) => {
+
+      //  console.log(data);
+
+      /*   
+        if (data == "enter"){
+          let message = imei[i].dname+" entering in "+geo.geoname+" Geofence ";
+          let action = "Geofence Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        }
+        else if(data == "exit"){
+          let message = imei[i].dname+" exiting in "+geo.geoname+" Geofence ";
+          let action = "Geofence Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        }
+        else if(data == "speedLimit"){
+          let message = imei[i].dname+" Over Speeding";
+          let action = "Speed Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        } */
+      //})
+
+    }
+
+  }
+  new: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i;
+      input = document.getElementById("myInput");
+
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[0];
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          } else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+  share_id: any;
+  share_name: any;
+  vewdev(id, name, type, device) {
+    // console.log("Inside adddiv");
+    // console.log(id + name);
+    if (type == "Tracker") {
+      //this.router.navigateByUrl("location?_dname="+name+"_id="+id);
+      this.share_id = device;
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+        //  console.log("111111111133333");
+        this.livetrack(id)
+      }
+
+      
+
+    }
+    else {
+      this.router.navigateByUrl("account?_did=" + id + "." + name);
+    }
+  }
+
+  constructor(public elementRef: ElementRef, public dialog: MdDialog, public _ngZone: NgZone, public snackBar: MdSnackBar, private contactService: ContactService, private router: Router, private activatedRoute: ActivatedRoute, private _flashMessagesService: FlashMessagesService, private injectData: DatainjectionService) {
+
+    let mapLanguage = localStorage.getItem('appLang');
+    this.token_identifier = localStorage.getItem('referrer_token=');
+    // console.log('mapLanguage',mapLanguage);
+    if((mapLanguage == null)||(mapLanguage == undefined)){
+      mapLanguage  = 'en';
+    }
+    if(mapLanguage == 'sp'){
+      mapLanguage  = 'es';
+    }
+    if(mapLanguage == 'fa'){
+      mapLanguage  = 'fas';
+
+    }
+    if(mapLanguage == 'fr'){
+      mapLanguage  = 'fr';
+
+    }
+
+
+    // var script = document.createElement('script');
+    // script.setAttribute("type", "text/javascript");
+    // script.setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8&language=" + mapLanguage);
+    // document.getElementsByTagName("head")[0].appendChild(script);
+   
+   
+    let tblid;
+    let status = false;
+    var cuTime = new Date();
+
+    this.currentTime = moment(cuTime).format();
+  
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      this.navId = params['pageid'];
+    
+      if(this.navId === 'locationHistory'){
+        this.tabIndexValue = "2";
+        this.showHistory = true;
+        this.tab_1  = true;
+        this.tab_2 = true;
+        navigator.geolocation.getCurrentPosition(function (position) {
+          var myOptions = {
+            zoom: 18,
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+          var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+  
+          var marker = new google.maps.Marker({
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            map: mapHistory,
+            title: "Your current location!",
+          });
+  
+        })
+
+      }
+      // locationComponent
+    })
+
+ 
+
+  }
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  speeed: any;
+  mapp: boolean = true;
+  mappp: boolean = true
+  latLongArr: any[] = [];
+  latLongArr2: any[] = [];
+  latlongObjArr = [];
+  latlongObjArr2 = [];
+  map = [];
+  test2 = [];
+  lat: any;
+  lng: any;
+  hismap: boolean = false;
+  titleMarker: string;
+  f: any;
+  q: any;
+  dev: any;
+  drag: any;
+  im: any;
+  private socket;
+  titleMarker2: any
+  Math: any;
+  dname: any;
+  ddid: any;
+  mapOptions: any;
+  checker: any;
+  // ngAfterViewInit(){
+  //   this.child1.whoAmI();
+  // };
+  final: any;
+  devicess: any;
+  tblid: any;
+  flag2: boolean = false
+  useridd: any;
+  getData: any;
+  fin: any;
+  devicesss: any;
+  custtype: any;
+  cust: boolean = false;
+  // selectedValue: string = this.foods[0].value;
+
+  speedgauge() {
+    gra();
+    function gra() {
+      var gauge = new RadialGauge({
+        renderTo: 'canvas-id',
+        width: 300,
+        height: 300,
+        units: "Km/h",
+        minValue: 0,
+        startAngle: 90,
+        ticksAngle: 180,
+        valueBox: false,
+        maxValue: 220,
+        majorTicks: [
+          "0",
+          "20",
+          "40",
+          "60",
+          "80",
+          "100",
+          "120",
+          "140",
+          "160",
+          "180",
+          "200",
+          "220"
+        ],
+        minorTicks: 2,
+        strokeTicks: true,
+        highlights: [
+          {
+            "from": 160,
+            "to": 220,
+            "color": "rgba(200, 50, 50, .75)"
+          }
+        ],
+        colorPlate: "#fff",
+        borderShadowWidth: 0,
+        borders: false,
+        needleType: "arrow",
+        needleWidth: 2,
+        needleCircleSize: 7,
+        needleCircleOuter: true,
+        needleCircleInner: false,
+        animationDuration: 1500,
+        animationRule: "linear"
+      }).draw();
+    }
+
+  }
+  timer: any;
+  subscription: any
+  current_map: any
+  prev_map: any;
+  MapChecker() {
+    this.timer = Observable.timer(100, 100);
+    this.subscription = this.timer.subscribe(t => {
+      this.current_map = window.localStorage.mapLoad_ID;
+      if (!this.current_map) {
+
+      }
+      else if (this.current_map) {
+        if (!this.prev_map) {
+          this.MapLoad = true;
+          if (this.current_map == "True") {
+            if((this.navId === undefined)||(this.navId != 'locationHistory')){
+              //  console.log("111111111144444");
+              this.livetrack(null) ;
+            }
+          
+            this.prev_map = window.localStorage.mapLoad_ID;
+            this.showButton = true;
+          }
+          else {
+            // console.log(window.localStorage.mapLoad_ID);
+            if((this.navId === undefined)||(this.navId != 'locationHistory')){
+              //  console.log("111111115555555");
+              this.livetrack(window.localStorage.mapLoad_ID);
+            }
+           
+            this.prev_map = window.localStorage.mapLoad_ID;
+            this.showButton = true;
+          }
+
+        }
+        else if (this.prev_map == this.current_map) {
+
+        }
+        else if (this.current_map == "True") {
+          this.MapLoad = true;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+            //  console.log("11111111666666");
+            this.livetrack(null); 
+          }
+        
+          this.prev_map = window.localStorage.mapLoad_ID;
+          this.showButton = true;
+
+        }
+        else if (this.prev_map != this.current_map) {
+          this.MapLoad = true;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+            // console.log("1111111777777");
+            this.livetrack(window.localStorage.mapLoad_ID)
+          }
+        
+          this.prev_map = window.localStorage.mapLoad_ID;
+          this.showButton = true;
+        }
+      }
+    })
+  }
+  //  dataArrayCoordss = [];
+
+
+  mb: any
+  logoutbut: boolean;
+  dealer: boolean;
+  logo: any;
+  text: any;
+  datefrom = new Date();
+  gaugeString: any = 'PERCENTAGE';
+  gaugeDataticks: any = '0,20,40,60,80,100';
+  newFunction(){
+  
+  }
+  
+  ngOnInit() {
+   
+    window["angularComponentRef"] = { component: this, zone: this._ngZone };
+    this.socket = this.injectData.getSocket_gps();
+    this.socket.on('connect', function (this) { });
+
+    this.socket_Notify = this.injectData.getSocket_notifIO();          
+    this.socket_Notify.on('connect', function(this){ });
+
+    this.bsConfig = Object.assign({dateInputFormat: 'DD-MM-YYYY, h:mm:ss a'}, { containerClass: this.colorTheme });
+    // console.log('this.bsConfig',this.bsConfig);
+
+    
+    this.to = new Date().toISOString();
+    var d = new Date();
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+
+    this.reloadCOmponent = true;
+    this.date1 = new Date().setHours(0, 0, 0);
+    this.datefrom = new Date(this.date1)
+    // console.log(this.date1);
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.MapChecker();
+    this.mapOptions = {
+      zoom: 15,
+      center: { lat: 28.644800, lng: 77.216721 },
+      scrollwheel: true, // we disable de scroll over the map, it is a really annoing when you scroll through page
+      styles: [
+        { 'featureType': 'water', 'stylers': [{ 'saturation': 43 }, { 'lightness': -11 }, { 'hue': '#0088ff' }] },
+        {
+          'featureType': 'road', 'elementType': 'geometry.fill', 'stylers': [{ 'hue': '#ff0000' },
+          { 'saturation': -100 }, { 'lightness': 99 }]
+        },
+        {
+          'featureType': 'road', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#808080' },
+          { 'lightness': 54 }]
+        },
+        { 'featureType': 'landscape.man_made', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#ece2d9' }] },
+        { 'featureType': 'poi.park', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#ccdca1' }] },
+        { 'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': [{ 'color': '#767676' }] },
+        { 'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [{ 'color': '#ffffff' }] },
+        { 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] },
+        {
+          'featureType': 'landscape.natural', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' },
+          { 'color': '#b8cb93' }]
+        },
+        { 'featureType': 'poi.park', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.sports_complex', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.medical', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.business', 'stylers': [{ 'visibility': 'simplified' }] }
+      ]
+    };
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    var fuelvalue = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fuel_unit;
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).device_add_permission;
+    this.dev_by_dashboard = localStorage.getItem('devDetail');
+    this.adbtn = localStorage.getItem("dlrchk");
+
+    // console.log('this.dev_by_dashboard',this.dev_by_dashboard);
+
+    if (fuelvalue == "PERCENTAGE") {
+      this.gaugeString = 'PERCENTAGE';
+      this.gaugeDataticks = '0,20,40,60,80,100';
+      window.onload = function () {
+        // console.log("inside percentage");
+        var gaugeElement = document.getElementById('fuelgauge');
+        gaugeElement.setAttribute('data-units', 'PERCENTAGE');
+        gaugeElement.setAttribute('data-major-ticks', '0,20,40,60,80,100');
+        gaugeElement.setAttribute('data-max-value', '100');
+      };
+
+    } else {
+      this.gaugeString = 'LITRE';
+      // this.gaugeDataticks = '0,20,40,60,80,100';
+      // window.onload = function () {
+        // console.log("inside percentage");
+      //   var gaugeElement = document.getElementById('fuelgauge');
+      //   // gaugeElement.setAttribute('data-units', 'LITRE');
+      //   // gaugeElement.setAttribute('data-major-ticks', "0,80,160,240,320,400,480");
+      //   // gaugeElement.setAttribute('data-max-value', '480');
+      // }
+
+
+    }
+  
+
+    if (this.superAdmin == true) {
+      this.supadmin = this.useridd;
+    }
+    if (this.custtype == true) {
+      this.dealerid = this.useridd;
+    }
+
+    if (this.custtype == true) {
+      this.cust = true;
+
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+    this.online = true;
+    this.offline = false;
+    // this.checker  = 'OK';
+
+    window.localStorage['checker'] = 'Data'
+    // debugger;
+    // console.log("this.fin=>",this.fin);
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      this.getData = params['_dname'];
+      if (this.getData == undefined || this.getData == null) {
+        this.fin = null;
+      }
+      else {
+        // console.log("this.fin=>",this.fin);
+        this.fin = this.getData.split("=")[1];
+      }
+        // console.log(this.fin);
+
+    });
+
+    if(this.token_identifier != undefined){
+      this.fin = null
+
+    }
+    // console.log('this.fn', this.fin);
+
+
+    // var retrievedData = localStorage.getItem("devices");
+    // var cord = JSON.parse(retrievedData);
+
+    // this.final = cord
+    // console.log('this.fianl=>',this.final);
+    // for (let i = 0; i < this.final.length; i++) {
+    //   if (this.final[i].type_of_device == "Tracker") {
+    //     let a = {
+    //       value: this.final[i].Device_Name,
+    //       viewValue: this.final[i].Device_Name,
+    //       did: this.final[i].Device_ID,
+    //       id: this.final[i]._id,
+    //       user: this.final[i].user,
+    //       email: this.final[i].Email_ID,
+    //       deviceType: this.final[i].type_of_device,
+    //       iconType: this.final[i].iconType
+
+    //     }
+
+    //     this.foods.push(a);
+    //   }
+
+    // }
+    // this.livetrack(this.fin);
+    // for (let y = 0; y < this.foods.length; y++) {
+    //   if (this.foods[y].did == this.fin) {
+    //     this.new = this.foods[y];
+    //   }
+    // }
+
+
+    this.last_speed = localStorage.getItem('last_speed');
+    this.getAllDevice();
+    this.getGraphFunction()
+    // this.getDeviceBYfilter('');
+    this.getDevicebyIdComingFromDashboard();
+    this.getGeofence_1();
+    //  this.testMap()
+    this. getGrp()
+    this.modelChanged
+      .debounceTime(2000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+
+        var searchObj = JSON.parse(myInput);
+     
+        this.myInput = searchObj.str;
+        (searchObj.identifier == 'devSearch') ? this.getDeviceBYfilter('','') : this.getGeofence_1()
+  
+
+      });
+ this.getUserDetails();
+  $('addPOI').click(function() {
+            alert("GeeksForGeeks");
+        });
+    
+  }
+
+  // className:any;
+  ngOnDestroy() {
+    for (var e = 0; e < this.deviceToTrack.length; e++) {
+      this.socket.removeAllListeners(this.deviceToTrack[e])
+      localStorage.removeItem('mapLoad_ID');
+      localStorage.removeItem('mapLoad_Name');
+
+
+      //this.socket_Geo.removeAllListeners(this.deviceToTrack[e])
+    }
+
+    localStorage.removeItem('devDetail');
+    if(this.status_cmdq!=undefined){
+      clearInterval(this.status_cmdq)
+    }
+
+    if(this.intervalTimeOut!=undefined){
+      clearTimeout(this.intervalTimeOut);
+    }
+    
+    
+    window["angularComponentRef"] = null;
+
+
+    if( this.socket_Notify){
+      this.socket_Notify.removeAllListeners()
+    }
+
+  }
+
+  addpoi(lat) {
+    //  var lattitude =  JSON.parse(lat);
+    var latlng = JSON.stringify(lat).substring(1, lat.length - 1);
+    //  console.log(latlng);
+
+    var latt = latlng.split(',')[0];
+    var lng = latlng.split(',')[1];
+
+    //  console.log(latt);
+    //  console.log(lng);
+
+    var reqlatlng = {
+      lat: latt,
+      long: lng
+    }
+    let dialogRef = this.dialog.open(AddpoiBylocationComponent, {
+      width: '650px',
+      height: '700px',
+      data: { 'deviceData': reqlatlng }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // console.log(result);
+
+    })
+  }
+  disableSearch: boolean = false;
+  DriverName
+  DriverNumber
+  ac;
+  power;
+  todaysOdo=0;
+  fuelConsumption=0
+  getAllDevice() {
+    // this.Load = true;
+      
+    if (this.dev_by_dashboard != null) {
+      this.disableSearch = true
+      // console.log(this.disableSearch);
+      var search_1 = JSON.parse(this.dev_by_dashboard).vehicleId;
+    }
+
+    this.contactService.alldevices1(this.useridd, this.emailid, this.supadmin, this.dealerid, search_1)
+      .subscribe(res => {
+        this.deviceObj = [];
+     
+        var Alldevices = {
+          id: "all",
+          viewValue: "ALL Devices",
+          iconType: "",
+          deviceId: ""
+        }
+        if(res.devices.length==1){
+          this.selectedDevice=res.devices[0]._id
+          this.parkingButtonShow=res.devices[0].theftAlert==null?'grey':res.devices[0].theftAlert==undefined?'grey':res.devices[0].theftAlert==true?'green':'red'
+          this.DriverName=res.devices[0].driver_name;
+          // console.log("DRIVER NAME",this.DriverName,res.devices[0].ac);
+          this.ac=res.devices[0].ac?res.devices[0].ac:'NA'
+           this.power=res.devices[0].power?res.devices[0].power:'NA'
+           this.todaysOdo=res.devices[0].today_odo?res.devices[0].today_odo:0;
+           this.fuelConsumption=(res.devices[0].Mileage && res.devices[0].total_odo)?(res.devices[0].total_odo/res.devices[0].Mileage):0
+           this.DriverNumber=res.devices[0].contact_number
+        }
+        // console.log("device obj =>",res.devices);
+        this.deviceObj.push(Alldevices);
+        for (var i = 0; i < res.devices.length; i++) {
+          Alldevices = {
+            id: res.devices[i]._id,
+            viewValue: res.devices[i].Device_Name ? res.devices[i].Device_Name : "",
+            iconType: res.devices[i].iconType,
+            deviceId: res.devices[i].Device_ID
+          }
+          this.deviceObj.push(Alldevices)
+        }
+
+        this.final = res.devices;
+      
+        for (let i = 0; i < this.final.length; i++) {
+          this.final[i]['checked'] = true;
+          // this.deviceList = this.final;
+        
+          if (this.final[i].type_of_device == "Tracker") {
+            let a = {
+              value: this.final[i].Device_Name,
+              viewValue: this.final[i].Device_Name,
+              did: this.final[i].Device_ID,
+              id: this.final[i]._id,
+              user: this.final[i].user,
+              email: this.final[i].Email_ID,
+              deviceType: this.final[i].type_of_device,
+              iconType: this.final[i].iconType
+
+            }
+
+            this.foods.push(a);
+         
+          }
+
+        }
+        
+        // console.log('this.deviceList=>=>',this.deviceList);
+        let that= this;
+        if((this.navId === undefined)||(this.navId != 'locationHistory')){
+
+          // console.log(this.fin, this.fin);
+          // this.deviceList.filter((dl,index)=>{
+            // console.log(dl,index);
+          //   if(dl.Device_ID === this.fin){
+          //     that.deviceList[index]['checked'] = true;
+          //   } 
+          // })
+          // console.log("1111111188888");
+          this.livetrack(this.fin);
+        }
+       
+        for (let y = 0; y < this.foods.length; y++) {
+          if (this.foods[y].did == this.fin) {
+            this.new = this.foods[y];
+          }
+
+        }
+      }, err => {
+        // this.Load = false;
+        // console.log(err);
+      })
+  }
+
+  filterDevices(dlr) {
+    
+    // console.log("=========>",dlr,this.foods);
+    if (dlr.length == 0) {
+      this.deviceSelect = [];
+    }
+    if (dlr) {
+      const filterdealerValue: any = dlr;
+      this.deviceSelect = [];
+      if((this.navId === 'locationHistory')){
+        this.deviceSelect = this.foods.filter(function (pp) {
+          var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+          return t > -1;
+        });
+  
+        // this.buindhistoryDevice = this.deviceSelect;
+        // console.log("this.deviceSelectthis.deviceSelectthis.deviceSelect",this.deviceSelect);
+        return this.deviceSelect;
+
+      }else{
+        this.deviceSelect = this.deviceList.filter(function (pp) {
+          var t = pp.Device_ID.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+          return t > -1;
+        });
+  
+        this.buindhistoryDevice = this.deviceSelect;
+        // console.log("this.deviceSelectthis.deviceSelectthis.deviceSelect",this.deviceSelect);
+        // localStorage.setItem('devDetail',JSON.stringify({vehicleId:this.deviceSelect[0].did, 
+        // vehicleName: this.deviceSelect[0].value,
+        // vehicleType: this.deviceSelect[0].deviceType}))
+        // this.imei=this.deviceSelect[0].did
+        // console.log("IMEI===>",this.imei);
+        
+        return this.deviceSelect;
+      }
+ 
+    }
+  }
+  count: number = 0;
+  iconSelector(status, iconType, msg) {
+  
+
+    // var tempSpeed = msg.speed;
+    // var tempIgn = msg.ignition;
+    var iconUrl = "";
+    // if(status !="OUT OF REACH"){
+    //   if (((msg.speed != undefined) && (msg.speed != null)) && ((msg.ignition != null)&&(msg.ignition != undefined))) {
+    //     if (parseInt(msg.ignition) == 0) {
+    //       status = "STOPPED"
+    //     }
+    //     else if (msg.ignition == "1" && parseInt(msg.speed) > 0) {
+    //       status = "RUNNING";
+    //     } else {
+    //       status = "IDLING"
+    //     }
+    //   }
+    // }
+
+    if (status == "OUT OF REACH") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/obike.png';
+        return iconUrl;
+      }
+      if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/ocar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/obus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/otruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/otractor.png';
+        return iconUrl;
+      }  else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/ourjcb.png';
+        return iconUrl;
+      }
+      else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_b.png';
+        return iconUrl;
+      }
+    else {
+        iconUrl = '/assets/images/liveTrackIcons/user_b.png';
+        return iconUrl;
+      }
+
+    } else if (status == "STOPPED") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/sbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/scar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/sbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/struck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/stractor.png';
+        return iconUrl;
+      }else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/stoppedjcb.png';
+        return iconUrl;
+      }   else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_r.png';
+        return iconUrl;
+      }else {
+        iconUrl = '/assets/images/liveTrackIcons/user_r.png';
+        return iconUrl;
+      }
+    } else if (status == "RUNNING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/rbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/rcar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/rbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/rtruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/rtractor.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/images/liveTrackIcons/runningjcb.png';
+        return iconUrl;
+
+      }  else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_g.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    } else if (status == "IDLING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/ibike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/icar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/ibus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/itruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/itractor.png';
+        return iconUrl;
+      }else if(iconType == "jcb" ){
+        iconUrl = '/assets/images/liveTrackIcons/idlingjcb.png';
+        return iconUrl;        
+
+      } else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_y.png';
+        return iconUrl;
+      }  else {
+        iconUrl = '/assets/images/liveTrackIcons/user_y.png';
+        return iconUrl;
+      }
+    }else if (status == "NO DATA") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    }
+  }
+
+  playPause: boolean = true;
+  startCreatingFlightPath: boolean = false;
+  createTrip(dev) {
+    // console.log('devicedevicedevice=>', dev);
+
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+
+
+    var vehicleLatLng = {
+      lat: this.latToPass,
+      long: this.longToPass
+    }
+
+    var tttt = this;
+
+    DeviceObj['LatLng'] = vehicleLatLng;
+
+    let dialogRef = this.dialog.open(CreateTripComponent, {
+      width: '900px',
+      data: DeviceObj
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      var parseTripInfoString = JSON.parse(result);
+
+      if (parseTripInfoString.msg == "created") {
+        tttt.playPause = !tttt.playPause;
+        this.showSocketData = false
+        let action: any;
+        this.snackBar.open('Trip Created', action, {
+          duration: 5000,
+        });
+        tttt.getDevicebyId()
+        // tttt.drawFlightPath(result) ;
+      }
+    });
+  }
+
+  endTrip() {
+    // console.log("Inside function");
+    var bUrl = "https://www.oneqlik.in/user_trip/updatePlantrip";
+    var userId = this.useridd;
+    var startLat = this.EndTripStartLat;
+    var startLong = this.EndTripStartLong;
+    var endLat = this.latToPass;
+    var endLong = this.longToPass;
+    var duration = this.ETA;
+    var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(startLat, startLong), new google.maps.LatLng(this.latToPass, this.longToPass));
+    // console.log('distance',distance);
+    var trip_id = this.tripId;
+
+    var payload = {
+      "user": userId,
+      "device": this.IMEI,
+      "start_loc": {
+        "lat": startLat,
+        "long": startLong
+      },
+      "end_loc": {
+        "lat": endLat,
+        "long": endLong,
+      },
+      "duration": duration,
+      "distance": distance,
+      "trip_status": "completed",
+      "trip_id": trip_id
+    }
+
+    this.contactService.endTrip(payload).subscribe(res => {
+      this.playPause = !this.playPause;
+
+      let action: any;
+      this.snackBar.open('Current Trip Completed', action, {
+        duration: 5000,
+
+      });
+
+      this.ngOnInit();
+
+    }, err => {
+      // console.log(err);
+
+    })
+
+
+  }
+  IMEI: any;
+  getDevicebyId() {
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+    if (DeviceObj != undefined) {
+      // console.log('DeviceObj',DeviceObj);
+      this.contactService.getdevById(DeviceObj.vehicleId).subscribe((res:any) => {
+        // console.log("lastTripStatus",res);
+        // this.getLastTrip();\
+        var tempObj = JSON.parse(res['_body']);
+        this.distanceVariation=tempObj.distanceVariation?tempObj.distanceVariation:undefined
+        
+
+        this.IMEI = tempObj._id;
+
+        this.getLastTrip(this.IMEI);
+
+      }, err => {
+        // console.log(err);
+      })
+    } else {
+      // console.log('No trip found');
+    }
+
+
+  }
+
+  getLastTrip(imei) {
+    // console.log("IMEI==>",imei);
+    
+    this.contactService.getLastTripStatus('last_trip', 'Started', imei).subscribe(res => {
+      // console.log("lastTripStatus", res);
+      if (res.message != "No Trip Found") {
+        this.playPause = false;
+        this.tripId = res[0]._id;
+        this.drawFlightPath(JSON.stringify(res));
+      } else {
+        this.playPause = true;
+      }
+      var outerThis = this;
+      this.deviceList.filter(function (colHilight, i) {    
+        if (colHilight.Device_ID === imei) {
+          outerThis.deviceList[i].playPause = outerThis.playPause;
+        }
+      })
+    }, err => {
+      // console.log(err);
+    })
+  }
+
+  drawFlightPath(tripInfo) {
+    // console.log('tripInfo',this.mapNew);
+    this.directionsService = new google.maps.DirectionsService;
+    this.directionsDisplay = new google.maps.DirectionsRenderer({
+      // draggable: true,
+      map: this.mapNew,
+      suppressMarkers: true
+    });
+    google.maps.event.addListener(this.directionsDisplay, 'click', function (h) {
+      // console.log(h.latLng.lat(),h.latLng.lng());
+    });
+    // this.computeTotalDistance(this.directionsDisplay.getDirections());
+
+    this.directionsDisplay.addListener('directions_changed', function () {
+      // this.computeTotalDistance(this.directionsDisplay.getDirections());
+    });
+
+    var sourceLat;
+    var sourceLong;
+    var getDestPoint = JSON.parse(tripInfo);
+    // console.log('getDestPoint',getDestPoint);
+    if (this.latToPass == undefined) {
+      sourceLat = getDestPoint[0].start_lat;
+      this.EndTripStartLat = sourceLat;
+    } else {
+      sourceLat = this.latToPass;
+      this.EndTripStartLat = sourceLat;
+    }
+    if (this.longToPass == undefined) {
+      sourceLong = getDestPoint[0].start_long;
+      this.EndTripStartLong = sourceLong;
+    } else {
+      sourceLong = this.longToPass;
+      this.EndTripStartLong = sourceLong;
+    }
+    var sourcePoint = new google.maps.LatLng(sourceLat, sourceLong);
+    var that = this;
+    var end_location_lat = getDestPoint.reponse ? getDestPoint.reponse.doc.end_lat : getDestPoint[0].end_lat;
+    var end_location_long = getDestPoint.reponse ? getDestPoint.reponse.doc.end_long : getDestPoint[0].end_long;
+    //  console.log(sourceLat, sourceLong,end_location_lat,end_location_long);
+    var destPoint = new google.maps.LatLng(end_location_lat, end_location_long);
+    var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(sourceLat, sourceLong), new google.maps.LatLng(end_location_lat, end_location_long));
+    this.directionsService.route({
+      origin: sourcePoint,
+      destination: destPoint,
+      travelMode: 'DRIVING',
+      avoidTolls: true
+    }, function (response, status) {
+      if (status === 'OK') {
+        that.ETA = response.routes[0] ? response.routes[0].legs[0].duration.text : '';
+        // console.log("response",that.ETA);
+        that.directionsDisplay.setDirections(response);
+        that.ShowInfo(that.ETA, distance);
+      } else {
+
+        alert('Could not display directions due to: ' + status);
+      }
+    });
+
+
+  }
+
+  ShowInfo(eta, distance) {
+    var distanceInKm = distance / 1000;
+    let d = '<div class="infoB">' +
+      '<p class="DeviceHead1">' + 'TRIP INFO' + '</p>' +
+      '<div class="row rowTwo">' +
+      '<div class="col-sm-5">' +
+      "Total Distance" +
+      '</div>' +
+      '<div class="col-sm-7 leftPadding">' +
+      distanceInKm.toFixed(2) + " " + "Kms." +
+      '</div>' +
+      '</div>' +
+      '<div class="row rowOne">' +
+      '<div class="col-sm-5">' +
+      'ETA' +
+      '</div>' +
+      '<div class="col-sm-7 leftPadding">' +
+      eta +
+      '</div>' +
+      '</div>' +
+      '</div>'
+
+    // var customTxt = `<div style="display: contents;background: #ebebeb;border: 1px solid #dcd4d4; box-shadow: 2px 2px #cabdbd;"> <p style="border-bottom: 1px solid #c8c3c3;text-align: center;margin-bottom: 0px;">Detail</p> <table> <tbody> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Total Distance" style="padding-left: 1rem"><i class="fa fa-road" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+this.total_dis+`</td> <td style="padding-left: 1rem">Kms.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Running Time" style="padding-left: 1rem"><i style="color:green" class="fas fa-car"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem">Hrs.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Stoppage Time" style="padding-left: 1rem"><i style="color:red" class="fas fa-car"></i></td> <td style="padding-left: 1rem">`+this.ideal_time+`</td> <td style="padding-left: 1rem">Min.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Average Speed" style="padding-left: 1rem"><i class="fas fa-tachometer-alt" style="color:green"></i></td> <td style="padding-left: 1rem">`+this.avg_speed+`</td> <td style="padding-left: 1rem">Km/Hr</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="No. of Parking" style="padding-left: 1rem"><i class="fas fa-parking"></i></td> <td style="padding-left: 1rem">`+this.stoppageCount+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Max Speed" style="padding-left: 1rem"><i class="fa fa-tachometer-alt" style="color:red" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+this.maxSpeedd+`</td> <td style="padding-left: 1rem">Km/Hr</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Sudden Break" style="padding-left: 1rem"><i class="fas fa-stop"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Sudden Acceleration" style="padding-left: 1rem"><i class="fa fa-flag-checkered" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Fuel Consumption" style="padding-left: 1rem"><i class="fas fa-gas-pump"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem">Liter</td> </tr> </tbody> </table> </div>`
+    // that.mapNew.controls[google.maps.ControlPosition.LEFT_TOP].push(d);
+    var centerControlDiv = document.createElement('div');
+    var centerControl = new CenterControl(centerControlDiv, this.mapNew, d);
+    centerControl.zIndex = 1;
+    this.mapNew.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
+
+    function CenterControl(controlDiv, map, text) {
+
+      // Set CSS for the control border.
+      var controlUI = document.createElement('div');
+      controlUI.style.backgroundColor = '#fff';
+      controlUI.style.border = '2px solid #fff';
+      controlUI.style.borderRadius = '3px';
+      controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+      controlUI.style.cursor = 'pointer';
+      controlUI.style.marginBottom = '22px';
+      controlUI.style.textAlign = 'left';
+      controlUI.style.marginLeft = '11px';
+      controlUI.style.opacity = "0.9";
+      controlDiv.appendChild(controlUI);
+
+      // Set CSS for the control interior.
+      var controlText = document.createElement('div');
+      controlText.style.color = 'rgb(25,25,25)';
+      controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+      controlText.style.fontSize = '16px';
+      controlText.style.lineHeight = '38px';
+      controlText.style.paddingLeft = '5px';
+      controlText.style.paddingRight = '5px';
+      controlText.innerHTML = text;
+      controlUI.appendChild(controlText);
+
+      // Setup the click event listeners: simply set the map to Chicago.
+    }
+  }
+
+
+  idlePlot(fromtime, totime, deviceObjectid, min_time, map) {
+    this.contactService.ignitionPoint(this.useridd, fromtime, totime, deviceObjectid, min_time).subscribe(res => {
+      var ignPoint = res;
+      // console.log(ignPoint);
+
+      if (ignPoint.length > 0) {
+
+
+        for (var p = 0; p < ignPoint.length; p++) {
+
+          let idelImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + 'I' + "|FFFF00|000000");
+          let infowindow_idel = new google.maps.InfoWindow();
+          const myOptions = {
+            zoom: 15,
+            center: new google.maps.LatLng(18.602941, 73.777147),
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+
+
+
+          // isMapInit = true;
+
+          // ============================
+
+
+          var marker_idle: any, k: any;
+          var l: number
+
+          var latitude_idle = ignPoint[p].lat;
+          var longitude_idle = ignPoint[p].long;
+          var arrivalTime_idle = new Date(ignPoint[p].start_time).toLocaleString();
+
+          var departureTime_idle = new Date(ignPoint[p].end_time).toLocaleString();
+
+
+          // var fd_idle = new Date(arrivalTime_idle).getTime();
+          // var td_idle = new Date(departureTime_idle).getTime();
+          // var time_difference_idle = td_idle - fd_idle;
+          // var total_min_idle = time_difference_idle / 60000;
+          // var hours = total_min_idle / 60
+          // var minutes = (hours - rhours) * 60;
+          // var rhours = Math.floor(hours);
+          // var rminutes = Math.round(minutes);
+
+          var Durations_idle = this.millisecondConversion(ignPoint[p].idle_time)
+
+          marker_idle = new google.maps.Marker({
+            position: new google.maps.LatLng(ignPoint[p].lat, ignPoint[p].long),
+            map: map,
+            icon: idelImage,
+          });
+
+          var content_idle = '<div ><div> Idle Start-: '
+            + arrivalTime_idle + '</div><br><div>Idle End-: '
+            + departureTime_idle + '</div><br><div>Time Duration (HH:MM:SS)-: '
+            + Durations_idle + ' </div></br><div> Latitude-: '
+            + latitude_idle + ' </div></br><div> Longitude-: '
+            + longitude_idle + ' </div><div>'
+
+
+          google.maps.event.addListener(marker_idle, 'click', (function (marker, content_idle, infowindow_idel) {
+            return function () {
+              geocodePosition(marker.getPosition(), function (result) {
+                infowindow_idel.setContent(content_idle);
+                infowindow_idel.open(map, marker, content_idle);
+              });
+
+
+            }
+          })(marker_idle, content_idle, infowindow_idel));
+
+        }
+
+        marker_idle.setMap(map);
+      }
+
+    })
+
+    function geocodePosition(pos, callback) {
+      var geocoder = new google.maps.Geocoder();
+      geocoder.geocode({
+        latLng: pos
+      }, function (responses) {
+        callback(responses[0].formatted_address)
+
+      });
+    }
+
+  }
+
+  millisecondConversion(duration) {
+    // console.log('duration=>',duration)
+    // console.log(typeof(duration));
+    //  var milliseconds = ((duration % 1000) / 100);
+    var seconds = Math.floor((duration / 1000) % 60);
+    var minutes = Math.floor((duration / (1000 * 60)) % 60);
+    var hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    hours = (hours < 10) ? 0 + hours : hours;
+    minutes = (minutes < 10) ? 0 + minutes : minutes;
+    seconds = (seconds < 10) ? 0 + seconds : seconds;
+    // console.log(hours, minutes,seconds);
+    return hours + ":" + minutes + ":" + seconds;
+
+  }
+
+
+  // testMap(){
+
+  //   var markerPoint = new google.maps.LatLng(18.602941, 73.777147) ; 
+  //   const myOptions = {
+  //     zoom: 15,
+  //     center: new google.maps.LatLng(18.602941, 73.777147),
+  //     mapTypeId: google.maps.MapTypeId.ROADMAP
+  //   };
+
+  //  var testmap = new google.maps.Map(document.getElementById('testmap'), myOptions);
+
+
+  //   var icon1 = {
+  //     url: "./assets/image/activeCar.png", // url
+  //     scaledSize: new google.maps.Size(50, 50), // scaled size
+
+  //   };
+  //   var marker = new google.maps.Marker({
+  //     position: markerPoint,
+  //     map: testmap,
+  //     icon: icon1,
+  //     title: "Vehicle"
+  //   });
+
+  // }
+
+
+  AllVeh: any = [{ 'status': 'Running', 'totalCount': '0' }, { 'status': 'Idle', 'totalCount': '0' }, { 'status': 'Stopped', 'totalCount': '0' }, { 'status': 'Inactive', 'totalCount': '0' }, { 'status': 'No data', 'totalCount': '0' }]
+
+  deviceData = [
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7681',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7682',
+      'lastSpeed': '50',
+      'gpsIconColor': 'grey',
+      'acIconColor': 'green',
+      'powerIconColor': 'purple',
+      'gsmIconColor': 'blue',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7683',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'red',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'grey',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7684',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7685',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7686',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'grey',
+      'powerIconColor': 'green',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7687',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7688',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'green',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7689',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'grey',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'red'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7610',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7611',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7612',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    }
+
+
+
+  ];  
+  myInput: any;
+
+  updateLiveTracking(device,ev) {
+    this.showAddress=true
+    var that = this;
+    // this.openRightMenu()
+    if(device){
+        // console.log(device);
+         this.selectedDevice=device._id
+        this.parkingButtonShow=device.theftAlert==null?'grey':device.theftAlert==undefined?'grey':device.theftAlert==true?'green':'red'
+          this.DriverName=device.driver_name;
+          //  console.log("DRIVER NAME",this.DriverName,device.ac);
+           this.ac=device.ac?device.ac:'NA'
+           this.DriverNumber=device.contact_number
+
+        }
+   
+    console.log('this.markerArray________________________--',this.socketData);
+    this.showSocketData = true;
+    if(this.socketData)
+    this.socketData.date=new Date()
+    this.flightPathArr = [];
+    // localStorage.setItem('devDetail',device)
+    this.temptrackingDev = device.Device_ID;
+    var td= this.filterDevices(device.Device_ID);
+    this.tempDevInfo =td[0];
+    this.deviceList.filter((dl,index)=>{  
+      if(dl.Device_ID == device.Device_ID){
+        var ilock =that.deviceList[index].ignitionLock;
+        if((ilock === '1')&&(ev === 'lockchange')){
+        
+          that.deviceList[index].ignitionLock = '0';
+        }
+        if((ilock === '0')&&(ev === 'lockchange')){
+         
+          that.deviceList[index].ignitionLock = '1';
+        }
+        that.deviceList[index].checked = true;
+       
+      }else{
+        that.deviceList[index].checked = false;
+      }
+    
+    })
+    
+    
+    if((this.navId === undefined)||(this.navId != 'locationHistory')){
+      // console.log("1111111199999");
+      this.livetrack(device.Device_ID);
+    }
+    this.getLastTrip(device.Device_ID);
+  }
+
+  getVehColor(colorid, devicestatus) {
+
+    if (colorid == 'vehStatus') {
+      var devStatus = devicestatus.split(" ");
+      var styleColor = (devStatus[0] == 'OUT') ? 'blue' : (devStatus[0] == 'RUNNING') ? 'green' : (devStatus[0] == 'STOPPED') ? 'red' : (devStatus[0] == 'IDLING') ? 'yellow' : 'grey';
+
+      return styleColor;
+    }
+
+    if (colorid == 'gpsStatus') {
+
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'acStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'ignStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'powerStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'gsmStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+    }
+
+  }
+
+
+  getGraphFunction() {
+    this.contactService.getDashboard(this.emailid, this.from, this.to, this.useridd, this.groupId, this.supadmin, this.dealerid).subscribe(
+      data => {
+        // console.log("data===",data)
+        this.devicess = data;
+        this.total_vech = this.devicess.Total_Vech;
+        this.idle_vech = this.devicess["Ideal Devices"];
+        this.off_vech = this.devicess["OFF Devices"];
+        this.maintanance = this.devicess["Maintance Device"];
+        this.expiredDevices = this.devicess["expire_status"];
+        this.OutOfReach = this.devicess["OutOfReach"];
+        this.no_data = this.devicess["no_data"];
+        this.Running = this.devicess["running_devices"];
+        this.idle_duration = this.devicess.idle_duration;
+        this.off_duration = this.devicess.off_duration;
+
+        let a = this.idle_vech + this.off_vech + this.maintanance + this.OutOfReach
+        let b = this.total_vech - a;
+
+        // this.idle_ids = this.devicess.idle_name
+        // this.maintenance_ids = this.devicess.maintenance_name
+        // this.expired_ids = this.devicess.expire_name
+        // this.off_ids = this.devicess.off_name
+        // this.runnigg = this.devicess.runnig_name
+        // this.outofreach_ids = this.devicess.outOfReach_name
+        // this.alldevvice = this.devicess.All_Device_name
+        // this.no_gps_name = this.devicess.no_gps_name;
+        // this.id_running = this.devicess.running_id;
+        // this.id_stop = this.devicess.off_ids;
+        // this.id_out = this.devicess.outofreach_ids;
+        // this.id_main = this.devicess.maintenance_ids;
+        // this.id_idel = this.devicess.idle_ids;
+
+        // this.loading = this.devicess.running_details.forward.count;
+        // this.unloading = this.devicess.running_details.reverse.count;
+        // this.not_on_root = this.devicess.running_details.not_on_route.count;
+        this.AllVeh[0].totalCount = this.Running;
+        this.AllVeh[1].totalCount = this.idle_vech;
+        this.AllVeh[2].totalCount = this.off_vech;
+        this.AllVeh[3].totalCount = this.OutOfReach;
+        this.AllVeh[4].totalCount = this.no_data;
+        // console.log("DAtatatatat---",this.AllVeh);
+        
+
+      });
+  }
+  groupId: any;
+  skip: number = 0;
+  limit: number = 100;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  devReady:boolean=true;
+  groups=[]
+  getDeviceBYfilter(i,iden) {
+    // console.log('iden=>',iden);
+    this.currStatus = i;
+    if (i == 6) {
+      this.skip = 0;
+    }
+    var vehStatus: string;
+    if(i!=undefined){
+      vehStatus  = (i.toUpperCase() == 'INACTIVE') ? "OUT OF REACH" : (i.toUpperCase() == 'IDLE') ? "IDLING" : i.toUpperCase();
+    }else{
+      vehStatus = null;
+
+    }
+    
+    var status_1 = false;
+    if(iden === 'tclick'){
+      this.showSocketData = false;
+    
+    }
+    else{
+      this.showSocketData = true;
+    }
+    this.deviceList =[];
+    this.foods=[];
+    // console.log('this.navId',this.navId);
+    if(this.navId == 'locationHistory'){
+      iden='tclick';
+      this.devReady= false;
+      this.limit = 10000;
+    };
+  
+    // console.log('limitfgdfgdfgdgdgdgfdgfdgdgfdgfdgdfg',this.limit);
+    this.contactService.getDeviceByFilter_dash(vehStatus, this.emailid, this.useridd, this.skip, this.limit, this.myInput, this.supadmin, this.dealerid, status_1)
+      .subscribe(res => {
+        // console.log("INside devList");
+        var aaaa = res;
+        this.deviceList = aaaa.devices;
+
+        this.devReady= true;
+        if (this.deviceList.length === 0) {
+          this.lastcall = false;
+          this.firstcall = true
+        }
+        this.foods=[];  
+  
+        for (var k = 0; k < this.deviceList.length; k++) { 
+
+          // if(this.deviceList[k].vehicleGroup){
+          //   if(!this.groups.includes({name:this.deviceList[k].vehicleGroup.name,id:this.deviceList[k].vehicleGroup._id}))
+          //    this.groups.push({name:this.deviceList[k].vehicleGroup.name,id:this.deviceList[k].vehicleGroup._id})
+          // }
+        
+          this.deviceList[k]['playPause'] = true; 
+          this.deviceList[k]['checked']  =true;
+          if(iden === 'tclick'){
+            if (this.deviceList[k].type_of_device == "Tracker") {
+              let a = {
+                value: this.deviceList[k].Device_Name,
+                viewValue: this.deviceList[k].Device_Name,
+                did: this.deviceList[k].Device_ID,
+                id: this.deviceList[k]._id,
+                user: this.deviceList[k].user,
+                email: this.deviceList[k].Email_ID,
+                deviceType: this.deviceList[k].type_of_device,
+                iconType: this.deviceList[k].iconType,
+              //  checked: true 
+              }
+              this.foods.push(a);
+              if(k === (this.deviceList.length -1)){
+                // console.log("1111111110100000");
+                if(this.navId!='locationHistory')
+                {
+                  this.showSocketData=false
+                }
+                this.livetrack(null);
+              }
+             
+           
+            }
+
+          }
+         
+  
+          
+        }
+        if(this.deviceList.length==1){
+          this.selectedDevice=this.deviceList[0]._id
+          this.parkingButtonShow=this.deviceList[0].theftAlert==null?'grey':this.deviceList[0].theftAlert==undefined?'grey':this.deviceList[0].theftAlert==true?'green':'red'
+          this.DriverName=this.deviceList[0].driver_name;
+          //  console.log("DRIVER NAME",this.DriverName,this.deviceList[0].ac);
+           this.ac=this.deviceList[0].ac?this.deviceList[0].ac:'NA'
+           this.DriverNumber=this.deviceList[0].contact_number
+
+        }
+         this.selectAllVehicles({checked:true})
+
+        // console.log('this.deviceList',this.deviceList,'GROUP===',this.groups);
+     
+      })
+
+  }
+
+  getDevicebyIdComingFromDashboard() {
+    this.buindhistoryDevice = [];
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+    if (DeviceObj != undefined) {
+      this.contactService.getdevById(DeviceObj.vehicleId).subscribe((res:any) => {
+        var tempObj = JSON.parse(res['_body']);
+        this.distanceVariation=tempObj.distanceVariation?tempObj.distanceVariation:undefined
+        tempObj['checked']=true
+        // console.log('tempObjtempObjtempObjtempObj', tempObj);
+        this.temptrackingDev = tempObj.Device_ID;
+        this.buindhistoryDevice.push(tempObj);
+        this.deviceList.push(tempObj);
+        // console.log('this.deviceList', this.deviceList);
+      }, err => {
+        // console.log(err);
+      })
+    } else {
+      this.getDeviceBYfilter('','');
+    }
+  }
+
+
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    this.getDeviceBYfilter(this.currStatus,'tclick');
+  }
+
+  refresh() {
+    this.getGraphFunction();
+    this.getDeviceBYfilter(this.currStatus,'');
+  }
+
+  pre() {
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.getDeviceBYfilter(this.currStatus,'tclick');
+      this.lastcall = false;
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+  }
+
+
+  searchFilter(text: string, strID) {
+    // console.log(text);
+    var searchobj = {
+      str: text,
+      identifier: strID
+
+    }
+    var tempSearch = JSON.stringify(searchobj);
+    // console.log("Inside function");
+    this.modelChanged.next(tempSearch);
+
+  }
+
+  geoArr: any;
+  getGeofence_1() {
+    this.geoArr = [];
+    this.contactService.getallgeofence(this.useridd).subscribe(
+
+      data => {
+        this.geoArr = data
+        // console.log("this.geoArr this.geoArr this.geoArr", this.geoArr);
+        // this.geo_status = this.devicesss.status;
+
+      });
+  }
+
+  currentPage: any = 1;
+
+  getTab(ev) {
+
+    this.currentPage = ev;
+    this.playingHistory = false;
+    this.flag = '';
+    this.showHistory = false;
+    var outerThis = this;
+    if ((ev == 0) || (ev == 1)) {
+      clearTimeout(this.start);
+      this.historyDataCondition = false;
+      if (ev == 0) {
+        this.headingName = 'Live Tracking';
+        this.showSocketData = true;
+        if((this.navId === undefined)||(this.navId != 'locationHistory')){
+          // console.log("1111111111-11-");
+          this.livetrack(this.temptrackingDev);
+        }
+     
+        // this.refresh_map();
+      }
+      if (ev == 1) {
+        this.headingName = 'Geofences';
+        // this.refresh_map();  
+        this.showSocketData = false;
+
+      }
+    }
+    if (ev == 2) {
+      this.showHistory = true;
+
+      this.showSocketData = false;
+      this.headingName = 'History Tracking';
+      this.tempMapHistory = [];
+      this.dataArrayCoords = [];
+      if (this.buindhistoryDevice != undefined) {
+        if (this.buindhistoryDevice.length != 0) {
+          this.deviceName = this.buindhistoryDevice[0].Device_Name;
+        }
+        this.deviceSelect = this.buindhistoryDevice;
+      }
+      this.disableSearch = true;
+      navigator.geolocation.getCurrentPosition(function (position) {
+        var myOptions = {
+          zoom: 18,
+          center: {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          },
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+        var marker = new google.maps.Marker({
+          center: {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          },
+          map: mapHistory,
+          title: "Your current location!",
+        });
+
+      }
+      )
+    }
+  }
+
+  thicknessVal: any = '2px';
+  thicknessArr: any = ['2px', '3px', '4px', '5px', '6px', '7px', '8px', '9px', '10px'];
+  parkingColor: boolean = true;
+  idleColor: boolean = false;
+  dataColor: boolean = false;
+
+  changeColor(id) {
+    if (id === 'parking') { this.parkingColor = !this.parkingColor };
+    if (id === 'idle') { this.idleColor = !this.idleColor };
+    if (id === 'datapoint') { this.dataColor = !this.dataColor };
+  }
+
+  removetracks(id1, arrIndex) {
+    // console.log('id1', id1);
+    // console.log('arrIndex', arrIndex);
+    if ((id1 === 'all') && (arrIndex == null)) {
+      clearTimeout(this.start);
+
+      this.tempMapHistory = [];
+      this.playingHistory = false;
+      this.showTable = false;
+      this.coloumnClicked = false;
+      this.refresh_map();
+    }
+    if (id1 === 'single') {
+      clearTimeout(this.start);
+      this.tempMapHistory.splice(arrIndex, 1);
+      // console.log('this.tempMapHistory', this.tempMapHistory);
+      if (this.tempMapHistory.length === 0) {
+        this.refresh_map();
+        this.playingHistory = false;
+        this.showTable = false;
+        this.coloumnClicked = false;
+      }
+    }
+  }
+
+
+  refresh_map() {
+    navigator.geolocation.getCurrentPosition(function (position) {
+      var myOptions = {
+        zoom: 18,
+        center: {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        },
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+      var marker = new google.maps.Marker({
+        center: {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        },
+        map: mapHistory,
+        title: "Your current location!",
+      });
+
+    })
+  }
+
+  changeDate(dateid) {
+    var tempDate = new Date();
+
+    if (dateid == 'today') {
+      var td = new Date();
+      this.datefrom = new Date(td.setHours(0, 0, 0));
+      this.date2 = new Date();
+      // console.log('this.datefrom', this.datefrom);
+    }
+    if (dateid == 'yesterday') {
+      var yt = moment().subtract(1, 'days');
+      var ptt = new Date(yt).setHours(0, 0, 0);
+      this.datefrom = new Date(ptt);
+      var ttt = new Date(yt).setHours(23,59,59);
+      this.date2 = new Date(ttt);
+    
+      // console.log('this.datefrom', this.datefrom);
+    }
+    if (dateid == 'week') {
+      var wd = moment().startOf('week')
+      this.datefrom = new Date(wd);
+      // console.log('this.datefrom', this.datefrom);
+      this.date2 = new Date();
+    }
+    if (dateid == 'month') {
+      var md = moment().startOf('month').format();
+      this.datefrom = new Date(md);
+      // console.log('this.datefrom', this.datefrom);
+      this.date2 = new Date();
+
+    }
+  }
+  coloumnClicked = false;
+
+  plotHistory(arrindex) {
+
+    var ft1 = new Date(this.tempMapHistory[arrindex].fromTime)
+    var tt1 = new Date(this.tempMapHistory[arrindex].toTime)
+    this.datefrom = ft1;
+    this.date2 = tt1;
+
+    this.thicknessVal = this.tempMapHistory[arrindex].lineThickness;
+    this.idleColor = this.tempMapHistory[arrindex].idleColor;
+    this.parkingColor = this.tempMapHistory[arrindex].parkingColor;
+    this.dataColor = this.tempMapHistory[arrindex].dataColor;
+    this.coloumnClicked = true;
+
+    this.maphistory('');
+
+  }
+
+
+  engineCutStatus = '';
+  engineCut(device) {
+    this.engineCutStatus = device.ignitionLock;
+   
+    var identifyType = typeof (device.user);
+    var userId;
+    if (identifyType == 'string') {
+      userId = device.user;
+    } else {
+      userId = device.user._id;
+    }
+
+    var pload = { uid: userId }
+    // console.log(pload);
+    this.contactService.checkForPassword(pload).subscribe(res => {
+      // console.log('resres', res);
+      var engCutPass = res.engine_cut_psd;
+      if ((engCutPass == undefined)||(this.superAdmin ===true)||(this.custtype === true)) {
+        this.immobilizeDevice(device, this.engineCutStatus);
+      } else {
+        let dialogRef = this.dialog.open(ImmobilizeComponent, {
+          data: { engineCutpass: engCutPass }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+          if (result == "succ") {
+            this.immobilizeDevice(device, this.engineCutStatus);
+          }
+        });
+      }
+    })
+  }
+
+
+  immobilizeDevice(deviceObj, onOFFcmd) {
+    // console.log('deviceObj', deviceObj);
+    var deviceCommand = (onOFFcmd == '0') ? "OFF" : "ON";
+    var devModelId;
+
+    var identifyModelType = typeof (deviceObj.device_model);
+    var userId;
+    if (identifyModelType == 'string') {
+      devModelId = deviceObj.device_model;
+    } else {
+      devModelId = deviceObj.device_model._id;
+    }
+
+
+    this.contactService.getDeviceModelbyID(devModelId).subscribe(resModel => {
+      var deviceType = resModel[0].device_type;
+      // console.log('resModel', deviceType);
+      var cmdqueObj = {
+        "imei": deviceObj.Device_ID,
+        "_id": deviceObj._id,
+        "engine_status": onOFFcmd,
+        "protocol_type": deviceType
+      }
+
+      this.triggerCmd(cmdqueObj, deviceCommand)
+    })
+
+
+    // console.log("inside immobilize", deviceCommand);
+  }
+
+
+  callLiveTracking= 0;
+  triggerCmd(cmdObj, deviceCommand) {
+    // console.log("inside triggerCmd function");
+   var that = this;
+   this.callLiveTracking= 0;
+  //  var iurl = '../../assets/image/idle_bus.png';
+    // this.Load = true;
+    that.errIcon =false;
+    that.immobilizeCount = 45; 
+    that.immobilizeChk = true;
+    var timer = setInterval(()=>{
+      // console.log("that.immobilizeCount--",that.immobilizeCount--);
+      that.immobilizeCount--
+      // console.log('timer Value',that.immobilizeCount--);
+      if( that.immobilizeCount=== 0){
+        clearInterval(timer);
+      }
+    },1000)
+    this.contactService.addCommandQueue(cmdObj).subscribe(res => {
+      // this.Load = false;
+      // console.log(res);
+      var cmdQId = res._id;
+      // console.log('cmdQId', cmdQId);
+      this.intervalTimeOut = setTimeout(function(){
+        let message = "Please Try After Sometime";
+        // let action
+        // that.snackBar.open(message, action, {
+        //   duration: 4000,
+        
+        // });
+        that.errIcon =true;
+        that.showErr  = true;
+        that.ImmErrMsg = message ; 
+        that.shoError = setTimeout(()=>{
+             that.immobilizeChk = false;
+             that.showErr = false;
+            clearTimeout(that.shoError)
+        },5000)
+            clearInterval(that.status_cmdq);
+            clearTimeout(that.intervalTimeOut);    
+
+            clearInterval(timer);
+      },45000)
+
+      that.status_cmdq = setInterval(function () {
+        that.contactService.getEngineCutStatus(cmdQId)
+          .subscribe(res => {          
+          that.locked = false;
+          that.unlocked = false;
+            if (res.status == "SUCCESS") {
+              that.Load = false;
+              var cc = ''
+              if(deviceCommand === 'ON'){
+                cc = 'UNLOCKED';
+                that.unlocked = true;
+              }
+              if(deviceCommand === 'OFF'){
+                cc = 'LOCKED';
+                that.locked = true;
+              }
+              let message = 'Vehicle' + ' ' + cc;
+              // let action;
+              // that.snackBar.open(message, action, {
+              //   duration: 4000,
+              // });
+              that.showErr  = true;
+              that.ImmErrMsg = message ;           
+               that.shoError = setTimeout(()=>{
+                   that.immobilizeChk = false;
+                   that.showErr = false;
+                  clearTimeout(that.shoError);
+              },5000)
+              // console.log("Console after Getting success",that.callLiveTracking);
+       
+              if(that.callLiveTracking === 0){
+                that.callLiveTracking = 1; 
+              
+                that.deviceCQ(cmdObj.imei);
+                that.updateLiveTracking(cmdObj.imei,'lockchange');
+                // that.refresh();
+              
+              }
+           
+              clearInterval(timer);
+              clearTimeout(that.intervalTimeOut)
+              clearInterval(that.status_cmdq);
+              // that.immobilizeChk = false;
+              // that.Load = false
+          
+            }
+          }, err => {
+            that.errIcon =true;
+            let message = "Please Try After Sometime";
+            that.showErr  = true;
+            that.ImmErrMsg = message ; 
+             that.shoError = setTimeout(()=>{
+                 that.immobilizeChk = false;
+                 that.showErr = false;
+                clearTimeout(that.shoError)
+            },5000)
+            let action;
+            that.immobilizeChk = false;
+            clearInterval(timer);
+            // that.snackBar.open(message, action, {
+            //   duration: 4000,
+            // });
+            clearInterval(that.status_cmdq);
+            clearTimeout(that.intervalTimeOut)
+          })
+      }, 3000);
+    })
+  }
+
+
+
+  addressConversion(msg) {
+
+    var outerThis = this;
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+
+    var request = {
+      latLng: latlng
+    };
+    // console.log('latlongVal', request)
+    geocoder.geocode(request, function (data, status) {
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          outerThis.liveAdd = data[0].formatted_address;
+          // console.log(outerThis.liveAdd);
+        } else {
+          // console.log("No address available")
+          outerThis.liveAdd = "No address available";
+        }
+      }
+      else {
+        outerThis.liveAdd = 'NA';
+      }
+
+    })
+  }
+
+
+  armDisarm(deviceObj, action) {
+    // console.log('arm disarm');
+    var devimei = deviceObj.Device_ID;
+    var command = (action === 'on') ? 'ARM' : 'DISARM'
+
+    var armDisarmPayload = {
+      "imei": devimei,
+      "cmd": command,
+    }
+
+    var devModelId_1;
+    var identifyModelType = typeof (deviceObj.device_model);
+
+    if (identifyModelType == 'string') {
+      devModelId_1 = deviceObj.device_model;
+    } else {
+      devModelId_1 = deviceObj.device_model._id;
+    }
+    this.contactService.getDeviceModelbyID(devModelId_1).subscribe(resModel => {
+      var deviceType = resModel[0].device_type;
+      armDisarmPayload["protocol_type"] = deviceType;
+      this.triggerArmDisarm(armDisarmPayload);
+
+    })
+  }
+
+
+  triggerArmDisarm(ardPayload) {
+    this.Load = true;
+    this.contactService.armDisarm(ardPayload).subscribe(res => {
+      this.Load = false;
+
+      let message = (ardPayload.cmd == "ARM") ? 'Activated' : 'Deactivated';
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+      });
+      var str = (this.currStatus == undefined) ? '' : this.currStatus;
+      this.getGraphFunction();
+      this.getDeviceBYfilter(str,'');
+
+    }, err => {
+      this.Load = false;
+      // console.log(JSON.parse(err._body));
+      let errMsg = err._body ? JSON.parse(err._body).message : "Plaese Try After Sometime";
+      let action
+      this.snackBar.open(errMsg, action, {
+        duration: 4000,
+      });
+    })
+  }
+
+  enableMapTrail(){
+    this.enabletrail = !this.enabletrail; 
+    if(this.enabletrail == false){
+      this.flightPathArr = [];
+      // this.flightPath_live = new google.maps.Polyline({
+      //   path: this.flightPathArr,
+      //   geodesic: true,
+      //   strokeOpacity: 1.0,
+      //   strokeColor: "#0000FF",
+      //   strokeWeight: 6
+      // });
+    
+      this.flightPath_live.setMap(null);
+
+    }else{
+      var a = []
+      this.draw_flight_trail(a);
+    }
+
+    
+    
+    
+  }
+  flightPath_live:any
+  elm=0
+  draw_flight_trail(flightPathArr){
+    var tempTimeInterval ; 
+    var that = this;
+  var time=6000;
+  // if(that.elm>0){
+  //   time = 30000
+  // }
+  //   that.elm++;
+    if(flightPathArr.length != 0){
+      console.log("ARRAY", flightPathArr);
+      
+      if(that.elm){
+        flightPathArr.splice(0, 0, that.elm)
+        flightPathArr.join()
+      }
+      console.log("ARRAY", flightPathArr);
+      that.elm = flightPathArr[flightPathArr.length - 1];
+
+      flightPathArr.splice(flightPathArr.length - 1,1);
+      console.log("ARRAY2", flightPathArr);
+      clearTimeout(tempTimeInterval);
+      tempTimeInterval = setTimeout(function(){
+      that.flightPath_live = new google.maps.Polyline({
+        path: flightPathArr,
+        geodesic: true,
+        strokeColor: "#0000FF",
+        strokeOpacity: 1.0,
+        strokeWeight: 6
+      });
+      // console.log(mapData);
+      that.flightPath_live.setMap(that.mapNew);
+     },time) 
+     
+    }
+  
+
+  }
+
+
+  saveAddress(lat,lng,address){
+    var addressObj = {
+    "lat":lat,
+    "long":lng,
+    "address":address
+  }
+    this.contactService.saveAdd(addressObj).subscribe(res=>{
+      // console.log(res);
+    },err=>{  
+      // console.log("couldn't save address");
+    })
+
+  }
+
+  convertDate(utcDate){
+    var convertedDate:any;
+    if(utcDate != undefined){
+      convertedDate = new Date(utcDate).toLocaleString();
+    }else{
+      convertedDate = '';
+    }
+    
+    return convertedDate ;
+  }
+  devIcon : any;
+  iconCheck(status, iconType) {
+    
+
+    var devStatus = status.split(" ");
+    if ((iconType == 'car') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    }  else if ((iconType == 'car') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bike.png";
+      return this.devIcon;
+      // }
+    }  else if ((iconType == 'bike') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/bus_out.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/bus_running.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/bus_stop.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bus.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'bus') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'truck') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/our_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_truck.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'truck') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'tractor') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/tractor_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/tractor_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/tractor_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/tractor_yellow.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'ambulance') && (devStatus[0] == "OUT")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "RUNNING")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_g.png";
+      return this.devIcon;  
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "STOPPED")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "IDLING")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_y.png";
+      return this.devIcon;      
+    } 
+    else if ((iconType == 'tractor') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if((!iconType)&&(devStatus[0] == "OUT")){
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if((!iconType)&&(devStatus[0] == "RUNNING")){
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "STOPPED")){
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "IDLING")){
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    }else if ((!iconType) && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }else if ((iconType == 'user') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/user_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/user_g.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/user_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/user_y.png";
+      return this.devIcon;
+      
+    }else if ((iconType == 'user') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'jcb') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/jcb_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/jcb_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/jcb_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/jcb_yellow.png";
+      return this.devIcon;
+      
+    }
+    else if ((iconType == 'jcb') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }else{
+      this.devIcon = "../../assets/image/noIcon.png";
+      return this.devIcon
+    }
+  }
+
+  locationShare(device){
+
+    let dialogRef = this.dialog.open(ShareLocComponent, {
+      width:'500px',
+      data: { deviceObject: device }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "succ") {
+        this.data_descip = "Location Shared" ;     
+        // this.immobilizeDevice(device, this.engineCutStatus);
+      }
+      function launch_toast() {
+        // console.log(divid);
+        var x = document.getElementById("toast")
+        // console.log(x);
+        x.className = "show";
+        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+      }
+    });
+  }
+
+
+  getAddress(lat,lng){
+  
+    var latlng_1 =
+    {
+      "lat": lat,
+      "long":  lng
+    }
+    this.contactService.getAddressByApi(latlng_1).subscribe(res=>{     
+          if(res.address != undefined){
+            this.historyAdress  = res.address ; 
+          }
+       })
+  }
+
+getSystemLogs(imeiObj){
+  var tDate = new Date();
+  tDate.setSeconds(0);
+  tDate.setMilliseconds(0);
+  var fDate =  new Date().setHours(0,0,0,0);
+  var payLoad = {
+    "draw": 5,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "imei"
+      },
+      {
+        "data": "date"
+      },
+      {
+        "data": "latDecimal"
+      },
+      {
+        "data": "longDecimal"
+      },
+      {
+        "data": "insertionTime"
+      },
+      {
+        "data": "syncedAt"
+      },
+      {
+        "data": "integrationResponse"
+      },
+      {
+        "data": "speed"
+      },
+      {
+        "data": "ac"
+      },
+      {
+        "data": "currentFuel"
+      },
+      {
+        "data": "raw"
+      },
+      {
+        "data": "ignition"
+      },
+      {
+        "data": "power"
+      },
+      {
+        "data": "fuelVoltage"
+      },
+      {
+        "data": "rawio"
+      },
+      {
+        "data": "external_Battery"
+      },
+      {
+        "data": "powerCutAlarm"
+      },
+      {
+        "data": "satellites"
+      }
+    ],
+    "order": [
+      {
+        "column": 4,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": 100,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": {
+      "imei": imeiObj.Device_ID,
+      "insertionTime": {
+        "$gte": {
+          "_eval": "date",
+          "value": new Date(fDate).toISOString() 
+        },
+        "$lte": {
+          "_eval": "date",
+          "value": tDate.toISOString()
+        }
+      }
+    }
+  }
+  var suburl = '/gps/datatable';
+ 
+  this.contactService.post(suburl, payLoad).subscribe(resp => {
+      // console.log(resp);
+      var tempLog = resp;
+      this.gpsDataArr=[];
+      this.gpsDataArr = resp['data'];
+      for(var i=0;i<this.gpsDataArr.length;i++){
+        if(typeof(this.gpsDataArr[i].integrationResponse)=='object'){
+         this.gpsDataArr[i].integrationResponse= JSON.stringify(this.gpsDataArr[i].integrationResponse)
+        } 
+
+      }
+      // console.log('this.gpsDataArr',this.gpsDataArr);
+  }, err => {
+  
+  });
+
+}
+dcqData= [];
+deviceCQ(imeiObj){
+  var imei = imeiObj.Device_ID?imeiObj.Device_ID:imeiObj ;
+  this.dcqData =[];
+  this.contactService.deviceCmdQueue(imei).subscribe(resp => {  
+      var tempLog = resp;
+      this.dcqData = resp;   
+  }, err => {
+    this.dcqData =[];
+  });
+
+}
+
+
+historySeekbaar(){
+ 
+}
+
+
+changeSpeed(t){
+  // console.log(t);
+  this.speed = t * 100;
+  var header = document.getElementById("myDIV");
+  var btns = header.getElementsByClassName("sc-bdVaJa");
+  for (var i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+    });
+  }
+}
+
+
+nearByValue:number= 1000 ;
+changeRangeNearby(){
+  var rangeVal1 = document.getElementById("nearbySlider");
+  this.nearByValue = rangeVal1['value'] ; 
+}
+
+
+getNearByVehicles(devData){
+  // console.log(devData);
+  var payLoad = {
+    uid : this.useridd,
+    distance : this.nearByValue,
+    coord: {lat : devData.latDecimal,long:devData.longDecimal}
+  }
+  this.contactService.getNearByVehicles(payLoad).subscribe(res=>{
+    // console.log(res);
+    this.deviceList=[];
+    this.deviceList = res; 
+    if(this.deviceList.length != 0){
+      if (this.deviceList.length === 0) {
+        this.lastcall = false;
+        this.firstcall = true
+      }
+      this.foods=[];  
+      for (var k = 0; k < this.deviceList.length; k++) {    
+        this.deviceList[k]['playPause'] = true;   
+        this.deviceList[k]['checked'] = true;   
+          if (this.deviceList[k].type_of_device == "Tracker") {
+            let a = {
+              value: this.deviceList[k].Device_Name,
+              viewValue: this.deviceList[k].Device_Name,
+              did: this.deviceList[k].Device_ID,
+              id: this.deviceList[k]._id,
+              user: this.deviceList[k].user,
+              email: this.deviceList[k].Email_ID,
+              deviceType: this.deviceList[k].type_of_device,
+              iconType: this.deviceList[k].iconType,
+        //      checked:true
+
+            }
+            this.foods.push(a);
+            if(k === (this.deviceList.length -1)){
+              // console.log("1111111121212");
+              this.livetrack(null);
+            }
+         
+          }   
+      }
+      // console.log('this.deviceList',this.deviceList);
+    }else{
+      this.data_descip = "No Nearby Devices Found !!!";
+      launch_toast();
+
+    }
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      // console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    }
+  })
+}
+
+   directionShow(deviceObj) {
+          var lat = deviceObj.last_location.lat;
+          var long  = deviceObj.last_location.long;
+           
+          var url ="https://www.google.com/maps/dir/?api=1&destination="+lat+","+long+"&travelmode=driving";
+               window.open(url, '_blank');
+   }
+
+   getStringifyio(rawio){
+     console.log('askdjsahdiasjdasdlkasdjasdlkadjajldadadaa',rawio);
+     return JSON.stringify(rawio);
+
+   }
+
+
+
+   viewStreet(){
+     console.log("Street View");
+
+   }
+
+
+   triggerDeviceCmd(dev){
+     console.log('device Object',dev);
+    //  CmdUIComponent
+     let dialogRef = this.dialog.open(CommandWindowComponent, {
+      width:'500px',
+      data: { deviceObject: dev }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "succ") {
+        this.data_descip = "Command Successfully Triggered" ; 
+        launch_toast()    
+     
+      }
+
+      if(result == "openOther"){
+        let dialogRef_1 = this.dialog.open(CmdUIComponent, {
+          width:'500px',
+          data: { deviceObject: dev }
+        });
+        dialogRef_1.afterClosed().subscribe(result => {
+          if(result === 'cancel'){
+            // console.log('Working Fine');
+          }
+
+          if(result === 'succ'){
+            this.data_descip = 'Command Triggered Successfully';
+            launch_toast();
+          
+          }
+        })
+      }
+      function launch_toast() {   
+        var x = document.getElementById("toast");
+        x.className = "show";
+        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+      }
+    });
+
+   }
+   parkingArr = [];
+
+  parkingData(fTime, tTime,uid,dev){
+
+ 
+    // console.log('fTime, tTime,uid,dev',fTime, tTime,uid,dev);
+    var fd = new Date(fTime);
+    var td= new Date(tTime);
+    var userid=(dev.user._id != undefined)?dev.user._id:dev.user;
+    var device_imei=dev._id;
+  
+    this.contactService.stoppage_report(fd.toISOString(),td.toISOString(),userid,device_imei).subscribe(res=>{
+      this.parkingArr =[] ;
+      this.parkingArr =res ;
+      
+      // console.log('response=>',res);
+    },err=>{
+      this.parkingArr =[] ;
+    })
+
+
+  }
+
+  notifArray=[];
+  bulkVar:any;
+  notificationData(fTime, tTime,uid,dev){
+    // console.log('fTime, tTime,uid,dev',fTime, tTime,uid,dev);
+    // console.log('Inside notification');
+    var fd = new Date(fTime);
+    var td= new Date(tTime);
+    var userid=(dev.user._id != undefined)?dev.user._id:dev.user;
+    // var userid:any;
+    // console.log(dev);
+    var device_imei= dev.Device_ID;
+   
+      var skip = 1;
+      var limit = 200;
+      // console.log('what is skip here',skip);
+     
+  this.contactService.filteredNotifications(fd,td,this.bulkVar,device_imei,userid,skip,limit)
+  .subscribe(res=>{
+    // console.log('res=>',res);
+    this.notifArray = [];
+    this.notifArray = res;
+    // console.log('this.notifArray',this.notifArray);
+
+  },err=>{
+    this.notifArray = [];
+  })
+  }
+
+
+
+  getDuration(atime,dtime){
+    let arrival_time = new Date(atime).toLocaleString();                 
+    let departure_time = new Date(dtime).toLocaleString();
+    var fd = new Date(arrival_time ).getTime();
+    var td = new Date(departure_time).getTime();
+    var time_difference = td-fd;
+    var total_min = time_difference/60000;
+    var hours = total_min/60
+    var rhours = Math.floor(hours);
+    var minutes = (hours - rhours) * 60;
+    var rminutes = Math.round(minutes); 
+    let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+    return Durations;
+  }
+
+  getAlink(lat,lng){
+    //  lat +","+lng +
+    //  https://maps.google.com/?q=
+
+   var addressLink = "https://maps.google.com/?q=" +lat +',' +lng;
+    return addressLink; 
+  }
+
+
+  liveEventsData:any=[];
+  nType:any;
+  getRecentNotification(colObj){
+  var  fd= new Date();
+  fd.setHours(0,0,0,0);
+  var fromD = new Date(fd);
+  var td = new Date();
+  // var user =  colObj.user; 
+  var user=(colObj.user._id != undefined)?colObj.user._id:colObj.user;
+  var did=  colObj.Device_ID
+
+    // console.log('Inside get Notification Function',this.deviceSelect);
+    var skip=1;
+    var limit = 200;
+    // console.log('what is skip here',skip);
+    this.contactService.filteredNotifications(fromD,td,this.nType,did,user,skip,limit).subscribe(res=>{
+      // console.log('Inside get Notification Function',did);
+        this.liveEventsData=[];
+        this.liveEventsData = res;
+        this.socket_Notify.on(this.useridd, this.accListener());
+    },err=>{
+      this.liveEventsData =[];
+    })
+
+  }
+
+  accListener(){
+    // console.log('this is accListner');
+    var outerThis = this;
+    return function(msg){
+        // console.log('message=>',msg);
+        // console.log('message=>',msg.device , this.deviceSelect);
+      if (this.deviceSelect){
+
+        if(msg.device == this.deviceSelect[0].Device_ID){
+          // this.liveEventsData.push(msg);
+          this.liveEventsData.splice(0, 0, msg);
+        }
+      }
+
+        // console.log('accListner=>',this.liveEventsData)
+   
+    }
+
+  }
+
+
+  addVehicle(){
+    var that= this;
+    let dialogRef = this.dialog.open(AddDeviceComponent, {
+      width: '800px',
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "added") {
+        // that.refresh();
+        that.tost1("added");
+      }
+    });
+  }
+  checkBoxValue1(event){
+    // console.log(event);
+    this.satelliteDisabled=event.checked
+  }
+
+  checkBoxValue(ev,i){
+    // console.log('event=>',ev);
+    // console.log('index=>',i);
+    // console.log('this.markerArray[i]',this.markerArray[i]);
+    var indexSwitch = (this.markerArray[i]===undefined)?0:i; 
+    // console.log(indexSwitch);
+    // console.log(this.markerArray[indexSwitch].lat, this.markerArray[indexSwitch].lng);
+    // console.log('this.markerArray',this.markerArray);                 
+    if(ev.checked === false){
+      this.markerArray[indexSwitch].marker.setMap(null);
+      // this.markerArray[i] ={};
+    }
+    if(ev.checked === true){
+      this.markerArray[indexSwitch].marker.setMap(null);
+      var m = new google.maps.Marker({
+        position: new google.maps.LatLng(this.markerArray[indexSwitch].lat, this.markerArray[indexSwitch].lng),
+        map: this.mapNew,
+        icon: this.markerArray[indexSwitch].icon,   
+      });
+      this.markerArray[indexSwitch].marker = m;
+      this.mapNew.setCenter({ lat: this.markerArray[indexSwitch].lat, lng: this.markerArray[indexSwitch].lng });
+      if(this.markerArray[indexSwitch].number_plate)
+      this.markerArray[indexSwitch].number_plate.open(this.mapNew, this.markerArray[indexSwitch].marker);
+      var that = this;
+
+      this.markerArray[indexSwitch].marker.addListener('click',function(){
+
+        // console.log('inside test function');
+       
+        that.markerArray[i].infowindow.open(that.mapNew, that.markerArray[i].marker);
+        
+      });
+      // this.markerArray[indexSwitch].marker.addListener(this.markerArray[i].infowindow, 'click', function () {
+        // console.log('inside info click');
+      //   that.markerArray[i].infowindow.open(that.mapNew, that.markerArray[i].marker);
+      // });
+    }
+   
+  var that= this;
+    this.deviceList.filter((dl,index)=>{
+      // console.log(dl,index);
+      if(dl.Device_ID == this.markerArray[indexSwitch].imei){
+        that.deviceList[index].checked = ev.checked
+      }
+
+    })
+    // console.log(this.deviceList);
+
+  }
+
+  selectGroup(event,item){
+    var index=[]
+    // console.log(item);
+    if(event.checked){ 
+    this.deviceList.filter(x => x.vehicleGroup==undefined || x.vehicleGroup.name !== item.name).forEach(x => this.deviceList[this.deviceList.indexOf(x)].checked=false);
+    this.deviceList.filter(x =>{
+      if(x.vehicleGroup){
+        if(x.vehicleGroup.name === item.name){
+          // console.log(x)
+          var ev={checked:true}
+          this.checkBoxValue(ev,this.deviceList.indexOf(x));
+        }
+      }else{
+        var ev={checked:false}
+          this.checkBoxValue(ev,this.deviceList.indexOf(x));
+      }
+    })
+  }else{
+    this.deviceList.forEach(x => {
+      x.checked=true;
+       var ev={checked:true}
+      this.checkBoxValue(ev,this.deviceList.indexOf(x));
+    
+    });
+  }
+   
+    // for(var i=0;i<this.deviceList.length;i++){
+    //   if(de)
+    //   var ev={checked:true}
+    //   this.checkBoxValue(ev,index[i]);
+    // }
+    
+      // }).forEach(x => 
+      // console.log(x)
+      // );
+  }
+
+  getUserDetails(){
+    // console.log("USERID--",this.useridd);
+    
+    this.contactService.getUserObj(this.useridd).subscribe((res:any)=>{
+      // console.log("RESPONSE",res);
+      if(res.label_setting!==undefined){
+        this.showLabels=res.label_setting
+        this.digitalInput=res.digital_input
+      }
+      if(res.user_settings){
+        if(res.user_settings.sateliteValue)
+        this.satelite=res.user_settings.sateliteValue
+      }
+      
+      
+    })
+  }
+
+  // @HostListener('click', ['$event'])
+  // onClick(event) {
+  //   if (event.target.id === 'deletePoint'){
+      // console.log(event.target.value);
+  //     this.latlongObjArr.splice(event.target.value,1);
+  //     this.maphistory(1)
+  //   }
+       
+  // }
+  // CLICK(data){
+    // console.log(data);
+    
+  // }
+
+  // ------------new Method for calculate area------------------
+  cordinates=[];
+  showArea(){
+    // console.log(this.datefrom,this.date2,this.foods);
+    var imei=JSON.parse(localStorage.getItem('devDetail'))?JSON.parse(localStorage.getItem('devDetail')):this.temptrackingDev
+    // console.log(imei,"====>",imei,this.temptrackingDev);
+    if(!imei){
+      imei=this.deviceSelect[0].did
+    }else{
+      if(imei.vehicleId){
+        imei=imei.vehicleId
+      }else{
+        imei=imei
+      }
+    }
+    
+    var data={
+      f:new Date(this.datefrom).toISOString(),
+      t:new Date(this.date2).toISOString(),
+      imei:imei
+    }
+    // console.log(
+    //   data
+    // );
+    
+    this.contactService.calculateArea(data).subscribe((res:any)=>{
+      // console.log("AREA RESPONSE",res);
+      if(res.area)
+      this.area=(res.area/1000000)*247;
+
+
+      // let a = res.pts;
+      //     for(let k=0;k<a.length;k++){
+      //     let b ={
+      //     lat : a[k]['latitude'],
+      //     lng : a[k]['longitude']
+      //     }
+      //     this.cordinates.push(b);
+      //     }  
+
+          // console.log(this.cordinates);
+      //     // this.draw1(this.cordinates,'')
+          
+      
+    })
+  }
+
+  
+//     draw1(zzz,yyy){
+//       var map;
+//       var infoWindow;
+    //  console.log(typeof zzz)
+//       var GeoFencCoords = zzz
+//       var GeoName = yyy
+      // console.log(zzz[0].lat)
+//       initMap(GeoFencCoords);
+//       function initMap(GeoFencCoords) {
+//         map = new google.maps.Map(document.getElementById('map2'), {
+//           zoom: 17,
+//           center: {lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng},
+//           mapTypeId: 'terrain'
+//         });
+
+        
+//         var bermudaTriangle = new google.maps.Polygon({
+//           paths: GeoFencCoords,
+//           strokeColor: '#FF0000',
+//           strokeOpacity: 0.8,
+//           strokeWeight: 3,
+//           fillColor: '#FF0000',
+//           fillOpacity: 0.35
+//         });
+//         bermudaTriangle.setMap(map);
+
+//         // Add a listener for the click event.
+//         bermudaTriangle.addListener('click', showArrays);
+
+//         infoWindow = new google.maps.InfoWindow;
+//       }
+
+//       /** @this {google.maps.Polygon} */
+//       function showArrays(event) {
+//         // Since this polygon has only one path, we can call getPath() to return the
+//         // MVCArray of LatLngs.
+//         var vertices = this.getPath();
+
+//         var contentString = '<b>Geo Fence</b><br>' +
+//             'Name: ' + GeoName;
+
+//         // Iterate over the vertices.
+//      /*    for (var i =0; i < vertices.getLength(); i++) {
+//           var xy = vertices.getAt(i);
+//           contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
+//               xy.lng();
+//         }
+//  */
+//         // Replace the info window's content and position.
+//         infoWindow.setContent(contentString);
+//         infoWindow.setPosition(event.latLng);
+
+//         infoWindow.open(map);
+//       }
+//     }
+
+change(device){
+  // console.log(device);
+  this.deviceSelect[0]=device;
+  // console.log(this.deviceSelect);
+  
+}
+startAddress:any;
+deviceNameForPDF
+startTime
+endTime
+endAddress:any
+pdfFunction(data){
+  // console.log("IN PDF FUNCTION",data)
+  // this.startAddress=this.getAddressForPDF(data.today_start_location?data.today_start_location.lat:0,data.today_start_location?data.today_start_location.long:0,'start');
+  // this.endAddress=this.getAddressForPDF(data.last_location?data.last_location.lat:0,data.last_location?data.last_location.long:0,'end')
+}
+getAddressForPDF(lat,lng,type){
+  
+  var outerThis=this
+  
+  let geocoder = new google.maps.Geocoder();
+             
+                let request = {
+                  latLng: new google.maps.LatLng(lat,lng)
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      // var liveAdd = ;
+                      // console.log(data[0].formatted_address);
+                      if(type=="start"){
+                        outerThis.startAddress=data[0].formatted_address
+                      }else{
+                        outerThis.endAddress=data[0].formatted_address
+                      }
+                      return data[0].formatted_address;
+                    } 
+                  }
+                  else {
+                    //  console.log(liveAdd);
+                   return 'N/A';
+  
+  
+                  }
+  
+                })
+}
+
+
+
+image
+ pdf() {
+   var image=""
+    if(this.deviceList[0].supAdmin.imageDoc.length != 0){
+        var str =  this.deviceList[0].supAdmin.imageDoc[0]
+        var splitStr = str.split('/');
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+          concatStr += '/'+tt ; 
+         }
+       }
+       image='https://www.oneqlik.in' + concatStr
+      //  console.log("IMAGE==>",image);
+       
+      //  this.contactService.imageUrlToBase64('https://www.oneqlik.in' + concatStr).subscribe(res=>{
+        //  console.log("Image=>",(res).toString());
+      //   //  this.image=res
+      //  })
+        // this.getBase64ImageFromUrl('https://www.oneqlik.in' + concatStr).then(result => this.image= result) 
+      }
+  this.deviceNameForPDF=this.tempMapHistory[0].device_name
+  this.startTime=this.tempMapHistory[0].fromTime
+  this.endTime=this.tempMapHistory[0].toTime;
+  var name=this.deviceNameForPDF+" track from "+this.startTime+" to "+this.endTime+'.pdf'
+  var outerThis=this;
+  this.startAddress=this.finalArr[0].address
+  this.endAddress=this.finalArr[this.finalArr.length-1].address
+    // console.log(this.startAddress,this.endAddress);
+   
+// console.log(this.tempMapHistory,this.startAddress,this.endAddress, this.image);
+
+
+ var element = $('#map2');
+        var pdfOptions = {
+            orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+            unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+            format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+        };
+
+        var doc = new jsPDF(pdfOptions);
+
+        var pageWidth = doc.internal.pageSize.width-20;
+        var width  =  pageWidth;
+
+        html2canvas(element, {
+            useCORS: true, // MUST
+            onrendered: function(canvas) {
+                var imgWidth = element.width();
+                var imgHeight = element.height();
+
+                var height =  (pageWidth * imgHeight)/ imgWidth
+                var imgData = canvas.toDataURL('image/png');
+                doc.addImage(imgData, 'PNG', 5, 30 , width, height);
+                outerThis.toDataURL(image, function (dataUrl) {
+                  if(image)
+                   doc.addImage(dataUrl, 'JPEG', 2, 2, 27, 27);
+                  let finalY = doc.previousAutoTable.finalY;
+                   var header = function(data) {
+                      doc.setFontSize(15);
+                      doc.setTextColor(40);
+                      doc.setFontStyle('normal');
+                      // console.log(dataUrl);
+                      
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      // doc.text("Testing Report", data.settings.margin.left, 50);
+                    };
+                    doc.autoTable({html:"#headerTable",margin:{bottom:140,left:30,right:8,top:2},theme:'plain'});
+                    
+                  //  var options = {
+                  //     beforePageContent: header,
+                  //   //   margin: {
+                  //   //     top: 300
+                  //   //   },
+                  //   //   // startY:doc.lastAutoTable+ 300
+                  //   //  startY: 300
+                  //     // startY: doc.autoTableEndPosY() + 300
+                  // };
+                  doc.autoTable({
+                      head: outerThis.headRows(),
+                      // margin: { top: 80 },
+                      startY: doc.autoTable.previous.finalY + 200,
+                      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+                      // beforePageContent: header,
+                  });
+                  doc.save(name);
+              //   // doc.addImage(dataUrl, 'JPG', 330, 4, 20, 20);
+              // //   doc.addImage({
+              // //   imageData : dataUrl,
+              // //   angle     : 20,
+              // //   x         : 330,
+              // //   y         : 1,
+              // //   w         : 20,
+              // //   h         : 20
+              // // })
+                // console.log("URLLLL",dataUrl);
+              //   // this.image=dataUrl
+              //   })
+              });
+              
+            }
+        });
+
+
+                }
+
+   toDataURL(url, callback) {
+    //  console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  selectedGroup(event){
+    // console.log(event,this.toppings);
+    this.getDeviceBYfilter('','')
+  }
+
+  getGrp(){
+  this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      // console.log(res);     
+     this.groups = res["group_details"];
+      // console.log(this.grpName);  
+    })
+}
+
+selectAllVehicles(ev){
+    // console.log(ev);
+    if(ev.checked){
+          this.deviceObj = [];
+          var Alldevices = {
+            id: "all",
+            viewValue: "ALL Devices",
+            iconType: "",
+            deviceId: ""
+          }
+          if(this.deviceList.length==1){
+            this.selectedDevice=this.deviceList[0]._id
+             this.parkingButtonShow=this.deviceList[0].theftAlert==null?'grey':this.deviceList[0].theftAlert==undefined?'grey':this.deviceList[0].theftAlert==true?'green':'red'
+            this.DriverName=this.deviceList[0].driver_name;
+            // console.log("DRIVER NAME",this.DriverName,this.deviceList[0].ac);
+            this.ac=this.deviceList[0].ac?this.deviceList[0].ac:'NA'
+            this.DriverNumber=this.deviceList[0].contact_number
+          }
+          // console.log("device obj =>",this.deviceList);
+          this.deviceObj.push(Alldevices);
+          for (var i = 0; i < this.deviceList.length; i++) {
+            Alldevices = {
+              id: this.deviceList[i]._id,
+              viewValue: this.deviceList[i].Device_Name ? this.deviceList[i].Device_Name : "",
+              iconType: this.deviceList[i].iconType,
+              deviceId: this.deviceList[i].Device_ID
+            }
+            this.deviceObj.push(Alldevices)
+          }
+  
+          this.final = this.deviceList;
+        
+          for (let i = 0; i < this.final.length; i++) {
+            this.final[i]['checked'] = true;
+            // this.deviceList = this.final;
+          
+            if (this.final[i].type_of_device == "Tracker") {
+              let a = {
+                value: this.final[i].Device_Name,
+                viewValue: this.final[i].Device_Name,
+                did: this.final[i].Device_ID,
+                id: this.final[i]._id,
+                user: this.final[i].user,
+                email: this.final[i].Email_ID,
+                deviceType: this.final[i].type_of_device,
+                iconType: this.final[i].iconType
+  
+              }
+  
+              this.foods.push(a);
+           
+            }
+  
+          }
+          let that= this;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+            this.livetrack(this.fin);
+          }
+         
+          for (let y = 0; y < this.foods.length; y++) {
+            if (this.foods[y].did == this.fin) {
+              this.new = this.foods[y];
+            }
+          }
+    }else{
+
+     
+      this.deviceList.forEach(element => {
+        element.checked=false;
+      });
+      const myOptions = {
+        zoom:2,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+      var map = new google.maps.Map(document.getElementById('map'), myOptions);
+      // console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+      var zoomBar: any;
+      zoomBar = document.getElementById('myRange');
+      map.setZoom(map.getZoom());
+
+    
+      zoomBar.value = map.getZoom();
+  
+      zoomBar.oninput = function () {
+        // console.log('zoomValue',map.getZoom());
+        map.setZoom(parseInt(this.value));
+      }
+
+      google.maps.event.addListener(map, 'zoom_changed', function (event) {
+        // console.log("Inside zoom in out function");
+        if (zoomBar.value)
+          zoomBar.value = map.getZoom();
+      });
+    
+    }
+    
+}
+reportArr
+finalArr=[]
+reportArr1
+pathReport=[]
+getTravelPathReport(device){
+  var payload ={
+            "to":new Date(this.date2).toISOString(),
+            "from" : new Date(this.datefrom).toISOString(),
+             "device" : device.Device_ID,
+           "interval" :10
+          }
+
+          this.contactService.getTravel_path_report(payload).subscribe((resp:any)=>{
+    
+                
+                this.reportArr = [];
+                this.reportArr=  resp.filter(function (el) {
+                  return el != null;
+                });
+                
+                let last = {speed:''};
+let result = [];
+
+for(let i = 0; i < this.reportArr.length; i++){
+  var cum_distance = parseFloat(this.reportArr[i].odo)-parseFloat(this.reportArr[0].odo);
+  this.reportArr[i].cum_distance=Math.abs(parseFloat(cum_distance.toFixed(2)))
+
+  // let char = this.reportArr[i];
+  // if(char.speed !== last.speed){
+  //   result.push(char);
+  //   last = char;
+  // }
+}
+// console.log("RESSSS==>",this.reportArr);
+this.reportArr1=this.reportArr
+   
+                
+                if (this.reportArr1.length != 0) {
+                  var j = 0;
+                  // console.log(this.reportArr1);
+                  for(let i = 0; i <resp.length ; i++){
+                    if(resp[i]!=null){
+                      resp[i].Device_name = device.Device_Name;
+                      this.pathReport.push(resp[i]);
+                }else{
+               }
+           }
+
+                 this.finalArr = [];
+                 var that=this
+                  // console.log(this.finalArr);
+                  for (var i = 0; i < this.reportArr1.length; i++) {
+                    this.clocation_1(this.reportArr1[i], function (err, succ) {
+                      if (err) {
+                        // console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        that.finalArr.push(succ);
+                        // if(j==0){
+                        //   that.startAddress=succ.address
+                        // }
+                        // console.log(that.finalArr,j);
+                        j++;
+                        if (j === that.reportArr1.length) {
+                          // that.endAddress=succ.address
+                          that.Load = false;
+                           that.finalArr.sort(function(a:any,b:any){
+ 
+                        return new Date(a.date).valueOf() - new Date(b.date).valueOf();
+                        });
+                          // callback({ data: this.finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+                  if(this.pathReport.length==0){
+                      this.Load = false;
+                  }
+                } else {
+                  this.Load = false;
+                  this.firstcall=true;
+                  this.lastcall=(this.skip>0)?false:true;
+                 
+    
+                }
+            }, err => {   
+              this.Load= false;    
+             
+              // console.log("error",err) ;     
+            });
+
+}
+
+ clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+      }
+    
+  
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['address'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['address'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+    headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        deviceName:'device Name',
+        imei:'IMEI',
+        date:'Date',
+        odo:'ODO',
+        distanceFromPrevious:'Distance',
+        speed:'Speed',
+        avgSpeed:'AVG Speed',
+        externalBattery:'Ext Battery',
+        temperature:'Temperature',
+        cumDistance:'Cum Distance',
+        location:'Location',
+        address:'Address',
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    rowCount = rowCount || 10;
+    let body = [];
+    
+    
+    for (var j = 0; j < rowCount; j++) {
+       var str=(pdfBody[j].latDecimal?pdfBody[j].latDecimal:0)+' , '+(pdfBody[j].longDecimal?pdfBody[j].longDecimal:0)
+      body.push({
+
+        deviceName:pdfBody[j].Device_name,
+        imei:pdfBody[j].imei,
+        date:moment(pdfBody[j].date).format('lll'),
+        odo:pdfBody[j].odo?(pdfBody[j].odo).toFixed(2):0,
+        distanceFromPrevious:this.get_distance(pdfBody[j],pdfBody[j].index),
+        speed:pdfBody[j].speed,
+        avgSpeed:this.getavgSpeed(pdfBody[j],pdfBody[j].index),
+        externalBattery:pdfBody[j].external_Battery?pdfBody[j].external_Battery:'0',
+        temperature:pdfBody[j].temp?(parseFloat(pdfBody[j].temp)/10).toFixed(2):'0',
+        cumDistance:this.getcummulative_distance(pdfBody[j],pdfBody[j].index),
+        location:str,
+        address:pdfBody[j].address,
+
+      });
+    }
+    return body;
+  }
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index].odo)-parseFloat(this.reportArr1[0].odo);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+getavgSpeed(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index_1].odo)-parseFloat(this.reportArr1[index_1-1].odo);
+    return Math.abs(parseFloat((cum_distance/0.166).toFixed(2)));  
+  }
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index_1].odo)-parseFloat(this.reportArr1[index_1-1].odo);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+changeParking(){
+  var theftAlert=this.parkingButtonShow=='grey'?true:this.parkingButtonShow=='green'?false:true
+  this.contactService.post('/devices/deviceupdate',{_id:this.selectedDevice,theftAlert:theftAlert}).subscribe(res=>{
+    if(theftAlert){
+      this.parkingButtonShow='green'
+    }else{
+      this.parkingButtonShow='red'
+    }
+  })
+
+}
+
+ openRightMenu() {
+  document.getElementById("rightMenu").style.display = "block";
+  document.getElementById('buttons').style.marginRight='325px'
+}
+
+ closeRightMenu() {
+  document.getElementById("rightMenu").style.display = "none";
+  document.getElementById('buttons').style.marginRight='-7px'
+}
+
+saveRoutePath(){
+  let dialogRef = this.dialog.open(ShoRoutePlanComponent, {
+      width: '650px',
+      height: '700px',
+      data:  {data:this.latlongObjArr,device:this.tempMapHistory[0]} 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // console.log(result);
+
+    })
+}
+
+workingHours=0
+workingHoursFunction1(device){
+  // console.log(this.tempMapHistory[0]);
+  var date1=new Date(this.datefrom).toISOString();
+  var date2=new Date(this.date2).toISOString();
+  this.contactService.get('/notifs/ignitionReportForMobile?from_date='+date1+'&to_date='+date2+'&_u='+this.useridd+'&device='+device.Device_ID).subscribe((res:any)=>{
+    // console.log(res);
+    if(res.length>0){
+      this.workingHours=res[0].workingHours!="" && res[0].workingHours?res[0].workingHours:0
+
+    }
+    
+  },err=>{
+    // console.log(err);
+  })
+}
+
+workingHoursFunction2(device){
+//  console.log(this.tempMapHistory[0]);
+    this.contactService.get('/notifs/acReportForMobile?from_date='+this.datefrom+'&to_date='+this.date2+'&_u='+this.useridd+'&device='+device.Device_ID).subscribe((res:any)=>{
+    // console.log(res);
+    this.workingHours=res.workingHours!=""  && res.workingHours?res.workingHours:0
+  },err=>{
+    // console.log(err);
+  })
+}
+
+}
diff --git a/src/app/location/myfont.ttf b/src/app/location/myfont.ttf
new file mode 100644
index 0000000..5dbe6f9
Binary files /dev/null and b/src/app/location/myfont.ttf differ
diff --git a/src/app/location/share-loc/share-loc.component.html b/src/app/location/share-loc/share-loc.component.html
new file mode 100644
index 0000000..8370ab7
--- /dev/null
+++ b/src/app/location/share-loc/share-loc.component.html
@@ -0,0 +1,69 @@
+<!-- <h5>{{'Share Location' | translate}}
+  <button mdTooltip="close" (click)="onNoClick(null)" style="cursor: pointer;
+  float: right; border:1px solid transparent; background-color: transparent;padding-top: 1%;"><md-icon style="float: right;width:30px;height:30px;">cancel
+      </md-icon></button>
+</h5>
+<hr>
+<div *ngIf="Loading" class="loading">Loading&#8230;</div>
+<b>Device Name: </b>{{dname}}<br>
+<div *ngFor="let input of inputs">
+  <md-form-field class="example-full-width width" style="width: 47%;">
+  <input mdInput [(ngModel)]="input.data" placeholder="{{'Enter Email ID or Mobile Number' | translate}}">
+  </md-form-field>
+</div>
+<br>
+<div style="padding-left:30%">
+<input type="submit" class="btn btn btn-warning" style="cursor:pointer" value="ADD Recipient" (click)="addInput()"   />
+<input type="submit" class="btn btn btn-success" style="cursor:pointer" value="Submit" (click)="add()"   />
+</div> -->
+<div class="container">
+  <div class="row" >
+   <div class="col-12" > 
+    <p style="text-align: center;padding-top: 5px; padding-bottom: 5px;color: white;background: #202f46;margin-bottom: 0;">Share Location</p>
+   </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Phone Number</label>
+      <input type="number" class="form-control" id="exampleInputphone1" [(ngModel)]="phone_number" aria-describedby="phoneHelp" placeholder="902119XXXX">
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Phone Number for share Vehicle Location</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Email Address</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="email_add" aria-describedby="phoneHelp" placeholder="abc@def.com">
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address for share Vehicle Location</small>
+    </div>
+  </div>
+  <div class="row"> 
+    <div class="col-12" style="margin-bottom: 20px;">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Select Time</label>
+      <div class="btn-group btn-group-sm" role="group" aria-label="Basic example" style="width:100%">
+        <button type="button" class="btn btn-secondary animateClass_4" style="width:33%" (click)="changeTime('15')">15 Minutes</button>
+        <button type="button" class="btn btn-secondary animateClass_5" style="width:33%" (click)="changeTime('1')">1 Hour</button>
+        <button type="button" class="btn btn-secondary animateClass_6" style="width:33%" (click)="changeTime('8')">8 Hours</button>
+      </div>
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please Select Time period for share Live Location</small>
+    </div>
+  </div>
+  <div class="row" *ngIf="btnFlag===false" style="margin-bottom: 20px;">
+    <div class="col-10" style="padding-right: 0px;white-space: nowrap;overflow: auto;">
+      <p>{{link}}</p>
+    </div>
+    <div class="col-2" style="text-align: center;font-size: 20px;color: #868e96;">
+      <i class="fas fa-copy" style="cursor: pointer;" title="copy token to clipboard" (click)="copytoClipboard()"></i>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 14px;font-weight: 500;margin-bottom: 10px;">{{errmsg}}</p>
+        <button *ngIf="btnFlag=== true" md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="locationShare()"> Generate token </button>
+        <button *ngIf="btnFlag===false" md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="shareLocationToDevice()"> Share </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="close()"> Cancel </button> 
+    </div>
+  </div>
+</div>
+<!-- style="width:25%;border-right: 2px solid white;"
+style="width:25%;border-right: 2px solid white;"
+style="width:25%;border-right: 2px solid white;" -->
\ No newline at end of file
diff --git a/src/app/location/share-loc/share-loc.component.scss b/src/app/location/share-loc/share-loc.component.scss
new file mode 100644
index 0000000..2afe726
--- /dev/null
+++ b/src/app/location/share-loc/share-loc.component.scss
@@ -0,0 +1,119 @@
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/location/share-loc/share-loc.component.spec.ts b/src/app/location/share-loc/share-loc.component.spec.ts
new file mode 100644
index 0000000..8a6b576
--- /dev/null
+++ b/src/app/location/share-loc/share-loc.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShareLocComponent } from './share-loc.component';
+
+describe('ShareLocComponent', () => {
+  let component: ShareLocComponent;
+  let fixture: ComponentFixture<ShareLocComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShareLocComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShareLocComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/share-loc/share-loc.component.ts b/src/app/location/share-loc/share-loc.component.ts
new file mode 100644
index 0000000..f6119b1
--- /dev/null
+++ b/src/app/location/share-loc/share-loc.component.ts
@@ -0,0 +1,139 @@
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../../device';
+import {ContactService} from '../../contact.service';
+import { Component, OnInit,Inject } from '@angular/core';
+import { stringify } from '@angular/core/src/util';
+
+@Component({
+  selector: 'app-share-loc',
+  templateUrl: './share-loc.component.html',
+  styleUrls: ['./share-loc.component.scss'],
+  providers: [ContactService]
+
+})
+export class ShareLocComponent implements OnInit {
+  Loading:boolean = false;
+  deviceObject: any;
+  phone_number:number;
+  errFlag:boolean= false;
+  errmsg:string='';
+  useridd: any;
+  email_add:any;  
+  link: string;
+
+  constructor(public dialogRef: MdDialogRef<ShareLocComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+    this.deviceObject =  this.data.deviceObject ;
+    console.log(this.deviceObject);
+  
+    }
+
+    ngOnInit() {
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    }
+
+    time_share = 1; 
+    changeTime(id){
+      console.log("Id",id);
+      this.time_share = parseInt(id);
+
+
+    }
+    btnFlag:boolean=true;
+    locationShare(){
+      var that = this;
+      if((this.phone_number == undefined)&&(this.email_add == undefined)){   
+        that.errFlag = true ; 
+        that.errmsg = 'Please Provide Phone number or email address ';
+        let Error = setTimeout(function(){
+          that.errFlag = false ; 
+          that.errmsg = '';
+          clearInterval(Error);
+        },2000)
+        return ; 
+      }else{
+        console.log('this.deviceObject',this.deviceObject);
+        var ttl=0
+        if(this.time_share == 15){
+          this.time_share = 15; 
+           ttl = this.time_share*60
+        }else{
+          ttl = this.time_share*3600
+        }
+        var data = {
+          id: this.deviceObject._id,
+          imei: this.deviceObject.Device_ID,
+          sh: this.deviceObject.user,
+          ttl: ttl
+          };
+
+          this.contactService.shareLiveLocation(data).subscribe(res=>{
+            console.log(res); 
+            this.btnFlag=false;
+            console.log('shareToken',res);
+            this.link = 'https://www.oneqlik.in' + "/share/liveShare?t=" + res.t;
+            console.log(this.link);
+            // this.shareLocationToDevice(link);
+          },err=>{
+            console.log(err);
+          })
+      }
+    }
+
+    close(){
+      this.dialogRef.close('cancel');
+    }
+
+    shareLocationToDevice(){
+      // console.log('link',link);
+      var userInfo = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+      console.log(userInfo);
+      var userName = userInfo.fn?userInfo.fn:'' + ' ' + userInfo.ln?userInfo.ln:'';
+      var data={
+        link : this.link,
+        device : this.deviceObject.Device_ID , 
+        user : this.deviceObject.user,
+        userName :userName
+      };
+      if((this.phone_number != undefined)||(this.phone_number != null)){
+        data['phone_num']= this.phone_number ; 
+      }
+      if((this.email_add != undefined)||(this.email_add !='')){
+        data['email_add'] = this.email_add ; 
+
+      }
+      this.contactService.sendLiveLocationLink(data).subscribe(res=>{
+        console.log(res);
+        this.btnFlag=true;
+        this.dialogRef.close('succ');
+      },err=>{
+        console.log(err);
+
+      })
+    }
+  
+   
+copytoClipboard(){
+  var text = this.link;
+ const selBox = document.createElement('textarea');
+ selBox.style.position = 'fixed';
+ selBox.style.left = '0';
+ selBox.style.top = '0';
+ selBox.style.opacity = '0';
+ selBox.value = text;
+ document.body.appendChild(selBox);
+ selBox.focus();
+ selBox.select();
+ document.execCommand('copy');
+ document.body.removeChild(selBox);
+ var that = this
+ this.errFlag = true ; 
+ this.errmsg = 'Link copied to clipboard';
+ let Error = setTimeout(function(){
+   that.errFlag = false ; 
+   that.errmsg = '';
+   clearInterval(Error);
+ },5000)
+ 
+ }
+}
diff --git a/src/app/location/sho-route-plan/sho-route-plan.component.html b/src/app/location/sho-route-plan/sho-route-plan.component.html
new file mode 100644
index 0000000..99a469d
--- /dev/null
+++ b/src/app/location/sho-route-plan/sho-route-plan.component.html
@@ -0,0 +1,33 @@
+<div class="card">
+  <div class="card-header">
+    <h4>Save Route Path</h4>
+    <span style="margin-top: -25px;" class="float-right" (click)="dialogRef.close()"><i class="fas fa-times"></i></span>
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  </div>
+  <div class="card-body">
+    <form [formGroup]="routeForm" class="form" (ngSubmit)="submit()">
+      <div class="form-group">
+        <label for="royteName">Route Name</label>
+        <input type="text" formControlName="routeName" class="form-control" id="royteName" placeholder="Enter Route Name">
+        <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
+      </div>
+      <div class="form-group">
+        <label for="source">Source</label>
+        <input type="text" formControlName="source" class="form-control" id="source" placeholder="Enter Source">
+      </div>
+      <div class="form-group">
+        <label for="destination">Destination</label>
+          <input type="text" formControlName="destination" class="form-control" id="destination" placeholder="Enter Source">
+      </div>
+      <div class="card-footer text-center mt-2">
+        <button type="submit" class="btn btn-primary">Submit</button>
+
+      </div>
+
+    </form>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/location/sho-route-plan/sho-route-plan.component.scss b/src/app/location/sho-route-plan/sho-route-plan.component.scss
new file mode 100644
index 0000000..d51b09b
--- /dev/null
+++ b/src/app/location/sho-route-plan/sho-route-plan.component.scss
@@ -0,0 +1,49 @@
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/location/sho-route-plan/sho-route-plan.component.spec.ts b/src/app/location/sho-route-plan/sho-route-plan.component.spec.ts
new file mode 100644
index 0000000..0097d61
--- /dev/null
+++ b/src/app/location/sho-route-plan/sho-route-plan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShoRoutePlanComponent } from './sho-route-plan.component';
+
+describe('ShoRoutePlanComponent', () => {
+  let component: ShoRoutePlanComponent;
+  let fixture: ComponentFixture<ShoRoutePlanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShoRoutePlanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShoRoutePlanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/location/sho-route-plan/sho-route-plan.component.ts b/src/app/location/sho-route-plan/sho-route-plan.component.ts
new file mode 100644
index 0000000..3338fdd
--- /dev/null
+++ b/src/app/location/sho-route-plan/sho-route-plan.component.ts
@@ -0,0 +1,127 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-sho-route-plan',
+  templateUrl: './sho-route-plan.component.html',
+  styleUrls: ['./sho-route-plan.component.scss']
+})
+export class ShoRoutePlanComponent implements OnInit {
+  routeForm:FormGroup;
+  userId;
+  location=[]
+   data_descip: any;
+  source: string;
+  destination: string;
+  constructor(private fb:FormBuilder,public dialogRef: MdDialogRef<ShoRoutePlanComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+    console.log(data);
+    if(data.data.length>0){
+      this.clocation_1(data.data[0].lat,data.data[0].lng,'source');
+      this.clocation_1(data.data[data.data.length-1].lat,data.data[data.data.length-1].lng,'destination');
+      data.data.forEach(element => {
+        this.location.push([element.lng,element.lat])
+      });
+    }
+  }
+
+  ngOnInit() {
+    this.userId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.routeForm=this.fb.group({
+      routeName:[''],
+      source:[''],
+      destination:['']
+    })
+
+    console.log(this.location,this.source,this.destination);
+    
+  }
+
+  submit(){
+    console.log(this.routeForm.value);
+
+    let routeDetail={
+      "src":this.routeForm.value.source,
+      "dest":this.routeForm.value.destination,
+      "name":this.routeForm.value.routeName,
+      "user":this.userId,
+      "path":this.location,
+      "poi":[],
+      "status":"Active",
+      device:this.data.device.device_obj._id
+    };
+
+    console.log(routeDetail);
+   
+    console.log('this is final payload',routeDetail)
+    this.contactService.saveRoute(routeDetail)
+      .subscribe(res => {
+        console.log(res);
+        this.data_descip = "Route Path Saved Successfully";
+      launch_toast();
+      this.dialogRef.close();
+        // this.router.navigateByUrl("vehicleRoute");
+      })
+
+      function launch_toast() {
+      // //console.log(divid);
+      var x = document.getElementById("toast")
+      ////console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    }
+  }
+    
+  clocation_1(lat,long,type) {
+     console.log("IN");
+     
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat:lat ?lat : 0,
+        long: long ? long : 0
+      }
+    
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      console.log("IN",res);
+      if (res.message == "Address not found in databse") {
+       if(type=="source"){
+         this.routeForm.patchValue({
+           source:""
+         })
+         this.source=""
+       }else{
+         this.routeForm.patchValue({
+           destination:""
+         })
+         this.destination=""
+       }
+       
+      } else {
+         if(type=="source"){
+           this.routeForm.patchValue({
+           source:res.address
+         })
+         this.source=res.address
+       }else{
+           this.routeForm.patchValue({
+           destination:res.address
+         })
+         this.destination=res.address
+       }
+        // latlngObj['address'] = res.address;
+
+      }
+       
+    })
+
+  }
+
+}
diff --git a/src/app/login.ts b/src/app/login.ts
new file mode 100644
index 0000000..7afb1a4
--- /dev/null
+++ b/src/app/login.ts
@@ -0,0 +1,5 @@
+export class Login{
+    _id?: string;
+  emailid: string;
+  psd: string;
+}
\ No newline at end of file
diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css
new file mode 100644
index 0000000..6a424fa
--- /dev/null
+++ b/src/app/login/login.component.css
@@ -0,0 +1,1046 @@
+
+body {
+/* background-image: url("../../assets/image/loginbck2.jpg");
+ *//* height: 100%; 
+width:100%;
+background-position: center;
+background-repeat: no-repeat;
+background-size: cover; */
+
+	/* 		background-position: center center;
+			background-repeat:  no-repeat;
+			background-attachment: fixed;
+			background-size:  cover;
+			background-color: #999; */
+}
+::-webkit-scrollbar {
+  display: none;
+  }
+ /* Toast Msg */
+.background-image{
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  margin: -16px;
+  padding: 0;
+  background-image: url('../../assets/image/Traffic-Blur.jpg');
+  background-size: 100%;
+  background-repeat: no-repeat;
+}
+
+ #toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img{
+width: 150px;
+height: 50px;
+  
+  float: left;
+  
+  padding-top: 16px;
+  padding-bottom: 16px;
+  
+  box-sizing: border-box;
+
+  
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc{
+
+  
+  color: #fff;
+ 
+  padding: 16px;
+  
+  overflow: hidden;
+white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+  border-radius: 15px;
+  /* border: 2px solid #18262F; */
+  padding: 7px;
+  width: 116px;
+  height: 17px;
+  font-size: 9px;
+  outline: none;
+  float: right;
+  margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+  from {min-width: 50px} 
+  to {min-width: 350px}
+}
+
+@keyframes expand {
+  from {min-width: 50px}
+  to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+  from {min-width: 350px} 
+  to {min-width: 350px}
+}
+
+@keyframes stay {
+  from {min-width: 350px}
+  to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+  from {min-width: 350px;} 
+  to {min-width: 50px;}
+}
+
+@keyframes shrink {
+  from {min-width: 350px;} 
+  to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;} 
+  to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 60px; opacity: 0;}
+}
+.mat-slide-toggle-thumb-container {
+  z-index: auto !important;
+}
+
+.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+  z-index:auto!important;
+  
+}
+.mat-menu-panel.mat-menu-before.mat-menu-below{
+  overflow: hidden !important;
+}
+.mat-menu-panel.my-full-width-menu {
+  max-width: none;
+  width: 100vw;
+  margin-left: -8px;
+  margin-top: 24px;
+}
+.menu-overflow-hidden {
+  overflow: hidden !important;
+}
+
+.one{
+    width:30%;
+    float:right;
+}
+.two{
+    clear: both;
+    float: right;
+}
+.width{
+    width: 100%;
+}
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+
+a:focus {
+	outline: none !important;
+}
+
+a:hover {
+	text-decoration: none;
+  color: #fff;
+}
+
+/*---------------------------------------------*/
+h1,h2,h3,h4,h5,h6 {
+	margin: 0px;
+}
+
+/* Montserrat-Regular */
+p {
+	font-family: calibri;
+	font-size: 14px;
+	line-height: 1.7;
+	color: #666666;
+	margin: 0px;
+}
+
+ul, li {
+	margin: 0px;
+	list-style-type: none;
+}
+
+
+/*---------------------------------------------*/
+input {
+	outline: none;
+	border: none;
+}
+
+textarea {
+  outline: none;
+  border: none;
+}
+
+textarea:focus, input:focus {
+  border-color: transparent !important;
+}
+
+input:focus::-webkit-input-placeholder { color:transparent; }
+input:focus:-moz-placeholder { color:transparent; }
+input:focus::-moz-placeholder { color:transparent; }
+input:focus:-ms-input-placeholder { color:transparent; }
+
+textarea:focus::-webkit-input-placeholder { color:transparent; }
+textarea:focus:-moz-placeholder { color:transparent; }
+textarea:focus::-moz-placeholder { color:transparent; }
+textarea:focus:-ms-input-placeholder { color:transparent; }
+
+input::-webkit-input-placeholder { color: #999999; }
+input:-moz-placeholder { color: #999999; }
+input::-moz-placeholder { color: #999999; }
+input:-ms-input-placeholder { color: #999999; }
+
+textarea::-webkit-input-placeholder { color: #999999; }
+textarea:-moz-placeholder { color: #999999; }
+textarea::-moz-placeholder { color: #999999; }
+textarea:-ms-input-placeholder { color: #999999; }
+
+/*---------------------------------------------*/
+button {
+	outline: none !important;
+	border: none;
+	background: transparent;
+}
+
+button:hover {
+	cursor: pointer;
+}
+
+iframe {
+	border: none !important;
+}
+
+
+
+/*//////////////////////////////////////////////////////////////////
+[ Utility ]*/
+.txt1 {
+  font-family: calibri;
+  font-size: 18px;
+ 
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+
+
+.bo1 {
+  border-bottom: 1px solid #999999;
+}
+
+.hov1:hover {
+  border-color: #d33f8d;
+}
+
+
+/*//////////////////////////////////////////////////////////////////
+[ login ]*/
+
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.container-login100 {
+  width: 100%;  
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  /* flex-wrap: wrap; */
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(to right, #36d1dc 40%, #5b86e5 100%);
+
+  
+}
+
+.container-login100::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  /* #005bea */
+  /* background:  linear-gradient(to right, #003399 0%, #0066ff 100%); */
+  /* previously used */
+  /* background: -webkit-linear-gradient(to right, #005bea, #00c6fb); */
+  /* previously used */
+  background: -webkit-linear-gradient(to right,MD_DIALOG_DATA , #764ba2);
+  background: -o-linear-gradient(to right,MD_DIALOG_DATA ,  #764ba2);
+  background: -moz-linear-gradient(to right,MD_DIALOG_DATA , #764ba2);
+  background: linear-gradient(to right,MD_DIALOG_DATA , #764ba2);
+  opacity: 0.9;
+}
+
+
+.btn-primary-outline {
+  background-color: transparent;
+  border-color: #ccc;
+}
+
+.wrap-login1001 {
+  width: auto;
+  text-align: center;
+  padding-left: 20px;
+  padding-right: 20px;
+  line-height:10;
+  background: transparent;
+}
+
+
+.wrap-login100 {
+  width: auto;
+  text-align: center;
+
+  background: transparent;
+}
+
+
+
+/*------------------------------------------------------------------
+[  ]*/
+.login100-form {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.login100-form-title {
+  font-family: calibri;
+  font-size: 24px;
+  color: #fff;
+  line-height: 1.2;
+  text-align: center;
+
+  width: 100%;
+  display: block;
+}
+
+
+.main{
+  padding:0px 0px 0px !important;
+  margin:0px 0px 0px !important;
+}
+/*---------------------------------------------*/
+.login100-form-avatar {
+  width: 156px;
+  /* height: 120px;
+  border-radius: 50%; */
+  overflow: hidden;
+  margin: 0 auto;
+}
+.login100-form-avatar img {
+  width: 100%;
+}
+
+
+
+
+/*---------------------------------------------*/
+.wrap-input100 {
+  position: relative;
+  padding-left: 30px;
+  padding-right: 30px;
+  width: 100%;
+  z-index: 1;
+}
+
+.input100 {
+  font-family: calibri;
+  font-size: 15px;
+  line-height: 1.2;
+  color: #333333;
+
+  display: block;
+  width: 100%;
+  background: #e6e3e3;
+  height: 50px;
+  border-radius: 25px;
+  padding: 0 30px 0 53px;
+}
+
+
+/*------------------------------------------------------------------
+[ Focus ]*/
+.focus-input100 {
+  display: block;
+  position: absolute;
+  border-radius: 25px;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0px 0px 0px 0px;
+  color: rgba(0,91,234, 0.6);
+}
+
+.input100:focus + .focus-input100 {
+  -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
+  animation: anim-shadow 0.5s ease-in-out forwards;
+}
+
+@-webkit-keyframes anim-shadow {
+  to {
+    box-shadow: 0px 0px 80px 30px;
+    opacity: 0;
+  }
+}
+
+@keyframes anim-shadow {
+  to {
+    box-shadow: 0px 0px 80px 30px;
+    opacity: 0;
+  }
+}
+
+.symbol-input100 {
+  font-size: 15px;
+  color: #999999;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  border-radius: 25px;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding-left: 45px;
+  pointer-events: none;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+
+.symbol-input10011 {
+  font-size: 15px;
+  color: #999999;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  position: absolute;
+  border-radius: 25px;
+  bottom: 0;
+  left: 315px;
+  width: 100%;
+  height: 100%;
+  padding-left: 45px;
+  pointer-events: none;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+
+
+.input100:focus + .focus-input100 + .symbol-input100 {
+  color: #00c6fb;
+  padding-left: 10px;
+}
+
+
+
+
+/*------------------------------------------------------------------
+[ Button ]*/
+.container-login100-form-btn {
+  width: 100%;
+  color:white;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+.login100-form-btn {
+  font-family: calibri;
+  font-size: 15px;
+  line-height: 1.5;
+  color: #e0e0e0;
+
+  width: 100%;
+  height: 50px;
+  border-radius: 25px;
+  background: #333333;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 25px;
+
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+
+  position: relative;
+  z-index: 1;
+}
+
+.login100-form-btn::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  border-radius: 25px;
+  top: 0;
+  left: 0;
+  background: #005bea;
+  background: -webkit-linear-gradient(to right, #005bea, #00c6fb);
+  background: -o-linear-gradient(to right, #005bea, #00c6fb);
+  background: -moz-linear-gradient(to right, #005bea, #00c6fb);
+  background: linear-gradient(to right, #005bea, #00c6fb);
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+  opacity: 0;
+}
+
+.login100-form-btn:hover {
+  background: transparent;
+  color: #fff;
+}
+
+.login100-form-btn:hover:before {
+  opacity: 1;
+}
+
+/*------------------------------------------------------------------
+[ Button sign in with ]*/
+.btn-face,
+.btn-google {
+  font-family: calibri;
+  font-size: 16px;
+  line-height: 1.2;
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc((100% - 10px) / 2);
+  height: 40px;
+  border-radius: 3px;
+  border: 1px solid #e6e6e6;
+  background-color: #fff;
+
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+
+.btn-face {
+  color: #3b5998;
+}
+
+.btn-face i {
+  font-size: 20px;
+  margin-right: 10px;
+  padding-bottom: 1px;
+}
+
+.btn-google {
+  color: #555555;
+}
+
+.btn-google img {
+  width: 19px;
+  margin-right: 10px;
+  padding-bottom: 1px;
+}
+
+
+.btn-face:hover,
+.btn-google:hover {
+  border-color: #d33f8d;
+}
+
+
+
+/*------------------------------------------------------------------
+[ Alert validate ]*/
+
+.validate-input {
+  position: relative;
+}
+
+.alert-validate::before {
+  content: attr(data-validate);
+  position: absolute;
+  max-width: 70%;
+  background-color: white;
+  border: 1px solid #c80000;
+  border-radius: 14px;
+  padding: 4px 25px 4px 10px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  pointer-events: none;
+
+  font-family: calibri;
+  color: #c80000;
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: left;
+
+  visibility: hidden;
+  opacity: 0;
+
+  -webkit-transition: opacity 0.4s;
+  -o-transition: opacity 0.4s;
+  -moz-transition: opacity 0.4s;
+  transition: opacity 0.4s;
+}
+
+.alert-validate::after {
+  content: "\f06a";
+  font-family: calibri;
+  display: block;
+  position: absolute;
+  color: #c80000;
+  font-size: 15px;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -moz-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  -o-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 13px;
+}
+
+.alert-validate:hover:before {
+  visibility: visible;
+  opacity: 1;
+}
+
+@media (max-width: 992px) {
+  .alert-validate::before {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ responsive ]*/
+
+@media (max-width: 576px) {
+  .wrap-login1001 {
+    padding-top: 80px;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+@media (max-width: 576px) {
+  .wrap-login100 {
+    padding-top: 80px;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+
+
+
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: 33px;
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: 8px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: 8px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: 32px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: 56px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(24px, 0);
+  }
+}
+
+
+
+#toast #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000..48c4fbe
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,283 @@
+<!-- <div class="limiter">
+        <div class="container-login100" [style.background-image]="'url('+backgroundImage+')'">
+                <a class="txt1" *ngIf="showLink || cpn_showLink || saanvi_showLink" href={{mainSiteurl}}
+                        style="position: absolute;top: 10px;right: 50px;font-size: 30px;color:white">Go to Site ></a>
+                <div class="wrap-login100" style="padding-bottom:30px; height: 470px;">
+                        <form class="login100-form validate-form form-group" #lgForm="ngForm">
+                                <div class="login100-form-avatar">
+                                        <img src={{this.logo_1}} alt="AVATAR">
+                                </div>
+                                <span
+                                 *ngIf="showLink" class="login100-form-title"
+                                        style="padding-top:20px;padding-bottom:45px;">
+                                        Welcome To OneQlik
+                                </span>
+                                <span *ngIf="!showLink" class="login100-form-title"
+                                        style="padding-top:20px;padding-bottom:45px;"> Login </span>
+                                <div *ngIf="initialLoginForm" class="wrap-input100 validate-input"
+                                        style="margin-bottom: 10px;" data-validate="Username is required">
+                                        <input class="input100" type="text" name="username" [(ngModel)]="username"
+                                                placeholder="Username / Phone Number">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100">
+                                                <i class="fa fa-user"></i>
+                                        </span>
+                                </div>
+
+                                <div *ngIf="initialLoginForm" class="wrap-input100 validate-input"
+                                        style="margin-bottom: 10px;" data-validate="Password is required">
+                                        <input class="input100" type="{{input_type}}" [(ngModel)]="password" name="pass"
+                                                placeholder="Password">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100"> <i class="fa fa-lock"></i> </span>
+                                      
+                                </div>
+                                <div *ngIf="(!initialLoginForm || resetPasswordTemplate)"
+                                        class="wrap-input100 validate-input" style="margin-bottom: 10px;"
+                                        data-validate="Phone number is required">
+                                        <input class="input100" type="text" name="phoneNum" [(ngModel)]="resetuname"
+                                                placeholder="Enter Mobile number*">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100">
+                                                <i class="fa fa-mobile"></i>
+                                        </span>
+                                </div>
+                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input"
+                                        style="margin-bottom: 10px;" data-validate="password is required">
+                                        <input class="input100" type="password" name="password1" [(ngModel)]="password1"
+                                                placeholder="New Password">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100">
+                                                <i class="fa fa-key"></i>
+                                        </span>
+                                </div>
+                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input"
+                                        style="margin-bottom: 10px;" data-validate="password is required">
+                                        <input class="input100" type="password" name="password2" [(ngModel)]="password2"
+                                                placeholder="Confirm New Password">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100">
+                                                <i class="fa fa-key"></i>
+                                        </span>
+                                </div>
+                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input"
+                                        style="margin-bottom: 10px;" data-validate="OTP is required">
+                                        <input class="input100" type="text" name="otp" [(ngModel)]="otp3"
+                                                placeholder="Enter Reset Password OTP">
+                                        <span class="focus-input100"></span>
+                                        <span class="symbol-input100">
+                                                <i class="fa fa-key"></i>
+                                        </span>
+                                </div>
+
+
+                                <div *ngIf="initialLoginForm" class="container-login100-form-btn"
+                                        style="padding-top: 10px;">
+
+                                        <button class="login100-form-btn" (click)="loginemail()"> Login </button>
+                                </div>
+
+                                <div *ngIf="(!initialLoginForm && !resetPasswordTemplate)"
+                                        class="container-login100-form-btn" style="padding-top: 10px;">
+                                        <button class="login100-form-btn" (click)="resetcode()"> Send OTP </button>
+                                </div>
+
+                                <div *ngIf="(!initialLoginForm && !resetPasswordTemplate)"
+                                        class="container-login100-form-btn" style="padding-top: 50px">
+                                        <a class="txt1" (click)="backtologin()">
+                                                Back to Login
+                                        </a>
+                                </div>
+
+                                <div *ngIf="resetPasswordTemplate" class="container-login100-form-btn"
+                                        style="padding-top: 10px;">
+                                        <button class="login100-form-btn" (click)="resetpassword()">
+                                                Reset Password
+                                        </button>
+                                </div>
+
+                                <div *ngIf="resetPasswordTemplate" class="container-login100-form-btn"
+                                        style="padding-top: 50px">
+                                        <a class="txt1" (click)="backtopreviousform()">
+                                                Back to previous Form
+                                        </a>
+                                </div>
+                                <div class="container-login100-form-btn" style="margin-top: 20px;border-radius: 15px;"
+                                        *ngIf="showError">
+                                        <p class="txt1" style="color:#ad0000;font-size:20px;">{{mess}}</p>
+
+                                </div>
+
+                                <div *ngIf="initialLoginForm" class="container-login100-form-btn"
+                                        style="padding: 10px;">
+                                        <div> <a class="txt1" (click)="forgot_passwrord()"> Forgot Username / Password?
+                                                </a></div>
+                                </div>
+                                <div *ngIf="showLoader" style="padding-left: 40%;">
+                                        <div class="lds-ellipsis">
+                                                <div></div>
+                                                <div></div>
+                                                <div></div>
+                                                <div></div>
+                                        </div>
+                                </div>
+
+                        </form>
+                </div>
+        </div>
+</div> -->
+
+<div class="limiter">   
+        <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
+                <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
+                        <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
+                </div>
+                <div class="col-sm-6 col-md-6 col-lg-6" >         
+                      <div style="text-align: right;padding-top: 20px;">         
+                              <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
+                              <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
+                              <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
+                              <!-- {{supportContact}} -->
+                      </div>
+                </div>
+                <div class="col-sm-4 col-md-4 col-lg-4">      
+                        <div style="text-align: center;">
+                                <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="getADemoReq()">{{demoString}}</button>
+                                <!-- <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: 15px;margin-left: 20px;">Go To Site</button> -->
+                                <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>
+                                <!-- <i title="Shop Tracker" class="fas fa-shopping-cart" style="cursor: pointer;float: right; font-size: 25px; padding: 24px 10px 0px 0px; color: #2db4c1;" (click)="gotoShop()"></i> -->
+                                <!-- *ngIf="showLink || cpn_showLink || saanvi_showLink" -->
+                        </div>
+                </div>            
+        </div>
+        <div class="container-login100" >
+                <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+                <div class="row" style="overflow: auto;">
+                        <div class="wrap-login1001 col-sm-12 col-md-6 col-lg-6 col-xl-6" style="padding-top: 50px;">
+                                <h1 style="font-weight: 800; padding-bottom: 30px; font-size: 40px;color:white ">Welcome to {{organisationName}}</h1>
+                                <div *ngIf= "primaryContent === true">
+                                        <p style="font-size: 22px; color: #141414; font-weight: 500; line-height: 1.4;font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;">{{tagline}}</p>
+                                </div>
+                                <div *ngIf= "primaryContent === false">
+                                        <h5>We offer: GPS-based Fleet Tracking software, Dashboard for real time fleet monitoring over the internet and comprehensive Management Reports.</h5>
+                                        <h2 style="margin-top: 20px;">Now available on<span style="color:red"> iOS</span> and <span style="color:red">Android</span> </h2>
+                                </div>
+                             
+                                <div>
+                                        <a href="{{androidAppLink}}" target="_blank">
+                                                <img src="../assets/image/android.png" alt="Android Link" height="60" width="160" style="cursor: pointer;">
+                                        </a>
+                                        <a href="{{iosAppLink}}" target="_blank">
+                                                <img src="../assets/image/iosLink.png" alt="IOS Link" height="60" width="160" style="cursor: pointer;">
+                                        </a>                                
+                                </div>
+                                <div *ngIf= "primaryContent === false">
+                                        <h5 style="line-height: 30px;">Support Time: 08:00 AM TO 6:00 PM </h5>
+                                        <h5 style="color:red">E-Fast Track Solutions - Fastest Growing Vehicle Tracking Company Nepal </h5>
+                                </div>
+                             
+                        </div>
+                        <div class="wrap-login1001 col-sm-12 col-md-6 col-lg-6 col-xl-6" style="width: 100%; height: 100%;">
+                                <div style="width: 75%;margin-left: 100px;">
+                                        <form *ngIf="!requestDemo" class="login100-form validate-form form-group" style="background: white; padding: 10px 0px 40px 0px;box-shadow: 6px 6px 6px 0px #5f5d5d; border-radius: 6px;"  #lgForm="ngForm">     
+                                                <!-- *ngIf="!showLink" -->
+                                                <div style="font-size: 30px; font-weight: 900; width: 100%; padding-bottom: 30px; ">
+                                                        <span  class="login100-form-title" style="color: #ffd000; padding-top: 5px; box-shadow: 0px 3px 3px #eaeaea; padding-bottom: 5px; " > LOGIN </span>
+                                                </div>
+                                                <div *ngIf="initialLoginForm" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Username is required">
+                                                        <input class="input100" type="text" name="username" [(ngModel)]="username" placeholder="Username / Phone Number">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-user"></i> </span>
+                                                </div>
+                                                <div *ngIf="initialLoginForm" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Password is required">
+                                                        <input class="input100" type="{{input_type}}" [(ngModel)]="password" name="pass" placeholder="Password">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-lock"></i> </span>                                   
+                                                </div>
+                                                <div *ngIf="(!initialLoginForm || resetPasswordTemplate)" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Phone number is required">
+                                                        <input class="input100" type="text" name="phoneNum" [(ngModel)]="resetuname" placeholder="Enter your email*">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-mobile"></i> </span>
+                                                </div>
+                                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="password is required">
+                                                        <input class="input100" type="password" name="password1" [(ngModel)]="password1" placeholder="New Password">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-key"></i> </span>
+                                                </div>
+                                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="password is required">
+                                                        <input class="input100" type="password" name="password2" [(ngModel)]="password2" placeholder="Confirm New Password">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-key"></i> </span>
+                                                </div>
+                                                <div *ngIf="resetPasswordTemplate" class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="OTP is required">
+                                                        <input class="input100" type="text" name="otp" [(ngModel)]="otp3" placeholder="Enter Reset Password OTP">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-key"></i> </span>
+                                                </div>
+                                                <div *ngIf="initialLoginForm" class="container-login100-form-btn" style="padding-top: 10px;">
+                                                        <button class="login100-form-btn" (click)="loginemail()"> Login </button>
+                                                </div>
+                                                <div *ngIf="(!initialLoginForm && !resetPasswordTemplate)" class="container-login100-form-btn" style="padding-top: 10px;">
+                                                        <button class="login100-form-btn" (click)="resetcode()"> Send OTP </button>
+                                                </div>        
+                                                <div *ngIf="(!initialLoginForm && !resetPasswordTemplate)" class="container-login100-form-btn" style="padding-top: 50px; color: black;">
+                                                        <a class="txt1" (click)="backtologin()" > Back to Login </a>
+                                                </div>
+                                                <div *ngIf="resetPasswordTemplate" class="container-login100-form-btn" style="padding-top: 10px;color:black">
+                                                        <button class="login100-form-btn" (click)="resetpassword()"> Reset Password </button>
+                                                </div>
+                                                <div *ngIf="resetPasswordTemplate" class="container-login100-form-btn" style="color :black ;padding-top: 50px">
+                                                        <a class="txt1" (click)="backtopreviousform()"> Back to previous Form </a>
+                                                </div>      
+                                                <div *ngIf="initialLoginForm" class="container-login100-form-btn" style="padding: 10px;">
+                                                        <div style="line-height: 3.6; color: #8a8a8a; font-weight: 400;"> 
+                                                                <p *ngIf="showError" class="txt1" style="color:#ad0000;font-size:20px;">{{mess}}</p>
+                                                                <a class="txt1" (click)="forgot_passwrord()"> Forgot Username / Password? </a>
+                                                        </div>
+                                                </div>
+                                                <!-- <div *ngIf="showLoader" style="padding-left: 40%;">
+                                                        <div class="lds-ellipsis">
+                                                                <div></div>
+                                                                <div></div>
+                                                                <div></div>
+                                                                <div></div>
+                                                        </div>
+                                                </div> -->
+                                        </form>
+                                        <form *ngIf="requestDemo" class="login100-form validate-form form-group" style="background: white; padding: 10px 0px 40px 0px;box-shadow: 6px 6px 6px 0px #5f5d5d; border-radius: 6px;"  #lgForm="ngForm">     
+                                                <!-- *ngIf="!showLink" -->
+                                                <div style="font-size: 30px; font-weight: 900; width: 100%; padding-bottom: 30px; ">
+                                                        <span  class="login100-form-title" style="color: #ffd000; padding-top: 5px; box-shadow: 0px 3px 3px #eaeaea; padding-bottom: 5px; " > Demo </span>
+                                                </div>
+                                                <div  class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Username is required">
+                                                        <input class="input100" type="text" name="first_name" [(ngModel)]="rFirst_name" placeholder="First Name">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-user"></i> </span>
+                                                </div>
+                                                <div  class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Username is required">
+                                                        <input class="input100" type="text" name="last_name" [(ngModel)]="rlast_name" placeholder="Last Name">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-user"></i> </span>
+                                                </div>
+                                                <div  class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Username is required">
+                                                        <input class="input100" type="text" name="email" [(ngModel)]="rEmail" placeholder="Email">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-user"></i> </span>
+                                                </div>
+                                                <div  class="wrap-input100 validate-input" style="margin-bottom: 10px;" data-validate="Username is required">
+                                                        <input class="input100" type="number" name="rphone" [(ngModel)]="rPhone" placeholder="Mobile No.">
+                                                        <span class="focus-input100"></span>
+                                                        <span class="symbol-input100"> <i class="fa fa-user"></i> </span>
+                                                </div>
+        
+                                                <div class="container-login100-form-btn" style="padding-top: 10px;">
+                                                        <button class="login100-form-btn" (click)="requestDemosubmit()"> Request Demo </button>
+                                                </div> 
+                                        </form>
+                                </div>
+                               
+                        </div>
+                </div>
+         
+        </div>
+</div>
\ No newline at end of file
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000..51e0f7b
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,1008 @@
+import { environment } from './../../environments/environment';
+import { Component, OnInit, ViewChild, EventEmitter,Output, OnDestroy, Inject } from '@angular/core';
+import {FormGroup, FormControl, Validators} from '@angular/forms';
+import {Contact} from '../contact';
+import {ContactService} from '../contact.service';
+import { Injectable } from '@angular/core';
+import {Login} from '../login';
+import {Otp} from '../otp';
+import {CountDown} from "ng2-date-countdown";
+import { Subscription } from 'rxjs/Rx';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/map';
+
+import {MdDialog, MdSnackBar} from '@angular/material';
+import { Title } from '@angular/platform-browser';
+
+import { Http, Response } from '@angular/http';
+import { NguiMessagePopupComponent, NguiPopupComponent} from '@ngui/popup';
+import {DashComponent} from '../dash/dash.component';
+// import {Md5} from 'ts-md5/dist/md5';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Otp_log} from '../otp_log'
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {Observable} from 'rxjs/Observable'; 
+import { TranslateService } from 'ng2-translate';
+import { DOCUMENT } from '@angular/common';
+import { AnnouncementComponent } from '../const/announcement/announcement.component';
+@Component({
+  selector: 'app-services',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css'],
+  providers: [ContactService],
+  
+})
+@Injectable()
+export class LoginComponent implements OnInit {
+  initialLoginForm :boolean = true;
+  resetPasswordTemplate:boolean = false;
+  userNameCheck: Number;
+    @ViewChild(NguiPopupComponent) popup: NguiPopupComponent;
+    logins: Login[]=[];
+    demoString = "Demo Request"; 
+    login: Login;
+    primaryContent:Boolean=true;
+    contacts: Contact[]=[];
+    contact: Contact;
+    otp_logs: Otp_log[]=[];
+    otp_log: Otp_log;
+    first_name: string;
+    tagline= 'Universal platform to track all kinds of GPS devices in just one click...#VehicleTracking#GPSPlatform';
+    last_name: string;
+    requestDemo : boolean = false; 
+    username:any;
+    organisationName : any ;
+    emailf: boolean =true;
+    otpf: boolean =false;
+    otpg: boolean = false;
+    email: string;
+    buttonText = "Login";
+    password: string;
+    org_name: string;
+   phone: string;
+   message: string
+  // login:any;
+   login1:any;
+   showLoader:boolean =false;
+   showMenu = environment.showLandingpageMenu;
+   loginList:any;
+   conResponse:any;
+   con:any;
+   logmob:any;
+   encryptedString:any
+otp:any;
+status:any;
+executed:any;
+j:any;
+i=0;
+mess:any
+
+passwordIcon:any = "visibility_off";
+  dealerid: any;
+  android: any;
+  iphone: any;
+  hidePassword: boolean;
+  showLink: boolean;
+  backgroundImage: string;
+  app_logo: string;
+  logo_1: string ;
+  cpn_showLink: boolean =false;
+  mainSiteurl:any; 
+  saanvi_showLink: boolean = false;
+  urlIdentifier: string;
+  supportContact: any;
+  showNav: boolean;
+  clientUrl: string;
+  androidAppLink: any;
+  iosAppLink: any;
+
+  constructor(private titleServic: Title,public dialog: MdDialog,private dataService: ContactService,private _flashMessagesService: FlashMessagesService,private router: Router,public snackBar: MdSnackBar,public translate: TranslateService,@Inject(DOCUMENT) private _document: HTMLDocument) { 
+    let split1 = document.URL.split('//')[1];
+    console.log(split1,document); 
+    let split2 = split1.split('/')[0]; 
+    // let split3="gps.fleetpolice.com"
+    // let split2= "login.cpntrack.com" ; 
+  //  this.backgroundImage = '../../assets/image/login_bg.jpg';\
+
+  this.clientUrl = split2 ; 
+  
+    console.log("this is split2 response",split2);
+    if(split2 == "www.oneqlik.in"){ 
+      this.showLink = true;
+      this.mainSiteurl  = 'https://web.oneqlik.in/telematics/';
+      this.backgroundImage = '../../assets/image/login_bg.jpg';
+      this.logo_1  = '../../assets/image/f_logo.jpg' ; 
+    }else{  
+      console.log("Inside showlink false");
+      this.showLink = false;
+    }
+
+    if(split2 == "login.cpntrack.com"){ 
+
+      this.cpn_showLink = true;
+      this.mainSiteurl  = 'http://www.cpntrack.com/';
+    
+    }
+
+    if((split2 == "saanvisecurity.in")||(split2 == "www.saanvisecurity.in")){
+      this.saanvi_showLink = true;
+      this.mainSiteurl  = 'http://site.saanvisecurity.in';
+    }
+
+    if((split2 == "fastracxgps.in")||(split2 == "www.fastracxgps.in")||(split2 == "fastracxgps")){
+      this.saanvi_showLink = true;
+      this.mainSiteurl  = 'http://www.fastracxgps.com';
+    }
+   
+    if((split2 == "e-fasttracksolutions")||(split2 == "tracknp.e-fasttracksolutions.com")){
+      console.log('e-fasttracksol');
+      // this.saanvi_showLink = true;
+      this.primaryContent = false;
+      this.mainSiteurl  = 'https://www.e-fasttracksolutions.com';
+    }
+    if(split2 == "fleetpolice.com" || split2 == "gps.fleetpolice.com"){
+      this.mainSiteurl  = 'https://www.fleetpolice.com';
+    }
+   }
+  adddev(){
+    this.otpf = false ;
+    this.emailf = true;
+  }
+  loginot(){
+    // console.log("runnig OTP");
+    this.emailf = false;
+    // console.log("a");
+    this.otpf = true ;
+  }
+
+  validatenum(num){
+
+ var re1 = /^(\+91[\-\s]?)?[0]?(91)?[6789]\d{9}$/;
+    return re1.test(num);
+  }
+  
+
+  validateEmail(email) {
+    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return re.test(email);
+  }
+  showError : boolean = false;
+
+  setOrgInLocalStorage(data){
+    // console.log("kdddddddddddddddddd",data,data.isSuperAdmin,data.isDealer);
+    
+    if(data.isSuperAdmin){
+       console.log("kdddddddddddddddddd1111",data,data.isSuperAdmin,data.isDealer);
+      this.dataService.getImagePath(data._id).subscribe(res=>{
+         console.log("ssss","sas",res);
+        if(res.organisation){
+          localStorage.setItem('ORG',JSON.stringify(res.organisation))
+        }else{
+          localStorage.setItem('ORG',JSON.stringify(res))
+        }
+      })
+    }else if(data.isDealer){
+       console.log("kdddddddddddddddddd",data,data.isSuperAdmin,data.isDealer);
+       this.dataService.getImagePath(data.supAdmin).subscribe(res=>{
+         console.log("ssss","sas",res);
+         
+         if(res.organisation){
+          localStorage.setItem('ORG',JSON.stringify(res.organisation))
+        }else{
+          localStorage.setItem('ORG',JSON.stringify(res))
+        }
+       
+      })
+    }
+  }
+
+
+  loginemail(){
+    var that = this; 
+    this.urlIdentifier = localStorage.getItem('referrer_token=');
+    if(this.urlIdentifier != undefined){
+    let loginInfo = JSON.parse(localStorage.getItem('referer_obj'));
+    this.username = loginInfo.username; 
+    this.password = loginInfo.pass; 
+    }
+
+   
+  if((this.username==null) || (this.password == null))
+  {
+    var input = $('.validate-input .input100');
+
+    $('.validate-form').on('submit',function(){
+        var check = true;
+
+        for(var i=0; i<input.length; i++) {
+            if(that.uservalidate(input[i]) == false){
+                that.showValidate(input[i]);
+                check=false;
+            }
+        }
+
+        return check;
+    });
+
+
+    $('.validate-form .input100').each(function(){
+        $(this).focus(function(){
+           that.hideValidate(this);
+        });
+    })
+    
+  } else{
+
+    var  stringChk = this.username.trim();
+    console.log(Number(this.username));
+    if((stringChk.length == 10)&&(Number(this.username) > 0)){
+      this.executed = true;
+      const newlog ={
+        ph_num: this.username.trim(),
+        psd: this.password
+    }
+    this.showLoader = true;
+    // debugger;
+    this.dataService.log(newlog)
+    .subscribe(login => {
+      this.showLoader = false;
+      this.logins.push(login);   
+    //  console.log(JSON.parse("TOKEN",login.token));
+      window.localStorage['token'] = login.token;
+      this.setOrgInLocalStorage(JSON.parse(atob(login.token.split('.')[1])))
+       window.localStorage['currentpwd'] = this.password;  
+       localStorage.setItem('currentuser',JSON.parse(atob(login.token.split('.')[1]))._id);
+      var isOperator  =  JSON.parse(atob(login.token.split('.')[1])).isOperator;
+      var userId =  JSON.parse(atob(login.token.split('.')[1]))._id;
+
+      this.getLanguage(userId,isOperator,JSON.parse(atob(login.token.split('.')[1])).customer_role);
+   
+    } , (err: any) => {
+      //  console.log(err.status); 
+      // console.log(err);
+      this.showLoader = false;
+    if(err.status !=   200)
+    {
+      this.showError = true; 
+      this.mess = err._body.split("\"")[3];
+      //console.log(this.mess);
+    
+
+      // this._flashMessagesService.show( this.mess, { cssClass: 'alert-danger', timeout: 1000 });
+      
+    }
+    } );
+    }
+    else if(this.validateEmail(this.username)){
+            // console.log("emailaddress");
+            this.executed = true;
+            const newlog ={
+             emailid: this.username,
+             psd: this.password
+          }
+          this.showLoader = true;
+          this.dataService.log(newlog)
+            .subscribe(login => {
+              this.showLoader = false;
+              this.logins.push(login);
+              // console.log(JSON.parse("TOKEN",login.token));
+              var isOperator  =  JSON.parse(atob(login.token.split('.')[1])).isOperator;
+              console.log(isOperator);
+              window.localStorage['token'] = login.token;
+               this.setOrgInLocalStorage(JSON.parse(atob(login.token.split('.')[1])))
+              window.localStorage['currentpwd'] = this.password
+              localStorage.setItem('currentuser',JSON.parse(atob(login.token.split('.')[1]))._id);
+              var userId =  JSON.parse(atob(login.token.split('.')[1]))._id;
+              this.getLanguage(userId,isOperator,JSON.parse(atob(login.token.split('.')[1])).customer_role);
+          
+            }, (err: any) => {
+              // console.log(err.status);
+              // console.log(err);
+              this.showLoader = false;
+              if (err.status != 200) {
+                this.showError = true; 
+                this.mess = err._body.split("\"")[3];
+                // console.log(this.mess);
+                // this._flashMessagesService.show(this.mess, { cssClass: 'alert-danger', timeout: 1000 });
+
+              }
+            });
+        
+    }
+    else{
+     // console.log("hfdufgudsgfugdsufgukdsg")
+    this.executed = true;
+    const newlog ={
+    user_id: this.username,
+    psd: this.password
+}
+this.showLoader = true;
+this.dataService.log(newlog)
+.subscribe(login => {
+  this.showLoader = false;
+  this.logins.push(login);
+  
+  console.log(JSON.parse(atob(login.token.split('.')[1])));
+  window.localStorage['token'] = login.token;
+   this.setOrgInLocalStorage(JSON.parse(atob(login.token.split('.')[1])))
+  window.localStorage['currentpwd'] = this.password
+  localStorage.setItem('currentuser',JSON.parse(atob(login.token.split('.')[1]))._id);
+  var isOperator  =  JSON.parse(atob(login.token.split('.')[1])).isOperator;
+  console.log(isOperator);
+  var userId =  JSON.parse(atob(login.token.split('.')[1]))._id;
+  this.getLanguage(userId,isOperator,JSON.parse(atob(login.token.split('.')[1])).customer_role);
+
+ 
+
+  //this.router.navigateByUrl("const?_i="+login.token);
+} , (err: any) => {
+  //  console.log(err.status); 
+  
+  this.showLoader = false;
+if(err.status !=   200)
+{
+  this.mess = err._body.split("\"")[3];
+ // console.log(this.mess);
+ this.showError = true; 
+  // this._flashMessagesService.show( this.mess, { cssClass: 'alert-danger', timeout: 1000 });
+  
+}
+} );
+    }
+}}
+mes:any;
+view3:boolean = false;
+loginn:boolean = true;
+resetuname:any;
+
+//Forgot Password
+forgotPwd(){
+  this.loginn = false;
+  this.view3 = true;
+}
+forgotPwd2(){
+  this.loginn = true;
+  this.view3 = false;
+}
+rstemail:any;
+rstcode:any;
+rstbtn:any
+rstbtn2:boolean=true;
+password1:any;
+psw:boolean=false;
+password2:any;
+rstemail2:any
+otp3:any;
+data_descip:any;
+
+resetpassword(){
+  if(this.password1 != this.password2){
+    let message1="New Password and Reset Password do not match";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+
+      
+    });  
+    
+    // this._flashMessagesService.show("New Password and Reset Password do not match", { cssClass: 'alert-danger', timeout: 1000 });
+  }
+  else{
+    this.dataService.resetpwd(this.resetuname,this.otp3,this.password1).subscribe(
+      
+      (data) => {
+        
+        this.rstemail2 = data 
+        // console.log(this.rstemail2)
+        if(this.rstemail2.message == "Password Sucessfully Changes"){
+          this.initialLoginForm = true;
+          this.resetPasswordTemplate = false;
+          this.tost1("PassSucc");
+          let message1="Password changed successfully";
+          let action:any;
+          this.snackBar.open(message1, action, {
+            duration: 5000,
+            
+          });  
+         this.loginn = true;
+         this.view3  = false;
+
+          }
+          else if(this.rstemail2.message == "Wrong OTP try again"){
+            let message1="Wrong OTP try again";
+            let action:any;
+            this.snackBar.open(message1, action, {
+              duration: 5000,
+              
+            });  
+            // //console.log("C")
+            // this._flashMessagesService.show("Wrong OTP", { cssClass: 'alert-danger', timeout: 1000 });
+          }
+    
+      },
+      (err: any) => {   
+         if(err.status ==   500)
+        {
+          console.log(JSON.parse(err._body).message);
+          var err_text_1 = JSON.parse(err._body).message;     
+          let action:any;
+          this.snackBar.open(err_text_1, action, {
+            duration: 5000,
+            
+          });  
+          // this.tost1("err")
+        }
+       }   
+    )
+  }
+ 
+}
+resetcode(){
+  if(this.resetuname == null || this.resetuname == undefined || this.resetuname ==""){
+    let message1="Please enter Email ID/Mobile Number";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    });  
+    // this._flashMessagesService.show("Please enter Email ID/Mobile Number", { cssClass: 'alert-danger', timeout: 1000 });
+  }
+ else{
+  this.dataService.resetemail(this.resetuname).subscribe(
+      
+    (data) => {
+      
+      this.rstemail = data 
+      if(this.rstemail.message == "OTP sent successfully"){
+       this.resetPasswordTemplate = !this.resetPasswordTemplate;
+       this.rstbtn2=false;
+       this.rstcode=true
+       this.rstbtn=true;
+       this.psw=true;
+       let message = "Reset Password OTP Sent to your mobile number";
+       let action
+       this.snackBar.open(message, action, {
+         duration: 3000,
+         
+       });
+      //  this._flashMessagesService.show("Reset Password OTP Sent to your mobile number", { cssClass: 'alert-success', timeout: 1000 });
+
+        }
+        else if(this.rstemail.message == "email sent"){
+          this.resetPasswordTemplate = !this.resetPasswordTemplate;
+          let message = "Reset Password Link Sent to your Email ID";
+          let action
+          this.snackBar.open(message, action, {
+            duration: 3000,
+            
+          });
+          // this._flashMessagesService.show("Reset Password Link Sent to your Email ID", { cssClass: 'alert-success', timeout: 1000 })
+        }
+     
+  
+    },
+    (err)=>{
+      
+      if(err.status ==   500)
+      {
+        this.err_text = JSON.parse(err._body);
+        this.tost1("err")
+      }
+    })
+  }
+} 
+
+err_text:any;
+
+loginotp(){
+  if(this.username==null)
+  {
+    this._flashMessagesService.show('Enter Phone Number or password', { cssClass: 'alert-danger', timeout: 1000 });
+    
+  }
+  else{
+    this.executed = true;
+  const newlog ={
+   ph_num: this.username,
+    otp: this.password
+}
+
+this.dataService.log(newlog)
+.subscribe(login => {
+  this.logins.push(login);
+ console.log(JSON.parse("TOKEN",login.token));
+ var tokenData=JSON.parse("TOKEN",login.token)
+ window.localStorage['token'] = login.token
+ window.localStorage['currentpwd'] = this.password
+ localStorage.setItem('currentuser',JSON.parse(atob(login.token.split('.')[1]))._id);
+//  if()
+ this.router.navigateByUrl("const?_status="+"OK");
+ // this.router.navigateByUrl("const?_i="+login.token);
+
+} , (err: any) => { console.log(err.status); 
+  // console.log(err);
+if(err.status !=   200)
+{
+  this.mes = err._body.split("\"")[3];
+  this._flashMessagesService.show(this.mes, { cssClass: 'alert-danger', timeout: 500 }); 
+}
+});
+}}
+
+cou :any;
+ loginwithotp(){
+    if(this.username==null)
+    {
+      this._flashMessagesService.show('Enter Mobile number', { cssClass: 'alert-danger', timeout: 1000 });
+      
+    }
+    else{
+    const newContact2 ={
+      ph_num: this.username
+  }
+  this.dataService.addContact2(newContact2)
+  .subscribe(contact => {
+    this.contacts.push(contact);
+  });
+  this._flashMessagesService.show('OTP Sent Sucessfully', { cssClass: 'alert-success', timeout: 1000 });
+  this.otpg=true;
+  this.retry2=true;
+  this.retry=false;
+  this.countdown( "countdown", 9, 60 );
+/*   this.countDown = Observable.timer(0,1000)
+    .take(this.count)
+    .map(()=> --this.count);
+console.log(this.countDown)   */
+
+  
+ 
+  this.dataService.getContacts2()
+  .subscribe(
+    (data1 => this.login1 = data1)
+  );
+}}
+ 
+ 
+
+/*     addContact2(value){
+      if (!this.executed) {
+        this.executed = true;
+      const newContact2 ={
+        phone: value
+    }
+    this.dataService.addContact2(newContact2)
+    .subscribe(contact => {
+      this.contacts.push(contact);
+      
+    });
+    this._flashMessagesService.show('OTP Sent Sucessfully', { cssClass: 'alert-success', timeout: 3000 }); 
+    
+  }
+
+    } */
+  
+    click1(event){
+      if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+      }
+      /* if(event.keyCode===13){
+      this.otp_window();
+      } */
+      
+      else
+      event.preventDefault();
+      }
+      
+      countDown;
+      count = 10;
+      ticks = 0;
+
+
+countdown( elementName, minutes, seconds )
+{
+    var element, endTime, hours, mins, msLeft, time;
+
+    function twoDigits( n )
+    {
+        return (n <= 9 ? "0" + n : n);
+    }
+
+    function updateTimer()
+    {
+        msLeft = endTime - (+new Date);
+        if ( msLeft < 1000 ) {
+            element.innerHTML = "OTP Expired!!";
+        } else {
+            time = new Date( msLeft );
+            hours = time.getUTCHours();
+            mins = time.getUTCMinutes();
+            element.innerHTML = (hours ? hours + ':' + twoDigits( mins ) : mins) + ':' + twoDigits( time.getUTCSeconds() );
+            setTimeout( updateTimer, time.getUTCMilliseconds() + 500 );
+        }
+    }
+
+    element = 0;
+    element = document.getElementById( elementName );
+    endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
+    updateTimer();
+  }
+  retry2 :boolean =false;
+  retry:boolean =true;
+  tost1(divid){
+    if(divid == "dup_email"){
+      this.data_descip = "Email ID Already Exists";
+      launch_toast();
+    }
+    else if(divid == "Confirm_Email"){
+      this.data_descip = "Confirmation Link Sent please check your Email ID"
+      window.localStorage['Email'] = 'False'
+      launch_toast();
+    }
+    else if(divid == "Confirm_Mobile"){
+      this.data_descip = "Registered Successfully"
+      window.localStorage['Mobile'] = 'False'
+      launch_toast();
+    }
+    else if(divid == "EmM"){
+      this.data_descip = "Mobile Verified Please Check Email"
+      window.localStorage['EmailMobile'] = 'False'
+      launch_toast();
+    }
+    else if(divid == "err"){
+      this.data_descip = this.err_text.message
+      launch_toast();
+    }
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+    }
+     }
+     url:any;
+     userData:any;
+     logo:any;
+     titleService:any;
+     text:any;
+     dev_url=environment.hostUrl;
+    
+  ngOnInit() {
+  
+    this.dealerid =  window.localStorage['DealerID'];
+    this.android =  window.localStorage['android'];
+    // console.log(this.android)
+    this.iphone =  window.localStorage['iphone'];
+
+   
+
+    if(window.localStorage.token){
+      if( window.localStorage['Custumer'] == 'ON'){
+        window.localStorage['token'] =  window.localStorage['Dealer_token'];
+        window.localStorage['Custumer'] = 'OFF'
+        this.router.navigateByUrl("const?_status="+"OK");
+      }
+      else{
+        this.router.navigateByUrl("const?_status="+"OK");
+      }
+     
+    }
+   
+
+    if(window.localStorage.Email == 'True'){
+      this.tost1("Confirm_Email");
+    }
+    else if(window.localStorage.Mobile == 'True'){
+      this.tost1("Confirm_Mobile");
+    }
+    else if(window.localStorage.EmailMobile == 'True'){
+      this.tost1('EmM');
+    }
+    else {
+    //  window.localStorage.clear();
+    //  console.log("Working");
+      
+   
+      // let split1  = testUrl.split('//')[1];
+      let split1 = document.URL.split('//')[1];
+      console.log('split1',split1);
+   
+      let split2 = split1.split('.')[1];
+      // let split2 = split1.split('/')[1];
+     
+      
+      this.url = split2;
+      console.log('this.url',this.url);
+  
+   
+      
+      this.dataService.dealerInfo(this.url).subscribe(
+        data => {
+          this.userData = data 
+          console.log(this.userData);
+        
+       //  this.logo = "http://localhost:3000"+ this.userData.logo;
+        this.logo = this.dev_url+this.userData.logo;    
+        if(this.url != 'oneqlik'){    
+          this.logo_1    =  this.dev_url+this.userData.logo;
+          if(this.userData.background_image == undefined) {
+            this.backgroundImage = '../../assets/image/login_bg.jpg' ;     
+          }else{
+            this.backgroundImage = this.dev_url + this.userData.background_image;        
+          }    
+        }
+        
+          this.titleServic.setTitle(this.userData.organisationName);
+          this.organisationName = (this.url == 'oneqlik')?'OneQlik':this.userData.organisationName  ; 
+          this.supportContact = this.userData.contact_support?this.userData.contact_support : ''; 
+          this.tagline=  this.userData.tagline?this.userData.tagline : this.tagline;
+          this._document.getElementById('appFavicon').setAttribute('href', this.dev_url+this.userData.favicon);
+          this.text=this.userData.text;
+            window.localStorage['dealerName']= this.userData.dealerName;
+            window.localStorage['DealerID'] = this.userData.email
+            window.localStorage['DealerPhone'] =this.userData.contactNumber;
+            window.localStorage['logo'] =this.logo;
+            window.localStorage['text'] = this.text;
+            window.localStorage['address'] =this.userData.address;
+            window.localStorage['mobile'] = this.userData.contactNumber;
+            window.localStorage['facebook'] = this.userData.facebook;
+            this.androidAppLink  =this.userData.androidApp ;
+            this.iosAppLink = this.userData.appleApp ; 
+
+        },err=>{
+          this.backgroundImage = '../../assets/image/login_bg.jpg' ;
+       
+        }) 
+
+    }
+  
+    
+
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+        history.pushState(null, null, document.URL);
+    });
+/*     console.log(this.countDown) 
+console.log(--this.count)  */ 
+
+    this.dataService.getdet() .subscribe( logins => this.logins = logins);
+ 
+    for(var i = 0; i <this.showMenu.length;i++){
+      if (this.url == this.showMenu[i]) {
+        this.showNav = true;
+        return;
+      } else {
+        this.showNav = false;
+      }
+    }
+
+
+  }
+
+  forgotpasswordText = "Forgot password ?";
+  userForm = new FormGroup({
+    email: new FormControl(''),
+    password: new FormControl(''),
+  });
+  forgotpassword(){
+    this.hidePassword = !this.hidePassword;
+    if(this.hidePassword){
+      this.forgotpasswordText = "< Back to login";
+      this.buttonText = "Reset password";
+    }else{
+      this.forgotpasswordText = "Forgot password ?"
+      this.buttonText = "Login";
+    }
+  }
+  uservalidate(input) {
+    if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
+        if($(input).val() == null) {
+            return false;
+        }
+    }
+    else {
+        if($(input).val() == ''){
+            return false;
+        }
+    }
+}
+
+showValidate(input) {
+  var thisAlert = $(input).parent();
+  $(thisAlert).addClass('alert-validate');
+}
+
+hideValidate(input) {
+  var thisAlert = $(input).parent();
+
+  $(thisAlert).removeClass('alert-validate');
+}
+
+catchevent(){
+  console.log("Inside function");
+}
+
+forgot_passwrord(){
+  this.initialLoginForm = !this.initialLoginForm;
+  console.log("forgot password clicked");
+}
+phoneNum:any;
+sendOtp(){
+  this.resetPasswordTemplate = !this.resetPasswordTemplate;
+  console.log(this.phoneNum);
+}
+
+backtologin(){
+  this.initialLoginForm = true;
+  this.resetPasswordTemplate = false;
+}
+
+resetPasswordd(){
+  console.log('reset password clicked')
+}
+
+backtopreviousform(){
+  // this.initialLoginForm = !this.initialLoginForm;
+  this.resetPasswordTemplate = !this.resetPasswordTemplate;
+}
+
+selectedlanguage= 'en';
+getLanguage(userid,isOperator,customer_role){
+  console.log("KYC APPROVAL--",customer_role);
+  
+ var Var = { uid: userid };
+ this.dataService.getLanguages(Var).subscribe(res=>{
+   if (res.language_code=="hi"){
+     this.selectedlanguage="en"
+   }else{
+     this.selectedlanguage = res.language_code ; 
+
+   }
+ 
+   console.log("LNAGHS",res.language_code);
+   
+  //  iew : "Spanish",
+      // id : "sp"
+//   },{
+//     view : "Persian",
+//     id : "fa"
+// },{
+//   view : "Arabic",
+//   id : "ar"
+// },{
+//   view : "Portuguese",
+//   id : "pr"
+// },
+// {
+//   view : "Albanian",
+//   id : "newLan2"
+  if(this.selectedlanguage != undefined){
+    // this.selectedlanguage = this.selectedlanguage;
+    // (this.selectedlanguage != ('sp'||'fa'||'pr'||'ar' ||'newLan2'))?'en':this.selectedlanguage;
+    console.log("LNAGHS",this.selectedlanguage);
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+   
+  }else{
+    this.translate.setDefaultLang('en');
+    this.translate.use('en');
+  
+  }
+  if(!res.isDealer && !res.isSuperAdmin){
+   if(res.show_announcement){
+        let dialogRef = this.dialog.open(AnnouncementComponent, {
+               width: '550px',
+               height: '500px', 
+               data:res.announcement  
+               
+             }); 
+            }
+      }
+  localStorage.setItem('appLang',this.selectedlanguage);
+  if(this.urlIdentifier){
+    this.router.navigateByUrl("location");
+  }else if(isOperator === true){
+    this.router.navigateByUrl("Inventorylist");
+  }else{
+    this.dataService.getImagePath(userid).subscribe(res=>{
+      console.log(res);
+      var as = res.accountSuspended ; 
+      if(as === true){
+        this.data_descip =  "Account Suspended , Contact Admin";
+        localStorage.clear();
+        launch_toast();
+      }else{
+       
+        if(customer_role=="kycApproval"){
+          this.router.navigateByUrl("KycApproval");
+        }else if(customer_role=="cc"){
+         
+           this.router.navigateByUrl("reports/notification_master");
+        }else{
+           this.router.navigateByUrl("const?_status="+"OK");
+        }
+      }
+
+      function launch_toast() {
+        // console.log(divid);
+         var x = document.getElementById("toast")
+         //console.log(x);
+         x.className = "show";
+         setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+     }   
+    
+    })
+
+  }
+ },err=>{
+   console.log(err);
+ })
+
+}
+input_type:any= "password";
+tooltip_key : any = "Show Password";
+showpassword(){
+  console.log("Show/Hide Password");
+}
+
+rFirst_name :any;
+rlast_name:any;
+rEmail : any;
+rPhone:any; 
+
+requestDemosubmit(){
+  console.log("requests for demo");
+  console.log({'this.rFirst_name':this.rFirst_name, 'this.rlast_name':this.rlast_name, 'this.rEmail':this.rEmail, 'this.rPhone' : this.rPhone});
+  if((this.rFirst_name == undefined)||(this.rEmail == undefined)){
+    this.data_descip = "Please Provide Phone and Email address";
+    launch_toast();
+
+  }else{
+  
+    var demoPayload = {
+      first_name : this.rFirst_name,
+      last_name : this.rlast_name,
+      email : this.rEmail,
+      phone : this.rPhone,
+      url : this.clientUrl
+    }
+    this.dataService.demorequest(demoPayload).subscribe(res=>{
+      console.log(res);
+      this.data_descip = "Demo Request Sent";
+      launch_toast();
+    },err=>{
+      console.log(err);
+      this.data_descip = "Please Try after sometime";
+      launch_toast();
+    })
+    
+
+  }
+
+
+  function launch_toast() {
+    // console.log(divid);
+     var x = document.getElementById("toast")
+     //console.log(x);
+     x.className = "show";
+     setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
+ }
+
+}
+
+getADemoReq(){
+  this.requestDemo = !this.requestDemo ; 
+  if(this.requestDemo == true){
+    this.demoString = 'Login';
+  }else{
+    this.demoString = "Demo Request" ; 
+  }
+  console.log('this.requestDemo=>',this.requestDemo);
+}
+
+
+gotoShop(){
+  console.log('goto shop');
+ this.router.navigateByUrl("productShop");
+}
+
+}
diff --git a/src/app/login/login.controller.js b/src/app/login/login.controller.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login/user.service.js b/src/app/login/user.service.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login_sucess/loginsuc.component.html b/src/app/login_sucess/loginsuc.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/login_sucess/loginsuc.component.ts b/src/app/login_sucess/loginsuc.component.ts
new file mode 100644
index 0000000..bd347c9
--- /dev/null
+++ b/src/app/login_sucess/loginsuc.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-Loginsuc',
+  templateUrl: './loginsuc.component.html'
+})
+export class LoginsucComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/loginotp.ts b/src/app/loginotp.ts
new file mode 100644
index 0000000..1ef3c3a
--- /dev/null
+++ b/src/app/loginotp.ts
@@ -0,0 +1,4 @@
+export class Loginotp{
+    _id?: string;
+  ph_num: string;
+}
\ No newline at end of file
diff --git a/src/app/lr-number/lr-number.component.html b/src/app/lr-number/lr-number.component.html
new file mode 100644
index 0000000..6b7883c
--- /dev/null
+++ b/src/app/lr-number/lr-number.component.html
@@ -0,0 +1 @@
+<app-all-menus></app-all-menus>
diff --git a/src/app/lr-number/lr-number.component.scss b/src/app/lr-number/lr-number.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/lr-number/lr-number.component.spec.ts b/src/app/lr-number/lr-number.component.spec.ts
new file mode 100644
index 0000000..8b6c1fd
--- /dev/null
+++ b/src/app/lr-number/lr-number.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LRNumberComponent } from './lr-number.component';
+
+describe('LRNumberComponent', () => {
+  let component: LRNumberComponent;
+  let fixture: ComponentFixture<LRNumberComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LRNumberComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LRNumberComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/lr-number/lr-number.component.ts b/src/app/lr-number/lr-number.component.ts
new file mode 100644
index 0000000..b9715cd
--- /dev/null
+++ b/src/app/lr-number/lr-number.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-lr-number',
+  templateUrl: './lr-number.component.html',
+  styleUrls: ['./lr-number.component.scss']
+})
+export class LRNumberComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/map.ts b/src/app/map.ts
new file mode 100644
index 0000000..e26195e
--- /dev/null
+++ b/src/app/map.ts
@@ -0,0 +1,15 @@
+export class Map{
+    _id?: string;
+    message: String;
+    deviceID : String;
+    packet : {
+        cmd : String;
+        retain : Boolean;
+        qos : Number;
+        dup : Boolean;
+        length : Number;
+        topic : String;
+       // payload : { "$binary" : "MTguNjAxMjE1LDczLjc3Nzc2Mg==", "$type" : "00" }
+    };
+    when : Date
+}
\ No newline at end of file
diff --git a/src/app/matrix.ts b/src/app/matrix.ts
new file mode 100644
index 0000000..d3f76f0
--- /dev/null
+++ b/src/app/matrix.ts
@@ -0,0 +1,7 @@
+export class Matrix{
+    _id?: string;
+    Device_ID: string;
+    Matrix_Name: string;
+    User_ID: string;
+    Mess_Top:[string];
+}
diff --git a/src/app/message-utility/message-utility.component.html b/src/app/message-utility/message-utility.component.html
new file mode 100644
index 0000000..4f9a6dd
--- /dev/null
+++ b/src/app/message-utility/message-utility.component.html
@@ -0,0 +1,130 @@
+<app-all-menus ></app-all-menus>
+<div class="limiter" style="height: 100vh;">
+  <div class="row rowStyle">
+    <div class="col-12">
+      <div class="row" style="background: grey;color: white;padding-top: 12px;padding-bottom: 5px;text-align: center;">
+        <div class="col-12">
+          <label>{{'Notification Center' | translate}}</label>
+          <div id="toast">
+            <div id="desc">{{data_descip}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="background: #efecec;;height: 87vh;padding: 5vh;">
+        <div class="col-7" style="background: white;border-right: 1px solid #2d4262;padding-left: 75px;padding-top: 30px;padding-right: 75px;">
+          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> {{'SELECT MODE' | translate}} <span style="color:red">*</span>:</p>
+            </div>
+            <div class="col-8">
+              <md-radio-group [(ngModel)]="notificationType" aria-label="Select an option" (change)="changeValue($event)">
+                <md-radio-button value="1" style="margin-right: 50px;">{{'Notification' | translate}}</md-radio-button>
+                <md-radio-button value="2">{{'SMS'|translate}}</md-radio-button>
+              </md-radio-group>
+            </div>
+          </div>
+
+          <!-- ============================NEW INTEGRATION========================= -->
+          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4">
+              <p> {{'SEND TO' | translate}} <span style="color:red">*</span>:</p>
+            </div>
+            <div class="col-8">
+              <md-radio-group [(ngModel)]="selectedRole" aria-label="Select an option" (change)="changeRole($event)">
+                <md-radio-button value="dealer" style="margin-right: 10px;">{{'Dealers' | translate}}</md-radio-button>
+                <md-radio-button value="directCustomer">{{'Direct Customer'|translate}}</md-radio-button>
+                <md-radio-button value="dealersCustomer" style="margin-right: 10px;">{{"Dealer's Customer" | translate}}</md-radio-button>
+                <md-radio-button *ngIf="supAdminDropDown == true" value="org" style="margin-right: 50px;">{{"DISTRIBUTER" | translate}}
+                                </md-radio-button>
+              </md-radio-group>
+            </div>
+          </div>
+
+          <div *ngIf="supAdminDropDown == true && selectedRole=='org'" class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> {{'DISTRIBUTER' | translate}} :</p>
+            </div>
+            <div class="col-8">
+              <!-- <select id="distSelect" multiple="multiple" >
+                <option *ngFor="let dist of distributers" [value]="dist._id" >{{ dist.first_name?dist.first_name:'' }}  {{ dist.last_name?dist.last_name:'' }}</option>
+              </select> -->
+              <md-input-container>
+                <input mdInput placeholder="Search Distributer" [mdAutocomplete]="tdAutoedit" name="state" 
+                #state="ngModel" [(ngModel)]="distributerValue" 
+               (ngModelChange)="filterStates(distributerValue)" >
+               <md-autocomplete #tdAutoedit="mdAutocomplete"  >
+                  <md-option *ngFor="let dist of distributerSelect" [value]="dist.user_type" >
+                    <span>{{ dist.user_type }}</span>
+                  </md-option>
+                </md-autocomplete>   
+              </md-input-container>
+            </div>
+          </div>
+          <div *ngIf="dealeDropDown == true && selectedRole=='dealersCustomer' || selectedRole=='org'" class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> {{'DEALER' | translate}} :</p>
+            </div>
+            <div class="col-8">
+              <!-- <select id="dealerSelect" multiple="multiple" onchange="changedUser(dlr, 'dealer')">
+                <option *ngFor="let dlr of dealers" [value]="dlr._id">{{ dlr.first_name?dlr.first_name:'' }}  {{ dlr.last_name?dlr.last_name:'' }}</option>
+              </select> -->
+              <md-input-container>
+                <input mdInput placeholder="Search Dealer" [mdAutocomplete]="tdAutoedit" name="state" 
+                #state="ngModel" [(ngModel)]="dealerValue" 
+               (ngModelChange)="filterStatesdelaer(dealerValue)" >
+               <md-autocomplete #tdAutoedit="mdAutocomplete" >
+                  <md-option *ngFor="let dist of DealerSelect" [value]="dist.user_type">
+                    <span>{{ dist.user_type }}</span>
+                  </md-option>
+                </md-autocomplete>   
+              </md-input-container>
+            </div>
+          </div>
+          <!-- <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> CUSTOMER :</p>
+            </div>
+            <div class="form-group col-8">
+            </div>
+          </div> -->
+          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> {{'TITLE'| translate}}<span style="color:red">*</span> :</p>
+            </div>
+            <div class="col-8">
+              <input type="text" class="form-control" id="messageTitle" [(ngModel)]="msgTitle" aria-describedby="point" placeholder="{{'Type subject here' | translate}}" >
+            </div>
+          </div>
+          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-4" >
+              <p> {{'MESSAGE' | translate}} <span style="color:red">*</span>:</p>
+            </div>
+            <div class="col-8">
+              <textarea type="textarea" style="height:150px" class="form-control" id="msgcntnt" [(ngModel)]="msgContent" aria-describedby="point" placeholder="{{'Type Message here' | translate}}"></textarea>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-12">
+              <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="messageSend()" > {{'SEND' | translate}} </button>
+              <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" > {{'RESET' | translate}} </button>          
+             
+            </div>
+          </div>
+        </div>
+        <div class="col-5" style="background: white;padding-left: 75px;padding-top: 30px;padding-right: 75px;">
+          <div style="width: 100%;">
+            <table id="deviceTable" cellspacing="0" class="table-wrap" >
+                <thead style="background: #2d4262;color:white;">
+                    <tr>
+                        <th style="text-align:left;padding-left: 10px;"><input type="checkbox" id="mass_select_all" class="editor-active"></th>
+                        <th style="text-align:left;">{{'Name' | translate}}</th>
+                        <th style="text-align:left;">{{'Phone' | translate}}</th>
+                    </tr>
+                </thead> 
+            </table>
+        </div> 
+        </div>
+      </div>  
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/message-utility/message-utility.component.scss b/src/app/message-utility/message-utility.component.scss
new file mode 100644
index 0000000..065ecad
--- /dev/null
+++ b/src/app/message-utility/message-utility.component.scss
@@ -0,0 +1,84 @@
+.limiter{
+    width:100%;
+    height:100vh;
+    padding-top: 7vh;
+
+}
+
+.rowStyle{
+    width:100%;
+    margin: 0;
+    height:100vh;
+}
+
+
+.container {
+    padding: 2rem 0rem;
+  }
+  
+  h4 {
+    margin: 2rem 0rem 1rem;
+  }
+  
+  .table-image {
+    td, th {
+      vertical-align: middle;
+    }
+  }
+
+
+  .table-wrap {
+    height: 80px;
+    overflow-y: auto;
+  }
+
+  
+  #toast {
+    visibility: hidden;
+    max-width: 250px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 250px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/message-utility/message-utility.component.spec.ts b/src/app/message-utility/message-utility.component.spec.ts
new file mode 100644
index 0000000..11cd913
--- /dev/null
+++ b/src/app/message-utility/message-utility.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageUtilityComponent } from './message-utility.component';
+
+describe('MessageUtilityComponent', () => {
+  let component: MessageUtilityComponent;
+  let fixture: ComponentFixture<MessageUtilityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageUtilityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageUtilityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/message-utility/message-utility.component.ts b/src/app/message-utility/message-utility.component.ts
new file mode 100644
index 0000000..4bc7a2c
--- /dev/null
+++ b/src/app/message-utility/message-utility.component.ts
@@ -0,0 +1,576 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+
+
+declare var $:any;
+
+@Component({
+  selector: 'app-message-utility',
+  templateUrl: './message-utility.component.html',
+  styleUrls: ['./message-utility.component.scss']
+})
+export class MessageUtilityComponent implements OnInit {
+  msgContent:any;
+  msgTitle:any;
+  options=[];
+  tabelObj: any;
+  useridd: any;
+  superAdmin: any;
+  custtype: any;
+  orgChek: any;
+  supAdminDropDown = false;
+  dealeDropDown: boolean =false;
+  tableList: any =[{
+    "_id": "",
+    "first_name": "",
+    "last_name": "",
+    "phone": ""  
+  }];
+  distributers:any=[];
+  dealers:any=[];
+  customers:any=[];
+  DealersData: any;
+  disDataFIlter: any=[];
+  dealDataFIlter: any=[];
+  notificationType='1';
+  data_descip: string;
+  selectedRole="dealer"
+distributerValue
+dealerValue
+  constructor(private contactService: ContactService,private router: Router) {
+  //   $("#distSelect").change(function() {
+  //     console.log("inside function");
+  //   var di =  $("#distSelect").val($(this).val());
+  //   console.log(di);
+     
+  //  });
+  //  $("#dealerSelect").change(function() { 
+  //    console.log("inside function");
+  //  var dea =  $("#dealerSelect").val($(this).val());
+  //  console.log(dea);
+  //  });
+  //  $("#custSelect").change(function() {
+  //    console.log("inside function");
+  //   var cus =  $("#custSelect").val($(this).val());
+  //   console.log(cus);
+  //  });
+
+   }
+
+   selectedItems=[];
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.orgChek = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOrganisation;
+    this.testTable();
+    if(this.orgChek === true){
+      this.supAdminDropDown = true; 
+      this.dealeDropDown = true; 
+      this.getDistributer_1('supAdmin',this.useridd);
+    }
+
+
+    if((this.orgChek === false)&&(this.superAdmin === true)){
+      this.dealeDropDown = true;
+      this.getDistributer_1('supAdmin',this.useridd);
+    }
+    if(this.custtype ===true){
+      this.getDistributer_1('Dealer',this.useridd);
+    }
+    // this.loadropdown();
+
+
+ var that = this;
+
+   $('body').on('change', '#mass_select_all', function() {
+    var rows, checked;
+   var ttttt =  document.getElementById('mass_select_all');
+   that.selectedItems=[];
+   if(ttttt['checked'] === true){
+        that.selectedItems = that.tableArr; 
+        
+   }
+   if(ttttt['checked'] === false){
+    that.selectedItems = [];
+
+  }
+
+
+  
+   console.log("ttttt['checked']",that.selectedItems);
+
+    $('#checkbox-value').text($('#checkbox1').val());
+    rows = $('#deviceTable').find('tbody tr');
+    checked = $(this).prop('checked');
+    $.each(rows, function() { 
+       var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked); 
+       var chkdObj =  that.tabelObj.row( this.closest('tr') ).data() ;     
+    });
+   
+  
+  
+  });
+
+  }
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+
+  //     setTimeout(() => {
+  //       $('#distSelect').multipleSelect({
+  //         width: 200,
+  //         placeholder: "Search Distributer",
+  //         filter: true,
+  //         single: true,
+  //         selectAll: false
+  //       }) 
+  //     }, 100);
+    
+  //     setTimeout(() => {
+  //       $('#dealerSelect').multipleSelect({
+  //         width: 200,
+  //         placeholder: "Search Dealer",
+  //         filter: true,
+  //         single: true,
+  //         selectAll: false
+         
+  //       }) 
+  //     }, 100);
+    
+  //     setTimeout(() => {
+  //       $('#custSelect').multipleSelect({
+  //         width: 200,
+  //         placeholder: "Search Customer",
+  //         filter: true,
+  //         single: true,
+  //         selectAll: false
+        
+  //       })   
+  //     }, 100);
+  // }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {   
+      that.tabelObj=    $('#deviceTable').DataTable({
+            "processing": true,
+            "searching": true, 
+            // pagingType: 'full_numbers',
+            "serverSide": false,
+           "paging": false,
+            "lengthChange": false,
+            "scrollY":'50vh',  
+            "scrollCollapse": true, 
+            // "dataSrc" :that.tableArr,
+            "columnDefs": [ {
+              "targets": [0],
+              "orderable": false,
+        } ],
+        ajax: (dataTablesParameters: any, callback) => {
+          console.log("ASSD",that.tableArr)
+          callback({data : that.tableArr})
+
+        }
+    ,
+          "rowCallback": function(row: Node, data: any | Object, index: number){   
+        
+            // console.log(index)
+            let idSlct = data._id ;
+            $('#'+idSlct, row).off('click').on('click', () => {  
+              let id = data._id;
+              let a = document.getElementById(id);   
+              // console.log(a);
+                  if(a['checked'] === true){
+                  
+                      that.selectedItems.push(data);
+                  } 
+               
+                  if(a['checked'] === false){
+                   var b = that.selectedItems.filter(e => e._id === data._id);
+                    b.forEach(f => that.selectedItems.splice(that.selectedItems.findIndex(e => e._id === f._id),1));
+                  }   
+                  // console.log('that.selectedItems=>',that.selectedItems);
+              
+               })
+          },
+           
+          "columns": [
+            {
+              "data": "_id",
+              "visible" :true,
+              "render": function (data, type, row) {     
+           
+             
+                return '<input type="checkbox"  id='+ data + ' class="editor-active">';
+              }
+            },
+    
+            {
+              "data": "last_name",
+              "visible" :true,
+              "render": function (data, type, row) {        
+                var fn =row.first_name?row.first_name:'';
+                var ln=data?data:''; 
+                return fn + ' ' + ln;
+              }
+            },
+            {
+              "data": "phone",
+              "visible" :true,
+              "render": function (data, type, row) {             
+                return data? data: '';
+              }
+            },
+          ]    
+                      
+        });
+
+  
+    });
+  
+  }
+
+
+  // getDistributer(id){
+  //   this.tableList =[];
+  //   this.contactService.getDistributer(this.useridd,id).subscribe(res=>{
+  //     console.log(res);  
+  //       this.distributers = res; 
+  //     if(id=== 'supAdmin'){
+  //       this.dealers =res ; 
+  //     }
+  //     if(id === 'Dealer'){
+  //       this.customers = res ; 
+  //     }
+  //       //  this.loadropdown(); 
+  //        if(this.tabelObj!=undefined){
+  //         this.tabelObj.clear();
+  //        }
+  //        this.tabelObj.rows.add(this.distributers); 
+  //        this.tabelObj.draw();   
+       
+  //   },err=>{
+  //     console.log(err);
+  //   })
+  // }
+
+    tableArr = [];
+  getDistributer_1(id,loginId){
+    // 'org','supAdmin','Dealer'
+    this.DealersData = [];
+    this.tableArr = [];
+    var i:any; 
+    if(id === 'org'){
+          // fetch all distributer
+          console.log(id);
+          
+          var pLoad ={"draw": 1,"columns": [{"data": "_id"},{"data": "first_name"},{ "data": "last_name"},{"data": "email"},{"data": "phone"}],"order": [{
+                "column": 0,"dir": "desc"}],"start": 0,"length": 100000,"search": {"value": "","regex": false},"op": {},"select": [],"find": {"organisation": loginId}}
+          this.contactService.post('/users/datatable', pLoad).subscribe(resp => {    
+            this.distributers = resp['data'];
+            // this.tableArr= resp['data'];
+            console.log(this.distributers);  
+            var loadinguser1 = {
+              user_type: "All",
+              _id: "All User"
+            }
+            for(var i=0;i<this.distributers.length;i++){
+              loadinguser1 = {
+                user_type:  this.distributers[i].first_name + " " + this.distributers[i].last_name,
+                _id: this.distributers[i]._id
+              }
+              this.disDataFIlter.push(loadinguser1);
+            }         
+             this.tableArr = this.distributers;
+             this.reLoadTable()
+         
+          })
+          
+        // this.contactService.getDistributer(loginId,id).subscribe(res=>{
+        //   this.distributers = res; 
+      
+
+        //   this.tableArr = this.distributers;
+        // })
+    }
+    if(id === 'supAdmin'){
+              // fetch all Dealer
+               console.log(id);
+      this.contactService.dealer_Info1(loginId,1,10000,i,null).subscribe(res=>{
+          this.DealersData  = res ; 
+          console.log('this.DealersData',this.DealersData);
+          this.tableArr = this.DealersData  ; 
+          var loadinguser = {
+            user_type: "All",
+            _id: "All User"
+          }
+          for(var j=0;j<this.DealersData.length;j++){
+            loadinguser = {
+              user_type:  this.DealersData[j].first_name + " " + this.DealersData[j].last_name,
+              _id: this.DealersData[j]._id
+            }
+            this.dealDataFIlter.push(loadinguser);
+          }
+          console.log(this.dealDataFIlter);
+       
+          this.reLoadTable();
+      })
+
+      // this.contactService.getTableData(loginId).subscribe(res=>{
+      //   this.tableArr = res;
+      //   this.reLoadTable(); 
+      // })
+
+    }
+    if(id === 'Dealer'){
+       console.log(id);
+        // fetch all Customer
+        this.contactService.getCustumer(loginId,1, 10000,i,false).subscribe(  
+          data => {
+            this.tableArr = data;  
+
+            this.reLoadTable()    
+          }, err => {
+      
+          });
+
+    }
+
+      
+
+  }
+
+  reLoadTable(){
+    console.log(this.tableArr);
+    if(this.tabelObj!=undefined){
+      this.tabelObj.clear();
+     }
+     console.log(this.tabelObj); 
+    this.tabelObj.rows.add(this.tableArr); 
+    this.tabelObj.draw(); 
+
+  }
+
+  changedUser(this,ev){
+      console.log(this);
+      console.log(ev);
+  }
+
+
+  // filterStates(distributerValue){
+  //   console.log({"inside function" : distributerValue});
+  // }
+
+  onChange(role,id){
+    console.log(role,id);
+    if(role === 'supAdmin'){
+      console.log(id);
+        this.getDistributer_1(role,id[0]._id);
+    }
+    if(role === 'Dealer'){
+      console.log(id);
+        this.getDistributer_1(role,id[0]._id);
+    }
+
+  //  this.getDistributer_1(role,id);
+
+
+  }
+
+  distributerSelect = [];
+  filterStates(usr1) {
+    // console.log("userObj=>",usr);
+    if(usr1.length == 0){
+      this.distributerSelect =[];
+    }
+    
+    if (usr1) {
+      console.log("user=>",usr1);
+      const filterdealerValue:any = usr1;
+      this.distributerSelect=[];
+       this.distributerSelect = this.disDataFIlter.filter(function(ppp){
+       
+        var t = ppp.user_type.indexOf(filterdealerValue);
+      //  this.option = this.options[i];
+      console.log("India1");
+        return t > -1;    
+      });
+        console.log(this.distributerSelect);
+        if(this.distributerSelect.length === 1){
+          this.onChange('supAdmin',this.distributerSelect);
+
+        }
+        return this.distributerSelect;
+    }
+  
+  }
+
+  DealerSelect=[];
+  filterStatesdelaer(usr1){
+
+      // console.log("userObj=>",usr);
+      if(usr1.length == 0){
+        this.DealerSelect =[];
+      }
+      
+      if (usr1) {
+        console.log("user=>",usr1);
+        const filterdealerValue:any = usr1;
+        this.DealerSelect=[];
+         this.DealerSelect = this.dealDataFIlter.filter(function(ppp){
+          var t = ppp.user_type.indexOf(filterdealerValue);
+        //  this.option = this.options[i];
+          return t > -1;    
+        });
+          // console.log("selectedUser=>",this.DealerSelect)
+          if(this.DealerSelect.length === 1){
+            this.onChange('Dealer',this.DealerSelect);
+  
+          }
+          return this.DealerSelect;
+      }
+
+  }
+
+  changeValue(ev){
+    console.log(ev);
+    this.notificationType = ev.value;
+  }
+  changeRole(event){
+    console.log(event);
+    this.selectedRole=event.value;
+    if(this.selectedRole=="dealer"){
+      this.SetDealer();
+      
+    }else if(this.selectedRole=="directCustomer"){
+        this.CustomerData();
+
+    }else if(this.selectedRole=="dealersCustomer"){
+      this.tableArr=[];
+      this.dealerValue=null
+       this.reLoadTable();
+        this.data_descip = 'Please Select Dealer';
+      this.launch_toast()
+    }else{
+       this.distributerValue=null
+       this.tableArr=[];
+       this.reLoadTable();
+      // this.data_descip = 'Please Select Distributer';
+      // this.launch_toast()
+      this.Distributer()
+    }
+  }
+
+  messageSend(){
+    if((this.selectedItems.length === 0)||(this.notificationType === undefined)||(this.msgContent == undefined)||(this.msgTitle == undefined)){
+      this.data_descip = 'Please Select all Mendatory Fields';
+      this.launch_toast()
+      return;
+    }
+    var phoneObject = [];
+    for(var i = 0 ;i <this.selectedItems.length;i++){
+      var pObj = {
+        phone : this.selectedItems[i].phone
+      }
+      phoneObject.push(pObj)
+
+    }
+    var payLoad = {
+      numberArr : phoneObject,
+      messageTitle : this.msgTitle,
+      msgContent:this.msgContent,
+      notificationType:(this.notificationType =='2')?'SMS':'NOTIFICATION'
+    }
+      console.log(payLoad);
+      this.contactService.sendMessages(payLoad).subscribe(res=>{
+        console.log(res);
+        this.data_descip = 'Messages Sent Successfully';
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3500);
+      })
+
+    //    launch_toast() {
+    //     // console.log(divid);
+    //      var x = document.getElementById("toast")
+    //      //console.log(x);
+    //      x.className = "show";
+    //      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3500);
+    //  }
+
+  }
+launch_toast() {
+        // console.log(divid);
+         var x = document.getElementById("toast")
+         //console.log(x);
+         x.className = "show";
+         setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3500);
+     }
+  SetDealer(){
+    this.dealDataFIlter=[]
+    this.contactService.dealer_Info1(this.useridd,1,10000,null,null).subscribe(res=>{
+          this.DealersData  = res ; 
+          console.log('this.DealersData',this.DealersData);
+          this.tableArr = this.DealersData  ; 
+          var loadinguser = {
+            user_type: "All",
+            _id: "All User"
+          }
+          for(var j=0;j<this.DealersData.length;j++){
+            loadinguser = {
+              user_type:  this.DealersData[j].first_name + " " + this.DealersData[j].last_name,
+              _id: this.DealersData[j]._id
+            }
+            this.dealDataFIlter.push(loadinguser);
+          }
+          console.log(this.dealDataFIlter);
+       
+          this.reLoadTable();
+      })
+  }
+
+  CustomerData(){
+     this.contactService.getCustumer(this.useridd,1, 10000,null,false).subscribe(  
+          data => {
+            this.tableArr = data;  
+
+            this.reLoadTable()  
+  })
+}
+
+Distributer(){
+  var pLoad ={"draw": 1,"columns": [{"data": "_id"},{"data": "first_name"},{ "data": "last_name"},{"data": "email"},{"data": "phone"}],"order": [{
+                "column": 0,"dir": "desc"}],"start": 0,"length": 100000,"search": {"value": "","regex": false},"op": {},"select": [],"find": {"organisation": this.useridd}}
+          this.contactService.post('/users/datatable', pLoad).subscribe(resp => {    
+            this.distributers = resp['data'];
+            // this.tableArr= resp['data'];
+            console.log(this.distributers);  
+            var loadinguser1 = {
+              user_type: "All",
+              _id: "All User"
+            }
+            for(var i=0;i<this.distributers.length;i++){
+              loadinguser1 = {
+                user_type:  this.distributers[i].first_name + " " + this.distributers[i].last_name,
+                _id: this.distributers[i]._id
+              }
+              this.disDataFIlter.push(loadinguser1);
+            }         
+             this.tableArr = this.distributers;
+             this.reLoadTable()
+         
+          })
+          
+}
+ 
+}
diff --git a/src/app/model-master/model-master.component.html b/src/app/model-master/model-master.component.html
new file mode 100644
index 0000000..dd985b2
--- /dev/null
+++ b/src/app/model-master/model-master.component.html
@@ -0,0 +1,227 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+
+  <div class="row" style="margin:0px">
+    <div class="col-12">
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+  </div>
+
+  <div class="accordion" id="accordionExample">
+    <div class="card">
+      <div class="card-header" id="headingOne">
+        <h2 class="mb-0">
+          <button class="btn btn-link" (click)="isEdit=!isEdit" type="button" data-toggle="collapse"
+            data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero">
+            Model Master
+          </button>
+
+          <button *ngIf="!isEdit" class="btn btn-primary btn-sm float-sm-right ml-2" type="button"
+            (click)="RTOForm.reset()" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"
+            aria-controls="collapseTwo">Add
+          </button>
+
+
+        </h2>
+      </div>
+
+      <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+        <div class=col-sm-12>
+
+
+          <div class="table-responsive">
+            <table class="table table-striped table-hover "
+              style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+              <thead>
+                <tr>
+
+                  <th>{{'Manufacturer' | translate}}</th>
+                  <th>{{'Model' | translate}}</th>
+                  <th>{{'Model Name' | translate}}</th>
+                  <th>{{'Engine' | translate}}</th>
+                  <th>{{'Capacity' | translate}}</th>
+                  <th>{{'No Of Typers.' | translate}}</th>
+                  <th>{{'Category' | translate}}</th>
+                  <th>{{'Transmission' | translate}}</th>
+                  <th>{{'Edit' | translate}}</th>
+                  <th>{{'Delete'| translate}}</th>
+
+                </tr>
+              </thead>
+              <!-- // Manufacturer:{type:String},
+              // Model:{type:String},
+              // ModelName:{type:String},
+              // Engine:{type:String},
+              // Capacity:{type:String},
+              // NoOfTypers:{type:String} -->
+              <tbody>
+                <tr *ngFor="let item of RtoData">
+                  <td>{{item.Manufacturer?item.Manufacturer:''}}</td>
+                  <td>{{item.Model?item.Model:''}}</td>
+                  <td>{{item.ModelName?item.ModelName:''}}</td>
+                  <td>{{item.Engine?item.Engine:''}}</td>
+                  <td>{{item.Capacity?item.Capacity:''}}</td>
+                    <td>{{item.NoOfTypers?item.NoOfTypers:''}}</td>
+                  <td>{{item.Category?item.Category:''}}</td>
+                  <td>{{item.Transmission?item.Transmission:''}}</td>
+                  <td><i class="fas fa-edit" (click)="edit(item)" data-toggle="collapse" data-target="#collapseTwo"
+                      aria-expanded="true" aria-controls="collapseTwo"></i></td>
+                  <td><i class="fas fa-trash" (click)="delete(item)"></i></td>
+
+                </tr>
+
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
+
+
+      <div class="accordion" id="accordionExample">
+
+        <div class="card">
+
+          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+            <div class="card-body">
+<!-- Manufacturer:[],
+Model:[],
+ModelName:[],
+Engine:[],
+Capacity:[],
+NoOfTypers:[] -->
+              <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+                <div class="col-sm-12" style="text-align: left;font-size: initial;">
+                  <form [formGroup]="RTOForm" (ngSubmit)="submit()">
+
+                    <div class="form-group row">
+                      <label for="Manufacturer" class="col-sm-2 col-form-label">Manufacturer</label>
+                      <div class="col-sm-10">
+                        <input formControlName="Manufacturer" type="text" class="form-control" id="Manufacturer"
+                          placeholder="Enter Manufacturer">
+                      </div>
+                    </div>
+                    <div class="form-group row">
+                      <label for="Model" class="col-sm-2 col-form-label">Model</label>
+                      <div class="col-sm-10">
+                        <input formControlName="Model" type="text" class="form-control" id="Model"
+                          placeholder="Enter Model">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="ModelName" class="col-sm-2 col-form-label">Model Name</label>
+                      <div class="col-sm-10">
+                        <input formControlName="ModelName" type="text" class="form-control" id="ModelName"
+                          placeholder="Enter Model Name">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="Engine" class="col-sm-2 col-form-label">Engine</label>
+                      <div class="col-sm-10">
+                        <input formControlName="Engine" type="text" class="form-control" id="Engine"
+                          placeholder="Enter Engine">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="Capacity" class="col-sm-2 col-form-label">Capacity</label>
+                      
+                        <div class="col-sm-10">
+                          <input formControlName="Capacity" type="text" class="form-control" id="Capacity" placeholder="Enter Capacity">
+                        </div>
+                     
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="NoOfTypers" class="col-sm-2 col-form-label">No Of Typers</label>
+                      
+                        <div class="col-sm-10">
+                          <input formControlName="NoOfTypers" type="text" class="form-control" id="NoOfTypers" placeholder="Enter No Of Typers">
+                        </div>
+                      
+                    </div>
+
+                      <div class="form-group row">
+                        <label for="Category" class="col-sm-2 col-form-label">Category</label>
+                      
+                        <div class="col-sm-10">
+                          <input formControlName="Category" type="text" class="form-control" id="Category"
+                            placeholder="Enter Category">
+                        </div>
+                      
+                      </div>
+
+                        <div class="form-group row">
+                          <label for="Transmission" class="col-sm-2 col-form-label">Transmission</label>
+                        
+                          <div class="col-sm-10">
+                            <select class="form-control" formControlName="Transmission">
+                              <option value="auto">Auto</option>
+                              <option value="auto">Manual</option>
+                            </select>
+                            
+                          </div>
+                        
+                        </div>
+
+                    <div class="text-center mt-4">
+                      <button class="btn btn-primary btn-md" type="submit" data-toggle="collapse"
+                        data-target="#collapseZero" aria-expanded="true" aria-controls="collapseZero">{{title}}</button>
+
+                    </div>
+
+                  </form>
+                </div>
+              </div>
+              <div class="row">
+                <div class=col-sm-12>
+                  <!-- <table class="table table-striped table-hover "
+                    style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                    <thead>
+                      <tr>
+                        <th>{{'IMEI' | translate}}</th>
+                        <th>{{'Vendor' | translate}}</th>
+                        <th>{{'Bill date' | translate}}</th>
+                        <th>{{'Bill no' | translate}}</th>
+                        <th>{{'Device model no' | translate}}</th>
+                        <th>{{'Iccid no' | translate}}</th>
+                        <th>{{'Mob-1' | translate}}</th>
+                        <th>{{'Mob-2' | translate}}</th>
+                        <th>{{'State' | translate}}</th>
+                        <th>{{'eSIM validaity' | translate}}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let failedDevices of uploadJSON">
+                        <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                        <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+
+
+                      </tr>
+                    </tbody>
+                  </table> -->
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+
+
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/model-master/model-master.component.scss b/src/app/model-master/model-master.component.scss
new file mode 100644
index 0000000..cbbb14b
--- /dev/null
+++ b/src/app/model-master/model-master.component.scss
@@ -0,0 +1,17 @@
+.topDiv {
+  padding-top: 20px;
+  background: whitesmoke;
+  height: 100vh;
+}
+.bg-blue {
+  background-color: #00c0ef !important;
+}
+.bg-green {
+  background-color: #00a65a !important;
+}
+.bg-orange {
+  background-color: #f39c12 !important;
+}
+.bg-red {
+  background-color: #d9534f !important;
+}
diff --git a/src/app/model-master/model-master.component.spec.ts b/src/app/model-master/model-master.component.spec.ts
new file mode 100644
index 0000000..f63dcb8
--- /dev/null
+++ b/src/app/model-master/model-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModelMasterComponent } from './model-master.component';
+
+describe('ModelMasterComponent', () => {
+  let component: ModelMasterComponent;
+  let fixture: ComponentFixture<ModelMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModelMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModelMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/model-master/model-master.component.ts b/src/app/model-master/model-master.component.ts
new file mode 100644
index 0000000..6688d72
--- /dev/null
+++ b/src/app/model-master/model-master.component.ts
@@ -0,0 +1,115 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-model-master',
+  templateUrl: './model-master.component.html',
+  styleUrls: ['./model-master.component.scss']
+})
+export class ModelMasterComponent implements OnInit {
+RtoData;
+  RTOForm:FormGroup;
+  Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  constructor(private fb:FormBuilder,private contactService:ContactService) { }
+ // Manufacturer:{type:String},
+              // Model:{type:String},
+              // ModelName:{type:String},
+              // Engine:{type:String},
+              // Capacity:{type:String},
+              // NoOfTypers:{type:String} -->
+  ngOnInit() {
+    this.RTOForm=this.fb.group({
+      Manufacturer:[],
+      Model:[],
+      ModelName:[],
+      Engine:[],
+      Capacity:[],
+      NoOfTypers:[],
+      Transmission:[],
+      Category:[],  
+  })
+  this.getRTOdata()
+  }
+
+  getRTOdata(){ 
+    this.contactService.get('/model_master/get').subscribe((res:any)=>{
+      this.RtoData=res;
+    })
+
+    
+  }
+
+  submit(){
+    console.log(this.RTOForm.value);
+    if(this.isEdit){
+      var data={
+        body:this.RTOForm.value,
+        _id:this.id
+      }
+       this.contactService.post('/model_master/update',data).subscribe((res=>{
+        console.log(res);
+        this.title="Submit"
+        this.getRTOdata();
+        this.isEdit=!this.isEdit
+      }))
+    }else{
+      this.contactService.post('/model_master/add',this.RTOForm.value).subscribe((res=>{
+        console.log(res);
+        this.getRTOdata()
+      }))
+
+    }
+  }
+  title="Submit"
+  isEdit:Boolean=false;
+  id
+  edit(value){
+    this.id=value._id
+    this.RTOForm.patchValue(value);
+    this.isEdit=!this.isEdit;
+    this.title="Update"
+  }
+
+  delete(item){
+    this.contactService.get('/model_master/delete?_id='+item._id).subscribe(res=>{
+      this.getRTOdata()
+    })
+  }
+
+}
diff --git a/src/app/my-folder/my-auth.service.spec.ts b/src/app/my-folder/my-auth.service.spec.ts
new file mode 100644
index 0000000..a5e63e2
--- /dev/null
+++ b/src/app/my-folder/my-auth.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { MyAuthService } from './my-auth.service';
+
+describe('MyAuthService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [MyAuthService]
+    });
+  });
+
+  it('should be created', inject([MyAuthService], (service: MyAuthService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/my-folder/my-auth.service.ts b/src/app/my-folder/my-auth.service.ts
new file mode 100644
index 0000000..231f523
--- /dev/null
+++ b/src/app/my-folder/my-auth.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class MyAuthService {
+
+  constructor() { }
+
+}
+  
\ No newline at end of file
diff --git a/src/app/myaccount/myaccount.component.html b/src/app/myaccount/myaccount.component.html
new file mode 100644
index 0000000..eee36d5
--- /dev/null
+++ b/src/app/myaccount/myaccount.component.html
@@ -0,0 +1,117 @@
+<h5>My Account</h5><hr>
+<div id="toast"><div id="desc">{{data_descip}}</div></div>
+
+<table style="width:100%" border="0">
+ 
+    <tr>
+    <td style="width:10%">&nbsp;First Name:</td>
+    <td style="width:40%">&nbsp;
+        <md-form-field style="width:82%" class="example-full-width width">
+        <input mdInput type="text" [(ngModel)]="fs" name="fs" required>
+        <md-error class="required">Please Enter First Name</md-error>
+      </md-form-field>
+    </td>
+    <td style="width:10%">&nbsp;Last Name:</td>
+    <td style="width:40%">&nbsp; 
+        <md-form-field style="width:82%" class="example-full-width width">
+        <input mdInput type="text" [(ngModel)]="ls" name="ls" required>
+        <md-error class="required">Please Enter Last Name</md-error>
+        </md-form-field>
+    </td>
+    </tr>
+    <tr>
+    <td style="width:10%">&nbsp;Email Id:</td>
+    <td style="width:40%">
+        <tr>
+        <td style="width:95%">{{emailid}}
+            <!--   <md-form-field style="width:100%" class="example-full-width width">
+               <input mdInput type="text" [(ngModel)]="emailid" name="emailid" required>
+              <md-error class="required">Please Enter EmailID</md-error>
+            </md-form-field> -->
+        </td>
+        <td style="width:5%">
+            <p *ngIf="verify_email()" style="margin-top: 12px;"   [style.color] = "final_counter1 > 0 ? '#e91313' : '#008000'" md-tooltip={{text}}>{{symbol}}</p>
+        </td>
+        </tr>
+
+
+    </td>
+    <td style="width:10%">&nbsp;Mobile Number:</td>
+    <td style="width:40%">
+        <tr>
+            <td style="width:95%">{{mobile}}
+                 
+  <!--     <md-form-field style="width:100%" class="example-full-width width">
+          <input mdInput type="text" [(ngModel)]="mobile" name="mobile" required>
+          <md-error class="required">Please Enter Mobile Number</md-error>
+        </md-form-field> -->
+            </td>
+            <td style="width:5%">
+                <p *ngIf="verify_phone()" style="margin-top: 12px;" [style.color] = "final_counter2 > 0 ? '#e91313' : '#008000'" md-tooltip={{text2}}>{{symbol2}}</p>
+            </td>
+            </tr>
+      
+      
+     </td>
+    </tr>
+    <tr>
+    <td style="width:10%">&nbsp;Organisation:</td>
+    <td style="width:40%">&nbsp;  
+        <md-form-field style="width:82%" class="example-full-width width">
+        <input mdInput type="text" [(ngModel)]="or" name="or" >
+      </md-form-field>
+    </td>
+
+    <td style="width:10%">&nbsp;Dealer:</td>
+    <td style="width:40%">
+        <tr>
+          <td style="width:20%">   <p style="margin-top: 12px;"  [style.color] = "final_counter > 0 ? '#e91313' : '#006699'" md-tooltip={{text3}} *ngIf="deal();">{{symbol3}}</p> <!-- <md-checkbox [(ngModel)]="custtype" name="custtype"></md-checkbox>  --></td>
+          <td style="width:40%">Notification Sound: </td>
+          <td>&nbsp;&nbsp;&nbsp;&nbsp;<md-checkbox [(ngModel)]="GET_notif" name="GET_notif"></md-checkbox> </td> 
+        </tr>
+    </td>
+    </tr>
+
+   <!--  <tr>
+        <td style="width:10%">&nbsp;Notification Sound:</td>
+        <td style="width:40%">&nbsp; <md-checkbox [(ngModel)]="sound" name="sound"></md-checkbox>
+        </td>
+    </tr> -->
+    </table> <br>
+    <table style="width:100%" border="0">
+ 
+            <tr style="width:100%">
+                <td style="width:25%">
+                </td>
+                <td style="width:22%">
+                        <input type="submit" class="btn btn btn-warning" style="float: right;cursor:pointer" value="Back" (click)="onNoClick(null)" />
+
+                </td>
+                 <td style="width:25%">
+                        <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Edit Account" (click)="editAccount()" />
+
+                 </td>
+                <td style="width:25%">
+                </td>
+            </tr>
+    </table>
+
+
+<!--     <div style="    cursor: pointer;
+    padding-left: 42%;">
+    <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Edit Account" (click)="editAccount()" />
+    <input type="submit" class="btn btn btn-warning" style="float: left;cursor:pointer" value="Back" (click)="onNoClick(null)" />
+        </div> -->
+
+   <!--      <tr>
+
+            <td style="width:10%" rowspan="2">Organisation: </td>
+            <td style="width:40%" rowspan="2">
+                <md-form-field style="width:82%" class="example-full-width width">
+                    <input mdInput type="text" [(ngModel)]="or" name="or" required>
+                    <md-error class="required">Please Enter Organisation</md-error>
+                  </md-form-field>
+            </td>
+            <td style="width:10%" rowspan="2">Dealer: </td>
+            </tr> -->
+<!--   </table> -->
diff --git a/src/app/myaccount/myaccount.component.scss b/src/app/myaccount/myaccount.component.scss
new file mode 100644
index 0000000..6fd146f
--- /dev/null
+++ b/src/app/myaccount/myaccount.component.scss
@@ -0,0 +1,102 @@
+
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
diff --git a/src/app/myaccount/myaccount.component.spec.ts b/src/app/myaccount/myaccount.component.spec.ts
new file mode 100644
index 0000000..222583a
--- /dev/null
+++ b/src/app/myaccount/myaccount.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyaccountComponent } from './myaccount.component';
+
+describe('MyaccountComponent', () => {
+  let component: MyaccountComponent;
+  let fixture: ComponentFixture<MyaccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyaccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyaccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/myaccount/myaccount.component.ts b/src/app/myaccount/myaccount.component.ts
new file mode 100644
index 0000000..8197404
--- /dev/null
+++ b/src/app/myaccount/myaccount.component.ts
@@ -0,0 +1,179 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../device';
+import {ContactService} from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Contact} from '../contact';
+
+@Component({
+  selector: 'app-myaccount',
+  templateUrl: './myaccount.component.html',
+  styleUrls: ['./myaccount.component.scss'],
+  providers:[ContactService]
+})
+export class MyaccountComponent implements OnInit {
+
+  constructor(public dialogRef: MdDialogRef<MyaccountComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService) {
+
+     }
+
+    onNoClick(a): void {
+     
+     this.dialogRef.close(a);
+    }
+    text:any;
+    symbol:any;
+    contacts: Contact[]=[];
+    contact: Contact;
+    verify_email(){
+      if(this.email_verfi == true){
+        this.symbol = '\u2714';
+        this.text = "Email Verified"
+        this.final_counter1 = 0;
+        return true
+      }
+      else{
+        this.symbol =  'X'
+        this.text = "Email Not Verified"
+        this.final_counter1 = 1;
+        return true
+      }
+    }
+    symbol2:any;
+    text2:any;
+    sound:any;
+    text3:any;
+    symbol3:any;
+    final_counter:any;
+    final_counter1:any;
+    deal(){
+      if(this.custtype == true){
+        this.symbol3 = '\u2714';
+        this.text3 = "Dealer"
+        this.final_counter = 0;
+        return true
+      }
+      else{
+        this.symbol3 =  'X'
+        this.text3 = "Not a Dealer"
+        this.final_counter =1;
+        return true
+      }
+    }
+    final_counter2:any;
+    Edit(){
+      
+    }
+    verify_phone(){
+      if(this.phone_verfi == true){
+        this.symbol2 = '\u2714';
+        this.text2 = "Mobile Verified"
+        this.final_counter2 = 0;
+        return true
+      }
+      else{
+        this.symbol2 =  'X'
+        this.text2 = "Mobile Not Verified"
+        this.final_counter2 =1;
+        return true
+      }
+    }
+    first_name:any;
+    last_na;
+    me:any;
+    Load:any;
+    GET_notif:any;
+    data_descip:any;
+tost1(divid){
+  if(divid == "nofsls"){
+    this.data_descip = "Please Enter Mandatory Fields";
+    launch_toast();
+  }
+ else if(divid == "succ"){
+  this.data_descip = "Succesfully Updated";
+  launch_toast();
+  this.onNoClick("succ");
+ }
+    function launch_toast() {
+     // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+  }
+   }
+  
+    editAccount(){
+      if(this.fs == "" || this.ls == "" || this.fs == " " || this.ls == " " ){
+          this.tost1("nofsls")
+      }
+      else{
+       
+        const newContact ={
+      
+          fname: this.fs,
+          lname: this.ls,
+          org: this.or,
+          noti: this.GET_notif,
+          uid:this.useridd
+            }
+            this.contactService.updateuid(newContact)
+            .subscribe(contact => {
+              this.contacts.push(contact);
+            //  console.log(contact.token)
+              this.tost1("succ");
+              window.localStorage['token'] = contact.token
+
+              
+             
+            //  if(contact.message === "Registered Sucessfully"){
+              //  this.Load=false
+             // this.tost1("Confirm_Email")  
+            //  }
+            } , (err: any) => { 
+              // console.log(err.status); 
+              // console.log(err);
+            if(err.status ==   500)
+            {
+            //  this.Load=false
+             // this.dup_email = JSON.parse(err._body);
+             // this.tost1("dup_email")
+            }
+            else{
+             // this.Load=false
+      
+            }
+            } 
+          ); 
+      }
+  
+    }
+  fs:any;
+  ls:any;
+  emailid:any;
+  or:any;
+  useridd:any;
+  custtype:any;
+  mobile:any;
+  email_verfi:any;
+  phone_verfi:any;
+/*   _orgName
+  isDealer */
+
+  ngOnInit() {
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;  
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mobile = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn; 
+    this.email_verfi = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email_verfi; 
+    this.phone_verfi = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phone_verfi; 
+    this.GET_notif = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).GET_notif; 
+    //console.log(this.mobile) email_verfi phone_verfi
+    // console.log(JSON.parse(window.atob(window.localStorage.token.split('.')[1])))
+  }
+
+}
diff --git a/src/app/notification-for-cc/notification-for-cc.component.html b/src/app/notification-for-cc/notification-for-cc.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/notification-for-cc/notification-for-cc.component.scss b/src/app/notification-for-cc/notification-for-cc.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/notification-for-cc/notification-for-cc.component.spec.ts b/src/app/notification-for-cc/notification-for-cc.component.spec.ts
new file mode 100644
index 0000000..01d9ae3
--- /dev/null
+++ b/src/app/notification-for-cc/notification-for-cc.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationForCCComponent } from './notification-for-cc.component';
+
+describe('NotificationForCCComponent', () => {
+  let component: NotificationForCCComponent;
+  let fixture: ComponentFixture<NotificationForCCComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationForCCComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationForCCComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/notification-for-cc/notification-for-cc.component.ts b/src/app/notification-for-cc/notification-for-cc.component.ts
new file mode 100644
index 0000000..9aae90f
--- /dev/null
+++ b/src/app/notification-for-cc/notification-for-cc.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { Http } from '@angular/http';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { environment } from '../../environments/environment';
+import { CommentWindowComponent } from '../comment-window/comment-window.component';
+import { ContactService } from '../contact.service';
+import { DatainjectionService } from '../datainjection.service';
+import { NotiLocationComponent } from '../report/report component/notification-master/noti-location/noti-location.component';
+import { ReportService } from '../report/report.service';
+import { SOSAlertComponent } from '../sosalert/sosalert.component';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+@Component({
+  selector: 'app-notification-for-cc',
+  templateUrl: './notification-for-cc.component.html',
+  styleUrls: ['./notification-for-cc.component.scss']
+})
+export class NotificationForCCComponent implements OnInit {
+
+  constructor(private injectData:DatainjectionService,private http: Http,private contactService: ContactService,private _service:ReportService,private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+    
+   
+
+   }
+
+ 
+  ngOnInit() {
+   
+  }
+
+  
+
+}
+
+
diff --git a/src/app/notification-master/notification-master.component.html b/src/app/notification-master/notification-master.component.html
new file mode 100644
index 0000000..a47b0e8
--- /dev/null
+++ b/src/app/notification-master/notification-master.component.html
@@ -0,0 +1,60 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'NOTIFICATIONS' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
+          <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div *ngIf="tableData=== false">
+            <p style="line-height: 12;
+            text-align: center;
+            font-size: 40px;
+            font-weight: 600;
+            color: #999999;">No data Found</p>
+          </div>
+          <div *ngIf="tableData=== true" style="width: 100%;">
+            <div class="limiterTable">
+              <div class="container-table100">
+                <div class="wrap-table100">
+                  <div class="table100" >
+                    <table  class="table table-striped table-hover">
+                      <tbody>
+                        <tr *ngFor="let notif of notifArray" style="margin-top:10px;">
+                          <td  style="cursor:pointer">
+                            <div>
+                              <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
+                              <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
+                              <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
+                            </div> 
+                            <p style="margin-bottom: 0%;">Comment : <span>{{notif.comment?notif.comment:'NA'}}</span></p>  
+                          </td>                 
+                          </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>                 
+          </div>
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/notification-master/notification-master.component.scss b/src/app/notification-master/notification-master.component.scss
new file mode 100644
index 0000000..dad8b9b
--- /dev/null
+++ b/src/app/notification-master/notification-master.component.scss
@@ -0,0 +1,46 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+  .limiterTable {
+    width: 100%;
+    margin: 0 auto;
+    height: 80vh;
+    overflow: auto;
+  }
\ No newline at end of file
diff --git a/src/app/notification-master/notification-master.component.spec.ts b/src/app/notification-master/notification-master.component.spec.ts
new file mode 100644
index 0000000..77b4ad6
--- /dev/null
+++ b/src/app/notification-master/notification-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationMasterComponent } from './notification-master.component';
+
+describe('NotificationMasterComponent', () => {
+  let component: NotificationMasterComponent;
+  let fixture: ComponentFixture<NotificationMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/notification-master/notification-master.component.ts b/src/app/notification-master/notification-master.component.ts
new file mode 100644
index 0000000..447a591
--- /dev/null
+++ b/src/app/notification-master/notification-master.component.ts
@@ -0,0 +1,229 @@
+import { ContactService } from './../contact.service';
+import { Component, OnInit } from '@angular/core';
+
+import { Router } from '@angular/router';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { MdDialog } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+declare var $:any;
+
+@Component({
+  selector: 'app-notification-master',
+  templateUrl: './notification-master.component.html',
+  styleUrls: ['./notification-master.component.scss']
+})
+export class NotificationMasterComponent implements OnInit {
+  ignition_data: any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate=new Date();
+  options=[];
+  identifier:any='notification_master';
+  logo:any;
+  superAdmin:Boolean = false;
+  // notifications=["overspeed",'Geo-Fence','Route','IGN','Fuel'];
+  vehicles:any;
+  fromdate=new Date();
+  notifArray: any =[];
+ 
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+
+    // this.fromdate.setHours(0,0,0);
+
+
+   }
+
+  ngOnInit() {
+   
+    // this.notifications;
+    
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     var fd = new Date().setHours(0,0,0);
+     this.Fromdate = new Date(fd);
+     this.firstcall=false;
+     this.lastcall= false;
+    //  this.getNotification();
+    this.tableData = false;
+  }
+
+  
+notification:any;
+tableData:boolean=true;
+getNotification(){
+  this.notifArray=[];
+  var from= this.Fromdate
+  var to = this.todate;
+  console.log(this.Fromdate,this.todate);
+ console.log('this.deviceArr',this.deviceArr);
+ var user :any;
+ if((this.custtype != true)&&(this.superAdmin != true)){
+    user = this.useridd
+ }
+ var limit = 20;
+  this.contactService.filteredNotifications(from,to,this.notification,this.deviceArr,user,this.skip,limit)
+    .subscribe(res=>{
+      this.tableData = true;
+      this.notifArray =res;
+      if(this.notifArray == 0){
+        this.firstcall=true;
+        this.lastcall=(this.skip>0)?false:true;
+
+      }
+      console.log(this.notifArray);
+    },err=>{
+      this.notifArray=[];
+      this.firstcall=true;
+      this.lastcall=(this.skip>0)?false:true; 
+      if(err.status == 500){
+        this.tableData = false;
+        // this._flashMessagesService.show("No data available", { cssClass: 'alert-danger', timeout: 1500 });
+      }
+    })
+}
+
+
+
+
+deviceObj = [];
+
+deviceSelect: any = [];
+deviceName: any;
+
+
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+deviceArr:any=[];
+getReport(event){
+  this.deviceArr=[];
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    this.notification =tpdata.notitype;
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+    console.log('event',event);
+    this.skip = 1;
+    this.firstcall=false;
+    this.lastcall= true;
+    this.getNotification();
+ 
+  }
+ 
+}
+
+
+firstcall:boolean=true;
+lastcall:boolean=true;
+skip:number=1;
+next() {
+  // this.deviceData =[];
+  this.lastcall=false;
+  this.skip += 1; 
+  // this.sidebarData();
+  // this.ngOnInit();
+  this.getNotification();   
+}
+pre() {
+  // this.deviceData=[]
+  // console.log(this.skip)
+  if(this.skip>0){
+    this.skip -= 1;   
+    this.lastcall=false;
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.getNotification(); 
+  }else{
+    this.lastcall=true;
+    this.firstcall=false;
+  }
+ 
+}
+}
diff --git a/src/app/notification-setting/notification-setting.component.html b/src/app/notification-setting/notification-setting.component.html
new file mode 100644
index 0000000..44a7869
--- /dev/null
+++ b/src/app/notification-setting/notification-setting.component.html
@@ -0,0 +1,62 @@
+<div [hidden] = "!isAddEmail" style="width: 600px;">
+  <flash-messages style="float: center;"></flash-messages>
+    <p>Email</p>
+    <app-card [title]="'Email list'">
+        <div class="row">
+          <div class="col-md-12 btn-add-task">
+            <div class="input-group">
+              <input type="text" class="form-control" placeholder="Add Email" [(ngModel)]="femail" >
+              <span class="input-group-append" id="basic-addon1" style="padding-left: 20px;">
+                  <button (click)="addEmail('add',null)" class="btn btn-primary input-group-text"><i class="icofont icofont-plus f-w-600"></i>Add Email</button>
+                  <button (click)="Close()" class="btn btn-primary input-group-text" style="background-color: red"><i class="icofont icofont-plus f-w-600"></i>Close</button>
+                </span>
+            </div>
+          </div>
+        </div>
+        <div class="new-task row">
+          <div class="to-do-list" *ngFor='let email of emailList' style = "margin: 8px 5px auto 15px;">
+            <div class="checkbox-fade">
+              <label>
+                <input type="checkbox" value="1">
+                <span class="cr">
+                    <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
+                  </span>
+                <span>{{email}}</span>
+                <i class="fas fa-times" style="float:right ;margin: 5px 0px 0px 10px;" (click)="addEmail('delete',i)"></i>
+              </label>
+            </div>
+          </div>
+        </div>
+      </app-card>
+</div>
+<div [hidden] = "!isAddPhone" style="width: 750px;">
+  <flash-messages style="float: center;"></flash-messages>
+    <p>Phone</p>
+    <app-card [title]="'Phone list'">
+        <div class="row">
+          <div class="col-md-12 btn-add-task">
+            <div class="input-group">
+              <input type="text" class="form-control" placeholder="Add Phone" [(ngModel)]="fphone" >
+              <span class="input-group-append" id="basic-addon1" style="padding-left: 3%;">
+                  <button (click)="addPhone('add',null)" class="btn btn-primary input-group-text"><i class="icofont icofont-plus f-w-600"></i>Add Phone</button>
+                  <button (click)="Close()" class="btn btn-primary input-group-text" style="background-color: red"><i class="icofont icofont-plus f-w-600"></i>Close</button>
+                </span>      
+            </div>
+          </div>
+        </div>
+        <div class="new-task row">
+          <div class="to-do-list" *ngFor='let phone of phonelist ; let i = index' style = "margin: 8px 5px auto 15px;">
+            <div class="checkbox-fade ">
+              <label>
+                  <input type="checkbox" value="1">
+                  <span class="cr">
+                      <i class="cr-icon icofont icofont-ui-check txt-primary"></i>
+                    </span>
+                <span style="margin-bottom:8px">{{phone}}</span>
+                <i class="fas fa-times" style="float:right ;margin: 5px 0px 0px 10px;" (click)="addPhone('delete',i)"></i>
+              </label>
+            </div>
+          </div>
+        </div>
+      </app-card>
+</div>
diff --git a/src/app/notification-setting/notification-setting.component.scss b/src/app/notification-setting/notification-setting.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/notification-setting/notification-setting.component.spec.ts b/src/app/notification-setting/notification-setting.component.spec.ts
new file mode 100644
index 0000000..5d9e47b
--- /dev/null
+++ b/src/app/notification-setting/notification-setting.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationSettingComponent } from './notification-setting.component';
+
+describe('NotificationSettingComponent', () => {
+  let component: NotificationSettingComponent;
+  let fixture: ComponentFixture<NotificationSettingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationSettingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationSettingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/notification-setting/notification-setting.component.ts b/src/app/notification-setting/notification-setting.component.ts
new file mode 100644
index 0000000..486ca19
--- /dev/null
+++ b/src/app/notification-setting/notification-setting.component.ts
@@ -0,0 +1,129 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+
+@Component({
+  selector: 'app-notification-setting',
+  templateUrl: './notification-setting.component.html',
+  styleUrls: ['./notification-setting.component.scss']
+})
+export class NotificationSettingComponent implements OnInit {
+  isAddEmail:boolean = false;
+  isAddPhone:boolean =false;
+  emailList: any = [];
+  phonelist:any=[];
+  useridd: any;
+  notifType: any;
+  femail: any;
+  fphone: any;
+  constructor(public dialogRef: MdDialogRef<NotificationSettingComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,public contactService :ContactService,private _flashMessagesService: FlashMessagesService) { 
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;  
+        console.log(data.notifData);
+        this.notifType = data.notifData.notifType;
+        this.data = data.notifData.compData;
+        console.log(this.data);
+        console.log("Notification type =>",this.notifType);
+        if(data.notifData.buttonClick == 'email'){
+          this.isAddEmail = true;
+        }
+        if(data.notifData.buttonClick == 'phone'){
+          this.isAddPhone = true;
+        }
+
+       
+    }
+
+  ngOnInit() {
+    this.emailList=this.data[this.notifType].emails;
+    this.phonelist=this.data[this.notifType].phones;
+  }
+  fData:any={};
+  addEmail(id,index){
+    if(id == 'add'){
+      if(!this.data[this.notifType].emails){
+        this.data[this.notifType].emails=[];
+      }
+      this.data[this.notifType].emails.push(this.femail);
+      console.log(this.data);
+      this.fData.contactid = this.useridd;
+      this.fData.alert = this.data;
+      console.log("fData object =>",this.fData);
+      this.contactService.editDealer(this.fData).subscribe(resp => {
+          console.log(resp);
+          this.femail=null;
+       //   this.dialogRef.close("success");
+        // toastr.success("Setting Updated");
+        // this.router.navigateByUrl("/account")
+        // this.dataOriginal = JSON.parse(JSON.stringify(this.data));
+      }, err => {
+        console.log("err", err);
+      })
+    }
+    if(id == 'delete'){
+      var splicedmail =  this.data[this.notifType].emails[index];   
+      console.log("spliceNumber =>",splicedmail)
+       this.data[this.notifType].emails.splice(index,1);
+ 
+       this.fData.contactid = this.useridd;
+       this.fData.alert = this.data;
+       this.contactService.editDealer(this.fData).subscribe(resp => {
+      //   this.dialogRef.close("deleted");
+      
+       }, err => {
+         this.data[this.notifType].emails.push(splicedmail);
+         this._flashMessagesService.show("Internal server error, please try again!!!", { cssClass: 'alert-danger', timeout: 2000 });
+         console.log("err", err);
+       })
+       // this.dialogRef.close("success");
+     }
+
+   
+
+  }
+ 
+  addPhone(id,index){
+    if(id == 'add'){
+      if(!this.data[this.notifType].phones){
+        this.data[this.notifType].phones=[];
+      }
+      this.data[this.notifType].phones.push(this.fphone);
+      console.log("in addd",this.fphone);
+      this.fData.contactid = this.useridd;
+      console.log("This.data=>",this.data);
+      this.fData.alert = this.data;
+      console.log("finalData=>",this.fData);
+      this.contactService.editDealer(this.fData).subscribe(resp => {
+        this.fphone=null;
+     //   this.dialogRef.close("success");
+     
+        // toastr.success("Setting Updated");
+        // this.router.navigateByUrl("/account")
+        // this.dataOriginal = JSON.parse(JSON.stringify(this.data));
+      }, err => {
+        console.log("err", err);
+      })
+    }
+    if(id == 'delete'){
+     var splicedNum =  this.data[this.notifType].phones[index];   
+     console.log("spliceNumber =>",splicedNum)
+      this.data[this.notifType].phones.splice(index,1);
+
+      this.fData.contactid = this.useridd;
+      this.fData.alert = this.data;
+      this.contactService.editDealer(this.fData).subscribe(resp => {
+     //   this.dialogRef.close("deleted");
+      }, err => {
+        this.data[this.notifType].phones.push(splicedNum);
+        this._flashMessagesService.show("Internal server error, please try again!!!", { cssClass: 'alert-danger', timeout: 2000 });
+        console.log("err", err);
+      })
+      // this.dialogRef.close("success");
+    }
+  }
+
+  Close(){
+        this.dialogRef.close();
+  }
+}
diff --git a/src/app/notification/notification.component.html b/src/app/notification/notification.component.html
new file mode 100644
index 0000000..5170c11
--- /dev/null
+++ b/src/app/notification/notification.component.html
@@ -0,0 +1,38 @@
+<button md-icon-button [mdMenuTriggerFor]="appMenu2" (click)="checker()" style="float:right;outline:none;padding-top:14px;font-size: 20px;"> 
+  <span class="num" *ngIf="countfun()">{{final_counter}}</span>
+  <i class="fas fa-bell" [style.color] = "final_counter > 0 ? '#e91313' : '#ffffff'" style="float: right;padding-top:3%; color:white"></i>
+                               </button>                                 
+                               <md-menu #appMenu2="mdMenu" id="mdMenu"  class="myStyle"  [overlapTrigger]="false">
+                                <div style="width:260px !important;height: 100vh;">
+                                  <div class="row" style="margin: 0%;text-align: center;font-weight: 600;background: #435e88;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);">
+                                    <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                      <label for="notif" style="margin: 0;padding: 3px;color: white;">Notifications</label>    
+                                    </div>
+                                   </div>
+                                   <div class="row" style="font-size: 12px;margin: 0%;">
+                                     <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                      <div class="row" style="margin-top: 5px;margin: 0%;background: white;margin: 3px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);" 
+                                       *ngFor="let device of final_data;let i = index;">
+                                        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                           <div class="row" (click)="calldevice(device.did)" style="margin: 0%;margin-bottom: 5px;margin-top: 5px;">
+                                             <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;padding-left: 3px;">
+                                             <p style="margin: 0%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
+                                            </div>
+                                          </div>
+                                          <div class="row" style="margin: 0%;margin-bottom: 5px;">
+                                            <div class="col-sm-10 col-md-10 col-lg-10" (click)="calldevice(device.did)" style="padding: 0%;padding-left: 3px;">
+                                              <p style="margin: 0%;">{{ device.date }} {{ device.time }}</p>
+                                            </div>
+                                            <div class="col-sm-2 col-md-2 col-lg-2" style="padding: 0%;">
+                                              <i class="far fa-comment-alt" md-tooltip="Comment" style="float: right;padding-right: 10px;padding-top: 6px;cursor: pointer;" (click)="openPopup(device)"></i>
+                                            </div>   
+                                          </div>   
+                                        </div>
+                                      </div>
+                                     </div>
+                                   </div>
+                                </div>
+                           
+                                </md-menu> 
+                     
+                           
diff --git a/src/app/notification/notification.component.scss b/src/app/notification/notification.component.scss
new file mode 100644
index 0000000..b6d78a3
--- /dev/null
+++ b/src/app/notification/notification.component.scss
@@ -0,0 +1,35 @@
+::-webkit-scrollbar {
+    // display: none;
+    }
+    .circle {
+        width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    font-size: 8px;
+    color: white;
+    text-align: center;
+    background: black;
+    float: right
+      }
+      .notif {
+        position: relative;
+        display: block;
+        height: 50px;
+        width: 100px;
+        text-decoration: none;
+      }
+      .num {
+        position: absolute;
+        right: 0px;
+        top: -6px;
+        color: black;
+        /* background-color: red; */
+       /*  color: #e91313; */
+      }
+     
+
+      .mat-menu-panel.myStyle{
+        max-width: 500px !important;
+        width: 500px;
+
+      }
\ No newline at end of file
diff --git a/src/app/notification/notification.component.spec.ts b/src/app/notification/notification.component.spec.ts
new file mode 100644
index 0000000..fa24dc2
--- /dev/null
+++ b/src/app/notification/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/notification/notification.component.ts b/src/app/notification/notification.component.ts
new file mode 100644
index 0000000..45b5ece
--- /dev/null
+++ b/src/app/notification/notification.component.ts
@@ -0,0 +1,256 @@
+
+import { environment } from './../../environments/environment';
+import { Component, OnInit, OnDestroy} from '@angular/core';
+import {DatainjectionService} from '../datainjection.service'
+import * as io from 'socket.io-client';
+import { Injectable } from '@angular/core';
+import{Http, Headers} from '@angular/http';
+import 'rxjs/add/operator/map';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AddGroupComponent } from '../add-group/add-group.component';
+import { MdDialog } from '@angular/material';
+import { SOSAlertComponent } from '../sosalert/sosalert.component';
+import { CommentWindowComponent } from '../comment-window/comment-window.component';
+
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss']
+})
+@Injectable()
+export class NotificationComponent implements OnInit, OnDestroy {
+
+  dev_url:any;
+  superAdmin: any;
+
+  constructor(private injectData:DatainjectionService,private http: Http,private router: Router,public dialog: MdDialog) {
+   
+ 
+   this.dev_url  = environment.hostUrl; 
+ 
+   }
+   address:any;
+  try:any;
+  devicess:any;
+  final:any = null;
+  userID:any;
+  fs:any;
+  ls:any;
+  or:any;
+  emailid:any;
+  useridd:any;
+  custtype:any;
+  cust:boolean = false;
+  counter : any = 0;
+  data:any;
+  final_counter:any = 0;
+  private socket_Notify
+  final_data = [] 
+  countfun(){
+    if(this.final_counter == 0){
+      return false
+    }
+    else{
+      return true
+    }
+  }
+  checker(){
+    this.final_counter = 0;
+    window.localStorage['Notifi_Counter'] = this.counter;
+
+  }
+  calldevice(did){
+  // console.log(did)
+  window.localStorage['mapLoad_ID'] = did
+  this.router.navigateByUrl("location");
+  }
+  accListener(){
+    var outerThis = this;
+    return function(msg){
+      // console.log(msg);
+      
+      // debugger; theft alert
+      if((outerThis.superAdmin=== true)&&(msg.item._type === "Ignition Alert" || msg.item._type==="Theft Alert" || msg.item._type=="Max Stoppage Alert" || msg.item._type=="Max Idling Alert")){
+        //  console.log("msgmsgmsgmsgmsgmsgmsgmsgmsgmsg",msg);
+      }else{
+        console.log("msg12",msg);
+        var dt = new Date(msg.timestamp);
+        let  day = dt.getDate(); 
+         let  month = dt.getMonth()+1; 
+         let  year = dt.getFullYear();
+       
+         let final_date = day+"/"+month+"/"+year
+        let tm = new Date(msg.timestamp).toLocaleTimeString();
+       
+        let data = {
+          date:final_date,
+          time:tm,
+          data:msg.item.sentence,
+          did:msg.device,
+          user:msg.user,
+          _id : msg._id
+        }
+        ++ outerThis.final_counter;
+        // console.log("msgmsgmsgmsgmsgmsgmsgmsgmsgmsg",msg);
+        if(msg.priority== 3){
+          // console.log("open msg box");
+          outerThis.playAudio(3);
+          outerThis.openAlertBox(msg);
+         
+        }else{
+          // console.log("open msg box else block")
+          outerThis.playAudio(1);
+        }
+  
+        window.localStorage['Notifi_Counter'] = outerThis.final_counter;
+        outerThis.final_counter=window.localStorage.Notifi_Counter
+        outerThis.final_data.unshift(data);
+       // 
+      }
+     
+    }
+
+  }
+getData(a){
+  return this.http.get(this.dev_url  + '/notifs/getRecent?user='+a)
+  .map(res => res.json());
+
+ 
+}
+audio:any;
+GET_notif:boolean;
+
+playAudio(notifSignal){
+  // notification
+  // console.log("SOS Alert");
+  if(notifSignal == 3){
+ 
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notifSOS.wav';
+    this.audio.play();
+    Audio.prototype.stop = function()
+    {
+        this.pause();
+        this.currentTime = 0.0;
+    }
+    // auto-start
+    // this.audio.play();
+  }else{
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notification.wav';
+  
+    // auto-start
+    this.audio.play();
+  }
+
+
+}
+mb:any
+
+  ngOnInit() {
+   
+    
+   /*  this.final_counter=window.localStorage.Notifi_Counter */
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.GET_notif = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).GET_notif; 
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+
+    this.socket_Notify = this.injectData.getSocket_notifIO();          
+    this.socket_Notify.on('connect', function(this){ });
+    this.socket_Notify.on( this.useridd, this.accListener());
+    this.getData(this.useridd).subscribe(
+      data => {
+        console.log('Notification data on every click',data);
+        this.final_data=[];
+        this.devicess = data ;
+        for(let r=0;r<this.devicess.length;r++){
+          var dt = new Date(this.devicess[r].timestamp);
+           let  day = dt.getDate(); 
+           let  month = dt.getMonth()+1; 
+           let  year = dt.getFullYear();
+          if((this.devicess[r].address=="")||(this.devicess[r].address==null)){
+            this.address = ""
+          }else{
+            this.address =  "at" + "  " + this.devicess[r].address
+          }
+         
+           let final_date = day+"/"+month+"/"+year
+          let tm = new Date(this.devicess[r].timestamp).toLocaleTimeString();
+          if(this.devicess[r].commentSaved){
+            
+          }else{
+            let data = {
+              date:final_date,
+              time:tm,
+              data:this.devicess[r].item.sentence,
+              did:this.devicess[r].device,
+              address:this.address,
+              user:this.devicess[r].user,
+              _id:this.devicess[r]._id
+            }
+
+            this.final_data.push(data);
+          }
+          // console.log('this.final_data',this.final_data);
+        }
+      }
+    )
+    // }
+  
+
+  }
+
+  dialogRef:any;
+  openAlertBox(message){
+    this.dialogRef = this.dialog.open(SOSAlertComponent, {
+      height:'300px',
+      width:'430px',
+      
+      data: {'socketData':message}
+      });
+
+      this.dialogRef.afterClosed().subscribe(result => {   
+        if(result=="success"){}
+        });
+  }
+  ngOnDestroy() {
+    if( this.socket_Notify){
+      this.socket_Notify.removeAllListeners()
+    }
+  
+     /*  this.socket_Notify.removeAllListeners(this.useridd) */
+  }
+
+  openPopup(device){
+    // console.log("popup opened");
+    var that  =this;
+document.getElementById("mdMenu").style.display="none"
+    var commentWindow = this.dialog.open(CommentWindowComponent, {
+    //  height:'300px',
+    //   width:'500px',
+      
+      data: {'deviceData':device}
+      });
+
+      commentWindow.afterClosed().subscribe(result => {   
+        console.log(result);
+        
+        if(result){
+          that.ngOnInit() ; 
+        }
+        });
+  }
+}
diff --git a/src/app/otp.ts b/src/app/otp.ts
new file mode 100644
index 0000000..fd8a5ec
--- /dev/null
+++ b/src/app/otp.ts
@@ -0,0 +1,4 @@
+export class Otp{
+    _id?: string;
+  ph_num: string;
+}
\ No newline at end of file
diff --git a/src/app/otp_log.ts b/src/app/otp_log.ts
new file mode 100644
index 0000000..b31fc8f
--- /dev/null
+++ b/src/app/otp_log.ts
@@ -0,0 +1,5 @@
+export class Otp_log{
+    _id?: string;
+  ph_num: string;
+  otp: any;
+}
\ No newline at end of file
diff --git a/src/app/play-trip/play-trip.component.html b/src/app/play-trip/play-trip.component.html
new file mode 100644
index 0000000..66bb779
--- /dev/null
+++ b/src/app/play-trip/play-trip.component.html
@@ -0,0 +1,39 @@
+<div class="container">
+  <div id="map" style="width:100%;height: 100%;"></div>
+      <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="position: absolute; top: 10px;background: white; border-radius: 2px;padding: 3px 20px;left: 215px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+        <div class="col-12">
+          <div style="display: flex;">
+            <div>
+            <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='init'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+            <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)" mdTooltip="{{'Play History' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+            <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)" mdTooltip="{{'Pause' | translate}}" style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+            </div>
+            <input type="range" min="0" max={{seekBarValue}}  [(ngModel)]="sliderValue" class="slider" id="slider1" style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"  (change)="zoomSet()">
+            <!-- <div class="kWgQNm" id="myDIV">
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+      <div class="row" style="padding:0;position: absolute;top: 432px;background: white;border-radius: 2px;padding: 10px 0px;width: 62%;left: 40px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+        <div class="col-3">
+           <p style="font-weight: 700;text-align: center;margin: 0;">Distance</p>
+           <p style="text-align: center;margin: 0;">{{tdistance}}</p>
+        </div>
+        <div class="col-5">
+          <p style="font-weight: 700;text-align: center;margin: 0;">Cumulative Distance (Kms.)</p>
+          <p style="text-align: center;margin: 0;">{{cummulative_Distance}}</p>
+        </div>
+        <div class="col-4">
+          <p style="font-weight: 700;text-align: center;margin: 0;">Speed (Kmph)</p>
+          <p style="text-align: center;margin: 0;">{{speeed2}}</p>
+        </div>
+        <!-- <div class="col-2">
+          <p style="font-weight: 700;text-align: center;margin: 0;">Time</p>
+          <p style="text-align: center;margin: 0;">{{triptime|date:'medium'}}</p>
+        </div> -->
+      </div>
+</div>
\ No newline at end of file
diff --git a/src/app/play-trip/play-trip.component.scss b/src/app/play-trip/play-trip.component.scss
new file mode 100644
index 0000000..b9c1360
--- /dev/null
+++ b/src/app/play-trip/play-trip.component.scss
@@ -0,0 +1,63 @@
+.container{
+    width: 900px;
+    height: 500px;
+    position: relative;
+}
+
+#slider {
+    margin: 20px;
+  }
+
+  .kWgQNm {
+    box-sizing: border-box;
+    display: flex;
+    -webkit-box-pack: start;
+    justify-content: flex-start;
+    align-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    max-width: unset;
+    min-width: unset;
+    min-height: unset;
+    cursor: unset;
+    transform: unset;
+    word-break: unset;
+    z-index: unset;
+    padding: 0px;
+    margin: 0px;
+    overflow: unset;
+    background: unset;
+    border-right: unset;
+    border-bottom: unset;
+    flex: 0 0 auto;
+    border-radius: unset;
+    transition: initial;
+}
+
+
+.kWgQNm{
+    //   .active,  .dfmgGo:hover{
+    //         background-color: rgb(30, 172, 178);
+    //         border-right: 1px solid rgb(30, 172, 178);
+    //         border-top: 1px solid rgb(30, 172, 178);
+    //         border-bottom: 1px solid rgb(30, 172, 178);
+    //         color:white;
+    //     }
+        
+        .active, .sc-bdVaJa:hover{
+            background-color: rgb(30, 172, 178);
+            color:white;
+            border-bottom: 1px solid rgb(30, 172, 178);
+        }
+        
+        // .active, .bvKoMW:hover{
+        //     background-color: rgb(30, 172, 178);
+        //     border-right: 1px solid rgb(30, 172, 178);
+        //     border-top: 1px solid rgb(30, 172, 178);
+        //     border-bottom: 1px solid rgb(30, 172, 178);
+        //     color:white;
+        // }
+    
+    }
\ No newline at end of file
diff --git a/src/app/play-trip/play-trip.component.spec.ts b/src/app/play-trip/play-trip.component.spec.ts
new file mode 100644
index 0000000..0e3ab23
--- /dev/null
+++ b/src/app/play-trip/play-trip.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayTripComponent } from './play-trip.component';
+
+describe('PlayTripComponent', () => {
+  let component: PlayTripComponent;
+  let fixture: ComponentFixture<PlayTripComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlayTripComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlayTripComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/play-trip/play-trip.component.ts b/src/app/play-trip/play-trip.component.ts
new file mode 100644
index 0000000..b06d93d
--- /dev/null
+++ b/src/app/play-trip/play-trip.component.ts
@@ -0,0 +1,998 @@
+import { Component, OnInit, Inject, ElementRef } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+declare var google :any;
+declare var moment:any;
+
+@Component({
+  selector: 'app-play-trip',
+  templateUrl: './play-trip.component.html',
+  styleUrls: ['./play-trip.component.scss']
+})
+export class PlayTripComponent implements OnInit {
+  latlongObjArr: any;
+  path: any;
+  datee: any;
+  dataArrayCoords: any=[];
+  latLngLine: any=[];
+  lat: any;
+  lng: any;
+  marker4: any;
+  tempMapHistory=[];
+  seekBarValue: any=200;
+  sliderValue: number=0;
+  start:any;
+  flag: string;
+  cummulative_Distance: number;
+  ext_voltage: string;
+  historyDate: any;
+  indexValue: number;
+  tdistance: any;
+  triptime: any;
+  constructor(public elementRef: ElementRef,public dialogRef: MdDialogRef<PlayTripComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { }
+  gMap:any;
+
+  ngOnInit() {
+    console.log('this.data.distance',this.data);
+    this.tdistance = (this.data.distance/1000).toFixed(2)   + ' Kms.';
+  console.log(this.data);
+  var that= this;
+    let map;
+     if (navigator.geolocation) {  
+       if(location.protocol != 'https:'){
+         this.contactService.getlatLong().subscribe(res=>{
+           console.log(res);
+           var position = {
+             coords: { 
+               latitude: res.lat,
+               longitude: res.lon
+             }
+           };
+           this.gMap = new google.maps.Map(document.getElementById('map'), {
+             center: {
+                 lat: position.coords.latitude,
+                 lng: position.coords.longitude
+             },
+           
+             zoom: 18,
+             mapTypeId: 'terrain'
+         }); 
+         this.plotPolyline();  
+         if(that.data.geofences!=undefined){
+             that.plotGeofence(that.data.geofences[0]._id);
+             that.plotGeofence2(that.data.geofences[1]._id);
+        }             
+         })
+       }else{
+         navigator.geolocation.getCurrentPosition(function(position) {     
+          that.gMap = new google.maps.Map(document.getElementById('map'), {
+               center: {
+                   lat: position.coords.latitude,
+                   lng: position.coords.longitude
+               },  
+               zoom: 18,
+               mapTypeId: 'terrain'
+           });  
+           that.plotPolyline();  
+           if(that.data.geofences!=undefined){
+            that.plotGeofence(that.data.geofences[0]._id);
+            that.plotGeofence2(that.data.geofences[1]._id);
+           }      
+       });
+       }    
+    }  
+  }
+
+
+  plotPolyline(){
+    this.sliderValue=0;
+    var that = this;
+        this.contactService.getCurrentLocation(this.data.device.imei, this.data.fromdate, this.data.todate).subscribe((data3) => {
+          console.log(data3);
+          this.latlongObjArr = data3;
+          var flightPath = new google.maps.Polyline({
+            geodesic: true,
+            strokeColor: '#0000FF',
+            strokeOpacity: 1.0,
+            strokeWeight: 4,
+            icons: [{
+              icon: {
+                strokeColor: '#056608',
+                fillColor: '#056608',
+                strokeOpacity: 0.8,
+                strokeWeight: 4,
+                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
+              },
+              offset: '0',
+              repeat: '100px'
+            }         
+            ],   
+          });
+      
+          var playerSeekbar: any;
+          $( document ).ready(function() {
+            playerSeekbar = document.getElementById('slider1'); 
+            //console.log( "ready!", playerSeekbar['value']);
+            playerSeekbar.oninput = function () { 
+             
+                  zoomToObject(flightPath);
+                  that.changeRange();
+               
+                }
+             });
+      
+          function zoomToObject(obj){
+          var bounds = new google.maps.LatLngBounds();
+          var points = obj.getPath().getArray();
+          for (var n = 0; n < points.length ; n++){
+              bounds.extend(points[n]);
+          }
+          that.gMap.fitBounds(bounds);
+      }
+          this.path = flightPath.getPath();
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = this.data.device.Device_ID;
+            var speed = this.latlongObjArr[i].speed + "Km/hr";
+            var im = this.latlongObjArr[i].imei;
+  
+            // var speedArr.push(this.latlongObjArr[i].speed);
+            // var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // //console.log(JSON.parse(this.datee));
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+  
+       
+          
+            var content = '';
+            content = '<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + speed + '</b><br></div></b></div>'
+            '</div></div>'
+          
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+         
+            var arr = [];
+            // //console.log(this.latlongObjArr[i].cummulative_distance);
+         
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+       
+         
+            
+            this.latLngLine.push(cord);
+            var iconSrc = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000';
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+  
+            // ======================added ========================================
+            // this.lat = this.latlongObjArr[i].lat;
+            // this.lng = this.latlongObjArr[i].lng;       
+            // this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+              // if (this.dataColor === true) {
+              //   var markersPast = new google.maps.Marker({
+              //     position: new google.maps.LatLng(this.lat, this.lng),
+              //     icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+              //     map: map,
+              //   })
+  
+              //   markersPast['infowindow'] = new google.maps.InfoWindow({ content: content });
+             
+  
+              //   google.maps.event.addListener(markersPast, 'click', function () {
+            
+              //     var lattitude = markersPast.position.lat();
+              //     var longitude = markersPast.position.lng()  ;
+              //     var latlng_1 =
+              //     {
+              //       "lat": lattitude,
+              //       "long":  longitude
+              //     }
+              //     outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                 
+              //    if(res.message == "Address not found in databse"){ 
+              //     var geocoder = new google.maps.Geocoder();
+              //     var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+              //     var request = {
+              //       latLng: latlng
+              //     };
+              //     // //console.log('latlongVal', request)
+              //     var innerThis = this ; 
+              //     this['infowindow'].open(map, innerThis); 
+              //     geocoder.geocode(request, function (data, status) { 
+              //       if (status == google.maps.GeocoderStatus.OK) {
+              //         if (data[0] != null) {
+              //           // innerThis.contentAdd = data[0].formatted_address;
+              //           var tempAdd = data[0].formatted_address;
+              //             var getAddressContent = document.getElementById('addressBinding');
+              //             getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+                       
+              //         } else {
+              //           // //console.log("No address available")
+              //           var tempAdd_1 = "No address available";
+              //           var getAddressContent = document.getElementById('addressBinding');
+              //           getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+                      
+                     
+                     
+              //         }
+              //       }
+              //       else {
+              //         var tempAdd_2 = 'NA';
+              //         var getAddressContent = document.getElementById('addressBinding');
+              //         getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+              //         //console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+                    
+              //       }
+              
+              //     })
+  
+              //       }else{
+              //         var innerThis_1 = this ; 
+                  
+              //         this['infowindow'].open(map, innerThis_1);      
+              //         var tempAdd  = res.address ; 
+              //         //console.log('innerThis_1.contentAdd',tempAdd);
+              //         var chkTmout = setTimeout(function(){
+              //           var getAddressContent = document.getElementById('addressBinding');
+              //           // //console.log('getAddressContent',getAddressContent);
+              //           getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+              //           clearTimeout(chkTmout);
+              //         },500)
+                    
+              //       }
+  
+              //     })
+  
+               
+                  
+              //     })
+              //   // cluster_arr.push(markersPast);
+  
+              // }
+  
+  
+              var markerCurrent;
+              var markerSrc;
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                that.gMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(that.gMap);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconSrc
+                });
+  
+                that.marker4 = markerSrc;
+              }
+  
+  
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+                // if (this.dataColor) {
+                //   var markersPast = new google.maps.Marker({
+                //     position: new google.maps.LatLng(this.lat, this.lng),
+                //     icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                //     map: map,
+                //   })
+                //   markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                //   google.maps.event.addListener(markersPast, 'click', function () { 
+                //     //console.log("inside info window function 1");
+                //     this['infowindow'].open(map, this); });
+               
+  
+                // }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconDest
+                });
+  
+                // outerThis.marker4 = markerCurrent;
+                that.gMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(that.gMap);
+                zoomToObject(flightPath);
+  
+              }
+  
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconSrc
+                })
+                that.marker4 = markerSrc;
+              }
+            }
+          }
+          var tempData = {
+            fromTime:this.data.fromdate,
+            toTime:  this.data.todate,
+            device_name: this.data.device.imei,
+            device_obj: this.data.device,
+            lineThickness: 4,
+            idleColor: 'red',
+            parkingColor: 'blue',
+            dataColor: 'green',
+            flag: 'init'
+          }
+          tempData['dataArrayCoords'] = this.dataArrayCoords;
+          this.seekBarValue = this.dataArrayCoords.length;
+          this.tempMapHistory.push(tempData);
+          console.log('this.tempMapHistory',this.tempMapHistory);
+        })
+     
+
+  }
+
+  zoomSet(){
+    this.gMap.setZoom(15);
+  }
+  speed=200;
+  changeSpeed(t){
+    //console.log(t);
+    this.speed = t * 100;
+    var header = document.getElementById("myDIV");
+    var btns = header.getElementsByClassName("sc-bdVaJa");
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener("click", function() {
+      var current = document.getElementsByClassName("active");
+      current[0].className = current[0].className.replace(" active", "");
+      this.className += " active";
+      });
+    }
+  }
+  showStatus:boolean=false;
+  goToPoint: () => void;
+  moveMarker: () => void;
+  play(playindex) {
+    // //console.log('playindex',playindex);
+  
+    this.showStatus = true
+
+    var icontype = this.data.device.iconType;
+    var tempObj = { "icontype": icontype }
+    var tempDataCoordArr = this.tempMapHistory[playindex].dataArrayCoords;
+    
+    tempObj["tempDataCoordArr"] = tempDataCoordArr;
+
+    if (this.tempMapHistory[playindex]['flag'] == 'init') {
+      this.animateMarker_history(this.marker4, tempDataCoordArr, 50, icontype);
+      tempObj["marker"] = this.marker4;
+      this.tempMapHistory[playindex]['flag'] = 'stop';
+      tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+ 
+    } else if (this.tempMapHistory[playindex]['flag'] == 'start') {
+      
+        this.moveMarker();
+        // clearTimeout(this.start);
+        this.tempMapHistory[playindex]['flag'] = 'stop';
+        tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+      
+      } else
+        if (this.tempMapHistory[playindex]['flag'] == 'stop') {
+          this.speed = 0;
+          clearTimeout(this.start);
+          this.tempMapHistory[playindex]['flag'] = 'start';
+          tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+        }
+
+    if (this.flag == 'reset') {
+      this.marker4.setPosition({ lat: this.latLngLine[0].lat, lng: this.latLngLine[0].lng });
+      this.flag = 'init';
+    }
+
+  }
+  speeed2: any = 0;
+  PlayData: boolean = false;
+  playingHistory: boolean = false;
+  rangeDetector:boolean=false;
+  animateMarker_history(marker, coords, km_h, iconType) {
+    this.cummulative_Distance = 0;
+    //console.log('coords=>',coords);
+    var ongoingMoveMarker = null;
+    // this.SpeedMeter2 = true;
+    // this.pauseDate = true;
+    this.PlayData = true;
+    // this.playingHistory = true;
+    this.gMap.setZoom(15);
+    if ((km_h == 0) || (km_h == '0')) {
+      km_h = 50;
+    }
+    var map, marker;
+    var coord = this.dataArrayCoords[0];
+    this.playingHistory = true;
+
+    var lat = coord[0];
+    // //console.log(lat);
+    var lng = coord[1];
+    let outerThis = this
+    var startPos = [lat, lng];
+    this.speed = 200
+    var iconselected = this.data.device.iconType;
+    var delay = 100;
+  
+
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(60, 60),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+
+
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon
+    }
+    var that = this;
+
+    var contentString
+
+    map = this.gMap;
+
+    var target = 0;
+    // if(this.rangeDetector == true){
+    //   target = this.indexValue; 
+    // }
+    // this.rangeDetector=false;
+    var km_h = km_h || 50;
+    
+
+    if (!startPos.length)
+      coords.push([startPos[0], startPos[1]]);
+
+    that.goToPoint = function () {
+      // //console.log("Go to point function");
+      if(that.rangeDetector === true){
+        a= that.indexValue;
+        target   = that.indexValue;
+        that.sliderValue = that.indexValue;
+      }
+      var lat = marker.position.lat();
+      var lng = marker.position.lng();
+      // that.getAddress(lat,lng);
+   
+      if(km_h === 0){
+        km_h = 200 ;  
+      }
+      var step = (km_h * 1000 * delay) / 3600000; // in meters
+      var dest = new google.maps.LatLng(
+        coords[target][0], coords[target][1]);
+      //  //console.log(coords[target][2])
+      var r = coords[target][2];
+      
+      // outerThis.triptime = new Date(coords[target][4]);
+      // console.log(outerThis.triptime);
+      outerThis.speeed2 = r;
+      outerThis.ext_voltage = '22v';
+
+      outerThis.historyDate = coords[target][4];
+      outerThis.ext_voltage = coords[target][5];
+      // //console.log("outerThis.historyDate",coords);
+
+      var distance = google.maps.geometry.spherical.computeDistanceBetween(dest, marker.position); // in meters
+
+      var numStep = distance / step;
+   
+      var i = 0;
+      var deltaLat = (coords[target][0] - lat) / numStep;
+      var deltaLng = (coords[target][1] - lng) / numStep;
+      // //console.log('cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc',target);
+      that.moveMarker = function () {
+        // //console.log("Move Marker Function");
+        // //console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz',a,target);
+        // ye wala movemarker function h  
+        outerThis.sliderValue = a; 
+        outerThis.cummulative_Distance  = coords[target][3] ; 
+        lat += deltaLat;
+        lng += deltaLng;
+        i += step;
+        // //console.log('icons[iconselected].rotation',icons[iconselected].rotation);
+        let markerDOM: any;
+        var status = "RUNNING";
+      
+        if (i < distance) {
+          // let iconType = 'car';
+          // //console.log('iconsiconsiconsiconsiconsicons',icons);
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+          var msg;
+          // //console.log('iconType',iconType);
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+          // //console.log('markerDOM',markerDOM);
+          
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng));
+
+      
+          //console.log('head',head);
+        
+          // if (head != 0) {
+            // icons[iconselected].rotation = head
+           
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(new google.maps.LatLng(lat, lng));
+
+          map.setCenter({ lat: lat, lng: lng });
+          // //console.log("Abinash");
+          that.start = setTimeout(that.moveMarker, delay);
+        }
+        else {
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), dest);
+         
+        
+
+          // var iconType = 'car';
+
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(dest);
+          map.setCenter({ lat: coords[target][0], lng: coords[target][1] });
+          // //console.log('target',target);
+          target++;
+          if (target == coords.length) { target = 0; }
+          that.start = setTimeout(that.goToPoint, delay);
+
+        }
+      }
+      a++
+   
+  
+      that.rangeDetector = false;
+      // //console.log("outside moveMarker function");
+      if (a > coords.length) {
+        // //console.log("Cord.length if condition");  
+        outerThis.speeed2 = 0;
+    
+      }
+      else {     
+        // //console.log("Cord.length else condition");   
+        that.moveMarker();
+        km_h = outerThis.speed;
+      }
+    }
+    var a = 0;
+   
+   
+    // //console.log("Gotopoint function");
+    that.goToPoint();
+
+  }
+
+  iconSelector(status, iconType, msg) {
+  
+
+    // var tempSpeed = msg.speed;
+    // var tempIgn = msg.ignition;
+    var iconUrl = "";
+    // if(status !="OUT OF REACH"){
+    //   if (((msg.speed != undefined) && (msg.speed != null)) && ((msg.ignition != null)&&(msg.ignition != undefined))) {
+    //     if (parseInt(msg.ignition) == 0) {
+    //       status = "STOPPED"
+    //     }
+    //     else if (msg.ignition == "1" && parseInt(msg.speed) > 0) {
+    //       status = "RUNNING";
+    //     } else {
+    //       status = "IDLING"
+    //     }
+    //   }
+    // }
+
+    if (status == "OUT OF REACH") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/obike.png';
+        return iconUrl;
+      }
+      if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/ocar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/obus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/otruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/otractor.png';
+        return iconUrl;
+      }  else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/ourjcb.png';
+        return iconUrl;
+      }
+      else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_b.png';
+        return iconUrl;
+      }
+    else {
+        iconUrl = '/assets/images/liveTrackIcons/user_b.png';
+        return iconUrl;
+      }
+
+    } else if (status == "STOPPED") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/sbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/scar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/sbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/struck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/stractor.png';
+        return iconUrl;
+      }else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/stoppedjcb.png';
+        return iconUrl;
+      }   else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_r.png';
+        return iconUrl;
+      }else {
+        iconUrl = '/assets/images/liveTrackIcons/user_r.png';
+        return iconUrl;
+      }
+    } else if (status == "RUNNING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/rbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/rcar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/rbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/rtruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/rtractor.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/images/liveTrackIcons/runningjcb.png';
+        return iconUrl;
+
+      }  else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_g.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    } else if (status == "IDLING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/ibike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/icar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/ibus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/itruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/itractor.png';
+        return iconUrl;
+      }else if(iconType == "jcb" ){
+        iconUrl = '/assets/images/liveTrackIcons/idlingjcb.png';
+        return iconUrl;        
+
+      } else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_y.png';
+        return iconUrl;
+      }  else {
+        iconUrl = '/assets/images/liveTrackIcons/user_y.png';
+        return iconUrl;
+      }
+    }else if (status == "NO DATA") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    }
+  }
+
+
+ 
+changeRange(){ 
+  
+  clearTimeout(this.start);
+  this.rangeDetector = true;
+  var rangeVal = document.getElementById("slider1");
+ 
+
+  this.indexValue  = rangeVal['value'];
+
+ if(this.tempMapHistory[0]['flag'] == 'stop'){
+    this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.gMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.goToPoint();
+  
+ } 
+ if(this.tempMapHistory[0]['flag'] == 'start'){
+  this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.gMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.tempMapHistory[0]['flag'] = 'stop';
+  this.goToPoint();
+
+ }
+
+}
+devicess:any;
+plotGeofence(id){
+ 
+  this.contactService.getperGeoFence(id).subscribe(      
+    data => {
+      this.devicess = data 
+      // console.log(this.devicess);
+      var cordin=[];
+      let a = this.devicess[0].geofence.coordinates[0];
+      for(let k=0;k<a.length;k++){
+      let b ={
+      lat : a[k][1],
+      lng : a[k][0]
+      }
+   
+      cordin.push(b);
+      }  
+      this.draw(cordin, this.devicess[0].geoname);
+    });
+}
+plotGeofence2(id){
+ 
+  this.contactService.getperGeoFence(id).subscribe(      
+    data => {
+      this.devicess = data 
+      // console.log(this.devicess);
+      var cordin=[];
+      let a = this.devicess[0].geofence.coordinates[0];
+      for(let k=0;k<a.length;k++){
+      let b ={
+      lat : a[k][1],
+      lng : a[k][0]
+      }
+     
+      cordin.push(b);
+      }  
+      this.draw(cordin, this.devicess[0].geoname);
+    });
+}
+
+draw(zzz,yyy){
+ 
+  var infoWindow;
+ // console.log(typeof zzz)
+  var GeoFencCoords = zzz
+  var GeoName = yyy
+  // plotPoly(GeoFencCoords,this.gMap);
+  var that=this;
+  // function plotPoly(GeoFencCoords,map) {  
+    // console.log(map); 
+    console.log('GeoFencCoords',GeoFencCoords);
+    var bermudaTriangle = new google.maps.Polygon({
+      paths: GeoFencCoords,
+      strokeColor: '#FF0000',
+      strokeOpacity: 0.8,
+      strokeWeight: 3,
+      fillColor: '#FF0000',
+      fillOpacity: 0.35
+    });
+    
+    bermudaTriangle.setMap(this.gMap);
+    // Add a listener for the click event.
+    bermudaTriangle.addListener('click', showArrays);
+    infoWindow = new google.maps.InfoWindow;
+  // }
+
+  /** @this {google.maps.Polygon} */
+  function showArrays(event) {
+    // Since this polygon has only one path, we can call getPath() to return the
+    // MVCArray of LatLngs.
+    var vertices = this.getPath();
+
+    var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+
+    infoWindow.setContent(contentString);
+    infoWindow.setPosition(event.latLng);
+    infoWindow.open(that.gMap);
+  }
+}
+
+  
+  
+}
diff --git a/src/app/poi-dtl-del/poi-dtl-del.component.html b/src/app/poi-dtl-del/poi-dtl-del.component.html
new file mode 100644
index 0000000..7e28301
--- /dev/null
+++ b/src/app/poi-dtl-del/poi-dtl-del.component.html
@@ -0,0 +1,15 @@
+<div>
+  <h1 style="font-size: 1.4rem;text-align: center;color: #5a5757;">{{'POI details' | translate}}</h1>
+  <table class="table">
+    <tbody>
+      <tr><td>poiname</td><td>{{dataPoi.poi.poiname }}</td></tr>
+      <tr><td>duration_from_previous</td><td>{{dataPoi.poi.duration_from_previous?dataPoi.poi.duration_from_previous:0 }}</td></tr>
+      <tr><td>duration_to_next</td><td>{{dataPoi.poi.duration_to_next?dataPoi.poi.duration_to_next:0 }}</td></tr>
+      <tr><td>duration_halt</td><td>{{dataPoi.poi.duration_halt?dataPoi.poi.duration_halt:0 }}</td></tr>
+      </tbody>
+  </table>
+<div class="row float-right">
+  <button class="btn btn-primary" (click)="delete()">Delete</button>
+  <button class="btn btn-secondary ml-1" (click)="cancel()">Cancel</button>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/poi-dtl-del/poi-dtl-del.component.scss b/src/app/poi-dtl-del/poi-dtl-del.component.scss
new file mode 100644
index 0000000..6e1f282
--- /dev/null
+++ b/src/app/poi-dtl-del/poi-dtl-del.component.scss
@@ -0,0 +1,3 @@
+  .mat-dialog-container {
+    height: auto !important;
+  }
\ No newline at end of file
diff --git a/src/app/poi-dtl-del/poi-dtl-del.component.spec.ts b/src/app/poi-dtl-del/poi-dtl-del.component.spec.ts
new file mode 100644
index 0000000..923dcbf
--- /dev/null
+++ b/src/app/poi-dtl-del/poi-dtl-del.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoiDtlDelComponent } from './poi-dtl-del.component';
+
+describe('PoiDtlDelComponent', () => {
+  let component: PoiDtlDelComponent;
+  let fixture: ComponentFixture<PoiDtlDelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoiDtlDelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoiDtlDelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poi-dtl-del/poi-dtl-del.component.ts b/src/app/poi-dtl-del/poi-dtl-del.component.ts
new file mode 100644
index 0000000..79da36c
--- /dev/null
+++ b/src/app/poi-dtl-del/poi-dtl-del.component.ts
@@ -0,0 +1,34 @@
+
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-poi-dtl-del',
+  templateUrl: './poi-dtl-del.component.html',
+  styleUrls: ['./poi-dtl-del.component.scss']
+})
+export class PoiDtlDelComponent implements OnInit {
+
+  dataPoi:any;
+  constructor(private contactService: ContactService,private router: Router,public dialogRef: MdDialogRef<PoiDtlDelComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      // this.routeId = data.routeId;
+      // console.log(this.routeId);
+    }
+
+  ngOnInit() {
+    this.dataPoi=JSON.parse(localStorage.poiShowDelData);
+  }
+  cancel(){
+    this.dialogRef.close('close');
+  }
+  delete(){
+    this.contactService.deletePOI(this.dataPoi._id).subscribe(resp => {
+      this.dialogRef.close('delete');
+      console.log("delete POI",resp);
+    })
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/poi-list/poi-list.component.html b/src/app/poi-list/poi-list.component.html
new file mode 100644
index 0000000..e7faa86
--- /dev/null
+++ b/src/app/poi-list/poi-list.component.html
@@ -0,0 +1,78 @@
+<div style="width:100%;height:100%;padding-top: 6%;">
+  <h1 style="font-size: 1.4rem;text-align: center;color: #5a5757;">{{'Add POI details' | translate}}</h1>
+  <table class="table table-striped table-hover" style="overflow-y: hidden;overflow-x: hidden;font-size:12px">
+    <thead>
+    </thead>
+    <tbody>
+      <tr>
+        <td style="cursor:pointer">
+            <div class="row">
+              <div class="col-sm-3">
+                {{'POI name' | translate}} :
+              </div>
+              <div class="col-sm-7">
+                <input id="myInput" type="text" style="padding-left: 6px;width: 215px;border-radius: 5px;" [(ngModel)]="poiName" placeholder="{{'Type POI name' | translate}}"
+                />
+              </div>
+            </div>
+            <div class="row" style="padding-top:8px;">
+              <div class="col-sm-3">
+                <span>{{'Previous point duration' | translate}}</span>
+              </div>
+              <div class="col-sm-2">
+              {{'Days' | translate}} : 
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preDays" placeholder="{{'Days' | translate}}" />
+              
+              </div>
+              <div class="col-sm-2">
+              {{'Hours' | translate}} : 
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preHours" placeholder="Hours" />         
+              </div>
+              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
+               {{'Minutes' | translate}} : 
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="preMin" placeholder="Min" />           
+              </div>
+            </div>
+            <div class="row" style="padding-top:8px;">
+              <div class="col-sm-3">
+                <span>{{'Next point duration' | translate}} </span>
+              </div>
+              <div class="col-sm-2">
+             {{'Days' | translate}} : 
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextDays" placeholder="{{'Days' | translate}}" />  
+              </div>
+              <div class="col-sm-2">
+             {{'Hours' | translate}} :
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextHours" placeholder="{{'Hours' | translate}}" />    
+              </div>
+              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
+             {{'Minutes' | translate}} :
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="nextMin" placeholder="{{'Min' | translate}}" />
+              
+              </div>
+            </div>
+            <div class="row" style="padding-top:8px;">
+              <div class="col-sm-3">
+                <span>{{'Halt' | translate}} :  </span>
+              </div>
+              <div class="col-sm-2">
+                  {{'Days' | translate}} :
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltDays" placeholder="Days" />
+             
+              </div>
+              <div class="col-sm-2">
+                  {{'Hours' | translate}} :
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltHours" placeholder="Hours" />
+              
+              </div>
+              <div class="col-sm-2" style="padding: 0px;padding-left: 24px;">
+                  {{'Minutes' | translate}} :
+                  <input style="width: 55px;border-radius: 6px;padding-left: 5px;" id="myInput" type="number" [(ngModel)]="haltMin" placeholder="Min" />        
+              </div>
+            </div>
+            <button style="margin-left: 50%;margin-top: 10px;width: 100px;letter-spacing: 2px;" class="btn btn-primary btn-block/" (click)="updateDetails()">{{'SAVE' | translate}}</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
\ No newline at end of file
diff --git a/src/app/poi-list/poi-list.component.scss b/src/app/poi-list/poi-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/poi-list/poi-list.component.spec.ts b/src/app/poi-list/poi-list.component.spec.ts
new file mode 100644
index 0000000..b301c38
--- /dev/null
+++ b/src/app/poi-list/poi-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoiListComponent } from './poi-list.component';
+
+describe('PoiListComponent', () => {
+  let component: PoiListComponent;
+  let fixture: ComponentFixture<PoiListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoiListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoiListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poi-list/poi-list.component.ts b/src/app/poi-list/poi-list.component.ts
new file mode 100644
index 0000000..753375c
--- /dev/null
+++ b/src/app/poi-list/poi-list.component.ts
@@ -0,0 +1,97 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-poi-list',
+  templateUrl: './poi-list.component.html',
+  styleUrls: ['./poi-list.component.scss']
+})
+export class PoiListComponent implements OnInit {
+  routeId: any;
+  useridd: any;
+  route_detail:any;
+  poiName:any;
+  before:any;
+  preDays:any=0;
+  preHours:any=0;
+  preMin:any=0;
+  nextDays:any=0;
+  nextHours:any=0;
+  nextMin:any=0;
+  halt:any;
+  haltDays:any=0;
+  haltHours:any=0;
+  haltMin:any=0;
+  showDetails=[];
+  myInput:any;
+
+  constructor(private contactService: ContactService,private router: Router,public dialogRef: MdDialogRef<PoiListComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      // this.routeId = data.routeId;
+      // console.log(this.routeId);
+    }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    //this.getPOIdata();
+  }
+
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+poilist = [];
+  getPOIdata(){
+
+    this.contactService.POIDATA(this.routeId,this.useridd)
+      .subscribe(res=>{
+        this.route_detail =res;
+     //  console.log(this.route_detail[0].poi);
+       this.poilist = this.route_detail[0].poi;
+      //  console.log(this.poilist);
+      
+       
+      })  
+  }
+
+  
+  updateDetails(){
+
+    var previousDuration = this.preDays + ","  + this.preHours +"," + this.preMin ;
+    var nextDuration = this.nextDays+ "," +  this.nextHours +","+  this.nextMin;
+    var haltDuration = this.haltDays +"," +this.haltHours +"," + this.haltMin ;
+
+    // var haltDUration = new Date(this.halt);
+    // console.log('Working function !!!')
+  
+    var updatePayload= {
+        "pname":this.poiName,
+        "prv_dur" : previousDuration,
+        "nxt_dur": nextDuration,
+        "dur_halt" : haltDuration
+     };
+
+
+     var addPOI = JSON.stringify(updatePayload)
+    
+     this.dialogRef.close(addPOI);
+    //  console.log(updatePayload);
+    // this.contactService.updatePOIdetail(updatePayload)
+    //   .subscribe(res=>{
+    //     console.log(res);
+      
+    //     console.log(res);
+    //   },err=>{
+    //     console.log("error occured !!!")
+    //   })
+
+  }
+}
+
diff --git a/src/app/poi-master-edit/poi-master-edit.component.html b/src/app/poi-master-edit/poi-master-edit.component.html
new file mode 100644
index 0000000..9adf273
--- /dev/null
+++ b/src/app/poi-master-edit/poi-master-edit.component.html
@@ -0,0 +1,189 @@
+
+  <div [hidden] = "!templateIdentifier" style="height:540px">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div class="row">
+      <div class="col-12" style="display: inherit;">
+        <!-- <div style="width: 40%;">
+          <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+          <md-select  multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;" ngDefaultControl>
+            <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
+          </md-select> 
+        </div>   -->
+        <div>
+          <md-form-field style="padding-top: 12px;">
+            <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
+          </md-form-field> 
+        </div>
+        <div style="width: 30%;margin-left: 10px;">
+          <span>POI Type</span>
+          <select [(ngModel)]="poitype" class="form-control" name="poitype"  (change)="getpoi_type(poitype)">
+            <option *ngFor="let type of poiType; let i = index;" [value]="type.value" >{{type.view}}</option>
+            </select>
+        </div>   
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-12" style="text-align: right;margin-bottom: 10px;">
+        <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
+        <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
+      </div>
+    </div>
+    <div class="row"> 
+      <div class="col-12">
+        <div id="poiEditMap" style="padding: 0px;width: 100vh;display: flex;height: 80vh;"></div>
+      </div>
+    </div>
+  </div> 
+  <div [hidden]= "!editPOItemplate" style="height:540px">
+  <div class="row" style="background: #f8f9fa;">
+    <div class="col-12" style="display: inherit">
+        <md-form-field  style="padding-right: 10px;margin-top: 20px;">
+            <input type="text" mdInput name="text" [(ngModel)]="POINAME" placeholder="{{'POI Name' | translate}}">
+          </md-form-field>
+    <!-- </div> -->
+    <!-- <div class="col-3"> -->
+        <md-form-field  style="padding-right: 10px;margin-top: 20px;">
+            <input type="text" mdInput name="text" id="txtSource"  placeholder="{{'Enter a location' | translate}}">
+          </md-form-field>
+      
+    <!-- </div> -->
+    <!-- <div class="col-2"> -->
+        <md-form-field style="padding-right: 10px;margin-top: 20px;">
+            <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="{{'Radius (Meters)' | translate}}">
+          </md-form-field>
+          <div>
+            <p style="margin-bottom: 0px;">POI Type</p>
+            <select [(ngModel)]="poitype" class="form-control" name="poitype"  placeholder ="POI Type" style="margin-top: 5px;">
+              <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
+              </select>
+          </div>
+        
+    <!-- </div> -->
+    <!-- <div class="col-2"> -->
+    
+    <!-- </div> -->
+    <!-- <div class="col-2"> -->
+    
+    </div>       
+  </div>
+  <div class="row" style="margin-bottom: 5px;text-align: right;background: #f8f9fa;">
+    <div class="col-12">
+      <button class="btn btn-primary w3-button/" (click)="addPOI()" style="margin-left: 2%;width: 100px;height: 40px; margin-top: 1%;">{{'ADD' | translate}}</button>
+      <button class="btn btn-danger w3-button/" (click)="cancel()" style="width: 100px;height: 40px; margin-top: 1%;">{{'Cancel' | translate}}</button>
+    </div>
+  </div>
+  <div class="row" style="height: inherit;">
+    <div class="col-12" id="poiAddMap">
+        <!-- <div ></div> -->
+    </div> 
+  </div>
+  </div>
+
+    <div *ngIf="actionId=='MULTIPLE'" style="height:540px">
+      <div class="row" style="background: #f8f9fa;">
+        <div class="col-12 card" style="display: inherit">
+          <div class="card-header">
+            <h4>Add Multiple POI</h4>
+          </div>
+          <div class="card-body">
+          
+            <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+              <div class="col-sm-12" style="text-align: left;font-size: initial;">
+                <!-- <label >Choose an Excel File:</label>
+                              <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
+                <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+                  <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;"
+                    class="file-upload btn btn-primary">Browse
+                    for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+                  </label>
+                  <!-- <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+                    class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+                    aria-controls="collapseZero" (click)="uploadExcel()">Upload</button> -->
+                  <!-- (click)="uploadExcel()" -->
+                  <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
+                            style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
+                            class="btn btn-primary">Download Excel</a> -->
+                </div>
+              </div>
+            </div>
+            <!-- <div class="row" *ngIf="showErrorupload_1">
+              <div class=col-sm-12>
+                <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                  <thead>
+                    <tr>
+                      <th>{{'Toll Name' | translate}}</th>
+                      <th>{{'Toll Tax' | translate}}</th>
+                      <th>{{'Latitude' | translate}}</th>
+                      <th>{{'Longitude' | translate}}</th>
+                      <th>{{'Address' | translate}}</th>
+                      <th>{{'Status' | translate}}</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr *ngFor="let failedDevices of faileduploadDevices">
+                      <td style="cursor:pointer">{{failedDevices.tollName}}</td>
+                      <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
+                      <td style="cursor:pointer">{{failedDevices.lat}}</td>
+                      <td style="cursor:pointer">{{failedDevices.long}}</td>
+                      <td style="cursor:pointer">{{failedDevices.address}}</td>
+                      <td style="cursor:pointer">{{failedDevices.status}}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div> -->
+          
+          </div>
+          </div>
+          </div>
+          </div>
+
+
+
+
+
+
+<!-- 
+  <div class=col-sm-2 style="padding: 3% 0 0 0;">
+   
+  </div>
+  <div class=col-sm-10 style="padding-left: 0;">
+    <md-select  multiple [(ngModel)]="selectedDevices" style="width: 40%;margin-right: 2%;" ngDefaultControl>
+      <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
+    </md-select> 
+    <md-form-field style="margin-left: 2%;width: 30%;">
+      <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
+    </md-form-field> 
+    <select [(ngModel)]="poitype" class="form-control" name="poitype"  >
+      <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
+      </select>
+    <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
+    <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
+  </div> -->
+
+
+
+
+<!-- 
+  <div class="row" style="background: #d6d7dc3d">
+    <div class="col-sm-12 col-md-6 col-lg-4">
+      <span style="padding-left: 5px;">{{'Vehicles' | translate}}</span>
+      <md-select  multiple [(ngModel)]="selectedDevices" style="width: 40%;margin-right: 2%;" ngDefaultControl>
+        <md-option type ="checkbox" *ngFor="let item of poiDevices; let i = index;" [value]="item.id"  (click)="change(item, i)">{{item.deviceName}}</md-option>
+      </md-select> 
+    </div>
+    <div class="col-sm-12 col-md-6 col-lg-2">
+      <md-form-field style="margin-left: 2%;width: 30%;">
+        <input type="number" mdInput name="poiRadius" [(ngModel)]="poiRadius" placeholder="Radius (Meters)">
+      </md-form-field> 
+    </div>
+    <div class="col-sm-12 col-md-6 col-lg-3">
+      <select [(ngModel)]="poitype" class="form-control" name="poitype"  >
+        <option *ngFor="let type of poiType; let i = index;" [value]="type.value">{{type.view}}</option>
+        </select>
+    </div>
+    <div class="col-sm-12 col-md-6 col-lg-3">
+      <button class="btn btn-primary w3-button/" (click)="savepoi()">{{'Save' | translate}}</button>
+      <button class="btn btn-danger w3-button/" (click)="cancel()">{{'Cancel' | translate}}</button>
+    </div> 
+  </div> -->
\ No newline at end of file
diff --git a/src/app/poi-master-edit/poi-master-edit.component.scss b/src/app/poi-master-edit/poi-master-edit.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/poi-master-edit/poi-master-edit.component.spec.ts b/src/app/poi-master-edit/poi-master-edit.component.spec.ts
new file mode 100644
index 0000000..52f24f9
--- /dev/null
+++ b/src/app/poi-master-edit/poi-master-edit.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoiMasterEditComponent } from './poi-master-edit.component';
+
+describe('PoiMasterEditComponent', () => {
+  let component: PoiMasterEditComponent;
+  let fixture: ComponentFixture<PoiMasterEditComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoiMasterEditComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoiMasterEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poi-master-edit/poi-master-edit.component.ts b/src/app/poi-master-edit/poi-master-edit.component.ts
new file mode 100644
index 0000000..a8ffcf1
--- /dev/null
+++ b/src/app/poi-master-edit/poi-master-edit.component.ts
@@ -0,0 +1,601 @@
+import { Component, OnInit, Inject, ViewChild } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+declare var google: any;
+declare var swal: any;
+declare var XLSX:any;
+
+@Component({
+  selector: 'app-poi-master-edit',
+  templateUrl: './poi-master-edit.component.html',
+  styleUrls: ['./poi-master-edit.component.scss']
+})
+export class PoiMasterEditComponent implements OnInit {
+  // @ViewChild('select') selectElRef;
+  useridd: any;
+   uploadJSON: any;
+  poiRadius:any=30;
+  poitype:any;
+  templateIdentifier: boolean;
+  editPOItemplate: boolean;
+  poiMap: any ;
+  poiObject: any;
+  poiLat: string;
+  poiLong: string;
+  POINAME:any;
+  emailid: any;
+  devicesss: any;
+  dev:any;
+  poiDevices: any =[];
+  latlngArr: any;
+  selectedDevices: any;
+  Load: boolean;
+  POI_ID: any;
+  notSelectedPOIArray: any=[];
+  untrackedDev: any = [];
+  tempArray: any=[];
+  uncheckedArr: any=[];
+  actionId: any;
+  editDiv: boolean;
+  failedFiles=[]
+  failedUploadFiles:any;
+  showErrorupload: boolean;
+  faileduploadDevices: any;
+  showErrorupload_1: boolean =false;
+  source_address: any;
+  poiaddress: any;
+  addLat: any;
+  addlng: any;
+  AddMapObj: any;
+  addressString: any;
+  addressString_edit: string;
+
+  poiType=[
+    {view : "Provider",value:""},
+     {view : "Customer",value:"customer"},
+      {view : "Garage",value:"garage"}, 
+      {view : "Emergency",value:"emergency"},
+       {view : "Others",value:"others"}, 
+       {view : "Gas Station",value:"gas_station"},
+       {view :"Residence",value : "residence"},
+       {view : "City",value:"city"},
+       {view : "Work",value:"work"},
+        {view : "Resturant",value:"resturant"}, 
+        {view : "Shopping",value:"shopping"},
+         {view : "Bank",value:"bank"}, 
+         {view : "School",value:"school"},
+         {view :"Super Market",value : "supermarket"},
+         {view :"Gym",value : "gym"},
+         {view : "Home", value : "home"},
+         {view :"Grocery Store",value : "grocery_store"}
+  ];
+
+  constructor(public dialogRef: MdDialogRef<PoiMasterEditComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,public contactService :ContactService) {
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+      this.poiObject = data;
+      console.log(this.poiObject);
+      this.actionId = this.poiObject.poiData.actionId ;
+      if(this.actionId == "edit"){
+        this.templateIdentifier = true;
+        console.log(this.templateIdentifier);
+        this.POI_ID  = this.poiObject.poiData._id; 
+        console.log(this.poiObject);   
+        if((this.poiObject.poiData.poi.poi_type != undefined)||(this.poiObject.poiData.poi.poi_type != '')){
+          this.poitype = this.poiObject.poiData.poi.poi_type ; 
+        }
+        this.poiRadius = this.poiObject.poiData ?this.poiObject.poiData.radius :0
+        var deviceIDs = this.poiObject.poiData.untrackedDevice?this.poiObject.poiData.untrackedDevice:[];
+         console.log(deviceIDs);
+        if(deviceIDs.length != 0){
+         for(var k =0; k<deviceIDs.length;k++){
+           console.log(deviceIDs[k])
+           this.untrackedDev.push(deviceIDs[k]);
+          }
+          console.log("untrackedDevice=>",this.untrackedDev);
+        }
+         this.notSelectedPOIArray = this.untrackedDev;
+      
+
+      }
+      if(this.actionId == "add"){
+        this.editPOItemplate = true;
+      }
+      let that = this;
+     $("#excelFile").change(function(e){
+      let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+         
+       that.uploadJSON=d.map(function(d){  
+
+         if((isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90)&&(isFinite(d.long) && Math.abs(d.long) <= 180)){
+            console.log(d.lat);
+            return d;
+          }else{
+            if(!(that.failedFiles.includes(d))){
+                that.failedFiles.push(d)
+              }
+          }
+          
+          // else{
+          //   // if(that.uploadJSON[i]){
+          //     if(!(that.failedFiles.includes(d))){
+          //       that.failedFiles.push(d)
+          //     }
+          //     // that.uploadJSON.splice(i,1)
+          //   // }
+          // }
+
+          // if(isFinite(d.long) && Math.abs(d.long) <= 180){
+          //    console.log(d.long);
+          // }else{
+          //   // if(that.uploadJSON[i]){
+          //     if(!(that.failedFiles.includes(d))){
+          //       that.failedFiles.push(d)
+          //     }
+
+        
+
+        // return d;
+        });
+        console.log("file=>",that.uploadJSON);
+
+//         for(var i=0;i<that.uploadJSON.length;i++){
+//           // const isLatitude = num => isFinite(num) && Math.abs(num) <= 90;
+//           if(isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90){
+//             console.log(d.lat);
+            
+//           }else{
+//             // if(that.uploadJSON[i]){
+//               if(!(that.failedFiles.includes(d))){
+//                 that.failedFiles.push(d)
+//               }
+//               // that.uploadJSON.splice(i,1)
+//             // }
+//           }
+
+//           if(isFinite(d.long) && Math.abs(d.long) <= 180){
+//              console.log(d.long);
+//           }else{
+//             // if(that.uploadJSON[i]){
+//               if(!(that.failedFiles.includes(d))){
+//                 that.failedFiles.push(d)
+//               }
+//               // that.uploadJSON.splice(i,1)
+//             // }
+//           }
+//           // const isLatitude =that.uploadJSON[i].lat => isFinite(Number(that.uploadJSON[i].lat)) && Math.abs(Number(that.uploadJSON[i].lat)) <= 90;
+// // Longitude must a number between -180 and 180
+// // const isLongitude = that.uploadJSON[i].long => isFinite(that.uploadJSON[i].long) && Math.abs(that.uploadJSON[i].long) <= 180;
+//         }
+        console.log("Failed",that.failedFiles);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+      
+  
+
+     }
+
+
+  ngOnInit() {
+    let outerThis = this;
+    if(this.actionId == "edit"){
+      var temp  = this.poiObject.poiData.poi.location.coordinates;
+      this.poiLat = temp[1];
+      this.poiLong = temp[0];
+      var current_add = new google.maps.LatLng(this.poiLat, this.poiLong);
+      var mapOptions = {
+        zoom: 15,
+        center: current_add
+      };
+  
+      var map = new google.maps.Map(document.getElementById('poiEditMap'), mapOptions);
+      this.poiMap = map;
+    
+  
+      var icon1 = {
+        url: "./assets/image/ico_direccion.png", // url
+        scaledSize: new google.maps.Size(50, 50), // scaled size
+      
+    };
+      var marker = new google.maps.Marker({
+        position: current_add,
+        map: map,
+        draggable:true,
+        icon: icon1
+      });
+      google.maps.event.addListener(marker, 'dragend', function() 
+  {
+      console.log("Inside dragend");
+  
+      outerThis.poiLat = marker.getPosition().lat();
+      outerThis.poiLong = marker.getPosition().lng(); 
+  });
+    }  
+
+    if(this.actionId == "add"){
+      this.mapFunction();
+      
+      
+       this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+      
+    }
+    this.getUserDevices();
+     
+     
+  }
+
+  getUserDevices(){
+    this.Load = true;
+    this.contactService.getDevice(this.emailid.email,this.useridd).subscribe(
+      data => {
+        this.devicesss = data.devices;
+        console.log("deviceObj=>",this.devicesss);
+        for(var i = 0; i<data.devices.length ; i++){       
+            var dev = {
+              isTrue:false,
+              id:data.devices[i]._id,
+              deviceName: data.devices[i].Device_Name
+            }  
+
+          this.uncheckedArr.push(dev);  
+          this.poiDevices.push(dev);          
+        }   
+
+        if(this.actionId == "edit"){
+
+          var newArr = [];
+          for(var t = 0 ;t<this.untrackedDev.length;t++){
+            for(var n=0;n<this.uncheckedArr.length;n++){
+              if(this.untrackedDev[t]==this.uncheckedArr[n].id){
+               
+                // this.poiDevices[n].isTrue = true;  
+                // console.log("newArr=>",this.poiDevices);  
+                this.uncheckedArr.splice(n,1);
+             
+              }
+            }
+             }
+              var tarr =[];
+             for(var l = 0;l<this.uncheckedArr.length;l++){     
+               tarr.push(this.uncheckedArr[l].id);
+               this.tempArray = tarr;            
+             }
+            console.log("whats here =>",this.tempArray );
+           console.log("bigger deviceArr =>",this.poiDevices);
+        
+        this.Load = false;
+        this.selectedDevices = this.tempArray;
+        }
+      },err=>{
+        this.Load = false;
+        console.log(err);
+      });
+  }
+
+  change(obj: any,ind:any){ 
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  savepoi(){
+    // deviceArr
+    var outerthis = this;
+    console.log(this.poiLong,this.poiLat);
+    var locationObj = {
+      'type' : 'Point',
+      "coordinates": [this.poiLong,this.poiLat],
+      
+    }
+
+    var latlng = {lat: this.poiLat, lng: this.poiLong};
+    var geocoder = new google.maps.Geocoder;
+    geocoder.geocode({'location': latlng}, function(results, status) {
+      if (status === 'OK') {
+        if (results[0]) {
+        outerthis.addressString_edit = results[0].formatted_address;
+        } else {
+         console.log('No results found');
+         outerthis.addressString_edit = 'Not available';
+        }
+      } else {
+        outerthis.addressString_edit = 'Not available';
+        console.log('Geocoder failed due to: ' + status);
+      }  
+      var editPOIobj = {
+        "location": locationObj,
+        "poiid" : outerthis.POI_ID,
+        "address" : outerthis.addressString_edit,
+        "radius" : outerthis.poiRadius
+      }
+      debugger;
+      if(outerthis.poitype != undefined){
+        editPOIobj['poi_type'] = outerthis.poitype; 
+      }
+  
+      if(outerthis.notSelectedPOIArray.length != 0){
+        editPOIobj['deviceArr'] = outerthis.notSelectedPOIArray;
+      }else{
+        editPOIobj['deviceArr'] = [];
+      }
+      console.log(editPOIobj);
+      outerthis.Load = true;
+      outerthis.contactService.editPOIdetails(editPOIobj)
+            .subscribe(res=>{
+              outerthis.Load = false;
+                console.log(res);
+                outerthis.dialogRef.close("success");
+            },err=>{
+              outerthis.Load = false;
+              console.log(err);
+            })
+    });
+
+  }
+  cancel(){
+    this.dialogRef.close();
+  }
+
+  mapFunction(){
+    var that = this;
+    console.log("add");
+    if (navigator.geolocation) {
+      if(location.protocol != 'https:'){
+        
+        this.contactService.getlatLong().subscribe(res=>{
+          console.log(res);
+          var position = {
+            coords: { 
+              latitude: res.lat,
+              longitude: res.lon
+            }
+          };
+
+          that.addLat =  position.coords.latitude;
+          that.addlng = position.coords.longitude;
+
+          var curr_position = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          }  
+
+          var mapAdd = new google.maps.Map(document.getElementById('poiAddMap'), {
+            center: {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude
+            },
+            zoom: 18
+        });
+
+        this.AddMapObj = mapAdd;
+
+        
+          this.poiFunction(mapAdd,curr_position);
+        })
+      }
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        var curr_position = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        }  
+        // console.log(this.curr_position);
+        that.addLat =  position.coords.latitude;
+        that.addlng = position.coords.longitude;
+        var mapAdd = new google.maps.Map(document.getElementById('poiAddMap'),{
+          center: {lat:  curr_position.lat, lng: curr_position.lng},
+          zoom: 15
+        });
+        that.AddMapObj = mapAdd;
+        that.poiFunction(mapAdd,curr_position);
+
+
+ 
+      })  
+     }
+  }
+
+  poiFunction(mapAdd,curr_position){
+    var that = this;
+    var icon1 = {
+      url: "./assets/image/ico_direccion.png", // url
+      scaledSize: new google.maps.Size(50, 50), // scaled size
+    
+  };
+    var marker = new google.maps.Marker({
+      position: curr_position,
+      map: mapAdd,
+      draggable:true,
+      icon: icon1
+    });
+
+    google.maps.event.addListener(marker, 'dragend', function() 
+    {
+        console.log("Inside dragend");
+    
+         var la = marker.getPosition().lat();
+         var ln = marker.getPosition().lng(); 
+         that.addLat =la;
+         that.addlng = ln;
+
+         console.log(that.addLat,that.addlng);
+     
+    });
+
+
+    var input = document.getElementById('txtSource');
+            var searchBox = new google.maps.places.SearchBox(input);
+          
+            searchBox.addListener('places_changed', function() {
+              var places = searchBox.getPlaces();
+              if (places.length == 0) {
+                return;
+              }
+              console.log(places);
+    
+              var bounds = new google.maps.LatLngBounds();
+              places.forEach(function(place:any) {
+                console.log('place.formatted_address',place.formatted_address);
+                console.log(place.geometry.location);
+                that.addressString = place.formatted_address;
+                that.addLat =  place.geometry.location.lat();
+                that.addlng = place.geometry.location.lng();
+                console.log(that.addLat,that.addlng);
+
+
+                if (!place.geometry) {
+                  // console.log("Returned place contains no geometry");
+                  return;
+                }
+                var icon = {
+                  url: icon1,
+                  size: new google.maps.Size(50, 50),
+              
+                };
+
+    
+                if (place.geometry.viewport) {
+                  // Only geocodes have viewport.
+                  
+                  bounds.union(place.geometry.viewport);
+                } else {
+                  bounds.extend(place.geometry.location);
+                }
+                marker.setPosition(place.geometry.location);
+                marker.setVisible(true);
+              });
+              mapAdd.fitBounds(bounds);
+            });
+    
+  }
+
+
+  test(){
+
+    this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+  
+  }
+
+
+  addPOI(){
+    var that = this;
+    console.log(this.addLat,this.addlng);
+    console.log(this.addressString);
+    if(!this.addressString){
+      console.log(this.addLat,this.addlng);
+      var latlng = {lat: this.addLat, lng: this.addlng};
+      var geocoder = new google.maps.Geocoder;
+      geocoder.geocode({'location': latlng}, function(results, status) {
+        if (status === 'OK') {
+          if (results[0]) {
+          that.addressString = results[0].formatted_address;
+          } else {
+           console.log('No results found');
+           that.addressString = 'Not available';
+          }
+        } else {
+          that.addressString = 'Not available';
+          console.log('Geocoder failed due to: ' + status);
+        }
+        var locationObj = {
+          'type' : 'Point',
+          "coordinates": [that.addlng,that.addLat]
+        }
+         
+        var poiObj = {
+          poi:  [
+            {  
+              "location": locationObj,
+              "poiname" : that.POINAME,       
+              "status": "Active",
+              "user" : that.useridd,
+              "address" : that.addressString,
+              "radius" : that.poiRadius
+            }
+          ]
+        }
+
+        if(this.poitype != undefined){
+          poiObj.poi[0]['poi_type'] = this.poitype
+        }
+        that.savePOI(poiObj);
+
+      });
+    }else{
+      var locationObj = {
+        'type' : 'Point',
+        "coordinates": [this.addlng,this.addLat]
+      }
+       
+      var poiObj = {
+        poi:  [
+          {  
+            "location": locationObj,
+            "poiname" : this.POINAME,       
+            "status": "Active",
+            "user" : this.useridd,
+            "address" : this.addressString,
+            "radius" : this.poiRadius
+          }
+        ]
+      }
+
+      if(this.poitype != undefined){
+        poiObj.poi[0]['poi_type'] = this.poitype ; 
+      }
+      this.savePOI(poiObj)
+    }
+  }
+
+  savePOI(poiObj){
+    this.Load =true;
+    console.log(poiObj);
+    this.contactService.addOnePoi(poiObj)
+    .subscribe(res=>{
+      this.Load= false;
+      this.dialogRef.close("success");
+    },err=>{
+      this.Load= false;
+      swal(
+        'Server Error',
+        'Error occured while adding POI , Please try after sometime !!!',
+        'error'
+      )  
+    })
+  }
+
+  getpoi_type(type){
+    console.log('type',type);
+    this.poitype = type;
+  }
+}
+
+
diff --git a/src/app/poi-menu/poi-menu.component.html b/src/app/poi-menu/poi-menu.component.html
new file mode 100644
index 0000000..93497dd
--- /dev/null
+++ b/src/app/poi-menu/poi-menu.component.html
@@ -0,0 +1,48 @@
+<div class="card" style="height:540px">
+    <div class="card-header">
+        <h4>Add Multiple POI</h4>
+    </div>
+    <div class="card-body">
+        <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-sm-12" style="text-align: left;font-size: initial;">
+                <!-- <label >Choose an Excel File:</label>
+                                      <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
+                <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+                    <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;"
+                        class="file-upload btn btn-primary">Browse
+                        for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+                    </label>
+                    <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+                            class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+                            aria-controls="collapseZero" (click)="uploadExcel()">Upload</button> 
+                   
+                </div>
+            </div>
+        </div>
+        <div class="row" *ngIf="showErrorupload_1">
+            <div class=col-sm-12>
+                <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                    <thead>
+                        <tr>
+                            <th>{{'Client Name' | translate}}</th>
+                            <th>{{'Altitude' | translate}}</th>
+                            <th>{{'Longitude' | translate}}</th>
+                            <th>{{'Address' | translate}}</th>
+                            
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let failedDevices of uploadJSON">
+                            <td style="cursor:pointer">{{failedDevices['Client Name']}}</td>
+                            <td style="cursor:pointer">{{failedDevices.Altitude}}</td>
+                            <td style="cursor:pointer">{{failedDevices.Longitude}}</td>
+                            <td style="cursor:pointer">{{failedDevices.Address}}</td>
+                            
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/poi-menu/poi-menu.component.scss b/src/app/poi-menu/poi-menu.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/poi-menu/poi-menu.component.spec.ts b/src/app/poi-menu/poi-menu.component.spec.ts
new file mode 100644
index 0000000..5374407
--- /dev/null
+++ b/src/app/poi-menu/poi-menu.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PoiMenuComponent } from './poi-menu.component';
+
+describe('PoiMenuComponent', () => {
+  let component: PoiMenuComponent;
+  let fixture: ComponentFixture<PoiMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoiMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoiMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poi-menu/poi-menu.component.ts b/src/app/poi-menu/poi-menu.component.ts
new file mode 100644
index 0000000..038724a
--- /dev/null
+++ b/src/app/poi-menu/poi-menu.component.ts
@@ -0,0 +1,153 @@
+
+import { Component, OnInit } from '@angular/core';
+import { Params, Router, ActivatedRoute } from '@angular/router'
+import { ContactService } from '../contact.service';
+
+import { MdDialog, MdDialogRef } from '@angular/material';
+declare var XLSX:any;
+
+
+declare var google: any;
+@Component({
+  selector: 'app-poi-menu',
+  templateUrl: './poi-menu.component.html',
+  styleUrls: ['./poi-menu.component.scss']
+})
+export class PoiMenuComponent implements OnInit {
+uploadJSON: any;
+  tollList;
+  failedFiles=[]
+  failedUploadFiles:any;
+  showErrorupload: boolean;
+  faileduploadDevices: any;
+  showErrorupload_1: boolean =false;
+  useridd: any;
+  constructor(private router: Router, private route: ActivatedRoute,public dialogRef: MdDialogRef<PoiMenuComponent>, private contactService: ContactService,public dialog: MdDialog) {
+
+  }
+
+  ngOnInit() {
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     let that = this;
+     $("#excelFile").change(function(e){
+      let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true},{skipHeader:true});
+         
+       that.uploadJSON=d.map(function(d){  
+         console.log(d);
+         if(!d.Altitude){
+          return false;
+         }
+          if(!d.Longitude){
+          return false;
+         }
+          if(!d.Address){
+          return false;
+         }
+          if(!d['Client Name']){
+          return false;
+         }
+          var lat = d.Altitude.split(/[^\d\w\.]+/);
+          var long = d.Longitude.split(/[^\d\w\.]+/);
+          console.log(lat,'LONG=',long);
+          if(lat[0]&&lat[1]&&lat[2]&&lat[3]){
+            d.location=[long[0],lat[0]]
+            d.latitude=that.ConvertDMSToDD(lat[0],lat[1],lat[2],lat[3])
+          }else{
+            d.latitude=long[0]
+
+          }
+           if(long[0]&&long[1]&&long[2]&&long[3]){
+            // d.location=[long[0],lat[0]]
+            d.longitude=that.ConvertDMSToDD(long[0],long[1],long[2],long[3])
+          }else{
+            d.longitude=lat[0]
+
+          }
+          
+        //  if((isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90)&&(isFinite(d.long) && Math.abs(d.long) <= 180)){
+        //     console.log(d.lat);
+            return d;
+          // }else{
+          //   if(!(that.failedFiles.includes(d))){
+          //       that.failedFiles.push(d)
+          //     }
+          // }
+          
+        });
+        console.log("file=>",that.uploadJSON);
+
+
+        console.log("Failed",that.failedFiles);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+
+  }
+  uploadExcel(){
+    var arr=[]
+    for(var i=0;i<this.uploadJSON.length;i++){
+      if(this.uploadJSON[i]){
+        arr.push({
+          location:{type:"Point",
+          coordinates:[Number(this.uploadJSON[i].longitude),Number(this.uploadJSON[i].latitude)]},
+        poiname:this.uploadJSON[i]['Client Name'],
+        poi_type:'Hospital',
+        address:this.uploadJSON[i].Address,
+        radius:60,
+        user:this.useridd,
+        })
+
+      }
+    }
+    console.log(arr);
+    
+    this.contactService.post('/poi/addMultiple',{data:arr}).subscribe((res:any)=>{
+      console.log(res);
+       this.dialogRef.close("success"); 
+    })
+  }
+
+  
+ParseDMS(input) {
+    var parts = input.split(/[^\d\w\.]+/);    
+    var lat = this.ConvertDMSToDD(parts[0], parts[2], parts[3], parts[4]);
+    var lng = this.ConvertDMSToDD(parts[5], parts[7], parts[8], parts[9]);
+
+    return {
+        Latitude : lat,
+        Longitude: lng,
+        Position : lat + ',' + lng
+    }
+}
+ConvertDMSToDD(degrees, minutes, seconds, direction) {  
+  console.log(degrees, minutes, seconds, direction);
+   
+    var dd = Number(degrees) + Number(minutes)/60 + Number(seconds)/(60*60);
+
+    if (direction == "S" || direction == "W") {
+        dd = dd * -1;
+    } // Don't do anything for N or E
+    return dd;
+}
+
+}
\ No newline at end of file
diff --git a/src/app/poidetails/poidetails.component.html b/src/app/poidetails/poidetails.component.html
new file mode 100644
index 0000000..3d9025a
--- /dev/null
+++ b/src/app/poidetails/poidetails.component.html
@@ -0,0 +1,210 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <div class="upper">
+          <md-toolbar>My App</md-toolbar>
+        <md-toolbar flex style="background-color:white;width: 100%;" >
+          
+                <img src={{this.logo}}
+                style=
+                "width:12%;padding-top:20px;">
+              <ul style="
+              padding: 30px 0% 0px 16%;
+              box-sizing: border-box;
+              flex-direction: row;
+              display: flex;
+              height: 65px;width:auto"  fxLayout="row" >
+              <li clas="test_1" [mdMenuTriggerFor]="adminMenu" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                <a class="pointer">
+                    <span id="d">
+                      <md-icon style="display: block;position: absolute;margin-left: 5px;">account_circle</md-icon>Admin</span>
+                  </a>
+                </li> 
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                  <a  class="pointer" (click)="soon()"><span id="ac"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 18px;">dashboard</md-icon><span >DASHBOARD</span></span></a>
+                </li>
+                <li style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                  <a class="pointer" (click)="group()">
+                      <span >
+                        <md-icon style="display: block;position: absolute;margin-left: 10px;">group</md-icon>GROUPS</span>
+                    </a>
+                  </li>
+                <li style="line-height: 65px;width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="devi()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 8px;">devices</md-icon>VEHICLES</span></a> 
+                </li>
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="openNav()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 13px;">my_location</md-icon>TRACKER</span></a>
+                </li>
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" (click)="geo()" ><span id="d"><md-icon style="display: block;
+                  position: absolute;
+                  margin-left: 22px;">blur_circular</md-icon>GEO FENCING</span></a>
+                </li>
+
+                <li style="line-height: 65px;
+                width:auto;margin-left: 7px;">
+                <a class="pointer" [mdMenuTriggerFor]="appMenu3"  ><span id="d"><md-icon style="display: block;position: absolute;
+                  margin-left: 13px;">report</md-icon>REPORTS</span></a>
+                </li>
+                <li [mdMenuTriggerFor]="routeMenu" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                  <a class="pointer">
+                      <span id="d">
+                        <md-icon style="display: block;position: absolute;margin-left: 10px;">swap_calls</md-icon>ROUTES</span>
+                    </a>
+                  </li>
+                  <li style="line-height: 65px;width:auto;margin-left: 7px;">
+                    <a class="pointer" (click)="notification()"><span id="d"><md-icon style="display: block;position: absolute;
+                      margin-left: 25px;">notifications</md-icon>NOTIFICATIONS</span></a>
+                    </li>
+                  <li  *ngIf="superAdmin" style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                    <a class="pointer" (click)="dealerInfo()">
+                        <span id="d">
+                          <md-icon style="display: block;position: absolute;margin-left: 10px;">supervisor_account</md-icon>DEALERS</span>
+                      </a>
+                    </li>
+                <md-menu class="test" #appMenu3="mdMenu" [y-position]="before">              
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report()" >&nbsp;&nbsp;<span id="ac"><span id="active">Daily Report</span></span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="report_speed()" >&nbsp;&nbsp;<span id="d">Speed Variation</span></a>
+                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ideal()" >&nbsp;&nbsp;<span id="d">Idle</span></a> -->
+                  <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ign()" >&nbsp;&nbsp;<span id="d">Ignition</span></a> -->
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="trip_report()" >&nbsp;&nbsp;<span id="d">Trip Report</span></a> 
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="summaryReport()" >&nbsp;&nbsp;<span id="d">Summary Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="geofancingReport()" >&nbsp;&nbsp;<span id="d">Geofencing Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="overspeed()" >&nbsp;&nbsp;<span id="d">Overspeeding Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;"   class="pointer" (click)="routeViolation()" >&nbsp;&nbsp;<span id="d">Route Violation Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="stoppage_report()" >&nbsp;&nbsp;<span id="d">Stoppage Report</span></a> 
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="ignition_report()" >&nbsp;&nbsp;<span id="d">Ignition Report</span></a>   
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="distance_report()" >&nbsp;&nbsp;<span id="d">Distance Report</span></a>
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="driverPerformance()" >&nbsp;&nbsp;<span id="d">Driver's performance</span></a>  
+                  <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="alert_report()" >&nbsp;&nbsp;<span id="d">Alert Report</span></a>      
+                  </md-menu>
+                  <md-menu class="test_1" #adminMenu="mdMenu" [y-position]="before">              
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="Ddetail()" >&nbsp;&nbsp;<span id="ac"><span id="active">DRIVER MASTER</span></span></a>
+
+                    <!-- <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer">&nbsp;&nbsp;<span id="d">DRIVER MODEL MASTER</span></a> -->
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="DModel()" *ngIf="superAdmin">&nbsp;&nbsp;<span id="d">DEVICE MODEL</span></a>
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="VType()" *ngIf="superAdmin">&nbsp;&nbsp;<span id="d">VEHICLE TYPE</span></a>
+                  </md-menu>
+                  <md-menu class="test_1" #routeMenu="mdMenu" [y-position]="before">              
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="vehicleRoute()" >&nbsp;&nbsp;<span id="ac"><span id="active">ROUTE LIST</span></span></a>
+                    <a style="display: block;padding: 9px 10px;margin: 0; border-bottom: 1px solid #999;" class="pointer" (click)="route_map()" >&nbsp;&nbsp;<span id="d">ROUTE MAPPING</span></a>
+                    </md-menu>
+                <li style="line-height:65px;width:auto;margin-left:7px;">
+                <a class="pointer" *ngIf="cust" (click)="addcus()" ><span id="d"><md-icon style="display: block;position: absolute;margin-left: 14px;">person_add</md-icon>CUSTOMERS</span></a>
+                </li>
+                           </ul>
+                
+                           <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> 
+                     
+                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                  <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                  <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                  <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                  &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>&nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                     <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                </md-menu>
+                                
+                                <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                         
+                                   <img src="../../assets/image/us.jpg" height=24px>
+                                </button>
+                         </ul>
+                               
+                        
+                     
+                             <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                     
+                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                   <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                   <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                   <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                   &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default"  (click)="myaccount()" >My Account</button>       &nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;    
+                                      <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                 </md-menu>
+                                 
+                                 <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                
+                                    <img src="../../assets/image/us.jpg" height=24px>
+                                 </button>
+                                 <app-notification></app-notification>
+                             
+                           </ul>
+                                 
+              
+             </md-toolbar>
+        </div>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+  <div class="route">
+    <h2>Routes</h2>
+    <div class="row">
+      <div class="col-sm-4 col-md-4" style="padding-top: 2%;float:let;">
+          <button style="background: white;border: 0px;" color="blue" (click)="addRoute()">
+              <md-icon style="color:black">add</md-icon>          
+          </button>
+      </div>
+      <div class="col-sm-2 col-md-2" style="padding-top:22px;">          
+        <div style="float: right;padding-right: 1%;">
+          <input  style="border-radius: 6px;
+          border: 1px solid #c7c7c7;
+          padding: 12px;
+          width: 175px;
+          height: 7px;
+          background-color: red;
+          font-size: 12px;
+          background: #fffcfc;" type="search" id="myInput2" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Routes Search"/>
+        </div> 
+      </div>
+    </div>
+    </div>
+    <table class="table table-striped table-hover" id="myTable" style="overflow-y: hidden;
+    overflow-x: hidden;font-size:12px">
+<thead style="background-color:#A2C523;color: white;">
+   <th>Route name</th>
+   <th style="text-align: center">Source</th>
+   <th style="text-align: center">Destination</th>
+   <th>Route Status</th>
+</thead>
+<tbody>
+ <tr>
+   <td style="cursor:pointer">"Test name"</td>
+   <td style="cursor:pointer" >"Test Source"</td>
+   <td style="cursor:pointer" >"Test destination"</td>
+ </tr>
+</tbody>
+</table>
+    
+  </body>
+  </html>
+
diff --git a/src/app/poidetails/poidetails.component.scss b/src/app/poidetails/poidetails.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/poidetails/poidetails.component.spec.ts b/src/app/poidetails/poidetails.component.spec.ts
new file mode 100644
index 0000000..5d83d5d
--- /dev/null
+++ b/src/app/poidetails/poidetails.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { POIdetailsComponent } from './poidetails.component';
+
+describe('POIdetailsComponent', () => {
+  let component: POIdetailsComponent;
+  let fixture: ComponentFixture<POIdetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ POIdetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(POIdetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poidetails/poidetails.component.ts b/src/app/poidetails/poidetails.component.ts
new file mode 100644
index 0000000..9adb130
--- /dev/null
+++ b/src/app/poidetails/poidetails.component.ts
@@ -0,0 +1,269 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ContactService } from '../contact.service';
+import { DatainjectionService } from '../datainjection.service';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { NotificationComponent } from '../notification/notification.component';
+
+@Component({
+  selector: 'app-poidetails',
+  templateUrl: './poidetails.component.html',
+  styleUrls: ['./poidetails.component.scss']
+})
+export class POIdetailsComponent implements OnInit {
+  superAdmin: Boolean = false;
+  fs: any;
+  ls: any;
+  cond: Boolean = false;
+  point: any = 0;
+  loading: any; loadingName: any;
+  unloading: any; unloadingName: any;
+  not_on_root: any; norName: any;
+  address_show: string;
+  deviceData: any;
+  baba: any[];
+  arrival_time: Date;
+  Durations: string;
+  status_toShow: string;
+  lattitude: any;
+  longitude: any;
+  filtes: any;
+  total_final: any;
+  vehicleDetail: any;
+  add_dev: boolean;
+  textStatus: string;
+  logo: any;
+  text: any;
+  emailid: any;
+  or: any;
+  mb: any;
+  useridd: any;
+  custtype: any;
+  cust: Boolean = false;
+  logoutbut: boolean;
+  dealer: boolean;
+  before:any;
+  myInput:any;
+
+  constructor(public dialog: MdDialog, private router: Router, private contactService: ContactService, private injectData: DatainjectionService, private activatedRoute: ActivatedRoute, private val: SidebarComponent, private inject: DatainjectionService, private notify: NotificationComponent) { }
+
+  ngOnInit() {
+       // this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+       var alpha = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+       this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+       this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+       this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+       this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+       this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+       this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+       this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+       this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+       if (this.custtype == true) {
+        this.cust = true;
+      }
+      if (this.mb.charAt(0) == "n") {
+        this.mb = ' '
+      }
+  
+      if (window.localStorage['Custumer'] == 'ON') {
+        this.logoutbut = false
+        this.dealer = true
+      }
+      else {
+        this.logoutbut = true
+      }
+  
+      this.logo = window.localStorage['logo'];
+      this.text = window.localStorage['text'];
+  
+     
+  
+  }
+
+  myaccount() {
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+
+  }
+
+
+  table1ch(){
+    
+    myFunction();
+        function myFunction() {
+          var input1, filter1, table, tr, td, i,td1;
+          input1 = document.getElementById("myInput1");     
+          filter1 = input1.value.toUpperCase();
+          // console.log(filter1);
+          table = document.getElementById("myTable1");
+          tr = table.getElementsByTagName("tr");
+          for (i = 0; i < tr.length; i++) {
+            td = tr[i].getElementsByTagName("td")[1];
+            td1= tr[i].getElementsByTagName("td")[0];       
+            if (td) {
+              if (td.innerHTML.toUpperCase().indexOf(filter1) > -1) {
+                tr[i].style.display = "";               
+              } 
+              else if(td1.innerHTML.toUpperCase().indexOf(filter1) > -1){
+                tr[i].style.display = "";
+              
+              }
+              else {
+                tr[i].style.display = "none";
+              }
+            }       
+          }
+        }
+      }
+
+
+      report(){
+        this.cond = false
+        this.router.navigateByUrl("device-report");
+      
+      }
+      routeViolation(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/routeViolation");
+      
+      }
+      report_speed(){
+        // console.log("report speed call")
+        this.cond = false
+        this.router.navigateByUrl("device-report/device-speed-report");
+      }
+      
+      vehicleRoute(){
+        this.cond = false
+        this.router.navigateByUrl("vehicleRoute");
+      }
+
+      mydealer(){
+        window.localStorage['token'] =  window.localStorage['Dealer_token'];
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        if(window.localStorage['DataLoaded'] = 'True'){
+          window.localStorage['Custumer'] = 'OFF'
+          this.router.navigateByUrl("add")
+         // this.router.navigateByUrl("const?_status="+"OK");
+        }
+      }
+
+      driverPerformance(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/Driver-performance");
+      }
+
+      Ddetail(){
+        this.router.navigateByUrl("driverdetail");
+      }
+      DModel(){
+        this.router.navigateByUrl("deviceModel");
+      }
+      VType(){
+        this.router.navigateByUrl("VehicleType");
+      }
+      
+      alert_report(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/alert-report");
+      
+      }
+
+      logout(){
+        window.localStorage.clear();
+        this.router.navigateByUrl("login");
+      }
+
+      devi(){
+        this.router.navigateByUrl("dashboard");
+      
+      }
+
+      openNav() {
+        /*  document.getElementById("myNav").style.width = "100%";
+      */
+         this.router.navigateByUrl("location");
+      
+      }
+
+      soon(){
+        this.router.navigateByUrl("const?_i="+window.localStorage.token);
+        
+       }
+
+
+       geo(){
+        this.router.navigateByUrl("geofencing");
+        
+        }
+      group(){
+        this.cond = false
+        this.router.navigateByUrl("group_view");
+      }
+      
+      summaryReport(){
+     
+        this.cond = false
+        this.router.navigateByUrl("device-report/summary-report");
+      }
+      
+      overspeed(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/overspeed");
+      
+      }
+      
+      notification(){
+        this.cond = false
+        this.router.navigateByUrl("notifications");
+      }
+      
+      stoppage_report(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/stoppage_report");
+      
+      }
+      ignition_report(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/ignition_report");
+      }
+      
+      dealerInfo(){
+        this.cond = false
+        this.router.navigateByUrl("dealerInfo");
+      }
+      
+      geofancingReport(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/geofancing");
+      }
+      
+      route_map(){
+        this.router.navigateByUrl("routeMapping");
+      
+      }
+      
+      distance_report(){
+      this.cond = false
+      this.router.navigateByUrl("device-report/distance_report");
+      }
+      
+      trip_report(){
+        this.cond = false
+        this.router.navigateByUrl("device-report/trip_report");
+      
+      }
+      addcus(){
+        localStorage.removeItem('mapLoad_ID')
+        this.router.navigateByUrl("add");
+      }
+      
+      addRoute(){
+        this.cond = false
+        this.router.navigateByUrl("vehicleRoute/setRoute");
+      }
+
+}
diff --git a/src/app/point-of-intrest/point-of-intrest.component.html b/src/app/point-of-intrest/point-of-intrest.component.html
new file mode 100644
index 0000000..2b32890
--- /dev/null
+++ b/src/app/point-of-intrest/point-of-intrest.component.html
@@ -0,0 +1,104 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+<app-all-menus></app-all-menus>
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>    
+      <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a>          
+  </md-menu> 
+</div>
+<div id="toast"><div id="desc">{{data_descip}}</div></div> 
+
+<div class="trip_position">
+
+  <div class="iconStyle_div">
+
+    <md-icon class="backbutton" (click)="goback()"  mdTooltip="Back">keyboard_arrow_left</md-icon>
+    <md-icon class="ffw" (click)="fast('fast')"   mdTooltip="Fast">fast_forward</md-icon>
+    <md-icon *ngIf="flag=='init'"  class="play" (click)="play()" >play_arrow</md-icon>
+    <md-icon *ngIf="flag=='start'"  class="play" (click)="play()"  mdTooltip="Play trip history">play_arrow</md-icon>
+    <md-icon *ngIf="flag=='stop'"  class="play" (click)="play()"  mdTooltip="Pause">pause_circle_outline</md-icon>
+    <md-icon *ngIf="flag=='reset'"  class="play" (click)="play()"  mdTooltip="Reset history">cached</md-icon>
+    <md-icon class="reverse"  (click)="fast('slow')" mdTooltip="Slow">fast_rewind</md-icon>
+    <span>{{errormsg}}</span>
+    <span *ngIf="showStatus" style="margin-left: 25%;">SPEED : {{speedmeterVal}}</span> 
+    <span *ngIf="showStatus" style="margin-left:5%">TIME : {{insertionTime | date:'medium'}}</span>
+  </div> 
+  <div id="showMap" style="padding: 0px;width: 100%;display: flex;height: 76vh;"></div>
+  <div  class="meterposition">
+      <canvas style="position:absolute;top:25%"  data-type="radial-gauge"
+    data-width="140px"
+     data-height="138px"
+     data-units="Speed"
+     data-units="KMPH"
+     data-min-value="0"
+     data-max-value="220"
+     data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
+     data-minor-ticks="2"
+     data-stroke-ticks="true"
+     data-highlights='[
+                { "from": 0, "to": 50, "color": "#6fff72" },
+                { "from": 50, "to": 100, "color": "yellow" },
+                { "from": 100, "to": 150, "color": "#fb3232" },
+                { "from": 150, "to": 200, "color": "red" },
+                { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
+            ]'
+     data-ticks-angle="225"
+     data-start-angle="67.5"
+     data-color-major-ticks="black"
+     data-color-minor-ticks="black"
+     data-color-title="black"
+     data-color-units="black"
+     data-color-numbers="black"
+     data-color-plate="#f9f9f9"
+     data-border-shadow-width="0"
+     data-borders="true"
+     data-needle-type="arrow"
+     data-needle-width="1"
+     data-needle-circle-size="7"
+     data-needle-circle-outer="true"
+     data-needle-circle-inner="false"
+     data-animation-duration="1500"
+     data-animation-rule="linear"
+     data-color-border-outer="#ddd"
+     data-color-border-outer-end="#ddd"
+     data-color-border-middle="#ddd"
+     data-color-border-middle-end="#ddd"
+     data-color-border-inner="#ddd"
+     data-color-border-inner-end="#ddd"
+     data-color-needle-shadow-down="#333"
+     data-color-needle-circle-outer="#333"
+     data-color-needle-circle-outer-end="#111"
+     data-color-needle-circle-inner="#111"
+     data-color-needle-circle-inner-end="#222"
+     data-value-box-border-radius="0"
+     data-color-value-box-rect="white"
+     data-color-value-box-rect-end="white"
+     data-font-value="Led"
+     data-font-numbers="Led"
+     data-font-title="Led"
+     data-font-units="Led"
+    data-value="0"
+    [attr.data-value]=speedmeterVal></canvas>
+    
+
+  <!-- <button style=" width: 171px;height: 43px;letter-spacing: 5px;background-color: #0b0665;border: white;margin-right:10px;" class="btn btn-primary btn-block/" (click)="addPOI()">SAVE</button> -->
+</div>
+
+
+</div>
+<!-- <div id="showMap" style="padding: 0px;width: 100%;display: flex;height: 76vh;"></div> -->
+</body>
+</html>
+
diff --git a/src/app/point-of-intrest/point-of-intrest.component.scss b/src/app/point-of-intrest/point-of-intrest.component.scss
new file mode 100644
index 0000000..6b16114
--- /dev/null
+++ b/src/app/point-of-intrest/point-of-intrest.component.scss
@@ -0,0 +1,1073 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+  }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+
+
+.trip_position{
+  position: relative;
+
+
+  padding-top: 16px;
+
+  .iconStyle_div{
+
+    background-color:blue;
+    padding-top: 7px;
+    color: #fff;
+    .mat-icon{
+      
+  font-size: 37px;
+  height: auto !important;
+  width: auto !important;
+  cursor: pointer;
+}
+
+   
+
+    .ffw{
+      float: right;
+      font-size: 27px;
+      padding: 6px 14px 6px 3px;
+    }
+
+    .play{
+      float: right;
+      padding-top: 2px;
+    }
+
+    .reverse{
+      float: right;
+      font-size: 27px;
+      padding: 6px;
+    }
+
+    // .meterposition{
+    //   position: absolute;
+    //   top: 118px;
+    // }
+
+  }
+}
diff --git a/src/app/point-of-intrest/point-of-intrest.component.spec.ts b/src/app/point-of-intrest/point-of-intrest.component.spec.ts
new file mode 100644
index 0000000..35f4a0d
--- /dev/null
+++ b/src/app/point-of-intrest/point-of-intrest.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointOfIntrestComponent } from './point-of-intrest.component';
+
+describe('PointOfIntrestComponent', () => {
+  let component: PointOfIntrestComponent;
+  let fixture: ComponentFixture<PointOfIntrestComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PointOfIntrestComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointOfIntrestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/point-of-intrest/point-of-intrest.component.ts b/src/app/point-of-intrest/point-of-intrest.component.ts
new file mode 100644
index 0000000..a7c6797
--- /dev/null
+++ b/src/app/point-of-intrest/point-of-intrest.component.ts
@@ -0,0 +1,875 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { PoiListComponent } from '../poi-list/poi-list.component';
+
+
+declare var google: any;
+
+@Component({
+  selector: 'app-point-of-intrest',
+  templateUrl: './point-of-intrest.component.html',
+  styleUrls: ['./point-of-intrest.component.scss']
+})
+export class PointOfIntrestComponent implements OnInit {
+  POIPayload: any;
+  PoI_id: any;
+  grpName: any;
+  before: any;
+  logoutbut: boolean;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  fs: any; ls: any; emailid: any; or: any; useridd: any; mb: any; custtype: any; dealer: any;
+  showImage: any;
+  groups = [];
+  group_info: any;
+  myInput: any;
+  deviceId: any;
+  device_update: any;
+  superAdmin: Boolean = false;
+  route_detail_show = [];
+  route: any;
+  route_1: any;
+  Fromdate: any;
+  todate: any;
+  routeRadius: any;
+  driverName: any;
+  Load: any;
+  data_descip: any;
+  showMeter:boolean=true;
+  POI_marker = [];
+  marker_poi: any;
+  test: any;
+  pathObj: any;
+  divehistory: any;
+  errormsg: any;
+  current_add: any;
+  globalComponentMap: any;
+  mapOptions: any;
+  latlongObjArr: any;
+  latLngLine: any = [];
+  coordreplaydata: any = [];
+  _goToPoint:any;
+  _moveMarker:any;
+  delay: any=100;
+  start: any;
+  flag: any='init';
+
+   car = 'M17.402,0H5.643C2.526,0,0,3.467,0,6.584v34.804c0,3.116,2.526,5.644,5.643,5.644h11.759c3.116,0,5.644-2.527,5.644-5.644 V6.584C23.044,3.467,20.518,0,17.402,0z M22.057,14.188v11.665l-2.729,0.351v-4.806L22.057,14.188z M20.625,10.773 c-1.016,3.9-2.219,8.51-2.219,8.51H4.638l-2.222-8.51C2.417,10.773,11.3,7.755,20.625,10.773z M3.748,21.713v4.492l-2.73-0.349 V14.502L3.748,21.713z M1.018,37.938V27.579l2.73,0.343v8.196L1.018,37.938z M2.575,40.882l2.218-3.336h13.771l2.219,3.336H2.575z M19.328,35.805v-7.872l2.729-0.355v10.048L19.328,35.805z';
+   carIcon = {
+    path: this.car ,
+    scale: .6,
+    strokeColor: 'white',
+    strokeWeight: .10,
+    fillOpacity: 1,
+    fillColor: 'blue',
+    //fillColor: '#b75656',
+    offset: '5%',
+    // rotation: parseInt(heading[i]),
+    anchor: new google.maps.Point(10, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+    rotation: 0
+  };
+
+       icons = {
+    "car": this.carIcon
+  }
+  speedmeterVal: any;
+  newMarker: any;
+  activateNewMarker: any;
+  insertionTime: any;
+
+  constructor(private router: Router, private contactService: ContactService, public dialog: MdDialog) { }
+
+  ngOnInit() {
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    window.localStorage['DataUpdate'] = 'Tthis.rue'
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+
+    this.divehistory = JSON.parse(localStorage.getItem('poiData'));
+    // console.log("deviceHistory=>",this.divehistory);
+    this.getDeviceHistory();
+
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // console.log('testing', this.useridd);
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+  
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true;
+    }
+
+    this.current_add = new google.maps.LatLng(18.633995, 73.808454);
+
+    this.mapOptions = {
+      zoom: 16,
+      center: this.current_add
+    };
+
+    this.globalComponentMap = new google.maps.Map(document.getElementById('showMap'), this.mapOptions);
+    // alert(this.POIPayload);
+    // this.routeDetails(this.useridd);
+    // console.log(this.POIPayload.payload.poi.length);
+    //this.showRoute(this.POIPayload);
+    this.getPOI();
+
+    // console.log(this.POI_marker);
+  }
+
+
+
+  mydealer() {
+    // console.log('Dealer')
+  }
+
+  myaccount() {
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  }
+
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+
+  openNav() {
+    /* document.getElementById("myNav").style.width = "100%";
+    */
+    this.router.navigateByUrl("location");
+
+  }
+
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    this.router.navigateByUrl("dashboard");
+
+  }
+  soon() {
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  }
+  new() {
+    this.router.navigateByUrl("new");
+
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+
+
+  report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+  }
+  report_speed() {
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+
+  vehicleRoute() {
+    this.cond = false
+    this.router.navigateByUrl("vehicleRoute");
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert-report");
+
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+
+
+  addRoute() {
+    this.cond = false
+    this.router.navigateByUrl("setRoute");
+  }
+
+  saveRoute() {
+    this.cond = false
+    this.router.navigateByUrl('vehicleRoute');
+  }
+
+
+  addcus() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("add");
+  }
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  route_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+
+
+  goback() {
+    this.router.navigateByUrl("routeMapping");
+  }
+
+
+  addRouteMap() {
+    this.cond = false
+    this.router.navigateByUrl("addRouteMap");
+
+  }
+  routePath: any = [];
+  // routeDetails(uId){
+  // debugger;
+  // console.log("routeDetails",uId);
+  // this.contactService.getRouteDetail(uId)
+  // .subscribe(res=>{
+  // console.log("routedet",res)
+  // this.route_detail_show=res;
+
+  // console.log(this.route_detail_show);
+  // this.showRoute();
+  // })
+
+  // }
+  poiPoint_address: any;
+  dataArrayCoords = [];
+  mapData = [];
+  marker: any;
+  marker1: any;
+  locationEndAddress = []
+  PointInterestName = []
+  MarkerPointInterest = []
+  map: any;
+  marker3: any;
+  rtePath: any = [];
+  markerpoi: any;
+
+
+
+  poiMarkers = []
+  showRoute(rtePath) {
+    // console.log("data coming from routemapping", rtePath);
+    var outerThis = this;
+    // console.log("Inside function!!!");
+    this.dataArrayCoords = [];
+
+    if (rtePath.routePath) {
+      for (var i = 0; i < rtePath.routePath.length; i++) {
+        var arr = [];
+        // console.log(rtePath.routePath[i].location.coordinates[1]);
+        arr.push(rtePath.routePath[i].location.coordinates[1]);
+        arr.push(rtePath.routePath[i].location.coordinates[0]);
+
+        this.dataArrayCoords.push(arr);
+      }
+    }
+    // console.log(this.dataArrayCoords);
+    this.mapData = [];
+    if (rtePath.routePath) {
+      for (var i = 0; i < rtePath.routePath.length; i++) {
+
+
+        this.mapData.push({
+          "lat": rtePath.routePath[i].location.coordinates[1],
+          "lng": rtePath.routePath[i].location.coordinates[0]
+        });
+      }
+    }
+    // console.log(this.mapData);
+
+
+    // variable for rendering current position
+    var current_add = new google.maps.LatLng(this.mapData[0], this.mapData[this.mapData.length - 1]);
+    this.mapOptions = {
+      zoom: 16,
+      center: current_add
+    };
+
+    // var renderer = new google.maps.DirectionsRenderer({
+    // suppressPolylines: true
+    // });
+
+
+
+    this.globalComponentMap = new google.maps.Map(document.getElementById('showMap'), this.mapOptions);
+
+    this.marker4 = new google.maps.Marker({
+      position: {lat:this.latLngLine[0].lat,lng:this.latLngLine[0].lng},
+      map: this.globalComponentMap,
+      //icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
+      icon: this.icons.car
+  });
+  
+  var flightPath = new google.maps.Polyline({
+    path: this.latLngLine,
+    geodesic: true,
+    strokeColor: '#FF0000',
+    strokeOpacity: 1.0,
+    strokeWeight: 2
+  });
+  
+  flightPath.setMap(this.globalComponentMap);
+      // console.log(this.flag);
+
+
+    // this.globalComponentMap = new google.maps.Map(document.getElementById('showMap'), mapOptions);
+
+    // console.log(this.routePath.destination);
+
+    var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/S/009900/ ");
+    this.marker = new google.maps.Marker({
+      position: this.mapData[0],
+      map: this.globalComponentMap,
+      icon: pinImage
+    });
+
+    var pinImage1 = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/D/FF0000/ ");
+    this.marker1 = new google.maps.Marker({
+      position: this.mapData[this.mapData.length - 1],
+      map: this.globalComponentMap,
+      icon: pinImage1
+    });
+
+    // console.log()
+    if (rtePath.poi) {
+      for (var i = 0; i < rtePath.poi.length; i++) {
+        this.test = rtePath.poi[i];
+        var poiMarker_object = {
+          "lat": rtePath.poi[i].poi.location.coordinates[1],
+          "lng": rtePath.poi[i].poi.location.coordinates[0]
+        }
+
+        var pinImagePOI = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/ ");
+        this.markerpoi = new google.maps.Marker({
+          position: poiMarker_object,
+          map: this.globalComponentMap,
+          icon: pinImagePOI
+        });
+        // console.log(rtePath.poi[i]);
+
+        var infowindow = new google.maps.InfoWindow();
+        google.maps.event.addListener(this.markerpoi, 'click', (function (markerpoi, i) {
+          // console.log(i);
+          return function () {
+
+
+            infowindow.setContent(outerThis.test.poiname);
+            infowindow.open(this.map, outerThis.markerpoi);
+          }
+        })(this.markerpoi));
+
+      }
+    }
+
+    // infiwindows starts here 
+
+
+    var infowindow = new google.maps.InfoWindow();
+    google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
+      return function () {
+        // console.log(rtePath.source);
+        infowindow.setContent(rtePath.source);
+        infowindow.open(this.map, outerThis.marker);
+      }
+    })(this.marker));
+    var infowindow = new google.maps.InfoWindow();
+    google.maps.event.addListener(this.marker1, 'click', (function (marker1, i) {
+      return function () {
+        // console.log(rtePath.destination)
+        infowindow.setContent(rtePath.destination);
+        infowindow.open(this.map, outerThis.marker1);
+      }
+    })
+      (this.marker1)
+    );
+
+    // console.log(this.mapData);
+    var flightPath = new google.maps.Polyline({
+      path: this.mapData,
+      geodesic: true,
+      strokeColor: '#1E90FF',
+      strokeOpacity: 1.0,
+      strokeWeight: 6
+    });
+
+    // console.log(this.mapData);
+    flightPath.setMap(this.globalComponentMap);
+    // console.log(flightPath);
+    flightPath.addListener('click', showArrays);
+
+    function showArrays(event) {
+      // Since this polygon has only one path, we can call getPath() to return the
+      // MVCArray of LatLngs.
+      /* var vertices = this.getPath();*/
+
+      var latStart = event.latLng.lat();
+      var lngStart = event.latLng.lng();
+
+      var lngStart1 = new google.maps.LatLng(latStart, lngStart);
+      var geocoder = new google.maps.Geocoder();
+      var request = {
+        latLng: lngStart1
+      };
+
+      geocoder.geocode({
+        'latLng': event.latLng
+      }, function (results, status) {
+        if (status == google.maps.GeocoderStatus.OK) {
+          if (results[0]) {
+            // console.log(results[0].formatted_address);
+            outerThis.locationEndAddress = results[0].formatted_address;
+            outerThis.PointInterestName.push(outerThis.locationEndAddress)
+            // console.log("waypointName", outerThis.PointInterestName)
+          }
+        }
+      });
+
+
+
+      var contentString = '<b>Point Of Interest</b><br>' +
+        'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>' + outerThis.locationEndAddress +
+        '<br>';
+
+      // console.log(event.latLng.lat(), event.latLng.lng());
+
+      outerThis.MarkerPointInterest.push([event.latLng.lat(), event.latLng.lng()]);
+      // console.log("markerPOI", outerThis.MarkerPointInterest);
+
+      // Replace the info window's content and position.
+      var infoWindow = new google.maps.InfoWindow();
+      infoWindow.setContent(contentString);
+      infoWindow.setPosition(event.latLng);
+      infoWindow.open(this.globalComponentMap);
+      placeMarker(event.latLng);
+
+      function placeMarker(location) {
+        outerThis.marker3 = new google.maps.Marker({
+          position: location,
+          map: this.globalComponentMap
+        });
+
+      }
+
+    }
+  }
+
+
+  payloadArray = [];
+  addPOI() {
+    // console.log(this.POIPayload.routeId);
+    // console.log(this.POIPayload.payload);
+
+    //console.log(this.POIPayload.poi[j].poiname)
+    // for (var j = 0; j < this.POIPayload.poi.length; j++) {
+    // var b = {
+    // "address": this.POIPayload.poi[j].address,
+    // "location": {
+    // "coordinates": [
+    // this.POIPayload.poi[j].location.coordinates[0],
+    // this.POIPayload.poi[j].location.coordinates[1]
+    // ],
+    // "type": "Point"
+    // }
+
+    // }
+
+    // this.payloadArray.push(b);
+
+    // }
+    this.payloadArray = this.POIPayload.poi;
+
+    for (var i = 0; i < this.MarkerPointInterest.length; i++) {
+      if (this.PointInterestName[i] == "" || this.PointInterestName[i] == undefined || this.PointInterestName[i] == null) {
+        this.PointInterestName[i] = "";
+      }
+      var a = {
+        "address": this.PointInterestName[i],
+        "location": {
+          "coordinates": [
+            this.MarkerPointInterest[i]["1"],
+            this.MarkerPointInterest[i]["0"],
+          ],
+          "type": "Point"
+        }
+      }
+      this.payloadArray.push(a);
+    }
+
+    // console.log(this.payloadArray);
+    // console.log(this.POIPayload.routeId);
+    var poi_PayLoad = {
+      poi: this.payloadArray,
+      _id: this.POIPayload.routeId
+
+    }
+    // console.log(poi_PayLoad)
+    this.contactService.addPOI(poi_PayLoad)
+      .subscribe(res => {
+        // console.log(res)
+        var poiRes = res;
+        // console.log(poiRes);
+        this.cond = false;
+
+      }, err => {
+        // console.log(err.status);
+        this.router.navigateByUrl("routeMapping");
+      })
+
+  }
+
+
+  poiWindow() {
+    let dialogRef_1 = this.dialog.open(PoiListComponent, {
+      height: '500px',
+      width: '950px',
+      data: { routeId: this.POIPayload.routeId }
+    });
+
+  }
+
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+
+  getPOI() {
+    var rId = this.divehistory.routeId;
+    // console.log(rId)
+    this.contactService.getPoiReplay(rId, this.useridd)
+      .subscribe(res => {
+        // console.log(res);
+        this.pathObj = res;
+     
+        this.showRoute(this.pathObj);
+       
+      }, err => {
+        this.getDeviceHistory();
+        
+        // console.log(err.status);
+
+      })
+  }
+
+  speeed2: any = 0;
+  speed: any = 200;
+  target: number = 0;
+  playing: boolean = false;
+  inc = 0;
+  marker4:any;
+ 
+
+  // ============================replay functionality==========================================================
+  animateMarker(marker, coords, km_h){
+   var target = 0;
+   var that= this;
+  //  console.log(km_h)
+      
+      coords.push({lat:coords[coords.length-1].lat,lng:coords[coords.length-1].lng});
+      
+      that._goToPoint =function()
+      {
+
+  
+         that.speed = that.speed || 50;
+        
+          var lat = marker.position.lat();
+          var lng = marker.position.lng();
+          
+          var step = (that.speed * 1000 * that.delay) / 3600000; // in meters
+      
+         
+          var dest = new google.maps.LatLng(
+         
+          coords[target].lat, coords[target].lng);
+          
+          var distance =
+          google.maps.geometry.spherical.computeDistanceBetween(
+          dest, marker.position); // in meters
+          
+          var numStep = distance / step;
+          var i = 0;
+          var deltaLat = (coords[target].lat - lat) / numStep;
+          var deltaLng = (coords[target].lng - lng) / numStep;
+          that.speedmeterVal= that.mapData1[target]?(that.mapData1[target][2] + "Kmph"):0;
+          that.insertionTime = that.mapData1[target]?that.mapData1[target][3] : ''
+         
+          // console.log('veh speed',that.speedmeterVal)
+          that._moveMarker =function()
+          {                 
+              lat += deltaLat;
+              lng += deltaLng;
+              i += step;
+
+              if (i < distance)
+              {  
+                var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng))
+            
+  
+                if((head != 0)||(head == NaN)) {
+                  
+                  that.icons.car.rotation = head
+              } 
+                  marker.setIcon(that.icons.car);  
+                  marker.setPosition(new google.maps.LatLng(lat, lng));
+                  that.globalComponentMap.setCenter({ lat: lat, lng: lng });
+                  that.start =  setTimeout(that._moveMarker, that.delay);
+              }
+              else
+              {  
+              var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng));
+  
+                 if ((head != 0)||(head == NaN)) {
+                 
+                   that.icons.car.rotation = head
+              }
+              marker.setIcon(that.icons.car);  
+
+               marker.setPosition(dest);
+               that.globalComponentMap.setCenter({ lat: lat, lng: lng });
+                  target++;
+                  if (target == coords.length){ 
+                   // target = 0;
+                   that.flag = 'reset';
+                    clearTimeout(that.start);
+                     }              
+                that.start = setTimeout(that._goToPoint, that.delay);
+              }
+          }
+          that._moveMarker();
+      }
+      that._goToPoint();
+  }
+
+showStatus:boolean=false;
+play(){
+  this.showStatus=true
+this.playing=!this.playing;
+    if(this.flag == 'init'){
+
+      this.animateMarker(this.marker4,this.latLngLine,20000)
+      this.flag = 'stop';
+  
+    }else
+    if(this.flag=='start')
+    {
+      this._moveMarker();
+      this.flag = 'stop';
+    }else
+    if(this.flag=='stop')
+    {
+      this.speed = 0;
+      clearTimeout(this.start);
+      this.flag = 'start';
+    }
+    if(this.flag == 'reset')
+    {
+
+       this.marker4.setPosition({lat:this.latLngLine[0].lat,lng:this.latLngLine[0].lng});
+       this.flag = 'init';
+    }
+
+  }
+
+  fast(b){
+ 
+
+              //  console.log(b);
+               if(b == 'fast'){
+               this.speed += 200;
+               
+                //  console.log(this.speed)
+               }
+                if(b == 'slow'){
+                  if(this.speed<=200){
+                    this.speed=200;
+
+                  }
+                 this.speed -= 200;
+                  // console.log(this.speed);
+               }
+
+   }
+
+
+   onEmptyPOI(){
+    //  console.log("if emptyPOI")
+    //  console.log("if emptyPOI",this.latLngLine)
+    this.marker4 = new google.maps.Marker({
+      position: {lat:this.latLngLine[0].lat,lng:this.latLngLine[0].lng},
+      map: this.globalComponentMap,
+      //icon: 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png'
+      icon: this.icons.car
+  });
+  
+  var flightPath = new google.maps.Polyline({
+    path: this.latLngLine,
+    geodesic: true,
+    strokeColor: '#FF0000',
+    strokeOpacity: 1.0,
+    strokeWeight: 2
+  });
+  flightPath.setMap(this.globalComponentMap); 
+
+  
+   }
+
+  
+  //  ngOnDestroy(){
+  //    this.globalComponentMap.setMap(null);
+  //  }
+  
+    // ============================replay functionality==========================================================
+
+
+
+
+  mapData1 = [];
+  getDeviceHistory() {
+    // console.log(this.divehistory);
+    var ftime = this.divehistory ? this.divehistory.actualStartTime : null;
+    var ttime = this.divehistory ? this.divehistory.actualEndTime : null;
+    var devId = this.divehistory ? this.divehistory.deviceId : null;
+    var retrievedData = localStorage.getItem("devices");
+    var cord = JSON.parse(retrievedData);
+    // console.log("deviceDetail", cord);
+    // console.log("deviceHistoryData=>",ftime,ttime,devId);
+
+    if ((ftime == undefined) || (ftime == null) || (ttime == undefined) || (ttime == null)) {
+      this.errormsg = "no devicehistory found";
+      // console.log(this.errormsg);
+
+    } else {
+      // console.log(devId)
+      this.contactService.getCurrentLocation(devId, ftime, ttime)
+        .subscribe(res => {
+         
+          // console.log("flight path res", res);
+
+          var rH = res;
+          for (let k = rH.length - 1; k > 0; k--) {
+            var rhArray = [rH[k].latDecimal, rH[k].longDecimal, rH[k].speed,rH[k].insertionTime];
+            this.mapData1.push(rhArray);
+
+            let cord = {
+              lat: rH[k].latDecimal,
+              lng: rH[k].longDecimal
+            }
+
+            this.latLngLine.push(cord);
+
+          }
+          // console.log("MarkeraRRray", this.latLngLine)
+          this.onEmptyPOI();
+        })
+    }
+
+  }
+
+
+}
+
+
+
+
+
diff --git a/src/app/point-share/point-share.component.html b/src/app/point-share/point-share.component.html
new file mode 100644
index 0000000..9746dec
--- /dev/null
+++ b/src/app/point-share/point-share.component.html
@@ -0,0 +1,109 @@
+<!-- <div class="container">
+  <div class="row">
+    <div class="col-12">
+      <p>Share Points</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <p>Total Available Points</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="SharePoint()">{{'SUBMIT' | translate}}</button>
+                <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+    </div>
+  </div>
+
+</div>-->
+
+
+<div class="mainDiv">
+  <div class="row" style="text-align: center;padding-top: 6px;margin-bottom: 6px;font-size: 18px;">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <label for="exampleInputEmail1" style="font-weight: 500;">Add Points</label>
+    </div>
+  </div>
+  <div class="row"> 
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <label for="exampleInputEmail1" style="font-weight: 500;">Points</label>
+    <input type="number" class="form-control" id="pointshare" [(ngModel)]="pointShareCount" aria-describedby="point" placeholder="Enter Points">
+    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type No. of points to be shared</small>
+    </div>
+  </div>
+  <div class="row"> 
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <label for="exampleInputEmail1" style="font-weight: 500;">Price/Unit</label>
+    <input type="number" class="form-control" id="perunitprice" [(ngModel)]="perunitprice" aria-describedby="point" placeholder="Enter Per unit price" (change)="calculateTotal()">
+    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type per unit price of points</small>
+    </div>
+  </div>
+  <div class="row" style="padding-bottom: 20px;">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+        <md-select [(ngModel)]="payment_stauts" style="width: 100%;" placeholder="--{{'Payment Status' | translate}}--" (change)="optionShow(payment_stauts)" ngDefaultControl>
+          <md-option *ngFor="let payment of paymentStauts" [value]="payment">{{payment}}</md-option>
+        </md-select>
+    </div>
+  </div>
+  <div class="row" *ngIf="paidF" style="padding-bottom: 20px;"> 
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <label for="exampleInputEmail1" style="font-weight: 500;">Remarks</label>
+    <textarea type="textarea" class="form-control" id="remarks" [(ngModel)]="remarks" aria-describedby="point" placeholder="Remarks"></textarea>
+    </div>
+  </div>
+  <div class="row" *ngIf="creditF" style="padding-bottom: 20px;"> 
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <input id="credit_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig"  [(ngModel)]="credit_date" type="text" >  
+    <!-- <input type="number" class="form-control" id="perunitprice" [(ngModel)]="perunitprice" aria-describedby="point" placeholder="Enter Per unit price"> -->
+    <small id="pointssharee" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please Select Credit Date</small>
+    </div>
+  </div>
+  <div class="row" *ngIf="splF" style="padding-bottom: 20px;"> 
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <button md-raised-button style="float: right;background: #8c8b8b; color: white;font-size: 14px;border-radius: 0px;" (click)="linkShare('email')"><i class="fa fa-envelope" aria-hidden="true"></i> Email </button>
+      <button md-raised-button style="float: right;background: #8c8b8b;color: white;font-size: 14px;border-radius: 0px;margin-right: 10px;" (click)="linkShare('sms')"><i class="fa fa-comment" aria-hidden="true"></i> SMS </button> 
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <div class="col-sm-8 col-md-8 col-lg-8">
+          <label for="exampleInputEmail1" style="font-weight: 500;">Total Allocated Points</label>   
+        </div>
+        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
+          <p style="margin-bottom: 0;">{{allocatedPoint}}</p>
+        </div>  
+      </div> 
+      <div class="row">
+        <div class="col-sm-8 col-md-8 col-lg-8">
+          <label for="exampleInputEmail1" style="font-weight: 500;">Total Available Points</label>
+        </div>
+        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
+          <p style="margin-bottom: 20;">{{availablePoint}}</p>
+        </div>    
+      </div> 
+      <div class="row">
+        <div class="col-sm-8 col-md-8 col-lg-8">
+          <label for="exampleInputEmail1" style="font-weight: 500;">Total Amount</label>
+        </div>
+        <div class="col-sm-4 col-md-4 col-lg-4" style="text-align: right;">
+          <!-- <img src="../../assets/ruppee.png" alt="ruppee" height="42" width="42" > -->
+          <p style="margin-bottom: 20;">{{totalAmount}}</p>
+        </div>        
+      </div> 
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+        <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 12px;">{{errmsg}}</p>
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="SharePoint()"> Proceed </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="closebox()"> Cancel </button> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/point-share/point-share.component.scss b/src/app/point-share/point-share.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/point-share/point-share.component.spec.ts b/src/app/point-share/point-share.component.spec.ts
new file mode 100644
index 0000000..b9b62c9
--- /dev/null
+++ b/src/app/point-share/point-share.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointShareComponent } from './point-share.component';
+
+describe('PointShareComponent', () => {
+  let component: PointShareComponent;
+  let fixture: ComponentFixture<PointShareComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PointShareComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointShareComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/point-share/point-share.component.ts b/src/app/point-share/point-share.component.ts
new file mode 100644
index 0000000..f705ce7
--- /dev/null
+++ b/src/app/point-share/point-share.component.ts
@@ -0,0 +1,157 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+
+@Component({
+  selector: 'app-point-share',
+  templateUrl: './point-share.component.html',
+  styleUrls: ['./point-share.component.scss']
+})
+export class PointShareComponent implements OnInit {
+  pointShareCount:number =0 ;
+  perunitprice:number =0; 
+  errmsg:any;
+  useridd: any;
+  colorTheme = 'theme-dark-blue';
+  totalAmount:number=0 ;
+  allocatedPoint :number = 0;  
+  availablePoint:number = 0 ;
+  bsConfig: Partial<BsDatepickerConfig>;
+  superAdmin: any;
+  custtype: any;
+  pointId: any;
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<PointShareComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    }
+
+  ngOnInit() {  
+    console.log({'data' : this.data});
+    if((this.data.userInfo.point_Allocated)){
+      this.allocatedPoint  = this.data.userInfo.point_Allocated ;
+    }
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    console.log({'this.superAdmin':this.superAdmin,'this.custtype': this.custtype});
+    // debugger;
+    // if(this.superAdmin === true){
+    //   this.pointId = this.useridd ;
+    // }
+
+    // if(this.custtype === true){
+    //   this.pointId = this.useridd ;
+    // }
+ 
+    console.log(this.allocatedPoint);
+  
+    this.checkAvailablePoint()
+  }
+  errFlag:boolean=false;
+  SharePoint(){
+    var that = this; 
+    // if(this.pointShareCount > this.availablePoint){
+  
+    // }
+    // else{
+      if((this.pointShareCount == undefined)||(this.payment_stauts == undefined)){
+        this.errFlag = true;
+        this.errmsg = "All Fields are mendatory";
+        var err = setTimeout(function(){
+            that.errFlag = false; 
+            clearTimeout(err);
+        },5000)
+          return;
+
+      }else{
+
+        var insertPoint = {
+          by: this.useridd,
+          to: this.data.userInfo._id,
+          points: this.pointShareCount,
+          rate: this.perunitprice,
+          totalAmount:this.totalAmount,
+          Payment_type: this.payment_stauts,
+          created_date: new Date().toISOString(),
+      }
+
+      if(this.creditF === true){
+        insertPoint['credit_date'] = this.credit_date;
+      }
+
+      if(this.paidF === true){
+        insertPoint['remarks'] = this.remarks;
+      }
+
+
+     this.contactService.getAvialblePoints(this.useridd,this.pointShareCount).subscribe(res=>{
+       console.log(res);
+       if (res.available_points < this.pointShareCount) {
+         this.errFlag = true;
+         this.errmsg = "Insufficient Points";
+         var err = setTimeout(function () {
+           that.errFlag = false;
+           clearTimeout(err);
+         }, 5000)
+         return;
+
+       }else{
+         this.contactService.addPoints(insertPoint).subscribe(res=>{
+         console.log(res);
+         this.dialogRef.close('added')
+       })
+
+       }
+      //  console.log({'insertPoint':insertPoint});      
+     })
+    
+      }
+
+  }
+  closebox(){
+    this.dialogRef.close('cancel');
+  }
+
+  checkAvailablePoint(){
+    console.log
+    var distId = this.data.userInfo._id;
+    console.log({'distId':distId});
+    var distPoint = '0' ;
+    this.contactService.getAvialblePoints(distId,distPoint).subscribe(res=>{
+      // console.log('res=>',res.json());
+      if((res.available_points == undefined)||(res.available_points < 0 )){
+        this.availablePoint  = 0 ;
+      }else{
+        this.availablePoint = res.available_points?res.available_points:0 ; 
+      }
+     
+    })
+  }
+
+  paymentStauts:any=["Paid","Credit","Send Payment Link"];
+  payment_stauts:any;
+  creditF:boolean = false;
+  paidF:boolean=false;
+  splF:boolean=false;
+  remarks:any;
+  credit_date=new Date();
+  optionShow(poption){
+    console.log("Inside function");
+    console.log(poption);
+    if(poption=='Paid'){this.creditF = false;this.paidF=true;this.splF=false;}
+    if(poption == 'Credit'){this.paidF=false;this.splF=false;this.creditF = true;}
+    if(poption == 'Send Payment Link'){this.splF=true;this.creditF = false;this.paidF=false;}
+  }
+
+
+  linkShare(iden){
+    console.log(iden);
+  } 
+
+  calculateTotal(){
+    this.totalAmount = this.pointShareCount * this.perunitprice ; 
+  }
+}
diff --git a/src/app/poireport/poireport.component.html b/src/app/poireport/poireport.component.html
new file mode 100644
index 0000000..76d38a3
--- /dev/null
+++ b/src/app/poireport/poireport.component.html
@@ -0,0 +1,42 @@
+<app-all-menus></app-all-menus>
+<div style="min-height:420px;padding-top: 6%;">
+    <p class="headStyle">{{'POI LIST' | translate}}</p>
+    <button style="height: 31px;
+    float: right;
+    margin: 4px;" mdTooltip="Add Multiple POI"
+        class="btn btn-outline-primary btn-sm"
+       (click)="AddMiultiple()">
+        ADD MULTIPLE POI<md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+    </button>
+    <button style="height: 31px;
+    float: right;
+    margin: 4px;" mdTooltip="Add POI" class="btn btn-outline-primary btn-sm" (click)="Addpoi()">
+        ADD POI<md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+    </button>
+    <!-- <div class="dropdown" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float: right;margin-right: 10px">
+        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+            <span class="caret"></span></button>
+        <ul class="dropdown-menu" style="text-align: center;
+    margin: 3px;">
+            <li><a (click)="Addpoi()">ADD POI</a></li>
+            <li><a (click)="AddMiultiple()">ADD MULTIPLE POI</a></li>
+          
+        </ul>
+    </div> -->
+    <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+        <thead style="background-color:#A2C523;color: white;">
+            <tr>
+                <th style="text-align:center;">{{'POI name' | translate}}</th>
+                <th style="text-align:center;">{{'Address' | translate}}</th>
+                <th style="text-align:center;">{{'Radius' | translate}}</th>
+                <th style="text-align:center;">{{'POI Type' | translate}}</th>
+                <th style="text-align:center;">{{'Lattitude' | translate}}</th>
+                <th style="text-align:center;">{{'Longitude' | translate}}</th>
+                <th style="text-align:center;">{{'Status' | translate}}</th>
+                <th style="text-align:center;">{{'Untracked vehicles' | translate}}</th>
+                <th style="text-align:center;">{{'Edit' | translate}}</th>
+                <th style="text-align:center;">{{'Delete' | translate}}</th>
+            </tr>
+        </thead>
+    </table>
+</div>
diff --git a/src/app/poireport/poireport.component.scss b/src/app/poireport/poireport.component.scss
new file mode 100644
index 0000000..3dbbd81
--- /dev/null
+++ b/src/app/poireport/poireport.component.scss
@@ -0,0 +1,7 @@
+.headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
\ No newline at end of file
diff --git a/src/app/poireport/poireport.component.spec.ts b/src/app/poireport/poireport.component.spec.ts
new file mode 100644
index 0000000..fed9aae
--- /dev/null
+++ b/src/app/poireport/poireport.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { POIreportComponent } from './poireport.component';
+
+describe('POIreportComponent', () => {
+  let component: POIreportComponent;
+  let fixture: ComponentFixture<POIreportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ POIreportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(POIreportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poireport/poireport.component.ts b/src/app/poireport/poireport.component.ts
new file mode 100644
index 0000000..16ede1d
--- /dev/null
+++ b/src/app/poireport/poireport.component.ts
@@ -0,0 +1,295 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { EditDeviceMasterComponent } from '../device/edit-device-master/edit-device-master.component';
+import { MdDialog } from '@angular/material';
+import { PoiMasterEditComponent } from '../poi-master-edit/poi-master-edit.component';
+import { PoiMenuComponent } from '../poi-menu/poi-menu.component';
+import { SelectUntrackVehiclesComponent } from '../geofencing/select-untrack-vehicles/select-untrack-vehicles.component';
+import { TrackedUntrackedVehiclesComponent } from './tracked-untracked-vehicles/tracked-untracked-vehicles.component';
+declare var $: any, DataTable: any;
+declare var swal: any;
+
+@Component({
+  selector: 'app-poireport',
+  templateUrl: './poireport.component.html',
+  styleUrls: ['./poireport.component.scss']
+})
+export class POIreportComponent implements OnInit {
+  tabelObj: any;
+  useridd: any;
+
+  constructor(public contactService: ContactService,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.testTable() ;
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+    
+}
+
+testTable() {
+    const that = this;
+
+    $(document).ready(function() {
+        that.tabelObj = $('#deviceTable').DataTable({
+            serverSide: true,
+            "processing": true,
+            "searching": false,
+            "order": [[ 3, "desc" ]],    
+            ajax: (dataTablesParameters: any, callback) => {
+
+                dataTablesParameters.op = {};
+                dataTablesParameters.select = [];
+                dataTablesParameters.find = {};
+
+
+                // console.log(dataTablesParameters);
+                // console.log("callback", callback);
+
+                // dataTablesParameters.find = {
+                //   _id: that.useridd         
+                // };
+                dataTablesParameters.columns = [
+                    { data: "user" },             
+                    { data: "radius" },                          
+                    { data: "poi.location.coordinates" },
+                    { data:"poi.poiname"},
+                    { data : "createdOn"},
+                    { data : "status"},
+                    { data : "poi.address"},
+                    {data : "poi.poi_type"},
+                    { data : "untrackedDevice"}
+                  ]
+                  dataTablesParameters.find.user = that.useridd;
+              
+                var suburl = "";
+                suburl += "/poi/poidatatable";
+                // console.log(suburl);
+                // console.log(dataTablesParameters);
+                // console.log(suburl)
+                that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+                    console.log("poiResp",resp);
+                    callback(resp);
+                }, err => {
+                   
+                    // console.log(err.status);
+                });
+            },
+            "rowCallback": function(row: Node, data: any | Object, index: number){  
+                $('#edit', row).bind('click', () => {    
+                    // console.log("Edit Method",data);
+                    data.actionId= "edit";
+                    let dialogRef = that.dialog.open(PoiMasterEditComponent, {
+                      data: {"poiData":data}                      
+                    });
+                  
+                    dialogRef.afterClosed().subscribe(result => {                  
+                        if(result=="success"){
+                            swal(
+                                'Updated',
+                                'POI updated Successfully !',
+                                'success'
+                              )
+                              that.callfunction();
+                        }
+                      })  
+                  });
+                   $('#track', row).bind('click', () => {  
+                 that.untrack(data)
+                     
+                });
+                  $('#delete', row).bind('click', () => {
+                      console.log(data);
+                    swal({
+                        title: 'Are you sure?',
+                        text: "You won't be able to revert this!",
+                        type: 'warning',
+                        showCancelButton: true,
+                        confirmButtonColor: '#3085d6',
+                        cancelButtonColor: '#d33',
+                        confirmButtonText: 'Yes, delete it!'
+                      }).then((result: { value: boolean; }) => {
+                        if (result) {
+                            console.log(data);
+                            that.contactService.deletePOI(data._id)
+                                .subscribe(response=>{
+                                    that.callfunction();
+                                    swal(
+                                        'Deleted!',
+                                        'POI deleted Successfully !',
+                                        'success'
+                                      )
+                                },err=>{
+                                    swal(
+                                        'Server Error',
+                                        'Error occured while deleting POI , Please try after sometime !!!',
+                                        'error'
+                                      )
+                                })           
+                        }
+                      })
+                   
+                  });
+
+
+              },
+            "columns": [
+                {
+                    "data": "poi.poiname",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "poi.address",
+                    render: function(data, type, row) {
+                        // console.log(data);
+                        return data ? data : "";
+                    }
+                 },
+                 {
+                    "data": "radius",
+                    render: function(data, type, row) {
+                        // console.log(data);
+                        return data ? data : "";
+                    }
+                 },
+                 {
+                    "data": "poi.poi_type",
+                    render: function(data, type, row) {
+                        // console.log(data);
+                        return data ? data : "";
+                    }
+                 },
+                {
+                    "data": "poi.location.coordinates",
+                    render: function(data, type, row) {
+                       
+                        return data?data[1]:"" ;
+                    }
+                },
+                {
+                    "data": "poi.location.coordinates",
+                    render: function(data, type, row) {
+                       
+                        return data?data[0]:"" ;
+                    }
+                },
+                {
+                    "data": "status",
+                    "render": function(data, type, row) {            
+                        return data?data:"";
+                    }
+                },
+                 {
+                    "data": null,
+                    "render": function (data, type, row) {    
+                
+                    return `<button class="btn btn=info btn-sm"><i id="track" style="font-size:20px;color: blue" class="fa fa-car"></i></button> `
+                }
+                },
+                // {
+                //     "data": "untrackedDevice",
+                //     "render": function(data, type, row) {  
+                //         console.log(data);          
+                //         return data?data:"";
+                //     }
+                // }, 
+                {
+                    "data":null,"render":function(data,type,row){
+                    return '<button id="edit" type="button" class="btn btn-primary" md-raised-button style="background:#2d32a9;border:0px;">Edit</button>'
+                }
+            } ,
+                {
+                    "data":null,"render":function(data,type,row){
+                    return '<button id="delete" type="button" class="btn btn-primary" md-raised-button style="background:red;border:0px;">Delete</button>'
+                }
+            }  
+                            
+            ],
+        });
+
+        that.tabelObj.columns().every( function () {
+            var that = this;
+     
+            $( 'input', this.footer() ).on( 'keyup change', function () {
+                if ( that.search() !== this.value ) {
+                    that
+                        .search( this.value )
+                        .draw();
+                }
+            } );
+        } );
+       
+    });
+
+}
+ untrack(data){
+
+  if(this.dialog.openDialogs && this.dialog.openDialogs.length > 0){
+      return false;
+    }
+    let dialogRef = this.dialog.open(TrackedUntrackedVehiclesComponent, {
+//  width: '503px',
+//  height:'400px',
+ data: data
+ });
+    dialogRef.afterClosed().subscribe((result) => {
+      dialogRef = null;
+      this.tabelObj.ajax.reload()
+    if(result == "succ"){
+      console.log("Updated")
+    }
+      //add code to perform any other actions on pop-up close.
+    });
+
+ }
+Addpoi(){
+    var data = {
+        "actionId" :  "add"
+    }
+    let dialogRef = this.dialog.open(PoiMasterEditComponent, {
+      data: {"poiData":data} , 
+      width: '800px',         
+    });
+
+    dialogRef.afterClosed().subscribe(result => {                  
+        if(result=="success"){
+            swal(
+                'Updated',
+                'POI added Successfully !',
+                'success'
+              )
+             this.callfunction();
+        }
+      })  
+
+}
+AddMiultiple(){
+ let dialogRef = this.dialog.open(PoiMenuComponent, {
+      data: {"poiData":''} , 
+      width: '800px',         
+    });
+
+    dialogRef.afterClosed().subscribe(result => {  
+        console.log(result);
+                        
+        if(result=="success"){
+            swal(
+                'Uploaded',
+                'POI added Successfully !',
+                'success'
+              )
+             this.callfunction();
+        }
+      }) 
+
+
+}
+
+
+
+}
diff --git a/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.html b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.html
new file mode 100644
index 0000000..522dfc7
--- /dev/null
+++ b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.html
@@ -0,0 +1,38 @@
+<div class="card">
+  <div class="card-body">
+    <div class="row" style="margin:0;margin-bottom:10px">
+      <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+      <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;">
+        <md-option type="checkbox" *ngFor="let item of poiDevices;let i = index;" ng-selected="item.isTrue" [value]="item.id"
+          (click)="change(item, i)">{{item.deviceName}}</md-option>
+      </md-select> -->
+
+      <div style="width: 100%;height: 78vh;">
+        <table id="deviceTables" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align:left;width:100px"><input (change)="selectAll($event)" type="checkbox"> </th>
+              <th style="text-align:left;width:100px">{{'Vehicle Name'|translate}} </th>
+              <th style="text-align:left;width:100px">{{'IMEI'|translate}} </th>
+
+
+            </tr>
+          </thead>
+        </table>
+
+
+      </div>
+
+
+
+    </div>
+
+  </div>
+  <div class="card-footer">
+    <div class="text-center">
+      <button class="btn btn-primary btn-sm" (click)="update()">Update</button>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.scss b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.spec.ts b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.spec.ts
new file mode 100644
index 0000000..4d186b7
--- /dev/null
+++ b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrackedUntrackedVehiclesComponent } from './tracked-untracked-vehicles.component';
+
+describe('TrackedUntrackedVehiclesComponent', () => {
+  let component: TrackedUntrackedVehiclesComponent;
+  let fixture: ComponentFixture<TrackedUntrackedVehiclesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TrackedUntrackedVehiclesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrackedUntrackedVehiclesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.ts b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.ts
new file mode 100644
index 0000000..b31f940
--- /dev/null
+++ b/src/app/poireport/tracked-untracked-vehicles/tracked-untracked-vehicles.component.ts
@@ -0,0 +1,378 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $:any;
+@Component({
+  selector: 'app-tracked-untracked-vehicles',
+  templateUrl: './tracked-untracked-vehicles.component.html',
+  styleUrls: ['./tracked-untracked-vehicles.component.scss']
+})
+export class TrackedUntrackedVehiclesComponent implements OnInit {
+ emailid: any;
+  useridd: any;
+  devicesss: any;
+  uncheckedArr=[];
+  tabelObj: any;
+  poiDevices=[];
+  untrackedDev=[];
+  tempArray: any[];
+  selectedDevices: any[];
+  notSelectedPOIArray=[];
+  Load: boolean;
+  changed:boolean=true
+  superAdmin: any;
+  trackedDevices
+ constructor(public dialogRef: MdDialogRef<TrackedUntrackedVehiclesComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService:ContactService) {
+      console.log(data);
+      // this.untrackedDev=data.untrackedDevice?data.untrackedDevice:[]
+      var deviceIDs = data.untrackedDevice?data.untrackedDevice:[];
+      this.trackedDevices=data.untrackedDevice?data.untrackedDevice:[];
+        //  console.log(deviceIDs);
+        if(deviceIDs.length != 0){
+         for(var k =0; k<deviceIDs.length;k++){
+          //  console.log(deviceIDs[k])
+           this.untrackedDev.push(deviceIDs[k]);
+          }
+          console.log("untrackedDevice=>",this.untrackedDev);
+        }
+         this.notSelectedPOIArray = this.untrackedDev;
+     }
+
+  ngOnInit() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  setTimeout(() => {
+    // $('#dbselectIMEI').multipleSelect({
+        //   width: 250,
+        //   placeholder: "Vehicle IMEI",
+        //   filter: true,
+        //   single: true,
+        //   selectAll: false  
+        // }) 
+  
+        $('#dbselectVehicleName').multipleSelect({
+          width: 250,
+          placeholder: "Vehicle Name",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+        
+        // $("#dbselectVehicleName").multipleSelect("disable");
+        
+      },100)
+       this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+        // this.getUserDevices();
+        this.testTable()
+  }
+
+
+  change(obj: any,ind:any){ 
+    console.log(obj, ind);
+    
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  update(){
+    console.log(this.data);
+    
+     var outerthis = this;
+    
+    var locationObj = {
+      'type' : 'Point',
+      "coordinates": this.data.poi.location.coordinates?this.data.poi.location.coordinates:[],
+      
+    }
+
+   
+      var editPOIobj = {
+        "location": locationObj,
+        "poiid" : this.data._id,
+        "address" : this.data.poi.address?this.data.poi.address:'',
+        "radius" : this.data.radius,
+        poi_type:this.data.poi.poi_type,
+        deviceArr:this.trackedDevices
+      }
+      
+      console.log(editPOIobj);
+      outerthis.Load = true;
+      outerthis.contactService.editPOIdetails(editPOIobj)
+            .subscribe(res=>{
+              outerthis.Load = false;
+                console.log(res);
+                outerthis.dialogRef.close("success");
+            },err=>{
+              outerthis.Load = false;
+              console.log(err);
+            })
+  
+    //  const newGeo ={
+    //         uid: this.useridd,
+    //         geofence:this.data.geofence.coordinates,
+    //         geoname: this.data.geoname,
+    //         entering:this.data.entering,
+    //         exiting:this.data.exiting,
+    //         // vehicleGroup:grp[0],
+    //         type:this.data.type,
+    //         _id:this.data._id,
+    //         untrackedDevice:this.notSelectedPOIArray,
+    //         trackedDevice:this.trackedDevices   
+    //       }
+    //       this.contactService.updateGeo(newGeo).subscribe(devgeo => {
+    //           // localStorage.removeItem("cordinates");
+    //           // this.router.navigateByUrl("geofencing");
+    //           this.dialogRef.close()
+    //           // this.geoadd.push(devgeo);
+    //         }, (err: any) => { 
+  
+    //         });
+  }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTables').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+        //  "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+           
+                console.log(data);
+            var ind=that.poiDevices.indexOf(data)
+              console.log(that.poiDevices[ind],ind);
+            that.poiDevices[ind].isTrue = that.poiDevices[ind].isTrue?!that.poiDevices[ind].isTrue:true;
+           var i = that.notSelectedPOIArray.indexOf(data.id);
+            var index=that.trackedDevices.indexOf(data.id);
+            console.log(index==-1);
+            
+            if(index==-1){
+              if(!that.trackedDevices.includes(data.id)){
+                console.log(that.trackedDevices.length);
+                
+                console.log("In tracked Device");
+                
+                that.trackedDevices.push(data.id);
+                console.log(that.trackedDevices.length);
+              }
+              if(that.notSelectedPOIArray.includes(data.id)){
+                 that.notSelectedPOIArray.splice(i,1);
+              }
+              
+            }else{
+               console.log("In Untracked Device");
+              if(!that.notSelectedPOIArray.includes(data.id)){
+
+                that.notSelectedPOIArray.push(data.id);
+              }
+              if(that.trackedDevices.includes(data.id)){
+                 console.log(that.trackedDevices.length,i);
+                 that.trackedDevices.splice(index,1);
+                  console.log(that.trackedDevices.length);
+              }
+
+              // that.trackedDevices.splice(index,1);
+              // that.notSelectedPOIArray.push(data.id);
+            }
+            // if( i==-1){
+            //  that.notSelectedPOIArray.push(data.id);
+            // }
+            // else{
+            //   that.trackedDevices.push(data.id);
+            //   that.notSelectedPOIArray.splice(i,1);  
+            // }
+      console.log(that.notSelectedPOIArray,that.trackedDevices); 
+      
+         })
+        },
+        ajax: (dataTablesParameters, callback) => {
+           that.Load = true;
+          var suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all';
+          if(that.superAdmin){
+             suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all&supAdmin='+that.useridd;
+          }
+          if(that.changed){
+            that.contactService.get(suburl).subscribe((res:any)=>{
+        
+        that.devicesss=res.devices;
+       for(var i = 0; i<res.devices.length ; i++){       
+            var dev = {
+              isTrue:true,
+              id:res.devices[i]._id,
+              Device_Name: res.devices[i].Device_Name,
+              Device_ID:res.devices[i].Device_ID
+            }  
+          that.poiDevices.push(dev);  
+      //     // that.notSelectedPOIArray.push(res.devices[i]._id)        
+        }   
+      var finalArr=[]  ;
+      var j=0 
+      for (var i = 0; i < that.poiDevices.length; i++) {
+                    that.clocation_1(that.poiDevices[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        finalArr.push(succ);
+                        // console.log(finalArr,j);
+                        j++;
+                        if (j === that.poiDevices.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+         that.Load = false;
+         })
+        }else{
+          // console.log(that.poiDevices);
+          
+          callback({ data: that.poiDevices});
+           that.Load = false;
+           that.changed=true
+        }
+
+        },
+
+        "columns": [
+          {
+            "data": "isTrue",
+            "render": function (data, row) { 
+              if(data){
+                return "<input checked type='checkbox' id='edit'>"   
+              } else{
+                 return "<input  type='checkbox' id='edit'>" 
+              }
+            }
+          },
+           {
+            "data": "Device_Name",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Device_ID",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+         
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+
+        ], order: [[ 0, 'desc' ], [ 0, 'asc' ]]
+      });
+  //     $('#deviceTable tbody').on('change', 'input[type="checkbox"]', function(e){
+  //     // If checkbox is not checked
+  //     console.log("dis",e);
+      
+  //     if(!this.checked){
+  //        var el = $('#example-select-all').get(0);
+  //        console.log(el);
+         
+  //        // If "Select all" control is checked and has 'indeterminate' property
+  //        if(el && el.checked && ('indeterminate' in el)){
+  //           // Set visual state of "Select all" control 
+  //           // as 'indeterminate'
+  //           el.indeterminate = true;
+  //        }
+  //     }
+  //  });  
+  //  $(".deviceTable").on('change', 'input[type="checkbox"]', function(e) {
+  //   var attendance = {
+  //     name: $(this).closest("tr").find("td:nth-child(1)")
+  //   };
+  //   console.log(attendance);
+  // });
+
+    });
+
+  }
+  selectAll(event){
+    this.changed=false
+    // console.log(event);
+    
+    if(event.target.checked){
+      for(var i=0;i<this.poiDevices.length;i++){
+      this.poiDevices[i].isTrue=true;
+      this.trackedDevices.push(this.poiDevices[i].id)
+     
+    }
+      this.notSelectedPOIArray=[];
+    }else{
+      for(var i=0;i<this.poiDevices.length;i++){
+        this.poiDevices[i].isTrue=false
+         this.notSelectedPOIArray.push(this.poiDevices[i].id)
+      }
+       
+       this.trackedDevices=[]
+    }
+    this.tabelObj.ajax.reload();
+    
+    console.log(this.notSelectedPOIArray,this.trackedDevices);
+  }
+
+   clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    //  console.log(latlngObj);
+     
+     if(this.trackedDevices.includes(latlngObj.id)){
+        latlngObj.isTrue=false;
+        cb(null, latlngObj);
+     }else{
+        latlngObj.isTrue=true;
+          cb(null, latlngObj);
+     }
+     }
+    
+   
+
+  }
diff --git a/src/app/product-shop/billing-info/billing-info.component.html b/src/app/product-shop/billing-info/billing-info.component.html
new file mode 100644
index 0000000..f46ca7d
--- /dev/null
+++ b/src/app/product-shop/billing-info/billing-info.component.html
@@ -0,0 +1,69 @@
+<div class="container">
+  <div class="row" >
+   <div class="col-12" > 
+    <p style="text-align: center;padding-top: 5px; padding-bottom: 5px;color: white;background: #202f46;margin-bottom: 0;">Billing Information</p>
+   </div>
+  </div>
+  <div class="row" style="margin-top: 20px;">
+    <div class="col-6">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter First Name</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="first_name" aria-describedby="phoneHelp" >
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type your first name</small>
+    </div>
+    <div class="col-6">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Last Name</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="last_name" aria-describedby="phoneHelp" >
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type your last name</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Phone Number</label>
+      <input type="number" class="form-control" id="exampleInputphone1" [(ngModel)]="phone_number" aria-describedby="phoneHelp" placeholder="902119XXXX">
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Phone Number</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Email Address</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="email_add" aria-describedby="phoneHelp" placeholder="abc@def.com">
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address</small>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Enter Shipping Address</label>
+      <textarea type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="shipping_address" aria-describedby="phoneHelp" placeholder="abc@def.com"></textarea>
+      <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Shipping Address</small>
+    </div>
+  </div>
+  <div class="row" style="margin-top: 20px;">
+    <div class="col-3">
+      <label for="exampleInputEmail1" style="font-weight: 500;">City</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="city" aria-describedby="phoneHelp" placeholder="Please Type City">
+      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address</small> -->
+    </div>
+    <div class="col-3">
+      <label for="exampleInputEmail1" style="font-weight: 500;">State</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="state" aria-describedby="phoneHelp" placeholder="Please Type State">
+      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address</small> -->
+    </div>
+    <div class="col-3">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Country</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="country" aria-describedby="phoneHelp" placeholder="Please Type Country">
+      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address for share Vehicle Location</small> -->
+    </div>
+    <div class="col-3">
+      <label for="exampleInputEmail1" style="font-weight: 500;">Pincode</label>
+      <input type="text" class="form-control" id="exampleInputphone1" [(ngModel)]="pin_code" aria-describedby="phoneHelp" placeholder="Please Type Pincode">
+      <!-- <small id="exampleInputphone1" class="form-text text-muted" style="margin-bottom: 5px; color: #86878a !important;">Please type Email Address for share Vehicle Location</small> -->
+    </div>
+  </div>
+  <div class="row" style="margin-top: 20px;">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <p *ngIf="errFlag" style="text-align: center; color: red; font-size: 14px;font-weight: 500;">{{errmsg}}</p>
+        <button md-raised-button style="float:right;background: #2C7873; color: white;font-size: 14px;margin-left: 10px;border-radius:0px;" (click)="ProceedandBuy()"> Proceed and Pay </button>
+        <button md-raised-button style="float:right;background: #b11515;; color: white;font-size: 14px;border-radius:0px;" (click)="close()"> Cancel </button> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/product-shop/billing-info/billing-info.component.scss b/src/app/product-shop/billing-info/billing-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/product-shop/billing-info/billing-info.component.spec.ts b/src/app/product-shop/billing-info/billing-info.component.spec.ts
new file mode 100644
index 0000000..546fe49
--- /dev/null
+++ b/src/app/product-shop/billing-info/billing-info.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BillingInfoComponent } from './billing-info.component';
+
+describe('BillingInfoComponent', () => {
+  let component: BillingInfoComponent;
+  let fixture: ComponentFixture<BillingInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BillingInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BillingInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/billing-info/billing-info.component.ts b/src/app/product-shop/billing-info/billing-info.component.ts
new file mode 100644
index 0000000..e678337
--- /dev/null
+++ b/src/app/product-shop/billing-info/billing-info.component.ts
@@ -0,0 +1,46 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-billing-info',
+  templateUrl: './billing-info.component.html',
+  styleUrls: ['./billing-info.component.scss']
+})
+export class BillingInfoComponent implements OnInit {
+  first_name:any;
+  last_name:any;
+  phone_number:any;
+  email_add:any;
+  shipping_address:any;
+  city:any;
+  state:any;
+  country:any;
+  pin_code:any;
+  constructor(public dialogRef: MdDialogRef<BillingInfoComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { }
+  errFlag:any;
+  ngOnInit() {
+
+  }
+
+  ProceedandBuy(){
+    var billingInfoPayload = {
+      first_name : this.first_name,
+      last_name : this.last_name,
+      phone : this.phone_number,
+      email:this.email_add,
+      shipping_address:this.shipping_address,
+      city : this.city,
+      state:this.state,
+      country:this.country,
+      pin_code:this.pin_code,
+    
+    }
+    this.dialogRef.close(JSON.stringify(billingInfoPayload));
+
+  }
+  close(){
+    this.dialogRef.close('cancel');
+  }
+
+}
diff --git a/src/app/product-shop/buy-now/buy-now.component.html b/src/app/product-shop/buy-now/buy-now.component.html
new file mode 100644
index 0000000..13b2d84
--- /dev/null
+++ b/src/app/product-shop/buy-now/buy-now.component.html
@@ -0,0 +1,101 @@
+<div class="topDiv">   
+  <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
+          <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
+                  <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
+          </div>
+          <div class="col-sm-6 col-md-6 col-lg-6" >         
+                <div style="text-align: right;padding-top: 20px;">         
+                        <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
+                        <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
+                        <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
+                   
+                </div>
+          </div>
+          <div class="col-sm-4 col-md-4 col-lg-4">      
+                  <div style="text-align: center;">
+                          <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="goBack()">< Go Back</button>
+                          <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>    
+                  </div>
+          </div>            
+  </div>
+                
+     
+  <div clas="row" class="row" style="max-height: 100vh; padding-top: 4%;height: 100vh; background: #fdfdfd;">
+      <div class="col-sm-12 col-md-7 col-lg-7" style="padding: 0px 100px 0px 100px;max-height: 92vh;height: 92vh;overflow: auto;">
+        <div class="row" style="margin-top: 40px;border-bottom: 4px solid whitesmoke;padding: 0;margin-left: 0;margin-right: 0;" *ngFor="let buyPro of message">
+          <div class="col-5">
+                <img class="d-block w-100" style="float: right; height: 210px;width: 75%!important;padding: 30px;" src="{{buyPro.imageUrl[0]}}" alt="Product Image">
+          </div>
+          <div class="col-7" style="padding-top: 30px;">
+                <div style="display: flex">
+                        <label  for="name" style="font-weight: 600;">Device Name</label>
+                        <p style="margin-bottom: 0;margin-left: 50px;">{{buyPro.device_name}}</p>
+                </div>
+                <div style="display: flex">
+                        <label  for="model" style="font-weight: 600;">Model</label>
+                        <p style="margin-bottom: 0;margin-left: 94px;">{{buyPro.raw.product_specification.model_number}}</p>
+                    
+                </div>
+                <div style="display: flex">
+                        <label  for="price" style="font-weight: 600;">Price</label>
+                        <p style="margin-bottom: 0;margin-left: 108px;">INR {{buyPro.discountPrice}}</p>
+                </div>
+              
+            
+            
+                  <div style="display: flex">
+                        <label for="quantity" style="font-weight: 600;">Quantity</label>
+                        <input type="number" [(ngModel)] = "productQuantity" class="form-control" id="quantity" name="quantity" min="1" max="5000" style="width: 15%;margin-left: 80px;">
+                  </div>
+          </div>
+        </div>
+             
+      </div>
+      <div class="col-sm-12 col-md-5 col-lg-5" style="padding: 40px 80px 40px 80px;">
+        <div class="row"> 
+                <div class="col-12">
+                        <p style="margin-bottom: 0;background: #ca1717;padding: 10px;text-align: center;color: white;font-weight: 700;font-size: 20px;">Order Summary</p>
+                        <div class="tbl" style="">
+                                <table style="width: 100%;border: 1px solid;">
+                                        <tr style="background: #bac7b2;color: white;">
+                                                <th style="padding-left: 10px;">Model</th>
+                                                <th style="padding-left: 10px;">Quantity</th>
+                                                <th style="padding-left: 10px;">Amount</th>
+                                        </tr>
+                                        <tr *ngFor="let order of message" style="border-bottom: 1px solid #d6d6d6;">
+                                                <td style="padding-left: 10px;">
+                                                        <p style="margin: 5px 0px 0px 0px;">{{order.device_name}}</p>
+                                                        <p style="margin: 0px 0px 5px 0px;">{{order.raw.product_specification.model_number}}</p>
+                                                </td>
+                                                <td style="padding-left: 10px;">{{order.quantity?order.quantity:1}}</td>
+                                                <td style="padding-left: 10px;">{{order.discountPrice}}</td>
+                                        </tr>
+                                        <tr style="border-bottom: 1px solid #d6d6d6;">
+                                                <td colspan="2" style="padding-left: 10px;">TOTAL</td>
+                                                <td colspan="1" style="padding-left: 10px;"><p>{{totalAmount}}</p></td>
+                                        </tr>
+                                        <tr style="border-bottom: 1px solid #d6d6d6;">
+                                                <td colspan="2" style="padding-left: 10px;">GST</td>
+                                                <td colspan="1" style="padding-left: 10px;">18%</td>
+                                        </tr >
+                                        <tr style="border-bottom: 1px solid #d6d6d6;">
+                                                <td colspan="2" style="padding-left: 10px;">Payable Amount</td>
+                                                <td colspan="1" style="padding-left: 10px;">{{payableAmt}}</td>
+                                        </tr>
+                                </table>  
+                        </div>
+                </div>
+        </div>
+        <div class="row" style="text-align: center;margin-top: 40px;">
+                <div class="col-12">
+                        <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="buyNow()">{{'Proceed' | translate}}</button>
+                </div>
+        </div>
+      </div>
+  </div>
+  </div>
+  
+
+
+
+
diff --git a/src/app/product-shop/buy-now/buy-now.component.scss b/src/app/product-shop/buy-now/buy-now.component.scss
new file mode 100644
index 0000000..38f201a
--- /dev/null
+++ b/src/app/product-shop/buy-now/buy-now.component.scss
@@ -0,0 +1,5 @@
+.topDiv{
+  
+    background: whitesmoke;
+    height: 100vh;
+  }
\ No newline at end of file
diff --git a/src/app/product-shop/buy-now/buy-now.component.spec.ts b/src/app/product-shop/buy-now/buy-now.component.spec.ts
new file mode 100644
index 0000000..b8324f6
--- /dev/null
+++ b/src/app/product-shop/buy-now/buy-now.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BuyNowComponent } from './buy-now.component';
+
+describe('BuyNowComponent', () => {
+  let component: BuyNowComponent;
+  let fixture: ComponentFixture<BuyNowComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BuyNowComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BuyNowComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/buy-now/buy-now.component.ts b/src/app/product-shop/buy-now/buy-now.component.ts
new file mode 100644
index 0000000..f43a420
--- /dev/null
+++ b/src/app/product-shop/buy-now/buy-now.component.ts
@@ -0,0 +1,165 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../../environments/environment';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { BillingInfoComponent } from '../billing-info/billing-info.component';
+
+@Component({
+  selector: 'app-buy-now',
+  templateUrl: './buy-now.component.html',
+  styleUrls: ['./buy-now.component.scss']
+})
+export class BuyNowComponent implements OnInit {
+  showNav: boolean;
+  showMenu = environment.showLandingpageMenu;
+  dev_url=environment.hostUrl;
+  url: string;
+  userData: any;
+  logo_1: string;
+  organisationName: any;
+  supportContact: any;
+  text: any;
+  backgroundImage: string;
+  requestDemo : boolean = false; 
+  demoString = "Demo Request"; 
+  cpn_showLink: boolean =false;
+  showLink: boolean;
+  mainSiteurl:any; 
+  saanvi_showLink: boolean = false;
+  cartButton = false;
+  message: any;
+  cartValue: any=[];
+  imageUrl: any;
+  productQuantity : number =1 ; 
+  totalAmount: any = 0;
+  gstAmount: any = 0;
+  payableAmt:any =0;
+
+  constructor(private dataService: ContactService,private router: Router, public dialog: MdDialog) { 
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0]; 
+        
+    if(split2 == "www.oneqlik.in"){ 
+      this.showLink = true;
+      this.mainSiteurl  = 'https://www.oneqlik.in/telematics/';
+      this.backgroundImage = '../../assets/image/login_bg.jpg';
+      this.logo_1  = '../../assets/image/f_logo.jpg' ; 
+    }else{  
+      console.log("Inside showlink false");
+      this.showLink = false;
+    }
+
+    if(split2 == "login.cpntrack.com"){ 
+
+      this.cpn_showLink = true;
+      this.mainSiteurl  = 'http://www.cpntrack.com/';
+    
+    }
+
+    if((split2 == "saanvisecurity.in")||(split2 == "www.saanvisecurity.in")){
+      this.saanvi_showLink = true;
+      this.mainSiteurl  = 'http://site.saanvisecurity.in';
+    }
+   
+  }
+
+  ngOnInit() {
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0];
+    this.url = split2;
+
+    this.dataService.dealerInfo(this.url).subscribe(
+      data => {
+        this.userData = data 
+      if(this.url != 'www.oneqlik.in'){    
+        this.logo_1    =  this.dev_url+this.userData.logo; 
+      }
+      
+        this.organisationName = (this.url == 'www.oneqlik.in')?'OneQlik':this.userData.organisationName  ; 
+        this.supportContact = this.userData.contact_support?this.userData.contact_support : ''; 
+
+
+        this.text=this.userData.text;
+       
+      },err=>{
+        this.backgroundImage = '../../assets/image/login_bg.jpg' ;
+     
+      }) 
+
+    
+    for(var i = 0; i <this.showMenu.length;i++){
+      if (this.url == this.showMenu[i]) {
+        this.showNav = true;
+        return;
+      } else {
+        this.showNav = false;
+      }
+    }
+
+    var message_1 = localStorage.getItem('addedToCart');
+    if(message_1!=undefined){
+      this.message = JSON.parse(message_1); 
+      console.log(this.message);
+
+       for(var j = 0 ; j<this.message.length;j++){
+      console.log(this.message[j]);
+      // if(this.message[j].discountPrice != NaN){
+        this.totalAmount +=  parseInt(this.message[j].discountPrice);
+      // }else{
+        // this.totalAmount +=  0; 
+      // }
+      this.gstAmount = (this.totalAmount*18)/100 ;
+      this.payableAmt = this.totalAmount + this.gstAmount ; 
+
+        }
+      
+      // console.log(this.cartValue);
+
+    }
+  }
+
+  goBack(){
+    this.router.navigateByUrl("product-shop/product-overview");
+  }
+
+
+  buyNow(){
+    let dialogRef = this.dialog.open(BillingInfoComponent, {
+      width:'800px',
+      data: { deviceObject: '' }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result)
+      if(result !='cancel'){
+        var modalResponse = JSON.parse(result);
+        modalResponse['CartData'] = this.message ;
+        console.log(modalResponse);
+        this.ReceiptSend(modalResponse);
+
+      }
+      // if (result == "succ") {
+   
+      // }
+      function launch_toast() {
+        // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+      }
+    });
+  }
+
+
+  ReceiptSend(mRes){
+    this.dataService.sendReceipt(mRes).subscribe(res=>{
+      console.log(res);
+    })
+
+
+
+  }
+
+}
diff --git a/src/app/product-shop/order-details/order-details.component.html b/src/app/product-shop/order-details/order-details.component.html
new file mode 100644
index 0000000..b9d6e2c
--- /dev/null
+++ b/src/app/product-shop/order-details/order-details.component.html
@@ -0,0 +1,23 @@
+<div class="container">
+  <div style="font-size: 12px;margin-left: 5px; margin-right: 5px;background: white; box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);">
+    <table id="myTable1" class="table table-striped table-hover">
+      <thead style="background: #426E86; color: white;">
+        <tr>
+          <th>{{'Product Name' | translate}}</th>
+          <th>{{'Model' | translate}}</th>
+          <th>{{"Quantity" | translate}}</th>
+          <th>{{'Price' | translate}}</th>
+       
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let order of orderDetail">
+          <td>{{order.deviceName}}</td>
+          <td>{{order.model}}</td>
+          <td>{{order.quantity}}</td>
+          <td>{{order.price}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/product-shop/order-details/order-details.component.scss b/src/app/product-shop/order-details/order-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/product-shop/order-details/order-details.component.spec.ts b/src/app/product-shop/order-details/order-details.component.spec.ts
new file mode 100644
index 0000000..0c50af3
--- /dev/null
+++ b/src/app/product-shop/order-details/order-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderDetailsComponent } from './order-details.component';
+
+describe('OrderDetailsComponent', () => {
+  let component: OrderDetailsComponent;
+  let fixture: ComponentFixture<OrderDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/order-details/order-details.component.ts b/src/app/product-shop/order-details/order-details.component.ts
new file mode 100644
index 0000000..ab56264
--- /dev/null
+++ b/src/app/product-shop/order-details/order-details.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-order-details',
+  templateUrl: './order-details.component.html',
+  styleUrls: ['./order-details.component.scss']
+})
+export class OrderDetailsComponent implements OnInit {
+  orderDetail:any=[];
+
+  constructor(public dialogRef: MdDialogRef<OrderDetailsComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+
+    this.orderDetail  = this.data ;
+    console.log("this.payloadObj",this.orderDetail); 
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/product-shop/order-summary/order-summary.component.html b/src/app/product-shop/order-summary/order-summary.component.html
new file mode 100644
index 0000000..7bf4d37
--- /dev/null
+++ b/src/app/product-shop/order-summary/order-summary.component.html
@@ -0,0 +1,40 @@
+
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Order Summary' | translate}}</h4>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">Order Date</th>
+                        <th style="text-align:left;" title="Buyer Name">Name</th>
+                        <th style="text-align:left;">Phone</th>
+                        <th style="text-align:left;">Email</th>
+                        <th style="text-align:left;" title="Shipping Address">Address</th>
+                        <th style="text-align:left;">Status</th>
+                        <th style="text-align:center;">Order Detail</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/product-shop/order-summary/order-summary.component.scss b/src/app/product-shop/order-summary/order-summary.component.scss
new file mode 100644
index 0000000..0fe5fac
--- /dev/null
+++ b/src/app/product-shop/order-summary/order-summary.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/product-shop/order-summary/order-summary.component.spec.ts b/src/app/product-shop/order-summary/order-summary.component.spec.ts
new file mode 100644
index 0000000..6f3a26a
--- /dev/null
+++ b/src/app/product-shop/order-summary/order-summary.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OrderSummaryComponent } from './order-summary.component';
+
+describe('OrderSummaryComponent', () => {
+  let component: OrderSummaryComponent;
+  let fixture: ComponentFixture<OrderSummaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OrderSummaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OrderSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/order-summary/order-summary.component.ts b/src/app/product-shop/order-summary/order-summary.component.ts
new file mode 100644
index 0000000..c9851e4
--- /dev/null
+++ b/src/app/product-shop/order-summary/order-summary.component.ts
@@ -0,0 +1,176 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { Router, ActivatedRoute } from '@angular/router';
+import { ContactService } from '../../contact.service';
+import { OrderDetailsComponent } from '../order-details/order-details.component';
+
+
+declare var $:any;
+declare var moment :any; 
+
+@Component({
+  selector: 'app-order-summary',
+  templateUrl: './order-summary.component.html',
+  styleUrls: ['./order-summary.component.scss']
+})
+export class OrderSummaryComponent implements OnInit {
+  Fromdate: any;
+  todate: any;
+  superAdmin: any;
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  mb: any;
+  useridd: any;
+  custtype: any;
+  deviceArr: any;
+
+  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService,private router: Router, private route: ActivatedRoute,) { }
+  identifier : any= "order_summary";
+  Load : boolean = false;
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.testTable()
+  }
+
+  getReport(ev){
+    console.log(ev);
+
+  }
+
+  tabelObj:any; 
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+                that.contactService.getOederSummary().subscribe(resp => {         
+                  that.Load = false;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false; 
+                callback({data : [] });   
+                console.log("error",err) ;     
+              });
+          },  
+          "rowCallback": function(row: Node, data: any | Object, index: number){     
+            $('#orderDetail', row).bind('click', () => {    
+              // console.log('ExpenseTypeDetail=>',et);
+              console.log(data);
+
+              let dialogRef = that.dialog.open(OrderDetailsComponent, {
+                width : "700px",
+                data: data?data.CartData:[]
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                if(result == "success"){
+                  console.log("success");   
+                }
+              });  
+            
+              
+            }); 
+
+          },
+        
+            "columns": [
+           
+                {
+                    "data": "purchased_on",
+                    "render": function(data, type, row) {
+                      return data ? moment(data).format('llll') : "--";
+                                    
+                    }
+                },
+                {
+                    "data": "buyer_first_name",
+                    "visible" : true,
+                    render: function(data, type, row) {
+                      console.log(row);
+                      var fn = data?data:'';
+                      var ln = row.buyer_last_name?row.buyer_last_name:'';
+                      console.log(ln);
+                      return  fn+ " " +  ln;        
+                    }
+                },
+              //   {
+              //     "data": "buyer_last_name",
+              //     "visible" : true,
+              //     render: function(data, type, row) {
+              //       return row.buyer_first_name?row.buyer_first_name:''+ " "+ data.buyer_last_name?data.buyer_last_name:data.buyer_last_name;        
+              //     }
+              // },
+                {
+                   "data": "phone",
+                    render: function(data, type, row) {
+                     return data?data:''; 
+                  
+                    }
+                }, 
+                {
+                  "data": "email",
+                   render: function(data, type, row) {
+                    return data?data:''; 
+                 
+                   }
+               },          
+              {
+                "data": "shippingAddress",
+                "defaultContent": "_id",
+                render: function(data, type, row) {        
+                  return data.city + ' ' + data.state +' ' + data.country + ' ' + data.pincode ; 
+                }
+            }    
+   ,
+          {
+            "data": "status",
+            "defaultContent": "_id",
+            render: function(data, type, row) {        
+              return data?data:"Processed";
+            }
+        }    ,   {
+          "data": "CartData",
+          "defaultContent": "_id",
+          render: function(data, type, row) {        
+            return '<i id="orderDetail" title="Order Detail" style="font-size:20px" class="fas fa-info"></i>'      
+          }
+      }                       
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+              { className: "dt-body-center", "targets": [ 6 ] },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+
+
+}
diff --git a/src/app/product-shop/product-overview/product-overview.component.html b/src/app/product-shop/product-overview/product-overview.component.html
new file mode 100644
index 0000000..99d4a0a
--- /dev/null
+++ b/src/app/product-shop/product-overview/product-overview.component.html
@@ -0,0 +1,112 @@
+<div class="topDiv">   
+  <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
+          <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
+                  <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
+          </div>
+          <div class="col-sm-6 col-md-6 col-lg-6" >         
+                <div style="text-align: right;padding-top: 20px;">         
+                        <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
+                        <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
+                        <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
+                        <!-- {{supportContact}} -->
+                </div>
+          </div>
+          <div class="col-sm-4 col-md-4 col-lg-4">      
+                  <div style="text-align: center;">
+                          <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="goback()">More Products</button>
+                          <!-- <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: 15px;margin-left: 20px;">Go To Site</button> -->
+                          <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>
+                          <!-- <i title="Shop Tracker" class="fas fa-shopping-cart" style="cursor: pointer;float: right; font-size: 25px; padding: 24px 10px 0px 0px; color: #2db4c1;" (click)="backtoLogin()"></i> -->
+                          <!-- *ngIf="showLink || cpn_showLink || saanvi_showLink" -->
+                  </div>
+          </div>            
+  </div>
+  <div class="row" style="max-height: 100vh; padding-top: 4%;height: 100vh; margin-left: 200px; margin-right: 200px; background: white; overflow: auto;">
+    <div class="col-sm-12 col-md-12 col-lg-12"> 
+          <!-- all template wil go here    -->
+          <div class="row" style="margin-top: 40px;">
+            <div class="col-sm-5 col-md-5 col-lg-5">
+              <div class="row" style="margin-bottom: 30px;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <div id="toast">
+                    <div id="desc">{{data_descip}}</div>
+                  </div>
+                  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+                    <ol class="carousel-indicators">
+                      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+                      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+                      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+                    </ol>
+                    <div class="carousel-inner">
+                      <div class="carousel-item active" *ngFor="let images of imageURL">
+                        <img class="d-block w-100" src="{{images}}" alt="First slide" style="height: 300px; width: 100%!important; padding: 25px;">
+                      </div>
+                      <!-- <div class="carousel-item">
+                        <img class="d-block w-100" src="../assets/images/trackerImages/AIS140.png" alt="Second slide">
+                      </div> -->
+                      <!-- <div class="carousel-item">
+                        <img class="d-block w-100" src="../assets/images/trackerImages/AIS140.png" alt="Third slide">
+                      </div> -->
+                    </div>
+                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Previous</span>
+                    </a>
+                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                      <span class="sr-only">Next</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-6 col-md-6 col-lg-6">
+                  <button *ngIf="message.addToCart === false" style="background-color: #ff9f00; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="addtocart()">{{'Add to Cart' | translate}}</button>
+                  <button *ngIf="message.addToCart === true" style="background-color: #ff9f00; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="removeCart()">{{'Remove Cart' | translate}}</button>
+                </div>
+                <div class="col-sm-6 col-md-6 col-lg-6">
+                  <button style="background-color: #fb641b; color: #fdfdfd; font-size: 16px; width: 100%;" md-raised-button (click)="buynow()">{{'Buy Now' | translate}}</button>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-7 col-md-7 col-lg-7">
+              <div class="row" style="padding-top: 20px;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <p style="color: #878787; font-size: 16px; margin-bottom: 0; font-weight: 500;">{{message.device_name}}</p>
+                  <p style="font-size: 15px; font-weight: 400;margin-bottom: 5px;">{{message.raw.product_specification?message.raw.product_specification.additionalSpec:''}}</p>
+                </div>        
+              </div>
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <p style="color: #26a541; font-weight: 500; margin-bottom: 0;">Special Price</p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <span style="font-weight: 500;font-size: 20px;margin-right: 5px;">INR</span><span style="font-size: 20px; font-weight: 500;">{{message.discountPrice}}</span>
+                  <span style="text-decoration: line-through; color: #878787; margin: 0px 10px; font-weight: 500; font-size: 16px;">{{message.price}}</span>
+                  <span style="color: #26a541;font-size: 16px;font-weight: 500;">{{message.raw.discount_price}}% off</span>      
+                </div>        
+              </div>
+              <div class="row" style="font-size: 20px; font-weight: 500; color: #878787;margin-top: 10px;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                    <p>Specifications : </p>
+                </div>        
+              </div>
+              <div class="row" style="height: 60%; overflow: auto;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                   <div class="row" *ngFor="let rowData of RawDataArr">
+                     <div class="col-4">
+                       <p>{{rowData.k1}}</p>
+                     </div>
+                     <div class="col-8">  
+                       <p>{{rowData.k2}}</p>            
+                    </div>
+                   </div>
+                </div>        
+              </div>
+            </div>
+          </div>
+    </div>
+  </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/product-shop/product-overview/product-overview.component.scss b/src/app/product-shop/product-overview/product-overview.component.scss
new file mode 100644
index 0000000..a65cf68
--- /dev/null
+++ b/src/app/product-shop/product-overview/product-overview.component.scss
@@ -0,0 +1,61 @@
+.topDiv{
+  
+    background: whitesmoke;
+    height: 100vh;
+  }
+
+  .topDiv{
+  
+    background: whitesmoke;
+    height: 100vh;
+  }
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 200px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/product-shop/product-overview/product-overview.component.spec.ts b/src/app/product-shop/product-overview/product-overview.component.spec.ts
new file mode 100644
index 0000000..a885af0
--- /dev/null
+++ b/src/app/product-shop/product-overview/product-overview.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductOverviewComponent } from './product-overview.component';
+
+describe('ProductOverviewComponent', () => {
+  let component: ProductOverviewComponent;
+  let fixture: ComponentFixture<ProductOverviewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductOverviewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/product-overview/product-overview.component.ts b/src/app/product-shop/product-overview/product-overview.component.ts
new file mode 100644
index 0000000..ae2888b
--- /dev/null
+++ b/src/app/product-shop/product-overview/product-overview.component.ts
@@ -0,0 +1,212 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../../environments/environment';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-product-overview',
+  templateUrl: './product-overview.component.html',
+  styleUrls: ['./product-overview.component.scss']
+})
+export class ProductOverviewComponent implements OnInit {
+  showNav: boolean;
+  showMenu = environment.showLandingpageMenu;
+  dev_url=environment.hostUrl;
+  url: string;
+  userData: any;
+  logo_1: string;
+  organisationName: any;
+  supportContact: any;
+  text: any;
+  backgroundImage: string;
+  requestDemo : boolean = false; 
+  demoString = "Demo Request"; 
+  cpn_showLink: boolean =false;
+  showLink: boolean;
+  mainSiteurl:any; 
+  saanvi_showLink: boolean = false;
+  message:any;
+  RawDataArr=[];
+
+cartValue:any=[];
+cartButton=false;
+  data_descip: string;
+
+  constructor(private dataService: ContactService,private router: Router) { 
+
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0]; 
+        
+    if(split2 == "www.oneqlik.in"){ 
+      this.showLink = true;
+      this.mainSiteurl  = 'https://www.oneqlik.in/telematics/';
+      this.backgroundImage = '../../assets/image/login_bg.jpg';
+      this.logo_1  = '../../assets/image/f_logo.jpg' ; 
+    }else{  
+      console.log("Inside showlink false");
+      this.showLink = false;
+    }
+
+    if(split2 == "login.cpntrack.com"){ 
+
+      this.cpn_showLink = true;
+      this.mainSiteurl  = 'http://www.cpntrack.com/';
+    
+    }
+
+    if((split2 == "saanvisecurity.in")||(split2 == "www.saanvisecurity.in")){
+      this.saanvi_showLink = true;
+      this.mainSiteurl  = 'http://site.saanvisecurity.in';
+    }
+  }
+
+  ngOnInit() {
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0];
+    this.url = split2;
+
+    this.dataService.dealerInfo(this.url).subscribe(
+      data => {
+        this.userData = data 
+      if(this.url != 'www.oneqlik.in'){    
+        this.logo_1    =  this.dev_url+this.userData.logo; 
+      }
+      
+        this.organisationName = (this.url == 'www.oneqlik.in')?'OneQlik':this.userData.organisationName  ; 
+        this.supportContact = this.userData.contact_support?this.userData.contact_support : ''; 
+
+
+        this.text=this.userData.text;
+       
+      },err=>{
+        this.backgroundImage = '../../assets/image/login_bg.jpg' ;
+     
+      }) 
+
+    
+    for(var i = 0; i <this.showMenu.length;i++){
+      if (this.url == this.showMenu[i]) {
+        this.showNav = true;
+        return;
+      } else {
+        this.showNav = false;
+      }
+    }
+
+    var message = localStorage.getItem('products');
+   
+      if(message != undefined){
+        var producStr = JSON.parse(message);
+        this.message = producStr ; 
+      
+        console.log('this.message',this.message);
+        // if(this.message.cartValue != undefined){
+        //   for(var j = 0 ; j<this.message.cartValue.length;j++){
+        //     this.cartValue.push(this.message.cartValue[j]);
+        //   }
+        // }
+        // 'Dimension','Battery','Model No.','Weight'
+          this.imageURL=this.message.imageUrl;
+          let b= {k1:'Weight',k2 : this.message.raw.product_specification?this.message.raw.product_specification.itemWeight:''};
+          let c= {k1:'Dimension',k2 : this.message.raw.product_specification?this.message.raw.product_specification.packageDimension:''};
+          let d= {k1:'Model No.',k2 : this.message.raw.product_specification?this.message.raw.product_specification.model_number:''};
+          let e={k1:'Battery',k2 : this.message.raw.product_specification?this.message.raw.product_specification.battery:''};
+          this.RawDataArr.push(b,c,d,e)
+      }else{
+    
+      }
+    
+  }
+
+  goback(){
+    this.router.navigateByUrl('productShop');
+  }
+
+  addtocart(){
+    console.log('add to cart');
+    this.message['addToCart'] = true;
+    // this.cartValue=[]; 
+    console.log(this.cartValue);
+    var newCart = localStorage.getItem('addedToCart');
+    console.log('newCart',JSON.parse(newCart));
+    if(newCart != undefined){  
+      for(var t =0 ;t<JSON.parse(newCart).length;t++){
+        this.cartValue.push(JSON.parse(newCart)[t])
+      }
+      // this.cartValue.push(JSON.parse(newCart));
+    }
+    this.cartValue.push(this.message);
+    localStorage.setItem('addedToCart',JSON.stringify(this.cartValue));
+    // this.router.navigateByUrl("product-shop/product-overview");
+    this.data_descip = 'Product added to Cart';
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+   
+    }
+
+
+    launch_toast();
+
+  }
+
+  buynow(){
+    this.router.navigateByUrl("product-shop/buyProduct");
+
+  }
+
+imageURL = [];
+ getImageUrl(i1){
+    var tArr = [];
+    if(i1 != undefined){
+      tArr = i1;
+    }
+    
+     console.log(tArr);
+    if((tArr.length === 0)||(i1==null)||(i1==undefined)){
+      var urlDefault ='../../assets/image/noImage.png'
+      this.imageURL.push(urlDefault);
+    }else{
+     
+      for(var j =0 ; j <tArr.length ; j++){
+        var str = 'http://www.oneqlik.in/';
+        var shortenUrl = tArr[j].split('/');
+        var shortenUrl_1 = shortenUrl[1] + '/' + shortenUrl[2] + '/' + shortenUrl[3];
+        var furl = str + shortenUrl_1 ; 
+        this.imageURL.push(furl);
+      }
+   
+    }
+    
+  }
+
+  removeCart(){
+    this.message['addToCart'] = false;
+    this.data_descip = 'Product Removed from Cart';
+    var padded  =  localStorage.getItem('addedToCart');
+    console.log('productAdded',padded);
+    if(padded != undefined){
+      var prodAdd = JSON.parse(padded);
+      for(var  y = 0 ; y<prodAdd.length; y++){
+        if(this.message.raw._id  === prodAdd[y].raw._id){
+          prodAdd.splice(y,1);
+          localStorage.setItem('addedToCart',JSON.stringify(prodAdd));
+        }
+      }
+    }
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+   
+    }
+    launch_toast();
+
+  }
+}
diff --git a/src/app/product-shop/product-shop.component.html b/src/app/product-shop/product-shop.component.html
new file mode 100644
index 0000000..d4338ee
--- /dev/null
+++ b/src/app/product-shop/product-shop.component.html
@@ -0,0 +1,93 @@
+<div class="topDiv">   
+  <div *ngIf="!showNav" class="row" style="margin: 0;box-shadow: 0px 2px 6px 1px #868686;margin-bottom: 3px;position: absolute;height: 65px; z-index: 1111; width: 100%; background: white;">
+          <div class="col-sm-2 col-md-2 col-lg-2" style="text-align: center; padding: 10px;">
+            
+                  <img style="width:150px" src={{this.logo_1}} alt="AVATAR">
+          </div>
+          <div class="col-sm-6 col-md-6 col-lg-6" >         
+                <div style="text-align: right;padding-top: 20px;">         
+                        <span style="font-size: 18px; font-weight: 400; color: #2a2828; padding-right: 30px;cursor:pointer;font-weight:500">Become a Reseller</span>
+                        <span style="font-size: 18px; font-weight: 400; color: #767474;">Support Contact</span>
+                        <span style="font-size: 18px; font-weight: 500; padding-left: 20px;"><a>{{supportContact}}</a></span>
+                        <!-- {{supportContact}} -->
+                </div>
+          </div>
+          <div class="col-sm-4 col-md-4 col-lg-4">      
+                  <div style="text-align: center;">
+                          <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: -4px; width: 125px; color:blue" (click)="getADemoReq()">Back To Login</button>
+                          <!-- <button type="button" class="btn btn-primary-outline" style="border: 1px solid black; margin-top: 15px;margin-left: 20px;">Go To Site</button> -->
+                          <a type="button" class="btn btn-primary-outline" class="txt1" href={{mainSiteurl}} style="padding-top: 4px;border: 1px solid black; margin-top: 18px; margin-left: 20px; width: 125px; height: 34px; text-align: center; border-radius: 4px;">Go to Site</a>
+                          <!-- <i title="Shop Tracker" class="fas fa-shopping-cart" style="cursor: pointer;float: right; font-size: 25px; padding: 24px 10px 0px 0px; color: #2db4c1;" (click)="backtoLogin()"></i> -->
+                          <!-- *ngIf="showLink || cpn_showLink || saanvi_showLink" -->
+                  </div>
+          </div>            
+  </div>
+  <div class="row" style="max-height: 100vh; padding-top: 4%;height: 100vh; margin-left: 200px; margin-right: 200px; background: white; overflow: auto;">
+    <div class="col-sm-12 col-md-12 col-lg-12"> 
+      <div class="row" style="background: whitesmoke;height:93vh">
+        <!-- below this card -->
+        <div class="col-sm-4 col-md-4 col-lg-4" *ngFor = "let productCard of ProductArr" style="padding:0">
+          <div class="row" style="margin:10px 10px 0px 10px ;padding-bottom: 10px;box-shadow: 1px 2px 4px 0px #5f5d5d;border-radius: 2px;background: white;" >
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <!-- <div class="row" style="float: right; font-size: 20px; padding-top: 10px;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <i class="far fa-heart"></i>
+                </div>
+              </div> -->
+              <div class="row" style="text-align:center" (click)="showProductDetail(productCard)">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-top: 10px;">   
+                  <div id="toast">
+                    <div id="desc">{{data_descip}}</div>
+                  </div>
+                 <!-- Image wala part -->
+                 <!-- <img src="../assets/images/trackerImages/AIS140.png" alt="Tracker" style="cursor: pointer;width:200px"> -->
+                 <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
+                  <div class="carousel-inner">
+                    <div class="carousel-item active" *ngFor= "let image of productCard.imageUrl">
+                      <img class="d-block w-100" style="height: 220px;" src="{{image}}" alt="First slide">
+                    </div>
+                  </div>
+                  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Previous</span>
+                  </a>
+                  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="sr-only">Next</span>
+                  </a>
+                </div>
+                </div>
+              </div>
+              <div class="row" style="text-align: center; font-weight: 500; font-size: 20px;padding-top: 15px;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                <!-- device name wala part -->
+                <p>{{productCard.device_name?productCard.device_name:''}}</p>
+                </div>
+              </div>
+              <div class="row" style="padding-bottom: 15px;text-align: center;font-weight: 500;">
+                <div class="col-sm-6 col-md-6 col-lg-6">
+                  <p style="margin-bottom: 0;font-size: 12px;color: grey;">Price</p>
+                  <span>INR</span>    
+                 <span>{{productCard.price?productCard.price:""}}</span>
+                </div>
+                <div class="col-sm-6 col-md-6 col-lg-6">   
+                  <p style="margin-bottom: 0;font-size: 12px;color: grey;">Discount Price</p>
+                  <span>INR</span>    
+                  <span>{{productCard.discountPrice?productCard.discountPrice:''}}</span>     
+                </div>
+              </div>
+              <div class="row" style="text-align: center;">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <button *ngIf="productCard.addToCart ===false" style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="addtocart(productCard)">{{'Add to Cart' | translate}}</button>
+                  <button *ngIf="productCard.addToCart ===true" style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="removeFromCart(productCard)">{{'Remove Cart' | translate}}</button>
+              <!-- add to cart wala part  -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div> 
+          <!-- below this card -->
+      </div>
+    </div>
+  </div>
+  </div>
\ No newline at end of file
diff --git a/src/app/product-shop/product-shop.component.scss b/src/app/product-shop/product-shop.component.scss
new file mode 100644
index 0000000..dc1eca7
--- /dev/null
+++ b/src/app/product-shop/product-shop.component.scss
@@ -0,0 +1,55 @@
+.topDiv{
+  
+    background: whitesmoke;
+    height: 100vh;
+  }
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 200px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
\ No newline at end of file
diff --git a/src/app/product-shop/product-shop.component.spec.ts b/src/app/product-shop/product-shop.component.spec.ts
new file mode 100644
index 0000000..c05f50b
--- /dev/null
+++ b/src/app/product-shop/product-shop.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductShopComponent } from './product-shop.component';
+
+describe('ProductShopComponent', () => {
+  let component: ProductShopComponent;
+  let fixture: ComponentFixture<ProductShopComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductShopComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductShopComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-shop/product-shop.component.ts b/src/app/product-shop/product-shop.component.ts
new file mode 100644
index 0000000..b46177a
--- /dev/null
+++ b/src/app/product-shop/product-shop.component.ts
@@ -0,0 +1,262 @@
+import { Component, OnInit } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-product-shop',
+  templateUrl: './product-shop.component.html',
+  styleUrls: ['./product-shop.component.scss']
+})
+
+
+export class ProductShopComponent implements OnInit {
+  showNav: boolean;
+  showMenu = environment.showLandingpageMenu;
+  dev_url=environment.hostUrl;
+  url: string;
+  userData: any;
+  logo_1: string;
+  organisationName: any;
+  supportContact: any;
+  text: any;
+  backgroundImage: string;
+  requestDemo : boolean = false; 
+  demoString = "Demo Request"; 
+  cpn_showLink: boolean =false;
+  showLink: boolean;
+  mainSiteurl:any; 
+  saanvi_showLink: boolean = false;
+  cartButton = false;
+
+  ProductArr =[];
+  data_descip: string;
+
+  constructor(private dataService: ContactService,private router: Router) { 
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0]; 
+        
+    if(split2 == "www.oneqlik.in"){ 
+      this.showLink = true;
+      this.mainSiteurl  = 'https://www.oneqlik.in/telematics/';
+      this.backgroundImage = '../../assets/image/login_bg.jpg';
+      this.logo_1  = '../../assets/image/f_logo.jpg' ; 
+    }else{  
+      console.log("Inside showlink false");
+      this.showLink = false;
+    }
+
+    if(split2 == "login.cpntrack.com"){ 
+
+      this.cpn_showLink = true;
+      this.mainSiteurl  = 'http://www.cpntrack.com/';
+    
+    }
+
+    if((split2 == "saanvisecurity.in")||(split2 == "www.saanvisecurity.in")){
+      this.saanvi_showLink = true;
+      this.mainSiteurl  = 'http://site.saanvisecurity.in';
+    }
+   
+  }
+
+
+cartValue=[];
+  ngOnInit() {
+    let split1 = document.URL.split('//')[1];
+    let split2 = split1.split('/')[0];
+    this.url = split2;
+
+    this.dataService.dealerInfo(this.url).subscribe(
+      data => {
+        this.userData = data 
+      if(this.url != 'www.oneqlik.in'){    
+        this.logo_1    =  this.dev_url+this.userData.logo; 
+      }
+      
+        this.organisationName = (this.url == 'www.oneqlik.in')?'OneQlik':this.userData.organisationName  ; 
+        this.supportContact = this.userData.contact_support?this.userData.contact_support : ''; 
+
+
+        this.text=this.userData.text;
+       
+      },err=>{
+        this.backgroundImage = '../../assets/image/login_bg.jpg' ;
+     
+      }) 
+
+    
+    for(var i = 0; i <this.showMenu.length;i++){
+      if (this.url == this.showMenu[i]) {
+        this.showNav = true;
+        return;
+      } else {
+        this.showNav = false;
+      }
+    }
+
+    this.getProducts();
+  
+
+  }
+  message:any;
+
+  getADemoReq(){
+    this.router.navigateByUrl("login");
+  }
+
+
+  addtocart(productObject){
+    productObject['addToCart'] = true;
+    // this.cartValue=[];
+    this.cartValue.push(productObject);
+    console.log(this.cartValue);
+    // productObject['cartValue'] = this.cartValue ; 
+    localStorage.setItem('addedToCart',JSON.stringify(this.cartValue));
+    // this.router.navigateByUrl("product-shop/product-overview");
+    this.data_descip = 'Product added to Cart';
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+   
+    }
+
+
+    launch_toast();
+  }
+
+  removeFromCart(pOj){
+    pOj['addToCart'] = false;
+    this.data_descip = 'Product Removed from Cart';
+    var padded  =  localStorage.getItem('addedToCart');
+    console.log('productAdded',padded);
+    if(padded != undefined){
+      var prodAdd = JSON.parse(padded);
+      for(var  y = 0 ; y<(prodAdd).length; y++){
+        if(pOj.raw._id  === prodAdd[y].raw._id){
+          prodAdd.splice(y,1);
+          localStorage.setItem('addedToCart',JSON.stringify(prodAdd));
+        }
+      }
+    }
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+   
+    }
+    launch_toast();
+
+
+  }
+
+  showProductDetail(pObj){
+    localStorage.setItem('products',JSON.stringify(pObj)); 
+    this.router.navigateByUrl("product-shop/product-overview");
+  }
+
+
+
+  getProducts(){
+    this.ProductArr = [];
+    this.dataService.getProducts().subscribe(res=>{
+      console.log('productDetail=>',res);
+      var tempArr = res;
+      for(var i=0;i< tempArr.length;i++){
+        var tempObj ={
+          device_name : tempArr[i].Product_name,
+          price : tempArr[i].price ,
+          discountPrice : getdisCountPrice(tempArr[i].discount_price,tempArr[i].price),
+          imageUrl : getImageUrl(tempArr[i].Images,tempArr[i].productImages),
+          raw : tempArr[i],
+          addToCart:false
+        }
+        this.ProductArr.push(tempObj);
+
+      }
+  
+      var productAdded  =  localStorage.getItem('addedToCart');
+      console.log('productAdded',productAdded);
+      if(productAdded != undefined){
+            var crtVal = JSON.parse(productAdded);
+            console.log(crtVal);
+           for(var j = 0 ; j<crtVal.length;j++){
+           
+            this.cartValue.push(crtVal[j]);    
+            for(var z=0;z<this.ProductArr.length;z++){
+              if(this.ProductArr[z].raw._id === crtVal[j].raw._id){
+                console.log("Inside Right Function");
+                this.ProductArr[z].addToCart = crtVal[j].addToCart;
+              }
+            }  
+          }
+      }
+      console.log('this.ProductArr',this.ProductArr);
+      //   if(this.message.cartValue != undefined){
+      //     for(var j = 0 ; j<this.message.cartValue.length;j++){
+      //       this.cartValue.push(this.message.cartValue[j]);
+      //     }
+      //   }     
+     console.log(this.ProductArr);
+    })
+    function getdisCountPrice(dPrice,price){
+      if((dPrice === undefined)||(price === undefined)){
+            return 0;
+      }else if((dPrice === undefined)){
+        return price.toFixed(2);
+
+      }else{
+        var numVal1 = Number(price);
+        var numVal2 = Number(dPrice) / 100;
+        var totalValue = numVal1 - (numVal1 * numVal2) ; 
+        return totalValue.toFixed(2);
+      }
+
+    }
+
+
+    function getImageUrl(i1,i2){
+      var tArr = [];
+      if(i1 != undefined){
+        tArr = i1;
+      }
+      if(i2 != undefined){
+        tArr = i2;
+      }            
+       
+      if(tArr.length === 0){
+        var urlDefault ='../../assets/image/noImage.png'
+          return [urlDefault];
+      }else{
+        return urlLink();
+      }
+
+      function urlLink(){
+        for(var j =0 ; j <tArr.length ; j++){
+          var str = 'http://www.oneqlik.in/';
+          var shortenUrl = tArr[j].split('/');
+          var shortenUrl_1 = shortenUrl[1] + '/' + shortenUrl[2] + '/' + shortenUrl[3];
+          var furl = str + shortenUrl_1 ; 
+        }
+     
+        return [furl] ; 
+      }
+                
+    }
+    
+  }
+
+  // getProduct_overview(){
+
+  //   this.router.navigateByUrl("product-shop/product-overview");
+
+  // }
+
+  
+}
diff --git a/src/app/product-summary/add-product/add-product.component.html b/src/app/product-summary/add-product/add-product.component.html
new file mode 100644
index 0000000..ec3a69b
--- /dev/null
+++ b/src/app/product-summary/add-product/add-product.component.html
@@ -0,0 +1,176 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <i class="fas fa-arrow-circle-left" (click)="goback()" title="Go Back" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
+      <!-- <button style="background-color: #f9f6f6; font-size: 10px; color: black; float: left; margin-left: 10px;" md-raised-button (click)="addexpense()">{{'ADD EXPENSE' | translate}}</button> --> 
+      <h4>{{'Add Product' | translate}}</h4>
+    </div>
+  </div> 
+  <div class="row" style="margin: 0;  padding: 0 200px 0 200px;height: 86vh; overflow: auto;">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row" style="background: white;box-shadow: 0px 1px 5px 0px #b2b0ae;padding: 40px;">
+        <div class="col-sm-12 col-md-12 col-lg-12"> 
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="text" [(ngModel)]="productId" placeholder="{{'Enter Product id' | translate}}" name="product_id" required>
+                <md-error class="pattern">{{'Please Enter Product ID' | translate}}</md-error>
+            </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="text" [(ngModel)]="Product_name" placeholder="{{'Enter Product Name' | translate}}" name="productname" required>
+                <md-error class="pattern">{{'Please Enter Product Name' | translate}}</md-error>
+            </md-form-field>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="number" [(ngModel)]="price" placeholder="{{'Enter Price' | translate}}" name="price" required>
+                <md-error class="pattern">{{'Please Enter Price' | translate}}</md-error>
+            </md-form-field>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-form-field class="example-full-width width" style="width:100%">
+                <input mdInput type="number" [(ngModel)]="discount" placeholder="{{'Enter Discount' | translate}}" name="productname" >
+                <md-error class="pattern">{{'Please Enter Discount' | translate}}</md-error>
+            </md-form-field>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-select class="example-full-width width" style="width:100%" [(ngModel)]="productStatus" placeholder="{{'Product Status' | translate}}">
+                <md-option *ngFor="let status of pStatus" [value]="status">{{status}}</md-option>
+            </md-select>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <md-select class="example-full-width width" style="width:100%" [(ngModel)]="productCategory" placeholder="{{'Product Category' | translate}}">
+                <md-option *ngFor="let catgry of category" [value]="catgry">{{catgry}}</md-option>
+            </md-select>
+            </div>
+          </div>
+          <div class="row" style="max-height: 250px; overflow: auto; overflow-x: hidden;"> 
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 30px 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-6 col-md-6 col-lg-6" style="padding: 0px 100px 0 15px;">
+                  <p style="font-weight:500">Upload Product Image</p>
+                </div>
+                <div class="col-sm-12 col-md-12 col-lg-6"  style="padding: 0px 0px 0 100px;">
+                       <button mdTooltip="upload Documents"  style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right;padding-right: 12px;" (click)="AddDocumentsField('addedrow')"><md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon></button> 
+                </div>
+              </div>
+              <div class="row" *ngFor="let data of imageuploadObject; let i = index">
+                <div class="col-sm-8 col-md-8 col-lg-8" style="display: flex;">     
+                  <input type="file" class="btn btn btn-success" style ="background: #f1f1f1;border: none;color: black;margin-right: 2%;width:55%;" (change)="onFileChanged($event)" >
+                  <i class="material-icons" (click)="onUpload(i)" style="font-size:30px;color: green;cursor:pointer;margin-left: 50px;"> cloud_upload </i>
+                </div>
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-top:10px">
+                  <md-icon style="float: right;width:25px;height:25px;color:red; cursor:pointer" (click)="DeleteDocumentsField(i)" mdTooltip="Delete Image">delete</md-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 30px 100px 0 100px; font-size: 16px; font-weight: 500;">
+              <p>Product Specifications </p>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+                    <input mdInput type="number" [(ngModel)]="currentStock" placeholder="{{'Enter Current Stock' | translate}}" name="currentStock" required>
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+                    <input mdInput type="text" [(ngModel)]="itmeWeight" placeholder="{{' Item Weight' | translate}}" name="itemWeight" >
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+                    <input mdInput type="text" [(ngModel)]="packageDimension" placeholder="{{'Package Dimension' | translate}}" name="itemWeight" >
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+                    <input mdInput type="text" [(ngModel)]="battery" placeholder="{{'Battery' | translate}}" name="Battery" >
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+                    <input mdInput type="text" [(ngModel)]="model_number" placeholder="{{'Model Number' | translate}}" name="modelnumber" >
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">       
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <md-form-field class="example-full-width width" style="width:100%">
+              <!-- <input mdInput type="text" [(ngModel)]="additionalSpec" placeholder="{{'Additional Specifications' | translate}}" name="addspec" > -->
+                    <textarea mdInput type="text" [(ngModel)]="additionalSpec" placeholder="{{'Additional Specifications' | translate}}" name="addspec"></textarea>
+                </md-form-field>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">   
+                <div class="col-sm-12 col-md-12 col-lg-12"></div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">          
+                <div class="col-sm-12 col-md-12 col-lg-12"></div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">
+               
+                <div class="col-sm-12 col-md-12 col-lg-12"></div>
+              </div>
+            </div>
+            <div class="col-sm-12 col-md-12 col-lg-6" style="padding: 0 100px 0 100px;">
+              <div class="row">    
+                <div class="col-sm-12 col-md-12 col-lg-12"></div>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="text-align: center;padding-top: 20px;margin:0px">
+            <div class="col-sm-12 col-md-12 col-lg-12" >
+                <button style="background-color:rgb(48, 100, 197);color:#fdfdfd;width: 135px;" md-raised-button (click)="ProductSave()">{{'SAVE' | translate}}</button>
+                <button style="background-color: #d81111;color:#fdfdfd;width: 135px;" md-raised-button (click)="goback()">{{'CANCEL' | translate}}</button>
+            </div>
+        </div>
+        </div>  
+      </div> 
+    </div>
+  </div> 
+</div>
\ No newline at end of file
diff --git a/src/app/product-summary/add-product/add-product.component.scss b/src/app/product-summary/add-product/add-product.component.scss
new file mode 100644
index 0000000..0fe5fac
--- /dev/null
+++ b/src/app/product-summary/add-product/add-product.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/product-summary/add-product/add-product.component.spec.ts b/src/app/product-summary/add-product/add-product.component.spec.ts
new file mode 100644
index 0000000..06ef52d
--- /dev/null
+++ b/src/app/product-summary/add-product/add-product.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddProductComponent } from './add-product.component';
+
+describe('AddProductComponent', () => {
+  let component: AddProductComponent;
+  let fixture: ComponentFixture<AddProductComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddProductComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddProductComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-summary/add-product/add-product.component.ts b/src/app/product-summary/add-product/add-product.component.ts
new file mode 100644
index 0000000..e1759f2
--- /dev/null
+++ b/src/app/product-summary/add-product/add-product.component.ts
@@ -0,0 +1,147 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MdSnackBar, MdDialog } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-add-product',
+  templateUrl: './add-product.component.html',
+  styleUrls: ['./add-product.component.scss']
+})
+export class AddProductComponent implements OnInit {
+  productId : any;
+  Product_name : any;
+  price :any;
+  discount:any;
+  currentStock:any;
+  productStatus:any = 'Active';
+  pStatus =['Active','Inactive'];
+  spec1 :any;
+  category = ['Personal Tracker','Vehicle Tracker', 'Asset Tracker','Pet Tracker'];
+  itmeWeight :any ;
+  // pspecification = [{label :"testlabel",nModel :this.spec1,pholder:"this is placeholder", name : "test"}];
+  productCategory : any; 
+  useridd: any;
+  packageDimension:any;
+  battery:any;
+  model_number:any;
+  additionalSpec:any;
+  productImages: any=[];
+
+
+  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService,private router: Router, private route: ActivatedRoute) {
+    var  initialObj = {
+      doctype:'',
+      image:'',
+      phone:''
+    }
+    this.imageuploadObject.push(initialObj);
+
+   }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+
+
+  goback(){
+    this.router.navigateByUrl("product-summary");   
+  }
+
+
+  ProductSave(){  
+    // console.log(this.pspecification);
+    console.log('product saved');
+
+    var product_specification = {
+      packageDimension: this.packageDimension,
+      battery: this.battery,
+      model_number: this.model_number,
+      additionalSpec: this.additionalSpec,
+      itemWeight  :  this.itmeWeight
+    }
+
+    var productPayload ={
+      productId : this.productId,
+      productName : this.Product_name,
+      category : this.productCategory,
+      price : this.price,
+      discountPrice : this.discount,
+      status : this.productStatus,
+      sellerId : this.useridd,
+      curr_stock : this.currentStock,
+      update_date : new Date(),
+      posteBy : this.useridd,
+      product_specification : product_specification
+    
+    }
+
+    if(this.productImages.length !=0){
+      productPayload['productImages'] =this.productImages ; 
+
+    }
+
+    this.contactService.ProductSave(productPayload).subscribe(res=>{
+        console.log(res);
+    },err=>{
+        console.log(err);
+    })
+  }
+
+  selectedFile: File;
+  imageuploadObject : any = [];
+  uploadStatus:any ='UPLOAD';
+  
+  onUpload(imgIndex) {
+  
+    const fd = new FormData();
+    console.log("selected file name =>",this.selectedFile.name);
+
+      fd.append('photo',this.selectedFile,this.selectedFile.name)
+      console.log("imgURL=>",fd) ;
+      // uploadTrackerImage
+      this.contactService.imageuploadTracker(fd)
+      .subscribe(res=>{
+        console.log(res);
+        var resImage ='';
+        resImage = res['_body'];
+        console.log(res['_body']);
+        this.imageuploadObject[imgIndex].image = resImage;
+        this.productImages.push(resImage);
+         console.log(this.imageuploadObject);
+     
+      },err=>{
+       
+      })
+    
+   }
+
+   docRow : boolean = true
+   DeleteDocumentsField(index : any){
+    console.log(this.imageuploadObject.length);
+    if(this.imageuploadObject.length != 1){
+      this.docRow = false;
+      this.imageuploadObject.splice(index, 1);
+      this.productImages.splice(index, 1);
+    }
+
+  }
+
+  AddDocumentsField(addedRow:any){
+    console.log("Inside function !!!");
+      if(addedRow){    
+        this.docRow = true;
+      }
+       var obj={doctype:'',image:'',phone:''};
+       this.imageuploadObject.push(obj);
+       console.log(this.imageuploadObject);
+  }
+
+  onFileChanged(event) { 
+    this.selectedFile = <File>event.target.files[0];
+    console.log('this.selectedFile',this.selectedFile); 
+  }
+
+  
+
+}
diff --git a/src/app/product-summary/product-summary.component.html b/src/app/product-summary/product-summary.component.html
new file mode 100644
index 0000000..61100bc
--- /dev/null
+++ b/src/app/product-summary/product-summary.component.html
@@ -0,0 +1,41 @@
+
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <i class="fas fa-plus-circle" (click)="addProduct()" title="ADD PRODUCT" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Product Summary' | translate}}</h4>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">product_id</th>
+                        <th style="text-align:left;">Product_name</th>
+                        <th style="text-align:left;">Category</th>
+                        <th style="text-align:left;">Location</th>
+                        <th style="text-align:left;">Discount</th>
+                        <th style="text-align:left;">Status</th>
+                        <th style="text-align:left;">Current Stock</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/product-summary/product-summary.component.scss b/src/app/product-summary/product-summary.component.scss
new file mode 100644
index 0000000..0fe5fac
--- /dev/null
+++ b/src/app/product-summary/product-summary.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/product-summary/product-summary.component.spec.ts b/src/app/product-summary/product-summary.component.spec.ts
new file mode 100644
index 0000000..5959fa7
--- /dev/null
+++ b/src/app/product-summary/product-summary.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProductSummaryComponent } from './product-summary.component';
+
+describe('ProductSummaryComponent', () => {
+  let component: ProductSummaryComponent;
+  let fixture: ComponentFixture<ProductSummaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProductSummaryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProductSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/product-summary/product-summary.component.ts b/src/app/product-summary/product-summary.component.ts
new file mode 100644
index 0000000..8a04559
--- /dev/null
+++ b/src/app/product-summary/product-summary.component.ts
@@ -0,0 +1,169 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { Router, ActivatedRoute } from '@angular/router';
+
+
+declare var $:any; 
+
+@Component({
+  selector: 'app-product-summary',
+  templateUrl: './product-summary.component.html',
+  styleUrls: ['./product-summary.component.scss']
+})
+export class ProductSummaryComponent implements OnInit {
+  Fromdate: any;
+  todate: any;
+  superAdmin: any;
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  mb: any;
+  useridd: any;
+  custtype: any;
+  deviceArr: any;
+
+  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService,private router: Router, private route: ActivatedRoute,) { }
+  identifier : any= "product_summary";
+  Load : boolean = false;
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  }
+
+  addProduct(){
+    this.router.navigateByUrl("product-summary/add_product");   
+  }
+
+  getReport(ev){
+    console.log(ev);
+
+  }
+
+  tabelObj:any; 
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              console.log('temptemptemptemptemp',dataTablesParameters);
+                var deviceID;
+                that.Load = true;
+               
+
+           
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              var suburl = "";
+              suburl += "/notifs/ignitionReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+  
+              if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+                that.contactService.get(suburl).subscribe(resp => {   
+                
+                  that.Load = false;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+  
+              }else{
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+            
+          },  
+        
+            "columns": [
+                {
+                    "data": "vehicleName",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "switch",
+                    render: function(data, type, row) {
+                      return data?data:'';        
+                    }
+                },
+                {
+                   "data": "timestamp",
+                    render: function(data, type, row) {
+                      data?data:''; 
+                  
+                    }
+                },          
+              {
+                "data": "address",
+                "defaultContent": "_id",
+                render: function(data, type, row) {        
+                  return data?data:""
+                }
+            }    
+            ,
+            {
+              "data": "address",
+              "defaultContent": "_id",
+              render: function(data, type, row) {        
+                return data?data:""
+              }
+          }    ,
+          {
+            "data": "address",
+            "defaultContent": "_id",
+            render: function(data, type, row) {        
+              return data?data:""
+            }
+        }    ,   {
+          "data": "address",
+          "defaultContent": "_id",
+          render: function(data, type, row) {        
+            return data?data:""
+          }
+      }                       
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+}
diff --git a/src/app/recharge/recharge.component.html b/src/app/recharge/recharge.component.html
new file mode 100644
index 0000000..131ada9
--- /dev/null
+++ b/src/app/recharge/recharge.component.html
@@ -0,0 +1,3 @@
+<p>
+  recharge works!
+</p>
diff --git a/src/app/recharge/recharge.component.scss b/src/app/recharge/recharge.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/recharge/recharge.component.spec.ts b/src/app/recharge/recharge.component.spec.ts
new file mode 100644
index 0000000..edd64fe
--- /dev/null
+++ b/src/app/recharge/recharge.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RechargeComponent } from './recharge.component';
+
+describe('RechargeComponent', () => {
+  let component: RechargeComponent;
+  let fixture: ComponentFixture<RechargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RechargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RechargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/recharge/recharge.component.ts b/src/app/recharge/recharge.component.ts
new file mode 100644
index 0000000..d05caf7
--- /dev/null
+++ b/src/app/recharge/recharge.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-recharge',
+  templateUrl: './recharge.component.html',
+  styleUrls: ['./recharge.component.scss']
+})
+export class RechargeComponent implements OnInit {
+
+  constructor(private contactSevice:ContactService) { }
+
+  ngOnInit() {
+    // this.getLink()
+  }
+
+  getLink(){
+    this.contactSevice.get('/pullData/getSetuLink?mobileNumber=9481773053').subscribe(res=>{
+      console.log(res);
+      
+    })
+
+  }
+// https://socket.oneqlik.in/pullData/getSetuLink?mobileNumber=9481773053
+}
diff --git a/src/app/report-schedule/report-schedule.component.html b/src/app/report-schedule/report-schedule.component.html
new file mode 100644
index 0000000..8ceef48
--- /dev/null
+++ b/src/app/report-schedule/report-schedule.component.html
@@ -0,0 +1,180 @@
+<app-all-menus></app-all-menus>
+<div class="row tab-pane fade show active">
+<div class="col-xl-12 col-lg-12">
+  <div class="card shadow mb-4" style="margin: 70px 15px 9px 15px;">
+    <!-- Card Header - Dropdown -->
+    <div class="card-header">
+      <!-- <h6 class="m-0 font-weight-bold text-primary text-center">{{'Schedule Report' | translate}}</h6> -->
+      <div  class="row"
+        style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+        <div  class="col-sm-12 col-md-12 col-lg-12">
+          <h4 >{{'Schedule Report' | translate}}</h4>
+      
+        </div>
+      </div>
+    </div>
+    <!-- Card Body enable report scheduler-->
+    <div class="card-body">
+      <form [formGroup]="form" (ngSubmit)="submit()">
+      <div class="row">
+        <!-- <div class="col-4">
+          <div>
+            <label for="enableReport" style="font-weight: 500;">{{'enable report scheduler' | translate}}</label>
+          </div>
+        </div> -->
+        <div class="col-4">
+          <div>
+            <label for="enableReport" style="font-weight: 500;">{{'Enable report scheduler' | translate}}</label>
+            <md-checkbox formControlName="scheduled_excel_report"  name="enableReport"></md-checkbox>
+          </div>
+        </div>
+      </div>
+    <table class="table table-borderless" style="width: 450px;">
+      <thead>
+        <tr class="text-center">
+          <th scope="col">Action</th>
+          <th  scope="col">Report Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td style="text-align: center;">
+            <md-checkbox name="Geofencing" formControlName="Geofencing"></md-checkbox>
+          </td>
+          <td>
+            <label for="Geofencing"  style="font-weight: 500;">{{'Geofencing Report' | translate}}</label>
+          </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="fuel"  formControlName="fuel"></md-checkbox>
+            </td>
+            <td>
+              <label for="fuel" style="font-weight: 500;">{{'Fuel Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="ignition" formControlName="ignition"></md-checkbox>
+            </td>
+            <td>
+              <label for="ignition" style="font-weight: 500;">{{'Ignition Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="overspeed" formControlName="overspeed"></md-checkbox>
+            </td>
+            <td>
+              <label for="overspeed" style="font-weight: 500;">{{'Overspeed Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="rViolation" formControlName="rViolation"></md-checkbox>
+            </td>
+            <td>
+              <label for="rViolation" style="font-weight: 500;">{{'Violation Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="sos" formControlName="sos"></md-checkbox>
+            </td>
+            <td>
+              <label for="sos" style="font-weight: 500;">{{'SOS Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="stoppage" formControlName="stoppage"></md-checkbox>
+            </td>
+            <td>
+              <label for="stoppage" style="font-weight: 500;">{{'Stoppage Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="summary" formControlName="summary"></md-checkbox>
+            </td>
+            <td>
+              <label for="summary" style="font-weight: 500;">{{'Summary Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="trip" formControlName="trip"></md-checkbox>
+            </td>
+            <td>
+              <label for="trip" style="font-weight: 500;">{{'Trip Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="distance" formControlName="distance"></md-checkbox>
+            </td>
+            <td>
+              <label for="distance" style="font-weight: 500;">{{'Distance Report' | translate}}</label>
+            </td>
+          </tr>
+          <tr>
+            <td style="text-align: center;">
+              <md-checkbox name="daily" formControlName="daily"></md-checkbox>
+            </td>
+            <td>
+              <label for="daily" style="font-weight: 500;">{{'Daily Report' | translate}}</label>
+            </td>
+          </tr>
+          </tbody>
+          </table>
+          <label for="exampleInputEmail1" style="font-weight: 500;">{{'Send Mail to' | translate}}</label>
+          <div class="row">
+          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email1.errors }" class="form-control" formControlName="email1"
+               placeholder="Please Enter Frist Email"> 
+                <div *ngIf="submitted && f.email1.errors" class="invalid-feedback">
+                             <div *ngIf="f.email1.errors.email">Email must be a valid email address</div>
+                        </div>
+          </div>
+          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email2.errors }" class="form-control" formControlName="email2" 
+              placeholder="Please Enter Second Email"> 
+               <div *ngIf="submitted && f.email2.errors" class="invalid-feedback">
+                            
+                            <div *ngIf="f.email2.errors.email">Email must be a valid email address</div>
+                        </div>
+          </div>
+          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email3.errors }" class="form-control" formControlName="email3" 
+              placeholder="Please Enter Third Email"> 
+               <div *ngIf="submitted && f.email3.errors" class="invalid-feedback">
+                          <div *ngIf="f.email3.errors.email">Email must be a valid email address</div>
+                        </div>
+          </div>
+          </div>
+          <div class="row mt-3">
+          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email4.errors }" class="form-control" formControlName="email4" 
+              placeholder="Please Enter Fourth Email"> 
+               <div *ngIf="submitted && f.email4.errors" class="invalid-feedback">
+                            <div *ngIf="f.email4.errors.email">Email must be a valid email address</div>
+                        </div>
+          </div>
+          <div class="col-lg-4 col-xl-4 col-sm-12 col-md-6">
+            <input type="email" [ngClass]="{ 'is-invalid': submitted && f.email5.errors }" class="form-control" formControlName="email5" 
+              placeholder="Please Enter Fifth Email"> 
+               <div *ngIf="submitted && f.email5.errors" class="invalid-feedback">
+                            <div *ngIf="f.email5.errors.email">Email must be a valid email address</div>
+                        </div>
+          </div>
+</div>
+         
+          <div class="card-footer text-center mt-3">
+            <button class="btn btn-primary" type="submit">Submit</button>
+          </div>
+
+</form>
+    </div>
+  </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/report-schedule/report-schedule.component.scss b/src/app/report-schedule/report-schedule.component.scss
new file mode 100644
index 0000000..fecda9c
--- /dev/null
+++ b/src/app/report-schedule/report-schedule.component.scss
@@ -0,0 +1,3 @@
+.example-chip-list {
+  width: 100%;
+}
diff --git a/src/app/report-schedule/report-schedule.component.spec.ts b/src/app/report-schedule/report-schedule.component.spec.ts
new file mode 100644
index 0000000..5944320
--- /dev/null
+++ b/src/app/report-schedule/report-schedule.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportScheduleComponent } from './report-schedule.component';
+
+describe('ReportScheduleComponent', () => {
+  let component: ReportScheduleComponent;
+  let fixture: ComponentFixture<ReportScheduleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportScheduleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportScheduleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report-schedule/report-schedule.component.ts b/src/app/report-schedule/report-schedule.component.ts
new file mode 100644
index 0000000..4601de0
--- /dev/null
+++ b/src/app/report-schedule/report-schedule.component.ts
@@ -0,0 +1,121 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-report-schedule',
+  templateUrl: './report-schedule.component.html',
+  styleUrls: ['./report-schedule.component.scss']
+})
+export class ReportScheduleComponent implements OnInit {
+  useridd: any;
+  userData:any
+  form: FormGroup;
+   submitted = false;
+  constructor(public contactService: ContactService,private fb: FormBuilder) {}
+
+
+  ngOnInit() {
+    this.form = this.fb.group({
+      Geofencing: [],
+      scheduled_excel_report: [],
+       fuel: [],
+       ignition: [],
+        overspeed: [],
+        rViolation: [],
+         sos: [],
+          stoppage: [],
+          summary: [],
+           trip: [],
+           distance:[],
+           daily:[],
+           email1: ['',Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
+           email2: ['',Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
+           email3: ['',Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
+           email4: ['',Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
+           email5: ['',Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')],
+        
+    })
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+     this.getUserData() 
+  }
+  get f() { return this.form.controls; }
+  patchValue(){
+    this.form.patchValue({
+       Geofencing: this.userData.report_config.Geofencing,
+        scheduled_excel_report: this.userData.scheduled_excel_report,
+       fuel: this.userData.report_config.fuel,
+       ignition: this.userData.report_config.ignition,
+        overspeed: this.userData.report_config.overspeed,
+        rViolation: this.userData.report_config.rViolation,
+         sos: this.userData.report_config.sos,
+          stoppage: this.userData.report_config.stoppage,
+          summary: this.userData.report_config.summary,
+          daily: this.userData.report_config.Daily,
+          distance: this.userData.report_config.Distance,
+           trip: this.userData.report_config.trip,
+           email1:  (this.userData.report_emailid[0]?this.userData.report_emailid[0]:null),
+           email2:  (this.userData.report_emailid[1]?this.userData.report_emailid[1]:null),
+           email3:  (this.userData.report_emailid[2]?this.userData.report_emailid[2]:null),
+           email4:  (this.userData.report_emailid[3]?this.userData.report_emailid[3]:null),
+           email5:  (this.userData.report_emailid[4]?this.userData.report_emailid[4]:null),
+    })
+  }
+
+  getUserData(){
+    this.contactService.getUserObj(this.useridd).subscribe((res:any)=>{
+      this.userData=res
+      console.log(this.userData);
+       this.patchValue()
+    })
+  }
+   submit(){
+    this.submitted = true;
+
+        // stop here if form is invalid
+        if (this.form.invalid) {
+            return;
+        }
+     var emailArray=[this.form.value.email1?this.form.value.email1:null,this.form.value.email1?this.form.value.email2:null,
+      this.form.value.email1?this.form.value.email3:null,this.form.value.email1?this.form.value.email4:null,this.form.value.email1?this.form.value.email5:null]
+     console.log(emailArray,"sdsdsds")
+     
+      for(var i=0;i<emailArray.length;i++){
+        if(emailArray[i]==null){
+          emailArray.splice(i,1);
+        }
+      }
+   
+
+     const newContact ={
+      uid:this.useridd,
+      reportSchedule:true,
+      scheduled_excel_report:this.form.value.scheduled_excel_report?this.form.value.scheduled_excel_report:false,
+      report_config:{
+         fuel: this.form.value.fuel?this.form.value.fuel:false,
+         ignition: this.form.value.ignition?this.form.value.ignition:false,
+         overspeed: this.form.value.overspeed?this.form.value.overspeed:false,
+         rViolation: this.form.value.rViolation?this.form.value.rViolation:false,
+         sos: this.form.value.sos?this.form.value.sos:false,
+         stoppage: this.form.value.stoppage?this.form.value.stoppage:false,
+         summary: this.form.value.summary?this.form.value.summary:false,
+         trip: this.form.value.trip?this.form.value.trip:false,
+         Geofencing:this.form.value.trip?this.form.value.Geofencing:false,
+         Distance:this.form.value.distance?this.form.value.distance:false,
+         Daily:this.form.value.daily?this.form.value.daily:false,
+
+      },
+      report_emailid:emailArray
+        }
+
+        console.log(newContact);
+        this.contactService.updateuid(newContact) .subscribe(contact => {
+          console.log(contact);
+          this.getUserData()
+
+        })
+
+     
+   }
+
+}
diff --git a/src/app/report/all-menus/all-menus.component.html b/src/app/report/all-menus/all-menus.component.html
new file mode 100644
index 0000000..fba623f
--- /dev/null
+++ b/src/app/report/all-menus/all-menus.component.html
@@ -0,0 +1,510 @@
+<nav class="navbar navbar-expand-lg navbar-light  custom_style" style="z-index: 20;">
+  <!-- <a class="navbar-brand" href="#">Navbar</a> -->
+  <!-- <img src={{this.logo}} > -->
+  <img src={{this.logo}} style="width:140px;padding-left: 10px;height: 50px;">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <!-- <div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }"> style="flex: 1;text-align: center;padding-left: 70px;"paddingLeft-->
+  <div class="collapse navbar-collapse list_style" id="navbarSupportedContent">
+    <div [ngClass]="paddingLeft?'changePadding1':'changePadding'">
+      <div>
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+            <!-- <i class="fas fa-user-shield" style="font-size: 20px;"></i> -->
+            <div data-toggle="dropdown">
+              <i class="fas fa-user-shield" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;
+              padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown" role="button" aria-haspopup="true"
+                aria-expanded="false">
+                {{'Admin' | translate}}
+              </a>
+            </div>
+            <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+
+              <a class="dropdown-item"
+                style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+                *ngIf="superAdmin" (click)="addressList('admin')">{{'Address approval' | translate}}</a>
+              <!-- *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')" -->
+          <li class="dropdown-submenu dropdown_style" *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')">
+            <a class="nav-link dropdown-toggle"
+              style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span
+                style="margin-left: 13px;">Billing</span></a>
+            <ul class="dropdown-menu dropdown_style">
+              <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="billing('report')"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Billing Details' | translate}}</a>
+              </li>
+              <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="deviceList()"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Device List' | translate}}</a>
+              </li>
+              <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="inActiveAdmins()"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Inactive Admins' | translate}}</a>
+              </li>
+
+            </ul>
+          </li>
+
+
+
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="Ddetail('admin')">{{'Driver Master' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="DModel('admin')">{{'Device Model' | translate}}</a>
+          <a *ngIf="superAdmin || custtype" class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="deviceMaster('admin')">{{'Device Master' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="showIMEI" (click)="imeiFind('admin')">{{'IMEI Finder' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin || isOperator" (click)="deviceInventoryList('admin')">{{'Inventory List' | translate}}</a>
+          <li class="dropdown-submenu dropdown_style">
+            <a class="nav-link dropdown-toggle"
+              style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span
+                style="margin-left: 13px;">Installation</span></a>
+            <ul class="dropdown-menu dropdown_style">
+              <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="technician('admin')"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Technicians' | translate}}</a>
+              </li>
+              <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="jobCard('admin')"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Job Card' | translate}}</a>
+              </li>
+
+            </ul>
+          </li>
+          <a class="dropdown-item" *ngIf="superAdmin"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="issueList('admin')">{{'Issue List' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin || custtype" (click)="messageUtility('admin')">{{'Message Utility' | translate}}</a>
+
+          <!-- <a class="dropdown-item" 
+                  style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+                   target="blank" href="https://bills.setu.co/landing/2d9ab1ff-1f1f-478d-a233-0b0cf0bb6faf" (click)="Rechange('admin')">{{'Recharge/Bill Payments' | translate}}</a> -->
+
+
+          <a *ngIf="superAdmin" class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="subAdmin('admin')">{{'Subadmin' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="gpsMaster('admin')">{{'System Logs' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="RTOMaster('admin')">{{'RTO Master' | translate}}</a>
+
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="tutorialVideos('admin')">{{'Tutorial Videos' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="userFinder('admin')">{{'User Finder' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin" (click)="userMaster('admin')">{{'User Master' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            *ngIf="superAdmin || custtype" (click)="VType('admin')">{{'Vehicle Type' | translate}}</a>
+
+
+          <!-- <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin" (click)="censorDetail('admin')">{{'Sensor Details' | translate}}</a> -->
+
+
+          <!-- <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" *ngIf="superAdmin || isOperator" (click)="commandQueue('admin')">{{'Comman Queue' | translate}}</a> -->
+          <!-- commanQueue -->
+      </div>
+
+      </li>
+      <li class="nav-item active hoverStyle" (click)="soon('soon')" style="cursor: pointer;padding-top: 5px;">
+        <i class="fas fa-home" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;">{{'Dashboard' |
+          translate}} <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item hoverStyle" style="cursor: pointer;padding-top: 5px;" (click)="group('group')">
+        <i class="fab fa-audible" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Groups' |
+          translate}}</a>
+      </li>
+      <li class="nav-item dropdown hoverStyle" style="cursor: pointer;padding-top: 5px;">
+        <!-- <i class="fas fa-home" ></i> -->
+        <div data-toggle="dropdown">
+          <i class="fas fa-car" style="color:white"></i>
+          <a class="nav-link dropdown-toggle"
+            style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown"
+            role="button" aria-haspopup="true" aria-expanded="false"> {{'Vehicles' | translate}}</a>
+        </div>
+        <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;;"
+            (click)="devi('devi')">{{'Vehicle List' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="reminder_list('devi')">{{'Maintenance Reminder' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="vehicleExpense('routes')">{{'Vehicle Expense' | translate}}</a>
+          <a *ngIf="superAdmin || custtype" class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="deviceRenew('admin')">{{'Vehicle Renewal Report' | translate}}</a>
+          <a *ngIf="superAdmin || custtype" class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;"
+            (click)="deviceInventory()">{{'Device Inventory' | translate}}</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <div data-toggle="dropdown">
+          <i class="fas fa-road" style="color:white"></i>
+          <a class="nav-link dropdown-toggle"
+            style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown"
+            role="button" aria-haspopup="true" aria-expanded="false">
+            {{'Tracking' | translate}}
+          </a>
+        </div>
+        <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+          <a id="d"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            class="dropdown-item" (click)="openNav('openNav')">{{'Live Tracking' | translate}}</a>
+          <a id="d"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            class="dropdown-item" (click)="TrackingHistory('devi')">{{'History Tracking' | translate}}</a>
+          <!-- <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="livetrack('devi')">{{'OpenMAp' | translate}}</a> -->
+        </div>
+      </li>
+      <li class="nav-item hoverStyle" style="cursor: pointer;padding-top: 5px;" (click)="geo('geo')">
+        <i class="fas fa-bullseye" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important"> {{'Geofencing' |
+          translate}}</a>
+      </li>
+      <!-- <li class="nav-item dropdown hoverStyle" (click)="reports()" style="text-align: center;padding-top: 5px;cursor: pointer;"> 
+          <i class="fas fa-file" style="color:white"></i>
+            <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important"> {{'Reports' |
+              translate}}</a>
+            </li> -->
+      <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <div data-toggle="dropdown">
+          <i class="fas fa-file" style="color:white"></i>
+          <a class="nav-link dropdown-toggle"
+            style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown"
+            role="button" aria-haspopup="true" aria-expanded="false">
+            {{'Reports' | translate}}
+          </a>
+        </div>
+        <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+          <a id="d"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            class="dropdown-item" (click)="reports()">{{'Reports' | translate}}</a>
+          <a id="d"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            class="dropdown-item" (click)="reportScedule()">{{'Schedule Report ' | translate}}</a>
+          <!-- <a id="d" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;" class="dropdown-item" (click)="livetrack('devi')">{{'OpenMAp' | translate}}</a> -->
+        </div>
+      </li>
+      <!-- <div data-toggle="dropdown">
+              <i class="fas fa-file" style="color:white"></i>
+              <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important;cursor: pointer;" id="navbarDropdown" role="button"  aria-haspopup="true" aria-expanded="false">  {{'Reports' |translate}} </a>
+            </div>
+            <div class="dropdown-menu dropdown_style" style="height: auto; overflow-y: auto;max-height: 600px;"
+              aria-labelledby="navbarDropdown">
+              <a *ngIf="this.reportArray[17].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="acReport('report')">{{'AC Reports' | translate}}</a>
+           
+              <a *ngIf="this.reportArray[0].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="report('report')">{{'Daily Reports' | translate}}</a>
+                    
+                    <a *ngIf="this.reportArray[0].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                    padding-bottom: 7px;
+                    font-size: 14px;" (click)="daily_logs('report')">{{'Daily Logs' | translate}}</a>
+              <a *ngIf="this.reportArray[1].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="daywisereport()">{{'Daywise Reports' | translate}}</a>
+                     <a *ngIf="this.reportArray[14].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                     padding-bottom: 7px;
+                     font-size: 14px;" (click)="distance_report('report')">{{'Distance Reports' | translate}}</a>
+                              <a *ngIf="this.reportArray[18].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                              padding-bottom: 7px;
+                              font-size: 14px;" (click)="driverPerformance('report')">{{'Driver Performance Reports' | translate}}</a>
+                    <a *ngIf="this.reportArray[9].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                    padding-bottom: 7px;
+                    font-size: 14px;" (click)="geofancingReport('report')">{{'Geofencing Reports' | translate}}</a>
+                      <a *ngIf="this.reportArray[4].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                      padding-bottom: 7px;
+                      font-size: 14px;" (click)="idleReport('routes')">{{'IDLE Reports' | translate}}</a>
+                           <a *ngIf="this.reportArray[13].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                           padding-bottom: 7px;
+                           font-size: 14px;" (click)="ignition_report('report')">{{'Ignition Reports' | translate}}</a>
+                            <a *ngIf="this.reportArray[21].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                            padding-bottom: 7px;
+                            font-size: 14px;" (click)="loadUnload('report')">{{'Loading Unloading Trip' | translate}}</a>
+                                  <a *ngIf="this.reportArray[13].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                                  padding-bottom: 7px;font-size: 14px;" (click)="notification('notification')">{{'Notification Center' | translate}}</a>
+                            
+              <a *ngIf="this.reportArray[10].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="overspeed('report')">{{'Overspeeding Reports' | translate}}</a>
+                      <a *ngIf="this.reportArray[15].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                      padding-bottom: 7px;
+                      font-size: 14px;" (click)="POI_report('report')">{{'POI Reports' | translate}}</a>
+                         <a *ngIf="this.reportArray[11].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                         padding-bottom: 7px;
+                         font-size: 14px;" (click)="routeViolation('report')">{{'Route variations Reports' | translate}}</a>
+              <a *ngIf="this.reportArray[2].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="report_speed('report')">{{'Speed Variation' | translate}}</a>
+                                
+              <a *ngIf="this.reportArray[8].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+              padding-bottom: 7px;
+              font-size: 14px;" (click)="summaryReport('report')">{{'Summary Reports' | translate}}</a>
+               <a *ngIf="this.reportArray[12].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+               padding-bottom: 7px;
+               font-size: 14px;" (click)="stoppage_report('report')">{{'Stoppage Reports' | translate}}</a>
+                        <a *ngIf="this.reportArray[16].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                        padding-bottom: 7px;
+                        font-size: 14px;" (click)="SOS_report('report')">{{'SOS Reports' | translate}}</a>
+             
+              <a *ngIf="this.reportArray[6].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="trip_report('report')">{{'Trip Reports' | translate}}</a>
+                   
+              <a *ngIf="this.reportArray[7].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                  padding-bottom: 7px;
+                  font-size: 14px;" (click)="travelPath('report')">{{'Travel Path Reports' | translate}}</a>
+      
+     
+          
+     
+                        <a *ngIf="this.reportArray[18].Rstatus == true" class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;
+                        padding-bottom: 7px;
+                        font-size: 14px;" (click)="workingHour('report')">{{'Working Hours Reports' | translate}}</a>
+                        
+                        <a class="dropdown-item" style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;" (click)="mainReport()">{{'Maintenance Reports' | translate}}</a>
+            </div> -->
+      <!-- </li> -->
+      <li class="nav-item dropdown hoverStyle" style="text-align: center" style="cursor: pointer;padding-top: 5px;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <div data-toggle="dropdown">
+          <i class="fas fa-map-marker-alt" style="color:white"></i>
+          <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important"
+            id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            {{'POI List' | translate}}
+          </a>
+        </div>
+        <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown" style="cursor: pointer;"
+          (click)="POIlist('routes')">
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px;padding-bottom: 7px;font-size: 14px;">{{'POI
+            List' | translate}}</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+        <div data-toggle="dropdown">
+          <i class="fab fa-bandcamp" style="color:white"></i>
+          <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important"
+            id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
+            {{'Routes' | translate}} </a>
+        </div>
+        <div class="dropdown-menu dropdown_style" aria-labelledby="navbarDropdown">
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="vehicleRoute('routes')">{{'Route list' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="route_map('routes')">{{'Manage Trips' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="route_plan('route_plan')">{{'Route Plan' | translate}}</a>
+          <a class="dropdown-item"
+            style="cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; font-size: 14px;"
+            (click)="route_planReport('route_plan')">{{'Route Plan Report' | translate}}</a>
+        </div>
+      </li>
+      <li class="nav-item dropdown hoverStyle" style="text-align: center;padding-top: 5px;cursor: pointer;">
+        <div data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
+          <!-- <i class="fab fa-bandcamp" style="color:white"></i> -->
+          <!-- <i class="fa fa-border-all" ></i> -->
+          <i class="fab fa-accusoft" style="color:white"></i>
+          <a class="nav-link dropdown-toggle" style="padding-top: 0px !important;padding-bottom: 10px !important"
+            id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false"> {{'Sensor' | translate}} </a>
+        </div>
+        <!-- <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a> -->
+        <ul class="dropdown-menu" style="padding: 0;">
+          <li class="dropdown-submenu dropdown_style">
+            <a class="nav-link dropdown-toggle"
+              style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> Fuel</a>
+            <ul class="dropdown-menu dropdown_style">
+              <li *ngIf="this.reportArray[3].Rstatus == true" class="dropdown_style" (click)="fuel_report('routes')"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Fuel Chart' | translate}}</a></li>
+              <li *ngIf="this.reportArray[5].Rstatus == true" class="dropdown_style" (click)="dev_fuel_report()"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>{{'Consumption Reports' | translate}}</a></li>
+              <li class="dropdown_style"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                *ngIf="superAdmin || custtype" (click)="VType('admin')"><a>Fuel Calibration</a></li>
+              <li class="dropdown_style" (click)="fuelPrice('admin')"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>Fuel Price</a></li>
+            </ul>
+          </li>
+          <li class="dropdown-submenu dropdown_style">
+            <a class="nav-link dropdown-toggle"
+              style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Temperature</a>
+            <ul class="dropdown-menu dropdown_style">
+              <li class="dropdown_style"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                (click)="censorDetail('admin')"><a>Temperature Chart</a></li>
+              <li class="dropdown_style"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                (click)="tempDetal('admin')"><a>Temperature Report</a></li>
+              <li class="dropdown_style"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+                *ngIf="superAdmin || custtype" (click)="VType('admin')"><a>Calibration</a></li>
+            </ul>
+          </li>
+          <li class="dropdown-submenu dropdown_style">
+            <a class="nav-link dropdown-toggle"
+              style="width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;"
+              data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> RFID</a>
+            <ul class="dropdown-menu dropdown_style">
+              <li class="dropdown_style"
+                style="padding-left: 5px;width: 100% !important;cursor: pointer;border-bottom: 1px solid;padding-top: 7px; padding-bottom: 7px; padding-right: 20px;font-size: 14px;">
+                <a>Rfid Report</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+
+      <li *ngIf="(useridd == '59cbbdbe508f164aa2fef3d8')" class="nav-item hoverStyle" (click)="toll()"
+        style="cursor: pointer;padding-top: 5px;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <i class="fa fa-building" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Toll' |
+          translate}}</a>
+      </li>
+
+      <li *ngIf="isOrganisation" class="nav-item hoverStyle" (click)="adddistributers()"
+        style="cursor: pointer;padding-top: 5px;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <i class="fas fa-user-lock" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Distributors' |
+          translate}}</a>
+      </li>
+      <li *ngIf="superAdmin" class="nav-item hoverStyle" (click)="dealerInfo('dealerInfo')"
+        style="cursor: pointer;padding-top: 5px;">
+        <!-- <i class="fas fa-home" style="color:white"></i> -->
+        <!-- <i class="fas fa-users" style="color:white"></i> -->
+        <i class="fas fa-user" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Dealers' |
+          translate}}</a>
+      </li>
+      <li class="nav-item hoverStyle" *ngIf="cust || superAdmin" (click)="addcus('addcus')"
+        style="cursor: pointer;padding-top: 5px;">
+        <i class="fas fa-users" style="color:white"></i>
+        <a class="nav-link" style="padding-top: 0px !important;padding-bottom: 10px !important;"> {{'Customers' |
+          translate}}</a>
+      </li>
+
+      <!-- <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                    <li><a href="#">Service A</a></li>
+                    <li><a href="#">Service B</a></li>
+                    <li class="dropdown-submenu">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="#">Service C1</a></li>
+                            <li><a href="#">Service C2</a></li>
+                            <li><a href="#">Service C3</a></li>
+                            <li><a href="#">Service C4</a></li>
+                            <li><a href="#">Service C5</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li> -->
+      </ul>
+    </div>
+  </div>
+  <div style=" float: left; padding-top: 10px; ">
+    <p
+      style="margin-top: 0px;margin-bottom:0 ;color: white;margin-left: 20px;border-radius: 20px;background: #fff;color: #212529; font-size: 14px;padding: 0px 5px;font-weight: 600;">
+      {{fs}}</p>
+  </div>
+  <div style="width: 80px; float: right;">
+    <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+      <div class="row" style="margin: 0; margin-bottom: 10px;">
+        <div class="col-3" style="padding: 0;">
+          <div style="text-align: center;">
+            <img *ngIf="!ppSHOW" src="../../assets/userAccount.png" alt="UserImage" height="60" style="width: 100%;">
+            <img *ngIf="ppSHOW" style="border-radius: 50%;" src="{{profilePic}}" alt="UserImage" height="60" width="60"
+              crossorigin="anonymous">
+          </div>
+        </div>
+        <div class="col-9" style="padding-left: 10px !important;font-size: 18px;font-weight: 400;">
+          <div><span>{{fs}}</span><span style="padding-left: 5px;">{{ls}}</span></div>
+          <p style="margin-bottom: 0;">{{mb}}</p>
+          <div *ngIf="availaPointsFlag === true" title="Available Points" style="font-size: 15px;">
+            <span> <i class="fas fa-coins" style="color: #cf6b05;font-size: 18px;"></i></span>
+            <span style="margin-left: 15px;font-weight: 600;color: #656565;">{{pointCount}}</span>
+          </div>
+          <p>{{or}}</p>
+        </div>
+      </div>
+      <div class="row" style="margin: 0;">
+        <div class="col-6">
+          <button type="reset" md-raised-button class="btn btn-default" style="background: #e2e2e2;"
+            (click)="myaccount('myaccount')">{{'My Account' | translate}}</button>
+        </div>
+        <div class="col-6">
+          <button *ngIf="dealer" md-raised-button class="w3-button w3-red" (click)="mydealer('mydealer')">{{'Dealer
+            Account' | translate}}</button>
+          <button *ngIf="sup_admin" md-raised-button class="w3-button w3-red" (click)="super_Admin('mydealer')">{{'Admin
+            Account' | translate}}</button>
+          <button *ngIf="logoutbut" md-raised-button class="btn btn btn-success" style="color:white"
+            (click)="logout()">{{'Log Out' | translate}}</button>
+        </div>
+      </div>
+    </md-menu>
+    <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none;padding-top: 6px;">
+      <i class="fas fa-user" style=" color: white; font-size: 20px;"></i>
+    </button>
+    <app-notification></app-notification>
+  </div>
+  <!-- <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:11%; margin-top: 3%;padding-left:0%">
+          <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+            <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+            <h5>&nbsp;&nbsp;{{mb}}</h5>
+            <h5>&nbsp;&nbsp;{{or}}</h5>
+            <br> &nbsp;
+            <button  type="reset" class="btn btn-default" (click)="myaccount('myaccount')">My Account</button>
+            &nbsp;
+            <button *ngIf="dealer" class="w3-button w3-red" (click)="mydealer('mydealer')">Dealer Account</button> &nbsp;
+            <button *ngIf="sup_admin" class="w3-button w3-red" (click)="super_Admin('mydealer')">Admin Account</button> &nbsp;    
+            <button *ngIf="logoutbut" class="btn btn btn-success" (click)="logout()">&nbsp;&nbsp;&nbsp;Log
+              Out&nbsp;&nbsp;&nbsp;</button> &nbsp;
+          </md-menu>
+          <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none">
+            <img src="../../assets/image/us.jpg" height=24px>
+          </button>
+          <app-notification></app-notification>
+        </ul> -->
+
+  </div>
+
+</nav>
\ No newline at end of file
diff --git a/src/app/report/all-menus/all-menus.component.scss b/src/app/report/all-menus/all-menus.component.scss
new file mode 100644
index 0000000..6ac560a
--- /dev/null
+++ b/src/app/report/all-menus/all-menus.component.scss
@@ -0,0 +1,234 @@
+.custom_style {
+  // position: fixed;
+  // top:0 ;
+  // left:0;
+  // right :0;
+  // background: #2D4262;
+  // padding-top: 0%;
+  // padding-bottom: 0%;
+  // line-height: 2.8;
+  // box-shadow: -1px 7px 7px -5px rgb(48, 68, 99);
+
+  // ================changed style==================
+  position: fixed;
+  background: #2d4262;
+  padding-top: 1%;
+  padding: 0;
+  width: 100%;
+  box-shadow: -1px 7px 7px -5px #304463;
+}
+
+.changePadding {
+  flex: 1;
+  text-align: center;
+  padding-left: 90px;
+}
+
+.changePadding1 {
+  flex: 1;
+  text-align: center;
+  padding-left: 15px;
+}
+
+.list_style {
+  margin-left: 100px;
+  ul {
+    li {
+      a {
+        color: white;
+      }
+    }
+  }
+}
+
+.dropdown_style {
+  //  background:  #b9b7b7 ;
+  // background: linear-gradient(to bottom, #2c3e50,#bdc3c7);
+  // background: #D42021;
+
+  background: #2d4262;
+
+  padding-top: 0;
+  padding-bottom: 0;
+
+  cursor: pointer;
+  a {
+    color: white;
+  }
+}
+
+.dropdown-menu > a:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.hoverStyle:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.nav-item > a:hover {
+  background-color: #2a3132;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(74, 118, 184);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+@media (max-width: 1540px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (min-width: 1366px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .changePadding {
+    padding-left: 0px;
+  }
+  .changePadding1 {
+    padding-left: 0px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(143, 215, 255);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #dadada;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#navbarSupportedContent {
+  margin-left: 100px;
+}
+@media (max-width: 1537px) {
+  #navbarSupportedContent {
+    margin-left: 0px;
+  }
+}
+
+@media (max-width: 1537px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+// @media (min-width:1366px){
+//   .list_style{
+//     font-size: 14px;
+//       }
+
+// }
+// @media (max-width:1476px){
+
+//   .list_style{
+//     font-size: 14px;
+//       }
+// }
+
+// 1366,1440
+
+// .bg-light{
+//   background: #737373;
+
+// }
+
+// .bg-light :hover{
+//   background: #dbd4d4;
+
+// }
+
+// .navbar-nav > li > .dropdown-menu { background-color: #FF0000; }
+//  .dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}
+
+li a.nav-link {
+  width: max-content !important;
+  // padding: 20px 5px !important;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
diff --git a/src/app/report/all-menus/all-menus.component.spec.ts b/src/app/report/all-menus/all-menus.component.spec.ts
new file mode 100644
index 0000000..f94b78b
--- /dev/null
+++ b/src/app/report/all-menus/all-menus.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllMenusComponent } from './all-menus.component';
+
+describe('AllMenusComponent', () => {
+  let component: AllMenusComponent;
+  let fixture: ComponentFixture<AllMenusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AllMenusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AllMenusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/all-menus/all-menus.component.ts b/src/app/report/all-menus/all-menus.component.ts
new file mode 100644
index 0000000..ae30574
--- /dev/null
+++ b/src/app/report/all-menus/all-menus.component.ts
@@ -0,0 +1,907 @@
+// import { Component, OnInit } from '@angular/core';
+
+// @Component({
+//   selector: 'app-all-menus',
+//   templateUrl: './all-menus.component.html',
+//   styleUrls: ['./all-menus.component.scss']
+// })
+// export class AllMenusComponent implements OnInit {
+
+//   constructor() { }
+
+//   ngOnInit() {
+//   }
+
+// }
+
+
+// import { Component, OnInit } from '@angular/core';
+
+// @Component({
+//   selector: 'app-poi-menu',
+//   templateUrl: './poi-menu.component.html',
+//   styleUrls: ['./poi-menu.component.scss']
+// })
+// export class PoiMenuComponent implements OnInit {
+
+//   constructor() { }
+
+//   ngOnInit() {
+//   }
+
+// }
+////////////////////////////
+import { Component, OnInit, Input } from '@angular/core';
+import { Params, Router, ActivatedRoute } from '@angular/router'
+import { ContactService } from '../../contact.service';
+import { TranslateService } from 'ng2-translate';
+import { MdDialog } from '@angular/material';
+import { DemoVideosComponent } from '../../const/demo-videos/demo-videos.component';
+// import { PoiListComponent } from '../poi-list/poi-list.component';
+// import { PoiDtlDelComponent } from "../poi-dtl-del/poi-dtl-del.component";
+// import { MdDialog } from '@angular/material';
+// import { Data } from '../data';
+
+declare var google: any,$:any;
+@Component({
+    selector: 'app-all-menus',
+  templateUrl: './all-menus.component.html',
+  styleUrls: ['./all-menus.component.scss']
+})
+export class AllMenusComponent implements OnInit {
+ // 
+  marker1: any;
+  mapData: any[];
+  routePath: any;
+  before: any;
+  logoutbut: boolean;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  fs: any; ls: any; emailid: any; or: any; useridd: any; mb: any; custtype: any; dealer: any;
+  showImage: any;
+  groups = [];
+  group_info: any;
+  deviceId: any;
+  device_update: any;
+  markerpoi: any;
+  superAdmin: any = false;
+  waypoints_path:any;
+  routeData:any;
+  cnt:any =0;
+  showIMEI=false
+  dbMap:any;
+  dbMapInit:any = false;
+  menuFlag:any ='';
+  isOperator: boolean = false;
+  isOrganisation: boolean = false;
+  reportPrefrecne: any;
+  paddingLeft:boolean=false
+  reportArray = [
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name:"Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:false,value:"stoppage_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:false,value:"ignition_report"},
+    {name : "Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name : "AC Report",Rstatus : true,Astatus:false,value:"ac_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performance_report"},
+    {name : "User Trip Report",Rstatus : true,Astatus:false,value:"user_trip_report"},
+    {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"}  ,
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"} ,
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+  ];
+  availaPointsFlag: boolean = false;
+  pointCount: number = 0;
+  adressTab: boolean=false;
+  phone: any;
+  // ,public dialog: MdDialog
+  constructor(public dialog: MdDialog,private router: Router, private route: ActivatedRoute, private contactService: ContactService,public translate: TranslateService) {
+    this.contactService.totalTicketCount.subscribe(totalTicketCount => {
+        //  this.ticketCount = totalTicketCount
+       this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.phone=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).phn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.ngOnInit()
+     });
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    
+    if(this.useridd=="59cbbdbe508f164aa2fef3d8"){
+      this.showIMEI=true;
+      
+    }
+    console.log("USEERRRR",this.useridd,'59cbbdbe508f164aa2fef3d8', this.showIMEI);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    
+    var routeID = localStorage.getItem('routeId')
+
+    // this.route.params.subscribe((params:Params)=>{
+    // let id= params['routePath._id'];
+    // this.getRouteData(routeID);
+
+    // });
+    
+  }
+  link
+  menuWidth:any;
+  sup_admin:boolean;
+  ngOnInit() {
+    // console.log("Inside all app menu component---------------------------------------------");
+    // this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    if(localStorage.getItem('superadmin')=="ON"){
+      this.sup_admin = true;
+      this.logoutbut = false;
+      this.dealer = false;
+    }
+
+    this.logo = window.localStorage['logo'];
+  
+    // this.text = window.localStorage['text'];
+    // window.localStorage['DataUpdate'] = 'Tthis.rue'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    // this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // // this.routePath = JSON.parse(localStorage.getItem('routeData'));
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.isOperator = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOperator;
+
+    this.reportPrefrecne = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).report_preference;   
+  
+    let that = this;
+    if(this.reportPrefrecne !=undefined){
+    
+      var tempReport = this.reportPrefrecne;
+      console.log(this.reportPrefrecne);
+      
+      for(let dt in tempReport){
+        let arr = that.reportArray.filter(function(d){ 
+          return d.value == dt;
+        })
+        arr[0].Astatus = tempReport[dt]?tempReport[dt].Astatus:false;
+        arr[0].Rstatus = tempReport[dt]?tempReport[dt].Rstatus:false;
+      }
+      
+    }
+
+    
+
+    // console.log("this.reportPrefrecne=>",this.reportPrefrecne);
+  
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    // let foods = [];
+
+    // if (this.mb.charAt(0) == "n") {
+    //   this.mb = ' '
+    // }
+    if (window.localStorage['Custumer'] == 'ON') {
+      // this.logoutbut = true;
+      this.sup_admin =false;
+      this.dealer = true;
+    }else if(window.localStorage['superadmin']=='ON'){
+      this.logoutbut = false;
+    }
+    else {
+      this.logoutbut = true;
+    }
+    
+    this.getLanguage()
+
+
+    this.menuFlag = this.contactService.menuReturnGet();
+    var chkProfilePic = localStorage.getItem('profilePic');
+    // console.log('chkProfilePic',chkProfilePic);
+    if(chkProfilePic == null){
+      this.getProfileImagePath();
+    }else{
+      this.ppSHOW = true; 
+      this.profilePic = chkProfilePic ; 
+    }
+
+    this.availaPointsFlag = false ;
+    if((this.custtype === true)||((this.superAdmin === true)&&(this.isOrganisation === false))){
+      // console.log("Inside FunctionCheckpoint");
+      this.availaPointsFlag = true ;
+      this.getPointAvailable(this.useridd);
+    }
+    this. checkPassword();
+    // if(this.useridd === '59cbbdbe508f164aa2fef3d8'){
+    //   this.adressTab = true;
+    // }
+
+    $(document).on('click', '.dropdown-menu', function (e) {
+      e.stopPropagation();
+    });
+    // this.getLink()
+
+  }
+
+  getLink(){
+    // 9481773053'
+    console.log("PHONE_________-------",this.phone);
+    
+    this.contactService.get('/pullData/getSetuLink?mobileNumber='+this.phone).subscribe((res:any)=>{
+      console.log(res);
+      if(res.link){
+        this.link=res.link
+
+      }
+    })
+  }
+
+//2 menu dashboard 
+  soon(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+  }
+  // 3 menu
+  group(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("group_view");
+  }
+  // 4 menu
+  devi(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("dashboard");
+  }
+
+  productSummary(id){
+    this.router.navigateByUrl("product-summary");
+
+  }
+
+  orderSummary(id){
+    this.router.navigateByUrl("orderSummary");
+
+  }
+
+  tempDetal(id){
+    this.router.navigateByUrl("device-report/temp_report");
+
+  }
+  //5 menu
+  openNav(id) {
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationComponent'}});
+  }
+
+
+
+  //6 menu
+  geo(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("geofencing");
+  }
+  // 7 menu 
+  report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report");
+
+  }
+
+  daywisereport(){
+    this.router.navigateByUrl("device-report/daywise-report");
+  }
+  subAdmin(){
+    this.router.navigateByUrl("suAdmin");
+  }
+
+    
+  vehicleExpense(id){
+    this.router.navigateByUrl("vehicleExpense");
+  }
+
+  temp_report(id){
+    this.router.navigateByUrl("device-report/tempGraph");
+  }
+
+  commandQueue(id){
+    this.router.navigateByUrl("commanQueue");
+  }
+
+  addressList(id){
+    this.router.navigateByUrl("addreessUpdate");
+  }
+
+
+  censorDetail(id){
+    this.router.navigateByUrl("censor");
+
+  }
+  fuelPrice(id){
+    console.log(id);
+      this.router.navigate(["/FuelPrice"]);
+  }
+
+  daily_logs(){
+    this.router.navigateByUrl("device-report/dailyLogs");
+  }
+
+  workingHour(id){
+    this.router.navigateByUrl("workhourReport");
+  }
+
+  reminder_list(id)
+  {
+    this.router.navigateByUrl("vehicle/reminder_service");
+
+  }
+
+  
+
+  TrackingHistory(id){
+    // this.menuFlag =  this.contactService.menuReturnSet(id);
+    // this.router.navigateByUrl("location/live-history");
+
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationHistory'}});
+  }
+
+
+  dev_fuel_report(){
+    this.router.navigateByUrl("device-report/dev-fuel-report");
+  }
+
+  POI_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/POI_report");
+  }
+
+  SOS_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/devicesosReport");
+  }
+
+
+  //8
+  report_speed(id) {
+
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  //9
+  trip_report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/trip_report");
+//10
+  }
+
+  acReport(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/ac_report");
+  }
+  summaryReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  //11
+  geofancingReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+//12
+
+travelPath(id){
+  // TravelPathReportComponent
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/travel_path");
+}
+
+messageUtility(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("messageUtility");
+}
+Rechange(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  // this.router.navigateByUrl("recharge");
+}
+
+billing(id){
+
+  this.router.navigateByUrl("billingDashboard");
+}
+
+overspeed(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+//13
+routeViolation(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/routeViolation");
+}
+
+mainReport(){
+  this.router.navigateByUrl("maintananceReport");
+  
+}
+
+idleReport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/idle-report");
+}
+//14
+stoppage_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/stoppage_report");
+}
+//15
+ignition_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/ignition_report");
+}
+//16
+
+distance_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/distance_report");
+}
+//17
+alert_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+POIlist(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("POI_list");
+}
+
+userTrip(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/deviceTrip");
+
+}
+
+driverPerformance(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+//18
+
+vehicleRoute(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("vehicleRoute");
+}
+
+
+//19
+route_map(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+route_plan(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlan");
+}
+
+route_planReport(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlanReportNew");
+}
+//20
+addcus(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  localStorage.removeItem('mapLoad_ID')
+  this.router.navigateByUrl("add");
+}
+//21
+Ddetail(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("driverdetail");
+}
+
+userMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("userLogs");
+}
+
+cssupport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cus_support");
+}
+
+adddistributers(){
+  this.router.navigateByUrl("distributersList");
+}
+
+deviceMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceMaster");
+}
+
+deviceRenew(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("RenewReport");
+}
+deviceInventory(){
+  this.router.navigateByUrl("deviceInventory");
+}
+gpsMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("gpsMaster");
+
+}
+
+technician(id){
+   this.router.navigateByUrl("technician");
+}
+
+jobCard(id)
+{
+   this.router.navigateByUrl("JobCard");
+}
+
+cmdMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cmdMaster");
+
+}
+
+deviceEntry(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceEntry");
+}
+
+deviceInventoryList(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("Inventorylist");
+}
+//22
+poiMenu(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("poimenu");
+}
+//23
+myaccount(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("accountSettings");
+}
+
+loadUnload(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/tripLoadUnload");
+
+}
+
+
+load_management(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("loadManagement");
+}
+
+// LR_Number(id){
+//   this.menuFlag =  this.contactService.menuReturnSet(id);
+//   this.router.navigateByUrl("lrinput");
+// }
+
+fuel_report(id){
+  console.log(id);
+  
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("fuel_Report");
+
+}
+//24
+  mydealer(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    localStorage.removeItem("in1");
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem('devices');
+    localStorage.removeItem('custId')
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF';
+      localStorage.setItem('Dealer',"ON");
+      // this.dealer = false; 
+        this.sup_admin =false;
+        this.logoutbut= true; 
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+       this.router.navigateByUrl("add");
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  super_Admin(id){
+   
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    // localStorage.setItem('token',localStorage.getItem('superAdminToken'));
+    var tempsup = localStorage.getItem('superAdminToken');
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem("in1");
+    if(tempsup == null){
+      // console.log("Inside if block");
+     this.sup_admin = false;
+     this.logoutbut= true; 
+
+    }else{
+      window.localStorage['token'] = window.localStorage['superAdminToken'];
+      localStorage.removeItem('devices');
+      window.localStorage['DataUpdate'] = 'True';
+      if(window.localStorage['DataLoaded'] = 'True'){
+        // let dlrStatus = "true";
+        localStorage.setItem('superadmin',"OFF");
+        this.sup_admin =false;
+        this.logoutbut=true;
+        // localStorage.setItem("dlrchk",dlrStatus)
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        this.router.navigateByUrl("dealerInfo");
+    
+        //  this.router.navigateByUrl("const?_status="+"OK");
+   
+      
+       }
+    }
+   
+       
+
+  }
+  //25
+
+
+  notification(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("notifications");
+  }
+  DModel(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("VehicleType");
+  }
+  dealerInfo(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+
+
+
+
+
+
+  goback() {
+    this.router.navigateByUrl("vehicleRoute");
+  }
+
+  new() {
+    this.router.navigateByUrl("new");
+  }
+
+  checkPassword(){
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+    if(localStorage.getItem('currentpwd') && localStorage.getItem('currentuser')){
+    
+        if(res._id==localStorage.getItem('currentuser')){
+          if(localStorage.getItem('currentpwd')!=res.pass){
+            if(localStorage.getItem('currentpwd')!='XIt8UXhmjW'){
+              this.logout()
+            }
+
+          }
+        }
+        // pass
+      }else{
+       
+        this.logout()
+      }
+    })
+  }
+
+  ppSHOW:boolean = false;
+  profilePic = '';
+  getProfileImagePath(){  
+    // console.log('check profile pic function');
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+      
+      // console.log(res);
+      if(res.imageDoc.length != 0){
+        var str =  res.imageDoc[0]
+        var splitStr = str.split('/');
+        // console.log(splitStr);
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+         concatStr += '/'+tt ; 
+         }
+       }
+      //  console.log(concatStr);
+       this.ppSHOW = true;
+         this.profilePic = 'https://www.oneqlik.in' + concatStr;
+         localStorage.setItem('profilePic',this.profilePic)
+      }else{
+        this.ppSHOW = false ; 
+      }
+   
+    })
+  }
+
+
+
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+
+
+
+  }
+
+selectedlanguage:any;
+classVar:any = 'defaultClass';
+classVarDashboard:any = 'styleDefaultDashboard';
+getLanguage(){
+//  var Var = { uid: this.useridd };
+//  this.contactService.getLanguages(Var).subscribe(res=>{
+   this.selectedlanguage = localStorage.getItem('appLang');
+
+  if(this.selectedlanguage != undefined){
+    if(this.selectedlanguage=='newLan2'){
+      this.paddingLeft=true
+    }else{
+      this.paddingLeft=false
+    }
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    // localStorage.setItem('appLang',this.selectedlanguage);
+    if(this.selectedlanguage != 'en'){
+      this.classVar = 'changedclass';
+      this.classVarDashboard = 'stylechangedDashboard';
+    }
+
+    if(this.selectedlanguage == 'en'){
+      this.classVar = 'defaultClass';
+      this.classVarDashboard = 'styleDefaultDashboard';
+    }
+   
+  }else{
+    this.translate.setDefaultLang('en');
+    localStorage.setItem('appLang','en');
+    this.translate.use('en');
+    this.classVar = 'defaultClass';
+    this.classVarDashboard = 'styleDefaultDashboard';
+  }
+   
+//  },err=>{
+//    console.log(err);
+//  })
+
+}
+
+  dataArrayCoords: any;
+  currentLatitude: any;
+  currentLongitude: any;
+  marker: any;
+
+
+
+  livetrack(id){
+    this.router.navigateByUrl("live");
+
+  }
+
+
+  getPointAvailable(distId){
+    var distPoint = '0';
+    this.contactService.getAvialblePoints(distId,distPoint).subscribe(res=>{
+      // console.log(res.available_points);
+      this.pointCount =res.available_points?res.available_points: 0 ; 
+    })
+  }
+  
+
+
+  tutorialVideos(){
+  
+      let dialogRef = this.dialog.open(DemoVideosComponent, {
+        // width: '903px',
+        // data: { Type: type, dataset: datasets }
+        panelClass: 'custom-dialog-container'
+      });
+  
+      dialogRef.afterClosed().subscribe(result => {
+        if (result == "OKK") {
+  
+        }
+        else if (result == "No_Dev") {
+  
+  
+        }
+      });
+
+  }
+    reports(){
+    this.router.navigate(['/reports/start'])
+  }
+  reportScedule(){
+    this.router.navigate(['/report-schedule'])
+  }
+  imeiFind(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/IEMI_Finder"]);
+  }
+
+  userFinder(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/USER_Finder"]);
+  }
+
+  
+  issueList(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/issueList"]);
+  }
+  RTOMaster(id){
+     this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/RTO_Master"]);
+  }
+  deviceList(){
+    this.router.navigate(['/deviceList'])
+  }
+  inActiveAdmins(){
+    this.router.navigate(['/inactiveAdmins'])
+  }
+  toll(){
+  this.router.navigate(['/toll'])
+  }
+}
diff --git a/src/app/report/header/header.component.html b/src/app/report/header/header.component.html
new file mode 100644
index 0000000..ecab44a
--- /dev/null
+++ b/src/app/report/header/header.component.html
@@ -0,0 +1,77 @@
+<nav class="navbar navbar-expand-lg navbar-light  custom_style" style="z-index: 20;">
+
+  <img src={{this.logo}} style="width:140px;padding-left: 10px;height: 50px;">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <!-- <div [ngStyle]="{'background-color': style1 ? 'red' : (style2 ? 'blue' : null) }"> style="flex: 1;text-align: center;padding-left: 70px;"paddingLeft-->
+  <div class="collapse navbar-collapse list_style" id="navbarSupportedContent">
+    <div [ngClass]="paddingLeft?'changePadding1':'changePadding'">
+     
+    </div>
+  </div>
+  <div style=" float: left; padding-top: 10px; ">
+    <p
+      style="margin-top: 0px;margin-bottom:0 ;color: white;margin-left: 20px;border-radius: 20px;background: #fff;color: #212529; font-size: 14px;padding: 0px 5px;font-weight: 600;">
+      {{fs}}</p>
+  </div>
+  <div style="width: 80px; float: right;">
+    <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+      <div class="row" style="margin: 0; margin-bottom: 10px;">
+        <div class="col-3" style="padding: 0;">
+          <div style="text-align: center;">
+            <img *ngIf="!ppSHOW" src="../../assets/userAccount.png" alt="UserImage" height="60" style="width: 100%;">
+            <img *ngIf="ppSHOW" style="border-radius: 50%;" src="{{profilePic}}" alt="UserImage" height="60" width="60"
+              crossorigin="anonymous">
+          </div>
+        </div>
+        <div class="col-9" style="padding-left: 10px !important;font-size: 18px;font-weight: 400;">
+          <div><span>{{fs}}</span><span style="padding-left: 5px;">{{ls}}</span></div>
+          <p style="margin-bottom: 0;">{{mb}}</p>
+          <div *ngIf="availaPointsFlag === true" title="Available Points" style="font-size: 15px;">
+            <span> <i class="fas fa-coins" style="color: #cf6b05;font-size: 18px;"></i></span>
+            <span style="margin-left: 15px;font-weight: 600;color: #656565;">{{pointCount}}</span>
+          </div>
+          <p>{{or}}</p>
+        </div>
+      </div>
+      <div class="row" style="margin: 0;">
+        <div class="col-6">
+          <button type="reset" md-raised-button class="btn btn-default" style="background: #e2e2e2;"
+            (click)="myaccount('myaccount')">{{'My Account' | translate}}</button>
+        </div>
+        <div class="col-6">
+          <button *ngIf="dealer" md-raised-button class="w3-button w3-red" (click)="mydealer('mydealer')">{{'Dealer Account' | translate}}</button>
+          <button *ngIf="sup_admin" md-raised-button class="w3-button w3-red" (click)="super_Admin('mydealer')">{{'Admin Account' | translate}}</button>
+          <button *ngIf="logoutbut" md-raised-button class="btn btn btn-success" style="color:white"
+            (click)="logout()">{{'Log Out' | translate}}</button>
+        </div>
+      </div>
+    </md-menu>
+    <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none;padding-top: 6px;">
+      <i class="fas fa-user" style=" color: white; font-size: 20px;"></i>
+    </button>
+    <!-- <app-notification></app-notification> -->
+  </div>
+  <!-- <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:11%; margin-top: 3%;padding-left:0%">
+          <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+            <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+            <h5>&nbsp;&nbsp;{{mb}}</h5>
+            <h5>&nbsp;&nbsp;{{or}}</h5>
+            <br> &nbsp;
+            <button  type="reset" class="btn btn-default" (click)="myaccount('myaccount')">My Account</button>
+            &nbsp;
+            <button *ngIf="dealer" class="w3-button w3-red" (click)="mydealer('mydealer')">Dealer Account</button> &nbsp;
+            <button *ngIf="sup_admin" class="w3-button w3-red" (click)="super_Admin('mydealer')">Admin Account</button> &nbsp;    
+            <button *ngIf="logoutbut" class="btn btn btn-success" (click)="logout()">&nbsp;&nbsp;&nbsp;Log
+              Out&nbsp;&nbsp;&nbsp;</button> &nbsp;
+          </md-menu>
+          <button md-icon-button [mdMenuTriggerFor]="appMenu" style="float:right;outline:none">
+            <img src="../../assets/image/us.jpg" height=24px>
+          </button>
+          <app-notification></app-notification>
+        </ul> -->
+
+
+</nav>
\ No newline at end of file
diff --git a/src/app/report/header/header.component.scss b/src/app/report/header/header.component.scss
new file mode 100644
index 0000000..6ac560a
--- /dev/null
+++ b/src/app/report/header/header.component.scss
@@ -0,0 +1,234 @@
+.custom_style {
+  // position: fixed;
+  // top:0 ;
+  // left:0;
+  // right :0;
+  // background: #2D4262;
+  // padding-top: 0%;
+  // padding-bottom: 0%;
+  // line-height: 2.8;
+  // box-shadow: -1px 7px 7px -5px rgb(48, 68, 99);
+
+  // ================changed style==================
+  position: fixed;
+  background: #2d4262;
+  padding-top: 1%;
+  padding: 0;
+  width: 100%;
+  box-shadow: -1px 7px 7px -5px #304463;
+}
+
+.changePadding {
+  flex: 1;
+  text-align: center;
+  padding-left: 90px;
+}
+
+.changePadding1 {
+  flex: 1;
+  text-align: center;
+  padding-left: 15px;
+}
+
+.list_style {
+  margin-left: 100px;
+  ul {
+    li {
+      a {
+        color: white;
+      }
+    }
+  }
+}
+
+.dropdown_style {
+  //  background:  #b9b7b7 ;
+  // background: linear-gradient(to bottom, #2c3e50,#bdc3c7);
+  // background: #D42021;
+
+  background: #2d4262;
+
+  padding-top: 0;
+  padding-bottom: 0;
+
+  cursor: pointer;
+  a {
+    color: white;
+  }
+}
+
+.dropdown-menu > a:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.hoverStyle:hover {
+  background-color: #2a3132;
+  background-image: none;
+}
+
+.nav-item > a:hover {
+  background-color: #2a3132;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(74, 118, 184);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+@media (max-width: 1540px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (min-width: 1366px) {
+  #navbarSupportedContent {
+    margin-left: 50px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 1366px) {
+  .changePadding {
+    padding-left: 0px;
+  }
+  .changePadding1 {
+    padding-left: 0px;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(143, 215, 255);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #dadada;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#navbarSupportedContent {
+  margin-left: 100px;
+}
+@media (max-width: 1537px) {
+  #navbarSupportedContent {
+    margin-left: 0px;
+  }
+}
+
+@media (max-width: 1537px) {
+  .list_style {
+    font-size: 13px;
+  }
+}
+
+// @media (min-width:1366px){
+//   .list_style{
+//     font-size: 14px;
+//       }
+
+// }
+// @media (max-width:1476px){
+
+//   .list_style{
+//     font-size: 14px;
+//       }
+// }
+
+// 1366,1440
+
+// .bg-light{
+//   background: #737373;
+
+// }
+
+// .bg-light :hover{
+//   background: #dbd4d4;
+
+// }
+
+// .navbar-nav > li > .dropdown-menu { background-color: #FF0000; }
+//  .dropdown-menu > .active > a,.dropdown-menu > .active > a:hover.dropdown-menu > .active > a:focus {color: #555555!important; background-color: #e7e7e7!important;}
+
+li a.nav-link {
+  width: max-content !important;
+  // padding: 20px 5px !important;
+}
+
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -6px;
+  margin-left: -1px;
+  -webkit-border-radius: 0 6px 6px 6px;
+  -moz-border-radius: 0 6px 6px;
+  border-radius: 0 6px 6px 6px;
+}
+
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #ccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #fff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}
diff --git a/src/app/report/header/header.component.spec.ts b/src/app/report/header/header.component.spec.ts
new file mode 100644
index 0000000..a52be79
--- /dev/null
+++ b/src/app/report/header/header.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/header/header.component.ts b/src/app/report/header/header.component.ts
new file mode 100644
index 0000000..d837453
--- /dev/null
+++ b/src/app/report/header/header.component.ts
@@ -0,0 +1,848 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from 'ng2-translate';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+// 
+  marker1: any;
+  mapData: any[];
+  routePath: any;
+  before: any;
+  logoutbut: boolean;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  fs: any; ls: any; emailid: any; or: any; useridd: any; mb: any; custtype: any; dealer: any;
+  showImage: any;
+  groups = [];
+  group_info: any;
+  deviceId: any;
+  device_update: any;
+  markerpoi: any;
+  superAdmin: any = false;
+  waypoints_path:any;
+  routeData:any;
+  cnt:any =0;
+  showIMEI=false
+  dbMap:any;
+  dbMapInit:any = false;
+  menuFlag:any ='';
+  isOperator: boolean = false;
+  isOrganisation: boolean = false;
+  reportPrefrecne: any;
+  paddingLeft:boolean=false
+  reportArray = [
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name:"Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:false,value:"stoppage_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:false,value:"ignition_report"},
+    {name : "Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name : "AC Report",Rstatus : true,Astatus:false,value:"ac_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performance_report"},
+    {name : "User Trip Report",Rstatus : true,Astatus:false,value:"user_trip_report"},
+    {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"}  ,
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"} ,
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+  ];
+  availaPointsFlag: boolean = false;
+  pointCount: number = 0;
+  adressTab: boolean=false;
+  phone: any;
+  // ,public dialog: MdDialog
+  constructor(public dialog: MdDialog,private router: Router, private route: ActivatedRoute, private contactService: ContactService,public translate: TranslateService) {
+    this.contactService.totalTicketCount.subscribe(totalTicketCount => {
+        //  this.ticketCount = totalTicketCount
+       this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.phone=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).phn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.ngOnInit()
+     });
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    
+    if(this.useridd=="59cbbdbe508f164aa2fef3d8"){
+      this.showIMEI=true;
+      
+    }
+    console.log("USEERRRR",this.useridd,'59cbbdbe508f164aa2fef3d8', this.showIMEI);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.isOrganisation = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    // console.log("jwtvalue",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    
+    var routeID = localStorage.getItem('routeId')
+
+    // this.route.params.subscribe((params:Params)=>{
+    // let id= params['routePath._id'];
+    // this.getRouteData(routeID);
+
+    // });
+    
+  }
+  link
+  menuWidth:any;
+  sup_admin:boolean;
+  ngOnInit() {
+    // console.log("Inside all app menu component---------------------------------------------");
+    // this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    if(localStorage.getItem('superadmin')=="ON"){
+      this.sup_admin = true;
+      this.logoutbut = false;
+      this.dealer = false;
+    }
+
+    this.logo = window.localStorage['logo'];
+  
+    // this.text = window.localStorage['text'];
+    // window.localStorage['DataUpdate'] = 'Tthis.rue'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    // this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // // this.routePath = JSON.parse(localStorage.getItem('routeData'));
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.isOperator = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOperator;
+
+    this.reportPrefrecne = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).report_preference;   
+  
+    let that = this;
+    if(this.reportPrefrecne !=undefined){
+    
+      var tempReport = this.reportPrefrecne;
+      console.log(this.reportPrefrecne);
+      
+      for(let dt in tempReport){
+        let arr = that.reportArray.filter(function(d){ 
+          return d.value == dt;
+        })
+        arr[0].Astatus = tempReport[dt]?tempReport[dt].Astatus:false;
+        arr[0].Rstatus = tempReport[dt]?tempReport[dt].Rstatus:false;
+      }
+      
+    }
+
+    
+
+    // console.log("this.reportPrefrecne=>",this.reportPrefrecne);
+  
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    // let foods = [];
+
+    // if (this.mb.charAt(0) == "n") {
+    //   this.mb = ' '
+    // }
+    if (window.localStorage['Custumer'] == 'ON') {
+      // this.logoutbut = true;
+      this.sup_admin =false;
+      this.dealer = true;
+    }else if(window.localStorage['superadmin']=='ON'){
+      this.logoutbut = false;
+    }
+    else {
+      this.logoutbut = true;
+    }
+    
+    this.getLanguage()
+
+
+    this.menuFlag = this.contactService.menuReturnGet();
+    var chkProfilePic = localStorage.getItem('profilePic');
+    // console.log('chkProfilePic',chkProfilePic);
+    if(chkProfilePic == null){
+      this.getProfileImagePath();
+    }else{
+      this.ppSHOW = true; 
+      this.profilePic = chkProfilePic ; 
+    }
+
+    this.availaPointsFlag = false ;
+    if((this.custtype === true)||((this.superAdmin === true)&&(this.isOrganisation === false))){
+      // console.log("Inside FunctionCheckpoint");
+      this.availaPointsFlag = true ;
+      this.getPointAvailable(this.useridd);
+    }
+    this. checkPassword();
+    // if(this.useridd === '59cbbdbe508f164aa2fef3d8'){
+    //   this.adressTab = true;
+    // }
+
+    $(document).on('click', '.dropdown-menu', function (e) {
+      e.stopPropagation();
+    });
+    // this.getLink()
+
+  }
+
+  getLink(){
+    // 9481773053'
+    console.log("PHONE_________-------",this.phone);
+    
+    this.contactService.get('/pullData/getSetuLink?mobileNumber='+this.phone).subscribe((res:any)=>{
+      console.log(res);
+      if(res.link){
+        this.link=res.link
+
+      }
+    })
+  }
+
+//2 menu dashboard 
+  soon(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+  }
+  // 3 menu
+  group(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("group_view");
+  }
+  // 4 menu
+  devi(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+
+    this.router.navigateByUrl("dashboard");
+  }
+
+  productSummary(id){
+    this.router.navigateByUrl("product-summary");
+
+  }
+
+  orderSummary(id){
+    this.router.navigateByUrl("orderSummary");
+
+  }
+
+  tempDetal(id){
+    this.router.navigateByUrl("device-report/temp_report");
+
+  }
+  //5 menu
+  openNav(id) {
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationComponent'}});
+  }
+
+
+
+  //6 menu
+  geo(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("geofencing");
+  }
+  // 7 menu 
+  report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report");
+
+  }
+
+  daywisereport(){
+    this.router.navigateByUrl("device-report/daywise-report");
+  }
+  subAdmin(){
+    this.router.navigateByUrl("suAdmin");
+  }
+
+    
+  vehicleExpense(id){
+    this.router.navigateByUrl("vehicleExpense");
+  }
+
+  temp_report(id){
+    this.router.navigateByUrl("device-report/tempGraph");
+  }
+
+  commandQueue(id){
+    this.router.navigateByUrl("commanQueue");
+  }
+
+  addressList(id){
+    this.router.navigateByUrl("addreessUpdate");
+  }
+
+
+  censorDetail(id){
+    this.router.navigateByUrl("censor");
+
+  }
+  fuelPrice(id){
+    console.log(id);
+      this.router.navigate(["/FuelPrice"]);
+  }
+
+  daily_logs(){
+    this.router.navigateByUrl("device-report/dailyLogs");
+  }
+
+  workingHour(id){
+    this.router.navigateByUrl("workhourReport");
+  }
+
+  reminder_list(id)
+  {
+    this.router.navigateByUrl("vehicle/reminder_service");
+
+  }
+
+  
+
+  TrackingHistory(id){
+    // this.menuFlag =  this.contactService.menuReturnSet(id);
+    // this.router.navigateByUrl("location/live-history");
+
+    this.contactService.menuReturnSet(id);
+    this.router.navigate(['/location'],{queryParams : {pageid : 'locationHistory'}});
+  }
+
+
+  dev_fuel_report(){
+    this.router.navigateByUrl("device-report/dev-fuel-report");
+  }
+
+  POI_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/POI_report");
+  }
+
+  SOS_report(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/devicesosReport");
+  }
+
+
+  //8
+  report_speed(id) {
+
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  //9
+  trip_report(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/trip_report");
+//10
+  }
+
+  acReport(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/ac_report");
+  }
+  summaryReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  //11
+  geofancingReport(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+//12
+
+travelPath(id){
+  // TravelPathReportComponent
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/travel_path");
+}
+
+messageUtility(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("messageUtility");
+}
+Rechange(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  // this.router.navigateByUrl("recharge");
+}
+
+billing(id){
+
+  this.router.navigateByUrl("billingDashboard");
+}
+
+overspeed(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+//13
+routeViolation(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/routeViolation");
+}
+
+mainReport(){
+  this.router.navigateByUrl("maintananceReport");
+  
+}
+
+idleReport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/idle-report");
+}
+//14
+stoppage_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/stoppage_report");
+}
+//15
+ignition_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/ignition_report");
+}
+//16
+
+distance_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/distance_report");
+}
+//17
+alert_report(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+POIlist(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("POI_list");
+}
+
+userTrip(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/deviceTrip");
+
+}
+
+driverPerformance(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+//18
+
+vehicleRoute(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("vehicleRoute");
+}
+
+
+//19
+route_map(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+route_plan(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlan");
+}
+
+route_planReport(id){
+this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("routePlanReportNew");
+}
+//20
+addcus(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  localStorage.removeItem('mapLoad_ID')
+  this.router.navigateByUrl("add");
+}
+//21
+Ddetail(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("driverdetail");
+}
+
+userMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("userLogs");
+}
+
+cssupport(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cus_support");
+}
+
+adddistributers(){
+  this.router.navigateByUrl("distributersList");
+}
+
+deviceMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceMaster");
+}
+
+deviceRenew(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("RenewReport");
+}
+deviceInventory(){
+  this.router.navigateByUrl("deviceInventory");
+}
+gpsMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("gpsMaster");
+
+}
+
+technician(id){
+   this.router.navigateByUrl("technician");
+}
+
+jobCard(id)
+{
+   this.router.navigateByUrl("JobCard");
+}
+
+cmdMaster(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("cmdMaster");
+
+}
+
+deviceEntry(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("deviceEntry");
+}
+
+deviceInventoryList(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("Inventorylist");
+}
+//22
+poiMenu(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("poimenu");
+}
+//23
+myaccount(id) {
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("accountSettings");
+}
+
+loadUnload(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("device-report/tripLoadUnload");
+
+}
+
+
+load_management(id){
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("loadManagement");
+}
+
+// LR_Number(id){
+//   this.menuFlag =  this.contactService.menuReturnSet(id);
+//   this.router.navigateByUrl("lrinput");
+// }
+
+fuel_report(id){
+  console.log(id);
+  
+  this.menuFlag =  this.contactService.menuReturnSet(id);
+  this.router.navigateByUrl("fuel_Report");
+
+}
+//24
+  mydealer(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    localStorage.removeItem("in1");
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem('devices');
+    localStorage.removeItem('custId')
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF';
+      localStorage.setItem('Dealer',"ON");
+      // this.dealer = false; 
+        this.sup_admin =false;
+        this.logoutbut= true; 
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+       this.router.navigateByUrl("add");
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  super_Admin(id){
+   
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    // localStorage.setItem('token',localStorage.getItem('superAdminToken'));
+    var tempsup = localStorage.getItem('superAdminToken');
+    localStorage.removeItem('supAdminAcessToCust');
+    localStorage.removeItem("in1");
+    if(tempsup == null){
+      // console.log("Inside if block");
+     this.sup_admin = false;
+     this.logoutbut= true; 
+
+    }else{
+      window.localStorage['token'] = window.localStorage['superAdminToken'];
+      localStorage.removeItem('devices');
+      window.localStorage['DataUpdate'] = 'True';
+      if(window.localStorage['DataLoaded'] = 'True'){
+        // let dlrStatus = "true";
+        localStorage.setItem('superadmin',"OFF");
+        this.sup_admin =false;
+        this.logoutbut=true;
+        // localStorage.setItem("dlrchk",dlrStatus)
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        this.router.navigateByUrl("dealerInfo");
+    
+        //  this.router.navigateByUrl("const?_status="+"OK");
+   
+      
+       }
+    }
+   
+       
+
+  }
+  //25
+
+
+  notification(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("notifications");
+  }
+  DModel(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(id) {
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("VehicleType");
+  }
+  dealerInfo(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+
+
+
+
+
+
+  goback() {
+    this.router.navigateByUrl("vehicleRoute");
+  }
+
+  new() {
+    this.router.navigateByUrl("new");
+  }
+
+  checkPassword(){
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+    if(localStorage.getItem('currentpwd') && localStorage.getItem('currentuser')){
+    
+        if(res._id==localStorage.getItem('currentuser')){
+          if(localStorage.getItem('currentpwd')!=res.pass){
+            if(localStorage.getItem('currentpwd')!='XIt8UXhmjW'){
+              this.logout()
+            }
+
+          }
+        }
+        // pass
+      }else{
+       
+        this.logout()
+      }
+    })
+  }
+
+  ppSHOW:boolean = false;
+  profilePic = '';
+  getProfileImagePath(){  
+    // console.log('check profile pic function');
+    this.contactService.getImagePath(this.useridd).subscribe((res:any)=>{
+      
+      // console.log(res);
+      if(res.imageDoc.length != 0){
+        var str =  res.imageDoc[0]
+        var splitStr = str.split('/');
+        // console.log(splitStr);
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+         concatStr += '/'+tt ; 
+         }
+       }
+      //  console.log(concatStr);
+       this.ppSHOW = true;
+         this.profilePic = 'https://www.oneqlik.in' + concatStr;
+         localStorage.setItem('profilePic',this.profilePic)
+      }else{
+        this.ppSHOW = false ; 
+      }
+   
+    })
+  }
+
+
+
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+
+
+
+  }
+
+selectedlanguage:any;
+classVar:any = 'defaultClass';
+classVarDashboard:any = 'styleDefaultDashboard';
+getLanguage(){
+//  var Var = { uid: this.useridd };
+//  this.contactService.getLanguages(Var).subscribe(res=>{
+   this.selectedlanguage = localStorage.getItem('appLang');
+
+  if(this.selectedlanguage != undefined){
+    if(this.selectedlanguage=='newLan2'){
+      this.paddingLeft=true
+    }else{
+      this.paddingLeft=false
+    }
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    // localStorage.setItem('appLang',this.selectedlanguage);
+    if(this.selectedlanguage != 'en'){
+      this.classVar = 'changedclass';
+      this.classVarDashboard = 'stylechangedDashboard';
+    }
+
+    if(this.selectedlanguage == 'en'){
+      this.classVar = 'defaultClass';
+      this.classVarDashboard = 'styleDefaultDashboard';
+    }
+   
+  }else{
+    this.translate.setDefaultLang('en');
+    localStorage.setItem('appLang','en');
+    this.translate.use('en');
+    this.classVar = 'defaultClass';
+    this.classVarDashboard = 'styleDefaultDashboard';
+  }
+   
+//  },err=>{
+//    console.log(err);
+//  })
+
+}
+
+  dataArrayCoords: any;
+  currentLatitude: any;
+  currentLongitude: any;
+  marker: any;
+
+
+
+  livetrack(id){
+    this.router.navigateByUrl("live");
+
+  }
+
+
+  getPointAvailable(distId){
+    var distPoint = '0';
+    this.contactService.getAvialblePoints(distId,distPoint).subscribe(res=>{
+      // console.log(res.available_points);
+      this.pointCount =res.available_points?res.available_points: 0 ; 
+    })
+  }
+  
+
+    reports(){
+    this.router.navigate(['/reports/start'])
+  }
+  reportScedule(){
+    this.router.navigate(['/report-schedule'])
+  }
+  imeiFind(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/IEMI_Finder"]);
+  }
+
+  userFinder(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/USER_Finder"]);
+  }
+
+  
+  issueList(id){
+    this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/issueList"]);
+  }
+  RTOMaster(id){
+     this.menuFlag =  this.contactService.menuReturnSet(id);
+    this.router.navigate(["/RTO_Master"]);
+  }
+  deviceList(){
+    this.router.navigate(['/deviceList'])
+  }
+  inActiveAdmins(){
+    this.router.navigate(['/inactiveAdmins'])
+  }
+  toll(){
+  this.router.navigate(['/toll'])
+  }
+}
diff --git a/src/app/report/main/main.component.html b/src/app/report/main/main.component.html
new file mode 100644
index 0000000..a521b40
--- /dev/null
+++ b/src/app/report/main/main.component.html
@@ -0,0 +1,32 @@
+<div *ngIf="isCC" class="navbar navbar-default" style="margin-left: -15px;margin-top: -8px;">
+  <app-all-menus *ngIf="!token_identifier"></app-all-menus>
+</div>
+<div *ngIf="!isCC" class="navbar navbar-default" style="margin-left: -15px;margin-top: -8px;">
+  <app-header *ngIf="!token_identifier"></app-header>
+</div>
+
+<div style="margin-top: 30px;">
+
+<div *ngIf="show" id="mySidebar" class="sidebar"
+ style="background: white;
+    box-shadow: 3px 1px 5px 0px #b2b0ae;">
+  <!-- <button class="close pull-right" (click)="closeNav()"><i class="fas fa-times"></i></button> -->
+  <app-report-filter></app-report-filter>
+</div>
+<div >
+  <div id="line" class="line"></div>
+  <div  class="wordwrapper">
+    <div id="line1" class="word">
+      <i style="color: floralwhite;" *ngIf="showLine" class="fas fa-chevron-circle-right" (click)="openNav()"></i>
+      <i style="color: black;font-size: 14px;margin-left: -11px;" *ngIf="!showLine" class="fas fa-chevron-circle-left" (click)="openNav()"></i>
+    </div>
+    
+  </div>
+</div>
+
+<div *ngIf="show" id="main" style="box-shadow: 3px 1px 5px 0px #b2b0ae">
+<!-- <button class="openbtn" (click)="openNav()">☰</button> -->
+
+  <router-outlet></router-outlet>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/report/main/main.component.scss b/src/app/report/main/main.component.scss
new file mode 100644
index 0000000..42f6505
--- /dev/null
+++ b/src/app/report/main/main.component.scss
@@ -0,0 +1,146 @@
+ul {
+  list-style-type: none;
+  margin: 55px 0px 0px 0px;
+  padding: 0;
+  width: 25%;
+  background-color: #f1f1f1;
+  position: fixed;
+  height: 100%;
+  overflow: auto;
+}
+
+li a {
+  display: block;
+  color: #000;
+  padding: 8px 0 8px 16px;
+  text-decoration: none;
+}
+
+li a.active {
+  background-color: #4caf50;
+  color: white;
+}
+
+li a:hover:not(.active) {
+  background-color: #555;
+  color: white;
+}
+
+.componentClass {
+  margin-left: 25%;
+  padding: 64px 16px;
+  height: 1000px;
+}
+/* The sidebar menu */
+.sidebar {
+  height: 100%; /* 100% Full-height */
+  width: 295px; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0;
+  left: 0;
+  background: #f9f6f6 !important;
+  padding-left: 3px;
+  background-color: #111; /* Black*/
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+}
+
+/* The sidebar links */
+.sidebar a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+  color: #f1f1f1;
+}
+
+/* Position and style the close button (top right corner) */
+.sidebar .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+/* The button used to open the sidebar */
+.openbtn {
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #111;
+  color: white;
+  margin-top: 35px;
+
+  padding: 10px 15px;
+  border: none;
+}
+
+.openbtn:hover {
+  background-color: #444;
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left 0.5s; /* If you want a transition effect */
+  padding: 20px;
+  margin-left: 295px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidebar {
+    padding-top: 15px;
+  }
+  .sidebar a {
+    font-size: 18px;
+  }
+}
+.wrapper {
+  position: relative;
+  width: 250px;
+  height: 300px;
+  border: 1px dashed #ccc;
+  margin: 10px;
+}
+
+.line {
+  position: absolute;
+  left: 0%;
+  top: 0;
+  bottom: 0;
+  // width: 20px;
+  // width: 1px;
+  margin-left: 295px;
+  // background: #426e86;
+  z-index: 1;
+}
+
+.wordwrapper {
+  text-align: center;
+  height: 12px;
+  position: absolute;
+  left: 0;
+  // right: 0;
+
+  top: 50%;
+  margin-top: -12px;
+  z-index: 2;
+}
+
+.word {
+  color: #ccc;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 3px;
+  margin-left: 295px;
+  font: bold 12px arial, sans-serif;
+  // background: #fff;
+}
diff --git a/src/app/report/main/main.component.spec.ts b/src/app/report/main/main.component.spec.ts
new file mode 100644
index 0000000..09a3cf5
--- /dev/null
+++ b/src/app/report/main/main.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainComponent } from './main.component';
+
+describe('MainComponent', () => {
+  let component: MainComponent;
+  let fixture: ComponentFixture<MainComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MainComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MainComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/main/main.component.ts b/src/app/report/main/main.component.ts
new file mode 100644
index 0000000..f55c35b
--- /dev/null
+++ b/src/app/report/main/main.component.ts
@@ -0,0 +1,110 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../contact.service';
+declare var $: any
+
+@Component({
+  selector: 'app-main',
+  templateUrl: './main.component.html',
+  styleUrls: ['./main.component.scss']
+})
+export class MainComponent implements OnInit {
+   token_identifier: string;
+  emailid: any;
+  useridd: any;
+  show:boolean=false
+  showLine:boolean=false;
+  isCC:boolean=true;
+  supAdmin: any;
+  constructor(private contactService:ContactService) { 
+        this.token_identifier = localStorage.getItem('referrer_token=');
+
+  }
+
+  ngOnInit() {
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    // this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     var cc= JSON.parse(window.atob(window.localStorage.token.split('.')[1])).customer_role;
+     this.supAdmin=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+    if(cc=="cc"){
+       this.isCC=false;
+     }
+     this.contactService.get('/users/shareProfileImage?uid='+this.supAdmin).subscribe((res:any)=>{
+      // console.log(res);
+      
+    if(res.imageDoc.length != 0){
+        var str =  res.imageDoc[0]
+        var splitStr = str.split('/');
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+          concatStr += '/'+tt ; 
+         }
+       }
+       var logo1='https://www.oneqlik.in' + concatStr
+       localStorage.setItem("logo1",logo1)
+      
+      }
+      
+    })
+    this.getDevices();
+    this.getGroups()
+  }
+  getGroups(){
+   this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      console.log(res);     
+    //  this.groups = res["group_details"];
+      localStorage.setItem("groupData",JSON.stringify(res["group_details"]))
+      // console.log(this.grpName);  
+    })
+}
+
+  getDevices(){
+    var user
+    if(this.isCC){
+      user=this.useridd
+    }else{
+       user=this.supAdmin
+    }
+    this.contactService.getDevice(this.emailid,user).subscribe(
+        data => {
+          localStorage.setItem("vehicaleData",JSON.stringify(data.devices))
+          if(localStorage.getItem("vehicaleData"))
+          this.show=true;
+      },err=>{
+
+  })
+}
+openNav() {
+  if(this.showLine){
+    document.getElementById("mySidebar").style.width = "295px";
+    // document.getElementById("main").style.marginLeft = "295px";
+      document.getElementById("line").style.marginLeft = "295px";
+      document.getElementById("line1").style.marginLeft = "295px";
+      document.getElementById("line").style.background="none"
+      
+
+      this.showLine=false;
+  }else{
+    this.closeNav()
+  }
+
+
+}
+
+closeNav() {
+  document.getElementById("mySidebar").style.width = "0";
+  document.getElementById("main").style.marginLeft= "0";
+  document.getElementById("line").style.marginLeft= "0";
+  document.getElementById("line").style.background="#426E86"
+  document.getElementById("line").style.width="20px"
+  document.getElementById("line1").style.marginLeft= "0";
+
+    this.showLine=true
+
+
+}
+
+}
diff --git a/src/app/report/notification/notification.component.html b/src/app/report/notification/notification.component.html
new file mode 100644
index 0000000..a517d87
--- /dev/null
+++ b/src/app/report/notification/notification.component.html
@@ -0,0 +1,57 @@
+<button md-icon-button [mdMenuTriggerFor]="appMenu2" (click)="checker()" style="float:right;outline:none;padding-top:8px"> 
+  <span class="num" *ngIf="countfun()">{{final_counter}}</span>
+  <md-icon md-tooltip="Notification" [style.color] = "final_counter > 0 ? '#e91313' : '#ffffff'" style="float: right;padding-top:3%; color:white">notifications</md-icon>
+              
+                               </button>                                 
+                               <md-menu #appMenu2="mdMenu" id="mdMenu"  class="myStyle"  [overlapTrigger]="false">
+                                <div style="width:260px !important;height: 100vh;">
+                                  <div class="row" style="margin: 0%;text-align: center;font-weight: 600;background: #435e88;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);">
+                                    <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                      <label for="notif" style="margin: 0;padding: 3px;color: white;">Notifications</label>    
+                                    </div>
+                                   </div>
+                                   <div class="row" style="font-size: 12px;margin: 0%;">
+                                     <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                      <div class="row" style="margin-top: 5px;margin: 0%;background: white;margin: 3px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);"  *ngFor="let device of final_data;let i = index;">
+                                        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                                           <div class="row" (click)="calldevice(device.did)" style="margin: 0%;margin-bottom: 5px;margin-top: 5px;">
+                                             <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;padding-left: 3px;">
+                                             <p style="margin: 0%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
+                                            </div>
+                                             <!-- <div class="col-sm-12 col-md-6 col-lg-6" style="padding: 0%;padding-left: 3px;">
+                                              <p style="margin: 0%;">{{ device.date }} {{ device.time }}</p>
+                                             </div> -->
+                                          </div>
+                                          <div class="row" style="margin: 0%;margin-bottom: 5px;">
+                                            <div class="col-sm-10 col-md-10 col-lg-10" (click)="calldevice(device.did)" style="padding: 0%;padding-left: 3px;">
+                                              <p style="margin: 0%;">{{ device.date }} {{ device.time }}</p>
+                                            </div>
+                                            <div class="col-sm-2 col-md-2 col-lg-2" style="padding: 0%;">
+                                              <i class="far fa-comment-alt" md-tooltip="Comment" style="float: right;padding-right: 10px;padding-top: 6px;cursor: pointer;" (click)="openPopup(device)"></i>
+                                            </div>   
+                                          </div>   
+                                        </div>
+                                      </div>
+                                     </div>
+                                   </div>
+                                </div>
+                           
+                                 
+                                 <!-- <div [ng2IfScrollbars] style="height: 258px;width: 273px;overflow: auto;">                           
+                                  <table  class="table table-striped " style="border: none;">
+                                    <thead>
+                                    </thead>
+                                     <tbody>                             
+                                  <tr style="cursor:pointer" (click)="calldevice(device.did)" *ngFor="let device of final_data;let i = index;">
+                                     <td  style="font-size: 10px">{{ device.data }} {{ device.address }}                                                              
+                                     </td>
+                                     <td style="font-size: 10px">{{ device.date }} {{ device.time }} 
+                                     </td>                                  
+                                  </tr>                            
+                                   </tbody> 
+                                 </table> 
+                      
+                                </div> -->
+                                </md-menu> 
+                     
+                           
diff --git a/src/app/report/notification/notification.component.scss b/src/app/report/notification/notification.component.scss
new file mode 100644
index 0000000..b6d78a3
--- /dev/null
+++ b/src/app/report/notification/notification.component.scss
@@ -0,0 +1,35 @@
+::-webkit-scrollbar {
+    // display: none;
+    }
+    .circle {
+        width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    font-size: 8px;
+    color: white;
+    text-align: center;
+    background: black;
+    float: right
+      }
+      .notif {
+        position: relative;
+        display: block;
+        height: 50px;
+        width: 100px;
+        text-decoration: none;
+      }
+      .num {
+        position: absolute;
+        right: 0px;
+        top: -6px;
+        color: black;
+        /* background-color: red; */
+       /*  color: #e91313; */
+      }
+     
+
+      .mat-menu-panel.myStyle{
+        max-width: 500px !important;
+        width: 500px;
+
+      }
\ No newline at end of file
diff --git a/src/app/report/notification/notification.component.spec.ts b/src/app/report/notification/notification.component.spec.ts
new file mode 100644
index 0000000..fa24dc2
--- /dev/null
+++ b/src/app/report/notification/notification.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationComponent } from './notification.component';
+
+describe('NotificationComponent', () => {
+  let component: NotificationComponent;
+  let fixture: ComponentFixture<NotificationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/notification/notification.component.ts b/src/app/report/notification/notification.component.ts
new file mode 100644
index 0000000..f61d091
--- /dev/null
+++ b/src/app/report/notification/notification.component.ts
@@ -0,0 +1,254 @@
+
+import { environment } from '.././../../environments/environment';
+import { Component, OnInit, OnDestroy} from '@angular/core';
+import {DatainjectionService} from '../../datainjection.service'
+import * as io from 'socket.io-client';
+import { Injectable } from '@angular/core';
+import{Http, Headers} from '@angular/http';
+import 'rxjs/add/operator/map';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { AddGroupComponent } from '../../add-group/add-group.component';
+import { MdDialog } from '@angular/material';
+import { SOSAlertComponent } from '../../sosalert/sosalert.component';
+import { CommentWindowComponent } from '../../comment-window/comment-window.component';
+
+
+@Component({
+  selector: 'app-notification',
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.scss']
+})
+@Injectable()
+export class NotificationComponent implements OnInit, OnDestroy {
+
+  dev_url:any;
+  superAdmin: any;
+
+  constructor(private injectData:DatainjectionService,private http: Http,private router: Router,public dialog: MdDialog) {
+   
+ 
+   this.dev_url  = environment.hostUrl; 
+ 
+   }
+   address:any;
+  try:any;
+  devicess:any;
+  final:any = null;
+  userID:any;
+  fs:any;
+  ls:any;
+  or:any;
+  emailid:any;
+  useridd:any;
+  custtype:any;
+  cust:boolean = false;
+  counter : any = 0;
+  data:any;
+  final_counter:any = 0;
+  private socket_Notify
+  final_data = [] 
+  countfun(){
+    if(this.final_counter == 0){
+      return false
+    }
+    else{
+      return true
+    }
+  }
+  checker(){
+    this.final_counter = 0;
+    window.localStorage['Notifi_Counter'] = this.counter;
+
+  }
+  calldevice(did){
+  // console.log(did)
+  window.localStorage['mapLoad_ID'] = did
+  this.router.navigateByUrl("location");
+  }
+  accListener(){
+    var outerThis = this;
+    return function(msg){
+      // console.log("msg",msg);
+      // debugger; theft alert
+    if((outerThis.superAdmin=== true)&&outerThis.isCC&&(msg.item._type === "Ignition Alert" || msg.item._type==="Theft Alert" || msg.item._type=="Max Stoppage Alert" || msg.item._type=="Max Idling Alert")){
+        //  console.log("msgmsgmsgmsgmsgmsgmsgmsgmsgmsg",msg);
+      }else{
+        // console.log("msg",msg);
+        var dt = new Date(msg.timestamp);
+        let  day = dt.getDate(); 
+         let  month = dt.getMonth()+1; 
+         let  year = dt.getFullYear();
+       
+         let final_date = day+"/"+month+"/"+year
+        let tm = new Date(msg.timestamp).toLocaleTimeString();
+       
+        let data = {
+          date:final_date,
+          time:tm,
+          data:msg.item.sentence,
+          did:msg.device,
+          user:msg.user,
+          _id : msg._id
+        }
+        ++ outerThis.final_counter;
+        // console.log("msgmsgmsgmsgmsgmsgmsgmsgmsgmsg",msg);
+        if(msg.priority== 3){
+          // console.log("open msg box");
+          outerThis.playAudio(3);
+          outerThis.openAlertBox(msg);
+         
+        }else{
+          // console.log("open msg box else block")
+          outerThis.playAudio(1);
+        }
+  
+        window.localStorage['Notifi_Counter'] = outerThis.final_counter;
+        outerThis.final_counter=window.localStorage.Notifi_Counter
+        outerThis.final_data.unshift(data);
+       // 
+      }
+     
+    }
+
+  }
+getData(a){
+  return this.http.get(this.dev_url  + '/notifs/getRecent?user='+a)
+  .map(res => res.json());
+
+ 
+}
+audio:any;
+GET_notif:boolean;
+
+playAudio(notifSignal){
+  // notification
+  // console.log("SOS Alert");
+  if(notifSignal == 3){
+ 
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notifSOS.wav';
+    this.audio.play();
+    Audio.prototype.stop = function()
+    {
+        this.pause();
+        this.currentTime = 0.0;
+    }
+    // auto-start
+    // this.audio.play();
+  }else{
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notification.wav';
+  
+    // auto-start
+    this.audio.play();
+  }
+
+
+}
+mb:any
+ isCC:Boolean=true;
+
+  ngOnInit() {
+   
+    
+   /*  this.final_counter=window.localStorage.Notifi_Counter */
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.GET_notif = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).GET_notif; 
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      var cc= JSON.parse(window.atob(window.localStorage.token.split('.')[1])).customer_role;
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+     if(cc=="cc"){
+       this.isCC=false;
+     }
+
+    this.socket_Notify = this.injectData.getSocket_notifIO();          
+    this.socket_Notify.on('connect', function(this){ });
+    this.socket_Notify.on(this.isCC?this.useridd:this.superAdmin, this.accListener());
+    // this.socket_Notify.on( this.useridd, this.accListener());
+    this.getData(this.useridd).subscribe(
+      data => {
+        // console.log('Notification data on every click',data);
+        this.final_data=[];
+        this.devicess = data ;
+        for(let r=0;r<this.devicess.length;r++){
+          var dt = new Date(this.devicess[r].timestamp);
+           let  day = dt.getDate(); 
+           let  month = dt.getMonth()+1; 
+           let  year = dt.getFullYear();
+          if((this.devicess[r].address=="")||(this.devicess[r].address==null)){
+            this.address = ""
+          }else{
+            this.address =  "at" + "  " + this.devicess[r].address
+          }
+         
+           let final_date = day+"/"+month+"/"+year
+          let tm = new Date(this.devicess[r].timestamp).toLocaleTimeString();
+          let data = {
+            date:final_date,
+            time:tm,
+            data:this.devicess[r].item.sentence,
+            did:this.devicess[r].device,
+            address:this.address,
+            user:this.devicess[r].user,
+            _id:this.devicess[r]._id
+          }
+          this.final_data.push(data);
+          // console.log('this.final_data',this.final_data);
+        }
+      }
+    )
+    // }
+  
+
+  }
+
+  dialogRef:any;
+  openAlertBox(message){
+    this.dialogRef = this.dialog.open(SOSAlertComponent, {
+      height:'300px',
+      width:'430px',
+      
+      data: {'socketData':message}
+      });
+
+      this.dialogRef.afterClosed().subscribe(result => {   
+        if(result=="success"){}
+        });
+  }
+  ngOnDestroy() {
+    if( this.socket_Notify){
+      this.socket_Notify.removeAllListeners()
+    }
+  
+     /*  this.socket_Notify.removeAllListeners(this.useridd) */
+  }
+
+  openPopup(device){
+    // console.log("popup opened");
+    var that  =this;
+document.getElementById("mdMenu").style.display="none"
+    var commentWindow = this.dialog.open(CommentWindowComponent, {
+    //  height:'300px',
+    //   width:'500px',
+      
+      data: {'deviceData':device}
+      });
+
+      commentWindow.afterClosed().subscribe(result => {   
+        if(result=="success"){
+          that.ngOnInit() ; 
+        }
+        });
+  }
+}
diff --git a/src/app/report/report component/ac-report/ac-report.component.html b/src/app/report/report component/ac-report/ac-report.component.html
new file mode 100644
index 0000000..94c7248
--- /dev/null
+++ b/src/app/report/report component/ac-report/ac-report.component.html	
@@ -0,0 +1,105 @@
+  <!-- <div style="min-height:100vh;">
+    
+    <div class="row"
+      style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <h4>{{'AC Report' | translate}}</h4>
+       
+      </div>
+    </div>
+    
+    <div class="loading mt-4" *ngIf="Load">Loading&#8230;</div>
+    <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px; margin-top: 15px;">
+       <thead style="background-color:#A2C523;color: white;">
+        <tr >
+          <th style="text-align: center">{{'Vehicle' |  translate}}</th>
+          
+          <th style="text-align: center">{{'ON Time' | translate}}</th>
+          
+          <th style="text-align: center">{{'OFF Time' | translate}}</th>
+        </thead>
+        <tbody >
+          <tr *ngFor="let report of acObject" >
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{report.vehicleNumber?report.vehicleNumber:""}}</td>
+         
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionOnDuration?report.actionOnDuration:0)}}</td>
+         
+          <td style="cursor:pointer;text-align: center" (click)="additionalDetails(report)">{{timeconversion(report.actionoffDuration?report.actionoffDuration:0)}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
+  </div> -->
+
+  <div class="topDiv">
+    <div class="row"
+      style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+      <div class="col-sm-12 col-md-12 col-lg-12">
+        <h4>{{'Ac Report' | translate}}</h4>
+      </div>
+    </div>
+    <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+    <div class="row rowStyle">
+  
+      <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+        <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button>
+        <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+              <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+          </div>
+        </div>
+      </div> -->
+      <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+        <div class="row"
+          style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <div *ngIf="Load" class="loading">Loading&#8230;</div>
+            <div style="width: 100%;height:84vh;">
+              <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <!-- <th style="text-align:left;">DID</th> -->
+                    <th style="text-align:left;">{{'Vehicle'|translate}} </th>
+                    <th style="text-align:left;">{{'IMEI' | translate}}</th>
+                    <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>
+                    <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>
+                    <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>
+                  </tr>
+                </thead>
+              </table>
+              <!-- <table *ngIf="digital_input==2" id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                   
+                    <th style="text-align:left;">{{'Vehicle'|translate}} </th>
+                    <th style="text-align:left;">{{'IMEI' | translate}}</th>
+                    <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>
+                    <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>
+                    <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>
+                  </tr>
+                </thead>
+              </table> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
\ No newline at end of file
diff --git a/src/app/report/report component/ac-report/ac-report.component.scss b/src/app/report/report component/ac-report/ac-report.component.scss
new file mode 100644
index 0000000..a430d57
--- /dev/null
+++ b/src/app/report/report component/ac-report/ac-report.component.scss	
@@ -0,0 +1,13 @@
+.headStyle {
+  text-align: center;
+  font-size: 20px;
+  // margin-top: 30px;
+}
+
+/deep/ .mat-menu-panel.test {
+  margin-top: 25px;
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+}
diff --git a/src/app/report/report component/ac-report/ac-report.component.spec.ts b/src/app/report/report component/ac-report/ac-report.component.spec.ts
new file mode 100644
index 0000000..39009e7
--- /dev/null
+++ b/src/app/report/report component/ac-report/ac-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcReportComponent } from './ac-report.component';
+
+describe('AcReportComponent', () => {
+  let component: AcReportComponent;
+  let fixture: ComponentFixture<AcReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/ac-report/ac-report.component.ts b/src/app/report/report component/ac-report/ac-report.component.ts
new file mode 100644
index 0000000..42d171d
--- /dev/null
+++ b/src/app/report/report component/ac-report/ac-report.component.ts	
@@ -0,0 +1,649 @@
+import { Component, OnInit } from '@angular/core';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+import { AcreportInfoComponent } from './acreport-info/acreport-info.component';
+import { ReportService } from '../../report.service';
+import { environment } from '../../../../environments/environment';
+
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+@Component({
+  selector: 'app-ac-report',
+  templateUrl: './ac-report.component.html',
+  styleUrls: ['./ac-report.component.scss']
+})
+export class AcReportsComponent implements OnInit {
+ignition_data: any =[];
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+totalWorkingHours=[]
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  dataForDigital1
+  dataForDigital2
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+  tabelObj:any; 
+  tabelObj1:any; 
+  tableFlag: boolean=true;
+  identifier : String = "working_report";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  data_descip: string;
+  digital_input: any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) {
+   this._service.invokeEventForAcReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+       
+        if(value){
+         this.getReport(value); 
+       }
+       
+      
+      }); 
+   }
+   ngOnInit() {
+ 
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+      this.testTable2();
+    
+     
+  }
+
+   testTable2(){
+   
+  const that = this;
+  console.log("inside digital 2");
+  $(document).ready(function() {
+     that.tabelObj1 = $('#deviceTable').DataTable({
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers', 
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+              var deviceID;
+              that.Load = true;
+              var from_date = that.Fromdate;
+              var to_date =that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              console.log(temp);
+              
+              // https://socket.oneqlik.in/notifs/ACSwitchReport
+              
+              if((temp.from_date != undefined)&&(temp.to_date != undefined) && that.deviceArr.length!=0){
+                var suburl = "";
+                suburl += "/notifs/acReport?from_date=" + (temp.from_date).toISOString() +'&to_date=' + (temp.to_date).toISOString() + '&_u=' + temp.user;
+                if(that.deviceArr.length != 0){  
+                  suburl +='&vname='+that.deviceArr;
+                }
+                that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log(ignReport.length);  
+                //  that.rowData=resp
+                if(resp.length>0)
+                {
+                  var j=0
+                  for(var i=0;i<resp.length;i++){
+
+                    // that.dataForDigital2=resp[0].s
+                      that.calculateACHours(resp[i].s,function(err,succ){
+                        if(err){
+                          j++;
+                          console.log(err);
+                        }else{
+                          console.log(succ);
+                          
+                          j++;
+                          console.log(j,"==",resp.length);
+                          
+                          if(j==resp.length){
+                            that.Load = false;
+                             callback({data : that.reportArray });
+                          }
+                        }
+                      })
+                  }
+
+                }else{
+                   that.Load = false;
+                }
+                 
+                  
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ; 
+                var tt = [];  
+                callback({data : tt });  
+              });
+  
+              }else{
+                 this.Load = false;
+               this.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+                      
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#getDetail', row).bind('click', () => {         
+            console.log("Row Data",data);
+                data['fromDate'] = that.Fromdate;
+                data['toDate'] = that.todate
+
+
+            // let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+            //   width: '548px',
+            //   data: { device :data}
+            // });
+            let dialogRef = that.dialog.open(AcreportInfoComponent, {
+                width: '800px',  
+                data: {"deviceInfo":data.ign,"digitalInput":that.digital_input}   
+
+               });
+          
+            dialogRef.afterClosed().subscribe(result => {
+              console.log(result);
+              if(result == 'close'){
+                    console.log(close);
+              }
+            })  
+               
+            });
+          }, 
+      
+          "columns": [
+              {
+                  "data": "deviceName",
+                  "visible": true,
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "Device_ID",
+                "visible": true,
+                "render": function(data, type, row) {
+                    
+                  return data?data : '';                  
+                }
+            },
+     
+              {
+                  "data": "workingHours",
+                  "visible": true,
+                  render: function(data, type, row) {
+                    // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+                    return data ?data: 0.0; 
+                  }
+              },
+              { 
+                "data": "stopHours",
+                "visible": true,
+                render: function(data, type, row) {
+                  return data ? data : 0.0; 
+                }
+            },
+            {
+              "data": "_id",
+              "visible": true,
+              render: function(data, type, row) {
+                return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+              }
+          }
+          ],  
+
+      });
+      
+
+  });
+}
+
+timeconversion(total_min){
+ 
+  var hours = parseInt(total_min) / 60
+  var rhours = Math.floor(hours);
+  var minutes = (hours - rhours) * 60;
+  var rminutes = Math.round(minutes);
+
+  var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+  return Durations ;
+}
+
+  
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+optionVal:any;
+
+getAdd(latitude,longitude){
+  var latti =0;
+  var longi = 0
+  if(latitude != undefined){
+    latti = latitude;
+
+  }
+  if(longitude != undefined){
+    longi = longitude
+
+  }
+    return 'https://maps.google.com/?q='+ latti + ',' + longi ; 
+}
+
+// callfunction(): void {
+//   // this.Load = true;
+//   this.tabelObj.draw();
+// }
+
+getReport(event){
+  console.log("inside function",event);
+   if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.downloadPdf();
+  }else{
+    this.totalWorkingHours=[]
+    this.workingHoursArray=[]
+     this.workingHoursArray1=[];
+     this.reportArray=[]
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = tpdata.fromDate;
+    var td  = tpdata.toDate;
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd
+    this.todate = td
+    this.tabelObj1.ajax.reload(); 
+  }
+ 
+}
+
+workingHoursArray=[]
+async newMethod(data){
+  console.log("hhhh",data);
+  var tempArry=[]
+  var stopHr=0;
+  var workinHr=0
+  var result = await data.reduce(function (r, a) {
+        r[a.device.Device_ID] = r[a.device.Device_ID] || [];
+        r[a.device.Device_ID].push(a);
+        return r;
+    }, Object.create(null));
+  console.log(result);
+
+  for(var i=0;i<this.deviceArr.length;i++){
+    for(var j=0;j<result[this.deviceArr[i]].length;j++){
+      console.log("1");
+      
+      // if(j!==result[this.deviceArr[i]].length){
+         console.log("11",result[this.deviceArr[i]][j]);
+      if(result[this.deviceArr[i]][j].switch=="OFF"){
+         console.log("111",(result[this.deviceArr[i]][j].timestamp).replace('Z', '').replace('T', ''));
+         if(result[this.deviceArr[i]][j+1]){
+        if((new Date(result[this.deviceArr[i]][j].timestamp).getTime())>(new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())){
+          workinHr=(new Date(result[this.deviceArr[i]][j].timestamp).getTime()-new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())/1000;
+          stopHr=(new Date(this.todate).getTime()-new Date(this.Fromdate).getTime())/1000;
+          
+        }
+      }
+      }
+    // }
+    }
+    tempArry.push({deviceName:result[this.deviceArr[i]][j-1].vehicleName,Device_ID:this.deviceArr[i],stopHours:this.secondsToHms(stopHr),workingHours:this.secondsToHms(workinHr)})
+    stopHr=0;
+    workinHr=0;
+  }
+  this.totalWorkingHours=tempArry
+  console.log("TEMP==>",tempArry);
+  
+
+}
+workingHoursArray1=[]
+reportArray=[]
+// --------------------------------Method For working Hours Calculation-----------------------------
+calculateACHours(data,cb){
+  console.log("INCOMMING DATA__",data);
+  
+  var total=0
+  console.log(data);
+  for(let i=0;i<data.length;i++){
+    if(i!==(data.length-1)){
+    if(data[0].switch=="OFF"){
+    if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+      // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+      var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+      // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:this.deviceArr[0]})
+    }
+  }
+  else{
+    if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+      // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+       var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+    }
+  }
+}else{
+  for(var j=0;j<this.workingHoursArray1.length;j++){
+    total=total+this.workingHoursArray1[j].timestamp;
+  }
+ var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+        var stopHrs=this.secondsToHms((time-total))
+  this.reportArray.push({Device_ID:data[i].imei,deviceName:data[i].vehicleName,workingHours:this.secondsToHms(total),stopHours:stopHrs,ign:data});
+  }
+  if(i==data.length-1){
+      cb(null,'')
+  }
+
+  }
+  console.log("JEDHJDH",this.workingHoursArray1,this.reportArray);
+  
+  
+
+}
+
+// calculateWorkingHours(data){
+// console.log(data);
+// for(let i=0;i<data.length;i++){
+//   if(i!==(data.length-1)){
+//   if(data[i].vehicleName==data[i+1].vehicleName){
+//     if(data[0].switch=="OFF"){
+//     if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+//       // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+//       var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+//       var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+//       this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:data[i].device.Device_ID})
+//       // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:data[i].device.Device_ID})
+//     }
+//   }
+//   else{
+//     if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+//       // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+//        var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+//       var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+//       this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:data[i].device.Device_ID})
+//     }
+//   }
+//   }
+// }else{
+//   this.finalArrayBuild()
+// }
+// }
+// }
+
+timeDifference(date1,date2) {
+
+  var seconds = (date1.getTime() - date2.getTime()) / 1000;
+  return seconds
+}
+
+// finalArrayBuild(){
+//  var tempSec=0;
+//   var result = this.workingHoursArray.reduce(function (r, a) {
+//         r[a.Device_ID] = r[a.Device_ID] || [];
+//         r[a.Device_ID].push(a);
+//         return r;
+//     }, Object.create(null));
+//     for(var i=0;i<this.deviceArr.length;i++){
+//       if(result[this.deviceArr[i]]){
+//       for(var j=0;j<result[this.deviceArr[i]].length;j++){
+//         tempSec=tempSec+result[this.deviceArr[i]][j].timestamp;
+//       }
+//     }
+//         var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+//         var stopHrs=this.secondsToHms((time-tempSec))
+//         console.log("++++11",stopHrs);
+//         if(result[this.deviceArr[i]])
+//         this.totalWorkingHours.push({Device_ID:result[this.deviceArr[i]][j-1].Device_ID,deviceName:result[this.deviceArr[i]][j-1].deviceName,workingHours:this.secondsToHms(tempSec),stopHours:stopHrs});
+//       // }
+      
+//       tempSec=0
+//     }
+//   console.log("sec==>",this.secondsToHms(tempSec),"TOTAL=-",this.totalWorkingHours);
+
+// }
+
+secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
+    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
+    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
+    return hDisplay + mDisplay + sDisplay; 
+
+}
+
+// downloadPdf(){
+//    var doc = new jsPDF("p", "pt", "a2");
+//    var header = function(data) {
+//                       doc.setFontSize(15);
+//                       doc.setTextColor(40);
+//                       doc.setFontStyle('normal');
+//                       // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+//                       doc.text("Ac Report", data.settings.margin.left, 50);
+//                     };
+
+//     doc.autoTable({html:"#deviceTable",margin:{bottom:140,left:30,right:8,top:80},theme:'grid',beforePageContent: header},);
+//     doc.save("Ac Report");
+// }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "AC Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  doc.text("AC Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      html:"#deviceTable",
+      options,
+      styles: {overflow: 'linebreak'},
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+ngOnDestroy(){
+   
+    this.finalise.next(void 0);
+  }
+
+}
diff --git a/src/app/report/report component/ac-report/acreport-info/acreport-info.component.html b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.html
new file mode 100644
index 0000000..8dbe8c4
--- /dev/null
+++ b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.html	
@@ -0,0 +1,54 @@
+<!-- <div style="max-height: 550px;height: auto;border-radius: 8px">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div *ngIf="showError">
+    <p></p>
+  </div>
+  <table id="test" class="table table-striped table-hover" style="height: 500px ;overflow: auto;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Vehicle' | translate}}</th>
+        <th style="text-align: center">{{'On/Off' | translate}}</th>
+        <th style="text-align: center">{{'Time' | translate}}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let report of tableArr; let i=index;">
+        <td style="text-align: center">{{report.vehicleName}}</td>
+        <td style="text-align: center">{{report.action}}</td>
+        <td style="text-align: center">{{report.actionTime | date : 'medium'}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div> -->
+
+<div style="height: 535px;">
+  <div class="row" no-padding>
+    <div class="col-9" no-padding>
+      <h4 style="text-align: center; margin-left: 25%;">{{'Ac Report Details' | translate}}</h4>
+    </div>
+    <div class="col-3" style="text-align: right" no-padding>
+      <i class="far fa-times-circle" style="font-size: 25px;color: red;margin-top: 2px;" (click)="cancel()"
+        title="Close"></i>
+    </div>
+  </div>
+  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
+  <div>
+    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th>{{'Time' | translate}}</th>
+          <th>{{'Vehicle Name' | translate}}</th>
+          <th>{{'Ignition Status' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let flobj of ignitionObj">
+          <td>{{flobj.timestamp | date : 'd/M/yyyy, h:mm a'}}</td>
+          <td>{{flobj.vehicleName}}</td>
+          <td>{{flobj.switch}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/ac-report/acreport-info/acreport-info.component.scss b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/ac-report/acreport-info/acreport-info.component.spec.ts b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.spec.ts
new file mode 100644
index 0000000..ff8095f
--- /dev/null
+++ b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AcreportInfoComponent } from './acreport-info.component';
+
+describe('AcreportInfoComponent', () => {
+  let component: AcreportInfoComponent;
+  let fixture: ComponentFixture<AcreportInfoComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AcreportInfoComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AcreportInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/ac-report/acreport-info/acreport-info.component.ts b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.ts
new file mode 100644
index 0000000..002402c
--- /dev/null
+++ b/src/app/report/report component/ac-report/acreport-info/acreport-info.component.ts	
@@ -0,0 +1,95 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../../contact.service';
+
+@Component({
+  selector: 'app-acreport-info',
+  templateUrl: './acreport-info.component.html',
+  styleUrls: ['./acreport-info.component.scss']
+})
+export class AcreportInfoComponent implements OnInit {
+  useridd: any;
+  organisationFlag: any;
+  superAdmin: any;
+  isDealer: any;
+  ignitionObj=[];
+digitalInput
+  constructor(public dialogRef: MdDialogRef<AcreportInfoComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+    this.digitalInput=data.deviceInfo
+      // console.log('data=>',data);
+      // console.log('data.fromDate',data.deviceInfo.fromDate);
+      // console.log('data.toDate',data.deviceInfo.toDate);
+      // this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      // this.Fromdate = new Date(data.deviceInfo.fromDate);
+      // this.todate = new Date(data.deviceInfo.toDate);
+      // this.vehimei = data.deviceInfo.imei;
+      // console.log(data.deviceInfo);
+      // console.log(this.vehimei);
+      
+     }
+
+   ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+    this.organisationFlag = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOrganisation  ;     
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      this.isDealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      // if(this.digitalInput==1)
+      // {
+      //   this.getIgnitionReport();
+      // }else{
+      //   this.AcReport()
+      // }
+      this.ignitionObj=this.digitalInput
+  }
+
+  cancel(){
+    this.dialogRef.close('close');
+
+  }
+
+  AcReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    var suburl = "";
+     suburl += "/notifs/acReport?from_date=" + payload.fromDate +'&to_date=' + payload.toDate + '&_u=' + payload.user +'&device='+payload.device;
+              if((payload.fromDate != undefined)&&(payload.toDate != undefined)){
+                this.contactService.get(suburl).subscribe(resp => {  
+                  console.log(resp[0].s)
+                this.ignitionObj = resp[0].s;
+                })
+              }
+
+  }
+
+   getIgnitionReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    console.log(payload);
+    this.contactService.getIgnition(payload).subscribe(res=>{
+      console.log(res);
+      this.ignitionObj = res;
+
+    })
+  }
+}
diff --git a/src/app/report/report component/alert-report/alert-report.component.html b/src/app/report/report component/alert-report/alert-report.component.html
new file mode 100644
index 0000000..0bb64a2
--- /dev/null
+++ b/src/app/report/report component/alert-report/alert-report.component.html	
@@ -0,0 +1,85 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <app-all-menus></app-all-menus>
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+
+  <div style="min-height:100vh">
+    <p class="headStyle">{{'Alert Report' | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--Select Device--"  ngDefaultControl>
+            <md-option *ngFor="let option of options" [value]="option">
+              {{ option.value }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="alertReport(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead>
+        <tr>
+          <th>{{'No' | translate}}</th>
+          <th> {{'Date' | translate}}</th>
+          <th>{{'Power Cut' | translate}}</th>
+          <th>{{'Battery' | translate}}</th> 
+          <th>{{'SOS' | translate}}</th>   
+          <th>{{'Ignition' | translate}}</th> 
+          <th>{{'Geofencing' | translate}}</th> 
+          <th>{{'Overspeeding' | translate}}</th>    
+
+        </tr>
+      </thead>
+      <tbody>
+        <!-- <tr *ngFor="let device of alert_data">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.overSpeed}}</td>
+          <td style="cursor:pointer">{{device.address}}</td>
+          <td style="cursor:pointer">{{device.timestamp}}</td>
+        </tr> -->
+      </tbody>
+    </table>
+
+
+
+  </div>
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/report/report component/alert-report/alert-report.component.scss b/src/app/report/report component/alert-report/alert-report.component.scss
new file mode 100644
index 0000000..ede7a15
--- /dev/null
+++ b/src/app/report/report component/alert-report/alert-report.component.scss	
@@ -0,0 +1,1094 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+  
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+
+    // .dtStyle{
+
+    // }
+  }
+  
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
+
+    
\ No newline at end of file
diff --git a/src/app/report/report component/alert-report/alert-report.component.spec.ts b/src/app/report/report component/alert-report/alert-report.component.spec.ts
new file mode 100644
index 0000000..b929063
--- /dev/null
+++ b/src/app/report/report component/alert-report/alert-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertReportComponent } from './alert-report.component';
+
+describe('AlertReportComponent', () => {
+  let component: AlertReportComponent;
+  let fixture: ComponentFixture<AlertReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AlertReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/alert-report/alert-report.component.ts b/src/app/report/report component/alert-report/alert-report.component.ts
new file mode 100644
index 0000000..e4280f7
--- /dev/null
+++ b/src/app/report/report component/alert-report/alert-report.component.ts	
@@ -0,0 +1,295 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Component({
+  selector: 'app-alert-report',
+  templateUrl: './alert-report.component.html',
+  styleUrls: ['./alert-report.component.scss']
+})
+export class AlertReportComponent implements OnInit {
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate= new Date();
+  options=[];
+  logo:any;
+  before:any;
+
+  superAdmin:Boolean = false;
+  date1:any;
+
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log(this.options);
+      });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       
+  }
+
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+
+  vehicleRoute(){
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+
+  notification(){
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  driverPerformance(){
+    this.cond = false;
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+alert_data=[];
+
+alertreport(){
+  this.cond = false
+
+  this.router.navigateByUrl("device-report/alert_report");
+
+}
+
+alertReport(Fromdate,todate,option){
+  // console.log("alert Details");
+}
+
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+
+
+
+}
diff --git a/src/app/report/report component/daily-details/daily-details.component.html b/src/app/report/report component/daily-details/daily-details.component.html
new file mode 100644
index 0000000..28a02a6
--- /dev/null
+++ b/src/app/report/report component/daily-details/daily-details.component.html	
@@ -0,0 +1,91 @@
+<div class=modal-header style="margin-bottom: 6px;">
+  <h4>Trip Details</h4>
+  <div class="text-right">
+    <button class="mat-raised-button" md-raised-button="" style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
+              width: 110px;" (click)="exportExcel()"><span class="mat-button-wrapper">Export To
+        Excel</span>
+      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+      <div class="mat-button-focus-overlay"></div>
+    </button>
+    <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
+                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i
+          class="fa fa-times" aria-hidden="true"></i>
+      </span>
+      <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+        ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+      <div class="mat-button-focus-overlay"></div>
+    </button>
+  </div>
+</div>
+<h5>{{DeviceName}} &nbsp;&nbsp;{{date | date}}</h5>
+<div class="row">
+<div class="col-sm-3 col-md-3 col-lg-3">
+
+<table style="margin-top: 35px;" class="table table-bordered">
+  <tbody>
+    <tr>
+      <th>Distance</th>
+      <td>{{mainData.today_odo | number:'1.1-2'}}</td>
+     
+    </tr>
+    <tr>
+      <th>Running</th>
+      <td>{{Running}}</td>
+    
+    </tr>
+    <tr>
+      <th>Idle</th>
+      <td>{{Idle}}</td>
+     
+    </tr>
+    <tr>
+      <th>Stop</th>
+      <td>{{Stop}}</td>
+     
+    </tr>
+  </tbody>
+</table>
+
+</div>
+<div class="col-sm-9 col-md-9 col-lg-9">
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <!-- <div class="col-sm-12 col-md-12 col-lg-12">
+          <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+            style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+            | translate}} >></button>
+          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+            style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+            << {{'Previous' | translate}}</button>
+        </div> -->
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="loading" *ngIf="Load">Loading&#8230;</div>
+          <div>
+            <table id="dailyDetailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align: left;">{{'Event' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Time' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                  <th style="text-align: left;">{{'End Time' | translate}}</th>
+                  <th style="text-align: left;">{{'End Location' | translate}}</th>
+                  <th style="text-align: left;">{{'Duration' | translate}}</th>
+                  <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                  <!--<th style="text-align: left;">{{'Details' | translate}}</th> -->
+
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/daily-details/daily-details.component.scss b/src/app/report/report component/daily-details/daily-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/daily-details/daily-details.component.spec.ts b/src/app/report/report component/daily-details/daily-details.component.spec.ts
new file mode 100644
index 0000000..7d2944b
--- /dev/null
+++ b/src/app/report/report component/daily-details/daily-details.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DailyDetailsComponent } from './daily-details.component';
+
+describe('DailyDetailsComponent', () => {
+  let component: DailyDetailsComponent;
+  let fixture: ComponentFixture<DailyDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DailyDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/daily-details/daily-details.component.ts b/src/app/report/report component/daily-details/daily-details.component.ts
new file mode 100644
index 0000000..c7aa2f2
--- /dev/null
+++ b/src/app/report/report component/daily-details/daily-details.component.ts	
@@ -0,0 +1,514 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../contact.service';
+declare var $: any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-daily-details',
+  templateUrl: './daily-details.component.html',
+  styleUrls: ['./daily-details.component.scss']
+})
+export class DailyDetailsComponent implements OnInit {
+  Load: boolean;
+  Fromdate: any;
+  todate: any;
+  useridd: any;
+  skip: any;
+  deviceArr: any;
+  reportArr: any[];
+  firstcall: boolean;
+  lastcall: boolean;
+date:any;
+device_id:any
+mainData
+Running
+Idle
+Stop
+DeviceName
+  constructor(public dialogRef: MdDialogRef<DailyDetailsComponent>,private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+       console.log('data=>',data);
+       this.mainData=data.data
+       this.Running=this.millisecondConversion(this.mainData.today_running?this.mainData.today_running:0);
+       this.Idle=this.millisecondConversion(this.mainData.t_idling);
+       this.Stop=this.millisecondConversion(this.mainData.today_stopped);
+       this.date=data.date;
+        this.DeviceName=this.mainData.Device_Name
+       this.device_id=data.data._id
+     
+    }
+
+
+  ngOnInit() {
+    this.testTable()
+  }
+  // Start Time	Start Location	Start Odometer	Start Coordinate	Reach Time	Reach Location	End Odometer	Reach Coordinate	Driver	Distance	Total Distance	Running 	Idle	Stop	AVG	MAX	Over Speed	Alert
+
+  tabelObj: any ;
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#dailyDetailsTable').DataTable({
+             
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+
+             
+            },
+          ajax: (dataTablesParameters,callback) => {
+           
+              var deviceID;
+              
+              that.Load = true;
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+        // user_trip/StoppageLogs?date=2020-12-31T11:48:45.670Z&device=5fc8af44aa0b1b5f1b778fcf
+            var suburl = "";
+            var limit = 26;
+            suburl += "/user_trip/StoppageLogs?date=" + that.date +"&device="+that.device_id
+            // if(that.deviceArr.length != 0){  
+            //   suburl +='&device='+that.deviceArr;
+            // }
+            that.contactService.get(suburl).subscribe((resp:any) => {   
+                that.Load = false;  
+                that.reportArr = [];
+                that.reportArr= resp.result ;           
+                if (that.reportArr.length != 0) {
+                  var j = 0;
+                  console.log(that.reportArr);
+                  
+                  var finalArr =  that.reportArr.sort((a, b) => new Date(b.start_time).valueOf() - new Date(a.start_time).valueOf());
+                  console.log(finalArr);
+                  // for (var i = 0; i < that.reportArr.length; i++) {
+                  //   re
+                  // }
+    
+                  //   that.clocation_1(that.reportArr[i], function (err, succ) {
+                  //     if (err) {
+                  //       console.log(err);
+                  //       j++;
+                  //     } else {
+                  //       finalArr.push(succ);
+                  //       console.log(finalArr);
+                  //       j++;
+                  //       if (j === that.reportArr.length) {
+                  //         that.Load = false;
+                          callback({ data: finalArr });
+                  //       }
+                  //     }
+                  //   })
+    
+                   
+                  // }
+                } else {
+                  that.Load = false;
+                  that.firstcall=true;
+                  that.lastcall=(that.skip>0)?false:true;
+                  callback({ data: [] });
+    
+                }
+            }, err => {   
+              that.Load= false;    
+              callback({ data: [] });
+              console.log("error",err) ;     
+            });
+        },  "aaSorting": [],
+          "columns": [
+              {
+                  "data": "type",
+                  "render": function(data, type, row) {                   
+                    return row.type?row.type:'';
+                  }
+              },
+               {
+                  "data": "start_time",
+                  "render": function(data, type, row) {  
+                    var start_time
+                     if(row != undefined){
+                        start_time =moment(row.start_time).format('lll') 
+                  //  start_time =  row.start_time;
+                  }else{
+                    start_time = '0:0'
+                  }
+                    return start_time;
+                  }
+              },
+              {
+                  "data": "start_location",
+                  "render": function(data, type, row) {  
+                    var start_location
+                     if(row.start_location != undefined){
+                   start_location =  row.start_location;
+                  }else{
+                    start_location = 'N/A'
+                  }
+                    return start_location;
+                  }
+              },
+              {
+                  "data": "end_time",
+                  "render": function(data, type, row) {  
+                     var end_time
+                     if(row != undefined){
+                   end_time =moment(row.end_time).format('lll')  
+
+                  }else{
+                    end_time = '0:0'
+                  }
+                    return end_time;
+                  }                 
+                    // return end_time;
+                  },
+                  
+              {
+                  "data": "end_location",
+                  "render": function(data, type, row) {  
+                     var end_location
+                     if(row.end_location != undefined){
+                   end_location =  row.end_location;
+                  }else{
+                    end_location = 'N/A'
+                  }
+                    return end_location;
+                  }                 
+                    // return end_time;
+                  },
+              
+               {
+                  "data": "event_time",
+                  "render": function(data, type, row) { 
+                      var event_time
+                     if(row != undefined){
+                       
+                   event_time =  that.millisecondConversion(parseInt(row.event_time));
+                  }else{
+                    event_time = '0:0'
+                  }
+                    return event_time;
+                  }   
+                    // return row.event_time;
+                  },
+                  {
+                  "data": "distance",
+                  "render": function(data, type, row) { 
+                      var distance
+                  if(row.distance != undefined){
+                      distance =  (row.distance/1000).toFixed(2);
+                  }else{
+                    distance = '0:0'
+                  }
+                    return distance;
+                  }   
+                    
+                  }
+              // },
+     
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4] },  
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },  
+          { "width": "10px", "targets": 4 },   
+ 
+    //       {
+    //     targets: -1, //-1 es la ultima columna y 0 la primera
+    //     data: null,
+    //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+    // },
+          ] 
+      });
+      // that.tabelObj.sort
+
+  });
+
+}
+
+millisecondConversion(duration){
+  
+  // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+  //   var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    
+  //   hours = (hours < 10) ? 0 + hours : hours;
+  //   minutes = (minutes < 10) ? 0 + minutes : minutes;
+    
+  //   return hours + ":" + minutes ;
+    
+    var x = duration;
+    var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours + ":" + mins;
+  
+}
+millisecondConversion2(totalSeconds){
+  var minute= totalSeconds/60000
+  var second=0
+  var totalTime
+  if(minute>=60){
+    totalTime=minute/60
+  }else{
+    totalTime=minute
+  }
+  console.log(totalTime);
+  
+  return totalTime;
+  // var hours   = Math.floor(totalSeconds / 3600);
+  // var minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
+  // var seconds = totalSeconds - (hours * 3600) - (minutes * 60);
+
+  // // round seconds
+  // seconds = Math.round(seconds * 100) / 100
+
+  // var result = (hours < 10 ? "0" + hours : hours);
+  //     result += "-" + (minutes < 10 ? "0" + minutes : minutes);
+  //     result += "-" + (seconds  < 10 ? "0" + seconds : seconds);
+  // return result;
+
+}
+
+exportExcel() {
+  for(var i=0;i<this.reportArr.length;i++){
+    if(this.reportArr[i].event_time)
+    this.reportArr[i].event_time=this.millisecondConversion(parseInt(this.reportArr[i].event_time));
+    if(this.reportArr[i].distance)
+    this.reportArr[i].distance=(this.reportArr[i].distance/1000).toFixed(2);
+  }
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Trip Details') {
+   
+    let arrHeader = ["type", "start_time", "Start Location", "end_time","End Location","event_time","distance"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Trip Details.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Trip Details \r\n'+this.DeviceName+"   "+this.date+" \r\n"+"Distance: "+(this.mainData.today_odo).toFixed(2)+" \r\n"+
+    "Running:"+this.Running+" \r\n"+"Idle:"+this.Idle+" \r\n"+"Stop:"+this.Stop+" \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders =["Event", "Start Time", "Start Location", "End Time","End Location","Duration","Total K.M."];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+tab:any;
+  exportExcels()
+	{
+   console.log("Export");
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#dailyDetailsTable').clone();
+    
+      table[1].querySelector("thead").remove();
+      // table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+    
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  clocation_1(latlngObj,cb){
+
+  var outerThis = this;
+  var la = '';
+
+  let latLng = {
+    lat :"0",
+    long:"0"
+  };
+  if(latlngObj.start_location){
+     latLng = {
+      lat: latlngObj.start_location.lat?latlngObj.start_location.lat:0,
+      long:latlngObj.start_location.long?latlngObj.start_location.long:0
+    }
+  }
+  if(latlngObj.today_start_location){  
+     latLng = {
+      lat: latlngObj.today_start_location.lat?latlngObj.today_start_location.lat:0,
+      long: latlngObj.today_start_location.long?latlngObj.today_start_location.long:0
+    }        
+  }  
+
+  // if () {
+  //   latLng = {
+  //     lat: 0,
+  //     long: 0
+  //   }
+  // }
+  
+  outerThis.contactService.getAddressByApi(latLng).subscribe(res=>{       
+    console.log('resaddresscomingfromAPi',res);   
+    if(res.message == "Address not found in databse"){
+        latlngObj['startAddress'] = "NA"; 
+      // cb(null,latlngObj);
+        var latLng_1 = {
+          lat :"0",
+          long:"0"
+        };
+        if(latlngObj.last_location){
+          latLng_1 = {
+            lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+            long:latlngObj.last_location.long?latlngObj.last_location.long:0
+          }
+         
+        }
+        if(latlngObj.end_location){  
+          latLng_1 = {
+            lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+            long: latlngObj.end_location.long?latlngObj.end_location.long:0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+          console.log('resaddresscomingfromAPi',res);
+          if(res.message == "Address not found in databse"){
+            latlngObj['endAddress'] = "NA"; 
+            cb(null,latlngObj);
+
+        
+          }else{
+            latlngObj['endAddress'] = res.address; 
+            cb(null,latlngObj);
+          }
+
+        })
+  
+    }else{  
+      latlngObj['startAddress'] = res.address; 
+      var latLng_1 = {
+        lat :"0",
+        long:"0"
+      };
+      if(latlngObj.last_location){
+        latLng_1 = {
+          lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+          long:latlngObj.last_location.long?latlngObj.last_location.long:0
+        }
+       
+      }
+      if(latlngObj.end_location){  
+        latLng_1 = {
+          lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+          long: latlngObj.end_location.long?latlngObj.end_location.long:0
+        }
+      }
+
+     
+      outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+        console.log('resaddresscomingfromAPi',res);
+        if(res.message == "Address not found in databse"){
+          latlngObj['endAddress'] = "NA"; 
+          cb(null,latlngObj);
+
+      
+        }else{
+          latlngObj['endAddress'] = res.address; 
+          cb(null,latlngObj);
+        }
+
+      })
+
+      // cb(null,latlngObj);
+    }
+  })
+
+}
+
+
+
+
+
+}
diff --git a/src/app/report/report component/daily-logs/daily-logs.component.html b/src/app/report/report component/daily-logs/daily-logs.component.html
new file mode 100644
index 0000000..d3eb161
--- /dev/null
+++ b/src/app/report/report component/daily-logs/daily-logs.component.html	
@@ -0,0 +1,74 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>Daily Logs</h4>
+      <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th style="text-align:left;" title="Vehicle Name">{{'Vehicle' | translate}}</th>
+                    <th style="text-align:left;" title = "Device IMEI">{{'IMEI' | translate}}</th>       
+                    <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
+                    <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF'| translate}}</th>
+                    <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
+                    <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
+                    <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{"No GPS"|translate}}</th>
+                    <th style="text-align:left;">{{'Trips' | translate}}</th>
+                    <th style="text-align:left;" title="Max Speed (Km/hr)">{{"Max Speed" | translate}}</th>  
+                    <th style="text-align:left;" >{{'Start Location' | translate}}</th>  
+                    <th style="text-align:left;">{{'End Location' | translate}}</th>  
+                    <th style="text-align:left;" >{{'Start ODO (Kms.)' | translate}}</th>  
+                    <th style="text-align:left;">{{'End ODO (Kms.)' | translate}}</th>  
+                    <th style="text-align:left;" title="(As per Logbook)">{{'Total KMS (As per Logbook)' | translate}}</th>  
+                    <th style="text-align:left;" title="Total Distance (Km)">{{'Total KMS (As per GPS)' | translate}}</th>
+                    <th style="text-align:left;" title="(As per Logbook and gps)">{{'Difference In Logbook and Gps' | translate}}</th>  
+                    <th style="text-align:left;">{{'% of difference' | translate}}</th> 
+             
+                  </tr>
+              </thead>  
+          </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+
+
diff --git a/src/app/report/report component/daily-logs/daily-logs.component.scss b/src/app/report/report component/daily-logs/daily-logs.component.scss
new file mode 100644
index 0000000..efc4dde
--- /dev/null
+++ b/src/app/report/report component/daily-logs/daily-logs.component.scss	
@@ -0,0 +1,86 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/daily-logs/daily-logs.component.spec.ts b/src/app/report/report component/daily-logs/daily-logs.component.spec.ts
new file mode 100644
index 0000000..b17dd46
--- /dev/null
+++ b/src/app/report/report component/daily-logs/daily-logs.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DailyLogsComponent } from './daily-logs.component';
+
+describe('DailyLogsComponent', () => {
+  let component: DailyLogsComponent;
+  let fixture: ComponentFixture<DailyLogsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DailyLogsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyLogsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/daily-logs/daily-logs.component.ts b/src/app/report/report component/daily-logs/daily-logs.component.ts
new file mode 100644
index 0000000..4cf8e8b
--- /dev/null
+++ b/src/app/report/report component/daily-logs/daily-logs.component.ts	
@@ -0,0 +1,1100 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { Router } from '@angular/router';
+import { TypeaheadDirective } from 'ngx-bootstrap';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ContactService } from '../../../contact.service';
+import { ReportService } from '../../report.service';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var moment : any;
+
+@Component({
+  selector: 'app-daily-logs',
+  templateUrl: './daily-logs.component.html',
+  styleUrls: ['./daily-logs.component.scss']
+})
+export class DailyLogssComponent implements OnInit {
+  deviceArr: any = [];
+  showSelectdevice: boolean = false;
+  identifier = 'daily_report';
+  reportArr: any[];
+  ingData: any
+  from1: any;
+  show:boolean=false
+  to1: any;
+  from2: any;
+  to2: any;
+  too: any;
+  date1: any;
+  Fromdate: any;
+  todate: any;
+  options = [];
+  option: any;
+  dataSelect: any = [];
+  from: any;
+  to: any;
+  before: any;
+  mb: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  superAdmin: Boolean = false;
+  finalArr=[]
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  device_data: any;
+  time: any;
+  Load: Boolean = false;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  devicess: any;
+  finall: any;
+  logo: any;
+  text: any;
+  test: number;
+  data_descip:any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService, private router: Router,private snackbar:MdSnackBar, public dialog: MdDialog,private _service:ReportService) {
+     this._service.invokeEventForDailyLogs.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+          this.show=true
+         this.getReport(value); 
+       }
+      console.log(value);
+      
+      }); 
+   }
+
+    ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+
+  ngOnInit() {
+    this.dataSelect = [];
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.getDevices();
+    // this.dailyReport();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+    this.testTable();
+
+  }
+
+
+  tab: any;
+  exportExcel() {
+
+
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+      //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text = tab_text + "</table>";
+    tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+
+  skip: number = 0;
+  limit: number = 10;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+
+
+  tabelObj: any;
+  callfunction(): void {
+    this.Load = true;
+    this.deviceArr = $('#select').multipleSelect('getSelects', 'value');
+    this.tabelObj.draw();
+  }
+  dtOptions: any = {}
+  testTable() {
+    const that = this;
+
+    this.Load = true;
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],
+        "processing": true,
+        "searching": false,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: true,
+        "scrollY": '55vh',
+        "scrollX": true,
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters: any, callback) => {
+          that.Load = true;
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+          var currDay = new Date().getDay();
+          var currMonth = new Date().getMonth();
+          var currYear = new Date().getFullYear();
+          var selectedDay = new Date(that.date1).getDay();
+          var selectedMonth = new Date(that.date1).getMonth();
+          var selectedYear = new Date(that.date1).getFullYear();
+
+          if ((currDay == selectedDay) && (currMonth == selectedMonth) && (currYear == selectedYear)) {
+            var devname = "Device_Name";
+            var devid = "Device_ID";
+            var today_odo = "today_odo";
+            var today_running = "today_running";
+            var today_stopped = "today_stopped";
+            var today_trips = "today_trips";
+            var maxSpeed = "maxSpeed";
+            var Mileage = "Mileage";
+            var start_location_lat = "today_start_location.lat";
+            var start_location_long = "today_start_location.long";
+            var end_location_lat = "last_location.lat";
+            var end_location_long = "last_location.long";
+            var start_odo_manual = "start_odo_manual";
+            var end_odo_manual = "end_odo_manual";
+
+          } else {
+
+            var devid = "imei";
+            var devname = "ID.Device_Name";
+            var today_odo = "today_odo";
+            var today_running = "today_running";
+            var today_stopped = "today_stopped";
+            var today_trips = "today_trips";
+            var maxSpeed = "ID.maxSpeed";
+            var Mileage = "Mileage";
+            var start_location_lat = "start_location.lat";
+            var start_location_long = "start_location.long";
+            var end_location_lat = "end_location.lat";
+            var end_location_long = "end_location.long";
+            var start_odo_manual = "start_odo_manual";
+            var end_odo_manual = "end_odo_manual";
+
+          }
+
+          dataTablesParameters.columns = [
+            // {data: "_id" },
+            { data: devname },
+            { data: devid },
+            { data: today_odo },
+            { data: today_running },
+            { data: Mileage },
+            { data: today_stopped },
+            { data: today_trips },
+            { data: maxSpeed },
+            { data: "t_idling" },
+            { data: "t_noGps" },
+            { data: "t_ofr" },
+            { data: start_location_lat },
+            { data: start_location_long },
+            { data: end_location_lat },
+            { data: end_location_long },
+            { data: start_odo_manual },
+            { data: end_odo_manual },
+            { data: null, defaultContent: '' }
+          ]
+
+          var deviceID;
+          dataTablesParameters.find.user_id = that.useridd;
+
+          if (that.deviceArr.length != 0) {
+
+            var dev_in = { '$in': that.deviceArr };
+            dataTablesParameters.find.devId = dev_in;
+          }
+
+          // if ((that.dataSelect.length!=0)&&(that.dataSelect[0].did!='all')) {
+          //     dataTablesParameters.find.devId = that.dataSelect[0].did;
+          // }
+
+          if (that.date1) {
+            var fdate = new Date(that.date1).toISOString()
+            // dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find.date = that.date1
+          };
+          if(that.date1 && that.deviceArr.length != 0){
+          var suburl = "";
+          suburl += "/devices/daily_report";
+          that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+            that.reportArr = [];
+            that.reportArr = resp['data'];
+            if (that.reportArr.length != 0) {
+              var j = 0;
+              that.finalArr = [];
+              for (var i = 0; i < that.reportArr.length; i++) {
+
+                that.clocation_1(that.reportArr[i], function (err, succ) {
+                  if (err) {
+                    console.log(err);
+                    j++;
+                  } else {
+                    that.finalArr.push(succ);
+                    console.log(that.finalArr);
+                    j++;
+                    if (j === that.reportArr.length) {
+                      callback({ data: that.finalArr });
+                    }
+                  }
+                })
+
+                that.Load = false;
+              }
+            } else {
+              that.Load = false;
+              callback({ data: [] });
+
+            }
+
+            // that.Load= false;         
+            // callback(resp);
+          }, err => {
+            that.Load = false;
+
+          });
+        }else {
+          that.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+            
+              that.Load = false;
+              callback({ data: [] });
+
+            }
+
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){ 
+          $('#manual_start', row).bind('click', () => {         
+            var msE = document.getElementById("openingReading"); 
+            var manualStartEntry = msE['value'] ; 
+            console.log('manualStartEntry',manualStartEntry);
+            var updateEntry = {
+              start_odo : manualStartEntry , 
+              id: data._id
+            };
+        
+          
+            that.contactService.updatedailyLog(updateEntry).subscribe(res=>{
+              that.data_descip = "Value Saved" ;  
+
+              launch_toast()
+              function launch_toast() {
+                // console.log(divid);
+                 var x = document.getElementById("toast")
+                 //console.log(x);
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+             }
+
+             that.tabelObj.ajax.reload();
+
+            },err=>{
+
+            })
+  
+          }); 
+          $('#manual_end', row).bind('click', () => {          
+            var mEE = document.getElementById('closingReading');
+            var manualEndEntry = mEE['value'];
+            console.log('manualEndEntry',manualEndEntry);
+            var updateEntry = {
+              end_odo:manualEndEntry,
+              id : data._id
+            };
+         
+            that.contactService.updatedailyLog(updateEntry).subscribe(res=>{
+              that.data_descip = "Value Saved" ;  
+              launch_toast()
+              function launch_toast() {
+                // console.log(divid);
+                 var x = document.getElementById("toast")
+                 //console.log(x);
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+             }
+             that.tabelObj.ajax.reload();
+
+            },err=>{
+
+            })
+              
+          }); 
+           },
+        "columns": [
+          {
+            "data": "Device_Name",
+            "defaultContent": "_id",
+            "render": function (data, type, row) {
+
+              if (row.Device_Name) {
+                return row.Device_Name
+              }
+              if (row.ID != null) {
+                return row.ID.Device_Name;
+              } else {
+                return "";
+              }
+
+            }
+          },
+          {
+            "data": "Device_ID",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return row.Device_ID ? row.Device_ID : row.imei;
+              // if(row.Device_ID){
+              //   return row.Device_ID;
+              //  }else{
+              //   row.imei;
+              //  }
+
+            }
+          },
+          {
+            "data": "Mileage",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              var mileage = ((data == undefined) || (data == NaN)) ? "NA" : (row.today_odo / parseFloat(data)).toFixed(2);
+              return mileage;
+            }
+          },
+          {
+            "data": "today_running",
+            render: function (data, type, row) {
+              var ign_on: any;
+
+              if (data != undefined) {
+                ign_on = that.millisecondConversion(parseInt(data));
+              } else {
+                ign_on = '0:0'
+              }
+
+
+
+              return ign_on;
+            }
+          },
+          {
+            "data": "today_stopped",
+            render: function (data, type, row) {
+
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var stopped = that.millisecondConversion(data);
+              } else {
+                var stopped = "0:0";
+              }
+              return stopped;
+            }
+          },
+          {
+            "data": "t_idling",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var idleTime = that.millisecondConversion(data);
+              } else {
+                var idleTime = "0:0";
+              }
+              return idleTime;
+            }
+          },
+          {
+            "data": "t_ofr",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                var ofr = that.millisecondConversion(data);
+              } else {
+                var ofr = "0:0";
+              }
+              return ofr;
+            }
+
+          },
+          {
+            "data": "t_noGps",
+            render: function (data, type, row) {
+
+              if ((data != undefined) && (data != null) && (data != NaN)) {
+                if ((data < 60000) && (data == undefined)) {
+                  var seconds = Math.floor((data / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+
+                  var n_gps = "0:0:" + seconds;
+                } else {
+                  var n_gps_1 = that.millisecondConversion(data);
+                  var n_gps = n_gps_1 + ':0'
+                }
+              } else {
+                var n_gps = "0:0:0";
+              }
+              return n_gps;
+            }
+
+          },
+          {
+            "data": "today_trips",
+            render: function (data, type, row) {
+              return data;
+            }
+          },
+          {
+            "data": "maxSpeed",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data;
+              if (row.maxSpeed) {
+                return row.maxSpeed
+              }
+              if (row.ID != null) {
+                return row.ID.maxSpeed;
+              } else {
+                return 0;
+              }
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+
+              return data ? data : "";
+
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+
+              return data ? data : "";
+            }
+          },
+          {
+            "data": "start_odo_manual",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+     
+              var inputField = '<div style="display:flex">'+
+              '<input type="number" style="width: 60px; margin-right: 6px;" placeholder ="Opening Reading (Logbook)" id="openingReading">'+
+              '<i id="manual_start" style="font-size:20px;color:green;cursor:pointer" title="Save Start ODO" class="fas fa-save"></i>'+
+              '</div>'; 
+              return data ? data : inputField;
+              
+            }
+          },
+          {
+            "data": "end_odo_manual",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              var inputField_1 = '<div style="display:flex">'+
+              '<input type="number" style="width: 60px; margin-right: 6px;" placeholder="Closing Reading (Logbook)" id="closingReading">'+
+              '<i id="manual_end" style="font-size:20px;color:green;cursor:pointer" title="Save End ODO" class="fas fa-save"></i>'+
+              '</div>'; 
+
+              return data ? data : inputField_1;
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var c : any;
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+              }else{
+               c = null ; 
+              }
+
+              return c;
+            }
+          },
+          
+          {
+            "data": "today_odo",
+            render: function (data, type, row) {
+              return data.toFixed(2);
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var d =  row.today_odo.toFixed(2) ; 
+              var c : any;
+              var e : any ; 
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+                e = d - c ; 
+              }else{
+               c = null ; 
+               e = null ; 
+              }
+              return e;
+            }
+          },
+          {
+            "data": "_id",
+            "defaultContent": "",
+            render: function (data, type, row) {
+
+              var a =  row.start_odo_manual ; 
+              var b= row.end_odo_manual ; 
+              var d =  row.today_odo.toFixed(2) ; 
+              var c : any;
+              var e : any ;
+              var f : any;  
+              if((b != undefined)&&(a != undefined)){
+                c = parseFloat(b) - parseFloat(a) ;
+                e = d - c ; 
+                f = (e/d)*100 ; 
+
+              }else{
+               c = null ; 
+               e = null ; 
+               f = null; 
+              }
+              return f;
+            }
+          }
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "50px", "targets": [10,11,14,15,16]}  
+        ]
+      });
+
+    });
+
+  }
+
+
+  millisecondConversion(duration) {
+   
+    // var minutes = Math.floor((duration / (1000 * 60)) % 60);
+    // var hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    // hours = (hours < 10) ? 0 + hours : hours;
+    // minutes = (minutes < 10) ? 0 + minutes : minutes;
+  
+    // return hours + ":" + minutes;
+
+    
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+var mainMIn = (hours>=24)?0:mins;
+return  hours + ":" + mainMIn;
+
+
+  }
+
+
+  loadropdown() {
+    let that = this;
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      that.showSelectdevice = true;
+      $('#select').multipleSelect({
+        width: 200,
+        placeholder: 'Select device.....',
+        filter: true,
+      })
+      // $('#select').show();
+
+    }, 100);
+  }
+
+
+  getReport(event) {
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+
+      // var date=new Date(new Date(tpdata.toDate).setDate(new Date(tpdata.toDate).getDate()-1));
+      // console.log(new Date(new Date(date).setHours(23, 59, 59)).toISOString());
+      
+      var x = new Date(tpdata.toDate).setHours(23, 59, 59);
+      // var x=new Date(date).setHours(23, 59, 59)
+      this.date1 = new Date(x).toISOString();
+      var d = new Date(this.date1);
+      let a = d.setHours(0, 0, 0, 0)
+      this.from = new Date(a).toISOString();
+
+
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+
+
+
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa); 
+      this.tabelObj.ajax.reload();
+    }
+
+  }
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_location) {
+      latLng = {
+        lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+        long: latlngObj.start_location.long ? latlngObj.start_location.long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+
+  expotToPdf(){
+     for(var i=0;i<this.reportArr.length;i++){
+    if(!(this.reportArr[i].Device_ID)){
+      this.reportArr[i].Device_ID=this.reportArr[i].imei
+    }
+    // if(!(this.reportArr[i].maxSpeed)){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }
+     if(!(this.reportArr[i].Device_Name)){
+      this.reportArr[i].Device_Name=this.reportArr[i].ID.Device_Name
+    }
+    // if(this.reportArr[i].Mileage== undefined || (this.reportArr[i].Mileage == NaN))
+    // {
+    //   this.reportArr[i].Mileage="NA"
+    // }else{
+    //   this.reportArr[i].Mileage=(this.reportArr[i].today_odo/parseFloat(this.reportArr[i].Mileage)).toFixed(2);
+    // }
+    // if(this.reportArr[i].today_running){
+    //   this.reportArr[i].today_running=this.millisecondConversion(parseInt(this.reportArr[i].today_running))
+    // }else
+    //  this.reportArr[i].today_running='0:0'
+    // if((this.reportArr[i].today_stopped!=undefined)&&(this.reportArr[i].today_stopped!=null)&&(this.reportArr[i].today_stopped!=NaN)){
+    //   this.reportArr[i].today_stopped=this.millisecondConversion(this.reportArr[i].today_stopped)
+    // }else
+    // this.reportArr[i].today_stopped="0:0"
+
+    // if((this.reportArr[i].t_idling!=undefined)&&(this.reportArr[i].t_idling!=null)&&(this.reportArr[i].t_idling!=NaN)){
+    //   this.reportArr[i].t_idling=this.millisecondConversion(this.reportArr[i].t_idling)
+    // }else{
+    //    this.reportArr[i].t_idling="0:0"
+    // }
+
+    //  if((this.reportArr[i].t_ofr!=undefined)&&(this.reportArr[i].t_ofr!=null)&&(this.reportArr[i].t_ofr!=NaN)){
+    //   this.reportArr[i].t_ofr=this.millisecondConversion(this.reportArr[i].t_ofr)
+    // }else{
+    //    this.reportArr[i].t_ofr="0:0"
+    // }
+
+    //  if((this.reportArr[i].t_noGps!=undefined)&&(this.reportArr[i].t_noGps!=null)&&(this.reportArr[i].t_noGps!=NaN)){
+    //   if((this.reportArr[i].t_noGps < 60000)&&(this.reportArr[i].t_noGps == undefined)){
+    //               var seconds = Math.floor((this.reportArr[i].t_noGps / 1000) % 60);
+    //               seconds = (seconds < 10) ? 0 + seconds : seconds;
+    //               var n_gps = "0:0:" + seconds;
+    //               this.reportArr[i].t_noGps=n_gps
+    //             }else{
+    //               var n_gps_1 = this.millisecondConversion(this.reportArr[i].t_noGps);
+    //               var n_gps = n_gps_1 + ':0' 
+    //                this.reportArr[i].t_noGps=n_gps
+    //             }
+    // }else{
+    //    this.reportArr[i].t_noGps="0:0"
+    // }
+    //  if(this.reportArr[i].maxSpeed){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].maxSpeed
+    // }
+    // if(this.reportArr[i].ID!= null){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }else{
+    //    this.reportArr[i].maxSpeed=0
+    // }
+
+
+  }
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Daily Logs" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.Fromdate).format('lll'); 
+//   var t_date =moment(this.todate).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Daily Logs ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.reportArr.length, this.reportArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Daily Logs" +
+      new Date() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Daily Logs", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        Device_Name:'Vehicle',
+        Device_ID:'IMEI',
+        today_odo:'Total Distance',
+        Mileage:'Fuel',
+        today_running:'Ignition On',
+        today_stopped:'Ignition Off',
+        t_idling:'Idle Time',
+        t_ofr:'Out Of reach',
+        t_noGps:'No GPS',
+        today_trips:'Trips',
+        maxSpeed:'Max Speed',
+        startAddress:'Start Location',
+        endAddress:'End Location',
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       Device_Name:pdfBody[j].Device_Name,
+        Device_ID:pdfBody[j].Device_ID,
+        today_odo:(pdfBody[j].today_odo).toFixed(2),
+        Mileage:((pdfBody[j].Mileage == undefined)||(pdfBody[j].Mileage == NaN))?"NA":(pdfBody[j].today_odo/parseFloat(pdfBody[j].Mileage)).toFixed(2),
+        today_running:this.millisecondConversion(parseInt(pdfBody[j].today_running)),
+        today_stopped:this.millisecondConversion(parseInt(pdfBody[j].today_stopped)),
+        t_idling:this.millisecondConversion(parseInt(pdfBody[j].t_idling)),
+        t_ofr:this.millisecondConversion(parseInt(pdfBody[j].t_ofr)),
+        t_noGps:this.millisecondConversion(parseInt(pdfBody[j].t_noGps)),
+        today_trips:pdfBody[j].today_trips,
+        maxSpeed:pdfBody[j].maxSpeed,
+        startAddress:pdfBody[j].startAddress,
+        endAddress:pdfBody[j].endAddress,
+
+      });
+    }
+    return body;
+  }
+
+
+
+
+
+}
diff --git a/src/app/report/report component/daily-report/daily-report.component.html b/src/app/report/report component/daily-report/daily-report.component.html
new file mode 100644
index 0000000..19158e1
--- /dev/null
+++ b/src/app/report/report component/daily-report/daily-report.component.html	
@@ -0,0 +1,148 @@
+<div class="topDiv">
+  
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Daily Report'|translate}}</h4>
+      
+    </div>
+  </div>
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <!-- <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+      <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+        [(ngModel)]="from_date" type="text">
+    </div>
+  </div> -->
+  
+  <div class="row rowStyle">
+    
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align:left;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
+                  <th style="text-align:left;" title="Device IMEI">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
+                  <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
+                  <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
+                  <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
+                  <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
+                  <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
+                  <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
+                  <th style="text-align:left;">{{'Trips' | translate}}</th>
+                  <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| translate}}</th>
+                  <th style="text-align:left;">{{'Start Location' | translate}}</th>
+                  <th style="text-align:left;">{{'End Location' | translate}}</th>
+                  <th style="text-align: left;">{{'Details' | translate}}</th>
+                  <th style="text-align:left;width:300px">{{'Recalculate' | translate}}</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+<!-- <div class="card">
+  <div class="card-header">
+    <h3>Dialy Report</h3>
+    <button type="button" class="close btn btn-danger btn-sm pull-right" aria-label="Close">
+      Export To Excel
+    </button>
+  </div>
+  <div class="card-body">
+    <div class="row">
+      <div class="col-md-6">
+        <div class="row">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+          <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">VEHICLE :</p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0;">
+        
+
+          <md-list-item class="primary-imenu-item" role="listitem">
+              <md-select placeholder="Select Vehicale" name="vehicale" class="filter-select" [(ngModel)]="deviceArr" [compareWith]="equals"
+                multiple #yearSelect="ngModel">
+                <md-option disabled="disabled" class="filter-option">
+                  <input type="checkbox" placeholder="Select All" (click)="selectAll(checkAll.checked, yearSelect, deviceArray)" #checkAll>
+                </md-option>
+                <md-option *ngFor="let item of deviceArray" (click)="onChange(item.Device_ID)"  [value]="item.Device_ID">
+                  {{item.Device_Name}}
+                </md-option>
+              </md-select>
+          </md-list-item>
+
+         
+        </div>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0;">
+               <span style="margin-bottom: 0%;font-size: 12px;"> {{'From' | translate}} :</span>
+           </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+            <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"
+            [(ngModel)]="from_date" type="text">
+        </div>
+      </div>
+
+      
+      </div>
+
+    </div>
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div *ngIf="Load" class="loading">Loading&#8230;</div>
+      <div style="width: 100%;height:84vh;">
+        <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align:left;" title="Vehicle Name">{{'Vehicle'| translate}}</th>
+              <th style="text-align:left;" title="Device IMEI">{{'IMEI' | translate}}</th>
+              <th style="text-align:left;" title="Total Distance (Km)">{{'Total Distance' | translate}}</th>
+              <th style="text-align:left;" title="Fuel consumption (Litre)">{{'Fuel' | translate}}</th>
+              <th style="text-align:left;" title="Ignition ON Time (Hr:Min)">{{'Ignition ON' | translate}}</th>
+              <th style="text-align:left;" title="Ignition OFF Time (Hr:Min)">{{'Ignition OFF' | translate}}</th>
+              <th style="text-align:left;" title="Idle Time (Hr:Min)">{{'Idle Time' | translate}}</th>
+              <th style="text-align:left;" title="Out of reach (Hr:Min)">{{'Out of reach' | translate}}</th>
+              <th style="text-align:left;" title="No GPS (Hr:Min:Sec)">{{'No GPS' | translate}}</th>
+              <th style="text-align:left;">{{'Trips' | translate}}</th>
+              <th style="text-align:left;" title="Max Speed (Km/hr)">{{'Max Speed'| translate}}</th>
+              <th style="text-align:left;">{{'Start Location' | translate}}</th>
+              <th style="text-align:left;">{{'End Location' | translate}}</th>
+              <th style="text-align: left;">{{'Details' | translate}}</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+    </div>
+    </div>
+  </div> -->
+
+<!-- </div> -->
\ No newline at end of file
diff --git a/src/app/report/report component/daily-report/daily-report.component.scss b/src/app/report/report component/daily-report/daily-report.component.scss
new file mode 100644
index 0000000..df04e26
--- /dev/null
+++ b/src/app/report/report component/daily-report/daily-report.component.scss	
@@ -0,0 +1,52 @@
+col-sm-9 col-md-9 col-lg-9 .ms-parent {
+  width: 100% !important;
+}
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/daily-report/daily-report.component.spec.ts b/src/app/report/report component/daily-report/daily-report.component.spec.ts
new file mode 100644
index 0000000..eea64ac
--- /dev/null
+++ b/src/app/report/report component/daily-report/daily-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DailyReportComponent } from './daily-report.component';
+
+describe('DailyReportComponent', () => {
+  let component: DailyReportComponent;
+  let fixture: ComponentFixture<DailyReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DailyReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DailyReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/daily-report/daily-report.component.ts b/src/app/report/report component/daily-report/daily-report.component.ts
new file mode 100644
index 0000000..130ba73
--- /dev/null
+++ b/src/app/report/report component/daily-report/daily-report.component.ts	
@@ -0,0 +1,1358 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+import { DailyDetailsComponent } from '../../../device-report/daily-details/daily-details.component';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+import * as moment from 'moment';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { NgModel } from '@angular/forms';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-daily-report',
+  templateUrl: './daily-report.component.html',
+  styleUrls: ['./daily-report.component.scss']
+})
+export class DailyReportComponent implements OnInit {
+    bsConfig: Partial<BsDatepickerConfig>;
+deviceArray=[]
+deviceArr: any=[];
+  showSelectdevice:boolean=false;
+  identifier = 'daily_report';
+  reportArr: any[];
+  from_date
+  data_descip:any
+  selected = -1;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) {
+    this._service.invokeEvent.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      console.log(value);
+      
+      }); 
+   }
+ ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+ingData:any
+from1:any;
+to1:any;
+from2:any;
+to2:any;
+too:any;
+date1 : any;
+Fromdate:any;
+todate:any;
+options=[];
+option:any;
+dataSelect:any=[];
+
+
+   fs :any;
+   ls :any;
+   emailid:any;
+   or:any;
+   useridd:any;
+   device_data:any;
+   time:any;
+   Load:Boolean = false;
+   final : any;
+   custtype:any;
+   cust:boolean=false;
+   devicess:any;
+   finall:any;
+   logo:any;
+   text:any;
+   ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  from:any;
+  to:any;
+  before:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  superAdmin:Boolean = false;
+  finalArr=[]
+   ngOnInit() {
+    this.dataSelect = [];
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.deviceArray=JSON.parse(localStorage.getItem('vehicaleData'));
+    
+    // this.getDevices();
+    // this.dailyReport();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+ 
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];  
+  
+  this.testTable();
+
+  //  
+  }
+
+ 
+
+ 
+
+  tab:any;
+  exportExcels()
+	{
+   
+
+
+	 var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    console.log(table[0].querySelector("thead"));
+    
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+	}
+
+//   dailyReport() {
+//     this.to = this.date1;
+//     var x = new Date(this.to).setHours(23,59,59);
+//     console.log(x);
+//     var to_date = new Date(x).toISOString();
+    
+//     var d = new Date(this.date1);
+//     let a = d.setHours(0, 0, 0, 0)
+//     this.from = new Date(a).toISOString();
+//     console.log(to_date);
+//     console.log(this.from);
+//     window.localStorage['from_date'] = this.from;
+//     window.localStorage['to_date'] = to_date;
+//     var deviceID;
+
+//     if((this.dataSelect.length!=0)&&(this.dataSelect[0].did!='all')){
+//        deviceID = this.dataSelect[0].did;
+//     }
+//     this.Load = true;
+//     this.contactService.getDeviceReport(this.useridd,to_date, this.from,deviceID,this.skip,this.limit).subscribe(
+//       data => {
+//         this.Load = false;
+//         this.device_data = data
+//         this.finall = this.device_data.data;
+    
+//         if(this.finall.length==0){       
+        
+//           this.lastcall=true;
+//         }
+//         // console.log('dailyReport=>',this.finall);
+//       },(err)=>{
+//         // console.log("error");
+//         this.Load = false;
+//         this.firstcall=true;
+//       });
+//   }
+
+//   // search filter
+//   devicesss:any;
+//   getDevices(){
+//     // let a = {
+//     //   value: "All Devices",
+//     //   did : "all",
+//     //   id : "all"
+//     // }
+    
+//     //     this.options.push(a);
+//     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+//       data => {
+//         this.devicesss = data
+
+//         for(let i=0;i<this.devicesss.devices.length;i++){
+
+//           if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+//             let a ={
+//               value : this.devicesss.devices[i].Device_Name,      
+//               did:this.devicesss.devices[i].Device_ID,
+//               id:this.devicesss.devices[i]._id,
+
+//             }
+//             this.options.push(a);
+//           }
+
+//         }
+//           // console.log("deviceObj",this.options);
+//           let that = this;
+//           setTimeout(()=>{
+//             that.loadropdown();
+//           },100)  
+//       });
+//   }
+
+
+// filterStates(val) {
+
+//   // console.log(val)
+//   // console.log(this.options)
+
+//   if (val) {
+//     const filterValue:any = val
+//      this.dataSelect = this.options.filter( function(d){
+  
+//       return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+//     });
+//     return this.dataSelect;
+//   }
+
+// }
+
+skip: number = 0;
+limit: number = 10;
+firstcall: boolean = false;
+lastcall: boolean = true;
+
+// next(){
+//   this.lastcall = false;
+//   this.skip += 1;
+//   this.dailyReport();
+// }
+
+// pre(){
+//   // console.log(this.skip)
+//     if (this.skip > 0) {
+//       this.skip -= 1;
+//       this.lastcall = false;
+//       this.dailyReport();
+//     } else {
+//       this.lastcall = true;
+//       this.firstcall = false;
+//     }
+
+// }
+tabelObj: any;
+callfunction(): void {
+  this.Load = true;
+  this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+  this.tabelObj.draw();
+}
+dtOptions:any={}
+testTable() {
+  const that = this;
+
+  this.Load = true;
+  $(document).ready(function() {
+      that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": true,
+          "searching": false,
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: true,
+          "scrollY":'60vh', 
+          "scrollX": true, 
+          "scrollCollapse": true, 
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+
+             $('#recalculate', row).bind('click', () => {   
+              console.log(data);
+              var from_date = that.from;
+            var to_date =that.date1;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            suburl += "/summary/distance?from=" + temp.from_date +'&to=' + temp.to_date + '&user=' + temp.user+'&device='+data.imei+'&recalculate='+true;
+              that.contactService.get(suburl).subscribe(resp => {  
+                console.log(resp);
+                that.contactService.post('/summary/recalculate',{id:data._id,distance:resp[0].distance}).subscribe(res=>{
+                  console.log(res);
+                  that.tabelObj.ajax.reload();
+                })
+              })
+              });
+
+            $('#edit', row).bind('click', () => {   
+              var internalThat  = that;         
+              let dialogRef = that.dialog.open(DailyDetailsComponent, {
+                width: '1020px',
+                // height: '1160px',   
+                data: { data:data,date:that.date1}
+                
+              });
+          
+              // dialogRef.afterClosed().subscribe(result => {
+              //   console.log("result",result);
+              //   that.ngOnInit();
+             
+              //     if(result=="done"){
+              //       console.log("resultdone",result)
+              //       that.tost1("update");
+              //       window.localStorage['DataUpdate'] = 'True';
+              //       that.sidebar.sidebarData();       
+              //     }
+              // });              
+            }); 
+            },
+          ajax: (dataTablesParameters: any, callback) => {
+                  that.Load = true;
+              dataTablesParameters.op = {};
+              dataTablesParameters.select = [];
+              dataTablesParameters.find = {};
+              var currDay = new Date().getDay();
+              var currMonth = new Date().getMonth();
+              var currYear = new Date().getFullYear();
+              var selectedDay = new Date(that.date1).getDay();
+              var selectedMonth  = new Date(that.date1).getMonth();
+              var selectedYear = new Date(that.date1).getFullYear();
+       
+              if((currDay== selectedDay)&&(currMonth==selectedMonth) && (currYear == selectedYear)){
+                 var devname = "Device_Name";
+                 var devid = "Device_ID";
+                  var distanceVariation="distanceVariation"
+                 var today_odo = "today_odo";
+                 var today_running = "today_running";
+                 var today_stopped = "today_stopped";
+                 var today_trips = "today_trips"; 
+                 var maxSpeed = "maxSpeed";
+                 var Mileage = "Mileage";
+                 var start_location_lat = "today_start_location.lat";
+                 var start_location_long = "today_start_location.long";
+                 var end_location_lat = "last_location.lat";
+                 var end_location_long = "last_location.long";
+              
+              }else{
+              
+                var devid = "imei";
+                var devname = "ID.Device_Name";
+                var distanceVariation="distanceVariation"
+                var today_odo = "today_odo";
+                var today_running = "today_running";
+                var today_stopped = "today_stopped";
+                var today_trips = "today_trips"; 
+                var maxSpeed = "ID.maxSpeed";
+                var Mileage = "Mileage";
+                var start_location_lat = "start_location.lat";
+                var start_location_long = "start_location.long";
+                var end_location_lat = "end_location.lat";
+                var end_location_long = "end_location.long";
+
+              }
+
+              dataTablesParameters.columns = [
+                // {data: "_id" },
+                {data: devname},
+                {data:distanceVariation},
+                {data: devid},
+                {data : today_odo},
+                {data : today_running},
+                {data : Mileage},           
+                {data: today_stopped},
+                {data :today_trips},
+                {data :maxSpeed},
+                {data :"t_idling"},
+                {data: "t_noGps"},
+                {data : "t_ofr" },
+                {data : start_location_lat},
+                {data : start_location_long},
+                {data : end_location_lat},
+                {data : end_location_long},
+                {data: null, defaultContent: ''}
+              ]        
+
+
+          
+              
+                var deviceID;
+                dataTablesParameters.find.user_id = that.useridd;
+
+                if(that.deviceArr.length != 0){
+                
+                  var dev_in = {'$in': that.deviceArr};
+                     dataTablesParameters.find.devId = dev_in;
+                }
+        
+              // if ((that.dataSelect.length!=0)&&(that.dataSelect[0].did!='all')) {
+              //     dataTablesParameters.find.devId = that.dataSelect[0].did;
+              // }
+
+              if (that.date1) {
+                  var fdate = new Date(that.date1).toISOString()  
+                  // dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+                  dataTablesParameters.find.date = fdate        
+              };
+
+              var suburl = "";
+              suburl += "/devices/daily_report"; 
+              if(that.date1 && that.deviceArr.length != 0) {             
+              that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+                that.reportArr = [];
+                that.reportArr = resp['data'];
+                if(that.reportArr.length != 0){
+                  var j = 0 ;
+                  that.finalArr = [];
+                  for(var i = 0 ;i<that.reportArr.length;i++){
+                    // if(that.reportArr[i].distanceVariation){
+                    //   console.log("IN");
+                      
+                    //   if(that.reportArr[i].distanceVariation[0]=="+"){
+                    //     that.reportArr[i].today_odo=that.reportArr[i].today_odo+(that.reportArr[i].today_odo/100)*Number(that.reportArr[i].distanceVariation.substring(1))
+                    //    console.log("IN",(that.reportArr[i].today_odo/100)*Number(that.reportArr[i].distanceVariation.substring(1)));
+                    //   }else{
+
+                    //     that.reportArr[i].today_odo=that.reportArr[i].today_odo-(that.reportArr[i].today_odo/100)*Number(that.reportArr[i].distanceVariation.substring(1))
+                    //   console.log("IN-",that.reportArr[i].today_odo);
+                    //   }
+                    // }
+                   
+                  that.clocation_1(that.reportArr[i],function(err,succ){
+                    if(err){
+                      console.log(err);
+                        j++ ; 
+                    }else{
+                      that.finalArr.push(succ);
+                      console.log(that.finalArr);
+                        j++ ; 
+                        if(j  === that.reportArr.length){
+                          callback({data : that.finalArr});
+                        }
+                    }
+                  })
+
+                     that.Load= false;                 
+                  }
+                }else{
+                
+                   that.Load= false;       
+                  callback({data : []});
+
+                }
+                
+                  // that.Load= false;         
+                  // callback(resp);
+              }, err => {   
+                that.Load= false;    
+                  
+              });
+            }else{  
+              that.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+                that.Load= false;       
+                  callback({data : []});
+            }
+          },  
+          "columns": [
+              {
+                  "data": "Device_Name",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+            
+                     if(row.Device_Name){
+                      return row.Device_Name
+                     }
+                     if(row.ID != null){
+                      return row.ID.Device_Name;
+                     }else{
+                       return "";
+                     }
+                      
+                  }
+              },
+              {
+                  "data": "Device_ID",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                      return row.Device_ID ? row.Device_ID : row.imei;
+                      // if(row.Device_ID){
+                      //   return row.Device_ID;
+                      //  }else{
+                      //   row.imei;
+                      //  }
+                
+                  }
+              },
+              {
+                  "data": "today_odo",
+                  render: function(data, type, row) {
+                      return data.toFixed(2);
+                  }
+              }, 
+              {
+                "data": "Mileage",
+                "defaultContent": "_id",
+                render: function(data, type, row) {                            
+                  var mileage = ((data == undefined)||(data == NaN))?"NA":(row.today_odo/parseFloat(data)).toFixed(2);
+                    return mileage;
+                }
+            },         
+              {
+                "data": "today_running",
+                render: function(data, type, row) {
+                  var ign_on:any;
+               
+                  if(data != undefined){
+                   ign_on =  that.millisecondConversion(parseInt(data));
+                  }else{
+                    ign_on = '0:0'
+                  }
+              
+            
+
+                    return ign_on;
+                }
+            },         
+            { 
+              "data": "today_stopped",
+              render: function(data, type, row) {
+
+               
+                if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                  var stopped = that.millisecondConversion(data); 
+                }else{
+                  var stopped = "0:0"; 
+                }
+                return stopped;
+              }
+          },  
+          {
+            "data" : "t_idling",
+            render : function(data,type,row){
+             
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                var idleTime = that.millisecondConversion(data); 
+              }else{
+                var idleTime = "0:0"; 
+              }     
+              return idleTime ; 
+            }
+          },  
+          {
+            "data" : "t_ofr",
+            render : function(data,type,row){
+            
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                var ofr = that.millisecondConversion(data); 
+              }else{
+                var ofr = "0:0"; 
+              }       
+                return ofr ;          
+            }
+
+          },  
+          {
+            "data" : "t_noGps",
+            render : function(data,type,row){
+            
+              if((data!=undefined)&&(data!=null)&&(data!=NaN)){
+                if((data < 60000)&&(data == undefined)){
+                  var seconds = Math.floor((data / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+               
+                  var n_gps = "0:0:" + seconds;
+                }else{
+                  var n_gps_1 = that.millisecondConversion(data);
+                  var n_gps = n_gps_1 + ':0' 
+                }
+              }else{
+                var n_gps = "0:0:0"; 
+              }       
+                return n_gps ;          
+            }
+
+          },     
+          {
+            "data": "today_trips",
+            render: function(data, type, row) {
+                return data;
+            }
+        },   
+        {
+          "data": "maxSpeed",
+          "defaultContent": "_id",
+          render: function(data, type, row) {
+              // return data;
+              if(row.maxSpeed){
+                return row.maxSpeed
+               }
+               if(row. ID!= null){
+                return row.ID.maxSpeed;
+               }else{
+                 return 0;
+               }
+          }
+      },
+      {
+        "data": "startAddress",
+        "defaultContent": "",
+        render: function(data, type, row) {
+       
+      
+          return data?data : ""; 
+
+        }
+    },
+    {
+      "data": "endAddress",
+      "defaultContent": "",
+      render: function(data, type, row) {
+        
+          return data?data : "";
+      }
+  } ,
+   {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+      }
+    } ,
+     {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<i id="recalculate" title="Recalculate Distance" style="font-size:20px;color: blue" class="fas fa-redo"></i>'    
+      }
+    },              
+          ], 
+             "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9,10,11,12,13 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          } 
+          // { "width": "40px", "targets": [11,12] }  
+           
+         
+          ]   
+      });
+      that.colSwitch()
+  });
+
+}
+
+colSwitch(){
+  // var supAdmin=
+  this.tabelObj.column( 14).visible( false );
+   if(this.superAdmin ==true || localStorage.getItem('superadmin')=="ON"){
+     this.tabelObj.column( 14).visible( true );
+   }
+
+      // this.tabelObj.column( 28 ).visible( false );
+      // this.tabelObj.column( 27 ).visible( false );
+      //  this.tabelObj.column( 25).visible( false ); 
+      //   this.tabelObj.column( 26).visible( false ); 
+ 
+      //   if((this.superAdmin ==true)||(this.custtype ==true)){
+  
+      //     this.tabelObj.column( 27).visible( true );       
+      //     this.tabelObj.column( 28).visible( true ); 
+      //      this.tabelObj.column( 25).visible( true );
+      //       this.tabelObj.column( 26).visible( true );
+      //      this.tabelObj.column(14).visible( true );
+      //      this.tabelObj.column( 13).visible( true );                                  
+      //   }
+
+      //   if((this.superAdmin ==false)&&(this.custtype ==false)){
+      //     this.tabelObj.column( 9 ).visible( false );
+                                     
+      //   }
+    }
+
+millisecondConversion(duration){
+
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours + ":" + mins;
+  
+}
+
+
+loadropdown() {
+  let that = this;
+  var script = document.createElement("script");
+  script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  
+  setTimeout(() => {
+    that.showSelectdevice = true;
+    $('#select').multipleSelect({
+      width: 200,
+      placeholder: 'Select device.....',
+      filter: true,
+    })
+   // $('#select').show();
+ 
+  }, 100);
+}
+
+
+getReport(event){
+  console.log(event);
+  
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+
+
+    
+    var x = new Date(tpdata.toDate).setHours(23,59,59);
+
+    this.date1 = new Date(x).toISOString();    
+    var d = new Date(this.date1);
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+  
+
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    
+    
+ 
+    // this.tabelObj.clear();
+    // var aa = [];
+    // this.tabelObj.rows.add(aa); 
+      this.tabelObj.ajax.reload();    
+  }
+ 
+}
+
+clocation_1(latlngObj,cb){
+
+  var outerThis = this;
+  var la = '';
+
+  let latLng = {
+    lat :"0",
+    long:"0"
+  };
+  if(latlngObj.start_location){
+     latLng = {
+      lat: latlngObj.start_location.lat?latlngObj.start_location.lat:0,
+      long:latlngObj.start_location.long?latlngObj.start_location.long:0
+    }
+  }
+  if(latlngObj.today_start_location){  
+     latLng = {
+      lat: latlngObj.today_start_location.lat?latlngObj.today_start_location.lat:0,
+      long: latlngObj.today_start_location.long?latlngObj.today_start_location.long:0
+    }        
+  }  
+
+  // if () {
+  //   latLng = {
+  //     lat: 0,
+  //     long: 0
+  //   }
+  // }
+  
+  outerThis.contactService.getAddressByApi(latLng).subscribe(res=>{       
+    console.log('resaddresscomingfromAPi',res);   
+    if(res.message == "Address not found in databse"){
+        latlngObj['startAddress'] = "NA"; 
+      // cb(null,latlngObj);
+        var latLng_1 = {
+          lat :"0",
+          long:"0"
+        };
+        if(latlngObj.last_location){
+          latLng_1 = {
+            lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+            long:latlngObj.last_location.long?latlngObj.last_location.long:0
+          }
+         
+        }
+        if(latlngObj.end_location){  
+          latLng_1 = {
+            lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+            long: latlngObj.end_location.long?latlngObj.end_location.long:0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+          console.log('resaddresscomingfromAPi',res);
+          if(res.message == "Address not found in databse"){
+            latlngObj['endAddress'] = "NA"; 
+            cb(null,latlngObj);
+
+        
+          }else{
+            latlngObj['endAddress'] = res.address; 
+            cb(null,latlngObj);
+          }
+
+        })
+  
+    }else{  
+      latlngObj['startAddress'] = res.address; 
+      var latLng_1 = {
+        lat :"0",
+        long:"0"
+      };
+      if(latlngObj.last_location){
+        latLng_1 = {
+          lat: latlngObj.last_location.lat?latlngObj.last_location.lat:0,
+          long:latlngObj.last_location.long?latlngObj.last_location.long:0
+        }
+       
+      }
+      if(latlngObj.end_location){  
+        latLng_1 = {
+          lat: latlngObj.end_location.lat?latlngObj.end_location.lat:0,
+          long: latlngObj.end_location.long?latlngObj.end_location.long:0
+        }
+      }
+
+     
+      outerThis.contactService.getAddressByApi(latLng_1).subscribe(res=>{
+        console.log('resaddresscomingfromAPi',res);
+        if(res.message == "Address not found in databse"){
+          latlngObj['endAddress'] = "NA"; 
+          cb(null,latlngObj);
+
+      
+        }else{
+          latlngObj['endAddress'] = res.address; 
+          cb(null,latlngObj);
+        }
+
+      })
+
+      // cb(null,latlngObj);
+    }
+  })
+
+}
+
+// --------------------New Method for excel export-------------------
+exportExcel() {
+  for(var i=0;i<this.reportArr.length;i++){
+    if(!(this.reportArr[i].Device_ID)){
+      this.reportArr[i].Device_ID=this.reportArr[i].imei
+    }
+    //  if(!(this.reportArr[i].maxSpeed)){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }
+     if(!(this.reportArr[i].Device_Name)){
+      this.reportArr[i].Device_Name=this.reportArr[i].ID.Device_Name
+    }
+    if(this.reportArr[i].Mileage== undefined || (this.reportArr[i].Mileage == NaN))
+    {
+      this.reportArr[i].Mileage="NA"
+    }else{
+      this.reportArr[i].Mileage=(this.reportArr[i].today_odo/parseFloat(this.reportArr[i].Mileage)).toFixed(2);
+    }
+    if(this.reportArr[i].today_running){
+      this.reportArr[i].today_running=this.millisecondConversion(parseInt(this.reportArr[i].today_running))
+    }else
+     this.reportArr[i].today_running='0:0'
+    if((this.reportArr[i].today_stopped!=undefined)&&(this.reportArr[i].today_stopped!=null)&&(this.reportArr[i].today_stopped!=NaN)){
+      this.reportArr[i].today_stopped=this.millisecondConversion(this.reportArr[i].today_stopped)
+    }else
+    this.reportArr[i].today_stopped="0:0"
+
+    if((this.reportArr[i].t_idling!=undefined)&&(this.reportArr[i].t_idling!=null)&&(this.reportArr[i].t_idling!=NaN)){
+      this.reportArr[i].t_idling=this.millisecondConversion(this.reportArr[i].t_idling)
+    }else{
+       this.reportArr[i].t_idling="0:0"
+    }
+
+     if((this.reportArr[i].t_ofr!=undefined)&&(this.reportArr[i].t_ofr!=null)&&(this.reportArr[i].t_ofr!=NaN)){
+      this.reportArr[i].t_ofr=this.millisecondConversion(this.reportArr[i].t_ofr)
+    }else{
+       this.reportArr[i].t_ofr="0:0"
+    }
+
+     if((this.reportArr[i].t_noGps!=undefined)&&(this.reportArr[i].t_noGps!=null)&&(this.reportArr[i].t_noGps!=NaN)){
+      if((this.reportArr[i].t_noGps < 60000)&&(this.reportArr[i].t_noGps == undefined)){
+                  var seconds = Math.floor((this.reportArr[i].t_noGps / 1000) % 60);
+                  seconds = (seconds < 10) ? 0 + seconds : seconds;
+                  var n_gps = "0:0:" + seconds;
+                  this.reportArr[i].t_noGps=n_gps
+                }else{
+                  var n_gps_1 = this.millisecondConversion(this.reportArr[i].t_noGps);
+                  var n_gps = n_gps_1 + ':0' 
+                   this.reportArr[i].t_noGps=n_gps
+                }
+    }else{
+       this.reportArr[i].t_noGps="0:0"
+    }
+  
+
+
+  }
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Trip Details') {
+   let arrHeader = ["Device_Name", "Device_ID", "today_odo", "Mileage","today_running","today_stopped","t_idling","t_ofr","t_noGps","today_trips","maxSpeed","startAddress","endAddress"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Daily Report.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+// Running	2:1
+// Idle	1:56
+// Stop
+    
+    let str = 'Daily Report \r\n'+new Date(this.date1).getDate()+"/"+(new Date(this.date1).getMonth()+1)+"/"+
+    new Date(this.date1).getFullYear()+" \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders =["Vehicle Name", "Device IMEI", "Total Distance (Km)", "Fuel consumption (Litre)","Ignition ON Time (Hr:Min)","Ignition OFF Time (Hr:Min)","Idle Time (Hr:Min)","Out of reach (Hr:Min)","No GPS (Hr:Min:Sec)","Trips","Max Speed","Start Location","End Location"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+   
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  onChange(value){
+
+  this.deviceArr.push(value)  
+  console.log("Array=>",this.deviceArr);
+  
+  }
+
+  equals(objOne, objTwo) {
+    if (typeof objOne !== 'undefined' && typeof objTwo !== 'undefined') {
+      return objOne.id === objTwo.id;
+    }
+  }
+selectAll(checkAll, select: NgModel, values) {
+    //this.toCheck = !this.toCheck;
+    if(checkAll){
+      select.update.emit(values);
+
+    }
+    else{
+      select.update.emit([]);
+    }
+    console.log(this.deviceArr);
+    
+  }
+
+  expotToPdf(){
+     for(var i=0;i<this.reportArr.length;i++){
+    if(!(this.reportArr[i].Device_ID)){
+      this.reportArr[i].Device_ID=this.reportArr[i].imei
+    }
+    // if(!(this.reportArr[i].maxSpeed)){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }
+     if(!(this.reportArr[i].Device_Name)){
+      this.reportArr[i].Device_Name=this.reportArr[i].ID.Device_Name
+    }
+    // if(this.reportArr[i].Mileage== undefined || (this.reportArr[i].Mileage == NaN))
+    // {
+    //   this.reportArr[i].Mileage="NA"
+    // }else{
+    //   this.reportArr[i].Mileage=(this.reportArr[i].today_odo/parseFloat(this.reportArr[i].Mileage)).toFixed(2);
+    // }
+    // if(this.reportArr[i].today_running){
+    //   this.reportArr[i].today_running=this.millisecondConversion(parseInt(this.reportArr[i].today_running))
+    // }else
+    //  this.reportArr[i].today_running='0:0'
+    // if((this.reportArr[i].today_stopped!=undefined)&&(this.reportArr[i].today_stopped!=null)&&(this.reportArr[i].today_stopped!=NaN)){
+    //   this.reportArr[i].today_stopped=this.millisecondConversion(this.reportArr[i].today_stopped)
+    // }else
+    // this.reportArr[i].today_stopped="0:0"
+
+    // if((this.reportArr[i].t_idling!=undefined)&&(this.reportArr[i].t_idling!=null)&&(this.reportArr[i].t_idling!=NaN)){
+    //   this.reportArr[i].t_idling=this.millisecondConversion(this.reportArr[i].t_idling)
+    // }else{
+    //    this.reportArr[i].t_idling="0:0"
+    // }
+
+    //  if((this.reportArr[i].t_ofr!=undefined)&&(this.reportArr[i].t_ofr!=null)&&(this.reportArr[i].t_ofr!=NaN)){
+    //   this.reportArr[i].t_ofr=this.millisecondConversion(this.reportArr[i].t_ofr)
+    // }else{
+    //    this.reportArr[i].t_ofr="0:0"
+    // }
+
+    //  if((this.reportArr[i].t_noGps!=undefined)&&(this.reportArr[i].t_noGps!=null)&&(this.reportArr[i].t_noGps!=NaN)){
+    //   if((this.reportArr[i].t_noGps < 60000)&&(this.reportArr[i].t_noGps == undefined)){
+    //               var seconds = Math.floor((this.reportArr[i].t_noGps / 1000) % 60);
+    //               seconds = (seconds < 10) ? 0 + seconds : seconds;
+    //               var n_gps = "0:0:" + seconds;
+    //               this.reportArr[i].t_noGps=n_gps
+    //             }else{
+    //               var n_gps_1 = this.millisecondConversion(this.reportArr[i].t_noGps);
+    //               var n_gps = n_gps_1 + ':0' 
+    //                this.reportArr[i].t_noGps=n_gps
+    //             }
+    // }else{
+    //    this.reportArr[i].t_noGps="0:0"
+    // }
+    //  if(this.reportArr[i].maxSpeed){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].maxSpeed
+    // }
+    // if(this.reportArr[i].ID!= null){
+    //   this.reportArr[i].maxSpeed=this.reportArr[i].ID.maxSpeed
+    // }else{
+    //    this.reportArr[i].maxSpeed=0
+    // }
+
+
+  }
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Daily Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.Fromdate).format('lll'); 
+//   var t_date =moment(this.todate).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Daily Report ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.reportArr.length, this.reportArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Daily Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Daily Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        Device_Name:'Vehicle',
+        Device_ID:'IMEI',
+        today_odo:'Total Distance',
+        Mileage:'Fuel',
+        today_running:'Ignition On',
+        today_stopped:'Ignition Off',
+        t_idling:'Idle Time',
+        t_ofr:'Out Of reach',
+        t_noGps:'No GPS',
+        today_trips:'Trips',
+        maxSpeed:'Max Speed',
+        startAddress:'Start Location',
+        endAddress:'End Location',
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(pdfBody,"<===PDFBODY");
+    
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       Device_Name:pdfBody[j].Device_Name,
+        Device_ID:pdfBody[j].Device_ID,
+        today_odo:(pdfBody[j].today_odo).toFixed(2),
+        Mileage:((pdfBody[j].Mileage == undefined)||(pdfBody[j].Mileage == NaN))?"NA":(pdfBody[j].today_odo/parseFloat(pdfBody[j].Mileage)).toFixed(2),
+        today_running:this.millisecondConversion(parseInt(pdfBody[j].today_running)),
+        today_stopped:this.millisecondConversion(parseInt(pdfBody[j].today_stopped)),
+        t_idling:this.millisecondConversion(parseInt(pdfBody[j].t_idling)),
+        t_ofr:this.millisecondConversion(parseInt(pdfBody[j].t_ofr)),
+        t_noGps:this.millisecondConversion(parseInt(pdfBody[j].t_noGps)),
+        today_trips:pdfBody[j].today_trips,
+        maxSpeed:pdfBody[j].maxSpeed,
+        startAddress:pdfBody[j].startAddress,
+        endAddress:pdfBody[j].endAddress,
+
+      });
+    }
+    return body;
+  }
+
+
+}
+
+
+
+ // let geocoder = new google.maps.Geocoder();
+      // let t_latlng = new google.maps.LatLng(latlngObj.lat, latlngObj.long);
+
+      // let request = {
+      //   latLng: t_latlng
+      // };
+      // geocoder.geocode(request, function (data, status) {
+      //   if (status == google.maps.GeocoderStatus.OK) {
+      //     if (data[0] != null) {
+        
+      //       var addressObj = {
+      //         "lat":latlngObj.lat,
+      //         "long":latlngObj.long,
+      //         "address":la
+      //       }
+      //         this.contactService.saveAdd(addressObj).subscribe(res=>{
+                  
+      //          cb(null,data[0].formatted_address);      
+      //         },err=>{  
+      //           console.log("couldn't save address");           
+      //          cb(null,data[0].formatted_address);      
+      //         })        
+      //     } else {
+         
+      //     cb(null,"No address available");
+      //     }
+      //   }
+      //   else {
+      //     cb(null,'NA');
+      //   }
+
+      // })
+
+// {"$and":[{"$or":[{"user":ObjectId("5cee7da97a38f414a4e5dfa3")},{"dealer":ObjectId("5cee7da97a38f414a4e5dfa3")}]},{"imei":{"$in":["866551039594085","866551039599415"]}},{"dateParts.day":12},{"dateParts.month":8},{"dateParts.year":2021}]}
\ No newline at end of file
diff --git a/src/app/report/report component/day-wise-report/day-wise-report.component.html b/src/app/report/report component/day-wise-report/day-wise-report.component.html
new file mode 100644
index 0000000..1ebc6f1
--- /dev/null
+++ b/src/app/report/report component/day-wise-report/day-wise-report.component.html	
@@ -0,0 +1,106 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Daywise Report' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th></th>
+                  <th style="text-align:left;width:100px">{{'Date'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'Vehicle Name' | translate}}</th>
+                  <th style="text-align:left;">{{'Distance (Kms.)' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Moving Time (hh:mm)' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Stoppage Time (hh:mm)' | translate}}</th>
+                  <th style="text-align:left;">{{'Idle Time (hh:mm)' | translate}}</th>
+                  <th style="text-align:left;">{{'Fuel Consumed' | translate}}</th>
+                  <th style="text-align:left;width:300px">{{"Start Location" | translate}}</th>
+                  <th style="text-align:left;width:300px">{{'End Location' | translate}}</th>
+                  <!-- <th style="text-align:left;width:300px">{{'Recalculate' | translate}}</th> -->
+                </tr>
+              </thead>
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+<!-- 
+<th style="text-align:left;">Stoppage Time</th>
+<th style="text-align:left;">Idle Time</th>
+<th style="text-align:left;">Start Location</th>
+<th style="text-align:left;">End Location</th> -->
+
+
+
+
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+  <p class="headStyle">{{'Daywise Report' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-4" style="display: inherit;">
+          <md-select style="display: grid;padding-top:11px;width:200px;margin-left: 25px;" name="neww" placeholder="Filter Report" [(ngModel)]="dateStr">
+              <md-option *ngFor="let dateStr of dateString" [value]="dateStr" (click)="filtered_report(dateStr)">
+                {{dateStr}}
+              </md-option>
+            </md-select>
+            <div style="padding-left: 50px; padding-top: 15px;">
+              <select id="dbselect" multiple="multiple">
+                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+              </select>
+            </div>
+      </div>
+      <div class="col-md-6" style="display:inherit;padding-top: 16px;">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="fDate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        <span style="padding-left: 50px;">{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="tDate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2" style="padding-top: 15px;">
+        <button md-raised-button style="cursor: pointer;background-color: #427942;color: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>  
+    </div>
+  </div>
+</div>
+ -->
+
+
+
diff --git a/src/app/report/report component/day-wise-report/day-wise-report.component.scss b/src/app/report/report component/day-wise-report/day-wise-report.component.scss
new file mode 100644
index 0000000..0b4ba56
--- /dev/null
+++ b/src/app/report/report component/day-wise-report/day-wise-report.component.scss	
@@ -0,0 +1,109 @@
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #6b6a6a;
+}
+
+.InputStyle {
+  padding: 10px;
+  padding-bottom: 20px;
+  background-color: #efefef;
+  margin-bottom: 10px;
+  .selecStyle {
+    display: inherit;
+    width: 56%;
+    padding-left: 16px;
+    margin-left: 50px;
+
+    border-radius: 10px;
+  }
+}
+
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 150px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/day-wise-report/day-wise-report.component.spec.ts b/src/app/report/report component/day-wise-report/day-wise-report.component.spec.ts
new file mode 100644
index 0000000..7909199
--- /dev/null
+++ b/src/app/report/report component/day-wise-report/day-wise-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DayWiseReportComponent } from './day-wise-report.component';
+
+describe('DayWiseReportComponent', () => {
+  let component: DayWiseReportComponent;
+  let fixture: ComponentFixture<DayWiseReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DayWiseReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DayWiseReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/day-wise-report/day-wise-report.component.ts b/src/app/report/report component/day-wise-report/day-wise-report.component.ts
new file mode 100644
index 0000000..a9ec364
--- /dev/null
+++ b/src/app/report/report component/day-wise-report/day-wise-report.component.ts	
@@ -0,0 +1,840 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Http, Headers, RequestOptions, ResponseContentType } from '@angular/http';
+import { saveAs } from 'file-saver';
+import { environment } from '../../../../environments/environment';
+import { MdSnackBar } from '@angular/material';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var google: any;
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import * as _ from 'lodash';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+const now = new Date();
+@Component({
+  selector: 'app-day-wise-report',
+  templateUrl: './day-wise-report.component.html',
+  styleUrls: ['./day-wise-report.component.scss']
+})
+export class DayWiseReportComponent implements OnInit {
+  dateStr: any;
+  Fromdate = new Date();
+  todate = new Date();
+  useridd: any;
+  fDate: any;
+  tDate: any;
+  dev_url = environment.hostUrl;
+  // dateString=['Today Report','Yesterday Report','Weekly Report','Monthly Report'];
+  fromDate: any;
+  toDate: any;
+  Load: boolean;
+  tabelObj: any;
+  custtype: any;
+  superAdmin: any;
+  data_descip: string;
+  reportArr :any= [];
+  vehicleData=[];
+  dayWiseData=[];
+  idleData=[];
+  ignitionData=[]
+  finalArr=[]
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService, private http: Http, public snackBar: MdSnackBar,private _service:ReportService ) {
+ this._service.invokeEventForDayWiseReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+       console.log(value);
+       
+      })
+    // var script = document.createElement("script");
+    // script.setAttribute("type", "text/javascript");
+    // script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    // document.getElementsByTagName("head")[0].appendChild(script);
+
+  }
+ ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    this.vehicleData=JSON.parse(localStorage.getItem('vehicaleData'))
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.tDate = new Date();
+    var fd = new Date();
+    fd.setHours(0, 0, 0, 0);
+    this.fDate = fd;
+   
+    this.testTable()
+
+  }
+
+  deviceArr = [];
+  tab: any;
+
+  exportExcel() {
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+  emailid: any;
+  devicesss: any;
+  options: any;
+  finall: any;
+
+  //   getDevices(){
+  //     console.log("Inside getDevice function");
+  //     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+  //       data => {
+  //         this.devicesss = data;
+  //         console.log('this.devicesss',this.devicesss);  
+  //         this.finall = (this.devicesss.devices);
+  //         this.options = [];
+
+  //         for(let i=0;i<this.devicesss.devices.length;i++){
+  //           console.log('this.devicesss.devices',i);
+
+  //           // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+  //             let a ={
+  //               value : this.devicesss.devices[i].Device_Name,
+  //               viewValue:this.devicesss.devices[i].Device_Name,
+  //               did:this.devicesss.devices[i].Device_ID,
+  //               id:this.devicesss.devices[i]._id,
+  //               user:this.devicesss.devices[i].user,
+  //               // email: this.devicesss.devices[i].Email_ID,
+  //               // deviceType: this.devicesss.devices[i].type_of_device,      
+  //             }  
+
+  //               a['selectedValue'] = this.devicesss.devices[i].Device_ID ; 
+
+
+  //             // }
+  //             this.options.push(a);
+  //           // }
+
+  //           if(i === (this.devicesss.devices.length -1)){
+  //             setTimeout(() => {
+  //               $('#dbselect').multipleSelect({
+  //                 width: 200,
+  //                 placeholder: 'Select Vehicle.....',
+  //                 filter: true,
+  //               })
+  //             }, 100);
+
+  //           }
+  //         }
+  //   })
+
+  // }
+
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          that.Load = true;
+
+
+          var from_date = new Date(that.Fromdate).toISOString();
+          var to_date = new Date(that.todate).toISOString();
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+          // https://www.oneqlik.in/summary/getDayWiseReport?user=5e37c4a218ff144091101d3e&to=2020-02-27T18:29:59.115Z&from=2020-02-26T18:30:00.115Z&device=865205038055231   
+          suburl += "/summary/getDayWiseReport?from=" + temp.from_date + '&to=' + temp.to_date + '&user=' + temp.user;
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }else{
+            that.Load = false
+            callback({ data: [] });
+      
+          }
+
+          if ((temp.from_date != undefined) && (temp.to_date != undefined) && that.deviceArr.length != 0) {
+            //  console.log('resp=>',temp.from_date,temp.to_date); 
+            that.contactService.get(suburl).subscribe((resp:any) => {
+              // console.log(ignReport.length);  
+               // that.Load = false;
+              that.reportArr = [];
+              that.reportArr= resp ; 
+              if (that.reportArr.length != 0) {
+                console.log(that.reportArr);
+                var j = 0;
+                that.finalArr = [];
+                for (var i = 0; i < that.reportArr.length; i++) {
+
+                  // if(that.reportArr[i].distanceVariation){
+                  //     console.log("IN");
+                      
+                  //     if(that.reportArr[i].distanceVariation[0]=="+"){
+                  //       that.reportArr[i]['Distance(Kms)']=that.reportArr[i]['Distance(Kms)']+(that.reportArr[i]['Distance(Kms)']/100)*Number(that.reportArr[i].distanceVariation.substring(1))
+                  //      console.log("IN",(that.reportArr[i]['Distance(Kms)']/100)*Number(that.reportArr[i].distanceVariation.substring(1)));
+                  //     }else{
+
+                  //       that.reportArr[i]['Distance(Kms)']=that.reportArr[i]['Distance(Kms)']-(that.reportArr[i]['Distance(Kms)']/100)*Number(that.reportArr[i].distanceVariation.substring(1))
+                  //     console.log("IN-",that.reportArr[i]['Distance(Kms)']);
+                  //     }
+                  //   }
+
+                  console.log(that.reportArr[i]['Idle Time'],that.reportArr[i]['Moving Time'],that.reportArr[i]['Stoppage Time'],that.reportArr[i]['Idle Time']);
+                  
+                  if((that.reportArr[i]['Idle Time']+that.reportArr[i]['Stoppage Time']+that.reportArr[i]['Moving Time'])<24){
+                    that.reportArr[i].outOfReach=(24-(that.reportArr[i]['Idle Time']+that.reportArr[i]['Stoppage Time']+that.reportArr[i]['Moving Time'])).toFixed(2)
+                  }else{
+                    that.reportArr[i].outOfReach=0.0
+
+                  }
+  
+                  that.clocation_1(that.reportArr[i], function (err, succ) {
+                    if (err) {
+                      console.log(err);
+                      j++;
+                    } else {
+                      if(!(that.finalArr.includes(succ))){
+                        console.log(that.finalArr.includes(succ));
+                        for(var k=0;k<that.finalArr.length;k++){
+                          if(succ.Device_ID!=that.finalArr[k].Device_ID && succ.Date!=that.finalArr[k].Date){
+                            if(!(that.finalArr.includes(succ))){
+                              that.finalArr.push(succ);
+                            }
+                          }
+                        }
+                      }else{
+                        console.log(that.finalArr.includes(succ));
+                      }
+                      that.finalArr.push(succ);
+                      console.log(that.finalArr);
+                      j++;
+                      if (j === that.reportArr.length) {
+                        that.Load = false;
+                        var x = [];
+                        that.finalArr.sort(function(a,b){
+                          // Turn your strings into dates, and then subtract them
+                          // to get a value that is either negative, positive, or zero.
+                          var aDate:any = new Date(a.Date);
+                          var bDate:any = new Date(b.Date);  
+                          return bDate - aDate;
+                        });
+                       
+                     var filtered=_.uniqWith(that.finalArr, _.isEqual);
+                      
+                        console.log(filtered)
+
+                        callback({ data: filtered });
+                      }
+                    }
+                  })
+                }
+                console.log("HDH",that.reportArr)
+              } else {
+                that.Load = false;
+                callback({ data: [] });
+  
+              }
+            }, err => {
+              that.Load = false;
+              var errCode = err.status;
+              if(errCode == 500){
+                callback({ data: [] });
+              }
+
+            
+            });
+
+          } else {
+            let ta = [];
+            that.Load = false;
+            callback({ data: ta });
+          }
+
+        },
+
+        "columns": [
+          {
+            "data": "_id",
+            // "orderable":true,
+            "defaultContent": "",
+            "visible" :false, 
+            "render": function (data, type, row) {             
+              return  "";   
+            }
+          },
+          {
+            "data": "Date",
+            "render": function (data, type, row) {       
+              var reportDate = new Date(data);
+            //  return data?data:''
+              return data ? (moment(reportDate).format('DD-MM-YYYY')) : "";   
+            }
+          },
+          {
+            "data": "VRN",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "Distance(Kms)",
+            render: function (data, type, row) {
+            
+              return data ? parseFloat(data).toFixed(2) : 0.0;
+
+            }
+          },
+          {
+            "data": "Moving Time",
+            "defaultContent": "",
+            render: function (data, type, row) {
+            
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          {
+            "data": "Stoppage Time",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data ? parseFloat(data).toFixed(2) : 0.0;
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                // console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                // console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          {
+            "data": "Idle Time",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data ? parseFloat(data).toFixed(2) : 0.0;
+              var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            }
+          },
+          
+          {
+            "data": "Mileage",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              // return data ? parseFloat(data).toFixed(2) : 0.0;
+             
+              if(data){
+                if(row['Distance(Kms)']){
+                  var mileage=parseFloat(row['Distance(Kms)']) /parseFloat(data)
+                  return mileage.toFixed(2)
+                }else{
+                    return ''
+                }
+               
+              }else{
+                
+                return ''
+              }
+            // return hhmm;
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+         
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "70px", "targets": 4 },
+
+        ]
+      });
+
+    });
+
+  }
+
+
+
+
+deviceARR=[]
+  identifier: any = 'dayWiseReport';
+  getReport(event) {
+    console.log("inside function");
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+       for(var i=0;i<event.deviceArr.length;i++){
+         for(var j=0;j<this.vehicleData.length;j++){
+           if(event.deviceArr[i]==this.vehicleData[j].Device_ID){
+             this.deviceARR.push(this.vehicleData[j]._id)
+           }
+         }
+       }
+        deviceId = event.deviceArr;
+      }
+
+      this.Fromdate = fd;
+      this.todate = td;
+      this.deviceArr = deviceId;
+      //  this.getIgnitionReport()
+    // this.getDevices();
+    // this.getIdleReport()
+
+      this.tabelObj.ajax.reload();
+      // this.tabelObj.draw();  
+      // this.tabelObj.draw();
+      // if(this.ajaxCount != 0){
+
+      // }
+      // this.ajaxCount = 1 ; 
+    }
+
+  }
+
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_location) {
+      latLng = {
+        lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+        long: latlngObj.start_location.long ? latlngObj.start_location.long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+  expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Daywise Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.Fromdate).format('lll'); 
+//   var t_date =moment(this.todate).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Daywise Report ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Daywise Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Daywise Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        Date:'Date',
+        VRN:'Vehicle Name',
+        'Distance(Kms)':'Distance (Kms)',
+        'Moving Time':'Moving Time (HH:MM)',
+        'Stoppage Time':'Stoppage Time (HH:MM)',
+        'Idle Time':'Idle Time (HH:MM)',
+        startAddress:'Start Location',
+        endAddress:'End Location',
+      }
+    ];
+  }
+
+  
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       Date:pdfBody[j].Date,
+        VRN:pdfBody[j].VRN,
+        'Distance(Kms)':(pdfBody[j]['Distance(Kms)']).toFixed(2),
+        'Moving Time':this.conversion(pdfBody[j]['Moving Time']),
+        'Stoppage Time':this.conversion(pdfBody[j]['Moving Time']),
+        "Idle Time":this.conversion(pdfBody[j]['Idle Time']),
+        startAddress:pdfBody[j].startAddress,
+        endAddress:pdfBody[j].endAddress,
+
+      });
+    }
+    return body;
+  }
+
+  conversion(data){
+    var hhmm;
+              if(data){
+                data = Math.abs(data); // Change to positive
+                var decimal = data - Math.floor(data);
+                // console.log(decimal);
+                var minValue = (decimal *60).toFixed(2);
+                // console.log('minValue',minValue);
+                var hrValue= data.toString().split(".")[0] ; 
+
+                hhmm = hrValue + ':' + parseInt(minValue);
+              }else{
+                hhmm  =0+':'+0;
+
+              }
+            return hhmm;
+            
+
+  }
+// getUniqueListBy(arr, key) {
+//   var data=[...new Map(arr.map(item => [item[key], item])).values()]
+//     return data
+// }
+
+}
\ No newline at end of file
diff --git a/src/app/report/report component/device-fuel-report/device-fuel-report.component.html b/src/app/report/report component/device-fuel-report/device-fuel-report.component.html
new file mode 100644
index 0000000..a5dfd23
--- /dev/null
+++ b/src/app/report/report component/device-fuel-report/device-fuel-report.component.html	
@@ -0,0 +1,142 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Fuel Consumption Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <flash-messages style="float: center;width: 100%"></flash-messages> 
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;" title="Veicle Name">{{'Vehicle' | translate}}</th>
+                      <th style="text-align:left;">{{'Start Time' | translate}}</th>
+                      <th style="text-align:left;">End Time</th>    
+                      <th style="text-align:left;" title="Fuel Consumed (L)">{{'Fuel Consumed(Lt)' | translate}}</th>
+                      <th style="text-align:left;">{{'Distance(Kms)' | translate}}</th>
+                      <th style="text-align:left;" title="Fuel Fill Count">{{'Fill Count' | translate}}</th>
+                      <th style="text-align:left;" title="Fuel Theft Count">{{'Theft Count' | translate}}</th>
+                      <th style="text-align:left;">{{'Start Location' | translate}}</th>      
+                      <th style="text-align:left;">{{'End Location' | translate}}</th>        
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+  <p class="headStyle">{{'Fuel Consumption Report' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div class="InputStyle">
+      <div class="row">
+          <div class="col-md-2" style="text-align: center">
+              <md-input-container>
+              <input mdInput placeholder="{{'Search' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+              #state="ngModel" [(ngModel)]="deviceName" 
+              (ngModelChange)="filterDevices(deviceName)">
+             <md-autocomplete #tdAuto="mdAutocomplete">
+                <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+                  <span>{{device.viewValue}}</span>
+                </md-option >
+              </md-autocomplete>   
+            </md-input-container>
+          
+          </div>
+          <div class="col-md-2">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+          </div>
+          <div class="col-md-2">  
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+          </div>
+          <div class="col-3" style="text-align: center; padding-top: 17px; font-size: 20px;">
+            <label id="example-radio-group-label">{{'Report Type' | translate}} :</label>
+            <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="filterRtype">
+              <md-radio-button class="example-radio-button" *ngFor="let rtype of reportType" [value]="rtype" style="margin-left: 5px">
+                {{rtype}}
+              </md-radio-button>
+            </md-radio-group>
+          </div>
+          <div class="col-md-3" style="padding-left: 65px;padding-top:17px;">
+              <button style="background-color: #484848;color:#fdfdfd;width: 120px;" md-raised-button class="btn btn-primary w3-button/" (click)="devicefuelreport()">{{'SEARCH' | translate}}</button>       
+       
+            </div>
+          </div>
+       
+          <div class="row">
+            <div class="col-12">
+              <flash-messages style="float: center;width: 100%"></flash-messages> 
+            </div>
+          </div>
+        </div>
+  <table id="deviceTable" class="table " cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+  
+      <thead style="background-color:#A2C523;color: white;">
+          <tr>
+              <th style="text-align:center;">{{'Vehicle name' | translate}}</th>
+              <th style="text-align:center;">{{'Start Time' | translate}}</th>
+              <th style="text-align:center;">End Time</th>    
+              <th style="text-align:center;">{{'Fuel Consumed (L)' | translate}}</th>
+              <th style="text-align:center;">{{'Distance(Kms)' | translate}}</th>
+              <th style="text-align:center;">{{'Fuel Fill Count' | translate}}</th>
+              <th style="text-align:center;">{{'Fuel Theft Count' | translate}}</th>
+              <th style="text-align:center;">{{'Start Location' | translate}}</th>      
+              <th style="text-align:center;">{{'End Location' | translate}}</th>               
+          </tr>
+      </thead>  
+      <tbody  >
+        <tr *ngFor="let fuelval of fuelDataArr" >
+            <td style="text-align: center">{{((fuelval.vehicle_name != undefined)&&(fuelval.vehicle_name)&&(fuelval.vehicle_name.trim().length != 0))?fuelval.vehicle_name:tempVehName}}</td>
+          <td style="text-align: center" >{{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center" >{{fuelval.end_time | date:  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center">{{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}}</td>
+          <td style="text-align: center">{{(fuelval.distance != "NaN")?(fuelval.distance | number : '1.2-2') : "NA"}}</td>
+          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'in')">{{fuelval.in_event_count}}</td>
+          <td style="cursor:pointer" (click)="showinoutReport(fuelval,'out')">{{fuelval.out_event_count}}</td>
+          <td style="cursor:pointer;text-align:center">     
+            <a href={{addressLink}} target="_blank" (click)= "getAddress(fuelval,'start')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+          </td>
+          <td style="cursor:pointer;text-align:center">
+            <div>        
+              <a href={{addressLink1}} target="_blank" (click)= "getAddress(fuelval,'end')" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+            </div>       
+          </td>
+        </tr>
+      </tbody>
+  </table>
+</div>
+
+
+
+ -->
diff --git a/src/app/report/report component/device-fuel-report/device-fuel-report.component.scss b/src/app/report/report component/device-fuel-report/device-fuel-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/device-fuel-report/device-fuel-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/device-fuel-report/device-fuel-report.component.spec.ts b/src/app/report/report component/device-fuel-report/device-fuel-report.component.spec.ts
new file mode 100644
index 0000000..6c69bf7
--- /dev/null
+++ b/src/app/report/report component/device-fuel-report/device-fuel-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceFuelReportComponent } from './device-fuel-report.component';
+
+describe('DeviceFuelReportComponent', () => {
+  let component: DeviceFuelReportComponent;
+  let fixture: ComponentFixture<DeviceFuelReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceFuelReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceFuelReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/device-fuel-report/device-fuel-report.component.ts b/src/app/report/report component/device-fuel-report/device-fuel-report.component.ts
new file mode 100644
index 0000000..fd3113b
--- /dev/null
+++ b/src/app/report/report component/device-fuel-report/device-fuel-report.component.ts	
@@ -0,0 +1,520 @@
+import { Component, OnInit } from '@angular/core';
+
+declare var $: any, DataTable: any, google: any;
+
+import * as moment from 'moment'
+import { MdDialog } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ContactService } from '../../../contact.service';
+import { FuelObjectcomponentComponent } from '../../../fuel-objectcomponent/fuel-objectcomponent.component';
+declare var $: any;
+@Component({
+  selector: 'app-device-fuel-report',
+  templateUrl: './device-fuel-report.component.html',
+  styleUrls: ['./device-fuel-report.component.scss']
+})
+export class DeviceFuelReportComponent implements OnInit {
+  option: any;
+  Fromdate = new Date();
+  todate = new Date();
+  emailid: any;
+  useridd: any;
+  identifier: any = 'fuel_consumption_report';
+  tabelObj: any ;
+  errorStatus: string;
+  filterRtype: any;
+  // reportType = ['Time','Daily','Trip']
+  serviceResponse: boolean;
+  devicesss: any;
+  finall: any;
+  fuelDataArr: any[];
+  eventT: any;
+  rowcolor: string;
+  xlbutton: boolean = false;
+  Load: boolean;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  lattitude1: any;
+  longitude1: any;
+  addressLink: any;
+  addressLink1: string;
+  tempVehName: any;
+  constructor(public contactService: ContactService, public dialog: MdDialog, private _flashMessagesService: FlashMessagesService) {
+
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+   
+  }
+
+  ngOnInit() {
+    this.Fromdate.setHours(0, 0, 0);
+    this.testTable();
+    // this.getAllDevice();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+  }
+
+
+  deviceObj = [];
+  // getAllDevice() {
+  //   this.deviceObj = [];
+  //   this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+  //     data => {
+  //       this.devicesss = data
+  //       this.finall = (this.devicesss.devices);
+  //       for (let i = 0; i < this.devicesss.devices.length; i++) {
+
+  //         if (this.devicesss.devices[i].type_of_device == "Tracker") {
+
+  //           let a = {
+  //             value: this.devicesss.devices[i].Device_Name,
+  //             viewValue: this.devicesss.devices[i].Device_Name,
+  //             did: this.devicesss.devices[i].Device_ID,
+  //             id: this.devicesss.devices[i]._id,
+  //             user: this.devicesss.devices[i].user,
+  //             email: this.devicesss.devices[i].Email_ID,
+  //             deviceType: this.devicesss.devices[i].type_of_device
+  //           }
+  //           this.deviceObj.push(a);
+  //         }
+
+  //       }
+  //       // console.log(this.deviceObj);
+
+
+  //     });
+  // }
+
+
+  deviceSelect: any = [];
+  deviceName: any;
+  // filterDevices(dlr) {
+  //     // console.log("deviceData=>", dlr);
+  //     if (dlr) {
+  //         // console.log(dlr);
+  //         const filterdealerValue: any = dlr;
+  //         this.deviceSelect = [];
+  //         this.deviceSelect = this.deviceObj.filter(function(pp) {        
+  //             // console.log(pp);
+  //             var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+  //             return t > -1;
+  //         });
+  //         return this.deviceSelect;
+  //     }
+
+  // }
+
+
+  testTable() {
+    const that = this;
+   
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '63vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          that.fuelDataArr = [];
+          if ((that.filterRtype == 'Daily') || (that.filterRtype == 'Trip')) {
+            if (that.deviceArr.length == 0) {
+              that._flashMessagesService.show("Please Select Device ... ", { cssClass: 'alert-warning', timeout: 3000 });
+              return;
+            }
+          }
+
+          if (that.Fromdate == undefined) {
+            that._flashMessagesService.show("Please Select Fromdate  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+          }
+          if (that.todate == undefined) {
+            that._flashMessagesService.show("Please Select Todate  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+          }
+
+          if (that.deviceArr.length<0 ||that.deviceArr.length==0) {
+            console.log("INDD");
+            
+            that._flashMessagesService.show("Please Select Device  ", { cssClass: 'alert-warning', timeout: 3000 });
+            return;
+          }
+
+          var payloadObj = {
+            from: that.Fromdate.toISOString(),
+            to: that.todate.toISOString(),
+            user: that.useridd
+          }
+
+          if (that.filterRtype == 'Daily') {
+            payloadObj['daywise'] = true;
+            payloadObj['imei'] = that.deviceArr[0].did;
+            payloadObj['vehicle'] = that.deviceArr[0].id;
+          }
+          if (that.filterRtype == 'Trip') {
+            payloadObj['trip'] = true;
+            payloadObj['imei'] = that.deviceArr[0].did;
+            payloadObj['vehicle'] = that.deviceArr[0].id;
+          }
+
+          if (that.filterRtype == 'Time') {
+            if (that.deviceArr.length != 0) {
+              payloadObj['imei'] = that.deviceArr[0].did;
+              payloadObj['vehicle'] = that.deviceArr[0].id;
+              delete payloadObj.user;
+            }
+          }
+          console.log(that.deviceArr,payloadObj);
+
+          that.Load = true;
+
+          that.contactService.devicefuelreport(payloadObj)
+            .subscribe(res => {
+              that.fuelDataArr = [];
+              that.Load = false;         
+             that.fuelDataArr = res;
+              if ((that.fuelDataArr.length != 0) && (that.deviceArr.length != 0)) {
+                for (var i = 0; i < that.fuelDataArr.length; i++) {
+                  that.fuelDataArr[i]['tempVehName'] = that.deviceArr[0].viewValue;
+                }
+              }
+              // console.log('that.fuelDataArr',that.fuelDataArr);
+              callback({ data: that.fuelDataArr });
+
+            }, err => {
+              that.Load = false;
+              that._flashMessagesService.show("Internal Server error , Please try after sometime !!!", { cssClass: 'alert-warning', timeout: 2000 });
+              // console.log(err);
+            })
+        },
+        "rowCallback": function(row: Node, data:any | Object, index: number){  
+          $('#in', row).bind('click', () => {      
+                 
+            data.event = 'in';   
+            console.log('data',data.in_event_count);
+            if(data.in_event_count != 0){
+              let dialogRef_1 = that.dialog.open(FuelObjectcomponentComponent, { 
+                width: '950px',
+                data: data
+              });     
+            }
+                
+          });
+
+          $('#out', row).bind('click', () => {  
+            data.event = 'out';   
+         
+            if(data.out_event_count != 0){
+              let dialogRef_1 = that.dialog.open(FuelObjectcomponentComponent, {
+                width: '950px',
+                data: data
+              });   
+            }         
+           
+          }); 
+        
+        },  
+
+        "columns": [
+          {
+            "data": "vehicle_name",
+            "defaultContent": "_id",
+            "render": function (data, type, row) {
+              // console.log(row);
+              // var vname = ((data != undefined) && (data) && (data.trim().length != 0)) ? data : row.tempVehName;
+              var vname = (data!=undefined)?data:row.tempVehName ; 
+                return vname;
+            }
+          },
+          {
+            "data": "start_time",
+            render: function (data, type, row) {
+              var st = new Date(data);
+              return data ? (moment(st).format('llll')) : "";
+
+            }
+          },
+          {
+            "data": "end_time",
+            render: function (data, type, row) {
+              var et = new Date(data);
+              return data ? (moment(et).format('llll')) : "";
+            }
+          },
+          {
+            "data": "fuel_consumed",
+            render: function (data, type, row) {
+              var fc = data ? data.toFixed(2) : "0";
+              return fc;
+            }
+          },
+          {
+            "data": "distance",
+            render: function (data, type, row) {
+              var dis = (data != "NaN") ? data.toFixed(2) : "0"
+              return dis;
+            }
+          },
+          {
+            "data": "in_event_count",
+            render: function (data, type, row) {
+              let in_event_count =  "<i id='in' style='cursor:pointer'>"+data+"</i>" ; 
+              return in_event_count;
+            }
+          },
+          {
+            "data": "out_event_count",
+            render: function (data, type, row) {
+              // <i id="deviceSetting" style="font-size:20px" title="Share device" class="fas fa-cog"></i>
+              let out_event_element = "<i id='out' style='cursor:pointer'>"+data+"</i>" ; 
+              return out_event_element;
+             
+            }
+          },
+          {
+            "data": "start_location",
+            render: function (data, type, row) {
+              let lat = (data != undefined)?data.lat: null;
+              let long = (data != undefined)?data.lng : null;
+              var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';               
+                return addressLink;                
+            }
+          },
+          {
+            "data": "end_location",
+            render: function (data, type, row) {
+              let lat = (data != undefined)?data.lat: null;
+              let long = (data != undefined)?data.long : null;
+              var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';                
+                return addressLink;             
+            }
+          },
+
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7,8] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+       
+          { "width": "13%", "targets": 1 },
+          { "width": "13%", "targets": 2 },
+      
+
+        ]
+      });
+
+    });
+
+  }
+
+
+  // devicefuelreport(){ 
+  //     console.log("this.filterDevices=>",this.filterRtype);
+  //     // pe = ['time','daily','trip']
+  //     if((this.filterRtype == 'Daily')||(this.filterRtype == 'Trip')){
+  //       if(this.deviceSele ct.length == 0){
+  //         this._flashMessagesService.show("Please Select Device ... ", { cssClass: 'alert-warning', timeout: 3000 });
+  //         return;
+  //       }
+
+  //     }
+
+  //     if(this.Fromdate == undefined){
+  //       this._flashMessagesService.show("Please Select Fromdate  ", { cssClass: 'alert-warning', timeout: 3000 });
+  //       return;
+  //     }
+  //     if(this.todate == undefined){
+  //       this._flashMessagesService.show("Please Select Todate  ", { cssClass: 'alert-warning', timeout: 3000 });
+  //       return;
+  //     }
+
+  //     var payloadObj = {
+  //       from : this.Fromdate.toISOString(),
+  //       to : this.todate.toISOString(),
+  //       user : this.useridd    
+  //     }
+
+  //     if(this.filterRtype == 'Daily'){
+  //       payloadObj['daywise'] = true;
+  //       payloadObj['imei'] = this.deviceSelect[0].did;
+  //       payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //     }
+  //     if(this.filterRtype == 'Trip'){
+  //       payloadObj['trip'] = true;
+  //       payloadObj['imei'] = this.deviceSelect[0].did;
+  //       payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //     }
+
+  //     if(this.filterRtype == 'Time'){
+  //       if(this.deviceSelect.length != 0){
+  //         payloadObj['imei'] = this.deviceSelect[0].did;
+  //         payloadObj['vehicle'] = this.deviceSelect[0].id;
+  //         delete payloadObj.user;
+  //       }
+  //     }
+  //     console.log(payloadObj);
+
+  //     this.Load = true;
+  //     // this.todate.toISOString(),this.Fromdate.toISOString(),this.deviceSelect[0].did
+
+  //     this.contactService.devicefuelreport(payloadObj)
+  //         .subscribe(res=>{
+  //          this.Load =false;
+  //          this.xlbutton =false;
+  //          console.log("fuelconsumptionReport=>",res);
+  //          this.fuelDataArr = res;
+  //          if((this.fuelDataArr.length != 0)&&(this.deviceSelect.length != 0) ){
+  //            this.tempVehName = this.deviceSelect[0].viewValue ; 
+  //          }  
+  //         },err=>{
+  //           this.Load = false;   
+  //             this._flashMessagesService.show("Internal Server error , Please try after sometime !!!", { cssClass: 'alert-warning', timeout: 2000 });
+  //             // console.log(err);
+  //         })
+  // }
+
+  secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h + (h == 1 ? " hr, " : " hrs, ") : "";
+    var mDisplay = m > 0 ? m + (m == 1 ? " min, " : " mins, ") : "";
+    var sDisplay = s > 0 ? s + (s == 1 ? " sec" : " sec") : "";
+    return hDisplay + mDisplay + sDisplay;
+  }
+
+  colorChangefunc(fuelval) {
+    //   console.log(fuelval)
+  }
+
+  tab: any;
+  exportExcel() {
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+      // console.log('tab_text',JSON.parse(tab_text));
+      //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text = tab_text + "</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+
+  locationAddress: any;
+  getAddress(fuelval, val) {
+    var outerThis = this;
+    console.log(fuelval);
+    if (fuelval == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+      this.lattitude1 = null;
+      this.longitude1 = null;
+    } else {
+      if (val == 'start') {
+        this.lattitude = fuelval.start_location.lat;
+        this.longitude = fuelval.start_location.lng;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+      }
+      else if (val == 'end') {
+        this.lattitude1 = fuelval.end_location.lat;
+        this.longitude1 = fuelval.end_location.lng;
+        var geocoder = new google.maps.Geocoder();
+        var latlng = new google.maps.LatLng(this.lattitude1, this.longitude1);
+      } else {
+        this.lattitude = null;
+        this.longitude = null;
+        this.lattitude1 = null;
+        this.longitude1 = null;
+      }
+
+
+    }
+
+
+    this.addressLink = 'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+    this.addressLink1 = 'https://maps.google.com/?q=' + this.lattitude1 + ',' + this.longitude1
+
+  }
+
+  // showinoutReport(fuelObj, ev) {
+  //   if ((fuelObj.in_event_count == 0) && (ev == 'in')) {
+  //     return
+  //   }
+  //   if ((fuelObj.out_event_count == 0) && (ev == 'out')) {
+  //     return
+  //   }
+  //   fuelObj.event = ev;
+  //   let dialogRef_1 = this.dialog.open(FuelObjectcomponentComponent, {
+  //     // height:'500px',
+  //     width: '950px',
+  //     data: fuelObj
+  //   });
+  // }
+  deviceArr: any = []
+  getReport(event) {
+    this.deviceArr = [];
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      console.log('this.deviceArr', this.deviceArr);
+
+      this.Fromdate = fd;
+      this.todate = td;
+      this.filterRtype = tpdata.filter_type;
+
+
+      this.tabelObj.ajax.reload();    
+
+    }
+
+  }
+
+
+}
diff --git a/src/app/report/report component/device-sosreport/device-sosreport.component.html b/src/app/report/report component/device-sosreport/device-sosreport.component.html
new file mode 100644
index 0000000..c2bd128
--- /dev/null
+++ b/src/app/report/report component/device-sosreport/device-sosreport.component.html	
@@ -0,0 +1,120 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Device SOS Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;">{{'Device ID' | translate}}</th>
+                      <th style="text-align:left;">{{'Vehicle No.' | translate}}</th> 
+                      <th style="text-align:left;">{{'Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Address' | translate}}</th>         
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+<!-- <html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+      <app-all-menus></app-all-menus>
+
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a>        
+  </md-menu> 
+</div> 
+  <div style="min-height:100vh;padding-top: 5%;">
+    <p class="headStyle" style="margin-top: 0%;">{{'SOS Report' | translate}}</p>
+     <div class="loading" *ngIf="Load"></div>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+            <md-input-container>
+            <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option"
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.value">
+                <span>{{ option.value }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+     
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+           
+          </div>
+      </div>
+    </div>
+    <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+      <thead style="background-color:#A2C523;color: white;">
+          <tr>
+              <th style="text-align:center;">{{'Device ID' | translate}}</th>
+              <th style="text-align:center;">{{'Vehicle No.' | translate}}</th>
+              <th style="text-align:center;">{{'Time' | translate}}</th>
+              <th style="text-align:center;">{{'Address' | translate}}</th>         
+          </tr>
+      </thead>  
+  </table>
+
+    
+  </div>
+</body>
+</html> -->
\ No newline at end of file
diff --git a/src/app/report/report component/device-sosreport/device-sosreport.component.scss b/src/app/report/report component/device-sosreport/device-sosreport.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/device-sosreport/device-sosreport.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/device-sosreport/device-sosreport.component.spec.ts b/src/app/report/report component/device-sosreport/device-sosreport.component.spec.ts
new file mode 100644
index 0000000..82f3efe
--- /dev/null
+++ b/src/app/report/report component/device-sosreport/device-sosreport.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceSOSreportComponent } from './device-sosreport.component';
+
+describe('DeviceSOSreportComponent', () => {
+  let component: DeviceSOSreportComponent;
+  let fixture: ComponentFixture<DeviceSOSreportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceSOSreportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceSOSreportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/device-sosreport/device-sosreport.component.ts b/src/app/report/report component/device-sosreport/device-sosreport.component.ts
new file mode 100644
index 0000000..59b1e93
--- /dev/null
+++ b/src/app/report/report component/device-sosreport/device-sosreport.component.ts	
@@ -0,0 +1,412 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+declare var swal: any;
+@Component({
+  selector: 'app-device-sosreport',
+  templateUrl: './device-sosreport.component.html',
+  styleUrls: ['./device-sosreport.component.scss']
+})
+export class DeviceSOSreportComponent implements OnInit {
+  option:any;
+  finalArr=[]
+  Fromdate:any = new Date();
+  todate:any= new Date();
+  dataSelect: any;
+  useridd: any;
+  t: any;
+  devicesss: any;
+  finall: any;
+  emailid: any;
+  options: any=[];
+  Load: boolean;
+  tabelObj: any;
+  DealerId: any;
+private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private _service:ReportService,private router: Router) {
+ this._service.invokeEventForsosReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+    ngOnDestroy(){
+    
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+      console.log(this.Fromdate.setHours(0,0,0));
+   //  var from = new Date()
+    // this.Fromdate = from.setHours(0,0,0);
+    // console.log(this.Fromdate);
+    this.t = document.getElementById("download");
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.DealerId = JSON.parse(window.atob(window.localStorage.token.split(".")[1]));
+    console.log("oifjerteoimfspferkrepofwe,rpewrekewpoewerkewop",this.DealerId);
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log("ignition option",this.options);
+      });
+      this.testTable();
+  }
+
+  callfunction(): void {
+    this.tabelObj.draw();
+}
+
+
+  filterStates(val) {
+    // console.log(val)
+    // console.log(this.options)
+    if (val) {
+      const filterValue:any = val
+       this.dataSelect = this.options.filter( function(d){
+    
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+      });
+      return this.dataSelect;
+    }
+  
+  }
+
+
+  // exportExcel(){
+
+  // }
+
+    // ======================================SOS ALERT by data Table ====================================
+
+    testTable() {
+      const that = this;
+
+      $(document).ready(function() {
+          that.tabelObj = $('#deviceTable').DataTable({
+              serverSide: true,
+              "processing": true,
+              "searching": false,
+              "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
+
+              ajax: (dataTablesParameters: any, callback) => {
+
+                  dataTablesParameters.op = {};
+                  dataTablesParameters.select = [];
+                  dataTablesParameters.find = {};
+
+
+                  // console.log(dataTablesParameters);
+                  // console.log("callback", callback);
+
+                  // dataTablesParameters.find = {
+                  //   _id: that.useridd         
+                  // };
+                  dataTablesParameters.columns = [
+                      { data: "_id" },
+                      { data: "device" },
+                      { data: "vehicleName" },
+                      { data: "timestamp" },
+                      { data: "address" }
+                   
+                    ]
+                  
+                      dataTablesParameters.find.user = that.useridd;
+                      dataTablesParameters.find.type = 'SOS';
+
+                 
+                  if (that.deviceArr.length != 0) {
+                       console.log(that.dataSelect);
+                      dataTablesParameters.find.device = that.deviceArr[0];
+                  }
+                  if (that.Fromdate) {
+                      
+                      var fdate = new Date(that.Fromdate).toISOString();
+                     
+                      dataTablesParameters.find['timestamp'] = dataTablesParameters.find['timestamp'] ? dataTablesParameters.find['timestamp'] : {};
+                      dataTablesParameters.find['timestamp']['$gte'] = fdate;       
+                  };
+                  // }
+                  if (that.todate) {
+                      var tdate =  new Date(that.todate).toISOString()
+                      dataTablesParameters.find['timestamp'] = dataTablesParameters.find['timestamp'] ? dataTablesParameters.find['timestamp'] : {};
+                      dataTablesParameters.find['timestamp']['$lte'] = tdate;
+                  }
+                  that.finalArr=[]
+                  var suburl = "";
+                  suburl += "/notifs/statusReport";
+                  // console.log(suburl);
+                  // console.log(dataTablesParameters);
+                  // console.log(suburl)
+                  if(that.todate && that.Fromdate){
+                  that.Load = true;
+                  that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+                    that.Load = false;
+                    that.finalArr=resp.data
+                    console.log(resp);
+                    // if(resp.data.length == 0){
+                    //   swal(
+                    //     'Oops !!!',
+                    //     'No data found',
+                    //     'error'
+                    //   )
+                    // }
+                      callback(resp);
+                  }, err => {
+                    that.Load =false;
+                    swal(
+                      'Error',
+                      'Internal server error, Please try after somtime !!!',
+                      'error'
+                    )
+                      // console.log(err);
+                      // console.log(err.status);
+                  });
+                }else{
+                   callback([]);
+                   that.Load =false;
+                }
+              },
+              "columns": [
+                  {
+                      "data": "device",
+                      "render": function(data, type, row) {
+                          return data ? data : "";
+                      }
+                  },
+                  {
+                    "data": "vehicleName",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                  {
+                      "data": "timestamp",
+                      render: function(data, type, row) {
+                        var created_time = new Date(data);
+                        return data ? (moment(created_time).format('dddd,ll,LTS')) : "";
+                      
+                      }
+                  },
+                  {
+                      "data": "address",
+                      render: function(data, type, row) {
+                          return data ? data : "";
+                      }
+                  }                        
+              ],
+
+              // columnDefs: [
+               
+              // ],
+
+          });
+          // $('#deviceTable tbody').on('click', 'button', function() {
+          //   debugger;
+          //     var data = that.tabelObj.row($(this).parents('tr')).data();
+          //     console.log("button clicked");
+          // });
+      });
+
+      
+
+  }
+
+
+
+
+
+
+
+
+    // ======================================SOS ALERT by data Table ====================================
+
+    tab:any;
+
+    exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        // console.log('tab_text',JSON.parse(tab_text));
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+    deviceArr = [];
+    identifier : any = 'device_sos_report';
+    getReport(event){
+     if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+        var deviceId: any;
+        var tpdata = event ; 
+        var that = this;
+        var fd = new Date(tpdata.fromDate);
+        var td  = new Date(tpdata.toDate);
+        
+        if(event.deviceArr.length==0){
+          deviceId=[];
+        }else{
+          deviceId= event.deviceArr;
+        }
+        this.deviceArr = deviceId; 
+        console.log('this.deviceArr',this.deviceArr);
+        
+        this.Fromdate = fd;
+        this.todate = td;
+        console.log("b4");
+        // this.tabelObj.clear();
+        // var aa = [];
+        // this.tabelObj.rows.add(aa); 
+    
+    
+       
+          // this.tabelObj.ajax.reload();    
+        
+        
+          this.tabelObj.draw();         
+
+        
+         
+          
+      
+      
+      }
+     
+    }
+    
+      
+ expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+downloadPdf() {
+    let fileName =
+      "Device SOS Report" +
+      new Date().getTime() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+
+    var doc = new jsPDF("p", "pt", pdfsize);
+  
+  doc.setFontSize(15);
+  doc.text('Device SOS Report ', 20, 30);
+    doc.setFontStyle("arial");
+    var header = function(data) {
+    doc.setFontSize(15);
+    doc.setTextColor(40);
+    doc.setFontStyle('normal');
+   
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    startY: doc.autoTableEndPosY() + 20
+  };
+
+    doc.autoTable({
+      head: this.headRows(),
+      // margin: { top: 80 },
+      body: this.bodyRows(this.finalArr.length, this.finalArr),
+      options
+      
+    });
+    doc.save(fileName);
+  }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        device:'Device ID',
+        vehicleName:'Vehicle Name',
+        timestamp:'Time',
+        address:'Address',
+      
+        
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       device:pdfBody[j].device,
+       vehicleName:pdfBody[j].vehicleName,
+       timestamp:pdfBody[j].timestamp,  
+       address:pdfBody[j].address, 
+      });
+    }
+    return body;
+  }
+
+  
+
+}
+ 
\ No newline at end of file
diff --git a/src/app/report/report component/device-speed-report/device-speed-report.component.html b/src/app/report/report component/device-speed-report/device-speed-report.component.html
new file mode 100644
index 0000000..84292f2
--- /dev/null
+++ b/src/app/report/report component/device-speed-report/device-speed-report.component.html	
@@ -0,0 +1,57 @@
+
+
+<!-- <app-all-menus></app-all-menus> -->
+<div style="float:left; width: 99%; height:86vh;padding-left: 3%;padding-top: 6%;">
+    <p class="headStyle">{{'Speed variation' | translate}}</p>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+    <!-- <div id="c44"  style="margin-top: 16px;padding-bottom:2%">
+      <md-input-container>
+        <input mdInput placeholder="{{'Search Device' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+        #state="ngModel" [(ngModel)]="option"
+       (ngModelChange)="filterStates(option)">
+       <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let option of dataSelect" [value]="option.value">
+            <span>{{ option.value }}</span>
+          </md-option>
+        </md-autocomplete>   
+      </md-input-container>
+      </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+      
+    Select date : 
+    <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+      
+    </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+        <button  (click)="creategraph()" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button>
+      </div><br>    -->
+        
+       
+    
+    
+    <br>
+     <br>
+     <div style="  width:100%;
+     height:66.67vh;">
+
+
+     <div style="display: block;">
+        <canvas baseChart  height=" 425px"
+        width= "874px"
+                    [datasets]="lineChartData"
+                    [labels]="lineChartLabels"
+                    [options]="lineChartOptions"
+                    [colors]="lineChartColors"
+                    [legend]="lineChartLegend"
+                    [chartType]="lineChartType"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+    </div> 
+  </div>
+  <br>
+</div>
+
diff --git a/src/app/report/report component/device-speed-report/device-speed-report.component.scss b/src/app/report/report component/device-speed-report/device-speed-report.component.scss
new file mode 100644
index 0000000..9136fb1
--- /dev/null
+++ b/src/app/report/report component/device-speed-report/device-speed-report.component.scss	
@@ -0,0 +1,1270 @@
+::-webkit-scrollbar {
+  display: none;
+}
+
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+
+  color: #6b6a6a;
+  padding-top: 7px;
+  margin: 0px;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+#d:hover {
+  color: rgb(14, 102, 18);
+}
+#active {
+  text-decoration-line: underline;
+  text-decoration-color: rgb(66, 26, 245);
+}
+#ac {
+  color: rgb(38, 38, 90);
+}
+ul,
+li {
+  list-style: none;
+  float: left;
+  line-height: 15vh;
+}
+.upper {
+  margin-top: -70px;
+  width: 100%;
+  height: 15%;
+  /* margin-left: -2px;*/
+  position: fixed;
+  background-color: white;
+  top: 0;
+  z-index: 1;
+}
+.up {
+  color: gray;
+  /* Add a font */
+
+  /* Set the font-size to 25 pixels */
+  font-size: 25px;
+}
+.middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-left: -220px;
+  margin-top: -20px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.desc {
+  padding: 15px;
+  text-align: center;
+}
+#insert {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+#insert2 {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+.vertical-menu {
+  width: 250px;
+  padding-left: 10px;
+}
+
+.vertical-menu a {
+  background-color: #eee;
+  color: black;
+  display: block;
+  padding: 12px;
+  text-decoration: none;
+}
+
+.vertical-menu a:hover {
+  background-color: #ccc;
+}
+
+.vertical-menu a.active {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+#c2 {
+}
+#c1 {
+  float: left;
+}
+
+body {
+  margin: 0;
+}
+
+.icon-bar {
+  width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262f;
+  margin-top: -9px;
+  height: 100%;
+  position: fixed;
+  display: inline-block;
+  margin-left: -16px;
+}
+@media screen and (max-width: 1000px) {
+  .off {
+    display: none;
+  }
+}
+.icon-bar2 {
+  width: 299px;
+  background-color: white;
+  margin-top: -7px;
+  height: 86vh;
+  position: fixed;
+}
+.icon-bar a {
+  display: block;
+  text-align: center;
+  padding: 16px;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+  text-align: left;
+}
+
+.icon-bar a:hover {
+  background-color: #000;
+}
+
+.active {
+  background-color: #4caf50 !important;
+}
+.iphone {
+  width: 201px;
+  height: 378px;
+  background: #f9f7f9;
+  border: 5px solid #c1bfc1;
+  border-radius: 45px;
+  opacity: 0.8;
+}
+.highlight {
+  width: 185px;
+  height: 366px;
+  border: 3px solid #fff;
+  border-radius: 45px;
+  position: relative;
+  z-index: 10;
+  top: -748px;
+  left: 10px;
+}
+.circle {
+  width: 7px;
+  height: 7px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -370px;
+  left: 92px;
+}
+.camera {
+  width: 10px;
+  height: 10px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -376px;
+  left: 66px;
+}
+.speaker {
+  width: 59px;
+  height: 3px;
+  background: #333;
+  border-radius: 5px;
+  position: relative;
+  top: -372px;
+  left: 73px;
+}
+.screen {
+  width: 166px;
+  height: 255px;
+  border: 3px solid #333;
+  border-radius: 5px;
+  position: relative;
+  left: 18px;
+  top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+  width: 47px;
+  height: 47px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  top: -353px;
+  left: 79px;
+  z-index: 2;
+}
+.home2 {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: relative;
+  top: -403px;
+  left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+#c2 {
+  //background:green;
+  float: right;
+}
+#c1,
+#c2 {
+  width: 33%;
+  //background: rebeccapurple
+}
+
+#c3 {
+  width: auto;
+  width: 34%;
+  // background: red
+}
+.off {
+  margin: auto;
+  width: 60%;
+  top: 70%;
+  padding: 10px;
+  margin-right: 30%;
+}
+.newspaper {
+  -webkit-column-count: 2; /* Chrome, Safari, Opera */
+  -moz-column-count: 2; /* Firefox */
+  column-count: 2;
+  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+  -moz-column-gap: 40px; /* Firefox */
+  column-gap: 40px;
+  align-content: left;
+  text-align: left;
+}
+#demo {
+  margin: 30px 0 50px 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#demo .wrapper {
+  display: inline-block;
+  width: 180px;
+  margin: 0 10px 0 0;
+  height: 20px;
+  position: relative;
+}
+
+#demo .parent {
+  height: 100%;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  border-radius: 5px;
+  background: #f9f9f9;
+  border: 1px solid #aaa;
+  border-bottom: 1px solid #777;
+  color: #282d31;
+  font-weight: bold;
+  z-index: 2;
+  position: relative;
+  -webkit-transition: border-radius 0.1s linear, background 0.1s linear,
+    z-index 0s linear;
+  -webkit-transition-delay: 0.8s;
+  text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+  background: #fff;
+  -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+#demo .content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: 1;
+  height: 0;
+  width: 180px;
+  padding-top: 30px;
+  -webkit-transition: height 0.5s ease;
+  -webkit-transition-delay: 0.4s;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+#demo .wrapper:active .content {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content ul {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+  text-decoration: none;
+}
+
+#demo .content li:hover {
+  background: #eee;
+  color: #333;
+}
+
+#demo .content li {
+  list-style: none;
+  text-align: left;
+  color: #888;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.customClass {
+  background-color: #dd3;
+  border-radius: 5px;
+  margin: 5px;
+  width: 500px;
+}
+
+.customClass .img-ul-upload {
+  background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+  background-color: #b819bb !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+  color: purple !important;
+}
+
+.customClass .img-ul-container {
+  background-color: #ff6cad !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+  padding: 16px;
+  height: 201px !important;
+}
+.weekDays-selector input {
+  display: none !important;
+}
+
+.weekDays-selector input[type="checkbox"] + label {
+  display: inline-block;
+  border-radius: 6px;
+  background: #dddddd;
+  height: 40px;
+  width: 34.2px;
+  margin-right: 3px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.weekDays-selector input[type="checkbox"]:checked + label {
+  background: #2ad705;
+  color: #ffffff;
+}
+@media screen and (max-width: 900px) {
+  .icon-bar {
+    display: none;
+  }
+  .sch {
+    display: none;
+  }
+  .first {
+    width: 1% !important;
+  }
+  .second {
+    margin-left: 8px !important;
+  }
+  .small {
+    display: block !important;
+  }
+  .image {
+    display: none;
+  }
+  .schlar {
+    display: block !important;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .schlar {
+    display: none;
+  }
+}
+.small {
+  display: none;
+}
+.first {
+  float: left;
+  width: 16%;
+  height: 86vh;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  margin-right: 5px;
+}
+.second {
+  width: 88%;
+  height: 86vh;
+  margin-left: 171px;
+}
+.mat-dialog-container {
+  max-width: none !important;
+}
+.sch {
+}
+.schlar {
+}
+.pointer {
+  cursor: pointer !important;
+  font-size: 11px;
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: 0.4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262f;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555;
+}
+
+.expansion-panel__content {
+  margin-left: 0% !important;
+}
+
+.button2 {
+  background-color: #008cba;
+}
+.ngx-picker--btn {
+  color: #000;
+  background-color: transparent;
+  border: none;
+  padding: 1em;
+  font-size: 1em;
+}
+.ngx-picker--btn__selected {
+  background-color: #eee;
+}
+.ngx-picker--btn:hover {
+  transition: 0.25s ease;
+  background-color: #eee;
+  cursor: pointer;
+}
+.ngx-picker--btn:focus {
+  outline-color: transparent;
+}
+
+.ngx-picker--btn__month:hover {
+  border-top-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__done:hover {
+  border-bottom-right-radius: 0.2em;
+}
+
+.ngx-picker--btn__now:hover {
+  border-bottom-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__next:hover {
+  border-top-right-radius: 0.2em;
+}
+
+.calendar {
+  position: absolute;
+  background-color: #e6e6e6;
+  max-width: 16em;
+  min-width: 16em;
+  font-size: 16px;
+  font-family: "Arial", sans-serif;
+  border-radius: 0.2em;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
+.calendar--previous-and-next {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.calendar--footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #e6e6e6;
+  padding: 0;
+  border-radius: 0.2em;
+}
+
+.calendar--years-select,
+.calendar--months-select {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 14.85em;
+  background-color: #fff;
+  width: 100%;
+}
+
+.calendar--year,
+.calendar--month {
+  display: block;
+  padding: 0.5em 1em;
+  width: 100%;
+  overflow: hidden;
+  color: #000;
+}
+.calendar--year__selected,
+.calendar--month__selected {
+  color: #000;
+  font-weight: bold;
+  background-color: #eee;
+}
+.calendar--year:hover,
+.calendar--month:hover {
+  cursor: pointer;
+  background-color: #eee;
+  font-weight: 400;
+  color: #000;
+}
+
+.calendar--days-of-week {
+  display: flex;
+  justify-content: space-around;
+  background-color: #eee;
+}
+
+.calendar--day-of-week {
+  position: relative;
+  padding: 0.5em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #000;
+  font-size: 0.9em;
+}
+
+.calendar--days-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.calendar--day {
+  text-align: center;
+  width: 1.285em;
+  padding: 0.5em;
+  font-weight: 500;
+  color: #000;
+}
+.calendar--day__muted {
+  color: #999;
+}
+.calendar--day__selected {
+  background-color: #eee;
+  color: #000;
+}
+.calendar--day:hover {
+  cursor: pointer;
+  color: #000;
+  background-color: #eee;
+}
+
+.ngx-picker {
+  display: flex;
+  position: relative;
+}
+.ngx-picker .calendar {
+  position: absolute;
+  left: 0;
+  top: 2.5em;
+  z-index: 3;
+}
+
+.time-picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #e6e6e6;
+}
+
+.time--values {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #eee;
+}
+
+.time--value {
+  width: 2.66em;
+  font-size: 1em;
+  padding: 0.5em 0;
+  text-align: center;
+  color: #000;
+}
+.time--value__selected {
+  color: #000;
+  background-color: #e6e6e6;
+}
+.time--value:hover {
+  transition: 0.25s ease;
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+[hidden] {
+  display: none !important;
+}
+#c11 {
+  width: 25%;
+  float: left;
+}
+#c22 {
+  width: 25%;
+  float: left;
+}
+#c33 {
+  width: 25%;
+  float: left;
+}
+#c44 {
+  width: 25%;
+  float: left;
+}
+#c111 {
+  width: 50%;
+  float: left;
+}
+#c222 {
+  width: 45%;
+  float: left;
+}
+#c333 {
+  width: 5%;
+  float: left;
+}
+/* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: "";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: "";
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.example-full-width {
+  width: 30%;
+}
+#c11 {
+  width: 25%;
+  float: left;
+}
+#c22 {
+  width: 25%;
+  float: left;
+}
+#c33 {
+  width: 25%;
+  float: left;
+}
+#c44 {
+  width: 25%;
+  float: left;
+}
+.example-full-width[_ngcontent-c4] {
+  width: 86% !important;
+}
+/* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: "";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: "";
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+/*  .example-full-width[_ngcontent-c9] {
+    width: 79% !important;
+  } */
+.left-sidebar,
+.right-sidebar {
+  width: 330px;
+  max-width: 330px;
+  min-width: 330px;
+}
+.outer-wrapper {
+  padding: 30px;
+}
+.center-content {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 3px;
+  padding: 15px;
+}
+
+/deep/ .mat-menu-panel.test {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a {
+    display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+  }
+}
+
+/deep/ .mat-menu-panel.test_1 {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+  margin-top: 48px;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/device-speed-report/device-speed-report.component.spec.ts b/src/app/report/report component/device-speed-report/device-speed-report.component.spec.ts
new file mode 100644
index 0000000..05990ca
--- /dev/null
+++ b/src/app/report/report component/device-speed-report/device-speed-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceSpeedReportComponent } from './device-speed-report.component';
+
+describe('DeviceSpeedReportComponent', () => {
+  let component: DeviceSpeedReportComponent;
+  let fixture: ComponentFixture<DeviceSpeedReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeviceSpeedReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeviceSpeedReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/device-speed-report/device-speed-report.component.ts b/src/app/report/report component/device-speed-report/device-speed-report.component.ts
new file mode 100644
index 0000000..62c6628
--- /dev/null
+++ b/src/app/report/report component/device-speed-report/device-speed-report.component.ts	
@@ -0,0 +1,472 @@
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Params, Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
+import { ReportService } from '../../report.service';
+import { generate } from 'rxjs/observable/generate';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-device-speed-report',
+  templateUrl: './device-speed-report.component.html',
+  styleUrls: ['./device-speed-report.component.scss'],
+  providers: [ContactService]
+
+})
+export class DeviceSpeedReportComponent implements OnInit {
+  // date1: Date = new Date();
+  date1
+  data_descip:any
+  option: any;
+  vehicale:any
+  neww: any;
+  Load: Boolean = false;
+
+  creategraph() {
+
+    // console.log('deviceObj=>',this.dataSelect[0].did);
+
+    let r = new Date(this.date1).toISOString();
+    // console.log(r);
+    this.Load = true;
+    if(this.vehicale){
+      this.contactService.getSpeedreport(this.vehicale, r).subscribe(
+  
+        data => {
+          this.Load = false;
+          this.device_data = data
+          //console.log(this.device_data); 
+          this.lineChartLabels.length = this.device_data.length;
+          this.getdata(this.device_data)
+  
+        },err=>{
+             this.Load = false;
+        });
+    }else{
+       this.Load = false;
+       this.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+    }
+
+  }
+
+  before: any;
+
+  // logout() {
+  //   window.localStorage.clear();
+  //   this.router.navigateByUrl("login");
+  // }
+  // devi() {
+  //   this.router.navigateByUrl("dashboard");
+
+  // }
+  // soon() {
+  //   this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  // }
+
+  // geofancingReport() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/geofancing");
+  // }
+
+  // addcus() {
+  //   this.router.navigateByUrl("add");
+  // }
+  // geo() {
+  //   this.router.navigateByUrl("geofencing");
+
+  // }
+
+  // Ddetail() {
+  //   this.router.navigateByUrl("driverdetail");
+  // }
+  // DModel() {
+  //   this.router.navigateByUrl("deviceModel");
+  // }
+  // VType() {
+  //   this.router.navigateByUrl("VehicleType");
+  // }
+
+
+  // openNav() {
+  //   /*  document.getElementById("myNav").style.width = "100%";
+  //   */
+  //   this.router.navigateByUrl("location");
+
+  // }
+  // ign() {
+  //   this.router.navigateByUrl("device-report/ign-report");
+
+  // }
+
+  // vehicleRoute() {
+  //   this.router.navigateByUrl("vehicleRoute");
+
+  // }
+
+  // dealerInfo() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("dealerInfo");
+  // }
+
+  // notification() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("notifications");
+  // }
+
+  // overspeed() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/overspeed");
+
+  // }
+
+  // distance_report() {
+
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/distance_report");
+  // }
+
+
+  // stoppage_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/stoppage_report");
+
+  // }
+
+  // trip_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/trip_report");
+
+  // }
+
+
+  // alert_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/alert_report");
+  // }
+
+
+  new() {
+    this.router.navigateByUrl("new");
+
+  }
+  cond: Boolean = false;
+  point: any = 0;
+  // a() {
+  //   // console.log(this.point);
+  //   if (this.point == 0) {
+  //     this.cond = true;
+  //     this.point++;
+  //   }
+  //   else if (this.point % 2 == 0) {
+  //     this.cond = true;
+  //     this.point++;
+  //   }
+  //   else {
+  //     this.cond = false
+  //     this.point++;
+  //   }
+
+
+  // }
+  // report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report");
+
+  // }
+  // driverPerformance() {
+  //   this.cond = false;
+  //   this.router.navigateByUrl("device-report/Driver-performance");
+  // }
+
+
+  // summaryReport() {
+   
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/summary-report");
+  // }
+
+  // ignition_report() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/ignition_report");
+
+
+  // }
+
+
+
+
+
+  // report_map() {
+  //   this.router.navigateByUrl("routeMapping");
+
+  // }
+
+  // routeViolation() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/routeViolation");
+
+  // }
+  // group() {
+  //   this.cond = false
+  //   this.router.navigateByUrl("group_view");
+  // }
+
+  // report_speed() {
+  //   // console.log("report speed call")
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/device-speed-report");
+  // }
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+  _lineChartData: any;
+  public info: string;
+  public prevDatasets;
+
+  options = [];
+
+  // ideal() {
+  //   this.router.navigateByUrl("device-report/ideal-report");
+  // }
+
+  getdata(final) {
+    let fi = [];
+    let time = [];
+    this.lineChartLabels.length = 0;
+    for (let q = final.length - 1; q > 0; q--) {
+      fi.push(final[q].speed);
+      let t = new Date(final[q].time).toLocaleTimeString();
+      // console.log(t);
+      //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+      this.lineChartLabels.push(t)
+    }
+    this.Load = false;
+    this.lineChartData = [{
+      label: "Speed",
+      data: fi
+    }];
+
+  }
+
+
+
+
+  // lineChart
+  public lineChartData: Array<any> = [
+    { data: [0, 0, 0, 0, 0, 0, 0], label: 'Speed' },
+  ];
+
+  public lineChartLabels: Array<any> = ['', '', '', '', '', '', ''];
+  public lineChartOptions: any = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        ticks: {
+          beginAtZero: false,
+          max: 6000,
+          min: 0
+        }
+      }]
+    }
+
+  };
+  public lineChartColors: Array<any> = [
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    },
+    { // dark grey
+      backgroundColor: 'rgba(77,83,96,0.2)',
+      borderColor: 'rgba(77,83,96,1)',
+      pointBackgroundColor: 'rgba(77,83,96,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(77,83,96,1)'
+    },
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    }
+  ];
+  public lineChartLegend: boolean = true;
+  public lineChartType: string = 'line';
+
+
+
+  // events
+  public chartClicked(e: any): void {
+    // console.log(e);
+  }
+
+  public chartHovered(e: any): void {
+    // console.log(e);
+  }
+  // myaccount() {
+
+  //   this.cond = false
+  //   this.router.navigateByUrl("accountSettings");
+   
+  // }
+private finalise = new Subject<void>();
+  constructor(private contactService: ContactService, private router: Router, public dialog: MdDialog,private _service:ReportService) {
+      this._service.invokeEventForSpeedVariationReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe((value:any)=>{
+        console.log(value);
+        this.vehicale=value.deviceArr[0];
+        this.date1=value.toDate;
+        this.creategraph()
+        
+      })
+   }
+
+    ngOnDestroy(){
+   
+    this.finalise.next(void 0);
+  }
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  time: any;
+
+  device_data: any;
+  devicess: any;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  logoutbut: boolean;
+  dealer: boolean;
+  logo: any;
+  text: any;
+  devicesss: any;
+  finall: any;
+  mb: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.getdev();
+
+
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.time = new Date();
+
+    this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for (let i = 0; i < this.devicesss.devices.length; i++) {
+
+          // if (this.devicesss.devices[i].type_of_device == "Tracker") {
+            /*      let a ={
+                   dname : this.devicess.devices[i].Device_Name,
+                   did:this.devicess.devices[i].Device_ID,
+                   id:this.devicess.devices[i]._id,
+                   user:this.devicess.devices[i].user
+                 }
+                 this.options.push(a); */
+            let a = {
+              value: this.devicesss.devices[i].Device_Name,
+              viewValue: this.devicesss.devices[i].Device_Name,
+              did: this.devicesss.devices[i].Device_ID,
+              id: this.devicesss.devices[i]._id,
+              user: this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          }
+
+        // }
+
+
+
+      });
+
+    /* 
+        this.contactService.getSpeedreport("087074133830").subscribe(
+          
+          data => {
+            this.Load = false;
+            this.device_data = data 
+           console.log(this.device_data); 
+           this.lineChartLabels.length = this.device_data.length;  
+           this.getdata(this.device_data)
+      
+          }); */
+
+
+  }
+  dataSelect = [];
+  filterStates(val) {
+
+    // console.log(val)
+    // console.log(this.options)
+
+    if (val) {
+      const filterValue: any = val
+      this.dataSelect = this.options.filter(function (d) {
+
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+
+  }
+
+
+
+}
diff --git a/src/app/report/report component/disatance-report/details/details.component.html b/src/app/report/report component/disatance-report/details/details.component.html
new file mode 100644
index 0000000..41f2250
--- /dev/null
+++ b/src/app/report/report component/disatance-report/details/details.component.html	
@@ -0,0 +1,92 @@
+<!-- <div class="container">
+  <h2>Details</h2>
+  
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Device Name</th>
+        <th>Date</th>
+        <th>Distance</th>
+        <th>Start Location</th>
+        <th>End Location</th>
+
+
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let item of tableData">
+        <td>{{item.device.Device_Name}}</td>
+        <td>{{item.date}}</td>
+        <td>{{item.distance}}</td>
+        <td>{{item.startLat}}</td>
+        <td>{{item.endLat}}</td>
+
+
+        </tr>
+        </tbody>
+        </table> -->
+
+
+
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class=modal-header style="margin-bottom: 6px;">
+          <h4>Details</h4>
+          <div class="text-right">
+          <button  class="mat-raised-button" md-raised-button=""
+            style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
+              width: 110px;" (click)="exportExcels()"><span class="mat-button-wrapper">Export To
+              Excel</span>
+            <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+              ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+            <div class="mat-button-focus-overlay"></div>
+          </button>
+        <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
+                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i class="fa fa-times" aria-hidden="true"></i>
+</span>
+          <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+            ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+          <div class="mat-button-focus-overlay"></div>
+        </button>
+        </div>
+        </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+
+
+                  <!-- <button class="btn btn-default" (click)="exportExcel()">Export</button> -->
+                  <!-- <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+                    style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+                    | translate}} >></button>
+                  <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+                    style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+                    << {{'Previous' | translate}}</button> -->
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12 col-md-12 col-lg-12">
+                  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+                  <div style="width: 100%;height:70vh;">
+                    <table id="detailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                      <thead style="background-color:#e0e0e0;color: #444444;">
+                        <tr>
+                          <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                            <th style="text-align: left;">{{'Date' | translate}}</th>
+                          <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                          <th style="text-align: left;">{{'End Location' | translate}}</th>
+                          <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                          <!-- <th style="text-align: left;">{{'Action' | translate}}</th> -->
+        
+                        </tr>
+                      </thead>
+                    </table>
+                  </div>
+                </div>
+              </div>
+        
+            </div>
+        
+          </div>
+        </div>
+       
\ No newline at end of file
diff --git a/src/app/report/report component/disatance-report/details/details.component.scss b/src/app/report/report component/disatance-report/details/details.component.scss
new file mode 100644
index 0000000..a1ce51f
--- /dev/null
+++ b/src/app/report/report component/disatance-report/details/details.component.scss	
@@ -0,0 +1,3 @@
+.mat-dialog-container {
+  overflow: hidden !important;
+}
diff --git a/src/app/report/report component/disatance-report/details/details.component.spec.ts b/src/app/report/report component/disatance-report/details/details.component.spec.ts
new file mode 100644
index 0000000..35a2470
--- /dev/null
+++ b/src/app/report/report component/disatance-report/details/details.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DetailsComponent } from './details.component';
+
+describe('DetailsComponent', () => {
+  let component: DetailsComponent;
+  let fixture: ComponentFixture<DetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/disatance-report/details/details.component.ts b/src/app/report/report component/disatance-report/details/details.component.ts
new file mode 100644
index 0000000..5f9cb84
--- /dev/null
+++ b/src/app/report/report component/disatance-report/details/details.component.ts	
@@ -0,0 +1,781 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../../contact.service';
+declare var $: any;
+declare var moment: any;
+declare var google: any;
+
+@Component({
+  selector: 'app-details',
+  templateUrl: './details.component.html',
+  styleUrls: ['./details.component.scss']
+})
+export class DetailComponent implements OnInit {
+  fs: any;
+
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  time: any;
+  device_data: any;
+  devicess: any;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  Load: Boolean = false;
+  date: any;
+  devicesss: any;
+  mb: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  text: any;
+  option: any;
+  finall: any;
+  Fromdate: any;
+  todate: any;
+  options = [];
+  logo: any;
+  before: any;
+  date1: any;
+  daily_report_data: any;
+  superAdmin: Boolean = false;
+  uId: any;
+  d_name: any;
+  d_report: any;
+  total_dist: any;
+  total_km: any;
+  start_add_lat: any;
+  start_add_long: any;
+  end_add_lat: any;
+  end_add_long: any;
+  device_summary = [];
+  address_show: any;
+  fromDate: any;
+  toDate: any;
+  firstcall: boolean = true;
+  lastcall: boolean = true;
+  skip: number = 0;
+  end_add_show: any;
+  identifier: any = 'distance_report';
+  mainData: any
+  tableData: any
+  deviceArr: any[];
+  reportArr: any[];
+  constructor(public dialogRef: MdDialogRef<DetailComponent>, private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+    console.log('data=>', data, data.from_date, data.to_date);
+    this.mainData = data
+    console.log(this.mainData);
+    //  toDATE.setDate(toDATE.getDate()+1)
+    //  var fromDate=new Date(data.from_date)
+    //  var date:any=new Date(fromDate.setDate(fromDate.getDate()+1)).toISOString()
+    //  console.log(date);
+    this.fromDate = data.from_date;
+    this.toDate = data.to_date
+  }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    //  setTimeout(function(){ alert("Hello"); }, 3000);
+    this.testTable2(this.mainData)
+  }
+  tabelObj: any;
+  testTable() {
+    const that = this;
+    console.log("inside function");
+
+    //  that.Load = true;
+    //     var from_date =this.mainData.from_date;
+    //     var to_date = that.mainData.to_date;
+    //     var user = that.useridd;
+    //     var temp = {
+    //     from_date : from_date,
+    //     to_date : to_date,
+    //     user : user,
+    //     device:this.mainData._id
+    //     }
+    //     console.log('temp',temp);
+
+    // // '&user=' + "5fdb427d38956a5d79ffb09b" + '&skip='+that.skip + '&limit='+ limit+'&device='+"5fdb54cb8939f65e6cc02527";
+    //     var suburl = "";
+    //     var limit = 26;
+    //     suburl += "/summary/distanceNew?from=" + temp.from_date +'&to=' + temp.to_date + 
+    //     '&user=' + user + '&skip='+that.skip + '&limit='+ limit+'&device='+temp.device;
+    //  that.contactService.getDetails(suburl).subscribe(resp => {   
+    //         that.Load = false;  
+    //         console.log("TTTTT",resp);
+    //         this.tableData=resp;
+
+    //  }, err => {   
+    //       that.Load= false;    
+    //       // callback({ data: [] });
+    //       console.log("error",err) ;     
+    //     });
+
+
+  }
+
+  testTable2(data1) {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#detailsTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //   'copy',
+        //   'print',
+        //   'excel'
+        // ],       
+        "processing": false,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        responsive: true,
+        "scrollY": '60vh',
+        "scrollCollapse": true,
+
+        // "deferLoading": 25 ,  
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "rowCallback": function (row: Node, data: any | Object, index: number) {
+
+          $('#edit', row).bind('click', () => {
+            var internalThat = that;
+            console.log('rowrowrowrow=>', row);
+            console.log('datadatadatadata', data);
+
+
+
+            // dialogRef.afterClosed().subscribe(result => {
+            //   console.log("result",result);
+            //   that.ngOnInit();
+
+            //     if(result=="done"){
+            //       console.log("resultdone",result)
+            //       that.tost1("update");
+            //       window.localStorage['DataUpdate'] = 'True';
+            //       that.sidebar.sidebarData();       
+            //     }
+            // });              
+          });
+
+          $('#refresh', row).bind('click', () => {
+            var internalThat = that;
+            console.log('rowrowrowrow=>', row);
+            console.log('datadatadatadata', data);
+
+            let geocoder = new google.maps.Geocoder();
+            let t_latlng
+            var d_lat;
+            var d_lng;
+            console.log();
+
+            if (typeof (data.startAddress) == 'object') {
+              t_latlng = new google.maps.LatLng(data.startLat, data.startLng);
+              d_lat = data.startLat;
+              d_lng = data.startLng
+            } else {
+              t_latlng = new google.maps.LatLng(data.endLat, data.endLng);
+              d_lat = data.endLat;
+              d_lng = data.endLng
+            }
+
+            let request = {
+              latLng: t_latlng
+            };
+            geocoder.geocode(request, function (data, status) {
+              if (status == google.maps.GeocoderStatus.OK) {
+                if (data[0] != null) {
+                  var liveAdd = data[0].formatted_address;
+                  // //console.log(outerThis.liveAdd);
+                  that.saveAddress(d_lat, d_lng, liveAdd)
+                }
+              }
+              else {
+
+                // that.liveAdd = 'NA';
+
+
+              }
+
+            })
+          })
+          // else{
+
+          //   outerThis.liveAdd = res.address;
+          // }
+          // console.log("ADDRESS---->",outerThis.liveAdd);
+
+          // })
+
+
+
+          // });
+
+
+
+        },
+        ajax: (mainData, callback) => {
+
+          //   var deviceID;
+
+          //   that.Load = true;
+          //   console.log("ddddddd",data1);
+          // // var fromDate=new Date(data1.from_date)
+          // // var date:any=new Date(fromDate.setDate(fromDate.getDate()+1)).toISOString()
+          // // console.log(date);
+          //   // var date=data1.from_date
+          // var user = that.useridd;
+          // var temp = {
+          // from_date :data1.from_date,
+          // to_date :data1.to_date,
+          // user : user,
+          // device:data1._id
+          // }
+          // console.log('temp',temp);
+
+
+          // var suburl = "";
+          // var limit = 26;
+          // suburl += "/summary/distanceNew?from=" + temp.from_date +'&to=' + temp.to_date + 
+          // '&user=' + temp.user + '&skip='+that.skip + '&limit='+ limit+'&device='+temp.device;
+
+          // that.contactService.getDetails(suburl).subscribe(resp => {   
+          //     that.Load = false;  
+          //     that.reportArr = [];
+          //     that.reportArr= resp ; 
+          //     //  if (that.reportArr.length != 0) {
+          //     //   resp.forEach(element => {
+          //     //     console.log(element);
+          //     //     element.date=that.convertDate(element.date)
+
+
+          //     //   });
+          //     //  }
+
+          if (that.mainData.length != 0) {
+            var j = 0;
+            var finalArr = [];
+            for (var i = 0; i < that.mainData.length; i++) {
+
+              that.clocation_1(that.mainData[i], function (err, succ) {
+                if (err) {
+                  console.log(err);
+                  j++;
+                } else {
+                  finalArr.push(succ);
+                  console.log(finalArr);
+                  j++;
+                  if (j === that.mainData.length) {
+                    that.Load = false;
+                    that.reportArr = finalArr
+                    callback({ data: finalArr });
+                  }
+                }
+              })
+
+
+            }
+          } else {
+            that.Load = false;
+            that.firstcall = true;
+            that.lastcall = (that.skip > 0) ? false : true;
+            callback({ data: [] });
+
+          }
+          // }, err => {   
+          //   that.Load= false;    
+          //   callback({ data: [] });
+          //   console.log("error",err) ;     
+          // });
+        },
+
+        "columns": [
+          {
+            "data": "VRN",
+            "render": function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "Date",
+            render: function (data, type, row) {
+
+              // convertDate(element.date)
+
+              return data ? that.convertDate(data) : 0;
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "",
+            render: function (data, type, row) {
+
+              var aiden = typeof (data);
+              if (aiden == 'object') {
+                // var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                return `<button class="btn btn=info btn-sm"><i id="refresh" title="Refresh Address" style="font-size:20px;color: green" class="fas fa-redo"></i></button>`
+              } else {
+                return data ? data : '--';
+              }
+
+
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var biden = typeof data;
+              if (biden === 'object') {
+                // var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                return `<button class="btn btn=info btn-sm"><i id="refresh" title="Refresh Address" style="font-size:20px;color: green" class="fas fa-redo"></i></button>`
+              } else {
+                return data ? data : '--';
+              }
+
+            }
+          },
+          {
+            "data": "Distance(Kms)",
+            render: function (data, type, row) {
+
+              return data ? data.toFixed(2) : 0;
+            }
+          },
+          //      {
+          //       "data":null,
+          //       "defaultContent": "",
+          //       "render":function(data,type,row){   
+          //         return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+          //   }
+          // }
+          // <i class="fas fa-info-circle"></i>
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3, 4] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+          { "width": "10px", "targets": 4 },
+
+          //       {
+          //     targets: -1, //-1 es la ultima columna y 0 la primera
+          //     data: null,
+          //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+          // },
+        ], order: [[3, 'desc'], [0, 'asc']]
+      });
+
+    });
+
+  }
+
+  convertDate(inputFormat) {
+    function pad(s) { return (s < 10) ? '0' + s : s; }
+    var d = new Date(inputFormat)
+    return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('/')
+  }
+
+
+  // clocation_1(latlngObj, cb) {
+  //   var outerThis = this;
+  //   var la = '';
+
+  //   let latLng = {
+  //     lat: "0",
+  //     long: "0"
+  //   };
+
+  //   latLng = {
+  //     lat: latlngObj.start_location ? latlngObj.start_location.lat ? latlngObj.start_location.lat : 0 : 0,
+  //     long: latlngObj.start_location ? latlngObj.start_location.long ? latlngObj.start_location.long : 0 : 0
+  //   }
+
+  //   outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+  //     if (res.message == "Address not found in databse") {
+  //       var adata = {
+  //         iden: 'noaddress',
+  //         latlng: latLng
+  //       }
+  //       latlngObj['startAddress'] = 'N/A';
+  //       cb(null, latlngObj);
+  //       var latLng_1 = {
+  //         lat: "0",
+  //         long: "0"
+  //       };
+
+  //       latLng_1 = {
+  //         lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat : 0 : 0,
+  //         long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long : 0 : 0
+  //       }
+
+
+  //       outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+  //         if (res.message == "Address not found in databse") {
+  //           var bdata = {
+  //             iden: 'noaddress',
+  //             latlng: latLng_1
+  //           }
+
+  //           latlngObj['endAddress'] = 'N/A';
+  //           cb(null, latlngObj);
+
+
+  //         } else {
+  //           latlngObj['endAddress'] = res.address;
+  //           cb(null, latlngObj);
+  //         }
+
+  //       })
+
+  //     } else {
+  //       latlngObj['startAddress'] = res.address;
+  //       var latLng_1 = {
+  //         lat: "0",
+  //         long: "0"
+  //       };
+
+  //       latLng_1 = {
+  //         lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat : 0 : 0,
+  //         long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long : 0 : 0
+  //       }
+
+
+
+
+  //       outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+  //         if (res.message == "Address not found in databse") {
+  //           var cdata = {
+  //             iden: 'noaddress',
+  //             latlng: latLng_1
+  //           }
+
+  //           latlngObj['endAddress'] = 'N/A';
+  //           cb(null, latlngObj);
+
+
+  //         } else {
+  //           latlngObj['endAddress'] = res.address;
+  //           cb(null, latlngObj);
+  //         }
+
+  //       })
+
+  //       // cb(null,latlngObj);
+  //     }
+  //   })
+
+  // }
+
+  clocation_1(latlngObj, cb) {
+
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+
+    latLng = {
+      lat: latlngObj.start_location ? latlngObj.start_location.lat ? latlngObj.start_location.lat : 0 : 0,
+      long: latlngObj.start_location ? latlngObj.start_location.long ? latlngObj.start_location.long : 0 : 0
+ 
+    }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden: 'noaddress',
+          latlng: latLng
+        }
+        latlngObj['startAddress'] = 'N/A';
+        cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+                   lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat : 0 : 0,
+          long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long : 0 : 0
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['endAddress'] = 'N/A';
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        },err=>{
+          latlngObj['endAddress'] = 'N/A';
+          cb(null, latlngObj);
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+                 lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat : 0 : 0,
+          long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long : 0 : 0
+        }
+
+
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['endAddress'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        },err=>{
+          latlngObj['endAddress'] = 'N/A';
+          cb(null, latlngObj);
+        })
+
+        // cb(null,latlngObj);
+      }
+    },err=>{
+      latlngObj['startAddress'] = 'N/A';
+      cb(null, latlngObj);
+    })
+
+  }
+
+  data_descip: any;
+  getReport(event) {
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      console.log('this.deviceArr', this.deviceArr);
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+
+      var diff = moment(this.todate).diff(this.Fromdate, 'days')
+      console.log('difference :' + diff)
+      if (diff >= 31) {
+        this.data_descip = 'Report is unavailable for more than a month';
+        launch_toast();
+
+      } else {
+        this.skip = 0;
+        this.firstcall = false;
+        this.lastcall = true;
+        this.tabelObj.ajax.reload();
+      }
+
+
+
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+
+
+
+  }
+
+  tab: any;
+  exportExcel() {
+    console.log("Export");
+
+
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#detailsTable').clone();
+
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+  next() {
+    // this.deviceData =[];
+    this.lastcall = false;
+    this.skip += 1;
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.tabelObj.ajax.reload();
+  }
+  pre() {
+    // this.deviceData=[]
+    // console.log(this.skip)
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.lastcall = false;
+      // this.sidebarData();
+      // this.ngOnInit();
+      this.tabelObj.ajax.reload();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+  saveAddress(lat, lng, address) {
+    var addressObj = {
+      "lat": lat,
+      "long": lng,
+      "address": address
+    }
+    this.contactService.saveAdd(addressObj).subscribe(res => {
+      console.log(res);
+      // this.testTable2(this.mainData)
+      this.tabelObj.ajax.reload();
+    }, err => {
+      //console.log("couldn't save address");
+    })
+
+  }
+
+
+
+  // --------------------New Method for excel export-------------------
+  exportExcels() {
+    // for (var i = 0; i < this.reportArr.length; i++) {
+    //   this.reportArr[i].deviceName = this.reportArr[i].device.Device_Name;
+    // }
+
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Distance Report Details') {
+    console.log(data);
+
+    let arrHeader = ["VRN", "Date", "startAddress", "endAddress", "Distance(Kms)"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Distance Report Details.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+    // Running	2:1
+    // Idle	1:56
+    // Stop
+
+    let str = 'Distance Report  \r\n' + " \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders = ["Device Name", "Date ", "Start Location", "End Location", "Total K.M"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if (i < array.length) { }
+      for (let index in headerList) {
+        let head = headerList[index];
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if (typeof data == "string") {
+      console.log(data);
+
+      let newData = data.replace(/,/g, " ");
+      console.log(newData);
+
+      return newData;
+    }
+    else if (typeof data == "undefined") {
+      return "-";
+    }
+    else if (typeof data == "number") {
+      return data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+
+}
diff --git a/src/app/report/report component/disatance-report/disatance-report.component.html b/src/app/report/report component/disatance-report/disatance-report.component.html
new file mode 100644
index 0000000..ed21937
--- /dev/null
+++ b/src/app/report/report component/disatance-report/disatance-report.component.html	
@@ -0,0 +1,68 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Distance Report' | translate}}</h4>
+    </div>
+  </div>
+ 
+  <div class="row rowStyle">
+   
+<div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+        <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+                style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+                | translate}} >></button>
+              <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+                style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+                << {{'Previous' | translate}}</button>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div class="loading" *ngIf="Load">Loading&#8230;</div>
+              <div style="width: 100%;height:84vh;">
+                <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                  <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                      <th style="text-align: left;">{{'From Date' | translate}}</th>
+                      <th style="text-align: left;">{{'To Date' | translate}}</th>
+                      <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                      <th style="text-align: left;">{{'End Location' | translate}}</th>
+                      <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                      <th style="text-align: left;">{{'Details' | translate}}</th>
+
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+      border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{Fromdate | date:"medium"}} to {{todate | date:"medium"}}
+    </td>
+    <!-- <td>
+      <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+    </td> -->
+  </tr>
+
+</table>
diff --git a/src/app/report/report component/disatance-report/disatance-report.component.scss b/src/app/report/report component/disatance-report/disatance-report.component.scss
new file mode 100644
index 0000000..5cd7ed5
--- /dev/null
+++ b/src/app/report/report component/disatance-report/disatance-report.component.scss	
@@ -0,0 +1,49 @@
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/disatance-report/disatance-report.component.spec.ts b/src/app/report/report component/disatance-report/disatance-report.component.spec.ts
new file mode 100644
index 0000000..a643ad2
--- /dev/null
+++ b/src/app/report/report component/disatance-report/disatance-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DisatanceReportComponent } from './disatance-report.component';
+
+describe('DisatanceReportComponent', () => {
+  let component: DisatanceReportComponent;
+  let fixture: ComponentFixture<DisatanceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DisatanceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DisatanceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/disatance-report/disatance-report.component.ts b/src/app/report/report component/disatance-report/disatance-report.component.ts
new file mode 100644
index 0000000..099888e
--- /dev/null
+++ b/src/app/report/report component/disatance-report/disatance-report.component.ts	
@@ -0,0 +1,950 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params, Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { DetailComponent } from './details/details.component';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+// declare function show
+declare var google: any;
+declare var jsPDF: any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var moment: any;
+@Component({
+  selector: 'app-disatance-report',
+  templateUrl: './disatance-report.component.html',
+  styleUrls: ['./disatance-report.component.scss']
+})
+export class DisatanceReportComponent implements OnInit {
+  finalArr = []
+  dataSelect: any[];
+  closeProcess: number;
+  deviceArr: any = [];
+  reportArr: any = [];
+  firstcall: boolean = true;
+  lastcall: boolean = true;
+  skip: number = 0;
+  tabelObj: any;
+  devices: any;
+  value
+  distanceVariation
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService, private _service: ReportService, private router: Router, public dialog: MdDialog, private _flashMessagesService: FlashMessagesService) {
+    this._service.invokeEventForDistance.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+      if (value) {
+        this.value = value
+        this.getReport(value);
+      }
+      console.log(value);
+      this.devices = JSON.parse(localStorage.getItem('vehicaleData'))
+      console.log(this.devices);
+
+
+    })
+
+  }
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  time: any;
+  device_data: any;
+  devicess: any;
+  final: any;
+  custtype: any;
+  cust: boolean = false;
+  Load: Boolean = false;
+  date: any;
+  devicesss: any;
+  mb: any;
+  logoutbut: boolean;
+  dealer: boolean;
+  text: any;
+  option: any;
+  finall: any;
+  Fromdate: any;
+  todate: any;
+  options = [];
+  logo: any;
+  before: any;
+  date1: any;
+  daily_report_data: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    //  show()
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+
+
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+
+
+    this.testTable();
+
+  }
+
+
+
+  uId: any;
+  d_name: any;
+  d_report: any;
+  total_dist: any;
+  total_km: any;
+  start_add_lat: any;
+  start_add_long: any;
+  end_add_lat: any;
+  end_add_long: any;
+  device_summary = [];
+  address_show: any;
+
+  end_add_show: any;
+  identifier: any = 'distance_report';
+
+
+  data_descip: any;
+  TODATE
+  FROMDATE
+  tpdata
+  getReport(event) {
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if (event == 'getPdf') {
+      this.expotToPdf();
+    } else {
+      var deviceId: any;
+      this.tpdata = event;
+      var that = this;
+      var fd = new Date(this.tpdata.fromDate);
+      var td = new Date(this.tpdata.toDate);
+      var toDATE = new Date(this.tpdata.fromDate);
+      this.TODATE = moment(this.tpdata.toDate).format('LL')
+      this.FROMDATE = moment(this.tpdata.fromDate).format('LL')
+      var date: any = toDATE.setDate(toDATE.getDate() + 1)
+      // this.FROMDATE=new Date(date).toISOString().replace(/T.*/,'').split('-').reverse().join('-')
+      // this.TODATE=td.toISOString().replace(/T.*/,'').split('-').reverse().join('-')
+      console.log("FROM", this.FROMDATE, "==", this.TODATE);
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      console.log('this.deviceArr', this.deviceArr);
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+
+      var diff = moment(this.todate).diff(this.Fromdate, 'days')
+      if (diff >= 31) {
+
+        this.data_descip = 'Report is unavailable for more than a month';
+        launch_toast();
+
+      } else if (diff >= 15 && this.deviceArr.length >= 10) {
+        // if(this.deviceArr.length>=10){
+
+        this.data_descip = 'Please select less than 10 vehicals';
+        launch_toast();
+        // }
+      } else {
+        this.skip = 0;
+        this.firstcall = false;
+        this.lastcall = true;
+        this.tabelObj.ajax.reload();
+      }
+    }
+
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+
+  }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //   'copy',
+        //   'print',
+        //   'excel'
+        // ],       
+        "processing": false,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        responsive: true,
+        "scrollY": '60vh',
+        "scrollCollapse": true,
+
+        // "deferLoading": 25 ,  
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "rowCallback": function (row: Node, data: any | Object, index: number) {
+
+          $('#edit', row).bind('click', () => {
+            var internalThat = that;
+            // console.log('rowrowrowrow=>',row);
+            // console.log('datadatadatadata',data);
+            //   var fromDate=new Date(that.Fromdate)
+            // var date=new Date(fromDate.setDate(fromDate.getDate()+1)).toISOString() 
+
+            let dialogRef = that.dialog.open(DetailComponent, {
+              // width: '950px',
+              // height: '1160px',  
+              data: data.details
+
+            });
+          });
+
+          $('#refresh', row).bind('click', () => {
+            var internalThat = that;
+            console.log('rowrowrowrow=>', row);
+            console.log('datadatadatadata', data);
+
+            let geocoder = new google.maps.Geocoder();
+            let t_latlng
+            var d_lat;
+            var d_lng;
+            console.log();
+
+            if (typeof (data.startAddress) == 'object') {
+              t_latlng = new google.maps.LatLng(data.startLat, data.startLng);
+              d_lat = data.startLat;
+              d_lng = data.startLng
+            } else {
+              t_latlng = new google.maps.LatLng(data.endLat, data.endLng);
+              d_lat = data.endLat;
+              d_lng = data.endLng
+            }
+
+            let request = {
+              latLng: t_latlng
+            };
+            geocoder.geocode(request, function (data, status) {
+              if (status == google.maps.GeocoderStatus.OK) {
+                if (data[0] != null) {
+                  var liveAdd = data[0].formatted_address;
+                  // //console.log(outerThis.liveAdd);
+                  that.saveAddress(d_lat, d_lng, liveAdd)
+                }
+              }
+              else {
+
+                // that.liveAdd = 'NA';
+
+
+              }
+
+            })
+          })
+          // else{
+
+          //   outerThis.liveAdd = res.address;
+          // }
+          // console.log("ADDRESS---->",outerThis.liveAdd);
+
+          // })
+
+
+
+          // });
+
+        },
+        ajax: (dataTablesParameters, callback) => {
+          console.log(that.Fromdate);
+          var date
+          var deviceID;
+          // if(that.Fromdate){
+          //   var fromDate=new Date(that.Fromdate)
+          //   date=new Date(fromDate.setDate(fromDate.getDate()+1)).toISOString()
+
+          // }
+          console.log(date);
+          that.Load = true;
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+
+          var suburl = "";
+          // var limit = 26;
+          suburl += "/summary/getDistanceNew?from=" + temp.from_date + '&to=' + temp.to_date + '&user=' + temp.user + '&skip=' + that.skip;
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }
+          if (that.deviceArr.length != 0 && temp.from_date && temp.to_date) {
+            that.contactService.get(suburl).subscribe((resp: any) => {
+              that.Load = false;
+              that.reportArr = [];
+              that.reportArr = resp;
+
+              if (that.reportArr.length != 0) {
+                var j = 0;
+                that.finalArr = [];
+                for (var i = 0; i < that.reportArr.length; i++) {
+                  if (that.reportArr[i].reportData){
+
+                    that.clocation_1(that.reportArr[i].reportData, function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        console.log(succ);
+                        that.finalArr.push(succ);
+                        console.log(that.finalArr);
+                        j++;
+                        if (j === that.reportArr.length) {
+                          that.Load = false;
+                          callback({ data: that.finalArr });
+                        }
+                      }
+                    })
+                  }else{
+                    that.Load = false;
+                    callback({ data: [] });
+                  }
+
+
+
+                }
+              } else {
+                that.Load = false;
+                that.firstcall = true;
+                that.lastcall = (that.skip > 0) ? false : true;
+                callback({ data: [] });
+
+              }
+            }, err => {
+              that.Load = false;
+              callback({ data: [] });
+              console.log("error", err);
+            });
+          } else {
+            that.Load = false;
+            that.data_descip = "Select vehicle";
+            var x = document.getElementById("toast")
+            x.className = "show";
+            setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+            callback({ data: [] });
+          }
+        },
+
+        "columns": [
+          {
+            "data": "VRN",
+            "render": function (data, type, row) {
+              return data ? data : '';
+            }
+          },
+          {
+            "data": "from_date",
+            "render": function (data, type, row) {
+              // let date=new Date(that.Fromdate).getDate()+"/"+new Date(that.Fromdate).getMonth()+"/"+new Date(that.Fromdate).getFullYear()                 
+              return that.FROMDATE;
+            }
+          },
+          {
+            "data": "to_date",
+            "render": function (data, type, row) {
+              // let date=new Date(that.todate).getDate()+"/"+new Date(that.todate).getMonth()+"/"+new Date(that.todate).getFullYear()                                   
+              return that.TODATE;
+            }
+          },
+          {
+            "data": "startAddress",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var address
+              var aiden = typeof (data);
+              if (aiden == 'object') {
+                // var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                return `<button class="btn btn=info btn-sm"><i id="refresh" title="Refresh Address" style="font-size:20px;color: green" class="fas fa-redo"></i></button>`;
+              } else {
+                return data ? data : '--';
+              }
+
+
+            }
+          },
+          {
+            "data": "endAddress",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              var address
+              var biden = typeof data;
+              if (biden === 'object') {
+                // var addressLink = '<a href="https://maps.google.com/?q='+ data.latlng.lat +','+data.latlng.long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>'; 
+                return `<button class="btn btn=info btn-sm"><i id="refresh" title="Refresh Address" style="font-size:20px;color: green" class="fas fa-redo"></i></button>`;
+              } else {
+                return data ? data : '--';
+              }
+
+            }
+          },
+          {
+            "data": "distance",
+            render: function (data, type, row) {
+
+              return data ? data.toFixed(2) : 0;
+            }
+          },
+          {
+            "data": null,
+            "defaultContent": "",
+            "render": function (data, type, row) {
+              return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'
+            }
+          }
+          // <i class="fas fa-info-circle"></i>
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3, 4, 5, 6] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },  
+          //           { "width": "10px", "targets": 3 },   
+
+          //       {
+          //     targets: -1, //-1 es la ultima columna y 0 la primera
+          //     data: null,
+          //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+          // },
+        ]
+      });
+
+    });
+
+  }
+  saveAddress(lat, lng, address) {
+    var addressObj = {
+      "lat": lat,
+      "long": lng,
+      "address": address
+    }
+    this.contactService.saveAdd(addressObj).subscribe(res => {
+      console.log(res);
+      this.getReport(this.value);
+    }, err => {
+      //console.log("couldn't save address");
+    })
+
+  }
+
+
+
+  tab: any;
+  exportExcel() {
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+
+
+
+  filterStates(val) {
+
+    // console.log(val)
+    // console.log(this.options)
+
+
+    if (val == "") {
+
+      this.dataSelect = [];
+      // console.log("deviceValue",this.dataSelect);
+    } else {
+
+      const filterValue: any = val;
+
+      this.dataSelect = this.options.filter(function (d) {
+        var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+        //  this.option = this.options[i];
+
+
+        return t > -1;
+      });
+
+      return this.dataSelect;
+
+    }
+
+
+  }
+
+  ngOnDestroy() {
+    this.closeProcess = 0;
+    this.finalise.next(void 0);
+  }
+
+
+  clocation_1(latlngObj, cb) {
+
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+
+    latLng = {
+      lat: latlngObj.start_location ? latlngObj.start_location.lat ? latlngObj.start_location.lat : 0:0,
+      long: latlngObj.start_location ? latlngObj.start_location.long ? latlngObj.start_location.long : 0:0
+    }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden: 'noaddress',
+          latlng: latLng
+        }
+        latlngObj['startAddress'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+          lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat : 0:0,
+          long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long : 0:0
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['endAddress'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        },err=>{
+          latlngObj['endAddress'] = 'N/A';
+          cb(null, latlngObj);
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+          lat: latlngObj.end_location ? latlngObj.end_location.lat ? latlngObj.end_location.lat :0: 0,
+          long: latlngObj.end_location ? latlngObj.end_location.long ? latlngObj.end_location.long :0: 0
+        }
+
+
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['endAddress'] = 'N/A';
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        },err=>{
+          latlngObj['endAddress'] = 'N/A';
+          cb(null, latlngObj);
+        })
+
+        // cb(null,latlngObj);
+      }
+    },err=>{
+      latlngObj['startAddress'] = 'N/A';
+      cb(null, latlngObj);
+    })
+
+  }
+
+
+  next() {
+    // this.deviceData =[];
+    this.lastcall = false;
+    this.skip += 1;
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.tabelObj.ajax.reload();
+  }
+  pre() {
+    // this.deviceData=[]
+    // console.log(this.skip)
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.lastcall = false;
+      // this.sidebarData();
+      // this.ngOnInit();
+      this.tabelObj.ajax.reload();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+  // --------------------New Method for excel export-------------------
+  exportExcels() {
+    for (var i = 0; i < this.reportArr.length; i++) {
+      this.reportArr[i].deviceName = this.reportArr[i].device.Device_Name;
+    }
+
+    this.downloadFile(this.reportArr);
+  }
+
+  downloadFile(data, filename = 'Distance Report') {
+
+    let arrHeader = ["deviceName", "startAddress", "endAddress", "distance"];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Distance Report.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    // console.log(array,"<===");Distance	126.94
+    // Running	2:1
+    // Idle	1:56
+    // Stop
+
+    let str = 'Distance Report \r\n' + "From =" + this.Fromdate + "   To=" + this.todate + " \r\n \r\n";
+    let row = 'S.No,';
+
+    let newHeaders = ["Device Name", "Start Location", "End Location", "Total K.M"];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if (i < array.length) { }
+      for (let index in headerList) {
+        let head = headerList[index];
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if (typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+      return newData;
+    }
+    else if (typeof data == "undefined") {
+      return "-";
+    }
+    else if (typeof data == "number") {
+      return data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  expotToPdf() {
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+
+  }
+  // downloadPdf() {
+  //     let fileName =
+  //       "Distance Report" +
+  //       new Date().getTime() +
+  //       PDF_EXTENSION;
+  //     var pdfsize = "a2";
+
+  //     var doc = new jsPDF("p", "pt", pdfsize);
+  //     var f_date = moment(this.Fromdate).format('lll'); 
+  //   var t_date =moment(this.todate).format('lll');
+  //   var date_combine = f_date + ' to ' + t_date;
+  //   // doc.setFontSize(30);
+  //   doc.setFontSize(15);
+  //   doc.text('Distance Report ', 20, 30);
+  //   // doc.text(date_combine, 250, 60);
+  //     doc.setFontStyle("arial");
+
+  //       var header = function(data) {
+  //     doc.setFontSize(15);
+  //     doc.setTextColor(40);
+  //     doc.setFontStyle('normal');
+  //     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+  //     // doc.text("Testing Report", data.settings.margin.left, 50);
+  //   };
+
+  //   var options = {
+  //     beforePageContent: header,
+  //     margin: {
+  //       top: 120
+  //     },
+  //     startY: doc.autoTableEndPosY() + 20
+  //   };
+
+  //     doc.autoTable({
+  //       head: this.headRows(),
+  //       // margin: { top: 80 },
+  //       body: this.bodyRows(this.finalArr.length, this.finalArr),
+  //       options
+
+  //     });
+  //     doc.save(fileName);
+  //   }
+
+
+
+  startAddress;
+
+  endAddress;
+  f_date
+  t_date
+  downloadPdf() {
+    var outerThis = this
+    let fileName =
+      "Distnace Report" +
+      new Date() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+    outerThis.startAddress = outerThis.finalArr[0].address;
+    outerThis.endAddress = outerThis.finalArr[outerThis.finalArr.length - 1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    //   outerThis.f_date = moment(this.Fromdate).format('lll'); 
+    // outerThis.t_date =moment(this.todate).format('lll');
+    // var date_combine = f_date + ' to ' + t_date;
+    // doc.setFontSize(30);
+    var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+    var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+    doc.setFontSize(15);
+    // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+
+    doc.text("Distance Report", 500, 30);
+    doc.setFontStyle("arial");
+
+    var header = function (data) {
+      doc.setFontSize(30);
+      doc.setTextColor(40);
+      doc.setFontStyle('arial');
+
+    };
+
+    var options = {
+      beforePageContent: header,
+      margin: {
+        top: 120
+      },
+
+      startY: doc.autoTableEndPosY() + 20
+    };
+    var logo = localStorage.getItem('logo1');
+    outerThis.toDataURL(logo, function (dataUrl) {
+
+      doc.autoTable({
+        head: outerThis.headRows(),
+        // margin: { top: 80 },
+        //  startY: doc.autoTable.previous.finalY + 200,
+        body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+        options,
+        styles: { overflow: 'linebreak' },
+
+        theme: 'grid',
+        didDrawPage: function (data) {
+          // Header
+          doc.setFontSize(20);
+          doc.setTextColor(40);
+          doc.setFontStyle('arial');
+          // logo=localStorage.getItem('logo1');
+          if (logo)
+            doc.addImage(dataUrl, 'JPEG', pageWidth - 100, 6, 75, 75);
+          doc.autoTable({
+            html: "#headerTable",
+            styles: { fontSize: 13, textColor: "[255,72,72]" },
+            margin: { bottom: 140, left: 40, right: 8, top: 40 },
+            theme: 'plain'
+          });
+
+          // Footer
+          var str = "Page " + doc.internal.getNumberOfPages()
+          // Total page number plugin only available in jspdf v1.0+
+          if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+          }
+          doc.setFontSize(10);
+
+          // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+          var pageSize = doc.internal.pageSize;
+          var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+          doc.text(str, data.settings.margin.left, pageHeight - 10);
+        },
+
+        margin: { top: 85 },
+
+      });
+      if (typeof doc.putTotalPages === 'function') {
+        doc.putTotalPages(totalPagesExp);
+      }
+      doc.save(fileName);
+    })
+  }
+
+  toDataURL(url, callback) {
+
+    var xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+      var reader = new FileReader();
+      reader.onloadend = function () {
+        callback(reader.result);
+      }
+      reader.readAsDataURL(xhr.response);
+    };
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.send();
+  }
+
+  headRows() {
+
+    return [
+      // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        device: 'Device Name',
+        fromDate: 'From Date',
+        toDate: 'To Date',
+        startAddress: 'Start Location',
+        endAddress: 'End Location',
+        distance: "Total KM"
+      }
+    ];
+  }
+
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+        device: pdfBody[j].device.Device_Name,
+        fromDate: this.FROMDATE,
+        toDate: this.TODATE,
+        startAddress: pdfBody[j].startAddress,
+        endAddress: pdfBody[j].endAddress,
+        distance: pdfBody[j].distance.toFixed(2),
+
+      });
+    }
+    return body;
+  }
+
+
+
+
+
+
+}
diff --git a/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.html b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.html
new file mode 100644
index 0000000..f3fb3d7
--- /dev/null
+++ b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.html	
@@ -0,0 +1,63 @@
+
+
+      <!-- <app-all-menus></app-all-menus> -->
+
+  <div style="min-height:420px;">
+    <p class="headStyle">{{"Driver Performance Report" | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <!-- <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="groupVal" placeholder="--Select Group--"  ngDefaultControl>
+            <md-option *ngFor="let groupVal of grpName" [value]="groupVal">
+              {{ option.value }}
+            </md-option>
+          </md-select>
+        </div> -->
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="driverVal" placeholder="--{{'Select Driver' | translate}}--"  ngDefaultControl>
+            <md-option *ngFor="let driverVal of getDrivers" [value]="driverVal">
+              {{ driverVal.name }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="driverReport()">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table id="test" class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'Driver Name' | translate}}</th>
+          <th >{{'Total trip' | translate}}</th>
+          <th >{{'Total Ontime trip' | translate}}</th>
+          <th>{{'Ontime vehicles' | translate}}</th>
+          <th >{{'Total Delayed trip' | translate}} </th>
+          <th>{{'Delayed vehicles' | translate}}</th>        
+          <!-- <th>Performance</th>      -->
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of reportArr">
+          <td style="cursor:pointer">{{report.name}}</td>
+          <td style="cursor:pointer">{{report.tripCount}}</td>
+          <td style="cursor:pointer">{{report.onTimeCount}}</td>
+          <td style="cursor:pointer">{{report.Ontime}}</td>
+          <td style="cursor:pointer">{{report.delayCount}}</td>
+          <td style="cursor:pointer">{{report.Delay}}</td>
+          <!-- <td style="cursor:pointer"></td> -->
+        </tr>
+      </tbody>
+    </table>
+  </div>
diff --git a/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.scss b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.scss
new file mode 100644
index 0000000..1646112
--- /dev/null
+++ b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.scss	
@@ -0,0 +1,1092 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+  } 
+  #d:hover { 
+    color: rgb(14, 102, 18);
+  
+  }
+  #ac{
+    color: rgb(38, 38, 90)
+  }
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 200px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+  
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  // #c2 {
+    
+    
+  // }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    margin-top: 10px;
+    color: #6b6a6a;
+  }
+
+  .InputStyle{
+    padding: 10px;
+    background-color: #efefef;
+    margin-bottom: 10px;
+    .selecStyle{
+      display: inherit;
+      width: 56%;
+      padding-left: 16px;
+      margin-left: 50px;
+    
+      border-radius: 10px;
+    }
+
+    // .dtStyle{
+
+    // }
+  }
+  
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.spec.ts b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.spec.ts
new file mode 100644
index 0000000..42e298a
--- /dev/null
+++ b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DriversPerformanceReportComponent } from './drivers-performance-report.component';
+
+describe('DriversPerformanceReportComponent', () => {
+  let component: DriversPerformanceReportComponent;
+  let fixture: ComponentFixture<DriversPerformanceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DriversPerformanceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DriversPerformanceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.ts b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.ts
new file mode 100644
index 0000000..be0d1c3
--- /dev/null
+++ b/src/app/report/report component/drivers-performance-report/drivers-performance-report.component.ts	
@@ -0,0 +1,386 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Component({
+  selector: 'app-drivers-performance-report',
+  templateUrl: './drivers-performance-report.component.html',
+  styleUrls: ['./drivers-performance-report.component.scss']
+})
+export class DriversPerformanceReportComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate= new Date();
+  options=[];
+  logo:any;
+  before:any;
+  date1:any;
+  daily_report_data:any;
+  superAdmin:Boolean = false;
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+    var fTime = new Date();
+    this.Fromdate = new Date(fTime);
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+  if(this.custtype == true){
+    this.cust = true;
+  }  
+  if(this.mb.charAt(0)=="n"){
+    this.mb = ' '
+  }
+
+
+  if( window.localStorage['Custumer'] == 'ON'){
+    this.logoutbut = false
+    this.dealer = true
+ }
+ else{
+     this.logoutbut = true
+ }
+      
+ this.logo=window.localStorage['logo'];
+ this.text=window.localStorage['text'];
+   
+
+  this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    data => {
+      this.devicesss = data
+   
+      this.finall = (this.devicesss.devices);
+
+      for(let i=0;i<this.devicesss.devices.length;i++){
+
+        // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+          let a ={
+            value : this.devicesss.devices[i].Device_Name,
+            viewValue:this.devicesss.devices[i].Device_Name,
+            did:this.devicesss.devices[i].Device_ID,
+            id:this.devicesss.devices[i]._id,
+            user:this.devicesss.devices[i].user,
+            // email: this.devicesss.devices[i].Email_ID,
+            // deviceType: this.devicesss.devices[i].type_of_device
+          }
+          this.options.push(a);
+        // }
+
+      }
+        // console.log(this.options);
+    });
+
+    this.getDriverList();
+  }
+
+
+
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+notification(){
+  this.cond = false
+  this.router.navigateByUrl("notifications");
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+driverPerformance(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+}
+
+
+
+// component code starts here 
+
+groupVal:any;
+driverVal:any;
+getDrivers:any;
+reportArr=[]
+driverReport(){
+  // console.log(this.driverVal._id);
+  var driverId = this.driverVal._id;
+  // console.log(this.Fromdate);
+  // console.log(this.todate);
+  this.reportArr = [];
+  this.contactService.driverReport_data(this.Fromdate,this.todate,driverId)
+    .subscribe(res=>{
+      // console.log(res);
+      for(var i=0;i<res.length;i++){
+        this.reportArr[i] = {};
+        this.reportArr[i].name = res[i]._id.Driver_Name;
+        this.reportArr[i].tripCount = res[i].total_trips;
+        this.reportArr[i].Delay = "",  this.reportArr[i].Ontime = "";
+        for(var j=0;j<res[i].Overall_Details.length;j++){
+          
+          if(res[i].Overall_Details[j].status=="Ontime")
+          {
+            for(var k=0;k<res[i].Overall_Details[j].route_names.length;k++){
+              this.reportArr[i].Ontime+=(res[i].Overall_Details[j].route_names[k].names)+" | ";
+            }
+            this.reportArr[i].onTimeCount = res[i].Overall_Details[j].status_count;
+          }
+          if(res[i].Overall_Details[j].status=="Delay"){ 
+            for(var k=0;k<res[i].Overall_Details[j].route_names.length;k++){
+              this.reportArr[i].Delay+=(res[i].Overall_Details[j].route_names[k].names)+" | ";
+            }
+            this.reportArr[i].delayCount = res[i].Overall_Details[j].status_count;            
+          }
+         
+        }
+      }
+      // console.log(this.reportArr);
+    })
+  }
+
+getDriverList(){
+  let id= this.useridd;
+  this.contactService.getDrivers(id)
+    .subscribe(res =>{
+      // console.log(res)
+      this.getDrivers= res;
+    })
+}
+
+grpName:any;
+getGrp(){
+  this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      // console.log(res);     
+      this.grpName = res["group_details"];
+      // console.log(this.grpName);  
+    })
+}
+
+tab:any;
+exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    this.tab = document.getElementById('test'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+	}
+
+}
diff --git a/src/app/report/report component/fuel-report/fuel-report.component.html b/src/app/report/report component/fuel-report/fuel-report.component.html
new file mode 100644
index 0000000..b2662f9
--- /dev/null
+++ b/src/app/report/report component/fuel-report/fuel-report.component.html	
@@ -0,0 +1,56 @@
+<!-- <app-all-menus></app-all-menus> -->
+  <div style="min-height:420px;padding-top: 6%;">
+    <p class="headStyle">Fuel Report</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+            <md-input-container>
+            <input mdInput placeholder="Search Device" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option"
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.value">
+                <span>{{ option.value }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+       
+        </div>
+        <div class="col-md-3">
+          <span>From Date</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>To Date</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color:#3e3737;border:#fdfdfd;" class="btn btn-primary w3-button/" (click)="fuel_report(Fromdate,todate,option)">SEARCH</button>
+      
+            <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button>
+          
+          </div>
+      </div>
+    </div>
+
+   
+    <table id="test" class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'On/Off' | translate}}</th>
+          <th>{{'Date Time' | translate}}</th>
+          <th>{{'Location' | translate}}</th>
+          <th>{{'Vehicle' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer">{{report.switch}}</td>
+          <td style="cursor:pointer">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer">{{report.address}}</td>
+          <td style="cursor:pointer">{{report.vehicleName}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
diff --git a/src/app/report/report component/fuel-report/fuel-report.component.scss b/src/app/report/report component/fuel-report/fuel-report.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/fuel-report/fuel-report.component.spec.ts b/src/app/report/report component/fuel-report/fuel-report.component.spec.ts
new file mode 100644
index 0000000..29e1b13
--- /dev/null
+++ b/src/app/report/report component/fuel-report/fuel-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelReportComponent } from './fuel-report.component';
+
+describe('FuelReportComponent', () => {
+  let component: FuelReportComponent;
+  let fixture: ComponentFixture<FuelReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/fuel-report/fuel-report.component.ts b/src/app/report/report component/fuel-report/fuel-report.component.ts
new file mode 100644
index 0000000..c206815
--- /dev/null
+++ b/src/app/report/report component/fuel-report/fuel-report.component.ts	
@@ -0,0 +1,294 @@
+import { Component, OnInit } from '@angular/core';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+
+@Component({
+  selector: 'app-fuel-report',
+  templateUrl: './fuel-report.component.html',
+  styleUrls: ['./fuel-report.component.scss']
+})
+export class FuelReportComponent implements OnInit {
+
+  ignition_data: any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate=new Date();
+  todate=new Date();
+  options=[];
+  logo:any;
+  superAdmin:Boolean = false;
+
+  t:any;
+  dataSelect: any[];
+
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  ngOnInit() {
+
+    
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+        
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+
+  }
+
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  }
+
+  ideal(){
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+  notification(){
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  
+  
+  myaccount(){
+   
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+driverPerformance(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+
+ignitionReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+}
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+
+
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+
+
+fuel_report(Fdate,tdate,optionVal){
+
+}
+
+exportExcel(){
+  
+}
+
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val) {
+    const filterValue:any = val
+     this.dataSelect = this.options.filter( function(d){
+  
+      return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+    });
+    return this.dataSelect;
+  }
+
+}
+
+}
diff --git a/src/app/report/report component/geofancing-report/geofancing-report.component.html b/src/app/report/report component/geofancing-report/geofancing-report.component.html
new file mode 100644
index 0000000..03c8b48
--- /dev/null
+++ b/src/app/report/report component/geofancing-report/geofancing-report.component.html	
@@ -0,0 +1,162 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Geofencing Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'In/Out' | translate}}</th>
+                      <th style="text-align: left;">{{'Datetime' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>
+                      <th style="text-align: left;">{{'GeoFence Name' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+      <app-all-menus></app-all-menus>
+
+
+  <div style="float:left; width: 100%; padding-top:6%;min-height: 100vh;">
+    <p class="headStyle">{{'Geofencing Report' | translate}}</p>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--{{'Select Geofencing' | translate}}--"  ngDefaultControl>
+            <md-option *ngFor="let option of geo_status" [value]="option">
+              {{ option.geoname }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="geofancing_Report(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table  class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align: center;">{{'In/Out' | translate}}</th>
+          <th style="text-align: center;">{{'Datetime' | translate}}</th>
+          <th style="text-align: center;">{{'Location' | translate}}</th>
+          <th style="text-align: center;">{{'GeoFence Name' | translate}}</th>
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let device of geofence">
+
+          <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>
+
+          <td style="cursor:pointer;text-align:center">{{device.direction}}</td>
+
+          <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>
+
+          <td style="cursor:pointer;text-align:center">
+            <p *ngIf="device.address != undefined">{{device.address}}</p>
+            <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+         
+          </td>
+
+          <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display:none">
+
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th style="text-align: center;">Vehicle Name</th>
+   <th style="text-align: center;">In/Out</th>
+   <th style="text-align: center;">Datetime</th>
+   <th style="text-align: center;">Location</th>
+   <th style="text-align: center;">GeoFence Name</th>
+ </tr>
+</thead>
+
+<tbody>
+
+ <tr *ngFor="let device of geofence">
+
+   <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>
+
+   <td style="cursor:pointer;text-align:center">{{device.direction}}</td>
+
+   <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>
+
+   <td style="cursor:pointer;text-align:center">
+     <p *ngIf="device.address != undefined">{{device.address}}</p>
+     <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+  
+   </td>
+
+   <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>
+
+ 
+ 
+
+ </tr>
+</tbody>
+</table>
+
+
+
+  </div>
+ -->
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+          border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+          <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+        </td> -->
+  </tr>
+
+</table>
\ No newline at end of file
diff --git a/src/app/report/report component/geofancing-report/geofancing-report.component.scss b/src/app/report/report component/geofancing-report/geofancing-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/geofancing-report/geofancing-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/geofancing-report/geofancing-report.component.spec.ts b/src/app/report/report component/geofancing-report/geofancing-report.component.spec.ts
new file mode 100644
index 0000000..006f1a9
--- /dev/null
+++ b/src/app/report/report component/geofancing-report/geofancing-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeofancingReportComponent } from './geofancing-report.component';
+
+describe('GeofancingReportComponent', () => {
+  let component: GeofancingReportComponent;
+  let fixture: ComponentFixture<GeofancingReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeofancingReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GeofancingReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/geofancing-report/geofancing-report.component.ts b/src/app/report/report component/geofancing-report/geofancing-report.component.ts
new file mode 100644
index 0000000..880414b
--- /dev/null
+++ b/src/app/report/report component/geofancing-report/geofancing-report.component.ts	
@@ -0,0 +1,755 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+import * as moment from 'moment';
+
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+declare var google: any;
+
+
+
+
+@Component({
+  selector: 'app-geofancing-report',
+  templateUrl: './geofancing-report.component.html',
+  styleUrls: ['./geofancing-report.component.scss']
+})
+export class GeofancingReportComponent implements OnInit {
+  date1:any;
+  finalArr=[]
+  finall:any;
+  identifier:any= 'geofence_report';
+  options= [];
+  logo:any;
+  Fromdate:any;
+  todate:any;
+  userName:any;
+  before:any;
+  deviceArr: any=[];
+
+private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private _service:ReportService,private router: Router,public dialog: MdDialog) {
+    this._service.invokeEventForgeofenceReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+     
+      
+      }); 
+   }
+ ngOnDestroy(){
+    
+    this.finalise.next(void 0);
+  }
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+ 
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+
+text:any;
+option:any;
+geo_status=[];
+superAdmin:Boolean = false;
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       
+
+
+     this.testTable();
+  
+   
+  }
+
+  // openNav() {
+  //   /*  document.getElementById("myNav").style.width = "100%";
+  // */
+  //    this.router.navigateByUrl("location");
+  
+  // }
+
+
+  // mydealer(){
+  //   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  //   localStorage.removeItem('devices');
+  //   window.localStorage['DataUpdate'] = 'True';
+  //   if(window.localStorage['DataLoaded'] = 'True'){
+  //     window.localStorage['Custumer'] = 'OFF'
+  //     this.router.navigateByUrl("add")
+  //    // this.router.navigateByUrl("const?_status="+"OK");
+  //   }
+  // }
+
+  // myaccount(){
+   
+  //   let dialogRef = this.dialog.open(MyaccountComponent, {
+  //     width: '903px',
+  //     data: {}
+  //   });
+  
+  //   dialogRef.afterClosed().subscribe(result => {
+  
+  //     if(result == "succ"){
+  // //console.log("Updated")
+  //     }
+  
+  //   });
+  // }
+  // logout(){
+  //   window.localStorage.clear();
+  //   this.router.navigateByUrl("login");
+  // }
+  // devi(){
+  //   this.router.navigateByUrl("dashboard");
+  
+  // }
+  // soon(){
+  //   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  // }
+ 
+  // new(){
+  //   this.router.navigateByUrl("new");
+    
+  // }
+  // cond:Boolean = false;
+  // point : any = 0;
+  //  a(){
+  //    //console.log(this.point);
+  //    if(this.point == 0){
+  //     this.cond = true;
+  //     this.point ++;
+  //    }
+  //  else if(this.point % 2 == 0){
+  //   this.cond = true;
+  //   this.point ++;
+  //  }
+  //  else{
+  //    this.cond = false
+  //    this.point ++;
+  //  }
+  
+    
+  // }
+
+  // summaryReport(){
+  
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/summary-report");
+  // }
+  
+  
+  // overspeed(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/overspeed");
+  
+  // }
+
+  // driverPerformance(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/Driver-performance");
+  // }
+  
+  // route_map(){
+  //   this.router.navigateByUrl("routeMapping");
+
+  // }
+  // Ddetail(){
+  //   this.router.navigateByUrl("driverdetail");
+  // }
+  // DModel(){
+  //   this.router.navigateByUrl("deviceModel");
+  // }
+  // VType(){
+  //   this.router.navigateByUrl("VehicleType");
+  // }
+  
+  
+  // routeViolation(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/routeViolation");
+  
+  // }
+
+
+  // notification(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("notifications");
+  // }
+  
+  // stoppage_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/stoppage_report");
+  
+  // }
+  // group(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("group_view");
+  // }
+  // addcus(){
+  //   this.router.navigateByUrl("add");
+  // }
+  // report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report");
+  
+  // }
+  // report_speed(){
+  //   //console.log("report speed call")
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/device-speed-report");
+  // }
+
+  // ign(){
+  //   this.router.navigateByUrl("device-report/ign-report");
+  
+  // }
+
+  // ignition_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/ignition_report");
+
+
+  // }
+
+  // alert_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/alert_report");
+  // }
+
+
+  // trip_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/trip_report");
+  
+  // }
+
+  // ideal(){
+  //   this.router.navigateByUrl("device-report/ideal-report");
+  // }
+  // geo(){
+  //   this.router.navigateByUrl("geofencing");
+    
+  // }
+
+  // vehicleRoute(){
+  //   this.router.navigateByUrl("vehicleRoute");
+
+  // }
+
+  // dealerInfo(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("dealerInfo");
+  // }
+
+
+  // distance_report(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/distance_report");
+  // }
+
+  // geofancingReport(){
+  //   this.cond = false
+  //   this.router.navigateByUrl("device-report/geofancing");
+  // }
+  
+ 
+  geofence=[];
+  show_time:any;
+  geofence_data=[];
+  address_show:any;
+ 
+  
+//   geofancing_Report(fd,td,devop){
+//     //console.log(devop);//console.log(fd);//console.log(td);//console.log(devop);
+//     let f_date = fd.toISOString();
+//     let t_date = td.toISOString();
+//     //console.log(f_date);//console.log(t_date);
+//     let uId = this.useridd;
+//     //console.log(uId);
+//     let geoId  = devop._id;
+// //console.log(geoId);
+//      var outerThis = this;
+//      this.Load = true; 
+//     this.contactService.geofenceData(f_date,t_date,uId,geoId)
+//         .subscribe(res=>{
+//           this.Load = false; 
+//     //console.log(res);
+//           this.geofence = res;
+//     console.log("this.geofence=>",this.geofence);   
+//         },err=>{
+//           this.Load = false; 
+//           console.log('Error While fetching data');
+//         })
+//   }
+tabelObj:any;
+testTable() {
+  const that = this;
+ 
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+      // dom: 'Bfrtip',
+      // buttons: [
+      //     'copy', 'csv', 'excel', 'pdf', 'print'
+      // ]  ,
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load= true;    
+              // dataTablesParameters.find._u = that.useridd;
+            
+              // dataTablesParameters.find._u = user;
+
+              // if(that.deviceArr.length != 0){
+         
+                // dataTablesParameters.find.vname = deviceId;
+              // }
+            // if (that.Fromdate) {
+                // var fdate = new Date(that.Fromdate).toISOString()      
+                // dataTablesParameters.find.f_date = fdate    
+                // dataTablesParameters.find.f_date =  from_date;    
+            // };
+
+            // if (that.todate) {
+              // var fdate = new Date(that.todate).toISOString()      
+              // dataTablesParameters.find.t_date = fdate     
+                // dataTablesParameters.find.t_date = to_date  ;
+          // };
+          // this.deviceArr = deviceId; 
+
+          var tempfd = new Date().setHours(0,0,0,0);
+          var tf = new Date(tempfd);
+          var temptd = new Date();
+         
+            var from_date = that.Fromdate?that.Fromdate:tf.toISOString();
+            var to_date = that.todate?that.todate:temptd.toISOString();
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            suburl += "/notifs/GeoFencingReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+            that.finalArr=[]
+            // console.log(this.deviceArr);
+            if(that.deviceArr.length != 0){  
+              suburl +='&geoid='+that.deviceArr[0];
+            }else{
+            
+              let resp =[];
+
+              callback({data : resp });
+            }
+            if(temp.from_date && temp.to_date && that.deviceArr.length != 0){
+            that.contactService.get(suburl).subscribe((resp:any) => {   
+                // console.log(ignReport.length);   
+                that.Load= false;   
+                that.finalArr=resp 
+                console.log('respresp=>',resp);      
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+          }else{
+            that.Load= false;       
+                callback({data : [] });
+          }
+        },  
+      
+          "columns": [
+              {
+                  "data": "vehicleName",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "direction",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "timestamp",
+                  render: function(data, type, row) {
+                    var cDate = new Date(data);
+                    return data ? (moment(cDate).format('llll')) : "";         
+                  }
+              },   
+            {
+              "data": "address",
+              "defaultContent": "_id",
+              render: function(data, type, row) { 
+                  let lat = row.lat;
+                  let long = row.long;           
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';          
+                  return data?data : addressLink;     
+       
+              }
+          }  ,
+          {
+            "data": "geoid",
+            render: function(data, type, row) { 
+              
+                return data?data.geoname : '';     
+     
+            }
+        }                         
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          },
+          { "width": "20%", "targets": 0 },
+          { "width": "10%", "targets": 1 },
+          { "width": "20%", "targets": 2 },
+          { "width": "30%", "targets": 3 },  
+          { "width": "20%", "targets": 4 },      
+         
+          ] 
+      });
+
+  });
+
+}
+  
+  addressLink = "";
+getlink(report){
+  console.log("inside function");
+  console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+
+  tab:any;
+
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  getReport(event){
+    if(event == 'getExcel'){
+      this.exportExcel();
+     } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+    
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+     
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+    
+     
+      console.log(this.tabelObj);
+      this.tabelObj.ajax.reload();      
+        
+    
+    
+    }
+   
+  }
+  expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "Geofencing Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+  
+//   doc.setFontSize(15);
+//   doc.text('Geofencing Report ', 20, 30);
+//     doc.setFontStyle("arial");
+//     var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+   
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+
+  startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Distnace Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+  //   outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  // outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Distance Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+     
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",
+                            styles: {fontSize: 13,textColor:"[255,72,72]"},
+                            margin:{bottom:140,left:40,right:8,top:40},
+                            theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle Name',
+        direction:'In/Out',
+        timestamp:'Date Time',
+        location:'Location',
+        geoname:'Geofence Name',
+        
+      
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       vehicleName:pdfBody[j].vehicleName,
+       direction:pdfBody[j].direction,
+       timestamp: moment(pdfBody[j].timestamp).format('lll'),
+       location:[pdfBody[j].lat,pdfBody[j].long],
+       geoname:pdfBody[j].geoid.geoname?pdfBody[j].geoid.geoname:'--',
+      
+      });
+    }
+    return body;
+  }
+
+
+
+}
+
diff --git a/src/app/report/report component/ideal-report/ideal-report.component.html b/src/app/report/report component/ideal-report/ideal-report.component.html
new file mode 100644
index 0000000..802a5f3
--- /dev/null
+++ b/src/app/report/report component/ideal-report/ideal-report.component.html	
@@ -0,0 +1,49 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div style="float:left; width: 99%; padding-top: 6%;padding-left: 3%;">
+<div class="loading" *ngIf="Load">Loading&#8230;</div>
+<div id="c44"  style="padding-top:1%;padding-bottom:2%">   
+  <md-select style="overflow-y: hidden;
+  overflow-x: hidden;" [name]="'typdev'" placeholder="Select Your Device" style="padding-left:5%;" [(ngModel)]="neww">
+  <md-option *ngFor="let option of options" [value]="option">
+    {{ option.viewValue }}
+  </md-option>
+    </md-select>  
+  </div>
+<div id="c11"  style="padding-top:1%;padding-bottom:2%">
+  
+Select date : <!--  <angular2-date-picker [(ngModel)]="date1" [settings]="settings"></angular2-date-picker>  -->
+<owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+  
+</div>
+<div id="c11"  style="padding-top:1%;padding-bottom:2%">
+    <button  (click)="creategraph(neww)" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button></div><br>   
+    
+   
+
+
+<br>
+ <br>
+ <div style="  width:100%;
+ height:66.67vh;">
+  
+
+
+  <div style="display: block;">
+    <canvas baseChart  height=" 425px"
+    width= "874px"
+     
+              [datasets]="barChartData"
+              [labels]="barChartLabels"
+              [options]="barChartOptions"
+              [legend]="barChartLegend"
+              [chartType]="barChartType"
+              (chartHover)="chartHovered($event)"
+              (chartClick)="chartClicked($event)"></canvas>
+    </div>
+
+  </div>
+
+</div>
+
+       
\ No newline at end of file
diff --git a/src/app/report/report component/ideal-report/ideal-report.component.scss b/src/app/report/report component/ideal-report/ideal-report.component.scss
new file mode 100644
index 0000000..2067b31
--- /dev/null
+++ b/src/app/report/report component/ideal-report/ideal-report.component.scss	
@@ -0,0 +1,1003 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#d:hover { 
+  color: rgb(14, 102, 18);
+
+  
+}
+#ac{
+  color: rgb(38, 38, 90)
+}
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+  }
+  /* Side Navi */
+  #mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+  }
+  
+  #mySidenav a:hover {
+    left: 0;
+  }
+  
+  #about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+  }
+  
+  #blog {
+    top: 80px;
+    background-color: #18262F;
+  }
+  
+  #projects {
+    top: 140px;
+    background-color: #f44336;
+  }
+  
+  #contact {
+    top: 200px;
+    background-color: #555
+  }
+  
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/report/report component/ideal-report/ideal-report.component.spec.ts b/src/app/report/report component/ideal-report/ideal-report.component.spec.ts
new file mode 100644
index 0000000..b1db0c1
--- /dev/null
+++ b/src/app/report/report component/ideal-report/ideal-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdealReportComponent } from './ideal-report.component';
+
+describe('IdealReportComponent', () => {
+  let component: IdealReportComponent;
+  let fixture: ComponentFixture<IdealReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IdealReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdealReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/ideal-report/ideal-report.component.ts b/src/app/report/report component/ideal-report/ideal-report.component.ts
new file mode 100644
index 0000000..cfdfc86
--- /dev/null
+++ b/src/app/report/report component/ideal-report/ideal-report.component.ts	
@@ -0,0 +1,366 @@
+import { Component, OnInit } from '@angular/core';
+import {ContactService} from '../../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-ideal-report',
+  templateUrl: './ideal-report.component.html',
+  styleUrls: ['./ideal-report.component.scss'],
+  providers: [ContactService]
+})
+export class IdealReportComponent implements OnInit {
+  public barChartOptions:any = {
+    scaleShowVerticalLines: false,
+    responsive: true,
+    
+  };
+  myaccount(){
+
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+  Load:boolean = false;
+  device_data:any;
+  data:any;
+  neww:any;
+  before:any;
+  date1: Date = new Date();
+
+  creategraph(neww){
+    // console.log(neww);
+
+
+/* let rr = new Date(this.date1).setHours(0,0,0,0) */
+let rr = new Date().setHours(0,0,0,0) -1 ;
+let r = new Date(rr).toISOString();
+// console.log(r);
+this.Load = true;
+/* https://www.adnateiot.com/gps/getGpsIdlingReport?imei=865205032256181&to=2018-01-31T18:30:00.000Z */
+this.contactService.getIdealData(neww.did,r).subscribe(
+      
+  data => {
+    this.Load = false;
+    this.device_data = data 
+  //  console.log(this.device_data); 
+   this.barChartLabels.length = this.device_data.length;  
+   this.getdata(this.device_data)
+   //this.lineChartLabels.length = this.device_data.length;  
+  // this.getdata(this.device_data)
+/*
+0
+:
+{Total_idle_time: 21.778455, Date: "2018-01-24T09:43:58.180Z"}
+1
+:
+{Total_idle_time: 20.732545833333333, Date: "2018-01-25T09:43:58.180Z"}
+2
+:
+ */
+  });
+  }
+  ign(){
+    this.router.navigateByUrl("device-report/ign-report");
+  
+  }
+  getdata(final){
+    let fi = [];
+    let time = [];
+    var day =0; 
+    var month = 0; 
+     var year = 0;
+      var final_date =null;
+    this.barChartLabels.length = 0;
+   /*  for(let q = final.length; q >0 ;q -- ) */
+   for(let q = 0; q <final.length ;q ++ )
+    {
+      fi.push(final[q].Total_idle_time.toFixed(2));
+    /*   let t = new Date(final[q].Date).toLocaleTimeString();
+      console.log(t); */
+      //var g = new Date(final[q].Date);
+          
+     // day = g.getDate()+1; 
+      // month = g.getMonth()+1; 
+       // year = g.getFullYear();
+      
+        // final_date = day+"/"+month+"/"+year
+         final_date=moment(final[q].Date).add(1,'ms').format('DD/MM/YYYY');
+
+      //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+      this.barChartLabels.push(final_date)
+    }
+   this.Load = false;
+    this.barChartData = [{
+      label: "Idle (Hours)",
+      data: fi
+    }];
+    
+  // console.log(this.barChartData)
+  
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+  logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+  
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+
+  ignition_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  geofancingReport(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  overspeed(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+  
+  }
+  
+  stoppage_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+  
+  }
+
+  Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  
+  
+
+  distance_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+  routeViolation(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+  
+  }
+
+  driverPerformance(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+summaryReport(){
+ 
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+  new(){
+    this.router.navigateByUrl("new");
+    
+  }
+
+  vehicleRoute(){
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo(){
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+cond:any;
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+ideal(){
+  this.router.navigateByUrl("device-report/ideal-report");
+}
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+  public barChartLabels = [];
+  public barChartType:string = 'bar';
+  public barChartLegend:boolean = true;
+ 
+  public barChartData = [
+    {data: [0, 0, 0, 0, 0, 0, 0], label: 'Idle'}
+   ];
+ 
+  // events
+  public chartClicked(e:any):void {
+    // console.log(e);
+  }
+ 
+  public chartHovered(e:any):void {
+    // console.log(e);
+  }
+ 
+  public randomize():void {
+    // Only Change 3 values
+    let data = [
+      Math.round(Math.random() * 100),
+      59,
+      80,
+      (Math.random() * 100),
+      56,
+      (Math.random() * 100),
+      40];
+    let clone = JSON.parse(JSON.stringify(this.barChartData));
+    clone[0].data = data;
+    this.barChartData = clone;
+
+  }
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+fs:any;
+ls:any;
+emailid:any;
+or:any;
+useridd:any;
+custtype:any;
+cust:boolean = false;
+time :any;
+devicesss:any;
+finall:any;
+options = [];
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+superAdmin:Boolean = false;
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+  
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];
+    this.time = new Date();
+    
+     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+       /*      let a ={
+              dname : this.devicess.devices[i].Device_Name,
+              did:this.devicess.devices[i].Device_ID,
+              id:this.devicess.devices[i]._id,
+              user:this.devicess.devices[i].user
+            }
+            this.options.push(a); */
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          // }
+
+        }
+
+     
+
+      });
+
+  }
+
+}
diff --git a/src/app/report/report component/idle-report/idle-report.component.html b/src/app/report/report component/idle-report/idle-report.component.html
new file mode 100644
index 0000000..76e7629
--- /dev/null
+++ b/src/app/report/report component/idle-report/idle-report.component.html	
@@ -0,0 +1,105 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'IDLE REPORT' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Start Time' | translate}}</th>
+                      <th style="text-align: left;">{{'End Time' | translate}}</th>
+                      <th style="text-align: left;">{{'Duration (HH:MM)' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>    
+                      <th style="text-align: left;">{{'AC Status' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+<!-- <app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 6%;">
+  <div class="headerStyle">
+    <span>{{'IDLE REPORT' | translate}}</span>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  </div>
+  <div class="filterDiv">
+    <div class="row" style="width: 100%; padding-bottom: 25px; background: #efefef;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">
+        <div style="display: inline-flex; width: 80%;padding-bottom: 3px;">
+          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
+          <div style="width: inherit; margin-top: 9px;text-align: left">
+            <select id="select" multiple="multiple" style="text-align: left">
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+          </div>
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
+            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+            <label style="width: inherit;margin-top: 11px">{{'Min Idle Time (Min)' | translate}}</label>
+            <input id="minIdleTime" class="form-control form-control-sm" style="margin-top: 4px;width: 80px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+        </div>
+        <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;"
+          (click)="callfunction()"> {{'SEARCH' | translate}} </button>
+
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+        <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+            <thead style="background-color:#A2C523;color: white;">
+                <tr>
+                    <th style="text-align:center;">{{'Device Name' | translate}}</th>
+                    <th style="text-align:center;">{{'Start Time' | translate}}</th>
+                    <th style="text-align:center;">{{'End Time' | translate}}</th>
+                    <th style="text-align:center;">{{'Duration (HH:MM:SS)' | translate}}</th>
+                    <th style="text-align:center;">{{'Location' | translate}}</th>    
+                    <th style="text-align:center;">{{'AC Status' | translate}}</th>
+                </tr>
+            </thead>  
+        </table>
+    </div>
+  </div>
+</div> -->
\ No newline at end of file
diff --git a/src/app/report/report component/idle-report/idle-report.component.scss b/src/app/report/report component/idle-report/idle-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/idle-report/idle-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/idle-report/idle-report.component.spec.ts b/src/app/report/report component/idle-report/idle-report.component.spec.ts
new file mode 100644
index 0000000..823561e
--- /dev/null
+++ b/src/app/report/report component/idle-report/idle-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IdleReportComponent } from './idle-report.component';
+
+describe('IdleReportComponent', () => {
+  let component: IdleReportComponent;
+  let fixture: ComponentFixture<IdleReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IdleReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IdleReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/idle-report/idle-report.component.ts b/src/app/report/report component/idle-report/idle-report.component.ts
new file mode 100644
index 0000000..a61a435
--- /dev/null
+++ b/src/app/report/report component/idle-report/idle-report.component.ts	
@@ -0,0 +1,682 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-idle-report',
+  templateUrl: './idle-report.component.html',
+  styleUrls: ['./idle-report.component.scss']
+})
+export class IdleReportComponent implements OnInit {
+  options: any=[];
+  devicesss: any;
+  superAdmin: any;
+  supAdmin: any;
+  fs: any;
+  minIdleTime:any= 5;
+  identifier:any='idle_report';
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  mb: any;
+  custtype: any;
+  Dealer: any;
+  finalArr=[]
+  finall: any;
+  from_date=new Date();
+  to_date=new Date();
+  colorTheme = 'theme-dark-blue';
+  bsConfig: Partial<BsDatepickerConfig>;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private _service:ReportService , public dialog: MdDialog, public snackBar: MdSnackBar) { 
+    this._service.invokeEventForidleReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      console.log(value);
+      
+      }); 
+    // this.bsConfig = Object.assign({ dateInputFormat: 'MMMM Do YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    // this.from_date.setHours(0,0,0,0); 
+  $('#select').hide();
+    console.log("loginDetails=>",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.supAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.Dealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer;
+
+  }
+ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    // this.getDevices();
+    this.testTable();
+  }
+
+  // getDevices(){
+    
+  //   this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+  //     data => {
+  //       this.devicesss = data
+     
+  //       this.finall = (this.devicesss.devices);
+
+  //       for(let i=0;i<this.devicesss.devices.length;i++){
+
+  //         if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+  //           let a ={
+  //             value : this.devicesss.devices[i].Device_Name,
+  //             viewValue:this.devicesss.devices[i].Device_Name,
+  //             did:this.devicesss.devices[i].Device_ID,
+  //             id:this.devicesss.devices[i]._id,
+  //             user:this.devicesss.devices[i].user,
+  //             email: this.devicesss.devices[i].Email_ID,
+  //             deviceType: this.devicesss.devices[i].type_of_device
+  //           }
+  //           this.options.push(a);
+  //         }
+
+  //       }
+  //          console.log(this.options);
+  //          let that = this;
+  //          setTimeout(()=>{
+  //            that.loadropdown();
+  //          },100)  
+
+  //     });
+  
+  //   }
+
+
+    // loadropdown() {
+    //   let that = this;
+    //   var script = document.createElement("script");
+    //   script.setAttribute("type", "text/javascript");
+    //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    //   document.getElementsByTagName("head")[0].appendChild(script);
+    //   setTimeout(() => {
+  
+    //     $('#select').multipleSelect({
+    //       width: 200,
+    //       placeholder: 'Select device.....',
+    //       filter: true,
+      
+    //     })
+    //    // $('#select').show();
+    //   }, 100);
+  
+  
+    // }
+
+    tabelObj: any;
+    Load : boolean=false;
+    vCount = 0;
+    deviceArr:any=[];
+    callfunction(): void {
+      // this.Load = true;
+      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+      this.tabelObj.draw();
+    }
+    dtOptions:any={};
+    repCount = 0 ;
+    testTable() {
+      const that = this;
+      console.log("inside function");
+      // this.Load = true;
+      that.finalArr = [];
+      $(document).ready(function() {
+          that.tabelObj = $('#deviceTable').DataTable({
+            dom: 'lBftip',
+            buttons: [
+              'copy',
+              'print',
+              'excel'
+            ],       
+              "processing": true,
+              "searching": false,
+              pagingType: 'full_numbers',
+              pageLength: 25,
+              serverSide: true,
+              "scrollY":'65vh',
+              "scrollCollapse": true,     
+              lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+              ajax: (dataTablesParameters: any, callback) => {
+               
+                  dataTablesParameters.op = {};
+                  dataTablesParameters.select = [];
+                  dataTablesParameters.find = {};   
+                  dataTablesParameters.columns = [
+                    // {data: "_id" },
+                    {data: '_id'},
+                    {data: 'device'},
+                    {data: 'device.Device_Name'},
+                    {data : 'start_time'},
+                    {data : 'end_time'},
+                    {data : 'lat'},           
+                    {data: 'long'},
+                    {data :'ac_status'},       
+                    {data :'idle_time'},             
+                    {data : 'address'},
+                    {data: null, defaultContent: ''}
+                  ]  
+
+              
+                 
+                 if(that.repCount != 0){
+              
+                  console.log(that.repCount);
+                  // dataTablesParameters.find.user = that.useridd;
+                  if(that.deviceArr.length != 0){
+                    console.log('that.deviceArr',that.deviceArr);
+                    var dev_in = {'$in': that.deviceArr};
+                       dataTablesParameters.find.device = dev_in;
+                       if (that.from_date) {
+                        var fdate = new Date(that.from_date).toISOString()  
+                       
+                        dataTablesParameters.find.start_time = {$gte: fdate}        
+                    };
+                    if (that.to_date) {
+                      var tdate = new Date(that.to_date).toISOString()        
+                      dataTablesParameters.find.end_time = {$lte: tdate}        
+                  };
+
+                  // that.minIdleTime =
+                  that.Load = true; 
+                  dataTablesParameters.find.idle_time   = {$gte : that.minIdleTime * 60000};
+                  var suburl = "";
+                  suburl += "/stoppage/idleReportdatatable";
+                  that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+                   
+                      console.log("Response from datatable=>",resp);     
+                      that.Load= false;  
+                       callback({data : resp});
+                      // if(resp.length>0){
+                      //   that.finalArr=resp       
+                      //   callback({data : resp});
+                      // }else{
+                      //   that.finalArr=[]       
+                      //   callback({data : [] });
+
+                      // }
+                  }, err => {  
+                    callback({data : [] });
+                    that.Load= false;    
+                    let message1="Server Error, Please try again ";
+                    let action:any;
+                    that.snackBar.open(message1, action, {
+                      duration: 5000,
+                      
+                    });  
+                    console.log("error",err) ;     
+                  });
+                  }else{
+                    that.Load= false;    
+                    let message1="Please Select Device";
+                    let action:any;
+                    that.snackBar.open(message1, action, {
+                      duration: 5000,
+                      
+                    });  
+                    return;
+                  }
+                 }else{
+                  that.repCount =  that.repCount + 1 ; 
+                  that.Load= false;    
+                 }
+                                            
+           
+              },  
+              "columns": [
+                  {
+                      "data": "device",
+                      "visible" :true,
+                      "render": function(data, type, row) {
+                      
+                       return data.Device_Name?data.Device_Name:"";
+                          
+                      }
+                  },
+                  {
+                      "data": "start_time",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                        var Start_time ;
+                        if(data !=null){
+                          var ft= new Date(data);
+                         Start_time = moment(ft).format('llll');
+
+                          
+                        }else{
+                          Start_time = 'NA';
+
+                        }
+                        
+                        // return data ? (moment(created_time).format('llll')) : "";
+                          return Start_time;
+                        
+                    
+                      }
+                  },
+                  {
+                      "data": "end_time",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                        var end_time ;
+                        if(data !=null){
+                          var ft= new Date(data);
+                         end_time = moment(ft).format('llll');
+
+                          
+                        }else{
+                          end_time = 'NA';
+
+                        }
+                        
+                    
+                          return end_time;
+                      }
+                  }, 
+                  {
+                    "data": "idle_time",
+                    "visible" : true,
+                    render: function(data, type, row) {  
+                      var duration;
+                      // if((row.start_time == undefined)||(row.end_time == undefined)){
+                      //   duration = 'NA'
+                      // }else{
+
+                      //   var stime = new Date(row.start_time);
+                      //   var etime = new Date(row.end_time);
+                      //   var tdiff = etime.getTime() - stime.getTime()
+                      
+
+                      // }
+                      if((data != null)||(data!=undefined)){
+                        duration = that.millisecondConversion(data);
+                      }else{
+                        duration = "0:0";
+                      }
+                    
+                      // that.millisecondConversion(2000);
+                        return duration;
+                    }
+                },    
+         
+                  {
+                    "data": "long",
+                    "visible" :true,
+                    render: function(data, type, row) {
+                    
+                      var lattitude;
+                      var longitude;
+                      if((row.lat == undefined)||(row.long == undefined)||(row.lat == null)||(row.long == null)){
+                          lattitude = 0;
+                          longitude = 0;
+                          var addressLink = 'NA';
+                      }else{
+                        lattitude = row.lat;
+                        longitude = row.long;
+                        var alink =  "https://maps.google.com/?q=" + lattitude + "," + longitude+" "
+                        var addressLink =  '<a  href=' + alink  + 'target="_blank" ><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>'
+                      }
+                        var tempAdd = row.address;
+                        if(tempAdd != undefined){
+                              return tempAdd;
+                        }else{
+                          return addressLink;
+                        }
+                      
+                    }
+                },         
+                { 
+                  "data": "ac_status",
+                  "visible" :true,
+                  render: function(data, type, row) {
+               
+                  var aStatus;
+                  if(data == null){
+                    aStatus = 'NA';
+                  }
+                  if(data == '0'){
+                    aStatus = 'OFF';
+
+                  }
+                  if(data == '1'){
+                    aStatus = 'ON';
+
+                  }       
+                  return aStatus;
+                  }
+              },                    
+              ], 
+              "columnDefs": [
+                { className: "dt-body-left", "targets": [ 0,1,2,3,4,5 ] },
+                {
+                  "targets": '_all',
+                  "createdCell": function (td, cellData, rowData, row, col) {
+                      $(td).css('padding', '18px')
+                  }
+              } ,
+              { "width": "20%", "targets": 0 },
+            
+            
+              { "width": "20%", "targets": 3 },  
+             
+             
+              ]   
+          });
+    
+      });
+    
+    }
+    tab:any;
+    exportExcel()
+    {
+        var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+        var textRange; var j=0;
+        var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    
+        for(j = 0 ; j < this.tab.rows.length ; j++) 
+        {     
+            tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+            // console.log('tab_text',JSON.parse(tab_text));
+            //tab_text=tab_text+"</tr>";
+        }
+    
+        tab_text=tab_text+"</table>";
+        // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+        tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+        tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+    
+        var ua = window.navigator.userAgent;
+        var msie = ua.indexOf("MSIE "); 
+    
+        var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+    
+        return (sa);
+    }
+
+    millisecondConversion(duration){
+    
+        // var seconds = Math.floor((duration / 1000) % 60);
+        // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+        // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+    
+        // hours = (hours < 10) ? 0 + hours : hours;
+        // minutes = (minutes < 10) ? 0 + minutes : minutes;
+        // seconds = (seconds < 10) ? 0 + seconds : seconds;
+      
+        // return hours + ":" + minutes + ":" + seconds;
+      console.log(duration)
+        var x = duration;
+        var d = moment.duration(x, 'milliseconds');
+        var hours = Math.floor(d.asHours());
+        var mins = Math.floor(d.asMinutes()) - hours * 60;
+        var mainMIn = (hours>=24)?0:mins;
+        return  hours + ":" + mainMIn;
+
+      
+    }
+
+    getReport(event){
+      console.log(event);
+        if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+        var deviceId: any;
+        var tpdata = event ; 
+        var that = this;
+        var fd = new Date(tpdata.fromDate);
+        var td  = new Date(tpdata.toDate);
+        that.minIdleTime = event.minidleT; 
+        
+        if(event.deviceArr.length==0){
+          deviceId=[];
+        }else{
+          deviceId= event.deviceArr;
+        }
+        this.deviceArr = deviceId; 
+        console.log('this.deviceArr',this.deviceArr);
+      
+        this.from_date = fd;
+        this.to_date = td;
+        console.log("b4");
+        // this.tabelObj.clear();
+        // var aa = [];
+        // this.tabelObj.rows.add(aa); 
+     
+          this.Load = true;
+        console.log(this.tabelObj);
+        this.tabelObj.draw();    
+          
+      
+      
+      }
+     
+    }
+
+     expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Idle Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.from_date).format('lll'); 
+//   var t_date =moment(this.to_date).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Idle Report ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Idle Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.from_date).format('lll'); 
+  outerThis.t_date =moment(this.to_date).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Idle Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        Device_Name:'Vehicle',
+        start_time:'Start Time',
+        end_time:'End Time',
+        idle_time:'Duration',
+        ac_status:'AC Status',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       Device_Name:pdfBody[j].device.Device_Name,
+        start_time:moment(new Date(pdfBody[j].start_time)).format('llll'),  
+        end_time:moment(new Date(pdfBody[j].end_time)).format('llll'), 
+        idle_time:this.millisecondConversion(pdfBody[j].device.idle_time),
+        ac_status:pdfBody[j].device.ac_status?pdfBody[j].device.ac_status:'N/A'
+      });
+    }
+    return body;
+  }
+
+
+    
+
+}
diff --git a/src/app/report/report component/ign-report/ign-report.component.html b/src/app/report/report component/ign-report/ign-report.component.html
new file mode 100644
index 0000000..3597a53
--- /dev/null
+++ b/src/app/report/report component/ign-report/ign-report.component.html	
@@ -0,0 +1,294 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+  </head>
+  <body>
+
+      <div class="upper">
+          <md-toolbar>My App</md-toolbar>
+        <md-toolbar flex style="background-color:white;width: 100%;" >
+          
+                <img src={{this.logo}}
+                style=
+                "width:12%;padding-top:20px">
+                <ul style="
+                padding: 30px 0% 0px 16%;
+                box-sizing: border-box;
+                flex-direction: row;
+                display: flex;
+                height: 65px;width:auto"  fxLayout="row" >
+                  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                    <a  class="pointer" (click)="soon()"><span id="d"><md-icon style="display: block;
+                      position: absolute;
+                      margin-left: 18px;">dashboard</md-icon>DASHBOARD</span></a>
+                  </li>
+                  <li style="line-height: 65px;width:auto;margin-left: 13px;margin-right: 6px;">
+                    <a class="pointer" (click)="group()">
+                        <span id="d">
+                          <md-icon style="display: block;position: absolute;margin-left: 10px;" id="active">group</md-icon>GROUPS</span>
+                      </a>
+                    </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="devi()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 8px;">devices</md-icon>VEHICLES</span></a> 
+                  </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="openNav()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 13px;">my_location</md-icon>TRACKERS</span></a>
+                  </li>
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" (click)="geo()" ><span id="d"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 22px;">blur_circular</md-icon>GEO FENCING</span></a>
+                  </li>
+  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a  class="pointer" [mdMenuTriggerFor]="appMenu3"  ><span id="ac"><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 13px;">report</md-icon><span id="active">REPORTS</span></span></a>
+                  </li>
+                  <!-- [y-position]="before" -->
+                  <md-menu class="test" #appMenu3="mdMenu" >
+                
+                    <a class="pointer" (click)="report()" >&nbsp;&nbsp;<span id="ac"><span id="active">Daily Report</span></span></a>
+                    <a class="pointer" (click)="report_speed()" >&nbsp;&nbsp;<span id="d">Speed Variation</span></a>
+                    <!-- <a class="pointer" (click)="ideal()" >&nbsp;&nbsp;<span id="d">Idle</span></a> -->
+                    <!-- <a class="pointer" (click)="ign()" >&nbsp;&nbsp;<span id="d">Ignition</span></a> -->
+                    <a class="pointer" (click)="trip_report()" >&nbsp;&nbsp;<span id="d">Trip Report</span></a> 
+                    <a class="pointer" (click)="summaryReport()" >&nbsp;&nbsp;<span id="d">Summary Report</span></a>
+                    <a class="pointer" (click)="geofancingReport()" >&nbsp;&nbsp;<span id="d">Geofencing Report</span></a>
+                    <a class="pointer" (click)="overspeed()" >&nbsp;&nbsp;<span id="d">Overspeeding Report</span></a>
+                    <a class="pointer" (click)="routeViolation()" >&nbsp;&nbsp;<span id="d">Route Violation Report</span></a>
+                    <a class="pointer" (click)="stoppage_report()" >&nbsp;&nbsp;<span id="d">Stoppage Report</span></a> 
+                    <a class="pointer" (click)="ignition_report()" >&nbsp;&nbsp;<span id="d">Ignition Report</span></a> 
+                    <a class="pointer" (click)="distance_report()" >&nbsp;&nbsp;<span id="d">Distance Report</span></a>
+ 
+                    <a class="pointer" (click)="alert_report()" >&nbsp;&nbsp;<span id="d">Alert Report</span></a>  
+ 
+                    </md-menu>
+  
+                  <li style="line-height: 65px;
+                  width:auto;margin-left: 7px;">
+                  <a class="pointer" *ngIf="cust" (click)="addcus()" ><md-icon style="display: block;
+                    position: absolute;
+                    margin-left: 14px;">person_add</md-icon>CUSTOMERS</a>
+                  </li>
+  
+                             </ul>
+                
+                           <ul fxShow fxHide.xs="false" fxHide.lg="true" fxHide.gt-sm="true" style="width:100%;padding-top: 15px;"> <!--for small screen -->
+                            <!--    <li  style="float:right;" >
+                                   <div class="dropdown">
+                                         <img src="../../assets/image/us.jpg" height=30px>
+                                         <div class="dropdown-content">
+                                             <b> <h4>  &nbsp;<p id="insert3"></p></h4></b>
+                                             <h6><p id="insert4"></p></h6>
+                                             &nbsp; <button type="reset" class="btn btn-default" >My Account</button>         
+                                              &nbsp;&nbsp;  <input type="submit" class="btn btn btn-success" style="float: left;" value="Log Out" (click)="openPop()"/>
+                                              
+                                                 
+                                            </div>
+                                       </div>
+                              
+                               </li> -->
+                               <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>            &nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                   <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                        </md-menu>
+                                
+                                <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                 <!--   <md-icon>more_vert</md-icon> -->
+                                   <img src="../../assets/image/us.jpg" height=24px>
+                                </button>
+                              <!--   <button md-icon-button [mdMenuTriggerFor]="appMenu2"  style="float:right;outline:none"> -->
+                                  <!--   <md-icon>more_vert</md-icon> -->
+                                <!--   <md-icon md-tooltip="Notification" style="float: right;padding-top:3%;color:#006699">notifications</md-icon>
+                                 </button>
+                                 <md-menu #appMenu2="mdMenu" class="my-full-width-menu"[overlapTrigger]="false">
+                                   <md-menu-header>&nbsp;&nbsp;<b>Notification</b><br></md-menu-header>
+                                  <div style="width:280px;height:61px">
+
+                                    <br>
+                                  </div>
+                                  
+                                  </md-menu> -->
+                         </ul>
+                               
+                        
+                     
+                             <ul fxShow fxHide.xs="true" fxHide.lt-md="true" fxHide.gt-sm="false" style="float:right;width:30%; margin-top: 3%;">
+                             <!--     <li style="width:27%;float:right">
+                                   <div class="dropdown">
+                                         <img src="../../assets/image/us.jpg" height=30px>
+                                         <div class="dropdown-content">
+                                             <b> <h4>  &nbsp;<p id="insert"></p></h4></b>
+                                             <h6><p id="insert2"></p></h6>
+                                             &nbsp; <button type="reset" class="btn btn-default" >My Account</button>                  
+                                                <button class="btn btn btn-success"(click)="openPop()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                                 
+                                            </div>
+                                       </div>
+                                 </li>
+                                 -->
+                                 <md-menu #appMenu="mdMenu" [overlapTrigger]="false">
+                                  <h5>&nbsp;&nbsp;{{fs}} {{ls}}&nbsp;&nbsp;</h5>
+                                  <h5>&nbsp;&nbsp;{{mb}}</h5>
+                                  <h5>&nbsp;&nbsp;{{or}}</h5><br>
+                                  &nbsp; <button *ngIf="logoutbut" type="reset" class="btn btn-default" (click)="myaccount()">My Account</button>&nbsp; <button *ngIf="dealer" class="w3-button w3-red"   (click)="mydealer()" >Dealer Account</button> &nbsp;             
+                                     <button *ngIf="logoutbut" class="btn btn btn-success"(click)="logout()" >&nbsp;&nbsp;&nbsp;Log Out&nbsp;&nbsp;&nbsp;</button>  &nbsp;
+                                 </md-menu>
+                                 
+                                 <button md-icon-button [mdMenuTriggerFor]="appMenu"  style="float:right;outline:none">
+                                  <!--   <md-icon>more_vert</md-icon> -->
+                                    <img src="../../assets/image/us.jpg" height=24px>
+                                 </button>
+                                 <app-notification></app-notification>
+
+                           </ul>
+                                 
+              
+             </md-toolbar>
+        </div>
+
+
+<!--
+<div class="container">
+  <div *ngFor = "let device of devices">
+    <div class="col-md-3">
+      {{device.Device_ID}}
+    </div>
+    <div class="col-md-3">
+        {{device.Serial_Num}}
+      </div>
+      
+    <div class="col-md-3">
+        {{device.Des}}
+      </div>
+
+      <div class="col-md-3">
+          {{device.Loca}}
+        </div>
+  </div>
+</div>-->
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+      <!--   <a href="http://localhost:4200/account">
+          <h6>PRODUCT LAUNCHER</h6></a> -->
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+         
+     <!--     <a href="http://localhost:4200/dashboard"><h6>DEVICES <md-icon style="float:right">devices</md-icon></h6></a> -->
+  </md-menu> 
+</div> 
+<!-- <div id="myNav" class="overlay">
+  <a href="javascript:void(0)" class="closebtn" (click)="closeNav()">&times;</a>
+  <div class="overlay-content">
+    
+          <h5 align="center">Current Location</h5>
+        <agm-map  [latitude]="18.602941" [longitude]="73.777147" [zoom]="10">
+     
+        <agm-marker [latitude]="18.602941" [longitude]="73.777147"></agm-marker>
+        </agm-map>
+        
+      
+
+    
+  </div>
+</div> -->
+
+
+    <div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
+    overflow-x: hidden;">
+    
+   <!--  <div  id="mySidenav" class="sidenav">
+        <a href="#" id="about"></a>
+        <a id="blog">
+    
+            <table class="table table-striped " style="overflow-y: hidden;
+               overflow-x: hidden;border: none;">
+               <thead>
+              
+                  <th  style="font-size: 12px" >Devices :</th>
+        
+               </thead>
+                <tbody>
+            
+             <tr *ngFor="let device of final ">
+                <td  style="cursor:pointer;font-size: 10px" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device)">{{ device.Device_Name }}</td>
+              </tbody> 
+            </table> 
+        </a>
+      </div> -->
+          </div>
+
+<div style="float:left; width: 99%; height:86vh;padding-left: 3%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div id="c44"  style="padding-top:1%;padding-bottom:2%">
+        
+ 
+      <md-select style="overflow-y: hidden;
+      overflow-x: hidden;" [name]="'typdev'" placeholder="Select Your Device" style="padding-left:5%;" [(ngModel)]="neww">
+      <md-option *ngFor="let option of options" [value]="option">
+        {{ option.viewValue }}
+      </md-option>
+        </md-select>  
+
+      </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+      
+    Select date : <!--  <angular2-date-picker [(ngModel)]="date1" [settings]="settings"></angular2-date-picker>  -->
+    <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'" [dateFormat]="'DD/MM/YYYY'"  [autoClose]="true"></owl-date-time>    
+
+      
+    </div>
+    <div id="c11"  style="padding-top:1%;padding-bottom:2%">
+        <button  (click)="creategraph(neww)" class="btn btn-primary w3-button/" style="margin-top:19px;margin-left:21%;cursor:pointer">Generate Graph</button></div><br>   
+        
+       
+    
+    
+    <br>
+     <br>
+     <div style="  width:100%;
+     height:66.67vh;">
+
+
+     <div style="display: block;">
+        <canvas baseChart  height=" 425px"
+        width= "874px"
+         
+                    [datasets]="lineChartData"
+                    [labels]="lineChartLabels"
+                    [options]="lineChartOptions"
+                    [colors]="lineChartColors"
+                    [legend]="lineChartLegend"
+                    [chartType]="lineChartType"
+                    (chartHover)="chartHovered($event)"
+                    (chartClick)="chartClicked($event)"></canvas>
+      
+    </div> 
+  </div><br>
+</div>
+
+
+  </body>
+</html>
diff --git a/src/app/report/report component/ign-report/ign-report.component.scss b/src/app/report/report component/ign-report/ign-report.component.scss
new file mode 100644
index 0000000..a88edc7
--- /dev/null
+++ b/src/app/report/report component/ign-report/ign-report.component.scss	
@@ -0,0 +1,1162 @@
+::-webkit-scrollbar {
+    display: none;
+    }
+  
+  .sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#ac{
+  color: rgb(38, 38, 90)
+}
+  ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+  }
+  .up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+  
+  }  
+  .middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .desc {
+    padding: 15px;
+    text-align: center;
+  }
+  #insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+  }
+  
+  .vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+  }
+  
+  .vertical-menu a:hover {
+    background-color: #ccc;
+  }
+  
+  .vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+  }
+  #c2 {
+    
+    
+  }
+  #c1 {
+    float:left;
+  
+  }
+  
+  body {margin:0}
+  
+  .icon-bar {
+    width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+  }
+  @media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+  }
+  .icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+  }
+  .icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+  }
+  
+  .icon-bar a:hover {
+    background-color: #000;
+  }
+  
+  .active {
+    background-color: #4CAF50 !important;
+  }
+  .iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+  }
+  .highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+  }
+  .circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+  }
+  .camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+  }
+  .speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+  }
+  .screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  }
+  .home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+  }
+  .home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+  } 
+  #c2{
+    //background:green;
+    float:right;
+  }
+  #c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+  }
+  
+  #c3 {
+    width: auto;
+     width:34%;
+    // background: red
+  }
+  .off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+  }
+  .newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+  }
+  #demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+  }
+  
+  #demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+  }
+  
+  #demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+  }
+  
+  #demo .parent:hover,
+  #demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+  }
+  
+  #demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+  }
+  
+  #demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+  }
+  
+  #demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  #demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+  }
+  
+  
+  #demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  
+  #demo .content ul a {
+    text-decoration: none;
+  }
+  
+  #demo .content li:hover {
+    background: #eee;
+    color: #333;
+  }
+  
+  #demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+  }
+  
+  #demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  .customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+  }
+  
+  .customClass .img-ul-upload {
+    background-color: #000 !important;
+  }
+  
+  .customClass .img-ul-clear {
+    background-color: #B819BB !important;
+  }
+  
+  .customClass .img-ul-drag-box-msg {
+    color: purple !important;
+  }
+  
+  .customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+  }
+  .img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+  }
+  .weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+  
+  @media screen and (min-width: 900px) {
+  .schlar{
+    display: none;
+  }
+  
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+  .mat-dialog-container {
+    max-width: none !important;
+  }
+  .sch{
+  
+  }
+  .schlar{
+  
+  }
+  .pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: .4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262F;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555
+}
+
+  .expansion-panel__content{
+    margin-left: 0% !important;
+  }
+  
+  
+  
+  .button2 {background-color: #008CBA;}
+  .ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    /* Absolute Center Spinner */
+  .loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  .example-full-width {
+    width: 30%;
+  }
+  #c11 {
+    width: 25%; 
+    float:left
+}
+#c22{
+    width: 25%; 
+    float:left
+}
+#c33 {
+    width: 25%; 
+    float:left
+    
+}
+#c44{
+    width: 25%; 
+    float:left
+}
+.example-full-width[_ngcontent-c4] {
+    width: 86% !important;
+}
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+ /*  .example-full-width[_ngcontent-c9] {
+    width: 79% !important;
+  } */
+  .left-sidebar, .right-sidebar {
+    width: 330px;
+    max-width: 330px;
+    min-width: 330px;
+}
+.outer-wrapper {
+    padding: 30px;
+}
+.center-content{
+    background: #ffffff;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 3px;
+    padding: 15px;
+}
\ No newline at end of file
diff --git a/src/app/report/report component/ign-report/ign-report.component.spec.ts b/src/app/report/report component/ign-report/ign-report.component.spec.ts
new file mode 100644
index 0000000..772ff92
--- /dev/null
+++ b/src/app/report/report component/ign-report/ign-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgnReportComponent } from './ign-report.component';
+
+describe('IgnReportComponent', () => {
+  let component: IgnReportComponent;
+  let fixture: ComponentFixture<IgnReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IgnReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IgnReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/ign-report/ign-report.component.ts b/src/app/report/report component/ign-report/ign-report.component.ts
new file mode 100644
index 0000000..6be412e
--- /dev/null
+++ b/src/app/report/report component/ign-report/ign-report.component.ts	
@@ -0,0 +1,375 @@
+import { Component, OnInit, EventEmitter,Output  } from '@angular/core';
+import {ContactService} from '../../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+
+@Component({
+  selector: 'app-ign-report',
+  templateUrl: './ign-report.component.html',
+  styleUrls: ['./ign-report.component.scss'],
+  providers: [ContactService]
+})
+export class IgnReportComponent implements OnInit {
+  myaccount(){
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '903px',
+      data: {}
+    });
+  
+    dialogRef.afterClosed().subscribe(result => {
+  
+      if(result == "succ"){
+        // console.log("Updated")
+      }
+  
+    });
+  }
+  addcus(){
+    this.router.navigateByUrl("add");
+  }
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+openNav() {
+  /*  document.getElementById("myNav").style.width = "100%";
+*/
+   this.router.navigateByUrl("location");
+
+}
+
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+devi(){
+  this.router.navigateByUrl("dashboard");
+
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+new(){
+  this.router.navigateByUrl("new");
+  
+}
+cond:Boolean = false;
+point : any = 0;
+ a(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+distance_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/distance_report");
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+group(){
+  this.cond = false
+  this.router.navigateByUrl("group_view");
+}
+
+
+
+_lineChartData:any;
+public info: string;
+public prevDatasets;
+
+options = [];
+ign(){
+  this.router.navigateByUrl("device-report/ign-report");
+
+}
+
+ideal(){
+  this.router.navigateByUrl("device-report/ideal-report");
+}
+from:any;
+to:any;
+too:any;
+neww:any;
+before:any;
+creategraph(a){
+  this.too = new Date(this.date1).setHours(23,59,59,999) 
+  this.to = new Date(this.too).toISOString()
+  var d = new Date(this.date1);
+  let aa = d.setHours(0,0,0,0)
+  this.from = new Date(aa).toISOString();
+
+  let r = new Date(this.date1).toISOString();
+  // console.log(r);
+  this.Load = true;
+  this.contactService.ignitionGraph(a.did,this.from,this.to).subscribe(
+        
+    data => {
+      this.Load = false;
+      this.device_data = data 
+     //console.log(this.device_data); 
+     this.lineChartLabels.length = this.device_data.length;  
+     this.getdata(this.device_data)
+  
+    });
+  
+  }
+  mydealer(){
+    window.localStorage['token'] =  window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if(window.localStorage['DataLoaded'] = 'True'){
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+     // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+getdata(final){
+  let fi = [];
+  let time = [];
+  this.lineChartLabels.length = 0;
+  for(var q=0;q<final.length;q ++){
+    fi.push(final[q].ACC);
+    let t = new Date(final[q].insertionTime).toLocaleTimeString();
+   // console.log(t);
+    //let k = JSON.stringify(final[q].time).split("T")[1].split(".")[0];
+    this.lineChartLabels.push(t)
+  }
+ this.Load = false;
+  this.lineChartData = [{
+    label: "Ignition",
+    data: fi
+  }];
+  
+
+
+}
+
+
+
+
+ // lineChart
+ public lineChartData:Array<any> = [
+  {data: [0, 0, 0, 0, 0, 0, 0], label: 'Ignition'},
+];
+
+public lineChartLabels:Array<any> = ['','','','','','',''];
+public lineChartOptions:any = {
+  responsive: true,
+  scales: {
+    xAxes: [{
+      ticks: {
+        beginAtZero: false,
+        max: 6000,
+        min: 0
+      }
+    }]  
+  }
+
+};
+public lineChartColors:Array<any> = [
+  { // grey
+    backgroundColor: 'rgba(148,159,177,0.2)',
+    borderColor: 'rgba(148,159,177,1)',
+    pointBackgroundColor: 'rgba(148,159,177,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+  },
+  { // dark grey
+    backgroundColor: 'rgba(77,83,96,0.2)',
+    borderColor: 'rgba(77,83,96,1)',
+    pointBackgroundColor: 'rgba(77,83,96,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(77,83,96,1)'
+  },
+  { // grey
+    backgroundColor: 'rgba(148,159,177,0.2)',
+    borderColor: 'rgba(148,159,177,1)',
+    pointBackgroundColor: 'rgba(148,159,177,1)',
+    pointBorderColor: '#fff',
+    pointHoverBackgroundColor: '#fff',
+    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+  }
+];
+public lineChartLegend:boolean = true;
+public lineChartType:string = 'line';
+
+
+
+// events
+public chartClicked(e:any):void {
+  // console.log(e);
+}
+
+public chartHovered(e:any):void {
+  // console.log(e);
+}
+
+  
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  date1:any = new Date();
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  finall:any;
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+  ngOnInit() {
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+  
+  this.logo=window.localStorage['logo'];
+  this.text=window.localStorage['text'];
+    this.date = new Date
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+        /*  this.final = this.devicess.devices[0]; */
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+
+          }
+
+        // }
+
+     
+
+      });
+
+    // ignitionGraph
+  }
+
+}
diff --git a/src/app/report/report component/ignition-report/ignition-report.component.html b/src/app/report/report component/ignition-report/ignition-report.component.html
new file mode 100644
index 0000000..c747404
--- /dev/null
+++ b/src/app/report/report component/ignition-report/ignition-report.component.html	
@@ -0,0 +1,131 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Ignition Report' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> >
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">{{'Vehicle' | translate}} </th>
+                        <th style="text-align:left;">{{'ON/OFF' | translate}}</th>
+                        <th style="text-align:left;">{{'Date Time' |translate}}</th>
+                        <th style="text-align:left;">{{'Location' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+<!-- 
+
+      <app-all-menus></app-all-menus>
+        <div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <p class="headStyle">{{'Ignition Report' | translate}}</p>
+    <div class="InputStyle" style="padding-bottom:30px">
+      <div class="row">
+        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
+       
+          <select id="select" multiple="multiple">
+            <option *ngFor="let option_1 of options" value={{option_1.value}}>{{ option_1.value }}</option>
+          </select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button (click)="ignition_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+         
+            <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+         
+          </div>
+      </div>
+    </div>
+
+    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
+    <table class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+     
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+      
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover" style="display:none;">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: centser ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  -->
\ No newline at end of file
diff --git a/src/app/report/report component/ignition-report/ignition-report.component.scss b/src/app/report/report component/ignition-report/ignition-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/ignition-report/ignition-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/ignition-report/ignition-report.component.spec.ts b/src/app/report/report component/ignition-report/ignition-report.component.spec.ts
new file mode 100644
index 0000000..fe73a94
--- /dev/null
+++ b/src/app/report/report component/ignition-report/ignition-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IgnitionReportComponent } from './ignition-report.component';
+
+describe('IgnitionReportComponent', () => {
+  let component: IgnitionReportComponent;
+  let fixture: ComponentFixture<IgnitionReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IgnitionReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IgnitionReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/ignition-report/ignition-report.component.ts b/src/app/report/report component/ignition-report/ignition-report.component.ts
new file mode 100644
index 0000000..8f13eaa
--- /dev/null
+++ b/src/app/report/report component/ignition-report/ignition-report.component.ts	
@@ -0,0 +1,895 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { environment } from '../../../../environments/environment';
+import { SearchFilterPipe } from '../../../search-filter.pipe'
+
+
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+declare var _:any;
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-ignition-report',
+  templateUrl: './ignition-report.component.html',
+  styleUrls: ['./ignition-report.component.scss']
+})
+export class IgnitionReportComponent implements OnInit {
+  ignition_data: any =[];
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+  before:any;
+  finalArr=[]
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate=new Date()
+  options=[];
+  logo:any;
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+  tabelObj:any; 
+  tableFlag: boolean=true;
+  identifier : String = "ignition_report";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) { 
+    this._service.invokeEventForignitionReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      }); 
+  
+  }
+ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+ 
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // this.testTable();
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log("ignition option",this.options);
+    //       // let that = this;
+    //       // setTimeout(()=>{
+    //       //   that.loadropdown();
+    //       // },100)  
+      
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+    //  var fDate:any;
+    //  var tDate:any;
+    //  this.ignition_report(fDate,tDate);
+    this.testTable();
+  
+    
+     
+  }
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+  //   setTimeout(() => {
+  //     $('#select').multipleSelect({
+  //       width: 200,
+  //       placeholder: 'Select Vehicle.....',
+  //       filter: true,
+  //     })
+  //    // $('#select').show();
+  //   }, 100);
+
+
+  // }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+//   }
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+  
+  
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+
+//   ignition_report(Fromdate,todate){
+  
+//     var deviceId;
+//      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+//       if(this.deviceArr.length==0){
+//         deviceId=[];
+//       }else{
+//         deviceId= this.deviceArr;
+//       }
+//     let f_date = Fromdate.toISOString();
+//     let t_date =  todate.toISOString();
+//     this.contactService.ignitionReport(f_date,t_date,deviceId,this.uId)
+//     // console.log(option);
+//     this.uId =  this.useridd
+//     this.report_to_show=[];
+//     var outerThis = this;
+//     this.Load = true;
+ 
+//   this.contactService.ignitionReport(f_date,t_date,deviceId,this.useridd)
+//   .subscribe(res=>{
+//     this.ignition_data = res;
+//     console.log('this.ignition_data',this.ignition_data); 
+//     this.Load = false;
+//     if(this.ignition_data.length==0){
+//       this.errorDialog=true
+//x        this.errorMsg="No data Available"
+      
+//     }else{
+//       this.errorDialog=false;
+//       if(this.tableFlag === true){
+//         this.testTable(); 
+    
+//       }else{
+       
+//          this.tabelObj.clear();
+//          this.tabelObj.rows.add(this.ignition_data); 
+//          this.tabelObj.draw();      
+       
+//       }
+//       this.tableFlag = false;
+
+//     }
+    
+//     // console.log("ignition option",this.ignition_data);
+//   },err=>{
+//     this.Load = false;
+//   })
+   
+// }
+// XLurl:any;
+// export_to_XL(Fromdate,todate,option){
+  
+//   // console.log("Excel report");
+//   // console.log("thisisoption",option)
+//   let f_date = Fromdate.toISOString();
+//   let t_date = todate.toISOString();
+//   this.uId = option.value;
+//   // console.log(this.uId);
+//   this.contactService.ignXLreport(f_date,t_date,this.uId,this.useridd)
+//     .subscribe(res=>this.downloadXL(res)),
+//                 error =>
+//                  console.log("Error downloading the file."),
+//                 () => console.info("OK");
+//       // console.log(res);
+//       // let filePath = res;
+//       // this.XLurl= this.dev_url +"/"+res.filename;
+//       // window.open(this.XLurl);
+//       // this.t.href = this.XLurl;
+//       // console.log(this.XLurl);
+    
+
+// }
+
+// downloadXL(filepath){
+//   // console.log(filepath.filename);
+//   this.XLurl= this.dev_url+"/"+filepath.filename
+//   // console.log(this.XLurl);
+//   // var blob = new Blob(this.XLurl);
+//   // this.url= window.URL.createObjectURL(blob);
+//   window.location.href = this.XLurl;
+// }
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+optionVal:any;
+
+// filterStates(val) {
+//   if (val) {
+//     const filterValue:any = val
+//      this.dataSelect = this.options.filter( function(d){
+//       return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;    
+//     });
+//     return this.dataSelect;
+//   }
+// }
+// autocompleteSearchObject = function autocompleteSearchFilter(err: any,searchResult:string){
+//   console.log("Inside function");
+// }
+
+addressLink = "";
+getlink(report){
+  // console.log("inside function");
+  // console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+
+getAdd(latitude,longitude){
+  var latti =0;
+  var longi = 0
+  if(latitude != undefined){
+    latti = latitude;
+
+  }
+  if(longitude != undefined){
+    longi = longitude
+
+  }
+    return 'https://maps.google.com/?q='+ latti + ',' + longi ; 
+}
+
+// callfunction(): void {
+//   // this.Load = true;
+//   this.tabelObj.draw();
+// }
+
+getReport(event){
+  
+  console.log("inside function");
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+  
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+    // this.tabelObj.draw();  
+    // this.tabelObj.draw();
+    // if(this.ajaxCount != 0){
+ 
+    // }
+    // this.ajaxCount = 1 ; 
+  }
+ 
+}
+
+
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+    
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true;
+             
+              // dataTablesParameters.find._u = that.useridd;
+            
+              // dataTablesParameters.find._u = user;
+
+              // if(that.deviceArr.length != 0){
+         
+                // dataTablesParameters.find.vname = deviceId;
+              // }
+            // if (that.Fromdate) {
+                // var fdate = new Date(that.Fromdate).toISOString()      
+                // dataTablesParameters.find.f_date = fdate    
+                // dataTablesParameters.find.f_date =  from_date;    
+            // };
+
+            // if (that.todate) {
+              // var fdate = new Date(that.todate).toISOString()      
+              // dataTablesParameters.find.t_date = fdate     
+                // dataTablesParameters.find.t_date = to_date  ;
+          // };
+          // this.deviceArr = deviceId; 
+         
+            var from_date = new Date(that.Fromdate).toISOString();
+            var to_date = new Date(that.todate).toISOString();
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            that.finalArr=[]
+            suburl += "/notifs/ignitionReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+            if(that.deviceArr.length != 0){  
+              suburl +='&device='+that.deviceArr;
+            }
+
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+              that.contactService.get(suburl).subscribe((resp:any) => {   
+                // console.log(ignReport.length);  
+                that.finalArr=resp
+                // that.getWorkingHour(resp);
+                that.Load = false;
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+
+            }else{
+              let ta = [];
+              that.Load = false;
+              callback({data : ta });
+            }
+          
+        },  
+      
+          "columns": [
+              {
+                  "data": "vehicleName",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "switch",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "timestamp",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var expDate = new Date(data);
+                    return data ? (moment(expDate).format('llll')) : "";  
+                
+                  }
+              }, 
+        
+              
+            {
+              "data": "address",
+              "defaultContent": "_id",
+              render: function(data, type, row) {        
+                  let lat = row.lat;
+                  let long = row.long;        
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                  if(data){
+                    return data ;
+                  }else{
+                    return addressLink;     
+                  }
+              }
+          }                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+          { "width": "70px", "targets": 3 },
+       
+          ] 
+      });
+
+  });
+
+}
+
+getAddress(latLng){
+  console.log(latLng);
+  
+}
+
+
+exportPdf(){
+
+
+  html2canvas(document.getElementById('deviceTable'), {
+     onrendered: function (canvas) {
+        var data = canvas.toDataURL();
+        console.log(data);
+        var docDefinition = {
+            content: [{
+                image: data,
+                width: 1000
+            }]
+        };
+        pdfMake.createPdf(docDefinition).download("Table.pdf");
+    }
+});
+
+
+}
+
+// getWorkingHour(resp){
+//   console.log(resp);  
+//   var data = resp ;
+//   var finalObj = {};
+//   var that = this;
+//   var temp = {}, switchMap = { 'OFF': 'OFF-ON_time', 'ON': 'ON-OFF_time' }, switchParam = ['OFF', 'ON'];
+//   var process = function (param, temp) {
+//     // console.log('temp',temp);
+//     for (var j = 0; j < param.length; j++) {
+//       if (temp[0].switch == param[j]) {
+//         if (!finalObj[data[i].vehicleName])
+//           finalObj[data[i].vehicleName] = {};
+//         if (temp.length == 2) {
+//           if (!finalObj[data[i].vehicleName][switchMap[param[j]]])
+//           finalObj[data[i].vehicleName][switchMap[param[j]]] = 0;
+//           finalObj[data[i].vehicleName][switchMap[param[j]]] += new Date(temp[0].timestamp).getTime() - new Date(temp[1].timestamp).getTime();
+//           // console.log('finalObj',finalObj);
+//           // console.log(finalObj[data[i].vehicleName][switchMap[param[j]]]);
+
+//           console.log('finalObj',finalObj);
+//           temp.splice(0, 1);
+//         }
+//       }     
+//     }
+//   }
+//   for (var i = 0; i < data.length; i++) {
+//     if (!temp[data[i].vehicleName])
+//     temp[data[i].vehicleName] = [];
+//     temp[data[i].vehicleName].push(data[i]);
+//     process(switchParam, temp[data[i].vehicleName]);
+//   }
+//     // console.log('finalObj',finalObj);
+
+// }
+
+expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Ignition Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.Fromdate).format('lll'); 
+//   var t_date =moment(this.todate).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Ignition ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Ignition Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Ignition Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle',
+        switch:'ON/OFF',
+        timestamp:'Date Time',
+        location:'Location',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleName:pdfBody[j].vehicleName,
+        Device_ID:pdfBody[j].Device_ID,
+        switch:pdfBody[j].switch,
+        timestamp:pdfBody[j].timestamp?(moment(pdfBody[j].timestamp).format('llll')):'N/A',
+        location:pdfBody[j].address?pdfBody[j].address:'N/A'
+        // today_running:this.millisecondConversion(parseInt(pdfBody[j].today_running)),
+        // today_stopped:this.millisecondConversion(parseInt(pdfBody[j].today_stopped)),
+        // t_idling:this.millisecondConversion(parseInt(pdfBody[j].t_idling)),
+        // t_ofr:this.millisecondConversion(parseInt(pdfBody[j].t_ofr)),
+        // t_noGps:this.millisecondConversion(parseInt(pdfBody[j].t_noGps)),
+        // today_trips:pdfBody[j].today_trips,
+        // maxSpeed:pdfBody[j].maxSpeed,
+        // startAddress:pdfBody[j].startAddress,
+        // endAddress:pdfBody[j].endAddress,
+
+      });
+    }
+    return body;
+  }
+
+
+
+
+
+
+
+
+}
diff --git a/src/app/report/report component/maintanance/maintanance.component.html b/src/app/report/report component/maintanance/maintanance.component.html
new file mode 100644
index 0000000..9c9e780
--- /dev/null
+++ b/src/app/report/report component/maintanance/maintanance.component.html	
@@ -0,0 +1,43 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Maintenance Report' | translate}}</h4>
+    </div>
+  </div>  
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button>->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">{{'Service Date' | translate}} </th>
+                        <th style="text-align:left;">{{'Device name' | translate}} </th>
+                        <th style="text-align:left;">{{'IMEI' | translate}} </th>
+                        <th style="text-align:left;">{{'ODO' | translate}}</th>
+                        <th style="text-align:left;" title="work performed and service schedule">{{'work performed' |translate}}</th>
+                        <th style="text-align:left;">{{'performer' | translate}}</th>
+                        <th style="text-align:left;">{{'Additional notes' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
diff --git a/src/app/report/report component/maintanance/maintanance.component.scss b/src/app/report/report component/maintanance/maintanance.component.scss
new file mode 100644
index 0000000..efc4dde
--- /dev/null
+++ b/src/app/report/report component/maintanance/maintanance.component.scss	
@@ -0,0 +1,86 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/maintanance/maintanance.component.spec.ts b/src/app/report/report component/maintanance/maintanance.component.spec.ts
new file mode 100644
index 0000000..13b4be5
--- /dev/null
+++ b/src/app/report/report component/maintanance/maintanance.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MaintananceComponent } from './maintanance.component';
+
+describe('MaintananceComponent', () => {
+  let component: MaintananceComponent;
+  let fixture: ComponentFixture<MaintananceComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MaintananceComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MaintananceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/maintanance/maintanance.component.ts b/src/app/report/report component/maintanance/maintanance.component.ts
new file mode 100644
index 0000000..3bcf4b7
--- /dev/null
+++ b/src/app/report/report component/maintanance/maintanance.component.ts	
@@ -0,0 +1,391 @@
+import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { ContactService } from '../../../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog } from '@angular/material';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+@Component({
+  selector: 'app-maintanance',
+  templateUrl: './maintanance.component.html',
+  styleUrls: ['./maintanance.component.scss']
+})
+export class MaintananceComponent implements OnInit {
+  identifier : String = "maintanance_report";
+  superAdmin: any;
+  useridd: any;
+  custtype: any;
+  finalArr=[]
+  optionVal:any;
+  deviceArr: any=[];
+  tabelObj: any;
+  Fromdate: Date;
+  todate: Date;
+  Load: boolean;
+  data_descip:any
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) {
+    this._service.invokeEventFormaintanceReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;  
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.testTable();
+  }
+
+  tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+getReport(event){
+  
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+ } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+  
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+    // this.tabelObj.draw();  
+    // this.tabelObj.draw();
+    // if(this.ajaxCount != 0){
+ 
+    // }
+    // this.ajaxCount = 1 ; 
+  }
+ 
+}
+
+
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+    that.tabelObj = $('#deviceTable').DataTable({
+      dom: 'lBftip',
+      buttons: [
+        'copy',
+        'print',
+        'excel'
+      ],       
+        "processing": true,
+        "searching": false,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters: any, callback) => {
+          
+            dataTablesParameters.op = {};
+            dataTablesParameters.select = [];
+            dataTablesParameters.find = {};
+
+            dataTablesParameters.find['$and'] = [];
+            var userFilter = {};
+            userFilter['$or'] =[ {user : that.useridd}, {created_by :that.useridd} ]
+            dataTablesParameters.find['$and'].push(userFilter);
+
+            // dataTablesParameters.find['$or'] = [currUser,admin]  
+
+            dataTablesParameters.columns = [
+          
+          {data:"_id"},
+          {data:'user.first_name'},
+          {data:'user.last_name'},
+          {data:'device.Device_Name'},
+          {data:'device.Device_ID'},
+          {data:'reminder_date'},    
+          {data:'notification_type.SMS'},
+          {data:'notification_type.EMAIL'},
+          {data:'notification_type.PUSH_NOTIFICATION'},
+          {data : 'reminder_type'},
+          {data :'date_of_service'},
+          {data : 'performed_by'},
+          {data : 'prior_reminder'},
+          {data : 'odo'},
+          {data:'note'},
+          {data:'status'},
+            ]            
+           
+          
+            var reminder_date={};
+        
+       
+            // dataTablesParameters.find.user = that.useridd;
+            if(that.deviceArr.length != 0){
+              console.log('that.deviceArr',that.deviceArr);
+              var dev_in = {device : {'$in': that.deviceArr}};
+            
+                dataTablesParameters.find['$and'].push(dev_in);
+                }
+                 if (that.Fromdate) {
+                  var fdate = new Date(that.Fromdate).toISOString()                      
+                   reminder_date['$gte']=fdate  
+                
+
+              };
+              if (that.todate) {
+                var tdate = new Date(that.todate).toISOString()        
+                 reminder_date['$lte'] =  tdate     ;
+                
+            };
+            var r_d ={};
+            r_d['reminder_date'] = reminder_date ; 
+            dataTablesParameters.find['$and'].push(r_d);
+       
+          
+              var r_t = {};
+              r_t['status'] = 'Completed' ;
+              dataTablesParameters.find['$and'].push(r_t);               
+            
+            // dataTablesParameters.find.user = that.useridd ;       
+
+            
+           console.log('dataTablesParameters.find=>',dataTablesParameters.find);
+            if(that.deviceArr.length != 0 && that.Fromdate && that.todate){
+            // that.minIdleTime =      
+            var suburl = "";
+            that.finalArr=[]
+            suburl += "/reminder/reminderdatatable";
+            that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {     
+                console.log("Response from datatable=>",resp);     
+                that.Load= false;    
+                that.finalArr=resp.data     
+                callback(resp);
+            }, err => {                
+              that.Load= false;    
+         
+            });
+          }else{
+             this.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+              that.Load= false; 
+               callback({data : []});
+          }
+            // }else{
+            //   that.Load= false;    
+            //   let message1="Please Select Device";
+            //   let action:any;
+            //   that.snackBar.open(message1, action, {
+            //     duration: 5000,
+                
+            //   });  
+            //   return;
+            // }
+           
+                                      
+     
+        },  
+ 
+
+        "columns": [
+            {
+                "data": "date_of_service",
+                "visible" :true,
+                "render": function(data, type, row) {
+              
+                 return data?moment(data).format('llll'):'NA';
+                    
+                }
+            },
+            {
+                "data": "device.Device_Name",
+                "visible" :true,
+                render: function(data, type, row) {
+                    
+                    return data?data:'';           
+                }
+            },
+            {
+                "data": "device.Device_ID",
+                "visible" :true,
+                render: function(data, type, row) {
+                  console.log('data',data);                                      
+                    return data?data:'';
+                }
+            }, 
+            {
+              "data": "odo",
+              "visible" : true,
+              render: function(data, type, row) {  
+                
+                  return data?data:"NA";
+              }
+          },    
+            
+            {
+              "data": "reminder_type",
+              "visible" :true,
+              render: function(data, type, row) {             
+                  return data?data:'--';
+              }
+          },         
+          { 
+            "data": "performed_by",
+            "visible" :true,
+            render: function(data, type, row) {
+          return data?data:''
+            }
+        }, 
+        { 
+          "data": "note",
+          "visible" :true,
+          render: function(data, type, row) {
+           return data?data:''
+          }
+      }, 
+  
+                
+        ],   
+    });
+
+  });
+
+}
+
+
+expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+downloadPdf() {
+    let fileName =
+      "Maintanace Report" +
+      new Date().getTime() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+
+    var doc = new jsPDF("p", "pt", pdfsize);
+  
+  doc.setFontSize(15);
+  doc.text('Maintanace Report ', 20, 30);
+    doc.setFontStyle("arial");
+    var header = function(data) {
+    doc.setFontSize(15);
+    doc.setTextColor(40);
+    doc.setFontStyle('normal');
+   
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    startY: doc.autoTableEndPosY() + 20
+  };
+
+    doc.autoTable({
+      head: this.headRows(),
+      // margin: { top: 80 },
+      body: this.bodyRows(this.finalArr.length, this.finalArr),
+      options
+      
+    });
+    doc.save(fileName);
+  }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        date_of_service:'Service Date',
+        Device_Name:'Device Name',
+        Device_ID:'IMEI',
+        odo:'ODO',
+        reminder_type:'Work Performed',
+        performed_by:'Performer',
+        note:'Additional Notes'
+      
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       date_of_service:pdfBody[j].date_of_service,
+       Device_Name:pdfBody[j].device.Device_Name,
+       Device_ID:pdfBody[j].device.Device_ID,
+       odo:pdfBody[j].odo?pdfBody[j].odo:'N/A',
+       reminder_type:pdfBody[j].reminder_type?pdfBody[j].reminder_type:'--',
+       performed_by:pdfBody[j].performed_by?pdfBody[j].performed_by:'--',
+       note:pdfBody[j].note?pdfBody[j].note:'--'
+      });
+    }
+    return body;
+  }
+
+
+}
+
+             
+          
\ No newline at end of file
diff --git a/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.html b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.html
new file mode 100644
index 0000000..f7989c5
--- /dev/null
+++ b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.html	
@@ -0,0 +1,95 @@
+<div class="topDiv">
+  <div id="toast">
+    <!-- <div id="desc">{{data_descip}}</div> -->
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="col-2" style="position: absolute;top: -7px;">
+        <md-select [(ngModel)]="travelPat_duration.interval" 
+          placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
+          <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
+            {{path.label}}
+          </md-option>
+        </md-select>
+      </div>
+      <h4>{{'Travel Path Report' | translate}}</h4>
+      <flash-messages style="float: center;"></flash-messages>
+      <!-- <button class="btn btn-danger pull-right" style="position: absolute;top: -2px; right: 23px;" (click)="downloadPdf()">Export PDF</button> -->
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+
+
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+         
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div class="loading" *ngIf="Load">Loading&#8230;</div>
+              <div style="width: 100%;height:84vh;">
+                <table id="travelPath" cellspacing="0" style="width: 100%;font-size: 14px;">
+                  <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                      <th style="text-align: left;">{{'IMEI' | translate}}</th>
+                      <th style="text-align: left;">{{'Date' | translate}}</th>
+                      <th style="text-align: left;">{{'ODO (K.M)' | translate}}</th>
+                      <th style="text-align: left;">{{'DISTANCE (K.M)' | translate}}</th>
+                      <th style="text-align: left;">{{'SPEED (K.M/Hr)' | translate}}</th>
+                      <th style="text-align: left;">{{'AVG SPEED' | translate}}</th>
+                      <th style="text-align: left;">{{'EXT BATTERY' | translate}}</th>
+                      <th style="text-align: left;">{{'TEMP' | translate}}</th>
+                      <th style="text-align: left;">{{'CUMM DISTANCE' | translate}}</th>
+                      <th style="text-align: left;">{{'LOCATION' | translate}}</th>
+                      <th style="text-align: left;">{{'ADDRESS' | translate}}</th>
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+            </div>
+          </div>
+    
+        </div>
+    
+      </div>
+    </div>
+
+
+</div>
+
+  <table id="headerTable" style="border: 1px solid black;width: 100%;
+      border-collapse: collapse;position: absolute;top: -62px;">
+    <!-- <tr style="text-align:center">
+      <div style="text-align:center">Table</div>
+    </tr> -->
+    <tr style="height:30px;border-top:1px solid black;">
+      <td>
+        <span style="font-weight: 700;">Name</span>: {{device_name}}
+      </td>
+      <td>
+        <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <span style="font-weight: 700;">Start Time</span>:{{f_date}}
+         <!-- {{startTime}} -->
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Time</span>: {{t_date}}
+        <!-- {{endTime}} -->
+      </td>
+    </tr>
+    <tr style="height:30px;border-top:1px solid black">
+      <td>
+        <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
+      </td>
+      <td>
+        <span style="font-weight: 700;">End Address</span>: {{endAddress}}
+      </td>
+    </tr>
+  </table>
diff --git a/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.scss b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.spec.ts b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.spec.ts
new file mode 100644
index 0000000..4a71ee6
--- /dev/null
+++ b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewTravelPathReportComponent } from './new-travel-path-report.component';
+
+describe('NewTravelPathReportComponent', () => {
+  let component: NewTravelPathReportComponent;
+  let fixture: ComponentFixture<NewTravelPathReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewTravelPathReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewTravelPathReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.ts b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.ts
new file mode 100644
index 0000000..3a273b3
--- /dev/null
+++ b/src/app/report/report component/new-travel-path-report/new-travel-path-report.component.ts	
@@ -0,0 +1,797 @@
+import { Component, OnInit } from '@angular/core';
+import { MdSnackBar } from '@angular/material';
+declare var jsPDF: any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+import * as moment from 'moment';
+import { ContactService } from '../../../contact.service';
+import { ReportService } from '../../report.service';
+@Component({
+  selector: 'app-new-travel-path-report',
+  templateUrl: './new-travel-path-report.component.html',
+  styleUrls: ['./new-travel-path-report.component.scss']
+})
+export class NewTravelPathReportComponent implements OnInit {
+  tabelObj: any;
+  pathDuration = [
+    { label: "1 Minutes", interval: "1" },
+    { label: "5 Minutes", interval: "5" },
+    { label: "10 Minutes", interval: "10" },
+    // {label  :"45 Minutes",interval : "45"},
+    // {label  :"60 Minutes",interval : "60"}
+
+  ];
+  Load: boolean;
+  Fromdate: any;
+  noteForpdf
+  todate: any;
+  useridd: any;
+  pathReport = []
+  travelPat_duration = { label: "10 Minutes", interval: "10" };
+  skip: any;
+  finalArr = []
+  reportArr: any[];
+  reportArr1: any[]
+  firstcall: boolean;
+  lastcall: boolean;
+  date: any;
+  device_id: any
+  device_name: any;
+  supAdmin: any;
+  logo1: string;
+  constructor(private contactService: ContactService, private _service: ReportService, public snackBar: MdSnackBar) {
+
+    this.supAdmin = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+    this._service.invokeEventFortravelPathReportt.subscribe(value => {
+      if (value) {
+        this.getReport(value);
+      }
+    });
+  }
+
+  ngOnInit() {
+    var user = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isSuperAdmin ? JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id : this.supAdmin
+    this.contactService.get('/users/shareProfileImage?uid=' + user).subscribe((res: any) => {
+      // console.log(res);
+
+      if (res.imageDoc.length != 0) {
+        var str = res.imageDoc[0]
+        var splitStr = str.split('/');
+        var concatStr = '';
+        for (var i = 1; i < splitStr.length; i++) {
+          if (i > 0) {
+            var tt = splitStr[i];
+            concatStr += '/' + tt;
+          }
+        }
+        this.logo1 = 'https://www.oneqlik.in' + concatStr
+
+
+      }
+
+    })
+    this.testTable()
+  }
+
+
+  testTable() {
+    const that = this;
+    $(document).ready(function () {
+      that.tabelObj = $('#travelPath').DataTable({
+
+        "processing": false,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        order: [[0, 'desc']],
+        responsive: true,
+        "scrollY": '60vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "rowCallback": function (row: Node, data: any | Object, index: number) {
+
+
+        },
+        ajax: (dataTablesParameters, callback) => {
+
+          if (that.device_id && that.Fromdate && that.todate) {
+            that.Load = true;
+            var payload = {
+              "to": new Date(that.todate).toISOString(),
+              "from": new Date(that.Fromdate).toISOString(),
+              "device": that.device_id,
+              "interval": that.travelPat_duration.interval
+            }
+            var suburl = "";
+            var limit = 26;
+            suburl += "/user_trip/StoppageLogs?date=" + that.date + "&device=" + that.device_id
+            // if(that.deviceArr.length != 0){  
+            //   suburl +='&device='+that.deviceArr;
+            // }
+            that.contactService.getTravel_path_report(payload).subscribe((resp: any) => {
+              clearTimeout(this.clear_interval);
+
+              that.reportArr = resp;
+              that.reportArr = resp.filter(function (el) {
+                return el != null;
+              });
+
+
+              let last = { speed: '' };
+              let result = [];
+
+              for (let i = 0; i < that.reportArr.length; i++) {
+
+                let char = that.reportArr[i];
+                if (char.speed !== last.speed) {
+                  var cum_distance = parseFloat(that.reportArr[i].odo) - parseFloat(that.reportArr[0].odo);
+                  char.cum_distance = Math.abs(parseFloat(cum_distance.toFixed(2)))
+
+                  if (i == 0) {
+                    char.avgSpeed = 0.00;
+                  } else {
+                    var avgSpeed = parseFloat(that.reportArr[i].odo) - parseFloat(that.reportArr[i - 1].odo);
+                    char.avgSpeed = Math.abs(parseFloat((avgSpeed / 0.166).toFixed(2)));
+                  }
+
+                  if (i == 0) {
+                    char.distanceFromPrevious = 0.00;
+                  } else {
+                    var distanceFromPrevious = parseFloat(that.reportArr[i].odo) - parseFloat(that.reportArr[i - 1].odo);
+                    char.distanceFromPrevious = Math.abs(parseFloat(distanceFromPrevious.toFixed(2)));
+                  }
+                  // char.avgSpeed = that.getavgSpeed(i)
+                  // char.distanceFromPrevious = that.get_distance(i)
+                  result.push(char);
+                  last = char;
+                }
+              }
+
+              that.reportArr1 = result
+
+
+              if (that.reportArr1.length != 0) {
+                var j = 0;
+                for (let i = 0; i < resp.length; i++) {
+                  if (resp[i] != null) {
+                    resp[i].Device_name = that.device_name;
+                    that.pathReport.push(resp[i]);
+                  } else {
+                  }
+                }
+
+                that.finalArr = [];
+                for (var i = 0; i < that.reportArr1.length; i++) {
+                  that.clocation_1(that.reportArr1[i], function (err, succ) {
+                    if (err) {
+                      console.log(err);
+                      j++;
+                    } else {
+                      // console.log(succ);
+                      succ['index'] = j
+                      that.finalArr.push(succ);
+                      // console.log(that.finalArr,j);
+                      j++;
+                      if (j === that.reportArr1.length) {
+                        that.Load = false;
+                        that.finalArr.sort(function (a: any, b: any) {
+                          return new Date(a.date).valueOf() - new Date(b.date).valueOf();
+                        });
+                        callback({ data: that.finalArr });
+                      }
+                    }
+                  })
+
+
+                }
+                if (that.pathReport.length == 0) {
+                  that.Load = false;
+                }
+              } else {
+                that.Load = false;
+                that.firstcall = true;
+                that.lastcall = (that.skip > 0) ? false : true;
+                callback({ data: [] });
+
+              }
+            }, err => {
+              that.Load = false;
+              callback({ data: [] });
+              console.log("error", err);
+            });
+          } else {
+            that.Load = false;
+            callback({ data: [] });
+          }
+        }, "aaSorting": [],
+        "columns": [
+          {
+            "data": "device",
+            "render": function (data, type, row) {
+              return that.device_name;
+            }
+          },
+          {
+            "data": "imei",
+            "render": function (data, type, row) {
+
+              return that.device_id;
+            }
+          },
+          {
+            "data": "date",
+            "render": function (data, type, row) {
+
+              return moment(data).format('lll');
+            }
+          },
+          {
+            "data": "odo",
+            "render": function (data, type, row) {
+
+              return data ? data.toFixed(2) : 0;
+            }
+            // return end_time;
+          },
+
+          {
+            "data": "distanceFromPrevious",
+            "render": function (data, type, row) {
+              // var res = that.get_distance(row.index)
+              return data;
+            }
+            // return end_time;
+          },
+
+          {
+            "data": "speed",
+            "render": function (data, type, row) {
+
+              return data;
+            }
+            // return row.event_time;
+          },
+          {
+            "data": "avgSpeed",
+            "render": function (data, type, row) {
+              // var res = that.getavgSpeed(row.index)
+              return data;
+            }
+          },
+          {
+            "data": "external_Battery",
+            "render": function (data, type, row) {
+
+              return data ? data : '0';
+            }
+
+          },
+          {
+            "data": "temp",
+            "render": function (data, type, row) {
+              return data ? (parseFloat(data) / 10).toFixed(2) : '0';
+            }
+
+          },
+          {
+            "data": "cum_distance",
+            "render": function (data, type, row) {
+              // var res=that.getcummulative_distance(row,row.index)
+              return data;
+            }
+          },
+          {
+            "data": "address",
+            "render": function (data, type, row) {
+              var str = (row.latDecimal ? row.latDecimal : 0) + ' , ' + (row.longDecimal ? row.longDecimal : 0)
+
+              return str;
+            }
+
+          },
+          {
+            "data": "address",
+            "render": function (data, type, row) {
+
+              return data;
+            }
+
+          }
+          // },
+
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // } ,
+          { "width": "10px", "targets": 0 },
+          { "width": "10px", "targets": 1 },
+          { "width": "10px", "targets": 2 },
+          { "width": "10px", "targets": 3 },
+          { "width": "10px", "targets": 4 },
+          { "width": "10px", "targets": 5 },
+          { "width": "10px", "targets": 6 },
+          { "width": "10px", "targets": 7 },
+          { "width": "10px", "targets": 8 },
+          { "width": "10px", "targets": 9 },
+          { "width": "70px", "targets": 10 },
+          { "width": "70px", "targets": 11 },
+
+
+          //       {
+          //     targets: -1, //-1 es la ultima columna y 0 la primera
+          //     data: null,
+          //     defaultContent: '<div class="btn-group"> <button (click)="show()">view</button></div>'
+          // },
+        ]
+      });
+      // that.tabelObj.sort
+
+    });
+
+  }
+
+  getReport(value) {
+    if (value == 'getExcel') {
+      this.exportExcel();
+    } else if (value == 'getPdf') {
+      this.downloadPdf();
+    } else {
+
+      this.Fromdate = value.fromDate;
+      this.todate = value.toDate;
+      this.device_id = value.deviceArr[0].id[0]
+      this.device_name = value.deviceArr[0].name
+      var that = this;
+      if ((this.Fromdate == undefined) || (this.todate == undefined)) {
+        let message1 = "Please Select Date";
+        let action: any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+
+        });
+        // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+        return;
+      }
+
+      if (this.Fromdate.getTime() > this.todate.getTime()) {
+        let message1 = "From Date cannot be greater than to date...";
+        let action: any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+
+        });
+        // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+        return;
+      }
+      var diff = (this.todate.getTime() - this.Fromdate.getTime()) / 3600000;
+      var now = this.todate;
+      var then = this.Fromdate;
+      var difference = this.todate.getTime() - this.Fromdate.getTime();
+      var hour = (difference / (60 * 60 * 1000));
+      var diff_hr = Math.round(hour);
+
+      if (diff_hr > (24 * 15)) {
+        let message1 = "Date difference should not be greater then 15 Days";
+        let action: any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+        });
+        return;
+      }
+
+      if ((value.deviceArr.length == 0) || (value.deviceArr[0] == undefined)) {
+        let message1 = "Please Select Device";
+        let action: any;
+        this.snackBar.open(message1, action, {
+          duration: 5000,
+
+        });
+        // this._flashMessagesService.show("Please Select Device", { cssClass: 'alert-danger', timeout: 3000 });toISOString();
+        return;
+      }
+      this.skip = 0;
+      this.firstcall = false;
+      this.lastcall = true;
+      this.tabelObj.ajax.reload();
+
+    }
+  }
+
+  tab: any;
+  exportExcel() {
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#travelPath').clone();
+
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, "");
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+  clocation_1(latlngObj, cb) {
+    if (latlngObj == null) {
+      cb(null, latlngObj);
+    }
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+
+    latLng = {
+      lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+      long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+    }
+
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden: 'noaddress',
+          latlng: latLng
+        }
+        latlngObj['address'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+          lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+          long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['address'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['address'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+
+        latLng_1 = {
+          lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+          long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+        }
+
+
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden: 'noaddress',
+              latlng: latLng_1
+            }
+
+            latlngObj['address'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+  export_pdf() {
+    // jsPDF(orientation, unit, format
+
+    this.noteForpdf = '';
+    var f_date = moment(this.Fromdate).format('lll');
+    var t_date = moment(this.todate).format('lll');
+    var date_combine = f_date + '-' + t_date;
+    let doc = new jsPDF();
+    doc.setFontSize(100);
+    doc.text('Travel Path Report', 350, 30);
+    doc.text(date_combine, 250, 60);
+
+
+    // doc.addHTML(document.getElementById("exportPdf"), function() {
+    //   var tpr ="";
+    //    doc.save("obrz.pdf");
+    // });
+
+    var specialElementHandlers = {
+      '#editor': function (element: any, renderer: any) {
+        return true;
+      }
+    };
+
+    doc.autoTable({
+      theme: 'striped',
+      html: '#deviceTable',
+      margin: { top: 100 },
+      styles: {
+        cellWidth: 50
+      },
+      willDrawCell: data => {
+        // }
+        if ((data.row.index === 0) || (data.cell.text[0] === "Device")) {
+          // data.row.cells[0].styles.halign = 'center';
+          data.row.cells[1].styles.halign = 'center';
+          data.row.cells[2].styles.halign = 'center';
+          data.row.cells[3].styles.halign = 'center';
+          data.row.cells[4].styles.halign = 'center';
+          data.row.cells[5].styles.halign = 'center';
+          data.row.cells[6].styles.halign = 'center';
+          // data.row.cells[0].styles.fillColor =  [224,224,224];
+          // doc.setLineHeightFactor()
+        }
+        // data.row.cells[0].styles.halign = 'center';
+        data.row.cells[1].styles.halign = 'center';
+        data.row.cells[2].styles.halign = 'center';
+        data.row.cells[3].styles.halign = 'center';
+        data.row.cells[4].styles.halign = 'center';
+        data.row.cells[5].styles.halign = 'center';
+        data.row.cells[6].styles.halign = 'center';
+
+
+
+      }
+
+    });
+    // var pdfNameStr = travel_path_report
+    // doc.setFontSize(15);
+    doc.save('travel_path_report.pdf');
+
+
+
+  }
+
+  startAddress;
+
+  endAddress;
+  f_date
+  t_date
+  downloadPdf() {
+    var outerThis = this
+    let fileName =
+      "Travel Path Report" +
+      new Date().getTime() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+    outerThis.startAddress = outerThis.finalArr[0].address;
+    outerThis.endAddress = outerThis.finalArr[outerThis.finalArr.length - 1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll');
+    outerThis.t_date = moment(this.todate).format('lll');
+    // var date_combine = f_date + ' to ' + t_date;
+    // doc.setFontSize(30);
+    var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+    var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+    doc.setFontSize(15);
+    // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+
+    doc.text("Travel Path Report", 500, 30);
+    doc.setFontStyle("arial");
+
+    var header = function (data) {
+      doc.setFontSize(30);
+      doc.setTextColor(40);
+      doc.setFontStyle('arial');
+
+    };
+
+    var options = {
+      beforePageContent: header,
+      margin: {
+        top: 120
+      },
+
+      startY: doc.autoTableEndPosY() + 20
+    };
+
+    outerThis.toDataURL(outerThis.logo1, function (dataUrl) {
+
+      doc.autoTable({
+        head: outerThis.headRows(),
+        // margin: { top: 80 },
+        //  startY: doc.autoTable.previous.finalY + 200,
+        body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+        options,
+        styles: { overflow: 'linebreak' },
+        // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+        theme: 'grid',
+        didDrawPage: function (data) {
+          // Header
+          doc.setFontSize(20);
+          doc.setTextColor(40);
+          doc.setFontStyle('arial');
+          if (outerThis.logo1)
+            doc.addImage(dataUrl, 'JPEG', pageWidth - 100, 6, 75, 75);
+          doc.autoTable({ html: "#headerTable", margin: { bottom: 140, left: 20, right: 8, top: 20 }, theme: 'plain' });
+
+          // Footer
+          var str = "Page " + doc.internal.getNumberOfPages()
+          // Total page number plugin only available in jspdf v1.0+
+          if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+          }
+          doc.setFontSize(10);
+
+          // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+          var pageSize = doc.internal.pageSize;
+          var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+          doc.text(str, data.settings.margin.left, pageHeight - 10);
+        },
+        // didParseCell: function (table) {
+
+        //       if (table.section === 'head') {
+        //         table.cell.styles.textColor = '#FFFFFF';
+        //         table.cell.styles.fillColor = 'red';
+        //       }
+        //       if(table.section === 'body' && table.cell.raw < 0){
+        //     table.cell.styles.textColor = "red";
+        // }
+        //    },
+        //  createdCell: function (cell, data) {
+        //       cell.styles.fillColor = '#ffffff';
+        //   },
+        margin: { top: 85 },
+        // styles: { fillColor: "#C0C0C0" },
+      });
+      if (typeof doc.putTotalPages === 'function') {
+        doc.putTotalPages(totalPagesExp);
+      }
+      doc.save(fileName);
+    })
+  }
+  headRows() {
+
+    return [
+      // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        deviceName: 'device Name',
+        imei: 'IMEI',
+        date: 'Date',
+        odo: 'ODO',
+        distanceFromPrevious: 'Distance',
+        speed: 'Speed',
+        avgSpeed: 'AVG Speed',
+        externalBattery: 'Ext Battery',
+        temperature: 'Temperature',
+        cumDistance: 'Cum Distance',
+        location: 'Location',
+        address: 'Address',
+      }
+    ];
+  }
+  toDataURL(url, callback) {
+
+    var xhr = new XMLHttpRequest();
+    xhr.onload = function () {
+      var reader = new FileReader();
+      reader.onloadend = function () {
+        callback(reader.result);
+      }
+      reader.readAsDataURL(xhr.response);
+    };
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.send();
+  }
+  bodyRows(rowCount, pdfBody) {
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+        deviceName: pdfBody[j].Device_name,
+        imei: pdfBody[j].imei,
+        date: moment(pdfBody[j].date).format('lll'),
+        odo: pdfBody[j].odo ? (pdfBody[j].odo).toFixed(2) : 0,
+        distanceFromPrevious: this.get_distance(pdfBody[j].index),
+        speed: pdfBody[j].speed,
+        avgSpeed: this.getavgSpeed(pdfBody[j].index),
+        externalBattery: pdfBody[j].external_Battery ? pdfBody[j].external_Battery : '0',
+        temperature: pdfBody[j].temp ? (parseFloat(pdfBody[j].temp) / 10).toFixed(2) : '0',
+        cumDistance: this.getcummulative_distance(pdfBody[j], pdfBody[j].index),
+        location: (pdfBody[j].latDecimal ? pdfBody[j].latDecimal : 0) + ' , ' + (pdfBody[j].longDecimal ? pdfBody[j].longDecimal : 0),
+        address: pdfBody[j].address,
+
+      });
+    }
+    return body;
+  }
+
+  getcummulative_distance(gps_report, index) {
+
+    if (index == 0) {
+      return 0.00;
+    } else {
+      var cum_distance = parseFloat(this.reportArr1[index].odo) - parseFloat(this.reportArr1[0].odo);
+      return Math.abs(parseFloat(cum_distance.toFixed(2)));
+    }
+
+  }
+
+  getavgSpeed(index_1) {
+    if (index_1 == 0) {
+      return 0.00;
+    } else {
+      var cum_distance = parseFloat(this.reportArr1[index_1].odo) - parseFloat(this.reportArr1[index_1 - 1].odo);
+      return Math.abs(parseFloat((cum_distance / 0.166).toFixed(2)));
+    }
+  }
+
+  get_distance(index_1) {
+    if (index_1 == 0) {
+      return 0.00;
+    } else {
+      var cum_distance = parseFloat(this.reportArr1[index_1].odo) - parseFloat(this.reportArr1[index_1 - 1].odo);
+      // console.log(cum_distance);
+      return Math.abs(parseFloat(cum_distance.toFixed(2)));
+    }
+
+  }
+
+}
diff --git a/src/app/report/report component/no-report/no-report.component.html b/src/app/report/report component/no-report/no-report.component.html
new file mode 100644
index 0000000..58d1acb
--- /dev/null
+++ b/src/app/report/report component/no-report/no-report.component.html	
@@ -0,0 +1,5 @@
+
+<div class="card">
+  <h4>No Report Found</h4>
+
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/no-report/no-report.component.scss b/src/app/report/report component/no-report/no-report.component.scss
new file mode 100644
index 0000000..d2ff01e
--- /dev/null
+++ b/src/app/report/report component/no-report/no-report.component.scss	
@@ -0,0 +1,7 @@
+.card {
+  margin: 218px;
+  float: none;
+  padding: 70px;
+  text-align: center;
+  margin-bottom: 10px;
+}
diff --git a/src/app/report/report component/no-report/no-report.component.spec.ts b/src/app/report/report component/no-report/no-report.component.spec.ts
new file mode 100644
index 0000000..e0c8918
--- /dev/null
+++ b/src/app/report/report component/no-report/no-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoReportComponent } from './no-report.component';
+
+describe('NoReportComponent', () => {
+  let component: NoReportComponent;
+  let fixture: ComponentFixture<NoReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/no-report/no-report.component.ts b/src/app/report/report component/no-report/no-report.component.ts
new file mode 100644
index 0000000..a06353f
--- /dev/null
+++ b/src/app/report/report component/no-report/no-report.component.ts	
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-no-report',
+  templateUrl: './no-report.component.html',
+  styleUrls: ['./no-report.component.scss']
+})
+export class NoReportComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/report/report component/notification-master/noti-location/noti-location.component.html b/src/app/report/report component/notification-master/noti-location/noti-location.component.html
new file mode 100644
index 0000000..ce8a3e3
--- /dev/null
+++ b/src/app/report/report component/notification-master/noti-location/noti-location.component.html	
@@ -0,0 +1,15 @@
+
+<div class="card">
+<div class="modal-header mb-2">
+  <h4 class="modal-title pull-left">{{data.data}}</h4>
+  <button type="button" class="close pull-right" style="font-size: xx-large;" aria-label="Close" (click)="dialogRef.close()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="card-body">
+
+  <div id="map2" style="width: 117vh; height: 71vh;"></div>
+
+</div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/notification-master/noti-location/noti-location.component.scss b/src/app/report/report component/notification-master/noti-location/noti-location.component.scss
new file mode 100644
index 0000000..0f792b5
--- /dev/null
+++ b/src/app/report/report component/notification-master/noti-location/noti-location.component.scss	
@@ -0,0 +1,825 @@
+.topWrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+.mainWrapperWrapper {
+  height: inherit;
+  width: inherit;
+  padding-top: 59px;
+  background: #efecec;
+}
+
+.rowStyle {
+  height: inherit;
+  width: inherit;
+  margin: 0;
+}
+
+.tabCustomStyle {
+  .mat-tab-header {
+    background: white;
+  }
+}
+
+.selectedRunning {
+  background: #86ac41c7;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectedStopped {
+  background: #cb0000d9;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.Inactice {
+  background: #4897d8;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectIdling {
+  background: #ffc13c;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectedNodata {
+  background: #5b7065;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.deselected {
+  background: white;
+  color: black;
+}
+
+.scrollit {
+  overflow: scroll;
+  height: 100%;
+}
+
+.panel-resizable {
+  resize: vertical;
+  overflow: auto;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.buttonStyle {
+  background: white;
+  color: black;
+}
+
+.buttonStyle:hover {
+  background: grey;
+  color: black;
+}
+
+.animateClass {
+  font-size: 12px;
+  padding: 12px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+  color: white;
+  background: #989898;
+  border-radius: 25px;
+  font-size: 12px;
+  padding: 12px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+  color: white;
+  background: #989898;
+  border-radius: 25px;
+  box-shadow: -2px 1px 3px 0px #b2b0ae;
+}
+
+.animateClass_1 {
+  padding: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
+  color: black;
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+}
+
+.animateClass_2 {
+  padding: 5px;
+  color: rgb(255, 254, 254);
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 0px 2px 2px 0px #b2b0ae;
+}
+
+.animateClass_3 {
+  padding: 5px;
+  color: rgb(255, 254, 254);
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+
+.animateClass_1:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_2:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_3:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass:hover {
+  // background-color: #3e8e41
+}
+
+.animateClass:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_4 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+.animateClass_5 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+.animateClass_6 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+
+.animateClass_7 {
+  width: 25%;
+}
+
+.animateClass_4:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_5:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_6:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_7:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_8 {
+  cursor: pointer;
+  color: #2d4262;
+}
+.animateClass_9 {
+  cursor: pointer;
+  color: green;
+}
+.animateClass_10 {
+  cursor: pointer;
+  color: green;
+}
+
+.animateClass_11 {
+  cursor: pointer;
+  color: red;
+}
+
+.animateClass_12 {
+  cursor: pointer;
+  color: #2d4262;
+}
+.animateClass_13 {
+  cursor: pointer;
+  color: red;
+}
+
+.animateDropDown {
+  font-size: 15px;
+  color: #888888;
+  border-radius: 25px;
+  box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+.animateDropDown:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateDropDown:hover {
+  color: blue;
+}
+
+.animateClass_4:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_5:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_6:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_7:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_8:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_9:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_10:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_11:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_12:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_13:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.mat-menu-panel.styleMenu {
+  max-width: 35px;
+  min-width: 30px;
+  background: #efecec;
+  border: 1px solid #afadad;
+}
+
+#slider {
+  margin: 20px;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+/*//////////////////////////////////////////////////////////////////
+  [ RESTYLE TAG ]*/
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+  margin: 0px;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+  outline: none !important;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+p {
+  margin: 0px;
+}
+
+ul,
+li {
+  margin: 0px;
+  list-style-type: none;
+}
+
+/* ------------------------------------ */
+input {
+  display: block;
+  outline: none;
+  border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus,
+input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+  outline: none !important;
+  border: none;
+  background: transparent;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+iframe {
+  border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+  [ Utiliti ]*/
+
+/*//////////////////////////////////////////////////////////////////
+  [ Table ]*/
+
+.limiterTable {
+  width: 100%;
+  margin: 0 auto;
+  height: 20vh;
+  overflow: auto;
+}
+
+.container-table100 {
+  width: 100%;
+  // min-height: 100vh;
+  // background: #c850c0;
+  // background: -webkit-linear-gradient(45deg, #4158d0, #c850c0);
+  // background: -o-linear-gradient(45deg, #4158d0, #c850c0);
+  //  background: -moz-linear-gradient(45deg, #4158d0, #c850c0);
+  // background: linear-gradient(45deg, #4158d0, #c850c0);
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  // padding: 33px 30px;
+}
+
+.wrap-table100 {
+  width: inherit;
+}
+
+// thisTableOnly {
+//   border-spacing: 1;
+//   border-collapse: collapse;
+//   background: white;
+//   border-radius: 10px;
+//   overflow: hidden;
+//   width: 100%;
+//   margin: 0 auto;
+//   position: relative;
+// }
+// thisTableOnly * {
+//   position: relative;
+// }
+// thisTableOnly td, thisTableOnly th {
+//   padding-left: 8px;
+// }
+// thisTableOnly thead tr {
+//   height: 60px;
+//   background: #36304a;
+// }
+// thisTableOnly tbody tr {
+//   height: 50px;
+// }
+// thisTableOnly tbody tr:last-child {
+//   border: 0;
+// }
+// thisTableOnly td, thisTableOnly th {
+//   text-align: left;
+// }
+// thisTableOnly td.l, thisTableOnly th.l {
+//   text-align: right;
+// }
+// thisTableOnly td.c, thisTableOnly th.c {
+//   text-align: center;
+// }
+// thisTableOnly td.r, thisTableOnly th.r {
+//   text-align: center;
+// }
+
+// .table100-head th{
+//   // font-family: OpenSans-Regular;
+//   font-size: 18px;
+//   color: #fff;
+//   line-height: 1.2;
+//   font-weight: unset;
+// }
+
+tbody tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+
+// tbody tr {
+
+//   font-size: 15px;
+//   color: #808080;
+//   line-height: 1.2;
+//   font-weight: unset;
+// }
+
+// tbody tr:hover {
+//   color: #555555;
+//   background-color: #f5f5f5;
+//   cursor: pointer;
+// }
+
+.column1 {
+  width: 260px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column2 {
+  width: 160px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column3 {
+  width: 245px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column4 {
+  width: 110px;
+  // text-align: right;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column5 {
+  width: 170px;
+  // text-align: right;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column6 {
+  width: 222px;
+  // text-align: right;
+  padding-right: 62px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+// @media screen and (max-width: 992px) {
+//   table {
+//     display: block;
+//   }
+//   table > *, table tr, table td, table th {
+//     display: block;
+//   }
+//   table thead {
+//     display: none;
+//   }
+//   table tbody tr {
+//     height: auto;
+//     padding: 37px 0;
+//   }
+//   table tbody tr td {
+//     padding-left: 40% !important;
+//     margin-bottom: 24px;
+//   }
+//   table tbody tr td:last-child {
+//     margin-bottom: 0;
+//   }
+//   table tbody tr td:before {
+//   //   font-family: OpenSans-Regular;
+//     font-size: 14px;
+//     color: #999999;
+//     line-height: 1.2;
+//     font-weight: unset;
+//     position: absolute;
+//     width: 40%;
+//     left: 30px;
+//     top: 0;
+//   }
+//   table tbody tr td:nth-child(1):before {
+//     content: "Date";
+//   }
+//   table tbody tr td:nth-child(2):before {
+//     content: "Order ID";
+//   }
+//   table tbody tr td:nth-child(3):before {
+//     content: "Name";
+//   }
+//   table tbody tr td:nth-child(4):before {
+//     content: "Price";
+//   }
+//   table tbody tr td:nth-child(5):before {
+//     content: "Quantity";
+//   }
+//   table tbody tr td:nth-child(6):before {
+//     content: "Total";
+//   }
+
+//   .column4,
+//   .column5,
+//   .column6 {
+//     text-align: left;
+//   }
+
+//   .column4,
+//   .column5,
+//   .column6,
+//   .column1,
+//   .column2,
+//   .column3 {
+//     width: 100%;
+//   }
+
+//   tbody tr {
+//     font-size: 14px;
+//   }
+// }
+
+// @media (max-width: 576px) {
+//   .container-table100 {
+//     padding-left: 15px;
+//     padding-right: 15px;
+//   }
+// }
+
+.kWgQNm {
+  box-sizing: border-box;
+  display: flex;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  align-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  max-width: unset;
+  min-width: unset;
+  min-height: unset;
+  cursor: unset;
+  transform: unset;
+  word-break: unset;
+  z-index: unset;
+  padding: 0px;
+  margin: 0px;
+  overflow: unset;
+  background: unset;
+  border-right: unset;
+  border-bottom: unset;
+  flex: 0 0 auto;
+  border-radius: unset;
+  transition: initial;
+}
+
+.dfmgGo {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: 1px solid rgb(30, 172, 178);
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 18px 0px 0px 18px;
+}
+
+.jXaklS {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px;
+}
+
+.jXaklS {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px;
+}
+
+.bvKoMW {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+
+  color: #1eacb2;
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: 1px solid rgb(30, 172, 178);
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px 18px 18px 0px;
+}
+
+.kWgQNm {
+  //   .active,  .dfmgGo:hover{
+  //         background-color: rgb(30, 172, 178);
+  //         border-right: 1px solid rgb(30, 172, 178);
+  //         border-top: 1px solid rgb(30, 172, 178);
+  //         border-bottom: 1px solid rgb(30, 172, 178);
+  //         color:white;
+  //     }
+
+  .active,
+  .sc-bdVaJa:hover {
+    background-color: rgb(30, 172, 178);
+    color: white;
+    border-bottom: 1px solid rgb(30, 172, 178);
+  }
+
+  // .active, .bvKoMW:hover{
+  //     background-color: rgb(30, 172, 178);
+  //     border-right: 1px solid rgb(30, 172, 178);
+  //     border-top: 1px solid rgb(30, 172, 178);
+  //     border-bottom: 1px solid rgb(30, 172, 178);
+  //     color:white;
+  // }
+}
diff --git a/src/app/report/report component/notification-master/noti-location/noti-location.component.spec.ts b/src/app/report/report component/notification-master/noti-location/noti-location.component.spec.ts
new file mode 100644
index 0000000..5051ab4
--- /dev/null
+++ b/src/app/report/report component/notification-master/noti-location/noti-location.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotiLocationComponent } from './noti-location.component';
+
+describe('NotiLocationComponent', () => {
+  let component: NotiLocationComponent;
+  let fixture: ComponentFixture<NotiLocationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotiLocationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotiLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/notification-master/noti-location/noti-location.component.ts b/src/app/report/report component/notification-master/noti-location/noti-location.component.ts
new file mode 100644
index 0000000..1e10d5d
--- /dev/null
+++ b/src/app/report/report component/notification-master/noti-location/noti-location.component.ts	
@@ -0,0 +1,87 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../../contact.service';
+declare var google: any;
+@Component({
+  selector: 'app-noti-location',
+  templateUrl: './noti-location.component.html',
+  styleUrls: ['./noti-location.component.scss']
+})
+export class NotiLocationComponent implements OnInit {
+
+ constructor(public dialogRef: MdDialogRef<NotiLocationComponent>,private errorDialog: MdDialog,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+      this.getDevice(data)
+
+     }
+show:boolean=false;
+  ngOnInit() {
+
+  }
+  getDevice(data){
+    console.log(data);
+    
+    this.contactService.post('/devices/searchByIMEI',{imei: data.did}).subscribe((res:any)=>{
+      console.log(res);
+      this.show=true
+       var latlng = new google.maps.LatLng(res.last_location?res.last_location.lat:0, res.last_location?res.last_location.long:0);
+     
+    initialize(res[0])
+    })
+
+    function initialize(res) {
+      var lat= res.last_location?res.last_location.lat:73.777147
+      var long=res.last_location?res.last_location.long:18.602941
+
+      const myOptions = {
+        zoom:18,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+       var map = new google.maps.Map(document.getElementById("map2") as HTMLElement, {
+    center: { lat: lat, lng: long },
+    zoom: 18,
+  });
+  var poiIcon="/assets/images/liveTrackIcons/ol.png"
+  var poiData=[]
+         poiData.push({
+          "lat": lat,
+          "lng": long
+        });
+        var poiImage = new google.maps.MarkerImage(poiIcon);
+        var marker = new google.maps.Marker({
+          position: poiData[0],
+          map: map,
+          icon: poiImage,
+          title: res.Device_Name
+        });
+      // var map = new google.maps.Map(document.getElementById('map2'), myOptions);
+      // console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+    
+      // var trafficLayer = new google.maps.TrafficLayer();
+      // trafficLayer.setMap(map);
+     
+      // var zoomBar: any;
+      // zoomBar = document.getElementById('myRange');
+      // map.setZoom(map.getZoom());
+
+    
+      // zoomBar.value = map.getZoom();
+  
+      // zoomBar.oninput = function () {
+      //   //console.log('zoomValue',map.getZoom());
+      //   map.setZoom(parseInt(this.value));
+      // }
+
+      // google.maps.event.addListener(map, 'zoom_changed', function (event) {
+      //   //console.log("Inside zoom in out function");
+      //   if (zoomBar.value)
+      //     zoomBar.value = map.getZoom();
+      // });
+
+       
+
+    }
+  }
+}
diff --git a/src/app/report/report component/notification-master/notification-master.component.html b/src/app/report/report component/notification-master/notification-master.component.html
new file mode 100644
index 0000000..1801a81
--- /dev/null
+++ b/src/app/report/report component/notification-master/notification-master.component.html	
@@ -0,0 +1,263 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'NOTIFICATIONS' | translate}}</h4>
+    </div>
+  </div>  
+
+  <div class="rowStyle">
+
+    <ul class="nav nav-tabs" style="margin-top: 17px;" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">History</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link " data-toggle="tab" href="#tabs-2" role="tab">Live</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link " data-toggle="tab" href="#tabs-3" role="tab">My Tasks</a>
+      </li>
+
+     
+     
+    
+    </ul><!-- Tab panes -->
+    <div class="tab-content" style="margin-top: 13px;height: 90vh;margin: 20px;">
+      <div class="tab-pane active" id="tabs-1" role="tabpanel">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+          <div class="row" >
+          <!-- style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;"> -->
+            <div class="col-sm-12 col-md-12 col-lg-12">
+
+              <!-- <input type="text" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
+                (input)="filterItem(myInput.value)" placeholder="{{'Device Search' | translate}}" /> -->
+
+              <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next' | translate}} >></button>  
+              <button *ngIf="tableData=== true" class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;"><< {{'Previous' | translate}}</button>   
+              <md-select *ngIf="tableData=== true" (change)="callDataTable()" style="float: right;margin-top: -12px;" [(ngModel)]="limit">
+                <md-option *ngFor="let i of limitArr" [value]="i">{{i}}</md-option>
+              </md-select>
+              <div *ngIf="Load" class="loading">Loading&#8230;</div>
+              <div *ngIf="tableData=== false">
+                <p style="line-height: 12;
+                text-align: center;
+                font-size: 40px;
+                font-weight: 600;
+                color: #999999;">No data Found</p>
+              </div>
+              <div *ngIf="tableData=== true" style="width: 100%;">
+                <div class="tableFixHead">
+                  <div class="container-table100">
+                    <div class="wrap-table100">
+                      <div class="table100" >
+                        <table id="deviceTable" class="table table-striped table-hover">
+                          <thead >
+                            <tr>
+                              <th>Sentence</th>
+                              <th>Comment</th>
+                              <th>Assigned To</th>
+                              <th>Assigned on</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr *ngFor="let notif of filteredItems" style="margin-top:10px;">
+                              <td  style="cursor:pointer">
+                                <div>
+                                  <div *ngIf="notif.address">{{notif.item.sentence}} at {{notif.address}} on {{notif.timestamp|date:'short'}}</div>
+                                  <div *ngIf="!notif.address">{{notif.item.sentence}} on {{notif.timestamp|date:'short'}}</div>
+                                  <div *ngIf="notif.overSpeed">by actual speed of {{notif.overSpeed}}</div>
+                                </div>
+                              </td>
+                              <td>
+                                <p style="margin-bottom: 0%;">
+                                  <span>{{notif.comment?notif.comment:'NA'}}</span>
+                                  <!-- <span style="float: right;" *ngIf="notif.assigned_date">  Assigned on : {{notif.assigned_date |date:'medium'}}</span>
+                                  <span style="float: right;margin-right: 6px;" *ngIf="notif.assigned_to">Assigned To : {{notif.assigned_to.first_name}} {{notif.assigned_to.last_name}} , </span> -->
+                                </p>  
+                              </td> 
+                              <td>
+                                <span style="float: right;margin-right: 6px;" *ngIf="notif.assigned_to">
+                                  {{notif.assigned_to.first_name}} {{notif.assigned_to.last_name}}</span>
+                              </td>
+                              <td>
+                                <span style="float: right;" *ngIf="notif.assigned_date"> {{notif.assigned_date |date:'medium'}}</span>
+                              </td> 
+
+                              </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  </div>
+                </div>                 
+              </div>
+            </div>
+          </div> 
+        </div>
+        
+        </div>
+       <!-- -------------------------LIVE NOTIFICATION -------------------------------- -->
+        <div class="tab-pane" id="tabs-2" role="tabpanel">
+          <md-select [(ngModel)]="devStatus" multiple
+           style="position: absolute;top: 17%;left: 87%;margin-top: -25px;"
+            placeholder="{{'Select Type' | translate}}" ngDefaultControl [(ngModel)]="devStatus" (ngModelChange)="selectedStatus($event)">
+            <md-option *ngFor="let devStatus of statusArray; let i = index" style="padding-left: 20px;" [value]="devStatus.name">
+              {{devStatus.name}}
+            </md-option>
+          </md-select>
+          <div class="row" style="margin:0px">
+            <div class="col-12">
+              <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+            </div>
+          </div>
+          <div style="height: 90vh;overflow: auto;">
+            <div class="row" style="font-size: 12px;margin: 0%;">
+              <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                <div class="row"
+                  style="margin-top: 5px;margin: 0%;background: #e9ecef;margin: 3px;"
+                  *ngFor="let device of final_data;let i = index;">
+                 
+                  <div class="col-sm-12 col-md-12 col-lg-12 card2" style="padding: 1%;">
+                    <div class="row " style="margin: 0%;margin-bottom: 7px;margin-top: 5px;">
+                      <div class="col-md-2"> 
+                        <img *ngIf="device.type=='overspeed'" style="width: 30px;"  src="/assets/image/speedometer.png">
+                        <span *ngIf="device.type=='power'">
+                          <img *ngIf="device.last=='disconnected'" style="width: 30px;" src="/assets/image/power-on2.png">
+                          <img *ngIf="device.last!='disconnected'" style="width: 30px;" src="/assets/image/power-on (1).png">
+                        </span>
+                        <span *ngIf="device.type=='Geo-Fence'">
+                          <img *ngIf="device.in" style="width: 30px;" src="/assets/image/outside.png">
+                          <img *ngIf="!device.in" style="width: 30px;" src="/assets/image/inside.png">
+                        </span>
+                        <img *ngIf="device.type=='Fuel'" style="width: 30px;" src="/assets/image/fuel.png">
+                        <img *ngIf="device.type=='MAXSTOPPAGE'" style="width: 30px;" src="/assets/image/overStopped.png">
+                        <img *ngIf="device.type=='MAXIDLING'" style="width: 30px;" src="/assets/image/play.png">
+                        <img *ngIf="device.type=='route-poi'" style="width: 30px;" src="/assets/image/pin.png">
+                       
+                      
+                      </div>
+
+                      <div   class="col-sm-4 col-md-4 col-lg-4" style="padding: 0%;padding-left: 3px;">
+                      <p style="margin: 1%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
+                      </div>
+                 
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;padding-left: 3px;">
+                        <p style="margin: 1%;">{{ device.date }} {{ device.time }}</p>
+                      </div>
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;">
+                        <button class="btn btn btn-outline-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
+                          (click)="calldevice(device)">Location</button>
+                        <button class="btn btn-outline-primary btn-sm" style="border-radius: 40px; font-size: x-small;" (click)="openPopup(device)">Comment</button>
+                        <!-- <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
+                          >Immoblize</button> -->
+                          <button class="btn btn btn-outline-secondary btn-sm" style="border-radius: 40px; font-size: x-small;"
+                             (click)="select(device,i)" >Assign to Me</button>
+                      </div>
+                    </div>
+                  </div>
+                  <!-- <div class="collapse multi-collapse" id="multiCollapseExample2">
+                    <div *ngIf="i==index1" class="card card-body">
+                  <div class="card-body row">
+                    <div class="col-sm-6" style="text-align: right;">
+                      <span>{{'Assigned To' | translate}} :</span>
+                      <md-input-container style="width: 60%;">
+                        <input mdInput placeholder="{{'Select user' | translate}}" [mdAutocomplete]="tdAuto" name="state1"
+                          #state="ngModel" [(ngModel)]="dealerData" (ngModelChange)="filtergrpStatess(dealerData)">
+                        <md-autocomplete #tdAuto="mdAutocomplete">
+                          <md-option *ngFor="let group of dealerSelect" [value]="group.fullName">
+                            <span>{{ group.first_name }} {{ group.last_name }}</span>
+                          </md-option>
+                         
+                        </md-autocomplete>
+                      </md-input-container>
+                    </div>
+                    <div class="col-sm-6">
+                      <button class="btn btn-primary" style="margin-top: 14px;" data-toggle="collapse" data-target="#collapseZero"
+                        aria-expanded="true" aria-controls="collapseZero" (click)="transfer()">Transfer</button>
+                    </div>
+                  
+                  </div>
+                    </div>
+                  </div> -->
+                </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        
+        <div class="tab-pane" id="tabs-3" role="tabpanel">
+        
+          <div style="height: 90vh;">
+            <div class="row" style="font-size: 12px;margin: 0%;">
+              <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
+                <div class="row" style="margin-top: 5px;margin: 0%;background: #e9ecef;margin: 3px;"
+                  *ngFor="let device of task;let i = index;">
+        
+                  <div class="col-sm-12 col-md-12 col-lg-12 card2" style="padding: 1%;">
+                    <div class="row " style="margin: 0%;margin-bottom: 7px;margin-top: 5px;">
+                      <div class="col-md-2">
+                        <img *ngIf="device.type=='overspeed'" style="width: 30px;" src="/assets/image/speedometer.png">
+                        <span *ngIf="device.type=='power'">
+                          <img *ngIf="device.last=='disconnected'" style="width: 30px;" src="/assets/image/power-on2.png">
+                          <img *ngIf="device.last!='disconnected'" style="width: 30px;" src="/assets/image/power-on (1).png">
+                        </span>
+                        <span *ngIf="device.type=='Geo-Fence'">
+                          <img *ngIf="device.in" style="width: 30px;" src="/assets/image/outside.png">
+                          <img *ngIf="!device.in" style="width: 30px;" src="/assets/image/inside.png">
+                        </span>
+                        <img *ngIf="device.type=='Fuel'" style="width: 30px;" src="/assets/image/fuel.png">
+                        <img *ngIf="device.type=='MAXSTOPPAGE'" style="width: 30px;" src="/assets/image/overStopped.png">
+                        <img *ngIf="device.type=='MAXIDLING'" style="width: 30px;" src="/assets/image/play.png">
+                        <img *ngIf="device.type=='route-poi'" style="width: 30px;" src="/assets/image/loginIcon.png">
+        
+        
+                      </div>
+        
+                      <div class="col-sm-4 col-md-4 col-lg-4" style="padding: 0%;padding-left: 3px;">
+                        <p style="margin: 1%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
+                      </div>
+        
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;padding-left: 3px;">
+                        <p style="margin: 1%;">{{ device.date }} {{ device.time }}</p>
+                      </div>
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0%;">
+                        <button class="btn btn btn-outline-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
+                          (click)="calldevice(device)">Location</button>
+                        <button class="btn btn-outline-primary btn-sm" style="border-radius: 40px; font-size: x-small;"
+                          (click)="openPopup(device)">Comment</button>
+                        <!-- <button class="btn btn-warning btn-sm" style="border-radius: 40px; font-size: x-small;"
+                                  >Immoblize</button> -->
+                        <!-- <button class="btn btn btn-outline-secondary btn-sm" style="border-radius: 40px; font-size: x-small;"
+                          (click)="select(device,i)">Assign to Me</button> -->
+                      </div>
+                    </div>
+                  </div>
+                
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div>
+
+
+
+   
+  </div>
+</div>
+<!-- [5:02 PM, 1/19/2022] Job 1: Immoblize
+[5:03 PM, 1/19/2022] Job 1: Assign to Me -->
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
\ No newline at end of file
diff --git a/src/app/report/report component/notification-master/notification-master.component.scss b/src/app/report/report component/notification-master/notification-master.component.scss
new file mode 100644
index 0000000..a7f2f13
--- /dev/null
+++ b/src/app/report/report component/notification-master/notification-master.component.scss	
@@ -0,0 +1,198 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 90vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.limiterTable {
+  width: 100%;
+  margin: 0 auto;
+  height: 77vh;
+  overflow: auto;
+}
+.title h3 {
+  font-size: 25px !important;
+  margin-top: 20px;
+  margin-bottom: 25px;
+  line-height: 1.4em !important;
+  font-weight: 300;
+}
+
+/* alerts */
+
+.alert {
+  border: 0;
+  border-radius: 0;
+  padding: 20px 15px !important;
+  line-height: 20px;
+  font-weight: 300;
+  color: #fff;
+}
+
+.alert .alert-icon {
+  display: block;
+  float: left;
+  margin-right: 1.071rem;
+}
+
+.alert b {
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.close {
+  float: right;
+  font-size: 1.5rem;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: 0.5;
+}
+.alert .close {
+  color: #fff;
+  text-shadow: none;
+  opacity: 0.9;
+}
+.alert .close i {
+  font-size: 20px;
+}
+.alert .close:hover {
+  opacity: 1;
+  color: #fff;
+}
+.alert.alert-info {
+  background-color: #00cae3;
+  color: #fff;
+}
+
+.alert.alert-success {
+  background-color: #55b559;
+  color: #fff;
+}
+
+.alert.alert-warning {
+  background-color: #ff9e0f;
+  color: #fff;
+}
+
+.alert.alert-danger {
+  background-color: #f55145;
+  color: #fff;
+}
+
+.alert.alert-primary {
+  background-color: #a72abd;
+  color: #fff;
+}
+
+/* footer */
+
+footer {
+  margin-top: 20px;
+  color: #555;
+  background: #fff;
+  padding: 25px;
+  font-weight: 300;
+}
+.footer p {
+  margin-bottom: 0;
+  font-size: 14px;
+  margin: 0 0 10px;
+  font-weight: 300;
+}
+footer p a {
+  color: #555;
+  font-weight: 400;
+}
+
+footer p a:hover {
+  color: #9f26aa;
+  text-decoration: none;
+}
+.card2 {
+  // display: block;
+  // top: 0px;
+  // position: relative;
+  // max-width: 262px;
+  // background-color: #f2f8f9;
+  // border-radius: 4px;
+  // padding: 32px 24px;
+  // margin: 12px;
+  // text-decoration: none;
+  z-index: 0;
+  overflow: hidden;
+  // border: 1px solid #f2f8f9;
+
+  &:hover {
+    transition: all 0.2s ease-out;
+    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
+    top: -4px;
+    border: 1px solid #cccccc;
+    background-color: white;
+  }
+
+  &:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: -16px;
+    right: -16px;
+    // background: #00838d;
+    height: 32px;
+    width: 32px;
+    border-radius: 32px;
+    transform: scale(2);
+    transform-origin: 50% 50%;
+    transition: transform 0.15s ease-out;
+  }
+
+  &:hover:before {
+    transform: scale(2.15);
+  }
+}
+.tableFixHead {
+  overflow: auto;
+  height: 90vh;
+  width: inherit;
+}
+.tableFixHead thead th {
+  position: sticky;
+  top: 0;
+  background: aliceblue;
+  z-index: 1;
+}
+.tableFixHead tbody th {
+  position: sticky;
+  left: 0;
+}
diff --git a/src/app/report/report component/notification-master/notification-master.component.spec.ts b/src/app/report/report component/notification-master/notification-master.component.spec.ts
new file mode 100644
index 0000000..77b4ad6
--- /dev/null
+++ b/src/app/report/report component/notification-master/notification-master.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotificationMasterComponent } from './notification-master.component';
+
+describe('NotificationMasterComponent', () => {
+  let component: NotificationMasterComponent;
+  let fixture: ComponentFixture<NotificationMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotificationMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/notification-master/notification-master.component.ts b/src/app/report/report component/notification-master/notification-master.component.ts
new file mode 100644
index 0000000..7cc13d2
--- /dev/null
+++ b/src/app/report/report component/notification-master/notification-master.component.ts	
@@ -0,0 +1,802 @@
+import { ContactService } from '../../../contact.service';
+import { Component, OnInit } from '@angular/core';
+
+import { Router } from '@angular/router';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { MdDialog } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ReportService } from '../../report.service';
+import * as moment from 'moment';
+import { DatainjectionService } from '../../../datainjection.service';
+import { Http } from '@angular/http';
+import { environment } from '../../../../environments/environment';
+import { SOSAlertComponent } from '../../../sosalert/sosalert.component';
+import { CommentWindowComponent } from '../../../comment-window/comment-window.component';
+import { NotiLocationComponent } from './noti-location/noti-location.component';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+
+@Component({
+  selector: 'app-notification-master',
+  templateUrl: './notification-master.component.html',
+  styleUrls: ['./notification-master.component.scss']
+})
+export class NotificationMastersComponent implements OnInit {
+  ignition_data: any;
+  index1
+  isCC:Boolean=true;
+  dev_url:any;
+  superAdmin1: any;
+  devStatus
+  myInput:any;
+  selectedData
+statusArray = [
+    {name:"overspeed",status:false,value:"overspeed"},
+    {name:"Geo-Fence",status:false,value:"Geo-Fence"},
+    {name:"power",status:false,value:"power"},
+    {name :"Fuel",status : false,value:"Fuel"},
+    {name:"MAXSTOPPAGE",status:false,value:"MAXSTOPPAGE"},
+    {name : "MAXIDLING",status : false,value:"MAXIDLING"},
+    
+  ];
+  limitArr=[100,200,500,'All'];
+  limit=20
+  fs : any;
+  ls : any;
+  emailid : any;
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate=new Date();
+  options=[];
+  identifier:any='notification_master';
+  logo:any;
+  superAdmin:Boolean = false;
+  // notifications=["overspeed",'Geo-Fence','Route','IGN','Fuel'];
+  vehicles:any;
+  fromdate=new Date();
+  notifArray: any =[];
+  dealerSelect: any[];
+  dealerData: any;
+  dealerObj: any;
+  task=[]
+  supAdmin: any;
+private finalise = new Subject<void>();
+  constructor(private injectData:DatainjectionService,private http: Http,private contactService: ContactService,private _service:ReportService,private router: Router,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+    
+   this.dev_url  = environment.hostUrl; 
+    this._service.invokeEventFornotificationMaster.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }      
+      })
+    // this.fromdate.setHours(0,0,0);
+
+
+   }
+   
+
+    address:any;
+  try:any;
+  
+  counter : any = 0;
+  data:any;
+  final_counter:any = 0;
+  private socket_Notify
+  final_data = [] 
+  countfun(){
+    if(this.final_counter == 0){
+      return false
+    }
+    else{
+      return true
+    }
+  }
+  checker(){
+    this.final_counter = 0;
+    window.localStorage['Notifi_Counter'] = this.counter;
+
+  }
+  calldevice(did){
+  console.log(did)
+    this.dialog.open(NotiLocationComponent, {
+    //  height:'300px',
+    //   width:'500px',
+      
+      data: did
+      });
+
+  // window.localStorage['mapLoad_ID'] = did
+  // this.router.navigateByUrl("location");
+  }
+  accListener(){
+    var outerThis = this;
+    return function(msg){
+      // debugger; theft alert
+     if((outerThis.superAdmin=== true || !outerThis.isCC)&&(msg.item._type === "Ignition Alert" || msg.item._type==="Theft Alert" || msg.item._type=="Max Stoppage Alert" || msg.item._type=="Max Idling Alert")){
+        //  console.log("msgmsgmsgmsgmsgmsgmsgmsgmsgmsg",msg);
+      }else{
+        console.log("msg",msg.type,(outerThis.devStatus));
+        var arr=[];
+        arr=outerThis.devStatus?outerThis.devStatus:[]
+        // for(var i=0;i<outerThis.devStatus.length;i++){
+        if(arr.includes(msg.type) || outerThis.devStatus==undefined || outerThis.devStatus=="" || arr.length==0){
+          var dt = new Date(msg.timestamp);
+          let  day = dt.getDate(); 
+           let  month = dt.getMonth()+1; 
+           let  year = dt.getFullYear();
+         
+           let final_date = day+"/"+month+"/"+year
+          let tm = new Date(msg.timestamp).toLocaleTimeString();
+          var n = msg.item.sentence.split(" ");
+          console.log(n[n.length - 1]);
+          let data = {
+            date:final_date,
+            time:tm,
+            data:msg.item.sentence,
+            did:msg.device,
+            user:msg.user,
+            _id : msg._id,
+            type:msg.type,
+            last:n[n.length - 1],
+            in:n.includes('exited')
+          }
+         console.log(data);
+         
+          ++ outerThis.final_counter;
+         
+          window.localStorage['Notifi_Counter'] = outerThis.final_counter;
+          outerThis.final_counter=window.localStorage.Notifi_Counter
+          outerThis.final_data.unshift(data);
+
+        }
+      // }
+      }
+     
+    }
+
+  }
+getData(a){
+  return this.http.get(this.dev_url  + '/notifs/getAssignedNoti?id='+a)
+  .map(res => res.json());
+
+ 
+}
+audio:any;
+GET_notif:boolean;
+
+playAudio(notifSignal){
+  // notification
+  // console.log("SOS Alert");
+  if(notifSignal == 3){
+ 
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notifSOS.wav';
+    this.audio.play();
+    Audio.prototype.stop = function()
+    {
+        this.pause();
+        this.currentTime = 0.0;
+    }
+    // auto-start
+    // this.audio.play();
+  }else{
+    this.audio = new Audio();
+    this.audio.src = '../../assets/notification.wav';
+  
+    // auto-start
+    this.audio.play();
+  }
+
+
+}
+// mb:any
+dialogRef:any;
+  openAlertBox(message){
+    this.dialogRef = this.dialog.open(SOSAlertComponent, {
+      height:'300px',
+      width:'430px',
+      
+      data: {'socketData':message}
+      });
+
+      this.dialogRef.afterClosed().subscribe(result => {   
+        if(result=="success"){}
+        });
+  }
+  ngOnDestroy() {
+    if( this.socket_Notify){
+      this.socket_Notify.removeAllListeners()
+    }
+    this.finalise.next(void 0);
+     /*  this.socket_Notify.removeAllListeners(this.useridd) */
+  }
+
+  openPopup(device){
+    // console.log("popup opened");
+    var that  =this;
+document.getElementById("mdMenu").style.display="none"
+    var commentWindow = this.dialog.open(CommentWindowComponent, {
+    //  height:'300px',
+    //   width:'500px',
+      
+      data: {'deviceData':device}
+      });
+
+      commentWindow.afterClosed().subscribe(result => {   
+        console.log(result);
+        
+        if(result){
+          for(var i=0;i<this.final_data.length;i++){
+            if(this.final_data[i]._id==device._id){
+              this.final_data.splice(i,1)
+            }
+          }
+          // that.ngOnInit() ; 
+          this.getTask()
+        }
+        });
+  }
+  ngOnInit() {
+   
+    // this.notifications;
+    
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.supAdmin=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+       var cc= JSON.parse(window.atob(window.localStorage.token.split('.')[1])).customer_role;
+ 
+    
+     if(cc=="cc"){
+       this.isCC=false;
+     }  
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     var fd = new Date().setHours(0,0,0);
+     this.Fromdate = new Date(fd);
+     this.firstcall=false;
+     this.lastcall= false;
+     this.socket_Notify = this.injectData.getSocket_notifIO();          
+    this.socket_Notify.on('connect', function(this){ });
+    this.socket_Notify.on( this.isCC?this.useridd:this.supAdmin, this.accListener());
+    
+    this.tableData = false;
+    // this.getAllccData()
+    this.getTask()
+  }
+
+  
+notification:any;
+tableData:boolean=true;
+getNotification(){
+  this.notifArray=[];
+  var from= this.Fromdate
+  var to = this.todate;
+  console.log(this.Fromdate,this.todate);
+ console.log('this.deviceArr',this.deviceArr);
+ var user :any;
+ this.Load=true;
+ if((this.custtype != true)&&(this.superAdmin != true)){
+    user = this.useridd
+ }
+ 
+ var limit = 20;
+ var data={
+   from_date:from,
+    to_date:to,
+    type:this.notification,
+    vehicle:JSON.stringify(this.deviceArr),
+    sortOrder: -1,
+    skip: this.skip,
+    limit:this.limit,
+    user:user
+ }
+//  from,to,this.notification,this.deviceArr,user,this.skip,limit
+  this.contactService.post('/notifs/getNotifByFilterss',data)
+    .subscribe(res=>{
+      this.tableData = true;
+      this.notifArray =res;
+      this.assignCopy()
+      if(this.notifArray == 0){
+        this.firstcall=true;
+        this.lastcall=(this.skip>0)?false:true;
+      }
+      this.Load=false;
+      console.log(this.notifArray);
+    },err=>{
+      this.Load=false;
+      this.notifArray=[];
+      this.firstcall=true;
+      this.lastcall=(this.skip>0)?false:true; 
+      if(err.status == 500){
+        this.tableData = false;
+        // this._flashMessagesService.show("No data available", { cssClass: 'alert-danger', timeout: 1500 });
+      }
+    })
+}
+
+
+
+
+deviceObj = [];
+
+deviceSelect: any = [];
+deviceName: any;
+
+
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    // table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+deviceArr:any=[];
+getReport(event){
+  this.deviceArr=[];
+  console.log("inside function");
+  if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    this.notification =tpdata.notitype;
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+    console.log('event',event);
+    this.skip = 1;
+    this.firstcall=false;
+    this.lastcall= true;
+    this.getNotification();
+ 
+  }
+ 
+}
+
+getTask(){
+  console.log("In");
+  
+  this.getData(this.useridd).subscribe(
+      data => {
+        // console.log('Notification data on every click',data);
+        this.task=[];
+        var devicess = data ;
+        var address
+        for(let r=0;r<devicess.length;r++){
+          var dt = new Date(devicess[r].timestamp);
+           let  day = dt.getDate(); 
+           let  month = dt.getMonth()+1; 
+           let  year = dt.getFullYear();
+          if((devicess[r].address=="")||(devicess[r].address==null)){
+           address = ""
+          }else{
+           address =  "at" + "  " +devicess[r].address
+          }
+         
+           let final_date = day+"/"+month+"/"+year
+          let tm = new Date(devicess[r].timestamp).toLocaleTimeString();
+          if(devicess[r].commentSaved){
+            
+          }else{
+             var n = devicess[r].item.sentence.split(" ");
+            //  date:final_date,
+            // time:tm,
+            // data:msg.item.sentence,
+            // did:msg.device,
+            // user:msg.user,
+            // _id : msg._id,
+            // type:msg.type,
+            // last:n[n.length - 1],
+            // in:n.includes('exited')
+            let data = {
+              date:final_date,
+              time:tm,
+              data:devicess[r].item.sentence,
+              did:devicess[r].device,
+              address:address,
+              type:devicess[r].type,
+              user:devicess[r].user,
+              _id:devicess[r]._id,
+              last:n[n.length - 1],
+            in:n.includes('exited')
+            }
+
+            this.task.push(data);
+          }
+          // console.log('this.final_data',this.final_data);
+        }
+      }
+    )
+}
+
+
+firstcall:boolean=true;
+lastcall:boolean=true;
+skip:number=1;
+next() {
+  // this.deviceData =[];
+  this.lastcall=false;
+  this.skip += 1; 
+  // this.sidebarData();
+  // this.ngOnInit();
+  this.getNotification();   
+}
+pre() {
+  // this.deviceData=[]
+  // console.log(this.skip)
+  if(this.skip>0){
+    this.skip -= 1;   
+    this.lastcall=false;
+    // this.sidebarData();
+    // this.ngOnInit();
+    this.getNotification(); 
+  }else{
+    this.lastcall=true;
+    this.firstcall=false;
+  }
+ 
+}
+
+
+     expotToPdf(){
+    console.log(this.notifArray);
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Notifications" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//   //   var f_date = moment(this.from_date).format('lll'); 
+//   // var t_date =moment(this.to_date).format('lll');
+//   // var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Notifications ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.notifArray.length, this.notifArray),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Notification" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+//  outerThis.startAddress= outerThis.finalArr[0].address;
+//  outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Notification", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.notifArray.length, outerThis.notifArray),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        sentence:'Sentence',
+        timestamp:'Date',
+        comment:'Comment',
+        // idle_time:'Duration',
+        // ac_status:'AC Status',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       sentence:pdfBody[j].item.sentence,
+        timestamp:moment(new Date(pdfBody[j].timestamp)).format('llll'),  
+        comment:pdfBody[j].comment?pdfBody[j].comment:'N/A', 
+        // idle_time:this.millisecondConversion(pdfBody[j].device.idle_time),
+        // ac_status:pdfBody[j].device.ac_status?pdfBody[j].device.ac_status:'N/A'
+      });
+    }
+    return body;
+  }
+  callDataTable(){
+
+    this.skip = 0;
+    // that.limit = len;
+    this.getNotification();
+  }
+
+  selectedStatus(e){
+    console.log(e,this.devStatus);
+    
+  }
+  ccData
+  getAllccData(){
+    this.contactService.get('/users/getCCData?id='+this.useridd).subscribe((res:any)=>{
+      console.log(res);
+      this.ccData=res
+      for(let i=0;i<this.ccData.length;i++){
+          this.ccData[i].fullName=this.ccData[i].first_name+' '+this.ccData[i].last_name;
+        }
+    })
+  }
+  select(data,i){
+    
+    this.selectedData=data
+    console.log(this.selectedData);
+    this.index1=i
+    console.log(this.selectedData);
+    var data1={
+      assigned_to:this.useridd,
+      id:data._id,
+      assigned_date:new Date()
+    }
+    this.contactService.post('/notifs/assignTo',data1).subscribe(res=>{
+    console.log(res);
+    for(var i=0;i<this.final_data.length;i++){
+      if(data._id==this.final_data[i]._id){
+        this.final_data.splice(i,1)
+      }
+    }
+    this.getTask()
+    this._flashMessagesService.show('Notification Assigned To you', { cssClass: 'alert-success', timeout: 3000 });
+    })
+  }
+//    filtergrpStatess(val) {
+
+//   console.log(val)
+//   // console.log(this.options)
+ 
+//   if (val) {
+// // this.userDetail=undefined
+//     const filtergrpValue:any = val;
+
+//     this.dealerSelect=[];
+//      this.dealerSelect = this.ccData.filter(function(g){
+//       var c = (g.first_name).toLocaleLowerCase().indexOf(filtergrpValue.toLocaleLowerCase());
+//     // console.log("TESTINg",c)
+//       return c > -1;    
+//     });
+//     if(this.dealerData){
+//       for(let i=0;i<this.ccData.length;i++){
+//         if(this.ccData[i].fullName==this.dealerData){
+//           this.dealerObj=this.ccData[i]._id
+//           console.log(this.ccData[i]);
+//         }
+//       }
+//     }
+//       console.log( this.dealerObj);
+//       return this.dealerSelect;
+//   }
+
+// }
+
+transfer(){
+  
+}
+filteredItems:any
+assignCopy(){
+   this.filteredItems = Object.assign([], this.notifArray);
+   console.log(this.filteredItems);
+   
+}
+filterItem(value){
+   if(!value){
+       this.assignCopy();
+   } // when nothing has typed
+   this.filteredItems = Object.assign([], this.notifArray).filter(
+      item => item.item.sentence.toLowerCase().indexOf(value.toLowerCase()) > -1
+   )
+}
+}
+
+
diff --git a/src/app/report/report component/over-speed/over-speed.component.html b/src/app/report/report component/over-speed/over-speed.component.html
new file mode 100644
index 0000000..6cc5585
--- /dev/null
+++ b/src/app/report/report component/over-speed/over-speed.component.html	
@@ -0,0 +1,124 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Overspeeding Report' | translate}}</h4>
+      <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Overspeed' | translate}}</th>
+                      <th style="text-align: left;">{{'Location' | translate}}</th>
+                      <th style="text-align: left;">{{'Datetime' | translate}}</th>      
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+  <div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <p class="headStyle">{{'Overspeeding Report' | translate}}</p>
+    <div class="InputStyle" style="padding-bottom:30px">
+      <div class="row">
+        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
+           
+            
+            <select id="select" multiple="multiple">
+              <option *ngFor="let option_1 of options" value={{option_1.did}}>{{ option_1.value }}</option>
+            </select>
+    
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="overSpeeding_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+            
+              <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+         
+          </div>
+      </div>
+    </div>
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>Vehicle Name</th>
+          <th >Overspeed</th>
+          <th>Location</th>
+          <th>Datetime</th>        
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let device of overSpeed">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.overSpeed}}</td>
+          <td style="cursor:pointer">
+            <p *ngIf="device.address != undefined">{{device.address}}</p>
+            <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+          
+          </td>
+          <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display: none">
+
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th>Vehicle Name</th>
+   <th >Overspeed</th>
+   <th>Location</th>
+   <th>Datetime</th>        
+ </tr>
+</thead>
+<tbody>
+ <tr *ngFor="let device of overSpeed">
+   <td style="cursor:pointer">{{device.vehicleName}}</td>
+   <td style="cursor:pointer">{{device.overSpeed}}</td>
+   <td style="cursor:pointer">
+     <p *ngIf="device.address != undefined">{{device.address}}</p>
+     <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+   
+   </td>
+   <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+ </tr>
+</tbody>
+</table>
+  </div> -->
diff --git a/src/app/report/report component/over-speed/over-speed.component.scss b/src/app/report/report component/over-speed/over-speed.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/over-speed/over-speed.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/over-speed/over-speed.component.spec.ts b/src/app/report/report component/over-speed/over-speed.component.spec.ts
new file mode 100644
index 0000000..9405e87
--- /dev/null
+++ b/src/app/report/report component/over-speed/over-speed.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverSpeedComponent } from './over-speed.component';
+
+describe('OverSpeedComponent', () => {
+  let component: OverSpeedComponent;
+  let fixture: ComponentFixture<OverSpeedComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OverSpeedComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OverSpeedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/over-speed/over-speed.component.ts b/src/app/report/report component/over-speed/over-speed.component.ts
new file mode 100644
index 0000000..a754e5c
--- /dev/null
+++ b/src/app/report/report component/over-speed/over-speed.component.ts	
@@ -0,0 +1,736 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { environment } from '../../../../environments/environment';
+declare var google: any;
+import * as moment from 'moment';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-over-speed',
+  templateUrl: './over-speed.component.html',
+  styleUrls: ['./over-speed.component.scss']
+})
+export class OverSpeedComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  identifier:String = "over_speed";
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  dev_url = environment.hostUrl;
+  date1:any;
+
+  dataSelect:any;
+
+  superAdmin:Boolean = false;
+  deviceId: any;
+  tabelObj: any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) {
+    this._service.invokeEventForoverspeedReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      })
+   }
+ ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log(this.options);
+    //       let that = this;
+    //       setTimeout(()=>{
+    //         that.loadropdown();
+    //       },100)  
+      
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable();
+  }
+
+
+  // loadropdown() {
+  //   let that = this;
+  //   var script = document.createElement("script");
+  //   script.setAttribute("type", "text/javascript");
+  //   script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  //   document.getElementsByTagName("head")[0].appendChild(script);
+  //   setTimeout(() => {
+
+  //     $('#select').multipleSelect({
+  //       width: 200,
+  //       placeholder: 'Select device.....',
+  //       filter: true,
+  //     })
+  //    // $('#select').show();
+  //   }, 100);
+
+
+  // }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+//   ignition_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/ignition_report");
+
+
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+
+
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+
+
+//   Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+// summaryReport(){
+
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+
+// alert_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/alert_report");
+// }
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// driverPerformance(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/Driver-performance");
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+
+
+
+// route_map(){
+//   this.router.navigateByUrl("routeMapping");
+
+// }
+
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+
+// trip_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/trip_report");
+
+// }
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+
+getReport(event){
+  if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd.toISOString();
+    this.todate = td.toISOString();
+    console.log("b4");
+    // this.tabelObj.clear();
+    // var aa = [];
+    // this.tabelObj.rows.add(aa); 
+  
+    console.log(this.tabelObj);
+    this.tabelObj.ajax.reload();      
+
+  }
+ 
+    
+
+
+}
+
+   
+
+
+  overSpeed_data=[];
+  overSpeed:any;
+  address_show:any;
+  vehicle_name:any;
+  show_time:any;
+  speed_ex:any;
+ 
+  start_add:any;
+  uId:any;
+  data_descip:any;
+  tost1(errcode){
+    if(errcode=="error_message"){
+      this.data_descip = "No Data Available";
+      launch_toast();
+
+    }
+
+    function launch_toast() {
+   
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }
+
+  }
+  start_add_long:any;
+  start_add_lat:any;
+  deviceArr = [];
+  overSpeeding_report(Fromdate,todate){
+    //  console.log(this.dataSelect);
+      var deviceId;
+
+      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+      if(this.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= this.deviceArr;
+      }
+  
+     
+      let did =this.useridd;
+     
+    let f_date = Fromdate.toISOString();
+    let t_date =  todate.toISOString();
+    // console.log(f_date);
+    // console.log(t_date);
+    this.overSpeed_data=[];  
+    var outerThis = this;
+    this.Load = true; 
+    this.contactService.overSpeed(f_date, t_date, did,deviceId)
+     .subscribe(res => {
+        this.overSpeed= res;
+        console.log("this.overSpeed=>",this.overSpeed);
+        this.Load = false;  
+      },err=>{
+        this.Load =false;
+        console.log("Error while fetching data",err);
+
+      })
+  }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+   
+       that.tabelObj = $('#deviceTable').DataTable({
+          dom: 'lBftip',
+          buttons: [
+            'copy',
+            'print',
+            'excel'
+          ],       
+            "processing": false,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              console.log('temptemptemptemptemp',dataTablesParameters);
+                var deviceID;
+                console.log('that.deviceArr',that.deviceArr);    
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+
+            
+              var suburl = "";
+              that.Load= true;    
+              suburl += "/notifs/overSpeedReport?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              if(temp.from_date && temp.to_date){
+              that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log(ignReport.length); 
+                  that.Load= false;      
+                 that.overSpeed=resp;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+            }else{
+               that.Load= false;   
+              callback({data : [] });
+            }
+          },  
+        
+            "columns": [
+                {
+                    "data": "vehicleName",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "overSpeed",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      return data?data:'';        
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      
+                      var lat = row.lat?row.lat:0;
+                      var long = row.long?row.long:0;
+                      var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle End location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';      
+                      return data?data : addressLink; 
+                  
+                    }
+                },        
+              {
+                "data": "timestamp",
+                "defaultContent": "",
+                render: function(data, type, row) { 
+                  var overspeedDate = new Date(data);
+                  return data ? (moment(overspeedDate).format('llll')) : "";              
+                 
+                }
+            }  
+            
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            }   ,
+            { "width": "10px", "targets": 0 },
+            { "width": "40px", "targets": 1 },
+            { "width": "100px", "targets": 2 },
+            { "width": "70px", "targets": 3 },
+           
+            ] 
+        });
+  
+    });
+  
+  }
+
+  addressLink = "";
+getlink(report){
+  console.log("inside function");
+  console.log("report=>",report);
+  var lat = report.lat?report.lat:0;
+  var lng = report.long?report.long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+  xlUrl:any;
+  export_to_XL(Fromdate,todate,option){
+    // console.log("Excel report");
+    let f_date = Fromdate.toISOString();
+    let t_date = todate.toISOString();
+    let uId1 = option.user.first_name;
+    // console.log(uId1);
+    this.contactService.OSXLreport(f_date,t_date,uId1,this.useridd)
+      .subscribe(res=>{
+      //  console.log(res);
+        this.xlUrl= this.dev_url +"/"+res.filename;
+        
+        // console.log(this.xlUrl);
+      })
+  
+  
+  
+  }
+
+
+  tab:any;
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+	    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+
+  }
+
+
+}
+
+    expotToPdf(){
+    console.log(this.overSpeed);
+
+    this.downloadPdf()
+    
+  }
+downloadPdf() {
+    let fileName =
+      "Overspeeding Report" +
+      new Date().getTime() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+
+    var doc = new jsPDF("p", "pt", pdfsize);
+  //   var f_date = moment(this.from_date).format('lll'); 
+  // var t_date =moment(this.to_date).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+  doc.setFontSize(15);
+  doc.text('Overspeeding Report ', 20, 30);
+  // doc.text(date_combine, 250, 60);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(15);
+    doc.setTextColor(40);
+    doc.setFontStyle('normal');
+    //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+    // doc.text("Testing Report", data.settings.margin.left, 50);
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    startY: doc.autoTableEndPosY() + 20
+  };
+
+    doc.autoTable({
+      head: this.headRows(),
+      // margin: { top: 80 },
+      body: this.bodyRows(this.overSpeed.length, this.overSpeed),
+      options
+      
+    });
+    doc.save(fileName);
+  }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle Name',
+        overSpeed:'Overspeed',
+        location:'Location',
+        timestamp:'Date Time',
+        // ac_status:'AC Status',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleName:pdfBody[j].vehicleName,
+       overSpeed:pdfBody[j].overSpeed,  
+       location:[pdfBody[j].lat,pdfBody[j].long], 
+       timestamp:moment(new Date(pdfBody[j].timestamp)).format('llll'),
+        // ac_status:pdfBody[j].device.ac_status?pdfBody[j].device.ac_status:'N/A'
+      });
+    }
+    return body;
+  }
+
+
+}
diff --git a/src/app/report/report component/performance-report/performance-report.component.html b/src/app/report/report component/performance-report/performance-report.component.html
new file mode 100644
index 0000000..b91c2ba
--- /dev/null
+++ b/src/app/report/report component/performance-report/performance-report.component.html	
@@ -0,0 +1,126 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Performance Report' | translate}}</h4>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+    
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div class="loading" *ngIf="Load">Loading&#8230;</div>
+              <div style="width: 100%;height:84vh;">
+                <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                  <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Total Dist.' | translate}}</th>
+                      <th style="text-align: left;">{{'Avg. Dist.' | translate}}</th>
+                      <th style="text-align: left;">{{'Driven Hours' | translate}}</th>
+                      <th style="text-align: left;">{{'Stationary Hours' | translate}}</th>
+                      <th style="text-align: left;">{{'Excess Idle' | translate}}</th>
+                      <th style="text-align: left;">{{'Max Speed' | translate}}</th>
+                      <th style="text-align: left;">{{'Speed Violation' | translate}}</th>
+                      <!-- <th style="text-align: left;">{{'Total K.M.' | translate}}</th>
+                      <th style="text-align: left;">{{'Details' | translate}}</th> -->
+
+                    </tr>
+                  </thead>
+                </table>
+              </div>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+    
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="cartForKMDriven" style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+    
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="cartForHoursDriven"
+              style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+    
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="cartForMaxSpeed"
+              style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+    border-collapse: collapse;position: absolute;
+    top: -33px;">
+ 
+  <tr style="height:30px;border-top:1px solid black">
+    <td>
+      <span style="font-weight: 700;">Report Period</span>: {{reportPeriod}}
+    </td>
+    <td>
+      <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <span style="font-weight: 700;">Report Date</span>: {{reportDate}}
+    </td>
+    <td>
+      <span style="font-weight: 700;">Total Fleet Size</span>: {{finalArr?finalArr.length:0}}
+    </td>
+  </tr>
+  <tr style="height:30px;border-top:1px solid black">
+    <td>
+      <span style="font-weight: 700;"> Total Distance Travelled (km)</span>: {{totalDistanceTraveled}}
+    </td>
+    <td>
+      <span style="font-weight: 700;">Avg. Distance Travelled (km)</span>: {{avgDistTraveled}}
+    </td>
+    <td>
+      <span style="font-weight: 700;">Total Driven Hours</span>: {{totalHours}}
+    </td>
+  </tr>
+</table>
\ No newline at end of file
diff --git a/src/app/report/report component/performance-report/performance-report.component.scss b/src/app/report/report component/performance-report/performance-report.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/performance-report/performance-report.component.spec.ts b/src/app/report/report component/performance-report/performance-report.component.spec.ts
new file mode 100644
index 0000000..b4a4c27
--- /dev/null
+++ b/src/app/report/report component/performance-report/performance-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PerformanceReportComponent } from './performance-report.component';
+
+describe('PerformanceReportComponent', () => {
+  let component: PerformanceReportComponent;
+  let fixture: ComponentFixture<PerformanceReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PerformanceReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PerformanceReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/performance-report/performance-report.component.ts b/src/app/report/report component/performance-report/performance-report.component.ts
new file mode 100644
index 0000000..4e858f5
--- /dev/null
+++ b/src/app/report/report component/performance-report/performance-report.component.ts	
@@ -0,0 +1,823 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ContactService } from '../../../contact.service';
+import { ReportService } from '../../report.service';
+// declare function show
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var moment:any;
+declare var html2canvas:any
+declare var Chart :any;
+@Component({
+  selector: 'app-performance-report',
+  templateUrl: './performance-report.component.html',
+  styleUrls: ['./performance-report.component.scss']
+})
+export class PerformanceReportComponent implements OnInit {
+identifier : any = 'stoppage_report';
+  address: any;
+  // overSpeedobject:any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  dataStoppage: any[];
+  stoppage_obj: any;
+  duration:any;
+  
+  stoppage_duration: any;
+  finalArr: any;
+  supAdmin: any;
+  logo1: string;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private _service:ReportService,private router: Router,public dialog: MdDialog) {
+ this._service.invokeEventForPerformanceReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+ngOnDestroy(){
+   
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.supAdmin=JSON.parse(window.atob(window.localStorage.token.split('.')[1])).supAdmin;
+    console.log("TOKEN=>",JSON.parse(window.atob(window.localStorage.token.split('.')[1])));
+    
+
+    this.contactService.get('/users/shareProfileImage?uid='+this.supAdmin).subscribe((res:any)=>{
+      console.log(res);
+      
+    if(res.imageDoc.length != 0){
+        var str =  res.imageDoc[0]
+        var splitStr = str.split('/');
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+          concatStr += '/'+tt ; 
+         }
+       }
+       this.logo1='https://www.oneqlik.in' + concatStr
+       console.log("IMAGE==>",this.logo1);
+      
+      }
+      
+    })
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable()
+    // this.tabelObj;
+       
+  }
+
+ 
+
+
+  stoppage_data=[];
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+
+addressLink = "";
+
+  tab:any;
+  exportExcel()
+  {
+  
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+  
+      for(j = 0 ; j < this.tab.rows.length ; j++) 
+      {     
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+          // console.log('tab_text',JSON.parse(tab_text));
+          //tab_text=tab_text+"</tr>";
+      }
+  
+      tab_text=tab_text+"</table>";
+      // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+      // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+  
+  tabelObj :  any;
+
+testTable() {
+  const that = this;
+ 
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+      // dom: 'Bfrtip',
+      // buttons: [
+      //     'copy', 'csv', 'excel', 'pdf', 'print'
+      // ]  ,
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load= true;    
+             
+
+          var tempfd = new Date().setHours(0,0,0,0);
+          var tf =moment(tempfd).subtract(1, "days") ;
+          var temptd = new Date();
+          
+         
+            var from_date = that.Fromdate?that.Fromdate:tf.toISOString();
+            var to_date = that.todate?that.todate:temptd.toISOString();
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            suburl += "/summary/summary?from=" + temp.from_date +'&to=' + temp.to_date + '&user=' + temp.user;
+            // that.finalArr=[]
+            console.log(this.deviceArr);
+            if(that.deviceArr.length != 0){  
+              suburl +='&device='+that.deviceArr;
+            }else{
+            
+              let resp =[];
+             
+
+              callback({data : resp });
+            }
+            if(temp.from_date && temp.to_date){
+              that.dataForKMDriven=[]
+              that.vehicleName=[];
+               that.maxSpeedData=[]
+               that.dataForHourDriven=[];
+               that.clourArray=[]
+            that.contactService.get(suburl).subscribe((resp:any) => {   
+                // console.log(ignReport.length);   
+                that.Load= false;   
+                 for(var i=0;i<resp.length;i++){
+                that.dataForKMDriven.push(resp[i].total_odo?(Number(resp[i].total_odo)/1000).toFixed(2):'')
+                that.vehicleName.push(resp[i].devObj[0].Device_Name?resp[i].devObj[0].Device_Name:'')
+                that.maxSpeedData.push((resp[i].today_maxSpeed?Number(resp[i].today_maxSpeed):0))
+                  that.dataForHourDriven.push(Number(that.millisecondConversion1(parseInt(resp[i].today_running))))
+                that.clourArray.push(that.getRandomColor())
+              if(i==(resp.length-1)){
+                 that.dataToPlot()
+                console.log(that.dataForHourDriven);
+                
+                }
+              }
+
+                that.finalArr=resp 
+                console.log('respresp=>',resp);      
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+          }else{
+            that.Load= false;       
+                callback({data : [] });
+          }
+        },  
+      
+          "columns": [
+              {
+                  "data": "devObj",
+                  "render": function(data, type, row) {
+                      
+                    return data[0].Device_Name?data[0].Device_Name:'';                     
+                  }
+              },
+              {
+                  "data": "total_odo",
+                  render: function(data, type, row) {
+                    return data?(Number(data)/1000).toFixed(2):'';        
+                  }
+              },
+              {
+                  "data": "total_odo",
+                  render: function(data, type, row) {
+                    if(that.days>0){
+                      return row.total_odo?(Number(row.total_odo)/(1000*that.days)).toFixed(2):'';           
+
+                    }else{
+                      return row.total_odo?(Number(row.total_odo)/(1000)).toFixed(2):''; 
+                    }
+                  }
+              },   
+            
+          {
+            "data": "today_running",
+            render: function(data, type, row) { 
+            
+             var ign_on:any;
+                  if(data != undefined){
+                   ign_on =  that.millisecondConversion(parseInt(data));
+                  }else{
+                    ign_on = '0:0'
+                  }
+                    return ign_on;  
+            }
+          },
+          {
+            "data": "today_stopped",
+            render: function(data, type, row) { 
+            
+             var ign_on:any;
+                  if(data != undefined){
+                   ign_on =  that.millisecondConversion(parseInt(data));
+                  }else{
+                    ign_on = '0:0'
+                  }
+                    return ign_on;  
+            }
+          },
+          
+          {
+            "data": "t_idling",
+            render: function(data, type, row) { 
+              var ign_on:any;
+                  if(data != undefined){
+                   ign_on =  that.millisecondConversion(parseInt(data));
+                  }else{
+                    ign_on = '0:0'
+                  }
+                    return ign_on; 
+            }
+          },
+            {
+            "data": "today_maxSpeed",
+            render: function(data, type, row) { 
+            
+                    return data?data:'';  
+            }
+          }, 
+          {
+            "data": "today_routeViolations",
+            render: function(data, type, row) { 
+            
+                    return data?data:0;  
+            }
+          },                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          },
+          // { "width": "20%", "targets": 0 },
+          // { "width": "10%", "targets": 1 },
+          // { "width": "20%", "targets": 2 },
+          // { "width": "30%", "targets": 3 },  
+          // { "width": "20%", "targets": 4 },      
+         
+          ] 
+      });
+
+  });
+
+}
+clourArray=[]
+  getRandomColor() {
+    var letters = '0123456789ABCDEF'.split('');
+    var color = '#';
+    for (var i = 0; i < 6; i++ ) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+}
+  millisecondConversion(duration){
+ 
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours + ":" + mins;
+  
+}
+  millisecondConversion1(duration){
+ 
+var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+return  hours+'.'+mins;
+  
+}
+  deviceArr=[];
+  data_descip = '';
+  days=1
+  getReport(event){
+    console.log(event);
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      var a = moment(fd);
+var b = moment(td);
+this.days=b.diff(a, 'days');
+console.log(this.days);
+if(this.days<0){
+  this.days=1;
+} // 1
+console.log(this.days);
+
+        deviceId= event.deviceArr;
+      
+      this.deviceArr = deviceId; 
+    
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+     
+        this.tabelObj.ajax.reload(); 
+        
+    
+    }
+
+
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }    
+   
+  }
+
+  durationFilter(data){
+    var temp=[];
+    var diff
+    console.log(data,this.stoppage_duration[0]);
+     if(this.stoppage_duration[0]==0){
+        temp=data
+       }else{
+    if(data.length!=0){
+    for(var i=0;i<data.length;i++){
+      diff=this.dateDiffrence(data[i].arrival_time,data[i].departure_time);
+     if((this.stoppage_duration != undefined )&&(this.stoppage_duration.length != 0 )){
+      
+       if(this.stoppage_duration[0]==1){
+            if(diff.hrs<=2){
+              if(diff.hrs==2){
+                if(diff.min>0){
+
+                }else{
+                  temp.push(data[i]);
+                }
+              }else
+                temp.push(data[i]);
+            }
+       }else{
+          if(diff.hrs>=this.stoppage_duration[0]){
+         temp.push(data[i]);
+       }
+
+       }
+      
+      }
+    }
+  }
+}
+      return temp;
+  }
+  dateDiffrence(date1,date2){
+                  let arrival_time = new Date(date1).toLocaleString();                 
+                  let departure_time = new Date(date2).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                  let Durations = rhours;
+                  return {hrs:Durations,min:rminutes};
+  }
+
+  reportPeriod;
+  totalHours
+  avgDistTraveled
+  reportDate=moment(new Date()).format('lll');
+  totalDistanceTraveled=0
+ expotToPdf(){
+    console.log(this.stoppage_data);
+
+    this.downloadPdf()
+    
+  }
+  downloadPdf(){
+    var totalHours=0
+    this.totalHours;
+    this.totalDistanceTraveled=0
+    for(var i=0;i<this.finalArr.length;i++){
+      this.totalDistanceTraveled=this.totalDistanceTraveled+this.finalArr[i].total_odo
+      totalHours=this.totalDistanceTraveled+this.finalArr[i].today_running
+    if(i==this.finalArr.length-1){
+      this.totalDistanceTraveled=this.totalDistanceTraveled/1000;
+      this.totalHours=this.millisecondConversion(totalHours)
+      if(this.days>0){
+        this.avgDistTraveled=this.totalDistanceTraveled/this.days
+      }else{
+         this.avgDistTraveled=this.totalDistanceTraveled
+      }
+    }
+    }
+
+ var image=localStorage.getItem('profilePic')
+ this.reportPeriod= moment(this.Fromdate).format('lll')+' to '+  moment(this.todate).format('lll')    
+console.log(image);
+
+  var outerThis=this;
+
+ var element = $('#cartForKMDriven');
+        var pdfOptions = {
+            orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+            unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+            format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+        };
+
+        var doc = new jsPDF(pdfOptions);
+
+        var pageWidth = doc.internal.pageSize.width-20;
+        var width  =  pageWidth;
+
+        html2canvas(element, {
+            useCORS: true, // MUST
+            onrendered: function(canvas) {
+                var imgWidth = element.width();
+                var imgHeight = element.height();
+
+                var height =  (pageWidth * imgHeight)/ imgWidth
+                var imgData = canvas.toDataURL('image/png');
+
+                 var element1 = $('#cartForHoursDriven');
+                  var pdfOptions = {
+                      orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+                      unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+                      format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+                  };
+                  html2canvas(element1, {
+            useCORS: true, // MUST
+            onrendered: function(canvas) {
+              
+               var element2 = $('#cartForMaxSpeed');
+                  var pdfOptions = {
+                      orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+                      unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+                      format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+                  };
+                  html2canvas(element2, {
+            useCORS: true, // MUST
+            onrendered: function(canvas1) {
+              doc.setFontSize(22);
+              doc.text(151, 9, "Performance Report");
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:35,right:8,top:9},theme:'plain'});
+                var imgWidth2 = element2.width();
+                var imgHeight2 = element2.height();
+
+                var imgWidth1 = element1.width();
+                var imgHeight1 = element1.height();
+
+                var height1 =  (pageWidth * imgHeight1)/ imgWidth1
+                var imgData1 = canvas.toDataURL('image/png');
+
+                 var height2 =  (pageWidth * imgHeight1)/ imgWidth1
+                var imgData2 = canvas1.toDataURL('image/png');
+                outerThis.toDataURL(outerThis.logo1, function (dataUrl) {
+                  if(outerThis.logo1)
+                  doc.addImage(dataUrl, 'JPEG', 2, 2, 27, 27);
+                  doc.addImage(imgData, 'PNG', 5, 30 , width, height-30);
+                  doc.addPage();
+                  doc.addImage(imgData1, 'PNG', 5, 30 , width, height1-30);
+                  doc.addPage();
+                  doc.addImage(imgData2, 'PNG', 5, 30 , width, height2-30);
+                   
+                 doc.autoTable({
+                     head: outerThis.headRows(),
+                     // margin: { top: 80 },
+                     startY: doc.autoTable.previous.finalY + 200,
+                     body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+                     // beforePageContent: header,
+                 });
+                  
+                 
+                doc.save(name);
+              
+              })
+              }
+            })
+            }
+          })
+
+              
+            }
+        });
+
+
+                }
+              
+
+   toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+
+    headRows() {
+
+    return [
+ 
+
+      {
+        deviceName:'device Name',
+        total_odo:'Total Dist.',
+        avg_odo:'Avg Dist.',
+        today_running:'Driven Hours',
+        today_stopped:'Stationary Hours',
+        t_idling:'Excess Idle',
+        today_maxSpeed:'Max Speed',
+        today_routeViolations:'Speed Violation',
+      
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    rowCount = rowCount || 10;
+    let body = [];
+ 
+    for (var j = 0; j < rowCount; j++) {
+      var avg
+      if(this.days>0){
+                      avg= pdfBody[j].total_odo?(Number(pdfBody[j].total_odo)/(1000*this.days)).toFixed(2):'';           
+
+                    }else{
+                      avg= pdfBody[j].total_odo?(Number(pdfBody[j].total_odo)/(1000)).toFixed(2):''; 
+                    }
+      body.push({
+        deviceName:pdfBody[j].devObj[0].Device_Name,
+        total_odo:pdfBody[j].total_odo/1000,
+        avg_odo:avg,
+       today_running:this.millisecondConversion(pdfBody[j].today_running),
+       today_stopped:this.millisecondConversion(pdfBody[j].today_stopped),
+        t_idling:this.millisecondConversion(pdfBody[j].t_idling),
+        today_maxSpeed:pdfBody[j].today_maxSpeed,
+         today_routeViolations:pdfBody[j].today_routeViolations?pdfBody[j].today_routeViolations:0,
+      });
+    }
+    return body;
+  }
+   durationFun(row) {    
+                  let arrival_time = new Date(row.arrival_time).toLocaleString();                 
+                  let departure_time = new Date(row.departure_time).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                
+                  let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+                  
+                  return Durations;
+                 
+                }
+
+
+    cartForKMDriven:any;
+     cartForMaxSpeed:any;
+    cartForHoursDriven:any;
+    vehicleName=[]
+    dataForKMDriven=[];
+    dataForHourDriven=[];
+    maxSpeedData=[]
+    InsertionTime
+  dataToPlot(){
+  console.log("IN CHART");
+  
+    if(this.cartForKMDriven != undefined){
+      this.cartForKMDriven.destroy();
+    }
+     if(this.cartForHoursDriven != undefined){
+      this.cartForHoursDriven.destroy();
+    }
+     if(this.cartForMaxSpeed != undefined){
+      this.cartForMaxSpeed.destroy();
+    }
+    this.vehicleName
+    this.dataForKMDriven
+    this.InsertionTime
+  
+    var that = this;
+    var canvas = <HTMLCanvasElement> document.getElementById("cartForKMDriven");
+    var ctx = canvas.getContext("2d");
+
+     this.cartForKMDriven = new Chart(ctx, {
+      type: 'bar',
+      data: {
+         labels: this.vehicleName,
+  datasets: [{
+    label: 'Kilometer Driven Comparison',
+    data: this.dataForKMDriven,
+   backgroundColor:this.clourArray,
+    borderWidth: 1
+  }]
+      },
+      options: {
+         scaleShowValues: true,
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }],
+              xAxes: [{
+      ticks: {
+        autoSkip: false
+      }
+    }]
+          }
+      }
+  });
+
+
+  var canvas1 = <HTMLCanvasElement> document.getElementById("cartForHoursDriven");
+    var ctx = canvas1.getContext("2d");
+
+     this.cartForKMDriven = new Chart(ctx, {
+      type: 'bar',
+      data: {
+         labels: this.vehicleName,
+  datasets: [{
+    label: 'Graphical View of Driven Hours',
+    data: this.dataForHourDriven,
+     backgroundColor:this.clourArray,
+    borderWidth: 1
+  }]
+      },
+      options: {
+          scaleShowValues: true,
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }],
+              xAxes: [{
+      ticks: {
+        autoSkip: false
+      }
+    }]
+          }
+      }
+  });
+
+
+  var canvas2 = <HTMLCanvasElement> document.getElementById("cartForMaxSpeed");
+    var ctx = canvas2.getContext("2d");
+
+     this.cartForMaxSpeed = new Chart(ctx, {
+      type: 'line',
+      data: {
+         labels: this.vehicleName,
+  datasets: [{
+    label: 'Max Speed',
+    data: this.maxSpeedData,
+    fill: false,
+    borderColor: 'rgb(75, 192, 192)',
+    tension: 0.1
+  }]
+      },
+      options: {
+          scaleShowValues: true,
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }],
+              xAxes: [{
+      ticks: {
+        autoSkip: false
+      }
+    }]
+          }
+      }
+  });
+
+
+  }
+
+}
+
+
diff --git a/src/app/report/report component/poi-report/poi-report.component.html b/src/app/report/report component/poi-report/poi-report.component.html
new file mode 100644
index 0000000..01af9b7
--- /dev/null
+++ b/src/app/report/report component/poi-report/poi-report.component.html	
@@ -0,0 +1,119 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'POI Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align:left;">{{'Device ID' | translate}}</th>
+                      <th style="text-align:left;">{{'POI name' | translate}}</th>
+                      <th style="text-align:left;">{{'Arrival Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Departure Time' | translate}}</th>
+                      <th style="text-align:left;">{{'Address' | translate}}</th>  
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div style="min-height:420px;padding-top: 6%;">
+  <p class="headStyle">{{'POI Report'  | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-2" style="padding-left: 18px;">
+          <md-input-container>
+          <input mdInput placeholder="{{'Type POI Name' | translate}}" [mdAutocomplete]="tdAutoRoute" name="state" 
+          #state="ngModel" [(ngModel)]="routeName"
+          (ngModelChange)="filterRoutes(routeName)">
+         <md-autocomplete #tdAutoRoute="mdAutocomplete">
+            <md-option *ngFor="let route of routeSelect" [value]="route.poiname" >
+              <span>{{route.poiname}}</span>
+            </md-option >
+          </md-autocomplete>   
+        </md-input-container>
+      </div>
+      <div class="col-md-2">
+        <md-input-container>
+        <input mdInput placeholder="{{'Type Device Name' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+        #state="ngModel" [(ngModel)]="deviceName"
+        (ngModelChange)="filterDevices(deviceName)">
+       <md-autocomplete #tdAuto="mdAutocomplete">
+          <md-option *ngFor="let device of deviceSelect" [value]="device.viewValue" >
+            <span>{{device.viewValue}}</span>
+          </md-option >
+        </md-autocomplete>   
+      </md-input-container>
+   
+    </div>
+      <div class="col-md-3">
+        <span>{{'From Date' |  translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2" style="padding-left: 65px;padding-top:17px;">
+          <button style="background-color:#3e3737;border:#fdfdfd;width: 120px;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'SEARCH' | translate}}</button>       
+        </div>
+    </div>
+  </div>
+  <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Device Name' | translate}}</th>
+            <th style="text-align:center;">{{'Device ID' | translate}}</th>
+            <th style="text-align:center;">{{'POI name' | translate}}</th>
+            <th style="text-align:center;">{{'Arrival Time' | translate}}</th>
+            <th style="text-align:center;">{{'Departure Time' | translate}}</th>
+            <th style="text-align:center;">{{'Address' | translate}}</th>         
+        </tr>
+    </thead>    
+</table>
+</div>
+
+ -->
diff --git a/src/app/report/report component/poi-report/poi-report.component.scss b/src/app/report/report component/poi-report/poi-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/poi-report/poi-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/poi-report/poi-report.component.spec.ts b/src/app/report/report component/poi-report/poi-report.component.spec.ts
new file mode 100644
index 0000000..76e979f
--- /dev/null
+++ b/src/app/report/report component/poi-report/poi-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { POIReportComponent } from './poi-report.component';
+
+describe('POIReportComponent', () => {
+  let component: POIReportComponent;
+  let fixture: ComponentFixture<POIReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ POIReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(POIReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/poi-report/poi-report.component.ts b/src/app/report/report component/poi-report/poi-report.component.ts
new file mode 100644
index 0000000..c3b4001
--- /dev/null
+++ b/src/app/report/report component/poi-report/poi-report.component.ts	
@@ -0,0 +1,599 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import * as moment from 'moment';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+@Component({
+  selector: 'app-poi-report',
+  templateUrl: './poi-report.component.html',
+  styleUrls: ['./poi-report.component.scss']
+})
+export class POIReportComponent implements OnInit {
+ finalArr=[]
+  option: any;
+  Fromdate = new Date();
+  todate = new Date();
+  emailid: any;
+  identifier = 'poi_report';
+  useridd: any;
+  tabelObj: any ;
+  deviceName:any;
+  routeName:any;
+  private finalise = new Subject<void>();
+  constructor(public contactService: ContactService,private _service:ReportService) { 
+      this._service.invokeEventForpoiReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      }); 
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+ ngOnDestroy(){
+   
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    this.Fromdate.setHours(0, 0, 0);
+    this.testTable();
+   
+  }
+
+ 
+
+testTable() {
+    const that = this;
+    // console.log("selectedRoute=>",this.routeSelect);
+    $(document).ready(function() {
+        that.tabelObj = $('#deviceTable').DataTable({
+            serverSide: true,
+            "processing": true,
+            "searching": false,
+            "pageLength": 25,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,   
+            ajax: (dataTablesParameters: any, callback) => {
+
+                dataTablesParameters.op = {};
+                dataTablesParameters.select = [];
+                dataTablesParameters.find = {};
+                // console.log(dataTablesParameters);
+                // console.log("callback", callback);
+
+                // dataTablesParameters.find = {
+                //   _id: that.useridd         
+                // };
+                dataTablesParameters.columns = [
+                    { data: "_id" },
+                    { data: "device.Device_Name" },
+                    { data: "device.Device_ID" },
+                    { data: "address" },
+                    { data: "arrivalTime" },
+                    { data: "departureTime" },
+                    { data: "poi.poi.poiname" },
+                  ]
+                //   console.log("selectedRoute=>",that.routeSelect);
+                //   console.log("VehicleID",that.deviceSelect);
+
+                // ==========================================
+                if (that.Fromdate) {
+                    var arrGtObj = { "arrivalTime": { "$gte": that.Fromdate } }
+                    var depGtObj = { "departureTime": { "$gte": that.Fromdate } }
+                }
+
+                if (that.todate) {
+                    var arrLtObj = { "arrivalTime": { "$lte": that.todate } }
+                    var depLtObj = { "departureTime": { "$lte": that.todate } }
+                }
+
+                if (arrGtObj || arrLtObj) {
+                    var arrAndObj1 = { "$and": [] }
+                    if (arrGtObj)
+                        arrAndObj1["$and"].push(arrGtObj);
+                    if (arrLtObj)
+                        arrAndObj1["$and"].push(arrLtObj);
+                }
+
+                if (depGtObj || depLtObj) {
+                    var arrAndObj2 = { "$and": [] }
+                    if (depGtObj)
+                        arrAndObj2["$and"].push(depGtObj);
+                    if (depLtObj)
+                        arrAndObj2["$and"].push(depLtObj);
+                }
+
+                if (arrAndObj1 || arrAndObj2) {
+                    var orArr = []
+                    if (arrAndObj1)
+                        orArr.push(arrAndObj1);
+                    if (arrAndObj2)
+                        orArr.push(arrAndObj2);
+                }
+                var finalObj = { "$or": orArr};
+           
+                dataTablesParameters.find = finalObj;
+              
+                if (that.deviceObj.length != 0){
+                    // console.log(that.deviceSelect);
+                    dataTablesParameters.find.device = that.deviceObj[0];        
+                }
+
+                if (that.poi_id.length != 0) {
+                    
+                    // console.log("routeId=>",that.routeSelect[0].id);              
+                    dataTablesParameters.find.poi = that.poi_id[0];        
+                }
+
+                dataTablesParameters.find.user = that.useridd;
+
+                that.finalArr=[]
+                var suburl = "";
+                suburl += "/poi/datatable";
+                // console.log(suburl);
+                // console.log(dataTablesParameters);
+                // console.log(suburl)
+                if(that.Fromdate && that.todate){
+                    that.contactService.post(suburl, dataTablesParameters).subscribe((resp:any) => {
+                        console.log("poiResp",resp);
+                        that.finalArr=resp
+                        callback(resp);
+                    }, err => {           
+                        // console.log(err.status);
+                    });
+                }else{
+                     callback([]);
+                }
+            },
+            "columns": [
+                {
+                    "data": "device.Device_Name",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "device.Device_ID",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "poi.poi.poiname",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        // console.log("poiData=>",data);
+                        return data ? data : "";
+                    }
+                },
+                {
+                    "data": "arrivalTime",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        var A_time = new Date(data);
+                        return data ? (moment(A_time).format('llll')) : "";
+                    }
+                },
+                {
+                    "data": "departureTime",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                        var D_time = new Date(data);
+                        return data ? (moment(D_time).format('llll')) : "";
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        var created_time = new Date(data);
+                        return data?data:"";
+                    }
+                },             
+            ],
+        });
+
+        that.tabelObj.columns().every( function () {
+            var that = this;
+     
+            $( 'input', this.footer() ).on( 'keyup change', function () {
+                if ( that.search() !== this.value ) {
+                    that
+                        .search( this.value )
+                        .draw();
+                }
+            } );
+        } );
+       
+    });
+
+}
+
+
+searchFilter(){
+    // DataTable
+    var table = $('#deviceTable').DataTable();
+ 
+    // Apply the search
+    table.columns().every( function () {
+        var that = this;
+ 
+        $( 'input', this.footer() ).on( 'keyup change', function () {
+            if ( that.search() !== this.value ) {
+                that
+                    .search( this.value )
+                    .draw();
+            }
+        } );
+    } );
+
+}
+deviceObj = [];
+// getAllDevice() {
+//     this.contactService.getDevice(this.emailid,this.useridd)
+//         .subscribe(res => {
+//             // console.log(res);
+//             // console.log("allDevices=>", res);
+//             this.deviceObj = [];
+//             var Alldevices = {
+//                 id: "all",
+//                 viewValue: "ALL Devices"
+//             }
+//             this.deviceObj.push(Alldevices);
+
+//             for (var i = 0; i < res.devices.length; i++) {
+//                 Alldevices = {
+//                     id: res.devices[i]._id,
+//                     viewValue: res.devices[i].Device_Name ? res.devices[i].Device_Name : ""
+//                 }
+
+//                 this.deviceObj.push(Alldevices)
+//             }
+//             // console.log("deviceArray", this.deviceObj);
+
+//         }, err => {
+//             // console.log(err.status);
+//         })
+// }
+
+
+
+
+deviceSelect: any = [];
+
+filterDevices(dlr) {
+
+    // console.log("deviceData=>", dlr);
+    if (dlr) {
+        // console.log(dlr);
+
+        const filterdealerValue: any = dlr;
+
+        this.deviceSelect = [];
+        this.deviceSelect = this.deviceObj.filter(function(pp) {
+         
+            // console.log("dealerValue=>",pp);
+            var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+
+            return t > -1;
+        });
+        // console.log(this.deviceSelect);
+        return this.deviceSelect;
+    }
+
+}
+
+// Routename filter 
+route_detail_show=[];
+poiArr=[];
+// getPOI(){
+//     // console.log("Mapping history !!!");
+//     this.contactService.getPOI(this.useridd)
+//     .subscribe(res=>{
+//     //   console.log("routedet",res);
+//       this.route_detail_show=res;
+
+//       var poiObj = {
+//           poiname: "All POI",
+//           id : "All"
+//       }
+//       this.poiArr.push(poiObj);
+//       for(var i=0;i<this.route_detail_show.length;i++){
+//         poiObj ={
+//             poiname: this.route_detail_show[i].poi.poiname,
+//             id : this.route_detail_show[i]._id
+//           }
+
+//           this.poiArr.push(poiObj);
+//       }
+
+//     //   console.log("routeDetails=>",this.poiArr);
+//     })
+//   }
+  routeSelect=[];
+//   filterRoutes(route_ID){
+//     //   console.log(route_ID);
+//       if (route_ID) {
+//         //   console.log(route_ID);
+//           const filterRouteValue: any = route_ID;
+  
+//           this.routeSelect = [];
+          
+//         //   console.log("routeData=>", this.route_detail_show);
+//           this.routeSelect = this.poiArr.filter(function(rte) {
+//             // console.log("routeObj=>",rte);
+//               var r = rte.poiname.toLocaleLowerCase().indexOf(filterRouteValue.toLocaleLowerCase());     
+//               return r > -1;
+//           });
+//         //   console.log("filtered route=>",this.routeSelect);
+//           return this.routeSelect;
+//       }
+
+//   }
+
+  tab:any;
+  exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        // console.log('tab_text',JSON.parse(tab_text));
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+  deviceArr :any=[];
+  poi_id:any=[];
+  getReport(event){
+   if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+        console.log(event);
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceObj = deviceId; 
+      this.poi_id  = event.poi_id ;
+
+      
+      this.Fromdate = fd;
+      this.todate = td;
+
+      
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa);   
+      this.tabelObj.draw(); 
+        // this.tabelObj.ajax.reload();        
+    }
+   
+  }
+
+  expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "POI Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//   //   var f_date = moment(this.from_date).format('lll'); 
+//   // var t_date =moment(this.to_date).format('lll');
+//   // var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('POI Report ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "POI Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("POI Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle Name',
+        Device_ID:'Device Id',
+        poi:'Poi Name',
+        arrivalTime:'Arrival Time',
+        departureTime:'Departure Time',
+        address:'Address',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleName:pdfBody[j].device.Device_Name,
+       Device_ID:pdfBody[j].device.Device_ID,
+       poi:pdfBody[j].poi?pdfBody[j].poi:'N/A',  
+       arrivalTime:moment(new Date(pdfBody[j].arrivalTime)).format('llll'), 
+       departureTime:moment(new Date(pdfBody[j].departureTime)).format('llll'),
+        address:pdfBody[j].address?pdfBody[j].address:'N/A'
+      });
+    }
+    return body;
+  }
+
+}
diff --git a/src/app/report/report component/push-data-report/push-data-report.component.html b/src/app/report/report component/push-data-report/push-data-report.component.html
new file mode 100644
index 0000000..4bff71e
--- /dev/null
+++ b/src/app/report/report component/push-data-report/push-data-report.component.html	
@@ -0,0 +1,58 @@
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Push Data Report' | translate}}</h4>
+    </div>
+  </div>
+
+  <div class="row rowStyle">
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+            <!-- <div id="toast">
+              <div id="desc">{{data_descip}}</div>
+            </div> -->
+          <div class="row" style="padding: 8px;margin-bottom: 8px;">
+           
+
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align:left;width:100px">{{'Vehicle Name'|translate}} </th>
+                  <th style="text-align:left;width:100px">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Pushing Date' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Device Date' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Integartion Id' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Last Location' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'GMT' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'GPS Date' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Response' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Raw' | translate}}</th>
+                  <!-- <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Remark' | translate}}</th>
+                  <th style="text-align:left;width:100px">{{'Update Status' | translate}}</th> -->
+
+                </tr>
+              </thead>
+            </table>
+
+
+          </div>
+
+        <table id="headerTable" style="border: 1px solid black;width: 100%;
+                    border-collapse: collapse;position: absolute;top: -62px;">
+          <tr style="height:30px;border-top:1px solid black;">
+            <td>
+              <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+              date:"medium"}}
+            </td>
+            <!-- <td>
+                    <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+                  </td> -->
+          </tr>
+        
+        </table>
\ No newline at end of file
diff --git a/src/app/report/report component/push-data-report/push-data-report.component.scss b/src/app/report/report component/push-data-report/push-data-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/push-data-report/push-data-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/push-data-report/push-data-report.component.spec.ts b/src/app/report/report component/push-data-report/push-data-report.component.spec.ts
new file mode 100644
index 0000000..48d8613
--- /dev/null
+++ b/src/app/report/report component/push-data-report/push-data-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PushDataReportComponent } from './push-data-report.component';
+
+describe('PushDataReportComponent', () => {
+  let component: PushDataReportComponent;
+  let fixture: ComponentFixture<PushDataReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PushDataReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PushDataReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/push-data-report/push-data-report.component.ts b/src/app/report/report component/push-data-report/push-data-report.component.ts
new file mode 100644
index 0000000..a165481
--- /dev/null
+++ b/src/app/report/report component/push-data-report/push-data-report.component.ts	
@@ -0,0 +1,526 @@
+import { Component, OnInit } from '@angular/core';
+import { ReportService } from '../../report.service';
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf";
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+declare var _:any;
+import * as moment from 'moment';
+import { ContactService } from '../../../contact.service';
+import { ViewRawComponent } from './view-raw/view-raw.component';
+import { MdDialog } from '@angular/material';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+@Component({
+  selector: 'app-push-data-report',
+  templateUrl: './push-data-report.component.html',
+  styleUrls: ['./push-data-report.component.scss']
+})
+export class PushDataReportComponent implements OnInit {
+deviceArr = [];
+  Fromdate: Date;
+  finalArr=[];
+  data_descip
+  Load:boolean=false
+  todate: Date;
+  tabelObj: any;
+  useridd: any;
+  private finalise = new Subject<void>();
+  constructor(private reportService:ReportService,private contactService:ContactService,public dialog: MdDialog) { 
+    this.reportService.invokeEventForDataPushReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      }); 
+  }
+ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.testTable()
+  }
+
+  getReport(event){
+  
+  console.log("inside function");
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+  
+    
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();   
+  }
+ 
+}
+
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+    
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+             $('#raw', row).bind('click', () => {  
+              if(that.dialog.openDialogs && that.dialog.openDialogs.length > 0){
+      return false;
+    }
+    let dialogRef = that.dialog.open(ViewRawComponent, {
+//  width: '503px',
+//  height:'400px',
+    data: data.raw?data.raw:{}
+ });
+ dialogRef.afterClosed().subscribe((result) => {
+      dialogRef = null;
+     
+      //add code to perform any other actions on pop-up close.
+    });
+    
+                     
+            });
+          },
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true;
+             
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            var suburl = "";
+            that.finalArr=[]
+            
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+              suburl += "/pullData/getPushData?from_date=" + new Date(temp.from_date).toISOString() +'&to_date=' + new Date(temp.to_date).toISOString() + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe((resp:any) => {   
+                // console.log(ignReport.length);  
+                that.finalArr=resp;
+                for(var i=0;i<resp.length;i++){
+                  resp[i].last_device_time=resp[i].last_device_time?resp[i].last_device_time:'N/A'
+                  console.log(typeof(resp[i].response));
+                  
+                  if(typeof(resp[i].response)=="object"){
+                    resp[i].response=JSON.stringify(resp[i].response)
+                  }
+                }
+                // that.getWorkingHour(resp);
+                that.Load = false;
+                callback({data : resp });
+            }, err => {   
+              that.Load= false;    
+              console.log("error",err) ;     
+            });
+
+            }else{
+              let ta = [];
+              that.Load = false;
+              callback({data : ta });
+            }
+          
+        },  
+      
+          "columns": [
+              {
+                  "data": "vehicleNo",
+                  "defaultContent": "",
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                  "data": "Unit",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data?data:'';        
+                  }
+              },
+              {
+                  "data": "DATE",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var expDate = new Date(data);
+                    return data ? (moment(expDate).format('D MMM YYYY, h:mm:ss a')) : "";  
+                
+                  }
+              },
+               {
+                  "data": "last_device_time",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    // return data ? data : "";  
+                     var expDate = new Date(data);
+                    return data ? (moment(expDate).format('D MMM YYYY, h:mm:ss a')) : "";  
+                
+                  }
+              },
+              {
+                  "data": "DeviceCompanyId",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data ? data : "";  
+                
+                  }
+              },
+              
+              {
+                  "data": "Latitude",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                   var lat=row.Latitude?row.Latitude:0
+                   var long=row.Longitude?row.Longitude:0       
+                   return lat+', '+long;  
+                
+                  }
+              },
+              {
+                  "data": "gmt",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var expDate = new Date(data);
+                    return data ? (moment(expDate).format('D MMM YYYY, h:mm:ss a')) : "";
+                    // return data ? data : "";  
+                
+                  }
+              },
+              {
+                  "data": "gps_datetime",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    var expDate = new Date(data);
+                    return data ? (moment(expDate).format('D MMM YYYY, h:mm:ss a')) : "";
+                
+                  }
+              },
+              
+              {
+                  "data": "response",
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                    return data ? data : "";  
+                
+                  }
+              }, 
+              {
+                  "data": null,
+                  "defaultContent": "",
+                  render: function(data, type, row) {
+                   return `<button class="btn btn=info btn-sm"><i id="raw"  style="font-size:20px;color: green" class="fas fa-info"></i></button> `
+                
+                  }
+              },
+        
+              
+          //   {
+          //     "data": "address",
+          //     "defaultContent": "_id",
+          //     render: function(data, type, row) {        
+          //         let lat = row.lat;
+          //         let long = row.long;        
+          //         var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+          //         if(data){
+          //           return data ;
+          //         }else{
+          //           return addressLink;     
+          //         }
+          //     }
+          // }                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6,7,8,9] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          } ,
+          { "width": "30px", "targets": 0 },
+          { "width": "30px", "targets": 1 },
+          { "width": "30px", "targets": 2 },
+          { "width": "30px", "targets": 3 },
+           { "width": "30px", "targets": 4 },
+           { "width": "30px", "targets": 5 },
+            { "width": "30px", "targets": 6 },
+            { "width": "30px", "targets": 7 },
+            { "width": "30px", "targets": 8 },
+            { "width": "30px", "targets": 9 },
+       
+          ] 
+      });
+
+  });
+
+}
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+
+expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+// downloadPdf() {
+//     let fileName =
+//       "Push Data Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+//     var f_date = moment(this.Fromdate).format('lll'); 
+//   var t_date =moment(this.todate).format('lll');
+//   var date_combine = f_date + ' to ' + t_date;
+//   // doc.setFontSize(30);
+//   doc.setFontSize(15);
+//   doc.text('Push Data ', 20, 30);
+//   // doc.text(date_combine, 250, 60);
+//     doc.setFontStyle("arial");
+
+//       var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+//     //doc.addImage(headerImgData, 'JPEG', data.settings.margin.left, 20, 50, 50);
+//     // doc.text("Testing Report", data.settings.margin.left, 50);
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Data Push Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+//  outerThis.startAddress= outerThis.finalArr[0].address;
+//  outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Data Push Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleNo:'Vehicle',
+        Unit:'IMEI',
+        DeviceCompanyId:'Integration ID',
+        last_device_time:"Last Device Time",
+        DATE:'Date Time',
+        Latitude:'Latitude',
+        Longitude:'Longitude',
+        gmt:"GMT",
+        gps_datetime:"GPS DATE",
+        response:'Response',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleNo:pdfBody[j].vehicleNo,
+        Unit:pdfBody[j].Unit,
+        DeviceCompanyId:pdfBody[j].DeviceCompanyId,
+        last_device_time:pdfBody[j].last_device_time?(moment(pdfBody[j].last_device_time).format('D MMM YYYY, h:mm:ss a')):'N/A',
+        DATE:pdfBody[j].DATE?(moment(pdfBody[j].DATE).format('D MMM YYYY, h:mm:ss a')):'N/A',
+        Latitude:pdfBody[j].Latitude,
+        Longitude:pdfBody[j].Longitude,
+        gmt:pdfBody[j].gmt?pdfBody[j].gmt:'',
+        gps_datetime:pdfBody[j].gps_datetime?pdfBody[j].gps_datetime:'',
+        response:pdfBody[j].response?pdfBody[j].response:'N/A'
+      
+
+      });
+    }
+    return body;
+  }
+
+}
diff --git a/src/app/report/report component/push-data-report/view-raw/view-raw.component.html b/src/app/report/report component/push-data-report/view-raw/view-raw.component.html
new file mode 100644
index 0000000..1a65fec
--- /dev/null
+++ b/src/app/report/report component/push-data-report/view-raw/view-raw.component.html	
@@ -0,0 +1,15 @@
+
+<div class="card">
+  <div class="card-header">
+    <h5>Raw Data</h5>
+    <button type="button" class="close pull-right" style="font-size: xx-large;" aria-label="Close"
+      (click)="dialogRef.close()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="card-body">
+    <h4>{{data | json}}</h4>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/push-data-report/view-raw/view-raw.component.scss b/src/app/report/report component/push-data-report/view-raw/view-raw.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/push-data-report/view-raw/view-raw.component.spec.ts b/src/app/report/report component/push-data-report/view-raw/view-raw.component.spec.ts
new file mode 100644
index 0000000..e8c7fdf
--- /dev/null
+++ b/src/app/report/report component/push-data-report/view-raw/view-raw.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ViewRawComponent } from './view-raw.component';
+
+describe('ViewRawComponent', () => {
+  let component: ViewRawComponent;
+  let fixture: ComponentFixture<ViewRawComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewRawComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ViewRawComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/push-data-report/view-raw/view-raw.component.ts b/src/app/report/report component/push-data-report/view-raw/view-raw.component.ts
new file mode 100644
index 0000000..0445a63
--- /dev/null
+++ b/src/app/report/report component/push-data-report/view-raw/view-raw.component.ts	
@@ -0,0 +1,19 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../../contact.service';
+
+@Component({
+  selector: 'app-view-raw',
+  templateUrl: './view-raw.component.html',
+  styleUrls: ['./view-raw.component.scss']
+})
+export class ViewRawComponent implements OnInit {
+
+   constructor(public dialogRef: MdDialogRef<ViewRawComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService:ContactService) {
+      console.log(data);
+    }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/report/report component/route-violation/route-violation.component.html b/src/app/report/report component/route-violation/route-violation.component.html
new file mode 100644
index 0000000..bdd1950
--- /dev/null
+++ b/src/app/report/report component/route-violation/route-violation.component.html	
@@ -0,0 +1,102 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Route Violation Report' | translate}}</h4>
+    </div>
+  </div>  
+<div id="toast">
+  <div id="desc">{{data_descip}}</div>
+</div>
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: center;">{{'Route' | translate}}</th>
+                      <th style="text-align: center;">{{'Location' | translate}}</th>
+                      <th style="text-align: center;">{{'Datetime' | translate}}</th> 
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+      <!-- <app-all-menus></app-all-menus> 
+  <div style="float:left; width: 100%;min-height:100vh;padding-top:6%">
+    <p class="headStyle">{{'Route Violation Report' | translate}}</p>
+    <div class="InputStyle">
+      <div class="row">
+        <div class="col-md-3">
+          <md-select class="selecStyle" [name]="'typdev'" placeholder="--{{'Select Route' | translate}}--"  [(ngModel)]="option" ngDefaultControl>
+            <md-option *ngFor="let option of options" [value]="option">
+              {{ option.name }}
+            </md-option>
+          </md-select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button md-raised-button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" (click)="route_vioation(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
+            <button md-raised-button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+      </div>
+    </div>
+    <table id="test" class="table table-striped table-hover "style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align: center;">{{'Route' | translate}}</th>
+          <th style="text-align: center;">{{'Location' | translate}}</th>
+          <th style="text-align: center;">{{'Datetime' | translate}}</th>        
+        </tr>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let device of route">
+          <td style="cursor:pointer">{{device.vehicleName}}</td>
+          <td style="cursor:pointer">{{device.track?device.track.name:'NA'}}</td>
+          <td style="cursor:pointer">{{device.address}}</td>
+          <td style="cursor:pointer">{{device.timestamp | date:'short'}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ -->
diff --git a/src/app/report/report component/route-violation/route-violation.component.scss b/src/app/report/report component/route-violation/route-violation.component.scss
new file mode 100644
index 0000000..efc4dde
--- /dev/null
+++ b/src/app/report/report component/route-violation/route-violation.component.scss	
@@ -0,0 +1,86 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/route-violation/route-violation.component.spec.ts b/src/app/report/report component/route-violation/route-violation.component.spec.ts
new file mode 100644
index 0000000..20fe698
--- /dev/null
+++ b/src/app/report/report component/route-violation/route-violation.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteViolationComponent } from './route-violation.component';
+
+describe('RouteViolationComponent', () => {
+  let component: RouteViolationComponent;
+  let fixture: ComponentFixture<RouteViolationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteViolationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteViolationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/route-violation/route-violation.component.ts b/src/app/report/report component/route-violation/route-violation.component.ts
new file mode 100644
index 0000000..6de31ee
--- /dev/null
+++ b/src/app/report/report component/route-violation/route-violation.component.ts	
@@ -0,0 +1,524 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+declare var google: any;
+declare var $:any;
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-route-violation',
+  templateUrl: './route-violation.component.html',
+  styleUrls: ['./route-violation.component.scss']
+})
+export class RouteViolationComponent implements OnInit {
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  tabelObj:any;
+  superAdmin:Boolean = false;
+  date1:any;
+  data_descip:any
+  user_against_route: any=[];
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) {
+     this._service.invokeEventForrouteViolationReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      }); 
+   }
+ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+   
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+       this.testTable();
+      
+  }
+
+//   ign(){
+//     this.router.navigateByUrl("device-report/ign-report");
+  
+//   }
+
+//   ignition_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/ignition_report");
+
+
+//   }
+
+
+//   alert_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/alert_report");
+//   }
+
+
+
+//   trip_report(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/trip_report");
+  
+//   }
+
+// 	Ddetail(){
+//     this.router.navigateByUrl("driverdetail");
+//   }
+//   DModel(){
+//     this.router.navigateByUrl("deviceModel");
+//   }
+//   VType(){
+//     this.router.navigateByUrl("VehicleType");
+//   }
+  
+//   route_map(){
+//     this.router.navigateByUrl("routeMapping");
+
+//   }
+
+//   notification(){
+//     this.cond = false
+//     this.router.navigateByUrl("notifications");
+//   }
+  
+//   driverPerformance(){
+//     this.cond = false
+//     this.router.navigateByUrl("device-report/Driver-performance");
+//   }
+  
+//   ideal(){
+//     this.router.navigateByUrl("device-report/ideal-report");
+//   }
+//   geo(){
+//     this.router.navigateByUrl("geofencing");
+    
+//   }
+//   myaccount(){
+   
+//     let dialogRef = this.dialog.open(MyaccountComponent, {
+//       width: '903px',
+//       data: {}
+//     });
+  
+//     dialogRef.afterClosed().subscribe(result => {
+  
+//       if(result == "succ"){
+//         // console.log("Updated")
+//       }
+  
+//     });
+//   }
+// openNav() {
+//   /*  document.getElementById("myNav").style.width = "100%";
+// */
+//    this.router.navigateByUrl("location");
+
+// }
+// logout(){
+//   window.localStorage.clear();
+//   this.router.navigateByUrl("login");
+// }
+// devi(){
+//   this.router.navigateByUrl("dashboard");
+
+// }
+// soon(){
+//   this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+// }
+// new(){
+//   this.router.navigateByUrl("new");
+  
+// }
+// cond:Boolean = false;
+// point : any = 0;
+//  a(){
+//   // console.log(this.point);
+//    if(this.point == 0){
+//     this.cond = true;
+//     this.point ++;
+//    }
+//  else if(this.point % 2 == 0){
+//   this.cond = true;
+//   this.point ++;
+//  }
+//  else{
+//    this.cond = false
+//    this.point ++;
+//  }
+
+  
+// }
+// addcus(){
+//   this.router.navigateByUrl("add");
+// }
+// report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report");
+
+// }
+// report_speed(){
+//   // console.log("report speed call")
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/device-speed-report");
+// }
+// mydealer(){
+//   window.localStorage['token'] =  window.localStorage['Dealer_token'];
+//   localStorage.removeItem('devices');
+//   window.localStorage['DataUpdate'] = 'True';
+//   if(window.localStorage['DataLoaded'] = 'True'){
+//     window.localStorage['Custumer'] = 'OFF'
+//     this.router.navigateByUrl("add")
+//    // this.router.navigateByUrl("const?_status="+"OK");
+//   }
+// }
+
+// summaryReport(){
+
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/summary-report");
+// }
+
+// vehicleRoute(){
+//   this.router.navigateByUrl("vehicleRoute");
+
+// }
+
+// dealerInfo(){
+//   this.cond = false
+//   this.router.navigateByUrl("dealerInfo");
+// }
+
+// geofancingReport(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/geofancing");
+// }
+
+// overspeed(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/overspeed");
+
+// }
+
+// routeViolation(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/routeViolation");
+
+// }
+
+// stoppage_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/stoppage_report");
+
+// }
+
+// group(){
+//   this.cond = false
+//   this.router.navigateByUrl("group_view");
+// }
+
+// distance_report(){
+//   this.cond = false
+//   this.router.navigateByUrl("device-report/distance_report");
+// }
+  routeViolation_data=[];
+  route:any;
+  show_time:any;;
+  vehicle_name:any;
+  address_show:any;
+  start_add:any;
+  lattitude:any;
+  longitude:any;
+  route_name:any;
+
+  route_vioation(Fromdate,todate,option){
+    let f_date = Fromdate.toISOString();
+    let t_date =  todate.toISOString();
+    this.routeViolation_data=[];
+    let uId = option.user;
+    var outerThis = this;
+
+    this.contactService.route_violation(f_date, t_date, uId) 
+    .subscribe(res=>{
+        // console.log(res);
+        this.route = res;
+      })
+  }
+
+
+
+  // export_to_XL(Fdate,tdate,option){
+  //   // console.log(Fdate);
+  //   // console.log(tdate);
+  //   // console.log(option)
+  //   let uId = option.user;
+  //   let vName= option.value;
+  //   this.contactService.xlRVReport(Fdate.toISOString(),tdate.toISOString(),this.useridd)
+  //     .subscribe(res=>{
+  //       // console.log('xcelreport',res);
+  //     })
+  // }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+              console.log('temptemptemptemptemp',dataTablesParameters);
+                var deviceID;
+                that.Load = true;
+               
+                // dataTablesParameters.find._u = that.useridd;
+              
+                // dataTablesParameters.find._u = user;
+  
+                // if(that.deviceArr.length != 0){
+           
+                  // dataTablesParameters.find.vname = deviceId;
+                // }
+              // if (that.Fromdate) {
+                  // var fdate = new Date(that.Fromdate).toISOString()      
+                  // dataTablesParameters.find.f_date = fdate    
+                  // dataTablesParameters.find.f_date =  from_date;    
+              // };
+  
+              // if (that.todate) {
+                // var fdate = new Date(that.todate).toISOString()      
+                // dataTablesParameters.find.t_date = fdate     
+                  // dataTablesParameters.find.t_date = to_date  ;
+            // };
+            // this.deviceArr = deviceId; 
+           
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              let user; 
+          if(that.user_against_route.length != 0){
+             user = that.user_against_route[0].user
+          }else{
+            console.log("Please Select Route");
+          }
+          console.log(user);
+            if((from_date != undefined)&&(to_date != undefined) && that.user_against_route.length != 0){
+              that.contactService.route_violation(from_date, to_date, user).subscribe(res=>{
+                // console.log(res);
+                that.Load = false;
+                that.route = res;
+                callback({data : that.route})
+              },err=>{
+                that.Load = false;
+              })
+
+            }else{
+                 that.data_descip = "Select Route" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+              let ta =[];
+              that.Load = false;
+              callback({data : ta})
+            }
+      
+             
+            
+          },  
+        
+            "columns": [
+                {
+                    "data": "vehicleName",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "track",
+                    render: function(data, type, row) {
+                      return data?data.name:'';        
+                    }
+                },
+                {
+                    "data": "address",
+                    "defaultContent": "_id",
+                    render: function(data, type, row) {
+                      return data?data:"";  
+                    }
+                },            
+              {
+                "data": "timestamp",
+                render: function(data, type, row) {        
+                  var rt = new Date(data);
+                  return data ? (moment(rt).format('llll')) : "";  
+                }
+            }                       
+            ],  
+            "columnDefs": [ 
+              { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            } ,
+            { "width": "10px", "targets": 0 },
+            { "width": "40px", "targets": 1 },
+            { "width": "100px", "targets": 2 },
+            { "width": "70px", "targets": 3 },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+
+
+
+  tab:any;
+  exportExcel()
+  {
+  
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      // table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];
+  
+      for(j = 0 ; j < this.tab.rows.length ; j++) 
+      {     
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+         
+      }
+  
+      tab_text=tab_text+"</table>";
+     
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+  
+  deviceArr =[];
+  identifier  ="route_violation_report";
+
+  getReport(event){
+    this.user_against_route =[];
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      // if(event.deviceArr.length==0){
+      //   deviceId=[];
+      // }else{
+      //   deviceId= event.deviceArr;
+      // }
+      // this.deviceArr = deviceId; 
+        if(event.route.length != 0){
+          this.user_against_route = event.route;
+        }
+     
+      console.log('this.deviceArr', this.user_against_route);
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+      
+      // this.tabelObj.clear();
+      // var aa = [];
+      // this.tabelObj.rows.add(aa);  
+       this.tabelObj.ajax.reload();    
+    
+    }
+   
+  }
+  
+ 
+
+
+}
diff --git a/src/app/report/report component/start/start.component.html b/src/app/report/report component/start/start.component.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/start/start.component.scss b/src/app/report/report component/start/start.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/start/start.component.spec.ts b/src/app/report/report component/start/start.component.spec.ts
new file mode 100644
index 0000000..ed4908a
--- /dev/null
+++ b/src/app/report/report component/start/start.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartComponent } from './start.component';
+
+describe('StartComponent', () => {
+  let component: StartComponent;
+  let fixture: ComponentFixture<StartComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/start/start.component.ts b/src/app/report/report component/start/start.component.ts
new file mode 100644
index 0000000..05b8fa7
--- /dev/null
+++ b/src/app/report/report component/start/start.component.ts	
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-start',
+  templateUrl: './start.component.html',
+  styleUrls: ['./start.component.scss']
+})
+export class StartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/report/report component/stoppage-report/stoppage-report.component.html b/src/app/report/report component/stoppage-report/stoppage-report.component.html
new file mode 100644
index 0000000..49765ff
--- /dev/null
+++ b/src/app/report/report component/stoppage-report/stoppage-report.component.html	
@@ -0,0 +1,170 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Stoppage Report' | translate}}</h4>
+      <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th>{{'Vehicle Name' | translate}}</th>
+                      <th>{{'From Time' | translate}}</th>
+                      <th>{{'To Time' | translate}}</th>
+                      <th>{{'Duration' | translate}}</th>
+                      <th>{{'Location' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+
+
+
+
+
+
+
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+    <p class="headStyle">{{'Stoppage Report' | translate}}</p>
+    <div class="InputStyle">
+        <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+      <div class="row">
+          <div class="col-md-2">
+              <md-select  [(ngModel)]="duration" placeholder="--{{'Select Duration' | translate}}--" md-tooltip="{{'Search report by Duration' | translate}}">
+                  <md-option *ngFor="let duration of filterDurations" [value]="duration" (click)="filterReport()">
+                    {{ duration.viewvalue }}
+                  </md-option>
+                </md-select>
+          </div>
+        <div class="col-md-3">
+            <i style="cursor:pointer;" class="material-icons">settings_backup_restore</i>
+            <md-input-container>
+                <input mdInput placeholder="Devices" [mdAutocomplete]="tdAutoS" name="state" 
+                #state="ngModel" [(ngModel)]="option" 
+               (ngModelChange)="filterStoppageStates(option)">
+               <md-autocomplete #tdAutoS="mdAutocomplete">
+                  <md-option *ngFor="let optionS of dataStoppage" [value]="optionS.value" (click)="getStoppageObj(optionS)">
+                    <span>{{ optionS.value }}</span>
+                  </md-option>
+                </md-autocomplete> 
+              </md-input-container>
+       
+        </div>
+        <div class="col-md-2">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-2">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;" >
+            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="stoppageReport(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+            <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/"(click)="exportExcel()">{{'Export to excel' | translate}}</button>
+          </div>
+    
+      </div>
+    </div>
+   
+    <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'Vehicle Name' | translate}}</th>
+          <th>{{'From Time' | translate}}</th>
+          <th>{{'To Time' | translate}}</th>
+          <th>{{'Duration' | translate}}</th>
+          <th>{{'Location' | translate}}</th>
+      </thead>
+
+      <tbody>
+
+        <tr *ngFor="let report of report_to_show">
+            
+          <td style="cursor:pointer">{{report.deviceName}}</td>
+
+          <td style="cursor:pointer">{{report.arrivalTime}}</td>
+
+          <td style="cursor:pointer">{{report.departureTime}}</td>
+
+          <td style="cursor:pointer">{{report.duration}}</td>
+
+          <td style="cursor:pointer">
+            <p *ngIf="report.location != undefined">{{report.address}}</p>
+            <a *ngIf="report.location == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+           
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover " style="display: none">
+<thead style="background-color:#A2C523;color: white;">
+ <tr>
+   <th>Vehicle Name</th>
+   <th>From Time</th>
+   <th>To Time</th>
+   <th>Duration</th>
+   <th>Location</th>
+</thead>
+
+<tbody>
+
+ <tr *ngFor="let report of report_to_show">
+     
+   <td style="cursor:pointer">{{report.deviceName}}</td>
+
+   <td style="cursor:pointer">{{report.arrivalTime}}</td>
+
+   <td style="cursor:pointer">{{report.departureTime}}</td>
+
+   <td style="cursor:pointer">{{report.duration}}</td>
+
+   <td style="cursor:pointer">
+     <p *ngIf="report.location != undefined">{{report.address}}</p>
+     <a *ngIf="report.location == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
+
+   </td>
+ </tr>
+</tbody>
+</table>
+  </div> -->
diff --git a/src/app/report/report component/stoppage-report/stoppage-report.component.scss b/src/app/report/report component/stoppage-report/stoppage-report.component.scss
new file mode 100644
index 0000000..efc4dde
--- /dev/null
+++ b/src/app/report/report component/stoppage-report/stoppage-report.component.scss	
@@ -0,0 +1,86 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/stoppage-report/stoppage-report.component.spec.ts b/src/app/report/report component/stoppage-report/stoppage-report.component.spec.ts
new file mode 100644
index 0000000..6160c55
--- /dev/null
+++ b/src/app/report/report component/stoppage-report/stoppage-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StoppageReportComponent } from './stoppage-report.component';
+
+describe('StoppageReportComponent', () => {
+  let component: StoppageReportComponent;
+  let fixture: ComponentFixture<StoppageReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StoppageReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StoppageReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/stoppage-report/stoppage-report.component.ts b/src/app/report/report component/stoppage-report/stoppage-report.component.ts
new file mode 100644
index 0000000..5da751a
--- /dev/null
+++ b/src/app/report/report component/stoppage-report/stoppage-report.component.ts	
@@ -0,0 +1,760 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-stoppage-report',
+  templateUrl: './stoppage-report.component.html',
+  styleUrls: ['./stoppage-report.component.scss']
+})
+export class StoppageReportComponent implements OnInit {
+  identifier : any = 'stoppage_report';
+  address: any;
+  // overSpeedobject:any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  dataStoppage: any[];
+  stoppage_obj: any;
+  duration:any;
+  // filterDurations=[{
+  //   value:2,
+  //   viewvalue:"More than 2 Hours"
+  // },
+  // {
+  //   value:6,
+  //   viewvalue:"More than 6 Hours"
+  // },
+  // {
+  //   value:12,
+  //   viewvalue:"More than 12 Hours"
+  // },{
+  //   value:24,
+  //   viewvalue:" More than 24 Hours"
+  // }]
+  stoppage_duration: any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private _service:ReportService,private router: Router,public dialog: MdDialog) {
+ this._service.invokeEventForstoppageReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+   ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+
+    // var fTime = new Date().setHours(0,0,0);
+    // this.Fromdate = new Date(fTime);
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           email: this.devicesss.devices[i].Email_ID,
+    //           deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       }
+
+    //     }
+    //       // console.log(this.options);
+     
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable()
+    // this.tabelObj;
+       
+  }
+
+ 
+
+
+  stoppage_data=[];
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  // stoppageReport(Fromdate,todate){
+ 
+  //   let f_date = Fromdate.toISOString();
+  //   let t_date =  todate.toISOString();
+  
+  //   var uId= this.useridd
+   
+
+  //   var vName="";
+  // if((this.dataStoppage==undefined)||(this.dataStoppage.length==0)){
+  //   vName="";
+  // }else{
+  //   vName= this.dataStoppage?this.dataStoppage[0].id:"";
+  // }
+
+  //   // console.log(vName)
+  //   this.report_to_show=[];
+  //   var outerThis = this;
+   
+  //   // console.log('completeObj',uId,vName);
+  //   this.Load =true;
+  //   this.contactService.stoppage_report(f_date,t_date,uId,vName)
+  //   .subscribe(res=>{
+  //     console.log(res)
+  //    this.Load = false;
+  //     this.stoppage_data = res;
+  //     // console.log(this.stoppage_data)
+
+  //     // for(var i=0;i<this.stoppage_data.length;i++){
+  //      for(var i=0;i<this.stoppage_data.length;i++){
+  //       this.arrival_time = new Date(this.stoppage_data[i].arrival_time).toLocaleString();
+       
+  //       this.departure_time = new Date(this.stoppage_data[i].departure_time).toLocaleString();
+  //       var fd = new Date(this.arrival_time ).getTime();
+  //       var td = new Date(this.departure_time).getTime();
+  //       var time_difference = td-fd;
+  //       var total_min = time_difference/60000;
+  //       var hours = total_min/60
+  //       var rhours = Math.floor(hours);
+  //       var minutes = (hours - rhours) * 60;
+  //       var rminutes = Math.round(minutes);
+      
+  //       this.Durations = rhours +'hrs'+ rminutes + 'min';
+  //       this.address = this.stoppage_data[i].address
+        
+  //       this.overSpeedobject = {
+  //         deviceName : this.stoppage_data[i].device?this.stoppage_data[i].device.Device_Name:"NA",
+  //         arrivalTime:this.arrival_time,
+  //         departureTime: this.departure_time,
+  //         duration:this.Durations,
+  //         location: this.address,
+  //         lattitude   : this.stoppage_data[i].lat?this.stoppage_data[i].lat : 0,
+  //         longitude : this.stoppage_data[i].long?this.stoppage_data[i].long : 0,
+  //       }
+   
+  //     this.report_to_show.push(this.overSpeedobject)
+
+  //      }
+  //   },err=>{
+  //     this.Load = false;
+  //     console.log("error while fetching data",err);
+  //   })    
+  // }
+
+  // xlStoppageReport(Fdate,tdate,option){
+  //   let uId = option.user;
+  //   let vName= option._id;
+  //   this.contactService.xlStoppageReport(Fdate.toISOString(),tdate.toISOString(),this.useridd,vName)
+  //     .subscribe(res=>{
+  //       // console.log('xcelreport',res);
+  //     })
+  // }
+
+
+addressLink = "";
+// getlink(report){
+ 
+//   var lat = report.lattitude?report.lattitude:0;
+//   var lng = report.longitude?report.longitude:0;
+//   this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+//   return this.addressLink ; 
+// }
+
+
+  tab:any;
+  exportExcel()
+  {
+  
+      var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+      var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+  
+      for(j = 0 ; j < this.tab.rows.length ; j++) 
+      {     
+          tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+          // console.log('tab_text',JSON.parse(tab_text));
+          //tab_text=tab_text+"</tr>";
+      }
+  
+      tab_text=tab_text+"</table>";
+      // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+      // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+      tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  
+      var ua = window.navigator.userAgent;
+      var msie = ua.indexOf("MSIE "); 
+  
+      var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+  
+      return (sa);
+  }
+  
+
+
+  // filterStoppageStates(val) {
+
+  //   if (val=="") {
+  //     this.dataStoppage =[];
+  //     // console.log("empty dataStoppage")
+  //   }else{
+ 
+  //     const filterValue:any = val;
+      
+  //      this.dataStoppage = this.options.filter(function(d){
+  //       var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+  //     //  this.option = this.options[i];
+    
+     
+  //       return t > -1;    
+  //     });
+      
+  //       return this.dataStoppage;
+  //   }
+  
+  // }
+
+  // getStoppageObj(valS){
+  //   this.stoppage_obj = valS;
+  // }
+
+
+  // filterReport(){
+  //   var tableFilteredData = [];
+  //   // console.log('Inside function')
+  //   // console.log(this.duration.value);
+  //   for(var i=0;i<this.report_to_show.length;i++){
+  //     if(Number(this.report_to_show[i].duration.split("h")[0])>this.duration.value){
+  //       tableFilteredData.push(this.report_to_show[i]);
+  //     }
+  //   }
+  //   this.report_to_show = tableFilteredData;
+  // }
+
+  tabelObj :  any;
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [
+        //     'copy', 'csv', 'excel', 'pdf', 'print'
+        // ]  ,
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+            
+                var deviceID;
+             
+                var vName; 
+                var dr ; 
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              if(that.deviceArr.length != 0){
+                vName = that.deviceArr[0];
+              }
+              if((that.stoppage_duration != undefined )&&(that.stoppage_duration.length != 0 )){
+              
+                  dr = that.stoppage_duration[0];
+                  console.log("DR-",dr);
+                  
+              }
+                  that.Load = true ; 
+                if((from_date != undefined)&&(to_date != undefined)){
+                  that.contactService.stoppage_report(from_date,to_date,user,vName)
+                  .subscribe((res:any)=>{ 
+                    that.stoppage_data =[];     
+                    that.Load = false ; 
+                    that.stoppage_data = that.durationFilter(res);  
+                     callback({data : that.stoppage_data});
+                  },err=>{
+                    that.Load = false ; 
+                    console.log("error while fetching data",err);
+                  }) 
+
+                }else{
+                  that.Load = false; 
+                      let ta = [];
+                     callback({data : ta});
+                }
+         
+          }, 
+        
+            "columns": [
+                {
+                    "data": "device",   
+                    "render": function(data, type, row) {
+                        
+                      return data?data.Device_Name : '';                  
+                    }
+                },
+                {
+                    "data": "arrival_time",
+                    render: function(data, type, row) {
+                      var atime = new Date(data);
+                      return data ? (moment(atime).format('llll')) : "";    
+                    }
+                },
+                {
+                    "data": "departure_time",
+                
+                    render: function(data, type, row) {
+                      var dtime = new Date(data);
+                      return data ? (moment(dtime).format('llll')) : "";  
+                  
+                    }
+                }, 
+          
+                
+              {
+                "data": "_id",
+                "defaultContent": null,
+                render: function(data, type, row) {    
+                  let arrival_time = new Date(row.arrival_time).toLocaleString();                 
+                  let departure_time = new Date(row.departure_time).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                
+                  let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+                  
+                  return Durations;
+                 
+                }
+            } ,
+            {
+              "data": "address",
+              render: function(data, type, row) {            
+                var lat = row.lat?row.lat:0;
+                var lng = row.long?row.long:0;    
+                  var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+lng +' "  target="_blank" title="Click to get vehicle last location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+                  if(data){
+                    return data ;
+                  }else{
+                    return addressLink;     
+                  }
+              }
+          }                       
+            ],  
+            "columnDefs": [
+              { className: "dt-body-left", "targets": [ 0,1,2,3,4 ] },
+              {
+                "targets": '_all',
+                "createdCell": function (td, cellData, rowData, row, col) {
+                    $(td).css('padding', '18px')
+                }
+            } ,
+            // { "width": "10px", "targets": 0 },
+            // { "width": "40px", "targets": 1 },
+            // { "width": "100px", "targets": 2 },
+            // { "width": "70px", "targets": 3 },
+         
+            ] 
+        });
+  
+    });
+  
+  }
+
+  deviceArr=[];
+  data_descip = '';
+  getReport(event){
+    console.log(event);
+    if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+        this.data_descip = 'Please Select Device';
+        launch_toast(); 
+        return
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+    
+      this.stoppage_duration = event.duration ; 
+      if(this.stoppage_duration.length == 0){
+        // this.data_descip = 'Please Select Duration';
+        // launch_toast(); 
+        // return
+        this.stoppage_duration.push(0)
+        
+      }
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+     
+        this.tabelObj.ajax.reload(); 
+        
+    
+    }
+
+
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }    
+   
+  }
+
+  durationFilter(data){
+    var temp=[];
+    var diff
+    console.log(data,this.stoppage_duration[0]);
+     if(this.stoppage_duration[0]==0){
+        temp=data
+       }else{
+    if(data.length!=0){
+    for(var i=0;i<data.length;i++){
+      diff=this.dateDiffrence(data[i].arrival_time,data[i].departure_time);
+     if((this.stoppage_duration != undefined )&&(this.stoppage_duration.length != 0 )){
+      
+       if(this.stoppage_duration[0]==1){
+            if(diff.hrs<=2){
+              if(diff.hrs==2){
+                if(diff.min>0){
+
+                }else{
+                  temp.push(data[i]);
+                }
+              }else
+                temp.push(data[i]);
+            }
+       }else{
+          if(diff.hrs>=this.stoppage_duration[0]){
+         temp.push(data[i]);
+       }
+
+       }
+      
+      }
+    }
+  }
+}
+      return temp;
+  }
+  dateDiffrence(date1,date2){
+                  let arrival_time = new Date(date1).toLocaleString();                 
+                  let departure_time = new Date(date2).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                  let Durations = rhours;
+                  return {hrs:Durations,min:rminutes};
+  }
+  
+ expotToPdf(){
+    console.log(this.stoppage_data);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "Stoppage Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+  
+//   doc.setFontSize(15);
+//   doc.text('Stoppage Report ', 20, 30);
+//     doc.setFontStyle("arial");
+//     var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+   
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.stoppage_data.length, this.stoppage_data),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Stoppage Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+//  outerThis.startAddress= outerThis.finalArr[0].address;
+//  outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Stoppage Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.stoppage_data.length, outerThis.stoppage_data),
+      options,
+       styles: {overflow: 'linebreak'},
+      
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle Name',
+        fromDate:'From Date',
+        toDate:'To Date',
+        duration:'Duration',
+        location:'Location',
+        
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleName:pdfBody[j].device.Device_Name,
+       fromDate:moment(this.Fromdate).format('lll'),
+       toDate:moment(this.todate).format('lll'),  
+       duration:this.durationFun(pdfBody[j]), 
+       location:pdfBody[j].address?pdfBody[j].address:'N/A',
+      
+      });
+    }
+    return body;
+  }
+   durationFun(row) {    
+                  let arrival_time = new Date(row.arrival_time).toLocaleString();                 
+                  let departure_time = new Date(row.departure_time).toLocaleString();
+                  var fd = new Date(arrival_time ).getTime();
+                  var td = new Date(departure_time).getTime();
+                  var time_difference = td-fd;
+                  var total_min = time_difference/60000;
+                  var hours = total_min/60
+                  var rhours = Math.floor(hours);
+                  var minutes = (hours - rhours) * 60;
+                  var rminutes = Math.round(minutes);
+                
+                  let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+                  
+                  return Durations;
+                 
+                }
+
+}
+
+
diff --git a/src/app/report/report component/summary-report/summary-details/summary-details.component.html b/src/app/report/report component/summary-report/summary-details/summary-details.component.html
new file mode 100644
index 0000000..b5fe32e
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-details/summary-details.component.html	
@@ -0,0 +1,63 @@
+<div class="col-sm-12 col-md-12 col-lg-12" style="height: 65vh;">
+  <div class=modal-header style="margin-bottom: 6px;">
+    <h4>Details</h4>
+    <div class="text-right">
+      <button class="mat-raised-button" md-raised-button="" style="background-color: #1556b9;color:#fdfdfd;font-size: 12px;
+              width: 110px;" (click)="exportExcel()"><span class="mat-button-wrapper">Export To
+          Excel</span>
+        <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+          ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+        <div class="mat-button-focus-overlay"></div>
+      </button>
+      <button class="mat-raised-button" md-raised-button="" style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;
+                      width: 110px;" (click)="dialogRef.close()"><span class="mat-button-wrapper">Close &nbsp;&nbsp;<i
+            class="fa fa-times" aria-hidden="true"></i>
+        </span>
+        <div class="mat-button-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLButtonElement]"
+          ng-reflect-centered="false" ng-reflect-disabled="false"></div>
+        <div class="mat-button-focus-overlay"></div>
+      </button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+
+
+          <!-- <button class="btn btn-default" (click)="exportExcel()">Export</button> -->
+          <!-- <button class="btn btn-default" [disabled]="firstcall" (click)="next()"
+                    style="margin-right: 1px;width: 89px;float: right;color:white;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">{{'Next'
+                    | translate}} >></button>
+                  <button class="btn btn-default" [disabled]="lastcall" (click)="pre()"
+                    style="width: 90px;float: right;color:white;margin-right: 0;line-height: 1.6;background: #426E86;height: auto;font-size: 12px;border-radius: 0px;border: none;margin-bottom: 10px;">
+                    << {{'Previous' | translate}}</button> -->
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="loading" *ngIf="Load">Loading&#8230;</div>
+          <div style="width: 100%;height:70vh;">
+            <table id="detailsTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align: left;">{{'Device Name' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Location' | translate}}</th>
+                  <th style="text-align: left;">{{'End Location' | translate}}</th>
+                  <th style="text-align: left;">{{'Distance' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Date' | translate}}</th>
+                  <th style="text-align: left;">{{'End Date' | translate}}</th>
+
+                  <!-- <th style="text-align: left;">{{'Action' | translate}}</th> -->
+
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/summary-report/summary-details/summary-details.component.scss b/src/app/report/report component/summary-report/summary-details/summary-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/summary-report/summary-details/summary-details.component.spec.ts b/src/app/report/report component/summary-report/summary-details/summary-details.component.spec.ts
new file mode 100644
index 0000000..275f20e
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-details/summary-details.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryDetailsComponent } from './summary-details.component';
+
+describe('SummaryDetailsComponent', () => {
+  let component: SummaryDetailsComponent;
+  let fixture: ComponentFixture<SummaryDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SummaryDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SummaryDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/summary-report/summary-details/summary-details.component.ts b/src/app/report/report component/summary-report/summary-details/summary-details.component.ts
new file mode 100644
index 0000000..dfca057
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-details/summary-details.component.ts	
@@ -0,0 +1,339 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../../../contact.service';
+declare var $: any;
+
+@Component({
+  selector: 'app-summary-details',
+  templateUrl: './summary-details.component.html',
+  styleUrls: ['./summary-details.component.scss']
+})
+export class SummaryDetailsComponent implements OnInit {
+ Load : Boolean = false;
+ tabelObj;
+ summary
+    constructor(public dialogRef: MdDialogRef<SummaryDetailsComponent>,private contactService: ContactService,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      console.log(data);
+      
+     }
+
+  ngOnInit() {
+    this.testTable()
+  }
+
+
+
+  testTable() {
+  const that = this;
+  console.log("inside function");
+ 
+  $(document).ready(function() {
+ 
+     that.tabelObj = $('#detailsTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          // "scrollY":'63vh',     
+          // "scrollX": true,
+          // "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+         
+          ajax: (dataTablesParameters,callback) => {
+            that.summary=that.data.trips
+            if (that.summary.length != 0) {
+                var j = 0;
+                var finalArr = [];
+                for (var i = 0; i < that.summary.length; i++) {
+  
+                  that.clocation_1(that.summary[i], function (err, succ) {
+                    if (err) {
+                      console.log(err);
+                      j++;
+                    } else {
+                      finalArr.push(succ);
+                      console.log(finalArr);
+                      j++;
+                      if (j === that.summary.length) {
+                        that.Load = false;
+                        var x = [];
+                        finalArr.sort(function(a,b){
+                          // Turn your strings into dates, and then subtract them
+                          // to get a value that is either negative, positive, or zero.
+                          var aDate:any = new Date(a.Date);
+                          var bDate:any = new Date(b.Date);  
+                          return bDate - aDate;
+                        });
+                
+                        
+                        callback({ data: finalArr });
+                      }
+                    }
+                  })
+  
+                 
+                }
+              } else {
+                that.Load = false;
+                callback({ data: [] });
+  
+              }
+           
+            // callback({ data: that.data.trips });
+ 
+        },  
+      
+          "columns": [
+            {
+              "data": "device",
+              "defaultContent": "",
+              "render": function (data, type, row) {  
+                        
+                return (data.length != 0) ? data.Device_Name : '';
+              }
+            },
+     
+            {
+              "data": "startAddress",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                console.log(data);
+                
+                  if(data){
+                     return  data?data:''; 
+                  }else{
+                    let lat = row.start_lat?row.start_lat:null;
+                    let long = row.start_long?row.start_long:null;       
+                    var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle Start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+
+                    return  addressLink;  
+                  }
+              
+              }
+            },    
+            {
+              "data": "endAddress",
+              "defaultContent": "",
+              render: function (data, type, row) {
+               if(data){
+                     return  data?data:''; 
+                  }else{
+                    let lat = row.end_lat?row.end_lat:null;
+                    let long = row.end_long?row.end_long:null;       
+                    var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle Start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+
+                    return  addressLink;  
+                  } 
+              
+              }
+            }, 
+            {
+              "data": "distance",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?(data/1000).toFixed(2) : "00.00";
+              }
+            },    
+       
+            {
+              "data": "start_time",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return that.convertDate(data);
+              }
+            },
+            {
+              "data": "end_time",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                 return that.convertDate(data);
+              }
+            },                                  
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // }   
+           
+         
+          ] 
+      });
+
+  });
+
+}
+
+
+
+
+tab:any;
+  exportExcel()
+	{
+   console.log("Export");
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#detailsTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];
+    console.log(this.tab);
+    
+  
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  convertDate(inputFormat) {
+          function pad(s) { return (s < 10) ? '0' + s : s; }
+            var d = new Date(inputFormat)
+           return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/')
+              }
+
+clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_lat) {
+      latLng = {
+        lat: latlngObj.start_lat ? latlngObj.start_lat : 0,
+        long: latlngObj.start_long ? latlngObj.start_long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_lat) {
+          latLng_1 = {
+            lat: latlngObj.end_lat ? latlngObj.end_lat : 0,
+            long: latlngObj.end_long ? latlngObj.end_long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+}
+// created_on: "2021-04-07T20:34:44.702Z"
+// device: {_id: "606c396343ddd6513f49112a", Device_Name: "MH14HG0107", Device_ID: "866551038377268"}
+// distance: 2642.9293113737913
+// endAddress: "Chinchwad, Pune, 411019, Pimpri-Chinchwad, India, Maharashtra"
+// end_lat: "18.650116666666666"
+// end_long: "73.80517333333333"
+// end_time: "2021-04-07T20:34:44.684Z"
+// startAddress: "136, Mahatma Phule Marg, Mohan Nagar, MIDC, Chinchwad, Pimpri-Chinchwad, Maharashtra 411019, India"
+// start_lat: "18.646631666666668"
+// start_long: "73.79820611111111"
+// start_time: "2021-04-07T20:22:58.212Z"
+// user: "5cee7da97a38f414a4e5dfa3"
\ No newline at end of file
diff --git a/src/app/report/report component/summary-report/summary-report.component.html b/src/app/report/report component/summary-report/summary-report.component.html
new file mode 100644
index 0000000..08d63b2
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-report.component.html	
@@ -0,0 +1,195 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Summary Report' | translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="font-size: 14px;width: 100%;">
+                <thead style="background-color:#e0e0e0;color: #444444;font-size: 12px;">
+                    <tr>
+                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left;">{{'Start Point' | translate}}</th>
+                      <th style="text-align: left;">{{'End Point' | translate}}</th>
+                      <th style="text-align: left;">{{'Total KM' | translate}}</th>
+                      <!-- <th style="text-align: left;" title="Fuel Consumption (Litre)">{{'Fuel (Litre)' | translate}}</th> -->
+                      <!-- <th style="text-align: left;">{{'Trips' | translate}}</th> -->
+                      <th style="text-align: left;" title="Running Time (HH:MM)">{{'Running (HH:MM)' | translate}}</th>    
+                      <th style="text-align: left;" title="Stop Time (HH:MM)">{{'Stop (HH:MM)' | translate}}</th>
+                      <!-- <th style="text-align: left;" title="Idle Time (HH:MM)">{{'Idle (HH:MM)' | translate}}</th> -->
+                      <th style="text-align: left;">{{'Details' | translate}}</th>
+                      <!-- <th style="text-align: left;" title="Out of reach Time (HH:MM)">{{'OFR (HH:MM)' | translate}}</th> -->
+                      <!-- <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th> -->
+                      <!-- <th style="text-align: left;" title="No gps Time (HH:MM)">{{'No gps (HH:MM)' | translate}}</th>         -->
+                      <!-- <th style="text-align: left;" title="Overspeeding (HH:MM)">{{'Overspeeding' | translate}}</th>
+                      <th style="text-align: left;" title="Max Speed (kmph)">{{'Max Speed (kmph)' | translate}}</th>
+                      <th style="text-align: left;" title="Engine on time (HH:MM)">{{'Engine on time' | translate}}</th>
+                      <th style="text-align: left;" title="Engine off time (kmph)">{{'Engine off time' | translate}}</th> -->
+                  
+
+                      <!-- <th style="text-align: left;">{{'Route Violation' | translate}}</th> -->
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <p class="headStyle">{{'Summary Report' | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div  class="col-md-3" style="margin-top: 18px;">
+       
+          <select id="select" multiple="multiple">
+            <option *ngFor="let option_1 of options" value={{option_1.did}} >{{ option_1.value }}</option>
+          </select>
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [pickerType] = "'calendar'" [dateFormat]="'DD/MM/YYYY'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="top: 16px;">
+        <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="summary_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button [disabled]="!xlbutton" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+  </div>
+
+  <table  class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th>{{'Device Name' | translate}}</th>
+        <th>{{'Start Point' | translate}}</th>
+        <th>{{'End Point' | translate}}</th>
+        <th>{{'Total KM' | translate}}</th>
+        <th>{{'Fuel Consumption (Litre)' | translate}}</th>
+        <th>{{'Trips' | translate}}</th>
+        <th>{{'Total Running Time (HH:MM)' | translate}}</th>    
+        <th >{{'Total Stop Time (HH:MM)' | translate}}</th>
+        <th>{{'Total Idle Time (HH:MM)' | translate}}</th>
+        <th>{{'Total Out of reach Time (HH:MM)' | translate}}</th>
+        <th>{{'Total No gps Time (HH:MM)' | translate}}</th>
+    
+        <th>{{'Overspeeding (HH:MM)' | translate}}</th>
+        <th>{{'Route Violation' | translate}}</th>
+      
+      </tr>
+    </thead>
+    <tbody>
+      <tr *ngFor="let device of device_summary ">
+        <td style="cursor:pointer">{{device.devicename}}</td>
+        <td style="cursor:pointer" >
+          <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
+        </td>
+        <td style="cursor:pointer">
+          <a href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>   
+        </td>
+        <td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
+        <td style="cursor:pointer">{{device.fuelConsumption}}</td>
+        <td style="cursor:pointer">{{device.trip}}</td>
+        <td style="cursor:pointer">{{device.TotalrunningTime }}</td>
+     
+        <td style="cursor:pointer">{{device.stopTime}}</td>
+        <td style="cursor:pointer">{{device.idleTime}}</td>
+        <td style="cursor:pointer">{{device.ourTime}}</td>
+        <td style="cursor:pointer">{{device.nogps}}</td>
+        
+       
+        <td style="cursor:pointer">{{device.overSpeed}}</td>
+        <td style="cursor:pointer">{{device.routeViolation}}</td>
+      </tr>
+    </tbody>
+  </table>
+
+
+  <table id="test" class="table table-striped table-hover " style="display:none">
+
+<thead style="background-color:#A2C523;color: white;">
+<tr>
+<th>Device Name</th>
+<th>Start Point</th>
+<th>End Point</th>
+<th>Total KM</th>
+<th>Fuel Consumption (Litre)</th>
+<th>Trips</th>
+<th>Total Running Time (HH:MM)</th>    
+<th >Total Stop Time (HH:MM)</th>
+<th >Total Idle Time (HH:MM)</th>
+<th >Total Out of reach Time (HH:MM)</th>
+<th >Total No gps Time (HH:MM)</th>
+<th>Overspeeding (HH:MM)</th>
+<th>Route Violation</th>
+
+</tr>
+</thead>
+<tbody>
+<tr *ngFor="let device of device_summary">
+<td style="cursor:pointer">{{device.devicename}}</td>
+<td style="cursor:pointer" >
+  <a  href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+</td>
+<td style="cursor:pointer">
+  <a  href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a> 
+</td>
+<td style="cursor:pointer">{{device.totalkm  | number : '1.2-2'}}</td>
+<td style="cursor:pointer">{{device.fuelConsumption}}</td>
+<td style="cursor:pointer">{{device.trip}}</td>
+<td style="cursor:pointer">{{device.TotalrunningTime }}</td>
+<td style="cursor:pointer">{{device.stopTime}}</td>
+<td style="cursor:pointer">{{device.idleTime}}</td>
+<td style="cursor:pointer">{{device.ourTime}}</td>
+<td style="cursor:pointer">{{device.nogps}}</td>
+<td style="cursor:pointer">{{device.overSpeed}}</td>
+<td style="cursor:pointer">{{device.routeViolation}}</td>
+</tr>
+</tbody>
+</table>
+
+</div> -->
+       
diff --git a/src/app/report/report component/summary-report/summary-report.component.scss b/src/app/report/report component/summary-report/summary-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/summary-report/summary-report.component.spec.ts b/src/app/report/report component/summary-report/summary-report.component.spec.ts
new file mode 100644
index 0000000..660a6e9
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryReportComponent } from './summary-report.component';
+
+describe('SummaryReportComponent', () => {
+  let component: SummaryReportComponent;
+  let fixture: ComponentFixture<SummaryReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SummaryReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SummaryReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/summary-report/summary-report.component.ts b/src/app/report/report component/summary-report/summary-report.component.ts
new file mode 100644
index 0000000..81bebcb
--- /dev/null
+++ b/src/app/report/report component/summary-report/summary-report.component.ts	
@@ -0,0 +1,1154 @@
+
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { min } from 'rxjs/operator/min';
+import { ReportService } from '../../report.service';
+import { SummaryDetailsComponent } from './summary-details/summary-details.component';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+
+
+declare var google: any;
+// declare var jquery:any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+declare var moment :any;
+// declare var $:any;
+// declare var TableExport:any;
+
+@Component({
+  selector: 'app-summary-report',
+  templateUrl: './summary-report.component.html',
+  styleUrls: ['./summary-report.component.scss']
+})
+export class SummaryReportComponent implements OnInit {
+  finalArr=[]
+  sumReport: any;
+  date1:any;
+  neww:any;
+  fs : any;
+  Load:boolean=false;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  xlbutton: boolean= false;
+  dataSelect: any[];
+  closeProcess: any;
+  lattitude: any;
+  longitude: any;
+  lattitude1: any;
+  longitude1: any;
+  addressLink: string;
+  addressLink1: string;
+private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService,private _flashMessagesService: FlashMessagesService) {
+  this._service.invokeEventForsummaryReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+
+   ngOnDestroy(){
+    this.closeProcess= 0;
+    this.finalise.next(void 0);
+  }
+
+  ngOnInit() {
+
+    var fTime = new Date();
+    // fTime.setDate(fTime.getDate()-1);
+    // fTime.setHours(0,0,0,0); 
+    // this.Fromdate=new Date(fTime);
+    $('#select').hide();
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+     this.testTable();  
+  }
+
+  selectedPeople:any;
+  people= ['1','2','3',];
+
+  device_summary =[];
+  summary:any;
+  d_name:any;
+  total_running_time:any;
+  stop_time:any;
+  overSpeed:any;
+  route_violation:any;
+  trips:any;
+  total_km:any;
+  address_show:any;
+  end_add_show:any;
+  start_add:any;
+  end_add:any;
+  start_add_lat:any;
+  start_add_long:any;
+  end_add_lat:any;
+  end_add_long:any;
+  uId:any;
+  
+  deviceArr = [];
+
+  getReport(event){
+     if (event == 'getExcel') {
+      this.exportExcel();
+    } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+     
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+      
+      this.Fromdate = fd.toISOString();
+      this.todate = td.toISOString();
+      console.log("b4");
+   
+    
+      
+      this.tabelObj.ajax.reload();      
+        
+    
+    }
+    
+  
+  }
+  // summary_report(Fromdate,todate){
+  //   // console.log(this.dataSelect[0]);
+  //   // console.log(this.dataSelect) 
+  //   console.log($('#select').multipleSelect('getSelects','value'));
+  //   this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+  //   console.log(Fromdate,todate);
+  //   var devID;
+  //   // if(!option){
+  //     this.uId = this.useridd;
+  //     if((this.deviceArr==undefined)||(this.deviceArr.length==0)){
+  //       devID=[];
+  //     }else{
+  //       devID= this.deviceArr;
+  //       console.log("device ID=>",devID);
+  //     }
+
+  //     if(Fromdate == null){
+  //       this._flashMessagesService.show("Please select fromdate ", { cssClass: 'alert-danger', timeout: 3000 });
+  //       return;
+  //     }
+  //     if(todate == null){
+  //       this._flashMessagesService.show("Please Select todate", { cssClass: 'alert-danger', timeout: 3000 });
+  //       return ;
+  //     }
+  //   let f1 = new Date(Fromdate).setHours(0,0,0,0);
+  //   console.log("f1",f1);
+    
+  //   let f_date = new Date(f1).toISOString();
+  //   let t1 = new Date(todate).setHours(23,59,59,999);
+  //   console.log('t1',t1);
+  //   let t_date =  new Date(t1).toISOString();
+  //   // console.log(f_date);
+  //   // console.log(t_date);
+  //   this.device_summary=[];
+  //   var outerThis = this;
+  //   // console.log(this.useridd);
+  //   // console.log(this.uId);
+  //   this.Load = true;
+  //   this.contactService.summary_rep_new(f_date, t_date, this.uId,devID)
+  //     .subscribe(res=>{
+  //       if(res.message == 'Fromdate is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+  //       if(res.message == 'todate is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+  //       if(res.message == 'user is mandatory'){
+  //         this._flashMessagesService.show(res.message, { cssClass: 'alert-danger', timeout: 3000 });
+  //         this.Load = false;
+  //         return
+  //       }
+
+     
+        
+  //       this.Load = false;
+  //        console.log("summary console =>",res);
+  //       this.summary=res;
+  //       if(this.summary.length == 0){
+  //         this._flashMessagesService.show("No record found", { cssClass: 'alert-danger', timeout: 3000 });
+  //       }
+  //       console.log(this.summary);
+  //       var i = 0;
+  //       // howManyTimes =  this.summary.length;
+  //       this.closeProcess= this.summary.length;
+        
+  //       var hourconversion = 2.7777778 / 10000000 ; 
+       
+  //       for(var j=0;j<this.summary.length;j++){
+  //         this.device_summary.push({
+  //           "devicename": this.summary[j].devObj[0]?this.summary[j].devObj[0].Device_Name:'NA',
+  //           "TotalrunningTime":this.millisecondConversion(this.summary[j].today_running),
+  //           "stopTime": this.millisecondConversion(this.summary[j].today_stopped),
+  //           "idleTime": this.millisecondConversion(this.summary[j].t_idling),
+  //           "ourTime": this.millisecondConversion(this.summary[j].t_ofr),
+  //           "nogps" :this.millisecondConversion(this.summary[j].t_noGps),
+  //           "overSpeed": this.millisecondConversion(this.summary[j].today_overspeeds),
+  //           "routeViolation": this.summary[j].today_routeViolations,
+  //           "start_add": this.summary[j].start_location,
+  //           "end_add": this.summary[j].end_location,
+  //           "trip": this.summary[j].today_trips,
+  //           "totalkm":this.summary[j].today_odo,
+  //           "fuelConsumption" : ((this.summary[j].devObj[0].Mileage == null)||(this.summary[j].devObj[0].Mileage == undefined))?"NA":(this.summary[j].today_odo/parseFloat(this.summary[j].devObj[0].Mileage)).toFixed(2)
+  //           // "todayRunning" : todayRunning,
+  //           // "todayStopped" : todayStopped
+  //         })
+  //       }
+        
+  //       // function f() {
+  //       //   if((outerThis.summary[i].start_location!=null)&&(outerThis.summary[i].end_location!=null)){
+  //       //     outerThis.start_add_lat =  outerThis.summary[i].start_location.lat;
+  //       //     outerThis.start_add_long= outerThis.summary[i].start_location.long;
+           
+  //       //   }else{
+  //       //     outerThis.start_add_lat = null;
+  //       //     outerThis.start_add_long= null;
+          
+  //       //   }
+
+  //       //   if((outerThis.summary[i].end_location!=null)&&(outerThis.summary[i].end_location!=null)){
+  //       //     outerThis.end_add_lat= outerThis.summary[i].end_location.lat;
+  //       //     outerThis.end_add_long= outerThis.summary[i].end_location.long;
+
+  //       //   }else{
+
+  //       //     outerThis.end_add_lat=null;
+  //       //     outerThis.end_add_long=null;
+
+  //       //   }
+       
+  //       //   var geocoder = new google.maps.Geocoder();
+  //       //   var latlng_start = new google.maps.LatLng(outerThis.start_add_lat,outerThis.start_add_long);
+  //       //   var end_add = new google.maps.Geocoder();
+  //       //   var latlng_end = new google.maps.LatLng(outerThis.end_add_lat,outerThis.end_add_long);
+
+  //       //   var request={
+  //       //     latLng:latlng_start
+  //       //   }
+
+  //       //   var request_end={
+  //       //     latLng:latlng_end
+  //       //   }
+      
+       
+  //       //   geocoder.geocode(request, function(data,status){
+  //       //     if(status == google.maps.GeocoderStatus.OK){
+  //       //       if(data[0]!=null){
+              
+  //       //          this.start_add = data[0].formatted_address;
+  //       //          if(this.start_add=="Antarctica"){
+  //       //           this.start_add="NA";
+  //       //          }
+  //       //          outerThis.address_show = this.start_add;
+               
+               
+  //       //       }else{
+  //       //         this.start_add="NA";
+  //       //       }
+  //       //     }
+  //       //     else{
+           
+  //       //       this.start_add ="NA";
+  //       //       outerThis.address_show = this.start_add
+           
+  //       //     }  
+  //       //     outerThis.device_summary[i-1].address= outerThis.address_show;
+           
+  //       //   })
+
+
+  //       //   geocoder.geocode(request_end, function(data1,status){
+  //       //     if(status == google.maps.GeocoderStatus.OK){
+  //       //       if(data1[0]!=null){
+              
+  //       //          this.end_add = data1[0].formatted_address;
+  //       //          if(this.end_add=="Antarctica"){
+  //       //           this.end_add="NA";
+  //       //          }
+  //       //          outerThis.end_add_show = this.end_add;
+               
+               
+  //       //       }else{
+  //       //         this.end_add="NA"
+  //       //       }
+  //       //     }
+  //       //     else{
+           
+  //       //       this.end_add ='NA';
+  //       //       outerThis.end_add_show  = this.end_add;
+           
+  //       //     }  
+  //       //     outerThis.device_summary[i-1].address_end= outerThis.end_add_show;
+  //       //     // console.log(outerThis.address_show);
+  //       //   })
+  //       //   i++;
+  //       //   if( i < outerThis.closeProcess ){
+  //       //       setTimeout( f,5000 );
+  //       //   }
+  //       // }
+  //       // f();
+
+  //       this.xlbutton = true;
+    
+    
+  //     },(error)=>{
+  //       this.Load=false;
+  //       // console.log(error.status);
+  //       // console.log("No Record Found !!!");
+  //       this._flashMessagesService.show('Internal Server Error', { cssClass: 'alert-danger', timeout: 3000 });
+  //     })
+  // }
+
+
+  tabelObj: any ;
+  identifier:String = 'summary_report';
+testTable() {
+  const that = this;
+  console.log("inside function");
+ 
+  $(document).ready(function() {
+ 
+     that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'63vh',     
+          "scrollX": true,
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+              var internalThat  = that;
+              // console.log('rowrowrowrow=>',row);
+              console.log('datadatadatadata',data);
+          
+              let dialogRef = that.dialog.open(SummaryDetailsComponent, {
+                // width: '950px',
+                // height: '1160px',   
+                data: { trips:data.trip}
+                
+              });             
+            }); 
+          },
+          ajax: (dataTablesParameters,callback) => {
+            var deviceID;
+            that.Load= true;    
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+
+            var suburl = "";
+            that.device_summary =[];
+
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+              suburl += "/summary/summaryReport?from=" + temp.from_date +'&to=' + temp.to_date + '&user=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log(ignReport.length); 
+                  that.summary =[];
+                  that.Load= false;    
+                  that.device_summary = [];      
+                  that.summary = resp ; 
+                  console.log(that.summary);
+                  var hourconversion = 2.7777778 / 10000000 ; 
+              that.summary= resp ; 
+              if (that.summary.length != 0) {
+                var j = 0;
+                 that.finalArr = [];
+                for (var i = 0; i < that.summary.length; i++) {
+  
+                  that.clocation_1(that.summary[i], function (err, succ) {
+                    if (err) {
+                      console.log(err);
+                      j++;
+                    } else {
+                      that.finalArr.push(succ);
+                      console.log(that.finalArr);
+                      j++;
+                      if (j === that.summary.length) {
+                        that.Load = false;
+                        var x = [];
+                        that.finalArr.sort(function(a,b){
+                          // Turn your strings into dates, and then subtract them
+                          // to get a value that is either negative, positive, or zero.
+                          var aDate:any = new Date(a.Date);
+                          var bDate:any = new Date(b.Date);  
+                          return bDate - aDate;
+                        });
+                
+                        
+                        callback({ data: that.finalArr });
+                      }
+                    }
+                  })
+  
+                 
+                }
+              } else {
+                that.Load = false;
+                callback({ data: [] });
+  
+              }
+                 
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+            }else{
+              that.Load= false;    
+              let ta = [];
+              callback({data : ta });  
+
+            }
+
+ 
+        },  
+      
+          "columns": [
+            {
+              "data": "devObj",
+              "defaultContent": "",
+              "render": function (data, type, row) {  
+                        
+                return (data.length != 0) ? data.Device_Name : '';
+              }
+            },
+     
+                    {
+              "data": "startAddress",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                console.log(data);
+                
+                  if(data!=""){
+                     return  data?data:''; 
+                  }else{
+                    let lat = row.start_location.lat?row.start_location.lat:null;
+                    let long = row.start_location.long?row.start_location.long:null;       
+                    var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle Start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+
+                    return  addressLink;  
+                  }
+              
+              }
+            },    
+            {
+              "data": "endAddress",
+              "defaultContent": "",
+              render: function (data, type, row) {
+               if(data!=""){
+                     return  data?data:''; 
+                  }else{
+                    let lat = row.end_location.lat?row.end_location.lat:null;
+                    let long = row.end_location.long?row.end_location.long:null;       
+                    var addressLink = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle Start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';            
+
+                    return  addressLink;  
+                  } 
+              
+              }
+            }, 
+            {
+              "data": "total_odo",
+              "defaultContent": "",
+              render: function (data, type, row) {
+
+                return data?data.toFixed(2) : "00.00";
+              }
+            }
+            ,    
+            // {
+            //   "data": "devObj",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+              
+            //     console.log(data.Mileage);
+          
+            //   var milage =   (data.length==0)?"NA":((data[0].Mileage == null)||(data[0].Mileage == undefined))?"NA":(row.today_odo/parseInt(data[0].Mileage)).toFixed(2);
+            //     return milage ? milage : "00:00";
+            //   }
+            // },
+       
+      
+            // {
+            //   "data": "today_trips",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?data:"0";
+            //   }
+            // },
+       
+            {
+              "data": "today_running",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                console.log("running",that.millisecondConversion(data));
+                
+                return data?that.millisecondConversion(data):"00:00";
+              }
+            },
+             
+         
+        
+            {
+              "data": "today_stopped",
+              "defaultContent": "",
+              render: function (data, type, row) {
+                 console.log("today_stopped",data);
+                return data?that.millisecondConversion(data):0;
+              }
+            },
+         
+       
+            // {
+            //   "data": "t_idling",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?that.millisecondConversion(data):"00:00";
+            //   }
+            // },
+            {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<button class="btn btn=info btn-sm"><i id="edit" title="Edit Vehicle" style="font-size:20px;color: green" class="fas fa-info-circle"></i></button>'    
+              }
+            }
+        
+         
+            // {
+            //   "data": "t_ofr",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?that.millisecondConversion(data):"00:00";
+            //   }
+            // },
+            // {
+            //   "data": null,
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+            //     console.log('datatatatatatatatatata=>',data);
+            //     var dateDiff = ((data.today_running!=undefined)?data.today_running:0) + ((data.t_idling !=undefined)?data.t_idling:0);
+            //     return data?that.millisecondConversion(dateDiff):"00:00";
+            //   }
+            // },
+         
+          
+            // {
+            //   "data": "t_noGps",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //   return data?that.millisecondConversion(data):"00:00";
+            //   }
+            // },
+         
+            // {
+            //   "data": "today_overspeeds",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?that.millisecondConversion(data):"0.0";
+            //   }
+            // },
+            // {
+            //   "data": "today_maxSpeed",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?data:0;
+            //   }
+            // },      
+            // {
+            //   "data": "today_ign_on",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?data:0;
+            //   }
+            // },    {
+            //   "data": "today_ign_off",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?data:0;
+            //   }
+            // },
+            // {
+            //   "data": "today_routeViolations",
+            //   "defaultContent": "",
+            //   render: function (data, type, row) {
+
+            //     return data?data:0;
+            //   }
+            // }                       
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5,6] },
+          //   {
+          //     "targets": '_all',
+          //     "createdCell": function (td, cellData, rowData, row, col) {
+          //         $(td).css('padding', '18px')
+          //     }
+          // }   
+           
+         
+          ] 
+      });
+
+  });
+
+}
+
+
+
+  // exportExcel(tableID, filename){
+  //   // TableExport(document.getElementsByTagName("table"));
+  
+  //     var downloadLink;
+  //     var dataType = 'application/vnd.ms-excel';
+  //     var tableSelect = document.getElementById(tableID);
+  //     var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
+      
+  //     // Specify file name
+  //     filename = filename?filename+'.xls':'excel_data.xls';
+      
+  //     // Create download link element
+  //     downloadLink = document.createElement("a");
+      
+  //     document.body.appendChild(downloadLink);
+      
+  //     if(navigator.msSaveOrOpenBlob){
+  //         var blob = new Blob(['\ufeff', tableHTML], {
+  //             type: dataType
+  //         });
+  //         navigator.msSaveOrOpenBlob( blob, filename);
+  //     }else{
+  //         // Create a link to the file
+  //         downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
+      
+  //         // Setting the file name
+  //         downloadLink.download = filename;
+          
+  //         //triggering the function
+  //         downloadLink.click();
+  //     }
+  // }
+tab:any;
+  exportExcel()
+	{
+   
+
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+      this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+	    {     
+          
+	        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+	        //tab_text=tab_text+"</tr>";
+	    }
+
+	    tab_text=tab_text+"</table>";
+	    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+	    // tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+  
+
+  filterStates(val) {
+
+
+    if (val==""){
+
+      this.dataSelect = [];
+      // console.log("deviceValue",this.dataSelect);
+    } else{
+ 
+      const filterValue:any = val;
+      
+       this.dataSelect = this.options.filter(function(d){
+        var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+      //  this.option = this.options[i];
+    
+     
+        return t > -1;    
+      });
+      
+        return this.dataSelect;
+    }
+   
+  
+  
+  }
+  
+
+
+  getlink(report : any){
+      // console.log("report=>",report);
+    var lat = report.start_add?report.start_add.lat:0;
+    var lng = report.start_add?report.start_add.long:0;
+    this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;  
+    return this.addressLink ; 
+  }
+  
+  getlink1(report:any){
+   
+    // console.log("report=>",report);
+    var lat = report.end_add?report.end_add.lat:0;
+    var lng = report.end_add?report.end_add.long:0;
+    this.addressLink1 =  'https://maps.google.com/?q=' + lat + ',' + lng;
+    return this.addressLink ; 
+  }
+
+
+  millisecondConversion(duration){
+    console.log("duration",duration);
+    
+      // var  minutes = Math.floor((duration / (1000 * 60)) % 60);
+      // var  hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+  
+      // hours = (hours < 10) ? 0 + hours : hours;
+      // minutes = (minutes < 10) ? 0 + minutes : minutes;
+    
+      // return hours + ":" + minutes ;
+      var x = duration;
+      var d = moment.duration(x, 'milliseconds');
+      var hours = Math.floor(d.asHours());
+      var mins = Math.floor(d.asMinutes()) - hours * 60;
+      var mainMIn = (hours>=24)?0:mins;
+      return  hours + ":" + mainMIn;
+
+    
+  }
+  clocation_1(latlngObj, cb) {
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+    if (latlngObj.start_location) {
+      latLng = {
+        lat: latlngObj.start_location.lat ? latlngObj.start_location.lat : 0,
+        long: latlngObj.start_location.long ? latlngObj.start_location.long : 0
+      }
+    }
+    if (latlngObj.today_start_location) {
+      latLng = {
+        lat: latlngObj.today_start_location.lat ? latlngObj.today_start_location.lat : 0,
+        long: latlngObj.today_start_location.long ? latlngObj.today_start_location.long : 0
+      }
+    }
+
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        latlngObj['startAddress'] = "NA";
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['startAddress'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+        if (latlngObj.last_location) {
+          latLng_1 = {
+            lat: latlngObj.last_location.lat ? latlngObj.last_location.lat : 0,
+            long: latlngObj.last_location.long ? latlngObj.last_location.long : 0
+          }
+
+        }
+        if (latlngObj.end_location) {
+          latLng_1 = {
+            lat: latlngObj.end_location.lat ? latlngObj.end_location.lat : 0,
+            long: latlngObj.end_location.long ? latlngObj.end_location.long : 0
+          }
+        }
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            latlngObj['endAddress'] = "NA";
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['endAddress'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+  expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "Summary Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+  
+//   doc.setFontSize(15);
+//   doc.text('Summary Report ', 20, 30);
+//     doc.setFontStyle("arial");
+//     var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+   
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Summary Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+ outerThis.startAddress= outerThis.finalArr[0].address;
+ outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Summary Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        vehicleName:'Vehicle Name',
+        startAddress:'Start Point',
+        endAddress:'End Point',
+        total_odo:'Total Km',
+        today_running:'Running (HH:MM)',
+        today_stopped:'Stop (HH:MM)',
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+       vehicleName:pdfBody[j].devObj.Device_Name,
+       startAddress:pdfBody[j].startAddress,
+       endAddress:pdfBody[j].endAddress?pdfBody[j].endAddress:'N/A',  
+       total_odo:pdfBody[j].total_odo?(pdfBody[j].total_odo).toFixed(2):0, 
+       today_running:this.millisecondConversion(pdfBody[j].today_running),
+        today_stopped:this.millisecondConversion(pdfBody[j].today_stopped)
+      });
+    }
+    return body;
+  }
+
+  
+
+
+
+  }
+
+
+
+         //   if((outerThis.summary[i].start_location!=null)&&(outerThis.summary[i].end_location!=null)){
+        //     outerThis.start_add_lat =  outerThis.summary[i].start_location.lat;
+        //     outerThis.start_add_long= outerThis.summary[i].start_location.long;
+           
+        //   }else{
+        //     outerThis.start_add_lat = null;
+        //     outerThis.start_add_long= null;
+          
+        //   }
+
+        //   if((outerThis.summary[i].end_location!=null)&&(outerThis.summary[i].end_location!=null)){
+        //     outerThis.end_add_lat= outerThis.summary[i].end_location.lat;
+        //     outerThis.end_add_long= outerThis.summary[i].end_location.long;
+
+        //   }else{
+
+        //     outerThis.end_add_lat=null;
+        //     outerThis.end_add_long=null;
+
+        //   }
+
+  
+
+
+
+
diff --git a/src/app/report/report component/tempreture-graph/tempreture-graph.component.html b/src/app/report/report component/tempreture-graph/tempreture-graph.component.html
new file mode 100644
index 0000000..9cad2a7
--- /dev/null
+++ b/src/app/report/report component/tempreture-graph/tempreture-graph.component.html	
@@ -0,0 +1,31 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Temprature Graph' | translate}}</h4>
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+          <div style="width: 100%;height:75vh;">
+            <canvas id="fuelChart" style="display: block; width: 1168px; height: 550px; padding: 0px 20px 20px;"></canvas> 
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/tempreture-graph/tempreture-graph.component.scss b/src/app/report/report component/tempreture-graph/tempreture-graph.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/tempreture-graph/tempreture-graph.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/tempreture-graph/tempreture-graph.component.spec.ts b/src/app/report/report component/tempreture-graph/tempreture-graph.component.spec.ts
new file mode 100644
index 0000000..bd3803e
--- /dev/null
+++ b/src/app/report/report component/tempreture-graph/tempreture-graph.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TempretureGraphComponent } from './tempreture-graph.component';
+
+describe('TempretureGraphComponent', () => {
+  let component: TempretureGraphComponent;
+  let fixture: ComponentFixture<TempretureGraphComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TempretureGraphComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TempretureGraphComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/tempreture-graph/tempreture-graph.component.ts b/src/app/report/report component/tempreture-graph/tempreture-graph.component.ts
new file mode 100644
index 0000000..8603679
--- /dev/null
+++ b/src/app/report/report component/tempreture-graph/tempreture-graph.component.ts	
@@ -0,0 +1,180 @@
+import { Component, OnInit } from '@angular/core';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ContactService } from '../../../contact.service';
+
+declare var Chart :any;
+
+@Component({
+  selector: 'app-tempreture-graph',
+  templateUrl: './tempreture-graph.component.html',
+  styleUrls: ['./tempreture-graph.component.scss']
+})
+export class TempretureGraphComponent implements OnInit {
+  dataSelect: any;
+  Load : Boolean = false;
+  Fromdate = new Date();
+  todate=new Date();
+  useridd: any;
+  options: any=[];
+  option:any;
+  emailid: any;
+  devicesss: any;
+  finall: any;
+  identifier : any= "temp_report_graph"; 
+  
+
+  constructor(private contactService:ContactService,private _flashMessagesService: FlashMessagesService) { }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+  }
+
+  flag:boolean = false;
+  InsertionTime = [];
+  fuelGraphData = [];
+  fuelVoltage = [];
+
+  getGraphData(){
+    this.InsertionTime=[];
+    this.fuelGraphData=[];
+    this.fuelVoltage = [];
+   
+    console.log(this.dataSelect);
+    if((this.deviceArr == undefined)||(this.deviceArr.length == 0)){
+    return  this._flashMessagesService.show("Select Device First", { cssClass: 'alert-danger', timeout: 2000 });
+    }else{
+      var dID = this.deviceArr[0];
+    }
+    var fDate = this.Fromdate.toISOString();
+    var tDate = this.todate.toISOString();
+    this.Load = true;
+    this.contactService.fuelReportData(dID,fDate,tDate)
+      .subscribe(res=>{
+        this.Load  = false;
+        let graphData=res
+        console.log("graphData",res);
+        if(graphData.length != 0){
+          this.flag = true;
+        }
+        for(var i=graphData.length-1; i>=0;i--){
+          var fuelData = graphData[i].currentFuel?graphData[i].currentFuel:0;
+          var voltageData = graphData[i].fuelVoltage?parseFloat(graphData[i].fuelVoltage)/1000:0;
+          this.fuelVoltage.push(voltageData);
+          this.fuelGraphData.push(fuelData);
+          var iTime = new Date(graphData[i].insertionTime).toLocaleString();
+          this.InsertionTime.push(iTime)
+        }
+
+        // this.getgraphoption();
+        this.dataToPlot();
+     
+      
+      },err=>{
+        this.Load  = false;
+      })
+  }
+   fuelChart:any;
+  dataToPlot(){
+  
+    if(this.fuelChart != undefined){
+      this.fuelChart.destroy();
+    }
+    this.fuelVoltage
+    this.fuelGraphData
+    this.InsertionTime
+  
+    var that = this;
+    var canvas = <HTMLCanvasElement> document.getElementById("fuelChart");
+    var ctx = canvas.getContext("2d");
+
+     this.fuelChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+          labels: this.InsertionTime,
+          datasets: [{
+              label: 'Temprature',
+              data: this.fuelGraphData,
+              backgroundColor: [
+                  'rgba(255, 99, 132, 0.2)',
+                  'rgba(54, 162, 235, 0.2)',
+                  'rgba(255, 206, 86, 0.2)',
+                  'rgba(75, 192, 192, 0.2)',
+                  'rgba(153, 102, 255, 0.2)',
+                  'rgba(255, 159, 64, 0.2)'
+              ],
+              borderColor: [
+                  'rgba(255, 99, 132, 1)',
+                  'rgba(54, 162, 235, 1)',
+                  'rgba(255, 206, 86, 1)',
+                  'rgba(75, 192, 192, 1)',
+                  'rgba(153, 102, 255, 1)',
+                  'rgba(255, 159, 64, 1)'
+              ],
+              borderWidth: 1
+          },
+          {
+            label: 'Voltage',
+            data: this.fuelVoltage,
+            backgroundColor: [
+              'rgba(73,188,170,0.4)'
+            ],
+            borderColor: [
+              'rgba(73,188,170,1)',
+             
+            ],
+            borderWidth: 1
+        }
+         ]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+          scales: {
+              yAxes: [{
+                  ticks: {
+                      beginAtZero: true
+                  }
+              }]
+          }
+      }
+  });
+
+
+
+
+  }
+
+  deviceArr=[];
+
+  getReport(event){
+   
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId; 
+      console.log('this.deviceArr',this.deviceArr);
+      
+      this.Fromdate = fd;
+      this.todate = td;
+      console.log("b4");
+     
+  
+     
+     
+      this.getGraphData();
+        
+  
+   
+  }
+  
+
+}
diff --git a/src/app/report/report component/tempreture-report/tempreture-report.component.html b/src/app/report/report component/tempreture-report/tempreture-report.component.html
new file mode 100644
index 0000000..82f9c04
--- /dev/null
+++ b/src/app/report/report component/tempreture-report/tempreture-report.component.html	
@@ -0,0 +1,98 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="container-fluid" style="padding-top: 6%;min-height: 100vh;">
+  <div class="row" style="width:100%; text-align: center; font-weight: 500; font-size: 24px;">
+    <div class="col-12">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+      <p class="headStyle">{{'TEMPERATURE REPORT' | translate}}</p>
+      <flash-messages style="float: center;"></flash-messages>
+    </div>
+  </div>
+  <div class="row" style=" width: 100%; padding-bottom: 10px; padding-top: 10px; background: #e5e5e5;">
+    <div class="col-2" style="text-align: right">
+      <md-select  [(ngModel)]="travelPat_duration.interval" placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
+        <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
+          {{path.label}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-2" style="text-align: center;margin-top:5px;">
+        <md-input-container>
+            <input mdInput placeholder="{{'Devices' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option" 
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
+                <span>{{ option_1.value }}</span>
+              </md-option>
+            </md-autocomplete> 
+          </md-input-container>    
+    </div>  
+    <div class="col-4" style="margin-top: 5px">
+      <div class="row">
+        <div class="col-6">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-6">
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true" ></owl-date-time>
+        </div>
+      </div>
+    </div>
+    <div class="col-4" style="margin-top: 20px; text-align: center; padding-left: 0; padding-right: 0;">
+        <!-- <md-checkbox type=”checkbox” [disabled] = "!disable_pdf_button" style= "margin-right:10px;margin-bottom:0px;" md-tooltip= "Show address" (change)="selectedStatus($event)"></md-checkbox> -->
+        <button style="background-color: #2d4262;color:#fdfdfd;" md-raised-button (click)="travelPathReport()">{{'SEARCH' | translate}}</button>
+        <button [disabled] = "!disable_pdf_button" style="background-color: #d81111;color:#fdfdfd;" md-raised-button (click)="export_pdf()">{{'EXPORT PDF' | translate}}</button>
+        <button style="background-color: #308411;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'EXPORT EXCEL' | translate}}</button>
+        <!-- <span [ngClass]="" (click)="selectedStatus('showAdd')" style="margin-right: 10px;font-size: 14px;cursor: pointer;" class="badge badge-pill badge-primary">{{devStatus.name}}</span> -->       
+    </div>
+
+  </div>
+  <div *ngIf="shownote" class="row" style="text-align: center;color: red">
+    <div class="col-12" >
+      <p>{{noteForpdf}}</p>
+    </div>
+  </div>  
+
+    <div class="row" style="width: 100%" > 
+      <div class="col-12" style="padding-left: 0;">
+          <table id="deviceTable" class="table table-striped table-hover" style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Device' | translate}}</th>
+        <th style="text-align: center">{{'IMEI' | translate}}</th>
+        <th style="text-align: center">{{'Date' | translate}}</th>
+        <th style="text-align: center">{{'ODO (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Speed (Km/hr)' | translate}}</th>
+        <th style="text-align: center">{{'External Battery' | translate}}</th>
+        <th style="text-align: center">{{'Temprature' | translate}}</th>
+        <th style="text-align: center">{{'Cumulative Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Location' | translate}}</th>     
+      </tr>
+    </thead> 
+    <!-- {{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}} -->
+    <!-- {{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}} -->
+    <tbody>
+      <tr *ngFor = "let gps_report of pathReport ; let i = index">
+        <td style="cursor:pointer ; text-align: center">{{gps_report.Device_name}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{(gps_report.imei) ? gps_report.imei : "NA"}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{gps_report.date  | date :  'd/M/yyyy, h:mm a'}}</td> 
+        <td style="cursor:pointer ; text-align: center">{{gps_report.odo ?(gps_report.odo | number : '1.2-2' ): "NA"}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{get_distance(pathReport,i)}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{gps_report.speed ? (gps_report.speed  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gps_report.external_Battery?  (gps_report.external_Battery  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gettempExac(gps_report.temp)}}</td>
+        <td style="cursor:pointer ; text-align: center">{{getcummulative_distance(pathReport,i)}}</td>
+        <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "locationOnDemand">
+          <a href={{addressLink}} target="_blank" (click)= getlink(gps_report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+        </td> -->
+        <td style="cursor:pointer ; text-align: center;width:40%" >{{gps_report.address}}</td>
+      </tr>
+    </tbody>
+  </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "!locationOnDemand">{{gps_report.address}}</td> -->
diff --git a/src/app/report/report component/tempreture-report/tempreture-report.component.scss b/src/app/report/report component/tempreture-report/tempreture-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/tempreture-report/tempreture-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/tempreture-report/tempreture-report.component.spec.ts b/src/app/report/report component/tempreture-report/tempreture-report.component.spec.ts
new file mode 100644
index 0000000..eff7855
--- /dev/null
+++ b/src/app/report/report component/tempreture-report/tempreture-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TempretureReportComponent } from './tempreture-report.component';
+
+describe('TempretureReportComponent', () => {
+  let component: TempretureReportComponent;
+  let fixture: ComponentFixture<TempretureReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TempretureReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TempretureReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/tempreture-report/tempreture-report.component.ts b/src/app/report/report component/tempreture-report/tempreture-report.component.ts
new file mode 100644
index 0000000..5e13998
--- /dev/null
+++ b/src/app/report/report component/tempreture-report/tempreture-report.component.ts	
@@ -0,0 +1,530 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdSnackBar } from '@angular/material';
+declare var google :any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-tempreture-report',
+  templateUrl: './tempreture-report.component.html',
+  styleUrls: ['./tempreture-report.component.scss']
+})
+export class TempretureReportComponent implements OnInit {
+  pathDuration = [
+    {label  :"10 Seconds",interval : "10"},
+    {label  :"1 Minutes",interval : "1"},
+    {label  :"5 Minutes",interval : "5"},
+    {label  :"10 Minutes",interval : "10"},
+    // {label  :"60 Minutes",interval : "60"}
+  
+  ];
+  travelPat_duration ={label  :"10 Minutes",interval : "10"};
+  superAdmin: any;
+  fs: any;
+
+  disable_pdf_button : boolean = false;
+  ls: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  devicesss: any;
+  finall: any;
+  options: any=[];
+  option : any;
+  dataSelect: any=[];
+  cust: boolean;
+  mb: string;
+  logoutbut: boolean;
+  dealer: boolean;
+  or: any;
+  logo: any;
+  text: any;
+  Fromdate = new Date();
+  todate = new Date();
+  showError : boolean = false;
+  Load: boolean =false;
+  pathReport: any;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  start_add_lat: any;
+  start_add_long: any;
+  clear_interval: any;
+  noteForpdf: string;
+  constructor(private contactService: ContactService,private router: Router,public snackBar: MdSnackBar) { }
+
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+    // var to_date = new Date();
+    // this.todate.setMinutes(this.todate.getMinutes() + parseInt(this.travelPat_duration.interval));
+    // this.Fromdate.setHours()
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+          // console.log(this.options);
+     
+
+      });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+
+  
+
+}
+
+travelPathReport(){
+  var that = this;
+  if((this.Fromdate == undefined)||(this.todate == undefined)){
+    let message1="Please Select Date";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  if(this.Fromdate.getTime() > this.todate.getTime()){
+    let message1="From Date cannot be greater than to date...";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  var diff = (this.todate.getTime() - this.Fromdate.getTime()) / 3600000;
+  console.log(diff);
+
+var now  = this.todate;
+var then = this.Fromdate;
+
+// var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
+var difference =this.todate.getTime() - this.Fromdate.getTime();
+// var d = moment.duration(ms);
+// var s = d.format("hh:mm:ss");
+var hour = (difference / (60*60*1000));
+// var hourCount = Number(hour);
+var diff_hr = Math.round(hour);
+console.log('diff_hr',diff_hr);
+if(diff_hr>(24*15)){
+  let message1="Date difference should not be greater then 15 Days";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000, 
+    }); 
+    return;
+}
+
+let r_I = difference / (1000*60) ; 
+let report_Interval = r_I/360 ;
+
+
+
+let Rlabel;
+let Rinterval ;
+// this.travelPat_duration.interval = JSON.stringify(Math.round(report_Interval)) ; 
+ Rlabel = JSON.stringify(Math.round(report_Interval))  + " " + "Minutes";
+ Rinterval = JSON.stringify(Math.round(report_Interval));
+ if(parseInt(JSON.stringify(report_Interval)) < 10){
+  Rlabel = JSON.stringify(10)  + " " + "Minutes";
+  Rinterval = JSON.stringify(10);
+}
+
+this.pathDuration.push({label  :Rlabel,interval : Rinterval}) ;
+this.travelPat_duration = {label  :Rlabel,interval : Rinterval};
+
+// // outputs: "48:39:30"
+// if (diff > 24) { 
+//   let message1="Date difference should not be more than 24 hours...";
+//   let action:any;
+//   this.snackBar.open(message1, action, {
+//     duration: 5000,
+//   }); 
+//   return;
+//  }
+
+  if((this.dataSelect.length == 0)||(this.dataSelect[0].did==undefined)){
+    let message1="Please Select Device";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Device", { cssClass: 'alert-danger', timeout: 3000 });
+    return;
+  }
+
+ 
+
+this.pathReport=[];
+  var payload ={
+    "to":this.todate,
+    "from" : this.Fromdate,
+    "device" : this.dataSelect[0].did,
+    "interval" : this.travelPat_duration.interval
+  }
+
+
+  this.Load = true;
+  var device_name = this.dataSelect[0].viewValue ; 
+  console.log("payload=>",payload);
+
+  this.contactService.getTravel_path_report(payload).subscribe(res=>{
+    clearTimeout(this.clear_interval);
+    this.Load = false;
+    this.disable_pdf_button = true;
+ 
+    for(let i = 0; i <res.length ; i++){
+      if(res[i]!=null){
+        res[i].Device_name = device_name;
+        this.pathReport.push(res[i]);
+      }else{
+        console.log('resnullresnullresnullresnullres=>',res[i]);
+      }
+    }
+
+    if(this.pathReport.length == 0){  
+      this.disable_pdf_button = false;
+      let message1="No Data Available";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,      
+      }); 
+      // this._flashMessagesService.show("No Data Available", { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+      this.convertAddress();
+    }
+
+  },err=>{
+    this.Load = false;
+    let message1="Please Try Again";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      }); 
+    // this._flashMessagesService.show("Please Try Again", { cssClass: 'alert-danger', timeout: 3000 });
+  })
+
+
+}
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index].odo)-parseFloat(gps_report[0].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index_1].odo)-parseFloat(gps_report[index_1-1].odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+export_pdf(){
+  console.log('pdf');
+  // jsPDF(orientation, unit, format
+
+  this.noteForpdf = '';
+  var f_date = moment(this.Fromdate).format('lll'); 
+  var t_date =moment(this.todate).format('lll');
+  var date_combine = f_date + '-' + t_date;
+  let doc = new jsPDF('l','pt','a4');
+  doc.text('Travel Path Report', 350, 30);
+  doc.text(date_combine, 250, 60);
+  
+
+  // doc.addHTML(document.getElementById("exportPdf"), function() {
+  //   var tpr ="";
+  //    doc.save("obrz.pdf");
+  // });
+
+  var specialElementHandlers = {
+    '#editor': function (element: any, renderer: any) {
+      return true;
+    }
+  };
+
+  doc.autoTable({
+    theme: 'striped',
+    html: '#deviceTable', 
+    margin: {top: 100},
+    // styles :  {
+    //   cellWidth : 50
+    // },     
+    willDrawCell: data => {
+      console.log('data=>',data);
+
+    //  console.log('data=>',data.row.index.length);
+     
+    // if(data.cell.text[0] === "Device"){
+    //   data.row.cells[0].styles.fillColor =  [224,224,224];
+    // }
+      if((data.row.index === 0)||(data.cell.text[0] === "Device")){ 
+        // data.row.cells[0].styles.halign = 'center';
+        data.row.cells[1].styles.halign = 'center';
+        data.row.cells[2].styles.halign = 'center';
+        data.row.cells[3].styles.halign = 'center';
+        data.row.cells[4].styles.halign = 'center';
+        data.row.cells[5].styles.halign = 'center';
+        data.row.cells[6].styles.halign = 'center';
+        // data.row.cells[0].styles.fillColor =  [224,224,224];
+        // doc.setLineHeightFactor()
+      }  
+      // data.row.cells[0].styles.halign = 'center';
+      data.row.cells[1].styles.halign = 'center';
+      data.row.cells[2].styles.halign = 'center';
+      data.row.cells[3].styles.halign = 'center';
+      data.row.cells[4].styles.halign = 'center';
+      data.row.cells[5].styles.halign = 'center';
+      data.row.cells[6].styles.halign = 'center';
+
+
+    
+    }
+    
+  });
+  // var pdfNameStr = travel_path_report
+  doc.save('travel_path_report.pdf');
+
+
+
+}
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+
+  }
+}
+locationOnDemand : boolean =true;
+shownote:boolean = false;
+locationAddress: any;
+
+addressLink = "";
+getlink(gps_report){
+  console.log("gps_report");
+  if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+    this.lattitude = null;
+  } else {
+      this.lattitude =gps_report.latDecimal;  
+  }
+  if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+    this.longitude = null;
+  }else{
+    this.longitude =gps_report.longDecimal;
+  }
+  this.addressLink =  'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+  return this.addressLink ; 
+}
+
+closeProcess:any;
+convertAddress(){
+  
+  // console.log('gRport=>',gRport);
+ 
+  var i = 0;
+  this.closeProcess= this.pathReport.length;
+  var outerThis =this;
+  console.log('this.closeProcess',this.closeProcess);
+  // let conditionalLogic = 2000 ; 
+  function f() {
+    let start_add_lat:any;
+    let start_add_long:any;
+    if((outerThis.pathReport[i].latDecimal!=null)&&(outerThis.pathReport[i].longDecimal!=null)){
+      start_add_lat =  outerThis.pathReport[i].latDecimal;
+      start_add_long= outerThis.pathReport[i].longDecimal; 
+    }else{
+      start_add_lat = null;
+      start_add_long= null;  
+    }
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng_start = new google.maps.LatLng(start_add_lat,start_add_long);
+   
+    var request={
+      latLng:latlng_start
+    }
+
+    let apiPayload = {
+      lat : start_add_lat,
+      long  : start_add_long
+
+    }
+
+    outerThis.contactService.getAddressByApi(apiPayload).subscribe(res=>{
+      // console.log('addressresponse=>', res);
+      if (res.message == "Address not found in databse") {
+        // conditionalLogic = 5000 ; 
+     
+        geocoder.geocode(request, function (data, status) {
+          let start_add: any;
+          if (status == google.maps.GeocoderStatus.OK) {
+            if (data[0] != null) {
+              start_add = data[0].formatted_address;
+              if (start_add == "Antarctica") {
+                start_add = "NA";
+              }
+
+            } else {
+              start_add = "NA";
+            }
+            outerThis.pathReport[i-1].address = start_add;
+          }
+          else {
+            start_add = "NA";    
+           
+          }
+          outerThis.pathReport[i-1].address = start_add;
+
+
+        })
+        }else{   
+            // conditionalLogic = 100 ;         
+            outerThis.pathReport[i-1].address = res.address;       
+        } 
+    },err=>{
+
+    })
+
+  
+    i++;
+    if( i < outerThis.closeProcess ){
+     
+      outerThis.clear_interval =  setTimeout( f,2000 );
+    }
+  }
+  f();
+
+}
+
+
+
+tab:any;
+
+exportExcel() {
+
+  var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+  var textRange; var j=0;
+  this.tab = document.getElementById('deviceTable'); // id of table
+
+  for(j = 0 ; j < this.tab.rows.length; j++) 
+  {     
+      tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      //tab_text=tab_text+"</tr>";
+  }
+
+  tab_text=tab_text+"</table>";
+  tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+
+
+  var ua = window.navigator.userAgent;
+  var msie = ua.indexOf("MSIE "); 
+
+  var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+  return (sa);
+}
+
+gettempExac(temp){
+  if(temp){
+    return (parseFloat(temp)/10).toFixed(2)
+  }else{
+    return 0;
+  }
+
+}
+
+}
diff --git a/src/app/report/report component/travel-path-report/travel-path-report.component.html b/src/app/report/report component/travel-path-report/travel-path-report.component.html
new file mode 100644
index 0000000..476b776
--- /dev/null
+++ b/src/app/report/report component/travel-path-report/travel-path-report.component.html	
@@ -0,0 +1,109 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="container-fluid" style="min-height: 100vh;">
+  <div class="row" style="width:100%; text-align: center; font-weight: 500; font-size: 24px;">
+    <div class="col-12">
+      <div class="loading" *ngIf="Load">Loading&#8230;</div>
+      <p class="headStyle">{{'TRAVEL PATH REPORT' | translate}}</p>
+      <flash-messages style="float: center;"></flash-messages>
+    </div>
+  </div>
+  <div class="row" style=" width: 100%; padding-bottom: 10px; padding-top: 10px; background: #e5e5e5;">
+    <div class="col-2" style="text-align: right">
+      <md-select  [(ngModel)]="travelPat_duration.interval" (change)="onChange(travelPat_duration)" placeholder="--{{'Duration' | translate}}--" ngDefaultControl>
+        <md-option *ngFor="let path of pathDuration" [value]="path.interval" >
+          {{path.label}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-2" style="text-align: center;margin-top:5px;">
+        <!-- <md-input-container> [disabled]="true"
+            <input mdInput placeholder="{{'Devices' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+            #state="ngModel" [(ngModel)]="option" 
+           (ngModelChange)="filterStates(option)">
+           <md-autocomplete #tdAuto="mdAutocomplete">
+              <md-option *ngFor="let option_1 of dataSelect" [value]="option_1.value" >
+                <span>{{ option_1.value }}</span>
+              </md-option>
+            </md-autocomplete> 
+          </md-input-container>    
+    </div>  
+    <div class="col-4" style="margin-top: 5px">
+      <div class="row">
+        <div class="col-6">
+            <span>{{'From Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-6">
+            <span>{{'To Date' | translate}}</span>
+            <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true" ></owl-date-time>
+        </div>
+      </div>
+    </div>
+    <div class="col-4" style="margin-top: 20px; text-align: center; padding-left: 0; padding-right: 0;">
+       
+        <button style="background-color: #2d4262;color:#fdfdfd;" md-raised-button (click)="travelPathReport()">{{'SEARCH' | translate}}</button>
+        <button style="background-color: #308411;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'EXPORT EXCEL' | translate}}</button>-->
+        <button [disabled] = "!disable_pdf_button" style="background-color: #d81111;color:#fdfdfd;" md-raised-button (click)="export_pdf()">{{'EXPORT PDF' | translate}}</button>
+        
+    </div> 
+
+  </div>
+  <div *ngIf="shownote" class="row" style="text-align: center;color: red">
+    <div class="col-12" >
+      <p>{{noteForpdf}}</p>
+    </div>
+  </div>  
+
+    <div class="row" style="width: 100%" > 
+      <div class="col-12" style="padding-left: 0;">
+          <table id="deviceTable" class="table table-striped table-hover" style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Device' | translate}}</th>
+        <th style="text-align: center">{{'IMEI' | translate}}</th>
+        <th style="text-align: center">{{'Date' | translate}}</th>
+        <th style="text-align: center">{{'ODO (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Speed (Km/hr)' | translate}}</th>
+        <th style="text-align: center">{{'Avg Speed (Km/hr)' | translate}}</th>
+        <th style="text-align: center">{{'External Battery' | translate}}</th>
+        <th style="text-align: center">{{'Temprature' | translate}}</th>
+        <th style="text-align: center">{{'Cumulative Distance (K.M.)' | translate}}</th>
+        <th style="text-align: center">{{'Location' | translate}}</th>     
+      </tr>
+    </thead> 
+    <!-- {{fuelval.start_time | date :  'd/M/yyyy, h:mm a'}} -->
+    <!-- {{fuelval.fuel_consumed ?(fuelval.fuel_consumed | number : '1.2-2' ): "NA"}} -->
+    <tbody>
+      <tr *ngFor = "let gps_report of pathReport ; let i = index">
+        <td style="cursor:pointer ; text-align: center">{{gps_report.data.Device_name}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{(gps_report.data.imei) ? gps_report.data.imei : "NA"}}</td>   
+        <td style="cursor:pointer ; text-align: center">{{gps_report.data.date }}</td> 
+        <td style="cursor:pointer ; text-align: center">{{gps_report.data.odo ?(gps_report.data.odo | number : '1.2-2' ): "NA"}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{get_distance(pathReport,i)}}</td>  
+        <td style="cursor:pointer ; text-align: center">{{gps_report.data.speed ? (gps_report.data.speed  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{((get_distance(pathReport,i))/0.166) | number : '1.2-2' }}</td>
+        <td style="cursor:pointer ; text-align: center">{{gps_report.data.external_Battery?  (gps_report.data.external_Battery  | number : '1.2-2' ) : "0"}}</td>
+        <td style="cursor:pointer ; text-align: center">{{gettempExac(gps_report.data.temp)}}</td>
+        <td style="cursor:pointer ; text-align: center">{{getcummulative_distance(pathReport,i)}}</td>
+        <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "locationOnDemand">
+          <a href={{addressLink}} target="_blank" (click)= getlink(gps_report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+        </td> -->
+        <td style="cursor:pointer ; text-align: center;width:40%" >
+          <span *ngIf="gps_report.address=='Address not found in databse' || !gps_report.address">
+          <button class="btn btn=info btn-sm"><i id="refresh" title="Refresh Address" (click)="getAddress(gps_report.data,i)" style="font-size:20px;color: green"
+              class="fas fa-redo"></i></button>
+          </span>
+          <span *ngIf="gps_report.address!='Address not found in databse'">
+          
+            {{gps_report.address}}
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+      </div>
+    </div>
+  </div>
+
+  <!-- <td style="cursor:pointer ; text-align: center;width:40%" *ngIf = "!locationOnDemand">{{gps_report.address}}</td> -->
diff --git a/src/app/report/report component/travel-path-report/travel-path-report.component.scss b/src/app/report/report component/travel-path-report/travel-path-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/travel-path-report/travel-path-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/travel-path-report/travel-path-report.component.spec.ts b/src/app/report/report component/travel-path-report/travel-path-report.component.spec.ts
new file mode 100644
index 0000000..766cf2a
--- /dev/null
+++ b/src/app/report/report component/travel-path-report/travel-path-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TravelPathReportComponent } from './travel-path-report.component';
+
+describe('TravelPathReportComponent', () => {
+  let component: TravelPathReportComponent;
+  let fixture: ComponentFixture<TravelPathReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TravelPathReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TravelPathReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/travel-path-report/travel-path-report.component.ts b/src/app/report/report component/travel-path-report/travel-path-report.component.ts
new file mode 100644
index 0000000..8947f17
--- /dev/null
+++ b/src/app/report/report component/travel-path-report/travel-path-report.component.ts	
@@ -0,0 +1,687 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdSnackBar } from '@angular/material';
+declare var google :any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+
+@Component({
+  selector: 'app-travel-path-report',
+  templateUrl: './travel-path-report.component.html',
+  styleUrls: ['./travel-path-report.component.scss']
+})
+export class TravelPathReportComponent implements OnInit {
+  pathDuration = [
+    {label  :"1 Minutes",interval : "1"},
+    {label  :"5 Minutes",interval : "5"},
+    {label  :"10 Minutes",interval : "10"},
+    // {label  :"45 Minutes",interval : "45"},
+    // {label  :"60 Minutes",interval : "60"}
+  
+  ];
+  travelPat_duration ={label  :"10 Minutes",interval : "10"};
+  superAdmin: any;
+  fs: any;
+
+  disable_pdf_button : boolean = false;
+  ls: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  devicesss: any;
+  finall: any;
+  options: any=[];
+  option : any;
+  dataSelect: any=[];
+  cust: boolean;
+  mb: string;
+  logoutbut: boolean;
+  dealer: boolean;
+  or: any;
+  logo: any;
+  text: any;
+  Fromdate = new Date();
+  todate = new Date();
+  showError : boolean = false;
+  Load: boolean =false;
+  pathReport: any;
+  address_show: string;
+  lattitude: any;
+  longitude: any;
+  start_add_lat: any;
+  start_add_long: any;
+  clear_interval: any;
+  noteForpdf: string;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,private _service:ReportService,public snackBar: MdSnackBar) { 
+     this._service.invokeEventFortravelPathReportt.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.travelPathReport(value); 
+       }
+      });
+  }
+   ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+
+    var fTime = new Date().setHours(0,0,0);
+    this.Fromdate = new Date(fTime);
+    // var to_date = new Date();
+    // this.todate.setMinutes(this.todate.getMinutes() + parseInt(this.travelPat_duration.interval));
+    // this.Fromdate.setHours()
+    // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+    //   data => {
+    //     this.devicesss = data
+     
+    //     this.finall = (this.devicesss.devices);
+
+    //     for(let i=0;i<this.devicesss.devices.length;i++){
+
+    //       // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+    //         let a ={
+    //           value : this.devicesss.devices[i].Device_Name,
+    //           viewValue:this.devicesss.devices[i].Device_Name,
+    //           did:this.devicesss.devices[i].Device_ID,
+    //           id:this.devicesss.devices[i]._id,
+    //           user:this.devicesss.devices[i].user,
+    //           // email: this.devicesss.devices[i].Email_ID,
+    //           // deviceType: this.devicesss.devices[i].type_of_device
+    //         }
+    //         this.options.push(a);
+    //       // }
+
+    //     }
+    //       // console.log(this.options);
+     
+
+    //   });
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];  
+
+  
+
+}
+
+travelPathReport(value){
+  if(value=="getExcel"){
+    this.exportExcel()
+  }else{
+
+
+  this.Fromdate=value.fromDate;
+this.todate=value.toDate
+// this.dataSelect[0].did=value.deviceArr
+  // tpdata.fromDate;
+  //   var td  = tpdata.toDate;
+  //   if(event.deviceArr.length
+  var that = this;
+  if((this.Fromdate == undefined)||(this.todate == undefined)){
+    let message1="Please Select Date";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  if(this.Fromdate.getTime() > this.todate.getTime()){
+    let message1="From Date cannot be greater than to date...";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Date", { cssClass: 'alert-danger', timeout: 3000 });
+
+    return;
+  }
+
+  var diff = (this.todate.getTime() - this.Fromdate.getTime()) / 3600000;
+  console.log(diff);
+
+var now  = this.todate;
+var then = this.Fromdate;
+
+// var ms = moment(now,"DD/MM/YYYY HH:mm:ss").diff(moment(then,"DD/MM/YYYY HH:mm:ss"));
+var difference =this.todate.getTime() - this.Fromdate.getTime();
+// var d = moment.duration(ms);
+// var s = d.format("hh:mm:ss");
+var hour = (difference / (60*60*1000));
+// var hourCount = Number(hour);
+var diff_hr = Math.round(hour);
+console.log('diff_hr',diff_hr);
+if(diff_hr>(24*15)){
+  let message1="Date difference should not be greater then 15 Days";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000, 
+    }); 
+    return;
+}
+
+// let r_I = difference / (1000*60) ; 
+// let report_Interval = r_I/360 ;
+
+
+
+// let Rlabel;
+// let Rinterval ;
+// // this.travelPat_duration.interval = JSON.stringify(Math.round(report_Interval)) ; 
+//  Rlabel = JSON.stringify(Math.round(report_Interval))  + " " + "Minutes";
+//  Rinterval = JSON.stringify(Math.round(report_Interval));
+//  if(parseInt(JSON.stringify(report_Interval)) < Number(this.travelPat_duration.interval)){
+//   Rlabel = JSON.stringify(this.travelPat_duration.interval)  + " " + "Minutes";
+//   Rinterval = JSON.stringify(this.travelPat_duration.interval);
+// }
+
+// this.pathDuration.push({label  :Rlabel,interval : Rinterval}) ;
+// this.travelPat_duration = {label  :Rlabel,interval : Rinterval};
+
+// // outputs: "48:39:30"
+// if (diff > 24) { 
+//   let message1="Date difference should not be more than 24 hours...";
+//   let action:any;
+//   this.snackBar.open(message1, action, {
+//     duration: 5000,
+//   }); 
+//   return;
+//  }
+
+  if((value.deviceArr.length == 0)||(value.deviceArr[0]==undefined)){
+    let message1="Please Select Device";
+    let action:any;
+    this.snackBar.open(message1, action, {
+      duration: 5000,
+      
+    }); 
+    // this._flashMessagesService.show("Please Select Device", { cssClass: 'alert-danger', timeout: 3000 });toISOString();
+    return;
+  }
+
+ 
+
+this.pathReport=[];
+  var payload ={
+    "to":new Date(this.todate).toISOString(),
+    "from" : new Date(this.Fromdate).toISOString(),
+    "device" : value.deviceArr[0].id[0],
+    "interval" : this.travelPat_duration.interval
+  }
+
+
+  this.Load = true;
+  console.log( value.deviceArr[0]);
+  
+  var device_name = value.deviceArr[0].name ; 
+  console.log("payload=>",payload);
+
+  this.contactService.getTravel_path_report(payload).subscribe(res=>{
+    clearTimeout(this.clear_interval);
+    this.Load = false;
+    this.disable_pdf_button = true;
+ 
+    for(let i = 0; i <res.length ; i++){
+      if(res[i]!=null){
+        res[i].data.Device_name = device_name;
+        this.pathReport.push(res[i]);
+      }else{
+        // console.log('resnullresnullresnullresnullres=>',res[i]);
+      }
+    }
+
+    if(this.pathReport.length == 0){  
+      this.disable_pdf_button = false;
+      let message1="No Data Available";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,      
+      }); 
+      // this._flashMessagesService.show("No Data Available", { cssClass: 'alert-danger', timeout: 3000 });
+    }else{
+      // this.convertAddress();
+    }
+
+  },err=>{
+    this.Load = false;
+    let message1="Please Try Again";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      }); 
+    // this._flashMessagesService.show("Please Try Again", { cssClass: 'alert-danger', timeout: 3000 });
+  })
+  }
+
+}
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index].data.odo)-parseFloat(gps_report[0].data.odo);
+    // console.log("hjdfhhdfh",cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(gps_report[index_1].data.odo)-parseFloat(gps_report[index_1-1].data.odo);
+    // console.log(cum_distance);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+export_pdf(){
+  console.log('pdf');
+  // jsPDF(orientation, unit, format
+
+  this.noteForpdf = '';
+  var f_date = moment(this.Fromdate).format('lll'); 
+  var t_date =moment(this.todate).format('lll');
+  var date_combine = f_date + '-' + t_date;
+  let doc = new jsPDF('l','pt','a4');
+  doc.text('Travel Path Report', 350, 30);
+  doc.text(date_combine, 250, 60);
+  
+
+  // doc.addHTML(document.getElementById("exportPdf"), function() {
+  //   var tpr ="";
+  //    doc.save("obrz.pdf");
+  // });
+
+  var specialElementHandlers = {
+    '#editor': function (element: any, renderer: any) {
+      return true;
+    }
+  };
+
+  doc.autoTable({
+    theme: 'striped',
+    html: '#deviceTable', 
+    margin: {top: 100},
+    // styles :  {
+    //   cellWidth : 50
+    // },     
+    willDrawCell: data => {
+      console.log('data=>',data);
+
+    //  console.log('data=>',data.row.index.length);
+     
+    // if(data.cell.text[0] === "Device"){
+    //   data.row.cells[0].styles.fillColor =  [224,224,224];
+    // }
+      if((data.row.index === 0)||(data.cell.text[0] === "Device")){ 
+        // data.row.cells[0].styles.halign = 'center';
+        data.row.cells[1].styles.halign = 'center';
+        data.row.cells[2].styles.halign = 'center';
+        data.row.cells[3].styles.halign = 'center';
+        data.row.cells[4].styles.halign = 'center';
+        data.row.cells[5].styles.halign = 'center';
+        data.row.cells[6].styles.halign = 'center';
+        // data.row.cells[0].styles.fillColor =  [224,224,224];
+        // doc.setLineHeightFactor()
+      }  
+      // data.row.cells[0].styles.halign = 'center';
+      data.row.cells[1].styles.halign = 'center';
+      data.row.cells[2].styles.halign = 'center';
+      data.row.cells[3].styles.halign = 'center';
+      data.row.cells[4].styles.halign = 'center';
+      data.row.cells[5].styles.halign = 'center';
+      data.row.cells[6].styles.halign = 'center';
+
+
+    
+    }
+    
+  });
+  // var pdfNameStr = travel_path_report
+  doc.save('travel_path_report.pdf');
+
+
+
+}
+
+// changeDate(path){
+//   console.log("inside function");
+ 
+//   this.todate = new Date(this.Fromdate.setMinutes(this.Fromdate.getMinutes() + parseInt(path.interval)))
+//   console.log("this.travelPat_duration",this.todate);
+
+// }
+
+
+filterStates(val) {
+
+  // console.log(val)
+  // console.log(this.options)
+
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+  
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+
+  }
+}
+locationOnDemand : boolean =true;
+shownote:boolean = false;
+// selectedStatus(ev){
+//   // if(ev.checked === true){
+//   //   this.locationOnDemand = !this.locationOnDemand;
+//   //   this.disable_pdf_button = true;
+//   //   this.shownote = true;
+//   //   this.noteForpdf = "Please wait while we are fetching Address, We recommend you not to download pdf before complete address conversion !!!"
+//   //   this.convertAddress();
+
+//   // }else{
+//     // clearTimeout(this.clear_interval);
+//     // this.shownote = false;
+//     this.noteForpdf = ""
+//     this.disable_pdf_button = false;
+//     // this.travelPathReport()
+//     // this.locationOnDemand = !this.locationOnDemand
+
+//   // }
+// }
+
+locationAddress: any;
+// getAddress(gps_report) {
+//   var outerThis = this;
+//   if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+//     this.lattitude = null;
+//   } else {
+//       this.lattitude =gps_report.latDecimal;  
+//   }
+//   if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+//     this.longitude = null;
+//   }else{
+//     this.longitude =gps_report.longDecimal;
+//   }
+
+
+//   var geocoder = new google.maps.Geocoder();
+//   var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+//   // var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+//   console.log("this.lattitude, this.longitude",this.lattitude, this.longitude);
+
+//   var request = {
+//     latLng: latlng
+//   };
+
+//   var that = this;
+//   geocoder.geocode(request, function (data, status) {
+//     if (status == google.maps.GeocoderStatus.OK) {
+//       if (data[0] != null) {
+//         outerThis.address_show = data[0].formatted_address;
+//           gps_report.locationAddress = outerThis.address_show;
+//       } else { 
+//         gps_report.locationAddress = "No address available";     
+//       }
+//     }
+//     else {
+//       outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+//       gps_report.locationAddress = outerThis.address_show;
+//     }
+
+//   })
+// }
+
+addressLink = "";
+getlink(gps_report){
+  console.log("gps_report");
+  if ((gps_report.latDecimal== undefined)||(gps_report.latDecimal == null)) {
+    this.lattitude = null;
+  } else {
+      this.lattitude =gps_report.latDecimal;  
+  }
+  if((gps_report.longDecimal == undefined)||(gps_report.longDecimal == null)){
+    this.longitude = null;
+  }else{
+    this.longitude =gps_report.longDecimal;
+  }
+  this.addressLink =  'https://maps.google.com/?q=' + this.lattitude + ',' + this.longitude;
+  return this.addressLink ; 
+}
+
+closeProcess:any;
+// convertAddress(){
+  
+//   // console.log('gRport=>',gRport);
+ 
+//   var i = 0;
+//   this.closeProcess= this.pathReport.length;
+//   var outerThis =this;
+//   console.log('this.closeProcess',this.closeProcess);
+//   // let conditionalLogic = 2000 ; 
+//   function f() {
+//     let start_add_lat:any;
+//     let start_add_long:any;
+//     if((outerThis.pathReport[i].latDecimal!=null)&&(outerThis.pathReport[i].longDecimal!=null)){
+//       start_add_lat =  outerThis.pathReport[i].latDecimal;
+//       start_add_long= outerThis.pathReport[i].longDecimal; 
+//     }else{
+//       start_add_lat = null;
+//       start_add_long= null;  
+//     }
+
+//     var geocoder = new google.maps.Geocoder();
+//     var latlng_start = new google.maps.LatLng(start_add_lat,start_add_long);
+   
+//     var request={
+//       latLng:latlng_start
+//     }
+
+//     let apiPayload = {
+//       lat : start_add_lat,
+//       long  : start_add_long
+
+//     }
+
+//     outerThis.contactService.getAddressByApi(apiPayload).subscribe(res=>{
+//       // console.log('addressresponse=>', res);
+//       if (res.message == "Address not found in databse") {
+//         // conditionalLogic = 5000 ; 
+     
+//         geocoder.geocode(request, function (data, status) {
+//           let start_add: any;
+//           if (status == google.maps.GeocoderStatus.OK) {
+//             if (data[0] != null) {
+//               start_add = data[0].formatted_address;
+//               if (start_add == "Antarctica") {
+//                 start_add = "NA";
+//               }
+
+//             } else {
+//               start_add = "NA";
+//             }
+//             outerThis.pathReport[i-1].address = start_add;
+//           }
+//           else {
+//             start_add = "NA";    
+           
+//           }
+//           outerThis.pathReport[i-1].address = start_add;
+
+
+//         })
+//         }else{   
+//             // conditionalLogic = 100 ;         
+//             outerThis.pathReport[i-1].address = res.address;       
+//         } 
+//     },err=>{
+
+//     })
+
+  
+//     i++;
+//     if( i < outerThis.closeProcess ){
+     
+//       outerThis.clear_interval =  setTimeout( f,2000 );
+//     }
+//   }
+//   f();
+
+// }
+
+
+
+tab:any;
+
+exportExcel() {
+
+  var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+  var textRange; var j=0;
+  this.tab = document.getElementById('deviceTable'); // id of table
+
+  for(j = 0 ; j < this.tab.rows.length; j++) 
+  {     
+      tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      //tab_text=tab_text+"</tr>";
+  }
+
+  tab_text=tab_text+"</table>";
+  tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+  // tab_text= tab_text.replace(/<th>Edit</th>/gi, ""); // reomves input params
+
+
+  var ua = window.navigator.userAgent;
+  var msie = ua.indexOf("MSIE "); 
+
+  var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+  return (sa);
+}
+
+gettempExac(temp){
+  if(temp){
+    return (parseFloat(temp)/10).toFixed(2)
+  }else{
+    return 0;
+  }
+
+}
+onChange(value){
+
+  console.log("ACTUAL",this.travelPat_duration.interval,'-',value)
+}
+
+getAddress(data,i){
+   const that = this;
+   let geocoder = new google.maps.Geocoder();
+   
+               let t_latlng
+               var d_lat;
+               var d_lng;
+               console.log(data);
+               
+              //  if(typeof(data.startAddress)=='object'){
+                  t_latlng = new google.maps.LatLng(data.geoJSON.coordinates[1],data.geoJSON.coordinates[0]);
+                  d_lat=data.geoJSON.coordinates[1];
+                  d_lng=data.geoJSON.coordinates[0]
+              //  }else{
+              //     t_latlng = new google.maps.LatLng(data.endLat, data.endLng);
+              //     d_lat=data.endLat;
+              //     d_lng=data.endLng
+              //  }
+
+                let request = {
+                  latLng: t_latlng
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      var liveAdd = data[0].formatted_address;
+                      that.pathReport[i].address=data[0].formatted_address
+                      console.log(data[0].formatted_address);
+                      that.saveAddress(d_lat, d_lng,liveAdd)
+                    } 
+                  }
+                  else {
+                    console.log(data);
+                    // that.liveAdd = 'NA';
+                    that.pathReport[i].address="Address not found"
+                    console.log(that.pathReport[i]);
+  
+                  }
+                }
+                )
+}
+
+saveAddress(lat,lng,address){
+    var addressObj = {
+    "lat":lat,
+    "long":lng,
+    "address":address
+  }
+    this.contactService.saveAdd(addressObj).subscribe(res=>{
+      console.log(res);
+      // this.getReport(this.value);
+    },err=>{  
+      //console.log("couldn't save address");
+    })
+
+  }
+
+}
\ No newline at end of file
diff --git a/src/app/report/report component/trip-details/trip-details.component.html b/src/app/report/report component/trip-details/trip-details.component.html
new file mode 100644
index 0000000..bcfc155
--- /dev/null
+++ b/src/app/report/report component/trip-details/trip-details.component.html	
@@ -0,0 +1,75 @@
+
+<div style="float:left; width: 100%; padding-top: 6%;">
+    <br><br>
+    <div *ngIf="Load"  >
+      <div class="loading">Loading&#8230;</div>
+    </div>
+    <h5>Trip Details:<div  style="float:right;    font-size: 13px;">
+        <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'"  [autoClose]="true"></owl-date-time>    </div> </h5>
+        <!-- [dateFormat]="'DD/MM/YYYY'"  (ngModelChange)="table1ch()" -->
+        <!--  <button  title="Add Devices" style="border:1px solid transparent; background-color: transparent;">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon>
+           
+         </button> -->
+    <!--    <button md-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;margin-top:29px" (click)="adddev()">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon></button> -->
+           <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+           
+           <thead style="background-color:#A2C523;color: white;">
+             <tr>
+               <th>From Date</th>
+               <th>Form location</th>
+               <th>To Date</th>
+               <th>To Location</th>
+               <th>
+                 <span>
+                  Distance
+                 </span>
+                 <span style="margin-left:2px;">
+                   (Km/hr)
+                 </span>
+               </th>
+          
+             </tr>
+           </thead>
+         
+           <tbody>
+      
+        <tr *ngFor="let device of trip_detail_log">
+
+              <td   style="cursor:pointer">{{device.startTime}}</td>
+
+               <td  style="cursor:pointer">{{device.start_address}}</td>
+
+               <td  style="cursor:pointer" >{{device.endTime}}</td>
+
+               <td  style="cursor:pointer" ></td>
+
+              <td  style="cursor:pointer">{{device.distance}}</td>
+          
+          
+
+            <!--    <td>
+                <md-slide-toggle 
+                [(ngModel)]="device.maintenance"
+                (change)="onChange($event,device._id)" 
+                ></md-slide-toggle>
+              </td -->
+
+             <!--  <td>
+                
+                  <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;"(click)="openDialog2(device._id,device.Device_Des,device.sim_number,device.Device_Name)">   
+                 
+                      <md-icon>edit</md-icon></button></p>
+              </td> -->
+              <!--  <td> <p><button md-tooltip="Remove Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete(device.Device_ID)">   
+                 
+                <md-icon>delete</md-icon></button></p>
+               </td> -->
+           </tr>  
+           </tbody> 
+         </table> 
+       
+ 
+   
+</div>
+
diff --git a/src/app/report/report component/trip-details/trip-details.component.scss b/src/app/report/report component/trip-details/trip-details.component.scss
new file mode 100644
index 0000000..9d5d7b1
--- /dev/null
+++ b/src/app/report/report component/trip-details/trip-details.component.scss	
@@ -0,0 +1,1003 @@
+::-webkit-scrollbar {
+  display: none;
+  }
+
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+  
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+
+/deep/ .mat-menu-panel.test{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a{
+    display: block;
+  padding: 9px 10px;
+  margin: 0;
+  border-bottom: 1px solid #999;
+  }
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg); 
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg); 
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s; 
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s; 
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s; 
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s; 
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s; 
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s; 
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s; 
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; } 
+}
+#active{
+  text-decoration-line: underline;
+  text-decoration-color: rgb(66, 26, 245);
+} 
+#d:hover { 
+  color: rgb(14, 102, 18);
+
+}
+#ac{
+  color: rgb(38, 38, 90)
+}
+ul, li {
+  list-style: none;
+  float: left;
+  line-height: 15vh;
+}
+.upper{
+  margin-top: -70px;
+  width: 100%;
+  height: 15%;
+ /* margin-left: -2px;*/
+  position: fixed;
+  background-color: white;
+  top: 0;
+  z-index: 1
+}
+.up{
+  color: gray;
+  /* Add a font */
+ 
+  /* Set the font-size to 25 pixels */
+  font-size: 25px;
+
+}  
+.middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+  margin-left: -220px;
+  margin-top: -20px;
+  
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.desc {
+  padding: 15px;
+  text-align: center;
+}
+#insert{
+  margin-left:8px;
+  margin-top:-15px;
+  text-shadow: 20px;
+}
+#insert2{
+  margin-left:8px;
+  margin-top:-15px;
+  text-shadow: 20px;
+}
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+.vertical-menu {
+  width: 250px;
+  padding-left: 10px;
+}
+
+.vertical-menu a {
+  background-color: #eee;
+  color: black;
+  display: block;
+  padding: 12px;
+  text-decoration: none;
+ 
+}
+
+.vertical-menu a:hover {
+  background-color: #ccc;
+}
+
+.vertical-menu a.active {
+  
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+// #c2 {
+  
+  
+// }
+#c1 {
+  float:left;
+
+}
+
+body {margin:0}
+
+.icon-bar {
+  width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+  margin-top: -9px;
+  height:100%;
+  position: fixed;
+  display: inline-block;
+  margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+  .off{
+     display: none;
+  }
+}
+.icon-bar2 {
+  
+  width: 299px;
+  background-color: white;
+  margin-top: -7px;
+  height:86vh;
+  position: fixed;
+ 
+}
+.icon-bar a {
+  display: block;
+  text-align: center;
+  padding: 16px;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+  text-align: left;
+}
+
+.icon-bar a:hover {
+  background-color: #000;
+}
+
+.active {
+  background-color: #4CAF50 !important;
+}
+.iphone {
+  width: 201px;
+  height: 378px;
+  background: #f9f7f9;
+  border: 5px solid #c1bfc1;
+  border-radius: 45px;
+  opacity: 0.8;
+}
+.highlight {
+  width: 185px;
+  height: 366px;
+  border: 3px solid #fff;
+  border-radius: 45px;
+  position: relative;
+  z-index: 10;
+  top: -748px;
+  left: 10px;
+}
+.circle {
+  width: 7px;
+  height: 7px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -370px;
+  left: 92px;
+}
+.camera {
+  width: 10px;
+  height: 10px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -376px;
+  left: 66px;
+}
+.speaker {
+  width: 59px;
+  height: 3px;
+  background: #333;
+  border-radius: 5px;
+  position: relative;
+  top: -372px;
+  left: 73px;
+}
+.screen {
+  width: 166px;
+  height: 255px;
+  border: 3px solid #333;
+  border-radius: 5px;
+  position: relative;
+  left: 18px;
+  top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+  width: 47px;
+  height: 47px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  top: -353px;
+  left: 79px;
+  z-index: 2;
+}
+.home2 {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: relative;
+  top: -403px;
+      left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+  //background:green;
+  float:right;
+}
+#c1, #c2 {
+  width: 33%; 
+  //background: rebeccapurple
+}
+
+#c3 {
+  width: auto;
+   width:34%;
+  // background: red
+}
+.off{
+  margin: auto;
+  width: 60%;
+  top:70%;
+  padding: 10px;
+  margin-right:30%
+  
+}
+.newspaper {
+  -webkit-column-count: 2; /* Chrome, Safari, Opera */
+  -moz-column-count: 2; /* Firefox */
+  column-count: 2;
+  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+  -moz-column-gap: 40px; /* Firefox */
+  column-gap: 40px;
+  align-content:left;
+  text-align: left;
+}
+#demo {
+  margin: 30px 0 50px 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  
+}
+
+#demo .wrapper {
+  display: inline-block;
+  width: 180px;
+  margin: 0 10px 0 0;
+  height: 20px;
+  position: relative;
+
+}
+
+#demo .parent {
+  height: 100%;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  border-radius: 5px;
+  background: #F9F9F9;
+  border: 1px solid #AAA;
+  border-bottom: 1px solid #777;
+  color: #282D31;
+  font-weight: bold;
+  z-index: 2;
+  position: relative;
+  -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+  -webkit-transition-delay: .8s;
+  text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+  background: #fff;
+  -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+#demo .content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: 1;
+  height: 0;
+  width: 180px;
+  padding-top: 30px;
+  -webkit-transition: height .5s ease;
+  -webkit-transition-delay: .4s;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+  text-decoration: none;
+}
+
+#demo .content li:hover {
+  background: #eee;
+  color: #333;
+}
+
+#demo .content li {
+  list-style: none;
+  text-align: left;
+  color: #888;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.customClass {
+  background-color: #dd3;
+  border-radius: 5px;
+  margin:5px;
+  width: 500px;
+}
+
+.customClass .img-ul-upload {
+  background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+  background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+  color: purple !important;
+}
+
+.customClass .img-ul-container {
+  background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+  padding: 16px;
+  height: 201px !important;
+}
+.weekDays-selector input {
+  display: none!important;
+}
+
+.weekDays-selector input[type=checkbox] + label {
+  display: inline-block;
+  border-radius: 6px;
+  background: #dddddd;
+  height: 40px;
+  width: 34.2px;
+  margin-right: 3px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.weekDays-selector input[type=checkbox]:checked + label {
+  background: #2AD705;
+  color: #ffffff;
+}
+@media screen and (max-width: 900px) {
+      .icon-bar{
+          display: none;
+          
+      }
+      .sch{
+          display: none;
+      }
+      .first{
+          width:1%!important;
+      }
+      .second{
+          margin-left: 8px!important;
+      }
+      .small{
+          display: block!important;
+      }
+      .image{
+          display: none;
+      }
+      .schlar{
+          display: block!important;
+      }
+}
+
+@media screen and (min-width: 900px) {
+.schlar{
+  display: none;
+}
+
+}
+.small{
+    display: none;
+}
+.first{
+  float:left;
+  width: 16%; 
+  height:86vh;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  margin-right: 5px
+}
+.second{
+  width: 88%; 
+  height:86vh;
+  margin-left:171px;
+}
+.mat-dialog-container {
+  max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+  cursor:pointer !important;
+  font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: .4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262F;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555
+}
+
+.expansion-panel__content{
+  margin-left: 0% !important;
+}
+
+
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+  color: #000;
+  background-color: transparent;
+  border: none;
+  padding: 1em;
+  font-size: 1em; }
+  .ngx-picker--btn__selected {
+    background-color: #eee; }
+  .ngx-picker--btn:hover {
+    transition: .25s ease;
+    background-color: #eee;
+    cursor: pointer; }
+  .ngx-picker--btn:focus {
+    outline-color: transparent; }
+
+.ngx-picker--btn__month:hover {
+  border-top-left-radius: 0.2em; }
+
+.ngx-picker--btn__done:hover {
+  border-bottom-right-radius: 0.2em; }
+
+.ngx-picker--btn__now:hover {
+  border-bottom-left-radius: 0.2em; }
+
+.ngx-picker--btn__next:hover {
+  border-top-right-radius: 0.2em; }
+
+.calendar {
+  position: absolute;
+  background-color: #e6e6e6;
+  max-width: 16em;
+  min-width: 16em;
+  font-size: 16px;
+  font-family: "Arial", sans-serif;
+  border-radius: 0.2em;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+
+.calendar--previous-and-next {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: flex-end; }
+
+.calendar--footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #e6e6e6;
+  padding: 0;
+  border-radius: 0.2em; }
+
+.calendar--years-select,
+.calendar--months-select {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 14.85em;
+  background-color: #fff;
+  width: 100%; }
+
+.calendar--year,
+.calendar--month {
+  display: block;
+  padding: .5em 1em;
+  width: 100%;
+  overflow: hidden;
+  color: #000; }
+  .calendar--year__selected,
+  .calendar--month__selected {
+    color: #000;
+    font-weight: bold;
+    background-color: #eee; }
+  .calendar--year:hover,
+  .calendar--month:hover {
+    cursor: pointer;
+    background-color: #eee;
+    font-weight: 400;
+    color: #000; }
+
+.calendar--days-of-week {
+  display: flex;
+  justify-content: space-around;
+  background-color: #eee; }
+
+.calendar--day-of-week {
+  position: relative;
+  padding: .5em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #000;
+  font-size: .9em; }
+
+.calendar--days-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff; }
+
+.calendar--day {
+  text-align: center;
+  width: 1.285em;
+  padding: .5em;
+  font-weight: 500;
+  color: #000; }
+  .calendar--day__muted {
+    color: #999; }
+  .calendar--day__selected {
+    background-color: #eee;
+    color: #000; }
+  .calendar--day:hover {
+    cursor: pointer;
+    color: #000;
+    background-color: #eee; }
+
+.ngx-picker {
+  display: flex;
+  position: relative; }
+  .ngx-picker .calendar {
+    position: absolute;
+    left: 0;
+    top: 2.5em;
+    z-index: 3; }
+
+.time-picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #e6e6e6; }
+
+.time--values {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #eee; }
+
+.time--value {
+  width: 2.66em;
+  font-size: 1em;
+  padding: .5em 0;
+  text-align: center;
+  color: #000; }
+  .time--value__selected {
+    color: #000;
+    background-color: #e6e6e6; }
+  .time--value:hover {
+    transition: .25s ease;
+    cursor: pointer;
+    background-color: #e6e6e6; }
+
+[hidden] {
+  display: none !important; }
+  #c11 {
+      width: 25%; 
+      float:left
+  }
+  #c22{
+      width: 25%; 
+      float:left
+  }
+  #c33 {
+      width: 25%; 
+      float:left
+      
+  }
+  #c44{
+      width: 25%; 
+      float:left
+  }
+  #c111 {
+      width: 50%; 
+      float:left
+  }
+  #c222{
+      width: 45%; 
+      float:left
+  }
+  #c333 {
+      width: 5%; 
+      float:left
+      
+  }
+  /* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/src/app/report/report component/trip-details/trip-details.component.spec.ts b/src/app/report/report component/trip-details/trip-details.component.spec.ts
new file mode 100644
index 0000000..05efc03
--- /dev/null
+++ b/src/app/report/report component/trip-details/trip-details.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripDetailsComponent } from './trip-details.component';
+
+describe('TripDetailsComponent', () => {
+  let component: TripDetailsComponent;
+  let fixture: ComponentFixture<TripDetailsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripDetailsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/trip-details/trip-details.component.ts b/src/app/report/report component/trip-details/trip-details.component.ts
new file mode 100644
index 0000000..e8ce8d4
--- /dev/null
+++ b/src/app/report/report component/trip-details/trip-details.component.ts	
@@ -0,0 +1,314 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { distinctUntilChanged } from 'rxjs/operators';
+
+
+declare var google: any;
+
+
+@Component({
+  selector: 'app-trip-details',
+  templateUrl: './trip-details.component.html',
+  styleUrls: ['./trip-details.component.scss']
+})
+export class TripDetailsComponent implements OnInit {
+
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog) { }
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  date1:any = new Date();
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  finall:any;
+  mb:any;
+  logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+deviceId:any;
+userId : any;
+d_detail:any;
+
+from_date = new Date();
+to_date = new Date();
+superAdmin:Boolean = false;
+  ngOnInit() {
+
+    this.from_date =new Date( window.localStorage.getItem("from_date"));
+    // console.log(this.from_date);
+
+    this.to_date =new Date( window.localStorage.getItem("to_date"));
+    // console.log(this.to_date);
+
+    this.deviceId = window.localStorage.getItem("Device_id");
+    this.userId =  window.localStorage.getItem("userId");
+
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  // this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }
+    if(this.mb.charAt(0)=="n"){
+      this.mb = ' '
+    }
+    if( window.localStorage['Custumer'] == 'ON'){
+      this.logoutbut = false
+      this.dealer = true
+   }
+   else{
+       this.logoutbut = true
+   }
+
+
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];
+
+   this.trip_details();
+
+  }
+
+  cond:Boolean = false;
+    point : any = 0;
+
+  a(){
+   
+    // console.log(this.point);
+    if(this.point == 0){
+     this.cond = true;
+     this.point ++;
+    }
+  else if(this.point % 2 == 0){
+   this.cond = true;
+   this.point ++;
+  }
+  else{
+    this.cond = false
+    this.point ++;
+  }
+  
+    
+  }
+
+  
+summaryReport(){
+ 
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+
+route_map(){
+  this.cond =false;
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+  soon(){
+
+  }
+
+  devi(){
+
+  }
+
+  openNav(){
+
+  }
+
+
+  geo(){
+
+  }
+
+  report(){
+
+  }
+
+  report_speed(){
+
+  }
+
+  ideal(){
+
+  }
+
+  ign(){
+
+  }
+
+  before:any;
+
+  myaccount(){
+
+  }
+
+  mydealer(){
+
+  }
+  logout(){
+
+  }
+
+  alert_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  distance_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+  
+  trip_report(){
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+  
+  }
+
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+ trip_detail_log =[];
+ start_add:any="";
+  trip_details(){
+    let user = this.userId;
+    let devID = this.deviceId;
+    // console.log(this.from_date);
+    let fDate = this.from_date.toISOString();
+    let tdate = this.to_date.toISOString();
+    // console.log(fDate);
+    // console.log(tdate);
+
+    this.contactService.trip_logs(user,fDate,tdate,devID)
+      .subscribe((res)=>{
+        this.d_detail = res;
+        // console.log(res);
+        // console.log(this.d_detail);
+
+        for(let i=0;i<this.d_detail.length;i++){
+       
+          let lat = this.d_detail[i].start_lat;
+          let long = this.d_detail[i].start_long;
+          var geocoder = new google.maps.Geocoder();
+          var latlng = new google.maps.LatLng(lat,long);
+    
+          var request = {
+            latLng:latlng
+          };
+    
+          geocoder.geocode(request, function(data,status){
+            if(status == google.maps.GeocoderStatus.OK){
+              if(data[0]!=null){
+              
+                 this.start_add = data[0].formatted_address;
+                //  console.log("address is: " + this.start_add);
+
+               
+               
+              }else{
+                // console.log("No address available")
+              }
+            }
+            else{
+              // $scope.allDevices[index].address = device.last_location.lat + ' ,' + device.last_location.long
+              // console.log("lat long numeric address  : NA" );
+              this.start_add ='NA';
+            //  this.trip_detail_log.push({"start_address":this.start_add});
+            }
+            
+          })
+          let show_add = this.start_add;
+          let fd = this.d_detail[i].start_time.toLocaleString();
+          let td = this.d_detail[i].end_time.toLocaleString();
+          // console.log(fd);
+          // console.log(td);     
+          let dist =  this.d_detail[i].distance/1000
+          this.trip_detail_log.push({"distance":dist,
+          "startTime":fd,
+          "endTime":td,
+         });
+        
+          
+        }
+       
+
+        // console.log(this.trip_detail_log);
+      })
+    
+
+  }
+
+}
diff --git a/src/app/report/report component/trip-load-unload/trip-load-unload.component.html b/src/app/report/report component/trip-load-unload/trip-load-unload.component.html
new file mode 100644
index 0000000..ecb17d5
--- /dev/null
+++ b/src/app/report/report component/trip-load-unload/trip-load-unload.component.html	
@@ -0,0 +1,96 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Loading Unloading Trip' | translate}}</h4>
+      <!-- <i class="fas fa-download"></i> -->
+    </div>
+  </div>  
+
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier" ></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <ul class="nav nav-tabs" id="myTab" role="tablist" > 
+        <li class="nav-item" (click)="changeDetector('group')">
+          <a class="nav-link active" id="grouped-tab" data-toggle="tab" href="#grouped" role="tab" aria-controls="grouped logs" aria-selected="false">{{'Group' | translate}}</a>
+        </li>
+        <li class="nav-item" (click)="changeDetector('detail')">
+          <a class="nav-link" id="detailed-tab" data-toggle="tab" href="#detailed" role="tab" aria-controls="detialed data" aria-selected="true">{{'Detail'|translate}}</a>
+        </li>
+      </ul>
+      <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="grouped" role="tabpanel" aria-labelledby="groupes-tab">
+          <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div *ngIf="Load" class="loading">Loading&#8230;</div>
+              <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+              <div style="width: 100%;height:84vh;">
+                <table id="deviceTable_grouped" cellspacing="0" style="width: 100%;font-size: 14px;">
+                    <thead style="background-color:#e0e0e0;color: #444444;width: 100%;">
+                        <tr>
+                           <th style="text-align:left;">{{'Vehicle Name' | translate}}</th>
+                            <th style="text-align:left;">{{'Trip Start Geofence' | translate}}</th>
+                            <th style="text-align:left;">{{'Trip End Geofence' | translate}}</th>
+                            <th style="text-align:left;">{{'Distance' | translate}}</th>
+                            <th style="text-align:left;">{{'Running' | translate}}</th>
+                            <th style="text-align:left;">{{'Stop' | translate}}</th>
+                            <th style="text-align:left;">{{'Idle' | translate}}</th>
+                            <th style="text-align:left;">{{'Utilization %' | translate}}</th>
+                            <th style="text-align:left;">{{'Efficiency %' | translate}}</th>                
+                            <th style="text-align:left;">{{'No. of trips' | translate}}</th>  
+                        </tr>
+                    </thead>  
+                </table>
+            </div> 
+            </div>
+          </div> 
+        </div>
+        <div class="tab-pane fade" id="detailed" role="tabpanel" aria-labelledby="detailed-tab">
+          <div *ngIf="tableSwitch" class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+            <div class="col-sm-12 col-md-12 col-lg-12">
+              <div *ngIf="Load" class="loading">Loading&#8230;</div>
+              <div id="toast"> <div id="desc">{{data_descip}}</div> </div>
+              <div >
+                <table id="deviceTable" style="font-size: 14px;width:100%">
+                    <thead style="background-color:#e0e0e0;color: #444444;">
+                        <tr>
+                          <th style="text-align:left">{{'Vehicle Name' | translate}}</th>
+                            <th style="text-align:left">{{'Trip Start' | translate}}</th>
+                            <th style="text-align:left">{{'Trip End' | translate}}</th>
+                            <th style="text-align:left;">{{'Loading Start' | translate}}</th>
+                            <th style="text-align:left">{{'Loading Exit' | translate}}</th>   
+
+                            <th style="text-align:left;">{{'Unloading Start' | translate}}</th>
+                            <th style="text-align:left">{{'Unloading Exit' | translate}}</th>
+
+                            <th style="text-align:left">{{'Distance (Kms.)' | translate}}</th>
+                            <th style="text-align:left;">{{'Duration (HH:MM)' |translate}}</th>
+                            <th style="text-align:left">{{'Running Time (HH:MM)' |translate}}</th>
+                            <th style="text-align:left">{{'Stoppage Time (HH:MM)' | translate}}</th>        
+                            <th style="text-align:left">{{'Idle Time (HH:MM)' | translate}}</th>   
+                            <th style="text-align: left">{{'Status' | translate}}</th>      
+                            <th style="text-align: left">{{'Replay' | translate}}</th>           
+                        </tr>
+                    </thead>  
+                    <!-- startSiteEnterAt - Loading Start
+                    startSiteExitAt - Loading Exit
+                    endSitEnterAt - Unloading Start
+                    endSiteExitAt - Unloading Exit -->
+                </table>
+            </div> 
+            </div>
+          </div> 
+        </div>
+       
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/report/report component/trip-load-unload/trip-load-unload.component.scss b/src/app/report/report component/trip-load-unload/trip-load-unload.component.scss
new file mode 100644
index 0000000..0096efa
--- /dev/null
+++ b/src/app/report/report component/trip-load-unload/trip-load-unload.component.scss	
@@ -0,0 +1,46 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+th,
+td {
+  white-space: nowrap;
+}
+
+div.dataTables_wrapper {
+  width: 80%;
+  margin: 0 auto;
+}
diff --git a/src/app/report/report component/trip-load-unload/trip-load-unload.component.spec.ts b/src/app/report/report component/trip-load-unload/trip-load-unload.component.spec.ts
new file mode 100644
index 0000000..3f08195
--- /dev/null
+++ b/src/app/report/report component/trip-load-unload/trip-load-unload.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripLoadUnloadComponent } from './trip-load-unload.component';
+
+describe('TripLoadUnloadComponent', () => {
+  let component: TripLoadUnloadComponent;
+  let fixture: ComponentFixture<TripLoadUnloadComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripLoadUnloadComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripLoadUnloadComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/trip-load-unload/trip-load-unload.component.ts b/src/app/report/report component/trip-load-unload/trip-load-unload.component.ts
new file mode 100644
index 0000000..9f5afbc
--- /dev/null
+++ b/src/app/report/report component/trip-load-unload/trip-load-unload.component.ts	
@@ -0,0 +1,910 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { Http, Headers, RequestOptions, ResponseContentType } from '@angular/http';
+import { saveAs } from 'file-saver';
+import { environment } from '../../../../environments/environment';
+import { MdSnackBar, MdDialog } from '@angular/material';
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;declare var google: any;
+
+import { PlayTripComponent } from '../../../play-trip/play-trip.component';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+const now = new Date();
+
+@Component({
+  selector: 'app-trip-load-unload',
+  templateUrl: './trip-load-unload.component.html',
+  styleUrls: ['./trip-load-unload.component.scss']
+})
+export class TripLoadUnloadComponent implements OnInit {
+  dateStr: any;
+  Fromdate = new Date();
+  tableSwitch:boolean= true;
+  todate = new Date();
+  useridd: any;
+  fDate: any;
+  tDate: any;
+  dev_url = environment.hostUrl;
+  // dateString=['Today Report','Yesterday Report','Weekly Report','Monthly Report'];
+  fromDate: any;
+  toDate: any;
+  Load: boolean;
+  tabelObj: any;
+  tabelObj_grouped:any;
+  custtype: any;
+  superAdmin: any;
+  data_descip: string;
+  reportArr :any= [];
+  emailid: any;
+  devicesss: any;
+  options: any;
+  finall: any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService, private _service:ReportService,private http: Http, public snackBar: MdSnackBar,public dialog: MdDialog) { 
+    this._service.invokeEventForloadunloadTrip.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      }); 
+  }
+  ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.tDate = new Date();
+    var fd = new Date();
+    fd.setHours(0, 0, 0, 0);
+    this.fDate = fd;
+    // this.getDevices();
+  
+    this.testTable();
+    var tt= this;
+    setTimeout(()=>{
+      tt.testTable_grouped();
+     
+    },5000)
+  
+  }
+
+  deviceArr = [];
+  tab: any;
+
+  exportExcel() {
+    console.log('Inside detailed');
+    var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j = 0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for (j = 0; j < this.tab.rows.length; j++) {
+      tab_text = tab_text + this.tab.rows[j].innerHTML + "</tr>";
+
+    }
+
+    tab_text = tab_text + "</table>";
+
+    tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
+
+    return (sa);
+  }
+  exportExcel_grouped() {
+   
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable_grouped').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+
+    
+  }
+
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable').DataTable({  
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        deferRender: true,
+        scrollY:    '55vh',
+        scrollX : true,
+        scrollCollapse: true,
+     
+        "sScrollX": "100%",
+        scroller:       true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          that.Load = true;
+
+
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+          // https://www.oneqlik.in/trackRouteMap/getTripReport?userid=59cbbdbe508f164aa2fef3d8
+          suburl += "/trackRouteMap/getTripReport?userid=" + that.useridd +'&from='+from_date.toISOString()+ '&to='+ to_date.toISOString();
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }
+
+          console.log('that.deviceArr',that.deviceArr);
+       
+            that.contactService.get(suburl).subscribe(resp => {
+              console.log('resp=>',resp); 
+              // var tripData = [];
+              // tripData = resp ; 
+
+              // that.reportArr = [];
+              that.reportArr= resp ; 
+              that.Load = false; 
+            
+              callback({ data: resp });
+       
+            }, err => {
+              that.Load = false;
+              var errCode = err.status;
+              if(errCode == 500){
+                callback({ data: [] });
+              }
+              console.log("error", err);
+            });
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#playTrip', row).bind('click', () => {  
+            console.log(data);
+           console.log(data.reportingDateTime);
+           console.log(data.exitDateTime);
+            var fd = new Date(data.loadingPoint.reportingDateTime).toISOString();
+            var td = new Date(data.destination.exitDateTime).toISOString();
+              var replayObj= {
+                fromdate:fd,
+                todate : td,
+                user : that.useridd,
+                device:{imei: data.deviceId,_id: data.device_id,iconType:'car'},
+                geofences:[data.Source, data.Destination]  ,
+                distance: (typeof data.distanceTravelled === 'number')?(parseFloat(data.distanceTravelled).toFixed(2)):0    
+              }
+
+              let dialogRef = that.dialog.open(PlayTripComponent, {    
+                data: replayObj
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+                if(result == 'cancelled'){
+                
+                }
+              })  
+             
+              
+            }); 
+             
+        }
+      ,
+         
+
+        "columns": [
+          // {
+          //   "data": "_id",
+          //   "defaultContent": "",
+          //   "visible" : false,
+          //   "render": function (data, type, row) {       
+           
+          //     return data ? data : "";   
+          //   }
+          // },
+          
+          {
+            "data": "vrn",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data : "";   
+            }
+          },
+          {
+            "data": "Source",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data.geoname : "";   
+            }
+          },
+          {
+            "data": "Destination",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? data.geoname : '';
+            }
+          },
+          {
+            "data": "loadingPoint",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return data ? moment(data.reportingDateTime).format('llll') : "--";
+            }
+          },
+          {
+            "data": "loadingPoint",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data ? moment(data.exitDateTime).format('llll') : '--';
+            }
+          },
+          //-------------UNLOADING NEW------------
+          {
+             "data": "destination",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data.reportingDateTime ? moment(data.reportingDateTime).format('llll') : '--';
+            }
+          },
+          {
+             "data": "destination",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data.exitDateTime ? moment(data.exitDateTime).format('llll') : '--';
+            }
+          },
+          // <!-- startSiteEnterAt - Loading Start
+          //           startSiteExitAt - Loading Exit
+          //           endSitEnterAt - Unloading Start
+          //           endSiteExitAt - Unloading Exit -->
+          {
+            "data": "distanceTravelled",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? parseFloat(data).toFixed(2) : 0.0;
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? that.secondsToHms(data.total) : "0:0";
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              that.secondsToHms(data.running);
+              return data ? that.secondsToHms(data.running) : '0:0';
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return data ? that.secondsToHms(data.stoppage) :'0:0';
+            }
+          },
+          {
+            "data": "tripTime",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return  '--';
+            }
+          }
+          ,
+          {
+            "data": "status",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              return  data;
+            }
+          }
+          ,
+          {
+            "data": "null",
+            "defaultContent": "",
+            render: function(data, type, row) {    
+              if(row.status  == 'COMPLETED'){
+                return '<i id="playTrip" style="color:green;cursor:pointer" class="fas fa-play"></i>';
+              }else{
+                return '<i class="fas fa-times"></i>';
+              }
+          
+            }
+        }    
+        ]
+        // "columnDefs": [
+        //   { className: "dt-body-left", "targets": [0, 1, 2, 3,4,5,6,7] },
+        //   {
+        //     "targets": '_all',
+        //     "createdCell": function (td, cellData, rowData, row, col) {
+        //       $(td).css('padding', '18px')
+        //     }
+        //   },
+        //   { "width": "10px", "targets": 0 },
+        //   { "width": "40px", "targets": 1 },
+        //   { "width": "100px", "targets": 2 },
+        //   { "width": "70px", "targets": 3 },
+
+        // ]
+      });
+
+    });
+
+  }
+
+  testTable_grouped() {
+
+    const that = this;
+    console.log("inside function grouped");
+    $(document).ready(function () {
+      that.tabelObj_grouped = $('#deviceTable_grouped').DataTable({
+      
+        "processing": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        ajax: (dataTablesParameters, callback) => {
+          console.log('temptemptemptemptemp', dataTablesParameters);
+          var deviceID;
+          // that.Load = true;
+
+
+          var from_date = that.Fromdate;
+          var to_date = that.todate;
+          var user = that.useridd;
+          var temp = {
+            from_date: from_date,
+            to_date: to_date,
+            user: user
+          }
+          var suburl = "";
+        
+          suburl += "/trackRouteMap/getTripCountReport?userid=" +that.useridd +'&from='+from_date.toISOString()+ '&to='+ to_date.toISOString();
+          if (that.deviceArr.length != 0) {
+            suburl += '&device=' + that.deviceArr;
+          }
+          console.log('B4 grouped data called');
+            that.contactService.get(suburl).subscribe(resp => {    
+              // console.log('response for grouped Data',resp);
+            callback({ data: resp });
+            }, err => {
+              // that.Load = false;
+              console.log('Error Detected in load unload grouped');
+              callback({ data: [] });
+              // var errCode = err.status;
+              // if(errCode == 500){
+               
+              // }
+            });
+        },
+        "rowCallback": function( row, data, index ) {
+          // console.log(data);
+         
+          // var colorChk = data.utilization?parseFloat(data.utilization).toFixed(2):null;
+          // console.log(row);
+          if (data.utilization >= 60 )
+          {
+              $('td', row).css({'background-color': '#3ded1d','border-bottom' :'1px solid white'});
+          }
+          else if(data.utilization<60)
+          {
+              $('td', row).css({'background-color': '#FF0800' ,'border-bottom' :'1px solid white'});
+          }else{
+            $('td', row).css({'background-color': 'grey','border-bottom' :'1px solid white'});
+          }
+      },
+ 
+        "columns": [
+       
+          
+          {
+            "data": "Vehicle Name",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+           
+              return data ? data : "";   
+            }
+          },
+          {
+            "data": "Source",
+            "defaultContent": "",
+            "render": function (data, type, row) {       
+              // console.log('datadatadatadatadatadatadatadata',data.source)
+              return data ? data.geoname : "--";   
+            }
+          },
+          {
+            "data": "Destination",
+            "defaultContent": "",
+            render: function (data, type, row) {
+              // console.log('datadatadatadatadatadatadatadata',data)
+              return data ? data.geoname : '--';
+            }
+          },
+          {
+            "data": "distanceTravelled",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return data ? data.toFixed(2):0;
+            }
+          },
+          {
+            "data": "running",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "stoppage",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "idle",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            return  data ? that.secondsToHms(data) : "0:0";
+            }
+          },
+          {
+            "data": "utilization",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+            var  d = data?parseFloat(data).toFixed(2):'0'
+            return  d;
+            }
+          },
+          {
+            "data": "efficiency",
+            "defaultContent": "",
+            render: function (data, type, row) {    
+              var  e = data?parseFloat(data).toFixed(2):'0'
+            return  e;
+            }
+          },
+          {
+            "data": "tripCount",
+            "defaultContent": "",
+            render: function (data, type, row) {   
+              return data ?data:0;
+            }
+          }
+      
+        ],
+        "columnDefs": [
+          // { className: "dt-body-left", "targets": [0, 1, 2, 3,4] },
+        ]
+      });
+
+    });
+
+  }
+
+  identifier: any = 'loadunloadTrip';
+  getReport(event) {
+    console.log("inside function");
+    if (event == 'getExcel') {
+      if(this.detector === 'group'){
+        console.log('group');
+       
+        this.exportExcel_grouped();
+        
+      }
+      if(this.detector === 'detail'){
+         console.log('detail');
+        // this.exportExcel();
+         this.exportExcelforGroup()
+        
+      }
+     
+    }else if(event=='getPdf')
+  {
+    // this.expotToPdf();
+  } else {
+      var deviceId: any;
+      var tpdata = event;
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td = new Date(tpdata.toDate);
+
+      if (event.deviceArr.length == 0) {
+        deviceId = [];
+      } else {
+       
+        deviceId = event.deviceArr;
+      }
+      this.deviceArr = deviceId;
+      this.Fromdate = fd;
+      this.todate = td;
+     
+      this.tabelObj.ajax.reload();
+     var pt = this;
+     var tmp =  setTimeout(()=>{
+        pt.tabelObj_grouped.ajax.reload();
+        clearTimeout(tmp);
+      },2000)
+     
+    }
+
+  }
+
+
+   secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h : "0";
+    var mDisplay = m > 0 ? m : "0";
+    var sDisplay = s > 0 ? s  : "0";
+    return hDisplay + ":" +mDisplay; 
+}
+
+detector='group';
+changeDetector(iden){
+ 
+  
+  if(iden === 'detail'){
+    this.detector = 'detail';
+  }
+  if(iden === 'group'){
+    this.detector = 'group';
+
+
+  }
+}
+
+
+exportExcelforGroup() {
+  var array=[]
+  for(var i=0;i<this.reportArr.length;i++){
+      array.push({
+        'vrn':this.reportArr[i].vrn,
+        'Sourcegeoname':this.reportArr[i].Source.geoname,
+        'Destinationgeoname':this.reportArr[i].Destination.geoname,
+        'loadingreportingDateTime':this.reportArr[i].loadingPoint.reportingDateTime?  moment(this.reportArr[i].loadingPoint.reportingDateTime).format('llll') : '--',
+        'loadingexitDateTime':this.reportArr[i].loadingPoint.exitDateTime?  moment(this.reportArr[i].loadingPoint.exitDateTime).format('llll') : '--',
+        'destinationreportingDateTime':this.reportArr[i].destination.reportingDateTime?  moment(this.reportArr[i].destination.reportingDateTime).format('llll') : '--',
+        'destinationexitDateTime':this.reportArr[i].destination.exitDateTime?  moment(this.reportArr[i].destination.exitDateTime).format('llll') : '--',
+        'distanceTravelled':this.reportArr[i].distanceTravelled,
+        'tripTimetotal':this.reportArr[i].tripTime.total?this.secondsToHms(this.reportArr[i].tripTime.total):'N/A',
+        'tripTimerunning':this.reportArr[i].tripTime.running?this.secondsToHms(this.reportArr[i].tripTime.running):'N/A',
+        'tripTimestoppage':this.reportArr[i].tripTime.stoppage?this.secondsToHms(this.reportArr[i].tripTime.stoppage):'N/A',
+        'idleTime':'',
+        'status':this.reportArr[i].status
+      })
+  }
+    this.downloadFile(array);
+  }
+
+  downloadFile(data, filename = 'Loading Unloading Group') {
+   console.log(data);
+   
+    let arrHeader = ['vrn','Sourcegeoname','Destinationgeoname','loadingreportingDateTime','loadingexitDateTime','destinationreportingDateTime','destinationexitDateTime','distanceTravelled','tripTimetotal','tripTimerunning','tripTimestoppage','idleTime','status'];
+    let csvData = this.ConvertToCSV(data, arrHeader);
+    let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
+    let dwldLink = document.createElement("a");
+    let url = URL.createObjectURL(blob);
+    let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
+    if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
+      dwldLink.setAttribute("target", "_blank");
+    }
+    dwldLink.setAttribute("href", url);
+    dwldLink.setAttribute("download", "Loading Unloading.csv");
+    dwldLink.style.visibility = "hidden";
+    document.body.appendChild(dwldLink);
+    dwldLink.click();
+    document.body.removeChild(dwldLink);
+  }
+  ConvertToCSV(objArray, headerList) {
+    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
+    
+    let str ='Loading Unloading \r\n'
+   let row = 'S.No,';
+
+    let newHeaders =['Vehicle Name','Trip Start','Trip End','Loading Start','Loading Exit','Unloading Start','Unloading Exit','Distance','Duration','Running Time','Stoppage Time','Idle Time','Status'];
+
+    for (let index in newHeaders) {
+      row += newHeaders[index] + ',';
+    }
+    row = row.slice(0, -1);
+    str += row + '\r\n';
+    for (let i = 0; i < array.length; i++) {
+      let line = (i + 1) + '';
+      if(i<array.length){}
+      for (let index in headerList) {
+        let head = headerList[index];       
+        line += ',' + this.strRep(array[i][head]);
+      }
+      str += line + '\r\n';
+      
+    }
+    return str;
+  }
+
+  strRep(data) {
+    if(typeof data == "string") {
+      let newData = data.replace(/,/g, " ");
+       return newData;
+    }
+    else if(typeof data == "undefined") {
+      return "-";
+    }
+    else if(typeof data == "number") {
+      return  data.toString();
+    }
+    else {
+      return data;
+    }
+  }
+
+  expotToPdf(){
+    console.log(this.reportArr);
+
+    
+    
+  }
+
+downloadGroupPdf() {
+    let fileName =
+      "Loading Unloading Trip" +
+      new Date().getTime() +
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+
+    var doc = new jsPDF("p", "pt", pdfsize);
+  
+  doc.setFontSize(15);
+  doc.text('Loading Unloading Trip ', 20, 30);
+    doc.setFontStyle("arial");
+    var header = function(data) {
+    doc.setFontSize(15);
+    doc.setTextColor(40);
+    doc.setFontStyle('normal');
+   
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    startY: doc.autoTableEndPosY() + 20
+  };
+
+    doc.autoTable({
+      head: this.headRows(),
+      // margin: { top: 80 },
+      body: this.bodyRows(this.reportArr.length, this.reportArr),
+      options
+      
+    });
+    doc.save(fileName);
+  }
+  headRows() {
+var row
+    if(this.detector === 'group'){
+     row=[
+      {
+        "Vehicle Name":'Vehicle Name',
+        Source:'Trip Start Geofence',
+        Destination:'Trip End Geofence',
+        distanceTravelled:'Distance',
+        running:'Running',
+         stoppage:'Stop',
+          idle:'Idle',
+          utilization:'Utilization %',
+          efficiency:'Efficiency %',
+        tripCount:"No. of trips"
+      
+      }
+    ];
+     
+     
+      
+    }
+    if(this.detector === 'detail'){
+    
+      row=[
+      {
+        vrn:'Vehicle Name',
+        Source:'Trip Start Geofence',
+        Destination:'Trip End Geofence',
+        distanceTravelled:'Distance',
+        running:'Running',
+         stoppage:'Stop',
+          idle:'Idle',
+          utilization:'Utilization %',
+          efficiency:'Efficiency %',
+        tripCount:"No. of trips"
+      
+      }
+    ];
+      
+    }
+    return row
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       "Vehicle Name":pdfBody[j]["Vehicle Name"],
+       Source:pdfBody[j].Source,
+       Destination:pdfBody[j].Destination,
+       distanceTravelled:pdfBody[j].distanceTravelled,
+       running:pdfBody[j].running,
+       stoppage:pdfBody[j].stoppage,
+       idle:pdfBody[j].idle,
+        utilization:pdfBody[j].utilization,
+         efficiency:pdfBody[j].efficiency,
+         tripCount:pdfBody[j].tripCount,
+      
+      });
+    }
+    return body;
+  }
+
+
+
+
+
+}
+// {
+//             "data": "vrn",
+//             "defaultContent": "",
+//             "render": function (data, type, row) {       
+           
+//               return data ? data : "";   
+//             }
+//           },
+//           {
+//             "data": "Source",
+//             "defaultContent": "",
+//             "render": function (data, type, row) {       
+           
+//               return data ? data.geoname : "";   
+//             }
+//           },
+//           {
+//             "data": "Destination",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return data ? data.geoname : '';
+//             }
+//           },
+//           {
+//             "data": "loadingPoint",
+//             "defaultContent": "",
+//             render: function (data, type, row) {    
+//             return data ? moment(data.reportingDateTime).format('llll') : "--";
+//             }
+//           },
+//           {
+//             "data": "loadingPoint",
+//             "defaultContent": "",
+//             render: function (data, type, row) {   
+//               return data ? moment(data.exitDateTime).format('llll') : '--';
+//             }
+//           },
+//           //-------------UNLOADING NEW------------
+//           {
+//              "data": "destination",
+//             "defaultContent": "",
+//             render: function (data, type, row) {   
+//               return data.reportingDateTime ? moment(data.reportingDateTime).format('llll') : '--';
+//             }
+//           },
+//           {
+//              "data": "destination",
+//             "defaultContent": "",
+//             render: function (data, type, row) {   
+//               return data.exitDateTime ? moment(data.exitDateTime).format('llll') : '--';
+//             }
+//           },
+//           // <!-- startSiteEnterAt - Loading Start
+//           //           startSiteExitAt - Loading Exit
+//           //           endSitEnterAt - Unloading Start
+//           //           endSiteExitAt - Unloading Exit -->
+//           {
+//             "data": "distanceTravelled",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return data ? parseFloat(data).toFixed(2) : 0.0;
+//             }
+//           },
+//           {
+//             "data": "tripTime",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return data ? that.secondsToHms(data.total) : "0:0";
+//             }
+//           },
+//           {
+//             "data": "tripTime",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               that.secondsToHms(data.running);
+//               return data ? that.secondsToHms(data.running) : '0:0';
+//             }
+//           },
+//           {
+//             "data": "tripTime",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return data ? that.secondsToHms(data.stoppage) :'0:0';
+//             }
+//           },
+//           {
+//             "data": "tripTime",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return  '--';
+//             }
+//           }
+//           ,
+//           {
+//             "data": "status",
+//             "defaultContent": "",
+//             render: function (data, type, row) {
+//               return  data;
+//             }
+//           }
\ No newline at end of file
diff --git a/src/app/report/report component/trip-report/trip-report.component.html b/src/app/report/report component/trip-report/trip-report.component.html
new file mode 100644
index 0000000..67bb749
--- /dev/null
+++ b/src/app/report/report component/trip-report/trip-report.component.html	
@@ -0,0 +1,159 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Trip Report'|translate}}</h4>
+    </div>
+  </div>  
+  <!-- <div class="row rowStyle" >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <app-report-filter></app-report-filter>
+    </div>
+  </div> -->
+  <div class="row rowStyle">
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+    
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                      <th style="text-align: left">{{'Vehicle Name' | translate}}</th>
+                      <th style="text-align: left">{{'From Date' | translate}}</th>
+                      <th style="text-align: left">{{'From Location' | translate}}</th>
+                      <th style="text-align: left">{{'To date' | translate}}</th>
+                      <th style="text-align: left">{{'To location' | translate}}</th>
+                      <th style="text-align: left">{{'Distance (Km/hr)' | translate}}</th>
+                      <th style="text-align: left">{{'Replay' | translate}}</th>
+                    </tr>
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
+<!-- 
+
+<app-all-menus></app-all-menus>
+<div style="min-height:100vh;padding-top:6%">
+  <p class="headStyle">{{'Trips Report' | translate}}</p>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-3" style="padding-left: 70px; padding-top: 15px;">
+  
+          <select id="select" multiple="multiple" >
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+      </div>
+      <div class="col-md-3">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="top: 16px;">
+        <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="tripReport(Fromdate,todate)">{{'Trip Report' | translate}}</button>
+        <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+      </div>
+    </div>
+  </div>
+  <table class="table table-striped table-hover " style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">{{'Vehicle Name' | translate}}</th>
+        <th style="text-align: center">{{'From Date' | translate}}</th>
+        <th style="text-align: center">{{'From Location' | translate}}</th>
+        <th style="text-align: center">{{'To date' | translate}}</th>
+        <th style="text-align: center">{{'To location' | translate}}</th>
+        <th style="text-align: center">{{'Distance (Km/hr)' | translate}}</th>
+     
+      </tr>
+    </thead>
+    <tbody>
+
+      <tr *ngFor="let device of summary">
+        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
+        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+       
+            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
+            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank"></a></a>
+       
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
+          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank"></a></a>
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
+      </tr>
+    </tbody>
+  </table>
+  <table id="test"class="table table-striped table-hover " style="display: none">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+    <thead style="background-color:#A2C523;color: white;">
+      <tr>
+        <th style="text-align: center">Vehicle Name</th>
+        <th style="text-align: center">From Date</th>
+        <th style="text-align: center">From Location</th>
+        <th style="text-align: center">To date</th>
+        <th style="text-align: center">To location</th>
+        <th style="text-align: center">Distance (Km/hr)</th>
+     
+      </tr>
+    </thead>
+
+    <tbody>
+
+      <tr *ngFor="let device of summary">
+        <td style="cursor:pointer;text-align: center">{{device.device?device.device.Device_Name:""}}</td>
+        <td style="cursor:pointer;text-align: center">{{device.start_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+      
+            <p *ngIf="device.startAddress != undefined">{{device.startAddress}}</p>
+            <a *ngIf="device.startAddress == undefined" href={{addressLink}} target="_blank" (click)= "getlink(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
+       
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.end_time | date:'short'}}</td>
+        <td style="cursor:pointer;text-align: center">
+          <p *ngIf="device.endAddress != undefined">{{device.endAddress}}</p>
+          <a *ngIf="device.endAddress == undefined" href={{addressLink1}} target="_blank" (click)= "getlink1(device)" md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink1(device)}} target="_blank">Click here to get address</a></a>
+        
+        </td>
+        <td style="cursor:pointer;text-align: center">{{device.distance/1000 ? (device.distance/1000 | number: '1.2-2' ): 0}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div> -->
diff --git a/src/app/report/report component/trip-report/trip-report.component.scss b/src/app/report/report component/trip-report/trip-report.component.scss
new file mode 100644
index 0000000..63b6859
--- /dev/null
+++ b/src/app/report/report component/trip-report/trip-report.component.scss	
@@ -0,0 +1,36 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
diff --git a/src/app/report/report component/trip-report/trip-report.component.spec.ts b/src/app/report/report component/trip-report/trip-report.component.spec.ts
new file mode 100644
index 0000000..8ba785b
--- /dev/null
+++ b/src/app/report/report component/trip-report/trip-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripReportComponent } from './trip-report.component';
+
+describe('TripReportComponent', () => {
+  let component: TripReportComponent;
+  let fixture: ComponentFixture<TripReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/trip-report/trip-report.component.ts b/src/app/report/report component/trip-report/trip-report.component.ts
new file mode 100644
index 0000000..53308ba
--- /dev/null
+++ b/src/app/report/report component/trip-report/trip-report.component.ts	
@@ -0,0 +1,603 @@
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+declare var google: any;
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+import { PlayTripComponent } from '../../../play-trip/play-trip.component';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-trip-report',
+  templateUrl: './trip-report.component.html',
+  styleUrls: ['./trip-report.component.scss']
+})
+export class TripReportComponent implements OnInit {
+  dataSelect: any[];
+  addressLink1: string;
+  finalArr=[]
+  private finalise = new Subject<void>();
+  constructor(private _service:ReportService,private contactService: ContactService,private router: Router,public dialog: MdDialog) {
+    this._service.invokeEventFortripReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+   }
+    ngOnDestroy(){
+    
+    this.finalise.next(void 0);
+  }
+  date1:any;
+  neww:any;
+  fs : any;
+  ls : any;
+  emailid : any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  identifier : String = "trip_report";
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  
+  todate:any;
+  options=[];
+  logo:any;
+  before:any;
+  superAdmin:Boolean = false;
+  ngOnInit() {
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+ 
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     this.testTable();
+       
+  }
+
+  
+device_summary =[];
+summary:any;
+d_name:any;
+total_running_time:any;
+stop_time:any;
+overSpeed:any;
+route_violation:any;
+trips:any;
+total_km:any;
+address_show:any;
+end_add_show:any;
+start_add:any;
+end_add:any;
+start_add_lat:any;
+start_add_long:any;
+end_add_lat:any;
+end_add_long:any;
+uId:any;
+devId:any;
+
+Durations:any;
+deviceArr:any=[];
+
+getReport(event){
+  if(event == 'getExcel'){
+    this.exportExcel();
+  } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+ 
+  
+   
+    this.tabelObj.ajax.reload();      
+   
+
+  }
+    
+
+
+}
+
+
+tab:any;
+exportExcel()
+{
+ 
+ 
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        //tab_text=tab_text+"</tr>";
+    }
+
+    tab_text=tab_text+"</table>";
+    // tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+filterStates(val) {
+
+  // console.log(val)
+
+ 
+  if (val==""){
+
+    this.dataSelect = [];
+    // console.log("deviceValue",this.dataSelect);
+  } else{
+ 
+    const filterValue:any = val;
+    
+     this.dataSelect = this.options.filter(function(d){
+      var t = d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase());
+    //  this.option = this.options[i];
+  
+   
+      return t > -1;    
+    });
+    
+      return this.dataSelect;
+  }
+
+}
+
+addressLink = "";
+getlink(report : any){
+ 
+  // console.log("report=>",report);
+  var lat = report.start_lat?report.start_lat:0;
+  var lng = report.start_long?report.start_long:0;
+  this.addressLink =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+getlink1(report:any){
+ 
+  // console.log("report=>",report);
+  var lat = report.end_lat?report.end_lat:0;
+  var lng = report.end_long?report.end_long:0;
+  this.addressLink1 =  'https://maps.google.com/?q=' + lat + ',' + lng;
+  return this.addressLink ; 
+}
+
+tabelObj: any ;
+testTable() {
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+ 
+     that.tabelObj = $('#deviceTable').DataTable({
+        dom: 'lBftip',
+        buttons: [
+          'copy',
+          'print',
+          'excel'
+        ],       
+          "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+            console.log('temptemptemptemptemp',dataTablesParameters);
+              var deviceID;
+              that.Load = true
+              console.log('that.deviceArr',that.deviceArr);    
+            var from_date = that.Fromdate;
+            var to_date = that.todate;
+            var user = that.useridd;
+            var temp = {
+            from_date : from_date,
+            to_date : to_date,
+            user : user
+            }
+            that.finalArr=[]
+            var suburl = "";
+            if((temp.from_date != undefined)&&(temp.to_date != undefined)){        
+              suburl += "/user_trip/trip_detail?from_date=" + new Date(temp.from_date).toISOString() +'&to_date=' + new Date(temp.to_date).toISOString() + '&uId=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr;
+              }
+              that.contactService.get(suburl).subscribe((resp:any) => {   
+                that.finalArr=resp
+                 that.Load = false ;
+                 resp.sort((a, b) => new Date(b.start_time).getTime() - new Date(a.start_time).getTime());
+
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ;     
+              });
+
+            }else{
+              that.Load = false ;
+              callback({data : [] });
+
+            }
+
+       
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#playTrip', row).bind('click', () => {  
+            console.log(data);
+            var fd = new Date(data.start_time).toISOString();
+            var td = new Date(data.end_time).toISOString();
+              var replayObj= {
+                fromdate:fd,
+                todate : td,
+                user : that.useridd,
+                device:{imei: data.device.Device_ID,_id: data.device._id,iconType:data.device.iconType},
+                distance: (typeof data.distance === 'number')?(parseFloat(data.distance).toFixed(2)):0
+                
+              }
+
+              let dialogRef = that.dialog.open(PlayTripComponent, {    
+                data: replayObj
+              });
+            
+              dialogRef.afterClosed().subscribe(result => {
+                console.log(result);
+                if(result == 'cancelled'){
+                
+                }
+              })  
+             
+              
+            }); 
+             
+        }
+      ,
+
+      
+          "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {    
+                    // console.log(data);
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "start_time",
+                  render: function(data, type, row) {
+                    var st = new Date(data);
+                    return data ? (moment(st).format('llll')) : "";  
+                    
+                  }
+              },
+              {
+                  "data": "startAddress",
+                  "defaultContent": "_id",
+                  render: function(data, type, row) {
+                    var lat = row.start_lat?row.start_lat:0;
+                    var long = row.start_long?row.start_long:0;   
+                    var addressLink_start = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle start location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';       
+                    return data?data : addressLink_start;  
+                
+                  }
+              },        
+            {
+              "data": "end_time",
+              render: function(data, type, row) { 
+                var et = new Date(data);
+                return data ? (moment(et).format('llll')) : "";     
+              }
+          }  ,
+          {
+            "data": "endAddress",
+            "defaultContent": "_id",
+            render: function(data, type, row) { 
+              var lat = row.end_lat?row.end_lat:0;
+              var long = row.end_long?row.end_long:0;
+              var addressLink_end = '<a href="https://maps.google.com/?q='+ lat +','+long +' "  target="_blank" title="Click to get vehicle End location"> <img height="20px" width="20px" src="../../../assets/image/addressICON.png"> </a>';      
+              return data?data : addressLink_end;  
+           
+            }
+        },
+        {
+          "data": "distance",
+          render: function(data, type, row) {    
+          return data?(data/1000).toFixed(2):'';
+          }
+      }      ,
+      {
+        "data": "null",
+        "defaultContent": "",
+        render: function(data, type, row) {    
+        return '<i id="playTrip" class="fas fa-play" title="Trip replay" style="color:green;cursor :pointer"></i>';
+        }
+    }      
+          ],  
+          "columnDefs": [
+            { className: "dt-body-left", "targets": [ 0,1,2,3,4,5 ] },
+            {
+              "targets": '_all',
+              "createdCell": function (td, cellData, rowData, row, col) {
+                  $(td).css('padding', '18px')
+              }
+          }   ,
+            { targets: 1, type: 'date' },
+
+          { "width": "15%", "targets": 0 },
+             { "width": "20%", "targets": 1 },
+          { "width": "20%", "targets": 3 },
+         
+          ] 
+      });
+
+  });
+
+}
+
+expotToPdf(){
+    console.log(this.finalArr);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "Trip Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+  
+//   doc.setFontSize(15);
+//   doc.text('Trip Report ', 20, 30);
+//     doc.setFontStyle("arial");
+//     var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+   
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.finalArr.length, this.finalArr),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Trip Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+//  outerThis.startAddress= outerThis.finalArr[0].address;
+//  outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Trip Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        Device_Name:'Vehicle Name',
+        fromDate:'From Date',
+        fromLocation:'From Location',
+        toDate:'To Date',
+        toLocation:'To Location',
+        distance:'Distance(Km/hr)',
+      
+        
+        
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       Device_Name:pdfBody[j].device.Device_Name,
+       fromDate:moment(this.Fromdate).format('lll'),
+       fromLocation:pdfBody[j].startAddress?pdfBody[j].startAddress:'N/A', 
+       toDate: moment(this.todate).format('lll'),
+       toLocation:pdfBody[j].endAddress?pdfBody[j].endAddress:'N/A', 
+       distance:pdfBody[j].distance?(pdfBody[j].distance/1000).toFixed(2):0
+      });
+    }
+    return body;
+  }
+
+
+
+}
diff --git a/src/app/report/report component/working-hour-detail/working-hour-detail.component.html b/src/app/report/report component/working-hour-detail/working-hour-detail.component.html
new file mode 100644
index 0000000..312c81c
--- /dev/null
+++ b/src/app/report/report component/working-hour-detail/working-hour-detail.component.html	
@@ -0,0 +1,30 @@
+<div style="height: 535px;">
+  <div class="row" no-padding>
+    <div class="col-9" no-padding>
+        <h4 style="text-align: center; margin-left: 25%;">{{'Working Hour Details' | translate}}</h4>
+    </div>
+    <div class="col-3" style="text-align: right" no-padding>
+      <i class="far fa-times-circle" style="font-size: 25px;color: red;margin-top: 2px;" (click)="cancel()" title="Close"></i>
+    </div>  
+  </div>
+  <!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
+  <div>
+    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th>{{'Time' | translate}}</th>
+          <th>{{'Vehicle Name' | translate}}</th>
+          <th>{{'Ignition Status' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let flobj of ignitionObj">
+          <td >{{flobj.timestamp | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td >{{flobj.vehicleName}}</td>
+          <td >{{flobj.switch}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+</div>
\ No newline at end of file
diff --git a/src/app/report/report component/working-hour-detail/working-hour-detail.component.scss b/src/app/report/report component/working-hour-detail/working-hour-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/report/report component/working-hour-detail/working-hour-detail.component.spec.ts b/src/app/report/report component/working-hour-detail/working-hour-detail.component.spec.ts
new file mode 100644
index 0000000..3055046
--- /dev/null
+++ b/src/app/report/report component/working-hour-detail/working-hour-detail.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkingHourDetailComponent } from './working-hour-detail.component';
+
+describe('WorkingHourDetailComponent', () => {
+  let component: WorkingHourDetailComponent;
+  let fixture: ComponentFixture<WorkingHourDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkingHourDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkingHourDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/working-hour-detail/working-hour-detail.component.ts b/src/app/report/report component/working-hour-detail/working-hour-detail.component.ts
new file mode 100644
index 0000000..312378f
--- /dev/null
+++ b/src/app/report/report component/working-hour-detail/working-hour-detail.component.ts	
@@ -0,0 +1,90 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../../../contact.service';
+import { MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { ReportService } from '../../report.service';
+
+@Component({
+  selector: 'app-working-hour-detail',
+  templateUrl: './working-hour-detail.component.html',
+  styleUrls: ['./working-hour-detail.component.scss']
+})
+export class WorkingHourDetailComponent implements OnInit {
+  useridd: any;
+  organisationFlag: any;
+  superAdmin: any;
+  isDealer: any;
+  ignitionObj=[];
+  digitalInput
+
+  constructor(public dialogRef: MdDialogRef<WorkingHourDetailComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) {
+    console.log(data);
+
+    this.digitalInput=data.deviceInfo
+    console.log( this.digitalInput);
+    
+   }
+
+  ngOnInit() {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+    this.organisationFlag = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isOrganisation  ;     
+      this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      this.isDealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      // if(this.digitalInput==1)
+      // {
+      //   this.getIgnitionReport();
+      // }else{
+      //   this.AcReport()
+      // }
+      this.ignitionObj=this.digitalInput
+  }
+
+  cancel(){
+    this.dialogRef.close('close');
+
+  }
+
+  AcReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    var suburl = "";
+     suburl += "/notifs/acReport?from_date=" + payload.fromDate +'&to_date=' + payload.toDate + '&_u=' + payload.user +'&device='+payload.device;
+              if((payload.fromDate != undefined)&&(payload.toDate != undefined)){
+                this.contactService.get(suburl).subscribe((resp:any) => {  
+                  console.log(resp[0].s)
+                this.ignitionObj = resp[0].s;
+                })
+              }
+
+  }
+
+   getIgnitionReport(){
+    console.log(this.data);
+    var fdate = new Date(this.data.deviceInfo.fromDate);
+    var tdate = new Date(this.data.deviceInfo.toDate);
+
+    // var ptt = new Date(fdate).setHours(0, 0, 0);
+    // var ttt = new Date(tdate).setHours(23,59,59);
+    var payload = {
+      user : this.useridd,
+      device : this.data.deviceInfo.Device_ID,
+      fromDate : fdate,
+      toDate:tdate
+    }
+    console.log(payload);
+    this.contactService.getIgnition(payload).subscribe(res=>{
+      console.log(res);
+      this.ignitionObj = res;
+
+    })
+  }
+}
diff --git a/src/app/report/report component/working-hour-report/working-hour-report.component.html b/src/app/report/report component/working-hour-report/working-hour-report.component.html
new file mode 100644
index 0000000..e90948c
--- /dev/null
+++ b/src/app/report/report component/working-hour-report/working-hour-report.component.html	
@@ -0,0 +1,72 @@
+<!-- <app-all-menus></app-all-menus> -->
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Working Hours Report' | translate}}</h4>
+    </div>
+  </div>
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row rowStyle">
+
+    <!-- <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button>
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div> -->
+    <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row"
+        style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <!-- <th style="text-align:left;">DID</th> -->
+                  <th style="text-align:left;">{{'Vehicle'|translate}} </th>
+                  <th style="text-align:left;">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>
+                  <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>
+                  <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>
+                </tr>
+              </thead>
+            </table>
+            <!-- <table *ngIf="digital_input==2" id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                 
+                  <th style="text-align:left;">{{'Vehicle'|translate}} </th>
+                  <th style="text-align:left;">{{'IMEI' | translate}}</th>
+                  <th style="text-align:left;" title="Engine On Time">{{'Working Hours (HH:MM)'|translate}}</th>
+                  <th style="text-align:left;" title="Engine OFF Time">{{'Stopping Hours (HH:MM)' |translate}}</th>
+                  <th style="text-align:left;" title="Get Detail">{{'Detail'|translate}}</th>
+                </tr>
+              </thead>
+            </table> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+            border-collapse: collapse;position: absolute;top: -62px;">
+  <tr style="height:30px;border-top:1px solid black;">
+    <td>
+      <span style="font-weight: 700;">Report Interval from</span> {{f_date | date:"medium"}} to {{t_date |
+      date:"medium"}}
+    </td>
+    <!-- <td>
+            <span style="font-weight: 700;">To</span>: {{todate | date:"medium"}}
+          </td> -->
+  </tr>
+
+</table>
\ No newline at end of file
diff --git a/src/app/report/report component/working-hour-report/working-hour-report.component.scss b/src/app/report/report component/working-hour-report/working-hour-report.component.scss
new file mode 100644
index 0000000..30c8fc9
--- /dev/null
+++ b/src/app/report/report component/working-hour-report/working-hour-report.component.scss	
@@ -0,0 +1,86 @@
+.topDiv {
+  // padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle {
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+}
+
+#deviceTable input {
+  border-radius: 5px;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
diff --git a/src/app/report/report component/working-hour-report/working-hour-report.component.spec.ts b/src/app/report/report component/working-hour-report/working-hour-report.component.spec.ts
new file mode 100644
index 0000000..bb21da3
--- /dev/null
+++ b/src/app/report/report component/working-hour-report/working-hour-report.component.spec.ts	
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorkingHourReportComponent } from './working-hour-report.component';
+
+describe('WorkingHourReportComponent', () => {
+  let component: WorkingHourReportComponent;
+  let fixture: ComponentFixture<WorkingHourReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WorkingHourReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WorkingHourReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report component/working-hour-report/working-hour-report.component.ts b/src/app/report/report component/working-hour-report/working-hour-report.component.ts
new file mode 100644
index 0000000..939b6c4
--- /dev/null
+++ b/src/app/report/report component/working-hour-report/working-hour-report.component.ts	
@@ -0,0 +1,931 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ContactService } from '../../../contact.service';
+import { MyaccountComponent } from '../../../myaccount/myaccount.component';
+import { environment } from '../../../../environments/environment';
+import { SearchFilterPipe } from '../../../search-filter.pipe'
+
+declare var google: any;
+declare var html2canvas:any;
+declare var pdfMake :any ; 
+declare var jsPDF : any;
+declare var $: any;
+const PDF_EXTENSION = ".pdf"
+import * as moment from 'moment';
+import { WorkingHourDetailComponent } from '../working-hour-detail/working-hour-detail.component';
+import { DialogDemoComponent } from '../../../dialog-demo/dialog-demo.component';
+import { AcreportInfoComponent } from '../ac-report/acreport-info/acreport-info.component';
+import { ReportService } from '../../report.service';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-working-hour-report',
+  templateUrl: './working-hour-report.component.html',
+  styleUrls: ['./working-hour-report.component.scss']
+})
+export class WorkingHourReportComponent implements OnInit {
+  ignition_data: any =[];
+
+  fs : any;
+  ls : any;
+  emailid : any;
+  date1 = new Date();
+totalWorkingHours=[]
+  before:any;
+  or : any;
+  useridd :any;
+  time :any;
+  device_data:any;
+  devicess:any;
+  final:any;
+  custtype:any;
+  cust:boolean=false;
+  Load : Boolean = false;
+  date : any;
+  devicesss:any;
+  mb:any;
+  logoutbut:boolean;
+  dealer:boolean;
+  text:any;
+  option:any; 
+  finall:any;
+  Fromdate:any;
+  todate:any;
+  options=[];
+  logo:any;
+  dataForDigital1
+  dataForDigital2
+  superAdmin:Boolean = false;
+  dev_url = environment.hostUrl;
+  t:any;
+  dataSelect:any;
+  errorMsg: any;
+  errorDialog: boolean=false;
+  searchText:any;
+  tabelObj:any; 
+  tabelObj1:any; 
+  tableFlag: boolean=true;
+  identifier : String = "working_report";
+  stoppage_data:any;
+  arrival_time:any;
+  departure_time:any;
+  report_to_show =[];
+  Durations:any;
+  address_show:any;
+  start_add_lat:any;
+  start_add_long:any;
+  uId:any;
+  vName:any;
+  deviceArr = [];
+  data_descip: string;
+  digital_input: any;
+  private finalise = new Subject<void>();
+  constructor(private contactService: ContactService,private router: Router,public dialog: MdDialog,private _service:ReportService) { 
+    this._service.invokeEventForworkingHoursReport.pipe(
+      takeUntil(this.finalise)
+    ).subscribe(value => {
+        if(value){
+         this.getReport(value); 
+       }
+      });
+  
+  }
+  ngOnDestroy(){
+    this.finalise.next(void 0);
+  }
+  ngOnInit() {
+ 
+    this.t = document.getElementById("download");
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     }
+          
+     this.logo=window.localStorage['logo'];
+     this.text=window.localStorage['text'];
+     
+     this.getUserDeatils()
+     
+  }
+
+  getUserDeatils(){
+    this.contactService.getUserObj(this.useridd).subscribe(res=>{
+      this.digital_input=res.digital_input?res.digital_input:1;
+      if(this.digital_input==1){
+          this.testTable();
+      }else{
+          this.testTable2();
+      }
+  })
+  }
+// this.contactService.acReportMain(this.Fromdate,this.todate,this.useridd,this.vname).subscribe(res=>{1stAction: "OFF"
+// 1stTime: 5002.068983333334
+// 2stAction: "ON"
+// 2stTime: 6529.886616666667
+// VehicleName: "JCB"
+// imei: "862007228064955"
+  testTable2(){
+   
+  const that = this;
+  console.log("inside digital 2");
+  $(document).ready(function() {
+     that.tabelObj1 = $('#deviceTable').DataTable({
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers', 
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+              var deviceID;
+              that.Load = true;
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              // https://socket.oneqlik.in/notifs/ACSwitchReport
+              var suburl = "";
+              
+              suburl += "/notifs/acReportForMobile?from_date=" + temp.from_date +'&to_date=' + temp.to_date + '&_u=' + temp.user;
+              if(that.deviceArr.length != 0){  
+                suburl +='&device='+that.deviceArr[0];
+              }
+              
+              if((temp.from_date != undefined)&&(temp.to_date != undefined) && that.deviceArr.length!=0){
+                that.contactService.get(suburl).subscribe((resp:any) => {   
+                  var rowData=resp[0]?resp[0]:[]
+                  console.log(rowData);  
+                that.dataForDigital2=rowData[0]?rowData[0].ign:[]
+                  // that.calculateACHours(resp[0]?resp[0].s:[])
+                  // var wrReport = [];
+                  // for(var r in resp){
+                  //       // console.log('foreach',resp[r]);
+                  //       var tempObj = {
+                  //         'vehName' : r,
+                  //         'ON-OFF_time': resp[r]['ON-OFF_time'],
+                  //         'OFF-ON_time' :resp[r]['OFF-ON_time'],
+                  //         'Imei' :resp[r]['deviceId']
+                  //       }
+                  //       wrReport.push(tempObj);
+                  // }
+                  // console.log('result',wrReport);
+                  that.Load = false;
+                   callback({data : rowData });
+                  // callback({data : that.reportArray });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ; 
+                var tt = [];  
+                callback({data : tt });  
+              });
+  
+              }else{
+                 this.Load = false;
+               this.data_descip = "Select vehicle" ;  
+                 var x = document.getElementById("toast")
+                 x.className = "show";
+                 setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+                      
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#getDetail', row).bind('click', () => {         
+            console.log("Row Data",data);
+                data['fromDate'] = that.Fromdate;
+                data['toDate'] = that.todate
+
+
+            // let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+            //   width: '548px',
+            //   data: { device :data}
+            // });
+            let dialogRef = that.dialog.open(WorkingHourDetailComponent, {
+                width: '800px',  
+                data: {"deviceInfo":that.dataForDigital2,"digitalInput":that.digital_input}   
+
+               });
+          
+            dialogRef.afterClosed().subscribe(result => {
+              console.log(result);
+              if(result == 'close'){
+                    console.log(close);
+              }
+            })  
+               
+            });
+          }, 
+      
+          "columns": [
+              {
+                  "data": "deviceName",
+                  "visible": true,
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "Device_ID",
+                "visible": true,
+                "render": function(data, type, row) {
+                    
+                  return data?data : '';                  
+                }
+            },
+     
+              {
+                  "data": "workingHours",
+                  "visible": true,
+                  render: function(data, type, row) {
+                    // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+                    return data ?data: 0.0; 
+                  }
+              },
+              { 
+                "data": "stopHours",
+                "visible": true,
+                render: function(data, type, row) {
+                  return data ? data : 0.0; 
+                }
+            },
+            {
+              "data": "_id",
+              "visible": true,
+              render: function(data, type, row) {
+                return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+              }
+          }
+          ],  
+
+      });
+      
+
+  });
+}
+
+timeconversion(total_min){
+ 
+  var hours = parseInt(total_min) / 60
+  var rhours = Math.floor(hours);
+  var minutes = (hours - rhours) * 60;
+  var rminutes = Math.round(minutes);
+
+  var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+  return Durations ;
+}
+
+  
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#deviceTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+optionVal:any;
+
+getAdd(latitude,longitude){
+  var latti =0;
+  var longi = 0
+  if(latitude != undefined){
+    latti = latitude;
+
+  }
+  if(longitude != undefined){
+    longi = longitude
+
+  }
+    return 'https://maps.google.com/?q='+ latti + ',' + longi ; 
+}
+
+// callfunction(): void {
+//   // this.Load = true;
+//   this.tabelObj.draw();
+// }
+
+getReport(event){
+  console.log("inside function");
+  if(event == 'getExcel'){
+    this.exportExcel();
+   } else if(event=='getPdf')
+  {
+    this.expotToPdf();
+  }else{
+    this.totalWorkingHours=[]
+    this.workingHoursArray=[]
+     this.workingHoursArray1=[];
+     this.reportArray=[]
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = tpdata.fromDate;
+    var td  = tpdata.toDate;
+    if(event.deviceArr.length==0){
+      deviceId=[];
+    }else{
+      deviceId= event.deviceArr;
+    }
+    this.deviceArr = deviceId; 
+    this.Fromdate = fd;
+    this.todate = td;
+    console.log(this.digital_input);
+    
+    if(this.digital_input==1){
+      this.tabelObj.ajax.reload(); 
+    }else{
+    this.tabelObj1.ajax.reload(); 
+
+    }
+  }
+ 
+}
+
+// --------------------- New Method for working Hours---------------------------------
+
+testTable() {
+  this.reportArray=[]
+    this.workingHoursArray1=[]
+  this.workingHoursArray=[];
+  this.totalWorkingHours=[]
+  const that = this;
+  console.log("inside function");
+  $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+          "processing": true,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          "scrollY":'65vh',  
+          "scrollCollapse": true,     
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+          ajax: (dataTablesParameters,callback) => {
+              var deviceID;
+              that.Load = true;
+              var from_date = that.Fromdate;
+              var to_date = that.todate;
+              var user = that.useridd;
+              var temp = {
+              from_date : from_date,
+              to_date : to_date,
+              user : user
+              }
+              
+              if((temp.from_date != undefined)&&(temp.to_date != undefined)){
+                var suburl = "";
+                suburl += "/notifs/ignitionReportForMobile?from_date=" + (temp.from_date).toISOString() +'&to_date=' + (temp.to_date).toISOString() + '&_u=' + temp.user;
+                if(that.deviceArr.length != 0){  
+                  suburl +='&device='+that.deviceArr;
+                }
+                that.contactService.get(suburl).subscribe((resp:any) => {   
+                  // console.log("Before",resp);  
+                  resp.sort((a, b) => {
+                     return new Date(a.timestamp).getTime() - new Date( b.timestamp).getTime();
+
+                   });
+                    // console.log("After",resp);  
+                //  that.rowData=resp
+                  // that.calculateWorkingHours(resp)
+                  that.dataForDigital1=resp[0]?resp[0].ign:[]
+                  var wrReport = [];
+                  // for(var r in resp){
+                  //       // console.log('foreach',resp[r]);
+                  //       var tempObj = {
+                  //         'vehName' : r,
+                  //         'ON-OFF_time': resp[r]['ON-OFF_time'],
+                  //         'OFF-ON_time' :resp[r]['OFF-ON_time'],
+                  //         'Imei' :resp[r]['deviceId']
+                  //       }
+                  //       wrReport.push(tempObj);
+                  // }
+                  // // console.log('result',wrReport);
+                  that.Load = false;
+                  callback({data : resp });
+              }, err => {   
+                that.Load= false;    
+                console.log("error",err) ; 
+                var tt = [];  
+                callback({data : tt });  
+              });
+  
+              }else{
+                let ta = [];
+                that.Load = false;
+                callback({data : ta });
+              }
+                      
+        },  
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+          $('#getDetail', row).bind('click', () => {         
+            console.log("Row Data",data);
+                data['fromDate'] = that.Fromdate;
+                data['toDate'] = that.todate
+
+
+            let dialogRef = that.dialog.open(WorkingHourDetailComponent, {    
+              width: '548px',
+              data: {"deviceInfo":that.dataForDigital1,"digitalInput":that.digital_input}   
+            });
+          
+            dialogRef.afterClosed().subscribe(result => {
+              console.log(result);
+              if(result == 'close'){
+                    console.log(close);
+              }
+            })  
+               
+            });
+          }, 
+      
+          "columns": [
+          //   {
+          //     "data": "deviceId",
+          //     "visible": false,
+          //     render: function(data, type, row) {
+              
+          //       return data ? data : "";  
+            
+          //     }
+          // },
+              {
+                  "data": "deviceName",
+                  "visible": true,
+                  "render": function(data, type, row) {
+                      
+                    return data?data : '';                  
+                  }
+              },
+              {
+                "data": "Device_ID",
+                "visible": true,
+                "render": function(data, type, row) {
+                    
+                  return data?data : that.deviceArr[0];                  
+                }
+            },
+     
+              {
+                  "data": "workingHours",
+                  "visible": true,
+                  render: function(data, type, row) {
+                    // console.log(row);
+                    // var engine_on_time = parseFloat(data) + parseFloat(row['Idle Time']) ;          
+                    return data ? data : 0.0; 
+                  }
+              },
+              { 
+                "data": "stopHours",
+                "visible": true,
+                render: function(data, type, row) {
+                  return data ? data : 0.0; 
+                }
+            },
+            {
+              "data": "_id",
+              "visible": true,
+              render: function(data, type, row) {
+                return '<i id="getDetail" title="Get Detail" style="cursor:pointer;font-size:24px" class="fas fa-info-circle"></i>';        
+              }
+          }
+        
+          
+     
+          ],  
+
+      });
+      
+
+  });
+
+
+}
+workingHoursArray=[]
+async newMethod(data){
+  console.log("hhhh",data);
+  var tempArry=[]
+  var stopHr=0;
+  var workinHr=0
+  var result = await data.reduce(function (r, a) {
+        r[a.device.Device_ID] = r[a.device.Device_ID] || [];
+        r[a.device.Device_ID].push(a);
+        return r;
+    }, Object.create(null));
+  console.log(result);
+
+  for(var i=0;i<this.deviceArr.length;i++){
+    for(var j=0;j<result[this.deviceArr[i]].length;j++){
+      console.log("1");
+      
+      // if(j!==result[this.deviceArr[i]].length){
+         console.log("11",result[this.deviceArr[i]][j]);
+      if(result[this.deviceArr[i]][j].switch=="OFF"){
+         console.log("111",(result[this.deviceArr[i]][j].timestamp).replace('Z', '').replace('T', ''));
+         if(result[this.deviceArr[i]][j+1]){
+        if((new Date(result[this.deviceArr[i]][j].timestamp).getTime())>(new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())){
+          workinHr=(new Date(result[this.deviceArr[i]][j].timestamp).getTime()-new Date(result[this.deviceArr[i]][j+1].timestamp).getTime())/1000;
+          stopHr=(new Date(this.todate).getTime()-new Date(this.Fromdate).getTime())/1000;
+          
+        }
+      }
+      }
+    // }
+    }
+    tempArry.push({deviceName:result[this.deviceArr[i]][j-1].vehicleName,Device_ID:this.deviceArr[i],stopHours:this.secondsToHms(stopHr),workingHours:this.secondsToHms(workinHr)})
+    stopHr=0;
+    workinHr=0;
+  }
+  this.totalWorkingHours=tempArry
+  console.log("TEMP==>",tempArry);
+  
+
+}
+workingHoursArray1=[]
+reportArray=[]
+calculateACHours(data){
+  var total=0
+  console.log(data);
+  for(let i=0;i<data.length;i++){
+    if(i!==(data.length-1)){
+    if(data[0].switch=="OFF"){
+    if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+      // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+      var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+      // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:this.deviceArr[0]})
+    }
+  }
+  else{
+    if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+      // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+       var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray1.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:this.deviceArr[0]})
+    }
+  }
+}else{
+  for(var j=0;j<this.workingHoursArray1.length;j++){
+    total=total+this.workingHoursArray1[j].timestamp;
+  }
+ var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+        var stopHrs=this.secondsToHms((time-total))
+  this.reportArray.push({Device_ID:this.deviceArr[0],deviceName:data[0].vehicleName,workingHours:this.secondsToHms(total),stopHours:stopHrs});
+  }
+
+  }
+  console.log("JEDHJDH",this.workingHoursArray1,this.reportArray);
+  
+  
+
+}
+
+calculateWorkingHours(data){
+  // workingHoursArray
+  var totalTimestamp=0
+console.log(data);
+for(let i=0;i<data.length;i++){
+  if(i!==(data.length-1)){
+  if(data[i].vehicleName==data[i+1].vehicleName){
+    if(data[0].switch=="OFF"){
+    if(data[i].switch=="OFF" && data[i+1].switch=="ON"){
+      // console.log("DATE---------->",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+      var date=new Date((data[i].timestamp).replace('Z', '').replace('T', ':'));
+      var date1=new Date((data[i+1].timestamp).replace('Z', '').replace('T', ':'))
+      this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date1,date),Device_ID:data[i].device.Device_ID})
+      // this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(new Date(data[i].timestamp),new Date(data[i+1].timestamp)),Device_ID:data[i].device.Device_ID})
+    }
+  }
+  else{
+    if(data[i].switch=="ON" && data[i+1].switch=="OFF"){
+      // console.log("DATE----------1>",data[i].timestamp,"==",new Date((data[i].timestamp).replace('Z', '').replace('T', ':')));
+       var date=new Date((data[i].timestamp));
+      var date1=new Date((data[i+1].timestamp))
+      // console.log("Diffrence==>",this.timeDifference(date,date1));
+      
+      this.workingHoursArray.push({deviceName:data[i].vehicleName,timestamp:this.timeDifference(date,date1),Device_ID:data[i].device.Device_ID})
+    }
+  }
+  }
+}else{
+  this.finalArrayBuild()
+}
+}
+// console.log("TOTAL==",this.workingHoursArray);
+}
+
+timeDifference(date1,date2) {
+  
+  var a = moment(date1);
+var b = moment(date2);
+a.diff(b, 'seconds')
+// console.log(a.diff(b, 'seconds'));
+
+
+  var seconds = (date1.getTime() - date2.getTime()) / 1000;
+  console.log(date1,'-',date2,'=',seconds);
+  return seconds>0?seconds:(-seconds)
+}
+
+finalArrayBuild(){
+  // var totalWorkingHours=[]
+ var tempSec=0;
+ var tempDays
+ var temMin=0;
+ var tempHr=0
+ var temp
+  var result = this.workingHoursArray.reduce(function (r, a) {
+        r[a.Device_ID] = r[a.Device_ID] || [];
+        r[a.Device_ID].push(a);
+        return r;
+    }, Object.create(null));
+
+    // console.log("==",result);
+    for(var i=0;i<this.deviceArr.length;i++){
+      if(result[this.deviceArr[i]]){
+      for(var j=0;j<result[this.deviceArr[i]].length;j++){
+        tempSec=tempSec+result[this.deviceArr[i]][j].timestamp;
+      }
+    }
+     
+        var time= Math.abs(this.timeDifference(this.Fromdate,this.todate));
+       
+        
+        var stopHrs=this.secondsToHms((time-tempSec))
+        console.log("++++111111111111111",stopHrs,result[this.deviceArr[i]],this.deviceArr[i],result);
+        if(result[this.deviceArr[i]])
+        this.totalWorkingHours.push({Device_ID:result[this.deviceArr[i]][j-1].Device_ID,deviceName:result[this.deviceArr[i]][j-1].deviceName,workingHours:this.secondsToHms(tempSec),stopHours:stopHrs});
+      // }
+      
+      tempSec=0
+    }
+  console.log("sec==>",this.secondsToHms(tempSec),"TOTAL=-",this.totalWorkingHours);
+
+}
+
+secondsToHms(d) {
+    d = Number(d);
+    var h = Math.floor(d / 3600);
+    var m = Math.floor(d % 3600 / 60);
+    var s = Math.floor(d % 3600 % 60);
+
+    var hDisplay = h > 0 ? h + (h == 1 ? " hour, " : " hours, ") : "";
+    var mDisplay = m > 0 ? m + (m == 1 ? " minute, " : " minutes, ") : "";
+    var sDisplay = s > 0 ? s + (s == 1 ? " second" : " seconds") : "";
+    return hDisplay + mDisplay + sDisplay; 
+
+}
+
+
+
+millisecondConversion(duration){
+    var x = duration;
+var d = moment.duration(x, 'milliseconds');
+var hours = Math.floor(d.asHours());
+var mins = Math.floor(d.asMinutes()) - hours * 60;
+    var mainMIn = (hours>=24)?0:mins;
+return  hours + ":" + mainMIn 
+}
+
+
+
+expotToPdf(){
+    console.log(this.totalWorkingHours);
+
+    this.downloadPdf()
+    
+  }
+
+// downloadPdf() {
+//     let fileName =
+//       "Working Report" +
+//       new Date().getTime() +
+//       PDF_EXTENSION;
+//     var pdfsize = "a2";
+
+//     var doc = new jsPDF("p", "pt", pdfsize);
+  
+//   doc.setFontSize(15);
+//   doc.text('Working Report ', 20, 30);
+//     doc.setFontStyle("arial");
+//     var header = function(data) {
+//     doc.setFontSize(15);
+//     doc.setTextColor(40);
+//     doc.setFontStyle('normal');
+   
+//   };
+
+//   var options = {
+//     beforePageContent: header,
+//     margin: {
+//       top: 120
+//     },
+//     startY: doc.autoTableEndPosY() + 20
+//   };
+
+//     doc.autoTable({
+//       head: this.headRows(),
+//       // margin: { top: 80 },
+//       body: this.bodyRows(this.totalWorkingHours.length, this.totalWorkingHours),
+//       options
+      
+//     });
+//     doc.save(fileName);
+//   }
+
+startAddress;
+
+endAddress;
+f_date
+t_date
+downloadPdf() {
+  var outerThis=this
+    let fileName =
+      "Working Hours Report" +
+      new Date()+
+      PDF_EXTENSION;
+    var pdfsize = "a2";
+    var totalPagesExp = "{total_pages_count_string}";
+//  outerThis.startAddress= outerThis.finalArr[0].address;
+//  outerThis.endAddress= outerThis.finalArr[outerThis.finalArr.length-1].address
+    var doc = new jsPDF("p", "pt", pdfsize);
+    outerThis.f_date = moment(this.Fromdate).format('lll'); 
+  outerThis.t_date =moment(this.todate).format('lll');
+  // var date_combine = f_date + ' to ' + t_date;
+  // doc.setFontSize(30);
+   var pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight();
+var pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth();
+  doc.setFontSize(15);
+  // doc.text(60, 20, 'Travel Path Report (Date='+date_combine+') Device Name='+this.device_name,);
+  
+  doc.text("Working Hours Report", 500, 30);
+    doc.setFontStyle("arial");
+
+      var header = function(data) {
+    doc.setFontSize(30);
+    doc.setTextColor(40);
+    doc.setFontStyle('arial');
+  
+  };
+
+  var options = {
+    beforePageContent: header,
+    margin: {
+      top: 120
+    },
+    
+    startY: doc.autoTableEndPosY() + 20
+  };
+ var logo=localStorage.getItem('logo1');
+ outerThis.toDataURL(logo, function (dataUrl) {
+                
+    doc.autoTable({
+      head: outerThis.headRows(),
+      // margin: { top: 80 },
+      //  startY: doc.autoTable.previous.finalY + 200,
+      body: outerThis.bodyRows(outerThis.totalWorkingHours.length, outerThis.totalWorkingHours),
+      options,
+       styles: {overflow: 'linebreak'},
+      // tableLineColor: [0, 0, 0], //choose RGB
+        // tableLineWidth: 0.5, //table border width
+        // bodyStyles: {
+        //     margin: 40,
+        //     fontSize: 10,
+        //     lineWidth: 0.2,
+        //     lineColor: [0, 0, 0]
+        // },
+      theme:'grid',
+      didDrawPage: function (data) {
+        // Header
+        doc.setFontSize(20);
+        doc.setTextColor(40);
+        doc.setFontStyle('arial');
+        // logo=localStorage.getItem('logo1');
+          if(logo)
+              doc.addImage(dataUrl, 'JPEG', pageWidth-100, 6, 75, 75);
+              doc.autoTable({html:"#headerTable",margin:{bottom:140,left:20,right:8,top:40},theme:'plain'});
+
+        // Footer
+        var str = "Page " + doc.internal.getNumberOfPages()
+        // Total page number plugin only available in jspdf v1.0+
+        if (typeof doc.putTotalPages === 'function') {
+            str = str + " of " + totalPagesExp;
+        }
+        doc.setFontSize(10);
+
+        // jsPDF 1.4+ uses getWidth, <1.4 uses .width
+        var pageSize = doc.internal.pageSize;
+        var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
+        doc.text(str, data.settings.margin.left, pageHeight - 10);
+    },
+    
+      margin: {top: 85},
+     
+    });
+    if (typeof doc.putTotalPages === 'function') {
+      doc.putTotalPages(totalPagesExp);
+    }
+    doc.save(fileName);
+  })
+  }
+
+   toDataURL(url, callback) {
+   
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+  headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        deviceName:'Vehicle Name',
+        Device_ID:'IMEI',
+        workingHours:'Working Hours',
+        stopHours:'Stoping Hours',
+      
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    console.log(rowCount, pdfBody);
+
+    rowCount = rowCount || 10;
+    let body = [];
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+       deviceName:pdfBody[j].deviceName,
+       Device_ID:pdfBody[j].Device_ID,
+       workingHours:pdfBody[j].workingHours,
+       stopHours:pdfBody[j].stopHours,
+      });
+    }
+    return body;
+  }
+
+
+}
+
+
diff --git a/src/app/report/report-filter/report-filter.component.html b/src/app/report/report-filter/report-filter.component.html
new file mode 100644
index 0000000..b67d1ee
--- /dev/null
+++ b/src/app/report/report-filter/report-filter.component.html
@@ -0,0 +1,1234 @@
+<div class="row" style="margin: 0; padding-top: 10px; background: #f9f6f6">
+  <div
+    class="col-sm-12 col-md-12 col-lg-12"
+    style="padding-left: 10px; padding-right: 10px"
+  >
+    <div *ngIf="isCC" class="row" style="margin: 0; margin-top: 55px">
+      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+        <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+          {{ "Report" | translate }} :
+        </p>
+      </div>
+      <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+        <div>
+          <select
+            (ngModelChange)="changeComponent($event)"
+            [(ngModel)]="componentIdentifier"
+          >
+            <option value="" disabled selected>
+              Please Select Report Type
+            </option>
+            <option
+              *ngFor="let component of reportArray"
+              [disabled]="component.Rstatus == false"
+              [value]="component.value"
+            >
+              <span>{{ component.name }}</span>
+            </option>
+            <option selected *ngIf="reportArray.length == 0">
+              <span>No Reports Found</span>
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div *ngIf="sidenavbarcontent" class="mainClass">
+  <div
+    class="row"
+    *ngIf="
+      componentIdentifier != 'billing_detail' &&
+      componentIdentifier != 'censor_detail' &&
+      componentIdentifier != 'usersMaster' &&
+      componentIdentifier != 'deviceMaster' &&
+      componentIdentifier != 'gps_master'
+    "
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div
+      class="col-sm-12 col-md-12 col-lg-12"
+      style="padding-left: 10px; padding-right: 10px"
+    >
+      <!-- *ngIf="(componentIdentifier != 'route_violation_report')&&(componentIdentifier != 'notification_master')" -->
+      <div *ngIf="isCC" class="row" style="margin: 0; padding-bottom: 10px">
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ "Group" | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select
+              style="width: -webkit-fill-available"
+              [ngModel]="selectGroup"
+              (ngModelChange)="onChangeGroup($event)"
+            >
+              <option value="" disabled selected>Please Select Group</option>
+              <!-- <option value="" disabled selected>Select your option</option> -->
+              <option [value]="'all'">All</option>
+              <option *ngFor="let group of groups" [value]="group.name">
+                {{ group.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div
+        *ngIf="
+          componentIdentifier != 'route_violation_report' &&
+          componentIdentifier != 'notification_master' &&
+          isCC
+        "
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ optionLabel | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select id="dbselect" multiple="multiple">
+              <option
+                *ngFor="let option_1 of options"
+                [value]="option_1.selectedValue"
+              >
+                {{ option_1.value }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="componentIdentifier === 'notification_master' || !isCC"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            VEHICLE :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select id="dbselectNotif" multiple="multiple">
+              <option
+                *ngFor="let option_1 of notifDevArr"
+                [value]="option_1.Device_ID"
+              >
+                {{ option_1.Device_Name }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="componentIdentifier === 'notification_master' || !isCC"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ "Notification type" | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select id="dbselect_notif" multiple="multiple">
+              <option *ngFor="let noti of notificationArr" [value]="noti.value">
+                {{ noti.view }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="this.componentIdentifier === 'route_violation_report'"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ "Route" | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select
+              id="dbselect_3"
+              multiple="multiple"
+              (ngModelChange)="clicked = false"
+            >
+              <option *ngFor="let route of routeArr" [value]="route._id">
+                {{ route.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="componentIdentifier === 'poi_report'"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ "Select POI" | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select id="dbselect_1" multiple="multiple">
+              <option *ngFor="let poiname of poiArr" [value]="poiname.id">
+                {{ poiname.poiname }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        *ngIf="componentIdentifier === 'stoppage_report'"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <p style="margin-bottom: 0; padding-top: 2px; font-size: 12px">
+            {{ "Duration" | translate }} :
+          </p>
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0">
+          <div>
+            <select id="dbselect_2" multiple="multiple">
+              <option *ngFor="let ds of stoppage_duration" [value]="ds.value">
+                {{ ds.view_value }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div
+        *ngIf="showFromDate === true"
+        class="row"
+        style="margin: 0; padding-bottom: 10px"
+      >
+        <div
+          class="col-sm-12 col-md-12 col-lg-12"
+          style="padding-right: 0%; padding-left: 0"
+        >
+          <!-- timefilter icons -->
+          <div
+            class="btn-group btn-group-sm"
+            role="group"
+            aria-label="Basic example"
+            style="width: 100%"
+          >
+            <button
+              [disabled]="componentIdentifier === 'dayWiseReport'"
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_4"
+              (click)="changeDate('today')"
+            >
+              {{ "Today" | translate }}
+            </button>
+            <button
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_5"
+              (click)="changeDate('yesterday')"
+            >
+              {{ "Yesterday" | translate }}
+            </button>
+            <button
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_6"
+              (click)="changeDate('week')"
+            >
+              {{ "Week" | translate }}
+            </button>
+            <button
+              [disabled]="componentIdentifier === 'distance_report'"
+              type="button"
+              style="width: 25%"
+              class="btn btn-secondary animateClass_7"
+              (click)="changeDate('month')"
+            >
+              {{ "Month" | translate }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="row" style="margin: 0;padding-top: 5px; ">
+            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0;">
+           
+              <p style="margin-bottom: 0%;font-size: 12px;">{{'Idle Time' | translate}}</p>
+            </div>
+            <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left:25px">
+           
+              <input id="minIdleTime" class="form-control form-control-sm" style="width: 81px;height: 25px; font-size: 12px; padding: 0; padding-left: 5px;" name="minIdleTime" min="1" placeholder="0000" [(ngModel)]="minIdleTime" type="number">
+            </div>
+          </div> -->
+      <div
+        *ngIf="showFromDate === true"
+        class="row"
+        style="margin: 0; padding-bottom: 10px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- from time label-->
+          <span style="margin-bottom: 0%; font-size: 12px">
+            {{ "From" | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <!-- from datetime picker -->
+          <input
+            id="from_date"
+            bsDatepicker
+            class="form-control form-control-sm"
+            style="height: 25px"
+            [bsConfig]="bsConfig"
+            [(ngModel)]="from_date"
+            type="text"
+            (ngModelChange)="clicked = false"
+          />
+        </div>
+      </div>
+      <div
+        class="row"
+        style="margin: 0; padding-bottom: 10px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%; font-size: 12px"
+            >{{ lableVariable | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <!-- tolabel picker -->
+          <input
+            id="to_date"
+            bsDatepicker
+            class="form-control form-control-sm"
+            style="height: 25px"
+            [bsConfig]="bsConfig"
+            name="todate"
+            [(ngModel)]="to_date"
+            type="text"
+            (ngModelChange)="clicked = false"
+          />
+        </div>
+      </div>
+      <div
+        class="row"
+        *ngIf="componentIdentifier === 'idle_report'"
+        style="margin: 0; padding-bottom: 10px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%; font-size: 12px"
+            >{{ "Min Idle Time (Min)" | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <!-- tolabel picker -->
+          <input
+            id="minIdleTime"
+            class="form-control form-control-sm"
+            style="margin-top: 4px; width: 80px"
+            name="minIdleTime"
+            min="1"
+            placeholder="0000"
+            [(ngModel)]="minIdleTime"
+            type="number"
+            (ngModelChange)="clicked = false"
+          />
+        </div>
+      </div>
+
+      <div
+        class="row"
+        *ngIf="componentIdentifier === 'fuel_consumption_report'"
+        style="margin: 0; padding-bottom: 10px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%; font-size: 12px"
+            >{{ "Report Type" | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <md-radio-group
+            aria-labelledby="example-radio-group-label"
+            class="example-radio-group"
+            [(ngModel)]="filterRtype"
+          >
+            <md-radio-button
+              class="example-radio-button"
+              *ngFor="let rtype of reportType"
+              [value]="rtype"
+              style="margin-left: 5px"
+            >
+              {{ rtype }}
+            </md-radio-button>
+          </md-radio-group>
+        </div>
+      </div>
+
+      <div class="row" style="margin: 0; padding-bottom: 10px">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0">
+          <!-- button -->
+          <!-- <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="reportFilter('data')">{{'Search' |
+                translate}}</button>
+              <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button  (click)="exportExel()">{{'Export To Excel' | translate}}</button> -->
+          <div class="dropdown">
+            <button
+              [ngStyle]="{
+                'background-color': clicked == false ? '#1556b9' : '#cccccc'
+              }"
+              style="background-color: #1556b9; color: #fdfdfd"
+              [disabled]="clicked"
+              (click)="actionMethod('1'); clicked = true"
+              md-raised-button
+              (click)="reportFilter('data')"
+            >
+              {{ "Search" | translate }}
+            </button>
+            <button
+              style="background-color: #cc0000; color: #fdfdfd"
+              md-raised-button
+              class="dropdown-toggle"
+              type="button"
+              id="dropdownMenuButton"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              {{ "Export To" | translate }}
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              <a
+                style="cursor: pointer"
+                class="dropdown-item"
+                (click)="exportExel()"
+                ><i class="far fa-file-excel"></i> Excel</a
+              >
+              <a
+                style="cursor: pointer"
+                class="dropdown-item"
+                (click)="exportPDF()"
+                ><i class="far fa-file-pdf"></i> PDF</a
+              >
+            </div>
+          </div>
+
+          <!-- <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button 
+                (click)="exportPdf()">{{'Export To Pdf' | translate}}</button> -->
+        </div>
+      </div>
+      <!-- <div  *ngIf = "showTable" class="row" style="padding: 0%;padding-top: 10px;">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%">
+              <div class="row" style="margin: 0; padding-top: 5px;padding-left: 15px; padding-bottom: 5px; padding-top: 1px solid red; border-top: 1px solid #c5c5c5; border-bottom: 1px solid #c5c5c5;">
+                <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" >
+              
+                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Vehicle' | translate}}</p>
+                  
+                </div>
+                <div class="col-sm-2 col-md-2 col-lg-2" >
+               
+                  <p style="font-size:112x;font-weight: 500;margin-bottom: 0%;">{{'Mileage' | translate}}</p>
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-right: 0%;">
+             
+                  <p></p>
+                </div>
+                <div class="col-sm-1 col-md-1 col-lg-1" style="padding-right: 0%;padding-left: 0%;">
+             
+                  <i class="fas fa-times" style="color: red; cursor: pointer;" title="{{'Remove all track' | translate}}" (click)="removetracks('all',null)"></i>
+                
+                </div>
+              </div>
+              <div class="row" style="margin: 0; padding-left: 15px ;overflow: auto;">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0%;">
+                  <div style="max-height: 260px;">
+                    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index" style="cursor:pointer;padding-left: 15px;padding-top: 5px;padding-bottom: 5px;border-bottom: 1px solid #c5c5c5;background-color: white;">
+                      <div class="col-sm-6 col-md-6 col-lg-6" style="padding-left: 0%;" (click)="plotHistory(i)">
+                   
+                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.device_name}}</p>
+                        <p style="margin-bottom: 0%;font-size: 12px;color:#424242;line-height: 15px;">
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.fromTime}}</span>
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;"> - </span>
+                          <span style="margin-bottom: 0%;font-size: 12px;color:#424242;">{{historyArr.toTime}}</span>
+                        </p>              
+                      </div>
+                      <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 0%;padding-right: 0%;" (click)="plotHistory(i)">
+                 
+                        <p style="text-align: center;font-size: 12px;color:#424242;">{{historyArr.mileage}}</p>
+                      </div>
+                      <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0%;text-align: center;padding-right: 0;" >
+                       
+                        <div>
+                            <md-icon *ngIf="SpeedMeter2"   class="play animateClass_8" (click)="inter('slow')"  mdTooltip="Rewind">fast_rewind</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='init'"   class="play animateClass_9" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='start'"  class="play animateClass_10" (click)="play(i)"  mdTooltip="{{'Play History' | translate}}">play_arrow</md-icon>
+                            <md-icon *ngIf="tempMapHistory[i].flag=='stop'"  class="play animateClass_11" (click)="play(i)"  mdTooltip="{{'Pause' | translate}}">pause_circle_outline</md-icon>
+                            <md-icon *ngIf="SpeedMeter2"  class="play animateClass_12" (click)="inter('fast')"  mdTooltip="{{'Fast Forward' | translate}}">fast_forward</md-icon>
+                       
+                        </div>
+                      </div>
+                      <div class="col-sm-1 col-md-1 col-lg-1" (click)="removetracks('single',i)">
+                        <i class="fas fa-times animateClass_13"  title="{{'Remove track' | translate}}"></i>
+                      </div>
+                    </div>                             
+                  </div>  
+                </div>
+              </div>       
+            </div>
+          </div>            -->
+    </div>
+  </div>
+  <div
+    class="row"
+    *ngIf="componentIdentifier === 'billing_detail'"
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row" style="margin-bottom: 10px">
+        <div class="col-4">
+          <label style="font-weight: 600; color: #948f8f">{{
+            "USER" | translate
+          }}</label>
+        </div>
+        <div class="col-8">
+          <div>
+            <select id="dbselect" style="width: 200px" multiple="multiple">
+              <option
+                *ngFor="let option_1 of options"
+                [value]="option_1.selectedValue"
+              >
+                {{ option_1.value }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-bottom: 10px">
+        <div class="col-4">
+          <label style="font-weight: 600; color: #948f8f">{{
+            "TYPE" | translate
+          }}</label>
+        </div>
+        <div class="col-8">
+          <div>
+            <select
+              id="dbselect_billtype"
+              style="width: 200px"
+              multiple="multiple"
+            >
+              <option *ngFor="let op of billingType" [value]="op.selectedValue">
+                {{ op.value }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-bottom: 10px">
+        <div class="col-4">
+          <label style="font-weight: 600; color: #948f8f">{{
+            "STATUS" | translate
+          }}</label>
+        </div>
+        <div class="col-8">
+          <div>
+            <select
+              id="dbselect_billStatus"
+              style="width: 200px"
+              multiple="multiple"
+            >
+              <option
+                *ngFor="let opp of billing_status"
+                [value]="opp.selectedValue"
+              >
+                {{ opp.value }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-bottom: 10px">
+        <div class="col-4">
+          <label style="font-weight: 600; color: #948f8f">{{
+            "Select Month" | translate
+          }}</label>
+        </div>
+        <div class="col-8">
+          <form class="container" style="padding: 0px">
+            <input
+              [(ngModel)]="modelDate"
+              autocomplete="off"
+              class="form-control"
+              name="date"
+              bsDatepicker
+              [bsConfig]="{ dateInputFormat: 'MM/YYYY' }"
+              style="width: 200px"
+              (onShown)="onOpenCalendar($event)"
+              (ngModelChange)="clicked = false"
+            />
+          </form>
+        </div>
+      </div>
+      <div class="row" style="margin-bottom: 10px">
+        <div class="col-12">
+          <button
+            [ngStyle]="{
+              'background-color': clicked == false ? '#1556b9' : '#cccccc'
+            }"
+            style="background-color: #1556b9; color: #fdfdfd"
+            [disabled]="clicked"
+            (click)="actionMethod('2'); clicked = true"
+            md-raised-button
+            (click)="reportFilter_billing('data')"
+          >
+            {{ "Search" | translate }}
+          </button>
+          <button
+            *ngIf="showXL == true"
+            style="background-color: #cc0000; color: #fdfdfd"
+            md-raised-button
+            (click)="exportExel()"
+          >
+            {{ "Export To Excel" | translate }}
+          </button>
+          <!-- <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="row"
+    *ngIf="componentIdentifier === 'censor_detail'"
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <div class="col-3">{{ "Device" | translate }}</div>
+        <div class="col-9">
+          <div>
+            <select id="dbselect" multiple="multiple">
+              <option
+                *ngFor="let option_1 of options"
+                [value]="option_1.selectedValue"
+              >
+                {{ option_1.value }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <div class="row" style="margin-bottom: 10px; float: right"></div>
+        <div class="col-12">
+          <button
+            style="
+              background-color: #1556b9;
+              color: #fdfdfd;
+              font-size: 12px;
+              margin-top: 20px;
+              float: right;
+            "
+            md-raised-button
+            (click)="censor_detail()"
+          >
+            {{ "Search" | translate }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="row"
+    *ngIf="componentIdentifier === 'usersMaster'"
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div class="row">
+        <div class="col-4">
+          <p>{{ "Search By" | translate }} :</p>
+        </div>
+        <div class="col-8">
+          <div style="display: flex">
+            <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="userFilterType"
+            >
+              <md-radio-button
+                class="example-radio-button"
+                *ngFor="let utype of userRadio"
+                [value]="utype"
+                (change)="userRadioButton()"
+                style="margin-left: 5px"
+              >
+                {{ utype }}
+              </md-radio-button>
+            </md-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-top: 10px">
+        <div class="col-3">{{ "Phone" | translate }}</div>
+        <div class="col-9">
+          <div style="display: flex">
+            <select id="dbselectPhone" multiple="multiple">
+              <option *ngFor="let uPhone of userArr" [value]="uPhone._id">
+                {{ uPhone.phone }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-top: 20px">
+        <div class="col-3">{{ "Name" | translate }}</div>
+        <div class="col-9">
+          <div style="display: flex">
+            <select id="dbselectName" multiple="multiple">
+              <option *ngFor="let uName of userArr" [value]="uName._id">
+                {{ uName.first_name ? uName.first_name : "--" }}
+                {{ uName.last_name ? uName.last_name : "--" }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin-top: 20px; margin-bottom: 20px">
+        <div class="col-5">{{ "Deleted users" | translate }}</div>
+        <div class="col-7">
+          <div style="display: flex; float: right">
+            <md-slide-toggle
+              md-tooltip="Deleted Users"
+              [(ngModel)]="deleteduser"
+              (change)="userDeleted($event)"
+            ></md-slide-toggle>
+          </div>
+        </div>
+      </div>
+      <div class="row" style="margin: 0; padding-bottom: 20px">
+        <div
+          class="col-sm-12 col-md-12 col-lg-12"
+          style="padding-right: 0%; padding-left: 0"
+        >
+          <!-- timefilter icons -->
+          <div
+            class="btn-group btn-group-sm"
+            role="group"
+            aria-label="Basic example"
+            style="width: 100%"
+          >
+            <button
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_4"
+              (click)="changeDate('today')"
+            >
+              {{ "Today" | translate }}
+            </button>
+            <button
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_5"
+              (click)="changeDate('yesterday')"
+            >
+              {{ "Yesterday" | translate }}
+            </button>
+            <button
+              type="button"
+              style="width: 25%; border-right: 2px solid white"
+              class="btn btn-secondary animateClass_6"
+              (click)="changeDate('week')"
+            >
+              {{ "Week" | translate }}
+            </button>
+            <button
+              type="button"
+              style="width: 25%"
+              class="btn btn-secondary animateClass_7"
+              (click)="changeDate('month')"
+            >
+              {{ "Month" | translate }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="row"
+        style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- from time label-->
+          <span style="margin-bottom: 0%; font-size: 12px">
+            {{ "From" | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <!-- from datetime picker -->
+          <input
+            id="from_date"
+            bsDatepicker
+            class="form-control form-control-sm"
+            style="height: 25px"
+            [bsConfig]="bsConfig"
+            [(ngModel)]="from_date"
+            type="text"
+            (ngModelChange)="clicked = false"
+          />
+        </div>
+      </div>
+      <div
+        class="row"
+        style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+      >
+        <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+          <!-- tolabel -->
+          <span style="margin-bottom: 0%; font-size: 12px"
+            >{{ "To" | translate }} :</span
+          >
+        </div>
+        <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+          <!-- tolabel picker -->
+          <input
+            id="to_date"
+            bsDatepicker
+            class="form-control form-control-sm"
+            style="height: 25px"
+            [bsConfig]="bsConfig"
+            name="todate"
+            [(ngModel)]="to_date"
+            type="text"
+            (ngModelChange)="clicked = false"
+          />
+        </div>
+      </div>
+      <div class="row" style="margin-bottom: 20px">
+        <div class="col-12">
+          <button
+            [ngStyle]="{
+              'background-color': clicked == false ? '#1556b9' : '#cccccc'
+            }"
+            style="background-color: #1556b9; color: #fdfdfd"
+            [disabled]="clicked"
+            (click)="actionMethod('2'); clicked = true"
+            md-raised-button
+            (click)="reportFilter('data')"
+          >
+            {{ "Search" | translate }}
+          </button>
+          <button
+            *ngIf="showXL == true"
+            style="background-color: #cc0000; color: #fdfdfd"
+            md-raised-button
+            (click)="exportExel()"
+          >
+            {{ "Export To Excel" | translate }}
+          </button>
+          <!-- <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="row"
+    *ngIf="componentIdentifier === 'deviceMaster'"
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div class="col-12">
+      <div class="row">
+        <div class="col-5">
+          <p>{{ "Search By" | translate }} :</p>
+        </div>
+        <div class="col-7">
+          <div style="display: flex">
+            <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="deviceFilterType"
+            >
+              <md-radio-button
+                class="example-radio-button"
+                *ngFor="let dtype of deviceRadio"
+                [value]="dtype"
+                (change)="deviceRadioButton()"
+                style="margin-left: 5px"
+              >
+                {{ dtype }}
+              </md-radio-button>
+            </md-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="row" style="margin-top: 10px">
+            <div class="col-3">{{ "IMEI" | translate }}</div>
+            <div class="col-9">
+              <div style="display: flex">
+                <select id="dbselectIMEI" multiple="multiple">
+                  <option *ngFor="let udid of deviceArr_1" [value]="udid._id">
+                    {{ udid.Device_ID }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="margin-top: 20px">
+            <div class="col-3">{{ "SIM" | translate }}</div>
+            <div class="col-9">
+              <div style="display: flex">
+                <select id="dbselectSIM" multiple="multiple">
+                  <option
+                    *ngFor="let uname of deviceArr_1"
+                    [value]="uname.sim_number"
+                  >
+                    {{ uname.sim_number ? uname.sim_number : "--" }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="margin-top: 20px; margin-bottom: 20px">
+            <div class="col-5">{{ "Deleted Device" | translate }}</div>
+            <div class="col-7">
+              <div style="display: flex; float: right">
+                <md-slide-toggle
+                  md-tooltip="Deleted Device"
+                  [(ngModel)]="deleteddevice"
+                  (change)="deletedDevices($event)"
+                ></md-slide-toggle>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="margin: 0; padding-bottom: 20px">
+            <div
+              class="col-sm-12 col-md-12 col-lg-12"
+              style="padding-right: 0%; padding-left: 0"
+            >
+              <!-- timefilter icons -->
+              <div
+                class="btn-group btn-group-sm"
+                role="group"
+                aria-label="Basic example"
+                style="width: 100%"
+              >
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_4"
+                  (click)="changeDate('today')"
+                >
+                  {{ "Today" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_5"
+                  (click)="changeDate('yesterday')"
+                >
+                  {{ "Yesterday" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_6"
+                  (click)="changeDate('week')"
+                >
+                  {{ "Week" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%"
+                  class="btn btn-secondary animateClass_7"
+                  (click)="changeDate('month')"
+                >
+                  {{ "Month" | translate }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="row"
+            style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+          >
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+              <!-- from time label-->
+              <span style="margin-bottom: 0%; font-size: 12px">
+                {{ "From" | translate }} :</span
+              >
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+              <!-- from datetime picker -->
+              <input
+                id="from_date"
+                bsDatepicker
+                class="form-control form-control-sm"
+                style="height: 25px"
+                [bsConfig]="bsConfig"
+                [(ngModel)]="from_date"
+                type="text"
+                (ngModelChange)="clicked = false"
+              />
+            </div>
+          </div>
+          <div
+            class="row"
+            style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+          >
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+              <!-- tolabel -->
+              <span style="margin-bottom: 0%; font-size: 12px"
+                >{{ "To" | translate }} :</span
+              >
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+              <!-- tolabel picker -->
+              <input
+                id="to_date"
+                bsDatepicker
+                class="form-control form-control-sm"
+                style="height: 25px"
+                [bsConfig]="bsConfig"
+                name="todate"
+                [(ngModel)]="to_date"
+                type="text"
+                (ngModelChange)="clicked = false"
+              />
+            </div>
+          </div>
+          <div class="row" style="margin-bottom: 20px">
+            <div class="col-12">
+              <button
+                [ngStyle]="{
+                  'background-color': clicked == false ? '#1556b9' : '#cccccc'
+                }"
+                style="background-color: #1556b9; color: #fdfdfd"
+                [disabled]="clicked"
+                (click)="actionMethod('3'); clicked = true"
+                md-raised-button
+                (click)="reportFilter('data')"
+              >
+                {{ "Search" | translate }}
+              </button>
+              <button
+                *ngIf="showXL == true"
+                style="
+                  background-color: #cc0000;
+                  color: #fdfdfd;
+                  font-size: 11px;
+                "
+                md-raised-button
+                (click)="exportExel()"
+              >
+                {{ "Export To Excel" | translate }}
+              </button>
+              <!-- <button style="background-color: #cc0000;color: #fdfdfd;  font-size: 11px;   font-weight: 700;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="row"
+    *ngIf="componentIdentifier === 'gps_master'"
+    style="margin: 0; padding-top: 10px; background: #f9f6f6"
+  >
+    <div class="col-12">
+      <div class="row">
+        <div class="col-5">
+          <p>{{ "Search By" | translate }} :</p>
+        </div>
+        <div class="col-7">
+          <div style="display: flex">
+            <md-radio-group
+              aria-labelledby="example-radio-group-label"
+              class="example-radio-group"
+              [(ngModel)]="deviceFilterType"
+            >
+              <md-radio-button
+                class="example-radio-button"
+                *ngFor="let dtype of deviceRadio1"
+                [value]="dtype"
+                (change)="deviceRadioButton()"
+                style="margin-left: 5px"
+              >
+                {{ dtype }}
+              </md-radio-button>
+            </md-radio-group>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="row" style="margin-top: 10px">
+            <div class="col-3">{{ "IMEI" | translate }}</div>
+            <div class="col-9">
+              <div style="display: flex">
+                <select id="dbselectIMEI" multiple="multiple">
+                  <option
+                    *ngFor="let udid of deviceArr_1"
+                    [value]="udid.Device_ID"
+                  >
+                    {{ udid.Device_ID }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="margin-top: 20px; margin-bottom: 20px">
+            <div class="col-3">{{ "Vahicle Name" | translate }}</div>
+            <div class="col-9">
+              <div style="display: flex">
+                <select id="dbselectVehicleName" multiple="multiple">
+                  <option
+                    *ngFor="let uname of deviceArr_1"
+                    [value]="uname.Device_ID"
+                  >
+                    {{ uname.Name ? uname.Name : "--" }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="row" style="margin: 0; padding-bottom: 20px">
+            <div
+              class="col-sm-12 col-md-12 col-lg-12"
+              style="padding-right: 0%; padding-left: 0"
+            >
+              <!-- timefilter icons -->
+              <div
+                class="btn-group btn-group-sm"
+                role="group"
+                aria-label="Basic example"
+                style="width: 100%"
+              >
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_4"
+                  (click)="changeDate('today')"
+                >
+                  {{ "Today" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_5"
+                  (click)="changeDate('yesterday')"
+                >
+                  {{ "Yesterday" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%; border-right: 2px solid white"
+                  class="btn btn-secondary animateClass_6"
+                  (click)="changeDate('week')"
+                >
+                  {{ "Week" | translate }}
+                </button>
+                <button
+                  type="button"
+                  style="width: 25%"
+                  class="btn btn-secondary animateClass_7"
+                  (click)="changeDate('month')"
+                >
+                  {{ "Month" | translate }}
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="row"
+            style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+          >
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+              <!-- from time label-->
+              <span style="margin-bottom: 0%; font-size: 12px">
+                {{ "From" | translate }} :</span
+              >
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+              <!-- from datetime picker -->
+              <input
+                id="from_date"
+                bsDatepicker
+                class="form-control form-control-sm"
+                style="height: 25px"
+                [bsConfig]="bsConfig"
+                [(ngModel)]="from_date"
+                type="text"
+                (ngModelChange)="clicked = false"
+              />
+            </div>
+          </div>
+          <div
+            class="row"
+            style="margin: 0; padding-bottom: 20px; padding-right: 3px"
+          >
+            <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0">
+              <!-- tolabel -->
+              <span style="margin-bottom: 0%; font-size: 12px"
+                >{{ "To" | translate }} :</span
+              >
+            </div>
+            <div class="col-sm-9 col-md-9 col-lg-9" style="padding: 0px">
+              <!-- tolabel picker -->
+              <input
+                id="to_date"
+                bsDatepicker
+                class="form-control form-control-sm"
+                style="height: 25px"
+                [bsConfig]="bsConfig"
+                name="todate"
+                [(ngModel)]="to_date"
+                type="text"
+                (ngModelChange)="clicked = false"
+              />
+            </div>
+          </div>
+          <div class="row" style="margin-bottom: 20px">
+            <div class="col-12">
+              <button
+                style="
+                  background-color: #1556b9;
+                  color: #fdfdfd;
+                  font-size: 12px;
+                "
+                md-raised-button
+                (click)="reportFilter('data')"
+              >
+                {{ "Search" | translate }}
+              </button>
+              <button
+                *ngIf="showXL == true"
+                style="
+                  background-color: #cc0000;
+                  color: #fdfdfd;
+                  font-size: 12px;
+                "
+                md-raised-button
+                (click)="exportExel()"
+              >
+                {{ "Export To Excel" | translate }}
+              </button>
+            </div>
+            <!-- <div class="col-12"> -->
+            <!-- <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button class="col-md-4" (click)="reportFilter('data')">{{'Search' | translate}}</button>
+        <button *ngIf="showXL == true" style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="col-md-4" (click)="exportExel()">{{'Export To Excel' | translate}}</button>
+        <button style="background-color: #cc0000;color: #fdfdfd;" md-raised-button class="col-md-4" *ngIf="showXL == true" (click)="exportPdf()">{{'Export To Pdf'| translate}}</button> -->
+            <!-- </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/report/report-filter/report-filter.component.scss b/src/app/report/report-filter/report-filter.component.scss
new file mode 100644
index 0000000..684120e
--- /dev/null
+++ b/src/app/report/report-filter/report-filter.component.scss
@@ -0,0 +1,11 @@
+col-sm-9 col-md-9 col-lg-9 .ms-parent {
+  width: 100% !important;
+}
+
+#outer {
+  width: 100%;
+  text-align: center;
+}
+.inner {
+  display: inline-block;
+}
diff --git a/src/app/report/report-filter/report-filter.component.spec.ts b/src/app/report/report-filter/report-filter.component.spec.ts
new file mode 100644
index 0000000..e00306a
--- /dev/null
+++ b/src/app/report/report-filter/report-filter.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportFilterComponent } from './report-filter.component';
+
+describe('ReportFilterComponent', () => {
+  let component: ReportFilterComponent;
+  let fixture: ComponentFixture<ReportFilterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ReportFilterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/report/report-filter/report-filter.component.ts b/src/app/report/report-filter/report-filter.component.ts
new file mode 100644
index 0000000..d97fc48
--- /dev/null
+++ b/src/app/report/report-filter/report-filter.component.ts
@@ -0,0 +1,1595 @@
+import { Component, OnInit, Output, EventEmitter, Input, OnChanges } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+declare var $:any;
+import * as moment from 'moment-timezone';
+import { Router } from '@angular/router';
+import { ReportService } from '../report.service';
+@Component({
+  selector: 'app-report-filter',
+  templateUrl: './report-filter.component.html',
+  styleUrls: ['./report-filter.component.scss']
+})
+export class ReportFilterComponent implements OnInit {
+  from_date =new Date();
+  to_date = new Date();
+  isCC:Boolean=true;
+  bsConfig: Partial<BsDatepickerConfig>;
+  @Output() onReportFIlter: EventEmitter<any> = new EventEmitter<any>();
+  superAdmin: any;
+  fs: any;
+  emailid: any;
+  ls: any;
+  or: any;
+  useridd: any;
+  bilingMonth = new Date();
+  mb: any;
+  selectGroup=""
+  custtype: any;
+  devicesss: any;
+  minIdleTime:any=5;
+  showXL : Boolean =true; 
+  filterRtype = 'Time';
+  userFilterType='Name';
+  deviceFilterType='IMEI';
+  // selectedComponent="summary_report"
+  clicked:boolean=false;
+  reportType = ['Time','Daily','Trip'];
+  userRadio= ['Phone', 'Name'];
+  deviceRadio= ['IMEI','SIM'];
+  deviceRadio1= ['IMEI','NAME'];
+  billingType = [{
+    selectedValue:'Monthly',
+    value: 'Monthly'
+  },
+
+  {
+    selectedValue:'Yearly',
+    value: 'Yearly'
+  }]
+
+  billing_status =[
+    {
+      selectedValue:'Paid',
+      value: 'Paid'
+    },
+    {
+      selectedValue:'Pending',
+      value: 'Pending'
+    }
+
+  ]
+  finall: any;
+  deleteduser:boolean=false;
+  deleteddevice:boolean=false;
+  options: any=[{selectedValue : '',value:''}];
+  cust: boolean;
+  logoutbut: boolean;
+  dealer: boolean;
+  showLoader:boolean=true;
+  sidenavbarcontent:boolean=true
+  colorTheme = 'theme-dark-blue';
+  optionLabel:String = 'Vehicle';
+  showFromDate : Boolean = true;
+  lableVariable = 'To' ; 
+  stoppage_duration =[{value: "0",view_value:"All Data"},{value: "1",view_value:"Less Than 2 Hours"},{value: "2",view_value:"More Than 2 Hours"},{value: "6",view_value:"More Than 6 Hours"},{value: "12",view_value:"More Than 12 Hours"},{value: "24",view_value:"More Than 24 Hours"}];
+  selectedStopageDuration="0"
+  componentIdentifier=""
+  
+  reportArray = [
+    {name : "AC Report",Rstatus:true,Astatus:false,value:"ac_report"},
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name : "Data Push Reports",Rstatus : true,Astatus:false,value:"dataPushReport"},
+    {name:"Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performanceReport"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:false,value:"ignition_report"},
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "Performance Reports",Rstatus : true,Astatus:false,value:"performanceReport"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name :  "Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:false,value:"stoppage_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+    
+
+//     ac_report: {Rstatus: false, Astatus: false}
+// alert_report: {Rstatus: false, Astatus: false}
+// daily_report: {Rstatus: false, Astatus: false}
+// daywise_report: {Rstatus: false, Astatus: false}
+// distance_report: {Rstatus: false, Astatus: false}
+// driver_performanceReport: {Rstatus: false, Astatus: false}
+// fuel_consumption_report: {Rstatus: false, Astatus: false}
+// fuel_report: {Rstatus: false, Astatus: false}
+// geofence_report: {Rstatus: false, Astatus: false}
+// idle_report: {Rstatus: false, Astatus: false}
+// ignition_report: {Rstatus: false, Astatus: false}
+// loading_unloading_trip: {Rstatus: false, Astatus: false}
+// overspeed_report: {Rstatus: false, Astatus: false}
+// poi_report: {Rstatus: false, Astatus: false}
+// route_violation_report: {Rstatus: false, Astatus: false}
+// sos_report: {Rstatus: false, Astatus: false}
+// speed_variation: {Rstatus: false, Astatus: false}
+// stoppage_report: {Rstatus: false, Astatus: false}
+// summary_report: {Rstatus: false, Astatus: false}
+// travel_path_report: {Rstatus: false, Astatus: false}
+// trip_report: {Rstatus: false, Astatus: false}
+// user_trip_report: {Rstatus: false, Astatus: false}
+// __proto__: Object
+
+    // {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    // {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    // 
+    // {name : "User Trip Report",Rstatus : true,Astatus:false,value:"user_trip_report"},
+    // {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"}  ,
+  ];
+  reportPrefrecne:any
+  componentArray=['AC_report','daily_report','ss','dayWiseReport','distance_report','Driver_performance','geofence_report',
+  'idle_report','ignition_report','loadunloadTrip','notification_master','over_speed','poi_report','route_violation_report','speed_variation','summary_report','stoppage_report','device_sos_report',
+  'trip_report','travel_path-report','working_hours_report','maintanance_report',]
+  // 'notification_master',"billing_detail",'fuel_report_graph','vehicle_expenses','temp_report_graph','deviceMaster','gps_master','usersMaster','fuel_consumption_report']
+  // @Input() componentIdentifier: string;
+  constructor(private contactService: ContactService,private router:Router,private reportService:ReportService) { 
+    console.log(this.componentIdentifier,this.selectedStopageDuration);
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+  }
+  groups
+  ngOnInit() {
+    
+    this.loadropdown();
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.from_date = new Date(fTime);
+   
+    if(this.componentIdentifier=="performanceReport"){
+      fTime.setDate(fTime.getDate()-1);
+     
+      this.from_date = new Date(fTime);
+    }
+    $("#dbselect_1").change(function () {
+  
+   that.clicked=false
+});
+   
+       $("#dbselect_billtype").change(function () {
+  
+   that.clicked=false
+});
+
+       $("#dbselect_billStatus").change(function () {
+  
+   that.clicked=false
+});
+
+    
+       $("#dbselectPhone").change(function () {
+  
+   that.clicked=false
+});
+
+       $("#dbselectName").change(function () {
+  
+   that.clicked=false
+});  
+
+$("#dbselectSIM").change(function () {
+  
+   that.clicked=false
+});    
+   
+$("#dbselectIMEI").change(function () {
+  
+   that.clicked=false
+});
+  
+$("#dbselectVehicleName").change(function () {
+  
+   that.clicked=false
+});
+    
+$("#dbselect_2").change(function () {
+  
+   that.clicked=false
+});
+   
+ $("#dbselect_3").change(function () {
+  
+   that.clicked=false
+});  
+        $("#dbselect_notif").change(function () {
+  
+   that.clicked=false
+});  
+    
+    $("#dbselect").change(function () {
+  
+   that.clicked=false
+});
+$("#dbselect1").change(function () {
+  
+   that.clicked=false
+});
+
+$("#dbselectNotif").change(function () {
+  
+   that.clicked=false
+});
+    // console.log('this.componentIdentifier',this.componentIdentifier);
+     this.reportPrefrecne = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).report_preference;
+    console.log("----------------",this.reportPrefrecne,'---->',typeof(this.reportPrefrecne));
+   
+      let that = this;
+    if(this.reportPrefrecne !=undefined){
+      for(var i=0;i<this.reportArray.length;i++){
+        if(this.reportPrefrecne[this.reportArray[i].value]){
+          // console.log(this.reportArray[i],'->',this.reportPrefrecne[this.reportArray[i].value].Rstatus);
+          this.reportArray[i].Rstatus=this.reportPrefrecne[this.reportArray[i].value].Rstatus;
+          // //  this.reportArray[i].Astatus=this.reportPrefrecne[this.reportArray[i].value].Astatus
+          // if(!(this.reportPrefrecne[this.reportArray[i].value].Rstatus)){
+          //   // this.reportArray.splice(i,1);
+          // }
+        }else if(this.reportArray[i].value=="dataPushReport"){
+            this.reportArray[i].Rstatus=true;
+        }
+      }    
+    }
+    
+    // for(var j=0;j<this.reportArray.length;j++){
+    //   if(this.reportArray[j].Rstatus==false){
+    //     this.reportArray.splice(j,1);
+    //   }
+    // }
+    this.reportArray.filter(x => x.Rstatus === false).forEach(x => this.reportArray.splice(this.reportArray.indexOf(x), 1));
+    // console.log(this.reportArray);
+
+    if(this.reportArray.length==0){
+      this.router.navigate(['/reports/no-report'])
+    }
+
+    if( this.componentIdentifier=="driver_performanceReport" ){
+     this.sidenavbarcontent=false
+    }else{
+       this.sidenavbarcontent=true
+    }
+
+    if(this.componentIdentifier === 'summary_report'){
+   
+      fTime.setDate(fTime.getDate()-1);
+     
+      this.from_date = new Date(fTime);
+  
+      var td  = new Date().setHours(23,59,59,999);
+      this.to_date = new Date(td);
+      this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYYY' }, { containerClass: this.colorTheme });
+
+    }
+
+    if((this.componentIdentifier === 'daywise_report')){
+      var yt = moment().subtract(1, 'days');
+      var ptt = new Date(yt).setHours(0, 0, 0);
+      var ttt = new Date(yt).setHours(23,59,59);
+      this.from_date = new Date(ptt);
+      this.to_date = new Date(ttt);
+      
+      console.log('this.from_date', this.from_date);
+      console.log('this.to_date', this.to_date);
+    }
+
+    if(this.componentIdentifier === 'daily_report' || this.componentIdentifier === 'ss' || this.componentIdentifier=="speed_variation"){
+      this.showFromDate = false;
+      this.lableVariable = 'Select Date';
+      
+    }
+
+
+    if((this.componentIdentifier === 'fuel_report_graph') || (this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'temp_report_graph','vehicle_expenses')){
+      this.showXL = false;
+    }
+   
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+ 
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    var cc= JSON.parse(window.atob(window.localStorage.token.split('.')[1])).customer_role;
+ 
+    
+     if(cc=="cc"){
+       this.isCC=false;
+     }
+    if(this.componentIdentifier === 'geofence_report'){
+      this.optionLabel = 'geofences'; 
+      
+      this.getgeofence();
+    }else if(this.componentIdentifier === 'route_violation_report'){
+      this.routeViolationArr()
+    }else if(this.componentIdentifier === 'billing_detail'){
+      this.getUser();
+
+    }else{
+      // this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      this.optionLabel = 'Vehicle';
+      //   data => {
+          this.devicesss = JSON.parse(localStorage.getItem('vehicaleData'));
+          this.groups=JSON.parse(localStorage.getItem('groupData'))
+          console.log(this.devicesss);
+          
+          this.finall = (this.devicesss);
+          this.options = [];
+        
+          for(let i=0;i<this.devicesss.length;i++){
+  
+            // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+              let a ={
+                value : this.devicesss[i].Device_Name,
+                viewValue:this.devicesss[i].Device_Name,
+                did:this.devicesss[i].Device_ID,
+                id:this.devicesss[i]._id,
+                user:this.devicesss[i].user,
+                groupName:this.devicesss[i].groupName?this.devicesss[i].groupName:'',
+                // email: this.devicesss.devices[i].Email_ID,
+                // deviceType: this.devicesss.devices[i].type_of_device,      
+              }
+             
+             if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report') || (this.componentIdentifier==="loading_unloading_trip") ){
+                a['selectedValue'] = this.devicesss[i]._id ; 
+             } else if ((this.componentIdentifier === 'fuel_report_graph') || (this.componentIdentifier === 'distance_report') || (this.componentIdentifier === 'ac_report')|| (this.componentIdentifier === 'travel_path_report') ||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'overspeed_report')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_hours_report')|| (this.componentIdentifier==="performanceReport")|| (this.componentIdentifier === 'daywise_report')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master') || !this.isCC ||(this.componentIdentifier === 'daily_logs') || ( this.componentIdentifier==="dataPushReport")||(this.componentIdentifier=="speed_variation")){
+                a['selectedValue'] = this.devicesss[i].Device_ID ; 
+
+              }
+              this.options.push(a);
+            // }
+          }
+
+          if(this.componentIdentifier == 'poi_report'){
+            this.getPOI();
+          }else{
+            this.loadropdown();
+          }
+      
+
+        
+            // console.log("ignition option",this.options);
+            let that = this;
+            // setTimeout(()=>{ 
+            // },100)  
+        
+        // });
+
+      
+
+    }
+  
+
+
+
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+     }
+     else{
+         this.logoutbut = true
+     } 
+     
+     if(this.componentIdentifier == 'usersMaster'){  
+      this.getAllUser();
+     }
+
+     if((this.componentIdentifier == 'deviceMaster')||(this.componentIdentifier == 'gps_master')){  
+      this.getAllDevice();
+     }
+     if(this.componentIdentifier === 'notification_master' || !this.isCC){
+          this.getDeviceForNotif();
+     }
+      
+  
+     
+  }
+
+  loadropdown() {
+    let that = this;
+    var placeholderval;
+    if(this.componentIdentifier == 'geofence_report'){
+      placeholderval = 'Select Geofence .....'
+    }
+    if((this.componentIdentifier === 'distance_report')||(this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'censor_detail') || (this.componentIdentifier === 'idle_report') ||(this.componentIdentifier ==='performanceReport')){
+      placeholderval = 'Select Vehicles .....'
+    }
+    if(this.componentIdentifier === 'billing_detail'){
+      placeholderval = 'Select User .....'
+
+    }
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    // ||(this.componentIdentifier === 'notification_master')
+  
+    if((this.componentIdentifier == 'geofence_report')||(this.componentIdentifier == 'usersMaster')||(this.componentIdentifier == 'deviceMaster')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'billing_detail')||(this.componentIdentifier === 'fuel_report_graph')||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'fuel_consumption_report')||(this.componentIdentifier === 'sos_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier ==='gps_master') ){
+      console.log(placeholderval);
+
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 200,
+          placeholder: this.componentIdentifier == 'geofence_report'?'Select Geofence .....': placeholderval,
+          filter: true,
+          single: true,
+          selectAll: false
+   
+        })
+    
+       that.showLoader = false;
+      }, 100);
+      
+
+      if(this.componentIdentifier === 'billing_detail'){
+        setTimeout(() => {
+
+          $('#dbselect_billtype').multipleSelect({
+            width: 200,
+            placeholder: "Select Type",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+       
+  
+          $('#dbselect_billStatus').multipleSelect({
+            width: 200,
+            placeholder: "Select Status",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+        }, 100);
+      }
+
+      if(this.componentIdentifier == 'usersMaster'){
+        setTimeout(() => {
+          $('#dbselectPhone').multipleSelect({
+            width: 250,
+            placeholder: "Customer Phone",
+            filter: true,
+            single: true,
+            selectAll: false  ,
+         
+          }) 
+
+          $("#dbselectPhone").multipleSelect("disable");
+    
+          $('#dbselectName').multipleSelect({
+            width: 250,
+            placeholder: "Customer Name",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+        },100)
+       }
+
+       if(this.componentIdentifier == 'deviceMaster'){
+
+        setTimeout(() => {
+          $('#dbselectIMEI').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle IMEI",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+          $('#dbselectSIM').multipleSelect({
+            width: 250,
+            placeholder: "Sim Number",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+
+          $("#dbselectSIM").multipleSelect("disable");
+    
+        },100)
+       }
+
+       if(this.componentIdentifier == 'gps_master'){
+
+        setTimeout(() => {
+          $('#dbselectIMEI').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle IMEI",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+    
+          $('#dbselectVehicleName').multipleSelect({
+            width: 250,
+            placeholder: "Vehicle Name",
+            filter: true,
+            single: true,
+            selectAll: false  
+          }) 
+
+          $("#dbselectVehicleName").multipleSelect("disable");
+    
+        },100)
+
+       }
+    }else{      
+      setTimeout(() => {
+        $('#dbselect').multipleSelect({
+          width: 200,
+          placeholder:this.componentIdentifier == 'geofence_report'?'Select Geofence....': 'Select Vehicle.....',
+          filter: true,
+   
+        })  
+      }, 100);
+
+    }
+    if(this.componentIdentifier == 'poi_report'){
+      setTimeout(() => {
+        $('#dbselect_1').multipleSelect({
+          width: 200,
+          placeholder: "Select POI",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+      }, 100);
+    }
+
+  
+
+    if(this.componentIdentifier == 'stoppage_report'){
+      setTimeout(() => {
+        $('#dbselect_2').multipleSelect({
+          width: 200,
+          placeholder: "Select Duration",
+          filter: true,
+          single: true,
+          selectAll: false,  
+        }) 
+      }, 200);
+    }
+
+    if(this.componentIdentifier == 'route_violation_report'){
+      setTimeout(() => {
+        $('#dbselect_3').multipleSelect({
+          width: 200,
+          placeholder: "Select Route",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+      }, 100);
+    }
+
+    if(this.componentIdentifier == 'notification_master' ||!this.isCC){
+      setTimeout(() => {
+        $('#dbselect_notif').multipleSelect({
+          width: 200,
+          placeholder: "Select type",
+          filter: true,
+          // single: true,
+          // selectAll: false  
+        }) 
+
+        $('#dbselectNotif').multipleSelect({
+          width: 200,
+          placeholder: "Select Vehicle",
+          filter: true,
+          // single: true,
+          // selectAll: false  
+        }) 
+      }, 100);
+
+    
+    }
+
+
+    // if(this.componentIdentifier == 'usersMaster'){
+      
+    //   $('#dbselectPhone').multipleSelect({
+    //     width: 200,
+    //     placeholder: "Customer Phone",
+    //     filter: true,
+    //     single: true,
+    //     selectAll: false  
+    //   }) 
+
+    //   $('#dbselectName').multipleSelect({
+    //     width: 200,
+    //     placeholder: "Customer Name",
+    //     filter: true,
+    //     single: true,
+    //     selectAll: false  
+    //   }) 
+    // }
+    // var triggerReport = setTimeout(()=>{
+    //   clearTimeout(triggerReport);
+    //   var data = '';
+    //   if(that.componentIdentifier != 'fuel_report_graph'){
+    //     that.reportFilter(data);
+    //   }
+    
+    // },200)
+   
+  }
+
+
+  deviceArr = [];
+  deviceFilterArr :any;
+   reportFilter(data): void {
+     var demo=[]
+    this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+    // var group =  $('#groupSelect').multipleSelect('getSelects','value'); 
+    //   console.log("GROUPS==>",group);
+      
+     if(this.componentIdentifier=="travel_path_report"){
+       console.log(this.options)
+       for(var i=0;i<this.deviceArr.length;i++){
+         for(var j=0;j<this.options.length;j++){
+           if(this.deviceArr[0]==this.options[j].did){
+             demo.push({id:$('#dbselect').multipleSelect('getSelects','value'),'name':this.options[j].value},)
+             console.log("assasa", demo);
+             
+           }
+         }
+       }
+      //  this.deviceArr=
+     }
+    //  else
+    // this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log('this.deviceArr',this.deviceArr);
+    var that  = this;
+     var filter = {
+       fromDate : this.from_date,
+       toDate : this.to_date,
+       deviceArr :this.componentIdentifier=="travel_path_report"? demo:this.deviceArr
+     }
+     if (this.componentIdentifier == 'fuel_consumption_report') {
+       filter['filter_type'] = this.filterRtype;
+          var tempArr = [];
+          var dataArr = this.options.filter(function (item) {  
+              if(item.id == that.deviceArr[0]){   
+                return item;
+              }             
+          });
+       
+          filter.deviceArr = dataArr ; 
+     }
+
+     if(this.componentIdentifier === 'idle_report'){
+      filter['minidleT'] = this.minIdleTime ; 
+     }
+
+     if(this.componentIdentifier === 'poi_report'){
+      let poi_id =  $('#dbselect_1').multipleSelect('getSelects','value');
+      filter['poi_id'] = poi_id ; 
+     }
+
+     
+     if(this.componentIdentifier === 'stoppage_report'){
+      let duration = [];
+      duration =  $('#dbselect_2').multipleSelect('getSelects','value');
+      filter['duration'] = duration ; 
+     }
+
+     if(this.componentIdentifier === 'route_violation_report'){
+      let vroute = [];
+      vroute =  $('#dbselect_3').multipleSelect('getSelects','value');
+      var routeArr = this.routeArr.filter(function (item) {  
+        if(item._id == vroute[0]){   
+          return item;
+        }             
+    });
+      filter['route'] = routeArr ; 
+     }
+
+     if(this.componentIdentifier === 'notification_master'||!this.isCC){
+      let notif_type = [];
+      notif_type =  $('#dbselect_notif').multipleSelect('getSelects','value');
+
+      filter.deviceArr =  $('#dbselectNotif').multipleSelect('getSelects','value');
+
+      // var devIwner = this.notifDevArr.filter((u)=>{
+      //   filter.deviceArr.
+      // })
+  
+      filter['notitype'] = notif_type ; 
+     }
+
+     if(this.componentIdentifier === 'usersMaster'){
+      var userID = $('#dbselectPhone').multipleSelect('getSelects','value'); 
+      var userID1 = $('#dbselectName').multipleSelect('getSelects','value'); 
+      if((userID != undefined)&&(this.userFilterType == 'Phone')){
+        filter['userId'] = userID;
+      }
+      if((userID1 != undefined)&&(this.userFilterType === 'Name')){
+        filter['userId'] = userID1;
+      }
+        filter['deletedUser']  = this.deleteduser;
+     }
+
+     if((this.componentIdentifier === 'deviceMaster')||(this.componentIdentifier === 'gps_master')){
+      var DID = $('#dbselectIMEI').multipleSelect('getSelects','value'); 
+      if((this.componentIdentifier === 'deviceMaster')){
+        var DID1 = $('#dbselectSIM').multipleSelect('getSelects','value'); 
+      }else{
+        var DID1 = $('#dbselectVehicleName').multipleSelect('getSelects','value'); 
+      }
+    
+      if((DID != undefined)&&(this.deviceFilterType == 'IMEI')){
+        filter['deviceId'] = DID;
+        filter['type'] = 'IMEI';
+      }
+      if((DID1 != undefined)&&(this.deviceFilterType === 'SIM')){
+        filter['deviceId'] = DID1;
+        if(this.componentIdentifier === 'deviceMaster'){
+          filter['type'] = 'SIM';
+        }else{
+          filter['type'] = 'VNAME';
+        }
+    
+
+      }
+      console.log('this.deleteddevice',this.deleteddevice);
+        filter['deletedDevice']  = this.deleteddevice;
+       
+     }
+    
+     console.log("FILTER---",filter,this.componentIdentifier);
+     if(this.componentIdentifier=="daily_report")
+      this.reportService.callMethodOfSecondComponent(filter)
+
+      if(this.componentIdentifier=="ac_report")
+      this.reportService.accReport(filter)
+
+       if(this.componentIdentifier=="speed_variation")
+      this.reportService.speedVariation(filter)
+
+
+      if(this.componentIdentifier=="daily_logs")
+      this.reportService.dailyLogs(filter)
+
+      if(this.componentIdentifier=="daywise_report")
+      this.reportService.dayWiseReport(filter)
+
+      if(this.componentIdentifier=="distance_report")
+      {
+        this.reportService.distanceReport(filter)
+      }
+
+      
+
+       if(this.componentIdentifier=="geofence_report")
+      this.reportService.geofenceReport(filter)
+
+       if(this.componentIdentifier=="idle_report")
+      this.reportService.idleReport(filter)
+
+       if(this.componentIdentifier=="ignition_report")
+      this.reportService.ignitionReport(filter)
+
+       if(this.componentIdentifier=="loadunloadTrip")
+      this.reportService.loadunloadTrip(filter)
+
+        if(this.componentIdentifier=="notification_master" ||!this.isCC)
+        {
+          console.log(filter);
+          
+          this.reportService.notificationMaster(filter)
+
+        }
+
+       if(this.componentIdentifier=="overspeed_report")
+      this.reportService.overspeedReport(filter)
+
+      if(this.componentIdentifier=="poi_report")
+      this.reportService.poiReport(filter)
+
+       if(this.componentIdentifier=="route_violation_report")
+      this.reportService.routeViolationReport(filter)
+
+      if(this.componentIdentifier=="summary_report")
+      this.reportService.summaryReport(filter)
+
+      if(this.componentIdentifier=="stoppage_report")
+      this.reportService.stoppageReport(filter)
+
+      if(this.componentIdentifier=="sos_report")
+      this.reportService.sosReport(filter)
+        if(this.componentIdentifier=="loading_unloading_trip"){
+          this.reportService.loadunloadTrip(filter)
+        }
+
+      if(this.componentIdentifier=="trip_report")
+      this.reportService.tripReport(filter)
+
+      if(this.componentIdentifier=="travel_path_report"){
+        this.reportService.travelPathReport(filter)
+      }
+
+        if(this.componentIdentifier=="working_hours_report")
+      this.reportService.workingHoursReport(filter)
+
+        if(this.componentIdentifier=="maintanance_report")
+      this.reportService.maintanceReport(filter)
+
+       if(this.componentIdentifier=="dataPushReport")
+      this.reportService.datapushReport(filter)
+
+      if(this.componentIdentifier=="performanceReport")
+      {
+        this.reportService.performanceReport(filter)
+      }
+    this.onReportFIlter.emit(filter);
+}
+
+reportFilter_billing(){
+  var userObj =  $('#dbselect').multipleSelect('getSelects','value'); 
+  var billingType = $('#dbselect_billtype').multipleSelect('getSelects','value'); 
+  var billingStatus = $('#dbselect_billStatus').multipleSelect('getSelects','value'); 
+  
+  var filter = {
+    date : this.modelDate,
+    type : billingType,
+    status : billingStatus,
+    user :userObj
+  }
+
+  console.log(filter);
+
+  this.onReportFIlter.emit(filter);
+}
+
+
+  
+changeDate(dateid) {
+this.clicked=false
+  if (dateid == 'today') {
+    var td = new Date();
+    this.from_date = new Date(td.setHours(0, 0, 0));
+    this.to_date = new Date();
+    console.log('this.from_date', this.from_date);
+  }
+  if (dateid == 'yesterday') {
+    var yt = moment().subtract(1, 'days');
+    var ptt = new Date(yt).setHours(0, 0, 0);
+    var ttt = new Date(yt).setHours(23,59,59);
+    this.from_date = new Date(ptt);
+    this.to_date = new Date(ttt);
+    console.log('this.from_date', this.from_date);
+    console.log('this.to_date', this.to_date);
+  }
+  if (dateid == 'week') {
+    var wd = moment().startOf('week')
+    this.from_date = new Date(wd);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+  if (dateid == 'month') {
+    var md = moment().startOf('month').format();
+    this.from_date = new Date(md);
+    console.log('this.from_date', this.from_date);
+    this.to_date = new Date();
+  }
+}
+exportPDF(){
+  var filter='getPdf'
+      //  this.reportService.callMethodOfSecondComponent('getExcel')
+
+        if(this.componentIdentifier=="daily_report")
+      this.reportService.callMethodOfSecondComponent(filter)
+
+      if(this.componentIdentifier=="ac_report")
+      this.reportService.accReport(filter)
+
+       if(this.componentIdentifier=="speed_variation")
+      this.reportService.speedVariation(filter)
+
+
+      if(this.componentIdentifier=="daily_logs")
+      this.reportService.dailyLogs(filter)
+
+      if(this.componentIdentifier=="daywise_report")
+      this.reportService.dayWiseReport(filter)
+
+      if(this.componentIdentifier=="distance_report")
+      {
+        this.reportService.distanceReport(filter)
+      }
+
+       if(this.componentIdentifier=="geofence_report")
+      this.reportService.geofenceReport(filter)
+
+       if(this.componentIdentifier=="idle_report")
+      this.reportService.idleReport(filter)
+
+       if(this.componentIdentifier=="ignition_report")
+      this.reportService.ignitionReport(filter)
+
+       if(this.componentIdentifier=="loadunloadTrip")
+      this.reportService.loadunloadTrip(filter)
+
+        if(this.componentIdentifier=="notification_master" ||!this.isCC)
+      this.reportService.notificationMaster(filter)
+
+       if(this.componentIdentifier=="overspeed_report")
+      this.reportService.overspeedReport(filter)
+
+      if(this.componentIdentifier=="poi_report")
+      this.reportService.poiReport(filter)
+
+       if(this.componentIdentifier=="route_violation_report")
+      this.reportService.routeViolationReport(filter)
+
+      if(this.componentIdentifier=="summary_report")
+      this.reportService.summaryReport(filter)
+
+      if(this.componentIdentifier=="stoppage_report")
+      this.reportService.stoppageReport(filter)
+
+      if(this.componentIdentifier=="sos_report")
+      this.reportService.sosReport(filter)
+
+      if(this.componentIdentifier=="trip_report")
+      this.reportService.tripReport(filter)
+
+      if(this.componentIdentifier=="travel_path_report"){
+        this.reportService.travelPathReport(filter)
+      }
+
+        if(this.componentIdentifier=="working_hours_report")
+      this.reportService.workingHoursReport(filter)
+
+        if(this.componentIdentifier=="maintanance_report")
+      this.reportService.maintanceReport(filter)
+
+       if(this.componentIdentifier=="loading_unloading_trip"){
+          this.reportService.loadunloadTrip(filter)
+        }
+         if(this.componentIdentifier=="dataPushReport")
+      this.reportService.datapushReport(filter);
+
+     if(this.componentIdentifier=="performanceReport")
+      {
+        this.reportService.performanceReport(filter)
+      }
+
+}
+
+exportExel(){
+  // this.onReportFIlter.emit('getExcel');
+  var filter='getExcel'
+      //  this.reportService.callMethodOfSecondComponent('getExcel')
+
+        if(this.componentIdentifier=="daily_report")
+      this.reportService.callMethodOfSecondComponent(filter)
+
+      if(this.componentIdentifier=="ac_report")
+      this.reportService.accReport(filter)
+
+       if(this.componentIdentifier=="speed_variation")
+      this.reportService.speedVariation(filter)
+
+
+      if(this.componentIdentifier=="daily_logs")
+      this.reportService.dailyLogs(filter)
+
+      if(this.componentIdentifier=="daywise_report")
+      this.reportService.dayWiseReport(filter)
+
+      if(this.componentIdentifier=="distance_report")
+      {
+        this.reportService.distanceReport(filter)
+      }
+
+       if(this.componentIdentifier=="geofence_report")
+      this.reportService.geofenceReport(filter)
+
+       if(this.componentIdentifier=="idle_report")
+      this.reportService.idleReport(filter)
+
+       if(this.componentIdentifier=="ignition_report")
+      this.reportService.ignitionReport(filter)
+
+       if(this.componentIdentifier=="loadunloadTrip")
+      this.reportService.loadunloadTrip(filter)
+
+        if(this.componentIdentifier=="notification_master" ||!this.isCC)
+      this.reportService.notificationMaster(filter)
+
+       if(this.componentIdentifier=="overspeed_report")
+      this.reportService.overspeedReport(filter)
+
+      if(this.componentIdentifier=="poi_report")
+      this.reportService.poiReport(filter)
+
+       if(this.componentIdentifier=="route_violation_report")
+      this.reportService.routeViolationReport(filter)
+
+      if(this.componentIdentifier=="summary_report")
+      this.reportService.summaryReport(filter)
+
+      if(this.componentIdentifier=="stoppage_report")
+      this.reportService.stoppageReport(filter)
+
+      if(this.componentIdentifier=="sos_report")
+      this.reportService.sosReport(filter)
+
+      if(this.componentIdentifier=="trip_report")
+      this.reportService.tripReport(filter)
+
+      if(this.componentIdentifier=="travel_path_report"){
+        this.reportService.travelPathReport(filter)
+      }
+
+        if(this.componentIdentifier=="working_hours_report")
+      this.reportService.workingHoursReport(filter)
+
+        if(this.componentIdentifier=="maintanance_report")
+      this.reportService.maintanceReport(filter)
+
+       if(this.componentIdentifier=="loading_unloading_trip"){
+          this.reportService.loadunloadTrip(filter)
+        }
+         if(this.componentIdentifier=="dataPushReport")
+      this.reportService.datapushReport(filter);
+
+       if(this.componentIdentifier=="performanceReport")
+      {
+        this.reportService.performanceReport(filter)
+      }
+
+}
+geofenceArr = [];
+getgeofence(){
+  this.geofenceArr=[];
+  this.contactService.getallgeofence(this.useridd).subscribe(
+    data => {
+      this.options = data ;
+      for(var i = 0; i<this.options.length;i++){
+        this.options[i]['selectedValue'] = this.options[i]._id;
+        this.options[i]['value']  = this.options[i].geoname ; 
+      }
+      let that = this;
+      setTimeout(()=>{
+        that.loadropdown();
+      },100)  
+      console.log('this.options',this.options);
+    });
+}
+
+
+getUser(){
+  this.contactService.getDistributerList(this.useridd).subscribe(
+    data => {
+      console.log('data',data);
+      this.options = data ;
+      for(var i = 0; i<this.options.length;i++){
+        this.options[i]['selectedValue'] = this.options[i]._id;
+        this.options[i]['value']  = this.options[i].first_name + ' '  +  this.options[i].last_name; 
+      }
+      let that = this;
+      setTimeout(()=>{
+        that.loadropdown();
+      },100)  
+      console.log('this.options',this.options);
+    });
+
+}
+
+route_detail_show=[];
+poiArr=[];
+getPOI(){
+  // console.log("Mapping history !!!");
+  this.contactService.getPOI(this.useridd)
+  .subscribe(res=>{
+  //   console.log("routedet",res);
+    this.route_detail_show=res;
+
+    var poiObj; 
+
+    for(var i=0;i<this.route_detail_show.length;i++){
+      poiObj ={
+          poiname: this.route_detail_show[i].poi.poiname,
+          id : this.route_detail_show[i]._id
+        }
+
+        this.poiArr.push(poiObj);
+    }
+
+  
+    this.loadropdown();
+  //   console.log("routeDetails=>",this.poiArr);
+  },err=>{
+    this.loadropdown();
+  })
+}
+
+routeArr =[];
+
+routeViolationArr(){
+  var that =this;
+  this.contactService.routeViolation(this.useridd).subscribe(
+    res => {
+      
+      var route =[];
+      this.routeArr =[];
+      route = res;       
+      for(let i=0;i<route.length;i++){      
+          this.routeArr.push(route[i]);   
+      }
+        console.log(this.routeArr);
+
+        setTimeout(()=>{
+          that.loadropdown();
+        },100)  
+    });
+  
+}
+
+modelDate:any=new Date();
+
+onOpenCalendar(container) {
+  var that= this;
+  container.monthSelectHandler = (event: any): void => {
+    container._store.dispatch(container._actions.select(event.date));
+    console.log(that.modelDate);
+  };     
+    container.setViewMode('month');
+   
+ }
+
+ censor_detail(){
+  var deviceObj =  $('#dbselect').multipleSelect('getSelects','value'); 
+ 
+  console.log(deviceObj);
+  var filter = {
+   device : deviceObj
+  }
+
+  console.log(filter);
+
+  this.onReportFIlter.emit(filter);
+
+ }
+
+ userArr=[];
+ notifDevArr=[];
+ getAllUser(){
+   var that = this;
+   var userObj = {
+    "draw": 1,
+    "columns": [
+      {"data": "_id"},
+      {
+        "data": "first_name"},
+      { "data": "phone"},
+      {"data": "last_name"},
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "desc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": {
+      "supAdmin": this.useridd,
+      "DeletedUser": {
+        "$exists": false
+      }
+    }
+  }
+
+  if(this.deleteduser === true){
+        userObj.find.DeletedUser.$exists = true;
+  }
+  
+  var suburl = "/users/datatable";
+   that.contactService.post(suburl, userObj).subscribe(resp => {
+     this.userArrFunc(resp);
+   },err=>{
+     console.log(err);
+
+   })
+ }
+
+ userArrFunc(uOb){
+  this.userArr=[];
+  this.userArr = uOb.data;
+  console.log('userArr',this.userArr);
+  setTimeout(()=>{
+    this.loadropdown();
+    // $("#dbselectPhone").multipleSelect("disable");
+  },100)  
+
+ }
+
+
+ getAllDevice(){
+  
+  var findObj={};
+   if(this.custtype === true){
+    findObj = {
+      "$and" : [{"Dealer":this.useridd},{ "deletedDevice": {"$exists": this.deleteddevice}}]
+    };
+   }else{
+    findObj = {
+      "$and" : [{"supAdmin":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    };
+   }
+
+
+
+  var devObj = {
+    "draw": 1,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "Device_Name"
+      },
+     
+    
+      {
+        "data": "Device_ID"
+      },
+  
+      {
+        "data": "sim_number"
+      },
+   
+ 
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": findObj
+  }
+
+  // if(this.deleteddevice === true){
+  //   console.log("devObj.find['findObj']",devObj.find['findObj']);
+    
+  //   devObj.find['$and'][1]['deletedDevice']['$exists'] = true;
+  // }
+  console.log('devObj.find',devObj.find);
+
+  var suburl = "/devices/datatable";
+ 
+  this.deviceArrFunc(this.devicesss);
+  // this.contactService.post(suburl, devObj).subscribe(resp => {
+  //   console.log('device api respoonse=>',resp);
+  // })
+
+ }
+ getDeviceForNotif(){
+  
+  var findObj={};
+   if(this.custtype === true){
+    findObj = {
+      "$and" : [{"Dealer":this.useridd},{ "deletedDevice": {"$exists": this.deleteddevice}}]
+    };
+   } else if(this.superAdmin === true){
+    findObj = {
+      "$and" : [{"supAdmin":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    }
+   }else{
+    findObj = {
+      "$and" : [{"user":this.useridd},{ "deletedDevice": {"$exists":  this.deleteddevice}}]
+    }
+   }
+
+
+  var devObj = {
+    "draw": 1,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "Device_Name"
+      },
+     
+    
+      {
+        "data": "Device_ID"
+      },
+  
+      {
+        "data": "sim_number"
+      },
+      {
+        "data": "user"
+      },
+   
+ 
+    ],
+    "order": [
+      {
+        "column": 0,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": -1,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": findObj
+  }
+
+  // if(this.deleteddevice === true){
+  //   console.log("devObj.find['findObj']",devObj.find['findObj']);
+    
+  //   devObj.find['$and'][1]['deletedDevice']['$exists'] = true;
+  // }
+  console.log('devObj.find',devObj.find);
+
+  var suburl = "/devices/datatable";
+ 
+  this.deviceArrFunc1(this.devicesss);
+  // this.contactService.post(suburl, devObj).subscribe(resp => {
+  //   console.log('device api respoonse=>',resp);
+  //   // notifDevArr
+  // })
+
+ }
+
+
+
+ deviceArr_1:any=[]
+ deviceArrFunc(dOb){
+  this.deviceArr_1=[];
+  this.deviceArr_1 = dOb.data;
+  console.log('deviceArr_1',this.deviceArr_1);
+  var that= this;
+  setTimeout(()=>{
+    that.loadropdown();
+   
+  },100)  
+
+ }
+
+ deviceArrFunc1(dOb){
+  this.notifDevArr=[];
+  this.notifDevArr = dOb;
+  console.log('deviceArr_1',this.deviceArr_1);
+  var that= this;
+  setTimeout(()=>{
+    that.loadropdown();
+   
+  },100)  
+
+ }
+ userRadioButton(){
+  console.log('userFilterType',this.userFilterType);
+  // userRadio= ['Phone', 'Name'];
+  // deviceRadio= ['IMEI','SIM'];
+  if(this.userFilterType === 'Phone'){
+    $("#dbselectPhone").multipleSelect("disable");
+    $("#dbselectName").multipleSelect("enable");
+  }
+  if(this.userFilterType === 'Name'){
+   
+    $("#dbselectName").multipleSelect("disable");
+    $("#dbselectPhone").multipleSelect("enable");
+  }
+
+ }
+
+
+ deviceRadioButton(){
+  console.log('userFilterType',this.deviceFilterType);
+  if(this.deviceFilterType === 'IMEI'){
+    $("#dbselectIMEI").multipleSelect("disable");
+    $("#dbselectSIM").multipleSelect("enable");
+  }
+  if(this.deviceFilterType === 'SIM'){
+    $("#dbselectSIM").multipleSelect("disable");
+    $("#dbselectIMEI").multipleSelect("enable");
+  
+  }
+ }
+ userDeleted(ev){
+   console.log('event=>',ev);
+   this.deleteduser = ev.checked ;
+      this.getAllUser();
+ }
+
+ deletedDevices(ev1){
+   this.deleteddevice = ev1.checked ;
+   this.getAllDevice();
+ }
+
+//  callMethod(id) {
+  
+//   if(id == 'grouped'){
+//     $("#dbselect").multipleSelect("disable");
+   
+//   }else{
+//     $("#dbselect").multipleSelect("enable");
+//   }
+
+// }
+
+
+notificationArr= [
+  {view:'Overspeed',value:'overspeed'}, {view:'Ignition',value:'IGN'}, {view:'Point of intrest',value:'Route'}, {view:'Geofence',value:'Geo-Fence'}, {view:'Maxstoppage',value:'MAXSTOPPAGE'}, {view:'Fuel',value:'Fuel'}, {view:'AC',value:'AC'}, {view:'Route POI',value:'route-poi'}, {view:'Power',value:'power'}, {view:'Panic button',value:'SOS'}, {view:'Relay',value:'immo'},{view:'Parking',value:'theft'}
+]
+
+changeComponent(component){
+  this.clicked=false
+  this.componentIdentifier=component
+  this.selectGroup="all"
+  console.log(this.componentIdentifier);
+  // if(component=='distance_report')
+  // {
+
+  // }
+   
+  this.router.navigate(['/reports/'+component])
+  if(this.componentIdentifier === 'daily_report' || this.componentIdentifier === 'daily_logs' || this.componentIdentifier=="speed_variation"){
+      this.showFromDate = false;
+      this.lableVariable = 'Select Date';
+      
+    }else{
+      this.showFromDate = true;
+      this.lableVariable = 'To Date';
+    }
+    // this.loadropdown()
+  this.ngOnInit()
+  
+}
+onChangeGroup(event){
+  console.log(event);
+  this.clicked=false
+  if(event=="all"){
+    // this.devicesss=localStorage.getItem('vehicaleData');
+    for(let i=0;i<this.devicesss.length;i++){
+              let a ={
+                value : this.devicesss[i].Device_Name,
+                viewValue:this.devicesss[i].Device_Name,
+                did:this.devicesss[i].Device_ID,
+                id:this.devicesss[i]._id,
+                user:this.devicesss[i].user,
+                groupName:this.devicesss[i].groupName?this.devicesss[i].groupName:'',    
+              }
+             
+             if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report') || (this.componentIdentifier==="loading_unloading_trip")){
+                a['selectedValue'] = this.devicesss[i]._id ; 
+             } else if ((this.componentIdentifier === 'fuel_report_graph') || (this.componentIdentifier === 'distance_report') || (this.componentIdentifier === 'ac_report')|| (this.componentIdentifier === 'travel_path_report') ||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'overspeed_report')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_hours_report')|| (this.componentIdentifier === 'daywise_report')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master')||!this.isCC ||(this.componentIdentifier === 'daily_logs') || ( this.componentIdentifier==="dataPushReport")||(this.componentIdentifier=="speed_variation")){
+                a['selectedValue'] = this.devicesss[i].Device_ID ; 
+
+              }
+              this.options.push(a);
+          }
+            this.loadropdown();
+  }else{
+    // var arr=[];
+    //  for(var i=0;i<this.devicesss.length;i++){
+    //    if(event==this.devicesss[i].groupName){
+    //      arr.push(this.devicesss[i])
+    //    }
+    //  }
+    //  this.devicesss=arr;
+     this.options=[];
+     
+     for(let i=0;i<this.devicesss.length;i++){
+       let a ={
+         value : this.devicesss[i].Device_Name,
+         viewValue:this.devicesss[i].Device_Name,
+         did:this.devicesss[i].Device_ID,
+         id:this.devicesss[i]._id,
+         user:this.devicesss[i].user,
+         groupName:this.devicesss[i].groupName?this.devicesss[i].groupName:'',    
+        }
+        
+        if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report') || (this.componentIdentifier==="loading_unloading_trip")){
+          a['selectedValue'] = this.devicesss[i]._id ; 
+        } else if ((this.componentIdentifier === 'fuel_report_graph') || (this.componentIdentifier === 'distance_report') || (this.componentIdentifier === 'ac_report')|| (this.componentIdentifier === 'travel_path_report') ||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'overspeed_report')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_hours_report')|| (this.componentIdentifier === 'daywise_report')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master')||!this.isCC ||(this.componentIdentifier === 'daily_logs') || ( this.componentIdentifier==="dataPushReport")||(this.componentIdentifier=="speed_variation")){
+          a['selectedValue'] = this.devicesss[i].Device_ID ; 
+          
+        }
+        if(event==this.devicesss[i].groupName){
+          this.options.push(a);
+        }
+      }
+      console.log(this.options);
+      this.loadropdown();
+            // this.devicesss=localStorage.getItem('vehicaleData');
+  }
+
+  // // $(document).ready(function() {
+  //   // $("dbselect").multiselect({
+  //   //    selectedText: "# of # selected"
+  //   // });
+  //   // var hidValue = event;
+  //   // alert(hidValue);
+  //   // var selectedOptions = hidValue.split(",");
+  //   for(var i=0;i<this.options.length;i++){
+  //     // console.log(this.options[i]);
+      
+  //     if(this.options[i].groupName==event){
+  //       console.log(this.options[i]);
+  //        if ((this.componentIdentifier === 'trip_report')||(this.componentIdentifier === 'distance_report')||(this.componentIdentifier === 'idle_report')||(this.componentIdentifier == 'fuel_consumption_report')||(this.componentIdentifier === 'poi_report')||(this.componentIdentifier === 'stoppage_report')||(this.componentIdentifier === 'vehicle_expenses')||(this.componentIdentifier === 'loadunloadTrip')||(this.componentIdentifier === 'maintanance_report') || (this.componentIdentifier==="loading_unloading_trip")){
+  //               this.options[i]['selectedValue'] = this.options[i].id ; 
+  //             }else if ((this.componentIdentifier === 'fuel_report_graph')|| (this.componentIdentifier === 'ac_report')|| (this.componentIdentifier === 'travel_path_report') ||(this.componentIdentifier === 'temp_report_graph')||(this.componentIdentifier === 'summary_report')||(this.componentIdentifier === 'overspeed_report')||(this.componentIdentifier === 'daily_report')||(this.componentIdentifier === 'sos_report')||(this.componentIdentifier === 'ignition_report') ||(this.componentIdentifier === 'working_hours_report')|| (this.componentIdentifier === 'daywise_report')||(this.componentIdentifier === 'censor_detail')||(this.componentIdentifier === 'notification_master') ||(this.componentIdentifier === 'daily_logs') || ( this.componentIdentifier==="dataPushReport")||(this.componentIdentifier=="speed_variation")){
+  //               this.options[i]['selectedValue'] = this.options[i].did ; 
+
+  //             }
+  //       // console.log($("dbselect").find("option[value="+this.options[i].id+"]").prop("selected", "selected"));
+        
+  //       $("dbselect").find("option[value="+this.options[i].selectedValue+"]").prop("selected", "selected");
+  //     }
+  //   }
+  //   // for(var i in selectedOptions) {
+  //   //     var optionVal = selectedOptions[i];
+  //   //     $("select").find("option[value="+optionVal+"]").prop("selected", "selected");
+  //   // }
+  //   $("dbselect").multipleSelect('refresh');
+    
+
+// });
+
+  
+}
+
+actionMethod(i){
+  console.log("CLidkkdsj",i);
+  
+}
+
+
+
+}
+
+
+
diff --git a/src/app/report/report-routing.module.ts b/src/app/report/report-routing.module.ts
new file mode 100644
index 0000000..98a9d97
--- /dev/null
+++ b/src/app/report/report-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+// import { DisatanceReportComponent } from './disatance-report/disatance-report.component';
+
+const routes: Routes = [
+  // {
+  //       path: 'distance-report', // child route path
+  //       component: DisatanceReportComponent, // child route component that the router renders
+  //  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ReportRoutingModule { }
diff --git a/src/app/report/report.module.ts b/src/app/report/report.module.ts
new file mode 100644
index 0000000..a780d55
--- /dev/null
+++ b/src/app/report/report.module.ts
@@ -0,0 +1,161 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ReportRoutingModule } from './report-routing.module';
+import { MainComponent } from './main/main.component';
+import {DisatanceReportComponent } from './report component/disatance-report/disatance-report.component';
+// import { AcReportsComponent } from './ac-report/ac-report.component';
+// import { DailyReportComponent } from './daily-report/daily-report.component';
+// import { DailyLogssComponent } from './daily-logs/daily-logs.component';
+import { AllMenusComponent } from './all-menus/all-menus.component';
+import { TranslateLoader, TranslateModule } from 'ng2-translate';
+import { createTranslateLoader } from '../app.module';
+import {ResponseOptions, Response, Http, HttpModule} from '@angular/http';
+import { CarouselModule, MDBBootstrapModule } from 'angular-bootstrap-md';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { MaterialModule, MdAutocompleteModule, MdButtonModule, MdCheckboxModule, MdMenu, MdMenuModule, MdSnackBarModule } from '@angular/material';
+import { NotificationComponent } from './notification/notification.component';
+import { DatepickerModule, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReportFilterComponent } from './report-filter/report-filter.component';
+import { DetailComponent } from './report component/disatance-report/details/details.component';
+import { AcReportsComponent } from './report component/ac-report/ac-report.component';
+import { DailyReportComponent } from './report component/daily-report/daily-report.component';
+import { DailyLogssComponent } from './report component/daily-logs/daily-logs.component';
+import { AlertReportComponent } from './report component/alert-report/alert-report.component';
+import { DailyDetailsComponent } from './report component/daily-details/daily-details.component';
+import { DayWiseReportComponent } from './report component/day-wise-report/day-wise-report.component';
+import { DeviceFuelReportComponent } from './report component/device-fuel-report/device-fuel-report.component';
+import { DeviceSOSreportComponent } from './report component/device-sosreport/device-sosreport.component';
+import { DeviceSpeedReportComponent } from './report component/device-speed-report/device-speed-report.component';
+import { DriversPerformanceReportComponent } from './report component/drivers-performance-report/drivers-performance-report.component';
+import { FuelReportComponent } from './report component/fuel-report/fuel-report.component';
+import { GeofancingReportComponent } from './report component/geofancing-report/geofancing-report.component';
+import { IdealReportComponent } from './report component/ideal-report/ideal-report.component';
+import { IdleReportComponent } from './report component/idle-report/idle-report.component';
+import { IgnReportComponent } from './report component/ign-report/ign-report.component';
+import { IgnitionReportComponent } from './report component/ignition-report/ignition-report.component';
+import { MaintananceComponent } from './report component/maintanance/maintanance.component';
+import { OverSpeedComponent } from './report component/over-speed/over-speed.component';
+import { POIReportComponent } from './report component/poi-report/poi-report.component';
+import { RouteViolationComponent } from './report component/route-violation/route-violation.component';
+import { StoppageReportComponent } from './report component/stoppage-report/stoppage-report.component';
+import { SummaryReportComponent } from './report component/summary-report/summary-report.component';
+import { TempretureGraphComponent } from './report component/tempreture-graph/tempreture-graph.component';
+import { TempretureReportComponent } from './report component/tempreture-report/tempreture-report.component';
+import { TravelPathReportComponent } from './report component/travel-path-report/travel-path-report.component';
+// import { TripByDeviceComponent } from './report component/trip-by-device/trip-by-device.component';
+import { TripDetailsComponent } from './report component/trip-details/trip-details.component';
+import { TripLoadUnloadComponent } from './report component/trip-load-unload/trip-load-unload.component';
+import { TripReportComponent } from './report component/trip-report/trip-report.component';
+import { WorkingHourDetailComponent } from './report component/working-hour-detail/working-hour-detail.component';
+import { WorkingHourReportComponent } from './report component/working-hour-report/working-hour-report.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NguiPopupModule } from '@ngui/popup';
+import { GaugeModule } from 'angular-gauge';
+import { StormpathModule } from 'angular-stormpath';
+import { FlashMessagesModule } from 'angular2-flash-messages';
+import { ReCaptchaModule } from 'angular2-recaptcha';
+import { ResizableModule } from 'angular2-resizable';
+import { FormWizardModule } from 'angular2-wizard';
+import { DateTimePickerModule } from 'ng-pick-datetime';
+import { ChartsModule } from 'ng2-charts';
+import { DragulaModule } from 'ng2-dragula';
+import { ExpansionPanelsModule } from 'ng2-expansion-panels';
+import { IfScrollbarsModule } from 'ng2-if-scrollbars';
+import { Ng2DropdownModule } from 'ng2-material-dropdown';
+import { Ng2OrderModule } from 'ng2-order-pipe';
+import { PasswordStrengthBarModule } from 'ng2-password-strength-bar';
+import { ProgressBarModule } from 'ng2-progress-bar';
+import { Ng2SearchPipeModule } from 'ng2-search-filter';
+import { TimepickerModule } from 'ngx-bootstrap';
+import { NgxPaginationModule } from 'ngx-pagination';
+import { routes } from '../app.router';
+import { routes2 } from '../dash/dash.router';
+import { AngularDateTimePickerModule  } from 'angular2-datetimepicker';
+import { MomentModule } from 'angular2-moment';
+import { NotificationMastersComponent } from './report component/notification-master/notification-master.component';
+import { AcreportInfoComponent } from './report component/ac-report/acreport-info/acreport-info.component';
+import { NoReportComponent } from './report component/no-report/no-report.component';
+import { StartComponent } from './report component/start/start.component';
+import { SummaryDetailsComponent } from './report component/summary-report/summary-details/summary-details.component';
+import { NewTravelPathReportComponent } from './report component/new-travel-path-report/new-travel-path-report.component';
+import { PushDataReportComponent } from './report component/push-data-report/push-data-report.component';
+import { PerformanceReportComponent } from './report component/performance-report/performance-report.component';
+import { NotiLocationComponent } from './report component/notification-master/noti-location/noti-location.component';
+import { HeaderComponent } from '../report/header/header.component';
+import { ViewRawComponent } from './report component/push-data-report/view-raw/view-raw.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReportRoutingModule,
+    MDBBootstrapModule.forRoot(),
+        NgbModule.forRoot(),
+            MaterialModule,
+            DatepickerModule,
+            BsDatepickerModule.forRoot(),
+            FormsModule,
+            IfScrollbarsModule,
+    GaugeModule.forRoot(),
+   /*   GaugesModule, */
+    DateTimePickerModule ,
+    AngularDateTimePickerModule,    
+    BrowserModule,
+    NgbModule.forRoot(),
+    NgxPaginationModule,
+    MDBBootstrapModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    ExpansionPanelsModule,
+    routes2,
+    Ng2SearchPipeModule,
+    Ng2OrderModule,
+    MomentModule,
+    PasswordStrengthBarModule,
+    DatepickerModule,
+    DragulaModule,
+    routes,
+    ResizableModule,
+    ProgressBarModule,
+    FlashMessagesModule,
+    // NgSelectModule,
+    FormsModule, 
+    ReactiveFormsModule, 
+    ReCaptchaModule, 
+    HttpModule,  
+    StormpathModule, 
+    NguiPopupModule,
+   /*  googleMapsCore, */
+    Ng2DropdownModule,
+    BrowserAnimationsModule,
+    NoopAnimationsModule,
+    MdButtonModule,
+    MdCheckboxModule,
+    MdAutocompleteModule,
+    MdMenuModule,
+    MdSnackBarModule,
+    ChartsModule,
+    FlexLayoutModule,
+    MaterialModule,
+    FormWizardModule,BrowserModule, ChartsModule,
+  //  GaugeModule.forRoot(),
+    CarouselModule.forRoot(),
+    TimepickerModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    
+
+    TranslateModule.forRoot({
+      provide: TranslateLoader,
+      useFactory: (createTranslateLoader),
+      deps: [Http]
+    }),
+    
+  ],
+  entryComponents:[DetailComponent,WorkingHourDetailComponent,AcreportInfoComponent,SummaryDetailsComponent,NotiLocationComponent,ViewRawComponent],
+  declarations: [MainComponent,IgnReportComponent, ReportFilterComponent,DisatanceReportComponent,TripDetailsComponent,POIReportComponent,OverSpeedComponent,MaintananceComponent,IgnitionReportComponent,IdleReportComponent,IdealReportComponent,FuelReportComponent,DayWiseReportComponent,DeviceSpeedReportComponent,AcreportInfoComponent,
+     TravelPathReportComponent,TempretureReportComponent,TempretureGraphComponent,SummaryReportComponent,StoppageReportComponent,RouteViolationComponent,DeviceFuelReportComponent,DeviceSOSreportComponent,AcReportsComponent, DailyReportComponent,DailyDetailsComponent,
+    WorkingHourReportComponent,WorkingHourDetailComponent,TripReportComponent,TripLoadUnloadComponent,AlertReportComponent, DailyLogssComponent,AllMenusComponent,NotificationComponent,GeofancingReportComponent,DetailComponent,DriversPerformanceReportComponent,NotificationMastersComponent, NoReportComponent, StartComponent, SummaryDetailsComponent, NewTravelPathReportComponent, PushDataReportComponent, PerformanceReportComponent, NotiLocationComponent, HeaderComponent, ViewRawComponent]
+})
+export class ReportModule { }
diff --git a/src/app/report/report.service.spec.ts b/src/app/report/report.service.spec.ts
new file mode 100644
index 0000000..f83a5b9
--- /dev/null
+++ b/src/app/report/report.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ReportService } from './report.service';
+
+describe('ReportService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ReportService]
+    });
+  });
+
+  it('should be created', inject([ReportService], (service: ReportService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/src/app/report/report.service.ts b/src/app/report/report.service.ts
new file mode 100644
index 0000000..3947a67
--- /dev/null
+++ b/src/app/report/report.service.ts
@@ -0,0 +1,189 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class ReportService {
+  invokeEvent: Subject<any> = new Subject(); 
+   invokeEventForAcReport:Subject<any>=new Subject();
+  invokeEventForDistance:Subject<any>=new Subject();
+  invokeEventForDailyLogs:Subject<any>=new Subject();
+  invokeEventForDayWiseReport:Subject<any>=new Subject();
+  invokeEventForgeofenceReport:Subject<any>=new Subject();
+  invokeEventForidleReport:Subject<any>=new Subject();
+  invokeEventForignitionReport:Subject<any>=new Subject();
+  invokeEventForloadunloadTrip:Subject<any>=new Subject();
+  invokeEventFornotificationMaster:Subject<any>=new Subject();
+  invokeEventForoverspeedReport:Subject<any>=new Subject();
+  invokeEventForpoiReport:Subject<any>=new Subject();
+  invokeEventForrouteViolationReport:Subject<any>=new Subject();
+  invokeEventForsummaryReport:Subject<any>=new Subject();
+  invokeEventForstoppageReport:Subject<any>=new Subject();
+  invokeEventForsosReport:Subject<any>=new Subject();
+  invokeEventFortripReport:Subject<any>=new Subject();
+  invokeEventForworkingHoursReport:Subject<any>=new Subject();
+  invokeEventFormaintanceReport:Subject<any>=new Subject();
+  invokeEventForSpeedVariationReport:Subject<any>=new Subject();
+  invokeEventFortravelPathReportt:Subject<any>=new Subject();
+  invokeEventForDataPushReport:Subject<any>=new Subject();
+  invokeEventForPerformanceReport:Subject<any>=new Subject();
+  addCustomer:Subject<any>=new Subject();
+  deviceExcel:Subject<any>=new Subject();
+  devicePDF:Subject<any>=new Subject();
+
+  JobCard:Subject<any>=new Subject();
+
+  reportArray = [
+    {name : "AC Report",Rstatus : true,Astatus:false,value:"ac_report"},
+    {name:"Daily Report",Rstatus:true,Astatus:false,value:"daily_report"},
+    {name:"Daily Logs",Rstatus:true,Astatus:false,value:"daily_logs"},
+    {name:"Daywise Report",Rstatus:true,Astatus:false,value:"daywise_report"},
+    {name:"Distance Report",Rstatus : true,Astatus:false,value:"distance_report"},
+    {name : "Driver Performance Report",Rstatus : true,Astatus:false,value:"driver_performance_report"},
+    {name : "Geofence Report",Rstatus : true,Astatus:false,value:"geofence_report"},
+    {name :"Idle Report",Rstatus : true,Astatus:false,value:"idle_report"},
+    {name : "Ignition Report",Rstatus : true,Astatus:false,value:"ignition_report"},
+    {name : "Loading Unloading Trip",Rstatus : true,Astatus:false,value:"loading_unloading_trip"},
+    {name : "Notification Center",Rstatus : true,Astatus:false,value:"notification_master"},
+    {name : "Overspeed Report",Rstatus : true,Astatus:false,value:"overspeed_report"},
+    {name : "POI Report",Rstatus : true,Astatus:false,value:"poi_report"},
+    {name : "Route Violation Report",Rstatus : true,Astatus:false,value:"route_violation_report"},
+    {name:"Speed Variation",Rstatus:true,Astatus:false,value:"speed_variation"},
+    {name : "Summary Report",Rstatus : true,Astatus:false,value:"summary_report"},
+    {name : "Stoppage Report",Rstatus : true,Astatus:false,value:"stoppage_report"},
+    {name : "SOS Report",Rstatus : true,Astatus:false,value:"sos_report"},
+    {name:"Trip Report",Rstatus:true,Astatus:false,value:"trip_report"},
+    {name : "Travel Path Report",Rstatus : true,Astatus:false,value:"travel_path_report"},
+    {name : "Working Hours Reports",Rstatus : true,Astatus:false,value:"working_hours_report"},
+    {name : "Maintenance Reports",Rstatus : true,Astatus:false,value:"maintanance_report"},
+
+    // {name :"Fuel Report",Rstatus : true,Astatus:false,value:"fuel_report"},
+    // {name:"Fuel Consumption Report",Rstatus:true,Astatus:false,value:"fuel_consumption_report"},
+    // 
+    // {name : "User Trip Report",Rstatus : true,Astatus:false,value:"user_trip_report"},
+    // {name : "Alert Report",Rstatus : true,Astatus:false,value:"alert_report"}  ,
+  ];
+// ac_report: {Rstatus: false, Astatus: false}
+// alert_report: {Rstatus: false, Astatus: false}
+// daily_report: {Rstatus: false, Astatus: false}
+// daywise_report: {Rstatus: false, Astatus: false}
+// distance_report: {Rstatus: false, Astatus: false}
+// driver_performance_report: {Rstatus: false, Astatus: false}
+// fuel_consumption_report: {Rstatus: false, Astatus: false}
+// fuel_report: {Rstatus: false, Astatus: false}
+// geofence_report: {Rstatus: false, Astatus: false}
+// idle_report: {Rstatus: false, Astatus: false}
+// ignition_report: {Rstatus: false, Astatus: false}
+// loading_unloading_trip: {Rstatus: false, Astatus: false}
+// overspeed_report: {Rstatus: false, Astatus: false}
+// poi_report: {Rstatus: false, Astatus: false}
+// route_violation_report: {Rstatus: false, Astatus: false}
+// sos_report: {Rstatus: false, Astatus: false}
+// speed_variation: {Rstatus: false, Astatus: false}
+// stoppage_report: {Rstatus: false, Astatus: false}
+// summary_report: {Rstatus: false, Astatus: false}
+// travel_path_report: {Rstatus: false, Astatus: false}
+// trip_report: {Rstatus: false, Astatus: false}
+// user_trip_report: {Rstatus: false, Astatus: fals
+
+
+  constructor() { }
+  
+  callMethodOfSecondComponent(value) { 
+    console.log(value);
+    
+    this.invokeEvent.next(value)      
+  }
+  dailyLogs(value){
+     console.log(value);
+     
+    this.invokeEventForDailyLogs.next(value)
+  }
+
+  accReport(value){
+    this.invokeEventForAcReport.next(value)
+  }
+
+  speedVariation(value){
+     this.invokeEventForSpeedVariationReport.next(value);
+
+  }
+  travelPathReport(value){
+     console.log(value)
+     this.invokeEventFortravelPathReportt.next(value)
+   }
+
+  dayWiseReport(value){
+     console.log(value);
+     
+     this.invokeEventForDayWiseReport.next(value)
+  }
+  distanceReport(value){
+     console.log(value);
+     this.invokeEventForDistance.next(value)
+  }
+  geofenceReport(value){
+     console.log(value);
+     this.invokeEventForgeofenceReport.next(value)
+  }
+  idleReport(value){
+     this.invokeEventForidleReport.next(value)
+  }
+   ignitionReport(value){
+     this.invokeEventForignitionReport.next(value)
+  }
+   loadunloadTrip(value){
+     this.invokeEventForloadunloadTrip.next(value)
+  }
+   notificationMaster(value){
+      console.log(value);
+      
+     this.invokeEventFornotificationMaster.next(value)
+  }
+  overspeedReport(value){
+     this.invokeEventForoverspeedReport.next(value)
+  }
+  poiReport(value){
+     this.invokeEventForpoiReport.next(value)
+  }
+  routeViolationReport(value){
+     this.invokeEventForrouteViolationReport.next(value)
+  }
+   summaryReport(value){
+     this.invokeEventForsummaryReport.next(value)
+  }
+  stoppageReport(value){
+     this.invokeEventForstoppageReport.next(value)
+  }
+  sosReport(value){
+     this.invokeEventForsosReport.next(value)
+  }
+   tripReport(value){
+     this.invokeEventFortripReport.next(value)
+  }
+  workingHoursReport(value){
+     this.invokeEventForworkingHoursReport.next(value)
+  }
+  maintanceReport(value){
+     this.invokeEventFormaintanceReport.next(value)
+  }
+  datapushReport(value){
+     this.invokeEventForDataPushReport.next(value)
+  }
+
+   performanceReport(value){
+     this.invokeEventForPerformanceReport.next(value)
+  }
+
+  
+addCustomerFunction(value){
+   this.addCustomer.next(value)
+}
+  openEditJobCard(value){
+     this.JobCard.next(value)
+  }
+
+  downloadDeviceExcel(value){
+     this.deviceExcel.next(value);
+  }
+
+}
diff --git a/src/app/resetpwd/resetpwd.component.html b/src/app/resetpwd/resetpwd.component.html
new file mode 100644
index 0000000..918a107
--- /dev/null
+++ b/src/app/resetpwd/resetpwd.component.html
@@ -0,0 +1,54 @@
+<html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+    
+
+      
+    </head>
+  <body>
+
+      <div class="upper">
+          <md-toolbar>My App</md-toolbar>
+        <md-toolbar flex style="background-color:white;width: 100%;" >
+          
+                <img src="../../assets/image/a.jpg" 
+                style=
+                "width:12%;padding-top: 8px;">
+                
+              <ul fxHide.sm="true" fxHide.xs="true" style="width:50%;padding:30px 10% 0 0;"  fxLayout="row" >
+                           </ul>
+                
+
+             </md-toolbar>
+        </div>    <div id="toast"><div id="desc">{{data_descip}}</div></div>
+
+<br>
+<md-card style="width:40%">
+<h5 style="float:left">Reset Password</h5><br><hr><br>
+    <img src="../../assets/image/forgot.png" 
+    style=
+    "width:35%;"><br>
+    <md-form-field class="example-full-width width" style="width:100%">
+        <input mdInput type="text" [(ngModel)]="email" placeholder="Email ID / Phone Number" name="email" required>
+          <md-error class="pattern">Please Enter Email ID / Phone Number</md-error>
+       </md-form-field>
+       <md-form-field class="example-full-width width" style="width:100%">
+          <input mdInput type="password" [(ngModel)]="npawd" placeholder="New Password" name="npawd" required>
+            <md-error class="pattern">Please Enter Password</md-error>
+         </md-form-field>
+         <md-form-field class="example-full-width width" style="width:100%">
+            <input mdInput type="password" [(ngModel)]="cpawd" placeholder="Re Enter Password" name="cpawd" required>
+              <md-error class="pattern">Please Re Enter Password</md-error>
+           </md-form-field>
+           <br>
+        <div style="padding-left:32%">
+    
+       <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Reset Password" (click)="resetpwd()" />
+        </div>
+        <br><br>
+</md-card>
+
+
+
+    
+  </body>
\ No newline at end of file
diff --git a/src/app/resetpwd/resetpwd.component.scss b/src/app/resetpwd/resetpwd.component.scss
new file mode 100644
index 0000000..12721d8
--- /dev/null
+++ b/src/app/resetpwd/resetpwd.component.scss
@@ -0,0 +1,914 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+
+
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+    
\ No newline at end of file
diff --git a/src/app/resetpwd/resetpwd.component.spec.ts b/src/app/resetpwd/resetpwd.component.spec.ts
new file mode 100644
index 0000000..6158898
--- /dev/null
+++ b/src/app/resetpwd/resetpwd.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ResetpwdComponent } from './resetpwd.component';
+
+describe('ResetpwdComponent', () => {
+  let component: ResetpwdComponent;
+  let fixture: ComponentFixture<ResetpwdComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResetpwdComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResetpwdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/resetpwd/resetpwd.component.ts b/src/app/resetpwd/resetpwd.component.ts
new file mode 100644
index 0000000..01e19fe
--- /dev/null
+++ b/src/app/resetpwd/resetpwd.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+import {ContactService} from '../contact.service';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Route } from '@angular/router/src/config';
+
+@Component({
+  selector: 'app-resetpwd',
+  templateUrl: './resetpwd.component.html',
+  styleUrls: ['./resetpwd.component.scss'],
+  providers:[ContactService]
+})
+export class ResetpwdComponent implements OnInit {
+  email:any;
+  npawd:any;
+  cpawd:any;
+  data_descip:any;
+  devicess:any;
+
+  resetpwd(){
+    console.log("fisifh");
+    if(this.npawd != this.cpawd){
+      this.tost1("notMatch")
+    }
+    else{
+       this.contactService.pwdreset(this.email,this.npawd).subscribe(
+      
+        data => {
+          this.devicess = data 
+          this.tost1("Match")
+        
+
+     
+      
+        }); 
+    }
+  }
+  tost1(divid){
+    if(divid == "notMatch"){
+      this.data_descip = "New Password and Re enter Password do not match";
+      launch_toast();
+    }
+   else if(divid == "Match"){
+    this.data_descip = "Password Succesfully Reset";
+    launch_toast();
+    this.router.navigateByUrl("login");
+   }
+    
+      function launch_toast() {
+       // console.log(divid);
+        var x = document.getElementById("toast")
+        //console.log(x);
+        x.className = "show";
+        setTimeout(function(){ x.className = x.className.replace("show", ""); }, 2500);
+    }
+     }
+  constructor(private contactService:ContactService,private router: Router) { }
+
+  ngOnInit() {
+    
+  }
+
+}
diff --git a/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.html b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.html
new file mode 100644
index 0000000..232681e
--- /dev/null
+++ b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.html
@@ -0,0 +1,146 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Route Plan Report' | translate}}</h4>
+
+    </div>
+  </div>
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3"
+      style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Vehicle:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+      
+              <select style="width: inherit;" id="vehicles" multiple="multiple">
+                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+              </select>
+            
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Route Name:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <select style="width: inherit;" id="routes" multiple="multiple">
+                <option *ngFor="let option_1 of routes" [value]="option_1._id">{{ option_1.name }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Poi:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <select style="width: inherit;" id="poi" multiple="multiple">
+                <option *ngFor="let option_1 of poiArray" [value]="option_1.id">{{ option_1.poiname }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">From:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <!-- from datetime picker -->
+              <input id="from_date" bsDatepicker class="form-control form-control-sm"
+                style="height: 25px; width: 200px;" [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+            </div>
+          </div>
+          <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+
+            <!-- tolabel -->
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">To:</p>
+
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <!-- tolabel picker -->
+              <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px; width: 200px;"
+                [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+            </div>
+          </div>
+
+
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
+
+              <div class="dropdown text-center">
+                <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="search()">{{'Search'
+                  | translate}}</button>
+                <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="dropdown-toggle"
+                  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
+                  aria-expanded="false">
+                  {{ 'Export To' |translate}}
+                </button>
+                <!-- (click)="reportFilter('data')"  (click)="exportExel()" (click)="exportPDF()"-->
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <a style="cursor: pointer;" class="dropdown-item" (click)="exportExcel()"><i
+                      class="far fa-file-excel"></i>
+                    Excel</a>
+                  <a style="cursor: pointer;" class="dropdown-item" (click)="exportPDF()"><i
+                      class="far fa-file-pdf"></i> PDF</a>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+
+
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <!-- <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="loading" *ngIf="Load">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align: left;">{{'Vehicle' | translate}}</th>
+                  <th style="text-align: left;">{{'Route Name' | translate}}</th>
+                  <th style="text-align: left;">{{'Poi' | translate}}</th>
+                  <th style="text-align: left;">{{'Arrival Time' | translate}}</th>
+                  <th style="text-align: left;">{{'Departure Time' | translate}}</th>
+
+
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div> -->
+    <table class="table" style="height: 90vh;">
+      <thead>
+        <tr>
+          <th *ngFor="let header of headerArray">{{header}}</th>
+        </tr>
+
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of mainArray; index as i"> 
+          <td>{{item.data.poiname}}</td> 
+          <td *ngFor="let date of item.data.date">{{date}}</td>
+
+        </tr>
+      </tbody>
+
+    </table>
+
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.scss b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.scss
new file mode 100644
index 0000000..e107ef9
--- /dev/null
+++ b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.scss
@@ -0,0 +1,5 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.spec.ts b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.spec.ts
new file mode 100644
index 0000000..5035938
--- /dev/null
+++ b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewRoutePlanReportComponent } from './new-route-plan-report.component';
+
+describe('NewRoutePlanReportComponent', () => {
+  let component: NewRoutePlanReportComponent;
+  let fixture: ComponentFixture<NewRoutePlanReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NewRoutePlanReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewRoutePlanReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.ts b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.ts
new file mode 100644
index 0000000..bd89df9
--- /dev/null
+++ b/src/app/rout-plan-report/new-route-plan-report/new-route-plan-report.component.ts
@@ -0,0 +1,366 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../../contact.service';
+declare var google: any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+declare var $:any;
+
+@Component({
+  selector: 'app-new-route-plan-report',
+  templateUrl: './new-route-plan-report.component.html',
+  styleUrls: ['./new-route-plan-report.component.scss']
+})
+export class NewRoutePlanReportComponent implements OnInit {
+  headerArray=['Haults']
+  emailid;
+  useridd;
+  options;
+  routes;
+  poiArray=[];
+  from_date =new Date();
+   colorTheme = 'theme-dark-blue';
+  to_date = new Date();
+  Load:boolean=false;
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService:ContactService) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+
+  ngOnInit() {
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.from_date = new Date(fTime);
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.getVehicleData();
+     this.getRouteName();
+     this.getPois();
+     this.testTable();
+  }
+
+  getPois(){
+     this.contactService.get('/poi/getPois?user='+this.useridd).subscribe((res:any)=>{
+
+      var poiObj; 
+
+    for(var i=0;i<res.length;i++){
+      poiObj ={
+          poiname: res[i].poi.poiname,
+          id : res[i]._id,
+          location:res[i].poi.location.coordinates,
+          address:res[i].poi.address
+        }
+
+        this.poiArray.push(poiObj);
+        if(this.poiArray.length==res.length){
+          this.loadropdown();
+
+        }
+    }
+    })
+  }
+
+  getVehicleData(){
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      data => {
+      var devicesss = data
+        this.options = [];
+        for(let i=0;i<devicesss.devices.length;i++){
+            let a ={
+              value : devicesss.devices[i].Device_Name,
+              viewValue:devicesss.devices[i].Device_Name,
+              did:devicesss.devices[i].Device_ID,
+              id:devicesss.devices[i]._id,
+              user:devicesss.devices[i].user,
+              
+            }
+            a['selectedValue'] = devicesss.devices[i]._id ; 
+            this.options.push(a); 
+        }
+          this.loadropdown();
+          let that = this;
+      
+      });
+  }
+
+  getRouteName(){
+    this.contactService.post('/routePlan/get',{user:this.useridd}).subscribe((res:any)=>{
+    // this.contactService.get('/trackRoute/user/'+this.useridd).subscribe((res:any)=>{
+      console.log(res);
+      this.routes=res;
+      this.loadropdown();
+    })
+  }
+
+   loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#vehicles').multipleSelect({
+        width: 200,
+        placeholder: 'Select Vehicle',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#poi').multipleSelect({
+        width: 200,
+        placeholder: 'Select poi',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#routes').multipleSelect({
+        width: 200,
+        placeholder: 'Select route',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+  }
+  reportData=[]
+  routeName;
+  mainArray=[]
+  search(){
+    this.mainArray=[]
+    console.log("IN SEARCH");
+    var diffInMs   = moment(this.to_date).diff(moment(this.from_date), 'days');
+    console.log(diffInMs,"==DIFFRENCE");
+    this.headerArray=["Haults"]
+    if(diffInMs>0){
+      for(var i=0;i<diffInMs;i++){
+        var date=moment(this.from_date, "DD-MM-YYYY").add('days', i)
+        this.headerArray.push(JSON.stringify((moment(date).format('LL'))))
+      }
+    }else{
+      this.headerArray.push(JSON.stringify((moment(this.from_date).format('LL'))))
+    }
+
+    for(var i=0;i<this.poiArray.length;i++){
+      this.mainArray.push({data:{poiname:this.poiArray[i].poiname,id:this.poiArray[i].id,date:[]}})
+      for(var j=1;j<this.headerArray.length;j++){
+        this.mainArray[i].data.date.push('N')
+
+      }
+
+    }
+    // console.log(this.mainArray);
+    
+    
+   var vehicle=$('#vehicles').multipleSelect('getSelects','value');
+    var poi=$('#poi').multipleSelect('getSelects','value');
+    var routes=$('#routes').multipleSelect('getSelects','value');
+    for(var i=0;i<this.routes.length;i++){
+      console.log(routes+"=="+this.routes[i]._id);
+      
+      if(routes==this.routes[i]._id){
+        this.routeName=this.routes[i].name
+      }
+    }
+    var data={
+      vehicle:vehicle,
+      poi:poi,
+      route:routes,
+      user:this.useridd,
+      from:this.from_date,
+      to:this.to_date
+    }
+    console.log(data);
+    this.contactService.post('/RoutePlan/routeReport',data).subscribe((res:any)=>{
+
+      for(var i=0;i<this.poiArray.length;i++){
+        this.mainArray.push({data:{poiname:this.poiArray[i].poiname,date:[]}})
+        for(var j=1;j<this.headerArray.length;j++){
+          for(var k=0;k<res.length;k++){
+            var arrDate=res[k].arrivalTime.split('T');
+            var headerDate=this.headerArray[j].split('T');
+            // console.log(moment(arrDate[0]).isSame(headerDate[0]),(arrDate[0]),"=",(headerDate[0]));
+            
+            if(moment(arrDate[0]).isSame(headerDate[0])){
+            // res[k].arrivalTime==this.headerArray[j]){
+              if(res[k].poi){
+                console.log(res[k].poi._id==this.poiArray[i].id,res[k].poi._id,"==",this.poiArray[i].id);
+                if(res[k].poi._id==this.poiArray[i].id){
+                  if(this.mainArray[i].data.date.length<(this.headerArray.length-1)){
+  
+                    this.mainArray[i].data.date.push('Y')
+                  }
+                }else{
+                  if(this.mainArray[i].data.date.length<(this.headerArray.length-1)){
+  
+                    this.mainArray[i].data.date.push('N')
+                  }
+                }
+
+              }else{
+                if(this.mainArray[i].data.date.length<(this.headerArray.length-1)){
+
+                  this.mainArray[i].data.date.push('N')
+                }
+              }
+            }else{
+                if(this.mainArray[i].data.date.length<(this.headerArray.length-1)){
+
+                  this.mainArray[i].data.date.push('N')
+                }
+            }
+          }
+        }
+      }
+      console.log(this.mainArray);
+      
+    })
+  }
+
+  tabelObj
+  testTable(){
+  const that = this;
+  // console.log("inside function");
+ 
+   $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+       "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            // "rowCallback": function(row: Node, data: any | Object, index: number){
+          ajax: (mainData,callback) => {
+
+             callback({ data:that.reportData});
+      // that.contactService.getRenewalHistory(this.data._id).subscribe(res=>{
+      //   console.log(res);
+      //   that.Load = false;
+      //   if(res.length!=0){
+      //     callback({ data: res[0].data });
+
+      //   }else{
+      //      callback({ data: [] });
+      //   }
+        
+      // })
+
+   
+  },
+   "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {  
+                    console.log(data);
+                                     
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "lat",
+                  "render": function(data, type, row) {   
+                    console.log(that.routeName);
+                                    
+                    return that.routeName?that.routeName: '';                  
+                  }
+              },
+              {
+                  "data": "poi",
+                  "render": function(data, type, row) {                   
+                    return data?data.poi.poiname : '';                  
+                  }
+              },
+              {
+                  "data": "arrivalTime",
+                  "render": function(data, type, row) {                   
+                   return data ? (moment(data).format('llll')) : "";                
+                  }
+              },
+              {
+                  "data": "departureTime",
+                  "render": function(data, type, row) {                   
+                   return data ? (moment(data).format('llll')) : "";                  
+                  }
+              },
+             
+   
+          ],  
+          // "columnDefs": [
+          //   { className: "dt-body-left", "targets": [ 0,1,2,3] },  
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },] , 
+          // order: [[ 3, 'desc' ], [ 0, 'asc' ]]
+      });
+
+  });
+
+}
+
+ exportExcel(){
+   console.log("EXCEL");
+    
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    var tab = table[0];
+  
+	    for(j = 0 ; j < tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+
+  exportPDF(){
+     console.log("PDF");
+    var doc = new jsPDF("p", "pt", "a2");
+   var header = function(data) {
+                      doc.setFontSize(15);
+                      doc.setTextColor(40);
+                      doc.setFontStyle('normal');
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      doc.text("Sales Order", data.settings.margin.left, 50);
+                    };
+
+    doc.autoTable({html:"#deviceTable",margin:{bottom:140,left:30,right:8,top:80},theme:'grid',beforePageContent: header},);
+    doc.save("RoutePlanReport");
+  }
+
+}
diff --git a/src/app/rout-plan-report/rout-plan-report.component.html b/src/app/rout-plan-report/rout-plan-report.component.html
new file mode 100644
index 0000000..328617e
--- /dev/null
+++ b/src/app/rout-plan-report/rout-plan-report.component.html
@@ -0,0 +1,147 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <!-- <i class="fas fa-plus-circle" (click)="addRoute()" mdTooltip="{{'Add route' | translate}}"
+        style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i> -->
+      <h4>{{'Route Plan Report' | translate}}</h4>
+  
+    </div>
+  </div>
+    <div class="row rowStyle">
+      <div class="col-sm-3 col-md-3 col-lg-3"
+        style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+        <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <div class="row" style="margin: 0;">
+              <div class="col-3" style="padding-top: 18px;">
+                <p style="font-weight: 600; color: #a6a6a6;">Vehicle:</p>
+              </div>
+              <div class="col-9" style="padding-top: 18px;">
+              <!-- <div >
+                <div style="width: auto;"> -->
+                  <select style="width: inherit;" id="vehicles" multiple="multiple">
+                    <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+                  </select>
+                <!-- </div>
+              </div> -->
+              </div>
+            </div>
+
+            <div class="row" style="margin: 0;">
+              <div class="col-3" style="padding-top: 18px;">
+                <p style="font-weight: 600; color: #a6a6a6;">Route Plan Name:</p>
+              </div>
+              <div class="col-9" style="padding-top: 18px;">
+                <select style="width: inherit;" id="routes" multiple="multiple">
+                  <option *ngFor="let option_1 of routes" [value]="option_1._id">{{ option_1.name }}</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="row" style="margin: 0;">
+              <div class="col-3" style="padding-top: 18px;">
+                <p style="font-weight: 600; color: #a6a6a6;">Poi:</p>
+              </div>
+              <div class="col-9" style="padding-top: 18px;">
+                <select style="width: inherit;" id="poi" multiple="multiple">
+                  <option *ngFor="let option_1 of poiArray" [value]="option_1.id">{{ option_1.poiname }}</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="row" style="margin: 0;">
+              <div class="col-3" style="padding-top: 18px;">
+                <p style="font-weight: 600; color: #a6a6a6;">From:</p>
+              </div>
+              <div class="col-9" style="padding-top: 18px;">
+                <!-- from datetime picker -->
+                <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px; width: 200px;" [bsConfig]="bsConfig"
+                  [(ngModel)]="from_date" type="text">
+              </div>
+            </div>
+            <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+           
+                <!-- tolabel -->
+              <div class="col-3" style="padding-top: 18px;">
+                <p style="font-weight: 600; color: #a6a6a6;">To:</p>
+             
+              </div>
+              <div class="col-9" style="padding-top: 18px;">
+                <!-- tolabel picker -->
+                <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px; width: 200px;" [bsConfig]="bsConfig"
+                  name="todate" [(ngModel)]="to_date" type="text">
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
+              
+                <div class="dropdown text-center">
+                  <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button  (click)="search()">{{'Search'
+                    | translate}}</button>
+                  <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="dropdown-toggle" type="button"
+                    id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    {{ 'Export To' |translate}}
+                  </button>
+                  <!-- (click)="reportFilter('data')"  (click)="exportExel()" (click)="exportPDF()"-->
+                  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                    <a style="cursor: pointer;" class="dropdown-item" (click)="exportExcel()" ><i class="far fa-file-excel" ></i>
+                      Excel</a>
+                    <a style="cursor: pointer;" class="dropdown-item" (click)="exportPDF()"><i class="far fa-file-pdf" ></i> PDF</a>
+                  </div>
+                </div>
+              
+              </div>
+            </div>
+
+            
+
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-2 col-md-2 col-lg-2" style="padding-left: 5px; padding-right: 20px; padding-top: 5px; height: 90vh;overflow: scroll;">
+        <table>
+          <thead style="position: sticky;background: #e0e0e0; width: 15%;">
+            <tr>
+              <th>Hault Name</th>
+            </tr>
+          </thead>
+          <tbody>
+
+            <tr *ngFor="let item of poiArray"> 
+              <td>{{item.poiname}}</td>
+            </tr>
+          </tbody>
+
+        </table>
+
+      </div>
+      <div class="col-sm-7 col-md-7 col-lg-7" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+        <div class="row">
+          <div class="col-sm-12 col-md-12 col-lg-12">
+            <div class="loading" *ngIf="Load">Loading&#8230;</div>
+            <div style="width: 100%;height:84vh;">
+              <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                  <tr>
+                    <th style="text-align: left;">{{'Vehicle' | translate}}</th>
+                    <th style="text-align: left;">{{'Route Name' | translate}}</th>
+                    <th style="text-align: left;">{{'Hault' | translate}}</th>
+                    <th style="text-align: left;">{{'Arrival Time' | translate}}</th>
+                    <th style="text-align: left;">{{'Departure Time' | translate}}</th>
+                    
+        
+                  </tr>
+                </thead>
+              </table>
+            </div>
+          </div>
+        </div>
+        </div>
+
+  </div>
+
+  </div>
diff --git a/src/app/rout-plan-report/rout-plan-report.component.scss b/src/app/rout-plan-report/rout-plan-report.component.scss
new file mode 100644
index 0000000..e107ef9
--- /dev/null
+++ b/src/app/rout-plan-report/rout-plan-report.component.scss
@@ -0,0 +1,5 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/rout-plan-report/rout-plan-report.component.spec.ts b/src/app/rout-plan-report/rout-plan-report.component.spec.ts
new file mode 100644
index 0000000..ed8c36e
--- /dev/null
+++ b/src/app/rout-plan-report/rout-plan-report.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoutPlanReportComponent } from './rout-plan-report.component';
+
+describe('RoutPlanReportComponent', () => {
+  let component: RoutPlanReportComponent;
+  let fixture: ComponentFixture<RoutPlanReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoutPlanReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoutPlanReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/rout-plan-report/rout-plan-report.component.ts b/src/app/rout-plan-report/rout-plan-report.component.ts
new file mode 100644
index 0000000..c0f143e
--- /dev/null
+++ b/src/app/rout-plan-report/rout-plan-report.component.ts
@@ -0,0 +1,339 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+declare var google: any;
+declare var jsPDF : any;
+import * as moment from 'moment';
+declare var $:any;
+@Component({
+  selector: 'app-rout-plan-report',
+  templateUrl: './rout-plan-report.component.html',
+  styleUrls: ['./rout-plan-report.component.scss']
+})
+export class RoutPlanReportComponent implements OnInit {
+  emailid;
+  useridd;
+  options;
+  routes;
+  poiArray=[];
+  from_date =new Date();
+   colorTheme = 'theme-dark-blue';
+  to_date = new Date();
+  Load:boolean=false;
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService:ContactService) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+
+  ngOnInit() {
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.from_date = new Date(fTime);
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.getVehicleData();
+     this.getRouteName();
+     this.getPois();
+     var that=this;
+
+    $(document).on('change','#routes',function() {
+      var value = $('#routes').val();
+      var poiObj; 
+      that.poiArray=[]
+
+    for(var i=0;i<that.routes.length;i++){
+      if(value==that.routes[i]._id){
+        if(that.routes[i].hault){
+          for(var j=0;j<that.routes[i].hault.length;j++){
+
+            for(var k=0;k<that.poiArray1.length;k++){
+              if(that.poiArray1[k].poiname==that.routes[i].hault[j].poi.poiname)
+              poiObj ={
+                  poiname: that.routes[i].hault[j].poi.poiname,
+                  id : that.poiArray1[k].id,
+                  location:that.routes[i].hault[j].poi.coordinates,
+                  address:that.routes[i].hault[j].poi.address
+                }
+            }
+           
+      
+              that.poiArray.push(poiObj);
+              if((that.routes[i].hault.length-1)==j){
+                that.loadropdown();
+      
+              }
+            
+          }
+
+        }
+       
+
+      }
+    }
+   
+    });
+     this.testTable();
+
+  }
+  poiArray1=[]
+  getPois(){
+     this.contactService.get('/poi/getPois?user='+this.useridd).subscribe((res:any)=>{
+
+      var poiObj; 
+
+    for(var i=0;i<res.length;i++){
+      poiObj ={
+          poiname: res[i].poi.poiname,
+          id : res[i]._id,
+          location:res[i].poi.location.coordinates,
+          address:res[i].poi.address
+        }
+
+        this.poiArray1.push(poiObj);
+        if(this.poiArray1.length==res.length){
+          this.loadropdown();
+
+        }
+    }
+    })
+  }
+
+  getVehicleData(){
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      data => {
+      var devicesss = data
+        this.options = [];
+        for(let i=0;i<devicesss.devices.length;i++){
+            let a ={
+              value : devicesss.devices[i].Device_Name,
+              viewValue:devicesss.devices[i].Device_Name,
+              did:devicesss.devices[i].Device_ID,
+              id:devicesss.devices[i]._id,
+              user:devicesss.devices[i].user,
+              
+            }
+            a['selectedValue'] = devicesss.devices[i]._id ; 
+            this.options.push(a); 
+        }
+          this.loadropdown();
+          let that = this;
+      
+      });
+  }
+
+  getRouteName(){
+    this.contactService.post('/routePlan/get',{user:this.useridd}).subscribe((res:any)=>{
+    // this.contactService.get('/trackRoute/user/'+this.useridd).subscribe((res:any)=>{
+      console.log(res);
+      this.routes=res;
+      this.loadropdown();
+    })
+  }
+
+   loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#vehicles').multipleSelect({
+        width: 200,
+        placeholder: 'Select Vehicle',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#poi').multipleSelect({
+        width: 200,
+        placeholder: 'Select poi',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#routes').multipleSelect({
+        width: 200,
+        placeholder: 'Select route',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+  }
+  reportData=[]
+  routeName
+  search(){
+    console.log("IN SEARCH");
+    
+   var vehicle=$('#vehicles').multipleSelect('getSelects','value');
+    var poi=$('#poi').multipleSelect('getSelects','value');
+    var routes=$('#routes').multipleSelect('getSelects','value');
+    for(var i=0;i<this.routes.length;i++){
+      console.log(routes+"=="+this.routes[i]._id);
+      
+      if(routes==this.routes[i]._id){
+        this.routeName=this.routes[i].name
+      }
+    }
+    var data={
+      vehicle:vehicle,
+      poi:poi,
+      route:routes,
+      user:this.useridd,
+      from:this.from_date,
+      to:this.to_date
+    }
+    console.log(data);
+    this.contactService.post('/RoutePlan/routeReport',data).subscribe((res:any)=>{
+      this.reportData=res;
+      this.tabelObj.ajax.reload()
+    })
+  }
+
+  tabelObj
+  testTable(){
+  const that = this;
+  // console.log("inside function");
+ 
+   $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+       "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            // "rowCallback": function(row: Node, data: any | Object, index: number){
+          ajax: (mainData,callback) => {
+
+             callback({ data:that.reportData});
+      // that.contactService.getRenewalHistory(this.data._id).subscribe(res=>{
+      //   console.log(res);
+      //   that.Load = false;
+      //   if(res.length!=0){
+      //     callback({ data: res[0].data });
+
+      //   }else{
+      //      callback({ data: [] });
+      //   }
+        
+      // })
+
+   
+  },
+   "columns": [
+              {
+                  "data": "device",
+                  "render": function(data, type, row) {  
+                    console.log(data);
+                                     
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "lat",
+                  "render": function(data, type, row) {   
+                    console.log(that.routeName);
+                                    
+                    return that.routeName?that.routeName: '';                  
+                  }
+              },
+              {
+                  "data": "poi",
+                  "render": function(data, type, row) {                   
+                    return data?data.poi.poiname : '';                  
+                  }
+              },
+              {
+                  "data": "arrivalTime",
+                  "render": function(data, type, row) {                   
+                   return data ? (moment(data).format('llll')) : "";                
+                  }
+              },
+              {
+                  "data": "departureTime",
+                  "render": function(data, type, row) {                   
+                   return data ? (moment(data).format('llll')) : "";                  
+                  }
+              },
+             
+   
+          ],  
+          // "columnDefs": [
+          //   { className: "dt-body-left", "targets": [ 0,1,2,3] },  
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },] , 
+          // order: [[ 3, 'desc' ], [ 0, 'asc' ]]
+      });
+
+  });
+
+}
+
+ exportExcel(){
+   console.log("EXCEL");
+    
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    var tab = table[0];
+  
+	    for(j = 0 ; j < tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+
+  exportPDF(){
+     console.log("PDF");
+    var doc = new jsPDF("p", "pt", "a2");
+   var header = function(data) {
+                      doc.setFontSize(15);
+                      doc.setTextColor(40);
+                      doc.setFontStyle('normal');
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      doc.text("Sales Order", data.settings.margin.left, 50);
+                    };
+
+    doc.autoTable({html:"#deviceTable",margin:{bottom:140,left:30,right:8,top:80},theme:'grid',beforePageContent: header},);
+    doc.save("RoutePlanReport");
+  }
+
+}
diff --git a/src/app/route-delete/route-delete.component.html b/src/app/route-delete/route-delete.component.html
new file mode 100644
index 0000000..f6e7b83
--- /dev/null
+++ b/src/app/route-delete/route-delete.component.html
@@ -0,0 +1,14 @@
+<div class="grpStyle">
+  <md-toolbar style="background: white;padding-left: 143px;background: white;
+  color: #676464;
+  font-weight: 500;">{{'Delete route' | translate}}</md-toolbar>
+</div>
+<div style="margin: 10px;">
+<p>{{'Are you sure to delete this route ??' | translate}}</p>
+</div>
+<div>
+<md-dialog-actions>
+  <button md-raised-button (click)="onCloseConfirm()">{{'DELETE' | translate}}</button>&nbsp;
+  <button md-raised-button (click)="onCloseCancel()">{{'CANCEL' | translate}}</button>
+</md-dialog-actions>
+</div>
diff --git a/src/app/route-delete/route-delete.component.scss b/src/app/route-delete/route-delete.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/route-delete/route-delete.component.spec.ts b/src/app/route-delete/route-delete.component.spec.ts
new file mode 100644
index 0000000..d655883
--- /dev/null
+++ b/src/app/route-delete/route-delete.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteDeleteComponent } from './route-delete.component';
+
+describe('RouteDeleteComponent', () => {
+  let component: RouteDeleteComponent;
+  let fixture: ComponentFixture<RouteDeleteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteDeleteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteDeleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-delete/route-delete.component.ts b/src/app/route-delete/route-delete.component.ts
new file mode 100644
index 0000000..e1605f1
--- /dev/null
+++ b/src/app/route-delete/route-delete.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-route-delete',
+  templateUrl: './route-delete.component.html',
+  styleUrls: ['./route-delete.component.scss']
+})
+export class RouteDeleteComponent implements OnInit {
+
+  rteDelete: any;
+  constructor(public thisDialogRef: MdDialogRef<RouteDeleteComponent>,private contactService:ContactService, @Inject(MD_DIALOG_DATA) public data: any) { 
+    this.rteDelete = data.rId;
+    // console.log(this.rteDelete);
+  }
+
+  ngOnInit() {
+    // console.log(this.data.rId);
+    // console.log("Inside route delete component !!!")
+  }
+
+
+onCloseConfirm(){
+
+  // console.log("inalpayloadPoint",this.rteDelete);
+ 
+    this.thisDialogRef.close("success");
+  }
+onCloseCancel(){
+    // console.log("cancel button clicked");
+    this.thisDialogRef.close('Cancel');
+}
+
+}
+
diff --git a/src/app/route-map-add/route-map-add.component.html b/src/app/route-map-add/route-map-add.component.html
new file mode 100644
index 0000000..28c9013
--- /dev/null
+++ b/src/app/route-map-add/route-map-add.component.html
@@ -0,0 +1,223 @@
+<app-all-menus></app-all-menus>
+<div style="float:left; width: 100%; padding-top: 6%;">
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+<!-- <md-card style="opacity: .9;margin-top: 30px;background: #fcfbfb;">
+  <h4 style="float:left;color:#855353">{{'Create Trip' | translate}}</h4>
+  <br>
+  <hr>
+  <div class="row" style="padding:25px;">
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Route name' | translate}}" [(ngModel)]="route">
+        <md-option *ngFor="let route of route_detail_show" [value]="route">
+          {{route.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Select group' | translate}}" [(ngModel)]="grp" (ngModelChange)="getDevName($event)">
+        <md-option *ngFor="let grp of grpName" [value]="grp">
+          {{grp.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Vehicles name' | translate}}" [(ngModel)]="route_1">
+        <md-option *ngFor="let route_1 of deviceName" [value]="route_1">
+          {{route_1.Device_Name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
+      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
+        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="routeRadius" name="devicename" placeholder="{{'Radius (in meter)' | translate}}" required/>
+        <md-error class="required"></md-error>
+      </md-form-field>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left" name="neww" placeholder="{{'Driver name' | translate}}" [(ngModel)]="driverName">
+        <md-option *ngFor="let driverName of driver" [value]="driverName">
+            {{driverName.name}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select style="display: grid;text-align:left;" name="neww" placeholder="{{'Loading site' | translate}}" [(ngModel)]="loading">
+        <md-option *ngFor="let load of geofenceName" [value]="load">
+          {{load.geoname}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;">
+      <md-select  style="display: grid;text-align:left" name="neww" placeholder="{{'Unloading site' | translate}}" [(ngModel)]="unloading">
+        <md-option *ngFor="let unload of geofenceName" [value]="unload">
+          {{unload.geoname}}
+        </md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;" >
+        <span>{{'Start Date/Time' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;" >
+      <span>{{'End Date/Time' | translate}}</span>
+      <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-bottom:10px;text-align:center">
+      <md-form-field style="display:initial;text-align:left;" class="example-full-width width">
+        <input mdInput style="padding-bottom:9px;" type="text" [(ngModel)]="lrNumber" name="lrnumber" placeholder="{{'LR Number' | translate}}" />      
+      </md-form-field>
+    </div>
+    <div class="col-sm-7 col-md-7" style="padding-bottom:10px;padding-top:2%;"> 
+      <md-radio-group style="float:left;" [(ngModel)]="allow_reverse" >
+          <md-radio-button value='1'>{{'One way trip' | translate}}</md-radio-button>
+          <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
+          <md-radio-button value="0">{{'Round trip' | translate}}</md-radio-button>
+        </md-radio-group>
+  </div>
+  </div>
+
+  <div style="padding-top:5%;">
+    <button style=" width: 171px;height: 43px;letter-spacing: 5px;" class="btn btn-primary btn-block/" (click)="saveMap()">{{'SAVE' | translate}}</button>
+  </div>
+  <br>
+  <flash-messages style="float: center;"></flash-messages>
+  </md-card> -->
+  <!-- </div> -->
+
+<!-- 
+<div class ="form-group">   
+  <md-select  name="neww" placeholder="Route name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route">
+    <md-option *ngFor="let route of route_detail_show" [value]="route">
+      {{route.name}}
+    </md-option>
+  </md-select> 
+  <md-select  name="neww" placeholder="Select group" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route">
+    <md-option *ngFor="let grp of grpName" [value]="route">
+       {{grp.name}}
+    </md-option>
+  </md-select> 
+  <md-select  name="neww" placeholder="Vehicles name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="route_1">
+    <md-option *ngFor="let route_1 of deVIceName" [value]="route_1" >
+      {{route_1.Device_Name}}
+    </md-option>
+  </md-select> 
+<md-form-field class="example-full-width width" style="float:left;width: 30%;padding-left:2%">
+ <input mdInput type="text" [(ngModel)]="routeRadius" name="devicename"placeholder="Radius (in meter)" required/> 
+ <md-error class="required"></md-error>
+</md-form-field>
+<md-select  name="neww" placeholder="Driver name" style="float:left;width: 30%;padding-left:2%;padding-top: 13px;" [(ngModel)]="driverName">
+  <md-option *ngFor="let route_1 of route_detail_show" [value]="route_1" >
+  </md-option>
+</md-select> 
+<br><br>
+</div> 
+<div class="row" style="display:inherit">
+  <div class="col-sm-6 col-md-6" style="width: 312px;margin-left: 19px;">
+  <span style="padding-bottom: 5px;">Start Date/Time</span>
+  <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true" ></owl-date-time>
+</div>
+<div class="col-sm-6 col-md-6" style="position:absolute;left:338px;top:180px;width: 315px;">
+  <span>End Date/Time</span>
+  <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+</div>
+</div>
+<div style="padding-top:5%;"> 
+    <button class="btn btn-primary btn-block/"(click)="saveMap()" style="cursor:pointer;width: 159px;height: 44px;">SAVE</button>
+</div><br>
+<flash-messages style="float: center;"></flash-messages>  -->
+<flash-messages style="float: center;"></flash-messages>
+<div class="card m-4 p-2">
+  <div class="card-header">
+    <h3>Add Trip</h3>
+  </div>
+  <div class="card-body" style="height: 70vh;">
+    <!-- <div class="row" style="padding:25px;">
+      <div class="col-sm-4 col-md-4" style="padding-bottom:10px;"> -->
+    <form class="form" [formGroup]="tripForm" (ngSubmit)="Submit()">
+      <div class="row">
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Route Name</label>
+        <select class="form-control" placeholder="Enter Route Name" formControlName="routeName">
+          <option disabled selected value="">Select Route Name</option>
+            <option *ngFor="let route of route_detail_show" [value]="route._id">
+              {{route.name}}
+            </option>
+        </select>
+        <!-- <input type="text" class="form-control" placeholder="Enter Route Name" formControlName="routeName">  -->
+      </div>
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Vehicle Name</label>
+        <select class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName">
+          <option disabled selected value="">Select Vehicle Name</option>
+            <option *ngFor="let route_1 of devices" [value]="route_1._id">
+              {{route_1.Device_Name}}
+            </option>
+        </select>
+        <!-- <input type="text" class="form-control" placeholder="Enter Vehicle Name" formControlName="vehicleName"> -->
+      </div>
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Driver Name</label>
+        <input type="text" class="form-control" placeholder="Enter Driver Name" formControlName="driverName">
+      </div>
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Loading Site</label>
+        <select class="form-control" formControlName="loadingSite">
+          <option disabled selected value="">Select Loading Site</option>
+          <option *ngFor="let load of geofenceName" [value]="load._id">
+            {{load.geoname}}
+          </option>
+        </select>
+
+        <!-- <input type="text" class="form-control" formControlName="loadingSite"> -->
+      </div>
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Unloading Site</label>
+        <select class="form-control" formControlName="unloadingSite">
+          <option disabled selected value="">Select UnLoading Site</option>
+          <option *ngFor="let unload of geofenceName" [value]="unload._id">
+            {{unload.geoname}}
+          </option>
+        </select>
+        <!-- <input type="text" class="form-control" formControlName="unloadingSite"> -->
+      </div>
+
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>Start Date/Time</label>
+        <owl-date-time class="form-control datep" formControlName="startTime" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true">
+        </owl-date-time>
+        <!-- <input type="text" class="form-control" formControlName="startTime"> -->
+      </div>
+
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>End Date/Time</label>
+        <owl-date-time class="form-control datep" formControlName="endTime" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'"
+          [autoClose]="true">
+        </owl-date-time>
+        <!-- <input type="text" class="form-control" formControlName="endTime"> -->
+      </div>
+
+      <div class="col-sm-4 col-md-4 mt-2">
+        <label>LR Number</label>
+        <input type="text" class="form-control" formControlName="lrNumber">
+      </div>
+
+      <div class="col-sm-4 col-md-4 mt-2">
+        <md-radio-group formControlName="allow_reverse">
+          <md-radio-button style="margin-top: 39px;" value='1'>{{'One way trip' | translate}}</md-radio-button>
+          <md-radio-button value="2">{{'Two way trip' | translate}}</md-radio-button>
+          <md-radio-button value="0">{{'Round trip' | translate}}</md-radio-button>
+        </md-radio-group>
+      </div>
+      </div>
+      <div class="card-footer text-center mt-4">
+        <button type="submit" class="btn btn-primary btn-md">Save</button>
+      </div>
+
+
+    </form>
+  </div>
+
+</div>
+
+
+</div>
\ No newline at end of file
diff --git a/src/app/route-map-add/route-map-add.component.scss b/src/app/route-map-add/route-map-add.component.scss
new file mode 100644
index 0000000..90155b7
--- /dev/null
+++ b/src/app/route-map-add/route-map-add.component.scss
@@ -0,0 +1,1070 @@
+::-webkit-scrollbar {
+  display: none;
+}
+
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: "";
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+  -ms-transform: rotate(30deg);
+  transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+  -ms-transform: rotate(60deg);
+  transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+  -ms-transform: rotate(120deg);
+  transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+  -ms-transform: rotate(150deg);
+  transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+  -ms-transform: rotate(210deg);
+  transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+  -ms-transform: rotate(240deg);
+  transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+  -ms-transform: rotate(300deg);
+  transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+  -ms-transform: rotate(330deg);
+  transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%,
+  39%,
+  100% {
+    opacity: 0;
+  }
+  40% {
+    opacity: 1;
+  }
+}
+#active {
+  text-decoration-line: underline;
+  text-decoration-color: rgb(66, 26, 245);
+}
+#d:hover {
+  color: rgb(14, 102, 18);
+}
+#ac {
+  color: rgb(38, 38, 90);
+}
+ul,
+li {
+  list-style: none;
+  float: left;
+  line-height: 15vh;
+}
+.upper {
+  margin-top: -70px;
+  width: 100%;
+  height: 15%;
+  /* margin-left: -2px;*/
+  position: fixed;
+  background-color: white;
+  top: 0;
+  z-index: 1;
+}
+.up {
+  color: gray;
+  /* Add a font */
+
+  /* Set the font-size to 25 pixels */
+  font-size: 25px;
+}
+.middle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  margin-left: -220px;
+  margin-top: -20px;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.desc {
+  padding: 15px;
+  text-align: center;
+}
+#insert {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+#insert2 {
+  margin-left: 8px;
+  margin-top: -15px;
+  text-shadow: 20px;
+}
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+.vertical-menu {
+  width: 250px;
+  padding-left: 10px;
+}
+
+.vertical-menu a {
+  background-color: #eee;
+  color: black;
+  display: block;
+  padding: 12px;
+  text-decoration: none;
+}
+
+.vertical-menu a:hover {
+  background-color: #ccc;
+}
+
+.vertical-menu a.active {
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+}
+// #c2 {
+
+// }
+#c1 {
+  float: left;
+}
+
+body {
+  margin: 0;
+}
+
+.icon-bar {
+  width: 17%;
+  /*     background-color: #555; */
+  background-color: #18262f;
+  margin-top: -9px;
+  height: 100%;
+  position: fixed;
+  display: inline-block;
+  margin-left: -16px;
+}
+@media screen and (max-width: 1000px) {
+  .off {
+    display: none;
+  }
+}
+.icon-bar2 {
+  width: 299px;
+  background-color: white;
+  margin-top: -7px;
+  height: 86vh;
+  position: fixed;
+}
+.icon-bar a {
+  display: block;
+  text-align: center;
+  padding: 16px;
+  transition: all 0.3s ease;
+  color: white;
+  font-size: 14px;
+  text-align: left;
+}
+
+.icon-bar a:hover {
+  background-color: #000;
+}
+
+.active {
+  background-color: #4caf50 !important;
+}
+.iphone {
+  width: 201px;
+  height: 378px;
+  background: #f9f7f9;
+  border: 5px solid #c1bfc1;
+  border-radius: 45px;
+  opacity: 0.8;
+}
+.highlight {
+  width: 185px;
+  height: 366px;
+  border: 3px solid #fff;
+  border-radius: 45px;
+  position: relative;
+  z-index: 10;
+  top: -748px;
+  left: 10px;
+}
+.circle {
+  width: 7px;
+  height: 7px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -370px;
+  left: 92px;
+}
+.camera {
+  width: 10px;
+  height: 10px;
+  background: #333;
+  border-radius: 50%;
+  position: relative;
+  top: -376px;
+  left: 66px;
+}
+.speaker {
+  width: 59px;
+  height: 3px;
+  background: #333;
+  border-radius: 5px;
+  position: relative;
+  top: -372px;
+  left: 73px;
+}
+.screen {
+  width: 166px;
+  height: 255px;
+  border: 3px solid #333;
+  border-radius: 5px;
+  position: relative;
+  left: 18px;
+  top: -365px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+  width: 47px;
+  height: 47px;
+  background: #fff;
+  border-radius: 50%;
+  position: relative;
+  top: -353px;
+  left: 79px;
+  z-index: 2;
+}
+.home2 {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  position: relative;
+  top: -403px;
+  left: 77px;
+  background: #7f8282;
+  background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+  background: -o-linear-gradient(#e2e3e4, #7f8282);
+  background: -moz-linear-gradient(#e2e3e4, #7f8282);
+  background: linear-gradient(#e2e3e4, #7f8282);
+}
+#c2 {
+  //background:green;
+  float: right;
+}
+#c1,
+#c2 {
+  width: 33%;
+  //background: rebeccapurple
+}
+
+#c3 {
+  width: auto;
+  width: 34%;
+  // background: red
+}
+.off {
+  margin: auto;
+  width: 60%;
+  top: 70%;
+  padding: 10px;
+  margin-right: 30%;
+}
+.newspaper {
+  -webkit-column-count: 2; /* Chrome, Safari, Opera */
+  -moz-column-count: 2; /* Firefox */
+  column-count: 2;
+  -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+  -moz-column-gap: 40px; /* Firefox */
+  column-gap: 40px;
+  align-content: left;
+  text-align: left;
+}
+#demo {
+  margin: 30px 0 50px 0;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+}
+
+#demo .wrapper {
+  display: inline-block;
+  width: 180px;
+  margin: 0 10px 0 0;
+  height: 20px;
+  position: relative;
+}
+
+#demo .parent {
+  height: 100%;
+  width: 100%;
+  display: block;
+  cursor: pointer;
+  line-height: 30px;
+  height: 30px;
+  border-radius: 5px;
+  background: #f9f9f9;
+  border: 1px solid #aaa;
+  border-bottom: 1px solid #777;
+  color: #282d31;
+  font-weight: bold;
+  z-index: 2;
+  position: relative;
+  -webkit-transition: border-radius 0.1s linear, background 0.1s linear,
+    z-index 0s linear;
+  -webkit-transition-delay: 0.8s;
+  text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+  background: #fff;
+  -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  z-index: 0;
+}
+
+#demo .content {
+  position: absolute;
+  top: 0;
+  display: block;
+  z-index: 1;
+  height: 0;
+  width: 180px;
+  padding-top: 30px;
+  -webkit-transition: height 0.5s ease;
+  -webkit-transition-delay: 0.4s;
+  border: 1px solid #777;
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+#demo .wrapper:active .content {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+  height: 123px;
+  z-index: 3;
+  -webkit-transition-delay: 0s;
+}
+
+#demo .content ul {
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+  text-decoration: none;
+}
+
+#demo .content li:hover {
+  background: #eee;
+  color: #333;
+}
+
+#demo .content li {
+  list-style: none;
+  text-align: left;
+  color: #888;
+  font-size: 14px;
+  line-height: 30px;
+  height: 30px;
+  padding-left: 10px;
+  border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.customClass {
+  background-color: #dd3;
+  border-radius: 5px;
+  margin: 5px;
+  width: 500px;
+}
+
+.customClass .img-ul-upload {
+  background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+  background-color: #b819bb !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+  color: purple !important;
+}
+
+.customClass .img-ul-container {
+  background-color: #ff6cad !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+  padding: 16px;
+  height: 201px !important;
+}
+.weekDays-selector input {
+  display: none !important;
+}
+
+.weekDays-selector input[type="checkbox"] + label {
+  display: inline-block;
+  border-radius: 6px;
+  background: #dddddd;
+  height: 40px;
+  width: 34.2px;
+  margin-right: 3px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.weekDays-selector input[type="checkbox"]:checked + label {
+  background: #2ad705;
+  color: #ffffff;
+}
+@media screen and (max-width: 900px) {
+  .icon-bar {
+    display: none;
+  }
+  .sch {
+    display: none;
+  }
+  .first {
+    width: 1% !important;
+  }
+  .second {
+    margin-left: 8px !important;
+  }
+  .small {
+    display: block !important;
+  }
+  .image {
+    display: none;
+  }
+  .schlar {
+    display: block !important;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .schlar {
+    display: none;
+  }
+}
+.small {
+  display: none;
+}
+.first {
+  float: left;
+  width: 16%;
+  height: 86vh;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  margin-right: 5px;
+}
+.second {
+  width: 88%;
+  height: 86vh;
+  margin-left: 171px;
+}
+.mat-dialog-container {
+  max-width: none !important;
+}
+.sch {
+}
+.schlar {
+}
+.pointer {
+  cursor: pointer !important;
+  font-size: 11px;
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -9px;
+  position: absolute;
+  left: -80px;
+  transition: 0.3s;
+  width: 100px;
+  text-decoration: none;
+  font-size: 28px;
+  color: white;
+  border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+  left: 0;
+}
+
+#about {
+  top: 20px;
+  background-color: #ffffff;
+  opacity: 0.4;
+}
+
+#blog {
+  top: 80px;
+  background-color: #18262f;
+}
+
+#projects {
+  top: 140px;
+  background-color: #f44336;
+}
+
+#contact {
+  top: 200px;
+  background-color: #555;
+}
+
+.expansion-panel__content {
+  margin-left: 0% !important;
+}
+
+.button2 {
+  background-color: #008cba;
+}
+.ngx-picker--btn {
+  color: #000;
+  background-color: transparent;
+  border: none;
+  padding: 1em;
+  font-size: 1em;
+}
+.ngx-picker--btn__selected {
+  background-color: #eee;
+}
+.ngx-picker--btn:hover {
+  transition: 0.25s ease;
+  background-color: #eee;
+  cursor: pointer;
+}
+.ngx-picker--btn:focus {
+  outline-color: transparent;
+}
+
+.ngx-picker--btn__month:hover {
+  border-top-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__done:hover {
+  border-bottom-right-radius: 0.2em;
+}
+
+.ngx-picker--btn__now:hover {
+  border-bottom-left-radius: 0.2em;
+}
+
+.ngx-picker--btn__next:hover {
+  border-top-right-radius: 0.2em;
+}
+
+.calendar {
+  position: absolute;
+  background-color: #e6e6e6;
+  max-width: 16em;
+  min-width: 16em;
+  font-size: 16px;
+  font-family: "Arial", sans-serif;
+  border-radius: 0.2em;
+  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
+}
+
+.calendar--previous-and-next {
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.calendar--footer {
+  display: flex;
+  justify-content: space-between;
+  background-color: #e6e6e6;
+  padding: 0;
+  border-radius: 0.2em;
+}
+
+.calendar--years-select,
+.calendar--months-select {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 14.85em;
+  background-color: #fff;
+  width: 100%;
+}
+
+.calendar--year,
+.calendar--month {
+  display: block;
+  padding: 0.5em 1em;
+  width: 100%;
+  overflow: hidden;
+  color: #000;
+}
+.calendar--year__selected,
+.calendar--month__selected {
+  color: #000;
+  font-weight: bold;
+  background-color: #eee;
+}
+.calendar--year:hover,
+.calendar--month:hover {
+  cursor: pointer;
+  background-color: #eee;
+  font-weight: 400;
+  color: #000;
+}
+
+.calendar--days-of-week {
+  display: flex;
+  justify-content: space-around;
+  background-color: #eee;
+}
+
+.calendar--day-of-week {
+  position: relative;
+  padding: 0.5em;
+  text-align: center;
+  text-transform: uppercase;
+  color: #000;
+  font-size: 0.9em;
+}
+
+.calendar--days-select {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.calendar--day {
+  text-align: center;
+  width: 1.285em;
+  padding: 0.5em;
+  font-weight: 500;
+  color: #000;
+}
+.calendar--day__muted {
+  color: #999;
+}
+.calendar--day__selected {
+  background-color: #eee;
+  color: #000;
+}
+.calendar--day:hover {
+  cursor: pointer;
+  color: #000;
+  background-color: #eee;
+}
+
+.ngx-picker {
+  display: flex;
+  position: relative;
+}
+.ngx-picker .calendar {
+  position: absolute;
+  left: 0;
+  top: 2.5em;
+  z-index: 3;
+}
+
+.time-picker {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #e6e6e6;
+}
+
+.time--values {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 16em;
+  min-width: 16em;
+  background-color: #eee;
+}
+
+.time--value {
+  width: 2.66em;
+  font-size: 1em;
+  padding: 0.5em 0;
+  text-align: center;
+  color: #000;
+}
+.time--value__selected {
+  color: #000;
+  background-color: #e6e6e6;
+}
+.time--value:hover {
+  transition: 0.25s ease;
+  cursor: pointer;
+  background-color: #e6e6e6;
+}
+
+[hidden] {
+  display: none !important;
+}
+#c11 {
+  width: 25%;
+  float: left;
+}
+#c22 {
+  width: 25%;
+  float: left;
+}
+#c33 {
+  width: 25%;
+  float: left;
+}
+#c44 {
+  width: 25%;
+  float: left;
+}
+#c111 {
+  width: 50%;
+  float: left;
+}
+#c222 {
+  width: 45%;
+  float: left;
+}
+#c333 {
+  width: 5%;
+  float: left;
+}
+/* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: "";
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: "";
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0,
+    rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0,
+    rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+.headStyle {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 500;
+  margin-top: 10px;
+  color: #6b6a6a;
+}
+
+.InputStyle {
+  padding: 10px;
+  background-color: #efefef;
+  margin-bottom: 10px;
+  .selecStyle {
+    display: inherit;
+    width: 56%;
+    padding-left: 16px;
+    margin-left: 50px;
+
+    border-radius: 10px;
+  }
+}
+
+/deep/ .mat-menu-panel.test {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  a {
+    display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+  }
+}
+
+/deep/ .mat-menu-panel.test_1 {
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+  margin-top: 48px;
+}
+
+.owl-datetime-main-input {
+  border: none !important;
+}
diff --git a/src/app/route-map-add/route-map-add.component.spec.ts b/src/app/route-map-add/route-map-add.component.spec.ts
new file mode 100644
index 0000000..2297365
--- /dev/null
+++ b/src/app/route-map-add/route-map-add.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteMapAddComponent } from './route-map-add.component';
+
+describe('RouteMapAddComponent', () => {
+  let component: RouteMapAddComponent;
+  let fixture: ComponentFixture<RouteMapAddComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteMapAddComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteMapAddComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-map-add/route-map-add.component.ts b/src/app/route-map-add/route-map-add.component.ts
new file mode 100644
index 0000000..8d2b6bf
--- /dev/null
+++ b/src/app/route-map-add/route-map-add.component.ts
@@ -0,0 +1,549 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-route-map-add',
+  templateUrl: './route-map-add.component.html',
+  styleUrls: ['./route-map-add.component.scss']
+})
+export class RouteMapAddComponent implements OnInit {
+  grpName: any;
+  before:any;
+  logoutbut:boolean;
+  cust:boolean=false;
+  logo:any;
+  text:any;
+  fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+  showImage:any;
+  groups=[];
+  group_info:any;
+  myInput:any;
+  deviceId:any;
+  device_update:any;
+  superAdmin:Boolean = false;
+  route_detail_show=[];
+  route:any;
+  route_1:any;
+  Fromdate=new Date();
+  todate=new Date();
+  routeRadius:any;
+  driverName:any;
+  Load:any;
+  lrNumber:any;
+  grp:any;loading:any;unloading:any;
+  oneWayTrip:any;
+  roundTrip:any;
+  allow_reverse:any;
+  startDate= new Date();
+  endDate= new Date();
+  tripForm:FormGroup;
+  devices=[]
+  Device_Name: any;
+  routeName: any;
+  constructor(private router: Router,private fb:FormBuilder,private contactService: ContactService,private _flashMessagesService: FlashMessagesService) { 
+  
+  }
+
+
+
+  ngOnInit() {
+
+    this.tripForm=this.fb.group({
+      routeName:[''],
+      vehicleName:[''],
+      driverName:[''],
+      loadingSite:[''],
+      unloadingSite:[''],
+      startTime:[''],
+      endTime:[''],
+      lrNumber:[''],
+      allow_reverse:['']
+    })
+
+    
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];  
+    window.localStorage['DataUpdate'] = 'Tthis.rue'
+     
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    
+    
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+     
+     this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+     //  console.log('testing',this.useridd);
+     if(this.custtype == true){
+       this.cust = true;
+      }  
+      
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+      if( window.localStorage['Custumer'] == 'ON'){
+        this.logoutbut = false
+        this.dealer = true
+      }
+      else{
+        this.logoutbut = true
+      }
+      
+      this.getVehicles()
+      
+  this.getRouteMap();
+  this.getGrp();
+  this.getDriverDetail();
+       this.contactService.getallgeofence(this.useridd)
+    .subscribe(res=>{
+      this.geofenceName =res;
+      // console.log(res);
+    })
+
+  }
+
+  mydealer(){
+    // console.log('Dealer')
+  }
+
+  myaccount(){
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  }
+
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+
+	 Ddetail(){
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel(){
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType(){
+    this.router.navigateByUrl("VehicleType");
+  }
+  
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  }
+
+  logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+  
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+  new(){
+    this.router.navigateByUrl("new");
+    
+  }
+  
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+  cond:Boolean = false;
+point : any = 0;
+ aa(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+
+
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+vehicleRoute(){
+  this.cond = false
+  this.router.navigateByUrl("vehicleRoute");
+}
+
+driverPerformance(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+
+
+
+
+distance_report(){
+this.cond = false
+this.router.navigateByUrl("device-report/distance_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+
+addRoute(){
+  this.cond = false
+  this.router.navigateByUrl("setRoute");
+}
+
+saveRoute(){
+  this.cond = false
+  this.router.navigateByUrl('vehicleRoute');
+}
+
+
+addcus(){
+  localStorage.removeItem('mapLoad_ID')
+  this.router.navigateByUrl("add");
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+
+addRouteMap(){
+  this.cond = false
+  this.router.navigateByUrl("addRouteMap");
+
+}
+
+notification(){
+  this.cond = false
+  this.router.navigateByUrl("notifications");
+}
+
+// Route map method
+
+getRouteMap(){
+  // console.log("Mapping history !!!");
+  this.contactService.getRouteDetail(this.useridd)
+  .subscribe(res=>{
+    // console.log("routedet",res);
+    this.route_detail_show=res;
+  })
+  
+}
+
+
+// get group method 
+getGrp(){
+  this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      // console.log(res);     
+      this.grpName = res["group_details"];
+      // console.log(this.grpName);  
+    })
+}
+
+
+
+driver:any;
+getDriverDetail(){
+ 
+  this.contactService.getRouteDriver(this.useridd)
+  .subscribe(res=>{
+    this.driver=res;
+    // console.log("abcd",this.driver);
+   
+  })
+}
+
+deviceName:any;
+geofenceName:any;
+groupId:any;
+getDevName(grpId){
+  var grpVehiclePayload= grpId._id;
+  this.groupId = grpVehiclePayload;
+
+  this.contactService.getVehDetail(grpVehiclePayload)
+    .subscribe(res=>{
+      this.deviceName = res;
+      // console.log(this.deviceName);
+   
+    })
+
+   this.contactService.getallgeofence(this.useridd)
+    .subscribe(res=>{
+      this.geofenceName =res;
+      // console.log(res);
+    })
+}
+
+
+round_trip:boolean;
+saveMap(){
+//  console.log(this.allow_reverse);
+//  if(this.allow_reverse==1){
+//   this.round_trip=false;
+//  }else if (this.allow_reverse==2){
+//    this.round_trip=true;
+//  }
+ 
+ var startTime = this.Fromdate.getTime();
+ var endTime = this.todate.getTime();
+
+ if(this.route == undefined)
+ {
+   
+  this._flashMessagesService.show('Error : Please select route', { cssClass: 'alert-danger', timeout: 2000 });
+  
+ }else if(this.grp==undefined){
+  this._flashMessagesService.show('Error : Please select group', { cssClass: 'alert-danger', timeout: 2000 });
+  
+ }else if(this.route_1==undefined){
+  this._flashMessagesService.show('Error : Please select Device', { cssClass: 'alert-danger', timeout: 2000 });
+  
+ }else if((this.routeRadius==undefined)||(this.routeRadius==null)){
+  this._flashMessagesService.show('Error : Radius is mendatory', { cssClass: 'alert-danger', timeout: 2000 });
+  
+ }
+//  else if(this.driverName==undefined){
+//   this._flashMessagesService.show('Error : Please select driver name', { cssClass: 'alert-danger', timeout: 2000 });
+  
+//  }
+ else if(startTime>endTime){
+  this._flashMessagesService.show('Error : Start date should not greater than end date', { cssClass: 'alert-danger', timeout: 2000 });
+ }else if(this.loading == undefined){
+  this._flashMessagesService.show('Error : Please select loading', { cssClass: 'alert-danger', timeout: 2000 });
+ }else if(this.unloading == undefined){
+  this._flashMessagesService.show('Error : Please select unloading', { cssClass: 'alert-danger', timeout: 2000 });
+ }else if(this.allow_reverse==undefined){
+  this._flashMessagesService.show('Error : Please select trip', { cssClass: 'alert-danger', timeout: 2000 });
+ }else{
+
+  var all_rev = 0;
+  all_rev = this.allow_reverse
+  var routeMapadd = {
+  "route": this.route._id,
+  "device":this.route_1._id,
+  "radius" : this.routeRadius,
+  "user": this.useridd,
+  "expiresOn":this.todate,
+  "tripType": all_rev,
+  "routeName" : this.route.name,
+  "deviceName" :this.route_1.Device_Name,
+  "poi":[],
+  "vehicleGroup":this.groupId,
+  "startsOn":this.Fromdate,
+ 
+  "startSite": this.loading._id,
+  "endSite" : this.unloading._id
+ }
+
+ if(this.lrNumber){
+   routeMapadd['lrNumber'] = this.lrNumber;
+ }
+
+ if(this.driverName){
+  routeMapadd['driver'] = this.driverName._id;
+}
+
+
+    this.contactService.addRouteMap(routeMapadd)
+      .subscribe(res=>{
+        // console.log(res);
+        this._flashMessagesService.show('Trip route saved', { cssClass: 'alert-success', timeout: 2000 });
+      },err=>{   
+        if(err.status == 400){
+       
+          var a = JSON.parse(err._body);
+          var b = a.message;
+          this._flashMessagesService.show(b, { cssClass: 'alert-success', timeout: 2000 });
+        }  
+     
+        if(err.status ==500){
+          this._flashMessagesService.show('Error : Internal server error, Please try after sometime', { cssClass: 'alert-danger', timeout: 2000 });
+        }
+      })
+ }
+}
+
+getVehicles(){
+  this.contactService.getDevice(this.emailid,this.useridd).subscribe((res:any)=>{
+    this.devices=res.devices
+  })
+
+  
+}
+
+Submit(){
+  console.log(this.tripForm.value.vehicleName);
+  
+  if(this.tripForm.value.vehicleName=="" || this.tripForm.value.vehicleName==undefined){
+    this._flashMessagesService.show('Error : Please select Device', { cssClass: 'alert-danger', timeout: 2000 });
+    
+  }else if(this.tripForm.value.startTime==undefined || this.tripForm.value.startTime==""){
+      this._flashMessagesService.show('Error : Please Select Start Time', { cssClass: 'alert-danger', timeout: 2000 });
+  } 
+  else if(this.tripForm.value.endTime==undefined || this.tripForm.value.endTime==""){
+      this._flashMessagesService.show('Error : Please select End Time', { cssClass: 'alert-danger', timeout: 2000 });
+  }
+  
+  else if(startTime>endTime){
+    this._flashMessagesService.show('Error : Start date should not greater than end date', { cssClass: 'alert-danger', timeout: 2000 });
+  }if(this.tripForm.value.allow_reverse==undefined ||this.tripForm.value.allow_reverse==""){
+    this._flashMessagesService.show('Error : Please select trip', { cssClass: 'alert-danger', timeout: 2000 });
+  }else{
+    
+    var startTime = this.tripForm.value.startTime.getTime();
+    var endTime = this.tripForm.value.endTime.getTime();
+  var all_rev = 0;
+  all_rev = this.allow_reverse;
+  for(var i=0;i<this.devices.length;i++){
+    if(this.tripForm.value.vehicleName==this.devices[i]._id){
+      this.Device_Name=this.devices[i].Device_Name
+    }
+  }
+
+  for(var i=0;i<this.route_detail_show.length;i++){
+    if(this.tripForm.value.routeName==this.route_detail_show[i]._id){
+      this.routeName=this.route_detail_show[i].name
+    }
+  }
+
+  var routeMapadd = {
+  // "route": this.tripForm.value.routeName,
+  "device":this.tripForm.value.vehicleName,
+  // "radius" : this.routeRadius,
+  "user": this.useridd,
+  "expiresOn":this.tripForm.value.endTime,
+  "tripType": this.tripForm.value.allow_reverse,
+  "routeName" : this.routeName,
+  "deviceName" :this.Device_Name,
+  "poi":[],
+  // "vehicleGroup":this.groupId,
+  "startsOn":this.tripForm.value.startTime,
+ 
+  // "startSite": this.loading._id,
+  // "endSite" : this.unloading._id
+ }
+  if(this.tripForm.value.routeName){
+   routeMapadd['route'] = this.tripForm.value.routeName;
+   routeMapadd['routeName'] = this.routeName
+ }
+ if(this.tripForm.value.loadingSite){
+   routeMapadd['startSite'] = this.tripForm.value.loadingSite
+ }
+
+  if(this.tripForm.value.unloadingSite){
+   routeMapadd['endSite'] = this.tripForm.value.unloadingSite
+ }
+
+ if(this.tripForm.value.lrNumber){
+   routeMapadd['lrNumber'] = this.tripForm.value.lrNumber;
+ }
+
+ if(this.tripForm.value.driverName){
+  routeMapadd['driver'] = this.tripForm.value.driverName
+}
+
+ console.log('Allow reverse',routeMapadd);
+    this.contactService.addRouteMap(routeMapadd)
+      .subscribe(res=>{
+        // console.log(res);
+        this._flashMessagesService.show('Trip route saved', { cssClass: 'alert-success', timeout: 2000 });
+        this.router.navigateByUrl('routeMapping');
+      },err=>{   
+        if(err.status == 400){
+       
+          var a = JSON.parse(err._body);
+          var b = a.message;
+          this._flashMessagesService.show(b, { cssClass: 'alert-success', timeout: 2000 });
+        }  
+     
+        if(err.status ==500){
+          this._flashMessagesService.show('Error : Internal server error, Please try after sometime', { cssClass: 'alert-danger', timeout: 2000 });
+        }
+      })
+ }
+  
+}
+
+}
diff --git a/src/app/route-mapping/route-mapping.component.html b/src/app/route-mapping/route-mapping.component.html
new file mode 100644
index 0000000..7b221f9
--- /dev/null
+++ b/src/app/route-mapping/route-mapping.component.html
@@ -0,0 +1,88 @@
+
+
+      <app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+<div class="route">
+    <p class="headStyle">{{'Manage Trips' | translate}}</p>
+  <div class="row">
+    <div class="col-sm-2 col-md-2" style="text-align:center;padding: 16px;">
+        <button md-raised-button color="blue" style="background: white;
+        border-radius: 0px;box-shadow: 0px 0px white;  
+        min-width: 0;" (click)="addRoute()">
+            <md-icon style="color:black">add</md-icon>          
+        </button>
+    </div>
+    <div class="col-sm-4 col-md-4" style="padding-top:19px">
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;text-align:center"></flash-messages>
+    </div>
+ 
+    <div class="col-sm-4 col-md-4" style="padding-top:19px">       
+      <div style="float: right;padding-right: 1%;">
+        <input  style="border-radius: 6px;
+        border: 1px solid #c7c7c7;
+        padding: 12px;
+        width: 175px;
+        height: 7px;
+        background-color: red;
+        font-size: 12px;
+        background: #fffcfc;" type="search" id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "{{'Device Search' | translate}}"/>
+      </div>  
+    </div>
+    <div class=col-sm-2 style="margin-top:20px;">
+      <button style="background-color: #427942;border: white;" class="btn btn-primary w3-button/" (click)="exportExcel()">Export to excel</button>       
+    </div>
+  </div>
+  </div>
+  <table id='test_route' class="table table-striped table-hover" style="overflow-y: hidden;
+  overflow-x: hidden;font-size:12px">
+<thead style="background-color:#A2C523;color: white;">
+  <tr>
+  <th>{{'Route name' | translate}}</th>
+  <th>{{'Vehicle name' | translate}}</th>
+  <th>{{'LR Number' | translate}}</th>
+  <th>{{'Driver' | translate}}</th>
+  <!-- <th >{{'Loading site' | translate}}</th>
+  <th>{{'Unloading site' | translate}}</th> -->
+  <th>{{'Start time' | translate}}</th>
+  <th>{{'End time' | translate}}</th>
+  <th>{{'Actual start time' | translate}}</th>
+  <th>{{'Actual end time' | translate}}</th>
+  <!-- <th>{{'ETA' | translate}}</th> -->
+  <th>{{'Status' | translate}}</th>
+  <th>{{'Trip type' | translate}}</th>
+  <th>{{'Trip History' | translate}}</th>
+  <th>{{'Edit' | translate}}</th>
+  <th>{{'ADD EXPENSES' | translate}}</th>   
+  <th>{{'EXPENSES LIST'  | translate}}</th>   
+</thead>
+<tbody>
+<tr *ngFor="let route of route_detail">
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Route_Name}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Device_Name}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.lrNumber?route.lrNumber:""}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Driver}}</td>
+ <!-- <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Loading_Site}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Unloading_Site}}</td> -->
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Planned_Start_Time|date:'short'}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Planned_End_Time|date:'short'}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Actual_Start_Time|date:'short'}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Actual_End_Time|date:'short'}}</td>
+ <!-- <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Trip_Status_Reached}} {{route.Trip_Status_Reached?'by':''}} {{route.End_Duration}}</td> -->
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.Status}}</td>
+ <td style="cursor:pointer" (click)="addMapPOI(route)">{{route.tripType==0?"Round":route.tripType==1?"One way ":route.tripType==2?"Two way":""}}</td>
+ <td>
+  <md-icon style="margin-left:15px; cursor: pointer" (click)="tripHistory(route)">history</md-icon>
+</td>
+<td>
+  <md-icon style="margin-left:15px; cursor: pointer" (click)="editRouteMap(route)">edit</md-icon>
+</td>
+<td>
+  <i class="fas fa-wallet" (click)="addExpense(route)" style="font-size: 20px;cursor: pointer"></i>
+</td>
+<td>
+  <i class="fas fa-list" (click)="expenseList(route)" style="font-size: 20px;cursor: pointer"></i>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
\ No newline at end of file
diff --git a/src/app/route-mapping/route-mapping.component.scss b/src/app/route-mapping/route-mapping.component.scss
new file mode 100644
index 0000000..f5a356f
--- /dev/null
+++ b/src/app/route-mapping/route-mapping.component.scss
@@ -0,0 +1,810 @@
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+
+  .route{
+      h2{
+        text-align: center;
+        background: #efefef;
+        color: #6d6d6d;
+        padding: 10px;
+      }
+  }
+
+  .headStyle{
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+   
+    color: #6b6a6a;
+    padding-top: 7px;
+    margin: 0px;
+  }
+
+  
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  ::-webkit-scrollbar {
+    display: none;
+    }
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+    /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+.close-thik:after {
+    content: '✖'; /* UTF-8 symbol */
+    position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+  }
+  [data-tooltip] {
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+  }
+  
+  /* Hide the tooltip content by default */
+  [data-tooltip]:before,
+//   [data-tooltip]:after {
+//     visibility: hidden;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+//     opacity: 0;
+//     pointer-events: none;
+//   }
+  
+  /* Position tooltip above the element */
+  [data-tooltip]:before {
+    position: absolute;
+    bottom: 110%;
+    left: 50%;
+    margin-bottom: -5px;
+    margin-left: -40px;
+    padding: 7px;
+    width: 100px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #000;
+    background-color: hsla(0, 0%, 20%, 0.9);
+    color: #fff;
+    content: attr(data-tooltip);
+    text-align: center;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+  
+  /* Triangle hack to make tooltip look like a speech bubble */
+  [data-tooltip]:after {
+    position: absolute;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    border-top: 5px solid #000;
+    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+  }
+  
+  /* Show tooltip content on hover */
+  [data-tooltip]:hover:before,
+//   [data-tooltip]:hover:after {
+//     visibility: visible;
+//     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+//     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+//     opacity: 1;
+//   }
+  button3 {
+    background-color: Transparent;
+    background-repeat:no-repeat;
+    border: none;
+    cursor:pointer;
+    overflow: hidden;
+    outline:none;
+}
+.icon-bar {
+    width: 17%;
+    background-color: #18262F;
+    margin-top: -9px;
+    height: 100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 297px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+@media screen and (max-width: 900px) {
+    .icon-bar{
+        display: none;
+        
+    }
+    .sch{
+        display: none;
+    }
+    .first{
+        width:1%!important;
+    }
+    .second{
+        margin-left: 8px!important;
+    }
+    .small{
+        display: block!important;
+    }
+    .image{
+        display: none;
+    }
+    .schlar{
+        display: block!important;
+    }
+}
+.small{
+    display: none;
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+#d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+#ac{
+    color: rgb(38, 38, 90)
+}
+#contact {
+    top: 200px;
+    background-color: #555
+}
+#active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+.overlay {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0, 0.9);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.overlay-content {
+    position: relative;
+    top: 25%;
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.overlay a {
+    padding: 8px;
+    text-decoration: none;
+    font-size: 36px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+.overlay a:hover, .overlay a:focus {
+    color: #f1f1f1;
+}
+
+.overlay .closebtn {
+    position: absolute;
+    top: 20px;
+    right: 45px;
+    font-size: 60px;
+}
+
+@media screen and (max-height: 450px) {
+  .overlay a {font-size: 20px}
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+agm-map {
+    height: 300px;
+  }
+
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+.mat-slide-toggle-thumb-container {
+    z-index: auto !important;
+}
+
+.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+    z-index:auto!important;
+    
+}
+.mat-menu-panel.mat-menu-before.mat-menu-below{
+    overflow: hidden !important;
+}
+.mat-menu-panel.my-full-width-menu {
+    max-width: none;
+    width: 100vw;
+    margin-left: -8px;
+    margin-top: 24px;
+  }
+  .menu-overflow-hidden {
+    overflow: hidden !important;
+  }
+  
+/* Notification */
+#nav{list-style:none;margin: 0px;padding: 0px;}
+#nav li {
+float: right;
+margin-right: 20px;
+font-family: Arial;
+font-size: 14px;
+font-weight:bold;
+}
+#nav li a{color:#333333;text-decoration:none}
+#nav li a:hover{color:#1788c0;text-decoration:none}
+
+
+#notification_li
+{
+position:relative
+}
+#notificationContainer 
+{
+background-color: #fff;
+border: 1px solid rgba(100, 100, 100, .4);
+-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+overflow: visible;
+position: absolute;
+top: 30px;
+margin-left: -170px;
+width: 400px;
+z-index: -1;
+display: none;
+}
+
+#notificationContainer:before {
+content: '';
+display: block;
+position: absolute;
+width: 0;
+height: 0;
+color: transparent;
+border: 10px solid black;
+border-color: transparent transparent white;
+margin-top: -20px;
+margin-left: 188px;
+}
+#notificationTitle
+{
+font-weight: bold;
+padding: 8px;
+font-size: 13px;
+background-color: #ffffff;
+position: fixed;
+z-index: 1000;
+width: 384px;
+border-bottom: 1px solid #dddddd;
+
+}
+#notificationsBody
+{
+padding: 33px 0px 0px 0px !important;
+min-height:300px;
+}
+
+
+.addStyle{
+     
+    // border-top: 1px solid #d6d6d6;
+    border-bottom: 1px solid #d6d6d6; 
+    padding-top: 7px;
+    padding-bottom: 8px;
+   
+}
+
+
+#notificationFooter
+{
+/* 
+    font-weight: bold;
+    padding: 8px;
+    font-size: 13px;
+    background-color: #ffffff;
+    position: fixed;
+    z-index: 1000;
+    width: 384px;
+    border-bottom: 1px solid #dddddd; */
+
+background-color: #e9eaed;
+text-align: center;
+font-weight: bold;
+z-index: 1000;
+padding: 8px;
+font-size: 13px;
+border-top: 1px solid #dddddd;
+}
+
+
+.cardStyle{
+    display: inline-block;
+    padding:5px;
+}
+
+
+.route{
+    h2{
+      text-align: center;
+      background: #efefef;
+      color: #6d6d6d;
+      padding: 10px;
+    }
+}
+
+
+
+
+#notification_count 
+{
+padding: 3px 7px 3px 7px;
+background: #cc0000;
+color: #ffffff;
+font-weight: bold;
+margin-left: 77px;
+border-radius: 9px;
+-moz-border-radius: 9px; 
+-webkit-border-radius: 9px;
+position: absolute;
+margin-top: -11px;
+font-size: 11px;
+}
+.route_detail {
+    float: left;
+    position: relative;
+    height: 234px;
+    background-color: #f7f8f9;
+    padding: 81px 19px 16px 0;
+    border-radius: 15px;
+    box-shadow: 5px -2px 1px #a5a5a5;
+    margin-top: 30px;
+    li{
+        list-style: disc; 
+        float: none; 
+         line-height:6vh; 
+         b{
+             color: green;
+         }
+    }
+      ul{
+          line-height: 0%;
+      }
+    /* padding: 10px; */
+   
+    .buttonStyle{
+        position: absolute;
+        /* left: 380px; */
+        /* bottom: 270px; */
+        right: 30px;
+        top: 15px;
+      
+        height: 36px;
+        border-radius: 16px;
+        md-icon-button{
+            float: left;
+            padding: 5px 13px 0px 17px;
+            color: white;
+            border-right: 1px solid;
+        }
+      
+        
+    }
+
+
+}
+
+/deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff; 
+    margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/route-mapping/route-mapping.component.spec.ts b/src/app/route-mapping/route-mapping.component.spec.ts
new file mode 100644
index 0000000..ec2cceb
--- /dev/null
+++ b/src/app/route-mapping/route-mapping.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteMappingComponent } from './route-mapping.component';
+
+describe('RouteMappingComponent', () => {
+  let component: RouteMappingComponent;
+  let fixture: ComponentFixture<RouteMappingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteMappingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteMappingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-mapping/route-mapping.component.ts b/src/app/route-mapping/route-mapping.component.ts
new file mode 100644
index 0000000..d0862c5
--- /dev/null
+++ b/src/app/route-mapping/route-mapping.component.ts
@@ -0,0 +1,477 @@
+import { TripHistoryComponent } from './../trip-history/trip-history.component';
+import { Component, OnInit } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { EditRouteMapComponent } from '../edit-route-map/edit-route-map.component';
+import { ExpenseComponentComponent } from '../device-report/trip-by-device/expense-component/expense-component.component';
+import { ExpenselistComponent } from '../device-report/trip-by-device/expenselist/expenselist.component';
+
+@Component({
+  selector: 'app-route-mapping',
+  templateUrl: './route-mapping.component.html',
+  styleUrls: ['./route-mapping.component.scss']
+})
+export class RouteMappingComponent implements OnInit {
+
+  route_detail_show1: any;
+  routeObject: any;
+  constructor(private router: Router,private contactService: ContactService,public dialog: MdDialog, public snackBar: MdSnackBar,private _flashMessagesService: FlashMessagesService) { }
+  before:any;
+  logoutbut:boolean;
+  cust:boolean=false;
+  logo:any;
+  text:any;
+  fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+  showImage:any;
+  groups=[];
+  group_info:any;
+  myInput:any;
+  deviceId:any;
+  device_update:any;
+  superAdmin:Boolean = false;
+  ngOnInit() {
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];  
+     window.localStorage['DataUpdate'] = 'Tthis.rue'
+     
+     this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+
+   
+     this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+     this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+ 
+     this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    //  console.log('testing',this.useridd);
+     if(this.custtype == true){
+      this.cust = true;
+    }  
+
+   
+ 
+    if(this.mb.charAt(0)=="n"){
+     this.mb = ' '
+   }
+   if( window.localStorage['Custumer'] == 'ON'){
+     this.logoutbut = false
+     this.dealer = true
+  }
+  else{
+      this.logoutbut = true
+  }
+
+
+  this.trackMapRoute();
+  this.routeDetails(this.useridd);
+
+  }
+
+
+  mydealer(){
+    // console.log('Dealer')
+  }
+
+  myaccount(){
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  }
+
+  geo(){
+    this.router.navigateByUrl("geofencing");
+    
+  }
+
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+     this.router.navigateByUrl("location");
+  
+  }
+
+  logout(){
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi(){
+    this.router.navigateByUrl("dashboard");
+  
+  }
+  soon(){
+    this.router.navigateByUrl("const?_i="+window.localStorage.token);
+    
+  }
+  new(){
+    this.router.navigateByUrl("new");
+    
+  }
+  
+  group(){
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+  cond:Boolean = false;
+point : any = 0;
+ aa(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+
+
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+
+
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+
+
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+
+alert_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/alert-report");
+
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+distance_report(){
+this.cond = false
+this.router.navigateByUrl("device-report/distance_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+driverPerformance(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/Driver-performance");
+}
+
+addRoute(){
+  this.cond = false
+  this.router.navigateByUrl("addRouteMap");
+}
+
+notification(){
+  this.cond = false
+  this.router.navigateByUrl("notifications");
+}
+
+saveRoute(){
+  this.cond = false
+  this.router.navigateByUrl('vehicleRoute');
+}
+
+
+
+addcus(){
+  localStorage.removeItem('mapLoad_ID')
+  this.router.navigateByUrl("add");
+}
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+route_detail=[];
+trackMapRoute(){
+
+  this.contactService.trakcRouteMap(this.useridd)
+  .subscribe(res=>{
+    // console.log("qwerty",res);
+    console.log('res=>',res);
+    this.route_detail=res;
+    
+    // console.log(res.length)
+    // for(var k=res.length-1;k>=0;k--){
+    //   var newObj = {
+    //     'Route_Name':res[k]?res[k].Route_Name:'',
+    //     'Device_Name':res[k]?res[k].Device_Name:'',
+    //     'Driver':res[k]?res[k].Driver:'',
+    //     'Loading_Site':res[k]?res[k].Loading_Site:"",
+    //     'Unloading_Site':res[k]?res[k].Unloading_Site:"",
+    //     'Planned_Start_Time':res[k]?res[k].Planned_Start_Time:'',
+    //     'Planned_End_Time':res[k]?res[k].Planned_End_Time:'',
+    //     'Actual_Start_Time':res[k]?res[k].Actual_Start_Time:'',
+    //     'Actual_End_Time':res[k]?res[k].Actual_End_Time:'',
+    //     'Trip_Status_Reached':res[k]?res[k].Trip_Status_Reached:'',
+    //     'End_Duration':res[k]?res[k].End_Duration:'',
+    //     'Allow_Reverse':res[k]?.res[k].Allow_Reverse
+      
+    //   }
+    //   this.route_detail.push(newObj);
+    // }
+    
+    // console.log(this.route_detail)
+    // console.log(this.route_detail.length)
+   
+  },err=>{
+    // console.log(err.status);
+    // console.log("Error occured !!!");
+    // this._flashMessagesService.show("Internal server error !!!", { cssClass: 'alert-danger', timeout: 2500 });
+  })
+}
+
+
+
+addMapPOI(poiRoute){ 
+
+  this.cond = false
+  localStorage.setItem('POIID', JSON.stringify(poiRoute.routeId));
+  localStorage.setItem('startTime', JSON.stringify(poiRoute.Actual_Start_Time));
+  localStorage.setItem('endTime', JSON.stringify(poiRoute.Actual_End_Time));
+  localStorage.setItem('devId',JSON.stringify(poiRoute.Device_Id))
+
+  var tripShow = {
+    routeId:poiRoute.routeId,
+    actualStartTime:poiRoute.Actual_Start_Time,
+    actualEndTime:poiRoute.Actual_End_Time,
+    deviceId:poiRoute.Device_Id
+  }
+
+  // console.log("tripObject=>",tripShow);
+
+
+
+  localStorage.setItem('poiData', JSON.stringify(tripShow));
+
+
+  this.router.navigateByUrl("Point_Of_Intrest");
+}
+
+routeDetails(uId){
+  // console.log(uId);
+  this.contactService.getRouteDetail(uId)
+    .subscribe(res=>{
+      // console.log("routedet",res.status)
+      this.route_detail_show1=res;
+    },err=>{
+      // console.log(err.status);
+      // console.log("Error occured !!!");
+      // this._flashMessagesService.show("Internal server error !!!", { cssClass: 'alert-danger', timeout: 2500 });
+    })
+}
+
+route_Id:any;
+
+tripHistory(route){
+ 
+
+  this.route_Id = route.routeId;
+console.log(route);
+
+  let dialogRef_1 = this.dialog.open(TripHistoryComponent, {
+    // height:'500px',
+    width:'950px',
+    data:route
+  });
+
+}
+
+// edit routeMap functionality starts here 
+editRouteMap(route){
+
+  // console.log("route Object",route);
+
+  this.routeObject= route;
+
+  let dialogRef_edit = this.dialog.open(EditRouteMapComponent, {
+    // height:'600px',
+    // width:'950px',
+    data: {routeId : this.routeObject}
+  });
+
+
+  dialogRef_edit.afterClosed().subscribe(result => {
+    
+    // console.log(result);
+    if(result=="success"){
+      this.trackMapRoute()
+
+    }
+  })
+
+}
+
+
+table1ch(){
+    
+  myFunction();
+      function myFunction() {
+        var input, filter, table, tr, td, i,td1;
+        input = document.getElementById("myInput");  
+        filter = input.value.toUpperCase();
+        table = document.getElementById("myTable");
+        tr = table.getElementsByTagName("tr");
+        for (i = 0; i < tr.length; i++) {
+          td = tr[i].getElementsByTagName("td")[1];
+          td1= tr[i].getElementsByTagName("td")[0]
+          if (td) {
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+              tr[i].style.display = "";
+            } 
+            else if(td1.innerHTML.toUpperCase().indexOf(filter) > -1){
+              tr[i].style.display = "";
+            }
+            else {
+              tr[i].style.display = "none";
+            }
+          }       
+        }
+      }
+    }
+
+
+
+    tab:any;
+exportExcel()
+{
+ 
+ 
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    this.tab = document.getElementById('test_route'); // id of table
+    // console.log('tab=>',this.tab)
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {    
+        
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+        //tab_text=tab_text+"</tr>";
+    
+  }
+    tab_text=tab_text+"</table>";
+    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+    tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+    tab_text= tab_text.replace(/<md-icon[^>]*>|<\/md-icon>/gi, ""); // reomves input params
+   
+    // console.log(tab_text)
+
+
+  //   <td _ngcontent-c11="">
+  //   history
+  // </td>
+  // <td _ngcontent-c11="">
+  //   edit
+  // </td>
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE ");
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+    return (sa);
+}
+
+
+addExpense(tripObject){
+  console.log('tripObject=>',tripObject);
+  let dialogRef = this.dialog.open(ExpenseComponentComponent, {
+    width : "700px",
+    data: tripObject
+  });
+
+  dialogRef.afterClosed().subscribe(result => {
+    // console.log(result);
+    if(result == "success"){
+      let message1="Expense Added";
+      let action:any;
+      this.snackBar.open(message1, action, {
+        duration: 5000,
+        
+      });  
+    
+    }
+ 
+  });  
+}
+
+expenseList(tripObject)
+{
+  let dialogRef = this.dialog.open(ExpenselistComponent, {
+    width : "700px",
+    data: tripObject
+  });
+
+}
+
+
+}
diff --git a/src/app/route-plan/hualt-list/hualt-list.component.html b/src/app/route-plan/hualt-list/hualt-list.component.html
new file mode 100644
index 0000000..89455d2
--- /dev/null
+++ b/src/app/route-plan/hualt-list/hualt-list.component.html
@@ -0,0 +1,70 @@
+<!-- <div class="card">
+  <div class="card-header">
+    <h4>Hault List</h4>
+
+  </div>
+  <div class="card-body">
+    <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+  
+        <table id="haultTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align: left;">{{'Poi Name' | translate}}</th>
+              <th style="text-align: left;">{{'Poi Type' | translate}}</th>
+              <th style="text-align: left;">{{'Address' | translate}}</th>
+            
+    
+    
+            </tr>
+          </thead>
+        </table>
+      
+    </div>
+    </div>
+
+
+  </div>
+
+</div> -->
+
+
+<div class="card">
+  <div class="card-body">
+    <div class="row" style="margin:0;margin-bottom:10px">
+      <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+      <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;">
+        <md-option type="checkbox" *ngFor="let item of poiDevices;let i = index;" ng-selected="item.isTrue" [value]="item.id"
+          (click)="change(item, i)">{{item.deviceName}}</md-option>
+      </md-select> -->
+
+      <div style="width: 100%;height: 78vh;">
+        <table id="deviceTable1" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align:left;width:100px"><input (change)="selectAll($event)" type="checkbox"> </th>
+              <th style="text-align:left;width:100px">{{'Name'|translate}} </th>
+              <th style="text-align:left;width:100px">{{'Type'|translate}} </th>
+              <th style="text-align:left;width:100px">{{'Address'|translate}} </th>
+
+
+            </tr>
+          </thead>
+        </table>
+
+
+      </div>
+
+
+
+    </div>
+
+  </div>
+  <div class="card-footer">
+    <div class="text-center">
+      <button class="btn btn-primary btn-sm" (click)="update()">Update</button>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/route-plan/hualt-list/hualt-list.component.scss b/src/app/route-plan/hualt-list/hualt-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/route-plan/hualt-list/hualt-list.component.spec.ts b/src/app/route-plan/hualt-list/hualt-list.component.spec.ts
new file mode 100644
index 0000000..98b7ddb
--- /dev/null
+++ b/src/app/route-plan/hualt-list/hualt-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HualtListComponent } from './hualt-list.component';
+
+describe('HualtListComponent', () => {
+  let component: HualtListComponent;
+  let fixture: ComponentFixture<HualtListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HualtListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HualtListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-plan/hualt-list/hualt-list.component.ts b/src/app/route-plan/hualt-list/hualt-list.component.ts
new file mode 100644
index 0000000..7d3c454
--- /dev/null
+++ b/src/app/route-plan/hualt-list/hualt-list.component.ts
@@ -0,0 +1,450 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var google: any;
+declare var jsPDF : any;
+
+declare var $:any;
+@Component({
+  selector: 'app-hualt-list',
+  templateUrl: './hualt-list.component.html',
+  styleUrls: ['./hualt-list.component.scss']
+})
+export class HualtListComponent implements OnInit {
+
+    emailid: any;
+  useridd: any;
+  devicesss: any;
+  uncheckedArr=[];
+  tabelObj: any;
+  poiDevices=[];
+  untrackedDev=[];
+  tempArray: any[];
+  selectedDevices: any[];
+  notSelectedPOIArray=[];
+  Load: boolean;
+  changed:boolean=true
+  superAdmin: any;
+  trackedDevices=[]
+ constructor(public dialogRef: MdDialogRef<HualtListComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService:ContactService) {
+      console.log(data);
+      // this.untrackedDev=data.untrackedDevice?data.untrackedDevice:[]
+      var deviceIDs = data.untrackedDevice?data.untrackedDevice:[];
+      if(data.hault){
+        for(var i=0;i<data.hault.length;i++){
+          this.trackedDevices.push(data.hault[i]._id)
+        }
+      }
+      // this.trackedDevices=data.hault?data.hault:[];
+        //  console.log(deviceIDs);
+        if(deviceIDs.length != 0){
+         for(var k =0; k<deviceIDs.length;k++){
+          //  console.log(deviceIDs[k])
+           this.untrackedDev.push(deviceIDs[k]);
+          }
+          console.log("untrackedDevice=>",this.untrackedDev);
+        }
+         this.notSelectedPOIArray = this.untrackedDev;
+     }
+
+  ngOnInit() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  setTimeout(() => {
+    // $('#dbselectIMEI').multipleSelect({
+        //   width: 250,
+        //   placeholder: "Vehicle IMEI",
+        //   filter: true,
+        //   single: true,
+        //   selectAll: false  
+        // }) 
+  
+        $('#dbselectVehicleName').multipleSelect({
+          width: 250,
+          placeholder: "Vehicle Name",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+        
+        // $("#dbselectVehicleName").multipleSelect("disable");
+        
+      },100)
+       this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+        // this.getUserDevices();
+        this.testTable()
+  }
+
+
+  change(obj: any,ind:any){ 
+    console.log(obj, ind);
+    
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  update(){
+
+    console.log(this.data,this.trackedDevices.length)
+     const newGeo ={
+            // uid: this.useridd,
+            // geofence:this.data.geofence.coordinates,
+            // geoname: this.data.geoname,
+            // entering:this.data.entering,
+            // exiting:this.data.exiting,
+            // // vehicleGroup:grp[0],
+            // type:this.data.type,
+            _id:this.data._id,
+            // untrackedDevice:this.notSelectedPOIArray,
+            hault:this.trackedDevices   
+          }
+          this.contactService.post('/RoutePlan/update',newGeo).subscribe(devgeo => {
+              // localStorage.removeItem("cordinates");
+              console.log(devgeo);
+              
+              // this.router.navigateByUrl("geofencing");
+              this.dialogRef.close(true)
+              // this.geoadd.push(devgeo);
+            }, (err: any) => { 
+  
+            });
+  }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable1').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+        //  "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+           
+                console.log(data);
+            var ind=that.poiDevices.indexOf(data)
+              console.log(that.poiDevices[ind],ind);
+            that.poiDevices[ind].isTrue = that.poiDevices[ind].isTrue?!that.poiDevices[ind].isTrue:true;
+           var i = that.notSelectedPOIArray.indexOf(data.id);
+            var index=that.trackedDevices.indexOf(data.id);
+            console.log(index==-1);
+            
+            if(index==-1){
+              if(!that.trackedDevices.includes(data.id)){
+                console.log(that.trackedDevices.length);
+                
+                console.log("In tracked Device");
+                
+                that.trackedDevices.push(data.id);
+                console.log(that.trackedDevices.length);
+              }
+              if(that.notSelectedPOIArray.includes(data.id)){
+                 that.notSelectedPOIArray.splice(i,1);
+              }
+              
+            }else{
+               console.log("In Untracked Device");
+              if(!that.notSelectedPOIArray.includes(data.id)){
+
+                that.notSelectedPOIArray.push(data.id);
+              }
+              if(that.trackedDevices.includes(data.id)){
+                 console.log(that.trackedDevices.length,i);
+                 that.trackedDevices.splice(index,1);
+                  console.log(that.trackedDevices.length);
+              }
+
+              // that.trackedDevices.splice(index,1);
+              // that.notSelectedPOIArray.push(data.id);
+            }
+            // if( i==-1){
+            //  that.notSelectedPOIArray.push(data.id);
+            // }
+            // else{
+            //   that.trackedDevices.push(data.id);
+            //   that.notSelectedPOIArray.splice(i,1);  
+            // }
+      console.log(that.notSelectedPOIArray,that.trackedDevices); 
+      
+         })
+        },
+        ajax: (dataTablesParameters, callback) => {
+           that.Load = true;
+          var suburl = '/poi/getPois?user='+that.useridd;
+          // if(that.superAdmin){
+          //    suburl = '/poi/getPois?user='+this.useridd;
+          // }
+          // this.contactService.get('/poi/getPois?user='+this.useridd+'&id='+data).subscribe((res:any)=>{
+          if(that.changed){
+            that.contactService.get(suburl).subscribe((res:any)=>{
+        
+        that.devicesss=res;
+       for(var i = 0; i<res.length ; i++){       
+            var dev = {
+              isTrue:true,
+              id:res[i]._id,
+              Device_Name: res[i].poi.poiname,
+              type:res[i].poi.poi_type,
+              address:res[i].poi.address,
+            }  
+          that.poiDevices.push(dev);  
+      //     // that.notSelectedPOIArray.push(res.devices[i]._id)        
+        }   
+      var finalArr=[]  ;
+      var j=0 
+      for (var i = 0; i < that.poiDevices.length; i++) {
+                    that.clocation_1(that.poiDevices[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        finalArr.push(succ);
+                        // console.log(finalArr,j);
+                        j++;
+                        if (j === that.poiDevices.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+         that.Load = false;
+         })
+        }else{
+          // console.log(that.poiDevices);
+          
+          callback({ data: that.poiDevices});
+           that.Load = false;
+           that.changed=true
+        }
+
+        },
+
+        "columns": [
+          {
+            "data": "isTrue",
+            "render": function (data, row) { 
+              if(data){
+                return "<input checked type='checkbox' id='edit'>"   
+              } else{
+                 return "<input  type='checkbox' id='edit'>" 
+              }
+            }
+          },
+           {
+            "data": "Device_Name",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "type",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+           {
+            "data": "address",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+         
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+
+        ], order: [[ 0, 'desc' ], [ 0, 'asc' ]]
+      });
+ 
+
+    });
+
+  }
+  selectAll(event){
+    this.changed=false
+    // console.log(event);
+    
+    if(event.target.checked){
+      for(var i=0;i<this.poiDevices.length;i++){
+      this.poiDevices[i].isTrue=true;
+      if(!this.trackedDevices.includes(this.poiDevices[i].id)){
+        this.trackedDevices.push(this.poiDevices[i].id)
+
+      }
+     
+    }
+      this.notSelectedPOIArray=[];
+    }else{
+      for(var i=0;i<this.poiDevices.length;i++){
+        this.poiDevices[i].isTrue=false
+         this.notSelectedPOIArray.push(this.poiDevices[i].id)
+      }
+       
+       this.trackedDevices=[]
+    }
+    this.tabelObj.ajax.reload();
+    
+    console.log(this.notSelectedPOIArray,this.trackedDevices);
+  }
+
+   clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    //  console.log(this.trackedDevices);
+   
+     
+     if(this.trackedDevices.includes(latlngObj.id)){
+       
+        latlngObj.isTrue=true;
+            cb(null, latlngObj);
+         }else{
+            latlngObj.isTrue=false;
+              cb(null, latlngObj);
+         }
+     }
+
+
+    //  checkAvailability(latlngObj,cb){
+    //    var count=0
+    //    for(var i=0;i<this.trackedDevices.length;i++){
+    //   if(this.trackedDevices[i].poi.poiname==latlngObj.Device_Name){
+    //       latlngObj.isTrue=true;
+    //       count++
+    //       cb(null, true);
+    //    }else{
+    //      if(count<=0 && i==(this.trackedDevices.length-1)){
+    //        cb(null, false);
+    //      }
+    //    }
+    //   }
+    //  }
+    
+   
+
+  }
+
+
+
+
+
+
+
+//   constructor(public dialogRef: MdDialogRef<HualtListComponent>,
+//     @Inject(MD_DIALOG_DATA) public data: any) { 
+//       console.log(data);
+      
+//     }
+
+//   ngOnInit() {
+//     this.testTable()
+//   }
+
+//    tabelObj
+//   testTable(){
+//   const that = this;
+//   // console.log("inside function");
+ 
+//    $(document).ready(function() {
+//      that.tabelObj = $('#haultTable').DataTable({
+//        "processing": false,
+//           "searching": true, 
+//           pagingType: 'full_numbers',
+//           pageLength: 25,
+//           serverSide: false,
+//           responsive: true,
+//           "scrollY":'60vh',  
+//           "scrollCollapse": true, 
+          
+//           // "deferLoading": 25 ,  
+//           lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+//             "rowCallback": function(row: Node, data: any | Object, index: number){
+              
+             
+             
+  
+//               // });
+//             },
+//           ajax: (mainData,callback) => {
+//             console.log(that.data.hault);
+            
+//             callback({ data:that.data.hault});
+    
+   
+//   },
+//    "columns": [
+//               {
+//                   "data": "poi",
+//                   "render": function(data, type, row) {  
+//                     console.log(data,row);
+                                     
+//                     return data?data.poiname: '';                 
+//                   }
+//               },
+//               {
+//                   "data": "poi",
+//                   "render": function(data, type, row) {                   
+//                     return data?data.poi_type: '';                  
+//                   }
+//               },
+//               {
+//                   "data": "poi",
+//                   "render": function(data, type, row) {                   
+//                     return data?data.address : '';                  
+//                   }
+//               },
+              
+             
+   
+//           ],  
+         
+//       });
+
+//   });
+
+// }
+
+// }
diff --git a/src/app/route-plan/route-list/route-list.component.html b/src/app/route-plan/route-list/route-list.component.html
new file mode 100644
index 0000000..31f7af4
--- /dev/null
+++ b/src/app/route-plan/route-list/route-list.component.html
@@ -0,0 +1,137 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    <i class="fas fa-plus-circle" (click)="addRoute()" mdTooltip="{{'Add Route Plan' | translate}}"
+      style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Route Plan List' | translate}}</h4>
+
+    </div>
+  </div>
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3"
+      style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Vehicle:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <!-- <div >
+                <div style="width: auto;"> -->
+              <select style="width: inherit;" id="vehicles" multiple="multiple">
+                <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+              </select>
+              <!-- </div>
+              </div> -->
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Route Name:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <select style="width: inherit;" id="routes" multiple="multiple" >
+                <option *ngFor="let option_1 of routes" [value]="option_1._id">{{ option_1.name }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">Poi:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              <select style="width: inherit;" id="poi" multiple="multiple">
+                <option *ngFor="let option_1 of poiArray" [value]="option_1.id">{{ option_1.poiname }}</option>
+              </select>
+            </div>
+          </div>
+
+          <!-- <div class="row" style="margin: 0;">
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">From:</p>
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              
+              <input id="from_date" bsDatepicker class="form-control form-control-sm"
+                style="height: 25px; width: 200px;" [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+            </div>
+          </div>
+          <div class="row" style="margin: 0;padding-bottom: 10px;padding-right: 3px;">
+
+            
+            <div class="col-3" style="padding-top: 18px;">
+              <p style="font-weight: 600; color: #a6a6a6;">To:</p>
+
+            </div>
+            <div class="col-9" style="padding-top: 18px;">
+              
+              <input id="to_date" bsDatepicker class="form-control form-control-sm" style="height: 25px; width: 200px;"
+                [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+            </div>
+          </div> -->
+
+
+          <div class="row">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-right: 0;">
+
+              <div class="dropdown text-center">
+                <button style="background-color: #1556b9;color:#fdfdfd;" md-raised-button (click)="search()">{{'Search'
+                  | translate}}</button>
+                <button style="background-color: #cc0000;color:#fdfdfd;" md-raised-button class="dropdown-toggle"
+                  type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
+                  aria-expanded="false">
+                  {{ 'Export To' |translate}}
+                </button>
+                <!-- (click)="reportFilter('data')"  (click)="exportExel()" (click)="exportPDF()"-->
+                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                  <a style="cursor: pointer;" class="dropdown-item" (click)="exportExcel()"><i
+                      class="far fa-file-excel"></i>
+                    Excel</a>
+                  <a style="cursor: pointer;" class="dropdown-item" (click)="exportPDF()"><i
+                      class="far fa-file-pdf"></i> PDF</a>
+                </div>
+              </div>
+
+            </div>
+          </div>
+
+
+
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div class="loading" *ngIf="Load">Loading&#8230;</div>
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+              <thead style="background-color:#e0e0e0;color: #444444;">
+                <tr>
+                  <th style="text-align: left;">{{'Vehicle' | translate}}</th>
+                  <th style="text-align: left;">{{'Route Name' | translate}}</th>
+                  <th style="text-align: left;">{{'Start Point' | translate}}</th>
+                  <th style="text-align: left;">{{'End Point' | translate}}</th>
+                  <th style="text-align: left;">{{'No. of Haults' | translate}}</th>
+                    <th style="text-align: left;">{{'Status' | translate}}</th>
+                    <th style="text-align: left;">{{'Show Haults' | translate}}</th>
+                      <th style="text-align: left;">{{'Delete' | translate}}</th>
+                      <th style="text-align: left;">{{'View' | translate}}</th>
+
+
+                </tr>
+              </thead>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/route-plan/route-list/route-list.component.scss b/src/app/route-plan/route-list/route-list.component.scss
new file mode 100644
index 0000000..e107ef9
--- /dev/null
+++ b/src/app/route-plan/route-list/route-list.component.scss
@@ -0,0 +1,5 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/route-plan/route-list/route-list.component.spec.ts b/src/app/route-plan/route-list/route-list.component.spec.ts
new file mode 100644
index 0000000..8a2e72a
--- /dev/null
+++ b/src/app/route-plan/route-list/route-list.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteListComponent } from './route-list.component';
+
+describe('RouteListComponent', () => {
+  let component: RouteListComponent;
+  let fixture: ComponentFixture<RouteListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-plan/route-list/route-list.component.ts b/src/app/route-plan/route-list/route-list.component.ts
new file mode 100644
index 0000000..b5701fb
--- /dev/null
+++ b/src/app/route-plan/route-list/route-list.component.ts
@@ -0,0 +1,489 @@
+import { Component, OnInit } from '@angular/core';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { routes } from '../../app.router';
+import { ContactService } from '../../contact.service';
+import { HualtListComponent } from '../hualt-list/hualt-list.component';
+declare var google: any;
+declare var jsPDF : any;
+declare var  swal:any;
+declare var $:any;
+@Component({
+  selector: 'app-route-list',
+  templateUrl: './route-list.component.html',
+  styleUrls: ['./route-list.component.scss']
+})
+export class RouteListComponent implements OnInit {
+emailid;
+  useridd;
+  options;
+  routes;
+  
+  poiArray=[];
+  from_date =new Date();
+   colorTheme = 'theme-dark-blue';
+  to_date = new Date();
+  Load:boolean=false;
+  selectedPoisArray=[]
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService:ContactService,private router:Router,public dialog: MdDialog,) {
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+   }
+
+  ngOnInit() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+    var fTime = new Date();
+    fTime.setHours(0,0,0,0);   
+    this.from_date = new Date(fTime);
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.getVehicleData();
+     this.getRouteName();
+    //  this.getPois();
+     this.testTable();
+     const that=this
+    $('#routes').on('change', function(){
+      var routes=$('#routes').multipleSelect('getSelects','value');
+      console.log("jjjddjk",routes);
+      that.selectedPoisArray=[]
+      if(routes.length>0){
+        for(var i=0;i<routes.length;i++){
+          for(var j=0;j<that.routes.length;j++){
+            if(routes[i]==that.routes[j]._id){
+              if(!that.selectedPoisArray.includes(that.routes[j].endPoint._id))
+              that.selectedPoisArray.push(that.routes[j].endPoint._id)
+
+              if(!that.selectedPoisArray.includes(that.routes[j].startPoint._id))
+              that.selectedPoisArray.push(that.routes[j].startPoint._id);
+
+              console.log(that.selectedPoisArray);
+              
+            }
+          }
+        }
+      }
+
+      var Table = $('#deviceTable').DataTable( {
+ // optional info
+});
+
+      $('#deviceTable tbody').on('click', 'tr', function () {
+
+  let bookingData = Table.row(this).data();
+
+  console.log(bookingData);
+  
+  // do your staff
+ });
+
+      that.getPois(that.selectedPoisArray);
+    // var selected = $(this).find("option:selected");
+    // var arrSelected = [];
+    // selected.each(function(){
+    //    arrSelected.push($(this).val());
+    // });
+})
+    //  $('#routes').multipleSelect({
+    //     width: 200,
+    //     placeholder: 'Select route',
+    //     filter: true,
+    //     single: false,
+    //     selectAll: false
+ 
+    //   })
+//      $(document).ready(function () {
+//      $('#routes').multiselect({
+//     // selectAllValue: 'multiselect-all',
+//     // enableCaseInsensitiveFiltering: true,
+//     // enableFiltering: true,
+//     // maxHeight: '300',
+//     // buttonWidth: '235',
+//     onChange: function(element, checked) {
+//         // var brands = $('#routes option:selected');
+//         // var selected = [];
+//         // $(brands).each(function(index, brand){
+//         //     selected.push([$(this).val()]);
+//         // });
+
+//         console.log(element);
+//     }
+// });
+  // })
+}
+
+  getPois(data){
+     this.contactService.get('/poi/getPois?user='+this.useridd+'&id='+data).subscribe((res:any)=>{
+
+      var poiObj; 
+      this.poiArray=[]
+    for(var i=0;i<res.length;i++){
+      poiObj ={
+          poiname: res[i].poi.poiname,
+          id : res[i]._id,
+          location:res[i].poi.location.coordinates,
+          address:res[i].poi.address
+        }
+
+        this.poiArray.push(poiObj);
+        if(this.poiArray.length==res.length){
+          this.loadropdown();
+
+        }
+    }
+    })
+  }
+
+  getVehicleData(){
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      data => {
+      var devicesss = data
+        this.options = [];
+        for(let i=0;i<devicesss.devices.length;i++){
+            let a ={
+              value : devicesss.devices[i].Device_Name,
+              viewValue:devicesss.devices[i].Device_Name,
+              did:devicesss.devices[i].Device_ID,
+              id:devicesss.devices[i]._id,
+              user:devicesss.devices[i].user,
+              
+            }
+            a['selectedValue'] = devicesss.devices[i]._id ; 
+            this.options.push(a); 
+        }
+          this.loadropdown();
+          let that = this;
+      
+      });
+  }
+  routeName
+  getRouteName(){
+    this.contactService.post('/routePlan/get',{user:this.useridd}).subscribe((res:any)=>{
+      console.log(res);
+      this.routes=res;
+      this.loadropdown();
+    })
+  }
+  selectRouteName(event){
+    console.log(event);
+    
+  }
+
+   loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#vehicles').multipleSelect({
+        width: 200,
+        placeholder: 'Select Vehicle',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#poi').multipleSelect({
+        width: 200,
+        placeholder: 'Select poi',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+     setTimeout(() => {
+      $('#routes').multipleSelect({
+        width: 200,
+        placeholder: 'Select route',
+        filter: true,
+        single: false,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+    //  this.search()
+  }
+  reportData=[]
+  vehicle;
+  poi;
+  route;
+  search(){
+
+   this.vehicle=$('#vehicles').multipleSelect('getSelects','value');
+    this.poi=$('#poi').multipleSelect('getSelects','value');
+    this.routes=$('#routes').multipleSelect('getSelects','value');
+    
+    // var data={
+    //   vehicle:vehicle,
+    //   poi:poi,
+    //   route:routes,
+    //   user:this.useridd,
+    //   from:this.from_date,
+    //   to:this.to_date
+    // }
+    // console.log(data);
+    // this.contactService.post('/RoutePlan/get',data).subscribe((res:any)=>{
+    //   this.reportData=res;
+      this.tabelObj.ajax.reload()
+    // })
+  }
+
+  tabelObj
+  testTable(){
+  const that = this;
+  // console.log("inside function");
+ 
+   $(document).ready(function() {
+     that.tabelObj = $('#deviceTable').DataTable({
+       "processing": false,
+          "searching": true, 
+          pagingType: 'full_numbers',
+          pageLength: 25,
+          serverSide: false,
+          responsive: true,
+          "scrollY":'60vh',  
+          "scrollCollapse": true, 
+          
+          // "deferLoading": 25 ,  
+          lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            "rowCallback": function(row: Node, data: any | Object, index: number){
+              
+              // $('#deviceTable tbody').on('click', 'tr', function () {
+              //   $('#deviceTable').dataTable();
+                
+              //   console.log(data;
+                
+               
+
+                
+                
+              // });
+              $('#hault', row).bind('click', () => {   
+             //      that.tabelObj.row.add( [ 
+             //     'New Group'
+             //  ] ).draw( false );
+              // $( "#hault").off( "click" );
+             
+            //   let bookingData =  that.tabelObj.row(this).data();
+            //  console.log(bookingData);
+             
+             let dialogRef = that.dialog.open(HualtListComponent, {
+               // width: '950px',
+               // height: '1160px',  
+               data: data
+             }); 
+             dialogRef.afterClosed().subscribe(result => {   
+            // console.log(result);
+              if(result)
+               that.tabelObj.ajax.reload();      
+            
+          })  
+             
+            
+             })
+              $('#delete', row).bind('click', () => {   
+                var internalThat  = that;
+              swal("Are you sure ?", "Do you want to delete ?").then((ans)=>{
+                    console.log(ans);
+                    // that.accountActivityFunc(data);
+                    internalThat.contactService.post('/routePlan/delete',{id:data._id}).subscribe(res=>{
+                      internalThat.search()
+                    })
+                  },err=>{
+                    console.log(err);
+                  });
+              
+                
+              });
+
+               $('#view', row).bind('click', () => {   
+              that.router.navigate(['/addRoutePlan']);
+              console.log(data);
+              
+                localStorage.setItem('routePlanData',JSON.stringify(data))
+              
+                
+              });
+
+
+            // console.log("kjdkfjdjfj",bookingData);
+  
+              // });
+            },
+          ajax: (mainData,callback) => {
+
+           
+    
+          var data={
+            vehicle:that.vehicle,
+            poi:that.poi,
+            route:that.routes,
+            user:that.useridd,
+            from:that.from_date,
+            to:that.to_date
+          }
+          console.log(data);
+
+           that.contactService.post('/RoutePlan/get',data).subscribe((res:any)=>{
+            that.reportData=res;
+            callback({ data:that.reportData});
+            },err=>{
+              callback({ data:[]});
+
+            })
+      // that.contactService.getRenewalHistory(this.data._id).subscribe(res=>{
+      //   console.log(res);
+      //   that.Load = false;
+      //   if(res.length!=0){
+      //     callback({ data: res[0].data });
+
+      //   }else{
+      //      callback({ data: [] });
+      //   }
+        
+      // })
+
+   
+  },
+   "columns": [
+              {
+                  "data": "vehicle",
+                  "render": function(data, type, row) {                   
+                    return data?data.Device_Name : '';                  
+                  }
+              },
+              {
+                  "data": "name",
+                  "render": function(data, type, row) {                   
+                    return data?data: '';                  
+                  }
+              },
+              {
+                  "data": "startPoint",
+                  "render": function(data, type, row) {                   
+                    return data?data.poi.address : '';                  
+                  }
+              },
+              {
+                  "data": "endPoint",
+                  "render": function(data, type, row) {                   
+                    return data?data.poi.address : '';                   
+                  }
+              },
+              {
+                  "data": "hault",
+                  
+                  "render": function(data, type, row) {                   
+                    return data?data.length : 0                 
+                  }
+                },
+                {
+                    "data": 'status',
+                    "render": function(data, type, row) {                   
+                      return data?data.status : '';                  
+                    }
+                },
+
+               {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<button style="background:blue;color:black"><i id="hault" title="Show hault List" style="font-size:20px;color: red" class="fas fa-info"></i></button>'    
+      }
+    },
+
+               {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<i id="delete" title="Delete Route Plan" style="font-size:20px;color: red" class="fas fa-trash"></i>'    
+      }
+    },
+
+    {
+          "data":null,
+          "defaultContent": "",
+          "render":function(data,type,row){   
+            return '<i id="view" title="view Route Plan" style="font-size:20px;color: blue" class="fas fa-eye"></i>'    
+      }
+    }
+             
+   
+          ],  
+          // "columnDefs": [
+          //   { className: "dt-body-left", "targets": [ 0,1,2,3] },  
+          // { "width": "10px", "targets": 0 },
+          // { "width": "40px", "targets": 1 },
+          // { "width": "100px", "targets": 2 },
+          // { "width": "70px", "targets": 3 },] , 
+          // order: [[ 3, 'desc' ], [ 0, 'asc' ]]
+      });
+
+  });
+
+}
+
+ exportExcel(){
+   console.log("EXCEL");
+    
+	    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+	    var textRange; var j=0;
+      var table = $('#deviceTable').clone();
+    
+      table[0].querySelector("thead").remove();
+      table[0].prepend($(".dataTable thead").clone()[0]);
+    var tab = table[0];
+  
+	    for(j = 0 ; j < tab.rows.length ; j++) 
+	    {     
+	        tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
+	     
+	    }
+
+	    tab_text=tab_text+"</table>";
+	 
+	    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 
+
+	    var ua = window.navigator.userAgent;
+	    var msie = ua.indexOf("MSIE "); 
+
+	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+	    return (sa);
+  }
+
+  exportPDF(){
+     console.log("PDF");
+    var doc = new jsPDF("p", "pt", "a2");
+   var header = function(data) {
+                      doc.setFontSize(15);
+                      doc.setTextColor(40);
+                      doc.setFontStyle('normal');
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      doc.text("Sales Order", data.settings.margin.left, 50);
+                    };
+
+    doc.autoTable({html:"#deviceTable",margin:{bottom:140,left:30,right:8,top:80},theme:'grid',beforePageContent: header},);
+    doc.save("RoutePlanReport");
+  }
+
+  addRoute(){
+    this.router.navigate(['/addRoutePlan'])
+  }
+
+}
diff --git a/src/app/route-plan/route-plan.component.html b/src/app/route-plan/route-plan.component.html
new file mode 100644
index 0000000..036757f
--- /dev/null
+++ b/src/app/route-plan/route-plan.component.html
@@ -0,0 +1,118 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row"
+    style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Create Route Plan' | translate}}</h4>
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+  </div>
+  <div class="row" style="padding:0px">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding: 0px;height: 85vh;overflow-y: scroll; overflow-x: hidden;">
+      <form [formGroup]="routePlanForm">
+      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Start Point' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
+                <select formControlName="startPoint" class="form-control" (change)="selectPoint('startPoint')">
+                  <option value="" disabled>Select Start Point</option>
+                  <option *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
+                </select>
+            </div>
+          </div>
+          <div class="row" style="margin: 0;">
+            <div class="col-4" style="padding: 0;">
+              <p style="font-size: 12px">{{'Add Hault' | translate}}</p>
+            </div>
+            <div class="col-6">
+              <i class="fas fa-plus" style="float: left;margin-top: 2px;" (click)="addItem()"></i>
+            </div>
+          </div>
+          <div>
+            <div class="row" style="margin: 0;margin-bottom: 10px;" formArrayName="haultFormArray" *ngFor="let a of routePlanForm.get('haultFormArray')['controls']; let i = index">
+              <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                <i class="fas fa-trash" (click)="deleteAddressField(i)"></i>
+              </div>
+              <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
+                
+                    <div [formGroupName]="i" style="margin-bottom: 10px;">
+                      <select formControlName="name"  class="form-control" (change)="getClickEvent(i)">
+                        <option value="" disabled>Select Poi</option>
+                        <option *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
+                      </select>
+                    
+                    </div>
+
+              </div>
+             
+            </div>
+          </div>
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'End Point' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
+                <select formControlName="endPoint" class="form-control" (change)="selectPoint('endPoint')">
+                  <option value="" disabled>Select End Point</option>
+                  <option   *ngFor="let poiname of poiArray" [value]="poiname.id">{{ poiname.poiname }}</option>
+                </select>
+            </div>
+          </div>
+
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Name' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">
+             <input type="text" class="form-control" formControlName="name" placeholder="Please Enter Name">
+            </div>
+          </div>
+
+            <div class="row" style="margin: 0;margin-bottom: 10px;">
+              <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
+                <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">Vehicle :</p>
+              </div>
+              <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
+                <div style="width: auto;">
+                  <select formControlName="vehicle" id="vehicles" multiple="multiple" >
+                    <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+         
+          <div class="row" style="margin: 0;margin-top: 20px;">
+            <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
+              <button style="background-color: red; color: white; float: right;"  md-raised-button
+                (click)="getRoute()">{{'Show route' | translate}}</button>
+              <button style="background-color: #0e6cfb; color: white; float: right;margin-right: 10px;" [disabled]="disabled" md-raised-button
+                (click)="saveRoute()">{{'Create' | translate}}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+  </form>
+</div>
+    
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <div id="mapp" style="width: 100%; height: 85vh"></div>
+    </div>
+</div>
+
+
+
+
+
diff --git a/src/app/route-plan/route-plan.component.scss b/src/app/route-plan/route-plan.component.scss
new file mode 100644
index 0000000..3a27dea
--- /dev/null
+++ b/src/app/route-plan/route-plan.component.scss
@@ -0,0 +1,73 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 300px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 50px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+div[title="Stop drawing"] {
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a circle"] {
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a rectangle"] {
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
diff --git a/src/app/route-plan/route-plan.component.spec.ts b/src/app/route-plan/route-plan.component.spec.ts
new file mode 100644
index 0000000..8b58fef
--- /dev/null
+++ b/src/app/route-plan/route-plan.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoutePlanComponent } from './route-plan.component';
+
+describe('RoutePlanComponent', () => {
+  let component: RoutePlanComponent;
+  let fixture: ComponentFixture<RoutePlanComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoutePlanComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoutePlanComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-plan/route-plan.component.ts b/src/app/route-plan/route-plan.component.ts
new file mode 100644
index 0000000..d9d641f
--- /dev/null
+++ b/src/app/route-plan/route-plan.component.ts
@@ -0,0 +1,865 @@
+import { Component, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { MdDialog } from '@angular/material';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+declare var google: any;
+declare var $:any;
+@Component({
+  selector: 'app-route-plan',
+  templateUrl: './route-plan.component.html',
+  styleUrls: ['./route-plan.component.scss']
+})
+export class RoutePlanComponent implements OnInit {
+superAdmin: any;
+  speed_alert:boolean=true;
+  speedAlert:any;
+  destination_route: any;
+  sourceRoute: any;
+  before:any;
+  fieldArr=[];
+  poiArray=[]
+  startPoint;
+  disabled:boolean=true;
+  endPoint;
+  haultArray=[];
+  logoutbut:boolean;
+  cust:boolean=false;
+  logo:any;
+  auto:any;
+  myControl:any;
+  text:any;
+  fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+  showImage:any;
+  groups=[];
+  group_info:any;
+  routeName:any;
+  deviceId:any;
+  device_update:any;
+  dbMap:any;
+  options: any;
+  deviceArr: any=[];
+   count = 0;
+   countForRid=0;
+   countForHid=0;
+  directionsDisplay: any;
+  ll: { location: any; stopover: boolean; };
+  wapointArray: any[];
+   routePlanForm: FormGroup;
+  haultFormArray: FormArray;
+  constructor(private fb: FormBuilder,private router: Router,private contactService: ContactService,public dialog: MdDialog) {
+      }
+
+    createItem() {
+    return this.fb.group({
+      name: [''],
+    })
+  }
+
+   addItem() {
+    this.haultFormArray = this.routePlanForm.get('haultFormArray') as FormArray;
+    this.haultFormArray.push(this.createItem());
+
+    console.log(this.routePlanForm.value);
+     var inputId =  'address' +  this.count++; 
+  var t = {
+    aid: inputId,
+    address:''
+  }
+   this.fieldArr.push(t);
+   console.log(this.fieldArr);
+   
+  }
+vehicle
+  ngOnInit() {
+
+    var data1= JSON.parse(localStorage.getItem('routePlanData'));
+    console.log(data1);
+    
+
+     var inputId =  'address' +  this.count++; 
+  var t = {
+    aid: inputId,
+    address:''
+  }
+this.fieldArr.push(t);
+     this.routePlanForm = this.fb.group({
+      haultFormArray: this.fb.array([this.createItem()]),
+      startPoint:[''],
+      endPoint:[''],
+      name:[''],
+      vehicle:['']
+    })
+
+    
+
+    
+
+    this.loadropdown();
+    
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];  
+     window.localStorage['DataUpdate'] = 'True'
+    
+   
+     this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+     this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+ 
+     this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+     if(this.custtype == true){
+      this.cust = true;
+    }  
+
+    let  foods = [ ];
+ 
+    if(this.mb.charAt(0)=="n"){
+     this.mb = ' '
+   }
+   if( window.localStorage['Custumer'] == 'ON'){
+     this.logoutbut = false
+     this.dealer = true
+  }
+  else{
+      this.logoutbut = true
+  }
+
+
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+      var devicesss = data
+   
+        this.options = [];
+      
+        for(let i=0;i<devicesss.devices.length;i++){
+
+          // if(devicesss.devices[i].type_of_device =="Tracker"){
+            let a ={
+              value : devicesss.devices[i].Device_Name,
+              viewValue:devicesss.devices[i].Device_Name,
+              did:devicesss.devices[i].Device_ID,
+              id:devicesss.devices[i]._id,
+              user:devicesss.devices[i].user,
+              // email: devicesss.devices[i].Email_ID,
+              // deviceType: devicesss.devices[i].type_of_device,      
+            }
+            a['selectedValue'] = devicesss.devices[i]._id ; 
+        
+            this.options.push(a);
+          // }
+        }
+
+     
+          this.loadropdown();
+          // console.log("ignition option",this.options);
+          let that = this;
+          // setTimeout(()=>{ 
+          // },100)  
+      
+      });
+
+    this. getPoiList()
+  this.initMap();
+      if(data1!=undefined){
+      this.routePlanForm.patchValue({
+      haultFormArray: data1.hault,
+      startPoint:data1.startPoint._id,
+      endPoint:data1.endPoint._id,
+      name:data1.name,
+      vehicle:data1.vehicle._id
+      })
+
+     localStorage.removeItem('routePlanData')
+    }
+  }
+  mainPoiArray=[]
+  getPoiList(){
+    this.contactService.get('/poi/getPois?user='+this.useridd).subscribe((res:any)=>{
+      // this.poiArray=res;
+      this.mainPoiArray=res;
+      var poiObj; 
+
+    for(var i=0;i<res.length;i++){
+      poiObj ={
+          poiname: res[i].poi.poiname,
+          id : res[i]._id,
+          location:res[i].poi.location.coordinates,
+          address:res[i].poi.address
+        }
+
+        this.poiArray.push(poiObj);
+        if(this.poiArray.length==res.length){
+          this.loadropdown();
+
+        }
+    }
+    })
+  }
+
+
+  loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#vehicles').multipleSelect({
+        width: 200,
+        placeholder: 'Select Vehicle',
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+  
+   
+    }, 100);
+
+    // $("vehicles").find("option[value="+this.routePlanForm.value.vehicle+"]").prop("selected", "selected");
+
+// setTimeout(() => {
+//      $('#startPoint').multipleSelect({
+//         width: 200,
+//         placeholder: 'Select Start Point',
+//         filter: true,
+//         single: true,
+//           selectAll: false
+ 
+//       })
+  
+   
+//     }, 100);
+
+    //  setTimeout(() => {
+    //     $('#hault').multipleSelect({
+    //       width: 200,
+    //       placeholder: "Select Hault",
+    //       filter: true,
+    //       single: true,
+    //       selectAll: false  
+    //     }) 
+    //   }, 150);
+
+    //   setTimeout(() => {
+    //     $('#endPoint').multipleSelect({
+    //       width: 200,
+    //       placeholder: "Select endpoint",
+    //       filter: true,
+    //       single: true,
+    //       selectAll: false  
+    //     }) 
+    //   }, 100);
+ 
+  }
+
+
+
+// ===========================
+sourceAddress:any;
+autocompleteSource:any;
+inputDestination:any;
+autocompleteDestination:any;
+// directionsDisplay:any;
+// directionsService:any;
+source_address:any;
+destination_address:any;
+source_add:any;
+dest_add:any;
+polyArray=[];
+finlCoords=[];
+path=[];
+curr_position:any;
+initMap() {
+var outerThis=this;
+
+  if (navigator.geolocation) {
+
+    if(location.protocol != 'https:'){
+      this.contactService.getlatLong().subscribe(res=>{
+        console.log(res);
+        outerThis.curr_position = {
+         
+            lat: res.lat,
+            lng: res.lon
+          
+        };
+
+        outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
+          center: {
+              lat:  outerThis.curr_position.lat,
+              lng:  outerThis.curr_position.lng
+          },
+          zoom: 18
+      });    
+
+      var infoWindow = new google.maps.InfoWindow;
+      infoWindow.setPosition(outerThis.curr_position);
+      infoWindow.setContent('Current location');
+      infoWindow.open(outerThis.dbMap);
+      outerThis.dbMap.setCenter(outerThis.curr_position);
+       
+      })
+    }
+    else{
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        outerThis.curr_position = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        }  
+        // console.log(outerThis.curr_position);
+  
+        outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
+          center: {lat:  outerThis.curr_position.lat, lng: outerThis.curr_position.lng},
+          zoom: 15
+        });
+  
+      var infoWindow = new google.maps.InfoWindow;
+        infoWindow.setPosition(outerThis.curr_position);
+        infoWindow.setContent('Current location');
+        infoWindow.open(outerThis.dbMap);
+        outerThis.dbMap.setCenter(outerThis.curr_position);
+     
+      }) 
+
+    }
+  
+
+   }
+   
+ 
+   this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+   this.destination_address = new google.maps.places.Autocomplete(document.getElementById('txtDestination'));
+
+   google.maps.event.addListener(this.destination_address, 'place_changed', function() {
+    console.log("inside place changed function");
+  var latLng =  outerThis.destination_address.getPlace().geometry.location;
+  console.log('latLng',latLng);
+    outerThis.ll ={
+      location : new google.maps.LatLng(latLng.lat(),latLng.lng()),
+      stopover:false
+    }
+    // outerThis.waypoints.push(ll);  
+    
+}) 
+
+   
+}
+
+
+acc_position:any;
+waypoints:any;
+getRoute(){
+  this.waypoints =[];
+  var outerThis=this;
+  // this.source_address = document.getElementById('txtSource');
+
+  console.log('this.fieldArr',this.fieldArr.length,this.fieldArr,this.ll);
+  if(this.fieldArr.length == 1){
+    
+    this.waypoints.push(this.ll);  
+  }else{
+    this.waypoints.push(this.ll);
+        for(var k = 0; k<this.fieldArr.length-1 ;k++){
+         
+          console.log(this.fieldArr[k].latLng[1],this.fieldArr[k].latLng[0]);
+          
+       
+          if(this.fieldArr[k].latLng!=undefined){
+            var pp = {
+              location : new google.maps.LatLng(this.fieldArr[k].latLng[1],this.fieldArr[k].latLng[0]),
+              stopover:false
+            }
+  
+            outerThis.waypoints.push(pp);  
+          }
+ 
+        }
+  }
+  console.log('outerThis.waypoints',this.waypoints);
+  // var destination_address= document.getElementById('txtDestination');
+    var ds = document.getElementById('txtDestination');
+  if(this.fieldArr.length >0){
+    // this.destination_address = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
+    var ps = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
+  
+  }
+
+  // this.sourceRoute=this.source_address.value;
+  // console.log(this.sourceRoute);  
+  // this.destination_route = (this.fieldArr.length >0)?ps['value']:ds['value'];
+  // console.log(this.sourceRoute,this.destination_route)
+  // this.way_point_value = this.waypoints_address.value;
+
+//  console.log
+  // var current_add_1 = new google.maps.LatLng(outerThis.curr_position.lat, outerThis.curr_position.lng);
+  var mapOptions = {
+      center: {lat:  this.curr_position.lat, lng: this.curr_position.lng},
+      zoom: 15,
+     
+  };
+
+  
+var map = this.dbMap;
+if(outerThis.directionsDisplay != undefined) { 
+ 
+  outerThis.directionsDisplay.setMap(null);
+  outerThis.directionsDisplay = null;
+ }
+var directionsService = new google.maps.DirectionsService;
+ outerThis.directionsDisplay = new google.maps.DirectionsRenderer({
+    draggable: true,
+    map: map, 
+  });
+  google.maps.event.addListener(outerThis.directionsDisplay, 'click', function(h) {
+    // console.log(h.latLng.lat(),h.latLng.lng());
+  });
+
+  outerThis.directionsDisplay.addListener('directions_changed', function() {
+    outerThis.computeTotalDistance(outerThis.directionsDisplay.getDirections());
+  });  
+
+  this.displayRoute(this.startAddress, this.endAddress, directionsService,outerThis.directionsDisplay,map,this.waypoints)
+  this.disabled=false;
+ }
+
+ 
+
+  waypoints_path = [];
+  overview_path_latlng = [];
+
+//  method for total display route 
+
+  displayRoute(origin, destination, service, display,map,waypts) {
+    console.log('origin=>',origin);
+    console.log('destination=>',destination);
+
+var outerThis = this;
+  service.route({
+    origin: origin,
+    destination: destination, 
+    waypoints:waypts,
+    travelMode: 'DRIVING',   
+    avoidTolls: true
+  }, function(response, status) {
+    if (status === 'OK') {
+      outerThis.path=[];
+      outerThis.overview_path_latlng=[];
+      display.setDirections(response);
+      // console.log(response);
+      // var currentRoute = currentRouteArray.overview_path;
+       var currentRouteArray = response.routes[0].overview_path;
+      //  console.log(currentRouteArray);
+       for(var i = 0 ; i<currentRouteArray.length;i++){
+
+       var routePath = {
+          lat:currentRouteArray[i].lat(),
+          lng:currentRouteArray[i].lng()
+        }
+        outerThis.path.push(routePath);
+      }
+      outerThis.overview_path_latlng = outerThis.path;
+      // console.log(outerThis.overview_path_latlng);
+
+      display.addListener('directions_changed', function() {    
+      //  outerThis.addInfo();
+      console.log("Inside Direction changed");
+       var t  =  display.getDirections();
+      //  console.log(t);
+
+       var overview_path = t.routes[0].overview_path
+       
+            // console.log(overview_path);
+
+            // console.log(t.request.waypoints);
+            outerThis.waypoints_path=[];
+            outerThis.overview_path_latlng=[];
+            outerThis.wapointArray=[];
+
+       for(var j = 0 ; j<t.request.waypoints.length;j++){
+         var waypointLatlng = {
+           lat:t.request.waypoints[j].location.lat(),
+           lng:t.request.waypoints[j].location.lng()
+         }
+       outerThis.waypoints_path.push(waypointLatlng);
+       }
+       console.log('outerThis.waypoints_path',outerThis.waypoints_path);
+      
+       for(var k = 0 ; k<overview_path.length;k++){
+        var pathLatLng = {
+          lat:overview_path[k].lat(),
+          lng:overview_path[k].lng()
+        }
+
+        outerThis.overview_path_latlng.push(pathLatLng);
+      }   
+
+      console.log('outerThis.overview_path_latlng.push(pathLatLng)', outerThis.overview_path_latlng.push(pathLatLng));
+
+      //  console.log("pathLatlng",outerThis.overview_path_latlng);
+
+      //  console.log("Waypoints" ,outerThis.waypoints_path);    
+         });   
+      // function for get lat long array ends here 
+
+    } else {
+      // console.log('error in display route!!!')
+      alert('Could not display directions due to: ' + status);
+    }
+  });
+
+}
+// method for calculate total distance 
+ computeTotalDistance(result) {
+  var total = 0;
+  var myroute = result.routes[0];
+  for (var i = 0; i < myroute.legs.length; i++) {
+    total += myroute.legs[i].distance.value;
+  }
+  total = total / 1000;
+  console.log(total);
+  
+  // document.getElementById('total').innerHTML = total + ' km';
+}
+rName:any;
+data_descip:any;
+emmnerr:any;
+tost1(divid){
+  if(divid == "routeErr"){
+    this.data_descip =  "Please select route "
+     launch_toast();
+   }
+   else if(divid == "rnameErr"){
+     this.data_descip =  "Please type route name"
+     launch_toast();
+   }
+     function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+   }
+    }
+
+payloadArray=[];
+callDis(data){
+  
+  this.contactService.addPOICol(data).subscribe(resp=>{
+    // console.log("add poi",resp);
+   
+  })
+}
+saveRoute(){
+
+  console.log(this.routePlanForm.value,$('#vehicles').multipleSelect('getSelects','value'));
+  var vehicle=$('#vehicles').multipleSelect('getSelects','value');
+
+  var selectedVehicle
+  console.log(vehicle[0]);
+ var  hault=[]
+for (let i=0;i<this.routePlanForm.value.haultFormArray.length;i++) {
+   hault.push(this.routePlanForm.value.haultFormArray[i].name)
+}
+  
+var t=vehicle[0].substr(vehicle[0].indexOf(' ')+1)
+console.log(selectedVehicle,vehicle[0].substr(vehicle[0].indexOf(' ')+1), this.RemoveDoubleQuotes(t));
+     for(var j=0;j<this.overview_path_latlng.length;j++){
+    var lattitude = this.overview_path_latlng[j].lat;
+    var longitude = this.overview_path_latlng[j].lng;
+    this.finlCoords.push([longitude,lattitude])
+    }
+  
+  //  console.log(t);
+   var data={
+     name:this.routePlanForm.value.name,
+     vehicle: this.RemoveDoubleQuotes(t),
+     startPoint:this.routePlanForm.value.startPoint,
+     endPoint:this.routePlanForm.value.endPoint,
+     hault:hault,
+     user:this.useridd,
+      "waypoints":this.finlCoords,
+   }
+   console.log(data);
+
+   this.contactService.post('/RoutePlan/add',data).subscribe(res=>{
+     console.log(res);
+     this.router.navigate(['/routePlan'])
+     
+   })
+   
+  // let that = this;
+  // this.payloadArray=[];
+  // this.finlCoords=[];
+  // this.rName;
+  // // console.log(this.rName)
+  // this.sourceRoute;this.destination_route;
+  // if((this.sourceRoute==undefined)||(this.destination_route==undefined)||(this.sourceRoute==null)||(this.destination_route==null)){
+  //   // console.log("Please select route !!!");
+  //   this.tost1("routeErr");
+
+  // }
+  // else if((this.rName==undefined)||(this.rName==null)){
+    // console.log("Please select route name");
+  //   this.tost1("rnameErr");
+  // }
+  // else{
+  //   this.deviceArr=[];
+  //   this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+  //   console.log(this.deviceArr);
+  //   for(var j=0;j<this.overview_path_latlng.length;j++){
+  //   var lattitude = this.overview_path_latlng[j].lat;
+  //   var longitude = this.overview_path_latlng[j].lng;
+  //   this.finlCoords.push([longitude,lattitude])
+  //   }
+
+
+
+  //   this.wapointArray=[];
+  //   // debugger;
+  //   console.log(this.waypoints);
+  //   for(var z = 0 ; z<this.waypoints.length;z++){
+  //     if(this.waypoints[z] != undefined){
+  //       var lat = this.waypoints[z].location.lat();
+  //       var long = this.waypoints[z].location.lng();
+  //     var loc = { location : {
+  //         lat : lat,
+  //         lng : long
+  //       }
+  //     }
+  //       this.wapointArray.push(loc);
+  //     }
+  
+  //   }    
+  //   console.log('this.wapointArraythis.wapointArray',this.wapointArray);
+
+  //   let routeDetail={
+  //     "startPoint":this.sourceRoute,
+  //     "endPoint":this.destination_route,
+  //     "name":this.rName,
+  //     "user":this.useridd,
+  //     "waypoints":this.finlCoords,
+  //     "poi":this.payloadArray,
+  //     "status":"Active"
+  //   };
+
+
+  //     if(this.wapointArray.length>0){
+  //        routeDetail['wayPoints'] = this.wapointArray;
+  //     }
+  //   if((this.speed_alert === true)&&(this.speedAlert != undefined)){
+  //     routeDetail['speed_alert'] = this.speedAlert;
+  //   }
+  //   if(this.deviceArr.length != 0){
+  //     routeDetail['device'] = this.deviceArr;
+
+  //   }
+  //   console.log(routeDetail);
+   
+  //   console.log('this is final payload',routeDetail)
+  //   this.contactService.saveRoute(routeDetail)
+  //     .subscribe(res => {
+  //       this.router.navigateByUrl("vehicleRoute");
+  //     })
+  // }
+
+
+}
+
+ RemoveDoubleQuotes(str) {
+  var firstChar = str.charAt(0);
+  var lastChar = str[str.length -1];
+  //double quotes
+  if(firstChar && lastChar === String.fromCharCode(34)){
+    str = str.slice(1, -1);
+  }
+  //single quotes
+  if(firstChar && lastChar === String.fromCharCode(39)){
+    str = str.slice(1, -1);
+  }
+  return str;
+}
+
+
+
+additionalRouteInfo:any;
+saveInfoObject=[];
+
+addField(){
+ 
+  var inputId =  'address' +  this.count++; 
+  var radiusId='radius' +  this.countForRid++;
+  var haultId='hault' +  this.countForHid++;
+  var t = {
+    aid: inputId,
+    rid:radiusId,
+    hid:haultId,
+    address:'',
+    radius:'',
+    haultTime:''
+
+  }
+  this.fieldArr.push(t);
+  
+  var temp = setTimeout(()=>{
+    this.fieldArr[this.fieldArr.length -1]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    // this.fieldArr[this.fieldArr.length -1]['hault'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    // this.fieldArr[this.fieldArr.length -1]['radius'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    console.log('this.fieldArr',this.fieldArr);
+    clearTimeout(temp);
+  },2000)
+
+
+ 
+}
+
+deleteAddressField(i){
+
+      // this..pop();
+      this.haultFormArray.removeAt(i);
+  // console.log(ind);
+
+  //   this.fieldArr.splice(ind,1);
+  //   console.log('this.fielArr',this.fieldArr);
+  //   this.getRoute();
+}
+
+
+getClickEvent(i){
+  console.log(i);
+  
+  var that = this;
+  console.log("inside function",i);
+  for(var j=0;j<this.poiArray.length;j++){
+      console.log(this.routePlanForm.value.name[i],'==',this.poiArray[j]);
+
+      // google.maps.event.addListener(this.fieldArr[i].address, 'place_changed', function() {
+      //      console.log("inside place changed function");
+      //    var latLng =   that.fieldArr[i].address.getPlace().geometry.location;
+    
+      console.log(this.fieldArr);
+           this.fieldArr[i]['latLng'] = this.poiArray[j].location
+           console.log(this.fieldArr);
+    //  })
+  }
+  // console.log(i);
+
+}
+
+startAddress;
+endAddress;
+selectPoint(type){
+  console.log(type,type=='startPoint',typeof(type),this.poiArray.length);
+  
+  const that=this
+  if(type=='startPoint'){
+    console.log('in');
+    for(var i=0;i<this.poiArray.length;i++){
+      // console.log(this.routePlanForm.value.startPoint,'==',this.poiArray[i]);
+      
+      if(this.routePlanForm.value.startPoint==this.poiArray[i].id){
+
+        this.startAddress=this.poiArray[i].address
+        this.ll ={
+      location : new google.maps.LatLng(this.poiArray[i].location[1],this.poiArray[i].location[0]),
+      stopover:false
+    }
+      //    google.maps.event.addListener(this.poiArray[i].address,  function() {
+      //   console.log("inside place changed function");
+      // var latLng =   that.fieldArr[i].address.getPlace().geometry.location;
+        // that.fieldArr[i]['address'] = this.poiArray[i].address;
+        // that.fieldArr[i]['latLng'] = this.poiArray[i].location;
+        console.log(that.fieldArr);
+  // })
+
+        // this.getGoogleAddress(this.poiArray[i].location[1],this.poiArray[i].location[0],function (err, succ) {
+        //   // var that=this;
+        //    if(err){
+        //     console.log(err)
+        //   }if(succ){
+        //   console.log(succ);
+          
+        //   that.startAddress=succ
+        //   console.log(that.startAddress);
+        //   }
+        // })
+        
+      }
+    }
+  }else{
+     for(var i=0;i<this.poiArray.length;i++){
+      console.log(this.routePlanForm.value.endPoint,'==',this.poiArray[i]);
+      
+      if(this.routePlanForm.value.endPoint==this.poiArray[i].id){
+         this.endAddress=this.poiArray[i].address
+      //    google.maps.event.addListener(this.poiArray[i].address, 'place_changed', function() {
+      //   console.log("inside place changed function");
+      // var latLng =   that.fieldArr[i].address.getPlace().geometry.location;
+        //  that.fieldArr[i]['address'] = this.poiArray[i].address;
+        this.ll ={
+      location : new google.maps.LatLng(this.poiArray[i].location[1],this.poiArray[i].location[0]),
+      stopover:false
+    }
+        // that.fieldArr[i]['latLng'] = this.poiArray[i].location;
+        console.log(that.fieldArr);
+  // })
+
+
+
+        // this.getGoogleAddress(this.poiArray[i].location[1],this.poiArray[i].location[0],function (err, succ) {
+        //   // var that=this
+        //   if(err){
+        //     console.log(err)
+        //   }if(succ){
+            
+        //     that.endAddress=succ
+        //     console.log(that.endAddress,succ);
+        //   }
+
+        // })
+        
+      }
+    }
+  }
+  // console.log(event);
+  // var start=$('#dbselectIMEI').multipleSelect('getSelects','value');
+  console.log(this.routePlanForm.value.startPoint);
+  
+}
+
+getGoogleAddress(lat,long,cb){
+  let geocoder = new google.maps.Geocoder();
+               let t_latlng=new google.maps.LatLng(lat,long)
+                let request = {
+                  latLng: t_latlng
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      console.log(data,data[0].formatted_address);
+                      
+                      var liveAdd = data[0].formatted_address;
+                     cb(null,data[0].formatted_address);
+                    } 
+                  }
+                  else {
+  
+                   cb(null,'')
+                   
+                  }
+  
+                })
+}
+
+
+
+}
+
+
diff --git a/src/app/route-set/route-set.component.html b/src/app/route-set/route-set.component.html
new file mode 100644
index 0000000..866bae2
--- /dev/null
+++ b/src/app/route-set/route-set.component.html
@@ -0,0 +1,238 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'Create route' | translate}}</h4>
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+  </div> 
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+  </div>
+  <div class="row" style="padding:0px">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
+      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Source' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+              <input id="txtSource" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Source Address">  
+            </div>
+          </div>
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Destination' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+              <input id="txtDestination" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Destination Address">  
+            </div>
+          </div>
+          <div class="row" style="margin: 0;">
+            <div class="col-6" style="padding: 0;">
+              <p style="font-size: 12px">{{'Add adress' | translate}}</p>
+            </div>
+            <div class="col-6">
+              <i class="fas fa-plus" style="float: right;" (click)="addField()"></i>
+            </div>
+          </div>
+          <div>
+            <div class="row" style="margin: 0;margin-bottom: 10px;" *ngFor="let inputField of fieldArr ; let i = index">
+              <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;"> 
+                <i class="fas fa-trash" (click)="deleteAddressField(i)"></i>
+              </div>
+              <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+                <input id="{{inputField.aid}}" class="form-control" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search  Address" (change)="getClickEvent(i)">  
+              </div>   
+          </div>
+          </div>
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Route Name' | translate}}</p>
+            </div>
+          <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
+            <input type="text" style="height: 28px;" class="form-control" name="routename" type="text" [(ngModel)]="rName" placeholder="{{'Route Name' | translate}}" />
+           </div>
+          </div>
+          <div class="row" style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px">Vehicle :</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">   
+              <div style="width: auto;">
+                <select id="dbselect" multiple="multiple">
+                  <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+                </select>
+              </div> 
+            </div>
+          </div>
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Speed Alert' | translate}}</p>          
+                </div>
+                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
+                  <md-checkbox [(ngModel)]="speed_alert" style="float:left;margin-top: 4px;"></md-checkbox>           
+                  <input [disabled] = "speed_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="speedAlert" placeholder="00" />             
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
+                  <p>Km/hr</p>
+                 </div>
+              </div>
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Total Distance' | translate}}</p>          
+                </div>
+                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
+                  <p id=total></p>
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
+                  <p>Kms</p>
+                 </div>
+              </div>
+              <div class="row" style="margin: 0;margin-top: 20px;">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
+                  <button style="background-color: red; color: white; float: right;" md-raised-button (click)="getRoute()">{{'Show route' | translate}}</button>   
+                  <button style="background-color: #0e6cfb; color: white; float: right;margin-right: 10px;" md-raised-button (click)="saveRoute()">{{'Create' | translate}}</button>   
+                </div>
+              </div>
+    </div></div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <div  id="mapp" style="width: 100%; height: 85vh"></div>
+    </div>
+  </div>
+  </div> 
+
+
+
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+
+
+
+  <div class="small">
+    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
+      <i class="material-icons">list</i>
+    </button>
+    <md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+          <md-icon style="float:right">dashboard</md-icon>
+        </h6>
+      </a>
+
+
+      <a href="#">
+        <h6>RULES
+          <md-icon style="float:right">dock</md-icon>
+        </h6>
+      </a>
+
+
+    </md-menu>
+  </div>
+
+  <div style="float:left; width: 1%; height:86vh;overflow-y: hidden;
+      overflow-x: hidden;">
+    <div id="toast">
+      <div id="desc">{{data_descip}}</div>
+    </div>
+  </div>
+  <div style="float:left; width: 99%; padding-top: 6%;">
+    <b>
+      <h4 style="text-align:center;padding-top:1%">{{'Add Geo Fence' | translate}}</h4>
+    </b>
+    <table class="scroll" id="myTable" class="table table-striped ">
+      <tbody>
+        <tr style="width:100%">
+          <td>
+            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Select group' | translate}}--" [(ngModel)]="grp">
+              <md-option *ngFor="let grp of grpName" [value]="grp">
+                {{grp.name}}
+              </md-option>
+            </md-select>
+          </td>
+          <td>
+            <md-select style="display: grid;padding-top:11px;width:200px;" name="neww" placeholder="--{{'Geofence type' | translate}}--" [(ngModel)]="geoT">
+              <md-option *ngFor="let geoT of geoType" [value]="geoT">
+                {{geoT}}
+              </md-option>
+            </md-select>
+          </td>
+          <td style="width:30%">
+            <md-form-field class="example-full-width width" style="width:100%;float:left">
+              <input mdInput class="no-spin" [(ngModel)]="geoname" name=" geoname" placeholder="--{{'GEO FENCE NAME' | translate}}--" required/>
+              <md-error class="required">{{'Enter GEO FENCE NAME' | translate}}</md-error>
+            </md-form-field>
+          </td>
+          <td style="width:15%">
+            <p style="padding-top: 18%;">{{'Get Alert on' | translate}} :</p>
+          </td>
+          <td style="width:15%;padding-top: 19px;">
+            <md-checkbox [(ngModel)]=" enter" style="float:left;padding-top: 8%;">{{'Entering' | translate}}</md-checkbox>
+          </td>
+          <td style="width:20%;padding-top: 19px;">
+            <md-checkbox style="float:left;padding-top: 8%;" [(ngModel)]="exit">{{'Exiting' | translate}}</md-checkbox>
+          </td>
+          <td style="width:20%;padding-top: 19px;">
+            <button style="width: 60%;cursor:pointer;margin-top: 4%;" class="btn btn-success" (click)="creategeo()">{{'Create' | translate}}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p style=float:left>{{'Select Your Geo Fence Region' | translate}} :</p>
+    <br>
+    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
+    <div id="map" style="padding: 0px;width: 100%;display: flex;height: 57vh;"></div>
+  </div>
+ -->
+
+
+
+
+<!-- 
+<app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <div class="row" style="padding: 50px 10px 10px;">
+         
+    <div id="toast"><div id="desc">{{data_descip}}</div></div>  
+    <div class="col-md-2">
+      <a>{{'Source' | translate}} :</a>
+      <md-form-field>
+        <input type="text" mdInput name="text" id="txtSource" >
+      </md-form-field>
+    </div>
+    <div class="col-md-2">
+      <a>{{'Destination' | translate}} :</a>
+      <md-form-field  >
+        <input type="text" mdInput name="text" id="txtDestination">
+      </md-form-field>
+    </div>
+    <div class="col-md-2">
+      <a>{{'Routes name' | translate}} :</a>
+      <md-form-field >
+        <input mdInput  type="text" name="text" [(ngModel)]="rName">
+      </md-form-field>
+    </div>
+    <div class="col-md-6" style="margin-top: 13px;">
+      <button md-raised-button style="background-color:#ff2525;color: white;;border:#fdfdfd;width:125px" class="btn btn-primary w3-button/" (click)="getRoute()">{{'Get route' | translate}}</button>
+  
+      <button md-raised-button style="background-color: #3f51b5;color: white;border: white;width:125px" class="btn btn-primary w3-button/" (click)="saveRoute()">{{'Save' | translate}}</button>
+    </div>
+  </div>
+  <p style="margin-left: 10px;">{{'Total Distance' | translate}}: <span id="total"></span></p>
+  <div id="mapp" style="padding: 0px;width: 100%;display: flex;height: 68vh;"></div>
+
+</div>
+ -->
diff --git a/src/app/route-set/route-set.component.scss b/src/app/route-set/route-set.component.scss
new file mode 100644
index 0000000..90d7747
--- /dev/null
+++ b/src/app/route-set/route-set.component.scss
@@ -0,0 +1,867 @@
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+
+//   .route{
+//       h2{
+//         text-align: center;
+//         background: #efefef;
+//         color: #6d6d6d;
+//         padding: 10px;
+//       }
+//   }
+
+  
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+  
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+  
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+  
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+  
+//   /* Animation */
+  
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   ::-webkit-scrollbar {
+//     display: none;
+//     }
+// .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 15%;
+//     /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+//     font-family: "Courier New", Courier, monospace;
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }  
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+    
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+  
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+  
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+   
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+    
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+    
+    
+// }
+// #c1 {
+//     float:left;
+ 
+// }
+// .close-thik:after {
+//     content: '✖'; /* UTF-8 symbol */
+//     position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+//   }
+//   [data-tooltip] {
+//     position: relative;
+//     z-index: 2;
+//     cursor: pointer;
+//   }
+  
+//   /* Hide the tooltip content by default */
+//   [data-tooltip]:before,
+// //   [data-tooltip]:after {
+// //     visibility: hidden;
+// //     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+// //     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+// //     opacity: 0;
+// //     pointer-events: none;
+// //   }
+  
+//   /* Position tooltip above the element */
+//   [data-tooltip]:before {
+//     position: absolute;
+//     bottom: 110%;
+//     left: 50%;
+//     margin-bottom: -5px;
+//     margin-left: -40px;
+//     padding: 7px;
+//     width: 100px;
+//     -webkit-border-radius: 3px;
+//     -moz-border-radius: 3px;
+//     border-radius: 3px;
+//     background-color: #000;
+//     background-color: hsla(0, 0%, 20%, 0.9);
+//     color: #fff;
+//     content: attr(data-tooltip);
+//     text-align: center;
+//     font-size: 14px;
+//     line-height: 1.2;
+//   }
+  
+//   /* Triangle hack to make tooltip look like a speech bubble */
+//   [data-tooltip]:after {
+//     position: absolute;
+//     bottom: 150%;
+//     left: 50%;
+//     margin-left: -5px;
+//     width: 0;
+//     border-top: 5px solid #000;
+//     border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+//     border-right: 5px solid transparent;
+//     border-left: 5px solid transparent;
+//     content: " ";
+//     font-size: 0;
+//     line-height: 0;
+//   }
+  
+//   /* Show tooltip content on hover */
+//   [data-tooltip]:hover:before,
+// //   [data-tooltip]:hover:after {
+// //     visibility: visible;
+// //     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+// //     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+// //     opacity: 1;
+// //   }
+//   button3 {
+//     background-color: Transparent;
+//     background-repeat:no-repeat;
+//     border: none;
+//     cursor:pointer;
+//     overflow: hidden;
+//     outline:none;
+// }
+// .icon-bar {
+//     width: 17%;
+//     background-color: #18262F;
+//     margin-top: -9px;
+//     height: 100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){        
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+    
+//     width: 297px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+   
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// @media screen and (max-width: 900px) {
+//     .icon-bar{
+//         display: none;
+        
+//     }
+//     .sch{
+//         display: none;
+//     }
+//     .first{
+//         width:1%!important;
+//     }
+//     .second{
+//         margin-left: 8px!important;
+//     }
+//     .small{
+//         display: block!important;
+//     }
+//     .image{
+//         display: none;
+//     }
+//     .schlar{
+//         display: block!important;
+//     }
+// }
+// .small{
+//     display: none;
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+// #d:hover { 
+//     color: rgb(14, 102, 18);
+
+    
+// }
+// #ac{
+//     color: rgb(38, 38, 90)
+// }
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+// #active{
+//     text-decoration-line: underline;
+//     text-decoration-color: rgb(66, 26, 245);
+// } 
+// .overlay {
+//     height: 100%;
+//     width: 0;
+//     position: fixed;
+//     z-index: 1;
+//     top: 0;
+//     left: 0;
+//     background-color: rgb(0,0,0);
+//     background-color: rgba(0,0,0, 0.9);
+//     overflow-x: hidden;
+//     transition: 0.5s;
+// }
+
+// .overlay-content {
+//     position: relative;
+//     top: 25%;
+//     width: 100%;
+//     text-align: center;
+//     margin-top: 30px;
+// }
+
+// .overlay a {
+//     padding: 8px;
+//     text-decoration: none;
+//     font-size: 36px;
+//     color: #818181;
+//     display: block;
+//     transition: 0.3s;
+// }
+
+// .overlay a:hover, .overlay a:focus {
+//     color: #f1f1f1;
+// }
+
+// .overlay .closebtn {
+//     position: absolute;
+//     top: 20px;
+//     right: 45px;
+//     font-size: 60px;
+// }
+
+// @media screen and (max-height: 450px) {
+//   .overlay a {font-size: 20px}
+//   .overlay .closebtn {
+//     font-size: 40px;
+//     top: 15px;
+//     right: 35px;
+//   }
+// }
+// agm-map {
+//     height: 300px;
+//   }
+
+//   /* Toast Msg */
+
+
+//   #toast {
+//     visibility: hidden;
+//     max-width: 50px;
+//     height: 50px;
+//     /*margin-left: -125px;*/
+//     margin: auto;
+//     background-color: #333;
+//     color: #fff;
+//     text-align: center;
+//     border-radius: 2px;
+
+//     position: fixed;
+//     z-index: 1;
+//     left: 60%;right:0;
+//     bottom: 80%;
+//     font-size: 13px;
+//     white-space: nowrap;
+// }
+// #toast #img{
+// 	width: 50px;
+// 	height: 50px;
+    
+//     float: left;
+    
+//     padding-top: 16px;
+//     padding-bottom: 16px;
+    
+//     box-sizing: border-box;
+
+    
+//     background-color: #111;
+//     color: #fff;
+// }
+// #toast #desc{
+
+    
+//     color: #fff;
+   
+//     padding: 16px;
+    
+//     overflow: hidden;
+// 	white-space: nowrap;
+// }
+
+// #toast.show {
+//     visibility: visible;
+//     -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+//     animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+// }
+// #myInput {
+//     border-radius: 15px;
+//     /* border: 2px solid #18262F; */
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// }
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;} 
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+// .mat-slide-toggle-thumb-container {
+//     z-index: auto !important;
+// }
+
+// .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+//     z-index:auto!important;
+    
+// }
+// .mat-menu-panel.mat-menu-before.mat-menu-below{
+//     overflow: hidden !important;
+// }
+// .mat-menu-panel.my-full-width-menu {
+//     max-width: none;
+//     width: 100vw;
+//     margin-left: -8px;
+//     margin-top: 24px;
+//   }
+//   .menu-overflow-hidden {
+//     overflow: hidden !important;
+//   }
+  
+// /* Notification */
+// #nav{list-style:none;margin: 0px;padding: 0px;}
+// #nav li {
+// float: right;
+// margin-right: 20px;
+// font-family: Arial;
+// font-size: 14px;
+// font-weight:bold;
+// }
+// #nav li a{color:#333333;text-decoration:none}
+// #nav li a:hover{color:#1788c0;text-decoration:none}
+
+
+// #notification_li
+// {
+// position:relative
+// }
+// #notificationContainer 
+// {
+// background-color: #fff;
+// border: 1px solid rgba(100, 100, 100, .4);
+// -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+// overflow: visible;
+// position: absolute;
+// top: 30px;
+// margin-left: -170px;
+// width: 400px;
+// z-index: -1;
+// display: none;
+// }
+
+// #notificationContainer:before {
+// content: '';
+// display: block;
+// position: absolute;
+// width: 0;
+// height: 0;
+// color: transparent;
+// border: 10px solid black;
+// border-color: transparent transparent white;
+// margin-top: -20px;
+// margin-left: 188px;
+// }
+// #notificationTitle
+// {
+// font-weight: bold;
+// padding: 8px;
+// font-size: 13px;
+// background-color: #ffffff;
+// position: fixed;
+// z-index: 1000;
+// width: 384px;
+// border-bottom: 1px solid #dddddd;
+
+// }
+// #notificationsBody
+// {
+// padding: 33px 0px 0px 0px !important;
+// min-height:300px;
+// }
+
+
+// .addStyle{
+     
+//     // border-top: 1px solid #d6d6d6;
+//     border-bottom: 1px solid #d6d6d6; 
+//     padding-top: 7px;
+//     padding-bottom: 8px;
+   
+// }
+
+
+// #notificationFooter
+// {
+// /* 
+//     font-weight: bold;
+//     padding: 8px;
+//     font-size: 13px;
+//     background-color: #ffffff;
+//     position: fixed;
+//     z-index: 1000;
+//     width: 384px;
+//     border-bottom: 1px solid #dddddd; */
+
+// background-color: #e9eaed;
+// text-align: center;
+// font-weight: bold;
+// z-index: 1000;
+// padding: 8px;
+// font-size: 13px;
+// border-top: 1px solid #dddddd;
+// }
+
+
+// .cardStyle{
+//     display: inline-block;
+//     padding:5px;
+// }
+
+
+
+// #notification_count 
+// {
+// padding: 3px 7px 3px 7px;
+// background: #cc0000;
+// color: #ffffff;
+// font-weight: bold;
+// margin-left: 77px;
+// border-radius: 9px;
+// -moz-border-radius: 9px; 
+// -webkit-border-radius: 9px;
+// position: absolute;
+// margin-top: -11px;
+// font-size: 11px;
+// }
+// .route_detail {
+//     float: left;
+//     position: relative;
+//     height: 234px;
+//     background-color: #f7f8f9;
+//     padding: 81px 19px 16px 0;
+//     border-radius: 15px;
+//     box-shadow: 5px -2px 1px #a5a5a5;
+//     margin-top: 30px;
+//     li{
+//         list-style: disc; 
+//         float: none; 
+//          line-height:6vh; 
+//          b{
+//              color: green;
+//          }
+//     }
+//       ul{
+//           line-height: 0%;
+//       }
+//     /* padding: 10px; */
+   
+//     .buttonStyle{
+//         position: absolute;
+//         /* left: 380px; */
+//         /* bottom: 270px; */
+//         right: 30px;
+//         top: 15px;
+      
+//         height: 36px;
+//         border-radius: 16px;
+//         md-icon-button{
+//             float: left;
+//             padding: 5px 13px 0px 17px;
+//             color: white;
+//             border-right: 1px solid;
+//         }
+      
+        
+//     }
+// }
+
+// /deep/ .mat-menu-panel.test{
+   
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+
+// }
+
+// /deep/ .mat-menu-panel.test_1{
+   
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff; 
+//     margin-top:48px; 
+// } 
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  #toast {
+    visibility: hidden;
+    max-width: 300px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+  
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+  #toast #img{
+  width: 50px;
+  height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+  
+    
+    background-color: #111;
+    color: #fff;
+  }
+  #toast #desc{
+  
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+  white-space: nowrap;
+  }
+  
+  #toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+  }
+  
+  div[title="Stop drawing"] {
+        
+    height: 28px;
+    width: 28px;
+    cursor: pointer;
+  }
+  
+  div[title="Draw a circle"] {
+   
+    height: 28px;
+    width: 28px;
+    cursor: pointer;
+  }
+  
+  div[title="Draw a rectangle"] {
+    height: 28px;
+    width: 28px;
+    cursor: pointer;
+  }
+  
+  
+  
\ No newline at end of file
diff --git a/src/app/route-set/route-set.component.spec.ts b/src/app/route-set/route-set.component.spec.ts
new file mode 100644
index 0000000..a91be36
--- /dev/null
+++ b/src/app/route-set/route-set.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteSetComponent } from './route-set.component';
+
+describe('RouteSetComponent', () => {
+  let component: RouteSetComponent;
+  let fixture: ComponentFixture<RouteSetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RouteSetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RouteSetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/route-set/route-set.component.ts b/src/app/route-set/route-set.component.ts
new file mode 100644
index 0000000..b39e65c
--- /dev/null
+++ b/src/app/route-set/route-set.component.ts
@@ -0,0 +1,577 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ContactService } from '../contact.service';
+import { PoiListComponent } from '../poi-list/poi-list.component';
+import { MdDialog } from '@angular/material';
+
+declare var google: any;
+declare var $:any;
+@Component({
+  selector: 'app-route-set',
+  templateUrl: './route-set.component.html',
+  styleUrls: ['./route-set.component.scss']
+})
+export class RouteSetComponent implements OnInit {
+  superAdmin: any;
+  speed_alert:boolean=true;
+  speedAlert:any;
+  destination_route: any;
+  sourceRoute: any;
+  before:any;
+  fieldArr=[];
+  logoutbut:boolean;
+  cust:boolean=false;
+  logo:any;
+  auto:any;
+  myControl:any;
+  text:any;
+  fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+  showImage:any;
+  groups=[];
+  group_info:any;
+  routeName:any;
+  deviceId:any;
+  device_update:any;
+  dbMap:any;
+  options: any;
+  deviceArr: any=[];
+   count = 0;
+  directionsDisplay: any;
+  ll: { location: any; stopover: boolean; };
+  wapointArray: any[];
+  
+  constructor(private router: Router,private contactService: ContactService,public dialog: MdDialog) {
+      }
+
+  ngOnInit() {
+    this.loadropdown();
+    // var inputId =  'address' +  this.count++; 
+    // var t = {
+    //   aid: inputId
+    // }
+    
+    // this.fieldArr.push(t);
+    // var temp = setTimeout(()=>{
+    //   this.fieldArr[0]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId))
+    //   clearTimeout(temp);
+    // },5000)
+  
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];  
+     window.localStorage['DataUpdate'] = 'True'
+    
+   
+     this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+     this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+ 
+     this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+     if(this.custtype == true){
+      this.cust = true;
+    }  
+
+    let  foods = [ ];
+ 
+    if(this.mb.charAt(0)=="n"){
+     this.mb = ' '
+   }
+   if( window.localStorage['Custumer'] == 'ON'){
+     this.logoutbut = false
+     this.dealer = true
+  }
+  else{
+      this.logoutbut = true
+  }
+
+
+
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+      var devicesss = data
+   
+        this.options = [];
+      
+        for(let i=0;i<devicesss.devices.length;i++){
+
+          // if(devicesss.devices[i].type_of_device =="Tracker"){
+            let a ={
+              value : devicesss.devices[i].Device_Name,
+              viewValue:devicesss.devices[i].Device_Name,
+              did:devicesss.devices[i].Device_ID,
+              id:devicesss.devices[i]._id,
+              user:devicesss.devices[i].user,
+              // email: devicesss.devices[i].Email_ID,
+              // deviceType: devicesss.devices[i].type_of_device,      
+            }
+            a['selectedValue'] = devicesss.devices[i]._id ; 
+        
+            this.options.push(a);
+          // }
+        }
+
+     
+          this.loadropdown();
+        
+
+      
+          // console.log("ignition option",this.options);
+          let that = this;
+          // setTimeout(()=>{ 
+          // },100)  
+      
+      });
+
+    
+
+  
+
+  this.initMap();
+
+  }
+  loadropdown() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+    setTimeout(() => {
+      $('#dbselect').multipleSelect({
+        width: 200,
+        placeholder: 'Select Vehicle',
+        filter: true,
+ 
+      })
+  
+   
+    }, 100);
+ 
+  }
+
+
+
+// ===========================
+sourceAddress:any;
+autocompleteSource:any;
+inputDestination:any;
+autocompleteDestination:any;
+// directionsDisplay:any;
+// directionsService:any;
+source_address:any;
+destination_address:any;
+source_add:any;
+dest_add:any;
+polyArray=[];
+finlCoords=[];
+path=[];
+curr_position:any;
+initMap() {
+var outerThis=this;
+
+  if (navigator.geolocation) {
+
+    if(location.protocol != 'https:'){
+      this.contactService.getlatLong().subscribe(res=>{
+        console.log(res);
+        outerThis.curr_position = {
+         
+            lat: res.lat,
+            lng: res.lon
+          
+        };
+
+        outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
+          center: {
+              lat:  outerThis.curr_position.lat,
+              lng:  outerThis.curr_position.lng
+          },
+          zoom: 18
+      });    
+
+      var infoWindow = new google.maps.InfoWindow;
+      infoWindow.setPosition(outerThis.curr_position);
+      infoWindow.setContent('Current location');
+      infoWindow.open(outerThis.dbMap);
+      outerThis.dbMap.setCenter(outerThis.curr_position);
+       
+      })
+    }
+    else{
+      navigator.geolocation.getCurrentPosition(function(position) {   
+        outerThis.curr_position = {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        }  
+        // console.log(outerThis.curr_position);
+  
+        outerThis.dbMap = new google.maps.Map(document.getElementById('mapp'), {
+          center: {lat:  outerThis.curr_position.lat, lng: outerThis.curr_position.lng},
+          zoom: 15
+        });
+  
+      var infoWindow = new google.maps.InfoWindow;
+        infoWindow.setPosition(outerThis.curr_position);
+        infoWindow.setContent('Current location');
+        infoWindow.open(outerThis.dbMap);
+        outerThis.dbMap.setCenter(outerThis.curr_position);
+     
+      }) 
+
+    }
+  
+
+   }
+ 
+   this.source_address = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+   this.destination_address = new google.maps.places.Autocomplete(document.getElementById('txtDestination'));
+
+   google.maps.event.addListener(this.destination_address, 'place_changed', function() {
+    console.log("inside place changed function");
+  var latLng =  outerThis.destination_address.getPlace().geometry.location;
+  console.log('latLng',latLng);
+    outerThis.ll ={
+      location : new google.maps.LatLng(latLng.lat(),latLng.lng()),
+      stopover:false
+    }
+    // outerThis.waypoints.push(ll);  
+    
+}) 
+
+   
+}
+
+
+acc_position:any;
+waypoints:any;
+getRoute(){
+  this.waypoints =[];
+  var outerThis=this;
+  this.source_address = document.getElementById('txtSource');
+
+  debugger;
+  console.log('this.fieldArr',this.fieldArr.length);
+  if(this.fieldArr.length == 1){
+    
+    this.waypoints.push(this.ll);  
+  }else{
+    this.waypoints.push(this.ll);
+        for(var k = 0; k<this.fieldArr.length-1 ;k++){
+         
+       
+          if(this.fieldArr[k].latLng!=undefined){
+            var pp = {
+              location : new google.maps.LatLng(this.fieldArr[k].latLng.lat(),this.fieldArr[k].latLng.lng()),
+              stopover:false
+            }
+  
+            outerThis.waypoints.push(pp);  
+          }
+ 
+        }
+  }
+  console.log('outerThis.waypoints',this.waypoints);
+  // var destination_address= document.getElementById('txtDestination');
+    var ds = document.getElementById('txtDestination');
+  if(this.fieldArr.length >0){
+    // this.destination_address = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
+    var ps = document.getElementById(this.fieldArr[this.fieldArr.length -1]['aid']);
+  
+  }
+
+  this.sourceRoute=this.source_address.value;
+  console.log(this.sourceRoute);  
+  this.destination_route = (this.fieldArr.length >0)?ps['value']:ds['value'];
+  console.log(this.sourceRoute,this.destination_route)
+  // this.way_point_value = this.waypoints_address.value;
+
+//  console.log
+  // var current_add_1 = new google.maps.LatLng(outerThis.curr_position.lat, outerThis.curr_position.lng);
+  var mapOptions = {
+      center: {lat:  this.curr_position.lat, lng: this.curr_position.lng},
+      zoom: 15,
+     
+  };
+
+  
+var map = this.dbMap;
+if(outerThis.directionsDisplay != undefined) { 
+ 
+  outerThis.directionsDisplay.setMap(null);
+  outerThis.directionsDisplay = null;
+ }
+var directionsService = new google.maps.DirectionsService;
+ outerThis.directionsDisplay = new google.maps.DirectionsRenderer({
+    draggable: true,
+    map: map, 
+  });
+  google.maps.event.addListener(outerThis.directionsDisplay, 'click', function(h) {
+    // console.log(h.latLng.lat(),h.latLng.lng());
+  });
+
+  outerThis.directionsDisplay.addListener('directions_changed', function() {
+    outerThis.computeTotalDistance(outerThis.directionsDisplay.getDirections());
+  });  
+
+  this.displayRoute(this.sourceRoute, this.destination_route, directionsService,outerThis.directionsDisplay,map,this.waypoints)
+
+ }
+
+ 
+
+  waypoints_path = [];
+  overview_path_latlng = [];
+
+//  method for total display route 
+
+  displayRoute(origin, destination, service, display,map,waypts) {
+    console.log('origin=>',origin);
+    console.log('destination=>',destination);
+
+var outerThis = this;
+  service.route({
+    origin: origin,
+    destination: destination, 
+    waypoints:waypts,
+    travelMode: 'DRIVING',   
+    avoidTolls: true
+  }, function(response, status) {
+    if (status === 'OK') {
+      outerThis.path=[];
+      outerThis.overview_path_latlng=[];
+      display.setDirections(response);
+      // console.log(response);
+      // var currentRoute = currentRouteArray.overview_path;
+       var currentRouteArray = response.routes[0].overview_path;
+      //  console.log(currentRouteArray);
+       for(var i = 0 ; i<currentRouteArray.length;i++){
+
+       var routePath = {
+          lat:currentRouteArray[i].lat(),
+          lng:currentRouteArray[i].lng()
+        }
+        outerThis.path.push(routePath);
+      }
+      outerThis.overview_path_latlng = outerThis.path;
+      // console.log(outerThis.overview_path_latlng);
+
+      display.addListener('directions_changed', function() {    
+      //  outerThis.addInfo();
+      console.log("Inside Direction changed");
+       var t  =  display.getDirections();
+      //  console.log(t);
+
+       var overview_path = t.routes[0].overview_path
+       
+            // console.log(overview_path);
+
+            // console.log(t.request.waypoints);
+            outerThis.waypoints_path=[];
+            outerThis.overview_path_latlng=[];
+            outerThis.wapointArray=[];
+
+       for(var j = 0 ; j<t.request.waypoints.length;j++){
+         var waypointLatlng = {
+           lat:t.request.waypoints[j].location.lat(),
+           lng:t.request.waypoints[j].location.lng()
+         }
+       outerThis.waypoints_path.push(waypointLatlng);
+       }
+       console.log('outerThis.waypoints_path',outerThis.waypoints_path);
+      
+       for(var k = 0 ; k<overview_path.length;k++){
+        var pathLatLng = {
+          lat:overview_path[k].lat(),
+          lng:overview_path[k].lng()
+        }
+
+        outerThis.overview_path_latlng.push(pathLatLng);
+      }   
+
+      console.log('outerThis.overview_path_latlng.push(pathLatLng)', outerThis.overview_path_latlng.push(pathLatLng));
+
+      //  console.log("pathLatlng",outerThis.overview_path_latlng);
+
+      //  console.log("Waypoints" ,outerThis.waypoints_path);    
+         });   
+      // function for get lat long array ends here 
+
+    } else {
+      // console.log('error in display route!!!')
+      alert('Could not display directions due to: ' + status);
+    }
+  });
+
+}
+// method for calculate total distance 
+ computeTotalDistance(result) {
+  var total = 0;
+  var myroute = result.routes[0];
+  for (var i = 0; i < myroute.legs.length; i++) {
+    total += myroute.legs[i].distance.value;
+  }
+  total = total / 1000;
+  document.getElementById('total').innerHTML = total + ' km';
+}
+rName:any;
+data_descip:any;
+emmnerr:any;
+tost1(divid){
+  if(divid == "routeErr"){
+    this.data_descip =  "Please select route "
+     launch_toast();
+   }
+   else if(divid == "rnameErr"){
+     this.data_descip =  "Please type route name"
+     launch_toast();
+   }
+     function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+   }
+    }
+
+payloadArray=[];
+callDis(data){
+  
+  this.contactService.addPOICol(data).subscribe(resp=>{
+    // console.log("add poi",resp);
+   
+  })
+}
+saveRoute(){
+  let that = this;
+  this.payloadArray=[];
+  this.finlCoords=[];
+  this.rName;
+  // console.log(this.rName)
+  this.sourceRoute;this.destination_route;
+  if((this.sourceRoute==undefined)||(this.destination_route==undefined)||(this.sourceRoute==null)||(this.destination_route==null)){
+    // console.log("Please select route !!!");
+    this.tost1("routeErr");
+
+  }
+  else if((this.rName==undefined)||(this.rName==null)){
+    // console.log("Please select route name");
+    this.tost1("rnameErr");
+  }
+  else{
+    this.deviceArr=[];
+    this.deviceArr =  $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(this.deviceArr);
+    for(var j=0;j<this.overview_path_latlng.length;j++){
+    var lattitude = this.overview_path_latlng[j].lat;
+    var longitude = this.overview_path_latlng[j].lng;
+    this.finlCoords.push([longitude,lattitude])
+    }
+
+
+
+    this.wapointArray=[];
+    // debugger;
+    console.log(this.waypoints);
+    for(var z = 0 ; z<this.waypoints.length;z++){
+      if(this.waypoints[z] != undefined){
+        var lat = this.waypoints[z].location.lat();
+        var long = this.waypoints[z].location.lng();
+      var loc = { location : {
+          lat : lat,
+          lng : long
+        }
+      }
+        this.wapointArray.push(loc);
+      }
+  
+    }    
+    console.log('this.wapointArraythis.wapointArray',this.wapointArray);
+
+    let routeDetail={
+      "src":this.sourceRoute,
+      "dest":this.destination_route,
+      "name":this.rName,
+      "user":this.useridd,
+      "path":this.finlCoords,
+      "poi":this.payloadArray,
+      "status":"Active"
+    };
+
+
+      if(this.wapointArray.length>0){
+         routeDetail['wayPoints'] = this.wapointArray;
+      }
+    if((this.speed_alert === true)&&(this.speedAlert != undefined)){
+      routeDetail['speed_alert'] = this.speedAlert;
+    }
+    if(this.deviceArr.length != 0){
+      routeDetail['device'] = this.deviceArr;
+
+    }
+    console.log(routeDetail);
+   
+    console.log('this is final payload',routeDetail)
+    this.contactService.saveRoute(routeDetail)
+      .subscribe(res => {
+        this.router.navigateByUrl("vehicleRoute");
+      })
+  }
+
+
+}
+
+
+
+additionalRouteInfo:any;
+saveInfoObject=[];
+
+addField(){
+ 
+  var inputId =  'address' +  this.count++; 
+  var t = {
+    aid: inputId,
+    address:''
+  }
+  this.fieldArr.push(t);
+  
+  var temp = setTimeout(()=>{
+    this.fieldArr[this.fieldArr.length -1]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    console.log('this.fieldArr',this.fieldArr);
+    clearTimeout(temp);
+  },2000)
+
+
+ 
+}
+
+deleteAddressField(ind){
+  console.log(ind);
+
+    this.fieldArr.splice(ind,1);
+    console.log('this.fielArr',this.fieldArr);
+    this.getRoute();
+}
+
+
+getClickEvent(i){
+  var that = this;
+  console.log("inside function");
+  console.log(i);
+   google.maps.event.addListener(this.fieldArr[i].address, 'place_changed', function() {
+        console.log("inside place changed function");
+      var latLng =   that.fieldArr[i].address.getPlace().geometry.location;
+
+        that.fieldArr[i]['latLng'] = latLng;
+        console.log(that.fieldArr);
+  })
+}
+
+
+}
+
+
diff --git a/src/app/rto-master/rto-master.component.html b/src/app/rto-master/rto-master.component.html
new file mode 100644
index 0000000..18fbc8b
--- /dev/null
+++ b/src/app/rto-master/rto-master.component.html
@@ -0,0 +1,174 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+
+  <div class="row" style="margin:0px">
+    <div class="col-12">
+      <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+    </div>
+  </div>
+
+  <div class="accordion" id="accordionExample">
+    <div class="card">
+      <div class="card-header" id="headingOne">
+        <h2 class="mb-0">
+          <button class="btn btn-link" (click)="isEdit=!isEdit" type="button" data-toggle="collapse" data-target="#collapseZero"
+            aria-expanded="true" aria-controls="collapseZero">
+           RTO Master
+          </button>
+
+          <button *ngIf="!isEdit" class="btn btn-primary btn-sm float-sm-right ml-2" type="button" (click)="RTOForm.reset()"
+            data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Add
+            </button>
+
+          
+        </h2>
+      </div>
+
+      <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+        <div class=col-sm-12>
+         
+         
+          <div class="table-responsive">
+            <table class="table table-striped table-hover "
+              style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+              <thead>
+                <tr>
+                 
+                  <th>{{'State' | translate}}</th>
+                  <th>{{'City' | translate}}</th>
+                  <th>{{'RTO Name' | translate}}</th>
+                  <th>{{'RTO Number' | translate}}</th>
+                  <th>{{'Status' | translate}}</th>
+                  <th>{{'Edit.' | translate}}</th>
+                
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let item of RtoData">
+                  <td>{{item.state}}</td> 
+                  <td>{{item.city}}</td>
+                  <td>{{item.RTO_Name}}</td>
+                  <td>{{item.RTO_Code}}</td>
+                  <td>{{item.status}}</td>
+                  <td><i class="fas fa-edit" (click)="edit(item)"  data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"></i></td>
+                  <td><i class="fas fa-trash" (click)="delete(item)"></i></td>
+
+                </tr>
+              
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
+
+
+      <div class="accordion" id="accordionExample">
+
+        <div class="card">
+
+          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+            <div class="card-body">
+
+              <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+                <div class="col-sm-12" style="text-align: left;font-size: initial;">
+                  <form [formGroup]="RTOForm" (ngSubmit)="submit()">
+
+                    <div class="form-group row">
+                      <label for="name" class="col-sm-2 col-form-label">Name</label>
+                      <div class="col-sm-10">
+                        <input formControlName="RTO_Name" type="text" class="form-control" id="name" placeholder="Enter RTO Name">
+                      </div>
+                    </div>
+                    <div class="form-group row">
+                      <label for="code" class="col-sm-2 col-form-label">RTO Code</label>
+                      <div class="col-sm-10">
+                        <input formControlName="RTO_Code" type="text" class="form-control" id="code" placeholder="Enter RTO Code">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="city" class="col-sm-2 col-form-label">City</label>
+                      <div class="col-sm-10">
+                        <input formControlName="city" type="text" class="form-control" id="city" placeholder="Enter City">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="status" class="col-sm-2 col-form-label">Status</label>
+                      <div class="col-sm-10">
+                        <input formControlName="status" type="text" class="form-control" id="status" placeholder="Enter Status">
+                      </div>
+                    </div>
+
+                    <div class="form-group row">
+                      <label for="state" class="col-sm-2 col-form-label">State</label>
+                      <div class="col-sm-10">
+                        <select class="form-control" id="state" formControlName="state">
+                        <option *ngFor="let ustate of Indianstate" [value]="ustate">
+                          {{ustate}}
+                        </option>
+                      </select>
+                    </div>
+                    </div>
+
+                    <div class="text-center mt-4">
+                      <button class="btn btn-primary btn-md" type="submit" data-toggle="collapse" data-target="#collapseZero"
+                      aria-expanded="true" aria-controls="collapseZero">{{title}}</button>
+
+                    </div>
+
+                  </form>
+                </div>
+              </div>
+              <div class="row">
+                <div class=col-sm-12>
+                  <!-- <table class="table table-striped table-hover "
+                    style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                    <thead>
+                      <tr>
+                        <th>{{'IMEI' | translate}}</th>
+                        <th>{{'Vendor' | translate}}</th>
+                        <th>{{'Bill date' | translate}}</th>
+                        <th>{{'Bill no' | translate}}</th>
+                        <th>{{'Device model no' | translate}}</th>
+                        <th>{{'Iccid no' | translate}}</th>
+                        <th>{{'Mob-1' | translate}}</th>
+                        <th>{{'Mob-2' | translate}}</th>
+                        <th>{{'State' | translate}}</th>
+                        <th>{{'eSIM validaity' | translate}}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr *ngFor="let failedDevices of uploadJSON">
+                        <td style="cursor:pointer">{{failedDevices.IMEI}}</td>
+                        <td style="cursor:pointer">{{failedDevices.Vendor_Name}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Bill date']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Bill no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Device model no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Iccid no']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Mob-1']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['Mob-2']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['State']}}</td>
+                        <td style="cursor:pointer">{{failedDevices['eSIM validaity']}}</td>
+
+
+                      </tr>
+                    </tbody>
+                  </table> -->
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+
+     
+    </div>
+  </div>
+</div>
+
diff --git a/src/app/rto-master/rto-master.component.scss b/src/app/rto-master/rto-master.component.scss
new file mode 100644
index 0000000..cbbb14b
--- /dev/null
+++ b/src/app/rto-master/rto-master.component.scss
@@ -0,0 +1,17 @@
+.topDiv {
+  padding-top: 20px;
+  background: whitesmoke;
+  height: 100vh;
+}
+.bg-blue {
+  background-color: #00c0ef !important;
+}
+.bg-green {
+  background-color: #00a65a !important;
+}
+.bg-orange {
+  background-color: #f39c12 !important;
+}
+.bg-red {
+  background-color: #d9534f !important;
+}
diff --git a/src/app/rto-master/rto-master.component.spec.ts b/src/app/rto-master/rto-master.component.spec.ts
new file mode 100644
index 0000000..076f170
--- /dev/null
+++ b/src/app/rto-master/rto-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RtoMasterComponent } from './rto-master.component';
+
+describe('RtoMasterComponent', () => {
+  let component: RtoMasterComponent;
+  let fixture: ComponentFixture<RtoMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RtoMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RtoMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/rto-master/rto-master.component.ts b/src/app/rto-master/rto-master.component.ts
new file mode 100644
index 0000000..3c815c2
--- /dev/null
+++ b/src/app/rto-master/rto-master.component.ts
@@ -0,0 +1,107 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ContactService } from '../contact.service';
+
+@Component({
+  selector: 'app-rto-master',
+  templateUrl: './rto-master.component.html',
+  styleUrls: ['./rto-master.component.scss']
+})
+export class RtoMasterComponent implements OnInit {
+  RtoData;
+  RTOForm:FormGroup;
+  Indianstate = [ "Andhra Pradesh",
+                "Arunachal Pradesh",
+                "Assam",
+                "Bihar",
+                "Chhattisgarh",
+                "Goa",
+                "Gujarat",
+                "Haryana",
+                "Himachal Pradesh",
+                "Jammu and Kashmir",
+                "Jharkhand",
+                "Karnataka",
+                "Kerala",
+                "Madhya Pradesh",
+                "Maharashtra",
+                "Manipur",
+                "Meghalaya",
+                "Mizoram",
+                "Nagaland",
+                "Odisha",
+                "Punjab",
+                "Rajasthan",
+                "Sikkim",
+                "Tamil Nadu",
+                "Telangana",
+                "Tripura",
+                "Uttarakhand",
+                "Uttar Pradesh",
+                "West Bengal",
+                "Andaman and Nicobar Islands",
+                "Chandigarh",
+                "Dadra and Nagar Haveli",
+                "Daman and Diu",
+                "Delhi",
+                "Lakshadweep",
+                "Puducherry"]
+  constructor(private fb:FormBuilder,private contactService:ContactService) { }
+
+  ngOnInit() {
+    this.RTOForm=this.fb.group({
+      state:[],
+      city:[],
+      RTO_Code:[],
+      RTO_Name:[],
+      status:[]
+    })
+  this.getRTOdata()
+  }
+
+  getRTOdata(){ 
+    this.contactService.get('/RTO_master/get').subscribe((res:any)=>{
+      this.RtoData=res;
+    })
+
+    
+  }
+
+  submit(){
+    console.log(this.RTOForm.value);
+    if(this.isEdit){
+      var data={
+        body:this.RTOForm.value,
+        _id:this.id
+      }
+       this.contactService.post('/RTO_master/update',data).subscribe((res=>{
+        console.log(res);
+        this.title="Submit"
+        this.getRTOdata();
+        this.isEdit=!this.isEdit
+      }))
+    }else{
+      this.contactService.post('/RTO_master/add',this.RTOForm.value).subscribe((res=>{
+        console.log(res);
+        this.getRTOdata()
+      }))
+
+    }
+  }
+  title="Submit"
+  isEdit:Boolean=false;
+  id
+  edit(value){
+    this.id=value._id
+    this.RTOForm.patchValue(value);
+    this.isEdit=!this.isEdit;
+    this.title="Update"
+  }
+
+  delete(item){
+    this.contactService.get('/RTO_master/delete?_id='+item._id).subscribe(res=>{
+      this.getRTOdata()
+    })
+  }
+
+}
diff --git a/src/app/rule/rule.component.css b/src/app/rule/rule.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/rule/rule.component.html b/src/app/rule/rule.component.html
new file mode 100644
index 0000000..cf429f4
--- /dev/null
+++ b/src/app/rule/rule.component.html
@@ -0,0 +1,35 @@
+<h5>Add new rule</h5><br>
+<form class="form-group"  #lgForm="ngForm">   
+  <label>Action -</label><md-select name="typdev" placeholder="" style="width:37%;margin-top:-8%;" 
+   [(ngModel)]="neww">
+         <md-option *ngFor="let food of foods" [value]="food.viewValue" >
+         {{ food.viewValue }}
+         </md-option>
+     </md-select>&nbsp;&nbsp;&nbsp;
+     Condition - <md-select name="typdev" placeholder="" 
+     style="width:37%;margin-top:-8%;" [(ngModel)]="neww">
+          <md-option *ngFor="let foodd of foodss" [value]="foodd.viewValue" >
+          {{ foodd.viewValue }}
+          </md-option>
+      </md-select><br>
+      <label>Info -&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><md-form-field class="example-full-width " style="width:37%">
+         <input mdInput type="text" [(ngModel)]="info" name="info"placeholder="" required> </md-form-field>
+         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label>Value -&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label><md-form-field class="example-full-width " style="width:37%">
+            <input mdInput type="text" [(ngModel)]="info" name="info"placeholder="" required> </md-form-field><br>
+            <input type="submit" class="btn btn btn-success" style="float:center;" value="Generate rule" (click)="addContact()" />
+         <!--   <div class ="form-group">
+       <md-form-field class="example-full-width width">
+       <input mdInput type="text" [(ngModel)]="first_name" name="first_name"placeholder="First Name" required> 
+       <md-error class="required">Enter First Name</md-error>
+      </md-form-field>
+      
+   </div>           
+  <div class ="form-group"> 
+      <md-form-field class="example-full-width width">
+      <input mdInput type="text" [(ngModel)]="last_name" name="last_name" placeholder="Last Name" required>
+      <md-error class="required">Enter Last Name</md-error>
+       </md-form-field>
+  </div> -->
+  <!-- <input type="submit" class="btn btn btn-success" style="float: left;" value="Submit" (click)="addContact()" />
+  --> 
+</form>
\ No newline at end of file
diff --git a/src/app/rule/rule.component.spec.ts b/src/app/rule/rule.component.spec.ts
new file mode 100644
index 0000000..9e36b30
--- /dev/null
+++ b/src/app/rule/rule.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RuleComponent } from './rule.component';
+
+describe('RuleComponent', () => {
+  let component: RuleComponent;
+  let fixture: ComponentFixture<RuleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RuleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RuleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/rule/rule.component.ts b/src/app/rule/rule.component.ts
new file mode 100644
index 0000000..2bc5590
--- /dev/null
+++ b/src/app/rule/rule.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit, Inject  } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+
+@Component({
+  selector: 'app-rule',
+  templateUrl: './rule.component.html',
+  styleUrls: ['./rule.component.css']
+})
+export class RuleComponent implements OnInit {
+  neww :any;
+  info :any;
+  foods = [
+    {value: 'SMS', viewValue: 'SMS'},
+    {value: 'Email', viewValue: 'Email'},
+    {value: 'Push', viewValue: 'Push Notification'},
+  ];
+  foodss = [
+    {value: 'Equal', viewValue: 'Equal(==)'},
+    {value: 'Greater', viewValue: 'Greater(<)'},
+    {value: 'Lesser', viewValue: 'Lesser(>)'},
+    {value: 'Greater-Equal', viewValue: 'Greater-Equal(<=)'},
+    {value: 'Lesser-Equal', viewValue: 'Lesser-Equal(>=)'},
+  ];
+  constructor(public dialogRef: MdDialogRef<RuleComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { }
+    onNoClick(): void {
+      this.dialogRef.close();
+    }
+    addContact(){
+      
+    }
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/scheduleb.ts b/src/app/scheduleb.ts
new file mode 100644
index 0000000..8a8b2f4
--- /dev/null
+++ b/src/app/scheduleb.ts
@@ -0,0 +1,10 @@
+export class Scheduleb{
+    _id?: string;
+    did: string;
+    on_time: string;
+    off_time: string;
+    wexp: Number;
+    w_day: [boolean];   
+    on_uid:string;
+    off_uid:string;
+}
diff --git a/src/app/schedulec.ts b/src/app/schedulec.ts
new file mode 100644
index 0000000..45d3f2c
--- /dev/null
+++ b/src/app/schedulec.ts
@@ -0,0 +1,11 @@
+export class Schedulec{
+    _id?: string;
+    did: string;
+    fdate: string;
+    tdate: string;
+    ftime: string;
+    ttime: string;
+    mexp: Number;
+    on_uid:string;
+    off_uid:string;
+}
diff --git a/src/app/search-filter.pipe.spec.ts b/src/app/search-filter.pipe.spec.ts
new file mode 100644
index 0000000..d4dcbe5
--- /dev/null
+++ b/src/app/search-filter.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { SearchFilterPipe } from './search-filter.pipe';
+
+describe('SearchFilterPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SearchFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/search-filter.pipe.ts b/src/app/search-filter.pipe.ts
new file mode 100644
index 0000000..c344b1d
--- /dev/null
+++ b/src/app/search-filter.pipe.ts
@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'searchText'
+})
+export class SearchFilterPipe implements PipeTransform {
+
+  transform(items: any[], searchText: string): any[] {
+   
+    console.log(items)
+    if(!items) return [];
+    if(!searchText) return items;
+  //  searchText = searchText.toLowerCase();
+      return items.filter( it => {
+       console.log(it);
+    //  return it.toLowerCase().includes(searchText);
+    });
+   }
+  
+
+}
diff --git a/src/app/services/services.component.html b/src/app/services/services.component.html
new file mode 100644
index 0000000..d651ee4
--- /dev/null
+++ b/src/app/services/services.component.html
@@ -0,0 +1,165 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+
+<!-- <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <title>GPS AUTO TRACK | Services</title>
+    
+    <!-- core CSS -->
+    <!-- <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/font-awesome.min.css" rel="stylesheet">
+    <link href="css/animate.min.css" rel="stylesheet">
+    <link href="css/style.css" rel="stylesheet">
+    <link href="css/responsive.css" rel="stylesheet">
+    <style type="text/css"> -->
+        <!-- #services img {
+            border:1px solid #ff7905;
+        } -->
+    <!-- </style> -->
+<!-- </head>/head --> 
+
+<body>
+
+    <!-- <header id="header">
+        <nav class="navbar navbar-inverse" role="banner">
+            <div class="container">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                     <a class="navbar-brand" href="index-2.html"><img src="images/autogpslogo.png" height="100"/></a>
+                </div> -->
+                
+                <!-- <div class="collapse navbar-collapse navbar-right">
+                    <ul class="nav navbar-nav">
+                        <li><a href="index-2.html">Home</a></li>
+                        <li><a href="about-us.html">About Us</a></li>
+                        <li class="active"><a href="services.html">Services</a></li>
+                        <li><a href="contact-us.html">Contact</a></li>
+                        <li><a href="http://1.gpsautotracks.com/"target="_blank"target="_blank">Login</a></li>
+                    </ul>
+                </div> -->
+            <!-- </div>/.container -->
+        <!-- </nav>/nav -->
+        
+    <!-- </header>/header -->
+    <section id="services" class="service-item">
+	   <div class="container">
+            <div class="center wow fadeInDown" >
+                <h2 style="text-align: center;
+                padding-top: 25px;">OUR SERVICES</h2>
+                <p class="lead" style="color:#6b6666;; font-size:30px; line-height:35px;text-align:center;padding-bottom:20px"><strong>World Class Highly Advanced Vehicle System</strong></p>
+            </div>
+
+            <div class="row wow fadeInDown" style="text-align:center; margin-bottom:40px;">
+
+                <div class="col-sm-12 col-md-4">
+                    <img src="../../assets/image/cartracking.png" style="width:70%"/>
+                    <h2>Car Tracking System</h2>
+                    <p style="color:#6b6666;">{{org_name}} Provides an immense vehicle Tracking System to track vehicles live on map.<br />
+                        A car tracking system comes in Handy when it comes to tracking your four wheeler. This tracking comes in Handy when you or anyone from your family is using the car. Imagine a situation where your son is travelling by the car and does not come home at the usual time. You are worried sick but don't have any choice except to wait for your child to receive the call or update you.
+
+                    </p>
+                </div>
+
+                <div class="col-sm-12 col-md-4">
+                    <img src="../../assets/image/biketracking.png" style="width:70%" />
+                    <h2>Bike Tracking System</h2>
+                    <p style="color:#6b6666;">Better your bike security by adopting the most effective protection. track the real time location of your stolen vehicle.<br />
+                        At {{org_name}}, our bike tracking system can be used for personal or Individual as well as commercial Purposes. As we have already specified, the need of GPS tracking system can very depending on the fleet. Basically, The GPS tracker can help you to track the performance of your sales staff or delivery staff it can also be used on an individual level.
+
+                    </p>
+                </div>
+
+                <div class="col-sm-12 col-md-4">
+                    <img src="../../assets/image/trucktracking.png" style="width:70%" />
+                    <h2>Truck Tracking System</h2>
+                    <p style="color:#6b6666;">Track your Truck, Locate them on live map and monitor your vehicle activity like speed, engine status.<br />
+                        If you are into the transport business, you would understand the importance of keeping track of your fleet. The traditional approach involved relaying on the call you made to the truck driver hoping he would give you the accurate details about the whereabouts the goods. But With the new truck tracking System by {{org_name}}, these entire problems are solved.
+
+                    </p>
+                </div>                                        
+            </div><!--/.row-->
+           <div class="row wow fadeInDown" style="text-align:center;">
+
+                <div class="col-sm-12 col-md-6">
+                    <img src="../../assets/image/fleetmanagement.jpg" style="width:70%"/>
+                    <h2>Fleet Management</h2>
+                    <p style="color:#6b6666;">With High fuel Costs and driver shortage, it's now more important than ever to improve the management of your fleet.<br />
+                        Reduce risk, improve safety & Security, optimize fleet operations with real time, all satellite GPS tracking and fleet monitoring. Reduce operating expenses and increase profits with computerized telemetric supported vehicle fleet management software. Switch to cloud for cost-efficient, web-based wireless fleet management.
+                        Reduce labor and fuel cost by minimizing idle time and total mileage while getting the same quantity of work done.
+
+                    </p>
+                </div>
+
+                <div class="col-sm-12 col-md-6">
+                    <img src="../../assets/image/personaltracking.jpg" style="width:70%" />
+                    <h2>Personal Tracking System</h2>
+                    <p style="color:#6b6666;">Personal tracking devices help you to track your friends and family such as young children or elderly adults.<br />
+                        If you are a parent and constantly concerned about the whereabouts of your children, you should definitely consider installing a GPS personal Tracker system. It can prove immensely helpful in tracking the location of a vehicle or a person. With this system, you can easily monitor the location of your children by knowing where their car is at a given point of time.
+
+                    </p>
+                </div>                                   
+            </div><!--/.row-->
+        </div><!--/.container-->
+    </section>
+
+    <section id="benifits">
+        <!-- <div class="container"> -->
+           <!-- <div class="center wow fadeInDown"> -->
+                <h2 style="text-align:center">BENIFITS</h2>
+                <p>To maintain the competency of your company you need to have a strong tool that can give tight competition to your rivals. GPS based Vehicle Tracking Devices are one of the integral parts of every business these days which helps to keep a constant eye on your moving asset. Vehicle theft is prime concern for every Vehicle owner. Is there any solution you can prevent this risk for your vehicle? Vehicle Tracking Device fulfills this requirement. Being a real time GPS Tracker, these devices tracks every single move of your vehicle which you can observe from any corner of globe.</p>
+            <!-- </div> 
+        </div> -->
+    </section>
+        <div class="container">
+            <div class="row" style="margin-top:20px">
+                <div class="col-sm-4" style="padding-bottom: 10px;">
+                    <img src="../../assets/image/callus.png" style="width:80%;" />
+                </div>
+                <div class="col-sm-8">
+                    <div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms" style="padding-top:40px;">
+                        <div class="media-body">
+                            <h2 style="color:#6b6666;">Support 24*7</h2>
+                            <p>{{org_name}} delivers world class customer support. The combination of alerts and alerts and end to end transparency simplifies and enhances the identification, analysis and resolution of services issue.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <footer id="footer" class="midnight-blue" style="text-align:center;background: #6b6666;">
+        <div class="container">
+            <div class="row">
+                <div class="col-sm-4" style="color:white;padding-top: 20px;">
+                    &copy; 2017 {{org_name}}. All Rights Reserved
+                </div>
+                <div class="col-sm-4">
+                    <ul >
+                        <li style="color:white"><a href="/home" style="color:white">Home</a></li>
+                        <li style="color:white"><a href="/about-us" style="color:white">About Us</a></li>
+                        <li style="color:white"><a href="/contact-us" style="color:white">Contact Us</a></li>
+                    </ul>
+                </div>
+                <div class="col-sm-4" style="margin-top:20px">
+                   <a href="/home" style="color:white;padding-top: 20px;">Designed by {{org_name}}</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- <script src="js/jquery.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/jquery.isotope.min.js"></script>
+    <script src="js/style.js"></script>
+    <script src="js/wow.min.js"></script> -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/app/services/services.component.scss b/src/app/services/services.component.scss
new file mode 100644
index 0000000..4633686
--- /dev/null
+++ b/src/app/services/services.component.scss
@@ -0,0 +1,87 @@
+
+.services {
+  padding: 0;
+}
+
+.get-started {
+  background: none repeat scroll 0 0 #F3F3F3;
+  border-radius: 3px;
+  padding-bottom: 30px;
+  position: relative;
+  margin-bottom: 18px;
+  margin-top: 60px;
+}
+
+.get-started h2 {
+  padding-top: 30px;
+  margin-bottom: 20px;
+}
+
+.request {
+  bottom: -15px;
+  left: 50%;
+  position: absolute;
+  margin-left: -110px;
+}
+
+.request h4 {
+  position: absolute;
+  width: 220px;
+  position:relative;
+}
+
+.request h4 a{
+  background:#ff7905;
+  color: #fff;
+  font-size: 14px;
+  font-weight: normal;
+  border-radius: 3px;
+  padding: 5px 15px;
+}
+
+.request h4:after {
+  border-color: #ff7905 transparent transparent;
+  border-style: solid;
+  border-width: 12px;
+  bottom: -18px;
+  content: "";
+  height: 0;
+  position: absolute;
+  right: 13px;
+  z-index: -99999;
+}
+
+.request h4:before {
+  border-color: #ff7905 transparent transparent;
+  border-style: solid;
+  border-width: 12px;
+  bottom: -18px;
+  content: "";
+  height: 0;
+  left: 13px;
+  position: absolute;
+  z-index: -99999;
+}
+
+#benifits {
+    padding:32px;
+    background: #f5f5f5;
+    font-size: 14px;
+}
+.footer {
+  background: none repeat scroll 0 0 #2E2E2E;
+  border-top: 5px solid #ff7905;
+  height: 84px;
+  margin-top: 110px;
+}
+
+.footer_left {
+  padding: 10px;
+}
+
+.text-left {
+  color: #FFFFFF;
+  font-size: 12px;
+  margin-top: 15px;
+}
+
diff --git a/src/app/services/services.component.spec.ts b/src/app/services/services.component.spec.ts
new file mode 100644
index 0000000..edf0ce5
--- /dev/null
+++ b/src/app/services/services.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ServicesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/services/services.component.ts b/src/app/services/services.component.ts
new file mode 100644
index 0000000..e5a836b
--- /dev/null
+++ b/src/app/services/services.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-services',
+  templateUrl: './services.component.html',
+  styleUrls: ['./services.component.scss']
+})
+export class ServicesComponent implements OnInit {
+  org_name = '';
+  constructor() { 
+    this.org_name = window.localStorage['organisationName']
+
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/shared.service.ts b/src/app/shared.service.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/shedule.ts b/src/app/shedule.ts
new file mode 100644
index 0000000..973ba8a
--- /dev/null
+++ b/src/app/shedule.ts
@@ -0,0 +1,10 @@
+export class Schedule{
+    _id?: string;
+    did: string;
+    ontime: string;
+    offtime: string;
+    wday: [boolean];
+    dexp: Number;
+    on_uid: string;
+    off_uid:string;
+}
diff --git a/src/app/show-caliberation/show-caliberation.component.html b/src/app/show-caliberation/show-caliberation.component.html
new file mode 100644
index 0000000..8aad83b
--- /dev/null
+++ b/src/app/show-caliberation/show-caliberation.component.html
@@ -0,0 +1,6 @@
+<table style="border:1px solid black;">
+    <tr style="border:1px solid black;" *ngFor="let data1 of data"><label style="padding: .8em;">Voltage</label> 
+      <th style="border:1px solid black;" style="padding: .8em;">{{data1.voltage}}</th>
+      <label style="padding: .8em;">Fuel</label> <td style="border:1px solid black;" style="padding: .8em;">{{data1.fuel}}</td>
+    </tr>
+  </table>
diff --git a/src/app/show-caliberation/show-caliberation.component.scss b/src/app/show-caliberation/show-caliberation.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/show-caliberation/show-caliberation.component.spec.ts b/src/app/show-caliberation/show-caliberation.component.spec.ts
new file mode 100644
index 0000000..2ad4d2d
--- /dev/null
+++ b/src/app/show-caliberation/show-caliberation.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShowCaliberationComponent } from './show-caliberation.component';
+
+describe('ShowCaliberationComponent', () => {
+  let component: ShowCaliberationComponent;
+  let fixture: ComponentFixture<ShowCaliberationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShowCaliberationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowCaliberationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/show-caliberation/show-caliberation.component.ts b/src/app/show-caliberation/show-caliberation.component.ts
new file mode 100644
index 0000000..f6a8fa5
--- /dev/null
+++ b/src/app/show-caliberation/show-caliberation.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {Device} from '../device';
+import {ContactService} from '../contact.service';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+@Component({
+  selector: 'app-show-caliberation',
+  templateUrl: './show-caliberation.component.html',
+  styleUrls: ['./show-caliberation.component.scss'],
+  providers: [ContactService,SidebarComponent]
+})
+export class ShowCaliberationComponent implements OnInit {
+  dname:any;
+  constructor(public dialogRef: MdDialogRef<ShowCaliberationComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,private _flashMessagesService: FlashMessagesService,public sidebar :SidebarComponent){
+   
+   
+      console.log(data);
+    
+     }
+  
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/app/show-route/show-route.component.html b/src/app/show-route/show-route.component.html
new file mode 100644
index 0000000..974a94c
--- /dev/null
+++ b/src/app/show-route/show-route.component.html
@@ -0,0 +1,143 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <!-- <h4>{{'Create route' | translate}}</h4> -->
+      <md-icon style="float: left;font-size: 30px;cursor:pointer;" (click)="goback()">keyboard_arrow_left</md-icon>
+    </div>  
+  </div> 
+  <div class="row">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div>
+    <!-- [(ngModel)]="routeSource" -->
+    <!-- [(ngModel)]="routeDest" -->
+  </div>
+  <div class="row" style="padding:0px">
+    <div  class="col-sm-3 col-md-3 col-lg-3" style="padding:0px">
+      <div class="row" style="margin: 0;padding-top: 10px;background: #f9f6f6; ">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 25px; padding-right: 0px;">
+          <div class="row"  style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p  style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Source' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+              <input id="txtSource" class="form-control" [(ngModel)]="routeSource"  type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="Search Source Address">  
+            </div>
+          </div>
+          <div class="row"  style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+              <p  style="margin-bottom: 0; padding-top: 4px;font-size: 12px">{{'Destination' | translate}}</p>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+              <input id="txtDestination" class="form-control" [(ngModel)]="routeDest" type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="{{routeDest}}">  
+            </div>
+          </div>
+          <div class="row" style="margin: 0;">
+            <div class="col-6" style="padding: 0;">
+              <p style="font-size: 12px">{{'Waypoints' | translate}}</p>
+            </div>
+            <div class="col-6">
+              <i class="fas fa-plus" style="float: right;" (click)="addField()"></i>
+            </div>
+          </div>
+          <div class="row" style="margin: 0;margin-bottom: 10px;" *ngFor="let inputField of fieldArr ; let i = index">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;"> 
+              <i class="fas fa-trash" (click)="deleteAddressField(i)"></i>
+            </div>
+            <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 10px;width: auto;">    
+              <input id="{{inputField.aid}}" class="form-control"  type="text" style="height: 28px; width: 230px; margin-left: 0;" placeholder="{{inputField.astring}}" (change)="getClickEvent(i)">  
+            </div>   
+        </div>
+          <div class="row"  style="margin: 0;margin-bottom: 10px;">
+            <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0px; padding-right: 10px;width: auto;">
+              <p style="margin-bottom: 0; padding-top: 2px;font-size: 12px;">{{'Route Name' | translate}}</p>
+            </div>
+          <div class="col-sm-8 col-md-8 col-lg-8" style="padding-left: 10px; padding-right: 15px;">
+            <input type="text" style="height: 28px;" class="form-control" name="routename" type="text" [(ngModel)]="rName" placeholder="{{'Route Name' | translate}}" />
+           </div>
+          </div>
+              <div class="row" style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Speed Alert' | translate}}</p>          
+                </div>
+                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
+                  <md-checkbox [(ngModel)]="speed_alert" style="float:left;margin-top: 4px;"></md-checkbox>           
+                  <input [disabled] = "speed_alert === false" style="height: 28px;width: 60%;display: inline;float: right;" class="form-control" name="halt" type="number" [(ngModel)]="speedAlert" (change)="changeDetactor($event)" placeholder="00" />             
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
+                  <p>Km/hr</p>
+                 </div>
+              </div>
+              <div class="row"  style="margin: 0;margin-bottom: 10px;">
+                <div class="col-sm-4 col-md-4 col-lg-4" style="padding-left: 0;">
+                  <p style="margin-bottom: 0;font-size: 12px;">{{'Total Distance' | translate}}</p>          
+                </div>
+                <div class="col-sm-5 col-md-5 col-lg-5" style="padding-left: 10px;">  
+                  <p id=total></p>
+                </div>
+                <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 0px;padding-top: 5px;"> 
+                  <p>Kms</p>
+                 </div>
+              </div>
+              <div class="row"  style="margin: 0;margin-top: 20px;">
+                <div class="col-sm-12 col-md-12 col-lg-12" style="padding-left: 0;">
+                  <button style="background-color: red; color: white; float: right;" md-raised-button (click)="getRoute()">{{'Show route' | translate}}</button>   
+                  <button style="background-color: #0e6cfb; color: white; float: right;margin-right: 10px;" md-raised-button (click)="updateRoute()">{{'Update' | translate}}</button>   
+                </div>
+              </div>
+    </div>
+  </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding:0px">
+      <div *ngIf="!show" id="showMap" style="width: 100%; height: 85vh"></div>
+    </div>
+    <div>
+      <div *ngIf="show" id="map2" style="width: 100%; height: 85vh"></div>
+    </div>
+  </div>
+  </div> 
+
+
+
+
+
+
+
+
+
+
+<!-- <html>
+    <head>
+        <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+    
+      </head>
+    <body>
+  
+  <app-all-menus></app-all-menus>
+  <div class="small">
+    <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;">
+      <i class="material-icons">list</i>
+    </button>
+    <md-menu #menu="mdMenu">
+      <a href="#">
+        <h6>DASHBOARD
+          <md-icon style="float:right">dashboard</md-icon>
+        </h6>
+      </a>
+      <a href="#">
+        <h6>RULES
+          <md-icon style="float:right">dock</md-icon>
+        </h6>
+      </a>
+    </md-menu>
+  </div> 
+  <div style="height:50px;">
+    <md-icon style="float: left;font-size: 42px;padding-top: 6px;cursor:pointer;" (click)="goback()">keyboard_arrow_left</md-icon>
+  </div> 
+  <div id="showMap" style="padding: 0px;width: 100%;display: flex;height: 80vh;"></div>
+  </body>
+  </html>
+ -->
diff --git a/src/app/show-route/show-route.component.scss b/src/app/show-route/show-route.component.scss
new file mode 100644
index 0000000..3a61139
--- /dev/null
+++ b/src/app/show-route/show-route.component.scss
@@ -0,0 +1,819 @@
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+
+//   .route{
+//       h2{
+//         text-align: center;
+//         background: #efefef;
+//         color: #6d6d6d;
+//         padding: 10px;
+//       }
+//   }
+
+  
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+  
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+  
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+  
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+  
+//   /* Animation */
+  
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   ::-webkit-scrollbar {
+//     display: none;
+//     }
+// .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 15%;
+//     /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+//     font-family: "Courier New", Courier, monospace;
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }  
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+    
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+  
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+  
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+   
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+    
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+    
+    
+// }
+// #c1 {
+//     float:left;
+ 
+// }
+// .close-thik:after {
+//     content: '✖'; /* UTF-8 symbol */
+//     position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+//   }
+//   [data-tooltip] {
+//     position: relative;
+//     z-index: 2;
+//     cursor: pointer;
+//   }
+  
+//   /* Hide the tooltip content by default */
+//   [data-tooltip]:before,
+// //   [data-tooltip]:after {
+// //     visibility: hidden;
+// //     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+// //     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+// //     opacity: 0;
+// //     pointer-events: none;
+// //   }
+  
+//   /* Position tooltip above the element */
+//   [data-tooltip]:before {
+//     position: absolute;
+//     bottom: 110%;
+//     left: 50%;
+//     margin-bottom: -5px;
+//     margin-left: -40px;
+//     padding: 7px;
+//     width: 100px;
+//     -webkit-border-radius: 3px;
+//     -moz-border-radius: 3px;
+//     border-radius: 3px;
+//     background-color: #000;
+//     background-color: hsla(0, 0%, 20%, 0.9);
+//     color: #fff;
+//     content: attr(data-tooltip);
+//     text-align: center;
+//     font-size: 14px;
+//     line-height: 1.2;
+//   }
+  
+//   /* Triangle hack to make tooltip look like a speech bubble */
+//   [data-tooltip]:after {
+//     position: absolute;
+//     bottom: 150%;
+//     left: 50%;
+//     margin-left: -5px;
+//     width: 0;
+//     border-top: 5px solid #000;
+//     border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+//     border-right: 5px solid transparent;
+//     border-left: 5px solid transparent;
+//     content: " ";
+//     font-size: 0;
+//     line-height: 0;
+//   }
+  
+//   /* Show tooltip content on hover */
+//   [data-tooltip]:hover:before,
+// //   [data-tooltip]:hover:after {
+// //     visibility: visible;
+// //     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+// //     filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+// //     opacity: 1;
+// //   }
+//   button3 {
+//     background-color: Transparent;
+//     background-repeat:no-repeat;
+//     border: none;
+//     cursor:pointer;
+//     overflow: hidden;
+//     outline:none;
+// }
+// .icon-bar {
+//     width: 17%;
+//     background-color: #18262F;
+//     margin-top: -9px;
+//     height: 100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){        
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+    
+//     width: 297px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+   
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// @media screen and (max-width: 900px) {
+//     .icon-bar{
+//         display: none;
+        
+//     }
+//     .sch{
+//         display: none;
+//     }
+//     .first{
+//         width:1%!important;
+//     }
+//     .second{
+//         margin-left: 8px!important;
+//     }
+//     .small{
+//         display: block!important;
+//     }
+//     .image{
+//         display: none;
+//     }
+//     .schlar{
+//         display: block!important;
+//     }
+// }
+// .small{
+//     display: none;
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+// #d:hover { 
+//     color: rgb(14, 102, 18);
+
+    
+// }
+// #ac{
+//     color: rgb(38, 38, 90)
+// }
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+// #active{
+//     text-decoration-line: underline;
+//     text-decoration-color: rgb(66, 26, 245);
+// } 
+// .overlay {
+//     height: 100%;
+//     width: 0;
+//     position: fixed;
+//     z-index: 1;
+//     top: 0;
+//     left: 0;
+//     background-color: rgb(0,0,0);
+//     background-color: rgba(0,0,0, 0.9);
+//     overflow-x: hidden;
+//     transition: 0.5s;
+// }
+
+// .overlay-content {
+//     position: relative;
+//     top: 25%;
+//     width: 100%;
+//     text-align: center;
+//     margin-top: 30px;
+// }
+
+// .overlay a {
+//     padding: 8px;
+//     text-decoration: none;
+//     font-size: 36px;
+//     color: #818181;
+//     display: block;
+//     transition: 0.3s;
+// }
+
+// .overlay a:hover, .overlay a:focus {
+//     color: #f1f1f1;
+// }
+
+// .overlay .closebtn {
+//     position: absolute;
+//     top: 20px;
+//     right: 45px;
+//     font-size: 60px;
+// }
+
+// @media screen and (max-height: 450px) {
+//   .overlay a {font-size: 20px}
+//   .overlay .closebtn {
+//     font-size: 40px;
+//     top: 15px;
+//     right: 35px;
+//   }
+// }
+// agm-map {
+//     height: 300px;
+//   }
+
+//   /* Toast Msg */
+
+
+//   #toast {
+//     visibility: hidden;
+//     max-width: 50px;
+//     height: 50px;
+//     /*margin-left: -125px;*/
+//     margin: auto;
+//     background-color: #333;
+//     color: #fff;
+//     text-align: center;
+//     border-radius: 2px;
+
+//     position: fixed;
+//     z-index: 1;
+//     left: 60%;right:0;
+//     bottom: 80%;
+//     font-size: 13px;
+//     white-space: nowrap;
+// }
+// #toast #img{
+// 	width: 50px;
+// 	height: 50px;
+    
+//     float: left;
+    
+//     padding-top: 16px;
+//     padding-bottom: 16px;
+    
+//     box-sizing: border-box;
+
+    
+//     background-color: #111;
+//     color: #fff;
+// }
+// #toast #desc{
+
+    
+//     color: #fff;
+   
+//     padding: 16px;
+    
+//     overflow: hidden;
+// 	white-space: nowrap;
+// }
+
+// #toast.show {
+//     visibility: visible;
+//     -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+//     animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+// }
+// #myInput {
+//     border-radius: 15px;
+//     /* border: 2px solid #18262F; */
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// }
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px} 
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;} 
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;} 
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+// .mat-slide-toggle-thumb-container {
+//     z-index: auto !important;
+// }
+
+// .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+//     z-index:auto!important;
+    
+// }
+// .mat-menu-panel.mat-menu-before.mat-menu-below{
+//     overflow: hidden !important;
+// }
+// .mat-menu-panel.my-full-width-menu {
+//     max-width: none;
+//     width: 100vw;
+//     margin-left: -8px;
+//     margin-top: 24px;
+//   }
+//   .menu-overflow-hidden {
+//     overflow: hidden !important;
+//   }
+  
+// /* Notification */
+// #nav{list-style:none;margin: 0px;padding: 0px;}
+// #nav li {
+// float: right;
+// margin-right: 20px;
+// font-family: Arial;
+// font-size: 14px;
+// font-weight:bold;
+// }
+// #nav li a{color:#333333;text-decoration:none}
+// #nav li a:hover{color:#1788c0;text-decoration:none}
+
+
+// #notification_li
+// {
+// position:relative
+// }
+// #notificationContainer 
+// {
+// background-color: #fff;
+// border: 1px solid rgba(100, 100, 100, .4);
+// -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+// overflow: visible;
+// position: absolute;
+// top: 30px;
+// margin-left: -170px;
+// width: 400px;
+// z-index: -1;
+// display: none;
+// }
+
+// #notificationContainer:before {
+// content: '';
+// display: block;
+// position: absolute;
+// width: 0;
+// height: 0;
+// color: transparent;
+// border: 10px solid black;
+// border-color: transparent transparent white;
+// margin-top: -20px;
+// margin-left: 188px;
+// }
+// #notificationTitle
+// {
+// font-weight: bold;
+// padding: 8px;
+// font-size: 13px;
+// background-color: #ffffff;
+// position: fixed;
+// z-index: 1000;
+// width: 384px;
+// border-bottom: 1px solid #dddddd;
+
+// }
+// #notificationsBody
+// {
+// padding: 33px 0px 0px 0px !important;
+// min-height:300px;
+// }
+
+
+// .addStyle{
+     
+//     // border-top: 1px solid #d6d6d6;
+//     border-bottom: 1px solid #d6d6d6; 
+//     padding-top: 7px;
+//     padding-bottom: 8px;
+   
+// }
+
+
+// #notificationFooter
+// {
+// /* 
+//     font-weight: bold;
+//     padding: 8px;
+//     font-size: 13px;
+//     background-color: #ffffff;
+//     position: fixed;
+//     z-index: 1000;
+//     width: 384px;
+//     border-bottom: 1px solid #dddddd; */
+
+// background-color: #e9eaed;
+// text-align: center;
+// font-weight: bold;
+// z-index: 1000;
+// padding: 8px;
+// font-size: 13px;
+// border-top: 1px solid #dddddd;
+// }
+
+
+// .cardStyle{
+//     display: inline-block;
+//     padding:5px;
+// }
+
+
+
+// #notification_count 
+// {
+// padding: 3px 7px 3px 7px;
+// background: #cc0000;
+// color: #ffffff;
+// font-weight: bold;
+// margin-left: 77px;
+// border-radius: 9px;
+// -moz-border-radius: 9px; 
+// -webkit-border-radius: 9px;
+// position: absolute;
+// margin-top: -11px;
+// font-size: 11px;
+// }
+
+
+// /deep/ .mat-menu-panel.test{
+   
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+
+// }
+
+
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 300px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;right:0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img{
+width: 50px;
+height: 50px;
+  
+  float: left;
+  
+  padding-top: 16px;
+  padding-bottom: 16px;
+  
+  box-sizing: border-box;
+
+  
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc{
+
+  
+  color: #fff;
+ 
+  padding: 16px;
+  
+  overflow: hidden;
+white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+div[title="Stop drawing"] {
+      
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a circle"] {
+ 
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+div[title="Draw a rectangle"] {
+  height: 28px;
+  width: 28px;
+  cursor: pointer;
+}
+
+
diff --git a/src/app/show-route/show-route.component.spec.ts b/src/app/show-route/show-route.component.spec.ts
new file mode 100644
index 0000000..70504ba
--- /dev/null
+++ b/src/app/show-route/show-route.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShowRouteComponent } from './show-route.component';
+
+describe('ShowRouteComponent', () => {
+  let component: ShowRouteComponent;
+  let fixture: ComponentFixture<ShowRouteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShowRouteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowRouteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/show-route/show-route.component.ts b/src/app/show-route/show-route.component.ts
new file mode 100644
index 0000000..1310c99
--- /dev/null
+++ b/src/app/show-route/show-route.component.ts
@@ -0,0 +1,849 @@
+import { Component, OnInit } from '@angular/core';
+import { Params, Router, ActivatedRoute } from '@angular/router'
+import { ContactService } from '../contact.service';
+import { PoiListComponent } from '../poi-list/poi-list.component';
+import { PoiDtlDelComponent } from "../poi-dtl-del/poi-dtl-del.component";
+import { MdDialog } from '@angular/material';
+import { Data } from '../data';
+
+declare var google: any;
+@Component({
+  selector: 'app-show-route',
+  templateUrl: './show-route.component.html',
+  styleUrls: ['./show-route.component.scss']
+})
+export class ShowRouteComponent implements OnInit {
+  marker1: any;
+  data_descip:any;
+  mapData: any[];
+  routePath: any;
+  before: any;
+  logoutbut: boolean;
+  cust: boolean = false;
+  routename:any;
+  logo: any;
+  text: any;
+  fs: any; ls: any; emailid: any; or: any; useridd: any; mb: any; custtype: any; dealer: any;
+  showImage: any;
+  groups = [];
+  group_info: any;
+  deviceId: any;
+  routeSource:any;
+  routeDest:any;
+  device_update: any;
+  markerpoi: any;
+  superAdmin: any = false;
+  waypoints_path:any;
+  routeData:any;
+  cnt:any =0;
+  dbMap:any;
+  dbMapInit:any = false;
+  speed_alert: boolean = true;
+  rName: any;
+  sourceRoute: any;
+  destination_route: any;
+  curr_position: any;
+  directionsService: any;
+  directionsDisplay: any;
+  speedAlert:any;
+  wayPoinrArr: any;
+  variableId: string;
+  waypoint1: any={};
+  waypoints: any;
+  wapointArray: any[];
+  finlCoords: any;
+  show:Boolean=false;
+  underscore_id: any;
+  constructor(private router: Router, private route: ActivatedRoute, private contactService: ContactService,public dialog: MdDialog) {
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    var routeID = localStorage.getItem('routeId'); 
+    this.getRouteData(routeID);
+    // });
+  }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    window.localStorage['DataUpdate'] = 'Tthis.rue'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.routePath = JSON.parse(localStorage.getItem('routeData'));
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    let foods = [];
+
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    // this.showRoute()
+    localStorage.removeItem('mapLoad_ID')
+    // this.router.navigateByUrl("add");
+    this.routeSource = new google.maps.places.Autocomplete(document.getElementById('txtSource'));
+
+    this.routeDest =  new google.maps.places.Autocomplete(document.getElementById('txtDestination'));
+
+//     google.maps.event.addListener(this.routeSource , 'place_changed', function() {
+    
+
+    
+// })
+
+
+    // this.initialize()
+
+
+
+
+  }
+
+
+
+
+  getRouteData(id) {
+    var i = id;
+    this.underscore_id = id;
+    var outerThis = this;
+
+    var u = this.useridd
+    this.contactService.getPOIdata(i, u)
+      .subscribe(res => {
+        var rPath = res;
+        this.rName = rPath.routeName;
+        console.log('rPathrPathrPathrPathrPathrPath',rPath);
+       
+        this.routeSource = rPath.source;
+        this.routeDest = rPath.destination
+       
+        this.speedAlert = rPath.speed_alert;
+       
+     
+        //console.log(rPath.waypoints);
+        this.routeData = res;
+        this.showRoute(res);
+        this.variableId =''
+        var t = {
+          aid: '', 
+          address:'',
+          astring:'',
+          place_changed: false,
+          latLng : {lat:0,lng:0}
+        
+        }
+     
+      //  console.log('this.routeData',this.routeData);
+         var that = this;
+         console.log(rPath.destination);
+         if((rPath.waypoints != undefined)&&(rPath.waypoints.length != 0)){
+           var j=0;    
+          for (var i = 0; i < rPath.waypoints.length; i++) {
+           
+              var inputid = 'address' +  this.count++;  
+           
+              t = {
+                aid: inputid, 
+                address:'',
+                astring:'',
+                place_changed: false,
+                latLng : {lat: rPath.waypoints[i].location.lat,lng: rPath.waypoints[i].location.lng}         
+              }
+              this.fieldArr.push(t);
+            
+            
+              
+            that.clocation_1(rPath.waypoints[i].location, function (err, succ) {
+              
+                  that.fieldArr[j]['astring'] = succ.endAddress; 
+              
+              // }         
+              if (err) {
+             
+                j++;
+              } else {
+            
+                j++;
+                if (j === rPath.waypoints.length) {
+                  console.log(that.fieldArr);
+                  that.attachAutocomplete()
+                return
+                }
+              }
+            })  
+          }
+         }else{
+          that.loadMap();
+          // var vtp = setTimeout(()=>{
+          //   that.routeDest=new google.maps.places.Autocomplete(document.getElementById(that.variableId));  
+          //   that.routeDest = rPath.destination;
+          //   var attachdata = document.getElementById(that.variableId);    
+          //   attachdata.setAttribute("value", that.routeDest);
+          
+          //   clearTimeout(vtp);
+          // })
+        
+         }
+
+         console.log(this.fieldArr);  
+    
+   
+      })
+  }
+
+  testShit='';
+
+  attachAutocomplete(){
+    var that= this;
+    console.log(this.fieldArr);
+    for(var p = 0; p<this.fieldArr.length;p++){
+        console.log(this.fieldArr[0].aid);
+        var attachdata = document.getElementById(this.fieldArr[p].aid);   
+        this.fieldArr[p]['address']=new google.maps.places.Autocomplete(document.getElementById(this.fieldArr[p].aid)); 
+        attachdata.setAttribute("value", this.fieldArr[p]['astring']);  
+    }
+    // var tita= document.getElementById(this.variableId);
+    //   this.waypoint1['aid']= this.variableId;
+    //   this.waypoint1['address']= new google.maps.places.Autocomplete(tita);
+    //   this.waypoint1['astring']= this.routeDest;
+    //   this.waypoint1['place_changed']= true;
+
+
+
+      //  tita.setAttribute("value", this.routeDest)
+       this.loadMap();
+
+  }
+
+
+  goback() {
+    this.router.navigateByUrl("vehicleRoute");
+  }
+
+
+ 
+
+  dataArrayCoords: any;
+  currentLatitude: any;
+  currentLongitude: any;
+  marker: any;
+  showRoute(rP) {
+    var outerThis = this;
+
+    this.routePath = rP;
+
+
+    this.mapData = [];
+    for (var i = 0; i < this.routePath.routePath.length; i++) {
+      this.mapData.push({
+        "lat": this.routePath.routePath[i].location.coordinates[1],
+        "lng": this.routePath.routePath[i].location.coordinates[0]
+      });
+    }
+      this.curr_position={
+        lat :this.routePath.routePath[0].location.coordinates[1],
+        lng: this.routePath.routePath[0].location.coordinates[0]
+      }
+ 
+
+
+    if(this.dbMapInit == false){
+      var current_add = new google.maps.LatLng(18.6018583, 73.77622640000004);
+      var mapOptions = {
+        zoom: 10,
+        center: current_add
+      };
+      if(this.dbMap != undefined && this.dbMap.mapTypeId != undefined){
+     
+        current_add = new google.maps.LatLng(this.dbMap.center.lat(),this.dbMap.center.lng());
+        mapOptions = {
+          zoom: this.dbMap.zoom,
+          center: current_add
+        };
+      }
+
+      var map = new google.maps.Map(document.getElementById('showMap'), mapOptions);
+      this.dbMap = map;
+      this.dbMapInit = true;
+    }else{
+      map = this.dbMap;
+    }
+
+
+
+
+    var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/S/009900/");
+    this.marker = new google.maps.Marker({
+      position: this.mapData[0],
+      map: map,
+      icon: pinImage
+    });
+
+    var pinImage1 = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/D/FF0000/ ");
+    this.marker1 = new google.maps.Marker({
+      position: this.mapData[this.mapData.length - 1],
+      map: map,
+      icon: pinImage1
+    });
+
+    for (var i = 0; i < this.routePath.poi.length; i++) {
+      let test = this.routePath.poi[i];
+      var poiMarker_object = {
+        "lat": this.routePath.poi[i].poi.location.coordinates[1],
+        "lng": this.routePath.poi[i].poi.location.coordinates[0]
+      }
+
+      var pinImagePOI = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/ ");
+      this.markerpoi = new google.maps.Marker({
+        position: poiMarker_object,
+        map: map,
+        icon: pinImagePOI
+      });
+
+      // outerThis.attachSecretMessage(this.markerpoi,this.routePath.poi[i].poi.poiname);
+      google.maps.event.addListener(this.markerpoi, 'click',function(event){
+        // //console.log(event,test);
+        // outerThis.shownDelete(test);
+        
+      });
+    }
+
+    this.wayPoinrArr=[];
+
+    var infowindow = new google.maps.InfoWindow();
+    google.maps.event.addListener(this.marker, 'click', (function (marker, i) {
+      return function () {
+
+        infowindow.setContent(outerThis.routePath.source);
+        infowindow.open(this.map, outerThis.marker);
+      }
+    })(this.marker));
+    var infowindow = new google.maps.InfoWindow();
+    google.maps.event.addListener(this.marker1, 'click', (function (marker1, i) {
+      return function () {
+
+        infowindow.setContent(outerThis.routePath.destination);
+        infowindow.open(this.map, outerThis.marker1);
+      }
+    })
+      (this.marker1)
+    );
+
+
+    var flightPath = new google.maps.Polyline({
+      path: this.mapData,
+      geodesic: true,
+      strokeColor: '#1E90FF',
+      strokeOpacity: 1.0,
+      strokeWeight: 6
+    });
+    let that = this;
+  google.maps.event.addListener(flightPath, 'click', function(h) {
+
+    that.waypoints_path = 
+    {
+      "coordinates": [
+        h.latLng.lng(),
+        h.latLng.lat()
+      ],
+      "type": "Point"
+    };
+    // that.addInfo();
+  });
+
+    flightPath.setMap(map);
+    zoomToObject(flightPath);
+
+    function zoomToObject(obj){
+      var bounds = new google.maps.LatLngBounds();
+      var points = obj.getPath().getArray();
+      for (var n = 0; n < points.length ; n++){
+          bounds.extend(points[n]);
+      }
+      map.fitBounds(bounds);
+  }
+
+  }
+  additionalRouteInfo:any;
+  saveInfoObject=[];
+
+  // dbshow(data){
+
+  //   let sendData =     {
+  //     "poi": [
+  //       {
+  //         "location": data.poi[0].location,
+  //         "poiname": data.poi[0].pname,
+  //         "duration_from_previous":data.poi[0].prv_dur,
+  //         "duration_to_next": data.poi[0].nxt_dur,
+  //         "duration_halt":  data.poi[0].dur_halt,
+  //         "trackroute": data.trackroute,
+  //         "status": "Active",
+  //         "user": data.user,
+  //         "routeIndex":this.cnt
+  //       }
+  //     ],
+
+  //   };
+  //  this.contactService.addOnePoi(sendData).subscribe(resp=>{
+  //   this.getRouteData(localStorage.getItem('routeId'));
+  //   this.cnt +=1;
+  //       })
+  // }
+//   addInfo(){
+//     let dialogRef_1 = this.dialog.open(PoiListComponent, {
+//       height:'294px',
+//       width:'500px',  
+//     });
+//   let that = this;
+//     dialogRef_1.afterClosed().subscribe(result => {
+//       if(result){
+//         let sendData = JSON.parse(result);
+//         sendData.location  =  that.waypoints_path;
+//       that.dbshow({poi:[sendData],trackroute:localStorage.getItem('routeId'),status:'Active',user:that.useridd});
+
+
+//       }else{
+//         this.additionalRouteInfo={
+//           "pname":'',
+//           "prv_dur" : '',
+//           "nxt_dur": '',
+//           "dur_halt" : ''
+//         };
+//         this.saveInfoObject.push(this.additionalRouteInfo);
+//       }
+//     })
+
+
+// }
+
+// shownDelete(data){
+  
+//   localStorage.poiShowDelData = JSON.stringify(data);
+//   let dialogRef_1 = this.dialog.open(PoiDtlDelComponent, {
+//     height:'294px',
+//     width:'500px',  
+//   });
+//   let that = this;
+//   dialogRef_1.afterClosed().subscribe(result => {
+//     if(result == 'delete'){
+//       that.getRouteData(localStorage.getItem('routeId'));
+//       that.dbMapInit = false;
+//     }
+        
+//     });
+// }
+
+
+loadMap(){
+  if(this.dbMapInit == false){
+    var current_add = new google.maps.LatLng(18.6018583, 73.77622640000004);
+    var mapOptions = {
+      zoom: 10,
+      center: current_add
+    };
+    if(this.dbMap != undefined && this.dbMap.mapTypeId != undefined){
+   
+      current_add = new google.maps.LatLng(this.dbMap.center.lat(),this.dbMap.center.lng());
+      mapOptions = {
+        zoom: this.dbMap.zoom,
+        center: current_add
+      };
+    }
+
+    var map = new google.maps.Map(document.getElementById('showMap'), mapOptions);
+    this.dbMap = map;
+    this.dbMapInit = true;
+  }else{
+    map = this.dbMap;
+  }
+var map = this.dbMap;
+
+    // var pp = setTimeout(()=>{             
+    //       this.getRoute();
+    //       clearTimeout(pp);
+    //     },1000)
+
+}
+
+
+getRoute(){
+
+  var outerThis=this;
+  var sr  = document.getElementById('txtSource');
+  this.sourceRoute=sr['value'];
+  var ds = document.getElementById('txtDestination');
+ 
+  this.waypoints=[];
+  // console.log(this.fieldArr);
+  
+  if(this.fieldArr.length >0){
+        for(var k = 0; k<this.fieldArr.length ;k++){   
+          if(this.fieldArr[k].latLng!=undefined){
+            if(this.fieldArr[k].place_changed === false){
+              var la =  new google.maps.LatLng(this.fieldArr[k].latLng.lat,this.fieldArr[k].latLng.lng);
+            }else{
+              var la =  new google.maps.LatLng(this.fieldArr[k].latLng.lat(),this.fieldArr[k].latLng.lng());
+            }
+            var pp = {
+              location : la,
+              stopover:false
+            }
+            outerThis.waypoints.push(pp);  
+          }
+        }
+        console.log('outerThis.waypoints',outerThis.waypoints);
+
+  }
+
+  if(this.fieldArr.length=== 0 ){
+    outerThis.waypoints =[];
+  }
+
+  console.log(ds);
+  this.destination_route = ds['value'];
+  console.log('this.destination_route',this.destination_route);
+  if(outerThis.directionsDisplay != undefined) { 
+    outerThis.directionsDisplay.setMap(null);
+    outerThis.directionsDisplay = null;
+   }
+
+
+outerThis.directionsService = new google.maps.DirectionsService;
+outerThis.directionsDisplay = new google.maps.DirectionsRenderer({
+    draggable: true,
+    map: this.dbMap, 
+  });
+  google.maps.event.addListener(outerThis.directionsDisplay, 'click', function(h) {
+    // //console.log(h.latLng.lat(),h.latLng.lng());
+  });
+
+  outerThis.directionsDisplay.addListener('directions_changed', function() {
+    outerThis.computeTotalDistance(outerThis.directionsDisplay.getDirections());
+  });  
+
+  this.displayRoute(this.sourceRoute, this.destination_route, outerThis.directionsService,outerThis.directionsDisplay,this.dbMap,outerThis.waypoints)
+
+ }
+
+ computeTotalDistance(result) {
+  var total = 0;
+  var myroute = result.routes[0];
+  for (var i = 0; i < myroute.legs.length; i++) {
+    total += myroute.legs[i].distance.value;
+  }
+  total = total / 1000;
+  document.getElementById('total').innerHTML = total + ' km';
+}
+path=[];
+overview_path_latlng=[];
+displayRoute(origin, destination, service, display,map,waypts) {
+  //console.log(origin ,destination);
+
+  var outerThis = this;
+    service.route({
+      origin: origin,
+      destination: destination, 
+      waypoints:waypts,
+      travelMode: 'DRIVING',   
+      avoidTolls: true
+    }, function(response, status) {
+      if (status === 'OK') {
+        outerThis.path=[];
+        outerThis.overview_path_latlng=[];
+        display.setDirections(response);
+        // //console.log(response);
+        // var currentRoute = currentRouteArray.overview_path;
+         var currentRouteArray = response.routes[0].overview_path;
+        //  //console.log(currentRouteArray);
+         for(var i = 0 ; i<currentRouteArray.length;i++){
+  
+         var routePath = {
+            lat:currentRouteArray[i].lat(),
+            lng:currentRouteArray[i].lng()
+          }
+          outerThis.path.push(routePath);
+        }
+        outerThis.overview_path_latlng = outerThis.path;
+        // //console.log(outerThis.overview_path_latlng);
+  
+      
+      
+        display.addListener('directions_changed', function() {
+  
+          
+        //  outerThis.addInfo();
+         var t  =  display.getDirections();
+        //  //console.log(t);
+  
+         var overview_path = t.routes[0].overview_path
+         
+              // //console.log(overview_path);
+  
+              // //console.log(t.request.waypoints);
+              outerThis.waypoints_path=[];
+              outerThis.overview_path_latlng=[];
+  
+         for(var j = 0 ; j<t.request.waypoints.length;j++){
+           var waypointLatlng = {
+             lat:t.request.waypoints[j].location.lat(),
+             lng:t.request.waypoints[j].location.lng()
+           }
+         outerThis.waypoints_path.push(waypointLatlng);
+         }
+        
+         for(var k = 0 ; k<overview_path.length;k++){
+          var pathLatLng = {
+            lat:overview_path[k].lat(),
+            lng:overview_path[k].lng()
+          }
+  
+          outerThis.overview_path_latlng.push(pathLatLng);
+        }     
+        //  //console.log("pathLatlng",outerThis.overview_path_latlng);
+  
+        //  //console.log("Waypoints" ,outerThis.waypoints_path);    
+           });   
+        // function for get lat long array ends here 
+  
+      } else {
+        // //console.log('error in display route!!!')
+        alert('Could not display directions due to: ' + status);
+      }
+    });
+  
+  }
+
+updateRoute(){
+  let that = this;
+  // this.payloadArray=[];
+  this.finlCoords=[];
+  this.rName;
+  // console.log(this.rName)
+  this.sourceRoute;this.destination_route;
+  if((this.sourceRoute==undefined)||(this.destination_route==undefined)||(this.sourceRoute==null)||(this.destination_route==null)){
+    // console.log("Please select route !!!");
+    this.tost1("routeErr");
+
+  }
+  else if((this.rName==undefined)||(this.rName==null)){
+    // console.log("Please select route name");
+    this.tost1("rnameErr");
+  }
+  else{
+
+    for(var j=0;j<this.overview_path_latlng.length;j++){
+    var lattitude = this.overview_path_latlng[j].lat;
+    var longitude = this.overview_path_latlng[j].lng;
+    this.finlCoords.push([longitude,lattitude])
+    }
+
+    this.wapointArray=[];
+    // debugger;
+    console.log(this.waypoints);
+    for(var z = 0 ; z<this.waypoints.length;z++){
+      if(this.waypoints[z] != undefined){
+        var lat = this.waypoints[z].location.lat();
+        var long = this.waypoints[z].location.lng();
+      var loc = { location : {
+          lat : lat,
+          lng : long
+        }
+      }
+        this.wapointArray.push(loc);
+      }
+  
+    }    
+    console.log('this.wapointArraythis.wapointArray',this.wapointArray);
+
+    let routeDetail={
+      "src":this.sourceRoute,
+      "dest":this.destination_route,
+      "name":this.rName,
+      "user":this.useridd,
+      "path":this.finlCoords,  
+      "status":"Active",
+      "_id":this.underscore_id
+     
+    };
+
+
+      if(this.wapointArray.length>0){
+         routeDetail['wayPoints'] = this.wapointArray;
+      }
+    if((this.speed_alert === true)&&(this.speedAlert != undefined)){
+      routeDetail['speed_alert'] = this.speedAlert;
+    }
+
+    console.log(routeDetail);
+   
+    console.log('this is final payload',this.underscore_id)
+    this.contactService.updateRoute(routeDetail,this.underscore_id)
+      .subscribe(res => {
+        console.log(res);
+        this.router.navigateByUrl("vehicleRoute");
+      })
+  }
+
+}
+changeDetactor(ev){
+  this.speed_alert = ev.checked;
+
+}
+fieldArr=[];
+count=0;
+
+addField(){
+ 
+  var inputId =  'address' +  this.count++; 
+  var t = {
+    aid: inputId,
+    address:'',
+    astring:'',
+    place_changed:false
+
+  }
+  this.fieldArr.push(t);
+  
+  var temp = setTimeout(()=>{
+    this.fieldArr[this.fieldArr.length -1]['address'] = new google.maps.places.Autocomplete(document.getElementById(inputId));
+    //console.log('this.fieldArr',this.fieldArr);
+    clearTimeout(temp);
+  },2000)
+
+
+ 
+}
+
+deleteAddressField(ind){
+    this.fieldArr.splice(ind,1);
+    this.getRoute();
+}
+
+
+getClickEvent(i){
+  var that = this;
+  //console.log("inside function");
+  //console.log(i);
+   google.maps.event.addListener(this.fieldArr[i].address, 'place_changed', function() {
+        //console.log("inside place changed function");
+      var latLng =   that.fieldArr[i].address.getPlace().geometry.location;
+
+        that.fieldArr[i]['latLng'] = latLng;
+        that.fieldArr[i]['place_changed'] = true;
+      
+        //console.log(that.fieldArr);
+  })
+}
+
+
+
+clocation_1(latlngObj, cb) {
+  var outerThis = this;
+  var la = '';
+
+  let latLng = {
+    lat: "0",
+    long: "0"
+  };
+  if (latlngObj) {
+    latLng = {
+      lat: latlngObj.lat ? latlngObj.lat : 0,
+      long: latlngObj.lng ? latlngObj.lng : 0
+    }
+  }
+
+  outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+    if (res.message == "Address not found in databse") {
+      latlngObj['startAddress'] = "NA";
+      cb(null, latlngObj);
+        } else {
+          latlngObj['endAddress'] = res.address;
+          cb(null, latlngObj);
+        }
+
+      })
+
+      // cb(null,latlngObj);
+    }
+
+    tost1(divid){
+      if(divid == "routeErr"){
+        this.data_descip =  "Please select route "
+         launch_toast();
+       }
+       else if(divid == "rnameErr"){
+         this.data_descip =  "Please type route name"
+         launch_toast();
+       }
+         function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }
+        }
+  
+
+
+      initialize() {
+        // this.show=true
+      const myOptions = {
+        zoom:2,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+     var map = new google.maps.Map(document.getElementById('showMap'), myOptions);
+      console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+      // outerThis.historyMap = map;
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+     
+      // var isMapInit = true;
+
+      var zoomBar: any;
+      zoomBar = document.getElementById('myRange');
+      map.setZoom(map.getZoom());
+
+    
+      zoomBar.value = map.getZoom();
+  
+      zoomBar.oninput = function () {
+        //console.log('zoomValue',map.getZoom());
+        map.setZoom(parseInt(this.value));
+      }
+
+      google.maps.event.addListener(map, 'zoom_changed', function (event) {
+        //console.log("Inside zoom in out function");
+        if (zoomBar.value)
+          zoomBar.value = map.getZoom();
+      });
+
+       
+
+    }
+
+
+
+  
+
+
+}
+
+
diff --git a/src/app/show-vehicles/show-vehicles.component.html b/src/app/show-vehicles/show-vehicles.component.html
new file mode 100644
index 0000000..8876411
--- /dev/null
+++ b/src/app/show-vehicles/show-vehicles.component.html
@@ -0,0 +1,303 @@
+<!-- <app-all-menus *ngIf="!token_identifier"></app-all-menus> -->
+<button *ngIf="token_identifier"
+  style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;float: right;z-index: 111;" md-raised-button>NLET
+  ERP</button>
+<div class="topWrapper" id="main">
+  <div class="mainWrapperWrapper">
+    <!-- <div class="row" style="background: #426E86">
+      <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center; padding-top: 10px;">
+      </div>
+      <div class="col-sm-4 col-md-4 col-lg-4">
+        <p
+          style="margin: 0; padding-top: 5px;text-align: center; padding-bottom: 5px; font-size: 20px; font-weight: 500;color: white; ">
+          {{headingName | translate}}</p>
+      </div>
+      <div id="toast">
+        <div id="desc">{{data_descip}}</div>
+      </div>
+    </div> -->
+    <div class="col-sm-4 col-md-4 col-lg-4" style="color: white;text-align: center;"> </div>
+    <div class="row rowStyle" style="padding-bottom: 39px;">
+     
+      <div class="col-sm-12 col-md-12 col-lg-12 panel-body panel-resizable" style="padding:0px; overflow: hidden">
+        <div *ngIf="Load">
+          <div class="loading">Loading&#8230;</div>
+        </div>
+       
+        <div *ngIf="(immobilizeChk === true)"
+          style="width: 350px;height: 250px;z-index: 3;position: absolute;background: white;top: 20%;left: 37%;background: white;border-radius: 12px;padding: 15px 20px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+          <div *ngIf="showErr === false">
+            <div style="text-align: center; padding: 20px;color: #426e86;">
+              <i style="font-size: 60px; text-align: center;" class="far fa-clock"></i>
+              <!-- <img  src={{timerGif}}> -->
+            </div>
+            <p style="text-align: center;font-size: 16px;font-weight: 600;color: #a2a2a2;">Command Triggered , Please
+              wait :</p>
+            <div style="text-align: center; padding: 10px;font-size: 16px;font-weight: 600;color: #a2a2a2;">
+              <span style="font-size: 40px;">{{immobilizeCount}}</span>
+              <span>Sec.</span>
+            </div>
+          </div>
+          <div *ngIf="showErr === true">
+            <div style="text-align: center; padding: 20px;">
+              <i *ngIf="errIcon=== true" style="font-size: 60px; text-align: center;color: red;"
+                class="far fa-times-circle"></i>
+              <i *ngIf="locked=== true" style="font-size: 60px; text-align: center;color: red;" class="fas fa-lock"></i>
+              <i *ngIf="unlocked === true" style="font-size: 60px; text-align: center;color: green;"
+                class="fas fa-lock-open"></i>
+            </div>
+            <p style="text-align: center;font-size: 25px;font-weight: 600;color: #a2a2a2;">{{ImmErrMsg}}</p>
+          </div>
+        </div>
+        <div *ngIf="showHistory === false" id="map" style="width: 100%; height: 100%;"></div>
+        <div *ngIf="showHistory === true" id="map2" style="width: 100%; height: 100%;"></div>
+        <div style=" width: 100px; top: 110px; right: -7px; position: absolute; z-index: 1;">
+          <input type="range" min="0" max="22" value="5" class="slider" id="myRange"
+            style="transform: rotate(-90deg);  height: 7px; box-shadow: 0px 0px 6px 5px lightg">
+          <div style="display: grid; width: fit-content; float: right; padding-right: 20px; padding-top: 80px;">
+            <a style="float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid;text-align: center;width:38px;"
+              [ngStyle]="{'background' : (mapTypeId=='roadmap') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('roadmap')">
+              <!-- <span id="d"> -->
+              <!-- <i class="material-icons" mdTooltip="Selected"  style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Street">
+                streetview </i>
+              <!-- </span> -->
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='terrain') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('terrain')">
+              <!-- <span id="d"> -->
+              <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='terrain'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+              <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px" mdTooltip="Google Physical">
+                terrain </i>
+              <!-- </span> -->
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='satellite') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('satellite')">
+              <span id="e">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='satellite'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;"
+                  mdTooltip="Google Satellite"> satellite </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='hybrid') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('hybrid')">
+              <span id="f">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Hybrid">
+                  layers </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;cursor: pointer;color:white;margin: 0;height: 28px;padding:4px 0px 8px 0px;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (mapTypeId=='darkmode') ? '#86ac41c7;' : '#989898'}"
+              class="pointer animateClass_10" (click)="setMapType('darkmode')">
+              <span id="k">
+                <!-- <i class="material-icons" mdTooltip="Selected" *ngIf="mapTypeId=='hybrid'" style="float:right;font-size: 11px;color:green;padding-right: 10px;">fiber_manual_record</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Night Mode">
+                  nights_stay </i>
+              </span>
+            </a>
+            <a style="text-align: center;width:38px;float:right;margin: 0;height: 24px;color:white;padding:4px 0px 4px 0px;cursor: pointer;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);border-bottom: 1px solid"
+              [ngStyle]="{'background' : (isTraffic==true) ? '#86ac41c7;' : '#989898'}" class="pointer animateClass_10"
+              (click)="setMapType('traffic')">
+              <span id="g">
+                <!-- <i class="material-icons" mdTooltip="Google Hybrid" *ngIf="isTraffic" style="float:right;font-size: 14px;color:green;padding-right: 10px;">done</i> -->
+                <i class="material-icons" style="font-size: 16px;padding: 0px 8px 0px 8px;" mdTooltip="Google Traffic">
+                  traffic </i>
+              </span>
+            </a>
+          </div>
+
+        
+        </div>
+
+
+      
+       
+      </div>
+    </div>
+    <!-- <div class="row" style="padding: 0px;margin: 0px;">
+          <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0;margin: 0;">
+            <div class="row">
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <div>
+                    <i class="fas fa-expand" title="Hide work area" (click)="showHideWorkArea()"></i>
+                </div> 
+              </div>
+              <div class="col-sm-6 col-md-6 col-lg-6">
+                <div>
+                  <i class="fas fa-book-open"></i>
+                </div>
+                <div>
+                  <p>{{currentTime}}</p>
+                </div>    
+              </div>
+            </div>
+          </div>
+    </div> -->
+  </div>
+
+</div>
+
+<!-- <div *ngIf="false"> -->
+<table id="headerTable" style="border: 1px solid black;width: 100%;
+    border-collapse: collapse;">
+  <tr style="text-align:center">
+    <div style="text-align:center">Table</div>
+  </tr>
+  <tr style="height:30px;border-top:1px solid black">
+    <td>
+      <span style="font-weight: 700;">Name</span>: {{deviceNameForPDF}}
+    </td>
+    <td>
+      <!-- <image style="width: 50px;height: 50px;" src="image"></image> -->
+    </td>
+  </tr>
+  <tr>
+    <td>
+      <span style="font-weight: 700;">Start Time</span>: {{startTime}}
+    </td>
+    <td>
+      <span style="font-weight: 700;">End Time</span>: {{endTime}}
+    </td>
+  </tr>
+  <tr style="height:30px;border-top:1px solid black">
+    <td>
+      <span style="font-weight: 700;"> Start Address</span>: {{startAddress}}
+    </td>
+    <td>
+      <span style="font-weight: 700;">End Address</span>: {{endAddress}}
+    </td>
+  </tr>
+</table>
+<div class="w3-sidebar w3-bar-block w3-animate-right"
+  style="display:none;right:0;width: 290px;top: 60px;background: transparent;" id="rightMenu">
+  <button (click)="closeRightMenu()" class="w3-bar-item w3-button w3-large">Close &times;</button>
+  <div class="card m-2" style="border: 1px solid #dadada;
+  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.2s;
+ 
+  background:
+   
+   url('../../assets/images/liveTrackIcons/location(background).jpg') top/100% auto no-repeat;
+   background-repeat:no-repeat;">
+    <!-- <div class="card-header">
+     <h4>Location</h4>
+
+   </div> -->
+    <div class="card-body" style="font-family: initial;">
+      <h6> {{liveAdd}}</h6>
+      <span>Latitude:{{socketData?socketData.latDecimal:''}}</span>
+      <span>Longitude:{{socketData?socketData.longDecimal:''}}</span>
+
+    </div>
+
+  </div>
+
+  <div class="card m-2" style="border: 1px solid #dadada;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);transition: 0.2s;color: black;
+ background: linear-gradient(45deg, #f44336, transparent);">
+    <!-- <div class="card-header">
+    <h4>Speed</h4>
+
+  </div> -->
+    <div class="card-body" style="font-family: initial;">
+      <h6><i class="fas fa-tachometer-alt"></i> {{socketData?socketData.speed:''}} km/hr</h6>
+
+    </div>
+
+  </div>
+  <div class="card m-2">
+    <!-- <div class="card-header">
+    <h3>IMEI</h3>
+
+  </div> -->
+    <div class="card-body">
+      <h5>
+        IMEI
+      </h5>
+      <h6>{{socketData?socketData.imei:''}}</h6>
+
+    </div>
+
+  </div>
+
+  <div class="card m-2">
+
+    <div class="card-body">
+      <div class="row">
+        <!-- <div class="col-md-6"> -->
+        <span style="white-space: nowrap;"> {{'Date' | translate}}: {{socketData?socketData.date:'' |
+          date:'medium'}}</span>
+        <span> {{'Command' | translate}}: {{socketData?socketData.command?socketData.command:'NA':'NA'}}</span>
+        <span>{{'Ignition' | translate}} : {{socketData?socketData.ignition==1?'ON':'OFF':'NA'}}</span>
+        <!-- </div> -->
+        <!-- <div class="col-md-6"> -->
+        <span> {{'Satellites' | translate}}: {{socketData?socketData.satellites:'NA'}}</span>
+        <span>{{'GPS Positioned' | translate}} : {{socketData?socketData['GPS positioned']==1?'Fixed':socketData['GPS
+          positioned']==0?'Not Fixed':'NA':'NA'}}</span>
+        <span>{{'Port' | translate}} : {{socketData?socketData.port:'NA'}}</span>
+        <!-- </div> -->
+
+      </div>
+    </div>
+
+  </div>
+  <!-- <div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div>
+<div class="card m-2">
+  <div class="card-header">
+    <h3>hjdsh</h3>
+
+  </div>
+  <div class="card-body">
+    <h4>a,sjnaksnasjnl</h4>
+
+  </div>
+
+</div> -->
+</div>
\ No newline at end of file
diff --git a/src/app/show-vehicles/show-vehicles.component.scss b/src/app/show-vehicles/show-vehicles.component.scss
new file mode 100644
index 0000000..051294d
--- /dev/null
+++ b/src/app/show-vehicles/show-vehicles.component.scss
@@ -0,0 +1,825 @@
+.topWrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+.mainWrapperWrapper {
+  height: inherit;
+  width: inherit;
+  //   padding-top: 59px;
+  background: #efecec;
+}
+
+.rowStyle {
+  height: inherit;
+  width: inherit;
+  margin: 0;
+}
+
+.tabCustomStyle {
+  .mat-tab-header {
+    background: white;
+  }
+}
+
+.selectedRunning {
+  background: #86ac41c7;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectedStopped {
+  background: #cb0000d9;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.Inactice {
+  background: #4897d8;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectIdling {
+  background: #ffc13c;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.selectedNodata {
+  background: #5b7065;
+  color: white;
+  border-right: 2px solid #ededed;
+}
+
+.deselected {
+  background: white;
+  color: black;
+}
+
+.scrollit {
+  overflow: scroll;
+  height: 100%;
+}
+
+.panel-resizable {
+  resize: vertical;
+  overflow: auto;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #868e96;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+.buttonStyle {
+  background: white;
+  color: black;
+}
+
+.buttonStyle:hover {
+  background: grey;
+  color: black;
+}
+
+.animateClass {
+  font-size: 12px;
+  padding: 12px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+  color: white;
+  background: #989898;
+  border-radius: 25px;
+  font-size: 12px;
+  padding: 12px;
+  cursor: pointer;
+  margin-left: 10px;
+  margin-right: 10px;
+  color: white;
+  background: #989898;
+  border-radius: 25px;
+  box-shadow: -2px 1px 3px 0px #b2b0ae;
+}
+
+.animateClass_1 {
+  padding: 5px;
+  padding-left: 7px;
+  padding-right: 7px;
+  color: black;
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+}
+
+.animateClass_2 {
+  padding: 5px;
+  color: rgb(255, 254, 254);
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 0px 2px 2px 0px #b2b0ae;
+}
+
+.animateClass_3 {
+  padding: 5px;
+  color: rgb(255, 254, 254);
+  cursor: pointer;
+  border: 1px solid #b5b5b5;
+  box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+
+.animateClass_1:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_2:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_3:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass:hover {
+  // background-color: #3e8e41
+}
+
+.animateClass:active {
+  //   background-color: #3e8e41;
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_4 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+.animateClass_5 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+.animateClass_6 {
+  width: 25%;
+  border-right: 2px solid white;
+}
+
+.animateClass_7 {
+  width: 25%;
+}
+
+.animateClass_4:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_5:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_6:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_7:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_8 {
+  cursor: pointer;
+  color: #2d4262;
+}
+.animateClass_9 {
+  cursor: pointer;
+  color: green;
+}
+.animateClass_10 {
+  cursor: pointer;
+  color: green;
+}
+
+.animateClass_11 {
+  cursor: pointer;
+  color: red;
+}
+
+.animateClass_12 {
+  cursor: pointer;
+  color: #2d4262;
+}
+.animateClass_13 {
+  cursor: pointer;
+  color: red;
+}
+
+.animateDropDown {
+  font-size: 15px;
+  color: #888888;
+  border-radius: 25px;
+  box-shadow: 2px 2px 2px 0px #b2b0ae;
+}
+.animateDropDown:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateDropDown:hover {
+  color: blue;
+}
+
+.animateClass_4:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_5:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_6:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_7:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_8:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_9:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+.animateClass_10:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_11:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_12:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.animateClass_13:active {
+  box-shadow: 0 1px #666;
+  transform: translateY(1px);
+}
+
+.mat-menu-panel.styleMenu {
+  max-width: 35px;
+  min-width: 30px;
+  background: #efecec;
+  border: 1px solid #afadad;
+}
+
+#slider {
+  margin: 20px;
+}
+
+#toast {
+  visibility: hidden;
+  max-width: 150px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+#toast #img {
+  width: 150px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+/*//////////////////////////////////////////////////////////////////
+  [ RESTYLE TAG ]*/
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+  margin: 0px;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+  outline: none !important;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+p {
+  margin: 0px;
+}
+
+ul,
+li {
+  margin: 0px;
+  list-style-type: none;
+}
+
+/* ------------------------------------ */
+input {
+  display: block;
+  outline: none;
+  border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus,
+input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+  outline: none !important;
+  border: none;
+  background: transparent;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+iframe {
+  border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+  [ Utiliti ]*/
+
+/*//////////////////////////////////////////////////////////////////
+  [ Table ]*/
+
+.limiterTable {
+  width: 100%;
+  margin: 0 auto;
+  height: 20vh;
+  overflow: auto;
+}
+
+.container-table100 {
+  width: 100%;
+  // min-height: 100vh;
+  // background: #c850c0;
+  // background: -webkit-linear-gradient(45deg, #4158d0, #c850c0);
+  // background: -o-linear-gradient(45deg, #4158d0, #c850c0);
+  //  background: -moz-linear-gradient(45deg, #4158d0, #c850c0);
+  // background: linear-gradient(45deg, #4158d0, #c850c0);
+
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  // padding: 33px 30px;
+}
+
+.wrap-table100 {
+  width: inherit;
+}
+
+// thisTableOnly {
+//   border-spacing: 1;
+//   border-collapse: collapse;
+//   background: white;
+//   border-radius: 10px;
+//   overflow: hidden;
+//   width: 100%;
+//   margin: 0 auto;
+//   position: relative;
+// }
+// thisTableOnly * {
+//   position: relative;
+// }
+// thisTableOnly td, thisTableOnly th {
+//   padding-left: 8px;
+// }
+// thisTableOnly thead tr {
+//   height: 60px;
+//   background: #36304a;
+// }
+// thisTableOnly tbody tr {
+//   height: 50px;
+// }
+// thisTableOnly tbody tr:last-child {
+//   border: 0;
+// }
+// thisTableOnly td, thisTableOnly th {
+//   text-align: left;
+// }
+// thisTableOnly td.l, thisTableOnly th.l {
+//   text-align: right;
+// }
+// thisTableOnly td.c, thisTableOnly th.c {
+//   text-align: center;
+// }
+// thisTableOnly td.r, thisTableOnly th.r {
+//   text-align: center;
+// }
+
+// .table100-head th{
+//   // font-family: OpenSans-Regular;
+//   font-size: 18px;
+//   color: #fff;
+//   line-height: 1.2;
+//   font-weight: unset;
+// }
+
+tbody tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+
+// tbody tr {
+
+//   font-size: 15px;
+//   color: #808080;
+//   line-height: 1.2;
+//   font-weight: unset;
+// }
+
+// tbody tr:hover {
+//   color: #555555;
+//   background-color: #f5f5f5;
+//   cursor: pointer;
+// }
+
+.column1 {
+  width: 260px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column2 {
+  width: 160px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column3 {
+  width: 245px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column4 {
+  width: 110px;
+  // text-align: right;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column5 {
+  width: 170px;
+  // text-align: right;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+.column6 {
+  width: 222px;
+  // text-align: right;
+  padding-right: 62px;
+  white-space: nowrap;
+  padding: 10px 10px 10px 10px;
+}
+
+// @media screen and (max-width: 992px) {
+//   table {
+//     display: block;
+//   }
+//   table > *, table tr, table td, table th {
+//     display: block;
+//   }
+//   table thead {
+//     display: none;
+//   }
+//   table tbody tr {
+//     height: auto;
+//     padding: 37px 0;
+//   }
+//   table tbody tr td {
+//     padding-left: 40% !important;
+//     margin-bottom: 24px;
+//   }
+//   table tbody tr td:last-child {
+//     margin-bottom: 0;
+//   }
+//   table tbody tr td:before {
+//   //   font-family: OpenSans-Regular;
+//     font-size: 14px;
+//     color: #999999;
+//     line-height: 1.2;
+//     font-weight: unset;
+//     position: absolute;
+//     width: 40%;
+//     left: 30px;
+//     top: 0;
+//   }
+//   table tbody tr td:nth-child(1):before {
+//     content: "Date";
+//   }
+//   table tbody tr td:nth-child(2):before {
+//     content: "Order ID";
+//   }
+//   table tbody tr td:nth-child(3):before {
+//     content: "Name";
+//   }
+//   table tbody tr td:nth-child(4):before {
+//     content: "Price";
+//   }
+//   table tbody tr td:nth-child(5):before {
+//     content: "Quantity";
+//   }
+//   table tbody tr td:nth-child(6):before {
+//     content: "Total";
+//   }
+
+//   .column4,
+//   .column5,
+//   .column6 {
+//     text-align: left;
+//   }
+
+//   .column4,
+//   .column5,
+//   .column6,
+//   .column1,
+//   .column2,
+//   .column3 {
+//     width: 100%;
+//   }
+
+//   tbody tr {
+//     font-size: 14px;
+//   }
+// }
+
+// @media (max-width: 576px) {
+//   .container-table100 {
+//     padding-left: 15px;
+//     padding-right: 15px;
+//   }
+// }
+
+.kWgQNm {
+  box-sizing: border-box;
+  display: flex;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  align-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  max-width: unset;
+  min-width: unset;
+  min-height: unset;
+  cursor: unset;
+  transform: unset;
+  word-break: unset;
+  z-index: unset;
+  padding: 0px;
+  margin: 0px;
+  overflow: unset;
+  background: unset;
+  border-right: unset;
+  border-bottom: unset;
+  flex: 0 0 auto;
+  border-radius: unset;
+  transition: initial;
+}
+
+.dfmgGo {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: 1px solid rgb(30, 172, 178);
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 18px 0px 0px 18px;
+}
+
+.jXaklS {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px;
+}
+
+.jXaklS {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+  background-color: rgb(255, 255, 255);
+  color: rgb(30, 172, 178);
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: none;
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px;
+}
+
+.bvKoMW {
+  z-index: 0;
+  top: unset;
+  right: unset;
+  bottom: unset;
+  left: unset;
+  box-shadow: unset;
+  -webkit-box-flex: unset;
+  flex-grow: unset;
+
+  color: #1eacb2;
+  font-size: 14px;
+  backdrop-filter: unset;
+  width: 30px;
+  max-height: 40px;
+  text-align: center;
+  cursor: pointer;
+  align-self: unset;
+  padding: 3px;
+  border-left: none;
+  border-right: 1px solid rgb(30, 172, 178);
+  border-top: 1px solid rgb(30, 172, 178);
+  border-bottom: 1px solid rgb(30, 172, 178);
+  margin: 0px;
+  border-radius: 0px 18px 18px 0px;
+}
+
+.kWgQNm {
+  //   .active,  .dfmgGo:hover{
+  //         background-color: rgb(30, 172, 178);
+  //         border-right: 1px solid rgb(30, 172, 178);
+  //         border-top: 1px solid rgb(30, 172, 178);
+  //         border-bottom: 1px solid rgb(30, 172, 178);
+  //         color:white;
+  //     }
+
+  .active,
+  .sc-bdVaJa:hover {
+    background-color: rgb(30, 172, 178);
+    color: white;
+    border-bottom: 1px solid rgb(30, 172, 178);
+  }
+
+  // .active, .bvKoMW:hover{
+  //     background-color: rgb(30, 172, 178);
+  //     border-right: 1px solid rgb(30, 172, 178);
+  //     border-top: 1px solid rgb(30, 172, 178);
+  //     border-bottom: 1px solid rgb(30, 172, 178);
+  //     color:white;
+  // }
+}
diff --git a/src/app/show-vehicles/show-vehicles.component.spec.ts b/src/app/show-vehicles/show-vehicles.component.spec.ts
new file mode 100644
index 0000000..5c63a49
--- /dev/null
+++ b/src/app/show-vehicles/show-vehicles.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShowVehiclesComponent } from './show-vehicles.component';
+
+describe('ShowVehiclesComponent', () => {
+  let component: ShowVehiclesComponent;
+  let fixture: ComponentFixture<ShowVehiclesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ShowVehiclesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ShowVehiclesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/show-vehicles/show-vehicles.component.ts b/src/app/show-vehicles/show-vehicles.component.ts
new file mode 100644
index 0000000..9d24b1d
--- /dev/null
+++ b/src/app/show-vehicles/show-vehicles.component.ts
@@ -0,0 +1,8535 @@
+import { Component, OnInit, NgZone, EventEmitter, ContentChildren, QueryList, AfterContentInit, ViewChild, OnDestroy, OnChanges, ElementRef, Output, ViewEncapsulation, HostListener } from '@angular/core';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA, MdTabChangeEvent } from '@angular/material';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { MdSnackBar } from '@angular/material';
+import { DatainjectionService } from '../datainjection.service'
+import { ContactService } from '../contact.service';
+import { Router, ActivatedRoute, Params } from '@angular/router';
+import * as moment from 'moment-timezone';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ShareLocComponent } from '../location/share-loc/share-loc.component';
+import { Injectable } from '@angular/core';
+import { Observable, Subject } from 'rxjs/Rx';
+import { BrowserModule } from '@angular/platform-browser';
+import { ChartsModule, BaseChartDirective } from 'ng2-charts/ng2-charts';
+import * as io from 'socket.io-client';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { SidemenuFuelComponent } from '../sidemenu-fuel/sidemenu-fuel.component';
+import { AddpoiBylocationComponent } from '../addpoi-bylocation/addpoi-bylocation.component';
+// import { CreateTripComponent } from './create-trip/create-trip.component';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+// import { ImmobilizeComponent } from './immobilize/immobilize.component';
+// import { CmdUIComponent } from './cmd-ui/cmd-ui.component';
+// import { CommandWindowComponent } from './command-window/command-window.component';
+// import { AddDeviceComponent } from './add-device/add-device.component';
+import { FormControl } from '@angular/forms';
+
+
+declare var jsPDF : any;
+declare var html2canvas:any
+
+declare var swal: any;
+declare var ol:any;
+
+/* import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
+*/
+declare var google: any;
+
+declare var MarkerClusterer: any;
+declare var InfoBox: any;
+declare var RadialGauge: any;
+@Component({
+  selector: 'app-show-vehicles',
+  templateUrl: './show-vehicles.component.html',
+  styleUrls: ['./show-vehicles.component.scss']
+})
+export class ShowVehiclesComponent implements OnInit {
+ @ViewChild(SidemenuFuelComponent) child1: SidemenuFuelComponent;
+  @ViewChild('main')main:ElementRef;
+  modelChanged: Subject<string> = new Subject<string>();
+  area=0;
+  toppings = new FormControl();
+
+  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
+  imei
+  // private fuelComponent: SidemenuFuelComponent;
+  showLabels:boolean=true;
+  showAddress:boolean=false;
+  showSocketData: boolean = false;
+  satelliteDisabled:boolean=false
+  immobilizeChk:boolean = false;
+  testData: any;
+  reloadCOmponent: boolean;
+  mapWidth: string;
+  showButton: boolean = true;
+  test_stop: any = [];
+  Durations: string;
+  park_icon = [];
+  speeed_1 = 10;
+  test_Data: any;
+  timerGif = "../../assets/images/timerGif.gif";
+  addresslocation: any;
+  departureTime: string;
+  arrivalTime: string;
+  longitude: any;
+  minIdleTime: number = 10;
+  locations: any;
+  latitude: any;
+  stoppage_container: any = [];
+  // stop_locations: any =[];
+  departure: Date;
+  arrival: Date;
+  dev_id: any;
+  //date: any
+  MapLoad: boolean = true;
+  loc: any;
+  lcShr: Boolean = false;
+  before: any;
+  SpeedMeter: Boolean;
+  zoomLevel: number;
+  data_descip: any;
+  superAdmin: Boolean = false;
+  liveAdd: any = "";
+  mapNew: any;
+  trafficLayer: any;
+  routeDetails: (uId: any, choice: any) => void;
+  latitudeInDMS: any;
+  longitudeInDMS: any;
+  toggleGeofence: (choice: any) => void;
+  enabletrail:boolean = false;
+  parkingButtonShow;
+  selectedDevice
+  showHistory: boolean = false;
+  togglePOI: (choice: any) => void;
+  colorTheme = 'theme-dark-blue';
+  last_speed: string;
+  DealerID: any;
+  supAdm: any;
+  deviceObj: any = [];
+  dealerid: any;
+  supadmin: any;
+  deviceSelect: any = [];
+  deviceName: any;
+  stoppageCount: any;
+  speedArr: any;
+  maxSpeedd: any;
+  dev_by_dashboard: string;
+  latToPass: any;
+  longToPass: any;
+  directionsService: any;
+  directionsDisplay: any;
+  EndTripStartLat: any;
+  EndTripStartLong: any;
+  ETA: any;
+  bsConfig: Partial<BsDatepickerConfig>;
+  tripId: any;
+  historyDate: any;
+
+  goToPoint: () => void;
+  moveMarker: () => void;
+  marker4: any;
+  start: any;
+  historyMap: any;
+  navId: String;
+  deviceList: any = [];
+  to: string;
+  tab_1 : boolean =false;
+  tab_2:boolean =false;
+  tab_3:boolean= false;
+  from: string;
+  total_vech: any;
+  idle_vech: any;
+  off_vech: any;
+  maintanance: any;
+  expiredDevices: any;
+  OutOfReach: any;
+  no_data: any;
+  Running: any;
+  idle_duration: any;
+  off_duration: any;
+  maintenance_ids: any;
+  idle_ids: any;
+  expired_ids: any;
+  off_ids: any;
+  runnigg: any;
+  outofreach_ids: any;
+  alldevvice: any;
+  no_gps_name: any;
+  id_running: any;
+  id_stop: any;
+  id_out: any;
+  id_idel: any;
+  unloading: any;
+  loading: any;
+  id_main: any;
+  currentTime = new Date();
+  not_on_root: any;
+  cordin: any;
+  temptrackingDev: any;
+  buindhistoryDevice: any;
+  currStatus: any;
+  socketData: any;
+  tempMapHistory: any = [];
+  showTable: boolean = false;
+  historyDataCondition: boolean = false;
+  liveLocationMarkerObj: any;
+  darkModeSwitch: boolean = false;
+  tttttt: any = [];
+   tabIndexValue: any = "0";
+   tempDevInfo: any;
+   cummulative_Distance: number =0;
+   token_identifier: string;
+   contentAdd: string;
+   historyAdress: any = '';
+   gpsDataArr: any;
+   ext_voltage: any;
+   seekBarValue: any=200;
+   sliderValue: number = 0;
+   indexValue: any;
+   status_cmdq: any;
+   intervalTimeOut:any;
+   immobilizeCount: number;
+   ImmErrMsg: string;
+   showErr: boolean =false;
+   unlocked: boolean =false;
+   errIcon:boolean=false;
+   locked: boolean=false;
+   shoError:any;
+   private socket_Notify;
+   dealer_Permission: any;
+   adbtn: string;
+   markerArray: any;
+   satelite=5;
+   dataSelect2:any;
+   newArr=[{"value":"1"},{"value":"2"},{"value":"3"},{"value":"4"},{"value":"5"},{"value":"6"},{"value":"7"},{"value":"8"},{"value":"9"},
+   {"value":"10"},{"value":"11"},{"value":"12"},{"value":"13"},{"value":"14"},{"value":"15"}]
+   distanceVariation: any;
+  myaccount() {
+
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+
+    // let dialogRef = this.dialog.open(MyaccountComponent, {
+    //   width: '903px',
+    //   data: {}
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+
+    //   if(result == "succ"){
+    //     //console.log("Updated")
+    //   }
+
+    // });
+  }
+
+  filterStates1(val) {
+    console.log("===>",val)
+    if (val) {
+      const filterValue: any = val ; 1
+      this.dataSelect2 = this.newArr.filter(function (d) {
+    console.log("inside Search Method=>",d);
+        return d.value.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase())>-1;
+      });
+      if(this.dataSelect2.length!=0){
+      this.satelite=val
+      console.log("searched model=>",this.dataSelect2,"----------",this.satelite);
+    }
+      return this.dataSelect2;
+    }
+  }
+
+  addcus() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("add");
+  }
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+
+  // geo(){
+  //   this.router.navigateByUrl("geofencing");
+
+  // }
+  shareLocation(device) {
+    // //console.log(a);
+
+    // //console.log(this.new, this.prev_map);
+
+    if (this.new) {
+      if (this.new == null || this.new == undefined) {
+        this.tost1("shrlcnd");
+      }
+      else {
+        let dialogRef = this.dialog.open(ShareLocComponent, {
+          width: '528px',
+          data: { did: device.Device_ID, dname: device.viewValue }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+
+          if (result == "shareloc") {
+            this.new = null
+            this.tost1("shareloc");
+          }
+
+        });
+      }
+
+    }
+    else if (this.prev_map) {
+      if (this.prev_map == null || this.prev_map == undefined) {
+        this.tost1("shrlcnd");
+      }
+      else {
+        /*       window.localStorage['mapLoad_Name'] = name */
+
+        let dialogRef = this.dialog.open(ShareLocComponent, {
+          width: '528px',
+          data: { did: this.prev_map, dname: window.localStorage.mapLoad_Name }
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+
+          // //console.log(result);
+          if (result == "shareloc") {
+            this.tost1("shareloc");
+          }
+
+        });
+      }
+
+    }
+    else {
+      this.tost1("shrlcnd");
+    }
+  }
+
+  // TOAST
+  tost1(divid) {
+    if (divid == "shareloc") {
+      this.data_descip = "Location Sucessfully Shared";
+      launch_toast();
+    }
+    else if (divid == "nullsrlc") {
+      this.data_descip = "Please Enter ether Email ID or Phone Number";
+      launch_toast();
+    }
+    else if (divid == "shrlcnd") {
+      this.data_descip = "Please Select any Device";
+      launch_toast();
+    }else if(divid === 'added'){
+      this.data_descip = "Device added";
+      launch_toast();
+    }
+
+
+    function launch_toast() {
+      // //console.log(divid);
+      var x = document.getElementById("toast")
+      ////console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    }
+  }
+  dataa: any;
+  /* 
+  shreloc(b){
+    if(this.loc == null || this.loc == undefined ){
+      //console.log("hkfhl")
+      this.tost1("nullsrlc");
+    }
+    else{
+      this.contactService.shareloc(b.did,this.loc).subscribe(
+        
+        data => {
+          this.dataa = data 
+          this.lcShr = false;
+          this.tost1("shareloc");
+        }, (err: any) => { //console.log(err.status); 
+          //console.log(err);
+          if(err.status !=   200)
+          {
+            
+          }
+          
+          
+          
+        })
+        
+      }
+    } */
+
+
+  settings = {
+    /*  bigBanner: true, */
+    date1: new Date().setHours(0, 0, 0),
+    date2: new Date(),
+    timePicker: true,
+    format: 'dd-MMM-yyyy hh:mm a',
+    closeOnSelect: true
+
+    /*   defaultOpen: true */
+  }
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("dashboard");
+
+  }
+
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+
+
+  soon() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("const");
+  }
+  point: any = 0;
+  a() {
+    //  //console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  report() {
+    this.cond = false
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report");
+
+  }
+
+
+  vehicleRoute() {
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  route_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+
+  notification() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+  report_speed() {
+    // //console.log("report speed call")
+    this.cond = false
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  openNav() {
+    this.router.navigateByUrl("location");
+  }
+  geoo() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("geofencing");
+
+  }
+  ideal() {
+    localStorage.removeItem('mapLoad_ID')
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  cond: Boolean = false;
+  /*
+  foods = [
+    {value: 'Device 1', viewValue: 'Device 1'},
+    {value: 'Device 2', viewValue: 'Device 2'},
+    
+  ]; */
+
+  mainmap: boolean = false;
+  speed: any;
+  datee: any
+  time: any
+  online: Boolean;
+  latLongArr3 = []
+  offline: Boolean = false;
+  geo: Boolean = false;
+  foods = [];
+  devmap(a) {
+    // //console.log(a);
+  }
+
+
+  showhistory(a) {
+    //  //console.log(this.new);
+    if (this.new) {
+      var selectedDevice = {
+        id: this.new.id,
+        viewValue: this.new.viewValue,
+        iconType: this.new.iconType,
+        deviceId: this.new.did
+      }
+      this.deviceName = selectedDevice.viewValue;
+      // //console.log(selectedDevice);
+      // //console.log(this.deviceSelect);
+      this.deviceSelect.push(selectedDevice);
+      // //console.log("Selected Device",this.deviceSelect);
+      //  a = this.new;
+      a = this.deviceSelect[0];
+    }
+
+
+    this.showButton = !this.showButton;
+    // this.date1 = new Date();
+    this.date2 = new Date();
+    this.mapp = false;
+    this.mappp = false
+    this.MapLoad = false
+    this.historyData = true
+    this.hismap = true;
+    this.lcShr = false;
+    this.online = false;
+    this.offline = true;
+    this.latlongObjArr = [];
+    this.latLongArr2 = [];
+    this.lat = null;
+    this.lng = null;
+
+    if (a == undefined) {
+    }
+    else {
+      this.socket.removeAllListeners(a.deviceId);
+      //this.socket_Geo.removeAllListeners(a.did);
+    }
+
+    // //console.log("Runnig History Tracking")
+    //this.hismap = false;
+    //this.mapp = true;
+    this.latLongArr = []
+
+  }
+
+  showgeo() {
+    this.mapp = false;
+    this.mappp = false
+    ////console.log("showgeo")
+    this.online = false;
+    this.offline = false;
+    this.lcShr = false;
+    this.geo = true;
+    let map;
+    this.geofun = true;
+    runMaps();
+
+    function runMaps() {
+
+      // //console.log("Running GeoFencing")
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(function (position) {
+
+          map = new google.maps.Map(document.getElementById('map'), {
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            zoom: 15,
+
+          });
+          google.maps.event.addListener(map, 'click', function (event) {
+            placeMarker(event.latLng);
+            // //console.log(event.latLng.toUrlValue(5));
+          });
+
+          function placeMarker(location) {
+            var marker = new google.maps.Marker({
+              position: location,
+              map: map,
+
+            });
+
+          }
+          var all_overlays = [];
+          var selectedShape;
+          var drawingManager = new google.maps.drawing.DrawingManager({
+            drawingMode: google.maps.drawing.OverlayType.MARKER,
+            drawingControl: true,
+            drawingControlOptions: {
+              position: google.maps.ControlPosition.TOP_CENTER,
+              drawingModes: [
+                //google.maps.drawing.OverlayType.MARKER,
+                google.maps.drawing.OverlayType.CIRCLE,
+                google.maps.drawing.OverlayType.POLYGON,
+                google.maps.drawing.OverlayType.RECTANGLE
+              ]
+            },
+            markerOptions: {
+              icon: 'images/beachflag.png'
+            },
+            circleOptions: {
+              fillColor: '#ffff00',
+              fillOpacity: 0.2,
+              strokeWeight: 3,
+              clickable: false,
+              editable: true,
+              zIndex: 1
+            },
+            polygonOptions: {
+              clickable: true,
+              draggable: true,
+              editable: true,
+              fillColor: '#ffff00',
+              fillOpacity: 1,
+
+            },
+            rectangleOptions: {
+              clickable: true,
+              draggable: true,
+              editable: true,
+              fillColor: '#ffff00',
+              fillOpacity: 0.5,
+            }
+          });
+
+          function clearSelection() {
+            if (selectedShape) {
+              selectedShape.setEditable(false);
+              selectedShape = null;
+            }
+          }
+
+          function setSelection(shape) {
+            clearSelection();
+            selectedShape = shape;
+            shape.setEditable(true);
+            // google.maps.event.addListener(selectedShape.getPath(), 'insert_at', getPolygonCoords(shape));
+            // google.maps.event.addListener(selectedShape.getPath(), 'set_at', getPolygonCoords(shape));
+          }
+
+          function deleteSelectedShape() {
+            if (selectedShape) {
+              selectedShape.setMap(null);
+            }
+          }
+
+          function deleteAllShape() {
+            for (var i = 0; i < all_overlays.length; i++) {
+              all_overlays[i].overlay.setMap(null);
+            }
+            all_overlays = [];
+          }
+
+          function CenterControl(controlDiv, map) {
+
+            // Set CSS for the control border.
+            var controlUI = document.createElement('div');
+            controlUI.style.backgroundColor = '#fff';
+            controlUI.style.border = '2px solid #fff';
+            controlUI.style.borderRadius = '3px';
+            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+            controlUI.style.cursor = 'pointer';
+            controlUI.style.marginBottom = '22px';
+            controlUI.style.textAlign = 'center';
+            controlUI.title = 'Select to delete the shape';
+            controlDiv.appendChild(controlUI);
+
+            // Set CSS for the control interior.
+            var controlText = document.createElement('div');
+            controlText.style.color = 'rgb(25,25,25)';
+            controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+            controlText.style.fontSize = '16px';
+            controlText.style.lineHeight = '38px';
+            controlText.style.paddingLeft = '5px';
+            controlText.style.paddingRight = '5px';
+            controlText.innerHTML = 'Delete Selected Area';
+            controlUI.appendChild(controlText);
+
+            // Setup the click event listeners: simply set the map to Chicago.
+            controlUI.addEventListener('click', function () {
+              deleteSelectedShape();
+            });
+
+          }
+          drawingManager.setMap(map);
+          var getPolygonCoords = function (newShape) {
+            // //console.log("We are one");
+            var len = newShape.getPath().getLength();
+            for (var i = 0; i < len; i++) {
+              //console.log(newShape.getPath().getAt(i).toUrlValue(6));
+            }
+          };
+
+          google.maps.event.addListener(drawingManager, 'polygoncomplete', function (event) {
+
+            event.getPath().getLength();
+            google.maps.event.addListener(event.getPath(), 'insert_at', function () {
+              var len = event.getPath().getLength();
+              for (var i = 0; i < len; i++) {
+                //console.log(event.getPath().getAt(i).toUrlValue(5));
+              }
+            });
+            google.maps.event.addListener(event.getPath(), 'set_at', function () {
+              var len = event.getPath().getLength();
+              for (var i = 0; i < len; i++) {
+                //console.log(event.getPath().getAt(i).toUrlValue(5));
+              }
+            });
+          });
+
+          google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
+
+            all_overlays.push(event);
+            if (event.type !== google.maps.drawing.OverlayType.MARKER) {
+              drawingManager.setDrawingMode(null);
+              //Write code to select the newly selected object.
+
+              var newShape = event.overlay;
+              newShape.type = event.type;
+              google.maps.event.addListener(newShape, 'click', function () {
+                setSelection(newShape);
+              });
+
+              setSelection(newShape);
+            }
+          });
+
+
+          var centerControlDiv = document.createElement('div');
+          var centerControl = new CenterControl(centerControlDiv, map);
+
+
+          //centerControlDiv.index = 1;
+          map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
+        });
+      }
+    };
+
+
+  }
+
+
+  CurrLiveValue: any = null
+  deviceToTrack = []
+  live(b) {
+    // //console.log(b);
+  
+    this.mappp = true;
+    this.MapLoad = true;
+    this.historyData = false
+    this.SpeedMeter = true;
+    this.showButton = true;
+    // //console.log("sjkdfbaajkdsbnsafasfasfasfa");
+    // //console.log(this.new);
+    // //console.log(this.deviceSelect[0]);
+    var devId: any;
+    if (this.deviceSelect) {
+      devId = this.deviceSelect[0].deviceId;
+      // //console.log(devId);
+    } else {
+      devId = this.new.did;
+      // //console.log(devId);
+    }
+    // if (b == undefined) {
+
+    //   this.livetrack(null);
+    // }
+    // else {
+
+    //   this.livetrack(b.did);
+    // }
+    // //console.log('devId=>',devId);
+    if (devId) {
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+        console.log("11111111111111");
+        
+        this.livetrack(devId);
+      }
+     
+    } else {
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+        console.log("111111111112222");
+        this.livetrack(null);
+      }
+      
+    }
+  }
+  cancells() {
+    this.mappp = true;
+    this.mapp = true;
+    this.lcShr = false;
+  }
+
+
+  speedshow: any
+  location = []
+  historyData: boolean = true;
+  //Main Declaration of LiveTrack Function *********************
+  livetrack(a) {
+    console.log("ID==========",a);
+    this.markerArray=[];
+    var count =0 ;
+    var that = this;
+    this.SpeedMeter2 = false
+    this.PlayData = false;
+    this.pauseDate = false;
+    var outerThis = this;
+    this.mainmap = false;
+    if (a == undefined) {
+      a = null;
+    }
+    // if(a == undefined){
+    //   this.online = true;
+    //   this.offline =false;
+    //   this.hismap = false;
+    //   this.mapp = true;
+
+    //   return;
+    // }
+    for (var e = 0; e < this.deviceToTrack.length; e++) {
+      this.socket.removeAllListeners(this.deviceToTrack[e])
+    }
+    this.deviceToTrack = [];
+   
+
+    for (let i = 0; i < this.foods.length; i++) {
+      if (this.foods[i].deviceType == "Tracker") {
+
+        let aTemp = {
+          did: this.foods[i].did,
+          dname: this.foods[i].viewValue
+        }
+        this.device_imei.push(aTemp);
+
+        if (a === null || a === undefined) {
+          // //console.log(this.foods[i].did)
+          this.SpeedMeter = false;
+          this.mapWidth = '95vw'
+          this.deviceToTrack.push(this.foods[i].did)
+          this.zoomLevel = 5
+        }
+        else {
+          this.SpeedMeter = true
+          this.zoomLevel = 18
+          this.mapWidth = '87vm'
+        }
+      }
+
+    }
+    if (a) {
+
+      this.deviceToTrack.push(a)
+    }
+    this.geoFenceaction(this.device_imei)
+
+
+
+    //this.CurrLiveValue = a.did;
+    this.online = true;
+    this.offline = false;
+    // //console.log("Runnig Live Tracking")
+    this.hismap = false;
+    this.mapp = true;
+    this.latLongArr = []
+
+    let map;
+    let marker = {};
+    let oldChannel = null;
+    //let newChannel = a.did;
+    let delay = 100;
+    let target = {};
+    let coords = {};
+    let ongoingGoToPoint = {};
+    let ongoingMoveMarker = {};
+    let isMapInit = false;
+    let flag;
+    let flag2;
+    let locations = []
+    // =============== ~animation functions =====================
+  
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(50, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var jcbIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/idlingjcb.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var ambulanceIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/ambulance_b.png',
+      scaledSize: new google.maps.Size(50, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',  
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    // var rickShawIcon = {
+    //   url: '/assets/images/liveTrackIcons/rtractor.png',
+    //   scaledSize: new google.maps.Size(35, 50),
+    //   //size: new google.maps.Size(30, 100),
+    //   scale: .6,
+    //   strokeColor: 'white',
+    //   strokeWeight: .10,
+    //   fillOpacity: 1,
+    //   fillColor: 'blue',
+    //   //fillColor: '#b75656',
+    //   offset: '5%',
+    //   // rotation: parseInt(heading[i]),
+    //   anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+    //   rotation: 0
+    // };
+
+    // var tempoIcon = {
+    //   url: '/assets/images/liveTrackIcons/rtractor.png',
+    //   scaledSize: new google.maps.Size(35, 50),
+    //   //size: new google.maps.Size(30, 100),
+    //   scale: .6,
+    //   strokeColor: 'white',
+    //   strokeWeight: .10,
+    //   fillOpacity: 1,
+    //   fillColor: 'blue',
+    //   //fillColor: '#b75656',
+    //   offset: '5%',
+    //   // rotation: parseInt(heading[i]),
+    //   anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+    //   rotation: 0
+    // };
+
+
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon,
+      "jcb" : jcbIcon,
+      "ambulance" : ambulanceIcon
+    
+    }
+    // //console.log('deviceListdeviceListdeviceListdeviceList',this.deviceToTrack);
+
+
+    this.flightPathArr = [];
+    this.tttttt = [];
+    var tempTimeInterval:any;
+
+
+    // //console.log("Runnig ON Change");
+    // reset variables and remove existing data of previous channel, also stop animation functions
+    // //console.log(newChannel);
+    coords = {}
+    for (var key in ongoingGoToPoint) {
+      if (ongoingGoToPoint.hasOwnProperty(key)) {
+        clearTimeout(ongoingGoToPoint[key]);
+      }
+    }
+
+
+    for (var key in ongoingMoveMarker) {
+      if (ongoingMoveMarker.hasOwnProperty(key)) {
+        clearTimeout(ongoingMoveMarker[key]);
+      }
+    }
+
+   
+    for (var x = 0; x < this.deviceToTrack.length; x++) {
+      var newChannel = this.deviceToTrack[x].toString();
+      var date = new Date().setHours(0, 0, 0, 0)
+      this.socket.on(newChannel, channelListener(newChannel));
+      this.socket.emit('initLive', newChannel, date);
+    }
+   
+    var r
+
+    function channelListener(newChannel) {
+      return function (msg, initData, deviceInfo) {
+     
+        outerThis.tempDevInfo = {};
+        outerThis.flightPathArr.push({ lat: msg.latDecimal, lng: msg.longDecimal });      
+        if(outerThis.enabletrail == true){
+          outerThis.draw_flight_trail(outerThis.flightPathArr);
+        }
+
+          // console.log('devobject coming from socket',deviceInfo);
+          // console.log('device object coming from service',outerThis.deviceList)
+        // if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+        //   if (deviceInfo.status != 'RUNNING') {   
+        //     outerThis.addressConversion(msg);
+        //   } 
+        
+        // }else{
+        //   //console.log('no address api call');
+        // }
+        // console.log('outerThis.deviceList',outerThis.deviceList);
+        outerThis.deviceList.filter(function (dd, index) {
+      
+            if(dd.Device_ID === deviceInfo.Device_ID){
+              deviceInfo['checked']  = dd.checked;
+            }
+        })
+        // console.log('1345678909876543267898765432345676543=>',deviceInfo.checked);
+      
+        if (outerThis.deviceToTrack.length == 1) {
+          outerThis.deviceList.filter(function (colHilight, i) {
+            outerThis.deviceList[i]['playPause'] = true;
+            if (colHilight.Device_ID === outerThis.deviceToTrack[0]) {
+              outerThis.deviceList[i]['columnHighlight'] = true;
+              if (msg['GPS positioned']) {
+                outerThis.deviceList[i].gpsTracking = msg['GPS positioned'];
+              }
+              if (msg.ignition) {
+                outerThis.deviceList[i].last_ACC = msg.ignition;
+              }
+              if (msg.power) {
+                outerThis.deviceList[i].power = msg.power;
+              }
+              if (msg.speed) {
+                outerThis.deviceList[i].last_speed = msg.speed;
+              }
+              
+              
+
+              if (outerThis.currentPage === 1) {
+                outerThis.showSocketData = true;
+                //console.log({"colHilight=>":colHilight});
+            
+                //console.log({"msg=>":msg});
+                outerThis.showSocketData = true;
+                // date satellites ignition port
+                if(msg.date== undefined){
+                  msg['date'] = colHilight.last_ping_on
+
+                }
+
+                if(msg.satellites == undefined){ 
+                  msg['satellites'] = colHilight.satellites
+
+                }
+                if(msg.ignition == undefined){ 
+                  msg['ignition'] = colHilight.last_ACC ;
+
+                }
+                if(msg.port == undefined){ 
+                  msg['port'] = colHilight.port ; 
+                }
+               
+                outerThis.socketData = msg;
+                outerThis.getSystemLogs(colHilight);
+                outerThis.deviceCQ(colHilight);
+                outerThis.getRecentNotification(colHilight);
+              }
+            } else {
+              outerThis.deviceList[i]['columnHighlight'] = false;
+            }
+          })
+
+     
+        }
+        this.lat = deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[1] : null;
+        this.lng = deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[0] : null;
+      
+        r = 0
+        if (coords[newChannel] === null || coords[newChannel] === undefined) coords[newChannel] = [];
+        outerThis.mainmap = true;
+        if (initData == 'ping' || (initData == 'initPing' && coords[newChannel].length == 0)) {
+          // //console.log('deviceInfo=>',deviceInfo);
+          // addressConversion======================================================
+          if(outerThis.navId != 'locationComponent'){
+            outerThis.liveAdd ='';
+            outerThis.tempDevInfo = deviceInfo ; 
+    
+            let d_lat = msg.latDecimal?msg.latDecimal : deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[1] : null;
+            let d_lng = msg.longDecimal?msg.longDecimal : deviceInfo.last_loc ? deviceInfo.last_loc.coordinates[0] : null;
+       
+            var latlng_1 =
+            {
+              "lat": d_lat,
+              "long":  d_lng
+            }
+            outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{   
+              if(res.message == "Address not found in databse"){
+                let geocoder = new google.maps.Geocoder();
+                let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+
+                let request = {
+                  latLng: t_latlng
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      outerThis.liveAdd = data[0].formatted_address;
+                      // //console.log(outerThis.liveAdd);
+                      outerThis.saveAddress(d_lat, d_lng,outerThis.liveAdd)
+                    } else {
+                      // //console.log("No address available")
+                      outerThis.liveAdd = "No address available";
+                    }
+                  }
+                  else {
+  
+                    outerThis.liveAdd = 'NA';
+  
+  
+                  }
+  
+                })
+              }else{
+               
+                outerThis.liveAdd = res.address;
+              }
+              console.log("ADDRESS---->",outerThis.liveAdd);
+              
+            })
+          }
+          
+          // addressConversion=========================================================
+
+          this.latLongArr = [];
+          coords[newChannel].splice(0, coords[newChannel].length - 1);
+          const speed = parseFloat(msg.speed);
+          if (initData == 'ping') {
+            outerThis.speeed = msg.speed;
+          }
+          outerThis.MapLoad = false
+          outerThis.test_Data = msg.currentFuel;
+         
+          var x = msg.speed;
+
+          const heading = parseFloat(msg.heading);
+          const message = 'IMEI: ' + msg.imei + ' Speed: ' + msg.speed + 'Km/hr';
+          if (msg.interpolated == null || msg.interpolated === undefined) {
+           
+            this.lat = msg.latDecimal;
+            this.lng = msg.longDecimal;
+            // //console.log("lat long= >",this.lat,this.lng);
+            coords[newChannel].push([this.lat, this.lng]);
+            let a = {
+              lat: msg.latDecimal,
+              lng: msg.longDecimal,
+              did: msg.imei
+            }
+
+            if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+              var geocoder = new google.maps.Geocoder();
+              var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+  
+            }
+        
+            var request = {
+              latLng: latlng
+            };
+         
+              var latlng_1 =
+              {
+                "lat": msg.latDecimal,
+                "long":  msg.longDecimal
+              }
+
+        
+            
+
+            //address function end here
+          } else {
+        
+            for (let k = 0; k < msg.interpolated.length; k++) {
+              if (msg.interpolated[k].location.latitude == null || msg.interpolated[k].location.longitude == null) {
+                // //console.log("Lattitude Longitude if location.lattitude is null=>",msg.interpolated[k].location.latitude,msg.interpolated[k].location.longitude);
+                this.lat = msg.latDecimal;
+                this.lng = msg.longDecimal;
+                this.titleMarker = message;
+                this.titleMarker2 = message;
+                this.latLongArr.push([this.lat, this.lng]);
+                coords[newChannel].push([this.lat, this.lng]);
+                let a = {
+                  lat: msg.latDecimal,
+                  lng: msg.longDecimal,
+                  did: msg.imei
+                }
+              } else {
+                // //console.log("Lattitude Longitude if location.lattitude is not null=>",msg.interpolated[k].location.latitude,msg.interpolated[k].location.longitude)
+                this.lat = msg.interpolated[k].location.latitude;
+                this.lng = msg.interpolated[k].location.longitude;
+                this.titleMarker = message;
+                this.titleMarker2 = message;
+                this.latLongArr.push([this.lat, this.lng]);
+                coords[newChannel].push([this.lat, this.lng]);
+
+              }
+
+
+              // converting Address 
+
+             
+              var geocoder = new google.maps.Geocoder();
+              var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+
+              var request = {
+                latLng: latlng
+              };
+
+
+
+            
+
+              var latlng_1 =
+              {
+                "lat": msg.latDecimal,
+                "long":  msg.longDecimal
+              }
+
+              // if((a != null) && (a != undefined) &&(outerThis.navId != 'locationComponent')){
+              //   outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{
+             
+              //     if(res.message == "Address not found in databse"){
+              //       geocoder.geocode(request, function (data, status) {
+              //         if (status == google.maps.GeocoderStatus.OK) {
+              //           if (data[0] != null) {
+              //             outerThis.liveAdd = data[0].formatted_address;
+              //             // //console.log(outerThis.liveAdd);
+              //             outerThis.saveAddress(msg.latDecimal, msg.longDecimal,outerThis.liveAdd)
+              //           } else {
+              //             // //console.log("No address available")
+              //             outerThis.liveAdd = "No address available";
+              //           }
+              //         }
+              //         else {
+      
+              //           outerThis.liveAdd = 'NA';
+      
+      
+              //         }
+      
+              //       })
+              //     }else{
+                   
+              //       outerThis.liveAdd = res.address;
+              //     }
+              //   })
+              // }
+           
+          
+
+              //address function end here
+            }
+
+          }
+
+       
+          var boxCheck = deviceInfo.checked;
+          // that.socketData=deviceInfo;
+          // console.log('checkbox value coming from =>',deviceInfo,boxCheck);
+          if (!isMapInit) {
+         
+              initialize(this.lat, this.lng, newChannel);
+            
+          
+          }
+          // console.log(boxCheck);
+        
+            if(boxCheck === true){
+              initializeMarker(that.elementRef, this.lat, this.lng, newChannel, deviceInfo.Device_Name, deviceInfo.status, deviceInfo.status_updated_at, deviceInfo.last_ping_on, msg, initData, deviceInfo.iconType, deviceInfo);
+            }
+         
+          
+          if ((initData == 'ping') || (status == 'RUNNING')) {
+            if(boxCheck === true){
+              animateMarker(that.elementRef, marker, speed, heading, true, newChannel, deviceInfo.Device_Name, deviceInfo.status, deviceInfo.status_updated_at, deviceInfo.last_ping_on, msg, initData, deviceInfo.iconType, deviceInfo);
+            }
+           
+          }
+          flag = false;
+        }
+      }
+    }
+
+    window.localStorage.shareloc = function (device) {
+      this.shareLocation(device);
+    }
+
+    function animateMarker(elementRef, marker, km_h, heading, cancel, device, deviceName, status, since, lastUpdate, msg, initData, iconType, _devInfo) {
+      // //console.log('STATUS==>',status);
+
+      // //console.log('lastPingOn=>',_devInfo.last_ping_on)
+
+   
+      // //console.log('statusstatusstatusstatusstatus=>', status);
+      var deviceSpeed = (status == 'STOPPED') ? 0 : msg.speed;
+
+
+      var lastPing = new Date(_devInfo.last_ping_on).getTime();
+      var currTime = new Date().getTime();
+      var timediff = currTime - lastPing;
+      var oneHourVal = 1 * 60 * 60 * 1000;
+      // //console.log("Vehicle Speed",msg.speed);
+      outerThis.last_speed = msg.speed;
+
+
+      // ============================================================================
+
+      // //console.log("totalhours=>",thours,_devInfo);
+      // if(timediff>oneHourVal){
+      //   var arrival_time= new Date(_devInfo.last_ping_on)
+      // }else{
+      var arrival_time = new Date(since);
+      // }
+      //  var arrival_time = new Date(since);
+
+      var curr_time = new Date();
+      var fd = new Date(arrival_time).getTime();
+      var td = curr_time.getTime();
+      var timedev_status_difference = td - fd;
+      var total_min = timedev_status_difference / 60000;
+      var hours = total_min / 60
+      var rhours = Math.floor(hours);
+      var minutes = (hours - rhours) * 60;
+      var rminutes = Math.round(minutes);
+      var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+      ////console.log("animate %s, target[device] is %s, coords[device].length is %s", device, target[device], coords[device].length)
+      // //console.log("time coming from socket", since);
+      if (since == undefined) {
+        var deviceData = "";
+
+      } else if (timediff > oneHourVal) {
+        var status_toShow = "OUT OF REACH " + 'Since ' + Durations
+      } else {
+
+        if (status == undefined) {
+
+          var status_toShow = "NA";
+
+        } else {
+          var status_toShow = status + " " + "Since" + " " + Durations;
+        }
+
+        var deviceData = status_toShow;
+
+
+      }
+
+
+
+      var gsm_signal = '';
+      if (msg != undefined) {
+        gsm_signal = msg.gsmSignal;
+
+      } else {
+        gsm_signal = _devInfo.gsmSignal;
+      }
+
+      // //console.log("gps_signal", msg, _devInfo);
+      // //console.log("Speed is %s", km_h);
+      clearTimeout(ongoingGoToPoint[device]);
+      clearTimeout(ongoingMoveMarker[device]);
+      var contentString = ''
+      if (initData == 'initPing') {
+        //console.log("Change features");
+        var lastLat = _devInfo.last_location.lat;
+        var lastlong = _devInfo.last_location.long;
+        console.log("INDDDDDDDDDDDDDDDDDDDDDDDDDDDDEH");
+        
+        contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+          '<button style= "position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lastLat + ',' + lastlong + '\');})"> add poi </button>' + 
+          '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+          '</div>'+
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last updated" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (lastUpdate ? (moment(lastUpdate).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdate).fromNow() + ')') : "No Data Available") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "GPS Positioned" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (_devInfo.gpsTracking == '1' ? 'Yes' : (_devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "GPS Signal" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((gsm_signal != undefined) ? gsm_signal : "NA") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Name" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Number" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last Speed" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          (_devInfo.last_speed) + " kmph" +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Status" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+          '</div>' +
+          '</div>' 
+          
+
+      }
+      else if (initData == 'ping') {
+
+        // //console.log('1', outerThis.liveAdd);
+        var lastLat = _devInfo.last_location.lat;
+        var lastlong = _devInfo.last_location.long;
+        contentString = ""
+        contentString = '<div class="infoB">' +
+        '<div class="DeviceHead">'+
+         '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' +  lastLat + ',' + lastlong + '\');})">add poi</button>' +
+        '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+        '</div>'+
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Last updated" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          moment(lastUpdate).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdate).fromNow() + ')' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "GPS Positioned" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((_devInfo.gpsTracking == '1' ? 'Yes' : _devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "GPS Signal" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          ((gsm_signal != undefined) ? gsm_signal : "NA") +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Name" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + ( outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Driver's Number" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+          '</div>' +
+          '</div>' +
+          '<div class="row rowTwo">' +
+          '<div class="col-sm-5">' +
+          "Speed" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          deviceSpeed + " " + "kmph"
+        '</div>' +
+          '</div>' +
+          '<div class="row rowOne">' +
+          '<div class="col-sm-5">' +
+          "Status" +
+          '</div>' +
+          '<div class="col-sm-7 leftPadding">' +
+          '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+          '</div>' +
+          '</div>' 
+          // '</div>' +
+          // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + _devInfo + '\');})">add poi</button>'
+
+        // '<div class="infoB"><div>Device : '
+        //   + deviceName + ' (' + device + ')</div></br><div> Last Updated : '
+        //   + moment(lastUpdate).fromNow() + '</div><br><div>GPS positioned : '
+        //   + (msg['GPS positioned'] == '1' ? 'Yes' : (msg['GPS positioned'] == '0' ? 'No' : '<small>Feature not supported by device</small>'))     
+        //   + '</div><br><div>Address :' + outerThis.liveAdd + '</div><br></br>' 
+        //   +'<div>Speed : '       
+        //   + msg.speed + ' kmph</div></div>'       
+        //   + '</div><br>'
+
+      }
+     
+      marker[device]['infowindow'].setContent(contentString);
+      console.log("Inside Infowindow");
+       
+      function goToPoint() {
+        // //console.log("Inside function!!!")
+       
+        let lat = marker[device].position.lat();
+        let lng = marker[device].position.lng();
+        // tslint:disable-next-line:prefer-const
+        let step = (km_h * 1000 * delay) / 3600000; // in meters
+        // tslint:disable-next-line:prefer-const
+        // //console.log('coords[device]coords[device]coords[device]=>',coords[device]);
+        var LTlat_dest: any;
+        var LTlng_dest: any;
+
+        if (coords[device].length == 0) {
+          LTlat_dest = _devInfo.last_location.lat;
+          LTlng_dest = _devInfo.last_location.long;
+        } else {
+          LTlat_dest = coords[device][target[device]][0];
+          LTlng_dest = coords[device][target[device]][1];
+
+
+        }
+
+
+        let dest = new google.maps.LatLng(LTlat_dest, LTlng_dest);
+
+        // tslint:disable-next-line:prefer-const
+        let distance =
+          google.maps.geometry.spherical.computeDistanceBetween(
+            dest, marker[device].position); // in meters
+        // var heading = google.maps.geometry.spherical.computeHeading(dest, marker[device].position);
+        // tslint:disable-next-line:prefer-const
+        let numStep = distance / step;
+        let i = 0;
+        // tslint:disable-next-line:prefer-const
+        let deltaLat = (LTlat_dest - lat) / numStep;
+        // tslint:disable-next-line:prefer-const
+        let deltaLng = (LTlng_dest - lng) / numStep;
+
+        function moveMarker() {
+          // console.log("deltaLat",deltaLat,"deltaLng",deltaLng);
+          
+          lat += deltaLat;
+          lng += deltaLng;
+          
+          i += step;
+          let markerDOM: any;
+          var liveSpeed = parseInt(msg.speed);
+          if (i < distance) {
+          
+            if (status == "OUT OF REACH") {
+              // icons[iconType].url = '/assets/images/liveTrackIcons/outofreach_car.png';
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "STOPPED") {       
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                 markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+           
+            } else if (status == "RUNNING") {
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }  else if (status == "NO DATA") {
+              icons[iconType].url = "/assets/image/no_data.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "IDLING") {
+            
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+            
+            }
+
+      
+
+            // //console.log(msg.ignition, )
+            // _devInfo
+            var head = google.maps.geometry.spherical.computeHeading(marker[device].getPosition(), new google.maps.LatLng(lat, lng));
+            // console.log("HEAD__===",head,"Marker==>",marker[device].getPosition(),"LAT LONG=>",new google.maps.LatLng(lat, lng),"==>",lat,lng);
+         
+            if ((head != 0) || (head == NaN)) {
+              // icons[iconType].rotation = head;
+              if (markerDOM) {
+                markerDOM.style.transform = 'rotate(' + head + 'deg)';
+              }
+            }
+            // //console.log("s")
+
+            // //console.log("totalhours=>",thours,_devInfo);
+
+
+            // ==============================commented on 4-1-2019 =================================
+            // //console.log('STATUS1==>',status);
+            // if (timediff>oneHourVal) {
+            //   icons[iconType].fillColor = "blue";
+            // }else  if ((_devInfo.last_ACC == 0) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "red";
+            // } else if ((_devInfo.last_ACC == 1) && (msg.speed > 0)) {
+            //   icons[iconType].fillColor = "green";
+            // } else if ((_devInfo.last_ACC == 1) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "yellow";
+            // }
+
+            // ==============================commented on 4-1-2019 =================================
+
+
+            marker[device].setIcon(icons[iconType]);
+            marker[device].setPosition(new google.maps.LatLng(lat, lng));
+            if (outerThis.deviceToTrack.length == 1) map.setCenter({ lat: lat, lng: lng });
+            ongoingMoveMarker[device] = setTimeout(moveMarker, delay);
+          } else {
+
+            status == "OUT OF REACH";
+            if (status == "OUT OF REACH") {
+              // icons[iconType].url = '/assets/images/liveTrackIcons/outofreach_car.png';
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            } else if (status == "STOPPED") {  
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{        
+                icons[iconType].url = that.iconSelector(status, iconType, msg);
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+           
+            } else if (status == "RUNNING") {
+              // icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }  else if (status == "NO DATA") {
+              icons[iconType].url = "/assets/image/no_data.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+            }else if (status == "IDLING") {
+              if(liveSpeed >= 1){
+                icons[iconType].url = "/assets/images/liveTrackIcons/running_car.png";
+                markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }else{       
+              icons[iconType].url = that.iconSelector(status, iconType, msg);
+              markerDOM = elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+              }
+            
+            }
+            // ========================= commented on 1-4-2019 ================================
+            // //console.log('STATUS2==>',status);
+            // if (timediff>oneHourVal) {
+            //   icons[iconType].fillColor = "blue";
+            // } else if ((_devInfo == 0) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "red";
+            // } else if ((_devInfo == 1) && (msg.speed > 0)) {
+            //   icons[iconType].fillColor = "green";
+            // } else if ((_devInfo == 1) && (msg.speed == 0)) {
+            //   icons[iconType].fillColor = "yellow";
+            // } 
+
+            // ========================= commented on 1-4-2019 ================================
+    
+            var head = google.maps.geometry.spherical.computeHeading(marker[device].getPosition(), dest)
+            // //console.log("head : " + marker[device].getPosition() + ',' + dest)
+            if ((head != 0) || (head == NaN)) {
+              // icons[iconType].rotation = head
+              if (markerDOM) {
+                markerDOM.style.transform = 'rotate(' + head + 'deg)';
+              }
+            }
+
+            marker[device].setIcon(icons[iconType]);
+            marker[device].setPosition(dest);
+
+
+
+            if (outerThis.deviceToTrack.length == 1) map.setCenter({ lat: LTlat_dest, lng: LTlng_dest });
+
+            target[device] = target[device] + 1;
+            if (target[device] === coords[device].length) {
+              target[device] = 0;
+            } else {
+              ongoingGoToPoint[device] = setTimeout(goToPoint, delay);
+            }
+          }
+        }
+        moveMarker();
+      }
+      ////console.log('The target[device] is %s', target[device]);
+      ////console.log('coords[device].length is %s', coords[device].length);
+      // do nothing, new points have been added to coords[device]
+      // //console.log('coords[device]',coords[device].length);
+      // //console.log('coords[device]',coords[device]);
+      // //console.log('devinfo',_devInfo);
+      // //console.log('coords[device][0][0]coords[device][0][0]coords[device][0][0]',coords[device][0][1]);
+      var LTlat: any;
+      var LTlng: any;
+      // //console.log('_devInfo_devInfo_devInfo', _devInfo);
+      if (coords[device].length == 0) {
+        LTlat = _devInfo.sec_last_location.lat;
+        LTlng = _devInfo.sec_last_location.long;
+      } else {
+        LTlat = coords[device][0][0];
+        LTlng = coords[device][0][1];
+      }
+
+      // //console.log('LTlat,LTlng_devInfo',LTlat, LTlng);
+      marker[device].setPosition(new google.maps.LatLng(LTlat, LTlng));
+      target[device] = 0;
+      goToPoint();
+    }
+    function button() {
+
+    }
+
+    function initialize(lat, long, device) {
+      //   initialize: (lat, long, device)=> {
+        if(outerThis.showAddress){
+        console.log("!isMapInit=______________________________________________________________________________________-----------",isMapInit);
+
+        var latlng_1 =
+             {
+               "lat": lat,
+               "long":  long
+             }
+             outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+              if(res.message == "Address not found in databse"){
+                 let geocoder = new google.maps.Geocoder();
+                 let t_latlng = new google.maps.LatLng(lat, long);
+ 
+                 let request = {
+                   latLng: t_latlng
+                 };
+                 geocoder.geocode(request, function (data, status) {
+                   if (status == google.maps.GeocoderStatus.OK) {
+                     if (data[0] != null) {
+                       outerThis.liveAdd = data[0].formatted_address;
+                     }else{
+                       outerThis.liveAdd ="N/A"
+                     }
+                   }
+                 })
+               }else{
+                outerThis.liveAdd= res.address;
+               }
+               outerThis.showAddress=false
+             }) 
+      }
+
+      // console.log("Lattitude Longitude", lat ,long,device,outerThis.liveAdd);
+
+      if (!isMapInit) {
+
+        var styledMapType = new google.maps.StyledMapType(
+          [
+            { elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
+            { elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
+            { elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
+            {
+              featureType: 'administrative.locality',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'poi',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'geometry',
+              stylers: [{ color: '#263c3f' }]
+            },
+            {
+              featureType: 'poi.park',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#6b9a76' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry',
+              stylers: [{ color: '#38414e' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'geometry.stroke',
+              stylers: [{ color: '#212a37' }]
+            },
+            {
+              featureType: 'road',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#9ca5b3' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry',
+              stylers: [{ color: '#746855' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'geometry.stroke',
+              stylers: [{ color: '#1f2835' }]
+            },
+            {
+              featureType: 'road.highway',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#f3d19c' }]
+            },
+            {
+              featureType: 'transit',
+              elementType: 'geometry',
+              stylers: [{ color: '#2f3948' }]
+            },
+            {
+              featureType: 'transit.station',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#d59563' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'geometry',
+              stylers: [{ color: '#17263c' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'labels.text.fill',
+              stylers: [{ color: '#515c6d' }]
+            },
+            {
+              featureType: 'water',
+              elementType: 'labels.text.stroke',
+              stylers: [{ color: '#17263c' }]
+            }
+          ],
+          { name: 'Styled Map' });
+
+        const myOptions = {
+          zoom: outerThis.zoomLevel,
+          center: new google.maps.LatLng(lat, long),
+          mapTypeId: google.maps.MapTypeId.ROADMAP,
+          // styles: [],
+          panControl: true,
+          // zoomControl: true,
+          scaleControl: true,
+          // mapTypeControl:true,
+          streetViewControl: true,
+
+          overviewMapControl: true,
+          rotateControl: true,
+          mapTypeControl: true,
+          // mapTypeControlOptions: {
+          //   style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,      
+          //   mapTypeIds: ['styled_map']
+          // },
+
+          zoomControl: true,
+          zoomControlOptions: {
+            style: google.maps.ZoomControlStyle.SMALL,
+          }
+        };
+
+
+
+        map = new google.maps.Map(document.getElementById('map'), myOptions);
+        map.mapTypes.set('darkmode', styledMapType);
+        outerThis.mapNew = map;
+        var trafficLayer = new google.maps.TrafficLayer();
+        trafficLayer.setMap(map);
+        //  outerThis.geoService(map);
+        outerThis.trafficLayer = trafficLayer;
+
+
+        // flight path ==========================
+
+
+
+
+        // =================================================
+
+
+
+        // map.mapTypes.set('styled_map', styledMapType);
+        // map.setMapTypeId('styled_map');
+        // map.setMapTypeId('terrain');
+        //  //console.log(map.getCameraPosition().zoom);
+        // //console.log("zoom" + map.getZoom());
+
+        // map.setZoom(18);
+
+
+
+        google.maps.event.addListener(map, 'mousemove', function (event) {
+
+          // //console.log("event" + event);
+          displayCoordinates(event.latLng);
+        });
+        var zoomBar: any;
+        zoomBar = document.getElementById('myRange');
+        map.setZoom(map.getZoom());
+
+        //zoomBar.max=map.minZoom || 0; zoomBar.min=map.maxZoom||22;
+        zoomBar.value = map.getZoom();
+        // Update the current slider value (each time you drag the slider handle)
+        zoomBar.oninput = function () {
+          //console.log("inside zoombar Value");
+          map.setZoom(parseInt(this.value));
+        }
+
+      
+       
+   
+        google.maps.event.addListener(map, 'zoom_changed', function (event) {
+
+          // //console.log("event" + event);
+          // //console.log(map.getZoom());
+          if (zoomBar.value)
+            zoomBar.value = map.getZoom();
+        });
+
+
+        /*          var controlMarkerUI = document.createElement('div');
+                 controlMarkerUI.style.cursor = 'pointer';
+                 controlMarkerUI.style.backgroundImage = "url(../../assets/image/history.png)";
+                 controlMarkerUI.style.height = '28px';
+                 controlMarkerUI.style.width = '38px';
+                 controlMarkerUI.title = 'History';
+                 
+                 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlMarkerUI);
+                 
+                 controlMarkerUI.addEventListener('click', ()=>{
+           
+                 }); */
+
+
+        /*            var controlTrashUI = document.createElement('div');
+                 controlTrashUI.style.cursor = 'pointer';
+                  controlTrashUI.style.backgroundImage = "url(../../assets/image/share.png)";
+                  controlTrashUI.style.height = '28px';
+                  controlTrashUI.style.width = '38px';
+    
+                  controlTrashUI.title = 'Share';
+                  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(controlTrashUI);
+                  controlTrashUI.addEventListener('click', function(e){
+                    //console.log("Share Calling...")
+                  }); */
+      }
+
+
+      isMapInit = true;
+      flag2 = true;
+      outerThis.getDevicebyId();
+
+    }
+
+
+
+    function displayCoordinates(pnt) {
+      var latitudeInDMS, longitudeInDMS;
+      //lat in DMS string format
+      latitudeInDMS = ConvertDDToDMS(pnt.lat(), false);
+      outerThis.latitudeInDMS = latitudeInDMS.dir + " " + latitudeInDMS.deg + "° " + latitudeInDMS.min + "' " + latitudeInDMS.sec + "''";
+      //lon in DMS string format
+      longitudeInDMS = ConvertDDToDMS(pnt.lng(), true);
+      outerThis.longitudeInDMS = longitudeInDMS.dir + " " + longitudeInDMS.deg + "° " + longitudeInDMS.min + "' " + longitudeInDMS.sec + "''";
+
+      // //console.log(outerThis.latitudeInDMS + "-" + outerThis.longitudeInDMS);
+    }
+
+    function ConvertDDToDMS(D, lng) {
+      return {
+        dir: D < 0 ? lng ? 'W' : 'S' : lng ? 'E' : 'N',
+        deg: 0 | (D < 0 ? D = -D : D),
+        min: 0 | D % 1 * 60,
+        sec: (0 | D * 60 % 1 * 6000) / 100
+      };
+    }
+
+    function toggleGeofence(choice) {
+      // //console.log(choice);
+      if (choice) {
+        outerThis.geoService(map);
+
+      }
+      else {
+        outerThis.removeGeofence();
+        outerThis.enableGeofenceComponent = !outerThis.enableGeofenceComponent;
+      }
+    }
+
+    this.toggleGeofence = toggleGeofence;
+    var routePath;
+    var flightPath;
+    var allSourceDestinationMarkers = [];
+    var poiMarkers = [];
+    var allRoutePathPoints = [];
+    function routeDetails(uId, choice) {
+
+      // //console.log(uId);
+
+      if (choice) {
+        outerThis.contactService.getRouteDetail_path(uId)
+          .subscribe(res => {
+            // //console.log("abcd2", res)
+            routePath = res;
+            showRoutes();
+            outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+          });
+      }
+      else {
+        //removing Route source destination markers 
+        for (var i = 0; i < allSourceDestinationMarkers.length; i++) {
+          allSourceDestinationMarkers[i].setMap(null);
+        }
+        allSourceDestinationMarkers = [];
+        //removing Route points 
+        for (var i = 0; i < allRoutePathPoints.length; i++) {
+          allRoutePathPoints[i].setMap(null);
+        }
+        allRoutePathPoints = [];
+        outerThis.enableRouteComponent = !outerThis.enableRouteComponent;
+      }
+    }
+
+    var mapData, poiData;
+    var marker1;
+    this.routeDetails = routeDetails;
+    function showRoutes() {
+      // //console.log(routePath[1].path);
+      //["skyblue","green","purple","orange","darkblue","yellow","red"]             
+      let colors = ['1E90FF', '28B463', '6C3483', 'D35400', '2C3E50', 'F1C40F', 'E74C3C'];
+      for (var j = 0; j < routePath.length; j++) {
+        //outerThis.dataArrayCoords = []; 
+        mapData = [];
+        for (var i = 0; i < routePath[j].path.length; i++) {
+          var arr = [];
+          arr.push(routePath[j].path[i].location.coordinates[1]);
+          arr.push(routePath[j].path[i].location.coordinates[0]);
+          //outerThis.dataArrayCoords.push(arr);
+
+          mapData.push({
+            "lat": routePath[j].path[i].location.coordinates[1],
+            "lng": routePath[j].path[i].location.coordinates[0]
+          });
+        }
+
+        ////console.log(outerThis.dataArrayCoords);
+
+        // //console.log(mapData[0]);
+        // //console.log(mapData[mapData.length - 1]);
+
+        var colorForPath = colors[(j) % (colors.length)];
+        var strokeColor = "#" + colorForPath;
+        // //console.log("j:" + j + "Color:" + strokeColor + " deno:" + (colors.length - 1) + "nume:" + (j + 1));
+
+        var sourceIcon = "http://www.googlemapsmarkers.com/v1/S/" + "009933" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage = new google.maps.MarkerImage(sourceIcon);
+        marker = new google.maps.Marker({
+          position: mapData[0],
+          map: map,
+          icon: pinImage,
+          title: "Source"
+        });
+        allSourceDestinationMarkers.push(marker);
+        console.log(allSourceDestinationMarkers);
+        
+
+        var destinationIcon = "http://www.googlemapsmarkers.com/v1/D/" + "FF3300" + "/FFFFFF/000000/ ";//colorForPath
+        var pinImage1 = new google.maps.MarkerImage(destinationIcon);
+        marker1 = new google.maps.Marker({
+          position: mapData[mapData.length - 1],
+          map: map,
+          icon: pinImage1,
+          title: "Destination"
+        });
+        allSourceDestinationMarkers.push(marker1);
+
+        flightPath = new google.maps.Polyline({
+          path: mapData,
+          geodesic: true,
+          strokeColor: strokeColor,
+          strokeOpacity: 1.0,
+          strokeWeight: 6
+        });
+        allRoutePathPoints.push(flightPath);
+        // //console.log(mapData);
+        flightPath.setMap(map);
+        // //console.log(flightPath);
+
+      }
+    }
+
+
+    function togglePOI(choice) {
+      // //console.log(choice);
+      if (choice) {
+        getPOIs(this.useridd);
+      }
+      else {
+        removePOIs();
+        outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+      }
+    }
+
+    this.togglePOI = togglePOI;
+
+
+    var pois = [];
+    function getPOIs(uId) {
+      outerThis.contactService.getPOI(uId)
+        .subscribe(res => {
+          // //console.log("pois", res)
+          pois = res;
+          plotAllPOIs();
+          outerThis.enablePOIComponent = !outerThis.enablePOIComponent;
+        });
+    }
+
+    function removePOIs() {
+      for (var i = 0; i < poiMarkers.length; i++) {
+        poiMarkers[i].setMap(null);
+      }
+      poiMarkers = [];
+    }
+
+    function plotAllPOIs() {
+
+      console.log("PLOTING POIIIISISISISI")
+
+      for (var i = 0; i < pois.length; i++) {
+        //var arr = [];
+        poiData = [];
+        //arr.push(pois[i].poi.location.coordinates[1]);
+        //arr.push(pois[i].poi.location.coordinates[0]);
+
+        poiData.push({
+          "lat": pois[i].poi.location.coordinates[1],
+          "lng": pois[i].poi.location.coordinates[0]
+        });
+
+        var poiIcon="/assets/images/liveTrackIcons/building.jpg"
+        // var poiIcon="https://img.icons8.com/ios-filled/50/000000/building-with-rooftop-terrace.png"
+        // building.jpeg
+        // var poiIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
+        //"http://www.googlemapsmarkers.com/v1/P/" + "000000" + "/FFFFFF/000000/ ";//'/assets/images/poi.png';//colorForPath
+        var poiImage = new google.maps.MarkerImage(poiIcon);
+        marker = new google.maps.Marker({
+          position: poiData[0],
+          map: map,
+          icon: poiImage,
+          title: pois[i].poi.poiname
+        });
+        poiMarkers.push(marker);
+
+        var infobox_numberPlate = new InfoBox({
+            content: "<div class='infobox' style='padding:2px;background:#575656;margin-left: -25px;'><small><b style='color: #ffffff;font-weight:300;font-size:12px;'>" + pois[i].poi.poiname + "</b></small></div>",
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+
+          infobox_numberPlate.open(map, marker);
+
+
+
+      //   var infoWindow = new google.maps.InfoWindow;
+
+    
+
+      // var contentString = '<b>'+pois[i].poi.poiname+'</b>' 
+      // infoWindow.setContent(contentString);
+      // infoWindow.setPosition(poiData[0]);
+
+      // infoWindow.open(map);
+
+
+      }
+
+    }
+
+    function dayClick() {
+      // //console.log("fdf");
+      this.showhistory();
+
+    }
+
+    function initializeMarker(elementRef, lat, long, device, deviceName, status, since, lastUpdatedTime, msg, initData, iconType, _devInfo) {
+      // //console.log("Initialize marker called");
+      // //console.log("Vehicle Speed",msg.speed);
+     
+      
+      outerThis.latToPass = lat;
+      outerThis.longToPass = long;
+
+
+
+
+      // ======================================Converting Address==============================================================
+      var liveAddress = "";
+      // if((a != null) && (a != undefined)&&(outerThis.navId != 'locationComponent')){
+      //   var geocoder = new google.maps.Geocoder();
+      //   var latlng = new google.maps.LatLng(lat, long);
+  
+      //   var request = {
+      //     latLng: latlng
+      //   };
+      //   // //console.log("staticLatLongVal", lat, long)
+  
+  
+      //   geocoder.geocode(request, function (data, status) {
+  
+      //     if (status == google.maps.GeocoderStatus.OK) {
+      //       if (data[0] != null) {
+      //         liveAddress = data[0].formatted_address;
+      //         var add = liveAddress;
+         
+      //         // //console.log('entering Address field');
+      //       } else {
+      //         // //console.log('entering Address field');
+      //         liveAddress = "No address available";
+      //       }
+      //     }
+      //     else {
+      //       // //console.log('entering Address field');
+      //       liveAddress = 'static address';
+  
+      //       // //console.log(liveAddress);
+      //     }
+  
+      //   })
+
+      // }
+     
+    
+
+      // ======================================Converting Address==============================================================
+
+
+      // //console.log("time coming from socket", since);
+
+
+
+      var lastPing = new Date(_devInfo.last_ping_on).getTime();
+      var currTime = new Date().getTime();
+      var timediff = currTime - lastPing;
+      // var totMin = timediff / 60000;
+      // var tothours = totMin / 60;
+      var oneHourVal = 1 * 60 * 60 * 1000;
+
+      // var t_hours = Math.floor(tothours);
+      // var Tminutes = (tothours - t_hours) * 60;
+      // var Tminutes = Math.round(minutes);
+      // var thours = t_hours;
+
+
+      // ================================================================================
+
+      // if((timediff>oneHourVal)){
+      //   var arrival_time= new Date(_devInfo.last_ping_on)
+      // }else{
+      var arrival_time = new Date(since);
+      // }
+      // var arrival_time = new Date(since);
+
+      var curr_time = new Date();
+      var fd = new Date(arrival_time).getTime();
+      var td = curr_time.getTime();
+      var timedev_status_difference = td - fd;
+      var total_min = timedev_status_difference / 60000;
+      var hours = total_min / 60
+      var rhours = Math.floor(hours);
+      var minutes = (hours - rhours) * 60;
+      var rminutes = Math.round(minutes);
+
+      var Durations = rhours + " " + 'hrs' + " " + rminutes + " " + 'min';
+      if (since == undefined) {
+        var deviceData = "";
+
+      }
+      //  else if((timediff>oneHourVal)){
+      //   var deviceData = "OUT OF REACH  " + 'since  ' + Durations;
+
+      // }
+      else {
+
+        if (status == undefined) {
+
+          var status_toShow = "NA";
+
+        } else {
+          var status_toShow = status + " " + "Since" + " " + Durations;
+        }
+
+        var deviceData = status_toShow;
+
+
+      }
+
+
+          console.log(marker[device]);
+          console.log(marker);
+      if (marker[device] == null || marker[device] == undefined) {
+
+        //  var lastPing = new Date(_devInfo.last_ping_on).getTime();
+        //  var currTime = new Date().getTime();
+        //  var timediff = currTime-lastPing;
+        //  var totMin =timediff / 60000;
+        //  var tothours =totMin/60;
+        //  var thours = Math.floor(tothours);
+        //  //console.log('totalHours=>',thours);
+        // ==================================================below code commented on 15-may-2019 =============================== 
+        // if((icons[iconType] != null)||(icons[iconType] != undefined)){
+        //   if (status == "OUT OF REACH") {
+        //     icons[iconType].fillColor = "blue";
+        //   }else if (status == "STOPPED") {
+        //     icons[iconType].fillColor = "red";
+        //   } else if (status == "RUNNING") {
+        //     icons[iconType].fillColor = "green";
+        //   } else if (status == "IDLING") {
+        //     icons[iconType].fillColor = "yellow";
+        //   }
+        // }
+
+        // ==================================================above code commented on 15-may-2019 ===============================
+
+        let markerDOM: any;
+
+
+        if ((icons[iconType] != null) || (icons[iconType] != undefined)) {
+          if (status == "OUT OF REACH") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+          
+          
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/outofreach_car.png']");
+          } else if (status == "STOPPED") {
+           
+            icons[iconType].url = that.iconSelector(status, iconType, msg);   
+         
+       
+         
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/stopped_car.png']");
+          } else if (status == "RUNNING") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+           
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/running_car.png']");
+          } else if (status == "NO DATA") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg);
+           
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/running_car.png']");
+          } else if (status == "IDLING") {
+            icons[iconType].url = that.iconSelector(status, iconType, msg); 
+          
+       
+            // markerDOM = elementRef.nativeElement.querySelector("img[src='/assets/images/liveTrackIcons/idle_car.png']");
+          }
+        }
+        // ==========================commented on 4-1-2019 ==========================
+        // if (timediff>oneHourVal) {
+        //   icons[iconType].fillColor = "blue";
+        // }else if ((_devInfo.last_ACC == 0) && (msg.speed == 0)) {
+        //   icons[iconType].fillColor = "red";
+        // } else if ((_devInfo.last_ACC == 1) && (msg.speed > 0)) {
+        //   icons[iconType].fillColor = "green";
+        // } else if ((_devInfo.last_ACC == 1) && (msg.speed == 0)) {
+        //   icons[iconType].fillColor = "yellow";
+        // }
+        // ==========================commented on on 4-1-2019==========================
+
+
+        var m = new google.maps.Marker({
+          position: new google.maps.LatLng(lat, long),
+          map: map,
+          icon: icons[iconType],   
+        });
+
+
+        // var mtemp = {
+        //   marker : m,
+        //   // imei: _devInfo,
+        //   icon :icons[iconType],
+        //   lat: lat,
+        //   lng:long
+        // }
+        // outerThis.markerArray.push(mtemp);
+        //console.log('marker Temp array=>',outerThis.markerArray);
+    
+        // var sec_last_lat = _devInfo.sec_last_location?_devInfo.sec_last_location.lat:null;
+        // var sec_last_lng = _devInfo.sec_last_location?_devInfo.sec_last_location.long:null;
+        var Initial_head = _devInfo?parseFloat(_devInfo.heading) : 0;
+        // var Initial_head = google.maps.geometry.spherical.computeHeading(new google.maps.LatLng(sec_last_lat,sec_last_lng),new google.maps.LatLng(lat,long));
+        //console.log('Initial_head',Initial_head);
+      
+        if(count == 0){
+          var marker_init = setTimeout(function () {
+            var  markerDOM_temp = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']"); 
+            if(markerDOM_temp){
+              markerDOM_temp.style.transform = 'rotate(' + Initial_head + 'deg)';
+              count = 1 ; 
+              clearTimeout(marker_init);
+            }   
+          
+            }, 2000)
+        }
+         var infobox_numberPlate
+        if( outerThis.showLabels){
+          console.log("HOWWWWWWWWWWW");
+          
+          infobox_numberPlate = new InfoBox({
+            content: "<div class='infobox' style='padding:2px;background:#575656;margin-left: -25px;'><small><b style='color: #ffffff;font-weight:300;font-size:12px;'>" + deviceName + "</b></small></div>",
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+
+        }else{
+          console.log("NHOWWWWWWWWWWW");
+          infobox_numberPlate = new InfoBox({
+            content:'',
+            disableAutoPan: false,
+            maxWidth: 150,
+            alignBottom: true,
+            pixelOffset: new google.maps.Size(-25, -20),
+            zIndex: null,
+            boxStyle: {
+              opacity: 1,
+              zIndex: 999,
+              width: "auto",
+              padding: "2px"
+            },
+            closeBoxURL: "",
+            infoBoxClearance: new google.maps.Size(1, 1)
+          });
+        }
+
+
+
+        locations.push(m);
+        // infobox_numberPlate.open(map, m);
+        infobox_numberPlate.open(map, m);
+        var gsm_signal = '';
+        if (msg != undefined) {
+          gsm_signal = msg.gsmSignal;
+
+        } else {
+          gsm_signal = _devInfo.gsmSignal;
+        }
+       
+
+
+
+        //m['infowindow'] = new google.maps.InfoWindow();
+        var contentString = ''
+        if (initData == 'initPing') {
+          contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+          '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})"> add poi </button>'+
+         '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+         '</div>'+
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last updated" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (lastUpdatedTime ? (moment(lastUpdatedTime).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdatedTime).fromNow() + ')') : "No Data Available") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "GPS Positioned" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (_devInfo.gpsTracking == '1' ? 'Yes' : (_devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "GPS Signal" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((gsm_signal != undefined) ? gsm_signal : "NA") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Name" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Number" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last Speed" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (_devInfo.last_speed) + " kmph" +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Status" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+            '</div>' +
+            '</div>' 
+          
+            // '<div class="row" id="viewParanoma">'+
+            // '<div class="col-sm-12">'+
+            // '<p>'+'StreetView Content'+'</p>'+
+            // +'</div></div>'
+
+            // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})"> add poi </button>'
+
+        }
+        else if (initData == 'ping') {
+          // //console.log('statusdeviceSpeeddeviceSpeeddeviceSpeeddeviceSpeed=>',speed);
+          outerThis.last_speed = msg.speed;
+          contentString = ''
+          contentString = '<div class="infoB">' +
+          '<div class="DeviceHead">'+
+        '<button style="position: absolute; left: 0; background: #65889c; color: white; margin-left: 5px;" onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})">add poi</button>'+
+         '<p style="margin-bottom: 5px;">' + deviceName + '</p>' +
+         '</div>'+
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Last updated" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            (lastUpdatedTime ? (moment(lastUpdatedTime).format('dddd,ll,LTS') + " " + '(' + moment(lastUpdatedTime).fromNow() + ')') : "No Data Available") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "GPS Positioned" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((_devInfo.gpsTracking == '1' ? 'Yes' : _devInfo.gpsTracking == '0' ? 'No' : '<small>Feature not supported by device</small>')) +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "GPS Signal" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            ((gsm_signal != undefined) ? gsm_signal : "NA") +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Name" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverName?outerThis.DriverName:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Driver's Number" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + (outerThis.DriverNumber?outerThis.DriverNumber:'NA') + '</p>' +
+            '</div>' +
+            '</div>' +
+            '<div class="row rowTwo">' +
+            '<div class="col-sm-5">' +
+            "Speed" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            outerThis.last_speed + " " + "kmph"
+          '</div>' +
+            '</div>' +
+            '<div class="row rowOne">' +
+            '<div class="col-sm-5">' +
+            "Status" +
+            '</div>' +
+            '<div class="col-sm-7 leftPadding">' +
+            '<p style="margin-bottom:0px">' + deviceData + '</p>' +
+            '</div>' +
+            '</div>' 
+              
+            // '<div class="row" id="viewParanoma">'+
+            // '<div class="col-sm-12">'+
+            // '<p>'+'StreetView Content'+'</p>'+
+            // +'</div></div>'
+
+            // '<button onclick="window.angularComponentRef.zone.run(() => {window.angularComponentRef.component.addpoi(\'' + lat + ',' + long + '\');})">add poi</button>'
+
+        }
+
+
+
+        var myOptions = {
+          content: contentString
+          , disableAutoPan: false
+       
+          , maxWidth: 0
+          , pixelOffset: new google.maps.Size(-18, -25)
+          , zIndex: null
+          , boxStyle: {
+            //background: "url('https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/infobox/examples/tipbox.gif') no-repeat"
+            // ,
+            opacity: 0.8
+            // , width: "380px" 
+            // , padding: "10px"
+            // , "background-color" : "white"
+          }
+          , closeBoxMargin: "10px 5px 3px 3px"
+          , closeBoxURL: "/assets/image/close.png"
+          , infoBoxClearance: new google.maps.Size(10, 10)
+          , isHidden: false
+          , pane: "floatPane"
+          , enableEventPropagation: true
+          , alignBottom: true
+        };
+        m['infowindow'] = new InfoBox(myOptions);
+          //console.log("Infowindow card",m);
+
+        var mtemp = {
+          marker : m,
+          imei: _devInfo.Device_ID,
+          icon :icons[iconType],
+          lat: lat,
+          lng:long,
+          infowindow : new InfoBox(myOptions),
+          number_plate : infobox_numberPlate
+        }
+        outerThis.markerArray.push(mtemp);
+        console.log('marker Temp array=>',outerThis.markerArray,outerThis.socketData);
+        google.maps.event.addListener(m, 'click', function () {
+          //console.log('Opening Infow window',m);
+          // { lat: , lng: }
+          var fenway = { lat: m.position.lat(), lng:  m.position.lng() };
+          // //console.log("latlnglitrals",m.position.lat(),m.position.lng());
+          //console.log(fenway);
+          var panorama = new google.maps.StreetViewPanorama(
+            document.getElementById("viewParanoma"),
+            {
+              position: fenway,
+              pov: {
+                heading: 34,
+                pitch: 10
+              }
+            }
+          );
+          map.setStreetView(panorama);  
+          //console.log('111111111111111111111111111111111111111111111111111=>',this) 
+          this['infowindow'].open(map, this);
+        });
+        marker[device] = m;
+        target[device] = 0;
+
+      }
+      //  //console.log(locations)
+      var z = locations
+        }
+    
+      //  this.togglePOI(true);
+  
+      }
+  flightPathArr: any = [];
+  isTraffic: boolean = true;
+  mapTypeId: any = "roadmap";
+  setMapType(mapTypeId) {
+    // //console.log(mapTypeId);
+    this.darkModeSwitch = false;
+
+    if (mapTypeId == "traffic") {
+
+      this.isTraffic = !this.isTraffic;
+      if (this.isTraffic) {
+
+        this.trafficLayer.setMap(this.mapNew);
+      }
+      else {
+        this.trafficLayer.setMap(null);
+      }
+
+    }
+    else {
+      this.mapTypeId = mapTypeId;
+      if (mapTypeId === 'darkmode') {
+        this.darkModeSwitch = true;
+      }
+      this.mapNew.setMapTypeId(mapTypeId);
+    }
+  }
+
+  enableRouteComponent = false;
+  enableGeofenceComponent = false;
+  enablePOIComponent = false;
+
+  toggleMapComponents(option) {
+    //var useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    if (option == "route")//route,pointofinterest,geofencing 
+    {
+      this.routeDetails(this.useridd, !this.enableRouteComponent);
+    }
+    else if (option == "geofencing") {
+      this.toggleGeofence(!this.enableGeofenceComponent);
+    }
+    else if (option == "pointofinterest") {
+      // //console.log(option);
+      this.togglePOI(!this.enablePOIComponent);
+    }
+  }
+
+
+  allGeofencePolygon = [];
+  geoService(map) {
+
+
+    this.contactService.getGeoFence(this.useridd).subscribe(
+
+      data => {
+        this.devicess = data
+
+        for (let i = 0; i < this.devicess.length; i++) {
+          let cordin = [];
+
+          let a = this.devicess[i].geofence.coordinates[0];
+
+          for (let k = 0; k < a.length; k++) {
+            let b = {
+              lat: a[k][1],
+              lng: a[k][0]
+            }
+            cordin.push(b);
+          }
+          this.geofence(cordin, this.devicess[i].geoname, map);
+
+        }
+        this.enableGeofenceComponent = !this.enableGeofenceComponent;
+      });
+  }
+
+  geofence(zzz, yyy, map) {
+
+    var infoWindow;
+    var outerThis = this;
+    var GeoFencCoords = zzz
+    var GeoName = yyy
+
+    ////console.log(GeoFencCoords)
+    plotGeoFence(GeoFencCoords);
+    function plotGeoFence(GeoFencCoords) {
+
+      var bermudaTriangle = new google.maps.Polygon({
+        paths: GeoFencCoords,
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 3,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35
+      });
+      bermudaTriangle.setMap(map);
+
+      outerThis.allGeofencePolygon.push(bermudaTriangle);
+      bermudaTriangle.addListener('click', showArrays);
+
+      infoWindow = new google.maps.InfoWindow;
+
+    }
+
+    /** @this {google.maps.Polygon} */
+    function showArrays(event) {
+
+      var vertices = this.getPath();
+
+      var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+
+      infoWindow.setContent(contentString);
+      infoWindow.setPosition(event.latLng);
+
+      infoWindow.open(map);
+    }
+  }
+
+
+  removeGeofence() {
+    for (var i = 0; i < this.allGeofencePolygon.length; i++) {
+      this.allGeofencePolygon[i].setMap(null);
+    }
+    this.allGeofencePolygon = [];
+  }
+
+
+  // Outside Function declaration
+  ongoingGoToPoint: any;
+  ongoingMoveMarker: any;
+  isMapInit: any;
+  marker: any
+  map2load: Boolean = false;
+
+
+  geofun: Boolean = false;
+  date1: any = new Date()
+  date2: any = new Date();
+  interpolated: any;
+  Load: Boolean = false;
+  Load2: Boolean = false;
+
+
+  showHideClusters() {
+    // //console.log("Show hide clusters")
+  }
+  last_pointer: any
+  SpeedMeter2: boolean = false
+  speeed2: any = 0;
+  PlayData: boolean = false;
+  pauseDate: boolean = false;
+  inter(b) {
+    // //console.log(b);
+    if (b == 'fast') {
+      this.speed = 2 * this.speed;
+      // //console.log(this.speed)
+    }
+    else if (b == 'slow') {
+      if (this.speed > 50) {
+        this.speed = this.speed / 2;
+        // //console.log(this.speed)
+      }
+      else {
+        /*  this.speed =200 */
+      }
+    }
+    else {
+      this.speed = 200
+    }
+    //this.play(null)
+  }
+  // play(a) {
+
+  animateMarker_history(marker, coords, km_h, iconType) {
+    this.cummulative_Distance = 0;
+    //console.log('coords=>',coords);
+    var ongoingMoveMarker = null;
+    this.SpeedMeter2 = true;
+    // this.pauseDate = true;
+    this.PlayData = true;
+    // this.playingHistory = true;
+    this.historyMap.setZoom(15);
+    if ((km_h == 0) || (km_h == '0')) {
+      km_h = 50;
+    }
+    var map, marker;
+    var coord = this.dataArrayCoords[0];
+    this.playingHistory = true;
+
+    var lat = coord[0];
+    // //console.log(lat);
+    var lng = coord[1];
+    let outerThis = this
+    var startPos = [lat, lng];
+    this.speed = 200
+    var iconselected = this.devicon
+    var delay = 100;
+  
+
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(60, 60),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+
+
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon
+    }
+    var that = this;
+
+    var contentString
+
+    map = this.historyMap;
+
+    var target = 0;
+    // if(this.rangeDetector == true){
+    //   target = this.indexValue; 
+    // }
+    // this.rangeDetector=false;
+    var km_h = km_h || 50;
+    
+
+    if (!startPos.length)
+      coords.push([startPos[0], startPos[1]]);
+
+    that.goToPoint = function () {
+      // //console.log("Go to point function");
+      if(that.rangeDetector === true){
+        a= that.indexValue;
+        target   = that.indexValue;
+        that.sliderValue = that.indexValue;
+      }
+      var lat = marker.position.lat();
+      var lng = marker.position.lng();
+      that.getAddress(lat,lng);
+   
+      if(km_h === 0){
+        km_h = 200 ;  
+      }
+      var step = (km_h * 1000 * delay) / 3600000; // in meters
+      var dest = new google.maps.LatLng(
+        coords[target][0], coords[target][1]);
+      //  //console.log(coords[target][2])
+      var r = coords[target][2]
+      outerThis.speeed2 = r;
+      outerThis.ext_voltage = '22v';
+
+      outerThis.historyDate = coords[target][4];
+      outerThis.ext_voltage = coords[target][5];
+      // //console.log("outerThis.historyDate",coords);
+
+      var distance = google.maps.geometry.spherical.computeDistanceBetween(dest, marker.position); // in meters
+
+      var numStep = distance / step;
+   
+      var i = 0;
+      var deltaLat = (coords[target][0] - lat) / numStep;
+      var deltaLng = (coords[target][1] - lng) / numStep;
+      // //console.log('cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc',target);
+      that.moveMarker = function () {
+        // //console.log("Move Marker Function");
+        // //console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz',a,target);
+        // ye wala movemarker function h  
+      outerThis.sliderValue = a; 
+        outerThis.cummulative_Distance  = coords[target][3] ; 
+        lat += deltaLat;
+        lng += deltaLng;
+        i += step;
+        // //console.log('icons[iconselected].rotation',icons[iconselected].rotation);
+        let markerDOM: any;
+        var status = "RUNNING";
+      
+        if (i < distance) {
+          // let iconType = 'car';
+          // //console.log('iconsiconsiconsiconsiconsicons',icons);
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+          var msg;
+          // //console.log('iconType',iconType);
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+          // //console.log('markerDOM',markerDOM);
+          
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng));
+
+      
+          //console.log('head',head);
+        
+          // if (head != 0) {
+            // icons[iconselected].rotation = head
+           
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(new google.maps.LatLng(lat, lng));
+
+          map.setCenter({ lat: lat, lng: lng });
+          // //console.log("Abinash");
+          that.start = setTimeout(that.moveMarker, delay);
+        }
+        else {
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), dest);
+         
+        
+
+          // var iconType = 'car';
+
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(dest);
+          map.setCenter({ lat: coords[target][0], lng: coords[target][1] });
+          // //console.log('target',target);
+          target++;
+          if (target == coords.length) { target = 0; }
+          that.start = setTimeout(that.goToPoint, delay);
+
+        }
+      }
+      a++
+   
+  
+      that.rangeDetector = false;
+      // //console.log("outside moveMarker function");
+      if (a > coords.length) {
+        // //console.log("Cord.length if condition");  
+        outerThis.speeed2 = 0;
+    
+      }
+      else {     
+        // //console.log("Cord.length else condition");   
+        that.moveMarker();
+        km_h = outerThis.speed;
+      }
+    }
+    var a = 0;
+   
+   
+    // //console.log("Gotopoint function");
+    that.goToPoint();
+
+  }
+
+
+rangeDetector:boolean=false;
+changeRange(){ 
+  
+  clearTimeout(this.start);
+  this.rangeDetector = true;
+  var rangeVal = document.getElementById("slider1");
+ 
+  // var zoomTImeOut = setTimeout(()=>{
+  //           this.historyMap.setZoom(15);
+  //           clearTimeout(zoomTImeOut);
+  // },5000)
+
+  this.indexValue  = rangeVal['value'];
+
+ if(this.tempMapHistory[0]['flag'] == 'stop'){
+    this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.historyMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    // clearTimeout(this.start);
+    // this.moveMarker();
+    this.goToPoint();
+  
+ } 
+ if(this.tempMapHistory[0]['flag'] == 'start'){
+  // this.speed = 0 ;
+  this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.historyMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.tempMapHistory[0]['flag'] = 'stop';
+  // clearTimeout(this.start);
+  this.goToPoint();
+
+ }
+
+}
+
+zoomSet(){
+  this.historyMap.setZoom(15);
+}
+
+
+
+
+  // }
+
+
+  pause() {
+    this.PlayData = !this.PlayData;
+    this.pauseDate = !this.pauseDate;
+  }
+
+
+  histortyRply(dev, data) {
+    //  this.Load = true;
+    // //console.log(data)
+
+    this.map2load = false;
+    let Outerthis = this
+    let map;
+    let markerCurrent;
+    var isMapInit = false;
+    let markersPast;
+    this.online = false;
+    this.historyData = false
+    this.PlayData = true;
+    this.offline = true;
+    from1 = null;
+    this.latLongArr = [];
+    this.latLongArr3 = []
+    to1 = null;
+    //  //console.log(this.date1)
+    var currtime = new Date();
+    var from1 = new Date(this.datefrom);
+    var position
+    // //console.log("DATE ::"+from1);
+    var fromtime = new Date(from1).toISOString();
+    //  //console.log(fromtime)
+    var to1 = new Date(this.date2)
+
+    let outerThis = this
+    var marker = undefined;
+    var totime = new Date(new Date(to1).setSeconds(0)).toISOString();
+
+    this.ddid = dev.did
+    this.contactService.getCurrentLocation(this.ddid, fromtime, totime).subscribe((data5) => {
+      this.latlongObjArr = data5;
+      // //console.log("currlocdata=>",data5)
+      // //console.log(this.latlongObjArr)
+      this.last_pointer = this.latlongObjArr.length - 1;
+      /*  var result = [me.latLng.lat(), me.latLng.lng()];
+       transition(result); */
+      if (this.latlongObjArr[this.last_pointer].interpolated == null || this.latlongObjArr[this.last_pointer].interpolated == undefined) {
+        let a = this.latlongObjArr[this.last_pointer].latDecimal;
+        let b = this.latlongObjArr[this.last_pointer].longDecimal;
+
+        position = [a, b];
+        //  initialize();
+        this.last_pointer--
+      }
+      else {
+        let a = this.latlongObjArr[this.last_pointer].interpolated.location.latitude
+        let b = this.latlongObjArr[this.last_pointer].interpolated.location.longitude
+        position = [a, b];
+        //   initialize();
+        this.last_pointer--
+      }
+
+
+
+    })
+
+
+    function initialize() {
+
+      // //console.log("Abinash");
+      var latlng = new google.maps.LatLng(position[0], position[1]);
+      var myOptions = {
+        zoom: 8,
+        center: latlng,
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      map = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+      marker = new google.maps.Marker({
+        position: latlng,
+        map: map,
+        title: "Your current location!",
+
+      });
+
+
+
+
+      google.maps.event.addListener(map, 'click', function (me) {
+      
+        setInterval(function () {
+          // //console.log("Interval Started")
+          if (outerThis.latlongObjArr[outerThis.last_pointer].interpolated == null || outerThis.latlongObjArr[outerThis.last_pointer].interpolated == undefined) {
+            let a = outerThis.latlongObjArr[outerThis.last_pointer].latDecimal;
+            let b = outerThis.latlongObjArr[outerThis.last_pointer].longDecimal;
+
+            position = [a, b];
+            // //console.log(position)
+            transition(position);
+            outerThis.last_pointer
+          }
+          else {
+            let a = outerThis.latlongObjArr[outerThis.last_pointer].interpolated.location.latitude
+            let b = outerThis.latlongObjArr[outerThis.last_pointer].interpolated.location.longitude
+            position = [a, b];
+            // //console.log(position)
+            transition(position);
+            outerThis.last_pointer
+          }
+          // outerThis.last_pointer--
+        }, 4000)
+
+        //}
+
+      });
+      var numDeltas = 100;
+      var delay = 4000; //milliseconds
+      let i = 0;
+      var deltaLat;
+      var deltaLng;
+      function transition(result) {
+        i = 0;
+        deltaLat = (result[0] - position[0]) / numDeltas;
+        deltaLng = (result[1] - position[1]) / numDeltas;
+        moveMarker();
+      }
+      function moveMarker() {
+        position[0] += deltaLat;
+        position[1] += deltaLng;
+        var latlng = new google.maps.LatLng(position[0], position[1]);
+        marker.setPosition(latlng);
+        if (i != numDeltas) {
+          i++;
+          setTimeout(moveMarker, delay);
+        }
+      }
+      /* 
+                    setInterval(function(){
+                     
+                      if ( this.latlongObjArr[last_pointer].interpolated == null || this.latlongObjArr[last_pointer].interpolated == undefined){
+                        let a = this.latlongObjArr[last_pointer].latDecimal;
+                       let b = this.latlongObjArr[last_pointer].longDecimal;
+                       
+                        position = [a, b];
+                        transition(position);
+               ;
+                      }
+                      else{
+                        let a =  this.latlongObjArr[last_pointer].interpolated.location.latitude
+                        let b = this.latlongObjArr[last_pointer].interpolated.location.longitude
+                         position = [a,b];
+                         transition(position);
+                  
+                      }
+                      
+                     },3000); */
+    }
+
+  }
+  path: any;
+  devicon: any;
+  latLngLine = [];
+
+  dataArrayCoords = [];
+  dataspeed = []
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  showStatus: boolean = false;
+  flag: any;
+  playing: boolean = false;
+  play(playindex) {
+    // //console.log('playindex',playindex);
+  
+    this.showStatus = true
+
+    var icontype = this.dev_id.iconType;
+    var tempObj = { "icontype": icontype }
+    var tempDataCoordArr = this.tempMapHistory[playindex].dataArrayCoords;
+    
+    tempObj["tempDataCoordArr"] = tempDataCoordArr;
+
+    if (this.tempMapHistory[playindex]['flag'] == 'init') {
+      this.animateMarker_history(this.marker4, tempDataCoordArr, 50, icontype);
+      tempObj["marker"] = this.marker4;
+      this.tempMapHistory[playindex]['flag'] = 'stop';
+      tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+ 
+    } else if (this.tempMapHistory[playindex]['flag'] == 'start') {
+      
+        this.moveMarker();
+        // clearTimeout(this.start);
+        this.tempMapHistory[playindex]['flag'] = 'stop';
+        tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+      
+      } else
+        if (this.tempMapHistory[playindex]['flag'] == 'stop') {
+          this.speed = 0;
+          clearTimeout(this.start);
+          this.tempMapHistory[playindex]['flag'] = 'start';
+          tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+        }
+
+    if (this.flag == 'reset') {
+      this.marker4.setPosition({ lat: this.latLngLine[0].lat, lng: this.latLngLine[0].lng });
+      this.flag = 'init';
+    }
+
+  }
+
+  headingName = 'Live Tracking';
+  playingHistory: boolean = false;
+  parkingPOINTS=[]
+  fromTIME
+  stop_locationss=[]
+  counter
+  maphistory(data) {
+
+    this.showArea();
+    this.pdfFunction(this.deviceSelect[0]);
+    this.getTravelPathReport(this.deviceSelect[0])
+    this.historyAdress ='';
+    this.sliderValue=0;
+    this.showSocketData = false;
+    this.Load = true;
+    this.map2load = false;
+    this.SpeedMeter2 = false;
+    this.PlayData = true;
+    this.playingHistory = false;
+    let map;
+    let markerCurrent;
+    let markerSrc;
+    var isMapInit = false;
+    let markersPast;
+    this.online = false;
+    // this.PlayData = true;
+    this.historyData = false;
+    this.latLngLine = [];
+    this.dataArrayCoords = [];
+    var position;
+    let outerThis = this
+    this.offline = true;
+    from1 = null;
+    this.latLongArr = [];
+    this.latLongArr3 = []
+    to1 = null;
+
+ 
+    this.dev_id = this.deviceSelect[0];
+    console.log("Trssss",this.deviceSelect[0]);
+    
+    var currtime = new Date();
+    var from1 = new Date(this.datefrom).toISOString();
+    var to1 = new Date(this.date2).toISOString();
+
+    var fromtime = new Date(from1).toISOString();
+    var totime = new Date(to1).toISOString();
+
+    this.fromTIME=new Date(from1).toISOString();
+    //  //console.log(fromtime)
+
+
+    var diff = moment(totime).diff(fromtime, 'days')
+    console.log('difference :' + diff)
+ 
+    if ((fromtime > totime)||(diff>=31)) {
+      this.Load = false;
+      let error = (fromtime > totime)?"Error: From Time Never Greater then To Time" : "History is unavailable for more than one month";
+      // let message = "Error: From Time Never Greater then To Time";
+      let action
+      this.snackBar.open(error, action, {
+        duration: 4000,
+
+      });
+
+    }
+
+    else if (this.dev_id === null || this.dev_id === undefined || this.dev_id === '') {
+      this.Load = false;
+      let message = "Error: Please choose a device";
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+
+      });
+    }
+    else {
+
+      // this.ddid = dev.did;
+      // this.devicon = dev.iconType;
+      console.log(this.navId);
+      
+      if(this.navId === 'locationHistory'){
+        this.ddid=this.dev_id.did
+      }else{
+        this.ddid=this.dev_id.Device_ID
+      }
+ 
+      // this.ddid = (this.navId === 'locationHistory')? this.dev_id.did : this.dev_id.Device_ID;
+      console.log("DID",this.ddid,this.dev_id.did);
+      
+      this.devicon = this.dev_id.iconType;
+      this.speedArr = [];
+      var counter = 0
+      var countTime = setInterval(()=>{
+        counter++
+      
+      },1000)
+
+      if(data==1){
+
+         var ft = new Date(fromtime);
+          var tt = new Date(totime);
+          var dname = this.deviceSelect[0];
+       
+          if (this.coloumnClicked === false) {
+            var tempData = {
+              fromTime: ft.toLocaleString(),
+              toTime: tt.toLocaleString(),
+              device_name: this.deviceName,
+              device_obj: this.deviceSelect[0],
+              lineThickness: this.thicknessVal,
+              idleColor: this.idleColor,
+              parkingColor: this.parkingColor,
+              dataColor: this.dataColor,
+              flag: 'init',
+            }
+          }
+  
+          this.showTable = true;
+          this.flag = 'init';
+          initialize();
+  
+          this.Load = false;
+        
+  
+          let cluster_arr = [];  
+         console.log(flightPath.getPath());
+
+          this.path = flightPath.getPath();
+  
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = (this.navId === 'locationHistory')? this.dev_id.viewValue:this.dev_id.Device_Name;
+            this.speed = this.latlongObjArr[i].speed + "Km/hr";
+            this.im = this.latlongObjArr[i].imei;
+  
+            this.speedArr.push(this.latlongObjArr[i].speed);
+  
+            var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // //console.log(JSON.parse(this.datee));
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+  
+            var harshAcc = this.latlongObjArr[i].harshAccel;
+            var harshBreak = this.latlongObjArr[i].harshBrake;
+            var harshCorner = this.latlongObjArr[i].harshCorner;
+            // //console.log(harshAcc,harshBreak,harshCorner);
+            var fill_color = '#00F';
+            var stroke_color = '#00A';
+            var content = '';
+            // <button value=${i} id="deletePoint" style="background-color: red;border: double;border-radius: 21%;color: white;padding: 8px 15px;cursor: pointer;opacity: 0.9;margin-left:50%">Delete</button>
+            content = `<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : `
+             + d_name + `</b><br><b>IMEI : `
+             + this.im + `</b><br><b>DEVICE DATE : ` 
+             + this.datee + `</b><br><b>SPEED : ` 
+             + this.speed + `</b><br><b style="margin-bottom:10px" id="addressBinding">Address : `
+              + this.contentAdd + `</b></div></b></div>
+              </div></div>`
+            var harsh = this.latlongObjArr[i].gforce ? (parseFloat(this.latlongObjArr[i].gforce) / 10) : 0;
+            if ((harshAcc != undefined) && (harshAcc == 'true')) {
+              fill_color = '#008000';
+              stroke_color = '#008000';
+  
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #008000;">Harsh Acceleration</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+            if ((harshBreak != undefined) && (harshBreak == 'true')) {
+              fill_color = '#FF0000';
+              stroke_color = '#FF0000';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #FF0000;">Harsh Break</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+  
+              }
+            }
+            if ((harshCorner != undefined) && (harshCorner == 'true')) {
+              fill_color = '#c407b1';
+              stroke_color = '#c407b1';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #c407b1;">Harsh Corner</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+  
+            
+          
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+         
+            var arr = [];      
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+       
+  
+            this.latLngLine.push(cord);
+          var contentString = '<div>' +
+            '<div>'+
+            '<p style="margin-bottom: 5px;font-weight:700">' + this.deviceName + '</p>' +
+            '</div>'
+            var iconSrc = this.iconSelector("RUNNING","truck",{});
+            // 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000'
+            // this.iconSelector("RUNNING","car",{});
+            
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+              if (this.dataColor === true) {
+                var markersPasts = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                  map: map,
+                })
+  
+                markersPasts['infowindow'] = new google.maps.InfoWindow({ content: content });
+             
+  
+                google.maps.event.addListener(markersPasts, 'click', function () {
+            
+                  var lattitude = markersPasts.position.lat();
+                  var longitude = markersPasts.position.lng()  ;
+                  var latlng_1 =
+                  {
+                    "lat": lattitude,
+                    "long":  longitude
+                  }
+                  outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                 
+                 if(res.message == "Address not found in databse"){ 
+                  var geocoder = new google.maps.Geocoder();
+                  var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+                  var request = {
+                    latLng: latlng
+                  };
+                  // //console.log('latlongVal', request)
+                  var innerThis = this ; 
+                  this['infowindow'].open(map, innerThis); 
+                  geocoder.geocode(request, function (data, status) { 
+                    if (status == google.maps.GeocoderStatus.OK) {
+                      if (data[0] != null) {
+                        // innerThis.contentAdd = data[0].formatted_address;
+                        var tempAdd = data[0].formatted_address;
+                          var getAddressContent = document.getElementById('addressBinding');
+                          getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+                       
+                      } else {
+                        // //console.log("No address available")
+                        var tempAdd_1 = "No address available";
+                        var getAddressContent = document.getElementById('addressBinding');
+                        getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+                      
+                     
+                     
+                      }
+                    }
+                    else {
+                      var tempAdd_2 = 'NA';
+                      var getAddressContent = document.getElementById('addressBinding');
+                      getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+                      //console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+                    
+                    }
+              
+                  })
+  
+                    }else{
+                      var innerThis_1 = this ; 
+                  
+                      this['infowindow'].open(map, innerThis_1);      
+                      var tempAdd  = res.address ; 
+                      //console.log('innerThis_1.contentAdd',tempAdd);
+                      var chkTmout = setTimeout(function(){
+                        var getAddressContent = document.getElementById('addressBinding');
+                        // //console.log('getAddressContent',getAddressContent);
+                        getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+                        clearTimeout(chkTmout);
+                      },500)
+                    
+                    }
+  
+                  })
+  
+               
+                  
+                  })
+                // cluster_arr.push(markersPast);
+  
+              }
+  
+  
+  
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc,
+                  scaledSize: new google.maps.Size(20, 20),
+                });
+                //  markerSrc['infowindow'] = new google.maps.InfoWindow({ content: content });
+                 const infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                  });
+                   infowindow.open(map, markerSrc);
+                 markerSrc.addListener("click", () => {
+                infowindow.open(map, markerSrc);
+                });
+                outerThis.marker4 = markerSrc;
+              }
+  
+  
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+                if (this.dataColor) {
+                  var markersPasts = new google.maps.Marker({
+                    position: new google.maps.LatLng(this.lat, this.lng),
+                    icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                    map: map,
+                  })
+                  markersPasts['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                  google.maps.event.addListener(markersPasts, 'click', function () { 
+                    //console.log("inside info window function 1");
+                    this['infowindow'].open(map, this); });
+               
+  
+                }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+  
+                // outerThis.marker4 = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+  
+              }
+  
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc
+                })
+                outerThis.marker4 = markerSrc;
+              }
+            }
+          }
+  
+  
+      
+          //console.log(this.coloumnClicked) ;
+          if (this.coloumnClicked === false) {
+            tempData['dataArrayCoords'] = this.dataArrayCoords;
+  
+          }
+  
+          // //console.log('this.dataArrayCoords',this.dataArrayCoords); 
+            if(this.dataArrayCoords.length<1){
+              var fdd = new Date(this.datefrom);
+              var tdd= new Date(this.date2);
+              swal("No Data Found", "Vehicle has not moved from" +" "+ moment(fdd).format('LLL') + "to " + moment(tdd).format('LLL')).then((ans)=>{
+                //console.log(ans);
+             
+              },err=>{
+                //console.log(err);
+              });
+  
+            }
+         
+          this.seekBarValue = this.dataArrayCoords.length;
+  
+          this.maxSpeedd = Math.max.apply(null, this.speedArr); 
+          this.dis = true;
+  
+          this.contactService.getDistance(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3) => {
+  
+            this.data2 = data3;
+  
+            // initialize();
+            //  //console.log(this.data2);
+            let a = this.data2["Distance"] ? this.data2["Distance"] : 0;
+            if (this.coloumnClicked === false) {
+              tempData['mileage'] = a;
+              this.tempMapHistory.push(tempData);
+  
+            }
+  
+       
+  
+            this.total_dis = a;
+            let b = this.data2["Average Speed"] ? this.data2["Average Speed"] : 0;
+            this.avg_speed = b;
+         
+            this.ideal_time = this.data2["Idle Time"] ? this.minToHoursConversion(this.data2["Idle Time"]) : 0;
+            if (parseFloat(this.ideal_time) < 0) {
+              this.ideal_time = 0;
+            }
+  
+            this.historyDataCondition = true;
+  
+            var playerSeekbar: any;
+            $( document ).ready(function() {
+              playerSeekbar = document.getElementById('slider1'); 
+              //console.log( "ready!", playerSeekbar['value']);
+              playerSeekbar.oninput = function () { 
+               
+                    zoomToObject(flightPath);
+                    outerThis.changeRange();
+                 
+                  }
+               });
+              })
+  
+      }
+      else{
+        this.contactService.getCurrentLocation1(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3:any) => {
+          if(data3){
+            clearInterval(countTime);
+          }
+         
+          console.log('countercountercountercountercountercountercounter',counter,data3);
+          var ft = new Date(fromtime);
+          var tt = new Date(totime);
+          var dname = this.deviceSelect[0];
+       
+          if (this.coloumnClicked === false) {
+            var tempData = {
+              fromTime: ft.toLocaleString(),
+              toTime: tt.toLocaleString(),
+              device_name: this.deviceName,
+              device_obj: this.deviceSelect[0],
+              lineThickness: this.thicknessVal,
+              idleColor: this.idleColor,
+              parkingColor: this.parkingColor,
+              dataColor: this.dataColor,
+              flag: 'init',
+             
+            }
+          }
+  
+          this.showTable = true;
+  
+          this.latlongObjArr = data3;
+          this.flag = 'init';
+          initialize();
+          this.Load = false;
+          let cluster_arr = [];
+          console.log(flightPath.getPath());
+          
+          this.path = flightPath.getPath();
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = (this.navId === 'locationHistory')? this.dev_id.viewValue:this.dev_id.Device_Name;
+            this.speed = this.latlongObjArr[i].speed + "Km/hr";
+            this.im = this.latlongObjArr[i].imei;
+  
+            this.speedArr.push(this.latlongObjArr[i].speed);
+
+            var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // //console.log(JSON.parse(this.datee));
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+  
+            var harshAcc = this.latlongObjArr[i].harshAccel;
+            var harshBreak = this.latlongObjArr[i].harshBrake;
+            var harshCorner = this.latlongObjArr[i].harshCorner;
+            // //console.log(harshAcc,harshBreak,harshCorner);
+            var fill_color = '#00F';
+            var stroke_color = '#00A';
+            var content = '';
+            // content=`<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME :$d_name`
+            content = `<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : `
+             + d_name + `</b><br><b>IMEI : `
+             + this.im + `</b><br><b>DEVICE DATE : ` 
+             + this.datee + `</b><br><b>SPEED : ` 
+             + this.speed + `</b><br><b style="margin-bottom:10px" id="addressBinding">Address : `
+              + this.contentAdd + `</b></div></b></div>
+              </div></div>`
+              // <button value=${i} id="deletePoint" style="background-color: red;border: double;border-radius: 21%;color: white;padding: 8px 15px;cursor: pointer;opacity: 0.9;margin-left:50%">Delete</button>
+           
+            var harsh = this.latlongObjArr[i].gforce ? (parseFloat(this.latlongObjArr[i].gforce) / 10) : 0;
+            if ((harshAcc != undefined) && (harshAcc == 'true')) {
+              fill_color = '#008000';
+              stroke_color = '#008000';
+  
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #008000;">Harsh Acceleration</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+            if ((harshBreak != undefined) && (harshBreak == 'true')) {
+              fill_color = '#FF0000';
+              stroke_color = '#FF0000';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #FF0000;">Harsh Break</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+  
+              }
+            }
+            if ((harshCorner != undefined) && (harshCorner == 'true')) {
+              fill_color = '#c407b1';
+              stroke_color = '#c407b1';
+              if ((harsh != undefined) && (harsh != null)) {
+                var harshStat = outerThis.harshImpact(harsh);
+                content = '<div id="content"><div id="bodyContent"><div><br><p style="text-align: center;font-size: initial;font-weight: 500; margin-bottom: 0px;color: #c407b1;">Harsh Corner</p><br><b>Impact : ' + harshStat + '</b><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + this.im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + this.speed + '</b></div>'
+                '</div></div>'
+              }
+            }
+  
+            
+          
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+         
+            var arr = [];      
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+       
+  
+            this.latLngLine.push(cord);
+          var contentString = '<div>' +
+            '<div>'+
+            '<p style="margin-bottom: 5px;font-weight:700">' + this.deviceName + '</p>' +
+            '</div>'
+            var iconSrc = this.iconSelector("RUNNING","truck",{});
+            // 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000'
+            // this.iconSelector("RUNNING","car",{});
+            
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+            // iconSrc['infowindow'] = new google.maps.InfoWindow({ content: contentString });
+            // '/assets/images/liveTrackIcons/ocar.png';
+            // ======================added ========================================
+            // this.lat = this.latlongObjArr[i].lat;
+            // this.lng = this.latlongObjArr[i].lng;       
+            // this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+              if (this.dataColor === true) {
+                var markersPast = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                  map: map,
+                })
+  
+                markersPast['infowindow'] = new google.maps.InfoWindow({ content: content });
+             
+  
+                google.maps.event.addListener(markersPast, 'click', function () {
+            
+                  var lattitude = markersPast.position.lat();
+                  var longitude = markersPast.position.lng()  ;
+                  var latlng_1 =
+                  {
+                    "lat": lattitude,
+                    "long":  longitude
+                  }
+                  outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                 
+                 if(res.message == "Address not found in databse"){ 
+                  var geocoder = new google.maps.Geocoder();
+                  var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+                  var request = {
+                    latLng: latlng
+                  };
+                  // //console.log('latlongVal', request)
+                  var innerThis = this ; 
+                  this['infowindow'].open(map, innerThis); 
+                  geocoder.geocode(request, function (data, status) { 
+                    if (status == google.maps.GeocoderStatus.OK) {
+                      if (data[0] != null) {
+                        // innerThis.contentAdd = data[0].formatted_address;
+                        var tempAdd = data[0].formatted_address;
+                          var getAddressContent = document.getElementById('addressBinding');
+                          getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+                       
+                      } else {
+                        // //console.log("No address available")
+                        var tempAdd_1 = "No address available";
+                        var getAddressContent = document.getElementById('addressBinding');
+                        getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+                      
+                     
+                     
+                      }
+                    }
+                    else {
+                      var tempAdd_2 = 'NA';
+                      var getAddressContent = document.getElementById('addressBinding');
+                      getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+                      //console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+                    
+                    }
+              
+                  })
+  
+                    }else{
+                      var innerThis_1 = this ; 
+                  
+                      this['infowindow'].open(map, innerThis_1);      
+                      var tempAdd  = res.address ; 
+                      //console.log('innerThis_1.contentAdd',tempAdd);
+                      var chkTmout = setTimeout(function(){
+                        var getAddressContent = document.getElementById('addressBinding');
+                        // //console.log('getAddressContent',getAddressContent);
+                        getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+                        clearTimeout(chkTmout);
+                      },500)
+                    
+                    }
+  
+                  })
+                  })
+               
+              }
+  
+  
+  
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc,
+                  scaledSize: new google.maps.Size(20, 20),
+                });
+                //  markerSrc['infowindow'] = new google.maps.InfoWindow({ content: content });
+                 const infowindow = new google.maps.InfoWindow({
+                content: contentString,
+                  });
+                   infowindow.open(map, markerSrc);
+                 markerSrc.addListener("click", () => {
+                infowindow.open(map, markerSrc);
+                });
+                outerThis.marker4 = markerSrc;
+              }
+  
+  
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+  
+                if (this.dataColor) {
+                  var markersPast = new google.maps.Marker({
+                    position: new google.maps.LatLng(this.lat, this.lng),
+                    icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                    map: map,
+                  })
+                  markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                  google.maps.event.addListener(markersPast, 'click', function () { 
+                    //console.log("inside info window function 1");
+                    this['infowindow'].open(map, this); });
+               
+  
+                }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconDest
+                });
+  
+                // outerThis.marker4 = markerCurrent;
+                map.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(map);
+                zoomToObject(flightPath);
+  
+              }
+  
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: map,
+                  icon: iconSrc
+                })
+                outerThis.marker4 = markerSrc;
+              }
+            }
+          }
+  
+          if (this.coloumnClicked === false) {
+            tempData['dataArrayCoords'] = this.dataArrayCoords;
+  
+          }
+  
+            if(this.dataArrayCoords.length<1){
+              var fdd = new Date(this.datefrom);
+              var tdd= new Date(this.date2);
+              swal("No Data Found", "Vehicle has not moved from" +" "+ moment(fdd).format('LLL') + "to " + moment(tdd).format('LLL')).then((ans)=>{
+                //console.log(ans);
+             
+              },err=>{
+                //console.log(err);
+              });
+  
+            }
+         
+          this.seekBarValue = this.dataArrayCoords.length;
+  
+          this.maxSpeedd = Math.max.apply(null, this.speedArr);
+          this.dis = true;
+  
+          this.contactService.getDistance(this.ddid, fromtime, totime,this.satelliteDisabled?this.satelite:undefined).subscribe((data3) => {
+  
+            this.data2 = data3;
+  
+            // initialize();
+             console.log("__________________",this.data2,this.distanceVariation);
+            let a = Number(this.data2["Distance"] ? this.data2["Distance"] : 0);
+            // if(this.distanceVariation){
+            //   if(this.distanceVariation[0]=="+"){
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+            //     console.log("MILEGE->",milege,'-',a);
+            //     a=a+milege
+
+            //   }else{
+            //     var milege=(a/100)*(Number(this.distanceVariation.substring(1)))
+            //     console.log("MILEGE->",milege,'-',a);
+            //     a=a-milege
+            //   }
+            // }
+            if (this.coloumnClicked === false) {
+              tempData['mileage'] = a.toFixed(2);
+              this.tempMapHistory.push(tempData);
+  
+            }
+  
+            this.total_dis = a;
+            let b = this.data2["Average Speed"] ? this.data2["Average Speed"] : 0;
+            this.avg_speed = b;
+         
+            this.ideal_time = this.data2["Idle Time"] ? this.minToHoursConversion(this.data2["Idle Time"]) : 0;
+            if (parseFloat(this.ideal_time) < 0) {
+              this.ideal_time = 0;
+            }
+  
+            this.historyDataCondition = true;
+  
+            var playerSeekbar: any;
+            $( document ).ready(function() {
+              playerSeekbar = document.getElementById('slider1'); 
+              //console.log( "ready!", playerSeekbar['value']);
+              playerSeekbar.oninput = function () { 
+               
+                    zoomToObject(flightPath);
+                    outerThis.changeRange();
+                 
+                  }
+               });
+          })
+        });
+
+      }
+      
+
+
+
+
+      let min_time = this.minIdleTime;
+      var deviceObjectid = (this.navId === 'locationHistory')?this.dev_id.id: this.dev_id._id;
+      //console.log(deviceObjectid);
+
+      if (this.idleColor === true) {
+        this.idlePlot(fromtime, totime, deviceObjectid, min_time, map)
+      }
+      var stop_locations = [];
+      if (this.parkingColor === true) {
+    //     var from1 = new Date(this.datefrom).toISOString();
+    // var to1 = new Date(this.date2).toISOString();
+
+    // var fromtime = new Date(from1).toISOString();
+    // var totime = new Date(to1).toISOString();
+          // console.log('this.useriddthis.useridd',this.useridd,"IIIIIIIIIIIIIIIi",this.dev_id.id?this.dev_id.id: this.dev_id._id);
+          var userid=(this.dev_id.user._id != undefined)?this.dev_id.user._id:this.dev_id.user;
+          this.contactService.stoppage_points(deviceObjectid, fromtime, totime, userid)
+        // this.contactService.stoppage_report(fromtime,totime,userid,this.dev_id.id?this.dev_id.id: this.dev_id._id)
+          .subscribe((res) => {
+            console.log("===========================>",res,this.parkingArr);
+            // this.parkingArr=res
+            let test = res;
+            // let test = res;
+            this.Load = false;
+            this.stoppageCount = (test.length != 0)?test.length : 0;
+            for (var i = 0; i < test.length; i++) {
+
+              this.stoppage_container = [];
+              this.stoppage_container.push(test[i].lat);
+              this.stoppage_container.push(test[i].long);
+             
+              this.arrival = new Date(test[i].arrival_time);
+              this.stoppage_container.push(this.arrival);
+              this.departure = new Date(test[i].departure_time);
+              this.stoppage_container.push(this.departure);
+              stop_locations.push(this.stoppage_container);
+              this.stop_locationss.push(this.stoppage_container);
+
+
+            }
+              // debugger;
+               console.log("initParking",stop_locations.length)
+            if (stop_locations.length > 0) {
+              // for(var l=0;l<stop_locations.length;l++){
+              //   this.parkingPOINTS.push(this.parkingPonit(fromtime,stop_locations,l))
+              //   console.log("KSSSSSSSSS",this.parkingPOINTS)
+              // }
+              initParking();
+              console.log("initParking")
+            } else {
+              console.log("In Else part initParking",stop_locations)
+            }
+          })
+      }
+
+    }
+    // //console.log(totime)
+    this.latLongArr2 = [];
+    var customTxt;
+    var txt;
+    function geocodePosition(pos, callback) {
+      var geocoder = new google.maps.Geocoder();
+      geocoder.geocode({
+        latLng: pos
+      }, function (responses) {
+        callback(responses[0].formatted_address)
+
+      });
+    }
+    var k;
+    
+
+    function initParking() {
+      console.log('counter + 5000',counter + 8000);
+      var ttVal = counter + 5000;
+        var callTimeout = setTimeout(()=>{
+       
+      isMapInit = true;
+      // ============================
+      // var pinImage = new google.maps.MarkerImage("https://png.icons8.com/office/30/000000/parking.png");
+      var pinImage = new google.maps.MarkerImage("../../assets/image/parkingPoint1.png");
+      var infowindow = new google.maps.InfoWindow();
+
+      // var marker: any;
+      var k: any;
+      var l: number
+     
+
+       console.log('stoppagelocationArr',stop_locations.length);
+      for (l = 0; l < stop_locations.length; l++) {
+        outerThis.latitude = stop_locations[l][0];
+        outerThis.longitude = stop_locations[l][1];
+        outerThis.arrivalTime = new Date(stop_locations[l][2]).toLocaleString();
+        outerThis.departureTime = new Date(stop_locations[l][3]).toLocaleString();
+        outerThis.addresslocation = stop_locations[l][4];
+      
+        var fd = new Date(outerThis.arrivalTime).getTime();
+        var td = new Date(outerThis.departureTime).getTime();
+        var time_difference = td - fd;
+        var total_min = time_difference / 60000;
+        var hours = total_min / 60
+        var rhours = Math.floor(hours);
+        var minutes = (hours - rhours) * 60;
+        var rminutes = Math.round(minutes);
+        outerThis.Durations = rhours + ':' + rminutes
+
+      let  marker = new google.maps.Marker({
+          position: new google.maps.LatLng(stop_locations[l][0], stop_locations[l][1]),
+          map: outerThis.historyMap,
+          icon: pinImage,
+
+        });
+
+        google.maps.event.addListener(marker, 'dragend', function () {
+
+          this.geocodePosition(marker.getPosition());
+        });
+        outerThis.historyMap.setCenter(marker.getPosition());
+        // console.log(outerThis.parkingPonit(fromtime,stop_locations,l),'erueruu')
+        // outerThis.counter=l
+        
+        // setTimeout(function(){
+          var content = '<div><div> Arrival Time-: '
+          + outerThis.arrivalTime + '</div><br><div>Departure Time-: '
+          + outerThis.departureTime + '</div><br><div>Time Duration-: '
+          + outerThis.Durations + ' </div></br><div> Latitude-: '
+          + outerThis.latitude + ' </div></br><div> Longitude-: '
+          + outerThis.longitude + ' </div><br></div>'
+          // console.log("CONTENt",content)<div>Odo-:'+dataa+'
+          // },2000)
+          // var dataa
+          //  console.log(outerThis.fromTIME,outerThis.stop_locationss,outerThis.counter,"))))))))))))))))");
+              
+          //      outerThis.contactService.getDistance(outerThis.ddid, outerThis.fromTIME, (outerThis.stop_locationss[l][2]).toISOString(),outerThis.satelliteDisabled?outerThis.satelite:undefined).subscribe((data3:any) => {
+          //          console.log("DADADADADADADAD--->",data3);
+          //          dataa=data3.Distance?data3.Distance:''
+          //         content=content+`<div>Odo-:`+ data3.Distance?data3.Distance:''+'</div>'
+          //      })
+
+        google.maps.event.addListener(marker, 'click', (function (marker,content, infowindow) {
+          return function () {
+      //       var dataa
+      //       console.log(outerThis.fromTIME,outerThis.stop_locationss,outerThis.counter,"))))))))))))))))");
+            
+      //        outerThis.contactService.getDistance(outerThis.ddid, outerThis.fromTIME, (outerThis.stop_locationss[outerThis.counter][2]).toISOString(),outerThis.satelliteDisabled?outerThis.satelite:undefined).subscribe((data3:any) => {
+      //            console.log("DADADADADADADAD--->",data3);
+      //           dataa=data3.Distance?data3.Distance:''
+      //         //  return data3
+      // })
+      // setTimeout(function(){
+            // content=content+`<div>Odo-:`+ dataa+'</div>'
+            // console.log(content,"+++");
+            geocodePosition(marker.getPosition(), function (result) {
+              infowindow.setContent(content);
+              infowindow.open(map, marker, content);
+            });
+          // }, 2000);
+
+          }
+        })(marker, content, infowindow));
+       
+      }
+      clearTimeout(callTimeout);
+        },ttVal)
+      
+    }
+
+      function initialize() {
+      const myOptions = {
+        zoom:2,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+      map = new google.maps.Map(document.getElementById('map2'), myOptions);
+      console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+      outerThis.historyMap = map;
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+     
+      isMapInit = true;
+
+      var zoomBar: any;
+      zoomBar = document.getElementById('myRange');
+      map.setZoom(map.getZoom());
+
+    
+      zoomBar.value = map.getZoom();
+  
+      zoomBar.oninput = function () {
+        //console.log('zoomValue',map.getZoom());
+        map.setZoom(parseInt(this.value));
+      }
+
+      google.maps.event.addListener(map, 'zoom_changed', function (event) {
+        //console.log("Inside zoom in out function");
+        if (zoomBar.value)
+          zoomBar.value = map.getZoom();
+      });
+
+       
+
+    }
+
+
+
+    var lineSymbol = {
+      path: 'M 0,-1 0,1',
+      strokeOpacity: 1,
+      scale: 4
+    };
+
+    var flightPath = new google.maps.Polyline({
+      geodesic: true,
+      strokeColor: '#0000FF',
+      strokeOpacity: 1.0,
+      strokeWeight: parseInt(this.thicknessVal),
+      icons: [{
+        icon: {
+          strokeColor: '#056608',
+
+          fillColor: '#056608',
+          strokeOpacity: 0.8,
+          strokeWeight: parseInt(this.thicknessVal),
+          path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
+        },
+        offset: '0',
+        repeat: '100px'
+      }
+        // ,
+        // {
+        //   icon: {
+        //     strokeColor: '#FF0000 ',
+        //     fillColor: '#FF0000',
+        //     strokeOpacity: 0.8,
+        //     strokeWeight: parseInt(this.thicknessVal),
+        //     path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
+        //   },
+        //   offset: '0',
+        //   repeat: '100px'
+        // }
+      ],
+
+    });
+
+
+    function zoomToObject(obj){
+    var bounds = new google.maps.LatLngBounds();
+    var points = obj.getPath().getArray();
+    for (var n = 0; n < points.length ; n++){
+        bounds.extend(points[n]);
+    }
+    map.fitBounds(bounds);
+}
+
+    this.parkingData(fromtime, totime,this.useridd,this.dev_id);
+
+    this.notificationData(fromtime, totime,this.useridd,this.dev_id);
+
+  }
+  parkingPonit(fromtime,stop_locations,l){
+    console.log(fromtime,stop_locations,l,"--------------");
+    
+      var data
+    this.contactService.getDistance(this.ddid, fromtime, (stop_locations[l][2]).toISOString(),this.satelliteDisabled?this.satelite:undefined).subscribe((data3:any) => {
+        console.log("DADADADADADADAD--->",data3.Distance);
+        data=data3
+        return data3
+      })
+    }
+
+
+  harshImpact(harshVal) {
+    // //console.log('harshVal',harshVal)
+    if (harshVal < 3.5) {
+      var hStatus = 'Low'
+      return hStatus;
+    }
+    if ((harshVal >= 3.5) && (harshVal < 4.5)) {
+
+      var hStatus = 'Medium'
+      return hStatus;
+    }
+    if ((harshVal >= 4.5) && (harshVal < 5)) {
+
+      var hStatus = 'High';
+      return hStatus;
+
+    }
+    if (harshVal >= 5) {
+      // //console.log('Severe');
+      var hStatus = 'SEVERE';
+      return hStatus;
+    }
+
+  }
+
+
+
+  ideal_time: any;
+  total_dis: any;
+  dis: Boolean = false;
+  avg_speed: any;
+  //Geofence
+  draw(zzz, yyy) {
+    console.log('zzz', zzz,'yyy', yyy);
+    //console.log('yyy', yyy);
+    var map;
+    var infoWindow;
+
+    this.cordin = [];
+    let a = zzz.coordinates[0];
+    for (let k = 0; k < a.length; k++) {
+      let b = {
+        lat: a[k][1],
+        lng: a[k][0]
+      }
+      this.cordin.push(b);
+    }
+
+
+
+    var GeoFencCoords = this.cordin;
+    var GeoName = yyy
+
+    initMap(GeoFencCoords);
+    let outerThis = this;
+    function initMap(GeoFencCoords) {
+      map = new google.maps.Map(document.getElementById('map'), {
+        zoom: 17,
+        center: { lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng },
+        mapTypeId: 'terrain'
+      });
+
+
+      var bermudaTriangle = new google.maps.Polygon({
+        paths: GeoFencCoords,
+        strokeColor: '#FF0000',
+        strokeOpacity: 0.8,
+        strokeWeight: 3,
+        fillColor: '#FF0000',
+        fillOpacity: 0.35
+      });
+      bermudaTriangle.setMap(map);
+
+      // Add a listener for the click event.
+      bermudaTriangle.addListener('click', showArrays);
+
+      infoWindow = new google.maps.InfoWindow;
+
+    }
+
+    /** @this {google.maps.Polygon} */
+    function showArrays(event) {
+
+      var vertices = this.getPath();
+
+      var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+
+      infoWindow.setContent(contentString);
+      infoWindow.setPosition(event.latLng);
+
+      infoWindow.open(map);
+    }
+  }
+  device_imei = []
+  private socket_Geo;
+  data2: any;
+  //Get Device Imei
+  calldevice() {
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+
+    this.contactService.getDevice(this.emailid, this.useridd).subscribe(
+
+      data => {
+        this.devicess = data
+
+
+        for (let i = 0; i < this.devicess.devices.length; i++) {
+
+          // if (this.devicess.devices[i].type_of_device == "Tracker") {
+
+            let a = {
+              did: this.devicess.devices[i].Device_ID,
+              dname: this.devicess.devices[i].Device_Name
+            }
+            this.device_imei.push(a);
+          }
+
+        // }
+        this.geoFenceaction(this.device_imei)
+      });
+  }
+
+  minToHoursConversion(num){
+   var hours = Math.floor(num / 3600);
+num %= 3600;
+var minutes = Math.floor(num / 60);
+var seconds = num % 60;
+//     var hours = (num / 60);
+//   var rhours = Math.floor(hours);
+//   var minutes = (hours - rhours) * 60;
+// var rminutes = Math.round(minutes);
+  return  hours + " hrs " + minutes + " min ";
+  }
+
+  //GeoFence Action
+
+  geoFenceaction(imei) {
+
+    for (let i = 0; i < imei.length; i++) {
+      // //console.log(imei[i])
+
+      //this.socket_Geo.on(imei[i].did, (data,geo,a,c) => {
+
+      //  //console.log(data);
+
+      /*   
+        if (data == "enter"){
+          let message = imei[i].dname+" entering in "+geo.geoname+" Geofence ";
+          let action = "Geofence Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        }
+        else if(data == "exit"){
+          let message = imei[i].dname+" exiting in "+geo.geoname+" Geofence ";
+          let action = "Geofence Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        }
+        else if(data == "speedLimit"){
+          let message = imei[i].dname+" Over Speeding";
+          let action = "Speed Alert";
+          this.snackBar.open(message,action, {
+            duration: 4000,
+            
+          });
+        } */
+      //})
+
+    }
+
+  }
+  new: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i;
+      input = document.getElementById("myInput");
+
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[0];
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          } else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+  share_id: any;
+  share_name: any;
+  vewdev(id, name, type, device) {
+    // //console.log("Inside adddiv");
+    // //console.log(id + name);
+    if (type == "Tracker") {
+      //this.router.navigateByUrl("location?_dname="+name+"_id="+id);
+      this.share_id = device;
+      if((this.navId === undefined)||(this.navId != 'locationHistory')){
+         console.log("111111111133333");
+        this.livetrack(id)
+      }
+
+      
+
+    }
+    else {
+      this.router.navigateByUrl("account?_did=" + id + "." + name);
+    }
+  }
+
+  constructor(public elementRef: ElementRef, public dialog: MdDialog, public _ngZone: NgZone, public snackBar: MdSnackBar, private contactService: ContactService, private router: Router, private activatedRoute: ActivatedRoute, private _flashMessagesService: FlashMessagesService, private injectData: DatainjectionService) {
+
+    let mapLanguage = localStorage.getItem('appLang');
+    this.token_identifier = localStorage.getItem('referrer_token=');
+    //console.log('mapLanguage',mapLanguage);
+    if((mapLanguage == null)||(mapLanguage == undefined)){
+      mapLanguage  = 'en';
+    }
+    if(mapLanguage == 'sp'){
+      mapLanguage  = 'es';
+    }
+    if(mapLanguage == 'fa'){
+      mapLanguage  = 'fas';
+
+    }
+    if(mapLanguage == 'fr'){
+      mapLanguage  = 'fr';
+
+    }
+
+
+    // var script = document.createElement('script');
+    // script.setAttribute("type", "text/javascript");
+    // script.setAttribute("src", "https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8&language=" + mapLanguage);
+    // document.getElementsByTagName("head")[0].appendChild(script);
+   
+   
+    let tblid;
+    let status = false;
+    var cuTime = new Date();
+
+    this.currentTime = moment(cuTime).format();
+  
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      this.navId = params['pageid'];
+    
+      if(this.navId === 'locationHistory'){
+        this.tabIndexValue = "2";
+        this.showHistory = true;
+        this.tab_1  = true;
+        this.tab_2 = true;
+        navigator.geolocation.getCurrentPosition(function (position) {
+          var myOptions = {
+            zoom: 18,
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+          var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+  
+          var marker = new google.maps.Marker({
+            center: {
+              lat: position.coords.latitude,
+              lng: position.coords.longitude
+            },
+            map: mapHistory,
+            title: "Your current location!",
+          });
+  
+        })
+
+      }
+      // locationComponent
+    })
+
+ 
+
+  }
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  speeed: any;
+  mapp: boolean = true;
+  mappp: boolean = true
+  latLongArr: any[] = [];
+  latLongArr2: any[] = [];
+  latlongObjArr = [];
+  latlongObjArr2 = [];
+  map = [];
+  test2 = [];
+  lat: any;
+  lng: any;
+  hismap: boolean = false;
+  titleMarker: string;
+  f: any;
+  q: any;
+  dev: any;
+  drag: any;
+  im: any;
+  private socket;
+  titleMarker2: any
+  Math: any;
+  dname: any;
+  ddid: any;
+  mapOptions: any;
+  checker: any;
+  // ngAfterViewInit(){
+  //   this.child1.whoAmI();
+  // };
+  final: any;
+  devicess: any;
+  tblid: any;
+  flag2: boolean = false
+  useridd: any;
+  getData: any;
+  fin: any;
+  devicesss: any;
+  custtype: any;
+  cust: boolean = false;
+  // selectedValue: string = this.foods[0].value;
+
+  speedgauge() {
+    gra();
+    function gra() {
+      var gauge = new RadialGauge({
+        renderTo: 'canvas-id',
+        width: 300,
+        height: 300,
+        units: "Km/h",
+        minValue: 0,
+        startAngle: 90,
+        ticksAngle: 180,
+        valueBox: false,
+        maxValue: 220,
+        majorTicks: [
+          "0",
+          "20",
+          "40",
+          "60",
+          "80",
+          "100",
+          "120",
+          "140",
+          "160",
+          "180",
+          "200",
+          "220"
+        ],
+        minorTicks: 2,
+        strokeTicks: true,
+        highlights: [
+          {
+            "from": 160,
+            "to": 220,
+            "color": "rgba(200, 50, 50, .75)"
+          }
+        ],
+        colorPlate: "#fff",
+        borderShadowWidth: 0,
+        borders: false,
+        needleType: "arrow",
+        needleWidth: 2,
+        needleCircleSize: 7,
+        needleCircleOuter: true,
+        needleCircleInner: false,
+        animationDuration: 1500,
+        animationRule: "linear"
+      }).draw();
+    }
+
+  }
+  timer: any;
+  subscription: any
+  current_map: any
+  prev_map: any;
+  MapChecker() {
+    this.timer = Observable.timer(100, 100);
+    this.subscription = this.timer.subscribe(t => {
+      this.current_map = window.localStorage.mapLoad_ID;
+      if (!this.current_map) {
+
+      }
+      else if (this.current_map) {
+        if (!this.prev_map) {
+          this.MapLoad = true;
+          if (this.current_map == "True") {
+            if((this.navId === undefined)||(this.navId != 'locationHistory')){
+               console.log("111111111144444");
+              this.livetrack(null) ;
+            }
+          
+            this.prev_map = window.localStorage.mapLoad_ID;
+            this.showButton = true;
+          }
+          else {
+            // //console.log(window.localStorage.mapLoad_ID);
+            if((this.navId === undefined)||(this.navId != 'locationHistory')){
+               console.log("111111115555555");
+              this.livetrack(window.localStorage.mapLoad_ID);
+            }
+           
+            this.prev_map = window.localStorage.mapLoad_ID;
+            this.showButton = true;
+          }
+
+        }
+        else if (this.prev_map == this.current_map) {
+
+        }
+        else if (this.current_map == "True") {
+          this.MapLoad = true;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+             console.log("11111111666666");
+            this.livetrack(null); 
+          }
+        
+          this.prev_map = window.localStorage.mapLoad_ID;
+          this.showButton = true;
+
+        }
+        else if (this.prev_map != this.current_map) {
+          this.MapLoad = true;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+            console.log("1111111777777");
+            this.livetrack(window.localStorage.mapLoad_ID)
+          }
+        
+          this.prev_map = window.localStorage.mapLoad_ID;
+          this.showButton = true;
+        }
+      }
+    })
+  }
+  //  dataArrayCoordss = [];
+
+
+  mb: any
+  logoutbut: boolean;
+  dealer: boolean;
+  logo: any;
+  text: any;
+  datefrom = new Date();
+  gaugeString: any = 'PERCENTAGE';
+  gaugeDataticks: any = '0,20,40,60,80,100';
+  newFunction(){
+  
+  }
+  
+  ngOnInit() {
+   
+    window["angularComponentRef"] = { component: this, zone: this._ngZone };
+    this.socket = this.injectData.getSocket_gps();
+    this.socket.on('connect', function (this) { });
+
+    this.socket_Notify = this.injectData.getSocket_notifIO();          
+    this.socket_Notify.on('connect', function(this){ });
+
+    this.bsConfig = Object.assign({dateInputFormat: 'DD-MM-YYYY, h:mm:ss a'}, { containerClass: this.colorTheme });
+    //console.log('this.bsConfig',this.bsConfig);
+
+    
+    this.to = new Date().toISOString();
+    var d = new Date();
+    let a = d.setHours(0, 0, 0, 0)
+    this.from = new Date(a).toISOString();
+
+    this.reloadCOmponent = true;
+    this.date1 = new Date().setHours(0, 0, 0);
+    this.datefrom = new Date(this.date1)
+    // //console.log(this.date1);
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.MapChecker();
+    this.mapOptions = {
+      zoom: 15,
+      center: { lat: 28.644800, lng: 77.216721 },
+      scrollwheel: true, // we disable de scroll over the map, it is a really annoing when you scroll through page
+      styles: [
+        { 'featureType': 'water', 'stylers': [{ 'saturation': 43 }, { 'lightness': -11 }, { 'hue': '#0088ff' }] },
+        {
+          'featureType': 'road', 'elementType': 'geometry.fill', 'stylers': [{ 'hue': '#ff0000' },
+          { 'saturation': -100 }, { 'lightness': 99 }]
+        },
+        {
+          'featureType': 'road', 'elementType': 'geometry.stroke', 'stylers': [{ 'color': '#808080' },
+          { 'lightness': 54 }]
+        },
+        { 'featureType': 'landscape.man_made', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#ece2d9' }] },
+        { 'featureType': 'poi.park', 'elementType': 'geometry.fill', 'stylers': [{ 'color': '#ccdca1' }] },
+        { 'featureType': 'road', 'elementType': 'labels.text.fill', 'stylers': [{ 'color': '#767676' }] },
+        { 'featureType': 'road', 'elementType': 'labels.text.stroke', 'stylers': [{ 'color': '#ffffff' }] },
+        { 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] },
+        {
+          'featureType': 'landscape.natural', 'elementType': 'geometry.fill', 'stylers': [{ 'visibility': 'on' },
+          { 'color': '#b8cb93' }]
+        },
+        { 'featureType': 'poi.park', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.sports_complex', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.medical', 'stylers': [{ 'visibility': 'on' }] },
+        { 'featureType': 'poi.business', 'stylers': [{ 'visibility': 'simplified' }] }
+      ]
+    };
+
+    // this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    // this.fs = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fn;
+    // this.ls = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).ln;
+    // this.emailid = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).email;
+    // this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    // this.or = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._orgName;
+    // this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    // this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // var fuelvalue = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).fuel_unit;
+    // this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).device_add_permission;
+    // this.dev_by_dashboard = localStorage.getItem('devDetail');
+    // this.adbtn = localStorage.getItem("dlrchk");
+
+    // //console.log('this.dev_by_dashboard',this.dev_by_dashboard);
+
+    // if (fuelvalue == "PERCENTAGE") {
+    //   this.gaugeString = 'PERCENTAGE';
+    //   this.gaugeDataticks = '0,20,40,60,80,100';
+    //   window.onload = function () {
+    //     //console.log("inside percentage");
+    //     var gaugeElement = document.getElementById('fuelgauge');
+    //     gaugeElement.setAttribute('data-units', 'PERCENTAGE');
+    //     gaugeElement.setAttribute('data-major-ticks', '0,20,40,60,80,100');
+    //     gaugeElement.setAttribute('data-max-value', '100');
+    //   };
+
+    // } else {
+    //   this.gaugeString = 'LITRE';
+      
+
+    // }
+  
+
+    // if (this.superAdmin == true) {
+    //   this.supadmin = this.useridd;
+    // }
+    // if (this.custtype == true) {
+    //   this.dealerid = this.useridd;
+    // }
+
+    // if (this.custtype == true) {
+    //   this.cust = true;
+
+    // }
+    // // if (this.mb.charAt(0) == "n") {
+    // //   this.mb = ' '
+    // // }
+    // if (window.localStorage['Custumer'] == 'ON') {
+    //   this.logoutbut = false
+    //   this.dealer = true
+    // }
+    // else {
+    //   this.logoutbut = true
+    // }
+    // this.online = true;
+    // this.offline = false;
+    // // this.checker  = 'OK';
+
+    // window.localStorage['checker'] = 'Data'
+    // debugger;
+    // //console.log("this.fin=>",this.fin);
+    this.activatedRoute.queryParams.subscribe((params: Params) => {
+      this.getData = params['token'];
+      if (this.getData == undefined || this.getData == null) {
+        this.fin = null;
+      }
+      else {
+        console.log("this.fin=>",this.getData);
+        this.superAdmin = JSON.parse(window.atob(this.getData.split(".")[1])).isSuperAdmin;
+    this.fs = JSON.parse(window.atob(this.getData.split('.')[1])).fn;
+    this.ls = JSON.parse(window.atob(this.getData.split('.')[1])).ln;
+    this.emailid = JSON.parse(window.atob(this.getData.split('.')[1])).email;
+    this.mb = JSON.parse(window.atob(this.getData.split('.')[1])).phn;
+    this.or = JSON.parse(window.atob(this.getData.split('.')[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(this.getData.split('.')[1]))._id;
+    this.custtype = JSON.parse(window.atob(this.getData.split('.')[1])).isDealer;
+    console.log(this.superAdmin,this.emailid,this.useridd);
+            this.getAllDevice();
+    this.getGraphFunction()
+    // this.getDeviceBYfilter('');
+    this.getDevicebyIdComingFromDashboard();
+    this.getGeofence_1();
+    //  this.testMap()
+    this. getGrp()
+    this.modelChanged
+      .debounceTime(2000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+
+        var searchObj = JSON.parse(myInput);
+     
+        this.myInput = searchObj.str;
+        (searchObj.identifier == 'devSearch') ? this.getDeviceBYfilter('','') : this.getGeofence_1()
+  
+
+      });
+ this.getUserDetails()
+        // this.fin = this.getData.split("=")[1];
+      }
+      //   //console.log(this.fin);
+
+    });
+
+    // if(this.token_identifier != undefined){
+    //   this.fin = null
+
+    // }
+    // console.log('this.fn', this.fin);
+
+
+    // var retrievedData = localStorage.getItem("devices");
+    // var cord = JSON.parse(retrievedData);
+
+    // this.final = cord
+    // //console.log('this.fianl=>',this.final);
+    // for (let i = 0; i < this.final.length; i++) {
+    //   if (this.final[i].type_of_device == "Tracker") {
+    //     let a = {
+    //       value: this.final[i].Device_Name,
+    //       viewValue: this.final[i].Device_Name,
+    //       did: this.final[i].Device_ID,
+    //       id: this.final[i]._id,
+    //       user: this.final[i].user,
+    //       email: this.final[i].Email_ID,
+    //       deviceType: this.final[i].type_of_device,
+    //       iconType: this.final[i].iconType
+
+    //     }
+
+    //     this.foods.push(a);
+    //   }
+
+    // }
+    // this.livetrack(this.fin);
+    // for (let y = 0; y < this.foods.length; y++) {
+    //   if (this.foods[y].did == this.fin) {
+    //     this.new = this.foods[y];
+    //   }
+    // }
+
+
+//     this.last_speed = localStorage.getItem('last_speed');
+//     this.getAllDevice();
+//     this.getGraphFunction()
+//     // this.getDeviceBYfilter('');
+//     this.getDevicebyIdComingFromDashboard();
+//     this.getGeofence_1();
+//     //  this.testMap()
+//     this. getGrp()
+//     this.modelChanged
+//       .debounceTime(2000) // wait 300ms after the last event before emitting last event
+//       .distinctUntilChanged() // only emit if value is different from previous value
+//       .subscribe(myInput => {
+
+//         var searchObj = JSON.parse(myInput);
+     
+//         this.myInput = searchObj.str;
+//         (searchObj.identifier == 'devSearch') ? this.getDeviceBYfilter('','') : this.getGeofence_1()
+  
+
+//       });
+//  this.getUserDetails()
+  }
+
+  // className:any;
+  ngOnDestroy() {
+    for (var e = 0; e < this.deviceToTrack.length; e++) {
+      this.socket.removeAllListeners(this.deviceToTrack[e])
+      localStorage.removeItem('mapLoad_ID');
+      localStorage.removeItem('mapLoad_Name');
+
+
+      //this.socket_Geo.removeAllListeners(this.deviceToTrack[e])
+    }
+
+    localStorage.removeItem('devDetail');
+    if(this.status_cmdq!=undefined){
+      clearInterval(this.status_cmdq)
+    }
+
+    if(this.intervalTimeOut!=undefined){
+      clearTimeout(this.intervalTimeOut);
+    }
+    
+    
+    window["angularComponentRef"] = null;
+
+
+    if( this.socket_Notify){
+      this.socket_Notify.removeAllListeners()
+    }
+
+  }
+
+  addpoi(lat) {
+    //  var lattitude =  JSON.parse(lat);
+    var latlng = JSON.stringify(lat).substring(1, lat.length - 1);
+    //  //console.log(latlng);
+
+    var latt = latlng.split(',')[0];
+    var lng = latlng.split(',')[1];
+
+    //  //console.log(latt);
+    //  //console.log(lng);
+
+    var reqlatlng = {
+      lat: latt,
+      long: lng
+    }
+    let dialogRef = this.dialog.open(AddpoiBylocationComponent, {
+      width: '650px',
+      height: '700px',
+      data: { 'deviceData': reqlatlng }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // //console.log(result);
+
+    })
+  }
+  disableSearch: boolean = false;
+  DriverName
+  DriverNumber
+  ac
+  getAllDevice() {
+    // this.Load = true;
+      
+    if (this.dev_by_dashboard != null) {
+      this.disableSearch = true
+      // //console.log(this.disableSearch);
+      var search_1 = JSON.parse(this.dev_by_dashboard).vehicleId;
+    }
+
+    this.contactService.alldevices1(this.useridd, this.emailid, this.supadmin, this.dealerid, search_1)
+      .subscribe(res => {
+        this.deviceObj = [];
+     
+        var Alldevices = {
+          id: "all",
+          viewValue: "ALL Devices",
+          iconType: "",
+          deviceId: ""
+        }
+        if(res.devices.length==1){
+          this.selectedDevice=res.devices[0]._id
+          this.parkingButtonShow=res.devices[0].theftAlert==null?'grey':res.devices[0].theftAlert==undefined?'grey':res.devices[0].theftAlert==true?'green':'red'
+          this.DriverName=res.devices[0].driver_name;
+          console.log("DRIVER NAME",this.DriverName,res.devices[0].ac);
+          this.ac=res.devices[0].ac?res.devices[0].ac:'NA'
+          this.DriverNumber=res.devices[0].contact_number
+        }
+        // //console.log("device obj =>",res.devices);
+        this.deviceObj.push(Alldevices);
+        for (var i = 0; i < res.devices.length; i++) {
+          Alldevices = {
+            id: res.devices[i]._id,
+            viewValue: res.devices[i].Device_Name ? res.devices[i].Device_Name : "",
+            iconType: res.devices[i].iconType,
+            deviceId: res.devices[i].Device_ID
+          }
+          this.deviceObj.push(Alldevices)
+        }
+
+        this.final = res.devices;
+      
+        for (let i = 0; i < this.final.length; i++) {
+          this.final[i]['checked'] = true;
+          // this.deviceList = this.final;
+        
+          if (this.final[i].type_of_device == "Tracker") {
+            let a = {
+              value: this.final[i].Device_Name,
+              viewValue: this.final[i].Device_Name,
+              did: this.final[i].Device_ID,
+              id: this.final[i]._id,
+              user: this.final[i].user,
+              email: this.final[i].Email_ID,
+              deviceType: this.final[i].type_of_device,
+              iconType: this.final[i].iconType
+
+            }
+
+            this.foods.push(a);
+         
+          }
+
+        }
+        
+        console.log('this.deviceList=>=>',this.deviceList);
+        let that= this;
+        if((this.navId === undefined)||(this.navId != 'locationHistory')){
+
+          // console.log(this.fin, this.fin);
+          // this.deviceList.filter((dl,index)=>{
+          //   console.log(dl,index);
+          //   if(dl.Device_ID === this.fin){
+          //     that.deviceList[index]['checked'] = true;
+          //   } 
+          // })
+          console.log("1111111188888");
+          this.livetrack(this.fin);
+        }
+       
+        for (let y = 0; y < this.foods.length; y++) {
+          if (this.foods[y].did == this.fin) {
+            this.new = this.foods[y];
+          }
+
+        }
+      }, err => {
+        // this.Load = false;
+        // //console.log(err);
+      })
+  }
+
+  filterDevices(dlr) {
+    
+    console.log("=========>",dlr,this.foods);
+    if (dlr.length == 0) {
+      this.deviceSelect = [];
+    }
+    if (dlr) {
+      const filterdealerValue: any = dlr;
+      this.deviceSelect = [];
+      if((this.navId === 'locationHistory')){
+        this.deviceSelect = this.foods.filter(function (pp) {
+          var t = pp.viewValue.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+          return t > -1;
+        });
+  
+        // this.buindhistoryDevice = this.deviceSelect;
+        console.log("this.deviceSelectthis.deviceSelectthis.deviceSelect",this.deviceSelect);
+        return this.deviceSelect;
+
+      }else{
+        this.deviceSelect = this.deviceList.filter(function (pp) {
+          var t = pp.Device_ID.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+          return t > -1;
+        });
+  
+        this.buindhistoryDevice = this.deviceSelect;
+        console.log("this.deviceSelectthis.deviceSelectthis.deviceSelect",this.deviceSelect);
+        // localStorage.setItem('devDetail',JSON.stringify({vehicleId:this.deviceSelect[0].did, 
+        // vehicleName: this.deviceSelect[0].value,
+        // vehicleType: this.deviceSelect[0].deviceType}))
+        // this.imei=this.deviceSelect[0].did
+        // console.log("IMEI===>",this.imei);
+        
+        return this.deviceSelect;
+      }
+ 
+    }
+  }
+  count: number = 0;
+  iconSelector(status, iconType, msg) {
+  
+
+    // var tempSpeed = msg.speed;
+    // var tempIgn = msg.ignition;
+    var iconUrl = "";
+    // if(status !="OUT OF REACH"){
+    //   if (((msg.speed != undefined) && (msg.speed != null)) && ((msg.ignition != null)&&(msg.ignition != undefined))) {
+    //     if (parseInt(msg.ignition) == 0) {
+    //       status = "STOPPED"
+    //     }
+    //     else if (msg.ignition == "1" && parseInt(msg.speed) > 0) {
+    //       status = "RUNNING";
+    //     } else {
+    //       status = "IDLING"
+    //     }
+    //   }
+    // }
+
+    if (status == "OUT OF REACH") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/obike.png';
+        return iconUrl;
+      }
+      if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/ocar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/obus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/otruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/otractor.png';
+        return iconUrl;
+      }  else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/ourjcb.png';
+        return iconUrl;
+      }
+      else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_b.png';
+        return iconUrl;
+      }
+    else {
+        iconUrl = '/assets/images/liveTrackIcons/user_b.png';
+        return iconUrl;
+      }
+
+    } else if (status == "STOPPED") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/sbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/scar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/sbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/struck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/stractor.png';
+        return iconUrl;
+      }else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/stoppedjcb.png';
+        return iconUrl;
+      }   else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_r.png';
+        return iconUrl;
+      }else {
+        iconUrl = '/assets/images/liveTrackIcons/user_r.png';
+        return iconUrl;
+      }
+    } else if (status == "RUNNING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/rbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/rcar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/rbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/rtruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/rtractor.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/images/liveTrackIcons/runningjcb.png';
+        return iconUrl;
+
+      }  else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_g.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    } else if (status == "IDLING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/ibike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/icar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/ibus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/itruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/itractor.png';
+        return iconUrl;
+      }else if(iconType == "jcb" ){
+        iconUrl = '/assets/images/liveTrackIcons/idlingjcb.png';
+        return iconUrl;        
+
+      } else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_y.png';
+        return iconUrl;
+      }  else {
+        iconUrl = '/assets/images/liveTrackIcons/user_y.png';
+        return iconUrl;
+      }
+    }else if (status == "NO DATA") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    }
+  }
+
+  playPause: boolean = true;
+  startCreatingFlightPath: boolean = false;
+  createTrip(dev) {
+    console.log('devicedevicedevice=>', dev);
+
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+
+
+    var vehicleLatLng = {
+      lat: this.latToPass,
+      long: this.longToPass
+    }
+
+    var tttt = this;
+
+    DeviceObj['LatLng'] = vehicleLatLng;
+
+    // let dialogRef = this.dialog.open(CreateTripComponent, {
+    //   width: '900px',
+    //   data: DeviceObj
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+    //   var parseTripInfoString = JSON.parse(result);
+
+    //   if (parseTripInfoString.msg == "created") {
+    //     tttt.playPause = !tttt.playPause;
+    //     this.showSocketData = false
+    //     let action: any;
+    //     this.snackBar.open('Trip Created', action, {
+    //       duration: 5000,
+    //     });
+    //     tttt.getDevicebyId()
+    //     // tttt.drawFlightPath(result) ;
+    //   }
+    // });
+  }
+
+  endTrip() {
+    // //console.log("Inside function");
+    var bUrl = "https://www.oneqlik.in/user_trip/updatePlantrip";
+    var userId = this.useridd;
+    var startLat = this.EndTripStartLat;
+    var startLong = this.EndTripStartLong;
+    var endLat = this.latToPass;
+    var endLong = this.longToPass;
+    var duration = this.ETA;
+    var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(startLat, startLong), new google.maps.LatLng(this.latToPass, this.longToPass));
+    // //console.log('distance',distance);
+    var trip_id = this.tripId;
+
+    var payload = {
+      "user": userId,
+      "device": this.IMEI,
+      "start_loc": {
+        "lat": startLat,
+        "long": startLong
+      },
+      "end_loc": {
+        "lat": endLat,
+        "long": endLong,
+      },
+      "duration": duration,
+      "distance": distance,
+      "trip_status": "completed",
+      "trip_id": trip_id
+    }
+
+    this.contactService.endTrip(payload).subscribe(res => {
+      this.playPause = !this.playPause;
+
+      let action: any;
+      this.snackBar.open('Current Trip Completed', action, {
+        duration: 5000,
+
+      });
+
+      this.ngOnInit();
+
+    }, err => {
+      // //console.log(err);
+
+    })
+
+
+  }
+  IMEI: any;
+  getDevicebyId() {
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+    if (DeviceObj != undefined) {
+      // //console.log('DeviceObj',DeviceObj);
+      this.contactService.getdevById(DeviceObj.vehicleId).subscribe((res:any) => {
+        console.log("lastTripStatus",res);
+        // this.getLastTrip();\
+        var tempObj = JSON.parse(res['_body']);
+        this.distanceVariation=tempObj.distanceVariation?tempObj.distanceVariation:undefined
+        
+
+        this.IMEI = tempObj._id;
+
+        this.getLastTrip(this.IMEI);
+
+      }, err => {
+        //console.log(err);
+      })
+    } else {
+      //console.log('No trip found');
+    }
+
+
+  }
+
+  getLastTrip(imei) {
+    console.log("IMEI==>",imei);
+    
+    this.contactService.getLastTripStatus('last_trip', 'Started', imei).subscribe(res => {
+      console.log("lastTripStatus", res);
+      if (res.message != "No Trip Found") {
+        this.playPause = false;
+        this.tripId = res[0]._id;
+        this.drawFlightPath(JSON.stringify(res));
+      } else {
+        this.playPause = true;
+      }
+      var outerThis = this;
+      this.deviceList.filter(function (colHilight, i) {    
+        if (colHilight.Device_ID === imei) {
+          outerThis.deviceList[i].playPause = outerThis.playPause;
+        }
+      })
+    }, err => {
+      //console.log(err);
+    })
+  }
+
+  drawFlightPath(tripInfo) {
+    // //console.log('tripInfo',this.mapNew);
+    this.directionsService = new google.maps.DirectionsService;
+    this.directionsDisplay = new google.maps.DirectionsRenderer({
+      // draggable: true,
+      map: this.mapNew,
+      suppressMarkers: true
+    });
+    google.maps.event.addListener(this.directionsDisplay, 'click', function (h) {
+      // //console.log(h.latLng.lat(),h.latLng.lng());
+    });
+    // this.computeTotalDistance(this.directionsDisplay.getDirections());
+
+    this.directionsDisplay.addListener('directions_changed', function () {
+      // this.computeTotalDistance(this.directionsDisplay.getDirections());
+    });
+
+    var sourceLat;
+    var sourceLong;
+    var getDestPoint = JSON.parse(tripInfo);
+    // //console.log('getDestPoint',getDestPoint);
+    if (this.latToPass == undefined) {
+      sourceLat = getDestPoint[0].start_lat;
+      this.EndTripStartLat = sourceLat;
+    } else {
+      sourceLat = this.latToPass;
+      this.EndTripStartLat = sourceLat;
+    }
+    if (this.longToPass == undefined) {
+      sourceLong = getDestPoint[0].start_long;
+      this.EndTripStartLong = sourceLong;
+    } else {
+      sourceLong = this.longToPass;
+      this.EndTripStartLong = sourceLong;
+    }
+    var sourcePoint = new google.maps.LatLng(sourceLat, sourceLong);
+    var that = this;
+    var end_location_lat = getDestPoint.reponse ? getDestPoint.reponse.doc.end_lat : getDestPoint[0].end_lat;
+    var end_location_long = getDestPoint.reponse ? getDestPoint.reponse.doc.end_long : getDestPoint[0].end_long;
+    //  //console.log(sourceLat, sourceLong,end_location_lat,end_location_long);
+    var destPoint = new google.maps.LatLng(end_location_lat, end_location_long);
+    var distance = google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(sourceLat, sourceLong), new google.maps.LatLng(end_location_lat, end_location_long));
+    this.directionsService.route({
+      origin: sourcePoint,
+      destination: destPoint,
+      travelMode: 'DRIVING',
+      avoidTolls: true
+    }, function (response, status) {
+      if (status === 'OK') {
+        that.ETA = response.routes[0] ? response.routes[0].legs[0].duration.text : '';
+        // //console.log("response",that.ETA);
+        that.directionsDisplay.setDirections(response);
+        that.ShowInfo(that.ETA, distance);
+      } else {
+
+        alert('Could not display directions due to: ' + status);
+      }
+    });
+
+
+  }
+
+  ShowInfo(eta, distance) {
+    var distanceInKm = distance / 1000;
+    let d = '<div class="infoB">' +
+      '<p class="DeviceHead1">' + 'TRIP INFO' + '</p>' +
+      '<div class="row rowTwo">' +
+      '<div class="col-sm-5">' +
+      "Total Distance" +
+      '</div>' +
+      '<div class="col-sm-7 leftPadding">' +
+      distanceInKm.toFixed(2) + " " + "Kms." +
+      '</div>' +
+      '</div>' +
+      '<div class="row rowOne">' +
+      '<div class="col-sm-5">' +
+      'ETA' +
+      '</div>' +
+      '<div class="col-sm-7 leftPadding">' +
+      eta +
+      '</div>' +
+      '</div>' +
+      '</div>'
+
+    // var customTxt = `<div style="display: contents;background: #ebebeb;border: 1px solid #dcd4d4; box-shadow: 2px 2px #cabdbd;"> <p style="border-bottom: 1px solid #c8c3c3;text-align: center;margin-bottom: 0px;">Detail</p> <table> <tbody> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Total Distance" style="padding-left: 1rem"><i class="fa fa-road" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+this.total_dis+`</td> <td style="padding-left: 1rem">Kms.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Running Time" style="padding-left: 1rem"><i style="color:green" class="fas fa-car"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem">Hrs.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Stoppage Time" style="padding-left: 1rem"><i style="color:red" class="fas fa-car"></i></td> <td style="padding-left: 1rem">`+this.ideal_time+`</td> <td style="padding-left: 1rem">Min.</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Average Speed" style="padding-left: 1rem"><i class="fas fa-tachometer-alt" style="color:green"></i></td> <td style="padding-left: 1rem">`+this.avg_speed+`</td> <td style="padding-left: 1rem">Km/Hr</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="No. of Parking" style="padding-left: 1rem"><i class="fas fa-parking"></i></td> <td style="padding-left: 1rem">`+this.stoppageCount+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Max Speed" style="padding-left: 1rem"><i class="fa fa-tachometer-alt" style="color:red" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+this.maxSpeedd+`</td> <td style="padding-left: 1rem">Km/Hr</td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Sudden Break" style="padding-left: 1rem"><i class="fas fa-stop"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Sudden Acceleration" style="padding-left: 1rem"><i class="fa fa-flag-checkered" aria-hidden="true"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem"></td> </tr> <tr style="text-align: center;border-bottom: 1px solid #c8c3c3;"> <td title="Fuel Consumption" style="padding-left: 1rem"><i class="fas fa-gas-pump"></i></td> <td style="padding-left: 1rem">`+'NA'+`</td> <td style="padding-left: 1rem">Liter</td> </tr> </tbody> </table> </div>`
+    // that.mapNew.controls[google.maps.ControlPosition.LEFT_TOP].push(d);
+    var centerControlDiv = document.createElement('div');
+    var centerControl = new CenterControl(centerControlDiv, this.mapNew, d);
+    centerControl.zIndex = 1;
+    this.mapNew.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(centerControlDiv);
+
+    function CenterControl(controlDiv, map, text) {
+
+      // Set CSS for the control border.
+      var controlUI = document.createElement('div');
+      controlUI.style.backgroundColor = '#fff';
+      controlUI.style.border = '2px solid #fff';
+      controlUI.style.borderRadius = '3px';
+      controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
+      controlUI.style.cursor = 'pointer';
+      controlUI.style.marginBottom = '22px';
+      controlUI.style.textAlign = 'left';
+      controlUI.style.marginLeft = '11px';
+      controlUI.style.opacity = "0.9";
+      controlDiv.appendChild(controlUI);
+
+      // Set CSS for the control interior.
+      var controlText = document.createElement('div');
+      controlText.style.color = 'rgb(25,25,25)';
+      controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
+      controlText.style.fontSize = '16px';
+      controlText.style.lineHeight = '38px';
+      controlText.style.paddingLeft = '5px';
+      controlText.style.paddingRight = '5px';
+      controlText.innerHTML = text;
+      controlUI.appendChild(controlText);
+
+      // Setup the click event listeners: simply set the map to Chicago.
+    }
+  }
+
+
+  idlePlot(fromtime, totime, deviceObjectid, min_time, map) {
+    this.contactService.ignitionPoint(this.useridd, fromtime, totime, deviceObjectid, min_time).subscribe(res => {
+      var ignPoint = res;
+      //console.log(ignPoint);
+
+      if (ignPoint.length > 0) {
+
+
+        for (var p = 0; p < ignPoint.length; p++) {
+
+          let idelImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + 'I' + "|FFFF00|000000");
+          let infowindow_idel = new google.maps.InfoWindow();
+          const myOptions = {
+            zoom: 15,
+            center: new google.maps.LatLng(18.602941, 73.777147),
+            mapTypeId: google.maps.MapTypeId.ROADMAP
+          };
+
+
+
+          // isMapInit = true;
+
+          // ============================
+
+
+          var marker_idle: any, k: any;
+          var l: number
+
+          var latitude_idle = ignPoint[p].lat;
+          var longitude_idle = ignPoint[p].long;
+          var arrivalTime_idle = new Date(ignPoint[p].start_time).toLocaleString();
+
+          var departureTime_idle = new Date(ignPoint[p].end_time).toLocaleString();
+
+
+          // var fd_idle = new Date(arrivalTime_idle).getTime();
+          // var td_idle = new Date(departureTime_idle).getTime();
+          // var time_difference_idle = td_idle - fd_idle;
+          // var total_min_idle = time_difference_idle / 60000;
+          // var hours = total_min_idle / 60
+          // var minutes = (hours - rhours) * 60;
+          // var rhours = Math.floor(hours);
+          // var rminutes = Math.round(minutes);
+
+          var Durations_idle = this.millisecondConversion(ignPoint[p].idle_time)
+
+          marker_idle = new google.maps.Marker({
+            position: new google.maps.LatLng(ignPoint[p].lat, ignPoint[p].long),
+            map: map,
+            icon: idelImage,
+          });
+
+          var content_idle = '<div ><div> Idle Start-: '
+            + arrivalTime_idle + '</div><br><div>Idle End-: '
+            + departureTime_idle + '</div><br><div>Time Duration (HH:MM:SS)-: '
+            + Durations_idle + ' </div></br><div> Latitude-: '
+            + latitude_idle + ' </div></br><div> Longitude-: '
+            + longitude_idle + ' </div><div>'
+
+
+          google.maps.event.addListener(marker_idle, 'click', (function (marker, content_idle, infowindow_idel) {
+            return function () {
+              geocodePosition(marker.getPosition(), function (result) {
+                infowindow_idel.setContent(content_idle);
+                infowindow_idel.open(map, marker, content_idle);
+              });
+
+
+            }
+          })(marker_idle, content_idle, infowindow_idel));
+
+        }
+
+        marker_idle.setMap(map);
+      }
+
+    })
+
+    function geocodePosition(pos, callback) {
+      var geocoder = new google.maps.Geocoder();
+      geocoder.geocode({
+        latLng: pos
+      }, function (responses) {
+        callback(responses[0].formatted_address)
+
+      });
+    }
+
+  }
+
+  millisecondConversion(duration) {
+    // //console.log('duration=>',duration)
+    // //console.log(typeof(duration));
+    //  var milliseconds = ((duration % 1000) / 100);
+    var seconds = Math.floor((duration / 1000) % 60);
+    var minutes = Math.floor((duration / (1000 * 60)) % 60);
+    var hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
+
+    hours = (hours < 10) ? 0 + hours : hours;
+    minutes = (minutes < 10) ? 0 + minutes : minutes;
+    seconds = (seconds < 10) ? 0 + seconds : seconds;
+    // //console.log(hours, minutes,seconds);
+    return hours + ":" + minutes + ":" + seconds;
+
+  }
+
+
+  // testMap(){
+
+  //   var markerPoint = new google.maps.LatLng(18.602941, 73.777147) ; 
+  //   const myOptions = {
+  //     zoom: 15,
+  //     center: new google.maps.LatLng(18.602941, 73.777147),
+  //     mapTypeId: google.maps.MapTypeId.ROADMAP
+  //   };
+
+  //  var testmap = new google.maps.Map(document.getElementById('testmap'), myOptions);
+
+
+  //   var icon1 = {
+  //     url: "./assets/image/activeCar.png", // url
+  //     scaledSize: new google.maps.Size(50, 50), // scaled size
+
+  //   };
+  //   var marker = new google.maps.Marker({
+  //     position: markerPoint,
+  //     map: testmap,
+  //     icon: icon1,
+  //     title: "Vehicle"
+  //   });
+
+  // }
+
+
+  AllVeh: any = [{ 'status': 'Running', 'totalCount': '0' }, { 'status': 'Idle', 'totalCount': '0' }, { 'status': 'Stopped', 'totalCount': '0' }, { 'status': 'Inactive', 'totalCount': '0' }, { 'status': 'No data', 'totalCount': '0' }]
+
+  deviceData = [
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7681',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7682',
+      'lastSpeed': '50',
+      'gpsIconColor': 'grey',
+      'acIconColor': 'green',
+      'powerIconColor': 'purple',
+      'gsmIconColor': 'blue',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7683',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'red',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'grey',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7684',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7685',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7686',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'grey',
+      'powerIconColor': 'green',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7687',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7688',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'green',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'red',
+      'vehNo': 'test 7689',
+      'lastSpeed': '50',
+      'gpsIconColor': 'blue',
+      'acIconColor': 'grey',
+      'powerIconColor': 'grey',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'red'
+    },
+    {
+      'vehIconColor': 'blue',
+      'vehNo': 'test 7610',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'grey',
+      'vehNo': 'test 7611',
+      'lastSpeed': '50',
+      'gpsIconColor': 'green',
+      'acIconColor': 'grey',
+      'powerIconColor': 'blue',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    },
+    {
+      'vehIconColor': 'green',
+      'vehNo': 'test 7612',
+      'lastSpeed': '50',
+      'gpsIconColor': 'red',
+      'acIconColor': 'grey',
+      'powerIconColor': 'red',
+      'gsmIconColor': 'red',
+      'ignIconColor': 'green'
+    }
+
+
+
+  ];  
+  myInput: any;
+
+  updateLiveTracking(device,ev) {
+    this.showAddress=true
+    var that = this;
+    this.openRightMenu()
+    if(device){
+        console.log(device);
+         this.selectedDevice=device._id
+        this.parkingButtonShow=device.theftAlert==null?'grey':device.theftAlert==undefined?'grey':device.theftAlert==true?'green':'red'
+          this.DriverName=device.driver_name;
+           console.log("DRIVER NAME",this.DriverName,device.ac);
+           this.ac=device.ac?device.ac:'NA'
+           this.DriverNumber=device.contact_number
+
+        }
+   
+    console.log('this.markerArray________________________--',this.socketData);
+    this.showSocketData = true;
+    if(this.socketData)
+    this.socketData.date=new Date()
+    this.flightPathArr = [];
+    // localStorage.setItem('devDetail',device)
+    this.temptrackingDev = device.Device_ID;
+    var td= this.filterDevices(device.Device_ID);
+    this.tempDevInfo =td[0];
+    this.deviceList.filter((dl,index)=>{  
+      if(dl.Device_ID == device.Device_ID){
+        var ilock =that.deviceList[index].ignitionLock;
+        if((ilock === '1')&&(ev === 'lockchange')){
+        
+          that.deviceList[index].ignitionLock = '0';
+        }
+        if((ilock === '0')&&(ev === 'lockchange')){
+         
+          that.deviceList[index].ignitionLock = '1';
+        }
+        that.deviceList[index].checked = true;
+       
+      }else{
+        that.deviceList[index].checked = false;
+      }
+    
+    })
+    
+    
+    if((this.navId === undefined)||(this.navId != 'locationHistory')){
+      console.log("1111111199999");
+      this.livetrack(device.Device_ID);
+    }
+    this.getLastTrip(device.Device_ID);
+  }
+
+  getVehColor(colorid, devicestatus) {
+
+    if (colorid == 'vehStatus') {
+      var devStatus = devicestatus.split(" ");
+      var styleColor = (devStatus[0] == 'OUT') ? 'blue' : (devStatus[0] == 'RUNNING') ? 'green' : (devStatus[0] == 'STOPPED') ? 'red' : (devStatus[0] == 'IDLING') ? 'yellow' : 'grey';
+
+      return styleColor;
+    }
+
+    if (colorid == 'gpsStatus') {
+
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'acStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'ignStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'powerStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+
+    }
+
+    if (colorid == 'gsmStatus') {
+      var styleColor = (devicestatus == 0) ? 'red' : (devicestatus == 1) ? 'green' : 'grey';
+      return styleColor;
+    }
+
+  }
+
+
+  getGraphFunction() {
+    this.contactService.getDashboard(this.emailid, this.from, this.to, this.useridd, this.groupId, this.supadmin, this.dealerid).subscribe(
+      data => {
+        console.log("data===",data)
+        this.devicess = data;
+        this.total_vech = this.devicess.Total_Vech;
+        this.idle_vech = this.devicess["Ideal Devices"];
+        this.off_vech = this.devicess["OFF Devices"];
+        this.maintanance = this.devicess["Maintance Device"];
+        this.expiredDevices = this.devicess["expire_status"];
+        this.OutOfReach = this.devicess["OutOfReach"];
+        this.no_data = this.devicess["no_data"];
+        this.Running = this.devicess["running_devices"];
+        this.idle_duration = this.devicess.idle_duration;
+        this.off_duration = this.devicess.off_duration;
+
+        let a = this.idle_vech + this.off_vech + this.maintanance + this.OutOfReach
+        let b = this.total_vech - a;
+
+        // this.idle_ids = this.devicess.idle_name
+        // this.maintenance_ids = this.devicess.maintenance_name
+        // this.expired_ids = this.devicess.expire_name
+        // this.off_ids = this.devicess.off_name
+        // this.runnigg = this.devicess.runnig_name
+        // this.outofreach_ids = this.devicess.outOfReach_name
+        // this.alldevvice = this.devicess.All_Device_name
+        // this.no_gps_name = this.devicess.no_gps_name;
+        // this.id_running = this.devicess.running_id;
+        // this.id_stop = this.devicess.off_ids;
+        // this.id_out = this.devicess.outofreach_ids;
+        // this.id_main = this.devicess.maintenance_ids;
+        // this.id_idel = this.devicess.idle_ids;
+
+        // this.loading = this.devicess.running_details.forward.count;
+        // this.unloading = this.devicess.running_details.reverse.count;
+        // this.not_on_root = this.devicess.running_details.not_on_route.count;
+        this.AllVeh[0].totalCount = this.Running;
+        this.AllVeh[1].totalCount = this.idle_vech;
+        this.AllVeh[2].totalCount = this.off_vech;
+        this.AllVeh[3].totalCount = this.OutOfReach;
+        this.AllVeh[4].totalCount = this.no_data;
+        console.log("DAtatatatat---",this.AllVeh);
+        
+
+      });
+  }
+  groupId: any;
+  skip: number = 0;
+  limit: number = 100;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  devReady:boolean=true;
+  groups=[]
+  getDeviceBYfilter(i,iden) {
+    //console.log('iden=>',iden);
+    this.currStatus = i;
+    if (i == 6) {
+      this.skip = 0;
+    }
+    var vehStatus: string;
+    if(i!=undefined){
+      vehStatus  = (i.toUpperCase() == 'INACTIVE') ? "OUT OF REACH" : (i.toUpperCase() == 'IDLE') ? "IDLING" : i.toUpperCase();
+    }else{
+      vehStatus = null;
+
+    }
+    
+    var status_1 = false;
+    if(iden === 'tclick'){
+      this.showSocketData = false;
+    
+    }
+    else{
+      this.showSocketData = true;
+    }
+    this.deviceList =[];
+    this.foods=[];
+    //console.log('this.navId',this.navId);
+    if(this.navId == 'locationHistory'){
+      iden='tclick';
+      this.devReady= false;
+      this.limit = 10000;
+    };
+  
+    // //console.log('limitfgdfgdfgdgdgdgfdgfdgdgfdgfdgdfg',this.limit);
+    this.contactService.getDeviceByFilter_dash(vehStatus, this.emailid, this.useridd, this.skip, this.limit, this.myInput, this.supadmin, this.dealerid, status_1)
+      .subscribe(res => {
+        console.log("INside devList");
+        var aaaa = res;
+        this.deviceList = aaaa.devices;
+
+        this.devReady= true;
+        if (this.deviceList.length === 0) {
+          this.lastcall = false;
+          this.firstcall = true
+        }
+        this.foods=[];  
+  
+        for (var k = 0; k < this.deviceList.length; k++) { 
+
+          // if(this.deviceList[k].vehicleGroup){
+          //   if(!this.groups.includes({name:this.deviceList[k].vehicleGroup.name,id:this.deviceList[k].vehicleGroup._id}))
+          //    this.groups.push({name:this.deviceList[k].vehicleGroup.name,id:this.deviceList[k].vehicleGroup._id})
+          // }
+        
+          this.deviceList[k]['playPause'] = true; 
+          this.deviceList[k]['checked']  =true;
+          if(iden === 'tclick'){
+            if (this.deviceList[k].type_of_device == "Tracker") {
+              let a = {
+                value: this.deviceList[k].Device_Name,
+                viewValue: this.deviceList[k].Device_Name,
+                did: this.deviceList[k].Device_ID,
+                id: this.deviceList[k]._id,
+                user: this.deviceList[k].user,
+                email: this.deviceList[k].Email_ID,
+                deviceType: this.deviceList[k].type_of_device,
+                iconType: this.deviceList[k].iconType,
+              //  checked: true 
+              }
+              this.foods.push(a);
+              if(k === (this.deviceList.length -1)){
+                console.log("1111111110100000");
+                if(this.navId!='locationHistory')
+                {
+                  this.showSocketData=false
+                }
+                this.livetrack(null);
+              }
+             
+           
+            }
+
+          }
+         
+  
+          
+        }
+        if(this.deviceList.length==1){
+          this.selectedDevice=this.deviceList[0]._id
+          this.parkingButtonShow=this.deviceList[0].theftAlert==null?'grey':this.deviceList[0].theftAlert==undefined?'grey':this.deviceList[0].theftAlert==true?'green':'red'
+          this.DriverName=this.deviceList[0].driver_name;
+           console.log("DRIVER NAME",this.DriverName,this.deviceList[0].ac);
+           this.ac=this.deviceList[0].ac?this.deviceList[0].ac:'NA'
+           this.DriverNumber=this.deviceList[0].contact_number
+
+        }
+         this.selectAllVehicles({checked:true})
+
+        console.log('this.deviceList',this.deviceList,'GROUP===',this.groups);
+     
+      })
+
+  }
+
+  getDevicebyIdComingFromDashboard() {
+    this.buindhistoryDevice = [];
+    var DeviceObj = JSON.parse(localStorage.getItem('devDetail'));
+    if (DeviceObj != undefined) {
+      this.contactService.getdevById(DeviceObj.vehicleId).subscribe((res:any) => {
+        var tempObj = JSON.parse(res['_body']);
+        this.distanceVariation=tempObj.distanceVariation?tempObj.distanceVariation:undefined
+        tempObj['checked']=true
+        //console.log('tempObjtempObjtempObjtempObj', tempObj);
+        this.temptrackingDev = tempObj.Device_ID;
+        this.buindhistoryDevice.push(tempObj);
+        this.deviceList.push(tempObj);
+        //console.log('this.deviceList', this.deviceList);
+      }, err => {
+        //console.log(err);
+      })
+    } else {
+      this.getDeviceBYfilter('','');
+    }
+  }
+
+
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    this.getDeviceBYfilter(this.currStatus,'tclick');
+  }
+
+  refresh() {
+    this.getGraphFunction();
+    this.getDeviceBYfilter(this.currStatus,'');
+  }
+
+  pre() {
+    if (this.skip > 0) {
+      this.skip -= 1;
+      this.getDeviceBYfilter(this.currStatus,'tclick');
+      this.lastcall = false;
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+  }
+
+
+  searchFilter(text: string, strID) {
+    //console.log(text);
+    var searchobj = {
+      str: text,
+      identifier: strID
+
+    }
+    var tempSearch = JSON.stringify(searchobj);
+    //console.log("Inside function");
+    this.modelChanged.next(tempSearch);
+
+  }
+
+  geoArr: any;
+  getGeofence_1() {
+    this.geoArr = [];
+    this.contactService.getallgeofence(this.useridd).subscribe(
+
+      data => {
+        this.geoArr = data
+        //console.log("this.geoArr this.geoArr this.geoArr", this.geoArr);
+        // this.geo_status = this.devicesss.status;
+
+      });
+  }
+
+  currentPage: any = 1;
+
+  getTab(ev) {
+
+    this.currentPage = ev;
+    this.playingHistory = false;
+    this.flag = '';
+    this.showHistory = false;
+    var outerThis = this;
+    if ((ev == 0) || (ev == 1)) {
+      clearTimeout(this.start);
+      this.historyDataCondition = false;
+      if (ev == 0) {
+        this.headingName = 'Live Tracking';
+        this.showSocketData = true;
+        if((this.navId === undefined)||(this.navId != 'locationHistory')){
+          console.log("1111111111-11-");
+          this.livetrack(this.temptrackingDev);
+        }
+     
+        // this.refresh_map();
+      }
+      if (ev == 1) {
+        this.headingName = 'Geofences';
+        // this.refresh_map();  
+        this.showSocketData = false;
+
+      }
+    }
+    if (ev == 2) {
+      this.showHistory = true;
+
+      this.showSocketData = false;
+      this.headingName = 'History Tracking';
+      this.tempMapHistory = [];
+      this.dataArrayCoords = [];
+      if (this.buindhistoryDevice != undefined) {
+        if (this.buindhistoryDevice.length != 0) {
+          this.deviceName = this.buindhistoryDevice[0].Device_Name;
+        }
+        this.deviceSelect = this.buindhistoryDevice;
+      }
+      this.disableSearch = true;
+      navigator.geolocation.getCurrentPosition(function (position) {
+        var myOptions = {
+          zoom: 18,
+          center: {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          },
+          mapTypeId: google.maps.MapTypeId.ROADMAP
+        };
+        var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+        var marker = new google.maps.Marker({
+          center: {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          },
+          map: mapHistory,
+          title: "Your current location!",
+        });
+
+      }
+      )
+    }
+  }
+
+  thicknessVal: any = '2px';
+  thicknessArr: any = ['2px', '3px', '4px', '5px', '6px', '7px', '8px', '9px', '10px'];
+  parkingColor: boolean = false;
+  idleColor: boolean = false;
+  dataColor: boolean = false;
+
+  changeColor(id) {
+    if (id === 'parking') { this.parkingColor = !this.parkingColor };
+    if (id === 'idle') { this.idleColor = !this.idleColor };
+    if (id === 'datapoint') { this.dataColor = !this.dataColor };
+  }
+
+  removetracks(id1, arrIndex) {
+    //console.log('id1', id1);
+    //console.log('arrIndex', arrIndex);
+    if ((id1 === 'all') && (arrIndex == null)) {
+      clearTimeout(this.start);
+
+      this.tempMapHistory = [];
+      this.playingHistory = false;
+      this.showTable = false;
+      this.coloumnClicked = false;
+      this.refresh_map();
+    }
+    if (id1 === 'single') {
+      clearTimeout(this.start);
+      this.tempMapHistory.splice(arrIndex, 1);
+      //console.log('this.tempMapHistory', this.tempMapHistory);
+      if (this.tempMapHistory.length === 0) {
+        this.refresh_map();
+        this.playingHistory = false;
+        this.showTable = false;
+        this.coloumnClicked = false;
+      }
+    }
+  }
+
+
+  refresh_map() {
+    navigator.geolocation.getCurrentPosition(function (position) {
+      var myOptions = {
+        zoom: 18,
+        center: {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        },
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      var mapHistory = new google.maps.Map(document.getElementById("map2"), myOptions);
+
+      var marker = new google.maps.Marker({
+        center: {
+          lat: position.coords.latitude,
+          lng: position.coords.longitude
+        },
+        map: mapHistory,
+        title: "Your current location!",
+      });
+
+    })
+  }
+
+  changeDate(dateid) {
+    var tempDate = new Date();
+
+    if (dateid == 'today') {
+      var td = new Date();
+      this.datefrom = new Date(td.setHours(0, 0, 0));
+      this.date2 = new Date();
+      //console.log('this.datefrom', this.datefrom);
+    }
+    if (dateid == 'yesterday') {
+      var yt = moment().subtract(1, 'days');
+      var ptt = new Date(yt).setHours(0, 0, 0);
+      this.datefrom = new Date(ptt);
+      var ttt = new Date(yt).setHours(23,59,59);
+      this.date2 = new Date(ttt);
+    
+      //console.log('this.datefrom', this.datefrom);
+    }
+    if (dateid == 'week') {
+      var wd = moment().startOf('week')
+      this.datefrom = new Date(wd);
+      //console.log('this.datefrom', this.datefrom);
+      this.date2 = new Date();
+    }
+    if (dateid == 'month') {
+      var md = moment().startOf('month').format();
+      this.datefrom = new Date(md);
+      //console.log('this.datefrom', this.datefrom);
+      this.date2 = new Date();
+
+    }
+  }
+  coloumnClicked = false;
+
+  plotHistory(arrindex) {
+
+    var ft1 = new Date(this.tempMapHistory[arrindex].fromTime)
+    var tt1 = new Date(this.tempMapHistory[arrindex].toTime)
+    this.datefrom = ft1;
+    this.date2 = tt1;
+
+    this.thicknessVal = this.tempMapHistory[arrindex].lineThickness;
+    this.idleColor = this.tempMapHistory[arrindex].idleColor;
+    this.parkingColor = this.tempMapHistory[arrindex].parkingColor;
+    this.dataColor = this.tempMapHistory[arrindex].dataColor;
+    this.coloumnClicked = true;
+
+    this.maphistory('');
+
+  }
+
+
+  engineCutStatus = '';
+  engineCut(device) {
+    this.engineCutStatus = device.ignitionLock;
+   
+    var identifyType = typeof (device.user);
+    var userId;
+    if (identifyType == 'string') {
+      userId = device.user;
+    } else {
+      userId = device.user._id;
+    }
+
+    var pload = { uid: userId }
+    //console.log(pload);
+    this.contactService.checkForPassword(pload).subscribe(res => {
+      //console.log('resres', res);
+      var engCutPass = res.engine_cut_psd;
+      if ((engCutPass == undefined)||(this.superAdmin ===true)||(this.custtype === true)) {
+        this.immobilizeDevice(device, this.engineCutStatus);
+      } else {
+        // let dialogRef = this.dialog.open(ImmobilizeComponent, {
+        //   data: { engineCutpass: engCutPass }
+        // });
+
+        // dialogRef.afterClosed().subscribe(result => {
+        //   if (result == "succ") {
+        //     this.immobilizeDevice(device, this.engineCutStatus);
+        //   }
+        // });
+      }
+    })
+  }
+
+
+  immobilizeDevice(deviceObj, onOFFcmd) {
+    //console.log('deviceObj', deviceObj);
+    var deviceCommand = (onOFFcmd == '0') ? "OFF" : "ON";
+    var devModelId;
+
+    var identifyModelType = typeof (deviceObj.device_model);
+    var userId;
+    if (identifyModelType == 'string') {
+      devModelId = deviceObj.device_model;
+    } else {
+      devModelId = deviceObj.device_model._id;
+    }
+
+
+    this.contactService.getDeviceModelbyID(devModelId).subscribe(resModel => {
+      var deviceType = resModel[0].device_type;
+      //console.log('resModel', deviceType);
+      var cmdqueObj = {
+        "imei": deviceObj.Device_ID,
+        "_id": deviceObj._id,
+        "engine_status": onOFFcmd,
+        "protocol_type": deviceType
+      }
+
+      this.triggerCmd(cmdqueObj, deviceCommand)
+    })
+
+
+    //console.log("inside immobilize", deviceCommand);
+  }
+
+
+  callLiveTracking= 0;
+  triggerCmd(cmdObj, deviceCommand) {
+    //console.log("inside triggerCmd function");
+   var that = this;
+   this.callLiveTracking= 0;
+  //  var iurl = '../../assets/image/idle_bus.png';
+    // this.Load = true;
+    that.errIcon =false;
+    that.immobilizeCount = 45; 
+    that.immobilizeChk = true;
+    var timer = setInterval(()=>{
+      // //console.log("that.immobilizeCount--",that.immobilizeCount--);
+      that.immobilizeCount--
+      // //console.log('timer Value',that.immobilizeCount--);
+      if( that.immobilizeCount=== 0){
+        clearInterval(timer);
+      }
+    },1000)
+    this.contactService.addCommandQueue(cmdObj).subscribe(res => {
+      // this.Load = false;
+      //console.log(res);
+      var cmdQId = res._id;
+      //console.log('cmdQId', cmdQId);
+      this.intervalTimeOut = setTimeout(function(){
+        let message = "Please Try After Sometime";
+        // let action
+        // that.snackBar.open(message, action, {
+        //   duration: 4000,
+        
+        // });
+        that.errIcon =true;
+        that.showErr  = true;
+        that.ImmErrMsg = message ; 
+        that.shoError = setTimeout(()=>{
+             that.immobilizeChk = false;
+             that.showErr = false;
+            clearTimeout(that.shoError)
+        },5000)
+            clearInterval(that.status_cmdq);
+            clearTimeout(that.intervalTimeOut);    
+
+            clearInterval(timer);
+      },45000)
+
+      that.status_cmdq = setInterval(function () {
+        that.contactService.getEngineCutStatus(cmdQId)
+          .subscribe(res => {          
+          that.locked = false;
+          that.unlocked = false;
+            if (res.status == "SUCCESS") {
+              that.Load = false;
+              var cc = ''
+              if(deviceCommand === 'ON'){
+                cc = 'UNLOCKED';
+                that.unlocked = true;
+              }
+              if(deviceCommand === 'OFF'){
+                cc = 'LOCKED';
+                that.locked = true;
+              }
+              let message = 'Vehicle' + ' ' + cc;
+              // let action;
+              // that.snackBar.open(message, action, {
+              //   duration: 4000,
+              // });
+              that.showErr  = true;
+              that.ImmErrMsg = message ;           
+               that.shoError = setTimeout(()=>{
+                   that.immobilizeChk = false;
+                   that.showErr = false;
+                  clearTimeout(that.shoError);
+              },5000)
+              //console.log("Console after Getting success",that.callLiveTracking);
+       
+              if(that.callLiveTracking === 0){
+                that.callLiveTracking = 1; 
+              
+                that.deviceCQ(cmdObj.imei);
+                that.updateLiveTracking(cmdObj.imei,'lockchange');
+                // that.refresh();
+              
+              }
+           
+              clearInterval(timer);
+              clearTimeout(that.intervalTimeOut)
+              clearInterval(that.status_cmdq);
+              // that.immobilizeChk = false;
+              // that.Load = false
+          
+            }
+          }, err => {
+            that.errIcon =true;
+            let message = "Please Try After Sometime";
+            that.showErr  = true;
+            that.ImmErrMsg = message ; 
+             that.shoError = setTimeout(()=>{
+                 that.immobilizeChk = false;
+                 that.showErr = false;
+                clearTimeout(that.shoError)
+            },5000)
+            let action;
+            that.immobilizeChk = false;
+            clearInterval(timer);
+            // that.snackBar.open(message, action, {
+            //   duration: 4000,
+            // });
+            clearInterval(that.status_cmdq);
+            clearTimeout(that.intervalTimeOut)
+          })
+      }, 3000);
+    })
+  }
+
+
+
+  addressConversion(msg) {
+
+    var outerThis = this;
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(msg.latDecimal, msg.longDecimal);
+
+    var request = {
+      latLng: latlng
+    };
+    // //console.log('latlongVal', request)
+    geocoder.geocode(request, function (data, status) {
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          outerThis.liveAdd = data[0].formatted_address;
+          // //console.log(outerThis.liveAdd);
+        } else {
+          // //console.log("No address available")
+          outerThis.liveAdd = "No address available";
+        }
+      }
+      else {
+        outerThis.liveAdd = 'NA';
+      }
+
+    })
+  }
+
+
+  armDisarm(deviceObj, action) {
+    //console.log('arm disarm');
+    var devimei = deviceObj.Device_ID;
+    var command = (action === 'on') ? 'ARM' : 'DISARM'
+
+    var armDisarmPayload = {
+      "imei": devimei,
+      "cmd": command,
+    }
+
+    var devModelId_1;
+    var identifyModelType = typeof (deviceObj.device_model);
+
+    if (identifyModelType == 'string') {
+      devModelId_1 = deviceObj.device_model;
+    } else {
+      devModelId_1 = deviceObj.device_model._id;
+    }
+    this.contactService.getDeviceModelbyID(devModelId_1).subscribe(resModel => {
+      var deviceType = resModel[0].device_type;
+      armDisarmPayload["protocol_type"] = deviceType;
+      this.triggerArmDisarm(armDisarmPayload);
+
+    })
+  }
+
+
+  triggerArmDisarm(ardPayload) {
+    this.Load = true;
+    this.contactService.armDisarm(ardPayload).subscribe(res => {
+      this.Load = false;
+
+      let message = (ardPayload.cmd == "ARM") ? 'Activated' : 'Deactivated';
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+      });
+      var str = (this.currStatus == undefined) ? '' : this.currStatus;
+      this.getGraphFunction();
+      this.getDeviceBYfilter(str,'');
+
+    }, err => {
+      this.Load = false;
+      //console.log(JSON.parse(err._body));
+      let errMsg = err._body ? JSON.parse(err._body).message : "Plaese Try After Sometime";
+      let action
+      this.snackBar.open(errMsg, action, {
+        duration: 4000,
+      });
+    })
+  }
+
+  enableMapTrail(){
+    this.enabletrail = !this.enabletrail; 
+    if(this.enabletrail == false){
+      this.flightPathArr = [];
+      // this.flightPath_live = new google.maps.Polyline({
+      //   path: this.flightPathArr,
+      //   geodesic: true,
+      //   strokeOpacity: 1.0,
+      //   strokeColor: "#0000FF",
+      //   strokeWeight: 6
+      // });
+    
+      this.flightPath_live.setMap(null);
+
+    }else{
+      var a = []
+      this.draw_flight_trail(a);
+    }
+
+    
+    
+    
+  }
+  flightPath_live:any
+  draw_flight_trail(flightPathArr){
+    var tempTimeInterval ; 
+    var that = this;
+    if(flightPathArr.length != 0){
+      clearTimeout(tempTimeInterval);
+      tempTimeInterval = setTimeout(function(){
+      that.flightPath_live = new google.maps.Polyline({
+        path: flightPathArr,
+        geodesic: true,
+        strokeColor: "#0000FF",
+        strokeOpacity: 1.0,
+        strokeWeight: 6
+      });
+      // //console.log(mapData);
+      that.flightPath_live.setMap(that.mapNew);
+     },6000) 
+     
+    }
+  
+
+  }
+
+
+  saveAddress(lat,lng,address){
+    var addressObj = {
+    "lat":lat,
+    "long":lng,
+    "address":address
+  }
+    this.contactService.saveAdd(addressObj).subscribe(res=>{
+      //console.log(res);
+    },err=>{  
+      //console.log("couldn't save address");
+    })
+
+  }
+
+  convertDate(utcDate){
+    var convertedDate:any;
+    if(utcDate != undefined){
+      convertedDate = new Date(utcDate).toLocaleString();
+    }else{
+      convertedDate = '';
+    }
+    
+    return convertedDate ;
+  }
+  devIcon : any;
+  iconCheck(status, iconType) {
+    
+
+    var devStatus = status.split(" ");
+    if ((iconType == 'car') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    } else if ((iconType == 'car') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    }  else if ((iconType == 'car') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/outOfReach_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_bike.png";
+      return this.devIcon;
+    } else if ((iconType == 'bike') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bike.png";
+      return this.devIcon;
+      // }
+    }  else if ((iconType == 'bike') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/bus_out.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/bus_running.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/bus_stop.png";
+      return this.devIcon;
+    } else if ((iconType == 'bus') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_bus.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'bus') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'truck') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/our_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/running_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/stopped_truck.png";
+      return this.devIcon;
+    } else if ((iconType == 'truck') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/idle_truck.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'truck') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'tractor') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/tractor_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/tractor_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/tractor_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'tractor') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/tractor_yellow.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'ambulance') && (devStatus[0] == "OUT")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "RUNNING")) {
+      
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_g.png";
+      return this.devIcon;  
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "STOPPED")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'ambulance') && (devStatus[0] == "IDLING")) {     
+      this.devIcon = "../../assets/images/liveTrackIcons/ambulance_y.png";
+      return this.devIcon;      
+    } 
+    else if ((iconType == 'tractor') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if((!iconType)&&(devStatus[0] == "OUT")){
+      this.devIcon = "../../assets/image/outOfReach_car.png";
+      return this.devIcon;
+    } else if((!iconType)&&(devStatus[0] == "RUNNING")){
+      this.devIcon = "../../assets/image/running_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "STOPPED")){
+      this.devIcon = "../../assets/image/stopped_car.png";
+      return this.devIcon;
+    }else if((!iconType)&&(devStatus[0] == "IDLING")){
+      this.devIcon = "../../assets/image/idle_car.png";
+      return this.devIcon;
+    }else if ((!iconType) && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }else if ((iconType == 'user') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/user_b.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/user_g.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/user_r.png";
+      return this.devIcon;
+    } else if ((iconType == 'user') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/user_y.png";
+      return this.devIcon;
+      
+    }else if ((iconType == 'user') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }
+    else if ((iconType == 'jcb') && (devStatus[0] == "OUT")) {
+      this.devIcon = "../../assets/image/jcb_blue.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "RUNNING")) {
+      this.devIcon = "../../assets/image/jcb_green.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "STOPPED")) {
+      this.devIcon = "../../assets/image/jcb_red.png";
+      return this.devIcon;
+    } else if ((iconType == 'jcb') && (devStatus[0] == "IDLING")) {
+      this.devIcon = "../../assets/image/jcb_yellow.png";
+      return this.devIcon;
+      
+    }
+    else if ((iconType == 'jcb') && (devStatus[0] == "NO")) {
+      this.devIcon = "../../assets/image/no_data.png";
+      return this.devIcon;
+    }else{
+      this.devIcon = "../../assets/image/noIcon.png";
+      return this.devIcon
+    }
+  }
+
+  locationShare(device){
+
+    let dialogRef = this.dialog.open(ShareLocComponent, {
+      width:'500px',
+      data: { deviceObject: device }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "succ") {
+        this.data_descip = "Location Shared" ;     
+        // this.immobilizeDevice(device, this.engineCutStatus);
+      }
+      function launch_toast() {
+        // //console.log(divid);
+        var x = document.getElementById("toast")
+        ////console.log(x);
+        x.className = "show";
+        setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+      }
+    });
+  }
+
+
+  getAddress(lat,lng){
+  
+    var latlng_1 =
+    {
+      "lat": lat,
+      "long":  lng
+    }
+    this.contactService.getAddressByApi(latlng_1).subscribe(res=>{     
+          if(res.address != undefined){
+            this.historyAdress  = res.address ; 
+          }
+       })
+  }
+
+getSystemLogs(imeiObj){
+  var tDate = new Date();
+  tDate.setSeconds(0);
+  tDate.setMilliseconds(0);
+  var fDate =  new Date().setHours(0,0,0,0);
+  var payLoad = {
+    "draw": 5,
+    "columns": [
+      {
+        "data": "_id"
+      },
+      {
+        "data": "imei"
+      },
+      {
+        "data": "date"
+      },
+      {
+        "data": "latDecimal"
+      },
+      {
+        "data": "longDecimal"
+      },
+      {
+        "data": "insertionTime"
+      },
+      {
+        "data": "syncedAt"
+      },
+      {
+        "data": "integrationResponse"
+      },
+      {
+        "data": "speed"
+      },
+      {
+        "data": "ac"
+      },
+      {
+        "data": "currentFuel"
+      },
+      {
+        "data": "raw"
+      },
+      {
+        "data": "ignition"
+      },
+      {
+        "data": "power"
+      },
+      {
+        "data": "fuelVoltage"
+      },
+      {
+        "data": "rawio"
+      },
+      {
+        "data": "external_Battery"
+      },
+      {
+        "data": "powerCutAlarm"
+      },
+      {
+        "data": "satellites"
+      }
+    ],
+    "order": [
+      {
+        "column": 4,
+        "dir": "asc"
+      }
+    ],
+    "start": 0,
+    "length": 100,
+    "search": {
+      "value": "",
+      "regex": false
+    },
+    "op": {},
+    "select": [],
+    "find": {
+      "imei": imeiObj.Device_ID,
+      "insertionTime": {
+        "$gte": {
+          "_eval": "date",
+          "value": new Date(fDate).toISOString() 
+        },
+        "$lte": {
+          "_eval": "date",
+          "value": tDate.toISOString()
+        }
+      }
+    }
+  }
+  var suburl = '/gps/datatable';
+ 
+  this.contactService.post(suburl, payLoad).subscribe(resp => {
+      //console.log(resp);
+      var tempLog = resp;
+      this.gpsDataArr=[];
+      this.gpsDataArr = resp['data'];
+      for(var i=0;i<this.gpsDataArr.length;i++){
+        if(typeof(this.gpsDataArr[i].integrationResponse)=='object'){
+         this.gpsDataArr[i].integrationResponse= JSON.stringify(this.gpsDataArr[i].integrationResponse)
+        } 
+
+      }
+      //console.log('this.gpsDataArr',this.gpsDataArr);
+  }, err => {
+  
+  });
+
+}
+dcqData= [];
+deviceCQ(imeiObj){
+  var imei = imeiObj.Device_ID?imeiObj.Device_ID:imeiObj ;
+  this.dcqData =[];
+  this.contactService.deviceCmdQueue(imei).subscribe(resp => {  
+      var tempLog = resp;
+      this.dcqData = resp;   
+  }, err => {
+    this.dcqData =[];
+  });
+
+}
+
+
+historySeekbaar(){
+ 
+}
+
+
+changeSpeed(t){
+  //console.log(t);
+  this.speed = t * 100;
+  var header = document.getElementById("myDIV");
+  var btns = header.getElementsByClassName("sc-bdVaJa");
+  for (var i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", function() {
+    var current = document.getElementsByClassName("active");
+    current[0].className = current[0].className.replace(" active", "");
+    this.className += " active";
+    });
+  }
+}
+
+
+nearByValue:number= 1000 ;
+changeRangeNearby(){
+  var rangeVal1 = document.getElementById("nearbySlider");
+  this.nearByValue = rangeVal1['value'] ; 
+}
+
+
+getNearByVehicles(devData){
+  //console.log(devData);
+  var payLoad = {
+    uid : this.useridd,
+    distance : this.nearByValue,
+    coord: {lat : devData.latDecimal,long:devData.longDecimal}
+  }
+  this.contactService.getNearByVehicles(payLoad).subscribe(res=>{
+    //console.log(res);
+    this.deviceList=[];
+    this.deviceList = res; 
+    if(this.deviceList.length != 0){
+      if (this.deviceList.length === 0) {
+        this.lastcall = false;
+        this.firstcall = true
+      }
+      this.foods=[];  
+      for (var k = 0; k < this.deviceList.length; k++) {    
+        this.deviceList[k]['playPause'] = true;   
+        this.deviceList[k]['checked'] = true;   
+          if (this.deviceList[k].type_of_device == "Tracker") {
+            let a = {
+              value: this.deviceList[k].Device_Name,
+              viewValue: this.deviceList[k].Device_Name,
+              did: this.deviceList[k].Device_ID,
+              id: this.deviceList[k]._id,
+              user: this.deviceList[k].user,
+              email: this.deviceList[k].Email_ID,
+              deviceType: this.deviceList[k].type_of_device,
+              iconType: this.deviceList[k].iconType,
+        //      checked:true
+
+            }
+            this.foods.push(a);
+            if(k === (this.deviceList.length -1)){
+              console.log("1111111121212");
+              this.livetrack(null);
+            }
+         
+          }   
+      }
+      console.log('this.deviceList',this.deviceList);
+    }else{
+      this.data_descip = "No Nearby Devices Found !!!";
+      launch_toast();
+
+    }
+
+    function launch_toast() {
+      // //console.log(divid);
+      var x = document.getElementById("toast")
+      ////console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    }
+  })
+}
+
+   directionShow(deviceObj) {
+          var lat = deviceObj.last_location.lat;
+          var long  = deviceObj.last_location.long;
+           
+          var url ="https://www.google.com/maps/dir/?api=1&destination="+lat+","+long+"&travelmode=driving";
+               window.open(url, '_blank');
+   }
+
+   getStringifyio(rawio){
+     //console.log('askdjsahdiasjdasdlkasdjasdlkadjajldadadaa',rawio);
+     return JSON.stringify(rawio);
+
+   }
+
+
+
+   viewStreet(){
+     //console.log("Street View");
+
+   }
+
+
+   triggerDeviceCmd(dev){
+     //console.log('device Object',dev);
+    //  CmdUIComponent
+    //  let dialogRef = this.dialog.open(CommandWindowComponent, {
+    //   width:'500px',
+    //   data: { deviceObject: dev }
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+    //   if (result == "succ") {
+    //     this.data_descip = "Command Successfully Triggered" ; 
+    //     launch_toast()    
+     
+    //   }
+
+    //   if(result == "openOther"){
+    //     let dialogRef_1 = this.dialog.open(CmdUIComponent, {
+    //       width:'500px',
+    //       data: { deviceObject: dev }
+    //     });
+    //     dialogRef_1.afterClosed().subscribe(result => {
+    //       if(result === 'cancel'){
+    //         //console.log('Working Fine');
+    //       }
+
+    //       if(result === 'succ'){
+    //         this.data_descip = 'Command Triggered Successfully';
+    //         launch_toast();
+          
+    //       }
+    //     })
+    //   }
+    //   function launch_toast() {   
+    //     var x = document.getElementById("toast");
+    //     x.className = "show";
+    //     setTimeout(function () { x.className = x.className.replace("show", ""); }, 1500);
+    //   }
+    // });
+
+   }
+   parkingArr = [];
+
+  parkingData(fTime, tTime,uid,dev){
+
+ 
+    console.log('fTime, tTime,uid,dev',fTime, tTime,uid,dev);
+    var fd = new Date(fTime);
+    var td= new Date(tTime);
+    var userid=(dev.user._id != undefined)?dev.user._id:dev.user;
+    var device_imei=dev._id;
+  
+    this.contactService.stoppage_report(fd.toISOString(),td.toISOString(),userid,device_imei).subscribe(res=>{
+      this.parkingArr =[] ;
+      this.parkingArr =res ;
+      
+      console.log('response=>',res);
+    },err=>{
+      this.parkingArr =[] ;
+    })
+
+
+  }
+
+  notifArray=[];
+  bulkVar:any;
+  notificationData(fTime, tTime,uid,dev){
+    //console.log('fTime, tTime,uid,dev',fTime, tTime,uid,dev);
+    console.log('Inside notification');
+    var fd = new Date(fTime);
+    var td= new Date(tTime);
+    var userid=(dev.user._id != undefined)?dev.user._id:dev.user;
+    // var userid:any;
+    //console.log(dev);
+    var device_imei= dev.Device_ID;
+   
+      var skip = 1;
+      var limit = 200;
+      console.log('what is skip here',skip);
+     
+  this.contactService.filteredNotifications(fd,td,this.bulkVar,device_imei,userid,skip,limit)
+  .subscribe(res=>{
+    //console.log('res=>',res);
+    this.notifArray = [];
+    this.notifArray = res;
+    console.log('this.notifArray',this.notifArray);
+
+  },err=>{
+    this.notifArray = [];
+  })
+  }
+
+
+
+  getDuration(atime,dtime){
+    let arrival_time = new Date(atime).toLocaleString();                 
+    let departure_time = new Date(dtime).toLocaleString();
+    var fd = new Date(arrival_time ).getTime();
+    var td = new Date(departure_time).getTime();
+    var time_difference = td-fd;
+    var total_min = time_difference/60000;
+    var hours = total_min/60
+    var rhours = Math.floor(hours);
+    var minutes = (hours - rhours) * 60;
+    var rminutes = Math.round(minutes); 
+    let Durations = rhours +" "+'hrs'+  " "+ rminutes + 'min'; 
+    return Durations;
+  }
+
+  getAlink(lat,lng){
+    //  lat +","+lng +
+    //  https://maps.google.com/?q=
+
+   var addressLink = "https://maps.google.com/?q=" +lat +',' +lng;
+    return addressLink; 
+  }
+
+
+  liveEventsData:any=[];
+  nType:any;
+  getRecentNotification(colObj){
+  var  fd= new Date();
+  fd.setHours(0,0,0,0);
+  var fromD = new Date(fd);
+  var td = new Date();
+  // var user =  colObj.user; 
+  var user=(colObj.user._id != undefined)?colObj.user._id:colObj.user;
+  var did=  colObj.Device_ID
+
+    //console.log('Inside get Notification Function',this.deviceSelect);
+    var skip=1;
+    var limit = 200;
+    console.log('what is skip here',skip);
+    this.contactService.filteredNotifications(fromD,td,this.nType,did,user,skip,limit).subscribe(res=>{
+      //console.log('Inside get Notification Function',did);
+        this.liveEventsData=[];
+        this.liveEventsData = res;
+        this.socket_Notify.on(this.useridd, this.accListener());
+    },err=>{
+      this.liveEventsData =[];
+    })
+
+  }
+
+  accListener(){
+    //console.log('this is accListner');
+    var outerThis = this;
+    return function(msg){
+        //console.log('message=>',msg);
+        console.log('message=>',msg.device , this.deviceSelect);
+        if(msg.device == this.deviceSelect[0].Device_ID){
+          // this.liveEventsData.push(msg);
+          this.liveEventsData.splice(0, 0, msg);
+        }
+
+        //console.log('accListner=>',this.liveEventsData)
+   
+    }
+
+  }
+
+
+  addVehicle(){
+    var that= this;
+    // let dialogRef = this.dialog.open(AddDeviceComponent, {
+    //   width: '800px',
+    // });
+
+    // dialogRef.afterClosed().subscribe(result => {
+    //   if (result == "added") {
+    //     // that.refresh();
+    //     that.tost1("added");
+    //   }
+    // });
+  }
+  checkBoxValue1(event){
+    console.log(event);
+    this.satelliteDisabled=event.checked
+  }
+
+  checkBoxValue(ev,i){
+    console.log('event=>',ev);
+    console.log('index=>',i);
+    console.log('this.markerArray[i]',this.markerArray[i]);
+    var indexSwitch = (this.markerArray[i]===undefined)?0:i; 
+    console.log(indexSwitch);
+    console.log(this.markerArray[indexSwitch].lat, this.markerArray[indexSwitch].lng);
+    console.log('this.markerArray',this.markerArray);                 
+    if(ev.checked === false){
+      this.markerArray[indexSwitch].marker.setMap(null);
+      // this.markerArray[i] ={};
+    }
+    if(ev.checked === true){
+      this.markerArray[indexSwitch].marker.setMap(null);
+      var m = new google.maps.Marker({
+        position: new google.maps.LatLng(this.markerArray[indexSwitch].lat, this.markerArray[indexSwitch].lng),
+        map: this.mapNew,
+        icon: this.markerArray[indexSwitch].icon,   
+      });
+      this.markerArray[indexSwitch].marker = m;
+      this.mapNew.setCenter({ lat: this.markerArray[indexSwitch].lat, lng: this.markerArray[indexSwitch].lng });
+      if(this.markerArray[indexSwitch].number_plate)
+      this.markerArray[indexSwitch].number_plate.open(this.mapNew, this.markerArray[indexSwitch].marker);
+      var that = this;
+
+      this.markerArray[indexSwitch].marker.addListener('click',function(){
+
+        console.log('inside test function');
+       
+        that.markerArray[i].infowindow.open(that.mapNew, that.markerArray[i].marker);
+        
+      });
+      // this.markerArray[indexSwitch].marker.addListener(this.markerArray[i].infowindow, 'click', function () {
+      //   console.log('inside info click');
+      //   that.markerArray[i].infowindow.open(that.mapNew, that.markerArray[i].marker);
+      // });
+    }
+   
+  var that= this;
+    this.deviceList.filter((dl,index)=>{
+      console.log(dl,index);
+      if(dl.Device_ID == this.markerArray[indexSwitch].imei){
+        that.deviceList[index].checked = ev.checked
+      }
+
+    })
+    console.log(this.deviceList);
+
+  }
+
+  selectGroup(event,item){
+    var index=[]
+    console.log(item);
+    if(event.checked){ 
+    this.deviceList.filter(x => x.vehicleGroup==undefined || x.vehicleGroup.name !== item.name).forEach(x => this.deviceList[this.deviceList.indexOf(x)].checked=false);
+    this.deviceList.filter(x =>{
+      if(x.vehicleGroup){
+        if(x.vehicleGroup.name === item.name){
+          console.log(x)
+          var ev={checked:true}
+          this.checkBoxValue(ev,this.deviceList.indexOf(x));
+        }
+      }else{
+        var ev={checked:false}
+          this.checkBoxValue(ev,this.deviceList.indexOf(x));
+      }
+    })
+  }else{
+    this.deviceList.forEach(x => {
+      x.checked=true;
+       var ev={checked:true}
+      this.checkBoxValue(ev,this.deviceList.indexOf(x));
+    
+    });
+  }
+   
+    // for(var i=0;i<this.deviceList.length;i++){
+    //   if(de)
+    //   var ev={checked:true}
+    //   this.checkBoxValue(ev,index[i]);
+    // }
+    
+      // }).forEach(x => 
+      // console.log(x)
+      // );
+  }
+
+  getUserDetails(){
+    console.log("USERID--",this.useridd);
+    
+    this.contactService.getUserObj(this.useridd).subscribe((res:any)=>{
+      // console.log("RESPONSE",res);
+      if(res.label_setting!==undefined){
+        this.showLabels=res.label_setting
+      }
+      if(res.user_settings){
+        if(res.user_settings.sateliteValue)
+        this.satelite=res.user_settings.sateliteValue
+      }
+      
+      
+    })
+  }
+
+  // @HostListener('click', ['$event'])
+  // onClick(event) {
+  //   if (event.target.id === 'deletePoint'){
+  //     console.log(event.target.value);
+  //     this.latlongObjArr.splice(event.target.value,1);
+  //     this.maphistory(1)
+  //   }
+       
+  // }
+  // CLICK(data){
+  //   console.log(data);
+    
+  // }
+
+  // ------------new Method for calculate area------------------
+  cordinates=[];
+  showArea(){
+    console.log(this.datefrom,this.date2,this.foods);
+    var imei=JSON.parse(localStorage.getItem('devDetail'))?JSON.parse(localStorage.getItem('devDetail')):this.temptrackingDev
+    console.log(imei,"====>",imei,this.temptrackingDev);
+    if(!imei){
+      imei=this.deviceSelect[0].did
+    }else{
+      if(imei.vehicleId){
+        imei=imei.vehicleId
+      }else{
+        imei=imei
+      }
+    }
+    
+    var data={
+      f:new Date(this.datefrom).toISOString(),
+      t:new Date(this.date2).toISOString(),
+      imei:imei
+    }
+    console.log(
+      data
+    );
+    
+    this.contactService.calculateArea(data).subscribe((res:any)=>{
+      console.log("AREA RESPONSE",res);
+      if(res.area)
+      this.area=(res.area/1000000)*247;
+
+
+      // let a = res.pts;
+      //     for(let k=0;k<a.length;k++){
+      //     let b ={
+      //     lat : a[k]['latitude'],
+      //     lng : a[k]['longitude']
+      //     }
+      //     this.cordinates.push(b);
+      //     }  
+
+      //     console.log(this.cordinates);
+      //     // this.draw1(this.cordinates,'')
+          
+      
+    })
+  }
+
+  
+//     draw1(zzz,yyy){
+//       var map;
+//       var infoWindow;
+//      // console.log(typeof zzz)
+//       var GeoFencCoords = zzz
+//       var GeoName = yyy
+//      //  console.log(zzz[0].lat)
+//       initMap(GeoFencCoords);
+//       function initMap(GeoFencCoords) {
+//         map = new google.maps.Map(document.getElementById('map2'), {
+//           zoom: 17,
+//           center: {lat: GeoFencCoords[0].lat, lng: GeoFencCoords[0].lng},
+//           mapTypeId: 'terrain'
+//         });
+
+        
+//         var bermudaTriangle = new google.maps.Polygon({
+//           paths: GeoFencCoords,
+//           strokeColor: '#FF0000',
+//           strokeOpacity: 0.8,
+//           strokeWeight: 3,
+//           fillColor: '#FF0000',
+//           fillOpacity: 0.35
+//         });
+//         bermudaTriangle.setMap(map);
+
+//         // Add a listener for the click event.
+//         bermudaTriangle.addListener('click', showArrays);
+
+//         infoWindow = new google.maps.InfoWindow;
+//       }
+
+//       /** @this {google.maps.Polygon} */
+//       function showArrays(event) {
+//         // Since this polygon has only one path, we can call getPath() to return the
+//         // MVCArray of LatLngs.
+//         var vertices = this.getPath();
+
+//         var contentString = '<b>Geo Fence</b><br>' +
+//             'Name: ' + GeoName;
+
+//         // Iterate over the vertices.
+//      /*    for (var i =0; i < vertices.getLength(); i++) {
+//           var xy = vertices.getAt(i);
+//           contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
+//               xy.lng();
+//         }
+//  */
+//         // Replace the info window's content and position.
+//         infoWindow.setContent(contentString);
+//         infoWindow.setPosition(event.latLng);
+
+//         infoWindow.open(map);
+//       }
+//     }
+
+change(device){
+  console.log(device);
+  this.deviceSelect[0]=device;
+  console.log(this.deviceSelect);
+  
+}
+startAddress:any;
+deviceNameForPDF
+startTime
+endTime
+endAddress:any
+pdfFunction(data){
+  console.log("IN PDF FUNCTION",data)
+  // this.startAddress=this.getAddressForPDF(data.today_start_location?data.today_start_location.lat:0,data.today_start_location?data.today_start_location.long:0,'start');
+  // this.endAddress=this.getAddressForPDF(data.last_location?data.last_location.lat:0,data.last_location?data.last_location.long:0,'end')
+}
+getAddressForPDF(lat,lng,type){
+  
+  var outerThis=this
+  
+  let geocoder = new google.maps.Geocoder();
+             
+                let request = {
+                  latLng: new google.maps.LatLng(lat,lng)
+                };
+                geocoder.geocode(request, function (data, status) {
+                  if (status == google.maps.GeocoderStatus.OK) {
+                    if (data[0] != null) {
+                      // var liveAdd = ;
+                      console.log(data[0].formatted_address);
+                      if(type=="start"){
+                        outerThis.startAddress=data[0].formatted_address
+                      }else{
+                        outerThis.endAddress=data[0].formatted_address
+                      }
+                      return data[0].formatted_address;
+                    } 
+                  }
+                  else {
+                    //  console.log(liveAdd);
+                   return 'N/A';
+  
+  
+                  }
+  
+                })
+}
+
+
+
+image
+ pdf() {
+   var image=""
+    if(this.deviceList[0].supAdmin.imageDoc.length != 0){
+        var str =  this.deviceList[0].supAdmin.imageDoc[0]
+        var splitStr = str.split('/');
+        var concatStr ='';
+       for(var i=1 ; i< splitStr.length ; i++){      
+         if(i > 0){ 
+          var tt = splitStr[i];   
+          concatStr += '/'+tt ; 
+         }
+       }
+       image='https://www.oneqlik.in' + concatStr
+       console.log("IMAGE==>",image);
+       
+      //  this.contactService.imageUrlToBase64('https://www.oneqlik.in' + concatStr).subscribe(res=>{
+      //    console.log("Image=>",(res).toString());
+      //   //  this.image=res
+      //  })
+        // this.getBase64ImageFromUrl('https://www.oneqlik.in' + concatStr).then(result => this.image= result) 
+      }
+  this.deviceNameForPDF=this.tempMapHistory[0].device_name
+  this.startTime=this.tempMapHistory[0].fromTime
+  this.endTime=this.tempMapHistory[0].toTime;
+  var name=this.deviceNameForPDF+" track from "+this.startTime+" to "+this.endTime+'.pdf'
+  var outerThis=this;
+  this.startAddress=this.finalArr[0].address
+  this.endAddress=this.finalArr[this.finalArr.length-1].address
+    // console.log(this.startAddress,this.endAddress);
+   
+console.log(this.tempMapHistory,this.startAddress,this.endAddress, this.image);
+
+
+ var element = $('#map2');
+        var pdfOptions = {
+            orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l")
+            unit: "mm",              //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in"
+            format: "legal"            //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal'
+        };
+
+        var doc = new jsPDF(pdfOptions);
+
+        var pageWidth = doc.internal.pageSize.width-20;
+        var width  =  pageWidth;
+
+        html2canvas(element, {
+            useCORS: true, // MUST
+            onrendered: function(canvas) {
+                var imgWidth = element.width();
+                var imgHeight = element.height();
+
+                var height =  (pageWidth * imgHeight)/ imgWidth
+                var imgData = canvas.toDataURL('image/png');
+                doc.addImage(imgData, 'PNG', 5, 30 , width, height);
+                outerThis.toDataURL(image, function (dataUrl) {
+                  if(image)
+                   doc.addImage(dataUrl, 'JPEG', 2, 2, 27, 27);
+                  let finalY = doc.previousAutoTable.finalY;
+                   var header = function(data) {
+                      doc.setFontSize(15);
+                      doc.setTextColor(40);
+                      doc.setFontStyle('normal');
+                      console.log(dataUrl);
+                      
+                      // doc.addImage(dataUrl, 'JPEG', data.settings.margin.left, 20, 30, 30);
+                      // doc.text("Testing Report", data.settings.margin.left, 50);
+                    };
+                    doc.autoTable({html:"#headerTable",margin:{bottom:140,left:30,right:8,top:2},theme:'plain'});
+                    
+                  //  var options = {
+                  //     beforePageContent: header,
+                  //   //   margin: {
+                  //   //     top: 300
+                  //   //   },
+                  //   //   // startY:doc.lastAutoTable+ 300
+                  //   //  startY: 300
+                  //     // startY: doc.autoTableEndPosY() + 300
+                  // };
+                  doc.autoTable({
+                      head: outerThis.headRows(),
+                      // margin: { top: 80 },
+                      startY: doc.autoTable.previous.finalY + 200,
+                      body: outerThis.bodyRows(outerThis.finalArr.length, outerThis.finalArr),
+                      // beforePageContent: header,
+                  });
+                  doc.save(name);
+              //   // doc.addImage(dataUrl, 'JPG', 330, 4, 20, 20);
+              // //   doc.addImage({
+              // //   imageData : dataUrl,
+              // //   angle     : 20,
+              // //   x         : 330,
+              // //   y         : 1,
+              // //   w         : 20,
+              // //   h         : 20
+              // // })
+              //   console.log("URLLLL",dataUrl);
+              //   // this.image=dataUrl
+              //   })
+              });
+              
+            }
+        });
+
+
+                }
+
+   toDataURL(url, callback) {
+     console.log(url);
+     
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function () {
+            var reader = new FileReader();
+            reader.onloadend = function () {
+                callback(reader.result);
+            }
+            reader.readAsDataURL(xhr.response);
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.send();
+    }
+
+  selectedGroup(event){
+    console.log(event,this.toppings);
+    this.getDeviceBYfilter('','')
+  }
+
+  getGrp(){
+  this.contactService.getGroup(this.useridd).subscribe(      
+    res => {
+      console.log(res);     
+     this.groups = res["group_details"];
+      // console.log(this.grpName);  
+    })
+}
+
+selectAllVehicles(ev){
+    // console.log(ev);
+    if(ev.checked){
+          this.deviceObj = [];
+          var Alldevices = {
+            id: "all",
+            viewValue: "ALL Devices",
+            iconType: "",
+            deviceId: ""
+          }
+          if(this.deviceList.length==1){
+            this.selectedDevice=this.deviceList[0]._id
+             this.parkingButtonShow=this.deviceList[0].theftAlert==null?'grey':this.deviceList[0].theftAlert==undefined?'grey':this.deviceList[0].theftAlert==true?'green':'red'
+            this.DriverName=this.deviceList[0].driver_name;
+            // console.log("DRIVER NAME",this.DriverName,this.deviceList[0].ac);
+            this.ac=this.deviceList[0].ac?this.deviceList[0].ac:'NA'
+            this.DriverNumber=this.deviceList[0].contact_number
+          }
+          // //console.log("device obj =>",this.deviceList);
+          this.deviceObj.push(Alldevices);
+          for (var i = 0; i < this.deviceList.length; i++) {
+            Alldevices = {
+              id: this.deviceList[i]._id,
+              viewValue: this.deviceList[i].Device_Name ? this.deviceList[i].Device_Name : "",
+              iconType: this.deviceList[i].iconType,
+              deviceId: this.deviceList[i].Device_ID
+            }
+            this.deviceObj.push(Alldevices)
+          }
+  
+          this.final = this.deviceList;
+        
+          for (let i = 0; i < this.final.length; i++) {
+            this.final[i]['checked'] = true;
+            // this.deviceList = this.final;
+          
+            if (this.final[i].type_of_device == "Tracker") {
+              let a = {
+                value: this.final[i].Device_Name,
+                viewValue: this.final[i].Device_Name,
+                did: this.final[i].Device_ID,
+                id: this.final[i]._id,
+                user: this.final[i].user,
+                email: this.final[i].Email_ID,
+                deviceType: this.final[i].type_of_device,
+                iconType: this.final[i].iconType
+  
+              }
+  
+              this.foods.push(a);
+           
+            }
+  
+          }
+          let that= this;
+          if((this.navId === undefined)||(this.navId != 'locationHistory')){
+            this.livetrack(this.fin);
+          }
+         
+          for (let y = 0; y < this.foods.length; y++) {
+            if (this.foods[y].did == this.fin) {
+              this.new = this.foods[y];
+            }
+          }
+    }else{
+
+     
+      this.deviceList.forEach(element => {
+        element.checked=false;
+      });
+      const myOptions = {
+        zoom:2,
+        center: new google.maps.LatLng(18.602941, 73.777147),
+        mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      
+      var map = new google.maps.Map(document.getElementById('map'), myOptions);
+      console.log('mapmapmapmapmapmapmapmapmapmapmapmapmapmap',map);
+      var trafficLayer = new google.maps.TrafficLayer();
+      trafficLayer.setMap(map);
+      var zoomBar: any;
+      zoomBar = document.getElementById('myRange');
+      map.setZoom(map.getZoom());
+
+    
+      zoomBar.value = map.getZoom();
+  
+      zoomBar.oninput = function () {
+        //console.log('zoomValue',map.getZoom());
+        map.setZoom(parseInt(this.value));
+      }
+
+      google.maps.event.addListener(map, 'zoom_changed', function (event) {
+        //console.log("Inside zoom in out function");
+        if (zoomBar.value)
+          zoomBar.value = map.getZoom();
+      });
+    
+    }
+    
+}
+reportArr
+finalArr=[]
+reportArr1
+pathReport=[]
+getTravelPathReport(device){
+  var payload ={
+            "to":new Date(this.date2).toISOString(),
+            "from" : new Date(this.datefrom).toISOString(),
+             "device" : device.Device_ID,
+           "interval" :10
+          }
+
+          this.contactService.getTravel_path_report(payload).subscribe((resp:any)=>{
+    
+                
+                this.reportArr = [];
+                this.reportArr=  resp.filter(function (el) {
+                  return el != null;
+                });
+                
+                let last = {speed:''};
+let result = [];
+
+for(let i = 0; i < this.reportArr.length; i++){
+  var cum_distance = parseFloat(this.reportArr[i].odo)-parseFloat(this.reportArr[0].odo);
+  this.reportArr[i].cum_distance=Math.abs(parseFloat(cum_distance.toFixed(2)))
+
+  // let char = this.reportArr[i];
+  // if(char.speed !== last.speed){
+  //   result.push(char);
+  //   last = char;
+  // }
+}
+console.log("RESSSS==>",this.reportArr);
+this.reportArr1=this.reportArr
+   
+                
+                if (this.reportArr1.length != 0) {
+                  var j = 0;
+                  console.log(this.reportArr1);
+                  for(let i = 0; i <resp.length ; i++){
+                    if(resp[i]!=null){
+                      resp[i].Device_name = device.Device_Name;
+                      this.pathReport.push(resp[i]);
+                }else{
+               }
+           }
+
+                 this.finalArr = [];
+                 var that=this
+                  console.log(this.finalArr);
+                  for (var i = 0; i < this.reportArr1.length; i++) {
+                    this.clocation_1(this.reportArr1[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        that.finalArr.push(succ);
+                        // if(j==0){
+                        //   that.startAddress=succ.address
+                        // }
+                        // console.log(that.finalArr,j);
+                        j++;
+                        if (j === that.reportArr1.length) {
+                          // that.endAddress=succ.address
+                          that.Load = false;
+                           that.finalArr.sort(function(a:any,b:any){
+ 
+                        return new Date(a.date).valueOf() - new Date(b.date).valueOf();
+                        });
+                          // callback({ data: this.finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+                  if(this.pathReport.length==0){
+                      this.Load = false;
+                  }
+                } else {
+                  this.Load = false;
+                  this.firstcall=true;
+                  this.lastcall=(this.skip>0)?false:true;
+                 
+    
+                }
+            }, err => {   
+              this.Load= false;    
+             
+              console.log("error",err) ;     
+            });
+
+}
+
+ clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    var outerThis = this;
+    var la = '';
+
+    let latLng = {
+      lat: "0",
+      long: "0"
+    };
+  
+      latLng = {
+        lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+      }
+    
+  
+    // if () {
+    //   latLng = {
+    //     lat: 0,
+    //     long: 0
+    //   }
+    // }
+
+    outerThis.contactService.getAddressByApi(latLng).subscribe(res => {
+      if (res.message == "Address not found in databse") {
+        var adata = {
+          iden : 'noaddress',
+          latlng : latLng
+        }
+        latlngObj['address'] = adata;
+        // cb(null,latlngObj);
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var bdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = bdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+      } else {
+        latlngObj['address'] = res.address;
+        var latLng_1 = {
+          lat: "0",
+          long: "0"
+        };
+    
+          latLng_1 = {
+            lat: latlngObj.latDecimal ? latlngObj.latDecimal : 0,
+        long: latlngObj.longDecimal ? latlngObj.longDecimal : 0
+          }
+        
+ 
+
+
+        outerThis.contactService.getAddressByApi(latLng_1).subscribe(res => {
+          if (res.message == "Address not found in databse") {
+            var cdata = {
+              iden : 'noaddress',
+              latlng : latLng_1
+            }
+        
+            latlngObj['address'] = cdata;
+            cb(null, latlngObj);
+
+
+          } else {
+            latlngObj['address'] = res.address;
+            cb(null, latlngObj);
+          }
+
+        })
+
+        // cb(null,latlngObj);
+      }
+    })
+
+  }
+
+    headRows() {
+
+    return [
+  // displayedColumns=['vehicleName','IMEI','totalDistance','fuel','ignOn','ignOff','idleTime','outOfReach','noGps','trips','maxSpeed','startLocation','endLocation','details'];
+
+      {
+        deviceName:'device Name',
+        imei:'IMEI',
+        date:'Date',
+        odo:'ODO',
+        distanceFromPrevious:'Distance',
+        speed:'Speed',
+        avgSpeed:'AVG Speed',
+        externalBattery:'Ext Battery',
+        temperature:'Temperature',
+        cumDistance:'Cum Distance',
+        // maxSpeed:'Max Speed',
+        address:'Location',
+      }
+    ];
+  }
+
+  bodyRows(rowCount, pdfBody) {
+    rowCount = rowCount || 10;
+    let body = [];
+    
+    
+    for (var j = 0; j < rowCount; j++) {
+      body.push({
+
+        deviceName:pdfBody[j].Device_name,
+        imei:pdfBody[j].imei,
+        date:moment(pdfBody[j].date).format('lll'),
+        odo:pdfBody[j].odo?(pdfBody[j].odo).toFixed(2):0,
+        distanceFromPrevious:this.get_distance(pdfBody[j],pdfBody[j].index),
+        speed:pdfBody[j].speed,
+        avgSpeed:this.getavgSpeed(pdfBody[j],pdfBody[j].index),
+        externalBattery:pdfBody[j].external_Battery?pdfBody[j].external_Battery:'0',
+        temperature:pdfBody[j].temp?(parseFloat(pdfBody[j].temp)/10).toFixed(2):'0',
+        cumDistance:this.getcummulative_distance(pdfBody[j],pdfBody[j].index),
+        // maxSpeed:pdfBody[j].speed,
+        address:pdfBody[j].address,
+
+      });
+    }
+    return body;
+  }
+
+getcummulative_distance(gps_report,index){
+ 
+  if(index == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index].odo)-parseFloat(this.reportArr1[0].odo);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)))  ;
+  }
+ 
+}
+
+getavgSpeed(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index_1].odo)-parseFloat(this.reportArr1[index_1-1].odo);
+    return Math.abs(parseFloat((cum_distance/0.166).toFixed(2)));  
+  }
+}
+
+get_distance(gps_report,index_1){
+  if(index_1 == 0){
+    return 0.00;
+  }else{
+    var cum_distance = parseFloat(this.reportArr1[index_1].odo)-parseFloat(this.reportArr1[index_1-1].odo);
+    return Math.abs(parseFloat(cum_distance.toFixed(2)));  
+  }
+
+}
+
+changeParking(){
+  var theftAlert=this.parkingButtonShow=='grey'?true:this.parkingButtonShow=='green'?false:true
+  this.contactService.post('/devices/deviceupdate',{_id:this.selectedDevice,theftAlert:theftAlert}).subscribe(res=>{
+    if(theftAlert){
+      this.parkingButtonShow='green'
+    }else{
+      this.parkingButtonShow='red'
+    }
+  })
+
+}
+
+ openRightMenu() {
+  document.getElementById("rightMenu").style.display = "block";
+}
+
+ closeRightMenu() {
+  document.getElementById("rightMenu").style.display = "none";
+}
+}
diff --git a/src/app/sidebar/sidebar.component.html b/src/app/sidebar/sidebar.component.html
new file mode 100644
index 0000000..646edad
--- /dev/null
+++ b/src/app/sidebar/sidebar.component.html
@@ -0,0 +1,105 @@
+
+<!-- <div class="loading" *ngIf="Load">Loading&#8230;</div> -->
+
+<div id="mySidenav" class="sidenav">
+        <!-- <a href="#" id="about"></a> -->
+        <a id="blog">
+                <div style="padding: 10px; background-color: #ddd;">
+                        <input type="search" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (keyup)="searchFilter()" placeholder="{{'Device Search' | translate}}"/>
+                </div>
+
+                <div [ng2IfScrollbars]>
+                
+            
+                        <table class="scroll" id="myTable">
+                             
+                                <tr *ngFor="let device of total_final | orderBy: key : reverse | filter:myInput ;let i = index">
+                                        <td>
+                                            
+                                                <i class="ml-1 mr-1 fas" [ngClass]="{'fa-car':device.iconType=='car','fa-motorcycle':device.iconType=='bike','typeon':device.Ignition,'typeoff':!device.Ignition}"></i>
+
+                                        </td>
+                                        <td  style="cursor:pointer;width:40%;" (click)="vewdev(device.Device_ID,device.Device_Name,device.type_of_device,device)">
+                                                <span style="display:block;font-size: 12px;">{{ device.Device_Name }}</span>    
+                                        </td>
+                                        <td>
+                                        <span style="display:block;text-align: center" *ngIf="test(device.Ignition,device.Ignition_Time)">
+                                                   
+                                        <i title="Ignition {{device.Ignition}}" [ngClass]="{'fas fa-fire':true,'on':device.Ignition,'off':!device.Ignition}"></i>
+                                                       
+                                        </span>
+                                        </td>
+                                   
+                                        <td>
+                                        
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus>=6" class="fas fa-battery-full" style="color:green"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==5" class="fas fa-battery-three-quarters" style="color:green"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==4" class="fas fa-battery-half" style="color:yellow"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==3" class="fas fa-battery-quarter" style="color:yellow"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==2" class="fas fa-battery-quarter" style="color:yellow"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==1" class="fas fa-battery-quarter" style="color:red"></i>
+                                                                <i title="battery status {{device.batteryStatus}}" *ngIf="device.batteryStatus==undefined" class="fas fa-battery-empty" ></i>
+ 
+                                           
+                                     
+
+                                        </td>
+                                        <td>
+                                      
+                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==undefined" class=" fas fa-signal" ></i>
+                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==0" class=" fas fa-signal" style="color:red"></i>
+                                                <i title="Gsm Signal {{device.gsmSignal}}" *ngIf="device.gsmSignal==1" class=" fas fa-signal" style="font-size: 10;color:green"></i>
+                                           
+                                               
+
+                                        </td>
+                                 
+                                        <td>
+                                       
+                                                
+                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==1" class="fas fa-crosshairs" style="color:green"></i>
+                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==0" class="fas fa-crosshairs" style="color:red"></i>
+                                                <i title="Gps Tracking {{device.gpsTracking}}" *ngIf="device.gpsTracking==undefined" class="fas fa-crosshairs" ></i>
+
+                                        </td>
+                                        <td>
+                                         
+                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==undefined" class="fas fa-alarm-clock" ></i>
+                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==0" class="fas fa-alarm-clock" style="color:red"></i>
+                                                <i title="alarm {{device.alarm}}" *ngIf="device.alarm==1" class="fas fa-alarm-clock" style="color:green"></i>
+                                                
+                                        
+
+                                        </td>
+                                        <td>
+                                               
+                                                <i title="Power {{device.power}}" *ngIf="device.power==undefined" class="fas fa-plug" ></i>
+                                                <i title="Power {{device.power}}" *ngIf="device.power==0" class="fas fa-plug" style="color:red"></i>
+                                                <i title="Power {{device.power}}" *ngIf="device.power==1" class="fas fa-plug" style="color:green"></i>
+                                               
+
+                                        </td>
+                                        <td>
+                                               
+                                                
+
+                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==undefined" class="fas fa-stop" ></i>
+                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==0" class="fas fa-pause" style="color:red"></i>
+                                                <i title="Activated {{device.activated}}" *ngIf="device.activated==1" class="fas fa-play" style="color:green"></i>
+
+                                        </td>
+                                        <!-- <td>
+                                              
+                                             
+                                                <i *ngIf="device.satellites==undefined" class="far fa-wifi" ></i>
+                                                <i *ngIf="device.satellites==0" class="far fa-wifi" style="color:red"></i>
+                                                <i *ngIf="device.satellites>=1" class="far fa-wifi" style="color:green"></i>
+                                        </td> -->
+                                </tr>
+                       </table>
+      
+
+                </div>
+
+        </a>
+</div>
diff --git a/src/app/sidebar/sidebar.component.scss b/src/app/sidebar/sidebar.component.scss
new file mode 100644
index 0000000..e6f5aaf
--- /dev/null
+++ b/src/app/sidebar/sidebar.component.scss
@@ -0,0 +1,268 @@
+.FixedHeightContainer
+{
+  /* float:right;
+  height: 250px; */
+  width:250px; 
+/*   padding:3px; 
+    background:#f00; */
+}
+// ::-webkit-scrollbar {
+//   display: none;
+//   }
+table.scroll {
+  /* width: 100%; */ /* Optional */
+  /* border-collapse: collapse; */
+  // border-spacing: 0;
+  // border: 2px ;
+}
+
+
+
+//tbody { border-top: 2px solid }
+
+/* tbody td, thead th {
+
+  border-right: 1px solid 
+
+} */
+
+/* tbody td:last-child, thead th:last-child {
+  border-right: none;
+} */
+.Content
+{
+  height:224px;
+   overflow:auto;
+    background:#fff;
+}
+/* Side Navi */
+#mySidenav a {
+  margin-top: -16px;
+  position: fixed;
+  left: -270px;
+  height: 100%;
+  transition: 0.3s;
+  text-decoration: none;
+  font-size: 15px;
+  color: 000;
+  //border-radius: 0 5px 5px 0;
+  overflow: scroll;
+  width: 280px;
+  background: #fff;
+  box-shadow: 0px 1px 1px #555;
+
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: 1;
+}
+
+#blog {
+/*     top: 80px;
+    background-color: #18262F; */
+    top: 80px;
+    background-color: #18262F;
+    position: absolute; 
+    z-index: 99;
+    opacity: 1;
+    overflow: auto;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#myInput {
+  border-radius: 4px;
+    border: 1px solid #c5c5c5;
+    padding: 10px;
+    width: 100%;
+    height: 41px;
+    font-size: 14px;
+    outline: none;
+    background: white;
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  td
+{
+    border: solid 1px;
+    border-left: none;
+    border-right: none;
+}
+.on{
+  color:red;
+}
+.off{
+  color:#555
+}
+.typeon{
+  color:green;
+}
+.typeoff{
+  color:red
+}
+
+.list{
+  list-style-type: none;
+}
+
+
+.force-overflow
+{
+    min-height: 450px;
+}
+
+#blog::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+#blog::-webkit-scrollbar
+{
+    width: 12px;
+    background-color: #F5F5F5;
+}
+
+#blog::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: -webkit-linear-gradient(45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, .2) 50%,
+    rgba(255, 255, 255, .2) 75%,
+    transparent 75%,
+    transparent)
+
+    /* background-color: linear-gradient(to bottom, MD_DIALOG_DATA 0%, #0066ff 100%); */
+}
diff --git a/src/app/sidebar/sidebar.component.spec.ts b/src/app/sidebar/sidebar.component.spec.ts
new file mode 100644
index 0000000..e49c1a5
--- /dev/null
+++ b/src/app/sidebar/sidebar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sidebar/sidebar.component.ts b/src/app/sidebar/sidebar.component.ts
new file mode 100644
index 0000000..6b74759
--- /dev/null
+++ b/src/app/sidebar/sidebar.component.ts
@@ -0,0 +1,549 @@
+import { Component, OnInit, OnDestroy,Output,EventEmitter } from '@angular/core';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {DatainjectionService} from '../datainjection.service'
+import * as CryptoJS from 'crypto-js';
+import {ContactService} from '../contact.service';
+import * as io from 'socket.io-client';
+import * as jquery from 'jquery';
+import {Observable} from 'rxjs/Rx';
+declare var _:any,$:any;
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss'],
+  providers:[ContactService]
+})
+export class SidebarComponent implements OnInit, OnDestroy{
+ 
+  
+timer:any  = Observable.timer(100, 100);
+add_dev:boolean;
+subscription:any
+groupData:any={};
+  groupId: any;
+  DealerID: any;
+  superAdmin: any;
+  supAdm: any;
+refresh()
+{
+ this.subscription = this.timer.subscribe(t => {
+    this.Ing_Status();
+  });
+}
+
+//this.subscription = this.timer.subscribe(t => {
+  skip:any;
+  limit:any;
+  search:any;
+  sidebarData(){
+      if(this.checker == "OK" || this.checker == "ok"){
+        this.injectData.getData(this.emailid,this.useridd,this.groupId,this.skip,this.limit,this.search,this.supAdm,this.DealerID).subscribe(
+          (data) => {
+            // this.Load=false;
+            this.devicess = data
+            this.final = this.devicess.devices
+           
+
+            this.total_final = this.final
+            console.log(this.final,"-------------------------------->")
+            if(this.final.length == 0 ||this.final == null || !this.final){
+              this.add_dev = false
+              console.log("Load1");
+              // this.Load=false;
+            }
+            else{
+              this.add_dev = true
+            }
+            this.Ing_Status();
+          //  this.refresh();
+            let val = JSON.stringify(this.final);
+            localStorage.setItem("devices",val);
+            window.localStorage['LoadGraph'] = 'True'
+            window.localStorage['checker'] = 'Data'
+            window.localStorage['DataLoaded'] = 'True'
+
+           // window.localStorage['GetDevData'] = 'False'
+          
+           
+          //  this.table();
+          //  this.subscription.unsubscribe();
+          },
+          (err)=>{
+            if(err){
+              console.log("Load3");
+              // this.Load = false;
+            }
+          }
+        )
+       }
+       else if( window.localStorage.DataUpdate == 'True'){
+ 
+        
+        this.final = []
+        this.injectData.getData(this.emailid,this.useridd,this.groupId,this.skip,this.limit,this.search,this.supAdm,this.DealerID).subscribe(
+          (data) => {
+            this.devicess = data 
+            this.final = this.devicess.devices
+            console.log("7444444444444",this.final);
+            
+            this.total_final = this.final
+            if(this.final.length == 0 ||this.final == null || !this.final){
+              this.add_dev = false
+              console.log("Load3");
+              // this.Load=false;
+            }
+            else{
+              this.add_dev = true
+            }
+            this.Ing_Status();
+          //  this.refresh();
+
+            let val = JSON.stringify(this.final);
+            localStorage.setItem("devices",val);
+            window.localStorage['DataUpdate'] = 'False'
+            window.localStorage['LoadGraph'] = 'True'
+            window.localStorage['DataLoaded'] = 'True'
+
+        //    window.localStorage['GetDevData'] = 'False'
+           // this.subscription.unsubscribe();
+           console.log("Load4");
+            // this.Load=false;
+          //  this.table();
+         //   this.subscription.unsubscribe();
+
+          },
+          (err)=>{
+            if(err){
+              console.log("Load5");
+              // this.Load = false
+            }
+          }
+        )
+       }
+       else if(this.checker == "Data"){
+        var retrievedData = localStorage.getItem("devices");
+        var cord = JSON.parse(retrievedData);
+        this.final = cord  
+        this.total_final = this.final
+        if(this.final.length == 0 ||this.final == null || !this.final){
+          this.add_dev = false;
+          console.log("Load6");
+          // this.Load=false;
+        }
+        this.total_final = this.final
+        window.localStorage['DataLoaded'] = 'True'
+        this.Ing_Status();
+      //  this.refresh();
+
+      //  this.subscription.unsubscribe();
+      //  window.localStorage['GetDevData'] = 'False'
+      console.log("Load7Side");
+        // this.Load=false;
+       // this.table();
+       // this.subscription.unsubscribe();
+
+      }
+
+       else{
+        this.injectData.getData(this.emailid,this.useridd,this.groupId,this.skip,this.limit,this.search,this.supAdm,this.DealerID).subscribe(
+         (data)=> {
+            this.devicess = data 
+            this.final = this.devicess.devices
+            this.total_final = this.final;
+            if(this.final.length == 0 ||this.final == null || !this.final){
+              this.add_dev = false
+              console.log("Load8");
+              // this.Load=false;
+            }
+            else{
+              this.add_dev = true
+            }
+            this.Ing_Status();
+            //this.refresh();
+
+            let val = JSON.stringify(this.final);
+            localStorage.setItem("devices",val);
+            window.localStorage['LoadGraph'] = 'True'
+            window.localStorage['checker'] = 'Data'
+            window.localStorage['DataLoaded'] = 'True'
+
+        //    window.localStorage['GetDevData'] = 'False'
+        console.log("Load9");
+            // this.Load=false;
+           // this.subscription.unsubscribe();
+           // this.table();
+         //   this.subscription.unsubscribe();
+
+          },
+          (err)=>{
+            if(err){
+              console.log("Load10");
+              // this.Load = false;
+            }
+          }
+        )
+       }
+     //  console.log(this.final)
+ //   }
+
+ // })
+   
+  }
+
+  specific:any
+  mb:any
+  constructor( private contactService: ContactService,private router: Router,private injectData:DatainjectionService) { 
+    // this.table();
+    window.localStorage['GetDevData'] = 'True'
+
+      this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+      this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+      this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+      this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+      if(this.custtype == true){
+        this.cust = true;
+      }  
+      if(this.mb.charAt(0)=="n"){
+        this.mb = ' '
+      }
+ 
+    this.socket_Ing = this.injectData.getSocket_gps();
+      //io.connect('https://www.oneqlik.in/gps', { secure: true, rejectUnauthorized: false, transports: ["polling"], upgrade: false });
+              
+    this.socket_Ing.on('connect', function(this){
+   
+    });
+//  this.Load = true;
+    
+  // var secretKey = 'adnateIOTtrackeR';
+   this.checker = window.localStorage.checker
+  // console.log(this.checker)
+    this.sidebarData();
+  }
+  try:any
+  devicess:any;
+  final:any = null;
+  userID:any;
+  fs:any;
+  ls:any;
+  or:any;
+  emailid:any;
+  useridd:any;
+  custtype:any;
+  cust:boolean = false;
+  // Load:boolean = false;
+
+
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";*/
+    window.localStorage['Device_detail'] = this.devicess;
+     window.localStorage['mapLoad_ID'] = "True"
+     this.router.navigateByUrl("location");
+    //  this.router.navigateByUrl("fuelComp");
+  }
+  showButton=true;
+  vewdev(id,name,type){
+      this.contactService.menuReturnSet('openNav');
+   var dataStatus = {
+     vehicleId:id,
+     vehicleName:name,
+     vehicleType:type
+   }
+    if(type=="Tracker"){
+      window.localStorage['mapLoad_ID'] = id;
+      window.localStorage['mapLoad_Name'] = name
+      window.localStorage['devDetail']= JSON.stringify(dataStatus);
+      this.router.navigateByUrl("location");
+    
+    
+/*       window.location.reload();
+ */      
+    }
+    else{
+  // debugger;
+    this.router.navigateByUrl("account?_did="+id+"."+name); 
+    }
+  }
+ img_URL :any 
+ ing_Arr = []
+ imgurl:any;
+ text:any;
+ myInput:any;
+ total_final:any;
+ test(a,b){
+   //let b = a.split("|")[0]
+   if(!a){
+    this.imgurl="../../assets/image/ignition-idle.png";
+    return true;
+   }
+   else if(a=="1"){
+     this.imgurl="on";
+     this.text = "Ignition Status: ON | Last Updated: "+b
+     return true;
+   }
+   else if(a=="0"){
+   
+    this.imgurl="off"
+    this.text = "Ignition Status: OFF | Last Updated:"+b
+
+    return true;
+   }
+   else{
+  
+   
+    return false;
+   }
+ }
+
+
+ statListener(index,dev)
+ {
+  var outerThis = this;
+  var avgspd = "Average_Speed";
+  var dst ="Distance";
+
+  return function(stat,did){
+  
+
+    dev[avgspd] = stat.avgSpeed ? stat.avgSpeed.toFixed(2) : 0.00;
+
+    dev[dst] = stat.distance;
+
+    var passtodayOdo = dev[dst];
+  
+    var i = outerThis.final.indexOf(index);
+    outerThis.final[i] = dev;
+    outerThis.total_final = outerThis.final;
+ 
+    window.localStorage['LoadGraph'] = 'True'
+    let val = JSON.stringify(outerThis.final);
+    localStorage.setItem("devices",val);
+    window.localStorage['LoadGraph'] = 'True'
+   
+  }
+ }
+accListener(index,dev){
+
+  var outerThis = this;
+  var ing
+
+   return function(acc,from,time,d4,d5){
+   //  dev = d4;
+    
+    var newNum = "Ignition";
+    var newTitle ="Ignition_Time"
+
+    // var batteryStatus = "batteryStatus";
+    // var gsmSignal = "gsmSignal";
+    // var ignitionLock = "ignitionLock";
+    // var gpsTracking = "gpsTracking";
+    // var alarm = "alarm";
+    // var power = "power";
+    // var activated = "activated";
+    // var satellites = "satellites";
+
+    var newVal = acc;
+    //var newTim = time;
+    var dt = new Date(time);
+      let  day = dt.getDate(); 
+       let  month = dt.getMonth()+1; 
+       let  year = dt.getFullYear();
+     
+       let final_date = day+"/"+month+"/"+year
+      let tm = new Date(time).toLocaleTimeString();
+   
+      let total = final_date + " " + tm
+
+ 
+    outerThis.ing_Arr.push(from)
+    dev[newNum] = newVal;
+    dev[newTitle] = total;
+    var i = outerThis.final.indexOf(index);
+    outerThis.final[i] = dev;
+    outerThis.total_final = outerThis.final;
+   // window.localStorage['DataUpdate'] = 'True'
+    window.localStorage['LoadGraph'] = 'True'
+    //outerThis.sidebarData();   
+   // console.log(outerThis.total_final)
+    let val = JSON.stringify(outerThis.final);
+    localStorage.setItem("devices",val);
+    window.localStorage['LoadGraph'] = 'True'
+
+  }
+
+}
+
+
+ind :any
+gh = []
+table(){
+  
+  makeTableScroll();
+  function makeTableScroll() {
+    var $table = $('table.scroll'),
+    $bodyCells = $table.find('tbody tr:first').children(),
+    colWidth;
+
+// Adjust the width of thead cells when window resizes
+$(window).resize(function() {
+    // Get the tbody columns width array
+    colWidth = $bodyCells.map(function() {
+        return $(this).width();
+    }).get();
+    
+    // Set the width of thead columns
+    $table.find('thead tr').children().each(function(i, v) {
+        $(v).width(colWidth[i]);
+    });    
+}).resize(); 
+}
+}
+
+
+Ing_Status(){
+ this.ing_Arr = []
+ 
+  for(var y=0; y<this.final.length; y++){
+    // this.socket_Ing.emit('acc',this.final[y].Device_ID )
+    this.socket_Ing.on(this.final[y].Device_ID+'acc', this.accListener(y,this.final[y]))
+    // this.socket_Ing.on(this.final[y].Device_ID+'acc',function(d1,d2,d3,d4,d5){
+    //   console.log("d1,d2,d3,d4,d5",d1,d2,d3,d4,d5);
+    // });
+    var d = new Date();
+    var a = d.setHours(0,0,0,0)
+
+    // this.socket_Ing.emit('stat',this.final[y].Device_ID,this.final[y].Device_Name,a,null)
+    // this.socket_Ing.on(this.final[y].Device_ID+'stat',this.statListener(y,this.final[y]))
+    /* let val = JSON.stringify(this.final);
+    
+    localStorage.setItem("devices",val); */
+  }
+}
+
+  table1ch(){
+    myFunction();
+        function myFunction() {
+          var input, filter, table, tr, td, i;
+          input = document.getElementById("myInput");       
+          filter = input.value.toUpperCase();
+          table = document.getElementById("myTable");
+          tr = table.getElementsByTagName("tr");
+          for (i = 0; i < tr.length; i++) {
+            td = tr[i].getElementsByTagName("td")[0];
+            if (td) {
+              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+                tr[i].style.display = "";
+              } else {
+                tr[i].style.display = "none";
+              }
+            }       
+          }
+        }
+      }
+      checker:any;
+      dev:any;
+     
+      private socket_Ing
+      private socket_stat
+   da :any   
+   
+getrequest(para){
+
+  this.da = para
+  this.specific = true
+  // this.sidebarData()
+ // console.log(this.total_final)
+}
+
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    if(this.custtype){
+      this.DealerID = this.useridd
+    }
+    if(this.superAdmin){
+      this.supAdm = this.useridd;
+    }
+
+   let socket_Ing = this.injectData.getSocket_gps();
+    io.connect('https://www.oneqlik.in/gps', { secure: true, rejectUnauthorized: false, transports: ["websocket", "polling"], upgrade: false });
+            
+    socket_Ing.on('connect', function(this){
+ 
+
+  });
+
+
+    // this.injectData.getGroupData(this.emailid,this.useridd).subscribe(resp=>{
+    //   this.groupData = resp.map(function(d){
+    //     d.vehicleDetails.map(function(d1){
+    //       debugger;
+    //       socket_Ing.emit('acc',d1.Device_ID )
+    //       socket_Ing.on(d1.Device_ID+'acc',()=>{
+    //         return function(ind,data){
+    //           console.log("451",data);
+    //           d1= data;
+    //         }
+    //       })
+    //       socket_Ing.emit('stat',d1.Device_ID,d1.Device_Name,new Date().setHours(0,0,0,0),null)
+    //       socket_Ing.on(d1.Device_ID+'stat',()=>{
+    //         return function(ind,data){
+    //           debugger;
+    //           console.log("459",data);
+    //           d1=data;
+    //         }
+    //       })
+    //       return d1;
+    //     })
+    //   return d;
+    //    })
+    // });
+  }
+  ngOnDestroy() {
+    for (var e = 0; e <  this.ing_Arr.length; e++){
+      // console.log(this.ing_Arr[e])
+      
+     this.socket_Ing.removeAllListeners(this.ing_Arr[e])
+    }
+   this.socket_Ing.removeAllListeners()
+  }
+        
+  showd(d){
+
+      d.flag =!d.flag;
+  }
+  show(d){
+
+    if(d.flag == undefined)
+      d.flag = true;	
+    else
+      d.flag = !d.flag; 
+  }
+
+
+  // filter
+ 
+
+  //sorting
+  key: string = 'Device_Name'; //set default
+  reverse: boolean = false;
+  sort(key){
+    // console.log(key);
+    this.key = key;
+    this.reverse = !this.reverse;
+  }
+
+  searchFilter(){
+    this.myInput;
+    // console.log(this.myInput);
+    // this.sidebarData()
+
+  }
+
+
+}
diff --git a/src/app/sidemenu-fuel/sidemenu-fuel.component.html b/src/app/sidemenu-fuel/sidemenu-fuel.component.html
new file mode 100644
index 0000000..0d06d95
--- /dev/null
+++ b/src/app/sidemenu-fuel/sidemenu-fuel.component.html
@@ -0,0 +1,30 @@
+<div id="mySidenav_fuel" class="sidenav_fuel">
+        <!--<a href="#" id="about"></a>-->
+        <div id="bloged">  
+                <h4 class="headStyle">{{'Parameters' | translate}}</h4>   
+                <div class="row" style="margin:-8px 0"> 
+                        <div class="col-md-8" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;border-right: 2px solid #d7d5d5;">{{'Power' | translate}}</div>
+                        <div class="col-md-4" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;">
+                                <img style="width: 20px" src={{pwrURL}}>
+                        </div>
+                        <div class="col-md-8" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;border-right: 2px solid #d7d5d5;">{{'Ignition' | translate}}</div>
+                        <div class="col-md-4" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;">
+                                <img style="width:25px;" src={{imgurl}}>
+                        </div>
+                     
+                        <!-- <div class="col-md-4" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;" >
+                                <img style="width:20px;" src='../../assets/image/PowerOn.png'>
+                        </div> -->
+                        <div class="col-md-8" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;border-right: 2px solid #d7d5d5;" md-tooltip={{aStatus}}>{{'AC' | translate}}</div>
+                        <div class="col-md-4" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;" >
+                                <img style="width: 20px" src={{ACImg}}>
+                        </div>
+                        <div class="col-md-8" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;border-right: 2px solid #d7d5d5;">{{'GPS' | translate}}</div>
+                        <div class="col-md-4" style="border-bottom: 2px solid #d7d5d5;padding: 10px;text-align: center;font-weight: 500;">
+                                <img style="width: 18px" src={{gpsImg}}>
+                        </div>
+                </div>
+                <div class="row">                                                              
+                </div>                
+        </div>
+</div>
\ No newline at end of file
diff --git a/src/app/sidemenu-fuel/sidemenu-fuel.component.scss b/src/app/sidemenu-fuel/sidemenu-fuel.component.scss
new file mode 100644
index 0000000..d84b5b7
--- /dev/null
+++ b/src/app/sidemenu-fuel/sidemenu-fuel.component.scss
@@ -0,0 +1,239 @@
+.FixedHeightContainer
+{
+  /* float:right;
+  height: 250px; */
+  width:250px; 
+/*   padding:3px; 
+    background:#f00; */
+}
+// ::-webkit-scrollbar {
+//   display: none;
+//   }
+table.scroll {
+  /* width: 100%; */ /* Optional */
+  /* border-collapse: collapse; */
+  // border-spacing: 0;
+  // border: 2px ;
+}
+
+
+
+//tbody { border-top: 2px solid }
+
+/* tbody td, thead th {
+
+  border-right: 1px solid 
+
+} */
+
+/* tbody td:last-child, thead th:last-child {
+  border-right: none;
+} */
+.Content
+{
+  height:224px;
+   overflow:auto;
+    background:#fff;
+}
+/* Side Navi */
+#mySidenav_fuel a {
+  margin-top: -16px;
+  position: fixed;
+  height: 648px;
+  transition: 0.3s;
+  width: 245px;
+  text-decoration: none;
+  font-size: 15px;
+  color: 000;
+  //border-radius: 0 5px 5px 0;
+  overflow: auto;
+  width: 280px;
+  background: #fff;
+  box-shadow: 0px 1px 1px #555;
+
+}
+
+#mySidenav_fuel a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: 1;
+}
+
+#bloged {
+  top: 65px;
+  background-color: #ffffff;
+  position: absolute;
+  z-index: 1;
+  opacity: 1;
+  overflow: hidden;
+  width: 162px;
+  right: 0px;
+  height: 585px;
+  transition: 0.3s;
+}
+
+// #bloged:hover {
+//   right: 0px;
+// }
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#myInput {
+  border-radius: 4px;
+    border: 1px solid #c5c5c5;
+    padding: 10px;
+    width: 100%;
+    height: 41px;
+    font-size: 14px;
+    outline: none;
+    background: white;
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  td
+{
+    border: solid 1px;
+    border-left: none;
+    border-right: none;
+}
+
+.headStyle{
+  background: #7fd67d;
+    padding: 9px;
+    text-align: center;
+    font-size: 18px;
+    color: white;
+    /* word-spacing: 14.2px; */
+    letter-spacing: 1.2px;
+
+}
+
+#devStatus{
+  display: flex;
+  margin: 0px
+}
\ No newline at end of file
diff --git a/src/app/sidemenu-fuel/sidemenu-fuel.component.spec.ts b/src/app/sidemenu-fuel/sidemenu-fuel.component.spec.ts
new file mode 100644
index 0000000..b6e76df
--- /dev/null
+++ b/src/app/sidemenu-fuel/sidemenu-fuel.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidemenuFuelComponent } from './sidemenu-fuel.component';
+
+describe('SidemenuFuelComponent', () => {
+  let component: SidemenuFuelComponent;
+  let fixture: ComponentFixture<SidemenuFuelComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidemenuFuelComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidemenuFuelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sidemenu-fuel/sidemenu-fuel.component.ts b/src/app/sidemenu-fuel/sidemenu-fuel.component.ts
new file mode 100644
index 0000000..794c22a
--- /dev/null
+++ b/src/app/sidemenu-fuel/sidemenu-fuel.component.ts
@@ -0,0 +1,249 @@
+
+import { Component, OnInit, Input } from '@angular/core';
+import { DatainjectionService } from '../datainjection.service';
+import { Router } from '@angular/router';
+import * as io from 'socket.io-client';
+import * as jquery from 'jquery';
+import { Observable } from 'rxjs/Rx';
+import { ContactService } from '../contact.service';
+
+
+
+@Component({
+  selector: 'app-sidemenu-fuel',
+  templateUrl: './sidemenu-fuel.component.html',
+  styleUrls: ['./sidemenu-fuel.component.scss']
+})
+
+
+export class SidemenuFuelComponent implements OnInit {
+  @Input('data') data: string;
+  vehicle_IMEI: any;
+  vehicleDetails: any;
+  total_final: any;
+  mb: any 
+  checker: any;
+  socket_Ing: any;
+  speed_data: any;
+  vehicle_id: any;
+  mapName: any;
+  timer: any = Observable.timer(100, 100);
+  add_dev: boolean;
+  subscription: any;
+  try: any
+  devicess: any;
+  final: any;
+  userID: any;
+  fs: any;
+  ls: any;
+  or: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  cust: boolean = false;
+  deviceIgnReport:any;
+  Load: boolean = false;
+  ACImg: string='../../assets/image/acGrey.png';
+  aStatus: string;
+  pwrURL:string = "../../assets/image/noPower.png";
+  pStatus :string;
+
+  gpsImg:string = "../../assets/image/no_gps.png";
+  gStatus :string;
+
+  constructor(private injectData: DatainjectionService, private router: Router,public contaservice : ContactService) {
+    // console.log(this.data)
+
+  
+    this.vehicleDetails = JSON.parse(localStorage.getItem('devDetail'));
+    // console.log(this.vehicleDetails);
+    this.vehicle_IMEI = this.vehicleDetails.vehicleId;
+    // console.log(this.vehicle_IMEI);
+    window.localStorage['GetDevData'] = 'True'
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+
+
+    this.socket_Ing = this.injectData.getSocket_gps();
+    //io.connect('https://www.oneqlik.in/gps', { secure: true, rejectUnauthorized: false, transports: ["polling"], upgrade: false });
+
+    this.socket_Ing.on('connect', function (this) {
+      // console.log('Ignition IO Connected');
+
+    });
+    this.Ing_Status();
+    // this.Load = true;
+    // var secretKey = 'adnateIOTtrackeR';
+    this.checker = window.localStorage.checker
+    // console.log(this.checker)
+    // this.sidebarData();
+  }
+
+  ngOnInit() {
+   
+  }
+
+  //--
+  whoAmI() {
+    return 'I am a child!!';
+  }
+
+  //--
+
+getNotification(evt) {
+  // console.log(evt);
+        // Do something with the notification (evt) sent by the child!
+    }
+
+    refresh(){
+      this.subscription = this.timer.subscribe(t => {
+      this.Ing_Status();
+    });
+  }
+
+
+
+  imgurl= '../../assets/image/PowerIdle.png'
+  // test(a, b) {
+
+
+  //   if (!a) {
+  //     this.imgurl = "../../assets/image/ignition-idle.png";
+  //     return true;
+  //   }
+  //   else if (a == "1") {
+  //     this.imgurl = "../../assets/image/engine-on.png";
+
+  //     return true;
+  //   }
+  //   else if (a == "0") {
+
+  //     this.imgurl = "../../assets/image/engine-off.png"
+
+
+  //     return true;
+  //   }
+  //   else {
+
+
+  //     return false;
+  //   }
+  // }
+
+  ignition_status:any;
+  ing_Arr = [];
+  ign_1=false;
+  ign_0=false;
+  ignitionStatus:any;
+ 
+  accListener(ignStatus) {
+    console.log(ignStatus);
+    var outerThis= this;   
+
+    return function (acc) {
+     this.ignition_status = acc; 
+     console.log(ignStatus);
+     outerThis.getDeviceStatus(ignStatus);
+     console.log("socketdata=>",acc);
+    //  console.log("ignitionStatus=>",acc)
+     if(!this.ignition_status){
+      outerThis.imgurl='../../assets/image/enginena.png';
+     }else if(this.ignition_status==0){
+      outerThis.imgurl='../../assets/image/enginered.png';
+     }else if(this.ignition_status==1){
+      outerThis.imgurl='../../assets/image/enginegreen.png';
+     }else{
+      outerThis.imgurl='../../assets/image/enginena.png'
+     }
+  }
+}
+
+
+
+getDeviceStatus(did){
+  console.log(did);
+  this.contaservice.getdevById(did).subscribe(res=>{ 
+    var deviceResponse  = JSON.parse(res['_body']);
+    console.log(deviceResponse);
+    var ACtrack  = deviceResponse.ac ; 
+    if (!ACtrack) {
+      // grey
+      this.ACImg = "../../assets/image/acGrey.png";
+      this.aStatus = "AC NOT SUPPORTED"
+    
+    } else if (ACtrack == "1") {
+      // green
+      this.ACImg = "../../assets/image/acGreen.png";
+      this.aStatus = "AC ON"
+    
+    } else if (ACtrack == "0") {
+      // red
+      this.ACImg = "../../assets/image/acRed.png";
+      this.aStatus = "AC OFF"
+    
+    }
+
+    var pwr = deviceResponse.power;
+    if (!pwr) {
+      this.pwrURL = "../../assets/image/noPower.png";
+      this.pStatus = "No Power";
+     
+    } else if (pwr == "1") {
+      this.pwrURL = "../../assets/image/power_on.png";
+      this.pStatus = "Power ON";
+     
+    } else if (pwr == "0") {
+      this.pwrURL = "../../assets/image/power_off.png";
+      this.pStatus = "Power OFF";
+   
+    } 
+
+    var gTrack = deviceResponse.gpsTracking;
+    if (!gTrack) {
+      this.gpsImg = "../../assets/image/no_gps.png";
+      this.gStatus = "GPS NOT SUPPORTED"
+    
+    } else if (gTrack == "1") {
+      this.gpsImg = "../../assets/image/gpsOn.png";
+      this.gStatus = "GPS ON"
+  
+    } else if (gTrack == "0") {
+      this.gpsImg = "../../assets/image/gps_off.png";
+      this.gStatus = "GPS OFF"
+     
+    }
+
+
+  })
+
+
+}
+
+
+  Ing_Status() { 
+    
+    // console.log("Inside Socket function!!!");
+    // console.log(this.vehicle_IMEI);
+    this.socket_Ing.emit('acc', this.vehicle_IMEI);
+    this.socket_Ing.on(this.vehicle_IMEI+'acc', this.accListener(this.vehicle_IMEI));
+  }
+
+  
+
+  icon_change(ign){
+    // console.log(ign);
+  }
+
+}
+
diff --git a/src/app/signup/signup.component.css b/src/app/signup/signup.component.css
new file mode 100644
index 0000000..c976985
--- /dev/null
+++ b/src/app/signup/signup.component.css
@@ -0,0 +1,332 @@
+.formgroup{
+    width:30%;
+}
+.g-recaptcha {
+    transform: scaleX(0.7);
+    transform-origin: 0%;
+    
+    width: 150px;
+  }  
+  .background-image{
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    margin: -16px;
+    padding: 0;
+    background-image: url('../../assets/image/Traffic-Blur.jpg');
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  
+ /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+.mat-slide-toggle-thumb-container {
+    z-index: auto !important;
+}
+
+.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+    z-index:auto!important;
+    
+}
+.mat-menu-panel.mat-menu-before.mat-menu-below{
+    overflow: hidden !important;
+}
+.mat-menu-panel.my-full-width-menu {
+    max-width: none;
+    width: 100vw;
+    margin-left: -8px;
+    margin-top: 24px;
+  }
+  .menu-overflow-hidden {
+    overflow: hidden !important;
+  }
+  
+.width{
+    width: 100%;
+}
+.upper{
+    margin-top: -82px;
+    width: 1024px;
+    margin-left: -42px;
+}  
+  .dropbtn {
+
+    color: white;
+    background-color:white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+    
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 270px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    width: 160px;
+    word-wrap: break-word;
+    margin-left:-200px
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.dropdown:hover .dropbtn {
+    
+}
+.info{
+
+}
+
+.md-content._md.md-show {
+    height: auto !important;
+}
+
+.tooltip-inner {
+    word-break: break-all;
+    width: 300px;
+    text-align: center;
+}
+
+/* Apply this to the text inside the tooltip */
+.span-white-space {
+    white-space: normal;
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/signup/signup.component.html b/src/app/signup/signup.component.html
new file mode 100644
index 0000000..58a1b65
--- /dev/null
+++ b/src/app/signup/signup.component.html
@@ -0,0 +1,146 @@
+        <html>
+  <head>
+        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
+  </head>
+           <body> 
+               <div  style="    height: 92vh;
+               overflow: hidden;
+               position: fixed;" class="background-image">
+            <div id="toast"><div id="desc">{{data_descip}}</div></div>  
+            <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+<div layout="row" layout-xs="column" style="margin-left: 10px;" >
+ <md-card  fxFlex="76%" fxFlex.lt-md="90%" style="width:auto;float: left;padding-left: 40px; background-color: mintcream;opacity: .8;margin-top: 6%;">
+     <div *ngIf="OTP_Come">
+    
+            <h3 style="text-align:left;">SignUp</h3>
+            <form class="form-group"  #lgForm="ngForm">   
+                   <div class ="form-group" style="width: 45%;float:left">
+                        <md-form-field class="example-full-width width" (click) = "stren();">
+                        <input (keypress)="click2($event)" mdInput type="text" [(ngModel)]="first_name" name="first_name"placeholder="First Name" required> 
+                        <md-error class="required">Enter First Name</md-error>
+                       </md-form-field>
+                       
+                    </div>           
+                   <div class ="form-group" style="width: 45%;float:left;padding-left:5%"> 
+                       <md-form-field class="example-full-width width" (click) = "stren();">
+                       <input mdInput (keypress)="click2($event)" type="text"  [(ngModel)]="last_name" name="last_name" placeholder="Last Name" required>
+                       <md-error class="required">Enter Last Name</md-error>
+                        </md-form-field>
+                   </div>
+                   <div class ="form-group" style="width: 45%;float:left;margin-top: -17px;">
+                        <md-form-field class="example-full-width width"  (click) = "stre();">
+                          
+                                <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">info_outline</md-icon>
+                        <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"(keypress)="click2($event2)" mdInput type="password" [(ngModel)]="password" name="password" placeholder="Password" minlength="6" maxlength="12" required>
+                        
+                        <md-error class="required">Invalid Password</md-error>
+                        </md-form-field>
+                   <!--      <div *ngIf="str">
+                            <ng2-password-strength-bar [passwordToCheck]="password">
+                            </ng2-password-strength-bar>
+                        </div> -->
+                
+                </div>
+                <div class ="form-group"  style="width: 45%;float:left;padding-left:5%">
+                     <md-form-field class="example-full-width width"  (click) = "stre();">
+                       
+                          <!--    <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol">info_outline</md-icon> -->
+                     <input mdInput type="password" [(ngModel)]="password2" name="password2" placeholder="Confirm Password" minlength="6" maxlength="12" required>    
+                     <md-error class="required">Please Enter Confirm Password</md-error>
+                     </md-form-field>
+             
+             </div>
+                  <div class ="form-group" style="width: 45%;float:left;margin-top: 0px;">
+                      <md-form-field class="example-full-width width" (click) = "stren();">
+                       <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}"  mdInput type="text" [(ngModel)]="email"  name="email" placeholder="Email" >
+
+                      </md-form-field>
+                  </div>
+                  <div class ="form-group" style="width: 45%;float:left;padding-left:5%">
+                        <md-form-field class="example-full-width width" (click) = "stren();">
+                      <input (keypress)="click1($event)" onkeydown="call(event)"  mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone" name="phone"placeholder="Mobile Number" >
+
+                        </md-form-field>
+                        
+                </div>
+                       <div class ="form-group" style="width: 45%;float:left;margin-top: 0px;">
+                               <md-form-field class="example-full-width width"  (click) = "stren();">
+                               <input (keypress)="click2($event)" mdInput type="text" [(ngModel)]="org" name="org"placeholder="Organisation Name" >
+                             
+                           
+                           </md-form-field>
+                       </div>
+                       
+                 
+                       <div class ="form-group"  style="width: 55%;float:left;padding-left:5%">
+                       <p style="float:left">Type of user :
+                      <md-checkbox [(ngModel)]="dealer" name="dealer">Dealer</md-checkbox></p><br>
+                       </div><br><br>
+                       <div>
+                            <input type="reset" class="btn btn-primary" style="float: left;margin:0px 1px;cursor:pointer" (click)="valclear()" value="Clear"/>  
+                       
+                           
+                                <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Submit" (click)="addContact2()" />
+                       </div>
+                   <!--     <div *ngIf="show1">
+                       <div class ="form-group">
+                             <md-form-field class="example-full-width width" (click) = "stren();">
+                             <input mdInput type="text" [(ngModel)]="otp" name="otp" placeholder="Enter otp here" required>
+                             <md-error class="required">Enter OTP</md-error>
+                             </md-form-field>
+                       </div></div> -->
+                      <!--  <div class="g-recaptcha" style="padding:10px 0px;" data-sitekey="6LccSi0UAAAAAClz_ToR34fU2XCppuSB8SwFuZbU"></div> --><!-- <br>
+                       <input type="reset" class="btn btn-primary" style="float: left;margin:0px 1px;cursor:pointer" (click)="valclear()" value="Clear"/>   -->
+                       
+                  <!--     <input type ="button" class="btn btn-primary"(click)="addContact2()"  style="float: left;margin:0px 8px;cursor:pointer" value="Get OTP" *ngIf="show3"/> -->
+       
+                    <!--   <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Submit" (click)="addContact2()" /> -->
+       
+       <!-- 
+                   <input type="submit" class="btn btn btn-success" style="float: left;cursor:pointer" value="Submit" (click)="addContact()"  *ngIf="show2" /> -->
+                   <br>
+             <!--       <div><flash-messages ></flash-messages></div> -->
+                   
+                </form>
+     </div>
+
+     <div *ngIf="Enter_OTP">
+            <h3 style="text-align:left;">Mobile Verification</h3>
+            <div style="padding-top:5%">
+            Mobile Number - {{phone}}
+            <form class="form-group"  #lgForm="ngForm">   
+                    <div class ="form-group">
+                            <md-form-field class="example-full-width width" (click) = "stren();">
+                            <input mdInput type="text" minlength="6" maxlength="6" [(ngModel)]="otp" name="otp" placeholder="Enter otp here" required>
+                            <md-error class="required">Enter OTP</md-error>
+                            </md-form-field>
+                      </div>    
+                      <br>
+                      <div>
+                            <input type="submit" class="btn btn btn-danger" style="    float: left;
+                            cursor: pointer;
+                            width: 24%;
+                            padding-right: 2%;" value="Cancel" (click)="cancel()"/>
+
+                            <input type="submit" class="btn btn btn-warning" style="float: left;
+                            cursor: pointer;
+                            width: 38%;" value="Resend OTP" (click)="otpresend()"/>
+                            
+                            <input type="submit" class="btn btn btn-success" style="float: left;
+                            cursor: pointer;
+                            width: 38%;" value="Confirm OTP" (click)="addContact()"/>
+
+                      </div> 
+            </form>
+            </div>
+     </div>   
+     </md-card>
+<!--      <md-card fxHide.sm="true" fxHide.xs="true" fxFlex style="float:left;margin-left: 3vw;">
+       <img src="../../assets/image/1280.gif" style="width:auto;">
+       <div id="toast"><div id="desc">{{data_descip}}</div></div>  
+      </md-card> -->
+</div>
+               </div>
+    </body>
+</html>
+
diff --git a/src/app/signup/signup.component.ts b/src/app/signup/signup.component.ts
new file mode 100644
index 0000000..6e575ff
--- /dev/null
+++ b/src/app/signup/signup.component.ts
@@ -0,0 +1,432 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormControl, Validators} from '@angular/forms';
+import {ResponseOptions, Response} from '@angular/http';
+import {Contact} from '../contact';
+import {ContactService} from '../contact.service';
+import {Otp} from '../otp';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
+import { NguiMessagePopupComponent, NguiPopupComponent} from '@ngui/popup';
+const EMAIL_REGEX =/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+@Component({
+  selector: 'app-signup',
+  templateUrl: './signup.component.html',
+  styleUrls: ['./signup.component.css'],
+  providers: [ContactService]
+  
+})
+export class SignupComponent implements OnInit {
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.pattern(EMAIL_REGEX)]);
+   
+    public barLabel: string = "";
+    @ViewChild(NguiPopupComponent) popup: NguiPopupComponent;
+    first_name: string;
+    last_name: string;
+    email: string;
+   
+    password: string;
+    org: string;
+    phone: string;
+    otp:string;
+   show1:boolean = false;
+   show2:boolean = true;
+   show3:boolean = false;
+   str:boolean = false;
+    contacts: Contact[]=[];
+    contact: Contact;
+  Load:boolean = false;
+    lname:any;
+    emailId:any;
+    pwd:any;
+   s:any;
+   wrong_Phone:any;
+    org_name: string;
+    OTP_Come:boolean=true;
+    Enter_OTP:boolean=false;
+   message: string
+   login:any;
+   login1:any;
+   loginList:any;
+   val:any;
+ 
+    status:any;
+    j:any;
+    executed:any;
+    executed2:any;
+    mess:any;
+    emmnerr:any;
+    mess2:any;
+    password2:any;
+    dealer:boolean=false;
+    constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService) { }
+   
+    stre(){
+      this.str =true;
+    }
+    stren(){
+      this.str =false;
+    }
+    addContact2(){
+   if(this.first_name==null || this.last_name==null || this.password==null )
+     {
+
+      this.tost1("fill_all_Rfileds")
+     /*  this._flashMessagesService.show('Please fill required fields', { cssClass: 'alert-danger', timeout: 3000 }); */
+      
+     }
+     else if(this.phone == null && this.email == null){
+      this.tost1("Enter_email_mobile")
+    
+/*       this._flashMessagesService.show('Please fill Either Email ID or Mobile Number', { cssClass: 'alert-danger', timeout: 3000 }); */
+     }
+     else if(this.password2 != this.password){
+
+      this.tost1("psd_d_cpsd")
+     /*  this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 }); */
+
+     }
+     else if (this.email && this.phone){
+      this.Load=true
+      const newContact2 ={
+      first_name: this.first_name,
+      last_name: this.last_name,
+      email: this.email,
+      password: this.password,
+      org_name: this.org,
+      phone: this.phone,
+      dealer: this.dealer
+  }
+  this.contactService.addContact(newContact2)
+  .subscribe(contact => {
+    this.contacts.push(contact);
+    this.Load=false
+    this.OTP_Come = false;
+    this.Enter_OTP = true;
+    window.localStorage['EmailMobile'] = 'True';
+    //this.router.navigateByUrl("login");
+
+  }, (err: any) => { 
+    // console.log(err.status); 
+    // console.log(err);
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    let r = JSON.parse(err._body);
+    // console.log(r);
+    if(r == '[object Object]Error: Email ID or Mobile Number Already exists'){
+      this.emmnerr = r.split(":")[1];
+      this.tost1("EmM")
+    }
+    else{
+      this.emmnerr=JSON.parse(err._body);
+      this.tost1("EmM")
+    }
+  
+  }
+  else{
+    this.Load=false
+
+  }
+  });
+
+}
+     else if(this.phone){
+   
+      this.Load=true
+
+        const newContact2 ={
+        first_name: this.first_name,
+        last_name: this.last_name,
+        password: this.password,
+        org_name: this.org,
+        phone: this.phone,
+        dealer: this.dealer
+    }
+    this.contactService.addContact(newContact2)
+    .subscribe(contact => {
+      this.contacts.push(contact);
+      this.Load=false
+      this.OTP_Come = false;
+      this.Enter_OTP = true;
+      this.tost1("otp_sent");
+    }, (err: any) => { 
+      // console.log(err.status); 
+      // console.log(err);
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+    this.Load=false
+      this.wrong_Phone=JSON.parse(err._body);
+      this.tost1("wrong_Phone")
+    }
+    else{
+      this.Load=false
+
+    }
+    } );
+
+}
+else if(this.email){
+  this.Load=true
+
+  const newContact ={
+      
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.password,
+    org_name: this.org,
+    email: this.email,
+    dealer: this.dealer
+      }
+      this.contactService.addContact(newContact)
+      .subscribe(contact => {
+        this.contacts.push(contact);
+        if(contact.message === "Registered Sucessfully"){
+          this.Load=false
+        this.tost1("Confirm_Email")  
+        }
+      } , (err: any) => { 
+     
+      if(err.status ==   500)
+      {
+        this.Load=false
+        this.dup_email = JSON.parse(err._body);
+        this.tost1("dup_email")
+      }
+      else{
+        this.Load=false
+
+      }
+      } 
+    ); 
+}
+else{
+ /*  this._flashMessagesService.show("Enter either emailid or mobile number", { cssClass: 'alert-danger', timeout: 3000 }); */
+}
+
+}
+ph_data:any;
+otpresend(){
+  this.Load=true
+  this.contactService.resendotp(this.phone).subscribe(
+      
+    data => {
+      this.ph_data = data 
+      this.Load=false
+      this.tost1("otp_sent");
+    });
+}
+
+cancel(){
+  window.localStorage['EmailMobile'] = 'False';
+  this.Load=true
+  this.contactService.cancel_signup(this.phone).subscribe(
+      
+    data => {
+      this.ph_data = data 
+      this.Load=false
+      this.OTP_Come = true
+      this.Enter_OTP = false;
+    });
+ }
+data_descip:any;
+dup_email:any;
+tost1(divid){
+  if(divid == "dup_email"){
+    this.data_descip = this.dup_email.message;
+    launch_toast();
+  }
+  else if(divid == "Confirm_Email"){
+    this.data_descip = "We have Send you the COnfirmation Link please check your Email ID"
+    window.localStorage['Email'] = 'True'
+    launch_toast();
+    this.router.navigateByUrl("login");
+  }
+  else if(divid == "wrong_Phone"){
+    this.data_descip = this.wrong_Phone.message;
+    launch_toast();
+  }
+  else if(divid == "otp_sent")
+  {
+    this.data_descip = "OTP Sent Successfully";
+    launch_toast();
+  }
+  else if(divid == "EmM"){
+    this.data_descip =  this.emmnerr.message;
+    launch_toast();
+  }
+  else if(divid == "Enter_email_mobile"){
+    this.data_descip =  "Error: Enter ether mobile number or email ID"
+    launch_toast();
+  }
+  else if(divid == "WrongOTP"){
+    this.data_descip = "Error: Wrong OTP Entered"
+    launch_toast();
+  }
+  else if(divid == "fill_all_Rfileds"){
+    this.data_descip =  "Error: Please fill all required time"
+    launch_toast();
+  }
+  else if(divid == "psd_d_cpsd"){
+    this.data_descip = "Error: Password and confirm password donot match"
+    launch_toast();
+  }
+    function launch_toast() {
+     // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+  }
+   }
+  
+
+
+
+
+
+
+
+    addContact(){
+
+
+  if(this.phone && this.otp){
+    this.Load=true
+    const newContact ={
+      
+            phone: this.phone,
+            otp:this.otp
+        }
+        this.contactService.addContact(newContact)
+        .subscribe(contact => {
+          this.contacts.push(contact);
+          // console.log(contact.message);
+          if(contact.message === "Mobile Verified"){
+            this.Load=false
+       /*      this._flashMessagesService.show("Registered Sucessfully", { cssClass: 'success', timeout: 2000 });  */       
+              if(window.localStorage.EmailMobile == 'True'){
+                window.localStorage['Mobile'] = 'False'
+                window.localStorage['EmailMobile'] = 'True';
+                this.router.navigateByUrl("login");
+              }
+              else{
+                window.localStorage['Mobile'] = 'True'
+                this.router.navigateByUrl("login");
+              }
+             
+
+          }
+        } , (err: any) => {
+          //  console.log(err.status); 
+          // console.log(err);
+        if(err.status ==   500)
+        {
+          this.mess = err._body.split(":")[4] ;
+          this.mess2 = this.mess.split("}")[0];
+          // console.log(this.mess);
+          this.tost1("WrongOTP")
+       /*    this._flashMessagesService.show(this.mess2 +" Wrong OTP", { cssClass: 'alert-danger', timeout: 3000 }); */
+          // console.log("Error"); 
+        }
+        else{
+          // console.log("dadsa");
+        }
+        } 
+      ); 
+
+  }
+  else if(this.email){
+    this.Load=false
+    const newContact ={
+      
+      first_name: this.first_name,
+      last_name: this.last_name,
+      password: this.password,
+      org_name: this.org,
+      email: this.email,
+      dealer: this.dealer
+        }
+        this.contactService.addContact(newContact)
+        .subscribe(contact => {
+          this.contacts.push(contact);
+          // console.log(contact.message);
+          if(contact.message === "Registered Sucessfully"){
+       /*      this._flashMessagesService.show("Registered Sucessfully", { cssClass: 'success', timeout: 2000 });  */       
+            this.router.navigateByUrl("login");
+          }
+        } , (err: any) => { 
+      
+        if(err.status ==   500)
+        {
+          // console.log(err._body)
+       //   this.mess = err._body.split(":")[4] ;
+         // this.mess2 = this.mess.split("}")[0];
+        //  console.log(this.mess);
+         // this._flashMessagesService.show(this.mess2 +" Wrong Values", { cssClass: 'alert-danger', timeout: 3000 });
+        //  console.log("Error"); 
+        }
+        else{
+       //   console.log("dadsa");
+        }
+        } 
+      ); 
+  }
+  else{
+    this.tost1("Enter_email_mobile")
+  
+  /*   this._flashMessagesService.show("Enter either emailid or mobile number", { cssClass: 'alert-danger', timeout: 3000 }); */ 
+  }
+
+  
+
+    }
+    valclear(){        
+      
+    }
+ 
+    click1(event){
+      this.show2=false;
+      this.show3=true;
+      if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+      }
+      /* if(event.keyCode===13){
+      this.otp_window();
+      } */
+      
+      else
+      event.preventDefault();
+      }
+      $event2 :any;
+      click2(event2){
+        this.show2=true;
+        this.show3=false;
+        
+        }
+  
+       call(e) {
+        {
+               if (e.keyCode == 32) {
+                   e.preventDefault();
+               }
+           }
+   }
+
+      ngOnInit() {
+
+        this.contactService.getContacts()
+        .subscribe( contacts => this.contacts = contacts);
+       
+        
+     this.s=0;
+      }
+         
+          
+    
+ 
+            }
diff --git a/src/app/signup/try b/src/app/signup/try
new file mode 100644
index 0000000..200911d
--- /dev/null
+++ b/src/app/signup/try
@@ -0,0 +1,99 @@
+<div layout="row" layout-xs="column" style="margin-left: 10px;" >
+<md-card  fxFlex="30%" fxFlex.lt-md="90%" style="width:auto;
+float: left;padding-left: 40px;">
+<h3 style="text-align:left;">SignUp Form </h3>
+<form #userForm="ngForm" novalidate>
+    <div class="formgroup" >
+        <md-form-field class="example-full-width" style="box-shadow: none;">
+            <input mdInput placeholder="First_Name"  
+            required  name="name" [(ngModel)]="fname">
+          </md-form-field>  
+
+    </div>
+
+        <div class="formgroup" >
+        <md-form-field class="example-full-width">
+            <input mdInput placeholder="Last_Name" 
+             name="lastname" [(ngModel)]="lname">
+          </md-form-field>  
+        </div>
+
+        <div class="formgroup">
+        <md-form-field class="example-full-width">
+            <input mdInput placeholder="Email" [formControl]="emailFormControl">
+            <md-error *ngIf="emailFormControl.hasError('pattern')">
+              Please enter a valid email address
+            </md-error>
+            <md-error *ngIf="emailFormControl.hasError('required')">
+              Email is <strong>required</strong>
+            </md-error>
+          </md-form-field>
+        </div>
+
+
+         <div class="formgroup">
+            <md-form-field class="example-full-width">
+                <input type="password"  mdInput placeholder="Password"  
+                required  name="phone" [(ngModel)]="password">
+              </md-form-field>  
+            
+             </div>
+
+   
+        <div class="formgroup">
+        <md-form-field class="example-full-width">
+            <input type="number" mdInput placeholder="Phone"  min="10" max="10"
+            required  name="phone" [(ngModel)]="phone">
+          </md-form-field>  
+        
+         </div>
+
+    <div class="formgroup" >
+        <md-form-field class="example-full-width">
+            <input mdInput placeholder="organisation"   minlength="4"
+            required  name="organisation" [(ngModel)]="organisation">
+          </md-form-field>  
+        
+    </div>
+      
+    <div class="formgroup" >
+        <md-form-field class="example-full-width">
+            <input type="number"  mdInput placeholder="Enter otp" required=""
+             name="otp" [(ngModel)]="otp" >
+          </md-form-field>  
+        
+    </div>
+    <button type="reset" class="btn btn-primary" style="float: left;margin-left: 3px;">Clear</button>
+   
+  </form>
+    <button type="submit"  class="btn btn-primary" style="float: left;margin-left:2px;">Click for Otp</button>
+    <button [disabled]="!userForm.form.valid" class="btn btn-primary" type="submit" style="margin-left: 3px;
+    float: left;" (click)="submit()">Submit</button>
+  
+</md-card>
+<md-card fxHide.sm="true" fxHide.xs="true" fxFlex style="float:left;margin-left: 3vw;">
+  <img src="../../assets/image/1280.gif" style="width:auto;">
+</md-card>
+</div>
+
+.subscribe(
+(dataret => {
+this.data = dataret
+if(this.data.status == 200){
+this.ngProgress.done();
+this.Message="You have succesfully commented!";
+}
+}) ,(error => {
+/* console.log("error msg");console.log(error); */
+this.ngProgress.done();
+this.Message="There is an error!";
+}) 
+);
+}
+comment_via_enter1(event){ /* (comment sevice trigger on enter press) */
+if(event.keyCode===13){
+this.comment_here();
+}
+else{
+}
+}
diff --git a/src/app/soon/soon.component.css b/src/app/soon/soon.component.css
new file mode 100644
index 0000000..e8d14cb
--- /dev/null
+++ b/src/app/soon/soon.component.css
@@ -0,0 +1,152 @@
+/* ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .child {
+ 
+    background : #aaa;
+
+    padding: 10px;
+
+}
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 9%;
+   
+    position: fixed;
+    background-color: white;
+}
+.up{
+    color: gray;
+    
+    font-family: "Courier New", Courier, monospace;
+   
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+   */
+.main {
+  padding: 20px;
+  margin-top: 55px;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #e9e9e9;
+}
+
+.topnav a {
+  float: left;
+  display: block;
+  color: black;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #2196f3;
+  /* color: blueviolet; */
+  width: 290px;
+  font-size: larger;
+  font-weight: 600;
+}
+
+.topnav .search-container {
+  float: right;
+}
+
+.topnav input[type="text"] {
+  padding: 6px;
+  margin-top: 8px;
+  font-size: 17px;
+  border: black;
+}
+
+.topnav .search-container button {
+  float: right;
+  padding: 6px 10px;
+  margin-top: 8px;
+  margin-right: 16px;
+  background: #ddd;
+  font-size: 17px;
+  border: none;
+  cursor: pointer;
+}
+
+.topnav .search-container button:hover {
+  background: blue;
+}
+
+@media screen and (max-width: 600px) {
+  .topnav .search-container {
+    float: none;
+  }
+  .topnav a,
+  .topnav input[type="text"],
+  .topnav .search-container button {
+    float: none;
+    display: block;
+    text-align: left;
+    width: 100%;
+    margin: 0;
+    padding: 14px;
+  }
+  .topnav input[type="text"] {
+    border: 1px solid #ccc;
+  }
+}
+.col-md-6 {
+  margin-top: 15px;
+}
diff --git a/src/app/soon/soon.component.html b/src/app/soon/soon.component.html
new file mode 100644
index 0000000..ce92d1d
--- /dev/null
+++ b/src/app/soon/soon.component.html
@@ -0,0 +1,126 @@
+<div style="top: 0;position: absolute;">
+  <app-all-menus></app-all-menus>
+
+</div>
+
+<div class="main">
+  <!-- <div class="card"> -->
+    <div class="topnav">
+      <a class="active">IMEI Finder</a>
+     
+      <div class="search-container">
+        <form [formGroup]="searchForm" (ngSubmit)="submit()">
+          <input type="text" placeholder="Search.." formControlName="imei" [ngClass]="{ 'is-invalid': submitted && f.imei.errors }" name="imei">
+          <button type="submit"><i class="fa fa-search"></i></button>
+        
+          <div *ngIf="submitted && f.imei.errors" class="invalid-feedback">
+            <div *ngIf="f.imei.errors.required">Please Enter IMEI Number</div>
+          </div>
+        </form>
+      </div>
+      
+    </div>
+    
+
+    <div style="padding-left:16px;height: 100vh;">
+    <form [formGroup]="deviceForm" class="row g-3 mt-3">
+      <div class="col-md-6">
+        <label class="form-label">IMEI Number</label>
+        <input type="text" readonly formControlName="imei" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Registration Number</label>
+        <input type="text" readonly formControlName="registrationNumber" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Sim 1</label>
+        <input type="text" readonly formControlName="sim1" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Sim 2</label>
+        <input type="text" readonly formControlName="sim2" class="form-control">
+      </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Dealer</label>
+          <input type="text" readonly formControlName="dealaer" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">User</label>
+          <input type="text" readonly formControlName="user" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Super Admin</label>
+          <input type="text" readonly formControlName="superAdmin" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Vehicle Type</label>
+          <input type="text" readonly formControlName="vehicleType" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Device Model</label>
+          <input type="text" readonly formControlName="deviceModel" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Status</label>
+          <input type="text" readonly formControlName="status" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Creation date</label>
+          <input type="text" readonly formControlName="creationDate" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Expiration date</label>
+          <input type="text" readonly formControlName="expirationDate" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Last Renewal Date</label>
+          <input type="text" readonly formControlName="lastRenewal" class="form-control">
+        </div>
+
+        <div class="col-md-6">
+          <label class="form-label">Deleted</label>
+          <input type="text" readonly formControlName="deleted" class="form-control">
+        </div>
+
+        <div *ngIf="!deleteShow" class="col-md-6">
+          <label class="form-label">Deleted By</label>
+          <input type="text" readonly formControlName="deletedBy" class="form-control">
+        </div>
+        
+        <div *ngIf="!deleteShow" class="col-md-6">
+          <label class="form-label">Deleted At</label>
+          <input type="text" readonly formControlName="deletedAt" class="form-control">
+        </div>
+
+        <div *ngIf="!deleteShow" class="col-md-6">
+          <label class="form-label">Deleted From</label>
+          <input type="text" readonly formControlName="deletedFrom" class="form-control">
+        </div>
+
+        <div *ngIf="deleteShow" class="col-md-12 text-center mt-4">
+            <button class="btn btn-danger" (click)="deleteDevice()">Delete <i class="fa fa-trash"></i></button>
+        </div>
+
+         <div *ngIf="deleted" class="col-md-12 text-center mt-4">
+            <button class="btn btn-danger" (click)="deleteDevicePermenatly()">Delete Permanatly <i class="fa fa-trash"></i></button>
+        </div>
+
+      
+    </form>
+    </div>
+   
+  </div>
+<!-- </div> -->
+
diff --git a/src/app/soon/soon.component.ts b/src/app/soon/soon.component.ts
new file mode 100644
index 0000000..148cb63
--- /dev/null
+++ b/src/app/soon/soon.component.ts
@@ -0,0 +1,188 @@
+import { Component, OnInit, ViewChild, Input, } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MdSnackBar } from '@angular/material';
+
+import {ContactService} from '../contact.service';
+ 
+
+declare var google: any,swal: any;
+@Component({
+  selector: 'app-soon',
+  templateUrl: './soon.component.html',
+  styleUrls: ['./soon.component.css'],
+  providers: [ContactService],
+})
+
+export class SoonComponent implements OnInit  {
+  emailId: any;
+  searchForm:FormGroup;
+  deleteShow:boolean=false;
+   submitted = false;
+  userId: any;
+  deviceForm:FormGroup
+  data: any;
+  deleted:boolean=false;
+  // @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
+  constructor(private contactService:ContactService,private fb:FormBuilder,public snackBar: MdSnackBar){
+    
+    }
+  ngOnInit(): void {
+    this.searchForm=this.fb.group({
+      imei:['',Validators.required]
+    })
+    this.deviceForm=this.fb.group({
+      imei:[''],
+      registrationNumber:[''],
+      sim1:[''],
+      sim2:[''],
+      dealaer:[''],
+      user:[''],
+      deviceModel:[''],
+      vehicleType:[''],
+      expirationDate:[''],
+      creationDate:[''],
+      superAdmin:[''],
+      lastRenewal:[''],
+      status:[''],
+      deleted:[''],
+      deletedBy:[''],
+      deletedAt:[''],
+      deletedFrom:['']
+
+// 352887076587769
+    })
+     this.emailId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.userId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+  
+ get f() { return this.searchForm.controls; }
+
+  submit(){
+    console.log(this.searchForm.value);
+    
+      this.submitted = true;
+
+        // stop here if form is invalid
+        if (this.searchForm.invalid) {
+            return;
+        }
+        this.contactService.searchByImei(this.searchForm.value).subscribe((res:any)=>{
+          console.log(res);
+          this.data=res[0];
+          if(res.length!=0){
+            this.deleteShow=true
+            if(res[0].deletedDevice){
+              this.deleteShow=false;
+              this.deleted=true;
+            }else{
+
+              this.deleted=false;
+            }
+            this.deviceForm.patchValue({
+              imei:this.data.Device_ID,
+              registrationNumber:this.data.Device_Name,
+              sim1:this.data.sim_number?this.data.sim_number:'',
+              sim2:this.data.sim_number2?this.data.sim_number2:'',
+              dealaer:this.data.Dealer?(this.data.Dealer.first_name?this.data.Dealer.first_name:'')+' '+(this.data.Dealer.last_name?this.data.Dealer.last_name:''):'',
+              user:this.data.user?(this.data.user.first_name?this.data.user.first_name:'')+' '+(this.data.user.last_name?this.data.user.last_name:''):'',
+              deviceModel:this.data.device_model?this.data.device_model.device_type:'',
+              vehicleType:this.data.vehicleType?(this.data.vehicleType.brand?this.data.vehicleType.brand:'')+' '+(this.data.vehicleType.model?this.data.vehicleType.model:''):'',
+              expirationDate:this.data.expiration_date?this.data.expiration_date:'',
+              superAdmin:this.data.supAdmin?(this.data.supAdmin.first_name?this.data.supAdmin.first_name:'')+' '+(this.data.supAdmin.last_name?this.data.supAdmin.last_name:''):'',
+              lastRenewal:this.data.renew_at?this.data.renew_at:'',
+              creationDate:this.data.created_on?this.data.created_on:'',
+              status:this.data.status,
+              deleted:this.data.deletedDevice?'Yes':'No',
+              deletedBy:this.data.device_deleted_by?this.data.device_deleted_by.first_name+" "+this.data.device_deleted_by.last_name:' ',
+              deletedAt:this.data.device_delete_on,
+              deletedFrom:this.data.login_type,
+            })
+
+          }else{
+             this.deleteShow=false;
+             this.deviceForm.reset();
+             this.snackBar.open("No Data Found", '', {
+                duration: 4000,
+          });
+          }
+          
+        })
+
+  }
+
+             deleteDevice(){
+                      swal({                 
+                             title: '<strong>Are you sure?</strong>',
+                            icon: 'warning',
+                            html: "You won't be able to revert this!",
+                            showCloseButton: true,
+                            focusConfirm: false,
+                            // confirmButtonText: 'Reset today ODO',
+                            confirmButtonText: 'Yes, delete it!',
+                            // cancelButtonText: 'Reset total ODO',
+                            // cancelButtonAriaLabel: 'Thumbs down'
+                            cancelButtonText: 'No, cancel!',
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                              var req={
+                                device:this.data.Device_ID,
+                                userId:this.userId
+                          }
+                              this.contactService.deldev(req).subscribe(res=>{
+                                swal({
+                                 title: 'Deleted!',
+                                 html:'Your file has been deleted.',
+                                   icon:'success'
+                                })
+                              })
+                              this.deviceForm.reset();
+                            }
+                          }
+                        )
+  }
+
+    deleteDevicePermenatly(){
+                      swal({                 
+                             title: '<strong>Are you sure?</strong>',
+                            icon: 'warning',
+                            html: "Device will be deleted permanantly",
+                            showCloseButton: true,
+                            focusConfirm: false,
+                            // confirmButtonText: 'Reset today ODO',
+                            confirmButtonText: 'Yes, delete it!',
+                            // cancelButtonText: 'Reset total ODO',
+                            // cancelButtonAriaLabel: 'Thumbs down'
+                            cancelButtonText: 'No, cancel!',
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                              var req={
+                                device:this.data.Device_ID,
+                                userId:this.userId,
+                                permenant:true
+                          }
+                              this.contactService.deldev(req).subscribe(res=>{
+                                swal({
+                                 title: 'Deleted!',
+                                 html:'Your file has been deleted.',
+                                   icon:'success'
+                                })
+                              })
+                              this.deviceForm.reset();
+                            }
+                          }
+                        )
+  }
+
+ 
+  }
+  
+ 
+   
+   
+
+                       
+  
+                                 
+                               
+                               
+
diff --git a/src/app/sosalert/sosalert.component.html b/src/app/sosalert/sosalert.component.html
new file mode 100644
index 0000000..934373f
--- /dev/null
+++ b/src/app/sosalert/sosalert.component.html
@@ -0,0 +1,12 @@
+
+<div style="padding:0px;">
+    <div>
+        <i class="fas fa-times-circle" style="font-size: 4.2rem;margin-left: 41%;margin-bottom: 6%;color: #ed0000ad;"></i> 
+      <h4 style="text-align:center;">{{alertType}}</h4>
+      </div>
+      <div>
+        <p style="padding-top:20px;color:#605f5f;">{{alertMessage}}</p> 
+        <button style="background-color:#3B5998;border:#fdfdfd;width: 150px;height:50px;margin: 6% 21% 2% 29%;" class="btn btn-primary w3-button/" (click)="closePopup()">Close</button>       
+      </div>  
+</div>
+
diff --git a/src/app/sosalert/sosalert.component.scss b/src/app/sosalert/sosalert.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/sosalert/sosalert.component.spec.ts b/src/app/sosalert/sosalert.component.spec.ts
new file mode 100644
index 0000000..4224354
--- /dev/null
+++ b/src/app/sosalert/sosalert.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SOSAlertComponent } from './sosalert.component';
+
+describe('SOSAlertComponent', () => {
+  let component: SOSAlertComponent;
+  let fixture: ComponentFixture<SOSAlertComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SOSAlertComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SOSAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sosalert/sosalert.component.ts b/src/app/sosalert/sosalert.component.ts
new file mode 100644
index 0000000..d804dc8
--- /dev/null
+++ b/src/app/sosalert/sosalert.component.ts
@@ -0,0 +1,30 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+@Component({
+  selector: 'app-sosalert',
+  templateUrl: './sosalert.component.html',
+  styleUrls: ['./sosalert.component.scss']
+})
+export class SOSAlertComponent implements OnInit {
+  alertmsg:any;
+  vehicle_num:any;
+  alertMessage: any;
+  alertType: any;
+
+  constructor(public thisDialogRef: MdDialogRef<SOSAlertComponent>, @Inject(MD_DIALOG_DATA) public data: any) {
+    this.alertmsg = data.socketData;
+    console.log("alert Object", this.alertmsg);
+    this.vehicle_num = this.alertmsg.vehicleName;
+    this.alertMessage = this.alertmsg.item.sentence;
+    this.alertType = this.alertmsg.item._type ;
+   }
+
+  ngOnInit() {
+  }
+
+  closePopup(){
+    this.thisDialogRef.close("success");
+  }
+
+}
diff --git a/src/app/spec-dev/spec-dev.component.html b/src/app/spec-dev/spec-dev.component.html
new file mode 100644
index 0000000..787d682
--- /dev/null
+++ b/src/app/spec-dev/spec-dev.component.html
@@ -0,0 +1,5 @@
+<div id="dvMap" style="width: 500px; height: 500px;float:right">
+
+</div>
+    <textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" [(ngModel)]="locality" id="locality" ></textarea><br>
+
diff --git a/src/app/spec-dev/spec-dev.component.scss b/src/app/spec-dev/spec-dev.component.scss
new file mode 100644
index 0000000..7837515
--- /dev/null
+++ b/src/app/spec-dev/spec-dev.component.scss
@@ -0,0 +1,943 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+#dvMap {
+	height: 100%;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+::-webkit-scrollbar {
+    display: none;
+    }
+
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+
+
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+  #d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+  #active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+#ac{
+    color: rgb(38, 38, 90)
+  }
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#contact {
+    top: 200px;
+    background-color: #555
+}
+  
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    
\ No newline at end of file
diff --git a/src/app/spec-dev/spec-dev.component.spec.ts b/src/app/spec-dev/spec-dev.component.spec.ts
new file mode 100644
index 0000000..4e37f96
--- /dev/null
+++ b/src/app/spec-dev/spec-dev.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpecDevComponent } from './spec-dev.component';
+
+describe('SpecDevComponent', () => {
+  let component: SpecDevComponent;
+  let fixture: ComponentFixture<SpecDevComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpecDevComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpecDevComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/spec-dev/spec-dev.component.ts b/src/app/spec-dev/spec-dev.component.ts
new file mode 100644
index 0000000..ade44d5
--- /dev/null
+++ b/src/app/spec-dev/spec-dev.component.ts
@@ -0,0 +1,144 @@
+import { Component, OnInit } from '@angular/core';
+declare var google: any;
+
+@Component({
+  selector: 'app-spec-dev',
+  templateUrl: './spec-dev.component.html',
+  styleUrls: ['./spec-dev.component.scss']
+})
+export class SpecDevComponent implements OnInit {
+
+  constructor() { }
+ 
+  locality:any;
+  latlong(){
+    initializeAutocomplete();
+    function initializeAutocomplete(){
+        var input = document.getElementById('locality');
+        // var options = {
+        //   types: ['(regions)'],
+        //   componentRestrictions: {country: "IN"}
+        // };
+        var options = {}
+    
+        var autocomplete = new google.maps.places.Autocomplete(input, options);
+    
+        google.maps.event.addListener(autocomplete, 'place_changed', function() {
+          var place = autocomplete.getPlace();
+          var lat = place.geometry.location.lat();
+          var lng = place.geometry.location.lng();
+          var placeId = place.place_id;
+          // to set city name, using the locality param
+          var componentForm = {
+            locality: 'short_name',
+          };
+          for (var i = 0; i < place.address_components.length; i++) {
+            var addressType = place.address_components[i].types[0];
+            if (componentForm[addressType]) {
+              var val = place.address_components[i][componentForm[addressType]];
+             /*  document.getElementById("city").value = val; */
+             console.log(val);
+            }
+          }
+          console.log(lat);
+          console.log(lng);
+          console.log(placeId);
+         /*  document.getElementById("latitude").value = lat;
+          document.getElementById("longitude").value = lng;
+          document.getElementById("location_id").value = placeId; */
+        });
+      }
+  }
+  drawRoute(){
+    
+    var markers = [
+/*       {
+          "title": 'Alibaug',
+          "lat": '18.641400',
+          "lng": '72.872200',
+           }
+  , */
+      {
+          "title": 'Mumbai',
+          "lat": '18.964700',
+          "lng": '72.825800',
+         /*  "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
+    */   }
+  ,
+      {
+          "title": 'Pune',
+          "lat": '18.523600',
+          "lng": '73.847800',
+          /* "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
+      */ }
+];
+window.onload = function () {
+  var mapOptions = {
+      center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
+      zoom: 10,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+  };
+  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
+  var infoWindow = new google.maps.InfoWindow();
+  var lat_lng = new Array();
+  var latlngbounds = new google.maps.LatLngBounds();
+  for (i = 0; i < markers.length; i++) {
+      var data = markers[i]
+      var myLatlng = new google.maps.LatLng(data.lat, data.lng);
+      lat_lng.push(myLatlng);
+      var marker = new google.maps.Marker({
+          position: myLatlng,
+          map: map,
+       //   title: data.title
+      });
+      latlngbounds.extend(marker.position);
+      (function (marker, data) {
+          google.maps.event.addListener(marker, "click", function (e) {
+          //    infoWindow.setContent(data.description);
+            //  infoWindow.open(map, marker);
+          });
+      })(marker, data);
+  }
+  map.setCenter(latlngbounds.getCenter());
+  map.fitBounds(latlngbounds);
+
+  //***********ROUTING****************//
+
+  //Initialize the Path Array
+  var path = new google.maps.MVCArray();
+
+  //Initialize the Direction Service
+  var service = new google.maps.DirectionsService();
+
+  //Set the Path Stroke Color
+  var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });
+
+  //Loop and Draw Path Route between the Points on MAP
+  for (var i = 0; i < lat_lng.length; i++) {
+      if ((i + 1) < lat_lng.length) {
+          var src = lat_lng[i];
+          var des = lat_lng[i + 1];
+          path.push(src);
+          poly.setPath(path);
+          service.route({
+              origin: src,
+              destination: des,
+              travelMode: google.maps.DirectionsTravelMode.DRIVING
+          }, function (result, status) {
+              if (status == google.maps.DirectionsStatus.OK) {
+                  for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
+                      path.push(result.routes[0].overview_path[i]);
+                  }
+              }
+          });
+      }
+  }
+}
+
+  }
+  
+  ngOnInit() {
+    this.drawRoute();
+  }
+
+}
diff --git a/src/app/sub-amin/addsubadmin/addsubadmin.component.html b/src/app/sub-amin/addsubadmin/addsubadmin.component.html
new file mode 100644
index 0000000..56a97da
--- /dev/null
+++ b/src/app/sub-amin/addsubadmin/addsubadmin.component.html
@@ -0,0 +1,121 @@
+<div class="container-fluid" style="background: #f9f9f9;padding:0px">
+  <div style="text-align: center; font-size: 22px; font-weight: 500; background: #426E86; padding-top: 5px; color: white; padding-bottom: 5px;">
+      <p>{{headTitle | translate}}</p>
+      <p *ngIf="showError" style="text-align: center;color: red;font-weight: 500">{{errorMsg}}</p>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-12">
+          <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="userID" placeholder="{{'Enter User ID' | translate}}" name="userId" required>
+              <md-error class="pattern">{{'Please Enter User ID' | translate}}</md-error>
+          </md-form-field>
+      </div>
+      <div class="col-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="first_name" placeholder="{{'Enter First Name' | translate}}" name="first_name" required>
+              <md-error class="pattern">{{'Please Enter First Name' | translate}}</md-error>
+          </md-form-field>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="last_name" placeholder="{{'Enter Last Name' | translate}}" name="last_name" required>
+              <md-error class="pattern">{{'Please Enter Last Name' | translate}}</md-error>
+          </md-form-field>
+      </div>
+      <div class="col-6">
+          <md-form-field class="example-full-width width" (click)="stren();">
+              <input (keypress)="click2($event)" pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}" mdInput type="text" [(ngModel)]="emaill"  name="emaill" placeholder="{{'Enter Email ID ' | translate}}">
+          </md-form-field>
+      </div>
+  </div>
+  <div class="row" style="margin:0px" *ngIf="updateBtn === false">
+      <div class="col-6">
+          <md-form-field class="example-full-width width" (click)="stre();">
+              <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p1')">{{passwordIcon}}</md-icon>
+              <input (keypress)="click2($event)" pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" (keypress)="click2($event2)" mdInput type="{{passwordtype}}" [(ngModel)]="passwordd" name="passwordd" placeholder="{{'Enter Password' | translate}}" minlength="6" maxlength="12" required>
+              <md-error class="required">{{'Invalid Password' | translate}}</md-error>
+          </md-form-field>
+      </div>
+      <div class="col-6">
+          <md-form-field class="example-full-width width" (click)="stre();">
+              <md-icon style="float:right;margin-bottom:12px;height:5px;cursor:pointer" mdTooltip="Password Tips : &#013;Min 6 character & Max 12 character. Password must contain at least one small & one capital alphabet , one numeric digit and one special symbol" (click)="showpassword('p2')">{{passwordIcon_1}}</md-icon>
+              <input mdInput type="{{passwordtype_1}}" [(ngModel)]="password2" name="password2" placeholder="{{'Confirm Password' | translate}}" minlength="6" maxlength="12" required>
+              <md-error class="required">{{'Please Enter Confirm Password' | translate}}</md-error>
+          </md-form-field>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+      <div class="col-6">
+     
+          <md-form-field class="example-full-width width" (click)="stren();">
+              <input type="tel" (keypress)="click1($event)" onkeydown="call(event)" mdInput  id="telephone" [(ngModel)]="phone" minlength="10" maxlength="10">
+          </md-form-field> 
+      </div>
+      <div class="col-6">
+          <md-form-field class="example-full-width width">
+              <input mdInput type="text" [(ngModel)]="address" placeholder="{{'Enter address' | translate}}" name="address" required>
+              <md-error class="pattern">{{'Please Enter address' | translate}}</md-error>
+          </md-form-field>
+      </div>
+  </div>
+  <div class="row" style="margin:0px">
+    <div *ngIf="isOrganisation" class="col-6" style="margin-bottom: 20px;">
+        <lable>Role</lable>
+        <select class="form-control" [(ngModel)]="selectedRole">
+            <option *ngFor="let item of role1"  [value]="item.value" >{{item.name}}</option>
+        </select>
+        </div>
+    <div *ngIf="!isOrganisation" class="col-6" style="margin-bottom: 20px;">
+        <lable>Role</lable>
+        <select class="form-control" [(ngModel)]="selectedRole">
+            <option *ngFor="let item of role" [value]="item.value">{{item.name}}</option>
+        </select>
+    </div>
+      <div class="col-6" style="margin-bottom: 20px;">
+          <lable>Timezone</lable>
+          <select id="dbselect" >
+              <option *ngFor="let zone of timezoneArray"  [value]="zone.value" [selected] = "zone.value === timezone">{{ zone.viewValue }}</option>
+          </select>
+      </div>
+  </div> 
+  <!-- <div class="row" style="margin:0px">
+      <div class="col-12"> <span>{{'Upload Documents' | translate}} :</span>
+          <button mdTooltip="upload Documents" style="border:1px solid transparent; background-color: transparent;cursor:pointer;float:right" (click)="AddDocumentsField('addedrow')">
+              <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+          </button>
+      </div>
+  </div>
+  <div class="row" style="margin:0px" *ngFor="let data of imageuploadObject; let i =index" [ngClass]="{'rowHeight':docRow}">
+      <div class="col-3" style="padding-right: 0px">
+          <md-select class="example-full-width width" (ngModelChange)="documentType($event)" [(ngModel)]="data.doctype" placeholder="{{'Doc Type' | translate}}">
+              <md-option *ngFor="let doc of documentList" [value]="doc.docId">{{doc.docName}}</md-option>
+          </md-select>
+      </div>
+      <div class="col-3" style="margin-top: 4px;padding-right: 0px">
+          <md-form-field class="example-full-width width">
+              <input type="text" [(ngModel)]="data.phone" mdInput placeholder="{{'Doc Number' | translate}}">
+          </md-form-field>
+      </div>
+      <div class="col-4" style="margin-top: 7px;padding-right: 0px">
+      
+          <input type="file" class="form-control" placeholder='{{"Choose a file..." | translate}}' (change)="onFileChanged($event)" />
+      </div>
+      <div class="col-2" style="padding-right: 0px">
+          <md-icon style="float: right;width:50px;height:50px;color:green; cursor:pointer;padding-top:15px;" (click)="onUpload(i)">cloud_upload</md-icon>
+          <md-icon style="float: right;width:50px;height:50px;color:#d81111;; cursor:pointer;padding-top:15px;" (click)="DeleteDocumentsField(i)">delete</md-icon>
+      </div>
+  </div> -->
+  <div class="row" style="margin:0px" style="text-align: center;padding-top: 20px;">
+      <div class="col-12">
+          <button style="background-color: #484848;color:#fdfdfd;width: 135px;" md-raised-button (click)="check()">{{'SUBMIT' | translate}}</button>
+          <button style="background-color: red;color:#fdfdfd;width: 135px;" md-raised-button (click)="closebox()">{{'CANCEL' | translate}}</button>
+      </div>
+  </div>
+</div>
diff --git a/src/app/sub-amin/addsubadmin/addsubadmin.component.scss b/src/app/sub-amin/addsubadmin/addsubadmin.component.scss
new file mode 100644
index 0000000..d0af1e9
--- /dev/null
+++ b/src/app/sub-amin/addsubadmin/addsubadmin.component.scss
@@ -0,0 +1,1184 @@
+#body{
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+::-webkit-scrollbar {
+    display: none;
+    }
+    #d:hover { 
+        color: rgb(14, 102, 18);
+
+        
+    }
+    #ac{
+        color: rgb(38, 38, 90)
+    }
+    #active{
+        text-decoration-line: underline;
+        text-decoration-color: rgb(66, 26, 245);
+    } 
+    .switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+      }
+      
+      .switch input {display:none;}
+      
+      .slider {
+        position: absolute;
+        cursor: pointer;
+        top: 6px;
+        left: 11px;
+        right: 7px;
+        bottom: 7px;
+        background-color: #ccc;
+        transition: .4s;
+      }
+      
+      .slider:before {
+        position: absolute;
+        content: "";
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 5px;
+        background-color: white;
+        transition: .4s;
+      }
+      
+      input:checked + .slider {
+        background-color: #2196F3;
+      }
+      
+      input:focus + .slider {
+        box-shadow: 0 0 1px #2196F3;
+      }
+      
+      input:checked + .slider:before {
+        -webkit-transform: translateX(26px);
+        -ms-transform: translateX(26px);
+        transform: translateX(26px);
+      }
+      
+      /* Rounded sliders */
+      .slider.round {
+        border-radius: 34px;
+      }
+      
+      .slider.round:before {
+        border-radius: 50%;
+      }
+
+
+.sk-fading-circle {
+    margin: 100px auto;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    
+  }
+
+  .rowHeight{
+    height:60px;
+    overflow: scroll
+}
+  
+  .sk-fading-circle .sk-circle {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  
+  
+  .sk-fading-circle .sk-circle:before {
+    content: '';
+    display: block;
+    margin: 0 auto;
+    width: 15%;
+    height: 15%;
+    background-color: #333;
+    border-radius: 100%;
+    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+  }
+  .sk-fading-circle .sk-circle2 {
+    -webkit-transform: rotate(30deg);
+        -ms-transform: rotate(30deg);
+            transform: rotate(30deg);
+  }
+  .sk-fading-circle .sk-circle3 {
+    -webkit-transform: rotate(60deg);
+        -ms-transform: rotate(60deg);
+            transform: rotate(60deg);
+  }
+  .sk-fading-circle .sk-circle4 {
+    -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
+  }
+  .sk-fading-circle .sk-circle5 {
+    -webkit-transform: rotate(120deg);
+        -ms-transform: rotate(120deg);
+            transform: rotate(120deg);
+  }
+  .sk-fading-circle .sk-circle6 {
+    -webkit-transform: rotate(150deg);
+        -ms-transform: rotate(150deg);
+            transform: rotate(150deg);
+  }
+  .sk-fading-circle .sk-circle7 {
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+  }
+  .sk-fading-circle .sk-circle8 {
+    -webkit-transform: rotate(210deg);
+        -ms-transform: rotate(210deg);
+            transform: rotate(210deg);
+  }
+  .sk-fading-circle .sk-circle9 {
+    -webkit-transform: rotate(240deg);
+        -ms-transform: rotate(240deg);
+            transform: rotate(240deg);
+  }
+  .sk-fading-circle .sk-circle10 {
+    -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  .sk-fading-circle .sk-circle11 {
+    -webkit-transform: rotate(300deg);
+        -ms-transform: rotate(300deg);
+            transform: rotate(300deg); 
+  }
+  .sk-fading-circle .sk-circle12 {
+    -webkit-transform: rotate(330deg);
+        -ms-transform: rotate(330deg);
+            transform: rotate(330deg); 
+  }
+  .sk-fading-circle .sk-circle2:before {
+    -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s; 
+  }
+  .sk-fading-circle .sk-circle3:before {
+    -webkit-animation-delay: -1s;
+            animation-delay: -1s; 
+  }
+  .sk-fading-circle .sk-circle4:before {
+    -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s; 
+  }
+  .sk-fading-circle .sk-circle5:before {
+    -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s; 
+  }
+  .sk-fading-circle .sk-circle6:before {
+    -webkit-animation-delay: -0.7s;
+            animation-delay: -0.7s; 
+  }
+  .sk-fading-circle .sk-circle7:before {
+    -webkit-animation-delay: -0.6s;
+            animation-delay: -0.6s; 
+  }
+  .sk-fading-circle .sk-circle8:before {
+    -webkit-animation-delay: -0.5s;
+            animation-delay: -0.5s; 
+  }
+  .sk-fading-circle .sk-circle9:before {
+    -webkit-animation-delay: -0.4s;
+            animation-delay: -0.4s;
+  }
+  .sk-fading-circle .sk-circle10:before {
+    -webkit-animation-delay: -0.3s;
+            animation-delay: -0.3s;
+  }
+  .sk-fading-circle .sk-circle11:before {
+    -webkit-animation-delay: -0.2s;
+            animation-delay: -0.2s;
+  }
+  .sk-fading-circle .sk-circle12:before {
+    -webkit-animation-delay: -0.1s;
+            animation-delay: -0.1s;
+  }
+  
+  @-webkit-keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; }
+  }
+  
+  @keyframes sk-circleFadeDelay {
+    0%, 39%, 100% { opacity: 0; }
+    40% { opacity: 1; } 
+  }
+
+
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+  .upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 17%;
+   /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+   
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+
+body {margin:0}
+
+.icon-bar {
+    width: 17%;
+/*     background-color: #555; */
+background-color: #18262F;
+    margin-top: -9px;
+    height:100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 299px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+.iphone {
+    width: 201px;
+    height: 378px;
+    background: #f9f7f9;
+    border: 5px solid #c1bfc1;
+    border-radius: 45px;
+    opacity: 0.8;
+}
+.highlight {
+    width: 185px;
+    height: 366px;
+    border: 3px solid #fff;
+    border-radius: 45px;
+    position: relative;
+    z-index: 10;
+    top: -748px;
+    left: 10px;
+}
+.circle {
+    width: 7px;
+    height: 7px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -370px;
+    left: 92px;
+}
+.camera {
+    width: 10px;
+    height: 10px;
+    background: #333;
+    border-radius: 50%;
+    position: relative;
+    top: -376px;
+    left: 66px;
+}
+.speaker {
+    width: 59px;
+    height: 3px;
+    background: #333;
+    border-radius: 5px;
+    position: relative;
+    top: -372px;
+    left: 73px;
+}
+.screen {
+    width: 166px;
+    height: 255px;
+    border: 3px solid #333;
+    border-radius: 5px;
+    position: relative;
+    left: 18px;
+    top: -365px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+}
+.home1 {
+    width: 47px;
+    height: 47px;
+    background: #fff;
+    border-radius: 50%;
+    position: relative;
+    top: -353px;
+    left: 79px;
+    z-index: 2;
+}
+.home2 {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    position: relative;
+    top: -403px;
+        left: 77px;
+background: #7f8282;
+background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+background: -o-linear-gradient(#e2e3e4, #7f8282);
+background: -moz-linear-gradient(#e2e3e4, #7f8282);
+background: linear-gradient(#e2e3e4, #7f8282);
+} 
+#c2{
+    //background:green;
+    float:right;
+}
+#c1, #c2 {
+    width: 33%; 
+    //background: rebeccapurple
+}
+
+#c3 {
+    width: auto;
+     width:34%;
+    // background: red
+}
+.off{
+    margin: auto;
+    width: 60%;
+    top:70%;
+    padding: 10px;
+    margin-right:30%
+    
+}
+.newspaper {
+    -webkit-column-count: 2; /* Chrome, Safari, Opera */
+    -moz-column-count: 2; /* Firefox */
+    column-count: 2;
+    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+    -moz-column-gap: 40px; /* Firefox */
+    column-gap: 40px;
+    align-content:left;
+    text-align: left;
+}
+#demo {
+    margin: 30px 0 50px 0;
+    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+    
+}
+
+#demo .wrapper {
+    display: inline-block;
+    width: 180px;
+    margin: 0 10px 0 0;
+    height: 20px;
+    position: relative;
+  
+}
+
+#demo .parent {
+    height: 100%;
+    width: 100%;
+    display: block;
+    cursor: pointer;
+    line-height: 30px;
+    height: 30px;
+    border-radius: 5px;
+    background: #F9F9F9;
+    border: 1px solid #AAA;
+    border-bottom: 1px solid #777;
+    color: #282D31;
+    font-weight: bold;
+    z-index: 2;
+    position: relative;
+    -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+    -webkit-transition-delay: .8s;
+    text-align: center;
+}
+
+#demo .parent:hover,
+#demo .content:hover ~ .parent {
+    background: #fff;
+    -webkit-transition-delay: 0s, 0s, 0s;
+}
+
+#demo .content:hover ~ .parent {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    z-index: 0;
+}
+
+#demo .content {
+    position: absolute;
+    top: 0;
+    display: block;
+    z-index: 1;
+    height: 0;
+    width: 180px;
+    padding-top: 30px;
+    -webkit-transition: height .5s ease;
+    -webkit-transition-delay: .4s;
+    border: 1px solid #777;
+    border-radius: 5px;
+    box-shadow: 0 1px 2px rgba(0,0,0,.4);
+}
+
+#demo .wrapper:active .content {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+#demo .content:hover {
+    height: 123px;
+    z-index: 3;
+    -webkit-transition-delay: 0s;
+}
+
+
+#demo .content ul {
+    background: #fff;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    height: 100%;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+#demo .content ul a {
+    text-decoration: none;
+}
+
+#demo .content li:hover {
+    background: #eee;
+    color: #333;
+}
+
+#demo .content li {
+    list-style: none;
+    text-align: left;
+    color: #888;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding-left: 10px;
+    border-top: 1px solid #ccc;
+}
+
+#demo .content li:last-of-type {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.customClass {
+    background-color: #dd3;
+    border-radius: 5px;
+    margin:5px;
+    width: 500px;
+}
+
+.customClass .img-ul-upload {
+    background-color: #000 !important;
+}
+
+.customClass .img-ul-clear {
+    background-color: #B819BB !important;
+}
+
+.customClass .img-ul-drag-box-msg {
+    color: purple !important;
+}
+
+.customClass .img-ul-container {
+    background-color: #FF6CAD !important;
+}
+.img-ul-file-upload[_ngcontent-c6] {
+    padding: 16px;
+    height: 201px !important;
+}
+.weekDays-selector input {
+    display: none!important;
+  }
+  
+  .weekDays-selector input[type=checkbox] + label {
+    display: inline-block;
+    border-radius: 6px;
+    background: #dddddd;
+    height: 40px;
+    width: 34.2px;
+    margin-right: 3px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+  }
+  
+  .weekDays-selector input[type=checkbox]:checked + label {
+    background: #2AD705;
+    color: #ffffff;
+  }
+  @media screen and (max-width: 900px) {
+        .icon-bar{
+            display: none;
+            
+        }
+        .sch{
+            display: none;
+        }
+        .first{
+            width:1%!important;
+        }
+        .second{
+            margin-left: 8px!important;
+        }
+        .small{
+            display: block!important;
+        }
+        .image{
+            display: none;
+        }
+        .schlar{
+            display: block!important;
+        }
+  }
+
+  @media screen and (min-width: 900px) {
+.schlar{
+    display: none;
+}
+
+  }
+  .small{
+      display: none;
+  }
+  .first{
+    float:left;
+    width: 16%; 
+    height:86vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 5px
+  }
+  .second{
+    width: 88%; 
+    height:86vh;
+    margin-left:171px;
+  }
+ .mat-dialog-container {
+    max-width: none !important;
+}
+.sch{
+
+}
+.schlar{
+
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+.expansion-panel__content{
+    margin-left: 0% !important;
+}
+
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+    position: absolute; z-index: 99;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+
+#contact {
+    top: 200px;
+    background-color: #555
+}
+  
+
+.button2 {background-color: #008CBA;}
+.ngx-picker--btn {
+    color: #000;
+    background-color: transparent;
+    border: none;
+    padding: 1em;
+    font-size: 1em; }
+    .ngx-picker--btn__selected {
+      background-color: #eee; }
+    .ngx-picker--btn:hover {
+      transition: .25s ease;
+      background-color: #eee;
+      cursor: pointer; }
+    .ngx-picker--btn:focus {
+      outline-color: transparent; }
+  
+  .ngx-picker--btn__month:hover {
+    border-top-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__done:hover {
+    border-bottom-right-radius: 0.2em; }
+  
+  .ngx-picker--btn__now:hover {
+    border-bottom-left-radius: 0.2em; }
+  
+  .ngx-picker--btn__next:hover {
+    border-top-right-radius: 0.2em; }
+  
+  .calendar {
+    position: absolute;
+    background-color: #e6e6e6;
+    max-width: 16em;
+    min-width: 16em;
+    font-size: 16px;
+    font-family: "Arial", sans-serif;
+    border-radius: 0.2em;
+    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+  
+  .calendar--previous-and-next {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    justify-content: flex-end; }
+  
+  .calendar--footer {
+    display: flex;
+    justify-content: space-between;
+    background-color: #e6e6e6;
+    padding: 0;
+    border-radius: 0.2em; }
+  
+  .calendar--years-select,
+  .calendar--months-select {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: 14.85em;
+    background-color: #fff;
+    width: 100%; }
+  
+  .calendar--year,
+  .calendar--month {
+    display: block;
+    padding: .5em 1em;
+    width: 100%;
+    overflow: hidden;
+    color: #000; }
+    .calendar--year__selected,
+    .calendar--month__selected {
+      color: #000;
+      font-weight: bold;
+      background-color: #eee; }
+    .calendar--year:hover,
+    .calendar--month:hover {
+      cursor: pointer;
+      background-color: #eee;
+      font-weight: 400;
+      color: #000; }
+  
+  .calendar--days-of-week {
+    display: flex;
+    justify-content: space-around;
+    background-color: #eee; }
+  
+  .calendar--day-of-week {
+    position: relative;
+    padding: .5em;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000;
+    font-size: .9em; }
+  
+  .calendar--days-select {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: #fff; }
+  
+  .calendar--day {
+    text-align: center;
+    width: 1.285em;
+    padding: .5em;
+    font-weight: 500;
+    color: #000; }
+    .calendar--day__muted {
+      color: #999; }
+    .calendar--day__selected {
+      background-color: #eee;
+      color: #000; }
+    .calendar--day:hover {
+      cursor: pointer;
+      color: #000;
+      background-color: #eee; }
+  
+  .ngx-picker {
+    display: flex;
+    position: relative; }
+    .ngx-picker .calendar {
+      position: absolute;
+      left: 0;
+      top: 2.5em;
+      z-index: 3; }
+  
+  .time-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #e6e6e6; }
+  
+  .time--values {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: 16em;
+    min-width: 16em;
+    background-color: #eee; }
+  
+  .time--value {
+    width: 2.66em;
+    font-size: 1em;
+    padding: .5em 0;
+    text-align: center;
+    color: #000; }
+    .time--value__selected {
+      color: #000;
+      background-color: #e6e6e6; }
+    .time--value:hover {
+      transition: .25s ease;
+      cursor: pointer;
+      background-color: #e6e6e6; }
+  
+  [hidden] {
+    display: none !important; }
+    #c11 {
+        width: 25%; 
+        float:left
+    }
+    #c22{
+        width: 25%; 
+        float:left
+    }
+    #c33 {
+        width: 25%; 
+        float:left
+        
+    }
+    #c44{
+        width: 25%; 
+        float:left
+    }
+    #c111 {
+        width: 50%; 
+        float:left
+    }
+    #c222{
+        width: 45%; 
+        float:left
+    }
+    #c333 {
+        width: 5%; 
+        float:left
+        
+    }
+    #myTable {
+        border-collapse: collapse;
+        width: 100%;
+        border: 1px solid #ddd;
+        font-size: 12px;
+      }
+      
+      #myTable th, #myTable td {
+        text-align: left;
+        padding: 12px;
+      }
+      
+      #myTable tr {
+        border-bottom: 1px solid #ddd;
+      }
+      
+      #myTable tr.header, #myTable tr:hover {
+        background-color: #f1f1f1;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .width{
+        width: 100%;
+    }
+    
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/sub-amin/addsubadmin/addsubadmin.component.spec.ts b/src/app/sub-amin/addsubadmin/addsubadmin.component.spec.ts
new file mode 100644
index 0000000..7fd2558
--- /dev/null
+++ b/src/app/sub-amin/addsubadmin/addsubadmin.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddsubadminComponent } from './addsubadmin.component';
+
+describe('AddsubadminComponent', () => {
+  let component: AddsubadminComponent;
+  let fixture: ComponentFixture<AddsubadminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddsubadminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddsubadminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sub-amin/addsubadmin/addsubadmin.component.ts b/src/app/sub-amin/addsubadmin/addsubadmin.component.ts
new file mode 100644
index 0000000..c2a32de
--- /dev/null
+++ b/src/app/sub-amin/addsubadmin/addsubadmin.component.ts
@@ -0,0 +1,691 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdDialog, MD_DIALOG_DATA, MdDialogRef } from '@angular/material';
+import { Subject } from 'rxjs';
+declare var $:any;
+declare var swal: any;
+declare var google :any;
+import * as moment from 'moment-timezone';
+
+@Component({
+  selector: 'app-addsubadmin',
+  templateUrl: './addsubadmin.component.html',
+  styleUrls: ['./addsubadmin.component.scss']
+})
+export class AddsubadminComponent implements OnInit {
+  modelChanged: Subject<string> = new Subject<string>();
+  myInput: string;
+  superAdmin: any;
+  emailid: any;
+  useridd: any;
+  sup_admin: any;
+  custtype: any;
+  timezoneArray: any[];
+  countrySelected: { countryCode: any; dialcode: any; };
+  first_name: any;
+
+
+  show1:boolean = false;
+  show2:boolean = true;
+  passwordtype : any = 'password';
+  passwordtype_1 :any = 'password';
+  show3:boolean = false;
+ 
+  imageuploadObject = [];
+  timezone:any = 'Asia/Kolkata';
+  last_name:any=null;
+  passwordd:any=null;
+  org_name:any=null;
+  emaill:any=null;
+  phone:any=null;
+  executed:any;
+  $event2:any;
+  dealer:any;
+
+  login1:any;
+  mess2:any;
+  mess:any;
+  otp:any;
+  str:boolean = false;
+  password2:any=null;
+  before:any;
+  emmnerr:any;
+  Load:any
+  $event:any;
+  fs:any;
+  ls:any;
+  selectedRole="subadmin"
+
+  cust:boolean=false;
+  mb:any;
+  logo:any;
+  text:any;
+  userID:any;
+  role=[{name:'SubAdmin',value:'subadmin'},{name:"CC",value:'cc'}]
+  role1=[{name:'SubAdmin',value:'subadmin'},{name:"KYC Approval",value:'kycApproval'},{name:"CC",value:'cc'}]
+  documentDetail:any;
+  imageURL:any;
+  address: any;
+  contacts=[];
+  isOrganisation
+  telCountryCode: any;
+  showError :boolean = false;
+  updateBtn:boolean=false;
+  headTitle = 'ADD SUBADMIN';
+  errorMsg: string;
+  organisation: any;
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<AddsubadminComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) {
+      console.log(this.data);
+      if((this.data != undefined)&&(this.data.edit === true)){
+          this.updateBtn = true;
+          this.headTitle = 'EDIT SUBADMIN';
+          this.userID = this.data.user_id?this.data.user_id:'';
+          this.first_name = this.data.first_name?this.data.first_name:'';
+          this.last_name = this.data.last_name?this.data.last_name:'';
+          this.emaill = this.data.email?this.data.email:'';
+          this.phone = this.data.phone?this.data.phone:'';
+          this.address =this.data.address?this.data.address:'';
+          this.selectedRole=this.data.customer_role?this.data.customer_role:'subadmin';
+          // this.expDate = this.data.expire_date?this.data.expire_date:'';
+          if(this.data.std_code != undefined){
+            var cc = this.data.std_code.countryCode?this.data.std_code.countryCode:'in'
+            $('#telephone').intlTelInput("setCountry",cc);
+          }
+      
+
+      }
+  }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+ 
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+  
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  
+    this.sup_admin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    var that = this;
+    this.isOrganisation=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation;
+    if(this.superAdmin){
+      this.sup_admin = this.useridd;
+    }
+    this.organisation=JSON.parse(window.atob(window.localStorage.token.split(".")[1])).organisation;
+    console.log("this.isOrganisation",this.isOrganisation);
+    
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+  //  this.getdev();
+
+  if(this.custtype == true){
+    this.cust = true;
+  }
+
+  var that = this;
+    setTimeout(() => {
+     that.telCountryCode =  $("#telephone").intlTelInput({
+        allowDropdown:true,
+        autoPlaceholder:"Enter Mobile Number",
+        initialCountry:"in",
+        preferredCountries: ["in","us" ],
+        separateDialCode:true,
+        }); 
+    }, 300);
+
+    var Phoneinput = document.getElementById('telephone');
+    var that = this;
+    Phoneinput.addEventListener("countrychange",function(p) {
+      console.log("Inside Function");
+      var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+      console.log(countryData); 
+      that.countrySelected = {
+        countryCode : countryData.iso2,
+        dialcode: countryData.dialCode
+      }
+      });
+
+
+
+  var timeZn = moment.tz.guess(); 
+  if(timeZn != 'Asia/Calcutta'){
+    this.timezone = timeZn;
+  }
+  console.log(this.timezone);
+
+
+var timeZones = moment.tz.names();
+console.log(timeZones);
+this.timezoneArray=[];
+for (var i in timeZones) {
+  this.timezoneArray.push({ viewValue: "(GMT" + moment.tz(timeZones[i]).format('Z') + ")" + timeZones[i], value: timeZones[i] });
+}
+
+
+setTimeout(() => {
+  $('#dbselect').multipleSelect({
+    width: 300,
+    placeholder: 'Select Timezone',
+    filter: true,
+    single: true,
+    selectAll: false
+  })   
+}, 100);
+
+  }
+
+  check(){
+    if(this.updateBtn === true){
+      this.editDealer();
+    }else{
+      this.addContact2();
+    }
+  }
+
+  addContact2(){
+    var tzone = $('#dbselect').multipleSelect('getSelects','value'); 
+    console.log(tzone);
+   var expDate = new Date()
+   expDate.setFullYear(expDate.getFullYear()+1); 
+   var countryData = $('#telephone').intlTelInput("getSelectedCountryData");
+   console.log(countryData); 
+   this.countrySelected = {
+     countryCode : countryData.iso2,
+     dialcode: countryData.dialCode
+   }
+   console.log('expDate=>',expDate);
+    if(this.first_name==null || this.last_name==null || this.passwordd==null)
+      {
+     return  this._flashMessagesService.show('Please fill all Requied fields', { cssClass: 'alert-danger', timeout: 3000 });
+       
+      }  
+      else if((this.userID == undefined)||(this.userID.trim() == '')){
+      return  this._flashMessagesService.show('User ID is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+      }   
+      // else if((this.emaill == undefined)||(this.emaill.trim() == '')){
+      //  return this._flashMessagesService.show('Email is mandatory', { cssClass: 'alert-danger', timeout: 3000 });
+
+      // }
+      else if(this.password2 != this.passwordd){
+       // this._flashMessagesService.show('Password and Confirm Password do not match', { cssClass: 'alert-danger', timeout: 3000 });
+        this.tost1("psdnmtch")
+       }
+      else if (this.emaill && this.phone){
+        this.Load=true
+   //  if (!this.executed) {
+       
+    //   this.executed = true;
+       const newContact2 ={
+       first_name: this.first_name,
+       last_name: this.last_name,
+       email: this.emaill,
+       password: this.passwordd,
+       phone: this.phone,
+       isDealer: true,
+       custumer:false,
+       sysadmin:this.superAdmin,
+       expdate : new Date(expDate),
+       supAdmin:this.sup_admin,
+       user_id:this.userID,
+       address:this.address,
+       customer_role: this.selectedRole?this.selectedRole:'subadmin'
+
+   }
+
+   if(this.countrySelected != undefined){
+    newContact2['std_code']=this.countrySelected;
+   }
+   if(this.isOrganisation){
+  newContact2['organisation']=this.useridd
+}
+   
+      if (tzone != undefined) {
+        newContact2['timezone'] = tzone[0];
+      }
+
+  
+
+   if(this.imageuploadObject.length > 0){  
+     
+    for(var d = 0 ;d <this.imageuploadObject.length;d++){
+     
+      if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+            this.imageuploadObject.splice(d,1);
+           
+      }
+
+    }
+  } 
+  console.log("Final DOC ARRAY",this.imageuploadObject);
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+    console.log(newContact2);
+    
+   this.contactService.addContact(newContact2)
+   .subscribe(contact => {
+    console.log(contact);
+    //  USER_ID already exists   
+    if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "User Duplicate"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Email ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else if(contact.message == "Mobile Number already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }else{
+    
+      this.Load=false
+      this.onNoClick("succ");
+      // this.contacts.push(contact);
+    }
+  
+   }, (err: any) => { 
+    //  console.log(err.status); 
+    // console.log(err);
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+
+    this.tost1("EmM")
+  }
+  else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+
+  }
+  });
+/*    this._flashMessagesService.show('OTP Sent Sucessfully', { cssClass: 'alert-success', timeout: 3000 }); */
+
+ }
+      else if((this.phone)||(this.userID)){
+        this.Load=true
+
+    //   if (!this.executed) {
+    //     this.executed = true;
+         const newContact2 ={
+         first_name: this.first_name,
+         last_name: this.last_name,
+         password: this.passwordd,
+        //  phone: this.phone,
+         isDealer: true,
+         custumer:false,
+         sysadmin:this.superAdmin,
+         expdate : new Date(expDate).toISOString(),
+         supAdmin:this.sup_admin,
+        //  user_id:this.userID,
+         address:this.address,
+         customer_role: this.selectedRole?this.selectedRole:'subadmin'
+     }
+
+     if(this.phone){
+      newContact2['phone'] = this.phone  ;
+    }
+
+    if(this.countrySelected != undefined){
+      newContact2['std_code']=this.countrySelected;
+     }
+     if(this.isOrganisation != undefined){
+      newContact2['organisation']=this.useridd;
+     }
+    
+     
+   if(tzone != undefined){
+    newContact2['timezone'] = tzone[0];
+}
+  
+    if(this.userID){
+      newContact2['user_id'] = this.userID  ;
+
+    }
+
+     if(this.imageuploadObject.length > 0){  
+
+      for(var d = 0 ;d <this.imageuploadObject.length;d++){   
+        if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+              this.imageuploadObject.splice(d,1);        
+        }
+      }
+    }
+    newContact2['imageDoc'] = this.imageuploadObject;
+    console.log(newContact2);
+    
+     this.contactService.addContact(newContact2)
+     .subscribe(contact => {
+   
+      if(contact.message == "USER_ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+        }if(contact.message == "USER_ID already exists"){
+          return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "User Duplicate"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Email ID already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else if(contact.message == "Mobile Number already exists"){
+            return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+          }else{
+        
+      this.clear();
+      this.Load=false;
+      this.onNoClick("succ");
+       this.contacts.push(contact);
+
+      }
+  
+     }, (err: any) => {
+    if(err.status ==  500)
+    {
+    //  console.log(err._body);
+      this.Load=false
+      this.emmnerr=JSON.parse(err._body);
+      this.data_descip = this.emmnerr.split(':')[1];
+      console.log(this.data_descip);
+      swal(
+        'Error',
+        this.data_descip,
+        'error'
+      )
+  
+
+      this.tost1("EmM")
+    }
+    else{
+      this.Load=false
+      // console.log("dadsa");
+      swal(
+        'Error',
+        'Internal Server error , Please try after sometime !!!',
+        'error'
+      )
+    }})
+  }
+ else if(this.emaill){
+ // if (!this.executed) {
+  //  this.executed = true;
+    const newContact2 ={
+    first_name: this.first_name,
+    last_name: this.last_name,
+    password: this.passwordd,
+    org_name: this.org_name,
+    email: this.emaill,
+    isDealer: true,
+    custumer:false,  
+    sysadmin:this.superAdmin,
+    expdate : new Date(expDate).toISOString(),
+    supAdmin:this.sup_admin,
+    user_id:this.userID,
+    address:this.address,
+    customer_role: this.selectedRole?this.selectedRole:'subadmin'
+
+}
+
+if(this.countrySelected != undefined){
+  newContact2['std_code']=this.countrySelected;
+ }
+
+ 
+ if(tzone != undefined){
+  newContact2['timezone'] = tzone[0];
+}
+if(this.isOrganisation){
+  newContact2['organisation']=this.useridd
+}
+
+
+
+if(this.imageuploadObject.length > 0){  
+
+  for(var d = 0 ;d <this.imageuploadObject.length;d++){
+    if((this.imageuploadObject[d].doctype == "")&&(this.imageuploadObject[d].image == "")&&(this.imageuploadObject[d].phone == "")){   
+          this.imageuploadObject.splice(d,1);   
+    }
+  }
+}
+newContact2['imageDoc'] = this.imageuploadObject;
+console.log(newContact2);
+
+this.contactService.addContact(newContact2)
+.subscribe(contact => {
+  console.log(contact);
+  //  USER_ID already exists
+
+  //this.tost1("succ")
+  if(contact.message == "USER_ID already exists"){
+    return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+    }if(contact.message == "USER_ID already exists"){
+      return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "User Duplicate"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Email ID already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else if(contact.message == "Mobile Number already exists"){
+        return  this._flashMessagesService.show(contact.message, { cssClass: 'alert-danger', timeout: 3000 });
+      }else{
+    this.clear();
+    this.Load=false
+    this.onNoClick("succ");
+    this.contacts.push(contact);
+  }
+
+}, (err: any) => {
+  if(err.status ==  500)
+  {
+  //  console.log(err._body);
+    this.Load=false
+    this.emmnerr=JSON.parse(err._body);
+    this.data_descip = this.emmnerr.split(':')[1];
+    console.log(this.data_descip);
+    swal(
+      'Error',
+      this.data_descip,
+      'error'
+    )
+    // console.log(this.emmnerr)
+    this.tost1("EmM")
+  }
+  else{
+    this.Load=false
+    swal(
+      'Error',
+      'Internal Server error , Please try after sometime !!!',
+      'error'
+    )
+ 
+  }});
+
+
+ }
+ 
+ }
+
+ data_descip:any;
+ onNoClick(a): void {
+  this.dialogRef.close(a);
+ }
+ tost1(divid){
+  if(divid == "EmM"){
+     this.data_descip =  this.emmnerr.split(":")[1]
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+   else if(divid == "succ"){
+     this.data_descip =  "Dealer Successfully Added"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }
+   else if(divid == "psdnmtch"){
+    this.data_descip =  "Error: Password and confirm password do not match"
+    this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-danger', timeout: 3000 });
+   }
+  //    function launch_toast() {
+  //     // console.log(divid);
+  //      var x = document.getElementById("toast")
+  //      //console.log(x);
+  //      x.className = "show";
+  //      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+  //  }
+    }
+
+    clear(){
+      this.first_name=' '
+      this.last_name=' '
+      this.emaill = null
+      this.phone = null
+    }
+
+    click1(event){
+      this.show2=false;
+      this.show3=true;
+      if((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39){
+      }
+      /* if(event.keyCode===13){
+      this.otp_window();
+      } */
+      
+      else
+      event.preventDefault();
+      }
+      click2(event2){
+        this.show2=true;
+        this.show3=false;
+        
+        }
+        call(e) {
+          {
+                 if (e.keyCode == 32) {
+                     e.preventDefault();
+                 }
+             }
+     }
+
+
+     latLongDetail(){
+      var that =this;
+      console.log("Inside Latlong Function");
+      if (navigator.geolocation) {  
+     
+        if(location.protocol != 'https:'){
+          this.contactService.getlatLong().subscribe(res=>{
+            console.log(res); 
+              let t_latlng = new google.maps.LatLng(res.lat, res.lon);
+              let request = {
+                latLng: t_latlng
+              };
+    
+            this.getAddress(request);
+          })
+        }else{
+          navigator.geolocation.getCurrentPosition(function(position) {
+            var d_lat= position.coords.latitude;
+            var d_lng=position.coords.longitude;
+            let t_latlng = new google.maps.LatLng(d_lat, d_lng);
+            let request = {
+              latLng: t_latlng
+            };
+    
+            that.getAddress(request);
+          })
+          
+        }}            
+    }
+    
+    getAddress(request){ 
+      let geocoder = new google.maps.Geocoder();  
+      geocoder.geocode(request, function (data, status) {
+        console.log("Inside geocoder function");  
+        var userCountry;
+        if (status == google.maps.GeocoderStatus.OK) {
+          if (data[0] != null) {
+            var address_show = data[0];
+            console.log('var=>' ,address_show);
+            for (var ac = 0; ac < data[0].address_components.length; ac++) {
+              var component = data[0].address_components[ac];
+              switch(component.types[0]) {     
+                  case 'country':
+                      userCountry  = component.short_name;
+                      console.log(userCountry);
+                      break;      
+              }
+          };
+           
+              var aaa = $('#telephone').intlTelInput("setCountry",userCountry);
+          } else {
+            userCountry = 'in';  
+          }
+        }
+        else {
+          console.log("Inside Error function");  
+          userCountry = 'in';
+        }
+      })  
+    }
+    
+
+    closebox(){
+      this.dialogRef.close('close');
+    }
+
+    stren(){}
+    editDealer(){   
+      // this.emaill = this.data.email?this.data.email:'';
+      // this.phone = this.data.phone?this.data.phone:'';
+      // this.address =this.data.address?this.data.address:'';
+      var editDealerPayload = {
+        first_name : this.first_name,
+        last_name:this.last_name,
+        address:this.address,
+        user_id:this.userID,  
+        contactid:this.data._id,    
+        phone :  this.phone,
+        email : this.emaill, 
+        customer_role: this.selectedRole?this.selectedRole:'subadmin' 
+      }
+   
+     
+      this.contactService.editDealer(editDealerPayload)
+        .subscribe(res=>{
+        
+          // console.log(res);
+          if(res){
+            // console.log(res);
+            this.dialogRef.close("success");
+        }  
+        },err=>{
+          var that = this;
+          console.log(JSON.parse(err._body).message);
+          var errorM = (JSON.parse(err._body).message).split(":");
+          var mainErr =errorM[2];
+          if(mainErr == " phone_1 dup key"){
+            this.errorMsg = "Phone number already exists";
+          }else if(mainErr == " email_1 dup key"){
+            this.errorMsg = "Email id already exists";
+          }else{
+            this.errorMsg = "Internal server error";
+          }
+  
+          this.showError  = true;
+        
+          var error =  setTimeout(function(){
+            clearInterval(error);
+            that.showError = false; 
+          },5000)
+  
+        })
+  
+    }
+  
+  
+}
diff --git a/src/app/sub-amin/sub-amin.component.html b/src/app/sub-amin/sub-amin.component.html
new file mode 100644
index 0000000..9a2a124
--- /dev/null
+++ b/src/app/sub-amin/sub-amin.component.html
@@ -0,0 +1,138 @@
+<div class="limiter">
+  <app-all-menus></app-all-menus>
+  <div id="dvTable" style="position: absolute;top:200px"></div>
+  <div id="toast">
+   <div id="desc">{{data_descip}}</div>
+ </div>
+   <div class="container-table100">
+     <div class="wrap-table100">
+       <div class="row" style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+         <div class="col-6">
+           <i class="fas fa-plus-circle" (click)="addSubadmin()" mdTooltip="{{'Add Subadmin' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+           <h4 style="display: inline-block;float: right;">{{'Subadmin' | translate}}</h4>
+               <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+         </div>
+         <div class="col-6">
+           <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">{{'Next' | translate}} >></button>
+           <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< {{'Previous' | translate}}</button>
+           <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;margin-right: 5px;" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Subadmin Search' | translate}}" />
+         </div> 
+       </div>
+       <div class="table100 ver1" id="deviceTable">
+         <div class="table100-firstcol">       
+           <table>
+             <thead>
+               <tr>  
+                   <th class="cell100 column1" style="font-weight:600;background: #ADD8E6;">
+                     <div class="row">
+                       <div class="col-5">
+                         <p>{{'NAME' | translate}}</p>
+                       </div>
+                       <div class="col-5">
+                         <p>{{'EMAIL' | translate}}</p>
+                       </div>
+                       <div class="col-2">
+                         <p>{{'PHONE' | translate}}</p>
+                       </div>          
+                     </div>
+                   </th>
+                
+               </tr>
+             </thead>
+             <tbody>
+               <tr *ngFor="let dealer of subadmin_info">          
+                   <td class="cell100 column1" (click)="dealerSwitch(dealer)">
+                     <div class="row">
+                       <div class="col-sm-5">
+                         <p>{{dealer.first_name}} {{dealer.last_name}}</p>
+                       </div>
+                       <div class="col-sm-5">
+                         <p (click)="dealerSwitch(dealer)">{{dealer.email}}</p>
+                       </div>
+                       <div class="col-sm-2">
+                         <p (click)="dealerSwitch(dealer)">{{dealerPhone(dealer)}}</p>
+                       </div>
+                     </div>              
+                   </td>
+               
+               </tr>
+             </tbody>
+           </table>
+         </div>
+         <div class="wrap-table100-nextcols js-pscroll" style="height: 660px;">
+           <div class="table100-nextcols">
+             <table>
+               <thead>
+                 <tr class="row100 head">    
+             
+                   <th class="cell100 column2" style='text-align: left;font-weight: 600;background: #ADD8E6;padding-left: 55px;'>{{'USER ID' | translate}}</th>
+                   <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'PASSWORD' | translate}}</th>
+                    <th class="cell100 column3" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ROLE' | translate}}</th>
+                   <th class="cell100 column4" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'CREATED ON' | translate}}</th>
+                   <th class="cell100 column5" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'EXPIRES ON' | translate}}</th>
+                   <th class="cell100 column6" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST ACTIVITY' | translate}}</th>
+                   <th class="cell100 column7" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LAST LOGIN' | translate}}</th>
+                   <th class="cell100 column8" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'LOGIN TYPE' | translate}}</th>
+                   <th class="cell100 column9" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'TOTAL VEHICLES' | translate}}</th>
+                   <th class="cell100 column10" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'DELETED VEHICLES' | translate}}</th>
+                   <!-- <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'ALLOCATED POINTS' | translate}}</th> -->
+                   <!-- <th class="cell100 column11" style='text-align: left;font-weight: 600;background: #ADD8E6'>{{'AVAILABLE POINTS'| translate}}</th> -->
+                   <th class="cell100 column12" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'TOKEN' | translate}}</th>
+                   <!-- <th class="cell100 column13" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DOCUMENTS' | translate}}</th>   -->
+                   <th class="cell100 column14" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'EDIT' | translate}}</th>
+                   <th class="cell100 column15" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'DELETE' |translate}}</th>
+                   <!-- <th class="cell100 column16" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER STATUS' | translate}}</th> -->
+                   <!-- <th class="cell100 column17" style="text-align: left;font-weight: 600;background: #ADD8E6">{{'DEALER PERMISSION' | translate}}</th> -->
+                   <!-- <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'ADD POINTS' | translate}}</th>   -->
+                   <!-- <th class="cell100 column18" style="text-align: center;font-weight: 600;background: #ADD8E6">{{'SUSPEND ACCOUNT' | translate}}</th>            -->
+                 </tr>
+               </thead>
+               <tbody>
+                 <tr class="row100 body" *ngFor="let dealer of subadmin_info">
+      
+                   <td class="cell100 column2"  style="cursor: pointer;" >{{dealer.user_id?dealer.user_id:'NA'}}</td>
+                   <td class="cell100 column3" style="cursor: pointer;" >{{dealer.pass?dealer.pass:'Not saved'}}</td>
+                  <td class="cell100 column3" style="cursor: pointer;" >{{dealer.customer_role?dealer.customer_role:''}}</td>
+                   <td class="cell100 column4" style="cursor: pointer;" >{{dealer.created_on|date:'short'}}</td>
+                   <td class="cell100 column5" style="cursor: pointer;" >{{dealer.expire_date|date:'short'}}</td>
+                   <td class="cell100 column6" style="cursor: pointer;" >{{dealer.last_activity_on|date:'dd/MM/yyyy , h:mm:ss a'}}</td>
+                   <td class="cell100 column7" style="cursor: pointer;" >{{dealer.last_login|date:'dd/MM/yyyy , h:mm:ss a'}}</td> 
+                   <td class="cell100 column8" style="cursor: pointer;" >{{dealer.login_type?dealer.login_type:"NA"}}</td> 
+                   <td class="cell100 column9" style="cursor: pointer;" >{{dealer.total_vehicle?dealer.total_vehicle:0}}</td>
+                   <td class="cell100 column10" style="cursor: pointer;" >{{dealer.delDevices?dealer.delDevices:0}}</td>
+                   <!-- <td class="cell100 column11" style="cursor: pointer;" >{{dealer.point_Allocated?dealer.point_Allocated:0}}</td> -->
+                   <!-- <td class="cell100 column11" style="cursor: pointer;" >{{availablePoint(dealer)}}</td> -->
+                   <td class="cell100 column12" style="cursor: pointer;text-align: center;" >{{dealer.notificationTokenCount?dealer.notificationTokenCount:0}}</td>  
+                   <!-- <td class="cell100 column13" style="text-align: center;">  
+                     <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer;" (click)="viewDocuments(dealer)"></i>           
+                   </td>  -->
+                   <td class="cell100 column14" style="text-align: center">
+                     <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer;color:#08de85" (click)="edit_DealerDetail(dealer)"></i>
+                    
+                   </td>
+                   <td class="cell100 column15" style="text-align: center">
+                     <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer;color:#ff0707;" (click)="delete_DealerDetail(dealer)"></i>
+                 
+                   </td>
+                   <!-- <td class="cell100 column16" style="text-align: center">
+                     <md-slide-toggle [(ngModel)]="dealer.status" style="height: 0px !important" ngDefaultControl (change)="onChange(dealer,$event)"></md-slide-toggle>
+                   </td> -->
+                   <!-- <td class="cell100 column17" style="text-align: center;">
+                     <i class="fas fa-user-shield" title="Additonal Access"  (click)="user_permission(dealer)"></i> 
+                   </td> -->
+                   <!-- <td class="cell100 column18" style="text-align: center;">    
+                     <i id="pointShare" style="cursor:pointer;color:#f5b515;" class="fas fa-coins" (click)="addPoints(dealer)"></i>
+                   </td>   -->
+                   <!-- <td class="cell100 column16" style="text-align: center">
+                     <md-slide-toggle [(ngModel)]="dealer.accountSuspended" style="height: 0px !important" ngDefaultControl (change)="accountStatusonChange(dealer,$event)"></md-slide-toggle>
+                   </td>  -->
+                 </tr>
+               </tbody>
+             </table>
+           </div>
+         </div>
+       </div>
+     </div>
+   </div>
+ </div>
+<!-- (click)="dealerSwitch(dealer)" -->
diff --git a/src/app/sub-amin/sub-amin.component.scss b/src/app/sub-amin/sub-amin.component.scss
new file mode 100644
index 0000000..abbef30
--- /dev/null
+++ b/src/app/sub-amin/sub-amin.component.scss
@@ -0,0 +1,423 @@
+* {
+	margin: 0px; 
+	padding: 0px; 
+	box-sizing: border-box;
+}
+
+body, html {
+	height: 100%;
+	font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+	margin: 0px;
+	transition: all 0.4s;
+	-webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+	outline: none !important;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,h2,h3,h4,h5,h6 {margin: 0px;}
+
+p {margin: 0px;}
+
+ul, li {
+	margin: 0px;
+	list-style-type: none;
+}
+
+
+/* ------------------------------------ */
+input {
+  display: block;
+	outline: none;
+	border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus, input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+	outline: none !important;
+	border: none;
+	background: transparent;
+}
+
+button:hover {
+	cursor: pointer;
+}
+
+iframe {
+	border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+
+.table100 .ps__rail-x {
+  z-index: 1010;
+  height: 6px;
+  background-color: transparent;
+  opacity: 1 !important;
+  bottom: 10px;
+}
+
+.table100 .ps__rail-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #e6e6e6;
+  height: 100%;
+  width: calc(100% - 30px);
+  left: 15px;
+  top: 0px;
+}
+
+.table100 .ps__rail-x .ps__thumb-x {
+  height: 100%;
+  bottom: 0;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-x .ps__thumb-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #b3b3b3;
+  height: 100%;
+  width: calc(100% - 30px);
+  top: 0;
+  left: 15px;
+}
+
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  // background: #fa71cd;
+  background: #efecec;
+  // background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -o-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: linear-gradient(bottom, #c471f5, #fa71cd);
+
+
+}
+
+.container-table100 {
+  max-height: 100vh;
+  // max-width: 1366px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  // padding: 33px 100px;
+  padding: 55px 20px 0px 20px
+}
+
+.wrap-table100 {
+  width: 100%;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  background-color: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+th, td {
+  font-weight: unset;
+  padding-right: 10px;
+}
+
+.column1 {
+  width: 100%;
+  padding-left: 40px;
+}
+
+.column2 {
+  width: 275px;
+  padding-left: 55px;
+}
+
+.column3 {
+  // width: 205px;
+  width: 265px;
+}
+
+.column4 {
+  width: 195px;
+}
+
+.column5 {
+  width: 235px;
+}
+
+.column6 {
+  width: 250px;
+}
+
+.column7 {
+  // width: 330px;
+  width: 250px;
+}
+
+.column8 {  
+  // width: 305px;
+  width:210px;
+}
+
+.column9 {
+  width: 200px;
+}
+
+.column10 {
+  width: 200px;
+}
+
+.column11 {
+  // width: 200px;
+  width:155px;
+}
+
+.column12 {
+  width: 200px;
+}
+
+.column13 {
+  width: 150px;
+}
+
+.column14 {
+  // width: 200px;
+  width:150px
+}
+.column15 {
+  // width: 200px;
+  width: 150px;
+}
+.column16 {
+  // width: 200px;
+  width:150px;
+}
+.column17 {
+  // width: 200px;
+  width:175px
+}
+.column18 {
+  // width: 200px;
+  width:175px;
+}
+.column19 {
+  // width: 200px;
+  width:150px;
+}
+
+.column20 {
+  // width: 200px;
+  width:150px;
+}
+
+.table100 th {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.table100 td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+
+/*==================================================================
+[ Fix col ]*/
+.table100 {
+  width: 100%;
+  position: relative;
+}
+
+.table100-firstcol {
+  background-color: #fff;
+  position: absolute;
+  z-index: 1;
+  // width: 310px;
+  // width: 590px;
+  width: 700px;
+  top: 0;
+  left: 0;
+}
+
+.table100-firstcol table {
+  background-color: #fff;
+}
+
+.wrap-table100-nextcols {
+  width: 100%;
+  overflow: auto;
+  // padding-left: 310px;
+  // padding-left : 590px;
+  padding-left: 698px;
+  padding-bottom: 28px;
+}
+
+.table100-nextcols table{
+  table-layout: fixed;
+}
+
+.shadow-table100-firstcol {
+  box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.table100-firstcol table {
+  background-color: transparent;
+}
+
+/*==================================================================
+[ Ver1 ]*/
+
+.table100.ver1 th {
+  // font-family: Roboto-Bold;
+  font-family: Roboto;
+  font-size: 14px;
+  // color: #333333;
+
+  color:white;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.table100.ver1 td {
+  // font-family: Roboto-Medium;
+  font-family: Roboto;
+  font-size: 15px;
+  // line-height: 1.4;
+}
+
+.table100.ver1 .table100-firstcol td {
+  color: #666666;
+}
+
+.table100.ver1 .table100-nextcols td {
+  color: #999999;
+}
+
+
+.table100.ver1 tr {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+
+// .btn-default {
+//   @include btn-variant(#546e7a, #90a4ae, #78909c, #cfd8dc, #eceff1, #b0bec5, #455a64);
+  
+
+// }
+
+
+
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  float: right;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  whitespace: nowrap;
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+    font-size: 12px;
+  
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+  
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+  
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+  
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+  
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+  
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+  
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
diff --git a/src/app/sub-amin/sub-amin.component.spec.ts b/src/app/sub-amin/sub-amin.component.spec.ts
new file mode 100644
index 0000000..5efa85a
--- /dev/null
+++ b/src/app/sub-amin/sub-amin.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SubAminComponent } from './sub-amin.component';
+
+describe('SubAminComponent', () => {
+  let component: SubAminComponent;
+  let fixture: ComponentFixture<SubAminComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubAminComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubAminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/sub-amin/sub-amin.component.ts b/src/app/sub-amin/sub-amin.component.ts
new file mode 100644
index 0000000..6ab410e
--- /dev/null
+++ b/src/app/sub-amin/sub-amin.component.ts
@@ -0,0 +1,245 @@
+import { Component, OnInit } from '@angular/core';
+import { AddsubadminComponent } from './addsubadmin/addsubadmin.component';
+import { Subject } from 'rxjs';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { MdDialog } from '@angular/material';
+declare var $:any;
+declare var PerfectScrollbar:any;
+declare var swal:any;
+@Component({
+  selector: 'app-sub-amin',
+  templateUrl: './sub-amin.component.html',
+  styleUrls: ['./sub-amin.component.scss']
+})
+export class SubAminComponent implements OnInit {
+  subadmin_info=[];
+  myInput:any;
+  modelChanged: Subject<string> = new Subject<string>();
+  superAdmin: any;
+  emailid: any;
+  useridd: any;
+  or: any;
+  custtype: any;
+  mb: any;
+  cust: boolean;
+  Load: boolean;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  constructor(private contactService: ContactService, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog) {
+   
+    this.modelChanged
+    .debounceTime(1000) // wait 300ms after the last event before emitting last event
+    .distinctUntilChanged() // only emit if value is different from previous value
+    .subscribe(myInput => {
+      this.myInput = myInput;
+     this.subadminDetail();
+    });
+
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput-jquery.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+
+
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+    script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+   
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+  
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+ 
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+
+    this.subadminDetail();
+    
+
+    // $(document).ready(function () {
+    //   $('.js-pscroll').each(function(){
+    //     var ps = new PerfectScrollbar(this);
+  
+    //     $(window).on('resize', function(){
+    //       ps.update();
+    //     })
+  
+    //     $(this).on('ps-x-reach-start', function(){
+    //       $(this).parent().find('.table100-firstcol').removeClass('shadow-table100-firstcol');
+    //     });
+  
+    //     $(this).on('ps-scroll-x', function(){
+    //       $(this).parent().find('.table100-firstcol').addClass('shadow-table100-firstcol');
+    //     });
+  
+    //   });
+    // })
+  }
+
+  addSubadmin(){
+    let dialogRef = this.dialog.open(AddsubadminComponent, {
+      width: '800px',
+    });
+    var that = this;
+    dialogRef.afterClosed().subscribe(result => {     
+      if (result == "succ") {  
+        that.subadminDetail()   
+     
+      }
+    });
+  }
+
+    
+  searchFilter(text: string) {
+    this.modelChanged.next(text);
+  }
+
+  subadminDetail() {
+    this.Load = true;
+   console.log("Inside function");
+    this.contactService.dealer_Info1(this.useridd, this.skip, this.limit,this.myInput,'subadmin')
+      .subscribe(res => {
+        // console.log(res);
+        this.Load = false ;
+        this.subadmin_info = res;
+        console.log('this.subadmin_info',this.subadmin_info);
+        // console.log("SuccessLog");
+      }, err => {
+        this.Load = false;
+        this.subadmin_info=[];
+        this.firstcall = true;
+        this.lastcall = false;
+      })
+
+  }
+
+  
+  skip: number = 1;
+  limit: number = 10;
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    // this.sidebarData();
+    this.subadminDetail();
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 1) {
+      this.skip -= 1;
+      this.lastcall = false;
+      this.firstcall = false;
+      // this.sidebarData();
+      this.subadminDetail();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+ 
+  dealerToken: any;
+  // dealer switch function
+  dealerSwitch(dlr) {
+    // console.log(dlr);
+    localStorage.setItem("DealerObj=>", dlr._id);
+    localStorage.removeItem("in1");
+    this.contactService.getcustToken(dlr._id).subscribe(
+      data => {
+        this.dealerToken = data
+        var superAdminToken = localStorage.getItem('token');
+        localStorage.setItem('superAdminToken', superAdminToken);
+        localStorage.setItem('token', this.dealerToken.custumer_token);
+
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        window.localStorage['Dealer'] = 'ON';
+        localStorage.setItem('superadmin', "ON");
+
+
+        if (window.localStorage['DataLoaded'] = 'True') {
+          this.router.navigateByUrl("const?_status=" + "OK");
+        }
+      });
+  }
+
+  edit_DealerDetail(dealer){
+    dealer['edit']=true;
+    let dialogRef = this.dialog.open(AddsubadminComponent, {
+      width: '800px',
+      data:dealer
+    });
+    var that=this;
+    dialogRef.afterClosed().subscribe(result => {     
+      if (result == "success") {     
+        that.subadminDetail();
+      }
+    });
+
+
+  }
+
+  delete_DealerDetail(dealer){
+    var that = this;
+    swal({
+      title: 'Are you sure?',
+      text: "You won't be able to revert this!",
+      type: 'warning',
+      showCancelButton: true,
+      confirmButtonColor: '#3085d6',
+      cancelButtonColor: '#d33',
+      confirmButtonText: 'Yes, delete it!'
+  }).then((result: { value: boolean; }) => {
+      if (result) {
+        var deletePayload = {
+          'userId' : dealer._id,
+          'deleteuser' : true
+        }
+        that.contactService.deleteCostumer(deletePayload).subscribe(res=>{  
+          that.subadminDetail();
+              swal(
+                  'Deleted',
+                  'Subadmin Deleted',
+                  'success'
+              )
+          },err=>{
+            swal(
+              'Error',
+              'Please try after sometime !!!',
+              'error'
+          )
+          })
+      }
+  });
+  }
+
+  dealerPhone(dlr){
+    var dphn = '';
+    if(dlr.std_code != undefined){
+       dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+       return dphn ; 
+    }else{
+       dphn = dlr.phone ; 
+      return dphn ; 
+    }
+  }
+
+  data_descip:any;
+
+}
diff --git a/src/app/support/support.component.html b/src/app/support/support.component.html
new file mode 100644
index 0000000..5579710
--- /dev/null
+++ b/src/app/support/support.component.html
@@ -0,0 +1,129 @@
+<div  style="    height: 92vh;
+               overflow: scroll;
+               position: fixed;" class="background-image">
+               <!-- <div style="position:absolute;top:0;left:0"><img src = '../../assets/image/Traffic-Blur.jpg' *ngIf="detectmob"></div>
+               <div style="position:absolute;top:0;left:0"><img src = '../../assets/image/Traffic_1.png' *ngIf="!detectmob"></div> -->
+<div style="padding-top:1%" fxLayout="row" fxLayout.xs='column' flex >
+<div>
+
+  <h4  style="color: white;
+  padding-top: 3%;
+  padding-left: 2%;
+  font-size: 30px;">Contact Us:</h4>
+
+  <!-- <h5 style="padding-top:3%;color:white;padding-left: 3%;margin-left:10px;font-size: 25px;
+  font-weight: 400;"><md-icon style="font-size:40px">place</md-icon>&nbsp;&nbsp;Address:</h5>
+  <p  style="color:white;padding-left: 7%;font-size: 20px; margin-left:10px">
+    404,purple pride square,kalewadi phata Kalewadi, Pune, Maharashtra 411057
+  </p> -->
+  <div style="margin-left:10px;padding-top:15px;">
+    <md-icon style="font-size: 40px;
+    color: white;
+    margin-left: 28px;
+    width: 40px;
+    height: 30px;">person</md-icon><span style="color:white;font-size:20px;margin-left: 10px;">Name :</span>
+      <span style="margin-left:5px; font-size:14px;color:white">{{dealerName}}</span>
+  </div>
+  <div style="margin-left:10px;padding-top:15px;">
+    <md-icon style="font-size: 40px;
+    color: white;
+    margin-left: 28px;
+    width: 40px;
+    height: 30px;">place</md-icon><span style="color:white;font-size:20px;margin-left: 10px;">Address :</span>
+      <span style="margin-left:5px; font-size:14px;color:white">{{address}}</span>
+  </div>
+<div style="margin-left:10px;padding-top:15px;">
+  <md-icon style="font-size: 30px;
+    color: white;
+    margin-left: 28px;
+    width: 40px;
+    height: 40px;">email</md-icon>
+  <span style="color:white;font-size:20px;margin-left: 10px;">Email :</span>
+  <span style="margin-left:5px; font-size:14px;color:white">{{dealerid}}</span>
+</div>
+<div style="margin-left:10px;padding-top:15px;">
+  <md-icon style="font-size: 30px;
+  color: white;
+  margin-left: 28px;
+  width: 40px;
+  height: 40px;">phone</md-icon><span style="color:white;font-size:20px;margin-left: 10px;">Mobile :</span>
+    <span style="margin-left:5px; font-size:14px;color:white">{{mobile}}</span>
+</div>
+
+  <!-- <p  style="color:white; padding-left: 3%;">
+    </p> -->
+    <!-- <div>
+      <span><md-icon>email</md-icon></span><span>Email:</span><span>{{dealerid}}</span>
+    </div>
+    <div>
+      <span><md-icon>phone</md-icon></span><span>Mobile:</span><span>{{mobile}}</span>
+
+      
+    </div> -->
+    <!-- <h5 style="padding-top:1%;color:white;padding-left:3%;"><md-icon style="font-size:40px">phone</md-icon>&nbsp;&nbsp;Mobile:  8210834653</h5> -->
+  
+<!--    
+    <md-icon style="font-size: 40px;
+    color: white;
+    margin-left: 28px;
+    width: 40px;
+    height: 30px;">person</md-icon>
+    <span style="color:white;font-size:20px;margin-left: 10px;">Name :</span>
+    <span style="margin-left:5px; font-size:14px;color:white">{{dealerName}}</span> -->
+
+
+
+   <hr style="background-color:whitesmoke;margin-left: 1%;">
+   <h4  style="color:white; padding-top: 3%;padding-left: 2%;">Follow Us:</h4>
+   <a  target="_blank" href={{facebook}}><img src="../../assets/image/facebook.png"
+   style=
+   "width:22%;padding-top:20px;margin-left: 4%;cursor:pointer"></a>
+
+ <!-- <img src="../../assets/image/support.gif"style="display: block; width: 100%" > -->
+<!--  <div style="padding-left:20%"*ngIf="MapLoad">
+        <div class="signal">
+        </div>
+     </div>
+                        <iframe (load)="myFunction()" style="padding-left:6%;padding-top:4%" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3781.3584387992037!2d73.77495831489405!3d18.602940987361077!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2bbb955555565%3A0xbdca96a73580757e!2sADNATE+IT+SOLUTIONS!5e0!3m2!1sen!2sin!4v1518167251644" width="100%" height="90%" frameborder="1" style="border:0" allowfullscreen></iframe> -->
+
+</div>
+<div style="padding-left:3%">
+<h4 style="padding-left:3%;color:white;padding-top: 3%;">Say Hello:</h4>
+<div style="padding-left:3%;width:100%">
+                <md-card style="float:left;width:100%;margin-top: 2px;background-color: mintcream;opacity: .8;">
+                                <md-form-field class="example-full-width" style="float:left;width:100%">
+                                                <input pattern="[^@^ ]+@[^@^ ]+\.[a-zA-Z]{2,}"  mdInput type="text"  [(ngModel)]="email"  name="email"  placeholder="Email ID">
+                                               
+                                               </md-form-field>
+
+                                               <md-form-field class="example-full-width width" style="float:left;width:100%">
+                                                <input  onkeydown="call(event)"  mdInput type="text" minlength="10" maxlength="10" [(ngModel)]="phone" name="phone"placeholder="Mobile Number" >
+                                                    
+                                                  </md-form-field>
+                                               
+                                               
+                                               <md-form-field class="example-full-width" style="float:left;width:100%">
+                                                        <input (click)="valid()" mdInput type="text" [(ngModel)]="title"  name="title" required placeholder="Title">
+                                                        <md-error class="required">Please Enter Title</md-error>
+                                                       </md-form-field>
+                                                       <label style="float:left">Message:</label>
+                                                       <br>               
+                                <textarea required rows="5" name="comment" style="width:100%" [(ngModel)]="msg"  name="msg" placeholder="Enter Message here..." >
+                                </textarea><br>
+                                <div>
+                                <input type="submit" class="btn btn btn-success" style="cursor:pointer" value="Submit" (click)="addContact()"/></div>
+                                <flash-messages></flash-messages>
+                                </md-card>
+
+                               
+                                 
+                    
+</div>       
+
+</div>
+</div>
+</div>
+
+     
+               
+    
\ No newline at end of file
diff --git a/src/app/support/support.component.ts b/src/app/support/support.component.ts
new file mode 100644
index 0000000..07a96d5
--- /dev/null
+++ b/src/app/support/support.component.ts
@@ -0,0 +1,164 @@
+import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import {Contactus} from '../contactus';
+import {ContactService} from '../contact.service';
+
+@Component({
+  selector: 'app-support',
+  templateUrl: './support.component.html',
+  styles: [`
+  .background-image{
+    width: 100%;
+   // height: 100%;
+
+    margin: -16px;
+    padding: 0;
+    background-image: url('../../assets/image/Traffic-Blur.jpg');
+    background-size: 100%;
+    background-repeat: repeat;
+  }
+  .signal {
+    border: 5px solid #333;
+    border-radius: 30px;
+    height: 30px;
+    left: 25%;
+    margin: -15px 0 0 -15px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    width: 30px;
+ 
+    animation: pulsate 1s ease-out;
+    animation-iteration-count: infinite;
+}
+
+@keyframes pulsate {
+    0% {
+      transform: scale(.1);
+      opacity: 0.0;
+    }
+    50% {
+      opacity: 1;
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+}
+`],
+  providers: [ContactService]
+})
+export class SupportComponent implements OnInit {
+  call(e) {
+    {
+           if (e.keyCode == 32) {
+               e.preventDefault();
+           }
+       }
+}
+  myFunction(){
+  this.MapLoad = false
+  }
+  constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService) { }
+
+  email:any;
+  title:any;
+  Email:boolean=true;
+  msg:any;
+  MapLoad:boolean=true;
+  phone:any;
+  address:any;
+  Contactuss: Contactus[]=[];
+  Contactus: Contactus;
+/*   checker(field,field2,maxlimit){
+    function a(){
+      
+    }
+  } */
+  valid(){
+    this.Email = true;
+  }
+  addContact(){
+    if(this.email == null  && this.phone == null ){
+      this._flashMessagesService.show("Please Enter either Email ID or Mobile Number", { cssClass: 'alert-danger', timeout: 2000 });
+    }
+
+    else   if(this.title == null || this.title == undefined){
+      this._flashMessagesService.show("Please Enter Title", { cssClass: 'alert-danger', timeout: 2000 });
+    }
+    else  if(this.msg == null || this.msg == undefined){
+      this._flashMessagesService.show("Please Enter Message", { cssClass: 'alert-danger', timeout: 2000 });
+    }
+    else {
+      const newMsg ={
+        email:this.email,
+        title:this.title,
+        msg:this.msg,
+        phone:this.phone,
+        dealerid:this.dealerid,
+        dealerName:this.dealerName
+        
+      }
+       
+        this.contactService.contactus(newMsg)
+        .subscribe(Contactus => {
+              this.Email = false
+              this.email = ' ';
+              this.title = ' ';
+              this.msg = ' ';
+              this.phone = null
+              
+      this._flashMessagesService.show("Message Sent Succesfully", { cssClass: 'alert-success', timeout: 2000 });
+           this.Contactuss.push(Contactus);
+           }, (err: any) => { 
+  
+      this._flashMessagesService.show("Error Try Again", { cssClass: 'alert-danger', timeout: 2000 });
+          console.log("Error"); 
+  
+        }
+      );
+    }
+
+  }
+  str:any;
+  show2:any;
+  show3:any;
+  stren(){
+    this.str =false;
+  }
+  click2(event2){
+    this.show2=true;
+    this.show3=false;
+    
+    }
+    dealerid:any;
+    mobile:any;
+    facebook:any;
+    dealerName:any
+
+  ngOnInit() {
+    this.dealerid = window.localStorage['DealerID'];
+    this.address =  window.localStorage['address'];
+    this.mobile = window.localStorage['mobile'];
+    this.facebook = window.localStorage['facebook'];
+    this.dealerName = window.localStorage['dealerName'];
+  }
+  
+   detectmob() { 
+    if( navigator.userAgent.match(/Android/i)
+    || navigator.userAgent.match(/webOS/i)
+    || navigator.userAgent.match(/iPhone/i)
+    || navigator.userAgent.match(/iPad/i)
+    || navigator.userAgent.match(/iPod/i)
+    || navigator.userAgent.match(/BlackBerry/i)
+    || navigator.userAgent.match(/Windows Phone/i)
+    ){
+       return true;
+     }
+    else {
+       return false;
+     }
+   }
+
+}
\ No newline at end of file
diff --git a/src/app/technician/technician.component.html b/src/app/technician/technician.component.html
new file mode 100644
index 0000000..9afe51e
--- /dev/null
+++ b/src/app/technician/technician.component.html
@@ -0,0 +1,521 @@
+
+<!-- <app-all-menus></app-all-menus>
+<div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+  <md-menu #menu="mdMenu">
+
+    <a href="#">
+      <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+    <a href="#">
+      <h6>RULES<md-icon style="float:right">dock</md-icon>
+      </h6>
+    </a>
+  </md-menu>
+</div>
+
+
+<div style="float:left; width: 100%;padding-top: 6%;">
+  <p class="headStyle">{{'Customers' | translate}}</p>
+  <p *ngIf="errorMsg" style="text-align: center">{{serviceResponse}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div id="toast">
+    <div id="desc">{{data_descip}}</div>
+  </div>
+  <div class="row">
+    <div class="col-sm-4">
+      <button *ngIf="(dealer_Permission === true) || (superAdmin === true) || adbtn" mdTooltip="{{'Add customer' | translate}}" style="border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer" (click)="openDialog()">
+        <md-icon style="float: right;width:30px;height:30px;cursor:pointer">add</md-icon>
+      </button>
+      <a *ngIf="showNav" href="https://youtu.be/dg1zd2geHXA" style="cursor: pointer;color:black" title="Video tutorial"
+        target="_blank">
+        <md-icon class="material-icons" style="font-size: 30px"> theaters </md-icon>
+      </a>
+    </div>
+    <div class="col-sm-8" style="padding-left: 41%;padding-top: 1%;">
+      <input style="border-radius: 6px;
+          border: 1px solid #c7c7c7;
+          border-bottom: 0px;
+          padding: 12px;
+          width: 175px;
+          /* margin-right: 22%; */
+          height: 7px;
+          background-color: red;
+          font-size: 12px;
+          float: left;
+          margin-top: 0;
+          background: #fffcfc;" type="search" class="form-control" id="myInput" name="myInput" [(ngModel)]="myInput"
+        placeholder="{{'Customer Search' | translate}}" (ngModelChange)="searchFilter($event)" />
+      <button [disabled]="lastcall" (click)="pre()" style="margin-left: 10px;">
+        < {{'Previous' | translate}} </button> <button [disabled]="firstcall" (click)="next()"> {{'Next' | translate}} >
+      </button>
+    </div>
+  </div>
+
+  
+  <div class="scrollbar" style="overflow:overlay;">
+    <table id="myTable" class="table table-striped" style="overflow-y: hidden;
+       overflow-x: hidden;font-size:12px">
+
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th>{{'User ID' | translate}}</th>
+          <th>{{'Name' | translate}}</th>
+    
+          <th>{{'Dealer' | translate}}</th>
+          <th>{{'Email ID' | translate}}</th>
+          <th>{{'Phone Number' | translate}}</th>
+          <th>{{'Password' | translate}}</th>
+          <th>{{'Total Vehicle' | translate}}</th>
+          <th>{{'Deleted Vehicle' | translate}}</th>
+          <th>{{'Created On' | translate}}</th>
+          <th>{{'Expire On' | translate}}</th>
+          <th>{{'Token' | translate}}</th>
+          <th>{{'Last activity' | translate}}</th>
+          <th>{{'Last login' | translate}}</th>
+          <th>{{'Login type' | translate}}</th>
+          <th>{{'Documents' | translate}}</th>
+          <th>{{'Edit' | translate}}</th>
+          <th *ngIf="((custtype == true)||(superAdmin == true))">{{'Report Setting' | translate}}</th>
+          <th *ngIf="((custtype == true)||(superAdmin == true))">{{'Dashboard Column' | translate}}</th>
+          <th>{{'Delete' | translate}}</th>
+          <th>{{'Customer Status' | translate}}</th>
+          <th>{{'Customer Info' | translate}}</th>
+          <th>{{'Reset Password' | translate}}</th>
+          <th>{{'Add Point' | translate}}</th>
+        </tr>
+      </thead>
+      <tbody>
+   
+        <tr *ngFor="let cust_array of custumer">
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.user_id?cust_array.user_id:'NA'}}
+          </td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.first_name}} {{cust_array.last_name}}
+          </td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.DealerDetails[0].first_name}}
+            {{cust_array.DealerDetails[0].last_name}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.email}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.phone}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.pass?cust_array.pass:'NA'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.total_vehicle}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.delDevices}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.created_on |date:'dd/MM/yyyy'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">{{cust_array.expire_date|date:'dd/MM/yyyy'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.notificationTokenCount ?cust_array.notificationTokenCount :0}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.last_activity_on|date:'dd/MM/yyyy, h:mm:ss a'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.last_login|date:'dd/MM/yyyy, h:mm:ss a'}}</td>
+          <td style="cursor:pointer" (click)="vewdev(cust_array._id)">
+            {{cust_array.login_type?cust_array.login_type:"NA"}}</td>
+          <td>
+            <p><button md-tooltip="View/Download"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="viewDocuments(cust_array)">
+                <md-icon>library_books</md-icon>
+              </button></p>
+          </td>
+          <td>
+            <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="edit_costumerDetail(cust_array)">
+                <md-icon>edit</md-icon>
+              </button></p>
+          </td>
+          <td *ngIf="((custtype == true)||(superAdmin == true))">
+            <p><button md-tooltip="Report Setting"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="reportSetting(cust_array)">
+                <md-icon>calendar_today</md-icon>
+              </button></p>
+          </td>
+          <td *ngIf="((custtype == true)||(superAdmin == true))">
+            <img src="assets/image/customised_table.png" alt="Customise Table Content" height="25" width="25" style="cursor: pointer;" title="Customise Table Content" (click)="custom_table(cust_array)">
+          </td>
+          <td>
+            <p><button md-tooltip="Delete"
+                style="border:1px solid transparent; background-color: transparent;float:right"
+                (click)="delete_costumerDetail(cust_array)">
+                <md-icon>delete</md-icon>
+              </button></p>
+          </td>
+          <td style="padding-top:20px">
+            <md-slide-toggle [(ngModel)]="cust_array.status" ngDefaultControl (change)="onChange(cust_array,$event)">
+            </md-slide-toggle>
+          </td>
+          <td style="padding-top:18px">      
+                  <i class="fas fa-sign-in-alt" style="cursor: pointer;font-size: 22px;" title="Send Login Credentials" (click)="shareUserCredential(cust_array)"></i>    
+            </td>
+            <td style="padding-top:18px">      
+              <img src="assets/image/reset_password.png" alt="reset_password" height="25" width="25" style="cursor: pointer;" title="Reset password" (click)="resetPassword(cust_array)">  
+        </td>
+        <td>
+          <i id="pointShare" style="cursor:pointer;font-size: 20px;margin-top: 12px;" class="fas fa-coins" (click)="addPoints(cust_array)"></i>
+        </td>   
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>   -->
+
+<div class="limiter">
+  <app-all-menus></app-all-menus>
+  <div id="toast">
+    <div id="desc">{{ data_descip }}</div>
+  </div>
+  <div class="container-table100">
+    <div class="wrap-table100">
+      <div class="row">
+        <div class="col-6" style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          ">
+          <i class="fas fa-plus-circle" *ngIf="dealer_Permission === true || superAdmin === true || adbtn"
+            (click)="openDialog()" mdTooltip="{{ 'Add customer' | translate }}" style="
+              box-shadow: 3px 1px 5px 0px #b2b0ae;
+              cursor: pointer;
+              float: left;
+              font-size: 24px;
+              border-radius: 50px;
+              margin-left: 20px;
+            "></i>
+          <h4 style="display: inline-block; float: right">
+            {{ "Technicians" | translate }}
+          </h4>
+        </div>
+        <div class="col-6" style="
+            width: 100%;
+            text-align: center;
+            align-items: center;
+            background: #426e86;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            box-shadow: 3px 1px 5px 0px rgb(178, 176, 174);
+          ">
+          <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px">
+            {{ "Next" | translate }} >>
+          </button>
+          <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262">
+            << {{ "Previous" | translate }} </button>
+              <input type="search" style="
+              width: 225px;
+              float: right;
+              border-radius: 0px;
+              line-height: 1.9;
+              background: #efecec;
+              box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);
+            " class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput"
+                (ngModelChange)="searchFilter($event)" placeholder="{{ 'Technician Search' | translate }}" />
+              <!-- <md-slide-toggle *ngIf="superAdmin === true" style="float: right; padding: 8px 35.1px"
+                md-tooltip="Include Dealer's Technician" [(ngModel)]="allUser" (change)="allUserFunction($event)">
+              </md-slide-toggle> -->
+        </div>
+      </div>
+      <!-- <div style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    
+         <h4 style="display: inline-block;">{{'Customers' | translate}}</h4>  
+         <button class="btn btn-default" [disabled]="firstcall" (click)="next()" style="margin-right: 10px;">Next >></button>
+         <button class="btn btn-default" [disabled]="lastcall" (click)="pre()" style="border-right-color: #2d4262;"><< Previous</button>
+         <input type="search" style="width: 225px;float: right;border-radius: 0px;line-height: 1.9;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="searchFilter($event)"  placeholder="{{'Customer Search' | translate}}" />
+       </div> -->
+      <!-- <p style="width:100%;text-align: center;align-items: center;background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">Dealers</p> -->
+      <div class="table100 ver1">
+        <div class="table100-firstcol">
+          <table>
+            <thead>
+              <tr class="row100 head">
+                <th class="cell100 column1" style="font-weight: 600; background: #add8e6">
+                  {{ "NAME" | translate }}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="row100 body" *ngFor="let cust_array of custumer">
+                <td class="cell100 column1">
+                  {{ cust_array.first_name ? cust_array.first_name : "" }}
+                  {{ cust_array.last_name ? cust_array.last_name : "" }}
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="wrap-table100-nextcols js-pscroll" style="height: 660px">
+          <div class="table100-nextcols">
+            <table>
+              <thead>
+                <tr class="row100 head">
+                  <th class="cell100 column2" style="font-weight: 600; background: #add8e6">
+                    {{ "USER ID" | translate }}
+                  </th>
+                  <th class="cell100 column3" style="font-weight: 600; background: #add8e6">
+                    {{ "DEALER" | translate }}
+                  </th>
+                  <th class="cell100 column4" style="font-weight: 600; background: #add8e6">
+                    {{ "EMAIL ID" | translate }}
+                  </th>
+                  <th class="cell100 column5" style="font-weight: 600; background: #add8e6">
+                    {{ "PHONE" | translate }}
+                  </th>
+                  <th class="cell100 column6" style="font-weight: 600; background: #add8e6">
+                    {{ "PASSWORD" | translate }}
+                  </th>
+                  <th class="cell100 column7" style="font-weight: 600; background: #add8e6">
+                    {{ "TOTAL VEHICLES" | translate }}
+                  </th>
+                  <th class="cell100 column8" style="font-weight: 600; background: #add8e6">
+                    {{ "DELETED VEHICLES" | translate }}
+                  </th>
+                  <th class="cell100 column9" style="font-weight: 600; background: #add8e6">
+                    {{ "CREATED ON" | translate }}
+                  </th>
+                  <th class="cell100 column10" style="font-weight: 600; background: #add8e6">
+                    {{ "EXPIRES ON" | translate }}
+                  </th>
+                  <th class="cell100 column11" style="font-weight: 600; background: #add8e6">
+                    {{ "TOKEN" | translate }}
+                  </th>
+                  <th class="cell100 column12" style="font-weight: 600; background: #add8e6">
+                    {{ "LAST ACTIVITY" | translate }}
+                  </th>
+                  <th class="cell100 column13" style="font-weight: 600; background: #add8e6">
+                    {{ "LAST LOGIN" | translate }}
+                  </th>
+                  <th class="cell100 column14" style="font-weight: 600; background: #add8e6">
+                    {{ "LOGIN TYPE" | translate }}
+                  </th>
+                  <th class="cell100 column12" style="font-weight: 600; background: #add8e6">
+                    {{ "ALLOCATED POINTS" | translate }}
+                  </th>
+                  <th class="cell100 column15" style="
+                                        text-align: center;
+                                        font-weight: 600;
+                                        background: #add8e6;
+                                      ">
+                    {{ "KYC Status" | translate }}
+                  </th>
+                  <th class="cell100 column15" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "DOCUMENTS" | translate }}
+                  </th>
+                  <th class="cell100 column16" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "EDIT" | translate }}
+                  </th>
+                  <th class="cell100 column17" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    " *ngIf="custtype == true || superAdmin == true">
+                    {{ "USER SETTINGS" | translate }}
+                  </th>
+                  <th class="cell100 column18" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    " *ngIf="custtype == true || superAdmin == true">
+                    {{ "DASHBOARD COLUMNS" | translate }}
+                  </th>
+                  <th class="cell100 column19" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "DELETE" | translate }}
+                  </th>
+                  <th class="cell100 column20" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "CUSTOMER STATUS" | translate }}
+                  </th>
+                  <th class="cell100 column21" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "CUSTOMER INFO" | translate }}
+                  </th>
+                  <th class="cell100 column22" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "RESTET PASSWORD" | translate }}
+                  </th>
+                  <th class="cell100 column23" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "SUSPEND ACCOUNT" | translate }}
+                  </th>
+                  <th class="cell100 column23" style="
+                      text-align: center;
+                      font-weight: 600;
+                      background: #add8e6;
+                    ">
+                    {{ "ADMIN ALERT" | translate }}
+                  </th>
+                  <th *ngIf="custtype" class="cell100 column23" style="
+                                        text-align: center;
+                                        font-weight: 600;
+                                        background: #add8e6;
+                                      ">
+                    {{ "DEALER ALERT" | translate }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="row100 body" *ngFor="let cust_array of custumer">
+                  <td class="cell100 column2" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.user_id ? cust_array.user_id : "NA" }}
+                  </td>
+                  <td class="cell100 column3" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{
+                    cust_array.DealerDetails.length != 0
+                    ? cust_array.DealerDetails[0].first_name
+                    : ""
+                    }}
+                    {{
+                    cust_array.DealerDetails != 0
+                    ? cust_array.DealerDetails[0].last_name
+                    : ""
+                    }}
+                  </td>
+                  <td class="cell100 column4" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.email }}
+                  </td>
+                  <td class="cell100 column5" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ custPhone(cust_array) }}
+                  </td>
+                  <td class="cell100 column6" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.pass ? cust_array.pass : "NA" }}
+                  </td>
+                  <td class="cell100 column7" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.total_vehicle }}
+                  </td>
+                  <td class="cell100 column8" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.delDevices }}
+                  </td>
+                  <td class="cell100 column9" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.created_on | date: "dd/MM/yyyy" }}
+                  </td>
+                  <td class="cell100 column10" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.expire_date | date: "dd/MM/yyyy" }}
+                  </td>
+                  <td class="cell100 column11" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{
+                    cust_array.notificationTokenCount
+                    ? cust_array.notificationTokenCount
+                    : 0
+                    }}
+                  </td>
+                  <td class="cell100 column12" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{
+                    cust_array.last_activity_on
+                    | date: "dd/MM/yyyy, h:mm:ss a"
+                    }}
+                  </td>
+                  <td class="cell100 column13" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.last_login | date: "dd/MM/yyyy, h:mm:ss a" }}
+                  </td>
+                  <td class="cell100 column14" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{ cust_array.login_type ? cust_array.login_type : "NA" }}
+                  </td>
+                  <td class="cell100 colu mn14" style="cursor: pointer" (click)="vewdev(cust_array._id)">
+                    {{
+                    cust_array.point_Allocated
+                    ? cust_array.point_Allocated
+                    : 0
+                    }}
+                  </td>
+                  <td class="cell100 column15" style="cursor: pointer; text-align: center">
+                    <button class="btn btn-warning btn-sm"
+                      style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                      *ngIf="cust_array.kycStatus==undefined">Pending</button>
+                    <button class="btn btn-warning btn-sm"
+                      style="border-radius: 40px; font-size: x-small; background-color: orange;"
+                      *ngIf="cust_array.kycStatus=='Pending'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-success btn-sm"
+                      style="border-radius: 40px; font-size: x-small; background-color: green;"
+                      *ngIf="cust_array.kycStatus=='Approved'">{{cust_array.kycStatus}}</button>
+                    <button class="btn btn-danger btn-sm"
+                      style="border-radius: 40px; font-size: x-small; background-color: red;"
+                      *ngIf="cust_array.kycStatus=='Reject'">{{cust_array.kycStatus}}</button>
+
+                  </td>
+                  <td class="cell100 column15" style="cursor: pointer; text-align: center">
+                    <i class="far fa-folder-open" md-tooltip="View/Download" style="cursor: pointer"
+                      (click)="viewDocuments(cust_array)"></i>
+                  </td>
+                  <td class="cell100 column16" style="text-align: center">
+                    <i class="far fa-edit" md-tooltip="Edit" style="cursor: pointer; color: #08de85"
+                      (click)="edit_costumerDetail(cust_array)"></i>
+                  </td>
+                  <td class="cell100 column17" *ngIf="custtype == true || superAdmin == true"
+                    style="text-align: center">
+                    <i class="fas fa-sort-alpha-down" md-tooltip="User Setting" style="cursor: pointer"
+                      (click)="reportSetting(cust_array)"></i>
+                  </td>
+                  <td class="cell100 column18" *ngIf="custtype == true || superAdmin == true"
+                    style="text-align: center">
+                    <!-- <img src="assets/image/customised_table.png" alt="Customise Table Content" height="25" width="25" style="cursor: pointer;" title="Customise Table Content" (click)="custom_table(cust_array)"> -->
+                    <!-- <i class="fas fa-columns"></i> -->
+                    <i class="fas fa-columns" md-tooltip="Customise Table Content" style="cursor: pointer"
+                      (click)="custom_table(cust_array)"></i>
+                  </td>
+                  <td class="cell100 column19" style="text-align: center">
+                    <i class="fas fa-trash-alt" md-tooltip="Delete" style="cursor: pointer; color: #ff0707"
+                      (click)="delete_costumerDetail(cust_array)"></i>
+                  </td>
+
+                  <td class="cell100 column20" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="cust_array.status" style="height: 0px !important" ngDefaultControl
+                      ngDefaultControl (change)="onChange(cust_array, $event)"></md-slide-toggle>
+                  </td>
+                  <td class="cell100 column21" style="text-align: center">
+                    <i class="fas fa-sign-in-alt" title="Send Login Credentials"
+                      (click)="shareUserCredential(cust_array)"></i>
+                  </td>
+                  <td class="cell100 column22" style="text-align: center">
+                    <i class="fas fa-unlock-alt" title="Reset Password" (click)="resetPassword(cust_array)"></i>
+                    <!-- <img src="assets/image/reset_password.png" alt="reset_password" height="25" width="25" style="cursor: pointer;" title="Reset password" (click)="resetPassword(cust_array)">   -->
+                  </td>
+
+                  <td class="cell100 column20" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="cust_array.accountSuspended" style="height: 0px !important"
+                      ngDefaultControl (change)="accountStatusOnChange(cust_array, $event)"></md-slide-toggle>
+                  </td>
+                  <td class="column20" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="cust_array.adminAlert" style="height: 0px !important" ngDefaultControl
+                      (change)="alertStatus($event, cust_array)"></md-slide-toggle>
+                  </td>
+                  <td *ngIf="custtype" class="column20" style="text-align: center">
+                    <md-slide-toggle [(ngModel)]="cust_array.dealerAlert" style="height: 0px !important"
+                      ngDefaultControl (change)="dealerAlert($event, cust_array)"></md-slide-toggle>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/technician/technician.component.scss b/src/app/technician/technician.component.scss
new file mode 100644
index 0000000..8533507
--- /dev/null
+++ b/src/app/technician/technician.component.scss
@@ -0,0 +1,1712 @@
+// #body{
+//     overflow-x: hidden;
+//     overflow-y: hidden;
+// }
+
+// .scrollbar
+// {
+//   width: 100%;
+
+//   height: 570px;
+//   overflow: overlay;
+
+//   overflow-x: hidden;
+// }
+
+// ::-webkit-scrollbar {
+//     // display: none;
+//     }
+//     #d:hover {
+//         color: rgb(14, 102, 18);
+
+//     }
+//     #ac{
+//         color: rgb(38, 38, 90)
+//     }
+//     #active{
+//         text-decoration-line: underline;
+//         text-decoration-color: rgb(66, 26, 245);
+//     }
+//     .switch {
+//         position: relative;
+//         display: inline-block;
+//         width: 60px;
+//         height: 34px;
+//       }
+
+//       .switch input {display:none;}
+
+//       .slider {
+//         position: absolute;
+//         cursor: pointer;
+//         top: 6px;
+//         left: 11px;
+//         right: 7px;
+//         bottom: 7px;
+//         background-color: #ccc;
+//         transition: .4s;
+//       }
+
+//       .slider:before {
+//         position: absolute;
+//         content: "";
+//         height: 11px;
+//         width: 11px;
+//         left: 2px;
+//         bottom: 5px;
+//         background-color: white;
+//         transition: .4s;
+//       }
+
+//       .headStyle{
+//         text-align: center;
+//         font-size: 22px;
+//         font-weight: 500;
+
+//         color: #6b6a6a;
+//         padding-top: 7px;
+//         margin: 0px;
+//       }
+
+//       input:checked + .slider {
+//         background-color: #2196F3;
+//       }
+
+//       input:focus + .slider {
+//         box-shadow: 0 0 1px #2196F3;
+//       }
+
+//       input:checked + .slider:before {
+//         -webkit-transform: translateX(26px);
+//         -ms-transform: translateX(26px);
+//         transform: translateX(26px);
+//       }
+
+//       /* Rounded sliders */
+//       .slider.round {
+//         border-radius: 34px;
+//       }
+
+//       .slider.round:before {
+//         border-radius: 50%;
+//       }
+
+// .sk-fading-circle {
+//     margin: 100px auto;
+//     width: 40px;
+//     height: 40px;
+//     position: relative;
+
+//   }
+
+//   .sk-fading-circle .sk-circle {
+//     width: 100%;
+//     height: 100%;
+//     position: absolute;
+//     left: 0;
+//     top: 0;
+//   }
+
+//   .sk-fading-circle .sk-circle:before {
+//     content: '';
+//     display: block;
+//     margin: 0 auto;
+//     width: 15%;
+//     height: 15%;
+//     background-color: #333;
+//     border-radius: 100%;
+//     -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//             animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+//   }
+//   .sk-fading-circle .sk-circle2 {
+//     -webkit-transform: rotate(30deg);
+//         -ms-transform: rotate(30deg);
+//             transform: rotate(30deg);
+//   }
+//   .sk-fading-circle .sk-circle3 {
+//     -webkit-transform: rotate(60deg);
+//         -ms-transform: rotate(60deg);
+//             transform: rotate(60deg);
+//   }
+//   .sk-fading-circle .sk-circle4 {
+//     -webkit-transform: rotate(90deg);
+//         -ms-transform: rotate(90deg);
+//             transform: rotate(90deg);
+//   }
+//   .sk-fading-circle .sk-circle5 {
+//     -webkit-transform: rotate(120deg);
+//         -ms-transform: rotate(120deg);
+//             transform: rotate(120deg);
+//   }
+//   .sk-fading-circle .sk-circle6 {
+//     -webkit-transform: rotate(150deg);
+//         -ms-transform: rotate(150deg);
+//             transform: rotate(150deg);
+//   }
+//   .sk-fading-circle .sk-circle7 {
+//     -webkit-transform: rotate(180deg);
+//         -ms-transform: rotate(180deg);
+//             transform: rotate(180deg);
+//   }
+//   .sk-fading-circle .sk-circle8 {
+//     -webkit-transform: rotate(210deg);
+//         -ms-transform: rotate(210deg);
+//             transform: rotate(210deg);
+//   }
+//   .sk-fading-circle .sk-circle9 {
+//     -webkit-transform: rotate(240deg);
+//         -ms-transform: rotate(240deg);
+//             transform: rotate(240deg);
+//   }
+//   .sk-fading-circle .sk-circle10 {
+//     -webkit-transform: rotate(270deg);
+//         -ms-transform: rotate(270deg);
+//             transform: rotate(270deg);
+//   }
+//   .sk-fading-circle .sk-circle11 {
+//     -webkit-transform: rotate(300deg);
+//         -ms-transform: rotate(300deg);
+//             transform: rotate(300deg);
+//   }
+//   .sk-fading-circle .sk-circle12 {
+//     -webkit-transform: rotate(330deg);
+//         -ms-transform: rotate(330deg);
+//             transform: rotate(330deg);
+//   }
+//   .sk-fading-circle .sk-circle2:before {
+//     -webkit-animation-delay: -1.1s;
+//             animation-delay: -1.1s;
+//   }
+//   .sk-fading-circle .sk-circle3:before {
+//     -webkit-animation-delay: -1s;
+//             animation-delay: -1s;
+//   }
+//   .sk-fading-circle .sk-circle4:before {
+//     -webkit-animation-delay: -0.9s;
+//             animation-delay: -0.9s;
+//   }
+//   .sk-fading-circle .sk-circle5:before {
+//     -webkit-animation-delay: -0.8s;
+//             animation-delay: -0.8s;
+//   }
+//   .sk-fading-circle .sk-circle6:before {
+//     -webkit-animation-delay: -0.7s;
+//             animation-delay: -0.7s;
+//   }
+//   .sk-fading-circle .sk-circle7:before {
+//     -webkit-animation-delay: -0.6s;
+//             animation-delay: -0.6s;
+//   }
+//   .sk-fading-circle .sk-circle8:before {
+//     -webkit-animation-delay: -0.5s;
+//             animation-delay: -0.5s;
+//   }
+//   .sk-fading-circle .sk-circle9:before {
+//     -webkit-animation-delay: -0.4s;
+//             animation-delay: -0.4s;
+//   }
+//   .sk-fading-circle .sk-circle10:before {
+//     -webkit-animation-delay: -0.3s;
+//             animation-delay: -0.3s;
+//   }
+//   .sk-fading-circle .sk-circle11:before {
+//     -webkit-animation-delay: -0.2s;
+//             animation-delay: -0.2s;
+//   }
+//   .sk-fading-circle .sk-circle12:before {
+//     -webkit-animation-delay: -0.1s;
+//             animation-delay: -0.1s;
+//   }
+
+//   @-webkit-keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; }
+//   }
+
+//   @keyframes sk-circleFadeDelay {
+//     0%, 39%, 100% { opacity: 0; }
+//     40% { opacity: 1; }
+//   }
+
+// ul, li {
+//     list-style: none;
+//     float: left;
+//     line-height: 15vh;
+//   }
+//   .upper{
+//     margin-top: -70px;
+//     width: 100%;
+//     height: 17%;
+//    /* margin-left: -2px;*/
+//     position: fixed;
+//     background-color: white;
+//     top: 0;
+//     z-index: 1
+// }
+// .up{
+//     color: gray;
+//     /* Add a font */
+
+//     /* Set the font-size to 25 pixels */
+//     font-size: 25px;
+
+// }
+// .middle {
+//     position: absolute;
+//     top: 50%;
+//     left: 50%;
+//     transform: translate(-50%, -50%);
+//     text-align: center;
+// }
+
+// .dropdown {
+//     position: relative;
+//     display: inline-block;
+// }
+
+// .dropdown-content {
+//     display: none;
+//     position: absolute;
+//     background-color: #f9f9f9;
+//     min-width: 160px;
+//     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+//     z-index: 1;
+//     margin-left: -220px;
+//     margin-top: -20px;
+
+// }
+
+// .dropdown:hover .dropdown-content {
+//     display: block;
+// }
+
+// .desc {
+//     padding: 15px;
+//     text-align: center;
+// }
+// #insert{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   #insert2{
+//     margin-left:8px;
+//     margin-top:-15px;
+//     text-shadow: 20px;
+//   }
+//   .example-container {
+//     width: 500px;
+//     height: 300px;
+//     border: 1px solid rgba(0, 0, 0, 0.5);
+//   }
+
+//   .example-sidenav-content {
+//     display: flex;
+//     height: 100%;
+//     align-items: center;
+//     justify-content: center;
+//   }
+
+//   .example-sidenav {
+//     padding: 20px;
+//   }
+//   .vertical-menu {
+//     width: 250px;
+//     padding-left: 10px;
+// }
+
+// .vertical-menu a {
+//     background-color: #eee;
+//     color: black;
+//     display: block;
+//     padding: 12px;
+//     text-decoration: none;
+
+// }
+
+// .vertical-menu a:hover {
+//     background-color: #ccc;
+// }
+
+// .vertical-menu a.active {
+
+//     background: rgba(0, 0, 0, 0.8);
+//     color: white;
+// }
+// #c2 {
+
+// }
+// #c1 {
+//     float:left;
+
+// }
+
+// body {margin:0}
+
+// .icon-bar {
+//     width: 17%;
+// /*     background-color: #555; */
+// background-color: #18262F;
+//     margin-top: -9px;
+//     height:100%;
+//     position: fixed;
+//     display: inline-block;
+//     margin-left: -16px;
+// }
+// @media screen and (max-width: 1000px){
+//     .off{
+//        display: none;
+//     }
+// }
+// .icon-bar2 {
+
+//     width: 299px;
+//     background-color: white;
+//     margin-top: -7px;
+//     height:86vh;
+//     position: fixed;
+
+// }
+// .icon-bar a {
+//     display: block;
+//     text-align: center;
+//     padding: 16px;
+//     transition: all 0.3s ease;
+//     color: white;
+//     font-size: 14px;
+//     text-align: left;
+// }
+
+// .icon-bar a:hover {
+//     background-color: #000;
+// }
+
+// .active {
+//     background-color: #4CAF50 !important;
+// }
+// .iphone {
+//     width: 201px;
+//     height: 378px;
+//     background: #f9f7f9;
+//     border: 5px solid #c1bfc1;
+//     border-radius: 45px;
+//     opacity: 0.8;
+// }
+// .highlight {
+//     width: 185px;
+//     height: 366px;
+//     border: 3px solid #fff;
+//     border-radius: 45px;
+//     position: relative;
+//     z-index: 10;
+//     top: -748px;
+//     left: 10px;
+// }
+// .circle {
+//     width: 7px;
+//     height: 7px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -370px;
+//     left: 92px;
+// }
+// .camera {
+//     width: 10px;
+//     height: 10px;
+//     background: #333;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -376px;
+//     left: 66px;
+// }
+// .speaker {
+//     width: 59px;
+//     height: 3px;
+//     background: #333;
+//     border-radius: 5px;
+//     position: relative;
+//     top: -372px;
+//     left: 73px;
+// }
+// .screen {
+//     width: 166px;
+//     height: 255px;
+//     border: 3px solid #333;
+//     border-radius: 5px;
+//     position: relative;
+//     left: 18px;
+//     top: -365px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// }
+// .home1 {
+//     width: 47px;
+//     height: 47px;
+//     background: #fff;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -353px;
+//     left: 79px;
+//     z-index: 2;
+// }
+// .home2 {
+//     width: 52px;
+//     height: 52px;
+//     border-radius: 50%;
+//     position: relative;
+//     top: -403px;
+//         left: 77px;
+// background: #7f8282;
+// background: -webkit-linear-gradient(#e2e3e4, #7f8282);
+// background: -o-linear-gradient(#e2e3e4, #7f8282);
+// background: -moz-linear-gradient(#e2e3e4, #7f8282);
+// background: linear-gradient(#e2e3e4, #7f8282);
+// }
+// #c2{
+//     //background:green;
+//     float:right;
+// }
+// #c1, #c2 {
+//     width: 33%;
+//     //background: rebeccapurple
+// }
+
+// #c3 {
+//     width: auto;
+//      width:34%;
+//     // background: red
+// }
+// .off{
+//     margin: auto;
+//     width: 60%;
+//     top:70%;
+//     padding: 10px;
+//     margin-right:30%
+
+// }
+// .newspaper {
+//     -webkit-column-count: 2; /* Chrome, Safari, Opera */
+//     -moz-column-count: 2; /* Firefox */
+//     column-count: 2;
+//     -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
+//     -moz-column-gap: 40px; /* Firefox */
+//     column-gap: 40px;
+//     align-content:left;
+//     text-align: left;
+// }
+// #demo {
+//     margin: 30px 0 50px 0;
+//     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+
+// }
+
+// #demo .wrapper {
+//     display: inline-block;
+//     width: 180px;
+//     margin: 0 10px 0 0;
+//     height: 20px;
+//     position: relative;
+
+// }
+
+// #demo .parent {
+//     height: 100%;
+//     width: 100%;
+//     display: block;
+//     cursor: pointer;
+//     line-height: 30px;
+//     height: 30px;
+//     border-radius: 5px;
+//     background: #F9F9F9;
+//     border: 1px solid #AAA;
+//     border-bottom: 1px solid #777;
+//     color: #282D31;
+//     font-weight: bold;
+//     z-index: 2;
+//     position: relative;
+//     -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
+//     -webkit-transition-delay: .8s;
+//     text-align: center;
+// }
+
+// #demo .parent:hover,
+// #demo .content:hover ~ .parent {
+//     background: #fff;
+//     -webkit-transition-delay: 0s, 0s, 0s;
+// }
+
+// #demo .content:hover ~ .parent {
+//     border-bottom-left-radius: 0;
+//     border-bottom-right-radius: 0;
+//     z-index: 0;
+// }
+
+// #demo .content {
+//     position: absolute;
+//     top: 0;
+//     display: block;
+//     z-index: 1;
+//     height: 0;
+//     width: 180px;
+//     padding-top: 30px;
+//     -webkit-transition: height .5s ease;
+//     -webkit-transition-delay: .4s;
+//     border: 1px solid #777;
+//     border-radius: 5px;
+//     box-shadow: 0 1px 2px rgba(0,0,0,.4);
+// }
+
+// #demo .wrapper:active .content {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+// #demo .content:hover {
+//     height: 123px;
+//     z-index: 3;
+//     -webkit-transition-delay: 0s;
+// }
+
+// #demo .content ul {
+//     background: #fff;
+//     margin: 0;
+//     padding: 0;
+//     overflow: hidden;
+//     height: 100%;
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+
+// #demo .content ul a {
+//     text-decoration: none;
+// }
+
+// #demo .content li:hover {
+//     background: #eee;
+//     color: #333;
+// }
+
+// #demo .content li {
+//     list-style: none;
+//     text-align: left;
+//     color: #888;
+//     font-size: 14px;
+//     line-height: 30px;
+//     height: 30px;
+//     padding-left: 10px;
+//     border-top: 1px solid #ccc;
+// }
+
+// #demo .content li:last-of-type {
+//     border-bottom-left-radius: 5px;
+//     border-bottom-right-radius: 5px;
+// }
+// .customClass {
+//     background-color: #dd3;
+//     border-radius: 5px;
+//     margin:5px;
+//     width: 500px;
+// }
+
+// .customClass .img-ul-upload {
+//     background-color: #000 !important;
+// }
+
+// .customClass .img-ul-clear {
+//     background-color: #B819BB !important;
+// }
+
+// .customClass .img-ul-drag-box-msg {
+//     color: purple !important;
+// }
+
+// .customClass .img-ul-container {
+//     background-color: #FF6CAD !important;
+// }
+// .img-ul-file-upload[_ngcontent-c6] {
+//     padding: 16px;
+//     height: 201px !important;
+// }
+// .weekDays-selector input {
+//     display: none!important;
+//   }
+
+//   .weekDays-selector input[type=checkbox] + label {
+//     display: inline-block;
+//     border-radius: 6px;
+//     background: #dddddd;
+//     height: 40px;
+//     width: 34.2px;
+//     margin-right: 3px;
+//     line-height: 40px;
+//     text-align: center;
+//     cursor: pointer;
+//   }
+
+//   .weekDays-selector input[type=checkbox]:checked + label {
+//     background: #2AD705;
+//     color: #ffffff;
+//   }
+//   @media screen and (max-width: 900px) {
+//         .icon-bar{
+//             display: none;
+
+//         }
+//         .sch{
+//             display: none;
+//         }
+//         .first{
+//             width:1%!important;
+//         }
+//         .second{
+//             margin-left: 8px!important;
+//         }
+//         .small{
+//             display: block!important;
+//         }
+//         .image{
+//             display: none;
+//         }
+//         .schlar{
+//             display: block!important;
+//         }
+//   }
+
+//   @media screen and (min-width: 900px) {
+// .schlar{
+//     display: none;
+// }
+
+//   }
+//   .small{
+//       display: none;
+//   }
+//   .first{
+//     float:left;
+//     width: 16%;
+//     height:86vh;
+//     overflow-y: hidden;
+//     overflow-x: hidden;
+//     margin-right: 5px
+//   }
+//   .second{
+//     width: 88%;
+//     height:86vh;
+//     margin-left:171px;
+//   }
+//  .mat-dialog-container {
+//     max-width: none !important;
+// }
+// .sch{
+
+// }
+// .schlar{
+
+// }
+// .pointer{
+//     cursor:pointer !important;
+//     font-size: 11px
+// }
+// .expansion-panel__content{
+//     margin-left: 0% !important;
+// }
+
+// /* Side Navi */
+// #mySidenav a {
+//     margin-top: -9px;
+//     position: absolute;
+//     left: -80px;
+//     transition: 0.3s;
+//     width: 100px;
+//     text-decoration: none;
+//     font-size: 28px;
+//     color: white;
+//     border-radius: 0 5px 5px 0;
+// }
+
+// #mySidenav a:hover {
+//     left: 0;
+// }
+
+// #about {
+//     top: 20px;
+//     background-color: #ffffff;
+//     opacity: .4;
+// }
+
+// #blog {
+//     top: 80px;
+//     background-color: #18262F;
+//     position: absolute; z-index: 99;
+// }
+
+// #projects {
+//     top: 140px;
+//     background-color: #f44336;
+// }
+
+// #contact {
+//     top: 200px;
+//     background-color: #555
+// }
+
+// .button2 {background-color: #008CBA;}
+// .ngx-picker--btn {
+//     color: #000;
+//     background-color: transparent;
+//     border: none;
+//     padding: 1em;
+//     font-size: 1em; }
+//     .ngx-picker--btn__selected {
+//       background-color: #eee; }
+//     .ngx-picker--btn:hover {
+//       transition: .25s ease;
+//       background-color: #eee;
+//       cursor: pointer; }
+//     .ngx-picker--btn:focus {
+//       outline-color: transparent; }
+
+//   .ngx-picker--btn__month:hover {
+//     border-top-left-radius: 0.2em; }
+
+//   .ngx-picker--btn__done:hover {
+//     border-bottom-right-radius: 0.2em; }
+
+//   .ngx-picker--btn__now:hover {
+//     border-bottom-left-radius: 0.2em; }
+
+//   .ngx-picker--btn__next:hover {
+//     border-top-right-radius: 0.2em; }
+
+//   .calendar {
+//     position: absolute;
+//     background-color: #e6e6e6;
+//     max-width: 16em;
+//     min-width: 16em;
+//     font-size: 16px;
+//     font-family: "Arial", sans-serif;
+//     border-radius: 0.2em;
+//     box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
+
+//   .calendar--previous-and-next {
+//     position: absolute;
+//     right: 0;
+//     top: 0;
+//     display: flex;
+//     justify-content: flex-end; }
+
+//   .calendar--footer {
+//     display: flex;
+//     justify-content: space-between;
+//     background-color: #e6e6e6;
+//     padding: 0;
+//     border-radius: 0.2em; }
+
+//   .calendar--years-select,
+//   .calendar--months-select {
+//     overflow-y: auto;
+//     overflow-x: hidden;
+//     max-height: 14.85em;
+//     background-color: #fff;
+//     width: 100%; }
+
+//   .calendar--year,
+//   .calendar--month {
+//     display: block;
+//     padding: .5em 1em;
+//     width: 100%;
+//     overflow: hidden;
+//     color: #000; }
+//     .calendar--year__selected,
+//     .calendar--month__selected {
+//       color: #000;
+//       font-weight: bold;
+//       background-color: #eee; }
+//     .calendar--year:hover,
+//     .calendar--month:hover {
+//       cursor: pointer;
+//       background-color: #eee;
+//       font-weight: 400;
+//       color: #000; }
+
+//   .calendar--days-of-week {
+//     display: flex;
+//     justify-content: space-around;
+//     background-color: #eee; }
+
+//   .calendar--day-of-week {
+//     position: relative;
+//     padding: .5em;
+//     text-align: center;
+//     text-transform: uppercase;
+//     color: #000;
+//     font-size: .9em; }
+
+//   .calendar--days-select {
+//     display: flex;
+//     flex-wrap: wrap;
+//     justify-content: space-between;
+//     background-color: #fff; }
+
+//   .calendar--day {
+//     text-align: center;
+//     width: 1.285em;
+//     padding: .5em;
+//     font-weight: 500;
+//     color: #000; }
+//     .calendar--day__muted {
+//       color: #999; }
+//     .calendar--day__selected {
+//       background-color: #eee;
+//       color: #000; }
+//     .calendar--day:hover {
+//       cursor: pointer;
+//       color: #000;
+//       background-color: #eee; }
+
+//   .ngx-picker {
+//     display: flex;
+//     position: relative; }
+//     .ngx-picker .calendar {
+//       position: absolute;
+//       left: 0;
+//       top: 2.5em;
+//       z-index: 3; }
+
+//   .time-picker {
+//     display: flex;
+//     justify-content: space-between;
+//     align-items: center;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #e6e6e6; }
+
+//   .time--values {
+//     display: flex;
+//     justify-content: space-between;
+//     flex-direction: row;
+//     flex-wrap: wrap;
+//     max-width: 16em;
+//     min-width: 16em;
+//     background-color: #eee; }
+
+//   .time--value {
+//     width: 2.66em;
+//     font-size: 1em;
+//     padding: .5em 0;
+//     text-align: center;
+//     color: #000; }
+//     .time--value__selected {
+//       color: #000;
+//       background-color: #e6e6e6; }
+//     .time--value:hover {
+//       transition: .25s ease;
+//       cursor: pointer;
+//       background-color: #e6e6e6; }
+
+//   [hidden] {
+//     display: none !important; }
+//     #c11 {
+//         width: 25%;
+//         float:left
+//     }
+//     #c22{
+//         width: 25%;
+//         float:left
+//     }
+//     #c33 {
+//         width: 25%;
+//         float:left
+
+//     }
+//     #c44{
+//         width: 25%;
+//         float:left
+//     }
+//     #c111 {
+//         width: 50%;
+//         float:left
+//     }
+//     #c222{
+//         width: 45%;
+//         float:left
+//     }
+//     #c333 {
+//         width: 5%;
+//         float:left
+
+//     }
+//     #myTable {
+//         border-collapse: collapse;
+//         width: 100%;
+//         border: 1px solid #ddd;
+//         font-size: 12px;
+//       }
+
+//       #myTable th, #myTable td {
+//         text-align: left;
+//         padding: 12px;
+//       }
+
+//       #myTable tr {
+//         border-bottom: 1px solid #ddd;
+//       }
+
+//     //   #myTable tr.header, #myTable tr:hover {
+//     //     background-color: #f1f1f1;
+//     //   }
+//       * {
+//         box-sizing: border-box;
+//       }
+//       .width{
+//         width: 100%;
+//     }
+
+#toast {
+  visibility: hidden;
+  max-width: 250px;
+  height: 50px;
+  /*margin-left: -125px;*/
+  margin: auto;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+
+  position: fixed;
+  z-index: 1;
+  left: 60%;
+  right: 0;
+  bottom: 80%;
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+// /deep/ .mat-menu-panel.test{
+
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+
+//     a{
+//       display: block;
+//     padding: 9px 10px;
+//     margin: 0;
+//     border-bottom: 1px solid #999;
+//     }
+// }
+
+// /deep/ .mat-menu-panel.test_1{
+
+//     background-color: #b7b7b7;
+//     width: 160px;
+//     text-align: left;
+//     color: #fff;
+//     margin-top:48px;
+// }
+
+#toast #img {
+  width: 250px;
+  height: 50px;
+
+  float: left;
+
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  box-sizing: border-box;
+
+  background-color: #111;
+  color: #fff;
+}
+#toast #desc {
+  color: #fff;
+
+  padding: 16px;
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 2s,
+    fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, expand 0.5s 0.5s, stay 3s 1s, shrink 0.5s 4s,
+    fadeout 0.5s 4.5s;
+}
+// #myInput {
+//     border-radius: 15px;
+//     /* border: 2px solid #18262F; */
+//     padding: 7px;
+//     width: 116px;
+//     height: 17px;
+//     font-size: 9px;
+//     outline: none;
+//     float: right;
+//     margin-top: 2%;
+// }
+
+// @-webkit-keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes expand {
+//     from {min-width: 50px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+
+// @keyframes stay {
+//     from {min-width: 350px}
+//     to {min-width: 350px}
+// }
+// @-webkit-keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @keyframes shrink {
+//     from {min-width: 350px;}
+//     to {min-width: 50px;}
+// }
+
+// @-webkit-keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// @keyframes fadeout {
+//     from {bottom: 30px; opacity: 1;}
+//     to {bottom: 60px; opacity: 0;}
+// }
+
+// /* Absolute Center Spinner */
+// .loading {
+//     position: fixed;
+//     z-index: 999;
+//     height: 2em;
+//     width: 2em;
+//     overflow: show;
+//     margin: auto;
+//     top: 0;
+//     left: 0;
+//     bottom: 0;
+//     right: 0;
+//   }
+
+//   /* Transparent Overlay */
+//   .loading:before {
+//     content: '';
+//     display: block;
+//     position: fixed;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     background-color: rgba(0,0,0,0.3);
+//   }
+
+//   /* :not(:required) hides these rules from IE9 and below */
+//   .loading:not(:required) {
+//     /* hide "loading..." text */
+//     font: 0/0 a;
+//     color: transparent;
+//     text-shadow: none;
+//     background-color: transparent;
+//     border: 0;
+//   }
+
+//   .loading:not(:required):after {
+//     content: '';
+//     display: block;
+//     font-size: 10px;
+//     width: 1em;
+//     height: 1em;
+//     margin-top: -0.5em;
+//     -webkit-animation: spinner 1500ms infinite linear;
+//     -moz-animation: spinner 1500ms infinite linear;
+//     -ms-animation: spinner 1500ms infinite linear;
+//     -o-animation: spinner 1500ms infinite linear;
+//     animation: spinner 1500ms infinite linear;
+//     border-radius: 0.5em;
+//     -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//     box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+//   }
+
+//   /* Animation */
+
+//   @-webkit-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-moz-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @-o-keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+//   @keyframes spinner {
+//     0% {
+//       -webkit-transform: rotate(0deg);
+//       -moz-transform: rotate(0deg);
+//       -ms-transform: rotate(0deg);
+//       -o-transform: rotate(0deg);
+//       transform: rotate(0deg);
+//     }
+//     100% {
+//       -webkit-transform: rotate(360deg);
+//       -moz-transform: rotate(360deg);
+//       -ms-transform: rotate(360deg);
+//       -o-transform: rotate(360deg);
+//       transform: rotate(360deg);
+//     }
+//   }
+
+// css style
+
+/*//////////////////////////////////////////////////////////////////
+[ FONT ]*/
+
+// ../fonts/roboto/Roboto-Regular.ttf
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Regular.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Medium.ttf');
+// }
+
+// @font-face {
+//   font-family: Roboto;
+//   src: url('../../fonts/roboto/Roboto-Bold.ttf');
+// }
+
+/*//////////////////////////////////////////////////////////////////
+[ RESTYLE TAG ]*/
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+body,
+html {
+  height: 100%;
+  font-family: sans-serif;
+}
+
+/* ------------------------------------ */
+a {
+  margin: 0px;
+  transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+  -o-transition: all 0.4s;
+  -moz-transition: all 0.4s;
+}
+
+a:focus {
+  outline: none !important;
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+/* ------------------------------------ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0px;
+}
+
+p {
+  margin: 0px;
+}
+
+ul,
+li {
+  margin: 0px;
+  list-style-type: none;
+}
+
+/* ------------------------------------ */
+input {
+  display: block;
+  outline: none;
+  border: none !important;
+}
+
+textarea {
+  display: block;
+  outline: none;
+}
+
+textarea:focus,
+input:focus {
+  border-color: transparent !important;
+}
+
+/* ------------------------------------ */
+button {
+  outline: none !important;
+  border: none;
+  background: transparent;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+iframe {
+  border: none !important;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Scroll bar ]*/
+.js-pscroll {
+  position: relative;
+  overflow: hidden;
+}
+
+.table100 .ps__rail-x {
+  z-index: 1010;
+  height: 6px;
+  background-color: transparent;
+  opacity: 1 !important;
+  bottom: 10px;
+}
+
+.table100 .ps__rail-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #e6e6e6;
+  height: 100%;
+  width: calc(100% - 30px);
+  left: 15px;
+  top: 0px;
+}
+
+.table100 .ps__rail-x .ps__thumb-x {
+  height: 100%;
+  bottom: 0;
+  background-color: transparent;
+  opacity: 1 !important;
+}
+
+.table100 .ps__rail-x .ps__thumb-x::before {
+  content: "";
+  display: block;
+  position: absolute;
+  background-color: #b3b3b3;
+  height: 100%;
+  width: calc(100% - 30px);
+  top: 0;
+  left: 15px;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+
+.limiter {
+  width: 100%;
+  margin: 0 auto;
+  // background: #fa71cd;
+  background: #efecec;
+  // background: -webkit-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -o-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: -moz-linear-gradient(bottom, #c471f5, #fa71cd);
+  // background: linear-gradient(bottom, #c471f5, #fa71cd);
+}
+
+.container-table100 {
+  max-height: 100vh;
+  // max-width: 1366px;
+  margin: 0 auto;
+  min-height: 100vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  // padding: 33px 100px;
+  padding: 55px 20px 0px 20px;
+}
+
+.wrap-table100 {
+  width: 100%;
+}
+
+/*//////////////////////////////////////////////////////////////////
+[ Table ]*/
+.table100 {
+  background-color: #fff;
+}
+
+table {
+  width: 100%;
+}
+
+th,
+td {
+  font-weight: unset;
+  padding-right: 10px;
+}
+
+.column1 {
+  width: 100%;
+  padding-left: 40px;
+}
+
+.column2 {
+  width: 225px;
+  padding-left: 55px;
+  white-space: nowrap;
+
+  overflow-x: overlay;
+}
+
+.column3 {
+  // width: 205px;
+  width: 265px;
+  padding-left: 20px;
+}
+
+.column4 {
+  width: 300px;
+}
+
+.column5 {
+  width: 235px;
+}
+
+.column6 {
+  width: 170px;
+}
+
+.column7 {
+  // width: 330px;
+  width: 200px;
+}
+
+.column8 {
+  // width: 305px;
+  width: 210px;
+}
+
+.column9 {
+  width: 200px;
+}
+
+.column10 {
+  width: 200px;
+}
+
+.column11 {
+  // width: 200px;
+  width: 155px;
+}
+
+.column12 {
+  width: 225px;
+}
+
+.column13 {
+  width: 225px;
+}
+
+.column14 {
+  // width: 200px;
+  width: 150px;
+}
+.column15 {
+  // width: 200px;
+  width: 150px;
+}
+.column16 {
+  // width: 200px;
+  width: 150px;
+}
+.column17 {
+  // width: 200px;
+  width: 150px;
+}
+.column18 {
+  // width: 200px;
+  width: 175px;
+}
+.column19 {
+  // width: 200px;
+  width: 150px;
+}
+
+.column20 {
+  // width: 200px;
+  width: 150px;
+}
+.column21 {
+  // width: 200px;
+  width: 150px;
+}
+.column22 {
+  // width: 200px;
+  width: 150px;
+}
+.column23 {
+  // width: 200px;
+  width: 150px;
+}
+
+.table100 th {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+
+.table100 td {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+/*==================================================================
+[ Fix col ]*/
+.table100 {
+  width: 100%;
+  position: relative;
+}
+
+.table100-firstcol {
+  background-color: #fff;
+  position: absolute;
+  z-index: 1000;
+  width: 310px;
+  top: 0;
+  left: 0;
+}
+
+.table100-firstcol table {
+  background-color: #fff;
+}
+
+.wrap-table100-nextcols {
+  width: 100%;
+  overflow: auto;
+  padding-left: 310px;
+  padding-bottom: 28px;
+}
+
+.table100-nextcols table {
+  table-layout: fixed;
+}
+
+.shadow-table100-firstcol {
+  box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -o-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+  -ms-box-shadow: 8px 0px 10px 0px rgba(0, 0, 0, 0.05);
+}
+
+.table100-firstcol table {
+  background-color: transparent;
+}
+
+/*==================================================================
+[ Ver1 ]*/
+
+.table100.ver1 th {
+  font-family: Roboto;
+  font-size: 14px;
+  height: 80px;
+  // color: #333333;
+  color: white;
+  // line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.table100.ver1 td {
+  font-family: Roboto;
+  font-size: 15px;
+  // line-height: 1.4;
+}
+
+.table100.ver1 .table100-firstcol td {
+  color: #666666;
+}
+
+.table100.ver1 .table100-nextcols td {
+  color: #999999;
+}
+
+.table100.ver1 tr {
+  border-bottom: 1px solid #f2f2f2;
+}
+
+// .btn-default {
+//   @include btn-variant(#546e7a, #90a4ae, #78909c, #cfd8dc, #eceff1, #b0bec5, #455a64);
+
+// }
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  float: right;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  cursor: pointer;
+  background-image: none;
+  whitespace: nowrap;
+  padding: 6px 12px;
+  font-size: 1.4rem;
+  border-radius: 0px;
+  border: 1px solid transparent;
+  text-decoration: none;
+  user-select: none;
+  background: #d8d8d8;
+  font-size: 12px;
+
+  &,
+  &:active,
+  &.active {
+    &:focus {
+      outline: thin dotted;
+      outline: 5px auto -webkit-focus-ring-color;
+      outline-offset: -2px;
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    text-decoration: none;
+    color: #fff;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    pointer-events: none;
+    box-shadow: none;
+  }
+
+  &.btn-xs {
+    padding: 3px 6px;
+    font-size: 1.2rem;
+  }
+
+  &.btn-sm {
+    padding: 4px 8px;
+    font-size: 1.3rem;
+  }
+
+  &.btn-lg {
+    padding: 8px 16px;
+    font-size: 1.6rem;
+  }
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgb(153, 153, 153);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  // background: rgb(74, 118, 184);
+  background: #add8e6;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+.mat-tab-body-content {
+  overflow: hidden !important;
+}
+.switch-toggle {
+  float: left;
+  background: #242729;
+}
+.switch-toggle input {
+  position: absolute;
+  opacity: 0;
+}
+.switch-toggle input + label {
+  padding: 7px;
+  float: left;
+  color: #fff;
+  cursor: pointer;
+}
+.switch-toggle input:checked + label {
+  background: green;
+}
diff --git a/src/app/technician/technician.component.spec.ts b/src/app/technician/technician.component.spec.ts
new file mode 100644
index 0000000..7f14be2
--- /dev/null
+++ b/src/app/technician/technician.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TechnicianComponent } from './technician.component';
+
+describe('TechnicianComponent', () => {
+  let component: TechnicianComponent;
+  let fixture: ComponentFixture<TechnicianComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TechnicianComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TechnicianComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/technician/technician.component.ts b/src/app/technician/technician.component.ts
new file mode 100644
index 0000000..0f8892d
--- /dev/null
+++ b/src/app/technician/technician.component.ts
@@ -0,0 +1,989 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { ResponseOptions, Response } from '@angular/http';
+import { Contact } from '../contact';
+import { ContactService } from '../contact.service';
+import { Otp } from '../otp';
+import {MdSnackBar} from '@angular/material';
+// import {Md5} from 'ts-md5/dist/md5';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { DialogContentExampleDialogComponent } from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn } from '@angular/forms';
+const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+import { AddCustComponent } from '../add-cust/add-cust.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { Observable } from 'rxjs/Rx';
+import { EditCostumerComponent } from '../edit-costumer/edit-costumer.component';
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/debounceTime';
+// import { ReportSettingComponent } from './report-setting/report-setting.component';
+import { ReportSettingComponent } from '../add/report-setting/report-setting.component'
+import { environment } from '../../environments/environment';
+import { ResetPasswordComponent } from '../add/reset-password/reset-password.component';
+import { TranslateService } from 'ng2-translate';
+import { DashboardContentComponent } from '../add/dashboard-content/dashboard-content.component';
+import { PointShareComponent } from '../point-share/point-share.component';
+declare var swal: any;
+@Component({
+  selector: 'app-technician',
+  templateUrl: './technician.component.html',
+  styleUrls: ['./technician.component.scss']
+})
+export class TechnicianComponent implements OnInit {
+ modelChanged: Subject<string> = new Subject<string>();
+  kycStatus=[{Name:'Approved',value:'Approved'},{Name:'Reject',value:'Reject'},{Name:'Pending',value:'Pending'}]
+  dealerChk: boolean = false;
+  ev: any;
+  show1: boolean = false;
+  show2: boolean = true;
+  show3: boolean = false;
+  first_name: any;
+  logoutbut: boolean;
+  last_name: any;
+  passwordd: any;
+  org_name: any;
+  allUser:boolean=false;
+  emaill: any;
+  phone: any;
+  executed: any;
+  $event2: any;
+  dealer: any;
+  contacts: Contact[] = [];
+  contact: Contact;
+  login1: any;
+  mess2: any;
+  mess: any;
+  otp: any;
+  switchVal: any;
+  str: boolean = false;
+  password2: any;
+  cust_load: any;
+  errmsg: boolean =true;
+  serviceResponse: string;
+  errorMsg: boolean;
+  showNav: boolean =false;
+  url: any;
+  dealer_Permission: any;
+  adbtn: string;
+  report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report");
+
+  }
+  report_speed() {
+    // console.log("report speed call")
+    this.cond = false
+    this.router.navigateByUrl("device-report/device-speed-report");
+  }
+  stre() {
+    this.str = true;
+  }
+  stren() {
+    this.str = false;
+  }
+  addcus() {
+    this.router.navigateByUrl("add");
+  }
+
+  Ddetail() {
+    this.router.navigateByUrl("driverdetail");
+  }
+  DModel() {
+    this.router.navigateByUrl("deviceModel");
+  }
+  VType() {
+    this.router.navigateByUrl("VehicleType");
+  }
+
+
+
+  clear() {
+    this.first_name = ' '
+    this.last_name = ' '
+    this.emaill = null
+    this.phone = null
+  }
+  before: any;
+  emmnerr: any;
+  Load: any
+  $event: any;
+  openDialog() {
+  
+        let dialogRef = this.dialog.open(AddCustComponent, {
+          width: '800px',
+          'data':{role:'technitian'}
+        //  height: '600px', 
+    
+        });
+    
+        dialogRef.afterClosed().subscribe(result => {
+          // console.log(result);
+          if (result == "succ") {
+            this.tost1("succ");
+            this.ngOnInit();
+    
+          }
+        });
+  }
+
+
+
+  constructor(private contactService: ContactService, public snackBar: MdSnackBar, private router: Router, private _flashMessagesService: FlashMessagesService, public dialog: MdDialog, public translate: TranslateService) {
+    this.modelChanged
+      .debounceTime(1000) // wait 300ms after the last event before emitting last event
+      .distinctUntilChanged() // only emit if value is different from previous value
+      .subscribe(myInput => {
+        this.myInput = myInput;
+        // console.log('debounce')
+        // this.dealerDetail();
+        this.showDemoVideo()
+        this.ngOnInit();
+      });
+
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+  }
+
+  data_descip: any;
+  table1ch() {
+
+    myFunction();
+    function myFunction() {
+      var input, filter, table, tr, td, i, td1;
+      input = document.getElementById("myInput");
+      filter = input.value.toUpperCase();
+      table = document.getElementById("myTable");
+      tr = table.getElementsByTagName("tr");
+      for (i = 0; i < tr.length; i++) {
+        td = tr[i].getElementsByTagName("td")[1];
+        td1 = tr[i].getElementsByTagName("td")[0]
+        if (td) {
+          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else if (td1.innerHTML.toUpperCase().indexOf(filter) > -1) {
+            tr[i].style.display = "";
+          }
+          else {
+            tr[i].style.display = "none";
+          }
+        }
+      }
+    }
+  }
+
+  tost1(divid) {
+    if (divid == "EmM") {
+      this.data_descip = this.emmnerr.split(":")[1]
+      launch_toast();
+    }
+    else if (divid == "succ") {
+      this.data_descip = "Custumer Successfully Added"
+      launch_toast();
+    }else if(divid == "reportPref"){
+      this.data_descip = "Report Preference updated !!!"
+      launch_toast();
+    }else if(divid == "password_changed"){
+      this.data_descip = "Password updated !!!";
+      launch_toast();
+    }else if(divid == "alertset"){
+      this.data_descip = "Alert preference updated !!!";
+      launch_toast();
+    }else if(divid=="kyc"){
+       this.data_descip = "KYC Status updated !!!";
+      launch_toast();
+    }
+    function launch_toast() {
+      // console.log(divid);
+      var x = document.getElementById("toast")
+      //console.log(x);
+      x.className = "show";
+      setTimeout(function () { x.className = x.className.replace("show", ""); }, 4500);
+    }
+  }
+
+  valclear() {
+    this._flashMessagesService.show("Cleared", { cssClass: 'alert-warning', timeout: 2000 });
+
+  }
+
+  click1(event) {
+    this.show2 = false;
+    this.show3 = true;
+    if ((event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode == 9 || event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 37 || event.keyCode == 39) {
+    }
+    /* if(event.keyCode===13){
+    this.otp_window();
+    } */
+
+    else
+      event.preventDefault();
+  }
+  click2(event2) {
+    this.show2 = true;
+    this.show3 = false;
+
+  }
+  call(e) {
+    {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }
+  geo() {
+    this.router.navigateByUrl("geofencing");
+
+  }
+  devicess: any;
+  final: any;
+  /*  getdev(){
+     let foods = []
+     this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+         
+       data => {
+         this.devicess = data 
+   
+         let swap;
+         for(let g = 0;g<this.devicess.devices.length-1;g++ ){
+           for(let c = 0;c<this.devicess.devices.length-g-1;c++ ){
+             if(this.devicess.devices[c].Device_Name>this.devicess.devices[c+1].Device_Name){
+                 swap = this.devicess.devices[c];
+                 this.devicess.devices[c] = this.devicess.devices[c+1];
+                 this.devicess.devices[c+1] = swap;
+             }
+           }
+         }
+   
+         this.final = this.devicess.devices
+         
+        for(let i=0;i<this.devicess.devices.length;i++){
+        
+          if(this.devicess.devices[i].type_of_device =="Tracker"){
+            let a ={
+             value : this.devicess.devices[i].Device_Name,
+             viewValue:this.devicess.devices[i].Device_Name
+            }
+            foods.push(a);
+          }
+       
+        }
+   
+       });
+   } */
+  cond: Boolean = false;
+  point: any = 0;
+  aa() {
+    // console.log(this.point);
+    if (this.point == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else if (this.point % 2 == 0) {
+      this.cond = true;
+      this.point++;
+    }
+    else {
+      this.cond = false
+      this.point++;
+    }
+
+
+  }
+  run() {
+
+  }
+
+  devicesss: any;
+  subscription: any;
+  timer: any;
+  messageSuccess: any = true;
+  selectedlanguage :any; 
+
+  vewdev(id) {
+    console.log(id);
+    localStorage.setItem("custId", id);
+    localStorage.removeItem("in1");
+    this.selectedlanguage = localStorage.getItem('appLang'); 
+    this.translate.setDefaultLang(this.selectedlanguage);
+    this.translate.use(this.selectedlanguage);
+    this.contactService.getcustToken(id).subscribe(
+      data => {
+        this.devicesss = data
+        // console.log(this.devicesss)
+
+        window.localStorage['Dealer_token'] = window.localStorage['token']
+        window.localStorage['token'] = this.devicesss.custumer_token;
+        localStorage.removeItem('devices');
+        window.localStorage['DataUpdate'] = 'True';
+        window.localStorage['Custumer'] = 'ON';
+        localStorage.setItem('superadmin', "ON");
+     
+        var chkPP = localStorage.getItem('profilePic');
+        if(chkPP != null){
+          localStorage.removeItem('profilePic');
+        }  
+        // localStorage.setItem('Dealer',"OFF");
+        // localStorage.setItem('superadmin',"OFF")
+        console.log('this.superAdmin',this.superAdmin);
+        debugger;
+        if(this.superAdmin === true){
+          localStorage.setItem('supAdminAcessToCust', 'true' ); 
+        }
+        if (window.localStorage['DataLoaded'] = 'True') {
+          let dlrStatus = "true";
+
+          localStorage.setItem("dlrchk", dlrStatus)
+
+          this.router.navigateByUrl("const?_status=" + "OK");
+
+          // console.log('testing', this.useridd);
+        }
+
+
+      });
+  }
+
+
+
+  myInput: any;
+  myaccount() {
+
+    let dialogRef = this.dialog.open(MyaccountComponent, {
+      width: '680px',
+
+      data: {}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      if (result == "succ") {
+        // console.log("Updated")
+      }
+
+    });
+  }
+  ign() {
+    this.router.navigateByUrl("device-report/ign-report");
+
+  }
+  openNav() {
+    /*  document.getElementById("myNav").style.width = "100%";
+  */
+    this.router.navigateByUrl("location");
+
+  }
+  logout() {
+    window.localStorage.clear();
+    this.router.navigateByUrl("login");
+  }
+  devi() {
+    this.router.navigateByUrl("dashboard");
+
+  }
+
+  route_map() {
+    this.router.navigateByUrl("routeMapping");
+
+  }
+  ideal() {
+    this.router.navigateByUrl("device-report/ideal-report");
+  }
+  soon() {
+    this.router.navigateByUrl("const?_i=" + window.localStorage.token);
+
+  }
+  new() {
+    this.router.navigateByUrl("new");
+
+  }
+
+  group() {
+    this.cond = false
+    this.router.navigateByUrl("group_view");
+  }
+
+  ignition_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/ignition_report");
+
+
+  }
+
+  geofancingReport() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/geofancing");
+  }
+
+  overspeed() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/overspeed");
+
+  }
+
+  vehicleRoute() {
+    this.router.navigateByUrl("vehicleRoute");
+
+  }
+
+  mydealer() {
+    window.localStorage['token'] = window.localStorage['Dealer_token'];
+    localStorage.removeItem('devices');
+    window.localStorage['DataUpdate'] = 'True';
+    if (window.localStorage['DataLoaded'] = 'True') {
+      window.localStorage['Custumer'] = 'OFF'
+      this.router.navigateByUrl("add")
+      // this.router.navigateByUrl("const?_status="+"OK");
+    }
+  }
+
+
+  dealerInfo() {
+    this.cond = false
+    this.router.navigateByUrl("dealerInfo");
+  }
+
+
+  stoppage_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/stoppage_report");
+
+  }
+
+
+  distance_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/distance_report");
+  }
+
+  trip_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/trip_report");
+
+  }
+  routeViolation() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/routeViolation");
+
+  }
+
+
+  notifications() {
+    this.cond = false
+    this.router.navigateByUrl("notifications");
+  }
+
+
+  driverPerformance() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/Driver-performance");
+  }
+
+  alert_report() {
+    this.cond = false
+    this.router.navigateByUrl("device-report/alert_report");
+  }
+
+  summaryReport() {
+
+    this.cond = false
+    this.router.navigateByUrl("device-report/summary-report");
+  }
+
+  fs: any;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  custtype: any;
+  custumer: any=[];
+  mb: any;
+  cust: boolean = false;
+  logo: any;
+  text: any;
+  superAdmin: Boolean = false;
+  ngOnInit() {
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+      console.log('whatishere=>',this.superAdmin);
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    let test = JSON.parse(window.atob(window.localStorage.token.split('.')[1]));
+    this.dealer_Permission = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).cust_add_permission;
+
+    // console.log(test);
+    this.custtype = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.adbtn = localStorage.getItem("dlrchk");
+    localStorage.setItem("dlrchk", this.custtype);
+    //  this.getdev();
+    if (this.custtype == true) {
+      this.cust = true;
+    }
+    if (this.mb.charAt(0) == "n") {
+      this.mb = ' '
+    }
+    if (window.localStorage['Custumer'] == 'ON') {
+      this.logoutbut = false
+      this.dealer = true
+    }
+    else {
+      this.logoutbut = true
+    }
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+
+ 
+    history.pushState(null, null, document.URL);
+    window.addEventListener('popstate', function () {
+      history.pushState(null, null, document.URL);
+    });
+
+    this.logo = window.localStorage['logo'];
+    this.text = window.localStorage['text'];
+    this.getCustomer();
+  }
+
+
+  onChange(cust, ev) {
+ 
+    let status = ev;
+    // console.log(status.checked);
+
+    let cust_status = cust;
+    let cust_id = cust._id;
+    let cust_activity = cust.status
+    // console.log(cust_activity);
+
+
+    this.cust_load = {
+      "uId": cust_id,
+      "loggedIn_id": this.useridd,
+      "status": status.checked
+    }
+    // console.log(cust_id);
+
+
+    console.log(this.cust_load);
+    this.contactService.custStatus(this.cust_load)
+      .subscribe(res => {
+        let a = res;
+        // console.log(a);
+        // console.log("Status changed");
+      })
+  }
+
+  getCustomer(){
+     this.Load = true;  
+    this.contactService.getTechnician(this.useridd, this.skip, this.limit,this.myInput,this.allUser).subscribe(  
+      data => {
+        this.Load = false;
+        this.custumer=[];
+        this.custumer = data;
+        for(var i=0;i<this.custumer.length;i++){
+          if(this.custumer[i].adminAlert == undefined){
+            this.custumer[i]['adminAlert'] = false;
+          }
+          if(this.custumer[i].dealerAlert == undefined){
+            this.custumer[i]['dealerAlert'] = false;
+          }
+        }
+        console.log("custDetail=>", this.custumer);
+      }, err => {
+        // console.log("errlog");
+         this.Load = false;
+        this.custumer=[];
+        this.firstcall = true;
+        this.lastcall = false;
+      });
+  }
+
+
+  edit_costumerDetail(cust_payload) {
+    // console.log("edit component method!!!");
+    console.log("cust_payload",cust_payload);
+    cust_payload.ID = 'edit';
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '700px',
+      // height: '600px',
+      data: { dealer_payload: cust_payload }
+    });
+
+
+    dialogRef.afterClosed().subscribe(result => {
+
+      // console.log(result);
+      if (result == "success") {
+        this.ngOnInit();
+      }
+    });
+  }
+
+  delete_costumerDetail(cust_payload){
+
+    var  that =this;
+    console.log(cust_payload);
+    cust_payload.ID = 'delete';
+    cust_payload['page'] = 'cust';
+
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '500px',
+      height: '600px',
+      data: { dealer_payload: cust_payload }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+      // console.log(result);
+      if (result == "yes") {
+        // console.log("DealerId=>",dealerDelete.dealer_id)
+        var deletePayload = {
+          'userId' : cust_payload._id,
+          'deleteuser' : true
+        }
+
+        console.log(deletePayload);
+        this.contactService.deleteCostumer(deletePayload)
+          .subscribe(res=>{
+            console.log(res);
+            this.serviceResponse = "User Deleted"; 
+            this.errorMsg =true;
+            this.ngOnInit();
+           var success =  setTimeout(function(){
+             clearInterval(success);
+              that.errorMsg = false; 
+           },5000)
+            
+          },err=>{
+            this.serviceResponse = "Please try after sometime";
+            var error =  setTimeout(function(){
+              clearInterval(error);
+               that.errorMsg = false; 
+            },5000)
+          })
+
+      }
+
+      if (result == "no") {
+        console.log(result);
+      }
+
+    });
+
+
+
+  }
+
+  skip: number = 1;
+  limit: number = 10;
+  firstcall: boolean = false;
+  lastcall: boolean = true;
+  next() {
+    this.lastcall = false;
+    this.skip += 1;
+    this.ngOnInit();
+    // this.sidebarData();
+  }
+  pre() {
+    // console.log(this.skip)
+    if (this.skip > 1) {
+      this.skip -= 1;
+      this.lastcall = false;
+      this.firstcall = false;
+      this.ngOnInit();
+      // this.sidebarData();
+    } else {
+      this.lastcall = true;
+      this.firstcall = false;
+    }
+
+  }
+
+  searchFilter(text: string) {
+    this.modelChanged.next(text);
+    // this.myInput;
+    // console.log(this.myInput);
+    // this.sidebarData()
+
+  }
+
+  viewDocuments(docs){
+    console.log("Documents=>", docs);
+    var  that =this;
+    docs.ID = 'viewDoc';
+    console.log(docs);
+    let dialogRef = this.dialog.open(EditCostumerComponent, {
+      width: '900px', 
+      data: { dealer_payload: docs }
+    });
+
+    
+    dialogRef.afterClosed().subscribe(result => {
+      if (result == "yes") {
+        this.getCustomer()
+      }
+
+      if (result == "no") {
+     
+      }
+      if(result == 'imageupdated'){
+        swal(
+          'Updated',
+          'Documents has been Updated.',
+          'success'
+        ) 
+          this.ngOnInit();
+      }
+    });
+  }
+
+  reportSetting(custObj){
+    console.log("custObj=>" , custObj);
+   var custId = custObj._id;
+    let dialogRef = this.dialog.open(ReportSettingComponent, {
+      width: '800px',
+      data : custId
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "updated") {
+        this.tost1("reportPref");
+        this.ngOnInit();
+
+      }
+    });
+
+  }
+
+
+  
+  showMenu = environment.showLandingpageMenu;
+  showDemoVideo(){
+    let split1 = document.URL.split('//')[1];
+    console.log(split1,document);
+    let split2 = split1.split('/')[0];
+    let splitForStyle = split1.split('/')[1];
+    this.url =  split2;
+    console.log("split2",this.url);
+   
+    
+      for(var i = 0; i <this.showMenu.length;i++){
+        if (this.url == 'www.oneqlik.in') {
+          this.showNav = true;
+            return;
+        } else {
+          this.showNav = false;
+        }
+      }
+  
+  }
+
+  shareUserCredential(costDetails){
+    console.log('costDetails',costDetails);
+    var cost_id = costDetails._id;
+    this.contactService.shareCostumerInfo(cost_id).subscribe(res=>{
+      console.log(res);
+      let message =res.message;
+      let action
+      this.snackBar.open(message, action, {
+        duration: 4000,
+      });
+   
+    },err=>{
+      console.log(err);
+    })
+
+    
+  }
+
+  resetPassword(cust_array){
+    console.log("Inside reset",cust_array);
+    let dialogRef = this.dialog.open(ResetPasswordComponent, {
+      width: '400px',
+      data : cust_array
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "succ") {
+        this.tost1("password_changed");
+        this.ngOnInit();
+      }
+
+      if (result == "close") {
+        // this.tost1("succ");
+        // this.ngOnInit();
+      }
+    });
+    
+  }
+
+
+  custom_table(cust_arr){
+    console.log(cust_arr);
+    let dialogRef = this.dialog.open(DashboardContentComponent, {
+      width: '500px',
+      data : cust_arr
+    //  height: '600px', 
+
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      // console.log(result);
+      if (result == "updated") {
+        this.tost1("Table Content Customised");
+        this.ngOnInit();
+      }
+
+      if (result == "close") {
+      
+      }
+    });
+
+  }
+
+
+  addPoints(data){
+    let dialogRef = this.dialog.open(PointShareComponent, {
+      width: '300px',     
+      data: {"userInfo":data}                      
+    });
+
+    dialogRef.afterClosed().subscribe(result => {   
+      // console.log(result);
+      if(result == 'added'){
+
+        this.data_descip =  "Point Added";
+        this.ngOnInit();
+        launch_toast();   
+
+      }
+       
+         function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }  
+    })  
+  }
+
+  
+  custPhone(dlr){
+  var dphn = '';
+  if(dlr.std_code != undefined){
+     dphn = '+' + dlr.std_code.dialcode + ' ' + dlr.phone ; 
+     return dphn ; 
+  }else{
+     dphn = dlr.phone ; 
+    return dphn ; 
+  }
+}
+
+accountStatus:boolean = true;
+accountStatusOnChange(custObj, event){
+
+
+    console.log(custObj,event.checked);
+    var payload = {
+      accountSuspended : event.checked,
+      acoountId : custObj._id  ,
+      suspendedBy : 'distributer' 
+    }
+      var that = this;
+    swal("Are you sure ?", "Do you want to change account status ?").then((ans)=>{
+      console.log(ans);
+      that.contactService.accountSuspend(payload).subscribe(res=>{
+        console.log(res);
+        that.getCustomer();
+        that.data_descip =  "Account Status Changed";
+        launch_toast();
+        function launch_toast() {
+          // console.log(divid);
+           var x = document.getElementById("toast")
+           //console.log(x);
+           x.className = "show";
+           setTimeout(function(){ x.className = x.className.replace("show", ""); }, 4500);
+       }    
+      })
+     
+    },err=>{
+      that.getCustomer();
+      console.log(err);
+    });
+  
+}
+
+
+allUserFunction(ev){
+  console.log('event=>',ev);
+  this.allUser = ev.checked ;
+   
+    this.skip = 1;
+    this.getCustomer(); 
+}
+
+adm_alert:boolean=false;
+alertStatus(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    adminAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    this.tost1('alertset');
+  })
+
+}
+
+dealerAlert(ev,cobj){
+ 
+  var aAlert= ev.checked;
+ 
+  var pld= {
+    uid : cobj._id,
+    dealerAlert : aAlert
+  }
+  console.log(pld);
+  this.contactService.setlanguage(pld).subscribe(res=>{
+    console.log(res);
+    this.tost1('alertset');
+  })
+
+}
+changeKYC(data,event){
+  console.log(event);
+  var req={
+    user:data._id,
+    status:event
+  }
+  this.contactService.changeKycStatus(req).subscribe(res=>{
+    console.log(res);
+     this.tost1('kyc');
+  })
+  
+}
+
+
+
+}
diff --git a/src/app/temp.ts b/src/app/temp.ts
new file mode 100644
index 0000000..ed7c725
--- /dev/null
+++ b/src/app/temp.ts
@@ -0,0 +1,15 @@
+export class Temp{
+    _id?: string;
+    message: String;
+    deviceID : String;
+    packet : {
+        cmd : String;
+        retain : Boolean;
+        qos : Number;
+        dup : Boolean;
+        length : Number;
+        topic : String;
+       // payload : { "$binary" : "MTguNjAxMjE1LDczLjc3Nzc2Mg==", "$type" : "00" }
+    };
+    when : Date
+}
\ No newline at end of file
diff --git a/src/app/token.ts b/src/app/token.ts
new file mode 100644
index 0000000..00e2af1
--- /dev/null
+++ b/src/app/token.ts
@@ -0,0 +1,5 @@
+export class Token{
+    _id?: string;
+  did: string;
+  tkn: string;
+}
\ No newline at end of file
diff --git a/src/app/toll/toll.component.html b/src/app/toll/toll.component.html
new file mode 100644
index 0000000..ff8b967
--- /dev/null
+++ b/src/app/toll/toll.component.html
@@ -0,0 +1,204 @@
+<app-all-menus></app-all-menus>
+
+<div class="topDiv">
+
+<div class="row" style="margin:0px">
+  <div class="col-12">
+    <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+  </div>
+</div>
+
+<div class="accordion" id="accordionExample">
+  <div class="card">
+    <div class="card-header" id="headingOne">
+      <h2 class="mb-0">
+        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseZero"
+          aria-expanded="true" aria-controls="collapseZero">
+          Toll List
+        </button>
+        <button class="btn btn-primary btn-sm float-sm-right ml-2" type="button" data-toggle="collapse" data-target="#collapseTwo"
+            aria-expanded="true" aria-controls="collapseTwo">Add Multiple Tolls</button>
+        <button class="btn btn-primary btn-sm float-sm-right "  data-toggle="collapse" data-target="#collapseOne"
+            aria-expanded="false" aria-controls="collapseOne" (click)="AddButton()">Add Toll</button>
+      </h2>
+
+
+    </div>
+
+    <div id="collapseZero" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+    <div class=col-sm-12>
+      <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+        <thead>
+          <tr>
+            <th>{{'Toll Name' | translate}}</th>
+            <th>{{'Toll Tax' | translate}}</th>
+            <th>{{'Latitude' | translate}}</th>
+            <th>{{'Longitude' | translate}}</th>
+            <th>{{'Address' | translate}}</th>
+            <th>{{'Status' | translate}}</th>
+            <th>Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let failedDevices of tollList">
+            <td style="cursor:pointer">{{failedDevices.tollName}}</td>
+            <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
+            <td style="cursor:pointer">{{failedDevices.location.coordinates[0]}}</td>
+            <td style="cursor:pointer">{{failedDevices.location.coordinates[1]}}</td>
+            <td style="cursor:pointer">{{failedDevices.address}}</td>
+            <td style="cursor:pointer">{{failedDevices.status}}</td>
+            <td style="cursor:pointer">
+              <button class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#collapseOne"
+            aria-expanded="true" aria-controls="collapseOne" (click)="edit(failedDevices)"><i class="fa fa-edit"></i></button>
+              <button class="btn btn-danger btn-sm" (click)="deleteToll(failedDevices)"><i class="fa fa-trash"></i></button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+      </div>
+
+
+  <div class="accordion" id="accordionExample">
+    <div class="card">
+      <!-- <div class="card-header" id="headingOne">
+        <h2 class="mb-0">
+          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+            aria-expanded="true" aria-controls="collapseOne">
+            Add Toll
+          </button>
+        </h2>
+      </div> -->
+  
+      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
+        <div class="card-body">
+        <form [formGroup]="tollForm" (ngSubmit)="submit()">
+          <div class="row" style="padding: 10px;">
+            <div class="col">
+              <label>Toll Name</label>
+              <input type="text" formControlName="tollName" class="form-control" placeholder="Toll Name">
+              <span class="text-danger" *ngIf="isControlHasError('tollName','required')">
+                <strong>Toll Name Require</strong>
+              </span>
+            </div>
+            <div class="col">
+              <label>Toll Tax</label>
+              <input type="number" formControlName="tollTax" class="form-control" placeholder="Toll Tax">
+              <span class="text-danger" *ngIf="isControlHasError('tollTax','required')">
+                <strong>Toll Tax Require</strong>
+              </span>
+            </div>
+          </div>
+          <div class="row" style="padding: 10px;">
+            <div class="col">
+              <label>Latitude</label>
+              <input type="number" formControlName="latitude" class="form-control" placeholder="Latitute">
+              <span class="text-danger" *ngIf="isControlHasError('latitude','required')">
+                <strong>Latitude Require</strong>
+              </span>
+            </div>
+            <div class="col">
+              <label>Longitude</label>
+              <input type="number" formControlName="longitude" class="form-control" placeholder="Longitude">
+              <span class="text-danger" *ngIf="isControlHasError('longitude','required')">
+                <strong>Longitude Require</strong>
+              </span>
+            </div>
+          </div>
+          <div class="row" style="padding: 10px;">
+            <div class="col">
+              <label>Address</label>
+              <input type="type" formControlName="address" class="form-control" placeholder="Address">
+              <span class="text-danger" *ngIf="isControlHasError('address','required')">
+                <strong>address Require</strong>
+              </span>
+            </div>
+            <div class="col">
+              <label>Status</label>
+              <input type="type" formControlName="status" class="form-control" placeholder="Status">
+              <span class="text-danger" *ngIf="isControlHasError('status','required')">
+                <strong>Status Require</strong>
+              </span>
+            </div>
+          </div>
+          <div class="text-center mt-4">
+            <button *ngIf="!buttonStatus" type="submit" class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero"
+            aria-expanded="true" aria-controls="collapseZero">Submit</button>
+
+            <button *ngIf="buttonStatus" type="submit" class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero" aria-expanded="true"
+              aria-controls="collapseZero">Update</button>
+
+          </div>
+        </form>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <!-- <div class="card-header" id="headingTwo">
+        <h2 class="mb-0">
+          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
+            aria-expanded="false" aria-controls="collapseTwo">
+           Add Multiple Tolls
+          </button>
+        </h2>
+      </div> -->
+      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+        <div class="card-body">
+
+          <div class="row" style="margin-top: 10px;margin-bottom: 10px;">
+            <div class="col-sm-12" style="text-align: left;font-size: initial;">
+              <!-- <label >Choose an Excel File:</label>
+                    <input  style="margin-left: 30px;" type="file" id="excelFile"  multiple size="50"> -->
+              <div class="col-sm-offset-2 col-sm-10" style="text-align: center;">
+                <label style="background: MD_DIALOG_DATA;box-shadow: 2px 2px #a0a3a5;" class="file-upload btn btn-primary">Browse
+                  for Excel file ... <input type="file" id="excelFile" multiple size="50" />
+                </label>
+                <button type="button" style="margin-top: 0px; margin-left: 15px;; width: 90px; box-shadow: 2px 2px #b1adad"
+                  class="btn btn-primary" data-toggle="collapse" data-target="#collapseZero"
+            aria-expanded="true" aria-controls="collapseZero" (click)="uploadExcel()" >Upload</button>
+            <!-- (click)="uploadExcel()" -->
+                <!-- <a type="button" download href="https://www.oneqlik.in/BulkDeviceAdd.ods"
+                  style="cursor:pointer; background: #40b516; margin-top: 0px; margin-left: 10px; border-color: #b5b4b4; box-shadow: 2px 2px #b1adad;"
+                  class="btn btn-primary">Download Excel</a> -->
+              </div>
+            </div>
+          </div>
+          <div class="row" *ngIf="showErrorupload_1">
+            <div class=col-sm-12>
+              <table class="table table-striped table-hover " style="overflow-y: hidden; overflow-x: hidden;font-size:12px">
+                <thead>
+                  <tr>
+                    <th>{{'Toll Name' | translate}}</th>
+                    <th>{{'Toll Tax' | translate}}</th>
+                    <th>{{'Latitude' | translate}}</th>
+                    <th>{{'Longitude' | translate}}</th>
+                    <th>{{'Address' | translate}}</th>
+                    <th>{{'Status' | translate}}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let failedDevices of faileduploadDevices">
+                    <td style="cursor:pointer">{{failedDevices.tollName}}</td>
+                    <td style="cursor:pointer">{{failedDevices.tollTax}}</td>
+                    <td style="cursor:pointer">{{failedDevices.lat}}</td>
+                    <td style="cursor:pointer">{{failedDevices.long}}</td>
+                    <td style="cursor:pointer">{{failedDevices.address}}</td>
+                    <td style="cursor:pointer">{{failedDevices.status}}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+         
+        </div>
+      </div>
+    </div>
+   
+  </div>
+
+
+
+
+
+</div>
\ No newline at end of file
diff --git a/src/app/toll/toll.component.scss b/src/app/toll/toll.component.scss
new file mode 100644
index 0000000..e107ef9
--- /dev/null
+++ b/src/app/toll/toll.component.scss
@@ -0,0 +1,5 @@
+.topDiv {
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
diff --git a/src/app/toll/toll.component.spec.ts b/src/app/toll/toll.component.spec.ts
new file mode 100644
index 0000000..f0d53df
--- /dev/null
+++ b/src/app/toll/toll.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TollComponent } from './toll.component';
+
+describe('TollComponent', () => {
+  let component: TollComponent;
+  let fixture: ComponentFixture<TollComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TollComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TollComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/toll/toll.component.ts b/src/app/toll/toll.component.ts
new file mode 100644
index 0000000..d8622fc
--- /dev/null
+++ b/src/app/toll/toll.component.ts
@@ -0,0 +1,270 @@
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FlashMessagesService } from 'angular2-flash-messages';
+import { ContactService } from '../contact.service';
+declare var XLSX:any;
+
+@Component({
+  selector: 'app-toll',
+  templateUrl: './toll.component.html',
+  styleUrls: ['./toll.component.scss']
+})
+export class TollComponent implements OnInit {
+  uploadJSON: any;
+  tollList;
+  failedFiles=[]
+  failedUploadFiles:any;
+  showErrorupload: boolean;
+  faileduploadDevices: any;
+  showErrorupload_1: boolean =false;
+  Load: boolean;
+  tollForm:FormGroup
+  data_descip: string;
+  buttonStatus=false
+  id
+  constructor(private contactService:ContactService,private fb:FormBuilder,private _flashMessagesService: FlashMessagesService) { }
+
+  ngOnInit() {
+    this.getTollsList()
+    this.tollForm=this.fb.group({
+      tollName:['',Validators.required],
+        latitude:['',Validators.required],
+        longitude:['',Validators.required],
+        tollTax:['',Validators.required],
+        status:['',Validators.required],
+        address:['',Validators.required],
+    })
+     let that = this;
+     $("#excelFile").change(function(e){
+      let _e:any = e;
+      that.failedFiles=[]
+      console.log("Inside function");
+        var reader = new FileReader();
+        console.log(reader);
+        reader.onload = function(e) {
+         
+          let _E:any = e;
+          var data = _E.target.result;
+       
+        
+        let workbook = XLSX.read(data, {type: 'binary' });
+      
+         let first_sheet_name = workbook.SheetNames[0];
+      
+       let worksheet = workbook.Sheets[first_sheet_name];
+       let d:any = XLSX.utils.sheet_to_json(worksheet,{raw:true});
+         
+       that.uploadJSON=d.map(function(d){  
+
+         if((isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90)&&(isFinite(d.long) && Math.abs(d.long) <= 180)){
+            console.log(d.lat);
+            return d;
+          }else{
+            if(!(that.failedFiles.includes(d))){
+                that.failedFiles.push(d)
+              }
+          }
+          
+          // else{
+          //   // if(that.uploadJSON[i]){
+          //     if(!(that.failedFiles.includes(d))){
+          //       that.failedFiles.push(d)
+          //     }
+          //     // that.uploadJSON.splice(i,1)
+          //   // }
+          // }
+
+          // if(isFinite(d.long) && Math.abs(d.long) <= 180){
+          //    console.log(d.long);
+          // }else{
+          //   // if(that.uploadJSON[i]){
+          //     if(!(that.failedFiles.includes(d))){
+          //       that.failedFiles.push(d)
+          //     }
+
+        
+
+        // return d;
+        });
+        console.log("file=>",that.uploadJSON);
+
+//         for(var i=0;i<that.uploadJSON.length;i++){
+//           // const isLatitude = num => isFinite(num) && Math.abs(num) <= 90;
+//           if(isFinite(Number(d.lat)) && Math.abs(Number(d.lat)) <= 90){
+//             console.log(d.lat);
+            
+//           }else{
+//             // if(that.uploadJSON[i]){
+//               if(!(that.failedFiles.includes(d))){
+//                 that.failedFiles.push(d)
+//               }
+//               // that.uploadJSON.splice(i,1)
+//             // }
+//           }
+
+//           if(isFinite(d.long) && Math.abs(d.long) <= 180){
+//              console.log(d.long);
+//           }else{
+//             // if(that.uploadJSON[i]){
+//               if(!(that.failedFiles.includes(d))){
+//                 that.failedFiles.push(d)
+//               }
+//               // that.uploadJSON.splice(i,1)
+//             // }
+//           }
+//           // const isLatitude =that.uploadJSON[i].lat => isFinite(Number(that.uploadJSON[i].lat)) && Math.abs(Number(that.uploadJSON[i].lat)) <= 90;
+// // Longitude must a number between -180 and 180
+// // const isLongitude = that.uploadJSON[i].long => isFinite(that.uploadJSON[i].long) && Math.abs(that.uploadJSON[i].long) <= 180;
+//         }
+        console.log("Failed",that.failedFiles);
+        
+        that.faileduploadDevices=that.uploadJSON;
+        that.showErrorupload_1=true
+        };
+           reader.readAsBinaryString(_e.target.files[0]); 
+      
+      });
+  }
+
+  isControlHasError(controlName: string, validationType: string): boolean {
+		const control = this.tollForm.controls[controlName];
+		if (!control) {
+			return false;
+		}
+
+		const result =
+			control.hasError(validationType) &&
+			(control.dirty || control.touched);
+		return result;
+	}
+
+  uploadExcel(){
+    this.failedUploadFiles = [];
+    for(var i=0;i<this.uploadJSON.length;i++){
+      
+      var location={
+        type:"Point",
+        coordinates:[this.uploadJSON[i].long,this.uploadJSON[i].lat]
+      }
+      this.uploadJSON[i].location=location;
+      this.uploadJSON[i].tollTax=Number(this.uploadJSON[i].tollTax)
+      // this.uploadJSON[i].location.coordinates.push(Number(locations[0]))
+      // this.uploadJSON[i].location.coordinates.push(Number(locations[1]))
+    }
+    // this.Load =true;
+    console.log("Device Json Payload",this.uploadJSON);
+    var data={
+      data:this.uploadJSON
+    }
+    this.contactService.addMultipleTolls(data).subscribe(res=>{
+      console.log(res);
+      this.getTollsList()
+      this.tost1('')
+    })
+  
+ }
+submit(){
+  const controls = this.tollForm.controls;
+		/** check form */
+		if (this.tollForm.invalid) {
+			Object.keys(controls).forEach(controlName =>
+				controls[controlName].markAsTouched()
+			);
+			return;
+		}
+  console.log(this.tollForm.value);
+
+  var data={
+    tollName:this.tollForm.value.tollName,
+        location:{
+         type:"Point",
+        coordinates:[this.tollForm.value.latitude,this.tollForm.value.longitude]
+        },
+        tollTax:this.tollForm.value.tollTax,
+        status:this.tollForm.value.status,
+        address:this.tollForm.value.address,
+  }
+  if(this.buttonStatus){
+    data['id']=this.id;
+    console.log(data);
+    this.contactService.updateToll(data).subscribe(res=>{
+      console.log(res);
+      this.tollForm.reset();
+      this.tost1('update');
+      this.getTollsList()
+    })
+
+  }else{
+    console.log(data);
+    this.contactService.addToll(data).subscribe(res=>{
+      console.log(res);
+      this.tollForm.reset();
+      this.tost1('single');
+      this.getTollsList()
+      
+    })
+
+  }
+  
+  
+}
+
+getTollsList(){
+  this.contactService.getTolls().subscribe(res=>{
+    console.log(res);
+    this.tollList=res
+  })
+
+}
+
+ tost1(divid){
+  if(divid == "single"){
+     this.data_descip = "Toll Added Successfully"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }else if(divid=="delete"){
+      this.data_descip = "Record Deleted Successfully"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }
+   else if(divid=="update"){
+      this.data_descip = "Record Updated Successfully"
+     this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }
+  
+   else{
+    this.data_descip =  "Tolls Added Successfully"
+    this._flashMessagesService.show(this.data_descip, { cssClass: 'alert-success', timeout: 3000 });
+   }
+  //    function launch_toast() {
+  //     // console.log(divid);
+  //      var x = document.getElementById("toast")
+  //      //console.log(x);
+  //      x.className = "show";
+  //      setTimeout(function(){ x.className = x.className.replace("show", ""); }, 450000);
+  //  }
+    }
+
+    deleteToll(data){
+      this.contactService.deleteToll({id:data._id}).subscribe(res=>{
+        this.getTollsList();
+        this.tost1("delete")
+      })
+
+    }
+    edit(data){
+      this.id=data._id
+      this.tollForm.patchValue({
+         tollName:data.tollName,
+        latitude:data.location.coordinates[0],
+        longitude:data.location.coordinates[1],
+        tollTax:data.tollTax,
+        status:data.status,
+        address:data.address,
+      })
+      this.buttonStatus=true
+    }
+
+    AddButton(){
+      this.buttonStatus=false;
+      this.tollForm.reset()
+    }
+}
diff --git a/src/app/trip-history/trip-history.component.html b/src/app/trip-history/trip-history.component.html
new file mode 100644
index 0000000..ca975cc
--- /dev/null
+++ b/src/app/trip-history/trip-history.component.html
@@ -0,0 +1,79 @@
+<!-- <flash-messages style="float: center;"></flash-messages>
+<div style="height: 535px;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <div>
+        <h4 style="text-align:center">{{'TRIP HISTORY' | translate}}</h4>
+      </div>
+      <button style="background-color: #427942;border: white;float:right;" class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>       
+      <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+          <tr>
+      <th>{{'Event name' | translate}}</th>
+      <th>{{'Event time' | translate}}</th>
+      <th>{{'Location' | translate}}</th>
+      <th>{{'Vehicle name' | translate}}</th>
+      <th>{{'Driver' | translate}}</th>
+      </thead>
+      <tbody>
+      <tr *ngFor="let history of populateHistory">
+      <td style="cursor:pointer">{{history.item.sentence}}</td>
+      <td style="cursor:pointer">{{history.timestamp|date:'short'}}</td>
+      <td style="cursor:pointer">{{history.address}}</td>
+      <td style="cursor:pointer">{{history.vehicleName}}</td>
+      <td style="cursor:pointer">{{history.driver?history.trip.driver.name:'NA'}}</td>
+      </tr>
+      </tbody>
+      </table>  
+</div>
+  -->
+
+<div class="container">
+    <div id="map" style="width:100%;height: 100%;"></div>
+    <div class="row" *ngFor="let historyArr of tempMapHistory ; let i = index"
+        style="position: absolute; top: 10px;background: white; border-radius: 2px;padding: 3px 20px;left: 215px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+        <div class="col-12">
+            <div style="display: flex;">
+                <div>
+                    <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='init'" (click)="play(i)"
+                        mdTooltip="{{'Play History' | translate}}"
+                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                    <i class="far fa-play-circle" *ngIf="tempMapHistory[i].flag=='start'" (click)="play(i)"
+                        mdTooltip="{{'Play History' | translate}}"
+                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                    <i class="far fa-pause-circle" *ngIf="tempMapHistory[i].flag=='stop'" (click)="play(i)"
+                        mdTooltip="{{'Pause' | translate}}"
+                        style="width: 34px;height: 34px;font-size: 34px;color: #1eacb2;"></i>
+                </div>
+                <input type="range" min="0" max={{seekBarValue}} [(ngModel)]="sliderValue" class="slider" id="slider1"
+                    style="width: 200px;margin-left: 20px;margin-right: 20px; box-shadow: 0px 0px 6px 5px lightg"
+                    (change)="zoomSet()">
+                <!-- <div class="kWgQNm" id="myDIV">
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa dfmgGo active" (click)="changeSpeed(1)">1x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(2)">2x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#1EACB2" class="sc-bdVaJa jXaklS" (click)="changeSpeed(5)">5x</div>
+              <div width="30px" cursor="pointer" font-size="14px" color="#FFFFFF" class="sc-bdVaJa bvKoMW" (click)="changeSpeed(10)">10x</div>
+            </div> -->
+            </div>
+        </div>
+    </div>
+    <!-- <div class="row"
+        style="padding:0;position: absolute;top: 432px;background: white;border-radius: 2px;padding: 10px 0px;width: 62%;left: 40px;box-shadow: rgba(0, 0, 0, 0.16) 4px 2px 10px;">
+        <div class="col-3">
+            <p style="font-weight: 700;text-align: center;margin: 0;">Distance</p>
+            <p style="text-align: center;margin: 0;">{{tdistance}}</p>
+        </div>
+        <div class="col-5">
+            <p style="font-weight: 700;text-align: center;margin: 0;">Cumulative Distance (Kms.)</p>
+            <p style="text-align: center;margin: 0;">{{cummulative_Distance}}</p>
+        </div>
+        <div class="col-4">
+            <p style="font-weight: 700;text-align: center;margin: 0;">Speed (Kmph)</p>
+            <p style="text-align: center;margin: 0;">{{speeed2}}</p>
+        </div>
+        <div class="col-2">
+          <p style="font-weight: 700;text-align: center;margin: 0;">Time</p>
+          <p style="text-align: center;margin: 0;">{{triptime|date:'medium'}}</p>
+        </div>
+    </div> -->
+</div>
\ No newline at end of file
diff --git a/src/app/trip-history/trip-history.component.scss b/src/app/trip-history/trip-history.component.scss
new file mode 100644
index 0000000..7b121a1
--- /dev/null
+++ b/src/app/trip-history/trip-history.component.scss
@@ -0,0 +1,62 @@
+.container {
+  width: 900px;
+  height: 500px;
+  position: relative;
+}
+
+#slider {
+  margin: 20px;
+}
+
+.kWgQNm {
+  box-sizing: border-box;
+  display: flex;
+  -webkit-box-pack: start;
+  justify-content: flex-start;
+  align-content: center;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  max-width: unset;
+  min-width: unset;
+  min-height: unset;
+  cursor: unset;
+  transform: unset;
+  word-break: unset;
+  z-index: unset;
+  padding: 0px;
+  margin: 0px;
+  overflow: unset;
+  background: unset;
+  border-right: unset;
+  border-bottom: unset;
+  flex: 0 0 auto;
+  border-radius: unset;
+  transition: initial;
+}
+
+.kWgQNm {
+  //   .active,  .dfmgGo:hover{
+  //         background-color: rgb(30, 172, 178);
+  //         border-right: 1px solid rgb(30, 172, 178);
+  //         border-top: 1px solid rgb(30, 172, 178);
+  //         border-bottom: 1px solid rgb(30, 172, 178);
+  //         color:white;
+  //     }
+
+  .active,
+  .sc-bdVaJa:hover {
+    background-color: rgb(30, 172, 178);
+    color: white;
+    border-bottom: 1px solid rgb(30, 172, 178);
+  }
+
+  // .active, .bvKoMW:hover{
+  //     background-color: rgb(30, 172, 178);
+  //     border-right: 1px solid rgb(30, 172, 178);
+  //     border-top: 1px solid rgb(30, 172, 178);
+  //     border-bottom: 1px solid rgb(30, 172, 178);
+  //     color:white;
+  // }
+}
diff --git a/src/app/trip-history/trip-history.component.spec.ts b/src/app/trip-history/trip-history.component.spec.ts
new file mode 100644
index 0000000..e9f024f
--- /dev/null
+++ b/src/app/trip-history/trip-history.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TripHistoryComponent } from './trip-history.component';
+
+describe('TripHistoryComponent', () => {
+  let component: TripHistoryComponent;
+  let fixture: ComponentFixture<TripHistoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TripHistoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TripHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/trip-history/trip-history.component.ts b/src/app/trip-history/trip-history.component.ts
new file mode 100644
index 0000000..1143b1f
--- /dev/null
+++ b/src/app/trip-history/trip-history.component.ts
@@ -0,0 +1,1074 @@
+import { Component, OnInit, Inject, ElementRef } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialog, MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+declare var google :any;
+declare var moment:any;
+
+@Component({
+  selector: 'app-trip-history',
+  templateUrl: './trip-history.component.html',
+  styleUrls: ['./trip-history.component.scss']
+})
+export class TripHistoryComponent implements OnInit {
+
+
+  
+  
+  latlongObjArr: any;
+  path: any;
+  datee: any;
+  dataArrayCoords: any=[];
+  latLngLine: any=[];
+  lat: any;
+  lng: any;
+  marker4: any;
+  tempMapHistory=[];
+  seekBarValue: any=200;
+  sliderValue: number=0;
+  start:any;
+  flag: string;
+  cummulative_Distance: number;
+  ext_voltage: string;
+  historyDate: any;
+  indexValue: number;
+  tdistance: any;
+  triptime: any;
+  constructor(public elementRef: ElementRef,public dialogRef: MdDialogRef<TripHistoryComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { }
+  gMap:any;
+//   Allow_Reverse: false
+// Device_Id: "2049080054708"
+// Device_Name: "siwitest"
+// Planned_End_Time: "2021-09-09T08:17:00.132Z"
+// Planned_Start_Time: "2021-09-08T08:17:00.132Z"
+// Radius: 200
+// Status: "ASSIGNED"
+// deviceObjId: "612f33fa9e94de2c84f8278a"
+// lrNumber: "4334"
+// routeId: "613872f88d5eb72b9ce5bf58"
+// total_odo: 0
+// tripType: 1
+  ngOnInit() {
+    console.log('this.data.distance',this.data);
+    this.tdistance = (this.data.distance/1000).toFixed(2)   + ' Kms.';
+  console.log(this.data);
+  var that= this;
+    let map;
+     if (navigator.geolocation) {  
+       if(location.protocol != 'https:'){
+         this.contactService.getlatLong().subscribe(res=>{
+           console.log(res);
+           var position = {
+             coords: { 
+               latitude: res.lat,
+               longitude: res.lon
+             }
+           };
+           this.gMap = new google.maps.Map(document.getElementById('map'), {
+             center: {
+                 lat: position.coords.latitude,
+                 lng: position.coords.longitude
+             },
+           
+             zoom: 18,
+             mapTypeId: 'terrain'
+         }); 
+         this.plotPolyline();  
+         if(that.data.geofences!=undefined){
+             that.plotGeofence(that.data.geofences[0]._id);
+             that.plotGeofence2(that.data.geofences[1]._id);
+        }             
+         })
+        }else{
+         navigator.geolocation.getCurrentPosition(function(position) {     
+          that.gMap = new google.maps.Map(document.getElementById('map'), {
+               center: {
+                 lat: position.coords.latitude,
+                   lng: position.coords.longitude
+               },  
+               zoom: 18,
+               mapTypeId: 'terrain'
+           });  
+           that.plotPolyline();  
+           if(that.data.geofences!=undefined){
+            that.plotGeofence(that.data.geofences[0]._id);
+            that.plotGeofence2(that.data.geofences[1]._id);
+           }      
+          });
+       }    
+      }  
+    }
+
+    
+    plotPolyline(){
+      this.sliderValue=0;
+      var that = this;
+      this.contactService.getCurrentLocation(this.data.Device_Id, this.data.Planned_Start_Time, this.data.Planned_End_Time).subscribe((data3) => {
+        console.log(data3);
+          this.latlongObjArr = data3;
+          var flightPath = new google.maps.Polyline({
+            geodesic: true,
+            strokeColor: '#0000FF',
+            strokeOpacity: 1.0,
+            strokeWeight: 4,
+            icons: [{
+              icon: {
+                strokeColor: '#056608',
+                fillColor: '#056608',
+                strokeOpacity: 0.8,
+                strokeWeight: 4,
+                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
+              },
+              offset: '0',
+              repeat: '100px'
+            }         
+            ],   
+          });
+          
+          var playerSeekbar: any;
+          $( document ).ready(function() {
+            playerSeekbar = document.getElementById('slider1'); 
+            console.log( "ready!", playerSeekbar['value']);
+            playerSeekbar.oninput = function () { 
+             
+              zoomToObject(flightPath);
+              that.changeRange();
+               
+            }
+          });
+      
+          function zoomToObject(obj){
+          var bounds = new google.maps.LatLngBounds();
+          var points = obj.getPath().getArray();
+          for (var n = 0; n < points.length ; n++){
+              bounds.extend(points[n]);
+          }
+          that.gMap.fitBounds(bounds);
+      }
+          this.path = flightPath.getPath();
+          var cumulativeDistance =0 ; 
+       
+          for (let i = this.latlongObjArr.length - 1; i > 0; i--) {
+  
+            var d_name = this.data.Device_Name;
+            var speed = this.latlongObjArr[i].speed + "Km/hr";
+            var im = this.latlongObjArr[i].Device_Id;
+            
+            // var speedArr.push(this.latlongObjArr[i].speed);
+            // var heading = this.latlongObjArr[i].heading;
+            // this.time = gmtDateTime.local().format('h:mm:ss A');
+            this.datee = JSON.stringify(this.latlongObjArr[i].insertionTime);
+            // //console.log(JSON.parse(this.datee));
+            // var insTime = new Date(this.datee);
+            this.datee = moment(JSON.parse(this.datee)).format('MMMM Do YYYY, h:mm:ss a');
+            
+            
+            
+            var content = '';
+            content = '<div id="content"><div id="bodyContent"><div><br><b>DEVICE NAME : ' + d_name + '</b><br><b>IMEI : ' + im + '</b><br><b>DEVICE DATE : ' + this.datee + '</b><br><b>SPEED : ' + speed + '</b><br></div></b></div>'
+            '</div></div>'
+            
+            if(this.latlongObjArr[i].isPastData != true){
+              if(i === 0){
+                cumulativeDistance += 0 ;
+              }else{
+                cumulativeDistance += this.latlongObjArr[i].distanceFromPrevious?parseFloat(this.latlongObjArr[i].distanceFromPrevious):0 ; 
+              }       
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }else{
+              this.latlongObjArr[i]['cummulative_distance'] = (cumulativeDistance).toFixed(2) ;
+            }
+  
+            
+            var arr = [];
+            // //console.log(this.latlongObjArr[i].cummulative_distance);
+            
+            arr.push(this.latlongObjArr[i].lat);
+            arr.push(this.latlongObjArr[i].lng);
+            arr.push(this.latlongObjArr[i].speed);
+            arr.push(this.latlongObjArr[i].cummulative_distance);
+            arr.push(this.datee);
+            arr.push(this.latlongObjArr[i].external_Battery);
+            let cord = {
+              lat: this.latlongObjArr[i].lat,
+              lng: this.latlongObjArr[i].lng
+            }
+            this.dataArrayCoords.push(arr);
+            
+         
+            
+            this.latLngLine.push(cord);
+            var iconSrc = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000';
+            var iconDest = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
+            
+            // ======================added ========================================
+            // this.lat = this.latlongObjArr[i].lat;
+            // this.lng = this.latlongObjArr[i].lng;       
+            // this.path.push(new google.maps.LatLng(this.lat, this.lng));
+  
+            // =====================================added==============================
+  
+            if (this.latlongObjArr[i].interpolated == null || this.latlongObjArr[i].interpolated == undefined || this.latlongObjArr[i].interpolated.length == 0) {
+              this.lat = this.latlongObjArr[i].lat;
+              this.lng = this.latlongObjArr[i].lng;
+              this.path.push(new google.maps.LatLng(this.lat, this.lng));
+              
+  
+              // if (this.dataColor === true) {
+              //   var markersPast = new google.maps.Marker({
+                //     position: new google.maps.LatLng(this.lat, this.lng),
+                //     icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+              //     map: map,
+              //   })
+              
+              //   markersPast['infowindow'] = new google.maps.InfoWindow({ content: content });
+              
+              
+              //   google.maps.event.addListener(markersPast, 'click', function () {
+                
+                //     var lattitude = markersPast.position.lat();
+              //     var longitude = markersPast.position.lng()  ;
+              //     var latlng_1 =
+              //     {
+                //       "lat": lattitude,
+                //       "long":  longitude
+              //     }
+              //     outerThis.contactService.getAddressByApi(latlng_1).subscribe(res=>{  
+                
+                //    if(res.message == "Address not found in databse"){ 
+              //     var geocoder = new google.maps.Geocoder();
+              //     var latlng = new google.maps.LatLng(lattitude, longitude);
+              
+              //     var request = {
+                //       latLng: latlng
+              //     };
+              //     // //console.log('latlongVal', request)
+              //     var innerThis = this ; 
+              //     this['infowindow'].open(map, innerThis); 
+              //     geocoder.geocode(request, function (data, status) { 
+              //       if (status == google.maps.GeocoderStatus.OK) {
+                //         if (data[0] != null) {
+              //           // innerThis.contentAdd = data[0].formatted_address;
+              //           var tempAdd = data[0].formatted_address;
+              //             var getAddressContent = document.getElementById('addressBinding');
+              //             getAddressContent.innerHTML = 'Address :' + tempAdd ;
+                       
+              
+              //         } else {
+                //           // //console.log("No address available")
+              //           var tempAdd_1 = "No address available";
+              //           var getAddressContent = document.getElementById('addressBinding');
+              //           getAddressContent.innerHTML = 'Address :' +  tempAdd_1 ;
+              
+                     
+              
+              //         }
+              //       }
+              //       else {
+                //         var tempAdd_2 = 'NA';
+              //         var getAddressContent = document.getElementById('addressBinding');
+              //         getAddressContent.innerHTML = 'Address :' +  tempAdd_2 ;
+              //         //console.log('aaaaaaaaaaaaaa',getAddressContent);  
+                    
+              
+              //       }
+              
+              //     })
+              
+              //       }else{
+                //         var innerThis_1 = this ; 
+                
+                //         this['infowindow'].open(map, innerThis_1);      
+              //         var tempAdd  = res.address ; 
+              //         //console.log('innerThis_1.contentAdd',tempAdd);
+              //         var chkTmout = setTimeout(function(){
+              //           var getAddressContent = document.getElementById('addressBinding');
+              //           // //console.log('getAddressContent',getAddressContent);
+              //           getAddressContent.innerHTML = 'Address :' +   tempAdd  ;
+              //           clearTimeout(chkTmout);
+              //         },500)
+              
+              //       }
+              
+              //     })
+              
+              
+                  
+              //     })
+              //   // cluster_arr.push(markersPast);
+              
+              // }
+  
+  
+              var markerCurrent;
+              var markerSrc;
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconDest
+                });
+                // outerThis.marker4  = markerCurrent;
+                that.gMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(that.gMap);
+                zoomToObject(flightPath);
+              }
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconSrc
+                });
+  
+                that.marker4 = markerSrc;
+              }
+              
+              
+            }
+            else {
+  
+              for (let k = 0; k < this.latlongObjArr[i].interpolated.length; k++) {
+                if (this.latlongObjArr[i].interpolated[k].location.latitude == null || this.latlongObjArr[i].interpolated[k].location.longitude == null) {
+                  this.lat = this.latlongObjArr[i].lat;
+                  this.lng = this.latlongObjArr[i].lng;
+                } else {
+                  this.lat = this.latlongObjArr[i].interpolated[k].location.latitude;
+                  this.lng = this.latlongObjArr[i].interpolated[k].location.longitude;
+                }
+  
+                this.path.push(new google.maps.LatLng(this.lat, this.lng));
+                
+                
+                // if (this.dataColor) {
+                  //   var markersPast = new google.maps.Marker({
+                    //     position: new google.maps.LatLng(this.lat, this.lng),
+                //     icon: { path: google.maps.SymbolPath.CIRCLE, fillColor: fill_color, fillOpacity: 0.6, strokeColor: stroke_color, strokeOpacity: 0.9, strokeWeight: 5, scale: 2 },
+                //     map: map,
+                //   })
+                //   markersPast['infowindow'] = new google.maps.InfoWindow({ content: content }); 
+                //   google.maps.event.addListener(markersPast, 'click', function () { 
+                  //     //console.log("inside info window function 1");
+                //     this['infowindow'].open(map, this); });
+                
+  
+                // }
+              }
+              if (i == 1) {
+                markerCurrent = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconDest
+                });
+                
+                // outerThis.marker4 = markerCurrent;
+                that.gMap.setCenter(new google.maps.LatLng(this.lat, this.lng))
+                flightPath.setMap(that.gMap);
+                zoomToObject(flightPath);
+  
+              }
+              
+              if (i == (this.latlongObjArr.length - 1)) {
+                markerSrc = new google.maps.Marker({
+                  position: new google.maps.LatLng(this.lat, this.lng),
+                  map: that.gMap,
+                  icon: iconSrc
+                })
+                that.marker4 = markerSrc;
+              }
+            }
+          }
+          var tempData = {
+            fromTime:this.data.Planned_Start_Time,
+            toTime:  this.data.Planned_End_Time,
+            device_name: this.data.Device_Id,
+            device_obj: this.data.deviceObjId,
+            lineThickness: 4,
+            idleColor: 'red',
+            parkingColor: 'blue',
+            dataColor: 'green',
+            flag: 'init'
+          }
+          tempData['dataArrayCoords'] = this.dataArrayCoords;
+          this.seekBarValue = this.dataArrayCoords.length;
+          this.tempMapHistory.push(tempData);
+          console.log('this.tempMapHistory',this.tempMapHistory);
+        })
+     
+        
+      }
+
+      zoomSet(){
+        this.gMap.setZoom(15);
+  }
+  speed=200;
+  changeSpeed(t){
+    //console.log(t);
+    this.speed = t * 100;
+    var header = document.getElementById("myDIV");
+    var btns = header.getElementsByClassName("sc-bdVaJa");
+    for (var i = 0; i < btns.length; i++) {
+      btns[i].addEventListener("click", function() {
+      var current = document.getElementsByClassName("active");
+      current[0].className = current[0].className.replace(" active", "");
+      this.className += " active";
+      });
+    }
+  }
+  showStatus:boolean=false;
+  goToPoint: () => void;
+  moveMarker: () => void;
+  play(playindex) {
+    // //console.log('playindex',playindex);
+  
+    this.showStatus = true
+    
+    var icontype = this.data.iconType;
+    var tempObj = { "icontype": icontype }
+    var tempDataCoordArr = this.tempMapHistory[playindex].dataArrayCoords;
+    
+    tempObj["tempDataCoordArr"] = tempDataCoordArr;
+
+    if (this.tempMapHistory[playindex]['flag'] == 'init') {
+      this.animateMarker_history(this.marker4, tempDataCoordArr, 50, icontype);
+      tempObj["marker"] = this.marker4;
+      this.tempMapHistory[playindex]['flag'] = 'stop';
+      tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+ 
+    } else if (this.tempMapHistory[playindex]['flag'] == 'start') {
+      
+      this.moveMarker();
+      // clearTimeout(this.start);
+      this.tempMapHistory[playindex]['flag'] = 'stop';
+      tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+      
+    } else
+        if (this.tempMapHistory[playindex]['flag'] == 'stop') {
+          this.speed = 0;
+          clearTimeout(this.start);
+          this.tempMapHistory[playindex]['flag'] = 'start';
+          tempObj["flag"] = this.tempMapHistory[playindex]['flag'];
+        }
+
+    if (this.flag == 'reset') {
+      this.marker4.setPosition({ lat: this.latLngLine[0].lat, lng: this.latLngLine[0].lng });
+      this.flag = 'init';
+    }
+
+  }
+  speeed2: any = 0;
+  PlayData: boolean = false;
+  playingHistory: boolean = false;
+  rangeDetector:boolean=false;
+  animateMarker_history(marker, coords, km_h, iconType) {
+    this.cummulative_Distance = 0;
+    //console.log('coords=>',coords);
+    var ongoingMoveMarker = null;
+    // this.SpeedMeter2 = true;
+    // this.pauseDate = true;
+    this.PlayData = true;
+    // this.playingHistory = true;
+    this.gMap.setZoom(15);
+    if ((km_h == 0) || (km_h == '0')) {
+      km_h = 50;
+    }
+    var map, marker;
+    var coord = this.dataArrayCoords[0];
+    this.playingHistory = true;
+    
+    var lat = coord[0];
+    // //console.log(lat);
+    var lng = coord[1];
+    let outerThis = this
+    var startPos = [lat, lng];
+    this.speed = 200
+    var iconselected = this.data.iconType;
+    var delay = 100;
+    
+    
+    var carIcon = {
+      // path: car,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(60, 60),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+    
+    var bikeIcon = {
+      // path: bike,
+      url: '/assets/images/liveTrackIcons/rbike.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+    
+    var truckIcon = {
+      // path: truck,
+      url: '/assets/images/liveTrackIcons/rtruck.png',
+      scaledSize: new google.maps.Size(55, 85),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+    
+    var userIcon = {
+      // path: user,
+      url: '/assets/images/liveTrackIcons/rcar.png',
+      scaledSize: new google.maps.Size(30, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+    
+    var tractorIcon = {
+      url: '/assets/images/liveTrackIcons/rtractor.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    };
+
+    
+    var busIcon = {
+      // path: bus,
+      url: '/assets/images/liveTrackIcons/rbus.png',
+      scaledSize: new google.maps.Size(35, 50),
+      //size: new google.maps.Size(30, 100),
+      scale: .6,
+      strokeColor: 'white',
+      strokeWeight: .10,
+      fillOpacity: 1,
+      fillColor: 'blue',
+      //fillColor: '#b75656',
+      offset: '5%',
+      // rotation: parseInt(heading[i]),
+      anchor: new google.maps.Point(25, 25), // orig 10,50 back of car, 10,0 front of car, 10,25 center of car,
+      rotation: 0
+    }
+    
+    
+    var icons = {
+      "car": carIcon,
+      "bike": bikeIcon,
+      "truck": truckIcon,
+      "tractor": tractorIcon,
+      "bus": busIcon,
+      "user": userIcon
+    }
+    var that = this;
+
+    var contentString
+    
+    map = this.gMap;
+    
+    var target = 0;
+    // if(this.rangeDetector == true){
+    //   target = this.indexValue; 
+    // }
+    // this.rangeDetector=false;
+    var km_h = km_h || 50;
+    
+    
+    if (!startPos.length)
+    coords.push([startPos[0], startPos[1]]);
+    
+    that.goToPoint = function () {
+      // //console.log("Go to point function");
+      if(that.rangeDetector === true){
+        a= that.indexValue;
+        target   = that.indexValue;
+        that.sliderValue = that.indexValue;
+      }
+      var lat = marker.position.lat();
+      var lng = marker.position.lng();
+      // that.getAddress(lat,lng);
+      
+      if(km_h === 0){
+        km_h = 200 ;  
+      }
+      var step = (km_h * 1000 * delay) / 3600000; // in meters
+      var dest = new google.maps.LatLng(
+        coords[target][0], coords[target][1]);
+      //  //console.log(coords[target][2])
+      var r = coords[target][2];
+      
+      // outerThis.triptime = new Date(coords[target][4]);
+      // console.log(outerThis.triptime);
+      outerThis.speeed2 = r;
+      outerThis.ext_voltage = '22v';
+      
+      outerThis.historyDate = coords[target][4];
+      outerThis.ext_voltage = coords[target][5];
+      // //console.log("outerThis.historyDate",coords);
+
+      var distance = google.maps.geometry.spherical.computeDistanceBetween(dest, marker.position); // in meters
+      
+      var numStep = distance / step;
+      
+      var i = 0;
+      var deltaLat = (coords[target][0] - lat) / numStep;
+      var deltaLng = (coords[target][1] - lng) / numStep;
+      // //console.log('cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc',target);
+      that.moveMarker = function () {
+        // //console.log("Move Marker Function");
+        // //console.log('zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz',a,target);
+        // ye wala movemarker function h  
+        outerThis.sliderValue = a; 
+        outerThis.cummulative_Distance  = coords[target][3] ; 
+        lat += deltaLat;
+        lng += deltaLng;
+        i += step;
+        // //console.log('icons[iconselected].rotation',icons[iconselected].rotation);
+        let markerDOM: any;
+        var status = "RUNNING";
+        
+        if (i < distance) {
+          // let iconType = 'car';
+          // //console.log('iconsiconsiconsiconsiconsicons',icons);
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+          var msg;
+          // //console.log('iconType',iconType);
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+          // //console.log('markerDOM',markerDOM);
+          
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), new google.maps.LatLng(lat, lng));
+
+          
+          //console.log('head',head);
+        
+          // if (head != 0) {
+            // icons[iconselected].rotation = head
+           
+            if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+            // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(new google.maps.LatLng(lat, lng));
+
+          map.setCenter({ lat: lat, lng: lng });
+          // //console.log("Abinash");
+          that.start = setTimeout(that.moveMarker, delay);
+        }
+        else {
+          var head = google.maps.geometry.spherical.computeHeading(marker.getPosition(), dest);
+         
+          
+
+          // var iconType = 'car';
+
+          // //console.log(icons['iconType'].url);
+          // //console.log(icons[iconType]);
+          // //console.log(icons[iconType].url);
+          
+          icons[iconType].url = that.iconSelector(status, iconType, msg);
+          markerDOM = that.elementRef.nativeElement.querySelector("img[src='" + icons[iconType].url + "']");
+          
+          if (markerDOM) {
+              markerDOM.style.transform = 'rotate(' + head + 'deg)';
+            }
+          // }
+          marker.setIcon(icons[iconselected]);
+          marker.setPosition(dest);
+          map.setCenter({ lat: coords[target][0], lng: coords[target][1] });
+          // //console.log('target',target);
+          target++;
+          if (target == coords.length) { target = 0; }
+          that.start = setTimeout(that.goToPoint, delay);
+          
+        }
+      }
+      a++
+      
+  
+      that.rangeDetector = false;
+      // //console.log("outside moveMarker function");
+      if (a > coords.length) {
+        // //console.log("Cord.length if condition");  
+        outerThis.speeed2 = 0;
+    
+      }
+      else {     
+        // //console.log("Cord.length else condition");   
+        that.moveMarker();
+        km_h = outerThis.speed;
+      }
+    }
+    var a = 0;
+    
+   
+    // //console.log("Gotopoint function");
+    that.goToPoint();
+    
+  }
+
+  iconSelector(status, iconType, msg) {
+    
+
+    // var tempSpeed = msg.speed;
+    // var tempIgn = msg.ignition;
+    var iconUrl = "";
+    // if(status !="OUT OF REACH"){
+      //   if (((msg.speed != undefined) && (msg.speed != null)) && ((msg.ignition != null)&&(msg.ignition != undefined))) {
+    //     if (parseInt(msg.ignition) == 0) {
+      //       status = "STOPPED"
+      //     }
+    //     else if (msg.ignition == "1" && parseInt(msg.speed) > 0) {
+      //       status = "RUNNING";
+      //     } else {
+        //       status = "IDLING"
+    //     }
+    //   }
+    // }
+    
+    if (status == "OUT OF REACH") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/obike.png';
+        return iconUrl;
+      }
+      if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/ocar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/obus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/otruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/otractor.png';
+        return iconUrl;
+      }  else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/ourjcb.png';
+        return iconUrl;
+      }
+      else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_b.png';
+        return iconUrl;
+      }
+      else {
+        iconUrl = '/assets/images/liveTrackIcons/user_b.png';
+        return iconUrl;
+      }
+      
+    } else if (status == "STOPPED") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/sbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/scar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/sbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/struck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/stractor.png';
+        return iconUrl;
+      }else if (iconType == 'jcb') {
+        iconUrl = '/assets/images/liveTrackIcons/stoppedjcb.png';
+        return iconUrl;
+      }   else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_r.png';
+        return iconUrl;
+      }else {
+        iconUrl = '/assets/images/liveTrackIcons/user_r.png';
+        return iconUrl;
+      }
+    } else if (status == "RUNNING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/rbike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/rcar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/rbus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/rtruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/rtractor.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/images/liveTrackIcons/runningjcb.png';
+        return iconUrl;
+        
+      }  else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_g.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    } else if (status == "IDLING") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/images/liveTrackIcons/ibike.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/images/liveTrackIcons/icar.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/images/liveTrackIcons/ibus.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/images/liveTrackIcons/itruck.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/images/liveTrackIcons/itractor.png';
+        return iconUrl;
+      }else if(iconType == "jcb" ){
+        iconUrl = '/assets/images/liveTrackIcons/idlingjcb.png';
+        return iconUrl;        
+
+      } else if (iconType == 'ambulance') {
+        iconUrl = '/assets/images/liveTrackIcons/ambulance_y.png';
+        return iconUrl;
+      }  else {
+        iconUrl = '/assets/images/liveTrackIcons/user_y.png';
+        return iconUrl;
+      }
+    }else if (status == "NO DATA") {
+      if (iconType == 'bike') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'car') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'bus') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'truck') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if (iconType == 'tractor') {
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else if(iconType == 'jcb'){
+        iconUrl = '/assets/image/no_data.png';
+        return iconUrl;
+      } else {
+        iconUrl = '/assets/images/liveTrackIcons/user_g.png';
+        return iconUrl;
+      }
+    }
+  }
+
+  
+ 
+changeRange(){ 
+  
+  clearTimeout(this.start);
+  this.rangeDetector = true;
+  var rangeVal = document.getElementById("slider1");
+ 
+
+  this.indexValue  = rangeVal['value'];
+
+ if(this.tempMapHistory[0]['flag'] == 'stop'){
+   this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.gMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+    this.goToPoint();
+  
+ } 
+ if(this.tempMapHistory[0]['flag'] == 'start'){
+  this.marker4.setPosition({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.gMap.setCenter({ lat: this.latLngLine[this.indexValue].lat, lng: this.latLngLine[this.indexValue].lng });
+  this.tempMapHistory[0]['flag'] = 'stop';
+  this.goToPoint();
+
+}
+
+}
+devicess:any;
+plotGeofence(id){
+ 
+  this.contactService.getperGeoFence(id).subscribe(      
+    data => {
+      this.devicess = data 
+      // console.log(this.devicess);
+      var cordin=[];
+      let a = this.devicess[0].geofence.coordinates[0];
+      for(let k=0;k<a.length;k++){
+      let b ={
+      lat : a[k][1],
+      lng : a[k][0]
+      }
+   
+      cordin.push(b);
+    }  
+      this.draw(cordin, this.devicess[0].geoname);
+    });
+}
+plotGeofence2(id){
+ 
+  this.contactService.getperGeoFence(id).subscribe(      
+    data => {
+      this.devicess = data 
+      // console.log(this.devicess);
+      var cordin=[];
+      let a = this.devicess[0].geofence.coordinates[0];
+      for(let k=0;k<a.length;k++){
+        let b ={
+      lat : a[k][1],
+      lng : a[k][0]
+      }
+     
+      cordin.push(b);
+    }  
+      this.draw(cordin, this.devicess[0].geoname);
+    });
+}
+
+draw(zzz,yyy){
+  
+  var infoWindow;
+ // console.log(typeof zzz)
+  var GeoFencCoords = zzz
+  var GeoName = yyy
+  // plotPoly(GeoFencCoords,this.gMap);
+  var that=this;
+  // function plotPoly(GeoFencCoords,map) {  
+    // console.log(map); 
+    console.log('GeoFencCoords',GeoFencCoords);
+    var bermudaTriangle = new google.maps.Polygon({
+      paths: GeoFencCoords,
+      strokeColor: '#FF0000',
+      strokeOpacity: 0.8,
+      strokeWeight: 3,
+      fillColor: '#FF0000',
+      fillOpacity: 0.35
+    });
+    
+    bermudaTriangle.setMap(this.gMap);
+    // Add a listener for the click event.
+    bermudaTriangle.addListener('click', showArrays);
+    infoWindow = new google.maps.InfoWindow;
+  // }
+
+  /** @this {google.maps.Polygon} */
+  function showArrays(event) {
+    // Since this polygon has only one path, we can call getPath() to return the
+    // MVCArray of LatLngs.
+    var vertices = this.getPath();
+
+    var contentString = '<b>Geo Fence</b><br>' +
+        'Name: ' + GeoName;
+        
+    infoWindow.setContent(contentString);
+    infoWindow.setPosition(event.latLng);
+    infoWindow.open(that.gMap);
+  }
+}
+
+  
+  
+}
+
+//   populateHistory: any;
+//   routeId: any;
+//    Load:boolean=false
+//   constructor(private contactService: ContactService,private router: Router,private _flashMessagesService: FlashMessagesService,public dialogRef: MdDialogRef<TripHistoryComponent>,
+//     @Inject(MD_DIALOG_DATA) public data: any) {
+
+//     this.routeId = data.routeId;
+//     // console.log(this.routeId);
+
+//      }
+
+//   ngOnInit() {
+//     this.trip_history();
+//   }
+
+
+//   newArray=[]
+//   trip_history(){
+//      this.Load = true;
+//     this.contactService.tripHistory(this.routeId)
+//       .subscribe(res=>{
+//         // console.log(res);
+//         this.populateHistory = res;
+//         this.Load = false;
+
+//         // console.log('populatedhis',this.populateHistory);
+//       },err=>{
+//           this.Load = false;
+//            this._flashMessagesService.show('Info : No Data Found', { cssClass: 'alert-danger', timeout: 2000 });
+//       })
+//   }
+
+
+//   tab:any;
+//   exportExcel()
+// 	{   
+  
+// 	    var tab_text_1="<table border='2px'><tr bgcolor='#87AFC6'>";
+// 	    var textRange; var j=0;
+// 	    this.tab = document.getElementById('test_history'); // id of table
+
+// 	    for(j = 0 ; j < this.tab.rows.length ; j++) 
+// 	    {     
+// 	        tab_text_1=tab_text_1+this.tab.rows[j].innerHTML+"</tr>";
+// 	        //tab_text_1=tab_text_1+"</tr>";
+// 	    }
+
+// 	    tab_text_1=tab_text_1+"</table>";
+// 	    tab_text_1= tab_text_1.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
+// 	    tab_text_1= tab_text_1.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
+// 	    tab_text_1= tab_text_1.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+// 	    var ua = window.navigator.userAgent;
+// 	    var msie = ua.indexOf("MSIE "); 
+
+// 	    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text_1));  
+
+// 	    return (sa);
+// 	}
+// }
\ No newline at end of file
diff --git a/src/app/try b/src/app/try
new file mode 100644
index 0000000..799e203
--- /dev/null
+++ b/src/app/try
@@ -0,0 +1,244 @@
+<div flex="70" style="float:right">
+            <div ng-click="logoutDiv($mdMenu, $event)"style="text-align: center;font-size: 20px;color:black;" >
+            <md-menu md-position-mode="target-right target">
+                <md-icon md-svg-icon="scripts/svgImgs/settings.svg"style="float: right;align: right;
+                width:25px; height:25px; margin-top:4px;" flex ng-click="OrgProfileDashboard($mdMenu, $event)"></md-icon>
+                   <md-menu-content width="4" height="2">
+                    <md-menu-item >
+                     <md-button ng-click="orgProfileSetup()" >          
+                            <div style="padding-left:10px" >ORGANIZATION PROFILE
+                               <md-icon md-svg-icon="scripts/svgImgs/org.svg"style="float:left;align:left;
+                                     width:35px; height:35px;">
+                               </md-icon>
+                           </div> 
+                     </md-button>
+                    </md-menu-item>
+                    <md-menu-item>
+                                              <md-button ng-click="invoice($event)" >          
+                                            <div style="padding-left:10px" >INVOICE 
+                                               
+                                               <md-icon md-svg-icon="scripts/svgImgs/invoiceSetting.svg"style="float:left;align:left;
+                                                     width:35px; height:35px;">
+                                               </md-icon>
+                                           </div> 
+                                             </md-button>
+                                       </md-menu-item>
+
+
+
+
+<form class="form-horizontal">
+  <fieldset>
+    <legend>Legend</legend>
+    <div class="form-group">
+      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+      <div class="col-lg-10">
+        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
+        <div class="checkbox">
+          <label>
+            
+    <div class="form-group">
+      <div class="col-lg-10 col-lg-offset-2">
+        <button type="reset" class="btn btn-default">Cancel</button>
+        <button type="submit" class="btn btn-primary">Submit</button>
+      </div>
+    </div>
+  </fieldset>
+</form>
+
+
+</div>
+    <div class="form-group">
+      <label for="inputEmail" class="col-lg-2 control-label">Last Name</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="L_name" placeholder="Last Name">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+      <div class="col-lg-10">
+        <input type="text" class="form-control" id="email" placeholder="Email">
+      </div>
+    </div>
+    <div class="form-group">
+      <label for="inputPassword" class="col-lg-2 control-label">Password</label>
+      <div class="col-lg-10">
+        <input type="password" class="form-control" id="Password" placeholder="Password">
+
+      </div>
+    </div>
+
+
+"../../assets/image/back.png"
+
+
+
+    <div class="container-fluid no-padding">
+  <div class="row">
+    <div class="col-md-12">
+      <img src="../../assets/image/back.png" alt="placeholder 960" class="img-responsive" />
+    </div>
+  </div>
+</div>
+
+
+gmail
+client id :
+648874998258-0g4hg387q023hbs5063pac7co9vhvh0t.apps.googleusercontent.com
+client key :
+rDEuSUYDQJAFRPBRbJNtklCN
+
+facebook
+app id :
+110139179705461
+
+
+{
+    status: 'connected',
+    authResponse: {
+        accessToken: '...',
+        expiresIn:'...',
+        signedRequest:'...',
+        userID:'...'
+    }
+}Copy Code
+status specifies the 
+
+html...........
+
+<script>
+  window.fbAsyncInit = function() {
+    FB.init({
+      appId      : '110139179705461',
+      cookie     : true,
+      xfbml      : true,
+      version    : 'v2.8'
+    });
+    FB.AppEvents.logPageView();   
+  };
+
+  (function(d, s, id){
+     var js, fjs = d.getElementsByTagName(s)[0];
+     if (d.getElementById(id)) {return;}
+     js = d.createElement(s); js.id = id;
+     js.src = "//connect.facebook.net/en_US/sdk.js";
+     fjs.parentNode.insertBefore(js, fjs);
+   }(document, 'script', 'facebook-jssdk'));
+</script>
+
+
+(function()
+{
+    angular
+        .module("WhiteBoardApp")
+        .controller("LoginController",LoginController);
+        function LoginController(UserService, $location, $rootScope)
+        {
+            var vm = this;
+            vm.login= login;
+            function login(user)
+            {
+                UserService.login(user, function(response){
+
+                    if(response == null)
+                        {
+
+                        }
+                        else{
+                            $rootScope.currentUser = response;
+                            console.log("Logged in..");
+                            $location.url("/home");
+                        }
+                    console.log(response);
+                });
+            }
+        }
+})
+
+(function()
+{
+    angular
+            .module("WhiteBoard")
+            .factory("UserService",UserService);
+function UserService($http)
+{
+    var service={
+        createUser: createUser
+    };
+    return service;
+
+    function createUser(user, callback)
+    {
+        $http.post("http://localhost:3040/api/contacts",user)
+        .success(callback);
+    }
+
+    function LoginUser(user, callback)
+    {
+        $http.post("http://localhost:3040/api/contacts",user)
+        .success(callback);
+    }
+}
+})();
+
+
+db.getCollection('contacts').find({},{"password":1 ,"email":1})
+
+
+api key:
+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
+
+
+var transporter = nodemailer.createTransport({
+  service: 'gmail',
+  auth: {
+    user: 'anshul.saxena04@adnatesolutions.com',
+    pass: '*****'
+  }
+});
+
+var mailOptions = {
+  from: 'anshul.saxena04@adnatesolutions.com',
+  to: 'anshul.saxena04@adnatesolutions.com',
+  subject: 'Sending Email using Node.js',
+  text: 'That was easy!'
+};
+
+transporter.sendMail(mailOptions, function(error, info){
+  if (error) {
+    console.log(error);
+  } else {
+    console.log('Email sent: ' + info.response);
+  }
+});
+
+
+var transporter = nodemailer.createTransport({
+    service: 'gmail',
+    auth: {
+      user: 'anshul.saxena@adnatesolutions.com',
+      pass: '00@Nshul'
+    }
+  });
+  
+  var mailOptions = {
+    from: 'anshul.saxena@adnatesolutions.com',
+    to: 'anshul.saxena@adnatesolutions.com',
+    subject: 'Welcome to Adnate IOT',
+    html: '<h1><center><font face="Trebuchet MS" color="38383C"><b>Welcome to Adnate IOT</b></font></center></h1><font face="Trebuchet MS" color="black" size="-1"><p>Hi, thanks for signing up! Please enjoy IOT free services on us! You’re one step close to awesome journey of IOT.</p></font><center><a href="http://localhost:4200/login"><br><input type="submit"  value=" Click here to Login " style="font-size:10pt;color:white;background-color:green;border:2px solid #336600;padding:11px"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><input type="submit"  value=" Verify your account " style="font-size:10pt;color:white;background-color:blue;border:2px solid #336600;padding:11px"></a></center>'
+  };
+  
+  transporter.sendMail(mailOptions, function(error, info){
+    if (error) {
+      console.log(error);
+    } else {
+      console.log('Email sent: ' + info.response);
+    }
+  });
+  <a href="+link+"><br><input type="submit"  value=" Click here to Verify " style="font-size:10pt;color:white;background-color:blue;padding:11px"></a></center>
\ No newline at end of file
diff --git a/src/app/user-finder/user-finder.component.html b/src/app/user-finder/user-finder.component.html
new file mode 100644
index 0000000..2db324e
--- /dev/null
+++ b/src/app/user-finder/user-finder.component.html
@@ -0,0 +1,95 @@
+<div style="top: 0;position: absolute;">
+  <app-all-menus></app-all-menus>
+
+</div>
+
+<div class="main">
+  <!-- <div class="card"> -->
+  <div class="topnav">
+    <a class="active">User Finder</a>
+
+    <div class="search-container">
+      <form [formGroup]="searchForm" (ngSubmit)="submit()">
+        <input type="text" placeholder="Search by userId/phone" formControlName="imei"
+          [ngClass]="{ 'is-invalid': submitted && f.imei.errors }" name="imei">
+        <button type="submit"><i class="fa fa-search"></i></button>
+
+        <div *ngIf="submitted && f.imei.errors" class="invalid-feedback">
+          <div *ngIf="f.imei.errors.required">Please Enter UserId/Phone</div>
+        </div>
+      </form>
+    </div>
+
+  </div>
+
+<!-- Name:[''],
+email:[''],
+Dealer:[''],
+supAdmin:[''],
+accountSuspended:[''],
+user_id:[''],
+created_on:[''],
+expire_date:[''], -->
+  <div style="padding-left:16px">
+    <form [formGroup]="deviceForm" class="row g-3 mt-3">
+      <div class="col-md-6">
+        <label class="form-label">Name</label>
+        <input type="text" readonly formControlName="Name" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Email</label>
+        <input type="text" readonly formControlName="email" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Dealer</label>
+        <input type="text" readonly formControlName="Dealer" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Super Admin</label>
+        <input type="text" readonly formControlName="supAdmin" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Account Suspended</label>
+        <input type="text" readonly formControlName="accountSuspended" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">User ID</label>
+        <input type="text" readonly formControlName="user_id" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Created On</label>
+        <input type="text" readonly formControlName="created_on" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Expiry Date</label>
+        <input type="text" readonly formControlName="expire_date" class="form-control">
+      </div>
+
+      <div class="col-md-6">
+        <label class="form-label">Deleted</label>
+        <input type="text" readonly formControlName="DeletedUser" class="form-control">
+      </div>
+
+
+      <div *ngIf="deleteShow" class="col-md-12 text-center mt-4">
+        <button class="btn btn-danger" (click)="deleteDevice()">Delete <i class="fa fa-trash"></i></button>
+      </div>
+
+      <div *ngIf="deleted" class="col-md-12 text-center mt-4">
+        <button class="btn btn-danger" (click)="deleteDevicePermenatly()">Delete Permanatly <i
+            class="fa fa-trash"></i></button>
+      </div>
+
+
+    </form>
+  </div>
+
+</div>
+<!-- </div> -->
\ No newline at end of file
diff --git a/src/app/user-finder/user-finder.component.scss b/src/app/user-finder/user-finder.component.scss
new file mode 100644
index 0000000..d421a55
--- /dev/null
+++ b/src/app/user-finder/user-finder.component.scss
@@ -0,0 +1,80 @@
+.main {
+  padding: 20px;
+  margin-top: 55px;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: #e9e9e9;
+}
+
+.topnav a {
+  float: left;
+  display: block;
+  color: black;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+.topnav a.active {
+  background-color: #2196f3;
+  /* color: blueviolet; */
+  width: 290px;
+  font-size: larger;
+  font-weight: 600;
+}
+
+.topnav .search-container {
+  float: right;
+}
+
+.topnav input[type="text"] {
+  padding: 6px;
+  margin-top: 8px;
+  font-size: 17px;
+  border: black;
+}
+
+.topnav .search-container button {
+  float: right;
+  padding: 6px 10px;
+  margin-top: 8px;
+  margin-right: 16px;
+  background: #ddd;
+  font-size: 17px;
+  border: none;
+  cursor: pointer;
+}
+
+.topnav .search-container button:hover {
+  background: blue;
+}
+
+@media screen and (max-width: 600px) {
+  .topnav .search-container {
+    float: none;
+  }
+  .topnav a,
+  .topnav input[type="text"],
+  .topnav .search-container button {
+    float: none;
+    display: block;
+    text-align: left;
+    width: 100%;
+    margin: 0;
+    padding: 14px;
+  }
+  .topnav input[type="text"] {
+    border: 1px solid #ccc;
+  }
+}
+.col-md-6 {
+  margin-top: 15px;
+}
diff --git a/src/app/user-finder/user-finder.component.spec.ts b/src/app/user-finder/user-finder.component.spec.ts
new file mode 100644
index 0000000..ac051b6
--- /dev/null
+++ b/src/app/user-finder/user-finder.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserFinderComponent } from './user-finder.component';
+
+describe('UserFinderComponent', () => {
+  let component: UserFinderComponent;
+  let fixture: ComponentFixture<UserFinderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserFinderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserFinderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user-finder/user-finder.component.ts b/src/app/user-finder/user-finder.component.ts
new file mode 100644
index 0000000..26b7282
--- /dev/null
+++ b/src/app/user-finder/user-finder.component.ts
@@ -0,0 +1,212 @@
+import { Component, OnInit, ViewChild, Input, } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MdSnackBar } from '@angular/material';
+
+import {ContactService} from '../contact.service';
+ 
+
+declare var google: any,swal: any;
+@Component({
+  selector: 'app-user-finder',
+  templateUrl: './user-finder.component.html',
+  styleUrls: ['./user-finder.component.scss']
+})
+export class UserFinderComponent implements OnInit {
+ emailId: any;
+  searchForm:FormGroup;
+  deleteShow:boolean=false;
+   submitted = false;
+  userId: any;
+  deviceForm:FormGroup
+  data: any;
+  deleted:boolean=false;
+  // @ViewChild(BaseChartDirective) public chart: BaseChartDirective;
+  constructor(private contactService:ContactService,private fb:FormBuilder,public snackBar: MdSnackBar){
+    
+    }
+  ngOnInit(): void {
+    this.searchForm=this.fb.group({
+      imei:['',Validators.required]
+    })
+
+//  Name
+//  emial
+//  dealer
+//  superadmin
+//  isdeleted
+//  issuspended
+//  user id
+//  createdon
+//  expiredon
+
+    this.deviceForm=this.fb.group({
+      Name:[''],
+      email:[''],
+      Dealer:[''],
+      supAdmin:[''],
+      accountSuspended:[''],
+      user_id:[''],
+      created_on:[''],
+      expire_date:[''],
+      DeletedUser:['']
+      // imei:[''],
+      // registrationNumber:[''],
+      // sim1:[''],
+      // sim2:[''],
+      // dealaer:[''],
+      // user:[''],
+      // deviceModel:[''],
+      // vehicleType:[''],
+      // expirationDate:[''],
+      // creationDate:[''],
+      // superAdmin:[''],
+      // lastRenewal:[''],
+      // status:[''],
+      // deleted:[''],
+      // deletedBy:[''],
+      // deletedAt:[''],
+      // deletedFrom:['']
+
+// 352887076587769
+    })
+     this.emailId = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.userId = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+  }
+  
+ get f() { return this.searchForm.controls; }
+
+  submit(){
+    console.log(this.searchForm.value);
+    
+      this.submitted = true;
+
+        // stop here if form is invalid
+        if (this.searchForm.invalid) {
+            return;
+        }
+        this.contactService.get('/users/searchUser?search='+this.searchForm.value.imei).subscribe((res:any)=>{
+          console.log(res);
+          this.data=res[0];
+          if(res.length!=0){
+            this.deleteShow=true
+            if(res[0].DeletedUser){
+              this.deleteShow=false;
+              this.deleted=true;
+            }else{
+
+              this.deleted=false;
+            }
+            console.log(res[0].Dealer?res[0].Dealer.last_name?res[0].Dealer.last_name:"":'');
+            var dealerFirst=res[0].Dealer?res[0].Dealer.first_name?res[0].Dealer.first_name:'':'';
+            var dealerLast=res[0].Dealer?res[0].Dealer.last_name?res[0].Dealer.last_name:"":''
+            var supFirst=res[0].supAdmin?res[0].supAdmin.first_name?res[0].supAdmin.first_name:'':''
+            var supLast=res[0].supAdmin?res[0].supAdmin.last_name?res[0].supAdmin.last_name:'':''
+            // var dealer=res[0].Dealer?res[0].Dealer.first_name?res[0].Dealer.first_name:'':''+' '+res[0].Dealer?res[0].Dealer.last_name?res[0].Dealer.last_name:"":''
+            // var supAdm=res[0].supAdmin?res[0].supAdmin.first_name?res[0].supAdmin.first_name:'':''+' '+res[0].supAdmin?res[0].supAdmin.last_name?res[0].supAdmin.last_name:'':''
+            this.deviceForm.patchValue({
+              Name:[res[0].first_name?res[0].first_name:''+' '+res[0].last_name?res[0].last_name:''],
+              email:[res[0].email],
+              Dealer:[dealerFirst+" "+dealerLast],
+              supAdmin:[supFirst+' '+supLast],
+              accountSuspended:[res[0].accountSuspended==true?'Yes':'No'],
+              user_id:[res[0].user_id],
+              created_on:[new Date(res[0].created_on)],
+              expire_date:[new Date(res[0].expire_date)],
+              DeletedUser:res[0].DeletedUser==true?'Yes':'No'
+            })
+
+          }else{
+             this.deleteShow=false;
+             this.deviceForm.reset();
+             this.snackBar.open("No Data Found", '', {
+                duration: 4000,
+          });
+          }
+          
+        })
+
+  }
+
+             deleteDevice(){
+                      swal({                 
+                             title: '<strong>Are you sure?</strong>',
+                            icon: 'warning',
+                            html: "You won't be able to revert this!",
+                            showCloseButton: true,
+                            focusConfirm: false,
+                            // confirmButtonText: 'Reset today ODO',
+                            confirmButtonText: 'Yes, delete it!',
+                            // cancelButtonText: 'Reset total ODO',
+                            // cancelButtonAriaLabel: 'Thumbs down'
+                            cancelButtonText: 'No, cancel!',
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                              var deletePayload = {
+                              'userId' : this.data._id,
+                              'deleteuser' : true
+                            }
+                            console.log(deletePayload);
+                            this.contactService.deleteCostumer(deletePayload).subscribe(res=>{
+                                swal({
+                                 title: 'Deleted!',
+                                 html:'Your file has been deleted.',
+                                   icon:'success'
+                                })
+                                 this.deviceForm.reset();
+                              },err=>{
+                                console.log(err);
+                                var message=JSON.parse(err._body)
+                                swal({
+                                 title:'Status: '+err.status ,
+                                 html:message.message,
+                                   icon:'warning'
+                                })
+                              })
+                             
+                            }
+                          }
+                        )
+  }
+
+    deleteDevicePermenatly(){
+                      swal({                 
+                             title: '<strong>Are you sure?</strong>',
+                            icon: 'warning',
+                            html: "User will be deleted permanantly",
+                            showCloseButton: true,
+                            focusConfirm: false,
+                            // confirmButtonText: 'Reset today ODO',
+                            confirmButtonText: 'Yes, delete it!',
+                            // cancelButtonText: 'Reset total ODO',
+                            // cancelButtonAriaLabel: 'Thumbs down'
+                            cancelButtonText: 'No, cancel!',
+                        }).then((result: { value: boolean; }) => {
+                            if (result) {
+                             
+                              this.contactService.permanentDeluser(this.data._id).subscribe(res=>{
+                                swal(
+                                  'Deleted',
+                                  'User Deleted',
+                                  'success'
+                                )
+                                this.deviceForm.reset();
+                              })
+                            }
+                          }
+                        )
+  }
+
+ 
+  }
+  
+ 
+   
+   
+
+                       
+  
+                                 
+                               
+                               
+
+
diff --git a/src/app/user-master/user-master.component.html b/src/app/user-master/user-master.component.html
new file mode 100644
index 0000000..4c456b8
--- /dev/null
+++ b/src/app/user-master/user-master.component.html
@@ -0,0 +1,115 @@
+
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <h4>{{'USER MASTER' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <!-- <button style="background-color: #cc0000;color:#fdfdfd;font-size: 12px;" md-raised-button (click)="exportPdf()">{{'PDF' | translate}}</button> -->
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div style="width: 100%;height:82vh;overflow: auto;">
+            <table  id="userTable" class="table table-striped table-hover" style="font-size: 12px;">         
+            <thead style="background-color:#e0e0e0;color: #444444;">
+              <tr>
+                <th style="text-align:left;">{{'Name' | translate}}</th>
+                <th style="text-align:left;">{{'Dealer' | translate}}</th>
+                <th style="text-align:left;">{{'Is Dealer' | translate}}</th>
+                <th style="text-align:left;">{{'Created on' | translate}}</th>
+                <th style="text-align:left;">{{'Email' | translate}}</th>
+                <th style="text-align:left;">{{'Phone' | translate}}</th>
+                <th style="text-align:left;">{{'Token' | translate}}</th>
+                <th style="text-align:left;">{{'Edit' | translate}}</th>
+                <th  style="text-align:left;">{{'Delete' | translate}}</th>
+                <th  style="text-align:left;">{{'Restore' | translate}}</th>         
+                <th  style="text-align:left;">{{'Delete Permanently' | translate}}</th>
+              </tr>
+            </thead> 
+          </table>      
+         </div>  
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+
+
+<!-- <app-all-menus></app-all-menus>
+<div style="padding-top: 6%;">
+  <p class="headStyle">{{'USER MASTER' | translate}}</p>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div class="InputStyle">
+    <div class="row">
+      <div class="col-md-5" style="text-align: center;">
+        <md-input-container>
+          <input mdInput placeholder="{{'Search by phone' | translate}}" [mdAutocomplete]="tdAuto1" name="state" 
+          #state="ngModel" [(ngModel)]="userName1"
+         (ngModelChange)="filterDealerStates1(userName1)">
+         <md-autocomplete #tdAuto1="mdAutocomplete">
+            <md-option *ngFor="let option1 of userSelect1" [value]="option1.user_type">
+              <span>{{ option1.user_type }}</span>
+            </md-option>
+          </md-autocomplete>   
+        </md-input-container>
+          <md-input-container style="margin-left: 17px;">
+          <input mdInput placeholder="{{'Search by name' | translate}}" [mdAutocomplete]="tdAuto" name="state" 
+          #state="ngModel" [(ngModel)]="userName"
+         (ngModelChange)="filterDealerStates(userName)">
+         <md-autocomplete #tdAuto="mdAutocomplete">
+            <md-option *ngFor="let option of userSelect" [value]="option.user_type">
+              <span>{{ option.user_type }}</span>
+            </md-option>
+          </md-autocomplete>   
+        </md-input-container>
+    
+      </div>
+      <div class="col-md-2">
+        <span>{{'From Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-2">
+        <span>{{'To Date' | translate}}</span>
+        <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+      </div>
+      <div class="col-md-3" style="padding-top:17px;text-align: center;">
+        <md-slide-toggle md-tooltip="Deleted Users" [(ngModel)]="deleteduser" (change)="onChange($event)"></md-slide-toggle> 
+          <button  md-raised-button style="background-color:#3e3737;color: white;border:#fdfdfd;width: 120px;margin-left: 40px;" class="btn btn-primary w3-button/" (click)="callfunction()">{{'FIND' | translate}}</button>       
+        </div>
+    </div>
+    <flash-messages style="float: center;margin:0px 1px;height:-6px;"></flash-messages>
+  </div>
+  <table id="userTable" class="display" style="width:100%;font-size:15px;text-align: center">
+    <thead style="background-color:#A2C523;color: white;">
+        <tr>
+            <th style="text-align:center;">{{'Name' | translate}}</th>
+            <th style="text-align:center;">{{'Dealer' | translate}}</th>
+            <th style="text-align:center;">{{'Is Dealer' | translate}}</th>
+            <th style="text-align:center;">{{'Created on' | translate}}</th>
+            <th style="text-align:center;">{{'Email' | translate}}</th>
+            <th style="text-align:center;">{{'Phone' | translate}}</th>
+            <th style="text-align:center;">{{'Token' | translate}}</th>
+            <th style="text-align:center;">{{'Edit' | translate}}</th>
+            <th  style="text-align:center;">{{'Delete' | translate}}</th>
+            <th  style="text-align:center;">{{'Restore' | translate}}</th>         
+            <th  style="text-align:center;">{{'Delete Permanently' | translate}}</th>    
+        </tr>
+    </thead>
+      
+</table>
+</div>
+
+ -->
diff --git a/src/app/user-master/user-master.component.scss b/src/app/user-master/user-master.component.scss
new file mode 100644
index 0000000..f68a8a2
--- /dev/null
+++ b/src/app/user-master/user-master.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+   
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
diff --git a/src/app/user-master/user-master.component.spec.ts b/src/app/user-master/user-master.component.spec.ts
new file mode 100644
index 0000000..54fd3c9
--- /dev/null
+++ b/src/app/user-master/user-master.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserMasterComponent } from './user-master.component';
+
+describe('UserMasterComponent', () => {
+  let component: UserMasterComponent;
+  let fixture: ComponentFixture<UserMasterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserMasterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserMasterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/user-master/user-master.component.ts b/src/app/user-master/user-master.component.ts
new file mode 100644
index 0000000..2f9b440
--- /dev/null
+++ b/src/app/user-master/user-master.component.ts
@@ -0,0 +1,537 @@
+import { ContactService } from './../contact.service';
+import { Component, OnInit } from '@angular/core';
+import { FlashMessagesService } from 'angular2-flash-messages';
+declare var $: any, DataTable: any;
+declare var swal :any;
+import * as moment from 'moment';
+import { GpsEditMasterComponent } from '../gps-master/gps-edit-master/gps-edit-master.component';
+import { MdDialog } from '@angular/material';
+
+@Component({
+  selector: 'app-user-master',
+  templateUrl: './user-master.component.html',
+  styleUrls: ['./user-master.component.scss']
+})
+export class UserMasterComponent implements OnInit {
+  // @ViewChild(DataTableDirective)
+  // datatableElement: DataTableDirective;
+  Fromdate=new Date();
+  todate=new Date();
+  errorDialog: boolean;
+  errorMsg: any;
+  dataSelect = [];
+  aa = [];
+
+  identifier:String='usersMaster';
+  userName:any;
+  userName1:any;
+  deleteduser :boolean = false;
+  dtOptions: {
+
+    pagingType: string; pageLength: number; serverSide: boolean; lengthMenu: (string | number)[][];
+    processing: boolean; responsive: boolean; ajax: (dataTablesParameters: any, callback: any) => void; rowCallback: (row: Node, data: any, index: number) => Node; columns: ({
+      title: string; data: string; "visible": boolean;
+      "render": (data: any, type: any, row: any) => any;
+    } | { title: string; data: string; "render": (data: any, type: any, row: any) => any; "visible"?: undefined; })[];
+  };
+  emailid: any;
+  useridd: any;
+  data1: any;
+  costumers: any;
+  dummyuserData: any = [];
+  dummyuserData1: any = [];
+  tabelObj: any;
+  supadm: any;
+  Load: boolean;
+  userSelect1: any;
+
+
+  constructor(public contactService: ContactService,public dialog: MdDialog,private _flashMessagesService: FlashMessagesService) {
+    this.Fromdate.setHours(0, 0, 0);
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.supadm = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+  }
+
+  ngOnInit() {
+    // this.getUser();
+    this.testTable();
+    //  this.callfunction();
+  }
+
+
+  option: any;
+  filterStates(option) {
+  
+    // console.log(option);
+
+  }
+
+  showDeleted : boolean = false ;
+  delFlag : boolean = false;
+  onChange(ev){
+    
+    this.showDeleted = ev.checked;
+
+}
+
+
+  callfunction(): void {
+    this.tabelObj.draw();
+  }
+
+
+  testTable() {
+    const that = this;
+
+    $(document).ready(function () {
+      that.tabelObj = $('#userTable').DataTable({
+        'serverSide': true,
+        "processing": true,
+        "searching": false,
+        "order": [[ 0, "desc" ]],    
+        ajax: (dataTablesParameters: any, callback) => {
+
+          dataTablesParameters.op = {};
+          dataTablesParameters.select = [];
+          dataTablesParameters.find = {};
+          // console.log(dataTablesParameters);
+          // console.log("callback", callback);
+
+          // dataTablesParameters.find = {
+          //   _id: that.useridd         
+          // };
+          dataTablesParameters.columns = [    
+            {data : '_id',  "orderable": "true" },    
+            { data: "first_name" },
+            { data: "email" },
+            { data: "phone" },
+            { data: "isDealer" },
+            { data: "pushNotification" },
+            { data: "created_on" },
+                 {data : "std_code"},
+
+            { data: "Dealer.first_name" },
+            { data: "Dealer.last_name" },
+            { data: "last_name" },
+            { data: "isSuperAdmin"}
+              ]
+              // this.userSelect._id
+              dataTablesParameters.find.supAdmin = that.useridd;
+                
+          // if ((that.userSelect)&&(that.userSelect.length!=0)&&(that.userSelect[0].user_type!="All")) {
+          //   dataTablesParameters.find._id = that.userSelect[0]._id;
+          // }
+
+          if (that.userSelect1 != undefined) {
+            dataTablesParameters.find._id = that.userSelect1;
+          }
+
+
+          if (that.Fromdate) {
+            dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find['created_on']['$gte'] = {
+              _eval: 'date',
+              value: new Date(that.Fromdate).toISOString()
+            }
+          };
+          // }
+          if (that.todate) {
+            dataTablesParameters.find['created_on'] = dataTablesParameters.find['created_on'] ? dataTablesParameters.find['created_on'] : {};
+            dataTablesParameters.find['created_on']['$lte'] = {
+              _eval: 'date',
+              value: new Date(that.todate).toISOString()
+            };
+          }
+
+
+          if(that.showDeleted === true){  
+            dataTablesParameters.find.DeletedUser = {$exists : true};
+            that.delFlag = true;
+            console.log("called");
+
+        
+        }else{
+            dataTablesParameters.find.DeletedUser = {$exists : false};
+            that.delFlag = false;
+            console.log("called");
+        }
+
+          // if(this.supadm){
+          //   dataTablesParameters.find.supAdmin = that.useridd;
+          // }
+          
+          var suburl = "";
+          suburl += "/users/datatable";
+          // console.log(suburl);
+          // console.log(dataTablesParameters);
+          // console.log(suburl)
+          that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {
+            that.colSwitch()
+            callback(resp);
+
+          }, err => {
+            // console.log(err);
+            // console.log(err.status);
+          });
+        },
+        "rowCallback": function(row: Node, data: any | Object, index: number){  
+                  
+          $('#edit', row).bind('click', () => {    
+          // console.log("Edit Method",data);
+          let dialogRef = that.dialog.open(GpsEditMasterComponent, {
+            width: '650px',
+            height: '700px',   
+            data: {"userInfo":data}                      
+          });
+
+          dialogRef.afterClosed().subscribe(result => {   
+            // console.log(result);
+            if(result=="success"){
+               that.callfunction();      
+            }
+          })  
+
+          });
+          
+          $('#delete', row).bind('click', () => {
+           
+            var uid = data._id;
+         
+            that.contactService.deluser(uid)
+                .subscribe(res => {
+                   
+                    that._flashMessagesService.show("User Deleted", { cssClass: 'alert-warning', timeout: 2000 });
+                    that.Fromdate =new Date(); 
+                    that.Fromdate.setHours(0, 0, 0);
+                    that.todate =new Date();
+                    that.todate;   
+                    that.callfunction();   
+                }, err => {
+                     if(err.status==401){
+                    var msg=JSON.parse(err._body);
+                     console.log(msg);
+                    this._flashMessagesService.show(msg.message, { cssClass: 'alert-warning', timeout: 2000 });
+                 }else{
+                  that._flashMessagesService.show("Internal Server Error", { cssClass: 'alert-warning', timeout: 2000 }); 
+
+                }
+                  
+                })
+        });
+        $('#restoreDevice',row).bind('click',()=>{
+          console.log('deviceRestore',data);
+          that.contactService.restoreUser(data._id).subscribe(res=>{
+              that._flashMessagesService.show("User Restored", { cssClass: 'alert-success', timeout: 2000 });
+              that.callfunction()
+          },err=>{
+              that._flashMessagesService.show("Error while restoring User", { cssClass: 'alert-warning', timeout: 2000 });
+          })
+      });
+      $('#pdelete',row).bind('click',()=>{
+          console.log('permanent delete clicked=>',data);
+         
+          // var warningMsg = "Are you sure that you want to permanently delete the selected device ?" ;
+          swal({
+              title: 'Are you sure?',
+              text: "You won't be able to revert this!",
+              type: 'warning',
+              showCancelButton: true,
+              confirmButtonColor: '#3085d6',
+              cancelButtonColor: '#d33',
+              confirmButtonText: 'Yes, delete it!'
+            }).then((result: { value: boolean; }) =>{                      
+              if(result){
+                  that.contactService.permanentDeluser(data._id).subscribe(res=>{
+                    that.callfunction();
+                      swal(
+                          'Deleted',
+                          'Device Deleted',
+                          'success'
+                        )
+                  })
+              }                
+            });
+      })
+          },
+        "columns": [
+          {
+            "data": "first_name",
+            "render": function (data, type, row) {
+              return data ? (data + " " + row.last_name) : "";
+            }
+          },
+          {
+            "data": "Dealer",
+            render: function (data, type, row) {
+              return data ? (data.first_name + " " + data.last_name) : ""
+            }
+          },
+          {
+           "data": "isDealer",
+            render: function (data, type, row) {
+            return data?data:'false' ;
+            }
+          },
+          {
+            "data": "created_on",
+            "render": function (data, type, row) {
+              var created_time = new Date(data);
+
+              return data ? (moment(created_time).format('llll')) : "";
+            }
+          },
+          {
+            "data": "email",
+            render: function (data, type, row) {
+              return data ? data : ""
+            } 
+          },
+          {
+            "data": "phone",
+            "render": function (data, type, row) {
+            //  console.log(row.std_code);
+             var prefix:any;
+             if(row.std_code){
+             
+               if(row.std_code.dialcode != undefined){
+                  prefix = '+' + row.std_code.dialcode; 
+               }else{
+                   prefix  =  row.std_code ; 
+               }
+
+             }else{
+           
+               prefix = '';
+             }
+              return data ?(prefix + ' '+ data) : "";
+            }
+          },
+          {
+            "data": "pushNotification",
+            "render": function (data, type, row) {
+              var tokenCount = data ?  data.length :0;
+              return tokenCount;
+            }
+          },
+          {
+            "data":null,"render":function(data,type,row){
+            return '<button id="edit" type="button" class="btn btn-primary">Edit</button>'
+          }
+          },
+          {                
+            "data":null,
+          
+            "render":function(data,type,row){
+                return '<button id="delete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete</button>'
+                   
+            }
+        }, 
+  
+        {
+            "data":null,
+          
+            "render":function(data,type,row){
+                return '<button id="restoreDevice" type="button" class="btn btn-primary" style="background:#60ab1c;border:0px;">Restore</button>'                    
+            }
+    }         ,
+    {                
+        "data":null,
+      
+        "render":function(data,type,row){
+            return '<button id="pdelete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete permanently</button>'
+               
+        }
+    }     
+        ],
+        columnDefs: [
+          {
+            "searchable": true,
+            "targets": [0,1,2,3],     
+          },
+        ]
+      });
+      that.colSwitch()
+    });
+
+  }
+
+  // getUser() {
+  //   this.Load = true;
+  //   this.contactService.getContactsbyUser(this.useridd)
+  //     .subscribe(res => {
+  //       this.Load = false;
+  //       // console.log("Alluserobject", res);
+  //       this.costumers = res;
+  //       console.log(this.costumers)
+  //       this.dummyuserData = [];
+  //       this.dummyuserData1 = [];
+  //       var loadinguser = {
+  //         user_type: "All",
+  //         _id: "All User"
+  //       }
+
+  //       var loadinguser1 = {
+  //         user_type: "All",
+  //         _id: "All User"
+  //       }
+  //       this.dummyuserData.push(loadinguser);
+  //       for (var i = 0; i < this.costumers.length; i++) {
+  //          loadinguser = {
+  //           user_type: this.costumers[i].first_name + " " + this.costumers[i].last_name,
+  //           _id: this.costumers[i]._id
+  //         }
+
+
+  //         loadinguser1 = {
+  //           user_type: this.costumers[i].phone,
+  //           _id: this.costumers[i]._id
+  //         }
+
+
+  //         this.dummyuserData1.push(loadinguser1);
+  //         this.dummyuserData.push(loadinguser);
+  //       }
+  //       console.log("phoneSearch Object = >",this.dummyuserData1);
+  //     },err=>{
+  //       this.Load = false;
+  //     })
+  // }
+
+  // userSelect=[];
+  // filterDealerStates(usr) {
+  //   // console.log("userObj=>",usr);
+  //   if(usr.length == 0){
+  //     this.userSelect =[];
+  //   }
+  
+  //   if (usr) {
+      
+  //     const filterdealerValue:any = usr;
+  //     this.userSelect=[];
+  //      this.userSelect = this.dummyuserData.filter(function(p){
+  //       var t = p.user_type.toLocaleLowerCase().indexOf(filterdealerValue.toLocaleLowerCase());
+  //     //  this.option = this.options[i];
+  //       return t > -1;    
+  //     });
+  //       // console.log("selectedUser=>",this.userSelect)
+  //       return this.userSelect;
+  //   }
+  
+  // }
+
+  // userSelect1=[];
+  // filterDealerStates1(usr1) {
+  //   // console.log("userObj=>",usr);
+  //   if(usr1.length == 0){
+  //     this.userSelect1 =[];
+  //   }
+    
+  //   if (usr1) {
+  //     console.log("user=>",usr1);
+  //     const filterdealerValue:any = usr1;
+  //     this.userSelect1=[];
+  //      this.userSelect1 = this.dummyuserData1.filter(function(ppp){
+  //       var t = ppp.user_type.indexOf(filterdealerValue);
+  //     //  this.option = this.options[i];
+  //       return t > -1;    
+  //     });
+  //       // console.log("selectedUser=>",this.userSelect1)
+  //       return this.userSelect1;
+  //   }
+  
+  // }
+
+  // userInformation() {
+  
+  //   this.testTable();
+  // }
+
+  colSwitch(){
+   
+if(this.supadm == true){
+    // console.log("Inside function");
+ 
+    for ( var k=0 ; k<11 ; k++ ) {
+        if(this.delFlag == true){     
+            // if(((k==15)||(k==16)||(k==17))){
+            //     this.tabelObj.column( k ).visible( true );        
+            // }
+            // if(((k==13)||(k==14))){
+            //     this.tabelObj.column( k ).visible( false );        
+            // }
+
+             this.tabelObj.column( 8 ).visible( false );          
+            if((k== 9) || (k== 10)){
+                this.tabelObj.column( k ).visible( true );
+            }
+        }else{
+      
+            this.tabelObj.column( 8 ).visible( true );          
+            if((k== 9) || (k== 10)){
+                this.tabelObj.column( k ).visible( false );
+            }
+        }
+    }
+}
+}
+
+tab:any;
+exportExcel()
+{
+
+    var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
+    var textRange; var j=0;
+    var table = $('#userTable').clone();
+    table[0].querySelector("thead").remove();
+    table[0].prepend($(".dataTable thead").clone()[0]);
+    this.tab = table[0];//document.getElementById('deviceTable'); // id of table
+
+    for(j = 0 ; j < this.tab.rows.length ; j++) 
+    {     
+        tab_text=tab_text+this.tab.rows[j].innerHTML+"</tr>";
+      
+    }
+
+    tab_text=tab_text+"</table>";
+   
+    tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
+
+    var ua = window.navigator.userAgent;
+    var msie = ua.indexOf("MSIE "); 
+
+    var sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
+
+    return (sa);
+}
+
+getReport(event){
+
+  
+  console.log("inside function",event);
+  if(event == 'getExcel'){
+    this.exportExcel();
+  }else{
+    var deviceId: any;
+    var tpdata = event ; 
+    var that = this;
+    var fd = new Date(tpdata.fromDate);
+    var td  = new Date(tpdata.toDate);
+  
+    if(event.deletedUser === true){
+      that.showDeleted = true;
+    }
+
+    if(event.userId != undefined){
+      this.userSelect1 = event.userId[0];
+
+    }
+    this.Fromdate = fd;
+    this.todate = td;
+     this.tabelObj.ajax.reload();  
+   
+  }
+ 
+}
+
+}
diff --git a/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.html b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.html
new file mode 100644
index 0000000..aad6c71
--- /dev/null
+++ b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.html
@@ -0,0 +1,106 @@
+<div class="container">
+  <div class="row" style="padding-bottom: 10px;">
+    <div class="col-12">
+        <p style="text-align: center; font-size: 20px;background: #2f4f60; color: white;">{{'ADD EXPENSE' | translate}}</p>
+    </div>
+  </div>
+  <div class="row" style="margin: 0px;margin-bottom: 15px;">
+    <div class="col-6" style="padding-top:0px;">
+      <p style="margin-bottom: 0;">{{'Select Vehicle'|translate}}</p>
+      <select id="dbselect_add" multiple="multiple">
+        <option *ngFor="let option_1 of options" [value]="option_1.selectedValue">{{ option_1.value }}</option>
+      </select>
+    </div>
+    <div class="col-6">
+      <p style="margin-bottom: 0;">{{'Select Date' | translate}}</p>
+      <input id="from_date" bsDatepicker class="form-control form-control-sm" style="height: 25px;" [bsConfig]="bsConfig"  [(ngModel)]="from_date" type="text" >
+    </div>
+  </div>
+  <div class="row" style="margin: 0px;">
+    <div class="col-6" style="padding-top:18px;">
+        <input type="number" style="height:25px" min=0 class="form-control" [(ngModel)]="totalExpense" id="totalExpense" aria-describedby="emailHelp" placeholder="{{'Enter Amount' | translate}}">
+    </div>
+    <div class="col-6">
+        <md-input-container style="display: inline;" class="example-full-width width"> 
+            <input mdInput  [mdAutocomplete]="tdAutoedit" name="state" #state="ngModel" [(ngModel)]="optiondefault" (ngModelChange)="filterStates(optiondefault)">
+           <md-autocomplete #tdAutoedit="mdAutocomplete">
+              <md-option *ngFor="let option of dataSelect" [value]="option.country">
+                <span>{{ option.country }}</span>
+              </md-option>
+            </md-autocomplete>   
+          </md-input-container>
+    </div>
+  </div>
+  <div class="row" style="margin: 0px;">
+    <div class="col-6">
+      <!-- <div class="row"> -->
+        <!-- <div class="col-4"> -->
+          <!-- <p>Payment Mode :</p> -->
+        <!-- </div> -->
+        <!-- <div class="col-8"> -->
+            <md-select  style="display: inherit;" [(ngModel)]="prepaymentVal" placeholder="--{{'Payment Mode' | translate}}--"  ngDefaultControl>
+                <md-option *ngFor="let payment of paymentMethod" [value]="payment.value">
+                  {{payment.viewValue}}
+                </md-option>
+              </md-select>
+        <!-- </div> -->
+      <!-- </div> -->
+     
+    </div>
+    <div class="col-6">
+        <!-- <div class="row"> -->
+            <!-- <div class="col-4"> -->
+              <!-- <p>Expense Type :</p> -->
+            <!-- </div> -->
+            <!-- <div class="col-8"> -->
+                <md-select  [(ngModel)]="expenseVal" style="display: inherit" placeholder="--{{'Expense type' | translate}}--"  ngDefaultControl>
+                    <md-option *ngFor="let expense of expenseType" [value]="expense.value">
+                      {{expense.viewValue}}
+                    </md-option>
+                  </md-select>
+            <!-- </div> -->
+          <!-- </div> -->
+    </div>
+  </div>
+  <div clas="row" style="margin-top: 30px; text-align: center;">
+    <div class="col-12">
+        <button md-raised-button style="background: #31428c; color: white;" (click)="saveExpense()">{{'SAVE' | translate}}</button>
+        <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'CLOSE' | translate}}</button>
+    </div>     
+  </div>
+  <!-- <div class="row" style="padding-top: 40px;" >
+    <div class= "col-12">
+      <p *ngIf="showError" style="text-align: center; color: red; font-size: 15px;">{{errorMsg}}</p>
+      <div style="margin-bottom: 15px; font-weight: 600;">
+        <span>{{'Total Expense' | translate }} :</span><span style="margin-left: 30px; font-weight: 600;">INR</span><span style="margin-left: 10px; font-weight: 600;">{{expenseTotal}}</span>
+      </div>
+    
+        <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+          overflow-x: hidden;font-size:12px">
+          <thead>
+            <tr>
+              <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+              <th style="text-align:center">{{'Amount' | translate}}</th>
+              <th style="text-align:center">{{'Currency' | translate}}</th>
+              <th style="text-align:center">{{'Payment Mode' | translate}}</th>
+              <th style="text-align:center">{{'Expense type' | translate}}</th>
+          </thead>
+          <tbody>
+            <tr *ngFor="let expObj of expenseArr">
+              <td style="text-align: center">{{(expObj.vehicle != null)?expObj.vehicle.Device_Name : "NA"}}</td>
+              <td style="text-align: center">{{expObj.amount ? expObj.amount : "0"}}</td>
+              <td style="text-align: center">{{expObj.currency}}</td>
+              <td style="text-align: center">{{expObj.payment_mode}}</td>
+              <td style="text-align: center">{{expObj.type}}</td>
+              <td style="text-align: center;cursor:pointer">
+                  <div>
+                      <i class="fas fa-trash-alt" (click)="delete(expObj)" style="font-size: 20px;color: #2e3e84;cursor: pointer"></i>
+                    </div>  
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+    </div>
+  </div> -->
+</div>
diff --git a/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.scss b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.spec.ts b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.spec.ts
new file mode 100644
index 0000000..fa7d46c
--- /dev/null
+++ b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddVehicleExpensesComponent } from './add-vehicle-expenses.component';
+
+describe('AddVehicleExpensesComponent', () => {
+  let component: AddVehicleExpensesComponent;
+  let fixture: ComponentFixture<AddVehicleExpensesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddVehicleExpensesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddVehicleExpensesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.ts b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.ts
new file mode 100644
index 0000000..301ae88
--- /dev/null
+++ b/src/app/vehicle-expenses/add-vehicle-expenses/add-vehicle-expenses.component.ts
@@ -0,0 +1,420 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+declare var $
+
+@Component({
+  selector: 'app-add-vehicle-expenses',
+  templateUrl: './add-vehicle-expenses.component.html',
+  styleUrls: ['./add-vehicle-expenses.component.scss']
+})
+export class AddVehicleExpensesComponent implements OnInit {
+  Load :boolean  = false;
+  totalExpense:any;
+  optiondefault:any;
+  from_date :any;
+
+  expenseType=[
+    { "value" : "FOOD EXP.", "viewValue" : "FOOD EXP." },
+    { "value" : "POLICE/TRO", "viewValue" : "POLICE/TRO" }, 
+    { "value" : "PETTA", "viewValue" : "PETTA" }, 
+    { "value" : "TELEPHONE", "viewValue" : "TELEPHONE" },
+     { "value" : "TOLE", "viewValue" : "TOLE" }, 
+    { "value" : "TRAVELLING", "viewValue" : "TRAVELLING" }, 
+    { "value" : "MISCE EXP.", "viewValue" : "MISCE EXP." } ,
+    { "value" : "FUEL", "viewValue" : "FUEL" } ,
+    { "value" : "TYRE", "viewValue" : "TYRE" } ,
+    { "value" : "WORKSHOP", "viewValue" : "WORKSHOP" } ,
+    { "value" : "SPARES", "viewValue" : "SPARES" } ,
+    { "value" : "ROOMRENT", "viewValue" : "ROOMRENT" } ,
+    { "value" : "PERMIT", "viewValue" : "PERMIT" } ,
+    { "value" : "DONATION", "viewValue" : "DONATION" } 
+   ];
+   paymentMethod = [
+     {"value": "CASH","viewValue":"CASH"},
+     {"value": "CHEQUE","viewValue":"CHEQUE"},
+     {"value": "ONLINE","viewValue":"ONLINE"},
+     {"value": "OTHER","viewValue":"OTHER"}
+   ]
+  
+   prepaymentVal:any;
+   expenseVal:any;
+  options: any;
+  devicesss: any;
+  finall: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  superAdmin: any;
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(public dialogRef: MdDialogRef<AddVehicleExpensesComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,) { 
+     var that = this; 
+     this.from_date = new Date();
+    //  var script = document.createElement("script");
+    //  script.setAttribute("type", "text/javascript");
+    //  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+    //  document.getElementsByTagName("head")[0].appendChild(script);
+
+  }
+
+
+
+  
+
+  ngOnInit() { 
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+ 
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+  
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+
+    this.getCurrencies();
+
+      this.loadDropDown();
+      this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+        data => {
+          this.devicesss = data
+       
+          this.finall = (this.devicesss.devices);
+          this.options = [];
+
+          for(let i=0;i<this.devicesss.devices.length;i++){
+  
+            // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+              let a ={
+                value : this.devicesss.devices[i].Device_Name,
+                viewValue:this.devicesss.devices[i].Device_Name,
+                did:this.devicesss.devices[i].Device_ID,
+                id:this.devicesss.devices[i]._id,
+                user:this.devicesss.devices[i].user,
+                // email: this.devicesss.devices[i].Email_ID,
+                // deviceType: this.devicesss.devices[i].type_of_device,      
+              }
+              a['selectedValue'] = this.devicesss.devices[i]._id ; 
+            
+              this.options.push(a);
+            // }
+            if(i === (this.devicesss.devices.length -1)){
+              this.loadDropDown()
+            }
+          }
+
+       
+      
+
+        
+            // console.log("ignition option",this.options);
+            let that = this;
+            // setTimeout(()=>{ 
+            // },100)  
+        
+        });
+
+        this.getLanguage();
+      
+
+    
+
+  }
+
+
+  loadDropDown(){
+    setTimeout(() => {
+      $('#dbselect_add').multipleSelect({
+        width: 280,
+        placeholder: 'Select Vehicle',
+        filter: true,
+        single: true,
+        selectAll: false
+ 
+      })
+  
+    //  that.showLoader = false;
+    }, 100);
+  }
+  cancel(){
+    this.dialogRef.close('cancel');
+  }
+
+  saveExpense(){
+    console.log('this.optiondefault',this.optiondefault);
+    let did =  $('#dbselect_add').multipleSelect('getSelects','value');
+
+
+   if((did.length === 0)||(this.totalExpense == undefined)||(this.prepaymentVal == undefined)||(this.expenseVal == undefined)){
+     console.log("Error")
+   }else{
+    var dt = new Date(this.from_date) ; 
+    var payload = {
+      user : this.useridd,
+      vehicle  : did[0],
+      currency : this.optiondefault , 
+      payment_mode : this.prepaymentVal,
+      amount : this.totalExpense,
+      type : this.expenseVal,
+      date : dt.toISOString()
+
+    }
+    this.contactService.addExpenses(payload).subscribe(res=>{
+     console.log('resresresresresresresres=>',res);
+      let resMsg = res.message;      
+       if(resMsg === "added Successfully"){
+         this.dialogRef.close('success');
+       }
+    },err=>{
+      console.log(err);
+    })
+   }
+ 
+  }
+
+  getCurrencies(){
+    this.currency = [];
+    // this.contactService.getCurrencies().subscribe(res=>{   
+      var currencyObj = this.currencyJson;  
+        console.log('currencyObj',currencyObj);
+      for(var i in currencyObj){
+        if(this.data.currency != undefined){
+          var devicecurr = this.data.currency ; 
+          if(i == devicecurr){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+
+        }else{
+          if(i == 'INR'){    
+            this.optiondefault = i+ '-' +  currencyObj[i];
+           }
+        }
+    
+      var tempObj = {
+        currencyVal : i,
+        country       : i+ '-' +  currencyObj[i]
+      }
+        this.currency.push(tempObj);
+      }
+    
+      console.log(this.currency);
+      // this.loadropdown();
+    // })
+  }
+
+
+  dataSelect=[];
+  currency = [];
+  filterStates(val) {
+    console.log(val)
+    // console.log(this.dummyuserData)
+    if (val) {
+      const filterValue: any = val;
+      console.log(this.currency);
+      this.dataSelect = this.currency.filter(function (d) {
+              console.log("inside Search Method=>",d);
+        return d.country.toLocaleLowerCase().indexOf(filterValue.toLocaleLowerCase()) > -1;
+      });
+      return this.dataSelect;
+    }
+    // console.log("searched user=>",this.dataSelect);
+  }
+
+  getLanguage(){
+    var that = this;
+  var Var = { uid: this.useridd };
+   this.contactService.getLanguages(Var).subscribe(res=>{
+     var currencyfiltered = this.currency.filter(d=>{
+       if(res.currency_code != undefined){
+        if(d.currencyVal === res.currency_code){
+          return d.country;
+        }
+       }else{
+         if(d.currencyVal === 'INR'){
+          return d.country;
+         }
+       }
+     })
+     this.optiondefault = currencyfiltered[0].country;
+    },err=>{
+     console.log(err);
+   })
+  
+  }
+
+
+  currencyJson = {
+    "AED": "United Arab Emirates Dirham",
+    "AFN": "Afghan Afghani",
+    "ALL": "Albanian Lek",
+    "AMD": "Armenian Dram",
+    "ANG": "Netherlands Antillean Guilder",
+    "AOA": "Angolan Kwanza",
+    "ARS": "Argentine Peso",
+    "AUD": "Australian Dollar",
+    "AWG": "Aruban Florin",
+    "AZN": "Azerbaijani Manat",
+    "BAM": "Bosnia-Herzegovina Convertible Mark",
+    "BBD": "Barbadian Dollar",
+    "BDT": "Bangladeshi Taka",
+    "BGN": "Bulgarian Lev",
+    "BHD": "Bahraini Dinar",
+    "BIF": "Burundian Franc",
+    "BMD": "Bermudan Dollar",
+    "BND": "Brunei Dollar",
+    "BOB": "Bolivian Boliviano",
+    "BRL": "Brazilian Real",
+    "BSD": "Bahamian Dollar",
+    "BTC": "Bitcoin",
+    "BTN": "Bhutanese Ngultrum",
+    "BWP": "Botswanan Pula",
+    "BYN": "Belarusian Ruble",
+    "BZD": "Belize Dollar",
+    "CAD": "Canadian Dollar",
+    "CDF": "Congolese Franc",
+    "CHF": "Swiss Franc",
+    "CLF": "Chilean Unit of Account (UF)",
+    "CLP": "Chilean Peso",
+    "CNH": "Chinese Yuan (Offshore)",
+    "CNY": "Chinese Yuan",
+    "COP": "Colombian Peso",
+    "CRC": "Costa Rican Colón",
+    "CUC": "Cuban Convertible Peso",
+    "CUP": "Cuban Peso",
+    "CVE": "Cape Verdean Escudo",
+    "CZK": "Czech Republic Koruna",
+    "DJF": "Djiboutian Franc",
+    "DKK": "Danish Krone",
+    "DOP": "Dominican Peso",
+    "DZD": "Algerian Dinar",
+    "EGP": "Egyptian Pound",
+    "ERN": "Eritrean Nakfa",
+    "ETB": "Ethiopian Birr",
+    "EUR": "Euro",
+    "FJD": "Fijian Dollar",
+    "FKP": "Falkland Islands Pound",
+    "GBP": "British Pound Sterling",
+    "GEL": "Georgian Lari",
+    "GGP": "Guernsey Pound",
+    "GHS": "Ghanaian Cedi",
+    "GIP": "Gibraltar Pound",
+    "GMD": "Gambian Dalasi",
+    "GNF": "Guinean Franc",
+    "GTQ": "Guatemalan Quetzal",
+    "GYD": "Guyanaese Dollar",
+    "HKD": "Hong Kong Dollar",
+    "HNL": "Honduran Lempira",
+    "HRK": "Croatian Kuna",
+    "HTG": "Haitian Gourde",
+    "HUF": "Hungarian Forint",
+    "IDR": "Indonesian Rupiah",
+    "ILS": "Israeli New Sheqel",
+    "IMP": "Manx pound",
+    "INR": "Indian Rupee",
+    "IQD": "Iraqi Dinar",
+    "IRR": "Iranian Rial",
+    "ISK": "Icelandic Króna",
+    "JEP": "Jersey Pound",
+    "JMD": "Jamaican Dollar",
+    "JOD": "Jordanian Dinar",
+    "JPY": "Japanese Yen",
+    "KES": "Kenyan Shilling",
+    "KGS": "Kyrgystani Som",
+    "KHR": "Cambodian Riel",
+    "KMF": "Comorian Franc",
+    "KPW": "North Korean Won",
+    "KRW": "South Korean Won",
+    "KWD": "Kuwaiti Dinar",
+    "KYD": "Cayman Islands Dollar",
+    "KZT": "Kazakhstani Tenge",
+    "LAK": "Laotian Kip",
+    "LBP": "Lebanese Pound",
+    "LKR": "Sri Lankan Rupee",
+    "LRD": "Liberian Dollar",
+    "LSL": "Lesotho Loti",
+    "LYD": "Libyan Dinar",
+    "MAD": "Moroccan Dirham",
+    "MDL": "Moldovan Leu",
+    "MGA": "Malagasy Ariary",
+    "MKD": "Macedonian Denar",
+    "MMK": "Myanma Kyat",
+    "MNT": "Mongolian Tugrik",
+    "MOP": "Macanese Pataca",
+    "MRO": "Mauritanian Ouguiya (pre-2018)",
+    "MRU": "Mauritanian Ouguiya",
+    "MUR": "Mauritian Rupee",
+    "MVR": "Maldivian Rufiyaa",
+    "MWK": "Malawian Kwacha",
+    "MXN": "Mexican Peso",
+    "MYR": "Malaysian Ringgit",
+    "MZN": "Mozambican Metical",
+    "NAD": "Namibian Dollar",
+    "NGN": "Nigerian Naira",
+    "NIO": "Nicaraguan Córdoba",
+    "NOK": "Norwegian Krone",
+    "NPR": "Nepalese Rupee",
+    "NZD": "New Zealand Dollar",
+    "OMR": "Omani Rial",
+    "PAB": "Panamanian Balboa",
+    "PEN": "Peruvian Nuevo Sol",
+    "PGK": "Papua New Guinean Kina",
+    "PHP": "Philippine Peso",
+    "PKR": "Pakistani Rupee",
+    "PLN": "Polish Zloty",
+    "PYG": "Paraguayan Guarani",
+    "QAR": "Qatari Rial",
+    "RON": "Romanian Leu",
+    "RSD": "Serbian Dinar",
+    "RUB": "Russian Ruble",
+    "RWF": "Rwandan Franc",
+    "SAR": "Saudi Riyal",
+    "SBD": "Solomon Islands Dollar",
+    "SCR": "Seychellois Rupee",
+    "SDG": "Sudanese Pound",
+    "SEK": "Swedish Krona",
+    "SGD": "Singapore Dollar",
+    "SHP": "Saint Helena Pound",
+    "SLL": "Sierra Leonean Leone",
+    "SOS": "Somali Shilling",
+    "SRD": "Surinamese Dollar",
+    "SSP": "South Sudanese Pound",
+    "STD": "São Tomé and Príncipe Dobra (pre-2018)",
+    "STN": "São Tomé and Príncipe Dobra",
+    "SVC": "Salvadoran Colón",
+    "SYP": "Syrian Pound",
+    "SZL": "Swazi Lilangeni",
+    "THB": "Thai Baht",
+    "TJS": "Tajikistani Somoni",
+    "TMT": "Turkmenistani Manat",
+    "TND": "Tunisian Dinar",
+    "TOP": "Tongan Pa'anga",
+    "TRY": "Turkish Lira",
+    "TTD": "Trinidad and Tobago Dollar",
+    "TWD": "New Taiwan Dollar",
+    "TZS": "Tanzanian Shilling",
+    "UAH": "Ukrainian Hryvnia",
+    "UGX": "Ugandan Shilling",
+    "USD": "United States Dollar",
+    "UYU": "Uruguayan Peso",
+    "UZS": "Uzbekistan Som",
+    "VEF": "Venezuelan Bolívar Fuerte (Old)",
+    "VES": "Venezuelan Bolívar Soberano",
+    "VND": "Vietnamese Dong",
+    "VUV": "Vanuatu Vatu",
+    "WST": "Samoan Tala",
+    "XAF": "CFA Franc BEAC",
+    "XAG": "Silver Ounce",
+    "XAU": "Gold Ounce",
+    "XCD": "East Caribbean Dollar",
+    "XDR": "Special Drawing Rights",
+    "XOF": "CFA Franc BCEAO",
+    "XPD": "Palladium Ounce",
+    "XPF": "CFP Franc",
+    "XPT": "Platinum Ounce",
+    "YER": "Yemeni Rial",
+    "ZAR": "South African Rand",
+    "ZMW": "Zambian Kwacha",
+    "ZWL": "Zimbabwean Dollar"
+  }
+
+}
diff --git a/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.html b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.html
new file mode 100644
index 0000000..dc77cb9
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.html
@@ -0,0 +1,25 @@
+<div class="container">
+  <div style="font-size: 12px;margin-left: 5px; margin-right: 5px;background: white; box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);">
+    <table id="myTable1" class="table table-striped table-hover">
+      <thead style="background: #426E86; color: white;">
+        <tr>
+          <th>{{'Amount' | translate}}</th>
+          <th>{{'Payment Mode' | translate}}</th>
+          <th>{{"Type" | translate}}</th>
+          <th>{{'Date' | translate}}</th>
+       
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let expense of expenseData">
+          <td>{{expense.amount?expense.amount : '0.0'}}</td>
+          <td>{{expense.payment_mode?expense.payment_mode:''}}</td>
+          <td>{{expense.type ? expense.type : ''}}</td>
+          <td>{{expense.Date?(expense.Date | date : 'short'):'NA'}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+
+</div>
\ No newline at end of file
diff --git a/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.scss b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.spec.ts b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.spec.ts
new file mode 100644
index 0000000..8589010
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleExpenseDetailComponent } from './vehicle-expense-detail.component';
+
+describe('VehicleExpenseDetailComponent', () => {
+  let component: VehicleExpenseDetailComponent;
+  let fixture: ComponentFixture<VehicleExpenseDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VehicleExpenseDetailComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VehicleExpenseDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.ts b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.ts
new file mode 100644
index 0000000..de1901a
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expense-detail/vehicle-expense-detail.component.ts
@@ -0,0 +1,42 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+
+@Component({
+  selector: 'app-vehicle-expense-detail',
+  templateUrl: './vehicle-expense-detail.component.html',
+  styleUrls: ['./vehicle-expense-detail.component.scss']
+})
+export class VehicleExpenseDetailComponent implements OnInit {
+  payloadObj: any;
+
+  constructor(public dialogRef: MdDialogRef<VehicleExpenseDetailComponent>,@Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService) { 
+
+    this.payloadObj  = this.data ;
+    console.log("this.payloadObj",this.payloadObj); 
+  }
+
+  ngOnInit() {
+    this.getDetailedExpense()
+  }
+
+
+  expenseData = [];
+  getDetailedExpense(){
+    this.expenseData = [];
+    var pld = {
+      user : this.payloadObj.user,
+      type : this.payloadObj._id,
+      fdate :this.payloadObj.fromDate,
+      tdate : this.payloadObj.toDate,
+      vehicle: this.payloadObj.vehicle,
+    };
+    this.contactService.getDetailedExpense(pld).subscribe(res=>{
+      this.expenseData = res;
+      console.log('this.expenseData=>',this.expenseData);
+    },err=>{
+      console.log(err);
+    })
+  }
+
+}
diff --git a/src/app/vehicle-expenses/vehicle-expenses.component.html b/src/app/vehicle-expenses/vehicle-expenses.component.html
new file mode 100644
index 0000000..9982ff1
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expenses.component.html
@@ -0,0 +1,51 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <!-- <button style="background-color: #f9f6f6; font-size: 10px; color: black; float: left; margin-left: 10px;" md-raised-button (click)="addexpense()">{{'ADD EXPENSE' | translate}}</button> -->
+      <i class="fas fa-plus-circle" (click)="addexpense()" title="ADD EXPENSE" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Vehicle Expenses' | translate}}</h4>
+    </div>
+  </div>  
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;padding-right: 15px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+          <div style="width: 100%;height:84vh;">
+            <div class="row" style="margin: 0px;">
+              <div class="col-sm-3 col-md-3 col-lg-3" *ngFor = "let Etype of expenseType" style="height : 160px;padding-right: 0; max-height:160px;margin: 0px;">
+               <div class="row" style="margin: 0px;cursor: pointer;"  title="Get expense details" (click)="VehDetail(Etype)" > 
+                 <div class="col-12"  style="margin: 0px;background: #e4dfdf;height: 150px;padding: 0;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);">
+                  <div style="background: #868e96; text-align: center; color: white; padding-top: 5px; padding-bottom: 5px;">
+                    {{Etype._id}}  
+                  </div>
+                  <div style="font-size: 30px; text-align: center; padding-top: 25px;">
+                    <span style="font-size: 20px;">{{currency_code}}</span>
+                    <span>{{Etype.total}}</span>         
+                  </div>
+                  <div style="float: right;float: right; padding-right: 10px;">
+                    <!-- <i class="fas fa-utensils" style="font-size: 40px;"></i> -->
+                    <div *ngIf="getIcon(Etype._id) ">
+                      <img style="width: 40px;" src={{iconType}}>
+                    </div>
+                    <!-- <img style="width: 40px;" src=getIcon()> -->
+                  </div>
+                 </div>
+               </div>      
+              </div>
+            </div> 
+          </div>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
diff --git a/src/app/vehicle-expenses/vehicle-expenses.component.scss b/src/app/vehicle-expenses/vehicle-expenses.component.scss
new file mode 100644
index 0000000..e980949
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expenses.component.scss
@@ -0,0 +1,90 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
+
+
+    #toast {
+      visibility: hidden;
+      max-width: 150px;
+      height: 50px;
+      /*margin-left: -125px;*/
+      margin: auto;
+      background-color: #333;
+      color: #fff;
+      text-align: center;
+      border-radius: 2px;
+  
+      position: fixed;
+      z-index: 1;
+      left: 60%;right:0;
+      bottom: 80%;
+      font-size: 13px;
+      white-space: nowrap;
+  }
+  #toast #img{
+    width: 150px;
+    height: 50px;
+      
+      float: left;
+      
+      padding-top: 16px;
+      padding-bottom: 16px;
+      
+      box-sizing: border-box;
+  
+      
+      background-color: #111;
+      color: #fff;
+  }
+  #toast #desc{
+  
+      
+      color: #fff;
+     
+      padding: 16px;
+      
+      overflow: hidden;
+    white-space: nowrap;
+  }
+  
+  #toast.show {
+      visibility: visible;
+      -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+      animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+  }
\ No newline at end of file
diff --git a/src/app/vehicle-expenses/vehicle-expenses.component.spec.ts b/src/app/vehicle-expenses/vehicle-expenses.component.spec.ts
new file mode 100644
index 0000000..04388f9
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expenses.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleExpensesComponent } from './vehicle-expenses.component';
+
+describe('VehicleExpensesComponent', () => {
+  let component: VehicleExpensesComponent;
+  let fixture: ComponentFixture<VehicleExpensesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VehicleExpensesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VehicleExpensesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-expenses/vehicle-expenses.component.ts b/src/app/vehicle-expenses/vehicle-expenses.component.ts
new file mode 100644
index 0000000..8851873
--- /dev/null
+++ b/src/app/vehicle-expenses/vehicle-expenses.component.ts
@@ -0,0 +1,248 @@
+import { Component, OnInit } from '@angular/core';
+import { ExpenseComponentComponent } from '../device-report/trip-by-device/expense-component/expense-component.component';
+import { MdDialog, MdSnackBar } from '@angular/material';
+import { AddVehicleExpensesComponent } from './add-vehicle-expenses/add-vehicle-expenses.component';
+import { ContactService } from '../contact.service';
+import { VehicleExpenseDetailComponent } from './vehicle-expense-detail/vehicle-expense-detail.component';
+
+@Component({
+  selector: 'app-vehicle-expenses',
+  templateUrl: './vehicle-expenses.component.html',
+  styleUrls: ['./vehicle-expenses.component.scss']
+})
+export class VehicleExpensesComponent implements OnInit {
+  Load : boolean = false;
+  identifier : String = "vehicle_expenses";
+  // this.gsmURL = "";
+  expenseType  =[
+    // { "type" : "FOOD EXP.", "viewValue" : "FOOD EXP.", "icon" : '../../assets/images/expenseComp/fork.png',showList : false ,"amount" : 200},
+    // { "type" : "POLICE/TRO", "viewValue" : "POLICE/TRO" , "icon" : '../../assets/images/expenseComp/policeman.png',showList : true ,"amount" : 100 }, 
+    // { "type" : "PETTA", "viewValue" : "PETTA","icon" : '',showList : false , "amount" : 200 }, 
+    // { "type" : "TELEPHONE", "viewValue" : "TELEPHONE", "icon" : '../../assets/images/expenseComp/phone.png',showList : false , "amount" : 150},
+    //  { "type" : "TOLE", "viewValue" : "TOLE" ,"icon" : '../../assets/images/expenseComp/toll-road.png',showList : false ,"amount" : 250}, 
+    // { "type" : "TRAVELLING", "viewValue" : "TRAVELLING", "icon" : '../../assets/images/expenseComp/plane.png',showList : false , "amount" : 100}, 
+    // { "type" : "MISCE EXP.", "viewValue" : "MISCE EXP." , "icon" : '../../assets/images/expenseComp/order.png',showList : true , "amount" : 250} ,
+    // { "type" : "FUEL", "viewValue" : "FUEL" , "icon" : '../../assets/images/expenseComp/fuel.png' ,showList : false ,"amount" : 250} ,
+    // { "type" : "TYRE", "viewValue" : "TYRE"  ,"icon" : '../../assets/images/expenseComp/wheel.png' ,showList : false , "amount" : 200} ,
+    // { "type" : "WORKSHOP", "viewValue" : "WORKSHOP" , "icon" : '../../assets/images/expenseComp/workshop.png',showList : true ,"amount" : 200} ,
+    // { "type" : "SPARES", "viewValue" : "SPARES" , "icon" : '../../assets/images/expenseComp/automotive.png',showList : false ,"amount" : 200} ,
+    // { "type" : "ROOMRENT", "viewValue" : "ROOMRENT" ,"icon" : '../../assets/images/expenseComp/bed.png',showList : false , "amount" : 200} ,
+    // { "type" : "PERMIT", "viewValue" : "PERMIT" , "icon" : '../../assets/images/expenseComp/permit.png',showList : false ,"amount" : 200} ,
+    // { "type" : "DONATION", "viewValue" : "DONATION" , "icon" : '../../assets/images/expenseComp/cash.png',showList : false, "amount" : 200} 
+  ];
+  superAdmin: any;
+  emailid: any;
+  useridd: any;
+  custtype: any;
+  data_descip: string;
+
+  constructor(public dialog: MdDialog,public snackBar: MdSnackBar,private contactService: ContactService) { }
+
+  ngOnInit() {
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email; 
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;   
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.Fromdate.setHours(0,0,0,0);
+    this.getLanguage();
+  }
+
+  deviceArr = []; 
+  Fromdate = new Date() ; 
+  todate = new Date();
+
+  getReport(event){
+      var deviceId: any;
+      var tpdata = event ; 
+      var that = this;
+      var fd = new Date(tpdata.fromDate);
+      var td  = new Date(tpdata.toDate);
+      
+      if(event.deviceArr.length==0){
+        deviceId=[];
+      }else{
+        deviceId= event.deviceArr;
+      }
+      this.deviceArr = deviceId;        
+      this.Fromdate = fd;
+      this.todate = td;
+      this.getExpenses()
+  }
+
+
+
+  getExpenses(){
+   
+    if(this.deviceArr.length === 0){
+      this.data_descip = "Please Select Device";
+     return launch_toast()   ;
+    }
+
+    var getExpensesPayload = {
+      user : this.useridd,
+      fromDate:this.Fromdate.toISOString(),
+      toDate : this.todate.toISOString(),
+      vehicle : this.deviceArr[0]
+    }
+    console.log('getExpensesPayload',getExpensesPayload);
+    this.expenseType = [];
+    this.contactService.getExpensesbyCategory(getExpensesPayload).subscribe(res=>{
+      console.log('resresresresres=>',res.expenseobj);  
+      if((res.expenseobj === undefined)||(res.expenseobj.length == 0)){
+        this.data_descip = 'No Record Found' ; 
+        return launch_toast();
+      }else{ 
+        this.expenseType =  res.expenseobj ;
+        var total = 0
+        for(var i = 0 ; i <res.expenseobj.length;i++){
+          total += res.expenseobj[i]?parseFloat(res.expenseobj[i].total):0 ;
+        }
+        var addTotalObj = {
+          _id : 'TOTAL',
+          total : total
+        }
+        this.expenseType.push(addTotalObj);
+        console.log('this.expenseType',this.expenseType);
+      }
+    
+
+    },err=>{
+      this.data_descip = "Internal Server Error";
+      return launch_toast()   ;
+    })
+    // mainUrl + "expense/expensebycateogry?user=" + this.islogin._id + "&fdate=" + new Date(this.datetimeStart).toISOString() + "&tdate=" + new Date(this.datetimeEnd).toISOString() + "&vehicle=" + this._vehId._id;
+
+    function launch_toast() {
+      // console.log(divid);
+       var x = document.getElementById("toast")
+       //console.log(x);
+       x.className = "show";
+       setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+   }
+  }
+
+
+  addexpense(){
+    var  tripObject = {};
+      console.log('tripObject=>',tripObject);
+      let dialogRef = this.dialog.open(AddVehicleExpensesComponent, {
+        width : "700px",
+        data: tripObject
+      });
+    
+      dialogRef.afterClosed().subscribe(result => {
+        if(result == "success"){
+          this.data_descip ="Expense Added";
+          this.todate = new Date();
+          this.getExpenses();
+          
+          launch_toast() ; 
+     
+       
+        
+        }
+      });  
+
+      function launch_toast() {
+        // console.log(divid);
+         var x = document.getElementById("toast")
+         //console.log(x);
+         x.className = "show";
+         setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+     }
+    
+    
+  }
+
+  iconType:any;
+  getIcon(id){
+
+  
+    if(id === "FOOD EXP."){
+      this.iconType = '../../assets/images/expenseComp/fork.png';
+     
+
+    }else if(id === "POLICE/TRO"){
+      this.iconType = '../../assets/images/expenseComp/policeman.png';
+  
+
+    }else if(id === "PETTA"){
+      this.iconType = '../../assets/images/expenseComp/policeman.png';
+    
+
+    }else if(id=== "TELEPHONE"){
+      this.iconType = '../../assets/images/expenseComp/phone.png'; 
+      
+
+    }else if(id=== "TOLE"){
+      this.iconType = '../../assets/images/expenseComp/toll-road.png'; 
+
+    }else if(id === "TRAVELLING"){
+      this.iconType = '../../assets/images/expenseComp/plane.png'
+
+    }else if(id === "MISCE EXP."){
+      this.iconType = '../../assets/images/expenseComp/order.png'
+    }else if(id === "FUEL"){
+      this.iconType = '../../assets/images/expenseComp/fuel.png'
+    }else if(id === "TYRE"){
+      this.iconType = '../../assets/images/expenseComp/wheel.png'
+    }else if(id === "WORKSHOP"){
+      this.iconType = '../../assets/images/expenseComp/workshop.png'
+    }
+    else if(id === "SPARES"){
+      this.iconType = '../../assets/images/expenseComp/automotive.png'
+    }
+    else if(id === "ROOMRENT"){
+      this.iconType = '../../assets/images/expenseComp/bed.png'
+    }
+    else if(id === "PERMIT"){
+      this.iconType = '../../assets/images/expenseComp/permit.png'
+    }
+    else if(id === "DONATION"){
+      this.iconType = '../../assets/images/expenseComp/cash.png'
+    }else if(id === "TOTAL"){
+      this.iconType = '../../assets/images/expenseComp/money.png'
+    }else{
+      return '';
+    }
+    return this.iconType ;  
+  }
+
+  VehDetail(et){ 
+    et.fromDate= this.Fromdate.toISOString();
+    et.toDate = this.todate.toISOString();
+    et.user = this.useridd ; 
+    et.vehicle = this.deviceArr[0] ; 
+
+    console.log('ExpenseTypeDetail=>',et);
+    if(et._id != 'TOTAL'){
+      let dialogRef = this.dialog.open(VehicleExpenseDetailComponent, {
+        width : "700px",
+        data: et
+      });
+    
+      dialogRef.afterClosed().subscribe(result => {
+        if(result == "success"){
+          console.log("success");   
+        }
+      });  
+    }
+ 
+
+
+  }
+
+  currency_code:any='INR';
+  getLanguage(){
+    var that = this;
+  var Var = { uid: this.useridd };
+   this.contactService.getLanguages(Var).subscribe(res=>{
+    this.currency_code =  res.currency_code?res.currency_code:"INR";
+    },err=>{
+     console.log(err);
+   })
+  
+  }
+
+
+}
diff --git a/src/app/vehicle-reminder/add-reminder/add-reminder.component.html b/src/app/vehicle-reminder/add-reminder/add-reminder.component.html
new file mode 100644
index 0000000..08e03e8
--- /dev/null
+++ b/src/app/vehicle-reminder/add-reminder/add-reminder.component.html
@@ -0,0 +1,120 @@
+<div class="container" style="padding-top: 5%;">
+    
+    <div class="row" style="background: #5e669d; color: white; font-size: 20px; padding-top: 10px; padding-left: 30px;">
+      <div class="12">
+        <p>{{'REMINDER' | translate}}</p>
+      </div>
+    </div>
+    <div class="row" >
+      <div class="col-6">
+          <label style="width: inherit;margin-top: 11px;font-weight: 600; color: #727b84;">{{'Select Vehicle' | translate}}</label>
+          <!-- <div style="width: inherit; margin-top: 4px;text-align: left" *ngIf="vehicleOption">
+            <select id="select" multiple="multiple" style="text-align: left">
+              <option *ngFor="let option_1 of options" value={{option_1.id}}>{{ option_1.value }}</option>
+            </select>
+          </div> -->
+          <div style="width:inherit; margin-top: 4px;text-align: left">
+            <select id="select_1" multiple="multiple" style="text-align: left" >
+              <option *ngFor="let option_1 of options"  value={{option_1.id}} [selected] = "option_1.id === device_id">{{ option_1.value }}</option>
+            </select>
+          </div>
+      </div> 
+      <div class="col-6" style="padding-right: 8px;"  >
+          <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">Date</label>
+          <input id="reminder_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="reminder_date" [(ngModel)]="reminderDate" type="text">
+        </div>   
+    </div>
+
+    <div *ngIf="UpdateTemplate === false" class="row" style="padding-top: 20px;">
+      <div class="col-6">
+        <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">{{'Select no of Days to get reminder for your services' | translate}}</label>
+        <input [(ngModel)]="priorReminder" class="form-control form-control-sm" style="margin-top: 4px;width: 200px;"
+          name="minIdleTime" min="0" placeholder="00" type="number">
+      </div>
+      <div class="col-6">
+        <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">Set Target Odometer</label>
+        <!-- <label style="margin-right: 20px; font-size: 13px; font-weight: 500; color: #727b84;">Set Target Odometer</label> -->
+        <input [(ngModel)]="odometer" placeholder="00" style="margin-top: 4px;width: 200px;"
+          class="form-control form-control-sm">
+      </div>
+    </div>
+
+    <div *ngIf="UpdateTemplate === true" class="row" style="padding-top: 20px;">
+      <div class="col-6" style="display: inherit;">
+       <label style="margin-right: 20px; font-size: 13px; font-weight: 500; color: #727b84;">{{'Select no of Days to get reminder for your services' | translate}}</label>    
+      </div>
+      <div class="col-6" style="display: inherit;">
+          <input [(ngModel)]="priorReminder" class="form-control form-control-sm" style="width: 80px;height: 60%;" name="minIdleTime" min="0" placeholder="00"  type="number">
+      </div>
+    </div>
+    <div class="row" style="padding-top: 20px">
+        <div class="col-6">
+            <!-- <label style="width: inherit;margin-top: 11px;margin-left: 10px;">Reminder Type</label> -->
+            <md-select style="padding-top: 0;width: 70%;" [(ngModel)]="reminder" placeholder="--{{'Job type' | translate}}--"  ngDefaultControl>
+                <md-option *ngFor="let reminder of reminderType" [value]="reminder.viewValue">
+                  {{reminder.value}}
+                </md-option>
+              </md-select>  
+        </div> 
+        <!-- <div class="col-6">
+            <label style="width: inherit;margin-top: 11px; font-weight: 600; color: #727b84;">Notification Type</label>
+            <div class="btn-group btn-group-toggle" data-toggle="buttons" (click)="notitype($event)">
+                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option1"  > SMS </label>
+                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option2"   > PUSH NOTIFICATION </label>
+                <label class="btn btn-secondary  btn-default blue" > <input type="radio" name="options" id="option3"  > EMAIL </label>
+              </div>
+          </div>  -->
+          <div class="col-6">
+              <md-select [(ngModel)]="notificatinType" placeholder="--Notification type--" multiple style="padding-top:0px;width: 75%;"  ngDefaultControl>
+                  <md-option *ngFor="let notif of notifType" [value]="notif.value">
+                    {{notif.view}}
+                  </md-option>
+                </md-select>  
+          </div>      
+      </div>
+      <div class="row" *ngIf="UpdateTemplate === true" style="padding-top: 20px">
+        <div class="col-6" style="padding-top: 20px;">
+            <!-- <label style="width: inherit;margin-top: 11px;margin-left: 10px;">Reminder Type</label> -->
+            <md-select style="padding-top: 0;width: 70%;" [(ngModel)]="jobStatus" placeholder="--{{'Job status' | translate}}--"  ngDefaultControl>
+                <md-option *ngFor="let Jstatus of typeStatus" [value]="Jstatus.viewValue">
+                  {{Jstatus.value}}
+                </md-option>
+              </md-select>  
+        </div> 
+   
+          <div class="col-6">
+            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">{{'Updated On' | translate}}</label>
+            <input id="status_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="status_Change_date" [(ngModel)]="statusChangeDate" type="text">
+          </div>      
+      </div>
+      <div class="row" *ngIf="UpdateTemplate === true" style="padding-top: 20px">
+        <div class="col-6">
+            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">ODO</label>
+            <input [(ngModel)]="totalodo" class="form-control form-control-sm" name="odo" placeholder="00"  type="text">
+        </div> 
+   
+          <div class="col-6">
+            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">{{'Date of service' | translate}}</label>
+            <input id="date_of_service" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;width: 75%;" [bsConfig]="bsConfig" name="service_date" [(ngModel)]="date_of_service" type="text">
+          </div>      
+      </div>
+      <div class="row" *ngIf="UpdateTemplate === true">
+        <div class="col-6" >
+            <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;margin:0px">Performed By</label>
+            <input [(ngModel)]="performed_by" class="form-control form-control-sm" name="performed_by"  type="text">
+        </div> 
+      </div>
+      <div class="row"  >
+        <div class="col-12">
+          <label style="width: inherit; margin-top: 11px;font-weight: 600; color: #727b84;">{{'Additional Notes' | translate}}</label>
+          <textarea id="additional_notes" class="form-control form-control-sm"  name="additional notes" [(ngModel)]="additionalNote" type="text"></textarea>
+        </div>
+      </div>
+      <div class="row" style="margin-top: 40px; text-align: center;">
+        <div class="col-12">
+            <button *ngIf="UpdateTemplate === false" md-raised-button style="background: #31428c; color: white;" (click)="save()">{{'Save' | translate}}</button>
+            <button *ngIf="UpdateTemplate === true" md-raised-button style="background: #31428c; color: white;" (click)="updateReminder()">{{'Update' | translate}}</button>
+            <button md-raised-button style="background: #1d8216; color: white;" (click)="cancel()">{{'Cancel' | translate}}</button>
+        </div>
+         </div>
+  </div> 
\ No newline at end of file
diff --git a/src/app/vehicle-reminder/add-reminder/add-reminder.component.scss b/src/app/vehicle-reminder/add-reminder/add-reminder.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/vehicle-reminder/add-reminder/add-reminder.component.spec.ts b/src/app/vehicle-reminder/add-reminder/add-reminder.component.spec.ts
new file mode 100644
index 0000000..cf00456
--- /dev/null
+++ b/src/app/vehicle-reminder/add-reminder/add-reminder.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddReminderComponent } from './add-reminder.component';
+
+describe('AddReminderComponent', () => {
+  let component: AddReminderComponent;
+  let fixture: ComponentFixture<AddReminderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddReminderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddReminderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-reminder/add-reminder/add-reminder.component.ts b/src/app/vehicle-reminder/add-reminder/add-reminder.component.ts
new file mode 100644
index 0000000..6dedeac
--- /dev/null
+++ b/src/app/vehicle-reminder/add-reminder/add-reminder.component.ts
@@ -0,0 +1,340 @@
+import { Component, OnInit,Inject } from '@angular/core';
+import { MdDialogRef,MD_DIALOG_DATA, MdSnackBar } from '@angular/material';
+import { ContactService } from '../../contact.service';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+declare var $:any;
+
+@Component({
+  selector: 'app-add-reminder',
+  templateUrl: './add-reminder.component.html',
+  styleUrls: ['./add-reminder.component.scss']
+})
+export class AddReminderComponent implements OnInit {
+  useridd: any;
+  reminderDate = new Date();
+  bsConfig: Partial<BsDatepickerConfig>;
+  colorTheme = 'theme-dark-blue';
+  priorReminder:number=0;
+  device_id :any;
+  statusChangeDate : any = new Date() ; 
+  date_of_service:any=new Date();
+  totalodo:any=0;
+  odometer
+  jobStatus :any ; 
+  selectedDevice
+  typeStatus = [{viewValue:"Pending", value:"Pending"},{viewValue:"In Progress", value:"In Progress"},{viewValue:"Completed", value:"Completed"}]
+  reminderType :any=[
+{ viewValue:"Service", value:"Service", },
+{ viewValue:"Oil Change", value:"Oil Change", },
+{ viewValue:"Tyres", value:"Tyres", },
+{ viewValue:"Maintenance", value:"Maintenance", },
+{ viewValue:"Auto Repair", value:"Auto Repair" },
+{ viewValue:"Body Work", value:"Body Work" },
+{ viewValue:"Diagnostics", value:"Diagnostics" },
+{ viewValue:"Tune Up", value:"Tune Up" },
+{ viewValue:"Brake Job", value:"Brake Job" },
+{ viewValue:"Oil & Oil Filter Change", value:"Oil & Oil Filter Change" },
+{ viewValue:"Tire Care", value:"Tire Care" },
+{ viewValue:"Towing", value:"Towing" },
+{ viewValue:"Wheel balance & Alignment", value:"Wheel balance & Alignment" },
+{ viewValue:"Fleet", value:"Fleet" },
+{ viewValue:"Auto Tracking", value:"Auto Tracking" },
+{ viewValue:"A/C Repair", value:"A/C Repair" },
+{ viewValue:"Others", value:"Others", }
+]
+
+  notifType = [
+  {view:"SMS",value:"SMS"},{view:"EMAIL",value:"EMAIL"},{view:"PUSH NOTIFICATION",value:"PUSH_NOTIFICATION"}
+  ];
+  notificatinType:any;
+  emailid: any;
+  devicesss: any;
+
+
+  finall: any;
+  options :any=[];
+  vehicleOption:boolean=false;
+  reminder: any;
+  additionalNote:any;
+  deviceObject: any = [];
+  UpdateTemplate: boolean = false ;
+  performed_by: any;
+  vehicleName
+  constructor(public dialogRef: MdDialogRef<AddReminderComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService: ContactService,public snackBar: MdSnackBar) {
+
+      $('#select_1').hide();
+      this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme }); 
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;   
+      this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+
+
+      console.log('this.data',this.data);
+      if(this.data.identifier === 'edit'){
+        console.log('edit is working fine'); 
+        this.UpdateTemplate = true ; 
+        this.jobStatus = this.data.status ;   
+        this.reminderDate = (this.data.reminder_date)?new Date(this.data.reminder_date):new Date();
+        this.date_of_service = (this.data.date_of_service)?new Date(this.data.date_of_service):new Date();
+        this.priorReminder = this.data.prior_reminder ;
+        this.reminder = this.data.reminder_type ; 
+        this.performed_by= this.data.performed_by;
+        this.totalodo = this.data.odo ;
+        this.vehicleName=this.data.Device_Name
+        // this.notificatinType = this.data.notification_type ; 
+        this.additionalNote = this.data.note ;
+        this.device_id = this.data.device._id ;
+        console.log("this.device_id",this.device_id); 
+     
+ 
+
+        // notificatinType
+      
+
+      }
+
+     }
+
+  ngOnInit() {
+
+    this.getDevices();
+  }
+
+  getDevices(){
+    
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          }
+
+        // }
+     
+           console.log(this.options);
+           let that = this;
+           setTimeout(()=>{
+            // if(that.data.identifier === 'edit'){
+            //   that.device_id = that.data.device._id ;
+            // }
+          
+            that.loadropdown();
+          },100)  
+      });
+  
+    }
+
+    loadropdown() {
+      let that = this;
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+      setTimeout(() => {
+  
+        $('#select_1').multipleSelect({
+          width: 200,
+          placeholder: 'Select device.....',
+          filter: true,
+          single: true,
+          selectAll: false
+      
+        })
+       // $('#select').show();
+      }, 100);
+  
+  
+    }
+
+
+  testss:any;
+  deviceArr:any;
+  save(){
+    var that= this;
+  
+    this.deviceArr =  $('#select_1').multipleSelect('getSelects','value');
+    
+    console.log('this.deviceArr',this.deviceArr); 
+    that.deviceObject = that.options.filter(function(devobj) {
+        if(devobj.id == that.deviceArr[0]){    
+          return devobj;      
+        } 
+    })
+    for(var i=0;i<this.options.length;i++){
+      if(that.deviceArr[0]==this.options[i].id){
+        this.vehicleName=this.options[i].value
+      }
+    }
+   
+    console.log('this.options',this.options);
+    console.log('this.deviceObj=>',this.deviceObject);
+    console.log('this.deviceArr=>',this.deviceArr);
+     function showErr(msg){
+      let message1;
+      (msg=='nodevice')?message1="Please select device":(msg=='reminder')?message1="Please select reminder type":(msg=='notif')?message1="Please select notification type":''
+      let action:any;
+      return that.snackBar.open(message1, action, {
+        duration: 5000,
+      });   
+    }
+
+    (this.deviceArr.length==0)?showErr('nodevice'):(this.reminder==undefined)?showErr('reminder'):(this.notificatinType==undefined)?showErr('notif'):saveReminder();
+
+    function saveReminder(){
+      var notifObj={
+        "SMS" : false,
+        "EMAIL": false,
+        "PUSH_NOTIFICATION":false
+      };
+      for(var i=0;i<that.notificatinType.length;i++){
+        if(that.notificatinType[i]=="SMS"){
+          notifObj.SMS = true ; 
+        }else if(that.notificatinType[i]=="EMAIL"){
+          notifObj.EMAIL = true ;
+        }else{
+          notifObj.PUSH_NOTIFICATION = true; 
+        }
+      }
+   
+   
+
+      // that.reminderDate
+      var reminderPayload = {
+        created_by : that.useridd,
+        user : that.deviceObject[0].user,
+        device : that.deviceArr[0],
+        reminder_type : that.reminder,
+        notification_type : notifObj,
+        reminder_date:  that.reminderDate.toISOString(),
+        prior_reminder :that.priorReminder,
+        status :'Pending',
+        vehicleName:that.vehicleName
+      }
+      if(that.additionalNote != undefined){
+        reminderPayload['note'] = that.additionalNote ; 
+      }
+      if(that.odometer){
+        reminderPayload['odo'] = that.odometer ; 
+      }
+      console.log(reminderPayload);
+      that.contactService.savereminder(reminderPayload).subscribe(res=>{
+        if(res){
+          let msg = "Reminder set for the vehicle";
+          let action:any;
+           that.snackBar.open(msg, action, {
+            duration: 5000,
+          });  
+          that.dialogRef.close('reminder Saved');
+        }
+
+      },err=>{
+        let msg = "Please Try Again";
+        let action:any;
+        return that.snackBar.open(msg, action, {
+          duration: 5000,
+        });
+      })
+
+    }
+
+  }
+
+
+  updateReminder(){
+    this.deviceArr =  $('#select_1').multipleSelect('getSelects','value');
+    console.log(this.deviceArr,this.options,this.selectedDevice);
+    if(this.deviceArr){
+      for(var i=0;i<this.options.length;i++){
+       if(this.deviceArr[0]==this.options[i].id){
+         this.vehicleName=this.options[i].value
+       }
+      
+      }
+    }else{
+      for(var i=0;i<this.options.length;i++){
+       if(this.device_id==this.options[i].id){
+         this.vehicleName=this.options[i].value
+       }
+      //  this.device_id
+      }
+    }
+
+  
+    var data={
+      rid: this.data._id,
+      status : this.jobStatus,
+      status_changed_on : this.statusChangeDate.toISOString(),
+    };
+    if(this.deviceArr){
+      data['device']=this.deviceArr[0]
+    }else{
+      data['device']=this.device_id
+    }
+    if(this.vehicleName){
+      data['vehicleName']=this.vehicleName
+    }
+
+    if(this.priorReminder != undefined){
+    data['prior_reminder'] = this.priorReminder ;   
+    }
+
+
+    if(this.additionalNote != undefined){
+      data['note'] = this.additionalNote ;   
+      }
+
+      if(this.reminder != undefined){
+        data['reminder'] = this.reminder ;   
+      }
+      if(this.performed_by != undefined){
+        data['performed_by'] = this.performed_by ;   
+      }
+      if(this.totalodo != undefined){
+        data['odo'] = this.totalodo ;   
+      }
+      if(this.date_of_service != undefined){
+        var dos = new Date(this.date_of_service);
+        data['date_of_service'] = dos.toISOString() ;   
+      }
+    console.log(data);
+    
+    this.contactService.updateReminder(data).subscribe(res=>{
+      console.log(res);
+      if(res){
+        let msg = "Reminder Updated";
+        let action:any;
+         this.snackBar.open(msg, action, {
+          duration: 5000,
+        });  
+        this.dialogRef.close('Reminder updated');
+      }
+    },err=>{
+      let msg = "Please Try Again";
+      let action:any;
+      return this.snackBar.open(msg, action, {
+        duration: 5000,
+      });
+    })
+
+  }
+  cancel(){
+    this.dialogRef.close('cancel');
+  }
+
+}
diff --git a/src/app/vehicle-reminder/vehicle-reminder.component.html b/src/app/vehicle-reminder/vehicle-reminder.component.html
new file mode 100644
index 0000000..948e96c
--- /dev/null
+++ b/src/app/vehicle-reminder/vehicle-reminder.component.html
@@ -0,0 +1,60 @@
+<app-all-menus></app-all-menus>
+<div class="container-fluid" style="padding-top: 5%;">
+  <div class="headerStyle">
+    <span>{{'MAINTENANCE REMINDERS' | translate}}</span>
+    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
+  </div>
+  <div class="filterDiv">
+    <div class="row">
+      <div class="col-12" style="padding-left: 0;padding-right: 0">
+          <button  md-tooltip="Add Reminder" style="border:1px solid transparent;float:left; background-color: transparent;" (click)="reminderComponent()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>     
+      </div>
+    </div>
+    <div class="row" style="width: 100%; padding-bottom: 25px; background: #efefef;">
+      <div class="col-12" style="text-align: center;margin-top: 30px;">
+        <div style="display: inline-flex; width: 95%;padding-bottom: 3px;">
+            <!-- <label style="width: inherit;margin-top: 11px;margin-left: 10px;">Reminder Type</label> -->
+            <md-select style="padding-top: 0;width: 70%;" [(ngModel)]="reminder" placeholder="--{{'Job type' | translate}}--"  ngDefaultControl>
+                <md-option *ngFor="let reminder of reminderType" [value]="reminder.viewValue">
+                  {{reminder.value}}
+                </md-option>
+              </md-select>  
+          <label style="margin-top: 11px;width: inherit;">{{'Select Vehicle' | translate}}</label>
+          <div style="width: inherit; margin-top: 9px;text-align: left">
+            <select id="select" multiple="multiple" style="text-align: left">
+              <option *ngFor="let option_1 of options" value={{option_1.id}} >{{ option_1.value }}</option>
+            </select>
+          </div>
+          <label style="width: inherit;margin-top: 11px">{{'From Date' | translate}}</label>
+          <input id="from_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;"
+            [bsConfig]="bsConfig" [(ngModel)]="from_date" type="text">
+          <label style="width: inherit;margin-top: 11px">{{'To Date' | translate}}</label>
+          <input id="to_date" bsDatepicker class="form-control form-control-sm" style="margin-top: 4px;" [bsConfig]="bsConfig" name="todate" [(ngModel)]="to_date" type="text">
+          <button md-raised-button style="width: 190px; background: #31428c; color: white;margin-left: 20px;" (click)="callfunction()"> {{'SEARCH' | translate}} </button>    
+        </div>    
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+        <table id="deviceTable" class="display" cellspacing="0" style="width:100%;font-size:15px;text-align: center">
+            <thead style="background-color:#A2C523;color: white;">
+                <tr>
+                    <th style="text-align:center;">{{'Device Name' | translate}}</th>
+                    <th style="text-align:center;">{{'Reminder Date' | translate}}</th>
+                    <th style="text-align:center;">{{'Notification Type' | translate}}</th>
+                    <th style="text-align:center;">{{'Reminder Type' | translate}}</th>
+                    <th style="text-align:center;">{{'Prior Notification (Days)' | translate}}</th>    
+                    <th style="text-align:center;">{{'Odo' | translate}}</th>
+                    <th style="text-align:center;">{{'Additional notes' | translate}}</th>
+                    <th style="text-align:center;">{{'Status' | translate}}</th>
+                    <th style="text-align:center;">{{'Edit' | translate}}</th>
+                    <th style="text-align:center;">{{'Deleted' | translate}}</th>
+                </tr>
+            </thead>  
+        </table>
+    </div>
+
+    
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/vehicle-reminder/vehicle-reminder.component.scss b/src/app/vehicle-reminder/vehicle-reminder.component.scss
new file mode 100644
index 0000000..ceed4f8
--- /dev/null
+++ b/src/app/vehicle-reminder/vehicle-reminder.component.scss
@@ -0,0 +1,36 @@
+
+    .container-fluid .headerStyle{
+        text-align: center;
+        padding-bottom: 10px;
+        padding-top: 10px;
+        font-size: 20px;
+        font-weight: 500;
+        background: white;
+        color: black;
+        border-radius: 4px;
+    }
+
+
+  /deep/ .mat-menu-panel.test{
+   
+    background-color: #b7b7b7;
+    width: 160px;
+    text-align: left;
+    color: #fff;
+
+    a{
+      display: block;
+    padding: 9px 10px;
+    margin: 0;
+    border-bottom: 1px solid #999;
+    }
+}
+
+/deep/ .mat-menu-panel.test_1{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
\ No newline at end of file
diff --git a/src/app/vehicle-reminder/vehicle-reminder.component.spec.ts b/src/app/vehicle-reminder/vehicle-reminder.component.spec.ts
new file mode 100644
index 0000000..6db316c
--- /dev/null
+++ b/src/app/vehicle-reminder/vehicle-reminder.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleReminderComponent } from './vehicle-reminder.component';
+
+describe('VehicleReminderComponent', () => {
+  let component: VehicleReminderComponent;
+  let fixture: ComponentFixture<VehicleReminderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VehicleReminderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VehicleReminderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-reminder/vehicle-reminder.component.ts b/src/app/vehicle-reminder/vehicle-reminder.component.ts
new file mode 100644
index 0000000..f840325
--- /dev/null
+++ b/src/app/vehicle-reminder/vehicle-reminder.component.ts
@@ -0,0 +1,492 @@
+import { Component, OnInit } from '@angular/core';
+declare var $:any;
+import * as moment from 'moment';
+import { BsDatepickerConfig } from 'ngx-bootstrap';
+import { ContactService } from '../contact.service';
+import { MdDialog, MdSnackBar } from '@angular/material';
+
+import { AddReminderComponent } from './add-reminder/add-reminder.component';
+
+
+declare var swal: any;
+@Component({
+  selector: 'app-vehicle-reminder',
+  templateUrl: './vehicle-reminder.component.html',
+  styleUrls: ['./vehicle-reminder.component.scss']
+})
+export class VehicleReminderComponent implements OnInit {
+  Load:boolean=false;
+  options: any=[];
+  devicesss: any;
+  superAdmin: any;
+  supAdmin: any;
+  fs: any;
+  minIdleTime:any= 5;
+  ls: any;
+  emailid: any;
+  or: any;
+  useridd: any;
+  mb: any;
+  custtype: any;
+  Dealer: any;
+  finall: any;
+  from_date=new Date(); 
+  to_date=new Date();
+  colorTheme = 'theme-dark-blue';
+  reminder:any;
+  reminderType :any=[
+{ viewValue:"Service", value:"Service", },
+{ viewValue:"Oil Change", value:"Oil Change", },
+{ viewValue:"Tyres", value:"Tyres", },
+{ viewValue:"Maintenance", value:"Maintenance", },
+{ viewValue:"Auto Repair", value:"Auto Repair", },
+{ viewValue:"Body Work", value:"Body Work" },
+{ viewValue:"Diagnostics", value:"Diagnostics" },
+{ viewValue:"Tune Up", value:"Tune Up" },
+{ viewValue:"Brake Job", value:"Brake Job" },
+{ viewValue:"Oil & Oil Filter Change", value:"Oil & Oil Filter Change" },
+{ viewValue:"Tire Care", value:"Tire Care" },
+{ viewValue:"Towing", value:"Towing" },
+{ viewValue:"Wheel balance & Alignment", value:"Wheel balance & Alignment" },
+{ viewValue:"Fleet", value:"Fleet" },
+{ viewValue:"Auto Tracking", value:"Auto Tracking" },
+{ viewValue:"A/C Repair", value:"A/C Repair" },
+{ viewValue:"Others", value:"Others", }
+]
+
+  bsConfig: Partial<BsDatepickerConfig>;
+  constructor(private contactService: ContactService,  public dialog: MdDialog, public snackBar: MdSnackBar) { 
+    this.bsConfig = Object.assign({ dateInputFormat: 'DD-MM-YYYY, h:mm:ss a' }, { containerClass: this.colorTheme });
+    this.from_date.setHours(0,0,0,0); 
+    this.from_date.setMonth(this.from_date.getMonth()-1);
+  // $('#select').hide();
+    console.log("loginDetails=>",JSON.parse(window.atob(window.localStorage.token.split(".")[1])));
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.supAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).supAdmin;
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    this.Dealer = JSON.parse(window.atob(window.localStorage.token.split('.')[1])).Dealer;
+  }
+
+  ngOnInit() {
+    this.getDevices();
+    this.testTable();
+  }
+
+  
+  getDevices(){
+    
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+
+      data => {
+        this.devicesss = data
+     
+        this.finall = (this.devicesss.devices);
+
+        for(let i=0;i<this.devicesss.devices.length;i++){
+
+          // if(this.devicesss.devices[i].type_of_device =="Tracker"){
+
+            let a ={
+              value : this.devicesss.devices[i].Device_Name,
+              viewValue:this.devicesss.devices[i].Device_Name,
+              did:this.devicesss.devices[i].Device_ID,
+              id:this.devicesss.devices[i]._id,
+              user:this.devicesss.devices[i].user,
+              // email: this.devicesss.devices[i].Email_ID,
+              // deviceType: this.devicesss.devices[i].type_of_device
+            }
+            this.options.push(a);
+          // }
+
+        }
+           console.log(this.options);
+           let that = this;
+           setTimeout(()=>{
+          
+             that.loadropdown();
+          
+           },100)  
+
+      }); 
+    
+    }
+
+    loadropdown() {
+      let that = this;
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+      document.getElementsByTagName("head")[0].appendChild(script);
+      setTimeout(() => {
+  
+        $('#select').multipleSelect({
+          width: 200,
+          placeholder: 'Select device.....',
+          filter: true,
+          // single: true,
+          // selectAll: false
+      
+        })
+       // $('#select').show();
+       that.callfunction();
+      }, 100);
+  
+  
+    }
+
+    tabelObj: any;  
+    dtOptions:any={};
+    repCount = 0 ;
+    vCount = 0;
+    deviceArr:any=[];
+    callfunction(): void {
+      this.Load = true;
+      this.deviceArr =  $('#select').multipleSelect('getSelects','value');
+      this.tabelObj.draw();
+    }
+
+
+    testTable() {
+      const that = this;
+      console.log("inside function");
+      this.Load = true;
+      $(document).ready(function() {
+          that.tabelObj = $('#deviceTable').DataTable({
+            dom: 'lBftip',
+            buttons: [
+              'copy',
+              'print',
+              'excel'
+            ],       
+              "processing": true,
+              "searching": false,
+              pagingType: 'full_numbers',
+              pageLength: 25,
+              serverSide: true,
+              lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+              ajax: (dataTablesParameters: any, callback) => {
+                
+                  dataTablesParameters.op = {};
+                  dataTablesParameters.select = [];
+                  dataTablesParameters.find = {};
+  
+                  dataTablesParameters.find['$and'] = [];
+                  var userFilter = {};
+                  userFilter['$or'] =[ {user : that.useridd}, {created_by :that.useridd} ]
+                  dataTablesParameters.find['$and'].push(userFilter);
+    
+                  // dataTablesParameters.find['$or'] = [currUser,admin]  
+
+                  dataTablesParameters.columns = [
+                
+                {data:"_id"},
+                {data:'user.first_name'},
+                {data:'user.last_name'},
+                {data:'device.Device_Name'},
+                {data:'reminder_date'},    
+                {data:'notification_type.SMS'},
+                {data:'notification_type.EMAIL'},
+                {data:'notification_type.PUSH_NOTIFICATION'},
+                {data : 'reminder_type'},
+                {data : 'prior_reminder'},
+                {data:'note'},
+                {data:'vehicleName'},
+                 {data:'odo'},
+                {data:'status'},
+                  ]            
+                 
+                 if(that.repCount != 0){
+                  var reminder_date={};
+              
+                  console.log(that.repCount);
+                  // dataTablesParameters.find.user = that.useridd;
+                  if(that.deviceArr.length != 0){
+                    console.log('that.deviceArr',that.deviceArr);
+                    var dev_in = {device : {'$in': that.deviceArr}};
+                      //  dataTablesParameters.find.device = dev_in;
+                      dataTablesParameters.find['$and'].push(dev_in);
+                      }
+                       if (that.from_date) {
+                        var fdate = new Date(that.from_date).toISOString()                      
+                         reminder_date['$gte']=fdate  
+                      
+
+                    };
+                    if (that.to_date) {
+                      var tdate = new Date(that.to_date).toISOString()        
+                       reminder_date['$lte'] =  tdate     ;
+                      
+                  };
+                  var r_d ={};
+                  r_d['reminder_date'] = reminder_date ; 
+                  dataTablesParameters.find['$and'].push(r_d);
+                  if(that.reminder != undefined){
+                    console.log(that.reminder);
+                    var r_t = {};
+                    r_t['reminder_type'] = that.reminder ;
+                    dataTablesParameters.find['$and'].push(r_t);               
+                  }
+                  // dataTablesParameters.find.user = that.useridd ;       
+
+                  
+                 console.log('dataTablesParameters.find=>',dataTablesParameters.find);
+
+                  // that.minIdleTime =      
+                  var suburl = "";
+                  suburl += "/reminder/reminderdatatable";
+                  that.contactService.post(suburl, dataTablesParameters).subscribe(resp => {     
+                      console.log("Response from datatable=>",resp);     
+                      that.Load= false;         
+                      callback(resp);
+                  }, err => {                
+                    that.Load= false;    
+                    let message1="Server Error, Please try again ";
+                    let action:any;
+                    that.snackBar.open(message1, action, {
+                      duration: 5000,
+                      
+                    });  
+                    console.log("error",err) ;     
+                  });
+                  // }else{
+                  //   that.Load= false;    
+                  //   let message1="Please Select Device";
+                  //   let action:any;
+                  //   that.snackBar.open(message1, action, {
+                  //     duration: 5000,
+                      
+                  //   });  
+                  //   return;
+                  // }
+                 }else{
+                  that.repCount =  that.repCount + 1 ; 
+                  that.Load= false;    
+                 }
+                                            
+           
+              },  
+              "rowCallback": function(row: Node, data: any | Object, index: number){ 
+              //  var ddoption =  $('body .dropdown-toggle').dropdown();     
+              //  console.log('ddoption',ddoption);
+
+               $('#edit', row).bind('click', (e) => {      
+                  // var name = document.getElementById('cars');
+                  // console.log('name',name['value']);    
+                  // var selectedVal = name ; 
+                  data['identifier'] = 'edit' ; 
+                  console.log('data',data);
+                   
+                  let dialogRef = that.dialog.open(AddReminderComponent, {
+                    width:"700px",
+                    data: data
+                  });
+                  
+                  dialogRef.afterClosed().subscribe(result => {
+                    if(result == "Reminder updated"){
+                      that.to_date = new Date();
+                      that.callfunction();
+                      console.log("Updated");
+                      // console.log("Updated");
+                    }  
+                  });
+              
+                }); 
+                $('#delete', row).bind('click', (e) => {  
+                  console.log('delete');
+                  swal({
+                    title: 'Are you sure?',
+                    text: "You won't be able to revert this!",
+                    type: 'warning',
+                    showCancelButton: true,
+                    confirmButtonColor: '#3085d6',
+                    cancelButtonColor: '#d33',
+                    confirmButtonText: 'Yes, delete it!'
+                  }).then((result: { value: boolean; }) => {
+                    if (result) {
+                      that.Load =true;
+                      var pld = {rid : data._id};
+                      that.contactService.deleteReminder(pld)
+                      .subscribe(
+                        data => {  
+                          that.Load= false;                 
+                          swal(
+                            'Deleted',
+                            'Reminder Deleted',
+                            'success'
+                          )   
+                          
+                          that.callfunction();
+                      
+                        },err=>{
+                          that.Load  = false;
+                          swal(
+                            'Error',
+                            'Internal Server Error, Please try after sometime !!!',
+                            'success'
+                          )
+                        })    
+                    }
+                  })
+
+              
+               
+              
+                }); 
+                
+              },
+
+              "columns": [
+                  {
+                      "data": "device.Device_Name",
+                      "visible" :true,
+                      "render": function(data, type, row) {
+                    
+                       return data?data:'NA';
+                          
+                      }
+                  },
+                  {
+                      "data": "reminder_date",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                          
+                          return moment(data).format('llll');           
+                      }
+                  },
+                  {
+                      "data": "notification_type",
+                      "visible" :true,
+                      render: function(data, type, row) {
+                        console.log('data',data);
+                  
+                     
+                     
+                        if(data != undefined){
+                          var sms:any='';
+                          var email:any='';
+                          var push:any='';
+                          console.log("data.SMS,data.EMAIL,data.PUSH_NOTIFICATION=>",data.SMS,data.EMAIL,data.PUSH_NOTIFICATION);
+                   
+                          if(data.SMS == true){
+                            sms = '<img src="../../assets/image/sms.png" title="SMS" alt="sms" style="width:30px;height:23px;margin-right:5px">';
+                          }
+                        
+                          if(data.EMAIL == true){
+                            email = '<img src="../../assets/image/email.png" title="Email" alt="email" style="width:20px;height:20px;margin-right:5px">';
+                          }
+  
+                          if(data.PUSH_NOTIFICATION == true){
+                            push = '<img src="../../assets/image/pushN.png" title="Push Notification" alt="Push Notification" style="width:30px;height:24px;margin-right:5px">';
+                          }
+                        }
+                        var combinedStr = sms + email +  push ;
+   
+                                        
+                          return (combinedStr != NaN)?combinedStr : '<p></p>';
+                      }
+                  }, 
+                  {
+                    "data": "reminder_type",
+                    "visible" : true,
+                    render: function(data, type, row) {  
+                      
+                        return data?data:"NA";
+                    }
+                },    
+                  
+                  {
+                    "data": "prior_reminder",
+                    "visible" :true,
+                    render: function(data, type, row) {             
+                        return data?data:0;
+                    }
+                },
+                {
+                    "data": "odo",
+                    "visible" :true,
+                    render: function(data, type, row) {             
+                        return data?data:0;
+                    }
+                },         
+                { 
+                  "data": "note",
+                  "visible" :true,
+                  render: function(data, type, row) {
+                return data?data:''
+                  }
+              }, 
+              { 
+                "data": "status",
+                "visible" :true,
+                render: function(data, type, row) {
+                 return data?data:''
+                }
+            }, 
+              { 
+                "data": "_id",
+                "visible" :true,
+                render: function(data, type, row) {
+
+                //   var option_status = '<div class="dropdown" >' + 
+                //   '<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Status </button>'+
+                //   '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id = "reminder_s">' + 
+                //     '<a class="dropdown-item" style="cursor : pointer" value="Pending" >Pending</a>' + 
+                //     '<a class="dropdown-item" style="cursor : pointer" value="Completed" >Completed' + 
+                //     '<a class="dropdown-item" style="cursor : pointer" value="In Progress" >In Progress'+
+                //   '</div>' + 
+                // '</div>';
+
+                  // var curr_status = 'pending'; 
+                  var option_edit ="<i class='material-icons' style='cursor : pointer' title='Update Reminder' id='edit'> edit </i>";
+                  // var option_status = '<select id="cars">' +
+                  //   '<option value="pending" selected ='+curr_status === "pending"+'>Pending</option>' +
+                  //   '<option value="in_Progress" selected ='+ curr_status === "in_Progress" +'>In Progress</option>' +
+                  //   '<option value="completed" selected = "curr_status === completed">Completed</option>' +
+                  //   '</select>'
+                return option_edit ; 
+                }
+            },    
+            { 
+              "data": "_id",
+              "visible" :true,
+              render: function(data, type, row) {
+
+            
+                var option_delete ="<i class='material-icons' style='cursor : pointer' title='Update Reminder' id='delete'> delete </i>";
+               
+              return option_delete ; 
+              }
+          },                    
+              ],   
+          });
+    
+      });
+    
+    }
+
+  reminderComponent(){
+    
+    let dialogRef = this.dialog.open(AddReminderComponent, {
+      width:"800px",
+      data: {identifier : 'add'}
+    });
+    
+    dialogRef.afterClosed().subscribe(result => {
+    
+      if(result == "reminder Saved"){
+        this.to_date = new Date();
+        this.callfunction();
+        console.log("Updated")
+      }
+    
+    });
+    }
+    
+
+}
diff --git a/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.html b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.html
new file mode 100644
index 0000000..49d9117
--- /dev/null
+++ b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.html
@@ -0,0 +1,38 @@
+<div class="card">
+  <div class="card-body">
+    <div class="row" style="margin:0;margin-bottom:10px">
+      <!-- <p style="margin-bottom: 0px;">{{'Vehicles' | translate}}</p>
+      <md-select multiple [(ngModel)]="selectedDevices" style="padding-top: 0;width: 90%;">
+        <md-option type="checkbox" *ngFor="let item of poiDevices;let i = index;" ng-selected="item.isTrue" [value]="item.id"
+          (click)="change(item, i)">{{item.deviceName}}</md-option>
+      </md-select> -->
+
+      <div style="width: 100%;height: 78vh;">
+        <table id="deviceTable1" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
+          <thead style="background-color:#e0e0e0;color: #444444;">
+            <tr>
+              <th style="text-align:left;width:100px"><input (change)="selectAll($event)" type="checkbox"> </th>
+              <th style="text-align:left;width:100px">{{'Vehicle Name'|translate}} </th>
+              <th style="text-align:left;width:100px">{{'IMEI'|translate}} </th>
+
+
+            </tr>
+          </thead>
+        </table>
+
+
+      </div>
+
+
+
+    </div>
+
+  </div>
+  <div class="card-footer">
+    <div class="text-center">
+      <button class="btn btn-primary btn-sm" (click)="update()">Update</button>
+    </div>
+
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.scss b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.spec.ts b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.spec.ts
new file mode 100644
index 0000000..f213e95
--- /dev/null
+++ b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TrackedVehiclesComponent } from './tracked-vehicles.component';
+
+describe('TrackedVehiclesComponent', () => {
+  let component: TrackedVehiclesComponent;
+  let fixture: ComponentFixture<TrackedVehiclesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TrackedVehiclesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrackedVehiclesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.ts b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.ts
new file mode 100644
index 0000000..3a1becf
--- /dev/null
+++ b/src/app/vehicle-route/tracked-vehicles/tracked-vehicles.component.ts
@@ -0,0 +1,364 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+import { ContactService } from '../../contact.service';
+declare var $:any;
+import * as moment from 'moment';
+
+@Component({
+  selector: 'app-tracked-vehicles',
+  templateUrl: './tracked-vehicles.component.html',
+  styleUrls: ['./tracked-vehicles.component.scss']
+})
+export class TrackedVehiclesComponent implements OnInit {
+ emailid: any;
+  useridd: any;
+  devicesss: any;
+  uncheckedArr=[];
+  tabelObj: any;
+  poiDevices=[];
+  untrackedDev=[];
+  tempArray: any[];
+  selectedDevices: any[];
+  notSelectedPOIArray=[];
+  Load: boolean;
+  changed:boolean=true
+  superAdmin: any;
+  trackedDevices
+ constructor(public dialogRef: MdDialogRef<TrackedVehiclesComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any,private contactService:ContactService) {
+      console.log(data);
+      // this.untrackedDev=data.untrackedDevice?data.untrackedDevice:[]
+      var deviceIDs = data.untrackedDevice?data.untrackedDevice:[];
+      this.trackedDevices=data.trackedDevice?data.trackedDevice:[];
+        //  console.log(deviceIDs);
+        if(deviceIDs.length != 0){
+         for(var k =0; k<deviceIDs.length;k++){
+          //  console.log(deviceIDs[k])
+           this.untrackedDev.push(deviceIDs[k]);
+          }
+          console.log("untrackedDevice=>",this.untrackedDev);
+        }
+         this.notSelectedPOIArray = this.untrackedDev;
+     }
+
+  ngOnInit() {
+    var script = document.createElement("script");
+    script.setAttribute("type", "text/javascript");
+  script.setAttribute("src", "https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js");
+  document.getElementsByTagName("head")[0].appendChild(script);
+  setTimeout(() => {
+    // $('#dbselectIMEI').multipleSelect({
+        //   width: 250,
+        //   placeholder: "Vehicle IMEI",
+        //   filter: true,
+        //   single: true,
+        //   selectAll: false  
+        // }) 
+  
+        $('#dbselectVehicleName').multipleSelect({
+          width: 250,
+          placeholder: "Vehicle Name",
+          filter: true,
+          single: true,
+          selectAll: false  
+        }) 
+        
+        // $("#dbselectVehicleName").multipleSelect("disable");
+        
+      },100)
+       this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+      this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id; 
+        // this.getUserDevices();
+        this.testTable()
+  }
+
+
+  change(obj: any,ind:any){ 
+    console.log(obj, ind);
+    
+    this.poiDevices[ind].isTrue = this.poiDevices[ind].isTrue?!this.poiDevices[ind].isTrue:true;
+    var i = this.notSelectedPOIArray.indexOf(obj.id);
+    
+    if( i==-1)
+      this.notSelectedPOIArray.push(obj.id);
+    else{
+      
+        this.notSelectedPOIArray.splice(i,1);  
+    }
+      console.log(this.notSelectedPOIArray); 
+  }
+
+  update(){
+
+    let routeDetail={
+       trackedDevice:this.trackedDevices,  
+      _id:this.data._id
+    };
+
+    this.contactService.updateRoute(routeDetail,this.data._id)
+      .subscribe(res => {
+        console.log(res);
+        this.dialogRef.close()
+      })
+
+    // console.log(this.data,this.trackedDevices.length)
+    //  const newGeo ={
+    //         uid: this.useridd,
+    //         geofence:this.data.geofence.coordinates,
+    //         geoname: this.data.geoname,
+    //         entering:this.data.entering,
+    //         exiting:this.data.exiting,
+    //         // vehicleGroup:grp[0],
+    //         type:this.data.type,
+    //         _id:this.data._id,
+    //         untrackedDevice:this.notSelectedPOIArray,
+    //         trackedDevice:this.trackedDevices   
+    //       }
+    //       this.contactService.updateGeo(newGeo).subscribe(devgeo => {
+    //           // localStorage.removeItem("cordinates");
+    //           // this.router.navigateByUrl("geofencing");
+    //           this.dialogRef.close()
+    //           // this.geoadd.push(devgeo);
+    //         }, (err: any) => { 
+  
+    //         });
+  }
+
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function () {
+      that.tabelObj = $('#deviceTable1').DataTable({
+        // dom: 'Bfrtip',
+        // buttons: [ 'copy', 'csv', 'ex  cel', 'pdf', 'print' ],
+        "autoWidth": true,
+        'deferRender':true,
+        "processing": true,
+        stateSave: true,
+        "bDestroy": true,
+        "searching": true,
+        pagingType: 'full_numbers',
+        pageLength: 25,
+        serverSide: false,
+        "scrollX": true,
+        "scrollY": '65vh',
+        "scrollCollapse": true,
+        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+        "createdRow": function(row: Node, data: any | Object, index: number){
+        //  "rowCallback": function(row: Node, data: any | Object, index: number){
+          $('#edit', row).bind('click', () => {   
+           
+                console.log(data);
+            var ind=that.poiDevices.indexOf(data)
+              console.log(that.poiDevices[ind],ind);
+            that.poiDevices[ind].isTrue = that.poiDevices[ind].isTrue?!that.poiDevices[ind].isTrue:true;
+           var i = that.notSelectedPOIArray.indexOf(data.id);
+            var index=that.trackedDevices.indexOf(data.id);
+            console.log(index==-1);
+            
+            if(index==-1){
+              if(!that.trackedDevices.includes(data.id)){
+                console.log(that.trackedDevices.length);
+                
+                console.log("In tracked Device");
+                
+                that.trackedDevices.push(data.id);
+                console.log(that.trackedDevices.length);
+              }
+              if(that.notSelectedPOIArray.includes(data.id)){
+                 that.notSelectedPOIArray.splice(i,1);
+              }
+              
+            }else{
+               console.log("In Untracked Device");
+              if(!that.notSelectedPOIArray.includes(data.id)){
+
+                that.notSelectedPOIArray.push(data.id);
+              }
+              if(that.trackedDevices.includes(data.id)){
+                 console.log(that.trackedDevices.length,i);
+                 that.trackedDevices.splice(index,1);
+                  console.log(that.trackedDevices.length);
+              }
+
+              // that.trackedDevices.splice(index,1);
+              // that.notSelectedPOIArray.push(data.id);
+            }
+            // if( i==-1){
+            //  that.notSelectedPOIArray.push(data.id);
+            // }
+            // else{
+            //   that.trackedDevices.push(data.id);
+            //   that.notSelectedPOIArray.splice(i,1);  
+            // }
+      console.log(that.notSelectedPOIArray,that.trackedDevices); 
+      
+         })
+        },
+        ajax: (dataTablesParameters, callback) => {
+           that.Load = true;
+          var suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all';
+          if(that.superAdmin){
+             suburl = '/devices/getDeviceByUser?email='+that.emailid+'&id='+that.useridd+'&limit=all&supAdmin='+that.useridd;
+          }
+          if(that.changed){
+            that.contactService.get(suburl).subscribe((res:any)=>{
+        
+        that.devicesss=res.devices;
+       for(var i = 0; i<res.devices.length ; i++){       
+            var dev = {
+              isTrue:true,
+              id:res.devices[i]._id,
+              Device_Name: res.devices[i].Device_Name,
+              Device_ID:res.devices[i].Device_ID
+            }  
+          that.poiDevices.push(dev);  
+      //     // that.notSelectedPOIArray.push(res.devices[i]._id)        
+        }   
+      var finalArr=[]  ;
+      var j=0 
+      for (var i = 0; i < that.poiDevices.length; i++) {
+                    that.clocation_1(that.poiDevices[i], function (err, succ) {
+                      if (err) {
+                        console.log(err);
+                        j++;
+                      } else {
+                        // console.log(succ);
+                        succ['index']=j
+                        finalArr.push(succ);
+                        // console.log(finalArr,j);
+                        j++;
+                        if (j === that.poiDevices.length) {
+                          that.Load = false;
+                          callback({ data: finalArr });
+                        }
+                      }
+                    })
+    
+                   
+                  }
+         that.Load = false;
+         })
+        }else{
+          // console.log(that.poiDevices);
+          
+          callback({ data: that.poiDevices});
+           that.Load = false;
+           that.changed=true
+        }
+
+        },
+
+        "columns": [
+          {
+            "data": "isTrue",
+            "render": function (data, row) { 
+              if(data){
+                return "<input checked type='checkbox' id='edit'>"   
+              } else{
+                 return "<input  type='checkbox' id='edit'>" 
+              }
+            }
+          },
+           {
+            "data": "Device_Name",
+            "render": function (data, row) {  
+              return data?data:'N/A';   
+            }
+          },
+          {
+            "data": "Device_ID",
+           
+            "render": function (data, row) {             
+              return data;   
+            }
+          },
+         
+          
+        ],
+        "columnDefs": [
+          { className: "dt-body-left", "targets": [0,1,2] },
+          {
+            "targets": '_all',
+            "createdCell": function (td, cellData, rowData, row, col) {
+              $(td).css('padding', '18px')
+            }
+          },
+          { "width": "10px", "targets": 0 },
+          { "width": "40px", "targets": 1 },
+          { "width": "100px", "targets": 2 },
+
+        ], order: [[ 0, 'desc' ], [ 0, 'asc' ]]
+      });
+  //     $('#deviceTable tbody').on('change', 'input[type="checkbox"]', function(e){
+  //     // If checkbox is not checked
+  //     console.log("dis",e);
+      
+  //     if(!this.checked){
+  //        var el = $('#example-select-all').get(0);
+  //        console.log(el);
+         
+  //        // If "Select all" control is checked and has 'indeterminate' property
+  //        if(el && el.checked && ('indeterminate' in el)){
+  //           // Set visual state of "Select all" control 
+  //           // as 'indeterminate'
+  //           el.indeterminate = true;
+  //        }
+  //     }
+  //  });  
+  //  $(".deviceTable").on('change', 'input[type="checkbox"]', function(e) {
+  //   var attendance = {
+  //     name: $(this).closest("tr").find("td:nth-child(1)")
+  //   };
+  //   console.log(attendance);
+  // });
+
+    });
+
+  }
+  selectAll(event){
+    this.changed=false
+    // console.log(event);
+    
+    if(event.target.checked){
+      for(var i=0;i<this.poiDevices.length;i++){
+      this.poiDevices[i].isTrue=true;
+      this.trackedDevices.push(this.poiDevices[i].id)
+     
+    }
+      this.notSelectedPOIArray=[];
+    }else{
+      for(var i=0;i<this.poiDevices.length;i++){
+        this.poiDevices[i].isTrue=false
+         this.notSelectedPOIArray.push(this.poiDevices[i].id)
+      }
+       
+       this.trackedDevices=[]
+    }
+    this.tabelObj.ajax.reload();
+    
+    console.log(this.notSelectedPOIArray,this.trackedDevices);
+  }
+
+   clocation_1(latlngObj, cb) {
+     if(latlngObj==null){
+       cb(null, latlngObj);
+     }
+    //  console.log(latlngObj);
+     
+     if(this.trackedDevices.includes(latlngObj.id)){
+        latlngObj.isTrue=true;
+        cb(null, latlngObj);
+     }else{
+        latlngObj.isTrue=false;
+          cb(null, latlngObj);
+     }
+     }
+    
+   
+
+  }
+
+
+
diff --git a/src/app/vehicle-route/vehicle-route.component.html b/src/app/vehicle-route/vehicle-route.component.html
new file mode 100644
index 0000000..f6a4ebd
--- /dev/null
+++ b/src/app/vehicle-route/vehicle-route.component.html
@@ -0,0 +1,200 @@
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+      <i class="fas fa-plus-circle" (click)="addRoute()" mdTooltip="{{'Add route' | translate}}" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 24px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Route name' | translate}}</h4>
+  
+    </div>
+  </div>  
+ 
+  <div class="row rowStyle">
+    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <div class="row" style="margin: 0;">
+            <div class="col-6" style="padding-top: 18px;">
+            <p style="font-weight: 600; color: #a6a6a6;">Route by status :</p>
+            </div>
+            <div class="col-6" style="padding:0">
+              <md-select style="text-align: center;width: 90%;" placeholder="{{'Route status' | translate}}"
+              [(ngModel)]="state_1" (change)="getRoutebyStatus(state_1)">
+              <md-option *ngFor="let state_1 of statusValue" [value]="state_1">{{state_1}}</md-option>
+            </md-select>
+              </div>
+        </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12">
+          <!-- <div *ngIf="Load" class="loading">Loading&#8230;</div> -->
+          <div style="width: 100%;height:84vh;">
+            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
+                <thead style="background-color:#e0e0e0;color: #444444;">
+                    <tr>
+                        <th style="text-align:left;">{{'Route name' | translate}} </th>
+                        <th style="text-align:left;">{{'Source' | translate}}</th>
+                        <th style="text-align:left;">{{'Destination' |translate}}</th>
+                        <th style="text-align:left;">{{'Route status' | translate}}</th>
+                        <th style="text-align:left;">{{'Speed Alert (Kms.)' | translate}}</th>
+                        <th style="text-align:left;">{{'Delete' | translate}}</th>
+                        <th style="text-align:left;">{{'Tracked Vehicles' | translate}}</th>
+                        <th style="text-align:left;">{{'View route' | translate}}</th>
+                    </tr> 
+                </thead>  
+            </table>
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+</div>
+
+<!-- 
+
+      <app-all-menus></app-all-menus>
+        <div style="min-height:100vh;padding-top: 6%;">
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <p class="headStyle">{{'Ignition Report' | translate}}</p>
+    <div class="InputStyle" style="padding-bottom:30px">
+      <div class="row">
+        <div class="col-md-3" style="padding-top: 17px; padding-left: 50px; ">
+       
+          <select id="select" multiple="multiple">
+            <option *ngFor="let option_1 of options" value={{option_1.value}}>{{ option_1.value }}</option>
+          </select>
+        </div>
+        <div class="col-md-3">
+          <span>{{'From Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3">
+          <span>{{'To Date' | translate}}</span>
+          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
+        </div>
+        <div class="col-md-3" style="top: 16px;">
+            <button style="background-color: #484848;color:#fdfdfd" class="btn btn-primary w3-button/" md-raised-button (click)="ignition_report(Fromdate,todate)">{{'SEARCH' | translate}}</button>
+         
+            <button style="background-color: #d81111;color:#fdfdfd;" class="btn btn-primary w3-button/" md-raised-button (click)="exportExcel()">{{'Export to excel' | translate}}</button>
+         
+          </div>
+      </div>
+    </div>
+
+    <p *ngIf="errorDialog" style="text-align:center;color:red">{{errorMsg}}</p>
+    <table class="table table-striped table-hover" style="overflow-y: hidden;
+           overflow-x: hidden;font-size:12px">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+     
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
+      
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table id="test" class="table table-striped table-hover" style="display:none;">
+      <thead style="background-color:#A2C523;color: white;">
+        <tr>
+          <th style="text-align: center">{{'Vehicle' | translate}}</th>
+           <th style="text-align: center">{{'On/Off' | translate}}</th>
+           <th style="text-align: center">{{'Date Time' | translate}}</th>
+           <th style="text-align: center ;width: 50%">{{'Location' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let report of ignition_data">
+          <td style="cursor:pointer ;text-align: center ">{{report.vehicleName}}</td>
+          <td style="cursor:pointer ;text-align: center ">{{report.switch}}</td>
+          <td style="cursor:pointer ;text-align: centser ">{{report.timestamp| date:'short'}}</td>
+          <td style="cursor:pointer ;text-align: center ; width:50% ">
+            <p *ngIf="report.address != undefined">{{report.address}}</p>
+            <a *ngIf="report.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(report) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(report)}} target="_blank">Click here to get address</a></a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  -->
+
+<!-- <app-all-menus></app-all-menus>
+
+
+<div style="padding-top: 5%;">
+
+<div class="route">
+  <h2>{{'Routes' | translate}}</h2>
+  <div class="row">
+    <div class="col-sm-4 col-md-4" style="padding-top: 2%;float:let;">
+      <button style="background: white;border: 0px;" color="blue" (click)="addRoute()">
+        <md-icon style="color:black">add</md-icon>
+      </button>
+    </div>
+    <div class="col-sm-6 col-md-6" style="padding-left: 65px;padding-top: 6px;text-align: right;">
+      <span>{{'Route by status' | translate}} : </span>
+      <md-select style="width: 29%;text-align: center;" placeholder="{{'Route status' | translate}}"
+        [(ngModel)]="state_1" (change)="getRoutebyStatus(state_1)">
+        <md-option *ngFor="let state_1 of statusValue" [value]="state_1">{{state_1}}</md-option>
+      </md-select>
+    </div>
+    <div class="col-sm-2 col-md-2" style="padding-top:22px;">
+      <div style="float: right;padding-right: 1%;">
+        <input style="border-radius: 6px;
+          border: 1px solid #c7c7c7;
+          padding: 12px;
+          width: 175px;
+          height: 7px;
+          background-color: red;
+          font-size: 12px;
+          background: #fffcfc;" type="search" id="myInput2" name="myInput" type="text" [(ngModel)]="myInput"
+          (ngModelChange)="table1ch()" placeholder="{{'Device Search' | translate}}" />
+      </div>
+    </div>
+  </div>
+</div>
+<table class="table table-striped table-hover" id="myTable" style="overflow-y: hidden;
+    overflow-x: hidden;font-size:12px">
+  <thead style="background-color:#A2C523;color: white;">
+    <th>Route name</th>
+    <th style="text-align: center">{{'Source' | translate}}</th>
+    <th style="text-align: center">{{'Destination' | translate}}</th>
+    <th>{{'Route Status' | translate}}</th>
+    <th>{{'Delete' | translate}}</th>
+  </thead>
+  <tbody>
+    <tr *ngFor="let route of route_detail_show">
+      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.name}}</td>
+      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.source}}</td>
+      <td style="cursor:pointer" (click)="vehiclePath(route)">{{route.destination}}</td>
+      <td>
+        <md-select style="padding-left: 16%;width: 69%" placeholder="Route status" [(ngModel)]="route.status"
+          (change)="updateStatus($event,route)">
+          <md-option *ngFor="let state of statusValue" [value]="state">{{state}}</md-option>
+        </md-select>
+      </td>
+      <td>
+        <p>
+          <button md-tooltip="Delete route"
+            style="border:1px solid transparent; background-color: transparent;float:right"
+            (click)="deleteRoute(route._id)">
+            <md-icon>delete</md-icon>
+          </button>
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div> -->
\ No newline at end of file
diff --git a/src/app/vehicle-route/vehicle-route.component.scss b/src/app/vehicle-route/vehicle-route.component.scss
new file mode 100644
index 0000000..0fe5fac
--- /dev/null
+++ b/src/app/vehicle-route/vehicle-route.component.scss
@@ -0,0 +1,39 @@
+
+
+.topDiv{
+    padding-top: 59px;
+    background: whitesmoke;
+    height: 100vh;
+  }
+  
+  .rowStyle{
+    // margin: 5px;
+    // background: white;
+    height: 84vh;
+    // box-shadow: 3px 1px 5px 0px #b2b0ae;
+    }
+  
+    #deviceTable input {
+      border-radius: 5px;
+    }
+  
+    ::-webkit-scrollbar {
+      width: 10px;
+    }
+    
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: rgb(153, 153, 153); 
+    }
+     
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      // background: rgb(74, 118, 184); 
+      background: #868e96;
+    }
+    
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: #555; 
+    }
+  
\ No newline at end of file
diff --git a/src/app/vehicle-route/vehicle-route.component.spec.ts b/src/app/vehicle-route/vehicle-route.component.spec.ts
new file mode 100644
index 0000000..51891f0
--- /dev/null
+++ b/src/app/vehicle-route/vehicle-route.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleRouteComponent } from './vehicle-route.component';
+
+describe('VehicleRouteComponent', () => {
+  let component: VehicleRouteComponent;
+  let fixture: ComponentFixture<VehicleRouteComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VehicleRouteComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VehicleRouteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-route/vehicle-route.component.ts b/src/app/vehicle-route/vehicle-route.component.ts
new file mode 100644
index 0000000..510ea90
--- /dev/null
+++ b/src/app/vehicle-route/vehicle-route.component.ts
@@ -0,0 +1,358 @@
+import { Component, OnInit } from '@angular/core';
+import { Router} from '@angular/router'
+import { ContactService } from '../contact.service';
+import { RouteDeleteComponent } from '../route-delete/route-delete.component';
+import { MdDialog } from '@angular/material';
+import { TrackedVehiclesComponent } from './tracked-vehicles/tracked-vehicles.component';
+declare var $:any;
+declare var moment : any ;
+declare var swal:any;
+@Component({
+  selector: 'app-vehicle-route',
+  templateUrl: './vehicle-route.component.html',
+  styleUrls: ['./vehicle-route.component.scss']
+})
+export class VehicleRouteComponent implements OnInit {
+  identifier:any='routeList';
+  before:any;
+  logoutbut:boolean;
+  cust:boolean=false;
+  logo:any;
+  text:any;
+  fs:any;ls:any;emailid:any;or:any;useridd:any;mb:any;custtype:any;dealer:any;
+  showImage:any;
+  groups=[];
+  group_info:any;
+  myInput:any;
+  deviceId:any;
+  device_update:any;
+  superAdmin:Boolean = false;
+  deviceStatus:any;
+  statusValue = ["Active","InActive","Restricted"];
+  routeStatus:any;
+  state_1:any;
+  tabelObj: any;
+  constructor(private router: Router,private contactService: ContactService,public dialog: MdDialog) { }
+
+  ngOnInit() {
+   
+   
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.logo=window.localStorage['logo'];
+    this.text=window.localStorage['text'];  
+     window.localStorage['DataUpdate'] = 'Tthis.rue'
+   
+   
+     this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+     this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+     this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+     this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+     this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+     this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+ 
+     this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    //  console.log('testing',this.useridd);
+     if(this.custtype == true){
+      this.cust = true;
+    }  
+
+    let  foods = [ ];
+ 
+    if(this.mb.charAt(0)=="n"){
+     this.mb = ' '
+   }
+   if( window.localStorage['Custumer'] == 'ON'){
+     this.logoutbut = false
+     this.dealer = true
+  }
+  else{
+      this.logoutbut = true
+  }
+
+  // this.routeDetails(this.useridd);
+    this.testTable()
+  }
+
+  exportExcel(){
+
+  }
+  getReport(event){
+  
+    console.log("inside function");
+    if(event == 'getExcel'){
+      this.exportExcel();
+    }else{
+      var deviceId: any;
+      var tpdata = event ; 
+    
+       this.tabelObj.ajax.reload();  
+      // this.tabelObj.draw();  
+     
+    }
+   
+  }
+
+  
+  
+  testTable() {
+    const that = this;
+    console.log("inside function");
+    $(document).ready(function() {
+       that.tabelObj = $('#deviceTable').DataTable({
+            "processing": true,
+            "searching": true, 
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            serverSide: false,
+            "scrollY":'65vh',  
+            "scrollCollapse": true,     
+            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
+            ajax: (dataTablesParameters,callback) => {
+       
+               var suburl = "/trackRoute/user/" + that.useridd;
+               if(that.findByStatus){
+                 suburl += "?status=" + that.findByStatus;
+               }
+           
+                that.contactService.get(suburl).subscribe(resp => {   
+                  console.log('resp',resp);
+                  callback({data : resp });
+              }, err => {   
+                 callback({data : [] });
+                console.log("error",err) ;     
+              });       
+          },  
+          "rowCallback": function (row: Node, data: any | Object, index: number) {
+            $('#delete', row).bind('click', () => {
+              // console.log("delete Method", data);
+           
+              swal({
+                title: 'Are you sure?',
+                text: "Seleted route will be deleted .",
+                type: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Clear'
+            }).then((result: { value: boolean; }) => {
+                if (result) {
+                  var rId = data._id;
+                  that.contactService.delRouteDetail(rId)
+                  .subscribe(res => {
+                    swal(
+                      'Deleted',
+                      'Selected route has been deleted',
+                      'success'
+                  )
+                    that.tabelObj.ajax.reload();  
+                  })
+  
+                }
+            });
+         
+          });
+          $('#viewroute', row).bind('click', () => {
+            that.vehiclePath(data)
+        });
+         $('#trackedVehicles', row).bind('click', () => {
+            that.untrack(data)
+        });
+          },
+
+            "columns": [
+                {
+                    "data": "name",
+                    "defaultContent": "",
+                    "render": function(data, type, row) {
+                        
+                      return data?data : '';                  
+                    }
+                },
+                {
+                    "data": "source",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      return data?data:'';        
+                    }
+                },
+                {
+                    "data": "destination",
+                    "defaultContent": "",
+                    render: function(data, type, row) {
+                      // var expDate = new Date(data);
+                      return data ? data : "";  
+                  
+                    }
+                }, 
+          
+                
+              {
+                "data": "status",
+                "defaultContent": "",
+                render: function(data, type, row) {        
+                  return data ? data : "";  
+                }
+            }  ,
+            {
+              "data": "speed_alert",
+              "defaultContent": "",
+              render: function(data, type, row) {        
+                return data ? data : "";  
+              }
+          }  ,
+                 
+            {
+              "data": null,
+              "defaultContent": "",
+              render: function(data, type, row) {        
+                // return '<button id="delete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete</button>'
+                return  '<i id="delete" class="fas fa-trash-alt" style="cursor:pointer" title="Delete route"></i>'
+              }
+          }            
+          ,
+          {
+              "data": null,
+              "defaultContent": "",
+              render: function(data, type, row) {        
+                // return '<button id="delete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete</button>'
+                return  '<i id="trackedVehicles" class="fas fa-car" style="cursor:pointer" title="Tracked vehicles"></i>'
+              }
+          },
+          {
+            "data": null,
+            "defaultContent": "",
+            render: function(data, type, row) {        
+              // return '<button id="delete" type="button" class="btn btn-primary" style="background:red;border:0px;">Delete</button>'
+            
+              return '<i  id="viewroute" style="cursor:pointer" title="View route"  class="fas fa-eye"></i>'
+            }
+        }                       
+            ],  
+            // "columnDefs": [
+            //   { className: "dt-body-left", "targets": [ 0,1,2,3 ] },
+            //   {
+            //     "targets": '_all',
+            //     "createdCell": function (td, cellData, rowData, row, col) {
+            //         $(td).css('padding', '18px')
+            //     }
+            // } ,
+            // { "width": "10px", "targets": 0 },
+            // { "width": "40px", "targets": 1 },
+            // { "width": "100px", "targets": 2 },
+            // { "width": "70px", "targets": 3 },
+         
+            // ] 
+        });
+  
+    });
+  
+  }
+  
+
+// route_detail_show:any;
+// routeDetails(uId){
+ 
+//   this.route_detail_show=[];
+ 
+//   // console.log(uId);
+//   this.contactService.getRouteDetail(uId)
+//     .subscribe(res=>{
+//       this.route_detail_show=res;
+//     })
+
+  
+// }
+
+
+
+
+vehiclePath(routePath){
+
+  localStorage.setItem('routeData', JSON.stringify(routePath))
+  localStorage.setItem('routeId', routePath._id);
+ // this.cond = false
+//  console.log(routePath._id);
+ localStorage.setItem('routeId',routePath._id)
+  this.router.navigateByUrl('viewRoute');
+}
+
+
+
+// deleteRoute(rId){
+ 
+
+//   let dialogRef = this.dialog.open(RouteDeleteComponent, {
+//     height:'300px',
+//     width:'430px',
+//     data: {rId}
+//   });
+//       dialogRef.afterClosed().subscribe(result => {  
+   
+//         if(result=="success"){
+          
+//           this.contactService.delRouteDetail(rId)
+//           .subscribe(res => {
+         
+        
+//             this.routeDetails(this.useridd);
+//           })
+              
+           
+//         }else if(result=="Cancel"){
+        
+//         }
+//       });
+// }
+
+state:any;
+
+updateStatus(status,routeData){
+  // console.log(status.value);
+  // console.log(routeData)
+  var payload = {
+    "_id": routeData._id,
+    "status":status.value,
+  }
+  // console.log(payload);
+
+  this.contactService.updateRouteStatus(payload,routeData._id)
+    .subscribe(res=>{
+      // console.log("record updated!!!");
+      // console.log(res);
+    },err=>{
+      // console.log("eError occured !!!")
+    })
+}
+
+addRoute(){
+ 
+  this.router.navigateByUrl("setRoute");
+}
+findByStatus:any;
+
+getRoutebyStatus(state){
+    this.findByStatus = state;
+    this.tabelObj.ajax.reload();  
+}
+
+ untrack(data){
+
+  if(this.dialog.openDialogs && this.dialog.openDialogs.length > 0){
+      return false;
+    }
+    let dialogRef = this.dialog.open(TrackedVehiclesComponent, {
+//  width: '503px',
+//  height:'400px',
+ data: data
+ });
+    dialogRef.afterClosed().subscribe((result) => {
+      dialogRef = null;
+      this.tabelObj.ajax.reload()
+    if(result == "succ"){
+      console.log("Updated")
+    }
+     
+    });
+
+ }
+}
diff --git a/src/app/vehicle-type/vehicle-type.component.css b/src/app/vehicle-type/vehicle-type.component.css
new file mode 100644
index 0000000..32cc2c5
--- /dev/null
+++ b/src/app/vehicle-type/vehicle-type.component.css
@@ -0,0 +1,864 @@
+ul, li {
+    list-style: none;
+    float: left;
+    line-height: 15vh;
+  }
+
+  
+
+.topDiv{
+  padding-top: 59px;
+  background: whitesmoke;
+  height: 100vh;
+}
+
+.rowStyle{
+  // margin: 5px;
+  // background: white;
+  height: 84vh;
+  // box-shadow: 3px 1px 5px 0px #b2b0ae;
+  }
+
+  #deviceTable input {
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgb(153, 153, 153); 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    // background: rgb(74, 118, 184); 
+    background: #868e96;
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 150px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+  width: 150px;
+  height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+  white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+
+  
+/* Absolute Center Spinner */
+.loading {
+    position: fixed;
+    z-index: 999;
+    height: 2em;
+    width: 2em;
+    overflow: show;
+    margin: auto;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+  
+  /* Transparent Overlay */
+  .loading:before {
+    content: '';
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.3);
+  }
+  
+  /* :not(:required) hides these rules from IE9 and below */
+  .loading:not(:required) {
+    /* hide "loading..." text */
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+  }
+  
+  .loading:not(:required):after {
+    content: '';
+    display: block;
+    font-size: 10px;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.5em;
+    -webkit-animation: spinner 1500ms infinite linear;
+    -moz-animation: spinner 1500ms infinite linear;
+    -ms-animation: spinner 1500ms infinite linear;
+    -o-animation: spinner 1500ms infinite linear;
+    animation: spinner 1500ms infinite linear;
+    border-radius: 0.5em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+    box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  }
+  
+  /* Animation */
+  
+  @-webkit-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-moz-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @-o-keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes spinner {
+    0% {
+      -webkit-transform: rotate(0deg);
+      -moz-transform: rotate(0deg);
+      -ms-transform: rotate(0deg);
+      -o-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      -moz-transform: rotate(360deg);
+      -ms-transform: rotate(360deg);
+      -o-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  /* ::-webkit-scrollbar {
+    /* display: none; 
+    } */
+.upper{
+    margin-top: -70px;
+    width: 100%;
+    height: 15%;
+    /* margin-left: -2px;*/
+    position: fixed;
+    background-color: white;
+    top: 0;
+    z-index: 1
+}
+.up{
+    color: gray;
+    /* Add a font */
+    font-family: "Courier New", Courier, monospace;
+    /* Set the font-size to 25 pixels */
+    font-size: 25px;
+
+}  
+.middle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    margin-left: -220px;
+    margin-top: -20px;
+    
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+.desc {
+    padding: 15px;
+    text-align: center;
+}
+#insert{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  #insert2{
+    margin-left:8px;
+    margin-top:-15px;
+    text-shadow: 20px;
+  }
+  .example-container {
+    width: 500px;
+    height: 300px;
+    border: 1px solid rgba(0, 0, 0, 0.5);
+  }
+  
+  .example-sidenav-content {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .example-sidenav {
+    padding: 20px;
+  }
+  .vertical-menu {
+    width: 250px;
+    padding-left: 10px;
+}
+
+.vertical-menu a {
+    background-color: #eee;
+    color: black;
+    display: block;
+    padding: 12px;
+    text-decoration: none;
+   
+}
+
+.vertical-menu a:hover {
+    background-color: #ccc;
+}
+
+.vertical-menu a.active {
+    
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+}
+#c2 {
+    
+    
+}
+#c1 {
+    float:left;
+ 
+}
+.close-thik:after {
+    content: '✖'; /* UTF-8 symbol */
+    position:absolute; right:-108px; bottom:12px; width:65px; margin-right:86px;
+  }
+  [data-tooltip] {
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+  }
+  
+  /* Hide the tooltip content by default */
+  [data-tooltip]:before,
+  [data-tooltip]:after {
+    visibility: hidden;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    pointer-events: none;
+  }
+  
+  /* Position tooltip above the element */
+  [data-tooltip]:before {
+    position: absolute;
+    bottom: 110%;
+    left: 50%;
+    margin-bottom: -5px;
+    margin-left: -40px;
+    padding: 7px;
+    width: 100px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #000;
+    background-color: hsla(0, 0%, 20%, 0.9);
+    color: #fff;
+    content: attr(data-tooltip);
+    text-align: center;
+    font-size: 14px;
+    line-height: 1.2;
+  }
+  
+  /* Triangle hack to make tooltip look like a speech bubble */
+  [data-tooltip]:after {
+    position: absolute;
+    bottom: 150%;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    border-top: 5px solid #000;
+    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+  }
+  
+  /* Show tooltip content on hover */
+  [data-tooltip]:hover:before,
+  [data-tooltip]:hover:after {
+    visibility: visible;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
+    opacity: 1;
+  }
+  button3 {
+    background-color: Transparent;
+    background-repeat:no-repeat;
+    border: none;
+    cursor:pointer;
+    overflow: hidden;
+    outline:none;
+}
+.icon-bar {
+    width: 17%;
+    background-color: #18262F;
+    margin-top: -9px;
+    height: 100%;
+    position: fixed;
+    display: inline-block;
+    margin-left: -16px;
+}
+@media screen and (max-width: 1000px){        
+    .off{
+       display: none;
+    }
+}
+.icon-bar2 {
+    
+    width: 297px;
+    background-color: white;
+    margin-top: -7px;
+    height:86vh;
+    position: fixed;
+   
+}
+.icon-bar a {
+    display: block;
+    text-align: center;
+    padding: 16px;
+    transition: all 0.3s ease;
+    color: white;
+    font-size: 14px;
+    text-align: left;
+}
+
+.icon-bar a:hover {
+    background-color: #000;
+}
+
+.active {
+    background-color: #4CAF50 !important;
+}
+@media screen and (max-width: 900px) {
+    .icon-bar{
+        display: none;
+        
+    }
+    .sch{
+        display: none;
+    }
+    .first{
+        width:1%!important;
+    }
+    .second{
+        margin-left: 8px!important;
+    }
+    .small{
+        display: block!important;
+    }
+    .image{
+        display: none;
+    }
+    .schlar{
+        display: block!important;
+    }
+}
+.small{
+    display: none;
+}
+.pointer{
+    cursor:pointer !important;
+    font-size: 11px
+}
+/* Side Navi */
+#mySidenav a {
+    margin-top: -9px;
+    position: absolute;
+    left: -80px;
+    transition: 0.3s;
+    width: 100px;
+    text-decoration: none;
+    font-size: 28px;
+    color: white;
+    border-radius: 0 5px 5px 0;
+}
+
+#mySidenav a:hover {
+    left: 0;
+}
+
+#about {
+    top: 20px;
+    background-color: #ffffff;
+    opacity: .4;
+}
+
+#blog {
+    top: 80px;
+    background-color: #18262F;
+}
+
+#projects {
+    top: 140px;
+    background-color: #f44336;
+}
+#d:hover { 
+    color: rgb(14, 102, 18);
+
+    
+}
+#ac{
+    color: rgb(38, 38, 90)
+}
+#contact {
+    top: 200px;
+    background-color: #555
+}
+#active{
+    text-decoration-line: underline;
+    text-decoration-color: rgb(66, 26, 245);
+} 
+.overlay {
+    height: 100%;
+    width: 0;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0, 0.9);
+    overflow-x: hidden;
+    transition: 0.5s;
+}
+
+.overlay-content {
+    position: relative;
+    top: 25%;
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.overlay a {
+    padding: 8px;
+    text-decoration: none;
+    font-size: 36px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+.overlay a:hover, .overlay a:focus {
+    color: #f1f1f1;
+}
+
+.overlay .closebtn {
+    position: absolute;
+    top: 20px;
+    right: 45px;
+    font-size: 60px;
+}
+
+@media screen and (max-height: 450px) {
+  .overlay a {font-size: 20px}
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+agm-map {
+    height: 300px;
+  }
+
+  /* Toast Msg */
+
+
+  #toast {
+    visibility: hidden;
+    max-width: 50px;
+    height: 50px;
+    /*margin-left: -125px;*/
+    margin: auto;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+
+    position: fixed;
+    z-index: 1;
+    left: 60%;right:0;
+    bottom: 80%;
+    font-size: 13px;
+    white-space: nowrap;
+}
+#toast #img{
+	width: 50px;
+	height: 50px;
+    
+    float: left;
+    
+    padding-top: 16px;
+    padding-bottom: 16px;
+    
+    box-sizing: border-box;
+
+    
+    background-color: #111;
+    color: #fff;
+}
+#toast #desc{
+
+    
+    color: #fff;
+   
+    padding: 16px;
+    
+    overflow: hidden;
+	white-space: nowrap;
+}
+
+#toast.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
+}
+#myInput {
+    border-radius: 15px;
+    /* border: 2px solid #18262F; */
+    padding: 7px;
+    width: 116px;
+    height: 17px;
+    font-size: 9px;
+    outline: none;
+    float: right;
+    margin-top: 2%;
+}
+
+@-webkit-keyframes expand {
+    from {min-width: 50px} 
+    to {min-width: 350px}
+}
+
+@keyframes expand {
+    from {min-width: 50px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes stay {
+    from {min-width: 350px} 
+    to {min-width: 350px}
+}
+
+@keyframes stay {
+    from {min-width: 350px}
+    to {min-width: 350px}
+}
+@-webkit-keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@keyframes shrink {
+    from {min-width: 350px;} 
+    to {min-width: 50px;}
+}
+
+@-webkit-keyframes fadeout {
+    from {bottom: 30px; opacity: 1;} 
+    to {bottom: 60px; opacity: 0;}
+}
+
+@keyframes fadeout {
+    from {bottom: 30px; opacity: 1;}
+    to {bottom: 60px; opacity: 0;}
+}
+.mat-slide-toggle-thumb-container {
+    z-index: auto !important;
+}
+
+.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
+    z-index:auto!important;
+    
+}
+.mat-menu-panel.mat-menu-before.mat-menu-below{
+    overflow: hidden !important;
+}
+.mat-menu-panel.my-full-width-menu {
+    max-width: none;
+    width: 100vw;
+    margin-left: -8px;
+    margin-top: 24px;
+  }
+  .menu-overflow-hidden {
+    overflow: hidden !important;
+  }
+  
+/* Notification */
+#nav{list-style:none;margin: 0px;padding: 0px;}
+#nav li {
+float: right;
+margin-right: 20px;
+font-family: Arial;
+font-size: 14px;
+font-weight:bold;
+}
+#nav li a{color:#333333;text-decoration:none}
+#nav li a:hover{color:#1788c0;text-decoration:none}
+
+
+#notification_li
+{
+position:relative
+}
+#notificationContainer 
+{
+background-color: #fff;
+border: 1px solid rgba(100, 100, 100, .4);
+-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
+overflow: visible;
+position: absolute;
+top: 30px;
+margin-left: -170px;
+width: 400px;
+z-index: -1;
+display: none;
+}
+
+#notificationContainer:before {
+content: '';
+display: block;
+position: absolute;
+width: 0;
+height: 0;
+color: transparent;
+border: 10px solid black;
+border-color: transparent transparent white;
+margin-top: -20px;
+margin-left: 188px;
+}
+#notificationTitle
+{
+font-weight: bold;
+padding: 8px;
+font-size: 13px;
+background-color: #ffffff;
+position: fixed;
+z-index: 1000;
+width: 384px;
+border-bottom: 1px solid #dddddd;
+
+}
+#notificationsBody
+{
+padding: 33px 0px 0px 0px !important;
+min-height:300px;
+}
+#notificationFooter
+{
+/* 
+    font-weight: bold;
+    padding: 8px;
+    font-size: 13px;
+    background-color: #ffffff;
+    position: fixed;
+    z-index: 1000;
+    width: 384px;
+    border-bottom: 1px solid #dddddd; */
+
+background-color: #e9eaed;
+text-align: center;
+font-weight: bold;
+z-index: 1000;
+padding: 8px;
+font-size: 13px;
+border-top: 1px solid #dddddd;
+}
+
+
+
+#notification_count 
+{
+padding: 3px 7px 3px 7px;
+background: #cc0000;
+color: #ffffff;
+font-weight: bold;
+margin-left: 77px;
+border-radius: 9px;
+-moz-border-radius: 9px; 
+-webkit-border-radius: 9px;
+position: absolute;
+margin-top: -11px;
+font-size: 11px;
+}
+
+/deep/ .mat-menu-panel.test{
+   
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff;
+
+  /* a{
+    display: block;
+  padding: 9px 10px;
+  margin: 0;
+  border-bottom: 1px solid #999;
+  } */
+}
+
+/deep/ .mat-menu-panel.test_1{
+ 
+  background-color: #b7b7b7;
+  width: 160px;
+  text-align: left;
+  color: #fff; 
+  margin-top:48px; 
+} 
+
+.scrollbar
+{
+    /* margin-left: 30px; */
+    /* float: left; */
+    /* height: 300px;
+    width: 65px; */
+    /* // width: 100%;height: 90vh; padding-top: 1%; */
+    /* background: #F5F5F5; */
+    overflow-x: hidden;
+    /* overflow-y: none; */
+    /* margin-bottom: 25px; */
+}
+
+.force-overflow
+{
+    min-height: 450px;
+}
+
+#style-1::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+}
+
+#style-1::-webkit-scrollbar
+{
+    width: 12px;
+    background-color: #F5F5F5;
+}
+
+#style-1::-webkit-scrollbar-thumb
+{
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: -webkit-linear-gradient(45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, .2) 50%,
+    rgba(255, 255, 255, .2) 75%,
+    transparent 75%,
+    transparent)
+
+    /* background-color: linear-gradient(to bottom, MD_DIALOG_DATA 0%, #0066ff 100%); */
+}
\ No newline at end of file
diff --git a/src/app/vehicle-type/vehicle-type.component.html b/src/app/vehicle-type/vehicle-type.component.html
new file mode 100644
index 0000000..418dc04
--- /dev/null
+++ b/src/app/vehicle-type/vehicle-type.component.html
@@ -0,0 +1,178 @@
+<!-- <html>
+  <head>
+      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>  
+
+      
+    </head>
+  <body>
+
+<app-all-menus></app-all-menus>
+
+
+ <div class="small">
+  <button md-button [mdMenuTriggerFor]="menu" style="padding:0%;"><i class="material-icons">list</i></button>
+<md-menu #menu="mdMenu">
+
+      <a href="#">
+        <h6>DASHBOARD
+        <md-icon style="float:right">dashboard</md-icon>
+      </h6>
+    </a>
+      
+  
+         <a href="#"><h6>RULES<md-icon style="float:right">dock</md-icon></h6></a> 
+         
+   
+  </md-menu> 
+</div> 
+
+  <div style="float:left; width: 100%;padding-top: 6%;" class="scrollbar" id="style-1" >
+    <div class="loading" *ngIf="Load">Loading&#8230;</div>
+    <p style="text-align: center; padding-top: 30px; font-size: 25px; font-weight: 500;margin-top: 0;">VEHICLE TYPE</p>
+  <div id="toast"><div id="desc">{{data_descip}}</div></div>
+ 
+  <button md-tooltip="Add Vehicle Type" style="border:1px solid transparent; background-color: transparent;margin-top:8px" (click)="add_VehicleType()" ><md-icon style="float: right;width:30px;height:30px;">add</md-icon></button>
+  <input type="search"   id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Vehicle Search"/>
+
+  <table  id="myTable" class="table table-striped table-hover " style="overflow-y: hidden;
+  overflow-x: hidden;font-size:12px">         
+  <thead style="background-color:#A2C523;color: white;">
+    <tr>
+      <th>{{'Brand' | translate}}</th>
+      <th>{{'Description' | translate}}</th>
+      <th>{{'Model' | translate}}</th>
+      <th>{{'Icon Type' | translate}}</th>
+      <th>{{'Voltage Calibration' | translate}}</th>
+   
+      <th>{{'Tank Size' | translate}}</th>
+      <th>{{'Mileage' | translate}}</th>
+      <th>{{'Last Modified' | translate}}</th>
+      <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>         
+      <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>         
+    </tr>
+  </thead>
+
+  <tbody>
+
+<tr *ngFor="let data of vehicle">
+
+      <td  style="cursor:pointer" >{{data.brand}}</td>
+
+      <td  style="cursor:pointer" >{{data.description}}</td>
+
+      <td  style="cursor:pointer" >{{data.model}}</td>
+      <td  style="cursor:pointer" >{{data.iconType?data.iconType:"NA"}}</td> 
+
+    
+      <td style="cursor:pointer" md-tooltip="show detail"
+      (click)="openCaliberation(data.voltage_calibration)" >
+      
+        {{data.voltage_calibration?data.voltage_calibration.length:0}} Calibration</td>
+
+   
+      <td  style="cursor:pointer" >{{data.tank_size}}</td>
+
+      <td  style="cursor:pointer">{{data.mileage}}</td>
+
+   <td  style="cursor:pointer" >{{data.last_modified|date:'short'}}</td> 
+
+   <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="edit_Record(data)">edit</md-icon ></td>
+
+   <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon ></td>
+
+  </tr>  
+  </tbody> 
+</table> 
+
+
+
+</div>
+
+</body> -->
+
+
+
+<!-- New UI -->
+
+
+
+<app-all-menus></app-all-menus>
+<div class="topDiv">
+  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
+    <div class="col-sm-12 col-md-12 col-lg-12">
+    
+  
+      <i class="fas fa-plus-circle" (click)="add_VehicleType()" md-tooltip="Add Vehicle Type" style="box-shadow: 3px 1px 5px 0px #b2b0ae;cursor: pointer; float: left; font-size: 30px;border-radius: 50px;margin-left: 20px;"></i>
+      <h4>{{'Vehicle Types' | translate}}</h4>
+    </div>
+  </div>  
+
+  <div class="row rowStyle">
+    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">  
+      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
+          <input  style="margin: 10px 10px 10px 0px;width: 225px;height: 30px;float: right;border-radius: 0px;line-height: 1.3;background: #efecec;box-shadow: 3px 2px 5px 0px rgb(178, 176, 174);" class="form-control" type="search"   id="myInput" name="myInput" type="text"  [(ngModel)]="myInput"  (ngModelChange)="table1ch()"  placeholder= "Vehicle Search" />
+          <div style="width: 100%;height:76vh;overflow: scroll;">
+            <table  id="myTable" class="table table-striped table-hover" style="font-size: 12px;">         
+            <thead style="background-color:#e0e0e0;color: #444444;">
+              <tr>
+                <th>{{'Brand' | translate}}</th>
+                <th>{{'Description' | translate}}</th>
+                <th>{{'Model' | translate}}</th>
+                <th>{{'Icon Type' | translate}}</th>
+                <th style="white-space: nowrap;">{{'Voltage Calibration' | translate}}</th>      
+                <th style="white-space: nowrap;">{{'Temprature Calibration' | translate}}</th>      
+                <th style="white-space: nowrap;">{{'Tank Size' | translate}}</th>
+                <th>{{'Mileage' | translate}}</th>
+                <th>{{'Last Modified' | translate}}</th>
+                <th *ngIf="orgChk === true">{{'Edit' | translate}}</th>
+                <th *ngIf="orgChk === true">{{'Delete' | translate}}</th>
+              </tr>
+            </thead>       
+            <tbody> 
+          <tr *ngFor="let data of vehicle">
+                <td  style="cursor:pointer" >{{data.brand}}</td>
+                <td  style="cursor:pointer" >{{data.description}}</td>
+                <td  style="cursor:pointer" >{{data.model}}</td>
+                <td  style="cursor:pointer" >{{data.iconType?data.iconType:"NA"}}</td> 
+                <td style="cursor:pointer" md-tooltip="show detail" (click)="openCaliberation(data.voltage_calibration)">
+                  {{data.voltage_calibration?data.voltage_calibration.length:0}} Calibration</td>  
+                  <td style="cursor:pointer" md-tooltip="show detail" (click)="opentempCaliberation(data.temp_calibration)">
+                    {{data.temp_calibration?data.temp_calibration.length:0}} Calibration</td>         
+                <td  style="cursor:pointer" >{{data.tank_size}}</td>
+                <td  style="cursor:pointer">{{data.mileage}}</td>
+                 <td  style="cursor:pointer;white-space: nowrap;" >{{data.last_modified|date:'short'}}</td> 
+                <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="edit_Record(data)">edit</md-icon ></td>
+                 <td *ngIf="orgChk === true" style="cursor:pointer"><md-icon (click)="deleteRecord(data._id)">delete_sweep</md-icon ></td>     
+            </tr>  
+            </tbody> 
+          </table>      
+         </div>   
+        </div>
+      </div>  
+    </div>
+    <div  class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
+      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;padding-right: 15px;padding-left: 15px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
+        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0px;">
+          <p style="text-align: center;color: #b1afaf;">{{calibrationTitle}}</p>
+          <div *ngIf="Load" class="loading">Loading&#8230;</div>
+          <div id="toast"> <div id="desc">{{data_descip}}</div></div>
+          <div *ngIf="calibrationData.length != 0" style="width: 100%;height:77vh;overflow: auto;">
+            <table style="border:1px solid black;width: 100%;">
+              <tr style="border:1px solid black;" *ngFor="let data1 of calibrationData"><label style="padding: .8em;">Voltage</label> 
+                <th style="border:1px solid black;" style="padding: .8em;">{{data1.voltage}}</th>
+                <label style="padding: .8em;">Fuel</label> <td style="border:1px solid black;" style="padding: .8em;">{{data1.fuel}}</td>
+              </tr>
+            </table>
+          </div>
+          <div *ngIf="calibrationData.length == 0" style="width: 100%;height:82vh;overflow: auto;text-align: center; padding-top: 20vh;">
+           <p style="font-weight: 500; color: #686868;">{{noticeTitle}} {{'Information' | translate}}</p>
+           <p style="color: #919191;">{{'Click on' | translate}} {{noticeTitle}} {{'column in vehicle type table for get more detail' | translate}}</p>
+          </div>  
+        </div> 
+        </div>
+      </div> 
+    </div>
+  </div>
+
+
diff --git a/src/app/vehicle-type/vehicle-type.component.spec.ts b/src/app/vehicle-type/vehicle-type.component.spec.ts
new file mode 100644
index 0000000..1c0509e
--- /dev/null
+++ b/src/app/vehicle-type/vehicle-type.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VehicleTypeComponent } from './vehicle-type.component';
+
+describe('VehicleTypeComponent', () => {
+  let component: VehicleTypeComponent;
+  let fixture: ComponentFixture<VehicleTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VehicleTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VehicleTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/vehicle-type/vehicle-type.component.ts b/src/app/vehicle-type/vehicle-type.component.ts
new file mode 100644
index 0000000..b353593
--- /dev/null
+++ b/src/app/vehicle-type/vehicle-type.component.ts
@@ -0,0 +1,838 @@
+import { Component, OnInit } from '@angular/core';
+import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
+import {DialogContentExampleDialogComponent} from '../dialog-content-example-dialog/dialog-content-example-dialog.component'
+/* import {Tab} from './tab'; */
+import {Device} from '../device';
+
+import {Driver} from '../driver';
+import { Subject } from 'rxjs/Subject';
+import { Observable } from 'rxjs/Observable';
+import * as io from 'socket.io-client';
+/* import { DeviceReportComponent } from '../device-report/device-report.component';
+ */import { DeviceEditComponent } from '../dashboard/device-edit/device-edit.component';
+import {MdSnackBar} from '@angular/material';
+import { DeviceShareComponent } from '../dashboard/device-share/device-share.component';
+import { ShareUserComponent } from '../dashboard/share-user/share-user.component';
+import { Params,Router, ActivatedRoute, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {ContactService} from '../contact.service';
+import { checkNoChangesNode } from '@angular/core/src/view/view';
+import { SpeednotifyComponent } from '../dashboard/speednotify/speednotify.component';
+import { SidebarComponent } from '../sidebar/sidebar.component';
+import { MyaccountComponent } from '../myaccount/myaccount.component';
+import { ShowCaliberationComponent } from '../show-caliberation/show-caliberation.component';
+declare var $: any;
+
+declare var google: any;
+declare var swal: any;
+
+@Component({
+  selector: 'app-vehicle-type',
+  templateUrl: './vehicle-type.component.html',
+  styleUrls: ['./vehicle-type.component.css'],
+  providers: [ContactService,SidebarComponent]
+})
+export class VehicleTypeComponent implements OnInit {
+
+  adbtn: string;
+  chkAddBtn: string;
+ //private url = 'http://localhost:3000/api/graph';  
+  private socket;
+  Load:boolean=false
+ messages = [];
+ connection;
+ graphs:any;
+ message;
+  numberOfOnlineUsers: number;
+devices: Device[];
+device: Device;
+iconType = {value:"",viewValue:""}
+drivers:any=[];
+driver:any=[];
+
+vehicles:any=[];
+vehicle:any=[];
+
+Device_ID: string;
+Serial_Num: string;
+Manf: string;
+Model: string;
+del:boolean = false;
+Des: string;
+Hardware_Ver: string;
+Loca: string;
+login:any;  
+visibility:any;
+/* tabs: Tab[] = []; */
+calculateResult=[];
+value:any;
+a:any;
+homeVis:any;
+visibility0:any;
+j:any;
+id:any;
+dev:any;
+checked:any
+MdSlideToggleChange :any;
+e: Event;
+d:any;
+  orgChk: any;
+  calibrationTitle: any;
+  noticeTitle: any;
+
+myaccount(){
+   
+    this.cond = false
+    this.router.navigateByUrl("accountSettings");
+  // let dialogRef = this.dialog.open(MyaccountComponent, {
+  //   width: '903px',
+  //   data: {}
+  // });
+
+  // dialogRef.afterClosed().subscribe(result => {
+
+  //   if(result == "succ"){
+  //     console.log("Updated")
+  //   }
+
+  // });
+}
+
+
+
+// openDialog3(a,b){
+//   let dialogRef = this.dialog.open(DeviceShareComponent, {
+//     width: '528px',
+//     data: { name: a , did:b}
+//   });
+calibrationData :any =[];
+// columnGrid  = 'col-sm-12 col-md-12 col-lg-12';
+// columnGrid_1 :any ;
+openCaliberation(data){
+  this.calibrationTitle = 'VOLTAGE CALIBRATION';
+  this.noticeTitle = "Volatage Calibration";
+  console.log('data',data);
+  // let dialogRef = this.dialog.open(ShowCaliberationComponent,
+  // {width:'280px',
+  // data:data}) 
+ this.calibrationData = data ; 
+ if(this.calibrationData.length != 0){
+  //  this.calibrationData = 'col-sm-9 col-md-9 col-lg-9';
+  //  this.columnGrid_1  ='col-sm-3 col-md-3 col-lg-3';
+
+}
+
+
+}
+
+opentempCaliberation(data){
+  console.log('data',data);
+  this.calibrationTitle = 'TEMPRATURE CALIBRATION';
+  this.noticeTitle = "Temprature Calibration";
+  // let dialogRef = this.dialog.open(ShowCaliberationComponent,
+  // {width:'280px',
+  // data:data}) 
+ this.calibrationData = data ; 
+ if(this.calibrationData.length != 0){
+  //  this.calibrationData = 'col-sm-9 col-md-9 col-lg-9';
+  //  this.columnGrid_1  ='col-sm-3 col-md-3 col-lg-3';
+
+}
+
+
+}
+logout(){
+  window.localStorage.clear();
+  this.router.navigateByUrl("login");
+}
+soon(){
+  this.router.navigateByUrl("const?_i="+window.localStorage.token);
+  
+}
+addcus(){
+  this.router.navigateByUrl("add");
+}
+
+Ddetail(){
+  this.router.navigateByUrl("driverdetail");
+}
+DModel(){
+  this.router.navigateByUrl("deviceModel");
+}
+VType(){
+  this.router.navigateByUrl("VehicleType");
+}
+add_VehicleType(){
+  this.router.navigateByUrl("addEditVehicleType");
+}
+
+table1ch(){
+    
+  myFunction();
+      function myFunction() {
+        var input, filter, table, tr, td, i,td1;
+        input = document.getElementById("myInput");
+       
+        filter = input.value.toUpperCase();
+        table = document.getElementById("myTable");
+        tr = table.getElementsByTagName("tr");
+        for (i = 0; i < tr.length; i++) {
+          td = tr[i].getElementsByTagName("td")[1];
+          td1= tr[i].getElementsByTagName("td")[0]
+          if (td) {
+            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
+              tr[i].style.display = "";
+            } 
+            else if(td1.innerHTML.toUpperCase().indexOf(filter) > -1){
+              tr[i].style.display = "";
+            }
+            else {
+              tr[i].style.display = "none";
+            }
+          }       
+        }
+      }
+    }
+cond:Boolean = false;
+point : any = 0;
+ aa(){
+  // console.log(this.point);
+   if(this.point == 0){
+    this.cond = true;
+    this.point ++;
+   }
+ else if(this.point % 2 == 0){
+  this.cond = true;
+  this.point ++;
+ }
+ else{
+   this.cond = false
+   this.point ++;
+ }
+
+  
+}
+report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report");
+
+}
+routeViolation(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/routeViolation");
+
+}
+report_speed(){
+  // console.log("report speed call")
+  this.cond = false
+  this.router.navigateByUrl("device-report/device-speed-report");
+}
+
+summaryReport(){
+
+  this.cond = false
+  this.router.navigateByUrl("device-report/summary-report");
+}
+
+overspeed(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/overspeed");
+
+}
+stoppage_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/stoppage_report");
+
+}
+
+
+vehicleRoute(){
+  this.router.navigateByUrl("vehicleRoute");
+
+}
+route_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+dealerInfo(){
+  this.cond = false
+  this.router.navigateByUrl("dealerInfo");
+}
+
+ignition_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/ignition_report");
+
+
+}
+
+geofancingReport(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/geofancing");
+}
+
+
+distance_report(){
+this.cond = false
+this.router.navigateByUrl("device-report/distance_report");
+}
+
+trip_report(){
+  this.cond = false
+  this.router.navigateByUrl("device-report/trip_report");
+
+}
+
+
+
+
+
+
+BB:Boolean = false;
+dataa:Boolean = false;
+
+
+
+  
+
+
+    devv:any;
+ 
+
+
+
+
+delete(did){
+  this.Load =true;
+this.contactService.deldev(did)
+.subscribe(
+  data => {
+
+    this.dev  = data 
+    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+  
+      data => {
+        this.devicess = data 
+      
+        this.final = (this.devicess.devices);
+        this.Load =false
+        this.tost1("delete");
+        window.localStorage['DataUpdate'] = 'True';
+        this.sidebar.sidebarData();     
+      }, (err: any) => {
+         
+        // console.log(err);
+      if(err.status !=   200)
+      {
+         this.Load =false
+      }});
+
+  }
+ )
+
+
+
+}
+
+
+ adddev(){
+  // console.log("Inside adddiv");
+  //console.log(id);
+this.router.navigateByUrl("add-device");
+}
+
+
+
+add_Driver(){
+  // console.log("Inside adddiv");
+  //console.log(id);
+//this.router.navigateByUrl("addDriver");
+
+this.router.navigate(["addDriver"],{queryParams :  {user_id : this.useridd}});
+
+}
+deleteRecord(data1){
+
+  swal({
+    title: 'Are you sure?',
+    text: "You won't be able to revert this!",
+    type: 'warning',
+    showCancelButton: true,
+    confirmButtonColor: '#3085d6',
+    cancelButtonColor: '#d33',
+    confirmButtonText: 'Yes, delete it!'
+  }).then((result: { value: boolean; }) => {
+    if (result) {
+      this.contactService.deleteVehicleType(data1).subscribe(
+        data => {
+         this.vehicle=[];
+         this.vehicles=[];
+         this.getDriver();
+         swal(
+          'Deleted!',
+          'Your file has been deleted.',
+          'success'
+        )
+        },err=>{
+          swal(
+            'Server Error',
+            'Error occured while deleting vehicle type , Please try after sometime !!!',
+            'error'
+          )
+        });      
+    }
+  })
+
+
+}
+
+
+
+vewdev(id,name,type){
+
+  // console.log("Inside adddiv");
+ // console.log(id + name);
+ var dataStatus = {
+  vehicleId:id,
+  vehicleName:name,
+  vehicleType:type
+}
+  if(type=="Tracker"){
+
+    this.router.navigateByUrl("location?_dname="+name+"_id="+id);
+    window.localStorage['devDetail']= JSON.stringify(dataStatus);
+    
+    
+  }
+  else{
+  this.router.navigateByUrl("account?_did="+id+"."+name); 
+  }
+}
+
+  selectedIndex:number=0;
+  clickMe(value){
+    this.selectedIndex=this.value;
+    if(!this.visibility0)
+    this.visibility0=!this.visibility0; 
+  }
+
+  onLinkClick($event: any) {
+    // console.log($event);
+  
+  }
+/*   addTab() {
+    var tab = new Tab();
+    this.tabs.push(tab)
+  }  */
+  cancle(a){
+    // console.log(a);   
+    this.visibility0=!this.visibility0;  
+  }
+  
+  constructor(public sidebar :SidebarComponent,public dialog: MdDialog,public snackBar: MdSnackBar,private router: Router, private contactService: ContactService, private activatedRoute: ActivatedRoute) { 
+   
+  }
+
+sha :any;
+
+myInput:any;
+data_descip :any;
+before:any;
+// TOAST
+
+tost1(divid){
+if(divid == "share"){
+  this.data_descip = "Device Succesfully Shared";
+  launch_toast();
+}
+else if(divid == "delete"){
+  this.data_descip = "Device Deleted Succesfully";
+  launch_toast();
+}
+else if(divid == "update"){
+  this.data_descip = "Device Succesfully Updated";
+  launch_toast();
+}
+else if(divid == "blankemail"){
+  this.data_descip = "Blank Email ID or Mobile Number";
+  launch_toast();
+}
+else if(divid == "deleteshareDevice"){
+  this.data_descip = "Share Device Succesfully Removed";
+  
+  launch_toast();
+}
+else if(divid == "removeuser"){
+  this.data_descip = "Share Device User Succesfully Removed";
+  
+  launch_toast();
+}
+
+
+
+else if(divid == "No_Dev"){
+  this.data_descip = "No Shared Users for this Device";
+  
+  launch_toast();
+}
+else if(divid == "device_alert"){
+  this.data_descip = "Speed Alert Sucessfully Added";
+  launch_toast();
+}
+else if(divid == "NotSucc"){
+  this.data_descip = "Speed Alert Removed";
+  launch_toast();
+}
+else if(divid == "new_Device"){
+  window.localStorage['FinalAddDevice'] = 'False'
+  this.data_descip = "New Device Added";
+  launch_toast();
+}
+  function launch_toast() {
+  
+   // console.log(divid);
+    var x = document.getElementById("toast")
+    //console.log(x);
+    x.className = "show";
+    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 1500);
+}
+ }
+
+
+  shareOwner:any;
+  ss:any;
+  y:any;
+
+
+
+
+fs :any;
+ls :any;
+or :any;
+/* e =[];
+ */token :any;
+emailid :any;
+devicess :any;
+devicesss :any;
+userID:any;
+final:any;
+lat:any;
+lng:any;
+latLongArr:any
+convertedToString :String;
+useridd:any;
+notifi = [];
+g:any;
+
+/* notify(){
+  $(document).ready(function()
+  {
+  $("#notificationLink").click(function()
+  {
+  $("#notificationContainer").fadeToggle(300);
+  $("#notification_count").fadeOut("slow");
+  return false;
+  });
+
+  //Document Click hiding the popup 
+  $(document).click(function()
+  {
+  $("#notificationContainer").hide();
+  });
+
+  //Popup on click
+  $("#notificationContainer").click(function()
+  {
+
+  return false;
+  });
+
+  });
+} */
+custtype:any;
+cust:boolean=false;
+
+mydealer(){
+  window.localStorage['token'] =  window.localStorage['Dealer_token'];
+  localStorage.removeItem('devices');
+  window.localStorage['DataUpdate'] = 'True';
+  if(window.localStorage['DataLoaded'] = 'True'){
+    window.localStorage['Custumer'] = 'OFF'
+    this.router.navigateByUrl("add")
+   // this.router.navigateByUrl("const?_status="+"OK");
+  }
+}
+getdev(){
+  let foods = []
+  this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      
+    data => {
+      this.devicess = data 
+      this.final = this.devicess.devices
+      // console.log(this.final);
+      
+     for(let i=0;i<this.devicess.devices.length;i++){
+     
+      //  if(this.devicess.devices[i].type_of_device =="Tracker"){
+         let a ={
+          value : this.devicess.devices[i].Device_Name,
+          viewValue:this.devicess.devices[i].Device_Name
+         }
+         foods.push(a);
+      //  }
+    
+     }
+
+    });
+}
+ign(){
+  this.router.navigateByUrl("device-report/ign-report");
+
+}
+mb:any;
+logoutbut:boolean;
+dealer:boolean;
+logo:any;
+text:any;
+data_to_view=[];
+Durations:any;
+superAdmin:Boolean = false;
+
+
+report_map(){
+  this.router.navigateByUrl("routeMapping");
+
+}
+
+
+  ngOnInit() {
+
+
+    this.superAdmin = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isSuperAdmin;
+    this.orgChk = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).isOrganisation ; 
+    this.adbtn = localStorage.getItem("dlrchk")
+    console.log(this.orgChk);
+    
+   this.logo=window.localStorage['logo'];
+   this.text=window.localStorage['text'];  
+    window.localStorage['DataUpdate'] = 'True'
+    if( window.localStorage.FinalAddDevice == 'True'){
+      this.tost1("new_Device");
+    }
+    this.sidebar.sidebarData();
+ 
+    this.fs = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).fn;
+    this.ls = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).ln;
+    this.emailid = JSON.parse(window.atob(window.localStorage.token.split(".")[1])).email;
+    this.or = JSON.parse(window.atob(window.localStorage.token.split(".")[1]))._orgName;
+    this.useridd = JSON.parse(window.atob(window.localStorage.token.split('.')[1]))._id;
+    this.mb =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).phn;
+
+
+    this.custtype =  JSON.parse(window.atob(window.localStorage.token.split('.')[1])).isDealer;
+    // console.log("abc", this.custtype);
+    //this.getdev();
+    if(this.custtype == true){
+      this.cust = true;
+    }  
+         let  foods = [ ];
+
+         if(this.mb.charAt(0)=="n"){
+          this.mb = ' '
+        }
+        if( window.localStorage['Custumer'] == 'ON'){
+          this.logoutbut = false
+          this.dealer = true
+       }
+       else{
+           this.logoutbut = true
+       }
+
+       this.logo=window.localStorage['logo'];
+       this.text=window.localStorage['text'];
+
+ /*    this.contactService.getDevice(this.emailid,this.useridd).subscribe(
+      
+      data => {
+        this.devicess = data 
+  
+
+
+        this.final = this.devicess.devices
+        
+       for(let i=0;i<this.devicess.devices.length;i++){
+       
+         if(this.devicess.devices[i].type_of_device =="Tracker"){
+           let a ={
+            value : this.devicess.devices[i].Device_Name,
+            viewValue:this.devicess.devices[i].Device_Name
+           }
+           foods.push(a);
+         }
+      
+       }
+  
+      }); */
+/*       sidebarData */
+      var retrievedData = localStorage.getItem("devices");
+      var cord = JSON.parse(retrievedData);
+      this.final = cord; 
+      console.log("this.final",this.final);
+   
+      if(this.final == null){
+        console.log("No data available");
+
+      }else{
+        for(let i=0;i<this.final.length;i++){
+          if(this.final[i].type_of_device =="Tracker"){
+            let a ={
+             value : this.final[i].Device_Name,
+             viewValue:this.final[i].Device_Name
+            }
+            foods.push(a);
+          }     
+        }
+      }
+      this.getDriver();
+
+  }
+
+  getDriver(){
+
+    this.contactService.getVehicleType(this.useridd).subscribe(
+          
+      data => {
+       // this.drivers = data 
+       /*  this.final = this.devicess.devices[0]; */
+        console.log("DATA",data);
+      //  console.log("The data of the Drivers"+this.vehicles);
+
+        
+
+       for(let i=0;i<data.length;i++){
+        this.vehicle.push(data[i]);
+        //  console.log( this.vehicle);
+      
+        }
+  
+      });
+      
+  }
+/*   this.socket = io.connect('https://13.126.36.205:5000');
+  this.socket.on('connect', function(){
+    console.log("IO Connected");
+  
+  }); */
+  deviceData=[];
+  arrival_time:any;
+  baba=[]
+  status_toShow:any;
+  address_show:any;
+  lattitude:any;
+  longitude:any;
+  
+  //  abc(div){
+    
+  //   this.baba=[]
+  //   this.deviceData=div;
+  //   var outerThis = this;
+  //   var start_add:any;
+    
+  
+   
+  //     var i = 0, howManyTimes = this.deviceData.length;
+  //     // console.log(this.deviceData.length);
+  //     function f() {
+  //     //   console.log("ABC");
+  //     //   outerThis.arrival_time = new Date(outerThis.deviceData[i].status_updated_at)
+
+  //     //   let  dev_status= outerThis.deviceData[i].status;
+         
+      
+  //     //     var curr_time= new Date();
+  //     //     var fd = new Date(outerThis.arrival_time).getTime();
+  //     //     var td = curr_time.getTime();
+  //     //     var timedev_status_difference = td-fd;
+  //     //     var total_min = timedev_status_difference/60000;
+  //     //     var hours = total_min/60
+  //     //     var rhours = Math.floor(hours);
+  //     //     var minutes = (hours - rhours) * 60;
+  //     //     var rminutes = Math.round(minutes);
+        
+  //     //     outerThis.Durations = rhours + " "+'hrs'+ " " +  rminutes + " " + 'min';
+  //     //     console.log(outerThis.Durations);   
+          
+
+  //     //     if(dev_status==undefined){
+            
+  //     //       outerThis.status_toShow = "NA";
+
+  //     //     }else{
+  //     //       outerThis.status_toShow = dev_status + " " + "Since" +" "+ outerThis.Durations;
+  //     //     }
+    
+  //     //     outerThis.deviceData[i].status  =  outerThis.status_toShow ;
+  //     //     debugger;
+  //     //     if(outerThis.deviceData[i].last_location==undefined){
+  //     //       outerThis.lattitude = null;
+  //     //       outerThis.longitude = null;
+  //     //     }else{
+      
+  //     //       outerThis.lattitude = outerThis.deviceData[i].last_location.lat;
+  //     //       outerThis.longitude = outerThis.deviceData[i].last_location.long;
+  //     //     }
+      
+  //     //    console.log(outerThis.lattitude,outerThis.longitude);
+  //     //     var geocoder = new google.maps.Geocoder();
+  //     //     var latlng = new google.maps.LatLng(outerThis.lattitude,outerThis.longitude);
+    
+  //     //     var request = {
+  //     //       latLng:latlng
+  //     //     };
+          
+        
+  //     //     debugger;
+  //     //     geocoder.geocode(request, function(data,status){
+  //     //       if(status == google.maps.GeocoderStatus.OK){
+  //     //         if(data[0]!=null){                            
+  //     //            outerThis.address_show = data[0].formatted_address; 
+  //     //            outerThis.deviceData[i].Location = outerThis.address_show;
+  //     //            console.log(outerThis.address_show);               
+  //     //         }else{
+  //     //           console.log("No address available")
+  //     //           outerThis.address_show = "No address available";               
+  //     //         }  
+  //     //       }
+  //     //       else{      
+          
+  //     //         outerThis.address_show = 'NA';
+  //     //         outerThis.deviceData[i].Location = outerThis.address_show;
+  //     //         console.log(outerThis.address_show);
+  //     //       } 
+  //     //       i++;
+  //     //     })  
+  //     // if( i < howManyTimes ){
+  //     //     setTimeout( f,2000 );
+         
+  //     // }
+  //   }
+  //   if(howManyTimes)
+  //     f();
+    
+  
+  // //  console.log(outerThis.deviceData);
+
+  //  } 
+ 
+
+
+   edit_Record(data){
+    //  console.log(id);
+    console.log("DATA=>",data.iconType);
+    
+     
+     localStorage.setItem("vehType",JSON.stringify(data));
+     this.router.navigateByUrl("editVehicle_type");
+   }
+
+}
diff --git a/src/app/vehicle.ts b/src/app/vehicle.ts
new file mode 100644
index 0000000..9cbcc33
--- /dev/null
+++ b/src/app/vehicle.ts
@@ -0,0 +1,17 @@
+export class Vehicle{
+    _id:string;
+    brand:string;
+    description:string;
+    model:string;
+    voltage_calibration:[{voltage:number,fuel:number}];
+    tank_size:number;
+    mileage:number;
+    __v:number;
+    last_modified:string;
+
+
+    constructor(voltage,fuel){
+        this.voltage_calibration = [{voltage:0,fuel:0}];
+       
+    }
+}
\ No newline at end of file
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/css/all.css b/src/assets/css/all.css
new file mode 100644
index 0000000..7fec2e3
--- /dev/null
+++ b/src/assets/css/all.css
@@ -0,0 +1,5 @@
+/*!
+ * Font Awesome Free 5.1.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+.fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:a 2s infinite linear}.fa-pulse{animation:a 1s infinite steps(8)}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-balance-scale:before{content:"\f24e"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bicycle:before{content:"\f206"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blind:before{content:"\f29d"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-open:before{content:"\f518"}.fa-bookmark:before{content:"\f02e"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-certificate:before{content:"\f0a3"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-concierge-bell:before{content:"\f562"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-credit-card:before{content:"\f09d"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-deviantart:before{content:"\f1bd"}.fa-diagnoses:before{content:"\f470"}.fa-dice:before{content:"\f522"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-gift:before{content:"\f06b"}.fa-git:before{content:"\f1d3"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hashtag:before{content:"\f292"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-houzz:before{content:"\f27c"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-internet-explorer:before{content:"\f26b"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mercury:before{content:"\f223"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-motorcycle:before{content:"\f21c"}.fa-mouse-pointer:before{content:"\f245"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-nintendo-switch:before{content:"\f418"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-old-republic:before{content:"\f510"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-osi:before{content:"\f41a"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-carry:before{content:"\f4ce"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-volume:before{content:"\f2a0"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poo:before{content:"\f2fe"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-r-project:before{content:"\f4f7"}.fa-random:before{content:"\f074"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-rendact:before{content:"\f3e4"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-retweet:before{content:"\f079"}.fa-ribbon:before{content:"\f4d6"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-sass:before{content:"\f41e"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-search:before{content:"\f002"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skull:before{content:"\f54c"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowflake:before{content:"\f2dc"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-swatchbook:before{content:"\f5c3"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toolbox:before{content:"\f552"}.fa-tooth:before{content:"\f5c9"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-train:before{content:"\f238"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-moving:before{content:"\f4df"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-uikit:before{content:"\f403"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900}
\ No newline at end of file
diff --git a/src/assets/dot2.png b/src/assets/dot2.png
new file mode 100644
index 0000000..b9331e2
Binary files /dev/null and b/src/assets/dot2.png differ
diff --git a/src/assets/dot22.png b/src/assets/dot22.png
new file mode 100644
index 0000000..1b1bab2
Binary files /dev/null and b/src/assets/dot22.png differ
diff --git a/src/assets/favicon.ico b/src/assets/favicon.ico
new file mode 100644
index 0000000..cf4bbbb
Binary files /dev/null and b/src/assets/favicon.ico differ
diff --git a/src/assets/i18n/al.json b/src/assets/i18n/al.json
new file mode 100644
index 0000000..1863d1a
--- /dev/null
+++ b/src/assets/i18n/al.json
@@ -0,0 +1,651 @@
+{
+  "ADMIN": "Administratori",
+  "DASHBOARD": "Paneli I perdoruesit",
+  "Admin": "Administratori",
+  "GROUPS": "Grupet",
+  "VEHICLES": "Veturat",
+  "Account Setting": "Cil�simet e llogaris�",
+  "General Setting": "Cil�simet e pergjithshme",
+  "Application language": "Gjuha e aplikimit",
+  "Language Setting": "Cil�simet e gjuh�s",
+  "Reset Password": "Reseto fjal�kalimin ",
+  "Notification Settings": "Cil�simet e njoftim�ve",
+  "TRACKING": "Ndjekje",
+  "Tracking": "Ndjekje",
+  "Reports": "Raportet",
+  "POI LIST": "قائمة العلامات",
+  "POI List": "قائمة العلامات",
+  "ROUTES": "Rrug�t",
+  "NOTIFICATIONS": "Njoftim�t",
+  "DISTRIBUTERS": "Distributor�t",
+  "DEALERS": "Tregtar�t",
+  "Dealers": "Tregtar�t",
+  "CUSTOMERS": "Klient�t",
+  "Customers": "Klient�t",
+  "RUNNING": "N� L�vizje",
+  "IDLE": "N� ler",
+  "IDLE Reports": "Raportet n� Ler",
+  "STOPPED": "E ndaluar",
+  "EXPIRED": "E skaduar",
+  "OUT OF REACH": "I pa arritsh�m",
+  "NO GPS": " NUk ka gps",
+  "Device Icon": " Ikona e paisjes",
+  "Registration number": " Numri I regjistrimit ",
+  "Group": " Grupi",
+  "Today's ODO": " Odo e sotme",
+  "Total ODO": " Odoja totale ",
+  "Last location": " Lokacioni I fundit ",
+  "Last updated on": " Perditsimi I fundit ",
+  "Trip status": "Statusi I udh�timit",
+  "Status": "Statusi",
+  "Satellites": "Satelitet",
+  "Last Speed": "Shpejt�sia e fundit",
+  "FUEL (LITRE)": "Karburanti (Lit�r)",
+  "GPS": "Gps",
+  "AC": "AC",
+  "Fuel Reports": "Raporti I karburantit",
+  "POWER": "Fuqia",
+  "GSM Signal": "Sinjali I GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "Njoftim",
+  "My Account": "Llogaria ime",
+  "Log Out": "Dil",
+  "Refresh Data": "Rifresko t� dh�nat",
+  "Device Search": "K�rkimi I paisjes",
+  "Previous": "I m�parshem",
+  "Next": "Tjetra",
+  "DRIVER MASTER": "T� dh�nat p�r shoferin",
+  "Driver Master": " T� dh�nat p�r shoferin ",
+  "DEVICE MODEL": "Modeli I paisjes",
+  "VEHILE TYPE": "Tipi I vetur�s",
+  "Maintenance Reminder": "Kujtes� per mir�mbajtjen",
+  "Vehicle Expense": "Shpenzimi I vetur�s",
+  "Message Utility": "Sh�rbimi I mesazhit",
+  "Sensor Detail": "Detajet p�r senzorin",
+  "Billing Detail": "Detajet e fatures",
+  "USER MASTER": "T� dh�nat p�r shfryt�zuesin",
+  "User Master": "T� dh�nat p�r shoferin",
+  "DEVICE MASTER": "T� dh�nat per paisjen",
+  "Device Master": " T� dh�nat per paisjen ",
+  "System Logs": "Regjistrat e sistemit",
+  "GPS TRACKER": "Gjurmuesi gps",
+  "CMD PACKETS": " Paketat CMD",
+  "CMD Packets": " Paketa CMD",
+  "INVENTORY LIST": "Lista e inventarit",
+  "Inventory List": "Lista e inventarit",
+  "CUSTOMER INQUIRY": " K�rkesat e klientit",
+  "Driver Name": "Emri I shoferit",
+  "Driver Address": "Adresa e shoferit",
+  "Driver Status": "Statusi I shoferit",
+  "License Number": "Numri I patent�s",
+  "Salary": "Paga",
+  "DOJ": "DOJ",
+  "Delete": "Fshi",
+  "Device Type": "Tipi I paisjes",
+  "Configuration Command": "Komanda e konfigurimit",
+  "Location Command": "Lokacioni I komand�s",
+  "Immobilzer Command": " Komanda e Imobilizuesit
+  "Resume Command": " Rifllillo komand�n ",
+  "Reset Command": " إعادة تعيين الأوامر ",
+  "Immobilzer Type": " Tipi I imobilizuesit ",
+  "Port": " Porti ",
+  "Edit": " Edito ",
+  "Brand": " Tipi",
+  "Description": " P�ershkrimi",
+  "Model": "Modeli",
+  "Icon Type": " Tipi I ikon�s",
+  "Voltage Calibration": " Kalibrimi i tensionit ",
+  "Tank Size": " Madh�sia e rezervuarit ",
+  "Mileage": "Kilometrazha ",
+  "Last Modified": " Modifikimi I fundit",
+  "Search by phone": " K�erko p�rmes telefonit",
+  "Search by name": " K�erko p�rmes emrit",
+  "From Date": " Prej dat�s",
+  "To Date": " Deri n� dat� ",
+  "FIND": "K�rko ",
+  "Show": "Shfaq ",
+  "entries": " Hyrjet ",
+  "Name": "Emri",
+  "Dealer": "Tregtari",
+  "Is Dealer": "",
+  "Created on": "Krijuar m�",
+  "Email": "Emaili",
+  "Phone": "Telefoni",
+  "Device Name": "Emri I paisjes",
+  "Device Id": "ID e paisjes",
+  "User": "Perdoruesi",
+  "Expire On": "Skadon m�",
+  "Fuel Voltage(mv)": " Tensioni i karburantit (mv)",
+  "Sim Number": " Numri I kartel�s ",
+  "Today ODO": " � اليوم ",
+  "Search by Device ID": " K�rko p�rmes ID s� paisjes ",
+  "Certificates": "�ertifikatat ",
+  "Export Pdf": " Eksporto n� PDF",
+  "Search by Sim Number": " K�erko p�rmes Numrit t� kartel�s",
+  "Export EXCEL": "Eksporto n� eksell",
+  "Device IMEI": "IMEI I paisjes",
+  "Lattitude": "Gjer�sia gjeografike ",
+  "Longitude": "Gjat�sia gjeografike",
+  "Speed": "Shpejtesia",
+  "Device Time": "Koha e paisjes",
+  "Insertion Time": "Koha e futjes",
+  "Last Push": "Shtytja e fundit",
+  "Integration Respnse": "P�rgjigjja e integrimit",
+  "Ignition": "التشغيل",
+  "Power": "Fuqia",
+  "Ext. Volt": "تحويلة فولت",
+  "Fuel Volt": "Volti I karburantit",
+  "Sattelite": "Sateliti",
+  "Powercut Alarm": " Alarmi i nd�rprerjes s� energjis� ",
+  "Inquiry Date": " Data e k�rkesave ",
+  "Customer Name": "Emri I klientit",
+  "Message": "Mesazhi ",
+  "Assigned To": "Caktuar p�r",
+  "Role": "Roli",
+  "No data available in table": "Nuk ka data t� lira ",
+  "Showing": " shfaqet ",
+  "Costumer Inquiry": "K�rkesat e klienit",
+  "System Date": " Data e sistemit",
+  "Vehicle Number": "Numri I vetures",
+  "Chassis Number": "Shasia e vetur�s ",
+  "Engine Number": " Numri I motorit",
+  "Device Model": " Modeli I paisjes",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " Numri I pronarit ",
+  "Alternate Number": "Numri alternativ",
+  "Dealer Name": "Emri I tregtarit",
+  "Tracking Software": " Softueri p�r gjurmim",
+  "Costumer Name": " Emri I klientit",
+  "Device ID": " Id e paisjes",
+  "Operator Name": " Emri I operatorit ",
+  "Protocol ID": " ID e protokollit ",
+  "Command": " Komanda",
+  "ACC": " ACC ",
+  "Battery Status": "Statusi I bateris",
+  "GPS DATA": "T� dh�nat p�r gps",
+  "DEVICES MASTER": "T� dhenat p�r paisjen",
+  "Groups": "Grupet",
+  "Add Group": "Shto grup",
+  "Type group name": "Shkruani emrin e grupit",
+  "CONFIRM": "Konfirmo",
+  "CANCEL": "Anulo",
+  "Active": "Aktiv",
+  "InActive": "Jo aktiv",
+  "Vehicles": "Paisjet",
+  "Reg. Number": "Nr I regjistrmit",
+  "IMEI": "IMEI",
+  "Int. ID": "ID internacionale",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "Provajderi I karteles",
+  "SIM2": "SIM2",
+  "Vehicle Type": "Tipi I vetures",
+  "Owner": "Pronari",
+  "IDLING Since": "خاملة منذ",
+  "STOPPED Since": "E ndalur prej:",
+  "RUNNING Since": " N� L�vizje prej",
+  "Video Tutorial": " Video tutoriale",
+  "VEHICLE LIST": " Lista e veturave",
+  "Vehicle List": " Lista e veturave ",
+  "MAINTENANCE REMINDER": " Kujtes� per mir�mbajtjen ",
+  "REMINDERS": "P�rkujtimet ",
+  "Reminders": "P�rkujtimet ",
+  "Reminder Date": " Data e kujtes�s",
+  "Notification Type": " Tipi I njoftimit",
+  "Reminder Type": " Tipi I p�rkujtimit",
+  "Prior Notification(Days)": "Njoftimi paraprak ",
+  "Additional notes": "Sh�nimet shtes�",
+  "SEARCH": "K�rko",
+  "Live Tracking": "Live tracking",
+  "History Tracking": "Historia e gjurmimit",
+  "Vehicle History": "Historia e vetur�s",
+  "Generate History": "Gjenero historin",
+  "Play History": "Fillo historin",
+  "Select device": "Zgjidh paisjen",
+  "Please choose a device": "Ju lutem zgjidhni paisjen",
+  "OK": "OK",
+  "GEOFENCE": " Zona gjeografike",
+  "Grid view": "Pamja ne rrjet",
+  "List view": "Pamja ne list",
+  "Geo Fencing Name": "Emri I zones gjeografike",
+  "Geofence type": "Tipi I zones gjeografike",
+  "Enter Alert": "Fut alarmin",
+  "Exit Alert": "Ndal alarmin",
+  "Geofence Search": "K�rko zonen gjeografke",
+  "Add Geofence": " Shto zone gjeografike ",
+  "Select group": " Zjidh grupin",
+  "GEO FENCE NAME": "Emri I zones gjeografike",
+  "Get Alert on": "Merrni njoftim n� ",
+  "Entering": "Duke hyr",
+  "Exiting": " Duke dal",
+  "Create": " Krijo",
+  "Select Your Geo Fence Region": "Zgjidh regjionin e zones gjeografike",
+  "Add Geo Fence": "Shto zone gjeografike",
+  "Total Distance(Km)": " Distanca totale (Km) ",
+  "Fuel consumption(Litre)": " Konsumimi I karburantit (Liter) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " Jasht� rrjetit",
+  "No GPS(Hr:Min:Sec)": " Nuk ka gps",
+  "Daily Report": " Raporti ditor ",
+  "Daily Reports": " Raportet ditore ",
+  "Trips": "Udh�timet ",
+  "Max Speed(Km/hr)": " Shpejtesia maksimale
+",
+  "My App": " Aplikacioni",
+  "AC Report": "Raporti I  AC ",
+  "AC Reports": "Raporti I AC ",
+  "Loading": "Duke u ngarkuar",
+  "Vehicle": "Vetura",
+  "Load Management": " Menaxhimi i ngarkes�s ",
+  "TOTAL VEHICLES": "T� gjitha veturat",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "Paneli I perdoruesit",
+  "RULES": "Rregullat",
+  "Alert Report": "Raporti I njoftimit ",
+  "No": "Jo",
+  "Date": "Data",
+  "Power Cut": "Nd�rprerje e energjis� ",
+  "Battery": "Bateria",
+  "Geofencing": "Zona gjeografike",
+  "Overspeeding": " Tejkalimi I shpejtesis",
+  "Daywise Report": "Raporti ditor  ",
+  "Daywise Reports": " Raporti ditor",
+  "Filter Report": " Raporti I filtrit",
+  "Fuel Consumption Report": " Raporti I konsumimit te karburantit",
+  "Fuel Consumption Reports": " Raporti I konsumimit te karburantit ",
+  "Vehicle name": " Emri I vetur�s",
+  "Start Time": "Koha e startimit ",
+  "End Time": " Koha e mbarimit",
+  "Fuel Consumed (L)": " Konsumimiti karburantit",
+  "Distance(Kms)": "Distanca (Kms)",
+  "In event count": "",
+  "Out event count": "Out out count",
+  "Start Location": "Lokacioni I fillimit",
+  "End Location": "Mbarimi I lokacionit",
+  "Click to get device's last location": "Kliko per ta shikuar lokacionin e fundit",
+  "SOS Report": "Sos Raporti",
+  "Vehicle No.": "Nr I vetur�s",
+  "Time": "Koha",
+  "Address": "Adresa",
+  "Speed variation": "Ndryshimi I shpejt�sis�",
+  "Total K.M": "Totali K.M",
+  "Generate Graph": "Gjenero grafikun",
+  "Driver's Performance Report": " Raporti i Performanc�s s� Shoferit ",
+  "Total trip": "Udhetimi tota;",
+  "Total Ontime trip": "",
+  "Ontime vehicles": "مركبات ontime",
+  "group": "Grupet",
+  "TRACKER": "Gjurmuesi ",
+  "REPORTS": "Raportet ",
+  "Speed Variation": " Ndryshimi I shpejt�sis� ",
+  "Trip Report": " Raporti I udhetimit",
+  "Summary Report": " Permbledhja e raportit ",
+  "Summary Reports": " Permbledhja e raportit ",
+  "Overspeeding Report": " Raporti I tejkalimit te shpejtesis",
+  "Overspeeding Reports": " Raporti I tejkalimit te shpejtesis ",
+  "Route Violation Report": " Raporti i Shkeljes s� Rrug�s ",
+  "Route Violation Reports": " Raporti i Shkeljes s� Rrug�s ",
+  "Stoppage Report": " Raporti I ndalesave",
+  "Stoppage Reports": "Raporti I ndalesave ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " raporti i distanc�s ",
+  "Distance Reports": " raporti i distanc�s ",
+  "Driver's performance": " Performanca e shoferit ",
+  "VEHICLE TYPE": " Tipi I vetures",
+  "ROUTE LIST": " Lista e rruges",
+  "Route list": " Lista e rruges",
+  "ROUTE MAPPING": "Mapimi I rruges",
+  "Route Mapping": " Mapimi I rruges",
+  "Dealer Account": " Llogaria e tregtarit",
+  "Geofencing Report": " Raporti I zones gjeografike",
+  "Geofencing Reports": " Raportet e zones gjeografike",
+  "Select Geofencing": "Zgjidh zon�n gjeografike ",
+  "Vehicle Name": " Emri I vetur�s ",
+  "In/Out": "Brenda/jasht� ",
+  "Datetime": " Data ",
+  "Location": "Lokacioni",
+  "GeoFence Name": " Emri I zones gjeografike ",
+  "Click here to get address": "Kliko p�r ta marr adres�n",
+  "Select Your Device": "Zgjidh paisjen ",
+  "IDLE REPORT": " تقرير الخمول ",
+  "Select Vehicle": "Zgjidh veturen",
+  "Min Idle Time (Min)": " ",
+  "Duration (HH:MM:SS)": "Kogezgjatja",
+  "AC Status": "Statusi I AC",
+  "TRACKERS": "Gjurmuesit",
+  "Date Time": "Koha",
+  "On/Off": "On / Off",
+  "Overspeed": "Tejkalimi I shpejt�sis",
+  "POI name": "POI name",
+  "Arrival Time": "Koha e arritjes",
+  "Departure Time": "Koha e nisjes",
+  "Route": "Rruga",
+  "POI Report": "تقرير الاماكن",
+  "From Time": " Prej ",
+  "To Time": "Deri n� ",
+  "Duration": "Koh�zgjatja ",
+  "Start Point": "Pika e startimit",
+  "End Point": " Pika e mbarimit",
+  "Total KM": "Km totale ",
+  "Fuel Consumption (Litre)": "Konsumimi I karburantit ",
+  "Total Running Time (HH:MM)": "Koha totale e levizjes",
+  "Total Stop Time (HH:MM)": " Koha totale e ndales�s ",
+  "Total Idle Time (HH:MM)": " Koha totale n� ler ",
+  "Total Out of reach Time (HH:MM)": "Koha totale jasht rrjetit",
+  "Total No gps Time (HH:MM)": "Koha totale pa gps",
+  "Overspeeding (HH:MM)": "Tejkalimi I shpejtesis",
+  "Route Violation": " Shkelja e Itinerarit",
+  "TRAVEL PATH REPORT": " Raporti  I rrug�s s� udh�timit",
+  "Travel Path Reports": " Raporti  I rrug�s s� udh�timit ",
+  "Device": "Paisje",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "Distanca K.M",
+  "Cumulative Distance (K.M.)": " Distanca Kumulative ",
+  "TRIP REPORT": "Raporti I udh�timit",
+  "Trip Reports": " Raporti I udh�timit ",
+  "TRIP ID": "ID e udh�timit",
+  "VEHICLE NAME": "Emri I vetur�s",
+  "SOURCE ADDRESS": "Burimi I adres�s",
+  "DESTINATION ADDRESS": "Adresa e destinacionit",
+  "DISTANCE": "Distanca",
+  "DURATION": "Koh�zgjatja",
+  "TRIP STATUS": "Statusi I udh�timit",
+  "MILEAGE": "Kilometrazha",
+  "ADD EXPENSES": "Shto shpenzime",
+  "EXPENSES LIST": "Lista e shpenzimeve",
+  "Amount": "Shuma",
+  "Currency": "Valuta",
+  "Payment Mode": " M�nyra e pages�s ",
+  "Expense type": " Lloji i shpenzimeve",
+  "GEO FENCING": "Zona gjeografike",
+  "ADD DEVICE": "Shto paisje",
+  "GENERAL SETTING": "Cil�simet gjenerale",
+  "Device ID *": "ID e paisjes",
+  "Enter Device ID": "Shkruj ID e paisjes",
+  "Device Name * ": "Emri I paisjes",
+  "Enter Device Name": "Shkruaj emrin e paisjes",
+  "SIM Number": "Numri I karteles",
+  "SIM Number 2": "Numri I kartel�s 2",
+  "SIM Provider 2": "Provajderi I karteles se dyt�",
+  "Integration ID": " ID e integrimit
+  "Select User": "Zgjidhe p�rdoruesin",
+  "Driver Contact Number": " Numri i Kontaktit t� Shoferit
+  "Select Vehicle type*": " Zgjidhni llojin e automjetit ",
+  "Type of Vehicle": "Lloji I vetures",
+  "mm/dd/yyyy": "Muaj / Data / Viti",
+  "ICCICD Number": "رقم ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "ID unike",
+  "CID number": "رقم CID",
+  "Chassis number": "Numri I shasis",
+  "Comapny Name": "Emri I kompanis",
+  "Company Address": "Adresa e kompanis",
+  "Transport Office City": " Zyra e Transportit Qyteti ",
+  "Transport Office State": " Zyra e Transportit n� Shtet ",
+  "Invoice Number": " Numri i fatur�s ",
+  "Number of SOS": " Numri i SOS ",
+  "Doc Type": "Tipi I dokumentit",
+  "Enter SIM Provider": "Futni provajderin e kartel�s",
+  "Enter SIM Provider 2": "Futni provajderin e kartel�s s� dyt�",
+  "Driver's contact number": " Numri i kontaktit t� shoferit ",
+  "Device model *": "Modeli I paisjes ",
+  "Vehicle type * ": "Lloji I vetur�s",
+  "Expiration date": " Data e skadimit",
+  "Engine number": "Numri I motorit",
+  "Type of Vehicle ": "Lloji I vetur�s",
+  "Manufacturing company": "Kompania prodhuese ",
+  "Registration date ": " Data e regjistrimit ",
+  "Date of Manufacturing Year ": " Data e Vitit t� Prodhimit ",
+  "Last fitness date ": " Data e fundit",
+  "ICCICD Number ": " رقم ICCICD ",
+  "Fitment Date ": " Data e pajisjes
+  "IMSI ": " IMSI ",
+  "Unique ID ": " ID unike ",
+  "CID number ": "رقم CID",
+  "Chassis number ": "Numri I shasis",
+  "Comapny Name ": "Emri I kompanis",
+  "Comapny Address": "Adresa e kompanis",
+  "Invoice number": "Numri I fatur�s",
+  "Invoice Date": "Data e fatur�s",
+  "No. of SOS ": " Nr. I SOS ",
+  "Add Document field": " Shto fush�n e Dokumentit
+  "Document issued date :": "Data e l�shimit t� dokumentit",
+  "UPDATE AND SAVE": "P�rditso dhe ruaj",
+  "Reason": "Ruaj",
+  "Password": "Fjal�kalimi",
+  "Driver Search": "البحث عن سائق",
+  "Enter User Id": " K�rkimi i shoferit ",
+  "Enter First name": "Fute Emrin",
+  "Enter Last name": "Fute mbiembrin",
+  "Enter email": "Fute emailin",
+  "Enter mobile number": "Fute numrin e telefonit",
+  "Enter Address": "Fute adres�n",
+  "EDIT CUSTOMER": "Edito klientin ",
+  "Delete Dealer": "Fshi tregtarin",
+  "Documents": " Dokument�t",
+  "Document Name": " Emri I dokumentit",
+  "Document number": " Numri I dokumentit ",
+  "Action": "Aksion ",
+  "Add": "Shto",
+  "Upload Documents *": "Ngarko dokument",
+  "Save": " Ruaj",
+  "delete": " Fshi",
+  "Doc number": " Numri I dokumentit",
+  "Download": "Shkarko",
+  "Yes, Delete it!": "Po,fshi",
+  "Cancel": "Anullo",
+  "EDIT DEALER": " Edito tregtarin ",
+  "Are you sure ?": "A jeni t� sigurt�",
+  "you want to delete dealer": " A d�shironi ta fshini tregtarin",
+  "Edit Model": "Edito modelin",
+  "Enter device model": " Fute modelin e paisjes",
+  "Configuration command": " Komanda e konfigurimit ",
+  "Location command": "Lokacioni I komand�s",
+  "Imobilizer command": " Komanda e imobilizuesit ",
+  "Resume command": " Rifillo komand�n ",
+  "Reset command": "Reseto komand�n",
+  "Manufacturer": " Prodhuesi ",
+  "Server Command": "Komanda e serverit",
+  "Mobile Command": " Komanda mobile ",
+  "Update": "Azhurnoni",
+  "Edit trip details": " Redakto detajet e udh�timit
+  "Route name": " Emri i itinerarit
+  "Vehicles name": "Emri I veturave ",
+  "Radius (in meter)": "Radius",
+  "Driver name": " Emri i shoferit ",
+  "Loading site": " Vendi po ngarkohet ",
+  "Unloading site": " Faqja e shkarkimit ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": "Emri I paisjes",
+  "Days: ": "Dit�t ",
+  "M": "E h�n� ",
+  "T": " E mart�",
+  "W": "E merkur�",
+  "Th": "E ejnte",
+  "F": "E premte",
+  "Sa": "E shtun�",
+  "S": "E diel",
+  "Edit Vehicle Type": " Redakto Llojin e Automjetit
+  "Brand:": "Lloji",
+  "Enter Brand Name": "Futni emrin e brendit",
+  "Description:": "P�rshkrimi",
+  "Enter Description": "Futni p�rshkrimin",
+  "Please Enter Description": "Ju lutem futni p�rshkrimin",
+  "Select icon type": "Zgjidhni tipin e ikon�s",
+  "Voltage Value": " Vlera e tensionit ",
+  "Fuel value": " Vlera e karburantit ",
+  "add": "Shto ",
+  "Volatage Calibrator": " Kalibruesi i tensionit ",
+  "Please Enter voltage": " Ju lutemi futni vler�n e karburantit",
+  "Please fuel value": " Please fuel value": ",
+  "Please Enter Tank Size": "Ju lutemi shkruani Madh�sin� e Rezervuarit ",
+  "FUEL EVENTS": " NGJARJET E KARBURANT ",
+  "Please Enter Mileage": " Ju lutemi shkruani kilometrazhin ",
+  "Fuel Change (L)": " Ndryshimi i karburantit (L)",
+  "Search Device": " Pajisja e k�rkimit ",
+  "Generate Report": " Gjenero raportin",
+  "Sleep Mode Temprature": "Temperatura n� sleep mode ",
+  "Temprature": " درجة الحرارة ",
+  "ON": "On",
+  "OFF": "Off",
+  "list": " Lista",
+  "Enter GEO FENCE NAME": "Futni emrin e zones gjeografike",
+  "Get Alert on :": " Merrni Njoftim n� ",
+  "Select Your Geo Fence Region :": "Zgjidhni regjionin e zon�s gjeografike",
+  "Search Box": " Kutia e K�rkimit ",
+  "--Select group--": "Zgjidhni\
+",
+  "--Geofence type--": "Lloji I zones gjeografike",
+  "--GEO FENCE NAME--": "Emri I zones gjeografike",
+  "close": "Mbylle",
+  "DEVICES": " Paisjet",
+  "Matrix Input": "Futja e matric�s",
+  "Device Id-": "ID e paisjes",
+  "Matrix Name": " Emri I matric�s",
+  "Topic": "Tema",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": " Tensioni i karburantit ",
+  "Real Time GPS Based Vechicle Tracking": " Ndjekja e Automjeteve e Bazuar n� GPS n� koh� Reale ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": " Ndjekja e Automjeteve Drejtp�rdrejt ju jep azhurnime n� koh� reale, duke ju lejuar t� merrni informacionin m� t� fundit t� gjurmimit n� automjetin tuaj.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " Hartat e nd�rmarrjeve nga Google-API p�r p�rdorim komercial q� japin detaje t� sakta t� vendndodhjes s� automjeteve ",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Sistem gjurmimi miq�sor p�r p�rdoruesit q� ju ndihmon t� gjurmoni dhe lokalizoni flot�n pa mundim n� Kliko ",
+  "Software as a Service(Saas) with perpetual uptime.": " Softueri si Sh�rbim (SAS) me koh� t� p�rhershme ",
+  "Alerts and Event Notifications": " Sinjalizimet dhe njoftimet e ngjarjes ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " Merrni njoftime ndezur nd�rsa jeni n� l�vizje n� SMS dhe email dhe aplikacionin Mobile, ju do t� azhurnoheni me njoftime n� koh� reale ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " P�rfituesit e shumt� mund t� marrin sinjalizime, Jo vet�m ju, por edhe t� af�rmit tuaj mund t� njihen p�r sinjalizimet e krijuara p�r ndihm� t� menj�hershme. ":",
+  "Schedule your alerts as per your convenience that suits your needs": " Planifikoni sinjalizimet tuaja sipas leht�sis� q� ju p�rshtatet nevojave tuaja",
+  "Detailed Reports for analysis is also available for making quik decisions": " Raportet e holl�sishme p�r analiz� jan� gjithashtu n� dispozicion p�r t� marr� vendime t� shpejta ",
+  "Geofences": "Zonat gjeografike",
+  "Geofence": "Zonat gjeografike",
+  "Upload all Geofence in your account and assign them to the vehicles.": " Ngarko t� gjith� Zonat gjeografike n� llogarin� t�nde dhe caktoji ato t�  automjeteve.",
+  "Find and mark geofences without knowing latitude and longitude values.": " Gjeni dhe sh�noni zonat gjeografike pa ditur vlerat e gjer�sis� dhe gjat�sis� ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "Zonat gjeografike n� dispozicion p�r qasje t� leht�. T� gjitha zonat gjeografike mund t� sh�nohen sipas bindjes s� p�rdoruesit dhe mund t'u caktohen automjeteve n� m�nyr� q� �do sinjalizim t� jet� I derguar. Siguroni t� dashurit tuaj dhe siguroni pun�n e b�r� nga Forcat tuaja",
+  "Date and Time Based reports available for analyzing vehicle usage.": " Raportet e bazuara n� dat�n dhe koh�n, t� disponueshme p�r t� analizuar p�rdorimin e automjetit.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " Raport i konsoliduar i men�ur p�r automjetet / Flota. Ju jep p�rmbledhjen e dit�s p�r automjetin (et)..",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " Raporti i alarmit, raport i konsoliduar p�r t� gjitha sinjalizimet e krijuara nga automjeti. Mbingarkesa, nd�rhyrje, ndezje etj ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " Raporti i zones gjeografike, raport i detajuar se kur dhe n� cil�n koh� automjeti hyri n� zonat gjeografike ",
+  "How it works": "Si punon",
+  "Real-time tracking": "Gjurmim ne koh� reale",
+  "Advanced Reporting": "Raporti I avancuar",
+  "Alerts & Warning": "Njoftim dhe paralajm�rim",
+  "2-Way messaging": "Mesazhe me 2 m�nyra ",
+  "Engine immobilisation": " Imobilizimi i motorit ",
+  "Monitor gauges": " Mat�sit e monitorit ",
+  "Access anytime, anywhere!": " Hyni n� �do koh�, kudo ",
+  "Web browser based software": " Softuer i bazuar n� shfletues uebi ",
+  "Android app": "Aplikacioni android",
+  "iPhone app": "Aplikacioni p�r Iphone",
+  "Request for Demo": "K�rko demo verzionin",
+  "Get Detail": "Merr detaje",
+  "Export To Excel": "Eksporto n� eksell",
+  "Loading Site": "Faqja �sht� duke u ngarkuar",
+  "Distance": "Distanca",
+  "ETA": "ETA",
+  "directions": "الاتجاهات",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "Harta",
+  "Please Select Your Device, From/To Date & Time to view history from above options": " Ju lutemi Zgjidhni Pajisjen Tuaj, Nga / N� Data dhe Koha p�r t� par� historikun nga opsionet e m�sip�rme ",
+  "Generate Map": "Gjenero hart�n",
+  "Trip Name": "Emri udh�timit",
+  "Select destination": " Zgjidh Destinacionin",
+  "CREATE TRIP": "Krijo udh�tim",
+  "Total Distance: ": "Distanca",
+  "Idle Time (Min)": " Koha n� ler",
+  "Go to Site >": "Shko te faqja ",
+  "Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+  "Login": " Hyrja ",
+  "Username / Phone Number": " Emri i p�rdoruesit / numri i telefonit",
+  "Enter Mobile number*": " Vendosni numrin e celularit ",
+  "Confirm New Password": Konfirmoni fjal�kalimin e ri ",
+  "Send OTP": " Dergo OTP",
+  "Back to Login": " Kthehu tek Login ",
+  "Back to previous Form": " Kthehu tek formulari i m�parsh�m ",
+  "Forgot Username / Password?": " Keni harruar emrin e p�rdoruesit / fjal�kalimin ",
+  "First Name": " Emri",
+  "Last Name": "Mbiemri",
+  "Email Id": "Id e emailit",
+  "Organisation": "Organizata",
+  "notifications": "Njftim�t",
+  "Notification Sound": "Z�ri I njoftimeve",
+  "Notifications": "Njoftimet",
+  "Add Phone": "Shto Telefonin",
+  "Close": "Mbylle",
+  "Add Email": "Shto email",
+  "POI details": "تفاصيل نقطة مهمة",
+  "Add POI details": "إضافة نقطة مهمة التفاصيل ",
+  "Type POI name": " اكتب اسم نقطة الاهتمام ",
+  "Previous point duration": " Koh�zgjatja e pik�s s� m�parshme ",
+  "Days": " Dit�t",
+  "Hours": "Or�t ",
+  "Minutes": "Minutat ",
+  "Next point duration": " مدة النقطة التالية ",
+  "Min": " Min ",
+  "Halt": "Ndales� ",
+  "Mapped Vehicles": " Automjete t� pasqyruara ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": "Futni lokacionin ",
+  "ADD": "Shto ",
+  "Routes Search": " K�rkimi I rrug�s ",
+  "Route Status": "Statusi I rrug�s ",
+  "Source": "Burimi ",
+  "Destination": " Destinacioni",
+  "Test name": "Emri I prov�s",
+  "Test Source": "Emri I burimit",
+  "Test destination": "Destinacioni I prov�s",
+  "Routes": " Rrug�t ",
+  "Untracked vehicles": " Veturat e pagjurmuara",
+  "Please Enter Email ID / Phone Number": " Ju lutemi shkruani ID-n� e emailit / numrin e telefonit ",
+  "Please Re Enter Password": " Ju lutem Ri Futni Fjal�kalimin ",
+  "Delete route": "حذف المسار",
+  "Are you sure to delete this route ??": " Jeni i sigurt q� do ta fshini k�t� itinerar ",
+  "DELETE": "Fshi",
+  "Create Trip": "krijo udh�tim",
+  "One way trip": "Udh�tim nj� drejtim�sh",
+  "Two way trip": "Udh�tim dy drejtim�sh ",
+  "Round trip": "Udhetim vatje ardhje ",
+  "Start Date/Time": " Fillimi Data/Koha",
+  "End Date/Time": " Mbarimi Data/Koha",
+  "Planned start time": " Koha e planifikuar e fillimit ",
+  "Planned end time": " Koha e planifikuar e p�rfundimit ",
+  "Actual start time": " Koha aktuale e fillimit ",
+  "Actual end time": " Koha aktuale e p�rfundimit ",
+  "Trip History": " Historia e Udh�timit",
+  "Admin Account": " Llogaria e administratorit ",
+  "Trip type": " Lloji i udh�timit
+  "Routes name": " Emri i rrug�ve ",
+  "Total Distance": " Distanca totale ",
+  "Get route": " Merrni itinerarin ",
+  "Parameters": "Parametrat",
+  "Enter First Name": "Futni Emrin",
+  "Enter Last Name": "Futni Mbiemrin",
+  "Invalid Password": "Fjal�kalim jovalid",
+  "Confirm Password": "Konfirmo fjal�kalimin",
+  "Please Enter Confirm Password": "Konfirmoni fjal�kalimin",
+  "Organisation Name": "Emri I organizates",
+  "Type of user": " Lloji i p�rdoruesit ",
+  "Mobile Verification": "Verifikimi p�rmes celularit",
+  "Mobile Number": "Numri I celularit",
+  "TRIP HISTORY": " historia e udh�timit ",
+  "Event name": "Emri I eventit",
+  "Event time": "Koha e eventit",
+  "Driver": " Shoferi ",
+  "Token": " الرمز",
+  "Restore": "استعادة",
+  "Delete Permanently": "حذف العلامات",
+  "Select no of Days to get reminder for your services": " Zgjidhni Dit�t p�r t� marr� kujtes� p�r sh�rbimet tuaja ",
+  "Prior Notification (Days)": " Njoftimi paraprak (Dit�t) ",
+  "Enter Additonal information here...": "Vendosni informacione shtes�",
+  "Calibration": " Kalibrimi
+}
diff --git a/src/assets/i18n/al1.json b/src/assets/i18n/al1.json
new file mode 100644
index 0000000..fe35781
--- /dev/null
+++ b/src/assets/i18n/al1.json
@@ -0,0 +1,649 @@
+{
+  "ADMIN": "Administratori",
+  "DASHBOARD": "Paneli I perdoruesit",
+  "Admin": "Administratori",
+  "GROUPS": "Grupet",
+  "VEHICLES": "Veturat",
+  "Account Setting": "Cil�simet e llogaris�",
+  "General Setting": "Cil�simet e pergjithshme",
+  "Application language": "Gjuha e aplikimit",
+  "Language Setting": "Cil�simet e gjuh�s",
+  "Reset Password": "Reseto fjal�kalimin ",
+  "Notification Settings": "Cil�simet e njoftim�ve",
+  "TRACKING": "Ndjekje",
+  "Tracking": "Ndjekje",
+  "Reports": "Raportet",
+  "POI LIST": "قائمة العلامات",
+  "POI List": "قائمة العلامات",
+  "ROUTES": "Rrug�t",
+  "NOTIFICATIONS": "Njoftim�t",
+  "DISTRIBUTERS": "Distributor�t",
+  "DEALERS": "Tregtar�t",
+  "Dealers": "Tregtar�t",
+  "CUSTOMERS": "Klient�t",
+  "Customers": "Klient�t",
+  "RUNNING": "N� L�vizje",
+  "IDLE": "N� ler",
+  "IDLE Reports": "Raportet n� Ler",
+  "STOPPED": "E ndaluar",
+  "EXPIRED": "E skaduar",
+  "OUT OF REACH": "I pa arritsh�m",
+  "NO GPS": " NUk ka gps",
+  "Device Icon": " Ikona e paisjes",
+  "Registration number": " Numri I regjistrimit ",
+  "Group": " Grupi",
+  "Today's ODO": " Odo e sotme",
+  "Total ODO": " Odoja totale ",
+  "Last location": " Lokacioni I fundit ",
+  "Last updated on": " Perditsimi I fundit ",
+  "Trip status": "Statusi I udh�timit",
+  "Status": "Statusi",
+  "Satellites": "Satelitet",
+  "Last Speed": "Shpejt�sia e fundit",
+  "FUEL (LITRE)": "Karburanti (Lit�r)",
+  "GPS": "Gps",
+  "AC": "AC",
+  "Fuel Reports": "Raporti I karburantit",
+  "POWER": "Fuqia",
+  "GSM Signal": "Sinjali I GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "Njoftim",
+  "My Account": "Llogaria ime",
+  "Log Out": "Dil",
+  "Refresh Data": "Rifresko t� dh�nat",
+  "Device Search": "K�rkimi I paisjes",
+  "Previous": "I m�parshem",
+  "Next": "Tjetra",
+  "DRIVER MASTER": "T� dh�nat p�r shoferin",
+  "Driver Master": " T� dh�nat p�r shoferin ",
+  "DEVICE MODEL": "Modeli I paisjes",
+  "VEHILE TYPE": "Tipi I vetur�s",
+  "Maintenance Reminder": "Kujtes� per mir�mbajtjen",
+  "Vehicle Expense": "Shpenzimi I vetur�s",
+  "Message Utility": "Sh�rbimi I mesazhit",
+  "Sensor Detail": "Detajet p�r senzorin",
+  "Billing Detail": "Detajet e fatures",
+  "USER MASTER": "T� dh�nat p�r shfryt�zuesin",
+  "User Master": "T� dh�nat p�r shoferin",
+  "DEVICE MASTER": "T� dh�nat per paisjen",
+  "Device Master": " T� dh�nat per paisjen ",
+  "System Logs": "Regjistrat e sistemit",
+  "GPS TRACKER": "Gjurmuesi gps",
+  "CMD PACKETS": " Paketat CMD",
+  "CMD Packets": " Paketa CMD",
+  "INVENTORY LIST": "Lista e inventarit",
+  "Inventory List": "Lista e inventarit",
+  "CUSTOMER INQUIRY": " K�rkesat e klientit",
+  "Driver Name": "Emri I shoferit",
+  "Driver Address": "Adresa e shoferit",
+  "Driver Status": "Statusi I shoferit",
+  "License Number": "Numri I patent�s",
+  "Salary": "Paga",
+  "DOJ": "DOJ",
+  "Delete": "Fshi",
+  "Device Type": "Tipi I paisjes",
+  "Configuration Command": "Komanda e konfigurimit",
+  "Location Command": "Lokacioni I komand�s",
+  "Immobilzer Command": " Komanda e Imobilizuesit",
+  "Resume Command": " Rifllillo komand�n ",
+  "Reset Command": " إعادة تعيين الأوامر ",
+  "Immobilzer Type": " Tipi I imobilizuesit ",
+  "Port": " Porti ",
+  "Edit": " Edito ",
+  "Brand": " Tipi",
+  "Description": " P�ershkrimi",
+  "Model": "Modeli",
+  "Icon Type": " Tipi I ikon�s",
+  "Voltage Calibration": " Kalibrimi i tensionit ",
+  "Tank Size": " Madh�sia e rezervuarit ",
+  "Mileage": "Kilometrazha ",
+  "Last Modified": " Modifikimi I fundit",
+  "Search by phone": " K�erko p�rmes telefonit",
+  "Search by name": " K�erko p�rmes emrit",
+  "From Date": " Prej dat�s",
+  "To Date": " Deri n� dat� ",
+  "FIND": "K�rko ",
+  "Show": "Shfaq ",
+  "entries": " Hyrjet ",
+  "Name": "Emri",
+  "Dealer": "Tregtari",
+  "Is Dealer": "",
+  "Created on": "Krijuar m�",
+  "Email": "Emaili",
+  "Phone": "Telefoni",
+  "Device Name": "Emri I paisjes",
+  "Device Id": "ID e paisjes",
+  "User": "Perdoruesi",
+  "Expire On": "Skadon m�",
+  "Fuel Voltage(mv)": " Tensioni i karburantit (mv)",
+  "Sim Number": " Numri I kartel�s ",
+  "Today ODO": " � اليوم ",
+  "Search by Device ID": " K�rko p�rmes ID s� paisjes ",
+  "Certificates": "�ertifikatat ",
+  "Export Pdf": " Eksporto n� PDF",
+  "Search by Sim Number": " K�erko p�rmes Numrit t� kartel�s",
+  "Export EXCEL": "Eksporto n� eksell",
+  "Device IMEI": "IMEI I paisjes",
+  "Lattitude": "Gjer�sia gjeografike ",
+  "Longitude": "Gjat�sia gjeografike",
+  "Speed": "Shpejtesia",
+  "Device Time": "Koha e paisjes",
+  "Insertion Time": "Koha e futjes",
+  "Last Push": "Shtytja e fundit",
+  "Integration Respnse": "P�rgjigjja e integrimit",
+  "Ignition": "التشغيل",
+  "Power": "Fuqia",
+  "Ext. Volt": "تحويلة فولت",
+  "Fuel Volt": "Volti I karburantit",
+  "Sattelite": "Sateliti",
+  "Powercut Alarm": " Alarmi i nd�rprerjes s� energjis� ",
+  "Inquiry Date": " Data e k�rkesave ",
+  "Customer Name": "Emri I klientit",
+  "Message": "Mesazhi ",
+  "Assigned To": "Caktuar p�r",
+  "Role": "Roli",
+  "No data available in table": "Nuk ka data t� lira ",
+  "Showing": " shfaqet ",
+  "Costumer Inquiry": "K�rkesat e klienit",
+  "System Date": " Data e sistemit",
+  "Vehicle Number": "Numri I vetures",
+  "Chassis Number": "Shasia e vetur�s ",
+  "Engine Number": " Numri I motorit",
+  "Device Model": " Modeli I paisjes",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " Numri I pronarit ",
+  "Alternate Number": "Numri alternativ",
+  "Dealer Name": "Emri I tregtarit",
+  "Tracking Software": " Softueri p�r gjurmim",
+  "Costumer Name": " Emri I klientit",
+  "Device ID": " Id e paisjes",
+  "Operator Name": " Emri I operatorit ",
+  "Protocol ID": " ID e protokollit ",
+  "Command": " Komanda",
+  "ACC": " ACC ",
+  "Battery Status": "Statusi I bateris",
+  "GPS DATA": "T� dh�nat p�r gps",
+  "DEVICES MASTER": "T� dhenat p�r paisjen",
+  "Groups": "Grupet",
+  "Add Group": "Shto grup",
+  "Type group name": "Shkruani emrin e grupit",
+  "CONFIRM": "Konfirmo",
+  "CANCEL": "Anulo",
+  "Active": "Aktiv",
+  "InActive": "Jo aktiv",
+  "Vehicles": "Paisjet",
+  "Reg. Number": "Nr I regjistrmit",
+  "IMEI": "IMEI",
+  "Int. ID": "ID internacionale",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "Provajderi I karteles",
+  "SIM2": "SIM2",
+  "Vehicle Type": "Tipi I vetures",
+  "Owner": "Pronari",
+  "IDLING Since": "خاملة منذ",
+  "STOPPED Since": "E ndalur prej:",
+  "RUNNING Since": " N� L�vizje prej",
+  "Video Tutorial": " Video tutoriale",
+  "VEHICLE LIST": " Lista e veturave",
+  "Vehicle List": " Lista e veturave ",
+  "MAINTENANCE REMINDER": " Kujtes� per mir�mbajtjen ",
+  "REMINDERS": "P�rkujtimet ",
+  "Reminders": "P�rkujtimet ",
+  "Reminder Date": " Data e kujtes�s",
+  "Notification Type": " Tipi I njoftimit",
+  "Reminder Type": " Tipi I p�rkujtimit",
+  "Prior Notification(Days)": "Njoftimi paraprak ",
+  "Additional notes": "Sh�nimet shtes�",
+  "SEARCH": "K�rko",
+  "Live Tracking": "Live tracking",
+  "History Tracking": "Historia e gjurmimit",
+  "Vehicle History": "Historia e vetur�s",
+  "Generate History": "Gjenero historin",
+  "Play History": "Fillo historin",
+  "Select device": "Zgjidh paisjen",
+  "Please choose a device": "Ju lutem zgjidhni paisjen",
+  "OK": "OK",
+  "GEOFENCE": " Zona gjeografike",
+  "Grid view": "Pamja ne rrjet",
+  "List view": "Pamja ne list",
+  "Geo Fencing Name": "Emri I zones gjeografike",
+  "Geofence type": "Tipi I zones gjeografike",
+  "Enter Alert": "Fut alarmin",
+  "Exit Alert": "Ndal alarmin",
+  "Geofence Search": "K�rko zonen gjeografke",
+  "Add Geofence": " Shto zone gjeografike ",
+  "Select group": " Zjidh grupin",
+  "GEO FENCE NAME": "Emri I zones gjeografike",
+  "Get Alert on": "Merrni njoftim n� ",
+  "Entering": "Duke hyr",
+  "Exiting": " Duke dal",
+  "Create": " Krijo",
+  "Select Your Geo Fence Region": "Zgjidh regjionin e zones gjeografike",
+  "Add Geo Fence": "Shto zone gjeografike",
+  "Total Distance(Km)": " Distanca totale (Km) ",
+  "Fuel consumption(Litre)": " Konsumimi I karburantit (Liter) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " Jasht� rrjetit",
+  "No GPS(Hr:Min:Sec)": " Nuk ka gps",
+  "Daily Report": " Raporti ditor ",
+  "Daily Reports": " Raportet ditore ",
+  "Trips": "Udh�timet ",
+  "Max Speed(Km/hr)": " Shpejtesia maksimale",
+  "My App": " Aplikacioni",
+  "AC Report": "Raporti I  AC ",
+  "AC Reports": "Raporti I AC ",
+  "Loading": "Duke u ngarkuar",
+  "Vehicle": "Vetura",
+  "Load Management": " Menaxhimi i ngarkes�s ",
+  "TOTAL VEHICLES": "T� gjitha veturat",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "Paneli I perdoruesit",
+  "RULES": "Rregullat",
+  "Alert Report": "Raporti I njoftimit ",
+  "No": "Jo",
+  "Date": "Data",
+  "Power Cut": "Nd�rprerje e energjis� ",
+  "Battery": "Bateria",
+  "Geofencing": "Zona gjeografike",
+  "Overspeeding": " Tejkalimi I shpejtesis",
+  "Daywise Report": "Raporti ditor  ",
+  "Daywise Reports": " Raporti ditor",
+  "Filter Report": " Raporti I filtrit",
+  "Fuel Consumption Report": " Raporti I konsumimit te karburantit",
+  "Fuel Consumption Reports": " Raporti I konsumimit te karburantit ",
+  "Vehicle name": " Emri I vetur�s",
+  "Start Time": "Koha e startimit ",
+  "End Time": " Koha e mbarimit",
+  "Fuel Consumed (L)": " Konsumimiti karburantit",
+  "Distance(Kms)": "Distanca (Kms)",
+  "In event count": "",
+  "Out event count": "Out out count",
+  "Start Location": "Lokacioni I fillimit",
+  "End Location": "Mbarimi I lokacionit",
+  "Click to get device's last location": "Kliko per ta shikuar lokacionin e fundit",
+  "SOS Report": "Sos Raporti",
+  "Vehicle No.": "Nr I vetur�s",
+  "Time": "Koha",
+  "Address": "Adresa",
+  "Speed variation": "Ndryshimi I shpejt�sis�",
+  "Total K.M": "Totali K.M",
+  "Generate Graph": "Gjenero grafikun",
+  "Driver's Performance Report": " Raporti i Performanc�s s� Shoferit ",
+  "Total trip": "Udhetimi tota;",
+  "Total Ontime trip": "",
+  "Ontime vehicles": "مركبات ontime",
+  "group": "Grupet",
+  "TRACKER": "Gjurmuesi ",
+  "REPORTS": "Raportet ",
+  "Speed Variation": " Ndryshimi I shpejt�sis� ",
+  "Trip Report": " Raporti I udhetimit",
+  "Summary Report": " Permbledhja e raportit ",
+  "Summary Reports": " Permbledhja e raportit ",
+  "Overspeeding Report": " Raporti I tejkalimit te shpejtesis",
+  "Overspeeding Reports": " Raporti I tejkalimit te shpejtesis ",
+  "Route Violation Report": " Raporti i Shkeljes s� Rrug�s ",
+  "Route Violation Reports": " Raporti i Shkeljes s� Rrug�s ",
+  "Stoppage Report": " Raporti I ndalesave",
+  "Stoppage Reports": "Raporti I ndalesave ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " raporti i distanc�s ",
+  "Distance Reports": " raporti i distanc�s ",
+  "Driver's performance": " Performanca e shoferit ",
+  "VEHICLE TYPE": " Tipi I vetures",
+  "ROUTE LIST": " Lista e rruges",
+  "Route list": " Lista e rruges",
+  "ROUTE MAPPING": "Mapimi I rruges",
+  "Route Mapping": " Mapimi I rruges",
+  "Dealer Account": " Llogaria e tregtarit",
+  "Geofencing Report": " Raporti I zones gjeografike",
+  "Geofencing Reports": " Raportet e zones gjeografike",
+  "Select Geofencing": "Zgjidh zon�n gjeografike ",
+  "Vehicle Name": " Emri I vetur�s ",
+  "In/Out": "Brenda/jasht� ",
+  "Datetime": " Data ",
+  "Location": "Lokacioni",
+  "GeoFence Name": " Emri I zones gjeografike ",
+  "Click here to get address": "Kliko p�r ta marr adres�n",
+  "Select Your Device": "Zgjidh paisjen ",
+  "IDLE REPORT": " تقرير الخمول ",
+  "Select Vehicle": "Zgjidh veturen",
+  "Min Idle Time (Min)": " ",
+  "Duration (HH:MM:SS)": "Kogezgjatja",
+  "AC Status": "Statusi I AC",
+  "TRACKERS": "Gjurmuesit",
+  "Date Time": "Koha",
+  "On/Off": "On / Off",
+  "Overspeed": "Tejkalimi I shpejt�sis",
+  "POI name": "POI name",
+  "Arrival Time": "Koha e arritjes",
+  "Departure Time": "Koha e nisjes",
+  "Route": "Rruga",
+  "POI Report": "تقرير الاماكن",
+  "From Time": " Prej ",
+  "To Time": "Deri n� ",
+  "Duration": "Koh�zgjatja ",
+  "Start Point": "Pika e startimit",
+  "End Point": " Pika e mbarimit",
+  "Total KM": "Km totale ",
+  "Fuel Consumption (Litre)": "Konsumimi I karburantit ",
+  "Total Running Time (HH:MM)": "Koha totale e levizjes",
+  "Total Stop Time (HH:MM)": " Koha totale e ndales�s ",
+  "Total Idle Time (HH:MM)": " Koha totale n� ler ",
+  "Total Out of reach Time (HH:MM)": "Koha totale jasht rrjetit",
+  "Total No gps Time (HH:MM)": "Koha totale pa gps",
+  "Overspeeding (HH:MM)": "Tejkalimi I shpejtesis",
+  "Route Violation": " Shkelja e Itinerarit",
+  "TRAVEL PATH REPORT": " Raporti  I rrug�s s� udh�timit",
+  "Travel Path Reports": " Raporti  I rrug�s s� udh�timit ",
+  "Device": "Paisje",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "Distanca K.M",
+  "Cumulative Distance (K.M.)": " Distanca Kumulative ",
+  "TRIP REPORT": "Raporti I udh�timit",
+  "Trip Reports": " Raporti I udh�timit ",
+  "TRIP ID": "ID e udh�timit",
+  "VEHICLE NAME": "Emri I vetur�s",
+  "SOURCE ADDRESS": "Burimi I adres�s",
+  "DESTINATION ADDRESS": "Adresa e destinacionit",
+  "DISTANCE": "Distanca",
+  "DURATION": "Koh�zgjatja",
+  "TRIP STATUS": "Statusi I udh�timit",
+  "MILEAGE": "Kilometrazha",
+  "ADD EXPENSES": "Shto shpenzime",
+  "EXPENSES LIST": "Lista e shpenzimeve",
+  "Amount": "Shuma",
+  "Currency": "Valuta",
+  "Payment Mode": " M�nyra e pages�s ",
+  "Expense type": " Lloji i shpenzimeve",
+  "GEO FENCING": "Zona gjeografike",
+  "ADD DEVICE": "Shto paisje",
+  "GENERAL SETTING": "Cil�simet gjenerale",
+  "Device ID *": "ID e paisjes",
+  "Enter Device ID": "Shkruj ID e paisjes",
+  "Device Name * ": "Emri I paisjes",
+  "Enter Device Name": "Shkruaj emrin e paisjes",
+  "SIM Number": "Numri I karteles",
+  "SIM Number 2": "Numri I kartel�s 2",
+  "SIM Provider 2": "Provajderi I karteles se dyt�",
+  "Integration ID": " ID e integrimit",
+  "Select User": "Zgjidhe p�rdoruesin",
+  "Driver Contact Number": " Numri i Kontaktit t� Shoferit",
+  "Select Vehicle type*": " Zgjidhni llojin e automjetit ",
+  "Type of Vehicle": "Lloji I vetures",
+  "mm/dd/yyyy": "Muaj / Data / Viti",
+  "ICCICD Number": "رقم ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "ID unike",
+  "CID number": "رقم CID",
+  "Chassis number": "Numri I shasis",
+  "Comapny Name": "Emri I kompanis",
+  "Company Address": "Adresa e kompanis",
+  "Transport Office City": " Zyra e Transportit Qyteti ",
+  "Transport Office State": " Zyra e Transportit n� Shtet ",
+  "Invoice Number": " Numri i fatur�s ",
+  "Number of SOS": " Numri i SOS ",
+  "Doc Type": "Tipi I dokumentit",
+  "Enter SIM Provider": "Futni provajderin e kartel�s",
+  "Enter SIM Provider 2": "Futni provajderin e kartel�s s� dyt�",
+  "Driver's contact number": " Numri i kontaktit t� shoferit ",
+  "Device model *": "Modeli I paisjes ",
+  "Vehicle type * ": "Lloji I vetur�s",
+  "Expiration date": " Data e skadimit",
+  "Engine number": "Numri I motorit",
+  "Type of Vehicle ": "Lloji I vetur�s",
+  "Manufacturing company": "Kompania prodhuese ",
+  "Registration date ": " Data e regjistrimit ",
+  "Date of Manufacturing Year ": " Data e Vitit t� Prodhimit ",
+  "Last fitness date ": " Data e fundit",
+  "ICCICD Number ": " رقم ICCICD ",
+  "Fitment Date ": " Data e pajisjes",
+  "IMSI ": " IMSI ",
+  "Unique ID ": " ID unike ",
+  "CID number ": "رقم CID",
+  "Chassis number ": "Numri I shasis",
+  "Comapny Name ": "Emri I kompanis",
+  "Comapny Address": "Adresa e kompanis",
+  "Invoice number": "Numri I fatur�s",
+  "Invoice Date": "Data e fatur�s",
+  "No. of SOS ": " Nr. I SOS ",
+  "Add Document field": " Shto fush�n e Dokumentit",
+  "Document issued date :": "Data e l�shimit t� dokumentit",
+  "UPDATE AND SAVE": "P�rditso dhe ruaj",
+  "Reason": "Ruaj",
+  "Password": "Fjal�kalimi",
+  "Driver Search": "البحث عن سائق",
+  "Enter User Id": " K�rkimi i shoferit ",
+  "Enter First name": "Fute Emrin",
+  "Enter Last name": "Fute mbiembrin",
+  "Enter email": "Fute emailin",
+  "Enter mobile number": "Fute numrin e telefonit",
+  "Enter Address": "Fute adres�n",
+  "EDIT CUSTOMER": "Edito klientin ",
+  "Delete Dealer": "Fshi tregtarin",
+  "Documents": " Dokument�t",
+  "Document Name": " Emri I dokumentit",
+  "Document number": " Numri I dokumentit ",
+  "Action": "Aksion ",
+  "Add": "Shto",
+  "Upload Documents *": "Ngarko dokument",
+  "Save": " Ruaj",
+  "delete": " Fshi",
+  "Doc number": " Numri I dokumentit",
+  "Download": "Shkarko",
+  "Yes, Delete it!": "Po,fshi",
+  "Cancel": "Anullo",
+  "EDIT DEALER": " Edito tregtarin ",
+  "Are you sure ?": "A jeni t� sigurt�",
+  "you want to delete dealer": " A d�shironi ta fshini tregtarin",
+  "Edit Model": "Edito modelin",
+  "Enter device model": " Fute modelin e paisjes",
+  "Configuration command": " Komanda e konfigurimit ",
+  "Location command": "Lokacioni I komand�s",
+  "Imobilizer command": " Komanda e imobilizuesit ",
+  "Resume command": " Rifillo komand�n ",
+  "Reset command": "Reseto komand�n",
+  "Manufacturer": " Prodhuesi ",
+  "Server Command": "Komanda e serverit",
+  "Mobile Command": " Komanda mobile ",
+  "Update": "Azhurnoni",
+  "Edit trip details": " Redakto detajet e udh�timit",
+  "Route name": " Emri i itinerarit",
+  "Vehicles name": "Emri I veturave ",
+  "Radius (in meter)": "Radius",
+  "Driver name": " Emri i shoferit ",
+  "Loading site": " Vendi po ngarkohet ",
+  "Unloading site": " Faqja e shkarkimit ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": "Emri I paisjes",
+  "Days: ": "Dit�t ",
+  "M": "E h�n� ",
+  "T": " E mart�",
+  "W": "E merkur�",
+  "Th": "E ejnte",
+  "F": "E premte",
+  "Sa": "E shtun�",
+  "S": "E diel",
+  "Edit Vehicle Type": " Redakto Llojin e Automjetit",
+  "Brand:": "Lloji",
+  "Enter Brand Name": "Futni emrin e brendit",
+  "Description:": "P�rshkrimi",
+  "Enter Description": "Futni p�rshkrimin",
+  "Please Enter Description": "Ju lutem futni p�rshkrimin",
+  "Select icon type": "Zgjidhni tipin e ikon�s",
+  "Voltage Value": " Vlera e tensionit ",
+  "Fuel value": " Vlera e karburantit ",
+  "add": "Shto ",
+  "Volatage Calibrator": " Kalibruesi i tensionit ",
+  "Please Enter voltage": " Ju lutemi futni vler�n e karburantit",
+  "Please fuel value": " Please fuel value",
+  "Please Enter Tank Size": "Ju lutemi shkruani Madh�sin� e Rezervuarit ",
+  "FUEL EVENTS": " NGJARJET E KARBURANT ",
+  "Please Enter Mileage": " Ju lutemi shkruani kilometrazhin ",
+  "Fuel Change (L)": " Ndryshimi i karburantit (L)",
+  "Search Device": " Pajisja e k�rkimit ",
+  "Generate Report": " Gjenero raportin",
+  "Sleep Mode Temprature": "Temperatura n� sleep mode ",
+  "Temprature": " درجة الحرارة ",
+  "ON": "On",
+  "OFF": "Off",
+  "list": " Lista",
+  "Enter GEO FENCE NAME": "Futni emrin e zones gjeografike",
+  "Get Alert on :": " Merrni Njoftim n� ",
+  "Select Your Geo Fence Region :": "Zgjidhni regjionin e zon�s gjeografike",
+  "Search Box": " Kutia e K�rkimit ",
+  "--Select group--": "Zgjidhni",
+  "--Geofence type--": "Lloji I zones gjeografike",
+  "--GEO FENCE NAME--": "Emri I zones gjeografike",
+  "close": "Mbylle",
+  "DEVICES": " Paisjet",
+  "Matrix Input": "Futja e matric�s",
+  "Device Id-": "ID e paisjes",
+  "Matrix Name": " Emri I matric�s",
+  "Topic": "Tema",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": " Tensioni i karburantit ",
+  "Real Time GPS Based Vechicle Tracking": " Ndjekja e Automjeteve e Bazuar n� GPS n� koh� Reale ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": " Ndjekja e Automjeteve Drejtp�rdrejt ju jep azhurnime n� koh� reale, duke ju lejuar t� merrni informacionin m� t� fundit t� gjurmimit n� automjetin tuaj.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " Hartat e nd�rmarrjeve nga Google-API p�r p�rdorim komercial q� japin detaje t� sakta t� vendndodhjes s� automjeteve ",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Sistem gjurmimi miq�sor p�r p�rdoruesit q� ju ndihmon t� gjurmoni dhe lokalizoni flot�n pa mundim n� Kliko ",
+  "Software as a Service(Saas) with perpetual uptime.": " Softueri si Sh�rbim (SAS) me koh� t� p�rhershme ",
+  "Alerts and Event Notifications": " Sinjalizimet dhe njoftimet e ngjarjes ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " Merrni njoftime ndezur nd�rsa jeni n� l�vizje n� SMS dhe email dhe aplikacionin Mobile, ju do t� azhurnoheni me njoftime n� koh� reale ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " P�rfituesit e shumt� mund t� marrin sinjalizime, Jo vet�m ju, por edhe t� af�rmit tuaj mund t� njihen p�r sinjalizimet e krijuara p�r ndihm� t� menj�hershme. ",
+  "Schedule your alerts as per your convenience that suits your needs": " Planifikoni sinjalizimet tuaja sipas leht�sis� q� ju p�rshtatet nevojave tuaja",
+  "Detailed Reports for analysis is also available for making quik decisions": " Raportet e holl�sishme p�r analiz� jan� gjithashtu n� dispozicion p�r t� marr� vendime t� shpejta ",
+  "Geofences": "Zonat gjeografike",
+  "Geofence": "Zonat gjeografike",
+  "Upload all Geofence in your account and assign them to the vehicles.": " Ngarko t� gjith� Zonat gjeografike n� llogarin� t�nde dhe caktoji ato t�  automjeteve.",
+  "Find and mark geofences without knowing latitude and longitude values.": " Gjeni dhe sh�noni zonat gjeografike pa ditur vlerat e gjer�sis� dhe gjat�sis� ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "Zonat gjeografike n� dispozicion p�r qasje t� leht�. T� gjitha zonat gjeografike mund t� sh�nohen sipas bindjes s� p�rdoruesit dhe mund t'u caktohen automjeteve n� m�nyr� q� �do sinjalizim t� jet� I derguar. Siguroni t� dashurit tuaj dhe siguroni pun�n e b�r� nga Forcat tuaja",
+  "Date and Time Based reports available for analyzing vehicle usage.": " Raportet e bazuara n� dat�n dhe koh�n, t� disponueshme p�r t� analizuar p�rdorimin e automjetit.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " Raport i konsoliduar i men�ur p�r automjetet / Flota. Ju jep p�rmbledhjen e dit�s p�r automjetin (et)..",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " Raporti i alarmit, raport i konsoliduar p�r t� gjitha sinjalizimet e krijuara nga automjeti. Mbingarkesa, nd�rhyrje, ndezje etj ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " Raporti i zones gjeografike, raport i detajuar se kur dhe n� cil�n koh� automjeti hyri n� zonat gjeografike ",
+  "How it works": "Si punon",
+  "Real-time tracking": "Gjurmim ne koh� reale",
+  "Advanced Reporting": "Raporti I avancuar",
+  "Alerts & Warning": "Njoftim dhe paralajm�rim",
+  "2-Way messaging": "Mesazhe me 2 m�nyra ",
+  "Engine immobilisation": " Imobilizimi i motorit ",
+  "Monitor gauges": " Mat�sit e monitorit ",
+  "Access anytime, anywhere!": " Hyni n� �do koh�, kudo ",
+  "Web browser based software": " Softuer i bazuar n� shfletues uebi ",
+  "Android app": "Aplikacioni android",
+  "iPhone app": "Aplikacioni p�r Iphone",
+  "Request for Demo": "K�rko demo verzionin",
+  "Get Detail": "Merr detaje",
+  "Export To Excel": "Eksporto n� eksell",
+  "Loading Site": "Faqja �sht� duke u ngarkuar",
+  "Distance": "Distanca",
+  "ETA": "ETA",
+  "directions": "الاتجاهات",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "Harta",
+  "Please Select Your Device, From/To Date & Time to view history from above options": " Ju lutemi Zgjidhni Pajisjen Tuaj, Nga / N� Data dhe Koha p�r t� par� historikun nga opsionet e m�sip�rme ",
+  "Generate Map": "Gjenero hart�n",
+  "Trip Name": "Emri udh�timit",
+  "Select destination": " Zgjidh Destinacionin",
+  "CREATE TRIP": "Krijo udh�tim",
+  "Total Distance: ": "Distanca",
+  "Idle Time (Min)": " Koha n� ler",
+  "Go to Site >": "Shko te faqja ",
+  "Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+  "Login": " Hyrja ",
+  "Username / Phone Number": " Emri i p�rdoruesit / numri i telefonit",
+  "Enter Mobile number*": " Vendosni numrin e celularit ",
+  "Confirm New Password": "Konfirmoni fjal�kalimin e ri ",
+  "Send OTP": " Dergo OTP",
+  "Back to Login": " Kthehu tek Login ",
+  "Back to previous Form": " Kthehu tek formulari i m�parsh�m ",
+  "Forgot Username / Password?": " Keni harruar emrin e p�rdoruesit / fjal�kalimin ",
+  "First Name": " Emri",
+  "Last Name": "Mbiemri",
+  "Email Id": "Id e emailit",
+  "Organisation": "Organizata",
+  "notifications": "Njftim�t",
+  "Notification Sound": "Z�ri I njoftimeve",
+  "Notifications": "Njoftimet",
+  "Add Phone": "Shto Telefonin",
+  "Close": "Mbylle",
+  "Add Email": "Shto email",
+  "POI details": "تفاصيل نقطة مهمة",
+  "Add POI details": "إضافة نقطة مهمة التفاصيل ",
+  "Type POI name": " اكتب اسم نقطة الاهتمام ",
+  "Previous point duration": " Koh�zgjatja e pik�s s� m�parshme ",
+  "Days": " Dit�t",
+  "Hours": "Or�t ",
+  "Minutes": "Minutat ",
+  "Next point duration": " مدة النقطة التالية ",
+  "Min": " Min ",
+  "Halt": "Ndales� ",
+  "Mapped Vehicles": " Automjete t� pasqyruara ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": "Futni lokacionin ",
+  "ADD": "Shto ",
+  "Routes Search": " K�rkimi I rrug�s ",
+  "Route Status": "Statusi I rrug�s ",
+  "Source": "Burimi ",
+  "Destination": " Destinacioni",
+  "Test name": "Emri I prov�s",
+  "Test Source": "Emri I burimit",
+  "Test destination": "Destinacioni I prov�s",
+  "Routes": " Rrug�t ",
+  "Untracked vehicles": " Veturat e pagjurmuara",
+  "Please Enter Email ID / Phone Number": " Ju lutemi shkruani ID-n� e emailit / numrin e telefonit ",
+  "Please Re Enter Password": " Ju lutem Ri Futni Fjal�kalimin ",
+  "Delete route": "حذف المسار",
+  "Are you sure to delete this route ??": " Jeni i sigurt q� do ta fshini k�t� itinerar ",
+  "DELETE": "Fshi",
+  "Create Trip": "krijo udh�tim",
+  "One way trip": "Udh�tim nj� drejtim�sh",
+  "Two way trip": "Udh�tim dy drejtim�sh ",
+  "Round trip": "Udhetim vatje ardhje ",
+  "Start Date/Time": " Fillimi Data/Koha",
+  "End Date/Time": " Mbarimi Data/Koha",
+  "Planned start time": " Koha e planifikuar e fillimit ",
+  "Planned end time": " Koha e planifikuar e p�rfundimit ",
+  "Actual start time": " Koha aktuale e fillimit ",
+  "Actual end time": " Koha aktuale e p�rfundimit ",
+  "Trip History": " Historia e Udh�timit",
+  "Admin Account": " Llogaria e administratorit ",
+  "Trip type": " Lloji i udh�timit",
+  "Routes name": " Emri i rrug�ve ",
+  "Total Distance": " Distanca totale ",
+  "Get route": " Merrni itinerarin ",
+  "Parameters": "Parametrat",
+  "Enter First Name": "Futni Emrin",
+  "Enter Last Name": "Futni Mbiemrin",
+  "Invalid Password": "Fjal�kalim jovalid",
+  "Confirm Password": "Konfirmo fjal�kalimin",
+  "Please Enter Confirm Password": "Konfirmoni fjal�kalimin",
+  "Organisation Name": "Emri I organizates",
+  "Type of user": " Lloji i p�rdoruesit ",
+  "Mobile Verification": "Verifikimi p�rmes celularit",
+  "Mobile Number": "Numri I celularit",
+  "TRIP HISTORY": " historia e udh�timit ",
+  "Event name": "Emri I eventit",
+  "Event time": "Koha e eventit",
+  "Driver": " Shoferi ",
+  "Token": " الرمز",
+  "Restore": "استعادة",
+  "Delete Permanently": "حذف العلامات",
+  "Select no of Days to get reminder for your services": " Zgjidhni Dit�t p�r t� marr� kujtes� p�r sh�rbimet tuaja ",
+  "Prior Notification (Days)": " Njoftimi paraprak (Dit�t) ",
+  "Enter Additonal information here...": "Vendosni informacione shtes�",
+  "Calibration": " Kalibrimi"
+}
diff --git a/src/assets/i18n/albanian.json b/src/assets/i18n/albanian.json
new file mode 100644
index 0000000..81619c3
--- /dev/null
+++ b/src/assets/i18n/albanian.json
@@ -0,0 +1,650 @@
+{
+  "ADMIN": "Administratori",
+  "DASHBOARD": "Paneli I perdoruesit",
+  "Admin": "Administratori",
+  "GROUPS": "Grupet",
+  "VEHICLES": "Veturat",
+  "Account Setting": "Cil�simet e llogaris�",
+  "General Setting": "Cil�simet e pergjithshme",
+  "Application language": "Gjuha e aplikimit",
+  "Language Setting": "Cil�simet e gjuh�s",
+  "Reset Password": "Reseto fjal�kalimin ",
+  "Notification Settings": "Cil�simet e njoftim�ve",
+  "TRACKING": "Ndjekje",
+  "Tracking": "Ndjekje",
+  "Reports": "Raportet",
+  "POI LIST": "قائمة العلامات",
+  "POI List": "قائمة العلامات",
+  "ROUTES": "Rrug�t",
+  "NOTIFICATIONS": "Njoftim�t",
+  "DISTRIBUTERS": "Distributor�t",
+  "DEALERS": "Tregtar�t",
+  "Dealers": "Tregtar�t",
+  "CUSTOMERS": "Klient�t",
+  "Customers": "Klient�t",
+  "RUNNING": "N� L�vizje",
+  "IDLE": "N� ler",
+  "IDLE Reports": "Raportet n� Ler",
+  "STOPPED": "E ndaluar",
+  "EXPIRED": "E skaduar",
+  "OUT OF REACH": "I pa arritsh�m",
+  "NO GPS": " NUk ka gps",
+  "Device Icon": " Ikona e paisjes",
+  "Registration number": " Numri I regjistrimit ",
+  "Group": " Grupi",
+  "Today's ODO": " Odo e sotme",
+  "Total ODO": " Odoja totale ",
+  "Last location": " Lokacioni I fundit ",
+  "Last updated on": " Perditsimi I fundit ",
+  "Trip status": "Statusi I udh�timit",
+  "Status": "Statusi",
+  "Satellites": "Satelitet",
+  "Last Speed": "Shpejt�sia e fundit",
+  "FUEL (LITRE)": "Karburanti (Lit�r)",
+  "GPS": "Gps",
+  "AC": "AC",
+  "Fuel Reports": "Raporti I karburantit",
+  "POWER": "Fuqia",
+  "GSM Signal": "Sinjali I GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "Njoftim",
+  "My Account": "Llogaria ime",
+  "Log Out": "Dil",
+  "Refresh Data": "Rifresko t� dh�nat",
+  "Device Search": "K�rkimi I paisjes",
+  "Previous": "I m�parshem",
+  "Next": "Tjetra",
+  "DRIVER MASTER": "T� dh�nat p�r shoferin",
+  "Driver Master": " T� dh�nat p�r shoferin ",
+  "DEVICE MODEL": "Modeli I paisjes",
+  "VEHILE TYPE": "Tipi I vetur�s",
+  "Maintenance Reminder": "Kujtes� per mir�mbajtjen",
+  "Vehicle Expense": "Shpenzimi I vetur�s",
+  "Message Utility": "Sh�rbimi I mesazhit",
+  "Sensor Detail": "Detajet p�r senzorin",
+  "Billing Detail": "Detajet e fatures",
+  "USER MASTER": "T� dh�nat p�r shfryt�zuesin",
+  "User Master": "T� dh�nat p�r shoferin",
+  "DEVICE MASTER": "T� dh�nat per paisjen",
+  "Device Master": " T� dh�nat per paisjen ",
+  "System Logs": "Regjistrat e sistemit",
+  "GPS TRACKER": "Gjurmuesi gps",
+  "CMD PACKETS": " Paketat CMD",
+  "CMD Packets": " Paketa CMD",
+  "INVENTORY LIST": "Lista e inventarit",
+  "Inventory List": "Lista e inventarit",
+  "CUSTOMER INQUIRY": " K�rkesat e klientit",
+  "Driver Name": "Emri I shoferit",
+  "Driver Address": "Adresa e shoferit",
+  "Driver Status": "Statusi I shoferit",
+  "License Number": "Numri I patent�s",
+  "Salary": "Paga",
+  "DOJ": "DOJ",
+  "Delete": "Fshi",
+  "Device Type": "Tipi I paisjes",
+  "Configuration Command": "Komanda e konfigurimit",
+  "Location Command": "Lokacioni I komand�s",
+  "Immobilzer Command": " Komanda e Imobilizuesit
+  "Resume Command": " Rifllillo komand�n ",
+  "Reset Command": " إعادة تعيين الأوامر ",
+  "Immobilzer Type": " Tipi I imobilizuesit ",
+  "Port": " Porti ",
+  "Edit": " Edito ",
+  "Brand": " Tipi",
+  "Description": " P�ershkrimi",
+  "Model": "Modeli",
+  "Icon Type": " Tipi I ikon�s",
+  "Voltage Calibration": " Kalibrimi i tensionit ",
+  "Tank Size": " Madh�sia e rezervuarit ",
+  "Mileage": "Kilometrazha ",
+  "Last Modified": " Modifikimi I fundit",
+  "Search by phone": " K�erko p�rmes telefonit",
+  "Search by name": " K�erko p�rmes emrit",
+  "From Date": " Prej dat�s",
+  "To Date": " Deri n� dat� ",
+  "FIND": "K�rko ",
+  "Show": "Shfaq ",
+  "entries": " Hyrjet ",
+  "Name": "Emri",
+  "Dealer": "Tregtari",
+  "Is Dealer": "",
+  "Created on": "Krijuar m�",
+  "Email": "Emaili",
+  "Phone": "Telefoni",
+  "Device Name": "Emri I paisjes",
+  "Device Id": "ID e paisjes",
+  "User": "Perdoruesi",
+  "Expire On": "Skadon m�",
+  "Fuel Voltage(mv)": " Tensioni i karburantit (mv)",
+  "Sim Number": " Numri I kartel�s ",
+  "Today ODO": " � اليوم ",
+  "Search by Device ID": " K�rko p�rmes ID s� paisjes ",
+  "Certificates": "�ertifikatat ",
+  "Export Pdf": " Eksporto n� PDF",
+  "Search by Sim Number": " K�erko p�rmes Numrit t� kartel�s",
+  "Export EXCEL": "Eksporto n� eksell",
+  "Device IMEI": "IMEI I paisjes",
+  "Lattitude": "Gjer�sia gjeografike ",
+  "Longitude": "Gjat�sia gjeografike",
+  "Speed": "Shpejtesia",
+  "Device Time": "Koha e paisjes",
+  "Insertion Time": "Koha e futjes",
+  "Last Push": "Shtytja e fundit",
+  "Integration Respnse": "P�rgjigjja e integrimit",
+  "Ignition": "التشغيل",
+  "Power": "Fuqia",
+  "Ext. Volt": "تحويلة فولت",
+  "Fuel Volt": "Volti I karburantit",
+  "Sattelite": "Sateliti",
+  "Powercut Alarm": " Alarmi i nd�rprerjes s� energjis� ",
+  "Inquiry Date": " Data e k�rkesave ",
+  "Customer Name": "Emri I klientit",
+  "Message": "Mesazhi ",
+  "Assigned To": "Caktuar p�r",
+  "Role": "Roli",
+  "No data available in table": "Nuk ka data t� lira ",
+  "Showing": " shfaqet ",
+  "Costumer Inquiry": "K�rkesat e klienit",
+  "System Date": " Data e sistemit",
+  "Vehicle Number": "Numri I vetures",
+  "Chassis Number": "Shasia e vetur�s ",
+  "Engine Number": " Numri I motorit",
+  "Device Model": " Modeli I paisjes",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " Numri I pronarit ",
+  "Alternate Number": "Numri alternativ",
+  "Dealer Name": "Emri I tregtarit",
+  "Tracking Software": " Softueri p�r gjurmim",
+  "Costumer Name": " Emri I klientit",
+  "Device ID": " Id e paisjes",
+  "Operator Name": " Emri I operatorit ",
+  "Protocol ID": " ID e protokollit ",
+  "Command": " Komanda",
+  "ACC": " ACC ",
+  "Battery Status": "Statusi I bateris",
+  "GPS DATA": "T� dh�nat p�r gps",
+  "DEVICES MASTER": "T� dhenat p�r paisjen",
+  "Groups": "Grupet",
+  "Add Group": "Shto grup",
+  "Type group name": "Shkruani emrin e grupit",
+  "CONFIRM": "Konfirmo",
+  "CANCEL": "Anulo",
+  "Active": "Aktiv",
+  "InActive": "Jo aktiv",
+  "Vehicles": "Paisjet",
+  "Reg. Number": "Nr I regjistrmit",
+  "IMEI": "IMEI",
+  "Int. ID": "ID internacionale",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "Provajderi I karteles",
+  "SIM2": "SIM2",
+  "Vehicle Type": "Tipi I vetures",
+  "Owner": "Pronari",
+  "IDLING Since": "خاملة منذ",
+  "STOPPED Since": "E ndalur prej:",
+  "RUNNING Since": " N� L�vizje prej",
+  "Video Tutorial": " Video tutoriale",
+  "VEHICLE LIST": " Lista e veturave",
+  "Vehicle List": " Lista e veturave ",
+  "MAINTENANCE REMINDER": " Kujtes� per mir�mbajtjen ",
+  "REMINDERS": "P�rkujtimet ",
+  "Reminders": "P�rkujtimet ",
+  "Reminder Date": " Data e kujtes�s",
+  "Notification Type": " Tipi I njoftimit",
+  "Reminder Type": " Tipi I p�rkujtimit",
+  "Prior Notification(Days)": "Njoftimi paraprak ",
+  "Additional notes": "Sh�nimet shtes�",
+  "SEARCH": "K�rko",
+  "Live Tracking": "Live tracking",
+  "History Tracking": "Historia e gjurmimit",
+  "Vehicle History": "Historia e vetur�s",
+  "Generate History": "Gjenero historin",
+  "Play History": "Fillo historin",
+  "Select device": "Zgjidh paisjen",
+  "Please choose a device": "Ju lutem zgjidhni paisjen",
+  "OK": "OK",
+  "GEOFENCE": " Zona gjeografike",
+  "Grid view": "Pamja ne rrjet",
+  "List view": "Pamja ne list",
+  "Geo Fencing Name": "Emri I zones gjeografike",
+  "Geofence type": "Tipi I zones gjeografike",
+  "Enter Alert": "Fut alarmin",
+  "Exit Alert": "Ndal alarmin",
+  "Geofence Search": "K�rko zonen gjeografke",
+  "Add Geofence": " Shto zone gjeografike ",
+  "Select group": " Zjidh grupin",
+  "GEO FENCE NAME": "Emri I zones gjeografike",
+  "Get Alert on": "Merrni njoftim n� ",
+  "Entering": "Duke hyr",
+  "Exiting": " Duke dal",
+  "Create": " Krijo",
+  "Select Your Geo Fence Region": "Zgjidh regjionin e zones gjeografike",
+  "Add Geo Fence": "Shto zone gjeografike",
+  "Total Distance(Km)": " Distanca totale (Km) ",
+  "Fuel consumption(Litre)": " Konsumimi I karburantit (Liter) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " Jasht� rrjetit",
+  "No GPS(Hr:Min:Sec)": " Nuk ka gps",
+  "Daily Report": " Raporti ditor ",
+  "Daily Reports": " Raportet ditore ",
+  "Trips": "Udh�timet ",
+  "Max Speed(Km/hr)": " Shpejtesia maksimale
+",
+  "My App": " Aplikacioni",
+  "AC Report": "Raporti I  AC ",
+  "AC Reports": "Raporti I AC ",
+  "Loading": "Duke u ngarkuar",
+  "Vehicle": "Vetura",
+  "Load Management": " Menaxhimi i ngarkes�s ",
+  "TOTAL VEHICLES": "T� gjitha veturat",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "Paneli I perdoruesit",
+  "RULES": "Rregullat",
+  "Alert Report": "Raporti I njoftimit ",
+  "No": "Jo",
+  "Date": "Data",
+  "Power Cut": "Nd�rprerje e energjis� ",
+  "Battery": "Bateria",
+  "Geofencing": "Zona gjeografike",
+  "Overspeeding": " Tejkalimi I shpejtesis",
+  "Daywise Report": "Raporti ditor  ",
+  "Daywise Reports": " Raporti ditor",
+  "Filter Report": " Raporti I filtrit",
+  "Fuel Consumption Report": " Raporti I konsumimit te karburantit",
+  "Fuel Consumption Reports": " Raporti I konsumimit te karburantit ",
+  "Vehicle name": " Emri I vetur�s",
+  "Start Time": "Koha e startimit ",
+  "End Time": " Koha e mbarimit",
+  "Fuel Consumed (L)": " Konsumimiti karburantit",
+  "Distance(Kms)": "Distanca (Kms)",
+  "In event count": "",
+  "Out event count": "Out out count",
+  "Start Location": "Lokacioni I fillimit",
+  "End Location": "Mbarimi I lokacionit",
+  "Click to get device's last location": "Kliko per ta shikuar lokacionin e fundit",
+  "SOS Report": "Sos Raporti",
+  "Vehicle No.": "Nr I vetur�s",
+  "Time": "Koha",
+  "Address": "Adresa",
+  "Speed variation": "Ndryshimi I shpejt�sis�",
+  "Total K.M": "Totali K.M",
+  "Generate Graph": "Gjenero grafikun",
+  "Driver's Performance Report": " Raporti i Performanc�s s� Shoferit ",
+  "Total trip": "Udhetimi tota;",
+  "Total Ontime trip": "",
+  "Ontime vehicles": "مركبات ontime",
+  "group": "Grupet",
+  "TRACKER": "Gjurmuesi ",
+  "REPORTS": "Raportet ",
+  "Speed Variation": " Ndryshimi I shpejt�sis� ",
+  "Trip Report": " Raporti I udhetimit",
+  "Summary Report": " Permbledhja e raportit ",
+  "Summary Reports": " Permbledhja e raportit ",
+  "Overspeeding Report": " Raporti I tejkalimit te shpejtesis",
+  "Overspeeding Reports": " Raporti I tejkalimit te shpejtesis ",
+  "Route Violation Report": " Raporti i Shkeljes s� Rrug�s ",
+  "Route Violation Reports": " Raporti i Shkeljes s� Rrug�s ",
+  "Stoppage Report": " Raporti I ndalesave",
+  "Stoppage Reports": "Raporti I ndalesave ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " raporti i distanc�s ",
+  "Distance Reports": " raporti i distanc�s ",
+  "Driver's performance": " Performanca e shoferit ",
+  "VEHICLE TYPE": " Tipi I vetures",
+  "ROUTE LIST": " Lista e rruges",
+  "Route list": " Lista e rruges",
+  "ROUTE MAPPING": "Mapimi I rruges",
+  "Route Mapping": " Mapimi I rruges",
+  "Dealer Account": " Llogaria e tregtarit",
+  "Geofencing Report": " Raporti I zones gjeografike",
+  "Geofencing Reports": " Raportet e zones gjeografike",
+  "Select Geofencing": "Zgjidh zon�n gjeografike ",
+  "Vehicle Name": " Emri I vetur�s ",
+  "In/Out": "Brenda/jasht� ",
+  "Datetime": " Data ",
+  "Location": "Lokacioni",
+  "GeoFence Name": " Emri I zones gjeografike ",
+  "Click here to get address": "Kliko p�r ta marr adres�n",
+  "Select Your Device": "Zgjidh paisjen ",
+  "IDLE REPORT": " تقرير الخمول ",
+  "Select Vehicle": "Zgjidh veturen",
+  "Min Idle Time (Min)": " ",
+  "Duration (HH:MM:SS)": "Kogezgjatja",
+  "AC Status": "Statusi I AC",
+  "TRACKERS": "Gjurmuesit",
+  "Date Time": "Koha",
+  "On/Off": "On / Off",
+  "Overspeed": "Tejkalimi I shpejt�sis",
+  "POI name": "POI name",
+  "Arrival Time": "Koha e arritjes",
+  "Departure Time": "Koha e nisjes",
+  "Route": "Rruga",
+  "POI Report": "تقرير الاماكن",
+  "From Time": " Prej ",
+  "To Time": "Deri n� ",
+  "Duration": "Koh�zgjatja ",
+  "Start Point": "Pika e startimit",
+  "End Point": " Pika e mbarimit",
+  "Total KM": "Km totale ",
+  "Fuel Consumption (Litre)": "Konsumimi I karburantit ",
+  "Total Running Time (HH:MM)": "Koha totale e levizjes",
+  "Total Stop Time (HH:MM)": " Koha totale e ndales�s ",
+  "Total Idle Time (HH:MM)": " Koha totale n� ler ",
+  "Total Out of reach Time (HH:MM)": "Koha totale jasht rrjetit",
+  "Total No gps Time (HH:MM)": "Koha totale pa gps",
+  "Overspeeding (HH:MM)": "Tejkalimi I shpejtesis",
+  "Route Violation": " Shkelja e Itinerarit",
+  "TRAVEL PATH REPORT": " Raporti  I rrug�s s� udh�timit",
+  "Travel Path Reports": " Raporti  I rrug�s s� udh�timit ",
+  "Device": "Paisje",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "Distanca K.M",
+  "Cumulative Distance (K.M.)": " Distanca Kumulative ",
+  "TRIP REPORT": "Raporti I udh�timit",
+  "Trip Reports": " Raporti I udh�timit ",
+  "TRIP ID": "ID e udh�timit",
+  "VEHICLE NAME": "Emri I vetur�s",
+  "SOURCE ADDRESS": "Burimi I adres�s",
+  "DESTINATION ADDRESS": "Adresa e destinacionit",
+  "DISTANCE": "Distanca",
+  "DURATION": "Koh�zgjatja",
+  "TRIP STATUS": "Statusi I udh�timit",
+  "MILEAGE": "Kilometrazha",
+  "ADD EXPENSES": "Shto shpenzime",
+  "EXPENSES LIST": "Lista e shpenzimeve",
+  "Amount": "Shuma",
+  "Currency": "Valuta",
+  "Payment Mode": " M�nyra e pages�s ",
+  "Expense type": " Lloji i shpenzimeve",
+  "GEO FENCING": "Zona gjeografike",
+  "ADD DEVICE": "Shto paisje",
+  "GENERAL SETTING": "Cil�simet gjenerale",
+  "Device ID *": "ID e paisjes",
+  "Enter Device ID": "Shkruj ID e paisjes",
+  "Device Name * ": "Emri I paisjes",
+  "Enter Device Name": "Shkruaj emrin e paisjes",
+  "SIM Number": "Numri I karteles",
+  "SIM Number 2": "Numri I kartel�s 2",
+  "SIM Provider 2": "Provajderi I karteles se dyt�",
+  "Integration ID": " ID e integrimit
+  "Select User": "Zgjidhe p�rdoruesin",
+  "Driver Contact Number": " Numri i Kontaktit t� Shoferit
+  "Select Vehicle type*": " Zgjidhni llojin e automjetit ",
+  "Type of Vehicle": "Lloji I vetures",
+  "mm/dd/yyyy": "Muaj / Data / Viti",
+  "ICCICD Number": "رقم ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "ID unike",
+  "CID number": "رقم CID",
+  "Chassis number": "Numri I shasis",
+  "Comapny Name": "Emri I kompanis",
+  "Company Address": "Adresa e kompanis",
+  "Transport Office City": " Zyra e Transportit Qyteti ",
+  "Transport Office State": " Zyra e Transportit n� Shtet ",
+  "Invoice Number": " Numri i fatur�s ",
+  "Number of SOS": " Numri i SOS ",
+  "Doc Type": "Tipi I dokumentit",
+  "Enter SIM Provider": "Futni provajderin e kartel�s",
+  "Enter SIM Provider 2": "Futni provajderin e kartel�s s� dyt�",
+  "Driver's contact number": " Numri i kontaktit t� shoferit ",
+  "Device model *": "Modeli I paisjes ",
+  "Vehicle type * ": "Lloji I vetur�s",
+  "Expiration date": " Data e skadimit",
+  "Engine number": "Numri I motorit",
+  "Type of Vehicle ": "Lloji I vetur�s",
+  "Manufacturing company": "Kompania prodhuese ",
+  "Registration date ": " Data e regjistrimit ",
+  "Date of Manufacturing Year ": " Data e Vitit t� Prodhimit ",
+  "Last fitness date ": " Data e fundit",
+  "ICCICD Number ": " رقم ICCICD ",
+  "Fitment Date ": " Data e pajisjes
+  "IMSI ": " IMSI ",
+  "Unique ID ": " ID unike ",
+  "CID number ": "رقم CID",
+  "Chassis number ": "Numri I shasis",
+  "Comapny Name ": "Emri I kompanis",
+  "Comapny Address": "Adresa e kompanis",
+  "Invoice number": "Numri I fatur�s",
+  "Invoice Date": "Data e fatur�s",
+  "No. of SOS ": " Nr. I SOS ",
+  "Add Document field": " Shto fush�n e Dokumentit
+  "Document issued date :": "Data e l�shimit t� dokumentit",
+  "UPDATE AND SAVE": "P�rditso dhe ruaj",
+  "Reason": "Ruaj",
+  "Password": "Fjal�kalimi",
+  "Driver Search": "البحث عن سائق",
+  "Enter User Id": " K�rkimi i shoferit ",
+  "Enter First name": "Fute Emrin",
+  "Enter Last name": "Fute mbiembrin",
+  "Enter email": "Fute emailin",
+  "Enter mobile number": "Fute numrin e telefonit",
+  "Enter Address": "Fute adres�n",
+  "EDIT CUSTOMER": "Edito klientin ",
+  "Delete Dealer": "Fshi tregtarin",
+  "Documents": " Dokument�t",
+  "Document Name": " Emri I dokumentit",
+  "Document number": " Numri I dokumentit ",
+  "Action": "Aksion ",
+  "Add": "Shto",
+  "Upload Documents *": "Ngarko dokument",
+  "Save": " Ruaj",
+  "delete": " Fshi",
+  "Doc number": " Numri I dokumentit",
+  "Download": "Shkarko",
+  "Yes, Delete it!": "Po,fshi",
+  "Cancel": "Anullo",
+  "EDIT DEALER": " Edito tregtarin ",
+  "Are you sure ?": "A jeni t� sigurt�",
+  "you want to delete dealer": " A d�shironi ta fshini tregtarin",
+  "Edit Model": "Edito modelin",
+  "Enter device model": " Fute modelin e paisjes",
+  "Configuration command": " Komanda e konfigurimit",
+  "Location command": "Lokacioni I komand�s",
+  "Imobilizer command": " Komanda e imobilizuesit",
+  "Resume command": " Rifillo komand�n ",
+  "Reset command": "Reseto komand�n",
+  "Manufacturer": " Prodhuesi ",
+  "Server Command": "Komanda e serverit",
+  "Mobile Command": " Komanda mobile ",
+  "Update": "Azhurnoni",
+  "Edit trip details": " Redakto detajet e udh�timit
+  "Route name": " Emri i itinerarit
+  "Vehicles name": "Emri I veturave ",
+  "Radius (in meter)": "Radius",
+  "Driver name": " Emri i shoferit ",
+  "Loading site": " Vendi po ngarkohet ",
+  "Unloading site": " Faqja e shkarkimit ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": "Emri I paisjes",
+  "Days: ": "Dit�t ",
+  "M": "E h�n� ",
+  "T": " E mart�",
+  "W": "E merkur�",
+  "Th": "E ejnte",
+  "F": "E premte",
+  "Sa": "E shtun�",
+  "S": "E diel",
+  "Edit Vehicle Type": "Redakto Llojin e Automjetit"
+  "Brand:": "Lloji",
+  "Enter Brand Name": "Futni emrin e brendit",
+  "Description:": "P�rshkrimi",
+  "Enter Description": "Futni p�rshkrimin",
+  "Please Enter Description": "Ju lutem futni p�rshkrimin",
+  "Select icon type": "Zgjidhni tipin e ikon�s",
+  "Voltage Value": " Vlera e tensionit ",
+  "Fuel value": " Vlera e karburantit ",
+  "add": "Shto ",
+  "Volatage Calibrator": " Kalibruesi i tensionit ",
+  "Please Enter voltage": " Ju lutemi futni vler�n e karburantit",
+  "Please fuel value": " Please fuel value",
+  "Please Enter Tank Size": "Ju lutemi shkruani Madh�sin� e Rezervuarit ",
+  "FUEL EVENTS": " NGJARJET E KARBURANT ",
+  "Please Enter Mileage": " Ju lutemi shkruani kilometrazhin ",
+  "Fuel Change (L)": " Ndryshimi i karburantit (L)",
+  "Search Device": " Pajisja e k�rkimit ",
+  "Generate Report": " Gjenero raportin",
+  "Sleep Mode Temprature": "Temperatura n� sleep mode ",
+  "Temprature": " درجة الحرارة ",
+  "ON": "On",
+  "OFF": "Off",
+  "list": " Lista",
+  "Enter GEO FENCE NAME": "Futni emrin e zones gjeografike",
+  "Get Alert on :": " Merrni Njoftim n� ",
+  "Select Your Geo Fence Region": "Zgjidhni regjionin e zon�s gjeografike",
+  "Search Box": " Kutia e K�rkimit ",
+  "--Select group--": "Zgjidhni\",
+  "--Geofence type--": "Lloji I zones gjeografike",
+  "--GEO FENCE NAME--": "Emri I zones gjeografike",
+  "close": "Mbylle",
+  "DEVICES": " Paisjet",
+  "Matrix Input": "Futja e matric�s",
+  "Device Id-": "ID e paisjes",
+  "Matrix Name": " Emri I matric�s",
+  "Topic": "Tema",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": " Tensioni i karburantit ",
+  "Real Time GPS Based Vechicle Tracking": " Ndjekja e Automjeteve e Bazuar n� GPS n� koh� Reale ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": " Ndjekja e Automjeteve Drejtp�rdrejt ju jep azhurnime n� koh� reale, duke ju lejuar t� merrni informacionin m� t� fundit t� gjurmimit n� automjetin tuaj.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " Hartat e nd�rmarrjeve nga Google-API p�r p�rdorim komercial q� japin detaje t� sakta t� vendndodhjes s� automjeteve ",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Sistem gjurmimi miq�sor p�r p�rdoruesit q� ju ndihmon t� gjurmoni dhe lokalizoni flot�n pa mundim n� Kliko ",
+  "Software as a Service(Saas) with perpetual uptime.": " Softueri si Sh�rbim (SAS) me koh� t� p�rhershme ",
+  "Alerts and Event Notifications": " Sinjalizimet dhe njoftimet e ngjarjes ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " Merrni njoftime ndezur nd�rsa jeni n� l�vizje n� SMS dhe email dhe aplikacionin Mobile, ju do t� azhurnoheni me njoftime n� koh� reale ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " P�rfituesit e shumt� mund t� marrin sinjalizime, Jo vet�m ju, por edhe t� af�rmit tuaj mund t� njihen p�r sinjalizimet e krijuara p�r ndihm� t� menj�hershme.",
+  "Schedule your alerts as per your convenience that suits your needs": " Planifikoni sinjalizimet tuaja sipas leht�sis� q� ju p�rshtatet nevojave tuaja",
+  "Detailed Reports for analysis is also available for making quik decisions": " Raportet e holl�sishme p�r analiz� jan� gjithashtu n� dispozicion p�r t� marr� vendime t� shpejta ",
+  "Geofences": "Zonat gjeografike",
+  "Geofence": "Zonat gjeografike",
+  "Upload all Geofence in your account and assign them to the vehicles.": " Ngarko t� gjith� Zonat gjeografike n� llogarin� t�nde dhe caktoji ato t�  automjeteve.",
+  "Find and mark geofences without knowing latitude and longitude values.": " Gjeni dhe sh�noni zonat gjeografike pa ditur vlerat e gjer�sis� dhe gjat�sis� ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "Zonat gjeografike n� dispozicion p�r qasje t� leht�. T� gjitha zonat gjeografike mund t� sh�nohen sipas bindjes s� p�rdoruesit dhe mund t'u caktohen automjeteve n� m�nyr� q� �do sinjalizim t� jet� I derguar. Siguroni t� dashurit tuaj dhe siguroni pun�n e b�r� nga Forcat tuaja",
+  "Date and Time Based reports available for analyzing vehicle usage.": " Raportet e bazuara n� dat�n dhe koh�n, t� disponueshme p�r t� analizuar p�rdorimin e automjetit.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " Raport i konsoliduar i men�ur p�r automjetet / Flota. Ju jep p�rmbledhjen e dit�s p�r automjetin (et)..",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " Raporti i alarmit, raport i konsoliduar p�r t� gjitha sinjalizimet e krijuara nga automjeti. Mbingarkesa, nd�rhyrje, ndezje etj ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " Raporti i zones gjeografike, raport i detajuar se kur dhe n� cil�n koh� automjeti hyri n� zonat gjeografike ",
+  "How it works": "Si punon",
+  "Real-time tracking": "Gjurmim ne koh� reale",
+  "Advanced Reporting": "Raporti I avancuar",
+  "Alerts & Warning": "Njoftim dhe paralajm�rim",
+  "2-Way messaging": "Mesazhe me 2 m�nyra ",
+  "Engine immobilisation": " Imobilizimi i motorit ",
+  "Monitor gauges": " Mat�sit e monitorit ",
+  "Access anytime, anywhere!": " Hyni n� �do koh�, kudo ",
+  "Web browser based software": " Softuer i bazuar n� shfletues uebi ",
+  "Android app": "Aplikacioni android",
+  "iPhone app": "Aplikacioni p�r Iphone",
+  "Request for Demo": "K�rko demo verzionin",
+  "Get Detail": "Merr detaje",
+  "Export To Excel": "Eksporto n� eksell",
+  "Loading Site": "Faqja �sht� duke u ngarkuar",
+  "Distance": "Distanca",
+  "ETA": "ETA",
+  "directions": "الاتجاهات",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "Harta",
+  "Please Select Your Device, From/To Date & Time to view history from above options": " Ju lutemi Zgjidhni Pajisjen Tuaj, Nga / N� Data dhe Koha p�r t� par� historikun nga opsionet e m�sip�rme ",
+  "Generate Map": "Gjenero hart�n",
+  "Trip Name": "Emri udh�timit",
+  "Select destination": " Zgjidh Destinacionin",
+  "CREATE TRIP": "Krijo udh�tim",
+  "Total Distance: ": "Distanca",
+  "Idle Time (Min)": " Koha n� ler",
+  "Go to Site >": "Shko te faqja ",
+  "Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+  "Login": " Hyrja ",
+  "Username / Phone Number": " Emri i p�rdoruesit / numri i telefonit",
+  "Enter Mobile number*": " Vendosni numrin e celularit ",
+  "Confirm New Password": Konfirmoni fjal�kalimin e ri ",
+  "Send OTP": " Dergo OTP",
+  "Back to Login": " Kthehu tek Login ",
+  "Back to previous Form": " Kthehu tek formulari i m�parsh�m ",
+  "Forgot Username / Password?": " Keni harruar emrin e p�rdoruesit / fjal�kalimin ",
+  "First Name": " Emri",
+  "Last Name": "Mbiemri",
+  "Email Id": "Id e emailit",
+  "Organisation": "Organizata",
+  "notifications": "Njftim�t",
+  "Notification Sound": "Z�ri I njoftimeve",
+  "Notifications": "Njoftimet",
+  "Add Phone": "Shto Telefonin",
+  "Close": "Mbylle",
+  "Add Email": "Shto email",
+  "POI details": "تفاصيل نقطة مهمة",
+  "Add POI details": "إضافة نقطة مهمة التفاصيل ",
+  "Type POI name": " اكتب اسم نقطة الاهتمام ",
+  "Previous point duration": " Koh�zgjatja e pik�s s� m�parshme ",
+  "Days": " Dit�t",
+  "Hours": "Or�t ",
+  "Minutes": "Minutat ",
+  "Next point duration": " مدة النقطة التالية ",
+  "Min": " Min ",
+  "Halt": "Ndales� ",
+  "Mapped Vehicles": " Automjete t� pasqyruara ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": "Futni lokacionin ",
+  "ADD": "Shto ",
+  "Routes Search": " K�rkimi I rrug�s ",
+  "Route Status": "Statusi I rrug�s ",
+  "Source": "Burimi ",
+  "Destination": " Destinacioni",
+  "Test name": "Emri I prov�s",
+  "Test Source": "Emri I burimit",
+  "Test destination": "Destinacioni I prov�s",
+  "Routes": " Rrug�t ",
+  "Untracked vehicles": " Veturat e pagjurmuara",
+  "Please Enter Email ID / Phone Number": " Ju lutemi shkruani ID-n� e emailit / numrin e telefonit ",
+  "Please Re Enter Password": " Ju lutem Ri Futni Fjal�kalimin ",
+  "Delete route": "حذف المسار",
+  "Are you sure to delete this route ??": " Jeni i sigurt q� do ta fshini k�t� itinerar ",
+  "DELETE": "Fshi",
+  "Create Trip": "krijo udh�tim",
+  "One way trip": "Udh�tim nj� drejtim�sh",
+  "Two way trip": "Udh�tim dy drejtim�sh ",
+  "Round trip": "Udhetim vatje ardhje ",
+  "Start Date/Time": " Fillimi Data/Koha",
+  "End Date/Time": " Mbarimi Data/Koha",
+  "Planned start time": " Koha e planifikuar e fillimit ",
+  "Planned end time": " Koha e planifikuar e p�rfundimit ",
+  "Actual start time": " Koha aktuale e fillimit ",
+  "Actual end time": " Koha aktuale e p�rfundimit ",
+  "Trip History": " Historia e Udh�timit",
+  "Admin Account": " Llogaria e administratorit ",
+  "Trip type": " Lloji i udh�timit
+  "Routes name": " Emri i rrug�ve ",
+  "Total Distance": " Distanca totale ",
+  "Get route": " Merrni itinerarin ",
+  "Parameters": "Parametrat",
+  "Enter First Name": "Futni Emrin",
+  "Enter Last Name": "Futni Mbiemrin",
+  "Invalid Password": "Fjal�kalim jovalid",
+  "Confirm Password": "Konfirmo fjal�kalimin",
+  "Please Enter Confirm Password": "Konfirmoni fjal�kalimin",
+  "Organisation Name": "Emri I organizates",
+  "Type of user": " Lloji i p�rdoruesit ",
+  "Mobile Verification": "Verifikimi p�rmes celularit",
+  "Mobile Number": "Numri I celularit",
+  "TRIP HISTORY": " historia e udh�timit ",
+  "Event name": "Emri I eventit",
+  "Event time": "Koha e eventit",
+  "Driver": " Shoferi ",
+  "Token": " الرمز",
+  "Restore": "استعادة",
+  "Delete Permanently": "حذف العلامات",
+  "Select no of Days to get reminder for your services": " Zgjidhni Dit�t p�r t� marr� kujtes� p�r sh�rbimet tuaja ",
+  "Prior Notification (Days)": " Njoftimi paraprak (Dit�t) ",
+  "Enter Additonal information here...": "Vendosni informacione shtes�",
+  "Calibration": " Kalibrimi"
+}
diff --git a/src/assets/i18n/ar.json b/src/assets/i18n/ar.json
new file mode 100644
index 0000000..7c984ef
--- /dev/null
+++ b/src/assets/i18n/ar.json
@@ -0,0 +1,650 @@
+{
+  "ADMIN": "مسؤول",
+  "DASHBOARD": "لوحة التحكم",
+  "Admin": "مسؤول",
+  "GROUPS": "مجموعات",
+  "VEHICLES": "سيارات",
+  "Account Setting": "إعدادات الحساب",
+  "General Setting": "إعدادات عامة",
+  "Application language": "لغة التطبيق",
+  "Language Setting": "إعدادات اللغة",
+  "Reset Password": " إعادة تعيين كلمة المرور ",
+  "Notification Settings": "إعدادات الاشعارات",
+  "TRACKING": "تتبع",
+  "Tracking": "تتبع",
+  "Reports": "التقارير",
+  "POI LIST": "قائمة العلامات",
+  "POI List": "قائمة العلامات",
+  "ROUTES": "الطرق",
+  "NOTIFICATIONS": "الإشعارات",
+  "DISTRIBUTERS": "الموزعين",
+  "DEALERS": "وكلاء",
+  "Dealers": "وكلاء",
+  "CUSTOMERS": "العملاء",
+  "Customers": "العملاء",
+  "RUNNING": "متحرك",
+  "IDLE": "خامل",
+  "IDLE Reports": "تقرير الخمول",
+  "STOPPED": "توقفت",
+  "EXPIRED": "منتهية الصلاحية",
+  "OUT OF REACH": " خارج الخدمة ",
+  "NO GPS": " خارج التغطية ",
+  "Device Icon": " رمز الجهاز ",
+  "Registration number": " رقم التسجيل ",
+  "Group": " المجموعة ",
+  "Today's ODO": " ODO اليوم ",
+  "Total ODO": " ODO الإجمالي ",
+  "Last location": "  اخر موقع ",
+  "Last updated on": " آخر تحديث في ",
+  "Trip status": " حالة الرحلة ",
+  "Status": "الحالة",
+  "Satellites": "الأقمار الصناعية",
+  "Last Speed": "آخر سرعة",
+  "FUEL (LITRE)": "الوقود في لتر",
+  "GPS": "القمر الصناعي",
+  "AC": "مكيف الهواء",
+  "Fuel Reports": "تقرير الوقود",
+  "POWER": "مصدر الطاقة",
+  "GSM Signal": "إشارة GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "الإشعار",
+  "My Account": "حسابي",
+  "Log Out": "تسجيل الخروج",
+  "Refresh Data": "تحديث البيانات",
+  "Device Search": "البحث عن الأجهزة",
+  "Previous": "السابق",
+  "Next": "التالي",
+  "DRIVER MASTER": "السائق",
+  "Driver Master": " السائق",
+  "DEVICE MODEL": "نموذج الجهاز",
+  "VEHILE TYPE": "نوع السيارة",
+  "Maintenance Reminder": " تذكير صيانة ",
+  "Vehicle Expense": "مصروفات المركبة",
+  "Message Utility": "خدمات الرسائل",
+  "Sensor Details": "تفاصيل المستشعر",
+  "Billing Details": "تفاصيل الفواتير",
+  "USER MASTER": "المستخدم",
+  "User Master": "المستخدم",
+  "DEVICE MASTER": "الجهاز",
+  "Device Master": "الجهاز",
+  "System Logs": "سجلات النظام",
+  "GPS TRACKER": "التتبع",
+  "CMD PACKETS": " حزم الأوامر",
+  "CMD Packets": " حزم الأوامر",
+  "INVENTORY LIST": "قائمة الجرد",
+  "Inventory List": "قائمة الجرد",
+  "CUSTOMER INQUIRY": " استفسار العميل",
+  "Driver Name": "اسم السائق",
+  "Driver Address": "عنوان السائق",
+  "Driver Status": "حالة السائق",
+  "License Number": "رقم الترخيص",
+  "Salary": "الراتب",
+  "DOJ": "تاريخ الانضمام",
+  "Delete": "حذف",
+  "Device Type": "نوع الجهاز",
+  "Configuration Command": "اوامر الاعدادات",
+  "Location Command": "اوامر الموقع",
+  "Immobilzer Command": "اوامر منع الحركة",
+  "Resume Command": " استئناف الأوامر ",
+  "Reset Command": " إعادة تعيين الأوامر ",
+  "Immobilzer Type": " نوع منع الحركة ",
+  "Port": " المنفذ ",
+  "Edit": " تحرير ",
+  "Brand": " العلامة التجارية ",
+  "Description": " الوصف ",
+  "Model": " الموديل ",
+  "Icon Type": " نوع الأيقونة ",
+  "Voltage Calibration": " معايرة الجهد ",
+  "Tank Size": " حجم الخزان ",
+  "Mileage": " الأميال ",
+  "Last Modified": " التعديل الأخير ",
+  "Search by phone": " البحث عن طريق الهاتف ",
+  "Search by name": " البحث عن طريق الاسم ",
+  "From Date": " من تاريخ ",
+  "To Date": " إلى تاريخ ",
+  "FIND": " بحث ",
+  "Show": " إظهار ",
+  "entries": " الإدخالات ",
+  "Name": " الاسم ",
+  "Dealer": "التاجر",
+  "Is Dealer": "هو التاجر",
+  "Created on": "تم الإنشاء",
+  "Email": "البريد الإلكتروني",
+  "Phone": "الهاتف",
+  "Device Name": "اسم الجهاز",
+  "Device Id": "معرف الجهاز",
+  "User": "المستخدم",
+  "Expire On": "انتهاء الصلاحية",
+  "Fuel Voltage(mv)": "فولطية الوقود (الميليفولت)",
+  "Sim Number": " رقم السيم كارد ",
+  "Today ODO": " عدد الكيلومترات في اليوم ",
+  "Search by Device ID": " البحث عن طريق معرف الجهاز ",
+  "Certificates": " الشهادات ",
+  "Export Pdf": " تصدير بي دي إف ",
+  "Search by Sim Number": " البحث عن طريق رقم السيم كارد ",
+  "Export EXCEL": " تصدير اكسل ",
+  "Device IMEI": " معرف الجهاز ",
+  "Lattitude": " خط العرض ",
+  "Longitude": "خط الطول",
+  "Speed": "السرعة",
+  "Device Time": "وقت الجهاز",
+  "Insertion Time": "وقت الاضافة",
+  "Last Push": "الدفعة الأخيرة",
+  "Integration Respnse": "استجابة التكامل",
+  "Ignition": "التشغيل",
+  "Power": "مصدر الطاقة",
+  "Ext. Volt": "تحويلة فولت",
+  "Fuel Volt": "فولت الوقود",
+  "Sattelite": "الاقمار الصناعية",
+  "Powercut Alarm": " إنذار انقطاع مصدر الطاقة ",
+  "Inquiry Date": " تاريخ الاستفسار ",
+  "Customer Name": " اسم العميل ",
+  "Message": " رسالة ",
+  "Assigned To": " تم تعيينه إلى ",
+  "Role": " وضيفة ",
+  "No data available in table": " لا توجد بيانات متاحة في الجدول ",
+  "Showing": " عرض ",
+  "Costumer Inquiry": " استفسار العميل ",
+  "System Date": " تاريخ النظام ",
+  "Vehicle Number": " رقم المركبة ",
+  "Chassis Number": " رقم الهيكل ",
+  "Engine Number": " رقم المحرك ",
+  "Device Model": " طراز الجهاز ",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " رقم المالك ",
+  "Alternate Number": " الرقم البديل ",
+  "Dealer Name": " اسم البائع ",
+  "Tracking Software": " برنامج التتبع ",
+  "Costumer Name": " اسم العميل ",
+  "Device ID": " معرف الجهاز ",
+  "Operator Name": " اسم المشغل ",
+  "Protocol ID": " معرف البروتوكول ",
+  "Command": " الأوامر ",
+  "ACC": " نظام تثبيت السرعة ",
+  "Battery Status": "حالة البطارية",
+  "GPS DATA": "بيانات الاقمار الصناعية",
+  "DEVICES MASTER": "الجهاز",
+  "Groups": "مجموعات",
+  "Add Group": "إضافة مجموعة",
+  "Type group name": "اكتب اسم المجموعة",
+  "CONFIRM": "تاكيد",
+  "CANCEL": "الغاء",
+  "Active": "نشط",
+  "InActive": "غير نشط",
+  "Vehicles": "مركبات",
+  "Reg. Number": "رقم التسجيل",
+  "IMEI": "IMEI",
+  "Int. ID": "المعرف الدولي",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "مجهز خدمة السيم كارد",
+  "SIM2": "SIM2",
+  "Vehicle Type": "نوع المركبة",
+  "Owner": "المالك",
+  "IDLING Since": "خاملة منذ",
+  "STOPPED Since": "متوقفة منذ",
+  "RUNNING Since": " تعمل منذ ",
+  "Video Tutorial": " فيديو تعليمي ",
+  "VEHICLE LIST": " قائمة السيارات ",
+  "Vehicle List": " قائمة السيارات ",
+  "MAINTENANCE REMINDER": " تذكير صيانة ",
+  "REMINDERS": " تذكير ",
+  "Reminders": " تذكير ",
+  "Reminder Date": " تاريخ التذكير ",
+  "Notification Type": " نوع الاشعار ",
+  "Reminder Type": " نوع التذكير ",
+  "Prior Notification(Days)": " إشعار مسبق (أيام)",
+  "Additional notes": "الملاحظات الإضافية",
+  "SEARCH": "بحث",
+  "Live Tracking": "التتبع المباشر",
+  "History Tracking": "سجل الحركة",
+  "Vehicle History": "سجل المركبات",
+  "Generate History": "اصنع التاريخ",
+  "Play History": "سجل التشغيل",
+  "Select device": "اختر الجهاز",
+  "Please choose a device": "الرجاء اختر جهازًا , أو, ",
+  "OK": "OK",
+  "GEOFENCE": " السياجات الجغرافية",
+  "Grid view": "عرض شبكي",
+  "List view": "عرض القائمة",
+  "Geo Fencing Name": "الاسم الجغرافي",
+  "Geofence type": "نوع السياج الجغرافي",
+  "Enter Alert": "تنبيه الدخول",
+  "Exit Alert": "تنبيه الخروج",
+  "Geofence Search": "البحث الجغرافي",
+  "Add Geofence": " إضافة السياج الجغرافي ",
+  "Select group": " تحديد مجموعة ",
+  "GEO FENCE NAME": " اسم السياج الجغرافية ",
+  "Get Alert on": " الحصول على حالة اشعار في حال ",
+  "Entering": " دخول ",
+  "Exiting": " الخروج ",
+  "Create": " خلق ",
+  "Select Your Geo Fence Region": " حدد منطقة السياج الجغرافي ",
+  "Add Geo Fence": "إضافة جدار جغرافي",
+  "Total Distance(Km)": " المسافة الكلية ",
+  "Fuel consumption(Litre)": " الوقود (لتر) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " بعيد عن التغطية ( ساعة: دقيقة) ",
+  "No GPS(Hr:Min:Sec)": " لا GPS (ساعة: دقيقة: ثانية) ",
+  "Daily Report": " التقرير يومي ",
+  "Daily Reports": " التقرير يومي ",
+  "Trips": " الرحلات ",
+  "Max Speed(Km/hr)": " سرعة قصوى (كم / ساعة) ",
+  "My App": " تطبيقي ",
+  "AC Report": " تقرير AC ",
+  "AC Reports": " تقرير AC ",
+  "Loading": " تحميل ",
+  "Vehicle": "مركبة",
+  "Load Management": "إدارة الحمل",
+  "TOTAL VEHICLES": "مجموع المركبات",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "لوحة التحكم",
+  "RULES": "القواعد",
+  "Alert Report": "تقرير التنبيهات",
+  "No": "لا",
+  "Date": "التاريخ",
+  "Power Cut": "انقطاع الطاقة",
+  "Battery": "البطارية",
+  "Geofencing": "تحديد الموقع الجغرافي",
+  "Overspeeding": " السرعة الزائدة ",
+  "Daywise Report": " تقارير الحكمة اليوم ",
+  "Daywise Reports": " تقارير الحكمة اليوم ",
+  "Filter Report": " تقرير المرشحات ",
+  "Fuel Consumption Report": " تقرير استهلاك الوقود ",
+  "Fuel Consumption Reports": " تقرير استهلاك الوقود ",
+  "Vehicle name": " اسم المركبة ",
+  "Start Time": " وقت البدء ",
+  "End Time": " وقت الانتهاء ",
+  "Fuel Consumed (L)": " استهلاك الوقود (L) ",
+  "Distance(Kms)": "المسافة (Kms)",
+  "In event count": "في عدد الأحداث",
+  "Out event count": "Out out count",
+  "Start Location": "Start Location",
+  "End Location": "End Location",
+  "Click to get device's last location": "انقر للحصول على آخر موقع للجهاز",
+  "SOS Report": "تقرير SOS",
+  "Vehicle No.": "رقم المركبة",
+  "Time": "الوقت",
+  "Address": "العنوان",
+  "Speed variation": "تباين السرعة",
+  "Total K.M": "إجمالي KM",
+  "Generate Graph": "إنشاء رسم بياني",
+  "Driver's Performance Report": "تقرير أداء السائق",
+  "Total trip": "رحلة كاملة",
+  "Total Ontime trip": "رحلة مجموع الوقت الإضافي",
+  "Ontime vehicles": "مركبات ontime",
+  "group": "مجموعة",
+  "TRACKER": " TRACKER ",
+  "REPORTS": " REPORTS ",
+  "Speed Variation": " تباين السرعة ",
+  "Trip Report": " تقرير الرحلة ",
+  "Summary Report": " تقرير موجز عن الرحلة ",
+  "Summary Reports": " تقرير موجز عن الرحلة ",
+  "Overspeeding Report": " تقرير السرعة الزائدة ",
+  "Overspeeding Reports": " تقرير السرعة الزائدة ",
+  "Route Violation Report": " تقرير عن انتهاك الطريق ",
+  "Route Violation Reports": " تقرير عن انتهاك الطريق ",
+  "Stoppage Report": " تقرير التوقف ",
+  "Stoppage Reports": " تقرير التوقف ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " تقرير عن المسافة المقطوعة ",
+  "Distance Reports": " تقرير عن المسافات المقطوعة ",
+  "Driver's performance": " تقرير عن اداء السائق ",
+  "VEHICLE TYPE": " نوع المركبة ",
+  "ROUTE LIST": " قائمة الطريق ",
+  "Route list": " قائمة الطريق ",
+  "ROUTE MAPPING": " ROUTE MAPPING ",
+  "Route Mapping": " رسم الخرائط الطريق ",
+  "Dealer Account": " حساب الموزع ",
+  "Geofencing Report": " تقرير Geofencing ",
+  "Geofencing Reports": " تقرير Geofencing ",
+  "Select Geofencing": " تحديد Geofencing ",
+  "Vehicle Name": " اسم المركبة ",
+  "In/Out": " In / Out ",
+  "Datetime": " التاريخ والوقت ",
+  "Location": " الموقع ",
+  "GeoFence Name": " GeoFence Name ",
+  "Click here to get address": " انقر هنا للحصول على العنوان ",
+  "Select Your Device": " حدد جهازك ",
+  "IDLE REPORT": " تقرير الخمول ",
+  "Select Vehicle": " حدد السيارة ",
+  "Min Idle Time (Min)": " وقت الخمول الأدنى (الحد الأدنى) ",
+  "Duration (HH:MM:SS)": " المدة (HH: MM: SS) ",
+  "AC Status": "حالة AC",
+  "TRACKERS": "TRACKERS",
+  "Date Time": "Date Time",
+  "On/Off": "On / Off",
+  "Overspeed": "Overpeed",
+  "POI name": "POI name",
+  "Arrival Time": "وقت الوصول",
+  "Departure Time": "وقت المغادرة",
+  "Route": "Route",
+  "POI Report": "تقرير الاماكن",
+  "From Time": " من وقت ",
+  "To Time": " إلى وقت ",
+  "Duration": " المدة ",
+  "Start Point": " نقطة البداية ",
+  "End Point": " نقطة النهاية ",
+  "Total KM": " إجمالي KM ",
+  "Fuel Consumption (Litre)": " استهلاك الوقود (لتر) ",
+  "Total Running Time (HH:MM)": " اجمالي وقت التشغيل (HH: MM) ",
+  "Total Stop Time (HH:MM)": " إجمالي وقت التوقف (HH: MM) ",
+  "Total Idle Time (HH:MM)": " إجمالي وقت الخمول (HH: MM) ",
+  "Total Out of reach Time (HH:MM)": " إجمالي وقت الوصول (HH: MM) ",
+  "Total No gps Time (HH:MM)": "إجمالي وقت الخروج عن التغطية (HH: MM)",
+  "Overspeeding (HH:MM)": "السرعة الزائدة (HH: MM)",
+  "Route Violation": "خرق الطريق",
+  "TRAVEL PATH REPORT": "تقرير مسار السفر",
+  "Travel Path Reports": "تقرير مسار السفر",
+  "Device": "الجهاز",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "المسافة (KM)",
+  "Cumulative Distance (K.M.)": "المسافة التراكمية (KM)",
+  "TRIP REPORT": "تقرير الرحلة",
+  "Trip Reports": "تقرير الرحلة",
+  "TRIP ID": "معرف الرحلة",
+  "VEHICLE NAME": "اسم المركبة",
+  "SOURCE ADDRESS": "عنوان المصدر",
+  "DESTINATION ADDRESS": "عنوان الوجهة",
+  "DISTANCE": "المسافة",
+  "DURATION": "المدة",
+  "TRIP STATUS": "رحلة الرحلة",
+  "MILEAGE": "الأميال",
+  "ADD EXPENSES": "إضافة مصاريف",
+  "EXPENSES LIST": "قائمة المصاريف",
+  "Amount": "المبلغ",
+  "Currency": "العملة",
+  "Payment Mode": "وضع الدفع",
+  "Expense type": "نوع النفقات",
+  "GEO FENCING": "GEO FENCING",
+  "ADD DEVICE": "إضافة جهاز",
+  "GENERAL SETTING": "اعدادات عامة",
+  "Device ID *": "معرف الجهاز *",
+  "Enter Device ID": "أدخل معرف الجهاز",
+  "Device Name * ": "اسم الجهاز *",
+  "Enter Device Name": "أدخل اسم الجهاز",
+  "SIM Number": "رقم بطاقة SIM",
+  "SIM Number 2": "رقم بطاقة SIM 2",
+  "SIM Provider 2": "مزود بطاقة SIM 2",
+  "Integration ID": "معرّف التكامل",
+  "Select User": "حدد مستخدم",
+  "Driver Contact Number": "رقم السائق",
+  "Select Vehicle type*": "حدد نوع السيارة *",
+  "Type of Vehicle": "نوع السيارة",
+  "mm/dd/yyyy": "mm / dd / yyyy",
+  "ICCICD Number": "رقم ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "المعرف الفريد",
+  "CID number": "رقم CID",
+  "Chassis number": "رقم الشاصي",
+  "Comapny Name": "اسم الشركه",
+  "Company Address": "عنوان الشركة",
+  "Transport Office City": "مدينة مكتب النقل",
+  "Transport Office State": "دولة مكتب النقل",
+  "Invoice Number": "رقم الفاتورة",
+  "Number of SOS": "رقم SOS",
+  "Doc Type": "نوع المستند",
+  "Enter SIM Provider": "أدخل مزود SIM",
+  "Enter SIM Provider 2": "أدخل مزود SIM 2",
+  "Driver's contact number": "رقم هاتف السائق ",
+  "Device model *": " طراز الجهاز * ",
+  "Vehicle type * ": " نوع السيارة * ",
+  "Expiration date": " تاريخ انتهاء الصلاحية ",
+  "Engine number": " رقم المحرك ",
+  "Type of Vehicle ": " نوع السيارة ",
+  "Manufacturing company": " الشركة المصنعة ",
+  "Registration date ": " تاريخ التسجيل ",
+  "Date of Manufacturing Year ": " تاريخ سنة التصنيع ",
+  "Last fitness date ": " تاريخ اللياقة البدنية الأخير ",
+  "ICCICD Number ": " رقم ICCICD ",
+  "Fitment Date ": " تاريخ الإعداد ",
+  "IMSI ": " IMSI ",
+  "Unique ID ": " المعرف الفريد ",
+  "CID number ": "رقم CID",
+  "Chassis number ": "رقم الهيكل",
+  "Comapny Name ": "اسم شركة",
+  "Comapny Address": "عنوان شركة",
+  "Invoice number": "رقم الفاتورة",
+  "Invoice Date": "تاريخ الفاتورة",
+  "No. of SOS ": "رقم SOS",
+  "Add Document field": "إضافة حقل مستند",
+  "Document issued date :": "تاريخ إصدار المستند",
+  "UPDATE AND SAVE": "تحديث وحفظ",
+  "Reason": "السبب",
+  "Password": "كلمة المرور",
+  "Driver Search": "البحث عن سائق",
+  "Enter User Id": "ادخل اسم المستخدم",
+  "Enter First name": "أدخل الاسم الاول",
+  "Enter Last name": "أدخل اسم العائلة",
+  "Enter email": "أدخل البريد الالكتروني",
+  "Enter mobile number": "أدخل رقم الهاتف",
+  "Enter Address": "أدخل العنوان",
+  "EDIT CUSTOMER": "تعديل العميل ",
+  "Delete Dealer": " حذف التاجر ",
+  "Documents": " المستندات ",
+  "Document Name": " اسم المستند ",
+  "Document number": " رقم المستند ",
+  "Action": " الاجراءات ",
+  "Add": " اضافة ",
+  "Upload Documents *": " تحميل المستندات ",
+  "Save": " حفظ ",
+  "delete": " حذف ",
+  "Doc number": " رقم المستند ",
+  "Download": " تنزيل ",
+  "Yes, Delete it!": " نعم , احذفه ",
+  "Cancel": " الغاء ",
+  "EDIT DEALER": " تعديل موزع ",
+  "Are you sure ?": " هل انت متاكد؟ ",
+  "you want to delete dealer": " هل تريد حذف التاجر ",
+  "Edit Model": " تحرير النموذج ",
+  "Enter device model": " أدخل موديل الجهاز ",
+  "Configuration command": " اوامر التكوين ",
+  "Location command": "اوامر الموقع",
+  "Imobilizer command": "أمر منع الحركه",
+  "Resume command": "أمر الاستئناف",
+  "Reset command": "أمر اعادة الضبط",
+  "Manufacturer": "المصنع",
+  "Server Command": "اوامر الخادم",
+  "Mobile Command": "اوامر الموبايل",
+  "Update": "التحديث",
+  "Edit trip details": "تحرير تفاصيل الرحلة",
+  "Route name": "اسم الطريق",
+  "Vehicles name": " اسم المركبة ",
+  "Radius (in meter)": " نصف القطر ,بالمتر ",
+  "Driver name": " اسم السائق ",
+  "Loading site": " موقع التحميل ",
+  "Unloading site": " موقع إلغاء التحميل ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": " اسم الجهاز: ",
+  "Days: ": " الايام: ",
+  "M": " الاثنين ",
+  "T": " الثلاثاء ",
+  "W": "الاربعاء",
+  "Th": "الخميس",
+  "F": "الجمعة",
+  "Sa": "السبت",
+  "S": "الاحد",
+  "Edit Vehicle Type": "تعديل نوع المركبة",
+  "Brand:": "العلامة التجارية",
+  "Enter Brand Name": "ادخل العلامة التجارية:",
+  "Description:": "الوصف",
+  "Enter Description": "اضف وصف:",
+  "Please Enter Description": "الرجاء ادخل الوصف ",
+  "Select icon type": " حدد نوع الرمز ",
+  "Voltage Value": " قيمة الجهد ",
+  "Fuel value": " قيمة الوقود ",
+  "add": " اضافة  ",
+  "Volatage Calibrator": " معايير الفولتية ",
+  "Please Enter voltage": " ادخل معايير الفولتية  ",
+  "Please fuel value": " الرجاء ادخال قيمة الوقود ",
+  "Please Enter Tank Size": " الرجاء إدخال حجم خزان الوقود ",
+  "FUEL EVENTS": " احداث الوقود ",
+  "Please Enter Mileage": " الرجاء إدخال عدد الكيلومترات ",
+  "Fuel Change (L)": " تغيير الوقود ",
+  "Search Device": " البحث عن الجهاز ",
+  "Generate Report": "  انشاء تقرير  ",
+  "Sleep Mode Temprature": " درجة حرارة وضع السكون ",
+  "Temprature": " درجة الحرارة ",
+  "ON": " يعمل  ",
+  "OFF": " مطفئ ",
+  "list": " قائمة ",
+  "Enter GEO FENCE NAME": "ادخل اسم الحاجز الجغرافي",
+  "Get Alert on :": "نبهني في حال",
+  "Select Your Geo Fence Region :": "اختيار السياج الجغرافي",
+  "Search Box": "صندوق البحث",
+  "--Select group--": "اختيار المجموعة",
+  "--Geofence type--": "نوع السياج الجغرافي",
+  "--GEO FENCE NAME--": "اسم السياج الجغرافي",
+  "close": "اغلق",
+  "DEVICES": " الاجهزة",
+  "Matrix Input": " ادخال ماتركس",
+  "Device Id-": "معرف الجهاز",
+  "Matrix Name": " معرف الجهاز ",
+  "Topic": "topic",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": "Fuel Volt.",
+  "Real Time GPS Based Vechicle Tracking": "تتبع قائمة المركبات الحية عبر نظام تحديد المواقع ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": "يمنحك تتبع المركبات المباشر تحديثات في الوقت الفعلي ، مما يتيح لك الحصول على أحدث معلومات التتبع على سيارتك.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": "الذي يعطي تفاصيل دقيقة عن المركبات",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": "نظام تتبع سهل الاستخدام يساعدك على تتبع وتحديد موقع الأسطول عند النقر.",
+  "Software as a Service(Saas) with perpetual uptime.": "Software as a Service(Saas) with perpetual uptime.",
+  "Alerts and Event Notifications": " التنبيهات وإشعارات الأحداث ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " احصل على الاشعارات أثناء تنقلك على الرسائل القصيرة والبريد الإلكتروني وتطبيقات الهاتف المحمول , سيتم إطلاعك باستمرار على تنبيهات في الوقت الفعلي. ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " يمكن للمستلمين المتعددين تلقي تنبيهات , ليس فقط أنت , ولكن يمكن أيضًا التعرف على الأشخاص القريبين التنبيهات التي تم إنشاؤها للحصول على مساعدة فورية. ",
+  "Schedule your alerts as per your convenience that suits your needs": " قم بجدولة التنبيهات وفقًا لراحتك التي تناسب احتياجاتك ",
+  "Detailed Reports for analysis is also available for making quik decisions": "التقارير التفصيلية للتحليل متاحة أيضًا لاتخاذ قرارات سريعة",
+  "Geofences": "السياج الجغرافي",
+  "Geofence": "السياج الجغرافي",
+  "Upload all Geofence in your account and assign them to the vehicles.": "تحميل جميع Geofence في حسابك وتعيينها للمركبات.",
+  "Find and mark geofences without knowing latitude and longitude values.": " تحميل جميع Geofence في حسابك وتعيين لهم إلى المركبات. ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "سياج مضلع متاح لسهولة الوصول إليه. يمكن وضع علامة على جميع السياجات الجغرافية حسب ملائمة المستخدم ويمكن تخصيصها للمركبات بحيث يتم تنبيه كل تنبيه إليك. قم بتأمين أحبائك وتأكد من العمل الذي تقوم به قواتك.\n",
+  "Date and Time Based reports available for analyzing vehicle usage.": "التقارير القائمة على التاريخ والوقت متوفرة لتحليل استخدام السيارة.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": "موقع المركبات ، يظهر لك كل سجل موقع المركبة حيث كانت سيارتك متوقفة  ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": "تقرير المركبات الحكيم / الأسطول الموحد. يمنحك ملخص اليوم للسيارة (المركبات).",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " تقرير التنبيه , تقرير موحد لجميع التنبيهات الناتجة عن السيارة. السرعة الزائدة , العبث , الاشتعال , وما إلى ذلك. ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " تقرير Geofence , تقرير مفصل متى وفي أي وقت دخلت السيارة المناطق الجغرافية. ",
+  "How it works": "كيف يعمل",
+  "Real-time tracking": "التعقب في الوقت الفعلي",
+  "Advanced Reporting": "التقارير المتقدمة",
+  "Alerts & Warning": "التنبيهات والتحذيرات",
+  "2-Way messaging": "الرسائل ثنائية الاتجاه",
+  "Engine immobilisation": "عطل المحرك",
+  "Monitor gauges": "مقاييس الشاشة",
+  "Access anytime, anywhere!": "الوصول في أي زمان ومكان!",
+  "Web browser based software": "البرنامج المخصص إلى مستعرض الويب",
+  "Android app": "تطبيق Android",
+  "iPhone app": "تطبيق iPhone",
+  "Request for Demo": "طلب خدمة تجريبية",
+  "Get Detail": "الحصول على التفاصيل",
+  "Export To Excel": "تصدير إلى Excel",
+  "Loading Site": "تحميل الموقع",
+  "Distance": "المسافة",
+  "ETA": "ETA",
+  "directions": "الاتجاهات",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "map",
+  "Please Select Your Device, From/To Date & Time to view history from above options": "الرجاء تحديد جهازك , من / إلى التاريخ والوقت لعرض السجل من الخيارات أعلاه",
+  "Generate Map": "إنشاء خريطة",
+  "Trip Name": " اسم الرحلة ",
+  "Select destination": " تحديد الوجهة ",
+  "CREATE TRIP": " إنشاء رحلة ",
+  "Total Distance: ": " المسافة الإجمالية: ",
+  "Idle Time (Min)": " وقت الخمول (الحد الأدنى) ",
+  "Go to Site >": " اذهب إلى الموقع> ",
+  "Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+  "Login": " تسجيل الدخول ",
+  "Username / Phone Number": " اسم المستخدم / رقم الهاتف  ",
+  "Enter Mobile number*": " أدخل رقم الهاتف المحمول  ",
+  "Confirm New Password": " تأكيد كلمة المرور الجديدة ",
+  "Send OTP": " إرسال OTP ",
+  "Back to Login": " الرجوع إلى تسجيل الدخول ",
+  "Back to previous Form": " الرجوع إلى النموذج السابق ",
+  "Forgot Username / Password?": " هل نسيت اسم المستخدم / كلمة المرور؟ ",
+  "First Name": " الاسم الأول ",
+  "Last Name": "اسم العائلة",
+  "Email Id": "معرف البريد الإلكتروني",
+  "Organisation": "المنظمة",
+  "notifications": "الإشعارات",
+  "Notification Sound": "صوت الإشعارات",
+  "Notifications": "الإشعارات",
+  "Add Phone": "إضافة هاتف",
+  "Close": "إغلاق",
+  "Add Email": "إضافة بريد إلكتروني",
+  "POI details": "تفاصيل نقطة مهمة",
+  "Add POI details": "إضافة نقطة مهمة التفاصيل ",
+  "Type POI name": " اكتب اسم نقطة الاهتمام ",
+  "Previous point duration": " مدة النقطة السابقة ",
+  "Days": " الأيام ",
+  "Hours": " الساعات ",
+  "Minutes": " الدقائق ",
+  "Next point duration": " مدة النقطة التالية ",
+  "Min": " Min ",
+  "Halt": " Halt ",
+  "Mapped Vehicles": " المركبات المعينة ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": " أدخل الموقع ",
+  "ADD": " ADD ",
+  "Routes Search": " البحث عن الطرق ",
+  "Route Status": " حالة الطريق ",
+  "Source": " المصدر ",
+  "Destination": " الوجهة ",
+  "Test name": "اختبار الاسم",
+  "Test Source": "اختبار المصدر",
+  "Test destination": "اختبار الوجهه",
+  "Routes": " المسارات ",
+  "Untracked vehicles": " المركبات غير المستغلة ",
+  "Please Enter Email ID / Phone Number": " الرجاء إدخال معرف البريد الإلكتروني / رقم الهاتف ",
+  "Please Enter Password": "الرجاء إدخال كلمة المرور",
+  "Please Re Enter Password": "الرجاء إعادة إدخال كلمة المرور",
+  "Delete route": "حذف المسار",
+  "Are you sure to delete this route ??": "هل أنت متأكد من حذف هذا المسار؟",
+  "DELETE": "حذف",
+  "Create Trip": "إنشاء رحلة",
+  "One way trip": "رحلة ذهاب",
+  "Two way trip": "رحلة ذهابًا وإيابًا",
+  "Round trip": " رحلة ذهابًا وإيابًا ",
+  "Start Date/Time": " تاريخ / وقت البدء ",
+  "End Date/Time": " تاريخ / وقت الانتهاء ",
+  "Planned start time": " وقت البدء المخطط ",
+  "Planned end time": " وقت البدء المخطط ",
+  "Actual start time": " وقت البدء الفعلي ",
+  "Actual end time": " تاريخ النهاية الفعلي ",
+  "Trip History": "تاريخ الرحلة",
+  "Admin Account": "حساب المسؤول",
+  "Trip type": "نوع الرحلة",
+  "Routes name": "اسم المسار",
+  "Total Distance": "مجموع المسافة",
+  "Get route": "الحصول على المسار",
+  "Parameters": "العلامات",
+  "Enter First Name": "ادخل الاسم الاول",
+  "Enter Last Name": "ادخل اسم العائلة",
+  "Invalid Password": "كلمة المرور خاطئة",
+  "Confirm Password": "تأكيد كلمة المرور",
+  "Please Enter Confirm Password": "الرجاءادخال تاكيد كلمة السر",
+  "Organisation Name": "اسم المنظمة",
+  "Type of user": "نوع المستخدم",
+  "Mobile Verification": "التحقق من الهاتف",
+  "Mobile Number": "رقم الهاتف",
+  "TRIP HISTORY": "تاريخ الرحلة",
+  "Event name": "اسم الحدث",
+  "Event time": "وقت الحدث",
+  "Driver": " السائق ",
+  "Token": " الرمز",
+  "Restore": "استعادة",
+  "Delete Permanently": "حذف العلامات",
+  "Select no of Days to get reminder for your services": "حدد عدد الأيام للحصول على تذكير بخدماتك",
+  "Prior Notification (Days)": "إشعار مسبق ( أيام) ",
+  "Enter Additonal information here...": "  أدخل معلومات إضافية هنا  ",
+  "Calibration": "معايرة"
+}
\ No newline at end of file
diff --git a/src/assets/i18n/ar_old.json b/src/assets/i18n/ar_old.json
new file mode 100644
index 0000000..8edb106
--- /dev/null
+++ b/src/assets/i18n/ar_old.json
@@ -0,0 +1,658 @@
+{
+	"ADMIN": "مشرف",
+	"DASHBOARD": "لوحة القيادة",
+	"Admin": "مشرف",
+	"GROUPS": "مجموعات",
+	"VEHICLES": "سيارات",
+	"Account Setting": "إعداد الحساب",
+	"General Setting": "إعداد عام",
+	"Application language": "لغة التطبيق",
+	"Language Setting": "إعداد اللغة",
+	"Reset Password" : "إعادة تعيين كلمة المرور",
+	"Notification Settings": "إعدادات الإخطار",
+	"TRACKING": "تتبع",
+	"Tracking": "تتبع",
+	"Reports": "تقارير",
+	"POI LIST": "قائمة POI",
+	"POI List": "قائمة POI",
+	"ROUTES": "الطرق",
+	"NOTIFICATIONS": "الإشعارات",
+	"DISTRIBUTERS": "الموزعون",
+	"DEALERS": "المتعاملون",
+	"Dealers": "المتعاملون",
+	"CUSTOMERS": "العملاء",
+	"Customers": "العملاء",
+	"RUNNING": "قوة",
+	"IDLE": "خامل",
+	"IDLE Reports": "تقرير الخمول",
+	"STOPPED": "توقفت",
+	"EXPIRED": "منتهية الصلاحية",
+	"OUT OF REACH": " خارج متناول ",
+	"NO GPS": " لا GPS ",
+	"Device Icon": " رمز الجهاز ",
+	"Registration number": " رقم التسجيل ",
+	"Group": " المجموعة ",
+	"Today's ODO": " ODO اليوم ",
+	"Total ODO": " ODO الإجمالي ",
+	"Last location": " الموقع الأخير ",
+	"Last updated on": " آخر تحديث في ",
+	"Trip status": " حالة الرحلة ",
+	"Status": "الحالة",
+	"Satellites": "الأقمار الصناعية",
+	"Last Speed": "آخر سرعة",
+	"FUEL (LITRE)": "الوقود في لتر",
+	"GPS": "GPS",
+	"AC": "حالة الجو",
+	"Fuel Reports": "تقرير الوقود",
+	"POWER": "قوة",
+	"GSM Signal": "إشارة GSM",
+	"IGNITION": "الإشعال",
+	"NOTIFICATION": "الإشعار",
+	"My Account": "حسابي",
+	"Log Out": "تسجيل الخروج",
+	"Refresh Data": "تحديث البيانات",
+	"Device Search": "البحث عن الأجهزة",
+	"Previous": "السابق",
+	"Next": "التالي",
+	"DRIVER MASTER": "سيد سائق",
+	"Driver Master": "سيد سائق",
+	"DEVICE MODEL": "نموذج الجهاز",
+	"VEHILE TYPE": "نوع السيارة",
+	"Maintenance Reminder":"تذكير الصيانة",
+	"Vehicle Expense":"مصروفات المركبة",
+	"Message Utility": "الأداة المساعدة للرسالة",
+	"Sensor Detail":"تفاصيل المستشعر",
+	"Billing Detail":"تفاصيل الفواتير",
+	"USER MASTER": "سيد المستخدم",
+	"User Master": "سيد المستخدم",
+	"DEVICE MASTER": "سيد الجهاز",
+	"Device Master": "سيد الجهاز",
+	"System Logs": "سجلات النظام",
+	"GPS TRACKER": "تعقب gps",
+	"CMD PACKETS": " حزم الأوامر",
+	"CMD Packets": " حزم الأوامر",
+	"INVENTORY LIST": "قائمة الجرد",
+	"Inventory List": "قائمة الجرد",
+	"CUSTOMER INQUIRY": " استفسار العميل",
+	"Driver Name": "اسم السائق",
+	"Driver Address": "عنوان السائق",
+	"Driver Status": "حالة السائق",
+	"License Number": "رقم الترخيص",
+	"Salary": "المرتب",
+	"DOJ": "تاريخ الانضمام",
+	"Delete": "حذف",
+	"Device Type": "نوع الجهاز",
+	"Configuration Command": "أمر التكوين",
+	"Location Command": "قيادة الموقع",
+	"Immobilzer Command": "منع الحركة الأوامر ",
+	"Resume Command": " استئناف الأوامر ",
+	"Reset Command": " إعادة تعيين الأوامر ",
+	"Immoblizer Type": " نوع التلامس ",
+	"Port": " المنفذ ",
+	"Edit": " تحرير ",
+	"Brand": " العلامة التجارية ",
+	"Description": " الوصف ",
+	"Model": " الموديل ",
+	"Icon Type": " نوع الأيقونة ",
+	"Voltage Calibration": " معايرة الجهد ",
+	"Tank Size": " الخزان  الحجم ",
+	"Mileage": " الأميال ",
+	"Last Modified": " التعديل الأخير ",
+	"Search by phone": " البحث عن طريق الهاتف ",
+	"Search by name": " البحث بالاسم ",
+	"From Date": " من التاريخ ",
+	"To Date": " إلى التاريخ ",
+	"FIND": " تجد ",
+	"Show": " إظهار ",
+	"entries": " الإدخالات ",
+	"Name": " الاسم ",
+	"Dealer": "التاجر",
+	"Is Dealer": "هو التاجر",
+	"Created on": "تم الإنشاء",
+	"Email": "البريد الإلكتروني",
+	"Phone": "الهاتف",
+	"Device Name": "اسم الجهاز",
+	"Device Id": "معرف الجهاز",
+	"User": "المستخدم",
+	"Expire On": "انتهاء الصلاحية",
+	"Fuel Voltage(mv)": "فولطية الوقود (الميليفولت)",
+	"Sim Number": " رقم سيم ",
+	"Today ODO": " كيلومتر اليوم ",
+	"Search by Device ID": " البحث عن طريق معرف الجهاز ",
+	"Certificates": " الشهادات ",
+	"Export Pdf": " تصدير بي دي إف ",
+	"Search by Sim Number": " البحث عن طريق رقم سيم ",
+	"Export EXCEL": " تصدير تفوق ",
+	"Device IMEI": " معرف الجهاز ",
+	"Lattitude": " خط العرض ",
+	"Longitude": "خط الطول",
+	"Speed": "السرعة",
+	"Device Time": "وقت الجهاز",
+	"Insertion Time": "وقت الإدراج",
+	"Last Push": "الدفعة الأخيرة",
+	"Integration Respnse": "استجابة التكامل",
+	"Ignition": "الإشعال",
+	"Power": "الطاقة",
+	"Ext. Volt": "تحويلة فولت",
+	"Fuel Volt": "فولت الوقود",
+	"Sattelite": "ساتيليتي",
+	"Powercut Alarm": " إنذار انقطاع التيار ",
+	"Inquiry Date": " تاريخ الاستفسار ",
+	"Customer Name": " اسم العميل ",
+	"Message": " رسالة ",
+	"Assigned To": " تم تعيينه إلى ",
+	"Role": " دور ",
+	"No data available in table": " لا توجد بيانات متاحة في الجدول ",
+	"Showing": " عرض ",
+	"Costumer Inquiry": " استفسار مصمم الأزياء ",
+	"System Date": " تاريخ النظام ",
+
+
+	"Vehicle Number": " رقم المركبة ",
+	"Chassis Number": " رقم الهيكل ",
+	"Engine Number": " رقم المحرك ",
+	"Device Model": " طراز الجهاز ",
+	"VLT No.(IMEI)": " رقم VLT (IMEI) ",
+	"VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+	"VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+	"Approving RTO": " الموافقة على RTO ",
+	"Owner Number": " رقم المالك ",
+	"Alternate Number": " الرقم البديل ",
+	"Dealer Name": " اسم البائع ",
+	"Tracking Software": " برنامج التتبع ",
+	"Costumer Name": " اسم العميل ",
+	"Device ID": " معرف الجهاز ",
+	"Operator Name": " اسم المشغل ",
+	"Protocol ID": " معرف البروتوكول ",
+	"Command": " الأوامر ",
+	"ACC": " ACC ",
+	"Battery Status": "حالة البطارية",
+	"GPS DATA": "بيانات GPS",
+	"DEVICES MASTER": "سيد الجهاز",
+	"Groups": "مجموعات",
+	"Add Group": "إضافة مجموعة",
+	"Type group name": "اكتب اسم المجموعة",
+	"CONFIRM": "CONFIRM",
+	"CANCEL": "CANCEL",
+	"Active": "نشط",
+	"InActive": "غير نشط",
+	"Vehicles": "مركبات",
+	"Reg. Number": "رقم التسجيل",
+	"IMEI": "IMEI",
+	"Int. ID": "المعرف الدولي",
+	"SIM 1": "SIM 1",
+	"SIM Provider": "مزود SIM",
+	"SIM2": "SIM2",
+	"Vehicle Type": "نوع المركبة",
+	"Owner": "المالك",
+	"IDLING Since": "IDLING Since",
+	"STOPPED Since": "STOPPED Since",
+	"RUNNING Since": " التشغيل منذ ",
+	"Video Tutorial": " فيديو تعليمي ",
+	"VEHICLE LIST": " قائمة فيديو ",
+	"Vehicle List": " قائمة فيديو ",
+	"MAINTENANCE REMINDER": " تذكير صيانة ",
+	"Maintenance Reminder": " تذكير صيانة ",
+	"REMINDERS": " تذكير ",
+	"Reminders": " تذكير ",
+	"Reminder Date": " تاريخ التذكير ",
+	"Notification Type": " نوع الإخطار ",
+	"Reminder Type": " نوع التذكير ",
+	"Prior Notification(Days)": " إشعار مسبق (أيام)",
+	"Additional notes": "الملاحظات الإضافية",
+	"SEARCH": "البحث",
+	"Live Tracking": "التتبع المباشر",
+	"History Tracking": "تتبع السجل",
+	"Vehicle History": "سجل المركبات",
+	"Generate History": "سجل التاريخ",
+	"Play History": "سجل التشغيل",
+	"Select device": "اختر الجهاز",
+	"Please choose a device": "الرجاء اختر جهازًا , أو, ",
+	"OK": "OK",
+	"GEOFENCE": " بالسياجات الجغرافية",
+	"Grid view": "عرض شبكي",
+	"List view": "عرض القائمة",
+	"Geo Fencing Name": "الاسم الجغرافي",
+	"Geofence type": "نوع السياج الجغرافي",
+	"Enter Alert": "أدخل التنبيه",
+	"Exit Alert": "تنبيه الخروج",
+	"Geofence Search": "البحث الجغرافي",
+	"Add Geofence": " إضافة السيوف ",
+	"Select group": " تحديد مجموعة ",
+	"GEO FENCE NAME": " بالسياجات الجغرافية ",
+	"Get Alert on": " الحصول على حالة تأهب على ",
+	"Entering": " دخول ",
+	"Exiting": " الخروج ",
+	"Create": " خلق ",
+	"Select Your Geo Fence Region": " حدد منطقة السياج الجغرافي ",
+	"Add Geo Fence": "إضافة جيو السياج",
+	"Total Distance(Km)": " المسافة الكلية ",
+	"Fuel consumption(Litre)": " الوقود (لتر) ",
+	"Ignition ON Time(Hr:Min)": " اشتعال وقت التشغيل (ساعة: دقيقة) ",
+	"Ignition OFF Time(Hr:Min)": " وقت إيقاف الإشعال (ساعة: دقيقة) ",
+	"Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+	"Out of reach(Hr:Min)": " بعيد المنال ( ساعة: دقيقة) ",
+	"No GPS(Hr:Min:Sec)": " لا GPS (ساعة: دقيقة: ثانية) ",
+	"Daily Report": " تقرير يومي ",
+	"Daily Reports": " تقرير يومي ",
+	"Trips": " رحلات ",
+	"Max Speed(Km/hr)": " سرعة قصوى (كم / ساعة) ",
+	"My App": " تطبيقي ",
+	"AC Report": " تقرير AC ",
+	"AC Reports": " تقرير AC ",
+	"Loading": " تحميل ",
+	"Vehicle": "مركبة",
+	"Load Management": "إدارة الحمل",
+	"TOTAL VEHICLES": "مجموع المركبات",
+	"ON Time": "وقت التشغيل",
+	"OFF Time": "وقت الإيقاف",
+	"Dashboard": "لوحة القيادة",
+	"RULES": "القواعد",
+	"Alert Report": "تقرير التنبيه",
+	"No": "لا",
+	"Date": "التاريخ",
+	"Power Cut": "انقطاع الطاقة",
+	"Battery": "البطارية",
+	"Geofencing": "تحديد الموقع الجغرافي",
+	"Overspeeding": " السرعة الزائدة ",
+	"Daywise Report": " تقارير الحكمة اليوم ",
+	"Daywise Reports": " تقارير الحكمة اليوم ",
+	"Filter Report": " تقرير مرشح ",
+	"Fuel Consumption Report": " تقرير استهلاك الوقود ",
+	"Fuel Consumption Reports": " تقرير استهلاك الوقود ",
+	"Vehicle name": " اسم المركبة ",
+	"Start Time": " وقت البدء ",
+	"End Time": " وقت الانتهاء ",
+	"Fuel Consumed (L)": " استهلاك الوقود (L) ",
+	"Distance(Kms)": "Distance (Kms)",
+	"In event count": "في عدد الأحداث",
+	"Out event count": "Out out count",
+	"Start Location": "Start Location",
+	"End Location": "End Location",
+	"Click to get device's last location": "انقر للحصول على آخر موقع للجهاز",
+	"SOS Report": "تقرير SOS",
+	"Vehicle No.": "رقم المركبة",
+	"Time": "الوقت",
+	"Address": "العنوان",
+	"Speed variation": "تباين السرعة",
+	"Total K.M": "إجمالي KM",
+	"Generate Graph": "إنشاء رسم بياني",
+	"Driver's Performance Report": "تقرير أداء السائق",
+	"Total trip": "رحلة كاملة",
+	"Total Ontime trip": "رحلة مجموع الوقت الإضافي",
+	"Ontime vehicles": "مركبات ontime",
+	"group": "مجموعة",
+	"TRACKER": " TRACKER ",
+	"REPORTS": " REPORTS ",
+	"Speed Variation": " تباين السرعة ",
+	"Trip Report": " تقرير الرحلة ",
+	"Summary Report": " تقرير موجز ",
+	"Summary Reports": " تقرير موجز ",
+	"Overspeeding Report": " تقرير السرعة الزائدة ",
+	"Overspeeding Reports": " تقرير السرعة الزائدة ",
+	"Route Violation Report": " تقرير عن انتهاك الطريق ",
+	"Route Violation Reports": " تقرير عن انتهاك الطريق ",
+	"Stoppage Report": " تقرير التوقف ",
+	"Stoppage Reports": " تقرير التوقف ",
+	"Ignition Report": " تقرير الإشعال ",
+	"Ignition Reports": " تقرير الإشعال ",
+	"Distance Report": " تقرير عن بعد ",
+	"Distance Reports": " تقرير عن بعد ",
+	"Driver's performance": " تقرير السائق  الأداء ",
+	"VEHICLE TYPE": " VEHICLE TYPE ",
+	"ROUTE LIST": " قائمة الطريق ",
+	"Route list": " قائمة الطريق ",
+	"ROUTE MAPPING": " ROUTE MAPPING ",
+	"Route Mapping": " رسم الخرائط الطريق ",
+	"Dealer Account": " حساب الموزع ",
+	"Geofencing Report": " تقرير Geofencing ",
+	"Geofencing Reports": " تقرير Geofencing ",
+	"Select Geofencing": " تحديد Geofencing ",
+	"Vehicle Name": " اسم المركبة ",
+	"In/Out": " In / Out ",
+	"Datetime": " Datetime ",
+	"Location": " الموقع ",
+	"GeoFence Name": " GeoFence Name ",
+	"Click here to get address": " انقر هنا للحصول على العنوان ",
+	"Select Your Device": " حدد جهازك ",
+	"IDLE REPORT": " تقرير IDLE ",
+	"Select Vehicle": " حدد السيارة ",
+	"Min Idle Time (Min)": " وقت الخمول الأدنى (الحد الأدنى) ",
+	"Duration (HH:MM:SS)": " المدة (HH: MM: SS) ",
+	"AC Status": "حالة AC",
+	"TRACKERS": "TRACKERS",
+	"Date Time": "Date Time",
+	"On/Off": "On / Off",
+	"Overspeed": "Overpeed",
+	"POI name": "POI name",
+	"Arrival Time": "وقت الوصول",
+	"Departure Time": "وقت المغادرة",
+	"Route": "Route",
+	"POI Report": "تقرير POI",
+	"From Time": " من الوقت ",
+	"To Time": " إلى الوقت ",
+	"Duration": " المدة ",
+	"Start Point": " نقطة البداية ",
+	"End Point": " نقطة النهاية ",
+	"Total KM": " إجمالي KM ",
+	"Fuel Consumption (Litre)": " استهلاك الوقود (لتر) ",
+	"Total Running Time (HH:MM)": " إلى tal وقت التشغيل (HH: MM) ",
+	"Total Stop Time (HH:MM)": " إجمالي وقت التوقف (HH: MM) ",
+	"Total Idle Time (HH:MM)": " إجمالي وقت الخمول (HH: MM) ",
+	"Total Out of reach Time (HH:MM)": " إجمالي وقت الوصول (HH: MM) ",
+	"Total No gps Time (HH:MM)": "إجمالي وقت GPS (HH: MM)",
+	"Overspeeding (HH:MM)": "السرعة الزائدة (HH: MM)",
+	"Route Violation": "خرق الطريق",
+	"TRAVEL PATH REPORT": "تقرير مسار السفر",
+	"Travel Path Reports": "تقرير مسار السفر",
+	"Device": "الجهاز",
+	"ODO (K.M.)": "ODO (KM)",
+	"Distance (K.M.)": "المسافة (KM)",
+	"Cumulative Distance (K.M.)": "المسافة التراكمية (KM)",
+	"TRIP REPORT": "تقرير الرحلة",
+	"Trip Reports": "تقرير الرحلة",
+	"TRIP ID": "معرف الرحلة",
+	"VEHICLE NAME": "اسم المركبة",
+	"SOURCE ADDRESS": "عنوان المصدر",
+	"DESTINATION ADDRESS": "عنوان الوجهة",
+	"DISTANCE": "المسافة",
+	"DURATION": "المدة",
+	"TRIP STATUS": "رحلة الرحلة",
+	"MILEAGE": "الأميال",
+	"ADD EXPENSES": "إضافة مصاريف",
+	"EXPENSES LIST": "قائمة مصاريف",
+	"Amount": "مبلغ",
+	"Currency": "عملة",
+	"Payment Mode": "وضع الدفع",
+	"Expense type": "نوع النفقات",
+	"GEO FENCING": "GEO FENCING",
+	"ADD DEVICE": "إضافة جهاز",
+	"GENERAL SETTING": "إعداد عام",
+	"Device ID *": "معرف الجهاز *",
+	"Enter Device ID": "أدخل معرف الجهاز",
+	"Device Name * ": "اسم الجهاز *",
+	"Enter Device Name": "أدخل اسم الجهاز",
+	"SIM Number": "رقم بطاقة SIM",
+	"SIM Number 2": "رقم بطاقة SIM 2",
+	"SIM Provider 2": "مزود بطاقة SIM 2",
+	"Integration ID": "معرّف التكامل",
+	"Select User": "حدد مستخدم",
+	"Driver Contact Number": "رقم اتصال برنامج التشغيل",
+	"Select Vehicle type*": "حدد نوع السيارة *",
+	"Type of Vehicle": "نوع السيارة",
+	"mm/dd/yyyy": "mm / dd / yyyy",
+	"ICCICD Number": "رقم ICCICD",
+	"IMSI": "IMSI",
+	"Unique ID": "المعرف الفريد",
+	"CID number": "رقم CID",
+	"Chassis number": "رقم الشاسيه",
+	"Comapny Name": "اسم الشركه",
+	"Company Address": "عنوان الشركة",
+	"Transport Office City": "مدينة مكتب النقل",
+	"Transport Office State": "دولة مكتب النقل",
+	"Invoice Number": "رقم الفاتورة",
+	"Number of SOS": "رقم SOS",
+	"Doc Type": "نوع المستند",
+	"Enter SIM Provider": "أدخل مزود SIM",
+	"Enter SIM Provider 2": "أدخل مزود SIM 2",
+	"Driver's contact number": "جهة اتصال سائق رقم ",
+	"Device model *": " طراز الجهاز * ",
+	"Vehicle type * ": " نوع السيارة * ",
+	"Expiration date": " تاريخ انتهاء الصلاحية ",
+	"Engine number": " رقم المحرك ",
+	"Type of Vehicle ": " نوع السيارة ",
+	"Manufacturing company": " تصنيع كوم pany ",
+	"Registration date ": " تاريخ التسجيل ",
+	"Date of Manufacturing Year ": " تاريخ سنة التصنيع ",
+	"Last fitness date ": " تاريخ اللياقة البدنية الأخير ",
+	"ICCICD Number ": " رقم ICCICD ",
+	"Fitment Date ": " تاريخ الإعداد ",
+	"IMSI ": " IMSI ",
+	"Unique ID ": " المعرف الفريد ",
+	"CID number ": "رقم CID",
+	"Chassis number ": "رقم الهيكل",
+	"Comapny Name ": "اسم شركة",
+	"Comapny Address": "عنوان شركة",
+	"Invoice number": "رقم الفاتورة",
+	"Invoice Date": "تاريخ الفاتورة",
+	"No. of SOS ": "رقم SOS",
+	"Add Document field": "إضافة حقل مستند",
+	"Document issued date :": "تاريخ إصدار المستند",
+	"UPDATE AND SAVE": "تحديث وحفظ",
+	"Reason": "التحديث والادخار",
+	"Password": "السبب",
+	"Driver Search": "كلمة المرور",
+	"Enter User Id": "سائق البحث",
+	"Enter First name": "أدخل اسم المستخدم",
+	"Enter Last name": "أدخل الاسم الأول",
+	"Enter email": "أدخل اسم العائلة",
+	"Enter mobile number": "أدخل البريد الإلكتروني",
+	"Enter Address": "أدخل رقم الهاتف المحمول",
+	"EDIT CUSTOMER": "أدخل العنوان ",
+	"Delete Dealer": " EDIT CUSTOMER ",
+	"Documents": " حذف التاجر ",
+	"Document Name": " المستندات ",
+	"Document number": " اسم المستند ",
+	"Action": " رقم المستند ",
+	"Add": " الإجراء ",
+	"Upload Documents *": " إضافة ",
+	"Save": " تحميل المستندات ",
+	"delete": " حفظ ",
+	"Doc number": " حذف ",
+	"Download": " مستند  رقم ",
+	"Yes, Delete it!": " تنزيل ",
+	"Cancel": " نعم , احذفه! ",
+	"EDIT DEALER": " إلغاء ",
+	"Are you sure ?": " تحرير موزع ",
+	"you want to delete dealer": " هل أنت متأكد؟ ",
+	"Edit Model": " تريد حذف تاجر ",
+	"Enter device model": " تحرير نموذج ",
+	"Configuration command": " أدخل طراز الجهاز ",
+	"Location command": "أمر التكوين",
+	"Imobilizer command": "أمر الموقع",
+	"Resume command": "أمر الإمساك",
+	"Reset command": "أمر الاستئناف",
+	"Manufacturer": "أمر إعادة الضبط",
+	"Server Command": "الصانع",
+	"Mobile Command": "أمر الخادم",
+	"Update": "أمر القيادة المحمول",
+	"Edit trip details": "التحديث",
+	"Route name": "تحرير تفاصيل الرحلة",
+	"Vehicles name": " اسم الطريق ",
+	"Radius (in meter)": " اسم المركبات ",
+	"Driver name": " نصف القطر (بالمتر) ",
+	"Loading site": " اسم السائق ",
+	"Unloading site": " موقع التحميل ",
+	"LR Number": " موقع إلغاء التحميل ",
+	"Device Name: ": " رقم LR ",
+	"Days: ": " اسم الجهاز: ",
+	"M": " الأيام ",
+	"T": " M ",
+	"W": "T",
+	"Th": "W",
+	"F": "Th",
+	"Sa": "F",
+	"S": "Sa",
+	"Edit Vehicle Type": "S",
+	"Brand:": "تحرير نوع المركبة",
+	"Enter Brand Name": "العلامة التجارية:",
+	"Description:": "أدخل اسم العلامة التجارية",
+	"Enter Description": "الوصف:",
+	"Please Enter Description": "أدخل دي وصف ",
+	"Select icon type": " الرجاء إدخال الوصف ",
+	"Voltage Value": " حدد نوع الرمز ",
+	"Fuel value": " قيمة الجهد ",
+	"add": " قيمة الوقود ",
+	"Volatage Calibrator": " إضافة ",
+	"Please Enter voltage": " معاير Volatage ",
+	"Please fuel value": " الرجاء إدخال الجهد ",
+	"Please Enter Tank Size": " الرجاء إدخال قيمة الوقود ",
+	"FUEL EVENTS": " الرجاء إدخال الخزان الحجم ",
+	"Please Enter Mileage": " أحداث الوقود ",
+	"Fuel Change (L)": " الرجاء إدخال عدد الكيلومترات ",
+	"Search Device": " تغيير الوقود (L) ",
+	"Generate Report": " البحث عن جهاز ",
+	"Sleep Mode Temprature": " إنشاء تقرير ",
+	"Temprature": " درجة حرارة وضع السكون ",
+	"ON": " درجة الحرارة ",
+	"OFF": " ON ",
+	"list": " OFF ",
+	"Enter GEO FENCE NAME": "list",
+	"Get Alert on :": "Enter GEO FENCE NAME",
+	"Select Your Geo Fence Region :": "Get Alert on:",
+	"Search Box": "Select Your Geo Fence Region:",
+	"--Select group--": "Box Search",
+	"--Geofence type--": "Select group",
+	"--GEO FENCE NAME--": "Geofence type",
+
+	"close": "Admin ",
+	"DEVICES": " close ",
+	"Matrix Input": " DEVICES ",
+	"Device Id-": " Matrix Input ",
+	"Matrix Name": " معرف الجهاز ",
+	"Topic": " Matrix Name ",
+	"Ext. Volt.": " Topic ",
+	"Fuel Volt.": "Fuel Volt.",
+	"Real Time GPS Based Vechicle Tracking": "تتبع Vechicle القائم على نظام GPS في الوقت الفعلي",
+	"Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": "تتبع المركبات الحية",
+	"Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " يمنحك تحديثات في الوقت الفعلي , مما يسمح لك بالحصول على أحدث معلومات التتبع الخاصة بك على vechile. ",
+	"User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Enterprise Maps by Google-API للاستخدام التجاري التي توفر تفاصيل دقيقة عن موقع vechiles. ",
+	"Software as a Service(Saas) with perpetual uptime.": " نظام تتبع سهل الاستخدام يساعدك على تتبع وتحديد موقع الأسطول دون نقرة. ",
+	"Alerts and Event Notifications": " Software as a Service (Saas) مع وقت تشغيل دائم. ",
+	"Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " التنبيهات وإشعارات الأحداث ",
+	"Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " احصل على إشعارات أثناء تنقلك على الرسائل القصيرة والبريد الإلكتروني وتطبيقات الهاتف المحمول , سيتم إطلاعك باستمرار على تنبيهات الوقت الفعلي. ",
+	"Schedule your alerts as per your convenience that suits your needs": " يمكن للمستلمين المتعددين تلقي تنبيهات , ليس فقط أنت , ولكن يمكن أيضًا التعرف على الأشخاص القريبين التنبيهات التي تم إنشاؤها للحصول على مساعدة فورية. ",
+	"Detailed Reports for analysis is also available for making quik decisions": " قم بجدولة التنبيهات وفقًا لراحتك التي تناسب احتياجاتك ",
+	"Geofences": "السياج الجغرافي",
+	"Geofence": "السياج الجغرافي",
+	"Upload all Geofence in your account and assign them to the vehicles.": " Geofences ",
+	"Find and mark geofences without knowing latitude and longitude values.": " تحميل جميع Geofence في حسابك وتعيين لهم إلى المركبات. ",
+	"Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": " البحث وعلامة geofences دون معرفة خطوط الطول وقيم خط الطول. ",
+	"Date and Time Based reports available for analyzing vehicle usage.": " المضلع الجغرافي يسهل الوصول إليه بسهولة. يمكن وضع علامة على جميع السياج الجغرافي وفقًا لراحة المستخدم ويمكن تخصيصها للمركبات بحيث يكون كل حالة تأهب لك. قم بحماية أحبائك وتأكد من قيام قواتك بالعمل الذي تقوم به. ",
+	"Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " تتوفر تقارير حسب التاريخ والوقت لتحليل استخدام السيارة. ",
+	"Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " موقع المركبات , يعرض لك كل سجل موقع المركبة حيث كانت سيارتك سهلة لإدارة الحادث حيث حدث ذلك. ",
+	"Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " مركبة حكيمة / أسطول تقرير حكيم consildated. يوفر لك ملخص اليوم للمركبة (السيارات). ",
+	"Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " تقرير التنبيه , تقرير موحد لجميع التنبيهات الناتجة عن السيارة. السرعة الزائدة , العبث , الاشتعال , وما إلى ذلك. ",
+	"How it works": " تقرير Geofence , تقرير مفصل متى وفي أي وقت دخلت السيارة المناطق الجغرافية. ",
+	"Real-time tracking": "التعقب في الوقت الفعلي",
+	"Advanced Reporting": "التقارير المتقدمة",
+	"Alerts & Warning": "التنبيهات والتحذيرات",
+	"2-Way messaging": "الرسائل ثنائية الاتجاه",
+	"Engine immobilisation": "عطل المحرك",
+	"Monitor gauges": "مقاييس الشاشة",
+	"Access anytime, anywhere!": "الوصول إلى أي زمان ومكان!",
+	"Web browser based software": "البرنامج المستند إلى مستعرض الويب",
+	"Android app": "تطبيق Android",
+	"iPhone app": "تطبيق iPhone",
+	"Request for Demo": "طلب العرض التوضيحي",
+	"Get Detail": "الحصول على التفاصيل",
+	"Export To Excel": "تصدير إلى Excel",
+	"Loading Site": "تحميل الموقع",
+	"Distance": "المسافة",
+	"ETA": "ETA",
+	"directions": "الاتجاهات",
+	"Google Traffic": "Google Traffic",
+	"Google Hybrid": "Google Hybrid",
+	"Google Satellite": "Google Satellite",
+	"Google Physical": "Google Physical",
+	"Google Street": "Google Street",
+	"map": "map",
+	"Please Select Your Device, From/To Date & Time to view history from above options": "الرجاء تحديد جهازك , من / إلى التاريخ والوقت لعرض السجل من الخيارات أعلاه",
+	"Generate Map": "إنشاء خريطة",
+	"Trip Name": " اسم الرحلة ",
+	"Select destination": " تحديد الوجهة ",
+	"CREATE TRIP": " إنشاء رحلة ",
+	"Total Distance: ": " المسافة الإجمالية: ",
+	"Idle Time (Min)": " وقت الخمول (الحد الأدنى) ",
+	"Go to Site >": " اذهب إلى الموقع> ",
+	"Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+	"Login": " تسجيل الدخول ",
+	"Username / Phone Number": " اسم المستخدم / رقم الهاتف  ",
+	"Enter Mobile number*": " أدخل رقم الهاتف المحمول  ",
+	"Confirm New Password": " تأكيد كلمة المرور الجديدة ",
+	"Send OTP": " إرسال OTP ",
+	"Back to Login": " الرجوع إلى تسجيل الدخول ",
+	"Reset Password": " إعادة تعيين كلمة المرور ",
+	"Back to previous Form": " الرجوع إلى النموذج السابق ",
+	"Forgot Username / Password?": " هل نسيت اسم المستخدم / كلمة المرور؟ ",
+	"First Name": " الاسم الأول ",
+	"Last Name": "اسم العائلة",
+	"Email Id": "معرف البريد الإلكتروني",
+	"Organisation": "المنظمة",
+	"notifications": "الإشعارات",
+	"Notification Sound": "صوت الإشعارات",
+	"Notifications": "الإشعارات",
+	"Add Phone": "إضافة هاتف",
+	"Close": "إغلاق",
+	"Add Email": "إضافة بريد إلكتروني",
+	"POI details": "تفاصيل نقطة مهمة",
+	"Add POI details": "إضافة نقطة مهمة التفاصيل ",
+	"Type POI name": " اكتب اسم نقطة الاهتمام ",
+	"Previous point duration": " مدة النقطة السابقة ",
+	"Days": " الأيام ",
+	"Hours": " الساعات ",
+	"Minutes": " الدقائق ",
+	"Next point duration": " مدة النقطة التالية ",
+	"Min": " Min ",
+	"Halt": " Halt ",
+	"Mapped Vehicles": " المركبات المعينة ",
+	"Radius": " Radius ",
+	"POI Name": " POI Name ",
+	"Enter a location": " أدخل الموقع ",
+	"ADD": " ADD ",
+	"Routes Search": " البحث عن الطرق ",
+	"Route Status": " حالة الطريق ",
+	"Source": " المصدر ",
+	"Destination": " الوجهة ",
+	"Test name": " اسم الاختبار ",
+	"Test Source": " مصدر الاختبار ",
+	"Test destination": " وجهة الاختبار ",
+	"Routes": " المسارات ",
+	"Untracked vehicles": " المركبات غير المستغلة ",
+	"Please Enter Email ID / Phone Number": " الرجاء إدخال معرف البريد الإلكتروني / رقم الهاتف ",
+	"Please Enter Password": "الرجاء إدخال كلمة المرور",
+	"Please Re Enter Password": "الرجاء إعادة إدخال كلمة المرور",
+	"Delete route": "حذف المسار",
+	"Are you sure to delete this route ??": "هل أنت متأكد من حذف هذا المسار؟",
+	"DELETE": "حذف",
+	"Create Trip": "إنشاء رحلة",
+	"One way trip": "رحلة ذهاب",
+	"Two way trip": "رحلة ذهابًا وإيابًا",
+	"Round trip": " رحلة ذهابًا وإيابًا ",
+	"Start Date/Time": " تاريخ / وقت البدء ",
+	"End Date/Time": " تاريخ / وقت الانتهاء ",
+	"Planned start time": " وقت البدء المخطط ",
+	"Planned end time": " وقت البدء المخطط ",
+	"Actual start time": " وقت البدء الفعلي ",
+	"Actual end time": " تاريخ النهاية الفعلي ",
+	"Trip History": "نوع الرحلة",
+	"Admin Account" : "حساب المسؤول",
+	"Trip type": "اسم المسارات",
+	"Routes name": "المسافة الإجمالية",
+	"Total Distance": "الحصول على الطريق",
+	"Get route": "المعلمات",
+	"Parameters": "أدخل الاسم الأول",
+	"Enter First Name": "أدخل اسم العائلة",
+	"Enter Last Name": "كلمة المرور غير صالحة",
+	"Invalid Password": "تأكيد كلمة المرور",
+	"Confirm Password": "الرجاء إدخال تأكيد كلمة المرور ",
+	"Please Enter Confirm Password": " اسم المنظمة ",
+	"Organisation Name": " نوع المستخدم ",
+	"Type of user": " التحقق من الهاتف المحمول ",
+	"Mobile Verification": " رقم الهاتف المحمول ",
+	"Mobile Number": " تاريخ الرحلة ",
+	"TRIP HISTORY": " اسم الحدث ",
+	"Event name": " وقت الحدث ",
+	"Event time": " السائق ",
+	"Driver": " الرمز ",
+
+	"Token": " استعادة ",
+	"Restore": "حذف نهائيًا",
+	"Delete Permanently": "حدد عدد الأيام للحصول على تذكير بخدماتك",
+	"Select no of Days to get reminder for your services": "إشعار مسبق ( أيام) ",
+	"Prior Notification (Days)": " أدخل معلومات إضافية هنا ",
+	"Enter Additonal information here...": " معايرة ",
+	"Calibration": "معايرة" 
+
+
+}
\ No newline at end of file
diff --git a/src/assets/i18n/bhasa_web.json b/src/assets/i18n/bhasa_web.json
new file mode 100644
index 0000000..18c9d46
--- /dev/null
+++ b/src/assets/i18n/bhasa_web.json
@@ -0,0 +1,648 @@
+{
+	"ADMIN": "Administratori",
+	"DASHBOARD": "DASBOR",
+	"Admin": "Administratori",
+	"GROUPS": "KELOMPOK",
+	"VEHICLES": "KENDARAAN",
+	"Account Setting": "Pengaturan akun",
+	"General Setting": "Pengaturan umum",
+	"Application language": "Bahasa aplikasi",
+	"Language Setting": "Pengaturan bahasa",
+	"Reset Password": "Setel Ulang Kata Sandi ",
+	"Notification Settings": "Pengaturan pemberitahuan",
+	"TRACKING": "PELACAKAN",
+	"Tracking": "PELACAKAN",
+	"Reports": "Laporan",
+	"POI LIST": "DAFTAR POI�",
+	"POI List": "DAFTAR POI",
+	"ROUTES": "RUTE",
+	"NOTIFICATIONS": "PEMBERITAHUAN",
+	"DISTRIBUTERS": "DISTRIBUTER",
+	"DEALERS": "DEALER",
+	"Dealers": "DEALER",
+	"CUSTOMERS": "PELANGGAN",
+	"Customers": "PELANGGAN",
+	"RUNNING": "BERLARI",
+	"IDLE": "MENGANGGUR",
+	"IDLE Reports": "Laporan IDLE",
+	"STOPPED": "DIHENTIKAN",
+	"EXPIRED": "KEDALUWARSA",
+	"OUT OF REACH": "DILUAR JANGKAUAN",
+	"NO GPS": " TIDAK ADA GPS",
+	"Device Icon": "Ikon Perangkat",
+	"Registration number": " Nomor pendaftaran ",
+	"Group": " Kelompok",
+	"Today's ODO": "ODO hari ini",
+	"Total ODO": " Jumlah ODO ",
+	"Last location": " Lokasi terakhir ",
+	"Last updated on": " Terakhir diperbarui saat ",
+	"Trip status": "Status perjalanan",
+	"Status": "Status",
+	"Satellites": "Satelit",
+	"Last Speed": "Kecepatan Terakhir",
+	"FUEL (LITRE)": "BAHAN BAKAR (LITER)",
+	"GPS": "GPS",
+	"AC": "AC",
+	"Fuel Reports": "Laporan Bahan Bakar",
+	"POWER": "KEKUASAAN",
+	"GSM Signal": "Sinyal GSM",
+	"IGNITION": "PENGAPIAN",
+	"NOTIFICATION": "PEMBERITAHUAN",
+	"My Account": "Akun saya",
+	"Log Out": "Keluar",
+	"Refresh Data": "Segarkan Data",
+	"Device Search": "Pencarian Perangkat",
+	"Previous": "Sebelumnya",
+	"Next": "Lanjut",
+	"DRIVER MASTER": "GURU PENGEMUDI",
+	"Driver Master": " Sopir Master ",
+	"DEVICE MODEL": "MODEL PERANGKAT",
+	"VEHILE TYPE": "JENIS KENDARAAN",
+	"Maintenance Reminder": "Pengingat Pemeliharaan",
+	"Vehicle Expense": "Biaya Kendaraan",
+	"Message Utility": "Utilitas Pesan",
+	"Sensor Detail": "Detil Sensor",
+	"Billing Detail": "Rincian Penagihan",
+	"USER MASTER": "PENGGUNA MASTER",
+	"User Master": "Master Pengguna",
+	"DEVICE MASTER": "GURU PERANGKAT",
+	"Device Master": " Master Perangkat ",
+	"System Logs": "Log Sistem",
+	"GPS TRACKER": "PELACAK GPS",
+	"CMD PACKETS": " PAKET CMD",
+	"CMD Packets": " Paket CMD",
+	"INVENTORY LIST": "DAFTAR INVENTARIS",
+	"Inventory List": "Daftar inventaris",
+	"CUSTOMER INQUIRY": " PERTANYAAN PELANGGAN",
+	"Driver Name": "Nama pengemudi",
+	"Driver Address": "Alamat Pengemudi",
+	"Driver Status": "Status Pengemudi",
+	"License Number": "Nomor lisensi",
+	"Salary": "Gaji",
+	"DOJ": "DOJ",
+	"Delete": "Menghapus",
+	"Device Type": "Tipe perangkat",
+	"Configuration Command": "Perintah Konfigurasi",
+	"Location Command": "Komando Lokasi",
+	"Immobilzer Command": "Komando Immobilizer",
+	"Resume Command": "Lanjutkan Perintah",
+	"Reset Command": "Lanjutkan Perintah ",
+	"Immobilzer Type": "Jenis Immobilizer",
+	"Port": "Pelabuhan",
+	"Edit": "Sunting ",
+	"Brand": "Merek",
+	"Description": " Keterangan",
+	"Model": "Model",
+	"Icon Type": " Jenis Ikon",
+	"Voltage Calibration": " Kalibrasi Tegangan ",
+	"Tank Size": " Ukuran Tangki: ",
+	"Mileage": "Jarak tempuh ",
+	"Last Modified": "Last Modified",
+	"Search by phone": " Cari melalui telepon",
+	"Search by name": " Cari berdasarkan nama",
+	"From Date": " Dari tanggal",
+	"To Date": " Hingga saat ini ",
+	"FIND": "TEMUKAN ",
+	"Show": "Menunjukkan",
+	"entries": "entri ",
+	"Name": "Nama",
+	"Dealer": "Pedagang",
+	"Is Dealer": "Apakah Dealer?",
+	"Created on": "Dibuat pada",
+	"Email": "Surel",
+	"Phone": "Telepon",
+	"Device Name": "Nama perangkat",
+	"Device Id": "Id Perangkat",
+	"User": "Pengguna",
+	"Expire On": "Kedaluwarsa Pada",
+	"Fuel Voltage(mv)": "Tegangan Bahan Bakar (mv)",
+	"Sim Number": " Nomor Sim ",
+	"Today ODO": " Hari ini ODO ",
+	"Search by Device ID": "Cari berdasarkan ID Perangkat ",
+	"Certificates": "Sertifikat ",
+	"Export Pdf": " Ekspor Pdf",
+	"Search by Sim Number": " Cari berdasarkan Nomor Sim",
+	"Export EXCEL": "Ekspor EXCEL",
+	"Device IMEI": "IMEI perangkat",
+	"Lattitude": "Lintang ",
+	"Longitude": "Garis bujur",
+	"Speed": "Kecepatan",
+	"Device Time": "Waktu Perangkat",
+	"Insertion Time": "Waktu Penyisipan",
+	"Last Push": "Dorongan Terakhir",
+	"Integration Respnse": "Respons Integrasi",
+	"Ignition": "Pengapian",
+	"Power": "Kekuasaan",
+	"Ext. Volt": "Eks. Volt",
+	"Fuel Volt": "Volt Bahan Bakar",
+	"Sattelite": "Satelit",
+	"Powercut Alarm": " Alarm Pemadaman Listrik ",
+	"Inquiry Date": " Tanggal Permintaan ",
+	"Customer Name": "Nama Pelanggan",
+	"Message": "Pesan ",
+	"Assigned To": "Ditugaskan untuk",
+	"Role": "Peran",
+	"No data available in table": "Tidak ada data di dalam tabel ",
+	"Showing": " Menampilkan ",
+	"Costumer Inquiry": "Pertanyaan Pelanggan",
+	"System Date": " Tanggal Sistem",
+	"Vehicle Number": "Nomor kendaraan",
+	"Chassis Number": "Nomor Sasis ",
+	"Engine Number": " Nomor mesin",
+	"Device Model": " Model Perangkat",
+	"VLT No.(IMEI)": " Nomor VLT (IMEI) ",
+	"VLT SIM(IDEA)": " SIM VLT (IDE) ",
+	"VLT SIM(BSNL)": " SIM VLT (BSNL) ",
+	"Approving RTO": " Menyetujui RTO ",
+	"Owner Number": " Nomor Pemilik ",
+	"Alternate Number": "Nomor Alternatif",
+	"Dealer Name": "Nama dealer",
+	"Tracking Software": " Perangkat Lunak Pelacakan",
+	"Costumer Name": " Nama Pelanggan",
+	"Device ID": " ID Perangkat",
+	"Operator Name": " Nama Operator ",
+	"Protocol ID": " ID protokol ",
+	"Command": " Memerintah",
+	"ACC": " ACC ",
+	"Battery Status": "Status baterai",
+	"GPS DATA": "DATA GPS",
+	"DEVICES MASTER": "MASTER PERANGKAT",
+	"Groups": "Grup",
+	"Add Group": "Tambahkan Grup",
+	"Type group name": "Ketik nama grup",
+	"CONFIRM": "KONFIRMASI",
+	"CANCEL": "MEMBATALKAN",
+	"Active": "Aktif",
+	"InActive": "Tidak Aktif",
+	"Vehicles": "Kendaraan",
+	"Reg. Number": "Reg. Nomor",
+	"IMEI": "IMEI",
+	"Int. ID": "Int. Indo",
+	"SIM 1": "SIM 1",
+	"SIM Provider": "Penyedia SIM",
+	"SIM2": "SIM2",
+	"Vehicle Type": "Jenis Kendaraan",
+	"Owner": "Pemilik",
+	"IDLING Since": "IDLING Sejak",
+	"STOPPED Since": "BERHENTI Sejak",
+	"RUNNING Since": " BERJALAN Sejak",
+	"Video Tutorial": " Video tutorial",
+	"VEHICLE LIST": " DAFTAR KENDARAAN",
+	"Vehicle List": " Daftar Kendaraan ",
+	"MAINTENANCE REMINDER": " PENGINGAT PEMELIHARAAN ",
+	"REMINDERS": "PENGINGAT ",
+	"Reminders": "Pengingat ",
+	"Reminder Date": " Tanggal Pengingat",
+	"Notification Type": " Jenis Pemberitahuan",
+	"Reminder Type": " Jenis Pengingat",
+	"Prior Notification(Days)": "Pemberitahuan Sebelumnya (Hari) ",
+	"Additional notes": "Catatan tambahan",
+	"SEARCH": "CARI",
+	"Live Tracking": "Pelacakan Langsung",
+	"History Tracking": "Pelacakan Sejarah",
+	"Vehicle History": "Sejarah Kendaraan",
+	"Generate History": "Hasilkan Sejarah",
+	"Play History": "Mainkan Sejarah",
+	"Select device": "Pilih alat",
+	"Please choose a device": "Silakan pilih perangkat",
+	"OK": "oke",
+	"GEOFENCE": " GEOFENCE",
+	"Grid view": "Tampilan bergaris",
+	"List view": "Tampilan daftar",
+	"Geo Fencing Name": "Nama Pagar Geo",
+	"Geofence type": "Jenis geofence",
+	"Enter Alert": "Masukkan Peringatan",
+	"Exit Alert": "Peringatan Keluar",
+	"Geofence Search": "Pencarian Geofence",
+	"Add Geofence": " Tambahkan Geofence ",
+	"Select group": " Pilih grup",
+	"GEO FENCE NAME": "NAMA PAGAR GEO",
+	"Get Alert on": "Aktifkan Peringatan ",
+	"Entering": "Memasuki",
+	"Exiting": " Keluar",
+	"Create": " Membuat",
+	"Add Geo Fence": "Tambahkan Pagar Geo",
+	"Total Distance(Km)": "Jarak Total (Km) ",
+	"Fuel consumption(Litre)": " Konsumsi bahan bakar (Liter) ",
+	"Ignition ON Time(Hr:Min)": " Waktu Pengapian ON (Jam:Min)) ",
+	"Ignition OFF Time(Hr:Min)": " Waktu Penyalaan Mati (Jam:m) ",
+	"Idle Time(Hr:Min)": " Waktu Tunda (jam: mnt) ",
+	"Out of reach(Hr:Min)": " Di luar jangkauan (Jam:Min)",
+	"No GPS(Hr:Min:Sec)": "Tidak Ada GPS(Jam:Min:Detik)",
+	"Daily Report": " Laporan harian ",
+	"Daily Reports": " Laporan Harian",
+	"Trips": "Perjalanan ",
+	"Max Speed(Km/hr)": "Kecepatan Maks (Km / jam)",
+	"My App": " Aplikasi saya",
+	"AC Report": "Laporan AC ",
+	"AC Reports": "Laporan AC ",
+	"Loading": "Memuat",
+	"Vehicle": "Kendaraan",
+	"Load Management": " manajemen beban ",
+	"TOTAL VEHICLES": "TOTAL KENDARAAN",
+	"ON Time": "TEPAT WAKTU",
+	"OFF Time": "WAKTU OFF",
+	"Dashboard": "Dasbor",
+	"RULES": "ATURAN",
+	"Alert Report": "Laporan Peringatan ",
+	"No": "Tidak",
+	"Date": "Tanggal",
+	"Power Cut": "Pemadaman listrik",
+	"Battery": "Baterai",
+	"Geofencing": "Geofencing",
+	"Overspeeding": "terlalu cepat",
+	"Daywise Report": "Laporan Sehari-hari ",
+	"Daywise Reports": " Laporan Harian",
+	"Filter Report": " Filter Laporan",
+	"Fuel Consumption Report": " Laporan Konsumsi Bahan Bakar",
+	"Fuel Consumption Reports": " Laporan Konsumsi Bahan Bakar ",
+	"Vehicle name": " Nama kendaraan",
+	"Start Time": "Waktu mulai ",
+	"End Time": " Akhir waktu",
+	"Fuel Consumed (L)": " Konsumsi Bahan Bakar (L)",
+	"Distance(Kms)": "Jarak (Km)",
+	"In event count": "Dalam hitungan acara",
+	"Out event count": "Jumlah acara keluar",
+	"Start Location": "Mulai Lokasi",
+	"End Location": "Lokasi Akhir",
+	"Click to get device's last location": "Klik untuk mendapatkan lokasi terakhir perangkat",
+	"SOS Report": "Laporan SOS",
+	"Vehicle No.": "Kendaraan No.",
+	"Time": "Waktu",
+	"Address": "Alamat",
+	"Speed variation": "Variasi kecepatan",
+	"Total K.M": "Jumlah K.M",
+	"Generate Graph": "Hasilkan Grafik",
+	"Driver's Performance Report": " Laporan Kinerja Pengemudi",
+	"Total trip": "Total trip",
+	"Total Ontime trip": "Total Ontime trip",
+	"Ontime vehicles": "Ontime vehicles",
+	"group": "kelompok",
+	"TRACKER": "PELACAK ",
+	"REPORTS": "LAPORAN ",
+	"Speed Variation": " Variasi Kecepatan",
+	"Trip Report": "  Laporan Perjalanan",
+	"Summary Report": " Rangkuman laporan ",
+	"Summary Reports": " Laporan Ringkasan ",
+	"Overspeeding Report": " Laporan yang terlalu cepat",
+	"Overspeeding Reports": " Laporan yang terlalu cepat ",
+	"Route Violation Report": " Route Violation Report ",
+	"Route Violation Reports": "Laporan Pelanggaran Rute ",
+	"Stoppage Report": " Laporan Penghentian",
+	"Stoppage Reports": "Laporan Penghentian ",
+	"Ignition Report": "Laporan Pengapian ",
+	"Ignition Reports": "Laporan Pengapian",
+	"Distance Report": " Laporan Jarak ",
+	"Distance Reports": " Laporan Jarak ",
+	"Driver's performance": "Performa pengemudi ",
+	"VEHICLE TYPE": " JENIS KENDARAAN",
+	"ROUTE LIST": " DAFTAR RUTE",
+	"Route list": " Daftar rute",
+	"ROUTE MAPPING": "PEMETAAN RUTE",
+	"Route Mapping": " Pemetaan Rute",
+	"Dealer Account": " Akun Dealer",
+	"Geofencing Report": " Laporan Geofencing",
+	"Geofencing Reports": " Laporan Geofencing",
+	"Select Geofencing": "Pilih Geofencing ",
+	"Vehicle Name": " Nama Kendaraan",
+	"In/Out": "Masuk/Keluar ",
+	"Datetime": " Tanggal Waktu",
+	"Location": "Lokasi",
+	"GeoFence Name": " Nama GeoFence ",
+	"Click here to get address": "Klik di sini untuk mendapatkan alamat",
+	"Select Your Device": "Pilih Perangkat Anda ",
+	"IDLE REPORT": " LAPORAN TIDAK ADA ",
+	"Select Vehicle": "Pilih Kendaraan",
+	"Min Idle Time (Min)": "Waktu Menganggur Min (Min)",
+	"Duration (HH:MM:SS)": "Durasi (JJ:MM:SS)",
+	"AC Status": " Status AC",
+	"TRACKERS": "PELACAK",
+	"Date Time": "Tanggal Waktu",
+	"On/Off": "Hidup/Mati",
+	"Overspeed": "Kecepatan berlebih",
+	"POI name": "nama POI",
+	"Arrival Time": "Jam kedatangan",
+	"Departure Time": "Waktu Departemen",
+	"Route": "Rute",
+	"POI Report": "Laporan POI",
+	"From Time": " Dari waktu",
+	"To Time": "Untuk waktu ",
+	"Duration": "Durasi ",
+	"Start Point": "Titik awal",
+	"End Point": " Titik Akhir",
+	"Total KM": "Jumlah KM",
+	"Fuel Consumption (Litre)": "Konsumsi Bahan Bakar (Liter) ",
+	"Total Running Time (HH:MM)": "Total Waktu Berjalan (JJ:MM)",
+	"Total Stop Time (HH:MM)": " Total waktu berhenti (JJ:MM) ",
+	"Total Idle Time (HH:MM)": " Total Waktu Menganggur (JJ:MM) ",
+	"Total Out of reach Time (HH:MM)": "Total Waktu Di Luar Jangkauan (JJ:MM)",
+	"Total No gps Time (HH:MM)": "Total Tidak Ada Waktu gps (JH:MM)",
+	"Overspeeding (HH:MM)": "Kecepatan berlebih (HH:MM)",
+	"Route Violation": " Pelanggaran Rute",
+	"TRAVEL PATH REPORT": " LAPORAN JALUR PERJALANAN",
+	"Travel Path Reports": " Laporan Jalur Perjalanan ",
+	"Device": "Perangkat",
+	"ODO (K.M.)": "ODO (KM)",
+	"Distance (K.M.)": "Jarak (KM)",
+	"Cumulative Distance (K.M.)": "Jarak Kumulatif (KM) ",
+	"TRIP REPORT": "LAPORAN PERJALANAN",
+	"Trip Reports": " Laporan Perjalanan ",
+	"TRIP ID": "ID PERJALANAN",
+	"VEHICLE NAME": "NAMA KENDARAAN",
+	"SOURCE ADDRESS": "ALAMAT SUMBER",
+	"DESTINATION ADDRESS": "ALAMAT TUJUAN",
+	"DISTANCE": "JARAK",
+	"DURATION": "Durasi",
+	"TRIP STATUS": "STATUS PERJALANAN",
+	"MILEAGE": "JARAK TEMPUH",
+	"ADD EXPENSES": "TAMBAHKAN BEBAN",
+	"EXPENSES LIST": "DAFTAR BEBAN",
+	"Amount": "Jumlah",
+	"Currency": "Mata uang",
+	"Payment Mode": " Mode Pembayaran ",
+	"Expense type": " Jenis biaya",
+	"GEO FENCING": "PAGAR GEO",
+	"ADD DEVICE": "TAMBAHKAN PERANGKAT",
+	"GENERAL SETTING": "PENGATURAN UMUM",
+	"Device ID *": "ID Perangkat",
+	"Enter Device ID": "Masukkan ID Perangkat",
+	"Device Name * ": "Nama perangkat",
+	"Enter Device Name": "Masukkan Nama Perangkat",
+	"SIM Number": "Nomor SIM",
+	"SIM Number 2": "SIM Nomor 2",
+	"SIM Provider 2": "Penyedia SIM 2",
+	"Integration ID": "ID Integrasi",
+	"Select User": "Pilih Pengguna",
+	"Driver Contact Number": " Nomor Kontak Pengemudi",
+	"Select Vehicle type*": " Pilih jenis Kendaraan ",
+	"Type of Vehicle": "Tipe kendaraan",
+	"mm/dd/yyyy": "mm/hh/tttt",
+	"ICCICD Number": "Nomor ICCID",
+	"IMSI": "IMSI",
+	"Unique ID": "Identitas unik",
+	"CID number": "nomor ID",
+	"Chassis number": "Nomor sasis",
+	"Comapny Name": "Nama Perusahaan",
+	"Company Address": "Adresa e kompanis",
+	"Transport Office City": " Kantor Transportasi Kota ",
+	"Transport Office State": " Kantor Transportasi Negara",
+	"Invoice Number": " Nomor faktur ",
+	"Number of SOS": "Jumlah SOS ",
+	"Doc Type": "Jenis Dok",
+	"Enter SIM Provider": "Masukkan Penyedia SIM",
+	"Enter SIM Provider 2": "Masukkan Penyedia SIM 2",
+	"Driver's contact number": " Nomor kontak pengemudi ",
+	"Device model *": "model perangkat",
+	"Vehicle type * ": "Jenis kendaraan",
+	"Expiration date": " Tanggal habis tempo",
+	"Engine number": "Nomor mesin",
+	"Type of Vehicle ": "Tipe Kendaraan",
+	"Manufacturing company": "perusahaan manufaktur ",
+	"Registration date ": " Tanggal registrasi ",
+	"Date of Manufacturing Year ": " Tanggal Tahun Pembuatan ",
+	"Last fitness date ": " Tanggal kebugaran terakhir",
+	"ICCICD Number ": " Nomor ICCID ",
+	"Fitment Date ": " Tanggal Pemasangan",
+	"IMSI ": " IMSI ",
+	"Unique ID ": " Identitas unik",
+	"CID number ": "nomor ID",
+	"Chassis number ": "Nomor sasis",
+	"Comapny Name ": "Nama perusahaan",
+	"Comapny Address": "Alamat perusahaan",
+	"Invoice number": "Nomor faktur",
+	"Invoice Date": "Tanggal faktur",
+	"No. of SOS ": "Tidak. dari SOS ",
+	"Add Document field": " Tambahkan bidang Dokumen",
+	"Document issued date :": "Tanggal penerbitan dokumen",
+	"UPDATE AND SAVE": "PERBARUI DAN SIMPANj",
+	"Reason": "Alasan",
+	"Password": "Kata sandi",
+	"Driver Search": "Pencarian Pengemudi�",
+	"Enter User Id": "Masukkan ID Pengguna",
+	"Enter First name": "Masukkan Nama depan",
+	"Enter Last name": "Masukkan Nama belakang",
+	"Enter email": "Masukan email",
+	"Enter mobile number": "Masukkan nomor ponsel",
+	"Enter Address": "Masukkan alamat",
+	"EDIT CUSTOMER": "EDIT PELANGGAN ",
+	"Delete Dealer": "Hapus Dealer",
+	"Documents": " Dokumen",
+	"Document Name": " nama dokumen",
+	"Document number": " Nomor dokumen ",
+	"Action": "Tindakan ",
+	"Add": "Menambahkan",
+	"Upload Documents *": "Unggah Dokumen",
+	"Save": " Menyimpan",
+	"delete": " menghapus",
+	"Doc number": " nomor dok",
+	"Download": "Unduh",
+	"Yes, Delete it!": "Ya, Hapus itu",
+	"Cancel": "Membatalkan",
+	"EDIT DEALER": " EDIT DEALER ",
+	"Are you sure ?": "Apa kamu yakin?",
+	"you want to delete dealer": " Anda ingin menghapus dealer",
+	"Edit Model": "Edit Model",
+	"Enter device model": "Masukkan model perangkat",
+	"Configuration command": " Perintah konfigurasi",
+	"Location command": "Perintah lokasi",
+	"Imobilizer command": " Perintah imobilizer",
+	"Resume command": " Lanjutkan perintah ",
+	"Reset command": "Atur ulang perintah",
+	"Manufacturer": " Pabrikan ",
+	"Server Command": "Perintah Server",
+	"Mobile Command": " Komando Seluler ",
+	"Update": "Memperbarui",
+	"Edit trip details": " Edit detail perjalanan ",
+	"Route name": "Nama rute",
+	"Vehicles name": "Nama kendaraan ",
+	"Radius (in meter)": "Jari-jari (dalam meter)",
+	"Driver name": " Nama pengemudi ",
+	"Loading site": " Memuat situs ",
+	"Unloading site": " Bongkar situs ",
+	"LR Number": " Nomor LR ",
+	"Device Name: ": "Nama perangkat",
+	"Days: ": "hari ",
+	"M": "M ",
+	"T": " T",
+	"W": " W",
+	"Th": "NS",
+	"F": "F ",
+	"Sa": "sa",
+	"S": "s ",
+	"Edit Vehicle Type": "Sunting Jenis Kendaraan",
+	"Brand:": "Merek",
+	"Enter Brand Name": "Masukkan Nama Merek",
+	"Description:": "Keterangan",
+	"Enter Description": "Masukkan Deskripsi",
+	"Please Enter Description": "Silakan Masukkan Deskripsi",
+	"Select icon type": "Pilih jenis ikon",
+	"Voltage Value": " Nilai Tegangan ",
+	"Fuel value": " Nilai bahan bakar ",
+	"add": "Menambahkan ",
+	"Volatage Calibrator": " Kalibrator Tegangan ",
+	"Please Enter voltage": " Silakan Masukkan tegangan",
+	"Please fuel value": " Silakan nilai bahan bakar",
+	"Please Enter Tank Size": "Silakan Masukkan Ukuran Tangki ",
+	"FUEL EVENTS": " ACARA BAHAN BAKAR",
+	"Please Enter Mileage": " Silakan Masukkan Mileage ",
+	"Fuel Change (L)": " Ganti Bahan Bakar (L)",
+	"Search Device": " Cari Perangkat ",
+	"Generate Report": " Buat Laporan",
+	"Sleep Mode Temprature": "Suhu Mode Tidur ",
+	"Temprature": "suhu ",
+	"ON": "pada",
+	"OFF": "mati",
+	"list": " Daftar",
+	"Enter GEO FENCE NAME": "Masukkan NAMA PAGAR GEO",
+	"Get Alert on :": " Aktifkan Peringatan",
+	"Select Your Geo Fence Region": "Pilih Wilayah Pagar Geo Anda",
+	"Search Box": " Kotak pencarian ",
+	"--Select group--": "-Pilih grup--",
+	"--Geofence type--": "--Tipe geofence--",
+	"--GEO FENCE NAME--": "--NAMA PAGAR GEO--",
+	"close": "Menutup",
+	"DEVICES": "PERANGKAT",
+	"Matrix Input": "Masukan Matriks",
+	"Device Id-": "Id Perangkat-",
+	"Matrix Name": " Nama Matriks",
+	"Topic": "Tema",
+	"Ext. Volt.": "Eks. Volt.",
+	"Fuel Volt.": " volt Bahan Bakar ",
+	"Real Time GPS Based Vechicle Tracking": "Pelacakan Kendaraan Berbasis GPS Waktu Nyata",
+	"Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": " Pelacakan Kendaraan Langsung memberi Anda pembaruan waktu nyata, memungkinkan Anda mendapatkan informasi pelacakan terbaru di kendaraan Anda.",
+	"Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " Enterprise Maps oleh Google-API untuk penggunaan komersial yang memberikan detail lokasi kendaraan yang akurat ",
+	"User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Sistem pelacakan yang mudah digunakan yang membantu Anda melacak dan menemukan armada dengan mudah di Klik ",
+	"Software as a Service(Saas) with perpetual uptime.": " Perangkat Lunak sebagai Layanan (Saas) dengan waktu aktif terus-menerus ",
+	"Alerts and Event Notifications": " Peringatan dan Pemberitahuan Acara ",
+	"Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": "Dapatkan Pemberitahuan saat bergerak di SMS & email dan aplikasi Seluler, Anda akan terus diperbarui dengan peringatan waktu nyata",
+	"Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " Beberapa Penerima dapat menerima peringatan, Tidak hanya Anda, tetapi orang-orang terdekat Anda juga dapat dikenal karena peringatan yang dihasilkan untuk bantuan segera.",
+	"Schedule your alerts as per your convenience that suits your needs": " Jadwalkan peringatan Anda sesuai kenyamanan Anda yang sesuai dengan kebutuhan Anda",
+	"Detailed Reports for analysis is also available for making quik decisions": "Laporan terperinci untuk analisis juga tersedia untuk membuat keputusan cepat ",
+	"Geofences": "Geofences",
+	"Geofence": "Geofence",
+	"Upload all Geofence in your account and assign them to the vehicles.": "Unggah semua Geofence di akun Anda dan tetapkan ke kendaraan.",
+	"Find and mark geofences without knowing latitude and longitude values.": " Temukan dan tandai geofence tanpa mengetahui nilai garis lintang dan garis bujur ",
+	"Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "Geofence poligon tersedia untuk akses mudah. Semua geofences dapat ditandai sesuai kenyamanan pengguna dan dapat ditetapkan ke kendaraan sehingga setiap peringatan dikirimkan kepada Anda. Amankan orang yang Anda cintai dan pastikan pekerjaan dilakukan oleh Pasukan Anda.",
+	"Date and Time Based reports available for analyzing vehicle usage.": " Laporan Berbasis Tanggal dan Waktu tersedia untuk menganalisis penggunaan kendaraan.",
+	"Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " Lokasi kendaraan, Setiap log menunjukkan lokasi kendaraan tempat kendaraan Anda berada dan mudah untuk mengelola insiden di mana itu terjadi ",
+	"Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " Laporan konsildasi kendaraan bijaksana / Armada. Memberi Anda ringkasan hari untuk kendaraan..",
+	"Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " Laporan Peringatan, Laporan konsolidasi untuk semua peringatan yang dihasilkan oleh kendaraan. Overspeeding, tampering, Ignition dll ",
+	"Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " Laporan geofence, laporan terperinci kapan dan jam berapa kendaraan masuk di area geografis ",
+	"How it works": "Bagaimana itu bekerja",
+	"Real-time tracking": "Pelacakan waktu nyata",
+	"Advanced Reporting": "Pelaporan Lanjutan",
+	"Alerts & Warning": "Peringatan & Peringatan",
+	"2-Way messaging": "Pesan 2 arah",
+	"Engine immobilisation": " Imobilisasi mesin",
+	"Monitor gauges": " Alat pengukur monitor ",
+	"Access anytime, anywhere!": " Akses kapan saja, di mana saja ",
+	"Web browser based software": " Perangkat lunak berbasis browser web ",
+	"Android app": "Aplikasi Android ",
+	"iPhone app": "aplikasi iPhone",
+	"Request for Demo": "Permintaan Demo",
+	"Get Detail": "Dapatkan Detail",
+	"Export To Excel": "Ekspor Ke Excel",
+	"Loading Site": "Memuat Situs",
+	"Distance": "Jarak",
+	"ETA": "ETA",
+	"directions": "arah",
+	"Google Traffic": "Lalu Lintas Google",
+	"Google Hybrid": "Google Hibrida",
+	"Google Satellite": "Google Satellite",
+	"Google Physical": "Google Fisik",
+	"Google Street": "Jalan Google",
+	"map": "peta",
+	"Please Select Your Device, From/To Date & Time to view history from above options": " Silakan Pilih Perangkat Anda, Dari/Sampai Tanggal & Waktu untuk melihat riwayat dari opsi di atas ",
+	"Generate Map": "Hasilkan Peta",
+	"Trip Name": "Nama Perjalanan",
+	"Select destination": " Pilih tujuan",
+	"CREATE TRIP": "BUAT PERJALANAN",
+	"Total Distance: ": "Jarak Total",
+	"Idle Time (Min)": "Waktu Menganggur (Min)",
+	"Go to Site >": "Buka Situs >",
+	"Welcome To OneQlik": " Selamat datang di OneQlik",
+	"Login": " Gabung",
+	"Username / Phone Number": " Nama Pengguna / Nomor Telepon",
+	"Enter Mobile number*": " Masukkan nomor Ponsel ",
+	"Confirm New Password": "Konfirmasi password baru",
+	"Send OTP": " Kirim OTP",
+	"Back to Login": " kembali untuk masuk",
+	"Back to previous Form": " Kembali ke Formulir sebelumnya ",
+	"Forgot Username / Password?": " Lupa Nama Pengguna / Kata Sandi? ",
+	"First Name": " Nama depan ",
+	"Last Name": "Nama keluarga",
+	"Email Id": "ID Email",
+	"Organisation": "Organisasi",
+	"notifications": "pemberitahuan",
+	"Notification Sound": "Suara notifikasi",
+	"Notifications": "Pemberitahuan",
+	"Add Phone": "Tambahkan Telepon",
+	"Close": "Menutup",
+	"Add Email": "Tambahkan Email",
+	"POI details": "Detail POI",
+	"Add POI details": "Tambahkan detail POI ",
+	"Type POI name": " Ketik nama POI ",
+	"Previous point duration": " Durasi poin sebelumnya ",
+	"Days": " hari",
+	"Hours": " Jam ",
+	"Minutes": "Menit",
+	"Next point duration": "Durasi poin berikutnya",
+	"Min": " Min ",
+	"Halt": "Berhenti ",
+	"Mapped Vehicles": " Kendaraan yang Dipetakan",
+	"Radius": " Radius ",
+	"POI Name": " Nama POI ",
+	"Enter a location": "Masukkan lokasi",
+	"ADD": "MENAMBAHKAN",
+	"Routes Search": "Pencarian Rute ",
+	"Route Status": "Status Rute ",
+	"Source": "Sumber ",
+	"Destination": " Tujuan",
+	"Test name": "Nama tes",
+	"Test Source": "Sumber Tes",
+	"Test destination": "Tujuan tes",
+	"Routes": " Rute",
+	"Untracked vehicles": " Kendaraan yang tidak terlacak",
+	"Please Enter Email ID / Phone Number": " Silakan Masukkan ID Email / Nomor Telepon ",
+	"Please Re Enter Password": "Silakan Masukkan Ulang Kata Sandi ",
+	"Delete route": "Hapus rute",
+	"Are you sure to delete this route ??": " Apakah Anda yakin akan menghapus rute ini ?? ",
+	"DELETE": "MENGHAPUS",
+	"Create Trip": "Buat Perjalanan",
+	"One way trip": "Perjalanan satu arah",
+	"Two way trip": "Perjalanan dua arah",
+	"Round trip": "Perjalanan pulang pergi",
+	"Start Date/Time": " Tanggal/Waktu Mulai",
+	"End Date/Time": " Tanggal/Waktu Berakhir",
+	"Planned start time": "Waktu mulai yang direncanakan ",
+	"Planned end time": " Waktu berakhir yang direncanakan",
+	"Actual start time": "Waktu mulai sebenarnya ",
+	"Actual end time": " Waktu akhir yang sebenarnya ",
+	"Trip History": "Sejarah Perjalanan",
+	"Admin Account": " Akun Admin ",
+	"Trip type": " Jenis perjalanan",
+	"Routes name": " Nama rute",
+	"Total Distance": " Jarak Total ",
+	"Get route": " Dapatkan rute",
+	"Parameters": "Parameter",
+	"Enter First Name": "Masukkan Nama Depan",
+	"Enter Last Name": "Masukkan Nama Belakang",
+	"Invalid Password": "kata sandi salah",
+	"Confirm Password": "konfirmasi sandi",
+	"Please Enter Confirm Password": "Silakan Masukkan Konfirmasi Kata Sandi",
+	"Organisation Name": "nama organisasi",
+	"Type of user": "Jenis pengguna ",
+	"Mobile Verification": "Verifikasi Seluler",
+	"Mobile Number": "Nomor handphone",
+	"TRIP HISTORY": " SEJARAH PERJALANAN ",
+	"Event name": "Nama acara",
+	"Event time": "Waktu acara",
+	"Driver": " Pengemudi ",
+	"Token": " Token�",
+	"Restore": "Memulihkan",
+	"Delete Permanently": "Hapus Secara Permanen",
+	"Select no of Days to get reminder for your services": " Pilih jumlah Hari untuk mendapatkan pengingat untuk layanan Anda ",
+	"Prior Notification (Days)": " Pemberitahuan Sebelumnya (Hari)) ",
+	"Enter Additonal information here...": "Masukkan informasi tambahan di sini...",
+	"Calibration": " Kalibrasi"
+}
\ No newline at end of file
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 0000000..96578cb
--- /dev/null
+++ b/src/assets/i18n/en.json
@@ -0,0 +1,45 @@
+{
+   "ADMINISTRACIÓN" : "ADMIN",
+"Actualizar datos": "Refresh Data",
+"Anterior": "Previous",
+"Búsqueda de dispositivo": "Device Search",
+"C.A.": "AC",
+"CLIENTES": "CUSTOMERS",
+"COMBUSTIBLE (LITRO)": "FUEL (LITRE)",
+"CORRIENDO": "RUNNING",
+"Cerrar sesión": "Log Out",
+"DETENIDO": "STOPPED",
+"DISTRIBUIDORES": "DEALERS",
+"ENCENDIDO": "IGNITION",
+"Estado": "Status",
+"Estado del viaje": "Trip status",
+"FUERA DE ALCANCE": "OUT OF REACH",
+"GPS": "GPS",
+"GRUPOS": "GROUPS",
+"Grupo": "Group",
+"Informes": "REPORTS",
+"LISTA DE POI": "POI LIST",
+"Last updated on": "Last updated on",
+"MUERTO": "EXPIRED",
+"Mi cuenta": "My Account",
+"NO GPS": "NO GPS",
+"NOTIFICACIONES": "NOTIFICATIONS",
+"NOTIFICACIÓN": "NOTIFICATION",
+"Número de registro": "Registration number",
+"OCIOSO": "IDLE",
+"ODO de hoy": "Today's ODO",
+"ODO total": "Total ODO",
+"PODER": "POWER",
+"Próximo": "Next",
+"RASTREO": "TRACKING",
+"RUTAS": "ROUTES",
+"Satélites": "Satellites",
+"Señal GSM": "GSM Signal",
+"TABLERO": "DASHBOARD",
+"GEOFENCIN":"GEOFENCING",
+"VEHICULOS": "VEHICLES",
+"Ícono de dispositivo": "Device Icon",
+"Última ubicación": "Last location",
+"Última velocidad": "Last Speed"
+
+}
\ No newline at end of file
diff --git a/src/assets/i18n/fa.json b/src/assets/i18n/fa.json
new file mode 100644
index 0000000..35c2615
--- /dev/null
+++ b/src/assets/i18n/fa.json
@@ -0,0 +1,690 @@
+
+        {
+            "ADMIN": "مدیر",
+            "Dashboard": "داشبورد",
+            "GROUPS": "گروه ها",
+            "VEHICLES": "وسايل نقليه",
+            "Account Setting": "تنظیمات حساب",
+            "General Setting": "تنظیمات عمومی",
+            "Application language": "زبان برنامه",
+            "Language Setting": "تنظیم زبان",
+            "Notification Settings": "تنظیمات اعلان",
+            "Billing Details": "جزئیات صورتحساب",
+            "Sensor Details":"جزئیات سنسور",
+            "Message Utility":"پیام ابزار",
+            "System Logs":"سیاهههای مربوط به سیستم",
+            "TRACKING": "ردیابی",
+            "Reset Password": "باز گرداندن رمز عبور",
+            "Tracking": "ردیابی",
+            "GEO FENCING": "محدوده جغرافیایی",
+            "Reports": "گزارش ها",
+            "POI LIST": " لیست نقطه مورد علاقه",
+            "POI List": " لیست نقطه مورد علاقه",
+            "ROUTES": "مسیرها",
+            "NOTIFICATIONS": "اطلاعیه ها",
+            "DISTRIBUTERS": "توزیع کنندگان",
+            "DEALERS": "فروشندگان",
+            "Dealers": "فروشندگان",
+            "CUSTOMERS": "مشتریان",
+            "Customers": "مشتریان",
+            "RUNNING": "در حال حرکت",
+            "Running": "در حال حرکت",
+            "IDLE": "روشن بدون حرکت",
+            "Idle": "روشن بدون حرکت",
+            "STOPPED": "متوقف",
+            "Stopped": "متوقف",
+            "EXPIRED": "منقضی شده",
+            "OUT OF REACH": "خارج از دسترس",
+            "NO GPS": "بدون جی پی اس",
+            "Device Icon": "نماد دستگاه",
+            "Registration number": "شماره ثبت",
+            "Reg. number": "شماره ثبت",
+            "Group": "گروه",
+            "Today's ODO": "فاصله امروز",
+            "Total ODO": "مسافت کل",
+            "Last location": "آخرین محل",
+            "Last updated on": "آخرین به روز رسانی در",
+            "Trip status": "وضعیت سفر",
+            "Status": "وضعیت",
+            "Satellites": "ماهواره ها",
+            "Last Speed": "آخرین سرعت",
+            "FUEL (LITRE)": "سوخت در لیتر",
+            "Fuel Reports": "گزارشات سوخت",
+            "GPS": "جی پی اس",
+            "AC": "وضعیت هوا",
+            "POWER": "قدرت",
+            "GSM Signal": "سیگنال مخابراتی",
+            "IGNITION": "انجین",
+            "NOTIFICATION": "اطلاعیه",
+            "My Account": "حساب من",
+            "Log Out": "خروج",
+            "Refresh Data": "تازه کردن اطلاعات",
+            "Device Search": "جستجوی دستگاه",
+            "Previous": "قبلی",
+            "Next": "بعد",
+            "DRIVER MASTER": "مدیریت راننده",
+            "Driver Master": "مدیریت راننده",
+            "DEVICE MODEL": "مدل دستگاه",
+            "VEHILE TYPE": "نوع وسیله",
+            "USER MASTER": "مدیریت کاربر",
+            "User Master":"مدیریت کاربر",
+            "DEVICE MASTER": "مدیریت دستگاه",
+            "Device Master": "مدیریت دستگاه",
+            "Maintenance Reminder":"یادآوری تعمیر و نگهداری",
+            "Vehicle Expense":"هزینه خودرو",
+            "GPS TRACKER": "ردیاب جی پی اس",
+            "CMD PACKETS": "بسته های فرمان",
+            "INVENTORY LIST": "لیست موجودی",
+            "Inventory List":"لیست موجودی",
+            "CUSTOMER INQUIRY": "استعلام مشتری",
+            "Driver Name": "نام راننده",
+            "Driver Address": "آدرس راننده",
+            "Driver Status": "وضعیت راننده",
+            "License Number": "شماره لیسنس",
+            "Salary": "معاش",
+            "DOJ": "تاریخ پیوستن",
+            "Delete": "حذف",
+            "Device Type": "نوع وسیله",
+            "Configuration Command": "دستور تنظیمات",
+            "Location Command": "دستور مکان",
+            "Immobilzer Command": "دستور خاموش کردن انجین",
+            "Resume Command": "دستور روشن کردن انجین",
+            "Reset Command": "دستور بازگرداندن تنظیمات",
+            "Immoblizer Type": "نوع خاموش کننده انجین",
+            "Port": "پورت",
+            "Edit": "ویرایش کنید",
+            "Brand": "نام تجاری",
+            "Description": "شرح",
+            "Model": "مدل",
+            "Icon Type": "نوع آیکون",
+            "Icon": "آیکون",
+            "Voltage Calibration": "کالیبراسیون ولتاژ",
+            "Tank Size": "اندازه مخزن",
+            "Mileage": "مسافت پیموده شده",
+            "Last Modified": "آخرین اصلاح شده",
+            "Search by phone": "جستجو از طریق تلفن",
+            "Search by name": "جستجو براساس نام",
+            "From Date": "از تاریخ",
+            "To Date": "به روز",
+            "FIND": "پیدا کردن",
+            "Show": "نمایش",
+            "entries": "ورودی ها",
+            "Name": "نام",
+            "Dealer": "فروشنده",
+            "Is Dealer": "فروشنده است",
+            "Created on": "ایجاد شده است به",
+            "Email": "ایمیل",
+            "Phone": "تلفن",
+            "Device Name": "نام دستگاه",
+            "Device Id": "شناسه دستگاه",
+            "User": "کاربر",
+            "Expire On": "تاریخ انقضا",
+            "Fuel Voltage(mv)": "ولتاژ سوخت",
+            "Sim Number": "شماره سیم",
+            "Today ODO": "فاصله امروز",
+            "Search by Device ID": "جستجو بر اساس شناسه دستگاه",
+            "Certificates": "گواهینامه ها",
+            "Export Pdf": "صادرات پی دی اف",
+            "Search by Sim Number": "جستجو بر اساس شماره سیم کارت",
+            "Export EXCEL": "صادرات اکسل",
+            "Device IMEI": "سریال دستگاه",
+            "Lattitude": "عرض البلد",
+            "Longitude": "طول البلد",
+            "Speed": "سرعت",
+            "Device Time": "زمان دستگاه",
+            "Insertion Time": "زمان درج",
+            "Last Push": "فشار آخر",
+            "Integration Respnse": "پاسخ ادغام",
+            "Ignition": "روشن شدن",
+            "IGN": "روشن شدن",
+            "Power": "قدرت",
+            "PWR": "قدرت",
+            "Ext. Volt": "ولتاژ خارجی",
+            "Fuel Volt": "ولتاژ سوخت",
+            "Sattelite": "ماهواره",
+            "Powercut Alarm": "هشدار قطع برق",
+            "Inquiry Date": "تاریخ استعلام",
+            "Customer Name": "نام مشتری",
+            "Message": "پیام",
+            "Assigned To": "اختصاص یافته به",
+            "Role": "نقش",
+            "No data available in table": "اطلاعاتی در جدول وجود ندارد",
+            "No data": "اطلاعاتی وجود ندارد",
+            "Showing": "در حال نمایش",
+            "Costumer Inquiry": "استعلام مشتری",
+            "System Date": "تاریخ سیستم",
+            "Vehicle Number": "شماره وسیله نقلیه",
+            "Chassis Number": "شماره شاسی",
+            "Engine Number": "شماره انجین",
+            "Device Model": "مدل دستگاه",
+            "VLT No.(IMEI)": "سریال دستگاه",
+            "VLT SIM(IDEA)": "سیم کارت دستگاه",
+            "VLT SIM(BSNL)": "سیم کارت دستگاه",
+            "Approving RTO": "تصویب ",
+            "Owner Number": "شماره صاحب وسیله",
+            "Alternate Number": "شماره جایگزین",
+            "Dealer Name": "نام فروشنده",
+            "Tracking Software": "نرم افزار ردیابی",
+            "Costumer Name": "نام مشتری",
+            "Device ID": "سریال دستگاه",
+            "Operator Name": "نام شبکه",
+            "Protocol ID": "شناسه پروتکل",
+            "Command": "دستور",
+            "ACC": "سویچ",
+            "Battery Status": "وضعیت باطری",
+            "GPS DATA": "اطلاعات جی پی اس",
+            "DEVICES MASTER": "مدیریت دستگاه ها",
+            "Groups": "گروه ها",
+            "Add Group": "اضافه کردن گروه",
+            "Type group name": "نام گروه را تایپ کنید",
+            "CONFIRM": "تایید",
+            "CANCEL": "لغو",
+            "Active": "فعال",
+            "InActive": "غیر فعال",
+            "Inactive": "غیر فعال",
+            "Vehicles": "وسايل نقليه",
+            "Vehicle": "وسیله نقلیه",
+            "Reg. Number": "شماره ثبت",
+            "IMEI": "شماره سریال دستگاه",
+            "Int. ID": "شناسه ادغام",
+            "SIM 1": "سیم 1",
+            "SIM Provider": "ارائه دهنده سیم کارت",
+            "SIM2": "سیم 2",
+            "Vehicle Type": "نوع وسیله",
+            "Owner": "صاحب",
+            "IDLING Since": "روشن بدون حرکت از",
+            "STOPPED Since": "توقف از",
+            "RUNNING Since": "در حال حرکت از",
+            "Video Tutorial": "آموزش تصویری",
+            "VEHICLE LIST": "لیست وسایل نقلیه",
+            "Vehicle List": "لیست وسایل نقلیه",
+            "MAINTENANCE REMINDER": "یادآوری ترمیم",
+            "REMINDERS": "یادآور",
+            "Reminder Date": "تاریخ یادآوری",
+            "Notification Type": "نوع اعلان",
+            "Reminder Type": "نوع یادآوری",
+            "Prior Notification(Days)": "اطلاع قبلی",
+            "Additional notes": "یادداشت های اضافی",
+            "SEARCH": "جستجو کردن",
+            "Live Tracking": "ردیابی زنده",
+            "History Tracking": "تاریخچه ردیابی",
+            "Vehicle History": "تاریخچه وسیله نقلیه",
+            "Generate History": "تاریخچه را ایجاد کنید",
+            "Play History": "بازپخش تاریخچه",
+            "Select device": "انتخاب دستگاه",
+            "Please choose a device": "لطفاً دستگاهی را انتخاب کنید",
+            "OK": "خوب",
+            "GEOFENCE": "محدوده جغرافیایی",
+            "Grid view": "نمای شبکه",
+            "List view": "نمای لیست",
+            "Geo Fencing Name": "نام محدوده جغرافیایی",
+            "Geofence type": "نوع محدوده جغرافیایی",
+            "Enter Alert": "هشدار ورود",
+            "Exit Alert": "هشدار خروج",
+            "Geofence Search": "جستجوی محدوده جغرافیایی",
+            "Add Geofence": "محدوده جغرافیایی",
+            "Select group": "گروه را انتخاب کنید",
+            "GEO FENCE NAME": "نام محدوده جغرافیایی",
+            "Get Alert on": "دریافت هشدار برای",
+            "Entering": "ورود",
+            "Exiting": "خروج",
+            "Create": "ایجاد",
+            "Select Your Geo Fence Region": "ناحیه محدوده جغرافیایی خود را انتخاب کنید",
+            "Add Geo Fence": "محدوده جغرافیایی را اضافه کنید",
+            "Total Distance(Km)": "مسافت کل در کیلومتر",
+            "Fuel consumption(Litre)": "مصرف تیل در لیتر",
+            "Ignition ON Time(Hr:Min)": "زمان روشن بودن در ساعت دقیقه",
+            "Ignition OFF Time(Hr:Min)": "زمان خاموش بودن در ساعت دقیقه",
+            "Idle Time(Hr:Min)": "زمان روشن بودن بدون حرکت در ساعت دقیقه",
+            "Out of reach(Hr:Min)": "خارج از دسترس به ساعت : دقیقه",
+            "No GPS(Hr:Min:Sec)": "بدون جی پی اس در ساعت دقیقه",
+            "Daily Report": "گزارش روزانه",
+            "Daily Reports": "گزارش روزانه",
+            "Trips": "سفر",
+            "Max Speed(Km/hr)": "حداکثر سرعت به کیلومتر در ساعت",
+            "Max Speed": "حداکثر سرعت",
+            "My App": "برنامه من",
+            "AC Report": "گزارش ایرکندیشن",
+            "AC Reports": "گزارش ایرکندیشن",
+            "Loading": "بارگذاری",
+            "ON Time": "زمان روشن بودن",
+            "OFF Time": "زمان خاموش بودن",
+            "dashboard": "داشبورد",
+            "RULES": "قوانین",
+            "Alert Report": "گزارش هشدار",
+            "No": "نه",
+            "Date": "تاریخ",
+            "Power Cut": "قطع برق",
+            "Battery": "باطری",
+            "Geofencing": "محدودیت جغرافیایی",
+            "Overspeeding": "سرعت بیش از حد مجاز",
+            "Daywise Report": "گزارش روزانه",
+            "Daywise Reports": "گزارش روزانه",
+            "Filter Report": "فیلتر گزارش",
+            "Fuel Consumption Report": "گزارش مصرف تیل",
+            "Fuel Consumption Reports": "گزارش مصرف تیل",
+            "Vehicle name": "نام وسیله نقلیه",
+            "Start Time": "زمان شروع",
+            "End Time": "زمان پایان",
+            "Fuel Consumed (L)": "مصرف تیل در لیتر",
+            "Distance(Kms)": "مسافت در کیلومتر",
+            "Fuel Fill Count": "تعداد تیل انداختن",
+            "Fuel Theft Count": "تعداد سرقت تیل",
+            "Start Location": "مکان شروع",
+            "End Location": "مکان ختم",
+            "Click to get device's last location": "برای دریافت آخرین مکان دستگاه کلیک کنید",
+            "SOS Report": "گزارش درخواست کمک",
+            "SOS Reports": "گزارش درخواست کمک",
+            "Vehicle No.": "شماره وسیله نقلیه",
+            "Time": "زمان",
+            "Address": "آدرس",
+            "Speed variation": "تغییر سرعت",
+            "Route variations Reports": "گزارش تغییرات مسیر",
+            "Total K.M": "کل کیلومتر",
+            "Generate Graph": "ایجاد گراف",
+            "Driver's Performance Report": "گزارش عملکرد راننده",
+            "Total trip": "گزارش کل",
+            "Total Ontime trip": "مجموع سفر به موقع",
+            "Ontime vehicles": "وسایط به موقع",
+            "group": "گروه",
+            "TRACKER": "ردیاب",
+            "REPORTS": "گزارش ها",
+            "Speed Variation": "تغییر سرعت",
+            "Trip Report": "گزارش سفر",
+            "Trip Reports": "گزارش سفر",
+            "Summary Report": "گزارش خلاصه",
+            "Summary Reports": "گزارش خلاصه",
+            "Overspeeding Report": "گزارش بیش از سرعت مجاز",
+            "Overspeeding Reports": "گزارش بیش از سرعت مجاز",
+            "Route Violation Report": "گزارش تخلف مسیر",
+            "Route Violation Reports": "گزارش تخلف مسیر",
+            "Stoppage Report": "گزارش توقف",
+            "Stoppage Reports": "گزارش توقف",
+            "Ignition Report": "گزارش سویچ",
+            "Ignition Reports": "گزارش سویچ",
+            "Distance Report": "گزارش فاصله",
+            "Distance Reports": "گزارش فاصله",
+            "Driver's performance": "گزارش عملکرد راننده",
+            "VEHICLE TYPE": "نوع وسیله",
+            "ROUTE LIST": "لیست مسیر",
+            "ROUTE MAPPING": "نقشه برداری مسیر",
+            "Route list": "لیست مسیر",
+            "Route Mapping": "نقشه برداری مسیر",
+            "Dealer Account": "حساب فروشنده",
+            "Geofencing Report": "گزارش محدوده جغرافیایی",
+            "Geofencing Reports": "گزارش محدوده جغرافیایی",
+            "Select Geofencing": "انتخاب محدوده",
+            "Vehicle Name": "نام وسیله نقلیه",
+            "In/Out": "ورود / خروج",
+            "Datetime": "تاریخ ساعت",
+            "Location": "مکان",
+            "GeoFence Name": "نام محدوده",
+            "Click here to get address": "برای دریافت آدرس اینجا را کلیک کنید",
+            "Select Your Device": "دستگاه خود را انتخاب کنید",
+            "IDLE REPORT": "گزارش روشن بودن بدون حرکت",
+            "IDLE Reports": "گزارش روشن بودن بدون حرکت",
+            "Select Vehicle": "وسیله نقلیه را انتخاب کنید",
+            "Min Idle Time (Min)": "حداقل زمان روشن بدون حرکت در دقیقه",
+            "Duration (HH:MM:SS)": "مدت زمان در ساعت: دقیقه: ثانیه",
+            "AC Status": "وضعیت ایرکندیشن",
+            "TRACKERS": "ردیاب",
+            "Date Time": "تاریخ ساعت",
+            "On/Off": "روشن/خاموش",
+            "Overspeed": "بیش از سرعت مجاز",
+            "POI name": "نام نقطه مورد نظر",
+            "Arrival Time": "زمان رسیدن",
+            "Departure Time": "زمان خروج",
+            "Route": "مسیر",
+            "POI Report": "گزارش نقطه مورد نظر",
+            "POI Reports": "گزارش نقطه مورد نظر",
+            "From Time": "از زمان",
+            "To Time": "به زمان",
+            "Duration": "مدت زمان",
+            "Start Point": "نقطه شروع",
+            "End Point": "نقطه پایان",
+            "Total KM": "کیلومتر کل",
+            "Fuel Consumption (Litre)": "مصرف تیل در لیتر",
+            "Total Running Time (HH:MM)": "کل زمان حرکت در ساعت و دقیقه",
+            "Total Stop Time (HH:MM)": "کل زمان توقف در ساعت و دقیقه",
+            "Total Idle Time (HH:MM)": "کل زمان روشن بدون حرکت در ساعت و دقیقه",
+            "Total Out of reach Time (HH:MM)": "کل زمان خارج از دسترس به ساعت و دقیقه",
+            "Total No gps Time (HH:MM)": "تعداد کل زمان بدون جی پی اس در ساعت و دقیقه",
+            "Overspeeding (HH:MM)": "بیش از سرعت مجاز در ساعت و دقیقه",
+            "Route Violation": "تخلف مسیر",
+            "TRAVEL PATH REPORT": "گزارش مسیر سفر",
+            "Travel Path Reports": "گزارش مسیر سفر",
+            "Device": "دستگاه",
+            "ODO (K.M.)": "مسافت کل در کیلومتر",
+            "Distance (K.M.)": "مسافت در کیلومتر",
+            "Cumulative Distance (K.M.)": "فاصله محاسبه شده در کیلومتر",
+            "TRIP REPORT": "گزارش سفر",
+            "TRIP ID": "آی دی سفر",
+            "VEHICLE NAME": "نام وسیله نقلیه",
+            "SOURCE ADDRESS": "آدرس منبع",
+            "DESTINATION ADDRESS": "آدرس مقصد",
+            "DISTANCE": "مسافت",
+            "DURATION": "مدت زمان",
+            "TRIP STATUS": "وضعیت سفر",
+            "MILEAGE": "مسافت پیموده شده",
+            "ADD EXPENSES": "اضافه کردن هزینه",
+            "EXPENSES LIST": "لیست هزینه ها",
+            "Amount": "مبلغ",
+            "Currency": "واحد پول",
+            "Payment Mode": "حالت پرداخت",
+            "Expense type": "نوع هزینه",
+            "ADD DEVICE": "افزودن دستگاه",
+            "GENERAL SETTING": "تنظیمات عمومی",
+            "Device ID *": "شناسه دستگاه *",
+            "Enter Device ID": "شناسه دستگاه را وارد کنید",
+            "Device Name * ": "نام دستگاه *",
+            "Enter Device Name": "نام دستگاه را وارد کنید",
+            "SIM Number": "شماره سیم",
+            "SIM Number 2": "شماره سیم 2",
+            "SIM Provider 2": "ارائه دهنده سیم 2",
+            "Integration ID": "شناسه ادغام",
+            "Select User": "کاربر را انتخاب کنید",
+            "Driver Contact Number": "شماره تماس راننده",
+            "Select Vehicle type*": "نوع وسیله نقلیه را انتخاب کنید *",
+            "Type of Vehicle": "نوع دستگاه",
+            "Driver Performance Reports": "گزارش عملکرد راننده",
+            "mm/dd/yyyy": "ماه / روز / سال",
+            "ICCICD Number": "شماره iccicd",
+            "IMSI": "IMSI",
+            "Unique ID": "شناسه منحصر به فرد",
+            "CID number": "شماره کد",
+            "Chassis number": "شماره شاسی",
+            "Comapny Name": "نام شرکت",
+            "Company Address": "آدرس شرکت",
+            "Transport Office City": "دفتر اداری حمل و نقل",
+            "Transport Office State": "اداره امور حمل و نقل",
+            "Invoice Number": "شماره فاکتور",
+            "Number of SOS": "تعداد درخواست کمک",
+            "Doc Type": "نوع سند",
+            "Enter SIM Provider": "شبکه سیم را وارد کنید",
+            "Enter SIM Provider 2": "شبکه سیم 2 را وارد کنید",
+            "Driver's contact number": "شماره تماس راننده",
+            "Device model *": "مدل دستگاه *",
+            "Vehicle type * ": "نوع وسیله *",
+            "Expiration date": "تاریخ انقضا",
+            "Engine number": "شماره ماشین",
+            "Type of Vehicle ": "نوع وسیله نقلیه",
+            "Manufacturing company": "شرکت تولید کننده",
+            "Registration date ": "تاریخ ثبت ",
+            "Date of Manufacturing Year ": "سال تولید",
+            "Last fitness date ": "تاریخ آخرین تعمیر",
+            "ICCICD Number ": "شماره ICCICD",
+            "Fitment Date ": "تاریخ تعمیر",
+            "IMSI ": "IMSI",
+            "Unique ID ": "شناسه منحصر به فرد",
+            "CID number ": "شماره CID",
+            "Chassis number ": "شماره شاسی",
+            "Comapny Name ": "نام شرکت",
+            "Comapny Address": "آدرس شرکت",
+            "Invoice number": "شماره فاکتور",
+            "Invoice Date": "تاریخ فاکتور",
+            "No. of SOS ": "تعداد درخواست کمک",
+            "Add Document field": "فیلد سند را اضافه کنید",
+            "Document issued date :": "تاریخ صدور سند",
+            "UPDATE AND SAVE": "تجدید و ذخیره کنید",
+            "Reason": "دلیل",
+            "Password": "رمز عبور",
+            "Driver Search": "جستجوی راننده",
+            "Enter User Id": "آی دی کاربر را وارد کنید",
+            "Enter First name": "نام را وارد کنید",
+            "Enter Last name": "نام خانوادگی را وارد کنید",
+            "Enter email": "ایمیل را وارد کنید",
+            "Enter mobile number": "شماره موبایل را وارد کنید",
+            "Enter Address": "آدرس را وارد کنید",
+            "EDIT CUSTOMER": "ویرایش مشتری",
+            "Delete Dealer": "حذف فروشنده",
+            "Documents": "اسناد",
+            "Document Name": "نام سند",
+            "Document number": "شماره سند",
+            "Action": "عمل",
+            "Add": "اضافه کردن",
+            "Upload Documents *": "بارگذاری اسناد *",
+            "Load Management": "مدیریت بارگزاری",
+            "Save": "ذخیره",
+            "delete": "حذف",
+            "Doc number": "شماره سند",
+            "Download": "دانلود",
+            "Yes, Delete it!": "بله آن را حذف کنید",
+            "Cancel": "لغو",
+            "EDIT DEALER": "فروشنده را ویرایش کنید",
+            "Are you sure ?": "شما مطمئن هستید",
+            "you want to delete dealer": "شما می خواهید فروشنده را حذف کنید",
+            "Edit Model": "مدل را وارد کنید",
+            "Enter device model": "مدل دستگاه را وارد کنید",
+            "Configuration command": "دستور پیکربندی",
+            "Location command": "دستور مکان",
+            "Imobilizer command": "دستور خاموش کردن",
+            "Resume command": "دستور روشن کردن",
+            "Reset command": "دستور تنظیم مجدد",
+            "Manufacturer": "شرکت تولید کننده",
+            "Server Command": "دستور سرور",
+            "Mobile Command": "دستور مبایل",
+            "Update": "تجدید",
+            "Edit trip details": "جزئیات سفر را ویرایش کنید",
+            "Route name": "نام مسیر",
+            "Vehicles name": "نام وسیله نقلیه",
+            "Radius (in meter)": "شعاع در متر",
+            "Driver name": "نام راننده",
+            "Loading site": "سایت بارگیری",
+            "Unloading site": "سایت بارگیری",
+            "LR Number": "شماره LR",
+            "Device Name: ": "نام دستگاه",
+            "Days: ": "روزها",
+            "M": "دوشنبه",
+            "T": "سه شنبه",
+            "W": "چهار شنبه",
+            "Th": "پنجشنبه",
+            "F": "جمعه",
+            "Sa": "شنبه",
+            "S": "یکشنبه",
+            "Edit Vehicle Type": "نوع وسیله نقلیه را ویرایش کنید",
+            "Brand:": "نام تجاری",
+            "Enter Brand Name": "نام تجاری را وارد کنید",
+            "Description:": "شرح",
+            "Enter Description": "توضیحات را وارد کنید",
+            "Please Enter Description": "لطفا توضیحات را وارد کنید",
+            "Select icon type": "نوع آیکون را انتخاب کنید",
+            "Voltage Value": "مقدار ولتاژ",
+            "Fuel value": "مقدار تیل",
+            "add": "اضافه کردن",
+            "Volatage Calibrator": "کالیبراسیون ولتاژ",
+            "Please Enter voltage": "لطفاً ولتاژ را وارد کنید",
+            "Please fuel value": "لطفا مقدار تیل",
+            "Please Enter Tank Size": "لطفا اندازه تانکی را وارد کنید",
+            "FUEL EVENTS": "رویداد تیل",
+            "Please Enter Mileage": "لطفا مسافت پیموده شده را وارد کنید",
+            "Fuel Change (L)": "تغییر تیل در لیتر",
+            "Search Device": "جستجوی دستگاه",
+            "Generate Report": "گزارش تهیه کنید",
+            "Sleep Mode Temprature": "درجه حرارت حالت خواب",
+            "Temprature": "درجه حرارت",
+            "ON": "روشن",
+            "OFF": "خاموش",
+            "list": "لیست",
+            "Enter GEO FENCE NAME": "نام محدوده جغرافیایی را وارد کنید",
+            "Get Alert on :": "دریافت هشدار به",
+            "Select Your Geo Fence Region :": "منطقه محدوده جغرافیایی خود را انتخاب کنید",
+            "Search Box": "جعبه جستجو",
+            "--Select group--": "گروه را انتخاب کنید",
+            "--Geofence type--": "نوع محدوده جغرافیایی",
+            "--GEO FENCE NAME--": "نام محدوده جغرافیایی",
+            "Admin": "مدیر",
+            "close": "بستن",
+            "DEVICES": "دستگاهها",
+            "Matrix Input": "ورودی ماتریس",
+            "Device Id-": "شناسه دستگاه",
+            "Matrix Name": "نام ماتریس",
+            "Topic": "موضوع",
+            "Ext. Volt.": "ولتاژ خارجی",
+            "Fuel Volt.": "ولتاژ تیل",
+            "Real Time GPS Based Vechicle Tracking": "ردیابی زنده وسیله براساس جی پی اس",
+            "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": "ردیابی زنده وسیله به شما در زمان واقعی داده میشود، به شما اجازه دستری به آخرین اطلاعات ردیابی بر وسیله نقلیه شما را میدهد.",
+            "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": "نقشه های تجاری برای استفاده تجاری که توسط شرکت گوگل ارائه میشود به شما اطلاعات درست از موقعیت وسایط شما را میدهد.",
+            "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": "سیستم ردیابی وسایط نقلیه با محیط دوستانه که به شما کمک میکند تا ردیابی و مدیریت وسایط شما خویش را با یک کلیک انجام دهید ",
+            "Software as a Service(Saas) with perpetual uptime.": "نرم افزار به عنوان یک سرویس (Saas) با بروزرسانی مداوم",
+            "Alerts and Event Notifications": "هشدارها و اطلاعیه های رویداد",
+            "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": "اطلاعیه های از طریق پیام کتبی، ایمیل و برنامه مبایل در زمان حرکت وسیله نقلیه خویش دریافت کنید، شما توسط دریافت هشدارها در زمان واقعی همیشه و همه جاه از وسیله خویش با خبر میشوید.",
+            "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": "نه تنها شما، بلکه چندین فرد میتوانند هشدارها را دریافت کنند، اما نزدیک ترین به شما میتوانید به عنوان دریافت کننده هشدار های درخواست کمک شناخته شوند.",
+            "Schedule your alerts as per your convenience that suits your needs": "با توجه به راحتی شما متناسب با نیازهای خود ، هشدارهای خود را برنامه ریزی کنید",
+            "Detailed Reports for analysis is also available for making quik decisions": "گزارش های تفصیلی برای تجزیه و تحلیل نیز برای تصمیم گیری های جالب وجود دارد",
+            "Geofences": "محدوده جغرافیایی",
+            "Upload all Geofence in your account and assign them to the vehicles.": "تمام محدودیت های جغرافیایی را در حساب خود بارگذاری کرده و آنها را به وسایل نقلیه اختصاص دهید.",
+            "Find and mark geofences without knowing latitude and longitude values.": "محدوده های جغرافیایی را بدون دانستن طول البلد و عرض البلد پیدا و مشخص نمایید.",
+            "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "محدوده جغرافیایی چندضلعی برای دسترسی آسان موجود هست. تمام محدوده ها میتوانند براساس راحتی و خواست کاربر مشخص شوند و به وسایط نقلیه اعمال شوند تا هر هشداری برای شما ارسال شود. افراد مورد علاقه خویش را ایمن نگهدارید و مطمئن شوید که کارتوسط نیری کاری شما اجرا میشود.",
+            "Date and Time Based reports available for analyzing vehicle usage.": "گزارش های مبتنی بر تاریخ و ساعت برای تجزیه و تحلیل استفاده از وسیله نقلیه موجود است.",
+            "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": "موقعیت وسایط، هر لحظه موقعیت وسیله نقلیه شما را نشان میدهد جاییکه وسیله نقلیه شما بوده و اتفاقات را هر زمانی که اتفاق افتد میتوانید به راحتی مدیریت نمایید.",
+            "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": "گزارش تلفیقی براساس هر وسیله نقلیه / گروه از وسایط، به شما خلاصه ای از عملکرد وسیله (ها) میدهد.",
+            "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": "گزارش هشدار، گزارش تلفیقی از تمام هشدار های ارسال شده توسط وسیله نقلیه از جمله سرعت بیش از حد مجاز، ضربه، روشن شدن انجین وغیره را میدهد.",
+            "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.": "گزارش محدوده جغرافیایی، گزارش با جزئیات اینکه چی وقت و زمان وسیله نقلیه وارد ناحیه محدوده گردیده هست را میدهد.",
+            "How it works": "چگونه کار می کند",
+            "Real-time tracking": "ردیابی زمان واقعی",
+            "Advanced Reporting": "گزارش پیشرفته",
+            "Alerts & Warning": "هشدارها و اخطارها",
+            "2-Way messaging": "پیام رسانی دو طرفه",
+            "Engine immobilisation": "خاموش کردن انجین",
+            "Monitor gauges": "نظارت سنج",
+            "Access anytime, anywhere!": "در هر زمان و هر مکان دسترسی داشته باشید",
+            "Web browser based software": "نرم افزار مبتنی بر مرورگر وب",
+            "Android app": "برنامه اندروید",
+            "iPhone app": "برنامه آیفون",
+            "Request for Demo": "درخواست نسخه ی نمایشی",
+            "Get Detail": "جزئیات را دریافت کنید",
+            "Export To Excel": "صادر به اکسل",
+            "Loading Site": "بارگیری سایت",
+            "Distance": "فاصله",
+            "ETA": "ETA",
+            "directions": "جهت ها",
+            "Google Traffic": "ترافیک گوگل",
+            "Google Hybrid": "ترکیبی گوگل",
+            "Google Satellite": "ماهواره گوگل",
+            "Google Physical": "فیزیکی گوگل",
+            "Google Street": "نمای سرک گوگل",
+            "map": "نقشه",
+            "Please Select Your Device, From/To Date & Time to view history from above options": "لطفاً دستگاه خویش، از/به تاریخ و ساعت را برای نمایش تاریخچه از گزینه های بالا انتخاب نمایید.",
+            "Generate Map": "نقشه ایجاد کنید",
+            "Trip Name": "نام سفر",
+            "Select destination": "مقصد را انتخاب کنید",
+            "CREATE TRIP": "ایجاد سفر",
+            "Total Distance: ": "مجموع فاصله",
+            "TOTAL VEHICLES": "محموع وسایط نقلیه",
+            "Idle Time (Min)": "زمان روشن بدون حرکت (حداقل)",
+            "Go to Site >": "به سایت بروید",
+            "Welcome To OneQlik": "به ردیاب هوشمند خوش آمدید",
+            "Login": "ورود",
+            "Username / Phone Number": "نام کاربری / شماره تلفن",
+            "Enter Mobile number*": "شماره موبایل را وارد کنید *",
+            "Confirm New Password": "رمز عبور جدید را تأیید کنید",
+            "Send OTP": "کد یک بار ارسال کنید",
+            "Back to Login": "بازگشت به صفحه ورود",
+            "Back to previous Form": "بازگشت به فرم قبلی",
+            "Forgot Username / Password?": "نام کاربری یا رمزعبور را فراموش کرده اید؟",
+            "First Name": "نام",
+            "Last Name": "تخلص",
+            "Email Id": "ایمیل",
+            "Organisation": "دفتر",
+            "notifications": "اطلاعیه ها",
+            "Notification Sound": "اطلاعیه صوتی",
+            "Notifications": "اطلاعیه ها",
+            "Add Phone": "تلفن را اضافه کنید",
+            "Close": "بستن",
+            "Add Email": "ایمیل اضافه کنید",
+            "POI details": "جزئیات نقطه مورد نظر",
+            "Add POI details": "جزئیات نقطه مورد نظر را اضافه کنید",
+            "Type POI name": "نام نقطه مورد نظر را وارد کنید",
+            "Previous point duration": "مدت زمان قبلی",
+            "Days": "روزها",
+            "Hours": "ساعت ها",
+            "Minutes": "دقایق",
+            "Next point duration": "مدت زمان بعدی",
+            "Min": "حداقل",
+            "Halt": "مکث",
+            "Mapped Vehicles": "وسایط نقلیه اضافه شده",
+            "Radius": "شعاع",
+            "POI Name": "نام نقطه مورد نظر",
+            "Enter a location": "مکانی را وارد کنید",
+            "ADD": "اضافه کردن",
+            "Routes Search": "جستجوی مسیرها",
+            "Route Status": "وضعیت مسیر",
+            "Source": "منبع",
+            "Destination": "مقصد",
+            "Test name": "نام امتحان",
+            "Test Source": "منبع امتحان",
+            "Test destination": "مقصد امتحان",
+            "Routes": "مسیرها",
+            "Untracked vehicles": "وسایل نقلیه بدون استفاده",
+            "Please Enter Email ID / Phone Number": "لطفا ایمیل / شماره تلفن را وارد کنید",
+            "Please Enter Password": "لطفا رمز عبور را وارد کنید",
+            "Please Re Enter Password": "لطفا رمز ورود را دوباره وارد کنید",
+            "Delete route": "مسیر را حذف کنید",
+            "Are you sure to delete this route ??": "مطمئناً این مسیر را حذف می کنید ؟؟",
+            "DELETE": "حذف",
+            "Create Trip": "سفر ایجاد کنید",
+            "One way trip": "سفر یک طرفه",
+            "Two way trip": "سفر دو طرفه",
+            "Round trip": "رفت و برگشت",
+            "Start Date/Time": "تاریخ / زمان شروع",
+            "End Date/Time": "تاریخ / زمان پایان",
+            "Planned start time": "زمان شروع برنامه ریزی شده",
+            "Planned end time": "زمان پایان برنامه ریزی شده",
+            "Actual start time": "زمان شروع واقعی",
+            "Actual end time": "زمان پایان واقعی",
+            "Trip History": "تاریخچه سفر",
+            "Trip type": "نوع سفر",
+            "Routes name": "نام مسیرها",
+            "Total Distance": "مجموع فاصله",
+            "Get route": "مسیر را طی کنید",
+            "Parameters": "مولفه ها",
+            "Enter First Name": "نام را وارد کنید",
+            "Enter Last Name": "نام خانوادگی را وارد کنید",
+            "Invalid Password": "رمز عبور نامعتبر",
+            "Confirm Password": "رمز عبور را تأیید کنید",
+            "Please Enter Confirm Password": "لطفا رمز عبور را تأیید کنید",
+            "Organisation Name": "دفتر",
+            "Type of user": "نوع کاربر",
+            "Mobile Verification": "تائید مبایل",
+            "Mobile Number": "شماره موبایل",
+            "TRIP HISTORY": "تاریخچه سفر",
+            "Event name": "نام رویداد",
+            "Event time": "زمان رویداد",
+            "Driver": "راننده",
+            "Token": "گفتن",
+            "Restore": "بازگرداندن",
+            "Delete Permanently": "دائمی حذف کنید",
+            "Select no of Days to get reminder for your services": "برای یادآوری خدمات خود تعداد روزها را انتخاب کنید",
+            "Prior Notification (Days)": "اطلاع رسانی قبلی (روزها)",
+            "Enter Additonal information here...": "اطلاعات اضافی را اینجا وارد کنید ...",
+            "Calibration": "کالیبراسیون",
+            "Refresh": "تازه کردن",
+            "Additional Menu": "منوی اضافی",
+            "Open Additional Menu": "منوی اضافی را باز کنید",
+            "End Trip": "ختم سفر",
+            "Arm Vehicle": "وسیله نقلیه را ایمن کنید",
+            "Disarm Vehicle": "وسیله نقلیه را غیر ایمن کنید",
+            "Idling": "روشن بدون حرکت",
+            "parking": "در حالت توقف",
+            "Data Points": "نقاط داده",
+            "Remove all track": "حذف همه ردیابی ها",
+            "Remove track": "حذف ردیابی ",
+            "Line Thickness": "ضخامت خط",
+            "Today": "امروز",
+            "Yesterday": "دیروز",
+            "Week": "هفته",
+            "Month": "ماه",
+            "Idle Time": "مدت زمان روشن بدون حرکت",
+            "From": "از",
+            "To": "به",
+            "Show Track": "نمایش ردیابی",
+            "Fuel Voltage": "ولتاژ تیل",
+            "Heading": "سرفصل",
+            "GPS Positioned": "سیگنال جی پی اس دریافت شد",
+            "Stoppage Time": "مدت زمان توقف",
+            "Average Speed": "سرعت متوسط",
+            "No. of Parkings": "تعداد پارکینگ ها",
+            "Sudden Acceleration": "شتاب ناگهانی",
+            "Fuel Consumption": "مصرف تیل",
+            "Geofence": "محدوده جغرافیایی"
+        }
diff --git a/src/assets/i18n/fa_old.json b/src/assets/i18n/fa_old.json
new file mode 100644
index 0000000..d9096eb
--- /dev/null
+++ b/src/assets/i18n/fa_old.json
@@ -0,0 +1,696 @@
+{
+    "ADMIN": "مدیر",
+    "Dashboard": "داشبورد",
+    "GROUPS": "گروه ها",
+    "VEHICLES": "وسايل نقليه",
+    "Account Setting": "تنظیمات حساب", 
+    "General Setting": "تنظیمات عمومی",
+    "Application language":"زبان برنامه",
+    "Language Setting" : "تنظیم زبان",
+    "Notification Settings":"تنظیمات اعلان",
+    "TRACKING": "پیگیری",
+    "Reset Password" : "بازنشانی گذرواژه",
+    "Tracking": "پیگیری",
+    "GEO FENCING":"جغرافیایی فنس",
+    "Reports": "گزارش ها",
+    "POI LIST": " لیست نقطه مورد علاقه",
+    "POI List": " لیست نقطه مورد علاقه",
+    "ROUTES": "مسیرها",
+    "NOTIFICATIONS": "اطلاعیه",
+    "DISTRIBUTERS": "توزیع کنندگان",
+    "DEALERS": "فروشندگان",
+    "Dealers": "فروشندگان",
+    "CUSTOMERS": "مشتریان",
+	"Customers"  : "مشتریان",
+    "RUNNING": "در حال دویدن",
+    "Running": "در حال دویدن",
+    "IDLE": "بیکار",
+    "Idle": "بیکار",
+    "STOPPED": "متوقف شد",
+    "Stopped": "متوقف شد",
+    "EXPIRED": "منقضی شده",
+    "OUT OF REACH": "خارج از دسترس",
+    "NO GPS": "بدون جی پی اس",
+    "Device Icon": "نماد دستگاه",
+    "Registration number":"شماره ثبت",
+    "Reg. number":"شماره ثبت",
+    "Group":"گروه",
+    "Today's ODO":"فاصله امروز",
+    "Total ODO":"مسافت کل",
+    "Last location":"آخرین محل",
+    "Last updated on":"آخرین به روز رسانی در",
+    "Trip status":"وضعیت سفر",
+    "Status":"وضعیت",
+    "Satellites":"ماهواره ها",
+    "Last Speed":"آخرین سرعت",
+    "FUEL (LITRE)":"سوخت در لیتر",
+    "Fuel Reports" : "گزارشات سوخت" ,
+    "GPS":"جی پی اس",
+    "AC":"وضعیت هوا",
+    "POWER":"قدرت",
+    "GSM Signal":"کلوب جی اس ام سیگنال",
+    "IGNITION":"آتش گرفتن",
+    "NOTIFICATION":"اطلاع",
+    "My Account":"حساب من",
+    "Log Out":"خروج",
+    "Refresh Data":"تازه کردن داده ها",
+    "Device Search":"جستجوی دستگاه",
+    "Previous":"قبلی",
+    "Next":"بعد",
+    "DRIVER MASTER":"استاد راننده",
+    "Driver Master" : "استاد راننده",
+    "DEVICE MODEL":"مدل دستگاه",
+    "VEHILE TYPE":"نوع خودرو",
+    "USER MASTER":"استاد کاربر",
+    "DEVICE MASTER":"استاد دستگاه",
+    "GPS TRACKER":"جی پی اس استاد",
+    "CMD PACKETS":"بسته های فرمان",
+    "INVENTORY LIST":"لیست موجودی",
+    "CUSTOMER INQUIRY":"استعلام مشتری",
+    "Driver Name":"استاد راننده",
+    "Driver Address":"آدرس راننده",
+    "Driver Status":"وضعیت راننده",
+    "License Number":"شماره پروانه",
+    "Salary":"حقوق",
+    "DOJ":"تاریخ پیوستن",
+    "Delete":"حذف",
+    "Device Type":"نوع وسیله",
+    "Configuration Command":"دستور پیکربندی",
+    "Location Command":"فرمان مکان",
+    "Immobilzer Command":"فرمان بی حرکت کننده",
+    "Resume Command":"از سرگیری فرمان",
+    "Reset Command":"بازنشانی فرمان",
+    "Immoblizer Type":"نوع بی حرکت کننده",
+    "Port":"بندر",
+    "Edit":"ویرایش کنید",
+    "Brand":"نام تجاری",
+    "Description":"شرح",
+    "Model":"مدل",
+    "Icon Type":"نوع آیکون",
+    "Icon" : "آیکون",
+    "Voltage Calibration":"کالیبراسیون ولتاژ",
+    "Tank Size":"اندازه مخزن",
+    "Mileage":"مسافت پیموده شده",
+    "Last Modified":"آخرین اصلاح شده",
+    "Search by phone":"جستجو از طریق تلفن",
+    "Search by name":"جستجو براساس نام",
+    "From Date":"از تاریخ",
+    "To Date":"به روز",
+    "FIND":"پیدا کردن",
+    "Show":"نشان دادن",
+    "entries":"ورودی های",
+    "Name":"نام",
+    "Dealer":"فروشنده",
+    "Is Dealer":"فروشنده است",
+    "Created on":"ایجاد شده است",
+    "Email":"پست الکترونیک",
+    "Phone":"تلفن",
+    "Device Name":"نام دستگاه",
+    "Device Id":"شناسه دستگاه",
+    "User":"کاربر",
+    "Expire On":"منقضی شدن",
+    "Fuel Voltage(mv)":"ولتاژ سوخت",
+    "Sim Number":"شماره سیم",
+    "Today ODO":"فاصله امروز",
+    "Search by Device ID":"جستجو بر اساس شناسه دستگاه",
+    "Certificates":"گواهینامه ها",
+    "Export Pdf":"صادرات پی دی اف",
+    "Search by Sim Number":"جستجو بر اساس شماره سیم کارت",
+    "Export EXCEL":"صادرات اکسل",
+    "Device IMEI":"سریال دستگاه",
+    "Lattitude":"عرض جغرافیایی",
+    "Longitude":"عرض جغرافیایی",
+    "Speed":"سرعت",
+    "Device Time":"زمان دستگاه",
+    "Insertion Time":"زمان درج",
+    "Last Push":"فشار آخر",
+    "Integration Respnse":"پاسخ ادغام",
+    "Ignition":"آتش گرفتن",
+    "IGN":"آتش گرفتن",
+    "Power":"قدرت",
+    "PWR":"قدرت",
+
+    "Ext. Volt":"ولتاژ خارجی",
+    "Fuel Volt":"ولتاژ سوخت",
+    "Sattelite":"ماهواره",
+    "Powercut Alarm":"زنگ قدرت",
+    "Inquiry Date":"زنگ استعلام",
+    "Customer Name":"نام مشتری",
+    "Message":"پیام",
+    "Assigned To":"اختصاص یافته به",
+    "Role":"نقش",
+    "No data available in table":"داده ای در جدول وجود ندارد",
+    "No data" : "اطلاعاتی وجود ندارد",
+    "Showing":"نشان دادن",
+    "Costumer Inquiry":"استعلام مشتری",
+    "FUEL (LITRE)" :"سوخت در لیتر",
+    "System Date":"تاریخ سیستم",
+    "Vehicle Number":"شماره وسیله نقلیه",
+    "Chassis Number":"شماره شاسی",
+    "Engine Number":"شماره موتور",
+    "Device Model":"مدل دستگاه",
+    "VLT No.(IMEI)":"شماره VLT",
+    "VLT SIM(IDEA)":"",
+    "VLT SIM(BSNL)":"",
+    "Approving RTO":"تصویب rto",
+    "Owner Number":"شماره مالک",
+    "Alternate Number":"شماره متناوب",
+    "Dealer Name":"نام فروشنده",
+    "Tracking Software":"نرم افزار ردیابی",
+    "Costumer Name":"نام مشتری",
+    "Device ID":"سریال دستگاه",
+    "Operator Name":"نام اپراتور",
+    "Protocol ID":"شناسه پروتکل",
+    "Command":"فرمان",
+    "ACC":"اعتبار",
+    "Battery Status":"وضعیت باتری",
+    "GPS DATA":"داده های GPS",
+    "DEVICES MASTER":"استاد دستگاه",
+    "Groups":"گروه ها",
+    "Add Group":"اضافه کردن گروه",
+    "Type group name":"نام گروه را تایپ کنید",
+    "CONFIRM":"تایید",
+    "CANCEL":"لغو",
+    "Active":"فعال",
+    "InActive":"غیر فعال",
+    "Inactive":"غیر فعال",
+    "Vehicles":"وسايل نقليه",
+    "Vehicle":"وسايل نقليه",
+    "Reg. Number":"شماره ثبت",
+    "IMEI":"شماره imei",
+    "Int. ID":"شناسه ادغام",
+    "SIM 1":"سیم 1",
+    "SIM Provider":"ارائه دهنده سیم کارت",
+    "SIM2":"سیم 2",
+    "Vehicle Type":"نوع خودرو",
+    "Owner":"صاحب",
+    "IDLING Since":"از کار بیکار",
+    "STOPPED Since":"توقف از زمان",
+    "RUNNING Since":"در حال اجرا از آنجا",
+    "Video Tutorial":"آموزش تصویری",
+    "VEHICLE LIST":"لیست وسایل نقلیه",
+    "Vehicle List":"لیست وسایل نقلیه",
+    "MAINTENANCE REMINDER":"یادآوری نگهداری",
+    "REMINDERS":"یادآور",
+    "Reminder Date":"تاریخ یادآوری",
+    "Notification Type":"نوع اعلان",
+    "Reminder Type":"نوع یادآوری",
+    "Prior Notification(Days)":"اطلاع قبلی",
+    "Additional notes":"یادداشت های اضافی",
+    "SEARCH":"جستجو کردن",
+    "Live Tracking":"ردیابی زنده",
+    "History Tracking":"ردیابی تاریخ",
+    "Vehicle History":"تاریخچه وسیله نقلیه",
+    "Generate History":"تاریخ تولید کنید",
+    "Play History":"تاریخ بازی",
+    "Select device":"وسیله را انتخاب کن",
+    "Please choose a device":"لطفاً دستگاهی را انتخاب کنید",
+    "OK":"باشه",
+    "GEOFENCE":"زمین شناسی",
+    "Grid view":"نمای شبکه",
+    "List view":"نمای لیست",
+    "Geo Fencing Name":"نام ژئوفنس",
+    "Geofence type":"نوع ژئوفنس",
+    "Enter Alert":"هشدار را وارد کنید",
+    "Exit Alert":"هشدار خروج",
+    "Geofence Search":"جستجوی زمین",
+    "Add Geofence":"geofence را اضافه کنید",
+    "Select group":"گروه را انتخاب کنید",
+    "GEO FENCE NAME":"نام جغرافیایی حصار",
+    "Get Alert on":"هشیار شوید",
+    "Entering":"ورود",
+    "Exiting":"خارج شدن",
+    "Create":"ایجاد کردن",
+    "Select Your Geo Fence Region":"منطقه جغرافیایی نرده خود را انتخاب کنید",
+    "Add Geo Fence":"اضافه کردن منطقه جغرافیایی نرده",
+    "Total Distance(Km)":"مسافت کل در کیلومتر",
+    "Fuel consumption(Litre)":"مصرف سوخت در لیتر",
+    "Ignition ON Time(Hr:Min)":"احتراق به موقع در ساعت دقیقه",
+    "Ignition OFF Time(Hr:Min)":"زمان احتراق در ساعت دقیقه",
+    "Idle Time(Hr:Min)":"زمان بیکار در ساعت دقیقه",
+    "Out of reach(Hr:Min)":"در ساعت دقیقه از دسترس خارج می شود",
+    "No GPS(Hr:Min:Sec)":"بدون GPS در ساعت دقیقه",
+    "Daily Report":"گزارش روزانه",
+    "Daily Reports":"گزارش روزانه",
+    "Trips":"سفر",
+    "Max Speed(Km/hr)":"حداکثر سرعت در کیلومتر در ساعت",
+    "Max Speed":"حداکثر سرعت در کیلومتر در ساعت",
+    "My App":"درخواست من",
+    "AC Report":"گزارش Ac",
+    "AC Reports":"گزارش Ac",
+    "Loading":"بارگذاری",
+    "Vehicle":"وسیله نقلیه",
+    "ON Time":"به موقع",
+    "OFF Time":"وقت ازاد",
+    "dashboard":"داشبورد",
+    "RULES":"قوانین",
+    "Alert Report":"گزارش های هشدار",
+    "No":"نه",
+    "Date":"تاریخ",
+    "Power Cut":"قطع برق",
+    "Battery":"باتری",
+    "Geofencing":"جغرافیایی",
+    "Overspeeding":"غلبه کرد",
+    "Daywise Report":"گزارش روزانه",
+    "Daywise Reports":"گزارش روزانه",
+    "Filter Report":"گزارش فیلتر",
+    "Fuel Consumption Report":"گزارش مصرف سوخت",
+    "Fuel Consumption Reports":"گزارش مصرف سوخت",
+    "Vehicle name":"نام وسیله نقلیه",
+    "Start Time":"زمان شروع",
+    "End Time":"زمان پایان",
+    "Fuel Consumed (L)":"مصرف سوخت در لیتر",
+    "Distance(Kms)":"مسافت در کیلومتر",
+    "Fuel Fill Count":"در تعداد رویدادها",
+    "Fuel Theft Count":"تعداد رویدادها",
+    "Start Location":"شروع مکان",
+    "End Location":"محل پایان",
+    "Click to get device's last location":"برای دریافت آخرین مکان دستگاه کلیک کنید",
+    "SOS Report":"گزارش SOS",
+    "SOS Reports":"گزارش SOS",
+    
+    "Vehicle No.":"شماره وسیله نقلیه",
+    "Time":"زمان",
+    "Address":"نشانی",
+    "Speed variation":"تغییر سرعت",
+    "Route variations Reports" :"گزارش تغییرات متن",
+    "Total K.M":"کل کیلومتر",
+    "Generate Graph":"ایجاد نمودار",
+    "Driver's Performance Report":"گزارش عملکرد راننده",
+    "Total trip":"گزارش کل",
+    "Total Ontime trip":"سفر به موقع کل",
+    "Ontime vehicles":"وسیله نقلیه به موقع",
+    "group":"گروه",
+    "TRACKER":"ردیاب",
+    "REPORTS":"گزارش ها",
+    "Speed Variation":"تغییر سرعت",
+    "Trip Report":"گزارش سفر",
+    "Trip Reports":"گزارش سفر",
+    "Summary Report":"گزارش خلاصه",
+    "Summary Reports":"گزارش خلاصه",
+    "Overspeeding Report":"گزارش بیش از سرعت",
+    "Overspeeding Reports":"گزارش بیش از سرعت",
+    "Route Violation Report":"گزارش تخلف مسیر",
+    "Route Violation Reports":"گزارش تخلف مسیر",
+    "Stoppage Report":"گزارش توقف",
+    "Stoppage Reports":"گزارش توقف",
+    "Ignition Report":"گزارش احتراق",
+    "Ignition Reports":"گزارش احتراق",
+    "Distance Report":"گزارش فاصله",
+    "Distance Reports":"گزارش فاصله",
+    "Driver's performance":"گزارش عملکرد راننده",
+    "VEHICLE TYPE":"نوع خودرو",
+    "ROUTE LIST":"لیست مسیر",
+    "ROUTE MAPPING":"نقشه برداری مسیر",
+    "Route list":"لیست مسیر",
+    "Route Mapping":"نقشه برداری مسیر",
+    "Dealer Account":"حساب فروشنده",
+    "Geofencing Report":"گزارش شمشیربازی جغرافیایی",
+    "Geofencing Reports":"گزارش شمشیربازی جغرافیایی",
+    "Select Geofencing":"انتخاب زمین",
+    "Vehicle Name":"نام وسیله نقلیه",
+    "In/Out":"داخل / خارج",
+    "Datetime":"زمان قرار",
+    "Location":"محل",
+    "GeoFence Name":"نام ژئوفنس",
+    "Click here to get address":"برای دریافت آدرس اینجا را کلیک کنید",
+    "Select Your Device":"دستگاه خود را انتخاب کنید",
+    "IDLE REPORT":"گزارش بیکار",
+
+    "IDLE Reports":"گزارش بیکار",
+    "Select Vehicle":"وسیله نقلیه را انتخاب کنید",
+    "Min Idle Time (Min)":"حداقل زمان بیکار در دقیقه",
+    "Duration (HH:MM:SS)":"مدت زمان در ساعت دقیقه دقیقه دوم",
+    "AC Status":"وضعیت ac",
+    "TRACKERS":"ردیاب",
+    "Date Time":"زمان قرار",
+    "On/Off":"روشن خاموش",
+    "Overspeed":"زیاده روی کرد",
+    "POI name":"نام پو",
+    "Arrival Time":"زمان رسیدن",
+    "Departure Time":"زمان خروج",
+    "Route":"مسیر",
+    "POI Report":"گزارش پو",
+    "POI Reports":"گزارش پو",
+    "From Time":"از زمان",
+    "To Time":"به زمان",
+    "Duration":"مدت زمان",
+    "Start Point":"زمان شروع",
+    "End Point":"نقطه پایان",
+    "Total KM":"کیلومتر کل",
+    "Fuel Consumption (Litre)":"مصرف سوخت در لیتر",
+    "Total Running Time (HH:MM)":"کل زمان اجرا در ساعت و دقیقه",
+    "Total Stop Time (HH:MM)":"زمان توقف کل در ساعت و دقیقه",
+    "Total Idle Time (HH:MM)":"مدت زمان بیکار در ساعت و دقیقه",
+    "Total Out of reach Time (HH:MM)":"در کل از ساعت رسیدن به ساعت و دقیقه",
+    "Total No gps Time (HH:MM)":"تعداد کل زمان GPS در ساعت و دقیقه",
+    "Overspeeding (HH:MM)":"بیش از سرعت در ساعت و دقیقه",
+    "Route Violation":"نقض مسیر",
+   
+    "TRAVEL PATH REPORT":"گزارش مسیر سفر",
+    "Travel Path Reports":"گزارش مسیر سفر",
+    "Device":"دستگاه",
+    "ODO (K.M.)":"مسافت کل در کیلومتر",
+    "Distance (K.M.)":"مسافت در کیلومتر",
+    "Cumulative Distance (K.M.)":"فاصله انباشته در کیلومتر",
+    "TRIP REPORT":"گزارش سفر",
+    "TRIP ID":"شناسه سفر",
+    "VEHICLE NAME":"نام وسیله نقلیه",
+    "SOURCE ADDRESS":"آدرس منبع",
+    "DESTINATION ADDRESS":"آدرس مقصد",
+    "DISTANCE":"مسافت",
+    "DURATION":"مدت زمان",
+    "TRIP STATUS":"وضعیت سفر",
+    "MILEAGE":"مسافت پیموده شده",
+    "Mileage":"مسافت پیموده شده",
+    "ADD EXPENSES":"اضافه کردن هزینه",
+    "EXPENSES LIST":"لیست هزینه ها",
+    "Amount":"میزان",
+    "Currency":"واحد پول",
+    "Payment Mode":"حالت پرداخت",
+    "Expense type":"نوع هزینه",
+    "GEO FENCING":"جغرافیایی",
+    "ADD DEVICE":"افزودن دستگاه",
+    "GENERAL SETTING":"تنظیمات عمومی",
+    "Device ID *":"شناسه دستگاه *",
+    "Enter Device ID":"شناسه دستگاه را وارد کنید",
+    "Device Name * ":"نام دستگاه *",
+    "Enter Device Name":"نام دستگاه را وارد کنید",
+    "SIM Number":"شماره سیم",
+    "SIM Number 2":"سیم شماره 2",
+    "SIM Provider 2":"ارائه دهنده سیم 2",
+    "Integration ID":"شناسه ادغام",
+    "Select User":"کاربر را انتخاب کنید",
+    "Driver Contact Number":"شماره تماس راننده",
+    "Select Vehicle type*":"نوع وسیله نقلیه را انتخاب کنید *",
+    "Type of Vehicle":"نوع دستگاه",
+    "Driver Performance Reports" : "گزارش عملکرد راننده",
+    "mm/dd/yyyy":"mm / dd / aaaa",
+    "ICCICD Number":"شماره iccicd",
+    "IMSI":"ایمیسی",
+    "Unique ID":"شناسه منحصر به فرد",
+    "CID number":"شماره کد",
+    "Chassis number":"شماره شاسی",
+    "Comapny Name":"نام شرکت",
+    "Company Address":"آدرس شرکت",
+    "Transport Office City":"دفتر اداری حمل و نقل",
+    "Transport Office State":"اداره امور حمل و نقل",
+    "Invoice Number":"شماره فاکتور",
+    "Number of SOS":"تعداد sos",
+    "Doc Type":"نوع سند",
+    "Enter SIM Provider":"ارائه دهنده سیم را وارد کنید",
+    "Enter SIM Provider 2":"سیم ارائه دهنده 2 را وارد کنید",
+    "Driver's contact number":"شماره تماس راننده",
+    "Device model *":"مدل دستگاه *",
+    "Vehicle type * ":"نوع خودرو *",
+    "Expiration date":"تاریخ انقضا",
+    "ADD DEVICE":"افزودن دستگاه",
+    "Engine number":"شماره موتور",
+    "Type of Vehicle ":"نوع دستگاه ",
+    "Manufacturing company":"نوع تولید",
+    "Registration date ":"تاریخ ثبت نام",
+    "Date of Manufacturing Year ":"تاریخ سال تولید",
+    "Last fitness date ":"تاریخ آخرین تناسب اندام",
+    "ICCICD Number ":"شماره ICCICD",
+    "Fitment Date ":"تاریخ تناسب اندام",
+    "IMSI ":"IMSI",
+    "Unique ID ":"شناسه منحصر به فرد",
+    "CID number ":"شماره CID",
+    "Chassis number ":"شماره شاسی",
+    "Comapny Name ":"شماره شرکت",
+    "Comapny Address":"آدرس شرکت",
+    "Invoice number":"شماره فاکتور",
+    "Invoice Date":"تاریخ فاکتور",
+    "No. of SOS ":"تعداد SOS",
+    "Add Document field":"فیلد سند را اضافه کنید",
+    "Document issued date :":"تاریخ صدور سند",
+    "UPDATE AND SAVE":"بروزرسانی و ذخیره کنید",
+    "Reason":"دلیل",
+    "Password":"کلمه عبور",
+    "Driver Search":"جستجوی راننده",
+    "Enter User Id":"شناسه کاربر را وارد کنید",
+    "Enter First name":"نام را وارد کنید",
+    "Enter Last name":"نام خانوادگی را وارد کنید",
+    "Enter email":"ایمیل را وارد کنید",
+    "Enter mobile number":"شماره موبایل را وارد کنید",
+    "Enter Address":"آدرس را وارد کنید",
+    "EDIT CUSTOMER":"ویرایش مشتری",
+    "Delete Dealer":"فروشنده را حذف کنید",
+    "Documents":"اسناد",
+    "Document Name":"نام سند",
+    "Document number":"شماره سند",
+    "Action":"عمل",
+    "Add":"اضافه کردن",
+    "Upload Documents *":"سند بارگذاری *",
+    "Load Management" : "مدیریت بار",
+    "Save":"صرفه جویی",
+    "delete":"حذف",
+    "Doc number":"شماره سند",
+    "Download":"دانلود",
+    "Yes, Delete it!":"بله آن را حذف کنید",
+    "Cancel":"لغو",
+    "EDIT DEALER":"فروشنده را ویرایش کنید",
+    "Are you sure ?":"شما مطمئن هستید",
+    "you want to delete dealer":"شما می خواهید فروشنده را حذف کنید",
+    "Edit Model":"مدل را وارد کنید",
+    "Enter device model":"مدل دستگاه را وارد کنید",
+    "Configuration command":"دستور پیکربندی",
+    "Location command":"فرمان مکان",
+    "Imobilizer command":"فرمان immobilizer",
+    "Resume command":"از سرگیری فرمان",
+    "Reset command":"تنظیم مجدد",
+    "Manufacturer":"شرکت تولید کننده",
+    "Server Command":"دستور سرور",
+    "Mobile Command":"فرمان تلفن همراه",
+    "Update":"به روز رسانی",
+    "Edit trip details":"جزئیات سفر را ویرایش کنید",
+    "Route name":"نام مسیر",
+    "Vehicles name":"نام وسیله نقلیه",
+    "Radius (in meter)":"شعاع در متر",
+    "Driver name":"نام راننده",
+    "Loading site":"سایت بارگیری",
+    "Unloading site":"سایت بارگیری",
+    "LR Number":"شماره LR",
+    "Device Name: ":"نام دستگاه",
+    "Days: ":"روزها",
+    "M":"م",
+    "T":"",
+    "W":"",
+    "Th":"",
+    "F":"",
+    "Sa":"",
+    "S":"",
+    "Edit Vehicle Type":"نوع وسیله نقلیه را ویرایش کنید",
+    "Brand:":"نام تجاری",
+    "Enter Brand Name":"نام تجاری را وارد کنید",
+    "Description:":"شرح",
+    "Enter Description":"توضیحات را وارد کنید",
+    "Please Enter Description":"لطفا توضیحات را وارد کنید",
+    "Select icon type":"نوع آیکون را انتخاب کنید",
+    "Voltage Value":"مقدار ولتاژ",
+    "Fuel value":"مقدار سوخت",
+    "add":"اضافه کردن",
+    "Volatage Calibrator":"کالیبراسیون ولتاژ",
+    "Please Enter voltage":"لطفاً ولتاژ را وارد کنید",
+    "Please fuel value":"لطفا مقدار سوخت",
+    "Please Enter Tank Size":"لطفا اندازه مخزن را وارد کنید",
+    "FUEL EVENTS":"رویداد سوخت",
+    "Please Enter Mileage":"لطفا مسافت پیموده شده را وارد کنید",
+    "Fuel Change (L)":"تغییر سوخت در لیتر",
+    "Search Device":"دستگاه جستجو",
+    "Generate Report":"گزارش تهیه کنید",
+    "Sleep Mode Temprature":"دمای حالت خواب",
+    "Temprature":"درجه حرارت",
+    "ON":"بر",
+    "OFF":"خاموش",
+    "list":"لیست",
+    "Enter GEO FENCE NAME":"نام نرده جغرافیایی را وارد کنید",
+    "Get Alert on :":"هشیار شوید",
+    "Select Your Geo Fence Region :":"منطقه جغرافیایی نرده خود را انتخاب کنید",
+    "Search Box":"جعبه جستجو",
+    "--Select group--":"گروه را انتخاب کنید",
+    "--Geofence type--":"نوع ژئوفنس",
+    "--GEO FENCE NAME--":"--نام ژئوفنس--",
+    "Admin":"مدیر",
+    "close":"بستن",
+    "DEVICES":"دستگاهها",
+    "Matrix Input":"ورودی ماتریس",
+    "Device Id-":"شناسه دستگاه",
+    "Matrix Name":"نام ماتریس",
+    "Topic":"موضوع",
+    "Ext. Volt.":"ولتاژ خارجی",
+    "Fuel Volt.":"ولتاژ سوخت",
+    "Real Time GPS Based Vechicle Tracking":"ردیابی خودرو مبتنی بر GPS واقعی",
+    "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.":"ردیابی وسایل نقلیه زنده به روزرسانی های زمان واقعی را به شما می دهد ، به شما این امکان را می دهد تا آخرین اطلاعات ردیابی راجع به خود را بدست آورید.",
+    "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.":"نقشه های Enterprise توسط Google-API برای استفاده تجاری که جزئیات دقیق مکان وسایل نقلیه را نشان می دهد.",
+    "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.":"سیستم ردیابی کاربر پسند که به شما کمک می کند ناوگان ناوگان را بر روی کلیک ردیابی و مکان یابی کنید",
+    "Software as a Service(Saas) with perpetual uptime.":"نرم افزار به عنوان یک سرویس (Saas) با بروزرسانی مداوم",
+    "Alerts and Event Notifications":"هشدارها و اطلاعیه های رویداد",
+    "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.":"اعلان ها را هنگام حرکت بر روی پیام کوتاه و ایمیل و برنامه تلفن همراه دریافت کنید ، با هشدارهای زمان واقعی به روز می شوید",
+    "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.":"چندین گیرنده می توانند هشدارهایی دریافت کنند ، نه تنها شما ، بلکه افراد نزدیک شما همچنین می توانند برای هشدارهای ایجاد شده برای کمک فوری شناخته شوند.",
+    "Schedule your alerts as per your convenience that suits your needs":"با توجه به راحتی شما متناسب با نیازهای خود ، هشدارهای خود را برنامه ریزی کنید",
+    "Detailed Reports for analysis is also available for making quik decisions":"گزارش های تفصیلی برای تجزیه و تحلیل نیز برای تصمیم گیری های جالب وجود دارد",
+    "Geofences":"وسایل نقلیه",
+    "Upload all Geofence in your account and assign them to the vehicles.":"تمام Geofence را در حساب خود بارگذاری کرده و آنها را به وسایل نقلیه اختصاص دهید.",
+    "Find and mark geofences without knowing latitude and longitude values.":"geofences بدون دانستن مقادیر عرض جغرافیایی و طول جغرافیایی را پیدا کنید و علامت گذاری کنید.",
+    "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.":"Geofence چند ضلعی برای دسترسی آسان در دسترس است. کلیه وسایل نقلیه را می توان مطابق با اطمینان کاربر مشخص کرد و می توان آن را به وسایل نقلیه اختصاص داد به گونه ای که هشدارها برای شما حساس شده است. عزیزان خود را ایمن کرده و از کارهای انجام شده توسط نیروهای خود اطمینان حاصل کنید.",
+    "Date and Time Based reports available for analyzing vehicle usage.":"گزارش و تاریخ مبتنی بر زمان برای تجزیه و تحلیل استفاده از وسیله نقلیه موجود است.",
+    "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.":"موقعیت مکانی وسایل نقلیه ، هر سیاهههای مربوط به شما مکان وسیله نقلیه را نشان می دهد که وسیله نقلیه شما چه آسان و آسان برای مدیریت حادثه که در آن خوشحال است.",
+    "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).":"گزارش تلفیق خرد / ناوگان خودرو. خلاصه روز وسایل نقلیه (بازدید کنندگان) را به شما می دهد.",
+    "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..":"هشدار گزارش ، گزارش تلفیقی برای کلیه هشدارهای تولید شده توسط وسیله نقلیه. غلبه بر ، دستکاری ، احتراق و غیره",
+    "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.":"گزارش ژئوفنس ، گزارش مفصل چه موقع و در چه زمانی خودرو وارد مناطق جغرافیایی شد.",
+    "How it works":"چگونه کار می کند",
+    "Real-time tracking":"ردیابی زمان واقعی",
+    "Advanced Reporting":"گزارش پیشرفته",
+    "Alerts & Warning":"هشدارها و اخطارها",
+    "2-Way messaging":"2-پیام رسانی",
+    "Engine immobilisation":"بی حرکت موتور",
+    "Monitor gauges":"بی موتور",
+    "Access anytime, anywhere!":"در هر زمان و هر مکان دسترسی داشته باشید",
+    "Web browser based software":"نرم افزار مبتنی بر مرورگر وب",
+    "Android app":"برنامه Android",
+    "iPhone app":"برنامه آیفون",
+    "Request for Demo":"درخواست نسخه ی نمایشی",
+    "Get Detail":"جزئیات را دریافت کنید",
+    "Export To Excel":"صادرات به اکسل",
+    "Loading Site":"بارگیری سایت",
+    "Distance":"فاصله",
+    "ETA":"ETA",
+    "directions":"جهت ها",
+    "Google Traffic":"Google Traffic",
+    "Google Hybrid":"گوگل ترکیبی",
+    "Google Satellite":"گوگل ماهواره ای",
+    "Google Physical":"گوگل فیزیکی",
+    "Google Street":"سرویس تماشای خیابان گوگل",
+    "map":"نقشه",
+    "Please Select Your Device, From/To Date & Time to view history from above options":"لطفاً دستگاه خود ، از / به روز و ساعت را انتخاب کنید تا تاریخچه را از گزینه های فوق مشاهده کنید",
+    "Generate Map":"نقشه ایجاد کنید",
+    "Trip Name":"نام سفر",
+    "Select destination":"مقصد را انتخاب کنید",
+    "CREATE TRIP":"ایجاد سفر",
+    "Total Distance: ":"فاصله کل",
+    "TOTAL VEHICLES" : "کل وسیله نقلیه",
+    "Idle Time (Min)":"زمان بیکار (حداقل)",
+    "Go to Site >":"به سایت بروید",
+    "Welcome To OneQlik":"به OneQlik خوش آمدید",
+    "Login":"ورود",
+    "Username / Phone Number":"نام کاربری / شماره تلفن",
+    "Enter Mobile number*":"شماره موبایل را وارد کنید *",
+    "Confirm New Password":"گذرواژه جدید را تأیید کنید",
+    "Send OTP":"OTP ارسال کنید",
+    "Back to Login":"بازگشت به صفحه ورود",
+    "Reset Password":"بازنشانی گذرواژه",
+    "Back to previous Form":"بازگشت به فرم قبلی",
+    "Forgot Username / Password?":"نام کاربری یا رمزعبور را فراموش کرده اید؟",
+    "First Name":"نام کوچک",
+    "Last Name":"آپلیدو",
+    "Email Id":"شناسه ایمیل",
+    "Organisation":"سازمان",
+    "notifications":"اطلاعیه",
+    "Notification Sound":"صدا اعلان",
+    "Notifications":"اطلاعیه",
+    "Add Phone":"تلفن را اضافه کنید",
+    "Close":"نزدیک",
+    "Add Email":"ارسال ایمیل",
+    "POI details":"جزئیات POI",
+    "Add POI details":"جزئیات POI را اضافه کنید",
+    "Type POI name":"نام POI را تایپ کنید",
+    "Previous point duration":"مدت زمان قبلی",
+    "Days":"روزها",
+    "Hours":"ساعت ها",
+    "Minutes":"دقایق",
+    "Next point duration":"مدت زمان بعدی",
+    "Min":"حداقل",
+    "Halt":"مکث",
+    "Mapped Vehicles":"وسایل نقلیه نقشه برداری",
+    "Radius":"شعاع",
+    "POI Name":"نام POI",
+    "Enter a location":"مکانی را وارد کنید",
+    "ADD":"اضافه کردن",
+    "Routes Search":"جستجو در مسیرها",
+    "Route Status":"وضعیت مسیر",
+    "Source":"منبع",
+    "Destination":"مقصد",
+    "Test name":"نام آزمون",
+    "Test Source":"منبع آزمون",
+    "Test destination":"مقصد مقصد",
+    "Routes":"مسیرها",
+    "Untracked vehicles":"وسایل نقلیه بدون استفاده",
+    "Please Enter Email ID / Phone Number":"لطفا شناسه ایمیل / شماره تلفن را وارد کنید",
+    "Please Enter Password":"لطفا رمز عبور را وارد کنید",
+    "Please Re Enter Password":"لطفا رمز ورود را دوباره وارد کنید",
+    "Delete route":"مسیر را حذف کنید",
+    "Are you sure to delete this route ??":"مطمئناً این مسیر را حذف می کنید ؟؟",
+    "DELETE":"حذف",
+    "Create Trip":"سفر ایجاد کنید",
+    "One way trip":"سفر یک طرفه",
+    "Two way trip":"سفر دو طرفه",
+    "Round trip":"رفت و برگشت",
+    "Start Date/Time":"تاریخ / زمان شروع",
+    "End Date/Time":"تاریخ / زمان پایان",
+    "Planned start time":"زمان شروع برنامه ریزی شده",
+    "Planned end time":"زمان پایان برنامه ریزی شده",
+    "Actual start time":"زمان شروع واقعی",
+    "Actual end time":"زمان پایان واقعی",
+    "Trip History":"تاریخچه سفر",
+    "Trip type":"نوع سفر",
+    "Routes name":"نام مسیرها",
+    "Total Distance":"فاصله کل",
+    "Get route":"مسیر را طی کنید",
+    "Parameters":"مولفه های",
+    "Enter First Name":"نام را وارد کنید",
+    "Enter Last Name":"نام خانوادگی را وارد کنید",
+    "Invalid Password":"رمز عبور نامعتبر",
+    "Confirm Password":"رمز عبور را تأیید کنید",
+    "Please Enter Confirm Password":"لطفا رمز عبور را تأیید کنید",
+    "Organisation Name":"نام سازمان",
+    "Type of user":"نوع کاربر",
+    "Mobile Verification":"تأیید تلفن همراه",
+    "Mobile Number":"شماره موبایل",
+    "TRIP HISTORY":"تاریخ سفر",
+    "Event name":"نام رویداد",
+    "Event time":"زمان رویداد",
+    "Driver":"راننده",
+    "Token":"گفتن",
+    "Restore":"بازگرداندن",
+    "Delete Permanently":"دائمی حذف کنید",
+    "Select no of Days to get reminder for your services":"برای یادآوری خدمات خود هیچ یک از روزها را انتخاب نکنید",
+    "Prior Notification (Days)":"اطلاع رسانی قبلی (روزها)",
+    "Enter Additonal information here...":"اطلاعات اضافی را اینجا وارد کنید ...",
+    "Calibration":"کالیبراسیون",
+    "Refresh" : "تازه کردن",
+    "Additional Menu": "منوی اضافی",
+    "Open Additional Menu" : "منوی اضافی را باز کنید",
+    "Create Trip" : "سفر ایجاد کنید",
+    "End Trip" : "سفر آخر",
+    "Arm Vehicle":"وسیله نقلیه بازو" ,
+    "Disarm Vehicle" : "خلع سلاح وسیله نقلیه",
+    "Idling" : "بیکار",
+    "parking" :"پارکینگ",
+    "Data Points": "نقاط داده",
+    "Remove all track" : "همه آهنگ ها را حذف کنید",
+    "Remove track" : "پیگیری را حذف کنید",
+    "Vehicle History" : "تاریخچه خودرو",
+    "Vehicle" : "وسیله نقلیه",
+    "Line Thickness" : "ضخامت خط",
+    "Today" : "امروز",
+    "Yesterday" : "دیروز",
+    "Week" : "هفته",
+    "Month" : "ماه",
+    "Idle Time" : "زمان بیکار",
+    "From" : "از جانب",
+    "To" : "به",
+    "Show Track"  :"نمایش آهنگ",
+    "Fuel Voltage" : "ولتاژ سوخت",
+    "Heading" : "سرفصل",
+    "GPS Positioned" : "GPS در موقعیت یابی قرار گرفت",
+    "Port" : "بندر",
+    "Stoppage Time" : "زمان توقف",
+    "Average Speed" : "سرعت متوسط",
+    "No. of Parkings" : "شماره پارکینگ",
+    "Sudden Acceleration" : "شتاب ناگهانی",
+    "Fuel Consumption" :"مصرف سوخت",
+    "Geofence"  :"زمین شناسی"
+ 
+ 
+}
\ No newline at end of file
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
new file mode 100644
index 0000000..ebc74db
--- /dev/null
+++ b/src/assets/i18n/fr.json
@@ -0,0 +1,648 @@
+{
+    "ADMIN": "ADMINISTRATION",
+    "DASHBOARD": "TABLEAU DE BORD",
+    "GROUPS": "GROUPES",
+    "VEHICLES": "VEHICULES",
+    "Account Setting": "Configuration de Compte", 
+    "General Setting": "Configuration Generale",
+    "Application language":"Langue de l'Application",
+    "Language Setting" : "Paramètres de langue",
+    "Notification Settings":"Paramètres de notification",
+    "TRACKING": "SUVI",
+    "GEO FENCING":"GEO CLÔTURE",
+    "Reset Password":"Réinitialiser le Mot de Passe",
+    "Reports": "Rapports",
+    "IDLE Reports": "Rapports de Ralenti",
+    "Fuel Reports": "Rapports de Carburant",
+    "Daily Reports": "Rapports Journalier",
+    "AC Reports": "Rapports AC",
+    "Daywise Reports": "Rapports précédant",
+    "Fuel Consumption Reports": "Rapport de Consommation Carburant",
+    "Summary Reports":" Rapports Sommaire",
+    "Overspeeding Reports": "Rapport d'Excès de Vitesse",
+    "Route Violation Reports": "Rapports de Violation Trajet",
+    "POI List" : " Liste de POI",
+    "Stoppage Reports": "Rapports d'Arrêt",
+    "Route list" : " Liste de Trajet",
+    "Route Mapping" : "Cartographie de trajet",
+    "Ignition Reports": "Rapports d'Allumage",
+    "Edit Account" : "Modifier le compte",
+    "Notif" : "Notification",
+    "Driver Master"  :"Gestionnaire de Conducteur",
+    "Device Master" : "Gestionnaire de Balise ",
+    "Priority" : "Priorité",
+    "Distance Reports": "Rapports de Distance",
+    "Device Model" : "Modèle de Balise",
+    "User Master" : "Gestionnaire d'Utilisateur",
+    "GPS Master" : "Gestionnaire de GPS",
+    "Inventory List" :"Liste d'Inventaire",
+    "Geofencing Reports": "Rapports de Geoclôture",
+    "Travel Path Reports": "Rapports de Trajet de voyage",
+    "POI Reports" : "Rapports de POI",
+    "SOS Reports" :"Rapports de SOS",
+    "Driver Performance Reports" : "Rapport de Performance Conducteur",
+    "Trip Reports": "Rapports de voyage",  
+    "POI LIST": "LISTE DE POI",
+    "ROUTES": "ITINERAIRES",
+    "NOTIFICATIONS": "NOTIFICATIONS",
+    "DISTRIBUTERS": "DISTRIBUTEURS",
+    "DEALERS": "REVENDEURS",
+    "Dealers": "Revendeurs",
+    "CUSTOMERS": "CLIENTS",
+	"Customers"  : "Clients",
+    "RUNNING": "EN MARCHE",
+    "IDLE": "RALENTI",
+    "STOPPED": "ARRÊTÉ",
+    "EXPIRED": "EXPIRÉ",
+    "OUT OF REACH": "HORS DE PORTÉ",
+    "NO GPS": "PAS DE GPS",
+    "Device Icon": "Icone de Balise",
+    "Registration number":"Numero de registre",
+    "Group":"Groupe",
+    "Today's ODO":"KM d'Aujourd'hui",
+    "Total ODO":"KM Total",
+    "Last location":"Dernière Localisation",
+    "Last updated on":"Dernière mise à jour le",
+    "Trip status":"Statut Trajet ",
+    "Status":"Statut",
+    "Satellites":"Satellites",
+    "Last Speed":"Dernière Vitesse",
+    "FUEL (LITRE)":"CARBURANT (LITRE)",
+    "GPS":"GPS",
+    "AC":"AC.",
+    "POWER":"ALIMENTATION",
+    "GSM Signal":"Signal GSM",
+    "IGNITION":"ALLUMAGE",
+    "NOTIFICATION":"NOTIFICATION",
+    "My Account":"Mon Compte",
+    "Log Out":"Se Déconnecter",
+    "Refresh Data":"Actualiser les données",
+    "Device Search":"Recherche de Balise",
+    "Previous":"Précédent",
+    "Next":"Prochain",
+    "DRIVER MASTER":"GESTIONNAIRE DE CONDUCTEUR",
+    "DEVICE MODEL":"MODELE DE BALISE",
+    "VEHILE TYPE":"TYPE DE VEHICULE",
+    "USER MASTER":"GESTIONNAIRE D'UTILISATEUR",
+    "DEVICE MASTER":"GESTIONNAIRE DE BALISE",
+    "GPS TRACKER":"TRACEUR GPS",
+    "CMD PACKETS":"PAQUETS CMD",
+    "INVENTORY LIST":"LISTE D'INVENTAIRE",
+    "CUSTOMER INQUIRY":"DEMANDE CLIENT",
+    "Driver Name":"Nom du Conducteur",
+    "Driver Address":"Adresse du Conducteur",
+    "Driver Status":"Statut du Conducteur",
+    "License Number":"Numero de permis",
+    "Salary":"Salaire",
+    "DOJ":"JMA",
+    "Delete":"Supprimer",
+    "Device Type":"Type de Balise",
+    "Configuration Command":"Commande de configuration",
+    "Location Command":"Commande de Localisation",
+    "Immobilzer Command":"Commande d'Immobilisation",
+    "Resume Command":"Commande de Reprise",
+    "Reset Command":"Commande de Réinitialisation",
+    "Immoblizer Type":"Type d'immobilisation",
+    "Port":"Port",
+    "Edit":"Editer",
+    "Brand":"Marque",
+    "Description":"Description",
+    "Model":"Modèle",
+    "Icon Type":"Type d'icone",
+    "Voltage Calibration":"Etalonnage de Tension",
+    "Tank Size":"Taille du Réservoir",
+    "Mileage":"Kilométrage",
+    "Last Modified":"Dernière Modification",
+    "Search by phone":"Rechercher par Téléphone",
+    "Search by name":"Rechercher par Nom",
+    "From Date":"De la Date",
+    "To Date":"A la Date",
+    "FIND":"TROUVER",
+    "Show":"Montrer",
+    "entries":"entrées",
+    "Name":"Nom",
+    "Dealer":"Revendeur",
+    "Is Dealer":"Est Revendeur",
+    "Created on":"Crée le",
+    "Email":"Email",
+    "Phone":"Téléphone",
+    "Device Name":"Nom de Balise",
+    "Device Id":"Id Balise",
+    "User":"Utilisateur",
+    "Expire On":"Expire Le",
+    "Fuel Voltage(mv)":"Tension de Carburant (mv)",
+    "Sim Number":"Numero Sim",
+    "Today ODO":"KM Aujourd'hui",
+    "Search by Device ID":"Recherche par ID Balise",
+    "Certificates":"Certificats",
+    "Export Pdf":"Exporter PDF",
+    "Search by Sim Number":"Rechercher par Numéro de la Sim",
+    "Export EXCEL":"Exporter EXCEL",
+    "Device IMEI":"IMEI Balise",
+    "Lattitude":"Latitude",
+    "Longitude":"Longitude",
+    "Speed":"Vitesse",
+    "Device Time":"Heure de Balise",
+    "Insertion Time":"L'heure d'intersion",
+    "Last Push":"Dernière poussée",
+    "Integration Respnse":"Réponse d'intégration",
+    "Ignition":"Contact",
+    "Power":"Energie",
+    "Ext. Volt":"Volt Ext.",
+    "Fuel Volt":"Volt Carburant",
+    "Sattelite":"Sattelite",
+    "Powercut Alarm":"Alarme de coupure d'alimentation",
+    "Inquiry Date":"Date de la demande",
+    "Customer Name":"Nom du Client",
+    "Message":"Message",
+    "Assigned To":"Affecté à",
+    "Role":"Rôle",
+    "No data available in table":"Pas de donnée disponible dans la table",
+    "Showing":"Affichage",
+    "Costumer Inquiry":"Demande Client",
+    "System Date":"Date du Système",
+    "Vehicle Number":"Numéro de vehicule",
+    "Chassis Number":"Numéro de chassis",
+    "Engine Number":"Numéro de moteur",
+ 	
+    "VLT No.(IMEI)":"VLT No. (IMEI)",
+    "VLT SIM(IDEA)":"VLT SIM(IDEA)",
+    "VLT SIM(BSNL)":"VLT SIM(BSNL)",
+    "Approving RTO":"Approbation RTO",
+    "Owner Number":"Numero du Propriétaire",
+    "Alternate Number":"Autre Numéro ",
+    "Dealer Name":"Nom du Revendeur",
+    "Tracking Software":"Logiciel de suivi",
+    "Costumer Name":"Nom du client",
+    "Device ID":"ID Balise",
+    "Operator Name":"Nom de l'Opérateur",
+    "Protocol ID":"ID Protocole",
+    "Command":"Commande",
+    "ACC":"ACC",
+    "Battery Status":"Statut de la batterie",
+    "GPS DATA":"DONNEES GPS",
+    "DEVICES MASTER":"GESTIONNAIRE DE BALISES",
+    "Groups":"Groupes",
+    "Add Group":"Ajouter Groupe",
+    "Type group name":"Saisir le nom du Groupe",
+    "CONFIRM":"CONFIRMER",
+    "CANCEL":"ANNULER",
+    "Active":"Actif",
+    "InActive":"Inactif",
+    "Vehicles":"Vehicules",
+    "Reg. Number":"Numéro Reg.",
+    "IMEI":"IMEI",
+    "Int. ID":"Ent. ID",
+    "SIM 1":"SIM 1",
+    "SIM Provider":"Fournisseur SIM",
+    "SIM2":"SIM2",
+    "Vehicle Type":"Type de vehicule",
+    "Owner":"Propriétaire",
+    "IDLING Since":"RALENTI depuis",
+    "STOPPED Since":"ARRÊTÉ depuis",
+    "RUNNING Since":"EN MARCHE depuis",
+    "Video Tutorial":"Vidéo Tutoriel",
+    "VEHICLE LIST":"LISTE DE VEHICULE",
+    "MAINTENANCE REMINDER":"RAPPEL DE MAINTENANCE",
+    "REMINDERS":"RAPPELS",
+    "Reminder Date":"Date de Rappel",
+    "Notification Type":"Type de Notification",
+    "Reminder Type":"Type de Rappel",
+    "Prior Notification (Days)":"Notification préalable (Jours)",
+    "Additional notes":"Notes additionelles",
+    "SEARCH":"CHERCHER",
+    "Live Tracking":"Suivi en Direct",
+    "History Tracking":"Historique de Suivi",
+    "Vehicle History":"Historique du vehicule",
+    "Generate History":"Générer l'historique",
+    "Play History":"Jouer l'Historique",
+    "Select device":"Choisir la Balise",
+    "Please choose a device":"Veuillez Choisir la Balise ",
+    "OK":"OK",
+    "GEOFENCE":"GEOCLOTURE",
+    "Grid view":"Vue de la Barrière",
+    "List view":"Vue de la liste",
+    "Geo Fencing Name":"Nom de Geo Clôture",
+    "Geofence type":"Type de Geoclôture",
+    "Enter Alert":"Alerte d'Entrée",
+    "Exit Alert":"Alert de Sortie",
+    "Geofence Search":"Recherche Geoclôture",
+    "Add Geofence":"Ajouter Géoclôture",
+    "Select group":"Choisir Groupe",
+    "GEO FENCE NAME":"NOM DE LA GEO CLOTURE",
+    "Get Alert on":"Alerter sur",
+    "Entering":"Entrée",
+    "Exiting":"Sortie",
+    "Create":"Créer",
+    "Select Your Geo Fence Region":"Selectioner votre zone de Géoclôture",
+    "Add Geo Fence":"Ajouter Géo Clôture",
+    "Total Distance(Km)":"Distance totale (km)",
+    "Fuel consumption(Litre)":"Consommation de carburant (litre)",
+    "Ignition ON Time(Hr:Min)":"Temps de mise en Marche (Hr: Min)",
+    "Ignition OFF Time(Hr:Min)":"Temps de mise hors service (Hr: Min)",
+    "Idle Time(Hr:Min)":"Temps de Ralenti(Hr:Min)",
+    "Out of reach(Hr:Min)":"Hors de portée (Hr: Min)",
+    "No GPS(Hr:Min:Sec)":"Pas de GPS (Hr: Min: Sec)",
+    "Daily Report":"Rapport Journalier",
+    "Trips":"Trajets",
+    "Max Speed(Km/hr)":"Vitesse Maximale (km/h)",
+    "My App":"Mon Application",
+    "AC Report":"Rapport AC",
+    "Loading":"Chargement",
+    "Vehicle":"Vehicule",
+    "ON Time":"Temps de Marche",
+    "OFF Time":"Temps d'Arrêt",
+    "dashboard":"tableau de Bord",
+    "RULES":"RÈGLES",
+    "Alert Report":"Rapport Alerte",
+    "No":"Pas",
+    "Date":"Date",
+    "Power Cut":"Coupure Alimentation",
+    "Battery":"Battérie",
+    "Geofencing":"Geoclôture",
+    "Overspeeding":"Excès de Vitesse",
+    "Daywise Report":"Rapport Précédent",
+    "Filter Report":"Filtrer le Rapport",
+    "Fuel Consumption Report":"Rapport de Consommation Carburant ",
+    "Vehicle name":"Nom du Véhicule",
+    "Start Time":"Heure de Début",
+    "End Time":"Heure de Fin",
+    "Fuel Consumed (L)":"Carburant Consommé (L)",
+    "Distance(Kms)":"Distance (Kms)",
+    "In event count":"En nombre d’événements",
+    "Out event count":"Hors nombre d’événements",
+    "Start Location":"Lieu de Départ",
+    "End Location":"Lieu d'Arrivée",
+    "Click to get device's last location":"Cliquez pour obtenir le dernier emplacement de la Balise",
+    "SOS Report":"Rapport SOS",
+    "Vehicle No.":"N° de véhicule",
+    "Time":"Temps",
+    "Address":"Adresse",
+    "Speed variation":"Variation de Vitesse",
+    "Total K.M":"Total K.M",
+    "Generate Graph":"Générer un graphique",
+    "Driver's Performance Report":"Rapport de performance du Conducteur",
+    "Total trip":"Voyage total",
+    "Total Ontime trip":"Total des trajets à l'heure",
+    "Ontime vehicles":"Véhicules Ponctuels",
+    "group":"groupe",
+    "TRACKER":"TRAÇEUR",
+    "REPORTS":"RAPPORTS",
+    "Speed Variation":"Variation de Vitesse",
+    "Trip Report":"Rapport de trajet",
+    "Summary Report":"Rapport Sommaire",
+    "Overspeeding Report":"Rapport de Survitesse",
+    "Route Violation Report":"Rapport d’Infraction d’Itinéraire",
+    "Stoppage Report":"Rapport d'Arrêt",
+    "Ignition Report":"Rapport d’Allumage",
+    "Distance Report":"Rapport de Distance",
+    "Driver's performance":"Performance du Conducteur",
+    "VEHICLE TYPE":"TYPE DE VEHICULE",
+    "ROUTE LIST":"LISTE D’ITINÉRAIRES",
+    "ROUTE MAPPING":"CARTOGRAPHIE D’ITINÉRAIRE",
+    "Dealer Account":"Compte Revendeur",
+    "Geofencing Report":"Rapport de Géorepérage",
+    "Select Geofencing":"Sélectionnez Géoclôture",
+    "Vehicle Name":"Nom de Véhicule",
+    "In/Out":"Entrée/Sortie",
+    "Datetime":"Date Heure",
+    "Location":"Localisation",
+    "GeoFence Name":"Nom de Géoclôture",
+    "Click here to get address":"Cliquez ici pour obtenir l’adresse",
+    "Select Your Device":"Selectionnez votre Balise",
+    "IDLE REPORT":"RAPPORT DE RALENTI",
+    "Select Vehicle":"Selectionner le Véhicule",
+    "Min Idle Time (Min)":"Temps de Ralenti Minimal (min)",
+    "Duration (HH:MM:SS)":"Durée (HH: MM: SS)",
+    "AC Status":"Statut AC",
+    "TRACKERS":"TRAÇEURS",
+    "Date Time":"Date Heure",
+    "On/Off":"Marche/Arrêt",
+    "Overspeed":"Excès de Vitesse",
+    "POI name":"Nom de POI",
+    "Arrival Time":"Heure d'Arrivée",
+    "Departure Time":"Heure de Départ",
+    "Route":"Itinéraire",
+    "POI Report":"Rapport POI",
+    "From Time":"De Temps",
+    "To Time":"Au Temps",
+    "Duration":"Durée",
+    "Start Point":"Point de Départ",
+    "End Point":"Point d'Arrivée",
+    "Total KM":"Total KM",
+    "Fuel Consumption (Litre)":"Consommation de Carburant (litre)",
+    "Total Running Time (HH:MM)":"Temps Total de Fonctionnement (HH: MM)",
+    "Total Stop Time (HH:MM)":"Temps d’arrêt total (HH: MM)",
+    "Total Idle Time (HH:MM)":"Temps de Ralenti total (HH: MM)",
+    "Total Out of reach Time (HH:MM)":"Temps total hors de portée (HH: MM)",
+    "Total No gps Time (HH:MM)":"Temps Total Pas de GPS (HH: MM)",
+    "Overspeeding (HH:MM)":"Excès de Vitesse (HH: MM)",
+    "Route Violation":"Violation d'Itinéraire",
+    "TRAVEL PATH REPORT":"RAPPORT DE PARCOURS VOYAGE",
+    "Device":"Balise",
+    "ODO (K.M.)":"KM (K.M.)",
+    "Distance (K.M.)":"Distance (K.M.)",
+    "Cumulative Distance (K.M.)":"Distance Cumulée (K.M.)",
+    "TRIP REPORT":"RAPORT DE VOYAGE",
+    "TRIP ID":"ID VOYAGE",
+    "VEHICLE NAME":"NOM DE VEHICULE",
+    "SOURCE ADDRESS":"ADRESSE D'ORIGINE",
+    "DESTINATION ADDRESS":"ADRESSE DE DESTINATION",
+    "DISTANCE":"DISTANCE",
+    "DURATION":"DUREE",
+    "TRIP STATUS":"STATUT DE TRAJET",
+    "MILEAGE":"KILOMETRAGE",
+    "ADD EXPENSES":"AJOUTER DEPENSES",
+    "EXPENSES LIST":"LISTE DES DEPENSES",
+    "Amount":"Montant",
+    "Currency":"Monnaie",
+    "Payment Mode":"Mode de paiement",
+    "Expense type":"Type de Dépense",
+    "GEO FENCING":"GEO CLÔTURE",
+    "ADD DEVICE":"AJOUTER BALISE",
+    "GENERAL SETTING":"PARAMETRE GENERAL",
+    "Device ID *":"ID Balise *",
+    "Enter Device ID":"Entrer ID Balise",
+    "Device Name * ":"Nom de Balise *",
+    "Enter Device Name":"Entrer le Nom de la Balise ",
+    "SIM Number":"Numero SIM",
+    "SIM Number 2":"Numero SIM 2",
+    "SIM Provider 2":"Fournisseur SIM 2",
+    "Integration ID":"ID d’intégration",
+    "Select User":"Selectionner Utilisateur",
+    "Driver Contact Number":"Numéro de téléphone du Chauffeur",
+    "Select Vehicle type*":"Selectionner le Type de Véhicule *",
+    "Type of Vehicle":"Type de Véhicule",
+    "mm/dd/yyyy":"jj/mm/aaaa",
+    "ICCICD Number":"Numéro ICCICD",
+    "IMSI":"IMSI",
+    "Unique ID":"ID Unique",
+    "CID number":"Numéro CID",
+    "Chassis number":"Numéro de chassis",
+    "Comapny Name":"Nom de La Société",
+    "Company Address":"Adresse de la Société",
+    "Transport Office City":"Bureau des Transport Ville",
+    "Transport Office State":"Bureau des Transports Etat",
+    "Invoice Number":"Numéro de facture",
+    "Number of SOS":"Numéro SOS",
+    "Doc Type":"Type de document",
+    "Enter SIM Provider":"Entrer Fournisseur de SIM",
+    "Enter SIM Provider 2":"Entrer Fournisseur de SIM 2",
+    "Driver's contact number":"Numéro de Téléphone du Conducteur",
+    "Device model *":"Modèle de Balise *",
+    "Vehicle type * ":"Type de Véhicule *",
+    "Expiration date":"Date d'Expiration",
+    "ADD DEVICE":"AJOUTER UNE BALISE",
+    "Engine number":"Numéro de moteur",
+    "Type of Vehicle ":"Type de véhicule ",
+    "Manufacturing company":"Entreprise de Fabrication",
+    "Registration date ":"Date d'Enregistrement ",
+    "Date of Manufacturing Year ":"Date de l'Année de Fabrication",
+    "Last fitness date ":"Date de Dernière mise en Forme",
+    "ICCICD Number ":"Numéro ICCICD",
+    "Fitment Date ":"Date d'Installation",
+    "IMSI ":"IMSI",
+    "Unique ID ":"ID Unique",
+    "CID number ":"Numéro CID",
+    "Chassis number ":"Numéro de chassis",
+    "Comapny Name ":"Nom de l'Entreprise",
+    "Comapny Address":"Adresse de l'Entreprise",
+    "Invoice number":"Numéro de la Facture",
+    "Invoice Date":"Date de la Facture",
+    "No. of SOS ":"N° SOS",
+    "Add Document field":"Ajouter le Champ Document",
+    "Document issued date :":"Date d'émission du Document:",
+    "UPDATE AND SAVE":"METTRE A JOUR ET ENREGISTRER",
+    "Reason":"Raison",
+    "Password":"Mot de Passe",
+    "Driver Search":"Recherche de Conducteur",
+    "Enter User Id":"Entrer ID Utilisateur",
+    "Enter First name":"Entrer Prénom",
+    "Enter Last name":"Entrer Nom",
+    "Enter email":"Entrer email",
+    "Enter mobile number":"Entrer Numéro de Téléphone mobile",
+    "Enter Address":"Entrer Adresse",
+    "EDIT CUSTOMER":"EDITER CLIENT",
+    "Delete Dealer":"Supprimer Revendeur",
+    "Documents":"Documents",
+    "Document Name":"Nom du Document",
+    "Document number":"Numéro du Document",
+    "Action":"Action",
+    "Add":"Ajouter",
+    "Upload Documents *":"Charger Documents*",
+    "Save":"Sauvegarder",
+    "delete":"Supprimer",
+    "Doc number":"Numéro de doc.",
+    "Download":"Télécharger",
+    "Yes, Delete it!":"Oui, Supprimez-le!",
+    "Cancel":"Annuler",
+    "EDIT DEALER":"MODIFIER LE REVENDEUR",
+    "Are you sure ?":"Es-tu sûr ?",
+    "you want to delete dealer":"Tu veux supprimer le revendeur",
+    "Edit Model":"Modifier le Modèle",
+    "Enter device model":"Enter le modèle de la Balise",
+    "Configuration command":"Commande de Configuration",
+    "Location command":"Commande de Localisation",
+    "Imobilizer command":"Commande d'Immobilisation",
+    "Resume command":"Commande de Reprise",
+    "Reset command":"Commande de réinitialisation",
+    "Manufacturer":"Fabriquant",
+    "Server Command":"Commande Serveur",
+    "Mobile Command":"Commande Mobile",
+    "Update":"Actualiser",
+    "Edit trip details":"Modifier les détails du voyage",
+    "Route name":"Nom de l'itinéraire",
+    "Vehicles name":"Nom des véhicules",
+    "Radius (in meter)":"Rayon (en mètre)",
+    "Driver name":"Nom du Conducteur",
+    "Loading site":"Lieu de Chargement",
+    "Unloading site":"Lieu de Déchargement",
+    "LR Number":"Numéro LR",
+    "Device Name: ":"Nom de la Balise:",
+    "Days: ":"Jours",
+    "M":"M",
+    "T":"T",
+    "W":"W",
+    "Th":"Th",
+    "F":"F",
+    "Sa":"Sa",
+    "S":"S",
+    "Edit Vehicle Type":"Modifier le Type de Véhicule",
+    "Brand:":"Marque",
+    "Enter Brand Name":"Entrer le Nom de La Marque",
+    "Description:":"Description:",
+    "Enter Description":"Entrer la Description",
+    "Please Enter Description":"Veuillez Entrer la Description",
+    "Select icon type":"Sélectionner le type d’icône",
+    "Voltage Value":"Valeur de Tension",
+    "Fuel value":"Valeur de Carburant",
+    "add":"Ajouter",
+    "Volatage Calibrator":"Etalonneur de tension",
+    "Please Enter voltage":"Veuillez Entrer la tension",
+    "Please fuel value":"Veuillez Entrer la Valeur de Carburant",
+    "Please Enter Tank Size":"Veuillez Entrer la dimension du Réservoir",
+    "FUEL EVENTS":"EVENEMENTS LIES AU CARBURANT",
+    "Please Enter Mileage":"Veuillez Entrer le Kilométrage",
+    "Fuel Change (L)":"Changement de carburant (L)",
+    "Search Device":"Recherche de Balise",
+    "Generate Report":"Générer un rapport",
+    "Sleep Mode Temprature":"Température en mode veille",
+    "Temprature":"Température",
+    "ON":"ALLUMÉ",
+    "OFF":"ETEINT",
+    "list":"liste",
+    "Enter GEO FENCE NAME":"Enter le NOM de la GEO CLÔTURE",
+    "Get Alert on :":"Recevoir une Alerte:",
+    "Select Your Geo Fence Region :":"Sélectionnez votre région de géoclôture:",
+    "Search Box":"Boîte de recherche",
+    "--Select group--":"Selectionner le Groupe",
+    "--Geofence type--":"--Type de Géoclôture--",
+    "--GEO FENCE NAME--":"--NOM DE LA GEO CLÔTURE--",
+    "Admin":"Administration",
+    "close":"fermer",
+    "DEVICES":"BALISES",
+    "Matrix Input":"Entrée Matricielle",
+    "Device Id-":"Id Balise-",
+    "Matrix Name":"Nom de la matrice",
+    "Topic":"Sujet",
+    "Ext. Volt.":"Ext. Volt.",
+    "Fuel Volt.":"Tension Carburant",
+    "Real Time GPS Based Vechicle Tracking":"Suivi vechicule par GPS en temps réel",
+    "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.":"Le Suivi en Direct des Véhicules vous donne des mises à jour en temps réel, vous permettant d’obtenir les dernières informations de suivi sur votre vechicule.",
+    "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.":"Cartes d’entreprise par Google-API pour une utilisation commerciale qui donne des détails précis de localisation de vechicules.",
+    "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.":"Système de suivi convivial qui vous aide à suivre et à localiser sans effort le parc en un Click.",
+    "Software as a Service(Saas) with perpetual uptime.":"Logiciel comme un service (Saas) avec une disponibilité perpétuelle.",
+    "Alerts and Event Notifications":"Alertes et notifications d’événements",
+    "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.":"Recevez des notifications lorsque vous êtes en déplacement par SMS, courriel et application mobile, Vous serez tenu au courant des alertes en temps réel.",
+    "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.":"Plusieurs destinataires peuvent recevoir des alertes, pas seulement vous, mais vos proches peuvent également être ténus au courant pour les alertes générées pour une aide immédiate.",
+    "Schedule your alerts as per your convenience that suits your needs":"Planifiez vos alertes en fonction de vos besoins",
+    "Detailed Reports for analysis is also available for making quik decisions":"Des rapports détaillés pour analyse sont également disponibles pour prendre des décisions",
+    "Geofences":"Geoclôtures",
+    "Upload all Geofence in your account and assign them to the vehicles.":"Chargez toutes les Géoclôtures dans votre compte et attribuez-les aux véhicules.",
+    "Find and mark geofences without knowing latitude and longitude values.":"Trouver et marquer les géoclôtures sans connaître les valeurs de latitude et de longitude.",
+    "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.":"Géoclôture en polygone disponible pour un accès facile. Toutes les géoclôtures peuvent être marquées selon la conviction de l’utilisateur et peuvent être assignées aux véhicules afin que chaque alerte vous soit envoyée. Sécuriser vos proches et assurer le travail effectué par vos Forces.",
+    "Date and Time Based reports available for analyzing vehicle usage.":"Rapports basés sur la date et l’heure disponibles pour analyser l’utilisation des véhicules.",
+    "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.":"Localisation des véhicules, chaque connexion vous indique l'emplacement du véhicule, où se trouvait votre véhicule et facilite la gestion de l'incident où il s'est produit.",
+    "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).":"Véhicule avisé / Rapport de consolidation avisée de la flotte. Il donne un résumé de la journée pour les véhicules.",
+    "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..":"Rapport d'alerte, rapport consolidé pour toutes les alertes générées par véhicule. Survitesse, falsification, Allumage etc..",
+    "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.":"Rapport de géoclôture, rapport détaillé quand et à quelle heure le véhicule pénètre dans les zones géographiques.",
+    "How it works":"Comment ça fonctionne",
+    "Real-time tracking":"Suivi en temps réel",
+    "Advanced Reporting":"Rapports avancés",
+    "Alerts & Warning":"Alertes et Avertissements",
+    "2-Way messaging":"Messages bidirectionnels",
+    "Engine immobilisation":"Immobilisation Moteur",
+    "Monitor gauges":"Jauges de surveillance",
+    "Access anytime, anywhere!":"Accès en tout temps, n’importe où!",
+    "Web browser based software":"Logiciel basé sur un navigateur Web",
+    "Android app":"Application Android",
+    "iPhone app":"Application iPhone",
+    "Request for Demo":"Demande pour Démo",
+    "Get Detail":"Obtenir des détails",
+    "Export To Excel":"Exporter vers Excel",
+    "Loading Site":"Lieu de Chargement",
+    "Distance":"Distance",
+    "ETA":"ETA",
+    "directions":"directions",
+    "Google Traffic":"Google Trafic",
+    "Google Hybrid":"Google Hybride",
+    "Google Satellite":"Google Satellite",
+    "Google Physical":"Google Physique",
+    "Google Street":"Google Rue",
+    "map":"Carte",
+    "Please Select Your Device, From/To Date & Time to view history from above options":"Veuillez Sélectionner votre Balise, Date de début/de fin et heure de visualisation de l’historique à partir des options ci-dessus",
+    "Generate Map":"Générer une carte",
+    "Trip Name":"Nom du Trajet",
+    "Select destination":"Selectionner la Destination",
+    "CREATE TRIP":"CREER UN TRAJET",
+    "Total Distance: ":"Distance Totale",
+    "Idle Time (Min)":"Temps de Ralenti (min)",
+    "Go to Site >":"Aller sur le Site>",
+    "Welcome To OneQlik":"Bienvenue sur OneQlik",
+    "Login":"Connexion",
+    "Username / Phone Number":"Nom d'Utilisateur / numéro de téléphone",
+    "Enter Mobile number*":"Entrer numéro de Téléphone Mobile *",
+    "Confirm New Password":"Confirmer Nouveau Mot de Passe",
+    "Send OTP":"Envoyer OTP",
+    "Back to Login":"Retour à la Connexion",
+    "Reset Password":"Réinitialiser Mot de Passe",
+    "Back to previous Form":"Retour au formulaire précédent",
+    "Forgot Username / Password?":"Nom d’utilisateur/mot de passe oublié?",
+    "First Name":"Prénom",
+    "Last Name":"Nom",
+    "Email Id":"Id Email",
+    "Organisation":"Organisation",
+    "notifications":"notifications",
+    "Notification Sound":"Son de notification",
+    "Notifications":"Notifications",
+    "Add Phone":"Ajouter un Téléphone",
+    "Close":"Fermer",
+    "Add Email":"Ajouter un Email",
+    "POI details":"Details POI",
+    "Add POI details":"Ajouter les détails de POI",
+    "Type POI name":"Tapez le nom du POI",
+    "Previous point duration":"DDurée des points précédents",
+    "Days":"Jours",
+    "Hours":"Heures",
+    "Minutes":"Minutes",
+    "Next point duration":"Durée du point suivant",
+    "Min":"Min",
+    "Halt":"Arrêt",
+    "Mapped Vehicles":"Véhicules cartographiés",
+    "Radius":"Rayon",
+    "POI Name":"Nom de POI",
+    "Enter a location":"Entrer un Lieu",
+    "ADD":"AJOUTER",
+    "Routes Search":"Recherche d'itinéraires",
+    "Route Status":"Statut d'Itinéraires",
+    "Source":"Source",
+    "Destination":"Destination",
+    "Test name":"Nom d'Essai",
+    "Test Source":"Source d'Essai",
+    "Test destination":"Destination d’Essai",
+    "Routes":"Itinéraires",
+    "Untracked vehicles":"Véhicules non suivis",
+    "Please Enter Email ID / Phone Number":"Veuillez Entrer ID Email/ Numéro de Téléphone",
+    "Please Enter Password":"Veuillez Entrer le Mot de Passe",
+    "Please Re Enter Password":"Veuillez Entrer à nouveau le Mot de Passe",
+    "Delete route":"Supprimer l'Itinéraire",
+    "Are you sure to delete this route ??":"Êtes vous sûr de supprimer cet itinéraire?",
+    "DELETE":"SUPPRIMER",
+    "Create Trip":"Créer un Voyage ",
+    "One way trip":"Voyage Aller simple ",
+    "Two way trip":"Voyage Aller-Retour",
+    "Round trip":"Aller-retour",
+    "Start Date/Time":"Date/heure de Début",
+    "End Date/Time":"Date/heure de Fin",
+    "Planned start time":"Heure de début prévue",
+    "Planned end time":"Heure de fin prévue",
+    "Actual start time":"Heure de début Réelle",
+    "Actual end time":"Heure de Fin Réelle",
+    "Trip History":"Historique du voyage",
+    "Trip type":"Type de Voyage",
+    "Routes name":"Nom des itinéraires",
+    "Total Distance":"Distance Totale",
+    "Get route":"Obtenir un itinéraire",
+    "Parameters":"Paramètres",
+    "Enter First Name":"Entrez votre Prénom",
+    "Enter Last Name":"Entrez votre Nom",
+    "Invalid Password":"Mot de Passe Invalide",
+    "Confirm Password":"Confirmer Mot de Passe",
+    "Please Enter Confirm Password":"Veuillez saisir le Mot de Passe",
+    "Organisation Name":"Nom de l'organisme",
+    "Type of user":"Type d'utilisateur",
+    "Mobile Verification":"Vérification mobile",
+    "Mobile Number":"Numéro de Téléphone Mobile",
+    "TRIP HISTORY":"HISTORIQUE DE VOYAGE",
+    "Event name":"Nom de l'événement",
+    "Event time":"Heure de l'évènement",
+    "Driver":"Conducteur",
+    "Token":"Jeton",
+    "Restore":"Restaurer",
+    "Delete Permanently":"Supprimer Définitivement",
+    "Select no of Days to get reminder for your services":"Sélectionnez le nombre de jours pour obtenir un rappel de vos services",
+    "Prior Notification (Days)":"Notification préalable (jours)",
+    "Enter Additonal information here...":"Entrez les informations supplémentaires ici...",
+    "Calibration":"Etalonnage"
+
+}
\ No newline at end of file
diff --git a/src/assets/i18n/newLan2.json b/src/assets/i18n/newLan2.json
new file mode 100644
index 0000000..1a85c4b
--- /dev/null
+++ b/src/assets/i18n/newLan2.json
@@ -0,0 +1,649 @@
+{
+  "ADMIN":"Administratori",
+  "DASHBOARD": "Paneli I perdoruesit",
+  "Admin": "Administratori",
+  "GROUPS": "Grupet",
+  "VEHICLES": "Veturat",
+  "Account Setting": "Cilesimet e llogarise",
+  "General Setting": "Cilesimet e pergjithshme",
+  "Application language": "Gjuha e aplikimit",
+  "Language Setting": "Cilesimet e gjuhes",
+  "Reset Password": "Reseto fjalekalimin ",
+  "Notification Settings": "Cilesimet e njoftimeve",
+  "TRACKING": "Ndjekje",
+  "Tracking": "Ndjekje",
+  "Reports": "Raportet",
+  "POI LIST": "Lista e POI",
+  "POI List": "Lista e POI",
+  "ROUTES": "Rruget",
+  "NOTIFICATIONS": "Njoftimet",
+  "DISTRIBUTERS": "Distributoret",
+  "DEALERS": "Tregtaret",
+  "Dealers": "Tregtaret",
+  "CUSTOMERS": "Klientet",
+  "Customers": "Klientet",
+  "RUNNING": "Ne Levizje",
+  "IDLE": "Ne ler",
+  "IDLE Reports": "Raportet ne Ler",
+  "STOPPED": "E ndaluar",
+  "EXPIRED": "E skaduar",
+  "OUT OF REACH": "I pa arritshem",
+  "NO GPS": " NUk ka gps",
+  "Device Icon": " Ikona e paisjes",
+  "Registration number": " Numri I regjistrimit ",
+  "Group": " Grupi",
+  "Today's ODO": " Odo e sotme",
+  "Total ODO": " Odoja totale ",
+  "Last location": " Lokacioni I fundit ",
+  "Last updated on": " Perditsimi I fundit ",
+  "Trip status": "Statusi I udhetimit",
+  "Status": "Statusi",
+  "Satellites": "Satelitet",
+  "Last Speed": "Shpejtesia e fundit",
+  "FUEL (LITRE)": "Karburanti (Liter)",
+  "GPS": "Gps",
+  "AC": "AC",
+  "Fuel Reports": "Raporti I karburantit",
+  "POWER": "Fuqia",
+  "GSM Signal": "Sinjali I GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "Njoftim",
+  "My Account": "Llogaria ime",
+  "Log Out": "Dil",
+  "Refresh Data": "Rifresko te dhenat",
+  "Device Search": "Kerkimi I paisjes",
+  "Previous": "I meparshem",
+  "Next": "Tjetra",
+  "DRIVER MASTER": "Te dhenat per shoferin",
+  "Driver Master": " Te dhenat per shoferin ",
+  "DEVICE MODEL": "Modeli I paisjes",
+  "VEHILE TYPE": "Tipi I vetures",
+  "Maintenance Reminder": "Kujtese per mirembajtjen",
+  "Vehicle Expense": "Shpenzimi I vetures",
+  "Message Utility": "Sherbimi I mesazhit",
+  "Sensor Detail": "Detajet per senzorin",
+  "Billing Detail": "Detajet e fatures",
+  "USER MASTER": "Te dhenat per shfrytezuesin",
+  "User Master": "Te dhenat per shoferin",
+  "DEVICE MASTER": "Te dhenat per paisjen",
+  "Device Master": " Te dhenat per paisjen ",
+  "System Logs": "Regjistrat e sistemit",
+  "GPS TRACKER": "Gjurmuesi gps",
+  "CMD PACKETS": " Paketat CMD",
+  "CMD Packets": " Paketa CMD",
+  "INVENTORY LIST": "Lista e inventarit",
+  "Inventory List": "Lista e inventarit",
+  "CUSTOMER INQUIRY": " Kerkesat e klientit",
+  "Driver Name": "Emri I shoferit",
+  "Driver Address": "Adresa e shoferit",
+  "Driver Status": "Statusi I shoferit",
+  "License Number": "Numri I patentes",
+  "Salary": "Paga",
+  "DOJ": "DOJ",
+  "Delete": "Fshi",
+  "Device Type": "Tipi I paisjes",
+  "Configuration Command": "Komanda e konfigurimit",
+  "Location Command": "Lokacioni I komandes",
+  "Immobilzer Command": "Komanda e Imobilizuesit",
+  "Resume Command": " Rifllillo komanden ",
+  "Reset Command": " Reseto komanden ",
+  "Immobilzer Type": " Tipi I imobilizuesit ",
+  "Port": " Porti ",
+  "Edit": " Edito ",
+  "Brand": " Tipi",
+  "Description": " Peershkrimi",
+  "Model": "Modeli",
+  "Icon Type": " Tipi I ikones",
+  "Voltage Calibration": " Kalibrimi i tensionit ",
+  "Tank Size": " Madhesia e rezervuarit ",
+  "Mileage": "Kilometrazha ",
+  "Last Modified": " Modifikimi I fundit",
+  "Search by phone": " Kerko permes telefonit",
+  "Search by name": " Kerko permes emrit",
+  "From Date": " Prej dates",
+  "To Date": " Deri ne date ",
+  "FIND": "Kerko ",
+  "Show": "Shfaq ",
+  "entries": " Hyrjet ",
+  "Name": "Emri",
+  "Dealer": "Tregtari",
+  "Is Dealer": "",
+  "Created on": "Krijuar me",
+  "Email": "Emaili",
+  "Phone": "Telefoni",
+  "Device Name": "Emri I paisjes",
+  "Device Id": "ID e paisjes",
+  "User": "Perdoruesi",
+  "Expire On": "Skadon me",
+  "Fuel Voltage(mv)": " Tensioni i karburantit (mv)",
+  "Sim Number": " Numri I karteles ",
+  "Today ODO": "Kilometrazhi I sotem",
+  "Search by Device ID": " Kerko permes ID se paisjes ",
+  "Certificates": "�ertifikatat ",
+  "Export Pdf": " Eksporto ne PDF",
+  "Search by Sim Number": " Kerko permes Numrit te karteles",
+  "Export EXCEL": "Eksporto ne eksell",
+  "Device IMEI": "IMEI I paisjes",
+  "Lattitude": "Gjeresia gjeografike ",
+  "Longitude": "Gjatesia gjeografike",
+  "Speed": "Shpejtesia",
+  "Device Time": "Koha e paisjes",
+  "Insertion Time": "Koha e futjes",
+  "Last Push": "Shtytja e fundit",
+  "Integration Respnse": "Pergjigjja e integrimit",
+  "Ignition": "Ignition",
+  "Power": "Fuqia",
+  "Ext. Volt": "Voltazha",
+  "Fuel Volt": "Volti I karburantit",
+  "Sattelite": "Sateliti",
+  "Powercut Alarm": " Alarmi i nderprerjes se energjise ",
+  "Inquiry Date": " Data e kerkesave ",
+  "Customer Name": "Emri I klientit",
+  "Message": "Mesazhi ",
+  "Assigned To": "Caktuar per",
+  "Role": "Roli",
+  "No data available in table": "Nuk ka data te lira ",
+  "Showing": " shfaqet ",
+  "Costumer Inquiry": "Kerkesat e klienit",
+  "System Date": " Data e sistemit",
+  "Vehicle Number": "Numri I vetures",
+  "Chassis Number": "Shasia e vetures ",
+  "Engine Number": " Numri I motorit",
+  "Device Model": " Modeli I paisjes",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " Numri I pronarit ",
+  "Alternate Number": "Numri alternativ",
+  "Dealer Name": "Emri I tregtarit",
+  "Tracking Software": " Softueri per gjurmim",
+  "Costumer Name": " Emri I klientit",
+  "Device ID": " Id e paisjes",
+  "Operator Name": " Emri I operatorit ",
+  "Protocol ID": " ID e protokollit ",
+  "Command": " Komanda",
+  "ACC": " ACC ",
+  "Battery Status": "Statusi I bateris",
+  "GPS DATA": "Te dhenat per gps",
+  "DEVICES MASTER": "Te dhenat per paisjen",
+  "Groups": "Grupet",
+  "Add Group": "Shto grup",
+  "Type group name": "Shkruani emrin e grupit",
+  "CONFIRM": "Konfirmo",
+  "CANCEL": "Anulo",
+  "Active": "Aktiv",
+  "InActive": "Jo aktiv",
+  "Vehicles": "Paisjet",
+  "Reg. Number": "Nr I regjistrmit",
+  "IMEI": "IMEI",
+  "Int. ID": "ID internacionale",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "Provajderi I karteles",
+  "SIM2": "SIM2",
+  "Vehicle Type": "Tipi I vetures",
+  "Owner": "Pronari",
+  "IDLING Since": "Ne ler prej",
+  "STOPPED Since": "E ndalur prej:",
+  "RUNNING Since": " Ne Levizje prej",
+  "Video Tutorial": " Video tutoriale",
+  "VEHICLE LIST": " Lista e veturave",
+  "Vehicle List": " Lista e veturave ",
+  "MAINTENANCE REMINDER": " Kujtese per mirembajtjen ",
+  "REMINDERS": "Perkujtimet ",
+  "Reminders": "Perkujtimet ",
+  "Reminder Date": " Data e kujteses",
+  "Notification Type": " Tipi I njoftimit",
+  "Reminder Type": " Tipi I perkujtimit",
+  "Prior Notification(Days)": "Njoftimi paraprak ",
+  "Additional notes": "Shenimet shtese",
+  "SEARCH": "Kerko",
+  "Live Tracking": "Live tracking",
+  "History Tracking": "Historia e gjurmimit",
+  "Vehicle History": "Historia e vetures",
+  "Generate History": "Gjenero historin",
+  "Play History": "Fillo historin",
+  "Select device": "Zgjidh paisjen",
+  "Please choose a device": "Ju lutem zgjidhni paisjen",
+  "OK": "OK",
+  "GEOFENCE": " Zona gjeografike",
+  "Grid view": "Pamja ne rrjet",
+  "List view": "Pamja ne list",
+  "Geo Fencing Name": "Emri I zones gjeografike",
+  "Geofence type": "Tipi I zones gjeografike",
+  "Enter Alert": "Fut alarmin",
+  "Exit Alert": "Ndal alarmin",
+  "Geofence Search": "Kerko zonen gjeografke",
+  "Add Geofence": " Shto zone gjeografike ",
+  "Select group": " Zjidh grupin",
+  "GEO FENCE NAME": "Emri I zones gjeografike",
+  "Get Alert on": "Merrni njoftim ne ",
+  "Entering": "Duke hyr",
+  "Exiting": " Duke dal",
+  "Create": " Krijo",
+  "Select Your Geo Fence Region": "Zgjidh regjionin e zones gjeografike",
+  "Add Geo Fence": "Shto zone gjeografike",
+  "Total Distance(Km)": " Distanca totale (Km) ",
+  "Fuel consumption(Litre)": " Konsumimi I karburantit (Liter) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " Jashte rrjetit",
+  "No GPS(Hr:Min:Sec)": " Nuk ka gps",
+  "Daily Report": " Raporti ditor ",
+  "Daily Reports": " Raportet ditore ",
+  "Trips": "Udhetimet ",
+  "Max Speed(Km/hr)": "Shpejtesia maksimale",
+  "My App": " Aplikacioni",
+  "AC Report": "Raporti I  AC ",
+  "AC Reports": "Raporti I AC ",
+  "Loading": "Duke u ngarkuar",
+  "Vehicle": "Vetura",
+  "Load Management": " Menaxhimi i ngarkeses ",
+  "TOTAL VEHICLES": "Te gjitha veturat",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "Paneli I perdoruesit",
+  "RULES": "Rregullat",
+  "Alert Report": "Raporti I njoftimit ",
+  "No": "Jo",
+  "Date": "Data",
+  "Power Cut": "Nderprerje e energjise ",
+  "Battery": "Bateria",
+  "Geofencing": "Zona gjeografike",
+  "Overspeeding": " Tejkalimi I shpejtesis",
+  "Daywise Report": "Raporti ditor  ",
+  "Daywise Reports": " Raporti ditor",
+  "Filter Report": " Raporti I filtrit",
+  "Fuel Consumption Report": " Raporti I konsumimit te karburantit",
+  "Fuel Consumption Reports": " Raporti I konsumimit te karburantit ",
+  "Vehicle name": " Emri I vetures",
+  "Start Time": "Koha e startimit ",
+  "End Time": " Koha e mbarimit",
+  "Fuel Consumed (L)": " Konsumimiti karburantit",
+  "Distance(Kms)": "Distanca (Kms)",
+  "In event count": "",
+  "Out event count": "Out out count",
+  "Start Location": "Lokacioni I fillimit",
+  "End Location": "Mbarimi I lokacionit",
+  "Click to get device's last location": "Kliko per ta shikuar lokacionin e fundit",
+  "SOS Report": "Sos Raporti",
+  "Vehicle No.": "Nr I vetures",
+  "Time": "Koha",
+  "Address": "Adresa",
+  "Speed variation": "Ndryshimi I shpejtesise",
+  "Total K.M": "Totali K.M",
+  "Generate Graph": "Gjenero grafikun",
+  "Driver's Performance Report": " Raporti i Performances se Shoferit ",
+  "Total trip": "Udhetimi tota;",
+  "Total Ontime trip": "",
+  "Ontime vehicles": "Automjetet ne kohe",
+  "group": "Grupet",
+  "TRACKER": "Gjurmuesi ",
+  "REPORTS": "Raportet ",
+  "Speed Variation": " Ndryshimi I shpejtesise ",
+  "Trip Report": " Raporti I udhetimit",
+  "Summary Report": " Permbledhja e raportit ",
+  "Summary Reports": " Permbledhja e raportit ",
+  "Overspeeding Report": " Raporti I tejkalimit te shpejtesis",
+  "Overspeeding Reports": " Raporti I tejkalimit te shpejtesis ",
+  "Route Violation Report": " Raporti i Shkeljes se Rruges ",
+  "Route Violation Reports": " Raporti i Shkeljes se Rruges ",
+  "Stoppage Report": " Raporti I ndalesave",
+  "Stoppage Reports": "Raporti I ndalesave ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " raporti i distances ",
+  "Distance Reports": " raporti i distances ",
+  "Driver's performance": " Performanca e shoferit ",
+  "VEHICLE TYPE": " Tipi I vetures",
+  "ROUTE LIST": " Lista e rruges",
+  "Route list": " Lista e rruges",
+  "ROUTE MAPPING": "Mapimi I rruges",
+  "Route Mapping": " Mapimi I rruges",
+  "Dealer Account": " Llogaria e tregtarit",
+  "Geofencing Report": " Raporti I zones gjeografike",
+  "Geofencing Reports": " Raportet e zones gjeografike",
+  "Select Geofencing": "Zgjidh zonen gjeografike ",
+  "Vehicle Name": " Emri I vetures ",
+  "In/Out": "Brenda/jashte ",
+  "Datetime": " Data ",
+  "Location": "Lokacioni",
+  "GeoFence Name": " Emri I zones gjeografike ",
+  "Click here to get address": "Kliko per ta marr adresen",
+  "Select Your Device": "Zgjidh paisjen ",
+  "IDLE REPORT": "Raporti ne ler ",
+  "Select Vehicle": "Zgjidh veturen",
+  "Min Idle Time (Min)": " ",
+  "Duration (HH:MM:SS)": "Kogezgjatja",
+  "AC Status": "Statusi I AC",
+  "TRACKERS": "Gjurmuesit",
+  "Date Time": "Koha",
+  "On/Off": "On / Off",
+  "Overspeed": "Tejkalimi I shpejtesis",
+  "POI name": "POI name",
+  "Arrival Time": "Koha e arritjes",
+  "Departure Time": "Koha e nisjes",
+  "Route": "Rruga",
+  "POI Report": "Raporti I POI",
+  "From Time": " Prej ",
+  "To Time": "Deri ne ",
+  "Duration": "Kohezgjatja ",
+  "Start Point": "Pika e startimit",
+  "End Point": " Pika e mbarimit",
+  "Total KM": "Km totale ",
+  "Fuel Consumption (Litre)": "Konsumimi I karburantit ",
+  "Total Running Time (HH:MM)": "Koha totale e levizjes",
+  "Total Stop Time (HH:MM)": " Koha totale e ndaleses ",
+  "Total Idle Time (HH:MM)": " Koha totale ne ler ",
+  "Total Out of reach Time (HH:MM)": "Koha totale jasht rrjetit",
+  "Total No gps Time (HH:MM)": "Koha totale pa gps",
+  "Overspeeding (HH:MM)": "Tejkalimi I shpejtesis",
+  "Route Violation": " Shkelja e Itinerarit",
+  "TRAVEL PATH REPORT": " Raporti  I rruges se udhetimit",
+  "Travel Path Reports": " Raporti  I rruges se udhetimit ",
+  "Device": "Paisje",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "Distanca K.M",
+  "Cumulative Distance (K.M.)": " Distanca Kumulative ",
+  "TRIP REPORT": "Raporti I udhetimit",
+  "Trip Reports": " Raporti I udhetimit ",
+  "TRIP ID": "ID e udhetimit",
+  "VEHICLE NAME": "Emri I vetures",
+  "SOURCE ADDRESS": "Burimi I adreses",
+  "DESTINATION ADDRESS": "Adresa e destinacionit",
+  "DISTANCE": "Distanca",
+  "DURATION": "Kohezgjatja",
+  "TRIP STATUS": "Statusi I udhetimit",
+  "MILEAGE": "Kilometrazha",
+  "ADD EXPENSES": "Shto shpenzime",
+  "EXPENSES LIST": "Lista e shpenzimeve",
+  "Amount": "Shuma",
+  "Currency": "Valuta",
+  "Payment Mode": " Menyra e pageses ",
+  "Expense type": " Lloji i shpenzimeve",
+  "GEO FENCING": "Zona gjeografike",
+  "ADD DEVICE": "Shto paisje",
+  "GENERAL SETTING": "Cilesimet gjenerale",
+  "Device ID *": "ID e paisjes",
+  "Enter Device ID": "Shkruj ID e paisjes",
+  "Device Name * ": "Emri I paisjes",
+  "Enter Device Name": "Shkruaj emrin e paisjes",
+  "SIM Number": "Numri I karteles",
+  "SIM Number 2": "Numri I karteles 2",
+  "SIM Provider 2": "Provajderi I karteles se dyte",
+  "Integration ID": "ID e integrimit",
+  "Select User": "Zgjidhe perdoruesin",
+  "Driver Contact Number": " Numri i Kontaktit te Shoferit",
+  "Select Vehicle type*": " Zgjidhni llojin e automjetit ",
+  "Type of Vehicle": "Lloji I vetures",
+  "mm/dd/yyyy": "Muaj / Data / Viti",
+  "ICCICD Number": "Numri ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "ID unike",
+  "CID number": "Numri CID",
+  "Chassis number": "Numri I shasis",
+  "Comapny Name": "Emri I kompanis",
+  "Company Address": "Adresa e kompanis",
+  "Transport Office City": " Zyra e Transportit Qyteti ",
+  "Transport Office State": " Zyra e Transportit ne Shtet ",
+  "Invoice Number": " Numri i fatures ",
+  "Number of SOS": " Numri i SOS ",
+  "Doc Type": "Tipi I dokumentit",
+  "Enter SIM Provider": "Futni provajderin e karteles",
+  "Enter SIM Provider 2": "Futni provajderin e karteles se dyte",
+  "Driver's contact number": " Numri i kontaktit te shoferit ",
+  "Device model *": "Modeli I paisjes ",
+  "Vehicle type * ": "Lloji I vetures",
+  "Expiration date": " Data e skadimit",
+  "Engine number": "Numri I motorit",
+  "Type of Vehicle ": "Lloji I vetures",
+  "Manufacturing company": "Kompania prodhuese ",
+  "Registration date ": " Data e regjistrimit ",
+  "Date of Manufacturing Year ": " Data e Vitit te Prodhimit ",
+  "Last fitness date ": " Data e fundit",
+  "ICCICD Number ": "ICCICD Numri ",
+  "Fitment Date ": " Data e pajisjes",
+  "IMSI ": " IMSI ",
+  "Unique ID ": " ID unike ",
+  "CID number ": "Numri CID",
+  "Chassis number ": "Numri I shasis",
+  "Comapny Name ": "Emri I kompanis",
+  "Comapny Address": "Adresa e kompanis",
+  "Invoice number": "Numri I fatures",
+  "Invoice Date": "Data e fatures",
+  "No. of SOS ": " Nr. I SOS ",
+  "Add Document field": " Shto fushen e Dokumentit",
+  "Document issued date :": "Data e leshimit te dokumentit",
+  "UPDATE AND SAVE": "Perditso dhe ruaj",
+  "Reason": "Ruaj",
+  "Password": "Fjalekalimi",
+  "Driver Search": "Kerkimi I shoferit",
+  "Enter User Id": " Kerkimi i shoferit ",
+  "Enter First name": "Fute Emrin",
+  "Enter Last name": "Fute mbiembrin",
+  "Enter email": "Fute emailin",
+  "Enter mobile number": "Fute numrin e telefonit",
+  "Enter Address": "Fute adresen",
+  "EDIT CUSTOMER": "Edito klientin ",
+  "Delete Dealer": "Fshi tregtarin",
+  "Documents": " Dokumentet",
+  "Document Name": " Emri I dokumentit",
+  "Document number": " Numri I dokumentit ",
+  "Action": "Aksion ",
+  "Add": "Shto",
+  "Upload Documents *": "Ngarko dokument",
+  "Save": " Ruaj",
+  "delete": " Fshi",
+  "Doc number": " Numri I dokumentit",
+  "Download": "Shkarko",
+  "Yes, Delete it!": "Po,fshi",
+  "Cancel": "Anullo",
+  "EDIT DEALER": " Edito tregtarin ",
+  "Are you sure ?": "A jeni te sigurte",
+  "you want to delete dealer": " A deshironi ta fshini tregtarin",
+  "Edit Model": "Edito modelin",
+  "Enter device model": " Fute modelin e paisjes",
+  "Configuration command": " Komanda e konfigurimit ",
+  "Location command": "Lokacioni I komandes",
+  "Imobilizer command": " Komanda e imobilizuesit ",
+  "Resume command": " Rifillo komanden ",
+  "Reset command": "Reseto komanden",
+  "Manufacturer": " Prodhuesi ",
+  "Server Command": "Komanda e serverit",
+  "Mobile Command": " Komanda mobile ",
+  "Update": "Azhurnoni",
+  "Edit trip details": " Redakto detajet e udhetimit",
+  "Route name": " Emri i itinerarit",
+  "Vehicles name": "Emri I veturave ",
+  "Radius (in meter)": "Radius",
+  "Driver name": " Emri i shoferit ",
+  "Loading site": " Vendi po ngarkohet ",
+  "Unloading site": " Faqja e shkarkimit ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": "Emri I paisjes",
+  "Days: ": "Ditet ",
+  "M": "E hene ",
+  "T": " E marte",
+  "W": "E merkure",
+  "Th": "E ejnte",
+  "F": "E premte",
+  "Sa": "E shtune",
+  "S": "E diel",
+  "Edit Vehicle Type": " Redakto Llojin e Automjetit",
+  "Brand:": "Lloji",
+  "Enter Brand Name": "Futni emrin e brendit",
+  "Description:": "Pershkrimi",
+  "Enter Description": "Futni pershkrimin",
+  "Please Enter Description": "Ju lutem futni pershkrimin",
+  "Select icon type": "Zgjidhni tipin e ikones",
+  "Voltage Value": " Vlera e tensionit ",
+  "Fuel value": " Vlera e karburantit ",
+  "add": "Shto ",
+  "Volatage Calibrator": " Kalibruesi i tensionit ",
+  "Please Enter voltage": " Ju lutemi futni vleren e karburantit",
+  "Please fuel value": " Please fuel value",
+  "Please Enter Tank Size": "Ju lutemi shkruani Madhesine e Rezervuarit ",
+  "FUEL EVENTS": " NGJARJET E KARBURANT ",
+  "Please Enter Mileage": " Ju lutemi shkruani kilometrazhin ",
+  "Fuel Change (L)": " Ndryshimi i karburantit (L)",
+  "Search Device": " Kerko paisjes ",
+  "Generate Report": " Gjenero raportin",
+  "Sleep Mode Temprature": "Temperatura ne sleep mode ",
+  "Temprature": " Temperatura",
+  "ON": "On",
+  "OFF": "Off",
+  "list": " Lista",
+  "Enter GEO FENCE NAME": "Futni emrin e zones gjeografike",
+  "Get Alert on :": " Merrni Njoftim ne ",
+  "Select Your Geo Fence Region": "Zgjidhni regjionin e zones gjeografike",
+  "Search Box": "Kerko kutin ",
+  "--Select group--": "Zgjidhni",
+  "--Geofence type--": "Lloji I zones gjeografike",
+  "--GEO FENCE NAME--": "Emri I zones gjeografike",
+  "close": "Mbylle",
+  "DEVICES": " Paisjet",
+  "Matrix Input": "Futja e matrices",
+  "Device Id-": "ID e paisjes",
+  "Matrix Name": " Emri I matrices",
+  "Topic": "Tema",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": " Tensioni i karburantit ",
+  "Real Time GPS Based Vechicle Tracking": " Ndjekja e Automjeteve e Bazuar ne GPS ne kohe Reale ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": " Ndjekja e Automjeteve Drejtperdrejt ju jep azhurnime ne kohe reale, duke ju lejuar te merrni informacionin me te fundit te gjurmimit ne automjetin tuaj.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": " Hartat e ndermarrjeve nga Google-API per perdorim komercial qe japin detaje te sakta te vendndodhjes se automjeteve ",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": " Sistem gjurmimi miqesor per perdoruesit qe ju ndihmon te gjurmoni dhe lokalizoni floten pa mundim ne Kliko ",
+  "Software as a Service(Saas) with perpetual uptime.": " Softueri si Sherbim (SAS) me kohe te perhershme ",
+  "Alerts and Event Notifications": " Sinjalizimet dhe njoftimet e ngjarjes ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " Merrni njoftime ndezur ndersa jeni ne levizje ne SMS dhe email dhe aplikacionin Mobile, ju do te azhurnoheni me njoftime ne kohe reale ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " Perfituesit e shumte mund te marrin sinjalizime, Jo vetem ju, por edhe te afermit tuaj mund te njihen per sinjalizimet e krijuara per ndihme te menjehershme.",
+  "Schedule your alerts as per your convenience that suits your needs": " Planifikoni sinjalizimet tuaja sipas lehtesise qe ju pershtatet nevojave tuaja",
+  "Detailed Reports for analysis is also available for making quik decisions": " Raportet e hollesishme per analize jane gjithashtu ne dispozicion per te marre vendime te shpejta ",
+  "Geofences": "Zonat gjeografike",
+  "Geofence": "Zonat gjeografike",
+  "Upload all Geofence in your account and assign them to the vehicles.": " Ngarko te gjithe Zonat gjeografike ne llogarine tende dhe caktoji ato te  automjeteve.",
+  "Find and mark geofences without knowing latitude and longitude values.": " Gjeni dhe shenoni zonat gjeografike pa ditur vlerat e gjeresise dhe gjatesise ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "Zonat gjeografike ne dispozicion per qasje te lehte. Te gjitha zonat gjeografike mund te shenohen sipas bindjes se perdoruesit dhe mund t'u caktohen automjeteve ne menyre qe �do sinjalizim te jete I derguar. Siguroni te dashurit tuaj dhe siguroni punen e bere nga Forcat tuaja",
+  "Date and Time Based reports available for analyzing vehicle usage.": " Raportet e bazuara ne daten dhe kohen, te disponueshme per te analizuar perdorimin e automjetit.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": " Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": " Raport i konsoliduar i men�ur per automjetet / Flota. Ju jep permbledhjen e dites per automjetin (et)..",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " Raporti i alarmit, raport i konsoliduar per te gjitha sinjalizimet e krijuara nga automjeti. Mbingarkesa, nderhyrje, ndezje etj ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " Raporti i zones gjeografike, raport i detajuar se kur dhe ne cilen kohe automjeti hyri ne zonat gjeografike ",
+  "How it works": "Si punon",
+  "Real-time tracking": "Gjurmim ne kohe reale",
+  "Advanced Reporting": "Raporti I avancuar",
+  "Alerts & Warning": "Njoftim dhe paralajmerim",
+  "2-Way messaging": "Mesazhe me 2 menyra ",
+  "Engine immobilisation": " Imobilizimi i motorit ",
+  "Monitor gauges": " Matesit e monitorit ",
+  "Access anytime, anywhere!": " Hyni ne �do kohe, kudo ",
+  "Web browser-based software": " Softuer i bazuar ne shfletues uebi ",
+  "Android app": "Aplikacioni android",
+  "iPhone app": "Aplikacioni per Iphone",
+  "Request for Demo": "Kerko demo verzionin",
+  "Get Detail": "Merr detaje",
+  "Export To Excel": "Eksporto ne eksell",
+  "Loading Site": "Faqja eshte duke u ngarkuar",
+  "Distance": "Distanca",
+  "ETA": "ETA",
+  "directions": "Drejtimi",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "Harta",
+  "Please Select Your Device, From/To Date & Time to view history from above options": " Ju lutemi Zgjidhni Pajisjen Tuaj, Nga / Ne Data dhe Koha per te pare historikun nga opsionet e mesiperme ",
+  "Generate Map": "Gjenero harten",
+  "Trip Name": "Emri udhetimit",
+  "Select destination": " Zgjidh Destinacionin",
+  "CREATE TRIP": "Krijo udhetim",
+  "Total Distance: ": "Distanca",
+  "Idle Time (Min)": " Koha ne ler",
+  "Go to Site >": "Shko te faqja ",
+  "Welcome To OneQlik": " Mireseerdhet ne aktovis ",
+  "Login": " Hyrja ",
+  "Username / Phone Number": " Emri i perdoruesit / numri i telefonit",
+  "Enter Mobile number*": " Vendosni numrin e celularit ",
+  "Confirm New Password": "Konfirmoni fjalekalimin e ri ",
+  "Send OTP": " Dergo OTP",
+  "Back to Login": " Kthehu tek Login ",
+  "Back to previous Form": " Kthehu tek formulari i meparshem ",
+  "Forgot Username / Password?": " Keni harruar emrin e perdoruesit / fjalekalimin ",
+  "First Name": " Emri",
+  "Last Name": "Mbiemri",
+  "Email Id": "Id e emailit",
+  "Organisation": "Organizata",
+  "notifications": "Njftimet",
+  "Notification Sound": "Zeri I njoftimeve",
+  "Notifications": "Njoftimet",
+  "Add Phone": "Shto Telefonin",
+  "Close": "Mbylle",
+  "Add Email": "Shto email",
+  "POI details": "Detajet e POI",
+  "Add POI details": "Shto detajet e POI",
+  "Type POI name": " Shkruaj emrin e POI ",
+  "Previous point duration": " Kohezgjatja e pikes se meparshme ",
+  "Days": " Ditet",
+  "Hours": "Oret ",
+  "Minutes": "Minutat ",
+  "Next point duration": " Kohezgjatja e pikes tjeter ",
+  "Min": " Min ",
+  "Halt": "Ndalese ",
+  "Mapped Vehicles": " Automjete te pasqyruara ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": "Futni lokacionin ",
+  "ADD": "Shto ",
+  "Routes Search": " Kerkimi I rruges ",
+  "Route Status": "Statusi I rruges ",
+  "Source": "Burimi ",
+  "Destination": " Destinacioni",
+  "Test name": "Emri I proves",
+  "Test Source": "Emri I burimit",
+  "Test destination": "Destinacioni I proves",
+  "Routes": " Rruget ",
+  "Untracked vehicles": " Veturat e pagjurmuara",
+  "Please Enter Email ID / Phone Number": " Ju lutemi shkruani ID-ne e emailit / numrin e telefonit ",
+  "Please Re Enter Password": " Ju lutem Ri Futni Fjalekalimin ",
+  "Delete route": "Fshi ruten",
+  "Are you sure to delete this route ??": " Jeni i sigurt qe do ta fshini kete itinerar ",
+  "DELETE": "Fshi",
+  "Create Trip": "krijo udhetim",
+  "One way trip": "Udhetim nje drejtimesh",
+  "Two way trip": "Udhetim dy drejtimesh ",
+  "Round trip": "Udhetim vatje ardhje ",
+  "Start Date/Time": " Fillimi Data/Koha",
+  "End Date/Time": " Mbarimi Data/Koha",
+  "Planned start time": " Koha e planifikuar e fillimit ",
+  "Planned end time": " Koha e planifikuar e perfundimit ",
+  "Actual start time": " Koha aktuale e fillimit ",
+  "Actual end time": " Koha aktuale e perfundimit ",
+  "Trip History": " Historia e Udhetimit",
+  "Admin Account": " Llogaria e administratorit ",
+  "Trip type": " Lloji i udhetimit",
+  "Routes name": " Emri i rrugeve ",
+  "Total Distance": " Distanca totale ",
+  "Get route": " Merrni itinerarin ",
+  "Parameters": "Parametrat",
+  "Enter First Name": "Futni Emrin",
+  "Enter Last Name": "Futni Mbiemrin",
+  "Invalid Password": "Fjalekalim jovalid",
+  "Confirm Password": "Konfirmo fjalekalimin",
+  "Please Enter Confirm Password": "Konfirmoni fjalekalimin",
+  "Organisation Name": "Emri I organizates",
+  "Type of user": " Lloji i perdoruesit ",
+  "Mobile Verification": "Verifikimi permes celularit",
+  "Mobile Number": "Numri I celularit",
+  "TRIP HISTORY": " historia e udhetimit ",
+  "Event name": "Emri I eventit",
+  "Event time": "Koha e eventit",
+  "Driver": " Shoferi ",
+  "Token": "Token",
+  "Restore": "Rikthe",
+  "Delete Permanently": "Fshi perkohsisht",
+  "Select no of Days to get reminder for your services": " Zgjidhni Ditet per te marre kujtese per sherbimet tuaja ",
+  "Prior Notification (Days)": " Njoftimi paraprak (Ditet) ",
+  "Enter Additonal information here...": "Vendosni informacione shtese",
+  "Calibration": " Kalibrimi"
+}
\ No newline at end of file
diff --git a/src/assets/i18n/new_lan.json b/src/assets/i18n/new_lan.json
new file mode 100644
index 0000000..577474c
--- /dev/null
+++ b/src/assets/i18n/new_lan.json
@@ -0,0 +1,650 @@
+{
+  "ADMIN": "مسؤول",
+  "DASHBOARD": "لوحة التحكم",
+  "Admin": "مسؤول",
+  "GROUPS": "مجموعات",
+  "VEHICLES": "سيارات",
+  "Account Setting": "إعدادات الحساب",
+  "General Setting": "إعدادات عامة",
+  "Application language": "لغة التطبيق",
+  "Language Setting": "إعدادات اللغة",
+  "Reset Password": " إعادة تعيين كلمة المرور ",
+  "Notification Settings": "إعدادات الاشعارات",
+  "TRACKING": "تتبع",
+  "Tracking": "تتبع",
+  "Reports": "التقارير",
+  "POI LIST": "قائمة العلامات",
+  "POI List": "قائمة العلامات",
+  "ROUTES": "الطرق",
+  "NOTIFICATIONS": "الإشعارات",
+  "DISTRIBUTERS": "الموزعين",
+  "DEALERS": "وكلاء",
+  "Dealers": "وكلاء",
+  "CUSTOMERS": "العملاء",
+  "Customers": "العملاء",
+  "RUNNING": "متحرك",
+  "IDLE": "خامل",
+  "IDLE Reports": "تقرير الخمول",
+  "STOPPED": "توقفت",
+  "EXPIRED": "منتهية الصلاحية",
+  "OUT OF REACH": " خارج الخدمة ",
+  "NO GPS": " خارج التغطية ",
+  "Device Icon": " رمز الجهاز ",
+  "Registration number": " رقم التسجيل ",
+  "Group": " المجموعة ",
+  "Today's ODO": " ODO اليوم ",
+  "Total ODO": " ODO الإجمالي ",
+  "Last location": "  اخر موقع ",
+  "Last updated on": " آخر تحديث في ",
+  "Trip status": " حالة الرحلة ",
+  "Status": "الحالة",
+  "Satellites": "الأقمار الصناعية",
+  "Last Speed": "آخر سرعة",
+  "FUEL (LITRE)": "الوقود في لتر",
+  "GPS": "القمر الصناعي",
+  "AC": "مكيف الهواء",
+  "Fuel Reports": "تقرير الوقود",
+  "POWER": "مصدر الطاقة",
+  "GSM Signal": "إشارة GSM",
+  "IGNITION": "المحرك",
+  "NOTIFICATION": "الإشعار",
+  "My Account": "حسابي",
+  "Log Out": "تسجيل الخروج",
+  "Refresh Data": "تحديث البيانات",
+  "Device Search": "البحث عن الأجهزة",
+  "Previous": "السابق",
+  "Next": "التالي",
+  "DRIVER MASTER": "السائق",
+  "Driver Master": " السائق",
+  "DEVICE MODEL": "نموذج الجهاز",
+  "VEHILE TYPE": "نوع السيارة",
+  "Maintenance Reminder": " تذكير صيانة ",
+  "Vehicle Expense": "مصروفات المركبة",
+  "Message Utility": "خدمات الرسائل",
+  "Sensor Detail": "تفاصيل المستشعر",
+  "Billing Detail": "تفاصيل الفواتير",
+  "USER MASTER": "المستخدم",
+  "User Master": "المستخدم",
+  "DEVICE MASTER": "الجهاز",
+  "Device Master": "الجهاز",
+  "System Logs": "سجلات النظام",
+  "GPS TRACKER": "التتبع",
+  "CMD PACKETS": " حزم الأوامر",
+  "CMD Packets": " حزم الأوامر",
+  "INVENTORY LIST": "قائمة الجرد",
+  "Inventory List": "قائمة الجرد",
+  "CUSTOMER INQUIRY": " استفسار العميل",
+  "Driver Name": "اسم السائق",
+  "Driver Address": "عنوان السائق",
+  "Driver Status": "حالة السائق",
+  "License Number": "رقم الترخيص",
+  "Salary": "الراتب",
+  "DOJ": "تاريخ الانضمام",
+  "Delete": "حذف",
+  "Device Type": "نوع الجهاز",
+  "Configuration Command": "اوامر الاعدادات",
+  "Location Command": "اوامر الموقع",
+  "Immobilzer Command": "اوامر منع الحركة",
+  "Resume Command": " استئناف الأوامر ",
+  "Reset Command": " إعادة تعيين الأوامر ",
+  "Immobilzer Type": " نوع منع الحركة ",
+  "Port": " المنفذ ",
+  "Edit": " تحرير ",
+  "Brand": " العلامة التجارية ",
+  "Description": " الوصف ",
+  "Model": " الموديل ",
+  "Icon Type": " نوع الأيقونة ",
+  "Voltage Calibration": " معايرة الجهد ",
+  "Tank Size": " حجم الخزان ",
+  "Mileage": " الأميال ",
+  "Last Modified": " التعديل الأخير ",
+  "Search by phone": " البحث عن طريق الهاتف ",
+  "Search by name": " البحث عن طريق الاسم ",
+  "From Date": " من تاريخ ",
+  "To Date": " إلى تاريخ ",
+  "FIND": " بحث ",
+  "Show": " إظهار ",
+  "entries": " الإدخالات ",
+  "Name": " الاسم ",
+  "Dealer": "التاجر",
+  "Is Dealer": "هو التاجر",
+  "Created on": "تم الإنشاء",
+  "Email": "البريد الإلكتروني",
+  "Phone": "الهاتف",
+  "Device Name": "اسم الجهاز",
+  "Device Id": "معرف الجهاز",
+  "User": "المستخدم",
+  "Expire On": "انتهاء الصلاحية",
+  "Fuel Voltage(mv)": "فولطية الوقود (الميليفولت)",
+  "Sim Number": " رقم السيم كارد ",
+  "Today ODO": " عدد الكيلومترات في اليوم ",
+  "Search by Device ID": " البحث عن طريق معرف الجهاز ",
+  "Certificates": " الشهادات ",
+  "Export Pdf": " تصدير بي دي إف ",
+  "Search by Sim Number": " البحث عن طريق رقم السيم كارد ",
+  "Export EXCEL": " تصدير اكسل ",
+  "Device IMEI": " معرف الجهاز ",
+  "Lattitude": " خط العرض ",
+  "Longitude": "خط الطول",
+  "Speed": "السرعة",
+  "Device Time": "وقت الجهاز",
+  "Insertion Time": "وقت الاضافة",
+  "Last Push": "الدفعة الأخيرة",
+  "Integration Respnse": "استجابة التكامل",
+  "Ignition": "التشغيل",
+  "Power": "مصدر الطاقة",
+  "Ext. Volt": "تحويلة فولت",
+  "Fuel Volt": "فولت الوقود",
+  "Sattelite": "الاقمار الصناعية",
+  "Powercut Alarm": " إنذار انقطاع مصدر الطاقة ",
+  "Inquiry Date": " تاريخ الاستفسار ",
+  "Customer Name": " اسم العميل ",
+  "Message": " رسالة ",
+  "Assigned To": " تم تعيينه إلى ",
+  "Role": " وضيفة ",
+  "No data available in table": " لا توجد بيانات متاحة في الجدول ",
+  "Showing": " عرض ",
+  "Costumer Inquiry": " استفسار العميل ",
+  "System Date": " تاريخ النظام ",
+  "Vehicle Number": " رقم المركبة ",
+  "Chassis Number": " رقم الهيكل ",
+  "Engine Number": " رقم المحرك ",
+  "Device Model": " طراز الجهاز ",
+  "VLT No.(IMEI)": " رقم VLT (IMEI) ",
+  "VLT SIM(IDEA)": " VLT SIM (IDEA) ",
+  "VLT SIM(BSNL)": " VLT SIM (BSNL) ",
+  "Approving RTO": " الموافقة على RTO ",
+  "Owner Number": " رقم المالك ",
+  "Alternate Number": " الرقم البديل ",
+  "Dealer Name": " اسم البائع ",
+  "Tracking Software": " برنامج التتبع ",
+  "Costumer Name": " اسم العميل ",
+  "Device ID": " معرف الجهاز ",
+  "Operator Name": " اسم المشغل ",
+  "Protocol ID": " معرف البروتوكول ",
+  "Command": " الأوامر ",
+  "ACC": " نظام تثبيت السرعة ",
+  "Battery Status": "حالة البطارية",
+  "GPS DATA": "بيانات الاقمار الصناعية",
+  "DEVICES MASTER": "الجهاز",
+  "Groups": "مجموعات",
+  "Add Group": "إضافة مجموعة",
+  "Type group name": "اكتب اسم المجموعة",
+  "CONFIRM": "تاكيد",
+  "CANCEL": "الغاء",
+  "Active": "نشط",
+  "InActive": "غير نشط",
+  "Vehicles": "مركبات",
+  "Reg. Number": "رقم التسجيل",
+  "IMEI": "IMEI",
+  "Int. ID": "المعرف الدولي",
+  "SIM 1": "SIM 1",
+  "SIM Provider": "مجهز خدمة السيم كارد",
+  "SIM2": "SIM2",
+  "Vehicle Type": "نوع المركبة",
+  "Owner": "المالك",
+  "IDLING Since": "خاملة منذ",
+  "STOPPED Since": "متوقفة منذ",
+  "RUNNING Since": " تعمل منذ ",
+  "Video Tutorial": " فيديو تعليمي ",
+  "VEHICLE LIST": " قائمة السيارات ",
+  "Vehicle List": " قائمة السيارات ",
+  "MAINTENANCE REMINDER": " تذكير صيانة ",
+  "REMINDERS": " تذكير ",
+  "Reminders": " تذكير ",
+  "Reminder Date": " تاريخ التذكير ",
+  "Notification Type": " نوع الاشعار ",
+  "Reminder Type": " نوع التذكير ",
+  "Prior Notification(Days)": " إشعار مسبق (أيام)",
+  "Additional notes": "الملاحظات الإضافية",
+  "SEARCH": "بحث",
+  "Live Tracking": "التتبع المباشر",
+  "History Tracking": "سجل الحركة",
+  "Vehicle History": "سجل المركبات",
+  "Generate History": "اصنع التاريخ",
+  "Play History": "سجل التشغيل",
+  "Select device": "اختر الجهاز",
+  "Please choose a device": "الرجاء اختر جهازًا , أو, ",
+  "OK": "OK",
+  "GEOFENCE": " السياجات الجغرافية",
+  "Grid view": "عرض شبكي",
+  "List view": "عرض القائمة",
+  "Geo Fencing Name": "الاسم الجغرافي",
+  "Geofence type": "نوع السياج الجغرافي",
+  "Enter Alert": "تنبيه الدخول",
+  "Exit Alert": "تنبيه الخروج",
+  "Geofence Search": "البحث الجغرافي",
+  "Add Geofence": " إضافة السياج الجغرافي ",
+  "Select group": " تحديد مجموعة ",
+  "GEO FENCE NAME": " اسم السياج الجغرافية ",
+  "Get Alert on": " الحصول على حالة اشعار في حال ",
+  "Entering": " دخول ",
+  "Exiting": " الخروج ",
+  "Create": " خلق ",
+  "Select Your Geo Fence Region": " حدد منطقة السياج الجغرافي ",
+  "Add Geo Fence": "إضافة جدار جغرافي",
+  "Total Distance(Km)": " المسافة الكلية ",
+  "Fuel consumption(Litre)": " الوقود (لتر) ",
+  "Ignition ON Time(Hr:Min)": " وقت تشغيل المحرك (ساعة: دقيقة) ",
+  "Ignition OFF Time(Hr:Min)": " وقت إيقاف المحرك (ساعة: دقيقة) ",
+  "Idle Time(Hr:Min)": " وقت الخمول (ساعة: دقيقة) ",
+  "Out of reach(Hr:Min)": " بعيد عن التغطية ( ساعة: دقيقة) ",
+  "No GPS(Hr:Min:Sec)": " لا GPS (ساعة: دقيقة: ثانية) ",
+  "Daily Report": " التقرير يومي ",
+  "Daily Reports": " التقرير يومي ",
+  "Trips": " الرحلات ",
+  "Max Speed(Km/hr)": " سرعة قصوى (كم / ساعة) ",
+  "My App": " تطبيقي ",
+  "AC Report": " تقرير AC ",
+  "AC Reports": " تقرير AC ",
+  "Loading": " تحميل ",
+  "Vehicle": "مركبة",
+  "Load Management": "إدارة الحمل",
+  "TOTAL VEHICLES": "مجموع المركبات",
+  "ON Time": "وقت التشغيل",
+  "OFF Time": "وقت الإيقاف",
+  "Dashboard": "لوحة التحكم",
+  "RULES": "القواعد",
+  "Alert Report": "تقرير التنبيهات",
+  "No": "لا",
+  "Date": "التاريخ",
+  "Power Cut": "انقطاع الطاقة",
+  "Battery": "البطارية",
+  "Geofencing": "تحديد الموقع الجغرافي",
+  "Overspeeding": " السرعة الزائدة ",
+  "Daywise Report": " تقارير الحكمة اليوم ",
+  "Daywise Reports": " تقارير الحكمة اليوم ",
+  "Filter Report": " تقرير المرشحات ",
+  "Fuel Consumption Report": " تقرير استهلاك الوقود ",
+  "Fuel Consumption Reports": " تقرير استهلاك الوقود ",
+  "Vehicle name": " اسم المركبة ",
+  "Start Time": " وقت البدء ",
+  "End Time": " وقت الانتهاء ",
+  "Fuel Consumed (L)": " استهلاك الوقود (L) ",
+  "Distance(Kms)": "المسافة (Kms)",
+  "In event count": "في عدد الأحداث",
+  "Out event count": "Out out count",
+  "Start Location": "Start Location",
+  "End Location": "End Location",
+  "Click to get device's last location": "انقر للحصول على آخر موقع للجهاز",
+  "SOS Report": "تقرير SOS",
+  "Vehicle No.": "رقم المركبة",
+  "Time": "الوقت",
+  "Address": "العنوان",
+  "Speed variation": "تباين السرعة",
+  "Total K.M": "إجمالي KM",
+  "Generate Graph": "إنشاء رسم بياني",
+  "Driver's Performance Report": "تقرير أداء السائق",
+  "Total trip": "رحلة كاملة",
+  "Total Ontime trip": "رحلة مجموع الوقت الإضافي",
+  "Ontime vehicles": "مركبات ontime",
+  "group": "مجموعة",
+  "TRACKER": " TRACKER ",
+  "REPORTS": " REPORTS ",
+  "Speed Variation": " تباين السرعة ",
+  "Trip Report": " تقرير الرحلة ",
+  "Summary Report": " تقرير موجز عن الرحلة ",
+  "Summary Reports": " تقرير موجز عن الرحلة ",
+  "Overspeeding Report": " تقرير السرعة الزائدة ",
+  "Overspeeding Reports": " تقرير السرعة الزائدة ",
+  "Route Violation Report": " تقرير عن انتهاك الطريق ",
+  "Route Violation Reports": " تقرير عن انتهاك الطريق ",
+  "Stoppage Report": " تقرير التوقف ",
+  "Stoppage Reports": " تقرير التوقف ",
+  "Ignition Report": " تقرير وقت التشغيل ",
+  "Ignition Reports": " تقارير وقت التشغيل ",
+  "Distance Report": " تقرير عن المسافة المقطوعة ",
+  "Distance Reports": " تقرير عن المسافات المقطوعة ",
+  "Driver's performance": " تقرير عن اداء السائق ",
+  "VEHICLE TYPE": " نوع المركبة ",
+  "ROUTE LIST": " قائمة الطريق ",
+  "Route list": " قائمة الطريق ",
+  "ROUTE MAPPING": " ROUTE MAPPING ",
+  "Route Mapping": " رسم الخرائط الطريق ",
+  "Dealer Account": " حساب الموزع ",
+  "Geofencing Report": " تقرير Geofencing ",
+  "Geofencing Reports": " تقرير Geofencing ",
+  "Select Geofencing": " تحديد Geofencing ",
+  "Vehicle Name": " اسم المركبة ",
+  "In/Out": " In / Out ",
+  "Datetime": " التاريخ والوقت ",
+  "Location": " الموقع ",
+  "GeoFence Name": " GeoFence Name ",
+  "Click here to get address": " انقر هنا للحصول على العنوان ",
+  "Select Your Device": " حدد جهازك ",
+  "IDLE REPORT": " تقرير الخمول ",
+  "Select Vehicle": " حدد السيارة ",
+  "Min Idle Time (Min)": " وقت الخمول الأدنى (الحد الأدنى) ",
+  "Duration (HH:MM:SS)": " المدة (HH: MM: SS) ",
+  "AC Status": "حالة AC",
+  "TRACKERS": "TRACKERS",
+  "Date Time": "Date Time",
+  "On/Off": "On / Off",
+  "Overspeed": "Overpeed",
+  "POI name": "POI name",
+  "Arrival Time": "وقت الوصول",
+  "Departure Time": "وقت المغادرة",
+  "Route": "Route",
+  "POI Report": "تقرير الاماكن",
+  "From Time": " من وقت ",
+  "To Time": " إلى وقت ",
+  "Duration": " المدة ",
+  "Start Point": " نقطة البداية ",
+  "End Point": " نقطة النهاية ",
+  "Total KM": " إجمالي KM ",
+  "Fuel Consumption (Litre)": " استهلاك الوقود (لتر) ",
+  "Total Running Time (HH:MM)": " اجمالي وقت التشغيل (HH: MM) ",
+  "Total Stop Time (HH:MM)": " إجمالي وقت التوقف (HH: MM) ",
+  "Total Idle Time (HH:MM)": " إجمالي وقت الخمول (HH: MM) ",
+  "Total Out of reach Time (HH:MM)": " إجمالي وقت الوصول (HH: MM) ",
+  "Total No gps Time (HH:MM)": "إجمالي وقت الخروج عن التغطية (HH: MM)",
+  "Overspeeding (HH:MM)": "السرعة الزائدة (HH: MM)",
+  "Route Violation": "خرق الطريق",
+  "TRAVEL PATH REPORT": "تقرير مسار السفر",
+  "Travel Path Reports": "تقرير مسار السفر",
+  "Device": "الجهاز",
+  "ODO (K.M.)": "ODO (KM)",
+  "Distance (K.M.)": "المسافة (KM)",
+  "Cumulative Distance (K.M.)": "المسافة التراكمية (KM)",
+  "TRIP REPORT": "تقرير الرحلة",
+  "Trip Reports": "تقرير الرحلة",
+  "TRIP ID": "معرف الرحلة",
+  "VEHICLE NAME": "اسم المركبة",
+  "SOURCE ADDRESS": "عنوان المصدر",
+  "DESTINATION ADDRESS": "عنوان الوجهة",
+  "DISTANCE": "المسافة",
+  "DURATION": "المدة",
+  "TRIP STATUS": "رحلة الرحلة",
+  "MILEAGE": "الأميال",
+  "ADD EXPENSES": "إضافة مصاريف",
+  "EXPENSES LIST": "قائمة المصاريف",
+  "Amount": "المبلغ",
+  "Currency": "العملة",
+  "Payment Mode": "وضع الدفع",
+  "Expense type": "نوع النفقات",
+  "GEO FENCING": "GEO FENCING",
+  "ADD DEVICE": "إضافة جهاز",
+  "GENERAL SETTING": "اعدادات عامة",
+  "Device ID *": "معرف الجهاز *",
+  "Enter Device ID": "أدخل معرف الجهاز",
+  "Device Name * ": "اسم الجهاز *",
+  "Enter Device Name": "أدخل اسم الجهاز",
+  "SIM Number": "رقم بطاقة SIM",
+  "SIM Number 2": "رقم بطاقة SIM 2",
+  "SIM Provider 2": "مزود بطاقة SIM 2",
+  "Integration ID": "معرّف التكامل",
+  "Select User": "حدد مستخدم",
+  "Driver Contact Number": "رقم السائق",
+  "Select Vehicle type*": "حدد نوع السيارة *",
+  "Type of Vehicle": "نوع السيارة",
+  "mm/dd/yyyy": "mm / dd / yyyy",
+  "ICCICD Number": "رقم ICCICD",
+  "IMSI": "IMSI",
+  "Unique ID": "المعرف الفريد",
+  "CID number": "رقم CID",
+  "Chassis number": "رقم الشاصي",
+  "Comapny Name": "اسم الشركه",
+  "Company Address": "عنوان الشركة",
+  "Transport Office City": "مدينة مكتب النقل",
+  "Transport Office State": "دولة مكتب النقل",
+  "Invoice Number": "رقم الفاتورة",
+  "Number of SOS": "رقم SOS",
+  "Doc Type": "نوع المستند",
+  "Enter SIM Provider": "أدخل مزود SIM",
+  "Enter SIM Provider 2": "أدخل مزود SIM 2",
+  "Driver's contact number": "رقم هاتف السائق ",
+  "Device model *": " طراز الجهاز * ",
+  "Vehicle type * ": " نوع السيارة * ",
+  "Expiration date": " تاريخ انتهاء الصلاحية ",
+  "Engine number": " رقم المحرك ",
+  "Type of Vehicle ": " نوع السيارة ",
+  "Manufacturing company": " الشركة المصنعة ",
+  "Registration date ": " تاريخ التسجيل ",
+  "Date of Manufacturing Year ": " تاريخ سنة التصنيع ",
+  "Last fitness date ": " تاريخ اللياقة البدنية الأخير ",
+  "ICCICD Number ": " رقم ICCICD ",
+  "Fitment Date ": " تاريخ الإعداد ",
+  "IMSI ": " IMSI ",
+  "Unique ID ": " المعرف الفريد ",
+  "CID number ": "رقم CID",
+  "Chassis number ": "رقم الهيكل",
+  "Comapny Name ": "اسم شركة",
+  "Comapny Address": "عنوان شركة",
+  "Invoice number": "رقم الفاتورة",
+  "Invoice Date": "تاريخ الفاتورة",
+  "No. of SOS ": "رقم SOS",
+  "Add Document field": "إضافة حقل مستند",
+  "Document issued date :": "تاريخ إصدار المستند",
+  "UPDATE AND SAVE": "تحديث وحفظ",
+  "Reason": "السبب",
+  "Password": "كلمة المرور",
+  "Driver Search": "البحث عن سائق",
+  "Enter User Id": "ادخل اسم المستخدم",
+  "Enter First name": "أدخل الاسم الاول",
+  "Enter Last name": "أدخل اسم العائلة",
+  "Enter email": "أدخل البريد الالكتروني",
+  "Enter mobile number": "أدخل رقم الهاتف",
+  "Enter Address": "أدخل العنوان",
+  "EDIT CUSTOMER": "تعديل العميل ",
+  "Delete Dealer": " حذف التاجر ",
+  "Documents": " المستندات ",
+  "Document Name": " اسم المستند ",
+  "Document number": " رقم المستند ",
+  "Action": " الاجراءات ",
+  "Add": " اضافة ",
+  "Upload Documents *": " تحميل المستندات ",
+  "Save": " حفظ ",
+  "delete": " حذف ",
+  "Doc number": " رقم المستند ",
+  "Download": " تنزيل ",
+  "Yes, Delete it!": " نعم , احذفه ",
+  "Cancel": " الغاء ",
+  "EDIT DEALER": " تعديل موزع ",
+  "Are you sure ?": " هل انت متاكد؟ ",
+  "you want to delete dealer": " هل تريد حذف التاجر ",
+  "Edit Model": " تحرير النموذج ",
+  "Enter device model": " أدخل موديل الجهاز ",
+  "Configuration command": " اوامر التكوين ",
+  "Location command": "اوامر الموقع",
+  "Imobilizer command": "أمر منع الحركه",
+  "Resume command": "أمر الاستئناف",
+  "Reset command": "أمر اعادة الضبط",
+  "Manufacturer": "المصنع",
+  "Server Command": "اوامر الخادم",
+  "Mobile Command": "اوامر الموبايل",
+  "Update": "التحديث",
+  "Edit trip details": "تحرير تفاصيل الرحلة",
+  "Route name": "اسم الطريق",
+  "Vehicles name": " اسم المركبة ",
+  "Radius (in meter)": " نصف القطر ,بالمتر ",
+  "Driver name": " اسم السائق ",
+  "Loading site": " موقع التحميل ",
+  "Unloading site": " موقع إلغاء التحميل ",
+  "LR Number": " رقم LR ",
+  "Device Name: ": " اسم الجهاز: ",
+  "Days: ": " الايام: ",
+  "M": " الاثنين ",
+  "T": " الثلاثاء ",
+  "W": "الاربعاء",
+  "Th": "الخميس",
+  "F": "الجمعة",
+  "Sa": "السبت",
+  "S": "الاحد",
+  "Edit Vehicle Type": "تعديل نوع المركبة",
+  "Brand:": "العلامة التجارية",
+  "Enter Brand Name": "ادخل العلامة التجارية:",
+  "Description:": "الوصف",
+  "Enter Description": "اضف وصف:",
+  "Please Enter Description": "الرجاء ادخل الوصف ",
+  "Select icon type": " حدد نوع الرمز ",
+  "Voltage Value": " قيمة الجهد ",
+  "Fuel value": " قيمة الوقود ",
+  "add": " اضافة  ",
+  "Volatage Calibrator": " معايير الفولتية ",
+  "Please Enter voltage": " ادخل معايير الفولتية  ",
+  "Please fuel value": " الرجاء ادخال قيمة الوقود ",
+  "Please Enter Tank Size": " الرجاء إدخال حجم خزان الوقود ",
+  "FUEL EVENTS": " احداث الوقود ",
+  "Please Enter Mileage": " الرجاء إدخال عدد الكيلومترات ",
+  "Fuel Change (L)": " تغيير الوقود ",
+  "Search Device": " البحث عن الجهاز ",
+  "Generate Report": "  انشاء تقرير  ",
+  "Sleep Mode Temprature": " درجة حرارة وضع السكون ",
+  "Temprature": " درجة الحرارة ",
+  "ON": " يعمل  ",
+  "OFF": " مطفئ ",
+  "list": " قائمة ",
+  "Enter GEO FENCE NAME": "ادخل اسم الحاجز الجغرافي",
+  "Get Alert on :": "نبهني في حال",
+  "Select Your Geo Fence Region :": "اختيار السياج الجغرافي",
+  "Search Box": "صندوق البحث",
+  "--Select group--": "اختيار المجموعة",
+  "--Geofence type--": "نوع السياج الجغرافي",
+  "--GEO FENCE NAME--": "اسم السياج الجغرافي",
+  "close": "اغلق",
+  "DEVICES": " الاجهزة",
+  "Matrix Input": " ادخال ماتركس",
+  "Device Id-": "معرف الجهاز",
+  "Matrix Name": " معرف الجهاز ",
+  "Topic": "topic",
+  "Ext. Volt.": "Ext Volt.",
+  "Fuel Volt.": "Fuel Volt.",
+  "Real Time GPS Based Vechicle Tracking": "تتبع قائمة المركبات الحية عبر نظام تحديد المواقع ",
+  "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.": "يمنحك تتبع المركبات المباشر تحديثات في الوقت الفعلي ، مما يتيح لك الحصول على أحدث معلومات التتبع على سيارتك.",
+  "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.": "الذي يعطي تفاصيل دقيقة عن المركبات",
+  "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.": "نظام تتبع سهل الاستخدام يساعدك على تتبع وتحديد موقع الأسطول عند النقر.",
+  "Software as a Service(Saas) with perpetual uptime.": "Software as a Service(Saas) with perpetual uptime.",
+  "Alerts and Event Notifications": " التنبيهات وإشعارات الأحداث ",
+  "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.": " احصل على الاشعارات أثناء تنقلك على الرسائل القصيرة والبريد الإلكتروني وتطبيقات الهاتف المحمول , سيتم إطلاعك باستمرار على تنبيهات في الوقت الفعلي. ",
+  "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.": " يمكن للمستلمين المتعددين تلقي تنبيهات , ليس فقط أنت , ولكن يمكن أيضًا التعرف على الأشخاص القريبين التنبيهات التي تم إنشاؤها للحصول على مساعدة فورية. ",
+  "Schedule your alerts as per your convenience that suits your needs": " قم بجدولة التنبيهات وفقًا لراحتك التي تناسب احتياجاتك ",
+  "Detailed Reports for analysis is also available for making quik decisions": "التقارير التفصيلية للتحليل متاحة أيضًا لاتخاذ قرارات سريعة",
+  "Geofences": "السياج الجغرافي",
+  "Geofence": "السياج الجغرافي",
+  "Upload all Geofence in your account and assign them to the vehicles.": "تحميل جميع Geofence في حسابك وتعيينها للمركبات.",
+  "Find and mark geofences without knowing latitude and longitude values.": " تحميل جميع Geofence في حسابك وتعيين لهم إلى المركبات. ",
+  "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.": "سياج مضلع متاح لسهولة الوصول إليه. يمكن وضع علامة على جميع السياجات الجغرافية حسب ملائمة المستخدم ويمكن تخصيصها للمركبات بحيث يتم تنبيه كل تنبيه إليك. قم بتأمين أحبائك وتأكد من العمل الذي تقوم به قواتك.\n",
+  "Date and Time Based reports available for analyzing vehicle usage.": "التقارير القائمة على التاريخ والوقت متوفرة لتحليل استخدام السيارة.",
+  "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.": "موقع المركبات ، يظهر لك كل سجل موقع المركبة حيث كانت سيارتك متوقفة  ",
+  "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).": "تقرير المركبات الحكيم / الأسطول الموحد. يمنحك ملخص اليوم للسيارة (المركبات).",
+  "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..": " تقرير التنبيه , تقرير موحد لجميع التنبيهات الناتجة عن السيارة. السرعة الزائدة , العبث , الاشتعال , وما إلى ذلك. ",
+  "Geofence report, detailed report when and at what time vehicle enteredin geo areas.": " تقرير Geofence , تقرير مفصل متى وفي أي وقت دخلت السيارة المناطق الجغرافية. ",
+  "How it works": "كيف يعمل",
+  "Real-time tracking": "التعقب في الوقت الفعلي",
+  "Advanced Reporting": "التقارير المتقدمة",
+  "Alerts & Warning": "التنبيهات والتحذيرات",
+  "2-Way messaging": "الرسائل ثنائية الاتجاه",
+  "Engine immobilisation": "عطل المحرك",
+  "Monitor gauges": "مقاييس الشاشة",
+  "Access anytime, anywhere!": "الوصول في أي زمان ومكان!",
+  "Web browser based software": "البرنامج المخصص إلى مستعرض الويب",
+  "Android app": "تطبيق Android",
+  "iPhone app": "تطبيق iPhone",
+  "Request for Demo": "طلب خدمة تجريبية",
+  "Get Detail": "الحصول على التفاصيل",
+  "Export To Excel": "تصدير إلى Excel",
+  "Loading Site": "تحميل الموقع",
+  "Distance": "المسافة",
+  "ETA": "ETA",
+  "directions": "الاتجاهات",
+  "Google Traffic": "Google Traffic",
+  "Google Hybrid": "Google Hybrid",
+  "Google Satellite": "Google Satellite",
+  "Google Physical": "Google Physical",
+  "Google Street": "Google Street",
+  "map": "map",
+  "Please Select Your Device, From/To Date & Time to view history from above options": "الرجاء تحديد جهازك , من / إلى التاريخ والوقت لعرض السجل من الخيارات أعلاه",
+  "Generate Map": "إنشاء خريطة",
+  "Trip Name": " اسم الرحلة ",
+  "Select destination": " تحديد الوجهة ",
+  "CREATE TRIP": " إنشاء رحلة ",
+  "Total Distance: ": " المسافة الإجمالية: ",
+  "Idle Time (Min)": " وقت الخمول (الحد الأدنى) ",
+  "Go to Site >": " اذهب إلى الموقع> ",
+  "Welcome To OneQlik": " مرحبًا بك في OneQlik ",
+  "Login": " تسجيل الدخول ",
+  "Username / Phone Number": " اسم المستخدم / رقم الهاتف  ",
+  "Enter Mobile number*": " أدخل رقم الهاتف المحمول  ",
+  "Confirm New Password": " تأكيد كلمة المرور الجديدة ",
+  "Send OTP": " إرسال OTP ",
+  "Back to Login": " الرجوع إلى تسجيل الدخول ",
+  "Back to previous Form": " الرجوع إلى النموذج السابق ",
+  "Forgot Username / Password?": " هل نسيت اسم المستخدم / كلمة المرور؟ ",
+  "First Name": " الاسم الأول ",
+  "Last Name": "اسم العائلة",
+  "Email Id": "معرف البريد الإلكتروني",
+  "Organisation": "المنظمة",
+  "notifications": "الإشعارات",
+  "Notification Sound": "صوت الإشعارات",
+  "Notifications": "الإشعارات",
+  "Add Phone": "إضافة هاتف",
+  "Close": "إغلاق",
+  "Add Email": "إضافة بريد إلكتروني",
+  "POI details": "تفاصيل نقطة مهمة",
+  "Add POI details": "إضافة نقطة مهمة التفاصيل ",
+  "Type POI name": " اكتب اسم نقطة الاهتمام ",
+  "Previous point duration": " مدة النقطة السابقة ",
+  "Days": " الأيام ",
+  "Hours": " الساعات ",
+  "Minutes": " الدقائق ",
+  "Next point duration": " مدة النقطة التالية ",
+  "Min": " Min ",
+  "Halt": " Halt ",
+  "Mapped Vehicles": " المركبات المعينة ",
+  "Radius": " Radius ",
+  "POI Name": " POI Name ",
+  "Enter a location": " أدخل الموقع ",
+  "ADD": " ADD ",
+  "Routes Search": " البحث عن الطرق ",
+  "Route Status": " حالة الطريق ",
+  "Source": " المصدر ",
+  "Destination": " الوجهة ",
+  "Test name": "اختبار الاسم",
+  "Test Source": "اختبار المصدر",
+  "Test destination": "اختبار الوجهه",
+  "Routes": " المسارات ",
+  "Untracked vehicles": " المركبات غير المستغلة ",
+  "Please Enter Email ID / Phone Number": " الرجاء إدخال معرف البريد الإلكتروني / رقم الهاتف ",
+  "Please Enter Password": "الرجاء إدخال كلمة المرور",
+  "Please Re Enter Password": "الرجاء إعادة إدخال كلمة المرور",
+  "Delete route": "حذف المسار",
+  "Are you sure to delete this route ??": "هل أنت متأكد من حذف هذا المسار؟",
+  "DELETE": "حذف",
+  "Create Trip": "إنشاء رحلة",
+  "One way trip": "رحلة ذهاب",
+  "Two way trip": "رحلة ذهابًا وإيابًا",
+  "Round trip": " رحلة ذهابًا وإيابًا ",
+  "Start Date/Time": " تاريخ / وقت البدء ",
+  "End Date/Time": " تاريخ / وقت الانتهاء ",
+  "Planned start time": " وقت البدء المخطط ",
+  "Planned end time": " وقت البدء المخطط ",
+  "Actual start time": " وقت البدء الفعلي ",
+  "Actual end time": " تاريخ النهاية الفعلي ",
+  "Trip History": "تاريخ الرحلة",
+  "Admin Account": "حساب المسؤول",
+  "Trip type": "نوع الرحلة",
+  "Routes name": "اسم المسار",
+  "Total Distance": "مجموع المسافة",
+  "Get route": "الحصول على المسار",
+  "Parameters": "العلامات",
+  "Enter First Name": "ادخل الاسم الاول",
+  "Enter Last Name": "ادخل اسم العائلة",
+  "Invalid Password": "كلمة المرور خاطئة",
+  "Confirm Password": "تأكيد كلمة المرور",
+  "Please Enter Confirm Password": "الرجاءادخال تاكيد كلمة السر",
+  "Organisation Name": "اسم المنظمة",
+  "Type of user": "نوع المستخدم",
+  "Mobile Verification": "التحقق من الهاتف",
+  "Mobile Number": "رقم الهاتف",
+  "TRIP HISTORY": "تاريخ الرحلة",
+  "Event name": "اسم الحدث",
+  "Event time": "وقت الحدث",
+  "Driver": " السائق ",
+  "Token": " الرمز",
+  "Restore": "استعادة",
+  "Delete Permanently": "حذف العلامات",
+  "Select no of Days to get reminder for your services": "حدد عدد الأيام للحصول على تذكير بخدماتك",
+  "Prior Notification (Days)": "إشعار مسبق ( أيام) ",
+  "Enter Additonal information here...": "  أدخل معلومات إضافية هنا  ",
+  "Calibration": "معايرة"
+}
\ No newline at end of file
diff --git a/src/assets/i18n/new_lan1.json b/src/assets/i18n/new_lan1.json
new file mode 100644
index 0000000..6a474a3
--- /dev/null
+++ b/src/assets/i18n/new_lan1.json
@@ -0,0 +1 @@
+{"0":"{","1":"\"ADMIN\": \"Administratori\",","2":"\"DASHBOARD\": \"Paneli I perdoruesit\",","3":"\"Admin\": \"Administratori\",","4":"\"GROUPS\": \"Grupet\",","5":"\"VEHICLES\": \"Veturat\",","6":"\"Account Setting\": \"Cil?simet e llogaris?\",","7":"\"General Setting\": \"Cil?simet e pergjithshme\",","8":"\"Application language\": \"Gjuha e aplikimit\",","9":"\"Language Setting\": \"Cil?simet e gjuh?s\",","10":"\"Reset Password\": \"Reseto fjal?kalimin \",","11":"\"Notification Settings\": \"Cil?simet e njoftim?ve\",","12":"\"TRACKING\": \"Ndjekje\",","13":"\"Tracking\": \"Ndjekje\",","14":"\"Reports\": \"Raportet\",","15":"\"POI LIST\": \"????? ????????\",","16":"\"POI List\": \"????? ????????\",","17":"\"ROUTES\": \"Rrug?t\",","18":"\"NOTIFICATIONS\": \"Njoftim?t\",","19":"\"DISTRIBUTERS\": \"Distributor?t\",","20":"\"DEALERS\": \"Tregtar?t\",","21":"\"Dealers\": \"Tregtar?t\",","22":"\"CUSTOMERS\": \"Klient?t\",","23":"\"Customers\": \"Klient?t\",","24":"\"RUNNING\": \"N? L?vizje\",","25":"\"IDLE\": \"N? ler\",","26":"\"IDLE Reports\": \"Raportet n? Ler\",","27":"\"STOPPED\": \"E ndaluar\",","28":"\"EXPIRED\": \"E skaduar\",","29":"\"OUT OF REACH\": \"I pa arritsh?m\",","30":"\"NO GPS\": \" NUk ka gps\",","31":"\"Device Icon\": \" Ikona e paisjes\",","32":"\"Registration number\": \" Numri I regjistrimit \",","33":"\"Group\": \" Grupi\",","34":"\"Today's ODO\": \" Odo e sotme\",","35":"\"Total ODO\": \" Odoja totale \",","36":"\"Last location\": \" Lokacioni I fundit \",","37":"\"Last updated on\": \" Perditsimi I fundit \",","38":"\"Trip status\": \"Statusi I udh?timit\",","39":"\"Status\": \"Statusi\",","40":"\"Satellites\": \"Satelitet\",","41":"\"Last Speed\": \"Shpejt?sia e fundit\",","42":"\"FUEL (LITRE)\": \"Karburanti (Lit?r)\",","43":"\"GPS\": \"Gps\",","44":"\"AC\": \"AC\",","45":"\"Fuel Reports\": \"Raporti I karburantit\",","46":"\"POWER\": \"Fuqia\",","47":"\"GSM Signal\": \"Sinjali I GSM\",","48":"\"IGNITION\": \"??????\",","49":"\"NOTIFICATION\": \"Njoftim\",","50":"\"My Account\": \"Llogaria ime\",","51":"\"Log Out\": \"Dil\",","52":"\"Refresh Data\": \"Rifresko t? dh?nat\",","53":"\"Device Search\": \"K?rkimi I paisjes\",","54":"\"Previous\": \"I m?parshem\",","55":"\"Next\": \"Tjetra\",","56":"\"DRIVER MASTER\": \"T? dh?nat p?r shoferin\",","57":"\"Driver Master\": \" T? dh?nat p?r shoferin \",","58":"\"DEVICE MODEL\": \"Modeli I paisjes\",","59":"\"VEHILE TYPE\": \"Tipi I vetur?s\",","60":"\"Maintenance Reminder\": \"Kujtes? per mir?mbajtjen\",","61":"\"Vehicle Expense\": \"Shpenzimi I vetur?s\",","62":"\"Message Utility\": \"Sh?rbimi I mesazhit\",","63":"\"Sensor Detail\": \"Detajet p?r senzorin\",","64":"\"Billing Detail\": \"Detajet e fatures\",","65":"\"USER MASTER\": \"T? dh?nat p?r shfryt?zuesin\",","66":"\"User Master\": \"T? dh?nat p?r shoferin\",","67":"\"DEVICE MASTER\": \"T? dh?nat per paisjen\",","68":"\"Device Master\": \" T? dh?nat per paisjen \",","69":"\"System Logs\": \"Regjistrat e sistemit\",","70":"\"GPS TRACKER\": \"Gjurmuesi gps\",","71":"\"CMD PACKETS\": \" Paketat CMD\",","72":"\"CMD Packets\": \" Paketa CMD\",","73":"\"INVENTORY LIST\": \"Lista e inventarit\",","74":"\"Inventory List\": \"Lista e inventarit\",","75":"\"CUSTOMER INQUIRY\": \" K?rkesat e klientit\",","76":"\"Driver Name\": \"Emri I shoferit\",","77":"\"Driver Address\": \"Adresa e shoferit\",","78":"\"Driver Status\": \"Statusi I shoferit\",","79":"\"License Number\": \"Numri I patent?s\",","80":"\"Salary\": \"Paga\",","81":"\"DOJ\": \"DOJ\",","82":"\"Delete\": \"Fshi\",","83":"\"Device Type\": \"Tipi I paisjes\",","84":"\"Configuration Command\": \"Komanda e konfigurimit\",","85":"\"Location Command\": \"Lokacioni I komand?s\",","86":"\"Immobilzer Command\": \" Komanda e Imobilizuesit","87":"\"Resume Command\": \" Rifllillo komand?n \",","88":"\"Reset Command\": \" ????? ????? ??????? \",","89":"\"Immobilzer Type\": \" Tipi I imobilizuesit \",","90":"\"Port\": \" Porti \",","91":"\"Edit\": \" Edito \",","92":"\"Brand\": \" Tipi\",","93":"\"Description\": \" P?ershkrimi\",","94":"\"Model\": \"Modeli\",","95":"\"Icon Type\": \" Tipi I ikon?s\",","96":"\"Voltage Calibration\": \" Kalibrimi i tensionit \",","97":"\"Tank Size\": \" Madh?sia e rezervuarit \",","98":"\"Mileage\": \"Kilometrazha \",","99":"\"Last Modified\": \" Modifikimi I fundit\",","100":"\"Search by phone\": \" K?erko p?rmes telefonit\",","101":"\"Search by name\": \" K?erko p?rmes emrit\",","102":"\"From Date\": \" Prej dat?s\",","103":"\"To Date\": \" Deri n? dat? \",","104":"\"FIND\": \"K?rko \",","105":"\"Show\": \"Shfaq \",","106":"\"entries\": \" Hyrjet \",","107":"\"Name\": \"Emri\",","108":"\"Dealer\": \"Tregtari\",","109":"\"Is Dealer\": \"\",","110":"\"Created on\": \"Krijuar m?\",","111":"\"Email\": \"Emaili\",","112":"\"Phone\": \"Telefoni\",","113":"\"Device Name\": \"Emri I paisjes\",","114":"\"Device Id\": \"ID e paisjes\",","115":"\"User\": \"Perdoruesi\",","116":"\"Expire On\": \"Skadon m?\",","117":"\"Fuel Voltage(mv)\": \" Tensioni i karburantit (mv)\",","118":"\"Sim Number\": \" Numri I kartel?s \",","119":"\"Today ODO\": \" ? ????? \",","120":"\"Search by Device ID\": \" K?rko p?rmes ID s? paisjes \",","121":"\"Certificates\": \"?ertifikatat \",","122":"\"Export Pdf\": \" Eksporto n? PDF\",","123":"\"Search by Sim Number\": \" K?erko p?rmes Numrit t? kartel?s\",","124":"\"Export EXCEL\": \"Eksporto n? eksell\",","125":"\"Device IMEI\": \"IMEI I paisjes\",","126":"\"Lattitude\": \"Gjer?sia gjeografike \",","127":"\"Longitude\": \"Gjat?sia gjeografike\",","128":"\"Speed\": \"Shpejtesia\",","129":"\"Device Time\": \"Koha e paisjes\",","130":"\"Insertion Time\": \"Koha e futjes\",","131":"\"Last Push\": \"Shtytja e fundit\",","132":"\"Integration Respnse\": \"P?rgjigjja e integrimit\",","133":"\"Ignition\": \"???????\",","134":"\"Power\": \"Fuqia\",","135":"\"Ext. Volt\": \"?????? ????\",","136":"\"Fuel Volt\": \"Volti I karburantit\",","137":"\"Sattelite\": \"Sateliti\",","138":"\"Powercut Alarm\": \" Alarmi i nd?rprerjes s? energjis? \",","139":"\"Inquiry Date\": \" Data e k?rkesave \",","140":"\"Customer Name\": \"Emri I klientit\",","141":"\"Message\": \"Mesazhi \",","142":"\"Assigned To\": \"Caktuar p?r\",","143":"\"Role\": \"Roli\",","144":"\"No data available in table\": \"Nuk ka data t? lira \",","145":"\"Showing\": \" shfaqet \",","146":"\"Costumer Inquiry\": \"K?rkesat e klienit\",","147":"\"System Date\": \" Data e sistemit\",","148":"\"Vehicle Number\": \"Numri I vetures\",","149":"\"Chassis Number\": \"Shasia e vetur?s \",","150":"\"Engine Number\": \" Numri I motorit\",","151":"\"Device Model\": \" Modeli I paisjes\",","152":"\"VLT No.(IMEI)\": \" ??? VLT (IMEI) \",","153":"\"VLT SIM(IDEA)\": \" VLT SIM (IDEA) \",","154":"\"VLT SIM(BSNL)\": \" VLT SIM (BSNL) \",","155":"\"Approving RTO\": \" ???????? ??? RTO \",","156":"\"Owner Number\": \" Numri I pronarit \",","157":"\"Alternate Number\": \"Numri alternativ\",","158":"\"Dealer Name\": \"Emri I tregtarit\",","159":"\"Tracking Software\": \" Softueri p?r gjurmim\",","160":"\"Costumer Name\": \" Emri I klientit\",","161":"\"Device ID\": \" Id e paisjes\",","162":"\"Operator Name\": \" Emri I operatorit \",","163":"\"Protocol ID\": \" ID e protokollit \",","164":"\"Command\": \" Komanda\",","165":"\"ACC\": \" ACC \",","166":"\"Battery Status\": \"Statusi I bateris\",","167":"\"GPS DATA\": \"T? dh?nat p?r gps\",","168":"\"DEVICES MASTER\": \"T? dhenat p?r paisjen\",","169":"\"Groups\": \"Grupet\",","170":"\"Add Group\": \"Shto grup\",","171":"\"Type group name\": \"Shkruani emrin e grupit\",","172":"\"CONFIRM\": \"Konfirmo\",","173":"\"CANCEL\": \"Anulo\",","174":"\"Active\": \"Aktiv\",","175":"\"InActive\": \"Jo aktiv\",","176":"\"Vehicles\": \"Paisjet\",","177":"\"Reg. Number\": \"Nr I regjistrmit\",","178":"\"IMEI\": \"IMEI\",","179":"\"Int. ID\": \"ID internacionale\",","180":"\"SIM 1\": \"SIM 1\",","181":"\"SIM Provider\": \"Provajderi I karteles\",","182":"\"SIM2\": \"SIM2\",","183":"\"Vehicle Type\": \"Tipi I vetures\",","184":"\"Owner\": \"Pronari\",","185":"\"IDLING Since\": \"????? ???\",","186":"\"STOPPED Since\": \"E ndalur prej:\",","187":"\"RUNNING Since\": \" N? L?vizje prej\",","188":"\"Video Tutorial\": \" Video tutoriale\",","189":"\"VEHICLE LIST\": \" Lista e veturave\",","190":"\"Vehicle List\": \" Lista e veturave \",","191":"\"MAINTENANCE REMINDER\": \" Kujtes? per mir?mbajtjen \",","192":"\"REMINDERS\": \"P?rkujtimet \",","193":"\"Reminders\": \"P?rkujtimet \",","194":"\"Reminder Date\": \" Data e kujtes?s\",","195":"\"Notification Type\": \" Tipi I njoftimit\",","196":"\"Reminder Type\": \" Tipi I p?rkujtimit\",","197":"\"Prior Notification(Days)\": \"Njoftimi paraprak \",","198":"\"Additional notes\": \"Sh?nimet shtes?\",","199":"\"SEARCH\": \"K?rko\",","200":"\"Live Tracking\": \"Live tracking\",","201":"\"History Tracking\": \"Historia e gjurmimit\",","202":"\"Vehicle History\": \"Historia e vetur?s\",","203":"\"Generate History\": \"Gjenero historin\",","204":"\"Play History\": \"Fillo historin\",","205":"\"Select device\": \"Zgjidh paisjen\",","206":"\"Please choose a device\": \"Ju lutem zgjidhni paisjen\",","207":"\"OK\": \"OK\",","208":"\"GEOFENCE\": \" Zona gjeografike\",","209":"\"Grid view\": \"Pamja ne rrjet\",","210":"\"List view\": \"Pamja ne list\",","211":"\"Geo Fencing Name\": \"Emri I zones gjeografike\",","212":"\"Geofence type\": \"Tipi I zones gjeografike\",","213":"\"Enter Alert\": \"Fut alarmin\",","214":"\"Exit Alert\": \"Ndal alarmin\",","215":"\"Geofence Search\": \"K?rko zonen gjeografke\",","216":"\"Add Geofence\": \" Shto zone gjeografike \",","217":"\"Select group\": \" Zjidh grupin\",","218":"\"GEO FENCE NAME\": \"Emri I zones gjeografike\",","219":"\"Get Alert on\": \"Merrni njoftim n? \",","220":"\"Entering\": \"Duke hyr\",","221":"\"Exiting\": \" Duke dal\",","222":"\"Create\": \" Krijo\",","223":"\"Select Your Geo Fence Region\": \"Zgjidh regjionin e zones gjeografike\",","224":"\"Add Geo Fence\": \"Shto zone gjeografike\",","225":"\"Total Distance(Km)\": \" Distanca totale (Km) \",","226":"\"Fuel consumption(Litre)\": \" Konsumimi I karburantit (Liter) \",","227":"\"Ignition ON Time(Hr:Min)\": \" ??? ????? ?????? (????: ?????) \",","228":"\"Ignition OFF Time(Hr:Min)\": \" ??? ????? ?????? (????: ?????) \",","229":"\"Idle Time(Hr:Min)\": \" ??? ?????? (????: ?????) \",","230":"\"Out of reach(Hr:Min)\": \" Jasht? rrjetit\",","231":"\"No GPS(Hr:Min:Sec)\": \" Nuk ka gps\",","232":"\"Daily Report\": \" Raporti ditor \",","233":"\"Daily Reports\": \" Raportet ditore \",","234":"\"Trips\": \"Udh?timet \",","235":"\"Max Speed(Km/hr)\": \" Shpejtesia maksimale","236":"\",","237":"\"My App\": \" Aplikacioni\",","238":"\"AC Report\": \"Raporti I  AC \",","239":"\"AC Reports\": \"Raporti I AC \",","240":"\"Loading\": \"Duke u ngarkuar\",","241":"\"Vehicle\": \"Vetura\",","242":"\"Load Management\": \" Menaxhimi i ngarkes?s \",","243":"\"TOTAL VEHICLES\": \"T? gjitha veturat\",","244":"\"ON Time\": \"??? ???????\",","245":"\"OFF Time\": \"??? ???????\",","246":"\"Dashboard\": \"Paneli I perdoruesit\",","247":"\"RULES\": \"Rregullat\",","248":"\"Alert Report\": \"Raporti I njoftimit \",","249":"\"No\": \"Jo\",","250":"\"Date\": \"Data\",","251":"\"Power Cut\": \"Nd?rprerje e energjis? \",","252":"\"Battery\": \"Bateria\",","253":"\"Geofencing\": \"Zona gjeografike\",","254":"\"Overspeeding\": \" Tejkalimi I shpejtesis\",","255":"\"Daywise Report\": \"Raporti ditor  \",","256":"\"Daywise Reports\": \" Raporti ditor\",","257":"\"Filter Report\": \" Raporti I filtrit\",","258":"\"Fuel Consumption Report\": \" Raporti I konsumimit te karburantit\",","259":"\"Fuel Consumption Reports\": \" Raporti I konsumimit te karburantit \",","260":"\"Vehicle name\": \" Emri I vetur?s\",","261":"\"Start Time\": \"Koha e startimit \",","262":"\"End Time\": \" Koha e mbarimit\",","263":"\"Fuel Consumed (L)\": \" Konsumimiti karburantit\",","264":"\"Distance(Kms)\": \"Distanca (Kms)\",","265":"\"In event count\": \"\",","266":"\"Out event count\": \"Out out count\",","267":"\"Start Location\": \"Lokacioni I fillimit\",","268":"\"End Location\": \"Mbarimi I lokacionit\",","269":"\"Click to get device's last location\": \"Kliko per ta shikuar lokacionin e fundit\",","270":"\"SOS Report\": \"Sos Raporti\",","271":"\"Vehicle No.\": \"Nr I vetur?s\",","272":"\"Time\": \"Koha\",","273":"\"Address\": \"Adresa\",","274":"\"Speed variation\": \"Ndryshimi I shpejt?sis?\",","275":"\"Total K.M\": \"Totali K.M\",","276":"\"Generate Graph\": \"Gjenero grafikun\",","277":"\"Driver's Performance Report\": \" Raporti i Performanc?s s? Shoferit \",","278":"\"Total trip\": \"Udhetimi tota;\",","279":"\"Total Ontime trip\": \"\",","280":"\"Ontime vehicles\": \"?????? ontime\",","281":"\"group\": \"Grupet\",","282":"\"TRACKER\": \"Gjurmuesi \",","283":"\"REPORTS\": \"Raportet \",","284":"\"Speed Variation\": \" Ndryshimi I shpejt?sis? \",","285":"\"Trip Report\": \" Raporti I udhetimit\",","286":"\"Summary Report\": \" Permbledhja e raportit \",","287":"\"Summary Reports\": \" Permbledhja e raportit \",","288":"\"Overspeeding Report\": \" Raporti I tejkalimit te shpejtesis\",","289":"\"Overspeeding Reports\": \" Raporti I tejkalimit te shpejtesis \",","290":"\"Route Violation Report\": \" Raporti i Shkeljes s? Rrug?s \",","291":"\"Route Violation Reports\": \" Raporti i Shkeljes s? Rrug?s \",","292":"\"Stoppage Report\": \" Raporti I ndalesave\",","293":"\"Stoppage Reports\": \"Raporti I ndalesave \",","294":"\"Ignition Report\": \" ????? ??? ??????? \",","295":"\"Ignition Reports\": \" ?????? ??? ??????? \",","296":"\"Distance Report\": \" raporti i distanc?s \",","297":"\"Distance Reports\": \" raporti i distanc?s \",","298":"\"Driver's performance\": \" Performanca e shoferit \",","299":"\"VEHICLE TYPE\": \" Tipi I vetures\",","300":"\"ROUTE LIST\": \" Lista e rruges\",","301":"\"Route list\": \" Lista e rruges\",","302":"\"ROUTE MAPPING\": \"Mapimi I rruges\",","303":"\"Route Mapping\": \" Mapimi I rruges\",","304":"\"Dealer Account\": \" Llogaria e tregtarit\",","305":"\"Geofencing Report\": \" Raporti I zones gjeografike\",","306":"\"Geofencing Reports\": \" Raportet e zones gjeografike\",","307":"\"Select Geofencing\": \"Zgjidh zon?n gjeografike \",","308":"\"Vehicle Name\": \" Emri I vetur?s \",","309":"\"In/Out\": \"Brenda/jasht? \",","310":"\"Datetime\": \" Data \",","311":"\"Location\": \"Lokacioni\",","312":"\"GeoFence Name\": \" Emri I zones gjeografike \",","313":"\"Click here to get address\": \"Kliko p?r ta marr adres?n\",","314":"\"Select Your Device\": \"Zgjidh paisjen \",","315":"\"IDLE REPORT\": \" ????? ?????? \",","316":"\"Select Vehicle\": \"Zgjidh veturen\",","317":"\"Min Idle Time (Min)\": \" \",","318":"\"Duration (HH:MM:SS)\": \"Kogezgjatja\",","319":"\"AC Status\": \"Statusi I AC\",","320":"\"TRACKERS\": \"Gjurmuesit\",","321":"\"Date Time\": \"Koha\",","322":"\"On/Off\": \"On / Off\",","323":"\"Overspeed\": \"Tejkalimi I shpejt?sis\",","324":"\"POI name\": \"POI name\",","325":"\"Arrival Time\": \"Koha e arritjes\",","326":"\"Departure Time\": \"Koha e nisjes\",","327":"\"Route\": \"Rruga\",","328":"\"POI Report\": \"????? ???????\",","329":"\"From Time\": \" Prej \",","330":"\"To Time\": \"Deri n? \",","331":"\"Duration\": \"Koh?zgjatja \",","332":"\"Start Point\": \"Pika e startimit\",","333":"\"End Point\": \" Pika e mbarimit\",","334":"\"Total KM\": \"Km totale \",","335":"\"Fuel Consumption (Litre)\": \"Konsumimi I karburantit \",","336":"\"Total Running Time (HH:MM)\": \"Koha totale e levizjes\",","337":"\"Total Stop Time (HH:MM)\": \" Koha totale e ndales?s \",","338":"\"Total Idle Time (HH:MM)\": \" Koha totale n? ler \",","339":"\"Total Out of reach Time (HH:MM)\": \"Koha totale jasht rrjetit\",","340":"\"Total No gps Time (HH:MM)\": \"Koha totale pa gps\",","341":"\"Overspeeding (HH:MM)\": \"Tejkalimi I shpejtesis\",","342":"\"Route Violation\": \" Shkelja e Itinerarit\",","343":"\"TRAVEL PATH REPORT\": \" Raporti  I rrug?s s? udh?timit\",","344":"\"Travel Path Reports\": \" Raporti  I rrug?s s? udh?timit \",","345":"\"Device\": \"Paisje\",","346":"\"ODO (K.M.)\": \"ODO (KM)\",","347":"\"Distance (K.M.)\": \"Distanca K.M\",","348":"\"Cumulative Distance (K.M.)\": \" Distanca Kumulative \",","349":"\"TRIP REPORT\": \"Raporti I udh?timit\",","350":"\"Trip Reports\": \" Raporti I udh?timit \",","351":"\"TRIP ID\": \"ID e udh?timit\",","352":"\"VEHICLE NAME\": \"Emri I vetur?s\",","353":"\"SOURCE ADDRESS\": \"Burimi I adres?s\",","354":"\"DESTINATION ADDRESS\": \"Adresa e destinacionit\",","355":"\"DISTANCE\": \"Distanca\",","356":"\"DURATION\": \"Koh?zgjatja\",","357":"\"TRIP STATUS\": \"Statusi I udh?timit\",","358":"\"MILEAGE\": \"Kilometrazha\",","359":"\"ADD EXPENSES\": \"Shto shpenzime\",","360":"\"EXPENSES LIST\": \"Lista e shpenzimeve\",","361":"\"Amount\": \"Shuma\",","362":"\"Currency\": \"Valuta\",","363":"\"Payment Mode\": \" M?nyra e pages?s \",","364":"\"Expense type\": \" Lloji i shpenzimeve\",","365":"\"GEO FENCING\": \"Zona gjeografike\",","366":"\"ADD DEVICE\": \"Shto paisje\",","367":"\"GENERAL SETTING\": \"Cil?simet gjenerale\",","368":"\"Device ID *\": \"ID e paisjes\",","369":"\"Enter Device ID\": \"Shkruj ID e paisjes\",","370":"\"Device Name * \": \"Emri I paisjes\",","371":"\"Enter Device Name\": \"Shkruaj emrin e paisjes\",","372":"\"SIM Number\": \"Numri I karteles\",","373":"\"SIM Number 2\": \"Numri I kartel?s 2\",","374":"\"SIM Provider 2\": \"Provajderi I karteles se dyt?\",","375":"\"Integration ID\": \" ID e integrimit","376":"\"Select User\": \"Zgjidhe p?rdoruesin\",","377":"\"Driver Contact Number\": \" Numri i Kontaktit t? Shoferit","378":"\"Select Vehicle type*\": \" Zgjidhni llojin e automjetit \",","379":"\"Type of Vehicle\": \"Lloji I vetures\",","380":"\"mm/dd/yyyy\": \"Muaj / Data / Viti\",","381":"\"ICCICD Number\": \"??? ICCICD\",","382":"\"IMSI\": \"IMSI\",","383":"\"Unique ID\": \"ID unike\",","384":"\"CID number\": \"??? CID\",","385":"\"Chassis number\": \"Numri I shasis\",","386":"\"Comapny Name\": \"Emri I kompanis\",","387":"\"Company Address\": \"Adresa e kompanis\",","388":"\"Transport Office City\": \" Zyra e Transportit Qyteti \",","389":"\"Transport Office State\": \" Zyra e Transportit n? Shtet \",","390":"\"Invoice Number\": \" Numri i fatur?s \",","391":"\"Number of SOS\": \" Numri i SOS \",","392":"\"Doc Type\": \"Tipi I dokumentit\",","393":"\"Enter SIM Provider\": \"Futni provajderin e kartel?s\",","394":"\"Enter SIM Provider 2\": \"Futni provajderin e kartel?s s? dyt?\",","395":"\"Driver's contact number\": \" Numri i kontaktit t? shoferit \",","396":"\"Device model *\": \"Modeli I paisjes \",","397":"\"Vehicle type * \": \"Lloji I vetur?s\",","398":"\"Expiration date\": \" Data e skadimit\",","399":"\"Engine number\": \"Numri I motorit\",","400":"\"Type of Vehicle \": \"Lloji I vetur?s\",","401":"\"Manufacturing company\": \"Kompania prodhuese \",","402":"\"Registration date \": \" Data e regjistrimit \",","403":"\"Date of Manufacturing Year \": \" Data e Vitit t? Prodhimit \",","404":"\"Last fitness date \": \" Data e fundit\",","405":"\"ICCICD Number \": \" ??? ICCICD \",","406":"\"Fitment Date \": \" Data e pajisjes","407":"\"IMSI \": \" IMSI \",","408":"\"Unique ID \": \" ID unike \",","409":"\"CID number \": \"??? CID\",","410":"\"Chassis number \": \"Numri I shasis\",","411":"\"Comapny Name \": \"Emri I kompanis\",","412":"\"Comapny Address\": \"Adresa e kompanis\",","413":"\"Invoice number\": \"Numri I fatur?s\",","414":"\"Invoice Date\": \"Data e fatur?s\",","415":"\"No. of SOS \": \" Nr. I SOS \",","416":"\"Add Document field\": \" Shto fush?n e Dokumentit","417":"\"Document issued date :\": \"Data e l?shimit t? dokumentit\",","418":"\"UPDATE AND SAVE\": \"P?rditso dhe ruaj\",","419":"\"Reason\": \"Ruaj\",","420":"\"Password\": \"Fjal?kalimi\",","421":"\"Driver Search\": \"????? ?? ????\",","422":"\"Enter User Id\": \" K?rkimi i shoferit \",","423":"\"Enter First name\": \"Fute Emrin\",","424":"\"Enter Last name\": \"Fute mbiembrin\",","425":"\"Enter email\": \"Fute emailin\",","426":"\"Enter mobile number\": \"Fute numrin e telefonit\",","427":"\"Enter Address\": \"Fute adres?n\",","428":"\"EDIT CUSTOMER\": \"Edito klientin \",","429":"\"Delete Dealer\": \"Fshi tregtarin\",","430":"\"Documents\": \" Dokument?t\",","431":"\"Document Name\": \" Emri I dokumentit\",","432":"\"Document number\": \" Numri I dokumentit \",","433":"\"Action\": \"Aksion \",","434":"\"Add\": \"Shto\",","435":"\"Upload Documents *\": \"Ngarko dokument\",","436":"\"Save\": \" Ruaj\",","437":"\"delete\": \" Fshi\",","438":"\"Doc number\": \" Numri I dokumentit\",","439":"\"Download\": \"Shkarko\",","440":"\"Yes, Delete it!\": \"Po,fshi\",","441":"\"Cancel\": \"Anullo\",","442":"\"EDIT DEALER\": \" Edito tregtarin \",","443":"\"Are you sure ?\": \"A jeni t? sigurt?\",","444":"\"you want to delete dealer\": \" A d?shironi ta fshini tregtarin\",","445":"\"Edit Model\": \"Edito modelin\",","446":"\"Enter device model\": \" Fute modelin e paisjes\",","447":"\"Configuration command\": \" Komanda e konfigurimit \",","448":"\"Location command\": \"Lokacioni I komand?s\",","449":"\"Imobilizer command\": \" Komanda e imobilizuesit \",","450":"\"Resume command\": \" Rifillo komand?n \",","451":"\"Reset command\": \"Reseto komand?n\",","452":"\"Manufacturer\": \" Prodhuesi \",","453":"\"Server Command\": \"Komanda e serverit\",","454":"\"Mobile Command\": \" Komanda mobile \",","455":"\"Update\": \"Azhurnoni\",","456":"\"Edit trip details\": \" Redakto detajet e udh?timit","457":"\"Route name\": \" Emri i itinerarit","458":"\"Vehicles name\": \"Emri I veturave \",","459":"\"Radius (in meter)\": \"Radius\",","460":"\"Driver name\": \" Emri i shoferit \",","461":"\"Loading site\": \" Vendi po ngarkohet \",","462":"\"Unloading site\": \" Faqja e shkarkimit \",","463":"\"LR Number\": \" ??? LR \",","464":"\"Device Name: \": \"Emri I paisjes\",","465":"\"Days: \": \"Dit?t \",","466":"\"M\": \"E h?n? \",","467":"\"T\": \" E mart?\",","468":"\"W\": \"E merkur?\",","469":"\"Th\": \"E ejnte\",","470":"\"F\": \"E premte\",","471":"\"Sa\": \"E shtun?\",","472":"\"S\": \"E diel\",","473":"\"Edit Vehicle Type\": \" Redakto Llojin e Automjetit","474":"\"Brand:\": \"Lloji\",","475":"\"Enter Brand Name\": \"Futni emrin e brendit\",","476":"\"Description:\": \"P?rshkrimi\",","477":"\"Enter Description\": \"Futni p?rshkrimin\",","478":"\"Please Enter Description\": \"Ju lutem futni p?rshkrimin\",","479":"\"Select icon type\": \"Zgjidhni tipin e ikon?s\",","480":"\"Voltage Value\": \" Vlera e tensionit \",","481":"\"Fuel value\": \" Vlera e karburantit \",","482":"\"add\": \"Shto \",","483":"\"Volatage Calibrator\": \" Kalibruesi i tensionit \",","484":"\"Please Enter voltage\": \" Ju lutemi futni vler?n e karburantit\",","485":"\"Please fuel value\": \" Please fuel value\": \",","486":"\"Please Enter Tank Size\": \"Ju lutemi shkruani Madh?sin? e Rezervuarit \",","487":"\"FUEL EVENTS\": \" NGJARJET E KARBURANT \",","488":"\"Please Enter Mileage\": \" Ju lutemi shkruani kilometrazhin \",","489":"\"Fuel Change (L)\": \" Ndryshimi i karburantit (L)\",","490":"\"Search Device\": \" Pajisja e k?rkimit \",","491":"\"Generate Report\": \" Gjenero raportin\",","492":"\"Sleep Mode Temprature\": \"Temperatura n? sleep mode \",","493":"\"Temprature\": \" ???? ??????? \",","494":"\"ON\": \"On\",","495":"\"OFF\": \"Off\",","496":"\"list\": \" Lista\",","497":"\"Enter GEO FENCE NAME\": \"Futni emrin e zones gjeografike\",","498":"\"Get Alert on :\": \" Merrni Njoftim n? \",","499":"\"Select Your Geo Fence Region :\": \"Zgjidhni regjionin e zon?s gjeografike\",","500":"\"Search Box\": \" Kutia e K?rkimit \",","501":"\"--Select group--\": \"Zgjidhni\","502":"\",","503":"\"--Geofence type--\": \"Lloji I zones gjeografike\",","504":"\"--GEO FENCE NAME--\": \"Emri I zones gjeografike\",","505":"\"close\": \"Mbylle\",","506":"\"DEVICES\": \" Paisjet\",","507":"\"Matrix Input\": \"Futja e matric?s\",","508":"\"Device Id-\": \"ID e paisjes\",","509":"\"Matrix Name\": \" Emri I matric?s\",","510":"\"Topic\": \"Tema\",","511":"\"Ext. Volt.\": \"Ext Volt.\",","512":"\"Fuel Volt.\": \" Tensioni i karburantit \",","513":"\"Real Time GPS Based Vechicle Tracking\": \" Ndjekja e Automjeteve e Bazuar n? GPS n? koh? Reale \",","514":"\"Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.\": \" Ndjekja e Automjeteve Drejtp?rdrejt ju jep azhurnime n? koh? reale, duke ju lejuar t? merrni informacionin m? t? fundit t? gjurmimit n? automjetin tuaj.\",","515":"\"Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.\": \" Hartat e nd?rmarrjeve nga Google-API p?r p?rdorim komercial q? japin detaje t? sakta t? vendndodhjes s? automjeteve \",","516":"\"User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.\": \" Sistem gjurmimi miq?sor p?r p?rdoruesit q? ju ndihmon t? gjurmoni dhe lokalizoni flot?n pa mundim n? Kliko \",","517":"\"Software as a Service(Saas) with perpetual uptime.\": \" Softueri si Sh?rbim (SAS) me koh? t? p?rhershme \",","518":"\"Alerts and Event Notifications\": \" Sinjalizimet dhe njoftimet e ngjarjes \",","519":"\"Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.\": \" Merrni njoftime ndezur nd?rsa jeni n? l?vizje n? SMS dhe email dhe aplikacionin Mobile, ju do t? azhurnoheni me njoftime n? koh? reale \",","520":"\"Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.\": \" P?rfituesit e shumt? mund t? marrin sinjalizime, Jo vet?m ju, por edhe t? af?rmit tuaj mund t? njihen p?r sinjalizimet e krijuara p?r ndihm? t? menj?hershme. \":\",","521":"\"Schedule your alerts as per your convenience that suits your needs\": \" Planifikoni sinjalizimet tuaja sipas leht?sis? q? ju p?rshtatet nevojave tuaja\",","522":"\"Detailed Reports for analysis is also available for making quik decisions\": \" Raportet e holl?sishme p?r analiz? jan? gjithashtu n? dispozicion p?r t? marr? vendime t? shpejta \",","523":"\"Geofences\": \"Zonat gjeografike\",","524":"\"Geofence\": \"Zonat gjeografike\",","525":"\"Upload all Geofence in your account and assign them to the vehicles.\": \" Ngarko t? gjith? Zonat gjeografike n? llogarin? t?nde dhe caktoji ato t?  automjeteve.\",","526":"\"Find and mark geofences without knowing latitude and longitude values.\": \" Gjeni dhe sh?noni zonat gjeografike pa ditur vlerat e gjer?sis? dhe gjat?sis? \",","527":"\"Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.\": \"Zonat gjeografike n? dispozicion p?r qasje t? leht?. T? gjitha zonat gjeografike mund t? sh?nohen sipas bindjes s? p?rdoruesit dhe mund t'u caktohen automjeteve n? m?nyr? q? ?do sinjalizim t? jet? I derguar. Siguroni t? dashurit tuaj dhe siguroni pun?n e b?r? nga Forcat tuaja\",","528":"\"Date and Time Based reports available for analyzing vehicle usage.\": \" Raportet e bazuara n? dat?n dhe koh?n, t? disponueshme p?r t? analizuar p?rdorimin e automjetit.\",","529":"\"Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.\": \" Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend \",","530":"\"Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).\": \" Raport i konsoliduar i men?ur p?r automjetet / Flota. Ju jep p?rmbledhjen e dit?s p?r automjetin (et)..\",","531":"\"Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..\": \" Raporti i alarmit, raport i konsoliduar p?r t? gjitha sinjalizimet e krijuara nga automjeti. Mbingarkesa, nd?rhyrje, ndezje etj \",","532":"\"Geofence report, detailed report when and at what time vehicle enteredin geo areas.\": \" Raporti i zones gjeografike, raport i detajuar se kur dhe n? cil?n koh? automjeti hyri n? zonat gjeografike \",","533":"\"How it works\": \"Si punon\",","534":"\"Real-time tracking\": \"Gjurmim ne koh? reale\",","535":"\"Advanced Reporting\": \"Raporti I avancuar\",","536":"\"Alerts & Warning\": \"Njoftim dhe paralajm?rim\",","537":"\"2-Way messaging\": \"Mesazhe me 2 m?nyra \",","538":"\"Engine immobilisation\": \" Imobilizimi i motorit \",","539":"\"Monitor gauges\": \" Mat?sit e monitorit \",","540":"\"Access anytime, anywhere!\": \" Hyni n? ?do koh?, kudo \",","541":"\"Web browser based software\": \" Softuer i bazuar n? shfletues uebi \",","542":"\"Android app\": \"Aplikacioni android\",","543":"\"iPhone app\": \"Aplikacioni p?r Iphone\",","544":"\"Request for Demo\": \"K?rko demo verzionin\",","545":"\"Get Detail\": \"Merr detaje\",","546":"\"Export To Excel\": \"Eksporto n? eksell\",","547":"\"Loading Site\": \"Faqja ?sht? duke u ngarkuar\",","548":"\"Distance\": \"Distanca\",","549":"\"ETA\": \"ETA\",","550":"\"directions\": \"?????????\",","551":"\"Google Traffic\": \"Google Traffic\",","552":"\"Google Hybrid\": \"Google Hybrid\",","553":"\"Google Satellite\": \"Google Satellite\",","554":"\"Google Physical\": \"Google Physical\",","555":"\"Google Street\": \"Google Street\",","556":"\"map\": \"Harta\",","557":"\"Please Select Your Device, From/To Date & Time to view history from above options\": \" Ju lutemi Zgjidhni Pajisjen Tuaj, Nga / N? Data dhe Koha p?r t? par? historikun nga opsionet e m?sip?rme \",","558":"\"Generate Map\": \"Gjenero hart?n\",","559":"\"Trip Name\": \"Emri udh?timit\",","560":"\"Select destination\": \" Zgjidh Destinacionin\",","561":"\"CREATE TRIP\": \"Krijo udh?tim\",","562":"\"Total Distance: \": \"Distanca\",","563":"\"Idle Time (Min)\": \" Koha n? ler\",","564":"\"Go to Site >\": \"Shko te faqja \",","565":"\"Welcome To OneQlik\": \" ?????? ?? ?? OneQlik \",","566":"\"Login\": \" Hyrja \",","567":"\"Username / Phone Number\": \" Emri i p?rdoruesit / numri i telefonit\",","568":"\"Enter Mobile number*\": \" Vendosni numrin e celularit \",","569":"\"Confirm New Password\": Konfirmoni fjal?kalimin e ri \",","570":"\"Send OTP\": \" Dergo OTP\",","571":"\"Back to Login\": \" Kthehu tek Login \",","572":"\"Back to previous Form\": \" Kthehu tek formulari i m?parsh?m \",","573":"\"Forgot Username / Password?\": \" Keni harruar emrin e p?rdoruesit / fjal?kalimin \",","574":"\"First Name\": \" Emri\",","575":"\"Last Name\": \"Mbiemri\",","576":"\"Email Id\": \"Id e emailit\",","577":"\"Organisation\": \"Organizata\",","578":"\"notifications\": \"Njftim?t\",","579":"\"Notification Sound\": \"Z?ri I njoftimeve\",","580":"\"Notifications\": \"Njoftimet\",","581":"\"Add Phone\": \"Shto Telefonin\",","582":"\"Close\": \"Mbylle\",","583":"\"Add Email\": \"Shto email\",","584":"\"POI details\": \"?????? ???? ????\",","585":"\"Add POI details\": \"????? ???? ???? ???????? \",","586":"\"Type POI name\": \" ???? ??? ???? ???????? \",","587":"\"Previous point duration\": \" Koh?zgjatja e pik?s s? m?parshme \",","588":"\"Days\": \" Dit?t\",","589":"\"Hours\": \"Or?t \",","590":"\"Minutes\": \"Minutat \",","591":"\"Next point duration\": \" ??? ?????? ??????? \",","592":"\"Min\": \" Min \",","593":"\"Halt\": \"Ndales? \",","594":"\"Mapped Vehicles\": \" Automjete t? pasqyruara \",","595":"\"Radius\": \" Radius \",","596":"\"POI Name\": \" POI Name \",","597":"\"Enter a location\": \"Futni lokacionin \",","598":"\"ADD\": \"Shto \",","599":"\"Routes Search\": \" K?rkimi I rrug?s \",","600":"\"Route Status\": \"Statusi I rrug?s \",","601":"\"Source\": \"Burimi \",","602":"\"Destination\": \" Destinacioni\",","603":"\"Test name\": \"Emri I prov?s\",","604":"\"Test Source\": \"Emri I burimit\",","605":"\"Test destination\": \"Destinacioni I prov?s\",","606":"\"Routes\": \" Rrug?t \",","607":"\"Untracked vehicles\": \" Veturat e pagjurmuara\",","608":"\"Please Enter Email ID / Phone Number\": \" Ju lutemi shkruani ID-n? e emailit / numrin e telefonit \",","609":"\"Please Re Enter Password\": \" Ju lutem Ri Futni Fjal?kalimin \",","610":"\"Delete route\": \"??? ??????\",","611":"\"Are you sure to delete this route ??\": \" Jeni i sigurt q? do ta fshini k?t? itinerar \",","612":"\"DELETE\": \"Fshi\",","613":"\"Create Trip\": \"krijo udh?tim\",","614":"\"One way trip\": \"Udh?tim nj? drejtim?sh\",","615":"\"Two way trip\": \"Udh?tim dy drejtim?sh \",","616":"\"Round trip\": \"Udhetim vatje ardhje \",","617":"\"Start Date/Time\": \" Fillimi Data/Koha\",","618":"\"End Date/Time\": \" Mbarimi Data/Koha\",","619":"\"Planned start time\": \" Koha e planifikuar e fillimit \",","620":"\"Planned end time\": \" Koha e planifikuar e p?rfundimit \",","621":"\"Actual start time\": \" Koha aktuale e fillimit \",","622":"\"Actual end time\": \" Koha aktuale e p?rfundimit \",","623":"\"Trip History\": \" Historia e Udh?timit\",","624":"\"Admin Account\": \" Llogaria e administratorit \",","625":"\"Trip type\": \" Lloji i udh?timit","626":"\"Routes name\": \" Emri i rrug?ve \",","627":"\"Total Distance\": \" Distanca totale \",","628":"\"Get route\": \" Merrni itinerarin \",","629":"\"Parameters\": \"Parametrat\",","630":"\"Enter First Name\": \"Futni Emrin\",","631":"\"Enter Last Name\": \"Futni Mbiemrin\",","632":"\"Invalid Password\": \"Fjal?kalim jovalid\",","633":"\"Confirm Password\": \"Konfirmo fjal?kalimin\",","634":"\"Please Enter Confirm Password\": \"Konfirmoni fjal?kalimin\",","635":"\"Organisation Name\": \"Emri I organizates\",","636":"\"Type of user\": \" Lloji i p?rdoruesit \",","637":"\"Mobile Verification\": \"Verifikimi p?rmes celularit\",","638":"\"Mobile Number\": \"Numri I celularit\",","639":"\"TRIP HISTORY\": \" historia e udh?timit \",","640":"\"Event name\": \"Emri I eventit\",","641":"\"Event time\": \"Koha e eventit\",","642":"\"Driver\": \" Shoferi \",","643":"\"Token\": \" ?????\",","644":"\"Restore\": \"???????\",","645":"\"Delete Permanently\": \"??? ????????\",","646":"\"Select no of Days to get reminder for your services\": \" Zgjidhni Dit?t p?r t? marr? kujtes? p?r sh?rbimet tuaja \",","647":"\"Prior Notification (Days)\": \" Njoftimi paraprak (Dit?t) \",","648":"\"Enter Additonal information here...\": \"Vendosni informacione shtes?\",","649":"\"Calibration\": \" Kalibrimi","650":"}","651":""}
\ No newline at end of file
diff --git a/src/assets/i18n/pr.json b/src/assets/i18n/pr.json
new file mode 100644
index 0000000..a0dc0c0
--- /dev/null
+++ b/src/assets/i18n/pr.json
@@ -0,0 +1,858 @@
+{
+    "ADMIN": "ADMIN",
+    "DASHBOARD": "PAINEL DE CONTROLE",
+    "GROUPS": "GRUPOS",
+    "VEHICLES": "VEÍCULOS",
+    "Account Setting": "Configurações de conta", 
+    "General Setting": "Configuração geral",
+    "Application language":"Idioma da aplicação",
+    "Language Setting" : "configuração de idioma",
+    "Notification Settings":"configuração de notificação",
+    "TRACKING": "RASTREAMENTO",
+    "GEO FENCING":"geofencing",
+    "Reset Password":"redefinir senha",
+    "Reports": "Relatórios",
+    "IDLE Reports": "relatórios inativos",
+    "Fuel Reports": "Relatórios de Combustível",
+    "Daily Reports": "Reportagens diárias",
+    "AC Reports": "Relatórios AC",
+    "Daywise Reports": "Relatórios diários",
+    "Fuel Consumption Reports": "Relatórios de consumo de combustível",
+    "Summary Reports":"Relatórios de resumo",
+    "Overspeeding Reports": "Relatórios de velocidade excessiva",
+    "Route Violation Reports": "Relatórios de violação de rota",
+    "POI List" : " Lista de POI",
+    "Stoppage Reports": "Relatórios de interrupção",
+    "Route list" : "Lista de rotas",
+    "Route Mapping" : "Mapeamento de rotas",
+    "Ignition Reports": "Relatórios de ignição",
+    "Edit Account" : "Editar conta",
+    "Notif" : "Notif",
+    "Driver Master"  :"Driver Master",
+    "Device Master" : "Mestre do dispositivo",
+    "Priority" : "Prioridade",
+    "Distance Reports": "Relatórios de distância",
+    "Device Model" : "Modelo do dispositivo",
+    "User Master" : "Mestre do Usuário",
+    "GPS Master" : "GPS Master",
+    "Inventory List" :"Lista de inventário",
+    "Geofencing Reports": "Relatórios de geofencing",
+    "Travel Path Reports": "Relatórios de caminho de viagem",
+    "POI Reports" : "Relatórios de POI",
+    "SOS Reports" :"Relatórios SOS",
+    "Driver Performance Reports" : "Relatórios de desempenho do driver",
+    "Driver Performance Report" : "Relatórios de desempenho do driver",
+    "Trip Reports": "Relatórios de viagem",  
+    "POI LIST": "LISTA DE POI",
+    "ROUTES": "ROTAS",
+    "NOTIFICATIONS": "NOTIFICAÇÕES",
+    "DISTRIBUTERS": "DISTRIBUIDORAS",
+    "DEALERS": "REVENDEDORES",
+    "Dealers": "Dealers",
+    "CUSTOMERS": "CLIENTES",
+	"Customers"  : "clientes",
+    "RUNNING": "CORRIDA",
+    "IDLE": "ociosa",
+    "STOPPED": "PARADA",
+    "EXPIRED": "EXPIRADA",
+    "OUT OF REACH": "FORA DO ALCANCE",
+    "NO GPS": "SEM GPS",
+    "Device Icon": "Ícone do dispositivo",
+    "Registration number":"Número de registro",
+    "Group":"Grupo",
+    "Today's ODO":"ODO de hoje",
+    "Total ODO":"ODO total",
+    "TOTAL VEHICLES":"TOTAL DE VEÍCULOS",
+    "ADDED VEHICLES":"VEÍCULOS ADICIONADOS",
+    "Icon":"Icone",
+    "Temp":"Temperatura",
+    "Fuel":"combustível",
+    "IGN":"Encendido",
+    "Last update":"Última atualização",
+    "RENEWED VEHICLES":"VEÍCULOS RENOVADOS",
+    "GOING TO EXPIRE VEHICLES":"INTRODUZIR VEÍCULOS",
+    "NO DATA":"sem dados",
+    "Last location":"Última localização",
+    "Last updated on":"Última atualização em",
+    "Trip status":"Status da viagem",
+    "Status":"Status",
+    "Satellites":"Satélites",
+    "Last Speed":"Última velocidade",
+    "FUEL (LITRE)":"COMBUSTÍVEL (LITRO)",
+    "GPS":"GPS",
+    "AC":"AC",
+    "POWER":"poder",
+    "GSM Signal":"Sinal GSM",
+    "IGNITION":"IGNIÇÃO",
+    "NOTIFICATION":"NOTIFICAÇÃO",
+    "My Account":"Minha conta",
+    "Log Out":"Sair",
+    "Refresh Data":"Atualizar dados",
+    "Device Search":"Pesquisa de dispositivos",
+    "Previous":"Anterior",
+    "Next":"Próxima",
+    "DRIVER MASTER":"DRIVER MASTER",
+    "DEVICE MODEL":"MODELO DE DISPOSITIVO",
+    "VEHILE TYPE":"TIPO DE VEÍCULO",
+    "USER MASTER":"USER MASTER",
+    "DEVICE MASTER":"DISPOSITIVO MESTRE",
+    "GPS TRACKER":"RASTREADOR GPS",
+    "CMD PACKETS":"PACOTES CMD",
+    "INVENTORY LIST":"LISTA DE INVENTÁRIO",
+    "CUSTOMER INQUIRY":"INQUÉRITO AO CLIENTE",
+    "Driver Name":"Nome do motorista",
+    "Driver Address":"Endereço do motorista",
+    "Driver Status":"Status do Driver",
+    "License Number":"Número de licença",
+    "Salary":"Salário",
+    "DOJ":"DOJ",
+    "Delete":"Excluir",
+    "Device Type":"Tipo de dispositivo",
+    "Configuration Command":"Comando de configuração",
+    "Location Command":"Comando Localização",
+    "Immobilzer Command":"Comando do imobilizador",
+    "Resume Command":"Comando Continuar",
+    "Reset Command":"Comando Reset",
+    "Immoblizer Type":"Tipo imobilizador",
+    "Port":"Porta",
+    "Edit":"Editar",
+    "Brand":"Marca",
+    "Description":"Descrição",
+    "Model":"Modelo",
+    "Icon Type":"Tipo de ícone",
+    "Voltage Calibration":"Calibração de tensão",
+    "Tank Size":"Tamanho do tanque",
+    "Mileage":"Quilometragem",
+    "Last Modified":"Última modificação",
+
+    "Search by phone":"Pesquisar por telefone",
+    "Search by":"Procurar por",
+    "Search by name":"Procura por nome",
+    "From Date":"Da data",
+    "To Date":"Até a presente data",
+    "FIND":"ENCONTRAR",
+    "Show":"mostrar",
+    "entries":"entradas",
+    "Name":"nome",
+    "Dealer":"Revendedora",
+    "Is Dealer":"é revendedor",
+    "Created on":"Criado em",
+    "Email":"O email",
+    "Phone":"telefone",
+    "Device Name":"Nome do dispositivo",
+    "Device Id":"ID de dispositivo",
+    "User":"Do utilizador",
+    "Expire On":"Expira em",
+    "Fuel Voltage(mv)":"Tensão de combustível (mv)",
+    "Sim Number":"Número Sim",
+    "Today ODO":"Hoje ODO",
+    "Search by Device ID":"Pesquisa por ID do dispositivo",
+    "Certificates":"Certificados",
+    "Export Pdf":"Exportar PDF",
+    "Search by Sim Number":"Pesquisa por número Sim",
+    "Export EXCEL":"Exportar EXCEL",
+    "Device IMEI":"IMEI do dispositivo",
+    "Lattitude":"Lattitude",
+    "Longitude":"Longitude",
+    "Speed":"Rapidez",
+    "Device Time":"Hora do dispositivo",
+    "Insertion Time":"Tempo de inserção",
+    "Last Push":"Último envio",
+    "Integration Respnse":"Resposta de integração",
+    "Ignition":"Ignição",
+    "Power":"Poder",
+    "Ext. Volt":"Ext. Volt",
+    "Fuel Volt":"Volt de combustível",
+    "Sattelite":"Satélite",
+    "Powercut Alarm":"Alarme Powercut",
+    "Inquiry Date":"Data da consulta",
+    "Customer Name":"nome do cliente",
+    "Message":"mensagem",
+    "Assigned To":"Atribuído a",
+    "Role":"Função",
+    "No data available in table":"Sem dados disponíveis na tabela",
+    "Showing":"Mostrando",
+    "Costumer Inquiry":"Inquérito ao Cliente",
+    "System Date":"Data do sistema",
+    "Vehicle Number":"Número do veículo",
+    "Chassis Number":"Número do chassi",
+    "Engine Number":"Número do motor",
+   
+    "VLT No.(IMEI)":"Número VLT (IMEI)",
+    "VLT SIM(IDEA)":"SIM VLT (IDEA)",
+    "VLT SIM(BSNL)":"SIM VLT (BSNL)",
+    "Approving RTO":"Aprovando a RTO",
+    "Owner Number":"Número do Proprietário",
+    "Alternate Number":"numero alternado",
+    "Dealer Name":"Nome do vendedor",
+    "Tracking Software":"Software de rastreamento",
+    "Costumer Name":"nome do cliente",
+    "Device ID":"ID de dispositivo",
+    "Operator Name":"Nome do operador",
+    "Protocol ID":"ID do protocolo",
+    "Command":"Comando",
+    "ACC":"acc",
+    "Battery Status":"Status da bateria",
+    "GPS DATA":"DADOS GPS",
+    "DEVICES MASTER":"DISPOSITIVOS MASTER",
+    "Groups":"Grupos",
+    "Add Group":"Adicionar grupo",
+    "Type group name":"Digite o nome do grupo",
+    "CONFIRM":"CONFIRME",
+    "CANCEL":"CANCELAR",
+    "Active":"Activo",
+    "InActive":"Inativa",
+    "Vehicles":"Veículos",
+    "Reg. Number":"Reg. Número",
+    "IMEI":"IMEI",
+    "Int. ID":"ID de integração",
+    "SIM 1":"SIM 1",
+    "SIM Provider":"Fornecedor de SIM",
+    "SIM2":"SIM2",
+    "Vehicle Type":"Tipo de Veículo",
+    "Owner":"Proprietária",
+    "IDLING Since":"IDLING Desde",
+    "STOPPED Since":"PARADO Desde",
+    "RUNNING Since":"EM FUNCIONAMENTO Desde",
+    "Video Tutorial":"Vídeo tutorial",
+    "VEHICLE LIST":"LISTA DE VEÍCULOS",
+    "MAINTENANCE REMINDER":"LEMBRETE DE MANUTENÇÃO",
+    "REMINDERS":"LEMBRETES",
+    "REMINDER":"LEMBRETE",
+    "Reminder Date":"Data do lembrete",
+    "Notification Type":"Tipo de notificação",
+    "Reminder Type":"Tipo de lembrete",
+    "Prior Notification(Days)":"Notificação prévia (dias)",
+    "Additional notes":"Notas Adicionais",
+    "SEARCH":"PROCURAR",
+    "Live Tracking":"Acompanhamento ao vivo",
+    "History Tracking":"Acompanhamento do histórico",
+    "Vehicle History":"História do veículo",
+    "Generate History":"gerar histórico",
+    "Play History":"Histórico do jogo",
+    "Select device":"Selecionar dispositivo",
+    "Please choose a device":"Por favor, escolha um dispositivo",
+    "OK":"Está bem",
+    "GEOFENCE":"GEOCERCA",
+    "Grid view":"Visualização em grade",
+    "List view":"exibição de lista",
+    "Geo Fencing Name":"Nome da cerca geográfica",
+    "Geofence type":"Tipo de cerca geográfica",
+    "Enter Alert":"Inserir alerta",
+    "Exit Alert":"Alerta de saída",
+    "Geofence Search":"Pesquisa Geocerca",
+    "Add Geofence":"Adicionar cerca geográfica",
+    "Select group":"Selecionar grupo",
+    "GEO FENCE NAME":"NOME DA CERCA GEO",
+    "Get Alert on":"Receba alertas em",
+    "Entering":"Entrando",
+    "Exiting":"Saindo",
+    "Create":"Crio",
+    "Select Your Geo Fence Region":"Selecione sua região de cerca geográfica",
+    "Add Geo Fence":"Adicionar cerca geográfica",
+    "Total Distance(Km)":"Distância total (Km)",
+    "Fuel consumption(Litre)":"Consumo de combustível (litro)",
+    "Ignition ON Time(Hr:Min)":"Tempo de ignição ligado (hora: min)",
+    "Ignition OFF Time(Hr:Min)":"Tempo de Desligamento da Ignição (Hr: Min)",
+    "Idle Time(Hr:Min)":"Tempo ocioso (hora: min)",
+    "Out of reach(Hr:Min)":"Fora do alcance (Hr: Min)",
+    "No GPS(Hr:Min:Sec)":"Sem GPS (H: Min: Sec)",
+    "Daily Report":"Relatório diário",
+    "Trips":"Viagens",
+    "Max Speed(Km/hr)":"Velocidade máxima (Km / h)",
+    "My App":"My App",
+    "AC Report":"Relatório AC",
+    "Loading":"Carregando",
+    "Vehicle":"Veículo",
+    "ON Time":"Na hora",
+    "OFF Time":"Tempo OFF",
+    "dashboard":"painel de controle",
+    "RULES":"REGRAS",
+    "Alert Report":"Relatório de alerta",
+    "No":"não",
+    "Date":"encontro",
+    "Power Cut":"corte de energia",
+    "Battery":"Bateria",
+    "Geofencing":"Geofencing",
+    "Overspeeding":"Excesso de velocidade",
+    "Daywise Report":"Relatório diário",
+    "Filter Report":"Relatório de filtro",
+    "Fuel Consumption Report":"Relatório de consumo de combustível",
+    "Vehicle name":"Nome do veículo",
+    "Start Time":"Hora de início",
+    "End Time":"Fim do tempo",
+    "Fuel Consumed (L)":"combustível consumido (L)",
+    "Distance(Kms)":"Distância (Kms)",
+    "In event count":"Na contagem de eventos",
+    "Out event count":"Contagem de eventos de saída",
+    "Start Location":"Localização inicial",
+    "End Location":"Localização final",
+    "Click to get device's last location":"Clique para obter a última localização do dispositivo",
+    "SOS Report":"Relatório SOS",
+    "Vehicle No.":"Número do veículo",
+    "Time":"Tempo",
+    "Address":"Endereço",
+    "Speed variation":"Variação de velocidade",
+    "Total K.M":"Total K.M",
+    "Generate Graph":"Gerar gráfico",
+    "Driver's Performance Report":"Relatório de Desempenho do Motorista",
+    "Total trip":"Viagem total",
+    "Total Ontime trip":"Viagem total Ontime",
+    "Ontime vehicles":"Veículos Ontime",
+    "group":"grupo",
+    "TRACKER":"TRACKER",
+    "REPORTS":"RELATÓRIOS",
+    "Speed Variation":"Variação de velocidade",
+    "Trip Report":"Relatório de viagem",
+    "Summary Report":"Relatório de resumo",
+    "Overspeeding Report":"Relatório de velocidade excessiva",
+    "Route Violation Report":"Relatório de violação de rota",
+    "Stoppage Report":"Relatório de interrupção",
+    "Ignition Report":"Relatório de ignição",
+    "Distance Report":"Relatório de distância",
+    "Driver's performance":"Desempenho do motorista",
+    "VEHICLE TYPE":"TIPO DE VEÍCULO",
+    "ROUTE LIST":"LISTA DE ROTA",
+    "ROUTE MAPPING":"MAPEAMENTO DE ROTA",
+    "Dealer Account":"Conta do Revendedor",
+    "Geofencing Report":"Relatório de Geofencing",
+    "Select Geofencing":"Selecione Geofencing",
+    "Vehicle Name":"Nome do Veículo",
+    "In/Out":"Entrada / Saída",
+    "Datetime":"Data hora",
+    "Location":"Localização",
+    "GeoFence Name":"Nome do GeoFence",
+    "Click here to get address":"Clique aqui para obter o endereço",
+    "Select Your Device":"Selecione seu dispositivo",
+    "IDLE REPORT":"RELATÓRIO INTEIRO",
+   
+    "Min Idle Time (Min)":"Min Idle Time (Min)",
+    "Duration (HH:MM:SS)":"Duração (HH: MM: SS)",
+    "AC Status":"Status da CA",
+    "TRACKERS":"TRACKERS",
+    "Date Time":"Data hora",
+    "On/Off":"Ligado desligado",
+    "Overspeed":"Excesso de velocidade",
+    "POI name":"Nome do PI",
+    "Arrival Time":"Tempo de chegada",
+    "Departure Time":"Hora de partida",
+    "Route":"Rota",
+    "POI Report":"Relatório de POI",
+    "From Time":"De tempos",
+    "To Time":"To Time",
+    "Duration":"Duração",
+    "Start Point":"Ponto de partida",
+    "End Point":"Ponto final",
+    "Total KM":"KM total",
+    "Fuel Consumption (Litre)":"Consumo de combustível (litro)",
+    "Total Running Time (HH:MM)":"Tempo total de execução (HH: MM)",
+    "Total Stop Time (HH:MM)":"Tempo total de parada (HH: MM)",
+    "Total Idle Time (HH:MM)":"Tempo ocioso total (HH: MM)",
+    "Total Out of reach Time (HH:MM)":"Tempo total fora do alcance (HH: MM)",
+    "Total No gps Time (HH:MM)":"Tempo total sem GPS (HH: MM)",
+    "Overspeeding (HH:MM)":"Excesso de velocidade (HH: MM)",
+    "Route Violation":"Violação de rota",
+    "TRAVEL PATH REPORT":"RELATÓRIO DE VIAGEM",
+    "Device":"Dispositiva",
+    "ODO (K.M.)":"ODO (K.M.)",
+    "Distance (K.M.)":"Distância (K.M.)",
+    "Cumulative Distance (K.M.)":"Distância cumulativa (K.M.)",
+    "TRIP REPORT":"RELATÓRIO DE VIAGEM",
+    "TRIP ID":"ID DA VIAGEM",
+    "VEHICLE NAME":"NOME DO VEÍCULO",
+    "SOURCE ADDRESS":"ENDEREÇO DE ORIGEM",
+    "DESTINATION ADDRESS":"ENDEREÇO DE DESTINO",
+    "DISTANCE":"DISTÂNCIA",
+    "DURATION":"DURAÇÃO",
+    "TRIP STATUS":"ESTADO DA VIAGEM",
+    "MILEAGE":"QUILOMETRAGEM",
+    "ADD EXPENSES":"ADICIONAR DESPESAS",
+    "EXPENSES LIST":"LISTA DE DESPESAS",
+    "Amount":"Montante",
+    "Currency":"Moeda",
+    "Payment Mode":"Modo de pagamento",
+    "Expense type":"Tipo de despesa",
+    "GEO FENCING":"CERCA DE GEO",
+    "ADD DEVICE":"ADICIONAR DISPOSITIVO",
+    "GENERAL SETTING":"CONFIGURAÇÃO GERAL",
+    "Device ID *":"ID de dispositivo *",
+    "Enter Device ID":"Digite a ID do dispositivo",
+    "Device Name * ":"Nome do dispositivo *",
+    "Enter Device Name":"Digite o nome do dispositivo",
+    "SIM Number":"Número SIM",
+    "SIM Number 2":"Número SIM 2",
+    "SIM Provider 2":"Fornecedor de SIM 2",
+    "Integration ID":"ID de integração",
+    "Select User":"Selecionar Usuário",
+    "Driver Contact Number":"Número de contato do motorista",
+    "Select Vehicle type*":"Selecione o tipo de veículo *",
+    "Type of Vehicle":"Tipo de veículo",
+    "mm/dd/yyyy":"dd / mm / aaaa",
+    "ICCICD Number":"Número ICCICD",
+    "IMSI":"IMSI",
+    "Unique ID":"ID único",
+    "CID number":"Número CID",
+    "Chassis number":"Número do chassi",
+    "Comapny Name":"Nome da empresa",
+    "Company Address":"Endereço da companhia",
+    "Transport Office City":"Cidade do escritório de transporte",
+    "Transport Office State":"Estado do Gabinete de Transporte",
+    "Invoice Number":"Número da fatura",
+    "Number of SOS":"Número de SOS",
+    "Doc Type":"Tipo de Doc",
+    "Enter SIM Provider":"Entrar no provedor SIM",
+    "Enter SIM Provider 2":"Entrar no provedor SIM 2",
+    "Driver's contact number":"Número de contato do motorista",
+    "Device model *":"Modelo do dispositivo *",
+    "Vehicle type * ":"Tipo de Veículo *",
+    "Expiration date":"Data de validade",
+    "ADD DEVICE":"ADICIONAR DISPOSITIVO",
+    "Engine number":"Número de Motor",
+    "Type of Vehicle ":"Tipo de veículo",
+    "Manufacturing company":"Empresa de fabricação",
+    "Registration date ":"Data de registro",
+    "Date of Manufacturing Year ":"Data do ano de fabricação",
+    "Last fitness date ":"Última data de condicionamento físico",
+    "ICCICD Number ":"Número ICCICD",
+    "Fitment Date ":"Data de montagem",
+    "IMSI ":"IMSI",
+    "Unique ID ":"ID único",
+    "CID number ":"Número CID",
+    "Chassis number ":"Número do chassi",
+    "Comapny Name ":"Nome da empresa",
+    "Comapny Address":"Endereço da companhia",
+    "Invoice number":"Número da fatura",
+    "Invoice Date":"Data da fatura",
+    "No. of SOS ":"Número de SOS",
+    "Add Document field":"Campo Adicionar documento",
+    "Document issued date :":"Data de emissão do documento:",
+    "UPDATE AND SAVE":"ATUALIZAR E SALVAR",
+    "Reason":"Razão",
+    "Password":"Senha",
+    "Driver Search":"Pesquisa de Driver",
+    "Enter User Id":"Digite o ID do usuário",
+    "Enter First name":"Introduza o primeiro nome",
+    "Enter Last name":"Insira o último nome",
+    "Enter email":"Introduzir email",
+    "Enter mobile number":"Digite o número do celular",
+    "Enter Address":"Insira o endereço",
+    "EDIT CUSTOMER":"EDITAR CLIENTE",
+    "Delete Dealer":"Excluir revendedor",
+    "Documents":"Documentos",
+    "Document Name":"Nome do Documento",
+    "Document number":"Número do documento",
+    "Action":"Açao",
+    "Add":"Adicionar",
+    "Upload Documents *":"Carregar documentos *",
+    "Save":"Salve",
+    "delete":"excluir",
+    "Doc number":"Doc número",
+    "Download":"Baixar",
+    "Yes, Delete it!":"Sim, exclua",
+    "Cancel":"Cancelar",
+    "EDIT DEALER":"EDIT REVENDEDOR",
+    "Are you sure ?":"Você tem certeza ?",
+    "you want to delete dealer":"você deseja excluir o revendedor?",
+    "Edit Model":"Editar modelo",
+    "Enter device model":"Digite o modelo do dispositivo",
+    "Configuration command":"Comando de configuração",
+    "Location command":"Comando de localização",
+    "Imobilizer command":"Comando do imobilizador",
+    "Resume command":"Comando Continuar",
+    "Reset command":"Comando Reset",
+    "Manufacturer":"Fabricante",
+    "Server Command":"Comando do servidor",
+    "Mobile Command":"Comando Móvel",
+    "Update":"Atualizar",
+    "Edit trip details":"Editar detalhes da viagem",
+    "Route name":"Nome da rota",
+    "Vehicles name":"Nome dos veículos",
+    "Radius (in meter)":"Raio (em metros)",
+    "Driver name":"Nome do motorista",
+    "Loading site":"Carregando site",
+    "Unloading site":"Site de descarregamento",
+    "LR Number":"Número LR",
+    "Device Name: ":"Nome do dispositivo:",
+    "Days: ":"Dias",
+    "M":"M",
+    "T":"T",
+    "W":"W",
+    "Th":"Th",
+    "F":"F",
+    "Sa":"Sa",
+    "S":"S",
+    "Edit Vehicle Type":"Editar tipo de veículo",
+    "Brand:":"Marca",
+    "Enter Brand Name":"Digite o nome da marca",
+    "Description:":"Descrição:",
+    "Enter Description":"Digite Descrição",
+    "Please Enter Description":"Digite a descrição",
+    "Select icon type":"Selecione o tipo de ícone",
+    "Voltage Value":"Valor da tensão",
+    "Fuel value":"Valor do combustivel",
+    "add":"adicionar",
+    "Volatage Calibrator":"Calibrador de tensão",
+    "Please Enter voltage":"Por favor, insira a tensão",
+    "Please fuel value":"Favor valor do combustível",
+    "Please Enter Tank Size":"Digite o tamanho do tanque",
+    "FUEL EVENTS":"EVENTOS DE COMBUSTÍVEL",
+    "Please Enter Mileage":"Digite a milhagem",
+    "Fuel Change (L)":"Mudança de combustível (L)",
+    "Search Device":"Pesquisar dispositivo",
+    "Generate Report":"Gerar relatório",
+    "Sleep Mode Temprature":"Temperatura do modo de suspensão",
+    "Temprature":"Temperatura",
+    "ON":"EM",
+    "OFF":"FORA",
+    "list":"lista",
+    "Enter GEO FENCE NAME":"Digite o NOME DA CERCA GEO",
+    "Get Alert on :":"Receba alertas em:",
+    "Select Your Geo Fence Region :":"Selecione sua região de cerca geográfica:",
+    "Search Box":"Caixa de pesquisa",
+    "--Select group--":"Selecionar grupo",
+    "--Geofence type--":"Tipo de cerca geográfica",
+    "--GEO FENCE NAME--":"--NOME DA CERCA GEO--",
+    "Admin":"Administradora",
+    "close":"perto",
+    "DEVICES":"DISPOSITIVAS",
+    "Matrix Input":"Matrix Input",
+    "Device Id-":"ID de Dispositivo-",
+    "Matrix Name":"Nome da Matriz",
+    "Topic":"Tópico",
+    "Ext. Volt.":"tensão externa",
+    "Fuel Volt.":"tensão de combustível",
+    "Real Time GPS Based Vechicle Tracking":"Rastreamento de veículo baseado em GPS em tempo real",
+    "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.":"O rastreamento de veículos ao vivo fornece atualizações em tempo real, permitindo que você obtenha as informações mais recentes sobre o seu vechile.",
+    "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.":"Mapas corporativos da API do Google para uso comercial que fornecem detalhes precisos da localização dos veículos.",
+    "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.":"Sistema de rastreamento fácil de usar que ajuda a rastrear e localizar a frota sem esforço no Click.",
+    "Software as a Service(Saas) with perpetual uptime.":"Software como serviço (Saas) com tempo de atividade permanente.",
+    "Alerts and Event Notifications":"Alertas e notificações de eventos",
+    "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.":"Receba notificações enquanto estiver em movimento por SMS, email e aplicativos móveis, você será mantido atualizado com alertas em tempo real.",
+    "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.":"Vários destinatários podem receber alertas, não apenas você, mas também os mais próximos, pelos alertas gerados para obter ajuda imediata.",
+    "Schedule your alerts as per your convenience that suits your needs":"Programe seus alertas de acordo com sua conveniência que atenda às suas necessidades",
+    "Detailed Reports for analysis is also available for making quik decisions":"Relatórios detalhados para análise também estão disponíveis para tomar decisões de quik",
+    "Geofences":"Geocercas",
+    "Upload all Geofence in your account and assign them to the vehicles.":"Carregue todas as Geocerca da sua conta e atribua-as aos veículos.",
+    "Find and mark geofences without knowing latitude and longitude values.":"Encontre e marque cercas geográficas sem conhecer os valores de latitude e longitude.",
+    "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.":"Geocerca de polígono disponível para fácil acesso. Todas as cercas geográficas podem ser marcadas conforme a conveniência do usuário e podem ser atribuídas aos veículos para que todos os alertas sejam enviados a você. Garanta seus entes queridos e garanta o trabalho realizado por suas forças.",
+    "Date and Time Based reports available for analyzing vehicle usage.":"Relatórios baseados em data e hora disponíveis para analisar o uso do veículo.",
+    "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.":"Localização dos veículos, todos os registros mostram a localização do veículo em que ele estava e fácil de gerenciar o incidente onde ocorreu.",
+    "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).":"Relatório consolidado de veículos / frota. Fornece um resumo do dia para o (s) veículo (s)",
+    "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..":"Relatório de alerta, relatório consolidado para todos os alertas gerados pelo veículo. Excesso de velocidade, adulteração, ignição etc",
+    "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.":"Relatório de cerca geográfica, relatório detalhado quando e a que horas o veículo entrou nas áreas geográficas.",
+    "How it works":"Como funciona",
+    "Real-time tracking":"Rastreamento em tempo real",
+    "Advanced Reporting":"Relatórios avançados",
+    "Alerts & Warning":"Alertas e avisos",
+    "2-Way messaging":"Mensagens bidirecionais",
+    "Engine immobilisation":"Imobilização do motor",
+    "Monitor gauges":"Monitorar medidores",
+    "Access anytime, anywhere!":"¡Acesse a qualquer hora, em qualquer lugar!",
+    "Web browser based software":"Software baseado em navegador da Web",
+    "Android app":"Aplicativo para Android",
+    "iPhone app":"aplicação para iPhone",
+    "Request for Demo":"Solicitação de demonstração",
+    "Get Detail":"Obter detalhes",
+    "Export To Excel":"Exportar para Excel",
+    "Loading Site":"Carregando Site",
+    "Distance":"Distância",
+    "ETA":"TEA",
+    "directions":"instruções",
+    "Google Traffic":"Tráfego do Google",
+    "Google Hybrid":"Google Hybrid",
+    "Google Satellite":"Google Satellite",
+    "Google Physical":"Google Physical",
+    "Google Street":"Google Street",
+    "map":"mapa",
+    "Please Select Your Device, From/To Date & Time to view history from above options":"Selecione seu dispositivo, de / para data e hora para visualizar o histórico das opções acima",
+    "Generate Map":"Gerar mapa",
+    "Trip Name":"Nome da viagem",
+    "Select destination":"Selecionar destino",
+    "CREATE TRIP":"CRIAR VIAGEM",
+    "Total Distance: ":"Distância total",
+    "Idle Time (Min)":"Tempo ocioso (min)",
+    "Go to Site >":"Ir para o site>",
+    "Welcome To OneQlik":"Bem-vindo ao OneQlik",
+    "Login":"Conecte-se",
+    "Username / Phone Number":"Nome de usuário / número de telefone",
+    "Enter Mobile number*":"Digite o número do celular *",
+    "Confirm New Password":"Confirme a nova senha",
+    "Send OTP":"Enviar OTP",
+    "Back to Login":"Volte ao login",
+    "Reset Password":"Redefinir senha",
+    "Back to previous Form":"Voltar ao formulário anterior",
+    "Forgot Username / Password?":"Esqueceu o nome de usuário / senha?",
+    "First Name":"Primeiro nome",
+    "Last Name":"Último nome",
+    "Email Id":"Identificação do email",
+    "Organisation":"Organização",
+    "notifications":"notificações",
+    "Notification Sound":"Som de notificação",
+    "Notifications":"notificações",
+    "Add Phone":"Adicionar telefone",
+    "Close":"Perto",
+    "Add Email":"Adicionar email",
+    "POI details":"Detalhes do PI",
+    "Add POI details":"Adicionar detalhes do PI",
+    "Type POI name":"Digite o nome do POI",
+    "Previous point duration":"Duração do ponto anterior",
+    "Days":"Dias",
+    "Hours":"Horas",
+    "Minutes":"Minutos",
+    "Next point duration":"Next point duration",
+    "Min":"Min",
+    "Halt":"Parar",
+    "Mapped Vehicles":"Veículos Mapeados",
+    "Radius":"Raio",
+    "POI Name":"Nome do PI",
+    "Enter a location":"Digite um local",
+    "ADD":"ADICIONAR",
+    "Routes Search":"Pesquisa de rotas",
+    "Route Status":"Status da rota",
+    "Source":"Fonte",
+    "Destination":"Destino",
+    "Test name":"Nome de teste",
+    "Test Source":"Origem do teste",
+    "Test destination":"Destino do teste",
+    "Routes":"Rotas",
+    "Untracked vehicles":"Veículos não rastreados",
+    "Please Enter Email ID / Phone Number":"Digite o número de telefone / ID do telefone",
+    "Please Enter Password":"Digite a senha",
+    "Please Re Enter Password":"Digite a senha novamente",
+    "Delete route":"Excluir rota",
+    "Are you sure to delete this route ??":"Tem certeza de que deseja excluir esta rota?",
+    "DELETE":"EXCLUIR",
+    "Create Trip":"Criar viagem",
+    "One way trip":"Viagem só de ida",
+    "Two way trip":"Viagem de ida e volta",
+    "Round trip":"Ida e volta",
+    "Start Date/Time":"Data / Hora de Início",
+    "End Date/Time":"Data / hora de término",
+    "Planned start time":"Hora de início planejada",
+    "Planned end time":"Hora de término planejada",
+    "Actual start time":"Hora de início real",
+    "Actual end time":"Hora final real",
+    "Trip History":"Histórico de viagem",
+    "Trip type":"Tipo de viagem",
+    "Routes name":"Nome das rotas",
+    "Total Distance":"Distância total",
+    "Get route":"Get route",
+    "Parameters":"Parâmetros",
+    "Enter First Name":"Introduza o primeiro nome",
+    "Enter Last Name":"Insira o último nome",
+    "Invalid Password":"senha inválida",
+    "Confirm Password":"Confirme a Senha",
+    "Please Enter Confirm Password":"Digite Confirmar Senha",
+    "Organisation Name":"Nome da organização",
+    "Type of user":"Tipo de usuário",
+    "Mobile Verification":"Verificação para celular",
+    "Mobile Number":"Número de celular",
+    "TRIP HISTORY":"HISTÓRICO DE VIAGEM",
+    "Event name":"Nome do evento",
+    "Event time":"Hora do evento",
+    "Driver":"Motorista",
+    "Restore":"Restaurar",
+    "Delete Permanently":"Apagar permanentemente",
+    "Select no of Days to get reminder for your services":"Selecione o número de dias para receber lembretes por seus serviços",
+    "Prior Notification (Days)":"Notificação prévia (dias)",
+    "Enter Additonal information here...":"Digite informações adicionais aqui ...",
+    "Calibration":"Calibração",
+    "Get Added Vehicle List": "Lista de veículos adicionados",
+    "Get Expired Vehicle List":"Obter lista de veículos expirados",
+    "Get Renewed Vehicle List":"Obter lista de veículos renovados",
+    "Today":"Hoje",
+    "Week":"semana",
+    "Month":"Mês",
+    "System Logs":"Logs do sistema",  
+    "Message Utility":"Utilitário de Mensagens",
+    "Sensor Detail":"Detalhe do sensor",
+    "Billing Detail":"Detalhes de cobrança",
+    "Dashboard":"painel de controle",
+    "Vehicle List":"Lista de Veículos",
+    "Maintenance Reminder":"Lembrete de Manutenção",
+    "Vehicle Expense": "Despesa do veículo",
+    "Tracking":"Rastreamento",
+    "Daily Logs": "Daily Logs",
+    "Route variations Reports":"Relatórios de variações de rota",
+    "Working Hours Report": "Relatório de Horas de Trabalho",
+    "Trip Generation":"Geração de viagem",
+    "API Setting":"Configuração da API",
+    "Transection Detail":"Detalhes da transação",
+    "Last Names":"Últimos nomes",
+    "Fuel Unit":"Unidade de combustível",
+    "Timezone":"Fuso horário",
+    "Upload Image":"Enviar Imagem",
+    "Trip Setting":"Configuração de viagem",
+  
+    "API Key":"Chave API",
+    "Change":"mudança",
+    "Ignition Notification":"Notificação de ignição",
+    "POI Notification":"Notificação de POI",
+    "Power Notification":"Notificação de energia",
+    "Fuel Notification":"Notificação de combustível",
+    "Geo-Fence Notification":"Notificação de Cerca Geográfica",
+    "Overspeed Notification":"Notificação de velocidade excessiva",
+    "Route Notification":"Notificação de rota",
+    "AC Notification":"Notificação CA",
+    "Max-Stoppage Notification":"Notificação de interrupção máxima",
+    "SOS Notification":"Notificação SOS",
+    "High":"Alta",
+    "Medium":"Médio",
+    "Low":"baixa",
+    "TRANSACTION DETAIL":"DETALHE DA TRANSAÇÃO",
+    "Sold By":"Vendido por",
+    "Purchased By":"Comprado por",
+    "Allocation Date":"Data de alocação",
+    "Points":"Pontos",
+    "Rate":"Taxa",
+    "Total Amount":"Valor total",
+    "Credit Date":"Data do crédito",
+    "Remarks":"Observações",
+    "Add Driver":"Adicionar Driver",
+    "ADD DRIVER" : "ADICIONAR CONDUTOR",
+    "Add Device Model":"Adicionar modelo de dispositivo",
+    "Enter Model":"Inserir modelo",
+    "Enter Mileage" : "Inserir milhagem",
+    "VOLTAGE VALUE":"VALOR DA TENSÃO",
+    "FUEL VALUE" : "VALOR DO COMBUSTIVEL",
+    "TEMPRATURE VALUE":"VALOR DA TEMPERATURA",
+    "Fuel Calibration":"Calibração de combustível",
+    "Temprature Calibration":"Calibração de temperatura",
+    "Vehicle Types":"Tipos de veículos",
+    "Information":"Em formação",
+    "column in vehicle type table for get more detail":"coluna na tabela de tipo de veículo para obter mais detalhes",
+    "Click on":"Clique em",
+    "Token":"Símbolo",
+    "Yesterday":"Ontem",  
+    "SELECT MODE":"MODO DE SELEÇÃO",
+    "Notification":"Notificação",
+    "SMS":"SMS",
+    "DEALER":"REVENDEDORA",
+    "TITLE":"TÍTULO",
+    "MESSAGE":"MENSAGEM",
+    "Type subject here":"Digite o assunto aqui",
+    "Type Message here":"Digite aqui a mensagem",
+    "RESET":"REDEFINIR",
+    "SEND":"ENVIAR",
+    "Notification Center":"Centro de Notificação",
+    "PREVIOUS":"ANTERIOR",
+    "NEXT":"PRÓXIMA",
+    "Created On":"Criado em",
+    "Driver's Name":"Nome do motorista",
+    "Driver's Contact" : "Contato do motorista",
+    "Device Setitng":"Configuração do dispositivo",
+    "Share Device":"Compartilhar dispositivo", 
+    "Share User" : "Compartilhar usuário",
+    "MAINTENANCE REMINDERS":"LEMBRETES DE MANUTENÇÃO",
+    "Additional Notes":"Notas Adicionais",
+    "Updated On":"Atualizado em",
+    "Vehicle Expenses":"Despesas com Veículos",
+    "ADD EXPENSE":"ADICIONAR DESPESA",
+    "Select Vehicle":"Selecionar veículo",
+    "Select Date":"Selecione a data",
+    "Enter Amount":"Digite o valor",
+    "Payment Mode":"Modo de pagamento",
+    "SAVE":"SALVE",
+    "CLOSE":"PERTO",
+    "Line Thickness":"Espessura da linha",
+    "Idle Time":"Tempo ocioso",
+    "From":"de",
+    "To":"para",
+    "Show Track":"Mostrar faixa",
+    "Socket Data":"Dados do soquete",
+    "Nearby Vehicles":"Veículos nas proximidades",
+    "GPRS Command":"Comando GPRS",
+    "Vehicle Street View":"Vista da rua do veículo",
+    "Fuel Voltage":"Tensão do combustível",
+    "Heading":"Título",
+    "GPS Positioned":"GPS Posicionado",
+    "Commando":"Comando",
+    "Ext. Voltage":"Ext. Voltagem",			 	 										
+    "LATTITUDE":"LATTITUD",
+    "LONGITUDE":"LONGITUD",
+    "DEVICE":"DISPOSITIVA",
+    "TIME":"TEMPO",
+    "INSERTION":"INSERÇÃO",
+    "LAST PUSH":"ÚLTIMA PRESSÃO",
+    "INT. RESPONSE":"INT. RESPOSTA",
+    "FUEL VOLTAGE":"TENSÃO DE COMBUSTÍVEL",
+    "RAW DATA":"DADOS NÃO TRATADOS",
+    "POWERCUT ALARM":"ALARME DE POWERCUT",
+    "SATTELITE":"SATÉLITE",
+    "RAW IO":"RAW IO",
+    "Select Distance (in Meters)":"Selecionar distância (em metros)",
+    "meters":"metros",
+    "STATUS":"ESTADO",
+    "ACTION":"AÇAO",
+    "TYPE":"TIPO",
+    "MODEL":"MODELO",	
+    "EXECUTION TIME":"TEMPO DE EXECUÇÃO",
+    "QUEUED TIME":"TEMPO EM QUEU",	
+    "COMMAND": "COMANDO",
+    "Polygon":"Polígono",
+    "Geofence Type":"Tipo de cerca geográfica",
+    "Geofence Name":"Nombre de geofence",
+    "Halt Alert":"Alerta de parada",
+    "Geofence Alert":"Geofence Alert",
+    "Geofence Color":"Geofence Color",
+    "Route mapping":"Mapeamento de rotas", 
+    "Route by status":"Rota por status",												
+    "NAME":"NOME",
+    "USER ID":"ID DO USUÁRIO",
+    "EMAIL ID":"IDENTIFICAÇÃO DO EMAIL",
+    "PHONE":"TELEFONE",
+    "PASSWORD":"SENHA",
+    "CREATED ON":"CRIADO EM",
+    "EXPIRES ON":"EXPIRA EM",
+    "TOKEN":"SÍMBOLO",
+    "LAST ACTIVITY":"ULTIMA ATIVIDADE",
+    "LAST LOGIN":"ÚLTIMO LOGIN",
+    "ALLOCATED POINTS":"PONTOS ALOCADOS",
+    "DOCUMENTS":"DOCUMENTOS",
+    "EDIT":"EDITAR",
+    "ADD DEALER":"ADICIONAR REVENDEDOR",
+    "Upload Documents":"Carregar documentos",
+    "SUBMIT":"ENVIAR",
+    "ADD CUSTOMER":"ADICIONAR CLIENTE",
+    "Vehicle":"Veículo",
+    "Fuel":"Combustível",
+    "Ignition ON":"Ignição ligada",
+    "Ignition OFF":"Ignição DESLIGADA",
+    "Out of reach":"Fora do alcance",
+    "No GPS":"No GPS", 
+    "Max Speed":"Velocidade máxima",
+    "No GPS (Hr:Min:Sec)":"Sem GPS (H: Min: Sec)",
+    "Start ODO (Kms.)":"Iniciar ODO (Kms.)",
+    "End ODO (Kms.)":"Fim ODO (Kms.)",
+    "Total KMS (As per Logbook)":"KMS total (conforme o diário de bordo)",
+    "Total KMS (As per GPS)":"KMS total (conforme o GPS)",
+    "Difference In Logbook and Gps":"Diferença no diário de bordo e nos GPS",
+    "% of difference":"% de diferença",
+    "Distance (Kms.)":"Distância (Kms.)",
+    "Moving Time (hh:mm)":"Tempo em movimento (hh: mm)",
+    "Stoppage Time (hh:mm)":"Tempo de parada (hh: mm)",
+    "Idle Time (hh:mm)":"Tempo ocioso (hh: mm)",
+    "Fuel Report":"Relatório de Combustível",
+    "From Location":"From Location",
+    "To date":"Até a presente data",
+    "To location":"A la ubicación",
+    "Distance (Km/hr)":"Distância (Km / h)",
+    "Loading Unloading Trip":"Carregando Descarga de Viagem",
+    "Trip Start":"Início da viagem",
+    "Trip End":"Fim da viagem",
+    "Trip Start time":"Hora de início da viagem",
+    "Trip End time":"Hora de término da viagem",
+    "Duration (HH:MM)":"Duração (HH: MM)",
+    "Running Time (HH:MM)":"Tempo de execução (HH: MM)",
+    "Stoppage Time (HH:MM)":"Tempo de interrupção (HH: MM)",
+    "Idle Time (HH:MM)":"Tempo ocioso (HH: MM)",
+    "Device SOS Report":"Relatório SOS do dispositivo",
+    "Working Hours (HH:MM)":"Horas de trabalho (HH: MM)",
+    "Stopping Hours (HH:MM)":"Horas de parada (HH: MM)",
+    "Detail":"Detalhe",
+    "Deleted Device":"Dispositivo excluído",
+    "Deleted users":"Usuários excluídos",
+    "Device":"Dispositivo"
+
+
+}
\ No newline at end of file
diff --git a/src/assets/i18n/sp.json b/src/assets/i18n/sp.json
new file mode 100644
index 0000000..d871b1c
--- /dev/null
+++ b/src/assets/i18n/sp.json
@@ -0,0 +1,859 @@
+{
+    "ADMIN": "ADMINISTRACIÓN",
+    "DASHBOARD": "TABLERO",
+    "GROUPS": "GRUPOS",
+    "VEHICLES": "VEHICULOS",
+    "Account Setting": "Ajustes de cuenta", 
+    "General Setting": "Ajustes generales",
+    "Application language":"Idioma de aplicación",
+    "Language Setting" : "Ajustes de idioma",
+    "Notification Settings":"Ajustes de las notificaciones",
+    "TRACKING": "RASTREO",
+    "GEO FENCING":"GEOCERCAS",
+    "Reset Password":"Restablecer la contraseña",
+    "Reports": "Informes",
+    "IDLE Reports": "Informes de Ralenti",
+    "Fuel Reports": "Informes de Combustible",
+    "Daily Reports": "Reportes Diarios",
+    "AC Reports": "Informes de AC",
+    "Daywise Reports": "Informes Diarios",
+    "Fuel Consumption Reports": "Informes de Consumo de Combustible",
+    "Summary Reports":" Informes en Resumen",
+    "Overspeeding Reports": "Informes de Exceso de Velocidad",
+    "Route Violation Reports": "Informes de Infracción de ruta",
+    "POI List" : " Lista de POI",
+    "Stoppage Reports": "Informes de Paradas",
+    "Route list" : " Lista de ruta",
+    "Route Mapping" : "Mapeo de ruta",
+    "Ignition Reports": "Informes de encendido",
+    "Edit Account" : "Editar cuenta",
+    "Notif" : "Notificación",
+    "Driver Master"  :"Conductor Principal",
+    "Device Master" : "Dispositivo Principal ",
+    "Priority" : "Prioridad",
+    "Distance Reports": "Informes de Distancia",
+    "Device Model" : "Modelo de dispositivo",
+    "User Master" : "Usuario Principal",
+    "GPS Master" : "GPS Principal",
+    "Inventory List" :"Lista de inventario",
+    "Geofencing Reports": "Informes de Geocerca",
+    "Travel Path Reports": "Informes de Ruta de viaje",
+    "POI Reports" : "Informes de POI",
+    "SOS Reports" :"Informes de SOS",
+    "Driver Performance Reports" : "Informes de rendimiento del conductor",
+    "Driver Performance Report" : "Informes de rendimiento del conductor",
+    "Trip Reports": "Informes de Viaje",  
+    "POI LIST": "LISTA DE POI",
+    "ROUTES": "RUTAS",
+    "NOTIFICATIONS": "NOTIFICACIONES",
+    "DISTRIBUTERS": "DISTRIBUIDORES",
+    "DEALERS": "DISTRIBUIDORES",
+    "Dealers": "Distribuidores",
+    "CUSTOMERS": "CLIENTES",
+	"Customers"  : "Clientes",
+    "RUNNING": "MOVIMIENTO",
+    "IDLE": "RALENTI",
+    "STOPPED": "DETENIDO",
+    "EXPIRED": "EXPIRADO",
+    "OUT OF REACH": "FUERA DE ALCANCE",
+    "NO GPS": "SIN GPS",
+    "Device Icon": "Ícono de dispositivo",
+    "Registration number":"Número de registro",
+    "Group":"Grupo",
+    "Today's ODO":"KM de hoy",
+    "Total ODO":"KM total",
+    "TOTAL VEHICLES":"TOTAL DE VEHICULOS",
+    "ADDED VEHICLES":"VEHICULOS AÑADIDOS",
+    "Icon":"Icono",
+    "Temp":"Temperatura",
+    "Fuel":"combustible",
+    "IGN":"Encendido",
+    "Last update":"Última actualización",
+    "RENEWED VEHICLES":"VEHICULOS RENOVADOS",
+    "GOING TO EXPIRE VEHICLES":"IR A VENCER VEHÍCULOS",
+    "NO DATA":"SIN DATOS",
+    "Last location":"Última ubicación",
+    "Last updated on":"Última actualización",
+    "Trip status":"Estado del viaje",
+    "Status":"Estado",
+    "Satellites":"Satélites",
+    "Last Speed":"Última velocidad",
+    "FUEL (LITRE)":"COMBUSTIBLE (LITRO)",
+    "GPS":"GPS",
+    "AC":"C.A.",
+    "POWER":"ALIMENTACIÓN",
+    "GSM Signal":"Señal GSM",
+    "IGNITION":"IGNICIÓN",
+    "NOTIFICATION":"NOTIFICACIÓN",
+    "My Account":"Mi cuenta",
+    "Log Out":"Cerrar sesión",
+    "Refresh Data":"Actualizar Datos",
+    "Device Search":"Buscar dispositivo",
+    "Previous":"Anterior",
+    "Next":"Siguiente",
+    "DRIVER MASTER":"CONDUCTOR PRINCIPAL",
+    "DEVICE MODEL":"MODELO DE DISPOSITIVO",
+    "VEHILE TYPE":"TIPO DE VEHICULO",
+    "USER MASTER":"USUARIO PRINCIPAL",
+    "DEVICE MASTER":"DISPOSITIVO PRINCIPAL",
+    "GPS TRACKER":"EQUIPO GPS",
+    "CMD PACKETS":"PAQUETES CMD",
+    "INVENTORY LIST":"LISTA DE INVENTARIO",
+    "CUSTOMER INQUIRY":"Consulta de cliente",
+    "Driver Name":"Nombre del conductor",
+    "Driver Address":"Dirección del conductor",
+    "Driver Status":"Estado del conductor",
+    "License Number":"Número de licencia",
+    "Salary":"Salario",
+    "DOJ":"DOJ",
+    "Delete":"Eliminar",
+    "Device Type":"Tipo de dispositivo",
+    "Configuration Command":"Comando de configuración",
+    "Location Command":"Comando de ubicación",
+    "Immobilzer Command":"Comando Paro de Motor",
+    "Resume Command":"Comando Reactivar Motor",
+    "Reset Command":"Comando de reinicio",
+    "Immoblizer Type":"Tipo de inmovilizador",
+    "Port":"Puerto",
+    "Edit":"Editar",
+    "Brand":"Marca",
+    "Description":"Descripción",
+    "Model":"Modelo",
+    "Icon Type":"Tipo de icono",
+    "Voltage Calibration":"Calibración de voltaje",
+    "Tank Size":"Tamaño del tanque",
+    "Mileage":"Kilometraje",
+    "Last Modified":"Última modificación",
+
+    "Search by phone":"Buscar por telefono",
+    "Search by":"Buscar por",
+    "Search by name":"Buscar por nombre",
+    "From Date":"Fecha Inicial",
+    "To Date":"Fecha Final",
+    "FIND":"ENCONTRAR",
+    "Show":"Mostrar",
+    "entries":"Entradas",
+    "Name":"Nombre",
+    "Dealer":"Distribuidor",
+    "Is Dealer":"Es distribuidor",
+    "Created on":"Creado el",
+    "Email":"Email",
+    "Phone":"Teléfono",
+    "Device Name":"Nombre del Dispositivo",
+    "Device Id":"ID del dispositivo",
+    "User":"Usuario",
+    "Expire On":"Vence el",
+    "Fuel Voltage(mv)":"Voltaje de combustible (mv)",
+    "Sim Number":"Numero SIM",
+    "Today ODO":"KM de Hoy",
+    "Search by Device ID":"Buscar por ID de dispositivo",
+    "Certificates":"Certificados",
+    "Export Pdf":"Exportar PDF",
+    "Search by Sim Number":"Buscar por SIM",
+    "Export EXCEL":"Exportar EXCEL",
+    "Device IMEI":"IMEI de Dispositivo",
+    "Lattitude":"Latitud",
+    "Longitude":"Longitud",
+    "Speed":"Velocidad",
+    "Device Time":"Hora del dispositivo",
+    "Insertion Time":"Hora de inserción",
+    "Last Push":"Último Push",
+    "Integration Respnse":"Respuesta de Integración",
+    "Ignition":"Ignición",
+    "Power":"Alimentación",
+    "Ext. Volt":"Voltaje Ext.",
+    "Fuel Volt":"Voltaje Comb.",
+    "Sattelite":"Satélite",
+    "Powercut Alarm":"Alarma de corte de energía",
+    "Inquiry Date":"Fecha de consulta",
+    "Customer Name":"Nombre del cliente",
+    "Message":"Mensaje",
+    "Assigned To":"Asignado a",
+    "Role":"Rol",
+    "No data available in table":"No hay datos disponibles en la tabla",
+    "Showing":"Mostrando",
+    "Costumer Inquiry":"Solicitud de Cliente",
+    "System Date":"Fecha del sistema",
+    "Vehicle Number":"Número de Vehículo",
+    "Chassis Number":"Número de Chasis",
+    "Engine Number":"Número de Motor",
+   
+    "VLT No.(IMEI)":"VLT No. (IMEI)",
+    "VLT SIM(IDEA)":"",
+    "VLT SIM(BSNL)":"",
+    "Approving RTO":"Aprobando RTO",
+    "Owner Number":"Numero de Propietario",
+    "Alternate Number":"Número Adicional",
+    "Dealer Name":"Nombre del Distribuidor",
+    "Tracking Software":"Software de seguimiento",
+    "Costumer Name":"Nombre del cliente",
+    "Device ID":"ID de Dispositivo",
+    "Operator Name":"Nombre del Operador",
+    "Protocol ID":"ID de protocolo",
+    "Command":"Commando",
+    "ACC":"IGN",
+    "Battery Status":"Estado de la batería",
+    "GPS DATA":"DATOS GPS",
+    "DEVICES MASTER":"DISPOSITIVO PRINCIPAL",
+    "Groups":"Grupos",
+    "Add Group":"Añadir grupo",
+    "Type group name":"Escriba el nombre del grupo",
+    "CONFIRM":"CONFIRMAR",
+    "CANCEL":"CANCELAR",
+    "Active":"Activo",
+    "InActive":"Inactivo",
+    "Vehicles":"Vehículos",
+    "Reg. Number":"Número de Reg.",
+    "IMEI":"IMEI",
+    "Int. ID":"En t. CARNÉ DE IDENTIDAD",
+    "SIM 1":"SIM 1",
+    "SIM Provider":"Operador de SIM",
+    "SIM2":"SIM2",
+    "Vehicle Type":"Tipo de Vehiculo",
+    "Owner":"Propietario",
+    "IDLING Since":"RALENTI desde",
+    "STOPPED Since":"RALENTI desde",
+    "RUNNING Since":"MOVIMIENTO desde",
+    "Video Tutorial":"Video Tutorial",
+    "VEHICLE LIST":"LISTA DE VEHICULOS",
+    "MAINTENANCE REMINDER":"RECORDATORIO DE MANTENIMIENTO",
+    "REMINDERS":"RECORDATORIOS",
+    "REMINDER":"RECORDATORIOS",
+    "Reminder Date":"Fecha de Recordatorio",
+    "Notification Type":"Tipo de Notificación",
+    "Reminder Type":"Tipo de Recordatorio",
+    "Prior Notification(Days)":"Notificación Previa (días)",
+    "Additional notes":"Notas Adicionales",
+    "SEARCH":"BUSCAR",
+    "Live Tracking":"Rastreo en Tiempo Real",
+    "History Tracking":"Rastreo de Historial",
+    "Vehicle History":"Historial del vehículo",
+    "Generate History":"Generar historia",
+    "Play History":"Reproducir Historial",
+    "Select device":"Seleccione el dispositivo",
+    "Please choose a device":"Por favor elija un dispositivo",
+    "OK":"OK",
+    "GEOFENCE":"GEOCERCA",
+    "Grid view":"Vista en cuadrícula",
+    "List view":"Vista de la lista",
+    "Geo Fencing Name":"Nombre de Geocerca",
+    "Geofence type":"Tipo de Geocerca",
+    "Enter Alert":"Alerta al Ingresar",
+    "Exit Alert":"Alerta al Salir",
+    "Geofence Search":"Buscar Geocerca",
+    "Add Geofence":"Agregar Geocerca",
+    "Select group":"Seleccionar grupo",
+    "GEO FENCE NAME":"NOMBRE DE GEOCERCA",
+    "Get Alert on":"Recibir Alerta en",
+    "Entering":"Entrar",
+    "Exiting":"Salir",
+    "Create":"Crear",
+    "Select Your Geo Fence Region":"Seleccione su región de Geocerca",
+    "Add Geo Fence":"Agregar Geocerca",
+    "Total Distance(Km)":"Distancia total (km)",
+    "Fuel consumption(Litre)":"Consumo de combustible (litros)",
+    "Ignition ON Time(Hr:Min)":"Tiempo de Ignición Encendida (Hr: Min)",
+    "Ignition OFF Time(Hr:Min)":"Tiempo de Ignición Apagada (Hr: Min)",
+    "Idle Time(Hr:Min)":"Tiempo de Ralenti(Hr:Min)",
+    "Out of reach(Hr:Min)":"Fuera de alcance (Hr: Min)",
+    "No GPS(Hr:Min:Sec)":"Sin GPS (Hr: Min: Seg)",
+    "Daily Report":"Reporte Diario",
+    "Trips":"Viajes",
+    "Max Speed(Km/hr)":"Velocidad máxima (km / h)",
+    "My App":"Mi App",
+    "AC Report":"Informe de AC",
+    "Loading":"Cargando",
+    "Vehicle":"Vehicle",
+    "ON Time":"Tiempo Encendido",
+    "OFF Time":"Tiempo Apagado",
+    "dashboard":"Tablero",
+    "RULES":"REGLAS",
+    "Alert Report":"Informe de Alerta",
+    "No":"No",
+    "Date":"Fecha",
+    "Power Cut":"Corte de energía",
+    "Battery":"Batería",
+    "Geofencing":"Geocerca",
+    "Overspeeding":"Exceso de Velocidad",
+    "Daywise Report":"Reporte Diario",
+    "Filter Report":"Informe de Filtro",
+    "Fuel Consumption Report":"Informe de Consumo de Combustible",
+    "Vehicle name":"Nombre del Vehículo",
+    "Start Time":"Hora Inicial",
+    "End Time":"Hora Final",
+    "Fuel Consumed (L)":"Combustible Consumido (L)",
+    "Distance(Kms)":"Distancia (Kms)",
+    "In event count":"Contador de eventos dentro",
+    "Out event count":"Contador de eventos fuera",
+    "Start Location":"Ubicación Inicial",
+    "End Location":"Ubicación final",
+    "Click to get device's last location":"Haga clic para obtener la última ubicación de la unidad",
+    "SOS Report":"Informe SOS",
+    "Vehicle No.":"Número de Vehículo",
+    "Time":"Hora",
+    "Address":"Dirección",
+    "Speed variation":"Variación de Velocidad",
+    "Total K.M":"KM total",
+    "Generate Graph":"Generar gráfica",
+    "Driver's Performance Report":"Informe de Rendimiento del Conductor",
+    "Total trip":"Viaje total",
+    "Total Ontime trip":"Tiempo total en viaje",
+    "Ontime vehicles":"Vehiculos a tiempo",
+    "group":"grupo",
+    "TRACKER":"RASTREADOR",
+    "REPORTS":"INFORMES",
+    "Speed Variation":"Variación de velocidad",
+    "Trip Report":"Reporte de viaje",
+    "Summary Report":"Informe en Resumen",
+    "Overspeeding Report":"Informe de Exceso de Velocidad",
+    "Route Violation Report":"Informe de Infracción de Ruta",
+    "Stoppage Report":"Informe de Paradas",
+    "Ignition Report":"Informe de Ignición",
+    "Distance Report":"Informe de Kilometraje",
+    "Driver's performance":"Rendimiento del conductor",
+    "VEHICLE TYPE":"TIPO DE VEHICULO",
+    "ROUTE LIST":"LISTA DE RUTA",
+    "ROUTE MAPPING":"MAPEO DE RUTA",
+    "Dealer Account":"Cuenta de distribuidor",
+    "Geofencing Report":"Informe de Geocerca",
+    "Select Geofencing":"Seleccionar Geocerca",
+    "Vehicle Name":"Nombre del vehículo",
+    "In/Out":"Dentro/Fuera",
+    "Datetime":"Fecha y hora",
+    "Location":"Ubicación",
+    "GeoFence Name":"Nombre de Geocerca",
+    "Click here to get address":"Haga clic aquí para obtener la dirección.",
+    "Select Your Device":"Seleccione su dispositivo",
+    "IDLE REPORT":"Informe de Ralenti",
+   
+    "Min Idle Time (Min)":"Tiempo de Ralentí Mínimo(min)",
+    "Duration (HH:MM:SS)":"Duración (HH: MM: SS)",
+    "AC Status":"Estado de AC",
+    "TRACKERS":"RASTREADORES",
+    "Date Time":"Fecha y hora",
+    "On/Off":"Encendido/Apagado",
+    "Overspeed":"Exceso de Velocidad",
+    "POI name":"Nombre de POI",
+    "Arrival Time":"Hora de llegada",
+    "Departure Time":"Hora de salida",
+    "Route":"Ruta",
+    "POI Report":"Informe de POI",
+    "From Time":"Fecha Inicial",
+    "To Time":"Fecha Final",
+    "Duration":"Duración",
+    "Start Point":"Punto Inicial",
+    "End Point":"Punto Final",
+    "Total KM":"KM total",
+    "Fuel Consumption (Litre)":"Consumo de combustible (litros)",
+    "Total Running Time (HH:MM)":"Tiempo total en movimiento(HH: MM)",
+    "Total Stop Time (HH:MM)":"Tiempo total detenido (HH: MM)",
+    "Total Idle Time (HH:MM)":"Tiempo de ralenti total (HH: MM)",
+    "Total Out of reach Time (HH:MM)":"Tiempo total fuera del alcance (HH: MM)",
+    "Total No gps Time (HH:MM)":"Tiempo total sin GPS (HH: MM)",
+    "Overspeeding (HH:MM)":"Exceso de velocidad (HH: MM)",
+    "Route Violation":"Violación de ruta",
+    "TRAVEL PATH REPORT":"INFORME DE RUTA DE VIAJE",
+    "Device":"Device",
+    "ODO (K.M.)":"ODO (K.M.)",
+    "Distance (K.M.)":"Distancia (K.M.)",
+    "Cumulative Distance (K.M.)":"Distancia acumulativa (K.M.)",
+    "TRIP REPORT":"REPORTE DE VIAJE",
+    "TRIP ID":"ID DE VIAJE",
+    "VEHICLE NAME":"NOMBRE DEL VEHICULO",
+    "SOURCE ADDRESS":"FUENTE DE DIRECCIÓN",
+    "DESTINATION ADDRESS":"DIRECCIÓN DE DESTINO",
+    "DISTANCE":"DISTANCIA",
+    "DURATION":"DURACIÓN",
+    "TRIP STATUS":"ESTADO DEL VIAJE",
+    "MILEAGE":"KILOMETRAJE",
+    "ADD EXPENSES":"AGREGAR GASTOS",
+    "EXPENSES LIST":"LISTA DE GASTOS",
+    "Amount":"Cantidad",
+    "Currency":"Moneda",
+    "Payment Mode":"Modo de pago",
+    "Expense type":"Tipo de gasto",
+    "GEO FENCING":"GEOCERCA",
+    "ADD DEVICE":"AÑADIR DISPOSITIVO",
+    "GENERAL SETTING":"AJUSTES GENERALES",
+    "Device ID *":"ID del dispositivo *",
+    "Enter Device ID":"Ingrese el ID del dispositivo",
+    "Device Name * ":"Nombre del dispositivo *",
+    "Enter Device Name":"Ingrese el nombre del dispositivo",
+    "SIM Number":"Numero de SIM",
+    "SIM Number 2":"Número de SIM 2",
+    "SIM Provider 2":"Operador de SIM 2",
+    "Integration ID":"ID de integración",
+    "Select User":"Seleccionar usuario",
+    "Driver Contact Number":"Número de contacto del conductor",
+    "Select Vehicle type*":"Seleccione tipo de vehículo *",
+    "Type of Vehicle":"Tipo de vehiculo",
+    "mm/dd/yyyy":"mm / dd / aaaa",
+    "ICCICD Number":"Número ICCICD",
+    "IMSI":"IMSI",
+    "Unique ID":"ID único",
+    "CID number":"Número CID",
+    "Chassis number":"Número de Chasis",
+    "Comapny Name":"Nombre de Empresa",
+    "Company Address":"Dirección de la empresa",
+    "Transport Office City":"Oficina de transporte de la ciudad",
+    "Transport Office State":"Estado de la oficina de transporte",
+    "Invoice Number":"Numero de factura",
+    "Number of SOS":"Número de SOS",
+    "Doc Type":"Tipo de documento",
+    "Enter SIM Provider":"Ingrese Operador de SIM",
+    "Enter SIM Provider 2":"Ingrese el Operador de SIM 2",
+    "Driver's contact number":"Numero de contacto del conductor",
+    "Device model *":"Modelo de dispositivo *",
+    "Vehicle type * ":"Tipo de vehiculo *",
+    "Expiration date":"Fecha de Expiración",
+    "ADD DEVICE":"AGREGAR DISPOSITIVO",
+    "Engine number":"Número de Motor",
+    "Type of Vehicle ":"Tipo de Vehiculo ",
+    "Manufacturing company":"Empresa Fabricante",
+    "Registration date ":"Fecha de Registro ",
+    "Date of Manufacturing Year ":"Fecha de fabricación",
+    "Last fitness date ":"Última fecha de ejercicio",
+    "ICCICD Number ":"Número ICCID",
+    "Fitment Date ":"Fecha de Instalación",
+    "IMSI ":"IMSI",
+    "Unique ID ":"ID Único",
+    "CID number ":"Número CID",
+    "Chassis number ":"Número de chasis",
+    "Comapny Name ":"nombre de Empresa",
+    "Comapny Address":"Dirección de la Empresa",
+    "Invoice number":"Número de Factura",
+    "Invoice Date":"Fecha de la Factura",
+    "No. of SOS ":"No. de SOS",
+    "Add Document field":"Agregar campo de documento",
+    "Document issued date :":"Fecha de emisión del documento:",
+    "UPDATE AND SAVE":"ACTUALIZAR Y GUARDAR",
+    "Reason":"Razón",
+    "Password":"Contraseña",
+    "Driver Search":"Búsqueda de conductores",
+    "Enter User Id":"Ingresar ID de usuario",
+    "Enter First name":"Ingrese nombre",
+    "Enter Last name":"Introduzca el apellido",
+    "Enter email":"Ingrese correo electrónico",
+    "Enter mobile number":"Ingrese el número de teléfono móvil",
+    "Enter Address":"Ingresa la direccion",
+    "EDIT CUSTOMER":"EDITAR CLIENTE",
+    "Delete Dealer":"Eliminar distribuidor",
+    "Documents":"Documentos",
+    "Document Name":"nombre del documento",
+    "Document number":"Número del Documento",
+    "Action":"Acción",
+    "Add":"Agregar",
+    "Upload Documents *":"Subir documentos *",
+    "Save":"Guardar",
+    "delete":"Eliminar",
+    "Doc number":"Número de doc.",
+    "Download":"Descargar",
+    "Yes, Delete it!":"Sí, eliminar",
+    "Cancel":"Cancelar",
+    "EDIT DEALER":"EDITAR DISTRIBUIDOR",
+    "Are you sure ?":"Estás seguro?",
+    "you want to delete dealer":"Quieres eliminar éste distribuidor?",
+    "Edit Model":"Editar modelo",
+    "Enter device model":"Ingrese el modelo del dispositivo",
+    "Configuration command":"Comando de configuración",
+    "Location command":"Comando de Ubicación",
+    "Imobilizer command":"Comando Paro de Motor",
+    "Resume command":"Comando Reactivar Motor",
+    "Reset command":"Comando de reinicio",
+    "Manufacturer":"Fabricante",
+    "Server Command":"Comando de servidor",
+    "Mobile Command":"Comando móvil",
+    "Update":"Actualizar",
+    "Edit trip details":"Editar detalles del viaje",
+    "Route name":"Nombre de la ruta",
+    "Vehicles name":"Nombre de los vehículos",
+    "Radius (in meter)":"Radio (en metros)",
+    "Driver name":"Nombre del conductor",
+    "Loading site":"Cargando sitio",
+    "Unloading site":"Descargando Sitio",
+    "LR Number":"Numero LR",
+    "Device Name: ":"Nombre del dispositivo:",
+    "Days: ":"Dias",
+    "M":"LUN",
+    "T":"MAR",
+    "W":"MIE",
+    "Th":"JUE",
+    "F":"VIE",
+    "Sa":"SAB",
+    "S":"DOM",
+    "Edit Vehicle Type":"Editar tipo de vehículo",
+    "Brand:":"Marca",
+    "Enter Brand Name":"Ingrese el nombre de la marca",
+    "Description:":"Descripción:",
+    "Enter Description":"Ingrese Descripción",
+    "Please Enter Description":"Por favor ingrese la descripción",
+    "Select icon type":"Seleccionar tipo de icono",
+    "Voltage Value":"Valor de voltaje",
+    "Fuel value":"Valor del combustible",
+    "add":"añadir",
+    "Volatage Calibrator":"Calibrador de Volatage",
+    "Please Enter voltage":"Por favor, introduzca el voltaje",
+    "Please fuel value":"Por favor, valor de combustible",
+    "Please Enter Tank Size":"Por favor ingrese tamaño de tanque",
+    "FUEL EVENTS":"EVENTOS DE COMBUSTIBLE",
+    "Please Enter Mileage":"Por favor ingrese el kilometraje",
+    "Fuel Change (L)":"Cambio de combustible (L)",
+    "Search Device":"Buscar dispositivo",
+    "Generate Report":"Generar Informe",
+    "Sleep Mode Temprature":"Temporización del modo de reposo",
+    "Temprature":"Temperatura",
+    "ON":"ENCENDIDO",
+    "OFF":"APAGADO",
+    "list":"lista",
+    "Enter GEO FENCE NAME":"Ingrese el NOMBRE DE LA GEOCERCA",
+    "Get Alert on :":"Recibir alerta en:",
+    "Select Your Geo Fence Region :":"Seleccione la región de la Geocerca:",
+    "Search Box":"Cuadro de Búsqueda",
+    "--Select group--":"Selecciona grupo",
+    "--Geofence type--":"Tipo de Geocerca-",
+    "--GEO FENCE NAME--":"--NOMBRE DE GEOCERCA--",
+    "Admin":"Administración",
+    "close":"cerrar",
+    "DEVICES":"DISPOSITIVOS",
+    "Matrix Input":"Entrada de matriz",
+    "Device Id-":"ID de Dispositivo-",
+    "Matrix Name":"Nombre de matriz",
+    "Topic":"Tema",
+    "Ext. Volt.":"Volt. Ext.",
+    "Fuel Volt.":"Volt. de combustible",
+    "Real Time GPS Based Vechicle Tracking":"Seguimiento GPS de Vehículos en tiempo real",
+    "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.":"Rastreo en Tiempo Real, lo que le permite obtener la información de Ubicación más reciente en su vehículo.",
+    "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.":"Ubicación por Google Maps provee detalles de ubicación exacta de tus vehículos.",
+    "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.":"Sistema de seguimiento amigable que le ayuda a rastrear y localizar la flota con un sólo Click.",
+    "Software as a Service(Saas) with perpetual uptime.":"Software como servicio (Saas) con tiempo de actividad perpetuo.",
+    "Alerts and Event Notifications":"Alertas y notificaciones de eventos",
+    "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.":"Obtenga notificaciones por SMS, email o App Móvil en tiempo real.",
+    "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.":"Múltiples Destinatarios pueden recibir alertas, no solo usted, sino también sus seres cercanos para obtener ayuda inmediata.",
+    "Schedule your alerts as per your convenience that suits your needs":"Programe sus alertas de acuerdo a sus necesidades",
+    "Detailed Reports for analysis is also available for making quik decisions":"Informes detallados para el análisis también están disponibles para tomar decisiones rápidas",
+    "Geofences":"Geocercas",
+    "Upload all Geofence in your account and assign them to the vehicles.":"Agregue todas las geocercas en su cuenta para asignar a vehículos.",
+    "Find and mark geofences without knowing latitude and longitude values.":"Genere Geocercas sin necesidad de conocer la latitud y longitud.",
+    "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.":"Geocercas disponibles para facilitar el acceso. Todas las geocercas se pueden marcar según la conveniencia del usuario y se pueden asignar a vehículos para que se le envíen todas las alertas. Asegure a sus seres queridos y garantice el trabajo realizado por su personal.",
+    "Date and Time Based reports available for analyzing vehicle usage.":"Informes basados ​​en fecha y hora disponibles para analizar el uso del vehículo.",
+    "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.":"Ubicación de los vehículos, cada registro muestra la ubicación del vehículo donde estaba su vehículo y es fácil de revisar el incidente donde sucedió.",
+    "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).":"Informe inteligente del vehículo / informe inteligente de la flota. Le da un resumen del día para los vehículos.",
+    "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..":"Reporte de Alertas, reporte de todas las alertas del vehículo. Exceso de Velocidad, Geocerca, Ignición, etc...",
+    "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.":"Reporte de Geocercas, Reporte detallado del tiempo de ingreso a Geocercas.",
+    "How it works":"Cómo funciona",
+    "Real-time tracking":"Seguimiento en tiempo real",
+    "Advanced Reporting":"Informes avanzados",
+    "Alerts & Warning":"Alertas y Advertencias",
+    "2-Way messaging":"Mensajería Bidireccional",
+    "Engine immobilisation":"Paro de motor",
+    "Monitor gauges":"Monitor de Medidas",
+    "Access anytime, anywhere!":"¡Accede en cualquier momento y en cualquier lugar!",
+    "Web browser based software":"Software basado en web",
+    "Android app":"Aplicación Android",
+    "iPhone app":"Aplicación para iPhone",
+    "Request for Demo":"Solicitud de demostración",
+    "Get Detail":"Obtener detalles",
+    "Export To Excel":"Exportar a Excel",
+    "Loading Site":"Cargando sitio",
+    "Distance":"Distancia",
+    "ETA":"TEA",
+    "directions":"direcciones",
+    "Google Traffic":"Tráfico de Google",
+    "Google Hybrid":"Google Híbrido",
+    "Google Satellite":"Google Satélite",
+    "Google Physical":"Google Físico",
+    "Google Street":"Google Street",
+    "map":"mapa",
+    "Please Select Your Device, From/To Date & Time to view history from above options":"Seleccione su dispositivo, Fecha inicial/final para ver el historial de las opciones anteriores",
+    "Generate Map":"Generar mapa",
+    "Trip Name":"Nombre del viaje",
+    "Select destination":"Seleccionar destino",
+    "CREATE TRIP":"CREAR VIAJE",
+    "Total Distance: ":"Distancia total",
+    "Idle Time (Min)":"Tiempo de Ralenti (min)",
+    "Go to Site >":"Ir al sitio>",
+    "Welcome To OneQlik":"Welcome To OneQlik",
+    "Login":"Iniciar Sesión",
+    "Username / Phone Number":"Nombre de usuario / número de teléfono",
+    "Enter Mobile number*":"Ingrese el número de móvil *",
+    "Confirm New Password":"Confirmar nueva contraseña",
+    "Send OTP":"Enviar OTP",
+    "Back to Login":"Atrás para iniciar sesión",
+    "Reset Password":"Restablecer la contraseña",
+    "Back to previous Form":"Volver al formulario anterior",
+    "Forgot Username / Password?":"¿Olvidó su nombre de usuario/contraseña?",
+    "First Name":"Nombre",
+    "Last Name":"Apellido",
+    "Email Id":"Email",
+    "Organisation":"Organización",
+    "notifications":"notificaciones",
+    "Notification Sound":"Sonido de notificación",
+    "Notifications":"Notificaciones",
+    "Add Phone":"Añadir teléfono",
+    "Close":"Cerrar",
+    "Add Email":"Agregar correo electrónico",
+    "POI details":"Detalles de POI",
+    "Add POI details":"Agregar detalles de POI",
+    "Type POI name":"Escriba el nombre del POI",
+    "Previous point duration":"Duración del punto anterior",
+    "Days":"Dias",
+    "Hours":"Horas",
+    "Minutes":"Minutos",
+    "Next point duration":"Duración del siguiente punto",
+    "Min":"Min",
+    "Halt":"Detener",
+    "Mapped Vehicles":"Vehículos mapeados",
+    "Radius":"Radio",
+    "POI Name":"Nombre de POI",
+    "Enter a location":"Ingrese una ubicación",
+    "ADD":"AÑADIR",
+    "Routes Search":"Búsqueda de rutas",
+    "Route Status":"Estado de ruta",
+    "Source":"Fuente",
+    "Destination":"Destino",
+    "Test name":"Nombre de prueba",
+    "Test Source":"Fuente de prueba",
+    "Test destination":"Prueba de destino",
+    "Routes":"Rutas",
+    "Untracked vehicles":"Vehículos sin seguimiento",
+    "Please Enter Email ID / Phone Number":"Por favor, introduzca su correo/número de teléfono",
+    "Please Enter Password":"Por favor, ingrese contraseña",
+    "Please Re Enter Password":"Por favor, vuelva a ingresar la contraseña",
+    "Delete route":"Eliminar ruta",
+    "Are you sure to delete this route ??":"¿Estás seguro de eliminar esta ruta?",
+    "DELETE":"ELIMINAR",
+    "Create Trip":"Crear viaje",
+    "One way trip":"Viaje sencillo",
+    "Two way trip":"Viaje redondo",
+    "Round trip":"Viaje ida y vuelta",
+    "Start Date/Time":"Fecha / hora de inicio",
+    "End Date/Time":"Fecha / hora de finalización",
+    "Planned start time":"Hora de inicio planificada",
+    "Planned end time":"Hora de finalización planificada",
+    "Actual start time":"Hora de inicio real",
+    "Actual end time":"Hora final real",
+    "Trip History":"Historial del viaje",
+    "Trip type":"Tipo de viaje",
+    "Routes name":"Nombre de rutas",
+    "Total Distance":"Distancia total",
+    "Get route":"Obtener ruta",
+    "Parameters":"Parámetros",
+    "Enter First Name":"Ingrese Nombre",
+    "Enter Last Name":"Introduzca Apellido",
+    "Invalid Password":"Contraseña Inválida",
+    "Confirm Password":"Confirmar Contraseña",
+    "Please Enter Confirm Password":"Por favor, ingrese Confirmar contraseña",
+    "Organisation Name":"Nombre de la organización",
+    "Type of user":"Tipo de usuario",
+    "Mobile Verification":"Verificación móvil",
+    "Mobile Number":"Número de teléfono móvil",
+    "TRIP HISTORY":"HISTORIAL DEL VIAJE",
+    "Event name":"Nombre del evento",
+    "Event time":"Hora del evento",
+    "Driver":"Conductor",
+  
+    "Restore":"Restaurar",
+    "Delete Permanently":"Borrar Permanentemente",
+    "Select no of Days to get reminder for your services":"Seleccione los días para recibir un recordatorio de sus servicios.",
+    "Prior Notification (Days)":"Notificación previa (días)",
+    "Enter Additonal information here...":"Ingrese información adicional aquí ...",
+    "Calibration":"Calibración",
+    "Get Added Vehicle List": "Obtener lista de vehículos adicionales",
+    "Get Expired Vehicle List":"Obtener la lista de vehículos caducados",
+    "Get Renewed Vehicle List":"Obtener lista de vehículos renovados",
+    "Today":"hoy",
+    "Week":"semana",
+    "Month":"mes",
+    "System Logs":"Registros del sistema",  
+    "Message Utility":"Utilidad de mensaje",
+    "Sensor Details":"Detalle del sensor",
+    "Billing Details":"Detalle de facturación",
+    "Dashboard":"tablero",
+    "Vehicle List":"Lista de vehículos",
+    "Maintenance Reminder":"Recordatorio de mantenimiento",
+    "Vehicle Expense": "Gastos vehiculares",
+    "Tracking":"Rastreo",
+    "Daily Logs": "Registros diarios",
+    "Route variations Reports":"Informes de variaciones de ruta",
+    "Working Hours Report": "Informes de horas de trabajo",
+    "Trip Generation":"Generación de viaje",
+    "API Setting":"Configuración de API",
+    "Transection Detail":"Detalles de la transacción",
+    "Last Names":"Apellidos",
+    "Fuel Unit":"Unidad de combustible",
+    "Timezone":"Zona horaria",
+    "Upload Image":"Cargar imagen",
+    "Trip Setting":"Ajuste de viaje",
+  
+    "API Key":"Clave API",
+    "Change":"Cambio",
+    "Ignition Notification":"Notificación de encendido",
+    "POI Notification":"Notificación de PDI",
+    "Power Notification":"Notificación de poder",
+    "Fuel Notification":"Notificación de combustible",
+    "Geo-Fence Notification":"Notificación de geovalla",
+    "Overspeed Notification":"Notificación de exceso de velocidad",
+    "Route Notification":"Notificación de ruta",
+    "AC Notification":"Notificación AC",
+    "Max-Stoppage Notification":"Notificación de detención máxima",
+    "SOS Notification":"Notificación SOS",
+    "High":"Alta",
+    "Medium":"Medio",
+    "Low":"Bajo",
+    "TRANSACTION DETAIL":"DETALLE DE TRANSACCION",
+    "Sold By":"Vendido por",
+    "Purchased By":"Comprado por",
+    "Allocation Date":"Fecha de asignación",
+    "Points":"Puntos",
+    "Rate":"Velocidad",
+    "Total Amount":"Cantidad total",
+    "Credit Date":"Fecha de crédito",
+    "Remarks":"Observaciones",
+    "Add Driver":"Agregar controlador",
+    "ADD DRIVER" : "Agregar controlador",
+    "Add Device Model":"Agregar modelo de dispositivo",
+    "Enter Model":"Introducir modelo",
+    "Enter Mileage" : "Ingresar kilometraje",
+    "VOLTAGE VALUE":"Valor de voltaje",
+    "FUEL VALUE" : "VALOR DEL COMBUSTIBLE",
+    "TEMPRATURE VALUE":"VALOR DE TEMPERATURA",
+    "Fuel Calibration":"Calibración de combustible",
+    "Temprature Calibration":"Calibración de temperatura",
+    "Vehicle Types":"Tipos de vehiculos",
+    "Information":"Información",
+    "column in vehicle type table for get more detail":"columna en la tabla de tipo de vehículo para obtener más detalles",
+    "Click on":"haga clic en",
+    "Token":"haga clic en",
+    "Yesterday":"Ayer",  
+    "SELECT MODE":"SELECCIONAR MODO",
+    "Notification":"Notificación",
+    "SMS":"SMS",
+    "DEALER":"COMERCIANTE",
+    "TITLE":"TÍTULO",
+    "MESSAGE":"MENSAJE",
+    "Type subject here":"Escriba asunto aquí",
+    "Type Message here":"Escriba el mensaje aquí",
+    "RESET":"REINICIAR",
+    "SEND":"ENVIAR",
+    "Notification Center":"Centro de notificaciones",
+    "PREVIOUS":"ANTERIOR",
+    "NEXT":"SIGUIENTE",
+    "Created On":"CREADO EN",
+    "Driver's Name":"NOMBRE DEL CONDUCTOR",
+    "Driver's Contact" : "CONTACTO CONDUCTOR",
+    "Device Setitng":"CONFIGURACIÓN DE DISPOSITIVO",
+    "Share Device":"COMPARTIR DISPOSITIVO", 
+    "Share User" : "COMPARTIR USUARIO",
+    "MAINTENANCE REMINDERS":"RECORDATORIOS DE MANTENIMIENTO",
+    "Additional Notes":"Notas adicionales",
+    "Updated On":"Actualizado en",
+    "Vehicle Expenses":"Los gastos del vehículo",
+    "ADD EXPENSE":"AGREGAR GASTOS",
+    "Select Vehicle":"Seleccionar vehículo",
+    "Select Date":"Seleccione fecha",
+    "Enter Amount":"Ingresar cantidad",
+    "Payment Mode":"Modo de pago",
+    "SAVE":"SALVAR",
+    "CLOSE":"CERCA",
+    "Line Thickness":"Grosor de la línea",
+    "Idle Time":"Tiempo de inactividad",
+    "From":"de",
+    "To":"a",
+    "Show Track":"Mostrar pista",
+    "Socket Data":"Datos de socket",
+    "Nearby Vehicles":"Vehículos cercanos",
+    "GPRS Command":"Comando GPRS",
+    "Vehicle Street View":"Vehículo Street View",
+    "Fuel Voltage":"Voltaje de combustible",
+    "Heading":"Bóveda",
+    "GPS Positioned":"GPS posicionado",
+    "Commando":"Comando",
+    "Ext. Voltage":"Ext. voltaje",			 	 										
+    "LATTITUDE":"LATTITUD",
+    "LONGITUDE":"LONGITUD",
+    "DEVICE":"DISPOSITIVO",
+    "TIME":"HORA",
+    "INSERTION":"INSERCIÓN",
+    "LAST PUSH":"ÚLTIMO EMPUJE",
+    "INT. RESPONSE":"EN T. RESPUESTA",
+    "FUEL VOLTAGE":"VOLTAJE DE COMBUSTIBLE",
+    "RAW DATA":"DATOS SIN PROCESAR",
+    "POWERCUT ALARM":"ALARMA DE POWERCUT",
+    "SATTELITE":"SATÉLITE",
+    "RAW IO":"RAW IO",
+    "Select Distance (in Meters)":"Seleccionar distancia (en metros)",
+    "meters":"metros",
+    "STATUS":"ESTADO",
+    "ACTION":"ACCIÓN",
+    "TYPE":"TIPO",
+    "MODEL":"MODELO",	
+    "EXECUTION TIME":"TIEMPO DE EJECUCIÓN",
+    "QUEUED TIME":"TIEMPO EN ESPERA",	
+    "COMMAND": "MANDO",
+    "Polygon":"Polígono",
+    "Geofence Type":"Tipo de geofence",
+    "Geofence Name":"Nombre de geofence",
+    "Halt Alert":"Alerta de detención",
+    "Geofence Alert":"Alerta Geofence",
+    "Geofence Color":"Geofence Color",
+    "Route mapping":"Mapeo de ruta", 
+    "Route by status":"Ruta por estado",												
+    "NAME":"NOMBRE",
+    "USER ID":"ID de usuario",
+    "EMAIL ID":"CORREO ELECTRÓNICO",
+    "PHONE":"TELÉFONO",
+    "PASSWORD":"CONTRASEÑA",
+    "CREATED ON":"CREADO EN",
+    "EXPIRES ON":"EXPIRA EL",
+    "TOKEN":"SIMBÓLICA",
+    "LAST ACTIVITY":"ÚLTIMA ACTIVIDAD",
+    "LAST LOGIN":"ÚLTIMO ACCESO",
+    "ALLOCATED POINTS":"PUNTOS ASIGNADOS",
+    "DOCUMENTS":"DOCUMENTOS",
+    "EDIT":"EDITAR",
+    "ADD DEALER":"AGREGAR DISTRIBUIDOR",
+    "Upload Documents":"subir documentos",
+    "SUBMIT":"ENVIAR",
+    "ADD CUSTOMER":"AGREGAR CLIENTE",
+    "Vehicle":"Vehículo",
+    "Fuel":"Combustible",
+    "Ignition ON":"Encendido conectado",
+    "Ignition OFF":"Encendido apagado",
+    "Out of reach":"Fuera de alcance",
+    "No GPS":"No GPS", 
+    "Max Speed":"Máxima velocidad",
+    "No GPS (Hr:Min:Sec)":"Sin GPS (Hr: Min: Sec)",
+    "Start ODO (Kms.)":"Iniciar ODO (Kms.)",
+    "End ODO (Kms.)":"Fin ODO (Kms.)",
+    "Total KMS (As per Logbook)":"KMS total (según el libro de registro)",
+    "Total KMS (As per GPS)":"KMS total (según GPS)",
+    "Difference In Logbook and Gps":"Diferencia en el libro de registro y GPS",
+    "% of difference":"% de diferencia",
+    "Distance (Kms.)":"Distancia (Kms.)",
+    "Moving Time (hh:mm)":"Tiempo de movimiento (hh: mm)",
+    "Stoppage Time (hh:mm)":"Tiempo de paro (hh: mm)",
+    "Idle Time (hh:mm)":"Tiempo de inactividad (hh: mm)",
+    "Fuel Report":"Informe de combustible",
+    "From Location":"Desde la ubicación",
+    "To date":"Hasta la fecha",
+    "To location":"A la ubicación",
+    "Distance (Km/hr)":"Distancia (km / h)",
+    "Loading Unloading Trip":"Cargando Descargando Viaje",
+    "Trip Start":"Inicio de viaje",
+    "Trip End":"Fin del viaje",
+    "Trip Start time":"Hora de inicio del viaje",
+    "Trip End time":"Hora de finalización del viaje",
+    "Duration (HH:MM)":"Duración (HH: MM)",
+    "Running Time (HH:MM)":"Tiempo de ejecución (HH: MM)",
+    "Stoppage Time (HH:MM)":"Tiempo de paro (HH: MM)",
+    "Idle Time (HH:MM)":"Tiempo de inactividad (HH: MM)",
+    "Device SOS Report":"Informe de dispositivo SOS",
+    "Working Hours (HH:MM)":"Horas de trabajo (HH: MM)",
+    "Stopping Hours (HH:MM)":"Horas de parada (HH: MM)",
+    "Detail":"Detalle",
+    "Deleted Device":"Eliminar Informe",
+    "Deleted users":"Eliminar los usuarios",
+    "Device":"DISPOSITIVOS"
+
+
+}
\ No newline at end of file
diff --git a/src/assets/i18n/sp_old.json b/src/assets/i18n/sp_old.json
new file mode 100644
index 0000000..4dbca76
--- /dev/null
+++ b/src/assets/i18n/sp_old.json
@@ -0,0 +1,649 @@
+{
+    "ADMIN": "ADMINISTRACIÓN",
+    "DASHBOARD": "TABLERO",
+    "GROUPS": "GRUPOS",
+    "VEHICLES": "VEHICULOS",
+    "Account Setting": "Configuración de cuenta", 
+    "General Setting": "Ajustes generales",
+    "Application language":"Lenguaje de aplicación",
+    "Language Setting" : "Configuración de idioma",
+    "Notification Settings":"Configuración de las notificaciones",
+    "TRACKING": "RASTREO",
+    "GEO FENCING":"GEO FENCING",
+    "Reset Password":"Restablecer la contraseña",
+    "Reports": "Informes",
+    "IDLE Reports": "Informes inactivos",
+    "Fuel Reports": "Informes de combustible",
+    "Daily Reports": "Reportes diarios",
+    "AC Reports": "Informes AC",
+    "Daywise Reports": "Informes diarios",
+    "Fuel Consumption Reports": "Informes de consumo de combustible",
+    "Summary Reports":" Informes resumidos",
+    "Overspeeding Reports": "informes de exceso de velocidad",
+    "Route Violation Reports": "Informes de infracción de ruta",
+    "POI List" : " Lista de POI",
+    "Stoppage Reports": "Informes de paro",
+    "Route list" : " Lista de ruta",
+    "Route Mapping" : "Mapeo de ruta",
+    "Ignition Reports": "Informes de encendido",
+    "Edit Account" : "Editar cuenta",
+    "Notif" : "Notificación",
+    "Driver Master"  :"Conductor maestro",
+    "Device Master" : "Dispositivo maestro ",
+    "Priority" : "Prioridad",
+    "Distance Reports": "Informes de distancia",
+    "Device Model" : "Modelo de dispositivo",
+    "User Master" : "Usuario maestro",
+    "GPS Master" : "maestro gps",
+    "Inventory List" :"Lista de inventario",
+    "Geofencing Reports": "Informes de geofencing",
+    "Travel Path Reports": "Informes de ruta de viaje",
+    "POI Reports" : "Informes de POI",
+    "SOS Reports" :"Informes de SOS",
+    "Driver Performance Reports" : "Informes de rendimiento del conductor",
+    "Driver Performance Report" : "Informes de rendimiento del conductor",
+    "Trip Reports": "Informes de viaje",  
+    "POI LIST": "LISTA DE POI",
+    "ROUTES": "RUTAS",
+    "NOTIFICATIONS": "NOTIFICACIONES",
+    "DISTRIBUTERS": "DISTRIBUIDORES",
+    "DEALERS": "COMERCIANTE",
+    "Dealers": "Comerciante",
+    "CUSTOMERS": "CLIENTES",
+	"Customers"  : "Clients",
+    "RUNNING": "CORRIENDO",
+    "IDLE": "OCIOSO",
+    "STOPPED": "DETENIDO",
+    "EXPIRED": "MUERTO",
+    "OUT OF REACH": "FUERA DE ALCANCE",
+    "NO GPS": "NO GPS",
+    "Device Icon": "Ícono de dispositivo",
+    "Registration number":"Número de registro",
+    "Group":"Grupo",
+    "Today's ODO":"ODO de hoy",
+    "Total ODO":"ODO total",
+    "Last location":"Última ubicación",
+    "Last updated on":"Last updated on",
+    "Trip status":"Estado del viaje",
+    "Status":"Estado",
+    "Satellites":"Satélites",
+    "Last Speed":"Última velocidad",
+    "FUEL (LITRE)":"COMBUSTIBLE (LITRO)",
+    "GPS":"GPS",
+    "AC":"C.A.",
+    "POWER":"PODER",
+    "GSM Signal":"Señal GSM",
+    "IGNITION":"ENCENDIDO",
+    "NOTIFICATION":"NOTIFICACIÓN",
+    "My Account":"Mi cuenta",
+    "Log Out":"Cerrar sesión",
+    "Refresh Data":"Actualizar datos",
+    "Device Search":"Búsqueda de dispositivo",
+    "Previous":"Anterior",
+    "Next":"Próximo",
+    "DRIVER MASTER":"MAESTRO CONDUCTOR",
+    "DEVICE MODEL":"MODELO DE DISPOSITIVO",
+    "VEHILE TYPE":"TIPO DE VEHICULO",
+    "USER MASTER":"MAESTRO DE USUARIO",
+    "DEVICE MASTER":"MAESTRO DE DISPOSITIVOS",
+    "GPS TRACKER":"RASTREADOR DE GPS",
+    "CMD PACKETS":"PAQUETES CMD",
+    "INVENTORY LIST":"LISTA DE INVENTARIO",
+    "CUSTOMER INQUIRY":"Consulta al cliente",
+    "Driver Name":"Nombre del conductor",
+    "Driver Address":"Dirección del conductor",
+    "Driver Status":"Estado del conductor",
+    "License Number":"Número de licencia",
+    "Salary":"Salario",
+    "DOJ":"DOJ",
+    "Delete":"Eliminar",
+    "Device Type":"Tipo de dispositivo",
+    "Configuration Command":"Comando de configuración",
+    "Location Command":"Comando de ubicación",
+    "Immobilzer Command":"Comando inmovilizador",
+    "Resume Command":"Reanudar comando",
+    "Reset Command":"Comando de reinicio",
+    "Immoblizer Type":"Tipo de inmovilizador",
+    "Port":"Puerto",
+    "Edit":"Editar",
+    "Brand":"Marca",
+    "Description":"Descripción",
+    "Model":"Modelo",
+    "Icon Type":"Tipo de icono",
+    "Voltage Calibration":"Calibración de voltaje",
+    "Tank Size":"Tamaño del tanque",
+    "Mileage":"Kilometraje",
+    "Last Modified":"Última modificación",
+    "Search by phone":"Busqueda por telefono",
+    "Search by name":"Buscar por nombre",
+    "From Date":"Partir de la fecha",
+    "To Date":"Hasta la fecha",
+    "FIND":"ENCONTRAR",
+    "Show":"mostrar",
+    "entries":"entradas",
+    "Name":"Nombre",
+    "Dealer":"Comerciante",
+    "Is Dealer":"Es comerciante",
+    "Created on":"Creado en",
+    "Email":"Email",
+    "Phone":"Teléfono",
+    "Device Name":"Nombre del dispositivo",
+    "Device Id":"Identificación del dispositivo",
+    "User":"Usuario",
+    "Expire On":"Vence en",
+    "Fuel Voltage(mv)":"Voltaje de combustible (mv)",
+    "Sim Number":"Numero Sim",
+    "Today ODO":"Hoy ODO",
+    "Search by Device ID":"Buscar por ID de dispositivo",
+    "Certificates":"Certificados",
+    "Export Pdf":"Exportar PDF",
+    "Search by Sim Number":"Search by Sim Number",
+    "Export EXCEL":"Exportar EXCEL",
+    "Device IMEI":"Dispositivo IMEI",
+    "Lattitude":"Latitud",
+    "Longitude":"Longitud",
+    "Speed":"Velocidad",
+    "Device Time":"Hora del dispositivo",
+    "Insertion Time":"Tiempo de inserción",
+    "Last Push":"Último empujón",
+    "Integration Respnse":"Integración Respnse",
+    "Ignition":"Encendido",
+    "Power":"Poder",
+    "Ext. Volt":"Ext. Voltio",
+    "Fuel Volt":"Fuel Volt",
+    "Sattelite":"Satélite",
+    "Powercut Alarm":"Alarma de corte de energía",
+    "Inquiry Date":"Fecha de consulta",
+    "Customer Name":"Nombre del cliente",
+    "Message":"Mensaje",
+    "Assigned To":"Asignado a",
+    "Role":"Papel",
+    "No data available in table":"No hay datos disponibles en la tabla",
+    "Showing":"Demostración",
+    "Costumer Inquiry":"Costumer Inquiry",
+    "System Date":"Fecha del sistema",
+    "Vehicle Number":"Número de vehículo",
+    "Chassis Number":"Número de chasis",
+    "Engine Number":"Número de motor",
+   
+    "VLT No.(IMEI)":"VLT No. (IMEI)",
+    "VLT SIM(IDEA)":"",
+    "VLT SIM(BSNL)":"",
+    "Approving RTO":"Aprobando RTO",
+    "Owner Number":"Numero de Propietario",
+    "Alternate Number":"Alternate Number",
+    "Dealer Name":"Nombre del comerciante",
+    "Tracking Software":"Software de seguimiento",
+    "Costumer Name":"Nombre del cliente",
+    "Device ID":"Device ID",
+    "Operator Name":"Operator Name",
+    "Protocol ID":"ID de protocolo",
+    "Command":"Mando",
+    "ACC":"ACC",
+    "Battery Status":"Estado de la batería",
+    "GPS DATA":"DATOS GPS",
+    "DEVICES MASTER":"DEVICES MASTER",
+    "Groups":"Grupos",
+    "Add Group":"Añadir grupo",
+    "Type group name":"Escriba el nombre del grupo",
+    "CONFIRM":"CONFIRMAR",
+    "CANCEL":"CANCELAR",
+    "Active":"Activo",
+    "InActive":"Inactivo",
+    "Vehicles":"Vehículos",
+    "Reg. Number":"Reg. Número",
+    "IMEI":"IMEI",
+    "Int. ID":"En t. CARNÉ DE IDENTIDAD",
+    "SIM 1":"SIM 1",
+    "SIM Provider":"Proveedor de SIM",
+    "SIM2":"SIM2",
+    "Vehicle Type":"tipo de vehiculo",
+    "Owner":"Propietario",
+    "IDLING Since":"IDLING desde",
+    "STOPPED Since":"IDLING desde",
+    "RUNNING Since":"CORRIENDO desde",
+    "Video Tutorial":"Video Tutorial",
+    "VEHICLE LIST":"LISTA DE VEHICULOS",
+    "MAINTENANCE REMINDER":"MAINTENANCE REMINDER",
+    "REMINDERS":"RECORDATORIOS",
+    "Reminder Date":"Reminder Date",
+    "Notification Type":"Notification Type",
+    "Reminder Type":"Reminder Type",
+    "Prior Notification(Days)":"Notificación previa (días)",
+    "Additional notes":"Notas adicionales",
+    "SEARCH":"BUSCAR",
+    "Live Tracking":"Seguimiento en vivo",
+    "History Tracking":"Seguimiento de historia",
+    "Vehicle History":"Historia del vehículo",
+    "Generate History":"Generar historia",
+    "Play History":"Jugar historia",
+    "Select device":"Seleccione el dispositivo",
+    "Please choose a device":"Por favor elige un dispositivo",
+    "OK":"Okay",
+    "GEOFENCE":"GEOFENCE",
+    "Grid view":"Vista en cuadrícula",
+    "List view":"Vista de la lista",
+    "Geo Fencing Name":"Nombre de Geo Fencing",
+    "Geofence type":"Tipo de geofence",
+    "Enter Alert":"Ingresar alerta",
+    "Exit Alert":"Alerta de salida",
+    "Geofence Search":"Geofence Search",
+    "Add Geofence":"Añadir geovalla",
+    "Select group":"Selecciona grupo",
+    "GEO FENCE NAME":"NOMBRE DE LA CERCA GEO",
+    "Get Alert on":"Recibe alerta",
+    "Entering":"Entrando",
+    "Exiting":"Salir",
+    "Create":"Crear",
+    "Select Your Geo Fence Region":"Seleccione su región de geovalla",
+    "Add Geo Fence":"Seleccione su región de geovalla",
+    "Total Distance(Km)":"Distancia total (km)",
+    "Fuel consumption(Litre)":"Consumo de combustible (litros)",
+    "Ignition ON Time(Hr:Min)":"Tiempo de encendido (Hr: Min)",
+    "Ignition OFF Time(Hr:Min)":"Tiempo de encendido apagado (Hr: Min)",
+    "Idle Time(Hr:Min)":"dle Time(Hr:Min)",
+    "Out of reach(Hr:Min)":"Fuera de alcance (Hr: Min)",
+    "No GPS(Hr:Min:Sec)":"Sin GPS (Hr: Min: Sec)",
+    "Daily Report":"Reporte diario",
+    "Trips":"Excursiones",
+    "Max Speed(Km/hr)":"Velocidad máxima (km / h)",
+    "My App":"Mi aplicación",
+    "AC Report":"Informe AC",
+    "Loading":"Cargando",
+    "Vehicle":"Vehicle",
+    "ON Time":"A tiempo",
+    "OFF Time":"Fuera de tiempo",
+    "dashboard":"tablero",
+    "RULES":"REGLAS",
+    "Alert Report":"Informe de alerta",
+    "No":"No",
+    "Date":"Fecha",
+    "Power Cut":"Corte de energía",
+    "Battery":"Corte de energía",
+    "Geofencing":"Geofencing",
+    "Overspeeding":"Exceso de velocidad",
+    "Daywise Report":"Daywise Report",
+    "Filter Report":"Informe de filtro",
+    "Fuel Consumption Report":"Informe de consumo de combustible",
+    "Vehicle name":"Nombre del vehículo",
+    "Start Time":"Hora de inicio",
+    "End Time":"Hora de finalización",
+    "Fuel Consumed (L)":"Combustible Consumido (L)",
+    "Distance(Kms)":"Distancia (Kms)",
+    "In event count":"En caso de contar",
+    "Out event count":"Fuera recuento de eventos",
+    "Start Location":"Lugar de inicio",
+    "End Location":"Ubicación final",
+    "Click to get device's last location":"Haga clic para obtener la última ubicación del dispositivo",
+    "SOS Report":"Informe SOS",
+    "Vehicle No.":"No vehiculo",
+    "Time":"Hora",
+    "Address":"Habla a",
+    "Speed variation":"Variación de velocidad",
+    "Total K.M":"K.M total",
+    "Generate Graph":"Generar gráfico",
+    "Driver's Performance Report":"Informe de rendimiento del conductor",
+    "Total trip":"Viaje total",
+    "Total Ontime trip":"Viaje total a tiempo",
+    "Ontime vehicles":"Vehículos en horas",
+    "group":"grupo",
+    "TRACKER":"RASTREADOR",
+    "REPORTS":"INFORMES",
+    "Speed Variation":"Variación de velocidad",
+    "Trip Report":"Reporte de viaje",
+    "Summary Report":"Informe resumido",
+    "Overspeeding Report":"Informe de exceso de velocidad",
+    "Route Violation Report":"Informe de infracción de ruta",
+    "Stoppage Report":"Paro Reporte",
+    "Ignition Report":"Encendido Reporte",
+    "Distance Report":"Distancia Reporte",
+    "Driver's performance":"Rendimiento del conductor",
+    "VEHICLE TYPE":"TIPO DE VEHICULO",
+    "ROUTE LIST":"LISTA DE RUTA",
+    "ROUTE MAPPING":"MAPEO DE RUTA",
+    "Dealer Account":"Cuenta de distribuidor",
+    "Geofencing Report":"Informe de geofencing",
+    "Select Geofencing":"Seleccione geofencing",
+    "Vehicle Name":"Nombre del vehículo",
+    "In/Out":"En fuera",
+    "Datetime":"Fecha y hora",
+    "Location":"Location",
+    "GeoFence Name":"Nombre GeoFence",
+    "Click here to get address":"Haga clic aquí para obtener la dirección.",
+    "Select Your Device":"Seleccione su dispositivo",
+    "IDLE REPORT":"Informe inactivo",
+    "Select Vehicle":"Seleccionar vehículo",
+    "Min Idle Time (Min)":"Tiempo de inactividad mínimo (min)",
+    "Duration (HH:MM:SS)":"Duración (HH: MM: SS)",
+    "AC Status":"AC Status",
+    "TRACKERS":"SEGUIDORES",
+    "Date Time":"Fecha y hora",
+    "On/Off":"Encendido apagado",
+    "Overspeed":"Sobre velocidad",
+    "POI name":"Nombre de PDI",
+    "Arrival Time":"Hora de llegada",
+    "Departure Time":"Hora de salida",
+    "Route":"Ruta",
+    "POI Report":"Informe de PDI",
+    "From Time":"De vez",
+    "To Time":"A tiempo",
+    "Duration":"Duración",
+    "Start Point":"Punto de partida",
+    "End Point":"Punto final",
+    "Total KM":"KM total",
+    "Fuel Consumption (Litre)":"Consumo de combustible (litros)",
+    "Total Running Time (HH:MM)":"Tiempo total de ejecución (HH: MM)",
+    "Total Stop Time (HH:MM)":"Tiempo total de parada (HH: MM)",
+    "Total Idle Time (HH:MM)":"Tiempo de inactividad total (HH: MM)",
+    "Total Out of reach Time (HH:MM)":"Tiempo total fuera del alcance (HH: MM)",
+    "Total No gps Time (HH:MM)":"Tiempo total sin gps (HH: MM)",
+    "Overspeeding (HH:MM)":"Exceso de velocidad (HH: MM)",
+    "Route Violation":"Violación de ruta",
+    "TRAVEL PATH REPORT":"INFORME DE RUTA DE VIAJE",
+    "Device":"Device",
+    "ODO (K.M.)":"ODO (K.M.)",
+    "Distance (K.M.)":"Distancia (K.M.)",
+    "Cumulative Distance (K.M.)":"Distancia acumulativa (K.M.)",
+    "TRIP REPORT":"REPORTE DE VIAJE",
+    "TRIP ID":"ID DE VIAJE",
+    "VEHICLE NAME":"NOMBRE DEL VEHICULO",
+    "SOURCE ADDRESS":"DIRECCIÓN DE LA FUENTE",
+    "DESTINATION ADDRESS":"DIRECCIÓN DE DESTINO",
+    "DISTANCE":"DISTANCIA",
+    "DURATION":"DURACIÓN",
+    "TRIP STATUS":"ESTADO DEL VIAJE",
+    "MILEAGE":"KILOMETRAJE",
+    "ADD EXPENSES":"AGREGAR GASTOS",
+    "EXPENSES LIST":"LISTA DE GASTOS",
+    "Amount":"Cantidad",
+    "Currency":"Moneda",
+    "Payment Mode":"Modo de pago",
+    "Expense type":"Tipo de gasto",
+    "GEO FENCING":"GEO FENCING",
+    "ADD DEVICE":"AÑADIR DISPOSITIVO",
+    "GENERAL SETTING":"AJUSTES GENERALES",
+    "Device ID *":"Identificación del dispositivo *",
+    "Enter Device ID":"Ingrese la ID del dispositivo",
+    "Device Name * ":"Nombre del dispositivo *",
+    "Enter Device Name":"Ingrese el nombre del dispositivo",
+    "SIM Number":"Numero SIM",
+    "SIM Number 2":"SIM número 2",
+    "SIM Provider 2":"Proveedor de SIM 2",
+    "Integration ID":"ID de integración",
+    "Select User":"Seleccionar usuario",
+    "Driver Contact Number":"Número de contacto del conductor",
+    "Select Vehicle type*":"Seleccione tipo de vehículo *",
+    "Type of Vehicle":"Tipo de vehiculo",
+    "mm/dd/yyyy":"mm / dd / aaaa",
+    "ICCICD Number":"Número ICCICD",
+    "IMSI":"IMSI",
+    "Unique ID":"Identificación única",
+    "CID number":"Número CID",
+    "Chassis number":"Número de chasis",
+    "Comapny Name":"nombre de empresa",
+    "Company Address":"Dirección de la empresa",
+    "Transport Office City":"Oficina de transporte de la ciudad",
+    "Transport Office State":"Estado de la oficina de transporte",
+    "Invoice Number":"Numero de factura",
+    "Number of SOS":"Número de SOS",
+    "Doc Type":"Tipo de documento",
+    "Enter SIM Provider":"Ingrese proveedor de SIM",
+    "Enter SIM Provider 2":"Ingrese el proveedor de SIM 2",
+    "Driver's contact number":"Numero de contacto del conductor",
+    "Device model *":"Modelo de dispositivo *",
+    "Vehicle type * ":"Tipo de vehiculo *",
+    "Expiration date":"Fecha de caducidad",
+    "ADD DEVICE":"AÑADIR DISPOSITIVO",
+    "Engine number":"Número de motor",
+    "Type of Vehicle ":"Tipo de vehiculo ",
+    "Manufacturing company":"Empresa de fabricación",
+    "Registration date ":"Fecha de Registro ",
+    "Date of Manufacturing Year ":"Fecha de año de fabricación",
+    "Last fitness date ":"Última fecha de ejercicio",
+    "ICCICD Number ":"Número ICCICD",
+    "Fitment Date ":"Fecha de montaje",
+    "IMSI ":"IMSI",
+    "Unique ID ":"Identificación única",
+    "CID number ":"Número CID",
+    "Chassis number ":"Número de chasis",
+    "Comapny Name ":"nombre de empresa",
+    "Comapny Address":"Dirección de la empresa",
+    "Invoice number":"Número de factura",
+    "Invoice Date":"Fecha de la factura",
+    "No. of SOS ":"No. de SOS",
+    "Add Document field":"Agregar campo de documento",
+    "Document issued date :":"Fecha de emisión del documento:",
+    "UPDATE AND SAVE":"ACTUALIZAR Y AHORRAR",
+    "Reason":"Razón",
+    "Password":"Contraseña",
+    "Driver Search":"Búsqueda de conductores",
+    "Enter User Id":"Ingresar ID de usuario",
+    "Enter First name":"Ingrese nombre",
+    "Enter Last name":"Introduzca el apellido",
+    "Enter email":"Ingrese correo electrónico",
+    "Enter mobile number":"Ingrese el número de teléfono móvil",
+    "Enter Address":"Ingresa la direccion",
+    "EDIT CUSTOMER":"EDITAR CLIENTE",
+    "Delete Dealer":"Eliminar distribuidor",
+    "Documents":"Documentos",
+    "Document Name":"nombre del documento",
+    "Document number":"Número del Documento",
+    "Action":"Acción",
+    "Add":"Añadir",
+    "Upload Documents *":"Subir documentos *",
+    "Save":"Salvar",
+    "delete":"Eliminar",
+    "Doc number":"Número de doc.",
+    "Download":"Descargar",
+    "Yes, Delete it!":"Sí, bórralo!",
+    "Cancel":"Cancelar",
+    "EDIT DEALER":"EDITAR DISTRIBUIDOR",
+    "Are you sure ?":"Estás seguro ?",
+    "you want to delete dealer":"quieres eliminar distribuidor",
+    "Edit Model":"Editar modelo",
+    "Enter device model":"Ingrese el modelo del dispositivo",
+    "Configuration command":"Comando de configuración",
+    "Location command":"Comando de ubicación",
+    "Imobilizer command":"Comando inmovilizador",
+    "Resume command":"Reanudar comando",
+    "Reset command":"Comando de reinicio",
+    "Manufacturer":"Fabricante",
+    "Server Command":"Comando del servidor",
+    "Mobile Command":"Comando móvil",
+    "Update":"Actualizar",
+    "Edit trip details":"Editar detalles del viaje",
+    "Route name":"Nombre de la ruta",
+    "Vehicles name":"Nombre de los vehículos",
+    "Radius (in meter)":"Radio (en metros)",
+    "Driver name":"Nombre del conductor",
+    "Loading site":"Cargando sitio",
+    "Unloading site":"Sitio de descarga",
+    "LR Number":"Numero LR",
+    "Device Name: ":"Nombre del dispositivo:",
+    "Days: ":"Dias",
+    "M":"METRO",
+    "T":"",
+    "W":"",
+    "Th":"",
+    "F":"",
+    "Sa":"",
+    "S":"",
+    "Edit Vehicle Type":"Editar tipo de vehículo",
+    "Brand:":"Marca",
+    "Enter Brand Name":"Ingrese el nombre de la marca",
+    "Description:":"Descripción:",
+    "Enter Description":"",
+    "Please Enter Description":"Ingrese la descripción",
+    "Select icon type":"Seleccionar tipo de icono",
+    "Voltage Value":"Valor de voltaje",
+    "Fuel value":"Valor del combustible",
+    "add":"añadir",
+    "Volatage Calibrator":"Calibrador de Volatage",
+    "Please Enter voltage":"Por favor, introduzca el voltaje",
+    "Please fuel value":"Por favor, valor de combustible",
+    "Please Enter Tank Size":"Please Enter Tank Size",
+    "FUEL EVENTS":"EVENTOS DE COMBUSTIBLE",
+    "Please Enter Mileage":"Por favor ingrese el kilometraje",
+    "Fuel Change (L)":"Cambio de combustible (L)",
+    "Search Device":"Buscar dispositivo",
+    "Generate Report":"Generar informe",
+    "Sleep Mode Temprature":"Temporización del modo de reposo",
+    "Temprature":"Temperatura",
+    "ON":"EN",
+    "OFF":"APAGADO",
+    "list":"lista",
+    "Enter GEO FENCE NAME":"Ingrese el NOMBRE DE LA CERCA GEO",
+    "Get Alert on :":"Recibir alerta sobre:",
+    "Select Your Geo Fence Region :":"Seleccione su región de cerca geográfica:",
+    "Search Box":"Caja de búsqeda",
+    "--Select group--":"Selecciona grupo",
+    "--Geofence type--":"Tipo de geofence-",
+    "--GEO FENCE NAME--":"--NOMBRE GEO FENCE--",
+    "Admin":"Administración",
+    "close":"cerrar",
+    "DEVICES":"DISPOSITIVOS",
+    "Matrix Input":"Entrada de matriz",
+    "Device Id-":"Identificación del dispositivo-",
+    "Matrix Name":"Nombre de matriz",
+    "Topic":"Tema",
+    "Ext. Volt.":"Ext. Voltio.",
+    "Fuel Volt.":"Voltios de combustible",
+    "Real Time GPS Based Vechicle Tracking":"Seguimiento de Vechicle basado en GPS en tiempo real",
+    "Live Vehicle Tracking gives you real time updates, allowing you to get the latest tracking information on your vechile.":"Live Vehicle Tracking le brinda actualizaciones en tiempo real, lo que le permite obtener la información de seguimiento más reciente en su vechile.",
+    "Enterprise Maps by Google-API for commercial use that gives accurate location details of vechiles.":"Enterprise Maps by Google-API para uso comercial que proporciona detalles precisos de ubicación de vechiles.",
+    "User-Friendly tracking system that helps you to effortlessly track and locate the fleet on Click.":"Sistema de seguimiento fácil de usar que le ayuda a rastrear y localizar la flota sin esfuerzo con Click.",
+    "Software as a Service(Saas) with perpetual uptime.":"Software como servicio (Saas) con tiempo de actividad perpetuo.",
+    "Alerts and Event Notifications":"Alertas y notificaciones de eventos",
+    "Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.":"Get Notifications on while on move on SMS & email and Mobile application, you'll be kept updated with real time alerts.",
+    "Multiple Recipients can receive alerts, Not only you, but your near ones can also be known for the alerts generated for immediate help.":"Múltiples Destinatarios pueden recibir alertas, no solo usted, sino también las suyas cercanas, por las alertas generadas para obtener ayuda inmediata.",
+    "Schedule your alerts as per your convenience that suits your needs":"Schedule your alerts as per your convenience that suits your needs",
+    "Detailed Reports for analysis is also available for making quik decisions":"Informes detallados para el análisis también están disponibles para tomar decisiones rápidas",
+    "Geofences":"Geofences",
+    "Upload all Geofence in your account and assign them to the vehicles.":"Cargue todos los Geofence en su cuenta y asígnelos a los vehículos.",
+    "Find and mark geofences without knowing latitude and longitude values.":"Encuentra y marca geofences sin conocer los valores de latitud y longitud.",
+    "Polygon geofence available for easy access. All geofences can be marked as per user convinience and can be assigned to vehicles so that every alert is been sen to you. Secure your loved ones and ensure work done by your Forces.":"Geofence poligonal disponible para facilitar el acceso. Todas las geofences se pueden marcar según la conveniencia del usuario y se pueden asignar a vehículos para que se le envíen todas las alertas. Asegure a sus seres queridos y garantice el trabajo realizado por sus Fuerzas.",
+    "Date and Time Based reports available for analyzing vehicle usage.":"Informes basados ​​en fecha y hora disponibles para analizar el uso del vehículo.",
+    "Location of vehicles, Every log shows you location of vehicle where your vehicle was and easy to manage the incident where it happend.":"Ubicación de los vehículos, cada registro muestra la ubicación del vehículo donde estaba su vehículo y es fácil de manejar el incidente donde sucedió.",
+    "Vehicle wise / Fleet wise consildated report. Gives you summary of the day for vehicle(s).":"Informe inteligente del vehículo / informe inteligente de la flota. Le da un resumen del día para los vehículos.",
+    "Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..":"Alert Report, Consolidated report for all alerts generated by vehicle. Overspeeding, tampering, Ignition etc..",
+    "Geofence report, detailed report when and at what time vehicle enteredin geo  areas.":"Geofence report, detailed report when and at what time vehicle enteredin geo  areas.",
+    "How it works":"Cómo funciona",
+    "Real-time tracking":"Seguimiento en tiempo real",
+    "Advanced Reporting":"Informes avanzados",
+    "Alerts & Warning":"Alertas y advertencias",
+    "2-Way messaging":"Mensajería bidireccional",
+    "Engine immobilisation":"Inmovilización del motor",
+    "Monitor gauges":"Medidores de monitor",
+    "Access anytime, anywhere!":"¡Accede en cualquier momento y en cualquier lugar!",
+    "Web browser based software":"Software basado en navegador web",
+    "Android app":"aplicación Android",
+    "iPhone app":"aplicación para iPhone",
+    "Request for Demo":"Solicitud de demostración",
+    "Get Detail":"Obtener detalles",
+    "Export To Excel":"Exportar a Excel",
+    "Loading Site":"Cargando sitio",
+    "Distance":"Distancia",
+    "ETA":"ETA",
+    "directions":"direcciones",
+    "Google Traffic":"Tráfico de Google",
+    "Google Hybrid":"Google Hybrid",
+    "Google Satellite":"Google Satellite",
+    "Google Physical":"Google Physical",
+    "Google Street":"Google Street",
+    "map":"mapa",
+    "Please Select Your Device, From/To Date & Time to view history from above options":"Seleccione su dispositivo, desde / hasta la fecha y hora para ver el historial de las opciones anteriores",
+    "Generate Map":"Generar mapa",
+    "Trip Name":"Nombre del viaje",
+    "Select destination":"Seleccionar destino",
+    "CREATE TRIP":"CREAR VIAJE",
+    "Total Distance: ":"Distancia total",
+    "Idle Time (Min)":"Tiempo de inactividad (min)",
+    "Go to Site >":"Ir al sitio>",
+    "Welcome To OneQlik":"Welcome To OneQlik",
+    "Login":"Iniciar sesión",
+    "Username / Phone Number":"Nombre de usuario / número de teléfono",
+    "Enter Mobile number*":"Ingrese el número de móvil *",
+    "Confirm New Password":"Confirmar nueva contraseña",
+    "Send OTP":"Enviar OTP",
+    "Back to Login":"Atrás para iniciar sesión",
+    "Reset Password":"Restablecer la contraseña",
+    "Back to previous Form":"Volver al formulario anterior",
+    "Forgot Username / Password?":"¿Olvidó su nombre de usuario / contraseña?",
+    "First Name":"Primer nombre",
+    "Last Name":"Apellido",
+    "Email Id":"Identificación de correo",
+    "Organisation":"Organización",
+    "notifications":"notificaciones",
+    "Notification Sound":"Sonido de notificación",
+    "Notifications":"Notificaciones",
+    "Add Phone":"Añadir teléfono",
+    "Close":"Cerrar",
+    "Add Email":"Agregar correo electrónico",
+    "POI details":"Detalles de PDI",
+    "Add POI details":"Agregar detalles de PDI",
+    "Type POI name":"Escriba el nombre del PDI",
+    "Previous point duration":"Duración del punto anterior",
+    "Days":"Dias",
+    "Hours":"Horas",
+    "Minutes":"Minutos",
+    "Next point duration":"Duración del siguiente punto",
+    "Min":"",
+    "Halt":"Detener",
+    "Mapped Vehicles":"Vehículos mapeados",
+    "Radius":"Radio",
+    "POI Name":"Nombre de PDI",
+    "Enter a location":"Ingrese una ubicación",
+    "ADD":"AÑADIR",
+    "Routes Search":"Búsqueda de rutas",
+    "Route Status":"Estado de ruta",
+    "Source":"Fuente",
+    "Destination":"Destino",
+    "Test name":"Nombre de la prueba",
+    "Test Source":"Fuente de prueba",
+    "Test destination":"Prueba de destino",
+    "Routes":"Rutas",
+    "Untracked vehicles":"Vehículos sin seguimiento",
+    "Please Enter Email ID / Phone Number":"Por favor, introduzca la identificación de correo electrónico / número de teléfono",
+    "Please Enter Password":"Por favor, ingrese contraseña",
+    "Please Re Enter Password":"Por favor, vuelva a ingresar la contraseña",
+    "Delete route":"Eliminar ruta",
+    "Are you sure to delete this route ??":"¿Estás seguro de eliminar esta ruta?",
+    "DELETE":"ELIMINAR",
+    "Create Trip":"Crear viaje",
+    "One way trip":"Viaje sencillo",
+    "Two way trip":"Viaje de ida",
+    "Round trip":"Viaje ida y vuelta",
+    "Start Date/Time":"Fecha / hora de inicio",
+    "End Date/Time":"Fecha / hora de finalización",
+    "Planned start time":"Hora de inicio planificada",
+    "Planned end time":"Hora de finalización planificada",
+    "Actual start time":"Hora de inicio real",
+    "Actual end time":"Hora final real",
+    "Trip History":"Historia del viaje",
+    "Trip type":"Tipo de viaje",
+    "Routes name":"Nombre de rutas",
+    "Total Distance":"Distancia total",
+    "Get route":"Obtener ruta",
+    "Parameters":"Parámetros",
+    "Enter First Name":"Ingrese nombre",
+    "Enter Last Name":"Introduzca el apellido",
+    "Invalid Password":"Contraseña invalida",
+    "Confirm Password":"Confirmar contraseña",
+    "Please Enter Confirm Password":"Por favor, ingrese Confirmar contraseña",
+    "Organisation Name":"nombre de la organización",
+    "Type of user":"Tipo de usuario",
+    "Mobile Verification":"Verificación móvil",
+    "Mobile Number":"Número de teléfono móvil",
+    "TRIP HISTORY":"HISTORIA DEL VIAJE",
+    "Event name":"Nombre del evento",
+    "Event time":"Hora del evento",
+    "Driver":"Conductor",
+    "Token":"Simbólico",
+    "Restore":"Restaurar",
+    "Delete Permanently":"borrar permanentemente",
+    "Select no of Days to get reminder for your services":"Seleccione no de días para recibir un recordatorio de sus servicios.",
+    "Prior Notification (Days)":"Notificación previa (días)",
+    "Enter Additonal information here...":"Ingrese información adicional aquí ...",
+    "Calibration":"Calibración"
+
+}
\ No newline at end of file
diff --git a/src/assets/image/1.gif b/src/assets/image/1.gif
new file mode 100644
index 0000000..bc5839d
Binary files /dev/null and b/src/assets/image/1.gif differ
diff --git a/src/assets/image/1.ico b/src/assets/image/1.ico
new file mode 100644
index 0000000..d201d94
Binary files /dev/null and b/src/assets/image/1.ico differ
diff --git a/src/assets/image/1280.gif b/src/assets/image/1280.gif
new file mode 100644
index 0000000..351f488
Binary files /dev/null and b/src/assets/image/1280.gif differ
diff --git a/src/assets/image/2-way-icon.png b/src/assets/image/2-way-icon.png
new file mode 100644
index 0000000..94d2f4e
Binary files /dev/null and b/src/assets/image/2-way-icon.png differ
diff --git a/src/assets/image/2-way-icon2.png b/src/assets/image/2-way-icon2.png
new file mode 100644
index 0000000..3dd5bbd
Binary files /dev/null and b/src/assets/image/2-way-icon2.png differ
diff --git a/src/assets/image/2.gif b/src/assets/image/2.gif
new file mode 100644
index 0000000..93d5d48
Binary files /dev/null and b/src/assets/image/2.gif differ
diff --git a/src/assets/image/3.gif b/src/assets/image/3.gif
new file mode 100644
index 0000000..b800205
Binary files /dev/null and b/src/assets/image/3.gif differ
diff --git a/src/assets/image/4.gif b/src/assets/image/4.gif
new file mode 100644
index 0000000..54e079b
Binary files /dev/null and b/src/assets/image/4.gif differ
diff --git a/src/assets/image/5.gif b/src/assets/image/5.gif
new file mode 100644
index 0000000..cda3daa
Binary files /dev/null and b/src/assets/image/5.gif differ
diff --git a/src/assets/image/6.gif b/src/assets/image/6.gif
new file mode 100644
index 0000000..a28fb9e
Binary files /dev/null and b/src/assets/image/6.gif differ
diff --git a/src/assets/image/CS_3_8_syllabus 07102015.pdf b/src/assets/image/CS_3_8_syllabus 07102015.pdf
new file mode 100644
index 0000000..7039f59
Binary files /dev/null and b/src/assets/image/CS_3_8_syllabus 07102015.pdf differ
diff --git a/src/assets/image/PowerIdle.png b/src/assets/image/PowerIdle.png
new file mode 100644
index 0000000..c125ac8
Binary files /dev/null and b/src/assets/image/PowerIdle.png differ
diff --git a/src/assets/image/Small_blue_dot.png b/src/assets/image/Small_blue_dot.png
new file mode 100644
index 0000000..01013d4
Binary files /dev/null and b/src/assets/image/Small_blue_dot.png differ
diff --git a/src/assets/image/Traffic-Blur.jpg b/src/assets/image/Traffic-Blur.jpg
new file mode 100644
index 0000000..9151f4c
Binary files /dev/null and b/src/assets/image/Traffic-Blur.jpg differ
diff --git a/src/assets/image/Traffic_1.png b/src/assets/image/Traffic_1.png
new file mode 100644
index 0000000..d0eb1b1
Binary files /dev/null and b/src/assets/image/Traffic_1.png differ
diff --git a/src/assets/image/Vehicles-hp.png b/src/assets/image/Vehicles-hp.png
new file mode 100644
index 0000000..2c98d3c
Binary files /dev/null and b/src/assets/image/Vehicles-hp.png differ
diff --git a/src/assets/image/a.jpg b/src/assets/image/a.jpg
new file mode 100644
index 0000000..812774c
Binary files /dev/null and b/src/assets/image/a.jpg differ
diff --git a/src/assets/image/about_us_2.jpg b/src/assets/image/about_us_2.jpg
new file mode 100644
index 0000000..701ff69
Binary files /dev/null and b/src/assets/image/about_us_2.jpg differ
diff --git a/src/assets/image/aboutus-1.jpg b/src/assets/image/aboutus-1.jpg
new file mode 100644
index 0000000..0ed7751
Binary files /dev/null and b/src/assets/image/aboutus-1.jpg differ
diff --git a/src/assets/image/ac-off.png b/src/assets/image/ac-off.png
new file mode 100644
index 0000000..be57fdd
Binary files /dev/null and b/src/assets/image/ac-off.png differ
diff --git a/src/assets/image/ac-on.png b/src/assets/image/ac-on.png
new file mode 100644
index 0000000..72261e1
Binary files /dev/null and b/src/assets/image/ac-on.png differ
diff --git a/src/assets/image/acGreen.png b/src/assets/image/acGreen.png
new file mode 100644
index 0000000..464782a
Binary files /dev/null and b/src/assets/image/acGreen.png differ
diff --git a/src/assets/image/acGrey.png b/src/assets/image/acGrey.png
new file mode 100644
index 0000000..07efef6
Binary files /dev/null and b/src/assets/image/acGrey.png differ
diff --git a/src/assets/image/acRed.png b/src/assets/image/acRed.png
new file mode 100644
index 0000000..d57c413
Binary files /dev/null and b/src/assets/image/acRed.png differ
diff --git a/src/assets/image/acceleration.png b/src/assets/image/acceleration.png
new file mode 100644
index 0000000..2d6733a
Binary files /dev/null and b/src/assets/image/acceleration.png differ
diff --git a/src/assets/image/accept.png b/src/assets/image/accept.png
new file mode 100644
index 0000000..4a2dc6a
Binary files /dev/null and b/src/assets/image/accept.png differ
diff --git a/src/assets/image/access.png b/src/assets/image/access.png
new file mode 100644
index 0000000..a750655
Binary files /dev/null and b/src/assets/image/access.png differ
diff --git a/src/assets/image/acimgGreen.png b/src/assets/image/acimgGreen.png
new file mode 100644
index 0000000..0265fe0
Binary files /dev/null and b/src/assets/image/acimgGreen.png differ
diff --git a/src/assets/image/acimgRed.png b/src/assets/image/acimgRed.png
new file mode 100644
index 0000000..2399592
Binary files /dev/null and b/src/assets/image/acimgRed.png differ
diff --git a/src/assets/image/act.png b/src/assets/image/act.png
new file mode 100644
index 0000000..6c6328e
Binary files /dev/null and b/src/assets/image/act.png differ
diff --git a/src/assets/image/activeBike.png b/src/assets/image/activeBike.png
new file mode 100644
index 0000000..8693cc6
Binary files /dev/null and b/src/assets/image/activeBike.png differ
diff --git a/src/assets/image/activeCar.png b/src/assets/image/activeCar.png
new file mode 100644
index 0000000..ffdac01
Binary files /dev/null and b/src/assets/image/activeCar.png differ
diff --git a/src/assets/image/active_Bike.png b/src/assets/image/active_Bike.png
new file mode 100644
index 0000000..917f5f0
Binary files /dev/null and b/src/assets/image/active_Bike.png differ
diff --git a/src/assets/image/addressICON.png b/src/assets/image/addressICON.png
new file mode 100644
index 0000000..1ea6167
Binary files /dev/null and b/src/assets/image/addressICON.png differ
diff --git a/src/assets/image/alarm.png b/src/assets/image/alarm.png
new file mode 100644
index 0000000..fc3e043
Binary files /dev/null and b/src/assets/image/alarm.png differ
diff --git a/src/assets/image/alert.png b/src/assets/image/alert.png
new file mode 100644
index 0000000..a1a0f9c
Binary files /dev/null and b/src/assets/image/alert.png differ
diff --git a/src/assets/image/alert2.png b/src/assets/image/alert2.png
new file mode 100644
index 0000000..04ce9d3
Binary files /dev/null and b/src/assets/image/alert2.png differ
diff --git a/src/assets/image/ambulance_b.png b/src/assets/image/ambulance_b.png
new file mode 100644
index 0000000..d0d2c3f
Binary files /dev/null and b/src/assets/image/ambulance_b.png differ
diff --git a/src/assets/image/ambulance_g.png b/src/assets/image/ambulance_g.png
new file mode 100644
index 0000000..f08763b
Binary files /dev/null and b/src/assets/image/ambulance_g.png differ
diff --git a/src/assets/image/ambulance_r.png b/src/assets/image/ambulance_r.png
new file mode 100644
index 0000000..92869e4
Binary files /dev/null and b/src/assets/image/ambulance_r.png differ
diff --git a/src/assets/image/ambulance_y.png b/src/assets/image/ambulance_y.png
new file mode 100644
index 0000000..ed7f971
Binary files /dev/null and b/src/assets/image/ambulance_y.png differ
diff --git a/src/assets/image/analyse.png b/src/assets/image/analyse.png
new file mode 100644
index 0000000..82713b6
Binary files /dev/null and b/src/assets/image/analyse.png differ
diff --git a/src/assets/image/android.png b/src/assets/image/android.png
new file mode 100644
index 0000000..02611bb
Binary files /dev/null and b/src/assets/image/android.png differ
diff --git a/src/assets/image/armSensor.png b/src/assets/image/armSensor.png
new file mode 100644
index 0000000..abbae61
Binary files /dev/null and b/src/assets/image/armSensor.png differ
diff --git a/src/assets/image/avatar-01.jpg b/src/assets/image/avatar-01.jpg
new file mode 100644
index 0000000..3b63407
Binary files /dev/null and b/src/assets/image/avatar-01.jpg differ
diff --git a/src/assets/image/b.png b/src/assets/image/b.png
new file mode 100644
index 0000000..73c6d4c
Binary files /dev/null and b/src/assets/image/b.png differ
diff --git a/src/assets/image/back.png b/src/assets/image/back.png
new file mode 100644
index 0000000..73c6d4c
Binary files /dev/null and b/src/assets/image/back.png differ
diff --git a/src/assets/image/back1.jpg b/src/assets/image/back1.jpg
new file mode 100644
index 0000000..36a1a41
Binary files /dev/null and b/src/assets/image/back1.jpg differ
diff --git a/src/assets/image/battery.png b/src/assets/image/battery.png
new file mode 100644
index 0000000..429f602
Binary files /dev/null and b/src/assets/image/battery.png differ
diff --git a/src/assets/image/bg-c.jpg b/src/assets/image/bg-c.jpg
new file mode 100644
index 0000000..bac75ea
Binary files /dev/null and b/src/assets/image/bg-c.jpg differ
diff --git a/src/assets/image/bg1.jpg b/src/assets/image/bg1.jpg
new file mode 100644
index 0000000..c26e80b
Binary files /dev/null and b/src/assets/image/bg1.jpg differ
diff --git a/src/assets/image/bg2.jpg b/src/assets/image/bg2.jpg
new file mode 100644
index 0000000..e6f450e
Binary files /dev/null and b/src/assets/image/bg2.jpg differ
diff --git a/src/assets/image/bg3.jpeg b/src/assets/image/bg3.jpeg
new file mode 100644
index 0000000..a3d2c62
Binary files /dev/null and b/src/assets/image/bg3.jpeg differ
diff --git a/src/assets/image/bg_content.png b/src/assets/image/bg_content.png
new file mode 100644
index 0000000..5408135
Binary files /dev/null and b/src/assets/image/bg_content.png differ
diff --git a/src/assets/image/bgtry1.jpg b/src/assets/image/bgtry1.jpg
new file mode 100644
index 0000000..0e97745
Binary files /dev/null and b/src/assets/image/bgtry1.jpg differ
diff --git a/src/assets/image/bgtry2.jpg b/src/assets/image/bgtry2.jpg
new file mode 100644
index 0000000..bed2bd6
Binary files /dev/null and b/src/assets/image/bgtry2.jpg differ
diff --git a/src/assets/image/bgtry3.jpg b/src/assets/image/bgtry3.jpg
new file mode 100644
index 0000000..2e08443
Binary files /dev/null and b/src/assets/image/bgtry3.jpg differ
diff --git a/src/assets/image/bgtry4.png b/src/assets/image/bgtry4.png
new file mode 100644
index 0000000..453d8fd
Binary files /dev/null and b/src/assets/image/bgtry4.png differ
diff --git a/src/assets/image/bike.png b/src/assets/image/bike.png
new file mode 100644
index 0000000..deb831b
Binary files /dev/null and b/src/assets/image/bike.png differ
diff --git a/src/assets/image/bike.svg.svg b/src/assets/image/bike.svg.svg
new file mode 100644
index 0000000..1a6de88
--- /dev/null
+++ b/src/assets/image/bike.svg.svg
@@ -0,0 +1,243 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   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"
+   version="1.1"
+   viewBox="0 0 354.33 885.83"
+   width = "20px"
+   height = "70px"
+   id="svg3111">
+  <defs
+     id="defs3">
+    <linearGradient
+       x1="1288.4"
+       y1="314.78"
+       gradientTransform="translate(-522.24 -9.2108)"
+       x2="1290"
+       gradientUnits="userSpaceOnUse"
+       y2="274.25"
+       id="linearGradient3270">
+      <stop
+         offset="0"
+         style="stop-color:#999999"
+         id="stop3081" />
+      <stop
+         offset="1"
+         style="stop-color:#999999;stop-opacity:0"
+         id="stop3083" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(0 -166.54)"
+     id="layer1">
+    <g
+       transform="matrix(2.507 0 0 2.507 -1748.3 -408.39)"
+       id="g3237">
+      <rect
+         x="580.04"
+         y="534.91"
+         width="26.631"
+         height="5.6852"
+         transform="rotate(-17.908)"
+         style="stroke:#2e3436;stroke-linecap:square;stroke-width:.83782;fill:#333333"
+         ry="2.8426"
+         id="rect3065" />
+      <rect
+         x="759.64"
+         y="260.11"
+         width="19.193"
+         height="55.306"
+         ry="10.607"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#2e3436"
+         id="rect3057" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#1a1a1a"
+         d="m741.71 334.36 2.2728 3.5355 9.3439 2.5254 6.0609 6.0609 2.778 3.0305 3.5355 2.2728 7.5761-0.50508 2.778-1.7678 2.7779-4.0406 5.5558-4.7982 9.849-1.7678-0.2525-4.2931-1.7678-25.506-5.0508-16.92-17.425-11.869h-4.0406l-17.678 13.385-5.0507 16.415z"
+         id="path3075" />
+      <path
+         style="fill:url(#linearGradient3270)"
+         d="m744.61 315.42s8.7125-4.9245 20.708-5.0508c11.996-0.12626 26.769 4.9245 26.769 4.9245l-1.7677-14.395-6.8186-11.996-15.405-8.5863-17.804 11.996-6.1872 9.849z"
+         id="path3077" />
+      <path
+         d="m734.68 307.21s1.2627-13.385 5.5559-17.678c4.2931-4.2932 28.158-15.657 28.158-15.657l0.6313 7.1973s-17.804 9.7227-19.824 15.405c-2.0203 5.6821-3.7881 11.996-4.1669 15.91-0.3788 3.9143-1.2627 22.728-1.2627 22.728l-7.5761-2.9042 0.6313-15.784-1.894-7.4499z"
+         style="stroke:#000000;stroke-width:1px;fill:#aa0000"
+         id="path3033" />
+      <path
+         d="m743.97 310.94-5.0507-0.25254s-9.4702-1.1996-13.953 0.69448c-4.4825 1.894-11.49 10.102-11.49 10.102l0.6314 2.336s9.0914 2.5885 13.826 0.69448c4.7351-1.894 8.902-7.0711 8.902-7.0711l0.2526-2.0834 5.8715 0.18941s0.8207-0.63135 1.1995-2.336-0.1894-2.2728-0.1894-2.2728z"
+         style="stroke:#000000;stroke-width:1px;fill:#0e0e0e"
+         id="path3035" />
+      <path
+         d="m742.04 338.1s-4.2857 11.964-4.8214 18.393c-0.5357 6.4286-0.3571 27.321-0.3571 27.321l8.2142 12.321 2.8572-13.214s12.678 26.071 20.536 26.429c3.408 0.15491 0.016-57.679 0.016-57.679s-7.5164-0.71429-8.2307-3.5714c-0.7143-2.8572-0.8928-2.8572-0.8928-2.8572s-5.7143-5.5357-8.9286-6.0714c-3.2143-0.53572-8.3929-1.0714-8.3929-1.0714z"
+         style="stroke:#000000;stroke-width:1px;fill:#710306"
+         id="path3037" />
+      <path
+         d="m745.43 395.24s4.1071 3.2143 4.1071 8.5714c0 5.3572 2.3215 13.036 2.3215 13.036s-4.4643 6.0714-3.9286 13.036c0.5357 6.9643 8.5714 16.964 8.5714 16.964l11.607 1.9643 0.7142-40.357s-8.75-3.9286-10.357-7.8571c-1.6071-3.9286-10.357-17.857-10.357-17.857l-2.1429 8.3929z"
+         style="stroke:#000000;stroke-width:1px;fill:#1a181b"
+         id="path3039" />
+      <rect
+         x="801.26"
+         y="371.6"
+         width="15"
+         height="40.179"
+         transform="rotate(7.011)"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#888a85"
+         ry="7.5"
+         id="rect3059" />
+      <path
+         d="m767.93 449.17v54.643s-3.5714-3.9286-5.1786-6.25c-1.6071-2.3214-5.3571-4.6428-6.0714-9.2857s-9.8214-15.179-12.5-21.25c-2.6786-6.0714-4.4643-14.107-2.5-23.393 1.9643-9.2857 6.7857-9.2857 6.7857-9.2857l6.25 10 4.4643 3.9286z"
+         style="stroke:#000000;stroke-width:1px;fill:#700500"
+         id="path3041" />
+      <rect
+         x="-882.12"
+         y="62.161"
+         width="26.631"
+         height="5.6852"
+         ry="2.8426"
+         transform="matrix(-.95155 -.30749 -.30749 .95155 0 0)"
+         style="stroke:#2e3436;stroke-linecap:square;stroke-width:.83782;fill:#333333"
+         id="rect3067" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#aa0000"
+         d="m802.46 307.21s-1.2627-13.385-5.5559-17.678c-4.2931-4.2932-28.284-15.657-28.284-15.657l0.3788 7.5762s16.92 9.3439 18.94 15.026c2.0203 5.6821 3.7881 11.996 4.1669 15.91 0.3788 3.9143 1.2627 22.728 1.2627 22.728l7.5761-2.9042-0.6313-15.784 1.894-7.4499z"
+         id="path3043" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#0e0e0e"
+         d="m793.18 310.94 5.0507-0.25254s9.4702-1.1996 13.953 0.69448c4.4825 1.894 11.49 10.102 11.49 10.102l-0.6314 2.336s-9.0914 2.5885-13.826 0.69448c-4.7351-1.894-8.902-7.0711-8.902-7.0711l-0.2526-2.0834-5.8715 0.18941s-0.8207-0.63135-1.1995-2.336 0.1894-2.2728 0.1894-2.2728z"
+         id="path3045" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#710306"
+         d="m795.1 338.1s4.2857 11.964 4.8214 18.393c0.5357 6.4286 0.3571 27.321 0.3571 27.321l-8.2142 12.321-2.8572-13.214s-9.4643 26.786-19.464 27.143c-3.4094 0.12176-1.5928-58.519-1.5928-58.519s8.0214-0.58802 8.7357-3.4452 0.8928-2.8572 0.8928-2.8572 5.7143-5.5357 8.9286-6.0714c3.2143-0.53572 8.3929-1.0714 8.3929-1.0714z"
+         id="path3047" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#1a181b"
+         d="m791.71 395.24s-4.1071 3.2143-4.1071 8.5714c0 5.3572-2.3215 13.036-2.3215 13.036s4.4643 6.0714 3.9286 13.036c-0.5357 6.9643-8.5714 16.964-8.5714 16.964l-11.607 1.9643 0.2679-40.268s7.7679-4.0179 9.375-7.9464c1.6071-3.9286 10.357-17.857 10.357-17.857l2.1429 8.3929z"
+         id="path3049" />
+      <rect
+         x="-724.33"
+         y="559.21"
+         width="15"
+         height="40.179"
+         ry="7.5"
+         transform="matrix(-.99252 .12206 .12206 .99252 0 0)"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#888a85"
+         id="rect3093" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#700500"
+         d="m767.6 449.17 0.3571 54.643s4.8214-3.9286 6.4286-6.25c1.6071-2.3214 5.3571-4.6428 6.0714-9.2857s9.8214-15.179 12.5-21.25c2.6786-6.0714 4.4643-14.107 2.5-23.393-1.9643-9.2857-6.7857-9.2857-6.7857-9.2857l-6.25 10-4.4643 3.9286z"
+         id="path3051" />
+      <path
+         style="fill:#d40000"
+         d="m789.01 439.35c0.1338 5.4692-2.3214 10.84-2.3214 15.893 0 9.0869-8.9286 16.982-8.9286 26.25 0 5.2368-6.25 6.8602-6.25 10.714 0 1.1294-1.0714 4.3437-1.0714 3.2143 0-1.8616 34.205-46.021 18.571-56.071z"
+         id="path3101" />
+      <path
+         d="m750.37 365.87c0.5489 2.0548 1.7707 3.9022 2.4107 5.9822 1.0301 3.348 3.0845 6.4452 3.9285 9.8214 3.6998 14.799-6.6719-7.4878-9.1964-8.75-0.064-0.0323-5.0841 11.518-4.9107 11.518 1.0463 0-0.9144-5.6004-1.0714-6.0714-1.3074-3.922-0.5646-8.9942 0-12.946 0.3644-2.5509-1.1359-21.875 1.6964-21.875 5.7352 0 1.6594 20.265 7.1429 22.321z"
+         style="fill:#aa0000"
+         id="path3099" />
+      <path
+         style="fill:#ff2a2a"
+         d="m785.61 365.87c-0.5489 2.0548-1.7707 3.9022-2.4107 5.9822-1.0301 3.348-3.0845 6.4452-3.9285 9.8214-3.6998 14.799 6.6719-7.4878 9.1964-8.75 0.064-0.0323 5.0841 11.518 4.9107 11.518-1.0463 0 0.9144-5.6004 1.0714-6.0714 1.3074-3.922 0.5646-8.9942 0-12.946-0.3644-2.5509 1.1359-21.875-1.6964-21.875-5.7352 0-1.6594 20.265-7.1429 22.321z"
+         id="path3097" />
+      <rect
+         x="715.12"
+         y="334.7"
+         width="13.485"
+         height="57.806"
+         ry="7.5"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#333333"
+         id="rect3063" />
+      <path
+         d="m747.56 439.88c-0.1338 5.4692 2.3214 10.84 2.3214 15.893 0 9.0869 8.9286 16.982 8.9286 26.25 0 5.2368 6.25 6.8602 6.25 10.714 0 1.1294 1.0714 4.3437 1.0714 3.2143 0-1.8616-34.205-46.021-18.571-56.071z"
+         style="fill:#aa0000"
+         id="path3103" />
+      <rect
+         x="-463.45"
+         y="728.29"
+         width="32.468"
+         height="54.772"
+         ry="15.561"
+         transform="matrix(-.029133 -.99958 .99950 -.031709 0 0)"
+         style="stroke:#2e3436;stroke-linecap:square;stroke-width:1.0214;fill:#1a1a1a"
+         id="rect3107" />
+      <path
+         transform="translate(-523.76 16.548)"
+         d="m 1311.178,370.08551 a 18.435284,24.496199 0 0 1 -18.4353,24.4962 18.435284,24.496199 0 0 1 -18.4353,-24.4962 18.435284,24.496199 0 0 1 18.4353,-24.4962 18.435284,24.496199 0 0 1 18.4353,24.4962 z"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#edd400"
+         id="path3053" />
+      <rect
+         x="194.94"
+         y="792.36"
+         width="15.329"
+         height="45.357"
+         transform="rotate(-47.246)"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#333333"
+         ry="7.5"
+         id="rect3069" />
+      <rect
+         x="-820.13"
+         y="334.34"
+         width="13.485"
+         height="57.806"
+         transform="scale(-1,1)"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#333333"
+         ry="7.5"
+         id="rect3071" />
+      <rect
+         x="-846.99"
+         y="-335.19"
+         width="15.329"
+         height="45.357"
+         ry="7.5"
+         transform="matrix(-.67885 -.73428 -.73428 .67885 0 0)"
+         style="stroke:#2e3436;stroke-linecap:square;fill:#333333"
+         id="rect3073" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#2e3436"
+         d="m755.35 378.93s4.4195-9.0914 13.763-8.8388c12.008 0.32454 14.647 7.8287 14.647 7.8287l1.2627 10.48s-3.5356-9.9753-14.268-9.4702c-10.733 0.50508-15.91 9.3439-15.91 9.3439z"
+         id="path3055" />
+      <path
+         style="stroke:#000000;stroke-width:1px;fill:#333333"
+         d="m743.6 329.31s14.774 4.7982 15.152 5.3033c0.3788 0.50507-0.1263 2.7779 2.1466 3.283 2.2728 0.50508 3.788-1.894 5.9346-1.894s4.672 2.5254 7.3236 2.1466c2.6517-0.37881 3.0305-3.0305 3.0305-3.0305l16.036-4.9245-0.6314-4.2932-15.405 5.8084s-2.5254-1.0102-5.3033-1.0102-4.4194 1.7678-4.4194 1.7678-2.1466-1.389-4.0406-1.894c-1.8941-0.50508-4.5457 1.2627-4.5457 1.2627l-14.647-6.3135z"
+         id="path3087" />
+      <path
+         transform="matrix(.96467 .26345 -.26345 .96467 -390.2 -332.66)"
+         d="m 1288.3233,328.16418 a 8.3968935,5.4295697 0 0 1 -8.3969,5.42957 8.3968935,5.4295697 0 0 1 -8.3969,-5.42957 8.3968935,5.4295697 0 0 1 8.3969,-5.42957 8.3968935,5.4295697 0 0 1 8.3969,5.42957 z"
+         style="stroke:#000000;stroke-linecap:square;fill:#333333"
+         id="path3089" />
+      <path
+         transform="matrix(-.96467 .26345 .26345 .96467 1927.4 -332.66)"
+         d="m 1288.3233,328.16418 a 8.3968935,5.4295697 0 0 1 -8.3969,5.42957 8.3968935,5.4295697 0 0 1 -8.3969,-5.42957 8.3968935,5.4295697 0 0 1 8.3969,-5.42957 8.3968935,5.4295697 0 0 1 8.3969,5.42957 z"
+         style="stroke:#000000;stroke-linecap:square;fill:#333333"
+         id="path3091" />
+    </g>
+  </g>
+  <metadata
+     id="metadata40">
+    <rdf:RDF>
+      <cc:Work>
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <cc:license
+           rdf:resource="http://creativecommons.org/licenses/publicdomain/" />
+        <dc:publisher>
+          <cc:Agent
+             rdf:about="http://openclipart.org/">
+            <dc:title>Openclipart</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+      </cc:Work>
+      <cc:License
+         rdf:about="http://creativecommons.org/licenses/publicdomain/">
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Reproduction" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#Distribution" />
+        <cc:permits
+           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+</svg>
diff --git a/src/assets/image/bike_1.png b/src/assets/image/bike_1.png
new file mode 100644
index 0000000..b46a1e5
Binary files /dev/null and b/src/assets/image/bike_1.png differ
diff --git a/src/assets/image/biketracking.png b/src/assets/image/biketracking.png
new file mode 100644
index 0000000..2d5ba9a
Binary files /dev/null and b/src/assets/image/biketracking.png differ
diff --git a/src/assets/image/blue-pushpin.png b/src/assets/image/blue-pushpin.png
new file mode 100644
index 0000000..6e010b0
Binary files /dev/null and b/src/assets/image/blue-pushpin.png differ
diff --git a/src/assets/image/bootstrap.cs b/src/assets/image/bootstrap.cs
new file mode 100644
index 0000000..622b5a9
--- /dev/null
+++ b/src/assets/image/bootstrap.cs
@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v4.0.0-beta (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}html{box-sizing:border-box;font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{box-sizing:inherit}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.1}.display-2{font-size:5.5rem;font-weight:300;line-height:1.1}.display-3{font-size:4.5rem;font-weight:300;line-height:1.1}.display-4{font-size:3.5rem;font-weight:300;line-height:1.1}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:5px}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#868e96}.blockquote-footer::before{content:"\2014 \00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all .2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#868e96}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:#f8f9fa;border-radius:.25rem}a>code{padding:0;color:inherit;background-color:inherit}kbd{padding:.2rem .4rem;font-size:90%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;margin-top:0;margin-bottom:1rem;font-size:90%;color:#212529}pre code{padding:0;font-size:inherit;color:inherit;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;width:100%}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}}.table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #e9ecef}.table thead th{vertical-align:bottom;border-bottom:2px solid #e9ecef}.table tbody+tbody{border-top:2px solid #e9ecef}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #e9ecef}.table-bordered td,.table-bordered th{border:1px solid #e9ecef}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#dddfe2}.table-hover .table-secondary:hover{background-color:#cfd2d6}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#cfd2d6}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.thead-inverse th{color:#fff;background-color:#212529}.thead-default th{color:#495057;background-color:#e9ecef}.table-inverse{color:#fff;background-color:#212529}.table-inverse td,.table-inverse th,.table-inverse thead th{border-color:#32383e}.table-inverse.table-bordered{border:0}.table-inverse.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-inverse.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:991px){.table-responsive{display:block;width:100%;overflow-x:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive.table-bordered{border:0}}.form-control{display:block;width:100%;padding:.5rem .75rem;font-size:1rem;line-height:1.25;color:#495057;background-color:#fff;background-image:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0}.form-control::-webkit-input-placeholder{color:#868e96;opacity:1}.form-control:-ms-input-placeholder{color:#868e96;opacity:1}.form-control::placeholder{color:#868e96;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block}.col-form-label{padding-top:calc(.5rem - 1px * 2);padding-bottom:calc(.5rem - 1px * 2);margin-bottom:0}.col-form-label-lg{padding-top:calc(.5rem - 1px * 2);padding-bottom:calc(.5rem - 1px * 2);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem - 1px * 2);padding-bottom:calc(.25rem - 1px * 2);font-size:.875rem}.col-form-legend{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;font-size:1rem}.form-control-plaintext{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;line-height:1.25;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm,.input-group-lg>.form-control-plaintext.form-control,.input-group-lg>.form-control-plaintext.input-group-addon,.input-group-lg>.input-group-btn>.form-control-plaintext.btn,.input-group-sm>.form-control-plaintext.form-control,.input-group-sm>.form-control-plaintext.input-group-addon,.input-group-sm>.input-group-btn>.form-control-plaintext.btn{padding-right:0;padding-left:0}.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-sm>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-sm>select.form-control:not([size]):not([multiple]),.input-group-sm>select.input-group-addon:not([size]):not([multiple]),select.form-control-sm:not([size]):not([multiple]){height:calc(1.8125rem + 2px)}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-lg>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-lg>select.form-control:not([size]):not([multiple]),.input-group-lg>select.input-group-addon:not([size]):not([multiple]),select.form-control-lg:not([size]):not([multiple]){height:calc(2.3125rem + 2px)}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;margin-bottom:.5rem}.form-check.disabled .form-check-label{color:#868e96}.form-check-label{padding-left:1.25rem;margin-bottom:0}.form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}.form-check-input:only-child{position:static}.form-check-inline{display:inline-block}.form-check-inline .form-check-label{vertical-align:middle}.form-check-inline+.form-check-inline{margin-left:.75rem}.invalid-feedback{display:none;margin-top:.25rem;font-size:.875rem;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;width:250px;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(220,53,69,.8);border-radius:.2rem}.custom-select.is-valid,.form-control.is-valid,.was-validated .custom-select:valid,.was-validated .form-control:valid{border-color:#28a745}.custom-select.is-valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.was-validated .form-control:valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.invalid-feedback,.custom-select.is-valid~.invalid-tooltip,.form-control.is-valid~.invalid-feedback,.form-control.is-valid~.invalid-tooltip,.was-validated .custom-select:valid~.invalid-feedback,.was-validated .custom-select:valid~.invalid-tooltip,.was-validated .form-control:valid~.invalid-feedback,.was-validated .form-control:valid~.invalid-tooltip{display:block}.form-check-input.is-valid+.form-check-label,.was-validated .form-check-input:valid+.form-check-label{color:#28a745}.custom-control-input.is-valid~.custom-control-indicator,.was-validated .custom-control-input:valid~.custom-control-indicator{background-color:rgba(40,167,69,.25)}.custom-control-input.is-valid~.custom-control-description,.was-validated .custom-control-input:valid~.custom-control-description{color:#28a745}.custom-file-input.is-valid~.custom-file-control,.was-validated .custom-file-input:valid~.custom-file-control{border-color:#28a745}.custom-file-input.is-valid~.custom-file-control::before,.was-validated .custom-file-input:valid~.custom-file-control::before{border-color:inherit}.custom-file-input.is-valid:focus,.was-validated .custom-file-input:valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-invalid,.form-control.is-invalid,.was-validated .custom-select:invalid,.was-validated .form-control:invalid{border-color:#dc3545}.custom-select.is-invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.was-validated .form-control:invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid+.form-check-label,.was-validated .form-check-input:invalid+.form-check-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-indicator,.was-validated .custom-control-input:invalid~.custom-control-indicator{background-color:rgba(220,53,69,.25)}.custom-control-input.is-invalid~.custom-control-description,.was-validated .custom-control-input:invalid~.custom-control-description{color:#dc3545}.custom-file-input.is-invalid~.custom-file-control,.was-validated .custom-file-input:invalid~.custom-file-control{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-control::before,.was-validated .custom-file-input:invalid~.custom-file-control::before{border-color:inherit}.custom-file-input.is-invalid:focus,.was-validated .custom-file-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .input-group{width:auto}.form-inline .form-control-label{margin-bottom:0;vertical-align:middle}.form-inline .form-check{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;margin-top:0;margin-bottom:0}.form-inline .form-check-label{padding-left:0}.form-inline .form-check-input{position:relative;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0}.form-inline .custom-control-indicator{position:static;display:inline-block;margin-right:.25rem;vertical-align:text-bottom}.form-inline .has-feedback .form-control-feedback{top:0}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.5rem .75rem;font-size:1rem;line-height:1.25;border-radius:.25rem;transition:all .15s ease-in-out}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn.active,.btn:active{background-image:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 3px rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{background-color:#007bff;border-color:#007bff}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{background-color:#0069d9;background-image:none;border-color:#0062cc}.btn-secondary{color:#fff;background-color:#868e96;border-color:#868e96}.btn-secondary:hover{color:#fff;background-color:#727b84;border-color:#6c757d}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 3px rgba(134,142,150,.5)}.btn-secondary.disabled,.btn-secondary:disabled{background-color:#868e96;border-color:#868e96}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{background-color:#727b84;background-image:none;border-color:#6c757d}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 3px rgba(40,167,69,.5)}.btn-success.disabled,.btn-success:disabled{background-color:#28a745;border-color:#28a745}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{background-color:#218838;background-image:none;border-color:#1e7e34}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 3px rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{background-color:#17a2b8;border-color:#17a2b8}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{background-color:#138496;background-image:none;border-color:#117a8b}.btn-warning{color:#111;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#111;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 3px rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{background-color:#ffc107;border-color:#ffc107}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{background-color:#e0a800;background-image:none;border-color:#d39e00}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 3px rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{background-color:#dc3545;border-color:#dc3545}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{background-color:#c82333;background-image:none;border-color:#bd2130}.btn-light{color:#111;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#111;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 3px rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{background-color:#f8f9fa;border-color:#f8f9fa}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{background-color:#e2e6ea;background-image:none;border-color:#dae0e5}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 3px rgba(52,58,64,.5)}.btn-dark.disabled,.btn-dark:disabled{background-color:#343a40;border-color:#343a40}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{background-color:#23272b;background-image:none;border-color:#1d2124}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 3px rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary.active,.btn-outline-primary:active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-secondary{color:#868e96;background-color:transparent;background-image:none;border-color:#868e96}.btn-outline-secondary:hover{color:#fff;background-color:#868e96;border-color:#868e96}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 3px rgba(134,142,150,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#868e96;background-color:transparent}.btn-outline-secondary.active,.btn-outline-secondary:active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#868e96;border-color:#868e96}.btn-outline-success{color:#28a745;background-color:transparent;background-image:none;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 3px rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success.active,.btn-outline-success:active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-info{color:#17a2b8;background-color:transparent;background-image:none;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 3px rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info.active,.btn-outline-info:active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107}.btn-outline-warning:hover{color:#fff;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 3px rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning.active,.btn-outline-warning:active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#ffc107;border-color:#ffc107}.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 3px rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger.active,.btn-outline-danger:active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-light{color:#f8f9fa;background-color:transparent;background-image:none;border-color:#f8f9fa}.btn-outline-light:hover{color:#fff;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 3px rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light.active,.btn-outline-light:active,.show>.btn-outline-light.dropdown-toggle{color:#fff;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-dark{color:#343a40;background-color:transparent;background-image:none;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 3px rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark.active,.btn-outline-dark:active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-link{font-weight:400;color:#007bff;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link:disabled{background-color:transparent}.btn-link,.btn-link:active,.btn-link:focus{border-color:transparent;box-shadow:none}.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#0056b3;text-decoration:underline;background-color:transparent}.btn-link:disabled{color:#868e96}.btn-link:disabled:focus,.btn-link:disabled:hover{text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;transition:opacity .15s linear}.fade.show{opacity:1}.collapse{display:none}.collapse.show{display:block}tr.collapse.show{display:table-row}tbody.collapse.show{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}.dropdown,.dropup{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{border-top:0;border-bottom:.3em solid}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background:0 0;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#868e96;background-color:transparent}.show>a{outline:0}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#868e96;white-space:nowrap}.btn-group,.btn-group-vertical{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-ms-flex:0 1 auto;flex:0 1 auto;margin-bottom:0}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:2}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn+.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.btn+.dropdown-toggle-split::after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-ms-flexbox;display:flex;width:100%}.input-group .form-control{position:relative;z-index:2;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group .form-control:active,.input-group .form-control:focus,.input-group .form-control:hover{z-index:3}.input-group .form-control,.input-group-addon,.input-group-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{white-space:nowrap;vertical-align:middle}.input-group-addon{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.25;color:#495057;text-align:center;background-color:#e9ecef;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.input-group-addon.form-control-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-addon.form-control-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:not(:last-child),.input-group-addon:not(:last-child),.input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group>.btn,.input-group-btn:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:not(:last-child){border-right:0}.input-group .form-control:not(:first-child),.input-group-addon:not(:first-child),.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group>.btn,.input-group-btn:not(:first-child)>.dropdown-toggle,.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,.input-group-btn:not(:last-child)>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.form-control+.input-group-addon:not(:first-child){border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:3}.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group{margin-right:-1px}.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group{z-index:2;margin-left:-1px}.input-group-btn:not(:first-child)>.btn-group:active,.input-group-btn:not(:first-child)>.btn-group:focus,.input-group-btn:not(:first-child)>.btn-group:hover,.input-group-btn:not(:first-child)>.btn:active,.input-group-btn:not(:first-child)>.btn:focus,.input-group-btn:not(:first-child)>.btn:hover{z-index:3}.custom-control{position:relative;display:-ms-inline-flexbox;display:inline-flex;min-height:1.5rem;padding-left:1.5rem;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-indicator{color:#fff;background-color:#007bff}.custom-control-input:focus~.custom-control-indicator{box-shadow:0 0 0 1px #fff,0 0 0 3px #007bff}.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}.custom-control-input:disabled~.custom-control-indicator{background-color:#e9ecef}.custom-control-input:disabled~.custom-control-description{color:#868e96}.custom-control-indicator{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#ddd;background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-indicator{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-indicator{background-color:#007bff;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")}.custom-radio .custom-control-indicator{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")}.custom-controls-stacked{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.custom-controls-stacked .custom-control{margin-bottom:.25rem}.custom-controls-stacked .custom-control+.custom-control{margin-left:0}.custom-select{display:inline-block;max-width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.25;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;background-size:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select:disabled{color:#868e96;background-color:#e9ecef}.custom-select::-ms-expand{opacity:0}.custom-select-sm{height:calc(1.8125rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-file{position:relative;display:inline-block;max-width:100%;height:2.5rem;margin-bottom:0}.custom-file-input{min-width:14rem;max-width:100%;height:2.5rem;margin:0;opacity:0}.custom-file-control{position:absolute;top:0;right:0;left:0;z-index:5;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#495057;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.custom-file-control:lang(en):empty::after{content:"Choose file..."}.custom-file-control::before{position:absolute;top:-1px;right:-1px;bottom:-1px;z-index:6;display:block;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#495057;background-color:#e9ecef;border:1px solid rgba(0,0,0,.15);border-radius:0 .25rem .25rem 0}.custom-file-control:lang(en)::before{content:"Browse"}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#868e96}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #ddd}.nav-tabs .nav-link.disabled{color:#868e96;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#ddd #ddd #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.show>.nav-pills .nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background:0 0;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}@media (min-width:576px){.card-deck{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-ms-flexbox;display:flex;-ms-flex:1 0 0%;flex:1 0 0%;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-left:15px}}@media (min-width:576px){.card-group{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group .card{-ms-flex:1 0 0%;flex:1 0 0%}.card-group .card+.card{margin-left:0;border-left:0}.card-group .card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.card-group .card:first-child .card-img-top{border-top-right-radius:0}.card-group .card:first-child .card-img-bottom{border-bottom-right-radius:0}.card-group .card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.card-group .card:last-child .card-img-top{border-top-left-radius:0}.card-group .card:last-child .card-img-bottom{border-bottom-left-radius:0}.card-group .card:not(:first-child):not(:last-child){border-radius:0}.card-group .card:not(:first-child):not(:last-child) .card-img-bottom,.card-group .card:not(:first-child):not(:last-child) .card-img-top{border-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;column-count:3;-webkit-column-gap:1.25rem;column-gap:1.25rem}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb::after{display:block;clear:both;content:""}.breadcrumb-item{float:left}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#868e96;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#868e96}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#868e96;pointer-events:none;background-color:#fff;border-color:#ddd}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #ddd}.page-link:focus,.page-link:hover{color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#ddd}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.badge-secondary{color:#fff;background-color:#868e96}.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#6c757d}.badge-success{color:#fff;background-color:#28a745}.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}.badge-info{color:#fff;background-color:#17a2b8}.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}.badge-warning{color:#111;background-color:#ffc107}.badge-warning[href]:focus,.badge-warning[href]:hover{color:#111;text-decoration:none;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}.badge-light{color:#111;background-color:#f8f9fa}.badge-light[href]:focus,.badge-light[href]:hover{color:#111;text-decoration:none;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible .close{position:relative;top:-.75rem;right:-1.25rem;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#464a4e;background-color:#e7e8ea;border-color:#dddfe2}.alert-secondary hr{border-top-color:#cfd2d6}.alert-secondary .alert-link{color:#2e3133}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;overflow:hidden;font-size:.75rem;line-height:1rem;text-align:center;background-color:#e9ecef;border-radius:.25rem}.progress-bar{height:1rem;line-height:1rem;color:#fff;background-color:#007bff;transition:width .6s ease}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.media-body{-ms-flex:1;flex:1}.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item:focus,.list-group-item:hover{text-decoration:none}.list-group-item.disabled,.list-group-item:disabled{color:#868e96;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}a.list-group-item-primary,button.list-group-item-primary{color:#004085}a.list-group-item-primary:focus,a.list-group-item-primary:hover,button.list-group-item-primary:focus,button.list-group-item-primary:hover{color:#004085;background-color:#9fcdff}a.list-group-item-primary.active,button.list-group-item-primary.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#464a4e;background-color:#dddfe2}a.list-group-item-secondary,button.list-group-item-secondary{color:#464a4e}a.list-group-item-secondary:focus,a.list-group-item-secondary:hover,button.list-group-item-secondary:focus,button.list-group-item-secondary:hover{color:#464a4e;background-color:#cfd2d6}a.list-group-item-secondary.active,button.list-group-item-secondary.active{color:#fff;background-color:#464a4e;border-color:#464a4e}.list-group-item-success{color:#155724;background-color:#c3e6cb}a.list-group-item-success,button.list-group-item-success{color:#155724}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#155724;background-color:#b1dfbb}a.list-group-item-success.active,button.list-group-item-success.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}a.list-group-item-info,button.list-group-item-info{color:#0c5460}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#0c5460;background-color:#abdde5}a.list-group-item-info.active,button.list-group-item-info.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}a.list-group-item-warning,button.list-group-item-warning{color:#856404}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#856404;background-color:#ffe8a1}a.list-group-item-warning.active,button.list-group-item-warning.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}a.list-group-item-danger,button.list-group-item-danger{color:#721c24}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#721c24;background-color:#f1b0b7}a.list-group-item-danger.active,button.list-group-item-danger.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}a.list-group-item-light,button.list-group-item-light{color:#818182}a.list-group-item-light:focus,a.list-group-item-light:hover,button.list-group-item-light:focus,button.list-group-item-light:hover{color:#818182;background-color:#ececf6}a.list-group-item-light.active,button.list-group-item-light.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}a.list-group-item-dark,button.list-group-item-dark{color:#1b1e21}a.list-group-item-dark:focus,a.list-group-item-dark:hover,button.list-group-item-dark:focus,button.list-group-item-dark:hover{color:#1b1e21;background-color:#b9bbbe}a.list-group-item-dark.active,button.list-group-item-dark.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:focus,.close:hover{color:#000;text-decoration:none;opacity:.75}button.close{padding:0;background:0 0;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:15px;border-bottom:1px solid #e9ecef}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:15px;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:30px auto}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:5px;height:5px}.tooltip.bs-tooltip-auto[x-placement^=top],.tooltip.bs-tooltip-top{padding:5px 0}.tooltip.bs-tooltip-auto[x-placement^=top] .arrow,.tooltip.bs-tooltip-top .arrow{bottom:0}.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip.bs-tooltip-top .arrow::before{margin-left:-3px;content:"";border-width:5px 5px 0;border-top-color:#000}.tooltip.bs-tooltip-auto[x-placement^=right],.tooltip.bs-tooltip-right{padding:0 5px}.tooltip.bs-tooltip-auto[x-placement^=right] .arrow,.tooltip.bs-tooltip-right .arrow{left:0}.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,.tooltip.bs-tooltip-right .arrow::before{margin-top:-3px;content:"";border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.bs-tooltip-auto[x-placement^=bottom],.tooltip.bs-tooltip-bottom{padding:5px 0}.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow,.tooltip.bs-tooltip-bottom .arrow{top:0}.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.tooltip.bs-tooltip-bottom .arrow::before{margin-left:-3px;content:"";border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bs-tooltip-auto[x-placement^=left],.tooltip.bs-tooltip-left{padding:0 5px}.tooltip.bs-tooltip-auto[x-placement^=left] .arrow,.tooltip.bs-tooltip-left .arrow{right:0}.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,.tooltip.bs-tooltip-left .arrow::before{right:0;margin-top:-3px;content:"";border-width:5px 0 5px 5px;border-left-color:#000}.tooltip .arrow::before{position:absolute;border-color:transparent;border-style:solid}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;padding:1px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:10px;height:5px}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;border-color:transparent;border-style:solid}.popover .arrow::before{content:"";border-width:11px}.popover .arrow::after{content:"";border-width:11px}.popover.bs-popover-auto[x-placement^=top],.popover.bs-popover-top{margin-bottom:10px}.popover.bs-popover-auto[x-placement^=top] .arrow,.popover.bs-popover-top .arrow{bottom:0}.popover.bs-popover-auto[x-placement^=top] .arrow::after,.popover.bs-popover-auto[x-placement^=top] .arrow::before,.popover.bs-popover-top .arrow::after,.popover.bs-popover-top .arrow::before{border-bottom-width:0}.popover.bs-popover-auto[x-placement^=top] .arrow::before,.popover.bs-popover-top .arrow::before{bottom:-11px;margin-left:-6px;border-top-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=top] .arrow::after,.popover.bs-popover-top .arrow::after{bottom:-10px;margin-left:-6px;border-top-color:#fff}.popover.bs-popover-auto[x-placement^=right],.popover.bs-popover-right{margin-left:10px}.popover.bs-popover-auto[x-placement^=right] .arrow,.popover.bs-popover-right .arrow{left:0}.popover.bs-popover-auto[x-placement^=right] .arrow::after,.popover.bs-popover-auto[x-placement^=right] .arrow::before,.popover.bs-popover-right .arrow::after,.popover.bs-popover-right .arrow::before{margin-top:-8px;border-left-width:0}.popover.bs-popover-auto[x-placement^=right] .arrow::before,.popover.bs-popover-right .arrow::before{left:-11px;border-right-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=right] .arrow::after,.popover.bs-popover-right .arrow::after{left:-10px;border-right-color:#fff}.popover.bs-popover-auto[x-placement^=bottom],.popover.bs-popover-bottom{margin-top:10px}.popover.bs-popover-auto[x-placement^=bottom] .arrow,.popover.bs-popover-bottom .arrow{top:0}.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,.popover.bs-popover-bottom .arrow::after,.popover.bs-popover-bottom .arrow::before{margin-left:-7px;border-top-width:0}.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,.popover.bs-popover-bottom .arrow::before{top:-11px;border-bottom-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,.popover.bs-popover-bottom .arrow::after{top:-10px;border-bottom-color:#fff}.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,.popover.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:20px;margin-left:-10px;content:"";border-bottom:1px solid #f7f7f7}.popover.bs-popover-auto[x-placement^=left],.popover.bs-popover-left{margin-right:10px}.popover.bs-popover-auto[x-placement^=left] .arrow,.popover.bs-popover-left .arrow{right:0}.popover.bs-popover-auto[x-placement^=left] .arrow::after,.popover.bs-popover-auto[x-placement^=left] .arrow::before,.popover.bs-popover-left .arrow::after,.popover.bs-popover-left .arrow::before{margin-top:-8px;border-right-width:0}.popover.bs-popover-auto[x-placement^=left] .arrow::before,.popover.bs-popover-left .arrow::before{right:-11px;border-left-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=left] .arrow::after,.popover.bs-popover-left .arrow::after{right:-10px;border-left-color:#fff}.popover-header{padding:8px 14px;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:9px 14px;color:#212529}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;-ms-flex-align:center;align-items:center;width:100%;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translateX(100%);transform:translateX(100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:rgba(255,255,255,.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#868e96!important}a.bg-secondary:focus,a.bg-secondary:hover{background-color:#6c757d!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #e9ecef!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#868e96!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-circle{border-radius:50%}.rounded-0{border-radius:0}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.d-print-block{display:none!important}@media print{.d-print-block{display:block!important}}.d-print-inline{display:none!important}@media print{.d-print-inline{display:inline!important}}.d-print-inline-block{display:none!important}@media print{.d-print-inline-block{display:inline-block!important}}@media print{.d-print-none{display:none!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-sm-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-md-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-lg-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;-webkit-clip-path:none;clip-path:none}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-right:0!important;margin-left:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:1rem!important}.mt-3{margin-top:1rem!important}.mr-3{margin-right:1rem!important}.mb-3{margin-bottom:1rem!important}.ml-3{margin-left:1rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-4{margin:1.5rem!important}.mt-4{margin-top:1.5rem!important}.mr-4{margin-right:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.ml-4{margin-left:1.5rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-5{margin:3rem!important}.mt-5{margin-top:3rem!important}.mr-5{margin-right:3rem!important}.mb-5{margin-bottom:3rem!important}.ml-5{margin-left:3rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-right:0!important;padding-left:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:1rem!important}.pt-3{padding-top:1rem!important}.pr-3{padding-right:1rem!important}.pb-3{padding-bottom:1rem!important}.pl-3{padding-left:1rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-4{padding:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pr-4{padding-right:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.pl-4{padding-left:1.5rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-5{padding:3rem!important}.pt-5{padding-top:3rem!important}.pr-5{padding-right:3rem!important}.pb-5{padding-bottom:3rem!important}.pl-5{padding-left:3rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0{margin-top:0!important}.mr-sm-0{margin-right:0!important}.mb-sm-0{margin-bottom:0!important}.ml-sm-0{margin-left:0!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1{margin-top:.25rem!important}.mr-sm-1{margin-right:.25rem!important}.mb-sm-1{margin-bottom:.25rem!important}.ml-sm-1{margin-left:.25rem!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2{margin-top:.5rem!important}.mr-sm-2{margin-right:.5rem!important}.mb-sm-2{margin-bottom:.5rem!important}.ml-sm-2{margin-left:.5rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3{margin-top:1rem!important}.mr-sm-3{margin-right:1rem!important}.mb-sm-3{margin-bottom:1rem!important}.ml-sm-3{margin-left:1rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4{margin-top:1.5rem!important}.mr-sm-4{margin-right:1.5rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.ml-sm-4{margin-left:1.5rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5{margin-top:3rem!important}.mr-sm-5{margin-right:3rem!important}.mb-sm-5{margin-bottom:3rem!important}.ml-sm-5{margin-left:3rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0{padding-top:0!important}.pr-sm-0{padding-right:0!important}.pb-sm-0{padding-bottom:0!important}.pl-sm-0{padding-left:0!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1{padding-top:.25rem!important}.pr-sm-1{padding-right:.25rem!important}.pb-sm-1{padding-bottom:.25rem!important}.pl-sm-1{padding-left:.25rem!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2{padding-top:.5rem!important}.pr-sm-2{padding-right:.5rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pl-sm-2{padding-left:.5rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3{padding-top:1rem!important}.pr-sm-3{padding-right:1rem!important}.pb-sm-3{padding-bottom:1rem!important}.pl-sm-3{padding-left:1rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4{padding-top:1.5rem!important}.pr-sm-4{padding-right:1.5rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pl-sm-4{padding-left:1.5rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5{padding-top:3rem!important}.pr-sm-5{padding-right:3rem!important}.pb-sm-5{padding-bottom:3rem!important}.pl-sm-5{padding-left:3rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-auto{margin-left:auto!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0{margin-top:0!important}.mr-md-0{margin-right:0!important}.mb-md-0{margin-bottom:0!important}.ml-md-0{margin-left:0!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.m-md-1{margin:.25rem!important}.mt-md-1{margin-top:.25rem!important}.mr-md-1{margin-right:.25rem!important}.mb-md-1{margin-bottom:.25rem!important}.ml-md-1{margin-left:.25rem!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2{margin-top:.5rem!important}.mr-md-2{margin-right:.5rem!important}.mb-md-2{margin-bottom:.5rem!important}.ml-md-2{margin-left:.5rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3{margin-top:1rem!important}.mr-md-3{margin-right:1rem!important}.mb-md-3{margin-bottom:1rem!important}.ml-md-3{margin-left:1rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4{margin-top:1.5rem!important}.mr-md-4{margin-right:1.5rem!important}.mb-md-4{margin-bottom:1.5rem!important}.ml-md-4{margin-left:1.5rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5{margin-top:3rem!important}.mr-md-5{margin-right:3rem!important}.mb-md-5{margin-bottom:3rem!important}.ml-md-5{margin-left:3rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-md-0{padding:0!important}.pt-md-0{padding-top:0!important}.pr-md-0{padding-right:0!important}.pb-md-0{padding-bottom:0!important}.pl-md-0{padding-left:0!important}.px-md-0{padding-right:0!important;padding-left:0!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.p-md-1{padding:.25rem!important}.pt-md-1{padding-top:.25rem!important}.pr-md-1{padding-right:.25rem!important}.pb-md-1{padding-bottom:.25rem!important}.pl-md-1{padding-left:.25rem!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2{padding-top:.5rem!important}.pr-md-2{padding-right:.5rem!important}.pb-md-2{padding-bottom:.5rem!important}.pl-md-2{padding-left:.5rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3{padding-top:1rem!important}.pr-md-3{padding-right:1rem!important}.pb-md-3{padding-bottom:1rem!important}.pl-md-3{padding-left:1rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4{padding-top:1.5rem!important}.pr-md-4{padding-right:1.5rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pl-md-4{padding-left:1.5rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5{padding-top:3rem!important}.pr-md-5{padding-right:3rem!important}.pb-md-5{padding-bottom:3rem!important}.pl-md-5{padding-left:3rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto{margin-top:auto!important}.mr-md-auto{margin-right:auto!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-auto{margin-left:auto!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0{margin-top:0!important}.mr-lg-0{margin-right:0!important}.mb-lg-0{margin-bottom:0!important}.ml-lg-0{margin-left:0!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1{margin-top:.25rem!important}.mr-lg-1{margin-right:.25rem!important}.mb-lg-1{margin-bottom:.25rem!important}.ml-lg-1{margin-left:.25rem!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2{margin-top:.5rem!important}.mr-lg-2{margin-right:.5rem!important}.mb-lg-2{margin-bottom:.5rem!important}.ml-lg-2{margin-left:.5rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3{margin-top:1rem!important}.mr-lg-3{margin-right:1rem!important}.mb-lg-3{margin-bottom:1rem!important}.ml-lg-3{margin-left:1rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4{margin-top:1.5rem!important}.mr-lg-4{margin-right:1.5rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.ml-lg-4{margin-left:1.5rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5{margin-top:3rem!important}.mr-lg-5{margin-right:3rem!important}.mb-lg-5{margin-bottom:3rem!important}.ml-lg-5{margin-left:3rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0{padding-top:0!important}.pr-lg-0{padding-right:0!important}.pb-lg-0{padding-bottom:0!important}.pl-lg-0{padding-left:0!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1{padding-top:.25rem!important}.pr-lg-1{padding-right:.25rem!important}.pb-lg-1{padding-bottom:.25rem!important}.pl-lg-1{padding-left:.25rem!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2{padding-top:.5rem!important}.pr-lg-2{padding-right:.5rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pl-lg-2{padding-left:.5rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3{padding-top:1rem!important}.pr-lg-3{padding-right:1rem!important}.pb-lg-3{padding-bottom:1rem!important}.pl-lg-3{padding-left:1rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4{padding-top:1.5rem!important}.pr-lg-4{padding-right:1.5rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pl-lg-4{padding-left:1.5rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5{padding-top:3rem!important}.pr-lg-5{padding-right:3rem!important}.pb-lg-5{padding-bottom:3rem!important}.pl-lg-5{padding-left:3rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-auto{margin-left:auto!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0{margin-top:0!important}.mr-xl-0{margin-right:0!important}.mb-xl-0{margin-bottom:0!important}.ml-xl-0{margin-left:0!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1{margin-top:.25rem!important}.mr-xl-1{margin-right:.25rem!important}.mb-xl-1{margin-bottom:.25rem!important}.ml-xl-1{margin-left:.25rem!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2{margin-top:.5rem!important}.mr-xl-2{margin-right:.5rem!important}.mb-xl-2{margin-bottom:.5rem!important}.ml-xl-2{margin-left:.5rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3{margin-top:1rem!important}.mr-xl-3{margin-right:1rem!important}.mb-xl-3{margin-bottom:1rem!important}.ml-xl-3{margin-left:1rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4{margin-top:1.5rem!important}.mr-xl-4{margin-right:1.5rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.ml-xl-4{margin-left:1.5rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5{margin-top:3rem!important}.mr-xl-5{margin-right:3rem!important}.mb-xl-5{margin-bottom:3rem!important}.ml-xl-5{margin-left:3rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0{padding-top:0!important}.pr-xl-0{padding-right:0!important}.pb-xl-0{padding-bottom:0!important}.pl-xl-0{padding-left:0!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1{padding-top:.25rem!important}.pr-xl-1{padding-right:.25rem!important}.pb-xl-1{padding-bottom:.25rem!important}.pl-xl-1{padding-left:.25rem!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2{padding-top:.5rem!important}.pr-xl-2{padding-right:.5rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pl-xl-2{padding-left:.5rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3{padding-top:1rem!important}.pr-xl-3{padding-right:1rem!important}.pb-xl-3{padding-bottom:1rem!important}.pl-xl-3{padding-left:1rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4{padding-top:1.5rem!important}.pr-xl-4{padding-right:1.5rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pl-xl-4{padding-left:1.5rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5{padding-top:3rem!important}.pr-xl-5{padding-right:3rem!important}.pb-xl-5{padding-bottom:3rem!important}.pl-xl-5{padding-left:3rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-auto{margin-left:auto!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:700}.font-italic{font-style:italic}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-secondary{color:#868e96!important}a.text-secondary:focus,a.text-secondary:hover{color:#6c757d!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#1e7e34!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#117a8b!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#d39e00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#dae0e5!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#1d2124!important}.text-muted{color:#868e96!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.visible{visibility:visible!important}.invisible{visibility:hidden!important}
+/*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/src/assets/image/break.png b/src/assets/image/break.png
new file mode 100644
index 0000000..439839b
Binary files /dev/null and b/src/assets/image/break.png differ
diff --git a/src/assets/image/building.jpeg b/src/assets/image/building.jpeg
new file mode 100644
index 0000000..a518f36
Binary files /dev/null and b/src/assets/image/building.jpeg differ
diff --git a/src/assets/image/bullet_blue.png b/src/assets/image/bullet_blue.png
new file mode 100644
index 0000000..9e4e7ca
Binary files /dev/null and b/src/assets/image/bullet_blue.png differ
diff --git a/src/assets/image/bus-top.png b/src/assets/image/bus-top.png
new file mode 100644
index 0000000..a8cda9e
Binary files /dev/null and b/src/assets/image/bus-top.png differ
diff --git a/src/assets/image/bus_blue.png b/src/assets/image/bus_blue.png
new file mode 100644
index 0000000..ee548cf
Binary files /dev/null and b/src/assets/image/bus_blue.png differ
diff --git a/src/assets/image/bus_green.png b/src/assets/image/bus_green.png
new file mode 100644
index 0000000..5ed195f
Binary files /dev/null and b/src/assets/image/bus_green.png differ
diff --git a/src/assets/image/bus_out.png b/src/assets/image/bus_out.png
new file mode 100644
index 0000000..75a3fb3
Binary files /dev/null and b/src/assets/image/bus_out.png differ
diff --git a/src/assets/image/bus_red.png b/src/assets/image/bus_red.png
new file mode 100644
index 0000000..704bcbe
Binary files /dev/null and b/src/assets/image/bus_red.png differ
diff --git a/src/assets/image/bus_running.png b/src/assets/image/bus_running.png
new file mode 100644
index 0000000..78231c3
Binary files /dev/null and b/src/assets/image/bus_running.png differ
diff --git a/src/assets/image/bus_stop.png b/src/assets/image/bus_stop.png
new file mode 100644
index 0000000..cde3411
Binary files /dev/null and b/src/assets/image/bus_stop.png differ
diff --git a/src/assets/image/bus_yellow.png b/src/assets/image/bus_yellow.png
new file mode 100644
index 0000000..0d96e33
Binary files /dev/null and b/src/assets/image/bus_yellow.png differ
diff --git a/src/assets/image/business_0.jpg b/src/assets/image/business_0.jpg
new file mode 100644
index 0000000..cbf8abc
Binary files /dev/null and b/src/assets/image/business_0.jpg differ
diff --git a/src/assets/image/bustop.svg b/src/assets/image/bustop.svg
new file mode 100644
index 0000000..8ca77b2
--- /dev/null
+++ b/src/assets/image/bustop.svg
@@ -0,0 +1 @@
+<svg id="svg" version="1.1" width="200" height="400" viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g id="svgg"><path id="path0" d="M339.814 53.977 C 339.670 54.210,339.715 54.400,339.912 54.400 C 340.819 54.400,341.340 57.549,340.803 59.786 C 340.187 62.357,341.050 63.562,343.526 63.587 C 344.256 63.594,345.181 63.776,345.582 63.990 C 347.868 65.214,347.403 60.914,345.016 58.762 C 344.360 58.171,343.557 56.826,343.216 55.747 C 342.594 53.781,340.582 52.735,339.814 53.977 M57.434 55.533 C 57.105 56.171,56.137 57.463,55.285 58.405 C 51.228 62.887,51.812 68.474,56.182 66.988 L 58.400 66.234 58.406 63.817 C 58.409 62.488,58.683 60.622,59.014 59.672 C 60.033 56.745,58.664 53.156,57.434 55.533 M349.393 113.623 C 349.082 114.602,349.535 118.313,350.000 118.600 C 350.352 118.818,350.736 114.648,350.469 113.500 C 350.250 112.555,349.712 112.616,349.393 113.623 M49.826 117.558 C 49.669 117.812,49.671 118.600,49.830 119.310 L 50.120 120.600 50.488 119.515 C 50.891 118.328,50.346 116.717,49.826 117.558 M349.830 209.467 C 349.689 209.834,349.760 210.320,349.987 210.547 C 350.271 210.831,350.400 210.623,350.400 209.880 C 350.400 208.646,350.200 208.501,349.830 209.467 M349.999 352.400 C 349.921 352.510,349.755 359.710,349.629 368.400 C 349.451 380.669,349.278 384.414,348.855 385.158 C 347.875 386.880,347.963 442.703,348.949 445.600 C 350.153 449.135,350.269 448.814,350.509 441.321 C 351.028 425.032,350.607 351.539,349.999 352.400 M50.150 361.800 C 50.151 364.220,50.216 365.158,50.296 363.885 C 50.376 362.612,50.375 360.632,50.294 359.485 C 50.214 358.338,50.149 359.380,50.150 361.800 M49.788 370.200 C 49.319 375.034,49.338 431.785,49.813 441.400 L 50.148 448.200 50.694 445.200 C 50.994 443.550,51.409 439.140,51.616 435.400 C 52.075 427.107,52.568 421.569,53.201 417.600 C 54.075 412.120,53.587 390.873,52.554 389.393 C 51.276 387.562,50.804 384.923,50.753 379.323 C 50.727 376.505,50.587 372.400,50.442 370.200 L 50.177 366.200 49.788 370.200 M121.723 389.916 C 120.840 390.477,120.130 393.984,120.811 394.415 C 122.120 395.243,122.400 394.854,122.400 392.200 C 122.400 390.770,122.355 389.603,122.300 389.606 C 122.245 389.609,121.985 389.749,121.723 389.916 M278.000 390.237 C 278.000 390.856,279.023 391.011,279.372 390.445 C 279.492 390.250,279.233 389.997,278.796 389.883 C 278.280 389.748,278.000 389.873,278.000 390.237 M281.478 577.856 C 281.158 578.175,281.519 578.800,282.024 578.800 C 282.231 578.800,282.400 578.530,282.400 578.200 C 282.400 577.581,281.928 577.405,281.478 577.856 M49.790 589.615 C 49.407 590.235,50.086 590.842,50.722 590.448 C 51.135 590.193,51.121 590.033,50.655 589.645 C 50.224 589.288,49.998 589.280,49.790 589.615 M177.647 713.512 C 177.032 714.662,177.983 715.962,178.653 714.887 C 178.998 714.334,178.982 713.990,178.585 713.447 C 178.088 712.768,178.044 712.771,177.647 713.512 M225.500 713.539 C 225.394 713.946,225.527 714.690,225.796 715.193 L 226.286 716.108 226.458 715.154 C 226.799 713.268,225.947 711.831,225.500 713.539 M349.298 740.864 C 348.817 742.139,349.315 745.600,349.980 745.600 C 351.045 745.600,351.627 742.146,350.817 740.632 C 350.103 739.297,349.877 739.331,349.298 740.864 M49.829 744.283 C 49.540 745.942,49.790 747.600,50.331 747.600 C 50.994 747.600,51.646 745.937,51.195 745.394 C 50.947 745.096,50.605 744.345,50.434 743.726 C 50.132 742.633,50.114 742.650,49.829 744.283 M176.529 762.865 L 174.929 766.200 176.164 766.537 C 176.844 766.723,178.708 766.752,180.307 766.603 L 183.215 766.330 181.907 765.449 C 181.104 764.908,180.124 763.598,179.365 762.050 L 178.130 759.531 176.529 762.865 M225.144 762.011 C 224.625 763.369,223.819 764.895,223.353 765.404 L 222.505 766.328 224.353 766.482 C 227.690 766.760,228.000 766.578,228.000 764.332 C 228.000 762.909,227.733 761.964,227.044 760.950 L 226.087 759.543 225.144 762.011 M193.100 766.282 C 193.595 766.378,194.405 766.378,194.900 766.282 C 195.395 766.187,194.990 766.109,194.000 766.109 C 193.010 766.109,192.605 766.187,193.100 766.282 " stroke="none" fill="#8f8f8f" fill-rule="evenodd"></path><path id="path1" d="M336.532 48.957 C 335.555 49.797,335.476 50.030,335.882 50.857 C 336.136 51.376,336.547 52.463,336.794 53.273 C 337.042 54.083,337.777 55.416,338.428 56.236 C 339.635 57.754,339.668 58.077,338.975 61.478 C 338.753 62.566,340.813 64.265,342.833 64.661 C 343.585 64.808,344.596 65.184,345.080 65.497 C 346.291 66.279,347.449 65.808,347.967 64.324 C 348.612 62.471,348.532 62.067,346.871 58.800 C 344.622 54.375,344.332 53.925,342.800 52.477 C 342.030 51.750,340.674 50.445,339.788 49.577 C 337.889 47.719,337.956 47.732,336.532 48.957 M57.098 52.436 C 55.211 54.502,53.660 57.333,52.624 60.600 C 51.997 62.580,51.330 64.613,51.142 65.119 C 49.566 69.356,52.402 70.202,58.663 67.363 C 61.395 66.124,61.503 66.045,60.980 65.678 C 59.636 64.735,59.286 61.952,60.264 59.992 C 61.062 58.393,62.008 54.087,61.724 53.347 C 61.147 51.841,58.175 51.256,57.098 52.436 M343.216 55.747 C 343.557 56.826,344.360 58.171,345.016 58.762 C 347.403 60.914,347.868 65.214,345.582 63.990 C 345.181 63.776,344.256 63.594,343.526 63.587 C 341.050 63.562,340.187 62.357,340.803 59.786 C 341.340 57.549,340.819 54.400,339.912 54.400 C 339.715 54.400,339.670 54.210,339.814 53.977 C 340.582 52.735,342.594 53.781,343.216 55.747 M59.197 56.389 C 59.522 57.596,59.481 58.330,59.014 59.672 C 58.683 60.622,58.409 62.488,58.406 63.817 L 58.400 66.234 56.182 66.988 C 51.812 68.474,51.228 62.887,55.285 58.405 C 56.137 57.463,57.105 56.171,57.434 55.533 C 58.167 54.116,58.648 54.349,59.197 56.389 M333.400 62.000 C 333.254 62.236,333.695 62.397,334.476 62.394 C 335.478 62.389,335.654 62.293,335.200 62.000 C 334.422 61.497,333.711 61.497,333.400 62.000 M49.840 71.300 C 49.703 72.235,49.602 81.280,49.617 91.400 C 49.646 112.168,49.543 113.122,46.920 116.323 C 45.493 118.065,45.481 118.109,46.157 119.146 C 47.353 120.983,48.055 122.863,48.404 125.166 C 48.809 127.844,48.996 171.046,48.691 191.740 L 48.475 206.480 47.373 207.340 C 46.768 207.813,45.819 208.578,45.266 209.040 L 44.260 209.879 45.157 211.140 C 45.651 211.833,46.216 212.400,46.413 212.400 C 47.125 212.400,49.600 214.900,49.600 215.618 C 49.600 216.022,49.780 216.464,50.000 216.600 C 50.220 216.736,50.400 216.459,50.400 215.985 C 50.400 214.584,51.554 213.036,53.680 211.585 C 55.563 210.300,55.662 210.146,55.453 208.812 C 54.423 202.244,54.880 176.350,56.051 174.938 C 56.398 174.520,56.440 171.045,56.216 161.289 C 55.555 132.573,55.928 123.123,57.840 120.121 C 59.316 117.802,59.382 117.901,56.000 117.383 C 50.439 116.531,50.600 117.317,50.600 91.100 C 50.600 70.963,50.453 67.139,49.840 71.300 M349.844 72.881 C 349.706 73.607,349.479 82.458,349.339 92.551 L 349.086 110.902 347.902 112.251 C 346.740 113.574,346.655 113.600,343.459 113.606 C 340.015 113.613,338.364 114.081,339.977 114.593 C 342.262 115.318,342.446 116.942,342.318 135.174 C 342.221 148.788,342.306 152.199,342.786 154.000 C 343.533 156.803,343.654 171.564,342.938 172.437 C 341.815 173.804,341.564 177.942,341.682 193.167 L 341.800 208.534 344.000 209.136 C 346.073 209.704,346.659 210.126,348.593 212.448 C 349.537 213.582,350.069 239.974,349.212 243.157 C 348.473 245.900,346.502 247.600,344.060 247.600 C 341.262 247.600,340.621 250.321,342.775 253.059 C 343.846 254.420,343.782 312.736,342.708 315.200 C 342.139 316.505,341.429 339.166,341.893 341.240 C 342.007 341.754,342.426 341.842,344.029 341.688 C 346.365 341.463,347.120 341.966,348.337 344.556 C 349.344 346.699,349.004 381.308,347.957 383.212 C 346.829 385.263,346.392 385.505,344.824 384.944 C 341.784 383.857,339.740 384.963,340.836 387.102 C 341.287 387.983,341.438 391.959,341.599 407.200 C 341.780 424.306,341.870 426.328,342.500 427.480 C 343.106 428.589,343.200 429.931,343.200 437.496 C 343.200 443.569,343.367 446.898,343.749 448.416 C 344.315 450.672,344.024 474.842,343.402 477.232 C 343.105 478.370,344.029 479.235,346.081 479.740 C 347.807 480.165,349.350 481.767,349.857 483.662 C 350.287 485.272,350.324 485.308,350.361 484.149 C 350.382 483.461,350.670 482.251,351.000 481.462 C 351.501 480.264,351.600 477.276,351.600 463.420 C 351.600 454.221,351.804 444.537,352.057 441.708 C 352.396 437.916,352.399 435.363,352.067 431.800 C 351.767 428.577,351.551 402.956,351.410 353.800 C 351.294 313.540,351.091 265.750,350.958 247.600 C 350.741 218.086,350.784 214.340,351.358 212.142 C 352.167 209.045,352.165 207.507,351.349 204.332 C 350.764 202.057,350.730 199.280,351.018 177.000 C 351.194 163.360,351.303 145.450,351.259 137.200 C 351.196 125.225,351.296 121.756,351.756 120.000 C 352.653 116.575,352.660 114.345,351.776 112.565 C 351.049 111.100,350.987 109.762,350.792 91.526 C 350.595 73.076,350.430 69.817,349.844 72.881 M350.469 113.500 C 350.736 114.648,350.352 118.818,350.000 118.600 C 349.535 118.313,349.082 114.602,349.393 113.623 C 349.712 112.616,350.250 112.555,350.469 113.500 M330.012 117.500 C 330.019 117.885,329.932 125.130,329.818 133.600 C 329.705 142.070,329.763 150.530,329.948 152.400 C 330.178 154.721,330.303 149.610,330.343 136.300 C 330.374 125.575,330.310 116.800,330.200 116.800 C 330.090 116.800,330.005 117.115,330.012 117.500 M50.488 119.515 L 50.120 120.600 49.830 119.310 C 49.486 117.775,49.918 116.752,50.484 117.764 C 50.712 118.172,50.714 118.850,50.488 119.515 M65.794 118.010 C 65.462 118.548,66.334 118.876,67.042 118.480 C 67.608 118.164,67.582 118.089,66.846 117.896 C 66.381 117.775,65.908 117.826,65.794 118.010 M361.843 122.633 C 361.476 123.590,361.597 150.764,361.977 152.600 C 362.175 153.558,362.326 147.743,362.354 138.100 C 362.379 129.245,362.329 122.000,362.243 122.000 C 362.156 122.000,361.976 122.285,361.843 122.633 M37.943 125.800 C 37.689 126.987,37.720 147.032,38.005 166.000 L 38.153 175.800 38.376 164.000 C 38.631 150.553,38.330 123.993,37.943 125.800 M329.860 180.461 C 329.454 186.176,329.560 206.120,330.000 206.800 C 330.254 207.193,330.390 202.126,330.394 192.100 C 330.400 176.290,330.304 174.200,329.860 180.461 M350.400 209.880 C 350.400 210.623,350.271 210.831,349.987 210.547 C 349.760 210.320,349.689 209.834,349.830 209.467 C 350.200 208.501,350.400 208.646,350.400 209.880 M49.656 247.200 C 49.197 249.570,48.758 336.633,49.151 347.400 C 49.215 349.160,49.056 356.810,48.798 364.400 C 48.289 379.341,48.403 410.503,49.157 462.800 C 49.643 496.478,49.683 495.604,47.589 497.208 L 46.448 498.083 47.359 498.941 C 49.609 501.061,49.478 498.194,49.437 544.400 L 49.400 587.000 48.294 588.600 C 47.399 589.896,47.291 590.276,47.729 590.600 C 49.765 592.107,50.399 596.478,50.400 609.020 C 50.400 620.755,50.309 620.409,53.380 620.383 C 58.813 620.336,60.259 619.364,59.251 616.436 C 58.638 614.652,58.213 528.961,58.806 526.643 C 59.025 525.789,58.205 525.425,55.140 525.013 C 51.205 524.484,50.786 523.307,50.511 512.005 C 50.326 504.416,50.396 502.596,50.955 500.433 C 51.509 498.287,51.536 497.631,51.118 496.433 C 50.826 495.595,50.615 492.952,50.610 490.067 L 50.600 485.134 51.906 483.967 C 53.051 482.944,53.521 482.799,55.706 482.794 C 58.838 482.786,59.367 482.492,58.824 481.063 C 58.424 480.011,58.375 469.969,58.595 433.749 C 58.648 424.921,58.793 417.535,58.917 417.334 C 59.041 417.134,59.184 410.648,59.235 402.921 C 59.334 388.128,59.217 387.087,57.558 388.016 C 53.256 390.423,51.783 387.092,51.446 374.200 C 50.669 344.444,50.354 346.184,56.482 346.363 C 58.982 346.436,59.875 346.065,58.800 345.400 C 58.580 345.264,58.400 344.813,58.400 344.398 C 58.400 343.982,57.915 342.778,57.323 341.721 L 56.246 339.800 55.983 325.800 C 55.838 318.100,55.866 306.940,56.045 301.000 C 56.224 295.060,56.379 285.610,56.389 280.000 C 56.399 274.390,56.590 266.330,56.812 262.089 C 57.270 253.364,57.030 252.235,54.556 251.449 C 52.709 250.863,50.750 248.511,50.449 246.518 L 50.159 244.600 49.656 247.200 M329.874 249.900 C 329.778 250.065,329.845 250.560,330.022 251.000 C 330.303 251.698,330.347 251.660,330.372 250.700 C 330.400 249.615,330.212 249.314,329.874 249.900 M329.899 323.964 C 329.509 333.575,329.529 338.469,329.963 339.153 C 330.644 340.230,330.762 337.454,330.479 327.000 L 330.198 316.600 329.899 323.964 M117.842 354.600 C 117.368 367.177,117.442 450.458,117.930 453.690 C 118.462 457.209,122.400 461.942,122.400 459.061 C 122.400 458.202,123.017 456.562,124.063 454.646 C 124.289 454.232,124.322 453.782,124.137 453.646 C 122.487 452.440,122.419 451.390,122.413 427.234 C 122.410 411.072,122.274 403.760,121.963 403.079 C 121.638 402.365,121.637 401.879,121.959 401.277 C 122.201 400.824,122.400 399.820,122.400 399.047 C 122.400 398.275,122.862 396.778,123.426 395.721 C 124.651 393.429,124.525 391.450,122.936 388.053 C 122.254 386.593,121.806 384.673,121.537 382.053 C 121.319 379.934,120.985 377.570,120.795 376.800 C 119.937 373.336,119.617 370.042,119.395 362.400 C 119.264 357.890,118.932 352.400,118.658 350.200 L 118.159 346.200 117.842 354.600 M281.876 353.800 C 281.538 355.466,281.006 363.749,280.423 376.400 C 280.047 384.557,279.838 385.845,278.797 386.402 C 275.863 387.972,275.790 394.192,278.668 397.252 L 279.657 398.304 279.529 411.652 C 279.451 419.735,279.624 429.186,279.967 435.613 C 280.540 446.320,280.263 449.600,278.787 449.600 C 278.555 449.600,278.050 451.007,277.404 453.447 C 277.238 454.075,277.468 454.480,278.290 455.010 C 278.900 455.404,279.895 456.236,280.500 456.859 L 281.600 457.993 281.600 467.933 C 281.600 488.634,282.164 492.136,282.512 473.600 C 283.116 441.471,282.631 350.074,281.876 353.800 M350.750 407.400 C 350.735 435.318,350.486 448.667,349.990 448.121 C 349.830 447.944,349.361 446.810,348.949 445.600 C 347.963 442.703,347.875 386.880,348.855 385.158 C 349.278 384.414,349.451 380.669,349.629 368.400 C 349.755 359.710,349.921 352.510,349.999 352.400 C 350.340 351.917,350.762 382.846,350.750 407.400 M50.296 363.885 C 50.216 365.158,50.151 364.220,50.150 361.800 C 50.149 359.380,50.214 358.338,50.294 359.485 C 50.375 360.632,50.376 362.612,50.296 363.885 M50.753 379.323 C 50.804 384.923,51.276 387.562,52.554 389.393 C 53.587 390.873,54.075 412.120,53.201 417.600 C 52.568 421.569,52.075 427.107,51.616 435.400 C 51.409 439.140,50.994 443.550,50.694 445.200 L 50.148 448.200 49.813 441.400 C 49.338 431.785,49.319 375.034,49.788 370.200 L 50.177 366.200 50.442 370.200 C 50.587 372.400,50.727 376.505,50.753 379.323 M329.850 387.250 C 329.503 388.984,329.540 421.563,329.893 425.000 L 330.180 427.800 330.451 425.600 C 330.599 424.390,330.747 415.750,330.778 406.400 C 330.809 397.050,330.983 388.635,331.164 387.700 C 331.449 386.225,331.400 386.000,330.796 386.000 C 330.336 386.000,330.015 386.424,329.850 387.250 M68.639 389.241 C 67.932 389.797,67.693 390.237,67.933 390.541 C 68.714 391.529,68.901 394.625,68.832 405.400 C 68.792 411.560,68.955 418.760,69.193 421.400 C 69.454 424.298,69.623 437.334,69.620 454.300 C 69.617 472.418,69.754 482.400,70.007 482.400 C 70.256 482.400,70.414 477.022,70.439 467.700 C 70.461 459.615,70.572 446.610,70.686 438.800 C 71.469 385.072,71.546 386.954,68.639 389.241 M122.400 392.200 C 122.400 394.854,122.120 395.243,120.811 394.415 C 119.873 393.822,121.156 389.676,122.300 389.606 C 122.355 389.603,122.400 390.770,122.400 392.200 M279.372 390.445 C 279.023 391.011,278.000 390.856,278.000 390.237 C 278.000 389.873,278.280 389.748,278.796 389.883 C 279.233 389.997,279.492 390.250,279.372 390.445 M349.791 492.052 C 349.519 493.665,350.027 500.392,350.316 499.000 C 350.573 497.766,351.585 496.839,352.958 496.582 C 355.362 496.131,355.640 492.800,353.273 492.800 C 352.759 492.800,351.824 492.285,351.195 491.656 L 350.051 490.513 349.791 492.052 M361.915 523.900 C 361.799 536.165,361.837 547.100,361.999 548.200 C 362.161 549.300,362.317 539.265,362.347 525.900 C 362.376 512.535,362.338 501.600,362.262 501.600 C 362.187 501.600,362.030 511.635,361.915 523.900 M281.854 508.290 C 281.568 510.123,281.348 510.486,280.064 511.246 C 279.259 511.722,277.922 512.564,277.092 513.116 L 275.585 514.119 276.802 514.860 C 277.472 515.267,278.214 515.600,278.452 515.600 C 278.689 515.600,279.657 516.122,280.601 516.759 L 282.319 517.918 282.819 516.133 C 283.209 514.740,283.216 513.760,282.854 511.674 C 282.598 510.203,282.342 508.370,282.284 507.600 C 282.192 506.353,282.144 506.429,281.854 508.290 M120.800 511.482 C 118.279 512.404,117.748 514.747,119.672 516.464 C 121.351 517.963,121.685 517.912,123.694 515.848 L 125.400 514.096 123.732 512.648 C 122.031 511.171,121.849 511.099,120.800 511.482 M211.000 513.967 C 209.822 514.153,210.657 514.293,214.169 514.499 C 219.376 514.804,225.728 514.459,224.000 513.965 C 222.778 513.616,213.211 513.617,211.000 513.967 M350.034 517.040 C 349.919 519.905,348.200 521.428,344.604 521.851 L 342.473 522.102 343.537 523.016 L 344.600 523.931 344.714 534.466 C 344.777 540.260,344.926 553.460,345.045 563.800 C 345.542 606.822,345.501 610.801,344.542 612.688 L 343.684 614.375 344.662 615.353 C 345.308 615.999,346.310 616.423,347.619 616.603 C 348.708 616.752,349.701 617.039,349.825 617.241 C 349.949 617.442,350.349 617.308,350.714 616.943 C 352.298 615.359,352.400 614.591,352.400 604.267 C 352.400 594.329,352.409 594.217,353.309 593.413 C 355.951 591.050,356.317 586.411,354.039 584.133 L 352.384 582.478 352.000 577.139 C 351.788 574.203,351.528 560.370,351.422 546.400 C 351.268 526.064,351.114 520.521,350.648 518.600 C 350.329 517.280,350.052 516.578,350.034 517.040 M69.873 556.849 C 69.923 573.816,70.063 587.796,70.182 587.916 C 70.302 588.035,70.400 574.153,70.400 557.067 C 70.400 539.980,70.261 526.000,70.091 526.000 C 69.921 526.000,69.823 539.882,69.873 556.849 M281.900 543.163 C 281.735 545.892,281.600 553.997,281.600 561.174 C 281.600 575.903,281.741 575.200,278.421 577.066 L 276.463 578.167 277.670 578.901 C 280.116 580.388,281.118 581.930,281.611 584.961 C 282.292 589.151,282.303 589.181,282.354 586.879 C 282.379 585.712,282.691 583.477,283.048 581.911 C 283.711 578.993,283.603 575.568,282.818 574.622 C 282.555 574.305,282.371 567.680,282.304 556.164 C 282.228 543.085,282.118 539.550,281.900 543.163 M38.144 544.400 C 38.144 546.490,38.212 547.345,38.294 546.300 C 38.376 545.255,38.376 543.545,38.294 542.500 C 38.212 541.455,38.144 542.310,38.144 544.400 M120.620 575.738 C 118.849 578.060,119.200 582.772,121.317 585.097 L 122.134 585.994 122.867 583.912 C 123.784 581.309,123.803 578.754,122.923 576.300 C 122.113 574.040,121.947 573.999,120.620 575.738 M282.400 578.200 C 282.400 578.530,282.231 578.800,282.024 578.800 C 281.519 578.800,281.158 578.175,281.478 577.856 C 281.928 577.405,282.400 577.581,282.400 578.200 M334.089 598.827 C 334.040 604.671,333.809 610.486,333.576 611.747 C 333.259 613.460,333.275 614.415,333.638 615.515 L 334.124 616.987 334.657 615.447 C 334.950 614.601,335.057 613.703,334.895 613.454 C 334.733 613.204,334.505 607.420,334.389 600.600 L 334.178 588.200 334.089 598.827 M50.722 590.448 C 50.086 590.842,49.407 590.235,49.790 589.615 C 49.998 589.280,50.224 589.288,50.655 589.645 C 51.121 590.033,51.135 590.193,50.722 590.448 M69.722 616.602 C 69.289 618.496,69.492 618.970,70.564 618.559 C 71.327 618.266,71.330 618.207,70.663 616.293 L 70.138 614.785 69.722 616.602 M49.866 632.400 C 49.698 635.150,49.489 661.070,49.403 690.000 C 49.312 720.467,49.088 743.326,48.872 744.326 C 47.998 748.360,50.049 751.495,53.600 751.556 C 54.770 751.576,56.776 750.084,56.133 749.672 C 55.899 749.522,55.576 748.950,55.415 748.400 C 55.254 747.850,54.410 746.182,53.539 744.693 C 50.808 740.023,50.372 726.443,52.860 723.532 C 54.435 721.689,54.479 718.753,52.958 717.000 C 51.518 715.341,51.199 714.337,51.203 711.474 C 51.215 703.324,51.744 702.810,60.168 702.776 C 67.779 702.745,67.945 702.664,66.664 699.618 L 66.129 698.344 65.456 699.370 C 64.390 700.998,62.200 701.749,60.936 700.921 C 59.499 699.980,59.215 698.933,58.710 692.719 C 58.273 687.350,58.241 687.220,57.532 687.981 C 56.600 688.981,54.195 689.460,53.404 688.803 C 51.748 687.429,51.600 686.297,51.601 675.039 C 51.601 669.077,51.414 662.760,51.184 661.000 C 50.955 659.240,50.634 650.960,50.471 642.600 C 50.213 629.454,50.132 628.075,49.866 632.400 M350.158 634.200 C 350.158 637.280,350.221 638.487,350.297 636.882 C 350.373 635.278,350.373 632.758,350.296 631.282 C 350.219 629.807,350.157 631.120,350.158 634.200 M281.600 639.197 C 281.600 639.415,281.060 640.075,280.400 640.663 C 278.982 641.927,278.619 645.820,279.826 646.822 C 281.828 648.483,281.798 648.076,281.829 674.000 C 281.846 687.310,281.932 698.470,282.021 698.800 C 282.110 699.130,282.318 687.610,282.482 673.200 C 282.647 658.790,282.809 645.740,282.842 644.200 C 282.908 641.166,282.519 638.800,281.955 638.800 C 281.760 638.800,281.600 638.979,281.600 639.197 M120.712 642.346 C 118.886 644.200,118.569 647.072,120.058 648.267 C 121.454 649.387,122.178 649.225,123.065 647.596 L 123.929 646.007 123.065 643.804 C 122.143 641.455,121.799 641.242,120.712 642.346 M325.500 645.900 C 325.419 646.065,325.565 647.550,325.825 649.200 C 326.143 651.223,326.313 651.728,326.348 650.750 C 326.377 649.953,326.656 648.574,326.969 647.686 C 327.283 646.799,327.433 645.966,327.303 645.836 C 326.965 645.498,325.675 645.544,325.500 645.900 M61.599 649.202 C 60.988 650.344,61.296 658.656,61.975 659.335 C 62.275 659.635,62.406 659.236,62.421 657.980 C 62.433 657.001,62.674 654.789,62.956 653.064 C 63.420 650.233,63.404 649.846,62.790 649.088 L 62.110 648.248 61.599 649.202 M349.861 657.100 C 349.526 660.646,349.606 672.748,349.985 675.800 C 350.169 677.288,350.305 673.678,350.341 666.300 C 350.401 654.126,350.309 652.355,349.861 657.100 M74.142 660.200 C 74.141 662.180,74.208 663.040,74.292 662.112 C 74.376 661.184,74.377 659.564,74.295 658.512 C 74.212 657.460,74.143 658.220,74.142 660.200 M341.867 659.034 C 341.543 660.998,341.526 682.285,341.848 683.486 C 342.069 684.309,342.132 684.325,342.743 683.710 C 343.573 682.875,343.477 662.776,342.626 659.434 L 342.126 657.468 341.867 659.034 M329.900 662.133 C 329.476 663.168,329.525 671.107,329.957 671.374 C 330.567 671.750,330.720 669.968,330.455 665.600 C 330.304 663.114,330.078 661.699,329.900 662.133 M69.885 675.800 C 69.524 677.888,69.572 682.784,69.962 683.783 C 70.652 685.546,71.056 679.033,70.458 675.800 L 70.162 674.200 69.885 675.800 M350.065 680.114 C 349.991 682.298,349.355 683.477,346.920 685.940 C 345.974 686.896,345.189 687.886,345.175 688.140 C 344.803 694.941,343.244 698.730,341.435 697.229 C 340.673 696.596,338.211 696.017,337.706 696.351 C 335.401 697.881,337.116 699.712,340.123 698.932 C 343.020 698.181,348.850 698.926,349.708 700.158 C 351.291 702.429,352.224 693.613,351.142 686.600 C 350.904 685.060,350.579 682.540,350.420 681.000 C 350.163 678.525,350.122 678.422,350.065 680.114 M333.889 684.933 C 333.490 685.946,333.536 691.280,333.951 691.934 C 334.695 693.108,335.062 688.224,334.442 685.400 C 334.223 684.404,334.129 684.325,333.889 684.933 M121.873 693.400 C 121.270 694.874,121.034 702.250,121.578 702.586 C 122.531 703.175,122.703 702.153,122.453 697.400 C 122.290 694.308,122.084 692.885,121.873 693.400 M224.820 710.665 C 223.558 712.270,223.395 713.520,224.182 715.569 C 225.409 718.766,225.653 720.082,225.966 725.200 L 226.271 730.200 226.336 724.999 C 226.383 721.133,226.607 719.079,227.205 716.999 C 228.665 711.925,227.099 707.768,224.820 710.665 M177.162 710.700 C 175.339 712.970,175.257 713.792,176.600 716.315 C 177.150 717.348,177.603 718.735,177.606 719.397 C 177.609 720.059,177.787 720.870,178.000 721.200 C 178.289 721.647,178.389 721.420,178.394 720.311 C 178.397 719.493,178.850 717.805,179.400 716.562 C 181.117 712.679,179.330 707.999,177.162 710.700 M178.653 714.887 C 177.983 715.962,177.032 714.662,177.647 713.512 C 178.044 712.771,178.088 712.768,178.585 713.447 C 178.982 713.990,178.998 714.334,178.653 714.887 M226.486 713.500 C 226.566 713.885,226.553 714.629,226.458 715.154 L 226.286 716.108 225.796 715.193 C 225.297 714.260,225.432 712.800,226.017 712.800 C 226.196 712.800,226.406 713.115,226.486 713.500 M349.650 714.029 C 348.923 716.115,346.964 717.502,344.313 717.810 L 342.000 718.079 342.078 726.539 L 342.156 735.000 342.392 728.000 C 342.725 718.161,343.720 716.830,348.028 720.463 L 350.000 722.125 350.000 725.539 C 350.000 729.354,349.208 738.091,348.834 738.400 C 348.180 738.941,347.221 741.654,346.928 743.795 L 346.600 746.190 348.314 747.898 C 351.667 751.240,354.405 744.650,352.011 739.000 C 349.943 734.122,349.645 723.703,351.470 720.096 L 352.540 717.981 351.863 715.834 C 350.956 712.955,350.230 712.364,349.650 714.029 M54.423 721.500 C 54.435 721.885,55.320 722.866,56.388 723.679 L 58.331 725.158 58.925 723.679 C 59.720 721.702,58.871 720.800,56.217 720.800 C 54.744 720.800,54.404 720.933,54.423 721.500 M177.848 738.972 C 177.654 741.597,177.611 746.007,177.754 748.772 C 178.390 761.155,172.243 767.514,163.025 764.009 C 162.441 763.788,161.106 763.777,159.723 763.983 C 158.445 764.173,154.434 764.446,150.810 764.590 C 141.736 764.951,139.109 765.846,143.421 767.107 C 145.085 767.594,146.484 767.614,152.200 767.237 C 161.565 766.620,172.143 766.612,174.537 767.221 C 175.877 767.562,177.604 767.618,180.137 767.404 C 185.191 766.978,222.137 766.928,224.600 767.345 C 227.727 767.873,231.139 766.593,231.811 764.639 C 232.085 763.843,232.517 762.941,232.772 762.633 C 233.149 762.179,232.954 761.981,231.737 761.579 C 229.769 760.930,227.836 758.833,226.961 756.399 C 226.281 754.510,225.600 754.089,225.600 755.559 C 225.600 757.416,222.426 762.593,220.571 763.760 L 218.728 764.919 202.088 764.629 C 182.482 764.288,182.807 764.356,180.723 760.114 C 178.725 756.048,178.641 755.479,178.415 744.600 C 178.204 734.394,178.193 734.289,177.848 738.972 M350.817 740.632 C 351.627 742.146,351.045 745.600,349.980 745.600 C 349.315 745.600,348.817 742.139,349.298 740.864 C 349.877 739.331,350.103 739.297,350.817 740.632 M226.146 746.200 C 226.147 748.400,226.214 749.249,226.295 748.087 C 226.376 746.924,226.376 745.124,226.293 744.087 C 226.211 743.049,226.145 744.000,226.146 746.200 M51.195 745.394 C 51.646 745.937,50.994 747.600,50.331 747.600 C 49.790 747.600,49.540 745.942,49.829 744.283 C 50.114 742.650,50.132 742.633,50.434 743.726 C 50.605 744.345,50.947 745.096,51.195 745.394 M306.400 757.966 L 304.200 758.201 306.400 758.497 C 309.053 758.854,312.631 758.825,314.000 758.436 C 316.418 757.749,311.354 757.436,306.400 757.966 M181.907 765.449 L 183.215 766.330 180.307 766.603 C 178.708 766.752,176.844 766.723,176.164 766.537 L 174.929 766.200 176.529 762.865 L 178.130 759.531 179.365 762.050 C 180.124 763.598,181.104 764.908,181.907 765.449 M228.000 764.332 C 228.000 766.578,227.690 766.760,224.353 766.482 L 222.505 766.328 223.353 765.404 C 223.819 764.895,224.625 763.369,225.144 762.011 L 226.087 759.543 227.044 760.950 C 227.733 761.964,228.000 762.909,228.000 764.332 M271.800 760.098 C 268.993 760.793,264.800 762.061,264.800 762.215 C 264.800 762.623,267.773 763.630,270.800 764.246 C 272.670 764.627,274.920 765.254,275.800 765.640 C 278.653 766.892,295.200 767.139,295.200 765.929 C 295.200 764.765,293.097 762.886,291.510 762.632 C 290.591 762.485,289.651 762.216,289.420 762.035 C 288.772 761.526,285.477 760.878,280.132 760.209 C 274.736 759.534,274.108 759.526,271.800 760.098 M92.072 761.947 C 91.237 762.476,95.138 762.798,101.800 762.749 C 108.851 762.698,111.503 762.328,108.000 761.885 C 104.914 761.495,92.710 761.542,92.072 761.947 M122.621 763.644 C 118.022 764.124,115.352 764.749,114.319 765.585 L 113.413 766.319 115.738 766.610 C 118.326 766.933,126.645 766.689,127.056 766.277 C 127.414 765.919,126.687 763.482,126.194 763.387 C 125.977 763.346,124.369 763.461,122.621 763.644 M194.900 766.282 C 194.405 766.378,193.595 766.378,193.100 766.282 C 192.605 766.187,193.010 766.109,194.000 766.109 C 194.990 766.109,195.395 766.187,194.900 766.282 " stroke="none" fill="#ababab" fill-rule="evenodd"></path><path id="path2" d="M189.220 26.695 C 186.044 27.080,185.263 30.419,188.177 31.153 C 193.213 32.421,210.803 31.435,210.799 29.885 C 210.794 28.546,209.244 26.912,207.742 26.664 C 206.093 26.391,191.523 26.416,189.220 26.695 M119.931 29.531 C 115.433 30.073,117.125 31.100,123.400 31.636 C 125.600 31.824,128.438 32.095,129.707 32.239 C 132.146 32.515,135.043 31.946,136.744 30.855 L 137.688 30.250 136.776 29.913 C 135.578 29.470,122.840 29.181,119.931 29.531 M273.800 29.367 C 273.580 29.459,272.725 29.647,271.900 29.785 C 270.969 29.941,270.400 30.257,270.400 30.618 C 270.400 31.047,269.892 31.200,268.473 31.200 C 267.413 31.200,265.568 31.502,264.373 31.871 C 262.544 32.436,260.202 32.546,249.583 32.571 C 235.809 32.603,234.085 32.866,235.269 34.762 C 236.227 36.296,237.600 36.711,240.400 36.312 C 241.830 36.108,248.310 35.792,254.800 35.611 C 261.290 35.430,267.230 35.163,268.000 35.019 C 268.770 34.875,269.785 34.678,270.256 34.582 C 270.747 34.481,271.215 33.993,271.355 33.435 C 271.644 32.287,272.589 32.159,283.211 31.822 C 287.948 31.671,290.386 31.418,291.811 30.928 L 293.800 30.244 292.400 29.923 C 290.901 29.579,274.469 29.088,273.800 29.367 M143.216 31.599 C 141.271 32.261,140.000 33.222,140.000 34.032 C 140.000 35.432,179.372 36.323,182.551 34.995 C 186.200 33.470,181.355 31.024,176.603 31.991 C 170.898 33.153,156.359 32.575,154.620 31.118 C 153.844 30.468,145.507 30.820,143.216 31.599 M97.287 33.604 C 93.438 33.939,93.337 33.998,93.973 35.535 C 94.503 36.815,95.854 37.600,97.526 37.600 C 98.125 37.600,99.303 38.068,100.145 38.640 C 101.712 39.705,102.056 39.722,105.267 38.883 C 109.151 37.867,113.220 35.087,112.247 34.113 C 111.383 33.249,104.171 33.004,97.287 33.604 M217.000 33.397 C 216.780 33.470,216.060 33.668,215.400 33.836 C 214.264 34.126,214.307 34.158,216.200 34.436 C 220.706 35.098,224.371 34.637,222.800 33.606 C 222.248 33.244,217.926 33.088,217.000 33.397 M300.815 33.615 C 299.476 34.189,299.469 34.204,300.022 35.266 C 300.894 36.941,301.831 37.507,304.839 38.178 C 306.468 38.541,308.361 39.013,309.048 39.226 C 310.922 39.809,316.527 38.403,314.938 37.749 C 314.684 37.644,314.245 36.776,313.963 35.819 C 313.505 34.271,313.293 34.054,312.025 33.842 C 309.044 33.345,301.787 33.198,300.815 33.615 M80.474 37.940 L 79.549 38.201 80.674 39.266 C 81.293 39.851,82.557 40.531,83.483 40.776 C 84.409 41.021,85.279 41.404,85.417 41.627 C 85.977 42.534,89.312 40.346,89.714 38.808 C 90.005 37.696,83.509 37.086,80.474 37.940 M233.074 41.384 C 231.795 41.678,230.669 41.998,230.572 42.095 C 230.263 42.404,253.724 42.744,255.600 42.458 C 258.556 42.007,256.459 41.516,250.800 41.333 C 248.050 41.244,243.460 41.099,240.600 41.011 C 237.141 40.904,234.621 41.029,233.074 41.384 M331.838 42.600 C 330.724 43.356,329.846 43.600,328.241 43.600 C 326.165 43.600,323.684 44.720,323.324 45.820 C 323.049 46.660,326.351 47.710,328.410 47.436 C 330.430 47.169,331.600 47.962,331.600 49.598 C 331.600 49.939,332.221 50.552,332.979 50.961 C 334.273 51.658,335.600 53.636,335.600 54.869 C 335.600 55.171,336.146 56.080,336.814 56.890 L 338.028 58.363 337.114 58.955 C 334.942 60.360,330.664 60.252,330.279 58.782 C 330.137 58.239,329.727 57.998,328.937 57.995 C 328.312 57.992,327.395 57.881,326.900 57.748 C 326.360 57.603,326.000 57.685,326.000 57.953 C 326.000 58.216,326.741 58.400,327.800 58.400 L 329.600 58.400 329.600 60.348 L 329.600 62.295 331.953 63.316 C 333.985 64.197,334.541 64.283,336.033 63.948 C 337.553 63.607,337.985 63.683,339.634 64.580 C 340.665 65.141,341.802 65.600,342.161 65.600 C 343.200 65.600,346.935 70.033,347.385 71.800 C 347.971 74.103,347.624 110.099,347.007 111.044 C 346.410 111.957,340.660 112.677,333.283 112.762 C 329.450 112.806,328.707 113.249,328.188 115.800 C 327.841 117.502,327.733 149.347,328.025 163.400 C 328.156 169.707,328.061 172.398,327.640 174.200 C 327.233 175.947,327.038 180.609,326.922 191.341 C 326.697 212.222,326.174 211.197,337.123 211.344 C 348.350 211.494,347.603 210.285,347.591 228.274 C 347.580 244.979,347.937 243.815,342.553 244.709 C 339.296 245.249,337.586 245.381,331.765 245.543 L 329.730 245.600 328.618 247.871 C 327.562 250.028,327.531 250.245,328.007 252.229 C 328.398 253.861,328.447 261.112,328.231 285.458 C 327.717 343.190,327.682 341.282,329.289 342.889 C 330.559 344.159,333.774 344.450,336.057 343.501 C 337.922 342.726,338.030 342.723,339.480 343.411 C 340.303 343.802,342.111 344.239,343.496 344.382 C 347.860 344.834,347.866 344.871,347.600 366.229 C 347.372 384.498,347.414 384.272,344.472 383.208 C 340.282 381.693,337.845 383.933,339.580 387.704 C 340.733 390.212,341.613 473.994,340.532 478.311 C 339.522 482.343,337.413 482.570,335.982 478.800 C 335.434 477.357,334.908 460.873,334.698 438.600 C 334.619 430.196,334.485 428.008,334.000 427.200 C 333.495 426.358,333.381 423.313,333.281 407.966 L 333.163 389.731 334.828 388.066 C 335.745 387.150,336.654 386.400,336.850 386.400 C 337.526 386.400,336.220 384.823,335.211 384.420 C 333.728 383.827,329.733 384.478,328.987 385.434 C 328.384 386.207,328.379 389.769,328.922 436.000 C 328.965 439.630,328.955 443.590,328.899 444.800 C 328.493 453.638,329.431 479.275,330.175 479.691 C 330.602 479.929,331.535 480.708,332.248 481.421 L 333.545 482.719 339.319 482.503 C 349.051 482.138,348.339 480.747,348.487 500.400 L 348.600 515.400 347.593 517.200 L 346.587 519.000 343.526 519.249 C 341.392 519.423,340.119 519.745,339.320 520.314 C 338.554 520.860,337.972 521.016,337.560 520.785 C 335.418 519.587,331.039 520.952,329.974 523.151 C 329.281 524.579,328.722 541.498,329.219 546.000 C 329.425 547.870,329.598 556.870,329.604 566.000 C 329.612 578.822,329.755 583.556,330.231 586.800 C 330.700 589.999,330.821 593.765,330.738 602.600 C 330.595 617.893,331.342 620.307,335.800 618.948 C 336.822 618.637,338.773 618.535,341.200 618.666 C 348.420 619.056,349.850 620.201,348.958 624.880 C 348.553 627.003,348.401 631.370,348.400 640.881 C 348.400 649.598,348.251 654.336,347.952 655.081 C 347.706 655.697,347.214 656.856,346.859 657.657 L 346.214 659.113 344.919 656.857 C 343.686 654.707,343.624 654.398,343.612 650.362 C 343.598 645.575,343.516 645.420,340.387 644.268 C 337.987 643.384,335.200 644.223,335.200 645.830 C 335.200 646.155,336.551 648.179,336.959 648.466 C 337.167 648.612,337.443 650.170,337.572 651.928 C 337.739 654.203,338.016 655.354,338.531 655.924 C 339.737 657.256,340.103 661.786,339.894 672.800 C 339.710 682.492,339.973 686.945,340.820 688.495 C 341.813 690.310,340.514 692.800,338.575 692.800 C 337.223 692.800,336.712 691.455,336.370 687.000 C 335.798 679.552,334.946 674.409,334.130 673.483 C 332.820 671.994,332.400 670.493,332.400 667.290 C 332.400 665.601,332.141 662.864,331.825 661.209 C 331.508 659.554,331.039 656.760,330.783 655.000 C 330.526 653.240,330.133 651.685,329.908 651.545 C 329.103 651.044,329.516 649.138,330.766 647.583 L 332.032 646.008 330.815 645.267 C 325.759 642.193,322.553 643.885,323.567 649.091 C 323.815 650.361,324.193 652.904,324.407 654.743 C 324.622 656.581,325.082 659.101,325.429 660.343 C 326.467 664.047,326.764 665.691,326.783 667.821 C 326.794 669.180,327.148 670.542,327.861 671.973 C 328.665 673.586,329.012 675.087,329.288 678.152 C 329.582 681.407,329.820 682.378,330.504 683.108 C 331.161 683.809,331.419 684.764,331.641 687.308 C 332.580 698.057,334.728 700.800,342.202 700.800 C 348.458 700.800,349.200 701.543,349.200 707.811 C 349.200 712.831,347.627 715.318,344.003 716.031 C 340.233 716.773,340.297 716.596,340.017 727.109 C 339.884 732.109,339.613 736.462,339.413 736.783 C 339.214 737.103,338.783 737.678,338.456 738.060 C 337.576 739.087,336.401 742.414,336.400 743.876 C 336.400 744.578,336.220 745.264,336.000 745.400 C 335.780 745.536,335.597 746.222,335.594 746.924 C 335.584 748.878,335.094 749.292,332.339 749.668 C 330.942 749.859,329.737 750.201,329.659 750.430 C 329.272 751.571,327.771 752.347,325.462 752.598 C 322.738 752.895,320.228 753.561,317.800 754.632 C 316.020 755.417,312.686 755.765,301.215 756.364 C 296.933 756.587,292.613 756.947,291.615 757.164 C 287.554 758.047,286.073 758.189,283.400 757.950 C 275.815 757.272,269.391 757.788,261.400 759.717 C 260.054 760.042,255.281 760.199,246.800 760.196 L 234.200 760.193 232.090 759.070 C 228.265 757.035,227.585 753.052,227.605 732.800 C 227.617 721.090,227.699 720.122,229.163 714.600 C 229.396 713.720,229.682 712.510,229.799 711.910 C 229.955 711.105,230.348 710.723,231.305 710.446 C 232.455 710.114,232.488 710.068,231.600 710.034 C 231.050 710.012,230.060 709.702,229.400 709.344 C 227.935 708.550,225.150 708.435,223.000 709.080 C 222.120 709.344,220.905 709.663,220.300 709.788 L 219.200 710.015 220.200 711.600 C 220.750 712.471,221.200 713.447,221.200 713.768 C 221.200 714.090,221.369 714.457,221.575 714.584 C 222.994 715.461,223.135 716.980,222.813 727.890 C 222.533 737.379,222.587 739.330,223.287 745.000 C 224.480 754.672,224.033 756.948,220.241 760.500 L 218.213 762.400 202.179 762.400 L 186.144 762.400 185.289 761.500 C 184.819 761.005,183.829 760.002,183.090 759.270 C 180.328 756.538,179.800 752.100,179.800 731.600 C 179.800 718.809,179.815 718.572,180.720 716.849 C 182.749 712.988,184.663 711.856,190.200 711.238 C 199.452 710.206,199.316 709.950,189.286 709.513 C 185.169 709.333,180.826 709.080,179.635 708.950 C 177.452 708.712,173.377 709.681,172.706 710.598 C 172.038 711.512,172.374 714.338,173.181 714.594 C 175.178 715.228,175.326 716.393,175.221 730.657 C 175.157 739.367,175.297 745.433,175.629 748.341 C 176.746 758.125,174.095 762.256,167.276 761.359 C 165.804 761.165,162.530 761.082,160.000 761.173 C 148.261 761.597,143.153 761.429,138.010 760.450 C 133.599 759.610,132.417 759.535,127.810 759.799 C 120.266 760.232,116.804 760.209,111.400 759.689 C 108.760 759.435,104.237 759.045,101.350 758.822 C 98.462 758.600,95.616 758.234,95.024 758.009 C 94.432 757.784,92.141 757.600,89.932 757.600 C 84.796 757.600,80.756 756.615,78.898 754.911 C 78.604 754.642,77.607 754.206,76.682 753.943 C 75.757 753.680,74.829 753.315,74.620 753.133 C 74.411 752.950,73.659 752.800,72.949 752.800 C 71.527 752.800,70.400 751.932,70.400 750.836 C 70.400 750.287,69.896 750.048,68.139 749.765 C 65.573 749.351,65.608 749.395,64.415 745.000 C 63.937 743.240,63.300 740.900,62.998 739.800 C 61.554 734.525,61.488 733.913,61.695 727.768 L 61.903 721.571 59.451 719.813 C 58.103 718.846,56.122 717.158,55.050 716.063 L 53.100 714.071 53.383 709.911 C 53.623 706.386,53.787 705.676,54.455 705.258 C 55.503 704.604,61.651 703.872,64.272 704.089 C 67.094 704.323,68.053 703.468,68.726 700.116 C 69.000 698.750,69.575 696.860,70.004 695.916 C 70.432 694.972,70.789 693.300,70.796 692.200 C 70.808 690.403,71.108 689.004,72.469 684.400 C 72.697 683.630,73.019 681.449,73.186 679.552 C 73.352 677.656,73.647 675.856,73.841 675.552 C 74.721 674.174,75.254 671.885,75.599 668.000 C 76.192 661.340,77.376 653.998,77.918 653.629 C 79.977 652.228,79.388 646.823,77.089 646.021 C 74.778 645.216,69.991 645.626,70.769 646.563 C 72.670 648.853,72.360 659.988,70.298 663.483 C 69.753 664.408,69.355 666.063,69.130 668.343 C 68.943 670.244,68.602 672.790,68.372 674.000 C 68.142 675.210,67.829 678.486,67.677 681.280 L 67.400 686.360 65.860 687.771 C 64.330 689.172,64.321 689.197,64.578 691.491 C 65.129 696.416,63.296 700.652,61.419 698.790 C 59.795 697.180,60.369 686.400,62.079 686.400 C 62.256 686.400,62.400 681.765,62.400 676.100 C 62.401 668.350,62.554 665.065,63.020 662.833 C 63.360 661.201,63.781 658.318,63.956 656.425 C 64.131 654.532,64.509 652.543,64.797 652.005 C 65.086 651.466,65.436 649.914,65.577 648.556 L 65.833 646.085 64.016 645.876 C 62.150 645.660,60.400 646.609,60.400 647.836 C 60.400 648.110,60.175 648.408,59.900 648.500 C 59.550 648.616,59.334 650.219,59.180 653.833 C 58.954 659.120,58.689 660.400,57.819 660.400 C 56.988 660.400,55.273 662.122,54.670 663.561 L 54.101 664.923 53.622 662.561 C 52.718 658.097,52.153 628.763,52.932 626.722 C 54.040 623.822,55.800 622.979,61.417 622.658 C 64.718 622.470,66.237 622.220,66.661 621.796 C 66.989 621.468,67.919 621.199,68.729 621.199 C 70.235 621.197,72.136 620.264,73.585 618.815 C 74.698 617.702,74.839 593.466,73.761 588.400 C 73.213 585.821,73.160 583.321,73.386 570.600 C 73.568 560.394,73.507 554.620,73.191 552.000 C 72.338 544.940,72.292 543.465,72.816 540.097 C 73.687 534.500,72.943 526.411,71.412 524.812 C 70.022 523.361,68.885 523.280,65.851 524.415 C 63.717 525.214,62.127 526.400,63.191 526.400 C 66.896 526.400,67.691 528.579,67.618 538.530 C 67.584 543.188,67.770 562.120,68.031 580.600 L 68.506 614.200 67.453 616.375 C 66.874 617.571,66.394 619.191,66.386 619.975 L 66.372 621.400 65.800 620.400 C 65.486 619.850,65.222 619.112,65.214 618.761 C 65.206 618.392,64.519 617.854,63.592 617.490 C 60.492 616.272,60.654 618.109,60.303 580.400 C 59.858 532.668,59.885 530.219,60.900 528.000 C 62.284 524.976,61.588 524.093,56.958 523.003 C 54.401 522.401,54.014 522.187,53.632 521.161 C 53.395 520.522,53.002 519.470,52.761 518.823 C 52.364 517.759,52.379 514.639,52.856 498.000 C 52.879 497.230,52.759 495.118,52.592 493.306 C 52.349 490.683,52.425 489.573,52.965 487.856 L 53.643 485.700 56.121 485.226 C 60.440 484.399,60.978 484.198,61.464 483.221 C 61.867 482.414,61.786 481.975,60.930 480.338 L 59.920 478.407 59.943 436.304 C 59.963 399.666,60.045 393.940,60.578 392.200 C 62.113 387.192,60.519 384.940,56.321 386.186 C 55.185 386.524,54.193 386.800,54.117 386.800 C 53.036 386.800,52.402 377.666,52.400 362.083 C 52.399 347.472,52.127 348.227,57.515 347.884 C 59.338 347.768,61.098 347.451,61.426 347.178 C 61.885 346.798,62.258 346.789,63.031 347.141 C 65.437 348.238,69.529 347.120,70.697 345.047 C 71.448 343.712,72.191 262.232,71.515 255.263 C 70.972 249.659,67.109 246.751,63.430 249.177 C 62.334 249.899,62.181 249.907,61.030 249.306 C 60.350 248.952,58.417 248.583,56.711 248.482 C 54.137 248.329,53.582 248.173,53.384 247.549 C 53.253 247.137,53.000 246.800,52.821 246.800 C 51.916 246.800,51.600 242.574,51.600 230.483 L 51.600 217.720 52.803 216.060 L 54.005 214.400 58.103 214.388 C 61.387 214.378,62.041 214.285,61.400 213.917 C 60.177 213.215,59.627 212.319,59.610 211.000 C 59.602 210.340,59.303 209.260,58.945 208.600 C 58.167 207.163,57.658 199.897,57.623 189.731 C 57.602 183.320,57.828 181.019,58.879 177.000 C 59.153 175.952,59.275 166.176,59.235 148.666 L 59.173 121.933 60.377 119.975 C 62.150 117.094,60.722 115.600,56.196 115.600 C 52.208 115.600,51.633 113.239,51.621 96.800 C 51.605 74.863,52.563 70.607,57.872 69.040 C 59.152 68.662,60.513 68.184,60.895 67.977 C 61.277 67.769,62.734 67.600,64.133 67.600 C 67.071 67.600,67.787 67.084,68.305 64.594 C 68.554 63.392,68.858 62.975,69.615 62.796 C 70.157 62.669,70.582 62.347,70.560 62.082 C 70.402 60.174,70.446 60.236,69.700 60.884 C 69.315 61.219,68.460 61.616,67.800 61.767 C 67.140 61.918,65.880 62.542,65.000 63.154 C 62.404 64.960,62.037 64.985,61.377 63.406 C 60.746 61.898,61.454 59.095,62.574 58.665 C 62.856 58.557,63.198 57.910,63.335 57.226 C 63.773 55.034,65.669 51.600,66.441 51.600 C 66.833 51.600,67.251 51.440,67.372 51.245 C 67.493 51.050,68.223 50.772,68.996 50.627 C 70.793 50.290,70.751 50.081,68.562 48.470 C 64.858 45.745,62.332 45.032,61.551 46.492 C 60.870 47.763,60.301 48.260,58.758 48.931 C 57.506 49.475,56.896 49.992,54.555 52.496 C 54.090 52.993,53.391 54.390,53.000 55.600 C 52.610 56.810,52.144 58.160,51.965 58.600 C 51.238 60.390,50.400 63.275,50.400 63.990 C 50.400 64.410,50.235 64.855,50.032 64.980 C 49.551 65.277,48.749 68.730,48.401 72.000 C 47.857 77.110,47.144 82.235,46.676 84.400 C 46.045 87.317,46.045 106.426,46.676 108.495 C 47.282 110.480,45.868 114.548,43.822 116.707 C 42.705 117.886,42.406 118.526,42.403 119.749 C 42.401 120.974,42.291 121.208,41.880 120.867 C 39.570 118.949,36.933 120.303,36.167 123.800 C 35.727 125.807,35.729 154.618,36.169 164.000 C 36.435 169.662,36.376 171.813,35.858 175.253 C 35.376 178.454,35.209 182.794,35.183 192.786 L 35.149 206.065 36.475 207.332 C 37.763 208.564,38.926 209.315,41.400 210.511 C 42.987 211.279,45.104 213.667,45.444 215.074 C 45.594 215.693,46.037 216.659,46.429 217.220 C 47.099 218.180,47.120 219.222,46.778 234.620 C 46.563 244.345,46.561 251.894,46.775 253.200 C 46.974 254.416,47.243 291.004,47.376 335.000 C 47.508 378.780,47.747 429.360,47.908 447.400 C 48.369 499.188,48.613 495.144,44.923 496.878 C 43.962 497.330,42.942 498.034,42.656 498.442 C 42.083 499.259,39.651 500.400,38.480 500.400 C 36.636 500.400,36.598 500.950,36.628 527.160 C 36.687 580.465,36.937 587.600,38.742 587.600 C 39.430 587.600,43.200 589.630,43.200 590.000 C 43.200 590.150,43.923 590.490,44.806 590.755 C 45.970 591.103,46.683 591.664,47.393 592.789 L 48.374 594.343 48.441 609.072 C 48.491 620.273,48.106 705.977,47.831 744.600 C 47.791 750.255,48.717 752.703,51.406 754.046 C 52.347 754.516,53.312 755.328,53.550 755.850 C 53.788 756.373,54.248 756.800,54.572 756.800 C 54.895 756.800,55.325 757.094,55.526 757.453 C 56.624 759.416,59.409 759.245,59.672 757.200 C 59.771 756.428,60.325 755.945,62.100 755.085 C 63.416 754.447,64.400 753.708,64.400 753.357 C 64.400 751.105,67.814 751.142,68.540 753.402 C 68.681 753.841,69.338 754.830,70.000 755.600 C 70.662 756.370,71.296 757.286,71.408 757.635 C 71.637 758.346,76.254 760.800,77.362 760.800 C 79.553 760.800,82.400 762.065,82.400 763.038 C 82.400 764.257,83.643 764.793,86.526 764.817 C 91.788 764.860,95.408 765.758,95.316 766.997 C 95.202 768.526,94.658 768.787,91.560 768.794 C 89.015 768.800,86.619 769.328,85.814 770.060 C 85.257 770.568,117.372 770.478,122.315 769.959 C 125.655 769.608,126.551 769.627,127.076 770.063 C 128.093 770.907,145.867 771.083,149.032 770.280 C 155.065 768.749,166.999 767.872,174.064 768.440 C 176.539 768.639,178.877 768.702,179.258 768.581 C 180.151 768.298,212.135 767.812,217.400 768.002 C 223.010 768.204,229.434 768.128,234.667 767.796 C 239.174 767.511,242.390 768.367,243.685 770.197 C 243.865 770.451,248.075 770.600,255.085 770.600 L 266.200 770.600 268.200 769.422 L 270.200 768.244 284.755 767.934 C 304.002 767.525,322.213 766.850,324.200 766.473 L 325.800 766.169 324.107 764.476 C 323.176 763.545,321.877 762.675,321.220 762.544 L 320.027 762.305 321.914 760.580 C 322.951 759.631,324.430 758.591,325.200 758.268 C 325.970 757.946,328.289 756.999,330.353 756.164 C 333.742 754.793,334.159 754.508,334.662 753.223 C 335.566 750.916,335.812 750.630,337.138 750.359 C 337.832 750.217,338.401 750.213,338.403 750.351 C 338.409 750.782,340.513 751.600,341.620 751.600 C 343.549 751.600,345.010 752.360,345.481 753.610 C 346.240 755.619,350.069 755.410,351.156 753.300 C 351.581 752.475,352.466 751.204,353.123 750.475 C 354.139 749.347,354.689 747.985,354.849 746.200 C 354.869 745.980,354.583 742.705,354.213 738.922 C 353.446 731.078,353.553 723.454,354.543 715.400 C 355.335 708.959,355.337 702.855,354.549 696.600 C 353.516 688.395,352.997 625.600,353.962 625.600 C 354.890 625.600,355.200 621.237,355.200 608.155 C 355.200 593.949,355.210 593.844,356.783 590.787 C 356.956 590.450,357.222 589.608,357.374 588.917 C 357.667 587.586,359.057 586.806,361.160 586.794 C 362.607 586.785,362.886 586.515,364.151 583.895 L 365.264 581.590 365.035 563.295 C 364.909 553.233,364.827 535.549,364.852 523.998 C 364.910 497.152,364.819 496.630,360.142 496.847 C 357.818 496.954,357.219 496.577,357.206 495.000 C 357.200 494.268,356.766 493.631,354.384 490.849 C 353.624 489.961,353.578 489.451,353.685 483.049 C 353.979 465.550,353.539 432.491,352.935 426.600 C 352.392 421.309,352.354 411.031,352.608 339.600 C 352.767 295.050,352.864 258.420,352.824 258.200 C 352.336 255.553,352.416 213.341,352.910 212.085 C 353.232 211.268,353.622 209.731,353.777 208.670 L 354.058 206.739 355.667 207.011 C 356.603 207.169,358.053 207.073,359.137 206.781 C 363.501 205.604,363.794 204.506,363.439 190.687 C 363.241 182.999,363.304 178.448,363.653 175.200 C 364.276 169.408,364.168 124.196,363.523 120.707 C 363.012 117.946,362.748 117.698,359.745 117.145 C 358.455 116.908,356.998 116.640,356.506 116.551 C 355.926 116.445,355.523 116.003,355.358 115.294 C 355.218 114.692,354.874 114.014,354.594 113.786 C 354.313 113.559,353.667 112.659,353.159 111.786 L 352.234 110.200 352.179 92.400 C 352.122 73.679,351.745 67.874,350.398 65.000 C 349.986 64.120,349.539 62.842,349.406 62.161 C 348.689 58.502,345.832 52.956,343.737 51.157 C 343.112 50.620,341.633 49.112,340.451 47.804 C 339.269 46.497,337.635 45.129,336.820 44.765 C 335.870 44.339,335.153 43.653,334.821 42.851 C 334.195 41.339,333.751 41.302,331.838 42.600 M103.365 43.962 C 100.304 44.731,100.267 46.177,103.300 46.541 C 107.146 47.003,116.400 46.636,116.400 46.022 C 116.400 45.529,113.797 44.826,110.400 44.401 C 108.530 44.167,106.460 43.902,105.800 43.813 C 105.140 43.725,104.044 43.791,103.365 43.962 M298.529 45.330 C 296.129 46.217,296.676 46.400,301.721 46.400 C 305.891 46.400,306.737 46.302,306.560 45.839 C 306.137 44.738,301.012 44.413,298.529 45.330 M339.788 49.577 C 340.674 50.445,342.030 51.750,342.800 52.477 C 344.332 53.925,344.622 54.375,346.871 58.800 C 348.532 62.067,348.612 62.471,347.967 64.324 C 347.449 65.808,346.291 66.279,345.080 65.497 C 344.596 65.184,343.585 64.808,342.833 64.661 C 340.813 64.265,338.753 62.566,338.975 61.478 C 339.668 58.077,339.635 57.754,338.428 56.236 C 337.777 55.416,337.042 54.083,336.794 53.273 C 336.547 52.463,336.136 51.376,335.882 50.857 C 335.476 50.030,335.555 49.797,336.532 48.957 C 337.956 47.732,337.889 47.719,339.788 49.577 M315.000 49.974 C 314.397 50.214,314.693 50.338,316.200 50.475 C 318.402 50.676,319.313 50.506,318.974 49.958 C 318.705 49.523,316.107 49.534,315.000 49.974 M87.500 50.289 C 88.215 50.378,89.385 50.378,90.100 50.289 C 90.815 50.201,90.230 50.128,88.800 50.128 C 87.370 50.128,86.785 50.201,87.500 50.289 M60.300 52.210 C 62.143 53.129,62.128 56.255,60.264 59.992 C 59.286 61.952,59.636 64.735,60.980 65.678 C 61.503 66.045,61.395 66.124,58.663 67.363 C 52.402 70.202,49.566 69.356,51.142 65.119 C 51.330 64.613,51.997 62.580,52.624 60.600 C 54.028 56.172,56.919 51.713,58.439 51.633 C 58.790 51.615,59.627 51.874,60.300 52.210 M72.861 57.404 C 72.080 58.227,72.024 58.434,72.531 58.629 C 74.255 59.290,76.172 57.662,74.739 56.754 C 73.980 56.273,73.911 56.297,72.861 57.404 M335.200 62.000 C 335.654 62.293,335.478 62.389,334.476 62.394 C 333.695 62.397,333.254 62.236,333.400 62.000 C 333.711 61.497,334.422 61.497,335.200 62.000 M50.600 91.100 C 50.600 117.317,50.439 116.531,56.000 117.383 C 59.382 117.901,59.316 117.802,57.840 120.121 C 55.928 123.123,55.555 132.573,56.216 161.289 C 56.440 171.045,56.398 174.520,56.051 174.938 C 54.880 176.350,54.423 202.244,55.453 208.812 C 55.662 210.146,55.563 210.300,53.680 211.585 C 51.554 213.036,50.400 214.584,50.400 215.985 C 50.400 216.459,50.220 216.736,50.000 216.600 C 49.780 216.464,49.600 216.022,49.600 215.618 C 49.600 214.900,47.125 212.400,46.413 212.400 C 46.216 212.400,45.651 211.833,45.157 211.140 L 44.260 209.879 45.266 209.040 C 45.819 208.578,46.768 207.813,47.373 207.340 L 48.475 206.480 48.691 191.740 C 48.996 171.046,48.809 127.844,48.404 125.166 C 48.055 122.863,47.353 120.983,46.157 119.146 C 45.481 118.109,45.493 118.065,46.920 116.323 C 49.543 113.122,49.646 112.168,49.617 91.400 C 49.592 74.078,49.741 69.600,50.345 69.600 C 50.485 69.600,50.600 79.275,50.600 91.100 M350.792 91.526 C 350.987 109.762,351.049 111.100,351.776 112.565 C 352.660 114.345,352.653 116.575,351.756 120.000 C 351.296 121.756,351.196 125.225,351.259 137.200 C 351.303 145.450,351.194 163.360,351.018 177.000 C 350.730 199.280,350.764 202.057,351.349 204.332 C 352.165 207.507,352.167 209.045,351.358 212.142 C 350.784 214.340,350.741 218.086,350.958 247.600 C 351.091 265.750,351.294 313.540,351.410 353.800 C 351.551 402.956,351.767 428.577,352.067 431.800 C 352.399 435.363,352.396 437.916,352.057 441.708 C 351.804 444.537,351.600 454.221,351.600 463.420 C 351.600 477.276,351.501 480.264,351.000 481.462 C 350.670 482.251,350.382 483.461,350.361 484.149 C 350.324 485.308,350.287 485.272,349.857 483.662 C 349.350 481.767,347.807 480.165,346.081 479.740 C 344.029 479.235,343.105 478.370,343.402 477.232 C 344.024 474.842,344.315 450.672,343.749 448.416 C 343.367 446.898,343.200 443.569,343.200 437.496 C 343.200 429.931,343.106 428.589,342.500 427.480 C 341.870 426.328,341.780 424.306,341.599 407.200 C 341.438 391.959,341.287 387.983,340.836 387.102 C 339.740 384.963,341.784 383.857,344.824 384.944 C 346.392 385.505,346.829 385.263,347.957 383.212 C 349.004 381.308,349.344 346.699,348.337 344.556 C 347.120 341.966,346.365 341.463,344.029 341.688 C 342.426 341.842,342.007 341.754,341.893 341.240 C 341.429 339.166,342.139 316.505,342.708 315.200 C 343.782 312.736,343.846 254.420,342.775 253.059 C 340.621 250.321,341.262 247.600,344.060 247.600 C 346.502 247.600,348.473 245.900,349.212 243.157 C 350.069 239.974,349.537 213.582,348.593 212.448 C 346.659 210.126,346.073 209.704,344.000 209.136 L 341.800 208.534 341.682 193.167 C 341.564 177.942,341.815 173.804,342.938 172.437 C 343.654 171.564,343.533 156.803,342.786 154.000 C 342.306 152.199,342.221 148.788,342.318 135.174 C 342.446 116.942,342.262 115.318,339.977 114.593 C 338.364 114.081,340.015 113.613,343.459 113.606 C 346.655 113.600,346.740 113.574,347.902 112.251 L 349.086 110.902 349.339 92.551 C 349.579 75.202,349.770 71.237,350.340 71.807 C 350.475 71.941,350.678 80.815,350.792 91.526 M64.748 116.090 C 62.940 117.190,62.333 118.047,62.980 118.587 C 63.253 118.814,63.909 119.630,64.438 120.400 L 65.400 121.800 65.600 140.400 C 65.784 157.537,65.860 159.137,66.560 160.741 C 67.546 163.001,67.252 172.245,66.116 174.706 C 65.514 176.009,65.396 178.198,65.193 191.800 C 65.036 202.308,64.803 207.856,64.480 208.797 C 62.728 213.899,64.640 215.483,68.300 211.963 L 70.400 209.943 70.400 194.145 C 70.400 182.240,70.523 178.132,70.900 177.474 C 71.285 176.800,71.418 169.919,71.479 147.454 C 71.564 115.949,71.617 116.777,69.482 116.282 C 68.997 116.169,68.033 115.897,67.341 115.678 C 66.311 115.352,65.838 115.427,64.748 116.090 M339.507 116.572 C 340.370 117.670,341.113 166.809,340.376 174.000 C 340.184 175.870,339.902 184.021,339.749 192.112 C 339.431 209.006,339.566 208.400,336.125 208.400 C 332.293 208.400,332.400 208.897,332.400 191.097 C 332.401 179.064,332.528 175.188,332.999 172.932 C 333.516 170.456,333.549 166.760,333.245 145.932 C 332.822 117.000,332.775 117.707,335.200 116.516 C 337.541 115.367,338.569 115.381,339.507 116.572 M330.343 136.300 C 330.303 149.610,330.178 154.721,329.948 152.400 C 329.763 150.530,329.705 142.070,329.818 133.600 C 329.932 125.130,330.019 117.885,330.012 117.500 C 330.005 117.115,330.090 116.800,330.200 116.800 C 330.310 116.800,330.374 125.575,330.343 136.300 M67.042 118.480 C 66.334 118.876,65.462 118.548,65.794 118.010 C 65.908 117.826,66.381 117.775,66.846 117.896 C 67.582 118.089,67.608 118.164,67.042 118.480 M356.400 120.195 L 357.400 121.264 357.528 139.910 C 357.599 150.375,357.819 158.861,358.028 159.252 C 358.501 160.136,358.519 171.079,358.048 171.370 C 357.286 171.841,357.114 174.338,356.862 188.600 C 356.582 204.402,356.416 205.549,354.400 205.586 C 352.577 205.620,352.316 202.968,352.582 187.114 C 352.720 178.911,352.800 161.030,352.760 147.378 C 352.705 128.819,352.809 122.158,353.174 120.978 C 353.442 120.110,353.734 119.167,353.824 118.883 C 354.033 118.223,355.030 118.731,356.400 120.195 M362.354 138.100 C 362.326 147.743,362.175 153.558,361.977 152.600 C 361.301 149.331,361.538 122.000,362.243 122.000 C 362.329 122.000,362.379 129.245,362.354 138.100 M46.567 125.983 C 46.681 126.762,46.891 137.957,47.032 150.860 C 47.292 174.683,47.198 176.811,45.842 177.685 C 45.540 177.880,45.337 182.378,45.200 191.918 L 45.000 205.867 43.429 207.348 C 40.664 209.954,40.621 209.758,40.472 194.086 C 40.375 183.917,40.474 180.059,40.872 178.400 C 41.282 176.692,41.400 170.293,41.400 149.800 C 41.400 135.280,41.537 123.189,41.704 122.931 C 42.371 121.904,46.332 124.390,46.567 125.983 M38.376 164.000 L 38.153 175.800 38.005 166.000 C 37.720 147.032,37.689 126.987,37.943 125.800 C 38.330 123.993,38.631 150.553,38.376 164.000 M330.394 192.100 C 330.390 202.126,330.254 207.193,330.000 206.800 C 329.329 205.761,329.579 176.800,330.260 176.800 C 330.337 176.800,330.397 183.685,330.394 192.100 M52.244 249.815 C 53.072 250.573,54.112 251.309,54.556 251.449 C 57.030 252.235,57.270 253.364,56.812 262.089 C 56.590 266.330,56.399 274.390,56.389 280.000 C 56.379 285.610,56.224 295.060,56.045 301.000 C 55.866 306.940,55.838 318.100,55.983 325.800 L 56.246 339.800 57.323 341.721 C 57.915 342.778,58.400 343.982,58.400 344.398 C 58.400 344.813,58.580 345.264,58.800 345.400 C 59.875 346.065,58.982 346.436,56.482 346.363 C 50.354 346.184,50.669 344.444,51.446 374.200 C 51.783 387.092,53.256 390.423,57.558 388.016 C 59.217 387.087,59.334 388.128,59.235 402.921 C 59.184 410.648,59.041 417.134,58.917 417.334 C 58.793 417.535,58.648 424.921,58.595 433.749 C 58.375 469.969,58.424 480.011,58.824 481.063 C 59.367 482.492,58.838 482.786,55.706 482.794 C 53.521 482.799,53.051 482.944,51.906 483.967 L 50.600 485.134 50.610 490.067 C 50.615 492.952,50.826 495.595,51.118 496.433 C 51.536 497.631,51.509 498.287,50.955 500.433 C 50.396 502.596,50.326 504.416,50.511 512.005 C 50.786 523.307,51.205 524.484,55.140 525.013 C 58.205 525.425,59.025 525.789,58.806 526.643 C 58.213 528.961,58.638 614.652,59.251 616.436 C 60.259 619.364,58.813 620.336,53.380 620.383 C 50.309 620.409,50.400 620.755,50.400 609.020 C 50.399 596.478,49.765 592.107,47.729 590.600 C 47.291 590.276,47.399 589.896,48.294 588.600 L 49.400 587.000 49.437 544.400 C 49.478 498.194,49.609 501.061,47.359 498.941 L 46.448 498.083 47.589 497.208 C 49.683 495.604,49.643 496.478,49.157 462.800 C 48.403 410.503,48.289 379.341,48.798 364.400 C 49.056 356.810,49.215 349.160,49.151 347.400 C 48.758 336.633,49.197 249.570,49.656 247.200 L 50.159 244.600 50.449 246.518 C 50.677 248.029,51.059 248.729,52.244 249.815 M338.723 247.700 C 340.052 250.308,341.424 257.025,341.015 258.923 C 340.911 259.405,340.735 276.990,340.624 298.000 C 340.385 343.069,340.380 343.122,336.549 340.688 C 333.068 338.476,333.414 342.805,333.288 299.927 C 333.226 279.033,333.323 261.097,333.504 260.069 C 333.684 259.041,333.694 257.300,333.526 256.200 C 332.835 251.686,337.155 244.621,338.723 247.700 M330.372 250.700 C 330.347 251.660,330.303 251.698,330.022 251.000 C 329.845 250.560,329.778 250.065,329.874 249.900 C 330.212 249.314,330.400 249.615,330.372 250.700 M63.487 251.500 C 64.416 252.878,65.017 254.182,65.601 256.094 C 65.853 256.916,66.180 257.664,66.329 257.756 C 66.478 257.848,66.486 260.235,66.346 263.061 C 66.082 268.394,65.918 286.791,65.943 308.200 C 65.951 315.020,65.923 324.920,65.879 330.200 L 65.800 339.800 64.669 342.102 C 62.860 345.788,61.574 345.759,59.990 342.000 C 59.356 340.496,59.079 255.840,59.700 253.565 C 60.472 250.738,62.301 249.741,63.487 251.500 M330.537 338.553 C 329.692 342.904,329.401 336.239,329.899 323.964 L 330.198 316.600 330.479 327.000 C 330.634 332.720,330.660 337.919,330.537 338.553 M129.400 333.728 C 128.136 334.688,130.004 334.949,135.515 334.583 C 140.830 334.230,140.231 333.805,133.800 333.367 C 130.920 333.170,130.040 333.243,129.400 333.728 M267.800 334.000 C 267.226 334.247,267.656 334.352,269.324 334.372 C 270.777 334.389,271.555 334.250,271.400 334.000 C 271.103 333.520,268.917 333.520,267.800 334.000 M276.500 337.288 C 275.564 337.740,275.360 338.369,275.937 339.020 C 277.073 340.303,277.286 344.543,277.233 364.889 C 277.180 385.082,277.100 386.539,275.991 387.600 C 274.099 389.408,274.202 392.613,276.268 396.235 C 277.189 397.851,277.200 398.015,277.195 410.235 C 277.193 417.036,277.407 426.407,277.672 431.059 C 278.259 441.348,277.848 446.650,276.225 449.768 C 275.661 450.850,275.200 452.029,275.200 452.388 C 275.200 452.747,275.019 453.221,274.798 453.442 C 274.529 453.711,275.037 454.509,276.337 455.857 L 278.277 457.870 278.539 464.635 C 278.812 471.666,278.821 474.613,278.630 494.600 C 278.502 507.999,278.292 509.410,276.110 511.470 C 274.199 513.274,273.189 513.326,246.556 512.983 C 213.683 512.560,207.140 512.630,204.152 513.433 C 201.984 514.015,201.345 514.028,198.552 513.546 C 196.226 513.145,192.308 513.040,183.600 513.147 C 135.580 513.737,126.631 513.483,124.500 511.471 L 123.200 510.243 123.249 499.022 C 123.277 492.850,123.412 481.410,123.549 473.600 L 123.800 459.400 124.869 457.119 C 125.746 455.248,126.176 454.771,127.269 454.461 L 128.600 454.084 127.310 453.794 C 126.345 453.577,125.740 453.036,124.910 451.652 L 123.800 449.800 123.688 423.863 L 123.576 397.927 124.799 395.940 C 126.245 393.590,126.167 390.976,124.569 388.200 C 123.332 386.051,122.369 369.853,122.739 357.400 C 122.811 354.980,122.741 351.423,122.584 349.495 C 122.408 347.326,122.463 345.343,122.730 344.295 C 122.967 343.363,123.269 341.757,123.401 340.726 C 123.604 339.146,123.810 338.797,124.720 338.493 C 125.753 338.149,125.725 338.122,124.049 337.854 C 122.376 337.587,122.236 337.644,120.812 339.187 C 119.993 340.074,119.021 340.800,118.653 340.800 C 117.963 340.800,117.621 341.434,116.819 344.200 C 116.472 345.397,116.414 360.144,116.590 402.800 C 116.916 482.407,116.997 511.510,116.895 513.600 C 116.688 517.854,117.175 572.213,117.618 594.400 C 118.009 613.944,118.003 619.601,117.589 623.800 C 116.700 632.813,116.971 699.055,117.906 701.271 C 118.155 701.861,119.403 703.120,120.679 704.069 C 121.956 705.019,123.090 705.896,123.200 706.019 C 124.249 707.191,126.564 708.069,127.725 707.736 C 129.754 707.154,129.528 706.239,126.930 704.520 L 124.612 702.986 124.141 699.593 C 123.828 697.337,123.658 688.416,123.635 672.973 L 123.600 649.745 124.886 648.073 C 125.875 646.785,126.451 646.392,127.386 646.367 L 128.600 646.335 127.335 645.781 C 126.384 645.364,125.739 644.554,124.735 642.513 L 123.400 639.800 123.437 633.200 C 123.639 597.516,123.968 585.507,124.785 583.940 C 126.029 581.552,126.283 578.334,125.337 576.934 C 123.608 574.373,123.632 574.750,123.454 547.800 C 123.269 519.674,123.323 518.550,124.944 516.858 C 126.991 514.722,128.117 514.663,163.386 514.835 C 180.994 514.921,196.778 514.834,198.461 514.640 C 200.799 514.372,202.501 514.449,205.661 514.965 C 208.978 515.506,211.389 515.597,217.800 515.421 C 222.200 515.300,236.650 515.103,249.911 514.983 L 274.023 514.765 276.361 516.405 L 278.699 518.045 278.892 526.122 C 278.998 530.565,278.918 535.313,278.715 536.673 C 278.512 538.034,278.455 541.004,278.588 543.273 C 278.721 545.543,278.920 553.420,279.031 560.778 L 279.231 574.155 277.929 575.175 C 274.651 577.740,276.207 577.595,251.301 577.657 C 238.816 577.688,224.010 577.823,218.400 577.957 L 208.200 578.200 222.765 578.500 C 230.776 578.665,245.626 578.800,255.765 578.800 L 274.200 578.801 275.400 579.804 C 276.060 580.356,276.997 581.121,277.482 581.504 C 277.966 581.887,278.371 582.479,278.382 582.820 C 278.392 583.161,278.584 583.624,278.809 583.849 C 279.641 584.681,279.994 591.389,279.997 606.427 C 280.000 621.697,279.808 624.603,278.550 628.376 C 278.157 629.555,277.982 631.523,278.028 634.234 C 278.097 638.241,277.138 641.600,275.926 641.600 C 274.724 641.600,275.661 646.161,277.254 648.064 L 278.908 650.040 279.183 674.320 C 279.446 697.545,279.354 700.400,278.341 700.400 C 278.159 700.400,277.736 701.057,277.401 701.859 C 276.761 703.391,275.776 704.366,274.847 704.387 C 272.338 704.445,271.292 706.716,273.221 707.920 C 274.322 708.608,278.773 706.679,279.805 705.067 C 280.248 704.375,280.956 703.742,281.377 703.661 C 284.416 703.076,284.437 702.821,284.242 668.767 C 283.997 626.033,283.988 627.011,284.649 622.726 C 285.300 618.508,285.240 604.254,284.335 548.000 C 284.047 530.140,284.033 519.781,284.292 517.400 C 284.537 515.153,284.549 512.447,284.322 510.200 C 284.121 508.202,284.064 497.164,284.195 485.400 C 284.513 456.798,284.520 433.455,284.218 409.000 C 284.079 397.780,283.838 378.143,283.683 365.361 C 283.442 345.600,283.310 342.010,282.800 341.374 C 280.979 339.102,280.515 338.565,279.642 337.724 C 278.599 336.719,277.886 336.620,276.500 337.288 M119.395 362.400 C 119.617 370.042,119.937 373.336,120.795 376.800 C 120.985 377.570,121.319 379.934,121.537 382.053 C 121.806 384.673,122.254 386.593,122.936 388.053 C 124.525 391.450,124.651 393.429,123.426 395.721 C 122.862 396.778,122.400 398.275,122.400 399.047 C 122.400 399.820,122.201 400.824,121.959 401.277 C 121.637 401.879,121.638 402.365,121.963 403.079 C 122.274 403.760,122.410 411.072,122.413 427.234 C 122.419 451.390,122.487 452.440,124.137 453.646 C 124.322 453.782,124.289 454.232,124.063 454.646 C 123.017 456.562,122.400 458.202,122.400 459.061 C 122.400 461.942,118.462 457.209,117.930 453.690 C 117.442 450.458,117.368 367.177,117.842 354.600 L 118.159 346.200 118.658 350.200 C 118.932 352.400,119.264 357.890,119.395 362.400 M282.776 422.600 C 282.833 462.938,282.389 494.081,281.900 484.036 C 281.735 480.646,281.600 473.400,281.600 467.933 L 281.600 457.993 280.500 456.859 C 279.895 456.236,278.900 455.404,278.290 455.010 C 277.468 454.480,277.238 454.075,277.404 453.447 C 278.050 451.007,278.555 449.600,278.787 449.600 C 280.263 449.600,280.540 446.320,279.967 435.613 C 279.624 429.186,279.451 419.735,279.529 411.652 L 279.657 398.304 278.668 397.252 C 275.790 394.192,275.863 387.972,278.797 386.402 C 279.838 385.845,280.047 384.557,280.423 376.400 C 281.006 363.749,281.538 355.466,281.876 353.800 C 282.330 351.560,282.717 381.166,282.776 422.600 M65.100 385.868 C 64.360 386.070,64.013 390.400,64.736 390.400 C 64.921 390.400,65.574 391.320,66.186 392.445 L 67.299 394.490 67.210 406.545 C 67.161 413.175,67.243 432.134,67.391 448.675 C 67.696 482.565,67.803 481.145,64.870 481.926 C 63.669 482.246,63.586 482.325,64.415 482.359 C 64.974 482.381,66.137 482.760,67.000 483.200 C 68.986 484.212,69.774 484.205,71.466 483.159 L 72.826 482.319 72.567 436.086 C 72.265 381.951,72.664 386.337,68.000 385.888 C 66.790 385.772,65.485 385.763,65.100 385.868 M331.164 387.700 C 330.983 388.635,330.809 397.050,330.778 406.400 C 330.747 415.750,330.599 424.390,330.451 425.600 L 330.180 427.800 329.893 425.000 C 329.540 421.563,329.503 388.984,329.850 387.250 C 330.015 386.424,330.336 386.000,330.796 386.000 C 331.400 386.000,331.449 386.225,331.164 387.700 M70.775 389.353 C 71.293 390.321,71.279 398.105,70.686 438.800 C 70.572 446.610,70.461 459.615,70.439 467.700 C 70.414 477.022,70.256 482.400,70.007 482.400 C 69.754 482.400,69.617 472.418,69.620 454.300 C 69.623 437.334,69.454 424.298,69.193 421.400 C 68.955 418.760,68.792 411.560,68.832 405.400 C 68.901 394.625,68.714 391.529,67.933 390.541 C 67.693 390.237,67.932 389.797,68.639 389.241 C 69.988 388.180,70.152 388.188,70.775 389.353 M251.253 389.945 C 250.380 390.190,250.456 390.286,252.211 391.163 C 254.218 392.165,259.927 392.203,263.600 391.238 C 264.370 391.036,265.900 390.728,267.000 390.554 L 269.000 390.237 266.400 389.965 C 263.044 389.614,252.483 389.600,251.253 389.945 M130.942 390.397 C 130.470 390.587,129.336 391.521,128.421 392.471 L 126.758 394.200 130.287 394.454 C 132.228 394.594,135.668 394.594,137.933 394.454 L 142.051 394.200 141.245 393.400 C 138.061 390.241,134.152 389.101,130.942 390.397 M171.800 454.000 C 171.324 454.204,174.893 454.344,180.600 454.344 C 186.307 454.344,189.876 454.204,189.400 454.000 C 188.960 453.811,185.000 453.656,180.600 453.656 C 176.200 453.656,172.240 453.811,171.800 454.000 M353.273 492.800 C 355.640 492.800,355.362 496.131,352.958 496.582 C 351.585 496.839,350.573 497.766,350.316 499.000 C 350.027 500.392,349.519 493.665,349.791 492.052 L 350.051 490.513 351.195 491.656 C 351.824 492.285,352.759 492.800,353.273 492.800 M358.713 500.010 C 359.106 500.639,359.216 505.812,359.205 523.110 C 359.197 535.370,359.369 547.470,359.588 550.000 C 360.134 556.292,360.123 581.624,359.575 583.066 C 358.900 584.842,358.337 584.886,356.848 583.279 L 355.476 581.800 355.298 565.800 C 355.155 552.975,355.008 549.623,354.557 548.910 C 353.742 547.620,353.080 542.189,353.399 539.400 C 353.549 538.080,353.651 529.075,353.625 519.388 L 353.576 501.777 355.688 500.524 C 358.264 498.996,358.098 499.024,358.713 500.010 M47.021 501.376 C 48.060 502.962,48.128 585.734,47.091 587.317 C 46.273 588.565,44.658 588.777,44.166 587.700 C 43.519 586.285,42.866 509.302,43.458 504.182 C 43.702 502.071,44.193 501.088,45.200 500.696 C 46.203 500.306,46.358 500.364,47.021 501.376 M362.347 525.900 C 362.317 539.265,362.161 549.300,361.999 548.200 C 361.720 546.303,361.973 501.600,362.262 501.600 C 362.338 501.600,362.376 512.535,362.347 525.900 M282.854 511.674 C 283.216 513.760,283.209 514.740,282.819 516.133 L 282.319 517.918 280.601 516.759 C 279.657 516.122,278.689 515.600,278.452 515.600 C 278.214 515.600,277.472 515.267,276.802 514.860 L 275.585 514.119 277.092 513.116 C 277.922 512.564,279.259 511.722,280.064 511.246 C 281.348 510.486,281.568 510.123,281.854 508.290 C 282.144 506.429,282.192 506.353,282.284 507.600 C 282.342 508.370,282.598 510.203,282.854 511.674 M123.732 512.648 L 125.400 514.096 123.694 515.848 C 121.685 517.912,121.351 517.963,119.672 516.464 C 117.748 514.747,118.279 512.404,120.800 511.482 C 121.849 511.099,122.031 511.171,123.732 512.648 M224.000 513.965 C 225.728 514.459,219.376 514.804,214.169 514.499 C 210.657 514.293,209.822 514.153,211.000 513.967 C 213.211 513.617,222.778 513.616,224.000 513.965 M351.422 546.400 C 351.528 560.370,351.788 574.203,352.000 577.139 L 352.384 582.478 354.039 584.133 C 356.317 586.411,355.951 591.050,353.309 593.413 C 352.409 594.217,352.400 594.329,352.400 604.267 C 352.400 614.591,352.298 615.359,350.714 616.943 C 350.349 617.308,349.949 617.442,349.825 617.241 C 349.701 617.039,348.708 616.752,347.619 616.603 C 346.310 616.423,345.308 615.999,344.662 615.353 L 343.684 614.375 344.542 612.688 C 345.501 610.801,345.542 606.822,345.045 563.800 C 344.926 553.460,344.777 540.260,344.714 534.466 L 344.600 523.931 343.537 523.016 L 342.473 522.102 344.604 521.851 C 348.200 521.428,349.919 519.905,350.034 517.040 C 350.052 516.578,350.329 517.280,350.648 518.600 C 351.114 520.521,351.268 526.064,351.422 546.400 M339.803 523.831 C 341.477 525.659,341.766 528.010,341.412 536.925 C 341.239 541.261,341.312 544.325,341.632 546.200 C 341.918 547.876,342.245 556.867,342.446 568.600 C 342.630 579.380,342.886 593.164,343.014 599.231 L 343.246 610.262 341.423 612.290 C 340.420 613.405,339.599 614.561,339.597 614.859 C 339.596 615.156,339.250 615.923,338.829 616.561 L 338.064 617.722 337.615 615.961 C 337.369 614.993,336.814 613.321,336.384 612.247 C 335.650 610.418,335.598 609.189,335.561 593.047 C 335.540 583.561,335.338 568.780,335.111 560.200 C 334.389 532.807,334.691 525.593,336.643 523.555 C 338.049 522.087,338.219 522.102,339.803 523.831 M70.400 557.067 C 70.400 574.153,70.302 588.035,70.182 587.916 C 69.838 587.571,69.746 526.000,70.091 526.000 C 70.261 526.000,70.400 539.980,70.400 557.067 M282.818 574.622 C 283.603 575.568,283.711 578.993,283.048 581.911 C 282.691 583.477,282.379 585.712,282.354 586.879 C 282.303 589.181,282.292 589.151,281.611 584.961 C 281.118 581.930,280.116 580.388,277.670 578.901 L 276.463 578.167 278.421 577.066 C 281.741 575.200,281.600 575.903,281.600 561.174 C 281.600 553.997,281.735 545.892,281.900 543.163 C 282.118 539.550,282.228 543.085,282.304 556.164 C 282.371 567.680,282.555 574.305,282.818 574.622 M38.294 546.300 C 38.212 547.345,38.144 546.490,38.144 544.400 C 38.144 542.310,38.212 541.455,38.294 542.500 C 38.376 543.545,38.376 545.255,38.294 546.300 M122.923 576.300 C 123.803 578.754,123.784 581.309,122.867 583.912 L 122.134 585.994 121.317 585.097 C 119.200 582.772,118.849 578.060,120.620 575.738 C 121.947 573.999,122.113 574.040,122.923 576.300 M176.600 578.000 C 175.940 578.168,179.900 578.298,185.400 578.289 C 192.770 578.277,194.453 578.196,191.800 577.979 C 187.125 577.597,178.136 577.609,176.600 578.000 M162.100 578.276 C 162.485 578.376,163.115 578.376,163.500 578.276 C 163.885 578.175,163.570 578.093,162.800 578.093 C 162.030 578.093,161.715 578.175,162.100 578.276 M334.895 613.454 C 335.057 613.703,334.950 614.601,334.657 615.447 L 334.124 616.987 333.638 615.515 C 333.275 614.415,333.259 613.460,333.576 611.747 C 333.809 610.486,334.040 604.671,334.089 598.827 L 334.178 588.200 334.389 600.600 C 334.505 607.420,334.733 613.204,334.895 613.454 M71.194 618.057 C 71.202 618.418,69.993 618.843,69.617 618.611 C 69.446 618.505,69.494 617.601,69.722 616.602 L 70.138 614.785 70.663 616.293 C 70.952 617.122,71.191 617.916,71.194 618.057 M51.184 661.000 C 51.414 662.760,51.601 669.077,51.601 675.039 C 51.600 686.297,51.748 687.429,53.404 688.803 C 54.195 689.460,56.600 688.981,57.532 687.981 C 58.241 687.220,58.273 687.350,58.710 692.719 C 59.215 698.933,59.499 699.980,60.936 700.921 C 62.200 701.749,64.390 700.998,65.456 699.370 L 66.129 698.344 66.664 699.618 C 67.945 702.664,67.779 702.745,60.168 702.776 C 51.744 702.810,51.215 703.324,51.203 711.474 C 51.199 714.337,51.518 715.341,52.958 717.000 C 54.479 718.753,54.435 721.689,52.860 723.532 C 50.372 726.443,50.808 740.023,53.539 744.693 C 54.410 746.182,55.254 747.850,55.415 748.400 C 55.576 748.950,55.899 749.522,56.133 749.672 C 56.776 750.084,54.770 751.576,53.600 751.556 C 50.049 751.495,47.998 748.360,48.872 744.326 C 49.088 743.326,49.312 720.467,49.403 690.000 C 49.573 632.859,49.951 616.066,50.471 642.600 C 50.634 650.960,50.955 659.240,51.184 661.000 M350.297 636.882 C 350.221 638.487,350.158 637.280,350.158 634.200 C 350.157 631.120,350.219 629.807,350.296 631.282 C 350.373 632.758,350.373 635.278,350.297 636.882 M282.606 640.100 C 282.770 640.815,282.876 642.660,282.842 644.200 C 282.809 645.740,282.647 658.790,282.482 673.200 C 282.318 687.610,282.110 699.130,282.021 698.800 C 281.932 698.470,281.846 687.310,281.829 674.000 C 281.798 648.076,281.828 648.483,279.826 646.822 C 278.619 645.820,278.982 641.927,280.400 640.663 C 281.060 640.075,281.600 639.415,281.600 639.197 C 281.600 638.254,282.335 638.914,282.606 640.100 M123.065 643.804 L 123.929 646.007 123.065 647.596 C 121.384 650.684,118.023 647.835,119.415 644.503 C 120.827 641.123,121.929 640.912,123.065 643.804 M327.303 645.836 C 327.433 645.966,327.283 646.799,326.969 647.686 C 326.656 648.574,326.377 649.953,326.348 650.750 C 326.313 651.728,326.143 651.223,325.825 649.200 C 325.565 647.550,325.419 646.065,325.500 645.900 C 325.675 645.544,326.965 645.498,327.303 645.836 M62.956 653.064 C 62.674 654.789,62.433 657.001,62.421 657.980 C 62.406 659.236,62.275 659.635,61.975 659.335 C 61.296 658.656,60.988 650.344,61.599 649.202 L 62.110 648.248 62.790 649.088 C 63.404 649.846,63.420 650.233,62.956 653.064 M350.341 666.300 C 350.305 673.678,350.169 677.288,349.985 675.800 C 349.413 671.194,349.628 654.400,350.258 654.400 C 350.336 654.400,350.374 659.755,350.341 666.300 M74.292 662.112 C 74.208 663.040,74.141 662.180,74.142 660.200 C 74.143 658.220,74.212 657.460,74.295 658.512 C 74.377 659.564,74.376 661.184,74.292 662.112 M343.263 672.225 C 343.385 681.846,343.327 683.123,342.743 683.710 C 342.132 684.325,342.069 684.309,341.848 683.486 C 341.526 682.285,341.543 660.998,341.867 659.034 L 342.126 657.468 342.626 659.434 C 342.945 660.687,343.176 665.324,343.263 672.225 M330.512 670.697 C 330.404 671.191,330.154 671.495,329.957 671.374 C 329.525 671.107,329.476 663.168,329.900 662.133 C 330.246 661.288,330.819 669.305,330.512 670.697 M70.773 679.400 C 70.800 682.360,70.353 684.781,69.962 683.783 C 69.572 682.784,69.524 677.888,69.885 675.800 L 70.162 674.200 70.458 675.800 C 70.621 676.680,70.762 678.300,70.773 679.400 M351.142 686.600 C 352.224 693.613,351.291 702.429,349.708 700.158 C 348.850 698.926,343.020 698.181,340.123 698.932 C 337.116 699.712,335.401 697.881,337.706 696.351 C 338.211 696.017,340.673 696.596,341.435 697.229 C 343.244 698.730,344.803 694.941,345.175 688.140 C 345.189 687.886,345.974 686.896,346.920 685.940 C 349.355 683.477,349.991 682.298,350.065 680.114 C 350.122 678.422,350.163 678.525,350.420 681.000 C 350.579 682.540,350.904 685.060,351.142 686.600 M334.747 688.600 C 334.800 691.127,334.428 692.686,333.951 691.934 C 333.536 691.280,333.490 685.946,333.889 684.933 C 334.269 683.969,334.688 685.758,334.747 688.600 M122.388 702.545 C 121.441 703.573,121.092 702.173,121.316 698.241 C 121.662 692.154,122.157 691.788,122.453 697.400 C 122.592 700.040,122.563 702.355,122.388 702.545 M129.836 709.452 C 129.706 709.789,129.600 710.141,129.600 710.233 C 129.600 710.325,130.635 710.384,131.900 710.364 C 134.079 710.330,134.126 710.308,132.800 709.957 C 132.030 709.754,131.101 709.418,130.736 709.212 C 130.256 708.942,130.005 709.009,129.836 709.452 M226.923 710.180 C 227.965 711.222,228.078 713.963,227.205 716.999 C 226.607 719.079,226.383 721.133,226.336 724.999 L 226.271 730.200 225.966 725.200 C 225.653 720.082,225.409 718.766,224.182 715.569 C 222.977 712.431,225.067 708.324,226.923 710.180 M179.419 711.058 C 180.662 712.400,180.658 713.718,179.400 716.562 C 178.850 717.805,178.397 719.493,178.394 720.311 C 178.389 721.420,178.289 721.647,178.000 721.200 C 177.787 720.870,177.609 720.059,177.606 719.397 C 177.603 718.735,177.150 717.348,176.600 716.315 C 175.257 713.792,175.339 712.970,177.162 710.700 C 177.918 709.759,178.266 709.814,179.419 711.058 M351.863 715.834 L 352.540 717.981 351.470 720.096 C 349.645 723.703,349.943 734.122,352.011 739.000 C 353.476 742.458,352.932 746.900,350.799 748.887 C 350.050 749.584,349.976 749.555,348.314 747.898 L 346.600 746.190 346.928 743.795 C 347.221 741.654,348.180 738.941,348.834 738.400 C 349.208 738.091,350.000 729.354,350.000 725.539 L 350.000 722.125 348.028 720.463 C 343.720 716.830,342.725 718.161,342.392 728.000 L 342.156 735.000 342.078 726.539 L 342.000 718.079 344.313 717.810 C 346.964 717.502,348.923 716.115,349.650 714.029 C 350.230 712.364,350.956 712.955,351.863 715.834 M58.777 721.500 C 59.463 722.147,59.474 722.313,58.925 723.679 L 58.331 725.158 56.388 723.679 C 53.823 721.726,53.768 720.800,56.217 720.800 C 57.397 720.800,58.294 721.045,58.777 721.500 M179.108 756.400 C 181.855 764.450,181.345 764.268,202.088 764.629 L 218.728 764.919 220.571 763.760 C 222.426 762.593,225.600 757.416,225.600 755.559 C 225.600 754.089,226.281 754.510,226.961 756.399 C 227.836 758.833,229.769 760.930,231.737 761.579 C 232.954 761.981,233.149 762.179,232.772 762.633 C 232.517 762.941,232.085 763.843,231.811 764.639 C 231.139 766.593,227.727 767.873,224.600 767.345 C 222.137 766.928,185.191 766.978,180.137 767.404 C 177.604 767.618,175.877 767.562,174.537 767.221 C 172.143 766.612,161.565 766.620,152.200 767.237 C 146.484 767.614,145.085 767.594,143.421 767.107 C 139.109 765.846,141.736 764.951,150.810 764.590 C 154.434 764.446,158.445 764.173,159.723 763.983 C 161.106 763.777,162.441 763.788,163.025 764.009 C 172.243 767.514,178.390 761.155,177.754 748.772 C 177.611 746.007,177.654 741.597,177.848 738.972 C 178.193 734.289,178.204 734.394,178.415 744.600 C 178.549 751.041,178.812 755.533,179.108 756.400 M346.517 738.795 C 346.401 739.238,346.151 739.600,345.961 739.600 C 345.338 739.600,345.121 737.695,345.636 736.737 L 346.139 735.800 346.434 736.895 C 346.595 737.497,346.633 738.352,346.517 738.795 M54.287 739.495 C 54.195 740.103,54.117 739.700,54.114 738.600 C 54.111 737.500,54.187 737.003,54.282 737.495 C 54.377 737.986,54.379 738.886,54.287 739.495 M58.786 741.974 C 59.408 743.137,59.303 746.617,58.628 747.177 C 57.966 747.726,57.200 746.673,57.200 745.212 C 57.200 744.093,56.059 742.400,55.305 742.400 C 54.814 742.400,54.795 742.288,55.200 741.800 C 55.937 740.912,58.278 741.026,58.786 741.974 M226.295 748.087 C 226.214 749.249,226.147 748.400,226.146 746.200 C 226.145 744.000,226.211 743.049,226.293 744.087 C 226.376 745.124,226.376 746.924,226.295 748.087 M313.650 757.876 C 316.874 758.535,310.649 759.068,306.400 758.497 L 304.200 758.201 306.400 757.966 C 309.790 757.603,312.170 757.573,313.650 757.876 M280.132 760.209 C 285.477 760.878,288.772 761.526,289.420 762.035 C 289.651 762.216,290.591 762.485,291.510 762.632 C 293.097 762.886,295.200 764.765,295.200 765.929 C 295.200 767.139,278.653 766.892,275.800 765.640 C 274.920 765.254,272.670 764.627,270.800 764.246 C 267.773 763.630,264.800 762.623,264.800 762.215 C 264.800 762.061,268.993 760.793,271.800 760.098 C 274.108 759.526,274.736 759.534,280.132 760.209 M108.000 761.885 C 111.503 762.328,108.851 762.698,101.800 762.749 C 95.138 762.798,91.237 762.476,92.072 761.947 C 92.710 761.542,104.914 761.495,108.000 761.885 M126.954 764.738 C 127.155 765.440,127.201 766.132,127.056 766.277 C 126.645 766.689,118.326 766.933,115.738 766.610 L 113.413 766.319 114.319 765.585 C 115.352 764.749,118.022 764.124,122.621 763.644 C 126.600 763.228,126.515 763.207,126.954 764.738 M73.000 765.600 C 72.280 766.395,72.301 766.400,76.738 766.400 C 79.192 766.400,81.200 766.256,81.200 766.080 C 81.200 764.558,74.308 764.155,73.000 765.600 M177.200 773.981 C 176.278 774.258,176.325 774.304,177.800 774.572 C 178.680 774.731,179.922 775.028,180.560 775.231 C 182.309 775.788,184.436 775.677,186.629 774.916 C 188.586 774.236,188.591 774.229,187.400 773.963 C 185.762 773.597,178.434 773.609,177.200 773.981 " stroke="none" fill="#bfbfbf" fill-rule="evenodd"></path><path id="path3" d="M186.800 21.330 C 186.030 21.589,185.163 21.953,184.873 22.140 C 183.972 22.722,176.780 23.171,161.200 23.618 C 144.269 24.103,139.915 24.452,136.888 25.564 C 135.420 26.103,133.222 26.414,129.688 26.584 C 117.777 27.155,110.296 28.173,107.600 29.590 C 106.830 29.994,104.940 30.437,103.400 30.573 C 93.493 31.449,90.938 31.715,87.000 32.277 C 84.580 32.622,82.022 33.231,81.315 33.630 C 80.609 34.029,78.854 34.635,77.415 34.978 C 75.977 35.320,73.585 35.887,72.100 36.237 C 70.615 36.587,69.040 37.196,68.600 37.590 C 68.160 37.984,67.260 38.586,66.600 38.927 C 65.228 39.637,63.200 41.461,63.200 41.985 C 63.200 42.179,62.562 42.549,61.782 42.806 C 60.323 43.287,58.400 45.026,58.400 45.864 C 58.400 46.124,57.892 46.448,57.270 46.585 C 54.227 47.253,51.102 51.675,50.597 56.030 C 50.395 57.765,49.995 58.984,49.350 59.830 C 48.828 60.515,48.400 61.338,48.400 61.658 C 48.400 61.978,48.230 62.411,48.023 62.620 C 47.668 62.978,47.038 66.952,46.520 72.100 C 46.393 73.365,46.142 74.400,45.963 74.400 C 44.266 74.400,43.627 80.505,43.612 96.844 C 43.596 115.142,43.497 115.600,39.534 115.600 C 37.214 115.600,33.791 119.676,32.813 123.602 C 32.367 125.392,32.488 151.348,33.011 166.293 C 33.214 172.085,33.150 173.083,32.419 175.536 C 31.412 178.918,31.143 205.652,32.100 207.241 C 33.627 209.778,36.573 212.030,39.462 212.870 C 43.583 214.067,43.320 212.601,43.692 236.400 C 44.102 262.692,44.084 259.350,44.061 304.800 C 44.048 330.289,44.193 345.683,44.473 348.400 C 44.710 350.710,44.926 356.740,44.952 361.800 C 44.993 369.568,45.105 371.203,45.672 372.306 C 46.552 374.014,46.904 448.710,46.038 449.754 C 45.670 450.198,45.653 450.726,45.971 451.873 C 46.494 453.756,46.562 484.252,46.044 484.573 C 45.849 484.693,45.560 486.938,45.402 489.560 C 45.168 493.468,44.997 494.367,44.458 494.543 C 37.806 496.707,36.378 497.549,34.885 500.190 C 33.916 501.903,33.681 528.944,34.309 566.600 C 34.700 590.070,34.774 590.360,40.800 592.210 C 42.010 592.581,43.736 593.149,44.636 593.472 L 46.272 594.060 46.525 607.130 C 46.803 621.460,46.588 626.918,45.694 628.297 C 44.765 629.729,44.641 635.206,45.416 640.600 C 46.322 646.910,46.908 700.874,46.339 725.600 C 45.958 742.116,46.100 749.330,46.855 752.000 C 47.621 754.704,48.489 756.313,49.466 756.835 C 50.008 757.125,50.862 758.051,51.364 758.893 C 52.474 760.754,56.787 763.874,58.991 764.409 C 61.907 765.118,63.384 765.707,64.638 766.659 C 65.319 767.177,66.163 767.600,66.514 767.600 C 66.865 767.600,67.251 767.759,67.371 767.953 C 67.491 768.148,68.627 768.431,69.895 768.584 C 73.581 769.027,75.611 769.629,78.600 771.163 L 81.400 772.600 109.800 772.868 C 141.528 773.168,145.231 773.321,148.387 774.463 C 151.130 775.455,153.223 775.853,158.548 776.395 C 160.869 776.631,164.351 777.161,166.285 777.573 C 168.218 777.985,170.880 778.452,172.200 778.610 C 173.520 778.769,174.780 779.026,175.000 779.182 C 177.063 780.645,191.991 780.829,195.600 779.436 C 201.402 777.198,202.721 777.197,208.400 779.424 C 210.725 780.335,217.497 780.647,221.548 780.028 C 224.488 779.579,225.179 779.373,227.800 778.161 C 229.209 777.509,233.730 776.819,236.664 776.808 C 237.838 776.803,240.257 776.300,242.275 775.641 C 247.330 773.989,255.184 773.009,266.422 772.628 C 271.574 772.453,275.929 771.785,277.252 770.968 C 278.627 770.118,282.543 769.897,301.400 769.606 C 327.319 769.206,330.426 768.880,334.593 766.122 C 335.689 765.396,337.489 764.504,338.593 764.139 C 339.697 763.774,341.230 763.086,342.000 762.610 C 342.770 762.134,344.210 761.429,345.200 761.045 C 346.190 760.660,347.630 759.851,348.400 759.245 C 349.170 758.640,350.382 757.805,351.094 757.390 C 351.805 756.975,352.690 755.997,353.059 755.218 C 353.429 754.438,354.467 753.080,355.365 752.200 L 356.999 750.600 357.044 728.800 C 357.068 716.810,356.954 689.478,356.789 668.062 C 356.543 636.038,356.587 628.439,357.037 625.262 C 357.415 622.595,357.587 617.047,357.592 607.327 L 357.600 593.254 358.900 592.339 C 359.615 591.835,360.648 591.013,361.196 590.511 C 361.744 590.010,362.425 589.600,362.710 589.600 C 363.356 589.600,365.111 588.485,366.298 587.321 C 368.414 585.246,368.482 584.398,368.259 562.652 C 368.145 551.623,368.086 541.070,368.126 539.200 C 368.336 529.509,368.123 501.172,367.830 499.686 C 367.453 497.781,364.742 494.988,362.833 494.538 C 362.265 494.405,361.440 493.980,361.000 493.594 C 360.560 493.209,359.654 492.618,358.986 492.281 C 356.820 491.188,356.844 491.435,356.662 468.200 C 356.568 456.320,356.426 442.730,356.346 438.000 L 356.200 429.400 355.000 427.032 L 353.800 424.663 353.800 389.632 C 353.800 357.445,353.855 354.486,354.481 353.200 C 355.622 350.856,356.147 255.868,355.050 250.301 C 354.599 248.012,354.365 242.917,354.157 230.816 L 353.875 214.431 355.520 212.786 C 356.424 211.881,357.261 210.839,357.379 210.471 C 357.521 210.028,358.567 209.559,360.460 209.089 C 365.675 207.795,365.596 208.077,365.613 190.650 C 365.625 178.416,365.687 177.231,366.427 175.200 C 367.595 171.988,367.842 164.637,367.056 156.400 C 366.710 152.770,366.317 143.320,366.182 135.400 C 365.860 116.511,365.629 115.397,361.864 114.570 C 360.325 114.232,358.052 112.901,356.742 111.570 C 356.160 110.978,355.485 110.428,355.243 110.347 C 353.896 109.897,353.235 83.451,354.500 80.651 C 355.408 78.641,355.389 75.904,354.448 73.400 C 354.035 72.300,353.566 69.960,353.406 68.200 C 353.093 64.758,351.713 60.517,350.472 59.186 C 350.012 58.691,349.603 57.485,349.447 56.165 C 349.159 53.715,347.683 51.007,346.415 50.605 C 345.967 50.462,345.600 50.017,345.600 49.614 C 345.600 48.887,343.118 46.400,342.391 46.400 C 342.182 46.400,341.752 45.781,341.436 45.024 C 341.097 44.214,340.191 43.225,339.231 42.619 C 338.334 42.053,337.600 41.336,337.600 41.025 C 337.600 40.715,337.057 40.042,336.393 39.530 C 335.730 39.019,334.695 38.224,334.093 37.765 C 332.864 36.827,330.337 35.930,326.200 34.966 C 324.661 34.607,322.942 33.986,322.382 33.587 C 320.977 32.587,317.200 31.761,310.663 31.025 C 306.778 30.588,304.809 30.185,304.063 29.676 C 301.496 27.923,297.835 27.421,283.339 26.832 C 278.245 26.625,273.745 26.280,273.339 26.067 C 271.908 25.314,269.360 24.838,265.592 24.618 C 263.497 24.496,261.158 24.217,260.394 23.998 C 259.630 23.779,256.304 23.600,253.003 23.601 C 249.701 23.602,243.619 23.312,239.487 22.958 C 233.461 22.442,230.889 22.396,226.487 22.728 C 219.621 23.246,212.572 22.794,210.952 21.731 C 209.566 20.822,189.315 20.486,186.800 21.330 M207.742 26.664 C 209.244 26.912,210.794 28.546,210.799 29.885 C 210.803 31.435,193.213 32.421,188.177 31.153 C 185.263 30.419,186.044 27.080,189.220 26.695 C 191.523 26.416,206.093 26.391,207.742 26.664 M136.776 29.913 L 137.688 30.250 136.744 30.855 C 135.043 31.946,132.146 32.515,129.707 32.239 C 128.438 32.095,125.600 31.824,123.400 31.636 C 119.410 31.295,116.833 30.634,117.376 30.091 C 118.216 29.251,134.579 29.100,136.776 29.913 M292.400 29.923 L 293.800 30.244 291.811 30.928 C 290.386 31.418,287.948 31.671,283.211 31.822 C 272.589 32.159,271.644 32.287,271.355 33.435 C 271.215 33.993,270.747 34.481,270.256 34.582 C 269.785 34.678,268.770 34.875,268.000 35.019 C 267.230 35.163,261.290 35.430,254.800 35.611 C 248.310 35.792,241.830 36.108,240.400 36.312 C 237.600 36.711,236.227 36.296,235.269 34.762 C 234.085 32.866,235.809 32.603,249.583 32.571 C 260.202 32.546,262.544 32.436,264.373 31.871 C 265.568 31.502,267.413 31.200,268.473 31.200 C 269.892 31.200,270.400 31.047,270.400 30.618 C 270.400 30.257,270.969 29.941,271.900 29.785 C 272.725 29.647,273.580 29.459,273.800 29.367 C 274.469 29.088,290.901 29.579,292.400 29.923 M154.620 31.118 C 156.359 32.575,170.898 33.153,176.603 31.991 C 179.961 31.308,184.000 32.443,184.000 34.071 C 184.000 35.620,167.179 36.172,149.634 35.198 C 139.936 34.660,139.425 34.539,140.516 33.048 C 141.758 31.348,153.051 29.804,154.620 31.118 M110.532 33.575 C 114.714 34.545,110.096 38.039,102.737 39.473 C 102.004 39.616,101.202 39.358,100.145 38.640 C 99.303 38.068,98.125 37.600,97.526 37.600 C 95.396 37.600,92.716 35.151,93.733 34.133 C 94.438 33.429,107.965 32.979,110.532 33.575 M222.800 33.606 C 224.371 34.637,220.706 35.098,216.200 34.436 C 214.307 34.158,214.264 34.126,215.400 33.836 C 216.060 33.668,216.780 33.470,217.000 33.397 C 217.926 33.088,222.248 33.244,222.800 33.606 M312.025 33.842 C 313.293 34.054,313.505 34.271,313.963 35.819 C 314.245 36.776,314.684 37.644,314.938 37.749 C 316.527 38.403,310.922 39.809,309.048 39.226 C 308.361 39.013,306.468 38.541,304.839 38.178 C 301.831 37.507,300.894 36.941,300.022 35.266 C 299.469 34.204,299.476 34.189,300.815 33.615 C 301.787 33.198,309.044 33.345,312.025 33.842 M202.523 33.864 C 204.852 34.018,206.234 34.259,205.923 34.456 C 205.284 34.861,194.628 34.911,192.750 34.517 L 191.400 34.234 192.600 33.964 C 194.255 33.592,197.871 33.556,202.523 33.864 M88.702 37.840 C 89.615 38.023,89.858 38.256,89.714 38.808 C 89.312 40.346,85.977 42.534,85.417 41.627 C 85.279 41.404,84.409 41.021,83.483 40.776 C 82.557 40.531,81.293 39.851,80.674 39.266 L 79.549 38.201 80.474 37.940 C 81.685 37.600,87.165 37.533,88.702 37.840 M250.800 41.333 C 256.459 41.516,258.556 42.007,255.600 42.458 C 253.724 42.744,230.263 42.404,230.572 42.095 C 231.291 41.376,235.988 40.868,240.600 41.011 C 243.460 41.099,248.050 41.244,250.800 41.333 M334.821 42.851 C 335.153 43.653,335.870 44.339,336.820 44.765 C 337.635 45.129,339.269 46.497,340.451 47.804 C 341.633 49.112,343.112 50.620,343.737 51.157 C 345.832 52.956,348.689 58.502,349.406 62.161 C 349.539 62.842,349.986 64.120,350.398 65.000 C 351.745 67.874,352.122 73.679,352.179 92.400 L 352.234 110.200 353.159 111.786 C 353.667 112.659,354.313 113.559,354.594 113.786 C 354.874 114.014,355.218 114.692,355.358 115.294 C 355.523 116.003,355.926 116.445,356.506 116.551 C 363.254 117.780,362.948 117.599,363.523 120.707 C 364.168 124.196,364.276 169.408,363.653 175.200 C 363.304 178.448,363.241 182.999,363.439 190.687 C 363.794 204.506,363.501 205.604,359.137 206.781 C 358.053 207.073,356.603 207.169,355.667 207.011 L 354.058 206.739 353.777 208.670 C 353.622 209.731,353.232 211.268,352.910 212.085 C 352.416 213.341,352.336 255.553,352.824 258.200 C 352.864 258.420,352.767 295.050,352.608 339.600 C 352.354 411.031,352.392 421.309,352.935 426.600 C 353.539 432.491,353.979 465.550,353.685 483.049 C 353.578 489.451,353.624 489.961,354.384 490.849 C 356.766 493.631,357.200 494.268,357.206 495.000 C 357.219 496.577,357.818 496.954,360.142 496.847 C 364.819 496.630,364.910 497.152,364.852 523.998 C 364.827 535.549,364.909 553.233,365.035 563.295 L 365.264 581.590 364.151 583.895 C 362.886 586.515,362.607 586.785,361.160 586.794 C 359.057 586.806,357.667 587.586,357.374 588.917 C 357.222 589.608,356.956 590.450,356.783 590.787 C 355.210 593.844,355.200 593.949,355.200 608.155 C 355.200 621.237,354.890 625.600,353.962 625.600 C 352.997 625.600,353.516 688.395,354.549 696.600 C 355.337 702.855,355.335 708.959,354.543 715.400 C 353.553 723.454,353.446 731.078,354.213 738.922 C 354.583 742.705,354.869 745.980,354.849 746.200 C 354.689 747.985,354.139 749.347,353.123 750.475 C 352.466 751.204,351.581 752.475,351.156 753.300 C 350.069 755.410,346.240 755.619,345.481 753.610 C 345.010 752.360,343.549 751.600,341.620 751.600 C 340.513 751.600,338.409 750.782,338.403 750.351 C 338.401 750.213,337.832 750.217,337.138 750.359 C 335.812 750.630,335.566 750.916,334.662 753.223 C 334.159 754.508,333.742 754.793,330.353 756.164 C 328.289 756.999,325.970 757.946,325.200 758.268 C 324.430 758.591,322.951 759.631,321.914 760.580 L 320.027 762.305 321.220 762.544 C 321.877 762.675,323.176 763.545,324.107 764.476 L 325.800 766.169 324.200 766.473 C 322.213 766.850,304.002 767.525,284.755 767.934 L 270.200 768.244 268.200 769.422 L 266.200 770.600 255.085 770.600 C 248.075 770.600,243.865 770.451,243.685 770.197 C 242.390 768.367,239.174 767.511,234.667 767.796 C 229.434 768.128,223.010 768.204,217.400 768.002 C 212.135 767.812,180.151 768.298,179.258 768.581 C 178.877 768.702,176.539 768.639,174.064 768.440 C 166.999 767.872,155.065 768.749,149.032 770.280 C 145.867 771.083,128.093 770.907,127.076 770.063 C 126.551 769.627,125.655 769.608,122.315 769.959 C 117.372 770.478,85.257 770.568,85.814 770.060 C 86.619 769.328,89.015 768.800,91.560 768.794 C 94.658 768.787,95.202 768.526,95.316 766.997 C 95.408 765.758,91.788 764.860,86.526 764.817 C 83.643 764.793,82.400 764.257,82.400 763.038 C 82.400 762.065,79.553 760.800,77.362 760.800 C 76.254 760.800,71.637 758.346,71.408 757.635 C 71.296 757.286,70.662 756.370,70.000 755.600 C 69.338 754.830,68.681 753.841,68.540 753.402 C 67.814 751.142,64.400 751.105,64.400 753.357 C 64.400 753.708,63.416 754.447,62.100 755.085 C 60.325 755.945,59.771 756.428,59.672 757.200 C 59.409 759.245,56.624 759.416,55.526 757.453 C 55.325 757.094,54.895 756.800,54.572 756.800 C 54.248 756.800,53.788 756.373,53.550 755.850 C 53.312 755.328,52.347 754.516,51.406 754.046 C 48.717 752.703,47.791 750.255,47.831 744.600 C 48.106 705.977,48.491 620.273,48.441 609.072 L 48.374 594.343 47.393 592.789 C 46.683 591.664,45.970 591.103,44.806 590.755 C 43.923 590.490,43.200 590.150,43.200 590.000 C 43.200 589.630,39.430 587.600,38.742 587.600 C 36.937 587.600,36.687 580.465,36.628 527.160 C 36.598 500.950,36.636 500.400,38.480 500.400 C 39.651 500.400,42.083 499.259,42.656 498.442 C 42.942 498.034,43.962 497.330,44.923 496.878 C 48.613 495.144,48.369 499.188,47.908 447.400 C 47.747 429.360,47.508 378.780,47.376 335.000 C 47.243 291.004,46.974 254.416,46.775 253.200 C 46.561 251.894,46.563 244.345,46.778 234.620 C 47.120 219.222,47.099 218.180,46.429 217.220 C 46.037 216.659,45.594 215.693,45.444 215.074 C 45.104 213.667,42.987 211.279,41.400 210.511 C 38.926 209.315,37.763 208.564,36.475 207.332 L 35.149 206.065 35.183 192.786 C 35.209 182.794,35.376 178.454,35.858 175.253 C 36.376 171.813,36.435 169.662,36.169 164.000 C 35.729 154.618,35.727 125.807,36.167 123.800 C 36.933 120.303,39.570 118.949,41.880 120.867 C 42.291 121.208,42.401 120.974,42.403 119.749 C 42.406 118.526,42.705 117.886,43.822 116.707 C 45.868 114.548,47.282 110.480,46.676 108.495 C 46.045 106.426,46.045 87.317,46.676 84.400 C 47.144 82.235,47.857 77.110,48.401 72.000 C 48.749 68.730,49.551 65.277,50.032 64.980 C 50.235 64.855,50.400 64.410,50.400 63.990 C 50.400 63.275,51.238 60.390,51.965 58.600 C 52.144 58.160,52.610 56.810,53.000 55.600 C 53.391 54.390,54.090 52.993,54.555 52.496 C 56.896 49.992,57.506 49.475,58.758 48.931 C 60.301 48.260,60.870 47.763,61.551 46.492 C 62.332 45.032,64.858 45.745,68.562 48.470 C 70.751 50.081,70.793 50.290,68.996 50.627 C 68.223 50.772,67.493 51.050,67.372 51.245 C 67.251 51.440,66.833 51.600,66.441 51.600 C 65.669 51.600,63.773 55.034,63.335 57.226 C 63.198 57.910,62.856 58.557,62.574 58.665 C 61.454 59.095,60.746 61.898,61.377 63.406 C 62.037 64.985,62.404 64.960,65.000 63.154 C 65.880 62.542,67.140 61.918,67.800 61.767 C 68.460 61.616,69.315 61.219,69.700 60.884 C 70.446 60.236,70.402 60.174,70.560 62.082 C 70.582 62.347,70.157 62.669,69.615 62.796 C 68.858 62.975,68.554 63.392,68.305 64.594 C 67.787 67.084,67.071 67.600,64.133 67.600 C 62.734 67.600,61.277 67.769,60.895 67.977 C 60.513 68.184,59.152 68.662,57.872 69.040 C 52.563 70.607,51.605 74.863,51.621 96.800 C 51.633 113.239,52.208 115.600,56.196 115.600 C 60.722 115.600,62.150 117.094,60.377 119.975 L 59.173 121.933 59.235 148.666 C 59.275 166.176,59.153 175.952,58.879 177.000 C 57.828 181.019,57.602 183.320,57.623 189.731 C 57.658 199.897,58.167 207.163,58.945 208.600 C 59.303 209.260,59.602 210.340,59.610 211.000 C 59.627 212.319,60.177 213.215,61.400 213.917 C 62.041 214.285,61.387 214.378,58.103 214.388 L 54.005 214.400 52.803 216.060 L 51.600 217.720 51.600 230.483 C 51.600 242.574,51.916 246.800,52.821 246.800 C 53.000 246.800,53.253 247.137,53.384 247.549 C 53.582 248.173,54.137 248.329,56.711 248.482 C 58.417 248.583,60.350 248.952,61.030 249.306 C 62.181 249.907,62.334 249.899,63.430 249.177 C 67.109 246.751,70.972 249.659,71.515 255.263 C 72.191 262.232,71.448 343.712,70.697 345.047 C 69.529 347.120,65.437 348.238,63.031 347.141 C 62.258 346.789,61.885 346.798,61.426 347.178 C 61.098 347.451,59.338 347.768,57.515 347.884 C 52.127 348.227,52.399 347.472,52.400 362.083 C 52.402 377.666,53.036 386.800,54.117 386.800 C 54.193 386.800,55.185 386.524,56.321 386.186 C 60.519 384.940,62.113 387.192,60.578 392.200 C 60.045 393.940,59.963 399.666,59.943 436.304 L 59.920 478.407 60.930 480.338 C 61.786 481.975,61.867 482.414,61.464 483.221 C 60.978 484.198,60.440 484.399,56.121 485.226 L 53.643 485.700 52.965 487.856 C 52.425 489.573,52.349 490.683,52.592 493.306 C 52.759 495.118,52.879 497.230,52.856 498.000 C 52.379 514.639,52.364 517.759,52.761 518.823 C 53.002 519.470,53.395 520.522,53.632 521.161 C 54.014 522.187,54.401 522.401,56.958 523.003 C 61.588 524.093,62.284 524.976,60.900 528.000 C 59.885 530.219,59.858 532.668,60.303 580.400 C 60.654 618.109,60.492 616.272,63.592 617.490 C 64.519 617.854,65.206 618.392,65.214 618.761 C 65.222 619.112,65.486 619.850,65.800 620.400 L 66.372 621.400 66.386 619.975 C 66.394 619.191,66.874 617.571,67.453 616.375 L 68.506 614.200 68.031 580.600 C 67.770 562.120,67.584 543.188,67.618 538.530 C 67.691 528.579,66.896 526.400,63.191 526.400 C 62.127 526.400,63.717 525.214,65.851 524.415 C 68.885 523.280,70.022 523.361,71.412 524.812 C 72.943 526.411,73.687 534.500,72.816 540.097 C 72.292 543.465,72.338 544.940,73.191 552.000 C 73.507 554.620,73.568 560.394,73.386 570.600 C 73.160 583.321,73.213 585.821,73.761 588.400 C 74.839 593.466,74.698 617.702,73.585 618.815 C 72.136 620.264,70.235 621.197,68.729 621.199 C 67.919 621.199,66.989 621.468,66.661 621.796 C 66.237 622.220,64.718 622.470,61.417 622.658 C 55.800 622.979,54.040 623.822,52.932 626.722 C 52.153 628.763,52.718 658.097,53.622 662.561 L 54.101 664.923 54.670 663.561 C 55.273 662.122,56.988 660.400,57.819 660.400 C 58.689 660.400,58.954 659.120,59.180 653.833 C 59.334 650.219,59.550 648.616,59.900 648.500 C 60.175 648.408,60.400 648.110,60.400 647.836 C 60.400 646.609,62.150 645.660,64.016 645.876 L 65.833 646.085 65.577 648.556 C 65.436 649.914,65.086 651.466,64.797 652.005 C 64.509 652.543,64.131 654.532,63.956 656.425 C 63.781 658.318,63.360 661.201,63.020 662.833 C 62.554 665.065,62.401 668.350,62.400 676.100 C 62.400 681.765,62.256 686.400,62.079 686.400 C 60.369 686.400,59.795 697.180,61.419 698.790 C 63.296 700.652,65.129 696.416,64.578 691.491 C 64.321 689.197,64.330 689.172,65.860 687.771 L 67.400 686.360 67.677 681.280 C 67.829 678.486,68.142 675.210,68.372 674.000 C 68.602 672.790,68.943 670.244,69.130 668.343 C 69.355 666.063,69.753 664.408,70.298 663.483 C 72.360 659.988,72.670 648.853,70.769 646.563 C 69.991 645.626,74.778 645.216,77.089 646.021 C 79.388 646.823,79.977 652.228,77.918 653.629 C 77.376 653.998,76.192 661.340,75.599 668.000 C 75.254 671.885,74.721 674.174,73.841 675.552 C 73.647 675.856,73.352 677.656,73.186 679.552 C 73.019 681.449,72.697 683.630,72.469 684.400 C 71.108 689.004,70.808 690.403,70.796 692.200 C 70.789 693.300,70.432 694.972,70.004 695.916 C 69.575 696.860,69.000 698.750,68.726 700.116 C 68.053 703.468,67.094 704.323,64.272 704.089 C 61.651 703.872,55.503 704.604,54.455 705.258 C 53.787 705.676,53.623 706.386,53.383 709.911 L 53.100 714.071 55.050 716.063 C 56.122 717.158,58.103 718.846,59.451 719.813 L 61.903 721.571 61.695 727.768 C 61.488 733.913,61.554 734.525,62.998 739.800 C 63.300 740.900,63.937 743.240,64.415 745.000 C 65.608 749.395,65.573 749.351,68.139 749.765 C 69.896 750.048,70.400 750.287,70.400 750.836 C 70.400 751.932,71.527 752.800,72.949 752.800 C 73.659 752.800,74.411 752.950,74.620 753.133 C 74.829 753.315,75.757 753.680,76.682 753.943 C 77.607 754.206,78.604 754.642,78.898 754.911 C 80.756 756.615,84.796 757.600,89.932 757.600 C 92.141 757.600,94.432 757.784,95.024 758.009 C 95.616 758.234,98.462 758.600,101.350 758.822 C 104.237 759.045,108.760 759.435,111.400 759.689 C 116.804 760.209,120.266 760.232,127.810 759.799 C 132.417 759.535,133.599 759.610,138.010 760.450 C 143.153 761.429,148.261 761.597,160.000 761.173 C 162.530 761.082,165.804 761.165,167.276 761.359 C 174.095 762.256,176.746 758.125,175.629 748.341 C 175.297 745.433,175.157 739.367,175.221 730.657 C 175.326 716.393,175.178 715.228,173.181 714.594 C 172.374 714.338,172.038 711.512,172.706 710.598 C 173.377 709.681,177.452 708.712,179.635 708.950 C 180.826 709.080,185.169 709.333,189.286 709.513 C 199.316 709.950,199.452 710.206,190.200 711.238 C 184.663 711.856,182.749 712.988,180.720 716.849 C 179.815 718.572,179.800 718.809,179.800 731.600 C 179.800 752.100,180.328 756.538,183.090 759.270 C 183.829 760.002,184.819 761.005,185.289 761.500 L 186.144 762.400 202.179 762.400 L 218.213 762.400 220.241 760.500 C 224.033 756.948,224.480 754.672,223.287 745.000 C 222.587 739.330,222.533 737.379,222.813 727.890 C 223.135 716.980,222.994 715.461,221.575 714.584 C 221.369 714.457,221.200 714.090,221.200 713.768 C 221.200 713.447,220.750 712.471,220.200 711.600 L 219.200 710.015 220.300 709.788 C 220.905 709.663,222.120 709.344,223.000 709.080 C 225.150 708.435,227.935 708.550,229.400 709.344 C 230.060 709.702,231.050 710.012,231.600 710.034 C 232.488 710.068,232.455 710.114,231.305 710.446 C 230.348 710.723,229.955 711.105,229.799 711.910 C 229.682 712.510,229.396 713.720,229.163 714.600 C 227.699 720.122,227.617 721.090,227.605 732.800 C 227.585 753.052,228.265 757.035,232.090 759.070 L 234.200 760.193 246.800 760.196 C 255.281 760.199,260.054 760.042,261.400 759.717 C 269.391 757.788,275.815 757.272,283.400 757.950 C 286.073 758.189,287.554 758.047,291.615 757.164 C 292.613 756.947,296.933 756.587,301.215 756.364 C 312.686 755.765,316.020 755.417,317.800 754.632 C 320.228 753.561,322.738 752.895,325.462 752.598 C 327.771 752.347,329.272 751.571,329.659 750.430 C 329.737 750.201,330.942 749.859,332.339 749.668 C 335.094 749.292,335.584 748.878,335.594 746.924 C 335.597 746.222,335.780 745.536,336.000 745.400 C 336.220 745.264,336.400 744.578,336.400 743.876 C 336.401 742.414,337.576 739.087,338.456 738.060 C 338.783 737.678,339.214 737.103,339.413 736.783 C 339.613 736.462,339.884 732.109,340.017 727.109 C 340.297 716.596,340.233 716.773,344.003 716.031 C 347.627 715.318,349.200 712.831,349.200 707.811 C 349.200 701.543,348.458 700.800,342.202 700.800 C 334.728 700.800,332.580 698.057,331.641 687.308 C 331.419 684.764,331.161 683.809,330.504 683.108 C 329.820 682.378,329.582 681.407,329.288 678.152 C 329.012 675.087,328.665 673.586,327.861 671.973 C 327.148 670.542,326.794 669.180,326.783 667.821 C 326.764 665.691,326.467 664.047,325.429 660.343 C 325.082 659.101,324.622 656.581,324.407 654.743 C 324.193 652.904,323.815 650.361,323.567 649.091 C 322.553 643.885,325.759 642.193,330.815 645.267 L 332.032 646.008 330.766 647.583 C 329.516 649.138,329.103 651.044,329.908 651.545 C 330.133 651.685,330.526 653.240,330.783 655.000 C 331.039 656.760,331.508 659.554,331.825 661.209 C 332.141 662.864,332.400 665.601,332.400 667.290 C 332.400 670.493,332.820 671.994,334.130 673.483 C 334.946 674.409,335.798 679.552,336.370 687.000 C 336.712 691.455,337.223 692.800,338.575 692.800 C 340.514 692.800,341.813 690.310,340.820 688.495 C 339.973 686.945,339.710 682.492,339.894 672.800 C 340.103 661.786,339.737 657.256,338.531 655.924 C 338.016 655.354,337.739 654.203,337.572 651.928 C 337.443 650.170,337.167 648.612,336.959 648.466 C 336.551 648.179,335.200 646.155,335.200 645.830 C 335.200 644.223,337.987 643.384,340.387 644.268 C 343.516 645.420,343.598 645.575,343.612 650.362 C 343.624 654.398,343.686 654.707,344.919 656.857 L 346.214 659.113 346.859 657.657 C 347.214 656.856,347.706 655.697,347.952 655.081 C 348.251 654.336,348.400 649.598,348.400 640.881 C 348.401 631.370,348.553 627.003,348.958 624.880 C 349.850 620.201,348.420 619.056,341.200 618.666 C 338.773 618.535,336.822 618.637,335.800 618.948 C 331.342 620.307,330.595 617.893,330.738 602.600 C 330.821 593.765,330.700 589.999,330.231 586.800 C 329.755 583.556,329.612 578.822,329.604 566.000 C 329.598 556.870,329.425 547.870,329.219 546.000 C 328.722 541.498,329.281 524.579,329.974 523.151 C 331.039 520.952,335.418 519.587,337.560 520.785 C 337.972 521.016,338.554 520.860,339.320 520.314 C 340.119 519.745,341.392 519.423,343.526 519.249 L 346.587 519.000 347.593 517.200 L 348.600 515.400 348.487 500.400 C 348.339 480.747,349.051 482.138,339.319 482.503 L 333.545 482.719 332.248 481.421 C 331.535 480.708,330.602 479.929,330.175 479.691 C 329.431 479.275,328.493 453.638,328.899 444.800 C 328.955 443.590,328.965 439.630,328.922 436.000 C 328.379 389.769,328.384 386.207,328.987 385.434 C 329.733 384.478,333.728 383.827,335.211 384.420 C 336.220 384.823,337.526 386.400,336.850 386.400 C 336.654 386.400,335.745 387.150,334.828 388.066 L 333.163 389.731 333.281 407.966 C 333.381 423.313,333.495 426.358,334.000 427.200 C 334.485 428.008,334.619 430.196,334.698 438.600 C 334.908 460.873,335.434 477.357,335.982 478.800 C 337.413 482.570,339.522 482.343,340.532 478.311 C 341.613 473.994,340.733 390.212,339.580 387.704 C 337.845 383.933,340.282 381.693,344.472 383.208 C 347.414 384.272,347.372 384.498,347.600 366.229 C 347.866 344.871,347.860 344.834,343.496 344.382 C 342.111 344.239,340.303 343.802,339.480 343.411 C 338.030 342.723,337.922 342.726,336.057 343.501 C 333.774 344.450,330.559 344.159,329.289 342.889 C 327.682 341.282,327.717 343.190,328.231 285.458 C 328.447 261.112,328.398 253.861,328.007 252.229 C 327.531 250.245,327.562 250.028,328.618 247.871 L 329.730 245.600 331.765 245.543 C 337.586 245.381,339.296 245.249,342.553 244.709 C 347.937 243.815,347.580 244.979,347.591 228.274 C 347.603 210.285,348.350 211.494,337.123 211.344 C 326.174 211.197,326.697 212.222,326.922 191.341 C 327.038 180.609,327.233 175.947,327.640 174.200 C 328.061 172.398,328.156 169.707,328.025 163.400 C 327.733 149.347,327.841 117.502,328.188 115.800 C 328.707 113.249,329.450 112.806,333.283 112.762 C 340.660 112.677,346.410 111.957,347.007 111.044 C 347.624 110.099,347.971 74.103,347.385 71.800 C 346.935 70.033,343.200 65.600,342.161 65.600 C 341.802 65.600,340.665 65.141,339.634 64.580 C 337.985 63.683,337.553 63.607,336.033 63.948 C 334.541 64.283,333.985 64.197,331.953 63.316 L 329.600 62.295 329.600 60.348 L 329.600 58.400 327.800 58.400 C 326.741 58.400,326.000 58.216,326.000 57.953 C 326.000 57.685,326.360 57.603,326.900 57.748 C 327.395 57.881,328.312 57.992,328.937 57.995 C 329.727 57.998,330.137 58.239,330.279 58.782 C 330.664 60.252,334.942 60.360,337.114 58.955 L 338.028 58.363 336.814 56.890 C 336.146 56.080,335.600 55.171,335.600 54.869 C 335.600 53.636,334.273 51.658,332.979 50.961 C 332.221 50.552,331.600 49.939,331.600 49.598 C 331.600 47.962,330.430 47.169,328.410 47.436 C 326.351 47.710,323.049 46.660,323.324 45.820 C 323.684 44.720,326.165 43.600,328.241 43.600 C 329.846 43.600,330.724 43.356,331.838 42.600 C 333.751 41.302,334.195 41.339,334.821 42.851 M110.400 44.401 C 116.719 45.192,118.028 46.145,113.340 46.541 C 106.444 47.124,101.200 46.704,101.200 45.568 C 101.200 44.398,103.534 43.508,105.800 43.813 C 106.460 43.902,108.530 44.167,110.400 44.401 M244.976 45.551 C 247.823 45.763,253.769 45.835,258.191 45.709 C 263.679 45.554,266.668 45.625,267.614 45.934 C 269.039 46.400,274.569 47.003,283.000 47.611 C 285.640 47.801,289.600 48.140,291.800 48.364 C 294.000 48.588,297.096 48.778,298.680 48.786 C 301.989 48.802,305.762 49.672,306.970 50.696 C 308.318 51.840,309.324 52.285,311.215 52.575 C 314.098 53.017,316.354 54.119,318.639 56.200 C 318.881 56.420,320.128 57.500,321.409 58.600 C 322.691 59.700,323.966 60.825,324.242 61.100 C 324.517 61.375,324.914 61.600,325.124 61.600 C 325.334 61.600,325.981 62.224,326.562 62.986 C 327.965 64.825,331.802 66.497,335.800 67.010 C 340.404 67.602,342.781 69.015,343.526 71.600 C 344.731 75.782,344.902 76.699,344.832 78.600 C 344.772 80.242,344.474 101.582,344.416 108.457 L 344.400 110.314 337.300 110.586 C 323.593 111.110,324.260 109.592,324.552 139.600 C 324.667 151.370,324.870 162.440,325.003 164.200 C 325.177 166.497,325.049 168.359,324.548 170.800 C 323.647 175.196,323.242 207.347,324.063 209.387 C 325.436 212.798,328.168 213.688,336.748 213.523 C 341.597 213.430,343.278 213.526,343.675 213.919 C 344.682 214.916,344.641 238.152,343.629 240.441 L 342.816 242.280 336.508 242.508 C 326.471 242.871,323.794 244.997,324.609 251.958 C 324.779 253.411,324.885 255.860,324.845 257.400 C 323.917 292.898,324.493 341.219,325.863 342.831 C 326.158 343.179,326.400 343.640,326.400 343.856 C 326.400 344.285,327.345 345.348,328.843 346.602 C 330.170 347.713,333.792 348.408,336.017 347.979 C 339.110 347.382,341.912 347.536,343.516 348.391 C 346.655 350.064,346.400 348.561,346.400 365.391 L 346.400 380.493 345.300 380.241 C 340.353 379.105,333.436 379.846,331.531 381.716 C 331.239 382.003,330.370 382.413,329.600 382.628 C 326.625 383.457,326.735 382.230,326.766 414.200 C 326.782 429.820,326.697 450.620,326.578 460.422 C 326.285 484.580,326.384 484.800,337.583 484.800 C 340.478 484.800,343.645 485.001,344.623 485.247 L 346.400 485.695 346.400 500.184 L 346.400 514.673 344.854 515.137 C 344.003 515.392,342.338 515.600,341.154 515.601 C 337.022 515.602,332.683 516.629,330.257 518.181 C 326.413 520.640,326.671 519.231,325.925 541.800 C 325.896 542.680,326.068 544.930,326.306 546.800 C 326.565 548.827,326.838 563.046,326.982 582.000 C 327.115 599.490,327.328 614.670,327.454 615.734 C 327.940 619.815,331.154 621.760,337.054 621.544 C 339.004 621.472,341.905 621.455,343.500 621.507 L 346.400 621.600 346.400 632.262 C 346.400 642.376,346.364 642.893,345.700 642.329 C 342.621 639.713,326.282 639.317,323.438 641.790 C 322.799 642.345,322.126 642.800,321.943 642.800 C 320.742 642.800,319.625 645.988,320.023 648.277 C 320.467 650.827,321.528 653.600,322.061 653.600 C 322.247 653.600,322.400 654.848,322.400 656.374 C 322.400 657.900,322.577 659.614,322.793 660.183 C 323.010 660.752,323.294 663.239,323.426 665.709 C 323.678 670.451,324.005 671.761,325.485 673.956 C 326.052 674.796,326.400 675.908,326.400 676.879 C 326.400 679.118,327.188 683.989,327.779 685.400 C 328.055 686.060,328.497 687.492,328.761 688.583 C 329.025 689.674,329.486 691.114,329.784 691.783 C 330.083 692.452,330.425 693.450,330.545 694.000 C 331.608 698.874,331.782 699.328,333.159 700.786 C 335.835 703.622,336.848 703.997,341.836 703.999 C 346.200 704.000,346.279 704.016,346.736 705.019 C 347.693 707.120,347.026 712.383,345.800 712.399 C 344.900 712.411,342.392 713.263,341.913 713.720 C 341.631 713.989,340.902 714.430,340.294 714.699 C 339.686 714.968,338.970 715.686,338.702 716.294 C 338.435 716.902,338.068 717.507,337.887 717.637 C 337.296 718.062,336.816 722.885,336.808 728.492 C 336.803 732.085,336.613 734.505,336.258 735.492 C 335.960 736.321,335.375 738.080,334.959 739.400 C 334.424 741.101,333.725 742.266,332.561 743.400 C 331.658 744.280,330.757 745.283,330.559 745.629 C 330.362 745.974,329.318 746.678,328.240 747.193 C 327.163 747.708,325.704 748.635,324.999 749.254 C 324.023 750.111,322.917 750.528,320.359 751.004 C 318.511 751.347,316.100 751.796,315.000 752.002 C 313.900 752.208,311.650 752.483,310.000 752.614 C 308.350 752.746,306.190 753.152,305.200 753.518 C 303.292 754.222,302.343 754.276,276.400 755.160 C 268.810 755.419,261.970 755.803,261.200 756.013 C 260.430 756.223,254.040 756.391,247.000 756.386 L 234.200 756.377 232.900 755.194 C 231.751 754.149,231.599 753.767,231.591 751.906 C 231.586 750.557,231.264 749.153,230.698 748.000 C 229.846 746.265,229.809 745.696,229.683 732.318 C 229.545 717.595,229.609 717.014,231.412 716.561 C 231.955 716.425,232.400 716.153,232.400 715.957 C 232.400 715.760,232.670 715.600,233.000 715.600 C 233.330 715.600,233.600 715.420,233.600 715.200 C 233.600 714.941,238.234 714.800,246.703 714.800 C 254.455 714.800,260.376 714.633,261.203 714.391 C 263.262 713.788,267.896 712.904,270.315 712.653 C 272.273 712.450,275.600 711.016,275.600 710.375 C 275.600 710.222,276.725 709.685,278.100 709.181 C 279.475 708.678,281.143 707.711,281.807 707.033 C 282.471 706.355,283.467 705.440,284.020 705.000 C 284.574 704.560,285.636 702.980,286.380 701.488 L 287.732 698.776 287.566 678.288 C 287.475 667.020,287.379 653.930,287.353 649.200 C 287.326 644.470,287.177 638.440,287.020 635.800 C 286.787 631.869,286.868 630.385,287.468 627.600 C 288.295 623.760,288.485 596.124,287.915 562.600 C 287.758 553.360,287.525 524.200,287.397 497.800 C 287.218 460.707,287.049 449.391,286.655 448.000 C 286.298 446.736,286.258 445.723,286.522 444.600 C 287.289 441.336,287.318 430.277,286.566 427.937 C 285.941 425.992,285.857 421.950,285.639 383.000 L 285.400 340.200 284.402 338.457 C 283.411 336.725,281.222 335.256,278.747 334.661 C 278.167 334.522,277.115 333.868,276.409 333.209 C 275.268 332.143,270.907 330.400,269.381 330.400 C 269.086 330.400,268.250 330.054,267.523 329.631 C 263.899 327.526,244.856 327.095,213.800 328.415 C 207.640 328.676,200.980 328.846,199.000 328.791 C 184.209 328.383,138.359 329.204,137.529 329.892 C 137.203 330.163,135.331 330.501,133.368 330.642 C 129.690 330.908,126.782 331.944,124.968 333.636 C 124.510 334.063,123.250 334.732,122.168 335.123 C 116.954 337.008,115.271 338.961,114.344 344.200 C 113.577 348.536,113.511 349.885,114.019 350.835 C 114.504 351.742,114.875 419.551,114.671 470.200 C 114.613 484.715,114.626 498.595,114.780 587.800 C 114.818 609.360,114.860 640.950,114.874 658.000 C 114.889 675.050,115.015 692.192,115.155 696.093 L 115.409 703.186 116.586 704.093 C 117.234 704.592,118.582 705.720,119.582 706.600 C 120.582 707.480,122.260 708.649,123.312 709.198 C 124.364 709.747,125.803 710.690,126.510 711.294 C 127.846 712.434,130.719 713.600,132.191 713.600 C 132.658 713.600,133.211 713.757,133.420 713.949 C 133.783 714.282,136.367 715.107,139.800 715.986 C 140.746 716.228,147.314 716.396,155.878 716.398 C 172.864 716.400,172.912 716.411,172.008 720.005 C 171.339 722.664,171.712 746.360,172.492 750.784 C 172.983 753.569,172.996 754.261,172.566 754.691 C 172.279 754.979,171.656 755.903,171.183 756.745 L 170.322 758.276 158.394 758.554 C 145.812 758.847,144.911 758.782,143.000 757.442 C 141.855 756.639,141.140 756.587,127.400 756.308 C 100.102 755.754,88.676 755.011,86.030 753.621 C 84.299 752.711,80.766 751.600,79.605 751.600 C 78.544 751.600,76.348 750.487,75.740 749.640 C 75.487 749.288,74.587 748.665,73.740 748.256 C 72.893 747.846,71.887 747.351,71.505 747.156 C 71.123 746.960,70.553 746.800,70.238 746.800 C 69.923 746.800,69.292 746.196,68.835 745.457 C 68.379 744.719,67.550 743.659,66.992 743.102 C 65.280 741.389,64.800 738.466,64.800 729.741 C 64.800 721.340,64.478 719.693,62.648 718.723 C 62.182 718.475,61.563 717.939,61.273 717.531 C 60.984 717.122,60.144 716.537,59.408 716.229 C 56.396 714.971,55.699 712.719,56.893 708.106 C 57.544 705.592,57.489 705.615,62.800 705.592 C 70.165 705.559,72.949 702.320,73.472 693.174 C 73.662 689.851,73.885 688.645,74.412 688.079 C 75.435 686.981,76.400 683.228,76.402 680.338 C 76.403 678.942,76.579 677.170,76.793 676.400 C 77.006 675.630,77.360 672.951,77.579 670.446 C 77.816 667.739,78.217 665.528,78.567 664.993 C 78.892 664.499,79.445 662.408,79.797 660.347 C 80.150 658.286,80.609 655.599,80.819 654.376 C 82.552 644.262,80.802 642.508,69.425 642.959 C 61.175 643.286,60.307 643.424,59.021 644.615 L 58.016 645.547 57.264 644.473 C 55.547 642.025,54.667 632.510,55.871 629.400 C 56.126 628.740,56.442 627.710,56.572 627.112 C 56.942 625.414,58.109 625.084,64.935 624.748 C 71.767 624.411,73.353 623.919,75.458 621.484 C 77.376 619.263,77.349 620.048,76.819 582.562 C 76.546 563.223,76.356 542.810,76.398 537.200 C 76.482 525.754,76.397 525.292,73.685 522.441 C 71.421 520.061,70.594 519.846,63.941 519.909 C 58.279 519.962,58.045 519.932,56.954 518.994 L 55.826 518.025 55.813 503.968 L 55.800 489.912 56.862 489.156 C 57.737 488.533,58.651 488.399,62.062 488.394 C 67.849 488.386,74.214 485.893,75.755 483.032 C 76.832 481.032,75.934 427.963,74.800 426.600 C 74.292 425.988,74.168 422.913,73.988 406.439 C 73.715 381.443,74.886 383.813,62.655 383.510 C 56.174 383.349,54.233 383.179,53.961 382.751 C 53.524 382.060,53.520 357.195,53.957 354.937 C 54.587 351.683,56.821 350.407,61.926 350.386 C 73.304 350.339,73.729 349.719,74.049 332.671 C 74.192 325.068,74.487 318.717,74.740 317.800 C 75.504 315.030,75.353 257.525,74.575 255.000 C 74.236 253.900,73.788 252.116,73.578 251.035 C 73.136 248.759,71.508 246.400,70.380 246.400 C 69.951 246.400,69.600 246.264,69.600 246.098 C 69.600 245.182,66.805 244.648,62.535 244.746 C 53.110 244.964,53.590 245.690,53.640 231.284 C 53.693 215.979,52.604 217.601,63.307 216.882 C 68.268 216.549,68.291 216.543,70.111 215.051 C 73.606 212.187,73.375 213.572,73.600 194.200 C 73.788 178.020,73.847 176.917,74.590 175.600 C 75.642 173.735,75.808 160.480,74.800 158.800 C 74.295 157.958,74.168 154.569,74.000 137.400 C 73.781 115.094,73.879 115.962,71.360 113.864 C 69.907 112.652,66.784 111.851,65.032 112.239 C 61.702 112.978,55.159 112.151,54.100 110.858 C 53.026 109.546,53.582 78.402,54.693 77.643 C 54.889 77.509,55.660 76.172,56.407 74.671 C 57.965 71.542,58.481 71.224,63.704 70.175 C 67.887 69.336,68.582 69.003,70.791 66.780 C 71.786 65.779,73.410 64.319,74.400 63.534 C 75.390 62.750,77.451 60.906,78.979 59.435 C 80.508 57.965,82.398 56.465,83.179 56.102 C 83.961 55.739,85.060 55.109,85.621 54.704 C 86.894 53.784,90.418 52.957,94.600 52.595 C 96.745 52.410,98.921 51.882,101.200 50.994 C 105.381 49.365,109.082 48.891,121.400 48.406 C 126.460 48.206,131.950 47.773,133.600 47.443 C 135.524 47.057,139.110 46.830,143.600 46.807 C 147.804 46.786,151.878 46.541,153.800 46.194 C 155.689 45.853,159.867 45.595,164.000 45.566 C 167.850 45.538,172.620 45.383,174.600 45.222 C 179.680 44.808,238.722 45.084,244.976 45.551 M305.472 45.045 C 308.319 45.808,306.682 46.400,301.721 46.400 C 298.941 46.400,296.800 46.265,296.962 46.100 C 297.982 45.064,303.154 44.423,305.472 45.045 M318.974 49.958 C 319.313 50.506,318.402 50.676,316.200 50.475 C 314.693 50.338,314.397 50.214,315.000 49.974 C 316.107 49.534,318.705 49.523,318.974 49.958 M90.100 50.289 C 89.385 50.378,88.215 50.378,87.500 50.289 C 86.785 50.201,87.370 50.128,88.800 50.128 C 90.230 50.128,90.815 50.201,90.100 50.289 M74.739 56.754 C 76.172 57.662,74.255 59.290,72.531 58.629 C 72.024 58.434,72.080 58.227,72.861 57.404 C 73.911 56.297,73.980 56.273,74.739 56.754 M69.482 116.282 C 71.617 116.777,71.564 115.949,71.479 147.454 C 71.418 169.919,71.285 176.800,70.900 177.474 C 70.523 178.132,70.400 182.240,70.400 194.145 L 70.400 209.943 68.300 211.963 C 64.640 215.483,62.728 213.899,64.480 208.797 C 64.803 207.856,65.036 202.308,65.193 191.800 C 65.396 178.198,65.514 176.009,66.116 174.706 C 67.252 172.245,67.546 163.001,66.560 160.741 C 65.860 159.137,65.784 157.537,65.600 140.400 L 65.400 121.800 64.438 120.400 C 63.909 119.630,63.253 118.814,62.980 118.587 C 61.718 117.535,65.415 115.068,67.341 115.678 C 68.033 115.897,68.997 116.169,69.482 116.282 M335.200 116.516 C 332.775 117.707,332.822 117.000,333.245 145.932 C 333.549 166.760,333.516 170.456,332.999 172.932 C 332.528 175.188,332.401 179.064,332.400 191.097 C 332.400 208.897,332.293 208.400,336.125 208.400 C 339.566 208.400,339.431 209.006,339.749 192.112 C 339.902 184.021,340.184 175.870,340.376 174.000 C 341.113 166.809,340.370 117.670,339.507 116.572 C 338.569 115.381,337.541 115.367,335.200 116.516 M338.375 145.300 C 338.361 160.535,338.207 172.640,338.033 172.200 C 337.860 171.760,337.600 159.644,337.457 145.277 C 337.213 120.774,337.300 117.600,338.214 117.600 C 338.316 117.600,338.389 130.065,338.375 145.300 M353.824 118.883 C 353.734 119.167,353.442 120.110,353.174 120.978 C 352.809 122.158,352.705 128.819,352.760 147.378 C 352.800 161.030,352.720 178.911,352.582 187.114 C 352.316 202.968,352.577 205.620,354.400 205.586 C 356.416 205.549,356.582 204.402,356.862 188.600 C 357.114 174.338,357.286 171.841,358.048 171.370 C 358.519 171.079,358.501 160.136,358.028 159.252 C 357.819 158.861,357.599 150.375,357.528 139.910 L 357.400 121.264 356.400 120.195 C 355.030 118.731,354.033 118.223,353.824 118.883 M62.995 140.120 C 62.982 196.204,62.724 210.180,61.773 206.600 C 61.338 204.966,61.312 122.337,61.745 121.665 C 62.841 119.966,63.000 122.306,62.995 140.120 M41.704 122.931 C 41.537 123.189,41.400 135.280,41.400 149.800 C 41.400 170.293,41.282 176.692,40.872 178.400 C 40.474 180.059,40.375 183.917,40.472 194.086 C 40.621 209.758,40.664 209.954,43.429 207.348 L 45.000 205.867 45.200 191.918 C 45.337 182.378,45.540 177.880,45.842 177.685 C 47.198 176.811,47.292 174.683,47.032 150.860 C 46.723 122.587,46.959 124.857,44.183 123.514 C 42.609 122.752,41.925 122.591,41.704 122.931 M336.016 248.384 C 334.010 250.390,333.083 253.302,333.526 256.200 C 333.694 257.300,333.684 259.041,333.504 260.069 C 333.323 261.097,333.226 279.033,333.288 299.927 C 333.414 342.805,333.068 338.476,336.549 340.688 C 340.380 343.122,340.385 343.069,340.624 298.000 C 340.735 276.990,340.911 259.405,341.015 258.923 C 341.568 256.352,339.140 246.800,337.932 246.800 C 337.750 246.800,336.887 247.513,336.016 248.384 M60.820 251.465 C 59.418 253.247,59.418 253.270,59.409 297.600 C 59.399 343.707,59.327 341.959,61.347 344.283 C 62.415 345.512,63.271 344.949,64.669 342.102 L 65.800 339.800 65.879 330.200 C 65.923 324.920,65.951 315.020,65.943 308.200 C 65.918 286.791,66.082 268.394,66.346 263.061 C 66.486 260.235,66.478 257.848,66.329 257.756 C 66.180 257.664,65.853 256.916,65.601 256.094 C 64.055 251.037,62.410 249.444,60.820 251.465 M338.486 297.200 C 338.412 322.220,338.234 335.964,337.989 335.542 C 337.529 334.749,337.434 253.781,337.893 253.074 C 338.507 252.127,338.598 258.899,338.486 297.200 M62.911 297.936 C 63.042 337.090,62.877 343.729,61.863 339.941 C 61.520 338.659,61.539 257.807,61.883 255.800 L 62.157 254.200 62.466 255.949 C 62.636 256.911,62.836 275.805,62.911 297.936 M138.800 333.942 C 139.927 334.207,139.285 334.332,135.515 334.583 C 130.004 334.949,128.136 334.688,129.400 333.728 C 130.242 333.089,135.708 333.213,138.800 333.942 M271.400 334.000 C 271.555 334.250,270.777 334.389,269.324 334.372 C 267.656 334.352,267.226 334.247,267.800 334.000 C 268.917 333.520,271.103 333.520,271.400 334.000 M219.000 336.111 C 227.360 336.096,239.870 336.020,246.800 335.942 C 264.843 335.739,271.020 336.433,271.990 338.775 C 272.233 339.362,272.841 340.284,273.342 340.824 C 274.899 342.504,275.201 346.732,275.201 366.881 C 275.200 380.214,275.070 385.447,274.722 386.212 L 274.243 387.263 266.822 387.025 C 262.740 386.894,246.800 387.072,231.400 387.420 C 216.000 387.768,202.050 388.034,200.400 388.012 C 198.750 387.989,181.340 387.885,161.711 387.779 C 126.483 387.590,126.016 387.577,125.592 386.784 C 125.296 386.232,125.199 379.190,125.281 364.232 L 125.400 342.482 127.200 340.741 C 128.190 339.783,129.180 338.684,129.400 338.297 C 130.117 337.037,133.644 336.870,164.820 336.619 C 182.064 336.481,195.956 336.209,196.620 335.997 C 197.269 335.790,199.150 335.737,200.800 335.879 C 202.450 336.021,210.640 336.125,219.000 336.111 M279.642 337.724 C 280.515 338.565,280.979 339.102,282.800 341.374 C 283.310 342.010,283.442 345.600,283.683 365.361 C 283.838 378.143,284.079 397.780,284.218 409.000 C 284.520 433.455,284.513 456.798,284.195 485.400 C 284.064 497.164,284.121 508.202,284.322 510.200 C 284.549 512.447,284.537 515.153,284.292 517.400 C 284.033 519.781,284.047 530.140,284.335 548.000 C 285.240 604.254,285.300 618.508,284.649 622.726 C 283.988 627.011,283.997 626.033,284.242 668.767 C 284.437 702.821,284.416 703.076,281.377 703.661 C 280.956 703.742,280.248 704.375,279.805 705.067 C 278.773 706.679,274.322 708.608,273.221 707.920 C 271.292 706.716,272.338 704.445,274.847 704.387 C 275.776 704.366,276.761 703.391,277.401 701.859 C 277.736 701.057,278.159 700.400,278.341 700.400 C 279.354 700.400,279.446 697.545,279.183 674.320 L 278.908 650.040 277.254 648.064 C 275.661 646.161,274.724 641.600,275.926 641.600 C 277.138 641.600,278.097 638.241,278.028 634.234 C 277.982 631.523,278.157 629.555,278.550 628.376 C 279.808 624.603,280.000 621.697,279.997 606.427 C 279.994 591.389,279.641 584.681,278.809 583.849 C 278.584 583.624,278.392 583.161,278.382 582.820 C 278.371 582.479,277.966 581.887,277.482 581.504 C 276.997 581.121,276.060 580.356,275.400 579.804 L 274.200 578.801 255.765 578.800 C 245.626 578.800,230.776 578.665,222.765 578.500 L 208.200 578.200 218.400 577.957 C 224.010 577.823,238.816 577.688,251.301 577.657 C 276.207 577.595,274.651 577.740,277.929 575.175 L 279.231 574.155 279.031 560.778 C 278.920 553.420,278.721 545.543,278.588 543.273 C 278.455 541.004,278.512 538.034,278.715 536.673 C 278.918 535.313,278.998 530.565,278.892 526.122 L 278.699 518.045 276.361 516.405 L 274.023 514.765 249.911 514.983 C 236.650 515.103,222.200 515.300,217.800 515.421 C 211.389 515.597,208.978 515.506,205.661 514.965 C 202.501 514.449,200.799 514.372,198.461 514.640 C 196.778 514.834,180.994 514.921,163.386 514.835 C 128.117 514.663,126.991 514.722,124.944 516.858 C 123.323 518.550,123.269 519.674,123.454 547.800 C 123.632 574.750,123.608 574.373,125.337 576.934 C 126.283 578.334,126.029 581.552,124.785 583.940 C 123.968 585.507,123.639 597.516,123.437 633.200 L 123.400 639.800 124.735 642.513 C 125.739 644.554,126.384 645.364,127.335 645.781 L 128.600 646.335 127.386 646.367 C 126.451 646.392,125.875 646.785,124.886 648.073 L 123.600 649.745 123.635 672.973 C 123.658 688.416,123.828 697.337,124.141 699.593 L 124.612 702.986 126.930 704.520 C 129.528 706.239,129.754 707.154,127.725 707.736 C 126.564 708.069,124.249 707.191,123.200 706.019 C 123.090 705.896,121.956 705.019,120.679 704.069 C 119.403 703.120,118.155 701.861,117.906 701.271 C 116.971 699.055,116.700 632.813,117.589 623.800 C 118.003 619.601,118.009 613.944,117.618 594.400 C 117.175 572.213,116.688 517.854,116.895 513.600 C 116.997 511.510,116.916 482.407,116.590 402.800 C 116.414 360.144,116.472 345.397,116.819 344.200 C 117.621 341.434,117.963 340.800,118.653 340.800 C 119.021 340.800,119.993 340.074,120.812 339.187 C 122.236 337.644,122.376 337.587,124.049 337.854 C 125.725 338.122,125.753 338.149,124.720 338.493 C 123.810 338.797,123.604 339.146,123.401 340.726 C 123.269 341.757,122.967 343.363,122.730 344.295 C 122.463 345.343,122.408 347.326,122.584 349.495 C 122.741 351.423,122.811 354.980,122.739 357.400 C 122.369 369.853,123.332 386.051,124.569 388.200 C 126.167 390.976,126.245 393.590,124.799 395.940 L 123.576 397.927 123.688 423.863 L 123.800 449.800 124.910 451.652 C 125.740 453.036,126.345 453.577,127.310 453.794 L 128.600 454.084 127.269 454.461 C 126.176 454.771,125.746 455.248,124.869 457.119 L 123.800 459.400 123.549 473.600 C 123.412 481.410,123.277 492.850,123.249 499.022 L 123.200 510.243 124.500 511.471 C 126.631 513.483,135.580 513.737,183.600 513.147 C 192.308 513.040,196.226 513.145,198.552 513.546 C 201.345 514.028,201.984 514.015,204.152 513.433 C 207.140 512.630,213.683 512.560,246.556 512.983 C 273.189 513.326,274.199 513.274,276.110 511.470 C 278.292 509.410,278.502 507.999,278.630 494.600 C 278.821 474.613,278.812 471.666,278.539 464.635 L 278.277 457.870 276.337 455.857 C 275.037 454.509,274.529 453.711,274.798 453.442 C 275.019 453.221,275.200 452.747,275.200 452.388 C 275.200 452.029,275.661 450.850,276.225 449.768 C 277.848 446.650,278.259 441.348,277.672 431.059 C 277.407 426.407,277.193 417.036,277.195 410.235 C 277.200 398.015,277.189 397.851,276.268 396.235 C 274.202 392.613,274.099 389.408,275.991 387.600 C 277.100 386.539,277.180 385.082,277.233 364.889 C 277.286 344.543,277.073 340.303,275.937 339.020 C 275.360 338.369,275.564 337.740,276.500 337.288 C 277.886 336.620,278.599 336.719,279.642 337.724 M70.533 386.294 C 72.302 387.325,72.294 387.127,72.567 436.086 L 72.826 482.319 71.466 483.159 C 69.774 484.205,68.986 484.212,67.000 483.200 C 66.137 482.760,64.974 482.381,64.415 482.359 C 63.586 482.325,63.669 482.246,64.870 481.926 C 67.803 481.145,67.696 482.565,67.391 448.675 C 67.243 432.134,67.161 413.175,67.210 406.545 L 67.299 394.490 66.186 392.445 C 65.574 391.320,64.921 390.400,64.736 390.400 C 64.013 390.400,64.360 386.070,65.100 385.868 C 65.867 385.659,69.999 385.983,70.533 386.294 M339.185 432.153 C 339.173 465.540,339.065 474.119,338.643 475.347 C 337.595 478.394,337.400 475.342,337.110 451.400 C 336.950 438.200,336.713 419.054,336.584 408.853 L 336.349 390.306 337.236 389.361 L 338.124 388.417 338.662 389.454 C 339.103 390.305,339.198 398.000,339.185 432.153 M266.400 389.965 L 269.000 390.237 267.000 390.554 C 265.900 390.728,264.370 391.036,263.600 391.238 C 259.927 392.203,254.218 392.165,252.211 391.163 C 250.456 390.286,250.380 390.190,251.253 389.945 C 252.483 389.600,263.044 389.614,266.400 389.965 M137.930 390.814 C 139.409 391.715,140.056 392.220,141.245 393.400 L 142.051 394.200 137.933 394.454 C 135.668 394.594,132.228 394.594,130.287 394.454 L 126.758 394.200 128.421 392.471 C 131.008 389.783,135.076 389.074,137.930 390.814 M63.549 415.200 C 63.530 426.750,63.341 440.070,63.127 444.800 C 62.914 449.530,62.618 459.070,62.470 466.000 L 62.200 478.600 61.900 459.234 C 61.531 435.388,61.506 393.909,61.862 392.984 C 62.092 392.382,62.208 392.413,62.853 393.251 C 63.538 394.143,63.580 395.460,63.549 415.200 M204.800 396.418 C 205.790 396.589,221.833 396.626,240.452 396.500 C 273.488 396.277,274.313 396.290,274.708 397.036 C 275.376 398.295,275.533 445.485,274.875 447.043 C 274.144 448.775,273.658 448.799,239.040 448.808 C 210.858 448.816,205.965 448.986,202.967 450.068 C 201.993 450.419,200.985 450.356,198.167 449.769 C 192.912 448.673,180.108 448.510,175.314 449.477 C 169.517 450.647,130.169 450.756,127.729 449.609 C 126.643 449.098,125.942 448.474,125.814 447.902 C 125.477 446.401,125.377 399.083,125.708 397.900 L 126.015 396.800 159.708 396.773 C 185.076 396.754,194.438 396.617,197.600 396.219 C 199.910 395.929,202.070 395.785,202.400 395.900 C 202.730 396.014,203.810 396.247,204.800 396.418 M189.400 454.000 C 189.876 454.204,186.307 454.344,180.600 454.344 C 174.893 454.344,171.324 454.204,171.800 454.000 C 172.240 453.811,176.200 453.656,180.600 453.656 C 185.000 453.656,188.960 453.811,189.400 454.000 M239.057 456.595 C 273.278 456.600,273.930 456.615,274.794 457.395 L 275.673 458.190 275.481 482.995 C 275.294 507.153,275.203 508.931,274.086 510.400 C 273.970 510.552,221.098 511.140,200.400 511.220 C 177.978 511.306,126.832 510.918,126.300 510.657 C 125.599 510.314,125.152 462.433,125.833 460.657 C 125.962 460.323,126.979 459.572,128.094 458.989 L 130.122 457.929 150.761 458.010 C 163.467 458.060,173.245 457.921,176.200 457.646 C 184.075 456.915,200.880 456.090,202.600 456.349 C 203.480 456.482,219.886 456.593,239.057 456.595 M355.688 500.524 L 353.576 501.777 353.625 519.388 C 353.651 529.075,353.549 538.080,353.399 539.400 C 353.080 542.189,353.742 547.620,354.557 548.910 C 355.008 549.623,355.155 552.975,355.298 565.800 L 355.476 581.800 356.848 583.279 C 358.337 584.886,358.900 584.842,359.575 583.066 C 360.123 581.624,360.134 556.292,359.588 550.000 C 359.369 547.470,359.197 535.370,359.205 523.110 C 359.216 505.812,359.106 500.639,358.713 500.010 C 358.098 499.024,358.264 498.996,355.688 500.524 M45.200 500.696 C 44.193 501.088,43.702 502.071,43.458 504.182 C 42.866 509.302,43.519 586.285,44.166 587.700 C 44.658 588.777,46.273 588.565,47.091 587.317 C 48.128 585.734,48.060 502.962,47.021 501.376 C 46.358 500.364,46.203 500.306,45.200 500.696 M274.679 517.503 L 275.557 518.005 275.569 546.193 C 275.581 572.500,275.536 574.405,274.891 574.736 C 274.229 575.075,246.467 575.337,166.800 575.755 C 132.691 575.934,130.064 575.900,128.200 575.248 L 126.200 574.549 125.955 561.574 C 125.532 539.198,125.563 521.424,126.028 520.092 C 126.897 517.599,126.834 517.606,150.460 517.546 C 162.197 517.516,176.840 517.381,183.000 517.246 C 205.083 516.761,273.719 516.954,274.679 517.503 M336.643 523.555 C 334.691 525.593,334.389 532.807,335.111 560.200 C 335.338 568.780,335.540 583.561,335.561 593.047 C 335.598 609.189,335.650 610.418,336.384 612.247 C 336.814 613.321,337.369 614.993,337.615 615.961 L 338.064 617.722 338.829 616.561 C 339.250 615.923,339.596 615.156,339.597 614.859 C 339.599 614.561,340.420 613.405,341.423 612.290 L 343.246 610.262 343.014 599.231 C 342.886 593.164,342.630 579.380,342.446 568.600 C 342.245 556.867,341.918 547.876,341.632 546.200 C 341.312 544.325,341.239 541.261,341.412 536.925 C 341.766 528.010,341.477 525.659,339.803 523.831 C 338.219 522.102,338.049 522.087,336.643 523.555 M339.055 569.539 C 339.328 611.150,339.320 611.416,337.919 610.550 C 337.514 610.300,337.495 526.239,337.900 525.831 C 338.637 525.088,338.804 531.441,339.055 569.539 M62.295 546.487 C 62.214 547.649,62.147 546.800,62.146 544.600 C 62.145 542.400,62.211 541.449,62.293 542.487 C 62.376 543.524,62.376 545.324,62.295 546.487 M191.800 577.979 C 194.453 578.196,192.770 578.277,185.400 578.289 C 179.900 578.298,175.940 578.168,176.600 578.000 C 178.136 577.609,187.125 577.597,191.800 577.979 M163.500 578.276 C 163.115 578.376,162.485 578.376,162.100 578.276 C 161.715 578.175,162.030 578.093,162.800 578.093 C 163.570 578.093,163.885 578.175,163.500 578.276 M205.400 581.985 C 207.056 582.308,210.960 582.382,218.000 582.224 C 237.594 581.783,267.827 581.545,271.084 581.806 L 274.368 582.069 275.284 584.335 C 276.355 586.983,276.961 620.680,275.986 623.356 C 275.737 624.040,275.433 627.675,275.311 631.432 C 275.001 640.927,278.190 639.794,251.682 639.831 C 236.323 639.853,228.841 640.005,227.600 640.321 C 226.556 640.588,222.520 640.785,217.990 640.790 C 210.565 640.800,204.074 641.295,202.922 641.940 C 202.630 642.103,200.909 641.989,199.096 641.687 C 196.529 641.259,188.546 641.114,163.000 641.033 C 129.386 640.926,127.707 640.850,126.218 639.361 C 125.400 638.543,125.362 629.316,126.160 625.135 C 127.308 619.112,127.299 596.479,126.144 587.400 C 125.747 584.283,126.265 584.206,147.800 584.167 C 168.157 584.131,173.132 583.886,176.427 582.761 C 178.327 582.111,179.939 581.993,187.427 581.950 C 192.252 581.923,197.460 581.774,199.000 581.619 C 202.042 581.312,201.907 581.304,205.400 581.985 M239.050 648.460 L 274.299 648.321 274.950 649.249 C 275.529 650.077,275.602 652.440,275.618 670.989 C 275.627 682.435,275.793 693.150,275.986 694.800 C 276.386 698.224,275.099 702.149,273.417 702.635 C 271.873 703.082,270.400 703.796,270.400 704.098 C 270.400 704.264,270.085 704.401,269.700 704.403 C 269.315 704.404,267.650 704.875,266.000 705.449 L 263.000 706.493 219.800 706.662 C 195.581 706.757,175.313 707.000,173.671 707.216 C 164.442 708.427,135.028 707.300,133.600 705.681 C 133.270 705.306,131.824 704.408,130.387 703.684 C 128.082 702.524,127.657 702.123,126.787 700.290 L 125.800 698.212 125.800 674.069 L 125.800 649.926 127.400 649.369 C 128.711 648.913,134.819 648.802,161.200 648.759 C 178.910 648.730,195.200 648.575,197.400 648.416 C 199.600 648.256,201.940 648.232,202.600 648.363 C 203.260 648.493,219.662 648.537,239.050 648.460 M335.187 654.824 C 335.200 659.548,334.478 662.392,333.882 659.963 C 333.296 657.574,333.091 650.013,333.596 649.404 C 334.661 648.122,335.174 649.869,335.187 654.824 M67.718 654.800 C 67.673 655.350,67.445 658.860,67.212 662.600 C 66.635 671.884,66.411 673.508,65.842 672.547 C 65.385 671.774,65.388 654.667,65.846 653.926 C 66.357 653.099,67.802 653.774,67.718 654.800 M132.800 709.957 C 134.126 710.308,134.079 710.330,131.900 710.364 C 130.635 710.384,129.600 710.325,129.600 710.233 C 129.600 709.372,130.147 708.880,130.736 709.212 C 131.101 709.418,132.030 709.754,132.800 709.957 M218.823 716.645 C 219.620 717.442,219.649 717.936,219.749 732.434 C 219.805 740.665,220.055 748.908,220.304 750.751 L 220.756 754.102 219.486 755.682 L 218.216 757.263 202.297 757.131 L 186.379 757.000 184.990 755.527 C 183.743 754.205,183.600 753.822,183.600 751.805 C 183.600 750.316,183.301 748.921,182.715 747.678 C 181.778 745.691,181.103 725.638,181.789 720.152 C 182.168 717.120,183.696 716.419,190.078 716.353 C 192.565 716.328,195.770 716.165,197.200 715.992 C 203.009 715.288,217.916 715.739,218.823 716.645 M345.636 736.737 C 345.121 737.695,345.338 739.600,345.961 739.600 C 346.498 739.600,346.759 738.106,346.434 736.895 L 346.139 735.800 345.636 736.737 M54.114 738.600 C 54.117 739.700,54.195 740.103,54.287 739.495 C 54.379 738.886,54.377 737.986,54.282 737.495 C 54.187 737.003,54.111 737.500,54.114 738.600 M55.200 741.800 C 54.795 742.288,54.814 742.400,55.305 742.400 C 56.059 742.400,57.200 744.093,57.200 745.212 C 57.200 746.673,57.966 747.726,58.628 747.177 C 59.303 746.617,59.408 743.137,58.786 741.974 C 58.278 741.026,55.937 740.912,55.200 741.800 M80.720 765.280 C 81.682 766.242,81.118 766.400,76.738 766.400 C 72.301 766.400,72.280 766.395,73.000 765.600 C 73.856 764.654,79.846 764.406,80.720 765.280 M227.585 769.963 C 232.527 770.705,222.707 771.559,214.600 771.092 C 207.094 770.660,204.284 770.632,188.600 770.833 C 184.200 770.889,179.160 770.777,177.400 770.583 L 174.200 770.230 176.200 770.000 C 179.062 769.670,225.411 769.637,227.585 769.963 M171.312 770.292 C 170.384 770.376,168.764 770.377,167.712 770.295 C 166.660 770.212,167.420 770.143,169.400 770.142 C 171.380 770.141,172.240 770.208,171.312 770.292 M187.400 773.963 C 188.591 774.229,188.586 774.236,186.629 774.916 C 184.436 775.677,182.309 775.788,180.560 775.231 C 179.922 775.028,178.680 774.731,177.800 774.572 C 176.325 774.304,176.278 774.258,177.200 773.981 C 178.434 773.609,185.762 773.597,187.400 773.963 " stroke="none" fill="#dcdcdc" fill-rule="evenodd"></path><path id="path4" d="M0.000 400.000 L 0.000 800.000 200.000 800.000 L 400.000 800.000 400.000 400.000 L 400.000 0.000 200.000 0.000 L 0.000 0.000 0.000 400.000 M210.952 21.731 C 212.572 22.794,219.621 23.246,226.487 22.728 C 230.889 22.396,233.461 22.442,239.487 22.958 C 243.619 23.312,249.701 23.602,253.003 23.601 C 256.304 23.600,259.630 23.779,260.394 23.998 C 261.158 24.217,263.497 24.496,265.592 24.618 C 269.360 24.838,271.908 25.314,273.339 26.067 C 273.745 26.280,278.245 26.625,283.339 26.832 C 297.835 27.421,301.496 27.923,304.063 29.676 C 304.809 30.185,306.778 30.588,310.663 31.025 C 317.200 31.761,320.977 32.587,322.382 33.587 C 322.942 33.986,324.661 34.607,326.200 34.966 C 330.337 35.930,332.864 36.827,334.093 37.765 C 334.695 38.224,335.730 39.019,336.393 39.530 C 337.057 40.042,337.600 40.715,337.600 41.025 C 337.600 41.336,338.334 42.053,339.231 42.619 C 340.191 43.225,341.097 44.214,341.436 45.024 C 341.752 45.781,342.182 46.400,342.391 46.400 C 343.118 46.400,345.600 48.887,345.600 49.614 C 345.600 50.017,345.967 50.462,346.415 50.605 C 347.683 51.007,349.159 53.715,349.447 56.165 C 349.603 57.485,350.012 58.691,350.472 59.186 C 351.713 60.517,353.093 64.758,353.406 68.200 C 353.566 69.960,354.035 72.300,354.448 73.400 C 355.389 75.904,355.408 78.641,354.500 80.651 C 353.235 83.451,353.896 109.897,355.243 110.347 C 355.485 110.428,356.160 110.978,356.742 111.570 C 358.052 112.901,360.325 114.232,361.864 114.570 C 365.629 115.397,365.860 116.511,366.182 135.400 C 366.317 143.320,366.710 152.770,367.056 156.400 C 367.842 164.637,367.595 171.988,366.427 175.200 C 365.687 177.231,365.625 178.416,365.613 190.650 C 365.596 208.077,365.675 207.795,360.460 209.089 C 358.567 209.559,357.521 210.028,357.379 210.471 C 357.261 210.839,356.424 211.881,355.520 212.786 L 353.875 214.431 354.157 230.816 C 354.365 242.917,354.599 248.012,355.050 250.301 C 356.147 255.868,355.622 350.856,354.481 353.200 C 353.855 354.486,353.800 357.445,353.800 389.632 L 353.800 424.663 355.000 427.032 L 356.200 429.400 356.346 438.000 C 356.426 442.730,356.568 456.320,356.662 468.200 C 356.844 491.435,356.820 491.188,358.986 492.281 C 359.654 492.618,360.560 493.209,361.000 493.594 C 361.440 493.980,362.265 494.405,362.833 494.538 C 364.742 494.988,367.453 497.781,367.830 499.686 C 368.123 501.172,368.336 529.509,368.126 539.200 C 368.086 541.070,368.145 551.623,368.259 562.652 C 368.482 584.398,368.414 585.246,366.298 587.321 C 365.111 588.485,363.356 589.600,362.710 589.600 C 362.425 589.600,361.744 590.010,361.196 590.511 C 360.648 591.013,359.615 591.835,358.900 592.339 L 357.600 593.254 357.592 607.327 C 357.587 617.047,357.415 622.595,357.037 625.262 C 356.587 628.439,356.543 636.038,356.789 668.062 C 356.954 689.478,357.068 716.810,357.044 728.800 L 356.999 750.600 355.365 752.200 C 354.467 753.080,353.429 754.438,353.059 755.218 C 352.690 755.997,351.805 756.975,351.094 757.390 C 350.382 757.805,349.170 758.640,348.400 759.245 C 347.630 759.851,346.190 760.660,345.200 761.045 C 344.210 761.429,342.770 762.134,342.000 762.610 C 341.230 763.086,339.697 763.774,338.593 764.139 C 337.489 764.504,335.689 765.396,334.593 766.122 C 330.426 768.880,327.319 769.206,301.400 769.606 C 282.543 769.897,278.627 770.118,277.252 770.968 C 275.929 771.785,271.574 772.453,266.422 772.628 C 255.184 773.009,247.330 773.989,242.275 775.641 C 240.257 776.300,237.838 776.803,236.664 776.808 C 233.730 776.819,229.209 777.509,227.800 778.161 C 225.179 779.373,224.488 779.579,221.548 780.028 C 217.497 780.647,210.725 780.335,208.400 779.424 C 202.721 777.197,201.402 777.198,195.600 779.436 C 191.991 780.829,177.063 780.645,175.000 779.182 C 174.780 779.026,173.520 778.769,172.200 778.610 C 170.880 778.452,168.218 777.985,166.285 777.573 C 164.351 777.161,160.869 776.631,158.548 776.395 C 153.223 775.853,151.130 775.455,148.387 774.463 C 145.231 773.321,141.528 773.168,109.800 772.868 L 81.400 772.600 78.600 771.163 C 75.611 769.629,73.581 769.027,69.895 768.584 C 68.627 768.431,67.491 768.148,67.371 767.953 C 67.251 767.759,66.865 767.600,66.514 767.600 C 66.163 767.600,65.319 767.177,64.638 766.659 C 63.384 765.707,61.907 765.118,58.991 764.409 C 56.787 763.874,52.474 760.754,51.364 758.893 C 50.862 758.051,50.008 757.125,49.466 756.835 C 48.489 756.313,47.621 754.704,46.855 752.000 C 46.100 749.330,45.958 742.116,46.339 725.600 C 46.908 700.874,46.322 646.910,45.416 640.600 C 44.641 635.206,44.765 629.729,45.694 628.297 C 46.588 626.918,46.803 621.460,46.525 607.130 L 46.272 594.060 44.636 593.472 C 43.736 593.149,42.010 592.581,40.800 592.210 C 34.774 590.360,34.700 590.070,34.309 566.600 C 33.681 528.944,33.916 501.903,34.885 500.190 C 36.378 497.549,37.806 496.707,44.458 494.543 C 44.997 494.367,45.168 493.468,45.402 489.560 C 45.560 486.938,45.849 484.693,46.044 484.573 C 46.562 484.252,46.494 453.756,45.971 451.873 C 45.653 450.726,45.670 450.198,46.038 449.754 C 46.904 448.710,46.552 374.014,45.672 372.306 C 45.105 371.203,44.993 369.568,44.952 361.800 C 44.926 356.740,44.710 350.710,44.473 348.400 C 44.193 345.683,44.048 330.289,44.061 304.800 C 44.084 259.350,44.102 262.692,43.692 236.400 C 43.320 212.601,43.583 214.067,39.462 212.870 C 36.573 212.030,33.627 209.778,32.100 207.241 C 31.143 205.652,31.412 178.918,32.419 175.536 C 33.150 173.083,33.214 172.085,33.011 166.293 C 32.488 151.348,32.367 125.392,32.813 123.602 C 33.791 119.676,37.214 115.600,39.534 115.600 C 43.497 115.600,43.596 115.142,43.612 96.844 C 43.627 80.505,44.266 74.400,45.963 74.400 C 46.142 74.400,46.393 73.365,46.520 72.100 C 47.038 66.952,47.668 62.978,48.023 62.620 C 48.230 62.411,48.400 61.978,48.400 61.658 C 48.400 61.338,48.828 60.515,49.350 59.830 C 49.995 58.984,50.395 57.765,50.597 56.030 C 51.102 51.675,54.227 47.253,57.270 46.585 C 57.892 46.448,58.400 46.124,58.400 45.864 C 58.400 45.026,60.323 43.287,61.782 42.806 C 62.562 42.549,63.200 42.179,63.200 41.985 C 63.200 41.461,65.228 39.637,66.600 38.927 C 67.260 38.586,68.160 37.984,68.600 37.590 C 69.040 37.196,70.615 36.587,72.100 36.237 C 73.585 35.887,75.977 35.320,77.415 34.978 C 78.854 34.635,80.609 34.029,81.315 33.630 C 82.022 33.231,84.580 32.622,87.000 32.277 C 90.938 31.715,93.493 31.449,103.400 30.573 C 104.940 30.437,106.830 29.994,107.600 29.590 C 110.296 28.173,117.777 27.155,129.688 26.584 C 133.222 26.414,135.420 26.103,136.888 25.564 C 139.915 24.452,144.269 24.103,161.200 23.618 C 176.780 23.171,183.972 22.722,184.873 22.140 C 186.584 21.035,188.600 20.863,199.019 20.930 C 208.752 20.993,209.949 21.073,210.952 21.731 M192.600 33.964 L 191.400 34.234 192.750 34.517 C 194.628 34.911,205.284 34.861,205.923 34.456 C 206.946 33.807,195.224 33.375,192.600 33.964 M174.600 45.222 C 172.620 45.383,167.850 45.538,164.000 45.566 C 159.867 45.595,155.689 45.853,153.800 46.194 C 151.878 46.541,147.804 46.786,143.600 46.807 C 139.110 46.830,135.524 47.057,133.600 47.443 C 131.950 47.773,126.460 48.206,121.400 48.406 C 109.082 48.891,105.381 49.365,101.200 50.994 C 98.921 51.882,96.745 52.410,94.600 52.595 C 90.418 52.957,86.894 53.784,85.621 54.704 C 85.060 55.109,83.961 55.739,83.179 56.102 C 82.398 56.465,80.508 57.965,78.979 59.435 C 77.451 60.906,75.390 62.750,74.400 63.534 C 73.410 64.319,71.786 65.779,70.791 66.780 C 68.582 69.003,67.887 69.336,63.704 70.175 C 58.481 71.224,57.965 71.542,56.407 74.671 C 55.660 76.172,54.889 77.509,54.693 77.643 C 53.582 78.402,53.026 109.546,54.100 110.858 C 55.159 112.151,61.702 112.978,65.032 112.239 C 66.784 111.851,69.907 112.652,71.360 113.864 C 73.879 115.962,73.781 115.094,74.000 137.400 C 74.168 154.569,74.295 157.958,74.800 158.800 C 75.808 160.480,75.642 173.735,74.590 175.600 C 73.847 176.917,73.788 178.020,73.600 194.200 C 73.375 213.572,73.606 212.187,70.111 215.051 C 68.291 216.543,68.268 216.549,63.307 216.882 C 52.604 217.601,53.693 215.979,53.640 231.284 C 53.590 245.690,53.110 244.964,62.535 244.746 C 66.805 244.648,69.600 245.182,69.600 246.098 C 69.600 246.264,69.951 246.400,70.380 246.400 C 71.508 246.400,73.136 248.759,73.578 251.035 C 73.788 252.116,74.236 253.900,74.575 255.000 C 75.353 257.525,75.504 315.030,74.740 317.800 C 74.487 318.717,74.192 325.068,74.049 332.671 C 73.729 349.719,73.304 350.339,61.926 350.386 C 56.821 350.407,54.587 351.683,53.957 354.937 C 53.520 357.195,53.524 382.060,53.961 382.751 C 54.233 383.179,56.174 383.349,62.655 383.510 C 74.886 383.813,73.715 381.443,73.988 406.439 C 74.168 422.913,74.292 425.988,74.800 426.600 C 75.934 427.963,76.832 481.032,75.755 483.032 C 74.214 485.893,67.849 488.386,62.062 488.394 C 58.651 488.399,57.737 488.533,56.862 489.156 L 55.800 489.912 55.813 503.968 L 55.826 518.025 56.954 518.994 C 58.045 519.932,58.279 519.962,63.941 519.909 C 70.594 519.846,71.421 520.061,73.685 522.441 C 76.397 525.292,76.482 525.754,76.398 537.200 C 76.356 542.810,76.546 563.223,76.819 582.562 C 77.349 620.048,77.376 619.263,75.458 621.484 C 73.353 623.919,71.767 624.411,64.935 624.748 C 58.109 625.084,56.942 625.414,56.572 627.112 C 56.442 627.710,56.126 628.740,55.871 629.400 C 54.667 632.510,55.547 642.025,57.264 644.473 L 58.016 645.547 59.021 644.615 C 60.307 643.424,61.175 643.286,69.425 642.959 C 80.802 642.508,82.552 644.262,80.819 654.376 C 80.609 655.599,80.150 658.286,79.797 660.347 C 79.445 662.408,78.892 664.499,78.567 664.993 C 78.217 665.528,77.816 667.739,77.579 670.446 C 77.360 672.951,77.006 675.630,76.793 676.400 C 76.579 677.170,76.403 678.942,76.402 680.338 C 76.400 683.228,75.435 686.981,74.412 688.079 C 73.885 688.645,73.662 689.851,73.472 693.174 C 72.949 702.320,70.165 705.559,62.800 705.592 C 57.489 705.615,57.544 705.592,56.893 708.106 C 55.699 712.719,56.396 714.971,59.408 716.229 C 60.144 716.537,60.984 717.122,61.273 717.531 C 61.563 717.939,62.182 718.475,62.648 718.723 C 64.478 719.693,64.800 721.340,64.800 729.741 C 64.800 738.466,65.280 741.389,66.992 743.102 C 67.550 743.659,68.379 744.719,68.835 745.457 C 69.292 746.196,69.923 746.800,70.238 746.800 C 70.553 746.800,71.123 746.960,71.505 747.156 C 71.887 747.351,72.893 747.846,73.740 748.256 C 74.587 748.665,75.487 749.288,75.740 749.640 C 76.348 750.487,78.544 751.600,79.605 751.600 C 80.766 751.600,84.299 752.711,86.030 753.621 C 88.676 755.011,100.102 755.754,127.400 756.308 C 141.140 756.587,141.855 756.639,143.000 757.442 C 144.911 758.782,145.812 758.847,158.394 758.554 L 170.322 758.276 171.183 756.745 C 171.656 755.903,172.279 754.979,172.566 754.691 C 172.996 754.261,172.983 753.569,172.492 750.784 C 171.712 746.360,171.339 722.664,172.008 720.005 C 172.912 716.411,172.864 716.400,155.878 716.398 C 147.314 716.396,140.746 716.228,139.800 715.986 C 136.367 715.107,133.783 714.282,133.420 713.949 C 133.211 713.757,132.658 713.600,132.191 713.600 C 130.719 713.600,127.846 712.434,126.510 711.294 C 125.803 710.690,124.364 709.747,123.312 709.198 C 122.260 708.649,120.582 707.480,119.582 706.600 C 118.582 705.720,117.234 704.592,116.586 704.093 L 115.409 703.186 115.155 696.093 C 115.015 692.192,114.889 675.050,114.874 658.000 C 114.860 640.950,114.818 609.360,114.780 587.800 C 114.626 498.595,114.613 484.715,114.671 470.200 C 114.875 419.551,114.504 351.742,114.019 350.835 C 113.511 349.885,113.577 348.536,114.344 344.200 C 115.271 338.961,116.954 337.008,122.168 335.123 C 123.250 334.732,124.510 334.063,124.968 333.636 C 126.782 331.944,129.690 330.908,133.368 330.642 C 135.331 330.501,137.203 330.163,137.529 329.892 C 138.359 329.204,184.209 328.383,199.000 328.791 C 200.980 328.846,207.640 328.676,213.800 328.415 C 244.856 327.095,263.899 327.526,267.523 329.631 C 268.250 330.054,269.086 330.400,269.381 330.400 C 270.907 330.400,275.268 332.143,276.409 333.209 C 277.115 333.868,278.167 334.522,278.747 334.661 C 281.222 335.256,283.411 336.725,284.402 338.457 L 285.400 340.200 285.639 383.000 C 285.857 421.950,285.941 425.992,286.566 427.937 C 287.318 430.277,287.289 441.336,286.522 444.600 C 286.258 445.723,286.298 446.736,286.655 448.000 C 287.049 449.391,287.218 460.707,287.397 497.800 C 287.525 524.200,287.758 553.360,287.915 562.600 C 288.485 596.124,288.295 623.760,287.468 627.600 C 286.868 630.385,286.787 631.869,287.020 635.800 C 287.177 638.440,287.326 644.470,287.353 649.200 C 287.379 653.930,287.475 667.020,287.566 678.288 L 287.732 698.776 286.380 701.488 C 285.636 702.980,284.574 704.560,284.020 705.000 C 283.467 705.440,282.471 706.355,281.807 707.033 C 281.143 707.711,279.475 708.678,278.100 709.181 C 276.725 709.685,275.600 710.222,275.600 710.375 C 275.600 711.016,272.273 712.450,270.315 712.653 C 267.896 712.904,263.262 713.788,261.203 714.391 C 260.376 714.633,254.455 714.800,246.703 714.800 C 238.234 714.800,233.600 714.941,233.600 715.200 C 233.600 715.420,233.330 715.600,233.000 715.600 C 232.670 715.600,232.400 715.760,232.400 715.957 C 232.400 716.153,231.955 716.425,231.412 716.561 C 229.609 717.014,229.545 717.595,229.683 732.318 C 229.809 745.696,229.846 746.265,230.698 748.000 C 231.264 749.153,231.586 750.557,231.591 751.906 C 231.599 753.767,231.751 754.149,232.900 755.194 L 234.200 756.377 247.000 756.386 C 254.040 756.391,260.430 756.223,261.200 756.013 C 261.970 755.803,268.810 755.419,276.400 755.160 C 302.343 754.276,303.292 754.222,305.200 753.518 C 306.190 753.152,308.350 752.746,310.000 752.614 C 311.650 752.483,313.900 752.208,315.000 752.002 C 316.100 751.796,318.511 751.347,320.359 751.004 C 322.917 750.528,324.023 750.111,324.999 749.254 C 325.704 748.635,327.163 747.708,328.240 747.193 C 329.318 746.678,330.362 745.974,330.559 745.629 C 330.757 745.283,331.658 744.280,332.561 743.400 C 333.725 742.266,334.424 741.101,334.959 739.400 C 335.375 738.080,335.960 736.321,336.258 735.492 C 336.613 734.505,336.803 732.085,336.808 728.492 C 336.816 722.885,337.296 718.062,337.887 717.637 C 338.068 717.507,338.435 716.902,338.702 716.294 C 338.970 715.686,339.686 714.968,340.294 714.699 C 340.902 714.430,341.631 713.989,341.913 713.720 C 342.392 713.263,344.900 712.411,345.800 712.399 C 347.026 712.383,347.693 707.120,346.736 705.019 C 346.279 704.016,346.200 704.000,341.836 703.999 C 336.848 703.997,335.835 703.622,333.159 700.786 C 331.782 699.328,331.608 698.874,330.545 694.000 C 330.425 693.450,330.083 692.452,329.784 691.783 C 329.486 691.114,329.025 689.674,328.761 688.583 C 328.497 687.492,328.055 686.060,327.779 685.400 C 327.188 683.989,326.400 679.118,326.400 676.879 C 326.400 675.908,326.052 674.796,325.485 673.956 C 324.005 671.761,323.678 670.451,323.426 665.709 C 323.294 663.239,323.010 660.752,322.793 660.183 C 322.577 659.614,322.400 657.900,322.400 656.374 C 322.400 654.848,322.247 653.600,322.061 653.600 C 321.528 653.600,320.467 650.827,320.023 648.277 C 319.625 645.988,320.742 642.800,321.943 642.800 C 322.126 642.800,322.799 642.345,323.438 641.790 C 326.282 639.317,342.621 639.713,345.700 642.329 C 346.364 642.893,346.400 642.376,346.400 632.262 L 346.400 621.600 343.500 621.507 C 341.905 621.455,339.004 621.472,337.054 621.544 C 331.154 621.760,327.940 619.815,327.454 615.734 C 327.328 614.670,327.115 599.490,326.982 582.000 C 326.838 563.046,326.565 548.827,326.306 546.800 C 326.068 544.930,325.896 542.680,325.925 541.800 C 326.671 519.231,326.413 520.640,330.257 518.181 C 332.683 516.629,337.022 515.602,341.154 515.601 C 342.338 515.600,344.003 515.392,344.854 515.137 L 346.400 514.673 346.400 500.184 L 346.400 485.695 344.623 485.247 C 343.645 485.001,340.478 484.800,337.583 484.800 C 326.384 484.800,326.285 484.580,326.578 460.422 C 326.697 450.620,326.782 429.820,326.766 414.200 C 326.735 382.230,326.625 383.457,329.600 382.628 C 330.370 382.413,331.239 382.003,331.531 381.716 C 333.436 379.846,340.353 379.105,345.300 380.241 L 346.400 380.493 346.400 365.391 C 346.400 348.561,346.655 350.064,343.516 348.391 C 341.912 347.536,339.110 347.382,336.017 347.979 C 333.792 348.408,330.170 347.713,328.843 346.602 C 327.345 345.348,326.400 344.285,326.400 343.856 C 326.400 343.640,326.158 343.179,325.863 342.831 C 324.493 341.219,323.917 292.898,324.845 257.400 C 324.885 255.860,324.779 253.411,324.609 251.958 C 323.794 244.997,326.471 242.871,336.508 242.508 L 342.816 242.280 343.629 240.441 C 344.641 238.152,344.682 214.916,343.675 213.919 C 343.278 213.526,341.597 213.430,336.748 213.523 C 328.168 213.688,325.436 212.798,324.063 209.387 C 323.242 207.347,323.647 175.196,324.548 170.800 C 325.049 168.359,325.177 166.497,325.003 164.200 C 324.870 162.440,324.667 151.370,324.552 139.600 C 324.260 109.592,323.593 111.110,337.300 110.586 L 344.400 110.314 344.416 108.457 C 344.474 101.582,344.772 80.242,344.832 78.600 C 344.902 76.699,344.731 75.782,343.526 71.600 C 342.781 69.015,340.404 67.602,335.800 67.010 C 331.802 66.497,327.965 64.825,326.562 62.986 C 325.981 62.224,325.334 61.600,325.124 61.600 C 324.914 61.600,324.517 61.375,324.242 61.100 C 323.966 60.825,322.691 59.700,321.409 58.600 C 320.128 57.500,318.881 56.420,318.639 56.200 C 316.354 54.119,314.098 53.017,311.215 52.575 C 309.324 52.285,308.318 51.840,306.970 50.696 C 305.762 49.672,301.989 48.802,298.680 48.786 C 297.096 48.778,294.000 48.588,291.800 48.364 C 289.600 48.140,285.640 47.801,283.000 47.611 C 274.569 47.003,269.039 46.400,267.614 45.934 C 266.668 45.625,263.679 45.554,258.191 45.709 C 253.769 45.835,247.823 45.763,244.976 45.551 C 238.722 45.084,179.680 44.808,174.600 45.222 M337.612 118.377 C 337.123 119.292,337.527 170.916,338.033 172.200 C 338.207 172.640,338.361 160.535,338.375 145.300 C 338.389 130.065,338.316 117.600,338.214 117.600 C 338.112 117.600,337.841 117.949,337.612 118.377 M61.745 121.665 C 61.312 122.337,61.338 204.966,61.773 206.600 C 62.546 209.510,62.748 205.019,62.866 182.200 C 63.170 123.830,63.091 119.580,61.745 121.665 M337.893 253.074 C 337.434 253.781,337.529 334.749,337.989 335.542 C 338.234 335.964,338.412 322.220,338.486 297.200 C 338.598 258.899,338.507 252.127,337.893 253.074 M61.883 255.800 C 61.539 257.807,61.520 338.659,61.863 339.941 C 62.101 340.832,62.140 340.810,62.580 339.528 C 63.114 337.975,63.006 259.008,62.466 255.949 L 62.157 254.200 61.883 255.800 M196.620 335.997 C 195.956 336.209,182.064 336.481,164.820 336.619 C 133.644 336.870,130.117 337.037,129.400 338.297 C 129.180 338.684,128.190 339.783,127.200 340.741 L 125.400 342.482 125.281 364.232 C 125.199 379.190,125.296 386.232,125.592 386.784 C 126.016 387.577,126.483 387.590,161.711 387.779 C 181.340 387.885,198.750 387.989,200.400 388.012 C 202.050 388.034,216.000 387.768,231.400 387.420 C 246.800 387.072,262.740 386.894,266.822 387.025 L 274.243 387.263 274.722 386.212 C 275.070 385.447,275.200 380.214,275.201 366.881 C 275.201 346.732,274.899 342.504,273.342 340.824 C 272.841 340.284,272.233 339.362,271.990 338.775 C 271.020 336.433,264.843 335.739,246.800 335.942 C 225.648 336.181,203.964 336.151,200.800 335.879 C 199.150 335.737,197.269 335.790,196.620 335.997 M337.236 389.361 L 336.349 390.306 336.584 408.853 C 336.713 419.054,336.950 438.200,337.110 451.400 C 337.400 475.342,337.595 478.394,338.643 475.347 C 339.430 473.058,339.448 390.970,338.662 389.454 L 338.124 388.417 337.236 389.361 M61.862 392.984 C 61.506 393.909,61.531 435.388,61.900 459.234 L 62.200 478.600 62.470 466.000 C 62.618 459.070,62.914 449.530,63.127 444.800 C 63.880 428.115,63.700 394.354,62.853 393.251 C 62.208 392.413,62.092 392.382,61.862 392.984 M197.600 396.219 C 194.438 396.617,185.076 396.754,159.708 396.773 L 126.015 396.800 125.708 397.900 C 125.377 399.083,125.477 446.401,125.814 447.902 C 125.942 448.474,126.643 449.098,127.729 449.609 C 130.169 450.756,169.517 450.647,175.314 449.477 C 180.108 448.510,192.912 448.673,198.167 449.769 C 200.985 450.356,201.993 450.419,202.967 450.068 C 205.965 448.986,210.858 448.816,239.040 448.808 C 273.658 448.799,274.144 448.775,274.875 447.043 C 275.533 445.485,275.376 398.295,274.708 397.036 C 274.313 396.290,273.488 396.277,240.452 396.500 C 210.041 396.706,204.474 396.618,202.400 395.900 C 202.070 395.785,199.910 395.929,197.600 396.219 M191.000 456.654 C 185.500 456.955,178.840 457.401,176.200 457.646 C 173.245 457.921,163.467 458.060,150.761 458.010 L 130.122 457.929 128.094 458.989 C 126.979 459.572,125.962 460.323,125.833 460.657 C 125.152 462.433,125.599 510.314,126.300 510.657 C 126.832 510.918,177.978 511.306,200.400 511.220 C 221.098 511.140,273.970 510.552,274.086 510.400 C 275.203 508.931,275.294 507.153,275.481 482.995 L 275.673 458.190 274.794 457.395 C 273.930 456.615,273.278 456.600,239.057 456.595 C 219.886 456.593,203.480 456.482,202.600 456.349 C 201.720 456.216,196.500 456.354,191.000 456.654 M183.000 517.246 C 176.840 517.381,162.197 517.516,150.460 517.546 C 126.834 517.606,126.897 517.599,126.028 520.092 C 125.563 521.424,125.532 539.198,125.955 561.574 L 126.200 574.549 128.200 575.248 C 130.064 575.900,132.691 575.934,166.800 575.755 C 246.467 575.337,274.229 575.075,274.891 574.736 C 275.536 574.405,275.581 572.500,275.569 546.193 L 275.557 518.005 274.679 517.503 C 273.719 516.954,205.083 516.761,183.000 517.246 M337.900 525.831 C 337.495 526.239,337.514 610.300,337.919 610.550 C 339.320 611.416,339.328 611.150,339.055 569.539 C 338.804 531.441,338.637 525.088,337.900 525.831 M62.146 544.600 C 62.147 546.800,62.214 547.649,62.295 546.487 C 62.376 545.324,62.376 543.524,62.293 542.487 C 62.211 541.449,62.145 542.400,62.146 544.600 M199.000 581.619 C 197.460 581.774,192.252 581.923,187.427 581.950 C 179.939 581.993,178.327 582.111,176.427 582.761 C 173.132 583.886,168.157 584.131,147.800 584.167 C 126.265 584.206,125.747 584.283,126.144 587.400 C 127.299 596.479,127.308 619.112,126.160 625.135 C 125.362 629.316,125.400 638.543,126.218 639.361 C 127.707 640.850,129.386 640.926,163.000 641.033 C 188.546 641.114,196.529 641.259,199.096 641.687 C 200.909 641.989,202.630 642.103,202.922 641.940 C 204.074 641.295,210.565 640.800,217.990 640.790 C 222.520 640.785,226.556 640.588,227.600 640.321 C 228.841 640.005,236.323 639.853,251.682 639.831 C 278.190 639.794,275.001 640.927,275.311 631.432 C 275.433 627.675,275.737 624.040,275.986 623.356 C 276.961 620.680,276.355 586.983,275.284 584.335 L 274.368 582.069 271.084 581.806 C 267.827 581.545,237.594 581.783,218.000 582.224 C 210.960 582.382,207.056 582.308,205.400 581.985 C 201.907 581.304,202.042 581.312,199.000 581.619 M197.400 648.416 C 195.200 648.575,178.910 648.730,161.200 648.759 C 134.819 648.802,128.711 648.913,127.400 649.369 L 125.800 649.926 125.800 674.069 L 125.800 698.212 126.787 700.290 C 127.657 702.123,128.082 702.524,130.387 703.684 C 131.824 704.408,133.270 705.306,133.600 705.681 C 135.028 707.300,164.442 708.427,173.671 707.216 C 175.313 707.000,195.581 706.757,219.800 706.662 L 263.000 706.493 266.000 705.449 C 267.650 704.875,269.315 704.404,269.700 704.403 C 270.085 704.401,270.400 704.264,270.400 704.098 C 270.400 703.796,271.873 703.082,273.417 702.635 C 275.099 702.149,276.386 698.224,275.986 694.800 C 275.793 693.150,275.627 682.435,275.618 670.989 C 275.602 652.440,275.529 650.077,274.950 649.249 L 274.299 648.321 239.050 648.460 C 219.662 648.537,203.260 648.493,202.600 648.363 C 201.940 648.232,199.600 648.256,197.400 648.416 M333.596 649.404 C 333.091 650.013,333.296 657.574,333.882 659.963 C 334.478 662.392,335.200 659.548,335.187 654.824 C 335.174 649.869,334.661 648.122,333.596 649.404 M65.846 653.926 C 65.388 654.667,65.385 671.774,65.842 672.547 C 66.411 673.508,66.635 671.884,67.212 662.600 C 67.445 658.860,67.673 655.350,67.718 654.800 C 67.802 653.774,66.357 653.099,65.846 653.926 M197.200 715.992 C 195.770 716.165,192.565 716.328,190.078 716.353 C 183.696 716.419,182.168 717.120,181.789 720.152 C 181.103 725.638,181.778 745.691,182.715 747.678 C 183.301 748.921,183.600 750.316,183.600 751.805 C 183.600 753.822,183.743 754.205,184.990 755.527 L 186.379 757.000 202.297 757.131 L 218.216 757.263 219.486 755.682 L 220.756 754.102 220.304 750.751 C 220.055 748.908,219.805 740.665,219.749 732.434 C 219.649 717.936,219.620 717.442,218.823 716.645 C 217.916 715.739,203.009 715.288,197.200 715.992 M176.200 770.000 L 174.200 770.230 177.400 770.583 C 179.160 770.777,184.200 770.889,188.600 770.833 C 204.284 770.632,207.094 770.660,214.600 771.092 C 222.707 771.559,232.527 770.705,227.585 769.963 C 225.411 769.637,179.062 769.670,176.200 770.000 M167.712 770.295 C 168.764 770.377,170.384 770.376,171.312 770.292 C 172.240 770.208,171.380 770.141,169.400 770.142 C 167.420 770.143,166.660 770.212,167.712 770.295 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path></g></svg>
\ No newline at end of file
diff --git a/src/assets/image/c.png b/src/assets/image/c.png
new file mode 100644
index 0000000..f12ae25
Binary files /dev/null and b/src/assets/image/c.png differ
diff --git a/src/assets/image/c1.jpg b/src/assets/image/c1.jpg
new file mode 100644
index 0000000..12da85a
Binary files /dev/null and b/src/assets/image/c1.jpg differ
diff --git a/src/assets/image/c12.jpg b/src/assets/image/c12.jpg
new file mode 100644
index 0000000..667c579
Binary files /dev/null and b/src/assets/image/c12.jpg differ
diff --git a/src/assets/image/c13.jpg b/src/assets/image/c13.jpg
new file mode 100644
index 0000000..c241d12
Binary files /dev/null and b/src/assets/image/c13.jpg differ
diff --git a/src/assets/image/c14.jpg b/src/assets/image/c14.jpg
new file mode 100644
index 0000000..fe2d078
Binary files /dev/null and b/src/assets/image/c14.jpg differ
diff --git a/src/assets/image/c15.jpg b/src/assets/image/c15.jpg
new file mode 100644
index 0000000..104e012
Binary files /dev/null and b/src/assets/image/c15.jpg differ
diff --git a/src/assets/image/c16.png b/src/assets/image/c16.png
new file mode 100644
index 0000000..1df1819
Binary files /dev/null and b/src/assets/image/c16.png differ
diff --git a/src/assets/image/c17.jpg b/src/assets/image/c17.jpg
new file mode 100644
index 0000000..714e20b
Binary files /dev/null and b/src/assets/image/c17.jpg differ
diff --git a/src/assets/image/c2.jpg b/src/assets/image/c2.jpg
new file mode 100644
index 0000000..cc69d12
Binary files /dev/null and b/src/assets/image/c2.jpg differ
diff --git a/src/assets/image/callus.png b/src/assets/image/callus.png
new file mode 100644
index 0000000..9a5863d
Binary files /dev/null and b/src/assets/image/callus.png differ
diff --git a/src/assets/image/cancel.jpg b/src/assets/image/cancel.jpg
new file mode 100644
index 0000000..caa0496
Binary files /dev/null and b/src/assets/image/cancel.jpg differ
diff --git a/src/assets/image/car.ico b/src/assets/image/car.ico
new file mode 100644
index 0000000..5611651
Binary files /dev/null and b/src/assets/image/car.ico differ
diff --git a/src/assets/image/car.png b/src/assets/image/car.png
new file mode 100644
index 0000000..5a9fe7e
Binary files /dev/null and b/src/assets/image/car.png differ
diff --git a/src/assets/image/car_1.png b/src/assets/image/car_1.png
new file mode 100644
index 0000000..a3906c0
Binary files /dev/null and b/src/assets/image/car_1.png differ
diff --git a/src/assets/image/car_green.png b/src/assets/image/car_green.png
new file mode 100644
index 0000000..794b189
Binary files /dev/null and b/src/assets/image/car_green.png differ
diff --git a/src/assets/image/cars.png b/src/assets/image/cars.png
new file mode 100644
index 0000000..e44e85f
Binary files /dev/null and b/src/assets/image/cars.png differ
diff --git a/src/assets/image/cartracking.png b/src/assets/image/cartracking.png
new file mode 100644
index 0000000..9ec1f3d
Binary files /dev/null and b/src/assets/image/cartracking.png differ
diff --git a/src/assets/image/circle_white_16_ns.png b/src/assets/image/circle_white_16_ns.png
new file mode 100644
index 0000000..58f84fa
Binary files /dev/null and b/src/assets/image/circle_white_16_ns.png differ
diff --git a/src/assets/image/close.png b/src/assets/image/close.png
new file mode 100644
index 0000000..eb3b155
Binary files /dev/null and b/src/assets/image/close.png differ
diff --git a/src/assets/image/cloud.gif b/src/assets/image/cloud.gif
new file mode 100644
index 0000000..d921815
Binary files /dev/null and b/src/assets/image/cloud.gif differ
diff --git a/src/assets/image/collect (1).png b/src/assets/image/collect (1).png
new file mode 100644
index 0000000..f3fdfdc
Binary files /dev/null and b/src/assets/image/collect (1).png differ
diff --git a/src/assets/image/collect.png b/src/assets/image/collect.png
new file mode 100644
index 0000000..f3fdfdc
Binary files /dev/null and b/src/assets/image/collect.png differ
diff --git a/src/assets/image/coming.gif b/src/assets/image/coming.gif
new file mode 100644
index 0000000..b24a199
Binary files /dev/null and b/src/assets/image/coming.gif differ
diff --git a/src/assets/image/compass.png b/src/assets/image/compass.png
new file mode 100644
index 0000000..c6b2675
Binary files /dev/null and b/src/assets/image/compass.png differ
diff --git a/src/assets/image/constr.jpg b/src/assets/image/constr.jpg
new file mode 100644
index 0000000..4c760e7
Binary files /dev/null and b/src/assets/image/constr.jpg differ
diff --git a/src/assets/image/contact.controller (1).js b/src/assets/image/contact.controller (1).js
new file mode 100644
index 0000000..c0a78d9
--- /dev/null
+++ b/src/assets/image/contact.controller (1).js	
@@ -0,0 +1,6198 @@
+
+const Contact = require('../models/contacts');
+const Otp = require('../models/otpdb');
+var jwt = require('jsonwebtoken');
+var nodemailer = require('nodemailer');
+var mailer = require('../controllers/mailer');
+var request = require("request");
+var Count = require('../models/counter')
+var crypto = require('crypto');
+const Device = require('../models/device');
+var ObjectId = require('mongodb').ObjectID;
+var Utilities = require('../controllers/utilities.controller');
+var mongoose = require('mongoose');
+var org = require('../models/organisation')
+var couponCode = require('../controllers/discountCode.controller');
+
+const _poi = require('../models/poi');
+
+//signUp and Email Verification
+
+// first_name: "ddddd"
+// last_name: "aaaaa"
+// email: "ga@adnate.in"
+// pass: "q1q1q1"
+// phone: "4434345554"
+// supAdmin: "59cbbdbe508f164aa2fef3d8"
+// isDealer: true
+// expdate: "2021-03-31T10:06:06.363Z"
+// Dealer: "5ab471736a40122297759ae9"
+// user_id: "13123234435"
+module.exports.createUserPeronalTracker = function (req, res) {
+  var pass = req.body.pass;
+  // delete req.body.pass;
+  req.body.salt = crypto.randomBytes(16).toString('hex');
+  req.body.hash = crypto.pbkdf2Sync(pass, req.body.salt, 1000, 64, 'sha1').toString('hex');
+  Contact.findOne({ $or: [{ "email": req.body.email }, { "phone": req.body.phone }] }).exec(function (err, data1) {
+    if (err) return res.send(err);
+
+    if (data1 == null) {
+      var _contact = new Contact(req.body);
+      _contact.save(function (err, data) {
+        if (err) res.status(500).json({ "message": "Something Is Wrong" });
+        res.send(data);
+      })
+    } else {
+      if (data1.email == req.body.email)
+        res.status(500).json({ "message": "email already exists" });
+      if (data1.phone == req.body.phone)
+        res.status(500).json({ "message": "Phone already exists" });
+    }
+  });
+
+}
+module.exports.createUser = function (req, res) {
+  var pass = req.body.pass;
+  // delete req.body.pass;
+  req.body.salt = crypto.randomBytes(16).toString('hex');
+  req.body.hash = crypto.pbkdf2Sync(pass, req.body.salt, 1000, 64, 'sha1').toString('hex');
+  Contact.findOne({ $or: [{ "email": req.body.email }, { "phone": req.body.phone }] }).exec(function (err, data1) {
+    if (err) return res.send(err);
+
+    if (data1 == null) {
+      var _contact = new Contact(req.body);
+      _contact.save(function (err, data) {
+        if (err) res.status(500).json({ "message": "Something Is Wrong" });
+        res.send(data);
+      })
+    } else {
+      if (data1.email == req.body.email)
+        res.status(500).json({ "message": "email already exists" });
+      if (data1.phone == req.body.phone)
+        res.status(500).json({ "message": "Phone already exists" });
+    }
+  });
+
+}
+
+module.exports.createUserMany = function (req, res, next) {
+  req.trackRoute = req.body.trackRoute;
+  req.poi = req.body.poi;
+  req.stopNames = req.body.stopNames;
+  req.body = req.body.parent;
+
+  //console.log("req.stopNames=>", req.stopNames);
+  _poi.insertMany(req.stopNames, function (error, docs) {
+    if (error) {
+      return console.log("ADD STOP POI DONE ERROR");
+    }
+    // console.log("ADD STOP POI DONE", JSON.stringify(docs));
+  });
+  for (var i = 0; i < req.body.length; i++) {
+    (function (reqdata, id) {
+      Contact.findOne({ phone: reqdata.phone }, function (err, adventure) {
+        if (adventure == null) {
+          (function (addPRED, id2) {
+            addPRED.salt = crypto.randomBytes(16).toString('hex');
+            addPRED.hash = crypto.pbkdf2Sync('Reset@123', addPRED.salt, 1000, 64, 'sha1').toString('hex');
+            var _contact = new Contact(addPRED);
+            _contact.save(function (err, data) {
+              if (id == (req.body.length - 1)) {
+                //res.send({msg:'if allDONE!'});
+
+                next();
+              }
+            })
+          })(reqdata, id);
+        } else {
+          if (id == (req.body.length - 1)) {
+            //res.send({msg:'else allDONE!'});
+            next();
+          }
+        }
+      })
+    })(req.body[i], i);
+
+  }
+}
+module.exports.createUserMany1 = function (req, res) {
+
+  async function cm() {
+    for (var dd in req.body) {
+
+      Contact.findOne({ phone: req.body[dd].phone }, function (err, adventure) {
+        if (err) return;
+        if (adventure == null) {
+          // 
+          req.body[dd].salt = crypto.randomBytes(16).toString('hex');
+          req.body[dd].hash = crypto.pbkdf2Sync('Reset@123', req.body[dd].salt, 1000, 64, 'sha1').toString('hex');
+          var _contact = new Contact(req.body[dd]);
+
+          _contact.save(function (err, data) {
+            if (err) res.status(500).json({ "message": "Something Is Wrong" });
+            // res.send(data);
+          })
+
+          // 
+        }
+      });
+
+    }
+  }
+  cm().then(function (resp) {
+    res.send({ "mag": "success" });
+  })
+
+
+
+}
+
+module.exports.editUser = function (req, res) {
+  var pass = req.body.pass;
+  req.body.salt = crypto.randomBytes(16).toString('hex');
+  req.body.hash = crypto.pbkdf2Sync(pass, req.body.salt, 1000, 64, 'sha1').toString('hex');
+
+  Contact.update({ _id: req.body._id }, { $set: req.body }, { multi: true }, function (err, data) {
+    if (err) return res.send(err);
+    else
+      res.send(data);
+  });
+}
+module.exports.updateImagePath = function (req, res) {
+  if (req.body.imageDoc) {
+
+    Contact.update({ _id: req.body._id }, { $set: { imageDoc: req.body.imageDoc } }, { multi: true }, function (err, data) {
+      if (err) return res.send(err);
+      else
+        res.send(data);
+    });
+  }
+
+}
+
+
+module.exports.signUp = function (req, res) {
+  if (req.body.org_name) {
+    newOrgJson = {
+      organisation_name: req.body.org_name,
+      phone: req.body.org_phone,
+      email: req.body.org_email,
+      website: req.body.org_website,
+    };
+    var newOrg = new org(JSON.parse(JSON.stringify(newOrgJson)));
+    newOrg.save(function (err, organisation) {
+      if (err) {
+        res.status(500).json({ "message": "Something Is Wrong" } + err);
+      }
+      if (organisation) {
+
+        if (req.body.email == null && req.body.phone == null || req.body.email == undefined && req.body.phone == undefined || req.body.email == "undefined" && req.body.phone == "undefined") {
+          return res.status(401).json({ "message": "Null Value Error" });
+        }
+        //superadmin can able to add dealer
+
+        else if (req.body.sysadmin == true) {
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, cuscount) {
+            if (error) {
+              console.error(error);
+            }
+            Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (err, dealcount) {
+              if (err) {
+                console.error(err);
+              }
+              if (req.body.email && req.body.phone) {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  role: req.body.roles,
+                  supAdmin: req.body.supAdmin,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  phone_verfi: true,
+                  isDealer: true,
+                  isSuperAdmin: false,
+                  Dealer: req.body.Dealer,
+                  supAdmin: req.body.supAdmin,
+                  custumerid: 'c_' + cuscount.seq,
+                  dealerid: 'd_' + dealcount.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  //   phone:'noNumber'+ counter.seq
+                };
+                if (req.body.group != "") {
+                  newUserJson.group = req.body.group;
+                }
+
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                // var newUser = new Contact(newUserJson);
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  else {
+                    res.status(200).json({ "message": "Registered Sucessfully" });
+
+                  }
+                })
+              }
+            });
+          });
+        }
+        else if (req.body.custumer == true) {
+         
+             var Distributer_string = req.body.user_id;
+          var user_regex = new RegExp(["^", Distributer_string, "$"].join(""), "i");
+          Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }, { user_id: user_regex }] }, function (err, user) {
+            if (err) {
+              console.error(err)
+            }
+            else if (user) {
+              if (user.email == req.body.email) {
+                res.status(200).json({ "message": "Email ID already exists" })
+              } else if (req.body.user_id == user.user_id) {
+                res.status(200).json({ "message": "USER_ID already exists" })
+              } else if (user.phone == req.body.phone) {
+                res.status(200).json({ "message": "Mobile Number already exists" })
+              } else {
+                res.status(200).json({ "message": "User Duplicate" })
+              }
+            }
+            else{
+            Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, counter) {
+              if (error) {
+                console.error(error);
+              }
+              if (req.body.email && req.body.phone) {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  supAdmin: req.body.supAdmin,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  phone_verfi: true,
+                  isDealer: false,
+                  Dealer: req.body.Dealer,
+                  custumerid: 'c_' + counter.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  // phone:'noNumber'+ counter.seq
+  
+                };
+  
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+  
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+  
+                // var newUser = new Contact(newUserJson);
+  
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    return;
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+  
+                })
+              }
+              else if (req.body.email) {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  email: req.body.email.toLowerCase(),
+                  phone: "nophone" + counter.seq,
+                  email_verfi: true,
+                  phone_verfi: true,
+                  isDealer: false,
+                  supAdmin: req.body.supAdmin,
+                  Dealer: req.body.Dealer,
+                  custumerid: 'c_' + counter.seq,
+  
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  //   phone:'noNumber'+ counter.seq
+  
+                };
+  
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+  
+  
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+  
+                // var newUser = new Contact(newUserJson);
+  
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+  
+                })
+              }
+              else if (req.body.phone) {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  supAdmin: req.body.supAdmin,
+                  phone_verfi: true,
+                  isDealer: false,
+                  Dealer: req.body.Dealer,
+                  email: 'noEmail' + counter.seq,
+  
+                  custumerid: 'c_' + counter.seq,
+  
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  //  email:'noEmail'+ counter.seq
+  
+                };
+  
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+  
+  
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+                // var newUser = new Contact(newUserJson);
+  
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+  
+                })
+              }
+              else {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  phone: req.body.phone,
+                  email: req.body.email.toLowerCase(),
+                  email_verfi: true,
+                  phone_verfi: true,
+                  supAdmin: req.body.supAdmin,
+                  isDealer: false,
+                  Dealer: req.body.Dealer,
+                  custumerid: 'c_' + counter.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                };
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+  
+  
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+                // var newUser = new Contact(newUserJson);
+  
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+  
+                })
+              }
+  
+  
+            })
+          }
+          })
+
+        }
+        else if (req.body.otp && req.body.phone) {
+          var token;
+          Contact.findOne({ "phone": req.body.phone }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+            if (err) {
+              console.error(err);
+              return err;
+            }
+            if (otpres) {
+              //
+              var dbtime = new Date(otpres.timestamp);
+              var curtime = new Date();
+              var diffMs = (curtime - dbtime); // milliseconds between now & Christmas
+              var diffDays = Math.floor(diffMs / 86400000); // days
+              var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
+              var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
+              if (otpres.otp == req.body.otp) {
+                Contact.update({ _id: otpres._id }, { $set: { phone_verfi: true } }, function (err, result) {
+                  if (err) {
+                    console.error(err)
+                    return res.status(400).send(err);
+                  }
+                  else {
+                    return res.status(200).json({ "message": "Mobile Verified" });
+                  }
+                });
+              }
+              else {
+                res.status(500).json({ "message": "Didn't match otp" });
+              }
+            }
+          })
+        }
+        else if (req.body.phone && req.body.email) {
+          var Distributer_string = req.body.user_id;
+          var user_regex = new RegExp(["^", Distributer_string, "$"].join(""), "i");
+          Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }, { user_id: user_regex }] }, function (err, user) {
+            if (err) {
+              console.error(err)
+            }
+            else if (user) {
+              if (user.email == req.body.email) {
+                res.status(200).json({ "message": "Email ID already exists" })
+              } else if (req.body.user_id == user.user_id) {
+                res.status(200).json({ "message": "USER_ID already exists" })
+              } else if (user.phone == req.body.phone) {
+                res.status(200).json({ "message": "Mobile Number already exists" })
+              } else {
+                res.status(200).json({ "message": "User Duplicate" })
+              }
+            }
+            else {
+              function randomString(length, chars) {
+                var mask = '';
+                if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+                if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+                if (chars.indexOf('#') > -1) mask += '0123456789';
+                if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+                var result = '';
+                for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+                return result;
+              }
+              var otprand = randomString(4, '#');
+              var randomemail = randomString(16, '#aA!');
+
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+                if (req.body.dealer == true) {
+
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                    var newUserJson = {
+
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      supAdmin: req.body.supAdmin,
+                      org: organisation._id,
+                      email: req.body.email.toLowerCase(),
+                      phone: req.body.phone,
+                      email_verfi: true,
+                      phone_verfi: true,
+                      otp: otprand,
+                      id_email_ver: randomemail,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+
+                      timezone: req.body.timezone
+                    };
+                    //console.log("Inside otp function0");
+
+                    if (req.body.std_code) {
+                      newUserJson['std_code'] = req.body.std_code;
+                    }
+
+
+                    var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                    newUser.setPassword(req.body.password);
+                    newUser.setLastReportDate();
+                    newUser.save(function (err) {
+                      if (err) {
+                        if (err.name === 'MongoError' && err.code === 11000) {
+                          // Duplicate username
+                          return res.status(200).send({ succes: false, message: 'User already exist!' });
+                        }
+
+                        // Some other error
+                        return res.status(500).send(err);
+                      }
+                      else {
+                        request({
+                          uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + req.body.phone + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + otprand,
+                          method: "GET"
+                        }, function (error, response, body) {
+                          /* var jsonObj = JSON.parse(response.body);
+                          if(jsonObj.MsgStatus == 'Sent'){
+                            email(req.body.first_name,req.body.email,randomemail);
+                            res.status(200).json({"message" : "OTP sent successfully"})
+                            
+                          }
+                          else{
+                            res.status(500).json({"message" : "OTP sent Failed"})
+                            Contact.remove({"phone" :req.body.phone}).then(function(err){
+                              if(err){
+                                res.send(err);
+                                return err;
+                              }
+                            });
+                          } */
+                          res.status(200).json({ "message": "OTP sent successfully1" })
+                        });
+                      }
+                    })
+
+                  })
+
+                }
+                else {
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    org: organisation._id,
+                    supAdmin: req.body.supAdmin,
+                    email: req.body.email.toLowerCase(),
+                    phone: req.body.phone,
+                    email_verfi: true,
+                    phone_verfi: true,
+                    otp: otprand,
+                    id_email_ver: randomemail,
+                    isDealer: req.body.dealer,
+                    custumerid: 'c_' + count.seq,
+                    timezone: req.body.timezone
+                  };
+
+                  // console.log("Inside otp function1");
+
+                  if (req.body.std_code) {
+                    newUserJson['std_code'] = req.body.std_code;
+                  }
+
+
+                  var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                  newUser.setPassword(req.body.password);
+                  newUser.setLastReportDate();
+                  newUser.save(function (err) {
+                    if (err) {
+                      res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    }
+                    email(req.body.first_name, req.body.email, randomemail);
+                    request({
+                      uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + req.body.phone + Utilities.getConfig().smsApiTextKey + 'Use%20this%20One%20Time%20Password%20to%20validate%20your%20login ' + otprand,
+                      method: "GET"
+                    }, function (error, response, body) {
+                      /* var jsonObj = JSON.parse(response.body);
+                      if(jsonObj.MsgStatus == 'Sent'){
+                        email(req.body.first_name,req.body.email,randomemail);
+                        res.status(200).json({"message" : "OTP sent successfully"})
+                        
+                      }
+                      else{
+                        res.status(500).json({"message" : "OTP sent Failed"})
+                        Contact.remove({"phone" :req.body.phone}).then(function(err){
+                          if(err){
+                            res.send(err);
+                            return err;
+                          }
+                        });
+                      } */
+                      res.status(200).json({ "message": "OTP sent successfully2" })
+                    });
+
+                  })
+
+                }
+
+              })
+
+            }
+          })
+
+        }
+
+
+        else if (req.body.phone) {
+          Contact.findOne({ "phone": req.body.phone }, function (err, ph) {
+            if (err) {
+              console.error(err);
+            }
+            else if (ph) {
+              res.status(500).json({ "message": "Mobile Number already Exists" })
+            }
+            else {
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+                if (req.body.dealer == true) {
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+
+                    var newUserJson = {
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      org: organisation._id,
+                      phone: req.body.phone,
+                      supAdmin: req.body.supAdmin,
+                      password: req.body.password,
+                      email_verfi: true,
+                      phone_verfi: true,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+                      email: 'noEmail' + count.seq,
+
+                      timezone: req.body.timezone
+                    };
+
+                    if (req.body.std_code) {
+                      newUserJson['std_code'] = req.body.std_code;
+                    }
+
+                    let datastore = newUserJson;
+                    //  let a = otp(newUserJson);
+                    otp(newUserJson, function (final_data) {
+
+                      if (final_data == true) {
+                        res.status(200).json({ "message": "OTP Successfully Sent0" });
+                      }
+                      else {
+                        res.status(500).json({ "message": "OTP sent Failed" })
+                        Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                          if (err) {
+                            // res.send(err);
+                            //  return err;
+                          }
+                        });
+                      }
+                    })
+                  })
+                }
+                else {
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    phone: req.body.phone,
+                    supAdmin: req.body.supAdmin,
+                    password: req.body.password,
+                    isDealer: req.body.dealer,
+                    custumerid: 'c_' + count.seq,
+                    email: 'noEmail' + count.seq,
+                    email_verfi: true,
+                    phone_verfi: true,
+                    timezone: req.body.timezone
+
+                  };
+                  // otp(newUserJson);
+                  //  let a = otp(newUserJson);
+
+                  if (req.body.std_code) {
+                    newUserJson['std_code'] = req.body.std_code;
+                  }
+
+
+                  otp(newUserJson, function (final_data) {
+
+                    if (final_data == true) {
+                      res.status(200).json({ "message": "OTP Successfully Sent" });
+                    }
+                    else {
+                      res.status(500).json({ "message": "OTP sent Failed" })
+                      Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                        if (err) {
+                          // res.send(err);
+                          // return err;
+                        }
+                      });
+                    }
+
+                  })
+                }
+
+              })
+            }
+          })
+
+
+        }
+
+
+
+        else if (req.body.email) {
+
+          var randomemail = Math.floor((Math.random() * 100000000000000) + 54);
+          Contact.findOne({ "email": req.body.email.toLowerCase() }, function (err, em) {
+            if (err) {
+              console.error(err);
+            }
+            else if (em) {
+              res.status(500).json({ "message": "Email ID already Exists" })
+            }
+            else {
+
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+
+                if (req.body.dealer == true) {
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                    var newUserJson = {
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      org: organisation._id,
+                      supAdmin: req.body.supAdmin,
+                      email: req.body.email.toLowerCase(),
+                      email_verfi: true,
+                      phone_verfi: true,
+                      id_email_ver: randomemail,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+                      phone: 'noNumber' + count.seq,
+
+                      timezone: req.body.timezone
+                    };
+
+                    if (req.body.std_code) {
+                      newUserJson['std_code'] = req.body.std_code;
+                    }
+
+                    var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                    newUser.setPassword(req.body.password);
+                    newUser.setLastReportDate();
+
+                    newUser.save(function (err) {
+                      if (err) {
+                        res.status(500).json({ "message": "Something Is Wrong" } + err);
+                      }
+                      res.status(200).json({ "message": "Registered Sucessfully" });
+
+                    })
+                    email(req.body.first_name, req.body.email, randomemail);
+                  })
+
+                }
+                else {
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    supAdmin: req.body.supAdmin,
+                    email: req.body.email.toLowerCase(),
+                    email_verfi: true,
+                    phone_verfi: true,
+                    id_email_ver: randomemail,
+                    isDealer: req.body.dealer,
+                    custumerid: 'c_' + count.seq,
+                    phone: 'noNumber' + count.seq,
+
+                    timezone: req.body.timezone
+                  };
+
+
+                  if (req.body.std_code) {
+                    newUserJson['std_code'] = req.body.std_code;
+                  }
+
+
+                  var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                  newUser.setPassword(req.body.password);
+                  newUser.setLastReportDate();
+
+                  newUser.save(function (err) {
+                    if (err) {
+                      res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    }
+                    res.status(200).json({ "message": "Registered Sucessfully" });
+
+                  })
+                  email(req.body.first_name, req.body.email, randomemail);
+                }
+              })
+            }
+          })
+        }
+        else {
+          res.status(500).json({ "message": "Something Is Missing Email id or Phone Number" });
+        }
+
+      }
+      else {
+        res.status(400).send({ "message": "Server error" })
+      }
+
+    })
+  }
+  else {
+    // if (req.body.email == null && req.body.phone == null || req.body.email == undefined && req.body.phone == undefined || req.body.email == "undefined" && req.body.phone == "undefined") {
+    //   return res.status(401).json({ "message": "Null Value Error" });
+    // }
+    //superadmin can able to add dealer
+
+    // else
+    if (req.body.sysadmin == true) {
+      Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, cuscount) {
+        if (error) {
+          console.error(error);
+        }
+        Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (err, dealcount) {
+          if (err) {
+            console.error(err);
+          }
+          if (req.body.email && req.body.phone) {
+
+
+            var user_string = req.body.user_id;
+            var user_regex = new RegExp(["^", user_string, "$"].join(""), "i");
+
+            Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }, { 'user_id': user_regex }] }, function (err, user) {
+              if (err) {
+                console.error(err)
+              }
+              else if (user) {
+                if (user.email == req.body.email) {
+                  res.status(200).json({ "message": "Email ID already exists" })
+                } else if (req.body.user_id == user.user_id) {
+                  res.status(200).json({ "message": "USER_ID already exists" })
+                } else if (user.phone == req.body.phone) {
+                  res.status(200).json({ "message": "Mobile Number already exists" })
+                } else {
+                  res.status(200).json({ "message": "User Duplicate" })
+                }
+              }
+              else {
+
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  role: req.body.roles,
+                  group: req.body.group,
+                  supAdmin: req.body.supAdmin,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  phone_verfi: true,
+                  isDealer: true,
+                  isSuperAdmin: false,
+                  Dealer: req.body.Dealer,
+                  supAdmin: req.body.supAdmin,
+                  custumerid: 'c_' + cuscount.seq,
+                  dealerid: 'd_' + dealcount.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  //   phone:'noNumber'+ counter.seq
+                };
+
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+
+                if (req.body.customer_role) {
+                  newUserJson['customer_role'] = req.body.customer_role;
+                }
+
+                var admin_identifier = req.body.supAdmin;
+                var tracktiveAndroidLink = 'https://play.google.com/store/apps/details?id=com.trackTive.ionic';
+                var tracktiveIOSlink = 'https://apps.apple.com/us/app/tracktive/id1467327906?ls=1';
+                if (req.body.imageDoc) {
+                  newUserJson.imageDoc = req.body.imageDoc;
+                }
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                // var newUser = new Contact(newUserJson);
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    return;
+                  }
+                  //   res.status(200).json({ "message": "Registered Sucessfully" });
+                  var SMSURL = Utilities.getConfig().smsUrl;
+
+                  var mobile_key = Utilities.getConfig().smsApiMobileKey;
+                  var txt_key = Utilities.getConfig().smsApiTextKey;
+
+                  // ======================================sms according to superAdmin =================================================
+                  Contact.findOne({ _id: admin_identifier }, function (err, adminDetail) {
+                    if (err) {
+                      res.status(400).send({ "message": "not able to fetch supadmin" });
+
+                    }
+
+                    var msgOption = adminDetail.welcome_msg;
+                    // Saanvi Security Solution
+                    if ((msgOption != undefined) && (msgOption == true)) {
+                      var organisationName = ((adminDetail.organisation_name != undefined) || (adminDetail.organisation_name != '')) ? adminDetail.organisation_name : 'OneQlik GPS';
+
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password;
+                      if (organisationName == 'Tractive VTS') {
+                        SMSURL += '&sender=TRACTV';
+                        var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + "%20App%20%Download%20link%20Android%20" + tracktiveAndroidLink + '%20IOS%20' + tracktiveIOSlink + '%20WEB%20LOGIN%20' + 'https://www.tracktive.in/login';
+                      } else if (organisationName === 'IConnect Technologies') {
+                        SMSURL = Utilities.getConfig().smsUrl_iconnect;
+                        SMSURL += '&senderid=AMASEC';
+                        mobile_key = Utilities.getConfig().smsApiMobileKey_iconnect;
+                        txt_key = Utilities.getConfig().smsApiTextKey_iconnect;
+                        var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.iconnectindia.in';
+                      } else if (organisationName === 'Saanvi Security Solution') {
+                        SMSURL = Utilities.getConfig().smsUrl_saanvi;
+                        mobile_key = Utilities.getConfig().smsApiMobileKey_saanvi;
+                        txt_key = Utilities.getConfig().smsApiTextKey_saanvi;
+                        var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.saanvisecurity.in';
+                      }
+                      else {
+                        SMSURL += '&sender=OneQlk';
+                      }
+
+                      request({
+                        uri: SMSURL + mobile_key + req.body.phone + txt_key + userCred1,
+                        method: "GET"
+                      }, function (error, response, body) {
+                        res.status(200).json({ "message": "Registered and Message Sent Successfuly" })
+                      });
+
+                    } else {
+                      res.status(200).json({ "message": "Registered" })
+                    }
+
+
+                  })
+
+                  // ======================================sms according to superAdmin =================================================
+
+                })
+              }
+            })
+
+          } else if (req.body.user_id) {
+            var user_string = req.body.user_id;
+            var user_regex = new RegExp(["^", user_string, "$"].join(""), "i");
+
+            Contact.findOne({ 'user_id': user_regex }, function (err, user) {
+              if (err) {
+                console.error(err)
+              }
+              else if (user) {
+
+                res.status(200).json({ "message": "User Duplicate" })
+
+              }
+              else {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  role: req.body.roles,
+                  group: req.body.group,
+                  supAdmin: req.body.supAdmin,
+                  email: 'no_email' + cuscount.seq + '@testmail.com',
+                  phone: 'no_phone' + cuscount.seq,
+                  email_verfi: true,
+                  phone_verfi: true,
+
+                  isSuperAdmin: false,
+
+                  supAdmin: req.body.supAdmin,
+                  custumerid: 'c_' + cuscount.seq,
+                  dealerid: 'd_' + dealcount.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  address: req.body.address,
+                  expire_date: new Date(req.body.expdate)
+                  //   phone:'noNumber'+ counter.seq
+                };
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+
+                if (req.body.isDealer === true) {
+                  newUserJson['isDealer'] = req.body.isDealer;
+                } else {
+                  newUserJson['isDealer'] = false;
+                  newUserJson['Dealer'] = req.body.Dealer;
+                }
+
+
+                if (req.body.imageDoc) {
+                  newUserJson.imageDoc = req.body.imageDoc;
+                }
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                // var newUser = new Contact(newUserJson);
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    return;
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+                })
+              }
+            })
+
+          }
+
+        });
+      });
+    }
+    else if (req.body.custumer == true) {
+
+      Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, counter) {
+
+        if (error) {
+          console.error(error);
+        }
+
+        var user_string = req.body.user_id;
+        var user_regex = new RegExp(["^", user_string, "$"].join(""), "i");
+        Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }, { 'user_id': user_regex }] }, function (err, user) {
+          
+          if (err) {
+            console.error(err)
+          }
+          else if ((user) && ((req.body.phone) || (req.body.email != null))) {
+            if (user.email == req.body.email) {
+              res.status(200).json({ "message": "Email ID already exists" })
+            } else if (req.body.user_id == user.user_id) {
+              res.status(200).json({ "message": "USER_ID already exists" })
+            } else if (user.phone == req.body.phone) {
+              res.status(200).json({ "message": "Mobile Number already exists" })
+            } else {
+              res.status(200).json({ "message": "User Duplicate" })
+            }
+          }else if((user)&&(req.body.phone == undefined)&&(req.body.email == null)){
+            if(req.body.user_id == user.user_id){
+              res.status(200).json({ "message": "USER_ID already exists" })
+            }else{
+              res.status(200).json({ "message": "Error in line 1084" })
+            }
+          }                                                                   
+          else {
+            if (req.body.email && req.body.phone) {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                phone: req.body.phone,
+                supAdmin: req.body.supAdmin,
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                expire_date: new Date(req.body.expdate)
+                //   phone:'noNumber'+ counter.seq
+
+              };
+
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+              if (req.body.imageDoc) {
+                newUserJson.imageDoc = req.body.imageDoc;
+              }
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              // var newUser = new Contact(newUserJson);
+              var admin_identifier = req.body.supAdmin;
+              var tracktiveAndroidLink = 'https://play.google.com/store/apps/details?id=com.trackTive.ionic';
+              var tracktiveIOSlink = 'https://apps.apple.com/us/app/tracktive/id1467327906?ls=1';
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  return;
+                }
+                //   res.status(200).json({ "message": "Registered Sucessfully" });
+                // console.log("INside Signup function");
+                // console.log(req.body.phone);
+                // console.log(req.body.password);
+                var SMSURL = Utilities.getConfig().smsUrl;
+
+                var mobile_key = Utilities.getConfig().smsApiMobileKey;
+                var txt_key = Utilities.getConfig().smsApiTextKey;
+
+                // ======================================sms according to superAdmin =================================================
+                Contact.findOne({ _id: admin_identifier }, function (err, adminDetail) {
+                  if (err) {
+                    res.status(400).send({ "message": "not able to fetch supadmin" });
+
+                  }
+
+
+                  var msgOption = adminDetail.welcome_msg;
+
+
+                  if ((msgOption != undefined) && (msgOption == true)) {
+                    var organisationName = ((adminDetail.organisation_name != undefined) || (adminDetail.organisation_name != '')) ? adminDetail.organisation_name : 'OneQlik GPS';
+                    var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password;
+                    if (organisationName == 'Tractive VTS') {
+                      SMSURL += '&sender=TRACTV';
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + "%20App%20%Download%20link%20Android%20" + tracktiveAndroidLink + '%20IOS%20' + tracktiveIOSlink + '%20WEB%20LOGIN%20' + 'https://www.tracktive.in/login';
+                    } else if (organisationName === 'IConnect Technologies') {
+                      SMSURL = Utilities.getConfig().smsUrl_iconnect;
+                      SMSURL += '&senderid=AMASEC';
+                      mobile_key = Utilities.getConfig().smsApiMobileKey_iconnect;
+                      txt_key = Utilities.getConfig().smsApiTextKey_iconnect;
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.iconnectindia.in';
+                    } else if (organisationName === 'Saanvi Security Solution') {
+                      SMSURL = Utilities.getConfig().smsUrl_saanvi;
+                      mobile_key = Utilities.getConfig().smsApiMobileKey_saanvi;
+                      txt_key = Utilities.getConfig().smsApiTextKey_saanvi;
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.saanvisecurity.in';
+                    } else {
+                      SMSURL += '&sender=OneQlk';
+                    }
+
+
+
+                    request({
+                      uri: SMSURL + mobile_key + req.body.phone + txt_key + userCred1,
+                      method: "GET"
+                    }, function (error, response, body) {
+                      res.status(200).json({ "message": "Registered and Message Sent Successfuly" })
+                    });
+
+                  } else {
+                    res.status(200).json({ "message": "Registered" })
+                  }
+                })
+
+                // ======================================sms according to superAdmin =================================================
+              })
+            }
+            else if (req.body.email) {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                phone: "nophone" + counter.seq,
+                email_verfi: true,
+                supAdmin: req.body.supAdmin,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                expire_date: new Date(req.body.expdate)
+                //   phone:'noNumber'+ counter.seq
+
+              };
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+
+              if (req.body.imageDoc) {
+                newUserJson.imageDoc = req.body.imageDoc;
+              }
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+
+
+              })
+            }
+            else if (req.body.phone) {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                phone: req.body.phone,
+                email_verfi: true,
+                supAdmin: req.body.supAdmin,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                email: 'noEmail' + counter.seq,
+
+                custumerid: 'c_' + counter.seq,
+
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                expire_date: new Date(req.body.expdate)
+                //  email:'noEmail'+ counter.seq
+
+              };
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+              if (req.body.imageDoc) {
+                newUserJson.imageDoc = req.body.imageDoc;
+              }
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              // var newUser = new Contact(newUserJson);
+              var admin_identifier = req.body.supAdmin;
+              var tracktiveAndroidLink = 'https://play.google.com/store/apps/details?id=com.trackTive.ionic';
+              var tracktiveIOSlink = 'https://apps.apple.com/us/app/tracktive/id1467327906?ls=1';
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+
+                var SMSURL = Utilities.getConfig().smsUrl;
+                var mobile_key = Utilities.getConfig().smsApiMobileKey;
+                var txt_key = Utilities.getConfig().smsApiTextKey;
+
+                // ======================================sms according to superAdmin =================================================
+                Contact.findOne({ _id: admin_identifier }, function (err, adminDetail) {
+                  if (err) {
+                    res.status(400).send({ "message": "not able to fetch supadmin" });
+
+                  }
+
+                  var msgOption = adminDetail.welcome_msg;
+
+                  if ((msgOption != undefined) && (msgOption == true)) {
+                    var organisationName = ((adminDetail.organisation_name != undefined) || (adminDetail.organisation_name != '')) ? adminDetail.organisation_name : 'OneQlik GPS';
+
+                    var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password;
+
+                    if (organisationName == 'Tractive VTS') {
+                      SMSURL += '&sender=TRACTV';
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + "%20App%20%Download%20link%20Android%20" + tracktiveAndroidLink + '%20IOS%20' + tracktiveIOSlink + '%20WEB%20LOGIN%20' + 'https://www.tracktive.in/login';
+                    } else if (organisationName === 'IConnect Technologies') {
+                      SMSURL = Utilities.getConfig().smsUrl_iconnect;
+                      SMSURL += '&senderid=AMASEC';
+                      mobile_key = Utilities.getConfig().smsApiMobileKey_iconnect;
+                      txt_key = Utilities.getConfig().smsApiTextKey_iconnect;
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.iconnectindia.in';
+                    } else if (organisation_name === 'Saanvi Security Solution') {
+                      SMSURL = Utilities.getConfig().smsUrl_saanvi;
+                      mobile_key = Utilities.getConfig().smsApiMobileKey_saanvi;
+                      txt_key = Utilities.getConfig().smsApiTextKey_saanvi;
+                      var userCred1 = 'Dear%20' + req.body.first_name + "%20Welcome%20to%20" + organisationName + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + req.body.phone + '%20Password%20' + req.body.password + '%20WEB%20LOGIN%20' + 'http://www.saanvisecurity.in';
+                    } else {
+                      SMSURL += '&sender=OneQlk';
+                    }
+
+
+                    request({
+                      uri: SMSURL + mobile_key + req.body.phone + txt_key + userCred1,
+                      method: "GET"
+                    }, function (error, response, body) {
+                      res.status(200).json({ "message": "Registered and Message Sent Successfuly" })
+                    });
+
+                  } else {
+                    res.status(200).json({ "message": "Registered" })
+                  }
+                })
+
+                // ======================================sms according to superAdmin =================================================
+
+              })
+            }
+            else {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                phone: 'no_phone' + counter.seq,
+                supAdmin: req.body.supAdmin,
+                email: 'no_email' + counter.seq + '@testmail.com',
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                expire_date: new Date(req.body.expdate)
+              };
+
+
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+
+              if (req.body.imageDoc) {
+                newUserJson.imageDoc = req.body.imageDoc;
+              }
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+            }
+          }
+        })
+
+
+      })
+
+    }
+    else if (req.body.otp && req.body.phone) {
+      var token;
+      Contact.findOne({ "phone": req.body.phone }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+        if (err) {
+          console.error(err);
+          return err;
+        }
+        if (otpres) {
+          //
+          var dbtime = new Date(otpres.timestamp);
+          var curtime = new Date();
+          var diffMs = (curtime - dbtime); // milliseconds between now & Christmas
+          var diffDays = Math.floor(diffMs / 86400000); // days
+          var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
+          var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
+          if (otpres.otp == req.body.otp) {
+            Contact.update({ _id: otpres._id }, { $set: { phone_verfi: true } }, function (err, result) {
+              if (err) {
+                console.error(err)
+                return res.status(400).send(err);
+              }
+              else {
+                return res.status(200).json({ "message": "Mobile Verified" });
+              }
+            });
+          }
+          else {
+            res.status(500).json({ "message": "Didn't match otp" });
+          }
+        }
+      })
+    }
+    else if (req.body.phone && req.body.email) {
+      var Distributer_string = req.body.user_id;
+      var user_regex = new RegExp(["^", Distributer_string, "$"].join(""), "i");
+
+      Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }, { 'user_id': user_regex }] }, function (err, user) {
+        if (err) {
+          console.error(err)
+        }
+        else if (user) {
+
+          if (user.email == req.body.email) {
+            res.status(200).json({ "message": "Email ID already exists" })
+          } else if (req.body.user_id == user.user_id) {
+            res.status(200).json({ "message": "USER_ID already exists" })
+          } else if (user.phone == req.body.phone) {
+            res.status(200).json({ "message": "Mobile Number already exists" })
+          } else {
+            res.status(200).json({ "message": "User Duplicate" })
+          }
+
+
+        }
+        else {
+          function randomString(length, chars) {
+            var mask = '';
+            if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+            if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+            if (chars.indexOf('#') > -1) mask += '0123456789';
+            if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+            var result = '';
+            for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+            return result;
+          }
+          var otprand = randomString(4, '#');
+          var randomemail = randomString(16, '#aA!');
+
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+            if (req.body.dealer == true) {
+
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                var newUserJson = {
+
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  supAdmin: req.body.supAdmin,
+                  phone_verfi: true,
+                  otp: otprand,
+                  id_email_ver: randomemail,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  timezone: req.body.timezone
+                };
+
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+                if (req.body.organisation) {
+                  newUserJson.organisation = req.body.organisation;
+                  newUserJson.isSuperAdmin = req.body.isSuperAdmin;
+                  newUserJson.isDealer = false;
+                  newUserJson.phone_verfi = true;
+                  newUserJson.organisation_name = req.body.organisation_name;
+                  newUserJson.welcome_msg = req.body.welcome_msg;
+
+
+                  newUserJson.user_id = req.body.user_id;
+                }
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+                newUser.save(function (err) {
+                  if (err) {
+                    if (err.name === 'MongoError' && err.code === 11000) {
+                      // Duplicate username
+                      return res.status(200).send({ succes: false, message: 'User already exist!' });
+                    }
+
+                    // Some other error
+                    return res.status(500).send(err);
+                  }
+                  else {
+                    request({
+                      uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + req.body.phone + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + otprand,
+                      method: "GET"
+                    }, function (error, response, body) {
+                      /* var jsonObj = JSON.parse(response.body);
+                      if(jsonObj.MsgStatus == 'Sent'){
+                        email(req.body.first_name,req.body.email,randomemail);
+                        res.status(200).json({"message" : "OTP sent successfully"})
+                        
+                      }
+                      else{
+                        res.status(500).json({"message" : "OTP sent Failed"})
+                        Contact.remove({"phone" :req.body.phone}).then(function(err){
+                          if(err){
+                            res.send(err);
+                            return err;
+                          }
+                        });
+                      } */
+                      res.status(200).json({ "message": "OTP sent successfully3" })
+                    });
+                  }
+                })
+
+              })
+
+            }
+            else {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                phone: req.body.phone,
+
+                supAdmin: req.body.supAdmin,
+                Dealer: req.body.supAdmin,
+                phone_verfi: true,
+                email_verfi: true,
+                otp: otprand,
+                id_email_ver: randomemail,
+                isDealer: req.body.dealer ? req.body.dealer : req.body.isDealer,
+                custumerid: 'c_' + count.seq,
+                timezone: req.body.timezone,
+                custumer: true
+              };
+              //console.log("Inside otp function3");
+              //console.log("we are at 1158 while creating distributer");
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+              if (req.body.organisation) {
+                newUserJson.organisation = req.body.organisation;
+                newUserJson.user_id = req.body.user_id;
+                newUserJson.isSuperAdmin = req.body.isSuperAdmin;
+                newUserJson.organisation_name = req.body.organisation_name;
+                newUserJson.welcome_msg = req.body.welcome_msg;
+                newUserJson.isDealer = false;
+                newUserJson.phone_verfi = true;
+              }
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              if (req.body.purpose == "zettrack") {
+                var smsUri = Utilities.getConfig().ZettracksmsUrl + "&mobileNos=" + req.body.phone + "&message=" + "Welcome%20to%20ZTrack%20Sreerampore%20Use%20this%20One%20Time%20Password%20to%20validate%20your%20login" + otprand;
+              } else {
+                var smsUri = Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + req.body.phone + Utilities.getConfig().smsApiTextKey + 'Use%20this%20One%20Time%20Password%20to%20validate%20your%20login ' + otprand;
+              }
+              newUser.save(function (err, userObj) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                email(req.body.first_name, req.body.email, randomemail);
+                request({
+                  uri: smsUri,
+                  method: "GET"
+                }, function (error, response, body) {
+                  /* var jsonObj = JSON.parse(response.body);
+                  if(jsonObj.MsgStatus == 'Sent'){
+                    email(req.body.first_name,req.body.email,randomemail);
+                    res.status(200).json({"message" : "OTP sent successfully"})
+                    
+                  }
+                  else{
+                    res.status(500).json({"message" : "OTP sent Failed"})
+                    Contact.remove({"phone" :req.body.phone}).then(function(err){
+                      if(err){
+                        res.send(err);
+                        return err;
+                      }
+                    });
+                  } */
+                  res.status(200).json({ "message": "OTP sent successfully", "user": userObj })
+                });
+
+              })
+
+            }
+
+
+
+          })
+
+
+
+        }
+      })
+
+    }
+
+
+    else if (req.body.phone) {
+      Contact.findOne({ "phone": req.body.phone }, function (err, ph) {
+        if (err) {
+          console.error(err);
+        }
+        else if (ph) {
+          res.status(500).json({ "message": "Mobile Number already Exists" })
+        }
+        else {
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+            if (req.body.dealer == true) {
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  phone: req.body.phone,
+                  supAdmin: req.body.supAdmin,
+                  password: req.body.password,
+                  phone_verfi: true,
+                  email_verfi: true,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  email: 'noEmail' + count.seq,
+
+                  timezone: req.body.timezone
+
+                };
+
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+                let datastore = newUserJson;
+                //  let a = otp(newUserJson);
+                otp(newUserJson, function (final_data) {
+
+                  if (final_data == true) {
+                    res.status(200).json({ "message": "OTP Successfully Sent" });
+                  }
+                  else {
+                    res.status(500).json({ "message": "OTP sent Failed" })
+                    Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                      if (err) {
+                        // res.send(err);
+                        //  return err;
+                      }
+                    });
+
+                  }
+
+                })
+
+              })
+
+
+            }
+            else {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                phone: req.body.phone,
+                supAdmin: req.body.supAdmin,
+                password: req.body.password,
+                phone_verfi: true,
+                email_verfi: true,
+                isDealer: req.body.dealer,
+                custumerid: 'c_' + count.seq,
+                email: 'noEmail' + count.seq,
+
+                timezone: req.body.timezone
+
+              };
+              // otp(newUserJson);
+              //  let a = otp(newUserJson);
+
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+              otp(newUserJson, function (final_data) {
+                if (final_data == true) {
+                  res.status(200).json({ "message": "OTP Successfully Sent" });
+                }
+                else {
+                  res.status(500).json({ "message": "OTP sent Failed" })
+                  Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                    if (err) {
+                      // res.send(err);
+                      // return err;
+                    }
+                  });
+                }
+
+              })
+            }
+
+          })
+        }
+      })
+
+
+    }
+
+
+
+    else if (req.body.email) {
+
+      var randomemail = Math.floor((Math.random() * 100000000000000) + 54);
+      Contact.findOne({ "email": req.body.email.toLowerCase() }, function (err, em) {
+        if (err) {
+          console.error(err);
+        }
+        else if (em) {
+          res.status(500).json({ "message": "Email ID already Exists" })
+        }
+        else {
+
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+
+            if (req.body.dealer == true) {
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  supAdmin: req.body.supAdmin,
+                  email: req.body.email.toLowerCase(),
+                  email_verfi: true,
+                  phone_verfi: true,
+                  id_email_ver: randomemail,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  phone: 'noNumber' + count.seq,
+
+                  timezone: req.body.timezone
+                };
+
+                if (req.body.std_code) {
+                  newUserJson['std_code'] = req.body.std_code;
+                }
+
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+
+                })
+                email(req.body.first_name, req.body.email, randomemail);
+              })
+
+            }
+            else {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                email_verfi: true,
+                phone_verfi: true,
+                supAdmin: req.body.supAdmin,
+                id_email_ver: randomemail,
+                isDealer: req.body.dealer,
+                custumerid: 'c_' + count.seq,
+                phone: 'noNumber' + count.seq,
+
+                timezone: req.body.timezone
+              };
+              if (req.body.std_code) {
+                newUserJson['std_code'] = req.body.std_code;
+              }
+
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+
+
+              })
+              email(req.body.first_name, req.body.email, randomemail);
+            }
+          })
+
+
+        }
+      })
+
+
+    }
+    else {
+      res.status(500).json({ "message": "Something Is Missing Email id or Phone Number" });
+    }
+
+  }
+}
+
+
+
+// ==============================
+module.exports.signUpZogo = function (req, res) {
+  if (req.body.org_name) {
+    //console.log("Inside function");
+    newOrgJson = {
+      organisation_name: req.body.org_name,
+      phone: req.body.org_phone,
+      email: req.body.org_email,
+      website: req.body.org_website,
+    };
+    var newOrg = new org(JSON.parse(JSON.stringify(newOrgJson)));
+    newOrg.save(function (err, organisation) {
+      if (err) {
+        res.status(500).json({ "message": "Something Is Wrong" } + err);
+      }
+      if (organisation) {
+
+        if (req.body.email == null && req.body.phone == null || req.body.email == undefined && req.body.phone == undefined || req.body.email == "undefined" && req.body.phone == "undefined") {
+          return res.status(401).json({ "message": "Null Value Error" });
+        }
+        //superadmin can able to add dealer
+
+        else if (req.body.sysadmin == true) {
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, cuscount) {
+            if (error) {
+              console.error(error);
+            }
+            Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (err, dealcount) {
+              if (err) {
+                console.error(err);
+              }
+              if (req.body.email && req.body.phone) {
+                console.log("1");
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: organisation._id,
+                  role: req.body.roles,
+                  group: req.body.group,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: true,
+                  phone_verfi: true,
+                  isDealer: true,
+                  isSuperAdmin: false,
+                  Dealer: req.body.Dealer,
+                  supAdmin: req.body.supAdmin,
+                  custumerid: 'c_' + cuscount.seq,
+                  dealerid: 'd_' + dealcount.seq,
+                  timezone: req.body.timezone,
+                  user_id: req.body.user_id,
+                  status: req.body.status,
+                  address: req.body.address,
+                  purpose: "zogo",
+                  expire_date: new Date(req.body.expdate)
+                  //   phone:'noNumber'+ counter.seq
+                };
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                // var newUser = new Contact(newUserJson);
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+                })
+              }
+            });
+          });
+        }
+        else if (req.body.custumer == true) {
+
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, counter) {
+
+            if (error) {
+              console.error(error);
+            }
+            if (req.body.email && req.body.phone) {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: organisation._id,
+                email: req.body.email.toLowerCase(),
+                phone: req.body.phone,
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                status: req.body.status,
+                purpose: "zogo",
+                expire_date: new Date(req.body.expdate)
+                //   phone:'noNumber'+ counter.seq
+
+              };
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  return;
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+            }
+            else if (req.body.email) {
+              //console.log("2");
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: organisation._id,
+                email: req.body.email.toLowerCase(),
+                phone: "nophone" + counter.seq,
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+                status: req.body.status,
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                purpose: "zogo",
+                expire_date: new Date(req.body.expdate)
+                //   phone:'noNumber'+ counter.seq
+
+              };
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+            }
+            else if (req.body.phone) {
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: organisation._id,
+                phone: req.body.phone,
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                status: req.body.status,
+
+                Dealer: req.body.Dealer,
+                email: 'noEmail' + counter.seq,
+
+                custumerid: 'c_' + counter.seq,
+
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                expire_date: new Date(req.body.expdate)
+                //  email:'noEmail'+ counter.seq
+
+              };
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+            }
+            else {
+              // console.log("3");
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: organisation._id,
+                phone: req.body.phone,
+                email: req.body.email.toLowerCase(),
+                email_verfi: true,
+                phone_verfi: true,
+                isDealer: false,
+                Dealer: req.body.Dealer,
+                custumerid: 'c_' + counter.seq,
+                timezone: req.body.timezone,
+                user_id: req.body.user_id,
+                address: req.body.address,
+                status: req.body.status,
+                purpose: "zogo",
+                expire_date: new Date(req.body.expdate)
+              };
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              // var newUser = new Contact(newUserJson);
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+            }
+
+
+          })
+
+        }
+        else if (req.body.otp && req.body.phone) {
+
+          var token;
+          Contact.findOne({ "phone": req.body.phone }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+            if (err) {
+              console.error(err);
+              return err;
+            }
+            if (otpres) {
+              //
+              var dbtime = new Date(otpres.timestamp);
+              var curtime = new Date();
+              var diffMs = (curtime - dbtime); // milliseconds between now & Christmas
+              var diffDays = Math.floor(diffMs / 86400000); // days
+              var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
+              var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
+              if (otpres.otp == req.body.otp) {
+                Contact.update({ _id: otpres._id }, { $set: { phone_verfi: true } }, function (err, result) {
+                  if (err) {
+                    console.error(err)
+                    return res.status(400).send(err);
+                  }
+                  else {
+                    return res.status(200).json({ "message": "Mobile Verified" });
+                  }
+                });
+              }
+              else {
+                res.status(500).json({ "message": "Didn't match otp" });
+              }
+            }
+          })
+        }
+        else if (req.body.phone && req.body.email) {
+          Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }] }, function (err, user) {
+            if (err) {
+              console.error(err)
+            }
+            else if (user) {
+              res.status(200).json({ "message": "Email ID or Mobile Number already exists" })
+            }
+            else {
+              function randomString(length, chars) {
+                var mask = '';
+                if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+                if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+                if (chars.indexOf('#') > -1) mask += '0123456789';
+                if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+                var result = '';
+                for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+                return result;
+              }
+              var otprand = randomString(4, '#');
+              var randomemail = randomString(16, '#aA!');
+
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+                if (req.body.dealer == true) {
+
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                    //console.log("4");
+                    var newUserJson = {
+
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      org: organisation._id,
+                      email: req.body.email.toLowerCase(),
+                      phone: req.body.phone,
+                      email_verfi: false,
+                      phone_verfi: false,
+                      otp: otprand,
+                      status: req.body.status,
+                      purpose: "zogo",
+                      id_email_ver: randomemail,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+
+                      timezone: req.body.timezone
+                    };
+                    var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                    newUser.setPassword(req.body.password);
+                    newUser.setLastReportDate();
+                    newUser.save(function (err) {
+                      if (err) {
+                        if (err.name === 'MongoError' && err.code === 11000) {
+                          // Duplicate username
+                          return res.status(200).send({ succes: false, message: 'User already exist!' });
+                        }
+
+                        // Some other error
+                        return res.status(500).send(err);
+                      }
+                      else {
+                        request({
+                          uri: Utilities.getConfig().smsUrl_zogo + Utilities.getConfig().smsApiMobileKeyzogo + req.body.phone + Utilities.getConfig().smsApiTextKeyzogo + 'Zogo%20Rides%20Your%20OTP%20is ' + otprand,
+                          method: "GET"
+                        }, function (error, response, body) {
+                          /* var jsonObj = JSON.parse(response.body);
+                          if(jsonObj.MsgStatus == 'Sent'){
+                            email(req.body.first_name,req.body.email,randomemail);
+                            res.status(200).json({"message" : "OTP sent successfully"})
+                            
+                          }
+                          else{
+                            res.status(500).json({"message" : "OTP sent Failed"})
+                            Contact.remove({"phone" :req.body.phone}).then(function(err){
+                              if(err){
+                                res.send(err);
+                                return err;
+                              }
+                            });
+                          } */
+                          res.status(200).json({ "message": "OTP sent successfully" })
+                        });
+                      }
+                    })
+
+                  })
+
+                }
+                else {
+                  //console.log("5");
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    org: organisation._id,
+                    email: req.body.email.toLowerCase(),
+                    phone: req.body.phone,
+                    email_verfi: false,
+                    phone_verfi: false,
+                    otp: otprand,
+                    status: req.body.status,
+                    purpose: "zogo",
+                    id_email_ver: randomemail,
+                    isDealer: req.body.dealer,
+                    custumerid: 'c_' + count.seq,
+
+                    timezone: req.body.timezone
+                  };
+                  var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                  newUser.setPassword(req.body.password);
+                  newUser.setLastReportDate();
+                  newUser.save(function (err) {
+                    if (err) {
+                      res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    }
+                    email(req.body.first_name, req.body.email, randomemail);
+                    request({
+                      uri: Utilities.getConfig().smsUrl_zogo + Utilities.getConfig().smsApiMobileKeyzogo + req.body.phone + Utilities.getConfig().smsApiTextKeyzogo + 'Zogo%20Rides%20Your%20OTP%20is ' + otprand,
+                      method: "GET"
+                    }, function (error, response, body) {
+                      /* var jsonObj = JSON.parse(response.body);
+                      if(jsonObj.MsgStatus == 'Sent'){
+                        email(req.body.first_name,req.body.email,randomemail);
+                        res.status(200).json({"message" : "OTP sent successfully"})
+                        
+                      }
+                      else{
+                        res.status(500).json({"message" : "OTP sent Failed"})
+                        Contact.remove({"phone" :req.body.phone}).then(function(err){
+                          if(err){
+                            res.send(err);
+                            return err;
+                          }
+                        });
+                      } */
+                      res.status(200).json({ "message": "OTP sent successfully" })
+                    });
+                  })
+                }
+              })
+            }
+          })
+
+        }
+        else if (req.body.phone) {
+          Contact.findOne({ "phone": req.body.phone }, function (err, ph) {
+            if (err) {
+              console.error(err);
+            }
+            else if (ph) {
+              res.status(500).json({ "message": "Mobile Number already Exists" })
+            }
+            else {
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+                if (req.body.dealer == true) {
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                    // console.log("6");
+                    var newUserJson = {
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      org: organisation._id,
+                      phone: req.body.phone,
+                      status: req.body.status,
+                      password: req.body.password,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+                      email: 'noEmail' + count.seq,
+                      purpose: "zogo",
+                      timezone: req.body.timezone
+
+                    };
+                    let datastore = newUserJson;
+                    //  let a = otp(newUserJson);
+                    otp(newUserJson, function (final_data) {
+
+                      if (final_data == true) {
+                        res.status(200).json({ "message": "OTP Successfully Sent" });
+                      }
+                      else {
+                        res.status(500).json({ "message": "OTP sent Failed" })
+                        Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                          if (err) {
+                            // res.send(err);
+                            //  return err;
+                          }
+                        });
+
+                      }
+
+                    })
+
+                  })
+
+
+                }
+                else {
+                  //console.log("7");
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    phone: req.body.phone,
+                    password: req.body.password,
+                    isDealer: req.body.dealer,
+                    status: req.body.status,
+                    custumerid: 'c_' + count.seq,
+                    email: 'noEmail' + count.seq,
+                    purpose: "zogo",
+                    timezone: req.body.timezone
+
+                  };
+                  // otp(newUserJson);
+                  //  let a = otp(newUserJson);
+                  otp(newUserJson, function (final_data) {
+
+                    if (final_data == true) {
+                      res.status(200).json({ "message": "OTP Successfully Sent" });
+                    }
+                    else {
+                      res.status(500).json({ "message": "OTP sent Failed" })
+                      Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                        if (err) {
+                          // res.send(err);
+                          // return err;
+                        }
+                      });
+                    }
+
+                  })
+                }
+
+              })
+            }
+          })
+
+
+        }
+
+
+
+        else if (req.body.email) {
+
+          var randomemail = Math.floor((Math.random() * 100000000000000) + 54);
+          Contact.findOne({ "email": req.body.email.toLowerCase() }, function (err, em) {
+            if (err) {
+              console.error(err);
+            }
+            else if (em) {
+              res.status(500).json({ "message": "Email ID already Exists" })
+            }
+            else {
+
+              Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+
+                if (req.body.dealer == true) {
+                  Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                    //console.log("8");
+                    var newUserJson = {
+                      first_name: req.body.first_name,
+                      last_name: req.body.last_name,
+                      org_name: req.body.org_name,
+                      org: organisation._id,
+                      email: req.body.email.toLowerCase(),
+                      email_verfi: false,
+                      phone_verfi: false,
+                      status: req.body.status,
+                      id_email_ver: randomemail,
+                      isDealer: req.body.dealer,
+                      dealerid: 'd_' + counter.seq,
+                      custumerid: 'c_' + count.seq,
+                      phone: 'noNumber' + count.seq,
+                      purpose: "zogo",
+                      timezone: req.body.timezone
+                    };
+
+
+
+                    var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                    newUser.setPassword(req.body.password);
+                    newUser.setLastReportDate();
+
+                    newUser.save(function (err) {
+                      if (err) {
+                        res.status(500).json({ "message": "Something Is Wrong" } + err);
+                      }
+                      res.status(200).json({ "message": "Registered Sucessfully" });
+                    })
+                    email(req.body.first_name, req.body.email, randomemail);
+                  })
+
+                }
+                else {
+                  //console.log("9");
+                  var newUserJson = {
+                    first_name: req.body.first_name,
+                    last_name: req.body.last_name,
+                    org_name: req.body.org_name,
+                    email: req.body.email.toLowerCase(),
+                    email_verfi: false,
+                    status: req.body.status,
+                    phone_verfi: false,
+                    id_email_ver: randomemail,
+                    isDealer: req.body.dealer,
+                    custumerid: 'c_' + count.seq,
+                    phone: 'noNumber' + count.seq,
+                    purpose: "zogo",
+                    timezone: req.body.timezone
+                  };
+
+                  var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                  newUser.setPassword(req.body.password);
+                  newUser.setLastReportDate();
+
+                  newUser.save(function (err) {
+                    if (err) {
+                      res.status(500).json({ "message": "Something Is Wrong" } + err);
+                    }
+                    res.status(200).json({ "message": "Registered Sucessfully" });
+                  })
+                  email(req.body.first_name, req.body.email, randomemail);
+                }
+              })
+
+
+            }
+          })
+
+
+        }
+        else {
+          res.status(500).json({ "message": "Something Is Missing Email id or Phone Number" });
+        }
+
+      }
+      else {
+        res.status(400).send({ "message": "Server error" })
+      }
+
+    })
+  }
+  else {
+    if (req.body.email == null && req.body.phone == null || req.body.email == undefined && req.body.phone == undefined || req.body.email == "undefined" && req.body.phone == "undefined") {
+      return res.status(401).json({ "message": "Null Value Error" });
+    }
+    //superadmin can able to add dealer
+
+    else if (req.body.sysadmin == true) {
+      Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, cuscount) {
+        if (error) {
+          console.error(error);
+        }
+        Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (err, dealcount) {
+          if (err) {
+            console.error(err);
+          }
+          if (req.body.email && req.body.phone) {
+            //console.log("10");
+            var newUserJson = {
+              first_name: req.body.first_name,
+              last_name: req.body.last_name,
+              org_name: req.body.org_name,
+              org: req.body.org_id,
+              role: req.body.roles,
+              group: req.body.group,
+              status: req.body.status,
+              email: req.body.email.toLowerCase(),
+              phone: req.body.phone,
+              email_verfi: true,
+              phone_verfi: true,
+              isDealer: true,
+              isSuperAdmin: false,
+              Dealer: req.body.Dealer,
+              supAdmin: req.body.supAdmin,
+              custumerid: 'c_' + cuscount.seq,
+              dealerid: 'd_' + dealcount.seq,
+              timezone: req.body.timezone,
+              user_id: req.body.user_id,
+              address: req.body.address,
+              purpose: "zogo",
+              expire_date: new Date(req.body.expdate)
+              //   phone:'noNumber'+ counter.seq
+            };
+            var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+            newUser.setPassword(req.body.password);
+            newUser.setLastReportDate();
+
+            // var newUser = new Contact(newUserJson);
+            newUser.save(function (err) {
+              if (err) {
+                res.status(500).json({ "message": "Something Is Wrong" } + err);
+              }
+              res.status(200).json({ "message": "Registered Sucessfully" });
+            })
+          }
+        });
+      });
+    }
+    else if (req.body.custumer == true) {
+
+      Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, counter) {
+
+        if (error) {
+          console.error(error);
+        }
+        if (req.body.email && req.body.phone) {
+          //console.log("11");
+          var newUserJson = {
+            first_name: req.body.first_name,
+            last_name: req.body.last_name,
+            org_name: req.body.org_name,
+            org: req.body.org_id,
+            email: req.body.email.toLowerCase(),
+            phone: req.body.phone,
+            email_verfi: true,
+            phone_verfi: true,
+            isDealer: false,
+            Dealer: req.body.Dealer,
+            custumerid: 'c_' + counter.seq,
+            timezone: req.body.timezone,
+            user_id: req.body.user_id,
+            status: req.body.status,
+            address: req.body.address,
+            purpose: "zogo",
+            expire_date: new Date(req.body.expdate)
+            //   phone:'noNumber'+ counter.seq
+
+          };
+          var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+          newUser.setPassword(req.body.password);
+          newUser.setLastReportDate();
+
+          // var newUser = new Contact(newUserJson);
+
+          newUser.save(function (err, u) {
+            if (err) {
+              res.status(500).json({ "message": "Something Is Wrong" } + err);
+              return;
+            }
+            res.status(200).json({ "message": "Registered Sucessfully" });
+
+
+          })
+        }
+        else if (req.body.email) {
+          //console.log("12");
+          var newUserJson = {
+            first_name: req.body.first_name,
+            last_name: req.body.last_name,
+            org_name: req.body.org_name,
+            org: req.body.org_id,
+            email: req.body.email.toLowerCase(),
+            phone: "nophone" + counter.seq,
+            email_verfi: true,
+            phone_verfi: true,
+            status: req.body.status,
+            isDealer: false,
+            Dealer: req.body.Dealer,
+            custumerid: 'c_' + counter.seq,
+            purpose: "zogo",
+            timezone: req.body.timezone,
+            user_id: req.body.user_id,
+            address: req.body.address,
+            expire_date: new Date(req.body.expdate)
+            //   phone:'noNumber'+ counter.seq
+
+          };
+          var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+          newUser.setPassword(req.body.password);
+          newUser.setLastReportDate();
+
+          // var newUser = new Contact(newUserJson);
+
+          newUser.save(function (err) {
+            if (err) {
+              res.status(500).json({ "message": "Something Is Wrong" } + err);
+            }
+            res.status(200).json({ "message": "Registered Sucessfully" });
+          })
+        }
+        else if (req.body.phone) {
+          //console.log("13");
+          var newUserJson = {
+            first_name: req.body.first_name,
+            last_name: req.body.last_name,
+            org_name: req.body.org_name,
+            org: req.body.org_id,
+            phone: req.body.phone,
+            email_verfi: true,
+            phone_verfi: true,
+            status: req.body.status,
+            isDealer: false,
+            Dealer: req.body.Dealer,
+            email: 'noEmail' + counter.seq,
+            purpose: "zogo",
+            custumerid: 'c_' + counter.seq,
+
+            timezone: req.body.timezone,
+            user_id: req.body.user_id,
+            address: req.body.address,
+            expire_date: new Date(req.body.expdate)
+            //  email:'noEmail'+ counter.seq
+
+          };
+          var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+          newUser.setPassword(req.body.password);
+          newUser.setLastReportDate();
+          // var newUser = new Contact(newUserJson);
+
+          newUser.save(function (err) {
+            if (err) {
+              res.status(500).json({ "message": "Something Is Wrong" } + err);
+            }
+            res.status(200).json({ "message": "Registered Sucessfully" });
+          })
+        }
+        else {
+          //console.log("14");
+          var newUserJson = {
+            first_name: req.body.first_name,
+            last_name: req.body.last_name,
+            org_name: req.body.org_name,
+            org: req.body.org_id,
+            phone: req.body.phone,
+            email: req.body.email.toLowerCase(),
+            email_verfi: true,
+            phone_verfi: true,
+            isDealer: false,
+            Dealer: req.body.Dealer,
+            custumerid: 'c_' + counter.seq,
+            timezone: req.body.timezone,
+            user_id: req.body.user_id,
+            address: req.body.address,
+            purpose: "zogo",
+            status: req.body.status,
+            expire_date: new Date(req.body.expdate)
+          };
+          var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+          newUser.setPassword(req.body.password);
+          newUser.setLastReportDate();
+          // var newUser = new Contact(newUserJson);
+
+          newUser.save(function (err) {
+            if (err) {
+              res.status(500).json({ "message": "Something Is Wrong" } + err);
+            }
+            res.status(200).json({ "message": "Registered Sucessfully" });
+          })
+        }
+
+
+      })
+
+    }
+    else if (req.body.otp && req.body.phone) {
+      var token;
+      Contact.findOne({ "phone": req.body.phone }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+        if (err) {
+          console.error(err);
+          return err;
+        }
+        if (otpres) {
+          //
+          var dbtime = new Date(otpres.timestamp);
+          var curtime = new Date();
+          var diffMs = (curtime - dbtime); // milliseconds between now & Christmas
+          var diffDays = Math.floor(diffMs / 86400000); // days
+          var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
+          var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
+          if (otpres.otp == req.body.otp) {
+            Contact.update({ _id: otpres._id }, { $set: { phone_verfi: true } }, function (err, result) {
+              if (err) {
+                console.error(err)
+                return res.status(400).send(err);
+              }
+              else {
+                // otpres.email
+                //console.log(otpres.email);
+                var mailOptions = {
+                  from: Utilities.getConfig().mailUserZogo, // sender address
+                  to: otpres.email, // gaurav.gupta@adnate.in list of receivers
+                  subject: 'Zogorides', // Subject line
+                  //  text: "New Task",
+                  html: `<body><div style="margin:0;padding:0;background-color:#ffffff;font-family:Roboto,RobotoDraft,Helvetica,Arial,sans-serif"> <div style="padding:0;width:100%;margin:0;min-width:100%;color:#000;font-weight:normal;text-align:left;line-height:28px;font-size:14px"> <table style="border-spacing:0;border:0;padding:0;vertical-align:top;border-collapse:collapse;text-align:center;background-color:#ececec;height:100%;padding-top:0;font-size:14px;line-height:28px;color:#000;width:100%"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="font-size:14px;color:#000;padding:0;margin:0;text-align:left;line-height:28px;font-weight:normal;word-break:break-word;border-collapse:collapse;vertical-align:top"> <br> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:center;width:600px;margin:0 auto;background-color:#ffffff"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="font-size:14px;color:#000;padding:0;margin:0;text-align:left;line-height:28px;font-weight:normal;word-break:break-word;border-collapse:collapse;vertical-align:top"> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:left;width:100%;background:#f2f8f3"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td width="100%" style="word-break:break-word;color:#000;padding:0;margin:0;border-collapse:collapse;line-height:28px;font-size:14px;font-weight:normal;text-align:left;vertical-align:middle;height:70px;padding-left:20px"> <a href="https://www.zogorides.com/" style="outline:none;color:#0067ff;text-decoration:none;display:inline;width:100%;height:100%" target="_blank"> <img src="https://i.imgur.com/LmwlUHP.png" style="outline:none;text-decoration:none;width:auto;max-width:100%;clear:both;border:none;display:inline;vertical-align:middle;float:none"> </a> </td> </tr> </tbody> </table> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:left;width:100%"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="color:#000;border-collapse:collapse;margin:0;text-align:left;font-size:14px;font-weight:normal;line-height:25px;padding:10px 10px 5px;vertical-align:top;width:100%"> <img src="https://i.imgur.com/skoAwvg.jpg" style="outline:none;text-decoration:none;width:auto;max-width:100%;clear:both;border:none;display:inline;vertical-align:middle;float:none"> </td> </tr> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="word-break:break-word;color:#000;border-collapse:collapse;margin:0;text-align:left;font-size:14px;font-weight:normal;line-height:25px;padding:10px 10px 5px;vertical-align:top;width:100%"> <div style="padding:0"> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:left;width:100%"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="font-size:14px;color:#000;border-collapse:collapse;margin:0;text-align:left;line-height:28px;font-weight:normal;word-break:break-word;vertical-align:top;padding:0 6%"> <p style="color:#000;padding:0;margin:0;text-align:left;line-height:28px;font-weight:bold;font-size:18px;margin-bottom:20px;margin-top:20px">` + "Hi " + otpres.first_name + `<br> </p> <p style="color:#000;font-weight:normal;padding:0;margin:0;text-align:left;line-height:28px;font-size:14px;margin-bottom:20px"><b>Thanks for joining <span>Zogorides</span>.</b></p> <p style="color:#000;font-weight:normal;padding:0;margin:0;text-align:left;line-height:28px;font-size:14px;margin-bottom:20px">Now that you have signed up, book and enjoy your ride. </p> <div style="width:auto;height:auto;margin:0 auto;margin-bottom:20px;background:#fefefe;border:#f2f2f2 1px solid;border-top:#42c662 3px solid"> <div> </div> </div> <p style="color:#000;font-weight:normal;padding:0;margin:0;text-align:left;line-height:28px;font-size:14px;margin-bottom:20px"> Thanks! <br><span>Zogorides</span> Team </p> <hr style="color:#d9d9d9;background-color:#d9d9d9;height:1px;border:none"> </td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:left;width:100%;margin-bottom:30px"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="font-size:14px;color:#000;border-collapse:collapse;margin:0;line-height:28px;font-weight:normal;word-break:break-word;text-align:right;padding:0 15px 12px;vertical-align:middle"> <table style="border-spacing:0;border-collapse:collapse;border:0;padding:0;vertical-align:top;text-align:left;width:100%"> <tbody> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="word-break:break-word;color:#000;padding:0;margin:0;text-align:left;border-collapse:collapse;font-size:14px;font-weight:normal;line-height:16px;vertical-align:middle;height:16px"> <p style="font-weight:normal;padding:0;text-align:left;color:#9b9b9b;margin:10px 2% 10px 0;line-height:14px;font-size:12px"> © 2019 Zogorides. <span style="float:right">Join the conversation</span> </p> </td> <td width="4%" style="word-break:break-word;color:#000;padding:0;margin:0;text-align:left;border-collapse:collapse;font-size:14px;font-weight:normal;line-height:16px;vertical-align:middle;height:16px"> <a href="#0.1_" title="facebook" style="outline:none;color:#0067ff"> <img src="https://i.imgur.com/UahBzgC.png" style="outline:none;text-decoration:none;width:auto;max-width:100%;clear:both;border:none;display:inline"> </a> </td> <td width="4%" style="word-break:break-word;color:#000;padding:0;margin:0;text-align:left;border-collapse:collapse;font-size:14px;font-weight:normal;line-height:16px;vertical-align:middle;height:16px"> <a href="#0.1_" title="twitter" style="outline:none;color:#0067ff"> <img src="https://i.imgur.com/1FivtOW.png" style="outline:none;text-decoration:none;width:auto;max-width:100%;clear:both;border:none;display:inline"> </a> </td> </tr> </tbody> </table> </td> </tr> <tr style="padding:0;vertical-align:top;text-align:left"> <td style="word-break:break-word;color:#000;border-collapse:collapse;margin:0;text-align:left;font-size:14px;font-weight:normal;line-height:16px;padding:0 15px 0;vertical-align:middle;height:16px"> <p style="font-weight:normal;padding:0;text-align:left;color:#9b9b9b;margin:10px 2% 10px 0;line-height:14px;font-size:12px"> Please do not reply directly to this email. </p> <p style="font-weight:normal;padding:0;text-align:left;color:#9b9b9b;margin:10px 2% 10px 0;line-height:14px;font-size:12px">You can get help from our <a href="https://www.zogorides.com/#faq" style="outline:none;color:#42c662;font-style:italic" target="_blank">knowledge base</a>. </p> <p style="font-weight:normal;padding:0;text-align:left;color:#9b9b9b;margin:10px 2% 10px 0;line-height:14px;font-size:12px"> If you don't want to receive emails like this again, please <a href="#0.1_" style="outline:none;color:#42c662;font-style:italic">click here</a>to unsubscribe.</p><br> <p style="text-align:center;font-size:12px;color:#9b9b9b"> Plot No �?&#147; 23 Sector-18 Gurgaon,Haryana 122002 <br> <a href="mailto:info@zogorides.com" target="_blank">info@zogorides.com</a> , <a href="mailto:support@zogorides.com" target="_blank">support@zogorides.com</a> <br> <a style="text-align:center;font-size:12px;color:#9b9b9b" href="https://www.zogorides.com/" target="_blank">www.zogorides.com</a> </p> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table><div></div><div> </div></div> </div></body>`
+                }
+                mailer.sendZogoSignupMail(mailOptions);
+                return res.status(200).json({ "message": "Mobile Verified" });
+              }
+            });
+          }
+          else {
+            res.status(500).json({ "message": "Didn't match otp" });
+          }
+        }
+      })
+    }
+    else if (req.body.phone && req.body.email) {
+      //console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
+      Contact.findOne({ $or: [{ 'email': req.body.email }, { 'phone': req.body.phone }] }, function (err, user) {
+        if (err) {
+          console.error(err)
+        }
+        else if (user) {
+          res.status(200).json({ "message": "Email ID or Mobile Number already exists" })
+        }
+        else {
+          function randomString(length, chars) {
+            var mask = '';
+            if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+            if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+            if (chars.indexOf('#') > -1) mask += '0123456789';
+            if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+            var result = '';
+            for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+            return result;
+          }
+          var otprand = randomString(4, '#');
+          var randomemail = randomString(16, '#aA!');
+
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+            if (req.body.dealer == true) {
+
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                // console.log("15");
+                var newUserJson = {
+
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  email: req.body.email.toLowerCase(),
+                  phone: req.body.phone,
+                  email_verfi: false,
+                  phone_verfi: false,
+                  otp: otprand,
+                  status: req.body.status,
+                  id_email_ver: randomemail,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  purpose: "zogo",
+                  timezone: req.body.timezone
+                };
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+                newUser.save(function (err, u) {
+                  if (err) {
+                    if (err.name === 'MongoError' && err.code === 11000) {
+                      // Duplicate username
+                      return res.status(200).send({ succes: false, message: 'User already exist!' });
+                    }
+
+                    // Some other error
+                    return res.status(500).send(err);
+                  }
+                  if (u) {
+                    //console.log("in uuuuu");
+                    var newCode = {
+                      "code": "FirstFree",
+                      "isPercent": false,
+                      "amount": "50",
+                      "expireDate": new Date(req.body.expdate),
+                      "isActive": true,
+                      "countMax": "1",
+                      "onOrder": [
+                        "1"
+                      ],
+                      "maxDiscount": "50",
+                      "minOrderAmount": "",
+                      "type": "ONETIME"
+                    }
+                    newCode.user = u[0]._id
+                    couponCode.addDiscountCodeOnSignup(newCode);
+                    res.status(200).json({ "message": "OTP sent successfully" });
+                    // request({
+
+
+                    //   uri: Utilities.getConfig().smsUrl_zogo + Utilities.getConfig().smsApiMobileKeyzogo + req.body.phone + Utilities.getConfig().smsApiTextKeyzogo + 'Zogo%20Rides%20Your%20OTP%20is ' + otprand,
+                    //   method: "GET"
+                    // }, function (error, response, body) {
+                    //   /* var jsonObj = JSON.parse(response.body);
+                    //   if(jsonObj.MsgStatus == 'Sent'){
+                    //     email(req.body.first_name,req.body.email,randomemail);
+                    //     res.status(200).json({"message" : "OTP sent successfully"})
+
+                    //   }
+                    //   else{
+                    //     res.status(500).json({"message" : "OTP sent Failed"})
+                    //     Contact.remove({"phone" :req.body.phone}).then(function(err){
+                    //       if(err){
+                    //         res.send(err);
+                    //         return err;
+                    //       }
+                    //     });
+                    //   } */
+                    //   res.status(200).json({ "message": "OTP sent successfully" });
+
+                    // });
+                  }
+                })
+
+              })
+
+            }
+            else {
+              // console.log("16");
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                phone: req.body.phone,
+                email_verfi: false,
+                phone_verfi: false,
+                otp: otprand,
+                id_email_ver: randomemail,
+                isDealer: req.body.dealer,
+                status: req.body.status,
+                custumerid: 'c_' + count.seq,
+                timezone: req.body.timezone,
+                purpose: "zogo",
+              };
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+              newUser.save(function (err, u) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+
+
+                //console.log("in uuuuu", u);
+                var newCode = {
+                  "code": "FirstFree",
+                  "isPercent": false,
+                  "amount": "50",
+                  "expireDate": new Date(req.body.expdate),
+                  "isActive": true,
+                  "countMax": "1",
+                  "onOrder": [
+                    "1"
+                  ],
+                  "maxDiscount": "50",
+                  "minOrderAmount": "",
+                  "type": "ONETIME"
+                }
+                newCode.user = u._id
+                couponCode.addDiscountCodeOnSignup(newCode);
+                email(req.body.first_name, req.body.email, randomemail);
+                request({
+
+
+                  uri: Utilities.getConfig().smsUrl_zogo + Utilities.getConfig().smsApiMobileKeyzogo + req.body.phone + Utilities.getConfig().smsApiTextKeyzogo + 'Zogo%20Rides%20Your%20OTP%20is ' + otprand,
+                  method: "GET"
+                }, function (error, response, body) {
+                  /* var jsonObj = JSON.parse(response.body);
+                  if(jsonObj.MsgStatus == 'Sent'){
+                    email(req.body.first_name,req.body.email,randomemail);
+                    res.status(200).json({"message" : "OTP sent successfully"})
+                    
+                  }
+                  else{
+                    res.status(500).json({"message" : "OTP sent Failed"})
+                    Contact.remove({"phone" :req.body.phone}).then(function(err){
+                      if(err){
+                        res.send(err);
+                        return err;
+                      }
+                    });
+                  } */
+
+                  // res.status(200).json({ "message": "OTP sent successfully" });
+                  res.status(200).json({ "message": "OTP sent successfully" })
+                });
+
+              })
+
+            }
+
+
+
+          })
+
+
+
+        }
+      })
+
+    }
+
+
+    else if (req.body.phone) {
+      Contact.findOne({ "phone": req.body.phone }, function (err, ph) {
+        if (err) {
+          console.error(err);
+        }
+        else if (ph) {
+          res.status(500).json({ "message": "Mobile Number already Exists" })
+        }
+        else {
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+            if (req.body.dealer == true) {
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                //console.log("17");
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  phone: req.body.phone,
+                  password: req.body.password,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  email: 'noEmail' + count.seq,
+                  status: req.body.status,
+                  purpose: "zogo",
+                  timezone: req.body.timezone
+
+                };
+                let datastore = newUserJson;
+                //  let a = otp(newUserJson);
+                otp(newUserJson, function (final_data) {
+
+                  if (final_data == true) {
+                    res.status(200).json({ "message": "OTP Successfully Sent" });
+                  }
+                  else {
+                    res.status(500).json({ "message": "OTP sent Failed" })
+                    Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                      if (err) {
+                        // res.send(err);
+                        //  return err;
+                      }
+                    });
+
+                  }
+
+                })
+
+              })
+
+
+            }
+            else {
+              console.log("18");
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                phone: req.body.phone,
+                password: req.body.password,
+                isDealer: req.body.dealer,
+                custumerid: 'c_' + count.seq,
+                email: 'noEmail' + count.seq,
+                status: req.body.status,
+                purpose: "zogo",
+                timezone: req.body.timezone
+
+              };
+              // otp(newUserJson);
+              //  let a = otp(newUserJson);
+              otp(newUserJson, function (final_data) {
+
+                if (final_data == true) {
+                  res.status(200).json({ "message": "OTP Successfully Sent" });
+                }
+                else {
+                  res.status(500).json({ "message": "OTP sent Failed" })
+                  Contact.remove({ "phone": req.body.phone }).then(function (err) {
+                    if (err) {
+                      // res.send(err);
+                      // return err;
+                    }
+                  });
+                }
+
+              })
+            }
+
+          })
+        }
+      })
+
+
+    }
+
+
+
+    else if (req.body.email) {
+
+      var randomemail = Math.floor((Math.random() * 100000000000000) + 54);
+      Contact.findOne({ "email": req.body.email.toLowerCase() }, function (err, em) {
+        if (err) {
+          console.error(err);
+        }
+        else if (em) {
+          res.status(500).json({ "message": "Email ID already Exists" })
+        }
+        else {
+          Count.findByIdAndUpdate({ _id: 'custumer' }, { $inc: { seq: 1 } }, function (error, count) {
+            if (req.body.dealer == true) {
+              Count.findByIdAndUpdate({ _id: 'dealer' }, { $inc: { seq: 1 } }, function (error, counter) {
+                console.log("19");
+                var newUserJson = {
+                  first_name: req.body.first_name,
+                  last_name: req.body.last_name,
+                  org_name: req.body.org_name,
+                  org: req.body.org_id,
+                  email: req.body.email.toLowerCase(),
+                  email_verfi: false,
+                  phone_verfi: false,
+                  id_email_ver: randomemail,
+                  isDealer: req.body.dealer,
+                  dealerid: 'd_' + counter.seq,
+                  custumerid: 'c_' + count.seq,
+                  phone: 'noNumber' + count.seq,
+                  status: req.body.status,
+                  purpose: "zogo",
+                  timezone: req.body.timezone
+                };
+
+                var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+                newUser.setPassword(req.body.password);
+                newUser.setLastReportDate();
+
+                newUser.save(function (err) {
+                  if (err) {
+                    res.status(500).json({ "message": "Something Is Wrong" } + err);
+                  }
+                  res.status(200).json({ "message": "Registered Sucessfully" });
+                })
+                email(req.body.first_name, req.body.email, randomemail);
+              })
+
+            }
+            else {
+              console.log("20");
+              var newUserJson = {
+                first_name: req.body.first_name,
+                last_name: req.body.last_name,
+                org_name: req.body.org_name,
+                org: req.body.org_id,
+                email: req.body.email.toLowerCase(),
+                email_verfi: false,
+                phone_verfi: false,
+                id_email_ver: randomemail,
+                isDealer: req.body.dealer,
+                status: req.body.status,
+                custumerid: 'c_' + count.seq,
+                phone: 'noNumber' + count.seq,
+                purpose: "zogo",
+                timezone: req.body.timezone
+              };
+
+              var newUser = new Contact(JSON.parse(JSON.stringify(newUserJson)));
+              newUser.setPassword(req.body.password);
+              newUser.setLastReportDate();
+
+              newUser.save(function (err) {
+                if (err) {
+                  res.status(500).json({ "message": "Something Is Wrong" } + err);
+                }
+                res.status(200).json({ "message": "Registered Sucessfully" });
+              })
+              email(req.body.first_name, req.body.email, randomemail);
+            }
+          })
+
+
+        }
+      })
+
+
+    }
+    else {
+      res.status(500).json({ "message": "Something Is Missing Email id or Phone Number" });
+    }
+
+  }
+}
+// ==================================
+function email(fname, emailid, verid) {
+
+  var url = "http://" + Utilities.getConfig().webAppIp + ":" + Utilities.getConfig().EPort + "/users/emailverfi?id=" + encodeURIComponent(verid);
+
+  var mailOptions = {
+    from: Utilities.getConfig().mailUser, // sender address
+    to: emailid.toLowerCase(), // list of receivers
+    subject: Utilities.getConfig().orgName + "- Mail Verification", // Subject line
+    text: "New Task", // plaintext body emailverfi
+    html: 'Dear ' + fname + ',<br><br>Thank you for registering with us.<br>You are just one click away from using our services.Please verify your mail by clicking below button.<br><center><a href="' + url + '"><br><input type="button"  value="Click here to Verify Email" style="font-size:12pt;color:white;background-color:DodgerBlue  ;padding:11px" ></a></center><br>Thanks<br>Regards<br>Team AdnateIOT'// html body
+  }
+  mailer.sendMail(mailOptions);
+
+
+}
+
+module.exports.zogoUserUpdate = function (req, res) {
+  if (req.body.phone) {
+    Contact.findOne({ "phone": req.body.phone }, function (err, user) {
+      if (err) {
+        console.error(err);
+      }
+      if (user) {
+        if (req.body.img_type == "adharCard") {
+          user.aadharImg = req.body.image_path;
+        }
+        if (req.body.img_type == "drivingLicence") {
+          user.dl_path = req.body.image_path;
+        }
+        if (req.body.img_type == "selfie") {
+          user.userImg = req.body.image_path;
+        }
+        user.save(function (err) {
+          if (err) {
+            console.error("otp error :" + err);
+            return err;
+          }
+          else {
+            res.status(200).send({ "message": "image saved successfully" })
+          }
+        })
+      }
+      else {
+        res.status(200).send({ "message": "user not found" })
+      }
+    })
+
+  }
+
+}
+
+
+
+function otp(data, recur) {
+
+  function randomString(length, chars) {
+    var mask = '';
+    if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+    if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    if (chars.indexOf('#') > -1) mask += '0123456789';
+    if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+    var result = '';
+    for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+    return result;
+  }
+  var randomotp = randomString(4, '#');
+  if (data.dealerid) {
+    var newOtpJson = {
+      first_name: data.first_name,
+      last_name: "",
+      org_name: data.org_name,
+      phone: data.phone,
+      otp: randomotp,
+      email_verfi: false,
+      phone_verfi: false,
+      isDealer: data.isDealer,
+      dealerid: data.dealerid,
+      custumerid: data.custumerid,
+      email: 'noEmail' + data.custumerid,
+      purpose: "zogo",
+      status: false,
+      timezone: req.body.timezone
+
+
+    };
+    var newOtp = new Contact(JSON.parse(JSON.stringify(newOtpJson)));
+    newOtp.setPassword(data.password);
+    newOtp.setLastReportDate();
+
+
+    newOtp.save(function (err) {
+      if (err) {
+        console.error("otp error :" + err);
+        return err;
+      }
+
+      request({
+
+
+        uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + data.phone + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + randomotp,
+        method: "GET"
+      }, function (error, response, body) {
+        /* var jsonObj = JSON.parse(response.body);
+        if(jsonObj.MsgStatus == 'Sent'){
+          // email(req.body.first_name,req.body.email,randomemail);
+          //  res.status(200).json({"message" : "OTP sent successfully"})
+          
+          recur(true);  
+        }
+        else{
+          //   res.status(500).json({"message" : "OTP sent Failed"})
+          recur(false); 
+        } */
+        recur(true);
+      });
+
+    });
+  }
+  else {
+    var newOtpJson = {
+      first_name: data.first_name,
+      last_name: "",
+      org_name: data.org_name,
+      phone: data.phone,
+      otp: randomotp,
+      email_verfi: false,
+      phone_verfi: false,
+      isDealer: data.isDealer,
+      custumerid: data.custumerid,
+      email: 'noEmail' + data.custumerid,
+      purpose: "zogo",
+      status: false
+      //  timezone: req.body.timezone
+
+    };
+    var newOtp = new Contact(JSON.parse(JSON.stringify(newOtpJson)));
+
+    newOtp.setPassword(data.password);
+    newOtp.setLastReportDate();
+
+    // var newUser = new Contact(newUserJson);
+
+
+    newOtp.save(function (err) {
+      if (err) {
+        console.error("otp error :" + err);
+        return err;
+      }
+
+      request({
+
+
+        uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + data.phone + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + randomotp,
+        method: "GET"
+      }, function (error, response, body) {
+        /* var jsonObj = JSON.parse(response.body);
+        if(jsonObj.MsgStatus == 'Sent'){
+          //   email(data.first_name,data.email,randomemail);
+          // res.status(200).json({"message" : "OTP sent successfully"})
+          recur(true); 
+        }
+        else{
+          //  res.status(500).json({"message" : "OTP sent Failed"})
+          recur(false); 
+        } */
+        recur(true);
+      });
+
+    });
+  }
+
+}
+
+module.exports.find = function (req, res) {
+  req.body = evaluate(req.body);
+  var qr = Contact.find(req.body._find);
+  if (req.body._limit)
+    qr.limit(req.body._limit);
+  if (req.body._sort)
+    qr.sort(req.body._sort);
+  if (req.body._select)
+    qr.select(req.body._select);
+  if (req.body.school)
+    qr.populate({ 'path': 'school', select: req.body.school })
+
+  qr.exec(function (err, data) {
+    if (err) return res.send(err);
+    else
+      res.send(data);
+  })
+}
+
+module.exports.emailverfi = function (req, res) {
+
+  Contact.findOne({ "id_email_ver": (req.query.id) }).exec(function (err, sd) {
+
+    if (err) {
+      return res.status(401).send("Error ::" + err)
+      console.error(err);
+    }
+    else if (sd) {
+
+      Contact.update({ _id: sd._id }, { $set: { email_verfi: true } }, function (err, result) {
+        if (err) {
+          console.error(err)
+          return res.status(400).send(err);
+        }
+        else {
+
+          return res.redirect(Utilities.getConfig().webAppDomain + '/login');
+
+        }
+      });
+
+
+    }
+    else {
+      return res.status(401).send("Error ::" + err)
+      console.error(err);
+    }
+  })
+}
+
+// module.exports.getAllUsersForSuperUser = function(req, res) {
+//   Contact.findOne({_id : req.body.user, isSuperUser : true}, function(err, superUser){
+//     if(err){
+//       console.error(err);
+//       res.send(500);
+//       return;
+//     }
+//     else if(superUser){
+//       Contact.find({isDealer : true},function(err, contacts){
+//         if(err){
+//           console.error(err);
+//       res.send(500);
+//       return;
+//         }
+//         res.status(200).send(contacts);
+
+//       });
+//     }
+//   })
+
+// }
+
+//retreve data (signup/login)
+module.exports.getAllUsers = function (req, res) {
+  var id = "";
+  if (req.query.dealer) {
+    id = req.query.dealer
+  } else if (req.query.user) {
+    id = req.query.user
+  }
+
+  Contact.findOne({ _id: id }, function (err, dealer) {
+    if (err) {
+      console.error(err);
+      res.send(500);
+      return;
+    }
+    if (dealer) {
+      var query = {};
+      if (req.query.dealer) {
+        query = { $or: [{ 'Dealer': req.query.dealer }, { group: { $in: dealer.group } }] }
+      }
+      if (req.query.user) {
+        query = { $or: [{ $and: [{ 'Dealer': dealer.Dealer }, { '_id': { $nin: [req.query.user] } }] }, { '_id': dealer.Dealer }] }
+      }
+      Contact.find(query, function (err, contacts) {
+        if (err) {
+          console.error(err);
+          return err;
+        }
+        if (contacts.length > 0) {
+          res.status(200).send(contacts);
+        }
+        else {
+          res.status(500).send("No records found");
+        }
+      });
+    }
+
+    else {
+      res.send(400);
+    }
+  })
+
+}
+module.exports.datatable = function (req, res) {
+
+  var qr = req.body;
+  var dtop = {
+    conditions: qr.find,
+    select: qr.select
+  };
+  Contact.dataTable(qr, dtop, function (err, data) {
+    if (err) {
+      console.error(err);
+      res.sendStatus(500);
+      return;
+    }
+    res.send(data);
+  })
+}
+
+module.exports.getAll = function (req, res) {
+  Contact.find({ supAdmin: req.query.supadm }, function (err, contacts) {
+    if (err) {
+      console.error(err);
+      return err;
+    }
+    if (contacts.length > 0) {
+      res.status(200).send(contacts);
+    }
+    else {
+      res.status(500).send("No records found");
+    }
+  });
+
+}
+
+//delete Data (NOT USED)
+module.exports.DeleteUser = function (req, res) {
+  Contact.remove({ _id: req.query.id }, function (err, del) {
+    if (err) {
+      console.error(err);
+      return err;
+    }
+    res.status(200).json({ "message": "Deleted Successfully" })
+
+  })
+}
+
+//saving phonenum with otp
+module.exports.SendOtp = function (req, res) {
+  function randomString(length, chars) {
+    var mask = '';
+    if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+    if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    if (chars.indexOf('#') > -1) mask += '0123456789';
+    if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+    var result = '';
+    for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+    return result;
+  }
+  var randomotp = randomString(6, '#');
+  /* var randomotp=Math.floor((Math.random() * 100000) + 54); */
+  var newOtpJson = {
+    phone_number: req.body.ph_num,
+    otp: randomotp
+  };
+
+  var newOtp = new Otp(JSON.parse(JSON.stringify(newOtpJson)));
+  newOtp.save(function (err) {
+    if (err) {
+      console.error("otp error :" + err);
+      return err;
+    }
+    //
+    request({
+      uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + req.body.ph_num + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + randomotp,
+      method: "GET"
+    }, function (error, response, body) {
+      /* var jsonObj = JSON.parse(response.body);
+      if(jsonObj.MsgStatus == 'Sent'){
+        email(req.body.first_name,req.body.email,randomemail);
+        res.status(200).json({"message" : "OTP sent successfully"})
+        
+      } */
+      res.status(200).json({ "message": "OTP sent successfully" })
+    });
+
+  });
+}
+
+
+module.exports.SendOtpZOGO = function (req, res) {
+  function randomString(length, chars) {
+    var mask = '';
+    if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+    if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    if (chars.indexOf('#') > -1) mask += '0123456789';
+    if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+    var result = '';
+    for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+    return result;
+  }
+  var randomotp = randomString(4, '#');
+  /* var randomotp=Math.floor((Math.random() * 100000) + 54); */
+  var newOtpJson = {
+    phone_number: req.body.ph_num,
+    otp: randomotp
+  };
+
+  var newOtp = new Otp(JSON.parse(JSON.stringify(newOtpJson)));
+  newOtp.save(function (err) {
+    if (err) {
+      console.error("otp error :" + err);
+      return err;
+    }
+    //req.body.ph_num
+    Contact.findOne({ phone: req.body.ph_num }, function (err, mobileNum) {
+      if (err) {
+        res.status(500).json({ "Error": "Device Not Found" })
+      }
+      //console.log("Mobile Number", mobileNum);
+      //console.log("randonOTP", randomotp);
+      mobileNum.otp = randomotp;
+
+      mobileNum.save(function (err) {
+        if (err) {
+          res.status(500).json({ "errMsg": "OTP not Updated" })
+        } else {
+          // console.log("updatedInfo=>", mobileNum);
+          request({
+            uri: Utilities.getConfig().smsUrl_zogo + Utilities.getConfig().smsApiMobileKeyzogo + req.body.ph_num + Utilities.getConfig().smsApiTextKeyzogo + 'Zogo%20Rides%20Your%20OTP%20is ' + randomotp,
+            method: "GET"
+          }, function (error, response, body) {
+            res.status(200).json({ "message": "OTP sent successfully" })
+          });
+        }
+      })
+    })
+  });
+}
+
+
+//checking otp with phonenumber
+
+//saving phonenum with otp
+//LOGIN
+module.exports.LoginWithOtp = function (req, res) {
+  var loginType = '';
+  // console.log("header",JSON.stringify(req.headers));
+  var user_agent = req.headers["user-agent"];
+  //console.log("UUUUUUUUUUUUUUUUUUUUUUUU",user_agent);
+  if (user_agent.includes("Android ") || user_agent.includes("iPhone") || user_agent.includes("blackberry")) {
+    loginType = "MOBILE"
+  }
+  else if (user_agent.includes("Mozilla") || user_agent.includes("AppleWebKit") || user_agent.includes("Chrome") || user_agent.includes("Safari")) {
+    loginType = "WEB";
+  } else {
+    loginType = "MOBILE"
+  }
+  var token;
+  if (req.body.emailid) {
+
+    Contact.findOne({ "email": req.body.emailid.toLowerCase() }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, user) {
+      if (err) {
+        console.error(err);
+        return err;
+      }
+      if (user) {
+        //checking user expiration date
+        if (user.DeletedUser == true) {
+          res.status(500).json({ "message": "Account Deleted" });
+          return;
+        }
+        if (user.expire_date) {
+          if (new Date() > user.expire_date) {
+            res.status(500).json({ "message": "User account is expired" });
+          }
+        }
+        //console.log(user);
+        //
+        //user is active or not
+        if ((!user.status) && (user.purpose != 'zogo')) {
+          res.status(500).json({ "message": "User account is InActive" });
+        }
+        //valid or not
+        if (user.email_verfi == true) {
+          //
+          if (user.validPassword(req.body.psd)) {
+            Contact.update({ _id: user._id }, { $set: { last_login: new Date, login_type: loginType, "user_agent": user_agent } }, function (err, re) {
+              if (err) {
+                console.log(err);
+                return;
+              }
+              token = user.generateJwt();
+              res.status(200);
+              res.json({
+                "token": token
+              });
+            })
+
+          } else {
+            res.status(500).json({ "message": "Password is Wrong" });
+          }
+
+          //res.status(200).json({"message":"LoggedIn Successfully"});
+        }
+        else {
+          res.status(500).json({ "message": "Email ID Not Verified" });
+        }
+      }
+      else {
+
+        res.status(500).json({ "message": "User is not registered" });
+
+      }
+    });
+
+  }
+  else if (req.body.ph_num && req.body.psd) {
+
+    Contact.findOne({ $or: [{ "phone": req.body.ph_num }, { "user_id": req.body.ph_num }] }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, user) {
+      if (err) {
+        console.error(err);
+        return err;
+      }
+      if (user) {
+
+        if (user.DeletedUser == true) {
+          res.status(500).json({ "message": "Account Deleted" });
+          return;
+        }
+        //checking user expiration date
+        if (user.expire_date) {
+          if (new Date() > user.expire_date) {
+            res.status(500).json({ "message": "User account is expired" });
+          }
+        }
+        //
+        //user is active or not
+        if (!user.phone_verfi) {
+          res.status(500).json({ "message": "Mobile Phone Not Verified" });
+
+        }
+        if ((!user.status) && (user.purpose != 'zogo')) {
+          res.status(500).json({ "message": "User account is InActive" });
+        }
+        //valid or not
+        if (user.phone_verfi == true) {
+          //
+          if (user.validPassword(req.body.psd)) {
+            Contact.update({ _id: user._id }, { $set: { last_login: new Date, login_type: loginType, "user_agent": user_agent } }, function (err, re) {
+              if (err) {
+                console.log(err);
+                return;
+              }
+              token = user.generateJwt();
+              res.status(200);
+              res.json({
+                "token": token
+              });
+            })
+          } else {
+            res.status(500).json({ "message": "Password is Wrong" });
+          }
+
+          //res.status(200).json({"message":"LoggedIn Successfully"});
+        }
+        else {
+          res.status(500).json({ "message": "Mobile Phone Not Verified" });
+        }
+      }
+      else {
+        res.status(500).json({ "message": "User is not registered" });
+      }
+    });
+
+  }
+
+  else if (req.body.ph_num && req.body.otp) {
+
+    Contact.findOne({ "phone": req.body.ph_num }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, user) {
+      if (err) {
+        console.error(err);
+        return err;
+      }
+      if (user) {
+        if (user.phone_verfi = true) {
+          Otp.findOne({ "phone_number": req.body.ph_num }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+            if (err) {
+              console.error(err);
+              return err;
+            }
+            if (otpres) {
+              //
+              var dbtime = new Date(otpres.timestamp);
+              var curtime = new Date();
+              var diffMs = (curtime - dbtime); // milliseconds between now & Christmas
+              var diffDays = Math.floor(diffMs / 86400000); // days
+              var diffHrs = Math.floor((diffMs % 86400000) / 3600000); // hours
+              var diffMins = Math.round(((diffMs % 86400000) % 3600000) / 60000); // minutes
+              if (diffDays == 0 && diffHrs < 1 && diffMins <= 10) {
+                if (otpres.otp == req.body.otp) {
+                  token = user.generateJwt();
+                  res.status(200);
+                  res.json({
+                    "token": token
+                  });
+                  //res.status(200).json({"message": "Successfully Logged In"});
+                }
+                else {
+                  res.status(500).json({ "message": "Didn't match otp" });
+                }
+
+              }
+              else {
+                res.status(500).json({ "message": "Otp has been Expired" });
+              }
+              // 
+
+
+            }
+          })
+        }
+        else {
+          res.status(500).json({ "message": "Mobile Number Not Verified" });
+        }
+      }
+      else {
+        res.status(500).json({ "message": "This number is not registered.Please SignUp" })
+      }
+    })
+
+
+  }
+  //checking userid with password
+  else if (req.body.user_id && req.body.psd) {
+
+    var userIDstring = req.body.user_id;
+    var user_id_regex = new RegExp(["^", userIDstring, "$"].join(""), "i");
+
+    Contact.findOne({ $or: [{ "user_id": user_id_regex }, { "phone": req.body.user_id }] }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, user) {
+      if (err) {
+        console.error(err);
+        return err;
+      }
+      if (user) {
+        //checking user expiration date
+        if (user.DeletedUser == true) {
+          res.status(500).json({ "message": "Account Deleted" });
+          return;
+        }
+
+        if (user.expire_date) {
+          if (new Date() > user.expire_date) {
+            res.status(500).json({ "message": "User account is expired" });
+          }
+        }
+        //
+        //user is active or not
+        if ((!user.status) && (user.purpose != 'zogo')) {
+          res.status(500).json({ "message": "User account is InActive" });
+        }
+        if (user.validPassword(req.body.psd)) {
+          Contact.update({ _id: user._id }, { $set: { last_login: new Date, login_type: loginType, "user_agent": user_agent } }, function (err, re) {
+            if (err) {
+              console.log(err);
+              return;
+            }
+            token = user.generateJwt();
+            res.status(200);
+            res.json({
+              "token": token
+            });
+          })
+        } else {
+          res.status(500).json({ "message": "Password is Wrong" });
+        }
+      }
+      else {
+
+        res.status(500).json({ "message": "User is not registered" });
+
+      }
+    });
+  }
+}
+
+module.exports.SendOtpp = function (phonenumber) {
+  return new Promise(function (resolve, reject) {
+    function randomString(length, chars) {
+      var mask = '';
+      if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+      if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+      if (chars.indexOf('#') > -1) mask += '0123456789';
+      if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+      var result = '';
+      for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+      return result;
+    }
+    var randomotp = randomString(6, '#');
+    //var randomotp=Math.floor((Math.random() * 100000) + 54);
+    var newOtpJson = {
+      phone_number: phonenumber,
+      otp: randomotp
+    };
+
+    var newOtp = new Otp(JSON.parse(JSON.stringify(newOtpJson)));
+    newOtp.save(function (err) {
+      if (err) {
+        console.error("otp error :" + err);
+        return err;
+      }
+      request({
+
+
+        uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + phonenumber + Utilities.getConfig().smsApiTextKey + 'Adnate%20IOT%20Your%20OTP%20is ' + randomotp,
+        method: "GET"
+      }, function (error, response, body) {
+        /* var jsonObj = JSON.parse(response.body);
+        if(jsonObj.MsgStatus == 'Sent'){
+          email(req.body.first_name,req.body.email,randomemail);
+          res.status(200).json({"message" : "OTP sent successfully"})
+          
+        } */
+        res.status(200).json({ "message": "OTP sent successfully" })
+      });
+    });
+  });
+}
+//
+
+//reset password
+module.exports.resetPassword = function (req, res) {
+  if (req.body.dev == "Mobile") {
+    Contact.findOne({ "phone": req.body.phone }, function (err, result) {
+      if (err) {
+        console.error(err);
+        return err;
+      }
+      if (result) {
+        Otp.findOne({ "phone_number": req.body.phone }).sort({ "timestamp": -1 }).exec(function (err, otpres) {
+          if (err) {
+            console.error(err);
+            return err;
+          }
+          if (otpres) {
+            if (otpres.otp == req.body.otp) {
+              if (req.body.password) result.setPassword(req.body.password);
+              result.save(function (err) {
+                if (err) {
+                  console.error("inside error :" + err);
+                  return;
+                }
+                res.status(200).send(result._id);
+              })
+            }
+          }
+        })
+        //
+      }
+      else {
+        res.status(500).json({ "message": "This Number is not registered" });
+      }
+    })
+
+  }
+
+}
+
+//mlogin send otp 
+
+module.exports.LoginSendOtp = function (req, res) {
+  try {
+    Contact.findOne({ "phone": req.body.phone }, function (err, result) {
+      if (err) {
+        console.error(err);
+        return;
+      }
+      if (result) {
+        module.exports.SendOtpp(result.phone).then(function (success) {
+          res.send(success);
+        }, function (err) {
+          res.send(err);
+        });
+      }
+      else {
+        res.status(500).json({ "message": "This Number is not registered" });
+      }
+    })
+  }
+  catch (e) {
+    console.error(e);
+  }
+}
+//userFeedback
+//User Feedback
+module.exports.userFeedback = function (req, res) {
+
+  Contact.findOne({ "_id": req.body.uid }, function (err, validUser) {
+
+    if (err) {
+      console.error(err);
+      return;
+    }
+    else if (validUser) {
+      Contact.update({ _id: validUser._id }, { $addToSet: { "feedback": req.body.feedback }, $set: { "rating": req.body.rating } }, function (err, result) {
+        if (err) {
+          console.error(err);
+          return;
+        }
+        else if (result) {
+
+
+
+          var mailOptions = {
+            from: Utilities.getConfig().mailUser, // sender address
+            to: Utilities.getConfig().adminMailId, // gaurav.gupta@adnate.in list of receivers
+            subject: Utilities.getConfig().orgName + " - Feedback", // Subject line
+            text: "New Task", // plaintext body emailverfi
+            html: 'Dear Sir,<br>We have recevied a new feedback from ' + Utilities.getConfig().orgName + ' GPS Tracker Mobile App <br><br> <b>From: </b>' + validUser.first_name + ' ' + validUser.last_name + '<br><b>Contact Details: </b>' + validUser.email + ' /  ' + validUser.phone + '<br> <b>Rating: </b>' + req.body.rating + ' Stars<br> <b>Feedback: </b>' + req.body.feedback + ' <br><br>Thanks<br>Regards<br>Team Adnate'// html body
+          }
+          mailer.sendMail(mailOptions);
+
+
+          res.status(200).json({ "message": "Thanks for your feedback" });
+        }
+        else {
+          res.status(500).json({ "message": "Invalid User" });
+        }
+      });
+
+    }
+  })
+
+}
+
+// Push Notificaion
+
+module.exports.PushNotification = function (req, res) {
+
+  Contact.update({ _id: req.body.uid }, {
+    $addToSet: {
+      "pushNotification": {
+        token: req.body.token, "imei": req.body.imei, "os": req.body.os
+      }
+    }
+  }, function (err, result) {
+    if (err) {
+      console.error(err)
+      res.sendStatus(500);
+      return;
+    }
+    res.status(200).json({ "message": "Notifcation Updated" });
+  })
+
+}
+
+
+// Pull Notificaion on logout
+
+module.exports.PullNotification = function (req, res) {
+
+  Contact.update({ _id: req.body.uid }, {
+    $pull: {
+      "pushNotification": {
+        token: req.body.token, "imei": req.body.imei, "os": req.body.os
+      }
+    }
+  }, function (err, result) {
+    if (err) {
+      console.error(err)
+      res.sendStatus(500);
+      return;
+    }
+    res.status(200).json({ "message": "Notifcation Updated" });
+  })
+
+}
+// Forgot Password
+
+module.exports.forgotpwd = function (req, res) {
+
+  if (req.query.cred == undefined || req.query.cred == null || req.query.cred == "undefined") {
+    res.status(500).json({ "message": "Blank Entry" })
+
+  }
+  else {
+
+    Contact.findOne({ $or: [{ 'email': req.query.cred }, { 'phone': req.query.cred }] }, function (err, user) {
+
+      if (err) {
+        console.error(err);
+      }
+      else if (user) {
+        function randomString(length, chars) {
+          var mask = '';
+          if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+          if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+          if (chars.indexOf('#') > -1) mask += '0123456789';
+          if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+          var result = '';
+          for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+          return result;
+        }
+        var randomotp = randomString(6, '#');
+        //  var randomotp=Math.floor((Math.random() * 100000) + 54);
+
+        if (req.query.phone && req.query.otp) {
+
+          Contact.findOne({ $or: [{ 'email': req.query.phone }, { 'phone': req.query.phone }] }, function (err, verify) {
+            if (err) {
+              console.error(err);
+              res.status(500).json(err);
+            }
+            else if (verify) {
+              if (verify.otp == req.query.otp) {
+
+                this.salt = crypto.randomBytes(16).toString('hex');
+                this.hash = crypto.pbkdf2Sync(req.query.newpwd, this.salt, 1000, 64, 'sha1').toString('hex');
+                var changedPass = req.query.newpwd;
+
+                Contact.update({ _id: verify._id }, { $set: { "hash": this.hash, "salt": this.salt, "pass": changedPass } }, function (err, succ) {
+                  if (err) {
+                    console.error(err);
+                  }
+                  res.status(200).json({ "message": "Password Sucessfully Changes" })
+                })
+              }
+              else {
+                res.status(500).json({ "message": "Wrong OTP try again" })
+              }
+            }
+          })
+        }
+        else if (user.phone) {
+          Contact.update({ _id: user._id }, { $set: { "otp": randomotp } }, function (err, result) {
+
+            if (err) {
+              console.error(err);
+              res.status(500).json(err);
+              return;
+            }
+            //  res.status(200).json({"message" : "OTP sent successfully"})
+
+            request({
+
+
+              uri: Utilities.getConfig().smsUrl + "&sender=OneQlk" + Utilities.getConfig().smsApiMobileKey + user.phone + Utilities.getConfig().smsApiTextKey + 'Use%20this%20One%20Time%20Password%20to%20reset%20your%20password ' + randomotp,
+              method: "GET"
+            }, function (error, response, body) {
+              /* var jsonObj = JSON.parse(response.body);
+              if(jsonObj.MsgStatus == 'Sent'){
+                //  email(req.body.first_name,req.body.email,randomemail);
+                res.status(200).json({"message" : "OTP sent successfully"})
+                
+              }
+              else{
+                res.status(500).json({"message" : "OTP sent failed"})
+              } */
+              res.status(200).json({ "message": "OTP sent successfully" })
+            });
+
+          })
+
+        }
+        else if (user.email) {
+          Contact.update({ _id: user._id }, { $set: { "otp": randomotp } }, function (err, result) {
+
+            if (err) {
+              res.status(500).json(err);
+              console.error(err);
+            }
+            var url = "http://" + Utilities.getConfig().webAppIp + ":" + Utilities.getConfig().EPort + "/users/foremailver?key=" + randomotp + '&uid=' + user._id;
+
+            var mailOptions = {
+              from: "", // sender address
+              to: user.email, // gaurav.gupta@adnate.in list of receivers
+              subject: Utilities.getConfig().orgName + " - Reset Passwod", // Subject line
+              text: "New Task", // plaintext body emailverfi
+              html: 'Dear Sir,<br>You can reset your password by clicking on following link<br><center><a href="' + url + '"><br><input type="button"  value="Click here to Reset Your Password" style="font-size:12pt;color:white;background-color:DodgerBlue  ;padding:11px" ></a></center><br><br>Thanks<br>Regards<br>Team Adnate'// html body
+            }
+            mailer.sendMail(mailOptions);
+
+
+            res.status(200).json({ "message": "email sent" });
+          })
+
+
+
+        }
+      }
+      else {
+        res.status(500).json({ "message": "Email ID / Mobile Number not found" })
+      }
+    })
+  }
+
+}
+
+
+module.exports.foremailver = function (req, res) {
+
+  Contact.findOne({ "_id": req.query.uid }, function (err, res) {
+    if (err) {
+      console.error(err)
+    }
+    else if (res) {
+      if (req.query.key == res.otp) {
+        return res.redirect(Utilities.getConfig().webAppDomain + '/forgotpwd');
+
+
+      }
+    }
+    else {
+    }
+  })
+
+}
+module.exports.foremailpwdchg = function (req, res) {
+
+  Contact.findOne({ $or: [{ 'email': req.query.cred.toLowerCase() }, { 'phone': req.query.cred }] }, function (err, verify) {
+
+    this.salt = crypto.randomBytes(16).toString('hex');
+    this.hash = crypto.pbkdf2Sync(req.query.newpwd, this.salt, 1000, 64).toString('hex');
+    Contact.update({ _id: verify._id }, { $set: { "hash": this.hash, "salt": this.salt } }, function (err, succ) {
+      if (err) {
+        console.error(err);
+      }
+      res.status(200).json({ "message": "Password Sucessfully Changes" })
+    })
+  })
+
+}
+
+//Contact OUS
+module.exports.contactous = function (req, res) {
+  if (req.body.phone == null || req.body.phone == undefined || req.body.phone == "undefined") {
+    req.body.phone == " "
+  }
+  var mailOptions = {
+    from: Utilities.getConfig().mailUser, // sender address
+    to: req.body.dealerid, // gaurav.gupta@adnate.in list of receivers
+    subject: Utilities.getConfig().orgName + " - Contact Ous", // Subject line
+    text: "New Task", // plaintext body emailverfi phone
+    html: 'Dear Sir,<br>Someone Wanted to contact ous details are :-<br><br><b>Email ID-</b>' + req.body.email.toLowerCase() + '<br><b>Phone Number-</b>' + req.body.phone + '<br><b>Title-</b>' + req.body.title + '<br><b>Message-</b>' + req.body.msg + '<br><br>Thanks<br>Regards<br>Team Adnate'// html body
+  }
+  mailer.sendMail(mailOptions);
+
+
+  res.status(200).json({ "message": "email sent" });
+}
+
+//Resend OTP 
+module.exports.otpResend = function (req, res) {
+
+  Contact.findOne({ 'phone': req.query.phone }, function (err, verify) {
+    if (err) {
+      console.error(err);
+      res.status(500);
+      return;
+    }
+    else if (verify) {
+      function randomString(length, chars) {
+        var mask = '';
+        if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
+        if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+        if (chars.indexOf('#') > -1) mask += '0123456789';
+        if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*+-:";\'<>?,./|\\';
+        var result = '';
+        for (var i = length; i > 0; --i) result += mask[Math.floor(Math.random() * mask.length)];
+        return result;
+      }
+      var randomotp = randomString(6, '#');
+      Contact.update({ _id: verify._id }, { $set: { otp: randomotp } }, function (err, result) {
+        if (err) {
+          console.error(err)
+          return res.status(400).send(err);
+        }
+        else {
+          request({
+
+
+            uri: Utilities.getConfig().smsUrl + Utilities.getConfig().smsApiMobileKey + verify.phone + Utilities.getConfig().smsApiTextKey + 'Use%20this%20One%20Time%20Password%20for%20SignUp%20 ' + randomotp,
+            method: "GET"
+          }, function (error, response, body) {
+
+            /* var jsonObj = JSON.parse(response.body);
+            if(jsonObj.MsgStatus == 'Sent'){
+              res.status(200).json({"message" : "OTP sent successfully"})
+            }
+            else{
+              res.status(500).json({"message" : "OTP sent failed"})
+              
+            } */
+            res.status(200).json({ "message": "OTP sent successfully" })
+          });
+
+        }
+      });
+
+    }
+    else {
+      res.status(500).json({ "message": "User not Registered" })
+    }
+  })
+}
+
+//Account Edit
+module.exports.Account_Edit = function (req, res) {
+  var token;
+  Contact.findOne({ '_id': req.body.uid }, function (err, verify) {
+    if (err) {
+      console.error(err);
+    }
+    else if (verify) {
+      console.log("BODY",req.body)
+     var accountUpdate={}
+      if(req.body.reportSchedule){
+      if(req.body.report_config){
+        accountUpdate['report_config'] = req.body.report_config;
+      }
+      if(req.body.report_emailid){
+        accountUpdate['report_emailid'] = req.body.report_emailid;
+      }
+      if(req.body.scheduled_excel_report){
+        accountUpdate['scheduled_excel_report'] = req.body.scheduled_excel_report;
+      }
+      }
+      else{
+        // accountUpdate = {
+          accountUpdate['first_name'] = req.body.fname;
+          accountUpdate['last_name'] = req.body.lname;
+          accountUpdate['org_name'] = req.body.org;
+          accountUpdate['GET_notif'] = req.body.noti;
+          accountUpdate['fuel_unit'] = req.body.fuel_unit;
+          accountUpdate['show_announcement'] = req.body.show_announcement?req.body.show_announcement:false;
+          accountUpdate['digital_input'] = req.body.digital_input?req.body.digital_input:1
+          accountUpdate['label_setting']=req.body.label_setting?req.body.label_setting:false;
+
+          if(req.body.immobilize_setting!=undefined){
+	          accountUpdate['immobilize_setting']=req.body.immobilize_setting?req.body.immobilize_setting:false;
+	        }
+          if(req.body.tow_setting!=undefined){
+	          accountUpdate['tow_setting']=req.body.tow_setting?req.body.immobilize_setting:false;
+	        }
+          if(req.body.parking_setting!=undefined){
+	          accountUpdate['parking_setting']=req.body.parking_setting?req.body.immobilize_setting:false;
+	        }
+  //          show_announcement:req.body.show_announcement?req.body.show_announcement:false,
+	// digital_input:req.body.digital_input?req.body.digital_input:1,
+        //  first_name: req.body.fname,
+        //  last_name: req.body.lname,
+        //  org_name: req.body.org,
+        //  GET_notif: req.body.noti,
+        //  fuel_unit: req.body.fuel_unit,
+       }
+
+      
+     
+      
+      if (req.body.timezone) {
+        accountUpdate['timezone'] = req.body.timezone;
+      }
+      Contact.update({ _id: verify._id }, { $set: accountUpdate }, function (err, result) {
+        if (err) {
+          console.error(err)
+          res.status(500);
+          return;
+        }
+        else {
+          Contact.findOne({ '_id': req.body.uid }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, verifyy) {
+            if (err) {
+              console.error(err);
+            }
+            else if (verify) {
+
+              if (result.nModified == 1) {
+                token = verifyy.generateJwt();
+                res.status(200);
+                res.json({
+                  "token": token
+                });
+              }
+              else {
+                token = verify.generateJwt();
+                res.status(200);
+                res.json({
+                  "token": token
+                });
+              }
+            }
+          })
+
+        }
+      })
+
+
+    }
+    else {
+      res.status(500).json({ "message": "User not Registered" });
+    }
+  })
+}
+
+module.exports.set_user_setting = function (req, res) {
+ if (!req.body.uid) {
+    res.status(200).send({ "message": "uid is mandatory" });
+    return;
+  }
+
+  Contact.findOne({ '_id': req.body.uid }, function (err, user) {
+    if (err) {
+      console.error(err);
+    }
+    else if (user) {
+      if (req.body.lang) user.language_code = req.body.lang;
+      if (req.body.currency_code) user.currency_code = req.body.currency_code;
+      if (req.body.fuelUnit) user.fuel_unit = req.body.fuelUnit;
+      if (req.body.notifSound) user.notification_sound = req.body.notifSound;
+      if (req.body.engine_cut_psd) user.engine_cut_psd = req.body.engine_cut_psd;
+      if (req.body.tripGeneration) user.tripGeneration = req.body.tripGeneration;
+      if (req.body.unit_measurement) user.unit_measurement = req.body.unit_measurement;
+      if (req.body.adminAlert == true || req.body.adminAlert == false) user.adminAlert = req.body.adminAlert;
+      if (req.body.tripGeneration) user.tripGeneration = req.body.tripGeneration;
+      if (req.body.voice_alert == true || req.body.voice_alert == false) user.voice_alert = req.body.voice_alert;
+      if (req.body.announcement) user.announcement = req.body.announcement;
+      user.save(function (err, result) {
+        if (err) {
+          console.error(err)
+          res.status(500);
+          return;
+        }
+        else if (result) {
+         if (req.body.lang) res.status(200).send({ "message": "language updated sucessfully" })
+	 else res.status(200).send({ "message": "announcement updated sucessfully" })
+        }
+      })
+
+
+    }
+    else {
+      res.status(500).json({ "message": "User not Registered" });
+    }
+  })
+
+
+ }
+/*
+module.exports.get_user_setting = function (req, res) {
+
+  if (!req.body.uid) {
+    res.status(200).send({ "message": "uid is mandatory" });
+    return;
+  }
+
+  Contact.findOne({ '_id': ObjectId(req.body.uid) })
+
+    .select('language_code fuel_unit notification_sound engine_cut_psd voice_alert currency_code unit_measurement timezone adminAlert')
+    .lean()
+    .exec(function (err, user) {
+      if (err) {
+        console.error(err);
+      }
+      else if (user) {
+        res.status(200).send(user);
+
+      }
+      else {
+        res.status(500).json({ "message": "User not Registered" });
+      }
+    })
+}
+*/
+
+module.exports.get_user_setting = function (req, res) {
+
+  if (!req.body.uid) {
+    res.status(200).send({ "message": "uid is mandatory" });
+    return;
+  }
+
+  Contact.findOne({ '_id': ObjectId(req.body.uid) })
+   .select('language_code fuel_unit notification_sound engine_cut_psd voice_alert currency_code unit_measurement timezone adminAlert announcement show_announcement isSuperAdmin isDealer supAdmin')
+    .lean()
+    .exec(function (err, user) {
+      if (err) {
+        console.error(err);
+      }
+      else if (user) {
+        if(user.isSuperAdmin){
+          res.status(200).send(user);
+		
+        }else{
+          Contact.find({_id: ObjectId(user.supAdmin) }).exec(function (err, result) {
+		console.log("Result--->",result)
+    console.log("User---",user);
+    if(result[0].announcement){
+	    console.log("In If Condition");
+		var data={
+ 	     "language_code":user.language_code, 
+      	"fuel_unit":user.fuel_unit,
+   	    "notification_sound":user.notification_sound,
+      	"engine_cut_psd":user.engine_cut_psd,
+      	"voice_alert":user.voice_alert,
+    	  "currency_code":user.currency_code,
+    	  "unit_measurement":user.unit_measurement,
+    	  "timezone":user.timezone,
+    	  "adminAlert":user.adminAlert,
+    	  "announcement":result[0].announcement,
+	  "show_announcement":user.show_announcement?user.show_announcement:false,
+    	  "isSuperAdmin":user.isSuperAdmin,
+    	  "isDealer":user.isDealer,
+	   "digital_input":user.digital_input?user.digital_input:1
+		}            
+	    	console.log("Data-=---",data);
+        res.status(200).send(data);
+  }else{
+	console.log("In else Condition");
+
+    var data={
+ 	     "language_code":user.language_code, 
+      	"fuel_unit":user.fuel_unit,
+   	    "notification_sound":user.notification_sound,
+      	"engine_cut_psd":user.engine_cut_psd,
+      	"voice_alert":user.voice_alert,
+    	  "currency_code":user.currency_code,
+    	  "unit_measurement":user.unit_measurement,
+    	  "timezone":user.timezone,
+    	  "adminAlert":user.adminAlert,
+    	  "isSuperAdmin":user.isSuperAdmin,
+	  "show_announcement":user.show_announcement?user.show_announcement:false,
+    	  "isDealer":user.isDealer,
+	   "digital_input":user.digital_input?user.digital_input:1
+	}            
+	    	console.log("Data-=---",data);
+        res.status(200).send(data);
+
+  }
+  })
+  }
+  }
+      else {
+        res.status(500).json({ "message": "User not Registered" });
+      }
+    })
+}
+
+
+module.exports.verify_EngineCut_Password = function (req, res) {
+
+  if (!req.body.uid) {
+    res.status(200).send({ "message": "uid is mandatory" });
+    return;
+  }
+
+  Contact.findOne({ '_id': ObjectId(req.body.uid) })
+
+    .exec(function (err, user) {
+      if (err) {
+        console.error(err);
+      }
+      else if (user) {
+        if (user.engine_cut_psd == null || user.engine_cut_psd == undefined || user.engine_cut_psd == "") {
+          res.status(200).send({ message: "password not set for user" });
+        } else if (user.engine_cut_psd) {
+          if (req.body.psd == user.engine_cut_psd) {
+            res.status(200).send({ message: "password verified" });
+          }
+          else {
+            res.status(200).send({ message: "password not matched" });
+          }
+        }
+        // res.status(200).send(user);
+
+      }
+      else {
+        res.status(500).json({ "message": "User not Registered" });
+      }
+    })
+}
+
+
+module.exports.cancel_signup = function (req, res) {
+  Contact.remove({ "phone": req.query.phone }).then(function (err) {
+    if (err) {
+      res.send(err);
+      return err;
+    }
+    res.status(200).json({ "message": "Sign_Canceled" })
+  });
+}
+
+module.exports.demo = function (req, res) {
+
+  var mailOptions = {
+    from: Utilities.getConfig().mailUser, // sender address
+    to: req.query.dealeID, //  dealeID gaurav.gupta@adnate.in list of receivers
+    subject: "Oneqlik - Demo Request", // Subject line
+    text: "New Task", // plaintext body emailverfi
+    html: 'Dear Sir,<br>Someone Wanted a demo details are :-<br><br><b>First Name-</b>' + req.query.fname + '<br><b>Last Name-</b>' + req.query.lname + '<br><b>Email-</b>' + req.query.email + '<br><b>Mobile Number-</b>' + req.query.mobile + '<br><br>Thanks<br>Regards<br>Team Adnate'// html body
+  }
+  mailer.sendMail(mailOptions);
+
+
+  res.status(200).json({ "message": "email sent" });
+}
+
+//Get Custumer
+module.exports.getCust = function (req, res) {
+  var query = {};
+  query = { 'Dealer': req.query.uid, isDealer: false };
+  var pageNo = parseInt(req.query.pageNo);
+  var size = parseInt(req.query.size);
+  if (pageNo < 0 || pageNo === 0) {
+    response = { "error": true, "message": "invalid page number, should start with 1" };
+    return res.json(response)
+  }
+  // query = { isDealer: false };
+
+  query['$and'] = [];
+  if (req.query.search) {
+    query['$and'].push({ $or: [{ "first_name": new RegExp(req.query.search, 'i') }, { "last_name": new RegExp(req.query.search, 'i') }, { "phone": new RegExp(req.query.search, 'i') }] })
+  }
+
+  var queryNew = { "$or": [{ DeletedUser: { $exists: false } }, { "$and": [{ DeletedUser: { $exists: true } }, { DeletedUser: false }] }] };
+  query['$and'].push(queryNew);
+
+  Contact.find(query)
+    .populate({ path: 'Dealer', select: 'first_name last_name' })
+    .sort({ first_name: 1, last_name: 1 })
+    .skip(size * (pageNo - 1))
+    .limit(size)
+    .exec(function (err, custumer) {
+
+      if (err) {
+        console.error(err);
+        res.status(500).json({ "message": "Error Occured" } + err);
+      }
+      else if (custumer.length > 0) {
+        // res.status(200).json(custumer)
+        var pointer = 0;
+        var trac_pointer = 0;
+        let final_data = [];
+        for (let k = 0; k < custumer.length; k++) {
+          trac_pointer++;
+          module.exports.calDevice(custumer[k], function (id) {
+            final_data.push(id)
+            pointer++
+            if (trac_pointer == pointer) {
+              res.send(final_data);
+            }
+          })
+        }
+      }
+      else {
+        res.status(500).json({ "message": "No custumer Found" });
+      }
+    })
+}
+
+module.exports.calDevice = function (uid, cb) {
+
+
+  Device.find({ "user": uid._id }, function (err, data) {
+
+    if (err) {
+      console.error(err);
+    }
+    else if (data.length > 0) {
+
+      if (uid.phone.charAt(0) == "n") {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": uid.email,
+          "phone": "",
+          "total_vehicle": data.length,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+
+        }
+        cb(r);
+      }
+      else if (uid.email.charAt(0) == "n" && uid.email.charAt(2) == "E") {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": "",
+          "phone": uid.phone,
+          "total_vehicle": data.length,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(r);
+      }
+      else {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": uid.email,
+          "phone": uid.phone,
+          "total_vehicle": data.length,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(r);
+      }
+
+
+
+    }
+    else {
+
+      if (uid.phone.charAt(0) == "n") {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": uid.email,
+          "phone": "",
+          "total_vehicle": 0,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(r)
+      }
+      else if (uid.email.charAt(0) == "n" && uid.email.charAt(2) == "E") {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": "",
+          "phone": uid.phone,
+          "total_vehicle": 0,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(r)
+      }
+      else {
+        let r = {
+          "_id": uid._id,
+          "first_name": uid.first_name,
+          "last_name": uid.last_name,
+          "email": uid.email,
+          "phone": uid.phone,
+          "total_vehicle": 0,
+          "custumerid": uid.custumerid,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "pass": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "dealer_firstname": uid.Dealer.first_name,
+          "dealer_lastname": uid.Dealer.last_name,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(r)
+      }
+
+    }
+  })
+
+}
+
+
+//Get Custumer Token
+module.exports.getCustumerDetail = function (req, res) {
+
+  Contact.findOne({ '_id': req.query.uid }).populate({ "path": "Dealer", select: "first_name last_name phone email address" }).exec(function (err, custumer) {
+
+    if (err) {
+      console.error(err);
+      res.status(500).json({ "message": "Error Occured" } + err);
+    }
+    else if (custumer) {
+
+
+      if (custumer.image_path) {
+        token = custumer.generateJwt();
+        img = Utilities.getImage(custumer.image_path)
+        res.status(200);
+        res.json({
+          "img": img,
+          "cust": custumer,
+          "custumer_token": token,
+        });
+      }
+      else {
+        token = custumer.generateJwt();
+        res.status(200);
+        res.json({
+          "cust": custumer,
+          "custumer_token": token,
+        });
+      }
+
+
+    }
+    else {
+      res.status(500).json({ "message": "Custumer not found" });
+    }
+  })
+
+}
+
+//Get Support
+module.exports.getSupport = function (req, res) {
+  let support = {
+    "number": "020-65103106",
+    "email": "poonam.g@processfactory.in"
+  }
+  res.status(200).json(support);
+}
+
+//Getabout
+module.exports.Getabout = function (req, res) {
+  let about = {
+    "org": Utilities.getConfig().orgName,
+    "address": "404,purple pride square,kalewadi phata Kalewadi, Pune, Maharashtra 411057",
+    "Contact_Person": "Gaurav Gupta",
+    "Contact_per_phone": "7507500582",
+    "Contact_per_email": "info@processfactory.in",
+    "website": "https://www.oneqlik.in/home"
+  }
+  res.status(200).json(about);
+}
+
+//Dealer Information Anshul Saxena 04/02/2018
+
+module.exports.getDealerInfo = function (req, res) {
+
+  var json = JSON.parse(require('fs').readFileSync('app_api/dealerConfig/' + req.query.url + '.json', 'utf8'));
+
+  res.status(200).json(json);
+}
+
+module.exports.dealer_status = function (req, res) {
+  //  res.status(500).send({"message":"restricted"});
+  Contact.findOne({ _id: ObjectId(req.body.uId) }, function (err, response) {
+
+    if (err) {
+      console.error(err);
+    } else {
+      if (req.body.status == false) {
+        response.status = false
+        response.deactivated_by = req.body.loggedIn_id
+        response.deactivated_on = new Date();
+        response.save(function (err) {
+          if (err) {
+            console.error(err);
+          } else {
+            res.sendStatus(200);
+          }
+        })
+      } else if (req.body.status == true) {
+        response.status = true
+        response.activated_by = req.body.loggedIn_id
+        response.activated_on = new Date();
+        response.save(function (err) {
+          if (err) {
+            console.error(err)
+          } else {
+            res.sendStatus(200);
+          }
+        })
+      }
+    }
+  })
+
+}
+
+
+//get all dealer vehicles added by m.hemanth@12/06/2018
+
+module.exports.calDevices = function (uid, cb) {
+  var pushArray = [];
+  var summation = 0;
+  Contact.find({ 'Dealer': uid._id }, function (err, customer) {
+    if (err) {
+      console.error(err);
+      res.sendStatus(500);
+      return;
+    }
+    if (customer.length > 0) {
+      function syncCustomers(index) {
+        if (index < customer.length) {
+          var t = customer[index];
+          Device.find({ "user": t._id }, function (err, data) {
+            if (err) {
+              console.error(err);
+              res.sendStatus(500);
+              return;
+            }
+            if (data.length > 0) {
+              summation = summation + data.length;
+            }
+            else {
+              summation = summation;
+            }
+            syncCustomers(index + 1);
+          }
+          );
+        }
+        else {
+          var obj = {
+            "dealer_id": uid._id,
+            "dealer_firstname": uid.first_name,
+            "dealer_lastname": uid.last_name,
+            "email": uid.email,
+            "phone": uid.phone,
+            "vehicleCount": summation,
+            "status": uid.status,
+            "created_on": uid.created_on,
+            "password": uid.pass,
+            "expiration_date": uid.expire_date,
+            "userid": uid.user_id,
+            "address": uid.address,
+            "docObject": uid.imageDoc,
+            "login_type": uid.login_type,
+            "last_login": uid.last_login,
+            "last_activity_on": uid.last_activity_on
+          }
+          cb(obj);
+        }
+      }
+      syncCustomers(0)
+    }
+    else {
+      Device.find({ "user": uid._id }, function (err, dealerdev) {
+        if (err) {
+          console.error(err);
+          res.status(500).send(err);
+          return;
+        }
+        var obj = {
+          "dealer_id": uid._id,
+          "dealer_firstname": uid.first_name,
+          "dealer_lastname": uid.last_name,
+          "email": uid.email,
+          "phone": uid.phone,
+          "vehicleCount": dealerdev.length,
+          "status": uid.status,
+          "created_on": uid.created_on,
+          "password": uid.pass,
+          "expiration_date": uid.expire_date,
+          "userid": uid.user_id,
+          "address": uid.address,
+          "docObject": uid.imageDoc,
+          "login_type": uid.login_type,
+          "last_login": uid.last_login,
+          "last_activity_on": uid.last_activity_on
+        }
+        cb(obj);
+      })
+    }
+  });
+
+}
+
+module.exports.getAllDealerVehicles = function (req, res) {
+  var final_result = [];
+  var query = {};
+  var pageNo = parseInt(req.query.pageNo);
+  var size = parseInt(req.query.size);
+  if (pageNo < 0 || pageNo === 0) {
+    response = { "error": true, "message": "invalid page number, should start with 1" };
+    return res.json(response)
+  }
+
+  if (req.query.supAdmin) {
+    query = { $and: [{ isDealer: true }, { supAdmin: req.query.supAdmin }] };
+  }
+
+  else {
+    query = { $and: [{ isDealer: true }] };
+  }
+
+  var queryNew = { "$or": [{ DeletedUser: { $exists: false } }, { "$and": [{ DeletedUser: { $exists: true } }, { DeletedUser: false }] }] };
+  // console.log(queryNew)
+  query['$and'].push(queryNew);
+
+  if (req.query.search) {
+    query['$and'].push({ $or: [{ "first_name": new RegExp(req.query.search, 'i') }, { "last_name": new RegExp(req.query.search, 'i') }, { "phone": new RegExp(req.query.search, 'i') }] })
+  }
+  // console.log("queryforget Dealer", query)
+  Contact.find(query)
+    .sort({ first_name: 1, last_name: 1 })
+    .skip(size * (pageNo - 1))
+    .limit(size)
+    .exec(function (err, dealers) {
+      if (err) {
+        console.error(err);
+        res.status(500).send(err);
+        return;
+      }
+      if (dealers.length > 0) {
+        var pointer = 0;
+        var trac_pointer = 0;
+        let final_data = [];
+        for (var k = 0; k < dealers.length; k++) {
+          trac_pointer++;
+          module.exports.calDevices(dealers[k], function (id) {
+            final_data.push(id)
+            pointer++
+            if (trac_pointer == pointer) {
+              res.send(final_data);
+            }
+          })
+        }
+      }
+      else {
+        res.status(500).json({ "message": "No customer Found" });
+      }
+    })
+}
+
+
+
+//update user details
+
+module.exports.editUserDetails = function (req, res) {
+ Contact.findOne({ "_id": mongoose.Types.ObjectId(req.body.contactid) }, function (err, contact) {
+    if (err) {
+      console.error(err);
+      res.status(500).send(err);
+      return;
+    }
+
+    if (contact) {
+      var tempUser = JSON.parse(JSON.stringify(contact));
+      if (req.body.first_name) tempUser.first_name = req.body.first_name;
+      if (req.body.last_name) tempUser.last_name = req.body.last_name;
+      if (req.body.email) tempUser.email = req.body.email;
+      if (req.body.phone) tempUser.phone = req.body.phone;
+       if (req.body.emergencyContact) tempUser.emergency_contact= req.body.emergencyContact;
+
+      // if (typeof (req.body.status) != null) tempUser.status = req.body.status;
+      if (req.body.expire_date) tempUser.expire_date = req.body.expire_date;
+      if (req.body.address) tempUser.address = req.body.address;
+      if (req.body.user_id) tempUser.user_id = req.body.user_id;
+      if (req.body.alert) tempUser.alert = req.body.alert;
+      if (req.body.role) tempUser.role = req.body.role;
+      // if (req.body.role) tempUser.role = req.body.role;
+      if (req.body.group) tempUser.group = req.body.group;
+      if (req.body.status) tempUser.status = req.body.status;
+
+      Contact.update({ _id: req.body.contactid }, { $set: tempUser }, function (err, data) {
+        if (err) {
+          res.status(400).send({ "message": err.errmsg });
+          return;
+        }
+        res.status(200).send({ "message": "Saved" });
+      });
+    }
+    else {
+      res.status(500).send("No User Found");
+    }
+  })
+
+}
+
+module.exports.deleteuserDetails = function (req, res) {
+  //console.log(req.body.userId);
+  Contact.findOne({ "_id": mongoose.Types.ObjectId(req.body.userId) }, function (err, delcontact) {
+    console.log(delcontact);
+    if (err) {
+      console.error(err);
+      res.status(500).send(err);
+      return;
+    }
+    if (delcontact) {
+
+      delcontact.DeletedUser = req.body.deleteuser;
+      delcontact.save(function (err) {
+        if (err) {
+          console.error("inside error :" + err);
+          return;
+        }
+        res.status(200).send(delcontact._id);
+      });
+    }
+    else {
+      res.status(500).send("No User Found");
+    }
+
+  })
+}
+
+
+
+
+//get all customer vehicles under dealer
+
+module.exports.getAllCustomerVehiclesUnderDealer = function (req, res) {
+  var final_result = [];
+  Contact.find({ isDealer: true }, function (err, dealers) {
+    if (err) {
+      console.error(err);
+      res.status(500).send(err);
+      return;
+    }
+    if (dealers.length > 0) {
+      var pointer = 0;
+      var trac_pointer = 0;
+      let final_data = [];
+      for (var k = 0; k < dealers.length; k++) {
+        trac_pointer++;
+        module.exports.callCustomerVehicles(dealers[k], function (id) {
+          final_data.push(id)
+          pointer++
+          if (trac_pointer == pointer) {
+            res.send(final_data);
+          }
+        })
+      }
+    }
+    else {
+      res.status(500).json({ "message": "No customer Found" });
+    }
+  })
+}
+
+module.exports.callCustomerVehicles = function (uid, cb) {
+  var pushArray = [];
+  Contact.find({ 'Dealer': uid._id }, function (err, customer) {
+    if (err) {
+      console.error(err);
+      res.sendStatus(500);
+      return;
+    }
+    if (customer.length > 0) {
+      function syncCustomers(index) {
+        if (index < customer.length) {
+          var t = customer[index];
+          Device.find({ "user": t._id }, function (err, data) {
+            if (err) {
+              console.error(err);
+              res.sendStatus(500);
+              return;
+            }
+            if (data.length > 0) {
+              var cusObj = {
+                "customerName": t.first_name,
+                "customerId": t._id,
+                "vehicleDetails": data
+              }
+              pushArray = pushArray.concat(cusObj);
+            }
+            else {
+              var cusObj = {
+                "customerName": t.first_name,
+                "customerId": t._id,
+                "vehicleDetails": []
+              }
+              pushArray = pushArray.concat(cusObj);
+            }
+            syncCustomers(index + 1);
+          }
+          );
+        }
+        else {
+          var obj = {
+            "dealer_id": uid._id,
+            "dealer_firstname": uid.first_name,
+            "dealer_lastname": uid.last_name,
+            "email": uid.email,
+            "CustomerDetails": pushArray
+          }
+          cb(obj);
+        }
+
+      }
+      syncCustomers(0)
+    }
+    else {
+      Device.find({ "user": uid._id }, function (err, dealerdev) {
+        if (err) {
+          console.error(err);
+          res.status(500).send(err);
+          return;
+        }
+        var obj = {
+          "dealer_id": uid._id,
+          "dealer_firstname": uid.first_name,
+          "dealer_lastname": uid.last_name,
+          "email": uid.email,
+          "phone": uid.phone,
+        }
+        cb(obj);
+
+      })
+    }
+  });
+
+}
+
+function evaluate(object) {
+  if (object && object.constructor === Array) {
+    for (var i = 0; i < object.length; i++) {
+      object[i] = evaluate(object[i]);
+    }
+  } else if (object && typeof object == 'object' && Object.keys(object).length > 0) {
+    if (Object.keys(object).indexOf('_eval') < 0) {
+      for (var key in object) {
+        object[key] = evaluate(object[key]);
+      }
+    } else switch (object['_eval']) {
+      case 'Id':
+        {
+          object = mongoose.Types.ObjectId(object['value']);
+          break;
+        }
+      case 'regex':
+        {
+          object = new RegExp(object['value'], 'i');
+          break;
+        }
+      case 'date':
+        {
+          object = new Date(object['value']).getTime();
+          break;
+        }
+    }
+  }
+  return object;
+}
+
+
+
+module.exports.datatable = function (req, res) {
+  var dtop = {
+    conditions: evaluate(req.body.find),
+    select: req.body.select
+  };
+  //console.log(JSON.stringify(dtop.conditions, null, 4));
+
+  Contact.dataTable(req.body, dtop, function (err, data) {
+    if (err) {
+      console.error(err);
+      res.sendStatus(500);
+      return;
+    }
+    res.send(data);
+  })
+}
+
+
+module.exports.editUserMaster = function (req, res) {
+  Contact.findOne({ "_id": mongoose.Types.ObjectId(req.body.contactid) }, function (err, data) {
+
+    if (err) {
+      res.status(500).send(err);
+      return;
+    } else {
+      if (data) {
+        if (req.body.first_name) data.first_name = req.body.first_name;
+        if (req.body.last_name) data.last_name = req.body.last_name;
+        if (req.body.email) data.email = req.body.email;
+        if (req.body.organisation_name) data.organisation_name = req.body.organisation_name;
+        if (req.body.welcome_msg == true) data.welcome_msg = req.body.welcome_msg;
+        if (req.body.welcome_msg == false) data.welcome_msg = req.body.welcome_msg;
+        if (req.body.phone) data.phone = req.body.phone;
+        if (req.body.isDealer == false || req.body.isDealer) data.isDealer = req.body.isDealer;
+        if (req.body.isSuperAdmin == false || req.body.isSuperAdmin) data.isSuperAdmin = req.body.isSuperAdmin;
+        if (req.body.Dealer) data.Dealer = req.body.Dealer;
+        if (req.body.createdOn) data.createdOn = req.body.createdOn;
+        if (req.body.user_id) data.user_id = req.body.user_id;
+        if ((req.body.status == false) || req.body.status) data.status = req.body.status;
+
+
+        var tempData = JSON.parse(JSON.stringify(data));
+
+        if ((req.body.isDealer == true) && (req.body.isDealer != undefined)) {
+
+          tempData.isDealer == true;
+          delete tempData['Dealer'];
+          var uId = tempData._id;
+          var updateFlag = 'dealerUpdate';
+
+          saveUser(uId, updateFlag);
+        }
+
+
+
+        else if ((req.body.isSuperAdmin == true) && (req.body.isSuperAdmin != undefined)) {
+
+          if (tempData.supAdmin) {
+            tempData.organisation = tempData.supAdmin;
+
+
+
+          }
+          tempData.isSuperAdmin == true;
+          tempData.isDealer = false;
+          delete tempData['Dealer'];
+          delete tempData['supAdmin'];
+          var uId = tempData._id;
+          var updateFlag = 'adminUpdate';
+          saveUser(uId, updateFlag);
+
+        } else {
+          var uId = tempData._id;
+          var updateFlag = 'null';
+          saveUser(uId, updateFlag);
+        }
+
+
+        function saveUser(uId, updateFlag) {
+
+          var updatesupAdmin = false;
+          var updateId = uId;
+          // var newObject = new Contact(JSON.parse(JSON.stringify(tempData)));
+
+
+          if (updateFlag == 'adminUpdate') {
+            var unsetKey = { $unset: { supAdmin: "" }, $set: tempData };
+          }
+          if (updateFlag == 'dealerUpdate') {
+            var unsetKey = { $set: tempData }
+          }
+
+
+          if (updateFlag == 'null') {
+            var unsetKey = { $set: tempData }
+          }
+
+
+          Contact.update({ _id: tempData._id }, unsetKey, function (err, changedObject) {
+            if (err) {
+              res.status(400).send(err);
+            } else {
+
+              if (updateFlag != undefined) {
+
+                var query = {
+                  $or: [{ user: updateId }, { Dealer: updateId }]
+                };
+                if (updateFlag == 'dealerUpdate') {
+                  var setDevice = {
+                    "Dealer": updateId
+                  };
+
+                }
+                if (updateFlag == 'adminUpdate') {
+                  var setDevice = {
+                    "Dealer": updateId,
+                    "supAdmin": updateId
+                  };
+
+
+
+                  updatesupAdmin = true;
+
+                }
+
+                if (updateFlag == 'null') {
+                  var changeDealer = changedObject.Dealer;
+                  var setDevice = {
+                    "Dealer": changeDealer,
+                  };
+
+                }
+
+
+
+                if (updatesupAdmin == true) {
+                  Contact.update({ Dealer: updateId }, { $set: { supAdmin: updateId } }, { multi: true }, function (err, updated) {
+                    if (err) {
+                      res.status(400).send({ "message": "err during supadmin update" })
+                    }
+                    Device.update(query, { $set: setDevice }, { multi: true }, function (err, deviceUpdate) {
+                      if (err) {
+                        res.status(400).send({ "message": "error during device update" });
+                      }
+                      res.status(200).send({ "message": "Role changed and devices updated" });
+
+                    })
+
+                  })
+                } else {
+                  Device.update(query, { $set: setDevice }, { multi: true }, function (err, deviceUpdate) {
+                    if (err) {
+                      res.status(400).send({ "message": "error during device update" });
+                    }
+                    res.status(200).send({ "message": "Role changed and devices updated" });
+
+                  })
+                }
+
+              } else {
+                res.status(200).send("Edited Successfully!!!");
+              }
+            }
+          })
+        }
+
+      } else {
+        res.status(500).send("No user Found !!!");
+      }
+
+    }
+  })
+}
+module.exports.tokenCheck = function (req, res, next) {
+
+  if (req.method == "GET") next();
+  if (req.method == "POST" || req.method == "PUT") {
+    var token = req.header('Authorization');
+    if (token != "bearer") {
+      req.user = jwt.decode(token);
+      next();
+      // res.send({res:jwt.decode(token)});
+      // jwt.verify(token, 'MY_SECRET', function (err, data) {
+      //   req.user = data;
+      //   if (err) return res.send({ msg: "forbidden" });
+      //   next();
+      // });
+    }
+    else
+      res.send({ msg: "forbidden" });
+  }
+
+}
+
+// module.exports.updatePassword = function (req,res){
+//   console.log(req.body);
+//   Contact.find({ "_id": mongoose.Types.ObjectId(req.body.ID) }-, function (err, user) {
+//     if(err){
+//       res.status(400).send(err);
+//   }
+//   if(user){
+//     console.log(user);
+//     res.status(200).send({"success":"Password updated"});
+//   } 
+//   else{
+//     res.status(200).send({"success":"UserNot found"});
+//   }  
+// })
+
+// }
+
+module.exports.updatePassword = function (req, res) {
+  Contact.findOne({ "_id": mongoose.Types.ObjectId(req.body.ID) }, function (err, result) {
+    if (err) {
+      console.error(err);
+      res.status(400).send(err);
+      return err;
+    }
+    if (result) {
+      //console.log(result);
+      if (result.validPassword(req.body.OLD_PASS)) {
+        console.log("old pass found !!!!");
+        result.setPassword(req.body.NEW_PASS);
+        result.save(function (err) {
+          if (err) {
+            console.error("inside error :" + err);
+            return;
+          }
+          //console.log(result);
+          res.status(200).send({ "message": "Password updated !!!" });
+        })
+      } else {
+        res.status(400).send({ "message": "Old password not matched" });
+      }
+    }
+    else {
+      res.status(500).json({ "message": "USER NOT FOUND !!!" });
+    }
+  })
+}
+
+
+module.exports.getCostumer = function (req, res) {
+  var query = {};
+  if (req.query.all == 'true') {
+    query = { 'supAdmin': ObjectId(req.query.uid), isDealer: false };
+  } else {
+    query = { 'Dealer': ObjectId(req.query.uid), isDealer: false };
+  }
+  console.log('query', query);
+
+  var pageNo = parseInt(req.query.pageNo);
+  var size = parseInt(req.query.size);
+  if (pageNo < 0 || pageNo === 0) {
+    response = { "error": true, "message": "invalid page number, should start with 1" };
+    return res.json(response)
+  }
+  // query = { isDealer: false };
+
+  query['$and'] = [];
+  if (req.query.search) {
+    query['$and'].push({ $or: [{ "first_name": new RegExp(req.query.search, 'i') }, { "last_name": new RegExp(req.query.search, 'i') }, { "phone": new RegExp(req.query.search, 'i') }] })
+  }
+
+  var queryNew = { $or: [{ DeletedUser: { $exists: false } }, { $and: [{ DeletedUser: { $exists: true } }, { DeletedUser: false }] }] };
+  query['$and'].push(queryNew);
+  Contact.aggregate([
+
+    {
+      $match: query
+    },
+    {
+      $project: {
+        "user_id": 1, "first_name": 1, "last_name": 1, "Dealer": 1, "email": 1, "phone": 1, "pass": 1, "created_on": 1, "expire_date": 1, "point_Allocated": 1,
+        "login_type": 1, "last_login": 1, "last_activity_on": 1, "_id": -1, "status": 1, "imageDoc": 1, "pushNotification": 1, "address": 1, "std_code": 1, "accountSuspended": 1,"emergency_contact":1, "adminAlert": 1
+      }
+    },
+    {
+      $sort: { _id: -1 }
+    },
+    {
+      $lookup: {
+        from: "devInfo",
+        localField: "_id",
+        foreignField: "user",
+        as: "total_vehicle"
+      }
+    },
+    {
+      $lookup: {
+        from: "client_master",
+        localField: "Dealer",
+        foreignField: "_id",
+        as: "DealerDetails"
+      }
+    },
+    {
+      $project: {
+        "DealerDetails.first_name": 1, "DealerDetails.last_name": 1, "total_vehicle": { $size: "$total_vehicle" }, "delDevices": { $size: "$total_vehicle.deletedDevice" }, "user_id": 1, "first_name": 1, "last_name": 1, "address": 1, "std_code": 1, "accountSuspended": 1,
+        "email": 1, "phone": 1, "pass": 1, "created_on": 1, "expire_date": 1, "point_Allocated": 1, "login_type": 1, "last_login": 1, "last_activity_on": 1, "_id": -1, "status": 1,"emergency_contact":1, "imageDoc": 1, "notificationTokenCount": { $size: "$pushNotification" }, "adminAlert": 1
+      }
+    },
+    {
+      "$skip": (size * (pageNo - 1))
+    },
+    {
+      "$limit": size
+    }
+  ]).exec(function (err, customers) {
+    if (err) {
+      res.status(400).send(err);
+    }
+    res.status(200).send(customers);
+  })
+
+}
+
+
+
+module.exports.getAllDealerDetails = function (req, res) {
+  var final_result = [];
+  var query = {};
+  var pageNo = parseInt(req.query.pageNo);
+  var size = parseInt(req.query.size);
+  if (pageNo < 0 || pageNo === 0) {
+    response = { "error": true, "message": "invalid page number, should start with 1" };
+    return res.json(response)
+  }
+
+  if (req.query.supAdmin) {
+    query = { $and: [{ isDealer: true }, { supAdmin: ObjectId(req.query.supAdmin) }] };
+  }
+
+  else {
+    query = { $and: [{ isDealer: true }] };
+  }
+
+  if (req.query.customer_role) {
+    query = { $and: [{ customer_role: 'subadmin' }] };
+  }
+
+  var queryNew = { "$or": [{ DeletedUser: { $exists: false } }, { "$and": [{ DeletedUser: { $exists: true } }, { DeletedUser: false }] }] };
+  //console.log(queryNew)
+  query['$and'].push(queryNew);
+
+  if (req.query.search) {
+    query['$and'].push({ $or: [{ "first_name": new RegExp(req.query.search, 'i') }, { "last_name": new RegExp(req.query.search, 'i') }, { "phone": new RegExp(req.query.search, 'i') }] })
+  }
+  console.log("queryforget Dealer", query);
+
+  Contact.aggregate([
+    {
+      $match: query
+    },
+    {
+      "$skip": (size * (pageNo - 1))
+    },
+    {
+      "$limit": size
+    },
+    {
+      $project: {
+        "phone": 1, "status": 1, "created_on": 1, "pass": 1, "expire_date": 1, "user_id": 1, "address": 1, "imageDoc": 1, "login_type": 1, "std_code": 1, "accountSuspended": 1,
+        "last_login": 1, "last_activity_on": 1, "_id": 1, "first_name": 1, "last_name": 1, "email": 1, "pushNotification": 1, "cust_add_permission": 1, "device_add_permission": 1, "point_Allocated": 1, "point_Shared_Other": 1
+      }
+    },
+    {
+      $sort: { _id: -1 }
+    },
+    {
+      $lookup: {
+        from: "devInfo",
+        localField: "_id",
+        foreignField: "Dealer",
+        as: "total_vehicle"
+      }
+    },
+    {
+      $project: {
+        "total_vehicle": { $size: "$total_vehicle" }, "delDevices": { $size: "$total_vehicle.deletedDevice" }, "user_id": 1, "first_name": 1, "last_name": 1, "address": 1, "cust_add_permission": 1, "device_add_permission": 1, "point_Allocated": 1, "point_Shared_Other": 1, "std_code": 1,
+        "email": 1, "phone": 1, "pass": 1, "created_on": 1, "expire_date": 1, "login_type": 1, "last_login": 1, "last_activity_on": 1, "_id": -1, "status": 1, "imageDoc": 1, "notificationTokenCount": { $size: "$pushNotification" }, "accountSuspended": 1
+      }
+    }
+
+  ]).exec(function (err, Dealers) {
+    if (err) {
+      res.status(400).send(err);
+    }
+    res.status(200).send(Dealers);
+  })
+
+}
+
+module.exports.getAllDealerDetailsMobile = function (req, res) {
+  var final_result = [];
+  var query = {};
+  var pageNo = parseInt(req.query.pageNo);
+  var size = parseInt(req.query.size);
+  if (pageNo < 0 || pageNo === 0) {
+    response = { "error": true, "message": "invalid page number, should start with 1" };
+    return res.json(response)
+  }
+
+  if (req.query.supAdmin) {
+    query = { $and: [{ isDealer: true }, { supAdmin: ObjectId(req.query.supAdmin) }] };
+  }
+
+  else {
+    query = { $and: [{ isDealer: true }] };
+  }
+
+  if (req.query.customer_role) {
+    query = { $and: [{ customer_role: 'subadmin' }] };
+  }
+
+  var queryNew = { "$or": [{ DeletedUser: { $exists: false } }, { "$and": [{ DeletedUser: { $exists: true } }, { DeletedUser: false }] }] };
+  //console.log(queryNew)
+  query['$and'].push(queryNew);
+
+  if (req.query.search) {
+    query['$and'].push({ $or: [{ "first_name": new RegExp(req.query.search, 'i') }, { "last_name": new RegExp(req.query.search, 'i') }, { "phone": new RegExp(req.query.search, 'i') }] })
+  }
+  //console.log("queryforget Dealer", query);
+
+  Contact.aggregate([
+    {
+      $match: query
+    },
+    {
+      "$skip": (size * (pageNo - 1))
+    },
+    {
+      "$limit": size
+    },
+    {
+      $project: {
+        "phone": 1, "status": 1, "created_on": 1, "pass": 1, "expire_date": 1, "user_id": 1, "address": 1, "imageDoc": 1, "login_type": 1, "std_code": 1, "accountSuspended": 1,
+        "last_login": 1, "last_activity_on": 1, "_id": 1, "first_name": 1, "last_name": 1, "email": 1, "pushNotification": 1, "cust_add_permission": 1, "device_add_permission": 1, "point_Allocated": 1, "point_Shared_Other": 1
+      }
+    },
+    {
+      $sort: { _id: -1 }
+    },
+    {
+      $lookup: {
+        from: "devInfo",
+        localField: "_id",
+        foreignField: "Dealer",
+        as: "total_vehicle"
+      }
+    },
+    {
+      $project: {
+        "total_vehicle": { $size: "$total_vehicle" }, "user_id": 1, "first_name": 1, "last_name": 1, "point_Allocated": 1, "point_Shared_Other": 1,
+        "email": 1, "phone": 1, "pass": 1, "created_on": 1, "expire_date": 1, "_id": -1, "status": 1, "accountSuspended": 1, "address": 1
+      }
+    }
+    // _id, first_name, last_name, email, phone, pass, created_on, total_vehicle, status, expire_date, user_id, address, point_Allocated
+
+  ]).exec(function (err, Dealers) {
+    if (err) {
+      res.status(400).send(err);
+    }
+    res.status(200).send(Dealers);
+  })
+
+}
+module.exports.zogogetDocument = function (req, res) {
+  Contact.findOne({ _id: req.query.id }, function (err, data) {
+    if (err) {
+      res.status(400).send('something went wrong');
+    }
+    res.status(200).send({ 'userdata': data });
+  })
+
+
+}
+
+
+module.exports.restoreUsers = function (req, res) {
+  Contact.findOneAndUpdate(
+    { _id: req.query.id },
+    { $unset: { DeletedUser: "" } },
+    function (err, user) {
+      if (err) {
+        res.status(400).send({ message: "no user found" });
+      }
+      res.status(200).send(user);
+    }
+  );
+};
+
+
+module.exports.reportPrefrence = function (req, res) {
+ //console.log('req.body', req.body);
+  var setObject = {}
+
+  if (req.body.reportsArr) {
+    setObject['report_preference'] = req.body.reportsArr;
+  }
+  if(req.body.userSetting){
+  setObject['user_settings'] = req.body.userSetting;
+  }
+
+
+  Contact.update(
+    { _id: req.body.id },
+    { $set: setObject }, function (err, user) {
+      if (err) {
+        req.status(400).send({ err })
+      }
+      res.status(200).send({ "message": "Report preference updated" });
+    }
+  )
+}
+
+module.exports.dashboardContent = function (req, res) {
+  //console.log('req.body', req.body);
+  var setObject = {}
+
+  if (req.body.dashboard_column) {
+    setObject['dashboard_column'] = req.body.dashboard_column;
+  }
+
+
+  Contact.update(
+    { _id: req.body.user },
+    { $set: setObject }, function (err, user) {
+      if (err) {
+        req.status(400).send({ err })
+      }
+      res.status(200).send({ "message": "Dashboard Content updated" });
+    }
+  )
+}
+
+
+module.exports.shareUserDetails = function (req, res) {
+  Contact.findOne({ _id: req.query.user })
+    .populate('supAdmin')
+    .exec(function (err, data) {
+      if (err) {
+        res.status(400).send('something went wrong');
+      }
+      var userdata = data;
+      var SMSURL = Utilities.getConfig().smsUrl;
+      var organisation_name = data.supAdmin.organisation_name;
+      var tracktiveAndroidLink = 'https://play.google.com/store/apps/details?id=com.trackTive.ionic';
+      var tracktiveIOSlink = 'https://apps.apple.com/us/app/tracktive/id1467327906?ls=1';
+      var userCred1 = 'Dear%20' + userdata.first_name + "%20Your%20credentials%20of%20" + organisation_name + "%20are%20userId%20" + userdata.user_id + '%20Password%20' + userdata.pass;
+      var mobile_key = Utilities.getConfig().smsApiMobileKey;
+      var txt_key = Utilities.getConfig().smsApiTextKey;
+
+      if (organisation_name == 'Tractive VTS') {
+        SMSURL += '&sender=TRACTV';
+        userCred1 = 'Dear%20' + userdata.first_name + "%20Welcome%20to%20" + organisation_name + "%20Platform%20%2C%20Your%20Login%20credentials%20are%20UserId%20" + userdata.user_id + '%20Password%20' + userdata.pass + "%20App%20%Download%20link%20Android%20" + tracktiveAndroidLink + '%20IOS%20' + tracktiveIOSlink + '%20WEB%20LOGIN%20' + 'https://www.tracktive.in/login';
+      } else if (organisation_name === 'IConnect Technologies') {
+        SMSURL = Utilities.getConfig().smsUrl_iconnect;
+        SMSURL += '&senderid=AMASEC';
+        mobile_key = Utilities.getConfig().smsApiMobileKey_iconnect;
+        txt_key = Utilities.getConfig().smsApiTextKey_iconnect;
+        var userCred1 = 'Dear%20' + userdata.first_name + "%20Welcome%20to%20" + organisation_name + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + userdata.user_id + '%20Password%20' + userdata.pass + '%20WEB%20LOGIN%20' + 'http://www.iconnectindia.in';
+      } else if (organisation_name === 'Saanvi Security Solution') {
+        SMSURL = Utilities.getConfig().smsUrl_saanvi;
+        mobile_key = Utilities.getConfig().smsApiMobileKey_saanvi;
+        txt_key = Utilities.getConfig().smsApiTextKey_saanvi;
+        var userCred1 = 'Dear%20' + userdata.first_name + "%20Welcome%20to%20" + organisation_name + "%20platform%20%2C%20Your%20credentials%20are%20userId%20" + userdata.user_id + '%20Password%20' + userdata.pass + '%20WEB%20LOGIN%20' + 'http://www.iconnectindia.in';
+      } else {
+        SMSURL += '&sender=OneQlk';
+      }
+
+
+
+      console.log(SMSURL + mobile_key + userdata.phone + txt_key + userCred1);
+
+      request({
+        uri: SMSURL + mobile_key + userdata.phone + txt_key + userCred1,
+        method: "GET"
+      }, function (error, response, body) {
+        res.status(200).json({ "message": "Login Information Sent" })
+      });
+    })
+
+}
+
+module.exports.hardresetPassword = function (req, res) {
+  console.log('inside function');
+  Contact.findOne({ _id: req.body.id }, function (err, user) {
+    if (err) {
+      res.status(500).send({ "message": "No user found" })
+    }
+    console.log('useruseruseruseruseruseruser',user);
+    var newUser = new Contact(user);
+    newUser.setPassword(req.body.pass);
+    newUser.save(function (err) {
+      if (err) {
+        res.status(500).send(err)
+      } else {
+        res.status(200).send({ "message": "Password updated !!!" });
+      }
+    })
+  })
+
+}
+
+
+
+module.exports.setDealerPermission = function (req, res) {
+  Contact.findOne({ _id: req.body.uid }, function (err, user) {
+    if (err) {
+      res.status(500).send({ "message": "No user found" })
+    }
+
+    var newUser = new Contact(user);
+    newUser.cust_add_permission = req.body.cust_add_permission;
+    newUser.device_add_permission = req.body.device_add_permission;
+    newUser.save(function (err) {
+      if (err) {
+        res.status(500).send({ "message": "Internal Server Error" })
+      } else {
+        res.status(200).send({ "message": "Permission updated !!!" });
+      }
+    })
+  })
+}
+
+
+module.exports.getuserDetail = function (req, res) {
+  Contact.findOne({ _id: req.query.uid }, function (err, user) {
+    if (err) {
+      res.status(500).send({ "message": "No user found" })
+    }
+    res.status(200).send(user)
+
+  })
+
+
+}
+
+module.exports.getuserDetailBySchhol = function (req, res) {
+  Contact.findOne({ school: req.query.uid }, function (err, user) {
+    if (err) {
+      res.status(500).send({ "message": "No user found" })
+    }
+    res.status(200).send(user)
+
+  })
+
+}
+
+
+
+module.exports.DemoRequest = function (req, res) {
+  console.log("Inside function");
+
+  var parseJson = req.body.url;
+
+  var parse1 = parseJson.split('.');
+  var parse2 = parse1[1];
+  console.log("ParsedUrl", parse2);
+
+  var Dealerjson = JSON.parse(require('fs').readFileSync('app_api/dealerConfig/' + parse2 + '.json', 'utf8'));
+  console.log('Dealerjson', Dealerjson);
+  if (Dealerjson == undefined) {
+    return res.status(500).send({ 'message': 'Url is not valid' });
+  }
+  console.log(Dealerjson);
+  var DealerEmail = (Dealerjson.email != '') ? Dealerjson.email : res.status(500).send({ 'message': 'Update Email in DealerConfig' });
+  console.log('DealerEmail', DealerEmail);
+  var DealerName = Dealerjson.dealerName;
+
+  var client_fName = req.body.first_name;
+  var client_lName = req.body.last_name ? req.body.last_name : '';
+  var client_phone = req.body.phone ? req.body.phone : '';
+  var client_email = req.body.email;
+
+  var htmlBody = '<div>' +
+    '<div>' +
+    '<p>' + 'Dear ' + DealerName + '</p>' +
+    '<p>' + 'Someone has requested for demo.Please find details below.' + '</p>' +
+    '<p>' + 'First Name : ' + client_fName + '</p>' +
+    '<p>' + 'Last Name : ' + client_lName + '</p>' +
+    '<p>' + 'Eamil : ' + client_email + '</p>' +
+    '<p>' + 'Phone Number :' + client_phone + '</p>' +
+    '<p>' + 'Thank You' + '</p>'
+  '</div>' +
+    '</div>';
+
+  var mainEmail = 'reports@oneqlik.in'
+  var mailOptions = {
+    from: mainEmail, // sender address
+    to: DealerEmail, // list of receivers
+    subject: 'Demo Request', // Subject line
+    // text: 'Switch Status', // plaintext body
+    html: htmlBody
+  };
+  console.log(mailOptions);
+  mailer.sendMail(mailOptions);
+  res.status(200).send({ 'message': 'Demo request sent' })
+
+
+}
+
+module.exports.checkPointAvailablity = function (req, res) {
+  console.log('req.body', req.query);
+  if (!req.query.u_id) {
+    res.status(200).send({ message: "user_id is mandatory" });
+    return;
+  }
+  if (!req.query.demanded_points) {
+    res.status(200).send({ message: "demanded_points is mandatory" })
+    return;
+  }
+
+
+  Contact.findOne({ _id: req.query.u_id }, function (err, con) {
+    if (err) {
+      console.log(err);
+      res.send(err)
+      return;
+    }
+    if (con) {
+      //console.log(con);
+      if (con.isSuperAdmin) {
+        Device.find({ $or: [{ user: req.query.u_id }, { Dealer: req.query.u_id }] }).count().exec(function (err, count) {
+          if (err) {
+            console.log(err);
+            res.send(err)
+            return;
+          }
+          if (count >= 0) {
+            console.log(count);
+            if (con.point_Allocated > (count + con.point_Shared_Other)) {
+
+              if (con.point_Allocated - (count + con.point_Shared_Other) > req.query.demanded_points) {
+                res.status(200).send({ available: true, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+              }
+              else {
+                res.status(200).send({ available: true, message: "only " + con.point_Allocated - (count + con.point_Shared_Other) + " points available" })
+              }
+            } else {
+              res.status(200).send({ available: false, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+            }
+
+          }
+
+        })
+      }
+      else if (con.isDealer) {
+        Device.find({ Dealer: req.query.u_id }).count().exec(function (err, count) {
+          if (err) {
+            console.log(err);
+            res.send(err)
+            return;
+          }
+          if (count >= 0) {
+            console.log(count);
+            if (con.point_Allocated > (count + con.point_Shared_Other)) {
+
+              if (con.point_Allocated - (count + con.point_Shared_Other) > req.query.demanded_points) {
+                res.status(200).send({ available: true, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+              }
+              else {
+                res.status(200).send({ available: true, message: "only " + con.point_Allocated - (count + con.point_Shared_Other) + " points available" })
+              }
+            } else {
+              res.status(200).send({ available: false, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+            }
+
+          }
+
+        })
+      } else {
+        Contact.findOne({ _id: con.Dealer }, function (err, con1) {
+          if (err) {
+            console.log(err);
+            res.send(err)
+            return;
+          }
+          if (con1) {
+            Device.find({ Dealer: con.Dealer }).count().exec(function (err, count) {
+              if (err) {
+                console.log(err);
+                res.send(err)
+                return;
+              }
+              if (count >= 0) {
+                con = con1
+                console.log(count);
+                if (con.point_Allocated > (count + con.point_Shared_Other)) {
+
+                  if (con.point_Allocated - (count + con.point_Shared_Other) > req.query.demanded_points) {
+                    res.status(200).send({ available: true, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+                  }
+                  else {
+                    res.status(200).send({ available: true, message: "only " + con.point_Allocated - (count + con.point_Shared_Other) + " points available" })
+                  }
+                } else {
+                  res.status(200).send({ available: false, available_points: con.point_Allocated - (count + con.point_Shared_Other) })
+
+                }
+
+              }
+
+            })
+          }
+        })
+
+
+      }
+
+
+    } else {
+
+      res.status(200).send({ "message": "user not found" })
+    }
+  })
+}
+module.exports.getColumnSetting = function (req, res) {
+
+  if (!req.query.u_id) {
+    res.status(200).send({ message: "user_id is mandatory" });
+    return;
+  }
+
+
+
+  Contact.findOne({ _id: req.query.u_id }, function (err, con) {
+    if (err) {
+      console.log(err);
+      res.send(err)
+      return;
+    }
+    if (con) {
+      if (con.dashboard_column) {
+        res.status(200).send({ "dashboard_column": con.dashboard_column })
+      } else {
+        res.status(200).send({ "message": "dashboard_column not found" })
+      }
+
+
+
+    } else {
+
+      res.status(200).send({ "message": "user not found" })
+    }
+  })
+}
+
+module.exports.setApiKey = function (req, res) {
+
+  if (!req.body.u_id) {
+    res.status(200).send({ message: "user_id is mandatory" });
+    return;
+  }
+  if (!req.body.dashboard_column) {
+    res.status(200).send({ message: "dashboard_column is mandatory" })
+    return;
+  }
+
+
+  Contact.findOne({ _id: req.body.u_id }, function (err, con) {
+    if (err) {
+      console.log(err);
+      res.send(err)
+      return;
+    }
+    if (con) {
+      Contact.update({ _id: req.body.u_id }, { $set: { dashboard_column: req.body.dashboard_column } }, function (err, upd) {
+        if (err) {
+          console.log(err);
+        }
+        if (upd) {
+          res.status(200).send("saved successfully");
+        }
+      })
+
+
+
+
+    } else {
+
+      res.status(200).send({ "message": "user not found" })
+    }
+  })
+}
+module.exports.setApiKey = function (req, res) {
+
+  if (!req.query.u_id) {
+    res.status(200).send({ message: "user_id is mandatory" });
+    return;
+  }
+  if (!req.query.api_key) {
+    res.status(200).send({ message: "api key is mandatory" })
+    return;
+  }
+
+
+  Contact.findOne({ _id: req.query.u_id }, function (err, con) {
+    if (err) {
+      console.log(err);
+      res.send(err)
+      return;
+    }
+    if (con) {
+      Contact.update({ _id: req.query.u_id }, { $set: { api_key: req.query.api_key } }, function (err, upd) {
+        if (err) {
+          console.log(err);
+        }
+        if (upd) {
+          res.status(200).send("saved successfully");
+        }
+      })
+
+
+
+
+    } else {
+
+      res.status(200).send({ "message": "user not found" })
+    }
+  })
+}
+
+
+module.exports.getApiKey = function (req, res) {
+
+  if (!req.query.u_id) {
+    res.status(200).send({ message: "user_id is mandatory" });
+    return;
+  }
+
+
+
+  Contact.findOne({ _id: req.query.u_id }, function (err, con) {
+    if (err) {
+      console.log(err);
+      res.send(err)
+      return;
+    }
+    if (con) {
+      if (con.api_key) {
+        res.status(200).send({ "api_key": con.api_key })
+      } else {
+        res.status(200).send({ "message": "api key not found" })
+      }
+
+
+
+    } else {
+
+      res.status(200).send({ "message": "user not found" })
+    }
+  })
+}
+module.exports.accountSuspension = function (req, res) {
+  if ((req.body.accountSuspended === undefined) || (req.body.acoountId === undefined) || (req.body.suspendedBy === undefined)) {
+    res.status(500).send({ "message": "missing Parameters" });
+  } else {
+    var query = {};
+
+    if (req.body.suspendedBy === 'org') {
+      query = { $or: [{ supAdmin: req.body.acoountId }, { _id: req.body.acoountId }] };
+      Contact.update(query, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err1, contactObj) {
+        if (err1) {
+          res.status(400).send({ "message": "contact noot updated" });
+        }
+        Device.update({ supAdmin: req.body.acoountId }, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err2, deviceObj) {
+          if (err2) {
+            res.status(400).send({ "message": "device noot updated" });
+          }
+          res.status(200).send({ "messsage": "Contact and device status updated" });
+        })
+      })
+    } else if (req.body.suspendedBy === 'distributer') {
+      Contact.update({ $or: [{ Dealer: req.body.acoountId }, { _id: req.body.acoountId }] }, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err1, contactObj) {
+        if (err1) {
+          res.status(400).send({ "message": "contact noot updated" });
+        }
+        Device.update({ $or: [{ Dealer: req.body.acoountId }, { user: req.body.acoountId }] }, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err2, deviceObj) {
+          if (err2) {
+            res.status(400).send({ "message": "device noot updated" });
+          }
+          res.status(200).send({ "messsage": "Contact and device status updated" });
+        })
+      })
+    } else if (req.body.suspendedBy === 'dealer') {
+      Contact.update({ $or: [{ _id: req.body.acoountId }] }, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err1, contactObj) {
+        if (err1) {
+          res.status(400).send({ "message": "contact noot updated" });
+        }
+        Device.update({ $or: [{ user: req.body.acoountId }] }, { $set: { accountSuspended: req.body.accountSuspended } }, { multi: true }, function (err2, deviceObj) {
+          if (err2) {
+            res.status(400).send({ "message": "device noot updated" });
+          }
+          res.status(200).send({ "messsage": "Contact and device status updated" });
+        })
+      })
+
+    } else {
+      res.status(500).send({ "message": "missing parameters" })
+
+    }
+
+  }
+
+}
+
+
+module.exports.getsupAdmin = function (req, res) {
+  Contact.find({ organisation: req.query.supAdmin }, function (err, distributers) {
+    if (err) {
+      res.status(500).send({ "message": "no distributers found" });
+    }
+    res.status(200).send(distributers);
+  })
+}
+
+module.exports.getDealerAndcust = function (req, res) {
+  Contact.find({ $or: [{ supAdmin: req.query.supAdmin }, { Dealer: req.query.supAdmin }] }, function (err, distributers) {
+    if (err) {
+      res.status(500).send({ "message": "no data found" });
+    }
+    res.status(200).send(distributers);
+  })
+
+}
+
diff --git a/src/assets/image/csfont.css b/src/assets/image/csfont.css
new file mode 100644
index 0000000..e7fea6b
--- /dev/null
+++ b/src/assets/image/csfont.css
@@ -0,0 +1,56 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
+}
diff --git a/src/assets/image/cust.jpg b/src/assets/image/cust.jpg
new file mode 100644
index 0000000..d865e47
Binary files /dev/null and b/src/assets/image/cust.jpg differ
diff --git a/src/assets/image/cust2.jpg b/src/assets/image/cust2.jpg
new file mode 100644
index 0000000..04ff83d
Binary files /dev/null and b/src/assets/image/cust2.jpg differ
diff --git a/src/assets/image/customised_table.png b/src/assets/image/customised_table.png
new file mode 100644
index 0000000..489924f
Binary files /dev/null and b/src/assets/image/customised_table.png differ
diff --git a/src/assets/image/default.png b/src/assets/image/default.png
new file mode 100644
index 0000000..9cc7097
Binary files /dev/null and b/src/assets/image/default.png differ
diff --git a/src/assets/image/demo.jpg b/src/assets/image/demo.jpg
new file mode 100644
index 0000000..cefe8d6
Binary files /dev/null and b/src/assets/image/demo.jpg differ
diff --git a/src/assets/image/disarmSensor.png b/src/assets/image/disarmSensor.png
new file mode 100644
index 0000000..c0260e8
Binary files /dev/null and b/src/assets/image/disarmSensor.png differ
diff --git a/src/assets/image/dot.png b/src/assets/image/dot.png
new file mode 100644
index 0000000..ed9303d
Binary files /dev/null and b/src/assets/image/dot.png differ
diff --git a/src/assets/image/dot2.png b/src/assets/image/dot2.png
new file mode 100644
index 0000000..e12422f
Binary files /dev/null and b/src/assets/image/dot2.png differ
diff --git a/src/assets/image/download.jpg b/src/assets/image/download.jpg
new file mode 100644
index 0000000..eebe654
Binary files /dev/null and b/src/assets/image/download.jpg differ
diff --git a/src/assets/image/east-direction.png b/src/assets/image/east-direction.png
new file mode 100644
index 0000000..5f72602
Binary files /dev/null and b/src/assets/image/east-direction.png differ
diff --git a/src/assets/image/else.png b/src/assets/image/else.png
new file mode 100644
index 0000000..d79f110
Binary files /dev/null and b/src/assets/image/else.png differ
diff --git a/src/assets/image/else2.png b/src/assets/image/else2.png
new file mode 100644
index 0000000..76ce96b
Binary files /dev/null and b/src/assets/image/else2.png differ
diff --git a/src/assets/image/else3.png b/src/assets/image/else3.png
new file mode 100644
index 0000000..d78cf56
Binary files /dev/null and b/src/assets/image/else3.png differ
diff --git a/src/assets/image/email.png b/src/assets/image/email.png
new file mode 100644
index 0000000..2015e14
Binary files /dev/null and b/src/assets/image/email.png differ
diff --git a/src/assets/image/engine-off.png b/src/assets/image/engine-off.png
new file mode 100644
index 0000000..7a94634
Binary files /dev/null and b/src/assets/image/engine-off.png differ
diff --git a/src/assets/image/engine-on.png b/src/assets/image/engine-on.png
new file mode 100644
index 0000000..a753124
Binary files /dev/null and b/src/assets/image/engine-on.png differ
diff --git a/src/assets/image/engine_off.png b/src/assets/image/engine_off.png
new file mode 100644
index 0000000..aa1d488
Binary files /dev/null and b/src/assets/image/engine_off.png differ
diff --git a/src/assets/image/engine_on.png b/src/assets/image/engine_on.png
new file mode 100644
index 0000000..6e838ed
Binary files /dev/null and b/src/assets/image/engine_on.png differ
diff --git a/src/assets/image/enginegreen.png b/src/assets/image/enginegreen.png
new file mode 100644
index 0000000..76ef914
Binary files /dev/null and b/src/assets/image/enginegreen.png differ
diff --git a/src/assets/image/enginena.png b/src/assets/image/enginena.png
new file mode 100644
index 0000000..a779611
Binary files /dev/null and b/src/assets/image/enginena.png differ
diff --git a/src/assets/image/enginered.png b/src/assets/image/enginered.png
new file mode 100644
index 0000000..1488dab
Binary files /dev/null and b/src/assets/image/enginered.png differ
diff --git a/src/assets/image/f2_logo.png b/src/assets/image/f2_logo.png
new file mode 100644
index 0000000..d5cfc3f
Binary files /dev/null and b/src/assets/image/f2_logo.png differ
diff --git a/src/assets/image/f_logo.jpg b/src/assets/image/f_logo.jpg
new file mode 100644
index 0000000..e6e9d0e
Binary files /dev/null and b/src/assets/image/f_logo.jpg differ
diff --git a/src/assets/image/facebook.png b/src/assets/image/facebook.png
new file mode 100644
index 0000000..01870c0
Binary files /dev/null and b/src/assets/image/facebook.png differ
diff --git a/src/assets/image/favicon.ico b/src/assets/image/favicon.ico
new file mode 100644
index 0000000..c8855f6
Binary files /dev/null and b/src/assets/image/favicon.ico differ
diff --git a/src/assets/image/faviconn.ico b/src/assets/image/faviconn.ico
new file mode 100644
index 0000000..c8855f6
Binary files /dev/null and b/src/assets/image/faviconn.ico differ
diff --git a/src/assets/image/fleetmanagement.jpg b/src/assets/image/fleetmanagement.jpg
new file mode 100644
index 0000000..36849de
Binary files /dev/null and b/src/assets/image/fleetmanagement.jpg differ
diff --git a/src/assets/image/forgot.png b/src/assets/image/forgot.png
new file mode 100644
index 0000000..4ffb9a1
Binary files /dev/null and b/src/assets/image/forgot.png differ
diff --git a/src/assets/image/forward.png b/src/assets/image/forward.png
new file mode 100644
index 0000000..70a4bbc
Binary files /dev/null and b/src/assets/image/forward.png differ
diff --git a/src/assets/image/fuel.png b/src/assets/image/fuel.png
new file mode 100644
index 0000000..8cd6a46
Binary files /dev/null and b/src/assets/image/fuel.png differ
diff --git a/src/assets/image/gauge.png b/src/assets/image/gauge.png
new file mode 100644
index 0000000..b7cfa2b
Binary files /dev/null and b/src/assets/image/gauge.png differ
diff --git a/src/assets/image/geofence.png b/src/assets/image/geofence.png
new file mode 100644
index 0000000..c72f645
Binary files /dev/null and b/src/assets/image/geofence.png differ
diff --git a/src/assets/image/gps (1).png b/src/assets/image/gps (1).png
new file mode 100644
index 0000000..5581ece
Binary files /dev/null and b/src/assets/image/gps (1).png differ
diff --git a/src/assets/image/gps-disconnected.png b/src/assets/image/gps-disconnected.png
new file mode 100644
index 0000000..8175e06
Binary files /dev/null and b/src/assets/image/gps-disconnected.png differ
diff --git a/src/assets/image/gps-map.jpg b/src/assets/image/gps-map.jpg
new file mode 100644
index 0000000..36d0b04
Binary files /dev/null and b/src/assets/image/gps-map.jpg differ
diff --git a/src/assets/image/gps.png b/src/assets/image/gps.png
new file mode 100644
index 0000000..2296d60
Binary files /dev/null and b/src/assets/image/gps.png differ
diff --git a/src/assets/image/gpsI.png b/src/assets/image/gpsI.png
new file mode 100644
index 0000000..bdbc2c9
Binary files /dev/null and b/src/assets/image/gpsI.png differ
diff --git a/src/assets/image/gpsIc.png b/src/assets/image/gpsIc.png
new file mode 100644
index 0000000..be66fd6
Binary files /dev/null and b/src/assets/image/gpsIc.png differ
diff --git a/src/assets/image/gpsIcon.png b/src/assets/image/gpsIcon.png
new file mode 100644
index 0000000..0f384bf
Binary files /dev/null and b/src/assets/image/gpsIcon.png differ
diff --git a/src/assets/image/gpsOn.png b/src/assets/image/gpsOn.png
new file mode 100644
index 0000000..ff06e35
Binary files /dev/null and b/src/assets/image/gpsOn.png differ
diff --git a/src/assets/image/gps_off.png b/src/assets/image/gps_off.png
new file mode 100644
index 0000000..f00db68
Binary files /dev/null and b/src/assets/image/gps_off.png differ
diff --git a/src/assets/image/history.png b/src/assets/image/history.png
new file mode 100644
index 0000000..9fade8b
Binary files /dev/null and b/src/assets/image/history.png differ
diff --git a/src/assets/image/history_distance.png b/src/assets/image/history_distance.png
new file mode 100644
index 0000000..5f91455
Binary files /dev/null and b/src/assets/image/history_distance.png differ
diff --git a/src/assets/image/history_fuel.png b/src/assets/image/history_fuel.png
new file mode 100644
index 0000000..821ed16
Binary files /dev/null and b/src/assets/image/history_fuel.png differ
diff --git a/src/assets/image/history_parking.png b/src/assets/image/history_parking.png
new file mode 100644
index 0000000..dc5e042
Binary files /dev/null and b/src/assets/image/history_parking.png differ
diff --git a/src/assets/image/ic1.png b/src/assets/image/ic1.png
new file mode 100644
index 0000000..e6b374f
Binary files /dev/null and b/src/assets/image/ic1.png differ
diff --git a/src/assets/image/ic2.png b/src/assets/image/ic2.png
new file mode 100644
index 0000000..9923534
Binary files /dev/null and b/src/assets/image/ic2.png differ
diff --git a/src/assets/image/ic3.png b/src/assets/image/ic3.png
new file mode 100644
index 0000000..594480f
Binary files /dev/null and b/src/assets/image/ic3.png differ
diff --git a/src/assets/image/ic_play.png b/src/assets/image/ic_play.png
new file mode 100644
index 0000000..a84ffc0
Binary files /dev/null and b/src/assets/image/ic_play.png differ
diff --git a/src/assets/image/ico_dest_direccion.png b/src/assets/image/ico_dest_direccion.png
new file mode 100644
index 0000000..1b926b7
Binary files /dev/null and b/src/assets/image/ico_dest_direccion.png differ
diff --git a/src/assets/image/ico_direccion.png b/src/assets/image/ico_direccion.png
new file mode 100644
index 0000000..d561d15
Binary files /dev/null and b/src/assets/image/ico_direccion.png differ
diff --git a/src/assets/image/idle.png b/src/assets/image/idle.png
new file mode 100644
index 0000000..d80ead1
Binary files /dev/null and b/src/assets/image/idle.png differ
diff --git a/src/assets/image/idle3.jpg b/src/assets/image/idle3.jpg
new file mode 100644
index 0000000..105f5a2
Binary files /dev/null and b/src/assets/image/idle3.jpg differ
diff --git a/src/assets/image/idle_bike.png b/src/assets/image/idle_bike.png
new file mode 100644
index 0000000..82ec402
Binary files /dev/null and b/src/assets/image/idle_bike.png differ
diff --git a/src/assets/image/idle_bus.png b/src/assets/image/idle_bus.png
new file mode 100644
index 0000000..dbe879d
Binary files /dev/null and b/src/assets/image/idle_bus.png differ
diff --git a/src/assets/image/idle_car.png b/src/assets/image/idle_car.png
new file mode 100644
index 0000000..6af7557
Binary files /dev/null and b/src/assets/image/idle_car.png differ
diff --git a/src/assets/image/idle_truck.png b/src/assets/image/idle_truck.png
new file mode 100644
index 0000000..0173cb4
Binary files /dev/null and b/src/assets/image/idle_truck.png differ
diff --git a/src/assets/image/if.png b/src/assets/image/if.png
new file mode 100644
index 0000000..e86eb83
Binary files /dev/null and b/src/assets/image/if.png differ
diff --git a/src/assets/image/if_JD-21_2246853.png b/src/assets/image/if_JD-21_2246853.png
new file mode 100644
index 0000000..b044a81
Binary files /dev/null and b/src/assets/image/if_JD-21_2246853.png differ
diff --git a/src/assets/image/if_diamonds_2_14365.png b/src/assets/image/if_diamonds_2_14365.png
new file mode 100644
index 0000000..9fd4913
Binary files /dev/null and b/src/assets/image/if_diamonds_2_14365.png differ
diff --git a/src/assets/image/if_marker_1282961.png b/src/assets/image/if_marker_1282961.png
new file mode 100644
index 0000000..d6fd2a9
Binary files /dev/null and b/src/assets/image/if_marker_1282961.png differ
diff --git a/src/assets/image/ignition-idle.png b/src/assets/image/ignition-idle.png
new file mode 100644
index 0000000..f1ad3df
Binary files /dev/null and b/src/assets/image/ignition-idle.png differ
diff --git a/src/assets/image/ignition.png b/src/assets/image/ignition.png
new file mode 100644
index 0000000..689e381
Binary files /dev/null and b/src/assets/image/ignition.png differ
diff --git a/src/assets/image/image.png b/src/assets/image/image.png
new file mode 100644
index 0000000..53505c2
Binary files /dev/null and b/src/assets/image/image.png differ
diff --git a/src/assets/image/images3.png b/src/assets/image/images3.png
new file mode 100644
index 0000000..31d006d
Binary files /dev/null and b/src/assets/image/images3.png differ
diff --git a/src/assets/image/inactiveBike.png b/src/assets/image/inactiveBike.png
new file mode 100644
index 0000000..c514a92
Binary files /dev/null and b/src/assets/image/inactiveBike.png differ
diff --git a/src/assets/image/inside.png b/src/assets/image/inside.png
new file mode 100644
index 0000000..a3755a2
Binary files /dev/null and b/src/assets/image/inside.png differ
diff --git a/src/assets/image/iosLink.png b/src/assets/image/iosLink.png
new file mode 100644
index 0000000..a8723f2
Binary files /dev/null and b/src/assets/image/iosLink.png differ
diff --git a/src/assets/image/iot.jpg b/src/assets/image/iot.jpg
new file mode 100644
index 0000000..edd5d04
Binary files /dev/null and b/src/assets/image/iot.jpg differ
diff --git a/src/assets/image/iot1 (1).jpg b/src/assets/image/iot1 (1).jpg
new file mode 100644
index 0000000..f8f41c4
Binary files /dev/null and b/src/assets/image/iot1 (1).jpg differ
diff --git a/src/assets/image/iot11.jpg b/src/assets/image/iot11.jpg
new file mode 100644
index 0000000..8170134
Binary files /dev/null and b/src/assets/image/iot11.jpg differ
diff --git a/src/assets/image/iot12.jpg b/src/assets/image/iot12.jpg
new file mode 100644
index 0000000..7cb8a32
Binary files /dev/null and b/src/assets/image/iot12.jpg differ
diff --git a/src/assets/image/iot3.jpg b/src/assets/image/iot3.jpg
new file mode 100644
index 0000000..47923d3
Binary files /dev/null and b/src/assets/image/iot3.jpg differ
diff --git a/src/assets/image/iot4.png b/src/assets/image/iot4.png
new file mode 100644
index 0000000..dbdb76d
Binary files /dev/null and b/src/assets/image/iot4.png differ
diff --git a/src/assets/image/iot55.jpg b/src/assets/image/iot55.jpg
new file mode 100644
index 0000000..aa40aae
Binary files /dev/null and b/src/assets/image/iot55.jpg differ
diff --git a/src/assets/image/iphone.png b/src/assets/image/iphone.png
new file mode 100644
index 0000000..a3a2e1e
Binary files /dev/null and b/src/assets/image/iphone.png differ
diff --git a/src/assets/image/jcb_blue.png b/src/assets/image/jcb_blue.png
new file mode 100644
index 0000000..ef33bf5
Binary files /dev/null and b/src/assets/image/jcb_blue.png differ
diff --git a/src/assets/image/jcb_gray.png b/src/assets/image/jcb_gray.png
new file mode 100644
index 0000000..9ce42e5
Binary files /dev/null and b/src/assets/image/jcb_gray.png differ
diff --git a/src/assets/image/jcb_green.png b/src/assets/image/jcb_green.png
new file mode 100644
index 0000000..15110bf
Binary files /dev/null and b/src/assets/image/jcb_green.png differ
diff --git a/src/assets/image/jcb_red.png b/src/assets/image/jcb_red.png
new file mode 100644
index 0000000..a21859f
Binary files /dev/null and b/src/assets/image/jcb_red.png differ
diff --git a/src/assets/image/jcb_yellow.png b/src/assets/image/jcb_yellow.png
new file mode 100644
index 0000000..51d28f0
Binary files /dev/null and b/src/assets/image/jcb_yellow.png differ
diff --git a/src/assets/image/live.png b/src/assets/image/live.png
new file mode 100644
index 0000000..9676aa8
Binary files /dev/null and b/src/assets/image/live.png differ
diff --git a/src/assets/image/loaderGif.gif b/src/assets/image/loaderGif.gif
new file mode 100644
index 0000000..aa97cf0
Binary files /dev/null and b/src/assets/image/loaderGif.gif differ
diff --git a/src/assets/image/loaderImage.gif b/src/assets/image/loaderImage.gif
new file mode 100644
index 0000000..55d0453
Binary files /dev/null and b/src/assets/image/loaderImage.gif differ
diff --git a/src/assets/image/loginIcon.png b/src/assets/image/loginIcon.png
new file mode 100644
index 0000000..f89e501
Binary files /dev/null and b/src/assets/image/loginIcon.png differ
diff --git a/src/assets/image/loginLogo.png b/src/assets/image/loginLogo.png
new file mode 100644
index 0000000..6f68ccb
Binary files /dev/null and b/src/assets/image/loginLogo.png differ
diff --git a/src/assets/image/loginLogo1.jpg b/src/assets/image/loginLogo1.jpg
new file mode 100644
index 0000000..c09a938
Binary files /dev/null and b/src/assets/image/loginLogo1.jpg differ
diff --git a/src/assets/image/login_bg.jpg b/src/assets/image/login_bg.jpg
new file mode 100644
index 0000000..9151f4c
Binary files /dev/null and b/src/assets/image/login_bg.jpg differ
diff --git a/src/assets/image/loginbck.jpg b/src/assets/image/loginbck.jpg
new file mode 100644
index 0000000..c775d9a
Binary files /dev/null and b/src/assets/image/loginbck.jpg differ
diff --git a/src/assets/image/loginbck2.jpg b/src/assets/image/loginbck2.jpg
new file mode 100644
index 0000000..83fe945
Binary files /dev/null and b/src/assets/image/loginbck2.jpg differ
diff --git a/src/assets/image/logo.jpg b/src/assets/image/logo.jpg
new file mode 100644
index 0000000..7e4822c
Binary files /dev/null and b/src/assets/image/logo.jpg differ
diff --git a/src/assets/image/logo1.jpg b/src/assets/image/logo1.jpg
new file mode 100644
index 0000000..431c56a
Binary files /dev/null and b/src/assets/image/logo1.jpg differ
diff --git a/src/assets/image/m1.png b/src/assets/image/m1.png
new file mode 100644
index 0000000..329ff52
Binary files /dev/null and b/src/assets/image/m1.png differ
diff --git a/src/assets/image/main.png b/src/assets/image/main.png
new file mode 100644
index 0000000..a27cba1
Binary files /dev/null and b/src/assets/image/main.png differ
diff --git a/src/assets/image/max-stoppage.png b/src/assets/image/max-stoppage.png
new file mode 100644
index 0000000..7a82155
Binary files /dev/null and b/src/assets/image/max-stoppage.png differ
diff --git a/src/assets/image/mobile.gif b/src/assets/image/mobile.gif
new file mode 100644
index 0000000..6e59adb
Binary files /dev/null and b/src/assets/image/mobile.gif differ
diff --git a/src/assets/image/noIcon.png b/src/assets/image/noIcon.png
new file mode 100644
index 0000000..df02be9
Binary files /dev/null and b/src/assets/image/noIcon.png differ
diff --git a/src/assets/image/noImage.png b/src/assets/image/noImage.png
new file mode 100644
index 0000000..95000ba
Binary files /dev/null and b/src/assets/image/noImage.png differ
diff --git a/src/assets/image/noPower.png b/src/assets/image/noPower.png
new file mode 100644
index 0000000..2b8b2b6
Binary files /dev/null and b/src/assets/image/noPower.png differ
diff --git a/src/assets/image/no_data.png b/src/assets/image/no_data.png
new file mode 100644
index 0000000..e4522e2
Binary files /dev/null and b/src/assets/image/no_data.png differ
diff --git a/src/assets/image/no_gps.png b/src/assets/image/no_gps.png
new file mode 100644
index 0000000..7e8cb6a
Binary files /dev/null and b/src/assets/image/no_gps.png differ
diff --git a/src/assets/image/nofuel.png b/src/assets/image/nofuel.png
new file mode 100644
index 0000000..70e3716
Binary files /dev/null and b/src/assets/image/nofuel.png differ
diff --git a/src/assets/image/notify.png b/src/assets/image/notify.png
new file mode 100644
index 0000000..32562b0
Binary files /dev/null and b/src/assets/image/notify.png differ
diff --git a/src/assets/image/offline.png b/src/assets/image/offline.png
new file mode 100644
index 0000000..441bd7e
Binary files /dev/null and b/src/assets/image/offline.png differ
diff --git a/src/assets/image/one.jpg b/src/assets/image/one.jpg
new file mode 100644
index 0000000..36a1a41
Binary files /dev/null and b/src/assets/image/one.jpg differ
diff --git a/src/assets/image/oneqliklogo.png b/src/assets/image/oneqliklogo.png
new file mode 100644
index 0000000..431a00f
Binary files /dev/null and b/src/assets/image/oneqliklogo.png differ
diff --git a/src/assets/image/online.png b/src/assets/image/online.png
new file mode 100644
index 0000000..c7663cb
Binary files /dev/null and b/src/assets/image/online.png differ
diff --git a/src/assets/image/our_truck.png b/src/assets/image/our_truck.png
new file mode 100644
index 0000000..ab5d0ef
Binary files /dev/null and b/src/assets/image/our_truck.png differ
diff --git a/src/assets/image/outOfReach_bike.png b/src/assets/image/outOfReach_bike.png
new file mode 100644
index 0000000..6400ed8
Binary files /dev/null and b/src/assets/image/outOfReach_bike.png differ
diff --git a/src/assets/image/outOfReach_car.png b/src/assets/image/outOfReach_car.png
new file mode 100644
index 0000000..8ac7f7d
Binary files /dev/null and b/src/assets/image/outOfReach_car.png differ
diff --git a/src/assets/image/outOfReach_card.png b/src/assets/image/outOfReach_card.png
new file mode 100644
index 0000000..128ea2b
Binary files /dev/null and b/src/assets/image/outOfReach_card.png differ
diff --git a/src/assets/image/outside.png b/src/assets/image/outside.png
new file mode 100644
index 0000000..b3d9c5b
Binary files /dev/null and b/src/assets/image/outside.png differ
diff --git a/src/assets/image/overStopped.png b/src/assets/image/overStopped.png
new file mode 100644
index 0000000..cbe261f
Binary files /dev/null and b/src/assets/image/overStopped.png differ
diff --git a/src/assets/image/overspeed.png b/src/assets/image/overspeed.png
new file mode 100644
index 0000000..c36f48f
Binary files /dev/null and b/src/assets/image/overspeed.png differ
diff --git a/src/assets/image/parkingPoint.png b/src/assets/image/parkingPoint.png
new file mode 100644
index 0000000..a43796f
Binary files /dev/null and b/src/assets/image/parkingPoint.png differ
diff --git a/src/assets/image/parkingPoint1.png b/src/assets/image/parkingPoint1.png
new file mode 100644
index 0000000..00c33f6
Binary files /dev/null and b/src/assets/image/parkingPoint1.png differ
diff --git a/src/assets/image/pause-trip.png b/src/assets/image/pause-trip.png
new file mode 100644
index 0000000..1a9e83a
Binary files /dev/null and b/src/assets/image/pause-trip.png differ
diff --git a/src/assets/image/personaltracking.jpg b/src/assets/image/personaltracking.jpg
new file mode 100644
index 0000000..8dd8468
Binary files /dev/null and b/src/assets/image/personaltracking.jpg differ
diff --git a/src/assets/image/pin.png b/src/assets/image/pin.png
new file mode 100644
index 0000000..a61ce98
Binary files /dev/null and b/src/assets/image/pin.png differ
diff --git a/src/assets/image/platform.jpg b/src/assets/image/platform.jpg
new file mode 100644
index 0000000..77b9d48
Binary files /dev/null and b/src/assets/image/platform.jpg differ
diff --git a/src/assets/image/play-trip.png b/src/assets/image/play-trip.png
new file mode 100644
index 0000000..5392804
Binary files /dev/null and b/src/assets/image/play-trip.png differ
diff --git a/src/assets/image/play.htm b/src/assets/image/play.htm
new file mode 100644
index 0000000..23203f1
--- /dev/null
+++ b/src/assets/image/play.htm
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Add Play Button to Image Online | overlay play button on image</title>
+    <meta name="description" content="create image with video play button, how to put a play button over an image, video play button overlay png, overlay play button on youtube thumbnail, online tool to create thumbnail image with video play button, online tool to create image with video play button" />
+    <meta name="keywords" content="youtube thumbnail generator with play button, add play button to image online, play button on image, play button overlay,transparent play button overlay " />
+    <link rel="canonical" href="http://addplaybuttontoimage.way4info.net" />
+    <meta name="google-site-verification" content="I3yRvbXzqPsJsXWxxDghmM1X6kOnAkeU4BiD58RslRA" />
+    <meta name="msvalidate.01" content="2F2005596528CD78CD97CA697319255B" />
+    <link href="/Content/css?v=unfQGnoqUmsrqjjOC1rWJAP4-_brwNhh5KXWEtzB5Io1" rel="stylesheet"/>
+
+    <link href='https://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet'>
+    <script src="/Scripts/jquery-1.10.2.min.js"></script>
+</head>
+<body>
+    <div class="container body-content">
+        
+
+<div class="row">
+    <div class="col-md-12">
+        <div style="font-weight: bold; text-align: left;">
+<form action="/" class="" enctype="multipart/form-data" method="post"><input id="Image" name="Image" type="hidden" value="" />                <div class="panel panel-primary">
+                    <div class="panel-heading">
+                        <h3 class="header">Create Play Button to Image Online</h3>
+                    </div>
+                    <div style="margin:5px;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                    <!-- AddPlayButtonRes -->
+                    <ins class="adsbygoogle"
+                         style="display:block"
+                         data-ad-client="ca-pub-5094411364796263"
+                         data-ad-slot="6984995434"
+                         data-ad-format="auto"></ins>
+                    <script>
+                    (adsbygoogle = window.adsbygoogle || []).push({});
+                    </script></div>
+                    <div class="show">add play button to image, play button image, play button on image, add play button to image online, youtube thumbnail generator with play button, play button overlay, transparent play button overlay, overlay play button on image, video play button overlay, add play button to image, add play button to image online, add play button to image, marissa roberts, how to add play button to image, create image with video play button online, giikers, add play button to image online, create image with video play button, admin855.</div>
+                    <div class="panel-body">
+                        <p>
+                            <label class="radio-inline">
+                                <input checked="checked" class="form-check-input" id="FromPath" name="FromPath" type="radio" value="2" />
+                                <b>From Web</b>
+                            </label> &nbsp;&nbsp;&nbsp;
+                            <label class="radio-inline">
+                                <input class="form-check-input" id="FromPath" name="FromPath" type="radio" value="1" />
+                                <b> From Computer</b>
+                            </label>
+                        </p>
+                        <div class="form-group">
+                            <p id="idurl" style="display:block;"> Enter Image URL : <input class="form-control" id="ImgUrl" name="ImgUrl" placeholder="Image URL" style="max-width:78%;display: inline;" type="text" value="" /></p>
+                            <p id="idfile" style="display:none;">Please upload your Image : <input class="form-control" id="file" name="file" style="max-width:70%;display: inline;" type="file" value="" /></p>
+                        </div>
+                        <p>Select Play Button : </p>
+                        <p>
+                            <label class="form-check-inline">
+                                <input checked="checked" class="form-check-input" id="Icon" name="Icon" type="radio" value="1" />
+                                <img src="/Images/Icons/1.png" id="1" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="3" />
+                                <img src="/Images/Icons/3.png" id="3" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="5" />
+                                <img src="/Images/Icons/5.png" id="5" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="6" />
+                                <img src="/Images/Icons/6.png" id="6" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="7" />
+                                <img src="/Images/Icons/7.png" id="7" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="9" />
+                                <img src="/Images/Icons/9.png" id="9" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="10" />
+                                <img src="/Images/Icons/10.png" id="10" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="13" />
+                                <img src="/Images/Icons/13.png" id="13" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="14" />
+                                <img src="/Images/Icons/14.png" id="14" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="15" />
+                                <img src="/Images/Icons/15.png" id="15" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="16" />
+                                <img src="/Images/Icons/16.png" id="16" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="17" />
+                                <img src="/Images/Icons/17.png" id="17" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="18" />
+                                <img src="/Images/Icons/18.png" id="18" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="19" />
+                                <img src="/Images/Icons/19.png" id="19" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="20" />
+                                <img src="/Images/Icons/20.png" id="20" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="21" />
+                                <img src="/Images/Icons/21.png" id="21" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="22" />
+                                <img src="/Images/Icons/22.png" id="22" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="23" />
+                                <img src="/Images/Icons/23.png" id="23" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="25" />
+                                <img src="/Images/Icons/25.png" id="25" class="playicon" />
+                            </label>
+                            <label class="form-check-inline">
+                                <input class="form-check-input" id="Icon" name="Icon" type="radio" value="26" />
+                                <img src="/Images/Icons/26.png" id="26" class="playicon" />
+                            </label>
+                        </p>
+                        <p>
+                            Width (Optional):  <input class="form-control" id="W" name="W" placeholder="Widht" style="max-width:100px;" type="text" value="" />
+                            &nbsp;&nbsp;&nbsp; Height (Optional) : <input class="form-control" id="H" name="H" placeholder="Height" style="max-width:100px;" type="text" value="" />
+                            &nbsp;&nbsp;&nbsp;  <input type="submit" class="btn btn-primary" id="submit-button" value="Create Play Button Image" />
+                        </p>
+                        <hr />
+                        <h4>Result Image Preview with video play button </h4>
+                       
+                        <p><canvas id="myCanvas" name="myCanvas" width="480" height="360"></canvas></p>
+                        <p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+                        <!-- AddPlayButton LNK -->
+                        <ins class="adsbygoogle"
+                             style="display:block"
+                             data-ad-client="ca-pub-5094411364796263"
+                             data-ad-slot="4450331436"
+                             data-ad-format="link"></ins>
+                        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script></p>
+                        <p>
+                            <a href="#" id="downloader" class="btn btn-success" onclick="downloadimg()" download="image.png">Download Image !</a>
+                        </p>
+                       
+                        <hr />
+                        <div id="iHelp">
+                            <h2 class="text-primary head">How to use Add Play Button to Image Online</h2>
+                            <p>Step 1 : Get Your image url from online(Youtube, vimeo etc.. ).</p>
+                            <p>Step 2 : Copy the URL of the video Image (Example: http://img.youtube.com/vi/Vv6Q_SW71zM/hqdefault.jpg ).</p>
+                            <p>Step 3 : Paste that URL in the box given above and then click the "Create Play Button Image" button.</p>
+                            <p>Step 4 : Choose your Thumbnail image size and Download Image it. </p>
+                            <p>OR</p>
+                            <p>Step 1 : Upload your image from local computer</p>
+                            <p>Step 2 : Choose your Thumbnail image size and click the "Create Play Button Image" button and Download Image it.</p>
+                        </div>
+                    </div>
+                </div>
+</form>        </div>
+        <script src="/Scripts/googleApp.js"></script>
+        <script>
+            var icons = '1';
+            var imgurl = '/Images/hqdefault.jpg';
+            var imgWidth = '480';
+            var imgHeight = '360';
+            var canvas = document.getElementById('myCanvas');
+            var context = canvas.getContext('2d');
+            var imageObj = new Image(); var img = new Image();
+            var img = document.getElementById(icons);
+            imageObj.onload = function () {
+                context.drawImage(imageObj, 0, 0, imgWidth, imgHeight);
+                context.drawImage(img,
+                    (canvas.width - img.width * 2) / 2,
+                    (canvas.height - img.height * 2) / 2, img.width * 2, img.height * 2);
+            };
+            imageObj.src = imgurl;
+        </script>
+    </div>
+</div>
+        <hr />
+        <footer>
+            <p><b>&copy; 2018 - <a href="http://www.getyoutubevideothumbnail.com/" title="GetYouTubeVideoThumbnail.com" target="_blank">Get YouTube Video Thumbnail </a> |
+                 <a href="/" title="Add Play Button to YouTube Video Thumbnail Image" target="_blank">Add Play Button to YouTube Video Thumbnail Image</a> |
+                 <a href="http://www.getyoutubevideothumbnail.com/youtube-screenshot-online" title="Get YouTube Screenshots Online" target="_blank">Get YouTube Screenshots Online</a></b></p>
+        </footer>
+    </div>
+    <script src="/bundles/bootstrap?v=2Fz3B0iizV2NnnamQFrx-NbYJNTFeBJ2GM05SilbtQU1"></script>
+
+    
+</body>
+</html>
diff --git a/src/assets/image/play.png b/src/assets/image/play.png
new file mode 100644
index 0000000..4118b28
Binary files /dev/null and b/src/assets/image/play.png differ
diff --git a/src/assets/image/poi.png b/src/assets/image/poi.png
new file mode 100644
index 0000000..493e057
Binary files /dev/null and b/src/assets/image/poi.png differ
diff --git a/src/assets/image/power-off.png b/src/assets/image/power-off.png
new file mode 100644
index 0000000..5c04dfe
Binary files /dev/null and b/src/assets/image/power-off.png differ
diff --git a/src/assets/image/power-on (1).png b/src/assets/image/power-on (1).png
new file mode 100644
index 0000000..90f7a72
Binary files /dev/null and b/src/assets/image/power-on (1).png differ
diff --git a/src/assets/image/power-on.png b/src/assets/image/power-on.png
new file mode 100644
index 0000000..a0b7b51
Binary files /dev/null and b/src/assets/image/power-on.png differ
diff --git a/src/assets/image/power-on2.png b/src/assets/image/power-on2.png
new file mode 100644
index 0000000..c67b6db
Binary files /dev/null and b/src/assets/image/power-on2.png differ
diff --git a/src/assets/image/powerOFF.png b/src/assets/image/powerOFF.png
new file mode 100644
index 0000000..6b902c6
Binary files /dev/null and b/src/assets/image/powerOFF.png differ
diff --git a/src/assets/image/powerON.png b/src/assets/image/powerON.png
new file mode 100644
index 0000000..f998476
Binary files /dev/null and b/src/assets/image/powerON.png differ
diff --git a/src/assets/image/power_off.png b/src/assets/image/power_off.png
new file mode 100644
index 0000000..b7b1ce6
Binary files /dev/null and b/src/assets/image/power_off.png differ
diff --git a/src/assets/image/power_on.png b/src/assets/image/power_on.png
new file mode 100644
index 0000000..57bd4dc
Binary files /dev/null and b/src/assets/image/power_on.png differ
diff --git a/src/assets/image/products.gif b/src/assets/image/products.gif
new file mode 100644
index 0000000..632ab62
Binary files /dev/null and b/src/assets/image/products.gif differ
diff --git a/src/assets/image/pushN.png b/src/assets/image/pushN.png
new file mode 100644
index 0000000..6bb0d1e
Binary files /dev/null and b/src/assets/image/pushN.png differ
diff --git a/src/assets/image/reminderSetting.png b/src/assets/image/reminderSetting.png
new file mode 100644
index 0000000..57054aa
Binary files /dev/null and b/src/assets/image/reminderSetting.png differ
diff --git a/src/assets/image/report.png b/src/assets/image/report.png
new file mode 100644
index 0000000..622ff84
Binary files /dev/null and b/src/assets/image/report.png differ
diff --git a/src/assets/image/report2.png b/src/assets/image/report2.png
new file mode 100644
index 0000000..db1dc6a
Binary files /dev/null and b/src/assets/image/report2.png differ
diff --git a/src/assets/image/reset_odo.png b/src/assets/image/reset_odo.png
new file mode 100644
index 0000000..885db7f
Binary files /dev/null and b/src/assets/image/reset_odo.png differ
diff --git a/src/assets/image/reset_password.png b/src/assets/image/reset_password.png
new file mode 100644
index 0000000..c34aeb8
Binary files /dev/null and b/src/assets/image/reset_password.png differ
diff --git a/src/assets/image/rewind.png b/src/assets/image/rewind.png
new file mode 100644
index 0000000..7dc7471
Binary files /dev/null and b/src/assets/image/rewind.png differ
diff --git a/src/assets/image/road-sign.png b/src/assets/image/road-sign.png
new file mode 100644
index 0000000..ec5c12a
Binary files /dev/null and b/src/assets/image/road-sign.png differ
diff --git a/src/assets/image/road.html b/src/assets/image/road.html
new file mode 100644
index 0000000..d7e613b
--- /dev/null
+++ b/src/assets/image/road.html
@@ -0,0 +1,1544 @@
+<!doctype html>
+<!--[if IE 6 ]>    <html lang="en" class="en usd no-js ie6 lt-ie7 lt-ie8 lt-ie9 lt-ie10 lt-ie11"> <![endif]-->
+<!--[if IE 7 ]>    <html lang="en" class="en usd no-js ie7 lt-ie8 lt-ie9 lt-ie10 lt-ie11"> <![endif]-->
+<!--[if IE 8 ]>    <html lang="en" class="en usd no-js ie8 lt-ie9 lt-ie10 lt-ie11"> <![endif]-->
+<!--[if IE 9 ]>    <html lang="en" class="en usd no-js ie9 lt-ie10 lt-ie11"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="en usd  no-js "> <!--<![endif]-->
+<head>
+        <title>Road Highway Seamless Texture In Motion  Looping, Animation, Loop Stock Footage Video 15953695 | Shutterstock</title>
+
+        <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={xpid:"XQAAU1VRGwoIVVVbBQQ="};window.NREUM||(NREUM={}),__nr_require=function(t,n,e){function r(e){if(!n[e]){var o=n[e]={exports:{}};t[e][0].call(o.exports,function(n){var o=t[e][1][n];return r(o||n)},o,o.exports)}return n[e].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<e.length;o++)r(e[o]);return r}({1:[function(t,n,e){function r(t){try{s.console&&console.log(t)}catch(n){}}var o,i=t("ee"),a=t(15),s={};try{o=localStorage.getItem("__nr_flags").split(","),console&&"function"==typeof console.log&&(s.console=!0,o.indexOf("dev")!==-1&&(s.dev=!0),o.indexOf("nr_dev")!==-1&&(s.nrDev=!0))}catch(c){}s.nrDev&&i.on("internal-error",function(t){r(t.stack)}),s.dev&&i.on("fn-err",function(t,n,e){r(e.stack)}),s.dev&&(r("NR AGENT IN DEVELOPMENT MODE"),r("flags: "+a(s,function(t,n){return t}).join(", ")))},{}],2:[function(t,n,e){function r(t,n,e,r,s){try{p?p-=1:o(s||new UncaughtException(t,n,e),!0)}catch(f){try{i("ierr",[f,c.now(),!0])}catch(d){}}return"function"==typeof u&&u.apply(this,a(arguments))}function UncaughtException(t,n,e){this.message=t||"Uncaught error with no additional information",this.sourceURL=n,this.line=e}function o(t,n){var e=n?null:c.now();i("err",[t,e])}var i=t("handle"),a=t(16),s=t("ee"),c=t("loader"),f=t("gos"),u=window.onerror,d=!1,l="nr@seenError",p=0;c.features.err=!0,t(1),window.onerror=r;try{throw new Error}catch(h){"stack"in h&&(t(8),t(7),"addEventListener"in window&&t(5),c.xhrWrappable&&t(9),d=!0)}s.on("fn-start",function(t,n,e){d&&(p+=1)}),s.on("fn-err",function(t,n,e){d&&!e[l]&&(f(e,l,function(){return!0}),this.thrown=!0,o(e))}),s.on("fn-end",function(){d&&!this.thrown&&p>0&&(p-=1)}),s.on("internal-error",function(t){i("ierr",[t,c.now(),!0])})},{}],3:[function(t,n,e){t("loader").features.ins=!0},{}],4:[function(t,n,e){function r(t){}if(window.performance&&window.performance.timing&&window.performance.getEntriesByType){var o=t("ee"),i=t("handle"),a=t(8),s=t(7),c="learResourceTimings",f="addEventListener",u="resourcetimingbufferfull",d="bstResource",l="resource",p="-start",h="-end",m="fn"+p,w="fn"+h,v="bstTimer",y="pushState",g=t("loader");g.features.stn=!0,t(6);var b=NREUM.o.EV;o.on(m,function(t,n){var e=t[0];e instanceof b&&(this.bstStart=g.now())}),o.on(w,function(t,n){var e=t[0];e instanceof b&&i("bst",[e,n,this.bstStart,g.now()])}),a.on(m,function(t,n,e){this.bstStart=g.now(),this.bstType=e}),a.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),this.bstType])}),s.on(m,function(){this.bstStart=g.now()}),s.on(w,function(t,n){i(v,[n,this.bstStart,g.now(),"requestAnimationFrame"])}),o.on(y+p,function(t){this.time=g.now(),this.startPath=location.pathname+location.hash}),o.on(y+h,function(t){i("bstHist",[location.pathname+location.hash,this.startPath,this.time])}),f in window.performance&&(window.performance["c"+c]?window.performance[f](u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["c"+c]()},!1):window.performance[f]("webkit"+u,function(t){i(d,[window.performance.getEntriesByType(l)]),window.performance["webkitC"+c]()},!1)),document[f]("scroll",r,{passive:!0}),document[f]("keypress",r,!1),document[f]("click",r,!1)}},{}],5:[function(t,n,e){function r(t){for(var n=t;n&&!n.hasOwnProperty(u);)n=Object.getPrototypeOf(n);n&&o(n)}function o(t){s.inPlace(t,[u,d],"-",i)}function i(t,n){return t[1]}var a=t("ee").get("events"),s=t(18)(a,!0),c=t("gos"),f=XMLHttpRequest,u="addEventListener",d="removeEventListener";n.exports=a,"getPrototypeOf"in Object?(r(document),r(window),r(f.prototype)):f.prototype.hasOwnProperty(u)&&(o(window),o(f.prototype)),a.on(u+"-start",function(t,n){var e=t[1],r=c(e,"nr@wrapped",function(){function t(){if("function"==typeof e.handleEvent)return e.handleEvent.apply(e,arguments)}var n={object:t,"function":e}[typeof e];return n?s(n,"fn-",null,n.name||"anonymous"):e});this.wrapped=t[1]=r}),a.on(d+"-start",function(t){t[1]=this.wrapped||t[1]})},{}],6:[function(t,n,e){var r=t("ee").get("history"),o=t(18)(r);n.exports=r,o.inPlace(window.history,["pushState","replaceState"],"-")},{}],7:[function(t,n,e){var r=t("ee").get("raf"),o=t(18)(r),i="equestAnimationFrame";n.exports=r,o.inPlace(window,["r"+i,"mozR"+i,"webkitR"+i,"msR"+i],"raf-"),r.on("raf-start",function(t){t[0]=o(t[0],"fn-")})},{}],8:[function(t,n,e){function r(t,n,e){t[0]=a(t[0],"fn-",null,e)}function o(t,n,e){this.method=e,this.timerDuration=isNaN(t[1])?0:+t[1],t[0]=a(t[0],"fn-",this,e)}var i=t("ee").get("timer"),a=t(18)(i),s="setTimeout",c="setInterval",f="clearTimeout",u="-start",d="-";n.exports=i,a.inPlace(window,[s,"setImmediate"],s+d),a.inPlace(window,[c],c+d),a.inPlace(window,[f,"clearImmediate"],f+d),i.on(c+u,r),i.on(s+u,o)},{}],9:[function(t,n,e){function r(t,n){d.inPlace(n,["onreadystatechange"],"fn-",s)}function o(){var t=this,n=u.context(t);t.readyState>3&&!n.resolved&&(n.resolved=!0,u.emit("xhr-resolved",[],t)),d.inPlace(t,y,"fn-",s)}function i(t){g.push(t),h&&(x?x.then(a):w?w(a):(E=-E,O.data=E))}function a(){for(var t=0;t<g.length;t++)r([],g[t]);g.length&&(g=[])}function s(t,n){return n}function c(t,n){for(var e in t)n[e]=t[e];return n}t(5);var f=t("ee"),u=f.get("xhr"),d=t(18)(u),l=NREUM.o,p=l.XHR,h=l.MO,m=l.PR,w=l.SI,v="readystatechange",y=["onload","onerror","onabort","onloadstart","onloadend","onprogress","ontimeout"],g=[];n.exports=u;var b=window.XMLHttpRequest=function(t){var n=new p(t);try{u.emit("new-xhr",[n],n),n.addEventListener(v,o,!1)}catch(e){try{u.emit("internal-error",[e])}catch(r){}}return n};if(c(p,b),b.prototype=p.prototype,d.inPlace(b.prototype,["open","send"],"-xhr-",s),u.on("send-xhr-start",function(t,n){r(t,n),i(n)}),u.on("open-xhr-start",r),h){var x=m&&m.resolve();if(!w&&!m){var E=1,O=document.createTextNode(E);new h(a).observe(O,{characterData:!0})}}else f.on("fn-end",function(t){t[0]&&t[0].type===v||a()})},{}],10:[function(t,n,e){function r(t){var n=this.params,e=this.metrics;if(!this.ended){this.ended=!0;for(var r=0;r<d;r++)t.removeEventListener(u[r],this.listener,!1);if(!n.aborted){if(e.duration=a.now()-this.startTime,4===t.readyState){n.status=t.status;var i=o(t,this.lastSize);if(i&&(e.rxSize=i),this.sameOrigin){var c=t.getResponseHeader("X-NewRelic-App-Data");c&&(n.cat=c.split(", ").pop())}}else n.status=0;e.cbTime=this.cbTime,f.emit("xhr-done",[t],t),s("xhr",[n,e,this.startTime])}}}function o(t,n){var e=t.responseType;if("json"===e&&null!==n)return n;var r="arraybuffer"===e||"blob"===e||"json"===e?t.response:t.responseText;return h(r)}function i(t,n){var e=c(n),r=t.params;r.host=e.hostname+":"+e.port,r.pathname=e.pathname,t.sameOrigin=e.sameOrigin}var a=t("loader");if(a.xhrWrappable){var s=t("handle"),c=t(11),f=t("ee"),u=["load","error","abort","timeout"],d=u.length,l=t("id"),p=t(14),h=t(13),m=window.XMLHttpRequest;a.features.xhr=!0,t(9),f.on("new-xhr",function(t){var n=this;n.totalCbs=0,n.called=0,n.cbTime=0,n.end=r,n.ended=!1,n.xhrGuids={},n.lastSize=null,p&&(p>34||p<10)||window.opera||t.addEventListener("progress",function(t){n.lastSize=t.loaded},!1)}),f.on("open-xhr-start",function(t){this.params={method:t[0]},i(this,t[1]),this.metrics={}}),f.on("open-xhr-end",function(t,n){"loader_config"in NREUM&&"xpid"in NREUM.loader_config&&this.sameOrigin&&n.setRequestHeader("X-NewRelic-ID",NREUM.loader_config.xpid)}),f.on("send-xhr-start",function(t,n){var e=this.metrics,r=t[0],o=this;if(e&&r){var i=h(r);i&&(e.txSize=i)}this.startTime=a.now(),this.listener=function(t){try{"abort"===t.type&&(o.params.aborted=!0),("load"!==t.type||o.called===o.totalCbs&&(o.onloadCalled||"function"!=typeof n.onload))&&o.end(n)}catch(e){try{f.emit("internal-error",[e])}catch(r){}}};for(var s=0;s<d;s++)n.addEventListener(u[s],this.listener,!1)}),f.on("xhr-cb-time",function(t,n,e){this.cbTime+=t,n?this.onloadCalled=!0:this.called+=1,this.called!==this.totalCbs||!this.onloadCalled&&"function"==typeof e.onload||this.end(e)}),f.on("xhr-load-added",function(t,n){var e=""+l(t)+!!n;this.xhrGuids&&!this.xhrGuids[e]&&(this.xhrGuids[e]=!0,this.totalCbs+=1)}),f.on("xhr-load-removed",function(t,n){var e=""+l(t)+!!n;this.xhrGuids&&this.xhrGuids[e]&&(delete this.xhrGuids[e],this.totalCbs-=1)}),f.on("addEventListener-end",function(t,n){n instanceof m&&"load"===t[0]&&f.emit("xhr-load-added",[t[1],t[2]],n)}),f.on("removeEventListener-end",function(t,n){n instanceof m&&"load"===t[0]&&f.emit("xhr-load-removed",[t[1],t[2]],n)}),f.on("fn-start",function(t,n,e){n instanceof m&&("onload"===e&&(this.onload=!0),("load"===(t[0]&&t[0].type)||this.onload)&&(this.xhrCbStart=a.now()))}),f.on("fn-end",function(t,n){this.xhrCbStart&&f.emit("xhr-cb-time",[a.now()-this.xhrCbStart,this.onload,n],n)})}},{}],11:[function(t,n,e){n.exports=function(t){var n=document.createElement("a"),e=window.location,r={};n.href=t,r.port=n.port;var o=n.href.split("://");!r.port&&o[1]&&(r.port=o[1].split("/")[0].split("@").pop().split(":")[1]),r.port&&"0"!==r.port||(r.port="https"===o[0]?"443":"80"),r.hostname=n.hostname||e.hostname,r.pathname=n.pathname,r.protocol=o[0],"/"!==r.pathname.charAt(0)&&(r.pathname="/"+r.pathname);var i=!n.protocol||":"===n.protocol||n.protocol===e.protocol,a=n.hostname===document.domain&&n.port===e.port;return r.sameOrigin=i&&(!n.hostname||a),r}},{}],12:[function(t,n,e){function r(){}function o(t,n,e){return function(){return i(t,[f.now()].concat(s(arguments)),n?null:this,e),n?void 0:this}}var i=t("handle"),a=t(15),s=t(16),c=t("ee").get("tracer"),f=t("loader"),u=NREUM;"undefined"==typeof window.newrelic&&(newrelic=u);var d=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],l="api-",p=l+"ixn-";a(d,function(t,n){u[n]=o(l+n,!0,"api")}),u.addPageAction=o(l+"addPageAction",!0),u.setCurrentRouteName=o(l+"routeName",!0),n.exports=newrelic,u.interaction=function(){return(new r).get()};var h=r.prototype={createTracer:function(t,n){var e={},r=this,o="function"==typeof n;return i(p+"tracer",[f.now(),t,e],r),function(){if(c.emit((o?"":"no-")+"fn-start",[f.now(),r,o],e),o)try{return n.apply(this,arguments)}catch(t){throw c.emit("fn-err",[arguments,this,t],e),t}finally{c.emit("fn-end",[f.now()],e)}}}};a("setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(t,n){h[n]=o(p+n)}),newrelic.noticeError=function(t){"string"==typeof t&&(t=new Error(t)),i("err",[t,f.now()])}},{}],13:[function(t,n,e){n.exports=function(t){if("string"==typeof t&&t.length)return t.length;if("object"==typeof t){if("undefined"!=typeof ArrayBuffer&&t instanceof ArrayBuffer&&t.byteLength)return t.byteLength;if("undefined"!=typeof Blob&&t instanceof Blob&&t.size)return t.size;if(!("undefined"!=typeof FormData&&t instanceof FormData))try{return JSON.stringify(t).length}catch(n){return}}}},{}],14:[function(t,n,e){var r=0,o=navigator.userAgent.match(/Firefox[\/\s](\d+\.\d+)/);o&&(r=+o[1]),n.exports=r},{}],15:[function(t,n,e){function r(t,n){var e=[],r="",i=0;for(r in t)o.call(t,r)&&(e[i]=n(r,t[r]),i+=1);return e}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],16:[function(t,n,e){function r(t,n,e){n||(n=0),"undefined"==typeof e&&(e=t?t.length:0);for(var r=-1,o=e-n||0,i=Array(o<0?0:o);++r<o;)i[r]=t[n+r];return i}n.exports=r},{}],17:[function(t,n,e){n.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],18:[function(t,n,e){function r(t){return!(t&&t instanceof Function&&t.apply&&!t[a])}var o=t("ee"),i=t(16),a="nr@original",s=Object.prototype.hasOwnProperty,c=!1;n.exports=function(t,n){function e(t,n,e,o){function nrWrapper(){var r,a,s,c;try{a=this,r=i(arguments),s="function"==typeof e?e(r,a):e||{}}catch(f){l([f,"",[r,a,o],s])}u(n+"start",[r,a,o],s);try{return c=t.apply(a,r)}catch(d){throw u(n+"err",[r,a,d],s),d}finally{u(n+"end",[r,a,c],s)}}return r(t)?t:(n||(n=""),nrWrapper[a]=t,d(t,nrWrapper),nrWrapper)}function f(t,n,o,i){o||(o="");var a,s,c,f="-"===o.charAt(0);for(c=0;c<n.length;c++)s=n[c],a=t[s],r(a)||(t[s]=e(a,f?s+o:o,i,s))}function u(e,r,o){if(!c||n){var i=c;c=!0;try{t.emit(e,r,o,n)}catch(a){l([a,e,r,o])}c=i}}function d(t,n){if(Object.defineProperty&&Object.keys)try{var e=Object.keys(t);return e.forEach(function(e){Object.defineProperty(n,e,{get:function(){return t[e]},set:function(n){return t[e]=n,n}})}),n}catch(r){l([r])}for(var o in t)s.call(t,o)&&(n[o]=t[o]);return n}function l(n){try{t.emit("internal-error",n)}catch(e){}}return t||(t=o),e.inPlace=f,e.flag=a,e}},{}],ee:[function(t,n,e){function r(){}function o(t){function n(t){return t&&t instanceof r?t:t?c(t,s,i):i()}function e(e,r,o,i){if(!l.aborted||i){t&&t(e,r,o);for(var a=n(o),s=h(e),c=s.length,f=0;f<c;f++)s[f].apply(a,r);var d=u[y[e]];return d&&d.push([g,e,r,a]),a}}function p(t,n){v[t]=h(t).concat(n)}function h(t){return v[t]||[]}function m(t){return d[t]=d[t]||o(e)}function w(t,n){f(t,function(t,e){n=n||"feature",y[e]=n,n in u||(u[n]=[])})}var v={},y={},g={on:p,emit:e,get:m,listeners:h,context:n,buffer:w,abort:a,aborted:!1};return g}function i(){return new r}function a(){(u.api||u.feature)&&(l.aborted=!0,u=l.backlog={})}var s="nr@context",c=t("gos"),f=t(15),u={},d={},l=n.exports=o();l.backlog=u},{}],gos:[function(t,n,e){function r(t,n,e){if(o.call(t,n))return t[n];var r=e();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(t,n,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return t[n]=r,r}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],handle:[function(t,n,e){function r(t,n,e,r){o.buffer([t],r),o.emit(t,n,e)}var o=t("ee").get("handle");n.exports=r,r.ee=o},{}],id:[function(t,n,e){function r(t){var n=typeof t;return!t||"object"!==n&&"function"!==n?-1:t===window?0:a(t,i,function(){return o++})}var o=1,i="nr@id",a=t("gos");n.exports=r},{}],loader:[function(t,n,e){function r(){if(!x++){var t=b.info=NREUM.info,n=l.getElementsByTagName("script")[0];if(setTimeout(u.abort,3e4),!(t&&t.licenseKey&&t.applicationID&&n))return u.abort();f(y,function(n,e){t[n]||(t[n]=e)}),c("mark",["onload",a()+b.offset],null,"api");var e=l.createElement("script");e.src="https://"+t.agent,n.parentNode.insertBefore(e,n)}}function o(){"complete"===l.readyState&&i()}function i(){c("mark",["domContent",a()+b.offset],null,"api")}function a(){return E.exists&&performance.now?Math.round(performance.now()):(s=Math.max((new Date).getTime(),s))-b.offset}var s=(new Date).getTime(),c=t("handle"),f=t(15),u=t("ee"),d=window,l=d.document,p="addEventListener",h="attachEvent",m=d.XMLHttpRequest,w=m&&m.prototype;NREUM.o={ST:setTimeout,SI:d.setImmediate,CT:clearTimeout,XHR:m,REQ:d.Request,EV:d.Event,PR:d.Promise,MO:d.MutationObserver};var v=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1071.min.js"},g=m&&w&&w[p]&&!/CriOS/.test(navigator.userAgent),b=n.exports={offset:s,now:a,origin:v,features:{},xhrWrappable:g};t(12),l[p]?(l[p]("DOMContentLoaded",i,!1),d[p]("load",r,!1)):(l[h]("onreadystatechange",o),d[h]("onload",r)),c("mark",["firstbyte",s],null,"api");var x=0,E=t(17)},{}]},{},["loader",2,10,4,3]);</script>
+    <meta name="description" content="Stock Footage of road highway seamless texture in motion  looping, animation, loop">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <meta property="og:image" content="//ak5.picdn.net/shutterstock/videos/15953695/thumb/1.jpg" />
+
+        <link href="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/css/base.min.css?v=ed3381b840d4be6fdb4a05db54cdf05a" rel="stylesheet" />
+
+    <link href="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/css/swig-header.min.css?v=ed3381b840d4be6fdb4a05db54cdf05a" rel="stylesheet" />
+
+            <link href="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/css/base-responsive.min.css?v=ed3381b840d4be6fdb4a05db54cdf05a" rel="stylesheet" />
+
+    
+	    <link href="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/css/mediaplayer.min.css?v=ed3381b840d4be6fdb4a05db54cdf05a" rel="stylesheet" />
+
+    <link href="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/css/search.min.css?v=ed3381b840d4be6fdb4a05db54cdf05a" rel="stylesheet" />
+
+
+    <link href="/video/favicon.ico" rel="shortcut icon">
+
+				<link rel="alternate" hreflang="cs" href="https://www.shutterstock.com/cs/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="da" href="https://www.shutterstock.com/da/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="de" href="https://www.shutterstock.com/de/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="en" href="https://www.shutterstock.com/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="es" href="https://www.shutterstock.com/es/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="fr" href="https://www.shutterstock.com/fr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="it" href="https://www.shutterstock.com/it/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="hu" href="https://www.shutterstock.com/hu/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="nl" href="https://www.shutterstock.com/nl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="nb" href="https://www.shutterstock.com/nb/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="pl" href="https://www.shutterstock.com/pl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="pt" href="https://www.shutterstock.com/pt/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="fi" href="https://www.shutterstock.com/fi/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="sv" href="https://www.shutterstock.com/sv/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="tr" href="https://www.shutterstock.com/tr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="ru" href="https://www.shutterstock.com/ru/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="th" href="https://www.shutterstock.com/th/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="ko" href="https://www.shutterstock.com/ko/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="ja" href="https://www.shutterstock.com/ja/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="zh" href="https://www.shutterstock.com/zh/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+			<link rel="alternate" hreflang="x-default" href="https://www.shutterstock.com/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html" />
+	
+			<link rel="canonical" href="https://www.shutterstock.com/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">
+	
+        <script src="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/js/base.top.min.js?v=ed3381b840d4be6fdb4a05db54cdf05a"></script>
+
+
+    <script>
+    var Ss = {"track":{"data":{"accountId":24872,"email":null,"isSubscribed":"no","hasClipbox":"no"}},"siteMode":"prod","debug":false,"accountsUrl":"https:\/\/accounts.shutterstock.com\/"};
+    Ss.isDragging = false;
+    Ss.isSecure = (window.location.protocol == 'https:');
+    Ss.isMobile = !!0;
+    Ss.isLoggedIn = !!0;
+</script>
+
+    <script src="//cdn.optimizely.com/js/5859622725.js"></script>
+
+    <script type="text/javascript">
+    setTimeout(function(){var a=document.createElement("script");
+    var b=document.getElementsByTagName("script")[0];
+    a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0029/5162.js?"+Math.floor(new Date().getTime()/3600000);
+    a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
+  </script>
+
+</head>
+<body>
+                <!-- Google Tag Manager -->
+<noscript>
+    <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PFWDHP&gtm_auth=EXnZ_4Y_ar1sIB36tJyG-g&gtm_preview=env-31&gtm_cookies_win=x"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe>
+</noscript>
+<script>
+    window.dataLayer = [{
+        'userid': "",
+        'globalUserId': "",
+        'sessionId': "f53f9fc5ebb3bd2d579db02236df9ae9"
+    }];
+    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            '//www.googletagmanager.com/gtm.js?id='+i+dl+'&gtm_auth=EXnZ_4Y_ar1sIB36tJyG-g&gtm_preview=env-31&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-PFWDHP');
+</script>
+<!-- End Google Tag Manager -->    
+    
+				
+	<div id="container">
+		            
+
+
+
+<div id="shutterstock-header">
+<div class="navbar navbar-shutterstock clearfix">
+	<div class="navbar-inner-left pull-left container-fluid">
+		<ul id="site-tabs" class="nav pull-left">
+    <li class="content-type-drop">
+        <a href="//www.shutterstock.com/" class="dropdown-toggle" data-toggle="dropdown-hover">IMAGES<i class="icon-caret-down" aria-hidden="true"></i></a>
+        <ul class="dropdown-menu unstyled">
+            <li><a href="//www.shutterstock.com/photos" id="site-tabs-photos">Photos</a></li>
+            <li><a href="//www.shutterstock.com/vectors" id="site-tabs-vectors">Vectors</a></li>
+        </ul>
+    </li>
+    <li class="active">
+        <a href="//www.shutterstock.com/video">FOOTAGE</a>
+    </li>
+    <li>
+        <a href="//www.shutterstock.com/music">MUSIC</a>
+    </li>
+    <li class="content-type-drop">
+        <a href="//www.shutterstock.com/editorial" class="dropdown-toggle" data-toggle="dropdown-hover">EDITORIAL<i class="icon-caret-down" aria-hidden="true"></i></a>
+        <ul class="dropdown-menu unstyled">
+            <li><a href="//www.shutterstock.com/editorial/entertainment" id="site-tabs-editorial-entertainment">Entertainment</a></li>
+            <li><a href="//www.shutterstock.com/editorial/news" id="site-tabs-editorial-news">News</a></li>
+            <li><a href="//www.shutterstock.com/editorial/sports" id="site-tabs-editorial-sports">Sports</a></li>
+            <li><a href="//www.shutterstock.com/editorial/royalty" id="site-tabs-editorial-royalty">Royalty</a></li>
+        </ul>
+    </li>
+            <li>
+            <a href="//www.shutterstock.com/blog/">BLOG</a>
+        </li>
+        <li class="content-type-drop">
+        <a class="dropdown-toggle" data-toggle="dropdown-hover">TOOLS<i class="icon-caret-down" aria-hidden="true"></i></a>
+        <ul class="dropdown-menu unstyled">
+            <li><a href="//www.shutterstock.com/editor/image" id="site-tabs-editor">Editor</a></li>
+        </ul>
+    </li>
+</ul>
+
+					<div class="navbar-text pull-left customer-phone">
+									<i class="icon-phone" aria-hidden="true"></i>1-646-419-4452
+							</div>
+							<div class="livechat-header-item pull-left secondary">
+					<button class="lc-online btn btn-link" style="display: none;"><i class="icon-data-chat" aria-hidden="true"></i> Live Chat</button>
+				</div>
+					
+					<div class="navbar-text pull-left dropdown language-dropdown secondary">
+				<a href="#" id="language-toggle" class="dropdown-toggle" data-toggle="dropdown">
+					<i class="icon-globe-alt" aria-hidden="true"></i> English <i class="icon-caret-down" aria-hidden="true"></i>
+				</a>
+				<div class="dropdown-menu" role="menu">
+					<ul data-use-href="true">
+													<li>
+								<a id="langmenu_cs"
+									 href="/cs/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Čeština</a>
+							</li>
+													<li>
+								<a id="langmenu_da"
+									 href="/da/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Dansk</a>
+							</li>
+													<li>
+								<a id="langmenu_de"
+									 href="/de/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Deutsch</a>
+							</li>
+													<li>
+								<a id="langmenu_en"
+									 href="/en/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																		 rel="nofollow"								>English</a>
+							</li>
+													<li>
+								<a id="langmenu_es"
+									 href="/es/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Español</a>
+							</li>
+													<li>
+								<a id="langmenu_fr"
+									 href="/fr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Français</a>
+							</li>
+													<li>
+								<a id="langmenu_it"
+									 href="/it/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Italiano</a>
+							</li>
+													<li>
+								<a id="langmenu_hu"
+									 href="/hu/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Magyar</a>
+							</li>
+													<li>
+								<a id="langmenu_nl"
+									 href="/nl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Nederlands</a>
+							</li>
+													<li>
+								<a id="langmenu_nb"
+									 href="/nb/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Norsk</a>
+							</li>
+													<li>
+								<a id="langmenu_pl"
+									 href="/pl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Polski</a>
+							</li>
+													<li>
+								<a id="langmenu_pt"
+									 href="/pt/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Português</a>
+							</li>
+													<li>
+								<a id="langmenu_fi"
+									 href="/fi/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Suomi</a>
+							</li>
+													<li>
+								<a id="langmenu_sv"
+									 href="/sv/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Svenska</a>
+							</li>
+													<li>
+								<a id="langmenu_tr"
+									 href="/tr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Türkçe</a>
+							</li>
+													<li>
+								<a id="langmenu_ru"
+									 href="/ru/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>Русский</a>
+							</li>
+													<li>
+								<a id="langmenu_th"
+									 href="/th/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>ไทย</a>
+							</li>
+													<li>
+								<a id="langmenu_ko"
+									 href="/ko/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>한국어</a>
+							</li>
+													<li>
+								<a id="langmenu_ja"
+									 href="/ja/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>日本語</a>
+							</li>
+													<li>
+								<a id="langmenu_zh"
+									 href="/zh/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html"																										>简体中文</a>
+							</li>
+											</ul>
+				</div>
+			</div>
+			</div>
+
+	<div class="pull-right container-fluid nav-inner-border nav-horiz navbar-inner-right">
+							
+							
+		
+		    <div class="nav-link pull-left">
+        <a class="secondary" href="/video/subscribe/">Plans and Pricing <i class="icon-circle-arrow-right" aria-hidden="true"></i></a>
+    </div>
+
+									<div id="inline-login" class="dropdown inline-login nav-link pull-left">
+					<a href="https://accounts.shutterstock.com/login?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view" class="popover-toggle secondary animate-in" rel="nofollow" data-toggle="popover" data-html="true" data-placement="bottomRight" data-trigger="click" data-focus="">Sign In</a>
+
+					<script type="text/template" id="swig-login-template">
+						<div class="popover popover-login">
+							<div class="popover-content"></div>
+							<footer>
+								<div id="sign-up-link" class="sign-up">
+									<div class="bold">Not Registered?</div>
+									<a href="https://accounts.shutterstock.com/users/new?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view&amp;hl=en" rel="nofollow">Create a Free Browse Account</a>
+								</div>
+							</footer>
+						</div>
+					</script>
+
+					<script type="text/template" id="swig-login-content">
+						<form id="inline-login-form" method="post" action="https://accounts.shutterstock.com/login">
+							<input type="hidden" name="next" value="https://accounts.shutterstock.com/oauth/authorize?response_type=code&amp;client_id=footage&amp;redirect_uri=https%3A%2F%2Fwww.shutterstock.com%2Fvideo%2Foauth-callback%3Flanding_page%3D%252Fvideo%252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%26realm%3Dcustomer&amp;state=0cc094f9c8102c6376653759aa44502d&amp;site=footage&amp;hl=en&amp;scope=user.view+user.email+licenses.create+purchases.view">
+							<input type="hidden" name="_csrf" value="7dc602dd-2fe7-49db-889f-98379dd2cfa5">
+							
+							<div class="control-group">
+								<label class="control-label visuallyhidden" for="user">Username or Email</label>
+								<input id="user" name="user" type="text" placeholder="Username or Email">
+							</div>
+
+							<div class="control-group">
+								<label class="control-label visuallyhidden" for="pass">Password</label>
+								<input id="pass" name="pass" type="password" placeholder="Password">
+							</div>
+
+							<div class="control-group send">
+								<input class="btn btn-small btn-primary" type="submit" name="submit" value="Sign In">
+								<a id="inline-forgot" href="https://accounts.shutterstock.com/credentials/forgot?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view&amp;hl=en" rel="nofollow" class="secondary">Forgot your password?</a>
+							</div>
+						</form>
+					</script>
+				</div>
+					
+									<div class="nav-link pull-left">
+					<a class="cart-link secondary" href="/video/cart/" rel="nofollow">
+						<i class="icon-shopping-cart" aria-hidden="true"></i>
+						<span class="count">0</span>
+					</a>
+				</div>
+						</div>
+</div>
+
+<div class="accordion-group">
+	<div class="navbar navbar-shutterstock-responsive">
+		<a class="header-logo" href="//www.shutterstock.com/video"></a>
+		<button type="button" class="btn btn-navbar btn-hamburger"
+			data-toggle="collapse"
+			data-target="#mobile-nav"
+			data-parent="#shutterstock-header">
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+			<span class="icon-bar"></span>
+		</button>
+		<span class="delimiter btn-navbar-delimiter pull-right"></span>
+		<button class="btn btn-navbar search-toggle"
+			data-toggle="collapse"
+			data-target="#logo-search"
+			data-parent="#shutterstock-header">
+			<i class="icon-search icon-large"></i>
+		</button>
+	</div>
+
+	
+	<div id="logo-search" class="nav-collapse collapse">
+		<div class="content container">
+			<a class="logo-top" href="//www.shutterstock.com/video"></a>
+			
+
+<form class=" form-search form-emphasis" id="site-search" method="GET" action="/video/search/">
+
+	<input type="hidden" name="autocomplete_id" value="">
+	<input type="hidden" name="language" value="en">
+	<input type="hidden" name="lang" value="en">
+	<input type="hidden" name="search_source" value="">
+	<input type="hidden" name="safesearch" value="1">
+	<input type="hidden" name="version" value="llv1">
+
+		<div class="search-wrapper">
+		<div class="input-group">
+
+    			<div class="form-control">
+				<input class="search-input" id="search-input" name="searchterm" type="text" placeholder="Search images, vectors and videos" value="">
+			</div>
+
+            <span id="search-input-tooltip-holder" data-title="<i class=icon-remove></i>You can enter multiple clip IDs separated by commas or spaces!"></span>
+    
+			<div class="dropdown input-group-addon">
+				<div class="dropdown-wrapper">
+					<span class="dropdown-trigger" role="button" data-toggle="dropdown">Footage</span>
+					<ul class="dropdown-menu" role="menu">
+																												<li role="presentation">
+									<label id="images">
+										<input class="visuallyhidden" type="radio" name="media_type" value="images"
+																						data-action="/cat.mhtml"
+											data-placeholder="Search images, vectors and videos">
+											All Images
+									</label>
+								</li>
+																																			<li role="presentation" class="indent">
+									<label id="photos">
+										<input class="visuallyhidden" type="radio" name="media_type" value="photos"
+																						data-action="/cat.mhtml"
+											data-placeholder="Search images, vectors and videos">
+											Photos
+									</label>
+								</li>
+																																			<li role="presentation" class="indent">
+									<label id="vectors">
+										<input class="visuallyhidden" type="radio" name="media_type" value="vectors"
+																						data-action="/cat.mhtml"
+											data-placeholder="Search images, vectors and videos">
+											Vectors
+									</label>
+								</li>
+																																			<li role="presentation" class="indent">
+									<label id="illustrations">
+										<input class="visuallyhidden" type="radio" name="media_type" value="illustrations"
+																						data-action="/cat.mhtml"
+											data-placeholder="Search images, vectors and videos">
+											Illustrations
+									</label>
+								</li>
+																																			<li class="line"></li>
+																																			<li role="presentation">
+									<label id="videos">
+										<input class="visuallyhidden" type="radio" name="site" value="videos"
+											checked="checked"											data-action="/video/search/"
+											data-placeholder="Search images, vectors and videos">
+											Footage
+									</label>
+								</li>
+																																			<li class="line"></li>
+																																			<li role="presentation">
+									<label id="music">
+										<input class="visuallyhidden" type="radio" name="site" value="music"
+																						data-action="/music/search/"
+											data-placeholder="Search by mood, genre or keyword">
+											Music
+									</label>
+								</li>
+																		</ul>
+				</div>
+			</div>
+
+			<span class="input-group-btn">
+				<button class="btn btn-inverse" type="submit">
+					<span class="visuallyhidden">search</span>
+						<i class="icon-search" aria-hidden="true"></i>
+				</button>
+			</span>
+
+		</div>
+	</div>
+	
+	</form>
+		</div>
+	</div>
+
+	
+	<div id="mobile-nav" class="nav-collapse collapse hidden-desktop">
+	<ul class="nav secondary-menu">
+	
+		    <li class="compound-menu ">
+        <a href="//www.shutterstock.com/">Images</a>
+        <a href="//www.shutterstock.com/photos" class="compound-menu-sub-item">Photos</a>
+        <a href="//www.shutterstock.com/vectors" class="compound-menu-sub-item">Vectors</a>
+        <a href="//www.shutterstock.com/editorial" class="compound-menu-sub-item">Editorial</a>
+    </li>
+    <li class="active">
+        <a href="//www.shutterstock.com/video">FOOTAGE</a>
+    </li>
+    <li class="">
+        <a href="//www.shutterstock.com/music">MUSIC</a>
+    </li>
+    <li class="compound-menu ">
+        <a href="//www.shutterstock.com/editorial">EDITORIAL</a>
+        <a href="//www.shutterstock.com/editorial/entertainment" class="compound-menu-sub-item">Entertainment</a>
+        <a href="//www.shutterstock.com/editorial/news" class="compound-menu-sub-item">News</a>
+        <a href="//www.shutterstock.com/editorial/sports" class="compound-menu-sub-item">Sports</a>
+        <a href="//www.shutterstock.com/editorial/royalty" class="compound-menu-sub-item">Royalty</a>
+    </li>
+            <li>
+            <a href="//www.shutterstock.com/blog/">BLOG</a>
+        </li>
+        <li class="compound-menu ">
+        <a>TOOLS</a>
+        <a href="//www.shutterstock.com/editor/image" class="compound-menu-sub-item">Editor</a>
+    </li>
+		
+								
+						<li>
+			<a href="https://accounts.shutterstock.com/login?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view" rel="nofollow">Sign In</a>
+		</li>
+						
+								<li>
+				<a class="header-phone" href="tel:1-646-419-4452" rel="nofollow"><i class="icon-phone"></i> 1-646-419-4452</a>
+			</li>
+							
+		    <li>
+        <a class="link-pricing" href="/video/subscribe/" >View Plans & Pricing</a>
+    </li>
+
+				<li>
+			<a  href="/video/cart/" class="cart-link" rel="nofollow">
+				My Cart
+				<div class="cart">
+					<i class="icon-shopping-cart"></i>
+					<span class="count">0</span>
+				</div>
+			</a>
+		</li>
+				
+	</ul>
+</div>
+</div> </div> 				<div id="wrapper" class="centered cf">
+			<div class="page-detail">
+
+
+    <main class="detail cf" role="main" aria-labelledby="detail-label" data-clip-id="15953695" data-tracking-src="direct:detail/0/gg" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
+        <meta itemprop="name" content="road highway seamless texture in motion looping,..." />
+        <meta itemprop="description" content="road highway seamless texture in motion  looping, animation, loop" />
+        <meta itemprop="thumbnailUrl" content="//ak5.picdn.net/shutterstock/videos/15953695/thumb/1.jpg" />
+        <meta itemprop="uploadDate" content="2016-04-17" />
+        <meta itemprop="duration" content="7" />
+        <meta itemprop="contentUrl" content="//ak5.picdn.net/shutterstock/videos/15953695/preview/stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.mp4" />
+        <div class="detail-video">
+            <video width="100%" height="100%" style="width:100%;height:100%" class="media-player" poster="//ak5.picdn.net/shutterstock/videos/15953695/thumb/1.jpg" autoplay loop controls>
+                <source type="video/mp4" src="//ak5.picdn.net/shutterstock/videos/15953695/preview/stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.mp4" />
+                <source type="video/webm" src="//ak5.picdn.net/shutterstock/videos/15953695/preview/stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.webm" />
+                <object width="596" height="336" type="application/x-shockwave-flash" data="/video/assets/static/flashmediaelement.swf">
+                    <param name="movie" value="/video/assets/static/flashmediaelement.swf" />
+                    <param name="flashvars" value="controls=true&file=%2F%2Fak5.picdn.net%2Fshutterstock%2Fvideos%2F15953695%2Fpreview%2Fstock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.mp4" />
+                </object>
+            </video>
+        </div>
+
+        <div class="detail-meta">
+            <h1 id="detail-label" class="detail-desc trackit" data-trackit="detail:click:description">
+                road highway seamless texture in motion  looping, animation, loop
+                <span class="meta-label">Stock video</span>
+            </h1>
+            <section class="detail-info" aria-label="Clip Information">
+                <ul class="cf">
+                    <li>
+                        <h4 class="meta-label">Clip Length</h4> 0:07
+                    </li>
+                    <li>
+                        <h4 class="meta-label">Aspect Ratio</h4> 16:9
+                    </li>
+                    <li>
+                        <h4 class="meta-label">Id:</h4> 15953695
+                    </li>
+                    <li>
+                        <h4 class="meta-label">Copyright</h4>
+                        <a id="contributor-name" class="trackit" href="/video/gallery/ALEXEY-FILATOV-363091/" data-trackit="detail:click:contributor name">ALEXEY FILATOV</a>
+                    </li>
+                </ul>
+                            </section>
+            <section class="detail-purchase" aria-label="Purchase Options">
+                            <form id="purchase-form" method="GET" action="/video/cart/" role="form" aria-label="Prices">
+                    <input type="hidden" name="id" value="15953695">
+                    <input type="hidden" name="src" value="direct:detail/0/gg">
+                    <ul class="clip-prices ">
+                                                                                                            <li class="clip-price selected">
+                                <label>
+                                    <span class="clip-price-radio">
+                                        <input type="radio" name="size" value="original" checked class="trackit" data-trackit="detail selected:click:4K" data-name="4K">
+                                    </span>
+                                    <h3 class="size h6">
+                                        4K
+                                    </h3>
+                                    <p class="price">$ 199</p>
+                                    <p class="res"><span>3840 X 2160</span> <span>&#64; 25 fps MJPEG</span></p>
+                                    <p class="file-size">798.4 MB</p>
+                                </label>
+                            </li>
+                                                                                                                                        <li class="clip-price ">
+                                <label>
+                                    <span class="clip-price-radio">
+                                        <input type="radio" name="size" value="hd"  class="trackit" data-trackit="detail selected:click:HD" data-name="HD">
+                                    </span>
+                                    <h3 class="size h6">
+                                        HD
+                                    </h3>
+                                    <p class="price">$ 79</p>
+                                    <p class="res"><span>1920 X 1080</span> <span>&#64; 25 fps MOV</span></p>
+                                    <p class="file-size">104.1 MB</p>
+                                </label>
+                            </li>
+                                                                                                                                        <li class="clip-price ">
+                                <label>
+                                    <span class="clip-price-radio">
+                                        <input type="radio" name="size" value="sd"  class="trackit" data-trackit="detail selected:click:SD" data-name="SD">
+                                    </span>
+                                    <h3 class="size h6">
+                                        SD
+                                    </h3>
+                                    <p class="price">$ 65</p>
+                                    <p class="res"><span>852 X 480</span> <span>&#64; 25 fps MOV</span></p>
+                                    <p class="file-size">17.7 MB</p>
+                                </label>
+                            </li>
+                                                                                                                                        <li class="clip-price ">
+                                <label>
+                                    <span class="clip-price-radio">
+                                        <input type="radio" name="size" value="lowres"  class="trackit" data-trackit="detail selected:click:Web" data-name="Web">
+                                    </span>
+                                    <h3 class="size h6">
+                                        Web
+                                    </h3>
+                                    <p class="price">$ 49</p>
+                                    <p class="res"><span>426 X 240</span> <span>&#64; 25 fps MOV</span></p>
+                                    <p class="file-size">3.6 MB</p>
+                                </label>
+                            </li>
+                                                                        </ul>
+                    <button type="submit" class="btn btn-primary btn-download"
+                        data-id="15953695"
+                        data-clip-id="15953695"
+                        data-thumbnail="//ak5.picdn.net/shutterstock/videos/15953695/thumb/1.jpg"
+                        data-tracking-src="direct:detail/0/gg">
+                        <i class="icon-download-alt"></i>
+                        Download
+                    </button>
+                </form>
+                        </section>
+            <section class="detail-actions" aria-label="Other Actions">
+                <ul>
+                    <li>
+                        <a class="add-to-box secondary-link trackit" data-trackit="detail:click:add to box" href="#" data-clip-id="15953695" data-clip-box-id="" role="button" aria-haspopup="true">
+                            Save to a Clipbox
+                        </a>
+                        <a class="add-to-box btn btn-secondary trackit" data-trackit="detail:click:add to box" data-clip-id="15953695" data-clip-box-id="" href="#" role="button" aria-haspopup="true">
+                            Save to a Clipbox
+                        </a>
+                    </li>
+                    <li>
+                        <a class="download-comp secondary-link trackit" data-trackit="detail:click:download comp" href="#" role="button">
+                            Download Comp
+                        </a>
+                        <a class="download-comp btn btn-secondary trackit" data-trackit="detail:click:download comp" href="#" role="button">
+                            Download Comp
+                        </a>
+                    </li>
+                </ul>
+            </section>
+        </div>
+    </main>
+
+        <div class="detail-related visuallysimilar">
+        <div class="clip-selection visuallysimilar">
+    <h3 class="h5">Visually Similar</h3>
+    <ul class="clip-items cf">
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="15781360"
+    data-added-time=""
+    data-preview_url="//ak0.picdn.net/shutterstock/videos/15781360/preview/stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.mp4"
+    data-aspect="1.8963"
+    data-description="road highway seamless texture in motion looping,..."
+    data-thumbnail="//ak0.picdn.net/shutterstock/videos/15781360/thumb/1.jpg"
+    data-position="1"
+    data-tracking-src="rel/15953695:0/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-15781360-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html?src=rel/15953695:0/gg"
+                            data-trackit="similar clip:click:clip:0"
+                                        title="road highway seamless texture in motion  looping, animation, loop - 4K stock video clip"
+                        >
+                            <img src="//ak0.picdn.net/shutterstock/videos/15781360/thumb/1.jpg" alt="road highway seamless texture in motion  looping, animation, loop - 4K stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>4K</strong> 00:05
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="15781360">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="15781360" data-trackit="similar clip:click:add to box:0"></a>
+                                                                                <a href="/video/cart/?id=15781360&amp;src=rel/15953695:0/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="15781360" data-trackit="similar clip:click:add to cart:0"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="13005686"
+    data-added-time=""
+    data-preview_url="//ak6.picdn.net/shutterstock/videos/13005686/preview/stock-footage-top-view-of-cars-driving-fast-on-a-two-lane-highway.mp4"
+    data-aspect="1.7778"
+    data-description="Top view of cars driving fast on a two lane..."
+    data-thumbnail="//ak6.picdn.net/shutterstock/videos/13005686/thumb/1.jpg"
+    data-position="2"
+    data-tracking-src="rel/15953695:1/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-13005686-stock-footage-top-view-of-cars-driving-fast-on-a-two-lane-highway.html?src=rel/15953695:1/gg"
+                            data-trackit="similar clip:click:clip:1"
+                                        title="Top view of cars driving fast on a two lane highway. - HD stock footage clip"
+                        >
+                            <img src="//ak6.picdn.net/shutterstock/videos/13005686/thumb/1.jpg" alt="Top view of cars driving fast on a two lane highway. - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:20
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="13005686">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="13005686" data-trackit="similar clip:click:add to box:1"></a>
+                                                                                <a href="/video/cart/?id=13005686&amp;src=rel/15953695:1/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="13005686" data-trackit="similar clip:click:add to cart:1"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="16533982"
+    data-added-time=""
+    data-preview_url="//ak2.picdn.net/shutterstock/videos/16533982/preview/stock-footage-one-direction-traffic-three-lane-road-from-above-and-side.mp4"
+    data-aspect="1.7778"
+    data-description="One Direction Traffic Three Lane Road From Above..."
+    data-thumbnail="//ak2.picdn.net/shutterstock/videos/16533982/thumb/1.jpg"
+    data-position="3"
+    data-tracking-src="rel/15953695:2/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-16533982-stock-footage-one-direction-traffic-three-lane-road-from-above-and-side.html?src=rel/15953695:2/gg"
+                            data-trackit="similar clip:click:clip:2"
+                                        title="One Direction Traffic Three Lane Road From Above And Side
+ - HD stock video clip"
+                        >
+                            <img src="//ak2.picdn.net/shutterstock/videos/16533982/thumb/1.jpg" alt="One Direction Traffic Three Lane Road From Above And Side
+ - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:29
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="16533982">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="16533982" data-trackit="similar clip:click:add to box:2"></a>
+                                                                                <a href="/video/cart/?id=16533982&amp;src=rel/15953695:2/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="16533982" data-trackit="similar clip:click:add to cart:2"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="4182155"
+    data-added-time=""
+    data-preview_url="//ak5.picdn.net/shutterstock/videos/4182155/preview/stock-footage-pan-over-loads-of-coal-on-coal-barges-in-metropolis-illinois.mp4"
+    data-aspect="1.5"
+    data-description="Pan over loads of coal on coal barges in..."
+    data-thumbnail="//ak5.picdn.net/shutterstock/videos/4182155/thumb/1.jpg"
+    data-position="4"
+    data-tracking-src="rel/15953695:3/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-4182155-stock-footage-pan-over-loads-of-coal-on-coal-barges-in-metropolis-illinois.html?src=rel/15953695:3/gg"
+                            data-trackit="similar clip:click:clip:3"
+                                        title="Pan over loads of coal on coal barges in Metropolis, Illinois. - SD stock footage clip"
+                        >
+                            <img src="//ak5.picdn.net/shutterstock/videos/4182155/thumb/1.jpg" alt="Pan over loads of coal on coal barges in Metropolis, Illinois. - SD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>SD</strong> 00:21
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="4182155">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="4182155" data-trackit="similar clip:click:add to box:3"></a>
+                                                                                <a href="/video/cart/?id=4182155&amp;src=rel/15953695:3/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="4182155" data-trackit="similar clip:click:add to cart:3"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="16860184"
+    data-added-time=""
+    data-preview_url="//ak4.picdn.net/shutterstock/videos/16860184/preview/stock-footage-the-empty-seat-at-the-podium.mp4"
+    data-aspect="1.7778"
+    data-description="The empty seat at the podium"
+    data-thumbnail="//ak4.picdn.net/shutterstock/videos/16860184/thumb/1.jpg"
+    data-position="5"
+    data-tracking-src="rel/15953695:4/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-16860184-stock-footage-the-empty-seat-at-the-podium.html?src=rel/15953695:4/gg"
+                            data-trackit="similar clip:click:clip:4"
+                                        title="The empty seat at the podium - HD stock video clip"
+                        >
+                            <img src="//ak4.picdn.net/shutterstock/videos/16860184/thumb/1.jpg" alt="The empty seat at the podium - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:20
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="16860184">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="16860184" data-trackit="similar clip:click:add to box:4"></a>
+                                                                                <a href="/video/cart/?id=16860184&amp;src=rel/15953695:4/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="16860184" data-trackit="similar clip:click:add to cart:4"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="3389216"
+    data-added-time=""
+    data-preview_url="//ak6.picdn.net/shutterstock/videos/3389216/preview/stock-footage--lane-traffic-highway-top-view.mp4"
+    data-aspect="1.7647"
+    data-description="3 LAne Traffic highway Top view"
+    data-thumbnail="//ak6.picdn.net/shutterstock/videos/3389216/thumb/1.jpg"
+    data-position="6"
+    data-tracking-src="rel/15953695:5/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-3389216-stock-footage--lane-traffic-highway-top-view.html?src=rel/15953695:5/gg"
+                            data-trackit="similar clip:click:clip:5"
+                                        title="3 LAne Traffic highway Top view - HD stock footage clip"
+                        >
+                            <img src="//ak6.picdn.net/shutterstock/videos/3389216/thumb/1.jpg" alt="3 LAne Traffic highway Top view - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:09
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="3389216">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="3389216" data-trackit="similar clip:click:add to box:5"></a>
+                                                                                <a href="/video/cart/?id=3389216&amp;src=rel/15953695:5/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="3389216" data-trackit="similar clip:click:add to cart:5"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="12920516"
+    data-added-time=""
+    data-preview_url="//ak6.picdn.net/shutterstock/videos/12920516/preview/stock-footage-fast-moving-newspaper-texture-use-for-background-transitions-and-texture.mp4"
+    data-aspect="1.7778"
+    data-description="Fast moving newspaper texture. Use for..."
+    data-thumbnail="//ak6.picdn.net/shutterstock/videos/12920516/thumb/1.jpg"
+    data-position="7"
+    data-tracking-src="rel/15953695:6/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-12920516-stock-footage-fast-moving-newspaper-texture-use-for-background-transitions-and-texture.html?src=rel/15953695:6/gg"
+                            data-trackit="similar clip:click:clip:6"
+                                        title="Fast moving newspaper texture. Use for background, transitions and texture. - HD stock video clip"
+                        >
+                            <img src="//ak6.picdn.net/shutterstock/videos/12920516/thumb/1.jpg" alt="Fast moving newspaper texture. Use for background, transitions and texture. - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:17
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="12920516">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="12920516" data-trackit="similar clip:click:add to box:6"></a>
+                                                                                <a href="/video/cart/?id=12920516&amp;src=rel/15953695:6/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="12920516" data-trackit="similar clip:click:add to cart:6"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="4998515"
+    data-added-time=""
+    data-preview_url="//ak5.picdn.net/shutterstock/videos/4998515/preview/stock-footage-wheels-of-cars-passing-on-the-road.mp4"
+    data-aspect="1.7778"
+    data-description="wheels of cars passing on the road"
+    data-thumbnail="//ak5.picdn.net/shutterstock/videos/4998515/thumb/8.jpg"
+    data-position="8"
+    data-tracking-src="rel/15953695:7/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-4998515-stock-footage-wheels-of-cars-passing-on-the-road.html?src=rel/15953695:7/gg"
+                            data-trackit="similar clip:click:clip:7"
+                                        title="wheels of cars passing on the road - HD stock footage clip"
+                        >
+                            <img src="//ak5.picdn.net/shutterstock/videos/4998515/thumb/8.jpg" alt="wheels of cars passing on the road - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:30
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="4998515">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="4998515" data-trackit="similar clip:click:add to box:7"></a>
+                                                                                <a href="/video/cart/?id=4998515&amp;src=rel/15953695:7/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="4998515" data-trackit="similar clip:click:add to cart:7"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="33793552"
+    data-added-time=""
+    data-preview_url="//ak2.picdn.net/shutterstock/videos/33793552/preview/stock-footage-cars-drive-on-a-highway-top-view-timelapse.mp4"
+    data-aspect="1.7778"
+    data-description="Cars drive on a highway - top view - timelapse"
+    data-thumbnail="//ak2.picdn.net/shutterstock/videos/33793552/thumb/1.jpg"
+    data-position="9"
+    data-tracking-src="rel/15953695:8/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-33793552-stock-footage-cars-drive-on-a-highway-top-view-timelapse.html?src=rel/15953695:8/gg"
+                            data-trackit="similar clip:click:clip:8"
+                                        title="Cars drive on a highway - top view - timelapse - 4K stock video clip"
+                        >
+                            <img src="//ak2.picdn.net/shutterstock/videos/33793552/thumb/1.jpg" alt="Cars drive on a highway - top view - timelapse - 4K stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>4K</strong> 00:10
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="33793552">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="33793552" data-trackit="similar clip:click:add to box:8"></a>
+                                                                                <a href="/video/cart/?id=33793552&amp;src=rel/15953695:8/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="33793552" data-trackit="similar clip:click:add to cart:8"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="7981150"
+    data-added-time=""
+    data-preview_url="//ak0.picdn.net/shutterstock/videos/7981150/preview/stock-footage-men-playing-tennis-model-released-hd.mp4"
+    data-aspect="1.7778"
+    data-description="Men playing tennis. - Model Released - HD"
+    data-thumbnail="//ak0.picdn.net/shutterstock/videos/7981150/thumb/1.jpg"
+    data-position="10"
+    data-tracking-src="rel/15953695:9/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-7981150-stock-footage-men-playing-tennis-model-released-hd.html?src=rel/15953695:9/gg"
+                            data-trackit="similar clip:click:clip:9"
+                                        title="Men playing tennis. - Model Released - HD - HD stock footage clip"
+                        >
+                            <img src="//ak0.picdn.net/shutterstock/videos/7981150/thumb/1.jpg" alt="Men playing tennis. - Model Released - HD - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:07
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="7981150">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="7981150" data-trackit="similar clip:click:add to box:9"></a>
+                                                                                <a href="/video/cart/?id=7981150&amp;src=rel/15953695:9/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="7981150" data-trackit="similar clip:click:add to cart:9"></a>
+                                                </div>
+                    </div>
+    </li>
+        </ul>
+</div>
+    
+    </div>
+    
+    <div class="detail-related">
+            <div class="clip-selection related">
+    <h3 class="h5">Related Videos</h3>
+    <ul class="clip-items cf">
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="15781360"
+    data-added-time=""
+    data-preview_url="//ak0.picdn.net/shutterstock/videos/15781360/preview/stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.mp4"
+    data-aspect="1.8963"
+    data-description="road highway seamless texture in motion looping,..."
+    data-thumbnail="//ak0.picdn.net/shutterstock/videos/15781360/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="1"
+    data-tracking-src="rel/15953695:0/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-15781360-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html?src=rel/15953695:0/gg"
+                            data-trackit="related clip:click:clip:0"
+                                        title="road highway seamless texture in motion  looping, animation, loop - 4K stock video clip"
+                        >
+                            <img src="//ak0.picdn.net/shutterstock/videos/15781360/thumb/1.jpg?i10c=img.resize(height:160)" alt="road highway seamless texture in motion  looping, animation, loop - 4K stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>4K</strong> 00:05
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="15781360">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="15781360" data-trackit="related clip:click:add to box:0"></a>
+                                                                                <a href="/video/cart/?id=15781360&amp;src=rel/15953695:0/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="15781360" data-trackit="related clip:click:add to cart:0"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="25857725"
+    data-added-time=""
+    data-preview_url="//ak5.picdn.net/shutterstock/videos/25857725/preview/stock-footage-road-highway-seamless-texture-in-slow-motion-k-loop-d-rendering.mp4"
+    data-aspect="1.7778"
+    data-description="Road highway seamless texture in slow motion. 4K...."
+    data-thumbnail="//ak5.picdn.net/shutterstock/videos/25857725/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="2"
+    data-tracking-src="rel/15953695:1/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-25857725-stock-footage-road-highway-seamless-texture-in-slow-motion-k-loop-d-rendering.html?src=rel/15953695:1/gg"
+                            data-trackit="related clip:click:clip:1"
+                                        title="Road highway seamless texture in slow motion. 4K. Loop. 3D Rendering. - 4K stock footage clip"
+                        >
+                            <img src="//ak5.picdn.net/shutterstock/videos/25857725/thumb/1.jpg?i10c=img.resize(height:160)" alt="Road highway seamless texture in slow motion. 4K. Loop. 3D Rendering. - 4K stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>4K</strong> 00:49
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="25857725">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="25857725" data-trackit="related clip:click:add to box:1"></a>
+                                                                                <a href="/video/cart/?id=25857725&amp;src=rel/15953695:1/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="25857725" data-trackit="related clip:click:add to cart:1"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="25912331"
+    data-added-time=""
+    data-preview_url="//ak1.picdn.net/shutterstock/videos/25912331/preview/stock-footage-road-highway-with-discontinuous-lines-seamless-texture-in-slow-motion-k-loop-d-rendering.mp4"
+    data-aspect="1.7778"
+    data-description="Road highway with discontinuous lines seamless..."
+    data-thumbnail="//ak1.picdn.net/shutterstock/videos/25912331/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="3"
+    data-tracking-src="rel/15953695:2/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-25912331-stock-footage-road-highway-with-discontinuous-lines-seamless-texture-in-slow-motion-k-loop-d-rendering.html?src=rel/15953695:2/gg"
+                            data-trackit="related clip:click:clip:2"
+                                        title="Road highway with discontinuous lines seamless texture in slow motion. 4K. Loop. 3D Rendering. - 4K stock video clip"
+                        >
+                            <img src="//ak1.picdn.net/shutterstock/videos/25912331/thumb/1.jpg?i10c=img.resize(height:160)" alt="Road highway with discontinuous lines seamless texture in slow motion. 4K. Loop. 3D Rendering. - 4K stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>4K</strong> 00:45
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="25912331">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="25912331" data-trackit="related clip:click:add to box:2"></a>
+                                                                                <a href="/video/cart/?id=25912331&amp;src=rel/15953695:2/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="25912331" data-trackit="related clip:click:add to cart:2"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2694956"
+    data-added-time=""
+    data-preview_url="//ak6.picdn.net/shutterstock/videos/2694956/preview/stock-footage-road-with-motivational-words-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="Road with motivational Words 1080 HD video"
+    data-thumbnail="//ak6.picdn.net/shutterstock/videos/2694956/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="4"
+    data-tracking-src="rel/15953695:3/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2694956-stock-footage-road-with-motivational-words-hd-video.html?src=rel/15953695:3/gg"
+                            data-trackit="related clip:click:clip:3"
+                                        title="Road with motivational Words 1080 HD video - HD stock footage clip"
+                        >
+                            <img src="//ak6.picdn.net/shutterstock/videos/2694956/thumb/1.jpg?i10c=img.resize(height:160)" alt="Road with motivational Words 1080 HD video - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:06
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2694956">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2694956" data-trackit="related clip:click:add to box:3"></a>
+                                                                                <a href="/video/cart/?id=2694956&amp;src=rel/15953695:3/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2694956" data-trackit="related clip:click:add to cart:3"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695478"
+    data-added-time=""
+    data-preview_url="//ak8.picdn.net/shutterstock/videos/2695478/preview/stock-footage-driving-down-a-road-animation-pov-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="Driving down a road Animation POV 1080 HD video"
+    data-thumbnail="//ak8.picdn.net/shutterstock/videos/2695478/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="5"
+    data-tracking-src="rel/15953695:4/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695478-stock-footage-driving-down-a-road-animation-pov-hd-video.html?src=rel/15953695:4/gg"
+                            data-trackit="related clip:click:clip:4"
+                                        title="Driving down a road Animation POV 1080 HD video - HD stock video clip"
+                        >
+                            <img src="//ak8.picdn.net/shutterstock/videos/2695478/thumb/1.jpg?i10c=img.resize(height:160)" alt="Driving down a road Animation POV 1080 HD video - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:15
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695478">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695478" data-trackit="related clip:click:add to box:4"></a>
+                                                                                <a href="/video/cart/?id=2695478&amp;src=rel/15953695:4/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695478" data-trackit="related clip:click:add to cart:4"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695487"
+    data-added-time=""
+    data-preview_url="//ak7.picdn.net/shutterstock/videos/2695487/preview/stock-footage-pov-of-driving-down-a-road-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="POV of Driving down a Road 1080 HD video"
+    data-thumbnail="//ak7.picdn.net/shutterstock/videos/2695487/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="6"
+    data-tracking-src="rel/15953695:5/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695487-stock-footage-pov-of-driving-down-a-road-hd-video.html?src=rel/15953695:5/gg"
+                            data-trackit="related clip:click:clip:5"
+                                        title="POV of Driving down a Road 1080 HD video - HD stock footage clip"
+                        >
+                            <img src="//ak7.picdn.net/shutterstock/videos/2695487/thumb/1.jpg?i10c=img.resize(height:160)" alt="POV of Driving down a Road 1080 HD video - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:06
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695487">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695487" data-trackit="related clip:click:add to box:5"></a>
+                                                                                <a href="/video/cart/?id=2695487&amp;src=rel/15953695:5/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695487" data-trackit="related clip:click:add to cart:5"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695493"
+    data-added-time=""
+    data-preview_url="//ak3.picdn.net/shutterstock/videos/2695493/preview/stock-footage-driving-down-a-road-animation-pov-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="Driving down a road Animation POV 1080 HD video"
+    data-thumbnail="//ak3.picdn.net/shutterstock/videos/2695493/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="7"
+    data-tracking-src="rel/15953695:6/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695493-stock-footage-driving-down-a-road-animation-pov-hd-video.html?src=rel/15953695:6/gg"
+                            data-trackit="related clip:click:clip:6"
+                                        title="Driving down a road Animation POV 1080 HD video - HD stock video clip"
+                        >
+                            <img src="//ak3.picdn.net/shutterstock/videos/2695493/thumb/1.jpg?i10c=img.resize(height:160)" alt="Driving down a road Animation POV 1080 HD video - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:08
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695493">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695493" data-trackit="related clip:click:add to box:6"></a>
+                                                                                <a href="/video/cart/?id=2695493&amp;src=rel/15953695:6/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695493" data-trackit="related clip:click:add to cart:6"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695514"
+    data-added-time=""
+    data-preview_url="//ak4.picdn.net/shutterstock/videos/2695514/preview/stock-footage-pov-of-driving-down-a-road-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="POV of Driving down a Road 1080 HD video"
+    data-thumbnail="//ak4.picdn.net/shutterstock/videos/2695514/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="8"
+    data-tracking-src="rel/15953695:7/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695514-stock-footage-pov-of-driving-down-a-road-hd-video.html?src=rel/15953695:7/gg"
+                            data-trackit="related clip:click:clip:7"
+                                        title="POV of Driving down a Road 1080 HD video - HD stock footage clip"
+                        >
+                            <img src="//ak4.picdn.net/shutterstock/videos/2695514/thumb/1.jpg?i10c=img.resize(height:160)" alt="POV of Driving down a Road 1080 HD video - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:06
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695514">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695514" data-trackit="related clip:click:add to box:7"></a>
+                                                                                <a href="/video/cart/?id=2695514&amp;src=rel/15953695:7/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695514" data-trackit="related clip:click:add to cart:7"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695517"
+    data-added-time=""
+    data-preview_url="//ak7.picdn.net/shutterstock/videos/2695517/preview/stock-footage-pov-of-driving-down-a-road-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="POV of Driving down a Road 1080 HD video"
+    data-thumbnail="//ak7.picdn.net/shutterstock/videos/2695517/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="9"
+    data-tracking-src="rel/15953695:8/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695517-stock-footage-pov-of-driving-down-a-road-hd-video.html?src=rel/15953695:8/gg"
+                            data-trackit="related clip:click:clip:8"
+                                        title="POV of Driving down a Road 1080 HD video - HD stock video clip"
+                        >
+                            <img src="//ak7.picdn.net/shutterstock/videos/2695517/thumb/1.jpg?i10c=img.resize(height:160)" alt="POV of Driving down a Road 1080 HD video - HD stock video clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:06
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695517">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695517" data-trackit="related clip:click:add to box:8"></a>
+                                                                                <a href="/video/cart/?id=2695517&amp;src=rel/15953695:8/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695517" data-trackit="related clip:click:add to cart:8"></a>
+                                                </div>
+                    </div>
+    </li>
+                                            
+
+<li class="clip-item clip-container" 
+    data-clip-id="2695544"
+    data-added-time=""
+    data-preview_url="//ak4.picdn.net/shutterstock/videos/2695544/preview/stock-footage-pov-of-driving-down-a-road-hd-video.mp4"
+    data-aspect="1.7778"
+    data-description="POV of Driving down a Road 1080 HD video"
+    data-thumbnail="//ak4.picdn.net/shutterstock/videos/2695544/thumb/1.jpg?i10c=img.resize(height:160)"
+    data-position="10"
+    data-tracking-src="rel/15953695:9/gg"
+    >
+                <a class="clip trackit"
+            href="/video/clip-2695544-stock-footage-pov-of-driving-down-a-road-hd-video.html?src=rel/15953695:9/gg"
+                            data-trackit="related clip:click:clip:9"
+                                        title="POV of Driving down a Road 1080 HD video - HD stock footage clip"
+                        >
+                            <img src="//ak4.picdn.net/shutterstock/videos/2695544/thumb/1.jpg?i10c=img.resize(height:160)" alt="POV of Driving down a Road 1080 HD video - HD stock footage clip"/>
+                    </a>
+            <div class="clip-bumper ">
+            <div class="clip-info">
+		                                    <strong>HD</strong> 00:06
+                            </div>
+            <div class="clip-links  clip-links-2" data-id="2695544">
+                                                            <a href="#" class="add-to-box trackit" title="Save to a Clipbox" data-clip-id="2695544" data-trackit="related clip:click:add to box:9"></a>
+                                                                                <a href="/video/cart/?id=2695544&amp;src=rel/15953695:9/gg" class="add-to-cart trackit" title="Add to shopping cart" data-clip-id="2695544" data-trackit="related clip:click:add to cart:9"></a>
+                                                </div>
+                    </div>
+    </li>
+        </ul>
+</div>
+    
+    
+        </div>
+
+    <div class="detail-keywords secondary-links" role="complimentary">
+        <h2 class="h5" id="detail-keywords-label">Keywords</h2>
+                                    <a class="trackit" href="/video/search/abstract/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:0">abstract</a>,                            <a class="trackit" href="/video/search/animation/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:1">animation</a>,                            <a class="trackit" href="/video/search/asphalt/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:2">asphalt</a>,                            <a class="trackit" href="/video/search/background/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:3">background</a>,                            <a class="trackit" href="/video/search/black/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:4">black</a>,                            <a class="trackit" href="/video/search/dark/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:5">dark</a>,                            <a class="trackit" href="/video/search/design/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:6">design</a>,                            <a class="trackit" href="/video/search/gray/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:7">gray</a>,                            <a class="trackit" href="/video/search/grey/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:8">grey</a>,                            <a class="trackit" href="/video/search/highway/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:9">highway</a>,                            <a class="trackit" href="/video/search/lane/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:10">lane</a>,                            <a class="trackit" href="/video/search/line/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:11">line</a>,                            <a class="trackit" href="/video/search/loop/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:12">loop</a>,                            <a class="trackit" href="/video/search/looping/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:13">looping</a>,                            <a class="trackit" href="/video/search/material/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:14">material</a>,                            <a class="trackit" href="/video/search/motion/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:15">motion</a>,                            <a class="trackit" href="/video/search/movement/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:16">movement</a>,                            <a class="trackit" href="/video/search/outdoors/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:17">outdoors</a>,                            <a class="trackit" href="/video/search/paint/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:18">paint</a>,                            <a class="trackit" href="/video/search/pattern/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:19">pattern</a>,                            <a class="trackit" href="/video/search/road/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:20">road</a>,                            <a class="trackit" href="/video/search/seamless/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:21">seamless</a>,                            <a class="trackit" href="/video/search/speed/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:22">speed</a>,                            <a class="trackit" href="/video/search/street/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:23">street</a>,                            <a class="trackit" href="/video/search/surface/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:24">surface</a>,                            <a class="trackit" href="/video/search/texture/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:25">texture</a>,                            <a class="trackit" href="/video/search/textured/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:26">textured</a>,                            <a class="trackit" href="/video/search/traffic/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:27">traffic</a>,                            <a class="trackit" href="/video/search/transportation/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:28">transportation</a>,                            <a class="trackit" href="/video/search/trip/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:29">trip</a>,                            <a class="trackit" href="/video/search/two--lane/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:30">two-lane</a>,                            <a class="trackit" href="/video/search/urban/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:31">urban</a>,                            <a class="trackit" href="/video/search/video/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:32">video</a>,                            <a class="trackit" href="/video/search/way/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:33">way</a>,                            <a class="trackit" href="/video/search/white/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:34">white</a>,                            <a class="trackit" href="/video/search/white-markings/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:35">white markings</a>,                            <a class="trackit" href="/video/search/yellow/?ref_context=keyword" tabIndex="-1" data-trackit="detail:click:keywords:36">yellow</a>                        </div>
+
+        <div id="redownload">
+        <h3>You've bought this clip before.</h3>
+        <p>Would you like to redownload a copy?</p>
+        <a id="detail-redownload" class="btn" data-csrf="747c67f4a1061fcf1d0348937c64a33fbf17d988" href="">Redownload</a>
+        <a id="detail-readd-to-cart" class="btn" href="">Add to cart</a>
+        <i class="icon-remove"></i>
+    </div>
+
+
+</div>
+<div id="cart-add-overlay" data-pack-json="{&quot;sd&quot;:{&quot;res&quot;:&quot;SD&quot;,&quot;size&quot;:&quot;5&quot;,&quot;price&quot;:&quot;$\u00a0299&quot;,&quot;savings&quot;:&quot;$\u00a026&quot;,&quot;subscription&quot;:&quot;footage_5_download_nonhd&quot;,&quot;hasValidSubscriptionForResolution&quot;:false},&quot;web&quot;:{&quot;res&quot;:&quot;Web&quot;,&quot;size&quot;:&quot;5&quot;,&quot;price&quot;:&quot;$\u00a0219&quot;,&quot;savings&quot;:&quot;$\u00a026&quot;,&quot;subscription&quot;:&quot;footage_5_download_lowres&quot;,&quot;hasValidSubscriptionForResolution&quot;:false},&quot;hd&quot;:{&quot;res&quot;:&quot;HD&quot;,&quot;size&quot;:&quot;5&quot;,&quot;price&quot;:&quot;$\u00a0359&quot;,&quot;savings&quot;:&quot;$\u00a036&quot;,&quot;subscription&quot;:&quot;footage_5_download_hd&quot;,&quot;hasValidSubscriptionForResolution&quot;:false},&quot;ultrahd4k&quot;:{&quot;res&quot;:&quot;4K&quot;,&quot;size&quot;:&quot;5&quot;,&quot;price&quot;:&quot;$\u00a0899&quot;,&quot;savings&quot;:&quot;$\u00a096&quot;,&quot;subscription&quot;:&quot;footage_5_download_ultrahd4k&quot;,&quot;hasValidSubscriptionForResolution&quot;:false}}">
+</div>
+
+<script id="cart-added-template" type="text/x-jquery-tmpl">
+    <div class="overlay-cart overlay-addedtocart cf">
+        <div class="overlay-close icon-remove"></div>
+        <img class="addtocart-img" src="${thumbnail}">
+        <div class="addtocart-info">
+            <div class="addtocart-message">
+                <i class="icon-ok"></i>Added to your cart.
+            </div>
+            <div class="addtocart-id">
+                ID: <span class="id-number">${clipId}</span>
+            </div>
+            <a href="/video/cart/" class="js-add-to-cart-view-cart btn btn-small btn-primary">
+                View Cart
+            </a>
+        </div>
+        <div class="absinthe-show-5-pack">
+            <form method="post" action="/video/subscribe/">
+                <div class="absinthe-show-5-pack-upgrade">Upgrade to a ${fivePackData.size} Pack and Save!</div>
+                <div class="absinthe-show-5-pack-clips">${fivePackData.size} ${fivePackData.res} Clips ${fivePackData.price}<span class="absinthe-show-5-pack-save">SAVE ${fivePackData.savings}</span></div>
+                <button type="submit" class="btn btn-primary" name="subscription" value="${fivePackData.subscription}">Purchase ${fivePackData.size} ${fivePackData.res} Pack</button>
+                <input type="hidden" name="action" value="continue">
+            </form>
+        </div>
+    </div>
+</script>
+
+<script id="cart-not-added-template" type="text/x-jquery-tmpl">
+    <div class="overlay-cart overlay-notaddedtocart cf">
+        <div class="overlay-close icon-remove"></div>
+        
+            {{if thumbnail}}
+                <img src="${thumbnail}">
+            {{else}}
+        
+                <img src="/video/assets/min/images/unavailable-clipbox.png" alt="This clip is unavailable" />
+        
+            {{/if}}
+        
+        <div class="addtocart-info">
+            <div class="addtocart-message">
+                <b>Something went wrong.</b><br>
+                We're sorry. Please try again.
+            </div>
+        </div>
+    </div>
+</script>
+
+<script id="full-cart-template" type="text/x-jquery-tmpl">
+    <div class="overlay-cart overlay-notaddedtocart cf">
+        <div class="overlay-close icon-remove"></div>
+        <div class="addtocart-info">
+            <div class="addtocart-message">
+              <h3>
+                Sorry, your cart is full.
+              </h3>
+              <p>You’ve reached your 100 clip limit. This item has not been added to your cart.</p>
+            </div>
+        </div>
+    </div>
+</script>
+		</div>
+					<footer id="site-footer" role="contentinfo">
+    <div class="container secondary-links tight">
+            <div class="row">
+            <div class="span12 stat-line cf">
+                <h4 class="frank en">SHUTTERSTOCK STATS:</h4>
+                <em>9,557,693</em><span>royalty-free video clips</span><i>/</i>
+                <em>77,910</em><span>new stock clips added this week</span>
+            </div>
+        </div>
+        <div class="row">
+            <section class="span3">
+                <h4 class="frank">Shutterstock Footage</h4>
+                <ul>
+                    <li><a href="/video/">Home</a></li>
+                    <li><a href="https://www.shutterstock.com/about">About Us</a></li>
+                    <li><a href="/video/subscribe/">Subscribe / Renew</a></li>
+                    <li><a href="https://www.shutterstock.com">Shutterstock Images</a></li>
+                    <li><a href="https://www.shutterstock.com/music">Shutterstock Music</a></li>
+                    <li><a href="https://www.shutterstock.com/blog/">Shutterstock Blog</a></li>
+                    <li><a href="https://www.webdam.com">Digital Asset Management</a></li>
+                    <li><a href="/press.mhtml">Press</a></li>
+                    <li><a href="https://www.shutterstock.com/blog/tag/newsletter">Newsletter Archive</a></li>
+                    <li><a href="https://www.shutterstock.com/jobs.mhtml">Employment</a></li>
+                    <li><a href="https://submit.shutterstock.com">Become a Contributor</a></li>
+                    <li><a href="https://affiliate.shutterstock.com">Affiliate / Reseller Program</a></li>
+                    <li><a href="https://www.shutterstock.com/blog/category/design">Design Tips &amp; Tricks</a></li>
+                    <li><a href="http://investor.shutterstock.com/">Investor Relations</a></li>
+                </ul>
+            </section>
+            <section class="span3">
+                <h4 class="frank">Help</h4>
+                <ul>
+                    <li>
+                                            <a target="_blank" href="http://support.shutterstock.com">
+                                                Support Center
+                        </a>
+                    </li>
+                    <li><a href="https://www.shutterstock.com/contactus?site=footage">Contact Us</a></li>
+                </ul>
+                <h4 class="frank">Sales</h4>
+                <ul>
+                    <li>1-646-419-4452</li>
+                </ul>
+                <h4 class="frank">Follow Us</h4>
+                <ul class="social-links cf">
+                    <li><a href="https://www.facebook.com/Shutterstock" class="social-icon social-icon-facebook" title="Facebook" target="_blank"></a></li>
+                    <li><a href="https://twitter.com/#!/SHUTTERSTOCK" class="social-icon social-icon-twitter" title="Twitter" target="_blank"></a></li>
+                    <li><a href="https://vimeo.com/shutterstock" class="social-icon social-icon-vimeo" title="Vimeo" target="_blank"></a></li>
+                    <li><a href="https://plus.google.com/111740130090218352643" class="social-icon social-icon-google" rel="publisher" title="Google Plus" target="_blank"></a></li>
+                </ul>
+
+            </section>
+            <section class="span3">
+                <h4 class="frank">Language</h4>
+                <ul class="lang-list">
+                                            <li><a class="lang-link" href="/cs/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Čeština</a></li>
+                                            <li><a class="lang-link" href="/da/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Dansk</a></li>
+                                            <li><a class="lang-link" href="/de/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Deutsch</a></li>
+                                            <li><a class="lang-link" href="/en/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">English</a></li>
+                                            <li><a class="lang-link" href="/es/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Español</a></li>
+                                            <li><a class="lang-link" href="/fr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Français</a></li>
+                                            <li><a class="lang-link" href="/it/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Italiano</a></li>
+                                            <li><a class="lang-link" href="/hu/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Magyar</a></li>
+                                            <li><a class="lang-link" href="/nl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Nederlands</a></li>
+                                            <li><a class="lang-link" href="/nb/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Norsk</a></li>
+                                            <li><a class="lang-link" href="/pl/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Polski</a></li>
+                                            <li><a class="lang-link" href="/pt/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Português</a></li>
+                                            <li><a class="lang-link" href="/fi/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Suomi</a></li>
+                                            <li><a class="lang-link" href="/sv/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Svenska</a></li>
+                                            <li><a class="lang-link" href="/tr/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Türkçe</a></li>
+                                            <li><a class="lang-link" href="/ru/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">Русский</a></li>
+                                            <li><a class="lang-link" href="/th/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">ไทย</a></li>
+                                            <li><a class="lang-link" href="/ko/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">한국어</a></li>
+                                            <li><a class="lang-link" href="/ja/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">日本語</a></li>
+                                            <li><a class="lang-link" href="/zh/video/clip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html">简体中文</a></li>
+                                    </ul>
+                <img src="/video/assets/min/images/worldmap_small.png" alt="Map">
+            </section>
+            <section class="span3">
+                <h4 class="frank">Legal</h4>
+                <ul>
+                    <li><a href="/website_terms.mhtml">Website Terms of Use</a></li>
+                    <li><a href="/license">Stock Footage Licensing Terms</a></li>
+                    <li><a href="https://www.shutterstock.com/privacy.mhtml">Privacy Policy</a></li>
+                </ul>
+               <a href="//privacy.truste.com/privacy-seal/validation?rid=e932cd1f-9988-40e9-a66f-d71c21cd57f5" title="TRUSTe Privacy Certification" target="_blank"><img style="border: none" src="//privacy-policy.truste.com/privacy-seal/seal?rid=e932cd1f-9988-40e9-a66f-d71c21cd57f5" alt="TRUSTe Privacy Certification"/></a>
+            </section>
+        </div>
+        <div class="row">
+            <div class="span6 offset3 copyright">
+                <p>&copy; 2003-2018 Shutterstock, Inc.  All rights reserved.</p>
+                <p>Shutterstock Footage offers a growing library of royalty free stock footage, stock clips, and stock video for use in film, television, commercials, interactive web sites, and other multimedia productions.</p>
+            </div>
+        </div>
+        </div>
+</footer>
+			</div>
+
+	<script id="no-flash-warning" type="text/html">
+		<p class="error_notification pam" style="color:#CC4600; text-align: center"><b>
+			The video content presented here requires the latest version of the Adobe Flash Player
+		</b></p>
+	</script>
+
+        <!--[if lte IE 9 ]><script src="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/js/ie.min.js?v=ed3381b840d4be6fdb4a05db54cdf05a"></script>
+<![endif]-->
+
+    <script src="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/js/base.bottom.min.js?v=ed3381b840d4be6fdb4a05db54cdf05a"></script>
+
+
+	    <div id="clipbox-overlay" class="overlay popover clipbox-overlay">
+	<div class="overlay-heading">
+		<div class="title-icon overlay-h2">Save to a Clipbox:</div>
+		<div class="overlay-close icon-remove"></div>
+	</div>
+	<div class="overlay-info"></div>
+</div>
+<div class="overlay-fullscreen-backdrop"></div>
+
+<script id="clipbox-addto-template" type="text/x-jquery-tmpl">
+	<div class="overlay-info">
+		<ul class="clipbox-titles">
+		
+			{{each(i, clipbox) clipboxes}}
+				<li><a href="#" data-id="${clipbox.id}" data-name="${clipbox.name}">${clipbox.name}</a></li>
+			{{/each}}
+		
+		</ul>
+		<div class="clipbox-new" class="cf">
+			<input id="clipbox-submit-input" class="btn btn-small disabled" type="submit" value="Save" disabled />
+			<div class="clipbox-text-input-outer">
+				<label for="clipbox-text-input" class="visuallyhidden">New Clipbox</label>
+				<input id="clipbox-text-input" maxlength="50" type="text" placeholder="New Clipbox" autocapitalize="off" autocorrect="off" autocomplete="off" />
+			</div>
+		</div>
+	</div>
+</script>
+
+<script id="clipbox-signin-template" type="text/x-jquery-tmpl">
+	<div class="overlay-info">
+		<div class="overlay-text">
+			<div class="overlay-text-content">
+				Please <a href="https://accounts.shutterstock.com/users/new?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%252526add_to_clipbox%25253D1%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view&amp;hl=en">Sign In</a> before saving this to a clipbox
+			</div>
+		</div>
+	</div>
+</script>
+
+<script id="clipbox-added-template" type="text/x-jquery-tmpl">
+	<div class="overlay-info">
+		<div class="overlay-text">
+			<div class="overlay-text-content">
+				Saved to <span class="highlight">"<a href='${clipboxurl}'>${clipboxchosen}</a>"</span>
+			</div>
+		</div>
+	</div>
+</script>
+    <div id="download-comp-overlay" class="overlay popover download-comp-overlay">
+	<div class="overlay-heading">
+		<div class="title-icon overlay-h2">Download Comp</div>
+		<div class="overlay-close icon-remove"></div>
+	</div>
+	<div class="overlay-info"></div>
+</div>
+
+
+<script id="download-comp-signin-template" type="text/x-jquery-tmpl">
+	<div class="overlay-info">
+		<div class="overlay-text">
+			<div class="overlay-text-content">
+				Please <a href="https://accounts.shutterstock.com/users/new?next=https%3A%2F%2Faccounts.shutterstock.com%2Foauth%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3Dfootage%26redirect_uri%3Dhttps%253A%252F%252Fwww.shutterstock.com%252Fvideo%252Foauth-callback%253Flanding_page%253D%25252Fvideo%25252Fclip-15953695-stock-footage-road-highway-seamless-texture-in-motion-looping-animation-loop.html%252526download_comp%25253D1%2526realm%253Dcustomer%26state%3D0cc094f9c8102c6376653759aa44502d%26site%3Dfootage%26hl%3Den%26scope%3Duser.view%2Buser.email%2Blicenses.create%2Bpurchases.view&amp;hl=en">Sign In</a> to download a watermarked comp of this clip.
+			</div>
+		</div>
+	</div>
+</script>
+    <script id="clip-in-cart-template" type="text/x-jquery-tmpl">
+    <div class="clip-in-cart">
+        <a href="/video/cart/">
+                <span class="clip-resolution">${size}</span> In Cart
+        </a>
+        <span class="clip-in-cart-res">${res}</span>
+    </div>
+</script>
+
+    <script>
+        Ss.hasDownloadComp = false;
+        Ss.hasAddToClipbox = false;
+        Ss.hasAcceptedCurrentTOS = true;
+        Ss.currentTOSEffectiveTimestamp = '1519380811';
+    </script>
+
+    <script src="//d2hta2v7c0ovba.cloudfront.net/video/assets/min/js/detail.min.js?v=ed3381b840d4be6fdb4a05db54cdf05a"></script>
+
+
+    <script type="text/javascript">
+        Ss.track.detail(15953695);
+    </script>
+
+            <script type="text/javascript" src="https://c.la2c2.salesforceliveagent.com/content/g/js/31.0/deployment.js"></script>
+    <script type="text/javascript">
+        (function($) {
+            var $liveChatButton = $('.lc-online');
+            liveagent.init('https://d.la2c2.salesforceliveagent.com/chat', '572a0000000Cx2m', '00D30000001GgSC');
+            if (!window._laq) {
+                window._laq = [];
+            }
+            window._laq.push(function() {
+                //liveagent.enableLogging();
+                liveagent.addCustomDetail('Storefront', 'Video', true);
+                liveagent.addCustomDetail('userName', '', true);
+                liveagent.showWhenOnline('573a0000000LL6l', $liveChatButton.get(0));
+            });
+            $liveChatButton.on('click', function(){
+                liveagent.startChat('573a0000000LL6l');
+            });
+        })(jQuery);
+    </script>
+
+                
+<!-- Little Brother -->
+<script type="text/javascript">
+    if (window.LilBro) {
+        try {
+            Ss.lilBro = new LilBro({
+                element: document.getElementById('container'),
+                server: 'lilb2.shutterstock.com',
+                ssl_server: 'lilb2.shutterstock.com',
+                watch_focus: true,
+                event_base: {"results_per_page":100,"results_sort_by":"popular","language":"en","country_ip":"IN"}
+            });
+
+            var performance = new LilBro.Module.Performance();
+            performance.track();
+
+            Ss.track.lilBro({
+                event_type: 'page_load',
+                user_id: null
+            });
+
+        } catch (e) {
+            Ss.log && Ss.log('Error in LilBro: ', e.message);
+        }
+    }
+</script>
+    
+
+
+	<script type="text/javascript">
+	(function(w, d, l) {
+		var ms, addIRLanding = function () {
+			var s;
+
+			(ms)? w.detachEvent(l, addIRLanding): w.removeEventListener(l, addIRLanding);
+
+			s = d.createElement('script');
+			s.src = '//d3cxv97fi8q177.cloudfront.net/foundation-A35053-1a4e-4aac-bf5e-08a4b85602231.js';
+			d.body.appendChild(s);
+			w = d = s = l = ms = null;
+		};
+
+		(ms = w.attachEvent)? (l='on'+l,w.attachEvent(l, addIRLanding)): w.addEventListener(l, addIRLanding, false);
+	})(window, document, 'load');
+	</script>
+	<noscript><img src="//tl.r7ls.net/unscripted/35053" /></noscript>
+
+    <!-- brought to you by 10.1.47.4 -->
+<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"a562b1f751","applicationID":"9814925","transactionName":"YFdWYxNZX0EAU0FbW1kdYUUIF1hcBVVNHERfQg==","queueTime":0,"applicationTime":460,"atts":"TBBVFVtDTE8=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
+</html>
diff --git a/src/assets/image/road1.jpg b/src/assets/image/road1.jpg
new file mode 100644
index 0000000..200b3ab
Binary files /dev/null and b/src/assets/image/road1.jpg differ
diff --git a/src/assets/image/roadBoard.jpg b/src/assets/image/roadBoard.jpg
new file mode 100644
index 0000000..23ff4a3
Binary files /dev/null and b/src/assets/image/roadBoard.jpg differ
diff --git a/src/assets/image/route_v.png b/src/assets/image/route_v.png
new file mode 100644
index 0000000..858ab6b
Binary files /dev/null and b/src/assets/image/route_v.png differ
diff --git a/src/assets/image/running_bike.png b/src/assets/image/running_bike.png
new file mode 100644
index 0000000..6a0c591
Binary files /dev/null and b/src/assets/image/running_bike.png differ
diff --git a/src/assets/image/running_car.png b/src/assets/image/running_car.png
new file mode 100644
index 0000000..0f74a8c
Binary files /dev/null and b/src/assets/image/running_car.png differ
diff --git a/src/assets/image/running_truck.png b/src/assets/image/running_truck.png
new file mode 100644
index 0000000..6f245a9
Binary files /dev/null and b/src/assets/image/running_truck.png differ
diff --git a/src/assets/image/s.jpg b/src/assets/image/s.jpg
new file mode 100644
index 0000000..945258b
Binary files /dev/null and b/src/assets/image/s.jpg differ
diff --git a/src/assets/image/share.png b/src/assets/image/share.png
new file mode 100644
index 0000000..f02d360
Binary files /dev/null and b/src/assets/image/share.png differ
diff --git a/src/assets/image/signup.jpg b/src/assets/image/signup.jpg
new file mode 100644
index 0000000..3bd6b71
Binary files /dev/null and b/src/assets/image/signup.jpg differ
diff --git a/src/assets/image/sms.png b/src/assets/image/sms.png
new file mode 100644
index 0000000..6c464c4
Binary files /dev/null and b/src/assets/image/sms.png differ
diff --git a/src/assets/image/sos_notification.png b/src/assets/image/sos_notification.png
new file mode 100644
index 0000000..4c9bdc0
Binary files /dev/null and b/src/assets/image/sos_notification.png differ
diff --git a/src/assets/image/source.gif b/src/assets/image/source.gif
new file mode 100644
index 0000000..2f5bfc9
Binary files /dev/null and b/src/assets/image/source.gif differ
diff --git a/src/assets/image/speedometer.png b/src/assets/image/speedometer.png
new file mode 100644
index 0000000..46cd110
Binary files /dev/null and b/src/assets/image/speedometer.png differ
diff --git a/src/assets/image/stopped_bike.png b/src/assets/image/stopped_bike.png
new file mode 100644
index 0000000..7ee8dfc
Binary files /dev/null and b/src/assets/image/stopped_bike.png differ
diff --git a/src/assets/image/stopped_car.png b/src/assets/image/stopped_car.png
new file mode 100644
index 0000000..0d4f3f7
Binary files /dev/null and b/src/assets/image/stopped_car.png differ
diff --git a/src/assets/image/stopped_car_1.png b/src/assets/image/stopped_car_1.png
new file mode 100644
index 0000000..4c2cb94
Binary files /dev/null and b/src/assets/image/stopped_car_1.png differ
diff --git a/src/assets/image/stopped_truck.png b/src/assets/image/stopped_truck.png
new file mode 100644
index 0000000..1af397d
Binary files /dev/null and b/src/assets/image/stopped_truck.png differ
diff --git a/src/assets/image/stops1.png b/src/assets/image/stops1.png
new file mode 100644
index 0000000..bf3eefd
Binary files /dev/null and b/src/assets/image/stops1.png differ
diff --git a/src/assets/image/support.gif b/src/assets/image/support.gif
new file mode 100644
index 0000000..ac143c6
Binary files /dev/null and b/src/assets/image/support.gif differ
diff --git a/src/assets/image/team.gif b/src/assets/image/team.gif
new file mode 100644
index 0000000..311b936
Binary files /dev/null and b/src/assets/image/team.gif differ
diff --git a/src/assets/image/theft.png b/src/assets/image/theft.png
new file mode 100644
index 0000000..7b4d75c
Binary files /dev/null and b/src/assets/image/theft.png differ
diff --git a/src/assets/image/tick.png b/src/assets/image/tick.png
new file mode 100644
index 0000000..2667db7
Binary files /dev/null and b/src/assets/image/tick.png differ
diff --git a/src/assets/image/tick_small_circle.png b/src/assets/image/tick_small_circle.png
new file mode 100644
index 0000000..467265c
Binary files /dev/null and b/src/assets/image/tick_small_circle.png differ
diff --git a/src/assets/image/tollbooth.png b/src/assets/image/tollbooth.png
new file mode 100644
index 0000000..f6d4f05
Binary files /dev/null and b/src/assets/image/tollbooth.png differ
diff --git a/src/assets/image/totalVehicle.png b/src/assets/image/totalVehicle.png
new file mode 100644
index 0000000..845cb3f
Binary files /dev/null and b/src/assets/image/totalVehicle.png differ
diff --git a/src/assets/image/totalVehicle_running.png b/src/assets/image/totalVehicle_running.png
new file mode 100644
index 0000000..56f3d2f
Binary files /dev/null and b/src/assets/image/totalVehicle_running.png differ
diff --git a/src/assets/image/track_slide_1.jpg b/src/assets/image/track_slide_1.jpg
new file mode 100644
index 0000000..271ba80
Binary files /dev/null and b/src/assets/image/track_slide_1.jpg differ
diff --git a/src/assets/image/track_slide_2.jpg b/src/assets/image/track_slide_2.jpg
new file mode 100644
index 0000000..d31c50a
Binary files /dev/null and b/src/assets/image/track_slide_2.jpg differ
diff --git a/src/assets/image/track_slide_3.jpg b/src/assets/image/track_slide_3.jpg
new file mode 100644
index 0000000..7bb2346
Binary files /dev/null and b/src/assets/image/track_slide_3.jpg differ
diff --git a/src/assets/image/track_slide_4.jpg b/src/assets/image/track_slide_4.jpg
new file mode 100644
index 0000000..ea62b38
Binary files /dev/null and b/src/assets/image/track_slide_4.jpg differ
diff --git a/src/assets/image/track_slide_5.jpg b/src/assets/image/track_slide_5.jpg
new file mode 100644
index 0000000..00bac6c
Binary files /dev/null and b/src/assets/image/track_slide_5.jpg differ
diff --git a/src/assets/image/track_slide_6.jpg b/src/assets/image/track_slide_6.jpg
new file mode 100644
index 0000000..2d42bb6
Binary files /dev/null and b/src/assets/image/track_slide_6.jpg differ
diff --git a/src/assets/image/tractor_blue.png b/src/assets/image/tractor_blue.png
new file mode 100644
index 0000000..bc67c68
Binary files /dev/null and b/src/assets/image/tractor_blue.png differ
diff --git a/src/assets/image/tractor_green.png b/src/assets/image/tractor_green.png
new file mode 100644
index 0000000..df971b5
Binary files /dev/null and b/src/assets/image/tractor_green.png differ
diff --git a/src/assets/image/tractor_red.png b/src/assets/image/tractor_red.png
new file mode 100644
index 0000000..ff3ba7b
Binary files /dev/null and b/src/assets/image/tractor_red.png differ
diff --git a/src/assets/image/tractor_red_1.png b/src/assets/image/tractor_red_1.png
new file mode 100644
index 0000000..3cc65e3
Binary files /dev/null and b/src/assets/image/tractor_red_1.png differ
diff --git a/src/assets/image/tractor_yellow.png b/src/assets/image/tractor_yellow.png
new file mode 100644
index 0000000..e2f10ba
Binary files /dev/null and b/src/assets/image/tractor_yellow.png differ
diff --git a/src/assets/image/tractor_yellow_1.png b/src/assets/image/tractor_yellow_1.png
new file mode 100644
index 0000000..ecc1f9e
Binary files /dev/null and b/src/assets/image/tractor_yellow_1.png differ
diff --git a/src/assets/image/trial.png b/src/assets/image/trial.png
new file mode 100644
index 0000000..aabd456
Binary files /dev/null and b/src/assets/image/trial.png differ
diff --git a/src/assets/image/truck.png b/src/assets/image/truck.png
new file mode 100644
index 0000000..5245a7d
Binary files /dev/null and b/src/assets/image/truck.png differ
diff --git a/src/assets/image/truck_1.png b/src/assets/image/truck_1.png
new file mode 100644
index 0000000..1dac1cc
Binary files /dev/null and b/src/assets/image/truck_1.png differ
diff --git a/src/assets/image/trucktracking.png b/src/assets/image/trucktracking.png
new file mode 100644
index 0000000..a0e0083
Binary files /dev/null and b/src/assets/image/trucktracking.png differ
diff --git a/src/assets/image/trygif.gif b/src/assets/image/trygif.gif
new file mode 100644
index 0000000..c13b030
Binary files /dev/null and b/src/assets/image/trygif.gif differ
diff --git a/src/assets/image/trygif2.gif b/src/assets/image/trygif2.gif
new file mode 100644
index 0000000..0f59730
Binary files /dev/null and b/src/assets/image/trygif2.gif differ
diff --git a/src/assets/image/tuxpi.com.1512025965.jpg b/src/assets/image/tuxpi.com.1512025965.jpg
new file mode 100644
index 0000000..37e1926
Binary files /dev/null and b/src/assets/image/tuxpi.com.1512025965.jpg differ
diff --git a/src/assets/image/under.gif b/src/assets/image/under.gif
new file mode 100644
index 0000000..27e9ba1
Binary files /dev/null and b/src/assets/image/under.gif differ
diff --git a/src/assets/image/us.jpg b/src/assets/image/us.jpg
new file mode 100644
index 0000000..b61d075
Binary files /dev/null and b/src/assets/image/us.jpg differ
diff --git a/src/assets/image/user.png b/src/assets/image/user.png
new file mode 100644
index 0000000..b65c5ce
Binary files /dev/null and b/src/assets/image/user.png differ
diff --git a/src/assets/image/user_b.png b/src/assets/image/user_b.png
new file mode 100644
index 0000000..a921b03
Binary files /dev/null and b/src/assets/image/user_b.png differ
diff --git a/src/assets/image/user_g.png b/src/assets/image/user_g.png
new file mode 100644
index 0000000..3ead64f
Binary files /dev/null and b/src/assets/image/user_g.png differ
diff --git a/src/assets/image/user_permission.png b/src/assets/image/user_permission.png
new file mode 100644
index 0000000..8ebb301
Binary files /dev/null and b/src/assets/image/user_permission.png differ
diff --git a/src/assets/image/user_r.png b/src/assets/image/user_r.png
new file mode 100644
index 0000000..2ec94fe
Binary files /dev/null and b/src/assets/image/user_r.png differ
diff --git a/src/assets/image/user_y.png b/src/assets/image/user_y.png
new file mode 100644
index 0000000..97d3483
Binary files /dev/null and b/src/assets/image/user_y.png differ
diff --git a/src/assets/image/vehicals1.png b/src/assets/image/vehicals1.png
new file mode 100644
index 0000000..e724c0e
Binary files /dev/null and b/src/assets/image/vehicals1.png differ
diff --git a/src/assets/image/vibration.png b/src/assets/image/vibration.png
new file mode 100644
index 0000000..13e7048
Binary files /dev/null and b/src/assets/image/vibration.png differ
diff --git a/src/assets/image/working.png b/src/assets/image/working.png
new file mode 100644
index 0000000..c274e90
Binary files /dev/null and b/src/assets/image/working.png differ
diff --git a/src/assets/image/working_1.png b/src/assets/image/working_1.png
new file mode 100644
index 0000000..0d1bb83
Binary files /dev/null and b/src/assets/image/working_1.png differ
diff --git a/src/assets/images/Searchs_002.png b/src/assets/images/Searchs_002.png
new file mode 100644
index 0000000..03edb04
Binary files /dev/null and b/src/assets/images/Searchs_002.png differ
diff --git a/src/assets/images/androidLink.png b/src/assets/images/androidLink.png
new file mode 100644
index 0000000..9f56d46
Binary files /dev/null and b/src/assets/images/androidLink.png differ
diff --git a/src/assets/images/app-store-download.png b/src/assets/images/app-store-download.png
new file mode 100644
index 0000000..2551c19
Binary files /dev/null and b/src/assets/images/app-store-download.png differ
diff --git a/src/assets/images/appStore.png b/src/assets/images/appStore.png
new file mode 100644
index 0000000..a6b1348
Binary files /dev/null and b/src/assets/images/appStore.png differ
diff --git a/src/assets/images/expenseComp/automotive.png b/src/assets/images/expenseComp/automotive.png
new file mode 100644
index 0000000..50d41e0
Binary files /dev/null and b/src/assets/images/expenseComp/automotive.png differ
diff --git a/src/assets/images/expenseComp/bed.png b/src/assets/images/expenseComp/bed.png
new file mode 100644
index 0000000..9063b7f
Binary files /dev/null and b/src/assets/images/expenseComp/bed.png differ
diff --git a/src/assets/images/expenseComp/cash.png b/src/assets/images/expenseComp/cash.png
new file mode 100644
index 0000000..3d01c57
Binary files /dev/null and b/src/assets/images/expenseComp/cash.png differ
diff --git a/src/assets/images/expenseComp/fork.png b/src/assets/images/expenseComp/fork.png
new file mode 100644
index 0000000..cef4473
Binary files /dev/null and b/src/assets/images/expenseComp/fork.png differ
diff --git a/src/assets/images/expenseComp/fuel.png b/src/assets/images/expenseComp/fuel.png
new file mode 100644
index 0000000..4c1e5ad
Binary files /dev/null and b/src/assets/images/expenseComp/fuel.png differ
diff --git a/src/assets/images/expenseComp/money.png b/src/assets/images/expenseComp/money.png
new file mode 100644
index 0000000..2e46209
Binary files /dev/null and b/src/assets/images/expenseComp/money.png differ
diff --git a/src/assets/images/expenseComp/order.png b/src/assets/images/expenseComp/order.png
new file mode 100644
index 0000000..181d355
Binary files /dev/null and b/src/assets/images/expenseComp/order.png differ
diff --git a/src/assets/images/expenseComp/permit.png b/src/assets/images/expenseComp/permit.png
new file mode 100644
index 0000000..c825e77
Binary files /dev/null and b/src/assets/images/expenseComp/permit.png differ
diff --git a/src/assets/images/expenseComp/phone.png b/src/assets/images/expenseComp/phone.png
new file mode 100644
index 0000000..e496117
Binary files /dev/null and b/src/assets/images/expenseComp/phone.png differ
diff --git a/src/assets/images/expenseComp/plane.png b/src/assets/images/expenseComp/plane.png
new file mode 100644
index 0000000..1833137
Binary files /dev/null and b/src/assets/images/expenseComp/plane.png differ
diff --git a/src/assets/images/expenseComp/policeman.png b/src/assets/images/expenseComp/policeman.png
new file mode 100644
index 0000000..9cc3e9f
Binary files /dev/null and b/src/assets/images/expenseComp/policeman.png differ
diff --git a/src/assets/images/expenseComp/toll-road.png b/src/assets/images/expenseComp/toll-road.png
new file mode 100644
index 0000000..c464a2c
Binary files /dev/null and b/src/assets/images/expenseComp/toll-road.png differ
diff --git a/src/assets/images/expenseComp/wheel.png b/src/assets/images/expenseComp/wheel.png
new file mode 100644
index 0000000..1f40db3
Binary files /dev/null and b/src/assets/images/expenseComp/wheel.png differ
diff --git a/src/assets/images/expenseComp/workshop.png b/src/assets/images/expenseComp/workshop.png
new file mode 100644
index 0000000..57672d1
Binary files /dev/null and b/src/assets/images/expenseComp/workshop.png differ
diff --git a/src/assets/images/f_logo.jpg b/src/assets/images/f_logo.jpg
new file mode 100644
index 0000000..e6e9d0e
Binary files /dev/null and b/src/assets/images/f_logo.jpg differ
diff --git a/src/assets/images/gpswale.png b/src/assets/images/gpswale.png
new file mode 100644
index 0000000..580cdc4
Binary files /dev/null and b/src/assets/images/gpswale.png differ
diff --git a/src/assets/images/iosLink.png b/src/assets/images/iosLink.png
new file mode 100644
index 0000000..2551c19
Binary files /dev/null and b/src/assets/images/iosLink.png differ
diff --git a/src/assets/images/liveTrackIcons/Stamp.png b/src/assets/images/liveTrackIcons/Stamp.png
new file mode 100644
index 0000000..6a5df07
Binary files /dev/null and b/src/assets/images/liveTrackIcons/Stamp.png differ
diff --git a/src/assets/images/liveTrackIcons/ambulance.jpeg b/src/assets/images/liveTrackIcons/ambulance.jpeg
new file mode 100644
index 0000000..2a18621
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ambulance.jpeg differ
diff --git a/src/assets/images/liveTrackIcons/ambulance_b.png b/src/assets/images/liveTrackIcons/ambulance_b.png
new file mode 100644
index 0000000..f5bc32a
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ambulance_b.png differ
diff --git a/src/assets/images/liveTrackIcons/ambulance_g.png b/src/assets/images/liveTrackIcons/ambulance_g.png
new file mode 100644
index 0000000..e3c4b3f
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ambulance_g.png differ
diff --git a/src/assets/images/liveTrackIcons/ambulance_r.png b/src/assets/images/liveTrackIcons/ambulance_r.png
new file mode 100644
index 0000000..f0a3f6d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ambulance_r.png differ
diff --git a/src/assets/images/liveTrackIcons/ambulance_y.png b/src/assets/images/liveTrackIcons/ambulance_y.png
new file mode 100644
index 0000000..8b23ff5
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ambulance_y.png differ
diff --git a/src/assets/images/liveTrackIcons/building.jpg b/src/assets/images/liveTrackIcons/building.jpg
new file mode 100644
index 0000000..258789b
Binary files /dev/null and b/src/assets/images/liveTrackIcons/building.jpg differ
diff --git a/src/assets/images/liveTrackIcons/car-door.png b/src/assets/images/liveTrackIcons/car-door.png
new file mode 100644
index 0000000..94073c3
Binary files /dev/null and b/src/assets/images/liveTrackIcons/car-door.png differ
diff --git a/src/assets/images/liveTrackIcons/ibike.png b/src/assets/images/liveTrackIcons/ibike.png
new file mode 100644
index 0000000..82ec402
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ibike.png differ
diff --git a/src/assets/images/liveTrackIcons/ibus.png b/src/assets/images/liveTrackIcons/ibus.png
new file mode 100644
index 0000000..dbe879d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ibus.png differ
diff --git a/src/assets/images/liveTrackIcons/icar.png b/src/assets/images/liveTrackIcons/icar.png
new file mode 100644
index 0000000..9681f11
Binary files /dev/null and b/src/assets/images/liveTrackIcons/icar.png differ
diff --git a/src/assets/images/liveTrackIcons/icar_51.png b/src/assets/images/liveTrackIcons/icar_51.png
new file mode 100644
index 0000000..6af7557
Binary files /dev/null and b/src/assets/images/liveTrackIcons/icar_51.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/idling_bike.png b/src/assets/images/liveTrackIcons/iconsss/idling_bike.png
new file mode 100644
index 0000000..82ec402
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/idling_bike.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/idling_bus.png b/src/assets/images/liveTrackIcons/iconsss/idling_bus.png
new file mode 100644
index 0000000..dbe879d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/idling_bus.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/idling_car.png b/src/assets/images/liveTrackIcons/iconsss/idling_car.png
new file mode 100644
index 0000000..6af7557
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/idling_car.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/idling_truck.png b/src/assets/images/liveTrackIcons/iconsss/idling_truck.png
new file mode 100644
index 0000000..0173cb4
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/idling_truck.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/outofreach_bike.png b/src/assets/images/liveTrackIcons/iconsss/outofreach_bike.png
new file mode 100644
index 0000000..6400ed8
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/outofreach_bike.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/outofreach_bus.png b/src/assets/images/liveTrackIcons/iconsss/outofreach_bus.png
new file mode 100644
index 0000000..75a3fb3
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/outofreach_bus.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/outofreach_car.png b/src/assets/images/liveTrackIcons/iconsss/outofreach_car.png
new file mode 100644
index 0000000..8ac7f7d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/outofreach_car.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/outofreach_truck.png b/src/assets/images/liveTrackIcons/iconsss/outofreach_truck.png
new file mode 100644
index 0000000..ab5d0ef
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/outofreach_truck.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/running_bike.png b/src/assets/images/liveTrackIcons/iconsss/running_bike.png
new file mode 100644
index 0000000..6a0c591
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/running_bike.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/running_bus.png b/src/assets/images/liveTrackIcons/iconsss/running_bus.png
new file mode 100644
index 0000000..78231c3
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/running_bus.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/running_car.png b/src/assets/images/liveTrackIcons/iconsss/running_car.png
new file mode 100644
index 0000000..0f74a8c
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/running_car.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/running_truck.png b/src/assets/images/liveTrackIcons/iconsss/running_truck.png
new file mode 100644
index 0000000..6f245a9
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/running_truck.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/stopped_bike.png b/src/assets/images/liveTrackIcons/iconsss/stopped_bike.png
new file mode 100644
index 0000000..7ee8dfc
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/stopped_bike.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/stopped_bus.png b/src/assets/images/liveTrackIcons/iconsss/stopped_bus.png
new file mode 100644
index 0000000..cde3411
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/stopped_bus.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/stopped_car.png b/src/assets/images/liveTrackIcons/iconsss/stopped_car.png
new file mode 100644
index 0000000..0d4f3f7
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/stopped_car.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/stopped_car_1.png b/src/assets/images/liveTrackIcons/iconsss/stopped_car_1.png
new file mode 100644
index 0000000..4c2cb94
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/stopped_car_1.png differ
diff --git a/src/assets/images/liveTrackIcons/iconsss/stopped_truck.png b/src/assets/images/liveTrackIcons/iconsss/stopped_truck.png
new file mode 100644
index 0000000..1af397d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/iconsss/stopped_truck.png differ
diff --git a/src/assets/images/liveTrackIcons/idlingjcb.png b/src/assets/images/liveTrackIcons/idlingjcb.png
new file mode 100644
index 0000000..3c97973
Binary files /dev/null and b/src/assets/images/liveTrackIcons/idlingjcb.png differ
diff --git a/src/assets/images/liveTrackIcons/itractor.png b/src/assets/images/liveTrackIcons/itractor.png
new file mode 100644
index 0000000..e2f10ba
Binary files /dev/null and b/src/assets/images/liveTrackIcons/itractor.png differ
diff --git a/src/assets/images/liveTrackIcons/itruck.png b/src/assets/images/liveTrackIcons/itruck.png
new file mode 100644
index 0000000..5457199
Binary files /dev/null and b/src/assets/images/liveTrackIcons/itruck.png differ
diff --git a/src/assets/images/liveTrackIcons/itruck27j.png b/src/assets/images/liveTrackIcons/itruck27j.png
new file mode 100644
index 0000000..1209025
Binary files /dev/null and b/src/assets/images/liveTrackIcons/itruck27j.png differ
diff --git a/src/assets/images/liveTrackIcons/itruck_1.png b/src/assets/images/liveTrackIcons/itruck_1.png
new file mode 100644
index 0000000..0173cb4
Binary files /dev/null and b/src/assets/images/liveTrackIcons/itruck_1.png differ
diff --git a/src/assets/images/liveTrackIcons/itruck_old.png b/src/assets/images/liveTrackIcons/itruck_old.png
new file mode 100644
index 0000000..d1bac6f
Binary files /dev/null and b/src/assets/images/liveTrackIcons/itruck_old.png differ
diff --git a/src/assets/images/liveTrackIcons/location(background).jpg b/src/assets/images/liveTrackIcons/location(background).jpg
new file mode 100644
index 0000000..620b7b7
Binary files /dev/null and b/src/assets/images/liveTrackIcons/location(background).jpg differ
diff --git a/src/assets/images/liveTrackIcons/no gps fixjcb.png b/src/assets/images/liveTrackIcons/no gps fixjcb.png
new file mode 100644
index 0000000..76a43f6
Binary files /dev/null and b/src/assets/images/liveTrackIcons/no gps fixjcb.png differ
diff --git a/src/assets/images/liveTrackIcons/noImageAvailableIcon.jpg b/src/assets/images/liveTrackIcons/noImageAvailableIcon.jpg
new file mode 100644
index 0000000..1634fd6
Binary files /dev/null and b/src/assets/images/liveTrackIcons/noImageAvailableIcon.jpg differ
diff --git a/src/assets/images/liveTrackIcons/noImageAvailableIcon1.gif b/src/assets/images/liveTrackIcons/noImageAvailableIcon1.gif
new file mode 100644
index 0000000..c20d667
Binary files /dev/null and b/src/assets/images/liveTrackIcons/noImageAvailableIcon1.gif differ
diff --git a/src/assets/images/liveTrackIcons/obike.png b/src/assets/images/liveTrackIcons/obike.png
new file mode 100644
index 0000000..6400ed8
Binary files /dev/null and b/src/assets/images/liveTrackIcons/obike.png differ
diff --git a/src/assets/images/liveTrackIcons/obus.png b/src/assets/images/liveTrackIcons/obus.png
new file mode 100644
index 0000000..75a3fb3
Binary files /dev/null and b/src/assets/images/liveTrackIcons/obus.png differ
diff --git a/src/assets/images/liveTrackIcons/ocar-51.png b/src/assets/images/liveTrackIcons/ocar-51.png
new file mode 100644
index 0000000..8ac7f7d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ocar-51.png differ
diff --git a/src/assets/images/liveTrackIcons/ocar.png b/src/assets/images/liveTrackIcons/ocar.png
new file mode 100644
index 0000000..6cb34ad
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ocar.png differ
diff --git a/src/assets/images/liveTrackIcons/ol.png b/src/assets/images/liveTrackIcons/ol.png
new file mode 100644
index 0000000..1ebc4c9
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ol.png differ
diff --git a/src/assets/images/liveTrackIcons/otractor.png b/src/assets/images/liveTrackIcons/otractor.png
new file mode 100644
index 0000000..bc67c68
Binary files /dev/null and b/src/assets/images/liveTrackIcons/otractor.png differ
diff --git a/src/assets/images/liveTrackIcons/otruck.png b/src/assets/images/liveTrackIcons/otruck.png
new file mode 100644
index 0000000..377c475
Binary files /dev/null and b/src/assets/images/liveTrackIcons/otruck.png differ
diff --git a/src/assets/images/liveTrackIcons/otruck27j.png b/src/assets/images/liveTrackIcons/otruck27j.png
new file mode 100644
index 0000000..af7d286
Binary files /dev/null and b/src/assets/images/liveTrackIcons/otruck27j.png differ
diff --git a/src/assets/images/liveTrackIcons/otruck_1.png b/src/assets/images/liveTrackIcons/otruck_1.png
new file mode 100644
index 0000000..ab5d0ef
Binary files /dev/null and b/src/assets/images/liveTrackIcons/otruck_1.png differ
diff --git a/src/assets/images/liveTrackIcons/ourjcb.png b/src/assets/images/liveTrackIcons/ourjcb.png
new file mode 100644
index 0000000..3066e76
Binary files /dev/null and b/src/assets/images/liveTrackIcons/ourjcb.png differ
diff --git a/src/assets/images/liveTrackIcons/photo-1564536455125-4bd12fb676c3.jpg b/src/assets/images/liveTrackIcons/photo-1564536455125-4bd12fb676c3.jpg
new file mode 100644
index 0000000..bb3e604
Binary files /dev/null and b/src/assets/images/liveTrackIcons/photo-1564536455125-4bd12fb676c3.jpg differ
diff --git a/src/assets/images/liveTrackIcons/photo-1633409361618-c73427e4e206.jpg b/src/assets/images/liveTrackIcons/photo-1633409361618-c73427e4e206.jpg
new file mode 100644
index 0000000..091f689
Binary files /dev/null and b/src/assets/images/liveTrackIcons/photo-1633409361618-c73427e4e206.jpg differ
diff --git a/src/assets/images/liveTrackIcons/photo-1638049846933-10f57e4216ca.jpg b/src/assets/images/liveTrackIcons/photo-1638049846933-10f57e4216ca.jpg
new file mode 100644
index 0000000..9c219d6
Binary files /dev/null and b/src/assets/images/liveTrackIcons/photo-1638049846933-10f57e4216ca.jpg differ
diff --git a/src/assets/images/liveTrackIcons/rbike.png b/src/assets/images/liveTrackIcons/rbike.png
new file mode 100644
index 0000000..6a0c591
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rbike.png differ
diff --git a/src/assets/images/liveTrackIcons/rbus.png b/src/assets/images/liveTrackIcons/rbus.png
new file mode 100644
index 0000000..78231c3
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rbus.png differ
diff --git a/src/assets/images/liveTrackIcons/rcar.png b/src/assets/images/liveTrackIcons/rcar.png
new file mode 100644
index 0000000..e6ab663
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rcar.png differ
diff --git a/src/assets/images/liveTrackIcons/rickshaw_b.png b/src/assets/images/liveTrackIcons/rickshaw_b.png
new file mode 100644
index 0000000..48c6461
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rickshaw_b.png differ
diff --git a/src/assets/images/liveTrackIcons/rickshaw_e.png b/src/assets/images/liveTrackIcons/rickshaw_e.png
new file mode 100644
index 0000000..e2eff31
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rickshaw_e.png differ
diff --git a/src/assets/images/liveTrackIcons/rickshaw_g.png b/src/assets/images/liveTrackIcons/rickshaw_g.png
new file mode 100644
index 0000000..ede185f
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rickshaw_g.png differ
diff --git a/src/assets/images/liveTrackIcons/rickshaw_r.png b/src/assets/images/liveTrackIcons/rickshaw_r.png
new file mode 100644
index 0000000..c3d5e72
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rickshaw_r.png differ
diff --git a/src/assets/images/liveTrackIcons/rickshaw_y.png b/src/assets/images/liveTrackIcons/rickshaw_y.png
new file mode 100644
index 0000000..7e39447
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rickshaw_y.png differ
diff --git a/src/assets/images/liveTrackIcons/rtractor.png b/src/assets/images/liveTrackIcons/rtractor.png
new file mode 100644
index 0000000..df971b5
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rtractor.png differ
diff --git a/src/assets/images/liveTrackIcons/rtruck.png b/src/assets/images/liveTrackIcons/rtruck.png
new file mode 100644
index 0000000..db7d11d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rtruck.png differ
diff --git a/src/assets/images/liveTrackIcons/rtruck_27j.png b/src/assets/images/liveTrackIcons/rtruck_27j.png
new file mode 100644
index 0000000..3d521c0
Binary files /dev/null and b/src/assets/images/liveTrackIcons/rtruck_27j.png differ
diff --git a/src/assets/images/liveTrackIcons/runningjcb.png b/src/assets/images/liveTrackIcons/runningjcb.png
new file mode 100644
index 0000000..4c4fa3e
Binary files /dev/null and b/src/assets/images/liveTrackIcons/runningjcb.png differ
diff --git a/src/assets/images/liveTrackIcons/sbike.png b/src/assets/images/liveTrackIcons/sbike.png
new file mode 100644
index 0000000..7ee8dfc
Binary files /dev/null and b/src/assets/images/liveTrackIcons/sbike.png differ
diff --git a/src/assets/images/liveTrackIcons/sbus.png b/src/assets/images/liveTrackIcons/sbus.png
new file mode 100644
index 0000000..cde3411
Binary files /dev/null and b/src/assets/images/liveTrackIcons/sbus.png differ
diff --git a/src/assets/images/liveTrackIcons/scar.png b/src/assets/images/liveTrackIcons/scar.png
new file mode 100644
index 0000000..b649e58
Binary files /dev/null and b/src/assets/images/liveTrackIcons/scar.png differ
diff --git a/src/assets/images/liveTrackIcons/scar_51.png b/src/assets/images/liveTrackIcons/scar_51.png
new file mode 100644
index 0000000..0d4f3f7
Binary files /dev/null and b/src/assets/images/liveTrackIcons/scar_51.png differ
diff --git a/src/assets/images/liveTrackIcons/speed.jpg b/src/assets/images/liveTrackIcons/speed.jpg
new file mode 100644
index 0000000..9ff2f64
Binary files /dev/null and b/src/assets/images/liveTrackIcons/speed.jpg differ
diff --git a/src/assets/images/liveTrackIcons/stamp.jpeg b/src/assets/images/liveTrackIcons/stamp.jpeg
new file mode 100644
index 0000000..cbbfd22
Binary files /dev/null and b/src/assets/images/liveTrackIcons/stamp.jpeg differ
diff --git a/src/assets/images/liveTrackIcons/stoppedjcb.png b/src/assets/images/liveTrackIcons/stoppedjcb.png
new file mode 100644
index 0000000..bf834a0
Binary files /dev/null and b/src/assets/images/liveTrackIcons/stoppedjcb.png differ
diff --git a/src/assets/images/liveTrackIcons/stractor.png b/src/assets/images/liveTrackIcons/stractor.png
new file mode 100644
index 0000000..ff3ba7b
Binary files /dev/null and b/src/assets/images/liveTrackIcons/stractor.png differ
diff --git a/src/assets/images/liveTrackIcons/struck.png b/src/assets/images/liveTrackIcons/struck.png
new file mode 100644
index 0000000..5a7f2fd
Binary files /dev/null and b/src/assets/images/liveTrackIcons/struck.png differ
diff --git a/src/assets/images/liveTrackIcons/struck27j.png b/src/assets/images/liveTrackIcons/struck27j.png
new file mode 100644
index 0000000..d921a2e
Binary files /dev/null and b/src/assets/images/liveTrackIcons/struck27j.png differ
diff --git a/src/assets/images/liveTrackIcons/struck_1.png b/src/assets/images/liveTrackIcons/struck_1.png
new file mode 100644
index 0000000..1af397d
Binary files /dev/null and b/src/assets/images/liveTrackIcons/struck_1.png differ
diff --git a/src/assets/images/liveTrackIcons/struck_old.png b/src/assets/images/liveTrackIcons/struck_old.png
new file mode 100644
index 0000000..5684744
Binary files /dev/null and b/src/assets/images/liveTrackIcons/struck_old.png differ
diff --git a/src/assets/images/liveTrackIcons/struck_old_1.png b/src/assets/images/liveTrackIcons/struck_old_1.png
new file mode 100644
index 0000000..f97fa03
Binary files /dev/null and b/src/assets/images/liveTrackIcons/struck_old_1.png differ
diff --git a/src/assets/images/liveTrackIcons/tempo_b.png b/src/assets/images/liveTrackIcons/tempo_b.png
new file mode 100644
index 0000000..654eeea
Binary files /dev/null and b/src/assets/images/liveTrackIcons/tempo_b.png differ
diff --git a/src/assets/images/liveTrackIcons/tempo_e.png b/src/assets/images/liveTrackIcons/tempo_e.png
new file mode 100644
index 0000000..1aa3ce4
Binary files /dev/null and b/src/assets/images/liveTrackIcons/tempo_e.png differ
diff --git a/src/assets/images/liveTrackIcons/tempo_g.png b/src/assets/images/liveTrackIcons/tempo_g.png
new file mode 100644
index 0000000..231b073
Binary files /dev/null and b/src/assets/images/liveTrackIcons/tempo_g.png differ
diff --git a/src/assets/images/liveTrackIcons/tempo_r.png b/src/assets/images/liveTrackIcons/tempo_r.png
new file mode 100644
index 0000000..e56a5bb
Binary files /dev/null and b/src/assets/images/liveTrackIcons/tempo_r.png differ
diff --git a/src/assets/images/liveTrackIcons/tempo_y.png b/src/assets/images/liveTrackIcons/tempo_y.png
new file mode 100644
index 0000000..8a8b43e
Binary files /dev/null and b/src/assets/images/liveTrackIcons/tempo_y.png differ
diff --git a/src/assets/images/liveTrackIcons/theft.png b/src/assets/images/liveTrackIcons/theft.png
new file mode 100644
index 0000000..7b4d75c
Binary files /dev/null and b/src/assets/images/liveTrackIcons/theft.png differ
diff --git a/src/assets/images/liveTrackIcons/user_b.png b/src/assets/images/liveTrackIcons/user_b.png
new file mode 100644
index 0000000..a921b03
Binary files /dev/null and b/src/assets/images/liveTrackIcons/user_b.png differ
diff --git a/src/assets/images/liveTrackIcons/user_g.png b/src/assets/images/liveTrackIcons/user_g.png
new file mode 100644
index 0000000..3ead64f
Binary files /dev/null and b/src/assets/images/liveTrackIcons/user_g.png differ
diff --git a/src/assets/images/liveTrackIcons/user_r.png b/src/assets/images/liveTrackIcons/user_r.png
new file mode 100644
index 0000000..2ec94fe
Binary files /dev/null and b/src/assets/images/liveTrackIcons/user_r.png differ
diff --git a/src/assets/images/liveTrackIcons/user_y.png b/src/assets/images/liveTrackIcons/user_y.png
new file mode 100644
index 0000000..97d3483
Binary files /dev/null and b/src/assets/images/liveTrackIcons/user_y.png differ
diff --git a/src/assets/images/m1.png b/src/assets/images/m1.png
new file mode 100644
index 0000000..329ff52
Binary files /dev/null and b/src/assets/images/m1.png differ
diff --git a/src/assets/images/m2.png b/src/assets/images/m2.png
new file mode 100644
index 0000000..b999cbc
Binary files /dev/null and b/src/assets/images/m2.png differ
diff --git a/src/assets/images/m3.png b/src/assets/images/m3.png
new file mode 100644
index 0000000..9f30b30
Binary files /dev/null and b/src/assets/images/m3.png differ
diff --git a/src/assets/images/m3_old1.png b/src/assets/images/m3_old1.png
new file mode 100644
index 0000000..c8b20a0
Binary files /dev/null and b/src/assets/images/m3_old1.png differ
diff --git a/src/assets/images/m3dsfcs.png b/src/assets/images/m3dsfcs.png
new file mode 100644
index 0000000..ec7d897
Binary files /dev/null and b/src/assets/images/m3dsfcs.png differ
diff --git a/src/assets/images/m4.png b/src/assets/images/m4.png
new file mode 100644
index 0000000..0d3f826
Binary files /dev/null and b/src/assets/images/m4.png differ
diff --git a/src/assets/images/m5.png b/src/assets/images/m5.png
new file mode 100644
index 0000000..61387d2
Binary files /dev/null and b/src/assets/images/m5.png differ
diff --git a/src/assets/images/timerGif.gif b/src/assets/images/timerGif.gif
new file mode 100644
index 0000000..951c7fe
Binary files /dev/null and b/src/assets/images/timerGif.gif differ
diff --git a/src/assets/images/tower/tower0.png b/src/assets/images/tower/tower0.png
new file mode 100644
index 0000000..1e1df68
Binary files /dev/null and b/src/assets/images/tower/tower0.png differ
diff --git a/src/assets/images/tower/tower10.png b/src/assets/images/tower/tower10.png
new file mode 100644
index 0000000..228b985
Binary files /dev/null and b/src/assets/images/tower/tower10.png differ
diff --git a/src/assets/images/tower/tower15.png b/src/assets/images/tower/tower15.png
new file mode 100644
index 0000000..4286709
Binary files /dev/null and b/src/assets/images/tower/tower15.png differ
diff --git a/src/assets/images/tower/tower20.png b/src/assets/images/tower/tower20.png
new file mode 100644
index 0000000..fee796f
Binary files /dev/null and b/src/assets/images/tower/tower20.png differ
diff --git a/src/assets/images/tower/tower25.png b/src/assets/images/tower/tower25.png
new file mode 100644
index 0000000..deef5d0
Binary files /dev/null and b/src/assets/images/tower/tower25.png differ
diff --git a/src/assets/images/tower/tower30.png b/src/assets/images/tower/tower30.png
new file mode 100644
index 0000000..269b043
Binary files /dev/null and b/src/assets/images/tower/tower30.png differ
diff --git a/src/assets/images/tower/tower5.png b/src/assets/images/tower/tower5.png
new file mode 100644
index 0000000..e4b02ad
Binary files /dev/null and b/src/assets/images/tower/tower5.png differ
diff --git a/src/assets/images/tower/tower7.png b/src/assets/images/tower/tower7.png
new file mode 100644
index 0000000..b487247
Binary files /dev/null and b/src/assets/images/tower/tower7.png differ
diff --git a/src/assets/images/track1.png b/src/assets/images/track1.png
new file mode 100644
index 0000000..5a5689f
Binary files /dev/null and b/src/assets/images/track1.png differ
diff --git a/src/assets/images/trackerImages/AIS140.png b/src/assets/images/trackerImages/AIS140.png
new file mode 100644
index 0000000..2e5cfe7
Binary files /dev/null and b/src/assets/images/trackerImages/AIS140.png differ
diff --git a/src/assets/js/SlidingMarker.min.js b/src/assets/js/SlidingMarker.min.js
new file mode 100644
index 0000000..957cf59
--- /dev/null
+++ b/src/assets/js/SlidingMarker.min.js
@@ -0,0 +1,4 @@
+/* SlidingMarker v0.2.8 19-02-2016 (C) 2015 Terikon Apps */
+
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define(["jquery","marker-animate"],b.bind(null,a)):"undefined"!=typeof module&&null!==module&&null!=module.exports?module.exports=b(a,require("jquery"),require("marker-animate")):a.SlidingMarker=b(a,a.jQuery)}(this,function(a,b){"use strict";b=b||{},b.extend=b.extend||function m(a){return Array.prototype.slice.call(arguments,1).forEach(function(b){if(b)for(var c in b)b[c]&&b[c].constructor===Object?a[c]&&a[c].constructor!==Object?a[c]=b[c]:(a[c]=a[c]||{},m(a[c],b[c])):a[c]=b[c]}),a};var c,d=google.maps.Marker,e=function(a,b,c){return null===a||void 0===a?void(window.cancelAnimationFrame?window.cancelAnimationFrame(this.AT_animationHandler):clearTimeout(this.AT_animationHandler)):void google.maps.Marker.prototype.animateTo.apply(this,arguments)},f={easing:"easeInOutQuint",duration:1e3,animateFunctionAdapter:function(a,b,d,f){if(!c){if(!google.maps.Marker.prototype.animateTo)throw new Error("Please either reference markerAnimate.js, or provide an alternative animateFunctionAdapter");c=e}c.call(a,b,{easing:d,duration:f,complete:function(){}})}},g=function(a,b){function c(){}c.prototype=b.prototype,a.superClass_=b.prototype,a.prototype=new c,a.prototype.constructor=a},h=function(a,c){g(a,c);var d=c.prototype;b.extend(a.prototype,{_instance:null,originalSet:function(){return d.set.apply(this,arguments)},set:function(a,b){var c=this;c.originalSet.apply(c,arguments),"position"===a&&c instanceof l?c._setInstancePositionAnimated(b):c.originalSet.apply(c._instance,arguments)},_setInstancePositionAnimated:function(a){var b=this;if(!b._constructing)return a&&b._instance.getPosition()?void b.get("animateFunctionAdapter").call(null,b._instance,a,b.get("easing"),b.get("duration")):void(b._instance.getPosition()!==a&&b._instance.setPosition(a))},originalAddListener:function(){return d.addListener.apply(this,arguments)},addListener:function(a,b){var c="map_changed"===a?this._instance:i.call(this,a);return this.originalAddListener.apply(c,arguments)},map_changed:function(){},position_changed:function(){this._suppress_animation?delete this._suppress_animation:this._setInstancePositionAnimated(this.getPosition())}})},i=function(a){return a.endsWith("_changed")?this:this._instance},j=google.maps.event.addListener;google.maps.event.addListener=function(a,b,c){if(a instanceof l){var d="map_changed"===b?a._instance:i.call(a,b);return j.call(this,d,b,c)}return j.apply(this,arguments)};var k=google.maps.event.trigger;google.maps.event.trigger=function(a,b){if(a instanceof l){var c="map_changed"===b?a:i.call(a,b),d=[c].concat(Array.prototype.slice.call(arguments,1));return k.apply(this,d)}return k.apply(this,arguments)},String.prototype.endsWith=String.prototype.endsWith||function(a){return-1!==this.indexOf(a,this.length-a.length)};var l=function(a){a=b.extend({},f,a),this._instance=new d(a),this.animationPosition=null,this._constructing=!0,d.call(this,a),delete this._constructing,this.bindTo("animationPosition",this._instance,"position"),this.bindTo("anchorPoint",this._instance,"anchorPoint"),this.bindTo("internalPosition",this._instance,"internalPosition")};return h(l,d),b.extend(l.prototype,{getAnimationPosition:function(){return this.get("animationPosition")},setPositionNotAnimated:function(a){this._suppress_animation=!0,this.get("animateFunctionAdapter").call(null,this._instance,null),this.originalSet("position",a),this._instance.setPosition(a)},setDuration:function(a){this.set("duration",a)},getDuration:function(){return this.get("duration")},setEasing:function(a){this.set("easing",a)},getEasing:function(){return this.get("easing")}}),l.initializeGlobally=function(){google.maps.Marker=l},l});
+//# sourceMappingURL=SlidingMarker.min.js.map
\ No newline at end of file
diff --git a/src/assets/js/dot2.png b/src/assets/js/dot2.png
new file mode 100644
index 0000000..4c86b0f
Binary files /dev/null and b/src/assets/js/dot2.png differ
diff --git a/src/assets/js/infobox.js b/src/assets/js/infobox.js
new file mode 100644
index 0000000..b7d8f9e
--- /dev/null
+++ b/src/assets/js/infobox.js
@@ -0,0 +1,828 @@
+/**
+ * @name InfoBox
+ * @version 1.1.13 [March 19, 2014]
+ * @author Gary Little (inspired by proof-of-concept code from Pamela Fox of Google)
+ * @copyright Copyright 2010 Gary Little [gary at luxcentral.com]
+ * @fileoverview InfoBox extends the Google Maps JavaScript API V3 <tt>OverlayView</tt> class.
+ *  <p>
+ *  An InfoBox behaves like a <tt>google.maps.InfoWindow</tt>, but it supports several
+ *  additional properties for advanced styling. An InfoBox can also be used as a map label.
+ *  <p>
+ *  An InfoBox also fires the same events as a <tt>google.maps.InfoWindow</tt>.
+ */
+
+/*!
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*jslint browser:true */
+/*global google */
+
+/**
+ * @name InfoBoxOptions
+ * @class This class represents the optional parameter passed to the {@link InfoBox} constructor.
+ * @property {string|Node} content The content of the InfoBox (plain text or an HTML DOM node).
+ * @property {boolean} [disableAutoPan=false] Disable auto-pan on <tt>open</tt>.
+ * @property {number} maxWidth The maximum width (in pixels) of the InfoBox. Set to 0 if no maximum.
+ * @property {Size} pixelOffset The offset (in pixels) from the top left corner of the InfoBox
+ *  (or the bottom left corner if the <code>alignBottom</code> property is <code>true</code>)
+ *  to the map pixel corresponding to <tt>position</tt>.
+ * @property {LatLng} position The geographic location at which to display the InfoBox.
+ * @property {number} zIndex The CSS z-index style value for the InfoBox.
+ *  Note: This value overrides a zIndex setting specified in the <tt>boxStyle</tt> property.
+ * @property {string} [boxClass="infoBox"] The name of the CSS class defining the styles for the InfoBox container.
+ * @property {Object} [boxStyle] An object literal whose properties define specific CSS
+ *  style values to be applied to the InfoBox. Style values defined here override those that may
+ *  be defined in the <code>boxClass</code> style sheet. If this property is changed after the
+ *  InfoBox has been created, all previously set styles (except those defined in the style sheet)
+ *  are removed from the InfoBox before the new style values are applied.
+ * @property {string} closeBoxMargin The CSS margin style value for the close box.
+ *  The default is "2px" (a 2-pixel margin on all sides).
+ * @property {string} closeBoxURL The URL of the image representing the close box.
+ *  Note: The default is the URL for Google's standard close box.
+ *  Set this property to "" if no close box is required.
+ * @property {Size} infoBoxClearance Minimum offset (in pixels) from the InfoBox to the
+ *  map edge after an auto-pan.
+ * @property {boolean} [isHidden=false] Hide the InfoBox on <tt>open</tt>.
+ *  [Deprecated in favor of the <tt>visible</tt> property.]
+ * @property {boolean} [visible=true] Show the InfoBox on <tt>open</tt>.
+ * @property {boolean} alignBottom Align the bottom left corner of the InfoBox to the <code>position</code>
+ *  location (default is <tt>false</tt> which means that the top left corner of the InfoBox is aligned).
+ * @property {string} pane The pane where the InfoBox is to appear (default is "floatPane").
+ *  Set the pane to "mapPane" if the InfoBox is being used as a map label.
+ *  Valid pane names are the property names for the <tt>google.maps.MapPanes</tt> object.
+ * @property {boolean} enableEventPropagation Propagate mousedown, mousemove, mouseover, mouseout,
+ *  mouseup, click, dblclick, touchstart, touchend, touchmove, and contextmenu events in the InfoBox
+ *  (default is <tt>false</tt> to mimic the behavior of a <tt>google.maps.InfoWindow</tt>). Set
+ *  this property to <tt>true</tt> if the InfoBox is being used as a map label.
+ */
+
+/**
+ * Creates an InfoBox with the options specified in {@link InfoBoxOptions}.
+ *  Call <tt>InfoBox.open</tt> to add the box to the map.
+ * @constructor
+ * @param {InfoBoxOptions} [opt_opts]
+ */
+function InfoBox(opt_opts) {
+    
+      opt_opts = opt_opts || {};
+    
+      google.maps.OverlayView.apply(this, arguments);
+    
+      // Standard options (in common with google.maps.InfoWindow):
+      //
+      this.content_ = opt_opts.content || "";
+      this.disableAutoPan_ = opt_opts.disableAutoPan || false;
+      this.maxWidth_ = opt_opts.maxWidth || 0;
+      this.pixelOffset_ = opt_opts.pixelOffset || new google.maps.Size(0, 0);
+      this.position_ = opt_opts.position || new google.maps.LatLng(0, 0);
+      this.zIndex_ = opt_opts.zIndex || null;
+    
+      // Additional options (unique to InfoBox):
+      //
+      this.boxClass_ = opt_opts.boxClass || "infoBox";
+      this.boxStyle_ = opt_opts.boxStyle || {};
+      this.closeBoxMargin_ = opt_opts.closeBoxMargin || "2px";
+      this.closeBoxURL_ = opt_opts.closeBoxURL || "http://www.google.com/intl/en_us/mapfiles/close.gif";
+      if (opt_opts.closeBoxURL === "") {
+        this.closeBoxURL_ = "";
+      }
+      this.infoBoxClearance_ = opt_opts.infoBoxClearance || new google.maps.Size(1, 1);
+    
+      if (typeof opt_opts.visible === "undefined") {
+        if (typeof opt_opts.isHidden === "undefined") {
+          opt_opts.visible = true;
+        } else {
+          opt_opts.visible = !opt_opts.isHidden;
+        }
+      }
+      this.isHidden_ = !opt_opts.visible;
+    
+      this.alignBottom_ = opt_opts.alignBottom || false;
+      this.pane_ = opt_opts.pane || "floatPane";
+      this.enableEventPropagation_ = opt_opts.enableEventPropagation || false;
+    
+      this.div_ = null;
+      this.closeListener_ = null;
+      this.moveListener_ = null;
+      this.mapListener_ = null;
+      this.contextListener_ = null;
+      this.eventListeners_ = null;
+      this.fixedWidthSet_ = null;
+    }
+    
+    /* InfoBox extends OverlayView in the Google Maps API v3.
+     */
+    InfoBox.prototype = new google.maps.OverlayView();
+    
+    /**
+     * Creates the DIV representing the InfoBox.
+     * @private
+     */
+    InfoBox.prototype.createInfoBoxDiv_ = function () {
+    
+      var i;
+      var events;
+      var bw;
+      var me = this;
+    
+      // This handler prevents an event in the InfoBox from being passed on to the map.
+      //
+      var cancelHandler = function (e) {
+        e.cancelBubble = true;
+        if (e.stopPropagation) {
+          e.stopPropagation();
+        }
+      };
+    
+      // This handler ignores the current event in the InfoBox and conditionally prevents
+      // the event from being passed on to the map. It is used for the contextmenu event.
+      //
+      var ignoreHandler = function (e) {
+    
+        e.returnValue = false;
+    
+        if (e.preventDefault) {
+    
+          e.preventDefault();
+        }
+    
+        if (!me.enableEventPropagation_) {
+    
+          cancelHandler(e);
+        }
+      };
+    
+      if (!this.div_) {
+    
+        this.div_ = document.createElement("div");
+    
+        this.setBoxStyle_();
+    
+        if (typeof this.content_.nodeType === "undefined") {
+          this.div_.innerHTML = this.getCloseBoxImg_() + this.content_;
+        } else {
+          this.div_.innerHTML = this.getCloseBoxImg_();
+          this.div_.appendChild(this.content_);
+        }
+    
+        // Add the InfoBox DIV to the DOM
+        this.getPanes()[this.pane_].appendChild(this.div_);
+    
+        this.addClickHandler_();
+    
+        if (this.div_.style.width) {
+    
+          this.fixedWidthSet_ = true;
+    
+        } else {
+    
+          if (this.maxWidth_ !== 0 && this.div_.offsetWidth > this.maxWidth_) {
+    
+            this.div_.style.width = this.maxWidth_;
+            this.div_.style.overflow = "auto";
+            this.fixedWidthSet_ = true;
+    
+          } else { // The following code is needed to overcome problems with MSIE
+    
+            bw = this.getBoxWidths_();
+    
+            this.div_.style.width = (this.div_.offsetWidth - bw.left - bw.right) + "px";
+            this.fixedWidthSet_ = false;
+          }
+        }
+    
+        this.panBox_(this.disableAutoPan_);
+    
+        if (!this.enableEventPropagation_) {
+    
+          this.eventListeners_ = [];
+    
+          // Cancel event propagation.
+          //
+          // Note: mousemove not included (to resolve Issue 152)
+          events = ["mousedown", "mouseover", "mouseout", "mouseup",
+          "click", "dblclick", "touchstart", "touchend", "touchmove"];
+    
+          for (i = 0; i < events.length; i++) {
+    
+            this.eventListeners_.push(google.maps.event.addDomListener(this.div_, events[i], cancelHandler));
+          }
+          
+          // Workaround for Google bug that causes the cursor to change to a pointer
+          // when the mouse moves over a marker underneath InfoBox.
+          this.eventListeners_.push(google.maps.event.addDomListener(this.div_, "mouseover", function (e) {
+            this.style.cursor = "default";
+          }));
+        }
+    
+        this.contextListener_ = google.maps.event.addDomListener(this.div_, "contextmenu", ignoreHandler);
+    
+        /**
+         * This event is fired when the DIV containing the InfoBox's content is attached to the DOM.
+         * @name InfoBox#domready
+         * @event
+         */
+        google.maps.event.trigger(this, "domready");
+      }
+    };
+    
+    /**
+     * Returns the HTML <IMG> tag for the close box.
+     * @private
+     */
+    InfoBox.prototype.getCloseBoxImg_ = function () {
+    
+      var img = "";
+    
+      if (this.closeBoxURL_ !== "") {
+    
+        img  = "<img";
+        img += " src='" + this.closeBoxURL_ + "'";
+        img += " align=right"; // Do this because Opera chokes on style='float: right;'
+        img += " style='";
+        img += " position: relative;"; // Required by MSIE
+        img += " cursor: pointer;";
+        img += " margin: " + this.closeBoxMargin_ + ";";
+        img += "'>";
+      }
+    
+      return img;
+    };
+    
+    /**
+     * Adds the click handler to the InfoBox close box.
+     * @private
+     */
+    InfoBox.prototype.addClickHandler_ = function () {
+    
+      var closeBox;
+    
+      if (this.closeBoxURL_ !== "") {
+    
+        closeBox = this.div_.firstChild;
+        this.closeListener_ = google.maps.event.addDomListener(closeBox, "click", this.getCloseClickHandler_());
+    
+      } else {
+    
+        this.closeListener_ = null;
+      }
+    };
+    
+    /**
+     * Returns the function to call when the user clicks the close box of an InfoBox.
+     * @private
+     */
+    InfoBox.prototype.getCloseClickHandler_ = function () {
+    
+      var me = this;
+    
+      return function (e) {
+    
+        // 1.0.3 fix: Always prevent propagation of a close box click to the map:
+        e.cancelBubble = true;
+    
+        if (e.stopPropagation) {
+    
+          e.stopPropagation();
+        }
+    
+        /**
+         * This event is fired when the InfoBox's close box is clicked.
+         * @name InfoBox#closeclick
+         * @event
+         */
+        google.maps.event.trigger(me, "closeclick");
+    
+        me.close();
+      };
+    };
+    
+    /**
+     * Pans the map so that the InfoBox appears entirely within the map's visible area.
+     * @private
+     */
+    InfoBox.prototype.panBox_ = function (disablePan) {
+    
+      var map;
+      var bounds;
+      var xOffset = 0, yOffset = 0;
+    
+      if (!disablePan) {
+    
+        map = this.getMap();
+    
+        if (map instanceof google.maps.Map) { // Only pan if attached to map, not panorama
+    
+          if (!map.getBounds().contains(this.position_)) {
+          // Marker not in visible area of map, so set center
+          // of map to the marker position first.
+            map.setCenter(this.position_);
+          }
+    
+          bounds = map.getBounds();
+    
+          var mapDiv = map.getDiv();
+          var mapWidth = mapDiv.offsetWidth;
+          var mapHeight = mapDiv.offsetHeight;
+          var iwOffsetX = this.pixelOffset_.width;
+          var iwOffsetY = this.pixelOffset_.height;
+          var iwWidth = this.div_.offsetWidth;
+          var iwHeight = this.div_.offsetHeight;
+          var padX = this.infoBoxClearance_.width;
+          var padY = this.infoBoxClearance_.height;
+          var pixPosition = this.getProjection().fromLatLngToContainerPixel(this.position_);
+    
+          if (pixPosition.x < (-iwOffsetX + padX)) {
+            xOffset = pixPosition.x + iwOffsetX - padX;
+          } else if ((pixPosition.x + iwWidth + iwOffsetX + padX) > mapWidth) {
+            xOffset = pixPosition.x + iwWidth + iwOffsetX + padX - mapWidth;
+          }
+          if (this.alignBottom_) {
+            if (pixPosition.y < (-iwOffsetY + padY + iwHeight)) {
+              yOffset = pixPosition.y + iwOffsetY - padY - iwHeight;
+            } else if ((pixPosition.y + iwOffsetY + padY) > mapHeight) {
+              yOffset = pixPosition.y + iwOffsetY + padY - mapHeight;
+            }
+          } else {
+            if (pixPosition.y < (-iwOffsetY + padY)) {
+              yOffset = pixPosition.y + iwOffsetY - padY;
+            } else if ((pixPosition.y + iwHeight + iwOffsetY + padY) > mapHeight) {
+              yOffset = pixPosition.y + iwHeight + iwOffsetY + padY - mapHeight;
+            }
+          }
+    
+          if (!(xOffset === 0 && yOffset === 0)) {
+    
+            // Move the map to the shifted center.
+            //
+            var c = map.getCenter();
+            map.panBy(xOffset, yOffset);
+          }
+        }
+      }
+    };
+    
+    /**
+     * Sets the style of the InfoBox by setting the style sheet and applying
+     * other specific styles requested.
+     * @private
+     */
+    InfoBox.prototype.setBoxStyle_ = function () {
+    
+      var i, boxStyle;
+    
+      if (this.div_) {
+    
+        // Apply style values from the style sheet defined in the boxClass parameter:
+        this.div_.className = this.boxClass_;
+    
+        // Clear existing inline style values:
+        this.div_.style.cssText = "";
+    
+        // Apply style values defined in the boxStyle parameter:
+        boxStyle = this.boxStyle_;
+        for (i in boxStyle) {
+    
+          if (boxStyle.hasOwnProperty(i)) {
+    
+            this.div_.style[i] = boxStyle[i];
+          }
+        }
+    
+        // Fix for iOS disappearing InfoBox problem.
+        // See http://stackoverflow.com/questions/9229535/google-maps-markers-disappear-at-certain-zoom-level-only-on-iphone-ipad
+        this.div_.style.WebkitTransform = "translateZ(0)";
+    
+        // Fix up opacity style for benefit of MSIE:
+        //
+        if (typeof this.div_.style.opacity !== "undefined" && this.div_.style.opacity !== "") {
+          // See http://www.quirksmode.org/css/opacity.html
+          this.div_.style.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(Opacity=" + (this.div_.style.opacity * 100) + ")\"";
+          this.div_.style.filter = "alpha(opacity=" + (this.div_.style.opacity * 100) + ")";
+        }
+    
+        // Apply required styles:
+        //
+        this.div_.style.position = "absolute";
+        this.div_.style.visibility = 'hidden';
+        if (this.zIndex_ !== null) {
+    
+          this.div_.style.zIndex = this.zIndex_;
+        }
+      }
+    };
+    
+    /**
+     * Get the widths of the borders of the InfoBox.
+     * @private
+     * @return {Object} widths object (top, bottom left, right)
+     */
+    InfoBox.prototype.getBoxWidths_ = function () {
+    
+      var computedStyle;
+      var bw = {top: 0, bottom: 0, left: 0, right: 0};
+      var box = this.div_;
+    
+      if (document.defaultView && document.defaultView.getComputedStyle) {
+    
+        computedStyle = box.ownerDocument.defaultView.getComputedStyle(box, "");
+    
+        if (computedStyle) {
+    
+          // The computed styles are always in pixel units (good!)
+          bw.top = parseInt(computedStyle.borderTopWidth, 10) || 0;
+          bw.bottom = parseInt(computedStyle.borderBottomWidth, 10) || 0;
+          bw.left = parseInt(computedStyle.borderLeftWidth, 10) || 0;
+          bw.right = parseInt(computedStyle.borderRightWidth, 10) || 0;
+        }
+    
+      } else if (document.documentElement.currentStyle) { // MSIE
+    
+        if (box.currentStyle) {
+    
+          // The current styles may not be in pixel units, but assume they are (bad!)
+          bw.top = parseInt(box.currentStyle.borderTopWidth, 10) || 0;
+          bw.bottom = parseInt(box.currentStyle.borderBottomWidth, 10) || 0;
+          bw.left = parseInt(box.currentStyle.borderLeftWidth, 10) || 0;
+          bw.right = parseInt(box.currentStyle.borderRightWidth, 10) || 0;
+        }
+      }
+    
+      return bw;
+    };
+    
+    /**
+     * Invoked when <tt>close</tt> is called. Do not call it directly.
+     */
+    InfoBox.prototype.onRemove = function () {
+    
+      if (this.div_) {
+    
+        this.div_.parentNode.removeChild(this.div_);
+        this.div_ = null;
+      }
+    };
+    
+    /**
+     * Draws the InfoBox based on the current map projection and zoom level.
+     */
+    InfoBox.prototype.draw = function () {
+    
+      this.createInfoBoxDiv_();
+    
+      var pixPosition = this.getProjection().fromLatLngToDivPixel(this.position_);
+    
+      this.div_.style.left = (pixPosition.x + this.pixelOffset_.width) + "px";
+      
+      if (this.alignBottom_) {
+        this.div_.style.bottom = -(pixPosition.y + this.pixelOffset_.height) + "px";
+      } else {
+        this.div_.style.top = (pixPosition.y + this.pixelOffset_.height) + "px";
+      }
+    
+      if (this.isHidden_) {
+    
+        this.div_.style.visibility = "hidden";
+    
+      } else {
+    
+        this.div_.style.visibility = "visible";
+      }
+    };
+    
+    /**
+     * Sets the options for the InfoBox. Note that changes to the <tt>maxWidth</tt>,
+     *  <tt>closeBoxMargin</tt>, <tt>closeBoxURL</tt>, and <tt>enableEventPropagation</tt>
+     *  properties have no affect until the current InfoBox is <tt>close</tt>d and a new one
+     *  is <tt>open</tt>ed.
+     * @param {InfoBoxOptions} opt_opts
+     */
+    InfoBox.prototype.setOptions = function (opt_opts) {
+      if (typeof opt_opts.boxClass !== "undefined") { // Must be first
+    
+        this.boxClass_ = opt_opts.boxClass;
+        this.setBoxStyle_();
+      }
+      if (typeof opt_opts.boxStyle !== "undefined") { // Must be second
+    
+        this.boxStyle_ = opt_opts.boxStyle;
+        this.setBoxStyle_();
+      }
+      if (typeof opt_opts.content !== "undefined") {
+    
+        this.setContent(opt_opts.content);
+      }
+      if (typeof opt_opts.disableAutoPan !== "undefined") {
+    
+        this.disableAutoPan_ = opt_opts.disableAutoPan;
+      }
+      if (typeof opt_opts.maxWidth !== "undefined") {
+    
+        this.maxWidth_ = opt_opts.maxWidth;
+      }
+      if (typeof opt_opts.pixelOffset !== "undefined") {
+    
+        this.pixelOffset_ = opt_opts.pixelOffset;
+      }
+      if (typeof opt_opts.alignBottom !== "undefined") {
+    
+        this.alignBottom_ = opt_opts.alignBottom;
+      }
+      if (typeof opt_opts.position !== "undefined") {
+    
+        this.setPosition(opt_opts.position);
+      }
+      if (typeof opt_opts.zIndex !== "undefined") {
+    
+        this.setZIndex(opt_opts.zIndex);
+      }
+      if (typeof opt_opts.closeBoxMargin !== "undefined") {
+    
+        this.closeBoxMargin_ = opt_opts.closeBoxMargin;
+      }
+      if (typeof opt_opts.closeBoxURL !== "undefined") {
+    
+        this.closeBoxURL_ = opt_opts.closeBoxURL;
+      }
+      if (typeof opt_opts.infoBoxClearance !== "undefined") {
+    
+        this.infoBoxClearance_ = opt_opts.infoBoxClearance;
+      }
+      if (typeof opt_opts.isHidden !== "undefined") {
+    
+        this.isHidden_ = opt_opts.isHidden;
+      }
+      if (typeof opt_opts.visible !== "undefined") {
+    
+        this.isHidden_ = !opt_opts.visible;
+      }
+      if (typeof opt_opts.enableEventPropagation !== "undefined") {
+    
+        this.enableEventPropagation_ = opt_opts.enableEventPropagation;
+      }
+    
+      if (this.div_) {
+    
+        this.draw();
+      }
+    };
+    
+    /**
+     * Sets the content of the InfoBox.
+     *  The content can be plain text or an HTML DOM node.
+     * @param {string|Node} content
+     */
+    InfoBox.prototype.setContent = function (content) {
+      this.content_ = content;
+    
+      if (this.div_) {
+    
+        if (this.closeListener_) {
+    
+          google.maps.event.removeListener(this.closeListener_);
+          this.closeListener_ = null;
+        }
+    
+        // Odd code required to make things work with MSIE.
+        //
+        if (!this.fixedWidthSet_) {
+    
+          this.div_.style.width = "";
+        }
+    
+        if (typeof content.nodeType === "undefined") {
+          this.div_.innerHTML = this.getCloseBoxImg_() + content;
+        } else {
+          this.div_.innerHTML = this.getCloseBoxImg_();
+          this.div_.appendChild(content);
+        }
+    
+        // Perverse code required to make things work with MSIE.
+        // (Ensures the close box does, in fact, float to the right.)
+        //
+        if (!this.fixedWidthSet_) {
+          this.div_.style.width = this.div_.offsetWidth + "px";
+          if (typeof content.nodeType === "undefined") {
+            this.div_.innerHTML = this.getCloseBoxImg_() + content;
+          } else {
+            this.div_.innerHTML = this.getCloseBoxImg_();
+            this.div_.appendChild(content);
+          }
+        }
+    
+        this.addClickHandler_();
+      }
+    
+      /**
+       * This event is fired when the content of the InfoBox changes.
+       * @name InfoBox#content_changed
+       * @event
+       */
+      google.maps.event.trigger(this, "content_changed");
+    };
+    
+    /**
+     * Sets the geographic location of the InfoBox.
+     * @param {LatLng} latlng
+     */
+    InfoBox.prototype.setPosition = function (latlng) {
+    
+      this.position_ = latlng;
+    
+      if (this.div_) {
+    
+        this.draw();
+      }
+    
+      /**
+       * This event is fired when the position of the InfoBox changes.
+       * @name InfoBox#position_changed
+       * @event
+       */
+      google.maps.event.trigger(this, "position_changed");
+    };
+    
+    /**
+     * Sets the zIndex style for the InfoBox.
+     * @param {number} index
+     */
+    InfoBox.prototype.setZIndex = function (index) {
+    
+      this.zIndex_ = index;
+    
+      if (this.div_) {
+    
+        this.div_.style.zIndex = index;
+      }
+    
+      /**
+       * This event is fired when the zIndex of the InfoBox changes.
+       * @name InfoBox#zindex_changed
+       * @event
+       */
+      google.maps.event.trigger(this, "zindex_changed");
+    };
+    
+    /**
+     * Sets the visibility of the InfoBox.
+     * @param {boolean} isVisible
+     */
+    InfoBox.prototype.setVisible = function (isVisible) {
+    
+      this.isHidden_ = !isVisible;
+      if (this.div_) {
+        this.div_.style.visibility = (this.isHidden_ ? "hidden" : "visible");
+      }
+    };
+    
+    /**
+     * Returns the content of the InfoBox.
+     * @returns {string}
+     */
+    InfoBox.prototype.getContent = function () {
+    
+      return this.content_;
+    };
+    
+    /**
+     * Returns the geographic location of the InfoBox.
+     * @returns {LatLng}
+     */
+    InfoBox.prototype.getPosition = function () {
+    
+      return this.position_;
+    };
+    
+    /**
+     * Returns the zIndex for the InfoBox.
+     * @returns {number}
+     */
+    InfoBox.prototype.getZIndex = function () {
+    
+      return this.zIndex_;
+    };
+    
+    /**
+     * Returns a flag indicating whether the InfoBox is visible.
+     * @returns {boolean}
+     */
+    InfoBox.prototype.getVisible = function () {
+    
+      var isVisible;
+    
+      if ((typeof this.getMap() === "undefined") || (this.getMap() === null)) {
+        isVisible = false;
+      } else {
+        isVisible = !this.isHidden_;
+      }
+      return isVisible;
+    };
+    
+    /**
+     * Shows the InfoBox. [Deprecated; use <tt>setVisible</tt> instead.]
+     */
+    InfoBox.prototype.show = function () {
+    
+      this.isHidden_ = false;
+      if (this.div_) {
+        this.div_.style.visibility = "visible";
+      }
+    };
+    
+    /**
+     * Hides the InfoBox. [Deprecated; use <tt>setVisible</tt> instead.]
+     */
+    InfoBox.prototype.hide = function () {
+    
+      this.isHidden_ = true;
+      if (this.div_) {
+        this.div_.style.visibility = "hidden";
+      }
+    };
+    
+    /**
+     * Adds the InfoBox to the specified map or Street View panorama. If <tt>anchor</tt>
+     *  (usually a <tt>google.maps.Marker</tt>) is specified, the position
+     *  of the InfoBox is set to the position of the <tt>anchor</tt>. If the
+     *  anchor is dragged to a new location, the InfoBox moves as well.
+     * @param {Map|StreetViewPanorama} map
+     * @param {MVCObject} [anchor]
+     */
+    InfoBox.prototype.open = function (map, anchor) {
+    
+      var me = this;
+    
+      if (anchor) {
+    
+        this.position_ = anchor.getPosition();
+        this.moveListener_ = google.maps.event.addListener(anchor, "position_changed", function () {
+          me.setPosition(this.getPosition());
+        });
+    
+        this.mapListener_ = google.maps.event.addListener(anchor, "map_changed", function() {
+          me.setMap(this.map);
+        });    
+      }
+    
+      this.setMap(map);
+    
+      if (this.div_) {
+    
+        this.panBox_();
+      }
+    };
+    
+    /**
+     * Removes the InfoBox from the map.
+     */
+    InfoBox.prototype.close = function () {
+    
+      var i;
+    
+      if (this.closeListener_) {
+    
+        google.maps.event.removeListener(this.closeListener_);
+        this.closeListener_ = null;
+      }
+    
+      if (this.eventListeners_) {
+        
+        for (i = 0; i < this.eventListeners_.length; i++) {
+    
+          google.maps.event.removeListener(this.eventListeners_[i]);
+        }
+        this.eventListeners_ = null;
+      }
+    
+      if (this.moveListener_) {
+    
+        google.maps.event.removeListener(this.moveListener_);
+        this.moveListener_ = null;
+      }
+    
+      if (this.mapListener_) {
+        
+        google.maps.event.removeListener(this.mapListener_);
+        this.mapListener_ = null;    
+      }
+     
+      if (this.contextListener_) {
+    
+        google.maps.event.removeListener(this.contextListener_);
+        this.contextListener_ = null;
+      }
+    
+      this.setMap(null);
+    };
\ No newline at end of file
diff --git a/src/assets/js/jquery.easing.1.3.js b/src/assets/js/jquery.easing.1.3.js
new file mode 100644
index 0000000..ef74321
--- /dev/null
+++ b/src/assets/js/jquery.easing.1.3.js
@@ -0,0 +1,205 @@
+/*
+ * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+ *
+ * Uses the built in easing capabilities added In jQuery 1.1
+ * to offer multiple easing options
+ *
+ * TERMS OF USE - jQuery Easing
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2008 George McGinley Smith
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+*/
+
+// t: current time, b: begInnIng value, c: change In value, d: duration
+jQuery.easing['jswing'] = jQuery.easing['swing'];
+
+jQuery.extend( jQuery.easing,
+{
+	def: 'easeOutQuad',
+	swing: function (x, t, b, c, d) {
+		//alert(jQuery.easing.default);
+		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
+	},
+	easeInQuad: function (x, t, b, c, d) {
+		return c*(t/=d)*t + b;
+	},
+	easeOutQuad: function (x, t, b, c, d) {
+		return -c *(t/=d)*(t-2) + b;
+	},
+	easeInOutQuad: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t + b;
+		return -c/2 * ((--t)*(t-2) - 1) + b;
+	},
+	easeInCubic: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t + b;
+	},
+	easeOutCubic: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t + 1) + b;
+	},
+	easeInOutCubic: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t + b;
+		return c/2*((t-=2)*t*t + 2) + b;
+	},
+	easeInQuart: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t + b;
+	},
+	easeOutQuart: function (x, t, b, c, d) {
+		return -c * ((t=t/d-1)*t*t*t - 1) + b;
+	},
+	easeInOutQuart: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
+		return -c/2 * ((t-=2)*t*t*t - 2) + b;
+	},
+	easeInQuint: function (x, t, b, c, d) {
+		return c*(t/=d)*t*t*t*t + b;
+	},
+	easeOutQuint: function (x, t, b, c, d) {
+		return c*((t=t/d-1)*t*t*t*t + 1) + b;
+	},
+	easeInOutQuint: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
+		return c/2*((t-=2)*t*t*t*t + 2) + b;
+	},
+	easeInSine: function (x, t, b, c, d) {
+		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
+	},
+	easeOutSine: function (x, t, b, c, d) {
+		return c * Math.sin(t/d * (Math.PI/2)) + b;
+	},
+	easeInOutSine: function (x, t, b, c, d) {
+		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
+	},
+	easeInExpo: function (x, t, b, c, d) {
+		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
+	},
+	easeOutExpo: function (x, t, b, c, d) {
+		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
+	},
+	easeInOutExpo: function (x, t, b, c, d) {
+		if (t==0) return b;
+		if (t==d) return b+c;
+		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
+		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
+	},
+	easeInCirc: function (x, t, b, c, d) {
+		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
+	},
+	easeOutCirc: function (x, t, b, c, d) {
+		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
+	},
+	easeInOutCirc: function (x, t, b, c, d) {
+		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
+		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
+	},
+	easeInElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+	},
+	easeOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
+	},
+	easeInOutElastic: function (x, t, b, c, d) {
+		var s=1.70158;var p=0;var a=c;
+		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
+		if (a < Math.abs(c)) { a=c; var s=p/4; }
+		else var s = p/(2*Math.PI) * Math.asin (c/a);
+		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
+		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
+	},
+	easeInBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*(t/=d)*t*((s+1)*t - s) + b;
+	},
+	easeOutBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158;
+		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
+	},
+	easeInOutBack: function (x, t, b, c, d, s) {
+		if (s == undefined) s = 1.70158; 
+		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
+		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
+	},
+	easeInBounce: function (x, t, b, c, d) {
+		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
+	},
+	easeOutBounce: function (x, t, b, c, d) {
+		if ((t/=d) < (1/2.75)) {
+			return c*(7.5625*t*t) + b;
+		} else if (t < (2/2.75)) {
+			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+		} else if (t < (2.5/2.75)) {
+			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+		} else {
+			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+		}
+	},
+	easeInOutBounce: function (x, t, b, c, d) {
+		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
+		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
+	}
+});
+
+/*
+ *
+ * TERMS OF USE - EASING EQUATIONS
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2001 Robert Penner
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+ */
\ No newline at end of file
diff --git a/src/assets/js/markerAnimate.js b/src/assets/js/markerAnimate.js
new file mode 100644
index 0000000..8ecbe0d
--- /dev/null
+++ b/src/assets/js/markerAnimate.js
@@ -0,0 +1,90 @@
+// Animated Marker Movement. Robert Gerlach 2012-2013 https://github.com/combatwombat/marker-animate
+// MIT license
+//
+// params:
+// newPosition        - the new Position as google.maps.LatLng()
+// options            - optional options object (optional)
+// options.duration   - animation duration in ms (default 1000)
+// options.easing     - easing function from jQuery and/or the jQuery easing plugin (default 'linear')
+// options.complete   - callback function. Gets called, after the animation has finished
+google.maps.Marker.prototype.animateTo = function(newPosition, options) {
+  defaultOptions = {
+    duration: 1000,
+    easing: 'linear',
+    complete: null
+  }
+  options = options || {};
+
+  // complete missing options
+  for (key in defaultOptions) {
+    options[key] = options[key] || defaultOptions[key];
+  }
+
+  // throw exception if easing function doesn't exist
+  if (options.easing != 'linear') {            
+    if (typeof jQuery == 'undefined' || !jQuery.easing[options.easing]) {
+      throw '"' + options.easing + '" easing function doesn\'t exist. Include jQuery and/or the jQuery easing plugin and use the right function name.';
+      return;
+    }
+  }
+  
+  window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+  // save current position. prefixed to avoid name collisions. separate for lat/lng to avoid calling lat()/lng() in every frame
+  this.AT_startPosition_lat = this.getPosition().lat();
+  this.AT_startPosition_lng = this.getPosition().lng();
+  var newPosition_lat = newPosition.lat();
+  var newPosition_lng = newPosition.lng();
+  
+  // crossing the 180° meridian and going the long way around the earth?
+  if (Math.abs(newPosition_lng - this.AT_startPosition_lng) > 180) {
+    if (newPosition_lng > this.AT_startPosition_lng) {      
+      newPosition_lng -= 360;      
+    } else {
+      newPosition_lng += 360;
+    }
+  }
+
+  var animateStep = function(marker, startTime) {            
+    var ellapsedTime = (new Date()).getTime() - startTime;
+    var durationRatio = ellapsedTime / options.duration; // 0 - 1
+    var easingDurationRatio = durationRatio;
+
+    // use jQuery easing if it's not linear
+    if (options.easing !== 'linear') {
+      easingDurationRatio = jQuery.easing[options.easing](durationRatio, ellapsedTime, 0, 1, options.duration);
+    }
+    
+    if (durationRatio < 1) {
+      var deltaPosition = new google.maps.LatLng( marker.AT_startPosition_lat + (newPosition_lat - marker.AT_startPosition_lat)*easingDurationRatio,
+                                                  marker.AT_startPosition_lng + (newPosition_lng - marker.AT_startPosition_lng)*easingDurationRatio);
+      marker.setPosition(deltaPosition);
+
+      // use requestAnimationFrame if it exists on this browser. If not, use setTimeout with ~60 fps
+      if (window.requestAnimationFrame) {
+        marker.AT_animationHandler = window.requestAnimationFrame(function() {animateStep(marker, startTime)});                
+      } else {
+        marker.AT_animationHandler = setTimeout(function() {animateStep(marker, startTime)}, 17); 
+      }
+
+    } else {
+      
+      marker.setPosition(newPosition);
+
+      if (typeof options.complete === 'function') {
+        options.complete();
+      }
+
+    }            
+  }
+
+  // stop possibly running animation
+  if (window.cancelAnimationFrame) {
+    window.cancelAnimationFrame(this.AT_animationHandler);
+  } else {
+    clearTimeout(this.AT_animationHandler); 
+  }
+  
+  animateStep(this, (new Date()).getTime());
+}
diff --git a/src/assets/js/xlsx.min.js b/src/assets/js/xlsx.min.js
new file mode 100644
index 0000000..d470c75
--- /dev/null
+++ b/src/assets/js/xlsx.min.js
@@ -0,0 +1,14 @@
+/*! xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */
+var DO_NOT_EXPORT_CODEPAGE=true;var DO_NOT_EXPORT_JSZIP=true;var XLSX={};function make_xlsx_lib(e){e.version="0.14.2";var r=1200,t=1252;if(typeof module!=="undefined"&&typeof require!=="undefined"){if(typeof cptable==="undefined"){if(typeof global!=="undefined")global.cptable=undefined;else if(typeof window!=="undefined")window.cptable=undefined}}var a=[874,932,936,949,950];for(var n=0;n<=8;++n)a.push(1250+n);var i={0:1252,1:65001,2:65001,77:1e4,128:932,129:949,130:1361,134:936,136:950,161:1253,162:1254,163:1258,177:1255,178:1256,186:1257,204:1251,222:874,238:1250,255:1252,69:6969};var s=function(e){if(a.indexOf(e)==-1)return;t=i[0]=e};function f(){s(1252)}var l=function(e){r=e;s(e)};function o(){l(1200);f()}function c(e){var r=[];for(var t=0,a=e.length;t<a;++t)r[t]=e.charCodeAt(t);return r}function u(e){var r=[];for(var t=0;t<e.length>>1;++t)r[t]=String.fromCharCode(e.charCodeAt(2*t)+(e.charCodeAt(2*t+1)<<8));return r.join("")}function h(e){var r=[];for(var t=0;t<e.length>>1;++t)r[t]=String.fromCharCode(e.charCodeAt(2*t+1)+(e.charCodeAt(2*t)<<8));return r.join("")}var d=function(e){var r=e.charCodeAt(0),t=e.charCodeAt(1);if(r==255&&t==254)return u(e.slice(2));if(r==254&&t==255)return h(e.slice(2));if(r==65279)return e.slice(1);return e};var v=function Wm(e){return String.fromCharCode(e)};if(typeof cptable!=="undefined"){l=function(e){r=e};d=function(e){if(e.charCodeAt(0)===255&&e.charCodeAt(1)===254){return cptable.utils.decode(1200,c(e.slice(2)))}return e};v=function Hm(e){if(r===1200)return String.fromCharCode(e);return cptable.utils.decode(r,[e&255,e>>8])[0]}}var p=null;var m=true;var b=function Vm(){var e="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";return{encode:function(r){var t="";var a=0,n=0,i=0,s=0,f=0,l=0,o=0;for(var c=0;c<r.length;){a=r.charCodeAt(c++);s=a>>2;n=r.charCodeAt(c++);f=(a&3)<<4|n>>4;i=r.charCodeAt(c++);l=(n&15)<<2|i>>6;o=i&63;if(isNaN(n)){l=o=64}else if(isNaN(i)){o=64}t+=e.charAt(s)+e.charAt(f)+e.charAt(l)+e.charAt(o)}return t},decode:function r(t){var a="";var n=0,i=0,s=0,f=0,l=0,o=0,c=0;t=t.replace(/[^\w\+\/\=]/g,"");for(var u=0;u<t.length;){f=e.indexOf(t.charAt(u++));l=e.indexOf(t.charAt(u++));n=f<<2|l>>4;a+=String.fromCharCode(n);o=e.indexOf(t.charAt(u++));i=(l&15)<<4|o>>2;if(o!==64){a+=String.fromCharCode(i)}c=e.indexOf(t.charAt(u++));s=(o&3)<<6|c;if(c!==64){a+=String.fromCharCode(s)}}return a}}}();var g=typeof Buffer!=="undefined"&&typeof process!=="undefined"&&typeof process.versions!=="undefined"&&!!process.versions.node;var E=function(){};if(typeof Buffer!=="undefined"){var S=!Buffer.from;if(!S)try{Buffer.from("foo","utf8")}catch(k){S=true}E=S?function(e,r){return r?new Buffer(e,r):new Buffer(e)}:Buffer.from.bind(Buffer);if(!Buffer.alloc)Buffer.alloc=function(e){return new Buffer(e)};if(!Buffer.allocUnsafe)Buffer.allocUnsafe=function(e){return new Buffer(e)}}function w(e){return g?Buffer.alloc(e):new Array(e)}function C(e){return g?Buffer.allocUnsafe(e):new Array(e)}var B=function Xm(e){if(g)return E(e,"binary");return e.split("").map(function(e){return e.charCodeAt(0)&255})};function T(e){if(typeof ArrayBuffer==="undefined")return B(e);var r=new ArrayBuffer(e.length),t=new Uint8Array(r);for(var a=0;a!=e.length;++a)t[a]=e.charCodeAt(a)&255;return r}function x(e){if(Array.isArray(e))return e.map(Av).join("");var r=[];for(var t=0;t<e.length;++t)r[t]=Av(e[t]);return r.join("")}function I(e){if(typeof Uint8Array==="undefined")throw new Error("Unsupported");return new Uint8Array(e)}function _(e){if(typeof ArrayBuffer=="undefined")throw new Error("Unsupported");if(e instanceof ArrayBuffer)return _(new Uint8Array(e));var r=new Array(e.length);for(var t=0;t<e.length;++t)r[t]=e[t];return r}var A=function(e){return[].concat.apply([],e)};var R=/\u0000/g,y=/[\u0001-\u0006]/g;var F={};var D=function Gm(e){e.version="0.10.2";function r(e){var r="",t=e.length-1;while(t>=0)r+=e.charAt(t--);return r}function t(e,r){var t="";while(t.length<r)t+=e;return t}function a(e,r){var a=""+e;return a.length>=r?a:t("0",r-a.length)+a}function n(e,r){var a=""+e;return a.length>=r?a:t(" ",r-a.length)+a}function i(e,r){var a=""+e;return a.length>=r?a:a+t(" ",r-a.length)}function s(e,r){var a=""+Math.round(e);return a.length>=r?a:t("0",r-a.length)+a}function f(e,r){var a=""+e;return a.length>=r?a:t("0",r-a.length)+a}var l=Math.pow(2,32);function o(e,r){if(e>l||e<-l)return s(e,r);var t=Math.round(e);return f(t,r)}function c(e,r){r=r||0;return e.length>=7+r&&(e.charCodeAt(r)|32)===103&&(e.charCodeAt(r+1)|32)===101&&(e.charCodeAt(r+2)|32)===110&&(e.charCodeAt(r+3)|32)===101&&(e.charCodeAt(r+4)|32)===114&&(e.charCodeAt(r+5)|32)===97&&(e.charCodeAt(r+6)|32)===108}var u=[["Sun","Sunday"],["Mon","Monday"],["Tue","Tuesday"],["Wed","Wednesday"],["Thu","Thursday"],["Fri","Friday"],["Sat","Saturday"]];var h=[["J","Jan","January"],["F","Feb","February"],["M","Mar","March"],["A","Apr","April"],["M","May","May"],["J","Jun","June"],["J","Jul","July"],["A","Aug","August"],["S","Sep","September"],["O","Oct","October"],["N","Nov","November"],["D","Dec","December"]];function d(e){e[0]="General";e[1]="0";e[2]="0.00";e[3]="#,##0";e[4]="#,##0.00";e[9]="0%";e[10]="0.00%";e[11]="0.00E+00";e[12]="# ?/?";e[13]="# ??/??";e[14]="m/d/yy";e[15]="d-mmm-yy";e[16]="d-mmm";e[17]="mmm-yy";e[18]="h:mm AM/PM";e[19]="h:mm:ss AM/PM";e[20]="h:mm";e[21]="h:mm:ss";e[22]="m/d/yy h:mm";e[37]="#,##0 ;(#,##0)";e[38]="#,##0 ;[Red](#,##0)";e[39]="#,##0.00;(#,##0.00)";e[40]="#,##0.00;[Red](#,##0.00)";e[45]="mm:ss";e[46]="[h]:mm:ss";e[47]="mmss.0";e[48]="##0.0E+0";e[49]="@";e[56]='"上午/下午 "hh"時"mm"分"ss"秒 "';e[65535]="General"}var v={};d(v);function p(e,r,t){var a=e<0?-1:1;var n=e*a;var i=0,s=1,f=0;var l=1,o=0,c=0;var u=Math.floor(n);while(o<r){u=Math.floor(n);f=u*s+i;c=u*o+l;if(n-u<5e-8)break;n=1/(n-u);i=s;s=f;l=o;o=c}if(c>r){if(o>r){c=l;f=i}else{c=o;f=s}}if(!t)return[0,a*f,c];var h=Math.floor(a*f/c);return[h,a*f-h*c,c]}function m(e,r,t){if(e>2958465||e<0)return null;var a=e|0,n=Math.floor(86400*(e-a)),i=0;var s=[];var f={D:a,T:n,u:86400*(e-a)-n,y:0,m:0,d:0,H:0,M:0,S:0,q:0};if(Math.abs(f.u)<1e-6)f.u=0;if(r&&r.date1904)a+=1462;if(f.u>.9999){f.u=0;if(++n==86400){f.T=n=0;++a;++f.D}}if(a===60){s=t?[1317,10,29]:[1900,2,29];i=3}else if(a===0){s=t?[1317,8,29]:[1900,1,0];i=6}else{if(a>60)--a;var l=new Date(1900,0,1);l.setDate(l.getDate()+a-1);s=[l.getFullYear(),l.getMonth()+1,l.getDate()];i=l.getDay();if(a<60)i=(i+6)%7;if(t)i=B(l,s)}f.y=s[0];f.m=s[1];f.d=s[2];f.S=n%60;n=Math.floor(n/60);f.M=n%60;n=Math.floor(n/60);f.H=n;f.q=i;return f}e.parse_date_code=m;var b=new Date(1899,11,31,0,0,0);var g=b.getTime();var E=new Date(1900,2,1,0,0,0);function S(e,r){var t=e.getTime();if(r)t-=1461*24*60*60*1e3;else if(e>=E)t+=24*60*60*1e3;return(t-(g+(e.getTimezoneOffset()-b.getTimezoneOffset())*6e4))/(24*60*60*1e3)}function k(e){return e.toString(10)}e._general_int=k;var w=function L(){var e=/\.(\d*[1-9])0+$/,r=/\.0*$/,t=/\.(\d*[1-9])0+/,a=/\.0*[Ee]/,n=/(E[+-])(\d)$/;function i(e){var r=e<0?12:11;var t=l(e.toFixed(12));if(t.length<=r)return t;t=e.toPrecision(10);if(t.length<=r)return t;return e.toExponential(5)}function s(r){var t=r.toFixed(11).replace(e,".$1");if(t.length>(r<0?12:11))t=r.toPrecision(6);return t}function f(e){for(var r=0;r!=e.length;++r)if((e.charCodeAt(r)|32)===101)return e.replace(t,".$1").replace(a,"E").replace("e","E").replace(n,"$10$2");return e}function l(t){return t.indexOf(".")>-1?t.replace(r,"").replace(e,".$1"):t}return function o(e){var r=Math.floor(Math.log(Math.abs(e))*Math.LOG10E),t;if(r>=-4&&r<=-1)t=e.toPrecision(10+r);else if(Math.abs(r)<=9)t=i(e);else if(r===10)t=e.toFixed(10).substr(0,12);else t=s(e);return l(f(t))}}();e._general_num=w;function C(e,r){switch(typeof e){case"string":return e;case"boolean":return e?"TRUE":"FALSE";case"number":return(e|0)===e?k(e):w(e);case"undefined":return"";case"object":if(e==null)return"";if(e instanceof Date)return N(14,S(e,r&&r.date1904),r);}throw new Error("unsupported value in General format: "+e)}e._general=C;function B(){return 0}function T(e,r,t,n){var i="",s=0,f=0,l=t.y,o,c=0;switch(e){case 98:l=t.y+543;case 121:switch(r.length){case 1:;case 2:o=l%100;c=2;break;default:o=l%1e4;c=4;break;}break;case 109:switch(r.length){case 1:;case 2:o=t.m;c=r.length;break;case 3:return h[t.m-1][1];case 5:return h[t.m-1][0];default:return h[t.m-1][2];}break;case 100:switch(r.length){case 1:;case 2:o=t.d;c=r.length;break;case 3:return u[t.q][0];default:return u[t.q][1];}break;case 104:switch(r.length){case 1:;case 2:o=1+(t.H+11)%12;c=r.length;break;default:throw"bad hour format: "+r;}break;case 72:switch(r.length){case 1:;case 2:o=t.H;c=r.length;break;default:throw"bad hour format: "+r;}break;case 77:switch(r.length){case 1:;case 2:o=t.M;c=r.length;break;default:throw"bad minute format: "+r;}break;case 115:if(r!="s"&&r!="ss"&&r!=".0"&&r!=".00"&&r!=".000")throw"bad second format: "+r;if(t.u===0&&(r=="s"||r=="ss"))return a(t.S,r.length);if(n>=2)f=n===3?1e3:100;else f=n===1?10:1;s=Math.round(f*(t.S+t.u));if(s>=60*f)s=0;if(r==="s")return s===0?"0":""+s/f;i=a(s,2+n);if(r==="ss")return i.substr(0,2);return"."+i.substr(2,r.length-1);case 90:switch(r){case"[h]":;case"[hh]":o=t.D*24+t.H;break;case"[m]":;case"[mm]":o=(t.D*24+t.H)*60+t.M;break;case"[s]":;case"[ss]":o=((t.D*24+t.H)*60+t.M)*60+Math.round(t.S+t.u);break;default:throw"bad abstime format: "+r;}c=r.length===3?1:2;break;case 101:o=l;c=1;}if(c>0)return a(o,c);else return""}function x(e){var r=3;if(e.length<=r)return e;var t=e.length%r,a=e.substr(0,t);for(;t!=e.length;t+=r)a+=(a.length>0?",":"")+e.substr(t,r);return a}var I=function U(){var e=/%/g;function s(r,a,n){var i=a.replace(e,""),s=a.length-i.length;return I(r,i,n*Math.pow(10,2*s))+t("%",s)}function f(e,r,t){var a=r.length-1;while(r.charCodeAt(a-1)===44)--a;return I(e,r.substr(0,a),t/Math.pow(10,3*(r.length-a)))}function l(e,r){var t;var a=e.indexOf("E")-e.indexOf(".")-1;if(e.match(/^#+0.0E\+0$/)){if(r==0)return"0.0E+0";else if(r<0)return"-"+l(e,-r);var n=e.indexOf(".");if(n===-1)n=e.indexOf("E");var i=Math.floor(Math.log(r)*Math.LOG10E)%n;if(i<0)i+=n;t=(r/Math.pow(10,i)).toPrecision(a+1+(n+i)%n);if(t.indexOf("e")===-1){var s=Math.floor(Math.log(r)*Math.LOG10E);if(t.indexOf(".")===-1)t=t.charAt(0)+"."+t.substr(1)+"E+"+(s-t.length+i);else t+="E+"+(s-i);while(t.substr(0,2)==="0."){t=t.charAt(0)+t.substr(2,n)+"."+t.substr(2+n);t=t.replace(/^0+([1-9])/,"$1").replace(/^0+\./,"0.")}t=t.replace(/\+-/,"-")}t=t.replace(/^([+-]?)(\d*)\.(\d*)[Ee]/,function(e,r,t,a){return r+t+a.substr(0,(n+i)%n)+"."+a.substr(i)+"E"})}else t=r.toExponential(a);if(e.match(/E\+00$/)&&t.match(/e[+-]\d$/))t=t.substr(0,t.length-1)+"0"+t.charAt(t.length-1);if(e.match(/E\-/)&&t.match(/e\+/))t=t.replace(/e\+/,"e");return t.replace("e","E")}var c=/# (\?+)( ?)\/( ?)(\d+)/;function u(e,r,i){var s=parseInt(e[4],10),f=Math.round(r*s),l=Math.floor(f/s);var o=f-l*s,c=s;return i+(l===0?"":""+l)+" "+(o===0?t(" ",e[1].length+1+e[4].length):n(o,e[1].length)+e[2]+"/"+e[3]+a(c,e[4].length))}function h(e,r,a){return a+(r===0?"":""+r)+t(" ",e[1].length+2+e[4].length)}var d=/^#*0*\.([0#]+)/;var v=/\).*[0#]/;var m=/\(###\) ###\\?-####/;function b(e){var r="",t;for(var a=0;a!=e.length;++a)switch(t=e.charCodeAt(a)){case 35:break;case 63:r+=" ";break;case 48:r+="0";break;default:r+=String.fromCharCode(t);}return r}function g(e,r){var t=Math.pow(10,r);return""+Math.round(e*t)/t}function E(e,r){if(r<(""+Math.round((e-Math.floor(e))*Math.pow(10,r))).length){return 0}return Math.round((e-Math.floor(e))*Math.pow(10,r))}function S(e,r){if(r<(""+Math.round((e-Math.floor(e))*Math.pow(10,r))).length){return 1}return 0}function k(e){if(e<2147483647&&e>-2147483648)return""+(e>=0?e|0:e-1|0);return""+Math.floor(e)}function w(e,h,C){if(e.charCodeAt(0)===40&&!h.match(v)){var B=h.replace(/\( */,"").replace(/ \)/,"").replace(/\)/,"");if(C>=0)return w("n",B,C);return"("+w("n",B,-C)+")"}if(h.charCodeAt(h.length-1)===44)return f(e,h,C);if(h.indexOf("%")!==-1)return s(e,h,C);if(h.indexOf("E")!==-1)return l(h,C);if(h.charCodeAt(0)===36)return"$"+w(e,h.substr(h.charAt(1)==" "?2:1),C);var T;var _,A,R,y=Math.abs(C),F=C<0?"-":"";if(h.match(/^00+$/))return F+o(y,h.length);if(h.match(/^[#?]+$/)){T=o(C,0);if(T==="0")T="";return T.length>h.length?T:b(h.substr(0,h.length-T.length))+T}if(_=h.match(c))return u(_,y,F);if(h.match(/^#+0+$/))return F+o(y,h.length-h.indexOf("0"));if(_=h.match(d)){T=g(C,_[1].length).replace(/^([^\.]+)$/,"$1."+b(_[1])).replace(/\.$/,"."+b(_[1])).replace(/\.(\d*)$/,function(e,r){return"."+r+t("0",b(_[1]).length-r.length)});return h.indexOf("0.")!==-1?T:T.replace(/^0\./,".")}h=h.replace(/^#+([0.])/,"$1");if(_=h.match(/^(0*)\.(#*)$/)){return F+g(y,_[2].length).replace(/\.(\d*[1-9])0*$/,".$1").replace(/^(-?\d*)$/,"$1.").replace(/^0\./,_[1].length?"0.":".")}if(_=h.match(/^#{1,3},##0(\.?)$/))return F+x(o(y,0));if(_=h.match(/^#,##0\.([#0]*0)$/)){return C<0?"-"+w(e,h,-C):x(""+(Math.floor(C)+S(C,_[1].length)))+"."+a(E(C,_[1].length),_[1].length)}if(_=h.match(/^#,#*,#0/))return w(e,h.replace(/^#,#*,/,""),C);if(_=h.match(/^([0#]+)(\\?-([0#]+))+$/)){T=r(w(e,h.replace(/[\\-]/g,""),C));A=0;return r(r(h.replace(/\\/g,"")).replace(/[0#]/g,function(e){return A<T.length?T.charAt(A++):e==="0"?"0":""}))}if(h.match(m)){T=w(e,"##########",C);return"("+T.substr(0,3)+") "+T.substr(3,3)+"-"+T.substr(6)}var D="";if(_=h.match(/^([#0?]+)( ?)\/( ?)([#0?]+)/)){A=Math.min(_[4].length,7);R=p(y,Math.pow(10,A)-1,false);T=""+F;D=I("n",_[1],R[1]);if(D.charAt(D.length-1)==" ")D=D.substr(0,D.length-1)+"0";T+=D+_[2]+"/"+_[3];D=i(R[2],A);if(D.length<_[4].length)D=b(_[4].substr(_[4].length-D.length))+D;T+=D;return T}if(_=h.match(/^# ([#0?]+)( ?)\/( ?)([#0?]+)/)){A=Math.min(Math.max(_[1].length,_[4].length),7);R=p(y,Math.pow(10,A)-1,true);return F+(R[0]||(R[1]?"":"0"))+" "+(R[1]?n(R[1],A)+_[2]+"/"+_[3]+i(R[2],A):t(" ",2*A+1+_[2].length+_[3].length))}if(_=h.match(/^[#0?]+$/)){T=o(C,0);if(h.length<=T.length)return T;return b(h.substr(0,h.length-T.length))+T}if(_=h.match(/^([#0?]+)\.([#0]+)$/)){T=""+C.toFixed(Math.min(_[2].length,10)).replace(/([^0])0+$/,"$1");A=T.indexOf(".");var O=h.indexOf(".")-A,P=h.length-T.length-O;return b(h.substr(0,O)+T+h.substr(h.length-P))}if(_=h.match(/^00,000\.([#0]*0)$/)){A=E(C,_[1].length);return C<0?"-"+w(e,h,-C):x(k(C)).replace(/^\d,\d{3}$/,"0$&").replace(/^\d*$/,function(e){return"00,"+(e.length<3?a(0,3-e.length):"")+e})+"."+a(A,_[1].length)}switch(h){case"###,##0.00":return w(e,"#,##0.00",C);case"###,###":;case"##,###":;case"#,###":var N=x(o(y,0));return N!=="0"?F+N:"";case"###,###.00":return w(e,"###,##0.00",C).replace(/^0\./,".");case"#,###.00":return w(e,"#,##0.00",C).replace(/^0\./,".");default:;}throw new Error("unsupported format |"+h+"|")}function C(e,r,t){var a=r.length-1;while(r.charCodeAt(a-1)===44)--a;return I(e,r.substr(0,a),t/Math.pow(10,3*(r.length-a)))}function B(r,a,n){var i=a.replace(e,""),s=a.length-i.length;return I(r,i,n*Math.pow(10,2*s))+t("%",s)}function T(e,r){var t;var a=e.indexOf("E")-e.indexOf(".")-1;if(e.match(/^#+0.0E\+0$/)){if(r==0)return"0.0E+0";else if(r<0)return"-"+T(e,-r);var n=e.indexOf(".");if(n===-1)n=e.indexOf("E");var i=Math.floor(Math.log(r)*Math.LOG10E)%n;if(i<0)i+=n;t=(r/Math.pow(10,i)).toPrecision(a+1+(n+i)%n);if(!t.match(/[Ee]/)){var s=Math.floor(Math.log(r)*Math.LOG10E);if(t.indexOf(".")===-1)t=t.charAt(0)+"."+t.substr(1)+"E+"+(s-t.length+i);else t+="E+"+(s-i);t=t.replace(/\+-/,"-")}t=t.replace(/^([+-]?)(\d*)\.(\d*)[Ee]/,function(e,r,t,a){return r+t+a.substr(0,(n+i)%n)+"."+a.substr(i)+"E"})}else t=r.toExponential(a);if(e.match(/E\+00$/)&&t.match(/e[+-]\d$/))t=t.substr(0,t.length-1)+"0"+t.charAt(t.length-1);if(e.match(/E\-/)&&t.match(/e\+/))t=t.replace(/e\+/,"e");return t.replace("e","E")}function _(e,s,f){if(e.charCodeAt(0)===40&&!s.match(v)){var l=s.replace(/\( */,"").replace(/ \)/,"").replace(/\)/,"");if(f>=0)return _("n",l,f);return"("+_("n",l,-f)+")"}if(s.charCodeAt(s.length-1)===44)return C(e,s,f);if(s.indexOf("%")!==-1)return B(e,s,f);if(s.indexOf("E")!==-1)return T(s,f);if(s.charCodeAt(0)===36)return"$"+_(e,s.substr(s.charAt(1)==" "?2:1),f);var o;var u,g,E,S=Math.abs(f),k=f<0?"-":"";if(s.match(/^00+$/))return k+a(S,s.length);if(s.match(/^[#?]+$/)){o=""+f;if(f===0)o="";return o.length>s.length?o:b(s.substr(0,s.length-o.length))+o}if(u=s.match(c))return h(u,S,k);if(s.match(/^#+0+$/))return k+a(S,s.length-s.indexOf("0"));if(u=s.match(d)){o=(""+f).replace(/^([^\.]+)$/,"$1."+b(u[1])).replace(/\.$/,"."+b(u[1]));o=o.replace(/\.(\d*)$/,function(e,r){return"."+r+t("0",b(u[1]).length-r.length)});return s.indexOf("0.")!==-1?o:o.replace(/^0\./,".")}s=s.replace(/^#+([0.])/,"$1");if(u=s.match(/^(0*)\.(#*)$/)){return k+(""+S).replace(/\.(\d*[1-9])0*$/,".$1").replace(/^(-?\d*)$/,"$1.").replace(/^0\./,u[1].length?"0.":".")}if(u=s.match(/^#{1,3},##0(\.?)$/))return k+x(""+S);if(u=s.match(/^#,##0\.([#0]*0)$/)){return f<0?"-"+_(e,s,-f):x(""+f)+"."+t("0",u[1].length)}if(u=s.match(/^#,#*,#0/))return _(e,s.replace(/^#,#*,/,""),f);if(u=s.match(/^([0#]+)(\\?-([0#]+))+$/)){o=r(_(e,s.replace(/[\\-]/g,""),f));g=0;return r(r(s.replace(/\\/g,"")).replace(/[0#]/g,function(e){return g<o.length?o.charAt(g++):e==="0"?"0":""}))}if(s.match(m)){o=_(e,"##########",f);return"("+o.substr(0,3)+") "+o.substr(3,3)+"-"+o.substr(6)}var w="";if(u=s.match(/^([#0?]+)( ?)\/( ?)([#0?]+)/)){g=Math.min(u[4].length,7);E=p(S,Math.pow(10,g)-1,false);o=""+k;w=I("n",u[1],E[1]);if(w.charAt(w.length-1)==" ")w=w.substr(0,w.length-1)+"0";o+=w+u[2]+"/"+u[3];w=i(E[2],g);if(w.length<u[4].length)w=b(u[4].substr(u[4].length-w.length))+w;o+=w;return o}if(u=s.match(/^# ([#0?]+)( ?)\/( ?)([#0?]+)/)){g=Math.min(Math.max(u[1].length,u[4].length),7);E=p(S,Math.pow(10,g)-1,true);return k+(E[0]||(E[1]?"":"0"))+" "+(E[1]?n(E[1],g)+u[2]+"/"+u[3]+i(E[2],g):t(" ",2*g+1+u[2].length+u[3].length))}if(u=s.match(/^[#0?]+$/)){o=""+f;if(s.length<=o.length)return o;return b(s.substr(0,s.length-o.length))+o}if(u=s.match(/^([#0]+)\.([#0]+)$/)){o=""+f.toFixed(Math.min(u[2].length,10)).replace(/([^0])0+$/,"$1");g=o.indexOf(".");var A=s.indexOf(".")-g,R=s.length-o.length-A;return b(s.substr(0,A)+o+s.substr(s.length-R))}if(u=s.match(/^00,000\.([#0]*0)$/)){return f<0?"-"+_(e,s,-f):x(""+f).replace(/^\d,\d{3}$/,"0$&").replace(/^\d*$/,function(e){return"00,"+(e.length<3?a(0,3-e.length):"")+e})+"."+a(0,u[1].length)}switch(s){case"###,###":;case"##,###":;case"#,###":var y=x(""+S);return y!=="0"?k+y:"";default:if(s.match(/\.[0#?]*$/))return _(e,s.slice(0,s.lastIndexOf(".")),f)+b(s.slice(s.lastIndexOf(".")));}throw new Error("unsupported format |"+s+"|")}return function A(e,r,t){return(t|0)===t?_(e,r,t):w(e,r,t)}}();function _(e){var r=[];var t=false;for(var a=0,n=0;a<e.length;++a)switch(e.charCodeAt(a)){case 34:t=!t;break;case 95:;case 42:;case 92:++a;break;case 59:r[r.length]=e.substr(n,a-n);n=a+1;}r[r.length]=e.substr(n);if(t===true)throw new Error("Format |"+e+"| unterminated string ");return r}e._split=_;var A=/\[[HhMmSs]*\]/;function R(e){var r=0,t="",a="";while(r<e.length){switch(t=e.charAt(r)){case"G":if(c(e,r))r+=6;r++;break;case'"':for(;e.charCodeAt(++r)!==34&&r<e.length;)++r;++r;break;case"\\":r+=2;break;case"_":r+=2;break;case"@":++r;break;case"B":;case"b":if(e.charAt(r+1)==="1"||e.charAt(r+1)==="2")return true;case"M":;case"D":;case"Y":;case"H":;case"S":;case"E":;case"m":;case"d":;case"y":;case"h":;case"s":;case"e":;case"g":return true;case"A":;case"a":if(e.substr(r,3).toUpperCase()==="A/P")return true;if(e.substr(r,5).toUpperCase()==="AM/PM")return true;++r;break;case"[":a=t;while(e.charAt(r++)!=="]"&&r<e.length)a+=e.charAt(r);if(a.match(A))return true;break;case".":;case"0":;case"#":while(r<e.length&&("0#?.,E+-%".indexOf(t=e.charAt(++r))>-1||t=="\\"&&e.charAt(r+1)=="-"&&"0#".indexOf(e.charAt(r+2))>-1)){}break;case"?":while(e.charAt(++r)===t){}break;case"*":++r;if(e.charAt(r)==" "||e.charAt(r)=="*")++r;break;case"(":;case")":++r;break;case"1":;case"2":;case"3":;case"4":;case"5":;case"6":;case"7":;case"8":;case"9":while(r<e.length&&"0123456789".indexOf(e.charAt(++r))>-1){}break;case" ":++r;break;default:++r;break;}}return false}e.is_date=R;function y(e,r,t,a){var n=[],i="",s=0,f="",l="t",o,u,h;var d="H";while(s<e.length){switch(f=e.charAt(s)){case"G":if(!c(e,s))throw new Error("unrecognized character "+f+" in "+e);n[n.length]={t:"G",v:"General"};s+=7;break;case'"':for(i="";(h=e.charCodeAt(++s))!==34&&s<e.length;)i+=String.fromCharCode(h);n[n.length]={t:"t",v:i};++s;break;case"\\":var v=e.charAt(++s),p=v==="("||v===")"?v:"t";n[n.length]={t:p,v:v};++s;break;case"_":n[n.length]={t:"t",v:" "};s+=2;break;case"@":n[n.length]={t:"T",v:r};++s;break;case"B":;case"b":if(e.charAt(s+1)==="1"||e.charAt(s+1)==="2"){if(o==null){o=m(r,t,e.charAt(s+1)==="2");if(o==null)return""}n[n.length]={t:"X",v:e.substr(s,2)};l=f;s+=2;break};case"M":;case"D":;case"Y":;case"H":;case"S":;case"E":f=f.toLowerCase();case"m":;case"d":;case"y":;case"h":;case"s":;case"e":;case"g":if(r<0)return"";if(o==null){o=m(r,t);if(o==null)return""}i=f;while(++s<e.length&&e.charAt(s).toLowerCase()===f)i+=f;if(f==="m"&&l.toLowerCase()==="h")f="M";if(f==="h")f=d;n[n.length]={t:f,v:i};l=f;break;case"A":;case"a":var b={t:f,v:f};if(o==null)o=m(r,t);if(e.substr(s,3).toUpperCase()==="A/P"){if(o!=null)b.v=o.H>=12?"P":"A";b.t="T";d="h";s+=3}else if(e.substr(s,5).toUpperCase()==="AM/PM"){if(o!=null)b.v=o.H>=12?"PM":"AM";b.t="T";s+=5;d="h"}else{b.t="t";++s}if(o==null&&b.t==="T")return"";n[n.length]=b;l=f;break;case"[":i=f;while(e.charAt(s++)!=="]"&&s<e.length)i+=e.charAt(s);if(i.slice(-1)!=="]")throw'unterminated "[" block: |'+i+"|";if(i.match(A)){if(o==null){o=m(r,t);if(o==null)return""}n[n.length]={t:"Z",v:i.toLowerCase()};l=i.charAt(1)}else if(i.indexOf("$")>-1){i=(i.match(/\$([^-\[\]]*)/)||[])[1]||"$";if(!R(e))n[n.length]={t:"t",v:i}}break;case".":if(o!=null){i=f;while(++s<e.length&&(f=e.charAt(s))==="0")i+=f;n[n.length]={t:"s",v:i};break};case"0":;case"#":i=f;while(++s<e.length&&"0#?.,E+-%".indexOf(f=e.charAt(s))>-1||f=="\\"&&e.charAt(s+1)=="-"&&s<e.length-2&&"0#".indexOf(e.charAt(s+2))>-1)i+=f;n[n.length]={t:"n",v:i};break;case"?":i=f;while(e.charAt(++s)===f)i+=f;n[n.length]={t:f,v:i};l=f;break;case"*":++s;if(e.charAt(s)==" "||e.charAt(s)=="*")++s;break;case"(":;case")":n[n.length]={t:a===1?"t":f,v:f};++s;break;case"1":;case"2":;case"3":;case"4":;case"5":;case"6":;case"7":;case"8":;case"9":i=f;while(s<e.length&&"0123456789".indexOf(e.charAt(++s))>-1)i+=e.charAt(s);n[n.length]={t:"D",v:i};break;case" ":n[n.length]={t:f,v:f};++s;break;default:if(",$-+/():!^&'~{}<>=€acfijklopqrtuvwxzP".indexOf(f)===-1)throw new Error("unrecognized character "+f+" in "+e);n[n.length]={t:"t",v:f};++s;break;}}var g=0,E=0,S;for(s=n.length-1,l="t";s>=0;--s){switch(n[s].t){case"h":;case"H":n[s].t=d;l="h";if(g<1)g=1;break;case"s":if(S=n[s].v.match(/\.0+$/))E=Math.max(E,S[0].length-1);if(g<3)g=3;case"d":;case"y":;case"M":;case"e":l=n[s].t;break;case"m":if(l==="s"){n[s].t="M";if(g<2)g=2}break;case"X":break;case"Z":if(g<1&&n[s].v.match(/[Hh]/))g=1;if(g<2&&n[s].v.match(/[Mm]/))g=2;if(g<3&&n[s].v.match(/[Ss]/))g=3;}}switch(g){case 0:break;case 1:if(o.u>=.5){o.u=0;++o.S}if(o.S>=60){o.S=0;++o.M}if(o.M>=60){o.M=0;++o.H}break;case 2:if(o.u>=.5){o.u=0;++o.S}if(o.S>=60){o.S=0;++o.M}break;}var k="",w;for(s=0;s<n.length;++s){switch(n[s].t){case"t":;case"T":;case" ":;case"D":break;case"X":n[s].v="";n[s].t=";";break;case"d":;case"m":;case"y":;case"h":;case"H":;case"M":;case"s":;case"e":;case"b":;case"Z":n[s].v=T(n[s].t.charCodeAt(0),n[s].v,o,E);n[s].t="t";break;case"n":;case"(":;case"?":w=s+1;while(n[w]!=null&&((f=n[w].t)==="?"||f==="D"||(f===" "||f==="t")&&n[w+1]!=null&&(n[w+1].t==="?"||n[w+1].t==="t"&&n[w+1].v==="/")||n[s].t==="("&&(f===" "||f==="n"||f===")")||f==="t"&&(n[w].v==="/"||n[w].v===" "&&n[w+1]!=null&&n[w+1].t=="?"))){n[s].v+=n[w].v;n[w]={v:"",t:";"};++w}k+=n[s].v;s=w-1;break;case"G":n[s].t="t";n[s].v=C(r,t);break;}}var B="",x,_;if(k.length>0){if(k.charCodeAt(0)==40){x=r<0&&k.charCodeAt(0)===45?-r:r;_=I("(",k,x)}else{x=r<0&&a>1?-r:r;_=I("n",k,x);if(x<0&&n[0]&&n[0].t=="t"){_=_.substr(1);n[0].v="-"+n[0].v}}w=_.length-1;var y=n.length;for(s=0;s<n.length;++s)if(n[s]!=null&&n[s].t!="t"&&n[s].v.indexOf(".")>-1){y=s;break}var F=n.length;if(y===n.length&&_.indexOf("E")===-1){for(s=n.length-1;s>=0;--s){if(n[s]==null||"n?(".indexOf(n[s].t)===-1)continue;if(w>=n[s].v.length-1){w-=n[s].v.length;n[s].v=_.substr(w+1,n[s].v.length)}else if(w<0)n[s].v="";else{n[s].v=_.substr(0,w+1);w=-1}n[s].t="t";F=s}if(w>=0&&F<n.length)n[F].v=_.substr(0,w+1)+n[F].v}else if(y!==n.length&&_.indexOf("E")===-1){w=_.indexOf(".")-1;for(s=y;s>=0;--s){if(n[s]==null||"n?(".indexOf(n[s].t)===-1)continue;u=n[s].v.indexOf(".")>-1&&s===y?n[s].v.indexOf(".")-1:n[s].v.length-1;B=n[s].v.substr(u+1);for(;u>=0;--u){if(w>=0&&(n[s].v.charAt(u)==="0"||n[s].v.charAt(u)==="#"))B=_.charAt(w--)+B}n[s].v=B;n[s].t="t";F=s}if(w>=0&&F<n.length)n[F].v=_.substr(0,w+1)+n[F].v;w=_.indexOf(".")+1;for(s=y;s<n.length;++s){if(n[s]==null||"n?(".indexOf(n[s].t)===-1&&s!==y)continue;u=n[s].v.indexOf(".")>-1&&s===y?n[s].v.indexOf(".")+1:0;B=n[s].v.substr(0,u);for(;u<n[s].v.length;++u){if(w<_.length)B+=_.charAt(w++)}n[s].v=B;n[s].t="t";F=s}}}for(s=0;s<n.length;++s)if(n[s]!=null&&"n(?".indexOf(n[s].t)>-1){x=a>1&&r<0&&s>0&&n[s-1].v==="-"?-r:r;n[s].v=I(n[s].t,n[s].v,x);n[s].t="t"}var D="";for(s=0;s!==n.length;++s)if(n[s]!=null)D+=n[s].v;return D}e._eval=y;var F=/\[[=<>]/;var D=/\[(=|>[=]?|<[>=]?)(-?\d+(?:\.\d*)?)\]/;function O(e,r){if(r==null)return false;var t=parseFloat(r[2]);switch(r[1]){case"=":if(e==t)return true;break;case">":if(e>t)return true;break;case"<":if(e<t)return true;break;case"<>":if(e!=t)return true;break;case">=":if(e>=t)return true;break;case"<=":if(e<=t)return true;break;}return false}function P(e,r){var t=_(e);var a=t.length,n=t[a-1].indexOf("@");if(a<4&&n>-1)--a;if(t.length>4)throw new Error("cannot find right format for |"+t.join("|")+"|");if(typeof r!=="number")return[4,t.length===4||n>-1?t[t.length-1]:"@"];switch(t.length){case 1:t=n>-1?["General","General","General",t[0]]:[t[0],t[0],t[0],"@"];break;case 2:t=n>-1?[t[0],t[0],t[0],t[1]]:[t[0],t[1],t[0],"@"];break;case 3:t=n>-1?[t[0],t[1],t[0],t[2]]:[t[0],t[1],t[2],"@"];break;case 4:break;}var i=r>0?t[0]:r<0?t[1]:t[2];if(t[0].indexOf("[")===-1&&t[1].indexOf("[")===-1)return[a,i];if(t[0].match(F)!=null||t[1].match(F)!=null){var s=t[0].match(D);var f=t[1].match(D);return O(r,s)?[a,t[0]]:O(r,f)?[a,t[1]]:[a,t[s!=null&&f!=null?2:1]]}return[a,i]}function N(e,r,t){if(t==null)t={};var a="";switch(typeof e){case"string":if(e=="m/d/yy"&&t.dateNF)a=t.dateNF;else a=e;break;case"number":if(e==14&&t.dateNF)a=t.dateNF;else a=(t.table!=null?t.table:v)[e];break;}if(c(a,0))return C(r,t);if(r instanceof Date)r=S(r,t.date1904);var n=P(a,r);if(c(n[1]))return C(r,t);if(r===true)r="TRUE";else if(r===false)r="FALSE";else if(r===""||r==null)return"";return y(n[1],r,t,n[0])}function M(e,r){if(typeof r!="number"){r=+r||-1;for(var t=0;t<392;++t){if(v[t]==undefined){if(r<0)r=t;continue}if(v[t]==e){r=t;break}}if(r<0)r=391}v[r]=e;return r}e.load=M;e._table=v;e.get_table=function W(){return v};e.load_table=function H(e){for(var r=0;r!=392;++r)if(e[r]!==undefined)M(e[r],r)};e.init_table=d;e.format=N};D(F);var O={"General Number":"General","General Date":F._table[22],"Long Date":"dddd, mmmm dd, yyyy","Medium Date":F._table[15],"Short Date":F._table[14],"Long Time":F._table[19],"Medium Time":F._table[18],"Short Time":F._table[20],Currency:'"$"#,##0.00_);[Red]\\("$"#,##0.00\\)',Fixed:F._table[2],Standard:F._table[4],Percent:F._table[10],Scientific:F._table[11],"Yes/No":'"Yes";"Yes";"No";@',"True/False":'"True";"True";"False";@',"On/Off":'"Yes";"Yes";"No";@'};var P={5:'"$"#,##0_);\\("$"#,##0\\)',6:'"$"#,##0_);[Red]\\("$"#,##0\\)',7:'"$"#,##0.00_);\\("$"#,##0.00\\)',8:'"$"#,##0.00_);[Red]\\("$"#,##0.00\\)',23:"General",24:"General",25:"General",26:"General",27:"m/d/yy",28:"m/d/yy",29:"m/d/yy",30:"m/d/yy",31:"m/d/yy",32:"h:mm:ss",33:"h:mm:ss",34:"h:mm:ss",35:"h:mm:ss",36:"m/d/yy",41:'_(* #,##0_);_(* (#,##0);_(* "-"_);_(@_)',42:'_("$"* #,##0_);_("$"* (#,##0);_("$"* "-"_);_(@_)',43:'_(* #,##0.00_);_(* (#,##0.00);_(* "-"??_);_(@_)',44:'_("$"* #,##0.00_);_("$"* (#,##0.00);_("$"* "-"??_);_(@_)',50:"m/d/yy",51:"m/d/yy",52:"m/d/yy",53:"m/d/yy",54:"m/d/yy",55:"m/d/yy",56:"m/d/yy",57:"m/d/yy",58:"m/d/yy",59:"0",60:"0.00",61:"#,##0",62:"#,##0.00",63:'"$"#,##0_);\\("$"#,##0\\)',64:'"$"#,##0_);[Red]\\("$"#,##0\\)',65:'"$"#,##0.00_);\\("$"#,##0.00\\)',66:'"$"#,##0.00_);[Red]\\("$"#,##0.00\\)',67:"0%",68:"0.00%",69:"# ?/?",70:"# ??/??",71:"m/d/yy",72:"m/d/yy",73:"d-mmm-yy",74:"d-mmm",75:"mmm-yy",76:"h:mm",77:"h:mm:ss",78:"m/d/yy h:mm",79:"mm:ss",80:"[h]:mm:ss",81:"mmss.0"};var N=/[dD]+|[mM]+|[yYeE]+|[Hh]+|[Ss]+/g;function M(e){var r=typeof e=="number"?F._table[e]:e;r=r.replace(N,"(\\d+)");return new RegExp("^"+r+"$")}function L(e,r,t){var a=-1,n=-1,i=-1,s=-1,f=-1,l=-1;(r.match(N)||[]).forEach(function(e,r){var o=parseInt(t[r+1],10);switch(e.toLowerCase().charAt(0)){case"y":a=o;break;case"d":i=o;break;case"h":s=o;break;case"s":l=o;break;case"m":if(s>=0)f=o;else n=o;break;}});if(l>=0&&f==-1&&n>=0){f=n;n=-1}var o=(""+(a>=0?a:(new Date).getFullYear())).slice(-4)+"-"+("00"+(n>=1?n:1)).slice(-2)+"-"+("00"+(i>=1?i:1)).slice(-2);if(o.length==7)o="0"+o;if(o.length==8)o="20"+o;var c=("00"+(s>=0?s:0)).slice(-2)+":"+("00"+(f>=0?f:0)).slice(-2)+":"+("00"+(l>=0?l:0)).slice(-2);if(s==-1&&f==-1&&l==-1)return o;if(a==-1&&n==-1&&i==-1)return c;return o+"T"+c}var U=true;var W;(function(e){e(W={})})(function(e){e.version="1.2.0";function r(){var e=0,r=new Array(256);for(var t=0;t!=256;++t){e=t;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;e=e&1?-306674912^e>>>1:e>>>1;r[t]=e}return typeof Int32Array!=="undefined"?new Int32Array(r):r}var t=r();function a(e,r){var a=r^-1,n=e.length-1;for(var i=0;i<n;){a=a>>>8^t[(a^e.charCodeAt(i++))&255];a=a>>>8^t[(a^e.charCodeAt(i++))&255]}if(i===n)a=a>>>8^t[(a^e.charCodeAt(i))&255];return a^-1}function n(e,r){if(e.length>1e4)return i(e,r);var a=r^-1,n=e.length-3;for(var s=0;s<n;){a=a>>>8^t[(a^e[s++])&255];a=a>>>8^t[(a^e[s++])&255];a=a>>>8^t[(a^e[s++])&255];a=a>>>8^t[(a^e[s++])&255]}while(s<n+3)a=a>>>8^t[(a^e[s++])&255];return a^-1}function i(e,r){var a=r^-1,n=e.length-7;for(var i=0;i<n;){a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255];a=a>>>8^t[(a^e[i++])&255]}while(i<n+7)a=a>>>8^t[(a^e[i++])&255];return a^-1}function s(e,r){var a=r^-1;for(var n=0,i=e.length,s,f;n<i;){s=e.charCodeAt(n++);if(s<128){a=a>>>8^t[(a^s)&255]}else if(s<2048){a=a>>>8^t[(a^(192|s>>6&31))&255];a=a>>>8^t[(a^(128|s&63))&255]}else if(s>=55296&&s<57344){s=(s&1023)+64;f=e.charCodeAt(n++)&1023;a=a>>>8^t[(a^(240|s>>8&7))&255];a=a>>>8^t[(a^(128|s>>2&63))&255];a=a>>>8^t[(a^(128|f>>6&15|(s&3)<<4))&255];a=a>>>8^t[(a^(128|f&63))&255]}else{a=a>>>8^t[(a^(224|s>>12&15))&255];a=a>>>8^t[(a^(128|s>>6&63))&255];a=a>>>8^t[(a^(128|s&63))&255]}}return a^-1}e.table=t;e.bstr=a;e.buf=n;e.str=s});var H=function zm(){var e={};e.version="1.1.0";function r(e,r){var t=e.split("/"),a=r.split("/");for(var n=0,i=0,s=Math.min(t.length,a.length);n<s;++n){if(i=t[n].length-a[n].length)return i;if(t[n]!=a[n])return t[n]<a[n]?-1:1}return t.length-a.length}function t(e){if(e.charAt(e.length-1)=="/")return e.slice(0,-1).indexOf("/")===-1?e:t(e.slice(0,-1));var r=e.lastIndexOf("/");return r===-1?e:e.slice(0,r+1)}function a(e){if(e.charAt(e.length-1)=="/")return a(e.slice(0,-1));var r=e.lastIndexOf("/");return r===-1?e:e.slice(r+1)}function n(e,r){if(typeof r==="string")r=new Date(r);var t=r.getHours();t=t<<6|r.getMinutes();t=t<<5|r.getSeconds()>>>1;e._W(2,t);var a=r.getFullYear()-1980;a=a<<4|r.getMonth()+1;a=a<<5|r.getDate();e._W(2,a)}function i(e){var r=e._R(2)&65535;var t=e._R(2)&65535;var a=new Date;var n=t&31;t>>>=5;var i=t&15;t>>>=4;a.setMilliseconds(0);
+a.setFullYear(t+1980);a.setMonth(i-1);a.setDate(n);var s=r&31;r>>>=5;var f=r&63;r>>>=6;a.setHours(r);a.setMinutes(f);a.setSeconds(s<<1);return a}function s(e){Xr(e,0);var r={};var t=0;while(e.l<=e.length-4){var a=e._R(2);var n=e._R(2),i=e.l+n;var s={};switch(a){case 21589:{t=e._R(1);if(t&1)s.mtime=e._R(4);if(n>5){if(t&2)s.atime=e._R(4);if(t&4)s.ctime=e._R(4)}if(s.mtime)s.mt=new Date(s.mtime*1e3)}break;}e.l=i;r[a]=s}return r}var f;function l(){return f||(f=require("fs"))}function o(e,r){if(e[0]==80&&e[1]==75)return xe(e,r);if(e.length<512)throw new Error("CFB file size "+e.length+" < 512");var t=3;var a=512;var n=0;var i=0;var s=0;var f=0;var l=0;var o=[];var v=e.slice(0,512);Xr(v,0);var m=c(v);t=m[0];switch(t){case 3:a=512;break;case 4:a=4096;break;case 0:if(m[1]==0)return xe(e,r);default:throw new Error("Major Version: Expected 3 or 4 saw "+t);}if(a!==512){v=e.slice(0,a);Xr(v,28)}var b=e.slice(0,a);u(v,t);var g=v._R(4,"i");if(t===3&&g!==0)throw new Error("# Directory Sectors: Expected 0 saw "+g);v.l+=4;s=v._R(4,"i");v.l+=4;v.chk("00100000","Mini Stream Cutoff Size: ");f=v._R(4,"i");n=v._R(4,"i");l=v._R(4,"i");i=v._R(4,"i");for(var k=-1,w=0;w<109;++w){k=v._R(4,"i");if(k<0)break;o[w]=k}var C=h(e,a);p(l,i,C,a,o);var B=E(C,s,o,a);B[s].name="!Directory";if(n>0&&f!==N)B[f].name="!MiniFAT";B[o[0]].name="!FAT";B.fat_addrs=o;B.ssz=a;var T={},x=[],I=[],_=[];S(s,B,C,x,n,T,I,f);d(I,_,x);x.shift();var A={FileIndex:I,FullPaths:_};if(r&&r.raw)A.raw={header:b,sectors:C};return A}function c(e){if(e[e.l]==80&&e[e.l+1]==75)return[0,0];e.chk(M,"Header Signature: ");e.chk(U,"CLSID: ");var r=e._R(2,"u");return[e._R(2,"u"),r]}function u(e,r){var t=9;e.l+=2;switch(t=e._R(2)){case 9:if(r!=3)throw new Error("Sector Shift: Expected 9 saw "+t);break;case 12:if(r!=4)throw new Error("Sector Shift: Expected 12 saw "+t);break;default:throw new Error("Sector Shift: Expected 9 or 12 saw "+t);}e.chk("0600","Mini Sector Shift: ");e.chk("000000000000","Reserved: ")}function h(e,r){var t=Math.ceil(e.length/r)-1;var a=[];for(var n=1;n<t;++n)a[n-1]=e.slice(n*r,(n+1)*r);a[t-1]=e.slice(t*r);return a}function d(e,r,t){var a=0,n=0,i=0,s=0,f=0,l=t.length;var o=[],c=[];for(;a<l;++a){o[a]=c[a]=a;r[a]=t[a]}for(;f<c.length;++f){a=c[f];n=e[a].L;i=e[a].R;s=e[a].C;if(o[a]===a){if(n!==-1&&o[n]!==n)o[a]=o[n];if(i!==-1&&o[i]!==i)o[a]=o[i]}if(s!==-1)o[s]=a;if(n!==-1){o[n]=o[a];if(c.lastIndexOf(n)<f)c.push(n)}if(i!==-1){o[i]=o[a];if(c.lastIndexOf(i)<f)c.push(i)}}for(a=1;a<l;++a)if(o[a]===a){if(i!==-1&&o[i]!==i)o[a]=o[i];else if(n!==-1&&o[n]!==n)o[a]=o[n]}for(a=1;a<l;++a){if(e[a].type===0)continue;f=o[a];if(f===0)r[a]=r[0]+"/"+r[a];else while(f!==0&&f!==o[f]){r[a]=r[f]+"/"+r[a];f=o[f]}o[a]=0}r[0]+="/";for(a=1;a<l;++a){if(e[a].type!==2)r[a]+="/"}}function v(e,r,t){var a=e.start,n=e.size;var i=[];var s=a;while(t&&n>0&&s>=0){i.push(r.slice(s*P,s*P+P));n-=P;s=Pr(t,s*4)}if(i.length===0)return zr(0);return A(i).slice(0,e.size)}function p(e,r,t,a,n){var i=N;if(e===N){if(r!==0)throw new Error("DIFAT chain shorter than expected")}else if(e!==-1){var s=t[e],f=(a>>>2)-1;if(!s)return;for(var l=0;l<f;++l){if((i=Pr(s,l*4))===N)break;n.push(i)}p(Pr(s,a-4),r-1,t,a,n)}}function m(e,r,t,a,n){var i=[],s=[];if(!n)n=[];var f=a-1,l=0,o=0;for(l=r;l>=0;){n[l]=true;i[i.length]=l;s.push(e[l]);var c=t[Math.floor(l*4/a)];o=l*4&f;if(a<4+o)throw new Error("FAT boundary crossed: "+l+" 4 "+a);if(!e[c])break;l=Pr(e[c],o)}return{nodes:i,data:cr([s])}}function E(e,r,t,a){var n=e.length,i=[];var s=[],f=[],l=[];var o=a-1,c=0,u=0,h=0,d=0;for(c=0;c<n;++c){f=[];h=c+r;if(h>=n)h-=n;if(s[h])continue;l=[];for(u=h;u>=0;){s[u]=true;f[f.length]=u;l.push(e[u]);var v=t[Math.floor(u*4/a)];d=u*4&o;if(a<4+d)throw new Error("FAT boundary crossed: "+u+" 4 "+a);if(!e[v])break;u=Pr(e[v],d)}i[h]={nodes:f,data:cr([l])}}return i}function S(e,r,t,a,n,i,s,f){var l=0,o=a.length?2:0;var c=r[e].data;var u=0,h=0,d;for(;u<c.length;u+=128){var p=c.slice(u,u+128);Xr(p,64);h=p._R(2);d=hr(p,0,h-o);a.push(d);var b={name:d,type:p._R(1),color:p._R(1),L:p._R(4,"i"),R:p._R(4,"i"),C:p._R(4,"i"),clsid:p._R(16),state:p._R(4,"i"),start:0,size:0};var g=p._R(2)+p._R(2)+p._R(2)+p._R(2);if(g!==0)b.ct=k(p,p.l-8);var E=p._R(2)+p._R(2)+p._R(2)+p._R(2);if(E!==0)b.mt=k(p,p.l-8);b.start=p._R(4,"i");b.size=p._R(4,"i");if(b.size<0&&b.start<0){b.size=b.type=0;b.start=N;b.name=""}if(b.type===5){l=b.start;if(n>0&&l!==N)r[l].name="!StreamData"}else if(b.size>=4096){b.storage="fat";if(r[b.start]===undefined)r[b.start]=m(t,b.start,r.fat_addrs,r.ssz);r[b.start].name=b.name;b.content=r[b.start].data.slice(0,b.size)}else{b.storage="minifat";if(b.size<0)b.size=0;else if(l!==N&&b.start!==N&&r[l]){b.content=v(b,r[l].data,(r[f]||{}).data)}}if(b.content)Xr(b.content,0);i[d]=b;s.push(b)}}function k(e,r){return new Date((Or(e,r+4)/1e7*Math.pow(2,32)+Or(e,r)/1e7-11644473600)*1e3)}function T(e,r){l();return o(f.readFileSync(e),r)}function x(e,r){switch(r&&r.type||"base64"){case"file":return T(e,r);case"base64":return o(B(b.decode(e)),r);case"binary":return o(B(e),r);}return o(e,r)}function I(e,r){var t=r||{},a=t.root||"Root Entry";if(!e.FullPaths)e.FullPaths=[];if(!e.FileIndex)e.FileIndex=[];if(e.FullPaths.length!==e.FileIndex.length)throw new Error("inconsistent CFB structure");if(e.FullPaths.length===0){e.FullPaths[0]=a+"/";e.FileIndex[0]={name:a,type:5}}if(t.CLSID)e.FileIndex[0].clsid=t.CLSID;_(e)}function _(e){var r="
Sh33tJ5";if(H.find(e,"/"+r))return;var t=zr(4);t[0]=55;t[1]=t[3]=50;t[2]=54;e.FileIndex.push({name:r,type:2,content:t,size:4,L:69,R:69,C:69});e.FullPaths.push(e.FullPaths[0]+r);F(e)}function F(e,n){I(e);var i=false,s=false;for(var f=e.FullPaths.length-1;f>=0;--f){var l=e.FileIndex[f];switch(l.type){case 0:if(s)i=true;else{e.FileIndex.pop();e.FullPaths.pop()}break;case 1:;case 2:;case 5:s=true;if(isNaN(l.R*l.L*l.C))i=true;if(l.R>-1&&l.L>-1&&l.R==l.L)i=true;break;default:i=true;break;}}if(!i&&!n)return;var o=new Date(1987,1,19),c=0;var u=[];for(f=0;f<e.FullPaths.length;++f){if(e.FileIndex[f].type===0)continue;u.push([e.FullPaths[f],e.FileIndex[f]])}for(f=0;f<u.length;++f){var h=t(u[f][0]);s=false;for(c=0;c<u.length;++c)if(u[c][0]===h)s=true;if(!s)u.push([h,{name:a(h).replace("/",""),type:1,clsid:U,ct:o,mt:o,content:null}])}u.sort(function(e,t){return r(e[0],t[0])});e.FullPaths=[];e.FileIndex=[];for(f=0;f<u.length;++f){e.FullPaths[f]=u[f][0];e.FileIndex[f]=u[f][1]}for(f=0;f<u.length;++f){var d=e.FileIndex[f];var v=e.FullPaths[f];d.name=a(v).replace("/","");d.L=d.R=d.C=-(d.color=1);d.size=d.content?d.content.length:0;d.start=0;d.clsid=d.clsid||U;if(f===0){d.C=u.length>1?1:-1;d.size=0;d.type=5}else if(v.slice(-1)=="/"){for(c=f+1;c<u.length;++c)if(t(e.FullPaths[c])==v)break;d.C=c>=u.length?-1:c;for(c=f+1;c<u.length;++c)if(t(e.FullPaths[c])==t(v))break;d.R=c>=u.length?-1:c;d.type=1}else{if(t(e.FullPaths[f+1]||"")==t(v))d.R=f+1;d.type=2}}}function D(e,r){var t=r||{};F(e);if(t.fileType=="zip")return _e(e,t);var a=function(e){var r=0,t=0;for(var a=0;a<e.FileIndex.length;++a){var n=e.FileIndex[a];if(!n.content)continue;var i=n.content.length;if(i>0){if(i<4096)r+=i+63>>6;else t+=i+511>>9}}var s=e.FullPaths.length+3>>2;var f=r+7>>3;var l=r+127>>7;var o=f+t+s+l;var c=o+127>>7;var u=c<=109?0:Math.ceil((c-109)/127);while(o+c+u+127>>7>c)u=++c<=109?0:Math.ceil((c-109)/127);var h=[1,u,c,l,s,t,r,0];e.FileIndex[0].size=r<<6;h[7]=(e.FileIndex[0].start=h[0]+h[1]+h[2]+h[3]+h[4]+h[5])+(h[6]+7>>3);return h}(e);var n=zr(a[7]<<9);var i=0,s=0;{for(i=0;i<8;++i)n._W(1,L[i]);for(i=0;i<8;++i)n._W(2,0);n._W(2,62);n._W(2,3);n._W(2,65534);n._W(2,9);n._W(2,6);for(i=0;i<3;++i)n._W(2,0);n._W(4,0);n._W(4,a[2]);n._W(4,a[0]+a[1]+a[2]+a[3]-1);n._W(4,0);n._W(4,1<<12);n._W(4,a[3]?a[0]+a[1]+a[2]-1:N);n._W(4,a[3]);n._W(-4,a[1]?a[0]-1:N);n._W(4,a[1]);for(i=0;i<109;++i)n._W(-4,i<a[2]?a[1]+i:-1)}if(a[1]){for(s=0;s<a[1];++s){for(;i<236+s*127;++i)n._W(-4,i<a[2]?a[1]+i:-1);n._W(-4,s===a[1]-1?N:s+1)}}var f=function(e){for(s+=e;i<s-1;++i)n._W(-4,i+1);if(e){++i;n._W(-4,N)}};s=i=0;for(s+=a[1];i<s;++i)n._W(-4,V.DIFSECT);for(s+=a[2];i<s;++i)n._W(-4,V.FATSECT);f(a[3]);f(a[4]);var l=0,o=0;var c=e.FileIndex[0];for(;l<e.FileIndex.length;++l){c=e.FileIndex[l];if(!c.content)continue;o=c.content.length;if(o<4096)continue;c.start=s;f(o+511>>9)}f(a[6]+7>>3);while(n.l&511)n._W(-4,V.ENDOFCHAIN);s=i=0;for(l=0;l<e.FileIndex.length;++l){c=e.FileIndex[l];if(!c.content)continue;o=c.content.length;if(!o||o>=4096)continue;c.start=s;f(o+63>>6)}while(n.l&511)n._W(-4,V.ENDOFCHAIN);for(i=0;i<a[4]<<2;++i){var u=e.FullPaths[i];if(!u||u.length===0){for(l=0;l<17;++l)n._W(4,0);for(l=0;l<3;++l)n._W(4,-1);for(l=0;l<12;++l)n._W(4,0);continue}c=e.FileIndex[i];if(i===0)c.start=c.size?c.start-1:N;var h=i===0&&t.root||c.name;o=2*(h.length+1);n._W(64,h,"utf16le");n._W(2,o);n._W(1,c.type);n._W(1,c.color);n._W(-4,c.L);n._W(-4,c.R);n._W(-4,c.C);if(!c.clsid)for(l=0;l<4;++l)n._W(4,0);else n._W(16,c.clsid,"hex");n._W(4,c.state||0);n._W(4,0);n._W(4,0);n._W(4,0);n._W(4,0);n._W(4,c.start);n._W(4,c.size);n._W(4,0)}for(i=1;i<e.FileIndex.length;++i){c=e.FileIndex[i];if(c.size>=4096){n.l=c.start+1<<9;for(l=0;l<c.size;++l)n._W(1,c.content[l]);for(;l&511;++l)n._W(1,0)}}for(i=1;i<e.FileIndex.length;++i){c=e.FileIndex[i];if(c.size>0&&c.size<4096){for(l=0;l<c.size;++l)n._W(1,c.content[l]);for(;l&63;++l)n._W(1,0)}}while(n.l<n.length)n._W(1,0);return n}function O(e,r){var t=e.FullPaths.map(function(e){return e.toUpperCase()});var a=t.map(function(e){var r=e.split("/");return r[r.length-(e.slice(-1)=="/"?2:1)]});var n=false;if(r.charCodeAt(0)===47){n=true;r=t[0].slice(0,-1)+r}else n=r.indexOf("/")!==-1;var i=r.toUpperCase();var s=n===true?t.indexOf(i):a.indexOf(i);if(s!==-1)return e.FileIndex[s];var f=!i.match(y);i=i.replace(R,"");if(f)i=i.replace(y,"!");for(s=0;s<t.length;++s){if((f?t[s].replace(y,"!"):t[s]).replace(R,"")==i)return e.FileIndex[s];if((f?a[s].replace(y,"!"):a[s]).replace(R,"")==i)return e.FileIndex[s]}return null}var P=64;var N=-2;var M="d0cf11e0a1b11ae1";var L=[208,207,17,224,161,177,26,225];var U="00000000000000000000000000000000";var V={MAXREGSECT:-6,DIFSECT:-4,FATSECT:-3,ENDOFCHAIN:N,FREESECT:-1,HEADER_SIGNATURE:M,HEADER_MINOR_VERSION:"3e00",MAXREGSID:-6,NOSTREAM:-1,HEADER_CLSID:U,EntryTypes:["unknown","storage","stream","lockbytes","property","root"]};function X(e,r,t){l();var a=D(e,t);f.writeFileSync(r,a)}function G(e){var r=new Array(e.length);for(var t=0;t<e.length;++t)r[t]=String.fromCharCode(e[t]);return r.join("")}function z(e,r){var t=D(e,r);switch(r&&r.type){case"file":l();f.writeFileSync(r.filename,t);return t;case"binary":return G(t);case"base64":return b.encode(G(t));}return t}var j;function $(e){try{var r=e.InflateRaw;var t=new r;t._processChunk(new Uint8Array([3,0]),t._finishFlushFlag);if(t.bytesRead)j=e;else throw new Error("zlib does not expose bytesRead")}catch(a){console.error("cannot use native zlib: "+(a.message||a))}}function K(e,r){if(!j)return Be(e,r);var t=j.InflateRaw;var a=new t;var n=a._processChunk(e.slice(e.l),a._finishFlushFlag);e.l+=a.bytesRead;return n}function Y(e){return j?j.deflateRawSync(e):he(e)}var Q=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15];var J=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258];var Z=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577];function q(e){var r=(e<<1|e<<11)&139536|(e<<5|e<<15)&558144;return(r>>16|r>>8|r)&255}var ee=typeof Uint8Array!=="undefined";var re=ee?new Uint8Array(1<<8):[];for(var te=0;te<1<<8;++te)re[te]=q(te);function ae(e,r){var t=re[e&255];if(r<=8)return t>>>8-r;t=t<<8|re[e>>8&255];if(r<=16)return t>>>16-r;t=t<<8|re[e>>16&255];return t>>>24-r}function ne(e,r){var t=r&7,a=r>>>3;return(e[a]|(t<=6?0:e[a+1]<<8))>>>t&3}function ie(e,r){var t=r&7,a=r>>>3;return(e[a]|(t<=5?0:e[a+1]<<8))>>>t&7}function se(e,r){var t=r&7,a=r>>>3;return(e[a]|(t<=4?0:e[a+1]<<8))>>>t&15}function fe(e,r){var t=r&7,a=r>>>3;return(e[a]|(t<=3?0:e[a+1]<<8))>>>t&31}function le(e,r){var t=r&7,a=r>>>3;return(e[a]|(t<=1?0:e[a+1]<<8))>>>t&127}function oe(e,r,t){var a=r&7,n=r>>>3,i=(1<<t)-1;var s=e[n]>>>a;if(t<8-a)return s&i;s|=e[n+1]<<8-a;if(t<16-a)return s&i;s|=e[n+2]<<16-a;if(t<24-a)return s&i;s|=e[n+3]<<24-a;return s&i}function ce(e,r){var t=e.length,a=2*t>r?2*t:r+5,n=0;if(t>=r)return e;if(g){var i=C(a);if(e.copy)e.copy(i);else for(;n<e.length;++n)i[n]=e[n];return i}else if(ee){var s=new Uint8Array(a);if(s.set)s.set(e);else for(;n<e.length;++n)s[n]=e[n];return s}e.length=a;return e}function ue(e){var r=new Array(e);for(var t=0;t<e;++t)r[t]=0;return r}var he=function(){var e=function(){return function e(r,t){var a=0;while(a<r.length){var n=Math.min(65535,r.length-a);var i=a+n==r.length;t._W(1,+i);t._W(2,n);t._W(2,~n&65535);while(n-- >0)t[t.l++]=r[a++]}return t.l}}();return function(r){var t=zr(50+Math.floor(r.length*1.1));var a=e(r,t);return t.slice(0,a)}}();function de(e,r,t){var a=1,n=0,i=0,s=0,f=0,l=e.length;var o=ee?new Uint16Array(32):ue(32);for(i=0;i<32;++i)o[i]=0;for(i=l;i<t;++i)e[i]=0;l=e.length;var c=ee?new Uint16Array(l):ue(l);for(i=0;i<l;++i){o[n=e[i]]++;if(a<n)a=n;c[i]=0}o[0]=0;for(i=1;i<=a;++i)o[i+16]=f=f+o[i-1]<<1;for(i=0;i<l;++i){f=e[i];if(f!=0)c[i]=o[f+16]++}var u=0;for(i=0;i<l;++i){u=e[i];if(u!=0){f=ae(c[i],a)>>a-u;for(s=(1<<a+4-u)-1;s>=0;--s)r[f|s<<u]=u&15|i<<4}}return a}var ve=ee?new Uint16Array(512):ue(512);var pe=ee?new Uint16Array(32):ue(32);if(!ee){for(var me=0;me<512;++me)ve[me]=0;for(me=0;me<32;++me)pe[me]=0}(function(){var e=[];var r=0;for(;r<32;r++)e.push(5);de(e,pe,32);var t=[];r=0;for(;r<=143;r++)t.push(8);for(;r<=255;r++)t.push(9);for(;r<=279;r++)t.push(7);for(;r<=287;r++)t.push(8);de(t,ve,288)})();var be=ee?new Uint16Array(32768):ue(32768);var ge=ee?new Uint16Array(32768):ue(32768);var Ee=ee?new Uint16Array(128):ue(128);var Se=1,ke=1;function we(e,r){var t=fe(e,r)+257;r+=5;var a=fe(e,r)+1;r+=5;var n=se(e,r)+4;r+=4;var i=0;var s=ee?new Uint8Array(19):ue(19);var f=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];var l=1;var o=ee?new Uint8Array(8):ue(8);var c=ee?new Uint8Array(8):ue(8);var u=s.length;for(var h=0;h<n;++h){s[Q[h]]=i=ie(e,r);if(l<i)l=i;o[i]++;r+=3}var d=0;o[0]=0;for(h=1;h<=l;++h)c[h]=d=d+o[h-1]<<1;for(h=0;h<u;++h)if((d=s[h])!=0)f[h]=c[d]++;var v=0;for(h=0;h<u;++h){v=s[h];if(v!=0){d=re[f[h]]>>8-v;for(var p=(1<<7-v)-1;p>=0;--p)Ee[d|p<<v]=v&7|h<<3}}var m=[];l=1;for(;m.length<t+a;){d=Ee[le(e,r)];r+=d&7;switch(d>>>=3){case 16:i=3+ne(e,r);r+=2;d=m[m.length-1];while(i-- >0)m.push(d);break;case 17:i=3+ie(e,r);r+=3;while(i-- >0)m.push(0);break;case 18:i=11+le(e,r);r+=7;while(i-- >0)m.push(0);break;default:m.push(d);if(l<d)l=d;break;}}var b=m.slice(0,t),g=m.slice(t);for(h=t;h<286;++h)b[h]=0;for(h=a;h<30;++h)g[h]=0;Se=de(b,be,286);ke=de(g,ge,30);return r}function Ce(e,r){if(e[0]==3&&!(e[1]&3)){return[w(r),2]}var t=0;var a=0;var n=C(r?r:1<<18);var i=0;var s=n.length>>>0;var f=0,l=0;while((a&1)==0){a=ie(e,t);t+=3;if(a>>>1==0){if(t&7)t+=8-(t&7);var o=e[t>>>3]|e[(t>>>3)+1]<<8;t+=32;if(!r&&s<i+o){n=ce(n,i+o);s=n.length}if(typeof e.copy==="function"){e.copy(n,i,t>>>3,(t>>>3)+o);i+=o;t+=8*o}else while(o-- >0){n[i++]=e[t>>>3];t+=8}continue}else if(a>>>1==1){f=9;l=5}else{t=we(e,t);f=Se;l=ke}if(!r&&s<i+32767){n=ce(n,i+32767);s=n.length}for(;;){var c=oe(e,t,f);var u=a>>>1==1?ve[c]:be[c];t+=u&15;u>>>=4;if((u>>>8&255)===0)n[i++]=u;else if(u==256)break;else{u-=257;var h=u<8?0:u-4>>2;if(h>5)h=0;var d=i+J[u];if(h>0){d+=oe(e,t,h);t+=h}c=oe(e,t,l);u=a>>>1==1?pe[c]:ge[c];t+=u&15;u>>>=4;var v=u<4?0:u-2>>1;var p=Z[u];if(v>0){p+=oe(e,t,v);t+=v}if(!r&&s<d){n=ce(n,d);s=n.length}while(i<d){n[i]=n[i-p];++i}}}}return[r?n:n.slice(0,i),t+7>>>3]}function Be(e,r){var t=e.slice(e.l||0);var a=Ce(t,r);e.l+=a[1];return a[0]}function Te(e,r){if(e){if(typeof console!=="undefined")console.error(r)}else throw new Error(r)}function xe(e,r){var t=e;Xr(t,0);var a=[],n=[];var i={FileIndex:a,FullPaths:n};I(i,{root:r.root});var f=t.length-4;while((t[f]!=80||t[f+1]!=75||t[f+2]!=5||t[f+3]!=6)&&f>=0)--f;t.l=f+4;t.l+=4;var l=t._R(2);t.l+=6;var o=t._R(4);t.l=o;for(f=0;f<l;++f){t.l+=20;var c=t._R(4);var u=t._R(4);var h=t._R(2);var d=t._R(2);var v=t._R(2);t.l+=8;var p=t._R(4);var m=s(t.slice(t.l+h,t.l+h+d));t.l+=h+d+v;var b=t.l;t.l=p+4;Ie(t,c,u,i,m);t.l=b}return i}function Ie(e,r,t,a,n){e.l+=2;var f=e._R(2);var l=e._R(2);var o=i(e);if(f&8257)throw new Error("Unsupported ZIP encryption");var c=e._R(4);var u=e._R(4);var h=e._R(4);var d=e._R(2);var v=e._R(2);var p="";for(var m=0;m<d;++m)p+=String.fromCharCode(e[e.l++]);if(v){var b=s(e.slice(e.l,e.l+v));if((b[21589]||{}).mt)o=b[21589].mt;if(((n||{})[21589]||{}).mt)o=n[21589].mt}e.l+=v;var g=e.slice(e.l,e.l+u);switch(l){case 8:g=K(e,h);break;case 0:break;default:throw new Error("Unsupported ZIP Compression method "+l);}var E=false;if(f&8){c=e._R(4);if(c==134695760){c=e._R(4);E=true}u=e._R(4);h=e._R(4)}if(u!=r)Te(E,"Bad compressed size: "+r+" != "+u);if(h!=t)Te(E,"Bad uncompressed size: "+t+" != "+h);var S=W.buf(g,0);if(c!=S)Te(E,"Bad CRC32 checksum: "+c+" != "+S);Re(a,p,g,{unsafe:true,mt:o})}function _e(e,r){var t=r||{};var a=[],i=[];var s=zr(1);var f=t.compression?8:0,l=0;var o=false;if(o)l|=8;var c=0,u=0;var h=0,d=0;var v=e.FullPaths[0],p=v,m=e.FileIndex[0];var b=[];var g=0;for(c=1;c<e.FullPaths.length;++c){p=e.FullPaths[c].slice(v.length);m=e.FileIndex[c];if(!m.size||!m.content||p=="
Sh33tJ5")continue;var E=h;var S=zr(p.length);for(u=0;u<p.length;++u)S._W(1,p.charCodeAt(u)&127);S=S.slice(0,S.l);b[d]=W.buf(m.content,0);var k=m.content;if(f==8)k=Y(k);s=zr(30);s._W(4,67324752);s._W(2,20);s._W(2,l);s._W(2,f);if(m.mt)n(s,m.mt);else s._W(4,0);s._W(-4,l&8?0:b[d]);s._W(4,l&8?0:k.length);s._W(4,l&8?0:m.content.length);s._W(2,S.length);s._W(2,0);h+=s.length;a.push(s);h+=S.length;a.push(S);h+=k.length;a.push(k);if(l&8){s=zr(12);s._W(-4,b[d]);s._W(4,k.length);s._W(4,m.content.length);h+=s.l;a.push(s)}s=zr(46);s._W(4,33639248);s._W(2,0);s._W(2,20);s._W(2,l);s._W(2,f);s._W(4,0);s._W(-4,b[d]);s._W(4,k.length);s._W(4,m.content.length);s._W(2,S.length);s._W(2,0);s._W(2,0);s._W(2,0);s._W(2,0);s._W(4,0);s._W(4,E);g+=s.l;i.push(s);g+=S.length;i.push(S);++d}s=zr(22);s._W(4,101010256);s._W(2,0);s._W(2,0);s._W(2,d);s._W(2,d);s._W(4,g);s._W(4,h);s._W(2,0);return A([A(a),A(i),s])}function Ae(e){var r={};I(r,e);return r}function Re(e,r,t,n){var i=n&&n.unsafe;if(!i)I(e);var s=!i&&H.find(e,r);if(!s){var f=e.FullPaths[0];if(r.slice(0,f.length)==f)f=r;else{if(f.slice(-1)!="/")f+="/";f=(f+r).replace("//","/")}s={name:a(r),type:2};e.FileIndex.push(s);e.FullPaths.push(f);if(!i)H.utils.cfb_gc(e)}s.content=t;s.size=t?t.length:0;if(n){if(n.CLSID)s.clsid=n.CLSID;if(n.mt)s.mt=n.mt;if(n.ct)s.ct=n.ct}return s}function ye(e,r){I(e);var t=H.find(e,r);if(t)for(var a=0;a<e.FileIndex.length;++a)if(e.FileIndex[a]==t){e.FileIndex.splice(a,1);e.FullPaths.splice(a,1);return true}return false}function Fe(e,r,t){I(e);var n=H.find(e,r);if(n)for(var i=0;i<e.FileIndex.length;++i)if(e.FileIndex[i]==n){e.FileIndex[i].name=a(t);e.FullPaths[i]=t;return true}return false}function De(e){F(e,true)}e.find=O;e.read=x;e.parse=o;e.write=z;e.writeFile=X;e.utils={cfb_new:Ae,cfb_add:Re,cfb_del:ye,cfb_mov:Fe,cfb_gc:De,ReadShift:Mr,CheckField:Vr,prep_blob:Xr,bconcat:A,use_zlib:$,_deflateRaw:he,_inflateRaw:Be,consts:V};return e}();if(typeof require!=="undefined"&&typeof module!=="undefined"&&typeof U==="undefined"){module.exports=H}var V;if(typeof require!=="undefined")try{V=require("fs")}catch(k){}function X(e){if(typeof e==="string")return T(e);if(Array.isArray(e))return I(e);return e}function G(e,r,t){if(typeof V!=="undefined"&&V.writeFileSync)return t?V.writeFileSync(e,r,t):V.writeFileSync(e,r);var a=t=="utf8"?Ge(r):r;if(typeof IE_SaveFile!=="undefined")return IE_SaveFile(a,e);if(typeof Blob!=="undefined"){var n=new Blob([X(a)],{type:"application/octet-stream"});if(typeof navigator!=="undefined"&&navigator.msSaveBlob)return navigator.msSaveBlob(n,e);if(typeof saveAs!=="undefined")return saveAs(n,e);if(typeof URL!=="undefined"&&typeof document!=="undefined"&&document.createElement&&URL.createObjectURL){var i=URL.createObjectURL(n);if(typeof chrome==="object"&&typeof(chrome.downloads||{}).download=="function"){if(URL.revokeObjectURL&&typeof setTimeout!=="undefined")setTimeout(function(){URL.revokeObjectURL(i)},6e4);return chrome.downloads.download({url:i,filename:e,saveAs:true})}var s=document.createElement("a");if(s.download!=null){s.download=e;s.href=i;document.body.appendChild(s);s.click();document.body.removeChild(s);if(URL.revokeObjectURL&&typeof setTimeout!=="undefined")setTimeout(function(){URL.revokeObjectURL(i)},6e4);return i}}}if(typeof $!=="undefined"&&typeof File!=="undefined"&&typeof Folder!=="undefined")try{var f=File(e);f.open("w");f.encoding="binary";if(Array.isArray(r))r=x(r);f.write(r);f.close();return r}catch(l){if(!l.message||!l.message.match(/onstruct/))throw l}throw new Error("cannot save file "+e)}function z(e){if(typeof V!=="undefined")return V.readFileSync(e);if(typeof $!=="undefined"&&typeof File!=="undefined"&&typeof Folder!=="undefined")try{var r=File(e);r.open("r");r.encoding="binary";var t=r.read();r.close();return t}catch(a){if(!a.message||!a.message.match(/onstruct/))throw a}throw new Error("Cannot access file "+e)}function j(e){var r=Object.keys(e),t=[];for(var a=0;a<r.length;++a)if(e.hasOwnProperty(r[a]))t.push(r[a]);return t}function K(e,r){var t=[],a=j(e);for(var n=0;n!==a.length;++n)if(t[e[a[n]][r]]==null)t[e[a[n]][r]]=a[n];return t}function Y(e){var r=[],t=j(e);for(var a=0;a!==t.length;++a)r[e[t[a]]]=t[a];return r}function Q(e){var r=[],t=j(e);for(var a=0;a!==t.length;++a)r[e[t[a]]]=parseInt(t[a],10);return r}function J(e){var r=[],t=j(e);for(var a=0;a!==t.length;++a){if(r[e[t[a]]]==null)r[e[t[a]]]=[];r[e[t[a]]].push(t[a])}return r}var Z=new Date(1899,11,30,0,0,0);var q=Z.getTime()+((new Date).getTimezoneOffset()-Z.getTimezoneOffset())*6e4;function ee(e,r){var t=e.getTime();if(r)t-=1462*24*60*60*1e3;return(t-q)/(24*60*60*1e3)}function re(e){var r=new Date;r.setTime(e*24*60*60*1e3+q);return r}function te(e){var r=0,t=0,a=false;var n=e.match(/P([0-9\.]+Y)?([0-9\.]+M)?([0-9\.]+D)?T([0-9\.]+H)?([0-9\.]+M)?([0-9\.]+S)?/);if(!n)throw new Error("|"+e+"| is not an ISO8601 Duration");for(var i=1;i!=n.length;++i){if(!n[i])continue;t=1;if(i>3)a=true;switch(n[i].slice(n[i].length-1)){case"Y":throw new Error("Unsupported ISO Duration Field: "+n[i].slice(n[i].length-1));case"D":t*=24;case"H":t*=60;case"M":if(!a)throw new Error("Unsupported ISO Duration Field: M");else t*=60;case"S":break;}r+=t*parseInt(n[i],10)}return r}var ae=new Date("2017-02-19T19:06:09.000Z");if(isNaN(ae.getFullYear()))ae=new Date("2/19/17");var ne=ae.getFullYear()==2017;function ie(e,r){var t=new Date(e);if(ne){if(r>0)t.setTime(t.getTime()+t.getTimezoneOffset()*60*1e3);else if(r<0)t.setTime(t.getTime()-t.getTimezoneOffset()*60*1e3);return t}if(e instanceof Date)return e;if(ae.getFullYear()==1917&&!isNaN(t.getFullYear())){var a=t.getFullYear();if(e.indexOf(""+a)>-1)return t;t.setFullYear(t.getFullYear()+100);return t}var n=e.match(/\d+/g)||["2017","2","19","0","0","0"];var i=new Date(+n[0],+n[1]-1,+n[2],+n[3]||0,+n[4]||0,+n[5]||0);if(e.indexOf("Z")>-1)i=new Date(i.getTime()-i.getTimezoneOffset()*60*1e3);return i}function se(e){var r="";for(var t=0;t!=e.length;++t)r+=String.fromCharCode(e[t]);return r}function fe(e){if(typeof JSON!="undefined"&&!Array.isArray(e))return JSON.parse(JSON.stringify(e));if(typeof e!="object"||e==null)return e;if(e instanceof Date)return new Date(e.getTime());var r={};for(var t in e)if(e.hasOwnProperty(t))r[t]=fe(e[t]);return r}function le(e,r){var t="";while(t.length<r)t+=e;return t}function oe(e){var r=Number(e);if(!isNaN(r))return r;var t=1;var a=e.replace(/([\d]),([\d])/g,"$1$2").replace(/[$]/g,"").replace(/[%]/g,function(){t*=100;return""});if(!isNaN(r=Number(a)))return r/t;a=a.replace(/[(](.*)[)]/,function(e,r){t=-t;return r});if(!isNaN(r=Number(a)))return r/t;return r}function ce(e){var r=new Date(e),t=new Date(NaN);var a=r.getYear(),n=r.getMonth(),i=r.getDate();if(isNaN(i))return t;if(a<0||a>8099)return t;if((n>0||i>1)&&a!=101)return r;if(e.toLowerCase().match(/jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec/))return r;if(e.match(/[^-0-9:,\/\\]/))return t;return r}var ue="abacaba".split(/(:?b)/i).length==5;function he(e,r,t){if(ue||typeof r=="string")return e.split(r);var a=e.split(r),n=[a[0]];for(var i=1;i<a.length;++i){n.push(t);n.push(a[i])}return n}function de(e){if(!e)return null;if(e.data)return d(e.data);if(e.asNodeBuffer&&g)return d(e.asNodeBuffer().toString("binary"));if(e.asBinary)return d(e.asBinary());if(e._data&&e._data.getContent)return d(se(Array.prototype.slice.call(e._data.getContent(),0)));return null}function ve(e){if(!e)return null;if(e.data)return c(e.data);if(e.asNodeBuffer&&g)return e.asNodeBuffer();if(e._data&&e._data.getContent){var r=e._data.getContent();if(typeof r=="string")return c(r);return Array.prototype.slice.call(r)}return null}function pe(e){return e&&e.name.slice(-4)===".bin"?ve(e):de(e)}function me(e,r){var t=j(e.files);var a=r.toLowerCase(),n=a.replace(/\//g,"\\");for(var i=0;i<t.length;++i){var s=t[i].toLowerCase();if(a==s||n==s)return e.files[t[i]]}return null}function be(e,r){var t=me(e,r);if(t==null)throw new Error("Cannot find file "+r+" in zip");return t}function ge(e,r,t){if(!t)return pe(be(e,r));if(!r)return null;try{return ge(e,r)}catch(a){return null}}function Ee(e,r,t){if(!t)return de(be(e,r));if(!r)return null;try{return Ee(e,r)}catch(a){return null}}function Se(e){var r=j(e.files),t=[];for(var a=0;a<r.length;++a)if(r[a].slice(-1)!="/")t.push(r[a]);return t.sort()}var ke;if(typeof JSZipSync!=="undefined")ke=JSZipSync;if(typeof exports!=="undefined"){if(typeof module!=="undefined"&&module.exports){if(typeof ke==="undefined")ke=undefined}}function we(e,r){var t=r.split("/");if(r.slice(-1)!="/")t.pop();var a=e.split("/");while(a.length!==0){var n=a.shift();if(n==="..")t.pop();else if(n!==".")t.push(n)}return t.join("/")}var Ce='<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\r\n';var Be=/([^"\s?>\/]+)\s*=\s*((?:")([^"]*)(?:")|(?:')([^']*)(?:')|([^'">\s]+))/g;var Te=/<[\/\?]?[a-zA-Z0-9:]+(?:\s+[^"\s?>\/]+\s*=\s*(?:"[^"]*"|'[^']*'|[^'">\s=]+))*\s?[\/\?]?>/g;if(!Ce.match(Te))Te=/<[^>]*>/g;var xe=/<\w*:/,Ie=/<(\/?)\w+:/;function _e(e,r){var t={};var a=0,n=0;for(;a!==e.length;++a)if((n=e.charCodeAt(a))===32||n===10||n===13)break;if(!r)t[0]=e.slice(0,a);if(a===e.length)return t;var i=e.match(Be),s=0,f="",l=0,o="",c="",u=1;if(i)for(l=0;l!=i.length;++l){c=i[l];for(n=0;n!=c.length;++n)if(c.charCodeAt(n)===61)break;o=c.slice(0,n).trim();while(c.charCodeAt(n+1)==32)++n;u=(a=c.charCodeAt(n+1))==34||a==39?1:0;f=c.slice(n+1+u,c.length-u);for(s=0;s!=o.length;++s)if(o.charCodeAt(s)===58)break;if(s===o.length){if(o.indexOf("_")>0)o=o.slice(0,o.indexOf("_"));t[o]=f;t[o.toLowerCase()]=f}else{var h=(s===5&&o.slice(0,5)==="xmlns"?"xmlns":"")+o.slice(s+1);if(t[h]&&o.slice(s-3,s)=="ext")continue;t[h]=f;t[h.toLowerCase()]=f}}return t}function Ae(e){return e.replace(Ie,"<$1")}var Re={"&quot;":'"',"&apos;":"'","&gt;":">","&lt;":"<","&amp;":"&"};var ye=Y(Re);var Fe=function(){var e=/&(?:quot|apos|gt|lt|amp|#x?([\da-fA-F]+));/g,r=/_x([\da-fA-F]{4})_/g;return function t(a){var n=a+"",i=n.indexOf("<![CDATA[");if(i==-1)return n.replace(e,function(e,r){return Re[e]||String.fromCharCode(parseInt(r,e.indexOf("x")>-1?16:10))||e}).replace(r,function(e,r){return String.fromCharCode(parseInt(r,16))});var s=n.indexOf("]]>");return t(n.slice(0,i))+n.slice(i+9,s)+t(n.slice(s+3))}}();var De=/[&<>'"]/g,Oe=/[\u0000-\u0008\u000b-\u001f]/g;function Pe(e){var r=e+"";return r.replace(De,function(e){return ye[e]}).replace(Oe,function(e){return"_x"+("000"+e.charCodeAt(0).toString(16)).slice(-4)+"_"})}function Ne(e){return Pe(e).replace(/ /g,"_x0020_")}var Me=/[\u0000-\u001f]/g;function Le(e){var r=e+"";return r.replace(De,function(e){return ye[e]}).replace(/\n/g,"<br/>").replace(Me,function(e){return"&#x"+("000"+e.charCodeAt(0).toString(16)).slice(-4)+";"})}function Ue(e){var r=e+"";return r.replace(De,function(e){return ye[e]}).replace(Me,function(e){return"&#x"+e.charCodeAt(0).toString(16).toUpperCase()+";"})}var We=function(){var e=/&#(\d+);/g;function r(e,r){return String.fromCharCode(parseInt(r,10))}return function t(a){return a.replace(e,r)}}();var He=function(){return function e(r){return r.replace(/(\r\n|[\r\n])/g,"&#10;")}}();function Ve(e){switch(e){case 1:;case true:;case"1":;case"true":;case"TRUE":return true;default:return false;}}var Xe=function jm(e){var r="",t=0,a=0,n=0,i=0,s=0,f=0;while(t<e.length){a=e.charCodeAt(t++);if(a<128){r+=String.fromCharCode(a);continue}n=e.charCodeAt(t++);if(a>191&&a<224){s=(a&31)<<6;s|=n&63;r+=String.fromCharCode(s);continue}i=e.charCodeAt(t++);if(a<240){r+=String.fromCharCode((a&15)<<12|(n&63)<<6|i&63);continue}s=e.charCodeAt(t++);f=((a&7)<<18|(n&63)<<12|(i&63)<<6|s&63)-65536;r+=String.fromCharCode(55296+(f>>>10&1023));r+=String.fromCharCode(56320+(f&1023))}return r};var Ge=function(e){var r=[],t=0,a=0,n=0;while(t<e.length){a=e.charCodeAt(t++);switch(true){case a<128:r.push(String.fromCharCode(a));break;case a<2048:r.push(String.fromCharCode(192+(a>>6)));r.push(String.fromCharCode(128+(a&63)));break;case a>=55296&&a<57344:a-=55296;n=e.charCodeAt(t++)-56320+(a<<10);r.push(String.fromCharCode(240+(n>>18&7)));r.push(String.fromCharCode(144+(n>>12&63)));r.push(String.fromCharCode(128+(n>>6&63)));r.push(String.fromCharCode(128+(n&63)));break;default:r.push(String.fromCharCode(224+(a>>12)));r.push(String.fromCharCode(128+(a>>6&63)));r.push(String.fromCharCode(128+(a&63)));}}return r.join("")};if(g){var ze=function $m(e){var r=Buffer.alloc(2*e.length),t,a,n=1,i=0,s=0,f;for(a=0;a<e.length;a+=n){n=1;if((f=e.charCodeAt(a))<128)t=f;else if(f<224){t=(f&31)*64+(e.charCodeAt(a+1)&63);n=2}else if(f<240){t=(f&15)*4096+(e.charCodeAt(a+1)&63)*64+(e.charCodeAt(a+2)&63);n=3}else{n=4;t=(f&7)*262144+(e.charCodeAt(a+1)&63)*4096+(e.charCodeAt(a+2)&63)*64+(e.charCodeAt(a+3)&63);t-=65536;s=55296+(t>>>10&1023);t=56320+(t&1023)}if(s!==0){r[i++]=s&255;r[i++]=s>>>8;s=0}r[i++]=t%256;r[i++]=t>>>8}return r.slice(0,i).toString("ucs2")};var je="foo bar baz☃🍣";if(Xe(je)==ze(je))Xe=ze;var $e=function Km(e){return E(e,"binary").toString("utf8")};if(Xe(je)==$e(je))Xe=$e;Ge=function(e){return E(e,"utf8").toString("binary")}}var Ke=function(){var e={};return function r(t,a){var n=t+"|"+(a||"");if(e[n])return e[n];return e[n]=new RegExp("<(?:\\w+:)?"+t+'(?: xml:space="preserve")?(?:[^>]*)>([\\s\\S]*?)</(?:\\w+:)?'+t+">",a||"")}}();var Ye=function(){var e=[["nbsp"," "],["middot","·"],["quot",'"'],["apos","'"],["gt",">"],["lt","<"],["amp","&"]].map(function(e){return[new RegExp("&"+e[0]+";","g"),e[1]]});return function r(t){var a=t.replace(/^[\t\n\r ]+/,"").replace(/[\t\n\r ]+$/,"").replace(/[\t\n\r ]+/g," ").replace(/<\s*[bB][rR]\s*\/?>/g,"\n").replace(/<[^>]*>/g,"");
+for(var n=0;n<e.length;++n)a=a.replace(e[n][0],e[n][1]);return a}}();var Qe=function(){var e={};return function r(t){if(e[t]!==undefined)return e[t];return e[t]=new RegExp("<(?:vt:)?"+t+">([\\s\\S]*?)</(?:vt:)?"+t+">","g")}}();var Je=/<\/?(?:vt:)?variant>/g,Ze=/<(?:vt:)([^>]*)>([\s\S]*)</;function qe(e,r){var t=_e(e);var a=e.match(Qe(t.baseType))||[];var n=[];if(a.length!=t.size){if(r.WTF)throw new Error("unexpected vector length "+a.length+" != "+t.size);return n}a.forEach(function(e){var r=e.replace(Je,"").match(Ze);if(r)n.push({v:Xe(r[2]),t:r[1]})});return n}var er=/(^\s|\s$|\n)/;function rr(e,r){return"<"+e+(r.match(er)?' xml:space="preserve"':"")+">"+r+"</"+e+">"}function tr(e){return j(e).map(function(r){return" "+r+'="'+e[r]+'"'}).join("")}function ar(e,r,t){return"<"+e+(t!=null?tr(t):"")+(r!=null?(r.match(er)?' xml:space="preserve"':"")+">"+r+"</"+e:"/")+">"}function nr(e,r){try{return e.toISOString().replace(/\.\d*/,"")}catch(t){if(r)throw t}return""}function ir(e){switch(typeof e){case"string":return ar("vt:lpwstr",e);case"number":return ar((e|0)==e?"vt:i4":"vt:r8",String(e));case"boolean":return ar("vt:bool",e?"true":"false");}if(e instanceof Date)return ar("vt:filetime",nr(e));throw new Error("Unable to serialize "+e)}var sr={dc:"http://purl.org/dc/elements/1.1/",dcterms:"http://purl.org/dc/terms/",dcmitype:"http://purl.org/dc/dcmitype/",mx:"http://schemas.microsoft.com/office/mac/excel/2008/main",r:"http://schemas.openxmlformats.org/officeDocument/2006/relationships",sjs:"http://schemas.openxmlformats.org/package/2006/sheetjs/core-properties",vt:"http://schemas.openxmlformats.org/officeDocument/2006/docPropsVTypes",xsi:"http://www.w3.org/2001/XMLSchema-instance",xsd:"http://www.w3.org/2001/XMLSchema"};sr.main=["http://schemas.openxmlformats.org/spreadsheetml/2006/main","http://purl.oclc.org/ooxml/spreadsheetml/main","http://schemas.microsoft.com/office/excel/2006/main","http://schemas.microsoft.com/office/excel/2006/2"];var fr={o:"urn:schemas-microsoft-com:office:office",x:"urn:schemas-microsoft-com:office:excel",ss:"urn:schemas-microsoft-com:office:spreadsheet",dt:"uuid:C2F41010-65B3-11d1-A29F-00AA00C14882",mv:"http://macVmlSchemaUri",v:"urn:schemas-microsoft-com:vml",html:"http://www.w3.org/TR/REC-html40"};function lr(e,r){var t=1-2*(e[r+7]>>>7);var a=((e[r+7]&127)<<4)+(e[r+6]>>>4&15);var n=e[r+6]&15;for(var i=5;i>=0;--i)n=n*256+e[r+i];if(a==2047)return n==0?t*Infinity:NaN;if(a==0)a=-1022;else{a-=1023;n+=Math.pow(2,52)}return t*Math.pow(2,a-52)*n}function or(e,r,t){var a=(r<0||1/r==-Infinity?1:0)<<7,n=0,i=0;var s=a?-r:r;if(!isFinite(s)){n=2047;i=isNaN(r)?26985:0}else if(s==0)n=i=0;else{n=Math.floor(Math.log(s)/Math.LN2);i=s*Math.pow(2,52-n);if(n<=-1023&&(!isFinite(i)||i<Math.pow(2,52))){n=-1022}else{i-=Math.pow(2,52);n+=1023}}for(var f=0;f<=5;++f,i/=256)e[t+f]=i&255;e[t+6]=(n&15)<<4|i&15;e[t+7]=n>>4|a}var cr=function(e){var r=[],t=10240;for(var a=0;a<e[0].length;++a)if(e[0][a])for(var n=0,i=e[0][a].length;n<i;n+=t)r.push.apply(r,e[0][a].slice(n,n+t));return r};var ur=cr;var hr=function(e,r,t){var a=[];for(var n=r;n<t;n+=2)a.push(String.fromCharCode(Fr(e,n)));return a.join("").replace(R,"")};var dr=hr;var vr=function(e,r,t){var a=[];for(var n=r;n<r+t;++n)a.push(("0"+e[n].toString(16)).slice(-2));return a.join("")};var pr=vr;var mr=function(e,r,t){var a=[];for(var n=r;n<t;n++)a.push(String.fromCharCode(yr(e,n)));return a.join("")};var br=mr;var gr=function(e,r){var t=Or(e,r);return t>0?mr(e,r+4,r+4+t-1):""};var Er=gr;var Sr=function(e,r){var t=Or(e,r);return t>0?mr(e,r+4,r+4+t-1):""};var kr=Sr;var wr=function(e,r){var t=2*Or(e,r);return t>0?mr(e,r+4,r+4+t-1):""};var Cr=wr;var Br,Tr;Br=Tr=function Ym(e,r){var t=Or(e,r);return t>0?hr(e,r+4,r+4+t):""};var xr=function(e,r){var t=Or(e,r);return t>0?mr(e,r+4,r+4+t):""};var Ir=xr;var _r,Ar;_r=Ar=function(e,r){return lr(e,r)};var Rr=function Qm(e){return Array.isArray(e)};if(g){hr=function(e,r,t){if(!Buffer.isBuffer(e))return dr(e,r,t);return e.toString("utf16le",r,t).replace(R,"")};vr=function(e,r,t){return Buffer.isBuffer(e)?e.toString("hex",r,r+t):pr(e,r,t)};gr=function Jm(e,r){if(!Buffer.isBuffer(e))return Er(e,r);var t=e.readUInt32LE(r);return t>0?e.toString("utf8",r+4,r+4+t-1):""};Sr=function Zm(e,r){if(!Buffer.isBuffer(e))return kr(e,r);var t=e.readUInt32LE(r);return t>0?e.toString("utf8",r+4,r+4+t-1):""};wr=function qm(e,r){if(!Buffer.isBuffer(e))return Cr(e,r);var t=2*e.readUInt32LE(r);return e.toString("utf16le",r+4,r+4+t-1)};Br=function eb(e,r){if(!Buffer.isBuffer(e))return Tr(e,r);var t=e.readUInt32LE(r);return e.toString("utf16le",r+4,r+4+t)};xr=function rb(e,r){if(!Buffer.isBuffer(e))return Ir(e,r);var t=e.readUInt32LE(r);return e.toString("utf8",r+4,r+4+t)};mr=function tb(e,r,t){return Buffer.isBuffer(e)?e.toString("utf8",r,t):br(e,r,t)};cr=function(e){return e[0].length>0&&Buffer.isBuffer(e[0][0])?Buffer.concat(e[0]):ur(e)};A=function(e){return Buffer.isBuffer(e[0])?Buffer.concat(e):[].concat.apply([],e)};_r=function ab(e,r){if(Buffer.isBuffer(e))return e.readDoubleLE(r);return Ar(e,r)};Rr=function nb(e){return Buffer.isBuffer(e)||Array.isArray(e)}}if(typeof cptable!=="undefined"){hr=function(e,r,t){return cptable.utils.decode(1200,e.slice(r,t)).replace(R,"")};mr=function(e,r,t){return cptable.utils.decode(65001,e.slice(r,t))};gr=function(e,r){var a=Or(e,r);return a>0?cptable.utils.decode(t,e.slice(r+4,r+4+a-1)):""};Sr=function(e,t){var a=Or(e,t);return a>0?cptable.utils.decode(r,e.slice(t+4,t+4+a-1)):""};wr=function(e,r){var t=2*Or(e,r);return t>0?cptable.utils.decode(1200,e.slice(r+4,r+4+t-1)):""};Br=function(e,r){var t=Or(e,r);return t>0?cptable.utils.decode(1200,e.slice(r+4,r+4+t)):""};xr=function(e,r){var t=Or(e,r);return t>0?cptable.utils.decode(65001,e.slice(r+4,r+4+t)):""}}var yr=function(e,r){return e[r]};var Fr=function(e,r){return e[r+1]*(1<<8)+e[r]};var Dr=function(e,r){var t=e[r+1]*(1<<8)+e[r];return t<32768?t:(65535-t+1)*-1};var Or=function(e,r){return e[r+3]*(1<<24)+(e[r+2]<<16)+(e[r+1]<<8)+e[r]};var Pr=function(e,r){return e[r+3]<<24|e[r+2]<<16|e[r+1]<<8|e[r]};var Nr=function(e,r){return e[r]<<24|e[r+1]<<16|e[r+2]<<8|e[r+3]};function Mr(e,t){var a="",n,i,s=[],f,l,o,c;switch(t){case"dbcs":c=this.l;if(g&&Buffer.isBuffer(this))a=this.slice(this.l,this.l+2*e).toString("utf16le");else for(o=0;o<e;++o){a+=String.fromCharCode(Fr(this,c));c+=2}e*=2;break;case"utf8":a=mr(this,this.l,this.l+e);break;case"utf16le":e*=2;a=hr(this,this.l,this.l+e);break;case"wstr":if(typeof cptable!=="undefined")a=cptable.utils.decode(r,this.slice(this.l,this.l+2*e));else return Mr.call(this,e,"dbcs");e=2*e;break;case"lpstr-ansi":a=gr(this,this.l);e=4+Or(this,this.l);break;case"lpstr-cp":a=Sr(this,this.l);e=4+Or(this,this.l);break;case"lpwstr":a=wr(this,this.l);e=4+2*Or(this,this.l);break;case"lpp4":e=4+Or(this,this.l);a=Br(this,this.l);if(e&2)e+=2;break;case"8lpp4":e=4+Or(this,this.l);a=xr(this,this.l);if(e&3)e+=4-(e&3);break;case"cstr":e=0;a="";while((f=yr(this,this.l+e++))!==0)s.push(v(f));a=s.join("");break;case"_wstr":e=0;a="";while((f=Fr(this,this.l+e))!==0){s.push(v(f));e+=2}e+=2;a=s.join("");break;case"dbcs-cont":a="";c=this.l;for(o=0;o<e;++o){if(this.lens&&this.lens.indexOf(c)!==-1){f=yr(this,c);this.l=c+1;l=Mr.call(this,e-o,f?"dbcs-cont":"sbcs-cont");return s.join("")+l}s.push(v(Fr(this,c)));c+=2}a=s.join("");e*=2;break;case"cpstr":if(typeof cptable!=="undefined"){a=cptable.utils.decode(r,this.slice(this.l,this.l+e));break};case"sbcs-cont":a="";c=this.l;for(o=0;o!=e;++o){if(this.lens&&this.lens.indexOf(c)!==-1){f=yr(this,c);this.l=c+1;l=Mr.call(this,e-o,f?"dbcs-cont":"sbcs-cont");return s.join("")+l}s.push(v(yr(this,c)));c+=1}a=s.join("");break;default:switch(e){case 1:n=yr(this,this.l);this.l++;return n;case 2:n=(t==="i"?Dr:Fr)(this,this.l);this.l+=2;return n;case 4:;case-4:if(t==="i"||(this[this.l+3]&128)===0){n=(e>0?Pr:Nr)(this,this.l);this.l+=4;return n}else{i=Or(this,this.l);this.l+=4}return i;case 8:;case-8:if(t==="f"){if(e==8)i=_r(this,this.l);else i=_r([this[this.l+7],this[this.l+6],this[this.l+5],this[this.l+4],this[this.l+3],this[this.l+2],this[this.l+1],this[this.l+0]],0);this.l+=8;return i}else e=8;case 16:a=vr(this,this.l,e);break;};}this.l+=e;return a}var Lr=function(e,r,t){e[t]=r&255;e[t+1]=r>>>8&255;e[t+2]=r>>>16&255;e[t+3]=r>>>24&255};var Ur=function(e,r,t){e[t]=r&255;e[t+1]=r>>8&255;e[t+2]=r>>16&255;e[t+3]=r>>24&255};var Wr=function(e,r,t){e[t]=r&255;e[t+1]=r>>>8&255};function Hr(e,r,t){var a=0,n=0;if(t==="dbcs"){for(n=0;n!=r.length;++n)Wr(this,r.charCodeAt(n),this.l+2*n);a=2*r.length}else if(t==="sbcs"){r=r.replace(/[^\x00-\x7F]/g,"_");for(n=0;n!=r.length;++n)this[this.l+n]=r.charCodeAt(n)&255;a=r.length}else if(t==="hex"){for(;n<e;++n){this[this.l++]=parseInt(r.slice(2*n,2*n+2),16)||0}return this}else if(t==="utf16le"){var i=Math.min(this.l+e,this.length);for(n=0;n<Math.min(r.length,e);++n){var s=r.charCodeAt(n);this[this.l++]=s&255;this[this.l++]=s>>8}while(this.l<i)this[this.l++]=0;return this}else switch(e){case 1:a=1;this[this.l]=r&255;break;case 2:a=2;this[this.l]=r&255;r>>>=8;this[this.l+1]=r&255;break;case 3:a=3;this[this.l]=r&255;r>>>=8;this[this.l+1]=r&255;r>>>=8;this[this.l+2]=r&255;break;case 4:a=4;Lr(this,r,this.l);break;case 8:a=8;if(t==="f"){or(this,r,this.l);break};case 16:break;case-4:a=4;Ur(this,r,this.l);break;}this.l+=a;return this}function Vr(e,r){var t=vr(this,this.l,e.length>>1);if(t!==e)throw new Error(r+"Expected "+e+" saw "+t);this.l+=e.length>>1}function Xr(e,r){e.l=r;e._R=Mr;e.chk=Vr;e._W=Hr}function Gr(e,r){e.l+=r}function zr(e){var r=w(e);Xr(r,0);return r}function jr(e,r,t){if(!e)return;var a,n,i;Xr(e,e.l||0);var s=e.length,f=0,l=0;while(e.l<s){f=e._R(1);if(f&128)f=(f&127)+((e._R(1)&127)<<7);var o=up[f]||up[65535];a=e._R(1);i=a&127;for(n=1;n<4&&a&128;++n)i+=((a=e._R(1))&127)<<7*n;l=e.l+i;var c=(o.f||Gr)(e,i,t);e.l=l;if(r(c,o.n,f))return}}function $r(){var e=[],r=g?256:2048;var t=function l(e){var r=zr(e);Xr(r,0);return r};var a=t(r);var n=function o(){if(!a)return;if(a.length>a.l){a=a.slice(0,a.l);a.l=a.length}if(a.length>0)e.push(a);a=null};var i=function c(e){if(a&&e<a.length-a.l)return a;n();return a=t(Math.max(e+1,r))};var s=function u(){n();return cr([e])};var f=function h(e){n();a=e;if(a.l==null)a.l=a.length;i(r)};return{next:i,push:f,end:s,_bufs:e}}function Kr(e,r,t,a){var n=+hp[r],i;if(isNaN(n))return;if(!a)a=up[n].p||(t||[]).length||0;i=1+(n>=128?1:0)+1;if(a>=128)++i;if(a>=16384)++i;if(a>=2097152)++i;var s=e.next(i);if(n<=127)s._W(1,n);else{s._W(1,(n&127)+128);s._W(1,n>>7)}for(var f=0;f!=4;++f){if(a>=128){s._W(1,(a&127)+128);a>>=7}else{s._W(1,a);break}}if(a>0&&Rr(t))e.push(t)}function Yr(e,r,t){var a=fe(e);if(r.s){if(a.cRel)a.c+=r.s.c;if(a.rRel)a.r+=r.s.r}else{if(a.cRel)a.c+=r.c;if(a.rRel)a.r+=r.r}if(!t||t.biff<12){while(a.c>=256)a.c-=256;while(a.r>=65536)a.r-=65536}return a}function Qr(e,r,t){var a=fe(e);a.s=Yr(a.s,r.s,t);a.e=Yr(a.e,r.s,t);return a}function Jr(e,r){if(e.cRel&&e.c<0){e=fe(e);e.c+=r>8?16384:256}if(e.rRel&&e.r<0){e=fe(e);e.r+=r>8?1048576:r>5?65536:16384}var t=ut(e);if(e.cRel===0)t=ft(t);if(e.rRel===0)t=at(t);return t}function Zr(e,r){if(e.s.r==0&&!e.s.rRel){if(e.e.r==(r.biff>=12?1048575:r.biff>=8?65536:16384)&&!e.e.rRel){return(e.s.cRel?"":"$")+st(e.s.c)+":"+(e.e.cRel?"":"$")+st(e.e.c)}}if(e.s.c==0&&!e.s.cRel){if(e.e.c==(r.biff>=12?65535:255)&&!e.e.cRel){return(e.s.rRel?"":"$")+tt(e.s.r)+":"+(e.e.rRel?"":"$")+tt(e.e.r)}}return Jr(e.s,r.biff)+":"+Jr(e.e,r.biff)}var qr={};var et=function(e,r){var t;if(typeof r!=="undefined")t=r;else if(typeof require!=="undefined"){try{t=undefined}catch(a){t=null}}e.rc4=function(e,r){var t=new Array(256);var a=0,n=0,i=0,s=0;for(n=0;n!=256;++n)t[n]=n;for(n=0;n!=256;++n){i=i+t[n]+e[n%e.length].charCodeAt(0)&255;s=t[n];t[n]=t[i];t[i]=s}n=i=0;var f=Buffer(r.length);for(a=0;a!=r.length;++a){n=n+1&255;i=(i+t[n])%256;s=t[n];t[n]=t[i];t[i]=s;f[a]=r[a]^t[t[n]+t[i]&255]}return f};e.md5=function(e){if(!t)throw new Error("Unsupported crypto");return t.createHash("md5").update(e).digest("hex")}};et(qr,typeof crypto!=="undefined"?crypto:undefined);function rt(e){return parseInt(nt(e),10)-1}function tt(e){return""+(e+1)}function at(e){return e.replace(/([A-Z]|^)(\d+)$/,"$1$$$2")}function nt(e){return e.replace(/\$(\d+)$/,"$1")}function it(e){var r=lt(e),t=0,a=0;for(;a!==r.length;++a)t=26*t+r.charCodeAt(a)-64;return t-1}function st(e){var r="";for(++e;e;e=Math.floor((e-1)/26))r=String.fromCharCode((e-1)%26+65)+r;return r}function ft(e){return e.replace(/^([A-Z])/,"$$$1")}function lt(e){return e.replace(/^\$([A-Z])/,"$1")}function ot(e){return e.replace(/(\$?[A-Z]*)(\$?\d*)/,"$1,$2").split(",")}function ct(e){var r=ot(e);return{c:it(r[0]),r:rt(r[1])}}function ut(e){return st(e.c)+tt(e.r)}function ht(e){var r=e.split(":").map(ct);return{s:r[0],e:r[r.length-1]}}function dt(e,r){if(typeof r==="undefined"||typeof r==="number"){return dt(e.s,e.e)}if(typeof e!=="string")e=ut(e);if(typeof r!=="string")r=ut(r);return e==r?e:e+":"+r}function vt(e){var r={s:{c:0,r:0},e:{c:0,r:0}};var t=0,a=0,n=0;var i=e.length;for(t=0;a<i;++a){if((n=e.charCodeAt(a)-64)<1||n>26)break;t=26*t+n}r.s.c=--t;for(t=0;a<i;++a){if((n=e.charCodeAt(a)-48)<0||n>9)break;t=10*t+n}r.s.r=--t;if(a===i||e.charCodeAt(++a)===58){r.e.c=r.s.c;r.e.r=r.s.r;return r}for(t=0;a!=i;++a){if((n=e.charCodeAt(a)-64)<1||n>26)break;t=26*t+n}r.e.c=--t;for(t=0;a!=i;++a){if((n=e.charCodeAt(a)-48)<0||n>9)break;t=10*t+n}r.e.r=--t;return r}function pt(e,r){var t=e.t=="d"&&r instanceof Date;if(e.z!=null)try{return e.w=F.format(e.z,t?ee(r):r)}catch(a){}try{return e.w=F.format((e.XF||{}).numFmtId||(t?14:0),t?ee(r):r)}catch(a){return""+r}}function mt(e,r,t){if(e==null||e.t==null||e.t=="z")return"";if(e.w!==undefined)return e.w;if(e.t=="d"&&!e.z&&t&&t.dateNF)e.z=t.dateNF;if(r==undefined)return pt(e,e.v);return pt(e,r)}function bt(e,r){var t=r&&r.sheet?r.sheet:"Sheet1";var a={};a[t]=e;return{SheetNames:[t],Sheets:a}}function gt(e,r,t){var a=t||{};var n=e?Array.isArray(e):a.dense;if(p!=null&&n==null)n=p;var i=e||(n?[]:{});var s=0,f=0;if(i&&a.origin!=null){if(typeof a.origin=="number")s=a.origin;else{var l=typeof a.origin=="string"?ct(a.origin):a.origin;s=l.r;f=l.c}}var o={s:{c:1e7,r:1e7},e:{c:0,r:0}};if(i["!ref"]){var c=vt(i["!ref"]);o.s.c=c.s.c;o.s.r=c.s.r;o.e.c=Math.max(o.e.c,c.e.c);o.e.r=Math.max(o.e.r,c.e.r);if(s==-1)o.e.r=s=c.e.r+1}for(var u=0;u!=r.length;++u){if(!r[u])continue;if(!Array.isArray(r[u]))throw new Error("aoa_to_sheet expects an array of arrays");for(var h=0;h!=r[u].length;++h){if(typeof r[u][h]==="undefined")continue;var d={v:r[u][h]};var v=s+u,m=f+h;if(o.s.r>v)o.s.r=v;if(o.s.c>m)o.s.c=m;if(o.e.r<v)o.e.r=v;if(o.e.c<m)o.e.c=m;if(r[u][h]&&typeof r[u][h]==="object"&&!Array.isArray(r[u][h])&&!(r[u][h]instanceof Date))d=r[u][h];else{if(Array.isArray(d.v)){d.f=r[u][h][1];d.v=d.v[0]}if(d.v===null){if(d.f)d.t="n";else if(!a.sheetStubs)continue;else d.t="z"}else if(typeof d.v==="number")d.t="n";else if(typeof d.v==="boolean")d.t="b";else if(d.v instanceof Date){d.z=a.dateNF||F._table[14];if(a.cellDates){d.t="d";d.w=F.format(d.z,ee(d.v))}else{d.t="n";d.v=ee(d.v);d.w=F.format(d.z,d.v)}}else d.t="s"}if(n){if(!i[v])i[v]=[];i[v][m]=d}else{var b=ut({c:m,r:v});i[b]=d}}}if(o.s.c<1e7)i["!ref"]=dt(o);return i}function Et(e,r){return gt(null,e,r)}function St(e,r){if(!r)r=zr(4);r._W(4,e);return r}function kt(e){var r=e._R(4);return r===0?"":e._R(r,"dbcs")}function wt(e,r){var t=false;if(r==null){t=true;r=zr(4+2*e.length)}r._W(4,e.length);if(e.length>0)r._W(0,e,"dbcs");return t?r.slice(0,r.l):r}function Ct(e){return{ich:e._R(2),ifnt:e._R(2)}}function Bt(e,r){if(!r)r=zr(4);r._W(2,e.ich||0);r._W(2,e.ifnt||0);return r}function Tt(e,r){var t=e.l;var a=e._R(1);var n=kt(e);var i=[];var s={t:n,h:n};if((a&1)!==0){var f=e._R(4);for(var l=0;l!=f;++l)i.push(Ct(e));s.r=i}else s.r=[{ich:0,ifnt:0}];e.l=t+r;return s}function xt(e,r){var t=false;if(r==null){t=true;r=zr(15+4*e.t.length)}r._W(1,0);wt(e.t,r);return t?r.slice(0,r.l):r}var It=Tt;function _t(e,r){var t=false;if(r==null){t=true;r=zr(23+4*e.t.length)}r._W(1,1);wt(e.t,r);r._W(4,1);Bt({ich:0,ifnt:0},r);return t?r.slice(0,r.l):r}function At(e){var r=e._R(4);var t=e._R(2);t+=e._R(1)<<16;e.l++;return{c:r,iStyleRef:t}}function Rt(e,r){if(r==null)r=zr(8);r._W(-4,e.c);r._W(3,e.iStyleRef||e.s);r._W(1,0);return r}var yt=kt;var Ft=wt;function Dt(e){var r=e._R(4);return r===0||r===4294967295?"":e._R(r,"dbcs")}function Ot(e,r){var t=false;if(r==null){t=true;r=zr(127)}r._W(4,e.length>0?e.length:4294967295);if(e.length>0)r._W(0,e,"dbcs");return t?r.slice(0,r.l):r}var Pt=kt;var Nt=Dt;var Mt=Ot;function Lt(e){var r=e.slice(e.l,e.l+4);var t=r[0]&1,a=r[0]&2;e.l+=4;r[0]&=252;var n=a===0?_r([0,0,0,0,r[0],r[1],r[2],r[3]],0):Pr(r,0)>>2;return t?n/100:n}function Ut(e,r){if(r==null)r=zr(4);var t=0,a=0,n=e*100;if(e==(e|0)&&e>=-(1<<29)&&e<1<<29){a=1}else if(n==(n|0)&&n>=-(1<<29)&&n<1<<29){a=1;t=1}if(a)r._W(-4,((t?n:e)<<2)+(t+2));else throw new Error("unsupported RkNumber "+e)}function Wt(e){var r={s:{},e:{}};r.s.r=e._R(4);r.e.r=e._R(4);r.s.c=e._R(4);r.e.c=e._R(4);return r}function Ht(e,r){if(!r)r=zr(16);r._W(4,e.s.r);r._W(4,e.e.r);r._W(4,e.s.c);r._W(4,e.e.c);return r}var Vt=Wt;var Xt=Ht;function Gt(e){return e._R(8,"f")}function zt(e,r){return(r||zr(8))._W(8,e,"f")}var jt={0:"#NULL!",7:"#DIV/0!",15:"#VALUE!",23:"#REF!",29:"#NAME?",36:"#NUM!",42:"#N/A",43:"#GETTING_DATA",255:"#WTF?"};var $t=Q(jt);function Kt(e){var r={};var t=e._R(1);var a=t>>>1;var n=e._R(1);var i=e._R(2,"i");var s=e._R(1);var f=e._R(1);var l=e._R(1);e.l++;switch(a){case 0:r.auto=1;break;case 1:r.index=n;var o=wa[n];if(o)r.rgb=Kf(o);break;case 2:r.rgb=Kf([s,f,l]);break;case 3:r.theme=n;break;}if(i!=0)r.tint=i>0?i/32767:i/32768;return r}function Yt(e,r){if(!r)r=zr(8);if(!e||e.auto){r._W(4,0);r._W(4,0);return r}if(e.index){r._W(1,2);r._W(1,e.index)}else if(e.theme){r._W(1,6);r._W(1,e.theme)}else{r._W(1,5);r._W(1,0)}var t=e.tint||0;if(t>0)t*=32767;else if(t<0)t*=32768;r._W(2,t);if(!e.rgb){r._W(2,0);r._W(1,0);r._W(1,0)}else{var a=e.rgb||"FFFFFF";r._W(1,parseInt(a.slice(0,2),16));r._W(1,parseInt(a.slice(2,4),16));r._W(1,parseInt(a.slice(4,6),16));r._W(1,255)}return r}function Qt(e){var r=e._R(1);e.l++;var t={fItalic:r&2,fStrikeout:r&8,fOutline:r&16,fShadow:r&32,fCondense:r&64,fExtend:r&128};return t}function Jt(e,r){if(!r)r=zr(2);var t=(e.italic?2:0)|(e.strike?8:0)|(e.outline?16:0)|(e.shadow?32:0)|(e.condense?64:0)|(e.extend?128:0);r._W(1,t);r._W(1,0);return r}function Zt(e,r){var t={2:"BITMAP",3:"METAFILEPICT",8:"DIB",14:"ENHMETAFILE"};var a=e._R(4);switch(a){case 0:return"";case 4294967295:;case 4294967294:return t[e._R(4)]||"";}if(a>400)throw new Error("Unsupported Clipboard: "+a.toString(16));e.l-=4;return e._R(0,r==1?"lpstr":"lpwstr")}function qt(e){return Zt(e,1)}function ea(e){return Zt(e,2)}var ra=2;var ta=3;var aa=11;var na=12;var ia=19;var sa=30;var fa=64;var la=65;var oa=71;var ca=4096;var ua=80;var ha=81;var da=[ua,ha];var va={1:{n:"CodePage",t:ra},2:{n:"Category",t:ua},3:{n:"PresentationFormat",t:ua},4:{n:"ByteCount",t:ta},5:{n:"LineCount",t:ta},6:{n:"ParagraphCount",t:ta},7:{n:"SlideCount",t:ta},8:{n:"NoteCount",t:ta},9:{n:"HiddenCount",t:ta},10:{n:"MultimediaClipCount",t:ta},11:{n:"ScaleCrop",t:aa},12:{n:"HeadingPairs",t:ca|na},13:{n:"TitlesOfParts",t:ca|sa},14:{n:"Manager",t:ua},15:{n:"Company",t:ua},16:{n:"LinksUpToDate",t:aa},17:{n:"CharacterCount",t:ta},19:{n:"SharedDoc",t:aa},22:{n:"HyperlinksChanged",t:aa},23:{n:"AppVersion",t:ta,p:"version"},24:{n:"DigSig",t:la},26:{n:"ContentType",t:ua},27:{n:"ContentStatus",t:ua},28:{n:"Language",t:ua},29:{n:"Version",t:ua},255:{}};var pa={1:{n:"CodePage",t:ra},2:{n:"Title",t:ua},3:{n:"Subject",t:ua},4:{n:"Author",t:ua},5:{n:"Keywords",t:ua},6:{n:"Comments",t:ua},7:{n:"Template",t:ua},8:{n:"LastAuthor",t:ua},9:{n:"RevNumber",t:ua},10:{n:"EditTime",t:fa},11:{n:"LastPrinted",t:fa},12:{n:"CreatedDate",t:fa},13:{n:"ModifiedDate",t:fa},14:{n:"PageCount",t:ta},15:{n:"WordCount",t:ta},16:{n:"CharCount",t:ta},17:{n:"Thumbnail",t:oa},18:{n:"Application",t:ua},19:{n:"DocSecurity",t:ta},255:{}};var ma={2147483648:{n:"Locale",t:ia},2147483651:{n:"Behavior",t:ia},1919054434:{}};(function(){for(var e in ma)if(ma.hasOwnProperty(e))va[e]=pa[e]=ma[e]})();var ba=K(va,"n");var ga=K(pa,"n");var Ea={1:"US",2:"CA",3:"",7:"RU",20:"EG",30:"GR",31:"NL",32:"BE",33:"FR",34:"ES",36:"HU",39:"IT",41:"CH",43:"AT",44:"GB",45:"DK",46:"SE",47:"NO",48:"PL",49:"DE",52:"MX",55:"BR",61:"AU",64:"NZ",66:"TH",81:"JP",82:"KR",84:"VN",86:"CN",90:"TR",105:"JS",213:"DZ",216:"MA",218:"LY",351:"PT",354:"IS",358:"FI",420:"CZ",886:"TW",961:"LB",962:"JO",963:"SY",964:"IQ",965:"KW",966:"SA",971:"AE",972:"IL",974:"QA",981:"IR",65535:"US"};var Sa=[null,"solid","mediumGray","darkGray","lightGray","darkHorizontal","darkVertical","darkDown","darkUp","darkGrid","darkTrellis","lightHorizontal","lightVertical","lightDown","lightUp","lightGrid","lightTrellis","gray125","gray0625"];function ka(e){return e.map(function(e){return[e>>16&255,e>>8&255,e&255]})}var wa=ka([0,16777215,16711680,65280,255,16776960,16711935,65535,0,16777215,16711680,65280,255,16776960,16711935,65535,8388608,32768,128,8421376,8388736,32896,12632256,8421504,10066431,10040166,16777164,13434879,6684774,16744576,26316,13421823,128,16711935,16776960,65535,8388736,8388608,32896,255,52479,13434879,13434828,16777113,10079487,16751052,13408767,16764057,3368703,3394764,10079232,16763904,16750848,16737792,6710937,9868950,13158,3381606,13056,3355392,10040064,10040166,3355545,3355443,16777215,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);var Ca={"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml":"workbooks","application/vnd.ms-excel.binIndexWs":"TODO","application/vnd.ms-excel.intlmacrosheet":"TODO","application/vnd.ms-excel.binIndexMs":"TODO","application/vnd.openxmlformats-package.core-properties+xml":"coreprops","application/vnd.openxmlformats-officedocument.custom-properties+xml":"custprops","application/vnd.openxmlformats-officedocument.extended-properties+xml":"extprops","application/vnd.openxmlformats-officedocument.customXmlProperties+xml":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.customProperty":"TODO","application/vnd.ms-excel.pivotTable":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.pivotTable+xml":"TODO","application/vnd.ms-office.chartcolorstyle+xml":"TODO","application/vnd.ms-office.chartstyle+xml":"TODO","application/vnd.ms-excel.calcChain":"calcchains","application/vnd.openxmlformats-officedocument.spreadsheetml.calcChain+xml":"calcchains","application/vnd.openxmlformats-officedocument.spreadsheetml.printerSettings":"TODO","application/vnd.ms-office.activeX":"TODO","application/vnd.ms-office.activeX+xml":"TODO","application/vnd.ms-excel.attachedToolbars":"TODO","application/vnd.ms-excel.connections":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.connections+xml":"TODO","application/vnd.ms-excel.externalLink":"links","application/vnd.openxmlformats-officedocument.spreadsheetml.externalLink+xml":"links","application/vnd.ms-excel.sheetMetadata":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml":"TODO","application/vnd.ms-excel.pivotCacheDefinition":"TODO","application/vnd.ms-excel.pivotCacheRecords":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheDefinition+xml":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.pivotCacheRecords+xml":"TODO","application/vnd.ms-excel.queryTable":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.queryTable+xml":"TODO","application/vnd.ms-excel.userNames":"TODO","application/vnd.ms-excel.revisionHeaders":"TODO","application/vnd.ms-excel.revisionLog":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.revisionHeaders+xml":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.revisionLog+xml":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.userNames+xml":"TODO","application/vnd.ms-excel.tableSingleCells":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.tableSingleCells+xml":"TODO","application/vnd.ms-excel.slicer":"TODO","application/vnd.ms-excel.slicerCache":"TODO","application/vnd.ms-excel.slicer+xml":"TODO","application/vnd.ms-excel.slicerCache+xml":"TODO","application/vnd.ms-excel.wsSortMap":"TODO","application/vnd.ms-excel.table":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.table+xml":"TODO","application/vnd.openxmlformats-officedocument.theme+xml":"themes","application/vnd.openxmlformats-officedocument.themeOverride+xml":"TODO","application/vnd.ms-excel.Timeline+xml":"TODO","application/vnd.ms-excel.TimelineCache+xml":"TODO","application/vnd.ms-office.vbaProject":"vba","application/vnd.ms-office.vbaProjectSignature":"vba","application/vnd.ms-office.volatileDependencies":"TODO","application/vnd.openxmlformats-officedocument.spreadsheetml.volatileDependencies+xml":"TODO","application/vnd.ms-excel.controlproperties+xml":"TODO","application/vnd.openxmlformats-officedocument.model+data":"TODO","application/vnd.ms-excel.Survey+xml":"TODO","application/vnd.openxmlformats-officedocument.drawing+xml":"drawings","application/vnd.openxmlformats-officedocument.drawingml.chart+xml":"TODO","application/vnd.openxmlformats-officedocument.drawingml.chartshapes+xml":"TODO","application/vnd.openxmlformats-officedocument.drawingml.diagramColors+xml":"TODO","application/vnd.openxmlformats-officedocument.drawingml.diagramData+xml":"TODO","application/vnd.openxmlformats-officedocument.drawingml.diagramLayout+xml":"TODO","application/vnd.openxmlformats-officedocument.drawingml.diagramStyle+xml":"TODO","application/vnd.openxmlformats-officedocument.vmlDrawing":"TODO","application/vnd.openxmlformats-package.relationships+xml":"rels","application/vnd.openxmlformats-officedocument.oleObject":"TODO","image/png":"TODO",sheet:"js"};var Ba=function(){var e={workbooks:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml",xlsm:"application/vnd.ms-excel.sheet.macroEnabled.main+xml",xlsb:"application/vnd.ms-excel.sheet.binary.macroEnabled.main",xlam:"application/vnd.ms-excel.addin.macroEnabled.main+xml",xltx:"application/vnd.openxmlformats-officedocument.spreadsheetml.template.main+xml"},strs:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml",xlsb:"application/vnd.ms-excel.sharedStrings"},comments:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.comments+xml",xlsb:"application/vnd.ms-excel.comments"},sheets:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml",xlsb:"application/vnd.ms-excel.worksheet"},charts:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.chartsheet+xml",xlsb:"application/vnd.ms-excel.chartsheet"},dialogs:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.dialogsheet+xml",xlsb:"application/vnd.ms-excel.dialogsheet"},macros:{xlsx:"application/vnd.ms-excel.macrosheet+xml",xlsb:"application/vnd.ms-excel.macrosheet"},styles:{xlsx:"application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml",xlsb:"application/vnd.ms-excel.styles"}};j(e).forEach(function(r){["xlsm","xlam"].forEach(function(t){if(!e[r][t])e[r][t]=e[r].xlsx})});j(e).forEach(function(r){j(e[r]).forEach(function(t){Ca[e[r][t]]=r})});return e}();var Ta=J(Ca);sr.CT="http://schemas.openxmlformats.org/package/2006/content-types";function xa(){return{workbooks:[],sheets:[],charts:[],dialogs:[],macros:[],rels:[],strs:[],comments:[],links:[],coreprops:[],extprops:[],custprops:[],themes:[],styles:[],calcchains:[],vba:[],drawings:[],TODO:[],xmlns:""}}function Ia(e){var r=xa();if(!e||!e.match)return r;var t={};(e.match(Te)||[]).forEach(function(e){var a=_e(e);switch(a[0].replace(xe,"<")){case"<?xml":break;case"<Types":r.xmlns=a["xmlns"+(a[0].match(/<(\w+):/)||["",""])[1]];break;case"<Default":t[a.Extension]=a.ContentType;break;case"<Override":if(r[Ca[a.ContentType]]!==undefined)r[Ca[a.ContentType]].push(a.PartName);break;}});if(r.xmlns!==sr.CT)throw new Error("Unknown Namespace: "+r.xmlns);r.calcchain=r.calcchains.length>0?r.calcchains[0]:"";r.sst=r.strs.length>0?r.strs[0]:"";r.style=r.styles.length>0?r.styles[0]:"";r.defaults=t;delete r.calcchains;return r}var _a=ar("Types",null,{xmlns:sr.CT,"xmlns:xsd":sr.xsd,"xmlns:xsi":sr.xsi});var Aa=[["xml","application/xml"],["bin","application/vnd.ms-excel.sheet.binary.macroEnabled.main"],["vml","application/vnd.openxmlformats-officedocument.vmlDrawing"],["bmp","image/bmp"],["png","image/png"],["gif","image/gif"],["emf","image/x-emf"],["wmf","image/x-wmf"],["jpg","image/jpeg"],["jpeg","image/jpeg"],["tif","image/tiff"],["tiff","image/tiff"],["pdf","application/pdf"],["rels",Ta.rels[0]]].map(function(e){return ar("Default",null,{Extension:e[0],ContentType:e[1]})});function Ra(e,r){var t=[],a;t[t.length]=Ce;t[t.length]=_a;t=t.concat(Aa);var n=function(n){if(e[n]&&e[n].length>0){a=e[n][0];t[t.length]=ar("Override",null,{PartName:(a[0]=="/"?"":"/")+a,ContentType:Ba[n][r.bookType||"xlsx"]})}};var i=function(a){(e[a]||[]).forEach(function(e){t[t.length]=ar("Override",null,{PartName:(e[0]=="/"?"":"/")+e,ContentType:Ba[a][r.bookType||"xlsx"]})})};var s=function(r){(e[r]||[]).forEach(function(e){t[t.length]=ar("Override",null,{PartName:(e[0]=="/"?"":"/")+e,ContentType:Ta[r][0]})})};n("workbooks");i("sheets");i("charts");s("themes");["strs","styles"].forEach(n);["coreprops","extprops","custprops"].forEach(s);s("vba");s("comments");s("drawings");if(t.length>2){t[t.length]="</Types>";t[1]=t[1].replace("/>",">")}return t.join("")}var ya={WB:"http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument",SHEET:"http://sheetjs.openxmlformats.org/officeDocument/2006/relationships/officeDocument",HLINK:"http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink",VML:"http://schemas.openxmlformats.org/officeDocument/2006/relationships/vmlDrawing",VBA:"http://schemas.microsoft.com/office/2006/relationships/vbaProject"};function Fa(e){var r=e.lastIndexOf("/");return e.slice(0,r+1)+"_rels/"+e.slice(r+1)+".rels"}function Da(e,r){if(!e)return e;if(r.charAt(0)!=="/"){r="/"+r}var t={};var a={};(e.match(Te)||[]).forEach(function(e){var n=_e(e);if(n[0]==="<Relationship"){var i={};i.Type=n.Type;i.Target=n.Target;i.Id=n.Id;i.TargetMode=n.TargetMode;var s=n.TargetMode==="External"?n.Target:we(n.Target,r);t[s]=i;a[n.Id]=i}});t["!id"]=a;return t}sr.RELS="http://schemas.openxmlformats.org/package/2006/relationships";var Oa=ar("Relationships",null,{xmlns:sr.RELS});function Pa(e){var r=[Ce,Oa];j(e["!id"]).forEach(function(t){r[r.length]=ar("Relationship",null,e["!id"][t])});if(r.length>2){r[r.length]="</Relationships>";r[1]=r[1].replace("/>",">")}return r.join("")}function Na(e,r,t,a,n){if(!n)n={};if(!e["!id"])e["!id"]={};if(r<0)for(r=1;e["!id"]["rId"+r];++r){}n.Id="rId"+r;n.Type=a;n.Target=t;if(n.Type==ya.HLINK)n.TargetMode="External";if(e["!id"][n.Id])throw new Error("Cannot rewrite rId "+r);e["!id"][n.Id]=n;e[("/"+n.Target).replace("//","/")]=n;return r}var Ma="application/vnd.oasis.opendocument.spreadsheet";function La(e,r){var t=Lv(e);var a;var n;while(a=Uv.exec(t))switch(a[3]){case"manifest":break;case"file-entry":n=_e(a[0],false);if(n.path=="/"&&n.type!==Ma)throw new Error("This OpenDocument is not a spreadsheet");break;case"encryption-data":;case"algorithm":;case"start-key-generation":;case"key-derivation":
+throw new Error("Unsupported ODS Encryption");default:if(r&&r.WTF)throw a;}}function Ua(e){var r=[Ce];r.push('<manifest:manifest xmlns:manifest="urn:oasis:names:tc:opendocument:xmlns:manifest:1.0" manifest:version="1.2">\n');r.push('  <manifest:file-entry manifest:full-path="/" manifest:version="1.2" manifest:media-type="application/vnd.oasis.opendocument.spreadsheet"/>\n');for(var t=0;t<e.length;++t)r.push('  <manifest:file-entry manifest:full-path="'+e[t][0]+'" manifest:media-type="'+e[t][1]+'"/>\n');r.push("</manifest:manifest>");return r.join("")}function Wa(e,r,t){return['  <rdf:Description rdf:about="'+e+'">\n','    <rdf:type rdf:resource="http://docs.oasis-open.org/ns/office/1.2/meta/'+(t||"odf")+"#"+r+'"/>\n',"  </rdf:Description>\n"].join("")}function Ha(e,r){return['  <rdf:Description rdf:about="'+e+'">\n','    <ns0:hasPart xmlns:ns0="http://docs.oasis-open.org/ns/office/1.2/meta/pkg#" rdf:resource="'+r+'"/>\n',"  </rdf:Description>\n"].join("")}function Va(e){var r=[Ce];r.push('<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">\n');for(var t=0;t!=e.length;++t){r.push(Wa(e[t][0],e[t][1]));r.push(Ha("",e[t][0]))}r.push(Wa("","Document","pkg"));r.push("</rdf:RDF>");return r.join("")}var Xa=function(){var r='<?xml version="1.0" encoding="UTF-8" standalone="yes"?><office:document-meta xmlns:office="urn:oasis:names:tc:opendocument:xmlns:office:1.0" xmlns:meta="urn:oasis:names:tc:opendocument:xmlns:meta:1.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xlink="http://www.w3.org/1999/xlink" office:version="1.2"><office:meta><meta:generator>Sheet'+"JS "+e.version+"</meta:generator></office:meta></office:document-meta>";return function t(){return r}}();var Ga=[["cp:category","Category"],["cp:contentStatus","ContentStatus"],["cp:keywords","Keywords"],["cp:lastModifiedBy","LastAuthor"],["cp:lastPrinted","LastPrinted"],["cp:revision","RevNumber"],["cp:version","Version"],["dc:creator","Author"],["dc:description","Comments"],["dc:identifier","Identifier"],["dc:language","Language"],["dc:subject","Subject"],["dc:title","Title"],["dcterms:created","CreatedDate","date"],["dcterms:modified","ModifiedDate","date"]];sr.CORE_PROPS="http://schemas.openxmlformats.org/package/2006/metadata/core-properties";ya.CORE_PROPS="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties";var za=function(){var e=new Array(Ga.length);for(var r=0;r<Ga.length;++r){var t=Ga[r];var a="(?:"+t[0].slice(0,t[0].indexOf(":"))+":)"+t[0].slice(t[0].indexOf(":")+1);e[r]=new RegExp("<"+a+"[^>]*>([\\s\\S]*?)</"+a+">")}return e}();function ja(e){var r={};e=Xe(e);for(var t=0;t<Ga.length;++t){var a=Ga[t],n=e.match(za[t]);if(n!=null&&n.length>0)r[a[1]]=n[1];if(a[2]==="date"&&r[a[1]])r[a[1]]=ie(r[a[1]])}return r}var $a=ar("cp:coreProperties",null,{"xmlns:cp":sr.CORE_PROPS,"xmlns:dc":sr.dc,"xmlns:dcterms":sr.dcterms,"xmlns:dcmitype":sr.dcmitype,"xmlns:xsi":sr.xsi});function Ka(e,r,t,a,n){if(n[e]!=null||r==null||r==="")return;n[e]=r;a[a.length]=t?ar(e,r,t):rr(e,r)}function Ya(e,r){var t=r||{};var a=[Ce,$a],n={};if(!e&&!t.Props)return a.join("");if(e){if(e.CreatedDate!=null)Ka("dcterms:created",typeof e.CreatedDate==="string"?e.CreatedDate:nr(e.CreatedDate,t.WTF),{"xsi:type":"dcterms:W3CDTF"},a,n);if(e.ModifiedDate!=null)Ka("dcterms:modified",typeof e.ModifiedDate==="string"?e.ModifiedDate:nr(e.ModifiedDate,t.WTF),{"xsi:type":"dcterms:W3CDTF"},a,n)}for(var i=0;i!=Ga.length;++i){var s=Ga[i];var f=t.Props&&t.Props[s[1]]!=null?t.Props[s[1]]:e?e[s[1]]:null;if(f===true)f="1";else if(f===false)f="0";else if(typeof f=="number")f=String(f);if(f!=null)Ka(s[0],f,null,a,n)}if(a.length>2){a[a.length]="</cp:coreProperties>";a[1]=a[1].replace("/>",">")}return a.join("")}var Qa=[["Application","Application","string"],["AppVersion","AppVersion","string"],["Company","Company","string"],["DocSecurity","DocSecurity","string"],["Manager","Manager","string"],["HyperlinksChanged","HyperlinksChanged","bool"],["SharedDoc","SharedDoc","bool"],["LinksUpToDate","LinksUpToDate","bool"],["ScaleCrop","ScaleCrop","bool"],["HeadingPairs","HeadingPairs","raw"],["TitlesOfParts","TitlesOfParts","raw"]];sr.EXT_PROPS="http://schemas.openxmlformats.org/officeDocument/2006/extended-properties";ya.EXT_PROPS="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties";var Ja=["Worksheets","SheetNames","NamedRanges","DefinedNames","Chartsheets","ChartNames"];function Za(e,r,t,a){var n=[];if(typeof e=="string")n=qe(e,a);else for(var i=0;i<e.length;++i)n=n.concat(e[i].map(function(e){return{v:e}}));var s=typeof r=="string"?qe(r,a).map(function(e){return e.v}):r;var f=0,l=0;if(s.length>0)for(var o=0;o!==n.length;o+=2){l=+n[o+1].v;switch(n[o].v){case"Worksheets":;case"工作表":;case"Листы":;case"أوراق العمل":;case"ワークシート":;case"גליונות עבודה":;case"Arbeitsblätter":;case"Çalışma Sayfaları":;case"Feuilles de calcul":;case"Fogli di lavoro":;case"Folhas de cálculo":;case"Planilhas":;case"Regneark":;case"Werkbladen":t.Worksheets=l;t.SheetNames=s.slice(f,f+l);break;case"Named Ranges":;case"名前付き一覧":;case"Benannte Bereiche":;case"Navngivne områder":t.NamedRanges=l;t.DefinedNames=s.slice(f,f+l);break;case"Charts":;case"Diagramme":t.Chartsheets=l;t.ChartNames=s.slice(f,f+l);break;}f+=l}}function qa(e,r,t){var a={};if(!r)r={};e=Xe(e);Qa.forEach(function(t){switch(t[2]){case"string":r[t[1]]=(e.match(Ke(t[0]))||[])[1];break;case"bool":r[t[1]]=(e.match(Ke(t[0]))||[])[1]==="true";break;case"raw":var n=e.match(new RegExp("<"+t[0]+"[^>]*>([\\s\\S]*?)</"+t[0]+">"));if(n&&n.length>0)a[t[1]]=n[1];break;}});if(a.HeadingPairs&&a.TitlesOfParts)Za(a.HeadingPairs,a.TitlesOfParts,r,t);return r}var en=ar("Properties",null,{xmlns:sr.EXT_PROPS,"xmlns:vt":sr.vt});function rn(e){var r=[],t=ar;if(!e)e={};e.Application="SheetJS";r[r.length]=Ce;r[r.length]=en;Qa.forEach(function(a){if(e[a[1]]===undefined)return;var n;switch(a[2]){case"string":n=String(e[a[1]]);break;case"bool":n=e[a[1]]?"true":"false";break;}if(n!==undefined)r[r.length]=t(a[0],n)});r[r.length]=t("HeadingPairs",t("vt:vector",t("vt:variant","<vt:lpstr>Worksheets</vt:lpstr>")+t("vt:variant",t("vt:i4",String(e.Worksheets))),{size:2,baseType:"variant"}));r[r.length]=t("TitlesOfParts",t("vt:vector",e.SheetNames.map(function(e){return"<vt:lpstr>"+Pe(e)+"</vt:lpstr>"}).join(""),{size:e.Worksheets,baseType:"lpstr"}));if(r.length>2){r[r.length]="</Properties>";r[1]=r[1].replace("/>",">")}return r.join("")}sr.CUST_PROPS="http://schemas.openxmlformats.org/officeDocument/2006/custom-properties";ya.CUST_PROPS="http://schemas.openxmlformats.org/officeDocument/2006/relationships/custom-properties";var tn=/<[^>]+>[^<]*/g;function an(e,r){var t={},a="";var n=e.match(tn);if(n)for(var i=0;i!=n.length;++i){var s=n[i],f=_e(s);switch(f[0]){case"<?xml":break;case"<Properties":break;case"<property":a=f.name;break;case"</property>":a=null;break;default:if(s.indexOf("<vt:")===0){var l=s.split(">");var o=l[0].slice(4),c=l[1];switch(o){case"lpstr":;case"bstr":;case"lpwstr":t[a]=Fe(c);break;case"bool":t[a]=Ve(c);break;case"i1":;case"i2":;case"i4":;case"i8":;case"int":;case"uint":t[a]=parseInt(c,10);break;case"r4":;case"r8":;case"decimal":t[a]=parseFloat(c);break;case"filetime":;case"date":t[a]=ie(c);break;case"cy":;case"error":t[a]=Fe(c);break;default:if(o.slice(-1)=="/")break;if(r.WTF&&typeof console!=="undefined")console.warn("Unexpected",s,o,l);}}else if(s.slice(0,2)==="</"){}else if(r.WTF)throw new Error(s);}}return t}var nn=ar("Properties",null,{xmlns:sr.CUST_PROPS,"xmlns:vt":sr.vt});function sn(e){var r=[Ce,nn];if(!e)return r.join("");var t=1;j(e).forEach(function a(n){++t;r[r.length]=ar("property",ir(e[n]),{fmtid:"{D5CDD505-2E9C-101B-9397-08002B2CF9AE}",pid:t,name:n})});if(r.length>2){r[r.length]="</Properties>";r[1]=r[1].replace("/>",">")}return r.join("")}var fn={Title:"Title",Subject:"Subject",Author:"Author",Keywords:"Keywords",Comments:"Description",LastAuthor:"LastAuthor",RevNumber:"Revision",Application:"AppName",LastPrinted:"LastPrinted",CreatedDate:"Created",ModifiedDate:"LastSaved",Category:"Category",Manager:"Manager",Company:"Company",AppVersion:"Version",ContentStatus:"ContentStatus",Identifier:"Identifier",Language:"Language"};var ln=Y(fn);function on(e,r,t){r=ln[r]||r;e[r]=t}function cn(e,r){var t=[];j(fn).map(function(e){for(var r=0;r<Ga.length;++r)if(Ga[r][1]==e)return Ga[r];for(r=0;r<Qa.length;++r)if(Qa[r][1]==e)return Qa[r];throw e}).forEach(function(a){if(e[a[1]]==null)return;var n=r&&r.Props&&r.Props[a[1]]!=null?r.Props[a[1]]:e[a[1]];switch(a[2]){case"date":n=new Date(n).toISOString().replace(/\.\d*Z/,"Z");break;}if(typeof n=="number")n=String(n);else if(n===true||n===false){n=n?"1":"0"}else if(n instanceof Date)n=new Date(n).toISOString().replace(/\.\d*Z/,"");t.push(rr(fn[a[1]]||a[1],n))});return ar("DocumentProperties",t.join(""),{xmlns:fr.o})}function un(e,r){var t=["Worksheets","SheetNames"];var a="CustomDocumentProperties";var n=[];if(e)j(e).forEach(function(r){if(!e.hasOwnProperty(r))return;for(var a=0;a<Ga.length;++a)if(r==Ga[a][1])return;for(a=0;a<Qa.length;++a)if(r==Qa[a][1])return;for(a=0;a<t.length;++a)if(r==t[a])return;var i=e[r];var s="string";if(typeof i=="number"){s="float";i=String(i)}else if(i===true||i===false){s="boolean";i=i?"1":"0"}else i=String(i);n.push(ar(Ne(r),i,{"dt:dt":s}))});if(r)j(r).forEach(function(t){if(!r.hasOwnProperty(t))return;if(e&&e.hasOwnProperty(t))return;var a=r[t];var i="string";if(typeof a=="number"){i="float";a=String(a)}else if(a===true||a===false){i="boolean";a=a?"1":"0"}else if(a instanceof Date){i="dateTime.tz";a=a.toISOString()}else a=String(a);n.push(ar(Ne(t),a,{"dt:dt":i}))});return"<"+a+' xmlns="'+fr.o+'">'+n.join("")+"</"+a+">"}function hn(e){var r=e._R(4),t=e._R(4);return new Date((t/1e7*Math.pow(2,32)+r/1e7-11644473600)*1e3).toISOString().replace(/\.000/,"")}function dn(e){var r=typeof e=="string"?new Date(Date.parse(e)):e;var t=r.getTime()/1e3+11644473600;var a=t%Math.pow(2,32),n=(t-a)/Math.pow(2,32);a*=1e7;n*=1e7;var i=a/Math.pow(2,32)|0;if(i>0){a=a%Math.pow(2,32);n+=i}var s=zr(8);s._W(4,a);s._W(4,n);return s}function vn(e,r,t){var a=e.l;var n=e._R(0,"lpstr-cp");if(t)while(e.l-a&3)++e.l;return n}function pn(e,r,t){var a=e._R(0,"lpwstr");if(t)e.l+=4-(a.length+1&3)&3;return a}function mn(e,r,t){if(r===31)return pn(e);return vn(e,r,t)}function bn(e,r,t){return mn(e,r,t===false?0:4)}function gn(e,r){if(!r)throw new Error("VtUnalignedString must have positive length");return mn(e,r,0)}function En(e){var r=e._R(4);var t=[];for(var a=0;a!=r;++a)t[a]=e._R(0,"lpstr-cp").replace(R,"");return t}function Sn(e){return En(e)}function kn(e){var r=In(e,ha);var t=In(e,ta);return[r,t]}function wn(e){var r=e._R(4);var t=[];for(var a=0;a!=r/2;++a)t.push(kn(e));return t}function Cn(e){return wn(e)}function Bn(e,r){var t=e._R(4);var a={};for(var n=0;n!=t;++n){var i=e._R(4);var s=e._R(4);a[i]=e._R(s,r===1200?"utf16le":"utf8").replace(R,"").replace(y,"!");if(r===1200&&s%2)e.l+=2}if(e.l&3)e.l=e.l>>2+1<<2;return a}function Tn(e){var r=e._R(4);var t=e.slice(e.l,e.l+r);e.l+=r;if((r&3)>0)e.l+=4-(r&3)&3;return t}function xn(e){var r={};r.Size=e._R(4);e.l+=r.Size+3-(r.Size-1)%4;return r}function In(e,r,t){var a=e._R(2),n,i=t||{};e.l+=2;if(r!==na)if(a!==r&&da.indexOf(r)===-1)throw new Error("Expected type "+r+" saw "+a);switch(r===na?a:r){case 2:n=e._R(2,"i");if(!i.raw)e.l+=2;return n;case 3:n=e._R(4,"i");return n;case 11:return e._R(4)!==0;case 19:n=e._R(4);return n;case 30:return vn(e,a,4).replace(R,"");case 31:return pn(e);case 64:return hn(e);case 65:return Tn(e);case 71:return xn(e);case 80:return bn(e,a,!i.raw).replace(R,"");case 81:return gn(e,a).replace(R,"");case 4108:return Cn(e);case 4126:return Sn(e);default:throw new Error("TypedPropertyValue unrecognized type "+r+" "+a);}}function _n(e,r){var t=zr(4),a=zr(4);t._W(4,e==80?31:e);switch(e){case 3:a._W(-4,r);break;case 5:a=zr(8);a._W(8,r,"f");break;case 11:a._W(4,r?1:0);break;case 64:a=dn(r);break;case 31:;case 80:a=zr(4+2*(r.length+1)+(r.length%2?0:2));a._W(4,r.length+1);a._W(0,r,"dbcs");while(a.l!=a.length)a._W(1,0);break;default:throw new Error("TypedPropertyValue unrecognized type "+e+" "+r);}return A([t,a])}function An(e,r){var t=e.l;var a=e._R(4);var n=e._R(4);var i=[],s=0;var f=0;var o=-1,c={};for(s=0;s!=n;++s){var u=e._R(4);var h=e._R(4);i[s]=[u,h+t]}i.sort(function(e,r){return e[1]-r[1]});var d={};for(s=0;s!=n;++s){if(e.l!==i[s][1]){var v=true;if(s>0&&r)switch(r[i[s-1][0]].t){case 2:if(e.l+2===i[s][1]){e.l+=2;v=false}break;case 80:if(e.l<=i[s][1]){e.l=i[s][1];v=false}break;case 4108:if(e.l<=i[s][1]){e.l=i[s][1];v=false}break;}if((!r||s==0)&&e.l<=i[s][1]){v=false;e.l=i[s][1]}if(v)throw new Error("Read Error: Expected address "+i[s][1]+" at "+e.l+" :"+s)}if(r){var p=r[i[s][0]];d[p.n]=In(e,p.t,{raw:true});if(p.p==="version")d[p.n]=String(d[p.n]>>16)+"."+("0000"+String(d[p.n]&65535)).slice(-4);if(p.n=="CodePage")switch(d[p.n]){case 0:d[p.n]=1252;case 874:;case 932:;case 936:;case 949:;case 950:;case 1250:;case 1251:;case 1253:;case 1254:;case 1255:;case 1256:;case 1257:;case 1258:;case 1e4:;case 1200:;case 1201:;case 1252:;case 65e3:;case-536:;case 65001:;case-535:l(f=d[p.n]>>>0&65535);break;default:throw new Error("Unsupported CodePage: "+d[p.n]);}}else{if(i[s][0]===1){f=d.CodePage=In(e,ra);l(f);if(o!==-1){var m=e.l;e.l=i[o][1];c=Bn(e,f);e.l=m}}else if(i[s][0]===0){if(f===0){o=s;e.l=i[s+1][1];continue}c=Bn(e,f)}else{var b=c[i[s][0]];var g;switch(e[e.l]){case 65:e.l+=4;g=Tn(e);break;case 30:e.l+=4;g=bn(e,e[e.l-4]).replace(/\u0000+$/,"");break;case 31:e.l+=4;g=bn(e,e[e.l-4]).replace(/\u0000+$/,"");break;case 3:e.l+=4;g=e._R(4,"i");break;case 19:e.l+=4;g=e._R(4);break;case 5:e.l+=4;g=e._R(8,"f");break;case 11:e.l+=4;g=Ln(e,4);break;case 64:e.l+=4;g=ie(hn(e));break;default:throw new Error("unparsed value: "+e[e.l]);}d[b]=g}}}e.l=t+a;return d}var Rn=["CodePage","Thumbnail","_PID_LINKBASE","_PID_HLINKS","SystemIdentifier","FMTID"].concat(Ja);function yn(e){switch(typeof e){case"boolean":return 11;case"number":return(e|0)==e?3:5;case"string":return 31;case"object":if(e instanceof Date)return 64;break;}return-1}function Fn(e,r,t){var a=zr(8),n=[],i=[];var s=8,f=0;var l=zr(8),o=zr(8);l._W(4,2);l._W(4,1200);o._W(4,1);i.push(l);n.push(o);s+=8+l.length;if(!r){o=zr(8);o._W(4,0);n.unshift(o);var c=[zr(4)];c[0]._W(4,e.length);for(f=0;f<e.length;++f){var u=e[f][0];l=zr(4+4+2*(u.length+1)+(u.length%2?0:2));l._W(4,f+2);l._W(4,u.length+1);l._W(0,u,"dbcs");while(l.l!=l.length)l._W(1,0);c.push(l)}l=A(c);i.unshift(l);s+=8+l.length}for(f=0;f<e.length;++f){if(r&&!r[e[f][0]])continue;if(Rn.indexOf(e[f][0])>-1)continue;if(e[f][1]==null)continue;var h=e[f][1],d=0;if(r){d=+r[e[f][0]];var v=t[d];if(v.p=="version"&&typeof h=="string"){var p=h.split(".");h=(+p[0]<<16)+(+p[1]||0)}l=_n(v.t,h)}else{var m=yn(h);if(m==-1){m=31;h=String(h)}l=_n(m,h)}i.push(l);o=zr(8);o._W(4,!r?2+f:d);n.push(o);s+=8+l.length}var b=8*(i.length+1);for(f=0;f<i.length;++f){n[f]._W(4,b);b+=i[f].length}a._W(4,s);a._W(4,i.length);return A([a].concat(n).concat(i))}function Dn(e,r,t){var a=e.content;if(!a)return{};Xr(a,0);var n,i,s,f,l=0;a.chk("feff","Byte Order: ");a._R(2);var o=a._R(4);var c=a._R(16);if(c!==H.utils.consts.HEADER_CLSID&&c!==t)throw new Error("Bad PropertySet CLSID "+c);n=a._R(4);if(n!==1&&n!==2)throw new Error("Unrecognized #Sets: "+n);i=a._R(16);f=a._R(4);if(n===1&&f!==a.l)throw new Error("Length mismatch: "+f+" !== "+a.l);else if(n===2){s=a._R(16);l=a._R(4)}var u=An(a,r);var h={SystemIdentifier:o};for(var d in u)h[d]=u[d];h.FMTID=i;if(n===1)return h;if(l-a.l==2)a.l+=2;if(a.l!==l)throw new Error("Length mismatch 2: "+a.l+" !== "+l);var v;try{v=An(a,null)}catch(p){}for(d in v)h[d]=v[d];h.FMTID=[i,s];return h}function On(e,r,t,a,n,i){var s=zr(n?68:48);var f=[s];s._W(2,65534);s._W(2,0);s._W(4,842412599);s._W(16,H.utils.consts.HEADER_CLSID,"hex");s._W(4,n?2:1);s._W(16,r,"hex");s._W(4,n?68:48);var l=Fn(e,t,a);f.push(l);if(n){var o=Fn(n,null,null);s._W(16,i,"hex");s._W(4,68+l.length);f.push(o)}return A(f)}function Pn(e,r){e._R(r);return null}function Nn(e,r){if(!r)r=zr(e);for(var t=0;t<e;++t)r._W(1,0);return r}function Mn(e,r,t){var a=[],n=e.l+r;while(e.l<n)a.push(t(e,n-e.l));if(n!==e.l)throw new Error("Slurp error");return a}function Ln(e,r){return e._R(r)===1}function Un(e,r){if(!r)r=zr(2);r._W(2,+!!e);return r}function Wn(e){return e._R(2,"u")}function Hn(e,r){if(!r)r=zr(2);r._W(2,e);return r}function Vn(e,r){return Mn(e,r,Wn)}function Xn(e){var r=e._R(1),t=e._R(1);return t===1?r:r===1}function Gn(e,r,t){if(!t)t=zr(2);t._W(1,+e);t._W(1,r=="e"?1:0);return t}function zn(e,t,a){var n=e._R(a&&a.biff>=12?2:1);var i="sbcs-cont";var s=r;if(a&&a.biff>=8)r=1200;if(!a||a.biff==8){var f=e._R(1);if(f){i="dbcs-cont"}}else if(a.biff==12){i="wstr"}if(a.biff>=2&&a.biff<=5)i="cpstr";var l=n?e._R(n,i):"";r=s;return l}function jn(e){var t=r;r=1200;var a=e._R(2),n=e._R(1);var i=n&4,s=n&8;var f=1+(n&1);var l=0,o;var c={};if(s)l=e._R(2);if(i)o=e._R(4);var u=f==2?"dbcs-cont":"sbcs-cont";var h=a===0?"":e._R(a,u);if(s)e.l+=4*l;if(i)e.l+=o;c.t=h;if(!s){c.raw="<t>"+c.t+"</t>";c.r=c.t}r=t;return c}function $n(e,r,t){var a;if(t){if(t.biff>=2&&t.biff<=5)return e._R(r,"cpstr");if(t.biff>=12)return e._R(r,"dbcs-cont")}var n=e._R(1);if(n===0){a=e._R(r,"sbcs-cont")}else{a=e._R(r,"dbcs-cont")}return a}function Kn(e,r,t){var a=e._R(t&&t.biff==2?1:2);if(a===0){e.l++;return""}return $n(e,a,t)}function Yn(e,r,t){if(t.biff>5)return Kn(e,r,t);var a=e._R(1);if(a===0){e.l++;return""}return e._R(a,t.biff<=4||!e.lens?"cpstr":"sbcs-cont")}function Qn(e,r,t){if(!t)t=zr(3+2*e.length);t._W(2,e.length);t._W(1,1);t._W(31,e,"utf16le");return t}function Jn(e){var r=e._R(1);e.l++;var t=e._R(2);e.l+=2;return[r,t]}function Zn(e){var r=e._R(4),t=e.l;var a=false;if(r>24){e.l+=r-24;if(e._R(16)==="795881f43b1d7f48af2c825dc4852763")a=true;e.l=t}var n=e._R((a?r-24:r)>>1,"utf16le").replace(R,"");if(a)e.l+=24;return n}function qn(e){e.l+=2;var r=e._R(0,"lpstr-ansi");e.l+=2;if(e._R(2)!=57005)throw new Error("Bad FileMoniker");var t=e._R(4);if(t===0)return r.replace(/\\/g,"/");var a=e._R(4);if(e._R(2)!=3)throw new Error("Bad FileMoniker");var n=e._R(a>>1,"utf16le").replace(R,"");return n}function ei(e,r){var t=e._R(16);r-=16;switch(t){case"e0c9ea79f9bace118c8200aa004ba90b":return Zn(e,r);case"0303000000000000c000000000000046":return qn(e,r);default:throw new Error("Unsupported Moniker "+t);}}function ri(e){var r=e._R(4);var t=r>0?e._R(r,"utf16le").replace(R,""):"";return t}function ti(e,r){var t=e.l+r;var a=e._R(4);if(a!==2)throw new Error("Unrecognized streamVersion: "+a);var n=e._R(2);e.l+=2;var i,s,f,l,o="",c,u;if(n&16)i=ri(e,t-e.l);if(n&128)s=ri(e,t-e.l);if((n&257)===257)f=ri(e,t-e.l);if((n&257)===1)l=ei(e,t-e.l);if(n&8)o=ri(e,t-e.l);if(n&32)c=e._R(16);if(n&64)u=hn(e);e.l=t;var h=s||f||l||"";if(h&&o)h+="#"+o;if(!h)h="#"+o;var d={Target:h};if(c)d.guid=c;if(u)d.time=u;if(i)d.Tooltip=i;return d}function ai(e){var r=zr(512),t=0;var a=e.Target;var n=a.indexOf("#")>-1?31:23;switch(a.charAt(0)){case"#":n=28;break;case".":n&=~2;break;}r._W(4,2);r._W(4,n);var i=[8,6815827,6619237,4849780,83];for(t=0;t<i.length;++t)r._W(4,i[t]);if(n==28){a=a.slice(1);r._W(4,a.length+1);for(t=0;t<a.length;++t)r._W(2,a.charCodeAt(t));r._W(2,0)}else if(n&2){i="e0 c9 ea 79 f9 ba ce 11 8c 82 00 aa 00 4b a9 0b".split(" ");for(t=0;t<i.length;++t)r._W(1,parseInt(i[t],16));r._W(4,2*(a.length+1));for(t=0;t<a.length;++t)r._W(2,a.charCodeAt(t));r._W(2,0)}else{i="03 03 00 00 00 00 00 00 c0 00 00 00 00 00 00 46".split(" ");for(t=0;t<i.length;++t)r._W(1,parseInt(i[t],16));var s=0;while(a.slice(s*3,s*3+3)=="../"||a.slice(s*3,s*3+3)=="..\\")++s;r._W(2,s);r._W(4,a.length+1);for(t=0;t<a.length;++t)r._W(1,a.charCodeAt(t)&255);r._W(1,0);r._W(2,65535);r._W(2,57005);for(t=0;t<6;++t)r._W(4,0)}return r.slice(0,r.l)}function ni(e){var r=e._R(1),t=e._R(1),a=e._R(1),n=e._R(1);return[r,t,a,n]}function ii(e,r){var t=ni(e,r);t[3]=0;return t}function si(e){var r=e._R(2);var t=e._R(2);var a=e._R(2);return{r:r,c:t,ixfe:a}}function fi(e,r,t,a){if(!a)a=zr(6);a._W(2,e);a._W(2,r);a._W(2,t||0);return a}function li(e){var r=e._R(2);var t=e._R(2);e.l+=8;return{type:r,flags:t}}function oi(e,r,t){return r===0?"":Yn(e,r,t)}function ci(e,r,t){var a=t.biff>8?4:2;var n=e._R(a),i=e._R(a,"i"),s=e._R(a,"i");return[n,i,s]}function ui(e){var r=e._R(2);var t=Lt(e);return[r,t]}function hi(e,r,t){e.l+=4;r-=4;var a=e.l+r;var n=zn(e,r,t);var i=e._R(2);a-=e.l;if(i!==a)throw new Error("Malformed AddinUdf: padding = "+a+" != "+i);e.l+=i;return n}function di(e){var r=e._R(2);var t=e._R(2);var a=e._R(2);var n=e._R(2);return{s:{c:a,r:r},e:{c:n,r:t}}}function vi(e,r){if(!r)r=zr(8);r._W(2,e.s.r);r._W(2,e.e.r);r._W(2,e.s.c);r._W(2,e.e.c);return r}function pi(e){var r=e._R(2);var t=e._R(2);var a=e._R(1);var n=e._R(1);return{s:{c:a,r:r},e:{c:n,r:t}}}var mi=pi;function bi(e){e.l+=4;var r=e._R(2);var t=e._R(2);var a=e._R(2);e.l+=12;return[t,r,a]}function gi(e){var r={};e.l+=4;e.l+=16;r.fSharedNote=e._R(2);e.l+=4;return r}function Ei(e){var r={};e.l+=4;e.cf=e._R(2);return r}function Si(e){e.l+=2;e.l+=e._R(2)}var ki={0:Si,4:Si,5:Si,6:Si,7:Ei,8:Si,9:Si,10:Si,11:Si,12:Si,13:gi,14:Si,15:Si,16:Si,17:Si,18:Si,19:Si,20:Si,21:bi};function wi(e,r){var t=e.l+r;var a=[];while(e.l<t){var n=e._R(2);e.l-=2;try{a.push(ki[n](e,t-e.l))}catch(i){e.l=t;return a}}if(e.l!=t)e.l=t;return a}function Ci(e,r){var t={BIFFVer:0,dt:0};t.BIFFVer=e._R(2);r-=2;if(r>=2){t.dt=e._R(2);e.l-=2}switch(t.BIFFVer){case 1536:;case 1280:;case 1024:;case 768:;case 512:;case 2:;case 7:break;default:if(r>6)throw new Error("Unexpected BIFF Ver "+t.BIFFVer);}e._R(r);return t}function Bi(e,r,t){var a=1536,n=16;switch(t.bookType){case"biff8":break;case"biff5":a=1280;n=8;break;case"biff4":a=4;n=6;break;case"biff3":a=3;n=6;break;case"biff2":a=2;n=4;break;case"xla":break;default:throw new Error("unsupported BIFF version");}var i=zr(n);i._W(2,a);i._W(2,r);if(n>4)i._W(2,29282);if(n>6)i._W(2,1997);if(n>8){i._W(2,49161);i._W(2,1);i._W(2,1798);i._W(2,0)}return i}function Ti(e,r){if(r===0)return 1200;if(e._R(2)!==1200){}return 1200}function xi(e,r,t){if(t.enc){e.l+=r;return""}var a=e.l;var n=Yn(e,0,t);e._R(r+a-e.l);return n}function Ii(e,r){var t=!r||r.biff==8;var a=zr(t?112:54);a._W(r.biff==8?2:1,7);if(t)a._W(1,0);a._W(4,859007059);a._W(4,5458548|(t?0:536870912));while(a.l<a.length)a._W(1,t?0:32);return a}function _i(e,r,t){var a=t&&t.biff==8||r==2?e._R(2):(e.l+=r,0);return{fDialog:a&16}}function Ai(e,r,t){var a=e._R(4);var n=e._R(1)&3;var i=e._R(1);switch(i){case 0:i="Worksheet";break;case 1:i="Macrosheet";break;case 2:i="Chartsheet";break;case 6:i="VBAModule";break;}var s=zn(e,0,t);if(s.length===0)s="Sheet1";return{pos:a,hs:n,dt:i,name:s}}function Ri(e,r){var t=!r||r.biff>=8?2:1;var a=zr(8+t*e.name.length);a._W(4,e.pos);a._W(1,e.hs||0);a._W(1,e.dt);a._W(1,e.name.length);if(r.biff>=8)a._W(1,1);a._W(t*e.name.length,e.name,r.biff<8?"sbcs":"utf16le");var n=a.slice(0,a.l);n.l=a.l;return n}function yi(e,r){var t=e.l+r;var a=e._R(4);var n=e._R(4);var i=[];for(var s=0;s!=n&&e.l<t;++s){i.push(jn(e))}i.Count=a;i.Unique=n;return i}function Fi(e,r){var t={};t.dsst=e._R(2);e.l+=r-2;return t}function Di(e){var r={};r.r=e._R(2);r.c=e._R(2);r.cnt=e._R(2)-r.c;var t=e._R(2);e.l+=4;var a=e._R(1);e.l+=3;if(a&7)r.level=a&7;if(a&32)r.hidden=true;if(a&64)r.hpt=t/20;return r}function Oi(e){var r=li(e);if(r.type!=2211)throw new Error("Invalid Future Record "+r.type);var t=e._R(4);return t!==0}function Pi(e){e._R(2);return e._R(4)}function Ni(e,r,t){var a=0;if(!(t&&t.biff==2)){a=e._R(2)}var n=e._R(2);if(t&&t.biff==2){a=1-(n>>15);n&=32767}var i={Unsynced:a&1,DyZero:(a&2)>>1,ExAsc:(a&4)>>2,ExDsc:(a&8)>>3};return[i,n]}function Mi(e){var r=e._R(2),t=e._R(2),a=e._R(2),n=e._R(2);var i=e._R(2),s=e._R(2),f=e._R(2);var l=e._R(2),o=e._R(2);return{Pos:[r,t],Dim:[a,n],Flags:i,CurTab:s,FirstTab:f,Selected:l,TabRatio:o}}function Li(){var e=zr(18);e._W(2,0);e._W(2,0);e._W(2,29280);e._W(2,17600);e._W(2,56);e._W(2,0);e._W(2,0);e._W(2,1);e._W(2,500);return e}function Ui(e,r,t){if(t&&t.biff>=2&&t.biff<8)return{};var a=e._R(2);return{RTL:a&64}}function Wi(e){var r=zr(18),t=1718;if(e&&e.RTL)t|=64;r._W(2,t);r._W(4,0);r._W(4,64);r._W(4,0);r._W(4,0);return r}function Hi(e,r,t){var a={dyHeight:e._R(2),fl:e._R(2)};switch(t&&t.biff||8){case 2:break;case 3:;case 4:e.l+=2;break;default:e.l+=10;break;}a.name=zn(e,0,t);return a}function Vi(e,r){var t=e.name||"Arial";var a=r&&r.biff==5,n=a?15+t.length:16+2*t.length;var i=zr(n);i._W(2,(e.sz||12)*20);i._W(4,0);i._W(2,400);i._W(4,0);i._W(2,0);i._W(1,t.length);if(!a)i._W(1,1);i._W((a?1:2)*t.length,t,a?"sbcs":"utf16le");return i}function Xi(e){var r=si(e);r.isst=e._R(4);return r}function Gi(e,r,t){var a=e.l+r;var n=si(e,6);if(t.biff==2)e.l++;var i=Kn(e,a-e.l,t);n.val=i;return n}function zi(e,r,t,a,n){var i=!n||n.biff==8;var s=zr(6+2+ +i+(1+i)*t.length);fi(e,r,a,s);s._W(2,t.length);if(i)s._W(1,1);s._W((1+i)*t.length,t,i?"utf16le":"sbcs");return s}function ji(e,r,t){var a=e._R(2);var n=Yn(e,0,t);return[a,n]}function $i(e,r,t,a){var n=t&&t.biff==5;if(!a)a=zr(n?3+r.length:5+2*r.length);a._W(2,e);a._W(n?1:2,r.length);if(!n)a._W(1,1);a._W((n?1:2)*r.length,r,n?"sbcs":"utf16le");var i=a.length>a.l?a.slice(0,a.l):a;if(i.l==null)i.l=i.length;return i}var Ki=Yn;function Yi(e,r,t){var a=e.l+r;var n=t.biff==8||!t.biff?4:2;var i=e._R(n),s=e._R(n);var f=e._R(2),l=e._R(2);e.l=a;return{s:{r:i,c:f},e:{r:s,c:l}}}function Qi(e,r){var t=r.biff==8||!r.biff?4:2;var a=zr(2*t+6);a._W(t,e.s.r);a._W(t,e.e.r+1);a._W(2,e.s.c);a._W(2,e.e.c+1);a._W(2,0);return a}function Ji(e){var r=e._R(2),t=e._R(2);var a=ui(e);return{r:r,c:t,ixfe:a[0],rknum:a[1]}}function Zi(e,r){var t=e.l+r-2;var a=e._R(2),n=e._R(2);var i=[];while(e.l<t)i.push(ui(e));if(e.l!==t)throw new Error("MulRK read error");var s=e._R(2);if(i.length!=s-n+1)throw new Error("MulRK length mismatch");return{r:a,c:n,C:s,rkrec:i}}function qi(e,r){var t=e.l+r-2;var a=e._R(2),n=e._R(2);var i=[];while(e.l<t)i.push(e._R(2));if(e.l!==t)throw new Error("MulBlank read error");var s=e._R(2);if(i.length!=s-n+1)throw new Error("MulBlank length mismatch");return{r:a,c:n,C:s,ixfe:i}}function es(e,r,t,a){var n={};var i=e._R(4),s=e._R(4);var f=e._R(4),l=e._R(2);n.patternType=Sa[f>>26];if(!a.cellStyles)return n;n.alc=i&7;n.fWrap=i>>3&1;n.alcV=i>>4&7;n.fJustLast=i>>7&1;n.trot=i>>8&255;n.cIndent=i>>16&15;n.fShrinkToFit=i>>20&1;n.iReadOrder=i>>22&2;n.fAtrNum=i>>26&1;n.fAtrFnt=i>>27&1;n.fAtrAlc=i>>28&1;n.fAtrBdr=i>>29&1;n.fAtrPat=i>>30&1;n.fAtrProt=i>>31&1;n.dgLeft=s&15;n.dgRight=s>>4&15;n.dgTop=s>>8&15;n.dgBottom=s>>12&15;n.icvLeft=s>>16&127;n.icvRight=s>>23&127;n.grbitDiag=s>>30&3;n.icvTop=f&127;n.icvBottom=f>>7&127;n.icvDiag=f>>14&127;n.dgDiag=f>>21&15;n.icvFore=l&127;n.icvBack=l>>7&127;n.fsxButton=l>>14&1;return n}function rs(e,r,t){var a={};a.ifnt=e._R(2);a.numFmtId=e._R(2);a.flags=e._R(2);a.fStyle=a.flags>>2&1;r-=6;a.data=es(e,r,a.fStyle,t);return a}function ts(e,r,t,a){var n=t&&t.biff==5;if(!a)a=zr(n?16:20);a._W(2,0);if(e.style){a._W(2,e.numFmtId||0);a._W(2,65524)}else{a._W(2,e.numFmtId||0);a._W(2,r<<4)}a._W(4,0);a._W(4,0);if(!n)a._W(4,0);a._W(2,0);return a}function as(e){e.l+=4;var r=[e._R(2),e._R(2)];if(r[0]!==0)r[0]--;if(r[1]!==0)r[1]--;if(r[0]>7||r[1]>7)throw new Error("Bad Gutters: "+r.join("|"));return r}function ns(e){var r=zr(8);r._W(4,0);r._W(2,e[0]?e[0]+1:0);r._W(2,e[1]?e[1]+1:0);return r}function is(e,r,t){var a=si(e,6);if(t.biff==2)++e.l;var n=Xn(e,2);a.val=n;a.t=n===true||n===false?"b":"e";return a}function ss(e,r,t,a,n,i){var s=zr(8);fi(e,r,a,s);Gn(t,i,s);return s}function fs(e){var r=si(e,6);var t=Gt(e,8);r.val=t;return r}function ls(e,r,t,a){var n=zr(14);fi(e,r,a,n);zt(t,n);return n}var os=oi;function cs(e,r,t){var a=e.l+r;var n=e._R(2);var i=e._R(2);t.sbcch=i;if(i==1025||i==14849)return[i,n];if(i<1||i>255)throw new Error("Unexpected SupBook type: "+i);var s=$n(e,i);var f=[];while(a>e.l)f.push(Kn(e));return[i,n,s,f]}function us(e,r,t){var a=e._R(2);var n;var i={fBuiltIn:a&1,fWantAdvise:a>>>1&1,fWantPict:a>>>2&1,fOle:a>>>3&1,fOleLink:a>>>4&1,cf:a>>>5&1023,fIcon:a>>>15&1};if(t.sbcch===14849)n=hi(e,r-2,t);i.body=n||e._R(r-2);if(typeof n==="string")i.Name=n;return i}var hs=["_xlnm.Consolidate_Area","_xlnm.Auto_Open","_xlnm.Auto_Close","_xlnm.Extract","_xlnm.Database","_xlnm.Criteria","_xlnm.Print_Area","_xlnm.Print_Titles","_xlnm.Recorder","_xlnm.Data_Form","_xlnm.Auto_Activate","_xlnm.Auto_Deactivate","_xlnm.Sheet_Title","_xlnm._FilterDatabase"];function ds(e,r,t){var a=e.l+r;var n=e._R(2);var i=e._R(1);var s=e._R(1);var f=e._R(t&&t.biff==2?1:2);var l=0;if(!t||t.biff>=5){if(t.biff!=5)e.l+=2;l=e._R(2);if(t.biff==5)e.l+=2;e.l+=4}var o=$n(e,s,t);if(n&32)o=hs[o.charCodeAt(0)];var c=a-e.l;if(t&&t.biff==2)--c;var u=a==e.l||f===0?[]:_u(e,c,t,f);return{chKey:i,Name:o,itab:l,rgce:u}}function vs(e,r,t){if(t.biff<8)return ps(e,r,t);var a=[],n=e.l+r,i=e._R(t.biff>8?4:2);while(i--!==0)a.push(ci(e,t.biff>8?12:6,t));if(e.l!=n)throw new Error("Bad ExternSheet: "+e.l+" != "+n);return a}function ps(e,r,t){if(e[e.l+1]==3)e[e.l]++;var a=zn(e,r,t);return a.charCodeAt(0)==3?a.slice(1):a}function ms(e,r,t){if(t.biff<8){e.l+=r;return}var a=e._R(2);var n=e._R(2);var i=$n(e,a,t);var s=$n(e,n,t);return[i,s]}function bs(e,r,t){var a=pi(e,6);e.l++;var n=e._R(1);r-=8;return[Au(e,r,t),n,a]}function gs(e,r,t){var a=mi(e,6);switch(t.biff){case 2:e.l++;r-=7;break;case 3:;case 4:e.l+=2;r-=8;break;default:e.l+=6;r-=12;}return[a,xu(e,r,t,a)]}function Es(e){var r=e._R(4)!==0;var t=e._R(4)!==0;var a=e._R(4);return[r,t,a]}function Ss(e,r,t){if(t.biff<8)return;
+var a=e._R(2),n=e._R(2);var i=e._R(2),s=e._R(2);var f=Yn(e,0,t);if(t.biff<8)e._R(1);return[{r:a,c:n},f,s,i]}function ks(e,r,t){return Ss(e,r,t)}function ws(e,r){var t=[];var a=e._R(2);while(a--)t.push(di(e,r));return t}function Cs(e){var r=zr(2+e.length*8);r._W(2,e.length);for(var t=0;t<e.length;++t)vi(e[t],r);return r}function Bs(e,r,t){if(t&&t.biff<8)return xs(e,r,t);var a=bi(e,22);var n=wi(e,r-22,a[1]);return{cmo:a,ft:n}}var Ts=[];Ts[8]=function(e,r){var t=e.l+r;e.l+=10;var a=e._R(2);e.l+=4;e.l+=2;e.l+=2;e.l+=2;e.l+=4;var n=e._R(1);e.l+=n;e.l=t;return{fmt:a}};function xs(e,r,t){e.l+=4;var a=e._R(2);var n=e._R(2);var i=e._R(2);e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=2;e.l+=6;r-=36;var s=[];s.push((Ts[a]||Gr)(e,r,t));return{cmo:[n,a,i],ft:s}}function Is(e,r,t){var a=e.l;var n="";try{e.l+=4;var i=(t.lastobj||{cmo:[0,0]}).cmo[1];var s;if([0,5,7,11,12,14].indexOf(i)==-1)e.l+=6;else s=Jn(e,6,t);var f=e._R(2);e._R(2);Wn(e,2);var l=e._R(2);e.l+=l;for(var o=1;o<e.lens.length-1;++o){if(e.l-a!=e.lens[o])throw new Error("TxO: bad continue record");var c=e[e.l];var u=$n(e,e.lens[o+1]-e.lens[o]-1);n+=u;if(n.length>=(c?f:2*f))break}if(n.length!==f&&n.length!==f*2){throw new Error("cchText: "+f+" != "+n.length)}e.l=a+r;return{t:n}}catch(h){e.l=a+r;return{t:n}}}function _s(e,r){var t=di(e,8);e.l+=16;var a=ti(e,r-24);return[t,a]}function As(e){var r=zr(24);var t=ct(e[0]);r._W(2,t.r);r._W(2,t.r);r._W(2,t.c);r._W(2,t.c);var a="d0 c9 ea 79 f9 ba ce 11 8c 82 00 aa 00 4b a9 0b".split(" ");for(var n=0;n<16;++n)r._W(1,parseInt(a[n],16));return A([r,ai(e[1])])}function Rs(e,r){e._R(2);var t=di(e,8);var a=e._R((r-10)/2,"dbcs-cont");a=a.replace(R,"");return[t,a]}function ys(e){var r=e[1].Tooltip;var t=zr(10+2*(r.length+1));t._W(2,2048);var a=ct(e[0]);t._W(2,a.r);t._W(2,a.r);t._W(2,a.c);t._W(2,a.c);for(var n=0;n<r.length;++n)t._W(2,r.charCodeAt(n));t._W(2,0);return t}function Fs(e){var r=[0,0],t;t=e._R(2);r[0]=Ea[t]||t;t=e._R(2);r[1]=Ea[t]||t;return r}function Ds(e){if(!e)e=zr(4);e._W(2,1);e._W(2,1);return e}function Os(e){var r=e._R(2);var t=[];while(r-- >0)t.push(ii(e,8));return t}function Ps(e){var r=e._R(2);var t=[];while(r-- >0)t.push(ii(e,8));return t}function Ns(e){e.l+=2;var r={cxfs:0,crc:0};r.cxfs=e._R(2);r.crc=e._R(4);return r}function Ms(e,r,t){if(!t.cellStyles)return Gr(e,r);var a=t&&t.biff>=12?4:2;var n=e._R(a);var i=e._R(a);var s=e._R(a);var f=e._R(a);var l=e._R(2);if(a==2)e.l+=2;return{s:n,e:i,w:s,ixfe:f,flags:l}}function Ls(e,r){var t={};if(r<32)return t;e.l+=16;t.header=Gt(e,8);t.footer=Gt(e,8);e.l+=2;return t}function Us(e,r,t){var a={area:false};if(t.biff!=5){e.l+=r;return a}var n=e._R(1);e.l+=3;if(n&16)a.area=true;return a}function Ws(e){var r=zr(2*e);for(var t=0;t<e;++t)r._W(2,t+1);return r}var Hs=si;var Vs=Vn;var Xs=Kn;function Gs(e){var r=e._R(2);var t=e._R(2);var a=e._R(4);var n={fmt:r,env:t,len:a,data:e.slice(e.l,e.l+a)};e.l+=a;return n}function zs(e,r,t){var a=si(e,6);++e.l;var n=Yn(e,r-7,t);a.t="str";a.val=n;return a}function js(e){var r=si(e,6);++e.l;var t=Gt(e,8);r.t="n";r.val=t;return r}function $s(e,r,t){var a=zr(15);mp(a,e,r);a._W(8,t,"f");return a}function Ks(e){var r=si(e,6);++e.l;var t=e._R(2);r.t="n";r.val=t;return r}function Ys(e,r,t){var a=zr(9);mp(a,e,r);a._W(2,t);return a}function Qs(e){var r=e._R(1);if(r===0){e.l++;return""}return e._R(r,"sbcs-cont")}function Js(e,r){e.l+=6;e.l+=2;e.l+=1;e.l+=3;e.l+=1;e.l+=r-13}function Zs(e,r,t){var a=e.l+r;var n=si(e,6);var i=e._R(2);var s=$n(e,i,t);e.l=a;n.t="str";n.val=s;return n}var qs=function(){var e={1:437,2:850,3:1252,4:1e4,100:852,101:866,102:865,103:861,104:895,105:620,106:737,107:857,120:950,121:949,122:936,123:932,124:874,125:1255,126:1256,150:10007,151:10029,152:10006,200:1250,201:1251,202:1254,203:1253,0:20127,8:865,9:437,10:850,11:437,13:437,14:850,15:437,16:850,17:437,18:850,19:932,20:850,21:437,22:850,23:865,24:437,25:437,26:850,27:437,28:863,29:850,31:852,34:852,35:852,36:860,37:850,38:866,55:850,64:852,77:936,78:949,79:950,80:874,87:1252,88:1252,89:1252,255:16969};function r(r,t){var a=[];var n=w(1);switch(t.type){case"base64":n=B(b.decode(r));break;case"binary":n=B(r);break;case"buffer":;case"array":n=r;break;}Xr(n,0);var i=n._R(1);var s=false;var f=false,l=false;switch(i){case 2:;case 3:break;case 48:f=true;s=true;break;case 49:f=true;break;case 131:s=true;break;case 139:s=true;break;case 140:s=true;l=true;break;case 245:s=true;break;default:throw new Error("DBF Unsupported Version: "+i.toString(16));}var o=0,c=0;if(i==2)o=n._R(2);n.l+=3;if(i!=2)o=n._R(4);if(i!=2)c=n._R(2);var u=n._R(2);var h=1252;if(i!=2){n.l+=16;n._R(1);if(n[n.l]!==0)h=e[n[n.l]];n.l+=1;n.l+=2}if(l)n.l+=36;var d=[],v={};var p=c-10-(f?264:0),m=l?32:11;while(i==2?n.l<n.length&&n[n.l]!=13:n.l<p){v={};v.name=cptable.utils.decode(h,n.slice(n.l,n.l+m)).replace(/[\u0000\r\n].*$/g,"");n.l+=m;v.type=String.fromCharCode(n._R(1));if(i!=2&&!l)v.offset=n._R(4);v.len=n._R(1);if(i==2)v.offset=n._R(2);v.dec=n._R(1);if(v.name.length)d.push(v);if(i!=2)n.l+=l?13:14;switch(v.type){case"B":if((!f||v.len!=8)&&t.WTF)console.log("Skipping "+v.name+":"+v.type);break;case"G":;case"P":if(t.WTF)console.log("Skipping "+v.name+":"+v.type);break;case"C":;case"D":;case"F":;case"I":;case"L":;case"M":;case"N":;case"O":;case"T":;case"Y":;case"0":;case"@":;case"+":break;default:throw new Error("Unknown Field Type: "+v.type);}}if(n[n.l]!==13)n.l=c-1;else if(i==2)n.l=521;if(i!=2){if(n._R(1)!==13)throw new Error("DBF Terminator not found "+n.l+" "+n[n.l]);n.l=c}var g=0,E=0;a[0]=[];for(E=0;E!=d.length;++E)a[0][E]=d[E].name;while(o-- >0){if(n[n.l]===42){n.l+=u;continue}++n.l;a[++g]=[];E=0;for(E=0;E!=d.length;++E){var S=n.slice(n.l,n.l+d[E].len);n.l+=d[E].len;Xr(S,0);var k=cptable.utils.decode(h,S);switch(d[E].type){case"C":a[g][E]=cptable.utils.decode(h,S);a[g][E]=a[g][E].trim();break;case"D":if(k.length===8)a[g][E]=new Date(+k.slice(0,4),+k.slice(4,6)-1,+k.slice(6,8));else a[g][E]=k;break;case"F":a[g][E]=parseFloat(k.trim());break;case"+":;case"I":a[g][E]=l?S._R(-4,"i")^2147483648:S._R(4,"i");break;case"L":switch(k.toUpperCase()){case"Y":;case"T":a[g][E]=true;break;case"N":;case"F":a[g][E]=false;break;case" ":;case"?":a[g][E]=false;break;default:throw new Error("DBF Unrecognized L:|"+k+"|");}break;case"M":if(!s)throw new Error("DBF Unexpected MEMO for type "+i.toString(16));a[g][E]="##MEMO##"+(l?parseInt(k.trim(),10):S._R(4));break;case"N":a[g][E]=+k.replace(/\u0000/g,"").trim();break;case"@":a[g][E]=new Date(S._R(-8,"f")-621356832e5);break;case"T":a[g][E]=new Date((S._R(4)-2440588)*864e5+S._R(4));break;case"Y":a[g][E]=S._R(4,"i")/1e4;break;case"O":a[g][E]=-S._R(-8,"f");break;case"B":if(f&&d[E].len==8){a[g][E]=S._R(8,"f");break};case"G":;case"P":S.l+=d[E].len;break;case"0":if(d[E].name==="_NullFlags")break;default:throw new Error("DBF Unsupported data type "+d[E].type);}}}if(i!=2)if(n.l<n.length&&n[n.l++]!=26)throw new Error("DBF EOF Marker missing "+(n.l-1)+" of "+n.length+" "+n[n.l-1].toString(16));if(t&&t.sheetRows)a=a.slice(0,t.sheetRows);return a}function t(e,t){var a=t||{};if(!a.dateNF)a.dateNF="yyyymmdd";return Et(r(e,a),a)}function a(e,r){try{return bt(t(e,r),r)}catch(a){if(r&&r.WTF)throw a}return{SheetNames:[],Sheets:{}}}var n={B:8,C:250,L:1,D:8,"?":0,"":0};function i(e,r){var t=r||{};if(t.type=="string")throw new Error("Cannot write DBF to JS string");var a=$r();var i=ym(e,{header:1,cellDates:true});var s=i[0],f=i.slice(1);var l=0,o=0,c=0,u=1;for(l=0;l<s.length;++l){if(l==null)continue;++c;if(typeof s[l]==="number")s[l]=s[l].toString(10);if(typeof s[l]!=="string")throw new Error("DBF Invalid column name "+s[l]+" |"+typeof s[l]+"|");if(s.indexOf(s[l])!==l)for(o=0;o<1024;++o)if(s.indexOf(s[l]+"_"+o)==-1){s[l]+="_"+o;break}}var h=vt(e["!ref"]);var d=[];for(l=0;l<=h.e.c-h.s.c;++l){var v=[];for(o=0;o<f.length;++o){if(f[o][l]!=null)v.push(f[o][l])}if(v.length==0||s[l]==null){d[l]="?";continue}var p="",m="";for(o=0;o<v.length;++o){switch(typeof v[o]){case"number":m="B";break;case"string":m="C";break;case"boolean":m="L";break;case"object":m=v[o]instanceof Date?"D":"C";break;default:m="C";}p=p&&p!=m?"C":m;if(p=="C")break}u+=n[p]||0;d[l]=p}var b=a.next(32);b._W(4,318902576);b._W(4,f.length);b._W(2,296+32*c);b._W(2,u);for(l=0;l<4;++l)b._W(4,0);b._W(4,768);for(l=0,o=0;l<s.length;++l){if(s[l]==null)continue;var g=a.next(32);var E=(s[l].slice(-10)+"\0\0\0\0\0\0\0\0\0\0\0").slice(0,11);g._W(1,E,"sbcs");g._W(1,d[l]=="?"?"C":d[l],"sbcs");g._W(4,o);g._W(1,n[d[l]]||0);g._W(1,0);g._W(1,2);g._W(4,0);g._W(1,0);g._W(4,0);g._W(4,0);o+=n[d[l]]||0}var S=a.next(264);S._W(4,13);for(l=0;l<65;++l)S._W(4,0);for(l=0;l<f.length;++l){var k=a.next(u);k._W(1,0);for(o=0;o<s.length;++o){if(s[o]==null)continue;switch(d[o]){case"L":k._W(1,f[l][o]==null?63:f[l][o]?84:70);break;case"B":k._W(8,f[l][o]||0,"f");break;case"D":if(!f[l][o])k._W(8,"00000000","sbcs");else{k._W(4,("0000"+f[l][o].getFullYear()).slice(-4),"sbcs");k._W(2,("00"+(f[l][o].getMonth()+1)).slice(-2),"sbcs");k._W(2,("00"+f[l][o].getDate()).slice(-2),"sbcs")}break;case"C":var w=String(f[l][o]||"");k._W(1,w,"sbcs");for(c=0;c<250-w.length;++c)k._W(1,32);break;}}}a.next(1)._W(1,26);return a.end()}return{to_workbook:a,to_sheet:t,from_sheet:i}}();var ef=function(){function e(e,t){switch(t.type){case"base64":return r(b.decode(e),t);case"binary":return r(e,t);case"buffer":return r(e.toString("binary"),t);case"array":return r(se(e),t);}throw new Error("Unrecognized type "+t.type)}function r(e,r){var t=e.split(/[\n\r]+/),a=-1,n=-1,i=0,s=0,f=[];var l=[];var o=null;var c={},u=[],h=[],d=[];var v=0,p;for(;i!==t.length;++i){v=0;var m=t[i].trim();var b=m.replace(/;;/g,"
").split(";").map(function(e){return e.replace(/\u0001/g,";")});var g=b[0],E;if(m.length>0)switch(g){case"ID":break;case"E":break;case"B":break;case"O":break;case"P":if(b[1].charAt(0)=="P")l.push(m.slice(3).replace(/;;/g,";"));break;case"C":var S=false,k=false;for(s=1;s<b.length;++s)switch(b[s].charAt(0)){case"X":n=parseInt(b[s].slice(1))-1;k=true;break;case"Y":a=parseInt(b[s].slice(1))-1;if(!k)n=0;for(p=f.length;p<=a;++p)f[p]=[];break;case"K":E=b[s].slice(1);if(E.charAt(0)==='"')E=E.slice(1,E.length-1);else if(E==="TRUE")E=true;else if(E==="FALSE")E=false;else if(!isNaN(oe(E))){E=oe(E);if(o!==null&&F.is_date(o))E=re(E)}else if(!isNaN(ce(E).getDate())){E=ie(E)}if(typeof cptable!=="undefined"&&typeof E=="string"&&(r||{}).type!="string"&&(r||{}).codepage)E=cptable.utils.decode(r.codepage,E);S=true;break;case"E":var w=Go(b[s].slice(1),{r:a,c:n});f[a][n]=[f[a][n],w];break;default:if(r&&r.WTF)throw new Error("SYLK bad record "+m);}if(S){f[a][n]=E;o=null}break;case"F":var C=0;for(s=1;s<b.length;++s)switch(b[s].charAt(0)){case"X":n=parseInt(b[s].slice(1))-1;++C;break;case"Y":a=parseInt(b[s].slice(1))-1;for(p=f.length;p<=a;++p)f[p]=[];break;case"M":v=parseInt(b[s].slice(1))/20;break;case"F":break;case"G":break;case"P":o=l[parseInt(b[s].slice(1))];break;case"S":break;case"D":break;case"N":break;case"W":d=b[s].slice(1).split(" ");for(p=parseInt(d[0],10);p<=parseInt(d[1],10);++p){v=parseInt(d[2],10);h[p-1]=v===0?{hidden:true}:{wch:v};fl(h[p-1])}break;case"C":n=parseInt(b[s].slice(1))-1;if(!h[n])h[n]={};break;case"R":a=parseInt(b[s].slice(1))-1;if(!u[a])u[a]={};if(v>0){u[a].hpt=v;u[a].hpx=ul(v)}else if(v===0)u[a].hidden=true;break;default:if(r&&r.WTF)throw new Error("SYLK bad record "+m);}if(C<1)o=null;break;default:if(r&&r.WTF)throw new Error("SYLK bad record "+m);}}if(u.length>0)c["!rows"]=u;if(h.length>0)c["!cols"]=h;if(r&&r.sheetRows)f=f.slice(0,r.sheetRows);return[f,c]}function t(r,t){var a=e(r,t);var n=a[0],i=a[1];var s=Et(n,t);j(i).forEach(function(e){s[e]=i[e]});return s}function a(e,r){return bt(t(e,r),r)}function n(e,r,t,a){var n="C;Y"+(t+1)+";X"+(a+1)+";K";switch(e.t){case"n":n+=e.v||0;if(e.f&&!e.F)n+=";E"+jo(e.f,{r:t,c:a});break;case"b":n+=e.v?"TRUE":"FALSE";break;case"e":n+=e.w||e.v;break;case"d":n+='"'+(e.w||e.v)+'"';break;case"s":n+='"'+e.v.replace(/"/g,"")+'"';break;}return n}function i(e,r){r.forEach(function(r,t){var a="F;W"+(t+1)+" "+(t+1)+" ";if(r.hidden)a+="0";else{if(typeof r.width=="number")r.wpx=tl(r.width);if(typeof r.wpx=="number")r.wch=al(r.wpx);if(typeof r.wch=="number")a+=Math.round(r.wch)}if(a.charAt(a.length-1)!=" ")e.push(a)})}function s(e,r){r.forEach(function(r,t){var a="F;";if(r.hidden)a+="M0;";else if(r.hpt)a+="M"+20*r.hpt+";";else if(r.hpx)a+="M"+20*cl(r.hpx)+";";if(a.length>2)e.push(a+"R"+(t+1))})}function f(e,r){var t=["ID;PWXL;N;E"],a=[];var f=vt(e["!ref"]),l;var o=Array.isArray(e);var c="\r\n";t.push("P;PGeneral");t.push("F;P0;DG0G8;M255");if(e["!cols"])i(t,e["!cols"]);if(e["!rows"])s(t,e["!rows"]);t.push("B;Y"+(f.e.r-f.s.r+1)+";X"+(f.e.c-f.s.c+1)+";D"+[f.s.c,f.s.r,f.e.c,f.e.r].join(" "));for(var u=f.s.r;u<=f.e.r;++u){for(var h=f.s.c;h<=f.e.c;++h){var d=ut({r:u,c:h});l=o?(e[u]||[])[h]:e[d];if(!l||l.v==null&&(!l.f||l.F))continue;a.push(n(l,e,u,h,r))}}return t.join(c)+c+a.join(c)+c+"E"+c}return{to_workbook:a,to_sheet:t,from_sheet:f}}();var rf=function(){function e(e,t){switch(t.type){case"base64":return r(b.decode(e),t);case"binary":return r(e,t);case"buffer":return r(e.toString("binary"),t);case"array":return r(se(e),t);}throw new Error("Unrecognized type "+t.type)}function r(e,r){var t=e.split("\n"),a=-1,n=-1,i=0,s=[];for(;i!==t.length;++i){if(t[i].trim()==="BOT"){s[++a]=[];n=0;continue}if(a<0)continue;var f=t[i].trim().split(",");var l=f[0],o=f[1];++i;var c=t[i].trim();switch(+l){case-1:if(c==="BOT"){s[++a]=[];n=0;continue}else if(c!=="EOD")throw new Error("Unrecognized DIF special command "+c);break;case 0:if(c==="TRUE")s[a][n]=true;else if(c==="FALSE")s[a][n]=false;else if(!isNaN(oe(o)))s[a][n]=oe(o);else if(!isNaN(ce(o).getDate()))s[a][n]=ie(o);else s[a][n]=o;++n;break;case 1:c=c.slice(1,c.length-1);s[a][n++]=c!==""?c:null;break;}if(c==="EOD")break}if(r&&r.sheetRows)s=s.slice(0,r.sheetRows);return s}function t(r,t){return Et(e(r,t),t)}function a(e,r){return bt(t(e,r),r)}var n=function(){var e=function t(e,r,a,n,i){e.push(r);e.push(a+","+n);e.push('"'+i.replace(/"/g,'""')+'"')};var r=function a(e,r,t,n){e.push(r+","+t);e.push(r==1?'"'+n.replace(/"/g,'""')+'"':n)};return function n(t){var a=[];var n=vt(t["!ref"]),i;var s=Array.isArray(t);e(a,"TABLE",0,1,"sheetjs");e(a,"VECTORS",0,n.e.r-n.s.r+1,"");e(a,"TUPLES",0,n.e.c-n.s.c+1,"");e(a,"DATA",0,0,"");for(var f=n.s.r;f<=n.e.r;++f){r(a,-1,0,"BOT");for(var l=n.s.c;l<=n.e.c;++l){var o=ut({r:f,c:l});i=s?(t[f]||[])[l]:t[o];if(!i){r(a,1,0,"");continue}switch(i.t){case"n":var c=m?i.w:i.v;if(!c&&i.v!=null)c=i.v;if(c==null){if(m&&i.f&&!i.F)r(a,1,0,"="+i.f);else r(a,1,0,"")}else r(a,0,c,"V");break;case"b":r(a,0,i.v?1:0,i.v?"TRUE":"FALSE");break;case"s":r(a,1,0,!m||isNaN(i.v)?i.v:'="'+i.v+'"');break;case"d":if(!i.w)i.w=F.format(i.z||F._table[14],ee(ie(i.v)));if(m)r(a,0,i.w,"V");else r(a,1,0,i.w);break;default:r(a,1,0,"");}}}r(a,-1,0,"EOD");var u="\r\n";var h=a.join(u);return h}}();return{to_workbook:a,to_sheet:t,from_sheet:n}}();var tf=function(){function e(e){return e.replace(/\\b/g,"\\").replace(/\\c/g,":").replace(/\\n/g,"\n")}function r(e){return e.replace(/\\/g,"\\b").replace(/:/g,"\\c").replace(/\n/g,"\\n")}function t(r,t){var a=r.split("\n"),n=-1,i=-1,s=0,f=[];for(;s!==a.length;++s){var l=a[s].trim().split(":");if(l[0]!=="cell")continue;var o=ct(l[1]);if(f.length<=o.r)for(n=f.length;n<=o.r;++n)if(!f[n])f[n]=[];n=o.r;i=o.c;switch(l[2]){case"t":f[n][i]=e(l[3]);break;case"v":f[n][i]=+l[3];break;case"vtf":var c=l[l.length-1];case"vtc":switch(l[3]){case"nl":f[n][i]=+l[4]?true:false;break;default:f[n][i]=+l[4];break;}if(l[2]=="vtf")f[n][i]=[f[n][i],c];}}if(t&&t.sheetRows)f=f.slice(0,t.sheetRows);return f}function a(e,r){return Et(t(e,r),r)}function n(e,r){return bt(a(e,r),r)}var i=["socialcalc:version:1.5","MIME-Version: 1.0","Content-Type: multipart/mixed; boundary=SocialCalcSpreadsheetControlSave"].join("\n");var s=["--SocialCalcSpreadsheetControlSave","Content-type: text/plain; charset=UTF-8"].join("\n")+"\n";var f=["# SocialCalc Spreadsheet Control Save","part:sheet"].join("\n");var l="--SocialCalcSpreadsheetControlSave--";function o(e){if(!e||!e["!ref"])return"";var t=[],a=[],n,i="";var s=ht(e["!ref"]);var f=Array.isArray(e);for(var l=s.s.r;l<=s.e.r;++l){for(var o=s.s.c;o<=s.e.c;++o){i=ut({r:l,c:o});n=f?(e[l]||[])[o]:e[i];if(!n||n.v==null||n.t==="z")continue;a=["cell",i,"t"];switch(n.t){case"s":;case"str":a.push(r(n.v));break;case"n":if(!n.f){a[2]="v";a[3]=n.v}else{a[2]="vtf";a[3]="n";a[4]=n.v;a[5]=r(n.f)}break;case"b":a[2]="vt"+(n.f?"f":"c");a[3]="nl";a[4]=n.v?"1":"0";a[5]=r(n.f||(n.v?"TRUE":"FALSE"));break;case"d":var c=ee(ie(n.v));a[2]="vtc";a[3]="nd";a[4]=""+c;a[5]=n.w||F.format(n.z||F._table[14],c);break;case"e":continue;}t.push(a.join(":"))}}t.push("sheet:c:"+(s.e.c-s.s.c+1)+":r:"+(s.e.r-s.s.r+1)+":tvf:1");t.push("valueformat:1:text-wiki");return t.join("\n")}function c(e){return[i,s,f,s,o(e),l].join("\n")}return{to_workbook:n,to_sheet:a,from_sheet:c}}();var af=function(){function e(e,r,t,a,n){if(n.raw)r[t][a]=e;else if(e==="TRUE")r[t][a]=true;else if(e==="FALSE")r[t][a]=false;else if(e===""){}else if(!isNaN(oe(e)))r[t][a]=oe(e);else if(!isNaN(ce(e).getDate()))r[t][a]=ie(e);else r[t][a]=e}function r(r,t){var a=t||{};var n=[];if(!r||r.length===0)return n;var i=r.split(/[\r\n]/);var s=i.length-1;while(s>=0&&i[s].length===0)--s;var f=10,l=0;var o=0;for(;o<=s;++o){l=i[o].indexOf(" ");if(l==-1)l=i[o].length;else l++;f=Math.max(f,l)}for(o=0;o<=s;++o){n[o]=[];var c=0;e(i[o].slice(0,f).trim(),n,o,c,a);for(c=1;c<=(i[o].length-f)/10+1;++c)e(i[o].slice(f+(c-1)*10,f+c*10).trim(),n,o,c,a)}if(a.sheetRows)n=n.slice(0,a.sheetRows);return n}var t={44:",",9:"\t",59:";"};var a={44:3,9:2,59:1};function n(e){var r={},n=false,i=0,s=0;for(;i<e.length;++i){if((s=e.charCodeAt(i))==34)n=!n;else if(!n&&s in t)r[s]=(r[s]||0)+1}s=[];for(i in r)if(r.hasOwnProperty(i)){s.push([r[i],i])}if(!s.length){r=a;for(i in r)if(r.hasOwnProperty(i)){s.push([r[i],i])}}s.sort(function(e,r){return e[0]-r[0]||a[e[1]]-a[r[1]]});return t[s.pop()[1]]}function i(e,r){var t=r||{};var a="";if(p!=null&&t.dense==null)t.dense=p;var i=t.dense?[]:{};var s={s:{c:0,r:0},e:{c:0,r:0}};if(e.slice(0,4)=="sep="&&e.charCodeAt(5)==10){a=e.charAt(4);e=e.slice(6)}else a=n(e.slice(0,1024));var f=0,l=0,o=0;var c=0,u=0,h=a.charCodeAt(0),d=false,v=0;e=e.replace(/\r\n/gm,"\n");var m=t.dateNF!=null?M(t.dateNF):null;function b(){var r=e.slice(c,u);var a={};if(r.charAt(0)=='"'&&r.charAt(r.length-1)=='"')r=r.slice(1,-1).replace(/""/g,'"');if(r.length===0)a.t="z";else if(t.raw){a.t="s";a.v=r}else if(r.trim().length===0){a.t="s";a.v=r}else if(r.charCodeAt(0)==61){if(r.charCodeAt(1)==34&&r.charCodeAt(r.length-1)==34){a.t="s";a.v=r.slice(2,-1).replace(/""/g,'"')}else if(Yo(r)){a.t="n";a.f=r.slice(1)}else{a.t="s";a.v=r}}else if(r=="TRUE"){a.t="b";a.v=true}else if(r=="FALSE"){a.t="b";a.v=false}else if(!isNaN(o=oe(r))){a.t="n";if(t.cellText!==false)a.w=r;a.v=o}else if(!isNaN(ce(r).getDate())||m&&r.match(m)){a.z=t.dateNF||F._table[14];var n=0;if(m&&r.match(m)){r=L(r,t.dateNF,r.match(m)||[]);n=1}if(t.cellDates){a.t="d";a.v=ie(r,n)}else{a.t="n";a.v=ee(ie(r,n))}if(t.cellText!==false)a.w=F.format(a.z,a.v instanceof Date?ee(a.v):a.v);if(!t.cellNF)delete a.z}else{a.t="s";a.v=r}if(a.t=="z"){}else if(t.dense){if(!i[f])i[f]=[];i[f][l]=a}else i[ut({c:l,r:f})]=a;c=u+1;if(s.e.c<l)s.e.c=l;if(s.e.r<f)s.e.r=f;if(v==h)++l;else{l=0;++f;if(t.sheetRows&&t.sheetRows<=f)return true}}e:for(;u<e.length;++u)switch(v=e.charCodeAt(u)){case 34:d=!d;break;case h:;case 10:;case 13:if(!d&&b())break e;break;default:break;}if(u-c>0)b();i["!ref"]=dt(s);return i}function s(e,t){if(e.slice(0,4)=="sep=")return i(e,t);if(e.indexOf("\t")>=0||e.indexOf(",")>=0||e.indexOf(";")>=0)return i(e,t);return Et(r(e,t),t)}function f(e,r){var t="",a=r.type=="string"?[0,0,0,0]:cm(e,r);switch(r.type){case"base64":t=b.decode(e);break;case"binary":t=e;break;case"buffer":if(r.codepage==65001)t=e.toString("utf8");else if(r.codepage&&typeof cptable!=="undefined")t=cptable.utils.decode(r.codepage,e);else t=e.toString("binary");break;case"array":t=se(e);break;case"string":t=e;break;default:throw new Error("Unrecognized type "+r.type);}if(a[0]==239&&a[1]==187&&a[2]==191)t=Xe(t.slice(3));else if(r.type=="binary"&&typeof cptable!=="undefined"&&r.codepage)t=cptable.utils.decode(r.codepage,cptable.utils.encode(1252,t));if(t.slice(0,19)=="socialcalc:version:")return tf.to_sheet(r.type=="string"?t:Xe(t),r);return s(t,r)}function l(e,r){return bt(f(e,r),r)}function o(e){var r=[];var t=vt(e["!ref"]),a;var n=Array.isArray(e);for(var i=t.s.r;i<=t.e.r;++i){var s=[];for(var f=t.s.c;f<=t.e.c;++f){var l=ut({r:i,c:f});a=n?(e[i]||[])[f]:e[l];if(!a||a.v==null){s.push("          ");continue}var o=(a.w||(mt(a),a.w)||"").slice(0,10);while(o.length<10)o+=" ";s.push(o+(f===0?" ":""))}r.push(s.join(""))}return r.join("\n")}return{to_workbook:l,to_sheet:f,from_sheet:o}}();function nf(e,r){var t=r||{},a=!!t.WTF;t.WTF=true;try{var n=ef.to_workbook(e,t);t.WTF=a;return n}catch(i){t.WTF=a;if(!i.message.match(/SYLK bad record ID/)&&a)throw i;return af.to_workbook(e,r)}}var sf=function(){function e(e,r,t){if(!e)return;Xr(e,e.l||0);var a=t.Enum||E;while(e.l<e.length){var n=e._R(2);var i=a[n]||a[255];var s=e._R(2);var f=e.l+s;var l=(i.f||Gr)(e,s,t);e.l=f;if(r(l,i.n,n))return}}function r(e,r){switch(r.type){case"base64":return t(B(b.decode(e)),r);case"binary":return t(B(e),r);case"buffer":;case"array":return t(e,r);}throw"Unsupported type "+r.type}function t(r,t){if(!r)return r;var a=t||{};if(p!=null&&a.dense==null)a.dense=p;var n=a.dense?[]:{},i="Sheet1",s=0;var f={},l=[i];var o={s:{r:0,c:0},e:{r:0,c:0}};var c=a.sheetRows||0;if(r[2]==2)a.Enum=E;else if(r[2]==26)a.Enum=S;else if(r[2]==14){a.Enum=S;a.qpro=true;r.l=0}else throw new Error("Unrecognized LOTUS BOF "+r[2]);e(r,function(e,t,u){if(r[2]==2)switch(u){case 0:a.vers=e;if(e>=4096)a.qpro=true;break;case 6:o=e;break;case 15:if(!a.qpro)e[1].v=e[1].v.slice(1);case 13:;case 14:;case 16:;case 51:if(u==14&&(e[2]&112)==112&&(e[2]&15)>1&&(e[2]&15)<15){e[1].z=a.dateNF||F._table[14];if(a.cellDates){e[1].t="d";e[1].v=re(e[1].v)}}if(a.dense){if(!n[e[0].r])n[e[0].r]=[];n[e[0].r][e[0].c]=e[1]}else n[ut(e[0])]=e[1];break;}else switch(u){case 22:e[1].v=e[1].v.slice(1);case 23:;case 24:;case 25:;case 37:;case 39:;case 40:if(e[3]>s){n["!ref"]=dt(o);f[i]=n;n=a.dense?[]:{};o={s:{r:0,c:0},e:{r:0,c:0}};s=e[3];i="Sheet"+(s+1);l.push(i)}if(c>0&&e[0].r>=c)break;if(a.dense){if(!n[e[0].r])n[e[0].r]=[];n[e[0].r][e[0].c]=e[1]}else n[ut(e[0])]=e[1];if(o.e.c<e[0].c)o.e.c=e[0].c;if(o.e.r<e[0].r)o.e.r=e[0].r;break;default:break;}},a);n["!ref"]=dt(o);f[i]=n;return{SheetNames:l,Sheets:f}}function a(e){var r={s:{c:0,r:0},e:{c:0,r:0}};r.s.c=e._R(2);r.s.r=e._R(2);r.e.c=e._R(2);r.e.r=e._R(2);if(r.s.c==65535)r.s.c=r.e.c=r.s.r=r.e.r=0;return r}function n(e,r,t){var a=[{c:0,r:0},{t:"n",v:0},0];if(t.qpro&&t.vers!=20768){a[0].c=e._R(1);e.l++;a[0].r=e._R(2);e.l+=2}else{a[2]=e._R(1);a[0].c=e._R(2);a[0].r=e._R(2)}return a}function i(e,r,t){var a=e.l+r;var i=n(e,r,t);i[1].t="s";if(t.vers==20768){e.l++;var s=e._R(1);i[1].v=e._R(s,"utf8");return i}if(t.qpro)e.l++;i[1].v=e._R(a-e.l,"cstr");return i}function s(e,r,t){var a=n(e,r,t);a[1].v=e._R(2,"i");return a}function f(e,r,t){var a=n(e,r,t);a[1].v=e._R(8,"f");return a}function l(e,r,t){var a=e.l+r;var i=n(e,r,t);i[1].v=e._R(8,"f");if(t.qpro)e.l=a;else{var s=e._R(2);e.l+=s}return i}function o(e){var r=[{c:0,r:0},{t:"n",v:0},0];r[0].r=e._R(2);r[3]=e[e.l++];r[0].c=e[e.l++];return r}function c(e,r){var t=o(e,r);t[1].t="s";t[1].v=e._R(r-4,"cstr");return t}function u(e,r){var t=o(e,r);t[1].v=e._R(2);var a=t[1].v>>1;if(t[1].v&1){switch(a&7){case 1:a=(a>>3)*500;break;case 2:a=(a>>3)/20;break;case 4:a=(a>>3)/2e3;break;case 6:a=(a>>3)/16;break;case 7:a=(a>>3)/64;break;default:throw"unknown NUMBER_18 encoding "+(a&7);}}t[1].v=a;return t}function h(e,r){var t=o(e,r);var a=e._R(4);var n=e._R(4);var i=e._R(2);if(i==65535){t[1].v=0;return t}var s=i&32768;i=(i&32767)-16446;t[1].v=(s*2-1)*((i>0?n<<i:n>>>-i)+(i>-32?a<<i+32:a>>>-(i+32)));return t}function d(e,r){var t=h(e,14);e.l+=r-14;return t}function v(e,r){var t=o(e,r);var a=e._R(4);t[1].v=a>>6;return t}function m(e,r){var t=o(e,r);var a=e._R(8,"f");t[1].v=a;return t}function g(e,r){var t=m(e,14);e.l+=r-10;return t}var E={0:{n:"BOF",f:Wn},1:{n:"EOF"},2:{n:"CALCMODE"},3:{n:"CALCORDER"},4:{n:"SPLIT"},5:{n:"SYNC"},6:{n:"RANGE",f:a},7:{n:"WINDOW1"},8:{n:"COLW1"},9:{n:"WINTWO"},10:{n:"COLW2"},11:{n:"NAME"},12:{n:"BLANK"},13:{n:"INTEGER",f:s},14:{n:"NUMBER",f:f},15:{n:"LABEL",f:i},16:{n:"FORMULA",f:l},24:{n:"TABLE"},25:{n:"ORANGE"},26:{n:"PRANGE"},27:{n:"SRANGE"},28:{n:"FRANGE"},29:{n:"KRANGE1"},32:{n:"HRANGE"},35:{n:"KRANGE2"},36:{n:"PROTEC"},37:{n:"FOOTER"},38:{n:"HEADER"},39:{n:"SETUP"},40:{n:"MARGINS"},41:{n:"LABELFMT"},42:{n:"TITLES"},43:{n:"SHEETJS"},45:{n:"GRAPH"},46:{n:"NGRAPH"},47:{n:"CALCCOUNT"},48:{n:"UNFORMATTED"},49:{n:"CURSORW12"},50:{n:"WINDOW"},51:{n:"STRING",f:i},55:{n:"PASSWORD"},56:{n:"LOCKED"},60:{n:"QUERY"},61:{n:"QUERYNAME"},62:{n:"PRINT"},63:{n:"PRINTNAME"},64:{n:"GRAPH2"},65:{n:"GRAPHNAME"},66:{n:"ZOOM"},67:{n:"SYMSPLIT"},68:{n:"NSROWS"},69:{n:"NSCOLS"},70:{n:"RULER"},71:{n:"NNAME"},72:{n:"ACOMM"},73:{n:"AMACRO"},74:{n:"PARSE"},255:{n:"",f:Gr}};var S={0:{n:"BOF"},1:{n:"EOF"},3:{n:"??"},4:{n:"??"},5:{n:"??"},6:{n:"??"},7:{n:"??"},9:{n:"??"},10:{n:"??"},11:{n:"??"},12:{n:"??"},14:{n:"??"},15:{n:"??"},16:{n:"??"},17:{n:"??"},18:{n:"??"},19:{n:"??"},21:{n:"??"},22:{n:"LABEL16",f:c},23:{n:"NUMBER17",f:h},24:{n:"NUMBER18",f:u},25:{n:"FORMULA19",f:d},26:{n:"??"},27:{n:"??"},28:{n:"??"},29:{n:"??"},30:{n:"??"},31:{n:"??"},33:{n:"??"},37:{n:"NUMBER25",f:v},39:{n:"NUMBER27",f:m},40:{n:"FORMULA28",f:g},255:{n:"",f:Gr}};return{to_workbook:r}}();var ff=function ib(){var e=Ke("t"),r=Ke("rPr"),t=/<(?:\w+:)?r>/g,a=/<\/(?:\w+:)?r>/,n=/\r\n/g;var s=function l(e,r,t){var a={},n=65001,s="";var f=false;var l=e.match(Te),o=0;if(l)for(;o!=l.length;++o){var c=_e(l[o]);switch(c[0].replace(/\w*:/g,"")){case"<condense":break;case"<extend":break;case"<shadow":if(!c.val)break;case"<shadow>":;case"<shadow/>":a.shadow=1;break;case"</shadow>":break;case"<charset":if(c.val=="1")break;n=i[parseInt(c.val,10)];break;case"<outline":if(!c.val)break;case"<outline>":;case"<outline/>":a.outline=1;break;case"</outline>":break;case"<rFont":a.name=c.val;break;case"<sz":a.sz=c.val;break;case"<strike":if(!c.val)break;case"<strike>":;case"<strike/>":a.strike=1;break;case"</strike>":break;case"<u":if(!c.val)break;switch(c.val){case"double":a.uval="double";break;case"singleAccounting":a.uval="single-accounting";break;case"doubleAccounting":a.uval="double-accounting";break;};case"<u>":;case"<u/>":a.u=1;break;case"</u>":break;case"<b":if(c.val=="0")break;case"<b>":;case"<b/>":a.b=1;break;case"</b>":break;case"<i":if(c.val=="0")break;case"<i>":;case"<i/>":a.i=1;break;case"</i>":break;case"<color":if(c.rgb)a.color=c.rgb.slice(2,8);break;case"<family":a.family=c.val;break;case"<vertAlign":s=c.val;break;case"<scheme":break;case"<extLst":;case"<extLst>":;case"</extLst>":break;case"<ext":f=true;break;case"</ext>":f=false;break;default:if(c[0].charCodeAt(1)!==47&&!f)throw new Error("Unrecognized rich format "+c[0]);}}var u=[];if(a.u)u.push("text-decoration: underline;");if(a.uval)u.push("text-underline-style:"+a.uval+";");if(a.sz)u.push("font-size:"+a.sz+"pt;");if(a.outline)u.push("text-effect: outline;");if(a.shadow)u.push("text-shadow: auto;");r.push('<span style="'+u.join("")+'">');if(a.b){r.push("<b>");t.push("</b>")}if(a.i){r.push("<i>");t.push("</i>")}if(a.strike){r.push("<s>");t.push("</s>")}if(s=="superscript")s="sup";else if(s=="subscript")s="sub";if(s!=""){r.push("<"+s+">");t.push("</"+s+">")}t.push("</span>");return n};function f(t){var a=[[],"",[]];var i=t.match(e);if(!i)return"";a[1]=i[1];var f=t.match(r);if(f)s(f[1],a[0],a[2]);return a[0].join("")+a[1].replace(n,"<br/>")+a[2].join("")}return function o(e){return e.replace(t,"").split(a).map(f).join("")}}();var lf=/<(?:\w+:)?t[^>]*>([^<]*)<\/(?:\w+:)?t>/g,of=/<(?:\w+:)?r>/;var cf=/<(?:\w+:)?rPh.*?>([\s\S]*?)<\/(?:\w+:)?rPh>/g;function uf(e,r){var t=r?r.cellHTML:true;var a={};if(!e)return null;if(e.match(/^\s*<(?:\w+:)?t[^>]*>/)){a.t=Fe(Xe(e.slice(e.indexOf(">")+1).split(/<\/(?:\w+:)?t>/)[0]||""));a.r=Xe(e);if(t)a.h=Le(a.t)}else if(e.match(of)){a.r=Xe(e);a.t=Fe(Xe((e.replace(cf,"").match(lf)||[]).join("").replace(Te,"")));if(t)a.h=ff(a.r)}return a}var hf=/<(?:\w+:)?sst([^>]*)>([\s\S]*)<\/(?:\w+:)?sst>/;var df=/<(?:\w+:)?(?:si|sstItem)>/g;var vf=/<\/(?:\w+:)?(?:si|sstItem)>/;function pf(e,r){var t=[],a="";if(!e)return t;var n=e.match(hf);if(n){a=n[2].replace(df,"").split(vf);for(var i=0;i!=a.length;++i){var s=uf(a[i].trim(),r);if(s!=null)t[t.length]=s}n=_e(n[1]);t.Count=n.count;t.Unique=n.uniqueCount}return t}ya.SST="http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings";var mf=/^\s|\s$|[\t\n\r]/;function bf(e,r){if(!r.bookSST)return"";var t=[Ce];t[t.length]=ar("sst",null,{xmlns:sr.main[0],count:e.Count,uniqueCount:e.Unique});for(var a=0;a!=e.length;++a){if(e[a]==null)continue;var n=e[a];var i="<si>";if(n.r)i+=n.r;else{i+="<t";if(!n.t)n.t="";if(n.t.match(mf))i+=' xml:space="preserve"';i+=">"+Pe(n.t)+"</t>"}i+="</si>";t[t.length]=i}if(t.length>2){t[t.length]="</sst>";t[1]=t[1].replace("/>",">")}return t.join("")}function gf(e){return[e._R(4),e._R(4)]}function Ef(e,r){var t=[];var a=false;jr(e,function n(e,i,s){switch(s){case 159:t.Count=e[0];t.Unique=e[1];break;case 19:t.push(e);break;case 160:return true;case 35:a=true;break;case 36:a=false;break;default:if(i.indexOf("Begin")>0){}else if(i.indexOf("End")>0){}if(!a||r.WTF)throw new Error("Unexpected record "+s+" "+i);}});return t}function Sf(e,r){if(!r)r=zr(8);r._W(4,e.Count);r._W(4,e.Unique);return r}var kf=xt;function wf(e){var r=$r();Kr(r,"BrtBeginSst",Sf(e));for(var t=0;t<e.length;++t)Kr(r,"BrtSSTItem",kf(e[t]));Kr(r,"BrtEndSst");return r.end()}function Cf(e){if(typeof cptable!=="undefined")return cptable.utils.encode(t,e);var r=[],a=e.split("");for(var n=0;n<a.length;++n)r[n]=a[n].charCodeAt(0);return r}function Bf(e,r){var t={};t.Major=e._R(2);t.Minor=e._R(2);if(r>=4)e.l+=r-4;return t}function Tf(e){var r={};r.id=e._R(0,"lpp4");r.R=Bf(e,4);r.U=Bf(e,4);r.W=Bf(e,4);return r}function xf(e){var r=e._R(4);var t=e.l+r-4;var a={};var n=e._R(4);var i=[];while(n-- >0)i.push({t:e._R(4),v:e._R(0,"lpp4")});a.name=e._R(0,"lpp4");a.comps=i;if(e.l!=t)throw new Error("Bad DataSpaceMapEntry: "+e.l+" != "+t);return a}function If(e){var r=[];e.l+=4;var t=e._R(4);while(t-- >0)r.push(xf(e));return r}function _f(e){var r=[];e.l+=4;var t=e._R(4);while(t-- >0)r.push(e._R(0,"lpp4"));return r}function Af(e){var r={};e._R(4);e.l+=4;r.id=e._R(0,"lpp4");r.name=e._R(0,"lpp4");r.R=Bf(e,4);r.U=Bf(e,4);r.W=Bf(e,4);return r}function Rf(e){var r=Af(e);r.ename=e._R(0,"8lpp4");r.blksz=e._R(4);r.cmode=e._R(4);
+if(e._R(4)!=4)throw new Error("Bad !Primary record");return r}function yf(e,r){var t=e.l+r;var a={};a.Flags=e._R(4)&63;e.l+=4;a.AlgID=e._R(4);var n=false;switch(a.AlgID){case 26126:;case 26127:;case 26128:n=a.Flags==36;break;case 26625:n=a.Flags==4;break;case 0:n=a.Flags==16||a.Flags==4||a.Flags==36;break;default:throw"Unrecognized encryption algorithm: "+a.AlgID;}if(!n)throw new Error("Encryption Flags/AlgID mismatch");a.AlgIDHash=e._R(4);a.KeySize=e._R(4);a.ProviderType=e._R(4);e.l+=8;a.CSPName=e._R(t-e.l>>1,"utf16le");e.l=t;return a}function Ff(e,r){var t={},a=e.l+r;e.l+=4;t.Salt=e.slice(e.l,e.l+16);e.l+=16;t.Verifier=e.slice(e.l,e.l+16);e.l+=16;e._R(4);t.VerifierHash=e.slice(e.l,a);e.l=a;return t}function Df(e){var r=Bf(e);switch(r.Minor){case 2:return[r.Minor,Of(e,r)];case 3:return[r.Minor,Pf(e,r)];case 4:return[r.Minor,Nf(e,r)];}throw new Error("ECMA-376 Encrypted file unrecognized Version: "+r.Minor)}function Of(e){var r=e._R(4);if((r&63)!=36)throw new Error("EncryptionInfo mismatch");var t=e._R(4);var a=yf(e,t);var n=Ff(e,e.length-e.l);return{t:"Std",h:a,v:n}}function Pf(){throw new Error("File is password-protected: ECMA-376 Extensible")}function Nf(e){var r=["saltSize","blockSize","keyBits","hashSize","cipherAlgorithm","cipherChaining","hashAlgorithm","saltValue"];e.l+=4;var t=e._R(e.length-e.l,"utf8");var a={};t.replace(Te,function n(e){var t=_e(e);switch(Ae(t[0])){case"<?xml":break;case"<encryption":;case"</encryption>":break;case"<keyData":r.forEach(function(e){a[e]=t[e]});break;case"<dataIntegrity":a.encryptedHmacKey=t.encryptedHmacKey;a.encryptedHmacValue=t.encryptedHmacValue;break;case"<keyEncryptors>":;case"<keyEncryptors":a.encs=[];break;case"</keyEncryptors>":break;case"<keyEncryptor":a.uri=t.uri;break;case"</keyEncryptor>":break;case"<encryptedKey":a.encs.push(t);break;default:throw t[0];}});return a}function Mf(e,r){var t={};var a=t.EncryptionVersionInfo=Bf(e,4);r-=4;if(a.Minor!=2)throw new Error("unrecognized minor version code: "+a.Minor);if(a.Major>4||a.Major<2)throw new Error("unrecognized major version code: "+a.Major);t.Flags=e._R(4);r-=4;var n=e._R(4);r-=4;t.EncryptionHeader=yf(e,n);r-=n;t.EncryptionVerifier=Ff(e,r);return t}function Lf(e){var r={};var t=r.EncryptionVersionInfo=Bf(e,4);if(t.Major!=1||t.Minor!=1)throw"unrecognized version code "+t.Major+" : "+t.Minor;r.Salt=e._R(16);r.EncryptedVerifier=e._R(16);r.EncryptedVerifierHash=e._R(16);return r}function Uf(e){var r=0,t;var a=Cf(e);var n=a.length+1,i,s;var f,l,o;t=w(n);t[0]=a.length;for(i=1;i!=n;++i)t[i]=a[i-1];for(i=n-1;i>=0;--i){s=t[i];f=(r&16384)===0?0:1;l=r<<1&32767;o=f|l;r=o^s}return r^52811}var Wf=function(){var e=[187,255,255,186,255,255,185,128,0,190,15,0,191,15,0];var r=[57840,7439,52380,33984,4364,3600,61902,12606,6258,57657,54287,34041,10252,43370,20163];var t=[44796,19929,39858,10053,20106,40212,10761,31585,63170,64933,60267,50935,40399,11199,17763,35526,1453,2906,5812,11624,23248,885,1770,3540,7080,14160,28320,56640,55369,41139,20807,41614,21821,43642,17621,28485,56970,44341,19019,38038,14605,29210,60195,50791,40175,10751,21502,43004,24537,18387,36774,3949,7898,15796,31592,63184,47201,24803,49606,37805,14203,28406,56812,17824,35648,1697,3394,6788,13576,27152,43601,17539,35078,557,1114,2228,4456,30388,60776,51953,34243,7079,14158,28316,14128,28256,56512,43425,17251,34502,7597,13105,26210,52420,35241,883,1766,3532,4129,8258,16516,33032,4657,9314,18628];var a=function(e){return(e/2|e*128)&255};var n=function(e,r){return a(e^r)};var i=function(e){var a=r[e.length-1];var n=104;for(var i=e.length-1;i>=0;--i){var s=e[i];for(var f=0;f!=7;++f){if(s&64)a^=t[n];s*=2;--n}}return a};return function(r){var t=Cf(r);var a=i(t);var s=t.length;var f=w(16);for(var l=0;l!=16;++l)f[l]=0;var o,c,u;if((s&1)===1){o=a>>8;f[s]=n(e[0],o);--s;o=a&255;c=t[t.length-1];f[s]=n(c,o)}while(s>0){--s;o=a>>8;f[s]=n(t[s],o);--s;o=a&255;f[s]=n(t[s],o)}s=15;u=15-t.length;while(u>0){o=a>>8;f[s]=n(e[u],o);--s;--u;o=a&255;f[s]=n(t[s],o);--s;--u}return f}}();var Hf=function(e,r,t,a,n){if(!n)n=r;if(!a)a=Wf(e);var i,s;for(i=0;i!=r.length;++i){s=r[i];s^=a[t];s=(s>>5|s<<3)&255;n[i]=s;++t}return[n,t,a]};var Vf=function(e){var r=0,t=Wf(e);return function(e){var a=Hf("",e,r,t);r=a[1];return a[0]}};function Xf(e,r,t,a){var n={key:Wn(e),verificationBytes:Wn(e)};if(t.password)n.verifier=Uf(t.password);a.valid=n.verificationBytes===n.verifier;if(a.valid)a.insitu=Vf(t.password);return n}function Gf(e,r,t){var a=t||{};a.Info=e._R(2);e.l-=2;if(a.Info===1)a.Data=Lf(e,r);else a.Data=Mf(e,r);return a}function zf(e,r,t){var a={Type:t.biff>=8?e._R(2):0};if(a.Type)Gf(e,r-2,a);else Xf(e,t.biff>=8?r:r-2,t,a);return a}var jf=function(){function e(e,t){switch(t.type){case"base64":return r(b.decode(e),t);case"binary":return r(e,t);case"buffer":return r(e.toString("binary"),t);case"array":return r(se(e),t);}throw new Error("Unrecognized type "+t.type)}function r(e,r){var t=r||{};var a=t.dense?[]:{};var n={s:{c:0,r:0},e:{c:0,r:0}};if(!e.match(/\\trowd/))throw new Error("RTF missing table");a["!ref"]=dt(n);return a}function t(r,t){return bt(e(r,t),t)}function a(e){var r=["{\\rtf1\\ansi"];var t=vt(e["!ref"]),a;var n=Array.isArray(e);for(var i=t.s.r;i<=t.e.r;++i){r.push("\\trowd\\trautofit1");for(var s=t.s.c;s<=t.e.c;++s)r.push("\\cellx"+(s+1));r.push("\\pard\\intbl");for(s=t.s.c;s<=t.e.c;++s){var f=ut({r:i,c:s});a=n?(e[i]||[])[s]:e[f];if(!a||a.v==null&&(!a.f||a.F))continue;r.push(" "+(a.w||(mt(a),a.w)));r.push("\\cell")}r.push("\\pard\\intbl\\row")}return r.join("")+"}"}return{to_workbook:t,to_sheet:e,from_sheet:a}}();function $f(e){var r=e.slice(e[0]==="#"?1:0).slice(0,6);return[parseInt(r.slice(0,2),16),parseInt(r.slice(2,4),16),parseInt(r.slice(4,6),16)]}function Kf(e){for(var r=0,t=1;r!=3;++r)t=t*256+(e[r]>255?255:e[r]<0?0:e[r]);return t.toString(16).toUpperCase().slice(1)}function Yf(e){var r=e[0]/255,t=e[1]/255,a=e[2]/255;var n=Math.max(r,t,a),i=Math.min(r,t,a),s=n-i;if(s===0)return[0,0,r];var f=0,l=0,o=n+i;l=s/(o>1?2-o:o);switch(n){case r:f=((t-a)/s+6)%6;break;case t:f=(a-r)/s+2;break;case a:f=(r-t)/s+4;break;}return[f/6,l,o/2]}function Qf(e){var r=e[0],t=e[1],a=e[2];var n=t*2*(a<.5?a:1-a),i=a-n/2;var s=[i,i,i],f=6*r;var l;if(t!==0)switch(f|0){case 0:;case 6:l=n*f;s[0]+=n;s[1]+=l;break;case 1:l=n*(2-f);s[0]+=l;s[1]+=n;break;case 2:l=n*(f-2);s[1]+=n;s[2]+=l;break;case 3:l=n*(4-f);s[1]+=l;s[2]+=n;break;case 4:l=n*(f-4);s[2]+=n;s[0]+=l;break;case 5:l=n*(6-f);s[2]+=l;s[0]+=n;break;}for(var o=0;o!=3;++o)s[o]=Math.round(s[o]*255);return s}function Jf(e,r){if(r===0)return e;var t=Yf($f(e));if(r<0)t[2]=t[2]*(1+r);else t[2]=1-(1-t[2])*(1-r);return Kf(Qf(t))}var Zf=6,qf=15,el=1,rl=Zf;function tl(e){return Math.floor((e+Math.round(128/rl)/256)*rl)}function al(e){return Math.floor((e-5)/rl*100+.5)/100}function nl(e){return Math.round((e*rl+5)/rl*256)/256}function il(e){return nl(al(tl(e)))}function sl(e){var r=Math.abs(e-il(e)),t=rl;if(r>.005)for(rl=el;rl<qf;++rl)if(Math.abs(e-il(e))<=r){r=Math.abs(e-il(e));t=rl}rl=t}function fl(e){if(e.width){e.wpx=tl(e.width);e.wch=al(e.wpx);e.MDW=rl}else if(e.wpx){e.wch=al(e.wpx);e.width=nl(e.wch);e.MDW=rl}else if(typeof e.wch=="number"){e.width=nl(e.wch);e.wpx=tl(e.width);e.MDW=rl}if(e.customWidth)delete e.customWidth}var ll=96,ol=ll;function cl(e){return e*96/ol}function ul(e){return e*ol/96}var hl={None:"none",Solid:"solid",Gray50:"mediumGray",Gray75:"darkGray",Gray25:"lightGray",HorzStripe:"darkHorizontal",VertStripe:"darkVertical",ReverseDiagStripe:"darkDown",DiagStripe:"darkUp",DiagCross:"darkGrid",ThickDiagCross:"darkTrellis",ThinHorzStripe:"lightHorizontal",ThinVertStripe:"lightVertical",ThinReverseDiagStripe:"lightDown",ThinHorzCross:"lightGrid"};function dl(e,r,t,a){r.Borders=[];var n={};var i=false;e[0].match(Te).forEach(function(e){var t=_e(e);switch(Ae(t[0])){case"<borders":;case"<borders>":;case"</borders>":break;case"<border":;case"<border>":;case"<border/>":n={};if(t.diagonalUp){n.diagonalUp=t.diagonalUp}if(t.diagonalDown){n.diagonalDown=t.diagonalDown}r.Borders.push(n);break;case"</border>":break;case"<left/>":break;case"<left":;case"<left>":break;case"</left>":break;case"<right/>":break;case"<right":;case"<right>":break;case"</right>":break;case"<top/>":break;case"<top":;case"<top>":break;case"</top>":break;case"<bottom/>":break;case"<bottom":;case"<bottom>":break;case"</bottom>":break;case"<diagonal":;case"<diagonal>":;case"<diagonal/>":break;case"</diagonal>":break;case"<horizontal":;case"<horizontal>":;case"<horizontal/>":break;case"</horizontal>":break;case"<vertical":;case"<vertical>":;case"<vertical/>":break;case"</vertical>":break;case"<start":;case"<start>":;case"<start/>":break;case"</start>":break;case"<end":;case"<end>":;case"<end/>":break;case"</end>":break;case"<color":;case"<color>":break;case"<color/>":;case"</color>":break;case"<extLst":;case"<extLst>":;case"</extLst>":break;case"<ext":i=true;break;case"</ext>":i=false;break;default:if(a&&a.WTF){if(!i)throw new Error("unrecognized "+t[0]+" in borders")};}})}function vl(e,r,t,a){r.Fills=[];var n={};var i=false;e[0].match(Te).forEach(function(e){var t=_e(e);switch(Ae(t[0])){case"<fills":;case"<fills>":;case"</fills>":break;case"<fill>":;case"<fill":;case"<fill/>":n={};r.Fills.push(n);break;case"</fill>":break;case"<gradientFill>":break;case"<gradientFill":;case"</gradientFill>":r.Fills.push(n);n={};break;case"<patternFill":;case"<patternFill>":if(t.patternType)n.patternType=t.patternType;break;case"<patternFill/>":;case"</patternFill>":break;case"<bgColor":if(!n.bgColor)n.bgColor={};if(t.indexed)n.bgColor.indexed=parseInt(t.indexed,10);if(t.theme)n.bgColor.theme=parseInt(t.theme,10);if(t.tint)n.bgColor.tint=parseFloat(t.tint);if(t.rgb)n.bgColor.rgb=t.rgb.slice(-6);break;case"<bgColor/>":;case"</bgColor>":break;case"<fgColor":if(!n.fgColor)n.fgColor={};if(t.theme)n.fgColor.theme=parseInt(t.theme,10);if(t.tint)n.fgColor.tint=parseFloat(t.tint);if(t.rgb)n.fgColor.rgb=t.rgb.slice(-6);break;case"<fgColor/>":;case"</fgColor>":break;case"<stop":;case"<stop/>":break;case"</stop>":break;case"<color":;case"<color/>":break;case"</color>":break;case"<extLst":;case"<extLst>":;case"</extLst>":break;case"<ext":i=true;break;case"</ext>":i=false;break;default:if(a&&a.WTF){if(!i)throw new Error("unrecognized "+t[0]+" in fills")};}})}function pl(e,r,t,a){r.Fonts=[];var n={};var s=false;e[0].match(Te).forEach(function(e){var f=_e(e);switch(Ae(f[0])){case"<fonts":;case"<fonts>":;case"</fonts>":break;case"<font":;case"<font>":break;case"</font>":;case"<font/>":r.Fonts.push(n);n={};break;case"<name":if(f.val)n.name=f.val;break;case"<name/>":;case"</name>":break;case"<b":n.bold=f.val?Ve(f.val):1;break;case"<b/>":n.bold=1;break;case"<i":n.italic=f.val?Ve(f.val):1;break;case"<i/>":n.italic=1;break;case"<u":switch(f.val){case"none":n.underline=0;break;case"single":n.underline=1;break;case"double":n.underline=2;break;case"singleAccounting":n.underline=33;break;case"doubleAccounting":n.underline=34;break;}break;case"<u/>":n.underline=1;break;case"<strike":n.strike=f.val?Ve(f.val):1;break;case"<strike/>":n.strike=1;break;case"<outline":n.outline=f.val?Ve(f.val):1;break;case"<outline/>":n.outline=1;break;case"<shadow":n.shadow=f.val?Ve(f.val):1;break;case"<shadow/>":n.shadow=1;break;case"<condense":n.condense=f.val?Ve(f.val):1;break;case"<condense/>":n.condense=1;break;case"<extend":n.extend=f.val?Ve(f.val):1;break;case"<extend/>":n.extend=1;break;case"<sz":if(f.val)n.sz=+f.val;break;case"<sz/>":;case"</sz>":break;case"<vertAlign":if(f.val)n.vertAlign=f.val;break;case"<vertAlign/>":;case"</vertAlign>":break;case"<family":if(f.val)n.family=parseInt(f.val,10);break;case"<family/>":;case"</family>":break;case"<scheme":if(f.val)n.scheme=f.val;break;case"<scheme/>":;case"</scheme>":break;case"<charset":if(f.val=="1")break;f.codepage=i[parseInt(f.val,10)];break;case"<color":if(!n.color)n.color={};if(f.auto)n.color.auto=Ve(f.auto);if(f.rgb)n.color.rgb=f.rgb.slice(-6);else if(f.indexed){n.color.index=parseInt(f.indexed,10);var l=wa[n.color.index];if(n.color.index==81)l=wa[1];if(!l)throw new Error(e);n.color.rgb=l[0].toString(16)+l[1].toString(16)+l[2].toString(16)}else if(f.theme){n.color.theme=parseInt(f.theme,10);if(f.tint)n.color.tint=parseFloat(f.tint);if(f.theme&&t.themeElements&&t.themeElements.clrScheme){n.color.rgb=Jf(t.themeElements.clrScheme[n.color.theme].rgb,n.color.tint||0)}}break;case"<color/>":;case"</color>":break;case"<extLst":;case"<extLst>":;case"</extLst>":break;case"<ext":s=true;break;case"</ext>":s=false;break;default:if(a&&a.WTF){if(!s)throw new Error("unrecognized "+f[0]+" in fonts")};}})}function ml(e,r,t){r.NumberFmt=[];var a=j(F._table);for(var n=0;n<a.length;++n)r.NumberFmt[a[n]]=F._table[a[n]];var i=e[0].match(Te);if(!i)return;for(n=0;n<i.length;++n){var s=_e(i[n]);switch(Ae(s[0])){case"<numFmts":;case"</numFmts>":;case"<numFmts/>":;case"<numFmts>":break;case"<numFmt":{var f=Fe(Xe(s.formatCode)),l=parseInt(s.numFmtId,10);r.NumberFmt[l]=f;if(l>0){if(l>392){for(l=392;l>60;--l)if(r.NumberFmt[l]==null)break;r.NumberFmt[l]=f}F.load(f,l)}}break;case"</numFmt>":break;default:if(t.WTF)throw new Error("unrecognized "+s[0]+" in numFmts");}}}function bl(e){var r=["<numFmts>"];[[5,8],[23,26],[41,44],[50,392]].forEach(function(t){for(var a=t[0];a<=t[1];++a)if(e[a]!=null)r[r.length]=ar("numFmt",null,{numFmtId:a,formatCode:Pe(e[a])})});if(r.length===1)return"";r[r.length]="</numFmts>";r[0]=ar("numFmts",null,{count:r.length-2}).replace("/>",">");return r.join("")}var gl=["numFmtId","fillId","fontId","borderId","xfId"];var El=["applyAlignment","applyBorder","applyFill","applyFont","applyNumberFormat","applyProtection","pivotButton","quotePrefix"];function Sl(e,r,t){r.CellXf=[];var a;var n=false;e[0].match(Te).forEach(function(e){var i=_e(e),s=0;switch(Ae(i[0])){case"<cellXfs":;case"<cellXfs>":;case"<cellXfs/>":;case"</cellXfs>":break;case"<xf":;case"<xf/>":a=i;delete a[0];for(s=0;s<gl.length;++s)if(a[gl[s]])a[gl[s]]=parseInt(a[gl[s]],10);for(s=0;s<El.length;++s)if(a[El[s]])a[El[s]]=Ve(a[El[s]]);if(a.numFmtId>392){for(s=392;s>60;--s)if(r.NumberFmt[a.numFmtId]==r.NumberFmt[s]){a.numFmtId=s;break}}r.CellXf.push(a);break;case"</xf>":break;case"<alignment":;case"<alignment/>":var f={};if(i.vertical)f.vertical=i.vertical;if(i.horizontal)f.horizontal=i.horizontal;if(i.textRotation!=null)f.textRotation=i.textRotation;if(i.indent)f.indent=i.indent;if(i.wrapText)f.wrapText=i.wrapText;a.alignment=f;break;case"</alignment>":break;case"<protection":;case"</protection>":;case"<protection/>":break;case"<extLst":;case"<extLst>":;case"</extLst>":break;case"<ext":n=true;break;case"</ext>":n=false;break;default:if(t&&t.WTF){if(!n)throw new Error("unrecognized "+i[0]+" in cellXfs")};}})}function kl(e){var r=[];r[r.length]=ar("cellXfs",null);e.forEach(function(e){r[r.length]=ar("xf",null,e)});r[r.length]="</cellXfs>";if(r.length===2)return"";r[0]=ar("cellXfs",null,{count:r.length-2}).replace("/>",">");return r.join("")}var wl=function sb(){var e=/<(?:\w+:)?numFmts([^>]*)>[\S\s]*?<\/(?:\w+:)?numFmts>/;var r=/<(?:\w+:)?cellXfs([^>]*)>[\S\s]*?<\/(?:\w+:)?cellXfs>/;var t=/<(?:\w+:)?fills([^>]*)>[\S\s]*?<\/(?:\w+:)?fills>/;var a=/<(?:\w+:)?fonts([^>]*)>[\S\s]*?<\/(?:\w+:)?fonts>/;var n=/<(?:\w+:)?borders([^>]*)>[\S\s]*?<\/(?:\w+:)?borders>/;return function i(s,f,l){var o={};if(!s)return o;s=s.replace(/<!--([\s\S]*?)-->/gm,"").replace(/<!DOCTYPE[^\[]*\[[^\]]*\]>/gm,"");var c;if(c=s.match(e))ml(c,o,l);if(c=s.match(a))pl(c,o,f,l);if(c=s.match(t))vl(c,o,f,l);if(c=s.match(n))dl(c,o,f,l);if(c=s.match(r))Sl(c,o,l);return o}}();var Cl=ar("styleSheet",null,{xmlns:sr.main[0],"xmlns:vt":sr.vt});ya.STY="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles";function Bl(e,r){var t=[Ce,Cl],a;if(e.SSF&&(a=bl(e.SSF))!=null)t[t.length]=a;t[t.length]='<fonts count="1"><font><sz val="12"/><color theme="1"/><name val="Calibri"/><family val="2"/><scheme val="minor"/></font></fonts>';t[t.length]='<fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills>';t[t.length]='<borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders>';t[t.length]='<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>';if(a=kl(r.cellXfs))t[t.length]=a;t[t.length]='<cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles>';t[t.length]='<dxfs count="0"/>';t[t.length]='<tableStyles count="0" defaultTableStyle="TableStyleMedium9" defaultPivotStyle="PivotStyleMedium4"/>';if(t.length>2){t[t.length]="</styleSheet>";t[1]=t[1].replace("/>",">")}return t.join("")}function Tl(e,r){var t=e._R(2);var a=kt(e,r-2);return[t,a]}function xl(e,r,t){if(!t)t=zr(6+4*r.length);t._W(2,e);wt(r,t);var a=t.length>t.l?t.slice(0,t.l):t;if(t.l==null)t.l=t.length;return a}function Il(e,r,t){var a={};a.sz=e._R(2)/20;var n=Qt(e,2,t);if(n.fCondense)a.condense=1;if(n.fExtend)a.extend=1;if(n.fShadow)a.shadow=1;if(n.fOutline)a.outline=1;if(n.fStrikeout)a.strike=1;if(n.fItalic)a.italic=1;var i=e._R(2);if(i===700)a.bold=1;switch(e._R(2)){case 1:a.vertAlign="superscript";break;case 2:a.vertAlign="subscript";break;}var s=e._R(1);if(s!=0)a.underline=s;var f=e._R(1);if(f>0)a.family=f;var l=e._R(1);if(l>0)a.charset=l;e.l++;a.color=Kt(e,8);switch(e._R(1)){case 1:a.scheme="major";break;case 2:a.scheme="minor";break;}a.name=kt(e,r-21);return a}function _l(e,r){if(!r)r=zr(25+4*32);r._W(2,e.sz*20);Jt(e,r);r._W(2,e.bold?700:400);var t=0;if(e.vertAlign=="superscript")t=1;else if(e.vertAlign=="subscript")t=2;r._W(2,t);r._W(1,e.underline||0);r._W(1,e.family||0);r._W(1,e.charset||0);r._W(1,0);Yt(e.color,r);var a=0;if(e.scheme=="major")a=1;if(e.scheme=="minor")a=2;r._W(1,a);wt(e.name,r);return r.length>r.l?r.slice(0,r.l):r}var Al=["none","solid","mediumGray","darkGray","lightGray","darkHorizontal","darkVertical","darkDown","darkUp","darkGrid","darkTrellis","lightHorizontal","lightVertical","lightDown","lightUp","lightGrid","lightTrellis","gray125","gray0625"];var Rl=Y(Al);var yl=Gr;function Fl(e,r){if(!r)r=zr(4*3+8*7+16*1);var t=Rl[e.patternType];if(t==null)t=40;r._W(4,t);var a=0;if(t!=40){Yt({auto:1},r);Yt({auto:1},r);for(;a<12;++a)r._W(4,0)}else{for(;a<4;++a)r._W(4,0);for(;a<12;++a)r._W(4,0)}return r.length>r.l?r.slice(0,r.l):r}function Dl(e,r){var t=e.l+r;var a=e._R(2);var n=e._R(2);e.l=t;return{ixfe:a,numFmtId:n}}function Ol(e,r,t){if(!t)t=zr(16);t._W(2,r||0);t._W(2,e.numFmtId||0);t._W(2,0);t._W(2,0);t._W(2,0);t._W(1,0);t._W(1,0);t._W(1,0);t._W(1,0);t._W(1,0);t._W(1,0);return t}function Pl(e,r){if(!r)r=zr(10);r._W(1,0);r._W(1,0);r._W(4,0);r._W(4,0);return r}var Nl=Gr;function Ml(e,r){if(!r)r=zr(51);r._W(1,0);Pl(null,r);Pl(null,r);Pl(null,r);Pl(null,r);Pl(null,r);return r.length>r.l?r.slice(0,r.l):r}function Ll(e,r){if(!r)r=zr(12+4*10);r._W(4,e.xfId);r._W(2,1);r._W(1,+e.builtinId);r._W(1,0);Ot(e.name||"",r);return r.length>r.l?r.slice(0,r.l):r}function Ul(e,r,t){var a=zr(4+256*2*4);a._W(4,e);Ot(r,a);Ot(t,a);return a.length>a.l?a.slice(0,a.l):a}function Wl(e,r,t){var a={};a.NumberFmt=[];for(var n in F._table)a.NumberFmt[n]=F._table[n];a.CellXf=[];a.Fonts=[];var i=[];var s=false;jr(e,function f(e,n,l){switch(l){case 44:a.NumberFmt[e[0]]=e[1];F.load(e[1],e[0]);break;case 43:a.Fonts.push(e);if(e.color.theme!=null&&r&&r.themeElements&&r.themeElements.clrScheme){e.color.rgb=Jf(r.themeElements.clrScheme[e.color.theme].rgb,e.color.tint||0)}break;case 1025:break;case 45:break;case 46:break;case 47:if(i[i.length-1]=="BrtBeginCellXFs"){a.CellXf.push(e)}break;case 48:;case 507:;case 572:;case 475:break;case 1171:;case 2102:;case 1130:;case 512:;case 2095:;case 3072:break;case 35:s=true;break;case 36:s=false;break;case 37:i.push(n);break;case 38:i.pop();break;default:if((n||"").indexOf("Begin")>0)i.push(n);else if((n||"").indexOf("End")>0)i.pop();else if(!s||t.WTF)throw new Error("Unexpected record "+l+" "+n);}});return a}function Hl(e,r){if(!r)return;var t=0;[[5,8],[23,26],[41,44],[50,392]].forEach(function(e){for(var a=e[0];a<=e[1];++a)if(r[a]!=null)++t});if(t==0)return;Kr(e,"BrtBeginFmts",St(t));[[5,8],[23,26],[41,44],[50,392]].forEach(function(t){for(var a=t[0];a<=t[1];++a)if(r[a]!=null)Kr(e,"BrtFmt",xl(a,r[a]))});Kr(e,"BrtEndFmts")}function Vl(e){var r=1;if(r==0)return;Kr(e,"BrtBeginFonts",St(r));Kr(e,"BrtFont",_l({sz:12,color:{theme:1},name:"Calibri",family:2,scheme:"minor"}));Kr(e,"BrtEndFonts")}function Xl(e){var r=2;if(r==0)return;Kr(e,"BrtBeginFills",St(r));Kr(e,"BrtFill",Fl({patternType:"none"}));Kr(e,"BrtFill",Fl({patternType:"gray125"}));Kr(e,"BrtEndFills")}function Gl(e){var r=1;if(r==0)return;Kr(e,"BrtBeginBorders",St(r));Kr(e,"BrtBorder",Ml({}));Kr(e,"BrtEndBorders")}function zl(e){var r=1;Kr(e,"BrtBeginCellStyleXFs",St(r));Kr(e,"BrtXF",Ol({numFmtId:0,fontId:0,fillId:0,borderId:0},65535));Kr(e,"BrtEndCellStyleXFs")}function jl(e,r){Kr(e,"BrtBeginCellXFs",St(r.length));r.forEach(function(r){Kr(e,"BrtXF",Ol(r,0))});Kr(e,"BrtEndCellXFs")}function $l(e){var r=1;Kr(e,"BrtBeginStyles",St(r));Kr(e,"BrtStyle",Ll({xfId:0,builtinId:0,name:"Normal"}));Kr(e,"BrtEndStyles")}function Kl(e){var r=0;Kr(e,"BrtBeginDXFs",St(r));Kr(e,"BrtEndDXFs")}function Yl(e){var r=0;Kr(e,"BrtBeginTableStyles",Ul(r,"TableStyleMedium9","PivotStyleMedium4"));Kr(e,"BrtEndTableStyles")}function Ql(){return}function Jl(e,r){var t=$r();Kr(t,"BrtBeginStyleSheet");Hl(t,e.SSF);Vl(t,e);Xl(t,e);Gl(t,e);zl(t,e);jl(t,r.cellXfs);$l(t,e);Kl(t,e);Yl(t,e);Ql(t,e);Kr(t,"BrtEndStyleSheet");return t.end()}ya.THEME="http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme";function Zl(e,r,t){r.themeElements.clrScheme=[];var a={};(e[0].match(Te)||[]).forEach(function(e){var n=_e(e);switch(n[0]){case"<a:clrScheme":;case"</a:clrScheme>":break;case"<a:srgbClr":a.rgb=n.val;break;case"<a:sysClr":a.rgb=n.lastClr;break;case"<a:dk1>":;case"</a:dk1>":;case"<a:lt1>":;case"</a:lt1>":;case"<a:dk2>":;case"</a:dk2>":;case"<a:lt2>":;case"</a:lt2>":;case"<a:accent1>":;case"</a:accent1>":;case"<a:accent2>":;case"</a:accent2>":;case"<a:accent3>":;case"</a:accent3>":;case"<a:accent4>":;case"</a:accent4>":;case"<a:accent5>":;case"</a:accent5>":;case"<a:accent6>":;case"</a:accent6>":;case"<a:hlink>":;case"</a:hlink>":;case"<a:folHlink>":;case"</a:folHlink>":if(n[0].charAt(1)==="/"){r.themeElements.clrScheme.push(a);a={}}else{a.name=n[0].slice(3,n[0].length-1)}break;default:if(t&&t.WTF)throw new Error("Unrecognized "+n[0]+" in clrScheme");}})}function ql(){}function eo(){}var ro=/<a:clrScheme([^>]*)>[\s\S]*<\/a:clrScheme>/;var to=/<a:fontScheme([^>]*)>[\s\S]*<\/a:fontScheme>/;var ao=/<a:fmtScheme([^>]*)>[\s\S]*<\/a:fmtScheme>/;function no(e,r,t){r.themeElements={};var a;[["clrScheme",ro,Zl],["fontScheme",to,ql],["fmtScheme",ao,eo]].forEach(function(n){if(!(a=e.match(n[1])))throw new Error(n[0]+" not found in themeElements");n[2](a,r,t)})}var io=/<a:themeElements([^>]*)>[\s\S]*<\/a:themeElements>/;function so(e,r){if(!e||e.length===0)return so(fo());var t;var a={};if(!(t=e.match(io)))throw new Error("themeElements not found in theme");no(t[0],a,r);return a}function fo(e,r){if(r&&r.themeXLSX)return r.themeXLSX;var t=[Ce];t[t.length]='<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office Theme">';t[t.length]="<a:themeElements>";t[t.length]='<a:clrScheme name="Office">';t[t.length]='<a:dk1><a:sysClr val="windowText" lastClr="000000"/></a:dk1>';t[t.length]='<a:lt1><a:sysClr val="window" lastClr="FFFFFF"/></a:lt1>';t[t.length]='<a:dk2><a:srgbClr val="1F497D"/></a:dk2>';t[t.length]='<a:lt2><a:srgbClr val="EEECE1"/></a:lt2>';t[t.length]='<a:accent1><a:srgbClr val="4F81BD"/></a:accent1>';t[t.length]='<a:accent2><a:srgbClr val="C0504D"/></a:accent2>';t[t.length]='<a:accent3><a:srgbClr val="9BBB59"/></a:accent3>';t[t.length]='<a:accent4><a:srgbClr val="8064A2"/></a:accent4>';t[t.length]='<a:accent5><a:srgbClr val="4BACC6"/></a:accent5>';t[t.length]='<a:accent6><a:srgbClr val="F79646"/></a:accent6>';t[t.length]='<a:hlink><a:srgbClr val="0000FF"/></a:hlink>';t[t.length]='<a:folHlink><a:srgbClr val="800080"/></a:folHlink>';t[t.length]="</a:clrScheme>";t[t.length]='<a:fontScheme name="Office">';t[t.length]="<a:majorFont>";t[t.length]='<a:latin typeface="Cambria"/>';t[t.length]='<a:ea typeface=""/>';t[t.length]='<a:cs typeface=""/>';t[t.length]='<a:font script="Jpan" typeface="ＭＳ Ｐゴシック"/>';t[t.length]='<a:font script="Hang" typeface="맑은 고딕"/>';t[t.length]='<a:font script="Hans" typeface="宋体"/>';t[t.length]='<a:font script="Hant" typeface="新細明體"/>';t[t.length]='<a:font script="Arab" typeface="Times New Roman"/>';t[t.length]='<a:font script="Hebr" typeface="Times New Roman"/>';t[t.length]='<a:font script="Thai" typeface="Tahoma"/>';t[t.length]='<a:font script="Ethi" typeface="Nyala"/>';t[t.length]='<a:font script="Beng" typeface="Vrinda"/>';t[t.length]='<a:font script="Gujr" typeface="Shruti"/>';t[t.length]='<a:font script="Khmr" typeface="MoolBoran"/>';t[t.length]='<a:font script="Knda" typeface="Tunga"/>';t[t.length]='<a:font script="Guru" typeface="Raavi"/>';t[t.length]='<a:font script="Cans" typeface="Euphemia"/>';t[t.length]='<a:font script="Cher" typeface="Plantagenet Cherokee"/>';t[t.length]='<a:font script="Yiii" typeface="Microsoft Yi Baiti"/>';t[t.length]='<a:font script="Tibt" typeface="Microsoft Himalaya"/>';t[t.length]='<a:font script="Thaa" typeface="MV Boli"/>';t[t.length]='<a:font script="Deva" typeface="Mangal"/>';t[t.length]='<a:font script="Telu" typeface="Gautami"/>';t[t.length]='<a:font script="Taml" typeface="Latha"/>';t[t.length]='<a:font script="Syrc" typeface="Estrangelo Edessa"/>';t[t.length]='<a:font script="Orya" typeface="Kalinga"/>';t[t.length]='<a:font script="Mlym" typeface="Kartika"/>';t[t.length]='<a:font script="Laoo" typeface="DokChampa"/>';t[t.length]='<a:font script="Sinh" typeface="Iskoola Pota"/>';t[t.length]='<a:font script="Mong" typeface="Mongolian Baiti"/>';t[t.length]='<a:font script="Viet" typeface="Times New Roman"/>';t[t.length]='<a:font script="Uigh" typeface="Microsoft Uighur"/>';t[t.length]='<a:font script="Geor" typeface="Sylfaen"/>';t[t.length]="</a:majorFont>";t[t.length]="<a:minorFont>";t[t.length]='<a:latin typeface="Calibri"/>';t[t.length]='<a:ea typeface=""/>';t[t.length]='<a:cs typeface=""/>';t[t.length]='<a:font script="Jpan" typeface="ＭＳ Ｐゴシック"/>';t[t.length]='<a:font script="Hang" typeface="맑은 고딕"/>';t[t.length]='<a:font script="Hans" typeface="宋体"/>';t[t.length]='<a:font script="Hant" typeface="新細明體"/>';t[t.length]='<a:font script="Arab" typeface="Arial"/>';t[t.length]='<a:font script="Hebr" typeface="Arial"/>';t[t.length]='<a:font script="Thai" typeface="Tahoma"/>';t[t.length]='<a:font script="Ethi" typeface="Nyala"/>';t[t.length]='<a:font script="Beng" typeface="Vrinda"/>';t[t.length]='<a:font script="Gujr" typeface="Shruti"/>';t[t.length]='<a:font script="Khmr" typeface="DaunPenh"/>';t[t.length]='<a:font script="Knda" typeface="Tunga"/>';t[t.length]='<a:font script="Guru" typeface="Raavi"/>';t[t.length]='<a:font script="Cans" typeface="Euphemia"/>';t[t.length]='<a:font script="Cher" typeface="Plantagenet Cherokee"/>';t[t.length]='<a:font script="Yiii" typeface="Microsoft Yi Baiti"/>';t[t.length]='<a:font script="Tibt" typeface="Microsoft Himalaya"/>';t[t.length]='<a:font script="Thaa" typeface="MV Boli"/>';t[t.length]='<a:font script="Deva" typeface="Mangal"/>';t[t.length]='<a:font script="Telu" typeface="Gautami"/>';t[t.length]='<a:font script="Taml" typeface="Latha"/>';t[t.length]='<a:font script="Syrc" typeface="Estrangelo Edessa"/>';t[t.length]='<a:font script="Orya" typeface="Kalinga"/>';t[t.length]='<a:font script="Mlym" typeface="Kartika"/>';t[t.length]='<a:font script="Laoo" typeface="DokChampa"/>';t[t.length]='<a:font script="Sinh" typeface="Iskoola Pota"/>';t[t.length]='<a:font script="Mong" typeface="Mongolian Baiti"/>';t[t.length]='<a:font script="Viet" typeface="Arial"/>';t[t.length]='<a:font script="Uigh" typeface="Microsoft Uighur"/>';t[t.length]='<a:font script="Geor" typeface="Sylfaen"/>';t[t.length]="</a:minorFont>";t[t.length]="</a:fontScheme>";t[t.length]='<a:fmtScheme name="Office">';t[t.length]="<a:fillStyleLst>";t[t.length]='<a:solidFill><a:schemeClr val="phClr"/></a:solidFill>';t[t.length]='<a:gradFill rotWithShape="1">';t[t.length]="<a:gsLst>";t[t.length]='<a:gs pos="0"><a:schemeClr val="phClr"><a:tint val="50000"/><a:satMod val="300000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="35000"><a:schemeClr val="phClr"><a:tint val="37000"/><a:satMod val="300000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="100000"><a:schemeClr val="phClr"><a:tint val="15000"/><a:satMod val="350000"/></a:schemeClr></a:gs>';t[t.length]="</a:gsLst>";t[t.length]='<a:lin ang="16200000" scaled="1"/>';t[t.length]="</a:gradFill>";t[t.length]='<a:gradFill rotWithShape="1">';t[t.length]="<a:gsLst>";t[t.length]='<a:gs pos="0"><a:schemeClr val="phClr"><a:tint val="100000"/><a:shade val="100000"/><a:satMod val="130000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="100000"><a:schemeClr val="phClr"><a:tint val="50000"/><a:shade val="100000"/><a:satMod val="350000"/></a:schemeClr></a:gs>';t[t.length]="</a:gsLst>";t[t.length]='<a:lin ang="16200000" scaled="0"/>';t[t.length]="</a:gradFill>";t[t.length]="</a:fillStyleLst>";t[t.length]="<a:lnStyleLst>";t[t.length]='<a:ln w="9525" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"><a:shade val="95000"/><a:satMod val="105000"/></a:schemeClr></a:solidFill><a:prstDash val="solid"/></a:ln>';t[t.length]='<a:ln w="25400" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:prstDash val="solid"/></a:ln>';t[t.length]='<a:ln w="38100" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:prstDash val="solid"/></a:ln>';t[t.length]="</a:lnStyleLst>";t[t.length]="<a:effectStyleLst>";t[t.length]="<a:effectStyle>";t[t.length]="<a:effectLst>";t[t.length]='<a:outerShdw blurRad="40000" dist="20000" dir="5400000" rotWithShape="0"><a:srgbClr val="000000"><a:alpha val="38000"/></a:srgbClr></a:outerShdw>';t[t.length]="</a:effectLst>";t[t.length]="</a:effectStyle>";t[t.length]="<a:effectStyle>";t[t.length]="<a:effectLst>";t[t.length]='<a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0"><a:srgbClr val="000000"><a:alpha val="35000"/></a:srgbClr></a:outerShdw>';t[t.length]="</a:effectLst>";t[t.length]="</a:effectStyle>";t[t.length]="<a:effectStyle>";t[t.length]="<a:effectLst>";t[t.length]='<a:outerShdw blurRad="40000" dist="23000" dir="5400000" rotWithShape="0"><a:srgbClr val="000000"><a:alpha val="35000"/></a:srgbClr></a:outerShdw>';t[t.length]="</a:effectLst>";t[t.length]='<a:scene3d><a:camera prst="orthographicFront"><a:rot lat="0" lon="0" rev="0"/></a:camera><a:lightRig rig="threePt" dir="t"><a:rot lat="0" lon="0" rev="1200000"/></a:lightRig></a:scene3d>';t[t.length]='<a:sp3d><a:bevelT w="63500" h="25400"/></a:sp3d>';t[t.length]="</a:effectStyle>";t[t.length]="</a:effectStyleLst>";t[t.length]="<a:bgFillStyleLst>";t[t.length]='<a:solidFill><a:schemeClr val="phClr"/></a:solidFill>';t[t.length]='<a:gradFill rotWithShape="1">';t[t.length]="<a:gsLst>";t[t.length]='<a:gs pos="0"><a:schemeClr val="phClr"><a:tint val="40000"/><a:satMod val="350000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="40000"><a:schemeClr val="phClr"><a:tint val="45000"/><a:shade val="99000"/><a:satMod val="350000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="100000"><a:schemeClr val="phClr"><a:shade val="20000"/><a:satMod val="255000"/></a:schemeClr></a:gs>';t[t.length]="</a:gsLst>";
+t[t.length]='<a:path path="circle"><a:fillToRect l="50000" t="-80000" r="50000" b="180000"/></a:path>';t[t.length]="</a:gradFill>";t[t.length]='<a:gradFill rotWithShape="1">';t[t.length]="<a:gsLst>";t[t.length]='<a:gs pos="0"><a:schemeClr val="phClr"><a:tint val="80000"/><a:satMod val="300000"/></a:schemeClr></a:gs>';t[t.length]='<a:gs pos="100000"><a:schemeClr val="phClr"><a:shade val="30000"/><a:satMod val="200000"/></a:schemeClr></a:gs>';t[t.length]="</a:gsLst>";t[t.length]='<a:path path="circle"><a:fillToRect l="50000" t="50000" r="50000" b="50000"/></a:path>';t[t.length]="</a:gradFill>";t[t.length]="</a:bgFillStyleLst>";t[t.length]="</a:fmtScheme>";t[t.length]="</a:themeElements>";t[t.length]="<a:objectDefaults>";t[t.length]="<a:spDef>";t[t.length]='<a:spPr/><a:bodyPr/><a:lstStyle/><a:style><a:lnRef idx="1"><a:schemeClr val="accent1"/></a:lnRef><a:fillRef idx="3"><a:schemeClr val="accent1"/></a:fillRef><a:effectRef idx="2"><a:schemeClr val="accent1"/></a:effectRef><a:fontRef idx="minor"><a:schemeClr val="lt1"/></a:fontRef></a:style>';t[t.length]="</a:spDef>";t[t.length]="<a:lnDef>";t[t.length]='<a:spPr/><a:bodyPr/><a:lstStyle/><a:style><a:lnRef idx="2"><a:schemeClr val="accent1"/></a:lnRef><a:fillRef idx="0"><a:schemeClr val="accent1"/></a:fillRef><a:effectRef idx="1"><a:schemeClr val="accent1"/></a:effectRef><a:fontRef idx="minor"><a:schemeClr val="tx1"/></a:fontRef></a:style>';t[t.length]="</a:lnDef>";t[t.length]="</a:objectDefaults>";t[t.length]="<a:extraClrSchemeLst/>";t[t.length]="</a:theme>";return t.join("")}function lo(e,r,t){var a=e.l+r;var n=e._R(4);if(n===124226)return;if(!t.cellStyles||!ke){e.l=a;return}var i=e.slice(e.l);e.l=a;var s;try{s=new ke(i)}catch(f){return}var l=Ee(s,"theme/theme/theme1.xml",true);if(!l)return;return so(l,t)}function oo(e){return e._R(4)}function co(e){var r={};r.xclrType=e._R(2);r.nTintShade=e._R(2);switch(r.xclrType){case 0:e.l+=4;break;case 1:r.xclrValue=uo(e,4);break;case 2:r.xclrValue=ni(e,4);break;case 3:r.xclrValue=oo(e,4);break;case 4:e.l+=4;break;}e.l+=8;return r}function uo(e,r){return Gr(e,r)}function ho(e,r){return Gr(e,r)}function vo(e){var r=e._R(2);var t=e._R(2)-4;var a=[r];switch(r){case 4:;case 5:;case 7:;case 8:;case 9:;case 10:;case 11:;case 13:a[1]=co(e,t);break;case 6:a[1]=ho(e,t);break;case 14:;case 15:a[1]=e._R(t===1?1:2);break;default:throw new Error("Unrecognized ExtProp type: "+r+" "+t);}return a}function po(e,r){var t=e.l+r;e.l+=2;var a=e._R(2);e.l+=2;var n=e._R(2);var i=[];while(n-- >0)i.push(vo(e,t-e.l));return{ixfe:a,ext:i}}function mo(e,r){r.forEach(function(e){switch(e[0]){case 4:break;case 5:break;case 6:break;case 7:break;case 8:break;case 9:break;case 10:break;case 11:break;case 13:break;case 14:break;case 15:break;}})}function bo(e){var r=[];if(!e)return r;var t=1;(e.match(Te)||[]).forEach(function(e){var a=_e(e);switch(a[0]){case"<?xml":break;case"<calcChain":;case"<calcChain>":;case"</calcChain>":break;case"<c":delete a[0];if(a.i)t=a.i;else a.i=t;r.push(a);break;}});return r}function go(e){var r={};r.i=e._R(4);var t={};t.r=e._R(4);t.c=e._R(4);r.r=ut(t);var a=e._R(1);if(a&2)r.l="1";if(a&8)r.a="1";return r}function Eo(e,r,t){var a=[];var n=false;jr(e,function i(e,r,s){switch(s){case 63:a.push(e);break;default:if((r||"").indexOf("Begin")>0){}else if((r||"").indexOf("End")>0){}else if(!n||t.WTF)throw new Error("Unexpected record "+s+" "+r);}});return a}function So(){}function ko(e,r,t){if(!e)return e;var a=t||{};var n=false,i=false;jr(e,function s(e,r,t){if(i)return;switch(t){case 359:;case 363:;case 364:;case 366:;case 367:;case 368:;case 369:;case 370:;case 371:;case 472:;case 577:;case 578:;case 579:;case 580:;case 581:;case 582:;case 583:;case 584:;case 585:;case 586:;case 587:break;case 35:n=true;break;case 36:n=false;break;default:if((r||"").indexOf("Begin")>0){}else if((r||"").indexOf("End")>0){}else if(!n||a.WTF)throw new Error("Unexpected record "+t.toString(16)+" "+r);}},a)}ya.IMG="http://schemas.openxmlformats.org/officeDocument/2006/relationships/image";ya.DRAW="http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing";function wo(e,r){if(!e)return"??";var t=(e.match(/<c:chart [^>]*r:id="([^"]*)"/)||["",""])[1];return r["!id"][t].Target}var Co=1024;function Bo(e,r){var t=[21600,21600];var a=["m0,0l0",t[1],t[0],t[1],t[0],"0xe"].join(",");var n=[ar("xml",null,{"xmlns:v":fr.v,"xmlns:o":fr.o,"xmlns:x":fr.x,"xmlns:mv":fr.mv}).replace(/\/>/,">"),ar("o:shapelayout",ar("o:idmap",null,{"v:ext":"edit",data:e}),{"v:ext":"edit"}),ar("v:shapetype",[ar("v:stroke",null,{joinstyle:"miter"}),ar("v:path",null,{gradientshapeok:"t","o:connecttype":"rect"})].join(""),{id:"_x0000_t202","o:spt":202,coordsize:t.join(","),path:a})];while(Co<e*1e3)Co+=1e3;r.forEach(function(e){var r=ct(e[0]);n=n.concat(["<v:shape"+tr({id:"_x0000_s"+ ++Co,type:"#_x0000_t202",style:"position:absolute; margin-left:80pt;margin-top:5pt;width:104pt;height:64pt;z-index:10"+(e[1].hidden?";visibility:hidden":""),fillcolor:"#ECFAD4",strokecolor:"#edeaa1"})+">",ar("v:fill",ar("o:fill",null,{type:"gradientUnscaled","v:ext":"view"}),{color2:"#BEFF82",angle:"-180",type:"gradient"}),ar("v:shadow",null,{on:"t",obscured:"t"}),ar("v:path",null,{"o:connecttype":"none"}),'<v:textbox><div style="text-align:left"></div></v:textbox>','<x:ClientData ObjectType="Note">',"<x:MoveWithCells/>","<x:SizeWithCells/>",rr("x:Anchor",[r.c,0,r.r,0,r.c+3,100,r.r+5,100].join(",")),rr("x:AutoFill","False"),rr("x:Row",String(r.r)),rr("x:Column",String(r.c)),e[1].hidden?"":"<x:Visible/>","</x:ClientData>","</v:shape>"])});n.push("</xml>");return n.join("")}ya.CMNT="http://schemas.openxmlformats.org/officeDocument/2006/relationships/comments";function To(e,r,t,a,n){for(var i=0;i!=r.length;++i){var s=r[i];var f=gv(ge(e,s.replace(/^\//,""),true),s,n);if(!f||!f.length)continue;var l=j(t);for(var o=0;o!=l.length;++o){var c=l[o];var u=a[c];if(u){var h=u[s];if(h)xo(c,t[c],f)}}}}function xo(e,r,t){var a=Array.isArray(r);var n;t.forEach(function(e){var t=ct(e.ref);if(a){if(!r[t.r])r[t.r]=[];n=r[t.r][t.c]}else n=r[e.ref];if(!n){n={};if(a)r[t.r][t.c]=n;else r[e.ref]=n;var i=vt(r["!ref"]||"BDWGO1000001:A1");if(i.s.r>t.r)i.s.r=t.r;if(i.e.r<t.r)i.e.r=t.r;if(i.s.c>t.c)i.s.c=t.c;if(i.e.c<t.c)i.e.c=t.c;var s=dt(i);if(s!==r["!ref"])r["!ref"]=s}if(!n.c)n.c=[];var f={a:e.author,t:e.t,r:e.r};if(e.h)f.h=e.h;n.c.push(f)})}function Io(e,r){if(e.match(/<(?:\w+:)?comments *\/>/))return[];var t=[];var a=[];var n=e.match(/<(?:\w+:)?authors>([\s\S]*)<\/(?:\w+:)?authors>/);if(n&&n[1])n[1].split(/<\/\w*:?author>/).forEach(function(e){if(e===""||e.trim()==="")return;var r=e.match(/<(?:\w+:)?author[^>]*>(.*)/);if(r)t.push(r[1])});var i=e.match(/<(?:\w+:)?commentList>([\s\S]*)<\/(?:\w+:)?commentList>/);if(i&&i[1])i[1].split(/<\/\w*:?comment>/).forEach(function(e){if(e===""||e.trim()==="")return;var n=e.match(/<(?:\w+:)?comment[^>]*>/);if(!n)return;var i=_e(n[0]);var s={author:i.authorId&&t[i.authorId]||"sheetjsghost",ref:i.ref,guid:i.guid};var f=ct(i.ref);if(r.sheetRows&&r.sheetRows<=f.r)return;var l=e.match(/<(?:\w+:)?text>([\s\S]*)<\/(?:\w+:)?text>/);var o=!!l&&!!l[1]&&uf(l[1])||{r:"",t:"",h:""};s.r=o.r;if(o.r=="<t></t>")o.t=o.h="";s.t=o.t.replace(/\r\n/g,"\n").replace(/\r/g,"\n");if(r.cellHTML)s.h=o.h;a.push(s)});return a}var _o=ar("comments",null,{xmlns:sr.main[0]});function Ao(e){var r=[Ce,_o];var t=[];r.push("<authors>");e.forEach(function(e){e[1].forEach(function(e){var a=Pe(e.a);if(t.indexOf(a)>-1)return;t.push(a);r.push("<author>"+a+"</author>")})});r.push("</authors>");r.push("<commentList>");e.forEach(function(e){e[1].forEach(function(a){r.push('<comment ref="'+e[0]+'" authorId="'+t.indexOf(Pe(a.a))+'"><text>');r.push(rr("t",a.t==null?"":Pe(a.t)));r.push("</text></comment>")})});r.push("</commentList>");if(r.length>2){r[r.length]="</comments>";r[1]=r[1].replace("/>",">")}return r.join("")}function Ro(e){var r={};r.iauthor=e._R(4);var t=Vt(e,16);r.rfx=t.s;r.ref=ut(t.s);e.l+=16;return r}function yo(e,r){if(r==null)r=zr(36);r._W(4,e[1].iauthor);Xt(e[0],r);r._W(4,0);r._W(4,0);r._W(4,0);r._W(4,0);return r}var Fo=kt;function Do(e){return wt(e.slice(0,54))}function Oo(e,r){var t=[];var a=[];var n={};var i=false;jr(e,function s(e,f,l){switch(l){case 632:a.push(e);break;case 635:n=e;break;case 637:n.t=e.t;n.h=e.h;n.r=e.r;break;case 636:n.author=a[n.iauthor];delete n.iauthor;if(r.sheetRows&&r.sheetRows<=n.rfx.r)break;if(!n.t)n.t="";delete n.rfx;t.push(n);break;case 3072:break;case 35:i=true;break;case 36:i=false;break;case 37:break;case 38:break;default:if((f||"").indexOf("Begin")>0){}else if((f||"").indexOf("End")>0){}else if(!i||r.WTF)throw new Error("Unexpected record "+l+" "+f);}});return t}function Po(e){var r=$r();var t=[];Kr(r,"BrtBeginComments");Kr(r,"BrtBeginCommentAuthors");e.forEach(function(e){e[1].forEach(function(e){if(t.indexOf(e.a)>-1)return;t.push(e.a.slice(0,54));Kr(r,"BrtCommentAuthor",Do(e.a))})});Kr(r,"BrtEndCommentAuthors");Kr(r,"BrtBeginCommentList");e.forEach(function(e){e[1].forEach(function(a){a.iauthor=t.indexOf(a.a);var n={s:ct(e[0]),e:ct(e[0])};Kr(r,"BrtBeginComment",yo([n,a]));if(a.t&&a.t.length>0)Kr(r,"BrtCommentText",_t(a));Kr(r,"BrtEndComment");delete a.iauthor})});Kr(r,"BrtEndCommentList");Kr(r,"BrtEndComments");return r.end()}var No="application/vnd.ms-office.vbaProject";function Mo(e){var r=H.utils.cfb_new({root:"R"});e.FullPaths.forEach(function(t,a){if(t.slice(-1)==="/"||!t.match(/_VBA_PROJECT_CUR/))return;var n=t.replace(/^[^\/]*/,"R").replace(/\/_VBA_PROJECT_CUR\u0000*/,"");H.utils.cfb_add(r,n,e.FileIndex[a].content)});return H.write(r)}function Lo(e,r){r.FullPaths.forEach(function(t,a){if(a==0)return;var n=t.replace(/[^\/]*[\/]/,"/_VBA_PROJECT_CUR/");if(n.slice(-1)!=="/")H.utils.cfb_add(e,n,r.FileIndex[a].content)})}var Uo=["xlsb","xlsm","xlam","biff8","xla"];ya.DS="http://schemas.openxmlformats.org/officeDocument/2006/relationships/dialogsheet";ya.MS="http://schemas.microsoft.com/office/2006/relationships/xlMacrosheet";function Wo(){return{"!type":"dialog"}}function Ho(){return{"!type":"dialog"}}function Vo(){return{"!type":"macro"}}function Xo(){return{"!type":"macro"}}var Go=function(){var e=/(^|[^A-Za-z])R(\[?)(-?\d+|)\]?C(\[?)(-?\d+|)\]?/g;var r={r:0,c:0};function t(e,t,a,n,i,s){var f=n.length>0?parseInt(n,10)|0:0,l=s.length>0?parseInt(s,10)|0:0;if(l<0&&i.length===0)l=0;var o=false,c=false;if(i.length>0||s.length==0)o=true;if(o)l+=r.c;else--l;if(a.length>0||n.length==0)c=true;if(c)f+=r.r;else--f;return t+(o?"":"$")+st(l)+(c?"":"$")+tt(f)}return function a(n,i){r=i;return n.replace(e,t)}}();var zo=/(^|[^._A-Z0-9])([$]?)([A-Z]{1,2}|[A-W][A-Z]{2}|X[A-E][A-Z]|XF[A-D])([$]?)([1-9]\d{0,5}|10[0-3]\d{4}|104[0-7]\d{3}|1048[0-4]\d{2}|10485[0-6]\d|104857[0-6])(?![_.\(A-Za-z0-9])/g;var jo=function(){return function e(r,t){return r.replace(zo,function(e,r,a,n,i,s){var f=it(n)-(a?0:t.c);var l=rt(s)-(i?0:t.r);var o=l==0?"":!i?"["+l+"]":l+1;var c=f==0?"":!a?"["+f+"]":f+1;return r+"R"+o+"C"+c})}}();function $o(e,r){return e.replace(zo,function(e,t,a,n,i,s){return t+(a=="$"?a+n:st(it(n)+r.c))+(i=="$"?i+s:tt(rt(s)+r.r))})}function Ko(e,r,t){var a=ht(r),n=a.s,i=ct(t);var s={r:i.r-n.r,c:i.c-n.c};return $o(e,s)}function Yo(e){if(e.length==1)return false;return true}function Qo(e){return e.replace(/_xlfn\./g,"")}function Jo(e){e.l+=1;return}function Zo(e,r){var t=e._R(r==1?1:2);return[t&16383,t>>14&1,t>>15&1]}function qo(e,r,t){var a=2;if(t){if(t.biff>=2&&t.biff<=5)return ec(e,r,t);else if(t.biff==12)a=4}var n=e._R(a),i=e._R(a);var s=Zo(e,2);var f=Zo(e,2);return{s:{r:n,c:s[0],cRel:s[1],rRel:s[2]},e:{r:i,c:f[0],cRel:f[1],rRel:f[2]}}}function ec(e){var r=Zo(e,2),t=Zo(e,2);var a=e._R(1);var n=e._R(1);return{s:{r:r[0],c:a,cRel:r[1],rRel:r[2]},e:{r:t[0],c:n,cRel:t[1],rRel:t[2]}}}function rc(e,r,t){if(t.biff<8)return ec(e,r,t);var a=e._R(t.biff==12?4:2),n=e._R(t.biff==12?4:2);var i=Zo(e,2);var s=Zo(e,2);return{s:{r:a,c:i[0],cRel:i[1],rRel:i[2]},e:{r:n,c:s[0],cRel:s[1],rRel:s[2]}}}function tc(e,r,t){if(t&&t.biff>=2&&t.biff<=5)return ac(e,r,t);var a=e._R(t&&t.biff==12?4:2);var n=Zo(e,2);return{r:a,c:n[0],cRel:n[1],rRel:n[2]}}function ac(e){var r=Zo(e,2);var t=e._R(1);return{r:r[0],c:t,cRel:r[1],rRel:r[2]}}function nc(e){var r=e._R(2);var t=e._R(2);return{r:r,c:t&255,fQuoted:!!(t&16384),cRel:t>>15,rRel:t>>15}}function ic(e,r,t){var a=t&&t.biff?t.biff:8;if(a>=2&&a<=5)return sc(e,r,t);var n=e._R(a>=12?4:2);var i=e._R(2);var s=(i&16384)>>14,f=(i&32768)>>15;i&=16383;if(f==1)while(n>524287)n-=1048576;if(s==1)while(i>8191)i=i-16384;return{r:n,c:i,cRel:s,rRel:f}}function sc(e){var r=e._R(2);var t=e._R(1);var a=(r&32768)>>15,n=(r&16384)>>14;r&=16383;if(a==1&&r>=8192)r=r-16384;if(n==1&&t>=128)t=t-256;return{r:r,c:t,cRel:n,rRel:a}}function fc(e,r,t){var a=(e[e.l++]&96)>>5;var n=qo(e,t.biff>=2&&t.biff<=5?6:8,t);return[a,n]}function lc(e,r,t){var a=(e[e.l++]&96)>>5;var n=e._R(2,"i");var i=8;if(t)switch(t.biff){case 5:e.l+=12;i=6;break;case 12:i=12;break;}var s=qo(e,i,t);return[a,n,s]}function oc(e,r,t){var a=(e[e.l++]&96)>>5;e.l+=t&&t.biff>8?12:t.biff<8?6:8;return[a]}function cc(e,r,t){var a=(e[e.l++]&96)>>5;var n=e._R(2);var i=8;if(t)switch(t.biff){case 5:e.l+=12;i=6;break;case 12:i=12;break;}e.l+=i;return[a,n]}function uc(e,r,t){var a=(e[e.l++]&96)>>5;var n=rc(e,r-1,t);return[a,n]}function hc(e,r,t){var a=(e[e.l++]&96)>>5;e.l+=t.biff==2?6:t.biff==12?14:7;return[a]}function dc(e){var r=e[e.l+1]&1;var t=1;e.l+=4;return[r,t]}function vc(e,r,t){e.l+=2;var a=e._R(t&&t.biff==2?1:2);var n=[];for(var i=0;i<=a;++i)n.push(e._R(t&&t.biff==2?1:2));return n}function pc(e,r,t){var a=e[e.l+1]&255?1:0;e.l+=2;return[a,e._R(t&&t.biff==2?1:2)]}function mc(e,r,t){var a=e[e.l+1]&255?1:0;e.l+=2;return[a,e._R(t&&t.biff==2?1:2)]}function bc(e){var r=e[e.l+1]&255?1:0;e.l+=2;return[r,e._R(2)]}function gc(e,r,t){var a=e[e.l+1]&255?1:0;e.l+=t&&t.biff==2?3:4;return[a]}function Ec(e){var r=e._R(1),t=e._R(1);return[r,t]}function Sc(e){e._R(2);return Ec(e,2)}function kc(e){e._R(2);return Ec(e,2)}function wc(e,r,t){var a=(e[e.l]&96)>>5;e.l+=1;var n=tc(e,0,t);return[a,n]}function Cc(e,r,t){var a=(e[e.l]&96)>>5;e.l+=1;var n=ic(e,0,t);return[a,n]}function Bc(e,r,t){var a=(e[e.l]&96)>>5;e.l+=1;var n=e._R(2);if(t&&t.biff==5)e.l+=12;var i=tc(e,0,t);return[a,n,i]}function Tc(e,r,t){var a=(e[e.l]&96)>>5;e.l+=1;var n=e._R(t&&t.biff<=3?1:2);return[Uu[n],Lu[n],a]}function xc(e,r,t){var a=e[e.l++];var n=e._R(1),i=t&&t.biff<=3?[a==88?-1:0,e._R(1)]:Ic(e);return[n,(i[0]===0?Lu:Mu)[i[1]]]}function Ic(e){return[e[e.l+1]>>7,e._R(2)&32767]}function _c(e,r,t){e.l+=t&&t.biff==2?3:4;return}function Ac(e,r,t){e.l++;if(t&&t.biff==12)return[e._R(4,"i"),0];var a=e._R(2);var n=e._R(t&&t.biff==2?1:2);return[a,n]}function Rc(e){e.l++;return jt[e._R(1)]}function yc(e){e.l++;return e._R(2)}function Fc(e){e.l++;return e._R(1)!==0}function Dc(e){e.l++;return Gt(e,8)}function Oc(e,r,t){e.l++;return zn(e,r-1,t)}function Pc(e,r){var t=[e._R(1)];if(r==12)switch(t[0]){case 2:t[0]=4;break;case 4:t[0]=16;break;case 0:t[0]=1;break;case 1:t[0]=2;break;}switch(t[0]){case 4:t[1]=Ln(e,1)?"TRUE":"FALSE";if(r!=12)e.l+=7;break;case 37:;case 16:t[1]=jt[e[e.l]];e.l+=r==12?4:8;break;case 0:e.l+=8;break;case 1:t[1]=Gt(e,8);break;case 2:t[1]=Yn(e,0,{biff:r>0&&r<8?2:r});break;default:throw new Error("Bad SerAr: "+t[0]);}return t}function Nc(e,r,t){var a=e._R(t.biff==12?4:2);var n=[];for(var i=0;i!=a;++i)n.push((t.biff==12?Vt:di)(e,8));return n}function Mc(e,r,t){var a=0,n=0;if(t.biff==12){a=e._R(4);n=e._R(4)}else{n=1+e._R(1);a=1+e._R(2)}if(t.biff>=2&&t.biff<8){--a;if(--n==0)n=256}for(var i=0,s=[];i!=a&&(s[i]=[]);++i)for(var f=0;f!=n;++f)s[i][f]=Pc(e,t.biff);return s}function Lc(e,r,t){var a=e._R(1)>>>5&3;var n=!t||t.biff>=8?4:2;var i=e._R(n);switch(t.biff){case 2:e.l+=5;break;case 3:;case 4:e.l+=8;break;case 5:e.l+=12;break;}return[a,0,i]}function Uc(e,r,t){if(t.biff==5)return Wc(e,r,t);var a=e._R(1)>>>5&3;var n=e._R(2);var i=e._R(4);return[a,n,i]}function Wc(e){var r=e._R(1)>>>5&3;var t=e._R(2,"i");e.l+=8;var a=e._R(2);e.l+=12;return[r,t,a]}function Hc(e,r,t){var a=e._R(1)>>>5&3;e.l+=t&&t.biff==2?3:4;var n=e._R(t&&t.biff==2?1:2);return[a,n]}function Vc(e,r,t){var a=e._R(1)>>>5&3;var n=e._R(t&&t.biff==2?1:2);return[a,n]}function Xc(e,r,t){var a=e._R(1)>>>5&3;e.l+=4;if(t.biff<8)e.l--;if(t.biff==12)e.l+=2;return[a]}function Gc(e,r,t){var a=(e[e.l++]&96)>>5;var n=e._R(2);var i=4;if(t)switch(t.biff){case 5:i=15;break;case 12:i=6;break;}e.l+=i;return[a,n]}var zc=Gr;var jc=Gr;var $c=Gr;function Kc(e,r,t){e.l+=2;return[nc(e,4,t)]}function Yc(e){e.l+=6;return[]}var Qc=Kc;var Jc=Yc;var Zc=Yc;var qc=Kc;function eu(e){e.l+=2;return[Wn(e),e._R(2)&1]}var ru=Kc;var tu=eu;var au=Yc;var nu=Kc;var iu=Kc;var su=["Data","All","Headers","??","?Data2","??","?DataHeaders","??","Totals","??","??","??","?DataTotals","??","??","??","?Current"];function fu(e){e.l+=2;var r=e._R(2);var t=e._R(2);var a=e._R(4);var n=e._R(2);var i=e._R(2);var s=su[t>>2&31];return{ixti:r,coltype:t&3,rt:s,idx:a,c:n,C:i}}function lu(e){e.l+=2;return[e._R(4)]}function ou(e,r,t){e.l+=5;e.l+=2;e.l+=t.biff==2?1:4;return["PTGSHEET"]}function cu(e,r,t){e.l+=t.biff==2?4:5;return["PTGENDSHEET"]}function uu(e){var r=e._R(1)>>>5&3;var t=e._R(2);return[r,t]}function hu(e){var r=e._R(1)>>>5&3;var t=e._R(2);return[r,t]}function du(e){e.l+=4;return[0,0]}var vu={1:{n:"PtgExp",f:Ac},2:{n:"PtgTbl",f:$c},3:{n:"PtgAdd",f:Jo},4:{n:"PtgSub",f:Jo},5:{n:"PtgMul",f:Jo},6:{n:"PtgDiv",f:Jo},7:{n:"PtgPower",f:Jo},8:{n:"PtgConcat",f:Jo},9:{n:"PtgLt",f:Jo},10:{n:"PtgLe",f:Jo},11:{n:"PtgEq",f:Jo},12:{n:"PtgGe",f:Jo},13:{n:"PtgGt",f:Jo},14:{n:"PtgNe",f:Jo},15:{n:"PtgIsect",f:Jo},16:{n:"PtgUnion",f:Jo},17:{n:"PtgRange",f:Jo},18:{n:"PtgUplus",f:Jo},19:{n:"PtgUminus",f:Jo},20:{n:"PtgPercent",f:Jo},21:{n:"PtgParen",f:Jo},22:{n:"PtgMissArg",f:Jo},23:{n:"PtgStr",f:Oc},26:{n:"PtgSheet",f:ou},27:{n:"PtgEndSheet",f:cu},28:{n:"PtgErr",f:Rc},29:{n:"PtgBool",f:Fc},30:{n:"PtgInt",f:yc},31:{n:"PtgNum",f:Dc},32:{n:"PtgArray",f:hc},33:{n:"PtgFunc",f:Tc},34:{n:"PtgFuncVar",f:xc},35:{n:"PtgName",f:Lc},36:{n:"PtgRef",f:wc},37:{n:"PtgArea",f:fc},38:{n:"PtgMemArea",f:Hc},39:{n:"PtgMemErr",f:zc},40:{n:"PtgMemNoMem",f:jc},41:{n:"PtgMemFunc",f:Vc},42:{n:"PtgRefErr",f:Xc},43:{n:"PtgAreaErr",f:oc},44:{n:"PtgRefN",f:Cc},45:{n:"PtgAreaN",f:uc},46:{n:"PtgMemAreaN",f:uu},47:{n:"PtgMemNoMemN",f:hu},57:{n:"PtgNameX",f:Uc},58:{n:"PtgRef3d",f:Bc},59:{n:"PtgArea3d",f:lc},60:{n:"PtgRefErr3d",f:Gc},61:{n:"PtgAreaErr3d",f:cc},255:{}};var pu={64:32,96:32,65:33,97:33,66:34,98:34,67:35,99:35,68:36,100:36,69:37,101:37,70:38,102:38,71:39,103:39,72:40,104:40,73:41,105:41,74:42,106:42,75:43,107:43,76:44,108:44,77:45,109:45,78:46,110:46,79:47,111:47,88:34,120:34,89:57,121:57,90:58,122:58,91:59,123:59,92:60,124:60,93:61,125:61};(function(){for(var e in pu)vu[e]=vu[pu[e]]})();var mu={1:{n:"PtgElfLel",f:eu},2:{n:"PtgElfRw",f:nu},3:{n:"PtgElfCol",f:Qc},6:{n:"PtgElfRwV",f:iu},7:{n:"PtgElfColV",f:qc},10:{n:"PtgElfRadical",f:ru},11:{n:"PtgElfRadicalS",f:au},13:{n:"PtgElfColS",f:Jc},15:{n:"PtgElfColSV",f:Zc},16:{n:"PtgElfRadicalLel",f:tu},25:{n:"PtgList",f:fu},29:{n:"PtgSxName",f:lu},255:{}};var bu={0:{n:"PtgAttrNoop",f:du},1:{n:"PtgAttrSemi",f:gc},2:{n:"PtgAttrIf",f:mc},4:{n:"PtgAttrChoose",f:vc},8:{n:"PtgAttrGoto",f:pc},16:{n:"PtgAttrSum",f:_c},32:{n:"PtgAttrBaxcel",f:dc},64:{n:"PtgAttrSpace",f:Sc},65:{n:"PtgAttrSpaceSemi",f:kc},128:{n:"PtgAttrIfError",f:bc},255:{}};bu[33]=bu[32];function gu(e,r,t,a){if(a.biff<8)return Gr(e,r);var n=e.l+r;var i=[];for(var s=0;s!==t.length;++s){switch(t[s][0]){case"PtgArray":t[s][1]=Mc(e,0,a);i.push(t[s][1]);break;case"PtgMemArea":t[s][2]=Nc(e,t[s][1],a);i.push(t[s][2]);break;case"PtgExp":if(a&&a.biff==12){t[s][1][1]=e._R(4);i.push(t[s][1])}break;case"PtgList":;case"PtgElfRadicalS":;case"PtgElfColS":;case"PtgElfColSV":throw"Unsupported "+t[s][0];default:break;}}r=n-e.l;if(r!==0)i.push(Gr(e,r));return i}function Eu(e,r,t){var a=e.l+r;var n,i,s=[];while(a!=e.l){r=a-e.l;i=e[e.l];n=vu[i];if(i===24||i===25)n=(i===24?mu:bu)[e[e.l+1]];if(!n||!n.f){Gr(e,r)}else{s.push([n.n,n.f(e,r,t)])}}return s}function Su(e){var r=[];for(var t=0;t<e.length;++t){var a=e[t],n=[];for(var i=0;i<a.length;++i){var s=a[i];if(s)switch(s[0]){case 2:n.push('"'+s[1].replace(/"/g,'""')+'"');break;default:n.push(s[1]);}else n.push("")}r.push(n.join(","))}return r.join(";")}var ku={PtgAdd:"+",PtgConcat:"&",PtgDiv:"/",PtgEq:"=",PtgGe:">=",PtgGt:">",PtgLe:"<=",PtgLt:"<",PtgMul:"*",PtgNe:"<>",PtgPower:"^",PtgSub:"-"};function wu(e,r){if(!e&&!(r&&r.biff<=5&&r.biff>=2))throw new Error("empty sheet name");if(e.indexOf(" ")>-1)return"'"+e+"'";return e}function Cu(e,r,t){if(!e)return"SH33TJSERR0";if(!e.XTI)return"SH33TJSERR6";var a=e.XTI[r];if(t.biff>8&&!e.XTI[r])return e.SheetNames[r];if(t.biff<8){if(r>1e4)r-=65536;if(r<0)r=-r;return r==0?"":e.XTI[r-1]}if(!a)return"SH33TJSERR1";var n="";if(t.biff>8)switch(e[a[0]][0]){case 357:n=a[1]==-1?"#REF":e.SheetNames[a[1]];return a[1]==a[2]?n:n+":"+e.SheetNames[a[2]];case 358:if(t.SID!=null)return e.SheetNames[t.SID];return"SH33TJSSAME"+e[a[0]][0];case 355:;default:return"SH33TJSSRC"+e[a[0]][0];}switch(e[a[0]][0][0]){case 1025:n=a[1]==-1?"#REF":e.SheetNames[a[1]]||"SH33TJSERR3";return a[1]==a[2]?n:n+":"+e.SheetNames[a[2]];case 14849:return"SH33TJSERR8";default:if(!e[a[0]][0][3])return"SH33TJSERR2";n=a[1]==-1?"#REF":e[a[0]][0][3][a[1]]||"SH33TJSERR4";return a[1]==a[2]?n:n+":"+e[a[0]][0][3][a[2]];}}function Bu(e,r,t){return wu(Cu(e,r,t),t)}function Tu(e,r,t,a,n){var i=n&&n.biff||8;var s={s:{c:0,r:0},e:{c:0,r:0}};var f=[],l,o,c,u=0,h=0,d,v="";if(!e[0]||!e[0][0])return"";var p=-1,m="";for(var b=0,g=e[0].length;b<g;++b){var E=e[0][b];switch(E[0]){case"PtgUminus":f.push("-"+f.pop());break;case"PtgUplus":f.push("+"+f.pop());break;case"PtgPercent":f.push(f.pop()+"%");break;case"PtgAdd":;case"PtgConcat":;case"PtgDiv":;case"PtgEq":;case"PtgGe":;case"PtgGt":;case"PtgLe":;case"PtgLt":;case"PtgMul":;case"PtgNe":;case"PtgPower":;case"PtgSub":l=f.pop();o=f.pop();if(p>=0){switch(e[0][p][1][0]){case 0:m=le(" ",e[0][p][1][1]);break;case 1:m=le("\r",e[0][p][1][1]);break;default:m="";if(n.WTF)throw new Error("Unexpected PtgAttrSpaceType "+e[0][p][1][0]);}o=o+m;p=-1}f.push(o+ku[E[0]]+l);break;case"PtgIsect":l=f.pop();o=f.pop();f.push(o+" "+l);break;case"PtgUnion":l=f.pop();o=f.pop();f.push(o+","+l);break;case"PtgRange":l=f.pop();o=f.pop();f.push(o+":"+l);break;case"PtgAttrChoose":break;case"PtgAttrGoto":break;case"PtgAttrIf":break;case"PtgAttrIfError":break;case"PtgRef":c=Yr(E[1][1],s,n);f.push(Jr(c,i));break;case"PtgRefN":c=t?Yr(E[1][1],t,n):E[1][1];f.push(Jr(c,i));break;case"PtgRef3d":u=E[1][1];c=Yr(E[1][2],s,n);v=Bu(a,u,n);var S=v;f.push(v+"!"+Jr(c,i));break;case"PtgFunc":;case"PtgFuncVar":var k=E[1][0],w=E[1][1];if(!k)k=0;k&=127;var C=k==0?[]:f.slice(-k);f.length-=k;if(w==="User")w=C.shift();f.push(w+"("+C.join(",")+")");break;case"PtgBool":f.push(E[1]?"TRUE":"FALSE");break;case"PtgInt":f.push(E[1]);break;case"PtgNum":f.push(String(E[1]));break;case"PtgStr":f.push('"'+E[1]+'"');break;case"PtgErr":f.push(E[1]);break;case"PtgAreaN":d=Qr(E[1][1],t?{s:t}:s,n);f.push(Zr(d,n));break;case"PtgArea":d=Qr(E[1][1],s,n);f.push(Zr(d,n));break;case"PtgArea3d":u=E[1][1];d=E[1][2];v=Bu(a,u,n);f.push(v+"!"+Zr(d,n));break;case"PtgAttrSum":f.push("SUM("+f.pop()+")");break;case"PtgAttrBaxcel":;case"PtgAttrSemi":break;case"PtgName":h=E[1][2];var B=(a.names||[])[h-1]||(a[0]||[])[h];var T=B?B.Name:"SH33TJSNAME"+String(h);if(T in Wu)T=Wu[T];f.push(T);break;case"PtgNameX":var x=E[1][1];h=E[1][2];var I;if(n.biff<=5){if(x<0)x=-x;if(a[x])I=a[x][h]}else{var _="";if(((a[x]||[])[0]||[])[0]==14849){}else if(((a[x]||[])[0]||[])[0]==1025){if(a[x][h]&&a[x][h].itab>0){_=a.SheetNames[a[x][h].itab-1]+"!"}}else _=a.SheetNames[h-1]+"!";if(a[x]&&a[x][h])_+=a[x][h].Name;else if(a[0]&&a[0][h])_+=a[0][h].Name;else _+="SH33TJSERRX";f.push(_);break}if(!I)I={Name:"SH33TJSERRY"};f.push(I.Name);break;case"PtgParen":var A="(",R=")";if(p>=0){m="";switch(e[0][p][1][0]){case 2:A=le(" ",e[0][p][1][1])+A;break;case 3:A=le("\r",e[0][p][1][1])+A;break;case 4:R=le(" ",e[0][p][1][1])+R;break;case 5:R=le("\r",e[0][p][1][1])+R;break;default:if(n.WTF)throw new Error("Unexpected PtgAttrSpaceType "+e[0][p][1][0]);}p=-1}f.push(A+f.pop()+R);break;case"PtgRefErr":f.push("#REF!");break;case"PtgRefErr3d":f.push("#REF!");break;case"PtgExp":c={c:E[1][1],r:E[1][0]};var y={c:t.c,r:t.r};if(a.sharedf[ut(c)]){var F=a.sharedf[ut(c)];f.push(Tu(F,s,y,a,n))}else{var D=false;for(l=0;l!=a.arrayf.length;++l){o=a.arrayf[l];if(c.c<o[0].s.c||c.c>o[0].e.c)continue;if(c.r<o[0].s.r||c.r>o[0].e.r)continue;f.push(Tu(o[1],s,y,a,n));D=true;break}if(!D)f.push(E[1])}break;case"PtgArray":f.push("{"+Su(E[1])+"}");break;case"PtgMemArea":break;case"PtgAttrSpace":;case"PtgAttrSpaceSemi":p=b;break;case"PtgTbl":break;case"PtgMemErr":break;case"PtgMissArg":f.push("");break;case"PtgAreaErr":f.push("#REF!");break;case"PtgAreaErr3d":f.push("#REF!");break;case"PtgList":f.push("Table"+E[1].idx+"[#"+E[1].rt+"]");break;case"PtgMemAreaN":;case"PtgMemNoMemN":;case"PtgAttrNoop":;case"PtgSheet":;case"PtgEndSheet":break;case"PtgMemFunc":break;case"PtgMemNoMem":break;case"PtgElfCol":;case"PtgElfColS":;case"PtgElfColSV":;case"PtgElfColV":;case"PtgElfLel":;case"PtgElfRadical":;case"PtgElfRadicalLel":;case"PtgElfRadicalS":;case"PtgElfRw":;case"PtgElfRwV":throw new Error("Unsupported ELFs");case"PtgSxName":throw new Error("Unrecognized Formula Token: "+String(E));default:throw new Error("Unrecognized Formula Token: "+String(E));}var O=["PtgAttrSpace","PtgAttrSpaceSemi","PtgAttrGoto"];if(n.biff!=3)if(p>=0&&O.indexOf(e[0][b][0])==-1){E=e[0][p];var P=true;switch(E[1][0]){case 4:P=false;case 0:m=le(" ",E[1][1]);break;case 5:P=false;case 1:m=le("\r",E[1][1]);break;default:m="";if(n.WTF)throw new Error("Unexpected PtgAttrSpaceType "+E[1][0]);}f.push((P?m:"")+f.pop()+(P?"":m));p=-1}}if(f.length>1&&n.WTF)throw new Error("bad formula stack");return f[0]}function xu(e,r,t){var a=e.l+r,n=t.biff==2?1:2;var i,s=e._R(n);if(s==65535)return[[],Gr(e,r-2)];var f=Eu(e,s,t);if(r!==s+n)i=gu(e,r-s-n,f,t);e.l=a;return[f,i]}function Iu(e,r,t){var a=e.l+r,n=t.biff==2?1:2;var i,s=e._R(n);if(s==65535)return[[],Gr(e,r-2)];var f=Eu(e,s,t);if(r!==s+n)i=gu(e,r-s-n,f,t);e.l=a;return[f,i]}function _u(e,r,t,a){var n=e.l+r;var i=Eu(e,a,t);var s;if(n!==e.l)s=gu(e,n-e.l,i,t);return[i,s]}function Au(e,r,t){var a=e.l+r;var n,i=e._R(2);var s=Eu(e,i,t);if(i==65535)return[[],Gr(e,r-2)];if(r!==i+2)n=gu(e,a-i-2,s,t);return[s,n]}function Ru(e){var r;if(Fr(e,e.l+6)!==65535)return[Gt(e),"n"];switch(e[e.l]){case 0:e.l+=8;return["String","s"];case 1:r=e[e.l+2]===1;e.l+=8;return[r,"b"];case 2:r=e[e.l+2];e.l+=8;return[r,"e"];case 3:e.l+=8;return["","s"];}return[]}function yu(e,r,t){var a=e.l+r;var n=si(e,6);if(t.biff==2)++e.l;var i=Ru(e,8);var s=e._R(1);if(t.biff!=2){e._R(1);if(t.biff>=5){e._R(4)}}var f=Iu(e,a-e.l,t);return{cell:n,val:i[0],formula:f,shared:s>>3&1,tt:i[1]}}function Fu(e,r,t){var a=e._R(4);var n=Eu(e,a,t);var i=e._R(4);var s=i>0?gu(e,i,n,t):null;return[n,s]}var Du=Fu;var Ou=Fu;var Pu=Fu;var Nu=Fu;var Mu={0:"BEEP",1:"OPEN",2:"OPEN.LINKS",3:"CLOSE.ALL",4:"SAVE",5:"SAVE.AS",6:"FILE.DELETE",7:"PAGE.SETUP",8:"PRINT",9:"PRINTER.SETUP",10:"QUIT",11:"NEW.WINDOW",12:"ARRANGE.ALL",13:"WINDOW.SIZE",14:"WINDOW.MOVE",15:"FULL",16:"CLOSE",17:"RUN",22:"SET.PRINT.AREA",23:"SET.PRINT.TITLES",24:"SET.PAGE.BREAK",25:"REMOVE.PAGE.BREAK",26:"FONT",27:"DISPLAY",28:"PROTECT.DOCUMENT",29:"PRECISION",30:"A1.R1C1",31:"CALCULATE.NOW",32:"CALCULATION",34:"DATA.FIND",35:"EXTRACT",36:"DATA.DELETE",37:"SET.DATABASE",38:"SET.CRITERIA",39:"SORT",40:"DATA.SERIES",41:"TABLE",42:"FORMAT.NUMBER",43:"ALIGNMENT",44:"STYLE",45:"BORDER",46:"CELL.PROTECTION",47:"COLUMN.WIDTH",48:"UNDO",49:"CUT",50:"COPY",51:"PASTE",52:"CLEAR",53:"PASTE.SPECIAL",54:"EDIT.DELETE",55:"INSERT",56:"FILL.RIGHT",57:"FILL.DOWN",61:"DEFINE.NAME",62:"CREATE.NAMES",63:"FORMULA.GOTO",64:"FORMULA.FIND",65:"SELECT.LAST.CELL",66:"SHOW.ACTIVE.CELL",67:"GALLERY.AREA",68:"GALLERY.BAR",69:"GALLERY.COLUMN",70:"GALLERY.LINE",71:"GALLERY.PIE",72:"GALLERY.SCATTER",73:"COMBINATION",74:"PREFERRED",75:"ADD.OVERLAY",76:"GRIDLINES",77:"SET.PREFERRED",78:"AXES",79:"LEGEND",80:"ATTACH.TEXT",81:"ADD.ARROW",82:"SELECT.CHART",83:"SELECT.PLOT.AREA",84:"PATTERNS",85:"MAIN.CHART",86:"OVERLAY",87:"SCALE",88:"FORMAT.LEGEND",89:"FORMAT.TEXT",90:"EDIT.REPEAT",91:"PARSE",92:"JUSTIFY",93:"HIDE",94:"UNHIDE",95:"WORKSPACE",96:"FORMULA",97:"FORMULA.FILL",98:"FORMULA.ARRAY",99:"DATA.FIND.NEXT",100:"DATA.FIND.PREV",101:"FORMULA.FIND.NEXT",102:"FORMULA.FIND.PREV",103:"ACTIVATE",104:"ACTIVATE.NEXT",105:"ACTIVATE.PREV",106:"UNLOCKED.NEXT",107:"UNLOCKED.PREV",108:"COPY.PICTURE",109:"SELECT",110:"DELETE.NAME",111:"DELETE.FORMAT",112:"VLINE",113:"HLINE",114:"VPAGE",115:"HPAGE",116:"VSCROLL",117:"HSCROLL",118:"ALERT",119:"NEW",120:"CANCEL.COPY",121:"SHOW.CLIPBOARD",122:"MESSAGE",124:"PASTE.LINK",125:"APP.ACTIVATE",126:"DELETE.ARROW",127:"ROW.HEIGHT",128:"FORMAT.MOVE",129:"FORMAT.SIZE",130:"FORMULA.REPLACE",131:"SEND.KEYS",132:"SELECT.SPECIAL",133:"APPLY.NAMES",134:"REPLACE.FONT",135:"FREEZE.PANES",136:"SHOW.INFO",137:"SPLIT",138:"ON.WINDOW",139:"ON.DATA",140:"DISABLE.INPUT",142:"OUTLINE",143:"LIST.NAMES",144:"FILE.CLOSE",145:"SAVE.WORKBOOK",146:"DATA.FORM",147:"COPY.CHART",148:"ON.TIME",149:"WAIT",150:"FORMAT.FONT",151:"FILL.UP",152:"FILL.LEFT",153:"DELETE.OVERLAY",155:"SHORT.MENUS",159:"SET.UPDATE.STATUS",161:"COLOR.PALETTE",162:"DELETE.STYLE",163:"WINDOW.RESTORE",164:"WINDOW.MAXIMIZE",166:"CHANGE.LINK",167:"CALCULATE.DOCUMENT",168:"ON.KEY",169:"APP.RESTORE",170:"APP.MOVE",171:"APP.SIZE",172:"APP.MINIMIZE",173:"APP.MAXIMIZE",174:"BRING.TO.FRONT",175:"SEND.TO.BACK",185:"MAIN.CHART.TYPE",186:"OVERLAY.CHART.TYPE",187:"SELECT.END",188:"OPEN.MAIL",189:"SEND.MAIL",190:"STANDARD.FONT",191:"CONSOLIDATE",192:"SORT.SPECIAL",193:"GALLERY.3D.AREA",194:"GALLERY.3D.COLUMN",195:"GALLERY.3D.LINE",196:"GALLERY.3D.PIE",197:"VIEW.3D",198:"GOAL.SEEK",199:"WORKGROUP",200:"FILL.GROUP",201:"UPDATE.LINK",202:"PROMOTE",203:"DEMOTE",204:"SHOW.DETAIL",206:"UNGROUP",207:"OBJECT.PROPERTIES",208:"SAVE.NEW.OBJECT",209:"SHARE",210:"SHARE.NAME",211:"DUPLICATE",212:"APPLY.STYLE",213:"ASSIGN.TO.OBJECT",214:"OBJECT.PROTECTION",215:"HIDE.OBJECT",216:"SET.EXTRACT",217:"CREATE.PUBLISHER",218:"SUBSCRIBE.TO",219:"ATTRIBUTES",220:"SHOW.TOOLBAR",222:"PRINT.PREVIEW",223:"EDIT.COLOR",224:"SHOW.LEVELS",225:"FORMAT.MAIN",226:"FORMAT.OVERLAY",227:"ON.RECALC",228:"EDIT.SERIES",229:"DEFINE.STYLE",240:"LINE.PRINT",243:"ENTER.DATA",249:"GALLERY.RADAR",250:"MERGE.STYLES",251:"EDITION.OPTIONS",252:"PASTE.PICTURE",253:"PASTE.PICTURE.LINK",254:"SPELLING",256:"ZOOM",259:"INSERT.OBJECT",260:"WINDOW.MINIMIZE",265:"SOUND.NOTE",266:"SOUND.PLAY",267:"FORMAT.SHAPE",268:"EXTEND.POLYGON",269:"FORMAT.AUTO",272:"GALLERY.3D.BAR",273:"GALLERY.3D.SURFACE",274:"FILL.AUTO",276:"CUSTOMIZE.TOOLBAR",277:"ADD.TOOL",278:"EDIT.OBJECT",279:"ON.DOUBLECLICK",280:"ON.ENTRY",281:"WORKBOOK.ADD",282:"WORKBOOK.MOVE",283:"WORKBOOK.COPY",284:"WORKBOOK.OPTIONS",285:"SAVE.WORKSPACE",288:"CHART.WIZARD",289:"DELETE.TOOL",290:"MOVE.TOOL",291:"WORKBOOK.SELECT",292:"WORKBOOK.ACTIVATE",293:"ASSIGN.TO.TOOL",295:"COPY.TOOL",296:"RESET.TOOL",297:"CONSTRAIN.NUMERIC",298:"PASTE.TOOL",302:"WORKBOOK.NEW",305:"SCENARIO.CELLS",306:"SCENARIO.DELETE",307:"SCENARIO.ADD",308:"SCENARIO.EDIT",309:"SCENARIO.SHOW",
+310:"SCENARIO.SHOW.NEXT",311:"SCENARIO.SUMMARY",312:"PIVOT.TABLE.WIZARD",313:"PIVOT.FIELD.PROPERTIES",314:"PIVOT.FIELD",315:"PIVOT.ITEM",316:"PIVOT.ADD.FIELDS",318:"OPTIONS.CALCULATION",319:"OPTIONS.EDIT",320:"OPTIONS.VIEW",321:"ADDIN.MANAGER",322:"MENU.EDITOR",323:"ATTACH.TOOLBARS",324:"VBAActivate",325:"OPTIONS.CHART",328:"VBA.INSERT.FILE",330:"VBA.PROCEDURE.DEFINITION",336:"ROUTING.SLIP",338:"ROUTE.DOCUMENT",339:"MAIL.LOGON",342:"INSERT.PICTURE",343:"EDIT.TOOL",344:"GALLERY.DOUGHNUT",350:"CHART.TREND",352:"PIVOT.ITEM.PROPERTIES",354:"WORKBOOK.INSERT",355:"OPTIONS.TRANSITION",356:"OPTIONS.GENERAL",370:"FILTER.ADVANCED",373:"MAIL.ADD.MAILER",374:"MAIL.DELETE.MAILER",375:"MAIL.REPLY",376:"MAIL.REPLY.ALL",377:"MAIL.FORWARD",378:"MAIL.NEXT.LETTER",379:"DATA.LABEL",380:"INSERT.TITLE",381:"FONT.PROPERTIES",382:"MACRO.OPTIONS",383:"WORKBOOK.HIDE",384:"WORKBOOK.UNHIDE",385:"WORKBOOK.DELETE",386:"WORKBOOK.NAME",388:"GALLERY.CUSTOM",390:"ADD.CHART.AUTOFORMAT",391:"DELETE.CHART.AUTOFORMAT",392:"CHART.ADD.DATA",393:"AUTO.OUTLINE",394:"TAB.ORDER",395:"SHOW.DIALOG",396:"SELECT.ALL",397:"UNGROUP.SHEETS",398:"SUBTOTAL.CREATE",399:"SUBTOTAL.REMOVE",400:"RENAME.OBJECT",412:"WORKBOOK.SCROLL",413:"WORKBOOK.NEXT",414:"WORKBOOK.PREV",415:"WORKBOOK.TAB.SPLIT",416:"FULL.SCREEN",417:"WORKBOOK.PROTECT",420:"SCROLLBAR.PROPERTIES",421:"PIVOT.SHOW.PAGES",422:"TEXT.TO.COLUMNS",423:"FORMAT.CHARTTYPE",424:"LINK.FORMAT",425:"TRACER.DISPLAY",430:"TRACER.NAVIGATE",431:"TRACER.CLEAR",432:"TRACER.ERROR",433:"PIVOT.FIELD.GROUP",434:"PIVOT.FIELD.UNGROUP",435:"CHECKBOX.PROPERTIES",436:"LABEL.PROPERTIES",437:"LISTBOX.PROPERTIES",438:"EDITBOX.PROPERTIES",439:"PIVOT.REFRESH",440:"LINK.COMBO",441:"OPEN.TEXT",442:"HIDE.DIALOG",443:"SET.DIALOG.FOCUS",444:"ENABLE.OBJECT",445:"PUSHBUTTON.PROPERTIES",446:"SET.DIALOG.DEFAULT",447:"FILTER",448:"FILTER.SHOW.ALL",449:"CLEAR.OUTLINE",450:"FUNCTION.WIZARD",451:"ADD.LIST.ITEM",452:"SET.LIST.ITEM",453:"REMOVE.LIST.ITEM",454:"SELECT.LIST.ITEM",455:"SET.CONTROL.VALUE",456:"SAVE.COPY.AS",458:"OPTIONS.LISTS.ADD",459:"OPTIONS.LISTS.DELETE",460:"SERIES.AXES",461:"SERIES.X",462:"SERIES.Y",463:"ERRORBAR.X",464:"ERRORBAR.Y",465:"FORMAT.CHART",466:"SERIES.ORDER",467:"MAIL.LOGOFF",468:"CLEAR.ROUTING.SLIP",469:"APP.ACTIVATE.MICROSOFT",470:"MAIL.EDIT.MAILER",471:"ON.SHEET",472:"STANDARD.WIDTH",473:"SCENARIO.MERGE",474:"SUMMARY.INFO",475:"FIND.FILE",476:"ACTIVE.CELL.FONT",477:"ENABLE.TIPWIZARD",478:"VBA.MAKE.ADDIN",480:"INSERTDATATABLE",481:"WORKGROUP.OPTIONS",482:"MAIL.SEND.MAILER",485:"AUTOCORRECT",489:"POST.DOCUMENT",491:"PICKLIST",493:"VIEW.SHOW",494:"VIEW.DEFINE",495:"VIEW.DELETE",509:"SHEET.BACKGROUND",510:"INSERT.MAP.OBJECT",511:"OPTIONS.MENONO",517:"MSOCHECKS",518:"NORMAL",519:"LAYOUT",520:"RM.PRINT.AREA",521:"CLEAR.PRINT.AREA",522:"ADD.PRINT.AREA",523:"MOVE.BRK",545:"HIDECURR.NOTE",546:"HIDEALL.NOTES",547:"DELETE.NOTE",548:"TRAVERSE.NOTES",549:"ACTIVATE.NOTES",620:"PROTECT.REVISIONS",621:"UNPROTECT.REVISIONS",647:"OPTIONS.ME",653:"WEB.PUBLISH",667:"NEWWEBQUERY",673:"PIVOT.TABLE.CHART",753:"OPTIONS.SAVE",755:"OPTIONS.SPELL",808:"HIDEALL.INKANNOTS"};var Lu={0:"COUNT",1:"IF",2:"ISNA",3:"ISERROR",4:"SUM",5:"AVERAGE",6:"MIN",7:"MAX",8:"ROW",9:"COLUMN",10:"NA",11:"NPV",12:"STDEV",13:"DOLLAR",14:"FIXED",15:"SIN",16:"COS",17:"TAN",18:"ATAN",19:"PI",20:"SQRT",21:"EXP",22:"LN",23:"LOG10",24:"ABS",25:"INT",26:"SIGN",27:"ROUND",28:"LOOKUP",29:"INDEX",30:"REPT",31:"MID",32:"LEN",33:"VALUE",34:"TRUE",35:"FALSE",36:"AND",37:"OR",38:"NOT",39:"MOD",40:"DCOUNT",41:"DSUM",42:"DAVERAGE",43:"DMIN",44:"DMAX",45:"DSTDEV",46:"VAR",47:"DVAR",48:"TEXT",49:"LINEST",50:"TREND",51:"LOGEST",52:"GROWTH",53:"GOTO",54:"HALT",55:"RETURN",56:"PV",57:"FV",58:"NPER",59:"PMT",60:"RATE",61:"MIRR",62:"IRR",63:"RAND",64:"MATCH",65:"DATE",66:"TIME",67:"DAY",68:"MONTH",69:"YEAR",70:"WEEKDAY",71:"HOUR",72:"MINUTE",73:"SECOND",74:"NOW",75:"AREAS",76:"ROWS",77:"COLUMNS",78:"OFFSET",79:"ABSREF",80:"RELREF",81:"ARGUMENT",82:"SEARCH",83:"TRANSPOSE",84:"ERROR",85:"STEP",86:"TYPE",87:"ECHO",88:"SET.NAME",89:"CALLER",90:"DEREF",91:"WINDOWS",92:"SERIES",93:"DOCUMENTS",94:"ACTIVE.CELL",95:"SELECTION",96:"RESULT",97:"ATAN2",98:"ASIN",99:"ACOS",100:"CHOOSE",101:"HLOOKUP",102:"VLOOKUP",103:"LINKS",104:"INPUT",105:"ISREF",106:"GET.FORMULA",107:"GET.NAME",108:"SET.VALUE",109:"LOG",110:"EXEC",111:"CHAR",112:"LOWER",113:"UPPER",114:"PROPER",115:"LEFT",116:"RIGHT",117:"EXACT",118:"TRIM",119:"REPLACE",120:"SUBSTITUTE",121:"CODE",122:"NAMES",123:"DIRECTORY",124:"FIND",125:"CELL",126:"ISERR",127:"ISTEXT",128:"ISNUMBER",129:"ISBLANK",130:"T",131:"N",132:"FOPEN",133:"FCLOSE",134:"FSIZE",135:"FREADLN",136:"FREAD",137:"FWRITELN",138:"FWRITE",139:"FPOS",140:"DATEVALUE",141:"TIMEVALUE",142:"SLN",143:"SYD",144:"DDB",145:"GET.DEF",146:"REFTEXT",147:"TEXTREF",148:"INDIRECT",149:"REGISTER",150:"CALL",151:"ADD.BAR",152:"ADD.MENU",153:"ADD.COMMAND",154:"ENABLE.COMMAND",155:"CHECK.COMMAND",156:"RENAME.COMMAND",157:"SHOW.BAR",158:"DELETE.MENU",159:"DELETE.COMMAND",160:"GET.CHART.ITEM",161:"DIALOG.BOX",162:"CLEAN",163:"MDETERM",164:"MINVERSE",165:"MMULT",166:"FILES",167:"IPMT",168:"PPMT",169:"COUNTA",170:"CANCEL.KEY",171:"FOR",172:"WHILE",173:"BREAK",174:"NEXT",175:"INITIATE",176:"REQUEST",177:"POKE",178:"EXECUTE",179:"TERMINATE",180:"RESTART",181:"HELP",182:"GET.BAR",183:"PRODUCT",184:"FACT",185:"GET.CELL",186:"GET.WORKSPACE",187:"GET.WINDOW",188:"GET.DOCUMENT",189:"DPRODUCT",190:"ISNONTEXT",191:"GET.NOTE",192:"NOTE",193:"STDEVP",194:"VARP",195:"DSTDEVP",196:"DVARP",197:"TRUNC",198:"ISLOGICAL",199:"DCOUNTA",200:"DELETE.BAR",201:"UNREGISTER",204:"USDOLLAR",205:"FINDB",206:"SEARCHB",207:"REPLACEB",208:"LEFTB",209:"RIGHTB",210:"MIDB",211:"LENB",212:"ROUNDUP",213:"ROUNDDOWN",214:"ASC",215:"DBCS",216:"RANK",219:"ADDRESS",220:"DAYS360",221:"TODAY",222:"VDB",223:"ELSE",224:"ELSE.IF",225:"END.IF",226:"FOR.CELL",227:"MEDIAN",228:"SUMPRODUCT",229:"SINH",230:"COSH",231:"TANH",232:"ASINH",233:"ACOSH",234:"ATANH",235:"DGET",236:"CREATE.OBJECT",237:"VOLATILE",238:"LAST.ERROR",239:"CUSTOM.UNDO",240:"CUSTOM.REPEAT",241:"FORMULA.CONVERT",242:"GET.LINK.INFO",243:"TEXT.BOX",244:"INFO",245:"GROUP",246:"GET.OBJECT",247:"DB",248:"PAUSE",251:"RESUME",252:"FREQUENCY",253:"ADD.TOOLBAR",254:"DELETE.TOOLBAR",255:"User",256:"RESET.TOOLBAR",257:"EVALUATE",258:"GET.TOOLBAR",259:"GET.TOOL",260:"SPELLING.CHECK",261:"ERROR.TYPE",262:"APP.TITLE",263:"WINDOW.TITLE",264:"SAVE.TOOLBAR",265:"ENABLE.TOOL",266:"PRESS.TOOL",267:"REGISTER.ID",268:"GET.WORKBOOK",269:"AVEDEV",270:"BETADIST",271:"GAMMALN",272:"BETAINV",273:"BINOMDIST",274:"CHIDIST",275:"CHIINV",276:"COMBIN",277:"CONFIDENCE",278:"CRITBINOM",279:"EVEN",280:"EXPONDIST",281:"FDIST",282:"FINV",283:"FISHER",284:"FISHERINV",285:"FLOOR",286:"GAMMADIST",287:"GAMMAINV",288:"CEILING",289:"HYPGEOMDIST",290:"LOGNORMDIST",291:"LOGINV",292:"NEGBINOMDIST",293:"NORMDIST",294:"NORMSDIST",295:"NORMINV",296:"NORMSINV",297:"STANDARDIZE",298:"ODD",299:"PERMUT",300:"POISSON",301:"TDIST",302:"WEIBULL",303:"SUMXMY2",304:"SUMX2MY2",305:"SUMX2PY2",306:"CHITEST",307:"CORREL",308:"COVAR",309:"FORECAST",310:"FTEST",311:"INTERCEPT",312:"PEARSON",313:"RSQ",314:"STEYX",315:"SLOPE",316:"TTEST",317:"PROB",318:"DEVSQ",319:"GEOMEAN",320:"HARMEAN",321:"SUMSQ",322:"KURT",323:"SKEW",324:"ZTEST",325:"LARGE",326:"SMALL",327:"QUARTILE",328:"PERCENTILE",329:"PERCENTRANK",330:"MODE",331:"TRIMMEAN",332:"TINV",334:"MOVIE.COMMAND",335:"GET.MOVIE",336:"CONCATENATE",337:"POWER",338:"PIVOT.ADD.DATA",339:"GET.PIVOT.TABLE",340:"GET.PIVOT.FIELD",341:"GET.PIVOT.ITEM",342:"RADIANS",343:"DEGREES",344:"SUBTOTAL",345:"SUMIF",346:"COUNTIF",347:"COUNTBLANK",348:"SCENARIO.GET",349:"OPTIONS.LISTS.GET",350:"ISPMT",351:"DATEDIF",352:"DATESTRING",353:"NUMBERSTRING",354:"ROMAN",355:"OPEN.DIALOG",356:"SAVE.DIALOG",357:"VIEW.GET",358:"GETPIVOTDATA",359:"HYPERLINK",360:"PHONETIC",361:"AVERAGEA",362:"MAXA",363:"MINA",364:"STDEVPA",365:"VARPA",366:"STDEVA",367:"VARA",368:"BAHTTEXT",369:"THAIDAYOFWEEK",370:"THAIDIGIT",371:"THAIMONTHOFYEAR",372:"THAINUMSOUND",373:"THAINUMSTRING",374:"THAISTRINGLENGTH",375:"ISTHAIDIGIT",376:"ROUNDBAHTDOWN",377:"ROUNDBAHTUP",378:"THAIYEAR",379:"RTD",380:"CUBEVALUE",381:"CUBEMEMBER",382:"CUBEMEMBERPROPERTY",383:"CUBERANKEDMEMBER",384:"HEX2BIN",385:"HEX2DEC",386:"HEX2OCT",387:"DEC2BIN",388:"DEC2HEX",389:"DEC2OCT",390:"OCT2BIN",391:"OCT2HEX",392:"OCT2DEC",393:"BIN2DEC",394:"BIN2OCT",395:"BIN2HEX",396:"IMSUB",397:"IMDIV",398:"IMPOWER",399:"IMABS",400:"IMSQRT",401:"IMLN",402:"IMLOG2",403:"IMLOG10",404:"IMSIN",405:"IMCOS",406:"IMEXP",407:"IMARGUMENT",408:"IMCONJUGATE",409:"IMAGINARY",410:"IMREAL",411:"COMPLEX",412:"IMSUM",413:"IMPRODUCT",414:"SERIESSUM",415:"FACTDOUBLE",416:"SQRTPI",417:"QUOTIENT",418:"DELTA",419:"GESTEP",420:"ISEVEN",421:"ISODD",422:"MROUND",423:"ERF",424:"ERFC",425:"BESSELJ",426:"BESSELK",427:"BESSELY",428:"BESSELI",429:"XIRR",430:"XNPV",431:"PRICEMAT",432:"YIELDMAT",433:"INTRATE",434:"RECEIVED",435:"DISC",436:"PRICEDISC",437:"YIELDDISC",438:"TBILLEQ",439:"TBILLPRICE",440:"TBILLYIELD",441:"PRICE",442:"YIELD",443:"DOLLARDE",444:"DOLLARFR",445:"NOMINAL",446:"EFFECT",447:"CUMPRINC",448:"CUMIPMT",449:"EDATE",450:"EOMONTH",451:"YEARFRAC",452:"COUPDAYBS",453:"COUPDAYS",454:"COUPDAYSNC",455:"COUPNCD",456:"COUPNUM",457:"COUPPCD",458:"DURATION",459:"MDURATION",460:"ODDLPRICE",461:"ODDLYIELD",462:"ODDFPRICE",463:"ODDFYIELD",464:"RANDBETWEEN",465:"WEEKNUM",466:"AMORDEGRC",467:"AMORLINC",468:"CONVERT",724:"SHEETJS",469:"ACCRINT",470:"ACCRINTM",471:"WORKDAY",472:"NETWORKDAYS",473:"GCD",474:"MULTINOMIAL",475:"LCM",476:"FVSCHEDULE",477:"CUBEKPIMEMBER",478:"CUBESET",479:"CUBESETCOUNT",480:"IFERROR",481:"COUNTIFS",482:"SUMIFS",483:"AVERAGEIF",484:"AVERAGEIFS"};var Uu={2:1,3:1,10:0,15:1,16:1,17:1,18:1,19:0,20:1,21:1,22:1,23:1,24:1,25:1,26:1,27:2,30:2,31:3,32:1,33:1,34:0,35:0,38:1,39:2,40:3,41:3,42:3,43:3,44:3,45:3,47:3,48:2,53:1,61:3,63:0,65:3,66:3,67:1,68:1,69:1,70:1,71:1,72:1,73:1,74:0,75:1,76:1,77:1,79:2,80:2,83:1,85:0,86:1,89:0,90:1,94:0,95:0,97:2,98:1,99:1,101:3,102:3,105:1,106:1,108:2,111:1,112:1,113:1,114:1,117:2,118:1,119:4,121:1,126:1,127:1,128:1,129:1,130:1,131:1,133:1,134:1,135:1,136:2,137:2,138:2,140:1,141:1,142:3,143:4,144:4,161:1,162:1,163:1,164:1,165:2,172:1,175:2,176:2,177:3,178:2,179:1,184:1,186:1,189:3,190:1,195:3,196:3,197:1,198:1,199:3,201:1,207:4,210:3,211:1,212:2,213:2,214:1,215:1,225:0,229:1,230:1,231:1,232:1,233:1,234:1,235:3,244:1,247:4,252:2,257:1,261:1,271:1,273:4,274:2,275:2,276:2,277:3,278:3,279:1,280:3,281:3,282:3,283:1,284:1,285:2,286:4,287:3,288:2,289:4,290:3,291:3,292:3,293:4,294:1,295:3,296:1,297:3,298:1,299:2,300:3,301:3,302:4,303:2,304:2,305:2,306:2,307:2,308:2,309:3,310:2,311:2,312:2,313:2,314:2,315:2,316:4,325:2,326:2,327:2,328:2,331:2,332:2,337:2,342:1,343:1,346:2,347:1,350:4,351:3,352:1,353:2,360:1,368:1,369:1,370:1,371:1,372:1,373:1,374:1,375:1,376:1,377:1,378:1,382:3,385:1,392:1,393:1,396:2,397:2,398:2,399:1,400:1,401:1,402:1,403:1,404:1,405:1,406:1,407:1,408:1,409:1,410:1,414:4,415:1,416:1,417:2,420:1,421:1,422:2,424:1,425:2,426:2,427:2,428:2,430:3,438:3,439:3,440:3,443:2,444:2,445:2,446:2,447:6,448:6,449:2,450:2,464:2,468:3,476:2,479:1,480:2,65535:0};var Wu={"_xlfn.ACOT":"ACOT","_xlfn.ACOTH":"ACOTH","_xlfn.AGGREGATE":"AGGREGATE","_xlfn.ARABIC":"ARABIC","_xlfn.AVERAGEIF":"AVERAGEIF","_xlfn.AVERAGEIFS":"AVERAGEIFS","_xlfn.BASE":"BASE","_xlfn.BETA.DIST":"BETA.DIST","_xlfn.BETA.INV":"BETA.INV","_xlfn.BINOM.DIST":"BINOM.DIST","_xlfn.BINOM.DIST.RANGE":"BINOM.DIST.RANGE","_xlfn.BINOM.INV":"BINOM.INV","_xlfn.BITAND":"BITAND","_xlfn.BITLSHIFT":"BITLSHIFT","_xlfn.BITOR":"BITOR","_xlfn.BITRSHIFT":"BITRSHIFT","_xlfn.BITXOR":"BITXOR","_xlfn.CEILING.MATH":"CEILING.MATH","_xlfn.CEILING.PRECISE":"CEILING.PRECISE","_xlfn.CHISQ.DIST":"CHISQ.DIST","_xlfn.CHISQ.DIST.RT":"CHISQ.DIST.RT","_xlfn.CHISQ.INV":"CHISQ.INV","_xlfn.CHISQ.INV.RT":"CHISQ.INV.RT","_xlfn.CHISQ.TEST":"CHISQ.TEST","_xlfn.COMBINA":"COMBINA","_xlfn.CONCAT":"CONCAT","_xlfn.CONFIDENCE.NORM":"CONFIDENCE.NORM","_xlfn.CONFIDENCE.T":"CONFIDENCE.T","_xlfn.COT":"COT","_xlfn.COTH":"COTH","_xlfn.COUNTIFS":"COUNTIFS","_xlfn.COVARIANCE.P":"COVARIANCE.P","_xlfn.COVARIANCE.S":"COVARIANCE.S","_xlfn.CSC":"CSC","_xlfn.CSCH":"CSCH","_xlfn.DAYS":"DAYS","_xlfn.DECIMAL":"DECIMAL","_xlfn.ECMA.CEILING":"ECMA.CEILING","_xlfn.ERF.PRECISE":"ERF.PRECISE","_xlfn.ERFC.PRECISE":"ERFC.PRECISE","_xlfn.EXPON.DIST":"EXPON.DIST","_xlfn.F.DIST":"F.DIST","_xlfn.F.DIST.RT":"F.DIST.RT","_xlfn.F.INV":"F.INV","_xlfn.F.INV.RT":"F.INV.RT","_xlfn.F.TEST":"F.TEST","_xlfn.FILTERXML":"FILTERXML","_xlfn.FLOOR.MATH":"FLOOR.MATH","_xlfn.FLOOR.PRECISE":"FLOOR.PRECISE","_xlfn.FORECAST.ETS":"FORECAST.ETS","_xlfn.FORECAST.ETS.CONFINT":"FORECAST.ETS.CONFINT","_xlfn.FORECAST.ETS.SEASONALITY":"FORECAST.ETS.SEASONALITY","_xlfn.FORECAST.ETS.STAT":"FORECAST.ETS.STAT","_xlfn.FORECAST.LINEAR":"FORECAST.LINEAR","_xlfn.FORMULATEXT":"FORMULATEXT","_xlfn.GAMMA":"GAMMA","_xlfn.GAMMA.DIST":"GAMMA.DIST","_xlfn.GAMMA.INV":"GAMMA.INV","_xlfn.GAMMALN.PRECISE":"GAMMALN.PRECISE","_xlfn.GAUSS":"GAUSS","_xlfn.HYPGEOM.DIST":"HYPGEOM.DIST","_xlfn.IFERROR":"IFERROR","_xlfn.IFNA":"IFNA","_xlfn.IFS":"IFS","_xlfn.IMCOSH":"IMCOSH","_xlfn.IMCOT":"IMCOT","_xlfn.IMCSC":"IMCSC","_xlfn.IMCSCH":"IMCSCH","_xlfn.IMSEC":"IMSEC","_xlfn.IMSECH":"IMSECH","_xlfn.IMSINH":"IMSINH","_xlfn.IMTAN":"IMTAN","_xlfn.ISFORMULA":"ISFORMULA","_xlfn.ISO.CEILING":"ISO.CEILING","_xlfn.ISOWEEKNUM":"ISOWEEKNUM","_xlfn.LOGNORM.DIST":"LOGNORM.DIST","_xlfn.LOGNORM.INV":"LOGNORM.INV","_xlfn.MAXIFS":"MAXIFS","_xlfn.MINIFS":"MINIFS","_xlfn.MODE.MULT":"MODE.MULT","_xlfn.MODE.SNGL":"MODE.SNGL","_xlfn.MUNIT":"MUNIT","_xlfn.NEGBINOM.DIST":"NEGBINOM.DIST","_xlfn.NETWORKDAYS.INTL":"NETWORKDAYS.INTL","_xlfn.NIGBINOM":"NIGBINOM","_xlfn.NORM.DIST":"NORM.DIST","_xlfn.NORM.INV":"NORM.INV","_xlfn.NORM.S.DIST":"NORM.S.DIST","_xlfn.NORM.S.INV":"NORM.S.INV","_xlfn.NUMBERVALUE":"NUMBERVALUE","_xlfn.PDURATION":"PDURATION","_xlfn.PERCENTILE.EXC":"PERCENTILE.EXC","_xlfn.PERCENTILE.INC":"PERCENTILE.INC","_xlfn.PERCENTRANK.EXC":"PERCENTRANK.EXC","_xlfn.PERCENTRANK.INC":"PERCENTRANK.INC","_xlfn.PERMUTATIONA":"PERMUTATIONA","_xlfn.PHI":"PHI","_xlfn.POISSON.DIST":"POISSON.DIST","_xlfn.QUARTILE.EXC":"QUARTILE.EXC","_xlfn.QUARTILE.INC":"QUARTILE.INC","_xlfn.QUERYSTRING":"QUERYSTRING","_xlfn.RANK.AVG":"RANK.AVG","_xlfn.RANK.EQ":"RANK.EQ","_xlfn.RRI":"RRI","_xlfn.SEC":"SEC","_xlfn.SECH":"SECH","_xlfn.SHEET":"SHEET","_xlfn.SHEETS":"SHEETS","_xlfn.SKEW.P":"SKEW.P","_xlfn.STDEV.P":"STDEV.P","_xlfn.STDEV.S":"STDEV.S","_xlfn.SUMIFS":"SUMIFS","_xlfn.SWITCH":"SWITCH","_xlfn.T.DIST":"T.DIST","_xlfn.T.DIST.2T":"T.DIST.2T","_xlfn.T.DIST.RT":"T.DIST.RT","_xlfn.T.INV":"T.INV","_xlfn.T.INV.2T":"T.INV.2T","_xlfn.T.TEST":"T.TEST","_xlfn.TEXTJOIN":"TEXTJOIN","_xlfn.UNICHAR":"UNICHAR","_xlfn.UNICODE":"UNICODE","_xlfn.VAR.P":"VAR.P","_xlfn.VAR.S":"VAR.S","_xlfn.WEBSERVICE":"WEBSERVICE","_xlfn.WEIBULL.DIST":"WEIBULL.DIST","_xlfn.WORKDAY.INTL":"WORKDAY.INTL","_xlfn.XOR":"XOR","_xlfn.Z.TEST":"Z.TEST"};function Hu(e){if(e.slice(0,3)=="of:")e=e.slice(3);if(e.charCodeAt(0)==61){e=e.slice(1);if(e.charCodeAt(0)==61)e=e.slice(1)}e=e.replace(/COM\.MICROSOFT\./g,"");e=e.replace(/\[((?:\.[A-Z]+[0-9]+)(?::\.[A-Z]+[0-9]+)?)\]/g,function(e,r){return r.replace(/\./g,"")});e=e.replace(/\[.(#[A-Z]*[?!])\]/g,"$1");return e.replace(/[;~]/g,",").replace(/\|/g,";")}function Vu(e){var r="of:="+e.replace(zo,"$1[.$2$3$4$5]").replace(/\]:\[/g,":");return r.replace(/;/g,"|").replace(/,/g,";")}function Xu(e){var r=e.split(":");var t=r[0].split(".")[0];return[t,r[0].split(".")[1]+(r.length>1?":"+(r[1].split(".")[1]||r[1].split(".")[0]):"")]}function Gu(e){return e.replace(/\./,"!")}var zu={};var ju={};ya.WS=["http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet","http://purl.oclc.org/ooxml/officeDocument/relationships/worksheet"];var $u=typeof Map!=="undefined";function Ku(e,r,t){var a=0,n=e.length;if(t){if($u?t.has(r):t.hasOwnProperty(r)){var i=$u?t.get(r):t[r];for(;a<i.length;++a){if(e[i[a]].t===r){e.Count++;return i[a]}}}}else for(;a<n;++a){if(e[a].t===r){e.Count++;return a}}e[n]={t:r};e.Count++;e.Unique++;if(t){if($u){if(!t.has(r))t.set(r,[]);t.get(r).push(n)}else{if(!t.hasOwnProperty(r))t[r]=[];t[r].push(n)}}return n}function Yu(e,r){var t={min:e+1,max:e+1};var a=-1;if(r.MDW)rl=r.MDW;if(r.width!=null)t.customWidth=1;else if(r.wpx!=null)a=al(r.wpx);else if(r.wch!=null)a=r.wch;if(a>-1){t.width=nl(a);t.customWidth=1}else if(r.width!=null)t.width=r.width;if(r.hidden)t.hidden=true;return t}function Qu(e,r){if(!e)return;var t=[.7,.7,.75,.75,.3,.3];if(r=="xlml")t=[1,1,1,1,.5,.5];if(e.left==null)e.left=t[0];if(e.right==null)e.right=t[1];if(e.top==null)e.top=t[2];if(e.bottom==null)e.bottom=t[3];if(e.header==null)e.header=t[4];if(e.footer==null)e.footer=t[5]}function Ju(e,r,t){var a=t.revssf[r.z!=null?r.z:"General"];var n=60,i=e.length;if(a==null&&t.ssf){for(;n<392;++n)if(t.ssf[n]==null){F.load(r.z,n);t.ssf[n]=r.z;t.revssf[r.z]=a=n;break}}for(n=0;n!=i;++n)if(e[n].numFmtId===a)return n;e[i]={numFmtId:a,fontId:0,fillId:0,borderId:0,xfId:0,applyNumberFormat:1};return i}function Zu(e,r,t,a,n,i){if(e.t==="z")return;if(e.t==="d"&&typeof e.v==="string")e.v=ie(e.v);try{if(a.cellNF)e.z=F._table[r]}catch(s){if(a.WTF)throw s}if(!a||a.cellText!==false)try{if(F._table[r]==null)F.load(P[r]||"General",r);if(e.t==="e")e.w=e.w||jt[e.v];else if(r===0){if(e.t==="n"){if((e.v|0)===e.v)e.w=F._general_int(e.v);else e.w=F._general_num(e.v)}else if(e.t==="d"){var f=ee(e.v);if((f|0)===f)e.w=F._general_int(f);else e.w=F._general_num(f)}else if(e.v===undefined)return"";else e.w=F._general(e.v,ju)}else if(e.t==="d")e.w=F.format(r,ee(e.v),ju);else e.w=F.format(r,e.v,ju)}catch(s){if(a.WTF)throw s}if(!a.cellStyles)return;if(t!=null)try{e.s=i.Fills[t];if(e.s.fgColor&&e.s.fgColor.theme&&!e.s.fgColor.rgb){e.s.fgColor.rgb=Jf(n.themeElements.clrScheme[e.s.fgColor.theme].rgb,e.s.fgColor.tint||0);if(a.WTF)e.s.fgColor.raw_rgb=n.themeElements.clrScheme[e.s.fgColor.theme].rgb}if(e.s.bgColor&&e.s.bgColor.theme){e.s.bgColor.rgb=Jf(n.themeElements.clrScheme[e.s.bgColor.theme].rgb,e.s.bgColor.tint||0);if(a.WTF)e.s.bgColor.raw_rgb=n.themeElements.clrScheme[e.s.bgColor.theme].rgb}}catch(s){if(a.WTF&&i.Fills)throw s}}function qu(e,r,t){if(e&&e["!ref"]){var a=vt(e["!ref"]);if(a.e.c<a.s.c||a.e.r<a.s.r)throw new Error("Bad range ("+t+"): "+e["!ref"])}}function eh(e,r){var t=vt(r);if(t.s.r<=t.e.r&&t.s.c<=t.e.c&&t.s.r>=0&&t.s.c>=0)e["!ref"]=dt(t)}var rh=/<(?:\w:)?mergeCell ref="[A-Z0-9:]+"\s*[\/]?>/g;var th=/<(?:\w+:)?sheetData>([\s\S]*)<\/(?:\w+:)?sheetData>/;var ah=/<(?:\w:)?hyperlink [^>]*>/gm;var nh=/"(\w*:\w*)"/;var ih=/<(?:\w:)?col\b[^>]*[\/]?>/g;var sh=/<(?:\w:)?autoFilter[^>]*([\/]|>([\s\S]*)<\/(?:\w:)?autoFilter)>/g;var fh=/<(?:\w:)?pageMargins[^>]*\/>/g;var lh=/<(?:\w:)?sheetPr(?:[^>a-z][^>]*)?\/>/;var oh=/<(?:\w:)?sheetViews[^>]*(?:[\/]|>([\s\S]*)<\/(?:\w:)?sheetViews)>/;function ch(e,r,t,a,n,i,s){if(!e)return e;if(p!=null&&r.dense==null)r.dense=p;var f=r.dense?[]:{};var l={s:{r:2e6,c:2e6},e:{r:0,c:0}};var o="",c="";var u=e.match(th);if(u){o=e.slice(0,u.index);c=e.slice(u.index+u[0].length)}else o=c=e;var h=o.match(lh);if(h)hh(h[0],f,n,t);var d=(o.match(/<(?:\w*:)?dimension/)||{index:-1}).index;if(d>0){var v=o.slice(d,d+50).match(nh);if(v)eh(f,v[1])}var m=o.match(oh);if(m&&m[1])wh(m[1],n);var b=[];if(r.cellStyles){var g=o.match(ih);if(g)bh(b,g)}if(u)Th(u[1],f,r,l,i,s);var E=c.match(sh);if(E)f["!autofilter"]=Eh(E[0]);var S=[];var k=c.match(rh);if(k)for(d=0;d!=k.length;++d)S[d]=vt(k[d].slice(k[d].indexOf('"')+1));var w=c.match(ah);if(w)vh(f,w,a);var C=c.match(fh);if(C)f["!margins"]=ph(_e(C[0]));if(!f["!ref"]&&l.e.c>=l.s.c&&l.e.r>=l.s.r)f["!ref"]=dt(l);if(r.sheetRows>0&&f["!ref"]){var B=vt(f["!ref"]);if(r.sheetRows<=+B.e.r){B.e.r=r.sheetRows-1;if(B.e.r>l.e.r)B.e.r=l.e.r;if(B.e.r<B.s.r)B.s.r=B.e.r;if(B.e.c>l.e.c)B.e.c=l.e.c;if(B.e.c<B.s.c)B.s.c=B.e.c;f["!fullref"]=f["!ref"];f["!ref"]=dt(B)}}if(b.length>0)f["!cols"]=b;if(S.length>0)f["!merges"]=S;return f}function uh(e){if(e.length===0)return"";var r='<mergeCells count="'+e.length+'">';for(var t=0;t!=e.length;++t)r+='<mergeCell ref="'+dt(e[t])+'"/>';return r+"</mergeCells>"}function hh(e,r,t,a){var n=_e(e);if(!t.Sheets[a])t.Sheets[a]={};if(n.codeName)t.Sheets[a].CodeName=n.codeName}function dh(e){var r={sheet:1};var t=["objects","scenarios","selectLockedCells","selectUnlockedCells"];var a=["formatColumns","formatRows","formatCells","insertColumns","insertRows","insertHyperlinks","deleteColumns","deleteRows","sort","autoFilter","pivotTables"];t.forEach(function(t){if(e[t]!=null&&e[t])r[t]="1"});a.forEach(function(t){if(e[t]!=null&&!e[t])r[t]="0"});if(e.password)r.password=Uf(e.password).toString(16).toUpperCase();return ar("sheetProtection",null,r)}function vh(e,r,t){var a=Array.isArray(e);for(var n=0;n!=r.length;++n){var i=_e(Xe(r[n]),true);if(!i.ref)return;var s=((t||{})["!id"]||[])[i.id];if(s){i.Target=s.Target;if(i.location)i.Target+="#"+i.location}else{i.Target="#"+i.location;s={Target:i.Target,TargetMode:"Internal"}}i.Rel=s;if(i.tooltip){i.Tooltip=i.tooltip;delete i.tooltip}var f=vt(i.ref);for(var l=f.s.r;l<=f.e.r;++l)for(var o=f.s.c;o<=f.e.c;++o){var c=ut({c:o,r:l});if(a){if(!e[l])e[l]=[];if(!e[l][o])e[l][o]={t:"z",v:undefined};e[l][o].l=i}else{if(!e[c])e[c]={t:"z",v:undefined};e[c].l=i}}}}function ph(e){var r={};["left","right","top","bottom","header","footer"].forEach(function(t){if(e[t])r[t]=parseFloat(e[t])});return r}function mh(e){Qu(e);return ar("pageMargins",null,e)}function bh(e,r){var t=false;for(var a=0;a!=r.length;++a){var n=_e(r[a],true);if(n.hidden)n.hidden=Ve(n.hidden);var i=parseInt(n.min,10)-1,s=parseInt(n.max,10)-1;delete n.min;delete n.max;n.width=+n.width;if(!t&&n.width){t=true;sl(n.width)}fl(n);while(i<=s)e[i++]=fe(n)}}function gh(e,r){var t=["<cols>"],a;for(var n=0;n!=r.length;++n){if(!(a=r[n]))continue;t[t.length]=ar("col",null,Yu(n,a))}t[t.length]="</cols>";return t.join("")}function Eh(e){var r={ref:(e.match(/ref="([^"]*)"/)||[])[1]};return r}function Sh(e,r,t,a){var n=typeof e.ref=="string"?e.ref:dt(e.ref);if(!t.Workbook)t.Workbook={};if(!t.Workbook.Names)t.Workbook.Names=[];var i=t.Workbook.Names;var s=ht(n);if(s.s.r==s.e.r){s.e.r=ht(r["!ref"]).e.r;n=dt(s)}for(var f=0;f<i.length;++f){var l=i[f];if(l.Name!="_xlnm._FilterDatabase")continue;if(l.Sheet!=a)continue;l.Ref="'"+t.SheetNames[a]+"'!"+n;break}if(f==i.length)i.push({Name:"_xlnm._FilterDatabase",Sheet:a,Ref:"'"+t.SheetNames[a]+"'!"+n});return ar("autoFilter",null,{ref:n})}var kh=/<(?:\w:)?sheetView(?:[^>a-z][^>]*)?\/>/;function wh(e,r){(e.match(kh)||[]).forEach(function(e){var t=_e(e);if(Ve(t.rightToLeft)){if(!r.Views)r.Views=[{}];if(!r.Views[0])r.Views[0]={};r.Views[0].RTL=true}})}function Ch(e,r,t,a){var n={workbookViewId:"0"};if((((a||{}).Workbook||{}).Views||[])[0])n.rightToLeft=a.Workbook.Views[0].RTL?"1":"0";return ar("sheetViews",ar("sheetView",null,n),{})}function Bh(e,r,t,a){if(e.v===undefined&&e.f===undefined||e.t==="z")return"";var n="";var i=e.t,s=e.v;switch(e.t){case"b":n=e.v?"1":"0";break;case"n":n=""+e.v;break;case"e":n=jt[e.v];break;case"d":if(a.cellDates)n=ie(e.v,-1).toISOString();else{e=fe(e);e.t="n";n=""+(e.v=ee(ie(e.v)))}if(typeof e.z==="undefined")e.z=F._table[14];break;default:n=e.v;break;}var f=rr("v",Pe(n)),l={r:r};var o=Ju(a.cellXfs,e,a);if(o!==0)l.s=o;switch(e.t){case"n":break;case"d":l.t="d";break;case"b":l.t="b";break;case"e":l.t="e";break;default:if(e.v==null){delete e.t;break}if(a.bookSST){f=rr("v",""+Ku(a.Strings,e.v,a.revStrings));l.t="s";break}l.t="str";break;}if(e.t!=i){e.t=i;e.v=s}if(e.f){var c=e.F&&e.F.slice(0,r.length)==r?{t:"array",ref:e.F}:null;f=ar("f",Pe(e.f),c)+(e.v!=null?f:"")}if(e.l)t["!links"].push([r,e.l]);if(e.c)t["!comments"].push([r,e.c]);return ar("c",f,l)}var Th=function(){var e=/<(?:\w+:)?c[ >]/,r=/<\/(?:\w+:)?row>/;var t=/r=["']([^"']*)["']/,a=/<(?:\w+:)?is>([\S\s]*?)<\/(?:\w+:)?is>/;var n=/ref=["']([^"']*)["']/;var i=Ke("v"),s=Ke("f");return function f(l,o,c,u,h,d){var v=0,p="",m=[],b=[],g=0,E=0,S=0,k="",w;var C,B=0,T=0;var x,I;var _=0,A=0;var R=Array.isArray(d.CellXf),y;var D=[];var O=[];var P=Array.isArray(o);var N=[],M={},L=false;for(var U=l.split(r),W=0,H=U.length;W!=H;++W){p=U[W].trim();var V=p.length;if(V===0)continue;for(v=0;v<V;++v)if(p.charCodeAt(v)===62)break;++v;C=_e(p.slice(0,v),true);B=C.r!=null?parseInt(C.r,10):B+1;T=-1;if(c.sheetRows&&c.sheetRows<B)continue;if(u.s.r>B-1)u.s.r=B-1;if(u.e.r<B-1)u.e.r=B-1;if(c&&c.cellStyles){M={};L=false;if(C.ht){L=true;M.hpt=parseFloat(C.ht);M.hpx=ul(M.hpt)}if(C.hidden=="1"){L=true;M.hidden=true}if(C.outlineLevel!=null){L=true;M.level=+C.outlineLevel}if(L)N[B-1]=M}m=p.slice(v).split(e);for(v=0;v!=m.length;++v){p=m[v].trim();if(p.length===0)continue;b=p.match(t);g=v;E=0;S=0;p="<c "+(p.slice(0,1)=="<"?">":"")+p;if(b!=null&&b.length===2){g=0;k=b[1];for(E=0;E!=k.length;++E){if((S=k.charCodeAt(E)-64)<1||S>26)break;g=26*g+S}--g;T=g}else++T;for(E=0;E!=p.length;++E)if(p.charCodeAt(E)===62)break;++E;C=_e(p.slice(0,E),true);if(!C.r)C.r=ut({r:B-1,c:T});k=p.slice(E);w={t:""};if((b=k.match(i))!=null&&b[1]!=="")w.v=Fe(b[1]);if(c.cellFormula){if((b=k.match(s))!=null&&b[1]!==""){w.f=Qo(Fe(Xe(b[1])));if(b[0].indexOf('t="array"')>-1){w.F=(k.match(n)||[])[1];if(w.F.indexOf(":")>-1)D.push([vt(w.F),w.F])}else if(b[0].indexOf('t="shared"')>-1){I=_e(b[0]);O[parseInt(I.si,10)]=[I,Qo(Fe(Xe(b[1])))]}}else if(b=k.match(/<f[^>]*\/>/)){I=_e(b[0]);if(O[I.si])w.f=Ko(O[I.si][1],O[I.si][0].ref,C.r)}var X=ct(C.r);for(E=0;E<D.length;++E)if(X.r>=D[E][0].s.r&&X.r<=D[E][0].e.r)if(X.c>=D[E][0].s.c&&X.c<=D[E][0].e.c)w.F=D[E][1]}if(C.t==null&&w.v===undefined){if(w.f||w.F){w.v=0;w.t="n"}else if(!c.sheetStubs)continue;else w.t="z"}else w.t=C.t||"n";if(u.s.c>T)u.s.c=T;if(u.e.c<T)u.e.c=T;switch(w.t){case"n":if(w.v==""||w.v==null){if(!c.sheetStubs)continue;w.t="z"}else w.v=parseFloat(w.v);break;case"s":if(typeof w.v=="undefined"){if(!c.sheetStubs)continue;w.t="z"}else{x=zu[parseInt(w.v,10)];w.v=x.t;w.r=x.r;if(c.cellHTML)w.h=x.h}break;case"str":w.t="s";w.v=w.v!=null?Xe(w.v):"";if(c.cellHTML)w.h=Le(w.v);break;case"inlineStr":b=k.match(a);w.t="s";if(b!=null&&(x=uf(b[1])))w.v=x.t;else w.v="";break;case"b":w.v=Ve(w.v);break;case"d":if(c.cellDates)w.v=ie(w.v,1);else{w.v=ee(ie(w.v,1));w.t="n"}break;case"e":if(!c||c.cellText!==false)w.w=w.v;w.v=$t[w.v];break;}_=A=0;if(R&&C.s!==undefined){y=d.CellXf[C.s];if(y!=null){if(y.numFmtId!=null)_=y.numFmtId;if(c.cellStyles){if(y.fillId!=null)A=y.fillId}}}Zu(w,_,A,c,h,d);if(c.cellDates&&R&&w.t=="n"&&F.is_date(F._table[_])){w.t="d";w.v=re(w.v)}if(P){var G=ct(C.r);if(!o[G.r])o[G.r]=[];o[G.r][G.c]=w}else o[C.r]=w}}if(N.length>0)o["!rows"]=N}}();function xh(e,r,t,a){var n=[],i=[],s=vt(e["!ref"]),f="",l,o="",c=[],u=0,h=0,d=e["!rows"];var v=Array.isArray(e);var p={r:o},m,b=-1;for(h=s.s.c;h<=s.e.c;++h)c[h]=st(h);for(u=s.s.r;u<=s.e.r;++u){i=[];o=tt(u);for(h=s.s.c;h<=s.e.c;++h){l=c[h]+o;var g=v?(e[u]||[])[h]:e[l];if(g===undefined)continue;if((f=Bh(g,l,e,r,t,a))!=null)i.push(f)}if(i.length>0||d&&d[u]){p={r:o};if(d&&d[u]){m=d[u];if(m.hidden)p.hidden=1;b=-1;if(m.hpx)b=cl(m.hpx);else if(m.hpt)b=m.hpt;if(b>-1){p.ht=b;p.customHeight=1}if(m.level){p.outlineLevel=m.level}}n[n.length]=ar("row",i.join(""),p)}}if(d)for(;u<d.length;++u){if(d&&d[u]){p={r:u+1};m=d[u];if(m.hidden)p.hidden=1;b=-1;if(m.hpx)b=cl(m.hpx);else if(m.hpt)b=m.hpt;if(b>-1){p.ht=b;p.customHeight=1}if(m.level){p.outlineLevel=m.level}n[n.length]=ar("row","",p)}}return n.join("")}var Ih=ar("worksheet",null,{xmlns:sr.main[0],"xmlns:r":sr.r});function _h(e,r,t,a){var n=[Ce,Ih];var i=t.SheetNames[e],s=0,f="";var l=t.Sheets[i];if(l==null)l={};var o=l["!ref"]||"A1";var c=vt(o);if(c.e.c>16383||c.e.r>1048575){if(r.WTF)throw new Error("Range "+o+" exceeds format limit A1:XFD1048576");c.e.c=Math.min(c.e.c,16383);c.e.r=Math.min(c.e.c,1048575);o=dt(c)}if(!a)a={};l["!comments"]=[];l["!drawing"]=[];if(r.bookType!=="xlsx"&&t.vbaraw){var u=t.SheetNames[e];try{if(t.Workbook)u=t.Workbook.Sheets[e].CodeName||u}catch(h){}n[n.length]=ar("sheetPr",null,{codeName:Pe(u)})}n[n.length]=ar("dimension",null,{ref:o});n[n.length]=Ch(l,r,e,t);if(r.sheetFormat)n[n.length]=ar("sheetFormatPr",null,{defaultRowHeight:r.sheetFormat.defaultRowHeight||"16",baseColWidth:r.sheetFormat.baseColWidth||"10",outlineLevelRow:r.sheetFormat.outlineLevelRow||"7"});if(l["!cols"]!=null&&l["!cols"].length>0)n[n.length]=gh(l,l["!cols"]);n[s=n.length]="<sheetData/>";l["!links"]=[];if(l["!ref"]!=null){f=xh(l,r,e,t,a);if(f.length>0)n[n.length]=f}if(n.length>s+1){n[n.length]="</sheetData>";n[s]=n[s].replace("/>",">")}if(l["!protect"]!=null)n[n.length]=dh(l["!protect"]);if(l["!autofilter"]!=null)n[n.length]=Sh(l["!autofilter"],l,t,e);if(l["!merges"]!=null&&l["!merges"].length>0)n[n.length]=uh(l["!merges"]);var d=-1,v,p=-1;if(l["!links"].length>0){n[n.length]="<hyperlinks>";l["!links"].forEach(function(e){if(!e[1].Target)return;v={ref:e[0]};if(e[1].Target.charAt(0)!="#"){p=Na(a,-1,Pe(e[1].Target).replace(/#.*$/,""),ya.HLINK);v["r:id"]="rId"+p}if((d=e[1].Target.indexOf("#"))>-1)v.location=Pe(e[1].Target.slice(d+1));if(e[1].Tooltip)v.tooltip=Pe(e[1].Tooltip);n[n.length]=ar("hyperlink",null,v)});n[n.length]="</hyperlinks>"}delete l["!links"];if(l["!margins"]!=null)n[n.length]=mh(l["!margins"]);n[n.length]="";if(!r||r.ignoreEC||r.ignoreEC==void 0)n[n.length]=rr("ignoredErrors",ar("ignoredError",null,{numberStoredAsText:1,sqref:o}));if(l["!drawing"].length>0){p=Na(a,-1,"../drawings/drawing"+(e+1)+".xml",ya.DRAW);n[n.length]=ar("drawing",null,{"r:id":"rId"+p})}else delete l["!drawing"];if(l["!comments"].length>0){p=Na(a,-1,"../drawings/vmlDrawing"+(e+1)+".vml",ya.VML);n[n.length]=ar("legacyDrawing",null,{"r:id":"rId"+p});l["!legacy"]=p}if(n.length>2){n[n.length]="</worksheet>";n[1]=n[1].replace("/>",">")}return n.join("")}function Ah(e,r){var t={};var a=e.l+r;t.r=e._R(4);e.l+=4;var n=e._R(2);e.l+=1;var i=e._R(1);e.l=a;if(i&7)t.level=i&7;if(i&16)t.hidden=true;if(i&32)t.hpt=n/20;return t}function Rh(e,r,t){var a=zr(17+8*16);var n=(t["!rows"]||[])[e]||{};a._W(4,e);a._W(4,0);var i=320;if(n.hpx)i=cl(n.hpx)*20;else if(n.hpt)i=n.hpt*20;a._W(2,i);a._W(1,0);var s=0;if(n.level)s|=n.level;if(n.hidden)s|=16;if(n.hpx||n.hpt)s|=32;a._W(1,s);a._W(1,0);var f=0,l=a.l;a.l+=4;var o={r:e,c:0};for(var c=0;c<16;++c){if(r.s.c>c+1<<10||r.e.c<c<<10)continue;var u=-1,h=-1;for(var d=c<<10;d<c+1<<10;++d){o.c=d;var v=Array.isArray(t)?(t[o.r]||[])[o.c]:t[ut(o)];if(v){if(u<0)u=d;h=d}}if(u<0)continue;++f;a._W(4,u);a._W(4,h)}var p=a.l;a.l=l;a._W(4,f);a.l=p;return a.length>a.l?a.slice(0,a.l):a}function yh(e,r,t,a){var n=Rh(a,t,r);if(n.length>17||(r["!rows"]||[])[a])Kr(e,"BrtRowHdr",n)}var Fh=Vt;var Dh=Xt;function Oh(){}function Ph(e,r){var t={};e.l+=19;t.name=yt(e,r-19);return t}function Nh(e,r){if(r==null)r=zr(84+4*e.length);for(var t=0;t<3;++t)r._W(1,0);Yt({auto:1},r);r._W(-4,-1);r._W(-4,-1);Ft(e,r);return r.slice(0,r.l)}function Mh(e){var r=At(e);return[r]}function Lh(e,r,t){if(t==null)t=zr(8);return Rt(r,t)}function Uh(e){var r=At(e);var t=e._R(1);return[r,t,"b"]}function Wh(e,r,t){if(t==null)t=zr(9);Rt(r,t);t._W(1,e.v?1:0);return t}function Hh(e){var r=At(e);var t=e._R(1);return[r,t,"e"]}function Vh(e){var r=At(e);var t=e._R(4);return[r,t,"s"]}function Xh(e,r,t){if(t==null)t=zr(12);Rt(r,t);t._W(4,r.v);return t}function Gh(e){var r=At(e);var t=Gt(e);return[r,t,"n"]}function zh(e,r,t){if(t==null)t=zr(16);Rt(r,t);zt(e.v,t);return t}function jh(e){var r=At(e);var t=Lt(e);return[r,t,"n"]}function $h(e,r,t){if(t==null)t=zr(12);Rt(r,t);Ut(e.v,t);return t}function Kh(e){var r=At(e);var t=kt(e);return[r,t,"str"]}function Yh(e,r,t){if(t==null)t=zr(12+4*e.v.length);Rt(r,t);wt(e.v,t);return t.length>t.l?t.slice(0,t.l):t}function Qh(e,r,t){var a=e.l+r;var n=At(e);n.r=t["!row"];var i=e._R(1);var s=[n,i,"b"];if(t.cellFormula){e.l+=2;var f=Ou(e,a-e.l,t);s[3]=Tu(f,null,n,t.supbooks,t)}else e.l=a;return s}function Jh(e,r,t){var a=e.l+r;var n=At(e);n.r=t["!row"];var i=e._R(1);
+var s=[n,i,"e"];if(t.cellFormula){e.l+=2;var f=Ou(e,a-e.l,t);s[3]=Tu(f,null,n,t.supbooks,t)}else e.l=a;return s}function Zh(e,r,t){var a=e.l+r;var n=At(e);n.r=t["!row"];var i=Gt(e);var s=[n,i,"n"];if(t.cellFormula){e.l+=2;var f=Ou(e,a-e.l,t);s[3]=Tu(f,null,n,t.supbooks,t)}else e.l=a;return s}function qh(e,r,t){var a=e.l+r;var n=At(e);n.r=t["!row"];var i=kt(e);var s=[n,i,"str"];if(t.cellFormula){e.l+=2;var f=Ou(e,a-e.l,t);s[3]=Tu(f,null,n,t.supbooks,t)}else e.l=a;return s}var ed=Vt;var rd=Xt;function td(e,r){if(r==null)r=zr(4);r._W(4,e);return r}function ad(e,r){var t=e.l+r;var a=Vt(e,16);var n=Dt(e);var i=kt(e);var s=kt(e);var f=kt(e);e.l=t;var l={rfx:a,relId:n,loc:i,display:f};if(s)l.Tooltip=s;return l}function nd(e,r){var t=zr(50+4*(e[1].Target.length+(e[1].Tooltip||"").length));Xt({s:ct(e[0]),e:ct(e[0])},t);Mt("rId"+r,t);var a=e[1].Target.indexOf("#");var n=a==-1?"":e[1].Target.slice(a+1);wt(n||"",t);wt(e[1].Tooltip||"",t);wt("",t);return t.slice(0,t.l)}function id(e,r,t){var a=e.l+r;var n=Wt(e,16);var i=e._R(1);var s=[n];s[2]=i;if(t.cellFormula){var f=Du(e,a-e.l,t);s[1]=f}else e.l=a;return s}function sd(e,r,t){var a=e.l+r;var n=Vt(e,16);var i=[n];if(t.cellFormula){var s=Nu(e,a-e.l,t);i[1]=s;e.l=a}else e.l=a;return i}function fd(e,r,t){if(t==null)t=zr(18);var a=Yu(e,r);t._W(-4,e);t._W(-4,e);t._W(4,(a.width||10)*256);t._W(4,0);var n=0;if(r.hidden)n|=1;if(typeof a.width=="number")n|=2;t._W(1,n);t._W(1,0);return t}var ld=["left","right","top","bottom","header","footer"];function od(e){var r={};ld.forEach(function(t){r[t]=Gt(e,8)});return r}function cd(e,r){if(r==null)r=zr(6*8);Qu(e);ld.forEach(function(t){zt(e[t],r)});return r}function ud(e){var r=e._R(2);e.l+=28;return{RTL:r&32}}function hd(e,r,t){if(t==null)t=zr(30);var a=924;if((((r||{}).Views||[])[0]||{}).RTL)a|=32;t._W(2,a);t._W(4,0);t._W(4,0);t._W(4,0);t._W(1,0);t._W(1,0);t._W(2,0);t._W(2,100);t._W(2,0);t._W(2,0);t._W(2,0);t._W(4,0);return t}function dd(e){var r=zr(24);r._W(4,4);r._W(4,1);Xt(e,r);return r}function vd(e,r){if(r==null)r=zr(16*4+2);r._W(2,e.password?Uf(e.password):0);r._W(4,1);[["objects",false],["scenarios",false],["formatCells",true],["formatColumns",true],["formatRows",true],["insertColumns",true],["insertRows",true],["insertHyperlinks",true],["deleteColumns",true],["deleteRows",true],["selectLockedCells",false],["sort",true],["autoFilter",true],["pivotTables",true],["selectUnlockedCells",false]].forEach(function(t){if(t[1])r._W(4,e[t[0]]!=null&&!e[t[0]]?1:0);else r._W(4,e[t[0]]!=null&&e[t[0]]?0:1)});return r}function pd(e,r,t,a,n,i,s){if(!e)return e;var f=r||{};if(!a)a={"!id":{}};if(p!=null&&f.dense==null)f.dense=p;var l=f.dense?[]:{};var o;var c={s:{r:2e6,c:2e6},e:{r:0,c:0}};var u=false,h=false;var d,v,m,b,g,E,S,k,w;var C=[];f.biff=12;f["!row"]=0;var B=0,T=false;var x=[];var I={};var _=f.supbooks||[[]];_.sharedf=I;_.arrayf=x;_.SheetNames=n.SheetNames||n.Sheets.map(function(e){return e.name});if(!f.supbooks){f.supbooks=_;if(n.Names)for(var A=0;A<n.Names.length;++A)_[0][A+1]=n.Names[A]}var R=[],y=[];var D=false;jr(e,function P(e,r,p){if(h)return;switch(p){case 148:o=e;break;case 0:d=e;if(f.sheetRows&&f.sheetRows<=d.r)h=true;k=tt(b=d.r);f["!row"]=d.r;if(e.hidden||e.hpt||e.level!=null){if(e.hpt)e.hpx=ul(e.hpt);y[e.r]=e}break;case 2:;case 3:;case 4:;case 5:;case 6:;case 7:;case 8:;case 9:;case 10:;case 11:v={t:e[2]};switch(e[2]){case"n":v.v=e[1];break;case"s":S=zu[e[1]];v.v=S.t;v.r=S.r;break;case"b":v.v=e[1]?true:false;break;case"e":v.v=e[1];if(f.cellText!==false)v.w=jt[v.v];break;case"str":v.t="s";v.v=e[1];break;}if(m=s.CellXf[e[0].iStyleRef])Zu(v,m.numFmtId,null,f,i,s);g=e[0].c;if(f.dense){if(!l[b])l[b]=[];l[b][g]=v}else l[st(g)+k]=v;if(f.cellFormula){T=false;for(B=0;B<x.length;++B){var A=x[B];if(d.r>=A[0].s.r&&d.r<=A[0].e.r)if(g>=A[0].s.c&&g<=A[0].e.c){v.F=dt(A[0]);T=true}}if(!T&&e.length>3)v.f=e[3]}if(c.s.r>d.r)c.s.r=d.r;if(c.s.c>g)c.s.c=g;if(c.e.r<d.r)c.e.r=d.r;if(c.e.c<g)c.e.c=g;if(f.cellDates&&m&&v.t=="n"&&F.is_date(F._table[m.numFmtId])){var O=F.parse_date_code(v.v);if(O){v.t="d";v.v=new Date(O.y,O.m-1,O.d,O.H,O.M,O.S,O.u)}}break;case 1:if(!f.sheetStubs||u)break;v={t:"z",v:undefined};g=e[0].c;if(f.dense){if(!l[b])l[b]=[];l[b][g]=v}else l[st(g)+k]=v;if(c.s.r>d.r)c.s.r=d.r;if(c.s.c>g)c.s.c=g;if(c.e.r<d.r)c.e.r=d.r;if(c.e.c<g)c.e.c=g;break;case 176:C.push(e);break;case 494:var P=a["!id"][e.relId];if(P){e.Target=P.Target;if(e.loc)e.Target+="#"+e.loc;e.Rel=P}else if(e.relId==""){e.Target="#"+e.loc}for(b=e.rfx.s.r;b<=e.rfx.e.r;++b)for(g=e.rfx.s.c;g<=e.rfx.e.c;++g){if(f.dense){if(!l[b])l[b]=[];if(!l[b][g])l[b][g]={t:"z",v:undefined};l[b][g].l=e}else{E=ut({c:g,r:b});if(!l[E])l[E]={t:"z",v:undefined};l[E].l=e}}break;case 426:if(!f.cellFormula)break;x.push(e);w=f.dense?l[b][g]:l[st(g)+k];w.f=Tu(e[1],c,{r:d.r,c:g},_,f);w.F=dt(e[0]);break;case 427:if(!f.cellFormula)break;I[ut(e[0].s)]=e[1];w=f.dense?l[b][g]:l[st(g)+k];w.f=Tu(e[1],c,{r:d.r,c:g},_,f);break;case 60:if(!f.cellStyles)break;while(e.e>=e.s){R[e.e--]={width:e.w/256,hidden:!!(e.flags&1)};if(!D){D=true;sl(e.w/256)}fl(R[e.e+1])}break;case 161:l["!autofilter"]={ref:dt(e)};break;case 476:l["!margins"]=e;break;case 147:if(!n.Sheets[t])n.Sheets[t]={};if(e.name)n.Sheets[t].CodeName=e.name;break;case 137:if(!n.Views)n.Views=[{}];if(!n.Views[0])n.Views[0]={};if(e.RTL)n.Views[0].RTL=true;break;case 485:break;case 175:;case 644:;case 625:;case 562:;case 396:;case 1112:;case 1146:;case 471:;case 1050:;case 649:;case 1105:;case 49:;case 589:;case 607:;case 564:;case 1055:;case 168:;case 174:;case 1180:;case 499:;case 64:;case 1053:;case 550:;case 171:;case 167:;case 1177:;case 169:;case 1181:;case 551:;case 552:;case 661:;case 639:;case 478:;case 151:;case 537:;case 477:;case 536:;case 1103:;case 680:;case 1104:;case 1024:;case 152:;case 663:;case 535:;case 678:;case 504:;case 1043:;case 428:;case 170:;case 3072:;case 50:;case 2070:;case 1045:break;case 35:u=true;break;case 36:u=false;break;case 37:break;case 38:break;default:if((r||"").indexOf("Begin")>0){}else if((r||"").indexOf("End")>0){}else if(!u||f.WTF)throw new Error("Unexpected record "+p+" "+r);}},f);delete f.supbooks;delete f["!row"];if(!l["!ref"]&&(c.s.r<2e6||o&&(o.e.r>0||o.e.c>0||o.s.r>0||o.s.c>0)))l["!ref"]=dt(o||c);if(f.sheetRows&&l["!ref"]){var O=vt(l["!ref"]);if(f.sheetRows<=+O.e.r){O.e.r=f.sheetRows-1;if(O.e.r>c.e.r)O.e.r=c.e.r;if(O.e.r<O.s.r)O.s.r=O.e.r;if(O.e.c>c.e.c)O.e.c=c.e.c;if(O.e.c<O.s.c)O.s.c=O.e.c;l["!fullref"]=l["!ref"];l["!ref"]=dt(O)}}if(C.length>0)l["!merges"]=C;if(R.length>0)l["!cols"]=R;if(y.length>0)l["!rows"]=y;return l}function md(e,r,t,a,n,i){if(r.v===undefined)return"";var s="";switch(r.t){case"b":s=r.v?"1":"0";break;case"d":r=fe(r);r.z=r.z||F._table[14];r.v=ee(ie(r.v));r.t="n";break;case"n":;case"e":s=""+r.v;break;default:s=r.v;break;}var f={r:t,c:a};f.s=Ju(n.cellXfs,r,n);if(r.l)i["!links"].push([ut(f),r.l]);if(r.c)i["!comments"].push([ut(f),r.c]);switch(r.t){case"s":;case"str":if(n.bookSST){s=Ku(n.Strings,r.v,n.revStrings);f.t="s";f.v=s;Kr(e,"BrtCellIsst",Xh(r,f))}else{f.t="str";Kr(e,"BrtCellSt",Yh(r,f))}return;case"n":if(r.v==(r.v|0)&&r.v>-1e3&&r.v<1e3)Kr(e,"BrtCellRk",$h(r,f));else Kr(e,"BrtCellReal",zh(r,f));return;case"b":f.t="b";Kr(e,"BrtCellBool",Wh(r,f));return;case"e":f.t="e";break;}Kr(e,"BrtCellBlank",Lh(r,f))}function bd(e,r,t,a){var n=vt(r["!ref"]||"A1"),i,s="",f=[];Kr(e,"BrtBeginSheetData");var l=Array.isArray(r);var o=n.e.r;if(r["!rows"])o=Math.max(n.e.r,r["!rows"].length-1);for(var c=n.s.r;c<=o;++c){s=tt(c);yh(e,r,n,c);if(c<=n.e.r)for(var u=n.s.c;u<=n.e.c;++u){if(c===n.s.r)f[u]=st(u);i=f[u]+s;var h=l?(r[c]||[])[u]:r[i];if(!h)continue;md(e,h,c,u,a,r)}}Kr(e,"BrtEndSheetData")}function gd(e,r){if(!r||!r["!merges"])return;Kr(e,"BrtBeginMergeCells",td(r["!merges"].length));r["!merges"].forEach(function(r){Kr(e,"BrtMergeCell",rd(r))});Kr(e,"BrtEndMergeCells")}function Ed(e,r){if(!r||!r["!cols"])return;Kr(e,"BrtBeginColInfos");r["!cols"].forEach(function(r,t){if(r)Kr(e,"BrtColInfo",fd(t,r))});Kr(e,"BrtEndColInfos")}function Sd(e,r){if(!r||!r["!ref"])return;Kr(e,"BrtBeginCellIgnoreECs");Kr(e,"BrtCellIgnoreEC",dd(vt(r["!ref"])));Kr(e,"BrtEndCellIgnoreECs")}function kd(e,r,t){r["!links"].forEach(function(r){if(!r[1].Target)return;var a=Na(t,-1,r[1].Target.replace(/#.*$/,""),ya.HLINK);Kr(e,"BrtHLink",nd(r,a))});delete r["!links"]}function wd(e,r,t,a){if(r["!comments"].length>0){var n=Na(a,-1,"../drawings/vmlDrawing"+(t+1)+".vml",ya.VML);Kr(e,"BrtLegacyDrawing",Mt("rId"+n));r["!legacy"]=n}}function Cd(e,r){if(!r["!autofilter"])return;Kr(e,"BrtBeginAFilter",Xt(vt(r["!autofilter"].ref)));Kr(e,"BrtEndAFilter")}function Bd(e,r,t){Kr(e,"BrtBeginWsViews");{Kr(e,"BrtBeginWsView",hd(r,t));Kr(e,"BrtEndWsView")}Kr(e,"BrtEndWsViews")}function Td(){}function xd(e,r){if(!r["!protect"])return;Kr(e,"BrtSheetProtection",vd(r["!protect"]))}function Id(e,r,t,a){var n=$r();var i=t.SheetNames[e],s=t.Sheets[i]||{};var f=i;try{if(t&&t.Workbook)f=t.Workbook.Sheets[e].CodeName||f}catch(l){}var o=vt(s["!ref"]||"A1");if(o.e.c>16383||o.e.r>1048575){if(r.WTF)throw new Error("Range "+(s["!ref"]||"A1")+" exceeds format limit A1:XFD1048576");o.e.c=Math.min(o.e.c,16383);o.e.r=Math.min(o.e.c,1048575)}s["!links"]=[];s["!comments"]=[];Kr(n,"BrtBeginSheet");if(t.vbaraw)Kr(n,"BrtWsProp",Nh(f));Kr(n,"BrtWsDim",Dh(o));Bd(n,s,t.Workbook);Td(n,s);Ed(n,s,e,r,t);bd(n,s,e,r,t);xd(n,s);Cd(n,s);gd(n,s);kd(n,s,a);if(s["!margins"])Kr(n,"BrtMargins",cd(s["!margins"]));if(!r||r.ignoreEC||r.ignoreEC==void 0)Sd(n,s);wd(n,s,e,a);Kr(n,"BrtEndSheet");return n.end()}function _d(e){var r=[];(e.match(/<c:pt idx="(\d*)">(.*?)<\/c:pt>/gm)||[]).forEach(function(e){var t=e.match(/<c:pt idx="(\d*?)"><c:v>(.*)<\/c:v><\/c:pt>/);if(!t)return;r[+t[1]]=+t[2]});var t=Fe((e.match(/<c:formatCode>([\s\S]*?)<\/c:formatCode>/)||["","General"])[1]);return[r,t]}function Ad(e,r,t,a,n,i){var s=i||{"!type":"chart"};if(!e)return i;var f=0,l=0,o="A";var c={s:{r:2e6,c:2e6},e:{r:0,c:0}};(e.match(/<c:numCache>[\s\S]*?<\/c:numCache>/gm)||[]).forEach(function(e){var r=_d(e);c.s.r=c.s.c=0;c.e.c=f;o=st(f);r[0].forEach(function(e,t){s[o+tt(t)]={t:"n",v:e,z:r[1]};l=t});if(c.e.r<l)c.e.r=l;++f});if(f>0)s["!ref"]=dt(c);return s}ya.CS="http://schemas.openxmlformats.org/officeDocument/2006/relationships/chartsheet";var Rd=ar("chartsheet",null,{xmlns:sr.main[0],"xmlns:r":sr.r});function yd(e,r,t,a,n){if(!e)return e;if(!a)a={"!id":{}};var i={"!type":"chart","!chart":null,"!rel":""};var s;var f=e.match(lh);if(f)hh(f[0],i,n,t);if(s=e.match(/drawing r:id="(.*?)"/))i["!rel"]=s[1];if(a["!id"][i["!rel"]])i["!chart"]=a["!id"][i["!rel"]];return i}function Fd(e,r,t,a){var n=[Ce,Rd];n[n.length]=ar("drawing",null,{"r:id":"rId1"});Na(a,-1,"../drawings/drawing"+(e+1)+".xml",ya.DRAW);if(n.length>2){n[n.length]="</chartsheet>";n[1]=n[1].replace("/>",">")}return n.join("")}function Dd(e,r){e.l+=10;var t=kt(e,r-10);return{name:t}}function Od(e,r,t,a,n){if(!e)return e;if(!a)a={"!id":{}};var i={"!type":"chart","!chart":null,"!rel":""};var s=[];var f=false;jr(e,function l(e,a,o){switch(o){case 550:i["!rel"]=e;break;case 651:if(!n.Sheets[t])n.Sheets[t]={};if(e.name)n.Sheets[t].CodeName=e.name;break;case 562:;case 652:;case 669:;case 679:;case 551:;case 552:;case 476:;case 3072:break;case 35:f=true;break;case 36:f=false;break;case 37:s.push(a);break;case 38:s.pop();break;default:if((a||"").indexOf("Begin")>0)s.push(a);else if((a||"").indexOf("End")>0)s.pop();else if(!f||r.WTF)throw new Error("Unexpected record "+o+" "+a);}},r);if(a["!id"][i["!rel"]])i["!chart"]=a["!id"][i["!rel"]];return i}function Pd(){var e=$r();Kr(e,"BrtBeginSheet");Kr(e,"BrtEndSheet");return e.end()}var Nd=[["allowRefreshQuery",false,"bool"],["autoCompressPictures",true,"bool"],["backupFile",false,"bool"],["checkCompatibility",false,"bool"],["CodeName",""],["date1904",false,"bool"],["defaultThemeVersion",0,"int"],["filterPrivacy",false,"bool"],["hidePivotFieldList",false,"bool"],["promptedSolutions",false,"bool"],["publishItems",false,"bool"],["refreshAllConnections",false,"bool"],["saveExternalLinkValues",true,"bool"],["showBorderUnselectedTables",true,"bool"],["showInkAnnotation",true,"bool"],["showObjects","all"],["showPivotChartFilter",false,"bool"],["updateLinks","userSet"]];var Md=[["activeTab",0,"int"],["autoFilterDateGrouping",true,"bool"],["firstSheet",0,"int"],["minimized",false,"bool"],["showHorizontalScroll",true,"bool"],["showSheetTabs",true,"bool"],["showVerticalScroll",true,"bool"],["tabRatio",600,"int"],["visibility","visible"]];var Ld=[];var Ud=[["calcCompleted","true"],["calcMode","auto"],["calcOnSave","true"],["concurrentCalc","true"],["fullCalcOnLoad","false"],["fullPrecision","true"],["iterate","false"],["iterateCount","100"],["iterateDelta","0.001"],["refMode","A1"]];function Wd(e,r){for(var t=0;t!=e.length;++t){var a=e[t];for(var n=0;n!=r.length;++n){var i=r[n];if(a[i[0]]==null)a[i[0]]=i[1];else switch(i[2]){case"bool":if(typeof a[i[0]]=="string")a[i[0]]=Ve(a[i[0]]);break;case"int":if(typeof a[i[0]]=="string")a[i[0]]=parseInt(a[i[0]],10);break;}}}}function Hd(e,r){for(var t=0;t!=r.length;++t){var a=r[t];if(e[a[0]]==null)e[a[0]]=a[1];else switch(a[2]){case"bool":if(typeof e[a[0]]=="string")e[a[0]]=Ve(e[a[0]]);break;case"int":if(typeof e[a[0]]=="string")e[a[0]]=parseInt(e[a[0]],10);break;}}}function Vd(e){Hd(e.WBProps,Nd);Hd(e.CalcPr,Ud);Wd(e.WBView,Md);Wd(e.Sheets,Ld);ju.date1904=Ve(e.WBProps.date1904)}function Xd(e){if(!e.Workbook)return"false";if(!e.Workbook.WBProps)return"false";return Ve(e.Workbook.WBProps.date1904)?"true":"false"}var Gd="][*?/\\".split("");function zd(e,r){if(e.length>31){if(r)return false;throw new Error("Sheet names cannot exceed 31 chars")}var t=true;Gd.forEach(function(a){if(e.indexOf(a)==-1)return;if(!r)throw new Error("Sheet name cannot contain : \\ / ? * [ ]");t=false});return t}function jd(e,r,t){e.forEach(function(a,n){zd(a);for(var i=0;i<n;++i)if(a==e[i])throw new Error("Duplicate Sheet Name: "+a);if(t){var s=r&&r[n]&&r[n].CodeName||a;if(s.charCodeAt(0)==95&&s.length>22)throw new Error("Bad Code Name: Worksheet"+s)}})}function $d(e){if(!e||!e.SheetNames||!e.Sheets)throw new Error("Invalid Workbook");if(!e.SheetNames.length)throw new Error("Workbook is empty");var r=e.Workbook&&e.Workbook.Sheets||[];jd(e.SheetNames,r,!!e.vbaraw);for(var t=0;t<e.SheetNames.length;++t)qu(e.Sheets[e.SheetNames[t]],e.SheetNames[t],t)}var Kd=/<\w+:workbook/;function Yd(e,r){if(!e)throw new Error("Could not find file");var t={AppVersion:{},WBProps:{},WBView:[],Sheets:[],CalcPr:{},Names:[],xmlns:""};var a=false,n="xmlns";var i={},s=0;e.replace(Te,function f(l,o){var c=_e(l);switch(Ae(c[0])){case"<?xml":break;case"<workbook":if(l.match(Kd))n="xmlns"+l.match(/<(\w+):/)[1];t.xmlns=c[n];break;case"</workbook>":break;case"<fileVersion":delete c[0];t.AppVersion=c;break;case"<fileVersion/>":;case"</fileVersion>":break;case"<fileSharing":;case"<fileSharing/>":break;case"<workbookPr":;case"<workbookPr/>":Nd.forEach(function(e){if(c[e[0]]==null)return;switch(e[2]){case"bool":t.WBProps[e[0]]=Ve(c[e[0]]);break;case"int":t.WBProps[e[0]]=parseInt(c[e[0]],10);break;default:t.WBProps[e[0]]=c[e[0]];}});if(c.codeName)t.WBProps.CodeName=c.codeName;break;case"</workbookPr>":break;case"<workbookProtection":break;case"<workbookProtection/>":break;case"<bookViews":;case"<bookViews>":;case"</bookViews>":break;case"<workbookView":;case"<workbookView/>":delete c[0];t.WBView.push(c);break;case"</workbookView>":break;case"<sheets":;case"<sheets>":;case"</sheets>":break;case"<sheet":switch(c.state){case"hidden":c.Hidden=1;break;case"veryHidden":c.Hidden=2;break;default:c.Hidden=0;}delete c.state;c.name=Fe(Xe(c.name));delete c[0];t.Sheets.push(c);break;case"</sheet>":break;case"<functionGroups":;case"<functionGroups/>":break;case"<functionGroup":break;case"<externalReferences":;case"</externalReferences>":;case"<externalReferences>":break;case"<externalReference":break;case"<definedNames/>":break;case"<definedNames>":;case"<definedNames":a=true;break;case"</definedNames>":a=false;break;case"<definedName":{i={};i.Name=Xe(c.name);if(c.comment)i.Comment=c.comment;if(c.localSheetId)i.Sheet=+c.localSheetId;if(Ve(c.hidden||"0"))i.Hidden=true;s=o+l.length}break;case"</definedName>":{i.Ref=Fe(Xe(e.slice(s,o)));t.Names.push(i)}break;case"<definedName/>":break;case"<calcPr":delete c[0];t.CalcPr=c;break;case"<calcPr/>":delete c[0];t.CalcPr=c;break;case"</calcPr>":break;case"<oleSize":break;case"<customWorkbookViews>":;case"</customWorkbookViews>":;case"<customWorkbookViews":break;case"<customWorkbookView":;case"</customWorkbookView>":break;case"<pivotCaches>":;case"</pivotCaches>":;case"<pivotCaches":break;case"<pivotCache":break;case"<smartTagPr":;case"<smartTagPr/>":break;case"<smartTagTypes":;case"<smartTagTypes>":;case"</smartTagTypes>":break;case"<smartTagType":break;case"<webPublishing":;case"<webPublishing/>":break;case"<fileRecoveryPr":;case"<fileRecoveryPr/>":break;case"<webPublishObjects>":;case"<webPublishObjects":;case"</webPublishObjects>":break;case"<webPublishObject":break;case"<extLst":;case"<extLst>":;case"</extLst>":;case"<extLst/>":break;case"<ext":a=true;break;case"</ext>":a=false;break;case"<ArchID":break;case"<AlternateContent":;case"<AlternateContent>":a=true;break;case"</AlternateContent>":a=false;break;case"<revisionPtr":break;default:if(!a&&r.WTF)throw new Error("unrecognized "+c[0]+" in workbook");}return l});if(sr.main.indexOf(t.xmlns)===-1)throw new Error("Unknown Namespace: "+t.xmlns);Vd(t);return t}var Qd=ar("workbook",null,{xmlns:sr.main[0],"xmlns:r":sr.r});function Jd(e){var r=[Ce];r[r.length]=Qd;var t=e.Workbook&&(e.Workbook.Names||[]).length>0;var a={codeName:"ThisWorkbook"};if(e.Workbook&&e.Workbook.WBProps){Nd.forEach(function(r){if(e.Workbook.WBProps[r[0]]==null)return;if(e.Workbook.WBProps[r[0]]==r[1])return;a[r[0]]=e.Workbook.WBProps[r[0]]});if(e.Workbook.WBProps.CodeName){a.codeName=e.Workbook.WBProps.CodeName;delete a.CodeName}}r[r.length]=ar("workbookPr",null,a);var n=e.Workbook&&e.Workbook.Sheets||[];var i=0;r[r.length]="<sheets>";for(i=0;i!=e.SheetNames.length;++i){var s={name:Pe(e.SheetNames[i].slice(0,31))};s.sheetId=""+(i+1);s["r:id"]="rId"+(i+1);if(n[i])switch(n[i].Hidden){case 1:s.state="hidden";break;case 2:s.state="veryHidden";break;}r[r.length]=ar("sheet",null,s)}r[r.length]="</sheets>";if(t){r[r.length]="<definedNames>";if(e.Workbook&&e.Workbook.Names)e.Workbook.Names.forEach(function(e){var t={name:e.Name};if(e.Comment)t.comment=e.Comment;if(e.Sheet!=null)t.localSheetId=""+e.Sheet;if(e.Hidden)t.hidden="1";if(!e.Ref)return;r[r.length]=ar("definedName",String(e.Ref).replace(/</g,"&lt;").replace(/>/g,"&gt;"),t)});r[r.length]="</definedNames>"}if(r.length>2){r[r.length]="</workbook>";r[1]=r[1].replace("/>",">")}return r.join("")}function Zd(e,r){var t={};t.Hidden=e._R(4);t.iTabID=e._R(4);t.strRelID=Nt(e,r-8);t.name=kt(e);return t}function qd(e,r){if(!r)r=zr(127);r._W(4,e.Hidden);r._W(4,e.iTabID);Mt(e.strRelID,r);wt(e.name.slice(0,31),r);return r.length>r.l?r.slice(0,r.l):r}function ev(e,r){var t={};var a=e._R(4);t.defaultThemeVersion=e._R(4);var n=r>8?kt(e):"";if(n.length>0)t.CodeName=n;t.autoCompressPictures=!!(a&65536);t.backupFile=!!(a&64);t.checkCompatibility=!!(a&4096);t.date1904=!!(a&1);t.filterPrivacy=!!(a&8);t.hidePivotFieldList=!!(a&1024);t.promptedSolutions=!!(a&16);t.publishItems=!!(a&2048);t.refreshAllConnections=!!(a&262144);t.saveExternalLinkValues=!!(a&128);t.showBorderUnselectedTables=!!(a&4);t.showInkAnnotation=!!(a&32);t.showObjects=["all","placeholders","none"][a>>13&3];t.showPivotChartFilter=!!(a&32768);t.updateLinks=["userSet","never","always"][a>>8&3];return t}function rv(e,r){if(!r)r=zr(72);var t=0;if(e){if(e.filterPrivacy)t|=8}r._W(4,t);r._W(4,0);Ft(e&&e.CodeName||"ThisWorkbook",r);return r.slice(0,r.l)}function tv(e,r){var t={};e._R(4);t.ArchID=e._R(4);e.l+=r-8;return t}function av(e,r,t){var a=e.l+r;e.l+=4;e.l+=1;var n=e._R(4);var i=Pt(e);var s=Pu(e,0,t);var f=Dt(e);e.l=a;var l={Name:i,Ptg:s};if(n<268435455)l.Sheet=n;if(f)l.Comment=f;return l}function nv(e,r){var t={AppVersion:{},WBProps:{},WBView:[],Sheets:[],CalcPr:{},xmlns:""};var a=[];var n=false;if(!r)r={};r.biff=12;var i=[];var s=[[]];s.SheetNames=[];s.XTI=[];jr(e,function f(e,l,o){switch(o){case 156:s.SheetNames.push(e.name);t.Sheets.push(e);break;case 153:t.WBProps=e;break;case 39:if(e.Sheet!=null)r.SID=e.Sheet;e.Ref=Tu(e.Ptg,null,null,s,r);delete r.SID;delete e.Ptg;i.push(e);break;case 1036:break;case 357:;case 358:;case 355:;case 667:if(!s[0].length)s[0]=[o,e];else s.push([o,e]);s[s.length-1].XTI=[];break;case 362:if(s.length===0){s[0]=[];s[0].XTI=[]}s[s.length-1].XTI=s[s.length-1].XTI.concat(e);s.XTI=s.XTI.concat(e);break;case 361:break;case 3072:;case 3073:;case 2071:;case 534:;case 677:;case 158:;case 157:;case 610:;case 2050:;case 155:;case 548:;case 676:;case 128:;case 665:;case 2128:;case 2125:;case 549:;case 2053:;case 596:;case 2076:;case 2075:;case 2082:;case 397:;case 154:;case 1117:;case 553:;case 2091:break;case 35:a.push(l);n=true;break;case 36:a.pop();n=false;break;case 37:a.push(l);n=true;break;case 38:a.pop();n=false;break;case 16:break;default:if((l||"").indexOf("Begin")>0){}else if((l||"").indexOf("End")>0){}else if(!n||r.WTF&&a[a.length-1]!="BrtACBegin"&&a[a.length-1]!="BrtFRTBegin")throw new Error("Unexpected record "+o+" "+l);}},r);Vd(t);t.Names=i;t.supbooks=s;return t}function iv(e,r){Kr(e,"BrtBeginBundleShs");for(var t=0;t!=r.SheetNames.length;++t){var a=r.Workbook&&r.Workbook.Sheets&&r.Workbook.Sheets[t]&&r.Workbook.Sheets[t].Hidden||0;var n={Hidden:a,iTabID:t+1,strRelID:"rId"+(t+1),name:r.SheetNames[t]};Kr(e,"BrtBundleSh",qd(n))}Kr(e,"BrtEndBundleShs")}function sv(r,t){if(!t)t=zr(127);for(var a=0;a!=4;++a)t._W(4,0);wt("SheetJS",t);wt(e.version,t);wt(e.version,t);wt("7262",t);t.length=t.l;return t.length>t.l?t.slice(0,t.l):t}function fv(e,r){if(!r)r=zr(29);r._W(-4,0);r._W(-4,460);r._W(4,28800);r._W(4,17600);r._W(4,500);r._W(4,e);r._W(4,e);var t=120;r._W(1,t);return r.length>r.l?r.slice(0,r.l):r}function lv(e,r){if(!r.Workbook||!r.Workbook.Sheets)return;var t=r.Workbook.Sheets;var a=0,n=-1,i=-1;for(;a<t.length;++a){if(!t[a]||!t[a].Hidden&&n==-1)n=a;else if(t[a].Hidden==1&&i==-1)i=a}if(i>n)return;Kr(e,"BrtBeginBookViews");Kr(e,"BrtBookView",fv(n));Kr(e,"BrtEndBookViews")}function ov(e,r){var t=$r();Kr(t,"BrtBeginBook");Kr(t,"BrtFileVersion",sv());Kr(t,"BrtWbProp",rv(e.Workbook&&e.Workbook.WBProps||null));lv(t,e,r);iv(t,e,r);Kr(t,"BrtEndBook");return t.end()}function cv(e,r,t){if(r.slice(-4)===".bin")return nv(e,t);return Yd(e,t)}function uv(e,r,t,a,n,i,s,f){if(r.slice(-4)===".bin")return pd(e,a,t,n,i,s,f);return ch(e,a,t,n,i,s,f)}function hv(e,r,t,a,n,i,s,f){if(r.slice(-4)===".bin")return Od(e,a,t,n,i,s,f);return yd(e,a,t,n,i,s,f)}function dv(e,r,t,a,n,i,s,f){if(r.slice(-4)===".bin")return Vo(e,a,t,n,i,s,f);return Xo(e,a,t,n,i,s,f)}function vv(e,r,t,a,n,i,s,f){if(r.slice(-4)===".bin")return Wo(e,a,t,n,i,s,f);return Ho(e,a,t,n,i,s,f)}function pv(e,r,t,a){if(r.slice(-4)===".bin")return Wl(e,t,a);return wl(e,t,a)}function mv(e,r,t){return so(e,t)}function bv(e,r,t){if(r.slice(-4)===".bin")return Ef(e,t);return pf(e,t)}function gv(e,r,t){if(r.slice(-4)===".bin")return Oo(e,t);return Io(e,t)}function Ev(e,r,t){if(r.slice(-4)===".bin")return Eo(e,r,t);return bo(e,r,t)}function Sv(e,r,t){if(r.slice(-4)===".bin")return ko(e,r,t);return So(e,r,t)}function kv(e,r,t){return(r.slice(-4)===".bin"?ov:Jd)(e,t)}function wv(e,r,t,a,n){return(r.slice(-4)===".bin"?Id:_h)(e,t,a,n)}function Cv(e,r,t,a,n){return(r.slice(-4)===".bin"?Pd:Fd)(e,t,a,n)}function Bv(e,r,t){return(r.slice(-4)===".bin"?Jl:Bl)(e,t)}function Tv(e,r,t){return(r.slice(-4)===".bin"?wf:bf)(e,t)}function xv(e,r,t){return(r.slice(-4)===".bin"?Po:Ao)(e,t)}var Iv=/([\w:]+)=((?:")([^"]*)(?:")|(?:')([^']*)(?:'))/g;var _v=/([\w:]+)=((?:")(?:[^"]*)(?:")|(?:')(?:[^']*)(?:'))/;var Av=function(e){return String.fromCharCode(e)};function Rv(e,r){var t=e.split(/\s+/);var a=[];if(!r)a[0]=t[0];if(t.length===1)return a;var n=e.match(Iv),i,s,f,l;if(n)for(l=0;l!=n.length;++l){i=n[l].match(_v);if((s=i[1].indexOf(":"))===-1)a[i[1]]=i[2].slice(1,i[2].length-1);else{if(i[1].slice(0,6)==="xmlns:")f="xmlns"+i[1].slice(6);else f=i[1].slice(s+1);a[f]=i[2].slice(1,i[2].length-1)}}return a}function yv(e){var r=e.split(/\s+/);var t={};if(r.length===1)return t;var a=e.match(Iv),n,i,s,f;if(a)for(f=0;f!=a.length;++f){n=a[f].match(_v);if((i=n[1].indexOf(":"))===-1)t[n[1]]=n[2].slice(1,n[2].length-1);else{if(n[1].slice(0,6)==="xmlns:")s="xmlns"+n[1].slice(6);else s=n[1].slice(i+1);t[s]=n[2].slice(1,n[2].length-1)}}return t}function Fv(e,r){var t=O[e]||Fe(e);if(t==="General")return F._general(r);return F.format(t,r)}function Dv(e,r,t,a){var n=a;switch((t[0].match(/dt:dt="([\w.]+)"/)||["",""])[1]){case"boolean":n=Ve(a);break;case"i2":;case"int":n=parseInt(a,10);break;case"r4":;case"float":n=parseFloat(a);break;case"date":;case"dateTime.tz":n=ie(a);break;case"i8":;case"string":;case"fixed":;case"uuid":;case"bin.base64":break;default:throw new Error("bad custprop:"+t[0]);}e[Fe(r)]=n}function Ov(e,r,t){if(e.t==="z")return;if(!t||t.cellText!==false)try{if(e.t==="e"){e.w=e.w||jt[e.v]}else if(r==="General"){if(e.t==="n"){if((e.v|0)===e.v)e.w=F._general_int(e.v);else e.w=F._general_num(e.v)}else e.w=F._general(e.v)}else e.w=Fv(r||"General",e.v)}catch(a){if(t.WTF)throw a}try{var n=O[r]||r||"General";if(t.cellNF)e.z=n;if(t.cellDates&&e.t=="n"&&F.is_date(n)){var i=F.parse_date_code(e.v);if(i){e.t="d";e.v=new Date(i.y,i.m-1,i.d,i.H,i.M,i.S,i.u)}}}catch(a){if(t.WTF)throw a}}function Pv(e,r,t){if(t.cellStyles){if(r.Interior){var a=r.Interior;if(a.Pattern)a.patternType=hl[a.Pattern]||a.Pattern}}e[r.ID]=r}function Nv(e,r,t,a,n,i,s,f,l,o){var c="General",u=a.StyleID,h={};o=o||{};var d=[];var v=0;if(u===undefined&&f)u=f.StyleID;if(u===undefined&&s)u=s.StyleID;while(i[u]!==undefined){if(i[u].nf)c=i[u].nf;if(i[u].Interior)d.push(i[u].Interior);if(!i[u].Parent)break;u=i[u].Parent}switch(t.Type){case"Boolean":a.t="b";a.v=Ve(e);break;case"String":a.t="s";a.r=We(Fe(e));a.v=e.indexOf("<")>-1?Fe(r):a.r;break;case"DateTime":if(e.slice(-1)!="Z")e+="Z";a.v=(ie(e)-new Date(Date.UTC(1899,11,30)))/(24*60*60*1e3);if(a.v!==a.v)a.v=Fe(e);else if(a.v<60)a.v=a.v-1;if(!c||c=="General")c="yyyy-mm-dd";case"Number":if(a.v===undefined)a.v=+e;if(!a.t)a.t="n";break;case"Error":a.t="e";a.v=$t[e];if(o.cellText!==false)a.w=e;break;default:a.t="s";a.v=We(r||e);break;}Ov(a,c,o);if(o.cellFormula!==false){if(a.Formula){var p=Fe(a.Formula);if(p.charCodeAt(0)==61)p=p.slice(1);a.f=Go(p,n);delete a.Formula;if(a.ArrayRange=="RC")a.F=Go("RC:RC",n);else if(a.ArrayRange){a.F=Go(a.ArrayRange,n);l.push([vt(a.F),a.F])}}else{for(v=0;v<l.length;++v)if(n.r>=l[v][0].s.r&&n.r<=l[v][0].e.r)if(n.c>=l[v][0].s.c&&n.c<=l[v][0].e.c)a.F=l[v][1]}}if(o.cellStyles){d.forEach(function(e){if(!h.patternType&&e.patternType)h.patternType=e.patternType});a.s=h}if(a.StyleID!==undefined)a.ixfe=a.StyleID}function Mv(e){e.t=e.v||"";e.t=e.t.replace(/\r\n/g,"\n").replace(/\r/g,"\n");e.v=e.w=e.ixfe=undefined}function Lv(e){if(g&&Buffer.isBuffer(e))return e.toString("utf8");if(typeof e==="string")return e;if(typeof Uint8Array!=="undefined"&&e instanceof Uint8Array)return Xe(x(_(e)));throw new Error("Bad input format: expected Buffer or string")}var Uv=/<(\/?)([^\s?>!\/:]*:|)([^\s?>:\/]+)[^>]*>/gm;function Wv(e,r){var t=r||{};D(F);var a=d(Lv(e));if(t.type=="binary"||t.type=="array"||t.type=="base64"){if(typeof cptable!=="undefined")a=cptable.utils.decode(65001,c(a));else a=Xe(a)}var n=a.slice(0,1024).toLowerCase(),i=false;if(n.indexOf("<?xml")==-1)["html","table","head","meta","script","style","div"].forEach(function(e){if(n.indexOf("<"+e)>=0)i=true});if(i)return Fp.to_workbook(a,t);var s;var f=[],l;if(p!=null&&t.dense==null)t.dense=p;var o={},u=[],h=t.dense?[]:{},v="";var m={},b={},g={};var E=Rv('<Data ss:Type="String">'),S=0;var k=0,w=0;var C={s:{r:2e6,c:2e6},e:{r:0,c:0}};var B={},T={};var x="",I=0;var _=[];var A={},R={},y=0,P=[];var N=[],M={};var L=[],U,W=false;var H=[];var V=[],X={},G=0,z=0;var j={Sheets:[],WBProps:{date1904:false}},$={};Uv.lastIndex=0;a=a.replace(/<!--([\s\S]*?)-->/gm,"");while(s=Uv.exec(a))switch(s[3]){case"Data":if(f[f.length-1][1])break;if(s[1]==="/")Nv(a.slice(S,s.index),x,E,f[f.length-1][0]=="Comment"?M:b,{c:k,r:w},B,L[k],g,H,t);else{x="";E=Rv(s[0]);S=s.index+s[0].length}break;case"Cell":if(s[1]==="/"){if(N.length>0)b.c=N;if((!t.sheetRows||t.sheetRows>w)&&b.v!==undefined){if(t.dense){if(!h[w])h[w]=[];h[w][k]=b}else h[st(k)+tt(w)]=b}if(b.HRef){b.l={Target:b.HRef};if(b.HRefScreenTip)b.l.Tooltip=b.HRefScreenTip;delete b.HRef;delete b.HRefScreenTip}if(b.MergeAcross||b.MergeDown){G=k+(parseInt(b.MergeAcross,10)|0);z=w+(parseInt(b.MergeDown,10)|0);_.push({s:{c:k,r:w},e:{c:G,r:z}})}if(!t.sheetStubs){if(b.MergeAcross)k=G+1;else++k}else if(b.MergeAcross||b.MergeDown){for(var K=k;K<=G;++K){for(var Y=w;Y<=z;++Y){if(K>k||Y>w){if(t.dense){if(!h[Y])h[Y]=[];h[Y][K]={t:"z"}}else h[st(K)+tt(Y)]={t:"z"}}}}k=G+1}else++k}else{b=yv(s[0]);if(b.Index)k=+b.Index-1;if(k<C.s.c)C.s.c=k;if(k>C.e.c)C.e.c=k;if(s[0].slice(-2)==="/>")++k;N=[]}break;case"Row":if(s[1]==="/"||s[0].slice(-2)==="/>"){if(w<C.s.r)C.s.r=w;if(w>C.e.r)C.e.r=w;if(s[0].slice(-2)==="/>"){g=Rv(s[0]);if(g.Index)w=+g.Index-1}k=0;++w}else{g=Rv(s[0]);if(g.Index)w=+g.Index-1;X={};if(g.AutoFitHeight=="0"||g.Height){X.hpx=parseInt(g.Height,10);X.hpt=cl(X.hpx);V[w]=X}if(g.Hidden=="1"){X.hidden=true;V[w]=X}}break;case"Worksheet":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"));u.push(v);if(C.s.r<=C.e.r&&C.s.c<=C.e.c){h["!ref"]=dt(C);if(t.sheetRows&&t.sheetRows<=C.e.r){h["!fullref"]=h["!ref"];C.e.r=t.sheetRows-1;h["!ref"]=dt(C)}}if(_.length)h["!merges"]=_;if(L.length>0)h["!cols"]=L;if(V.length>0)h["!rows"]=V;o[v]=h}else{C={s:{r:2e6,c:2e6},e:{r:0,c:0}};w=k=0;f.push([s[3],false]);l=Rv(s[0]);v=Fe(l.Name);h=t.dense?[]:{};_=[];H=[];V=[];$={name:v,Hidden:0};j.Sheets.push($)}break;case"Table":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"))}else if(s[0].slice(-2)=="/>")break;else{m=Rv(s[0]);f.push([s[3],false]);L=[];W=false}break;case"Style":if(s[1]==="/")Pv(B,T,t);else T=Rv(s[0]);break;case"NumberFormat":T.nf=Fe(Rv(s[0]).Format||"General");if(O[T.nf])T.nf=O[T.nf];for(var Q=0;Q!=392;++Q)if(F._table[Q]==T.nf)break;if(Q==392)for(Q=57;Q!=392;++Q)if(F._table[Q]==null){F.load(T.nf,Q);break}break;case"Column":if(f[f.length-1][0]!=="Table")break;U=Rv(s[0]);if(U.Hidden){U.hidden=true;delete U.Hidden}if(U.Width)U.wpx=parseInt(U.Width,10);if(!W&&U.wpx>10){W=true;rl=Zf;for(var J=0;J<L.length;++J)if(L[J])fl(L[J])}if(W)fl(U);L[U.Index-1||L.length]=U;for(var Z=0;Z<+U.Span;++Z)L[L.length]=fe(U);break;case"NamedRange":if(!j.Names)j.Names=[];var q=_e(s[0]);var ee={Name:q.Name,Ref:Go(q.RefersTo.slice(1),{r:0,c:0})};if(j.Sheets.length>0)ee.Sheet=j.Sheets.length-1;j.Names.push(ee);break;case"NamedCell":break;case"B":break;case"I":break;case"U":break;case"S":break;case"Sub":break;case"Sup":break;case"Span":break;case"Border":break;case"Alignment":break;case"Borders":break;case"Font":if(s[0].slice(-2)==="/>")break;else if(s[1]==="/")x+=a.slice(I,s.index);else I=s.index+s[0].length;break;case"Interior":if(!t.cellStyles)break;T.Interior=Rv(s[0]);break;case"Protection":break;case"Author":;case"Title":;case"Description":;case"Created":;case"Keywords":;case"Subject":;case"Category":;case"Company":;case"LastAuthor":;case"LastSaved":;case"LastPrinted":;case"Version":;case"Revision":;case"TotalTime":;case"HyperlinkBase":;case"Manager":;case"ContentStatus":;case"Identifier":;case"Language":;case"AppName":if(s[0].slice(-2)==="/>")break;else if(s[1]==="/")on(A,s[3],a.slice(y,s.index));else y=s.index+s[0].length;
+break;case"Paragraphs":break;case"Styles":;case"Workbook":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"))}else f.push([s[3],false]);break;case"Comment":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"));Mv(M);N.push(M)}else{f.push([s[3],false]);l=Rv(s[0]);M={a:l.Author}}break;case"AutoFilter":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"))}else if(s[0].charAt(s[0].length-2)!=="/"){var re=Rv(s[0]);h["!autofilter"]={ref:Go(re.Range).replace(/\$/g,"")};f.push([s[3],true])}break;case"Name":break;case"ComponentOptions":;case"DocumentProperties":;case"CustomDocumentProperties":;case"OfficeDocumentSettings":;case"PivotTable":;case"PivotCache":;case"Names":;case"MapInfo":;case"PageBreaks":;case"QueryTable":;case"DataValidation":;case"Sorting":;case"Schema":;case"data":;case"ConditionalFormatting":;case"SmartTagType":;case"SmartTags":;case"ExcelWorkbook":;case"WorkbookOptions":;case"WorksheetOptions":if(s[1]==="/"){if((l=f.pop())[0]!==s[3])throw new Error("Bad state: "+l.join("|"))}else if(s[0].charAt(s[0].length-2)!=="/")f.push([s[3],true]);break;default:if(f.length==0&&s[3]=="document")return Up(a,t);if(f.length==0&&s[3]=="UOF")return Up(a,t);var te=true;switch(f[f.length-1][0]){case"OfficeDocumentSettings":switch(s[3]){case"AllowPNG":break;case"RemovePersonalInformation":break;case"DownloadComponents":break;case"LocationOfComponents":break;case"Colors":break;case"Color":break;case"Index":break;case"RGB":break;case"PixelsPerInch":break;case"TargetScreenSize":break;case"ReadOnlyRecommended":break;default:te=false;}break;case"ComponentOptions":switch(s[3]){case"Toolbar":break;case"HideOfficeLogo":break;case"SpreadsheetAutoFit":break;case"Label":break;case"Caption":break;case"MaxHeight":break;case"MaxWidth":break;case"NextSheetNumber":break;default:te=false;}break;case"ExcelWorkbook":switch(s[3]){case"Date1904":j.WBProps.date1904=true;break;case"WindowHeight":break;case"WindowWidth":break;case"WindowTopX":break;case"WindowTopY":break;case"TabRatio":break;case"ProtectStructure":break;case"ProtectWindows":break;case"ActiveSheet":break;case"DisplayInkNotes":break;case"FirstVisibleSheet":break;case"SupBook":break;case"SheetName":break;case"SheetIndex":break;case"SheetIndexFirst":break;case"SheetIndexLast":break;case"Dll":break;case"AcceptLabelsInFormulas":break;case"DoNotSaveLinkValues":break;case"Iteration":break;case"MaxIterations":break;case"MaxChange":break;case"Path":break;case"Xct":break;case"Count":break;case"SelectedSheets":break;case"Calculation":break;case"Uncalced":break;case"StartupPrompt":break;case"Crn":break;case"ExternName":break;case"Formula":break;case"ColFirst":break;case"ColLast":break;case"WantAdvise":break;case"Boolean":break;case"Error":break;case"Text":break;case"OLE":break;case"NoAutoRecover":break;case"PublishObjects":break;case"DoNotCalculateBeforeSave":break;case"Number":break;case"RefModeR1C1":break;case"EmbedSaveSmartTags":break;default:te=false;}break;case"WorkbookOptions":switch(s[3]){case"OWCVersion":break;case"Height":break;case"Width":break;default:te=false;}break;case"WorksheetOptions":switch(s[3]){case"Visible":if(s[0].slice(-2)==="/>"){}else if(s[1]==="/")switch(a.slice(y,s.index)){case"SheetHidden":$.Hidden=1;break;case"SheetVeryHidden":$.Hidden=2;break;}else y=s.index+s[0].length;break;case"Header":if(!h["!margins"])Qu(h["!margins"]={},"xlml");h["!margins"].header=_e(s[0]).Margin;break;case"Footer":if(!h["!margins"])Qu(h["!margins"]={},"xlml");h["!margins"].footer=_e(s[0]).Margin;break;case"PageMargins":var ae=_e(s[0]);if(!h["!margins"])Qu(h["!margins"]={},"xlml");if(ae.Top)h["!margins"].top=ae.Top;if(ae.Left)h["!margins"].left=ae.Left;if(ae.Right)h["!margins"].right=ae.Right;if(ae.Bottom)h["!margins"].bottom=ae.Bottom;break;case"DisplayRightToLeft":if(!j.Views)j.Views=[];if(!j.Views[0])j.Views[0]={};j.Views[0].RTL=true;break;case"Unsynced":break;case"Print":break;case"Panes":break;case"Scale":break;case"Pane":break;case"Number":break;case"Layout":break;case"PageSetup":break;case"Selected":break;case"ProtectObjects":break;case"EnableSelection":break;case"ProtectScenarios":break;case"ValidPrinterInfo":break;case"HorizontalResolution":break;case"VerticalResolution":break;case"NumberofCopies":break;case"ActiveRow":break;case"ActiveCol":break;case"ActivePane":break;case"TopRowVisible":break;case"TopRowBottomPane":break;case"LeftColumnVisible":break;case"LeftColumnRightPane":break;case"FitToPage":break;case"RangeSelection":break;case"PaperSizeIndex":break;case"PageLayoutZoom":break;case"PageBreakZoom":break;case"FilterOn":break;case"DoNotDisplayGridlines":break;case"SplitHorizontal":break;case"SplitVertical":break;case"FreezePanes":break;case"FrozenNoSplit":break;case"FitWidth":break;case"FitHeight":break;case"CommentsLayout":break;case"Zoom":break;case"LeftToRight":break;case"Gridlines":break;case"AllowSort":break;case"AllowFilter":break;case"AllowInsertRows":break;case"AllowDeleteRows":break;case"AllowInsertCols":break;case"AllowDeleteCols":break;case"AllowInsertHyperlinks":break;case"AllowFormatCells":break;case"AllowSizeCols":break;case"AllowSizeRows":break;case"NoSummaryRowsBelowDetail":break;case"TabColorIndex":break;case"DoNotDisplayHeadings":break;case"ShowPageLayoutZoom":break;case"NoSummaryColumnsRightDetail":break;case"BlackAndWhite":break;case"DoNotDisplayZeros":break;case"DisplayPageBreak":break;case"RowColHeadings":break;case"DoNotDisplayOutline":break;case"NoOrientation":break;case"AllowUsePivotTables":break;case"ZeroHeight":break;case"ViewableRange":break;case"Selection":break;case"ProtectContents":break;default:te=false;}break;case"PivotTable":;case"PivotCache":switch(s[3]){case"ImmediateItemsOnDrop":break;case"ShowPageMultipleItemLabel":break;case"CompactRowIndent":break;case"Location":break;case"PivotField":break;case"Orientation":break;case"LayoutForm":break;case"LayoutSubtotalLocation":break;case"LayoutCompactRow":break;case"Position":break;case"PivotItem":break;case"DataType":break;case"DataField":break;case"SourceName":break;case"ParentField":break;case"PTLineItems":break;case"PTLineItem":break;case"CountOfSameItems":break;case"Item":break;case"ItemType":break;case"PTSource":break;case"CacheIndex":break;case"ConsolidationReference":break;case"FileName":break;case"Reference":break;case"NoColumnGrand":break;case"NoRowGrand":break;case"BlankLineAfterItems":break;case"Hidden":break;case"Subtotal":break;case"BaseField":break;case"MapChildItems":break;case"Function":break;case"RefreshOnFileOpen":break;case"PrintSetTitles":break;case"MergeLabels":break;case"DefaultVersion":break;case"RefreshName":break;case"RefreshDate":break;case"RefreshDateCopy":break;case"VersionLastRefresh":break;case"VersionLastUpdate":break;case"VersionUpdateableMin":break;case"VersionRefreshableMin":break;case"Calculation":break;default:te=false;}break;case"PageBreaks":switch(s[3]){case"ColBreaks":break;case"ColBreak":break;case"RowBreaks":break;case"RowBreak":break;case"ColStart":break;case"ColEnd":break;case"RowEnd":break;default:te=false;}break;case"AutoFilter":switch(s[3]){case"AutoFilterColumn":break;case"AutoFilterCondition":break;case"AutoFilterAnd":break;case"AutoFilterOr":break;default:te=false;}break;case"QueryTable":switch(s[3]){case"Id":break;case"AutoFormatFont":break;case"AutoFormatPattern":break;case"QuerySource":break;case"QueryType":break;case"EnableRedirections":break;case"RefreshedInXl9":break;case"URLString":break;case"HTMLTables":break;case"Connection":break;case"CommandText":break;case"RefreshInfo":break;case"NoTitles":break;case"NextId":break;case"ColumnInfo":break;case"OverwriteCells":break;case"DoNotPromptForFile":break;case"TextWizardSettings":break;case"Source":break;case"Number":break;case"Decimal":break;case"ThousandSeparator":break;case"TrailingMinusNumbers":break;case"FormatSettings":break;case"FieldType":break;case"Delimiters":break;case"Tab":break;case"Comma":break;case"AutoFormatName":break;case"VersionLastEdit":break;case"VersionLastRefresh":break;default:te=false;}break;case"Sorting":;case"ConditionalFormatting":;case"DataValidation":switch(s[3]){case"Range":break;case"Type":break;case"Min":break;case"Max":break;case"Sort":break;case"Descending":break;case"Order":break;case"CaseSensitive":break;case"Value":break;case"ErrorStyle":break;case"ErrorMessage":break;case"ErrorTitle":break;case"CellRangeList":break;case"InputMessage":break;case"InputTitle":break;case"ComboHide":break;case"InputHide":break;case"Condition":break;case"Qualifier":break;case"UseBlank":break;case"Value1":break;case"Value2":break;case"Format":break;default:te=false;}break;case"MapInfo":;case"Schema":;case"data":switch(s[3]){case"Map":break;case"Entry":break;case"Range":break;case"XPath":break;case"Field":break;case"XSDType":break;case"FilterOn":break;case"Aggregate":break;case"ElementType":break;case"AttributeType":break;case"schema":;case"element":;case"complexType":;case"datatype":;case"all":;case"attribute":;case"extends":break;case"row":break;default:te=false;}break;case"SmartTags":break;default:te=false;break;}if(te)break;if(!f[f.length-1][1])throw"Unrecognized tag: "+s[3]+"|"+f.join("|");if(f[f.length-1][0]==="CustomDocumentProperties"){if(s[0].slice(-2)==="/>")break;else if(s[1]==="/")Dv(R,s[3],P,a.slice(y,s.index));else{P=s;y=s.index+s[0].length}break}if(t.WTF)throw"Unrecognized tag: "+s[3]+"|"+f.join("|");}var ne={};if(!t.bookSheets&&!t.bookProps)ne.Sheets=o;ne.SheetNames=u;ne.Workbook=j;ne.SSF=F.get_table();ne.Props=A;ne.Custprops=R;return ne}function Hv(e,r){rm(r=r||{});switch(r.type||"base64"){case"base64":return Wv(b.decode(e),r);case"binary":;case"buffer":;case"file":return Wv(e,r);case"array":return Wv(x(e),r);}}function Vv(e,r){var t=[];if(e.Props)t.push(cn(e.Props,r));if(e.Custprops)t.push(un(e.Props,e.Custprops,r));return t.join("")}function Xv(){return""}function Gv(e,r){var t=['<Style ss:ID="Default" ss:Name="Normal"><NumberFormat/></Style>'];r.cellXfs.forEach(function(e,r){var a=[];a.push(ar("NumberFormat",null,{"ss:Format":Pe(F._table[e.numFmtId])}));t.push(ar("Style",a.join(""),{"ss:ID":"s"+(21+r)}))});return ar("Styles",t.join(""))}function zv(e){return ar("NamedRange",null,{"ss:Name":e.Name,"ss:RefersTo":"="+jo(e.Ref,{r:0,c:0})})}function jv(e){if(!((e||{}).Workbook||{}).Names)return"";var r=e.Workbook.Names;var t=[];for(var a=0;a<r.length;++a){var n=r[a];if(n.Sheet!=null)continue;if(n.Name.match(/^_xlfn\./))continue;t.push(zv(n))}return ar("Names",t.join(""))}function $v(e,r,t,a){if(!e)return"";if(!((a||{}).Workbook||{}).Names)return"";var n=a.Workbook.Names;var i=[];for(var s=0;s<n.length;++s){var f=n[s];if(f.Sheet!=t)continue;if(f.Name.match(/^_xlfn\./))continue;i.push(zv(f))}return i.join("")}function Kv(e,r,t,a){if(!e)return"";var n=[];if(e["!margins"]){n.push("<PageSetup>");if(e["!margins"].header)n.push(ar("Header",null,{"x:Margin":e["!margins"].header}));if(e["!margins"].footer)n.push(ar("Footer",null,{"x:Margin":e["!margins"].footer}));n.push(ar("PageMargins",null,{"x:Bottom":e["!margins"].bottom||"0.75","x:Left":e["!margins"].left||"0.7","x:Right":e["!margins"].right||"0.7","x:Top":e["!margins"].top||"0.75"}));n.push("</PageSetup>")}if(a&&a.Workbook&&a.Workbook.Sheets&&a.Workbook.Sheets[t]){if(a.Workbook.Sheets[t].Hidden)n.push(ar("Visible",a.Workbook.Sheets[t].Hidden==1?"SheetHidden":"SheetVeryHidden",{}));else{for(var i=0;i<t;++i)if(a.Workbook.Sheets[i]&&!a.Workbook.Sheets[i].Hidden)break;if(i==t)n.push("<Selected/>")}}if(((((a||{}).Workbook||{}).Views||[])[0]||{}).RTL)n.push("<DisplayRightToLeft/>");if(e["!protect"]){n.push(rr("ProtectContents","True"));if(e["!protect"].objects)n.push(rr("ProtectObjects","True"));if(e["!protect"].scenarios)n.push(rr("ProtectScenarios","True"));if(e["!protect"].selectLockedCells!=null&&!e["!protect"].selectLockedCells)n.push(rr("EnableSelection","NoSelection"));else if(e["!protect"].selectUnlockedCells!=null&&!e["!protect"].selectUnlockedCells)n.push(rr("EnableSelection","UnlockedCells"));[["formatCells","AllowFormatCells"],["formatColumns","AllowSizeCols"],["formatRows","AllowSizeRows"],["insertColumns","AllowInsertCols"],["insertRows","AllowInsertRows"],["insertHyperlinks","AllowInsertHyperlinks"],["deleteColumns","AllowDeleteCols"],["deleteRows","AllowDeleteRows"],["sort","AllowSort"],["autoFilter","AllowFilter"],["pivotTables","AllowUsePivotTables"]].forEach(function(r){if(e["!protect"][r[0]])n.push("<"+r[1]+"/>")})}if(n.length==0)return"";return ar("WorksheetOptions",n.join(""),{xmlns:fr.x})}function Yv(e){return e.map(function(e){var r=He(e.t||"");var t=ar("ss:Data",r,{xmlns:"http://www.w3.org/TR/REC-html40"});return ar("Comment",t,{"ss:Author":e.a})}).join("")}function Qv(e,r,t,a,n,i,s){if(!e||e.v==undefined&&e.f==undefined)return"";var f={};if(e.f)f["ss:Formula"]="="+Pe(jo(e.f,s));if(e.F&&e.F.slice(0,r.length)==r){var l=ct(e.F.slice(r.length+1));f["ss:ArrayRange"]="RC:R"+(l.r==s.r?"":"["+(l.r-s.r)+"]")+"C"+(l.c==s.c?"":"["+(l.c-s.c)+"]")}if(e.l&&e.l.Target){f["ss:HRef"]=Pe(e.l.Target);if(e.l.Tooltip)f["x:HRefScreenTip"]=Pe(e.l.Tooltip)}if(t["!merges"]){var o=t["!merges"];for(var c=0;c!=o.length;++c){if(o[c].s.c!=s.c||o[c].s.r!=s.r)continue;if(o[c].e.c>o[c].s.c)f["ss:MergeAcross"]=o[c].e.c-o[c].s.c;if(o[c].e.r>o[c].s.r)f["ss:MergeDown"]=o[c].e.r-o[c].s.r}}var u="",h="";switch(e.t){case"z":return"";case"n":u="Number";h=String(e.v);break;case"b":u="Boolean";h=e.v?"1":"0";break;case"e":u="Error";h=jt[e.v];break;case"d":u="DateTime";h=new Date(e.v).toISOString();if(e.z==null)e.z=e.z||F._table[14];break;case"s":u="String";h=Ue(e.v||"");break;}var d=Ju(a.cellXfs,e,a);f["ss:StyleID"]="s"+(21+d);f["ss:Index"]=s.c+1;var v=e.v!=null?h:"";var p='<Data ss:Type="'+u+'">'+v+"</Data>";if((e.c||[]).length>0)p+=Yv(e.c);return ar("Cell",p,f)}function Jv(e,r){var t='<Row ss:Index="'+(e+1)+'"';if(r){if(r.hpt&&!r.hpx)r.hpx=ul(r.hpt);if(r.hpx)t+=' ss:AutoFitHeight="0" ss:Height="'+r.hpx+'"';if(r.hidden)t+=' ss:Hidden="1"'}return t+">"}function Zv(e,r,t,a){if(!e["!ref"])return"";var n=vt(e["!ref"]);var i=e["!merges"]||[],s=0;var f=[];if(e["!cols"])e["!cols"].forEach(function(e,r){fl(e);var t=!!e.width;var a=Yu(r,e);var n={"ss:Index":r+1};if(t)n["ss:Width"]=tl(a.width);if(e.hidden)n["ss:Hidden"]="1";f.push(ar("Column",null,n))});var l=Array.isArray(e);for(var o=n.s.r;o<=n.e.r;++o){var c=[Jv(o,(e["!rows"]||[])[o])];for(var u=n.s.c;u<=n.e.c;++u){var h=false;for(s=0;s!=i.length;++s){if(i[s].s.c>u)continue;if(i[s].s.r>o)continue;if(i[s].e.c<u)continue;if(i[s].e.r<o)continue;if(i[s].s.c!=u||i[s].s.r!=o)h=true;break}if(h)continue;var d={r:o,c:u};var v=ut(d),p=l?(e[o]||[])[u]:e[v];c.push(Qv(p,v,e,r,t,a,d))}c.push("</Row>");if(c.length>2)f.push(c.join(""))}return f.join("")}function qv(e,r,t){var a=[];var n=t.SheetNames[e];var i=t.Sheets[n];var s=i?$v(i,r,e,t):"";if(s.length>0)a.push("<Names>"+s+"</Names>");s=i?Zv(i,r,e,t):"";if(s.length>0)a.push("<Table>"+s+"</Table>");a.push(Kv(i,r,e,t));return a.join("")}function ep(e,r){if(!r)r={};if(!e.SSF)e.SSF=F.get_table();if(e.SSF){D(F);F.load_table(e.SSF);r.revssf=Q(e.SSF);r.revssf[e.SSF[65535]]=0;r.ssf=e.SSF;r.cellXfs=[];Ju(r.cellXfs,{},{revssf:{General:0}})}var t=[];t.push(Vv(e,r));t.push(Xv(e,r));t.push("");t.push("");for(var a=0;a<e.SheetNames.length;++a)t.push(ar("Worksheet",qv(a,r,e),{"ss:Name":Pe(e.SheetNames[a])}));t[2]=Gv(e,r);t[3]=jv(e,r);return Ce+ar("Workbook",t.join(""),{xmlns:fr.ss,"xmlns:o":fr.o,"xmlns:x":fr.x,"xmlns:ss":fr.ss,"xmlns:dt":fr.dt,"xmlns:html":fr.html})}function rp(e){var r={};var t=e.content;t.l=28;r.AnsiUserType=t._R(0,"lpstr-ansi");r.AnsiClipboardFormat=qt(t);if(t.length-t.l<=4)return r;var a=t._R(4);if(a==0||a>40)return r;t.l-=4;r.Reserved1=t._R(0,"lpstr-ansi");if(t.length-t.l<=4)return r;a=t._R(4);if(a!==1907505652)return r;r.UnicodeClipboardFormat=ea(t);a=t._R(4);if(a==0||a>40)return r;t.l-=4;r.Reserved2=t._R(0,"lpwstr")}function tp(e,r,t,a){var n=t;var i=[];var s=r.slice(r.l,r.l+n);if(a&&a.enc&&a.enc.insitu)switch(e.n){case"BOF":;case"FilePass":;case"FileLock":;case"InterfaceHdr":;case"RRDInfo":;case"RRDHead":;case"UsrExcl":break;default:if(s.length===0)break;a.enc.insitu(s);}i.push(s);r.l+=n;var f=dp[Fr(r,r.l)];var l=0;while(f!=null&&f.n.slice(0,8)==="Continue"){n=Fr(r,r.l+2);l=r.l+4;if(f.n=="ContinueFrt")l+=4;else if(f.n.slice(0,11)=="ContinueFrt")l+=12;i.push(r.slice(l,r.l+4+n));r.l+=4+n;f=dp[Fr(r,r.l)]}var o=A(i);Xr(o,0);var c=0;o.lens=[];for(var u=0;u<i.length;++u){o.lens.push(c);c+=i[u].length}return e.f(o,o.length,a)}function ap(e,r,t){if(e.t==="z")return;if(!e.XF)return;var a=0;try{a=e.z||e.XF.numFmtId||0;if(r.cellNF)e.z=F._table[a]}catch(n){if(r.WTF)throw n}if(!r||r.cellText!==false)try{if(e.t==="e"){e.w=e.w||jt[e.v]}else if(a===0||a=="General"){if(e.t==="n"){if((e.v|0)===e.v)e.w=F._general_int(e.v);else e.w=F._general_num(e.v)}else e.w=F._general(e.v)}else e.w=F.format(a,e.v,{date1904:!!t})}catch(n){if(r.WTF)throw n}if(r.cellDates&&a&&e.t=="n"&&F.is_date(F._table[a]||String(a))){var i=F.parse_date_code(e.v);if(i){e.t="d";e.v=new Date(i.y,i.m-1,i.d,i.H,i.M,i.S,i.u)}}}function np(e,r,t){return{v:e,ixfe:r,t:t}}function ip(e,r){var t={opts:{}};var a={};if(p!=null&&r.dense==null)r.dense=p;var n=r.dense?[]:{};var i={};var s={};var f=null;var o=[];var c="";var u={};var h,d="",v,m,b,g;var E={};var S=[];var k;var w;var C=true;var B=[];var T=[];var x={Sheets:[],WBProps:{date1904:false},Views:[{}]},I={};var _=function ge(e){if(e<8)return wa[e];if(e<64)return T[e-8]||wa[e];return wa[e]};var A=function Ee(e,r,t){var a=r.XF.data;if(!a||!a.patternType||!t||!t.cellStyles)return;r.s={};r.s.patternType=a.patternType;var n;if(n=Kf(_(a.icvFore))){r.s.fgColor={rgb:n}}if(n=Kf(_(a.icvBack))){r.s.bgColor={rgb:n}}};var R=function Se(e,r,t){if(X>1)return;if(t.sheetRows&&e.r>=t.sheetRows)C=false;if(!C)return;if(t.cellStyles&&r.XF&&r.XF.data)A(e,r,t);delete r.ixfe;delete r.XF;h=e;d=ut(e);if(!s||!s.s||!s.e)s={s:{r:0,c:0},e:{r:0,c:0}};if(e.r<s.s.r)s.s.r=e.r;if(e.c<s.s.c)s.s.c=e.c;if(e.r+1>s.e.r)s.e.r=e.r+1;if(e.c+1>s.e.c)s.e.c=e.c+1;if(t.cellFormula&&r.f){for(var a=0;a<S.length;++a){if(S[a][0].s.c>e.c||S[a][0].s.r>e.r)continue;if(S[a][0].e.c<e.c||S[a][0].e.r<e.r)continue;r.F=dt(S[a][0]);if(S[a][0].s.c!=e.c||S[a][0].s.r!=e.r)delete r.f;if(r.f)r.f=""+Tu(S[a][1],s,e,H,y);break}}{if(t.dense){if(!n[e.r])n[e.r]=[];n[e.r][e.c]=r}else n[d]=r}};var y={enc:false,sbcch:0,snames:[],sharedf:E,arrayf:S,rrtabid:[],lastuser:"",biff:8,codepage:0,winlocked:0,cellStyles:!!r&&!!r.cellStyles,WTF:!!r&&!!r.wtf};if(r.password)y.password=r.password;var D;var O=[];var P=[];var N=[],M=[];var L=0,U=0;var W=false;var H=[];H.SheetNames=y.snames;H.sharedf=y.sharedf;H.arrayf=y.arrayf;H.names=[];H.XTI=[];var V="";var X=0;var G=0,z=[];var $=[];var K;y.codepage=1200;l(1200);var Y=false;while(e.l<e.length-1){var Q=e.l;var J=e._R(2);if(J===0&&V==="EOF")break;var Z=e.l===e.length?0:e._R(2);var q=dp[J];if(q&&q.f){if(r.bookSheets){if(V==="BoundSheet8"&&q.n!=="BoundSheet8")break}V=q.n;if(q.r===2||q.r==12){var ee=e._R(2);Z-=2;if(!y.enc&&ee!==J&&((ee&255)<<8|ee>>8)!==J)throw new Error("rt mismatch: "+ee+"!="+J);if(q.r==12){e.l+=10;Z-=10}}var re;if(q.n==="EOF")re=q.f(e,Z,y);else re=tp(q,e,Z,y);var te=q.n;if(X==0&&te!="BOF")continue;switch(te){case"Date1904":t.opts.Date1904=x.WBProps.date1904=re;break;case"WriteProtect":t.opts.WriteProtect=true;break;case"FilePass":if(!y.enc)e.l=0;y.enc=re;if(!r.password)throw new Error("File is password-protected");if(re.valid==null)throw new Error("Encryption scheme unsupported");if(!re.valid)throw new Error("Password is incorrect");break;case"WriteAccess":y.lastuser=re;break;case"FileSharing":break;case"CodePage":switch(re){case 21010:re=1200;break;case 32768:re=1e4;break;case 32769:re=1252;break;}l(y.codepage=re);Y=true;break;case"RRTabId":y.rrtabid=re;break;case"WinProtect":y.winlocked=re;break;case"Template":break;case"BookBool":break;case"UsesELFs":break;case"MTRSettings":break;case"RefreshAll":;case"CalcCount":;case"CalcDelta":;case"CalcIter":;case"CalcMode":;case"CalcPrecision":;case"CalcSaveRecalc":t.opts[te]=re;break;case"CalcRefMode":y.CalcRefMode=re;break;case"Uncalced":break;case"ForceFullCalculation":t.opts.FullCalc=re;break;case"WsBool":if(re.fDialog)n["!type"]="dialog";break;case"XF":B.push(re);break;case"ExtSST":break;case"BookExt":break;case"RichTextStream":break;case"BkHim":break;case"SupBook":H.push([re]);H[H.length-1].XTI=[];break;case"ExternName":H[H.length-1].push(re);break;case"Index":break;case"Lbl":K={Name:re.Name,Ref:Tu(re.rgce,s,null,H,y)};if(re.itab>0)K.Sheet=re.itab-1;H.names.push(K);if(!H[0]){H[0]=[];H[0].XTI=[]}H[H.length-1].push(re);if(re.Name=="_xlnm._FilterDatabase"&&re.itab>0)if(re.rgce&&re.rgce[0]&&re.rgce[0][0]&&re.rgce[0][0][0]=="PtgArea3d")$[re.itab-1]={ref:dt(re.rgce[0][0][1][2])};break;case"ExternCount":y.ExternCount=re;break;case"ExternSheet":if(H.length==0){H[0]=[];H[0].XTI=[]}H[H.length-1].XTI=H[H.length-1].XTI.concat(re);H.XTI=H.XTI.concat(re);break;case"NameCmt":if(y.biff<8)break;if(K!=null)K.Comment=re[1];break;case"Protect":n["!protect"]=re;break;case"Password":if(re!==0&&y.WTF)console.error("Password verifier: "+re);break;case"Prot4Rev":;case"Prot4RevPass":break;case"BoundSheet8":{i[re.pos]=re;y.snames.push(re.name)}break;case"EOF":{if(--X)break;if(s.e){if(s.e.r>0&&s.e.c>0){s.e.r--;s.e.c--;n["!ref"]=dt(s);if(r.sheetRows&&r.sheetRows<=s.e.r){var ae=s.e.r;s.e.r=r.sheetRows-1;n["!fullref"]=n["!ref"];n["!ref"]=dt(s);s.e.r=ae}s.e.r++;s.e.c++}if(O.length>0)n["!merges"]=O;if(P.length>0)n["!objects"]=P;if(N.length>0)n["!cols"]=N;if(M.length>0)n["!rows"]=M;x.Sheets.push(I)}if(c==="")u=n;else a[c]=n;n=r.dense?[]:{}}break;case"BOF":{if(y.biff===8)y.biff={9:2,521:3,1033:4}[J]||{512:2,768:3,1024:4,1280:5,1536:8,2:2,7:2}[re.BIFFVer]||8;if(y.biff==8&&re.BIFFVer==0&&re.dt==16)y.biff=2;if(X++)break;C=true;n=r.dense?[]:{};if(y.biff<8&&!Y){Y=true;l(y.codepage=r.codepage||1252)}if(y.biff<5){if(c==="")c="Sheet1";s={s:{r:0,c:0},e:{r:0,c:0}};var ne={pos:e.l-Z,name:c};i[ne.pos]=ne;y.snames.push(c)}else c=(i[Q]||{name:""}).name;if(re.dt==32)n["!type"]="chart";if(re.dt==64)n["!type"]="macro";O=[];P=[];y.arrayf=S=[];N=[];M=[];L=U=0;W=false;I={Hidden:(i[Q]||{hs:0}).hs,name:c}}break;case"Number":;case"BIFF2NUM":;case"BIFF2INT":{if(n["!type"]=="chart")if(r.dense?(n[re.r]||[])[re.c]:n[ut({c:re.c,r:re.r})])++re.c;k={ixfe:re.ixfe,XF:B[re.ixfe]||{},v:re.val,t:"n"};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r)}break;case"BoolErr":{k={ixfe:re.ixfe,XF:B[re.ixfe],v:re.val,t:re.t};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r)}break;case"RK":{k={ixfe:re.ixfe,XF:B[re.ixfe],v:re.rknum,t:"n"};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r)}break;case"MulRk":{for(var ie=re.c;ie<=re.C;++ie){var se=re.rkrec[ie-re.c][0];k={ixfe:se,XF:B[se],v:re.rkrec[ie-re.c][1],t:"n"};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:ie,r:re.r},k,r)}}break;case"Formula":{if(re.val=="String"){f=re;break}k=np(re.val,re.cell.ixfe,re.tt);k.XF=B[k.ixfe];if(r.cellFormula){var fe=re.formula;if(fe&&fe[0]&&fe[0][0]&&fe[0][0][0]=="PtgExp"){var le=fe[0][0][1][0],oe=fe[0][0][1][1];var ce=ut({r:le,c:oe});if(E[ce])k.f=""+Tu(re.formula,s,re.cell,H,y);else k.F=((r.dense?(n[le]||[])[oe]:n[ce])||{}).F}else k.f=""+Tu(re.formula,s,re.cell,H,y)}if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R(re.cell,k,r);f=re}break;case"String":{if(f){f.val=re;k=np(re,f.cell.ixfe,"s");k.XF=B[k.ixfe];if(r.cellFormula){k.f=""+Tu(f.formula,s,f.cell,H,y)}if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R(f.cell,k,r);f=null}else throw new Error("String record expects Formula")}break;case"Array":{S.push(re);var ue=ut(re[0].s);v=r.dense?(n[re[0].s.r]||[])[re[0].s.c]:n[ue];if(r.cellFormula&&v){if(!f)break;if(!ue||!v)break;v.f=""+Tu(re[1],s,re[0],H,y);v.F=dt(re[0])}}break;case"ShrFmla":{if(!C)break;if(!r.cellFormula)break;if(d){if(!f)break;E[ut(f.cell)]=re[0];v=r.dense?(n[f.cell.r]||[])[f.cell.c]:n[ut(f.cell)];(v||{}).f=""+Tu(re[0],s,h,H,y)}}break;case"LabelSst":k=np(o[re.isst].t,re.ixfe,"s");k.XF=B[k.ixfe];if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r);break;case"Blank":if(r.sheetStubs){k={ixfe:re.ixfe,XF:B[re.ixfe],t:"z"};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r)}break;case"MulBlank":if(r.sheetStubs){for(var he=re.c;he<=re.C;++he){var de=re.ixfe[he-re.c];k={ixfe:de,XF:B[de],t:"z"};if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:he,r:re.r},k,r)}}break;case"RString":;case"Label":;case"BIFF2STR":k=np(re.val,re.ixfe,"s");k.XF=B[k.ixfe];if(G>0)k.z=z[k.ixfe>>8&31];ap(k,r,t.opts.Date1904);R({c:re.c,r:re.r},k,r);break;case"Dimensions":{if(X===1)s=re}break;case"SST":{o=re}break;case"Format":{if(y.biff==4){z[G++]=re[1];for(var ve=0;ve<G+163;++ve)if(F._table[ve]==re[1])break;if(ve>=163)F.load(re[1],G+163)}else F.load(re[1],re[0])}break;case"BIFF2FORMAT":{z[G++]=re;for(var pe=0;pe<G+163;++pe)if(F._table[pe]==re)break;if(pe>=163)F.load(re,G+163)}break;case"MergeCells":O=O.concat(re);break;case"Obj":P[re.cmo[0]]=y.lastobj=re;break;case"TxO":y.lastobj.TxO=re;break;case"ImData":y.lastobj.ImData=re;break;case"HLink":{for(g=re[0].s.r;g<=re[0].e.r;++g)for(b=re[0].s.c;b<=re[0].e.c;++b){v=r.dense?(n[g]||[])[b]:n[ut({c:b,r:g})];if(v)v.l=re[1]}}break;case"HLinkTooltip":{for(g=re[0].s.r;g<=re[0].e.r;++g)for(b=re[0].s.c;b<=re[0].e.c;++b){v=r.dense?(n[g]||[])[b]:n[ut({c:b,r:g})];if(v&&v.l)v.l.Tooltip=re[1]}}break;case"Note":{if(y.biff<=5&&y.biff>=2)break;v=r.dense?(n[re[0].r]||[])[re[0].c]:n[ut(re[0])];var me=P[re[2]];if(!v)break;if(!v.c)v.c=[];m={a:re[1],t:me.TxO.t};v.c.push(m)}break;default:switch(q.n){case"ClrtClient":break;case"XFExt":mo(B[re.ixfe],re.ext);break;case"DefColWidth":L=re;break;case"DefaultRowHeight":U=re[1];break;case"ColInfo":{if(!y.cellStyles)break;while(re.e>=re.s){N[re.e--]={width:re.w/256};if(!W){W=true;sl(re.w/256)}fl(N[re.e+1])}}break;case"Row":{var be={};if(re.level!=null){M[re.r]=be;be.level=re.level}if(re.hidden){M[re.r]=be;be.hidden=true}if(re.hpt){M[re.r]=be;be.hpt=re.hpt;be.hpx=ul(re.hpt)}}break;case"LeftMargin":;case"RightMargin":;case"TopMargin":;case"BottomMargin":if(!n["!margins"])Qu(n["!margins"]={});n["!margins"][te.slice(0,-6).toLowerCase()]=re;break;case"Setup":if(!n["!margins"])Qu(n["!margins"]={});n["!margins"].header=re.header;n["!margins"].footer=re.footer;break;case"Window2":if(re.RTL)x.Views[0].RTL=true;break;case"Header":break;case"Footer":break;case"HCenter":break;case"VCenter":break;case"Pls":break;case"GCW":break;case"LHRecord":break;case"DBCell":break;case"EntExU2":break;case"SxView":break;case"Sxvd":break;case"SXVI":break;case"SXVDEx":break;case"SxIvd":break;case"SXString":break;case"Sync":break;case"Addin":break;case"SXDI":break;case"SXLI":break;case"SXEx":break;case"QsiSXTag":break;case"Selection":break;case"Feat":break;case"FeatHdr":;case"FeatHdr11":break;case"Feature11":;case"Feature12":;case"List12":break;case"Country":w=re;break;case"RecalcId":break;case"DxGCol":break;case"Fbi":;case"Fbi2":;case"GelFrame":break;case"Font":break;case"XFCRC":break;case"Style":break;case"StyleExt":break;case"Palette":T=re;break;case"Theme":D=re;break;case"ScenarioProtect":break;case"ObjProtect":break;case"CondFmt12":break;case"Table":break;case"TableStyles":break;case"TableStyle":break;case"TableStyleElement":break;case"SXStreamID":break;case"SXVS":break;case"DConRef":break;case"SXAddl":break;case"DConBin":break;case"DConName":break;case"SXPI":break;case"SxFormat":break;case"SxSelect":break;case"SxRule":break;case"SxFilt":break;case"SxItm":break;case"SxDXF":break;case"ScenMan":break;case"DCon":break;case"CellWatch":break;case"PrintRowCol":break;case"PrintGrid":break;case"PrintSize":break;case"XCT":break;case"CRN":break;case"Scl":{}break;case"SheetExt":{}break;case"SheetExtOptional":{}break;case"ObNoMacros":{}break;case"ObProj":{}break;case"CodeName":{if(!c)x.WBProps.CodeName=re||"ThisWorkbook";else I.CodeName=re||I.name}break;case"GUIDTypeLib":{}break;case"WOpt":break;case"PhoneticInfo":break;case"OleObjectSize":break;case"DXF":;case"DXFN":;case"DXFN12":;case"DXFN12List":;case"DXFN12NoCB":break;case"Dv":;case"DVal":break;case"BRAI":;case"Series":;case"SeriesText":break;case"DConn":break;case"DbOrParamQry":break;case"DBQueryExt":break;case"OleDbConn":break;case"ExtString":break;case"IFmtRecord":break;case"CondFmt":;case"CF":;case"CF12":;case"CFEx":break;case"Excel9File":break;case"Units":break;case"InterfaceHdr":;case"Mms":;case"InterfaceEnd":;case"DSF":break;case"BuiltInFnGroupCount":break;case"Window1":;case"HideObj":;case"GridSet":;case"Guts":;case"UserBView":;case"UserSViewBegin":;case"UserSViewEnd":;case"Pane":break;default:switch(q.n){case"Dat":;case"Begin":;case"End":;case"StartBlock":;case"EndBlock":;case"Frame":;case"Area":;case"Axis":;case"AxisLine":;case"Tick":break;case"AxesUsed":;case"CrtLayout12":;case"CrtLayout12A":;case"CrtLink":;case"CrtLine":;case"CrtMlFrt":;case"CrtMlFrtContinue":break;case"LineFormat":;case"AreaFormat":;case"Chart":;case"Chart3d":;case"Chart3DBarShape":;case"ChartFormat":;case"ChartFrtInfo":break;case"PlotArea":;case"PlotGrowth":break;case"SeriesList":;case"SerParent":;case"SerAuxTrend":break;case"DataFormat":;case"SerToCrt":;case"FontX":break;case"CatSerRange":;case"AxcExt":;case"SerFmt":break;case"ShtProps":break;case"DefaultText":;case"Text":;case"CatLab":break;case"DataLabExtContents":break;case"Legend":;case"LegendException":break;case"Pie":;case"Scatter":break;case"PieFormat":;case"MarkerFormat":break;case"StartObject":;case"EndObject":break;case"AlRuns":;case"ObjectLink":break;case"SIIndex":break;case"AttachedLabel":;case"YMult":break;case"Line":;case"Bar":break;case"Surf":break;case"AxisParent":break;case"Pos":break;case"ValueRange":break;case"SXViewEx9":break;case"SXViewLink":break;case"PivotChartBits":break;case"SBaseRef":break;case"TextPropsStream":break;case"LnExt":break;case"MkrExt":break;case"CrtCoopt":break;case"Qsi":;case"Qsif":;case"Qsir":;case"QsiSXTag":break;case"TxtQry":break;case"FilterMode":break;case"AutoFilter":;case"AutoFilterInfo":break;case"AutoFilter12":break;case"DropDownObjIds":break;case"Sort":break;case"SortData":break;case"ShapePropsStream":break;case"MsoDrawing":;case"MsoDrawingGroup":;case"MsoDrawingSelection":break;case"WebPub":;case"AutoWebPub":break;case"HeaderFooter":;case"HFPicture":;case"PLV":;case"HorizontalPageBreaks":;case"VerticalPageBreaks":break;case"Backup":;case"CompressPictures":;case"Compat12":break;case"Continue":;case"ContinueFrt12":break;case"FrtFontList":;case"FrtWrapper":break;default:switch(q.n){case"TabIdConf":;case"Radar":;case"RadarArea":;case"DropBar":;case"Intl":;case"CoordList":;case"SerAuxErrBar":break;case"BIFF2FONTCLR":;case"BIFF2FMTCNT":;case"BIFF2FONTXTRA":break;case"BIFF2XF":;case"BIFF3XF":;case"BIFF4XF":break;case"BIFF4FMTCNT":;case"BIFF2ROW":;case"BIFF2WINDOW2":break;case"SCENARIO":;case"DConBin":;case"PicF":;case"DataLabExt":;case"Lel":;case"BopPop":;case"BopPopCustom":;case"RealTimeData":;case"Name":break;case"LHNGraph":;case"FnGroupName":;case"AddMenu":;case"LPr":break;case"ListObj":;case"ListField":break;case"RRSort":break;case"BigName":break;case"ToolbarHdr":;case"ToolbarEnd":break;case"DDEObjName":break;case"FRTArchId$":break;default:if(r.WTF)throw"Unrecognized Record "+q.n;};};};}}else e.l+=Z}t.SheetNames=j(i).sort(function(e,r){return Number(e)-Number(r)}).map(function(e){return i[e].name});if(!r.bookSheets)t.Sheets=a;if(t.Sheets)$.forEach(function(e,r){t.Sheets[t.SheetNames[r]]["!autofilter"]=e});t.Preamble=u;t.Strings=o;t.SSF=F.get_table();if(y.enc)t.Encryption=y.enc;if(D)t.Themes=D;t.Metadata={};if(w!==undefined)t.Metadata.Country=w;if(H.names.length>0)x.Names=H.names;t.Workbook=x;return t}var sp={SI:"e0859ff2f94f6810ab9108002b27b3d9",DSI:"02d5cdd59c2e1b10939708002b2cf9ae",UDI:"05d5cdd59c2e1b10939708002b2cf9ae"};function fp(e,r,t){var a=H.find(e,"!DocumentSummaryInformation");if(a&&a.size>0)try{var n=Dn(a,va,sp.DSI);for(var i in n)r[i]=n[i]}catch(s){if(t.WTF)throw s}var f=H.find(e,"!SummaryInformation");
+if(f&&f.size>0)try{var l=Dn(f,pa,sp.SI);for(var o in l)if(r[o]==null)r[o]=l[o]}catch(s){if(t.WTF)throw s}if(r.HeadingPairs&&r.TitlesOfParts){Za(r.HeadingPairs,r.TitlesOfParts,r,t);delete r.HeadingPairs;delete r.TitlesOfParts}}function lp(e,r){var t=[],a=[],n=[];var i=0,s;if(e.Props){s=j(e.Props);for(i=0;i<s.length;++i)(ba.hasOwnProperty(s[i])?t:ga.hasOwnProperty(s[i])?a:n).push([s[i],e.Props[s[i]]])}if(e.Custprops){s=j(e.Custprops);for(i=0;i<s.length;++i)if(!(e.Props||{}).hasOwnProperty(s[i]))(ba.hasOwnProperty(s[i])?t:ga.hasOwnProperty(s[i])?a:n).push([s[i],e.Custprops[s[i]]])}var f=[];for(i=0;i<n.length;++i){if(Rn.indexOf(n[i][0])>-1)continue;if(n[i][1]==null)continue;f.push(n[i])}if(a.length)H.utils.cfb_add(r,"/SummaryInformation",On(a,sp.SI,ga,pa));if(t.length||f.length)H.utils.cfb_add(r,"/DocumentSummaryInformation",On(t,sp.DSI,ba,va,f.length?f:null,sp.UDI))}function op(e,r){if(!r)r={};rm(r);o();if(r.codepage)s(r.codepage);var t,a;if(e.FullPaths){if(H.find(e,"/encryption"))throw new Error("File is password-protected");t=H.find(e,"!CompObj");a=H.find(e,"/Workbook")||H.find(e,"/Book")}else{switch(r.type){case"base64":e=B(b.decode(e));break;case"binary":e=B(e);break;case"buffer":break;case"array":if(!Array.isArray(e))e=Array.prototype.slice.call(e);break;}Xr(e,0);a={content:e}}var n;var i;if(t)rp(t);if(r.bookProps&&!r.bookSheets)n={};else{var f=g?"buffer":"array";if(a&&a.content)n=ip(a.content,r);else if((i=H.find(e,"PerfectOffice_MAIN"))&&i.content)n=sf.to_workbook(i.content,(r.type=f,r));else if((i=H.find(e,"NativeContent_MAIN"))&&i.content)n=sf.to_workbook(i.content,(r.type=f,r));else throw new Error("Cannot find Workbook stream");if(r.bookVBA&&e.FullPaths&&H.find(e,"/_VBA_PROJECT_CUR/VBA/dir"))n.vbaraw=Mo(e)}var l={};if(e.FullPaths)fp(e,l,r);n.Props=n.Custprops=l;if(r.bookFiles)n.cfb=e;return n}function cp(e,r){var t=r||{};var a=H.utils.cfb_new({root:"R"});var n="/Workbook";switch(t.bookType||"xls"){case"xls":t.bookType="biff8";case"xla":if(!t.bookType)t.bookType="xla";case"biff8":n="/Workbook";t.biff=8;break;case"biff5":n="/Book";t.biff=5;break;default:throw new Error("invalid type "+t.bookType+" for XLS CFB");}H.utils.cfb_add(a,n,yp(e,t));if(t.biff==8&&(e.Props||e.Custprops))lp(e,a);if(t.biff==8&&e.vbaraw)Lo(a,H.read(e.vbaraw,{type:typeof e.vbaraw=="string"?"binary":"buffer"}));return a}var up={0:{n:"BrtRowHdr",f:Ah},1:{n:"BrtCellBlank",f:Mh},2:{n:"BrtCellRk",f:jh},3:{n:"BrtCellError",f:Hh},4:{n:"BrtCellBool",f:Uh},5:{n:"BrtCellReal",f:Gh},6:{n:"BrtCellSt",f:Kh},7:{n:"BrtCellIsst",f:Vh},8:{n:"BrtFmlaString",f:qh},9:{n:"BrtFmlaNum",f:Zh},10:{n:"BrtFmlaBool",f:Qh},11:{n:"BrtFmlaError",f:Jh},16:{n:"BrtFRTArchID$",f:tv},19:{n:"BrtSSTItem",f:Tt},20:{n:"BrtPCDIMissing"},21:{n:"BrtPCDINumber"},22:{n:"BrtPCDIBoolean"},23:{n:"BrtPCDIError"},24:{n:"BrtPCDIString"},25:{n:"BrtPCDIDatetime"},26:{n:"BrtPCDIIndex"},27:{n:"BrtPCDIAMissing"},28:{n:"BrtPCDIANumber"},29:{n:"BrtPCDIABoolean"},30:{n:"BrtPCDIAError"},31:{n:"BrtPCDIAString"},32:{n:"BrtPCDIADatetime"},33:{n:"BrtPCRRecord"},34:{n:"BrtPCRRecordDt"},35:{n:"BrtFRTBegin"},36:{n:"BrtFRTEnd"},37:{n:"BrtACBegin"},38:{n:"BrtACEnd"},39:{n:"BrtName",f:av},40:{n:"BrtIndexRowBlock"},42:{n:"BrtIndexBlock"},43:{n:"BrtFont",f:Il},44:{n:"BrtFmt",f:Tl},45:{n:"BrtFill",f:yl},46:{n:"BrtBorder",f:Nl},47:{n:"BrtXF",f:Dl},48:{n:"BrtStyle"},49:{n:"BrtCellMeta"},50:{n:"BrtValueMeta"},51:{n:"BrtMdb"},52:{n:"BrtBeginFmd"},53:{n:"BrtEndFmd"},54:{n:"BrtBeginMdx"},55:{n:"BrtEndMdx"},56:{n:"BrtBeginMdxTuple"},57:{n:"BrtEndMdxTuple"},58:{n:"BrtMdxMbrIstr"},59:{n:"BrtStr"},60:{n:"BrtColInfo",f:Ms},62:{n:"BrtCellRString"},63:{n:"BrtCalcChainItem$",f:go},64:{n:"BrtDVal"},65:{n:"BrtSxvcellNum"},66:{n:"BrtSxvcellStr"},67:{n:"BrtSxvcellBool"},68:{n:"BrtSxvcellErr"},69:{n:"BrtSxvcellDate"},70:{n:"BrtSxvcellNil"},128:{n:"BrtFileVersion"},129:{n:"BrtBeginSheet"},130:{n:"BrtEndSheet"},131:{n:"BrtBeginBook",f:Gr,p:0},132:{n:"BrtEndBook"},133:{n:"BrtBeginWsViews"},134:{n:"BrtEndWsViews"},135:{n:"BrtBeginBookViews"},136:{n:"BrtEndBookViews"},137:{n:"BrtBeginWsView",f:ud},138:{n:"BrtEndWsView"},139:{n:"BrtBeginCsViews"},140:{n:"BrtEndCsViews"},141:{n:"BrtBeginCsView"},142:{n:"BrtEndCsView"},143:{n:"BrtBeginBundleShs"},144:{n:"BrtEndBundleShs"},145:{n:"BrtBeginSheetData"},146:{n:"BrtEndSheetData"},147:{n:"BrtWsProp",f:Ph},148:{n:"BrtWsDim",f:Fh,p:16},151:{n:"BrtPane"},152:{n:"BrtSel"},153:{n:"BrtWbProp",f:ev},154:{n:"BrtWbFactoid"},155:{n:"BrtFileRecover"},156:{n:"BrtBundleSh",f:Zd},157:{n:"BrtCalcProp"},158:{n:"BrtBookView"},159:{n:"BrtBeginSst",f:gf},160:{n:"BrtEndSst"},161:{n:"BrtBeginAFilter",f:Vt},162:{n:"BrtEndAFilter"},163:{n:"BrtBeginFilterColumn"},164:{n:"BrtEndFilterColumn"},165:{n:"BrtBeginFilters"},166:{n:"BrtEndFilters"},167:{n:"BrtFilter"},168:{n:"BrtColorFilter"},169:{n:"BrtIconFilter"},170:{n:"BrtTop10Filter"},171:{n:"BrtDynamicFilter"},172:{n:"BrtBeginCustomFilters"},173:{n:"BrtEndCustomFilters"},174:{n:"BrtCustomFilter"},175:{n:"BrtAFilterDateGroupItem"},176:{n:"BrtMergeCell",f:ed},177:{n:"BrtBeginMergeCells"},178:{n:"BrtEndMergeCells"},179:{n:"BrtBeginPivotCacheDef"},180:{n:"BrtEndPivotCacheDef"},181:{n:"BrtBeginPCDFields"},182:{n:"BrtEndPCDFields"},183:{n:"BrtBeginPCDField"},184:{n:"BrtEndPCDField"},185:{n:"BrtBeginPCDSource"},186:{n:"BrtEndPCDSource"},187:{n:"BrtBeginPCDSRange"},188:{n:"BrtEndPCDSRange"},189:{n:"BrtBeginPCDFAtbl"},190:{n:"BrtEndPCDFAtbl"},191:{n:"BrtBeginPCDIRun"},192:{n:"BrtEndPCDIRun"},193:{n:"BrtBeginPivotCacheRecords"},194:{n:"BrtEndPivotCacheRecords"},195:{n:"BrtBeginPCDHierarchies"},196:{n:"BrtEndPCDHierarchies"},197:{n:"BrtBeginPCDHierarchy"},198:{n:"BrtEndPCDHierarchy"},199:{n:"BrtBeginPCDHFieldsUsage"},200:{n:"BrtEndPCDHFieldsUsage"},201:{n:"BrtBeginExtConnection"},202:{n:"BrtEndExtConnection"},203:{n:"BrtBeginECDbProps"},204:{n:"BrtEndECDbProps"},205:{n:"BrtBeginECOlapProps"},206:{n:"BrtEndECOlapProps"},207:{n:"BrtBeginPCDSConsol"},208:{n:"BrtEndPCDSConsol"},209:{n:"BrtBeginPCDSCPages"},210:{n:"BrtEndPCDSCPages"},211:{n:"BrtBeginPCDSCPage"},212:{n:"BrtEndPCDSCPage"},213:{n:"BrtBeginPCDSCPItem"},214:{n:"BrtEndPCDSCPItem"},215:{n:"BrtBeginPCDSCSets"},216:{n:"BrtEndPCDSCSets"},217:{n:"BrtBeginPCDSCSet"},218:{n:"BrtEndPCDSCSet"},219:{n:"BrtBeginPCDFGroup"},220:{n:"BrtEndPCDFGroup"},221:{n:"BrtBeginPCDFGItems"},222:{n:"BrtEndPCDFGItems"},223:{n:"BrtBeginPCDFGRange"},224:{n:"BrtEndPCDFGRange"},225:{n:"BrtBeginPCDFGDiscrete"},226:{n:"BrtEndPCDFGDiscrete"},227:{n:"BrtBeginPCDSDTupleCache"},228:{n:"BrtEndPCDSDTupleCache"},229:{n:"BrtBeginPCDSDTCEntries"},230:{n:"BrtEndPCDSDTCEntries"},231:{n:"BrtBeginPCDSDTCEMembers"},232:{n:"BrtEndPCDSDTCEMembers"},233:{n:"BrtBeginPCDSDTCEMember"},234:{n:"BrtEndPCDSDTCEMember"},235:{n:"BrtBeginPCDSDTCQueries"},236:{n:"BrtEndPCDSDTCQueries"},237:{n:"BrtBeginPCDSDTCQuery"},238:{n:"BrtEndPCDSDTCQuery"},239:{n:"BrtBeginPCDSDTCSets"},240:{n:"BrtEndPCDSDTCSets"},241:{n:"BrtBeginPCDSDTCSet"},242:{n:"BrtEndPCDSDTCSet"},243:{n:"BrtBeginPCDCalcItems"},244:{n:"BrtEndPCDCalcItems"},245:{n:"BrtBeginPCDCalcItem"},246:{n:"BrtEndPCDCalcItem"},247:{n:"BrtBeginPRule"},248:{n:"BrtEndPRule"},249:{n:"BrtBeginPRFilters"},250:{n:"BrtEndPRFilters"},251:{n:"BrtBeginPRFilter"},252:{n:"BrtEndPRFilter"},253:{n:"BrtBeginPNames"},254:{n:"BrtEndPNames"},255:{n:"BrtBeginPName"},256:{n:"BrtEndPName"},257:{n:"BrtBeginPNPairs"},258:{n:"BrtEndPNPairs"},259:{n:"BrtBeginPNPair"},260:{n:"BrtEndPNPair"},261:{n:"BrtBeginECWebProps"},262:{n:"BrtEndECWebProps"},263:{n:"BrtBeginEcWpTables"},264:{n:"BrtEndECWPTables"},265:{n:"BrtBeginECParams"},266:{n:"BrtEndECParams"},267:{n:"BrtBeginECParam"},268:{n:"BrtEndECParam"},269:{n:"BrtBeginPCDKPIs"},270:{n:"BrtEndPCDKPIs"},271:{n:"BrtBeginPCDKPI"},272:{n:"BrtEndPCDKPI"},273:{n:"BrtBeginDims"},274:{n:"BrtEndDims"},275:{n:"BrtBeginDim"},276:{n:"BrtEndDim"},277:{n:"BrtIndexPartEnd"},278:{n:"BrtBeginStyleSheet"},279:{n:"BrtEndStyleSheet"},280:{n:"BrtBeginSXView"},281:{n:"BrtEndSXVI"},282:{n:"BrtBeginSXVI"},283:{n:"BrtBeginSXVIs"},284:{n:"BrtEndSXVIs"},285:{n:"BrtBeginSXVD"},286:{n:"BrtEndSXVD"},287:{n:"BrtBeginSXVDs"},288:{n:"BrtEndSXVDs"},289:{n:"BrtBeginSXPI"},290:{n:"BrtEndSXPI"},291:{n:"BrtBeginSXPIs"},292:{n:"BrtEndSXPIs"},293:{n:"BrtBeginSXDI"},294:{n:"BrtEndSXDI"},295:{n:"BrtBeginSXDIs"},296:{n:"BrtEndSXDIs"},297:{n:"BrtBeginSXLI"},298:{n:"BrtEndSXLI"},299:{n:"BrtBeginSXLIRws"},300:{n:"BrtEndSXLIRws"},301:{n:"BrtBeginSXLICols"},302:{n:"BrtEndSXLICols"},303:{n:"BrtBeginSXFormat"},304:{n:"BrtEndSXFormat"},305:{n:"BrtBeginSXFormats"},306:{n:"BrtEndSxFormats"},307:{n:"BrtBeginSxSelect"},308:{n:"BrtEndSxSelect"},309:{n:"BrtBeginISXVDRws"},310:{n:"BrtEndISXVDRws"},311:{n:"BrtBeginISXVDCols"},312:{n:"BrtEndISXVDCols"},313:{n:"BrtEndSXLocation"},314:{n:"BrtBeginSXLocation"},315:{n:"BrtEndSXView"},316:{n:"BrtBeginSXTHs"},317:{n:"BrtEndSXTHs"},318:{n:"BrtBeginSXTH"},319:{n:"BrtEndSXTH"},320:{n:"BrtBeginISXTHRws"},321:{n:"BrtEndISXTHRws"},322:{n:"BrtBeginISXTHCols"},323:{n:"BrtEndISXTHCols"},324:{n:"BrtBeginSXTDMPS"},325:{n:"BrtEndSXTDMPs"},326:{n:"BrtBeginSXTDMP"},327:{n:"BrtEndSXTDMP"},328:{n:"BrtBeginSXTHItems"},329:{n:"BrtEndSXTHItems"},330:{n:"BrtBeginSXTHItem"},331:{n:"BrtEndSXTHItem"},332:{n:"BrtBeginMetadata"},333:{n:"BrtEndMetadata"},334:{n:"BrtBeginEsmdtinfo"},335:{n:"BrtMdtinfo"},336:{n:"BrtEndEsmdtinfo"},337:{n:"BrtBeginEsmdb"},338:{n:"BrtEndEsmdb"},339:{n:"BrtBeginEsfmd"},340:{n:"BrtEndEsfmd"},341:{n:"BrtBeginSingleCells"},342:{n:"BrtEndSingleCells"},343:{n:"BrtBeginList"},344:{n:"BrtEndList"},345:{n:"BrtBeginListCols"},346:{n:"BrtEndListCols"},347:{n:"BrtBeginListCol"},348:{n:"BrtEndListCol"},349:{n:"BrtBeginListXmlCPr"},350:{n:"BrtEndListXmlCPr"},351:{n:"BrtListCCFmla"},352:{n:"BrtListTrFmla"},353:{n:"BrtBeginExternals"},354:{n:"BrtEndExternals"},355:{n:"BrtSupBookSrc",f:Nt},357:{n:"BrtSupSelf"},358:{n:"BrtSupSame"},359:{n:"BrtSupTabs"},360:{n:"BrtBeginSupBook"},361:{n:"BrtPlaceholderName"},362:{n:"BrtExternSheet",f:vs},363:{n:"BrtExternTableStart"},364:{n:"BrtExternTableEnd"},366:{n:"BrtExternRowHdr"},367:{n:"BrtExternCellBlank"},368:{n:"BrtExternCellReal"},369:{n:"BrtExternCellBool"},370:{n:"BrtExternCellError"},371:{n:"BrtExternCellString"},372:{n:"BrtBeginEsmdx"},373:{n:"BrtEndEsmdx"},374:{n:"BrtBeginMdxSet"},375:{n:"BrtEndMdxSet"},376:{n:"BrtBeginMdxMbrProp"},377:{n:"BrtEndMdxMbrProp"},378:{n:"BrtBeginMdxKPI"},379:{n:"BrtEndMdxKPI"},380:{n:"BrtBeginEsstr"},381:{n:"BrtEndEsstr"},382:{n:"BrtBeginPRFItem"},383:{n:"BrtEndPRFItem"},384:{n:"BrtBeginPivotCacheIDs"},385:{n:"BrtEndPivotCacheIDs"},386:{n:"BrtBeginPivotCacheID"},387:{n:"BrtEndPivotCacheID"},388:{n:"BrtBeginISXVIs"},389:{n:"BrtEndISXVIs"},390:{n:"BrtBeginColInfos"},391:{n:"BrtEndColInfos"},392:{n:"BrtBeginRwBrk"},393:{n:"BrtEndRwBrk"},394:{n:"BrtBeginColBrk"},395:{n:"BrtEndColBrk"},396:{n:"BrtBrk"},397:{n:"BrtUserBookView"},398:{n:"BrtInfo"},399:{n:"BrtCUsr"},400:{n:"BrtUsr"},401:{n:"BrtBeginUsers"},403:{n:"BrtEOF"},404:{n:"BrtUCR"},405:{n:"BrtRRInsDel"},406:{n:"BrtRREndInsDel"},407:{n:"BrtRRMove"},408:{n:"BrtRREndMove"},409:{n:"BrtRRChgCell"},410:{n:"BrtRREndChgCell"},411:{n:"BrtRRHeader"},412:{n:"BrtRRUserView"},413:{n:"BrtRRRenSheet"},414:{n:"BrtRRInsertSh"},415:{n:"BrtRRDefName"},416:{n:"BrtRRNote"},417:{n:"BrtRRConflict"},418:{n:"BrtRRTQSIF"},419:{n:"BrtRRFormat"},420:{n:"BrtRREndFormat"},421:{n:"BrtRRAutoFmt"},422:{n:"BrtBeginUserShViews"},423:{n:"BrtBeginUserShView"},424:{n:"BrtEndUserShView"},425:{n:"BrtEndUserShViews"},426:{n:"BrtArrFmla",f:id},427:{n:"BrtShrFmla",f:sd},428:{n:"BrtTable"},429:{n:"BrtBeginExtConnections"},430:{n:"BrtEndExtConnections"},431:{n:"BrtBeginPCDCalcMems"},432:{n:"BrtEndPCDCalcMems"},433:{n:"BrtBeginPCDCalcMem"},434:{n:"BrtEndPCDCalcMem"},435:{n:"BrtBeginPCDHGLevels"},436:{n:"BrtEndPCDHGLevels"},437:{n:"BrtBeginPCDHGLevel"},438:{n:"BrtEndPCDHGLevel"},439:{n:"BrtBeginPCDHGLGroups"},440:{n:"BrtEndPCDHGLGroups"},441:{n:"BrtBeginPCDHGLGroup"},442:{n:"BrtEndPCDHGLGroup"},443:{n:"BrtBeginPCDHGLGMembers"},444:{n:"BrtEndPCDHGLGMembers"},445:{n:"BrtBeginPCDHGLGMember"},446:{n:"BrtEndPCDHGLGMember"},447:{n:"BrtBeginQSI"},448:{n:"BrtEndQSI"},449:{n:"BrtBeginQSIR"},450:{n:"BrtEndQSIR"},451:{n:"BrtBeginDeletedNames"},452:{n:"BrtEndDeletedNames"},453:{n:"BrtBeginDeletedName"},454:{n:"BrtEndDeletedName"},455:{n:"BrtBeginQSIFs"},456:{n:"BrtEndQSIFs"},457:{n:"BrtBeginQSIF"},458:{n:"BrtEndQSIF"},459:{n:"BrtBeginAutoSortScope"},460:{n:"BrtEndAutoSortScope"},461:{n:"BrtBeginConditionalFormatting"},462:{n:"BrtEndConditionalFormatting"},463:{n:"BrtBeginCFRule"},464:{n:"BrtEndCFRule"},465:{n:"BrtBeginIconSet"},466:{n:"BrtEndIconSet"},467:{n:"BrtBeginDatabar"},468:{n:"BrtEndDatabar"},469:{n:"BrtBeginColorScale"},470:{n:"BrtEndColorScale"},471:{n:"BrtCFVO"},472:{n:"BrtExternValueMeta"},473:{n:"BrtBeginColorPalette"},474:{n:"BrtEndColorPalette"},475:{n:"BrtIndexedColor"},476:{n:"BrtMargins",f:od},477:{n:"BrtPrintOptions"},478:{n:"BrtPageSetup"},479:{n:"BrtBeginHeaderFooter"},480:{n:"BrtEndHeaderFooter"},481:{n:"BrtBeginSXCrtFormat"},482:{n:"BrtEndSXCrtFormat"},483:{n:"BrtBeginSXCrtFormats"},484:{n:"BrtEndSXCrtFormats"},485:{n:"BrtWsFmtInfo",f:Oh},486:{n:"BrtBeginMgs"},487:{n:"BrtEndMGs"},488:{n:"BrtBeginMGMaps"},489:{n:"BrtEndMGMaps"},490:{n:"BrtBeginMG"},491:{n:"BrtEndMG"},492:{n:"BrtBeginMap"},493:{n:"BrtEndMap"},494:{n:"BrtHLink",f:ad},495:{n:"BrtBeginDCon"},496:{n:"BrtEndDCon"},497:{n:"BrtBeginDRefs"},498:{n:"BrtEndDRefs"},499:{n:"BrtDRef"},500:{n:"BrtBeginScenMan"},501:{n:"BrtEndScenMan"},502:{n:"BrtBeginSct"},503:{n:"BrtEndSct"},504:{n:"BrtSlc"},505:{n:"BrtBeginDXFs"},506:{n:"BrtEndDXFs"},507:{n:"BrtDXF"},508:{n:"BrtBeginTableStyles"},509:{n:"BrtEndTableStyles"},510:{n:"BrtBeginTableStyle"},511:{n:"BrtEndTableStyle"},512:{n:"BrtTableStyleElement"},513:{n:"BrtTableStyleClient"},514:{n:"BrtBeginVolDeps"},515:{n:"BrtEndVolDeps"},516:{n:"BrtBeginVolType"},517:{n:"BrtEndVolType"},518:{n:"BrtBeginVolMain"},519:{n:"BrtEndVolMain"},520:{n:"BrtBeginVolTopic"},521:{n:"BrtEndVolTopic"},522:{n:"BrtVolSubtopic"},523:{n:"BrtVolRef"},524:{n:"BrtVolNum"},525:{n:"BrtVolErr"},526:{n:"BrtVolStr"},527:{n:"BrtVolBool"},528:{n:"BrtBeginCalcChain$"},529:{n:"BrtEndCalcChain$"},530:{n:"BrtBeginSortState"},531:{n:"BrtEndSortState"},532:{n:"BrtBeginSortCond"},533:{n:"BrtEndSortCond"},534:{n:"BrtBookProtection"},535:{n:"BrtSheetProtection"},536:{n:"BrtRangeProtection"},537:{n:"BrtPhoneticInfo"},538:{n:"BrtBeginECTxtWiz"},539:{n:"BrtEndECTxtWiz"},540:{n:"BrtBeginECTWFldInfoLst"},541:{n:"BrtEndECTWFldInfoLst"},542:{n:"BrtBeginECTwFldInfo"},548:{n:"BrtFileSharing"},549:{n:"BrtOleSize"},550:{n:"BrtDrawing",f:Nt},551:{n:"BrtLegacyDrawing"},552:{n:"BrtLegacyDrawingHF"},553:{n:"BrtWebOpt"},554:{n:"BrtBeginWebPubItems"},555:{n:"BrtEndWebPubItems"},556:{n:"BrtBeginWebPubItem"},557:{n:"BrtEndWebPubItem"},558:{n:"BrtBeginSXCondFmt"},559:{n:"BrtEndSXCondFmt"},560:{n:"BrtBeginSXCondFmts"},561:{n:"BrtEndSXCondFmts"},562:{n:"BrtBkHim"},564:{n:"BrtColor"},565:{n:"BrtBeginIndexedColors"},566:{n:"BrtEndIndexedColors"},569:{n:"BrtBeginMRUColors"},570:{n:"BrtEndMRUColors"},572:{n:"BrtMRUColor"},573:{n:"BrtBeginDVals"},574:{n:"BrtEndDVals"},577:{n:"BrtSupNameStart"},578:{n:"BrtSupNameValueStart"},579:{n:"BrtSupNameValueEnd"},580:{n:"BrtSupNameNum"},581:{n:"BrtSupNameErr"},582:{n:"BrtSupNameSt"},583:{n:"BrtSupNameNil"},584:{n:"BrtSupNameBool"},585:{n:"BrtSupNameFmla"},586:{n:"BrtSupNameBits"},587:{n:"BrtSupNameEnd"},588:{n:"BrtEndSupBook"},589:{n:"BrtCellSmartTagProperty"},590:{n:"BrtBeginCellSmartTag"},591:{n:"BrtEndCellSmartTag"},592:{n:"BrtBeginCellSmartTags"},593:{n:"BrtEndCellSmartTags"},594:{n:"BrtBeginSmartTags"},595:{n:"BrtEndSmartTags"},596:{n:"BrtSmartTagType"},597:{n:"BrtBeginSmartTagTypes"},598:{n:"BrtEndSmartTagTypes"},599:{n:"BrtBeginSXFilters"},600:{n:"BrtEndSXFilters"},601:{n:"BrtBeginSXFILTER"},602:{n:"BrtEndSXFilter"},603:{n:"BrtBeginFills"},604:{n:"BrtEndFills"},605:{n:"BrtBeginCellWatches"},606:{n:"BrtEndCellWatches"},607:{n:"BrtCellWatch"},608:{n:"BrtBeginCRErrs"},609:{n:"BrtEndCRErrs"},610:{n:"BrtCrashRecErr"},611:{n:"BrtBeginFonts"},612:{n:"BrtEndFonts"},613:{n:"BrtBeginBorders"},614:{n:"BrtEndBorders"},615:{n:"BrtBeginFmts"},616:{n:"BrtEndFmts"},617:{n:"BrtBeginCellXFs"},618:{n:"BrtEndCellXFs"},619:{n:"BrtBeginStyles"},620:{n:"BrtEndStyles"},625:{n:"BrtBigName"},626:{n:"BrtBeginCellStyleXFs"},627:{n:"BrtEndCellStyleXFs"},628:{n:"BrtBeginComments"},629:{n:"BrtEndComments"},630:{n:"BrtBeginCommentAuthors"},631:{n:"BrtEndCommentAuthors"},632:{n:"BrtCommentAuthor",f:Fo},633:{n:"BrtBeginCommentList"},634:{n:"BrtEndCommentList"},635:{n:"BrtBeginComment",f:Ro},636:{n:"BrtEndComment"},637:{n:"BrtCommentText",f:It},638:{n:"BrtBeginOleObjects"},639:{n:"BrtOleObject"},640:{n:"BrtEndOleObjects"},641:{n:"BrtBeginSxrules"},642:{n:"BrtEndSxRules"},643:{n:"BrtBeginActiveXControls"},644:{n:"BrtActiveX"},645:{n:"BrtEndActiveXControls"},646:{n:"BrtBeginPCDSDTCEMembersSortBy"},648:{n:"BrtBeginCellIgnoreECs"},649:{n:"BrtCellIgnoreEC"},650:{n:"BrtEndCellIgnoreECs"},651:{n:"BrtCsProp",f:Dd},652:{n:"BrtCsPageSetup"},653:{n:"BrtBeginUserCsViews"},654:{n:"BrtEndUserCsViews"},655:{n:"BrtBeginUserCsView"},656:{n:"BrtEndUserCsView"},657:{n:"BrtBeginPcdSFCIEntries"},658:{n:"BrtEndPCDSFCIEntries"},659:{n:"BrtPCDSFCIEntry"},660:{n:"BrtBeginListParts"},661:{n:"BrtListPart"},662:{n:"BrtEndListParts"},663:{n:"BrtSheetCalcProp"},664:{n:"BrtBeginFnGroup"},665:{n:"BrtFnGroup"},666:{n:"BrtEndFnGroup"},667:{n:"BrtSupAddin"},668:{n:"BrtSXTDMPOrder"},669:{n:"BrtCsProtection"},671:{n:"BrtBeginWsSortMap"},672:{n:"BrtEndWsSortMap"},673:{n:"BrtBeginRRSort"},674:{n:"BrtEndRRSort"},675:{n:"BrtRRSortItem"},676:{n:"BrtFileSharingIso"},677:{n:"BrtBookProtectionIso"},678:{n:"BrtSheetProtectionIso"},679:{n:"BrtCsProtectionIso"},680:{n:"BrtRangeProtectionIso"},1024:{n:"BrtRwDescent"},1025:{n:"BrtKnownFonts"},1026:{n:"BrtBeginSXTupleSet"},1027:{n:"BrtEndSXTupleSet"},1028:{n:"BrtBeginSXTupleSetHeader"},1029:{n:"BrtEndSXTupleSetHeader"},1030:{n:"BrtSXTupleSetHeaderItem"},1031:{n:"BrtBeginSXTupleSetData"},1032:{n:"BrtEndSXTupleSetData"},1033:{n:"BrtBeginSXTupleSetRow"},1034:{n:"BrtEndSXTupleSetRow"},1035:{n:"BrtSXTupleSetRowItem"},1036:{n:"BrtNameExt"},1037:{n:"BrtPCDH14"},1038:{n:"BrtBeginPCDCalcMem14"},1039:{n:"BrtEndPCDCalcMem14"},1040:{n:"BrtSXTH14"},1041:{n:"BrtBeginSparklineGroup"},1042:{n:"BrtEndSparklineGroup"},1043:{n:"BrtSparkline"},1044:{n:"BrtSXDI14"},1045:{n:"BrtWsFmtInfoEx14"},1046:{n:"BrtBeginConditionalFormatting14"},1047:{n:"BrtEndConditionalFormatting14"},1048:{n:"BrtBeginCFRule14"},1049:{n:"BrtEndCFRule14"},1050:{n:"BrtCFVO14"},1051:{n:"BrtBeginDatabar14"},1052:{n:"BrtBeginIconSet14"},1053:{n:"BrtDVal14"},1054:{n:"BrtBeginDVals14"},1055:{n:"BrtColor14"},1056:{n:"BrtBeginSparklines"},1057:{n:"BrtEndSparklines"},1058:{n:"BrtBeginSparklineGroups"},1059:{n:"BrtEndSparklineGroups"},1061:{n:"BrtSXVD14"},1062:{n:"BrtBeginSXView14"},1063:{n:"BrtEndSXView14"},1064:{n:"BrtBeginSXView16"},1065:{n:"BrtEndSXView16"},1066:{n:"BrtBeginPCD14"},1067:{n:"BrtEndPCD14"},1068:{n:"BrtBeginExtConn14"},1069:{n:"BrtEndExtConn14"},1070:{n:"BrtBeginSlicerCacheIDs"},1071:{n:"BrtEndSlicerCacheIDs"},1072:{n:"BrtBeginSlicerCacheID"},1073:{n:"BrtEndSlicerCacheID"},1075:{n:"BrtBeginSlicerCache"},1076:{n:"BrtEndSlicerCache"},1077:{n:"BrtBeginSlicerCacheDef"},1078:{n:"BrtEndSlicerCacheDef"},1079:{n:"BrtBeginSlicersEx"},1080:{n:"BrtEndSlicersEx"},1081:{n:"BrtBeginSlicerEx"},1082:{n:"BrtEndSlicerEx"},1083:{n:"BrtBeginSlicer"},1084:{n:"BrtEndSlicer"},1085:{n:"BrtSlicerCachePivotTables"},1086:{n:"BrtBeginSlicerCacheOlapImpl"},1087:{n:"BrtEndSlicerCacheOlapImpl"},1088:{n:"BrtBeginSlicerCacheLevelsData"},1089:{n:"BrtEndSlicerCacheLevelsData"},1090:{n:"BrtBeginSlicerCacheLevelData"},1091:{n:"BrtEndSlicerCacheLevelData"},1092:{n:"BrtBeginSlicerCacheSiRanges"},1093:{n:"BrtEndSlicerCacheSiRanges"},1094:{n:"BrtBeginSlicerCacheSiRange"},1095:{n:"BrtEndSlicerCacheSiRange"},1096:{n:"BrtSlicerCacheOlapItem"},1097:{n:"BrtBeginSlicerCacheSelections"},1098:{n:"BrtSlicerCacheSelection"},1099:{n:"BrtEndSlicerCacheSelections"},1100:{n:"BrtBeginSlicerCacheNative"},1101:{n:"BrtEndSlicerCacheNative"},1102:{n:"BrtSlicerCacheNativeItem"},1103:{n:"BrtRangeProtection14"},1104:{n:"BrtRangeProtectionIso14"},1105:{n:"BrtCellIgnoreEC14"},1111:{n:"BrtList14"},1112:{n:"BrtCFIcon"},1113:{n:"BrtBeginSlicerCachesPivotCacheIDs"},1114:{n:"BrtEndSlicerCachesPivotCacheIDs"},1115:{n:"BrtBeginSlicers"},1116:{n:"BrtEndSlicers"},1117:{n:"BrtWbProp14"},1118:{n:"BrtBeginSXEdit"},1119:{n:"BrtEndSXEdit"},1120:{n:"BrtBeginSXEdits"},1121:{n:"BrtEndSXEdits"},1122:{n:"BrtBeginSXChange"},1123:{n:"BrtEndSXChange"},1124:{n:"BrtBeginSXChanges"},1125:{n:"BrtEndSXChanges"},1126:{n:"BrtSXTupleItems"},1128:{n:"BrtBeginSlicerStyle"},1129:{n:"BrtEndSlicerStyle"},1130:{n:"BrtSlicerStyleElement"},1131:{n:"BrtBeginStyleSheetExt14"},1132:{n:"BrtEndStyleSheetExt14"},1133:{n:"BrtBeginSlicerCachesPivotCacheID"},1134:{n:"BrtEndSlicerCachesPivotCacheID"},1135:{n:"BrtBeginConditionalFormattings"},1136:{n:"BrtEndConditionalFormattings"},1137:{n:"BrtBeginPCDCalcMemExt"},1138:{n:"BrtEndPCDCalcMemExt"},1139:{n:"BrtBeginPCDCalcMemsExt"},1140:{n:"BrtEndPCDCalcMemsExt"},1141:{n:"BrtPCDField14"},1142:{n:"BrtBeginSlicerStyles"},1143:{n:"BrtEndSlicerStyles"},1144:{n:"BrtBeginSlicerStyleElements"},1145:{n:"BrtEndSlicerStyleElements"},1146:{n:"BrtCFRuleExt"},1147:{n:"BrtBeginSXCondFmt14"},1148:{n:"BrtEndSXCondFmt14"},1149:{n:"BrtBeginSXCondFmts14"},1150:{n:"BrtEndSXCondFmts14"},1152:{n:"BrtBeginSortCond14"},1153:{n:"BrtEndSortCond14"},1154:{n:"BrtEndDVals14"},1155:{n:"BrtEndIconSet14"},1156:{n:"BrtEndDatabar14"},1157:{n:"BrtBeginColorScale14"},1158:{n:"BrtEndColorScale14"},1159:{n:"BrtBeginSxrules14"},1160:{n:"BrtEndSxrules14"},1161:{n:"BrtBeginPRule14"},1162:{n:"BrtEndPRule14"},1163:{n:"BrtBeginPRFilters14"},1164:{n:"BrtEndPRFilters14"},1165:{n:"BrtBeginPRFilter14"},1166:{n:"BrtEndPRFilter14"},1167:{n:"BrtBeginPRFItem14"},1168:{n:"BrtEndPRFItem14"},1169:{n:"BrtBeginCellIgnoreECs14"},1170:{n:"BrtEndCellIgnoreECs14"},1171:{n:"BrtDxf14"},1172:{n:"BrtBeginDxF14s"},1173:{n:"BrtEndDxf14s"},1177:{n:"BrtFilter14"},1178:{n:"BrtBeginCustomFilters14"},1180:{n:"BrtCustomFilter14"},1181:{n:"BrtIconFilter14"},1182:{n:"BrtPivotCacheConnectionName"},2048:{n:"BrtBeginDecoupledPivotCacheIDs"},2049:{n:"BrtEndDecoupledPivotCacheIDs"},2050:{n:"BrtDecoupledPivotCacheID"},2051:{n:"BrtBeginPivotTableRefs"},2052:{n:"BrtEndPivotTableRefs"},2053:{n:"BrtPivotTableRef"},2054:{n:"BrtSlicerCacheBookPivotTables"},2055:{n:"BrtBeginSxvcells"},2056:{n:"BrtEndSxvcells"},2057:{n:"BrtBeginSxRow"},2058:{n:"BrtEndSxRow"},2060:{n:"BrtPcdCalcMem15"},2067:{n:"BrtQsi15"},2068:{n:"BrtBeginWebExtensions"},2069:{n:"BrtEndWebExtensions"},2070:{n:"BrtWebExtension"},2071:{n:"BrtAbsPath15"},2072:{n:"BrtBeginPivotTableUISettings"},2073:{n:"BrtEndPivotTableUISettings"},2075:{n:"BrtTableSlicerCacheIDs"},2076:{n:"BrtTableSlicerCacheID"},2077:{n:"BrtBeginTableSlicerCache"},2078:{n:"BrtEndTableSlicerCache"},2079:{n:"BrtSxFilter15"},2080:{n:"BrtBeginTimelineCachePivotCacheIDs"},2081:{n:"BrtEndTimelineCachePivotCacheIDs"},2082:{n:"BrtTimelineCachePivotCacheID"},2083:{n:"BrtBeginTimelineCacheIDs"},2084:{n:"BrtEndTimelineCacheIDs"},2085:{n:"BrtBeginTimelineCacheID"},2086:{n:"BrtEndTimelineCacheID"},2087:{n:"BrtBeginTimelinesEx"},2088:{n:"BrtEndTimelinesEx"},2089:{n:"BrtBeginTimelineEx"},2090:{n:"BrtEndTimelineEx"},2091:{n:"BrtWorkBookPr15"},2092:{n:"BrtPCDH15"},2093:{n:"BrtBeginTimelineStyle"},2094:{n:"BrtEndTimelineStyle"},2095:{n:"BrtTimelineStyleElement"},2096:{n:"BrtBeginTimelineStylesheetExt15"},2097:{n:"BrtEndTimelineStylesheetExt15"},2098:{n:"BrtBeginTimelineStyles"},2099:{n:"BrtEndTimelineStyles"},2100:{n:"BrtBeginTimelineStyleElements"},2101:{n:"BrtEndTimelineStyleElements"},2102:{n:"BrtDxf15"},2103:{n:"BrtBeginDxfs15"},2104:{n:"brtEndDxfs15"},2105:{n:"BrtSlicerCacheHideItemsWithNoData"},2106:{n:"BrtBeginItemUniqueNames"},2107:{n:"BrtEndItemUniqueNames"},2108:{n:"BrtItemUniqueName"},2109:{n:"BrtBeginExtConn15"},2110:{n:"BrtEndExtConn15"},2111:{n:"BrtBeginOledbPr15"},2112:{n:"BrtEndOledbPr15"},2113:{n:"BrtBeginDataFeedPr15"},2114:{n:"BrtEndDataFeedPr15"},2115:{n:"BrtTextPr15"},2116:{n:"BrtRangePr15"},2117:{n:"BrtDbCommand15"},2118:{n:"BrtBeginDbTables15"},2119:{n:"BrtEndDbTables15"},2120:{n:"BrtDbTable15"},2121:{n:"BrtBeginDataModel"},2122:{n:"BrtEndDataModel"},2123:{n:"BrtBeginModelTables"},2124:{n:"BrtEndModelTables"},2125:{n:"BrtModelTable"},2126:{n:"BrtBeginModelRelationships"},2127:{n:"BrtEndModelRelationships"},2128:{n:"BrtModelRelationship"},2129:{n:"BrtBeginECTxtWiz15"},2130:{n:"BrtEndECTxtWiz15"},2131:{n:"BrtBeginECTWFldInfoLst15"},2132:{n:"BrtEndECTWFldInfoLst15"},2133:{n:"BrtBeginECTWFldInfo15"},2134:{n:"BrtFieldListActiveItem"},2135:{n:"BrtPivotCacheIdVersion"},2136:{n:"BrtSXDI15"},2137:{n:"BrtBeginModelTimeGroupings"},2138:{n:"BrtEndModelTimeGroupings"},2139:{n:"BrtBeginModelTimeGrouping"},2140:{n:"BrtEndModelTimeGrouping"},2141:{n:"BrtModelTimeGroupingCalcCol"},3072:{n:"BrtUid"},3073:{n:"BrtRevisionPtr"},5095:{n:"BrtBeginCalcFeatures"},5096:{n:"BrtEndCalcFeatures"},5097:{n:"BrtCalcFeature"},65535:{n:""}};var hp=K(up,"n");var dp={3:{n:"BIFF2NUM",f:js},4:{n:"BIFF2STR",f:zs},6:{n:"Formula",f:yu},9:{n:"BOF",f:Ci},10:{n:"EOF",f:Pn},12:{n:"CalcCount",f:Wn},13:{n:"CalcMode",f:Wn},14:{n:"CalcPrecision",f:Ln},15:{n:"CalcRefMode",f:Ln},16:{n:"CalcDelta",f:Gt},17:{n:"CalcIter",f:Ln},18:{n:"Protect",f:Ln},19:{n:"Password",f:Wn},20:{n:"Header",f:os},21:{n:"Footer",f:os},23:{n:"ExternSheet",f:vs},24:{n:"Lbl",f:ds},25:{n:"WinProtect",f:Ln},26:{n:"VerticalPageBreaks"},27:{n:"HorizontalPageBreaks"},28:{n:"Note",f:ks},29:{n:"Selection"},34:{n:"Date1904",f:Ln},35:{n:"ExternName",f:us},38:{n:"LeftMargin",f:Gt},39:{n:"RightMargin",f:Gt},40:{n:"TopMargin",f:Gt},41:{n:"BottomMargin",f:Gt},42:{n:"PrintRowCol",f:Ln},43:{n:"PrintGrid",f:Ln},47:{n:"FilePass",f:zf},49:{n:"Font",f:Hi},51:{n:"PrintSize",f:Wn},60:{n:"Continue"},61:{n:"Window1",f:Mi},64:{n:"Backup",f:Ln},65:{n:"Pane"},66:{n:"CodePage",f:Wn},77:{n:"Pls"},80:{n:"DCon"},81:{n:"DConRef"},82:{n:"DConName"},85:{n:"DefColWidth",f:Wn},89:{n:"XCT"},90:{n:"CRN"},91:{n:"FileSharing"},92:{n:"WriteAccess",f:xi},93:{n:"Obj",f:Bs},94:{n:"Uncalced"},95:{n:"CalcSaveRecalc",f:Ln},96:{n:"Template"},97:{n:"Intl"},99:{n:"ObjProtect",f:Ln},125:{n:"ColInfo",f:Ms},128:{n:"Guts",f:as},129:{n:"WsBool",f:_i},130:{n:"GridSet",f:Wn},131:{n:"HCenter",f:Ln},132:{n:"VCenter",f:Ln},133:{n:"BoundSheet8",f:Ai},134:{n:"WriteProtect"},140:{n:"Country",f:Fs},141:{n:"HideObj",f:Wn},144:{n:"Sort"},146:{n:"Palette",f:Ps},151:{n:"Sync"},152:{n:"LPr"},153:{n:"DxGCol"},154:{n:"FnGroupName"},155:{n:"FilterMode"},156:{n:"BuiltInFnGroupCount",f:Wn},157:{n:"AutoFilterInfo"},158:{n:"AutoFilter"},160:{n:"Scl",f:Vs},161:{n:"Setup",f:Ls},174:{n:"ScenMan"},175:{n:"SCENARIO"},176:{n:"SxView"},177:{n:"Sxvd"},178:{n:"SXVI"},180:{n:"SxIvd"},181:{n:"SXLI"},182:{n:"SXPI"},184:{n:"DocRoute"},185:{n:"RecipName"},189:{n:"MulRk",f:Zi},190:{n:"MulBlank",f:qi},193:{n:"Mms",f:Pn},197:{n:"SXDI"},198:{n:"SXDB"},199:{n:"SXFDB"},200:{n:"SXDBB"},201:{n:"SXNum"},202:{n:"SxBool",f:Ln},203:{n:"SxErr"},204:{n:"SXInt"},205:{n:"SXString"},206:{n:"SXDtr"},207:{n:"SxNil"},208:{n:"SXTbl"},209:{n:"SXTBRGIITM"},210:{n:"SxTbpg"},211:{n:"ObProj"},213:{n:"SXStreamID"},215:{n:"DBCell"},216:{n:"SXRng"},217:{n:"SxIsxoper"},218:{n:"BookBool",f:Wn},220:{n:"DbOrParamQry"},221:{n:"ScenarioProtect",f:Ln},222:{n:"OleObjectSize"},224:{n:"XF",f:rs},225:{n:"InterfaceHdr",f:Ti},226:{n:"InterfaceEnd",f:Pn},227:{n:"SXVS"},229:{n:"MergeCells",f:ws},233:{n:"BkHim"},235:{n:"MsoDrawingGroup"},236:{n:"MsoDrawing"},237:{n:"MsoDrawingSelection"},239:{n:"PhoneticInfo"},240:{n:"SxRule"},241:{n:"SXEx"},242:{n:"SxFilt"},244:{n:"SxDXF"},245:{n:"SxItm"},246:{n:"SxName"},247:{n:"SxSelect"},248:{n:"SXPair"},249:{n:"SxFmla"},251:{n:"SxFormat"},252:{n:"SST",f:yi},253:{n:"LabelSst",f:Xi},255:{n:"ExtSST",f:Fi},256:{n:"SXVDEx"},259:{n:"SXFormula"},290:{n:"SXDBEx"},311:{n:"RRDInsDel"},312:{n:"RRDHead"},315:{n:"RRDChgCell"},317:{n:"RRTabId",f:Vn},318:{n:"RRDRenSheet"},319:{n:"RRSort"},320:{n:"RRDMove"},330:{n:"RRFormat"},331:{n:"RRAutoFmt"},333:{n:"RRInsertSh"},334:{n:"RRDMoveBegin"},335:{n:"RRDMoveEnd"},336:{n:"RRDInsDelBegin"},337:{n:"RRDInsDelEnd"},338:{n:"RRDConflict"},339:{n:"RRDDefName"},340:{n:"RRDRstEtxp"},351:{n:"LRng"},352:{n:"UsesELFs",f:Ln},353:{n:"DSF",f:Pn},401:{n:"CUsr"},402:{n:"CbUsr"},403:{n:"UsrInfo"},404:{n:"UsrExcl"},405:{n:"FileLock"},406:{n:"RRDInfo"},407:{n:"BCUsrs"},408:{n:"UsrChk"},425:{n:"UserBView"},426:{n:"UserSViewBegin"},427:{n:"UserSViewEnd"},428:{n:"RRDUserView"},429:{n:"Qsi"},430:{n:"SupBook",f:cs},431:{n:"Prot4Rev",f:Ln},432:{n:"CondFmt"},433:{n:"CF"},434:{n:"DVal"},437:{n:"DConBin"},438:{n:"TxO",f:Is},439:{n:"RefreshAll",f:Ln},440:{n:"HLink",f:_s},441:{n:"Lel"},442:{n:"CodeName",f:Kn},443:{n:"SXFDBType"},444:{n:"Prot4RevPass",f:Wn},445:{n:"ObNoMacros"},446:{n:"Dv"},448:{n:"Excel9File",f:Pn},449:{n:"RecalcId",f:Pi,r:2},450:{n:"EntExU2",f:Pn},512:{n:"Dimensions",f:Yi},513:{n:"Blank",f:Hs},515:{n:"Number",f:fs},516:{n:"Label",f:Gi},517:{n:"BoolErr",f:is},518:{n:"Formula",f:yu},519:{n:"String",f:Xs},520:{n:"Row",f:Di},523:{n:"Index"},545:{n:"Array",f:gs},549:{n:"DefaultRowHeight",f:Ni},566:{n:"Table"},574:{n:"Window2",f:Ui},638:{n:"RK",f:Ji},659:{n:"Style"},1030:{n:"Formula",f:yu},1048:{n:"BigName"},1054:{n:"Format",f:ji},1084:{n:"ContinueBigName"},1212:{n:"ShrFmla",f:bs},2048:{n:"HLinkTooltip",f:Rs},2049:{n:"WebPub"},2050:{n:"QsiSXTag"},2051:{n:"DBQueryExt"},2052:{n:"ExtString"},2053:{n:"TxtQry"},2054:{n:"Qsir"},2055:{n:"Qsif"},2056:{n:"RRDTQSIF"},2057:{n:"BOF",f:Ci},2058:{n:"OleDbConn"},2059:{n:"WOpt"},2060:{n:"SXViewEx"},2061:{n:"SXTH"},2062:{n:"SXPIEx"},2063:{n:"SXVDTEx"},2064:{n:"SXViewEx9"},2066:{n:"ContinueFrt"},2067:{n:"RealTimeData"},2128:{n:"ChartFrtInfo"},2129:{n:"FrtWrapper"},2130:{n:"StartBlock"},2131:{n:"EndBlock"},2132:{n:"StartObject"},2133:{n:"EndObject"},2134:{n:"CatLab"},2135:{n:"YMult"},2136:{n:"SXViewLink"},2137:{n:"PivotChartBits"},2138:{n:"FrtFontList"},2146:{n:"SheetExt"},2147:{n:"BookExt",r:12},2148:{n:"SXAddl"},2149:{n:"CrErr"},2150:{n:"HFPicture"},2151:{n:"FeatHdr",f:Pn},2152:{n:"Feat"},2154:{n:"DataLabExt"},2155:{n:"DataLabExtContents"},2156:{n:"CellWatch"},2161:{n:"FeatHdr11"},2162:{n:"Feature11"},2164:{n:"DropDownObjIds"},2165:{n:"ContinueFrt11"},2166:{n:"DConn"},2167:{n:"List12"},2168:{n:"Feature12"},2169:{n:"CondFmt12"},2170:{n:"CF12"},2171:{n:"CFEx"},2172:{n:"XFCRC",f:Ns,r:12},2173:{n:"XFExt",f:po,r:12},2174:{n:"AutoFilter12"},2175:{n:"ContinueFrt12"},2180:{n:"MDTInfo"},2181:{n:"MDXStr"},2182:{n:"MDXTuple"},2183:{n:"MDXSet"},2184:{n:"MDXProp"},2185:{n:"MDXKPI"},2186:{n:"MDB"},2187:{n:"PLV"},2188:{n:"Compat12",f:Ln,r:12},2189:{n:"DXF"},2190:{n:"TableStyles",r:12},2191:{n:"TableStyle"},2192:{n:"TableStyleElement"},2194:{n:"StyleExt"},2195:{n:"NamePublish"},2196:{n:"NameCmt",f:ms,r:12},2197:{n:"SortData"},2198:{n:"Theme",f:lo,r:12},2199:{n:"GUIDTypeLib"},2200:{n:"FnGrp12"},2201:{n:"NameFnGrp12"},2202:{n:"MTRSettings",f:Es,r:12},2203:{n:"CompressPictures",f:Pn},2204:{n:"HeaderFooter"},2205:{n:"CrtLayout12"},2206:{n:"CrtMlFrt"},2207:{n:"CrtMlFrtContinue"},2211:{n:"ForceFullCalculation",f:Oi},2212:{n:"ShapePropsStream"},2213:{n:"TextPropsStream"},2214:{n:"RichTextStream"},2215:{n:"CrtLayout12A"},4097:{n:"Units"},4098:{n:"Chart"},4099:{n:"Series"},4102:{n:"DataFormat"},4103:{n:"LineFormat"},4105:{n:"MarkerFormat"},4106:{n:"AreaFormat"},4107:{n:"PieFormat"},4108:{n:"AttachedLabel"},4109:{n:"SeriesText"},4116:{n:"ChartFormat"},4117:{n:"Legend"},4118:{n:"SeriesList"},4119:{n:"Bar"},4120:{n:"Line"},4121:{n:"Pie"},4122:{n:"Area"},4123:{n:"Scatter"},4124:{n:"CrtLine"},4125:{n:"Axis"},4126:{n:"Tick"},4127:{n:"ValueRange"},4128:{n:"CatSerRange"},4129:{n:"AxisLine"},4130:{n:"CrtLink"},4132:{n:"DefaultText"},4133:{n:"Text"},4134:{n:"FontX",f:Wn},4135:{n:"ObjectLink"},4146:{n:"Frame"},4147:{n:"Begin"},4148:{n:"End"},4149:{n:"PlotArea"},4154:{n:"Chart3d"},4156:{n:"PicF"},4157:{n:"DropBar"},4158:{n:"Radar"},4159:{n:"Surf"},4160:{n:"RadarArea"},4161:{n:"AxisParent"},4163:{n:"LegendException"
+},4164:{n:"ShtProps",f:Us},4165:{n:"SerToCrt"},4166:{n:"AxesUsed"},4168:{n:"SBaseRef"},4170:{n:"SerParent"},4171:{n:"SerAuxTrend"},4174:{n:"IFmtRecord"},4175:{n:"Pos"},4176:{n:"AlRuns"},4177:{n:"BRAI"},4187:{n:"SerAuxErrBar"},4188:{n:"ClrtClient",f:Os},4189:{n:"SerFmt"},4191:{n:"Chart3DBarShape"},4192:{n:"Fbi"},4193:{n:"BopPop"},4194:{n:"AxcExt"},4195:{n:"Dat"},4196:{n:"PlotGrowth"},4197:{n:"SIIndex"},4198:{n:"GelFrame"},4199:{n:"BopPopCustom"},4200:{n:"Fbi2"},0:{n:"Dimensions",f:Yi},2:{n:"BIFF2INT",f:Ks},5:{n:"BoolErr",f:is},7:{n:"String",f:Qs},8:{n:"BIFF2ROW"},11:{n:"Index"},22:{n:"ExternCount",f:Wn},30:{n:"BIFF2FORMAT",f:Ki},31:{n:"BIFF2FMTCNT"},32:{n:"BIFF2COLINFO"},33:{n:"Array",f:gs},37:{n:"DefaultRowHeight",f:Ni},50:{n:"BIFF2FONTXTRA",f:Js},52:{n:"DDEObjName"},62:{n:"BIFF2WINDOW2"},67:{n:"BIFF2XF"},69:{n:"BIFF2FONTCLR"},86:{n:"BIFF4FMTCNT"},126:{n:"RK"},127:{n:"ImData",f:Gs},135:{n:"Addin"},136:{n:"Edg"},137:{n:"Pub"},145:{n:"Sub"},148:{n:"LHRecord"},149:{n:"LHNGraph"},150:{n:"Sound"},169:{n:"CoordList"},171:{n:"GCW"},188:{n:"ShrFmla"},191:{n:"ToolbarHdr"},192:{n:"ToolbarEnd"},194:{n:"AddMenu"},195:{n:"DelMenu"},214:{n:"RString",f:Zs},223:{n:"UDDesc"},234:{n:"TabIdConf"},354:{n:"XL5Modify"},421:{n:"FileSharing2"},521:{n:"BOF",f:Ci},536:{n:"Lbl",f:ds},547:{n:"ExternName",f:us},561:{n:"Font"},579:{n:"BIFF3XF"},1033:{n:"BOF",f:Ci},1091:{n:"BIFF4XF"},2157:{n:"FeatInfo"},2163:{n:"FeatInfo11"},2177:{n:"SXAddl12"},2240:{n:"AutoWebPub"},2241:{n:"ListObj"},2242:{n:"ListField"},2243:{n:"ListDV"},2244:{n:"ListCondFmt"},2245:{n:"ListCF"},2246:{n:"FMQry"},2247:{n:"FMSQry"},2248:{n:"PLV"},2249:{n:"LnExt"},2250:{n:"MkrExt"},2251:{n:"CrtCoopt"},2262:{n:"FRTArchId$",r:12},29282:{}};var vp=K(dp,"n");function pp(e,r,t,a){var n=+r||+vp[r];if(isNaN(n))return;var i=a||(t||[]).length||0;var s=e.next(4);s._W(2,n);s._W(2,i);if(i>0&&Rr(t))e.push(t)}function mp(e,r,t){if(!e)e=zr(7);e._W(2,r);e._W(2,t);e._W(2,0);e._W(1,0);return e}function bp(e,r,t,a){var n=zr(9);mp(n,e,r);if(a=="e"){n._W(1,t);n._W(1,1)}else{n._W(1,t?1:0);n._W(1,0)}return n}function gp(e,r,t){var a=zr(8+2*t.length);mp(a,e,r);a._W(1,t.length);a._W(t.length,t,"sbcs");return a.l<a.length?a.slice(0,a.l):a}function Ep(e,r,t,a){if(r.v!=null)switch(r.t){case"d":;case"n":var n=r.t=="d"?ee(ie(r.v)):r.v;if(n==(n|0)&&n>=0&&n<65536)pp(e,2,Ys(t,a,n));else pp(e,3,$s(t,a,n));return;case"b":;case"e":pp(e,5,bp(t,a,r.v,r.t));return;case"s":;case"str":pp(e,4,gp(t,a,r.v));return;}pp(e,1,mp(null,t,a))}function Sp(e,r,t,a){var n=Array.isArray(r);var i=vt(r["!ref"]||"A1"),s,f="",l=[];if(i.e.c>255||i.e.r>16383){if(a.WTF)throw new Error("Range "+(r["!ref"]||"A1")+" exceeds format limit A1:IV16384");i.e.c=Math.min(i.e.c,255);i.e.r=Math.min(i.e.c,16383);s=dt(i)}for(var o=i.s.r;o<=i.e.r;++o){f=tt(o);for(var c=i.s.c;c<=i.e.c;++c){if(o===i.s.r)l[c]=st(c);s=l[c]+f;var u=n?(r[o]||[])[c]:r[s];if(!u)continue;Ep(e,u,o,c,a)}}}function kp(e,r){var t=r||{};if(p!=null&&t.dense==null)t.dense=p;var a=$r();var n=0;for(var i=0;i<e.SheetNames.length;++i)if(e.SheetNames[i]==t.sheet)n=i;if(n==0&&!!t.sheet&&e.SheetNames[0]!=t.sheet)throw new Error("Sheet not found: "+t.sheet);pp(a,9,Bi(e,16,t));Sp(a,e.Sheets[e.SheetNames[n]],n,t,e);pp(a,10);return a.end()}function wp(e,r,t){pp(e,"Font",Vi({sz:12,color:{theme:1},name:"Arial",family:2,scheme:"minor"},t))}function Cp(e,r,t){if(!r)return;[[5,8],[23,26],[41,44],[50,392]].forEach(function(a){for(var n=a[0];n<=a[1];++n)if(r[n]!=null)pp(e,"Format",$i(n,r[n],t))})}function Bp(e,r){var t=zr(19);t._W(4,2151);t._W(4,0);t._W(4,0);t._W(2,3);t._W(1,1);t._W(4,0);pp(e,"FeatHdr",t);t=zr(39);t._W(4,2152);t._W(4,0);t._W(4,0);t._W(2,3);t._W(1,0);t._W(4,0);t._W(2,1);t._W(4,4);t._W(2,0);vi(vt(r["!ref"]||"A1"),t);t._W(4,4);pp(e,"Feat",t)}function Tp(e,r){for(var t=0;t<16;++t)pp(e,"XF",ts({numFmtId:0,style:true},0,r));r.cellXfs.forEach(function(t){pp(e,"XF",ts(t,0,r))})}function xp(e,r){for(var t=0;t<r["!links"].length;++t){var a=r["!links"][t];pp(e,"HLink",As(a));if(a[1].Tooltip)pp(e,"HLinkTooltip",ys(a))}delete r["!links"]}function Ip(e,r,t,a,n){var i=16+Ju(n.cellXfs,r,n);if(r.v!=null)switch(r.t){case"d":;case"n":var s=r.t=="d"?ee(ie(r.v)):r.v;pp(e,"Number",ls(t,a,s,i,n));return;case"b":;case"e":pp(e,517,ss(t,a,r.v,i,n,r.t));return;case"s":;case"str":pp(e,"Label",zi(t,a,r.v,i,n));return;}pp(e,"Blank",fi(t,a,i))}function _p(e,r,t){var a=$r();var n=t.SheetNames[e],i=t.Sheets[n]||{};var s=(t||{}).Workbook||{};var f=(s.Sheets||[])[e]||{};var l=Array.isArray(i);var o=r.biff==8;var c,u="",h=[];var d=vt(i["!ref"]||"A1");var v=o?65536:16384;if(d.e.c>255||d.e.r>=v){if(r.WTF)throw new Error("Range "+(i["!ref"]||"A1")+" exceeds format limit A1:IV16384");d.e.c=Math.min(d.e.c,255);d.e.r=Math.min(d.e.c,v-1)}pp(a,2057,Bi(t,16,r));pp(a,"CalcMode",Hn(1));pp(a,"CalcCount",Hn(100));pp(a,"CalcRefMode",Un(true));pp(a,"CalcIter",Un(false));pp(a,"CalcDelta",zt(.001));pp(a,"CalcSaveRecalc",Un(true));pp(a,"PrintRowCol",Un(false));pp(a,"PrintGrid",Un(false));pp(a,"GridSet",Hn(1));pp(a,"Guts",ns([0,0]));pp(a,"HCenter",Un(false));pp(a,"VCenter",Un(false));pp(a,512,Qi(d,r));if(o)i["!links"]=[];for(var p=d.s.r;p<=d.e.r;++p){u=tt(p);for(var m=d.s.c;m<=d.e.c;++m){if(p===d.s.r)h[m]=st(m);c=h[m]+u;var b=l?(i[p]||[])[m]:i[c];if(!b)continue;Ip(a,b,p,m,r);if(o&&b.l)i["!links"].push([c,b.l])}}var g=f.CodeName||f.name||n;if(o&&s.Views)pp(a,"Window2",Wi(s.Views[0]));if(o&&(i["!merges"]||[]).length)pp(a,"MergeCells",Cs(i["!merges"]));if(o)xp(a,i);pp(a,"CodeName",Qn(g,r));if(o)Bp(a,i);pp(a,"EOF");return a.end()}function Ap(e,r,t){var a=$r();var n=(e||{}).Workbook||{};var i=n.Sheets||[];var s=n.WBProps||{};var f=t.biff==8,l=t.biff==5;pp(a,2057,Bi(e,5,t));if(t.bookType=="xla")pp(a,"Addin");pp(a,"InterfaceHdr",f?Hn(1200):null);pp(a,"Mms",Nn(2));if(l)pp(a,"ToolbarHdr");if(l)pp(a,"ToolbarEnd");pp(a,"InterfaceEnd");pp(a,"WriteAccess",Ii("SheetJS",t));pp(a,"CodePage",Hn(f?1200:1252));if(f)pp(a,"DSF",Hn(0));if(f)pp(a,"Excel9File");pp(a,"RRTabId",Ws(e.SheetNames.length));if(f&&e.vbaraw){pp(a,"ObProj");var o=s.CodeName||"ThisWorkbook";pp(a,"CodeName",Qn(o,t))}pp(a,"BuiltInFnGroupCount",Hn(17));pp(a,"WinProtect",Un(false));pp(a,"Protect",Un(false));pp(a,"Password",Hn(0));if(f)pp(a,"Prot4Rev",Un(false));if(f)pp(a,"Prot4RevPass",Hn(0));pp(a,"Window1",Li(t));pp(a,"Backup",Un(false));pp(a,"HideObj",Hn(0));pp(a,"Date1904",Un(Xd(e)=="true"));pp(a,"CalcPrecision",Un(true));if(f)pp(a,"RefreshAll",Un(false));pp(a,"BookBool",Hn(0));wp(a,e,t);Cp(a,e.SSF,t);Tp(a,t);if(f)pp(a,"UsesELFs",Un(false));var c=a.end();var u=$r();if(f)pp(u,"Country",Ds());pp(u,"EOF");var h=u.end();var d=$r();var v=0,p=0;for(p=0;p<e.SheetNames.length;++p)v+=(f?12:11)+(f?2:1)*e.SheetNames[p].length;var m=c.length+v+h.length;for(p=0;p<e.SheetNames.length;++p){var b=i[p]||{};pp(d,"BoundSheet8",Ri({pos:m,hs:b.Hidden||0,dt:0,name:e.SheetNames[p]},t));m+=r[p].length}var g=d.end();if(v!=g.length)throw new Error("BS8 "+v+" != "+g.length);var E=[];if(c.length)E.push(c);if(g.length)E.push(g);if(h.length)E.push(h);return cr([E])}function Rp(e,r){var t=r||{};var a=[];if(e&&!e.SSF){e.SSF=F.get_table()}if(e&&e.SSF){D(F);F.load_table(e.SSF);t.revssf=Q(e.SSF);t.revssf[e.SSF[65535]]=0;t.ssf=e.SSF}t.cellXfs=[];t.Strings=[];t.Strings.Count=0;t.Strings.Unique=0;Ju(t.cellXfs,{},{revssf:{General:0}});for(var n=0;n<e.SheetNames.length;++n)a[a.length]=_p(n,t,e);a.unshift(Ap(e,a,t));return cr([a])}function yp(e,r){var t=r||{};switch(t.biff||2){case 8:;case 5:return Rp(e,r);case 4:;case 3:;case 2:return kp(e,r);}throw new Error("invalid type "+t.bookType+" for BIFF")}var Fp=function(){function e(e,r){var t=r||{};if(p!=null&&t.dense==null)t.dense=p;var a=t.dense?[]:{};var n=e.match(/<table/i);if(!n)throw new Error("Invalid HTML: could not find <table>");var i=e.match(/<\/table/i);var s=n.index,f=i&&i.index||e.length;var l=he(e.slice(s,f),/(:?<tr[^>]*>)/i,"<tr>");var o=-1,c=0,u=0,h=0;var d={s:{r:1e7,c:1e7},e:{r:0,c:0}};var v=[];for(s=0;s<l.length;++s){var m=l[s].trim();var b=m.slice(0,3).toLowerCase();if(b=="<tr"){++o;if(t.sheetRows&&t.sheetRows<=o){--o;break}c=0;continue}if(b!="<td"&&b!="<th")continue;var g=m.split(/<\/t[dh]>/i);for(f=0;f<g.length;++f){var E=g[f].trim();if(!E.match(/<t[dh]/i))continue;var S=E,k=0;while(S.charAt(0)=="<"&&(k=S.indexOf(">"))>-1)S=S.slice(k+1);var w=_e(E.slice(0,E.indexOf(">")));h=w.colspan?+w.colspan:1;if((u=+w.rowspan)>1||h>1)v.push({s:{r:o,c:c},e:{r:o+(u||1)-1,c:c+h-1}});var C=w.t||"";if(!S.length){c+=h;continue}S=Ye(S);if(d.s.r>o)d.s.r=o;if(d.e.r<o)d.e.r=o;if(d.s.c>c)d.s.c=c;if(d.e.c<c)d.e.c=c;if(!S.length)continue;var B={t:"s",v:S};if(t.raw||!S.trim().length||C=="s"){}else if(S==="TRUE")B={t:"b",v:true};else if(S==="FALSE")B={t:"b",v:false};else if(!isNaN(oe(S)))B={t:"n",v:oe(S)};else if(!isNaN(ce(S).getDate())){B={t:"d",v:ie(S)};if(!t.cellDates)B={t:"n",v:ee(B.v)};B.z=t.dateNF||F._table[14]}if(t.dense){if(!a[o])a[o]=[];a[o][c]=B}else a[ut({r:o,c:c})]=B;c+=h}}a["!ref"]=dt(d);return a}function r(r,t){return bt(e(r,t),t)}function t(e,r,t,a){var n=e["!merges"]||[];var i=[];for(var s=r.s.c;s<=r.e.c;++s){var f=0,l=0;for(var o=0;o<n.length;++o){if(n[o].s.r>t||n[o].s.c>s)continue;if(n[o].e.r<t||n[o].e.c<s)continue;if(n[o].s.r<t||n[o].s.c<s){f=-1;break}f=n[o].e.r-n[o].s.r+1;l=n[o].e.c-n[o].s.c+1;break}if(f<0)continue;var c=ut({r:t,c:s});var u=a.dense?(e[t]||[])[s]:e[c];var h={};if(f>1)h.rowspan=f;if(l>1)h.colspan=l;var d=u&&u.v!=null&&(u.h||Le(u.w||(mt(u),u.w)||""))||"";h.t=u&&u.t||"z";if(a.editable)d='<span contenteditable="true">'+d+"</span>";h.id="sjs-"+c;i.push(ar("td",d,h))}var v="<tr>";return v+i.join("")+"</tr>"}function a(e,r,t){var a=[];return a.join("")+"<table"+(t&&t.id?' id="'+t.id+'"':"")+">"}var n='<html><head><meta charset="utf-8"/><title>SheetJS Table Export</title></head><body>';var i="</body></html>";function s(e,r){var s=r||{};var f=s.header!=null?s.header:n;var l=s.footer!=null?s.footer:i;var o=[f];var c=ht(e["!ref"]);s.dense=Array.isArray(e);o.push(a(e,c,s));for(var u=c.s.r;u<=c.e.r;++u)o.push(t(e,c,u,s));o.push("</table>"+l);return o.join("")}return{to_workbook:r,to_sheet:e,_row:t,BEGIN:n,END:i,_preamble:a,from_sheet:s}}();function Dp(e,r){var t=r||{};if(p!=null)t.dense=p;var a=t.dense?[]:{};var n=e.getElementsByTagName("tr");var i=t.sheetRows||1e7;var s={s:{r:0,c:0},e:{r:0,c:0}};var f=[],l=0;var o=[];var c=0,u=0,h,d,v,m;for(;c<n.length&&u<i;++c){var b=n[c];if(Pp(b)){if(t.display)continue;o[u]={hidden:true}}var g=b.children;for(h=d=0;h<g.length;++h){var E=g[h];if(t.display&&Pp(E))continue;var S=Ye(E.innerHTML);for(l=0;l<f.length;++l){var k=f[l];if(k.s.c==d&&k.s.r<=u&&u<=k.e.r){d=k.e.c+1;l=-1}}m=+E.getAttribute("colspan")||1;if((v=+E.getAttribute("rowspan"))>0||m>1)f.push({s:{r:u,c:d},e:{r:u+(v||1)-1,c:d+m-1}});var w={t:"s",v:S};var C=E.getAttribute("t")||"";if(S!=null){if(S.length==0)w.t=C||"z";else if(t.raw||S.trim().length==0||C=="s"){}else if(S==="TRUE")w={t:"b",v:true};else if(S==="FALSE")w={t:"b",v:false};else if(!isNaN(oe(S)))w={t:"n",v:oe(S)};else if(!isNaN(ce(S).getDate())){w={t:"d",v:ie(S)};if(!t.cellDates)w={t:"n",v:ee(w.v)};w.z=t.dateNF||F._table[14]}}if(t.dense){if(!a[u])a[u]=[];a[u][d]=w}else a[ut({c:d,r:u})]=w;if(s.e.c<d)s.e.c=d;d+=m}++u}if(f.length)a["!merges"]=f;if(o.length)a["!rows"]=o;s.e.r=u-1;a["!ref"]=dt(s);if(u>=i)a["!fullref"]=dt((s.e.r=n.length-c+u-1,s));return a}function Op(e,r){return bt(Dp(e,r),r)}function Pp(e){var r="";var t=Np(e);if(t)r=t(e).getPropertyValue("display");if(!r)r=e.style.display;return r==="none"}function Np(e){if(e.ownerDocument.defaultView&&typeof e.ownerDocument.defaultView.getComputedStyle==="function")return e.ownerDocument.defaultView.getComputedStyle;if(typeof getComputedStyle==="function")return getComputedStyle;return null}var Mp=function(){var e=function(e){var r=e.replace(/[\t\r\n]/g," ").trim().replace(/ +/g," ").replace(/<text:s\/>/g," ").replace(/<text:s text:c="(\d+)"\/>/g,function(e,r){return Array(parseInt(r,10)+1).join(" ")}).replace(/<text:tab[^>]*\/>/g,"\t").replace(/<text:line-break\/>/g,"\n");var t=Fe(r.replace(/<[^>]*>/g,""));return[t]};var r={day:["d","dd"],month:["m","mm"],year:["y","yy"],hours:["h","hh"],minutes:["m","mm"],seconds:["s","ss"],"am-pm":["A/P","AM/PM"],"day-of-week":["ddd","dddd"],era:["e","ee"],quarter:["\\Qm",'m\\"th quarter"']};return function t(a,n){var i=n||{};if(p!=null&&i.dense==null)i.dense=p;var s=Lv(a);var f=[],l;var o;var c={name:""},u="",h=0;var d;var v;var m={},b=[];var g=i.dense?[]:{};var E,S;var k={value:""};var w="",C=0,B;var T=[];var x=-1,I=-1,_={s:{r:1e6,c:1e7},e:{r:0,c:0}};var A=0;var R={};var y=[],F={},D=0,O=0;var P=[],N=1,M=1;var L=[];var U={Names:[]};var W={};var H=["",""];var V=[],X={};var G="",z=0;var j=false,$=false;var K=0;Uv.lastIndex=0;s=s.replace(/<!--([\s\S]*?)-->/gm,"").replace(/<!DOCTYPE[^\[]*\[[^\]]*\]>/gm,"");while(E=Uv.exec(s))switch(E[3]=E[3].replace(/_.*$/,"")){case"table":;case"工作表":if(E[1]==="/"){if(_.e.c>=_.s.c&&_.e.r>=_.s.r)g["!ref"]=dt(_);if(i.sheetRows>0&&i.sheetRows<=_.e.r){g["!fullref"]=g["!ref"];_.e.r=i.sheetRows-1;g["!ref"]=dt(_)}if(y.length)g["!merges"]=y;if(P.length)g["!rows"]=P;d.name=d["名称"]||d.name;if(typeof JSON!=="undefined")JSON.stringify(d);b.push(d.name);m[d.name]=g;$=false}else if(E[0].charAt(E[0].length-2)!=="/"){d=_e(E[0],false);x=I=-1;_.s.r=_.s.c=1e7;_.e.r=_.e.c=0;g=i.dense?[]:{};y=[];P=[];$=true}break;case"table-row-group":if(E[1]==="/")--A;else++A;break;case"table-row":;case"行":if(E[1]==="/"){x+=N;N=1;break}v=_e(E[0],false);if(v["行号"])x=v["行号"]-1;else if(x==-1)x=0;N=+v["number-rows-repeated"]||1;if(N<10)for(K=0;K<N;++K)if(A>0)P[x+K]={level:A};I=-1;break;case"covered-table-cell":if(E[1]!=="/")++I;if(i.sheetStubs){if(i.dense){if(!g[x])g[x]=[];g[x][I]={t:"z"}}else g[ut({r:x,c:I})]={t:"z"}}w="";T=[];break;case"table-cell":;case"数据":if(E[0].charAt(E[0].length-2)==="/"){++I;k=_e(E[0],false);M=parseInt(k["number-columns-repeated"]||"1",10);S={t:"z",v:null};if(k.formula&&i.cellFormula!=false)S.f=Hu(Fe(k.formula));if((k["数据类型"]||k["value-type"])=="string"){S.t="s";S.v=Fe(k["string-value"]||"");if(i.dense){if(!g[x])g[x]=[];g[x][I]=S}else{g[ut({r:x,c:I})]=S}}I+=M-1}else if(E[1]!=="/"){++I;M=1;var Y=N?x+N-1:x;if(I>_.e.c)_.e.c=I;if(I<_.s.c)_.s.c=I;if(x<_.s.r)_.s.r=x;if(Y>_.e.r)_.e.r=Y;k=_e(E[0],false);V=[];X={};S={t:k["数据类型"]||k["value-type"],v:null};if(i.cellFormula){if(k.formula)k.formula=Fe(k.formula);if(k["number-matrix-columns-spanned"]&&k["number-matrix-rows-spanned"]){D=parseInt(k["number-matrix-rows-spanned"],10)||0;O=parseInt(k["number-matrix-columns-spanned"],10)||0;F={s:{r:x,c:I},e:{r:x+D-1,c:I+O-1}};S.F=dt(F);L.push([F,S.F])}if(k.formula)S.f=Hu(k.formula);else for(K=0;K<L.length;++K)if(x>=L[K][0].s.r&&x<=L[K][0].e.r)if(I>=L[K][0].s.c&&I<=L[K][0].e.c)S.F=L[K][1]}if(k["number-columns-spanned"]||k["number-rows-spanned"]){D=parseInt(k["number-rows-spanned"],10)||0;O=parseInt(k["number-columns-spanned"],10)||0;F={s:{r:x,c:I},e:{r:x+D-1,c:I+O-1}};y.push(F)}if(k["number-columns-repeated"])M=parseInt(k["number-columns-repeated"],10);switch(S.t){case"boolean":S.t="b";S.v=Ve(k["boolean-value"]);break;case"float":S.t="n";S.v=parseFloat(k.value);break;case"percentage":S.t="n";S.v=parseFloat(k.value);break;case"currency":S.t="n";S.v=parseFloat(k.value);break;case"date":S.t="d";S.v=ie(k["date-value"]);if(!i.cellDates){S.t="n";S.v=ee(S.v)}S.z="m/d/yy";break;case"time":S.t="n";S.v=te(k["time-value"])/86400;break;case"number":S.t="n";S.v=parseFloat(k["数据数值"]);break;default:if(S.t==="string"||S.t==="text"||!S.t){S.t="s";if(k["string-value"]!=null){w=Fe(k["string-value"]);T=[]}}else throw new Error("Unsupported value type "+S.t);}}else{j=false;if(S.t==="s"){S.v=w||"";if(T.length)S.R=T;j=C==0}if(W.Target)S.l=W;if(V.length>0){S.c=V;V=[]}if(w&&i.cellText!==false)S.w=w;if(!j||i.sheetStubs){if(!(i.sheetRows&&i.sheetRows<=x)){for(var Q=0;Q<N;++Q){M=parseInt(k["number-columns-repeated"]||"1",10);if(i.dense){if(!g[x+Q])g[x+Q]=[];g[x+Q][I]=Q==0?S:fe(S);while(--M>0)g[x+Q][I+M]=fe(S)}else{g[ut({r:x+Q,c:I})]=S;while(--M>0)g[ut({r:x+Q,c:I+M})]=fe(S)}if(_.e.c<=I)_.e.c=I}}}M=parseInt(k["number-columns-repeated"]||"1",10);I+=M-1;M=0;S={};w="";T=[]}W={};break;case"document":;case"document-content":;case"电子表格文档":;case"spreadsheet":;case"主体":;case"scripts":;case"styles":;case"font-face-decls":if(E[1]==="/"){if((l=f.pop())[0]!==E[3])throw"Bad state: "+l}else if(E[0].charAt(E[0].length-2)!=="/")f.push([E[3],true]);break;case"annotation":if(E[1]==="/"){if((l=f.pop())[0]!==E[3])throw"Bad state: "+l;X.t=w;if(T.length)X.R=T;X.a=G;V.push(X)}else if(E[0].charAt(E[0].length-2)!=="/"){f.push([E[3],false])}G="";z=0;w="";C=0;T=[];break;case"creator":if(E[1]==="/"){G=s.slice(z,E.index)}else z=E.index+E[0].length;break;case"meta":;case"元数据":;case"settings":;case"config-item-set":;case"config-item-map-indexed":;case"config-item-map-entry":;case"config-item-map-named":;case"shapes":;case"frame":;case"text-box":;case"image":;case"data-pilot-tables":;case"list-style":;case"form":;case"dde-links":;case"event-listeners":;case"chart":if(E[1]==="/"){if((l=f.pop())[0]!==E[3])throw"Bad state: "+l}else if(E[0].charAt(E[0].length-2)!=="/")f.push([E[3],false]);w="";C=0;T=[];break;case"scientific-number":break;case"currency-symbol":break;case"currency-style":break;case"number-style":;case"percentage-style":;case"date-style":;case"time-style":if(E[1]==="/"){R[c.name]=u;if((l=f.pop())[0]!==E[3])throw"Bad state: "+l}else if(E[0].charAt(E[0].length-2)!=="/"){u="";c=_e(E[0],false);f.push([E[3],true])}break;case"script":break;case"libraries":break;case"automatic-styles":break;case"master-styles":break;case"default-style":;case"page-layout":break;case"style":break;case"map":break;case"font-face":break;case"paragraph-properties":break;case"table-properties":break;case"table-column-properties":break;case"table-row-properties":break;case"table-cell-properties":break;case"number":switch(f[f.length-1][0]){case"time-style":;case"date-style":o=_e(E[0],false);u+=r[E[3]][o.style==="long"?1:0];break;}break;case"fraction":break;case"day":;case"month":;case"year":;case"era":;case"day-of-week":;case"week-of-year":;case"quarter":;case"hours":;case"minutes":;case"seconds":;case"am-pm":switch(f[f.length-1][0]){case"time-style":;case"date-style":o=_e(E[0],false);u+=r[E[3]][o.style==="long"?1:0];break;}break;case"boolean-style":break;case"boolean":break;case"text-style":break;case"text":if(E[0].slice(-2)==="/>")break;else if(E[1]==="/")switch(f[f.length-1][0]){case"number-style":;case"date-style":;case"time-style":u+=s.slice(h,E.index);break;}else h=E.index+E[0].length;break;case"named-range":o=_e(E[0],false);H=Xu(o["cell-range-address"]);var J={Name:o.name,Ref:H[0]+"!"+H[1]};if($)J.Sheet=b.length;U.Names.push(J);break;case"text-content":break;case"text-properties":break;case"embedded-text":break;case"body":;case"电子表格":break;case"forms":break;case"table-column":break;case"table-header-rows":break;case"table-rows":break;case"table-column-group":break;case"table-header-columns":break;case"table-columns":break;case"null-date":break;case"graphic-properties":break;case"calculation-settings":break;case"named-expressions":break;case"label-range":break;case"label-ranges":break;case"named-expression":break;case"sort":break;case"sort-by":break;case"sort-groups":break;case"tab":break;case"line-break":break;case"span":break;case"p":;case"文本串":if(E[1]==="/"&&(!k||!k["string-value"])){var Z=e(s.slice(C,E.index),B);w=(w.length>0?w+"\n":"")+Z[0]}else{B=_e(E[0],false);C=E.index+E[0].length}break;case"s":break;case"database-range":if(E[1]==="/")break;try{H=Xu(_e(E[0])["target-range-address"]);m[H[0]]["!autofilter"]={ref:H[1]}}catch(q){}break;case"date":break;case"object":break;case"title":;case"标题":break;case"desc":break;case"binary-data":break;case"table-source":break;case"scenario":break;case"iteration":break;case"content-validations":break;case"content-validation":break;case"help-message":break;case"error-message":break;case"database-ranges":break;case"filter":break;case"filter-and":break;case"filter-or":break;case"filter-condition":break;case"list-level-style-bullet":break;case"list-level-style-number":break;case"list-level-properties":break;case"sender-firstname":;case"sender-lastname":;case"sender-initials":;case"sender-title":;case"sender-position":;case"sender-email":;case"sender-phone-private":;case"sender-fax":;case"sender-company":;case"sender-phone-work":;case"sender-street":;case"sender-city":;case"sender-postal-code":;case"sender-country":;case"sender-state-or-province":;case"author-name":;case"author-initials":;case"chapter":;case"file-name":;case"template-name":;case"sheet-name":break;case"event-listener":break;case"initial-creator":;case"creation-date":;case"print-date":;case"generator":;case"document-statistic":;case"user-defined":;case"editing-duration":;case"editing-cycles":break;case"config-item":break;case"page-number":break;case"page-count":break;case"time":break;case"cell-range-source":break;case"detective":break;case"operation":break;case"highlighted-range":break;case"data-pilot-table":;case"source-cell-range":;case"source-service":;case"data-pilot-field":;case"data-pilot-level":;case"data-pilot-subtotals":;case"data-pilot-subtotal":;case"data-pilot-members":;case"data-pilot-member":;case"data-pilot-display-info":;case"data-pilot-sort-info":;case"data-pilot-layout-info":;case"data-pilot-field-reference":;case"data-pilot-groups":;case"data-pilot-group":;case"data-pilot-group-member":break;case"rect":break;case"dde-connection-decls":;case"dde-connection-decl":;case"dde-link":;case"dde-source":break;case"properties":break;case"property":break;case"a":if(E[1]!=="/"){W=_e(E[0],false);if(!W.href)break;W.Target=W.href;delete W.href;if(W.Target.charAt(0)=="#"&&W.Target.indexOf(".")>-1){H=Xu(W.Target.slice(1));W.Target="#"+H[0]+"!"+H[1]}}break;case"table-protection":break;case"data-pilot-grand-total":break;case"office-document-common-attrs":break;default:switch(E[2]){case"dc:":;case"calcext:":;case"loext:":;case"ooo:":;case"chartooo:":;case"draw:":;case"style:":;case"chart:":;case"form:":;case"uof:":;case"表:":;case"字:":break;default:if(i.WTF)throw new Error(E);};}var re={Sheets:m,SheetNames:b,Workbook:U};if(i.bookSheets)delete re.Sheets;return re}}();function Lp(e,r){r=r||{};var t=!!me(e,"objectdata");if(t)La(ge(e,"META-INF/manifest.xml"),r);var a=Ee(e,"content.xml");if(!a)throw new Error("Missing content.xml in "+(t?"ODS":"UOF")+" file");var n=Mp(t?a:Xe(a),r);if(me(e,"meta.xml"))n.Props=ja(ge(e,"meta.xml"));return n}function Up(e,r){return Mp(e,r)}var Wp=function(){var e="<office:document-styles "+tr({"xmlns:office":"urn:oasis:names:tc:opendocument:xmlns:office:1.0","xmlns:table":"urn:oasis:names:tc:opendocument:xmlns:table:1.0","xmlns:style":"urn:oasis:names:tc:opendocument:xmlns:style:1.0","xmlns:text":"urn:oasis:names:tc:opendocument:xmlns:text:1.0","xmlns:draw":"urn:oasis:names:tc:opendocument:xmlns:drawing:1.0","xmlns:fo":"urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0","xmlns:xlink":"http://www.w3.org/1999/xlink","xmlns:dc":"http://purl.org/dc/elements/1.1/","xmlns:number":"urn:oasis:names:tc:opendocument:xmlns:datastyle:1.0","xmlns:svg":"urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0","xmlns:of":"urn:oasis:names:tc:opendocument:xmlns:of:1.2","office:version":"1.2"})+"></office:document-styles>";return function r(){return Ce+e}}();var Hp=function(){var e=function(e){return Pe(e).replace(/  +/g,function(e){return'<text:s text:c="'+e.length+'"/>'}).replace(/\t/g,"<text:tab/>").replace(/\n/g,"<text:line-break/>").replace(/^ /,"<text:s/>").replace(/ $/,"<text:s/>")};var r="          <table:table-cell />\n";var t="          <table:covered-table-cell/>\n";var a=function(a,n,i){var s=[];s.push('      <table:table table:name="'+Pe(n.SheetNames[i])+'">\n');var f=0,l=0,o=ht(a["!ref"]);var c=a["!merges"]||[],u=0;var h=Array.isArray(a);for(f=0;f<o.s.r;++f)s.push("        <table:table-row></table:table-row>\n");for(;f<=o.e.r;++f){s.push("        <table:table-row>\n");for(l=0;l<o.s.c;++l)s.push(r);for(;l<=o.e.c;++l){var d=false,v={},p="";for(u=0;u!=c.length;++u){if(c[u].s.c>l)continue;if(c[u].s.r>f)continue;if(c[u].e.c<l)continue;if(c[u].e.r<f)continue;if(c[u].s.c!=l||c[u].s.r!=f)d=true;v["table:number-columns-spanned"]=c[u].e.c-c[u].s.c+1;v["table:number-rows-spanned"]=c[u].e.r-c[u].s.r+1;break}if(d){s.push(t);continue}var m=ut({r:f,c:l}),b=h?(a[f]||[])[l]:a[m];if(b&&b.f){v["table:formula"]=Pe(Vu(b.f));if(b.F){if(b.F.slice(0,m.length)==m){var g=ht(b.F);v["table:number-matrix-columns-spanned"]=g.e.c-g.s.c+1;v["table:number-matrix-rows-spanned"]=g.e.r-g.s.r+1}}}if(!b){s.push(r);continue}switch(b.t){case"b":p=b.v?"TRUE":"FALSE";v["office:value-type"]="boolean";v["office:boolean-value"]=b.v?"true":"false";break;case"n":p=b.w||String(b.v||0);v["office:value-type"]="float";v["office:value"]=b.v||0;break;case"s":;case"str":p=b.v;v["office:value-type"]="string";break;case"d":p=b.w||ie(b.v).toISOString();v["office:value-type"]="date";v["office:date-value"]=ie(b.v).toISOString();v["table:style-name"]="ce1";break;default:s.push(r);continue;}var E=e(p);if(b.l&&b.l.Target){var S=b.l.Target;S=S.charAt(0)=="#"?"#"+Gu(S.slice(1)):S;E=ar("text:a",E,{"xlink:href":S})}s.push("          "+ar("table:table-cell",ar("text:p",E,{}),v)+"\n")}s.push("        </table:table-row>\n")}s.push("      </table:table>\n");return s.join("")};var n=function(e){e.push(" <office:automatic-styles>\n");e.push('  <number:date-style style:name="N37" number:automatic-order="true">\n');e.push('   <number:month number:style="long"/>\n');e.push("   <number:text>/</number:text>\n");e.push('   <number:day number:style="long"/>\n');e.push("   <number:text>/</number:text>\n");e.push("   <number:year/>\n");e.push("  </number:date-style>\n");e.push('  <style:style style:name="ce1" style:family="table-cell" style:parent-style-name="Default" style:data-style-name="N37"/>\n');e.push(" </office:automatic-styles>\n")};return function i(e,r){var t=[Ce];var i=tr({"xmlns:office":"urn:oasis:names:tc:opendocument:xmlns:office:1.0","xmlns:table":"urn:oasis:names:tc:opendocument:xmlns:table:1.0","xmlns:style":"urn:oasis:names:tc:opendocument:xmlns:style:1.0","xmlns:text":"urn:oasis:names:tc:opendocument:xmlns:text:1.0","xmlns:draw":"urn:oasis:names:tc:opendocument:xmlns:drawing:1.0","xmlns:fo":"urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0","xmlns:xlink":"http://www.w3.org/1999/xlink","xmlns:dc":"http://purl.org/dc/elements/1.1/","xmlns:meta":"urn:oasis:names:tc:opendocument:xmlns:meta:1.0","xmlns:number":"urn:oasis:names:tc:opendocument:xmlns:datastyle:1.0","xmlns:presentation":"urn:oasis:names:tc:opendocument:xmlns:presentation:1.0","xmlns:svg":"urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0","xmlns:chart":"urn:oasis:names:tc:opendocument:xmlns:chart:1.0","xmlns:dr3d":"urn:oasis:names:tc:opendocument:xmlns:dr3d:1.0","xmlns:math":"http://www.w3.org/1998/Math/MathML","xmlns:form":"urn:oasis:names:tc:opendocument:xmlns:form:1.0","xmlns:script":"urn:oasis:names:tc:opendocument:xmlns:script:1.0","xmlns:ooo":"http://openoffice.org/2004/office","xmlns:ooow":"http://openoffice.org/2004/writer","xmlns:oooc":"http://openoffice.org/2004/calc","xmlns:dom":"http://www.w3.org/2001/xml-events","xmlns:xforms":"http://www.w3.org/2002/xforms","xmlns:xsd":"http://www.w3.org/2001/XMLSchema","xmlns:xsi":"http://www.w3.org/2001/XMLSchema-instance","xmlns:sheet":"urn:oasis:names:tc:opendocument:sh33tjs:1.0","xmlns:rpt":"http://openoffice.org/2005/report","xmlns:of":"urn:oasis:names:tc:opendocument:xmlns:of:1.2","xmlns:xhtml":"http://www.w3.org/1999/xhtml","xmlns:grddl":"http://www.w3.org/2003/g/data-view#","xmlns:tableooo":"http://openoffice.org/2009/table","xmlns:drawooo":"http://openoffice.org/2010/draw","xmlns:calcext":"urn:org:documentfoundation:names:experimental:calc:xmlns:calcext:1.0","xmlns:loext":"urn:org:documentfoundation:names:experimental:office:xmlns:loext:1.0","xmlns:field":"urn:openoffice:names:experimental:ooo-ms-interop:xmlns:field:1.0","xmlns:formx":"urn:openoffice:names:experimental:ooxml-odf-interop:xmlns:form:1.0","xmlns:css3t":"http://www.w3.org/TR/css3-text/","office:version":"1.2"});var s=tr({"xmlns:config":"urn:oasis:names:tc:opendocument:xmlns:config:1.0","office:mimetype":"application/vnd.oasis.opendocument.spreadsheet"});if(r.bookType=="fods")t.push("<office:document"+i+s+">\n");else t.push("<office:document-content"+i+">\n");n(t);t.push("  <office:body>\n");t.push("    <office:spreadsheet>\n");for(var f=0;f!=e.SheetNames.length;++f)t.push(a(e.Sheets[e.SheetNames[f]],e,f,r));t.push("    </office:spreadsheet>\n");t.push("  </office:body>\n");if(r.bookType=="fods")t.push("</office:document>");else t.push("</office:document-content>");return t.join("")}}();function Vp(e,r){if(r.bookType=="fods")return Hp(e,r);var t=new ke;var a="";var n=[];var i=[];a="mimetype";t.file(a,"application/vnd.oasis.opendocument.spreadsheet");a="content.xml";t.file(a,Hp(e,r));n.push([a,"text/xml"]);i.push([a,"ContentFile"]);a="styles.xml";t.file(a,Wp(e,r));n.push([a,"text/xml"]);i.push([a,"StylesFile"]);a="meta.xml";t.file(a,Xa());n.push([a,"text/xml"]);i.push([a,"MetadataFile"]);a="manifest.rdf";t.file(a,Va(i));n.push([a,"application/rdf+xml"]);a="META-INF/manifest.xml";t.file(a,Ua(n));return t}function Xp(e,r){if(!r)return 0;var t=e.SheetNames.indexOf(r);if(t==-1)throw new Error("Sheet not found: "+r);return t}function Gp(e){return function r(t,a){var n=Xp(t,a.sheet);return e.from_sheet(t.Sheets[t.SheetNames[n]],a,t)}}var zp=Gp(Fp);var jp=Gp({from_sheet:Om});var $p=Gp(ef);var Kp=Gp(rf);var Yp=Gp(af);var Qp=Gp(jf);var Jp=Gp({from_sheet:Pm});var Zp=Gp(qs);var qp=Gp(tf);function em(e){return function r(t){for(var a=0;a!=e.length;++a){var n=e[a];if(t[n[0]]===undefined)t[n[0]]=n[1];if(n[2]==="n")t[n[0]]=Number(t[n[0]])}}}var rm=em([["cellNF",false],["cellHTML",true],["cellFormula",true],["cellStyles",false],["cellText",true],["cellDates",false],["sheetStubs",false],["sheetRows",0,"n"],["bookDeps",false],["bookSheets",false],["bookProps",false],["bookFiles",false],["bookVBA",false],["password",""],["WTF",false]]);var tm=em([["cellDates",false],["bookSST",false],["bookType","xlsx"],["compression",false],["WTF",false]]);function am(e){if(ya.WS.indexOf(e)>-1)return"sheet";if(ya.CS&&e==ya.CS)return"chart";if(ya.DS&&e==ya.DS)return"dialog";if(ya.MS&&e==ya.MS)return"macro";return e&&e.length?e:"sheet"}function nm(e,r){if(!e)return 0;try{e=r.map(function a(r){if(!r.id)r.id=r.strRelID;return[r.name,e["!id"][r.id].Target,am(e["!id"][r.id].Type)]})}catch(t){return null}return!e||e.length===0?null:e}function im(e,r,t,a,n,i,s,f,l,o,c,u){try{i[a]=Da(Ee(e,t,true),r);var h=ge(e,r);var d;switch(f){case"sheet":d=uv(h,r,n,l,i[a],o,c,u);break;case"chart":d=hv(h,r,n,l,i[a],o,c,u);if(!d||!d["!chart"])break;var v=we(d["!chart"].Target,r);var p=Fa(v);var m=wo(Ee(e,v,true),Da(Ee(e,p,true),v));var b=we(m,v);var g=Fa(b);d=Ad(Ee(e,b,true),b,l,Da(Ee(e,g,true),b),o,d);break;case"macro":d=dv(h,r,n,l,i[a],o,c,u);break;case"dialog":d=vv(h,r,n,l,i[a],o,c,u);break;}s[a]=d}catch(E){if(l.WTF)throw E}}function sm(e){return e.charAt(0)=="/"?e.slice(1):e}function fm(e,r){D(F);r=r||{};rm(r);if(me(e,"META-INF/manifest.xml"))return Lp(e,r);if(me(e,"objectdata.xml"))return Lp(e,r);if(me(e,"Index/Document.iwa"))throw new Error("Unsupported NUMBERS file");var t=Se(e);var a=Ia(Ee(e,"[Content_Types].xml"));var n=false;var i,s;if(a.workbooks.length===0){s="xl/workbook.xml";if(ge(e,s,true))a.workbooks.push(s)}if(a.workbooks.length===0){s="xl/workbook.bin";if(!ge(e,s,true))throw new Error("Could not find workbook");a.workbooks.push(s);n=true}if(a.workbooks[0].slice(-3)=="bin")n=true;var f={};var l={};if(!r.bookSheets&&!r.bookProps){zu=[];if(a.sst)try{zu=bv(ge(e,sm(a.sst)),a.sst,r)}catch(o){if(r.WTF)throw o}if(r.cellStyles&&a.themes.length)f=mv(Ee(e,a.themes[0].replace(/^\//,""),true)||"",a.themes[0],r);if(a.style)l=pv(ge(e,sm(a.style)),a.style,f,r);
+}a.links.map(function(t){return Sv(ge(e,sm(t)),t,r)});var c=cv(ge(e,sm(a.workbooks[0])),a.workbooks[0],r);var u={},h="";if(a.coreprops.length){h=ge(e,sm(a.coreprops[0]),true);if(h)u=ja(h);if(a.extprops.length!==0){h=ge(e,sm(a.extprops[0]),true);if(h)qa(h,u,r)}}var d={};if(!r.bookSheets||r.bookProps){if(a.custprops.length!==0){h=Ee(e,sm(a.custprops[0]),true);if(h)d=an(h,r)}}var v={};if(r.bookSheets||r.bookProps){if(c.Sheets)i=c.Sheets.map(function _(e){return e.name});else if(u.Worksheets&&u.SheetNames.length>0)i=u.SheetNames;if(r.bookProps){v.Props=u;v.Custprops=d}if(r.bookSheets&&typeof i!=="undefined")v.SheetNames=i;if(r.bookSheets?v.SheetNames:r.bookProps)return v}i={};var p={};if(r.bookDeps&&a.calcchain)p=Ev(ge(e,sm(a.calcchain)),a.calcchain,r);var m=0;var b={};var g,E;{var S=c.Sheets;u.Worksheets=S.length;u.SheetNames=[];for(var k=0;k!=S.length;++k){u.SheetNames[k]=S[k].name}}var w=n?"bin":"xml";var C=a.workbooks[0].lastIndexOf("/");var B=(a.workbooks[0].slice(0,C+1)+"_rels/"+a.workbooks[0].slice(C+1)+".rels").replace(/^\//,"");if(!me(e,B))B="xl/_rels/workbook."+w+".rels";var T=Da(Ee(e,B,true),B);if(T)T=nm(T,c.Sheets);var x=ge(e,"xl/worksheets/sheet.xml",true)?1:0;for(m=0;m!=u.Worksheets;++m){var I="sheet";if(T&&T[m]){g="xl/"+T[m][1].replace(/[\/]?xl\//,"");if(!me(e,g))g=T[m][1];if(!me(e,g))g=B.replace(/_rels\/.*$/,"")+T[m][1];I=T[m][2]}else{g="xl/worksheets/sheet"+(m+1-x)+"."+w;g=g.replace(/sheet0\./,"sheet.")}E=g.replace(/^(.*)(\/)([^\/]*)$/,"$1/_rels/$3.rels");im(e,g,E,u.SheetNames[m],m,b,i,I,r,c,f,l)}if(a.comments)To(e,a.comments,i,b,r);v={Directory:a,Workbook:c,Props:u,Custprops:d,Deps:p,Sheets:i,SheetNames:u.SheetNames,Strings:zu,Styles:l,Themes:f,SSF:F.get_table()};if(r.bookFiles){v.keys=t;v.files=e.files}if(r.bookVBA){if(a.vba.length>0)v.vbaraw=ge(e,sm(a.vba[0]),true);else if(a.defaults&&a.defaults.bin===No)v.vbaraw=ge(e,"xl/vbaProject.bin",true)}return v}function lm(e,r){var t=r||{};var a="Workbook",n=H.find(e,a);try{a="/!DataSpaces/Version";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);Tf(n.content);a="/!DataSpaces/DataSpaceMap";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);var i=If(n.content);if(i.length!==1||i[0].comps.length!==1||i[0].comps[0].t!==0||i[0].name!=="StrongEncryptionDataSpace"||i[0].comps[0].v!=="EncryptedPackage")throw new Error("ECMA-376 Encrypted file bad "+a);a="/!DataSpaces/DataSpaceInfo/StrongEncryptionDataSpace";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);var s=_f(n.content);if(s.length!=1||s[0]!="StrongEncryptionTransform")throw new Error("ECMA-376 Encrypted file bad "+a);a="/!DataSpaces/TransformInfo/StrongEncryptionTransform/!Primary";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);Rf(n.content)}catch(f){}a="/EncryptionInfo";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);var l=Df(n.content);a="/EncryptedPackage";n=H.find(e,a);if(!n||!n.content)throw new Error("ECMA-376 Encrypted file missing "+a);if(l[0]==4&&typeof decrypt_agile!=="undefined")return decrypt_agile(l[1],n.content,t.password||"",t);if(l[0]==2&&typeof decrypt_std76!=="undefined")return decrypt_std76(l[1],n.content,t.password||"",t);throw new Error("File is password-protected")}function om(e,r){Co=1024;if(r.bookType=="ods")return Vp(e,r);if(e&&!e.SSF){e.SSF=F.get_table()}if(e&&e.SSF){D(F);F.load_table(e.SSF);r.revssf=Q(e.SSF);r.revssf[e.SSF[65535]]=0;r.ssf=e.SSF}r.rels={};r.wbrels={};r.Strings=[];r.Strings.Count=0;r.Strings.Unique=0;if($u)r.revStrings=new Map;else{r.revStrings={};r.revStrings.foo=[];delete r.revStrings.foo}var t=r.bookType=="xlsb"?"bin":"xml";var a=Uo.indexOf(r.bookType)>-1;var n=xa();tm(r=r||{});var i=new ke;var s="",f=0;r.cellXfs=[];Ju(r.cellXfs,{},{revssf:{General:0}});if(!e.Props)e.Props={};s="docProps/core.xml";i.file(s,Ya(e.Props,r));n.coreprops.push(s);Na(r.rels,2,s,ya.CORE_PROPS);s="docProps/app.xml";if(e.Props&&e.Props.SheetNames){}else if(!e.Workbook||!e.Workbook.Sheets)e.Props.SheetNames=e.SheetNames;else{var l=[];for(var o=0;o<e.SheetNames.length;++o)if((e.Workbook.Sheets[o]||{}).Hidden!=2)l.push(e.SheetNames[o]);e.Props.SheetNames=l}e.Props.Worksheets=e.Props.SheetNames.length;i.file(s,rn(e.Props,r));n.extprops.push(s);Na(r.rels,3,s,ya.EXT_PROPS);if(e.Custprops!==e.Props&&j(e.Custprops||{}).length>0){s="docProps/custom.xml";i.file(s,sn(e.Custprops,r));n.custprops.push(s);Na(r.rels,4,s,ya.CUST_PROPS)}for(f=1;f<=e.SheetNames.length;++f){var c={"!id":{}};var u=e.Sheets[e.SheetNames[f-1]];var h=(u||{})["!type"]||"sheet";switch(h){case"chart":;default:s="xl/worksheets/sheet"+f+"."+t;i.file(s,wv(f-1,s,r,e,c));n.sheets.push(s);Na(r.wbrels,-1,"worksheets/sheet"+f+"."+t,ya.WS[0]);}if(u){var d=u["!comments"];var v=false;if(d&&d.length>0){var p="xl/comments"+f+"."+t;i.file(p,xv(d,p,r));n.comments.push(p);Na(c,-1,"../comments"+f+"."+t,ya.CMNT);v=true}if(u["!legacy"]){if(v)i.file("xl/drawings/vmlDrawing"+f+".vml",Bo(f,u["!comments"]))}delete u["!comments"];delete u["!legacy"]}if(c["!id"].rId1)i.file(Fa(s),Pa(c))}if(r.Strings!=null&&r.Strings.length>0){s="xl/sharedStrings."+t;i.file(s,Tv(r.Strings,s,r));n.strs.push(s);Na(r.wbrels,-1,"sharedStrings."+t,ya.SST)}s="xl/workbook."+t;i.file(s,kv(e,s,r));n.workbooks.push(s);Na(r.rels,1,s,ya.WB);s="xl/theme/theme1.xml";i.file(s,fo(e.Themes,r));n.themes.push(s);Na(r.wbrels,-1,"theme/theme1.xml",ya.THEME);s="xl/styles."+t;i.file(s,Bv(e,s,r));n.styles.push(s);Na(r.wbrels,-1,"styles."+t,ya.STY);if(e.vbaraw&&a){s="xl/vbaProject.bin";i.file(s,e.vbaraw);n.vba.push(s);Na(r.wbrels,-1,"vbaProject.bin",ya.VBA)}i.file("[Content_Types].xml",Ra(n,r));i.file("_rels/.rels",Pa(r.rels));i.file("xl/_rels/workbook."+t+".rels",Pa(r.wbrels));delete r.revssf;delete r.ssf;return i}function cm(e,r){var t="";switch((r||{}).type||"base64"){case"buffer":return[e[0],e[1],e[2],e[3]];case"base64":t=b.decode(e.slice(0,24));break;case"binary":t=e;break;case"array":return[e[0],e[1],e[2],e[3]];default:throw new Error("Unrecognized type "+(r&&r.type||"undefined"));}return[t.charCodeAt(0),t.charCodeAt(1),t.charCodeAt(2),t.charCodeAt(3)]}function um(e,r){if(H.find(e,"EncryptedPackage"))return lm(e,r);return op(e,r)}function hm(e,r){var t,a=e;var n=r||{};if(!n.type)n.type=g&&Buffer.isBuffer(e)?"buffer":"base64";switch(n.type){case"base64":t=new ke(a,{base64:true});break;case"binary":;case"array":t=new ke(a,{base64:false});break;case"buffer":t=new ke(a);break;default:throw new Error("Unrecognized type "+n.type);}return fm(t,n)}function dm(e,r){var t=0;e:while(t<e.length)switch(e.charCodeAt(t)){case 10:;case 13:;case 32:++t;break;case 60:return Hv(e.slice(t),r);default:break e;}return af.to_workbook(e,r)}function vm(e,r){var t="",a=cm(e,r);switch(r.type){case"base64":t=b.decode(e);break;case"binary":t=e;break;case"buffer":t=e.toString("binary");break;case"array":t=se(e);break;default:throw new Error("Unrecognized type "+r.type);}if(a[0]==239&&a[1]==187&&a[2]==191)t=Xe(t);return dm(t,r)}function pm(e,r){var t=e;if(r.type=="base64")t=b.decode(t);t=cptable.utils.decode(1200,t.slice(2),"str");r.type="binary";return dm(t,r)}function mm(e){return!e.match(/[^\x00-\x7F]/)?e:Ge(e)}function bm(e,r,t,a){if(a){t.type="string";return af.to_workbook(e,t)}return af.to_workbook(r,t)}function gm(e,r){o();if(typeof ArrayBuffer!=="undefined"&&e instanceof ArrayBuffer)return gm(new Uint8Array(e),r);var t=e,a=[0,0,0,0],n=false;var i=r||{};ju={};if(i.dateNF)ju.dateNF=i.dateNF;if(!i.type)i.type=g&&Buffer.isBuffer(e)?"buffer":"base64";if(i.type=="file"){i.type=g?"buffer":"binary";t=z(e)}if(i.type=="string"){n=true;i.type="binary";i.codepage=65001;t=mm(e)}if(i.type=="array"&&typeof Uint8Array!=="undefined"&&e instanceof Uint8Array&&typeof ArrayBuffer!=="undefined"){var s=new ArrayBuffer(3),f=new Uint8Array(s);f.foo="bar";if(!f.foo){i=fe(i);i.type="array";return gm(_(t),i)}}switch((a=cm(t,i))[0]){case 208:return um(H.read(t,i),i);case 9:return op(t,i);case 60:return Hv(t,i);case 73:if(a[1]===68)return nf(t,i);break;case 84:if(a[1]===65&&a[2]===66&&a[3]===76)return rf.to_workbook(t,i);break;case 80:return a[1]===75&&a[2]<9&&a[3]<9?hm(t,i):bm(e,t,i,n);case 239:return a[3]===60?Hv(t,i):bm(e,t,i,n);case 255:if(a[1]===254){return pm(t,i)}break;case 0:if(a[1]===0&&a[2]>=2&&a[3]===0)return sf.to_workbook(t,i);break;case 3:;case 131:;case 139:;case 140:return qs.to_workbook(t,i);case 123:if(a[1]===92&&a[2]===114&&a[3]===116)return jf.to_workbook(t,i);break;case 10:;case 13:;case 32:return vm(t,i);}if(a[2]<=12&&a[3]<=31)return qs.to_workbook(t,i);return bm(e,t,i,n)}function Em(e,r){var t=r||{};t.type="file";return gm(e,t)}function Sm(e,r){switch(r.type){case"base64":;case"binary":break;case"buffer":;case"array":r.type="";break;case"file":return G(r.file,H.write(e,{type:g?"buffer":""}));case"string":throw new Error("'string' output type invalid for '"+r.bookType+"' files");default:throw new Error("Unrecognized type "+r.type);}return H.write(e,r)}function km(e,r){var t=r||{};var a=om(e,t);var n={};if(t.compression)n.compression="DEFLATE";if(t.password)n.type=g?"nodebuffer":"string";else switch(t.type){case"base64":n.type="base64";break;case"binary":n.type="string";break;case"string":throw new Error("'string' output type invalid for '"+t.bookType+"' files");case"buffer":;case"file":n.type=g?"nodebuffer":"string";break;default:throw new Error("Unrecognized type "+t.type);}var i=a.generate(n);if(t.password&&typeof encrypt_agile!=="undefined")return Sm(encrypt_agile(i,t.password),t);if(t.type==="file")return G(t.file,i);return t.type=="string"?Xe(i):i}function wm(e,r){var t=r||{};var a=cp(e,t);return Sm(a,t)}function Cm(e,r,t){if(!t)t="";var a=t+e;switch(r.type){case"base64":return b.encode(Ge(a));case"binary":return Ge(a);case"string":return e;case"file":return G(r.file,a,"utf8");case"buffer":{if(g)return E(a,"utf8");else return Cm(a,{type:"binary"}).split("").map(function(e){return e.charCodeAt(0)})};}throw new Error("Unrecognized type "+r.type)}function Bm(e,r){switch(r.type){case"base64":return b.encode(e);case"binary":return e;case"string":return e;case"file":return G(r.file,e,"binary");case"buffer":{if(g)return E(e,"binary");else return e.split("").map(function(e){return e.charCodeAt(0)})};}throw new Error("Unrecognized type "+r.type)}function Tm(e,r){switch(r.type){case"string":;case"base64":;case"binary":var t="";for(var a=0;a<e.length;++a)t+=String.fromCharCode(e[a]);return r.type=="base64"?b.encode(t):r.type=="string"?Xe(t):t;case"file":return G(r.file,e);case"buffer":return e;default:throw new Error("Unrecognized type "+r.type);}}function xm(e,r){$d(e);var t=r||{};if(t.type=="array"){t.type="binary";var a=xm(e,t);t.type="array";return T(a)}switch(t.bookType||"xlsb"){case"xml":;case"xlml":return Cm(ep(e,t),t);case"slk":;case"sylk":return Cm($p(e,t),t);case"htm":;case"html":return Cm(zp(e,t),t);case"txt":return Bm(Jp(e,t),t);case"csv":return Cm(jp(e,t),t,"\ufeff");case"dif":return Cm(Kp(e,t),t);case"dbf":return Tm(Zp(e,t),t);case"prn":return Cm(Yp(e,t),t);case"rtf":return Cm(Qp(e,t),t);case"eth":return Cm(qp(e,t),t);case"fods":return Cm(Vp(e,t),t);case"biff2":if(!t.biff)t.biff=2;case"biff3":if(!t.biff)t.biff=3;case"biff4":if(!t.biff)t.biff=4;return Tm(yp(e,t),t);case"biff5":if(!t.biff)t.biff=5;case"biff8":;case"xla":;case"xls":if(!t.biff)t.biff=8;return wm(e,t);case"xlsx":;case"xlsm":;case"xlam":;case"xlsb":;case"ods":return km(e,t);default:throw new Error("Unrecognized bookType |"+t.bookType+"|");}}function Im(e){if(e.bookType)return;var r={xls:"biff8",htm:"html",slk:"sylk",socialcalc:"eth",Sh33tJS:"WTF"};var t=e.file.slice(e.file.lastIndexOf(".")).toLowerCase();if(t.match(/^\.[a-z]+$/))e.bookType=t.slice(1);e.bookType=r[e.bookType]||e.bookType}function _m(e,r,t){var a=t||{};a.type="file";a.file=r;Im(a);return xm(e,a)}function Am(e,r,t,a){var n=t||{};n.type="file";n.file=e;Im(n);n.type="buffer";var i=a;if(!(i instanceof Function))i=t;return V.writeFile(e,xm(r,n),i)}function Rm(e,r,t,a,n,i,s,f){var l=tt(t);var o=f.defval,c=f.raw||!f.hasOwnProperty("raw");var u=true;var h=n===1?[]:{};if(n!==1){if(Object.defineProperty)try{Object.defineProperty(h,"__rowNum__",{value:t,enumerable:false})}catch(d){h.__rowNum__=t}else h.__rowNum__=t}if(!s||e[t])for(var v=r.s.c;v<=r.e.c;++v){var p=s?e[t][v]:e[a[v]+l];if(p===undefined||p.t===undefined){if(o===undefined)continue;if(i[v]!=null){h[i[v]]=o}continue}var m=p.v;switch(p.t){case"z":if(m==null)break;continue;case"e":m=void 0;break;case"s":;case"d":;case"b":;case"n":break;default:throw new Error("unrecognized type "+p.t);}if(i[v]!=null){if(m==null){if(o!==undefined)h[i[v]]=o;else if(c&&m===null)h[i[v]]=null;else continue}else{h[i[v]]=c?m:mt(p,m,f)}if(m!=null)u=false}}return{row:h,isempty:u}}function ym(e,r){if(e==null||e["!ref"]==null)return[];var t={t:"n",v:0},a=0,n=1,i=[],s=0,f="";var l={s:{r:0,c:0},e:{r:0,c:0}};var o=r||{};var c=o.range!=null?o.range:e["!ref"];if(o.header===1)a=1;else if(o.header==="A")a=2;else if(Array.isArray(o.header))a=3;switch(typeof c){case"string":l=vt(c);break;case"number":l=vt(e["!ref"]);l.s.r=c;break;default:l=c;}if(a>0)n=0;var u=tt(l.s.r);var h=[];var d=[];var v=0,p=0;var m=Array.isArray(e);var b=l.s.r,g=0,E=0;if(m&&!e[b])e[b]=[];for(g=l.s.c;g<=l.e.c;++g){h[g]=st(g);t=m?e[b][g]:e[h[g]+u];switch(a){case 1:i[g]=g-l.s.c;break;case 2:i[g]=h[g];break;case 3:i[g]=o.header[g-l.s.c];break;default:if(t==null)t={w:"__EMPTY",t:"s"};f=s=mt(t,null,o);p=0;for(E=0;E<i.length;++E)if(i[E]==f)f=s+"_"+ ++p;i[g]=f;}}for(b=l.s.r+n;b<=l.e.r;++b){var S=Rm(e,l,b,h,a,i,m,o);if(S.isempty===false||(a===1?o.blankrows!==false:!!o.blankrows))d[v++]=S.row}d.length=v;return d}var Fm=/"/g;function Dm(e,r,t,a,n,i,s,f){var l=true;var o=[],c="",u=tt(t);for(var h=r.s.c;h<=r.e.c;++h){if(!a[h])continue;var d=f.dense?(e[t]||[])[h]:e[a[h]+u];if(d==null)c="";else if(d.v!=null){l=false;c=""+mt(d,null,f);for(var v=0,p=0;v!==c.length;++v)if((p=c.charCodeAt(v))===n||p===i||p===34){c='"'+c.replace(Fm,'""')+'"';break}if(c=="ID")c='"ID"'}else if(d.f!=null&&!d.F){l=false;c="="+d.f;if(c.indexOf(",")>=0)c='"'+c.replace(Fm,'""')+'"'}else c="";o.push(c)}if(f.blankrows===false&&l)return null;return o.join(s)}function Om(e,r){var t=[];var a=r==null?{}:r;if(e==null||e["!ref"]==null)return"";var n=vt(e["!ref"]);var i=a.FS!==undefined?a.FS:",",s=i.charCodeAt(0);var f=a.RS!==undefined?a.RS:"\n",l=f.charCodeAt(0);var o=new RegExp((i=="|"?"\\|":i)+"+$");var c="",u=[];a.dense=Array.isArray(e);var h=a.skipHidden&&e["!cols"]||[];var d=a.skipHidden&&e["!rows"]||[];for(var v=n.s.c;v<=n.e.c;++v)if(!(h[v]||{}).hidden)u[v]=st(v);for(var p=n.s.r;p<=n.e.r;++p){if((d[p]||{}).hidden)continue;c=Dm(e,n,p,u,s,l,i,a);if(c==null){continue}if(a.strip)c=c.replace(o,"");t.push(c+f)}delete a.dense;return t.join("")}function Pm(e,r){if(!r)r={};r.FS="\t";r.RS="\n";var t=Om(e,r);if(typeof cptable=="undefined"||r.type=="string")return t;var a=cptable.utils.encode(1200,t,"str");return String.fromCharCode(255)+String.fromCharCode(254)+a}function Nm(e){var r="",t,a="";if(e==null||e["!ref"]==null)return[];var n=vt(e["!ref"]),i="",s=[],f;var l=[];var o=Array.isArray(e);for(f=n.s.c;f<=n.e.c;++f)s[f]=st(f);for(var c=n.s.r;c<=n.e.r;++c){i=tt(c);for(f=n.s.c;f<=n.e.c;++f){r=s[f]+i;t=o?(e[c]||[])[f]:e[r];a="";if(t===undefined)continue;else if(t.F!=null){r=t.F;if(!t.f)continue;a=t.f;if(r.indexOf(":")==-1)r=r+":"+r}if(t.f!=null)a=t.f;else if(t.t=="z")continue;else if(t.t=="n"&&t.v!=null)a=""+t.v;else if(t.t=="b")a=t.v?"TRUE":"FALSE";else if(t.w!==undefined)a="'"+t.w;else if(t.v===undefined)continue;else if(t.t=="s")a="'"+t.v;else a=""+t.v;l[l.length]=r+"="+a}}return l}function Mm(e,r,t){var a=t||{};var n=+!a.skipHeader;var i=e||{};var s=0,f=0;if(i&&a.origin!=null){if(typeof a.origin=="number")s=a.origin;else{var l=typeof a.origin=="string"?ct(a.origin):a.origin;s=l.r;f=l.c}}var o;var c={s:{c:0,r:0},e:{c:f,r:s+r.length-1+n}};if(i["!ref"]){var u=vt(i["!ref"]);c.e.c=Math.max(c.e.c,u.e.c);c.e.r=Math.max(c.e.r,u.e.r);if(s==-1){s=c.e.r+1;c.e.r=s+r.length-1+n}}var h=a.header||[],d=0;r.forEach(function(e,r){j(e).forEach(function(t){if((d=h.indexOf(t))==-1)h[d=h.length]=t;var l=e[t];var c="z";var u="";if(l&&typeof l==="object"&&!(l instanceof Date)){i[ut({c:f+d,r:s+r+n})]=l}else{if(typeof l=="number")c="n";else if(typeof l=="boolean")c="b";else if(typeof l=="string")c="s";else if(l instanceof Date){c="d";if(!a.cellDates){c="n";l=ee(l)}u=a.dateNF||F._table[14]}i[ut({c:f+d,r:s+r+n})]=o={t:c,v:l};if(u)o.z=u}})});c.e.c=Math.max(c.e.c,f+h.length-1);var v=tt(s);if(n)for(d=0;d<h.length;++d)i[st(d+f)+v]={t:"s",v:h[d]};i["!ref"]=dt(c);return i}function Lm(e,r){return Mm(null,e,r)}var Um={encode_col:st,encode_row:tt,encode_cell:ut,encode_range:dt,decode_col:it,decode_row:rt,split_cell:ot,decode_cell:ct,decode_range:ht,format_cell:mt,get_formulae:Nm,make_csv:Om,make_json:ym,make_formulae:Nm,sheet_add_aoa:gt,sheet_add_json:Mm,aoa_to_sheet:Et,json_to_sheet:Lm,table_to_sheet:Dp,table_to_book:Op,sheet_to_csv:Om,sheet_to_txt:Pm,sheet_to_json:ym,sheet_to_html:Fp.from_sheet,sheet_to_dif:rf.from_sheet,sheet_to_slk:ef.from_sheet,sheet_to_eth:tf.from_sheet,sheet_to_formulae:Nm,sheet_to_row_object_array:ym};(function(e){e.consts=e.consts||{};function r(r){r.forEach(function(r){e.consts[r[0]]=r[1]})}function t(e,r,t){return e[r]!=null?e[r]:e[r]=t}function a(e,r,t){if(typeof r=="string")return e[r]||(e[r]={t:"z"});if(typeof r!="number")return a(e,ut(r));return a(e,ut({r:r,c:t||0}))}function n(e,r){if(typeof r=="number"){if(r>=0&&e.SheetNames.length>r)return r;throw new Error("Cannot find sheet # "+r)}else if(typeof r=="string"){var t=e.SheetNames.indexOf(r);if(t>-1)return t;throw new Error("Cannot find sheet name |"+r+"|")}else throw new Error("Cannot find sheet |"+r+"|")}e.book_new=function(){return{SheetNames:[],Sheets:{}}};e.book_append_sheet=function(e,r,t){if(!t)for(var a=1;a<=65535;++a)if(e.SheetNames.indexOf(t="Sheet"+a)==-1)break;if(!t)throw new Error("Too many worksheets");zd(t);if(e.SheetNames.indexOf(t)>=0)throw new Error("Worksheet with name |"+t+"| already exists!");e.SheetNames.push(t);e.Sheets[t]=r};e.book_set_sheet_visibility=function(e,r,a){t(e,"Workbook",{});t(e.Workbook,"Sheets",[]);var i=n(e,r);t(e.Workbook.Sheets,i,{});switch(a){case 0:;case 1:;case 2:break;default:throw new Error("Bad sheet visibility setting "+a);}e.Workbook.Sheets[i].Hidden=a};r([["SHEET_VISIBLE",0],["SHEET_HIDDEN",1],["SHEET_VERY_HIDDEN",2]]);e.cell_set_number_format=function(e,r){e.z=r;return e};e.cell_set_hyperlink=function(e,r,t){if(!r){delete e.l}else{e.l={Target:r};if(t)e.l.Tooltip=t}return e};e.cell_set_internal_link=function(r,t,a){return e.cell_set_hyperlink(r,"#"+t,a)};e.cell_add_comment=function(e,r,t){if(!e.c)e.c=[];e.c.push({t:r,a:t||"SheetJS"})};e.sheet_set_array_formula=function(e,r,t){var n=typeof r!="string"?r:vt(r);var i=typeof r=="string"?r:dt(r);for(var s=n.s.r;s<=n.e.r;++s)for(var f=n.s.c;f<=n.e.c;++f){var l=a(e,s,f);l.t="n";l.F=i;delete l.v;if(s==n.s.r&&f==n.s.c)l.f=t}return e};return e})(Um);if(g&&typeof require!="undefined")(function(){var r={}.Readable;var t=function(e,t){var a=r();var n=t==null?{}:t;if(e==null||e["!ref"]==null){a.push(null);return a}var i=vt(e["!ref"]);var s=n.FS!==undefined?n.FS:",",f=s.charCodeAt(0);var l=n.RS!==undefined?n.RS:"\n",o=l.charCodeAt(0);var c=new RegExp((s=="|"?"\\|":s)+"+$");var u="",h=[];n.dense=Array.isArray(e);var d=n.skipHidden&&e["!cols"]||[];var v=n.skipHidden&&e["!rows"]||[];for(var p=i.s.c;p<=i.e.c;++p)if(!(d[p]||{}).hidden)h[p]=st(p);var m=i.s.r;var b=false;a._read=function(){if(!b){b=true;return a.push("\ufeff")}if(m>i.e.r)return a.push(null);while(m<=i.e.r){++m;if((v[m-1]||{}).hidden)continue;u=Dm(e,i,m-1,h,f,o,s,n);if(u!=null){if(n.strip)u=u.replace(c,"");a.push(u+l);break}}};return a};var a=function(e,t){var a=r();var n=t||{};var i=n.header!=null?n.header:Fp.BEGIN;var s=n.footer!=null?n.footer:Fp.END;a.push(i);var f=ht(e["!ref"]);n.dense=Array.isArray(e);a.push(Fp._preamble(e,f,n));var l=f.s.r;var o=false;a._read=function(){if(l>f.e.r){if(!o){o=true;a.push("</table>"+s)}return a.push(null)}while(l<=f.e.r){a.push(Fp._row(e,f,l,n));++l;break}};return a};var n=function(e,t){var a=r({objectMode:true});if(e==null||e["!ref"]==null){a.push(null);return a}var n={t:"n",v:0},i=0,s=1,f=[],l=0,o="";var c={s:{r:0,c:0},e:{r:0,c:0}};var u=t||{};var h=u.range!=null?u.range:e["!ref"];if(u.header===1)i=1;else if(u.header==="A")i=2;else if(Array.isArray(u.header))i=3;switch(typeof h){case"string":c=vt(h);break;case"number":c=vt(e["!ref"]);c.s.r=h;break;default:c=h;}if(i>0)s=0;var d=tt(c.s.r);var v=[];var p=0;var m=Array.isArray(e);var b=c.s.r,g=0,E=0;if(m&&!e[b])e[b]=[];for(g=c.s.c;g<=c.e.c;++g){v[g]=st(g);n=m?e[b][g]:e[v[g]+d];switch(i){case 1:f[g]=g-c.s.c;break;case 2:f[g]=v[g];break;case 3:f[g]=u.header[g-c.s.c];break;default:if(n==null)n={w:"__EMPTY",t:"s"};o=l=mt(n,null,u);p=0;for(E=0;E<f.length;++E)if(f[E]==o)o=l+"_"+ ++p;f[g]=o;}}b=c.s.r+s;a._read=function(){if(b>c.e.r)return a.push(null);while(b<=c.e.r){var r=Rm(e,c,b,v,i,f,m,u);++b;if(r.isempty===false||(i===1?u.blankrows!==false:!!u.blankrows)){a.push(r.row);break}}};return a};e.stream={to_json:n,to_html:a,to_csv:t}})();e.parse_xlscfb=op;e.parse_ods=Lp;e.parse_fods=Up;e.write_ods=Vp;e.parse_zip=fm;e.read=gm;e.readFile=Em;e.readFileSync=Em;e.write=xm;e.writeFile=_m;e.writeFileSync=_m;e.writeFileAsync=Am;e.utils=Um;e.SSF=F;e.CFB=H}if(typeof exports!=="undefined")make_xlsx_lib(exports);else if(typeof module!=="undefined"&&module.exports)make_xlsx_lib(module.exports);else if(typeof define==="function"&&define.amd)define("xlsx",function(){if(!XLSX.version)make_xlsx_lib(XLSX);return XLSX});else make_xlsx_lib(XLSX);var XLS=XLSX,ODS=XLSX;
diff --git a/src/assets/notifSOS.wav b/src/assets/notifSOS.wav
new file mode 100644
index 0000000..0682cd3
Binary files /dev/null and b/src/assets/notifSOS.wav differ
diff --git a/src/assets/notification.wav b/src/assets/notification.wav
new file mode 100644
index 0000000..cbdd07b
Binary files /dev/null and b/src/assets/notification.wav differ
diff --git a/src/assets/pointer_final/dot2.png b/src/assets/pointer_final/dot2.png
new file mode 100644
index 0000000..b9331e2
Binary files /dev/null and b/src/assets/pointer_final/dot2.png differ
diff --git a/src/assets/pointer_final/dot22.png b/src/assets/pointer_final/dot22.png
new file mode 100644
index 0000000..1b1bab2
Binary files /dev/null and b/src/assets/pointer_final/dot22.png differ
diff --git a/src/assets/ruppee.png b/src/assets/ruppee.png
new file mode 100644
index 0000000..fa115b2
Binary files /dev/null and b/src/assets/ruppee.png differ
diff --git a/src/assets/sms.wav b/src/assets/sms.wav
new file mode 100644
index 0000000..ce9be07
Binary files /dev/null and b/src/assets/sms.wav differ
diff --git a/src/assets/userAccount.png b/src/assets/userAccount.png
new file mode 100644
index 0000000..0e053fe
Binary files /dev/null and b/src/assets/userAccount.png differ
diff --git a/src/assets/userAccount_2.png b/src/assets/userAccount_2.png
new file mode 100644
index 0000000..acca8ce
Binary files /dev/null and b/src/assets/userAccount_2.png differ
diff --git a/src/bootstrap.css b/src/bootstrap.css
new file mode 100644
index 0000000..622b5a9
--- /dev/null
+++ b/src/bootstrap.css
@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v4.0.0-beta (https://getbootstrap.com)
+ * Copyright 2011-2017 The Bootstrap Authors
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */@media print{*,::after,::before{text-shadow:none!important;box-shadow:none!important}a,a:visited{text-decoration:underline}abbr[title]::after{content:" (" attr(title) ")"}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}.navbar{display:none}.badge{border:1px solid #000}.table{border-collapse:collapse!important}.table td,.table th{background-color:#fff!important}.table-bordered td,.table-bordered th{border:1px solid #ddd!important}}html{box-sizing:border-box;font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,::after,::before{box-sizing:inherit}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}dfn{font-style:italic}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg:not(:root){overflow:hidden}[role=button],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#868e96;text-align:left;caption-side:bottom}th{text-align:left}label{display:inline-block;margin-bottom:.5rem}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item}template{display:none}[hidden]{display:none!important}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;font-family:inherit;font-weight:500;line-height:1.1;color:inherit}.h1,h1{font-size:2.5rem}.h2,h2{font-size:2rem}.h3,h3{font-size:1.75rem}.h4,h4{font-size:1.5rem}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}.lead{font-size:1.25rem;font-weight:300}.display-1{font-size:6rem;font-weight:300;line-height:1.1}.display-2{font-size:5.5rem;font-weight:300;line-height:1.1}.display-3{font-size:4.5rem;font-weight:300;line-height:1.1}.display-4{font-size:3.5rem;font-weight:300;line-height:1.1}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}.small,small{font-size:80%;font-weight:400}.mark,mark{padding:.2em;background-color:#fcf8e3}.list-unstyled{padding-left:0;list-style:none}.list-inline{padding-left:0;list-style:none}.list-inline-item{display:inline-block}.list-inline-item:not(:last-child){margin-right:5px}.initialism{font-size:90%;text-transform:uppercase}.blockquote{margin-bottom:1rem;font-size:1.25rem}.blockquote-footer{display:block;font-size:80%;color:#868e96}.blockquote-footer::before{content:"\2014 \00A0"}.img-fluid{max-width:100%;height:auto}.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #ddd;border-radius:.25rem;transition:all .2s ease-in-out;max-width:100%;height:auto}.figure{display:inline-block}.figure-img{margin-bottom:.5rem;line-height:1}.figure-caption{font-size:90%;color:#868e96}code,kbd,pre,samp{font-family:Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}code{padding:.2rem .4rem;font-size:90%;color:#bd4147;background-color:#f8f9fa;border-radius:.25rem}a>code{padding:0;color:inherit;background-color:inherit}kbd{padding:.2rem .4rem;font-size:90%;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:100%;font-weight:700}pre{display:block;margin-top:0;margin-bottom:1rem;font-size:90%;color:#212529}pre code{padding:0;font-size:inherit;color:inherit;background-color:transparent;border-radius:0}.pre-scrollable{max-height:340px;overflow-y:scroll}.container{margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;width:100%}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.no-gutters{margin-right:0;margin-left:0}.no-gutters>.col,.no-gutters>[class*=col-]{padding-right:0;padding-left:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-9{-ms-flex-order:9;order:9}.order-10{-ms-flex-order:10;order:10}.order-11{-ms-flex-order:11;order:11}.order-12{-ms-flex-order:12;order:12}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-md-1{-ms-flex-order:1;order:1}.order-md-2{-ms-flex-order:2;order:2}.order-md-3{-ms-flex-order:3;order:3}.order-md-4{-ms-flex-order:4;order:4}.order-md-5{-ms-flex-order:5;order:5}.order-md-6{-ms-flex-order:6;order:6}.order-md-7{-ms-flex-order:7;order:7}.order-md-8{-ms-flex-order:8;order:8}.order-md-9{-ms-flex-order:9;order:9}.order-md-10{-ms-flex-order:10;order:10}.order-md-11{-ms-flex-order:11;order:11}.order-md-12{-ms-flex-order:12;order:12}}@media (min-width:992px){.col-lg{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-lg-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-lg-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-lg-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-lg-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-lg-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-lg-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-lg-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-lg-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-lg-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-lg-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-lg-1{-ms-flex-order:1;order:1}.order-lg-2{-ms-flex-order:2;order:2}.order-lg-3{-ms-flex-order:3;order:3}.order-lg-4{-ms-flex-order:4;order:4}.order-lg-5{-ms-flex-order:5;order:5}.order-lg-6{-ms-flex-order:6;order:6}.order-lg-7{-ms-flex-order:7;order:7}.order-lg-8{-ms-flex-order:8;order:8}.order-lg-9{-ms-flex-order:9;order:9}.order-lg-10{-ms-flex-order:10;order:10}.order-lg-11{-ms-flex-order:11;order:11}.order-lg-12{-ms-flex-order:12;order:12}}@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:none}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}}.table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent}.table td,.table th{padding:.75rem;vertical-align:top;border-top:1px solid #e9ecef}.table thead th{vertical-align:bottom;border-bottom:2px solid #e9ecef}.table tbody+tbody{border-top:2px solid #e9ecef}.table .table{background-color:#fff}.table-sm td,.table-sm th{padding:.3rem}.table-bordered{border:1px solid #e9ecef}.table-bordered td,.table-bordered th{border:1px solid #e9ecef}.table-bordered thead td,.table-bordered thead th{border-bottom-width:2px}.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-primary,.table-primary>td,.table-primary>th{background-color:#b8daff}.table-hover .table-primary:hover{background-color:#9fcdff}.table-hover .table-primary:hover>td,.table-hover .table-primary:hover>th{background-color:#9fcdff}.table-secondary,.table-secondary>td,.table-secondary>th{background-color:#dddfe2}.table-hover .table-secondary:hover{background-color:#cfd2d6}.table-hover .table-secondary:hover>td,.table-hover .table-secondary:hover>th{background-color:#cfd2d6}.table-success,.table-success>td,.table-success>th{background-color:#c3e6cb}.table-hover .table-success:hover{background-color:#b1dfbb}.table-hover .table-success:hover>td,.table-hover .table-success:hover>th{background-color:#b1dfbb}.table-info,.table-info>td,.table-info>th{background-color:#bee5eb}.table-hover .table-info:hover{background-color:#abdde5}.table-hover .table-info:hover>td,.table-hover .table-info:hover>th{background-color:#abdde5}.table-warning,.table-warning>td,.table-warning>th{background-color:#ffeeba}.table-hover .table-warning:hover{background-color:#ffe8a1}.table-hover .table-warning:hover>td,.table-hover .table-warning:hover>th{background-color:#ffe8a1}.table-danger,.table-danger>td,.table-danger>th{background-color:#f5c6cb}.table-hover .table-danger:hover{background-color:#f1b0b7}.table-hover .table-danger:hover>td,.table-hover .table-danger:hover>th{background-color:#f1b0b7}.table-light,.table-light>td,.table-light>th{background-color:#fdfdfe}.table-hover .table-light:hover{background-color:#ececf6}.table-hover .table-light:hover>td,.table-hover .table-light:hover>th{background-color:#ececf6}.table-dark,.table-dark>td,.table-dark>th{background-color:#c6c8ca}.table-hover .table-dark:hover{background-color:#b9bbbe}.table-hover .table-dark:hover>td,.table-hover .table-dark:hover>th{background-color:#b9bbbe}.table-active,.table-active>td,.table-active>th{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover{background-color:rgba(0,0,0,.075)}.table-hover .table-active:hover>td,.table-hover .table-active:hover>th{background-color:rgba(0,0,0,.075)}.thead-inverse th{color:#fff;background-color:#212529}.thead-default th{color:#495057;background-color:#e9ecef}.table-inverse{color:#fff;background-color:#212529}.table-inverse td,.table-inverse th,.table-inverse thead th{border-color:#32383e}.table-inverse.table-bordered{border:0}.table-inverse.table-striped tbody tr:nth-of-type(odd){background-color:rgba(255,255,255,.05)}.table-inverse.table-hover tbody tr:hover{background-color:rgba(255,255,255,.075)}@media (max-width:991px){.table-responsive{display:block;width:100%;overflow-x:auto;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive.table-bordered{border:0}}.form-control{display:block;width:100%;padding:.5rem .75rem;font-size:1rem;line-height:1.25;color:#495057;background-color:#fff;background-image:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.form-control::-ms-expand{background-color:transparent;border:0}.form-control:focus{color:#495057;background-color:#fff;border-color:#80bdff;outline:0}.form-control::-webkit-input-placeholder{color:#868e96;opacity:1}.form-control:-ms-input-placeholder{color:#868e96;opacity:1}.form-control::placeholder{color:#868e96;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#e9ecef;opacity:1}select.form-control:not([size]):not([multiple]){height:calc(2.25rem + 2px)}select.form-control:focus::-ms-value{color:#495057;background-color:#fff}.form-control-file,.form-control-range{display:block}.col-form-label{padding-top:calc(.5rem - 1px * 2);padding-bottom:calc(.5rem - 1px * 2);margin-bottom:0}.col-form-label-lg{padding-top:calc(.5rem - 1px * 2);padding-bottom:calc(.5rem - 1px * 2);font-size:1.25rem}.col-form-label-sm{padding-top:calc(.25rem - 1px * 2);padding-bottom:calc(.25rem - 1px * 2);font-size:.875rem}.col-form-legend{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;font-size:1rem}.form-control-plaintext{padding-top:.5rem;padding-bottom:.5rem;margin-bottom:0;line-height:1.25;border:solid transparent;border-width:1px 0}.form-control-plaintext.form-control-lg,.form-control-plaintext.form-control-sm,.input-group-lg>.form-control-plaintext.form-control,.input-group-lg>.form-control-plaintext.input-group-addon,.input-group-lg>.input-group-btn>.form-control-plaintext.btn,.input-group-sm>.form-control-plaintext.form-control,.input-group-sm>.form-control-plaintext.input-group-addon,.input-group-sm>.input-group-btn>.form-control-plaintext.btn{padding-right:0;padding-left:0}.form-control-sm,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.input-group-sm>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-sm>select.form-control:not([size]):not([multiple]),.input-group-sm>select.input-group-addon:not([size]):not([multiple]),select.form-control-sm:not([size]):not([multiple]){height:calc(1.8125rem + 2px)}.form-control-lg,.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.input-group-lg>.input-group-btn>select.btn:not([size]):not([multiple]),.input-group-lg>select.form-control:not([size]):not([multiple]),.input-group-lg>select.input-group-addon:not([size]):not([multiple]),select.form-control-lg:not([size]):not([multiple]){height:calc(2.3125rem + 2px)}.form-group{margin-bottom:1rem}.form-text{display:block;margin-top:.25rem}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-5px;margin-left:-5px}.form-row>.col,.form-row>[class*=col-]{padding-right:5px;padding-left:5px}.form-check{position:relative;display:block;margin-bottom:.5rem}.form-check.disabled .form-check-label{color:#868e96}.form-check-label{padding-left:1.25rem;margin-bottom:0}.form-check-input{position:absolute;margin-top:.25rem;margin-left:-1.25rem}.form-check-input:only-child{position:static}.form-check-inline{display:inline-block}.form-check-inline .form-check-label{vertical-align:middle}.form-check-inline+.form-check-inline{margin-left:.75rem}.invalid-feedback{display:none;margin-top:.25rem;font-size:.875rem;color:#dc3545}.invalid-tooltip{position:absolute;top:100%;z-index:5;display:none;width:250px;padding:.5rem;margin-top:.1rem;font-size:.875rem;line-height:1;color:#fff;background-color:rgba(220,53,69,.8);border-radius:.2rem}.custom-select.is-valid,.form-control.is-valid,.was-validated .custom-select:valid,.was-validated .form-control:valid{border-color:#28a745}.custom-select.is-valid:focus,.form-control.is-valid:focus,.was-validated .custom-select:valid:focus,.was-validated .form-control:valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-valid~.invalid-feedback,.custom-select.is-valid~.invalid-tooltip,.form-control.is-valid~.invalid-feedback,.form-control.is-valid~.invalid-tooltip,.was-validated .custom-select:valid~.invalid-feedback,.was-validated .custom-select:valid~.invalid-tooltip,.was-validated .form-control:valid~.invalid-feedback,.was-validated .form-control:valid~.invalid-tooltip{display:block}.form-check-input.is-valid+.form-check-label,.was-validated .form-check-input:valid+.form-check-label{color:#28a745}.custom-control-input.is-valid~.custom-control-indicator,.was-validated .custom-control-input:valid~.custom-control-indicator{background-color:rgba(40,167,69,.25)}.custom-control-input.is-valid~.custom-control-description,.was-validated .custom-control-input:valid~.custom-control-description{color:#28a745}.custom-file-input.is-valid~.custom-file-control,.was-validated .custom-file-input:valid~.custom-file-control{border-color:#28a745}.custom-file-input.is-valid~.custom-file-control::before,.was-validated .custom-file-input:valid~.custom-file-control::before{border-color:inherit}.custom-file-input.is-valid:focus,.was-validated .custom-file-input:valid:focus{box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.custom-select.is-invalid,.form-control.is-invalid,.was-validated .custom-select:invalid,.was-validated .form-control:invalid{border-color:#dc3545}.custom-select.is-invalid:focus,.form-control.is-invalid:focus,.was-validated .custom-select:invalid:focus,.was-validated .form-control:invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.custom-select.is-invalid~.invalid-feedback,.custom-select.is-invalid~.invalid-tooltip,.form-control.is-invalid~.invalid-feedback,.form-control.is-invalid~.invalid-tooltip,.was-validated .custom-select:invalid~.invalid-feedback,.was-validated .custom-select:invalid~.invalid-tooltip,.was-validated .form-control:invalid~.invalid-feedback,.was-validated .form-control:invalid~.invalid-tooltip{display:block}.form-check-input.is-invalid+.form-check-label,.was-validated .form-check-input:invalid+.form-check-label{color:#dc3545}.custom-control-input.is-invalid~.custom-control-indicator,.was-validated .custom-control-input:invalid~.custom-control-indicator{background-color:rgba(220,53,69,.25)}.custom-control-input.is-invalid~.custom-control-description,.was-validated .custom-control-input:invalid~.custom-control-description{color:#dc3545}.custom-file-input.is-invalid~.custom-file-control,.was-validated .custom-file-input:invalid~.custom-file-control{border-color:#dc3545}.custom-file-input.is-invalid~.custom-file-control::before,.was-validated .custom-file-input:invalid~.custom-file-control::before{border-color:inherit}.custom-file-input.is-invalid:focus,.was-validated .custom-file-input:invalid:focus{box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.form-inline{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center}.form-inline .form-check{width:100%}@media (min-width:576px){.form-inline label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;margin-bottom:0}.form-inline .form-group{display:-ms-flexbox;display:flex;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin-bottom:0}.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}.form-inline .form-control-plaintext{display:inline-block}.form-inline .input-group{width:auto}.form-inline .form-control-label{margin-bottom:0;vertical-align:middle}.form-inline .form-check{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;margin-top:0;margin-bottom:0}.form-inline .form-check-label{padding-left:0}.form-inline .form-check-input{position:relative;margin-top:0;margin-right:.25rem;margin-left:0}.form-inline .custom-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0}.form-inline .custom-control-indicator{position:static;display:inline-block;margin-right:.25rem;vertical-align:text-bottom}.form-inline .has-feedback .form-control-feedback{top:0}}.btn{display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:.5rem .75rem;font-size:1rem;line-height:1.25;border-radius:.25rem;transition:all .15s ease-in-out}.btn:focus,.btn:hover{text-decoration:none}.btn.focus,.btn:focus{outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.25)}.btn.disabled,.btn:disabled{opacity:.65}.btn.active,.btn:active{background-image:none}a.btn.disabled,fieldset[disabled] a.btn{pointer-events:none}.btn-primary{color:#fff;background-color:#007bff;border-color:#007bff}.btn-primary:hover{color:#fff;background-color:#0069d9;border-color:#0062cc}.btn-primary.focus,.btn-primary:focus{box-shadow:0 0 0 3px rgba(0,123,255,.5)}.btn-primary.disabled,.btn-primary:disabled{background-color:#007bff;border-color:#007bff}.btn-primary.active,.btn-primary:active,.show>.btn-primary.dropdown-toggle{background-color:#0069d9;background-image:none;border-color:#0062cc}.btn-secondary{color:#fff;background-color:#868e96;border-color:#868e96}.btn-secondary:hover{color:#fff;background-color:#727b84;border-color:#6c757d}.btn-secondary.focus,.btn-secondary:focus{box-shadow:0 0 0 3px rgba(134,142,150,.5)}.btn-secondary.disabled,.btn-secondary:disabled{background-color:#868e96;border-color:#868e96}.btn-secondary.active,.btn-secondary:active,.show>.btn-secondary.dropdown-toggle{background-color:#727b84;background-image:none;border-color:#6c757d}.btn-success{color:#fff;background-color:#28a745;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#218838;border-color:#1e7e34}.btn-success.focus,.btn-success:focus{box-shadow:0 0 0 3px rgba(40,167,69,.5)}.btn-success.disabled,.btn-success:disabled{background-color:#28a745;border-color:#28a745}.btn-success.active,.btn-success:active,.show>.btn-success.dropdown-toggle{background-color:#218838;background-image:none;border-color:#1e7e34}.btn-info{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#138496;border-color:#117a8b}.btn-info.focus,.btn-info:focus{box-shadow:0 0 0 3px rgba(23,162,184,.5)}.btn-info.disabled,.btn-info:disabled{background-color:#17a2b8;border-color:#17a2b8}.btn-info.active,.btn-info:active,.show>.btn-info.dropdown-toggle{background-color:#138496;background-image:none;border-color:#117a8b}.btn-warning{color:#111;background-color:#ffc107;border-color:#ffc107}.btn-warning:hover{color:#111;background-color:#e0a800;border-color:#d39e00}.btn-warning.focus,.btn-warning:focus{box-shadow:0 0 0 3px rgba(255,193,7,.5)}.btn-warning.disabled,.btn-warning:disabled{background-color:#ffc107;border-color:#ffc107}.btn-warning.active,.btn-warning:active,.show>.btn-warning.dropdown-toggle{background-color:#e0a800;background-image:none;border-color:#d39e00}.btn-danger{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#c82333;border-color:#bd2130}.btn-danger.focus,.btn-danger:focus{box-shadow:0 0 0 3px rgba(220,53,69,.5)}.btn-danger.disabled,.btn-danger:disabled{background-color:#dc3545;border-color:#dc3545}.btn-danger.active,.btn-danger:active,.show>.btn-danger.dropdown-toggle{background-color:#c82333;background-image:none;border-color:#bd2130}.btn-light{color:#111;background-color:#f8f9fa;border-color:#f8f9fa}.btn-light:hover{color:#111;background-color:#e2e6ea;border-color:#dae0e5}.btn-light.focus,.btn-light:focus{box-shadow:0 0 0 3px rgba(248,249,250,.5)}.btn-light.disabled,.btn-light:disabled{background-color:#f8f9fa;border-color:#f8f9fa}.btn-light.active,.btn-light:active,.show>.btn-light.dropdown-toggle{background-color:#e2e6ea;background-image:none;border-color:#dae0e5}.btn-dark{color:#fff;background-color:#343a40;border-color:#343a40}.btn-dark:hover{color:#fff;background-color:#23272b;border-color:#1d2124}.btn-dark.focus,.btn-dark:focus{box-shadow:0 0 0 3px rgba(52,58,64,.5)}.btn-dark.disabled,.btn-dark:disabled{background-color:#343a40;border-color:#343a40}.btn-dark.active,.btn-dark:active,.show>.btn-dark.dropdown-toggle{background-color:#23272b;background-image:none;border-color:#1d2124}.btn-outline-primary{color:#007bff;background-color:transparent;background-image:none;border-color:#007bff}.btn-outline-primary:hover{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-primary.focus,.btn-outline-primary:focus{box-shadow:0 0 0 3px rgba(0,123,255,.5)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:#007bff;background-color:transparent}.btn-outline-primary.active,.btn-outline-primary:active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#007bff;border-color:#007bff}.btn-outline-secondary{color:#868e96;background-color:transparent;background-image:none;border-color:#868e96}.btn-outline-secondary:hover{color:#fff;background-color:#868e96;border-color:#868e96}.btn-outline-secondary.focus,.btn-outline-secondary:focus{box-shadow:0 0 0 3px rgba(134,142,150,.5)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{color:#868e96;background-color:transparent}.btn-outline-secondary.active,.btn-outline-secondary:active,.show>.btn-outline-secondary.dropdown-toggle{color:#fff;background-color:#868e96;border-color:#868e96}.btn-outline-success{color:#28a745;background-color:transparent;background-image:none;border-color:#28a745}.btn-outline-success:hover{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-success.focus,.btn-outline-success:focus{box-shadow:0 0 0 3px rgba(40,167,69,.5)}.btn-outline-success.disabled,.btn-outline-success:disabled{color:#28a745;background-color:transparent}.btn-outline-success.active,.btn-outline-success:active,.show>.btn-outline-success.dropdown-toggle{color:#fff;background-color:#28a745;border-color:#28a745}.btn-outline-info{color:#17a2b8;background-color:transparent;background-image:none;border-color:#17a2b8}.btn-outline-info:hover{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-info.focus,.btn-outline-info:focus{box-shadow:0 0 0 3px rgba(23,162,184,.5)}.btn-outline-info.disabled,.btn-outline-info:disabled{color:#17a2b8;background-color:transparent}.btn-outline-info.active,.btn-outline-info:active,.show>.btn-outline-info.dropdown-toggle{color:#fff;background-color:#17a2b8;border-color:#17a2b8}.btn-outline-warning{color:#ffc107;background-color:transparent;background-image:none;border-color:#ffc107}.btn-outline-warning:hover{color:#fff;background-color:#ffc107;border-color:#ffc107}.btn-outline-warning.focus,.btn-outline-warning:focus{box-shadow:0 0 0 3px rgba(255,193,7,.5)}.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#ffc107;background-color:transparent}.btn-outline-warning.active,.btn-outline-warning:active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#ffc107;border-color:#ffc107}.btn-outline-danger{color:#dc3545;background-color:transparent;background-image:none;border-color:#dc3545}.btn-outline-danger:hover{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-danger.focus,.btn-outline-danger:focus{box-shadow:0 0 0 3px rgba(220,53,69,.5)}.btn-outline-danger.disabled,.btn-outline-danger:disabled{color:#dc3545;background-color:transparent}.btn-outline-danger.active,.btn-outline-danger:active,.show>.btn-outline-danger.dropdown-toggle{color:#fff;background-color:#dc3545;border-color:#dc3545}.btn-outline-light{color:#f8f9fa;background-color:transparent;background-image:none;border-color:#f8f9fa}.btn-outline-light:hover{color:#fff;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-light.focus,.btn-outline-light:focus{box-shadow:0 0 0 3px rgba(248,249,250,.5)}.btn-outline-light.disabled,.btn-outline-light:disabled{color:#f8f9fa;background-color:transparent}.btn-outline-light.active,.btn-outline-light:active,.show>.btn-outline-light.dropdown-toggle{color:#fff;background-color:#f8f9fa;border-color:#f8f9fa}.btn-outline-dark{color:#343a40;background-color:transparent;background-image:none;border-color:#343a40}.btn-outline-dark:hover{color:#fff;background-color:#343a40;border-color:#343a40}.btn-outline-dark.focus,.btn-outline-dark:focus{box-shadow:0 0 0 3px rgba(52,58,64,.5)}.btn-outline-dark.disabled,.btn-outline-dark:disabled{color:#343a40;background-color:transparent}.btn-outline-dark.active,.btn-outline-dark:active,.show>.btn-outline-dark.dropdown-toggle{color:#fff;background-color:#343a40;border-color:#343a40}.btn-link{font-weight:400;color:#007bff;border-radius:0}.btn-link,.btn-link.active,.btn-link:active,.btn-link:disabled{background-color:transparent}.btn-link,.btn-link:active,.btn-link:focus{border-color:transparent;box-shadow:none}.btn-link:hover{border-color:transparent}.btn-link:focus,.btn-link:hover{color:#0056b3;text-decoration:underline;background-color:transparent}.btn-link:disabled{color:#868e96}.btn-link:disabled:focus,.btn-link:disabled:hover{text-decoration:none}.btn-group-lg>.btn,.btn-lg{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-group-sm>.btn,.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.btn-block{display:block;width:100%}.btn-block+.btn-block{margin-top:.5rem}input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block{width:100%}.fade{opacity:0;transition:opacity .15s linear}.fade.show{opacity:1}.collapse{display:none}.collapse.show{display:block}tr.collapse.show{display:table-row}tbody.collapse.show{display:table-row-group}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}.dropdown,.dropup{position:relative}.dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{border-top:0;border-bottom:.3em solid}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background:0 0;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#868e96;background-color:transparent}.show>a{outline:0}.dropdown-menu.show{display:block}.dropdown-header{display:block;padding:.5rem 1.5rem;margin-bottom:0;font-size:.875rem;color:#868e96;white-space:nowrap}.btn-group,.btn-group-vertical{position:relative;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.btn-group-vertical>.btn,.btn-group>.btn{position:relative;-ms-flex:0 1 auto;flex:0 1 auto;margin-bottom:0}.btn-group-vertical>.btn:hover,.btn-group>.btn:hover{z-index:2}.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus{z-index:2}.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group{margin-left:-1px}.btn-toolbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start}.btn-toolbar .input-group{width:auto}.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.btn-group>.btn:first-child{margin-left:0}.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn:last-child:not(:first-child),.btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.btn-group>.btn-group{float:left}.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.btn-group>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-bottom-left-radius:0}.btn+.dropdown-toggle-split{padding-right:.5625rem;padding-left:.5625rem}.btn+.dropdown-toggle-split::after{margin-left:0}.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split{padding-right:.375rem;padding-left:.375rem}.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-group-vertical{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.btn-group-vertical .btn,.btn-group-vertical .btn-group{width:100%}.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group{margin-top:-1px;margin-left:0}.btn-group-vertical>.btn:not(:first-child):not(:last-child){border-radius:0}.btn-group-vertical>.btn:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn:last-child:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{border-radius:0}.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{border-bottom-right-radius:0;border-bottom-left-radius:0}.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{border-top-left-radius:0;border-top-right-radius:0}[data-toggle=buttons]>.btn input[type=checkbox],[data-toggle=buttons]>.btn input[type=radio],[data-toggle=buttons]>.btn-group>.btn input[type=checkbox],[data-toggle=buttons]>.btn-group>.btn input[type=radio]{position:absolute;clip:rect(0,0,0,0);pointer-events:none}.input-group{position:relative;display:-ms-flexbox;display:flex;width:100%}.input-group .form-control{position:relative;z-index:2;-ms-flex:1 1 auto;flex:1 1 auto;width:1%;margin-bottom:0}.input-group .form-control:active,.input-group .form-control:focus,.input-group .form-control:hover{z-index:3}.input-group .form-control,.input-group-addon,.input-group-btn{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child){border-radius:0}.input-group-addon,.input-group-btn{white-space:nowrap;vertical-align:middle}.input-group-addon{padding:.5rem .75rem;margin-bottom:0;font-size:1rem;font-weight:400;line-height:1.25;color:#495057;text-align:center;background-color:#e9ecef;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.input-group-addon.form-control-sm,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.input-group-addon.btn{padding:.25rem .5rem;font-size:.875rem;border-radius:.2rem}.input-group-addon.form-control-lg,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.input-group-addon.btn{padding:.5rem 1rem;font-size:1.25rem;border-radius:.3rem}.input-group-addon input[type=checkbox],.input-group-addon input[type=radio]{margin-top:0}.input-group .form-control:not(:last-child),.input-group-addon:not(:last-child),.input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn,.input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle),.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group>.btn,.input-group-btn:not(:last-child)>.dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-addon:not(:last-child){border-right:0}.input-group .form-control:not(:first-child),.input-group-addon:not(:first-child),.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group>.btn,.input-group-btn:not(:first-child)>.dropdown-toggle,.input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn,.input-group-btn:not(:last-child)>.btn:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.form-control+.input-group-addon:not(:first-child){border-left:0}.input-group-btn{position:relative;font-size:0;white-space:nowrap}.input-group-btn>.btn{position:relative}.input-group-btn>.btn+.btn{margin-left:-1px}.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover{z-index:3}.input-group-btn:not(:last-child)>.btn,.input-group-btn:not(:last-child)>.btn-group{margin-right:-1px}.input-group-btn:not(:first-child)>.btn,.input-group-btn:not(:first-child)>.btn-group{z-index:2;margin-left:-1px}.input-group-btn:not(:first-child)>.btn-group:active,.input-group-btn:not(:first-child)>.btn-group:focus,.input-group-btn:not(:first-child)>.btn-group:hover,.input-group-btn:not(:first-child)>.btn:active,.input-group-btn:not(:first-child)>.btn:focus,.input-group-btn:not(:first-child)>.btn:hover{z-index:3}.custom-control{position:relative;display:-ms-inline-flexbox;display:inline-flex;min-height:1.5rem;padding-left:1.5rem;margin-right:1rem}.custom-control-input{position:absolute;z-index:-1;opacity:0}.custom-control-input:checked~.custom-control-indicator{color:#fff;background-color:#007bff}.custom-control-input:focus~.custom-control-indicator{box-shadow:0 0 0 1px #fff,0 0 0 3px #007bff}.custom-control-input:active~.custom-control-indicator{color:#fff;background-color:#b3d7ff}.custom-control-input:disabled~.custom-control-indicator{background-color:#e9ecef}.custom-control-input:disabled~.custom-control-description{color:#868e96}.custom-control-indicator{position:absolute;top:.25rem;left:0;display:block;width:1rem;height:1rem;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#ddd;background-repeat:no-repeat;background-position:center center;background-size:50% 50%}.custom-checkbox .custom-control-indicator{border-radius:.25rem}.custom-checkbox .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E")}.custom-checkbox .custom-control-input:indeterminate~.custom-control-indicator{background-color:#007bff;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='%23fff' d='M0 2h4'/%3E%3C/svg%3E")}.custom-radio .custom-control-indicator{border-radius:50%}.custom-radio .custom-control-input:checked~.custom-control-indicator{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")}.custom-controls-stacked{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.custom-controls-stacked .custom-control{margin-bottom:.25rem}.custom-controls-stacked .custom-control+.custom-control{margin-left:0}.custom-select{display:inline-block;max-width:100%;height:calc(2.25rem + 2px);padding:.375rem 1.75rem .375rem .75rem;line-height:1.25;color:#495057;vertical-align:middle;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center;background-size:8px 10px;border:1px solid rgba(0,0,0,.15);border-radius:.25rem;-webkit-appearance:none;-moz-appearance:none;appearance:none}.custom-select:focus{border-color:#80bdff;outline:0}.custom-select:focus::-ms-value{color:#495057;background-color:#fff}.custom-select:disabled{color:#868e96;background-color:#e9ecef}.custom-select::-ms-expand{opacity:0}.custom-select-sm{height:calc(1.8125rem + 2px);padding-top:.375rem;padding-bottom:.375rem;font-size:75%}.custom-file{position:relative;display:inline-block;max-width:100%;height:2.5rem;margin-bottom:0}.custom-file-input{min-width:14rem;max-width:100%;height:2.5rem;margin:0;opacity:0}.custom-file-control{position:absolute;top:0;right:0;left:0;z-index:5;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#495057;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.custom-file-control:lang(en):empty::after{content:"Choose file..."}.custom-file-control::before{position:absolute;top:-1px;right:-1px;bottom:-1px;z-index:6;display:block;height:2.5rem;padding:.5rem 1rem;line-height:1.5;color:#495057;background-color:#e9ecef;border:1px solid rgba(0,0,0,.15);border-radius:0 .25rem .25rem 0}.custom-file-control:lang(en)::before{content:"Browse"}.nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:focus,.nav-link:hover{text-decoration:none}.nav-link.disabled{color:#868e96}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs .nav-item{margin-bottom:-1px}.nav-tabs .nav-link{border:1px solid transparent;border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nav-tabs .nav-link:focus,.nav-tabs .nav-link:hover{border-color:#e9ecef #e9ecef #ddd}.nav-tabs .nav-link.disabled{color:#868e96;background-color:transparent;border-color:transparent}.nav-tabs .nav-item.show .nav-link,.nav-tabs .nav-link.active{color:#495057;background-color:#fff;border-color:#ddd #ddd #fff}.nav-tabs .dropdown-menu{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}.nav-pills .nav-link{border-radius:.25rem}.nav-pills .nav-link.active,.show>.nav-pills .nav-link{color:#fff;background-color:#007bff}.nav-fill .nav-item{-ms-flex:1 1 auto;flex:1 1 auto;text-align:center}.nav-justified .nav-item{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;text-align:center}.tab-content>.tab-pane{display:none}.tab-content>.active{display:block}.navbar{position:relative;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:.5rem 1rem}.navbar>.container,.navbar>.container-fluid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;font-size:1.25rem;line-height:inherit;white-space:nowrap}.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}.navbar-nav{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-nav .dropdown-menu{position:static;float:none}.navbar-text{display:inline-block;padding-top:.5rem;padding-bottom:.5rem}.navbar-collapse{-ms-flex-preferred-size:100%;flex-basis:100%;-ms-flex-align:center;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background:0 0;border:1px solid transparent;border-radius:.25rem}.navbar-toggler:focus,.navbar-toggler:hover{text-decoration:none}.navbar-toggler-icon{display:inline-block;width:1.5em;height:1.5em;vertical-align:middle;content:"";background:no-repeat center center;background-size:100% 100%}@media (max-width:575px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-sm .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-sm .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-sm .navbar-toggler{display:none}}@media (max-width:767px){.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:768px){.navbar-expand-md{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-md .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-md .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-md .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-md .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-md>.container,.navbar-expand-md>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-md .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-md .navbar-toggler{display:none}}@media (max-width:991px){.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:992px){.navbar-expand-lg{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-lg .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-lg .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-lg .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-lg>.container,.navbar-expand-lg>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-lg .navbar-toggler{display:none}}@media (max-width:1199px){.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:1200px){.navbar-expand-xl{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand-xl .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand-xl .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-xl .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand-xl .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand-xl>.container,.navbar-expand-xl>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand-xl .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand-xl .navbar-toggler{display:none}}.navbar-expand{-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start}.navbar-expand>.container,.navbar-expand>.container-fluid{padding-right:0;padding-left:0}.navbar-expand .navbar-nav{-ms-flex-direction:row;flex-direction:row}.navbar-expand .navbar-nav .dropdown-menu{position:absolute}.navbar-expand .navbar-nav .dropdown-menu-right{right:0;left:auto}.navbar-expand .navbar-nav .nav-link{padding-right:.5rem;padding-left:.5rem}.navbar-expand>.container,.navbar-expand>.container-fluid{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.navbar-expand .navbar-collapse{display:-ms-flexbox!important;display:flex!important}.navbar-expand .navbar-toggler{display:none}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:focus,.navbar-light .navbar-brand:hover{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:focus,.navbar-light .navbar-nav .nav-link:hover{color:rgba(0,0,0,.7)}.navbar-light .navbar-nav .nav-link.disabled{color:rgba(0,0,0,.3)}.navbar-light .navbar-nav .active>.nav-link,.navbar-light .navbar-nav .nav-link.active,.navbar-light .navbar-nav .nav-link.show,.navbar-light .navbar-nav .show>.nav-link{color:rgba(0,0,0,.9)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}.navbar-light .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-dark .navbar-brand{color:#fff}.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:rgba(255,255,255,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:rgba(255,255,255,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.1)}.navbar-dark .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}.navbar-dark .navbar-text{color:rgba(255,255,255,.5)}.card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem;margin-bottom:0}.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card>.list-group:first-child .list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.card>.list-group:last-child .list-group-item:last-child{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-right:-.625rem;margin-bottom:-.75rem;margin-left:-.625rem;border-bottom:0}.card-header-pills{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem}.card-img{width:100%;border-radius:calc(.25rem - 1px)}.card-img-top{width:100%;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img-bottom{width:100%;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}@media (min-width:576px){.card-deck{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{display:-ms-flexbox;display:flex;-ms-flex:1 0 0%;flex:1 0 0%;-ms-flex-direction:column;flex-direction:column;margin-right:15px;margin-left:15px}}@media (min-width:576px){.card-group{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.card-group .card{-ms-flex:1 0 0%;flex:1 0 0%}.card-group .card+.card{margin-left:0;border-left:0}.card-group .card:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.card-group .card:first-child .card-img-top{border-top-right-radius:0}.card-group .card:first-child .card-img-bottom{border-bottom-right-radius:0}.card-group .card:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.card-group .card:last-child .card-img-top{border-top-left-radius:0}.card-group .card:last-child .card-img-bottom{border-bottom-left-radius:0}.card-group .card:not(:first-child):not(:last-child){border-radius:0}.card-group .card:not(:first-child):not(:last-child) .card-img-bottom,.card-group .card:not(:first-child):not(:last-child) .card-img-top{border-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;column-count:3;-webkit-column-gap:1.25rem;column-gap:1.25rem}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb::after{display:block;clear:both;content:""}.breadcrumb-item{float:left}.breadcrumb-item+.breadcrumb-item::before{display:inline-block;padding-right:.5rem;padding-left:.5rem;color:#868e96;content:"/"}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:underline}.breadcrumb-item+.breadcrumb-item:hover::before{text-decoration:none}.breadcrumb-item.active{color:#868e96}.pagination{display:-ms-flexbox;display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#868e96;pointer-events:none;background-color:#fff;border-color:#ddd}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #ddd}.page-link:focus,.page-link:hover{color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#ddd}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-primary{color:#fff;background-color:#007bff}.badge-primary[href]:focus,.badge-primary[href]:hover{color:#fff;text-decoration:none;background-color:#0062cc}.badge-secondary{color:#fff;background-color:#868e96}.badge-secondary[href]:focus,.badge-secondary[href]:hover{color:#fff;text-decoration:none;background-color:#6c757d}.badge-success{color:#fff;background-color:#28a745}.badge-success[href]:focus,.badge-success[href]:hover{color:#fff;text-decoration:none;background-color:#1e7e34}.badge-info{color:#fff;background-color:#17a2b8}.badge-info[href]:focus,.badge-info[href]:hover{color:#fff;text-decoration:none;background-color:#117a8b}.badge-warning{color:#111;background-color:#ffc107}.badge-warning[href]:focus,.badge-warning[href]:hover{color:#111;text-decoration:none;background-color:#d39e00}.badge-danger{color:#fff;background-color:#dc3545}.badge-danger[href]:focus,.badge-danger[href]:hover{color:#fff;text-decoration:none;background-color:#bd2130}.badge-light{color:#111;background-color:#f8f9fa}.badge-light[href]:focus,.badge-light[href]:hover{color:#111;text-decoration:none;background-color:#dae0e5}.badge-dark{color:#fff;background-color:#343a40}.badge-dark[href]:focus,.badge-dark[href]:hover{color:#fff;text-decoration:none;background-color:#1d2124}.jumbotron{padding:2rem 1rem;margin-bottom:2rem;background-color:#e9ecef;border-radius:.3rem}@media (min-width:576px){.jumbotron{padding:4rem 2rem}}.jumbotron-fluid{padding-right:0;padding-left:0;border-radius:0}.alert{padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible .close{position:relative;top:-.75rem;right:-1.25rem;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#464a4e;background-color:#e7e8ea;border-color:#dddfe2}.alert-secondary hr{border-top-color:#cfd2d6}.alert-secondary .alert-link{color:#2e3133}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}@-webkit-keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}.progress{display:-ms-flexbox;display:flex;overflow:hidden;font-size:.75rem;line-height:1rem;text-align:center;background-color:#e9ecef;border-radius:.25rem}.progress-bar{height:1rem;line-height:1rem;color:#fff;background-color:#007bff;transition:width .6s ease}.progress-bar-striped{background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:1rem 1rem}.progress-bar-animated{-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}.media{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.media-body{-ms-flex:1;flex:1}.list-group{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding-left:0;margin-bottom:0}.list-group-item-action{width:100%;color:#495057;text-align:inherit}.list-group-item-action:focus,.list-group-item-action:hover{color:#495057;text-decoration:none;background-color:#f8f9fa}.list-group-item-action:active{color:#212529;background-color:#e9ecef}.list-group-item{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:-1px;background-color:#fff;border:1px solid rgba(0,0,0,.125)}.list-group-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.list-group-item:focus,.list-group-item:hover{text-decoration:none}.list-group-item.disabled,.list-group-item:disabled{color:#868e96;background-color:#fff}.list-group-item.active{z-index:2;color:#fff;background-color:#007bff;border-color:#007bff}.list-group-flush .list-group-item{border-right:0;border-left:0;border-radius:0}.list-group-flush:first-child .list-group-item:first-child{border-top:0}.list-group-flush:last-child .list-group-item:last-child{border-bottom:0}.list-group-item-primary{color:#004085;background-color:#b8daff}a.list-group-item-primary,button.list-group-item-primary{color:#004085}a.list-group-item-primary:focus,a.list-group-item-primary:hover,button.list-group-item-primary:focus,button.list-group-item-primary:hover{color:#004085;background-color:#9fcdff}a.list-group-item-primary.active,button.list-group-item-primary.active{color:#fff;background-color:#004085;border-color:#004085}.list-group-item-secondary{color:#464a4e;background-color:#dddfe2}a.list-group-item-secondary,button.list-group-item-secondary{color:#464a4e}a.list-group-item-secondary:focus,a.list-group-item-secondary:hover,button.list-group-item-secondary:focus,button.list-group-item-secondary:hover{color:#464a4e;background-color:#cfd2d6}a.list-group-item-secondary.active,button.list-group-item-secondary.active{color:#fff;background-color:#464a4e;border-color:#464a4e}.list-group-item-success{color:#155724;background-color:#c3e6cb}a.list-group-item-success,button.list-group-item-success{color:#155724}a.list-group-item-success:focus,a.list-group-item-success:hover,button.list-group-item-success:focus,button.list-group-item-success:hover{color:#155724;background-color:#b1dfbb}a.list-group-item-success.active,button.list-group-item-success.active{color:#fff;background-color:#155724;border-color:#155724}.list-group-item-info{color:#0c5460;background-color:#bee5eb}a.list-group-item-info,button.list-group-item-info{color:#0c5460}a.list-group-item-info:focus,a.list-group-item-info:hover,button.list-group-item-info:focus,button.list-group-item-info:hover{color:#0c5460;background-color:#abdde5}a.list-group-item-info.active,button.list-group-item-info.active{color:#fff;background-color:#0c5460;border-color:#0c5460}.list-group-item-warning{color:#856404;background-color:#ffeeba}a.list-group-item-warning,button.list-group-item-warning{color:#856404}a.list-group-item-warning:focus,a.list-group-item-warning:hover,button.list-group-item-warning:focus,button.list-group-item-warning:hover{color:#856404;background-color:#ffe8a1}a.list-group-item-warning.active,button.list-group-item-warning.active{color:#fff;background-color:#856404;border-color:#856404}.list-group-item-danger{color:#721c24;background-color:#f5c6cb}a.list-group-item-danger,button.list-group-item-danger{color:#721c24}a.list-group-item-danger:focus,a.list-group-item-danger:hover,button.list-group-item-danger:focus,button.list-group-item-danger:hover{color:#721c24;background-color:#f1b0b7}a.list-group-item-danger.active,button.list-group-item-danger.active{color:#fff;background-color:#721c24;border-color:#721c24}.list-group-item-light{color:#818182;background-color:#fdfdfe}a.list-group-item-light,button.list-group-item-light{color:#818182}a.list-group-item-light:focus,a.list-group-item-light:hover,button.list-group-item-light:focus,button.list-group-item-light:hover{color:#818182;background-color:#ececf6}a.list-group-item-light.active,button.list-group-item-light.active{color:#fff;background-color:#818182;border-color:#818182}.list-group-item-dark{color:#1b1e21;background-color:#c6c8ca}a.list-group-item-dark,button.list-group-item-dark{color:#1b1e21}a.list-group-item-dark:focus,a.list-group-item-dark:hover,button.list-group-item-dark:focus,button.list-group-item-dark:hover{color:#1b1e21;background-color:#b9bbbe}a.list-group-item-dark.active,button.list-group-item-dark.active{color:#fff;background-color:#1b1e21;border-color:#1b1e21}.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}.close:focus,.close:hover{color:#000;text-decoration:none;opacity:.75}button.close{padding:0;background:0 0;border:0;-webkit-appearance:none}.modal-open{overflow:hidden}.modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1050;display:none;overflow:hidden;outline:0}.modal.fade .modal-dialog{transition:-webkit-transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out,-webkit-transform .3s ease-out;-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}.modal.show .modal-dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal-dialog{position:relative;width:auto;margin:10px}.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:.5}.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:15px;border-bottom:1px solid #e9ecef}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px}.modal-footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;padding:15px;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:576px){.modal-dialog{max-width:500px;margin:30px auto}.modal-sm{max-width:300px}}@media (min-width:992px){.modal-lg{max-width:800px}}.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;opacity:0}.tooltip.show{opacity:.9}.tooltip .arrow{position:absolute;display:block;width:5px;height:5px}.tooltip.bs-tooltip-auto[x-placement^=top],.tooltip.bs-tooltip-top{padding:5px 0}.tooltip.bs-tooltip-auto[x-placement^=top] .arrow,.tooltip.bs-tooltip-top .arrow{bottom:0}.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before,.tooltip.bs-tooltip-top .arrow::before{margin-left:-3px;content:"";border-width:5px 5px 0;border-top-color:#000}.tooltip.bs-tooltip-auto[x-placement^=right],.tooltip.bs-tooltip-right{padding:0 5px}.tooltip.bs-tooltip-auto[x-placement^=right] .arrow,.tooltip.bs-tooltip-right .arrow{left:0}.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before,.tooltip.bs-tooltip-right .arrow::before{margin-top:-3px;content:"";border-width:5px 5px 5px 0;border-right-color:#000}.tooltip.bs-tooltip-auto[x-placement^=bottom],.tooltip.bs-tooltip-bottom{padding:5px 0}.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow,.tooltip.bs-tooltip-bottom .arrow{top:0}.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.tooltip.bs-tooltip-bottom .arrow::before{margin-left:-3px;content:"";border-width:0 5px 5px;border-bottom-color:#000}.tooltip.bs-tooltip-auto[x-placement^=left],.tooltip.bs-tooltip-left{padding:0 5px}.tooltip.bs-tooltip-auto[x-placement^=left] .arrow,.tooltip.bs-tooltip-left .arrow{right:0}.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before,.tooltip.bs-tooltip-left .arrow::before{right:0;margin-top:-3px;content:"";border-width:5px 0 5px 5px;border-left-color:#000}.tooltip .arrow::before{position:absolute;border-color:transparent;border-style:solid}.tooltip-inner{max-width:200px;padding:3px 8px;color:#fff;text-align:center;background-color:#000;border-radius:.25rem}.popover{position:absolute;top:0;left:0;z-index:1060;display:block;max-width:276px;padding:1px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:.875rem;word-wrap:break-word;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:.3rem}.popover .arrow{position:absolute;display:block;width:10px;height:5px}.popover .arrow::after,.popover .arrow::before{position:absolute;display:block;border-color:transparent;border-style:solid}.popover .arrow::before{content:"";border-width:11px}.popover .arrow::after{content:"";border-width:11px}.popover.bs-popover-auto[x-placement^=top],.popover.bs-popover-top{margin-bottom:10px}.popover.bs-popover-auto[x-placement^=top] .arrow,.popover.bs-popover-top .arrow{bottom:0}.popover.bs-popover-auto[x-placement^=top] .arrow::after,.popover.bs-popover-auto[x-placement^=top] .arrow::before,.popover.bs-popover-top .arrow::after,.popover.bs-popover-top .arrow::before{border-bottom-width:0}.popover.bs-popover-auto[x-placement^=top] .arrow::before,.popover.bs-popover-top .arrow::before{bottom:-11px;margin-left:-6px;border-top-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=top] .arrow::after,.popover.bs-popover-top .arrow::after{bottom:-10px;margin-left:-6px;border-top-color:#fff}.popover.bs-popover-auto[x-placement^=right],.popover.bs-popover-right{margin-left:10px}.popover.bs-popover-auto[x-placement^=right] .arrow,.popover.bs-popover-right .arrow{left:0}.popover.bs-popover-auto[x-placement^=right] .arrow::after,.popover.bs-popover-auto[x-placement^=right] .arrow::before,.popover.bs-popover-right .arrow::after,.popover.bs-popover-right .arrow::before{margin-top:-8px;border-left-width:0}.popover.bs-popover-auto[x-placement^=right] .arrow::before,.popover.bs-popover-right .arrow::before{left:-11px;border-right-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=right] .arrow::after,.popover.bs-popover-right .arrow::after{left:-10px;border-right-color:#fff}.popover.bs-popover-auto[x-placement^=bottom],.popover.bs-popover-bottom{margin-top:10px}.popover.bs-popover-auto[x-placement^=bottom] .arrow,.popover.bs-popover-bottom .arrow{top:0}.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,.popover.bs-popover-bottom .arrow::after,.popover.bs-popover-bottom .arrow::before{margin-left:-7px;border-top-width:0}.popover.bs-popover-auto[x-placement^=bottom] .arrow::before,.popover.bs-popover-bottom .arrow::before{top:-11px;border-bottom-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=bottom] .arrow::after,.popover.bs-popover-bottom .arrow::after{top:-10px;border-bottom-color:#fff}.popover.bs-popover-auto[x-placement^=bottom] .popover-header::before,.popover.bs-popover-bottom .popover-header::before{position:absolute;top:0;left:50%;display:block;width:20px;margin-left:-10px;content:"";border-bottom:1px solid #f7f7f7}.popover.bs-popover-auto[x-placement^=left],.popover.bs-popover-left{margin-right:10px}.popover.bs-popover-auto[x-placement^=left] .arrow,.popover.bs-popover-left .arrow{right:0}.popover.bs-popover-auto[x-placement^=left] .arrow::after,.popover.bs-popover-auto[x-placement^=left] .arrow::before,.popover.bs-popover-left .arrow::after,.popover.bs-popover-left .arrow::before{margin-top:-8px;border-right-width:0}.popover.bs-popover-auto[x-placement^=left] .arrow::before,.popover.bs-popover-left .arrow::before{right:-11px;border-left-color:rgba(0,0,0,.25)}.popover.bs-popover-auto[x-placement^=left] .arrow::after,.popover.bs-popover-left .arrow::after{right:-10px;border-left-color:#fff}.popover-header{padding:8px 14px;margin-bottom:0;font-size:1rem;color:inherit;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-top-left-radius:calc(.3rem - 1px);border-top-right-radius:calc(.3rem - 1px)}.popover-header:empty{display:none}.popover-body{padding:9px 14px;color:#212529}.carousel{position:relative}.carousel-inner{position:relative;width:100%;overflow:hidden}.carousel-item{position:relative;display:none;-ms-flex-align:center;align-items:center;width:100%;transition:-webkit-transform .6s ease;transition:transform .6s ease;transition:transform .6s ease,-webkit-transform .6s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000px;perspective:1000px}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.carousel-item-next,.carousel-item-prev{position:absolute;top:0}.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translateX(0);transform:translateX(0)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.carousel-item-next.carousel-item-left,.carousel-item-prev.carousel-item-right{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.active.carousel-item-right,.carousel-item-next{-webkit-transform:translateX(100%);transform:translateX(100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-right,.carousel-item-next{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translateX(-100%);transform:translateX(-100%)}@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)){.active.carousel-item-left,.carousel-item-prev{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.carousel-control-next,.carousel-control-prev{position:absolute;top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:15%;color:#fff;text-align:center;opacity:.5}.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover{color:#fff;text-decoration:none;outline:0;opacity:.9}.carousel-control-prev{left:0}.carousel-control-next{right:0}.carousel-control-next-icon,.carousel-control-prev-icon{display:inline-block;width:20px;height:20px;background:transparent no-repeat center center;background-size:100% 100%}.carousel-control-prev-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M4 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")}.carousel-control-next-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")}.carousel-indicators{position:absolute;right:0;bottom:10px;left:0;z-index:15;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding-left:0;margin-right:15%;margin-left:15%;list-style:none}.carousel-indicators li{position:relative;-ms-flex:0 1 auto;flex:0 1 auto;width:30px;height:3px;margin-right:3px;margin-left:3px;text-indent:-999px;background-color:rgba(255,255,255,.5)}.carousel-indicators li::before{position:absolute;top:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators li::after{position:absolute;bottom:-10px;left:0;display:inline-block;width:100%;height:10px;content:""}.carousel-indicators .active{background-color:#fff}.carousel-caption{position:absolute;right:15%;bottom:20px;left:15%;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center}.align-baseline{vertical-align:baseline!important}.align-top{vertical-align:top!important}.align-middle{vertical-align:middle!important}.align-bottom{vertical-align:bottom!important}.align-text-bottom{vertical-align:text-bottom!important}.align-text-top{vertical-align:text-top!important}.bg-primary{background-color:#007bff!important}a.bg-primary:focus,a.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#868e96!important}a.bg-secondary:focus,a.bg-secondary:hover{background-color:#6c757d!important}.bg-success{background-color:#28a745!important}a.bg-success:focus,a.bg-success:hover{background-color:#1e7e34!important}.bg-info{background-color:#17a2b8!important}a.bg-info:focus,a.bg-info:hover{background-color:#117a8b!important}.bg-warning{background-color:#ffc107!important}a.bg-warning:focus,a.bg-warning:hover{background-color:#d39e00!important}.bg-danger{background-color:#dc3545!important}a.bg-danger:focus,a.bg-danger:hover{background-color:#bd2130!important}.bg-light{background-color:#f8f9fa!important}a.bg-light:focus,a.bg-light:hover{background-color:#dae0e5!important}.bg-dark{background-color:#343a40!important}a.bg-dark:focus,a.bg-dark:hover{background-color:#1d2124!important}.bg-white{background-color:#fff!important}.bg-transparent{background-color:transparent!important}.border{border:1px solid #e9ecef!important}.border-0{border:0!important}.border-top-0{border-top:0!important}.border-right-0{border-right:0!important}.border-bottom-0{border-bottom:0!important}.border-left-0{border-left:0!important}.border-primary{border-color:#007bff!important}.border-secondary{border-color:#868e96!important}.border-success{border-color:#28a745!important}.border-info{border-color:#17a2b8!important}.border-warning{border-color:#ffc107!important}.border-danger{border-color:#dc3545!important}.border-light{border-color:#f8f9fa!important}.border-dark{border-color:#343a40!important}.border-white{border-color:#fff!important}.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.rounded-circle{border-radius:50%}.rounded-0{border-radius:0}.clearfix::after{display:block;clear:both;content:""}.d-none{display:none!important}.d-inline{display:inline!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}.d-table{display:table!important}.d-table-cell{display:table-cell!important}.d-flex{display:-ms-flexbox!important;display:flex!important}.d-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}@media (min-width:576px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:-ms-flexbox!important;display:flex!important}.d-sm-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:768px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:-ms-flexbox!important;display:flex!important}.d-md-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:-ms-flexbox!important;display:flex!important}.d-lg-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}@media (min-width:1200px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:-ms-flexbox!important;display:flex!important}.d-xl-inline-flex{display:-ms-inline-flexbox!important;display:inline-flex!important}}.d-print-block{display:none!important}@media print{.d-print-block{display:block!important}}.d-print-inline{display:none!important}@media print{.d-print-inline{display:inline!important}}.d-print-inline-block{display:none!important}@media print{.d-print-inline-block{display:inline-block!important}}@media print{.d-print-none{display:none!important}}.embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.embed-responsive::before{display:block;content:""}.embed-responsive .embed-responsive-item,.embed-responsive embed,.embed-responsive iframe,.embed-responsive object,.embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.embed-responsive-21by9::before{padding-top:42.857143%}.embed-responsive-16by9::before{padding-top:56.25%}.embed-responsive-4by3::before{padding-top:75%}.embed-responsive-1by1::before{padding-top:100%}.flex-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-center{-ms-flex-align:center!important;align-items:center!important}.align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}@media (min-width:576px){.flex-sm-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-sm-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-sm-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-sm-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-sm-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-sm-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-sm-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-sm-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-sm-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-sm-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-sm-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-sm-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-sm-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-sm-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-sm-center{-ms-flex-align:center!important;align-items:center!important}.align-items-sm-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-sm-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-sm-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-sm-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-sm-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-sm-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-sm-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-sm-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-sm-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-sm-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-sm-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-sm-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-sm-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-sm-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:768px){.flex-md-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-md-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-md-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-md-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-md-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-md-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-md-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-md-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-md-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-md-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-md-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-md-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-md-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-md-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-md-center{-ms-flex-align:center!important;align-items:center!important}.align-items-md-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-md-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-md-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-md-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-md-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-md-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-md-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-md-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-md-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-md-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-md-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-md-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-md-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-md-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:992px){.flex-lg-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-lg-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-lg-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-lg-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-lg-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-lg-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-lg-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-lg-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-lg-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-lg-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-lg-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-lg-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-lg-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-lg-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-lg-center{-ms-flex-align:center!important;align-items:center!important}.align-items-lg-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-lg-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-lg-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-lg-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-lg-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-lg-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-lg-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-lg-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-lg-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-lg-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-lg-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-lg-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-lg-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-lg-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}@media (min-width:1200px){.flex-xl-row{-ms-flex-direction:row!important;flex-direction:row!important}.flex-xl-column{-ms-flex-direction:column!important;flex-direction:column!important}.flex-xl-row-reverse{-ms-flex-direction:row-reverse!important;flex-direction:row-reverse!important}.flex-xl-column-reverse{-ms-flex-direction:column-reverse!important;flex-direction:column-reverse!important}.flex-xl-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.flex-xl-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.flex-xl-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.justify-content-xl-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.justify-content-xl-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.justify-content-xl-center{-ms-flex-pack:center!important;justify-content:center!important}.justify-content-xl-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.justify-content-xl-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.align-items-xl-start{-ms-flex-align:start!important;align-items:flex-start!important}.align-items-xl-end{-ms-flex-align:end!important;align-items:flex-end!important}.align-items-xl-center{-ms-flex-align:center!important;align-items:center!important}.align-items-xl-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}.align-items-xl-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.align-content-xl-start{-ms-flex-line-pack:start!important;align-content:flex-start!important}.align-content-xl-end{-ms-flex-line-pack:end!important;align-content:flex-end!important}.align-content-xl-center{-ms-flex-line-pack:center!important;align-content:center!important}.align-content-xl-between{-ms-flex-line-pack:justify!important;align-content:space-between!important}.align-content-xl-around{-ms-flex-line-pack:distribute!important;align-content:space-around!important}.align-content-xl-stretch{-ms-flex-line-pack:stretch!important;align-content:stretch!important}.align-self-xl-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.align-self-xl-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.align-self-xl-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.align-self-xl-center{-ms-flex-item-align:center!important;align-self:center!important}.align-self-xl-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.align-self-xl-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}}.float-left{float:left!important}.float-right{float:right!important}.float-none{float:none!important}@media (min-width:576px){.float-sm-left{float:left!important}.float-sm-right{float:right!important}.float-sm-none{float:none!important}}@media (min-width:768px){.float-md-left{float:left!important}.float-md-right{float:right!important}.float-md-none{float:none!important}}@media (min-width:992px){.float-lg-left{float:left!important}.float-lg-right{float:right!important}.float-lg-none{float:none!important}}@media (min-width:1200px){.float-xl-left{float:left!important}.float-xl-right{float:right!important}.float-xl-none{float:none!important}}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}@supports ((position:-webkit-sticky) or (position:sticky)){.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;-webkit-clip-path:inset(50%);clip-path:inset(50%);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;-webkit-clip-path:none;clip-path:none}.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}.m-0{margin:0!important}.mt-0{margin-top:0!important}.mr-0{margin-right:0!important}.mb-0{margin-bottom:0!important}.ml-0{margin-left:0!important}.mx-0{margin-right:0!important;margin-left:0!important}.my-0{margin-top:0!important;margin-bottom:0!important}.m-1{margin:.25rem!important}.mt-1{margin-top:.25rem!important}.mr-1{margin-right:.25rem!important}.mb-1{margin-bottom:.25rem!important}.ml-1{margin-left:.25rem!important}.mx-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-2{margin:.5rem!important}.mt-2{margin-top:.5rem!important}.mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem!important}.ml-2{margin-left:.5rem!important}.mx-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-3{margin:1rem!important}.mt-3{margin-top:1rem!important}.mr-3{margin-right:1rem!important}.mb-3{margin-bottom:1rem!important}.ml-3{margin-left:1rem!important}.mx-3{margin-right:1rem!important;margin-left:1rem!important}.my-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-4{margin:1.5rem!important}.mt-4{margin-top:1.5rem!important}.mr-4{margin-right:1.5rem!important}.mb-4{margin-bottom:1.5rem!important}.ml-4{margin-left:1.5rem!important}.mx-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-5{margin:3rem!important}.mt-5{margin-top:3rem!important}.mr-5{margin-right:3rem!important}.mb-5{margin-bottom:3rem!important}.ml-5{margin-left:3rem!important}.mx-5{margin-right:3rem!important;margin-left:3rem!important}.my-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-0{padding:0!important}.pt-0{padding-top:0!important}.pr-0{padding-right:0!important}.pb-0{padding-bottom:0!important}.pl-0{padding-left:0!important}.px-0{padding-right:0!important;padding-left:0!important}.py-0{padding-top:0!important;padding-bottom:0!important}.p-1{padding:.25rem!important}.pt-1{padding-top:.25rem!important}.pr-1{padding-right:.25rem!important}.pb-1{padding-bottom:.25rem!important}.pl-1{padding-left:.25rem!important}.px-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-2{padding:.5rem!important}.pt-2{padding-top:.5rem!important}.pr-2{padding-right:.5rem!important}.pb-2{padding-bottom:.5rem!important}.pl-2{padding-left:.5rem!important}.px-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-3{padding:1rem!important}.pt-3{padding-top:1rem!important}.pr-3{padding-right:1rem!important}.pb-3{padding-bottom:1rem!important}.pl-3{padding-left:1rem!important}.px-3{padding-right:1rem!important;padding-left:1rem!important}.py-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-4{padding:1.5rem!important}.pt-4{padding-top:1.5rem!important}.pr-4{padding-right:1.5rem!important}.pb-4{padding-bottom:1.5rem!important}.pl-4{padding-left:1.5rem!important}.px-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-5{padding:3rem!important}.pt-5{padding-top:3rem!important}.pr-5{padding-right:3rem!important}.pb-5{padding-bottom:3rem!important}.pl-5{padding-left:3rem!important}.px-5{padding-right:3rem!important;padding-left:3rem!important}.py-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-auto{margin:auto!important}.mt-auto{margin-top:auto!important}.mr-auto{margin-right:auto!important}.mb-auto{margin-bottom:auto!important}.ml-auto{margin-left:auto!important}.mx-auto{margin-right:auto!important;margin-left:auto!important}.my-auto{margin-top:auto!important;margin-bottom:auto!important}@media (min-width:576px){.m-sm-0{margin:0!important}.mt-sm-0{margin-top:0!important}.mr-sm-0{margin-right:0!important}.mb-sm-0{margin-bottom:0!important}.ml-sm-0{margin-left:0!important}.mx-sm-0{margin-right:0!important;margin-left:0!important}.my-sm-0{margin-top:0!important;margin-bottom:0!important}.m-sm-1{margin:.25rem!important}.mt-sm-1{margin-top:.25rem!important}.mr-sm-1{margin-right:.25rem!important}.mb-sm-1{margin-bottom:.25rem!important}.ml-sm-1{margin-left:.25rem!important}.mx-sm-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-sm-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-sm-2{margin:.5rem!important}.mt-sm-2{margin-top:.5rem!important}.mr-sm-2{margin-right:.5rem!important}.mb-sm-2{margin-bottom:.5rem!important}.ml-sm-2{margin-left:.5rem!important}.mx-sm-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-sm-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-sm-3{margin:1rem!important}.mt-sm-3{margin-top:1rem!important}.mr-sm-3{margin-right:1rem!important}.mb-sm-3{margin-bottom:1rem!important}.ml-sm-3{margin-left:1rem!important}.mx-sm-3{margin-right:1rem!important;margin-left:1rem!important}.my-sm-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-sm-4{margin:1.5rem!important}.mt-sm-4{margin-top:1.5rem!important}.mr-sm-4{margin-right:1.5rem!important}.mb-sm-4{margin-bottom:1.5rem!important}.ml-sm-4{margin-left:1.5rem!important}.mx-sm-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-sm-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-sm-5{margin:3rem!important}.mt-sm-5{margin-top:3rem!important}.mr-sm-5{margin-right:3rem!important}.mb-sm-5{margin-bottom:3rem!important}.ml-sm-5{margin-left:3rem!important}.mx-sm-5{margin-right:3rem!important;margin-left:3rem!important}.my-sm-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-sm-0{padding:0!important}.pt-sm-0{padding-top:0!important}.pr-sm-0{padding-right:0!important}.pb-sm-0{padding-bottom:0!important}.pl-sm-0{padding-left:0!important}.px-sm-0{padding-right:0!important;padding-left:0!important}.py-sm-0{padding-top:0!important;padding-bottom:0!important}.p-sm-1{padding:.25rem!important}.pt-sm-1{padding-top:.25rem!important}.pr-sm-1{padding-right:.25rem!important}.pb-sm-1{padding-bottom:.25rem!important}.pl-sm-1{padding-left:.25rem!important}.px-sm-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-sm-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-sm-2{padding:.5rem!important}.pt-sm-2{padding-top:.5rem!important}.pr-sm-2{padding-right:.5rem!important}.pb-sm-2{padding-bottom:.5rem!important}.pl-sm-2{padding-left:.5rem!important}.px-sm-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-sm-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-sm-3{padding:1rem!important}.pt-sm-3{padding-top:1rem!important}.pr-sm-3{padding-right:1rem!important}.pb-sm-3{padding-bottom:1rem!important}.pl-sm-3{padding-left:1rem!important}.px-sm-3{padding-right:1rem!important;padding-left:1rem!important}.py-sm-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-sm-4{padding:1.5rem!important}.pt-sm-4{padding-top:1.5rem!important}.pr-sm-4{padding-right:1.5rem!important}.pb-sm-4{padding-bottom:1.5rem!important}.pl-sm-4{padding-left:1.5rem!important}.px-sm-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-sm-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-sm-5{padding:3rem!important}.pt-sm-5{padding-top:3rem!important}.pr-sm-5{padding-right:3rem!important}.pb-sm-5{padding-bottom:3rem!important}.pl-sm-5{padding-left:3rem!important}.px-sm-5{padding-right:3rem!important;padding-left:3rem!important}.py-sm-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-sm-auto{margin:auto!important}.mt-sm-auto{margin-top:auto!important}.mr-sm-auto{margin-right:auto!important}.mb-sm-auto{margin-bottom:auto!important}.ml-sm-auto{margin-left:auto!important}.mx-sm-auto{margin-right:auto!important;margin-left:auto!important}.my-sm-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:768px){.m-md-0{margin:0!important}.mt-md-0{margin-top:0!important}.mr-md-0{margin-right:0!important}.mb-md-0{margin-bottom:0!important}.ml-md-0{margin-left:0!important}.mx-md-0{margin-right:0!important;margin-left:0!important}.my-md-0{margin-top:0!important;margin-bottom:0!important}.m-md-1{margin:.25rem!important}.mt-md-1{margin-top:.25rem!important}.mr-md-1{margin-right:.25rem!important}.mb-md-1{margin-bottom:.25rem!important}.ml-md-1{margin-left:.25rem!important}.mx-md-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-md-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-md-2{margin:.5rem!important}.mt-md-2{margin-top:.5rem!important}.mr-md-2{margin-right:.5rem!important}.mb-md-2{margin-bottom:.5rem!important}.ml-md-2{margin-left:.5rem!important}.mx-md-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-md-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-md-3{margin:1rem!important}.mt-md-3{margin-top:1rem!important}.mr-md-3{margin-right:1rem!important}.mb-md-3{margin-bottom:1rem!important}.ml-md-3{margin-left:1rem!important}.mx-md-3{margin-right:1rem!important;margin-left:1rem!important}.my-md-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-md-4{margin:1.5rem!important}.mt-md-4{margin-top:1.5rem!important}.mr-md-4{margin-right:1.5rem!important}.mb-md-4{margin-bottom:1.5rem!important}.ml-md-4{margin-left:1.5rem!important}.mx-md-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-md-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-md-5{margin:3rem!important}.mt-md-5{margin-top:3rem!important}.mr-md-5{margin-right:3rem!important}.mb-md-5{margin-bottom:3rem!important}.ml-md-5{margin-left:3rem!important}.mx-md-5{margin-right:3rem!important;margin-left:3rem!important}.my-md-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-md-0{padding:0!important}.pt-md-0{padding-top:0!important}.pr-md-0{padding-right:0!important}.pb-md-0{padding-bottom:0!important}.pl-md-0{padding-left:0!important}.px-md-0{padding-right:0!important;padding-left:0!important}.py-md-0{padding-top:0!important;padding-bottom:0!important}.p-md-1{padding:.25rem!important}.pt-md-1{padding-top:.25rem!important}.pr-md-1{padding-right:.25rem!important}.pb-md-1{padding-bottom:.25rem!important}.pl-md-1{padding-left:.25rem!important}.px-md-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-md-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-md-2{padding:.5rem!important}.pt-md-2{padding-top:.5rem!important}.pr-md-2{padding-right:.5rem!important}.pb-md-2{padding-bottom:.5rem!important}.pl-md-2{padding-left:.5rem!important}.px-md-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-md-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-md-3{padding:1rem!important}.pt-md-3{padding-top:1rem!important}.pr-md-3{padding-right:1rem!important}.pb-md-3{padding-bottom:1rem!important}.pl-md-3{padding-left:1rem!important}.px-md-3{padding-right:1rem!important;padding-left:1rem!important}.py-md-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-md-4{padding:1.5rem!important}.pt-md-4{padding-top:1.5rem!important}.pr-md-4{padding-right:1.5rem!important}.pb-md-4{padding-bottom:1.5rem!important}.pl-md-4{padding-left:1.5rem!important}.px-md-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-md-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-md-5{padding:3rem!important}.pt-md-5{padding-top:3rem!important}.pr-md-5{padding-right:3rem!important}.pb-md-5{padding-bottom:3rem!important}.pl-md-5{padding-left:3rem!important}.px-md-5{padding-right:3rem!important;padding-left:3rem!important}.py-md-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-md-auto{margin:auto!important}.mt-md-auto{margin-top:auto!important}.mr-md-auto{margin-right:auto!important}.mb-md-auto{margin-bottom:auto!important}.ml-md-auto{margin-left:auto!important}.mx-md-auto{margin-right:auto!important;margin-left:auto!important}.my-md-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:992px){.m-lg-0{margin:0!important}.mt-lg-0{margin-top:0!important}.mr-lg-0{margin-right:0!important}.mb-lg-0{margin-bottom:0!important}.ml-lg-0{margin-left:0!important}.mx-lg-0{margin-right:0!important;margin-left:0!important}.my-lg-0{margin-top:0!important;margin-bottom:0!important}.m-lg-1{margin:.25rem!important}.mt-lg-1{margin-top:.25rem!important}.mr-lg-1{margin-right:.25rem!important}.mb-lg-1{margin-bottom:.25rem!important}.ml-lg-1{margin-left:.25rem!important}.mx-lg-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-lg-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-lg-2{margin:.5rem!important}.mt-lg-2{margin-top:.5rem!important}.mr-lg-2{margin-right:.5rem!important}.mb-lg-2{margin-bottom:.5rem!important}.ml-lg-2{margin-left:.5rem!important}.mx-lg-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-lg-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-lg-3{margin:1rem!important}.mt-lg-3{margin-top:1rem!important}.mr-lg-3{margin-right:1rem!important}.mb-lg-3{margin-bottom:1rem!important}.ml-lg-3{margin-left:1rem!important}.mx-lg-3{margin-right:1rem!important;margin-left:1rem!important}.my-lg-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-lg-4{margin:1.5rem!important}.mt-lg-4{margin-top:1.5rem!important}.mr-lg-4{margin-right:1.5rem!important}.mb-lg-4{margin-bottom:1.5rem!important}.ml-lg-4{margin-left:1.5rem!important}.mx-lg-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-lg-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-lg-5{margin:3rem!important}.mt-lg-5{margin-top:3rem!important}.mr-lg-5{margin-right:3rem!important}.mb-lg-5{margin-bottom:3rem!important}.ml-lg-5{margin-left:3rem!important}.mx-lg-5{margin-right:3rem!important;margin-left:3rem!important}.my-lg-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-lg-0{padding:0!important}.pt-lg-0{padding-top:0!important}.pr-lg-0{padding-right:0!important}.pb-lg-0{padding-bottom:0!important}.pl-lg-0{padding-left:0!important}.px-lg-0{padding-right:0!important;padding-left:0!important}.py-lg-0{padding-top:0!important;padding-bottom:0!important}.p-lg-1{padding:.25rem!important}.pt-lg-1{padding-top:.25rem!important}.pr-lg-1{padding-right:.25rem!important}.pb-lg-1{padding-bottom:.25rem!important}.pl-lg-1{padding-left:.25rem!important}.px-lg-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-lg-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-lg-2{padding:.5rem!important}.pt-lg-2{padding-top:.5rem!important}.pr-lg-2{padding-right:.5rem!important}.pb-lg-2{padding-bottom:.5rem!important}.pl-lg-2{padding-left:.5rem!important}.px-lg-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-lg-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-lg-3{padding:1rem!important}.pt-lg-3{padding-top:1rem!important}.pr-lg-3{padding-right:1rem!important}.pb-lg-3{padding-bottom:1rem!important}.pl-lg-3{padding-left:1rem!important}.px-lg-3{padding-right:1rem!important;padding-left:1rem!important}.py-lg-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-lg-4{padding:1.5rem!important}.pt-lg-4{padding-top:1.5rem!important}.pr-lg-4{padding-right:1.5rem!important}.pb-lg-4{padding-bottom:1.5rem!important}.pl-lg-4{padding-left:1.5rem!important}.px-lg-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-lg-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-lg-5{padding:3rem!important}.pt-lg-5{padding-top:3rem!important}.pr-lg-5{padding-right:3rem!important}.pb-lg-5{padding-bottom:3rem!important}.pl-lg-5{padding-left:3rem!important}.px-lg-5{padding-right:3rem!important;padding-left:3rem!important}.py-lg-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-lg-auto{margin:auto!important}.mt-lg-auto{margin-top:auto!important}.mr-lg-auto{margin-right:auto!important}.mb-lg-auto{margin-bottom:auto!important}.ml-lg-auto{margin-left:auto!important}.mx-lg-auto{margin-right:auto!important;margin-left:auto!important}.my-lg-auto{margin-top:auto!important;margin-bottom:auto!important}}@media (min-width:1200px){.m-xl-0{margin:0!important}.mt-xl-0{margin-top:0!important}.mr-xl-0{margin-right:0!important}.mb-xl-0{margin-bottom:0!important}.ml-xl-0{margin-left:0!important}.mx-xl-0{margin-right:0!important;margin-left:0!important}.my-xl-0{margin-top:0!important;margin-bottom:0!important}.m-xl-1{margin:.25rem!important}.mt-xl-1{margin-top:.25rem!important}.mr-xl-1{margin-right:.25rem!important}.mb-xl-1{margin-bottom:.25rem!important}.ml-xl-1{margin-left:.25rem!important}.mx-xl-1{margin-right:.25rem!important;margin-left:.25rem!important}.my-xl-1{margin-top:.25rem!important;margin-bottom:.25rem!important}.m-xl-2{margin:.5rem!important}.mt-xl-2{margin-top:.5rem!important}.mr-xl-2{margin-right:.5rem!important}.mb-xl-2{margin-bottom:.5rem!important}.ml-xl-2{margin-left:.5rem!important}.mx-xl-2{margin-right:.5rem!important;margin-left:.5rem!important}.my-xl-2{margin-top:.5rem!important;margin-bottom:.5rem!important}.m-xl-3{margin:1rem!important}.mt-xl-3{margin-top:1rem!important}.mr-xl-3{margin-right:1rem!important}.mb-xl-3{margin-bottom:1rem!important}.ml-xl-3{margin-left:1rem!important}.mx-xl-3{margin-right:1rem!important;margin-left:1rem!important}.my-xl-3{margin-top:1rem!important;margin-bottom:1rem!important}.m-xl-4{margin:1.5rem!important}.mt-xl-4{margin-top:1.5rem!important}.mr-xl-4{margin-right:1.5rem!important}.mb-xl-4{margin-bottom:1.5rem!important}.ml-xl-4{margin-left:1.5rem!important}.mx-xl-4{margin-right:1.5rem!important;margin-left:1.5rem!important}.my-xl-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.m-xl-5{margin:3rem!important}.mt-xl-5{margin-top:3rem!important}.mr-xl-5{margin-right:3rem!important}.mb-xl-5{margin-bottom:3rem!important}.ml-xl-5{margin-left:3rem!important}.mx-xl-5{margin-right:3rem!important;margin-left:3rem!important}.my-xl-5{margin-top:3rem!important;margin-bottom:3rem!important}.p-xl-0{padding:0!important}.pt-xl-0{padding-top:0!important}.pr-xl-0{padding-right:0!important}.pb-xl-0{padding-bottom:0!important}.pl-xl-0{padding-left:0!important}.px-xl-0{padding-right:0!important;padding-left:0!important}.py-xl-0{padding-top:0!important;padding-bottom:0!important}.p-xl-1{padding:.25rem!important}.pt-xl-1{padding-top:.25rem!important}.pr-xl-1{padding-right:.25rem!important}.pb-xl-1{padding-bottom:.25rem!important}.pl-xl-1{padding-left:.25rem!important}.px-xl-1{padding-right:.25rem!important;padding-left:.25rem!important}.py-xl-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.p-xl-2{padding:.5rem!important}.pt-xl-2{padding-top:.5rem!important}.pr-xl-2{padding-right:.5rem!important}.pb-xl-2{padding-bottom:.5rem!important}.pl-xl-2{padding-left:.5rem!important}.px-xl-2{padding-right:.5rem!important;padding-left:.5rem!important}.py-xl-2{padding-top:.5rem!important;padding-bottom:.5rem!important}.p-xl-3{padding:1rem!important}.pt-xl-3{padding-top:1rem!important}.pr-xl-3{padding-right:1rem!important}.pb-xl-3{padding-bottom:1rem!important}.pl-xl-3{padding-left:1rem!important}.px-xl-3{padding-right:1rem!important;padding-left:1rem!important}.py-xl-3{padding-top:1rem!important;padding-bottom:1rem!important}.p-xl-4{padding:1.5rem!important}.pt-xl-4{padding-top:1.5rem!important}.pr-xl-4{padding-right:1.5rem!important}.pb-xl-4{padding-bottom:1.5rem!important}.pl-xl-4{padding-left:1.5rem!important}.px-xl-4{padding-right:1.5rem!important;padding-left:1.5rem!important}.py-xl-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.p-xl-5{padding:3rem!important}.pt-xl-5{padding-top:3rem!important}.pr-xl-5{padding-right:3rem!important}.pb-xl-5{padding-bottom:3rem!important}.pl-xl-5{padding-left:3rem!important}.px-xl-5{padding-right:3rem!important;padding-left:3rem!important}.py-xl-5{padding-top:3rem!important;padding-bottom:3rem!important}.m-xl-auto{margin:auto!important}.mt-xl-auto{margin-top:auto!important}.mr-xl-auto{margin-right:auto!important}.mb-xl-auto{margin-bottom:auto!important}.ml-xl-auto{margin-left:auto!important}.mx-xl-auto{margin-right:auto!important;margin-left:auto!important}.my-xl-auto{margin-top:auto!important;margin-bottom:auto!important}}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}@media (min-width:576px){.text-sm-left{text-align:left!important}.text-sm-right{text-align:right!important}.text-sm-center{text-align:center!important}}@media (min-width:768px){.text-md-left{text-align:left!important}.text-md-right{text-align:right!important}.text-md-center{text-align:center!important}}@media (min-width:992px){.text-lg-left{text-align:left!important}.text-lg-right{text-align:right!important}.text-lg-center{text-align:center!important}}@media (min-width:1200px){.text-xl-left{text-align:left!important}.text-xl-right{text-align:right!important}.text-xl-center{text-align:center!important}}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:700}.font-italic{font-style:italic}.text-white{color:#fff!important}.text-primary{color:#007bff!important}a.text-primary:focus,a.text-primary:hover{color:#0062cc!important}.text-secondary{color:#868e96!important}a.text-secondary:focus,a.text-secondary:hover{color:#6c757d!important}.text-success{color:#28a745!important}a.text-success:focus,a.text-success:hover{color:#1e7e34!important}.text-info{color:#17a2b8!important}a.text-info:focus,a.text-info:hover{color:#117a8b!important}.text-warning{color:#ffc107!important}a.text-warning:focus,a.text-warning:hover{color:#d39e00!important}.text-danger{color:#dc3545!important}a.text-danger:focus,a.text-danger:hover{color:#bd2130!important}.text-light{color:#f8f9fa!important}a.text-light:focus,a.text-light:hover{color:#dae0e5!important}.text-dark{color:#343a40!important}a.text-dark:focus,a.text-dark:hover{color:#1d2124!important}.text-muted{color:#868e96!important}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.visible{visibility:visible!important}.invisible{visibility:hidden!important}
+/*# sourceMappingURL=bootstrap.min.css.map */
\ No newline at end of file
diff --git a/src/dist/multiple-select-es.js b/src/dist/multiple-select-es.js
new file mode 100644
index 0000000..15718da
--- /dev/null
+++ b/src/dist/multiple-select-es.js
@@ -0,0 +1,1417 @@
+import 'core-js/modules/es.array.filter';
+import 'core-js/modules/es.array.find';
+import 'core-js/modules/es.array.includes';
+import 'core-js/modules/es.array.join';
+import 'core-js/modules/es.array.map';
+import 'core-js/modules/es.array.slice';
+import 'core-js/modules/es.function.name';
+import 'core-js/modules/es.string.includes';
+import 'core-js/modules/es.string.trim';
+import 'core-js/modules/es.string.replace';
+
+function _typeof(obj) {
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function (obj) {
+      return typeof obj;
+    };
+  } else {
+    _typeof = function (obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
+}
+
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
+  }
+
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
+    }
+  }));
+}
+
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var css_escape = createCommonjsModule(function (module, exports) {
+(function(root, factory) {
+	// https://github.com/umdjs/umd/blob/master/returnExports.js
+	{
+		// For Node.js.
+		module.exports = factory(root);
+	}
+}(typeof commonjsGlobal != 'undefined' ? commonjsGlobal : commonjsGlobal, function(root) {
+
+	if (root.CSS && root.CSS.escape) {
+		return root.CSS.escape;
+	}
+
+	// https://drafts.csswg.org/cssom/#serialize-an-identifier
+	var cssEscape = function(value) {
+		if (arguments.length == 0) {
+			throw new TypeError('`CSS.escape` requires an argument.');
+		}
+		var string = String(value);
+		var length = string.length;
+		var index = -1;
+		var codeUnit;
+		var result = '';
+		var firstCodeUnit = string.charCodeAt(0);
+		while (++index < length) {
+			codeUnit = string.charCodeAt(index);
+			// Note: there’s no need to special-case astral symbols, surrogate
+			// pairs, or lone surrogates.
+
+			// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+			// (U+FFFD).
+			if (codeUnit == 0x0000) {
+				result += '\uFFFD';
+				continue;
+			}
+
+			if (
+				// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+				// U+007F, […]
+				(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+				// If the character is the first character and is in the range [0-9]
+				// (U+0030 to U+0039), […]
+				(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+				// If the character is the second character and is in the range [0-9]
+				// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+				(
+					index == 1 &&
+					codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+					firstCodeUnit == 0x002D
+				)
+			) {
+				// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+				result += '\\' + codeUnit.toString(16) + ' ';
+				continue;
+			}
+
+			if (
+				// If the character is the first character and is a `-` (U+002D), and
+				// there is no second character, […]
+				index == 0 &&
+				length == 1 &&
+				codeUnit == 0x002D
+			) {
+				result += '\\' + string.charAt(index);
+				continue;
+			}
+
+			// If the character is not handled by one of the above rules and is
+			// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+			// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+			// U+005A), or [a-z] (U+0061 to U+007A), […]
+			if (
+				codeUnit >= 0x0080 ||
+				codeUnit == 0x002D ||
+				codeUnit == 0x005F ||
+				codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+				codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+				codeUnit >= 0x0061 && codeUnit <= 0x007A
+			) {
+				// the character itself
+				result += string.charAt(index);
+				continue;
+			}
+
+			// Otherwise, the escaped character.
+			// https://drafts.csswg.org/cssom/#escape-a-character
+			result += '\\' + string.charAt(index);
+
+		}
+		return result;
+	};
+
+	if (!root.CSS) {
+		root.CSS = {};
+	}
+
+	root.CSS.escape = cssEscape;
+	return cssEscape;
+
+}));
+});
+
+/**
+ * Strips diacritics.
+ * @param {string} str
+ * @returns {string}
+ */
+function removeDiacritics(str) {
+  // A polyfill for `normalize` will be even larger than our code below, so
+  //   not practical to embed
+  if (str.normalize) {
+    return str.normalize('NFD').replace(/[\u0300-\u036F]/g, '');
+  }
+
+  var defaultDiacriticsRemovalMap = [{
+    'base': 'A',
+    'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g
+  }, {
+    'base': 'AA',
+    'letters': /[\uA732]/g
+  }, {
+    'base': 'AE',
+    'letters': /[\u00C6\u01FC\u01E2]/g
+  }, {
+    'base': 'AO',
+    'letters': /[\uA734]/g
+  }, {
+    'base': 'AU',
+    'letters': /[\uA736]/g
+  }, {
+    'base': 'AV',
+    'letters': /[\uA738\uA73A]/g
+  }, {
+    'base': 'AY',
+    'letters': /[\uA73C]/g
+  }, {
+    'base': 'B',
+    'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g
+  }, {
+    'base': 'C',
+    'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g
+  }, {
+    'base': 'D',
+    'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g
+  }, {
+    'base': 'DZ',
+    'letters': /[\u01F1\u01C4]/g
+  }, {
+    'base': 'Dz',
+    'letters': /[\u01F2\u01C5]/g
+  }, {
+    'base': 'E',
+    'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g
+  }, {
+    'base': 'F',
+    'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g
+  }, {
+    'base': 'G',
+    'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g
+  }, {
+    'base': 'H',
+    'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g
+  }, {
+    'base': 'I',
+    'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g
+  }, {
+    'base': 'J',
+    'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g
+  }, {
+    'base': 'K',
+    'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g
+  }, {
+    'base': 'L',
+    'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g
+  }, {
+    'base': 'LJ',
+    'letters': /[\u01C7]/g
+  }, {
+    'base': 'Lj',
+    'letters': /[\u01C8]/g
+  }, {
+    'base': 'M',
+    'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g
+  }, {
+    'base': 'N',
+    'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g
+  }, {
+    'base': 'NJ',
+    'letters': /[\u01CA]/g
+  }, {
+    'base': 'Nj',
+    'letters': /[\u01CB]/g
+  }, {
+    'base': 'O',
+    'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g
+  }, {
+    'base': 'OI',
+    'letters': /[\u01A2]/g
+  }, {
+    'base': 'OO',
+    'letters': /[\uA74E]/g
+  }, {
+    'base': 'OU',
+    'letters': /[\u0222]/g
+  }, {
+    'base': 'P',
+    'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g
+  }, {
+    'base': 'Q',
+    'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g
+  }, {
+    'base': 'R',
+    'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g
+  }, {
+    'base': 'S',
+    'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g
+  }, {
+    'base': 'T',
+    'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g
+  }, {
+    'base': 'TZ',
+    'letters': /[\uA728]/g
+  }, {
+    'base': 'U',
+    'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g
+  }, {
+    'base': 'V',
+    'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g
+  }, {
+    'base': 'VY',
+    'letters': /[\uA760]/g
+  }, {
+    'base': 'W',
+    'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g
+  }, {
+    'base': 'X',
+    'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g
+  }, {
+    'base': 'Y',
+    'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g
+  }, {
+    'base': 'Z',
+    'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g
+  }, {
+    'base': 'a',
+    'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g
+  }, {
+    'base': 'aa',
+    'letters': /[\uA733]/g
+  }, {
+    'base': 'ae',
+    'letters': /[\u00E6\u01FD\u01E3]/g
+  }, {
+    'base': 'ao',
+    'letters': /[\uA735]/g
+  }, {
+    'base': 'au',
+    'letters': /[\uA737]/g
+  }, {
+    'base': 'av',
+    'letters': /[\uA739\uA73B]/g
+  }, {
+    'base': 'ay',
+    'letters': /[\uA73D]/g
+  }, {
+    'base': 'b',
+    'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g
+  }, {
+    'base': 'c',
+    'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g
+  }, {
+    'base': 'd',
+    'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g
+  }, {
+    'base': 'dz',
+    'letters': /[\u01F3\u01C6]/g
+  }, {
+    'base': 'e',
+    'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g
+  }, {
+    'base': 'f',
+    'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g
+  }, {
+    'base': 'g',
+    'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g
+  }, {
+    'base': 'h',
+    'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g
+  }, {
+    'base': 'hv',
+    'letters': /[\u0195]/g
+  }, {
+    'base': 'i',
+    'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g
+  }, {
+    'base': 'j',
+    'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g
+  }, {
+    'base': 'k',
+    'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g
+  }, {
+    'base': 'l',
+    'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g
+  }, {
+    'base': 'lj',
+    'letters': /[\u01C9]/g
+  }, {
+    'base': 'm',
+    'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g
+  }, {
+    'base': 'n',
+    'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g
+  }, {
+    'base': 'nj',
+    'letters': /[\u01CC]/g
+  }, {
+    'base': 'o',
+    'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g
+  }, {
+    'base': 'oi',
+    'letters': /[\u01A3]/g
+  }, {
+    'base': 'ou',
+    'letters': /[\u0223]/g
+  }, {
+    'base': 'oo',
+    'letters': /[\uA74F]/g
+  }, {
+    'base': 'p',
+    'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g
+  }, {
+    'base': 'q',
+    'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g
+  }, {
+    'base': 'r',
+    'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g
+  }, {
+    'base': 's',
+    'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g
+  }, {
+    'base': 't',
+    'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g
+  }, {
+    'base': 'tz',
+    'letters': /[\uA729]/g
+  }, {
+    'base': 'u',
+    'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g
+  }, {
+    'base': 'v',
+    'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g
+  }, {
+    'base': 'vy',
+    'letters': /[\uA761]/g
+  }, {
+    'base': 'w',
+    'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g
+  }, {
+    'base': 'x',
+    'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g
+  }, {
+    'base': 'y',
+    'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g
+  }, {
+    'base': 'z',
+    'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g
+  }];
+  return defaultDiacriticsRemovalMap.reduce(function (s, _ref) {
+    var letters = _ref.letters,
+        base = _ref.base;
+    return s.replace(letters, base);
+  }, str);
+}
+
+// sprintf format specifiers
+var s = 's'; // it only does '%s', and return '' when arguments are undefined
+
+var sprintf = function sprintf(strings) {
+  for (var _len = arguments.length, formats = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    formats[_key - 1] = arguments[_key];
+  }
+
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var retStr = '';
+    return strings.slice(0, -1).some(function (str, i) {
+      switch (formats[i]) {
+        default:
+          throw new TypeError('Unrecognized sprintf format');
+
+        case 's':
+          {
+            var arg = args[i];
+
+            if (arg === null || arg === undefined) {
+              return true;
+            }
+
+            retStr += str + arg;
+            return false;
+          }
+      }
+    }) ? '' : retStr + strings.slice(-1);
+  };
+};
+
+function _templateObject24() {
+  var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+  _templateObject24 = function _templateObject24() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject23() {
+  var data = _taggedTemplateLiteral(["[value=\"", "\"]"]);
+
+  _templateObject23 = function _templateObject23() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject22() {
+  var data = _taggedTemplateLiteral(["[value=\"", "\"]"]);
+
+  _templateObject22 = function _templateObject22() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject21() {
+  var data = _taggedTemplateLiteral(["[", "][data-group=\"", "\"]"]);
+
+  _templateObject21 = function _templateObject21() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject20() {
+  var data = _taggedTemplateLiteral(["input[", "]:checked"]);
+
+  _templateObject20 = function _templateObject20() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject19() {
+  var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+  _templateObject19 = function _templateObject19() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject18() {
+  var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+  _templateObject18 = function _templateObject18() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject17() {
+  var data = _taggedTemplateLiteral(["<input type=\"checkbox\" ", " ", ">"]);
+
+  _templateObject17 = function _templateObject17() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject16() {
+  var data = _taggedTemplateLiteral(["<label class=\"optgroup ", "\" data-group=\"", "\">"]);
+
+  _templateObject16 = function _templateObject16() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject15() {
+  var data = _taggedTemplateLiteral(["<span>", "</span>"]);
+
+  _templateObject15 = function _templateObject15() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject14() {
+  var data = _taggedTemplateLiteral([" data-group=\"", "\""]);
+
+  _templateObject14 = function _templateObject14() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject13() {
+  var data = _taggedTemplateLiteral(["<input type=\"", "\" ", "", "", "", ">"]);
+
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = _taggedTemplateLiteral(["<label class=\"", "\">"]);
+
+  _templateObject12 = function _templateObject12() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject11() {
+  var data = _taggedTemplateLiteral(["<li class=\"", " ", "\" ", " ", ">"]);
+
+  _templateObject11 = function _templateObject11() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject10() {
+  var data = _taggedTemplateLiteral(["style=\"", "\""]);
+
+  _templateObject10 = function _templateObject10() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject9() {
+  var data = _taggedTemplateLiteral(["title=\"", "\""]);
+
+  _templateObject9 = function _templateObject9() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject8() {
+  var data = _taggedTemplateLiteral(["<li class=\"ms-no-results\">", "</li>"]);
+
+  _templateObject8 = function _templateObject8() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject7() {
+  var data = _taggedTemplateLiteral(["<input type=\"checkbox\" ", " />"]);
+
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["placeholder=\"", "\""]);
+
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = _taggedTemplateLiteral(["<div class=\"ms-drop ", "\"></div>"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = _taggedTemplateLiteral(["\n      <button type=\"button\" class=\"ms-choice\">\n      <span class=\"placeholder\">", "</span>\n      <div></div>\n      </button>\n    "]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = _taggedTemplateLiteral(["title=\"", "\""]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = _taggedTemplateLiteral(["<div class=\"ms-parent ", "\" ", "/>"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = _taggedTemplateLiteral(["label[for=\"", "\"]"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var MultipleSelect =
+/*#__PURE__*/
+function () {
+  function MultipleSelect($el, options) {
+    var _this = this;
+
+    _classCallCheck(this, MultipleSelect);
+
+    var el = $el[0];
+    var name = el.getAttribute('name') || options.name || '';
+    this.options = $.extend({}, defaults, options); // hide select element
+
+    this.$el = $el.hide(); // label element
+
+    this.$label = this.$el.closest('label');
+
+    if (this.$label.length === 0 && el.getAttribute('id')) {
+      this.$label = $(sprintf(_templateObject(), s)(css_escape(el.getAttribute('id'))));
+    } // restore class and title from select element
+
+
+    this.$parent = $(sprintf(_templateObject2(), s, s)(el.getAttribute('class') || '', sprintf(_templateObject3(), s)(el.getAttribute('title')))); // add placeholder to choice button
+
+    this.options.placeholder = this.options.placeholder || el.getAttribute('placeholder') || '';
+    this.$choice = $(sprintf(_templateObject4(), s)(this.options.placeholder)); // default position is bottom
+
+    this.$drop = $(sprintf(_templateObject5(), s)(this.options.position));
+
+    if (this.options.dropWidth) {
+      this.$drop.css('width', this.options.dropWidth);
+    }
+
+    this.$el.after(this.$parent);
+    this.$parent.append(this.$choice);
+    this.$parent.append(this.$drop);
+
+    if (el.disabled) {
+      this.$choice.addClass('disabled');
+    }
+
+    this.$parent.css('width', this.options.width || this.$el.css('width') || this.$el.outerWidth() + 20);
+    this.selectAllName = "data-name=\"selectAll".concat(name, "\"");
+    this.selectGroupName = "data-name=\"selectGroup".concat(name, "\"");
+    this.selectItemName = "data-name=\"selectItem".concat(name, "\"");
+
+    if (!this.options.keepOpen) {
+      $(document).click(function (e) {
+        if ($(e.target)[0] === _this.$choice[0] || $(e.target).parents('.ms-choice')[0] === _this.$choice[0]) {
+          return;
+        }
+
+        if (($(e.target)[0] === _this.$drop[0] || $(e.target).parents('.ms-drop')[0] !== _this.$drop[0] && e.target !== el) && _this.options.isOpen) {
+          _this.close();
+        }
+      });
+    }
+
+    this.options.onAfterCreate();
+  }
+
+  _createClass(MultipleSelect, [{
+    key: "init",
+    value: function init() {
+      var _this2 = this;
+
+      var $ul = $('<ul></ul>');
+      this.$drop.html('');
+
+      if (this.options.filter) {
+        this.$drop.append("\n        <div class=\"ms-search\">\n          <input type=\"text\" autocomplete=\"off\" autocorrect=\"off\"\n            autocapitalize=\"off\" spellcheck=\"false\"\n            ".concat(sprintf(_templateObject6(), s)(this.options.filterPlaceholder), ">\n        </div>\n      "));
+      }
+
+      if (this.options.selectAll && !this.options.single) {
+        $ul.append(['<li class="ms-select-all">', '<label>', sprintf(_templateObject7(), s)(this.selectAllName), "<span>".concat(this.options.formatSelectAll(), "</span>"), '</label>', '</li>'].join(''));
+      }
+
+      $.each(this.$el.children(), function (i, elm) {
+        $ul.append(_this2.optionToHtml(i, elm));
+      });
+      $ul.append(sprintf(_templateObject8(), s)(this.options.formatNoMatchesFound()));
+      this.$drop.append($ul);
+      this.$drop.find('ul').css('max-height', "".concat(this.options.maxHeight, "px"));
+      this.$drop.find('.multiple').css('width', "".concat(this.options.multipleWidth, "px"));
+      this.$searchInput = this.$drop.find('.ms-search input');
+      this.$selectAll = this.$drop.find("input[".concat(this.selectAllName, "]"));
+      this.$selectGroups = this.$drop.find("input[".concat(this.selectGroupName, "]"));
+      this.$selectItems = this.$drop.find("input[".concat(this.selectItemName, "]:enabled"));
+      this.$disableItems = this.$drop.find("input[".concat(this.selectItemName, "]:disabled"));
+      this.$noResults = this.$drop.find('.ms-no-results');
+      this.events();
+      this.updateSelectAll(true);
+      this.update(true);
+      this.updateOptGroupSelect(true);
+
+      if (this.options.isOpen) {
+        this.open();
+      }
+
+      if (this.options.openOnHover) {
+        this.$parent.hover(function () {
+          _this2.open();
+        }, function () {
+          _this2.close();
+        });
+      }
+    }
+  }, {
+    key: "optionToHtml",
+    value: function optionToHtml(i, elm, group, groupDisabled) {
+      var _this3 = this;
+
+      var $elm = $(elm);
+      var el = $elm[0];
+      var classes = el.getAttribute('class') || '';
+      var title = sprintf(_templateObject9(), s)(el.getAttribute('title'));
+      var multiple = this.options.multiple ? 'multiple' : '';
+      var disabled;
+      var type = this.options.single ? 'radio' : 'checkbox';
+
+      if ($elm.is('option')) {
+        var text = this.options.textTemplate($elm);
+        var value = el.value,
+            selected = el.selected;
+        var customStyle = this.options.styler(value);
+        var style = customStyle ? sprintf(_templateObject10(), s)(customStyle) : '';
+        disabled = groupDisabled || el.disabled;
+        var $el = $([sprintf(_templateObject11(), s, s, s, s)(multiple, classes, title, style), sprintf(_templateObject12(), s)(disabled ? 'disabled' : ''), sprintf(_templateObject13(), s, s, s, s, s)(type, this.selectItemName, selected ? ' checked="checked"' : '', disabled ? ' disabled="disabled"' : '', sprintf(_templateObject14(), s)(group)), sprintf(_templateObject15(), s)(text), '</label>', '</li>'].join(''));
+        $el.find('input').val(value);
+        return $el;
+      }
+
+      if ($elm.is('optgroup')) {
+        var label = this.options.labelTemplate($elm);
+        var $group = $('<div/>');
+        group = "group_".concat(i);
+        disabled = el.disabled;
+        $group.append(['<li class="group">', sprintf(_templateObject16(), s, s)(disabled ? 'disabled' : '', group), this.options.hideOptgroupCheckboxes || this.options.single ? '' : sprintf(_templateObject17(), s, s)(this.selectGroupName, disabled ? 'disabled="disabled"' : ''), label, '</label>', '</li>'].join(''));
+        $.each($elm.children(), function (j, elem) {
+          $group.append(_this3.optionToHtml(j, elem, group, disabled));
+        });
+        return $group.html();
+      } // Append nothing
+
+
+      return undefined;
+    }
+  }, {
+    key: "events",
+    value: function events() {
+      var _this4 = this;
+
+      var toggleOpen = function toggleOpen(e) {
+        e.preventDefault();
+
+        _this4[_this4.options.isOpen ? 'close' : 'open']();
+      };
+
+      if (this.$label) {
+        this.$label.off('click').on('click', function (e) {
+          if (e.target.nodeName.toLowerCase() !== 'label' || e.target !== _this4) {
+            return;
+          }
+
+          toggleOpen(e);
+
+          if (!_this4.options.filter || !_this4.options.isOpen) {
+            _this4.focus();
+          }
+
+          e.stopPropagation(); // Causes lost focus otherwise
+        });
+      }
+
+      this.$choice.off('click').on('click', toggleOpen).off('focus').on('focus', this.options.onFocus).off('blur').on('blur', this.options.onBlur);
+      this.$parent.off('keydown').on('keydown', function (e) {
+        // esc key
+        if (e.which === 27) {
+          _this4.close();
+
+          _this4.$choice.focus();
+        }
+      });
+      this.$searchInput.off('keydown').on('keydown', function (e) {
+        // Ensure shift-tab causes lost focus from filter as with clicking away
+        if (e.keyCode === 9 && e.shiftKey) {
+          _this4.close();
+        }
+      }).off('keyup').on('keyup', function (e) {
+        // enter or space
+        // Avoid selecting/deselecting if no choices made
+        if (_this4.options.filterAcceptOnEnter && [13, 32].includes(e.which) && _this4.$searchInput.val()) {
+          _this4.$selectAll.click();
+
+          _this4.close();
+
+          _this4.focus();
+
+          return;
+        }
+
+        _this4.filter();
+      });
+      this.$selectAll.off('click').on('click', function (e) {
+        var checked = $(e.currentTarget).prop('checked');
+
+        var $items = _this4.$selectItems.filter(':visible');
+
+        if ($items.length === _this4.$selectItems.length) {
+          _this4[checked ? 'checkAll' : 'uncheckAll']();
+        } else {
+          // when the filter option is true
+          _this4.$selectGroups.prop('checked', checked);
+
+          $items.prop('checked', checked);
+
+          _this4.options[checked ? 'onCheckAll' : 'onUncheckAll']();
+
+          _this4.update();
+        }
+      });
+      this.$selectGroups.off('click').on('click', function (e) {
+        var $this = $(e.currentTarget);
+        var group = $this.parent()[0].getAttribute('data-group');
+
+        var $items = _this4.$selectItems.filter(':visible');
+
+        var $children = $items.filter(sprintf(_templateObject18(), s)(group));
+        var checked = $children.length !== $children.filter(':checked').length;
+        $children.prop('checked', checked);
+
+        _this4.updateSelectAll();
+
+        _this4.update();
+
+        _this4.options.onOptgroupClick({
+          label: $this.parent().text(),
+          checked: checked,
+          children: $children.get().map(function (el) {
+            return {
+              label: $(el).parent().text(),
+              value: $(el).val(),
+              check: $(el).prop('checked')
+            };
+          })
+        });
+      });
+      this.$selectItems.off('click').on('click', function (e) {
+        var $this = $(e.currentTarget);
+
+        if (_this4.options.single) {
+          var clickedVal = $(e.currentTarget).val();
+
+          _this4.$selectItems.filter(function (i, el) {
+            return $(el).val() !== clickedVal;
+          }).each(function (i, el) {
+            $(el).prop('checked', false);
+          });
+        }
+
+        _this4.updateSelectAll();
+
+        _this4.update();
+
+        _this4.updateOptGroupSelect();
+
+        _this4.options.onClick({
+          label: $this.parent().text(),
+          value: $this.val(),
+          checked: $this.prop('checked')
+        });
+
+        if (_this4.options.single && _this4.options.isOpen && !_this4.options.keepOpen) {
+          _this4.close();
+        }
+      });
+    }
+  }, {
+    key: "open",
+    value: function open() {
+      if (this.$choice.hasClass('disabled')) {
+        return;
+      }
+
+      this.options.isOpen = true;
+      this.$choice.find('>div').addClass('open');
+      this.$drop[this.animateMethod('show')](); // fix filter bug: no results show
+
+      this.$selectAll.parent().show();
+      this.$noResults.hide(); // Fix #77: 'All selected' when no options
+
+      if (!this.$el.children().length) {
+        this.$selectAll.parent().hide();
+        this.$noResults.show();
+      }
+
+      if (this.options.container) {
+        var offset = this.$drop.offset();
+        this.$drop.appendTo($(this.options.container));
+        this.$drop.offset({
+          top: offset.top,
+          left: offset.left
+        });
+        this.$drop.outerWidth(this.$parent.outerWidth());
+      }
+
+      if (this.$el.children().length && this.options.filter) {
+        this.$searchInput.val('');
+        this.$searchInput.focus();
+        this.filter();
+      }
+
+      this.options.onOpen();
+    }
+  }, {
+    key: "close",
+    value: function close() {
+      this.options.isOpen = false;
+      this.$choice.find('>div').removeClass('open');
+      this.$drop[this.animateMethod('hide')]();
+
+      if (this.options.container) {
+        this.$parent.append(this.$drop);
+        this.$drop.css({
+          'top': 'auto',
+          'left': 'auto'
+        });
+      }
+
+      this.options.onClose();
+    }
+  }, {
+    key: "animateMethod",
+    value: function animateMethod(method) {
+      var methods = {
+        show: {
+          fade: 'fadeIn',
+          slide: 'slideDown'
+        },
+        hide: {
+          fade: 'fadeOut',
+          slide: 'slideUp'
+        }
+      };
+      return methods[method][this.options.animate] || method;
+    }
+  }, {
+    key: "update",
+    value: function update(ignoreTrigger) {
+      var valueSelects = this.getSelects();
+      var textSelects = this.options.displayValues ? valueSelects : this.getSelects('text');
+      var $span = this.$choice.find('>span');
+      var sl = valueSelects.length;
+
+      if (sl === 0) {
+        $span.addClass('placeholder').html(this.options.placeholder);
+      } else if (this.options.formatAllSelected() && sl === this.$selectItems.length + this.$disableItems.length) {
+        $span.removeClass('placeholder').html(this.options.formatAllSelected());
+      } else if (this.options.ellipsis && sl > this.options.minimumCountSelected) {
+        $span.removeClass('placeholder').text("".concat(textSelects.slice(0, this.options.minimumCountSelected).join(this.options.displayDelimiter), "..."));
+      } else if (this.options.formatCountSelected() && sl > this.options.minimumCountSelected) {
+        $span.removeClass('placeholder').html(this.options.formatCountSelected(sl, this.$selectItems.length + this.$disableItems.length));
+      } else {
+        $span.removeClass('placeholder').text(textSelects.join(this.options.displayDelimiter));
+      }
+
+      if (this.options.displayTitle) {
+        $span.prop('title', this.getSelects('text'));
+      } // set selects to select
+
+
+      this.$el.val(this.getSelects()); // add selected class to selected li
+
+      this.$drop.find('li').removeClass('selected');
+      this.$drop.find('input:checked').each(function (i, el) {
+        $(el).parents('li').first().addClass('selected');
+      }); // trigger <select> change event
+
+      if (!ignoreTrigger) {
+        this.$el.trigger('change');
+      }
+    }
+  }, {
+    key: "updateSelectAll",
+    value: function updateSelectAll(isInit) {
+      var $items = this.$selectItems;
+
+      if (!isInit) {
+        $items = $items.filter(':visible');
+      }
+
+      this.$selectAll.prop('checked', $items.length && $items.length === $items.filter(':checked').length);
+
+      if (!isInit && this.$selectAll.prop('checked')) {
+        this.options.onCheckAll();
+      }
+    }
+  }, {
+    key: "updateOptGroupSelect",
+    value: function updateOptGroupSelect(isInit) {
+      var $items = this.$selectItems;
+
+      if (!isInit) {
+        $items = $items.filter(':visible');
+      }
+
+      $.each(this.$selectGroups, function (i, val) {
+        var group = $(val).parent()[0].getAttribute('data-group');
+        var $children = $items.filter(sprintf(_templateObject19(), s)(group));
+        $(val).prop('checked', $children.length && $children.length === $children.filter(':checked').length);
+      });
+    } // value or text, default: 'value'
+
+  }, {
+    key: "getSelects",
+    value: function getSelects(type) {
+      var _this5 = this;
+
+      var texts = [];
+      var values = [];
+      this.$drop.find(sprintf(_templateObject20(), s)(this.selectItemName)).each(function (i, el) {
+        texts.push($(el).parents('li').first().text());
+        values.push($(el).val());
+      });
+
+      if (type === 'text' && this.$selectGroups.length) {
+        texts = [];
+        this.$selectGroups.each(function (i, el) {
+          var html = [];
+          var text = $.trim($(el).parent().text());
+          var group = $(el).parent().data('group');
+
+          var $children = _this5.$drop.find(sprintf(_templateObject21(), s, s)(_this5.selectItemName, group));
+
+          var $selected = $children.filter(':checked');
+
+          if (!$selected.length) {
+            return;
+          }
+
+          html.push('[');
+          html.push(text);
+
+          if ($children.length > $selected.length) {
+            var list = [];
+            $selected.each(function (j, elem) {
+              list.push($(elem).parent().text());
+            });
+            html.push(": ".concat(list.join(', ')));
+          }
+
+          html.push(']');
+          texts.push(html.join(''));
+        });
+      }
+
+      return type === 'text' ? texts : values;
+    }
+  }, {
+    key: "setSelects",
+    value: function setSelects(values) {
+      var _this6 = this;
+
+      this.$selectItems.prop('checked', false);
+      this.$disableItems.prop('checked', false);
+      $.each(values, function (i, value) {
+        _this6.$selectItems.filter(sprintf(_templateObject22(), s)(value)).prop('checked', true);
+
+        _this6.$disableItems.filter(sprintf(_templateObject23(), s)(value)).prop('checked', true);
+      });
+      this.$selectAll.prop('checked', this.$selectItems.length === this.$selectItems.filter(':checked').length + this.$disableItems.filter(':checked').length);
+      $.each(this.$selectGroups, function (i, val) {
+        var group = $(val).parent()[0].getAttribute('data-group');
+
+        var $children = _this6.$selectItems.filter("[data-group=\"".concat(group, "\"]"));
+
+        $(val).prop('checked', $children.length && $children.length === $children.filter(':checked').length);
+      });
+      this.update(false);
+    }
+  }, {
+    key: "enable",
+    value: function enable() {
+      this.$choice.removeClass('disabled');
+    }
+  }, {
+    key: "disable",
+    value: function disable() {
+      this.$choice.addClass('disabled');
+    }
+  }, {
+    key: "checkAll",
+    value: function checkAll() {
+      this.$selectItems.prop('checked', true);
+      this.$selectGroups.prop('checked', true);
+      this.$selectAll.prop('checked', true);
+      this.update();
+      this.options.onCheckAll();
+    }
+  }, {
+    key: "uncheckAll",
+    value: function uncheckAll() {
+      this.$selectItems.prop('checked', false);
+      this.$selectGroups.prop('checked', false);
+      this.$selectAll.prop('checked', false);
+      this.update();
+      this.options.onUncheckAll();
+    }
+  }, {
+    key: "focus",
+    value: function focus() {
+      this.$choice.focus();
+      this.options.onFocus();
+    }
+  }, {
+    key: "blur",
+    value: function blur() {
+      this.$choice.blur();
+      this.options.onBlur();
+    }
+  }, {
+    key: "refresh",
+    value: function refresh() {
+      this.init();
+    }
+  }, {
+    key: "filter",
+    value: function filter() {
+      var _this7 = this;
+
+      var text = $.trim(this.$searchInput.val()).toLowerCase();
+
+      if (text.length === 0) {
+        this.$selectAll.closest('li').show();
+        this.$selectItems.closest('li').show();
+        this.$disableItems.closest('li').show();
+        this.$selectGroups.closest('li').show();
+        this.$noResults.hide();
+      } else {
+        if (!this.options.filterGroup) {
+          this.$selectItems.each(function (i, el) {
+            var $parent = $(el).parent();
+            var hasText = removeDiacritics($parent.text().toLowerCase()).includes(removeDiacritics(text));
+            $parent.closest('li')[hasText ? 'show' : 'hide']();
+          });
+        }
+
+        this.$disableItems.parent().hide();
+        this.$selectGroups.each(function (i, el) {
+          var $parent = $(el).parent();
+          var group = $parent[0].getAttribute('data-group');
+
+          if (_this7.options.filterGroup) {
+            var hasText = removeDiacritics($parent.text().toLowerCase()).includes(removeDiacritics(text));
+            var func = hasText ? 'show' : 'hide';
+            $parent.closest('li')[func]();
+
+            _this7.$selectItems.filter("[data-group=\"".concat(group, "\"]")).closest('li')[func]();
+          } else {
+            var $items = _this7.$selectItems.filter(':visible');
+
+            var _hasText = $items.filter(sprintf(_templateObject24(), s)(group)).length;
+            $parent.closest('li')[_hasText ? 'show' : 'hide']();
+          }
+        }); // Check if no matches found
+
+        if (this.$selectItems.parent().filter(':visible').length) {
+          this.$selectAll.closest('li').show();
+          this.$noResults.hide();
+        } else {
+          this.$selectAll.closest('li').hide();
+          this.$noResults.show();
+        }
+      }
+
+      this.updateOptGroupSelect();
+      this.updateSelectAll();
+      this.options.onFilter(text);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this.$el.before(this.$parent).show();
+      this.$parent.remove();
+    }
+  }]);
+
+  return MultipleSelect;
+}();
+
+var defaults = {
+  name: '',
+  placeholder: '',
+  selectAll: true,
+  single: false,
+  multiple: false,
+  hideOptgroupCheckboxes: false,
+  multipleWidth: 80,
+  width: undefined,
+  dropWidth: undefined,
+  maxHeight: 250,
+  position: 'bottom',
+  displayValues: false,
+  displayTitle: false,
+  displayDelimiter: ', ',
+  minimumCountSelected: 3,
+  ellipsis: false,
+  isOpen: false,
+  keepOpen: false,
+  openOnHover: false,
+  container: null,
+  filter: false,
+  filterGroup: false,
+  filterPlaceholder: '',
+  filterAcceptOnEnter: false,
+  animate: undefined,
+  styler: function styler() {
+    return false;
+  },
+  textTemplate: function textTemplate($elm) {
+    return $elm[0].innerHTML;
+  },
+  labelTemplate: function labelTemplate($elm) {
+    return $elm[0].getAttribute('label');
+  },
+  formatSelectAll: function formatSelectAll() {
+    return '[Select all]';
+  },
+  formatAllSelected: function formatAllSelected() {
+    return 'All selected';
+  },
+  formatCountSelected: function formatCountSelected(count, total) {
+    return count + ' of ' + total + ' selected';
+  },
+  formatNoMatchesFound: function formatNoMatchesFound() {
+    return 'No matches found';
+  },
+  onOpen: function onOpen() {
+    return false;
+  },
+  onClose: function onClose() {
+    return false;
+  },
+  onCheckAll: function onCheckAll() {
+    return false;
+  },
+  onUncheckAll: function onUncheckAll() {
+    return false;
+  },
+  onFocus: function onFocus() {
+    return false;
+  },
+  onBlur: function onBlur() {
+    return false;
+  },
+  onOptgroupClick: function onOptgroupClick() {
+    return false;
+  },
+  onClick: function onClick() {
+    return false;
+  },
+  onFilter: function onFilter() {
+    return false;
+  },
+  onAfterCreate: function onAfterCreate() {
+    return false;
+  }
+};
+
+$.fn.multipleSelect = function (option) {
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+
+  var value;
+  var allowedMethods = ['getSelects', 'setSelects', 'enable', 'disable', 'open', 'close', 'checkAll', 'uncheckAll', 'focus', 'blur', 'refresh', 'destroy'];
+  this.each(function (i, el) {
+    var $this = $(el);
+    var data = $this.data('multipleSelect');
+    var options = $.extend({}, $this.data(), _typeof(option) === 'object' && option);
+
+    if (!data) {
+      data = new MultipleSelect($this, options);
+      $this.data('multipleSelect', data);
+    }
+
+    if (typeof option === 'string') {
+      var _data;
+
+      if ($.inArray(option, allowedMethods) < 0) {
+        throw new Error("Unknown method: ".concat(option));
+      }
+
+      value = (_data = data)[option].apply(_data, args);
+
+      if (option === 'destroy') {
+        $this.removeData('multipleSelect');
+      }
+    } else {
+      data.init();
+    }
+  });
+  return typeof value !== 'undefined' ? value : this;
+};
diff --git a/src/dist/multiple-select-es.min.js b/src/dist/multiple-select-es.min.js
new file mode 100644
index 0000000..1c9aa6a
--- /dev/null
+++ b/src/dist/multiple-select-es.min.js
@@ -0,0 +1,10 @@
+/**
+  * multiple-select - Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
+  *
+  * @version v1.3.1
+  * @homepage http://multiple-select.wenzhixin.net.cn
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+import"core-js/modules/es.array.filter";import"core-js/modules/es.array.find";import"core-js/modules/es.array.includes";import"core-js/modules/es.array.join";import"core-js/modules/es.array.map";import"core-js/modules/es.array.slice";import"core-js/modules/es.function.name";import"core-js/modules/es.string.includes";import"core-js/modules/es.string.trim";import"core-js/modules/es.string.replace";function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}var commonjsGlobal="undefined"==typeof globalThis?"undefined"==typeof window?"undefined"==typeof global?"undefined"==typeof self?{}:self:global:window:globalThis;function createCommonjsModule(a,b){return b={exports:{}},a(b,b.exports),b.exports}var css_escape=createCommonjsModule(function(a){(function(b,c){a.exports=c(b)})("undefined"==typeof commonjsGlobal?commonjsGlobal:commonjsGlobal,function(a){if(a.CSS&&a.CSS.escape)return a.CSS.escape;var b=function(a){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var b,c=a+"",d=c.length,e=-1,f="",g=c.charCodeAt(0);++e<d;){if(b=c.charCodeAt(e),0==b){f+="\uFFFD";continue}if(1<=b&&31>=b||127==b||0==e&&48<=b&&57>=b||1==e&&48<=b&&57>=b&&45==g){f+="\\"+b.toString(16)+" ";continue}if(0==e&&1==d&&45==b){f+="\\"+c.charAt(e);continue}if(128<=b||45==b||95==b||48<=b&&57>=b||65<=b&&90>=b||97<=b&&122>=b){f+=c.charAt(e);continue}f+="\\"+c.charAt(e)}return f};return a.CSS||(a.CSS={}),a.CSS.escape=b,b})});function removeDiacritics(a){if(a.normalize)return a.normalize("NFD").replace(/[\u0300-\u036F]/g,"");var b=[{base:"A",letters:/[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g},{base:"AA",letters:/[\uA732]/g},{base:"AE",letters:/[\u00C6\u01FC\u01E2]/g},{base:"AO",letters:/[\uA734]/g},{base:"AU",letters:/[\uA736]/g},{base:"AV",letters:/[\uA738\uA73A]/g},{base:"AY",letters:/[\uA73C]/g},{base:"B",letters:/[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g},{base:"C",letters:/[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g},{base:"D",letters:/[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g},{base:"DZ",letters:/[\u01F1\u01C4]/g},{base:"Dz",letters:/[\u01F2\u01C5]/g},{base:"E",letters:/[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g},{base:"F",letters:/[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g},{base:"G",letters:/[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g},{base:"H",letters:/[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g},{base:"I",letters:/[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g},{base:"J",letters:/[\u004A\u24BF\uFF2A\u0134\u0248]/g},{base:"K",letters:/[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g},{base:"L",letters:/[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g},{base:"LJ",letters:/[\u01C7]/g},{base:"Lj",letters:/[\u01C8]/g},{base:"M",letters:/[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g},{base:"N",letters:/[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g},{base:"NJ",letters:/[\u01CA]/g},{base:"Nj",letters:/[\u01CB]/g},{base:"O",letters:/[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g},{base:"OI",letters:/[\u01A2]/g},{base:"OO",letters:/[\uA74E]/g},{base:"OU",letters:/[\u0222]/g},{base:"P",letters:/[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g},{base:"Q",letters:/[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g},{base:"R",letters:/[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g},{base:"S",letters:/[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g},{base:"T",letters:/[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g},{base:"TZ",letters:/[\uA728]/g},{base:"U",letters:/[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g},{base:"V",letters:/[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g},{base:"VY",letters:/[\uA760]/g},{base:"W",letters:/[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g},{base:"X",letters:/[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g},{base:"Y",letters:/[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g},{base:"Z",letters:/[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g},{base:"a",letters:/[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g},{base:"aa",letters:/[\uA733]/g},{base:"ae",letters:/[\u00E6\u01FD\u01E3]/g},{base:"ao",letters:/[\uA735]/g},{base:"au",letters:/[\uA737]/g},{base:"av",letters:/[\uA739\uA73B]/g},{base:"ay",letters:/[\uA73D]/g},{base:"b",letters:/[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g},{base:"c",letters:/[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g},{base:"d",letters:/[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g},{base:"dz",letters:/[\u01F3\u01C6]/g},{base:"e",letters:/[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g},{base:"f",letters:/[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g},{base:"g",letters:/[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g},{base:"h",letters:/[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g},{base:"hv",letters:/[\u0195]/g},{base:"i",letters:/[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g},{base:"j",letters:/[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g},{base:"k",letters:/[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g},{base:"l",letters:/[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g},{base:"lj",letters:/[\u01C9]/g},{base:"m",letters:/[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g},{base:"n",letters:/[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g},{base:"nj",letters:/[\u01CC]/g},{base:"o",letters:/[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g},{base:"oi",letters:/[\u01A3]/g},{base:"ou",letters:/[\u0223]/g},{base:"oo",letters:/[\uA74F]/g},{base:"p",letters:/[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g},{base:"q",letters:/[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g},{base:"r",letters:/[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g},{base:"s",letters:/[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g},{base:"t",letters:/[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g},{base:"tz",letters:/[\uA729]/g},{base:"u",letters:/[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g},{base:"v",letters:/[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g},{base:"vy",letters:/[\uA761]/g},{base:"w",letters:/[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g},{base:"x",letters:/[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g},{base:"y",letters:/[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g},{base:"z",letters:/[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g}];return b.reduce(function(a,b){var c=b.letters,d=b.base;return a.replace(c,d)},a)}var s="s",sprintf=function(a){for(var b=arguments.length,c=Array(1<b?b-1:0),d=1;d<b;d++)c[d-1]=arguments[d];return function(){for(var b=arguments.length,d=Array(b),e=0;e<b;e++)d[e]=arguments[e];var f="";return a.slice(0,-1).some(function(a,b){switch(c[b]){default:throw new TypeError("Unrecognized sprintf format");case"s":{var e=d[b];if(null===e||e===void 0)return!0;return f+=a+e,!1}}})?"":f+a.slice(-1)}};function _templateObject24(){var a=_taggedTemplateLiteral(["[data-group=\"","\"]"]);return _templateObject24=function(){return a},a}function _templateObject23(){var a=_taggedTemplateLiteral(["[value=\"","\"]"]);return _templateObject23=function(){return a},a}function _templateObject22(){var a=_taggedTemplateLiteral(["[value=\"","\"]"]);return _templateObject22=function(){return a},a}function _templateObject21(){var a=_taggedTemplateLiteral(["[","][data-group=\"","\"]"]);return _templateObject21=function(){return a},a}function _templateObject20(){var a=_taggedTemplateLiteral(["input[","]:checked"]);return _templateObject20=function(){return a},a}function _templateObject19(){var a=_taggedTemplateLiteral(["[data-group=\"","\"]"]);return _templateObject19=function(){return a},a}function _templateObject18(){var a=_taggedTemplateLiteral(["[data-group=\"","\"]"]);return _templateObject18=function(){return a},a}function _templateObject17(){var a=_taggedTemplateLiteral(["<input type=\"checkbox\" "," ",">"]);return _templateObject17=function(){return a},a}function _templateObject16(){var a=_taggedTemplateLiteral(["<label class=\"optgroup ","\" data-group=\"","\">"]);return _templateObject16=function(){return a},a}function _templateObject15(){var a=_taggedTemplateLiteral(["<span>","</span>"]);return _templateObject15=function(){return a},a}function _templateObject14(){var a=_taggedTemplateLiteral([" data-group=\"","\""]);return _templateObject14=function(){return a},a}function _templateObject13(){var a=_taggedTemplateLiteral(["<input type=\"","\" ","","","",">"]);return _templateObject13=function(){return a},a}function _templateObject12(){var a=_taggedTemplateLiteral(["<label class=\"","\">"]);return _templateObject12=function(){return a},a}function _templateObject11(){var a=_taggedTemplateLiteral(["<li class=\""," ","\" "," ",">"]);return _templateObject11=function(){return a},a}function _templateObject10(){var a=_taggedTemplateLiteral(["style=\"","\""]);return _templateObject10=function(){return a},a}function _templateObject9(){var a=_taggedTemplateLiteral(["title=\"","\""]);return _templateObject9=function(){return a},a}function _templateObject8(){var a=_taggedTemplateLiteral(["<li class=\"ms-no-results\">","</li>"]);return _templateObject8=function(){return a},a}function _templateObject7(){var a=_taggedTemplateLiteral(["<input type=\"checkbox\" "," />"]);return _templateObject7=function(){return a},a}function _templateObject6(){var a=_taggedTemplateLiteral(["placeholder=\"","\""]);return _templateObject6=function(){return a},a}function _templateObject5(){var a=_taggedTemplateLiteral(["<div class=\"ms-drop ","\"></div>"]);return _templateObject5=function(){return a},a}function _templateObject4(){var a=_taggedTemplateLiteral(["\n      <button type=\"button\" class=\"ms-choice\">\n      <span class=\"placeholder\">","</span>\n      <div></div>\n      </button>\n    "]);return _templateObject4=function(){return a},a}function _templateObject3(){var a=_taggedTemplateLiteral(["title=\"","\""]);return _templateObject3=function(){return a},a}function _templateObject2(){var a=_taggedTemplateLiteral(["<div class=\"ms-parent ","\" ","/>"]);return _templateObject2=function(){return a},a}function _templateObject(){var a=_taggedTemplateLiteral(["label[for=\"","\"]"]);return _templateObject=function(){return a},a}var MultipleSelect=function(){function a(b,c){var d=this;_classCallCheck(this,a);var f=b[0],e=f.getAttribute("name")||c.name||"";this.options=$.extend({},defaults,c),this.$el=b.hide(),this.$label=this.$el.closest("label"),0===this.$label.length&&f.getAttribute("id")&&(this.$label=$(sprintf(_templateObject(),s)(css_escape(f.getAttribute("id"))))),this.$parent=$(sprintf(_templateObject2(),s,s)(f.getAttribute("class")||"",sprintf(_templateObject3(),s)(f.getAttribute("title")))),this.options.placeholder=this.options.placeholder||f.getAttribute("placeholder")||"",this.$choice=$(sprintf(_templateObject4(),s)(this.options.placeholder)),this.$drop=$(sprintf(_templateObject5(),s)(this.options.position)),this.options.dropWidth&&this.$drop.css("width",this.options.dropWidth),this.$el.after(this.$parent),this.$parent.append(this.$choice),this.$parent.append(this.$drop),f.disabled&&this.$choice.addClass("disabled"),this.$parent.css("width",this.options.width||this.$el.css("width")||this.$el.outerWidth()+20),this.selectAllName="data-name=\"selectAll".concat(e,"\""),this.selectGroupName="data-name=\"selectGroup".concat(e,"\""),this.selectItemName="data-name=\"selectItem".concat(e,"\""),this.options.keepOpen||$(document).click(function(a){$(a.target)[0]===d.$choice[0]||$(a.target).parents(".ms-choice")[0]===d.$choice[0]||($(a.target)[0]===d.$drop[0]||$(a.target).parents(".ms-drop")[0]!==d.$drop[0]&&a.target!==f)&&d.options.isOpen&&d.close()}),this.options.onAfterCreate()}return _createClass(a,[{key:"init",value:function(){var a=this,b=$("<ul></ul>");this.$drop.html(""),this.options.filter&&this.$drop.append("\n        <div class=\"ms-search\">\n          <input type=\"text\" autocomplete=\"off\" autocorrect=\"off\"\n            autocapitalize=\"off\" spellcheck=\"false\"\n            ".concat(sprintf(_templateObject6(),s)(this.options.filterPlaceholder),">\n        </div>\n      ")),this.options.selectAll&&!this.options.single&&b.append(["<li class=\"ms-select-all\">","<label>",sprintf(_templateObject7(),s)(this.selectAllName),"<span>".concat(this.options.formatSelectAll(),"</span>"),"</label>","</li>"].join("")),$.each(this.$el.children(),function(c,d){b.append(a.optionToHtml(c,d))}),b.append(sprintf(_templateObject8(),s)(this.options.formatNoMatchesFound())),this.$drop.append(b),this.$drop.find("ul").css("max-height","".concat(this.options.maxHeight,"px")),this.$drop.find(".multiple").css("width","".concat(this.options.multipleWidth,"px")),this.$searchInput=this.$drop.find(".ms-search input"),this.$selectAll=this.$drop.find("input[".concat(this.selectAllName,"]")),this.$selectGroups=this.$drop.find("input[".concat(this.selectGroupName,"]")),this.$selectItems=this.$drop.find("input[".concat(this.selectItemName,"]:enabled")),this.$disableItems=this.$drop.find("input[".concat(this.selectItemName,"]:disabled")),this.$noResults=this.$drop.find(".ms-no-results"),this.events(),this.updateSelectAll(!0),this.update(!0),this.updateOptGroupSelect(!0),this.options.isOpen&&this.open(),this.options.openOnHover&&this.$parent.hover(function(){a.open()},function(){a.close()})}},{key:"optionToHtml",value:function(a,b,c,d){var e,f=this,g=$(b),h=g[0],i=h.getAttribute("class")||"",j=sprintf(_templateObject9(),s)(h.getAttribute("title")),k=this.options.multiple?"multiple":"",l=this.options.single?"radio":"checkbox";if(g.is("option")){var m=this.options.textTemplate(g),n=h.value,o=h.selected,p=this.options.styler(n),q=p?sprintf(_templateObject10(),s)(p):"";e=d||h.disabled;var r=$([sprintf(_templateObject11(),s,s,s,s)(k,i,j,q),sprintf(_templateObject12(),s)(e?"disabled":""),sprintf(_templateObject13(),s,s,s,s,s)(l,this.selectItemName,o?" checked=\"checked\"":"",e?" disabled=\"disabled\"":"",sprintf(_templateObject14(),s)(c)),sprintf(_templateObject15(),s)(m),"</label>","</li>"].join(""));return r.find("input").val(n),r}if(g.is("optgroup")){var t=this.options.labelTemplate(g),u=$("<div/>");return c="group_".concat(a),e=h.disabled,u.append(["<li class=\"group\">",sprintf(_templateObject16(),s,s)(e?"disabled":"",c),this.options.hideOptgroupCheckboxes||this.options.single?"":sprintf(_templateObject17(),s,s)(this.selectGroupName,e?"disabled=\"disabled\"":""),t,"</label>","</li>"].join("")),$.each(g.children(),function(a,b){u.append(f.optionToHtml(a,b,c,e))}),u.html()}}},{key:"events",value:function(){var a=this,b=function(b){b.preventDefault(),a[a.options.isOpen?"close":"open"]()};this.$label&&this.$label.off("click").on("click",function(c){"label"!==c.target.nodeName.toLowerCase()||c.target!==a||(b(c),(!a.options.filter||!a.options.isOpen)&&a.focus(),c.stopPropagation())}),this.$choice.off("click").on("click",b).off("focus").on("focus",this.options.onFocus).off("blur").on("blur",this.options.onBlur),this.$parent.off("keydown").on("keydown",function(b){27===b.which&&(a.close(),a.$choice.focus())}),this.$searchInput.off("keydown").on("keydown",function(b){9===b.keyCode&&b.shiftKey&&a.close()}).off("keyup").on("keyup",function(b){return a.options.filterAcceptOnEnter&&[13,32].includes(b.which)&&a.$searchInput.val()?(a.$selectAll.click(),a.close(),void a.focus()):void a.filter()}),this.$selectAll.off("click").on("click",function(b){var c=$(b.currentTarget).prop("checked"),d=a.$selectItems.filter(":visible");d.length===a.$selectItems.length?a[c?"checkAll":"uncheckAll"]():(a.$selectGroups.prop("checked",c),d.prop("checked",c),a.options[c?"onCheckAll":"onUncheckAll"](),a.update())}),this.$selectGroups.off("click").on("click",function(b){var c=$(b.currentTarget),d=c.parent()[0].getAttribute("data-group"),e=a.$selectItems.filter(":visible"),f=e.filter(sprintf(_templateObject18(),s)(d)),g=f.length!==f.filter(":checked").length;f.prop("checked",g),a.updateSelectAll(),a.update(),a.options.onOptgroupClick({label:c.parent().text(),checked:g,children:f.get().map(function(a){return{label:$(a).parent().text(),value:$(a).val(),check:$(a).prop("checked")}})})}),this.$selectItems.off("click").on("click",function(b){var c=$(b.currentTarget);if(a.options.single){var d=$(b.currentTarget).val();a.$selectItems.filter(function(a,b){return $(b).val()!==d}).each(function(a,b){$(b).prop("checked",!1)})}a.updateSelectAll(),a.update(),a.updateOptGroupSelect(),a.options.onClick({label:c.parent().text(),value:c.val(),checked:c.prop("checked")}),a.options.single&&a.options.isOpen&&!a.options.keepOpen&&a.close()})}},{key:"open",value:function(){if(!this.$choice.hasClass("disabled")){if(this.options.isOpen=!0,this.$choice.find(">div").addClass("open"),this.$drop[this.animateMethod("show")](),this.$selectAll.parent().show(),this.$noResults.hide(),this.$el.children().length||(this.$selectAll.parent().hide(),this.$noResults.show()),this.options.container){var a=this.$drop.offset();this.$drop.appendTo($(this.options.container)),this.$drop.offset({top:a.top,left:a.left}),this.$drop.outerWidth(this.$parent.outerWidth())}this.$el.children().length&&this.options.filter&&(this.$searchInput.val(""),this.$searchInput.focus(),this.filter()),this.options.onOpen()}}},{key:"close",value:function(){this.options.isOpen=!1,this.$choice.find(">div").removeClass("open"),this.$drop[this.animateMethod("hide")](),this.options.container&&(this.$parent.append(this.$drop),this.$drop.css({top:"auto",left:"auto"})),this.options.onClose()}},{key:"animateMethod",value:function(a){return{show:{fade:"fadeIn",slide:"slideDown"},hide:{fade:"fadeOut",slide:"slideUp"}}[a][this.options.animate]||a}},{key:"update",value:function(a){var b=this.getSelects(),c=this.options.displayValues?b:this.getSelects("text"),d=this.$choice.find(">span"),e=b.length;0===e?d.addClass("placeholder").html(this.options.placeholder):this.options.formatAllSelected()&&e===this.$selectItems.length+this.$disableItems.length?d.removeClass("placeholder").html(this.options.formatAllSelected()):this.options.ellipsis&&e>this.options.minimumCountSelected?d.removeClass("placeholder").text("".concat(c.slice(0,this.options.minimumCountSelected).join(this.options.displayDelimiter),"...")):this.options.formatCountSelected()&&e>this.options.minimumCountSelected?d.removeClass("placeholder").html(this.options.formatCountSelected(e,this.$selectItems.length+this.$disableItems.length)):d.removeClass("placeholder").text(c.join(this.options.displayDelimiter)),this.options.displayTitle&&d.prop("title",this.getSelects("text")),this.$el.val(this.getSelects()),this.$drop.find("li").removeClass("selected"),this.$drop.find("input:checked").each(function(a,b){$(b).parents("li").first().addClass("selected")}),a||this.$el.trigger("change")}},{key:"updateSelectAll",value:function(a){var b=this.$selectItems;a||(b=b.filter(":visible")),this.$selectAll.prop("checked",b.length&&b.length===b.filter(":checked").length),!a&&this.$selectAll.prop("checked")&&this.options.onCheckAll()}},{key:"updateOptGroupSelect",value:function(a){var b=this.$selectItems;a||(b=b.filter(":visible")),$.each(this.$selectGroups,function(a,c){var d=$(c).parent()[0].getAttribute("data-group"),e=b.filter(sprintf(_templateObject19(),s)(d));$(c).prop("checked",e.length&&e.length===e.filter(":checked").length)})}},{key:"getSelects",value:function(a){var b=this,c=[],d=[];return this.$drop.find(sprintf(_templateObject20(),s)(this.selectItemName)).each(function(a,b){c.push($(b).parents("li").first().text()),d.push($(b).val())}),"text"===a&&this.$selectGroups.length&&(c=[],this.$selectGroups.each(function(a,d){var e=[],f=$.trim($(d).parent().text()),g=$(d).parent().data("group"),h=b.$drop.find(sprintf(_templateObject21(),s,s)(b.selectItemName,g)),i=h.filter(":checked");if(i.length){if(e.push("["),e.push(f),h.length>i.length){var k=[];i.each(function(a,b){k.push($(b).parent().text())}),e.push(": ".concat(k.join(", ")))}e.push("]"),c.push(e.join(""))}})),"text"===a?c:d}},{key:"setSelects",value:function(a){var b=this;this.$selectItems.prop("checked",!1),this.$disableItems.prop("checked",!1),$.each(a,function(a,c){b.$selectItems.filter(sprintf(_templateObject22(),s)(c)).prop("checked",!0),b.$disableItems.filter(sprintf(_templateObject23(),s)(c)).prop("checked",!0)}),this.$selectAll.prop("checked",this.$selectItems.length===this.$selectItems.filter(":checked").length+this.$disableItems.filter(":checked").length),$.each(this.$selectGroups,function(a,c){var d=$(c).parent()[0].getAttribute("data-group"),e=b.$selectItems.filter("[data-group=\"".concat(d,"\"]"));$(c).prop("checked",e.length&&e.length===e.filter(":checked").length)}),this.update(!1)}},{key:"enable",value:function(){this.$choice.removeClass("disabled")}},{key:"disable",value:function(){this.$choice.addClass("disabled")}},{key:"checkAll",value:function(){this.$selectItems.prop("checked",!0),this.$selectGroups.prop("checked",!0),this.$selectAll.prop("checked",!0),this.update(),this.options.onCheckAll()}},{key:"uncheckAll",value:function(){this.$selectItems.prop("checked",!1),this.$selectGroups.prop("checked",!1),this.$selectAll.prop("checked",!1),this.update(),this.options.onUncheckAll()}},{key:"focus",value:function(){this.$choice.focus(),this.options.onFocus()}},{key:"blur",value:function(){this.$choice.blur(),this.options.onBlur()}},{key:"refresh",value:function(){this.init()}},{key:"filter",value:function(){var a=this,b=$.trim(this.$searchInput.val()).toLowerCase();0===b.length?(this.$selectAll.closest("li").show(),this.$selectItems.closest("li").show(),this.$disableItems.closest("li").show(),this.$selectGroups.closest("li").show(),this.$noResults.hide()):(!this.options.filterGroup&&this.$selectItems.each(function(a,c){var d=$(c).parent(),e=removeDiacritics(d.text().toLowerCase()).includes(removeDiacritics(b));d.closest("li")[e?"show":"hide"]()}),this.$disableItems.parent().hide(),this.$selectGroups.each(function(c,d){var e=$(d).parent(),f=e[0].getAttribute("data-group");if(a.options.filterGroup){var g=removeDiacritics(e.text().toLowerCase()).includes(removeDiacritics(b)),h=g?"show":"hide";e.closest("li")[h](),a.$selectItems.filter("[data-group=\"".concat(f,"\"]")).closest("li")[h]()}else{var i=a.$selectItems.filter(":visible"),j=i.filter(sprintf(_templateObject24(),s)(f)).length;e.closest("li")[j?"show":"hide"]()}}),this.$selectItems.parent().filter(":visible").length?(this.$selectAll.closest("li").show(),this.$noResults.hide()):(this.$selectAll.closest("li").hide(),this.$noResults.show())),this.updateOptGroupSelect(),this.updateSelectAll(),this.options.onFilter(b)}},{key:"destroy",value:function(){this.$el.before(this.$parent).show(),this.$parent.remove()}}]),a}(),defaults={name:"",placeholder:"",selectAll:!0,single:!1,multiple:!1,hideOptgroupCheckboxes:!1,multipleWidth:80,width:void 0,dropWidth:void 0,maxHeight:250,position:"bottom",displayValues:!1,displayTitle:!1,displayDelimiter:", ",minimumCountSelected:3,ellipsis:!1,isOpen:!1,keepOpen:!1,openOnHover:!1,container:null,filter:!1,filterGroup:!1,filterPlaceholder:"",filterAcceptOnEnter:!1,animate:void 0,styler:function(){return!1},textTemplate:function(a){return a[0].innerHTML},labelTemplate:function(a){return a[0].getAttribute("label")},formatSelectAll:function(){return"[Select all]"},formatAllSelected:function(){return"All selected"},formatCountSelected:function(a,b){return a+" of "+b+" selected"},formatNoMatchesFound:function(){return"No matches found"},onOpen:function(){return!1},onClose:function(){return!1},onCheckAll:function(){return!1},onUncheckAll:function(){return!1},onFocus:function(){return!1},onBlur:function(){return!1},onOptgroupClick:function(){return!1},onClick:function(){return!1},onFilter:function(){return!1},onAfterCreate:function(){return!1}};$.fn.multipleSelect=function(a){for(var b=arguments.length,c=Array(1<b?b-1:0),d=1;d<b;d++)c[d-1]=arguments[d];var e,f=["getSelects","setSelects","enable","disable","open","close","checkAll","uncheckAll","focus","blur","refresh","destroy"];return this.each(function(b,d){var g=$(d),h=g.data("multipleSelect"),i=$.extend({},g.data(),"object"===_typeof(a)&&a);if(h||(h=new MultipleSelect(g,i),g.data("multipleSelect",h)),"string"==typeof a){var j;if(0>$.inArray(a,f))throw new Error("Unknown method: ".concat(a));e=(j=h)[a].apply(j,c),"destroy"==a&&g.removeData("multipleSelect")}else h.init()}),"undefined"==typeof e?this:e};
diff --git a/src/dist/multiple-select.css b/src/dist/multiple-select.css
new file mode 100644
index 0000000..b57fcc4
--- /dev/null
+++ b/src/dist/multiple-select.css
@@ -0,0 +1,179 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ */
+.ms-parent {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.ms-choice {
+  display: block;
+  width: 100%;
+  height: 26px;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  border: 1px solid #aaa;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 26px;
+  color: #444;
+  text-decoration: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #fff;
+}
+.ms-choice.disabled {
+  background-color: #f4f4f4;
+  background-image: none;
+  border: 1px solid #ddd;
+  cursor: default;
+}
+.ms-choice > span {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  padding-left: 8px;
+}
+.ms-choice > span.placeholder {
+  color: #999;
+}
+.ms-choice > div {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 25px;
+  background: url("multiple-select.png") left top no-repeat;
+}
+.ms-choice > div.open {
+  background-position: right top;
+}
+
+.ms-drop {
+  width: 100%;
+  overflow: hidden;
+  display: none;
+  margin-top: -1px;
+  padding: 0;
+  position: absolute;
+  z-index: 1000;
+  background: #fff;
+  color: #000;
+  border: 1px solid #aaa;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.ms-drop.bottom {
+  top: 100%;
+  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+}
+.ms-drop.top {
+  bottom: 100%;
+  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15);
+}
+
+.ms-search {
+  display: inline-block;
+  margin: 0;
+  min-height: 26px;
+  padding: 4px;
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+  z-index: 10000;
+  -webkit-box-sizing: border-box;
+  -khtml-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ms-search input {
+  width: 100%;
+  height: auto !important;
+  min-height: 24px;
+  padding: 0 20px 0 5px;
+  margin: 0;
+  outline: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  border: 1px solid #aaa;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  background: #fff url("multiple-select.png") no-repeat 100% -22px;
+  background: url("multiple-select.png") no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background: url("multiple-select.png") no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background: url("multiple-select.png") no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background: url("multiple-select.png") no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background: url("multiple-select.png") no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
+  background: url("multiple-select.png") no-repeat 100% -22px, linear-gradient(to bottom, #ffffff 85%, #eeeeee 99%);
+  -webkit-box-sizing: border-box;
+  -khtml-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.ms-drop ul {
+  overflow: auto;
+  margin: 0;
+  padding: 5px 8px;
+}
+.ms-drop ul > li {
+  list-style: none;
+  display: list-item;
+  background-image: none;
+  position: static;
+}
+.ms-drop ul > li .disabled {
+  opacity: 0.35;
+  filter: Alpha(Opacity=35);
+}
+.ms-drop ul > li.multiple {
+  display: block;
+  float: left;
+}
+.ms-drop ul > li.group {
+  clear: both;
+}
+.ms-drop ul > li.multiple label {
+  width: 100%;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ms-drop ul > li label {
+  font-weight: normal;
+  display: block;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ms-drop ul > li label.optgroup {
+  font-weight: bold;
+}
+.ms-drop input[type=radio], .ms-drop input[type=checkbox] {
+  vertical-align: middle;
+  margin: 5px;
+}
+.ms-drop .ms-no-results {
+  display: none;
+}
+
+/*# sourceMappingURL=multiple-select.css.map */
diff --git a/src/dist/multiple-select.js b/src/dist/multiple-select.js
new file mode 100644
index 0000000..5f71867
--- /dev/null
+++ b/src/dist/multiple-select.js
@@ -0,0 +1,1416 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('core-js/modules/es.array.filter'), require('core-js/modules/es.array.find'), require('core-js/modules/es.array.includes'), require('core-js/modules/es.array.join'), require('core-js/modules/es.array.map'), require('core-js/modules/es.array.slice'), require('core-js/modules/es.function.name'), require('core-js/modules/es.string.includes'), require('core-js/modules/es.string.trim'), require('core-js/modules/es.string.replace')) :
+  typeof define === 'function' && define.amd ? define(['jquery', 'core-js/modules/es.array.filter', 'core-js/modules/es.array.find', 'core-js/modules/es.array.includes', 'core-js/modules/es.array.join', 'core-js/modules/es.array.map', 'core-js/modules/es.array.slice', 'core-js/modules/es.function.name', 'core-js/modules/es.string.includes', 'core-js/modules/es.string.trim', 'core-js/modules/es.string.replace'], factory) :
+  (global = global || self, factory(global.jQuery));
+}(this, function ($) { 'use strict';
+
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+
+  function _typeof(obj) {
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
+
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function createCommonjsModule(fn, module) {
+  	return module = { exports: {} }, fn(module, module.exports), module.exports;
+  }
+
+  var css_escape = createCommonjsModule(function (module, exports) {
+  (function(root, factory) {
+  	// https://github.com/umdjs/umd/blob/master/returnExports.js
+  	{
+  		// For Node.js.
+  		module.exports = factory(root);
+  	}
+  }(typeof commonjsGlobal != 'undefined' ? commonjsGlobal : commonjsGlobal, function(root) {
+
+  	if (root.CSS && root.CSS.escape) {
+  		return root.CSS.escape;
+  	}
+
+  	// https://drafts.csswg.org/cssom/#serialize-an-identifier
+  	var cssEscape = function(value) {
+  		if (arguments.length == 0) {
+  			throw new TypeError('`CSS.escape` requires an argument.');
+  		}
+  		var string = String(value);
+  		var length = string.length;
+  		var index = -1;
+  		var codeUnit;
+  		var result = '';
+  		var firstCodeUnit = string.charCodeAt(0);
+  		while (++index < length) {
+  			codeUnit = string.charCodeAt(index);
+  			// Note: there’s no need to special-case astral symbols, surrogate
+  			// pairs, or lone surrogates.
+
+  			// If the character is NULL (U+0000), then the REPLACEMENT CHARACTER
+  			// (U+FFFD).
+  			if (codeUnit == 0x0000) {
+  				result += '\uFFFD';
+  				continue;
+  			}
+
+  			if (
+  				// If the character is in the range [\1-\1F] (U+0001 to U+001F) or is
+  				// U+007F, […]
+  				(codeUnit >= 0x0001 && codeUnit <= 0x001F) || codeUnit == 0x007F ||
+  				// If the character is the first character and is in the range [0-9]
+  				// (U+0030 to U+0039), […]
+  				(index == 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+  				// If the character is the second character and is in the range [0-9]
+  				// (U+0030 to U+0039) and the first character is a `-` (U+002D), […]
+  				(
+  					index == 1 &&
+  					codeUnit >= 0x0030 && codeUnit <= 0x0039 &&
+  					firstCodeUnit == 0x002D
+  				)
+  			) {
+  				// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+  				result += '\\' + codeUnit.toString(16) + ' ';
+  				continue;
+  			}
+
+  			if (
+  				// If the character is the first character and is a `-` (U+002D), and
+  				// there is no second character, […]
+  				index == 0 &&
+  				length == 1 &&
+  				codeUnit == 0x002D
+  			) {
+  				result += '\\' + string.charAt(index);
+  				continue;
+  			}
+
+  			// If the character is not handled by one of the above rules and is
+  			// greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+  			// is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to
+  			// U+005A), or [a-z] (U+0061 to U+007A), […]
+  			if (
+  				codeUnit >= 0x0080 ||
+  				codeUnit == 0x002D ||
+  				codeUnit == 0x005F ||
+  				codeUnit >= 0x0030 && codeUnit <= 0x0039 ||
+  				codeUnit >= 0x0041 && codeUnit <= 0x005A ||
+  				codeUnit >= 0x0061 && codeUnit <= 0x007A
+  			) {
+  				// the character itself
+  				result += string.charAt(index);
+  				continue;
+  			}
+
+  			// Otherwise, the escaped character.
+  			// https://drafts.csswg.org/cssom/#escape-a-character
+  			result += '\\' + string.charAt(index);
+
+  		}
+  		return result;
+  	};
+
+  	if (!root.CSS) {
+  		root.CSS = {};
+  	}
+
+  	root.CSS.escape = cssEscape;
+  	return cssEscape;
+
+  }));
+  });
+
+  /**
+   * Strips diacritics.
+   * @param {string} str
+   * @returns {string}
+   */
+  function removeDiacritics(str) {
+    // A polyfill for `normalize` will be even larger than our code below, so
+    //   not practical to embed
+    if (str.normalize) {
+      return str.normalize('NFD').replace(/[\u0300-\u036F]/g, '');
+    }
+
+    var defaultDiacriticsRemovalMap = [{
+      'base': 'A',
+      'letters': /[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g
+    }, {
+      'base': 'AA',
+      'letters': /[\uA732]/g
+    }, {
+      'base': 'AE',
+      'letters': /[\u00C6\u01FC\u01E2]/g
+    }, {
+      'base': 'AO',
+      'letters': /[\uA734]/g
+    }, {
+      'base': 'AU',
+      'letters': /[\uA736]/g
+    }, {
+      'base': 'AV',
+      'letters': /[\uA738\uA73A]/g
+    }, {
+      'base': 'AY',
+      'letters': /[\uA73C]/g
+    }, {
+      'base': 'B',
+      'letters': /[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g
+    }, {
+      'base': 'C',
+      'letters': /[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g
+    }, {
+      'base': 'D',
+      'letters': /[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g
+    }, {
+      'base': 'DZ',
+      'letters': /[\u01F1\u01C4]/g
+    }, {
+      'base': 'Dz',
+      'letters': /[\u01F2\u01C5]/g
+    }, {
+      'base': 'E',
+      'letters': /[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g
+    }, {
+      'base': 'F',
+      'letters': /[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g
+    }, {
+      'base': 'G',
+      'letters': /[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g
+    }, {
+      'base': 'H',
+      'letters': /[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g
+    }, {
+      'base': 'I',
+      'letters': /[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g
+    }, {
+      'base': 'J',
+      'letters': /[\u004A\u24BF\uFF2A\u0134\u0248]/g
+    }, {
+      'base': 'K',
+      'letters': /[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g
+    }, {
+      'base': 'L',
+      'letters': /[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g
+    }, {
+      'base': 'LJ',
+      'letters': /[\u01C7]/g
+    }, {
+      'base': 'Lj',
+      'letters': /[\u01C8]/g
+    }, {
+      'base': 'M',
+      'letters': /[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g
+    }, {
+      'base': 'N',
+      'letters': /[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g
+    }, {
+      'base': 'NJ',
+      'letters': /[\u01CA]/g
+    }, {
+      'base': 'Nj',
+      'letters': /[\u01CB]/g
+    }, {
+      'base': 'O',
+      'letters': /[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g
+    }, {
+      'base': 'OI',
+      'letters': /[\u01A2]/g
+    }, {
+      'base': 'OO',
+      'letters': /[\uA74E]/g
+    }, {
+      'base': 'OU',
+      'letters': /[\u0222]/g
+    }, {
+      'base': 'P',
+      'letters': /[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g
+    }, {
+      'base': 'Q',
+      'letters': /[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g
+    }, {
+      'base': 'R',
+      'letters': /[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g
+    }, {
+      'base': 'S',
+      'letters': /[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g
+    }, {
+      'base': 'T',
+      'letters': /[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g
+    }, {
+      'base': 'TZ',
+      'letters': /[\uA728]/g
+    }, {
+      'base': 'U',
+      'letters': /[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g
+    }, {
+      'base': 'V',
+      'letters': /[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g
+    }, {
+      'base': 'VY',
+      'letters': /[\uA760]/g
+    }, {
+      'base': 'W',
+      'letters': /[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g
+    }, {
+      'base': 'X',
+      'letters': /[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g
+    }, {
+      'base': 'Y',
+      'letters': /[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g
+    }, {
+      'base': 'Z',
+      'letters': /[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g
+    }, {
+      'base': 'a',
+      'letters': /[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g
+    }, {
+      'base': 'aa',
+      'letters': /[\uA733]/g
+    }, {
+      'base': 'ae',
+      'letters': /[\u00E6\u01FD\u01E3]/g
+    }, {
+      'base': 'ao',
+      'letters': /[\uA735]/g
+    }, {
+      'base': 'au',
+      'letters': /[\uA737]/g
+    }, {
+      'base': 'av',
+      'letters': /[\uA739\uA73B]/g
+    }, {
+      'base': 'ay',
+      'letters': /[\uA73D]/g
+    }, {
+      'base': 'b',
+      'letters': /[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g
+    }, {
+      'base': 'c',
+      'letters': /[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g
+    }, {
+      'base': 'd',
+      'letters': /[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g
+    }, {
+      'base': 'dz',
+      'letters': /[\u01F3\u01C6]/g
+    }, {
+      'base': 'e',
+      'letters': /[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g
+    }, {
+      'base': 'f',
+      'letters': /[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g
+    }, {
+      'base': 'g',
+      'letters': /[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g
+    }, {
+      'base': 'h',
+      'letters': /[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g
+    }, {
+      'base': 'hv',
+      'letters': /[\u0195]/g
+    }, {
+      'base': 'i',
+      'letters': /[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g
+    }, {
+      'base': 'j',
+      'letters': /[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g
+    }, {
+      'base': 'k',
+      'letters': /[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g
+    }, {
+      'base': 'l',
+      'letters': /[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g
+    }, {
+      'base': 'lj',
+      'letters': /[\u01C9]/g
+    }, {
+      'base': 'm',
+      'letters': /[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g
+    }, {
+      'base': 'n',
+      'letters': /[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g
+    }, {
+      'base': 'nj',
+      'letters': /[\u01CC]/g
+    }, {
+      'base': 'o',
+      'letters': /[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g
+    }, {
+      'base': 'oi',
+      'letters': /[\u01A3]/g
+    }, {
+      'base': 'ou',
+      'letters': /[\u0223]/g
+    }, {
+      'base': 'oo',
+      'letters': /[\uA74F]/g
+    }, {
+      'base': 'p',
+      'letters': /[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g
+    }, {
+      'base': 'q',
+      'letters': /[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g
+    }, {
+      'base': 'r',
+      'letters': /[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g
+    }, {
+      'base': 's',
+      'letters': /[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g
+    }, {
+      'base': 't',
+      'letters': /[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g
+    }, {
+      'base': 'tz',
+      'letters': /[\uA729]/g
+    }, {
+      'base': 'u',
+      'letters': /[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g
+    }, {
+      'base': 'v',
+      'letters': /[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g
+    }, {
+      'base': 'vy',
+      'letters': /[\uA761]/g
+    }, {
+      'base': 'w',
+      'letters': /[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g
+    }, {
+      'base': 'x',
+      'letters': /[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g
+    }, {
+      'base': 'y',
+      'letters': /[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g
+    }, {
+      'base': 'z',
+      'letters': /[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g
+    }];
+    return defaultDiacriticsRemovalMap.reduce(function (s, _ref) {
+      var letters = _ref.letters,
+          base = _ref.base;
+      return s.replace(letters, base);
+    }, str);
+  }
+
+  // sprintf format specifiers
+  var s = 's'; // it only does '%s', and return '' when arguments are undefined
+
+  var sprintf = function sprintf(strings) {
+    for (var _len = arguments.length, formats = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      formats[_key - 1] = arguments[_key];
+    }
+
+    return function () {
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+
+      var retStr = '';
+      return strings.slice(0, -1).some(function (str, i) {
+        switch (formats[i]) {
+          default:
+            throw new TypeError('Unrecognized sprintf format');
+
+          case 's':
+            {
+              var arg = args[i];
+
+              if (arg === null || arg === undefined) {
+                return true;
+              }
+
+              retStr += str + arg;
+              return false;
+            }
+        }
+      }) ? '' : retStr + strings.slice(-1);
+    };
+  };
+
+  function _templateObject24() {
+    var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+    _templateObject24 = function _templateObject24() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject23() {
+    var data = _taggedTemplateLiteral(["[value=\"", "\"]"]);
+
+    _templateObject23 = function _templateObject23() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject22() {
+    var data = _taggedTemplateLiteral(["[value=\"", "\"]"]);
+
+    _templateObject22 = function _templateObject22() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject21() {
+    var data = _taggedTemplateLiteral(["[", "][data-group=\"", "\"]"]);
+
+    _templateObject21 = function _templateObject21() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject20() {
+    var data = _taggedTemplateLiteral(["input[", "]:checked"]);
+
+    _templateObject20 = function _templateObject20() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject19() {
+    var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+    _templateObject19 = function _templateObject19() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject18() {
+    var data = _taggedTemplateLiteral(["[data-group=\"", "\"]"]);
+
+    _templateObject18 = function _templateObject18() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject17() {
+    var data = _taggedTemplateLiteral(["<input type=\"checkbox\" ", " ", ">"]);
+
+    _templateObject17 = function _templateObject17() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject16() {
+    var data = _taggedTemplateLiteral(["<label class=\"optgroup ", "\" data-group=\"", "\">"]);
+
+    _templateObject16 = function _templateObject16() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject15() {
+    var data = _taggedTemplateLiteral(["<span>", "</span>"]);
+
+    _templateObject15 = function _templateObject15() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject14() {
+    var data = _taggedTemplateLiteral([" data-group=\"", "\""]);
+
+    _templateObject14 = function _templateObject14() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject13() {
+    var data = _taggedTemplateLiteral(["<input type=\"", "\" ", "", "", "", ">"]);
+
+    _templateObject13 = function _templateObject13() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject12() {
+    var data = _taggedTemplateLiteral(["<label class=\"", "\">"]);
+
+    _templateObject12 = function _templateObject12() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject11() {
+    var data = _taggedTemplateLiteral(["<li class=\"", " ", "\" ", " ", ">"]);
+
+    _templateObject11 = function _templateObject11() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject10() {
+    var data = _taggedTemplateLiteral(["style=\"", "\""]);
+
+    _templateObject10 = function _templateObject10() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject9() {
+    var data = _taggedTemplateLiteral(["title=\"", "\""]);
+
+    _templateObject9 = function _templateObject9() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject8() {
+    var data = _taggedTemplateLiteral(["<li class=\"ms-no-results\">", "</li>"]);
+
+    _templateObject8 = function _templateObject8() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject7() {
+    var data = _taggedTemplateLiteral(["<input type=\"checkbox\" ", " />"]);
+
+    _templateObject7 = function _templateObject7() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject6() {
+    var data = _taggedTemplateLiteral(["placeholder=\"", "\""]);
+
+    _templateObject6 = function _templateObject6() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject5() {
+    var data = _taggedTemplateLiteral(["<div class=\"ms-drop ", "\"></div>"]);
+
+    _templateObject5 = function _templateObject5() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject4() {
+    var data = _taggedTemplateLiteral(["\n      <button type=\"button\" class=\"ms-choice\">\n      <span class=\"placeholder\">", "</span>\n      <div></div>\n      </button>\n    "]);
+
+    _templateObject4 = function _templateObject4() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject3() {
+    var data = _taggedTemplateLiteral(["title=\"", "\""]);
+
+    _templateObject3 = function _templateObject3() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["<div class=\"ms-parent ", "\" ", "/>"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["label[for=\"", "\"]"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+
+  var MultipleSelect =
+  /*#__PURE__*/
+  function () {
+    function MultipleSelect($el, options) {
+      var _this = this;
+
+      _classCallCheck(this, MultipleSelect);
+
+      var el = $el[0];
+      var name = el.getAttribute('name') || options.name || '';
+      this.options = $.extend({}, defaults, options); // hide select element
+
+      this.$el = $el.hide(); // label element
+
+      this.$label = this.$el.closest('label');
+
+      if (this.$label.length === 0 && el.getAttribute('id')) {
+        this.$label = $(sprintf(_templateObject(), s)(css_escape(el.getAttribute('id'))));
+      } // restore class and title from select element
+
+
+      this.$parent = $(sprintf(_templateObject2(), s, s)(el.getAttribute('class') || '', sprintf(_templateObject3(), s)(el.getAttribute('title')))); // add placeholder to choice button
+
+      this.options.placeholder = this.options.placeholder || el.getAttribute('placeholder') || '';
+      this.$choice = $(sprintf(_templateObject4(), s)(this.options.placeholder)); // default position is bottom
+
+      this.$drop = $(sprintf(_templateObject5(), s)(this.options.position));
+
+      if (this.options.dropWidth) {
+        this.$drop.css('width', this.options.dropWidth);
+      }
+
+      this.$el.after(this.$parent);
+      this.$parent.append(this.$choice);
+      this.$parent.append(this.$drop);
+
+      if (el.disabled) {
+        this.$choice.addClass('disabled');
+      }
+
+      this.$parent.css('width', this.options.width || this.$el.css('width') || this.$el.outerWidth() + 20);
+      this.selectAllName = "data-name=\"selectAll".concat(name, "\"");
+      this.selectGroupName = "data-name=\"selectGroup".concat(name, "\"");
+      this.selectItemName = "data-name=\"selectItem".concat(name, "\"");
+
+      if (!this.options.keepOpen) {
+        $(document).click(function (e) {
+          if ($(e.target)[0] === _this.$choice[0] || $(e.target).parents('.ms-choice')[0] === _this.$choice[0]) {
+            return;
+          }
+
+          if (($(e.target)[0] === _this.$drop[0] || $(e.target).parents('.ms-drop')[0] !== _this.$drop[0] && e.target !== el) && _this.options.isOpen) {
+            _this.close();
+          }
+        });
+      }
+
+      this.options.onAfterCreate();
+    }
+
+    _createClass(MultipleSelect, [{
+      key: "init",
+      value: function init() {
+        var _this2 = this;
+
+        var $ul = $('<ul></ul>');
+        this.$drop.html('');
+
+        if (this.options.filter) {
+          this.$drop.append("\n        <div class=\"ms-search\">\n          <input type=\"text\" autocomplete=\"off\" autocorrect=\"off\"\n            autocapitalize=\"off\" spellcheck=\"false\"\n            ".concat(sprintf(_templateObject6(), s)(this.options.filterPlaceholder), ">\n        </div>\n      "));
+        }
+
+        if (this.options.selectAll && !this.options.single) {
+          $ul.append(['<li class="ms-select-all">', '<label>', sprintf(_templateObject7(), s)(this.selectAllName), "<span>".concat(this.options.formatSelectAll(), "</span>"), '</label>', '</li>'].join(''));
+        }
+
+        $.each(this.$el.children(), function (i, elm) {
+          $ul.append(_this2.optionToHtml(i, elm));
+        });
+        $ul.append(sprintf(_templateObject8(), s)(this.options.formatNoMatchesFound()));
+        this.$drop.append($ul);
+        this.$drop.find('ul').css('max-height', "".concat(this.options.maxHeight, "px"));
+        this.$drop.find('.multiple').css('width', "".concat(this.options.multipleWidth, "px"));
+        this.$searchInput = this.$drop.find('.ms-search input');
+        this.$selectAll = this.$drop.find("input[".concat(this.selectAllName, "]"));
+        this.$selectGroups = this.$drop.find("input[".concat(this.selectGroupName, "]"));
+        this.$selectItems = this.$drop.find("input[".concat(this.selectItemName, "]:enabled"));
+        this.$disableItems = this.$drop.find("input[".concat(this.selectItemName, "]:disabled"));
+        this.$noResults = this.$drop.find('.ms-no-results');
+        this.events();
+        this.updateSelectAll(true);
+        this.update(true);
+        this.updateOptGroupSelect(true);
+
+        if (this.options.isOpen) {
+          this.open();
+        }
+
+        if (this.options.openOnHover) {
+          this.$parent.hover(function () {
+            _this2.open();
+          }, function () {
+            _this2.close();
+          });
+        }
+      }
+    }, {
+      key: "optionToHtml",
+      value: function optionToHtml(i, elm, group, groupDisabled) {
+        var _this3 = this;
+
+        var $elm = $(elm);
+        var el = $elm[0];
+        var classes = el.getAttribute('class') || '';
+        var title = sprintf(_templateObject9(), s)(el.getAttribute('title'));
+        var multiple = this.options.multiple ? 'multiple' : '';
+        var disabled;
+        var type = this.options.single ? 'radio' : 'checkbox';
+
+        if ($elm.is('option')) {
+          var text = this.options.textTemplate($elm);
+          var value = el.value,
+              selected = el.selected;
+          var customStyle = this.options.styler(value);
+          var style = customStyle ? sprintf(_templateObject10(), s)(customStyle) : '';
+          disabled = groupDisabled || el.disabled;
+          var $el = $([sprintf(_templateObject11(), s, s, s, s)(multiple, classes, title, style), sprintf(_templateObject12(), s)(disabled ? 'disabled' : ''), sprintf(_templateObject13(), s, s, s, s, s)(type, this.selectItemName, selected ? ' checked="checked"' : '', disabled ? ' disabled="disabled"' : '', sprintf(_templateObject14(), s)(group)), sprintf(_templateObject15(), s)(text), '</label>', '</li>'].join(''));
+          $el.find('input').val(value);
+          return $el;
+        }
+
+        if ($elm.is('optgroup')) {
+          var label = this.options.labelTemplate($elm);
+          var $group = $('<div/>');
+          group = "group_".concat(i);
+          disabled = el.disabled;
+          $group.append(['<li class="group">', sprintf(_templateObject16(), s, s)(disabled ? 'disabled' : '', group), this.options.hideOptgroupCheckboxes || this.options.single ? '' : sprintf(_templateObject17(), s, s)(this.selectGroupName, disabled ? 'disabled="disabled"' : ''), label, '</label>', '</li>'].join(''));
+          $.each($elm.children(), function (j, elem) {
+            $group.append(_this3.optionToHtml(j, elem, group, disabled));
+          });
+          return $group.html();
+        } // Append nothing
+
+
+        return undefined;
+      }
+    }, {
+      key: "events",
+      value: function events() {
+        var _this4 = this;
+
+        var toggleOpen = function toggleOpen(e) {
+          e.preventDefault();
+
+          _this4[_this4.options.isOpen ? 'close' : 'open']();
+        };
+
+        if (this.$label) {
+          this.$label.off('click').on('click', function (e) {
+            if (e.target.nodeName.toLowerCase() !== 'label' || e.target !== _this4) {
+              return;
+            }
+
+            toggleOpen(e);
+
+            if (!_this4.options.filter || !_this4.options.isOpen) {
+              _this4.focus();
+            }
+
+            e.stopPropagation(); // Causes lost focus otherwise
+          });
+        }
+
+        this.$choice.off('click').on('click', toggleOpen).off('focus').on('focus', this.options.onFocus).off('blur').on('blur', this.options.onBlur);
+        this.$parent.off('keydown').on('keydown', function (e) {
+          // esc key
+          if (e.which === 27) {
+            _this4.close();
+
+            _this4.$choice.focus();
+          }
+        });
+        this.$searchInput.off('keydown').on('keydown', function (e) {
+          // Ensure shift-tab causes lost focus from filter as with clicking away
+          if (e.keyCode === 9 && e.shiftKey) {
+            _this4.close();
+          }
+        }).off('keyup').on('keyup', function (e) {
+          // enter or space
+          // Avoid selecting/deselecting if no choices made
+          if (_this4.options.filterAcceptOnEnter && [13, 32].includes(e.which) && _this4.$searchInput.val()) {
+            _this4.$selectAll.click();
+
+            _this4.close();
+
+            _this4.focus();
+
+            return;
+          }
+
+          _this4.filter();
+        });
+        this.$selectAll.off('click').on('click', function (e) {
+          var checked = $(e.currentTarget).prop('checked');
+
+          var $items = _this4.$selectItems.filter(':visible');
+
+          if ($items.length === _this4.$selectItems.length) {
+            _this4[checked ? 'checkAll' : 'uncheckAll']();
+          } else {
+            // when the filter option is true
+            _this4.$selectGroups.prop('checked', checked);
+
+            $items.prop('checked', checked);
+
+            _this4.options[checked ? 'onCheckAll' : 'onUncheckAll']();
+
+            _this4.update();
+          }
+        });
+        this.$selectGroups.off('click').on('click', function (e) {
+          var $this = $(e.currentTarget);
+          var group = $this.parent()[0].getAttribute('data-group');
+
+          var $items = _this4.$selectItems.filter(':visible');
+
+          var $children = $items.filter(sprintf(_templateObject18(), s)(group));
+          var checked = $children.length !== $children.filter(':checked').length;
+          $children.prop('checked', checked);
+
+          _this4.updateSelectAll();
+
+          _this4.update();
+
+          _this4.options.onOptgroupClick({
+            label: $this.parent().text(),
+            checked: checked,
+            children: $children.get().map(function (el) {
+              return {
+                label: $(el).parent().text(),
+                value: $(el).val(),
+                check: $(el).prop('checked')
+              };
+            })
+          });
+        });
+        this.$selectItems.off('click').on('click', function (e) {
+          var $this = $(e.currentTarget);
+
+          if (_this4.options.single) {
+            var clickedVal = $(e.currentTarget).val();
+
+            _this4.$selectItems.filter(function (i, el) {
+              return $(el).val() !== clickedVal;
+            }).each(function (i, el) {
+              $(el).prop('checked', false);
+            });
+          }
+
+          _this4.updateSelectAll();
+
+          _this4.update();
+
+          _this4.updateOptGroupSelect();
+
+          _this4.options.onClick({
+            label: $this.parent().text(),
+            value: $this.val(),
+            checked: $this.prop('checked')
+          });
+
+          if (_this4.options.single && _this4.options.isOpen && !_this4.options.keepOpen) {
+            _this4.close();
+          }
+        });
+      }
+    }, {
+      key: "open",
+      value: function open() {
+        if (this.$choice.hasClass('disabled')) {
+          return;
+        }
+
+        this.options.isOpen = true;
+        this.$choice.find('>div').addClass('open');
+        this.$drop[this.animateMethod('show')](); // fix filter bug: no results show
+
+        this.$selectAll.parent().show();
+        this.$noResults.hide(); // Fix #77: 'All selected' when no options
+
+        if (!this.$el.children().length) {
+          this.$selectAll.parent().hide();
+          this.$noResults.show();
+        }
+
+        if (this.options.container) {
+          var offset = this.$drop.offset();
+          this.$drop.appendTo($(this.options.container));
+          this.$drop.offset({
+            top: offset.top,
+            left: offset.left
+          });
+          this.$drop.outerWidth(this.$parent.outerWidth());
+        }
+
+        if (this.$el.children().length && this.options.filter) {
+          this.$searchInput.val('');
+          this.$searchInput.focus();
+          this.filter();
+        }
+
+        this.options.onOpen();
+      }
+    }, {
+      key: "close",
+      value: function close() {
+        this.options.isOpen = false;
+        this.$choice.find('>div').removeClass('open');
+        this.$drop[this.animateMethod('hide')]();
+
+        if (this.options.container) {
+          this.$parent.append(this.$drop);
+          this.$drop.css({
+            'top': 'auto',
+            'left': 'auto'
+          });
+        }
+
+        this.options.onClose();
+      }
+    }, {
+      key: "animateMethod",
+      value: function animateMethod(method) {
+        var methods = {
+          show: {
+            fade: 'fadeIn',
+            slide: 'slideDown'
+          },
+          hide: {
+            fade: 'fadeOut',
+            slide: 'slideUp'
+          }
+        };
+        return methods[method][this.options.animate] || method;
+      }
+    }, {
+      key: "update",
+      value: function update(ignoreTrigger) {
+        var valueSelects = this.getSelects();
+        var textSelects = this.options.displayValues ? valueSelects : this.getSelects('text');
+        var $span = this.$choice.find('>span');
+        var sl = valueSelects.length;
+
+        if (sl === 0) {
+          $span.addClass('placeholder').html(this.options.placeholder);
+        } else if (this.options.formatAllSelected() && sl === this.$selectItems.length + this.$disableItems.length) {
+          $span.removeClass('placeholder').html(this.options.formatAllSelected());
+        } else if (this.options.ellipsis && sl > this.options.minimumCountSelected) {
+          $span.removeClass('placeholder').text("".concat(textSelects.slice(0, this.options.minimumCountSelected).join(this.options.displayDelimiter), "..."));
+        } else if (this.options.formatCountSelected() && sl > this.options.minimumCountSelected) {
+          $span.removeClass('placeholder').html(this.options.formatCountSelected(sl, this.$selectItems.length + this.$disableItems.length));
+        } else {
+          $span.removeClass('placeholder').text(textSelects.join(this.options.displayDelimiter));
+        }
+
+        if (this.options.displayTitle) {
+          $span.prop('title', this.getSelects('text'));
+        } // set selects to select
+
+
+        this.$el.val(this.getSelects()); // add selected class to selected li
+
+        this.$drop.find('li').removeClass('selected');
+        this.$drop.find('input:checked').each(function (i, el) {
+          $(el).parents('li').first().addClass('selected');
+        }); // trigger <select> change event
+
+        if (!ignoreTrigger) {
+          this.$el.trigger('change');
+        }
+      }
+    }, {
+      key: "updateSelectAll",
+      value: function updateSelectAll(isInit) {
+        var $items = this.$selectItems;
+
+        if (!isInit) {
+          $items = $items.filter(':visible');
+        }
+
+        this.$selectAll.prop('checked', $items.length && $items.length === $items.filter(':checked').length);
+
+        if (!isInit && this.$selectAll.prop('checked')) {
+          this.options.onCheckAll();
+        }
+      }
+    }, {
+      key: "updateOptGroupSelect",
+      value: function updateOptGroupSelect(isInit) {
+        var $items = this.$selectItems;
+
+        if (!isInit) {
+          $items = $items.filter(':visible');
+        }
+
+        $.each(this.$selectGroups, function (i, val) {
+          var group = $(val).parent()[0].getAttribute('data-group');
+          var $children = $items.filter(sprintf(_templateObject19(), s)(group));
+          $(val).prop('checked', $children.length && $children.length === $children.filter(':checked').length);
+        });
+      } // value or text, default: 'value'
+
+    }, {
+      key: "getSelects",
+      value: function getSelects(type) {
+        var _this5 = this;
+
+        var texts = [];
+        var values = [];
+        this.$drop.find(sprintf(_templateObject20(), s)(this.selectItemName)).each(function (i, el) {
+          texts.push($(el).parents('li').first().text());
+          values.push($(el).val());
+        });
+
+        if (type === 'text' && this.$selectGroups.length) {
+          texts = [];
+          this.$selectGroups.each(function (i, el) {
+            var html = [];
+            var text = $.trim($(el).parent().text());
+            var group = $(el).parent().data('group');
+
+            var $children = _this5.$drop.find(sprintf(_templateObject21(), s, s)(_this5.selectItemName, group));
+
+            var $selected = $children.filter(':checked');
+
+            if (!$selected.length) {
+              return;
+            }
+
+            html.push('[');
+            html.push(text);
+
+            if ($children.length > $selected.length) {
+              var list = [];
+              $selected.each(function (j, elem) {
+                list.push($(elem).parent().text());
+              });
+              html.push(": ".concat(list.join(', ')));
+            }
+
+            html.push(']');
+            texts.push(html.join(''));
+          });
+        }
+
+        return type === 'text' ? texts : values;
+      }
+    }, {
+      key: "setSelects",
+      value: function setSelects(values) {
+        var _this6 = this;
+
+        this.$selectItems.prop('checked', false);
+        this.$disableItems.prop('checked', false);
+        $.each(values, function (i, value) {
+          _this6.$selectItems.filter(sprintf(_templateObject22(), s)(value)).prop('checked', true);
+
+          _this6.$disableItems.filter(sprintf(_templateObject23(), s)(value)).prop('checked', true);
+        });
+        this.$selectAll.prop('checked', this.$selectItems.length === this.$selectItems.filter(':checked').length + this.$disableItems.filter(':checked').length);
+        $.each(this.$selectGroups, function (i, val) {
+          var group = $(val).parent()[0].getAttribute('data-group');
+
+          var $children = _this6.$selectItems.filter("[data-group=\"".concat(group, "\"]"));
+
+          $(val).prop('checked', $children.length && $children.length === $children.filter(':checked').length);
+        });
+        this.update(false);
+      }
+    }, {
+      key: "enable",
+      value: function enable() {
+        this.$choice.removeClass('disabled');
+      }
+    }, {
+      key: "disable",
+      value: function disable() {
+        this.$choice.addClass('disabled');
+      }
+    }, {
+      key: "checkAll",
+      value: function checkAll() {
+        this.$selectItems.prop('checked', true);
+        this.$selectGroups.prop('checked', true);
+        this.$selectAll.prop('checked', true);
+        this.update();
+        this.options.onCheckAll();
+      }
+    }, {
+      key: "uncheckAll",
+      value: function uncheckAll() {
+        this.$selectItems.prop('checked', false);
+        this.$selectGroups.prop('checked', false);
+        this.$selectAll.prop('checked', false);
+        this.update();
+        this.options.onUncheckAll();
+      }
+    }, {
+      key: "focus",
+      value: function focus() {
+        this.$choice.focus();
+        this.options.onFocus();
+      }
+    }, {
+      key: "blur",
+      value: function blur() {
+        this.$choice.blur();
+        this.options.onBlur();
+      }
+    }, {
+      key: "refresh",
+      value: function refresh() {
+        this.init();
+      }
+    }, {
+      key: "filter",
+      value: function filter() {
+        var _this7 = this;
+
+        var text = $.trim(this.$searchInput.val()).toLowerCase();
+
+        if (text.length === 0) {
+          this.$selectAll.closest('li').show();
+          this.$selectItems.closest('li').show();
+          this.$disableItems.closest('li').show();
+          this.$selectGroups.closest('li').show();
+          this.$noResults.hide();
+        } else {
+          if (!this.options.filterGroup) {
+            this.$selectItems.each(function (i, el) {
+              var $parent = $(el).parent();
+              var hasText = removeDiacritics($parent.text().toLowerCase()).includes(removeDiacritics(text));
+              $parent.closest('li')[hasText ? 'show' : 'hide']();
+            });
+          }
+
+          this.$disableItems.parent().hide();
+          this.$selectGroups.each(function (i, el) {
+            var $parent = $(el).parent();
+            var group = $parent[0].getAttribute('data-group');
+
+            if (_this7.options.filterGroup) {
+              var hasText = removeDiacritics($parent.text().toLowerCase()).includes(removeDiacritics(text));
+              var func = hasText ? 'show' : 'hide';
+              $parent.closest('li')[func]();
+
+              _this7.$selectItems.filter("[data-group=\"".concat(group, "\"]")).closest('li')[func]();
+            } else {
+              var $items = _this7.$selectItems.filter(':visible');
+
+              var _hasText = $items.filter(sprintf(_templateObject24(), s)(group)).length;
+              $parent.closest('li')[_hasText ? 'show' : 'hide']();
+            }
+          }); // Check if no matches found
+
+          if (this.$selectItems.parent().filter(':visible').length) {
+            this.$selectAll.closest('li').show();
+            this.$noResults.hide();
+          } else {
+            this.$selectAll.closest('li').hide();
+            this.$noResults.show();
+          }
+        }
+
+        this.updateOptGroupSelect();
+        this.updateSelectAll();
+        this.options.onFilter(text);
+      }
+    }, {
+      key: "destroy",
+      value: function destroy() {
+        this.$el.before(this.$parent).show();
+        this.$parent.remove();
+      }
+    }]);
+
+    return MultipleSelect;
+  }();
+
+  var defaults = {
+    name: '',
+    placeholder: '',
+    selectAll: true,
+    single: false,
+    multiple: false,
+    hideOptgroupCheckboxes: false,
+    multipleWidth: 80,
+    width: undefined,
+    dropWidth: undefined,
+    maxHeight: 250,
+    position: 'bottom',
+    displayValues: false,
+    displayTitle: false,
+    displayDelimiter: ', ',
+    minimumCountSelected: 3,
+    ellipsis: false,
+    isOpen: false,
+    keepOpen: false,
+    openOnHover: false,
+    container: null,
+    filter: false,
+    filterGroup: false,
+    filterPlaceholder: '',
+    filterAcceptOnEnter: false,
+    animate: undefined,
+    styler: function styler() {
+      return false;
+    },
+    textTemplate: function textTemplate($elm) {
+      return $elm[0].innerHTML;
+    },
+    labelTemplate: function labelTemplate($elm) {
+      return $elm[0].getAttribute('label');
+    },
+    formatSelectAll: function formatSelectAll() {
+      return '[Select all]';
+    },
+    formatAllSelected: function formatAllSelected() {
+      return 'All selected';
+    },
+    formatCountSelected: function formatCountSelected(count, total) {
+      return count + ' of ' + total + ' selected';
+    },
+    formatNoMatchesFound: function formatNoMatchesFound() {
+      return 'No matches found';
+    },
+    onOpen: function onOpen() {
+      return false;
+    },
+    onClose: function onClose() {
+      return false;
+    },
+    onCheckAll: function onCheckAll() {
+      return false;
+    },
+    onUncheckAll: function onUncheckAll() {
+      return false;
+    },
+    onFocus: function onFocus() {
+      return false;
+    },
+    onBlur: function onBlur() {
+      return false;
+    },
+    onOptgroupClick: function onOptgroupClick() {
+      return false;
+    },
+    onClick: function onClick() {
+      return false;
+    },
+    onFilter: function onFilter() {
+      return false;
+    },
+    onAfterCreate: function onAfterCreate() {
+      return false;
+    }
+  };
+
+  $.fn.multipleSelect = function (option) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    var value;
+    var allowedMethods = ['getSelects', 'setSelects', 'enable', 'disable', 'open', 'close', 'checkAll', 'uncheckAll', 'focus', 'blur', 'refresh', 'destroy'];
+    this.each(function (i, el) {
+      var $this = $(el);
+      var data = $this.data('multipleSelect');
+      var options = $.extend({}, $this.data(), _typeof(option) === 'object' && option);
+
+      if (!data) {
+        data = new MultipleSelect($this, options);
+        $this.data('multipleSelect', data);
+      }
+
+      if (typeof option === 'string') {
+        var _data;
+
+        if ($.inArray(option, allowedMethods) < 0) {
+          throw new Error("Unknown method: ".concat(option));
+        }
+
+        value = (_data = data)[option].apply(_data, args);
+
+        if (option === 'destroy') {
+          $this.removeData('multipleSelect');
+        }
+      } else {
+        data.init();
+      }
+    });
+    return typeof value !== 'undefined' ? value : this;
+  };
+
+}));
diff --git a/src/dist/multiple-select.min.css b/src/dist/multiple-select.min.css
new file mode 100644
index 0000000..724cbd2
--- /dev/null
+++ b/src/dist/multiple-select.min.css
@@ -0,0 +1,10 @@
+/**
+  * multiple-select - Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
+  *
+  * @version v1.3.1
+  * @homepage http://multiple-select.wenzhixin.net.cn
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+.ms-parent{display:inline-block;position:relative;vertical-align:middle}.ms-choice{display:block;width:100%;height:26px;padding:0;overflow:hidden;cursor:pointer;border:1px solid #aaa;text-align:left;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#fff}.ms-choice.disabled{background-color:#f4f4f4;background-image:none;border:1px solid #ddd;cursor:default}.ms-choice>span{position:absolute;top:0;left:0;right:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding-left:8px}.ms-choice>span.placeholder{color:#999}.ms-choice>div{position:absolute;top:0;right:0;width:20px;height:25px;background:url("multiple-select.png") left top no-repeat}.ms-choice>div.open{background-position:right top}.ms-drop{width:100%;overflow:hidden;display:none;margin-top:-1px;padding:0;position:absolute;z-index:1000;background:#fff;color:#000;border:1px solid #aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.ms-drop.bottom{top:100%;-webkit-box-shadow:0 4px 5px rgba(0,0,0,0.15);-moz-box-shadow:0 4px 5px rgba(0,0,0,0.15);box-shadow:0 4px 5px rgba(0,0,0,0.15)}.ms-drop.top{bottom:100%;-webkit-box-shadow:0 -4px 5px rgba(0,0,0,0.15);-moz-box-shadow:0 -4px 5px rgba(0,0,0,0.15);box-shadow:0 -4px 5px rgba(0,0,0,0.15)}.ms-search{display:inline-block;margin:0;min-height:26px;padding:4px;position:relative;white-space:nowrap;width:100%;z-index:10000;-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ms-search input{width:100%;height:auto!important;min-height:24px;padding:0 20px 0 5px;margin:0;outline:0;font-family:sans-serif;font-size:1em;border:1px solid #aaa;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;background:#fff url("multiple-select.png") no-repeat 100% -22px;background:url("multiple-select.png") no-repeat 100% -22px,-webkit-gradient(linear,left bottom,left top,color-stop(0.85,white),color-stop(0.99,#eee));background:url("multiple-select.png") no-repeat 100% -22px,-webkit-linear-gradient(center bottom,white 85%,#eee 99%);background:url("multiple-select.png") no-repeat 100% -22px,-moz-linear-gradient(center bottom,white 85%,#eee 99%);background:url("multiple-select.png") no-repeat 100% -22px,-o-linear-gradient(bottom,white 85%,#eee 99%);background:url("multiple-select.png") no-repeat 100% -22px,-ms-linear-gradient(top,#fff 85%,#eee 99%);background:url("multiple-select.png") no-repeat 100% -22px,linear-gradient(to bottom,#fff 85%,#eee 99%);-webkit-box-sizing:border-box;-khtml-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ms-drop ul{overflow:auto;margin:0;padding:5px 8px}.ms-drop ul>li{list-style:none;display:list-item;background-image:none;position:static}.ms-drop ul>li .disabled{opacity:.35;filter:Alpha(Opacity=35)}.ms-drop ul>li.multiple{display:block;float:left}.ms-drop ul>li.group{clear:both}.ms-drop ul>li.multiple label{width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ms-drop ul>li label{font-weight:normal;display:block;white-space:nowrap;cursor:pointer}.ms-drop ul>li label.optgroup{font-weight:bold}.ms-drop input[type=radio],.ms-drop input[type=checkbox]{vertical-align:middle;margin:5px}.ms-drop .ms-no-results{display:none}
\ No newline at end of file
diff --git a/src/dist/multiple-select.min.js b/src/dist/multiple-select.min.js
new file mode 100644
index 0000000..09d3cbf
--- /dev/null
+++ b/src/dist/multiple-select.min.js
@@ -0,0 +1,10 @@
+/**
+  * multiple-select - Multiple select is a jQuery plugin to select multiple elements with checkboxes :).
+  *
+  * @version v1.3.1
+  * @homepage http://multiple-select.wenzhixin.net.cn
+  * @author wenzhixin <wenzhixin2010@gmail.com> (http://wenzhixin.net.cn/)
+  * @license MIT
+  */
+
+(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?b(require("jquery"),require("core-js/modules/es.array.filter"),require("core-js/modules/es.array.find"),require("core-js/modules/es.array.includes"),require("core-js/modules/es.array.join"),require("core-js/modules/es.array.map"),require("core-js/modules/es.array.slice"),require("core-js/modules/es.function.name"),require("core-js/modules/es.string.includes"),require("core-js/modules/es.string.trim"),require("core-js/modules/es.string.replace")):"function"==typeof define&&define.amd?define(["jquery","core-js/modules/es.array.filter","core-js/modules/es.array.find","core-js/modules/es.array.includes","core-js/modules/es.array.join","core-js/modules/es.array.map","core-js/modules/es.array.slice","core-js/modules/es.function.name","core-js/modules/es.string.includes","core-js/modules/es.string.trim","core-js/modules/es.string.replace"],b):(a=a||self,b(a.jQuery))})(this,function(a){'use strict';function b(a){return b="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},b(a)}function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function e(a,b,c){return b&&d(a.prototype,b),c&&d(a,c),a}function f(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function g(a){if(a.normalize)return a.normalize("NFD").replace(/[\u0300-\u036F]/g,"");var b=[{base:"A",letters:/[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g},{base:"AA",letters:/[\uA732]/g},{base:"AE",letters:/[\u00C6\u01FC\u01E2]/g},{base:"AO",letters:/[\uA734]/g},{base:"AU",letters:/[\uA736]/g},{base:"AV",letters:/[\uA738\uA73A]/g},{base:"AY",letters:/[\uA73C]/g},{base:"B",letters:/[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g},{base:"C",letters:/[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g},{base:"D",letters:/[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g},{base:"DZ",letters:/[\u01F1\u01C4]/g},{base:"Dz",letters:/[\u01F2\u01C5]/g},{base:"E",letters:/[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g},{base:"F",letters:/[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g},{base:"G",letters:/[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g},{base:"H",letters:/[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g},{base:"I",letters:/[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g},{base:"J",letters:/[\u004A\u24BF\uFF2A\u0134\u0248]/g},{base:"K",letters:/[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g},{base:"L",letters:/[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g},{base:"LJ",letters:/[\u01C7]/g},{base:"Lj",letters:/[\u01C8]/g},{base:"M",letters:/[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g},{base:"N",letters:/[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g},{base:"NJ",letters:/[\u01CA]/g},{base:"Nj",letters:/[\u01CB]/g},{base:"O",letters:/[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g},{base:"OI",letters:/[\u01A2]/g},{base:"OO",letters:/[\uA74E]/g},{base:"OU",letters:/[\u0222]/g},{base:"P",letters:/[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g},{base:"Q",letters:/[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g},{base:"R",letters:/[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g},{base:"S",letters:/[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g},{base:"T",letters:/[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g},{base:"TZ",letters:/[\uA728]/g},{base:"U",letters:/[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g},{base:"V",letters:/[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g},{base:"VY",letters:/[\uA760]/g},{base:"W",letters:/[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g},{base:"X",letters:/[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g},{base:"Y",letters:/[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g},{base:"Z",letters:/[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g},{base:"a",letters:/[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g},{base:"aa",letters:/[\uA733]/g},{base:"ae",letters:/[\u00E6\u01FD\u01E3]/g},{base:"ao",letters:/[\uA735]/g},{base:"au",letters:/[\uA737]/g},{base:"av",letters:/[\uA739\uA73B]/g},{base:"ay",letters:/[\uA73D]/g},{base:"b",letters:/[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g},{base:"c",letters:/[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g},{base:"d",letters:/[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g},{base:"dz",letters:/[\u01F3\u01C6]/g},{base:"e",letters:/[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g},{base:"f",letters:/[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g},{base:"g",letters:/[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g},{base:"h",letters:/[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g},{base:"hv",letters:/[\u0195]/g},{base:"i",letters:/[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g},{base:"j",letters:/[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g},{base:"k",letters:/[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g},{base:"l",letters:/[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g},{base:"lj",letters:/[\u01C9]/g},{base:"m",letters:/[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g},{base:"n",letters:/[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g},{base:"nj",letters:/[\u01CC]/g},{base:"o",letters:/[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g},{base:"oi",letters:/[\u01A3]/g},{base:"ou",letters:/[\u0223]/g},{base:"oo",letters:/[\uA74F]/g},{base:"p",letters:/[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g},{base:"q",letters:/[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g},{base:"r",letters:/[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g},{base:"s",letters:/[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g},{base:"t",letters:/[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g},{base:"tz",letters:/[\uA729]/g},{base:"u",letters:/[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g},{base:"v",letters:/[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g},{base:"vy",letters:/[\uA761]/g},{base:"w",letters:/[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g},{base:"x",letters:/[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g},{base:"y",letters:/[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g},{base:"z",letters:/[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g}];return b.reduce(function(a,b){var c=b.letters,d=b.base;return a.replace(c,d)},a)}function h(){var a=f(["[data-group=\"","\"]"]);return h=function(){return a},a}function j(){var a=f(["[value=\"","\"]"]);return j=function(){return a},a}function k(){var a=f(["[value=\"","\"]"]);return k=function(){return a},a}function l(){var a=f(["[","][data-group=\"","\"]"]);return l=function(){return a},a}function m(){var a=f(["input[","]:checked"]);return m=function(){return a},a}function n(){var a=f(["[data-group=\"","\"]"]);return n=function(){return a},a}function o(){var a=f(["[data-group=\"","\"]"]);return o=function(){return a},a}function p(){var a=f(["<input type=\"checkbox\" "," ",">"]);return p=function(){return a},a}function q(){var a=f(["<label class=\"optgroup ","\" data-group=\"","\">"]);return q=function(){return a},a}function r(){var a=f(["<span>","</span>"]);return r=function(){return a},a}function t(){var a=f([" data-group=\"","\""]);return t=function(){return a},a}function u(){var a=f(["<input type=\"","\" ","","","",">"]);return u=function(){return a},a}function v(){var a=f(["<label class=\"","\">"]);return v=function(){return a},a}function w(){var a=f(["<li class=\""," ","\" "," ",">"]);return w=function(){return a},a}function x(){var a=f(["style=\"","\""]);return x=function(){return a},a}function y(){var a=f(["title=\"","\""]);return y=function(){return a},a}function z(){var a=f(["<li class=\"ms-no-results\">","</li>"]);return z=function(){return a},a}function A(){var a=f(["<input type=\"checkbox\" "," />"]);return A=function(){return a},a}function B(){var a=f(["placeholder=\"","\""]);return B=function(){return a},a}function C(){var a=f(["<div class=\"ms-drop ","\"></div>"]);return C=function(){return a},a}function D(){var a=f(["\n      <button type=\"button\" class=\"ms-choice\">\n      <span class=\"placeholder\">","</span>\n      <div></div>\n      </button>\n    "]);return D=function(){return a},a}function E(){var a=f(["title=\"","\""]);return E=function(){return a},a}function F(){var a=f(["<div class=\"ms-parent ","\" ","/>"]);return F=function(){return a},a}function G(){var a=f(["label[for=\"","\"]"]);return G=function(){return a},a}a=a&&a.hasOwnProperty("default")?a["default"]:a;var H="undefined"==typeof globalThis?"undefined"==typeof window?"undefined"==typeof global?"undefined"==typeof self?{}:self:global:window:globalThis,I=function(a,b){return b={exports:{}},a(b,b.exports),b.exports}(function(a){(function(b,c){a.exports=c(b)})("undefined"==typeof H?H:H,function(a){if(a.CSS&&a.CSS.escape)return a.CSS.escape;var b=function(a){if(0==arguments.length)throw new TypeError("`CSS.escape` requires an argument.");for(var b,c=a+"",d=c.length,e=-1,f="",g=c.charCodeAt(0);++e<d;){if(b=c.charCodeAt(e),0==b){f+="\uFFFD";continue}if(1<=b&&31>=b||127==b||0==e&&48<=b&&57>=b||1==e&&48<=b&&57>=b&&45==g){f+="\\"+b.toString(16)+" ";continue}if(0==e&&1==d&&45==b){f+="\\"+c.charAt(e);continue}if(128<=b||45==b||95==b||48<=b&&57>=b||65<=b&&90>=b||97<=b&&122>=b){f+=c.charAt(e);continue}f+="\\"+c.charAt(e)}return f};return a.CSS||(a.CSS={}),a.CSS.escape=b,b})}),J="s",s=function(a){for(var b=arguments.length,c=Array(1<b?b-1:0),d=1;d<b;d++)c[d-1]=arguments[d];return function(){for(var b=arguments.length,d=Array(b),e=0;e<b;e++)d[e]=arguments[e];var f="";return a.slice(0,-1).some(function(a,b){switch(c[b]){default:throw new TypeError("Unrecognized sprintf format");case"s":{var e=d[b];if(null===e||e===void 0)return!0;return f+=a+e,!1}}})?"":f+a.slice(-1)}},K=function(){function b(d,e){var f=this;c(this,b);var g=d[0],h=g.getAttribute("name")||e.name||"";this.options=a.extend({},L,e),this.$el=d.hide(),this.$label=this.$el.closest("label"),0===this.$label.length&&g.getAttribute("id")&&(this.$label=a(s(G(),J)(I(g.getAttribute("id"))))),this.$parent=a(s(F(),J,J)(g.getAttribute("class")||"",s(E(),J)(g.getAttribute("title")))),this.options.placeholder=this.options.placeholder||g.getAttribute("placeholder")||"",this.$choice=a(s(D(),J)(this.options.placeholder)),this.$drop=a(s(C(),J)(this.options.position)),this.options.dropWidth&&this.$drop.css("width",this.options.dropWidth),this.$el.after(this.$parent),this.$parent.append(this.$choice),this.$parent.append(this.$drop),g.disabled&&this.$choice.addClass("disabled"),this.$parent.css("width",this.options.width||this.$el.css("width")||this.$el.outerWidth()+20),this.selectAllName="data-name=\"selectAll".concat(h,"\""),this.selectGroupName="data-name=\"selectGroup".concat(h,"\""),this.selectItemName="data-name=\"selectItem".concat(h,"\""),this.options.keepOpen||a(document).click(function(b){a(b.target)[0]===f.$choice[0]||a(b.target).parents(".ms-choice")[0]===f.$choice[0]||(a(b.target)[0]===f.$drop[0]||a(b.target).parents(".ms-drop")[0]!==f.$drop[0]&&b.target!==g)&&f.options.isOpen&&f.close()}),this.options.onAfterCreate()}return e(b,[{key:"init",value:function(){var b=this,c=a("<ul></ul>");this.$drop.html(""),this.options.filter&&this.$drop.append("\n        <div class=\"ms-search\">\n          <input type=\"text\" autocomplete=\"off\" autocorrect=\"off\"\n            autocapitalize=\"off\" spellcheck=\"false\"\n            ".concat(s(B(),J)(this.options.filterPlaceholder),">\n        </div>\n      ")),this.options.selectAll&&!this.options.single&&c.append(["<li class=\"ms-select-all\">","<label>",s(A(),J)(this.selectAllName),"<span>".concat(this.options.formatSelectAll(),"</span>"),"</label>","</li>"].join("")),a.each(this.$el.children(),function(a,d){c.append(b.optionToHtml(a,d))}),c.append(s(z(),J)(this.options.formatNoMatchesFound())),this.$drop.append(c),this.$drop.find("ul").css("max-height","".concat(this.options.maxHeight,"px")),this.$drop.find(".multiple").css("width","".concat(this.options.multipleWidth,"px")),this.$searchInput=this.$drop.find(".ms-search input"),this.$selectAll=this.$drop.find("input[".concat(this.selectAllName,"]")),this.$selectGroups=this.$drop.find("input[".concat(this.selectGroupName,"]")),this.$selectItems=this.$drop.find("input[".concat(this.selectItemName,"]:enabled")),this.$disableItems=this.$drop.find("input[".concat(this.selectItemName,"]:disabled")),this.$noResults=this.$drop.find(".ms-no-results"),this.events(),this.updateSelectAll(!0),this.update(!0),this.updateOptGroupSelect(!0),this.options.isOpen&&this.open(),this.options.openOnHover&&this.$parent.hover(function(){b.open()},function(){b.close()})}},{key:"optionToHtml",value:function(b,c,d,e){var f,g=this,h=a(c),i=h[0],j=i.getAttribute("class")||"",k=s(y(),J)(i.getAttribute("title")),l=this.options.multiple?"multiple":"",m=this.options.single?"radio":"checkbox";if(h.is("option")){var n=this.options.textTemplate(h),o=i.value,z=i.selected,A=this.options.styler(o),B=A?s(x(),J)(A):"";f=e||i.disabled;var C=a([s(w(),J,J,J,J)(l,j,k,B),s(v(),J)(f?"disabled":""),s(u(),J,J,J,J,J)(m,this.selectItemName,z?" checked=\"checked\"":"",f?" disabled=\"disabled\"":"",s(t(),J)(d)),s(r(),J)(n),"</label>","</li>"].join(""));return C.find("input").val(o),C}if(h.is("optgroup")){var D=this.options.labelTemplate(h),E=a("<div/>");return d="group_".concat(b),f=i.disabled,E.append(["<li class=\"group\">",s(q(),J,J)(f?"disabled":"",d),this.options.hideOptgroupCheckboxes||this.options.single?"":s(p(),J,J)(this.selectGroupName,f?"disabled=\"disabled\"":""),D,"</label>","</li>"].join("")),a.each(h.children(),function(a,b){E.append(g.optionToHtml(a,b,d,f))}),E.html()}}},{key:"events",value:function(){var b=this,c=function(a){a.preventDefault(),b[b.options.isOpen?"close":"open"]()};this.$label&&this.$label.off("click").on("click",function(a){"label"!==a.target.nodeName.toLowerCase()||a.target!==b||(c(a),(!b.options.filter||!b.options.isOpen)&&b.focus(),a.stopPropagation())}),this.$choice.off("click").on("click",c).off("focus").on("focus",this.options.onFocus).off("blur").on("blur",this.options.onBlur),this.$parent.off("keydown").on("keydown",function(a){27===a.which&&(b.close(),b.$choice.focus())}),this.$searchInput.off("keydown").on("keydown",function(a){9===a.keyCode&&a.shiftKey&&b.close()}).off("keyup").on("keyup",function(a){return b.options.filterAcceptOnEnter&&[13,32].includes(a.which)&&b.$searchInput.val()?(b.$selectAll.click(),b.close(),void b.focus()):void b.filter()}),this.$selectAll.off("click").on("click",function(c){var d=a(c.currentTarget).prop("checked"),e=b.$selectItems.filter(":visible");e.length===b.$selectItems.length?b[d?"checkAll":"uncheckAll"]():(b.$selectGroups.prop("checked",d),e.prop("checked",d),b.options[d?"onCheckAll":"onUncheckAll"](),b.update())}),this.$selectGroups.off("click").on("click",function(c){var d=a(c.currentTarget),e=d.parent()[0].getAttribute("data-group"),f=b.$selectItems.filter(":visible"),g=f.filter(s(o(),J)(e)),h=g.length!==g.filter(":checked").length;g.prop("checked",h),b.updateSelectAll(),b.update(),b.options.onOptgroupClick({label:d.parent().text(),checked:h,children:g.get().map(function(b){return{label:a(b).parent().text(),value:a(b).val(),check:a(b).prop("checked")}})})}),this.$selectItems.off("click").on("click",function(c){var d=a(c.currentTarget);if(b.options.single){var e=a(c.currentTarget).val();b.$selectItems.filter(function(b,c){return a(c).val()!==e}).each(function(b,c){a(c).prop("checked",!1)})}b.updateSelectAll(),b.update(),b.updateOptGroupSelect(),b.options.onClick({label:d.parent().text(),value:d.val(),checked:d.prop("checked")}),b.options.single&&b.options.isOpen&&!b.options.keepOpen&&b.close()})}},{key:"open",value:function(){if(!this.$choice.hasClass("disabled")){if(this.options.isOpen=!0,this.$choice.find(">div").addClass("open"),this.$drop[this.animateMethod("show")](),this.$selectAll.parent().show(),this.$noResults.hide(),this.$el.children().length||(this.$selectAll.parent().hide(),this.$noResults.show()),this.options.container){var b=this.$drop.offset();this.$drop.appendTo(a(this.options.container)),this.$drop.offset({top:b.top,left:b.left}),this.$drop.outerWidth(this.$parent.outerWidth())}this.$el.children().length&&this.options.filter&&(this.$searchInput.val(""),this.$searchInput.focus(),this.filter()),this.options.onOpen()}}},{key:"close",value:function(){this.options.isOpen=!1,this.$choice.find(">div").removeClass("open"),this.$drop[this.animateMethod("hide")](),this.options.container&&(this.$parent.append(this.$drop),this.$drop.css({top:"auto",left:"auto"})),this.options.onClose()}},{key:"animateMethod",value:function(a){return{show:{fade:"fadeIn",slide:"slideDown"},hide:{fade:"fadeOut",slide:"slideUp"}}[a][this.options.animate]||a}},{key:"update",value:function(b){var c=this.getSelects(),d=this.options.displayValues?c:this.getSelects("text"),e=this.$choice.find(">span"),f=c.length;0===f?e.addClass("placeholder").html(this.options.placeholder):this.options.formatAllSelected()&&f===this.$selectItems.length+this.$disableItems.length?e.removeClass("placeholder").html(this.options.formatAllSelected()):this.options.ellipsis&&f>this.options.minimumCountSelected?e.removeClass("placeholder").text("".concat(d.slice(0,this.options.minimumCountSelected).join(this.options.displayDelimiter),"...")):this.options.formatCountSelected()&&f>this.options.minimumCountSelected?e.removeClass("placeholder").html(this.options.formatCountSelected(f,this.$selectItems.length+this.$disableItems.length)):e.removeClass("placeholder").text(d.join(this.options.displayDelimiter)),this.options.displayTitle&&e.prop("title",this.getSelects("text")),this.$el.val(this.getSelects()),this.$drop.find("li").removeClass("selected"),this.$drop.find("input:checked").each(function(b,c){a(c).parents("li").first().addClass("selected")}),b||this.$el.trigger("change")}},{key:"updateSelectAll",value:function(a){var b=this.$selectItems;a||(b=b.filter(":visible")),this.$selectAll.prop("checked",b.length&&b.length===b.filter(":checked").length),!a&&this.$selectAll.prop("checked")&&this.options.onCheckAll()}},{key:"updateOptGroupSelect",value:function(b){var c=this.$selectItems;b||(c=c.filter(":visible")),a.each(this.$selectGroups,function(b,d){var e=a(d).parent()[0].getAttribute("data-group"),f=c.filter(s(n(),J)(e));a(d).prop("checked",f.length&&f.length===f.filter(":checked").length)})}},{key:"getSelects",value:function(b){var c=this,d=[],e=[];return this.$drop.find(s(m(),J)(this.selectItemName)).each(function(b,c){d.push(a(c).parents("li").first().text()),e.push(a(c).val())}),"text"===b&&this.$selectGroups.length&&(d=[],this.$selectGroups.each(function(b,e){var f=[],g=a.trim(a(e).parent().text()),h=a(e).parent().data("group"),i=c.$drop.find(s(l(),J,J)(c.selectItemName,h)),j=i.filter(":checked");if(j.length){if(f.push("["),f.push(g),i.length>j.length){var k=[];j.each(function(b,c){k.push(a(c).parent().text())}),f.push(": ".concat(k.join(", ")))}f.push("]"),d.push(f.join(""))}})),"text"===b?d:e}},{key:"setSelects",value:function(b){var c=this;this.$selectItems.prop("checked",!1),this.$disableItems.prop("checked",!1),a.each(b,function(a,b){c.$selectItems.filter(s(k(),J)(b)).prop("checked",!0),c.$disableItems.filter(s(j(),J)(b)).prop("checked",!0)}),this.$selectAll.prop("checked",this.$selectItems.length===this.$selectItems.filter(":checked").length+this.$disableItems.filter(":checked").length),a.each(this.$selectGroups,function(b,d){var e=a(d).parent()[0].getAttribute("data-group"),f=c.$selectItems.filter("[data-group=\"".concat(e,"\"]"));a(d).prop("checked",f.length&&f.length===f.filter(":checked").length)}),this.update(!1)}},{key:"enable",value:function(){this.$choice.removeClass("disabled")}},{key:"disable",value:function(){this.$choice.addClass("disabled")}},{key:"checkAll",value:function(){this.$selectItems.prop("checked",!0),this.$selectGroups.prop("checked",!0),this.$selectAll.prop("checked",!0),this.update(),this.options.onCheckAll()}},{key:"uncheckAll",value:function(){this.$selectItems.prop("checked",!1),this.$selectGroups.prop("checked",!1),this.$selectAll.prop("checked",!1),this.update(),this.options.onUncheckAll()}},{key:"focus",value:function(){this.$choice.focus(),this.options.onFocus()}},{key:"blur",value:function(){this.$choice.blur(),this.options.onBlur()}},{key:"refresh",value:function(){this.init()}},{key:"filter",value:function(){var b=this,c=a.trim(this.$searchInput.val()).toLowerCase();0===c.length?(this.$selectAll.closest("li").show(),this.$selectItems.closest("li").show(),this.$disableItems.closest("li").show(),this.$selectGroups.closest("li").show(),this.$noResults.hide()):(!this.options.filterGroup&&this.$selectItems.each(function(b,d){var e=a(d).parent(),f=g(e.text().toLowerCase()).includes(g(c));e.closest("li")[f?"show":"hide"]()}),this.$disableItems.parent().hide(),this.$selectGroups.each(function(d,e){var f=a(e).parent(),i=f[0].getAttribute("data-group");if(b.options.filterGroup){var j=g(f.text().toLowerCase()).includes(g(c)),k=j?"show":"hide";f.closest("li")[k](),b.$selectItems.filter("[data-group=\"".concat(i,"\"]")).closest("li")[k]()}else{var l=b.$selectItems.filter(":visible"),m=l.filter(s(h(),J)(i)).length;f.closest("li")[m?"show":"hide"]()}}),this.$selectItems.parent().filter(":visible").length?(this.$selectAll.closest("li").show(),this.$noResults.hide()):(this.$selectAll.closest("li").hide(),this.$noResults.show())),this.updateOptGroupSelect(),this.updateSelectAll(),this.options.onFilter(c)}},{key:"destroy",value:function(){this.$el.before(this.$parent).show(),this.$parent.remove()}}]),b}(),L={name:"",placeholder:"",selectAll:!0,single:!1,multiple:!1,hideOptgroupCheckboxes:!1,multipleWidth:80,width:void 0,dropWidth:void 0,maxHeight:250,position:"bottom",displayValues:!1,displayTitle:!1,displayDelimiter:", ",minimumCountSelected:3,ellipsis:!1,isOpen:!1,keepOpen:!1,openOnHover:!1,container:null,filter:!1,filterGroup:!1,filterPlaceholder:"",filterAcceptOnEnter:!1,animate:void 0,styler:function(){return!1},textTemplate:function(a){return a[0].innerHTML},labelTemplate:function(a){return a[0].getAttribute("label")},formatSelectAll:function(){return"[Select all]"},formatAllSelected:function(){return"All selected"},formatCountSelected:function(a,b){return a+" of "+b+" selected"},formatNoMatchesFound:function(){return"No matches found"},onOpen:function(){return!1},onClose:function(){return!1},onCheckAll:function(){return!1},onUncheckAll:function(){return!1},onFocus:function(){return!1},onBlur:function(){return!1},onOptgroupClick:function(){return!1},onClick:function(){return!1},onFilter:function(){return!1},onAfterCreate:function(){return!1}};a.fn.multipleSelect=function(c){for(var d=arguments.length,e=Array(1<d?d-1:0),f=1;f<d;f++)e[f-1]=arguments[f];var g,h=["getSelects","setSelects","enable","disable","open","close","checkAll","uncheckAll","focus","blur","refresh","destroy"];return this.each(function(d,f){var i=a(f),j=i.data("multipleSelect"),k=a.extend({},i.data(),"object"===b(c)&&c);if(j||(j=new K(i,k),i.data("multipleSelect",j)),"string"==typeof c){var l;if(0>a.inArray(c,h))throw new Error("Unknown method: ".concat(c));g=(l=j)[c].apply(l,e),"destroy"==c&&i.removeData("multipleSelect")}else j.init()}),"undefined"==typeof g?this:g}});
diff --git a/src/dist/multiple-select.png b/src/dist/multiple-select.png
new file mode 100644
index 0000000..b1282ce
Binary files /dev/null and b/src/dist/multiple-select.png differ
diff --git a/src/e/favicon.ico b/src/e/favicon.ico
new file mode 100644
index 0000000..c8855f6
Binary files /dev/null and b/src/e/favicon.ico differ
diff --git a/src/e/favicon1.ico b/src/e/favicon1.ico
new file mode 100644
index 0000000..9910ab2
Binary files /dev/null and b/src/e/favicon1.ico differ
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..3e9a61d
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,17 @@
+export const environment = {
+  production: true,
+  hostUrl: "https://www.oneqlik.in",
+  hostUrl2: "https://www.oneqlik.in",
+  //  hostUrl:"https://socket.oneqlik.in",
+  //  hostUrl2:"https://socket.oneqlik.in",
+
+  socket5000: "",
+  // mosChannel:"http://13.126.36.205/mos/getMosChannel"
+  showLandingpageMenu: ["www.drsupergps.com", "www.vpngps.tech", "www.globaltechnohelp.com", "www.sohamshakti.in", "www.tracktive.in", "www.spygpstrack.com", "www.mtelematics.in", "www.dstrackingsolutions.com", "www.vctrack.in", "www.hltgps.in", "www.xcelgps.com"]
+}
+
+
+// http://51.38.175.41
+// "www.drsupergps.com","www.globaltechnohelp.com","www.sohamshakti.in","www.spygpstrack.com","www.mtelematics.in"ng serve
+
+
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..cc6d25f
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,23 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  hostUrl: "http://localhost:3000",
+  hostUrl2: "http://localhost:3000",
+  // hostUrl: "https://socket.oneqlik.in",
+  // hostUrl2: "https://socket.oneqlik.in",
+  // hostUrl: "https://www.oneqlik.in",
+  // hostUrl2: "https://www.oneqlik.in",
+  socket5000: "",
+  showLandingpageMenu: ["www.drsupergps.com", "www.vpngps.tech", "www.globaltechnohelp.com", "www.tracktive.in", "www.sohamshakti.in", "www.spygpstrack.com", "www.mtelematics.in", "www.dstrackingsolutions.com", "www.vctrack.in", "www.hltgps.in", "www.xcelgps.com"]
+
+
+};
+
+// "www.drsupergps.com","www.globaltechnohelp.com","www.sohamshakti.in","www.spygpstrack.com","www.mtelematics.in"
+
+
+
diff --git a/src/fSelect.css b/src/fSelect.css
new file mode 100644
index 0000000..4856dc1
--- /dev/null
+++ b/src/fSelect.css
@@ -0,0 +1,147 @@
+.fs-wrap {
+    display: inline-block;
+    cursor: pointer;
+    line-height: 1;
+    width: 200px;
+}
+
+.fs-label-wrap {
+    position: relative;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    cursor: default;
+}
+
+.fs-label-wrap,
+.fs-dropdown {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.fs-label-wrap .fs-label {
+    padding: 6px 22px 6px 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.fs-arrow {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #333;
+    position: absolute;
+    top: 0;
+    right: 5px;
+    bottom: 0;
+    margin: auto;
+    transition: ease-in 0.15s;
+}
+
+.fs-open .fs-arrow {
+    transform: rotate(-180deg);
+}
+
+.fs-dropdown {
+    position: absolute;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    width: 200px;
+    margin-top: 5px;
+    z-index: 1000;
+}
+
+.fs-dropdown .fs-options {
+    max-height: 200px;
+    overflow: auto;
+}
+
+.fs-search input {
+    border: none !important;
+    box-shadow: none !important;
+    outline: none;
+    padding: 6px 0;
+    width: 100%;
+}
+
+.fs-option,
+.fs-search,
+.fs-optgroup-label {
+    padding: 6px 8px;
+    border-bottom: 1px solid #eee;
+    cursor: default;
+}
+
+.fs-option:last-child {
+    border-bottom: none;
+}
+
+.fs-search {
+    padding: 0 8px;
+}
+
+.fs-no-results {
+    padding: 6px 8px;
+}
+
+.fs-option {
+    cursor: pointer;
+    word-break: break-all;
+}
+
+.fs-option.disabled {
+    opacity: 0.4;
+    cursor: default;
+}
+
+.fs-option.hl {
+    background-color: #f5f5f5;
+}
+
+.fs-wrap.multiple .fs-option {
+    position: relative;
+    padding-left: 30px;
+}
+
+.fs-wrap.multiple .fs-checkbox {
+    position: absolute;
+    display: block;
+    width: 30px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.fs-wrap.multiple .fs-option .fs-checkbox i {
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 14px;
+    height: 14px;
+    border: 1px solid #aeaeae;
+    border-radius: 2px;
+    background-color: #fff;
+}
+
+.fs-wrap.multiple .fs-option.selected .fs-checkbox i {
+    background-color: rgb(17, 169, 17);
+    border-color: transparent;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAABMSURBVAiZfc0xDkAAFIPhd2Kr1WRjcAExuIgzGUTIZ/AkImjSofnbNBAfHvzAHjOKNzhiQ42IDFXCDivaaxAJd0xYshT3QqBxqnxeHvhunpu23xnmAAAAAElFTkSuQmCC');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.fs-optgroup-label {
+    font-weight: bold;
+    text-align: center;
+}
+
+.hidden {
+    display: none;
+}
diff --git a/src/fSelect.js b/src/fSelect.js
new file mode 100644
index 0000000..1fe7d81
--- /dev/null
+++ b/src/fSelect.js
@@ -0,0 +1,439 @@
+/* fSelect 1.0.1 - https://github.com/mgibbs189/fselect */
+
+(function($) {
+
+    String.prototype.unaccented = function() {
+        var accent = [
+            /[\300-\306]/g, /[\340-\346]/g, // A, a
+            /[\310-\313]/g, /[\350-\353]/g, // E, e
+            /[\314-\317]/g, /[\354-\357]/g, // I, i
+            /[\322-\330]/g, /[\362-\370]/g, // O, o
+            /[\331-\334]/g, /[\371-\374]/g, // U, u
+            /[\321]/g, /[\361]/g, // N, n
+            /[\307]/g, /[\347]/g, // C, c
+        ];
+        var noaccent = ['A','a','E','e','I','i','O','o','U','u','N','n','C','c'];
+
+        var str = this;
+        for (var i = 0; i < accent.length; i++) {
+            str = str.replace(accent[i], noaccent[i]);
+        }
+
+        return str;
+    }
+
+    $.fn.fSelect = function(options) {
+
+        if ('string' === typeof options) {
+            var settings = options;
+        }
+        else {
+            var settings = $.extend({
+                placeholder: 'Select some options',
+                numDisplayed: 3,
+                overflowText: '{n} selected',
+                searchText: 'Search',
+                noResultsText: 'No results found',
+                showSearch: true,
+                optionFormatter: false
+            }, options);
+        }
+
+
+        /**
+         * Constructor
+         */
+        function fSelect(select, settings) {
+            this.$select = $(select);
+            this.settings = settings;
+            this.create();
+        }
+
+
+        /**
+         * Prototype class
+         */
+        fSelect.prototype = {
+            create: function() {
+                this.idx = 0;
+                this.optgroup = 0;
+                this.selected = [].concat(this.$select.val()); // force an array
+                this.settings.multiple = this.$select.is('[multiple]');
+
+                var search_html = '';
+                var no_results_html = '';
+                var choices_html = this.buildOptions(this.$select);
+
+                if (this.settings.showSearch) {
+                    search_html = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';
+                }
+                if ('' !== this.settings.noResultsText) {
+                    no_results_html = '<div class="fs-no-results hidden">' + this.settings.noResultsText + '</div>';
+                }
+
+                var html = '<div class="fs-label-wrap"><div class="fs-label"></div><span class="fs-arrow"></span></div>';
+                html += '<div class="fs-dropdown hidden">{search}{no-results}<div class="fs-options">' + choices_html + '</div></div>';
+                html = html.replace('{search}', search_html);
+                html = html.replace('{no-results}', no_results_html);
+
+                this.$select.wrap('<div class="fs-wrap' + (this.settings.multiple ? ' multiple' : '') + '" tabindex="0" />');
+                this.$select.addClass('hidden');
+                this.$select.before(html);
+                this.$wrap = this.$select.closest('.fs-wrap');
+                this.$wrap.data('id', window.fSelect.num_items);
+                window.fSelect.num_items++;
+
+                this.reloadDropdownLabel();
+            },
+
+            reload: function() {
+                this.destroy();
+                this.create();
+            },
+
+            destroy: function() {
+                this.$wrap.find('.fs-label-wrap').remove();
+                this.$wrap.find('.fs-dropdown').remove();
+                this.$select.unwrap().removeClass('hidden');
+            },
+
+            buildOptions: function($element) {
+                var $this = this;
+
+                var choices = '';
+                $element.children().each(function(i, el) {
+                    var $el = $(el);
+
+                    if ('optgroup' == $el.prop('nodeName').toLowerCase()) {
+                        choices += '<div class="fs-optgroup-label" data-group="' + $this.optgroup + '">' + $el.prop('label') + '</div>';
+                        choices += $this.buildOptions($el);
+                        $this.optgroup++;
+                    }
+                    else {
+                        var val = $el.prop('value');
+                        var classes = $el.attr('class');
+                        classes = ('undefined' !== typeof classes) ? ' ' + classes : '';
+
+                        // exclude the first option in multi-select mode
+                        if (0 < $this.idx || '' != val || ! $this.settings.multiple) {
+                            var disabled = $el.is(':disabled') ? ' disabled' : '';
+                            var selected = -1 < $.inArray(val, $this.selected) ? ' selected' : '';
+                            var group = ' g' + $this.optgroup;
+                            var row = '<div class="fs-option' + selected + disabled + group + classes + '" data-value="' + val + '" data-index="' + $this.idx + '"><span class="fs-checkbox"><i></i></span><div class="fs-option-label">' + $el.html() + '</div></div>';
+
+                            if ('function' === typeof $this.settings.optionFormatter) {
+                                row = $this.settings.optionFormatter(row);
+                            }
+
+                            choices += row;
+                            $this.idx++;
+                        }
+                    }
+                });
+
+                return choices;
+            },
+
+            reloadDropdownLabel: function() {
+                var settings = this.settings;
+                var labelText = [];
+
+                this.$wrap.find('.fs-option.selected').each(function(i, el) {
+                    labelText.push($(el).find('.fs-option-label').html());
+                });
+
+                if (labelText.length < 1) {
+                    labelText = settings.placeholder;
+                }
+                else if (labelText.length > settings.numDisplayed) {
+                    labelText = settings.overflowText.replace('{n}', labelText.length);
+                }
+                else {
+                    labelText = labelText.join(', ');
+                }
+
+                this.$wrap.find('.fs-label').html(labelText);
+                this.$wrap.toggleClass('fs-default', labelText === settings.placeholder);
+            }
+        }
+
+
+        /**
+         * Loop through each matching element
+         */
+        return this.each(function() {
+            var data = $(this).data('fSelect');
+
+            if (!data) {
+                data = new fSelect(this, settings);
+                $(this).data('fSelect', data);
+            }
+
+            if ('string' === typeof settings) {
+                data[settings]();
+            }
+        });
+    }
+
+
+    /**
+     * Events
+     */
+    window.fSelect = {
+        'num_items': 0,
+        'active_id': null,
+        'active_el': null,
+        'last_choice': null,
+        'idx': -1
+    };
+
+    $(document).on('click', '.fs-option:not(.hidden, .disabled)', function(e) {
+        var $wrap = $(this).closest('.fs-wrap');
+        var $select = $wrap.find('select');
+        var do_close = false;
+
+        // prevent selections
+        if ($wrap.hasClass('fs-disabled')) {
+            return;
+        }
+
+        if ($wrap.hasClass('multiple')) {
+            var selected = [];
+
+            // shift + click support
+            if (e.shiftKey && null != window.fSelect.last_choice) {
+                var current_choice = parseInt($(this).attr('data-index'));
+                var addOrRemove = ! $(this).hasClass('selected');
+                var min = Math.min(window.fSelect.last_choice, current_choice);
+                var max = Math.max(window.fSelect.last_choice, current_choice);
+
+                for (i = min; i <= max; i++) {
+                    $wrap.find('.fs-option[data-index='+ i +']')
+                        .not('.hidden, .disabled')
+                        .each(function() {
+                            $(this).toggleClass('selected', addOrRemove);
+                        });
+                }
+            }
+            else {
+                window.fSelect.last_choice = parseInt($(this).attr('data-index'));
+                $(this).toggleClass('selected');
+            }
+
+            $wrap.find('.fs-option.selected').each(function(i, el) {
+                selected.push($(el).attr('data-value'));
+            });
+        }
+        else {
+            var selected = $(this).attr('data-value');
+            $wrap.find('.fs-option').removeClass('selected');
+            $(this).addClass('selected');
+            do_close = true;
+        }
+
+        $select.val(selected);
+        $select.fSelect('reloadDropdownLabel');
+        $select.change();
+
+        // fire an event
+        $(document).trigger('fs:changed', $wrap);
+
+        if (do_close) {
+            closeDropdown($wrap);
+        }
+    });
+
+    $(document).on('keyup', '.fs-search input', function(e) {
+        if (40 == e.which) { // down
+            $(this).blur();
+            return;
+        }
+
+        var $wrap = $(this).closest('.fs-wrap');
+        var matchOperators = /[|\\{}()[\]^$+*?.]/g;
+        var keywords = $(this).val().replace(matchOperators, '\\$&');
+
+        $wrap.find('.fs-option, .fs-optgroup-label').removeClass('hidden');
+
+        if ('' != keywords) {
+            $wrap.find('.fs-option').each(function() {
+                var regex = new RegExp(keywords.unaccented(), 'gi');
+                var formatedValue = $(this).find('.fs-option-label').text().unaccented();
+
+                if (null === formatedValue.match(regex)) {
+                    $(this).addClass('hidden');
+                }
+            });
+
+            $wrap.find('.fs-optgroup-label').each(function() {
+                var group = $(this).attr('data-group');
+                var num_visible = $(this).closest('.fs-options').find('.fs-option.g' + group + ':not(.hidden)').length;
+                if (num_visible < 1) {
+                    $(this).addClass('hidden');
+                }
+            });
+        }
+
+        setIndexes($wrap);
+        checkNoResults($wrap);
+    });
+
+    $(document).on('click', function(e) {
+        var $el = $(e.target);
+        var $wrap = $el.closest('.fs-wrap');
+
+        if (0 < $wrap.length) {
+
+            // user clicked another fSelect box
+            if ($wrap.data('id') !== window.fSelect.active_id) {
+                closeDropdown();
+            }
+
+            // fSelect box was toggled
+            if ($el.hasClass('fs-label') || $el.hasClass('fs-arrow')) {
+                var is_hidden = $wrap.find('.fs-dropdown').hasClass('hidden');
+
+                if (is_hidden) {
+                    openDropdown($wrap);
+                }
+                else {
+                    closeDropdown($wrap);
+                }
+            }
+        }
+        // clicked outside, close all fSelect boxes
+        else {
+            closeDropdown();
+        }
+    });
+
+    $(document).on('keydown', function(e) {
+        var $wrap = window.fSelect.active_el;
+        var $target = $(e.target);
+
+        // toggle the dropdown on space
+        if ($target.hasClass('fs-wrap')) {
+            if (32 == e.which || 13 == e.which) {
+                e.preventDefault();
+                $target.find('.fs-label').trigger('click');
+                return;
+            }
+        }
+        // preserve spaces during search
+        else if (0 < $target.closest('.fs-search').length) {
+            if (32 == e.which) {
+                return;
+            }
+        }
+        else if (null === $wrap) {
+            return;
+        }
+
+        if (38 == e.which) { // up
+            e.preventDefault();
+
+            $wrap.find('.fs-option.hl').removeClass('hl');
+
+            var $current = $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']');
+            var $prev = $current.prevAll('.fs-option:not(.hidden, .disabled)');
+
+            if ($prev.length > 0) {
+                window.fSelect.idx = parseInt($prev.attr('data-index'));
+                $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']').addClass('hl');
+                setScroll($wrap);
+            }
+            else {
+                window.fSelect.idx = -1;
+                $wrap.find('.fs-search input').focus();
+            }
+        }
+        else if (40 == e.which) { // down
+            e.preventDefault();
+
+            var $current = $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']');
+            if ($current.length < 1) {
+                var $next = $wrap.find('.fs-option:not(.hidden, .disabled):first');
+            }
+            else {
+                var $next = $current.nextAll('.fs-option:not(.hidden, .disabled)');
+            }
+
+            if ($next.length > 0) {
+                window.fSelect.idx = parseInt($next.attr('data-index'));
+                $wrap.find('.fs-option.hl').removeClass('hl');
+                $wrap.find('.fs-option[data-index=' + window.fSelect.idx + ']').addClass('hl');
+                setScroll($wrap);
+            }
+        }
+        else if (32 == e.which || 13 == e.which) { // space, enter
+            e.preventDefault();
+
+            $wrap.find('.fs-option.hl').click();
+        }
+        else if (27 == e.which) { // esc
+            closeDropdown($wrap);
+        }
+    });
+
+    function checkNoResults($wrap) {
+        var addOrRemove = $wrap.find('.fs-option:not(.hidden)').length > 0;
+        $wrap.find('.fs-no-results').toggleClass('hidden', addOrRemove);
+    }
+
+    function setIndexes($wrap) {
+        $wrap.find('.fs-option.hl').removeClass('hl');
+        $wrap.find('.fs-search input').focus();
+        window.fSelect.idx = -1;
+    }
+
+    function setScroll($wrap) {
+        var $container = $wrap.find('.fs-options');
+        var $selected = $wrap.find('.fs-option.hl');
+
+        var itemMin = $selected.offset().top + $container.scrollTop();
+        var itemMax = itemMin + $selected.outerHeight();
+        var containerMin = $container.offset().top + $container.scrollTop();
+        var containerMax = containerMin + $container.outerHeight();
+
+        if (itemMax > containerMax) { // scroll down
+            var to = $container.scrollTop() + itemMax - containerMax;
+            $container.scrollTop(to);
+        }
+        else if (itemMin < containerMin) { // scroll up
+            var to = $container.scrollTop() - containerMin - itemMin;
+            $container.scrollTop(to);
+        }
+    }
+
+    function openDropdown($wrap) {
+        window.fSelect.active_el = $wrap;
+        window.fSelect.active_id = $wrap.data('id');
+        window.fSelect.initial_values = $wrap.find('select').val();
+        $(document).trigger('fs:opened', $wrap);
+        $wrap.find('.fs-dropdown').removeClass('hidden');
+        $wrap.addClass('fs-open');
+        setIndexes($wrap);
+        checkNoResults($wrap);
+    }
+
+    function closeDropdown($wrap) {
+        if ('undefined' == typeof $wrap && null != window.fSelect.active_el) {
+            $wrap = window.fSelect.active_el;
+        }
+        if ('undefined' !== typeof $wrap) {
+            // only trigger if the values have changed
+            var initial_values = window.fSelect.initial_values;
+            var current_values = $wrap.find('select').val();
+            if (JSON.stringify(initial_values) != JSON.stringify(current_values)) {
+                $(document).trigger('fs:closed', $wrap);
+            }
+        }
+
+        $('.fs-wrap').removeClass('fs-open');
+        $('.fs-dropdown').addClass('hidden');
+        window.fSelect.active_el = null;
+        window.fSelect.active_id = null;
+        window.fSelect.last_choice = null;
+    }
+
+})(jQuery);
diff --git a/src/faviconn.ico b/src/faviconn.ico
new file mode 100644
index 0000000..cf4bbbb
Binary files /dev/null and b/src/faviconn.ico differ
diff --git a/src/fonts/Lato/Lato-Black.ttf b/src/fonts/Lato/Lato-Black.ttf
new file mode 100644
index 0000000..6848db0
Binary files /dev/null and b/src/fonts/Lato/Lato-Black.ttf differ
diff --git a/src/fonts/Lato/Lato-BlackItalic.ttf b/src/fonts/Lato/Lato-BlackItalic.ttf
new file mode 100644
index 0000000..5decf12
Binary files /dev/null and b/src/fonts/Lato/Lato-BlackItalic.ttf differ
diff --git a/src/fonts/Lato/Lato-Bold.ttf b/src/fonts/Lato/Lato-Bold.ttf
new file mode 100644
index 0000000..7434369
Binary files /dev/null and b/src/fonts/Lato/Lato-Bold.ttf differ
diff --git a/src/fonts/Lato/Lato-BoldItalic.ttf b/src/fonts/Lato/Lato-BoldItalic.ttf
new file mode 100644
index 0000000..684aacf
Binary files /dev/null and b/src/fonts/Lato/Lato-BoldItalic.ttf differ
diff --git a/src/fonts/Lato/Lato-Hairline.ttf b/src/fonts/Lato/Lato-Hairline.ttf
new file mode 100644
index 0000000..288be29
Binary files /dev/null and b/src/fonts/Lato/Lato-Hairline.ttf differ
diff --git a/src/fonts/Lato/Lato-HairlineItalic.ttf b/src/fonts/Lato/Lato-HairlineItalic.ttf
new file mode 100644
index 0000000..c2bfd33
Binary files /dev/null and b/src/fonts/Lato/Lato-HairlineItalic.ttf differ
diff --git a/src/fonts/Lato/Lato-Italic.ttf b/src/fonts/Lato/Lato-Italic.ttf
new file mode 100644
index 0000000..3d3b7a2
Binary files /dev/null and b/src/fonts/Lato/Lato-Italic.ttf differ
diff --git a/src/fonts/Lato/Lato-Light.ttf b/src/fonts/Lato/Lato-Light.ttf
new file mode 100644
index 0000000..a958067
Binary files /dev/null and b/src/fonts/Lato/Lato-Light.ttf differ
diff --git a/src/fonts/Lato/Lato-LightItalic.ttf b/src/fonts/Lato/Lato-LightItalic.ttf
new file mode 100644
index 0000000..5e45ad9
Binary files /dev/null and b/src/fonts/Lato/Lato-LightItalic.ttf differ
diff --git a/src/fonts/Lato/Lato-Regular.ttf b/src/fonts/Lato/Lato-Regular.ttf
new file mode 100644
index 0000000..04ea8ef
Binary files /dev/null and b/src/fonts/Lato/Lato-Regular.ttf differ
diff --git a/src/fonts/Lato/OFL.txt b/src/fonts/Lato/OFL.txt
new file mode 100644
index 0000000..98383e3
--- /dev/null
+++ b/src/fonts/Lato/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/fonts/OpenSans/OpenSans-Bold.ttf b/src/fonts/OpenSans/OpenSans-Bold.ttf
new file mode 100644
index 0000000..7b52945
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-Bold.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-BoldItalic.ttf b/src/fonts/OpenSans/OpenSans-BoldItalic.ttf
new file mode 100644
index 0000000..a670e14
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-BoldItalic.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-ExtraBold.ttf b/src/fonts/OpenSans/OpenSans-ExtraBold.ttf
new file mode 100644
index 0000000..3660681
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-ExtraBold.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf b/src/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..8c4c15d
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-Italic.ttf b/src/fonts/OpenSans/OpenSans-Italic.ttf
new file mode 100644
index 0000000..e6c5414
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-Italic.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-Light.ttf b/src/fonts/OpenSans/OpenSans-Light.ttf
new file mode 100644
index 0000000..563872c
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-Light.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-LightItalic.ttf b/src/fonts/OpenSans/OpenSans-LightItalic.ttf
new file mode 100644
index 0000000..5ebe2a2
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-LightItalic.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-Regular.otf b/src/fonts/OpenSans/OpenSans-Regular.otf
new file mode 100644
index 0000000..d84c97e
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-Regular.otf differ
diff --git a/src/fonts/OpenSans/OpenSans-Regular.ttf b/src/fonts/OpenSans/OpenSans-Regular.ttf
new file mode 100644
index 0000000..2e31d02
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-Regular.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-SemiBold.ttf b/src/fonts/OpenSans/OpenSans-SemiBold.ttf
new file mode 100644
index 0000000..99db86a
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-SemiBold.ttf differ
diff --git a/src/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf b/src/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf
new file mode 100644
index 0000000..8cad4e3
Binary files /dev/null and b/src/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Black.ttf b/src/fonts/montserrat/Montserrat-Black.ttf
new file mode 100644
index 0000000..f0d24ad
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Black.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-BlackItalic.ttf b/src/fonts/montserrat/Montserrat-BlackItalic.ttf
new file mode 100644
index 0000000..5ce4afc
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-BlackItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Bold.ttf b/src/fonts/montserrat/Montserrat-Bold.ttf
new file mode 100644
index 0000000..9a425b9
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Bold.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-BoldItalic.ttf b/src/fonts/montserrat/Montserrat-BoldItalic.ttf
new file mode 100644
index 0000000..ed61ca7
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-BoldItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-ExtraBold.ttf b/src/fonts/montserrat/Montserrat-ExtraBold.ttf
new file mode 100644
index 0000000..6725d53
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-ExtraBold.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-ExtraBoldItalic.ttf b/src/fonts/montserrat/Montserrat-ExtraBoldItalic.ttf
new file mode 100644
index 0000000..107f98d
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-ExtraBoldItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-ExtraLight.ttf b/src/fonts/montserrat/Montserrat-ExtraLight.ttf
new file mode 100644
index 0000000..2967eb6
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-ExtraLight.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-ExtraLightItalic.ttf b/src/fonts/montserrat/Montserrat-ExtraLightItalic.ttf
new file mode 100644
index 0000000..5d62085
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-ExtraLightItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Italic.ttf b/src/fonts/montserrat/Montserrat-Italic.ttf
new file mode 100644
index 0000000..00fadbe
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Italic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Light.ttf b/src/fonts/montserrat/Montserrat-Light.ttf
new file mode 100644
index 0000000..a3cf5f5
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Light.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-LightItalic.ttf b/src/fonts/montserrat/Montserrat-LightItalic.ttf
new file mode 100644
index 0000000..6dba219
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-LightItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Medium.ttf b/src/fonts/montserrat/Montserrat-Medium.ttf
new file mode 100644
index 0000000..db5b1af
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Medium.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-MediumItalic.ttf b/src/fonts/montserrat/Montserrat-MediumItalic.ttf
new file mode 100644
index 0000000..16dbf4c
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-MediumItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Regular.ttf b/src/fonts/montserrat/Montserrat-Regular.ttf
new file mode 100644
index 0000000..2a2b2aa
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Regular.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-SemiBold.ttf b/src/fonts/montserrat/Montserrat-SemiBold.ttf
new file mode 100644
index 0000000..0ecc667
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-SemiBold.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-SemiBoldItalic.ttf b/src/fonts/montserrat/Montserrat-SemiBoldItalic.ttf
new file mode 100644
index 0000000..39f2393
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-SemiBoldItalic.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-Thin.ttf b/src/fonts/montserrat/Montserrat-Thin.ttf
new file mode 100644
index 0000000..6a394e7
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-Thin.ttf differ
diff --git a/src/fonts/montserrat/Montserrat-ThinItalic.ttf b/src/fonts/montserrat/Montserrat-ThinItalic.ttf
new file mode 100644
index 0000000..8eeeaa4
Binary files /dev/null and b/src/fonts/montserrat/Montserrat-ThinItalic.ttf differ
diff --git a/src/fonts/montserrat/OFL.txt b/src/fonts/montserrat/OFL.txt
new file mode 100644
index 0000000..f435ed8
--- /dev/null
+++ b/src/fonts/montserrat/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/src/fonts/roboto/Roboto-Black.ttf b/src/fonts/roboto/Roboto-Black.ttf
new file mode 100644
index 0000000..689fe5c
Binary files /dev/null and b/src/fonts/roboto/Roboto-Black.ttf differ
diff --git a/src/fonts/roboto/Roboto-BlackItalic.ttf b/src/fonts/roboto/Roboto-BlackItalic.ttf
new file mode 100644
index 0000000..0b4e0ee
Binary files /dev/null and b/src/fonts/roboto/Roboto-BlackItalic.ttf differ
diff --git a/src/fonts/roboto/Roboto-Bold.ttf b/src/fonts/roboto/Roboto-Bold.ttf
new file mode 100644
index 0000000..d3f01ad
Binary files /dev/null and b/src/fonts/roboto/Roboto-Bold.ttf differ
diff --git a/src/fonts/roboto/Roboto-BoldItalic.ttf b/src/fonts/roboto/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..41cc1e7
Binary files /dev/null and b/src/fonts/roboto/Roboto-BoldItalic.ttf differ
diff --git a/src/fonts/roboto/Roboto-Italic.ttf b/src/fonts/roboto/Roboto-Italic.ttf
new file mode 100644
index 0000000..6a1cee5
Binary files /dev/null and b/src/fonts/roboto/Roboto-Italic.ttf differ
diff --git a/src/fonts/roboto/Roboto-Light.ttf b/src/fonts/roboto/Roboto-Light.ttf
new file mode 100644
index 0000000..219063a
Binary files /dev/null and b/src/fonts/roboto/Roboto-Light.ttf differ
diff --git a/src/fonts/roboto/Roboto-LightItalic.ttf b/src/fonts/roboto/Roboto-LightItalic.ttf
new file mode 100644
index 0000000..0e81e87
Binary files /dev/null and b/src/fonts/roboto/Roboto-LightItalic.ttf differ
diff --git a/src/fonts/roboto/Roboto-Medium.ttf b/src/fonts/roboto/Roboto-Medium.ttf
new file mode 100644
index 0000000..1a7f3b0
Binary files /dev/null and b/src/fonts/roboto/Roboto-Medium.ttf differ
diff --git a/src/fonts/roboto/Roboto-MediumItalic.ttf b/src/fonts/roboto/Roboto-MediumItalic.ttf
new file mode 100644
index 0000000..0030295
Binary files /dev/null and b/src/fonts/roboto/Roboto-MediumItalic.ttf differ
diff --git a/src/fonts/roboto/Roboto-Regular.ttf b/src/fonts/roboto/Roboto-Regular.ttf
new file mode 100644
index 0000000..2c97eea
Binary files /dev/null and b/src/fonts/roboto/Roboto-Regular.ttf differ
diff --git a/src/fonts/roboto/Roboto-Thin.ttf b/src/fonts/roboto/Roboto-Thin.ttf
new file mode 100644
index 0000000..b74a4fd
Binary files /dev/null and b/src/fonts/roboto/Roboto-Thin.ttf differ
diff --git a/src/fonts/roboto/Roboto-ThinItalic.ttf b/src/fonts/roboto/Roboto-ThinItalic.ttf
new file mode 100644
index 0000000..dd0ddb8
Binary files /dev/null and b/src/fonts/roboto/Roboto-ThinItalic.ttf differ
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..cacf708
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,450 @@
+<!doctype html>
+<html lang="en">
+<link>
+  <meta charset="utf-8">
+  <title></title>
+  <base href="/">
+  <style>
+/* Absolute Center Spinner */
+.loading {
+  position: sticky;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  bottom: 0;
+  right: 0; 
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: 14rem;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.pac-card {
+        margin: 10px 10px 0 0;
+        border-radius: 2px 0 0 2px;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        outline: none;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+        background-color: #fff;
+        font-family: Roboto;
+      }
+
+      #pac-container {
+        padding-bottom: 12px;
+        margin-right: 12px;
+      }
+
+      .pac-controls {
+        display: inline-block;
+        padding: 5px 11px;
+      }
+
+      .pac-controls label {
+        font-family: Roboto;
+        font-size: 13px;
+        font-weight: 300;
+      }
+
+      #pac-input {
+        background-color: #fff;
+        font-family: Roboto;
+        font-size: 15px;
+        font-weight: 300;
+        margin-left: 12px;
+        padding: 0 11px 0 13px;
+        text-overflow: ellipsis;
+        width: 400px;
+      }
+
+      #pac-input:focus {
+        border-color: #4d90fe;
+      }
+      .infoB{
+          font-size: 13px;
+          /* height: 187px; */
+          width: 320px;
+          border-radius: 2px;
+          background-color: white;
+          box-shadow: 3px 3px 5px rgb(75, 62, 62);
+          color: black;
+          padding: 0px;   
+      }
+
+      .infoB .DeviceHead{
+          /* background: #07b907; */
+          background: #426E86;
+          color: white;
+          padding: 8px;
+          text-align: center;
+          font-weight: 500;
+          letter-spacing: 1px;
+          font-size: 15px;
+          margin-bottom:0px
+      }
+
+      .infoB .DeviceHead1{
+          background: #1a1c1adb;
+          color: white;
+          padding: 8px;
+          text-align: center;
+          font-weight: 500;
+          letter-spacing: 1px;
+          font-size: 15px;
+          margin-bottom:0px
+      }
+
+     
+
+      .infoB .rowOne .leftPadding{
+        padding-left:30px
+      }
+
+      .infoB .rowTwo .leftPadding{
+        padding-left:30px
+      }
+
+     .infoB .rowOne{
+      padding: 6px;
+      background-color: #dedede;
+      margin-left: 0px;
+      width:100%
+     }
+
+     .infoB .rowTwo{
+      padding: 6px;
+      background-color: white;
+      margin-left: 0px;
+      width: 100%;
+
+    
+     }
+
+
+      .infoB:before {
+             
+        border-top-color: rgb(44, 32, 32);
+        border-width: 5.5px;
+        margin-top: -1.5px;
+        }
+        
+        .infoB:after, .infoB:before {
+        border: 10px solid transparent;
+        border-top-color: rgb(44, 32, 32);
+        position: absolute;
+        content: '';
+        top: 100%;
+        left: 9px;
+        }
+
+[hidden] { display: none !important;}
+</style>
+ <!--<link rel="stylesheet" href="https://bootswatch.com/journal/bootstrap.min.css">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+  -->
+   <link rel="icon" id= "appFavicon" type="image/x-icon" href="faviconn.ico">
+   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+   
+<!--   <script src='https://www.google.com/recaptcha/api.js'></script>
+ -->  
+<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
+<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
+ 
+<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
+
+ <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
+  <script src="https://apis.google.com/js/platform.js" async defer></script>
+  <!-- <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> -->
+  
+  <link rel="stylesheet" href="https://npmcdn.com/sweetalert2@4.0.15/dist/sweetalert2.min.css">
+  <script src="https://npmcdn.com/sweetalert2@4.0.15/dist/sweetalert2.min.js"></script>
+  
+  <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=yes" />
+ <!--  <script src="https://www.gstatic.com/charts/loader.js"></script -->
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
+  <!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> -->
+  <link rel ="stylesheet" href = "~ng-pick-datetime/assets/style/picker.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
+  <script src="https://oss.sheetjs.com/js-xlsx/shim.js"></script>
+  <!-- <script src="https://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.1/xlsx.full.min.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/shim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.2/xlsx.full.min.js"> </script> -->
+  <script src="https://www.gstatic.com/charts/loader.js"></script>
+  <!-- AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8 -->
+  <!-- old key AIzaSyDZKxpYMfGSyStS3fLuVqHuM6ZEJWtF1-k -->
+  <script  id= "mapApi" src="https://maps.google.com/maps/api/js?libraries=geometry,places,drawing&key=AIzaSyDNmQ3sok_q3O9JZ66cFJgzFfiJiDWESmY"></script>
+  <!-- AIzaSyA_ycttLXPMfCSSNAfPOsaENPQ85i17lPU latest key used on 2 november -->
+  <!-- AIzaSyCmSXnoBBGekErvqBvu5N7dbeqdH1pHp7c -->
+  <!-- AIzaSyDllmSphAf92Mk69v46HFCiClWibYehkiU -->
+  <!-- AIzaSyDZKxpYMfGSyStS3fLuVqHuM6ZEJWtF1-k -->  
+  <!-- AIzaSyCNT3eO1wPQHUhY_cmQ9N_9BkLzJ_GB9j8 -->
+  <!-- Main api key AIzaSyCW6oefVI_AtqfSnaBHb0Mjdjx4VO4ANaM -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css"> 
+  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script> 
+ 
+  <script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/css/intlTelInput.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.0/js/intlTelInput-jquery.min.js"></script>
+  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
+<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
+
+
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js"></script> -->
+  <!-- https://cdnjs.cloudflare.com/ajax/libs/jquery.perfect-scrollbar/1.5.0/perfect-scrollbar.min.js -->
+  <!-- =====================Digicon API key ======================================= -->
+  
+  
+  <!-- =========================Digicon API Key ============================================ -->
+  <!-- Config.json api ley  -->
+  <!-- // AIzaSyBLNw1Bop4CPvxZV9MmxgYc9pog2Pcx8nA -->
+<!--   <script type="text/javascript" src="moment.js"></script> -->
+
+<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Play:700,400' type='text/css'>
+<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.4/radial/gauge.min.js"></script>
+<!-- <script type="text/javascript" src="http://iop.io/js/vendor/d3.v3.min.js"></script>
+<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerEvents/pointerevents.js"></script>
+<script type="text/javascript" src="http://iop.io/js/vendor/polymer/PointerGestures/pointergestures.js"></script>
+<script type="text/javascript" src="http://iop.io/js/iopctrl.js"></script>
+ -->
+ <!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script> -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.0.10/jspdf.plugin.autotable.min.js"></script>
+ 
+ <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.16/jspdf.plugin.autotable.js"></script> -->
+    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
+    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js" integrity="sha512-UnrKxsCMN9hFk7M56t4I4ckB4N/2HHi0w/7+B/1JsXIX3DmyBcsGpT3/BsuZMZf+6mAr0vP81syWtfynHJ69JA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.1/qrcode.min.js"></script>
+  <!-- <link rel="stylesheet" href="multiple-select.min.css">
+  <script src="multiple-select.min.js"></script> -->
+<script src="/assets/js/infobox.js"></script>
+
+<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
+<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
+<!-- <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css"> -->
+<!-- <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script> -->
+<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.dataTables.min.css">
+<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+      integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
+
+
+
+<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css">
+
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" ></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
+
+<script  type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.foundation.min.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
+<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js"></script>
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
+
+<!-- <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/css/dataTables.checkboxes.css" rel="stylesheet" /> -->
+<!-- <script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.11/js/dataTables.checkboxes.min.js"></script> -->
+
+
+
+
+<!-- need to remove or keep after POC -->
+
+
+
+
+<!-- need to remove or keep after POC -->
+
+
+
+
+
+
+
+
+
+<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" ></script> -->
+<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.js"></script>
+<!-- <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/wenzhixin/multiple-select/e14b36de/multiple-select.css"> -->
+<!-- Include plugin -->
+
+<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.css">
+<script src="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js"></script>
+
+<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+<!-- <script src="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.js"></script> -->
+<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script> -->
+
+
+<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.1/css/mdb.min.css" rel="stylesheet"> -->
+<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script> -->
+
+<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.1/js/mdb.min.js"></script> -->
+
+
+<!-- <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"> </script> -->
+
+<!-- <script src="https://maps.googleapis.com/maps/api/js" async defer></script>
+ -->
+<!-- 
+<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
+
+
+<script src="/assets/js/markerAnimate.js"></script>
+
+
+<script src="/assets/js/SlidingMarker.min.js"></script>
+  -->
+ <style>
+ .mat-dialog-container {
+  box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
+  display: block;
+  padding: 24px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  overflow: auto;
+  max-width: 80vw;
+  outline: 0;
+  width: 100%;
+  height: auto !important;
+}
+
+</style>
+<!-- <script>
+  function show() {
+
+    alert("hfjdhfj");
+  }
+</script> -->
+<!-- <link rel="stylesheet" href="dist/multiple-select.min.css">
+<script src="/dist/multiple-select.min.js"></script> -->
+  </head>
+<body>
+  
+  <app-root>
+    <div class="loading" >Loading&#8230;</div>
+  </app-root>
+</body>
+</html>
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..a9ca1ca
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/markerclusterer.js b/src/markerclusterer.js
new file mode 100644
index 0000000..a0f02bb
--- /dev/null
+++ b/src/markerclusterer.js
@@ -0,0 +1,1318 @@
+// ==ClosureCompiler==
+// @compilation_level ADVANCED_OPTIMIZATIONS
+// @externs_url http://closure-compiler.googlecode.com/svn/trunk/contrib/externs/maps/google_maps_api_v3_3.js
+// ==/ClosureCompiler==
+
+/**
+ * @name MarkerClusterer for Google Maps v3
+ * @version version 1.0.1
+ * @author Luke Mahe
+ * @fileoverview
+ * The library creates and manages per-zoom-level clusters for large amounts of
+ * markers.
+ * <br/>
+ * This is a v3 implementation of the
+ * <a href="http://gmaps-utility-library-dev.googlecode.com/svn/tags/markerclusterer/"
+ * >v2 MarkerClusterer</a>.
+ */
+
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+/**
+ * A Marker Clusterer that clusters markers.
+ *
+ * @param {google.maps.Map} map The Google map to attach to.
+ * @param {Array.<google.maps.Marker>=} opt_markers Optional markers to add to
+ *   the cluster.
+ * @param {Object=} opt_options support the following options:
+ *     'gridSize': (number) The grid size of a cluster in pixels.
+ *     'maxZoom': (number) The maximum zoom level that a marker can be part of a
+ *                cluster.
+ *     'zoomOnClick': (boolean) Whether the default behaviour of clicking on a
+ *                    cluster is to zoom into it.
+ *     'imagePath': (string) The base URL where the images representing
+ *                  clusters will be found. The full URL will be:
+ *                  {imagePath}[1-5].{imageExtension}
+ *                  Default: '../images/m'.
+ *     'imageExtension': (string) The suffix for images URL representing
+ *                       clusters will be found. See _imagePath_ for details.
+ *                       Default: 'png'.
+ *     'averageCenter': (boolean) Whether the center of each cluster should be
+ *                      the average of all markers in the cluster.
+ *     'minimumClusterSize': (number) The minimum number of markers to be in a
+ *                           cluster before the markers are hidden and a count
+ *                           is shown.
+ *     'styles': (object) An object that has style properties:
+ *       'url': (string) The image url.
+ *       'height': (number) The image height.
+ *       'width': (number) The image width.
+ *       'anchor': (Array) The anchor position of the label text.
+ *       'textColor': (string) The text color.
+ *       'textSize': (number) The text size.
+ *       'backgroundPosition': (string) The position of the backgound x, y.
+ * @constructor
+ * @extends google.maps.OverlayView
+ */
+function MarkerClusterer(map, opt_markers, opt_options) {
+  // MarkerClusterer implements google.maps.OverlayView interface. We use the
+  // extend function to extend MarkerClusterer with google.maps.OverlayView
+  // because it might not always be available when the code is defined so we
+  // look for it at the last possible moment. If it doesn't exist now then
+  // there is no point going ahead :)
+  this.extend(MarkerClusterer, google.maps.OverlayView);
+  this.map_ = map;
+
+  /**
+   * @type {Array.<google.maps.Marker>}
+   * @private
+   */
+  this.markers_ = [];
+
+  /**
+   *  @type {Array.<Cluster>}
+   */
+  this.clusters_ = [];
+
+  this.sizes = [53, 56, 66, 78, 90];
+
+  /**
+   * @private
+   */
+  this.styles_ = [];
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.ready_ = false;
+
+  var options = opt_options || {};
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.gridSize_ = options['gridSize'] || 60;
+
+  /**
+   * @private
+   */
+  this.minClusterSize_ = options['minimumClusterSize'] || 2;
+
+
+  /**
+   * @type {?number}
+   * @private
+   */
+  this.maxZoom_ = options['maxZoom'] || null;
+
+  this.styles_ = options['styles'] || [];
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.imagePath_ = options['imagePath'] ||
+      this.MARKER_CLUSTER_IMAGE_PATH_;
+
+  /**
+   * @type {string}
+   * @private
+   */
+  this.imageExtension_ = options['imageExtension'] ||
+      this.MARKER_CLUSTER_IMAGE_EXTENSION_;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.zoomOnClick_ = true;
+
+  if (options['zoomOnClick'] != undefined) {
+    this.zoomOnClick_ = options['zoomOnClick'];
+  }
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  this.averageCenter_ = false;
+
+  if (options['averageCenter'] != undefined) {
+    this.averageCenter_ = options['averageCenter'];
+  }
+
+  this.setupStyles_();
+
+  this.setMap(map);
+
+  /**
+   * @type {number}
+   * @private
+   */
+  this.prevZoom_ = this.map_.getZoom();
+
+  // Add the map event listeners
+  var that = this;
+  google.maps.event.addListener(this.map_, 'zoom_changed', function() {
+    // Determines map type and prevent illegal zoom levels
+    var zoom = that.map_.getZoom();
+    var minZoom = that.map_.minZoom || 0;
+    var maxZoom = Math.min(that.map_.maxZoom || 100,
+                         that.map_.mapTypes[that.map_.getMapTypeId()].maxZoom);
+    zoom = Math.min(Math.max(zoom,minZoom),maxZoom);
+
+    if (that.prevZoom_ != zoom) {
+      that.prevZoom_ = zoom;
+      that.resetViewport();
+    }
+  });
+
+  google.maps.event.addListener(this.map_, 'idle', function() {
+    that.redraw();
+  });
+
+  // Finally, add the markers
+  if (opt_markers && (opt_markers.length || Object.keys(opt_markers).length)) {
+    this.addMarkers(opt_markers, false);
+  }
+}
+
+
+/**
+ * The marker cluster image path.
+ *
+ * @type {string}
+ * @private
+ */
+MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = '../images/m';
+
+
+/**
+ * The marker cluster image path.
+ *
+ * @type {string}
+ * @private
+ */
+MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_EXTENSION_ = 'png';
+
+
+/**
+ * Extends a objects prototype by anothers.
+ *
+ * @param {Object} obj1 The object to be extended.
+ * @param {Object} obj2 The object to extend with.
+ * @return {Object} The new extended object.
+ * @ignore
+ */
+MarkerClusterer.prototype.extend = function(obj1, obj2) {
+  return (function(object) {
+    for (var property in object.prototype) {
+      this.prototype[property] = object.prototype[property];
+    }
+    return this;
+  }).apply(obj1, [obj2]);
+};
+
+
+/**
+ * Implementaion of the interface method.
+ * @ignore
+ */
+MarkerClusterer.prototype.onAdd = function() {
+  this.setReady_(true);
+};
+
+/**
+ * Implementaion of the interface method.
+ * @ignore
+ */
+MarkerClusterer.prototype.draw = function() {};
+
+/**
+ * Sets up the styles object.
+ *
+ * @private
+ */
+MarkerClusterer.prototype.setupStyles_ = function() {
+  if (this.styles_.length) {
+    return;
+  }
+
+  for (var i = 0, size; size = this.sizes[i]; i++) {
+    this.styles_.push({
+      url: this.imagePath_ + (i + 1) + '.' + this.imageExtension_,
+      height: size,
+      width: size
+    });
+  }
+};
+
+/**
+ *  Fit the map to the bounds of the markers in the clusterer.
+ */
+MarkerClusterer.prototype.fitMapToMarkers = function() {
+  var markers = this.getMarkers();
+  var bounds = new google.maps.LatLngBounds();
+  for (var i = 0, marker; marker = markers[i]; i++) {
+    bounds.extend(marker.getPosition());
+  }
+
+  this.map_.fitBounds(bounds);
+};
+
+
+/**
+ *  Sets the styles.
+ *
+ *  @param {Object} styles The style to set.
+ */
+MarkerClusterer.prototype.setStyles = function(styles) {
+  this.styles_ = styles;
+};
+
+
+/**
+ *  Gets the styles.
+ *
+ *  @return {Object} The styles object.
+ */
+MarkerClusterer.prototype.getStyles = function() {
+  return this.styles_;
+};
+
+
+/**
+ * Whether zoom on click is set.
+ *
+ * @return {boolean} True if zoomOnClick_ is set.
+ */
+MarkerClusterer.prototype.isZoomOnClick = function() {
+  return this.zoomOnClick_;
+};
+
+/**
+ * Whether average center is set.
+ *
+ * @return {boolean} True if averageCenter_ is set.
+ */
+MarkerClusterer.prototype.isAverageCenter = function() {
+  return this.averageCenter_;
+};
+
+
+/**
+ *  Returns the array of markers in the clusterer.
+ *
+ *  @return {Array.<google.maps.Marker>} The markers.
+ */
+MarkerClusterer.prototype.getMarkers = function() {
+  return this.markers_;
+};
+
+
+/**
+ *  Returns the number of markers in the clusterer
+ *
+ *  @return {Number} The number of markers.
+ */
+MarkerClusterer.prototype.getTotalMarkers = function() {
+  return this.markers_.length;
+};
+
+
+/**
+ *  Sets the max zoom for the clusterer.
+ *
+ *  @param {number} maxZoom The max zoom level.
+ */
+MarkerClusterer.prototype.setMaxZoom = function(maxZoom) {
+  this.maxZoom_ = maxZoom;
+};
+
+
+/**
+ *  Gets the max zoom for the clusterer.
+ *
+ *  @return {number} The max zoom level.
+ */
+MarkerClusterer.prototype.getMaxZoom = function() {
+  return this.maxZoom_;
+};
+
+
+/**
+ *  The function for calculating the cluster icon image.
+ *
+ *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
+ *  @param {number} numStyles The number of styles available.
+ *  @return {Object} A object properties: 'text' (string) and 'index' (number).
+ *  @private
+ */
+MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
+  var index = 0;
+  var count = markers.length;
+  var dv = count;
+  while (dv !== 0) {
+    dv = parseInt(dv / 10, 10);
+    index++;
+  }
+
+  index = Math.min(index, numStyles);
+  return {
+    text: count,
+    index: index
+  };
+};
+
+
+/**
+ * Set the calculator function.
+ *
+ * @param {function(Array, number)} calculator The function to set as the
+ *     calculator. The function should return a object properties:
+ *     'text' (string) and 'index' (number).
+ *
+ */
+MarkerClusterer.prototype.setCalculator = function(calculator) {
+  this.calculator_ = calculator;
+};
+
+
+/**
+ * Get the calculator function.
+ *
+ * @return {function(Array, number)} the calculator function.
+ */
+MarkerClusterer.prototype.getCalculator = function() {
+  return this.calculator_;
+};
+
+
+/**
+ * Add an array of markers to the clusterer.
+ *
+ * @param {Array.<google.maps.Marker>} markers The markers to add.
+ * @param {boolean=} opt_nodraw Whether to redraw the clusters.
+ */
+MarkerClusterer.prototype.addMarkers = function(markers, opt_nodraw) {
+  if (markers.length) {
+    for (var i = 0, marker; marker = markers[i]; i++) {
+      this.pushMarkerTo_(marker);
+    }
+  } else if (Object.keys(markers).length) {
+    for (var marker in markers) {
+      this.pushMarkerTo_(markers[marker]);
+    }
+  }
+  if (!opt_nodraw) {
+    this.redraw();
+  }
+};
+
+
+/**
+ * Pushes a marker to the clusterer.
+ *
+ * @param {google.maps.Marker} marker The marker to add.
+ * @private
+ */
+MarkerClusterer.prototype.pushMarkerTo_ = function(marker) {
+  marker.isAdded = false;
+  if (marker['draggable']) {
+    // If the marker is draggable add a listener so we update the clusters on
+    // the drag end.
+    var that = this;
+    google.maps.event.addListener(marker, 'dragend', function() {
+      marker.isAdded = false;
+      that.repaint();
+    });
+  }
+  this.markers_.push(marker);
+};
+
+
+/**
+ * Adds a marker to the clusterer and redraws if needed.
+ *
+ * @param {google.maps.Marker} marker The marker to add.
+ * @param {boolean=} opt_nodraw Whether to redraw the clusters.
+ */
+MarkerClusterer.prototype.addMarker = function(marker, opt_nodraw) {
+  this.pushMarkerTo_(marker);
+  if (!opt_nodraw) {
+    this.redraw();
+  }
+};
+
+
+/**
+ * Removes a marker and returns true if removed, false if not
+ *
+ * @param {google.maps.Marker} marker The marker to remove
+ * @return {boolean} Whether the marker was removed or not
+ * @private
+ */
+MarkerClusterer.prototype.removeMarker_ = function(marker) {
+  var index = -1;
+  if (this.markers_.indexOf) {
+    index = this.markers_.indexOf(marker);
+  } else {
+    for (var i = 0, m; m = this.markers_[i]; i++) {
+      if (m == marker) {
+        index = i;
+        break;
+      }
+    }
+  }
+
+  if (index == -1) {
+    // Marker is not in our list of markers.
+    return false;
+  }
+
+  marker.setMap(null);
+
+  this.markers_.splice(index, 1);
+
+  return true;
+};
+
+
+/**
+ * Remove a marker from the cluster.
+ *
+ * @param {google.maps.Marker} marker The marker to remove.
+ * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
+ * @return {boolean} True if the marker was removed.
+ */
+MarkerClusterer.prototype.removeMarker = function(marker, opt_nodraw) {
+  var removed = this.removeMarker_(marker);
+
+  if (!opt_nodraw && removed) {
+    this.resetViewport();
+    this.redraw();
+    return true;
+  } else {
+   return false;
+  }
+};
+
+
+/**
+ * Removes an array of markers from the cluster.
+ *
+ * @param {Array.<google.maps.Marker>} markers The markers to remove.
+ * @param {boolean=} opt_nodraw Optional boolean to force no redraw.
+ */
+MarkerClusterer.prototype.removeMarkers = function(markers, opt_nodraw) {
+  // create a local copy of markers if required
+  // (removeMarker_ modifies the getMarkers() array in place)
+  var markersCopy = markers === this.getMarkers() ? markers.slice() : markers;
+  var removed = false;
+
+  for (var i = 0, marker; marker = markersCopy[i]; i++) {
+    var r = this.removeMarker_(marker);
+    removed = removed || r;
+  }
+
+  if (!opt_nodraw && removed) {
+    this.resetViewport();
+    this.redraw();
+    return true;
+  }
+};
+
+
+/**
+ * Sets the clusterer's ready state.
+ *
+ * @param {boolean} ready The state.
+ * @private
+ */
+MarkerClusterer.prototype.setReady_ = function(ready) {
+  if (!this.ready_) {
+    this.ready_ = ready;
+    this.createClusters_();
+  }
+};
+
+
+/**
+ * Returns the number of clusters in the clusterer.
+ *
+ * @return {number} The number of clusters.
+ */
+MarkerClusterer.prototype.getTotalClusters = function() {
+  return this.clusters_.length;
+};
+
+
+/**
+ * Returns the google map that the clusterer is associated with.
+ *
+ * @return {google.maps.Map} The map.
+ */
+MarkerClusterer.prototype.getMap = function() {
+  return this.map_;
+};
+
+
+/**
+ * Sets the google map that the clusterer is associated with.
+ *
+ * @param {google.maps.Map} map The map.
+ */
+MarkerClusterer.prototype.setMap = function(map) {
+  this.map_ = map;
+};
+
+
+/**
+ * Returns the size of the grid.
+ *
+ * @return {number} The grid size.
+ */
+MarkerClusterer.prototype.getGridSize = function() {
+  return this.gridSize_;
+};
+
+
+/**
+ * Sets the size of the grid.
+ *
+ * @param {number} size The grid size.
+ */
+MarkerClusterer.prototype.setGridSize = function(size) {
+  this.gridSize_ = size;
+};
+
+
+/**
+ * Returns the min cluster size.
+ *
+ * @return {number} The grid size.
+ */
+MarkerClusterer.prototype.getMinClusterSize = function() {
+  return this.minClusterSize_;
+};
+
+/**
+ * Sets the min cluster size.
+ *
+ * @param {number} size The grid size.
+ */
+MarkerClusterer.prototype.setMinClusterSize = function(size) {
+  this.minClusterSize_ = size;
+};
+
+
+/**
+ * Extends a bounds object by the grid size.
+ *
+ * @param {google.maps.LatLngBounds} bounds The bounds to extend.
+ * @return {google.maps.LatLngBounds} The extended bounds.
+ */
+MarkerClusterer.prototype.getExtendedBounds = function(bounds) {
+  var projection = this.getProjection();
+
+  // Turn the bounds into latlng.
+  var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
+      bounds.getNorthEast().lng());
+  var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
+      bounds.getSouthWest().lng());
+
+  // Convert the points to pixels and the extend out by the grid size.
+  var trPix = projection.fromLatLngToDivPixel(tr);
+  trPix.x += this.gridSize_;
+  trPix.y -= this.gridSize_;
+
+  var blPix = projection.fromLatLngToDivPixel(bl);
+  blPix.x -= this.gridSize_;
+  blPix.y += this.gridSize_;
+
+  // Convert the pixel points back to LatLng
+  var ne = projection.fromDivPixelToLatLng(trPix);
+  var sw = projection.fromDivPixelToLatLng(blPix);
+
+  // Extend the bounds to contain the new bounds.
+  bounds.extend(ne);
+  bounds.extend(sw);
+
+  return bounds;
+};
+
+
+/**
+ * Determins if a marker is contained in a bounds.
+ *
+ * @param {google.maps.Marker} marker The marker to check.
+ * @param {google.maps.LatLngBounds} bounds The bounds to check against.
+ * @return {boolean} True if the marker is in the bounds.
+ * @private
+ */
+MarkerClusterer.prototype.isMarkerInBounds_ = function(marker, bounds) {
+  return bounds.contains(marker.getPosition());
+};
+
+
+/**
+ * Clears all clusters and markers from the clusterer.
+ */
+MarkerClusterer.prototype.clearMarkers = function() {
+  this.resetViewport(true);
+
+  // Set the markers a empty array.
+  this.markers_ = [];
+};
+
+
+/**
+ * Clears all existing clusters and recreates them.
+ * @param {boolean} opt_hide To also hide the marker.
+ */
+MarkerClusterer.prototype.resetViewport = function(opt_hide) {
+  // Remove all the clusters
+  for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
+    cluster.remove();
+  }
+
+  // Reset the markers to not be added and to be invisible.
+  for (var i = 0, marker; marker = this.markers_[i]; i++) {
+    marker.isAdded = false;
+    if (opt_hide) {
+      marker.setMap(null);
+    }
+  }
+
+  this.clusters_ = [];
+};
+
+/**
+ *
+ */
+MarkerClusterer.prototype.repaint = function() {
+  var oldClusters = this.clusters_.slice();
+  this.clusters_.length = 0;
+  this.resetViewport();
+  this.redraw();
+
+  // Remove the old clusters.
+  // Do it in a timeout so the other clusters have been drawn first.
+  window.setTimeout(function() {
+    for (var i = 0, cluster; cluster = oldClusters[i]; i++) {
+      cluster.remove();
+    }
+  }, 0);
+};
+
+
+/**
+ * Redraws the clusters.
+ */
+MarkerClusterer.prototype.redraw = function() {
+  this.createClusters_();
+};
+
+
+/**
+ * Calculates the distance between two latlng locations in km.
+ * @see http://www.movable-type.co.uk/scripts/latlong.html
+ *
+ * @param {google.maps.LatLng} p1 The first lat lng point.
+ * @param {google.maps.LatLng} p2 The second lat lng point.
+ * @return {number} The distance between the two points in km.
+ * @private
+*/
+MarkerClusterer.prototype.distanceBetweenPoints_ = function(p1, p2) {
+  if (!p1 || !p2) {
+    return 0;
+  }
+
+  var R = 6371; // Radius of the Earth in km
+  var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
+  var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
+  var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+    Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
+    Math.sin(dLon / 2) * Math.sin(dLon / 2);
+  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+  var d = R * c;
+  return d;
+};
+
+
+/**
+ * Add a marker to a cluster, or creates a new cluster.
+ *
+ * @param {google.maps.Marker} marker The marker to add.
+ * @private
+ */
+MarkerClusterer.prototype.addToClosestCluster_ = function(marker) {
+  var distance = 40000; // Some large number
+  var clusterToAddTo = null;
+  var pos = marker.getPosition();
+  for (var i = 0, cluster; cluster = this.clusters_[i]; i++) {
+    var center = cluster.getCenter();
+    if (center) {
+      var d = this.distanceBetweenPoints_(center, marker.getPosition());
+      if (d < distance) {
+        distance = d;
+        clusterToAddTo = cluster;
+      }
+    }
+  }
+
+  if (clusterToAddTo && clusterToAddTo.isMarkerInClusterBounds(marker)) {
+    clusterToAddTo.addMarker(marker);
+  } else {
+    var cluster = new Cluster(this);
+    cluster.addMarker(marker);
+    this.clusters_.push(cluster);
+  }
+};
+
+
+/**
+ * Creates the clusters.
+ *
+ * @private
+ */
+MarkerClusterer.prototype.createClusters_ = function() {
+  if (!this.ready_) {
+    return;
+  }
+
+  // Get our current map view bounds.
+  // Create a new bounds object so we don't affect the map.
+  var mapBounds = new google.maps.LatLngBounds(this.map_.getBounds().getSouthWest(),
+      this.map_.getBounds().getNorthEast());
+  var bounds = this.getExtendedBounds(mapBounds);
+
+  for (var i = 0, marker; marker = this.markers_[i]; i++) {
+    if (!marker.isAdded && this.isMarkerInBounds_(marker, bounds)) {
+      this.addToClosestCluster_(marker);
+    }
+  }
+};
+
+
+/**
+ * A cluster that contains markers.
+ *
+ * @param {MarkerClusterer} markerClusterer The markerclusterer that this
+ *     cluster is associated with.
+ * @constructor
+ * @ignore
+ */
+function Cluster(markerClusterer) {
+  this.markerClusterer_ = markerClusterer;
+  this.map_ = markerClusterer.getMap();
+  this.gridSize_ = markerClusterer.getGridSize();
+  this.minClusterSize_ = markerClusterer.getMinClusterSize();
+  this.averageCenter_ = markerClusterer.isAverageCenter();
+  this.center_ = null;
+  this.markers_ = [];
+  this.bounds_ = null;
+  this.clusterIcon_ = new ClusterIcon(this, markerClusterer.getStyles(),
+      markerClusterer.getGridSize());
+}
+
+/**
+ * Determins if a marker is already added to the cluster.
+ *
+ * @param {google.maps.Marker} marker The marker to check.
+ * @return {boolean} True if the marker is already added.
+ */
+Cluster.prototype.isMarkerAlreadyAdded = function(marker) {
+  if (this.markers_.indexOf) {
+    return this.markers_.indexOf(marker) != -1;
+  } else {
+    for (var i = 0, m; m = this.markers_[i]; i++) {
+      if (m == marker) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+
+
+/**
+ * Add a marker the cluster.
+ *
+ * @param {google.maps.Marker} marker The marker to add.
+ * @return {boolean} True if the marker was added.
+ */
+Cluster.prototype.addMarker = function(marker) {
+  if (this.isMarkerAlreadyAdded(marker)) {
+    return false;
+  }
+
+  if (!this.center_) {
+    this.center_ = marker.getPosition();
+    this.calculateBounds_();
+  } else {
+    if (this.averageCenter_) {
+      var l = this.markers_.length + 1;
+      var lat = (this.center_.lat() * (l-1) + marker.getPosition().lat()) / l;
+      var lng = (this.center_.lng() * (l-1) + marker.getPosition().lng()) / l;
+      this.center_ = new google.maps.LatLng(lat, lng);
+      this.calculateBounds_();
+    }
+  }
+
+  marker.isAdded = true;
+  this.markers_.push(marker);
+
+  var len = this.markers_.length;
+  if (len < this.minClusterSize_ && marker.getMap() != this.map_) {
+    // Min cluster size not reached so show the marker.
+    marker.setMap(this.map_);
+  }
+
+  if (len == this.minClusterSize_) {
+    // Hide the markers that were showing.
+    for (var i = 0; i < len; i++) {
+      this.markers_[i].setMap(null);
+    }
+  }
+
+  if (len >= this.minClusterSize_) {
+    marker.setMap(null);
+  }
+
+  this.updateIcon();
+  return true;
+};
+
+
+/**
+ * Returns the marker clusterer that the cluster is associated with.
+ *
+ * @return {MarkerClusterer} The associated marker clusterer.
+ */
+Cluster.prototype.getMarkerClusterer = function() {
+  return this.markerClusterer_;
+};
+
+
+/**
+ * Returns the bounds of the cluster.
+ *
+ * @return {google.maps.LatLngBounds} the cluster bounds.
+ */
+Cluster.prototype.getBounds = function() {
+  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
+  var markers = this.getMarkers();
+  for (var i = 0, marker; marker = markers[i]; i++) {
+    bounds.extend(marker.getPosition());
+  }
+  return bounds;
+};
+
+
+/**
+ * Removes the cluster
+ */
+Cluster.prototype.remove = function() {
+  this.clusterIcon_.remove();
+  this.markers_.length = 0;
+  delete this.markers_;
+};
+
+
+/**
+ * Returns the number of markers in the cluster.
+ *
+ * @return {number} The number of markers in the cluster.
+ */
+Cluster.prototype.getSize = function() {
+  return this.markers_.length;
+};
+
+
+/**
+ * Returns a list of the markers in the cluster.
+ *
+ * @return {Array.<google.maps.Marker>} The markers in the cluster.
+ */
+Cluster.prototype.getMarkers = function() {
+  return this.markers_;
+};
+
+
+/**
+ * Returns the center of the cluster.
+ *
+ * @return {google.maps.LatLng} The cluster center.
+ */
+Cluster.prototype.getCenter = function() {
+  return this.center_;
+};
+
+
+/**
+ * Calculated the extended bounds of the cluster with the grid.
+ *
+ * @private
+ */
+Cluster.prototype.calculateBounds_ = function() {
+  var bounds = new google.maps.LatLngBounds(this.center_, this.center_);
+  this.bounds_ = this.markerClusterer_.getExtendedBounds(bounds);
+};
+
+
+/**
+ * Determines if a marker lies in the clusters bounds.
+ *
+ * @param {google.maps.Marker} marker The marker to check.
+ * @return {boolean} True if the marker lies in the bounds.
+ */
+Cluster.prototype.isMarkerInClusterBounds = function(marker) {
+  return this.bounds_.contains(marker.getPosition());
+};
+
+
+/**
+ * Returns the map that the cluster is associated with.
+ *
+ * @return {google.maps.Map} The map.
+ */
+Cluster.prototype.getMap = function() {
+  return this.map_;
+};
+
+
+/**
+ * Updates the cluster icon
+ */
+Cluster.prototype.updateIcon = function() {
+  var zoom = this.map_.getZoom();
+  var mz = this.markerClusterer_.getMaxZoom();
+
+  if (mz && zoom > mz) {
+    // The zoom is greater than our max zoom so show all the markers in cluster.
+    for (var i = 0, marker; marker = this.markers_[i]; i++) {
+      marker.setMap(this.map_);
+    }
+    return;
+  }
+
+  if (this.markers_.length < this.minClusterSize_) {
+    // Min cluster size not yet reached.
+    this.clusterIcon_.hide();
+    return;
+  }
+
+  var numStyles = this.markerClusterer_.getStyles().length;
+  var sums = this.markerClusterer_.getCalculator()(this.markers_, numStyles);
+  this.clusterIcon_.setCenter(this.center_);
+  this.clusterIcon_.setSums(sums);
+  this.clusterIcon_.show();
+};
+
+
+/**
+ * A cluster icon
+ *
+ * @param {Cluster} cluster The cluster to be associated with.
+ * @param {Object} styles An object that has style properties:
+ *     'url': (string) The image url.
+ *     'height': (number) The image height.
+ *     'width': (number) The image width.
+ *     'anchor': (Array) The anchor position of the label text.
+ *     'textColor': (string) The text color.
+ *     'textSize': (number) The text size.
+ *     'backgroundPosition: (string) The background postition x, y.
+ * @param {number=} opt_padding Optional padding to apply to the cluster icon.
+ * @constructor
+ * @extends google.maps.OverlayView
+ * @ignore
+ */
+function ClusterIcon(cluster, styles, opt_padding) {
+  cluster.getMarkerClusterer().extend(ClusterIcon, google.maps.OverlayView);
+
+  this.styles_ = styles;
+  this.padding_ = opt_padding || 0;
+  this.cluster_ = cluster;
+  this.center_ = null;
+  this.map_ = cluster.getMap();
+  this.div_ = null;
+  this.sums_ = null;
+  this.visible_ = false;
+
+  this.setMap(this.map_);
+}
+
+
+/**
+ * Triggers the clusterclick event and zoom's if the option is set.
+ */
+ClusterIcon.prototype.triggerClusterClick = function() {
+  var markerClusterer = this.cluster_.getMarkerClusterer();
+
+  // Trigger the clusterclick event.
+  google.maps.event.trigger(markerClusterer.map_, 'clusterclick', this.cluster_);
+
+  if (markerClusterer.isZoomOnClick()) {
+    // Zoom into the cluster.
+    this.map_.fitBounds(this.cluster_.getBounds());
+  }
+};
+
+
+/**
+ * Adding the cluster icon to the dom.
+ * @ignore
+ */
+ClusterIcon.prototype.onAdd = function() {
+  this.div_ = document.createElement('DIV');
+  if (this.visible_) {
+    var pos = this.getPosFromLatLng_(this.center_);
+    this.div_.style.cssText = this.createCss(pos);
+    this.div_.innerHTML = this.sums_.text;
+  }
+
+  var panes = this.getPanes();
+  panes.overlayMouseTarget.appendChild(this.div_);
+
+  var that = this;
+  google.maps.event.addDomListener(this.div_, 'click', function() {
+    that.triggerClusterClick();
+  });
+};
+
+
+/**
+ * Returns the position to place the div dending on the latlng.
+ *
+ * @param {google.maps.LatLng} latlng The position in latlng.
+ * @return {google.maps.Point} The position in pixels.
+ * @private
+ */
+ClusterIcon.prototype.getPosFromLatLng_ = function(latlng) {
+  var pos = this.getProjection().fromLatLngToDivPixel(latlng);
+  pos.x -= parseInt(this.width_ / 2, 10);
+  pos.y -= parseInt(this.height_ / 2, 10);
+  return pos;
+};
+
+
+/**
+ * Draw the icon.
+ * @ignore
+ */
+ClusterIcon.prototype.draw = function() {
+  if (this.visible_) {
+    var pos = this.getPosFromLatLng_(this.center_);
+    this.div_.style.top = pos.y + 'px';
+    this.div_.style.left = pos.x + 'px';
+  }
+};
+
+
+/**
+ * Hide the icon.
+ */
+ClusterIcon.prototype.hide = function() {
+  if (this.div_) {
+    this.div_.style.display = 'none';
+  }
+  this.visible_ = false;
+};
+
+
+/**
+ * Position and show the icon.
+ */
+ClusterIcon.prototype.show = function() {
+  if (this.div_) {
+    var pos = this.getPosFromLatLng_(this.center_);
+    this.div_.style.cssText = this.createCss(pos);
+    this.div_.style.display = '';
+  }
+  this.visible_ = true;
+};
+
+
+/**
+ * Remove the icon from the map
+ */
+ClusterIcon.prototype.remove = function() {
+  this.setMap(null);
+};
+
+
+/**
+ * Implementation of the onRemove interface.
+ * @ignore
+ */
+ClusterIcon.prototype.onRemove = function() {
+  if (this.div_ && this.div_.parentNode) {
+    this.hide();
+    this.div_.parentNode.removeChild(this.div_);
+    this.div_ = null;
+  }
+};
+
+
+/**
+ * Set the sums of the icon.
+ *
+ * @param {Object} sums The sums containing:
+ *   'text': (string) The text to display in the icon.
+ *   'index': (number) The style index of the icon.
+ */
+ClusterIcon.prototype.setSums = function(sums) {
+  this.sums_ = sums;
+  this.text_ = sums.text;
+  this.index_ = sums.index;
+  if (this.div_) {
+    this.div_.innerHTML = sums.text;
+  }
+
+  this.useStyle();
+};
+
+
+/**
+ * Sets the icon to the the styles.
+ */
+ClusterIcon.prototype.useStyle = function() {
+  var index = Math.max(0, this.sums_.index - 1);
+  index = Math.min(this.styles_.length - 1, index);
+  var style = this.styles_[index];
+  this.url_ = style['url'];
+  this.height_ = style['height'];
+  this.width_ = style['width'];
+  this.textColor_ = style['textColor'];
+  this.anchor_ = style['anchor'];
+  this.textSize_ = style['textSize'];
+  this.backgroundPosition_ = style['backgroundPosition'];
+};
+
+
+/**
+ * Sets the center of the icon.
+ *
+ * @param {google.maps.LatLng} center The latlng to set as the center.
+ */
+ClusterIcon.prototype.setCenter = function(center) {
+  this.center_ = center;
+};
+
+
+/**
+ * Create the css text based on the position of the icon.
+ *
+ * @param {google.maps.Point} pos The position.
+ * @return {string} The css style text.
+ */
+ClusterIcon.prototype.createCss = function(pos) {
+  var style = [];
+  style.push('background-image:url(' + this.url_ + ');');
+  var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
+  style.push('background-position:' + backgroundPosition + ';');
+
+  if (typeof this.anchor_ === 'object') {
+    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
+        this.anchor_[0] < this.height_) {
+      style.push('height:' + (this.height_ - this.anchor_[0]) +
+          'px; padding-top:' + this.anchor_[0] + 'px;');
+    } else {
+      style.push('height:' + this.height_ + 'px; line-height:' + this.height_ +
+          'px;');
+    }
+    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
+        this.anchor_[1] < this.width_) {
+      style.push('width:' + (this.width_ - this.anchor_[1]) +
+          'px; padding-left:' + this.anchor_[1] + 'px;');
+    } else {
+      style.push('width:' + this.width_ + 'px; text-align:center;');
+    }
+  } else {
+    style.push('height:' + this.height_ + 'px; line-height:' +
+        this.height_ + 'px; width:' + this.width_ + 'px; text-align:center;');
+  }
+
+  var txtColor = this.textColor_ ? this.textColor_ : 'black';
+  var txtSize = this.textSize_ ? this.textSize_ : 11;
+
+  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
+      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
+      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');
+  return style.join('');
+};
+
+
+// Export Symbols for Closure
+// If you are not going to compile with closure then you can remove the
+// code below.
+window['MarkerClusterer'] = MarkerClusterer;
+MarkerClusterer.prototype['addMarker'] = MarkerClusterer.prototype.addMarker;
+MarkerClusterer.prototype['addMarkers'] = MarkerClusterer.prototype.addMarkers;
+MarkerClusterer.prototype['clearMarkers'] =
+    MarkerClusterer.prototype.clearMarkers;
+MarkerClusterer.prototype['fitMapToMarkers'] =
+    MarkerClusterer.prototype.fitMapToMarkers;
+MarkerClusterer.prototype['getCalculator'] =
+    MarkerClusterer.prototype.getCalculator;
+MarkerClusterer.prototype['getGridSize'] =
+    MarkerClusterer.prototype.getGridSize;
+MarkerClusterer.prototype['getExtendedBounds'] =
+    MarkerClusterer.prototype.getExtendedBounds;
+MarkerClusterer.prototype['getMap'] = MarkerClusterer.prototype.getMap;
+MarkerClusterer.prototype['getMarkers'] = MarkerClusterer.prototype.getMarkers;
+MarkerClusterer.prototype['getMaxZoom'] = MarkerClusterer.prototype.getMaxZoom;
+MarkerClusterer.prototype['getStyles'] = MarkerClusterer.prototype.getStyles;
+MarkerClusterer.prototype['getTotalClusters'] =
+    MarkerClusterer.prototype.getTotalClusters;
+MarkerClusterer.prototype['getTotalMarkers'] =
+    MarkerClusterer.prototype.getTotalMarkers;
+MarkerClusterer.prototype['redraw'] = MarkerClusterer.prototype.redraw;
+MarkerClusterer.prototype['removeMarker'] =
+    MarkerClusterer.prototype.removeMarker;
+MarkerClusterer.prototype['removeMarkers'] =
+    MarkerClusterer.prototype.removeMarkers;
+MarkerClusterer.prototype['resetViewport'] =
+    MarkerClusterer.prototype.resetViewport;
+MarkerClusterer.prototype['repaint'] =
+    MarkerClusterer.prototype.repaint;
+MarkerClusterer.prototype['setCalculator'] =
+    MarkerClusterer.prototype.setCalculator;
+MarkerClusterer.prototype['setGridSize'] =
+    MarkerClusterer.prototype.setGridSize;
+MarkerClusterer.prototype['setMaxZoom'] =
+    MarkerClusterer.prototype.setMaxZoom;
+MarkerClusterer.prototype['onAdd'] = MarkerClusterer.prototype.onAdd;
+MarkerClusterer.prototype['draw'] = MarkerClusterer.prototype.draw;
+
+Cluster.prototype['getCenter'] = Cluster.prototype.getCenter;
+Cluster.prototype['getSize'] = Cluster.prototype.getSize;
+Cluster.prototype['getMarkers'] = Cluster.prototype.getMarkers;
+
+ClusterIcon.prototype['onAdd'] = ClusterIcon.prototype.onAdd;
+ClusterIcon.prototype['draw'] = ClusterIcon.prototype.draw;
+ClusterIcon.prototype['onRemove'] = ClusterIcon.prototype.onRemove;
+
+Object.keys = Object.keys || function(o) {  
+    var result = [];  
+    for(var name in o) {  
+        if (o.hasOwnProperty(name))  
+          result.push(name);  
+    }  
+    return result;  
+};
\ No newline at end of file
diff --git a/src/multiple-select-master.zip b/src/multiple-select-master.zip
new file mode 100644
index 0000000..031e347
Binary files /dev/null and b/src/multiple-select-master.zip differ
diff --git a/src/polyfills.ts b/src/polyfills.ts
new file mode 100644
index 0000000..7831e97
--- /dev/null
+++ b/src/polyfills.ts
@@ -0,0 +1,72 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..b373c29
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,43 @@
+/* You can add global styles to this file, and also import other style files */
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+body {
+  margin: 0;
+  font-family: Roboto, sans-serif;
+}
+
+md-card {
+  max-width: 80%;
+  margin: 2em auto;
+  text-align: center;
+}
+
+md-toolbar-row {
+  justify-content: space-between;
+}
+
+.done {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  color: white;
+}
+
+.img-30 {
+  width: 30px;
+}
+
+.expansion-panel__content {
+  margin-left: 0% !important;
+}
+
+.custom-dialog-container .mat-dialog-container {
+  /* add your styles */
+  background: #202f46f7;
+}
+.mat-tab-body-content {
+  overflow: hidden !important;
+}
+.mat-tab-body.mat-tab-body-active {
+  overflow-y: hidden !important;
+}
diff --git a/src/test.html b/src/test.html
new file mode 100644
index 0000000..8a17b11
--- /dev/null
+++ b/src/test.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+<title>fSelect Test</title>
+<link href="fSelect.css" rel="stylesheet">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script src="fSelect.js"></script>
+<script>
+(function($) {
+    $(function() {
+        $('.test').fSelect();
+    });
+})(jQuery);
+</script>
+</head>
+<body>
+    <select class="test" multiple="multiple">
+        <optgroup label="Group A">
+            <option value="1">Option 1</option>
+            <option value="2" selected>Option 2</option>
+            <option value="3">Option 3</option>
+            <option value="4" disabled>Manège</option>
+            <option value="5">Bête</option>
+        </optgroup>
+        <optgroup label="Group B">
+            <option value="6" selected>Option 6</option>
+            <option value="7">Option 7</option>
+            <option value="8">Option 8</option>
+            <option value="9">Mécanique</option>
+        </optgroup>
+    </select>
+</body>
+</html>
diff --git a/src/test.ts b/src/test.ts
new file mode 100644
index 0000000..cd612ee
--- /dev/null
+++ b/src/test.ts
@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare const __karma__: any;
+declare const require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();
diff --git a/src/tools/example.tpl b/src/tools/example.tpl
new file mode 100644
index 0000000..0a62f9c
--- /dev/null
+++ b/src/tools/example.tpl
@@ -0,0 +1,35 @@
+<script>
+  init({
+    title: '@title@',
+    desc: '@desc@',
+    links: ['multiple-select.css'],
+    scripts: ['multiple-select.js']
+  })
+</script>
+
+<style>
+select {
+  width: 500px;
+}
+</style>
+
+<select multiple="multiple">
+  <option value="1">January</option>
+  <option value="2">February</option>
+  <option value="3">March</option>
+  <option value="4">April</option>
+  <option value="5">May</option>
+  <option value="6">June</option>
+  <option value="7">July</option>
+  <option value="8">August</option>
+  <option value="9">September</option>
+  <option value="10">October</option>
+  <option value="11">November</option>
+  <option value="12">December</option>
+</select>
+
+<script>
+  function mounted() {
+    $('select').multipleSelect()
+  }
+</script>
diff --git a/src/tools/template.js b/src/tools/template.js
new file mode 100644
index 0000000..4fb4aa1
--- /dev/null
+++ b/src/tools/template.js
@@ -0,0 +1,61 @@
+const fs = require('fs').promises
+const getopts = require('getopts')
+
+const options = getopts(process.argv.slice(2), {
+  alias: {
+    h: 'help',
+    n: 'name',
+    t: 'title',
+    d: 'desc'
+  }
+})
+
+/**
+ * Logs help.
+ * @returns {void}
+ */
+function showHelp () {
+  const baseCmd = 'node tools/template.js'
+
+  console.info(`usage:
+    -h, --help      show help info
+    -n, --name      set the example name
+    -t, --title     set the example title
+    -d, --desc      set the example desc
+  `)
+
+  console.info(`example:
+    ${baseCmd} -n 'name' -d 'desc'
+  `)
+}
+
+/**
+ * Perform document file writing.
+ * @returns {Promise<void>}
+ */
+async function run () {
+  if (options.help || Object.keys(options).length === 1) {
+    showHelp()
+    return
+  }
+  if (!options.name) {
+    console.error('You need to input -n, --name argv')
+    return
+  }
+  if (!options.title) {
+    options.title = options.name.split('-').join(' ')
+  }
+
+  let content = (await fs.readFile(`${__dirname}/example.tpl`)).toString()
+  content = content.replace(/@title@/, options.title || '')
+    .replace(/@desc@/, options.desc || '')
+
+  await fs.writeFile(`${__dirname}/../docs/examples/${options.name}.html`, content)
+  console.info(`${options.name}.html`)
+
+  let list = (await fs.readFile(`${__dirname}/../docs/_includes/example-list.md`)).toString()
+  list += `<li><a href="../examples#${options.name}.html">${options.title}</a></li>\n`
+  await fs.writeFile(`${__dirname}/../docs/_includes/example-list.md`, list)
+}
+
+run()
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
new file mode 100644
index 0000000..39ba8db
--- /dev/null
+++ b/src/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}
diff --git a/src/tsconfig.spec.json b/src/tsconfig.spec.json
new file mode 100644
index 0000000..63d89ff
--- /dev/null
+++ b/src/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..9049da1
--- /dev/null
+++ b/src/typings.d.ts
@@ -0,0 +1,12 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+
+
+interface NodeModule {
+  id: string;
+}
+
+
+// interface JQuery {
+//   multiSelect(options?: any, callback?: Function) : any;
+// }
\ No newline at end of file
diff --git a/text.js b/text.js
new file mode 100644
index 0000000..e339b3e
--- /dev/null
+++ b/text.js
@@ -0,0 +1,4 @@
+function show() {
+
+    alert("hfjdhfj");
+  }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a6c016b
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}
diff --git a/tslint.json b/tslint.json
new file mode 100644
index 0000000..e69de29
diff --git a/views/error.jade b/views/error.jade
new file mode 100644
index 0000000..51ec12c
--- /dev/null
+++ b/views/error.jade
@@ -0,0 +1,6 @@
+extends layout
+
+block content
+  h1= message
+  h2= error.status
+  pre #{error.stack}
diff --git a/views/index.jade b/views/index.jade
new file mode 100644
index 0000000..3d63b9a
--- /dev/null
+++ b/views/index.jade
@@ -0,0 +1,5 @@
+extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
diff --git a/views/layout.jade b/views/layout.jade
new file mode 100644
index 0000000..939090e
--- /dev/null
+++ b/views/layout.jade
@@ -0,0 +1,14 @@
+doctype html
+html
+  head
+    title= title
+    link(rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css")
+    link(rel='stylesheet', href='/stylesheets/style.css')
+  body
+
+    
+    script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js")
+    script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js")
+    script(src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js")
+    script(src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
+    block content
diff --git a/views/reset.jade b/views/reset.jade
new file mode 100644
index 0000000..de683a0
--- /dev/null
+++ b/views/reset.jade
@@ -0,0 +1,13 @@
+extends layout
+
+block content
+  form(method='POST')
+    legend Reset Password
+    .form-group
+      label(for='password') New Password
+      input.form-control(type='password', name='password', value='', placeholder='New password', autofocus=true)
+    .form-group
+      label(for='confirm') Confirm Password
+      input.form-control(type='password', name='confirm', value='', placeholder='Confirm password')
+    .form-group
+      button.btn.btn-primary(type='submit') Update Password
\ No newline at end of file